From ee778d6eea54935fd05022e0ba8c49456003381a Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:48:24 +0100 Subject: unslug ko: move --- files/ko/a_basic_raycaster/index.html | 53 - .../ko/a_re-introduction_to_javascript/index.html | 1038 ------------ .../index.html | 26 - files/ko/building_an_extension/index.html | 241 --- .../conflicting/learn/common_questions/index.html | 19 + .../index.html | 24 + .../cascade_and_inheritance/index.html | 127 ++ .../learn/css/building_blocks/index.html | 331 ++++ .../css/building_blocks/styling_tables/index.html | 475 ++++++ .../ko/conflicting/learn/css/css_layout/index.html | 370 +++++ .../learn/css/css_layout/introduction/index.html | 409 +++++ .../learn/css/styling_text/fundamentals/index.html | 150 ++ .../css/styling_text/styling_lists/index.html | 245 +++ .../javascript_basics/index.html | 328 ++++ .../advanced_text_formatting/index.html | 268 ++++ files/ko/conflicting/learn/index.html | 22 + .../learn/javascript/objects/index.html | 290 ++++ files/ko/conflicting/mdn/tools/index.html | 12 + files/ko/conflicting/mozilla/add-ons/index.html | 241 +++ .../web/api/document_object_model/index.html | 22 + files/ko/conflicting/web/api/index.html | 139 ++ .../tutorial/using_textures_in_webgl/index.html | 34 + files/ko/conflicting/web/css/@viewport/index.html | 76 + .../index.html | 73 + .../index.html | 71 + .../using_multiple_backgrounds/index.html | 56 + files/ko/conflicting/web/guide/index.html | 67 + .../guide/expressions_and_operators/index.html | 45 + .../index.html | 69 + .../index.html | 12 + .../index.html | 229 +++ .../index.html | 102 ++ .../javascript/guide/grammar_and_types/index.html | 29 + .../index.html | 65 + .../index.html | 110 ++ .../index.html | 175 +++ .../index.html | 40 + .../ko/conflicting/web/javascript/guide/index.html | 21 + .../javascript_technologies_overview/index.html | 115 ++ .../reference/global_objects/boolean/index.html | 82 + .../reference/global_objects/date/index.html | 183 +++ .../global_objects/internalerror/index.html | 101 ++ .../global_objects/intl/datetimeformat/index.html | 87 ++ .../global_objects/intl/numberformat/index.html | 86 + .../reference/global_objects/map/index.html | 87 ++ .../reference/global_objects/number/index.html | 91 ++ .../reference/global_objects/object/index.html | 219 +++ .../reference/global_objects/promise/index.html | 72 + .../reference/global_objects/set/index.html | 87 ++ .../global_objects/sharedarraybuffer/index.html | 66 + .../reference/global_objects/string/index.html | 219 +++ .../global_objects/syntaxerror/index.html | 127 ++ .../reference/global_objects/typedarray/index.html | 176 +++ .../reference/global_objects/weakmap/index.html | 143 ++ .../reference/global_objects/weakset/index.html | 142 ++ .../global_objects/webassembly/global/index.html | 70 + .../web/javascript/reference/operators/index.html | 291 ++++ .../index.html | 250 +++ .../index.html | 216 +++ .../index.html | 541 +++++++ .../index.html | 395 +++++ .../reference/statements/switch/index.html | 122 ++ .../index.html | 87 ++ files/ko/consistent_list_indentation/index.html | 106 -- files/ko/css3_columns/index.html | 204 --- .../index.html | 28 - files/ko/dhtml/index.html | 42 - files/ko/dom_improvements_in_firefox_3/index.html | 30 - files/ko/drawing_text_using_a_canvas/index.html | 164 -- files/ko/firefox_1.5_for_developers/index.html | 150 -- files/ko/firefox_2_for_developers/index.html | 85 - files/ko/firefox_3.5_for_developers/index.html | 302 ---- files/ko/full_page_zoom/index.html | 32 - .../2d_breakout_game_phaser/the_score/index.html | 73 + .../\353\223\235\354\240\220/index.html" | 73 - .../bounce_off_the_walls/index.html | 99 ++ .../build_the_brick_field/index.html | 112 ++ .../collision_detection/index.html | 128 ++ .../create_the_canvas_and_draw_on_it/index.html | 114 ++ .../finishing_up/index.html | 111 ++ .../game_over/index.html | 77 + .../2d_breakout_game_pure_javascript/index.html | 55 + .../mouse_controls/index.html | 57 + .../move_the_ball/index.html | 145 ++ .../paddle_and_keyboard_controls/index.html | 122 ++ .../track_the_score_and_win/index.html | 100 ++ .../bounce_off_the_walls/index.html" | 99 -- .../build_the_brick_field/index.html" | 112 -- .../collision_detection/index.html" | 128 -- .../finishing_up/index.html" | 111 -- .../game_over/index.html" | 77 - .../index.html" | 55 - .../mouse_controls/index.html" | 57 - .../paddle_and_keyboard_controls/index.html" | 122 -- .../track_the_score_and_win/index.html" | 100 -- .../index.html" | 145 -- .../index.html" | 114 -- files/ko/glossary/array/index.html | 30 + files/ko/glossary/boolean/index.html | 54 + files/ko/glossary/browsing_context/index.html | 24 + files/ko/glossary/cache/index.html | 14 + files/ko/glossary/dhtml/index.html | 42 + .../dynamic_programming_language/index.html | 20 + files/ko/glossary/header/index.html | 61 - files/ko/glossary/http_header/index.html | 61 + files/ko/glossary/identifier/index.html | 21 + files/ko/glossary/localization/index.html | 63 + files/ko/glossary/scope/index.html | 39 + .../transmission_control_protocol_(tcp)/index.html | 21 + files/ko/glossary/xhtml/index.html | 76 + .../index.html" | 20 - .../glossary/\353\260\260\354\227\264/index.html" | 30 - .../glossary/\353\266\210\353\246\260/index.html" | 54 - .../index.html" | 24 - .../index.html" | 39 - .../index.html" | 21 - .../index.html" | 21 - .../glossary/\354\272\220\354\213\234/index.html" | 14 - .../index.html | 192 --- .../index.html | 367 ----- .../index.html | 434 ------ files/ko/learn/accessibility/html/index.html | 537 +++++++ files/ko/learn/accessibility/index.html | 59 + files/ko/learn/accessibility/mobile/index.html | 315 ++++ .../accessibility/what_is_accessibility/index.html | 205 +++ .../index.html | 170 ++ .../thinking_before_coding/index.html | 176 +++ .../index.html" | 170 -- .../index.html" | 176 --- files/ko/learn/css/basics/layout/index.html | 409 ----- .../fundamental_css_comprehension/index.html | 128 ++ .../learn/css/building_blocks/selectors/index.html | 223 +++ .../css/building_blocks/the_box_model/index.html | 347 +++++ .../index.html" | 347 ----- .../index.html" | 223 --- .../learn/css/css_layout/media_queries/index.html | 424 +++++ .../ko/learn/css/css_layout/normal_flow/index.html | 102 ++ .../ko/learn/css/css_layout/positioning/index.html | 585 +++++++ .../css/css_layout/responsive_design/index.html | 333 ++++ .../supporting_older_browsers/index.html | 248 +++ .../index.html" | 424 ----- .../index.html" | 333 ---- .../index.html" | 585 ------- .../index.html" | 248 --- .../index.html" | 102 -- files/ko/learn/css/howto/css_faq/index.html | 199 +++ .../index.html" | 128 -- .../forms/how_to_structure_a_web_form/index.html | 928 +++++++++++ files/ko/learn/forms/index.html | 358 +++++ .../sending_and_retrieving_form_data/index.html | 249 +++ files/ko/learn/forms/your_first_form/index.html | 272 ++++ .../css_basics/index.html | 293 ++++ .../css_\352\270\260\353\263\270/index.html" | 293 ---- .../dealing_with_files/index.html | 117 ++ .../how_the_web_works/index.html | 99 ++ .../html_basics/index.html | 234 +++ .../html_\352\270\260\353\263\270/index.html" | 234 --- .../installing_basic_software/index.html | 75 + .../publishing_your_website/index.html | 176 +++ .../index.html" | 75 - .../index.html" | 176 --- .../index.html" | 99 -- .../index.html" | 117 -- files/ko/learn/how_to_contribute/index.html | 105 -- .../index.html" | 928 ----------- files/ko/learn/html/forms/index.html | 358 ----- .../sending_and_retrieving_form_data/index.html | 249 --- .../html/forms/your_first_html_form/index.html | 272 ---- .../author_fast-loading_html_pages/index.html | 132 ++ .../index.html | 268 ---- .../html/howto/use_data_attributes/index.html | 82 + .../index.html" | 82 - .../ideo_and_audio_content/index.html | 327 ---- .../video_and_audio_content/index.html | 327 ++++ files/ko/learn/infrastructure/index.html | 19 - .../building_blocks/conditionals/index.html | 770 +++++++++ .../index.html" | 770 --------- .../manipulating_documents/index.html | 145 ++ .../test_your_skills_colon__json/index.html | 65 + .../index.html" | 65 - .../development_environment/index.html | 399 +++++ .../express_nodejs/skeleton_website/index.html | 512 ++++++ .../index.html" | 399 ----- .../index.html" | 512 ------ .../node_server_without_framework/index.html | 74 + files/ko/learn/skills/index.html | 22 - .../learn/web_\352\270\260\354\210\240/index.html" | 24 - .../html/index.html" | 537 ------- .../index.html" | 59 - .../what_is_accessibility/index.html" | 205 --- .../index.html" | 315 ---- files/ko/localization/index.html | 63 - files/ko/mdn/about/mdn_services/index.html | 15 - files/ko/mdn/at_ten/index.html | 43 + files/ko/mdn/community/conversations/index.html | 63 - files/ko/mdn/community/index.html | 46 - .../mdn/community/working_in_community/index.html | 110 -- .../creating_and_editing_pages/index.html | 166 -- .../ko/mdn/contribute/does_this_belong/index.html | 139 -- .../convert_code_samples_to_be_live/index.html | 39 + .../howto/create_and_edit_pages/index.html | 166 ++ .../howto/do_a_technical_review/index.html | 41 - .../howto/do_an_editorial_review/index.html | 48 - .../index.html" | 32 - .../howto/set_the_summary_for_a_page/index.html | 53 - .../howto/tag_javascript_pages/index.html | 69 - .../write_an_api_reference/sidebars/index.html | 114 ++ .../index.html | 108 -- .../index.html" | 39 - files/ko/mdn/editor/index.html | 19 - files/ko/mdn/editor/links/index.html | 181 --- files/ko/mdn/guidelines/best_practices/index.html | 34 - .../code_guidelines/code_guidelines/index.html | 159 -- .../guidelines/code_guidelines/general/index.html | 159 ++ .../guidelines/conventions_definitions/index.html | 34 + .../guidelines/does_this_belong_on_mdn/index.html | 139 ++ files/ko/mdn/guidelines/style_guide/index.html | 833 ---------- .../mdn/guidelines/writing_style_guide/index.html | 833 ++++++++++ files/ko/mdn/kuma/index.html | 26 - .../api_reference_sidebars/index.html | 114 -- files/ko/mdn/structures/api_references/index.html | 58 - .../index.html" | 34 - files/ko/mdn/user_guide/index.html | 12 - files/ko/mdn/yari/index.html | 26 + files/ko/mdn_at_ten/index.html | 43 - .../api/contextmenus/contexttype/index.html | 95 -- .../api/contextmenus/create/index.html | 212 --- .../api/contextmenus/gettargetelement/index.html | 58 - .../webextensions/api/contextmenus/index.html | 183 --- .../api/contextmenus/onshown/index.html | 144 -- .../webextensions/api/menus/contexttype/index.html | 95 ++ .../webextensions/api/menus/create/index.html | 212 +++ .../api/menus/gettargetelement/index.html | 58 + .../add-ons/webextensions/api/menus/index.html | 183 +++ .../webextensions/api/menus/onshown/index.html | 144 ++ .../developer_guide/source_code/cvs/index.html | 136 ++ .../index.html | 26 + files/ko/mozilla/firefox/releases/1.5/index.html | 150 ++ files/ko/mozilla/firefox/releases/2/index.html | 85 + .../releases/2/updating_extensions/index.html | 30 + files/ko/mozilla/firefox/releases/3.5/index.html | 302 ++++ files/ko/mozilla/firefox/releases/3.6/index.html | 261 ++++ .../firefox/releases/3/dom_improvements/index.html | 30 + .../firefox/releases/3/full_page_zoom/index.html | 32 + .../releases/3/notable_bugs_fixed/index.html | 32 + .../firefox/releases/3/svg_improvements/index.html | 56 + .../releases/3/updating_extensions/index.html | 137 ++ .../3/updating_web_applications/index.html | 38 + files/ko/mozilla_source_code_via_cvs/index.html | 136 -- files/ko/navigation_timing/index.html | 137 -- files/ko/node_server_without_framework/index.html | 74 - .../ko/notable_bugs_fixed_in_firefox_3/index.html | 32 - .../index.html | 192 +++ .../index.html | 434 ++++++ .../ko/orphaned/learn/how_to_contribute/index.html | 105 ++ .../ko/orphaned/mdn/about/mdn_services/index.html | 15 + .../mdn/community/conversations/index.html | 63 + files/ko/orphaned/mdn/community/index.html | 46 + .../mdn/community/working_in_community/index.html | 110 ++ .../howto/create_an_mdn_account/index.html | 32 + .../howto/do_a_technical_review/index.html | 41 + .../howto/do_an_editorial_review/index.html | 48 + .../property_template/index.html | 131 ++ .../howto/set_the_summary_for_a_page/index.html | 53 + .../howto/tag_javascript_pages/index.html | 69 + .../index.html | 108 ++ files/ko/orphaned/mdn/editor/index.html | 19 + files/ko/orphaned/mdn/editor/links/index.html | 181 +++ .../mdn/structures/api_references/index.html | 58 + .../mdn/tools/page_regeneration/index.html | 34 + .../orphaned/places/custom_containers/index.html | 21 + .../orphaned/places/instantiating_views/index.html | 70 + files/ko/orphaned/places/query_system/index.html | 173 ++ files/ko/orphaned/places/views/index.html | 43 + files/ko/orphaned/theme_packaging/index.html | 98 ++ .../tools/add-ons/dom_inspector/index.html | 16 + files/ko/orphaned/tools/add-ons/index.html | 17 + .../index.html | 13 + files/ko/orphaned/web/css/index/index.html | 10 + .../orphaned/web/html/element/command/index.html | 111 ++ .../orphaned/web/html/element/element/index.html | 57 + .../web/html/global_attributes/dropzone/index.html | 53 + .../index.html | 63 + .../core_javascript_1.5_guide/about/index.html | 109 ++ .../index.html | 26 + .../creating_a_regular_expression/index.html | 35 + .../defining_getters_and_setters/index.html | 84 + .../defining_methods/index.html | 43 + .../index.html | 11 + .../deleting_properties/index.html | 20 + .../creating_new_objects/index.html | 6 + .../indexing_object_properties/index.html | 9 + .../using_a_constructor_function/index.html | 58 + .../using_this_for_object_references/index.html | 25 + .../expressions/index.html | 16 + .../javascript_overview/index.html | 44 + .../objects_and_properties/index.html | 39 + .../operators/assignment_operators/index.html | 62 + .../core_javascript_1.5_guide/operators/index.html | 108 ++ .../array_object/index.html | 133 ++ .../global_objects/bigint/prototype/index.html | 59 + .../information_security_basics/index.html | 28 + .../windows_and_menus_in_xulrunner/index.html | 127 ++ .../index.html" | 5 + .../index.html" | 88 ++ files/ko/places/custom_containers/index.html | 21 - files/ko/places/instantiating_views/index.html | 70 - files/ko/places/query_system/index.html | 173 -- files/ko/places/views/index.html | 43 - .../ko/plugins/guide/scripting_plugins/index.html | 7 + files/ko/scripting_plugins/index.html | 7 - files/ko/svg_improvements_in_firefox_3/index.html | 56 - files/ko/svg_in_firefox/index.html | 845 ---------- files/ko/the_dom_and_javascript/index.html | 115 -- files/ko/theme_packaging/index.html | 98 -- .../index.html | 132 -- files/ko/tools/add-ons/dom_inspector/index.html | 16 - files/ko/tools/add-ons/index.html | 17 - files/ko/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 24 + files/ko/tools/debugger/how_to/search/index.html | 24 + .../debugger/how_to/set_a_breakpoint/index.html | 31 + .../tools/debugger/keyboard_shortcuts/index.html | 10 + .../index.html" | 10 - files/ko/tools/how_to/index.html | 11 - files/ko/tools/how_to/open_the_debugger/index.html | 24 - files/ko/tools/how_to/search/index.html | 24 - files/ko/tools/how_to/set_a_breakpoint/index.html | 31 - .../updating_extensions_for_firefox_2/index.html | 30 - .../updating_extensions_for_firefox_3/index.html | 137 -- .../index.html | 38 - .../index.html | 13 - files/ko/using_xpath/index.html | 87 -- files/ko/web/api/ambient_light_events/index.html | 64 + files/ko/web/api/battery_status_api/index.html | 75 + .../api/broadcastchannel/message_event/index.html | 152 ++ .../api/canvas_api/a_basic_ray-caster/index.html | 53 + files/ko/web/api/canvas_api/index.html | 135 ++ .../manipulating_video_using_canvas/index.html | 164 ++ .../tutorial/advanced_animations/index.html | 376 +++++ .../tutorial/applying_styles_and_colors/index.html | 732 +++++++++ .../tutorial/basic_animations/index.html | 310 ++++ .../api/canvas_api/tutorial/basic_usage/index.html | 154 ++ .../tutorial/compositing/example/index.html | 293 ++++ .../api/canvas_api/tutorial/compositing/index.html | 106 ++ .../canvas_api/tutorial/drawing_shapes/index.html | 577 +++++++ .../canvas_api/tutorial/drawing_text/index.html | 164 ++ .../web/api/canvas_api/tutorial/finale/index.html | 51 + .../hit_regions_and_accessibility/index.html | 97 ++ files/ko/web/api/canvas_api/tutorial/index.html | 62 + .../tutorial/optimizing_canvas/index.html | 110 ++ .../canvas_api/tutorial/transformations/index.html | 286 ++++ .../canvas_api/tutorial/using_images/index.html | 347 +++++ .../index.html | 28 + .../managing_screen_orientation/index.html | 136 ++ .../api/detecting_device_orientation/index.html | 273 ++++ files/ko/web/api/document/createevent/index.html | 30 + files/ko/web/api/document/getselection/index.html | 9 - .../document_object_model/introduction/index.html | 239 +++ .../\354\206\214\352\260\234/index.html" | 239 --- .../documentorshadowroot/getselection/index.html | 9 + files/ko/web/api/element/accesskey/index.html | 35 - files/ko/web/api/element/blur_event/index.html | 154 ++ .../web/api/elementcssinlinestyle/style/index.html | 41 + files/ko/web/api/event/createevent/index.html | 30 - .../index.html" | 419 ----- files/ko/web/api/fetch_api/using_fetch/index.html | 419 +++++ files/ko/web/api/fullscreen_api/index.html | 198 +++ .../using_the_geolocation_api/index.html | 165 ++ .../drag_operations/index.html | 343 ++++ files/ko/web/api/html_drag_and_drop_api/index.html | 303 ++++ .../drag_operations/index.html" | 343 ---- .../index.html" | 303 ---- files/ko/web/api/htmlelement/accesskey/index.html | 35 + files/ko/web/api/htmlelement/dataset/index.html | 127 -- files/ko/web/api/htmlelement/innertext/index.html | 88 ++ files/ko/web/api/htmlelement/style/index.html | 41 - files/ko/web/api/htmlelement/tabindex/index.html | 26 - .../api/htmlmediaelement/abort_event/index.html | 74 + .../api/htmlorforeignelement/dataset/index.html | 127 ++ .../api/htmlorforeignelement/tabindex/index.html | 26 + files/ko/web/api/navigation_timing_api/index.html | 137 ++ files/ko/web/api/navigator/connection/index.html | 105 ++ .../ko/web/api/network_information_api/index.html | 46 + .../api/networkinformation/connection/index.html | 105 -- files/ko/web/api/node/innertext/index.html | 88 -- .../using_the_notifications_api/index.html | 265 ++++ files/ko/web/api/proximity_events/index.html | 119 ++ .../web/api/screen.onorientationchange/index.html | 85 - .../web/api/screen/onorientationchange/index.html | 85 + files/ko/web/api/streams_api/concepts/index.html | 115 ++ .../\354\273\250\354\205\211/index.html" | 115 -- files/ko/web/api/vibration_api/index.html | 100 ++ .../web/api/web_workers_api/basic_usage/index.html | 908 ----------- .../web_workers_api/using_web_workers/index.html | 908 +++++++++++ .../api/webgl_api/cross-domain_textures/index.html | 34 - files/ko/web/api/websockets_api/index.html | 172 ++ .../index.html | 191 +++ .../writing_websocket_servers/index.html | 258 +++ .../api/window/domcontentloaded_event/index.html | 77 + files/ko/web/api/window/load_event/index.html | 128 ++ .../settimeout/index.html | 429 +++++ .../ko/web/api/windowtimers/settimeout/index.html | 429 ----- files/ko/web/api/xmlhttprequest/timeout/index.html | 123 -- .../api/xmlhttprequest/timeout_event/index.html | 123 ++ .../web/api/xsltprocessor/basic_example/index.html | 49 + .../xsltprocessor/browser_differences/index.html | 8 + .../api/xsltprocessor/generating_html/index.html | 174 +++ files/ko/web/api/xsltprocessor/index.html | 15 + .../web/api/xsltprocessor/introduction/index.html | 13 + .../ko/web/api/xsltprocessor/resources/index.html | 14 + files/ko/web/css/@viewport/height/index.html | 76 - files/ko/web/css/@viewport/viewport-fit/index.html | 73 - files/ko/web/css/@viewport/zoom/index.html | 71 - .../web/css/adjacent_sibling_combinator/index.html | 83 + .../css/all_about_the_containing_block/index.html | 263 ---- files/ko/web/css/common_css_questions/index.html | 199 --- files/ko/web/css/containing_block/index.html | 263 ++++ .../using_css_multiple_backgrounds/index.html | 56 - .../resizing_background_images/index.html | 137 ++ .../scaling_background_images/index.html | 137 -- .../index.html | 70 + .../using_multi-column_layouts/index.html | 204 +++ .../basic_concepts_of_flexbox/index.html | 236 +++ .../index.html" | 236 --- .../typical_use_cases_of_flexbox/index.html | 141 ++ .../index.html" | 141 -- .../index.html | 122 ++ .../flow_layout_and_overflow/index.html | 73 + .../flow_layout_and_writing_modes/index.html | 92 ++ .../in_flow_and_out_of_flow/index.html | 72 + .../index.html" | 72 - .../index.html" | 122 -- .../index.html" | 92 -- .../index.html" | 73 - .../consistent_list_indentation/index.html | 106 ++ files/ko/web/css/css_masking/index.html | 68 + files/ko/web/css/css_masks/index.html | 68 - files/ko/web/css/css_values_and_units/index.html | 497 ++++++ .../index.html" | 497 ------ .../index.html | 70 - .../web/css/getting_started/javascript/index.html | 145 -- .../css/getting_started/svg_graphics/index.html | 195 --- files/ko/web/css/index/index.html | 10 - .../media_queries/using_media_queries/index.html | 386 +++++ .../web/css/reference/property_template/index.html | 131 -- files/ko/web/css/url()/index.html | 80 + files/ko/web/css/url/index.html | 80 - .../ko/web/css/visual_formatting_model/index.html | 223 +++ .../index.html" | 245 --- .../index.html" | 346 ---- .../\353\260\260\354\271\230/index.html" | 370 ----- .../\354\203\201\354\236\220/index.html" | 331 ---- .../index.html" | 127 -- .../index.html" | 475 ------ .../index.html" | 150 -- .../index.html" | 83 - files/ko/web/events/abort/index.html | 74 - files/ko/web/events/blur/index.html | 154 -- files/ko/web/events/domcontentloaded/index.html | 77 - files/ko/web/events/load/index.html | 128 -- files/ko/web/events/message/index.html | 152 -- .../web/guide/api/vibration/vibration/index.html | 100 -- files/ko/web/guide/css/media_queries/index.html | 386 ----- .../guide/css/visual_formatting_model/index.html | 223 --- files/ko/web/guide/dom/index.html | 22 - .../guide/dom/using_full_screen_mode/index.html | 198 --- files/ko/web/guide/graphics/index.html | 48 + .../ko/web/guide/html/content_editable/index.html | 65 - .../ko/web/guide/html/editable_content/index.html | 65 + files/ko/web/guide/html/html5/index.html | 122 ++ .../html/html5/introduction_to_html5/index.html | 40 + .../using_html_sections_and_outlines/index.html | 367 +++++ .../guide/parsing_and_serializing_xml/index.html | 141 ++ .../index.html" | 141 -- .../index.html" | 48 - files/ko/web/html/canvas/index.html | 135 -- .../manipulating_video_using_canvas/index.html | 164 -- .../canvas/tutorial/advanced_animations/index.html | 376 ----- .../tutorial/applying_styles_and_colors/index.html | 732 --------- .../canvas/tutorial/basic_animations/index.html | 310 ---- .../html/canvas/tutorial/basic_usage/index.html | 154 -- .../canvas/tutorial/compositing/example/index.html | 293 ---- .../html/canvas/tutorial/compositing/index.html | 106 -- .../html/canvas/tutorial/drawing_shapes/index.html | 577 ------- .../ko/web/html/canvas/tutorial/finale/index.html | 51 - .../hit_regions_and_accessibility/index.html | 97 -- files/ko/web/html/canvas/tutorial/index.html | 62 - .../canvas/tutorial/optimizing_canvas/index.html | 110 -- .../html/canvas/tutorial/using_images/index.html | 347 ----- .../tutorial/\353\263\200\355\230\225/index.html" | 286 ---- files/ko/web/html/element/command/index.html | 111 -- files/ko/web/html/element/element/index.html | 57 - .../ko/web/html/global_attributes/class/index.html | 64 + .../web/html/global_attributes/dropzone/index.html | 53 - .../index.html" | 64 - files/ko/web/html/html5/index.html | 122 -- .../html/html5/introduction_to_html5/index.html | 40 - .../index.html" | 367 ----- .../index.html | 296 ++++ .../index.html" | 296 ---- .../a_re-introduction_to_javascript/index.html | 1038 ++++++++++++ files/ko/web/javascript/about/index.html | 58 - .../ko/web/javascript/about_javascript/index.html | 58 + files/ko/web/javascript/closures/index.html | 454 ++++++ .../index.html | 63 - files/ko/web/javascript/guide/closures/index.html | 454 ------ .../guide/details_of_the_object_model/index.html | 714 +++++++++ files/ko/web/javascript/guide/functions/index.html | 658 ++++++++ .../javascript/guide/grammar_and_types/index.html | 708 +++++++++ .../inheritance_and_the_prototype_chain/index.html | 531 ------- .../web/javascript/guide/introduction/index.html | 153 ++ .../javascript/guide/meta_programming/index.html | 258 +++ .../core_javascript_1.5_guide/about/index.html | 109 -- .../index.html | 26 - .../core_javascript_1.5_guide/constants/index.html | 29 - .../creating_a_regular_expression/index.html | 35 - .../defining_getters_and_setters/index.html | 84 - .../defining_methods/index.html | 43 - .../index.html | 11 - .../deleting_properties/index.html | 20 - .../creating_new_objects/index.html | 6 - .../indexing_object_properties/index.html | 9 - .../using_a_constructor_function/index.html | 58 - .../using_this_for_object_references/index.html | 25 - .../expressions/index.html | 16 - .../javascript_overview/index.html | 44 - .../core_javascript_1.5_guide/literals/index.html | 175 --- .../objects_and_properties/index.html | 39 - .../operators/arithmetic_operators/index.html | 45 - .../operators/assignment_operators/index.html | 62 - .../operators/bitwise_operators/index.html | 102 -- .../core_javascript_1.5_guide/operators/index.html | 108 -- .../operators/logical_operators/index.html | 69 - .../operators/special_operators/index.html | 229 --- .../operators/string_operators/index.html | 12 - .../array_object/index.html | 133 -- .../predefined_core_objects/index.html | 21 - .../core_javascript_1.5_guide/unicode/index.html | 110 -- .../core_javascript_1.5_guide/values/index.html | 40 - .../core_javascript_1.5_guide/variables/index.html | 65 - .../regular_expressions/assertions/index.html | 244 +++ .../groups_and_ranges/index.html | 91 ++ .../guide/regular_expressions/index.html | 666 ++++++++ .../values,_variables,_and_literals/index.html | 708 --------- .../index.html" | 714 --------- .../index.html" | 258 --- .../guide/\354\206\214\352\260\234/index.html" | 153 -- .../assertions/index.html" | 244 --- .../groups_and_ranges/index.html" | 91 -- .../index.html" | 666 -------- .../guide/\355\225\250\354\210\230/index.html" | 658 -------- .../inheritance_and_the_prototype_chain/index.html | 531 +++++++ .../index.html | 290 ---- .../web/javascript/language_resources/index.html | 155 ++ .../reference/classes/class_fields/index.html | 396 ----- .../classes/public_class_fields/index.html | 396 +++++ .../reference/functions/arrow_functions/index.html | 465 ++++++ .../index.html" | 465 ------ .../global_objects/bigint/prototype/index.html | 59 - .../global_objects/boolean/prototype/index.html | 82 - .../global_objects/date/prototype/index.html | 183 --- .../internalerror/prototype/index.html | 101 -- .../intl/datetimeformat/prototype/index.html | 87 -- .../intl/numberformat/prototype/index.html | 86 - .../global_objects/map/prototype/index.html | 87 -- .../global_objects/number/prototype/index.html | 91 -- .../global_objects/object/prototype/index.html | 219 --- .../global_objects/promise/prototype/index.html | 72 - .../global_objects/proxy/handler/apply/index.html | 154 -- .../global_objects/proxy/handler/index.html | 82 - .../global_objects/proxy/proxy/apply/index.html | 154 ++ .../global_objects/proxy/proxy/index.html | 82 + .../global_objects/set/prototype/index.html | 87 -- .../sharedarraybuffer/prototype/index.html | 66 - .../global_objects/string/prototype/index.html | 219 --- .../syntaxerror/prototype/index.html | 127 -- .../global_objects/typedarray/prototype/index.html | 176 --- .../global_objects/weakmap/prototype/index.html | 143 -- .../global_objects/weakset/prototype/index.html | 142 -- .../webassembly/global/prototype/index.html | 70 - .../operators/arithmetic_operators/index.html | 291 ---- .../operators/assignment_operators/index.html | 395 ----- .../operators/bitwise_operators/index.html | 541 ------- .../operators/comparison_operators/index.html | 216 --- .../operators/operator_precedence/index.html | 462 ++++++ .../index.html" | 250 --- .../index.html" | 462 ------ .../reference/statements/default/index.html | 122 -- files/ko/web/javascript/shells/index.html | 40 + "files/ko/web/javascript/\354\211\230/index.html" | 40 - .../index.html" | 328 ---- .../index.html" | 155 -- .../web/media/formats/codecs_parameter/index.html | 971 ++++++++++++ files/ko/web/media/formats/containers/index.html | 1279 +++++++++++++++ files/ko/web/media/formats/video_codecs/index.html | 1646 ++++++++++++++++++++ .../index.html" | 1646 -------------------- .../index.html" | 1279 --------------- .../index.html" | 971 ------------ .../performance/critical_rendering_path/index.html | 60 + .../web/performance/how_browsers_work/index.html | 204 +++ .../index.html" | 204 --- .../index.html" | 60 - .../progressive_web_apps/introduction/index.html | 92 ++ .../responsive/media_types/index.html | 346 ++++ .../\354\206\214\352\260\234/index.html" | 92 -- files/ko/web/reference/api/index.html | 65 + files/ko/web/reference/index.html | 30 + .../index.html" | 28 - files/ko/web/svg/element/rect/index.html | 95 ++ .../index.html" | 95 -- .../web/svg/svg_1.1_support_in_firefox/index.html | 845 ++++++++++ files/ko/web/svg/tutorial/basic_shapes/index.html | 141 ++ .../ko/web/svg/tutorial/getting_started/index.html | 94 ++ files/ko/web/svg/tutorial/positions/index.html | 45 + files/ko/web/svg/tutorial/svg_and_css/index.html | 195 +++ .../index.html" | 141 -- .../index.html" | 94 -- .../tutorial/\354\234\204\354\271\230/index.html" | 45 - .../index.html | 367 +++++ files/ko/web/xslt/apply-imports/index.html | 22 - files/ko/web/xslt/apply-templates/index.html | 33 - files/ko/web/xslt/attribute-set/index.html | 33 - files/ko/web/xslt/attribute/index.html | 33 - files/ko/web/xslt/call-template/index.html | 29 - files/ko/web/xslt/choose/index.html | 24 - files/ko/web/xslt/comment/index.html | 23 - files/ko/web/xslt/copy-of/index.html | 26 - files/ko/web/xslt/copy/index.html | 28 - files/ko/web/xslt/decimal-format/index.html | 100 -- files/ko/web/xslt/element/apply-imports/index.html | 22 + .../ko/web/xslt/element/apply-templates/index.html | 33 + files/ko/web/xslt/element/attribute-set/index.html | 33 + files/ko/web/xslt/element/attribute/index.html | 33 + files/ko/web/xslt/element/call-template/index.html | 29 + files/ko/web/xslt/element/choose/index.html | 24 + files/ko/web/xslt/element/comment/index.html | 23 + files/ko/web/xslt/element/copy-of/index.html | 26 + files/ko/web/xslt/element/copy/index.html | 28 + .../ko/web/xslt/element/decimal-format/index.html | 100 ++ files/ko/web/xslt/element/fallback/index.html | 23 + files/ko/web/xslt/element/for-each/index.html | 29 + files/ko/web/xslt/element/if/index.html | 28 + files/ko/web/xslt/element/import/index.html | 26 + files/ko/web/xslt/element/include/index.html | 26 + files/ko/web/xslt/element/key/index.html | 35 + files/ko/web/xslt/element/message/index.html | 28 + .../ko/web/xslt/element/namespace-alias/index.html | 30 + files/ko/web/xslt/element/number/index.html | 173 ++ files/ko/web/xslt/element/otherwise/index.html | 23 + files/ko/web/xslt/element/output/index.html | 90 ++ files/ko/web/xslt/element/param/index.html | 33 + .../ko/web/xslt/element/preserve-space/index.html | 26 + .../xslt/element/processing-instruction/index.html | 26 + files/ko/web/xslt/element/sort/index.html | 55 + files/ko/web/xslt/element/strip-space/index.html | 26 + files/ko/web/xslt/element/stylesheet/index.html | 52 + files/ko/web/xslt/element/template/index.html | 51 + files/ko/web/xslt/element/text/index.html | 28 + files/ko/web/xslt/element/transform/index.html | 11 + files/ko/web/xslt/element/value-of/index.html | 31 + files/ko/web/xslt/element/variable/index.html | 33 + files/ko/web/xslt/element/when/index.html | 28 + files/ko/web/xslt/element/with-param/index.html | 33 + files/ko/web/xslt/fallback/index.html | 23 - files/ko/web/xslt/for-each/index.html | 29 - files/ko/web/xslt/if/index.html | 28 - files/ko/web/xslt/import/index.html | 26 - files/ko/web/xslt/include/index.html | 26 - files/ko/web/xslt/key/index.html | 35 - files/ko/web/xslt/message/index.html | 28 - files/ko/web/xslt/namespace-alias/index.html | 30 - files/ko/web/xslt/number/index.html | 173 -- files/ko/web/xslt/otherwise/index.html | 23 - files/ko/web/xslt/output/index.html | 90 -- files/ko/web/xslt/param/index.html | 33 - files/ko/web/xslt/preserve-space/index.html | 26 - .../ko/web/xslt/processing-instruction/index.html | 26 - files/ko/web/xslt/sort/index.html | 55 - files/ko/web/xslt/strip-space/index.html | 26 - files/ko/web/xslt/stylesheet/index.html | 52 - files/ko/web/xslt/template/index.html | 51 - files/ko/web/xslt/text/index.html | 28 - .../index.html | 17 - .../introduction/index.html | 10 - .../setting_parameters/index.html | 23 - files/ko/web/xslt/transform/index.html | 11 - files/ko/web/xslt/value-of/index.html | 31 - files/ko/web/xslt/variable/index.html | 33 - files/ko/web/xslt/when/index.html | 28 - files/ko/web/xslt/with-param/index.html | 33 - .../web/xslt/xslt_js_interface_in_gecko/index.html | 17 + .../introduction/index.html | 10 + .../setting_parameters/index.html | 23 + .../web/\354\260\270\354\241\260/api/index.html" | 65 - "files/ko/web/\354\260\270\354\241\260/index.html" | 30 - files/ko/web_development/index.html | 67 - files/ko/webapi/battery_status/index.html | 75 - .../webapi/detecting_device_orientation/index.html | 273 ---- files/ko/webapi/index.html | 139 -- .../webapi/managing_screen_orientation/index.html | 136 -- files/ko/webapi/network_information/index.html | 46 - files/ko/webapi/proximity/index.html | 119 -- files/ko/webapi/using_geolocation/index.html | 165 -- files/ko/webapi/using_light_events/index.html | 64 - files/ko/webapi/using_web_notifications/index.html | 265 ---- files/ko/websockets/index.html | 172 -- .../index.html | 191 --- .../writing_websocket_servers/index.html | 258 --- files/ko/windows_and_menus_in_xulrunner/index.html | 127 -- files/ko/xhtml/index.html | 76 - files/ko/xslt_in_gecko/basic_example/index.html | 49 - .../xslt_in_gecko/browser_differences/index.html | 8 - files/ko/xslt_in_gecko/generating_html/index.html | 174 --- files/ko/xslt_in_gecko/index.html | 15 - files/ko/xslt_in_gecko/introduction/index.html | 13 - files/ko/xslt_in_gecko/resources/index.html | 14 - .../index.html" | 261 ---- .../index.html" | 5 - .../index.html" | 88 -- 720 files changed, 56773 insertions(+), 56773 deletions(-) delete mode 100644 files/ko/a_basic_raycaster/index.html delete mode 100644 files/ko/a_re-introduction_to_javascript/index.html delete mode 100644 files/ko/adapting_xul_applications_for_firefox_1.5/index.html delete mode 100644 files/ko/building_an_extension/index.html create mode 100644 files/ko/conflicting/learn/common_questions/index.html create mode 100644 files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html create mode 100644 files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/ko/conflicting/learn/css/building_blocks/index.html create mode 100644 files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html create mode 100644 files/ko/conflicting/learn/css/css_layout/index.html create mode 100644 files/ko/conflicting/learn/css/css_layout/introduction/index.html create mode 100644 files/ko/conflicting/learn/css/styling_text/fundamentals/index.html create mode 100644 files/ko/conflicting/learn/css/styling_text/styling_lists/index.html create mode 100644 files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html create mode 100644 files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/ko/conflicting/learn/index.html create mode 100644 files/ko/conflicting/learn/javascript/objects/index.html create mode 100644 files/ko/conflicting/mdn/tools/index.html create mode 100644 files/ko/conflicting/mozilla/add-ons/index.html create mode 100644 files/ko/conflicting/web/api/document_object_model/index.html create mode 100644 files/ko/conflicting/web/api/index.html create mode 100644 files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html create mode 100644 files/ko/conflicting/web/css/@viewport/index.html create mode 100644 files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html create mode 100644 files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html create mode 100644 files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/ko/conflicting/web/guide/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html create mode 100644 files/ko/conflicting/web/javascript/guide/index.html create mode 100644 files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/date/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/map/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/number/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/object/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/set/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/string/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/operators/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html create mode 100644 files/ko/conflicting/web/javascript/reference/statements/switch/index.html create mode 100644 files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/ko/consistent_list_indentation/index.html delete mode 100644 files/ko/css3_columns/index.html delete mode 100644 files/ko/determining_the_dimensions_of_elements/index.html delete mode 100644 files/ko/dhtml/index.html delete mode 100644 files/ko/dom_improvements_in_firefox_3/index.html delete mode 100644 files/ko/drawing_text_using_a_canvas/index.html delete mode 100644 files/ko/firefox_1.5_for_developers/index.html delete mode 100644 files/ko/firefox_2_for_developers/index.html delete mode 100644 files/ko/firefox_3.5_for_developers/index.html delete mode 100644 files/ko/full_page_zoom/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html delete mode 100644 "files/ko/games/tutorials/2d_breakout_game_phaser/\353\223\235\354\240\220/index.html" create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html create mode 100644 files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/bounce_off_the_walls/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/build_the_brick_field/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/collision_detection/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/finishing_up/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/game_over/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/mouse_controls/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/paddle_and_keyboard_controls/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/track_the_score_and_win/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\352\263\265_\354\233\200\354\247\201\354\235\264\352\270\260/index.html" delete mode 100644 "files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\354\272\224\353\262\204\354\212\244_\354\203\235\354\204\261\352\263\274_\352\267\270\353\246\254\352\270\260/index.html" create mode 100644 files/ko/glossary/array/index.html create mode 100644 files/ko/glossary/boolean/index.html create mode 100644 files/ko/glossary/browsing_context/index.html create mode 100644 files/ko/glossary/cache/index.html create mode 100644 files/ko/glossary/dhtml/index.html create mode 100644 files/ko/glossary/dynamic_programming_language/index.html delete mode 100644 files/ko/glossary/header/index.html create mode 100644 files/ko/glossary/http_header/index.html create mode 100644 files/ko/glossary/identifier/index.html create mode 100644 files/ko/glossary/localization/index.html create mode 100644 files/ko/glossary/scope/index.html create mode 100644 files/ko/glossary/transmission_control_protocol_(tcp)/index.html create mode 100644 files/ko/glossary/xhtml/index.html delete mode 100644 "files/ko/glossary/\353\217\231\354\240\201_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215_\354\226\270\354\226\264/index.html" delete mode 100644 "files/ko/glossary/\353\260\260\354\227\264/index.html" delete mode 100644 "files/ko/glossary/\353\266\210\353\246\260/index.html" delete mode 100644 "files/ko/glossary/\353\270\214\353\235\274\354\232\260\354\240\200-\354\273\250\355\205\215\354\212\244\355\212\270/index.html" delete mode 100644 "files/ko/glossary/\354\212\244\354\275\224\355\224\204/index.html" delete mode 100644 "files/ko/glossary/\354\213\235\353\263\204\354\236\220/index.html" delete mode 100644 "files/ko/glossary/\354\240\204\354\206\241_\354\240\234\354\226\264_\355\224\204\353\241\234\355\206\240\354\275\234_(tcp)/index.html" delete mode 100644 "files/ko/glossary/\354\272\220\354\213\234/index.html" delete mode 100644 files/ko/how_to_build_an_xpcom_component_in_javascript/index.html delete mode 100644 files/ko/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/ko/javascript_c_engine_embedder's_guide/index.html create mode 100644 files/ko/learn/accessibility/html/index.html create mode 100644 files/ko/learn/accessibility/index.html create mode 100644 files/ko/learn/accessibility/mobile/index.html create mode 100644 files/ko/learn/accessibility/what_is_accessibility/index.html create mode 100644 files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html create mode 100644 files/ko/learn/common_questions/thinking_before_coding/index.html delete mode 100644 "files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" delete mode 100644 "files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/learn/css/basics/layout/index.html create mode 100644 files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ko/learn/css/building_blocks/selectors/index.html create mode 100644 files/ko/learn/css/building_blocks/the_box_model/index.html delete mode 100644 "files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" delete mode 100644 "files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" create mode 100644 files/ko/learn/css/css_layout/media_queries/index.html create mode 100644 files/ko/learn/css/css_layout/normal_flow/index.html create mode 100644 files/ko/learn/css/css_layout/positioning/index.html create mode 100644 files/ko/learn/css/css_layout/responsive_design/index.html create mode 100644 files/ko/learn/css/css_layout/supporting_older_browsers/index.html delete mode 100644 "files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" delete mode 100644 "files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" create mode 100644 files/ko/learn/css/howto/css_faq/index.html delete mode 100644 "files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" create mode 100644 files/ko/learn/forms/how_to_structure_a_web_form/index.html create mode 100644 files/ko/learn/forms/index.html create mode 100644 files/ko/learn/forms/sending_and_retrieving_form_data/index.html create mode 100644 files/ko/learn/forms/your_first_form/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/css_basics/index.html delete mode 100644 "files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" create mode 100644 files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/html_basics/index.html delete mode 100644 "files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" create mode 100644 files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html delete mode 100644 "files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" delete mode 100644 "files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" delete mode 100644 files/ko/learn/how_to_contribute/index.html delete mode 100644 "files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" delete mode 100644 files/ko/learn/html/forms/index.html delete mode 100644 files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html delete mode 100644 files/ko/learn/html/forms/your_first_html_form/index.html create mode 100644 files/ko/learn/html/howto/author_fast-loading_html_pages/index.html delete mode 100644 files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html create mode 100644 files/ko/learn/html/howto/use_data_attributes/index.html delete mode 100644 "files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html create mode 100644 files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html delete mode 100644 files/ko/learn/infrastructure/index.html create mode 100644 files/ko/learn/javascript/building_blocks/conditionals/index.html delete mode 100644 "files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" create mode 100644 files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html create mode 100644 files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html delete mode 100644 "files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" create mode 100644 files/ko/learn/server-side/express_nodejs/development_environment/index.html create mode 100644 files/ko/learn/server-side/express_nodejs/skeleton_website/index.html delete mode 100644 "files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" delete mode 100644 "files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" create mode 100644 files/ko/learn/server-side/node_server_without_framework/index.html delete mode 100644 files/ko/learn/skills/index.html delete mode 100644 "files/ko/learn/web_\352\270\260\354\210\240/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" delete mode 100644 "files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" delete mode 100644 files/ko/localization/index.html delete mode 100644 files/ko/mdn/about/mdn_services/index.html create mode 100644 files/ko/mdn/at_ten/index.html delete mode 100644 files/ko/mdn/community/conversations/index.html delete mode 100644 files/ko/mdn/community/index.html delete mode 100644 files/ko/mdn/community/working_in_community/index.html delete mode 100644 files/ko/mdn/contribute/creating_and_editing_pages/index.html delete mode 100644 files/ko/mdn/contribute/does_this_belong/index.html create mode 100644 files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/ko/mdn/contribute/howto/create_and_edit_pages/index.html delete mode 100644 files/ko/mdn/contribute/howto/do_a_technical_review/index.html delete mode 100644 files/ko/mdn/contribute/howto/do_an_editorial_review/index.html delete mode 100644 "files/ko/mdn/contribute/howto/mdn_\352\263\204\354\240\225_\354\203\235\354\204\261\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/mdn/contribute/howto/set_the_summary_for_a_page/index.html delete mode 100644 files/ko/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html delete mode 100644 files/ko/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html delete mode 100644 "files/ko/mdn/contribute/howto/\354\202\264\354\225\204\354\236\210\353\212\224_\354\275\224\353\223\234_\354\203\230\355\224\214\353\241\234_\353\263\200\355\231\230\355\225\230\352\270\260/index.html" delete mode 100644 files/ko/mdn/editor/index.html delete mode 100644 files/ko/mdn/editor/links/index.html delete mode 100644 files/ko/mdn/guidelines/best_practices/index.html delete mode 100644 files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html create mode 100644 files/ko/mdn/guidelines/code_guidelines/general/index.html create mode 100644 files/ko/mdn/guidelines/conventions_definitions/index.html create mode 100644 files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html delete mode 100644 files/ko/mdn/guidelines/style_guide/index.html create mode 100644 files/ko/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/ko/mdn/kuma/index.html delete mode 100644 files/ko/mdn/structures/api_references/api_reference_sidebars/index.html delete mode 100644 files/ko/mdn/structures/api_references/index.html delete mode 100644 "files/ko/mdn/tools/\355\216\230\354\235\264\354\247\200_\354\236\254\354\203\235\354\204\261/index.html" delete mode 100644 files/ko/mdn/user_guide/index.html create mode 100644 files/ko/mdn/yari/index.html delete mode 100644 files/ko/mdn_at_ten/index.html delete mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html delete mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html delete mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html delete mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html delete mode 100644 files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/menus/index.html create mode 100644 files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html create mode 100644 files/ko/mozilla/developer_guide/source_code/cvs/index.html create mode 100644 files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html create mode 100644 files/ko/mozilla/firefox/releases/1.5/index.html create mode 100644 files/ko/mozilla/firefox/releases/2/index.html create mode 100644 files/ko/mozilla/firefox/releases/2/updating_extensions/index.html create mode 100644 files/ko/mozilla/firefox/releases/3.5/index.html create mode 100644 files/ko/mozilla/firefox/releases/3.6/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/dom_improvements/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/svg_improvements/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/updating_extensions/index.html create mode 100644 files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html delete mode 100644 files/ko/mozilla_source_code_via_cvs/index.html delete mode 100644 files/ko/navigation_timing/index.html delete mode 100644 files/ko/node_server_without_framework/index.html delete mode 100644 files/ko/notable_bugs_fixed_in_firefox_3/index.html create mode 100644 files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html create mode 100644 files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html create mode 100644 files/ko/orphaned/learn/how_to_contribute/index.html create mode 100644 files/ko/orphaned/mdn/about/mdn_services/index.html create mode 100644 files/ko/orphaned/mdn/community/conversations/index.html create mode 100644 files/ko/orphaned/mdn/community/index.html create mode 100644 files/ko/orphaned/mdn/community/working_in_community/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html create mode 100644 files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html create mode 100644 files/ko/orphaned/mdn/editor/index.html create mode 100644 files/ko/orphaned/mdn/editor/links/index.html create mode 100644 files/ko/orphaned/mdn/structures/api_references/index.html create mode 100644 files/ko/orphaned/mdn/tools/page_regeneration/index.html create mode 100644 files/ko/orphaned/places/custom_containers/index.html create mode 100644 files/ko/orphaned/places/instantiating_views/index.html create mode 100644 files/ko/orphaned/places/query_system/index.html create mode 100644 files/ko/orphaned/places/views/index.html create mode 100644 files/ko/orphaned/theme_packaging/index.html create mode 100644 files/ko/orphaned/tools/add-ons/dom_inspector/index.html create mode 100644 files/ko/orphaned/tools/add-ons/index.html create mode 100644 files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html create mode 100644 files/ko/orphaned/web/css/index/index.html create mode 100644 files/ko/orphaned/web/html/element/command/index.html create mode 100644 files/ko/orphaned/web/html/element/element/index.html create mode 100644 files/ko/orphaned/web/html/global_attributes/dropzone/index.html create mode 100644 files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html create mode 100644 files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html create mode 100644 files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html create mode 100644 files/ko/orphaned/web/security/information_security_basics/index.html create mode 100644 files/ko/orphaned/windows_and_menus_in_xulrunner/index.html create mode 100644 "files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" create mode 100644 "files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" delete mode 100644 files/ko/places/custom_containers/index.html delete mode 100644 files/ko/places/instantiating_views/index.html delete mode 100644 files/ko/places/query_system/index.html delete mode 100644 files/ko/places/views/index.html create mode 100644 files/ko/plugins/guide/scripting_plugins/index.html delete mode 100644 files/ko/scripting_plugins/index.html delete mode 100644 files/ko/svg_improvements_in_firefox_3/index.html delete mode 100644 files/ko/svg_in_firefox/index.html delete mode 100644 files/ko/the_dom_and_javascript/index.html delete mode 100644 files/ko/theme_packaging/index.html delete mode 100644 files/ko/tips_for_authoring_fast-loading_html_pages/index.html delete mode 100644 files/ko/tools/add-ons/dom_inspector/index.html delete mode 100644 files/ko/tools/add-ons/index.html create mode 100644 files/ko/tools/debugger/how_to/index.html create mode 100644 files/ko/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/ko/tools/debugger/how_to/search/index.html create mode 100644 files/ko/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/ko/tools/debugger/keyboard_shortcuts/index.html delete mode 100644 "files/ko/tools/debugger/\353\213\250\354\266\225\355\202\244/index.html" delete mode 100644 files/ko/tools/how_to/index.html delete mode 100644 files/ko/tools/how_to/open_the_debugger/index.html delete mode 100644 files/ko/tools/how_to/search/index.html delete mode 100644 files/ko/tools/how_to/set_a_breakpoint/index.html delete mode 100644 files/ko/updating_extensions_for_firefox_2/index.html delete mode 100644 files/ko/updating_extensions_for_firefox_3/index.html delete mode 100644 files/ko/updating_web_applications_for_firefox_3/index.html delete mode 100644 files/ko/using_mozilla_in_testing_and_debugging_web_sites/index.html delete mode 100644 files/ko/using_xpath/index.html create mode 100644 files/ko/web/api/ambient_light_events/index.html create mode 100644 files/ko/web/api/battery_status_api/index.html create mode 100644 files/ko/web/api/broadcastchannel/message_event/index.html create mode 100644 files/ko/web/api/canvas_api/a_basic_ray-caster/index.html create mode 100644 files/ko/web/api/canvas_api/index.html create mode 100644 files/ko/web/api/canvas_api/manipulating_video_using_canvas/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/advanced_animations/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/applying_styles_and_colors/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/basic_animations/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/basic_usage/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/compositing/example/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/compositing/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/drawing_shapes/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/drawing_text/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/finale/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/transformations/index.html create mode 100644 files/ko/web/api/canvas_api/tutorial/using_images/index.html create mode 100644 files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html create mode 100644 files/ko/web/api/css_object_model/managing_screen_orientation/index.html create mode 100644 files/ko/web/api/detecting_device_orientation/index.html create mode 100644 files/ko/web/api/document/createevent/index.html delete mode 100644 files/ko/web/api/document/getselection/index.html create mode 100644 files/ko/web/api/document_object_model/introduction/index.html delete mode 100644 "files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" create mode 100644 files/ko/web/api/documentorshadowroot/getselection/index.html delete mode 100644 files/ko/web/api/element/accesskey/index.html create mode 100644 files/ko/web/api/element/blur_event/index.html create mode 100644 files/ko/web/api/elementcssinlinestyle/style/index.html delete mode 100644 files/ko/web/api/event/createevent/index.html delete mode 100644 "files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" create mode 100644 files/ko/web/api/fetch_api/using_fetch/index.html create mode 100644 files/ko/web/api/fullscreen_api/index.html create mode 100644 files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html create mode 100644 files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html create mode 100644 files/ko/web/api/html_drag_and_drop_api/index.html delete mode 100644 "files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" delete mode 100644 "files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" create mode 100644 files/ko/web/api/htmlelement/accesskey/index.html delete mode 100644 files/ko/web/api/htmlelement/dataset/index.html create mode 100644 files/ko/web/api/htmlelement/innertext/index.html delete mode 100644 files/ko/web/api/htmlelement/style/index.html delete mode 100644 files/ko/web/api/htmlelement/tabindex/index.html create mode 100644 files/ko/web/api/htmlmediaelement/abort_event/index.html create mode 100644 files/ko/web/api/htmlorforeignelement/dataset/index.html create mode 100644 files/ko/web/api/htmlorforeignelement/tabindex/index.html create mode 100644 files/ko/web/api/navigation_timing_api/index.html create mode 100644 files/ko/web/api/navigator/connection/index.html create mode 100644 files/ko/web/api/network_information_api/index.html delete mode 100644 files/ko/web/api/networkinformation/connection/index.html delete mode 100644 files/ko/web/api/node/innertext/index.html create mode 100644 files/ko/web/api/notifications_api/using_the_notifications_api/index.html create mode 100644 files/ko/web/api/proximity_events/index.html delete mode 100644 files/ko/web/api/screen.onorientationchange/index.html create mode 100644 files/ko/web/api/screen/onorientationchange/index.html create mode 100644 files/ko/web/api/streams_api/concepts/index.html delete mode 100644 "files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" create mode 100644 files/ko/web/api/vibration_api/index.html delete mode 100644 files/ko/web/api/web_workers_api/basic_usage/index.html create mode 100644 files/ko/web/api/web_workers_api/using_web_workers/index.html delete mode 100644 files/ko/web/api/webgl_api/cross-domain_textures/index.html create mode 100644 files/ko/web/api/websockets_api/index.html create mode 100644 files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html create mode 100644 files/ko/web/api/websockets_api/writing_websocket_servers/index.html create mode 100644 files/ko/web/api/window/domcontentloaded_event/index.html create mode 100644 files/ko/web/api/window/load_event/index.html create mode 100644 files/ko/web/api/windoworworkerglobalscope/settimeout/index.html delete mode 100644 files/ko/web/api/windowtimers/settimeout/index.html delete mode 100644 files/ko/web/api/xmlhttprequest/timeout/index.html create mode 100644 files/ko/web/api/xmlhttprequest/timeout_event/index.html create mode 100644 files/ko/web/api/xsltprocessor/basic_example/index.html create mode 100644 files/ko/web/api/xsltprocessor/browser_differences/index.html create mode 100644 files/ko/web/api/xsltprocessor/generating_html/index.html create mode 100644 files/ko/web/api/xsltprocessor/index.html create mode 100644 files/ko/web/api/xsltprocessor/introduction/index.html create mode 100644 files/ko/web/api/xsltprocessor/resources/index.html delete mode 100644 files/ko/web/css/@viewport/height/index.html delete mode 100644 files/ko/web/css/@viewport/viewport-fit/index.html delete mode 100644 files/ko/web/css/@viewport/zoom/index.html create mode 100644 files/ko/web/css/adjacent_sibling_combinator/index.html delete mode 100644 files/ko/web/css/all_about_the_containing_block/index.html delete mode 100644 files/ko/web/css/common_css_questions/index.html create mode 100644 files/ko/web/css/containing_block/index.html delete mode 100644 files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html delete mode 100644 files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html create mode 100644 files/ko/web/css/css_columns/using_multi-column_layouts/index.html create mode 100644 files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html delete mode 100644 "files/ko/web/css/css_flexible_box_layout/flexbox\354\235\230_\352\270\260\353\263\270_\352\260\234\353\205\220/index.html" create mode 100644 files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html delete mode 100644 "files/ko/web/css/css_flexible_box_layout/\352\260\200\353\263\200\354\203\201\354\236\220\354\235\230_\353\214\200\355\221\234\354\240\201\354\235\270_\354\202\254\354\232\251\353\241\200/index.html" create mode 100644 files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html create mode 100644 files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html create mode 100644 files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html create mode 100644 files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html delete mode 100644 "files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" delete mode 100644 "files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" delete mode 100644 "files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" delete mode 100644 "files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" create mode 100644 files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html create mode 100644 files/ko/web/css/css_masking/index.html delete mode 100644 files/ko/web/css/css_masks/index.html create mode 100644 files/ko/web/css/css_values_and_units/index.html delete mode 100644 "files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/index.html" delete mode 100644 files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html delete mode 100644 files/ko/web/css/getting_started/javascript/index.html delete mode 100644 files/ko/web/css/getting_started/svg_graphics/index.html delete mode 100644 files/ko/web/css/index/index.html create mode 100644 files/ko/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/ko/web/css/reference/property_template/index.html create mode 100644 files/ko/web/css/url()/index.html delete mode 100644 files/ko/web/css/url/index.html create mode 100644 files/ko/web/css/visual_formatting_model/index.html delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\257\270\353\224\224\354\226\264/index.html" delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\260\260\354\271\230/index.html" delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\242\205\354\206\215\352\263\274_\354\203\201\354\206\215/index.html" delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\214\354\235\264\353\270\224/index.html" delete mode 100644 "files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\215\354\212\244\355\212\270_\354\212\244\355\203\200\354\235\274/index.html" delete mode 100644 "files/ko/web/css/\354\235\270\354\240\221_\355\230\225\354\240\234_\354\204\240\355\203\235\354\236\220/index.html" delete mode 100644 files/ko/web/events/abort/index.html delete mode 100644 files/ko/web/events/blur/index.html delete mode 100644 files/ko/web/events/domcontentloaded/index.html delete mode 100644 files/ko/web/events/load/index.html delete mode 100644 files/ko/web/events/message/index.html delete mode 100644 files/ko/web/guide/api/vibration/vibration/index.html delete mode 100644 files/ko/web/guide/css/media_queries/index.html delete mode 100644 files/ko/web/guide/css/visual_formatting_model/index.html delete mode 100644 files/ko/web/guide/dom/index.html delete mode 100644 files/ko/web/guide/dom/using_full_screen_mode/index.html create mode 100644 files/ko/web/guide/graphics/index.html delete mode 100644 files/ko/web/guide/html/content_editable/index.html create mode 100644 files/ko/web/guide/html/editable_content/index.html create mode 100644 files/ko/web/guide/html/html5/index.html create mode 100644 files/ko/web/guide/html/html5/introduction_to_html5/index.html create mode 100644 files/ko/web/guide/html/using_html_sections_and_outlines/index.html create mode 100644 files/ko/web/guide/parsing_and_serializing_xml/index.html delete mode 100644 "files/ko/web/guide/xml_\355\214\214\354\213\261_\353\260\217_\354\247\201\353\240\254\355\231\224/index.html" delete mode 100644 "files/ko/web/guide/\352\267\270\353\236\230\355\224\275/index.html" delete mode 100644 files/ko/web/html/canvas/index.html delete mode 100644 files/ko/web/html/canvas/manipulating_video_using_canvas/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/advanced_animations/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/basic_animations/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/basic_usage/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/compositing/example/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/compositing/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/drawing_shapes/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/finale/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html delete mode 100644 files/ko/web/html/canvas/tutorial/using_images/index.html delete mode 100644 "files/ko/web/html/canvas/tutorial/\353\263\200\355\230\225/index.html" delete mode 100644 files/ko/web/html/element/command/index.html delete mode 100644 files/ko/web/html/element/element/index.html create mode 100644 files/ko/web/html/global_attributes/class/index.html delete mode 100644 files/ko/web/html/global_attributes/dropzone/index.html delete mode 100644 "files/ko/web/html/global_attributes/\355\201\264\353\236\230\354\212\244/index.html" delete mode 100644 files/ko/web/html/html5/index.html delete mode 100644 files/ko/web/html/html5/introduction_to_html5/index.html delete mode 100644 "files/ko/web/html/html5_\353\254\270\354\204\234\354\235\230_\354\204\271\354\205\230\352\263\274_\354\234\244\352\263\275/index.html" create mode 100644 files/ko/web/http/browser_detection_using_the_user_agent/index.html delete mode 100644 "files/ko/web/http/user_agent\353\245\274_\354\235\264\354\232\251\355\225\234_\353\270\214\353\235\274\354\232\260\354\240\200_\352\260\220\354\247\200/index.html" create mode 100644 files/ko/web/javascript/a_re-introduction_to_javascript/index.html delete mode 100644 files/ko/web/javascript/about/index.html create mode 100644 files/ko/web/javascript/about_javascript/index.html create mode 100644 files/ko/web/javascript/closures/index.html delete mode 100644 files/ko/web/javascript/differential_inheritance_in_javascript/index.html delete mode 100644 files/ko/web/javascript/guide/closures/index.html create mode 100644 files/ko/web/javascript/guide/details_of_the_object_model/index.html create mode 100644 files/ko/web/javascript/guide/functions/index.html create mode 100644 files/ko/web/javascript/guide/grammar_and_types/index.html delete mode 100644 files/ko/web/javascript/guide/inheritance_and_the_prototype_chain/index.html create mode 100644 files/ko/web/javascript/guide/introduction/index.html create mode 100644 files/ko/web/javascript/guide/meta_programming/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html delete mode 100644 files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html create mode 100644 files/ko/web/javascript/guide/regular_expressions/assertions/index.html create mode 100644 files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html create mode 100644 files/ko/web/javascript/guide/regular_expressions/index.html delete mode 100644 files/ko/web/javascript/guide/values,_variables,_and_literals/index.html delete mode 100644 "files/ko/web/javascript/guide/\352\260\235\354\262\264_\353\252\250\353\215\270\354\235\230_\354\204\270\353\266\200\354\202\254\355\225\255/index.html" delete mode 100644 "files/ko/web/javascript/guide/\353\251\224\355\203\200_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/index.html" delete mode 100644 "files/ko/web/javascript/guide/\354\206\214\352\260\234/index.html" delete mode 100644 "files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/assertions/index.html" delete mode 100644 "files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/groups_and_ranges/index.html" delete mode 100644 "files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/index.html" delete mode 100644 "files/ko/web/javascript/guide/\355\225\250\354\210\230/index.html" create mode 100644 files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html delete mode 100644 files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/ko/web/javascript/language_resources/index.html delete mode 100644 files/ko/web/javascript/reference/classes/class_fields/index.html create mode 100644 files/ko/web/javascript/reference/classes/public_class_fields/index.html create mode 100644 files/ko/web/javascript/reference/functions/arrow_functions/index.html delete mode 100644 "files/ko/web/javascript/reference/functions/\354\225\240\353\241\234\354\232\260_\355\216\221\354\205\230/index.html" delete mode 100644 files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/date/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/map/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/number/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/object/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/promise/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/proxy/handler/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/set/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/string/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html delete mode 100644 files/ko/web/javascript/reference/operators/arithmetic_operators/index.html delete mode 100644 files/ko/web/javascript/reference/operators/assignment_operators/index.html delete mode 100644 files/ko/web/javascript/reference/operators/bitwise_operators/index.html delete mode 100644 files/ko/web/javascript/reference/operators/comparison_operators/index.html create mode 100644 files/ko/web/javascript/reference/operators/operator_precedence/index.html delete mode 100644 "files/ko/web/javascript/reference/operators/\353\205\274\353\246\254_\354\227\260\354\202\260\354\236\220(logical_operators)/index.html" delete mode 100644 "files/ko/web/javascript/reference/operators/\354\227\260\354\202\260\354\236\220_\354\232\260\354\204\240\354\210\234\354\234\204/index.html" delete mode 100644 files/ko/web/javascript/reference/statements/default/index.html create mode 100644 files/ko/web/javascript/shells/index.html delete mode 100644 "files/ko/web/javascript/\354\211\230/index.html" delete mode 100644 "files/ko/web/javascript/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/web/javascript/\354\226\270\354\226\264_\353\246\254\354\206\214\354\212\244/index.html" create mode 100644 files/ko/web/media/formats/codecs_parameter/index.html create mode 100644 files/ko/web/media/formats/containers/index.html create mode 100644 files/ko/web/media/formats/video_codecs/index.html delete mode 100644 "files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" delete mode 100644 "files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" delete mode 100644 "files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" create mode 100644 files/ko/web/performance/critical_rendering_path/index.html create mode 100644 files/ko/web/performance/how_browsers_work/index.html delete mode 100644 "files/ko/web/performance/\353\270\214\353\235\274\354\232\260\354\240\200\353\212\224_\354\226\264\353\226\273\352\262\214_\353\217\231\354\236\221\355\225\230\353\212\224\352\260\200/index.html" delete mode 100644 "files/ko/web/performance/\354\244\221\354\232\224_\353\240\214\353\215\224\353\247\201_\352\262\275\353\241\234/index.html" create mode 100644 files/ko/web/progressive_web_apps/introduction/index.html create mode 100644 files/ko/web/progressive_web_apps/responsive/media_types/index.html delete mode 100644 "files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" create mode 100644 files/ko/web/reference/api/index.html create mode 100644 files/ko/web/reference/index.html delete mode 100644 "files/ko/web/security/\354\240\225\353\263\264_\353\263\264\354\225\210_\352\270\260\353\263\270/index.html" create mode 100644 files/ko/web/svg/element/rect/index.html delete mode 100644 "files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" create mode 100644 files/ko/web/svg/svg_1.1_support_in_firefox/index.html create mode 100644 files/ko/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/ko/web/svg/tutorial/getting_started/index.html create mode 100644 files/ko/web/svg/tutorial/positions/index.html create mode 100644 files/ko/web/svg/tutorial/svg_and_css/index.html delete mode 100644 "files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" delete mode 100644 "files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" delete mode 100644 "files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" create mode 100644 files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html delete mode 100644 files/ko/web/xslt/apply-imports/index.html delete mode 100644 files/ko/web/xslt/apply-templates/index.html delete mode 100644 files/ko/web/xslt/attribute-set/index.html delete mode 100644 files/ko/web/xslt/attribute/index.html delete mode 100644 files/ko/web/xslt/call-template/index.html delete mode 100644 files/ko/web/xslt/choose/index.html delete mode 100644 files/ko/web/xslt/comment/index.html delete mode 100644 files/ko/web/xslt/copy-of/index.html delete mode 100644 files/ko/web/xslt/copy/index.html delete mode 100644 files/ko/web/xslt/decimal-format/index.html create mode 100644 files/ko/web/xslt/element/apply-imports/index.html create mode 100644 files/ko/web/xslt/element/apply-templates/index.html create mode 100644 files/ko/web/xslt/element/attribute-set/index.html create mode 100644 files/ko/web/xslt/element/attribute/index.html create mode 100644 files/ko/web/xslt/element/call-template/index.html create mode 100644 files/ko/web/xslt/element/choose/index.html create mode 100644 files/ko/web/xslt/element/comment/index.html create mode 100644 files/ko/web/xslt/element/copy-of/index.html create mode 100644 files/ko/web/xslt/element/copy/index.html create mode 100644 files/ko/web/xslt/element/decimal-format/index.html create mode 100644 files/ko/web/xslt/element/fallback/index.html create mode 100644 files/ko/web/xslt/element/for-each/index.html create mode 100644 files/ko/web/xslt/element/if/index.html create mode 100644 files/ko/web/xslt/element/import/index.html create mode 100644 files/ko/web/xslt/element/include/index.html create mode 100644 files/ko/web/xslt/element/key/index.html create mode 100644 files/ko/web/xslt/element/message/index.html create mode 100644 files/ko/web/xslt/element/namespace-alias/index.html create mode 100644 files/ko/web/xslt/element/number/index.html create mode 100644 files/ko/web/xslt/element/otherwise/index.html create mode 100644 files/ko/web/xslt/element/output/index.html create mode 100644 files/ko/web/xslt/element/param/index.html create mode 100644 files/ko/web/xslt/element/preserve-space/index.html create mode 100644 files/ko/web/xslt/element/processing-instruction/index.html create mode 100644 files/ko/web/xslt/element/sort/index.html create mode 100644 files/ko/web/xslt/element/strip-space/index.html create mode 100644 files/ko/web/xslt/element/stylesheet/index.html create mode 100644 files/ko/web/xslt/element/template/index.html create mode 100644 files/ko/web/xslt/element/text/index.html create mode 100644 files/ko/web/xslt/element/transform/index.html create mode 100644 files/ko/web/xslt/element/value-of/index.html create mode 100644 files/ko/web/xslt/element/variable/index.html create mode 100644 files/ko/web/xslt/element/when/index.html create mode 100644 files/ko/web/xslt/element/with-param/index.html delete mode 100644 files/ko/web/xslt/fallback/index.html delete mode 100644 files/ko/web/xslt/for-each/index.html delete mode 100644 files/ko/web/xslt/if/index.html delete mode 100644 files/ko/web/xslt/import/index.html delete mode 100644 files/ko/web/xslt/include/index.html delete mode 100644 files/ko/web/xslt/key/index.html delete mode 100644 files/ko/web/xslt/message/index.html delete mode 100644 files/ko/web/xslt/namespace-alias/index.html delete mode 100644 files/ko/web/xslt/number/index.html delete mode 100644 files/ko/web/xslt/otherwise/index.html delete mode 100644 files/ko/web/xslt/output/index.html delete mode 100644 files/ko/web/xslt/param/index.html delete mode 100644 files/ko/web/xslt/preserve-space/index.html delete mode 100644 files/ko/web/xslt/processing-instruction/index.html delete mode 100644 files/ko/web/xslt/sort/index.html delete mode 100644 files/ko/web/xslt/strip-space/index.html delete mode 100644 files/ko/web/xslt/stylesheet/index.html delete mode 100644 files/ko/web/xslt/template/index.html delete mode 100644 files/ko/web/xslt/text/index.html delete mode 100644 files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/index.html delete mode 100644 files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/introduction/index.html delete mode 100644 files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/setting_parameters/index.html delete mode 100644 files/ko/web/xslt/transform/index.html delete mode 100644 files/ko/web/xslt/value-of/index.html delete mode 100644 files/ko/web/xslt/variable/index.html delete mode 100644 files/ko/web/xslt/when/index.html delete mode 100644 files/ko/web/xslt/with-param/index.html create mode 100644 files/ko/web/xslt/xslt_js_interface_in_gecko/index.html create mode 100644 files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html create mode 100644 files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html delete mode 100644 "files/ko/web/\354\260\270\354\241\260/api/index.html" delete mode 100644 "files/ko/web/\354\260\270\354\241\260/index.html" delete mode 100644 files/ko/web_development/index.html delete mode 100644 files/ko/webapi/battery_status/index.html delete mode 100644 files/ko/webapi/detecting_device_orientation/index.html delete mode 100644 files/ko/webapi/index.html delete mode 100644 files/ko/webapi/managing_screen_orientation/index.html delete mode 100644 files/ko/webapi/network_information/index.html delete mode 100644 files/ko/webapi/proximity/index.html delete mode 100644 files/ko/webapi/using_geolocation/index.html delete mode 100644 files/ko/webapi/using_light_events/index.html delete mode 100644 files/ko/webapi/using_web_notifications/index.html delete mode 100644 files/ko/websockets/index.html delete mode 100644 files/ko/websockets/writing_websocket_client_applications/index.html delete mode 100644 files/ko/websockets/writing_websocket_servers/index.html delete mode 100644 files/ko/windows_and_menus_in_xulrunner/index.html delete mode 100644 files/ko/xhtml/index.html delete mode 100644 files/ko/xslt_in_gecko/basic_example/index.html delete mode 100644 files/ko/xslt_in_gecko/browser_differences/index.html delete mode 100644 files/ko/xslt_in_gecko/generating_html/index.html delete mode 100644 files/ko/xslt_in_gecko/index.html delete mode 100644 files/ko/xslt_in_gecko/introduction/index.html delete mode 100644 files/ko/xslt_in_gecko/resources/index.html delete mode 100644 "files/ko/\352\260\234\353\260\234\354\236\220\353\245\274_\354\234\204\355\225\234_firefox_3.6/index.html" delete mode 100644 "files/ko/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" delete mode 100644 "files/ko/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" diff --git a/files/ko/a_basic_raycaster/index.html b/files/ko/a_basic_raycaster/index.html deleted file mode 100644 index 950b0f5366..0000000000 --- a/files/ko/a_basic_raycaster/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: A basic ray-caster -slug: A_Basic_RayCaster -tags: - - Advanced - - Canvas - - Example - - Graphics - - HTML - - Web -translation_of: Web/API/Canvas_API/A_basic_ray-caster ---- -
{{CanvasSidebar}}
- -

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

- -

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

- -

Open in new window

- -

Why?

- -

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

- -

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

- -

How?

- -

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

- -

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

- -

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

- -

Results

- -

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

- -

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

- -

The ray-caster

- -

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

- -

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

- -

See also

- - diff --git a/files/ko/a_re-introduction_to_javascript/index.html b/files/ko/a_re-introduction_to_javascript/index.html deleted file mode 100644 index 7206716138..0000000000 --- a/files/ko/a_re-introduction_to_javascript/index.html +++ /dev/null @@ -1,1038 +0,0 @@ ---- -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 ---- -
{{jsSidebar}}
- -

어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.

- -

이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다.

- -

몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 ECMAScript 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 Ecma International에 보냅니다. 이 표준은 1999년에 ECMAScript edition 3에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다. 4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. 

- -
-

 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인  "JavaScript"라고 부르겠습니다.

-
- -

대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, node.js 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, Apache CouchDB, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 GNOME 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.

- -

개요

- -

JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 (프로토 타입 상속 및 ES2015 {{jsxref("Classes")}}). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다.

- -

어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:

- - - -

... 오, 그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 배열(Array) 객체. 그리고 자유롭게 사용할 수 있는 날짜(Date) 객체 와 정규식(RegExp) 객체가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다:

- - - -

그리고 또 몇 가지 오류 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다.

- -

수 (Numbers)

- -

설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 정수와 같은 것이 존재하지 않으므로 ({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요:

- -
console.log(3 / 2);             // 1이 아닌, 1.5
-console.log(Math.floor(3 / 2)); // 1
- -

명백한 정수는 사실 암묵적으로 실수입니다.

- -

또한, 다음과 같은 것들을 주의하세요:

- -
0.1 + 0.2 = 0.30000000000000004
-
- -

실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다.

- -

덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 산술 연산자가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 수학(Math)으로 불리는 내장 객체가 있습니다:

- -
Math.sin(3.5);
-var circumference = 2 * Math.PI * r;
- -

내장 parseInt() 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:

- -
parseInt('123', 10); // 123
-parseInt('010', 10); // 10
- -

구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다.

- -
parseInt('010');  //  8
-parseInt('0x10'); // 16
- -

이 같은 결과는 {{jsxref("Global_Objects/parseInt", "parseInt()")}} 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다.

- -

만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:

- -
parseInt('11', 2); // 3
-
- -

이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 parseFloat()는 항상 10진수를 사용합니다.

- -

단항 연산자 + 를 사용하여 값을 숫자로 변환 할 수도 있습니다:

- -
+ '42';   // 42
-+ '010';  // 10
-+ '0x10'; // 16
- -

문자열이 수가 아닌 경우 NaN ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다:

- -
parseInt('hello', 10); // NaN
-
- -

NaN 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 NaN가 되기 때문입니다:

- -
NaN + 5; // NaN
-
- -

내장 isNaN() 함수를 사용해서 NaN 인지 여부를 검사할 수 있습니다:

- -
isNaN(NaN); // true
-
- -

JavaScript는 또 특별한 값 Infinity와 -Infinity를 가지고 있습니다:

- -
 1 / 0; //  Infinity
--1 / 0; // -Infinity
- -

내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다.

- -
isFinite(1 / 0);     // false
-isFinite(-Infinity); // false
-isFinite(NaN);       // false
- -
-

{{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 NaN 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다.

-
- -

문자열 (Strings)

- -

JavaScript에서 문자열은 유니코드 문자들이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다.

- -

한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다.

- -

문자열의 길이를 알고싶다면, 해당 문자열의 length 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다:

- -
'hello'.length; // 5
-
- -

우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 메소드까지 있는 확실한 녀석입니다:

- -
'hello'.charAt(0); // "h"
-'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
-'hello'.toUpperCase(); // "HELLO"
- -

이외의 타입들

- -

JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 null과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 undefined로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 undefined이 되는 것입니다.

- -

JavaScript는 true 와 false 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다:

- -
    -
  1. false, 0, 빈 문자열 (""), 수가 아님을 뜻하는 NaN, null, 와 undefined은 모두 false가 됩니다.
    2. -
  2. 다른 모든 값은 true가 됩니다.
    3. -
- -

이 변환은 Boolean() 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다:

- -
Boolean('');  // false
-Boolean(234); // true
- -

하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 if 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, true와 false이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다.

- -

부울 연산자는 && (논리적와, 그리고 ), || (논리적또는 ), 그리고 ! (논리적부정 )이 지원됩니다. 아래에서 다시 언급하겠습니다.

- -

변수 (Variables)

- -

JavaScript에서 새로운 변수는 let, const, var 키워드로 선언됩니다.

- -

let을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 변수가 포함 된 함수 블록에서 사용할 수 있습니다.

- -
let a;
-let name = 'Simon';
- -

아래는 let으로 선언한 변수가 가지는 유효 범위의 예제입니다. 

- -
// myLetVariable는 여기에서 보이지 *않습니다*
-
-for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
-  // myLetVariable는 여기에서 유효합니다
-}
-
-// myLetVariable는 여기에서 보이지 *않습니다*
- -

const는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 변수가 선언 된 함수 블록에서 사용할 수 있습니다.

- -
const Pi = 3.14; // 변수 Pi 설정
-Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생.
- -

var은 가장 일반적인 변수 선언 키워드입니다. let, const 키워드가 가지는 제한을 var은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. var 키워드로 선언 된 변수는 변수가 선언 된 함수 블록에서 사용 할 수 있습니다.

- -
var a;
-var name = 'Simon';
- -

var로 선언한 변수의 유효 범위 예제입니다.

- -
// myVarVariable는 여기에서 사용 할 수 *있습니다*
-
-for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
-  // myVarVariable는 함수 전체에서 사용 할 수 있습니다.
-}
-
-// myVarVariable는 여기에서 사용 할 수 *있습니다*
- -

변수에 값을 지정하지 않고 변수를 선언하면, 타입은 undefined로 지정 됩니다.

- -

자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 if 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 let 및 const 선언을 사용하면 블록 범위 변수를 만들 수 있습니다.

- -

연산자 (Operators)

- -

JavaScript의 산술 연산자로는 +, -, *, /, %(나머지 연산자)가 있습니다. 값은 = 연산자로 할당할 수 있고, += 와 -=처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 x = x연산자 y와 같은 결과를 나타냅니다.

- -
x += 5;
-x = x + 5;
-
- -

++ 와 -- 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다.

- -

+ 연산자는 문자열 이어붙이기도 합니다:

- -
'hello' + ' world'; // "hello world"
-
- -

문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다:

- -
'3' + 4 + 5;  // "345"
- 3 + 4 + '5'; // "75"
- -

빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다.

- -

JavaScript에서 비교는 <, >, <= 와 >= 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (==) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다:

- -
123 == '123'; // true
-1 == true;    // true
-
- -

타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (===)를 사용해야합니다:

- -
123 === '123'; // false
-1 === true;    // false
-
- -

이와 비슷하게 != 와 !== 연산자가 있습니다.

- -

JavaScript는 값을 비트로 취급하는 연산자도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠.

- -

제어 구조

- -

JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 if 와 else를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다:

- -
var name = 'kittens';
-if (name == 'puppies') {
-  name += ' woof';
-} else if (name == 'kittens') {
-  name += ' meow';
-} else {
-  name += '!';
-}
-name == 'kittens meow';
-
- -

JavaScript는 while 반복문과 do-while 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다:

- -
while (true) {
-  // 무한루프!
-}
-
-var input;
-do {
-  input = get_input();
-} while (inputIsNotValid(input));
-
- -

JavaScript의 for 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요.

- -
for (var i = 0; i < 5; i++) {
-  // 내부 동작을 5번 반복합니다
-}
-
- -

JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 for...of 입니다.

- -
for (let value of array) {
-  // value로 작업을 실행합니다
-}
-
- -

그리고 for ... in 입니다.

- -
for (let property in object) {
-  // object의 항목(property)으로 작업을 실행합니다
-}
-
- -

&& 와 || 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다:

- -
var name = o && o.getName();
-
- -

또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.:

- -
var name = cachedName || (cachedName = getName());
-
- -

JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다:

- -
var allowed = (age > 18) ? "yes" : "no";
-
- -

switch 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다:

- -
switch(action) {
-    case 'draw':
-        drawIt();
-        break;
-    case 'eat':
-        eatIt();
-        break;
-    default:
-        doNothing();
-}
-
- -

break 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다:

- -
switch(a) {
-    case 1: // fallthrough
-    case 2:
-        eatIt();
-        break;
-    default:
-        doNothing();
-}
-
- -

default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은  === 연산자로 비교됩니다.

- -
switch(1 + 3){
-    case 2 + 2:
-        yay();
-        break;
-    default:
-        neverhappens();
-}
-
- -

객체 (Objects)

- -

JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다:

- - - -

이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다!

- -

값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다.

- -

빈 객체를 생성하는데 두가지 방법이 있습니다:

- -
var obj = new Object();
-
- -

와:

- -
var obj = {};
-
- -

이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다.

- -

객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다:

- -
var obj = {
-    name: "Carrot",
-    "for": "Max",
-    details: {
-        color: "orange",
-        size: 12
-    }
-}
-
- -

속성에 연속적으로 접근할 수 있습니다:

- -
obj.details.color; // orange
-obj["details"]["size"]; // 12
-
- -

아래 예제는 객체 프로토타입(Person)과 프로토타입의 인스턴스(you)를 생성합니다.

- -
function Person(name, age) {
-  this.name = name;
-  this.age = age;
-}
-
-// 객체를 정의한다
-var you = new Person('You', 24);
-// "You"라는 이름의 24세인 새로운 사람을 생성중이다.
-
- -

일단 생성되면, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다:

- -
// dot 표기법
-obj.name = "Simon"
-var name = obj.name;
-
- -

그리고...

- -
// bracket 표기법
-obj["name"] = "Simon";
-var name = obj["name"];
-// key를 정의하기 위해 변수도 쓸수 있습니다.
-var user = prompt('what is your key?')
-obj[user] = prompt('what is its value?')
-
- -

이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 예약된 단어(키워드)로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다:

- -
obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에
-obj["for"] = "Simon"; // 정상 동작
-
- -
-

ECMAScript 5 이래로, 예약어는  객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다.  ES5 Spec을 참고해 보십시오.

-
- -

객체나 프로토타입에 대한 좀더 상세한 내용은 Object.prototype 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 상속과 프로토타입 체인 을 참조하십시오.

- -
-

ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 var userPhone = {}; userPhone[phoneType] = 12345. 처럼 표기하는 방법 대신 {[phoneType]: 12345} 와 같은 사용법도 가능합니다.

-
- -

배열 (Arrays)

- -

JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 [] 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 'length'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다.

- -

배열을 생성하는 예전 방법은 다음과 같습니다:

- -
var a = new Array();
-a[0] = "dog";
-a[1] = "cat";
-a[2] = "hen";
-a.length // 3
-
- -

한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다:

- -
> var a = ["dog", "cat", "hen"];
-> a.length
-3
-
- -

배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다.

- -

array.length 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다:

- -
> var a = ["dog", "cat", "hen"];
-> a[100] = "fox";
-> a.length
-101
-
- -

기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다.

- -

존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 undefined 을 얻게됩니다:

- -
> typeof(a[90])
-undefined
-
- -

[] 와 length에 관한 위의 사항들을 감안하면 배열을 for 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:

- -
for (var i = 0; i < a.length; i++) {
-    // a[i] 로 뭔가를 수행
-}
-
- -

ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 for...of 루프를 소개했습니다.

- -
for (const currentValue of a) {
-    // currentValue 로 뭔가를 수행
-}
- -

또한 for...in 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 Array.prototype에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다.

- -

배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 forEach() 입니다:

- -
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
-    // currentValue나 array[index]로 뭔가를 수행
-}
-
- -

배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다:

- -
a.push(item);
- -

배열은 몇가지 메서드가 제공됩니다. 배열 메서드에 대한 전체 문서를 참조하십시오.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
메서드 이름설명
a.toString()각 항목에 대한 toString()의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.
a.toLocaleString()각 항목에 대한 toLocaleString()의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.
a.concat(item1[, item2[, ...[, itemN]]])item들이 덧붙여진 한개의 배열을 반환합니다.
a.join(sep)배열의 값들을 sep 인자로 구분하여 합친 한개의 문자열로 변환합니다.
a.pop()배열의 마지막 항목을 반환하면서 제거합니다.
a.push(item1, ..., itemN)배열의 끝에 item들을 덧붙입니다.
a.shift()배열의 첫번째 항목을 반환하면서 제거합니다.
a.unshift(item1[, item2[, ...[, itemN]]])배열의 앞쪽에 item들을 덧붙입니다.
a.slice(start[, end])배열의 일부분을 새배열로 반환합니다.
a.sort([cmpfn])옵션으로 비교용도의 함수를 입력받습니다.
a.splice(start, delcount[, item1[, ...[, itemN]]])배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다..
a.reverse()배열의 순서를 거꾸로 배열합니다.
- -

함수 (Functions)

- -

객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다:

- -
function add(x, y) {
-    var total = x + y;
-    return total;
-}
-
- -

이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. return 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 undefined을 돌려줍니다.

- -

이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 undefined로 설정됩니다.

- -
add(); //NaN
-// undefined에 대해 덧셈을 수행할 수 없습니다
-
- -

함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다:

- -
add(2, 3, 4); // 5
-// 처음의 두 수가 더해집니다. 4는 무시됨
-
- -

이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 arguments라고 하며, 해당 함수에  매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다:

- -
function add() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum;
-}
-
-add(2, 3, 4, 5); // 14
-
- -

확실히 2 + 3 + 4 + 5를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다:

- -
function avg() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
-
- -

이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 Rest 파라미터 문법으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. Rest 파라미터 연산자는 다음과 같은 포맷(...variable)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 for 루프를 for..of 루프로 변경합니다.

- -
function avg(...args) {
-    var sum = 0;
-    for (let value of args) {
-        sum += value;
-    }
-    return sum / arr.length;
-}
-
-avg(2, 3, 4, 5); // 3.5
-
- -
-

위 코드에서,변수 args 는 함수로 전달된  모든 값을 가지고 있습니다.
-
- rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치 이후에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 , function avg(firstValue, ...args) 에서 함수로 전달된 첫번째 값은 firstValue 변수에 저장되며, 남은 변수들은 args에 저장됩니다.

-
- -

이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. avg() 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다 :

- -
function avgArray(arr) {
-  var sum = 0;
-  for (var i = 0, j = arr.length; i < j; i++) {
-    sum += arr[i];
-  }
-  return sum / arr.length;
-}
-
-avgArray([2, 3, 4, 5]); // 3.5
- -

하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 apply() 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다.

- -
> avg.apply(null, [2, 3, 4, 5])
-3.5
-
- -

apply()의 두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다.

- -
-

함수 호출시 전개 연산자(spread operator) 를 이용하여 똑같은 결과를 얻을수 있습니다.

- -

예를 들면: avg(...numbers)

-
- -

JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다.

- -
var avg = function() {
-    var sum = 0;
-    for (var i = 0, j = arguments.length; i < j; i++) {
-        sum += arguments[i];
-    }
-    return sum / arguments.length;
-}
-
- -

이것은 의미적으로 function avg() 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다:

- -
var a = 1;
-var b = 2;
-
-(function() {
-    var b = 3;
-    a += b;
-})();
-
-a; // 4
-b; // 2
-
- -

JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다.

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

다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 IIFEs (Immediately Invoked Function Expressions: 즉시 실행 함수 표현) 를 다음과 같이 사용할 수 있습니다:

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

위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다.

- -

JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 -  그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오

- -

사용자 정의 객체

- -
-

JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 객체 지향 JavaScript 소개를 참조하십시오.

-
- -

고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다:

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

이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다.

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

this 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, this는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 dot 표기법이나 bracket 표기법을 사용해서 부른 경우, 해당 객체는 this가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, this는 전역 객체를 참조하게 됩니다.

- -

this가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면:

- -
var s = makePerson('Simon', 'Willison');
-var fullName = s.fullName;
-fullName(); // undefined undefined
-
- -

s.fullName()을 이용하지 않고 fullName()을 단독으로 호출하면, 'this'는 전역 객체로 묶이게(bind) 됩니다. first 또는 last 로 명명된 전역 변수가 없기 때문에, 각각에 대해 undefined 결과를 얻게됩니다.

- -

makePerson 함수를 개선하는데 'this' 키워드의 이점을 취할 수 있습니다:

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

여기서 new라는 또다른 키워드를 도입했습니다. new는 this와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 this 에 설정합니다. this로 지정된 함수는 값을 반환하지 않고 단지 this 객체를 수정한다는 것을 명심하세요. this 객체를 호출하는 곳으로 반환하는 것은  new 입니다. 'new' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 new로 불릴 컨스트럭터 함수임을 나타냅니다.

- -

개선된 함수는 여전히 fullName() 을 단독으로 호출할 때의 함정이 존재합니다.

- -

우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요?

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

더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다:

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

Person.prototype은 모든 Person 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, Person 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 Person.prototype에 그 속성이 존재하는지 살펴봅니다.그 결과,  Person.prototype에 할당된 모든 것은 this 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다.

- -

이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다:

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

흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. String 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다.

- -
var s = "Simon";
-s.reversed(); // TypeError on line 1: s.reversed is not a function
-
-String.prototype.reversed = function() {
-    var r = "";
-    for (var i = this.length - 1; i >= 0; i--) {
-        r += this[i];
-    }
-    return r;
-};
-
-s.reversed(); // nomiS
-
- -

우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다!

- -
"This can now be reversed".reversed(); // desrever eb won nac sihT
-
- -

기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 Object.prototype 이며 toString() 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 Person 객체의 디버깅에 유용합니다:

- -
var s = new Person("Simon", "Willison");
-s.toString(); // [object Object]
-
-Person.prototype.toString = function() {
-  return '<Person: ' + this.fullName() + '>';
-}
-
-s.toString(); // "<Person: Simon Willison>"
-
- -

avg.apply()의 첫번째 매개변수가 null 이었던걸 기억해봅시다. apply()에 적용되는 첫번째 인자는 당연히 `this'로 간주되는 객체입니다. 여기에 new 의 간단한 구현을 보시죠:

- -
function trivialNew(constructor, ...args) {
-    var o = {}; // 빈 객체를 생성
-    constructor.apply(o, args);
-    return o;
-}
-
- -

이것은 prototype 체인을 설정하지 않으므로 new의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 ...args (생략 부호를 포함해서)는 "rest arguments" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다.

- -

그러므로 이렇게 호출하는 것은

- -
var bill = trivialNew(Person, 'William', 'Orange');
- -

아래와 거의 동일합니다.

- -
var bill = new Person('William', 'Orange');
- -

apply() 와 비슷하게 this를 다시 설정할 수 있게 하는, call이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다.

- -
function lastNameCaps() {
-  return this.last.toUpperCase();
-}
-var s = new Person('Simon', 'Willison');
-lastNameCaps.call(s);
-// 위의 구문은 다음과 같습니다:
-s.lastNameCaps = lastNameCaps;
-s.lastNameCaps();
-
- -

내장 함수 (Inner functions)

- -

다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 makePerson() 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다:

- -
function parentFunc() {
-    var a = 1;
-
-    function nestedFunc() {
-        var b = 4; // parentFunc은 사용할 수 없는 변수
-        return a + b;
-    }
-    return nestedFunc();  // 5
-}
-
- -

좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다.

- -

이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다.

- -

클로져 (Closures)

- -

클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요?

- -
function makeAdder(a) {
-  return function(b) {
-    return a + b;
-  };
-}
-var add5 = makeAdder(5);
-var add20 = makeAdder(20);
-add5(6); // ?
-add20(7); // ?
-
- -

makeAdder 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다.

- -

여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히존재합니다 - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, makeAdder 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 a는 5이고, 다른 하나의 a는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다:

- -
x(6) // 11을 돌려줌
-y(7) // 27을 돌려줌
-
- -

이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다.

- -

따라서 makeAdder 가 호출되면, 범위 객체는 makeAdder 함수에 매개변수로 넘겨진 하나의 속성 a를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 makeAdder에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 makeAdder에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다.

- -

범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다.

- -

클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다.

- -

또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다.

- -

메모리 누출

- -

클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다.

- -

브라우저 호스트는 HTML 페이지에 DOM 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠.

- -

Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다.

- -

IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다:

- -
function leakMemory() {
-    var el = document.getElementById('el');
-    var o = { 'el': el };
-    el.o = o;
-}
-
- -

위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 el와 o에 의해 사용되는 메모리를 반환하지 못합니다.

- -

위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다.

- -

누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다.

- -

클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다:

- -
function addHandler() {
-    var el = document.getElementById('el');
-    el.onclick = function() {
-        this.style.backgroundColor = 'red';
-    }
-}
-
- -

위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? el을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (el)간에 순환 참조를 만듭니다.

- -

이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다:

- -
function addHandler() {
-    var el = document.getElementById('el');
-    el.onclick = function() {
-        this.style.backgroundColor = 'red';
-    }
-    el = null;
-}
-
- -

이렇게 하면 순환 참조 고리를 끊을 수 있습니다.

- -

놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다:

- -
function addHandler() {
-    var clickHandler = function() {
-        this.style.backgroundColor = 'red';
-    }
-    (function() {
-        var el = document.getElementById('el');
-        el.onclick = clickHandler;
-    })();
-}
-
- -

내부 함수는 실행되고 바로 사라지므로서, clickHandler와 함께 생성된 클로져로부터 그 내용을 숨깁니다.

- -

클로져를 피할 수 있는 또다른 좋은 요령은 window.onunload 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 Firefox 1.5의 bfcache를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 unload listener를 등록해서는 안 된다는 것입니다.

- -
-

원본 문서 정보

- - -
- -
- -

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

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 deleted file mode 100644 index 363b27b75e..0000000000 --- a/files/ko/adapting_xul_applications_for_firefox_1.5/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -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 ---- -

이 페이지는 XUL 개발자에 영향을 미치는 Firefox 1.5에서 바뀐 점 목록을 포함합니다.

-

특정 바뀐 점

- -

다른 정보

- diff --git a/files/ko/building_an_extension/index.html b/files/ko/building_an_extension/index.html deleted file mode 100644 index 133e0f8341..0000000000 --- a/files/ko/building_an_extension/index.html +++ /dev/null @@ -1,241 +0,0 @@ ---- -title: Building an Extension -slug: Building_an_Extension -tags: - - Add-ons - - Extensions -translation_of: Mozilla/Add-ons -translation_of_original: Building_an_Extension ---- -

시작하기

-

확장기능 마법사를 이용해서 웹으로 간단한 확장기능을 만들 수 있습니다.

-

MozillaZine Knowledge Base에는 확장기능 마법사를 이용해 만들 수 있는 것과 비슷한 Hello World 확장기능에 대해 한 줄 한 줄 설명한 다른 글도 있습니다.

-

소개

-

이 입문서는 여러분을 아주 간단한 확장기능(Firefox 브라우저에 텍스트 "Hello, World!"를 담고 있는 상태 표시줄 패널을 추가하는)을 만드는 데 필요한 과정 속으로 안내합니다.

-
-

주의 이 입문서는 Firefox 1.5 이상 버전의 확장기능 만들기에 관한 내용입니다. 이전 버전 Firefox용 확장기능 만들기를 다루는 입문서도 있습니다.

-

썬더버드용 확장기능을 만드는 방법에 대한 입문서는 Building a Thunderbird extension에서 보실 수 있습니다.

-
-

개발 환경 구축하기

-

확장기능은 파일 확장자가 xpi (“zippy”로 소리 냄)인 ZIP 파일이나 묶음(Bundles)으로 배포됩니다.

-

XPI 파일 안 구조의 예 :

-
extension.xpi:
-              /install.rdf
-              /components/*
-              /components/cmdline.js
-              /defaults/
-              /defaults/preferences/*.js
-              /plugins/*
-              /chrome.manifest
-              /chrome/icons/default/*
-              /chrome/
-              /chrome/content/
-
-
-

이 글에서도 위와 비슷한 파일 구조를 만들 것입니다. 그러면 이제 하드디스크 어디든지(예컨대, C:\extensions\myExtension\이나 ~/extensions/my_extension/) 확장기능을 위한 폴더를 만들고, 이 폴더 안에 chrome 폴더를 만들고, chrome 폴더 안에 content 폴더를 만드세요.

-

확장기능 폴더 루트 안에, chrome 폴더와 나란히, 빈 텍스트 파일 두 개를 새로 만드세요. 하나는 chrome.manifest 그리고 다른 하나는 install.rdf입니다. 그리고, chrome/content 폴더 안에 sample.xul이라는 빈 텍스트 파일을 하나 만드세요.

-

만들어진 폴더 구조 :

-
<ext path>\
-          install.rdf
-          chrome.manifest
-          chrome\
-              content\
-                  sample.xul
-
-

Install Manifest 만들기

-

확장기능 폴더 계층(hierarchy) 상단에 여러분이 만든 install.rdf 파일을 열어 안에 다음을 써넣으세요.

-
<?xml version="1.0"?>
-
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
-
-  <Description about="urn:mozilla:install-manifest">
-    <em:id>sample@foo.net</em:id>
-    <em:version>1.0</em:version>
-    <em:type>2</em:type>
-
-    <!-- Target Application this extension can install into,
-         with minimum and maximum supported versions. -->
-    <em:targetApplication>
-      <Description>
-        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-        <em:minVersion>1.5+</em:minVersion>
-        <em:maxVersion>2.0.0.*</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-
-    <!-- Front End MetaData -->
-    <em:name>Sample!</em:name>
-    <em:description>A test extension</em:description>
-    <em:creator>Your Name Here</em:creator>
-    <em:homepageURL>http://www.foo.com/</em:homepageURL>
-  </Description>
-</RDF>
-
- -

최신 Firefox 1.5.0.x에서 작동하도록 디자인된 확장기능은 최대판을 "1.5.0.*"로 설정해야 합니다. 완전한 필수와 선택 프로퍼티 목록은 Install Manifests를 보세요.

-

파일을 저장하세요.

-

XUL로 브라우저 확장하기

-

Firefox의 사용자 인터페이스는 XUL과 JavaScript로 작성됩니다. XUL은 button, menu, toolbar, tree 등과 같은 사용자 인터페이스 위젯을 제공하는 XML 문법입니다. 사용자 동작은 JavaScript로 작동됩니다.

-

브라우저를 확장하기 위해, 우리는 위젯을 추가하거나 수정하여 브라우저의 UI 부분을 수정합니다. 브라우저 창에 새 XUL DOM 요소를 삽입하여 위젯을 추가하고 스크립트 쓰고 이벤트 처리기(handler)를 붙여 위젯을 수정합니다.

-

브라우저는 browser.xul($FIREFOX_INSTALL_DIR/chrome/browser.jar가 content/browser/browser.xul를 포함합니다)로 구현됩니다. browser.xul에서 아래처럼 보이는 상태 표시줄을 찾을 수 있습니다.

-
<statusbar id="status-bar">
- ... <statusbarpanel>s ...
-</statusbar>
-
-

<statusbar id="status-bar">는 XUL Overlay를 위한 "병합점(merge point)"입니다.

-

XUL Overlay

-

XUL Overlays는 실행 시간(run time)에 XUL 문서에 다른 UI 위젯을 붙이는 한 가지 방법입니다. XUL Overlay는 "주(master)" 문서 안에서 특정 병합점에 삽입되는 XUL 조각(fragment)을 지정하는 .xul 파일입니다. 이 조각은 삽입, 제거, 수정되는 위젯을 지정하기도 합니다.

-

XUL Overlay 문서 예

-
<?xml version="1.0"?>
-<overlay id="sample"
-         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
- <statusbar id="status-bar">
-  <statusbarpanel id="my-panel" label="Hello, World"/>
- </statusbar>
-</overlay>
-
-

status-bar로 불리는 <statusbar>는 우리가 붙쳤으면 하는 브라우저 창 안 "병합점"을 지정합니다.

-

<statusbarpanel> 자식은 병합점 안에서 삽입하고 싶은 새 위젯입니다.

-

위에 있는 이 sample 코드를 취해 여러분이 만든 chrome/content 폴더 안에 sample.xul 파일로 저장하세요.

-

위젯 병합과 Overlay를 쓴 사용자 인터페이스 수정에 관한 더 많은 정보는, 아래를 보세요.

-

Chrome URI

-

XUL 파일은 "Chrome Packages"(chrome:// URI를 거쳐 로드되는 사용자 인터페이스 컴포넌트 묶음)의 부분입니다. file:// URI(시스템 위에서 Firefox 위치가 플랫폼과 시스템마다 바뀌기도 하기 때문에)를 써서 디스크에서 브라우저로 로드하기보다는, Mozilla 개발자들은 설치된 응용프로그램이 알고 있는 XUL content에 이르는 URI를 만드는 해결책을 냈습니다.

-

브라우저 창은 chrome://browser/content/browser.xul입니다. Firefox의 location bar에 이 URL을 쳐 보세요!

-

Chrome URI는 여러 컴포넌트로 구성되어 있습니다.

- -

그러므로, chrome://foo/skin/bar.png는 foo 테마의 skin section에서 bar.png 파일을 로드합니다.

-

Chrome URI를 써서 content를 로드할 때, Firefox는 이 URI를 디스크(나 JAR 패키지)의 실제 원본 파일로 번역하기 위해 Chrome 레지스트리를 씁니다.

-

Chrome Manifest 만들기

-

Chrome Manifest와 지원하는 프로퍼티에 관한 더 많은 정보는, Chrome Manifest 참고 문서를 보세요.

-

확장기능 원본 폴더 계층의 루트에 chrome 디렉토리와 나란히 만든 chrome.manifest 파일을 여세요.

-

이 코드를 추가하세요.

-
content     sample    chrome/content/
-
-

(끝에 "/"를 잊지 마세요! 빠트리면, 확장기능이 로드되지 않습니다.)

-

주의: Firefox/Thunderbird 1.5가 mixed/camel case를 지원하지 않기 때문에 패키지 이름("sample")에 모두 소문자를 씀을 확인하세요. 2.0과 이전버전에서 대소문자를 섞어쓰는 기능을 지원하지 않습니다. {{ Bug(132183) }}

-

이는 다음을 지정합니다.

-
    -
  1. chrome 패키지 안에 material 형
    2. -
  2. chrome 패키지 이름
    3. -
  3. chrome 패키지 파일의 위치
    4. -
-

그래서, 이 줄은 chrome 패키지 sample의 경우, chrome.manifest 위치와 상대 경로인 chrome/content 위치에서 우리가 패키지의 content 파일을 찾을 수 있음을 말합니다.

-

content, locale, skin 파일은 여러분의 chrome 하위디렉토리 안 content, locale, skin 폴더 안에 놓여야 함을 주의하세요.

-

파일을 저장하세요. 여러분의 확장기능이 깔린 Firefox를 띄우면, (이 입문서에서 뒤에), 이 줄이 chrome 패키지를 등록합니다.

-

Overlay 등록

-

브라우저를 표시할 때마다 Firefox가 여러분의 overlay를 브라우저 창에 병합할 필요가 있습니다. 그래서 chrome.manifest 파일에 이 줄을 추가하세요:

-
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
-
-

이 줄은 Firefox에게 browser.xul을 로드할 때 browser.xul 안에 sample.xul을 병합하도록 합니다.

-

시험

-

먼저, 우리는 Firefox에 확장기능 정보 알림이 필요합니다. 예전 좋지 않은 Firefox 1.0 때는 이는 확장기능을 XPI로 패키징하고 그것을 사용자 인터페이스를 거쳐 설치함을 뜻합니다. 그것은 실로 고통이었습니다. 이제는, 훨씬 더 간단합니다.

-
    -
  1. Profile 폴더를 여세요.
    2. -
  2. extensions 폴더를 여세요(없으면 만드세요).
    3. -
  3. 새 텍스트 파일을 만들어, 그 안에 extension 폴더(예컨대, C:\extensions\myExtension\이나 ~/extensions/myExtension)를 써넣으세요. 확장기능 id를 이름(예컨대, sample@foo.net)으로 갖는 파일로 저장하세요.
    4. -
-

이제 확장기능을 시험할 준비가 됐습니다!

-

Firefox를 시작하세요. Firefox가 확장기능 디렉토리 텍스트 링크를 감지하고 확장기능을 설치합니다. 브라우저 창이 보이면 여러분은 상태 표시줄 패널의 오른쪽에 텍스트 "Hello, World!"를 봅니다.

-

이제 돌아가서 .xul 파일에 변화를 주고, Firefox를 닫고 재시작하면 그 변화가 보입니다. These don't actually match the described extension and confuse people. -Nickolay CENTER> Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG </CENTER

-

Package

-

이제 여러분의 확장기능이 동작하므로, 배치(deployment)와 설치를 위해 그것을 패키지할 수 있습니다.

-

여러분의 확장기능 폴더 내용들을 Zip 파일로 압축하고 (확장기능 폴더 자체가 아닙니다.) zip 파일 확장자를 .xpi 로 바꾸세요. Windows XP에서는, 여러분의 확장기능 폴더 안 모든 파일과 하위폴더를 고르고 오른쪽 버튼을 누른 뒤 "보내기 -> Compressed (Zipped) Folder"를 골라 이를 쉽게 할 수 있습니다. .zip 파일은 여러분을 위해 만듭니다. 바로 이름을 바꾸면 끝납니다!

-

Mac OS X에서는, 확장기능 폴더의 내용들 위에서 오른쪽 버튼을 누른 뒤 zip 파일로 만들기 위해 "Create Archive of..."를 고를 수 있습니다. 그러나, Mac OS X가 파일 metadata를 추적(track)할 목적으로 숨김 파일을 폴더에 추가하기 때문에, 터미널을 쓰고 숨김 파일(의 이름은 마침표로 시작합니다)을 지워야 합니다. 그리고 나서 zip 파일을 만들기 위해 명령줄에서 zip 명령을 쓰세요.

-

Linux에서도, 역시 명령줄 Zip 도구를 씁니다.

-

혹시 여러분이 'Extension Builder' 확장기능을 설치했으면 여러분을 위해 .xpi 파일을 compile할 수 있습니다(도구 -> Extension Developer -> Extension Builder). 단지 여러분의 확장기능(install.rdf 등)이 있는 디렉토리를 탐색하고 Build Extension button을 누르세요. 이 확장기능에 개발을 더 쉽게 하는 많은 도구가 있습니다.

-

이제 여러분의 서버에 .xpi 파일을 올려주고(upload), application/x-xpinstall로 다뤄지는지 확인하세요. 여러분은 그 파일에 링크할 수 있고 사람들이 내려받고(download) Firefox에 설치하게 할 수 있습니다. .xpi 파일을 시험할 목적으로 우리는 단지 Tools -> Extensions이나 Add-Ons -> Extensions in FireFox 2을 거쳐 확장기능 창 안에 그것을 끌어다 놓을 수 있습니다.

-

addons.mozilla.org 이용하기

-

Mozilla Update는 공짜로 확장기능을 host할 수 있는 배포 사이트입니다. 여러분의 확장기능은 비록 매우 유명해지더라도 내려받기를 보장하는 Mozilla의 mirror 네트워크에 host됩니다. Mozilla 사이트는 또한 사용자에게 더 쉬운 설치를 제공하고 여러분이 새 버전을 올려주면 기존 버전 사용자들이 자동으로 이용할 수 있게 합니다. 게다가 Mozilla Update는 사용자들이 여러분의 확장기능에 평(comment)을 하고 feedback을 제공하게 합니다. 여러분이 확장기능을 배포하는 데 Mozilla Update 사용을 강력히 권고합니다!

-

http://addons.mozilla.org/developers/ 에 방문하여 계정을 만든 뒤 확장기능 배포를 시작하세요!

-

주의: 여러분의 확장기능은 좋은 설명과 확장기능 실행 스크린샷(screenshot)이 있으면 더 빨리 퍼지고 더 많이 내려받습니다.

-

Windows 레지스트리에 확장기능 등록하기

-

Windows에서, 확장기능 정보는 레지스트리에 추가될 수 있고 확장기능은 응용프로그램이 시작하는 다음 번에는 자동으로 pick up됩니다. 이는 응용프로그램 설치프로그램이 쉽게 integration hook을 확장기능에 추가하게 합니다. 더 많은 정보는 Windows 레지스트리를 써서 확장기능 추가하기를 보세요.

-

XUL Overlay 더 많은 정보

-

병합점에 UI 위젯 추가 외에 또, Overlay 안에 XUL 조각을 다음에 쓸 수 있습니다.

- -
<statusbarpanel position="1" .../>
-
-<statusbarpanel insertbefore="other-id" .../>
-
-<statusbarpanel insertafter="other-id" .../>
-
-

새로운 사용자 인터페이스 컴포넌트 만들기

-

여러분은 UI 위젯을 조작하는 DOM 메소드를 써서 .js 파일에서 사용자 동작을 구현하여 기능(functionality)을 제공하는 분할한 .xul 파일로 여러분의 창과 대화상자를 만들 수 있습니다. 이미지 붙임, 색 설정 등을 하기 위해 .css 파일에서 스타일 규칙을 쓸 수 있습니다.

-

XUL 개발자를 위한 더 많은 자원(resource)은 XUL 문서를 보세요.

-

Defaults File

-

Defaults file은 여러분의 확장기능 폴더 계층의 루트 아래 defaults/에 놓일 사용자 profile을 뿌리는(seed) 데 씁니다. defaults/preferences/에 저장될 Default preferences .js file - .js 파일을 여기에 놓으면 시작할 때 Firefox preferences system에 의해 자동으로 로드되어 Preferences API를 써서 파일에 접근할 수 있습니다.

-

XPCOM 컴포넌트

-

Firefox는 확장기능에 XPCOM 컴포넌트를 지원합니다. 여러분은 JavaScript나 C++(Gecko SDK를 써서)로 쉽게 자신만의 컴포넌트를 만들 수 있습니다.

-

components/ 디렉토리에 모든 .js나 .dll 파일을 두세요 - 여러분의 확장기능이 설치된 뒤 Firefox가 도는 첫 번에 자동으로 등록됩니다.

-

더 많은 정보는 JavaScript로 XPCOM 컴포넌트 빌드하는 법과 책 XPCOM 컴포넌트 만들기를 보세요.

-

응용프로그램 명령줄

-

사용자 정의(custom) XPCOM 컴포넌트의 가능한 쓰임 가운데 하나는 Firefox 나 Thunderbird 에 명령줄 처리기 추가입니다. 여러분은 확장기능을 응용프로그램으로 실행하는 데 이 기술을 쓸 수 있습니다.

-
 firefox.exe -myapp
-
-

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(). 상세한 내용은 Chrome: Command Line과 forum discussion을 보세요.

-

지역화

-

하나 이상의 언어를 지원하려면, entities와 string bundles을 써서 content에서 문자열을 분리해야 합니다. 돌아와서 나중에 하기보다는 확장기능을 개발하면서 하면 훨씬 더 쉽습니다!

-

지역화 정보는 그 확장기능을 위한 locale 디렉토리에 저장됩니다. 예를 들어, sample 확장기능에 locale을 추가하려면, chrome 디렉토리("content" 디렉토리가 위치한)에 "locale"로 이름 붙인 디렉토리를 만들고 chrome.manifest 파일에 다음 줄을 추가하세요:

-
locale sample sampleLocale chrome/locale/
-
-

XUL로 localizable 속성값을 만들려면, .ent(나 .dtd) 파일에 그 값을 써넣으세요, 속성값은 locale 디렉토리에 놓이고 이와 같이 보입니다.

-
<!ENTITY  button.label     "Click Me!">
-<!ENTITY  button.accesskey "C">
-
-

그리고 나서 XUL 문서 상단(하지만 "<?xml version"1.0"?>" 아래)에 이렇게 포함(include)하세요.

-
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
-
-

window는 XUL 문서 루트 요소의 localName값이고 SYSTEM 프로퍼티 값은 엔티티(entity) 파일의 chrome URI입니다. sample 확장기능에서, 루트 요소는 overlay입니다.

-

그 엔티티를 쓰려면, XUL을 이렇게 보이도록 수정하세요.

-
<button label="&button.label;" accesskey="&button.accesskey;"/>
-
-

Chrome Registry가 선택한 locale과 대응하는 지역화 묶음에서 로드된 엔티티 파일인지 확인합니다.

-

스크립트에서 쓴 문자열은, 이 형식으로 각 줄에 문자열이 있는 .properties 파일, 텍스트 파일을 만드세요.

-
key=value
-
-

그리고 나서 스크립트에 그 값을 로드하기 위해 nsIStringBundleService/nsIStringBundle이나 <stringbundle> tag을 쓰세요.

-

브라우저 이해하기

-

브라우저 창이나 여러분이 확장하길 원하는 어떤 다른 XUL 창을 검사하려면 DOM Inspector (Standard Firefox 설치 부분이 아님, browser의 Tools(도구) 메뉴에 "DOM Inspector" 항목이 없으면 사용자 정의 설치 경로로 재설치하고 Developer Tools를 골라야 합니다)를 쓰세요.

-

노드를 선택하기 위해 XUL 창의 노드를 눈에 보이게 클릭하려면 DOM Inspector toolbar 좌상단에 있는 point-and-click 노드 finder button을 쓰세요. 이렇게 하면 DOM inspector의 DOM 계층 tree view는 여러분이 클릭하는 노드로 건너뜁니다.

-

overlay에서 여러분의 요소를 삽입하는 데 쓸 수 있는 id 붙은 병합점을 발견하려면 DOM Inspector의 오른쪽 패널을 쓰세요. 병합할 수 있는 id 붙은 요소를 발견할 수 없으면, overlay에 스크립트 붙임과 load 이벤트가 주 XUL 창 위에 발생할 때 요소 삽입이 필요할 지도 모릅니다.

-

확장기능 디버그하기

-

디버깅을 위한 분석 도구

- -

printf 디버깅

- -

고급 디버깅

- -

빠른 시작

-

여러분은 작동하는 단순 확장기능을 만드는 데 Extension Wizard 온라인 도구를 쓸 수 있습니다.

-

Extension Wizard로 만들 수 있는 것과 비슷한 Hello World 확장기능은 MozillaZine Knowledge Base의 다른 입문서에서 한 줄 한 줄 설명합니다.

-

부가 정보

- diff --git a/files/ko/conflicting/learn/common_questions/index.html b/files/ko/conflicting/learn/common_questions/index.html new file mode 100644 index 0000000000..3752c49274 --- /dev/null +++ b/files/ko/conflicting/learn/common_questions/index.html @@ -0,0 +1,19 @@ +--- +title: Infrastructure +slug: Learn/Infrastructure +translation_of: Learn/Common_questions +translation_of_original: Learn/Infrastructure +--- +

이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:

+ +

기본 스킬

+ +

웹에 익숙하지 않으시다면 여기서부터 시작하세요. 웹에 관련된 전문용어를 이해하기위해서 용어사전을 참고하는 것을 추천합니다.

+ +

중급 스킬

+ +

웹에 익숙해지셨다면, 여기에 더 자세한 것들이 있습니다:

+ +

고급 스킬

+ +

경험있는 웹 저자라면, 특정 주제나 특별한 기술들에 흥미를 느끼실 것입니다.

diff --git a/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html new file mode 100644 index 0000000000..1f04d35fe1 --- /dev/null +++ b/files/ko/conflicting/learn/common_questions_139278709439023a85d849385412271e/index.html @@ -0,0 +1,24 @@ +--- +title: Web 기술 +slug: Learn/Web_기술 +tags: + - Beginner + - WebMechanics +translation_of: Learn/Common_questions +translation_of_original: Learn/Web_Mechanics +--- +

이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.

+ +

{{NoteStart}}Web 기술 은 웹 생태계의 기술적인 측명이 아니라, Infrastructure 범위의 기능에 집중합니다.{{NoteEnd}}

+ +

기본 스킬

+ +

만약 웹이 익숙하지 않다면 여기서 시작하세요. 웹 용어의 이해를 돕기 위한 우리의 glossary 에 의지하는것도 제안합니다.

+ +

중급 스킬

+ +

일단 웹이 익숙해지셨다면, 여러분이 탐구할 몇 가지 세부적인 것이 여기 있습니다:

+ +

고급 스킬

+ +

만약 웹 제작을 경험해보셨다면, 여러분은 몇 가지 특수하거나 일반적이지 않은 기술들에 흥미를 가지실 것입니다.

diff --git a/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..5c58432ad2 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,127 @@ +--- +title: 종속과 상속 +slug: Web/CSS/시작하기/종속과_상속 +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+ +

{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}CSS 시작하기 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.

+ +

정보: 종속과 상속

+ +

element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.

+ +

종속의 세가지 주요 원천은 아래와 같다.

+ + + +

사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.

+ +
+
예제
+ +

이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.

+ +

일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.

+ +

일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.

+
+ +

예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.

+ +

{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.

+ +

{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.

+ +

종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.

+ +

상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.

+ +

우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.

+ +
+
좀더 자세히
+ +

CSS는 !important 키워드를 써서 사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.

+ +

이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.

+ +

종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 속성 값 할당, 종속 및 상속 부분을 보라.

+
+ +

액션: 상속 사용하기

+ +
    +
  1. CSS 예제 파일을 편집해 보자.
    2. +
  2. 아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다. + 
    p {color: blue; text-decoration: underline;}
+
    +
    3. +
  3. 이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.
    + +

    그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.

    +
    4. +
+ + +
+ + + + + + + + +
Before
Cascading Style Sheets
+ + + + + + + + +
After
Cascading Style Sheets
+ +
+
도전
+Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라. + + + + + + + +
Cascading Style Sheets
+ +
+
Possible solution
+ +

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

+ +
p {color: blue; }
+strong {color: orange; text-decoration: underline;}
+
+ +

 

+Hide solution
+정답 확인
+ +

다음에는?

+ +

{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <p>와 <strong> 태그를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 설렉터를 사용하는 법에 대해 알아보자.

diff --git a/files/ko/conflicting/learn/css/building_blocks/index.html b/files/ko/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..cc6b499241 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: 상자 +slug: Web/CSS/시작하기/상자 +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +

{{ CSSTutorialTOC() }}

+ +
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+ +

{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}CSS 시작하기 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.

+ +

정보: 상자

+ +

Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.

+ +

가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

옅은 회색은 레이아웃의 구성을 보여준다.

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

브라우저에서는 위와 같이 보여준다.

+
+ +

안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.

+ +

색상입히기

+ +

안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.

+ + + + + + + + +
+
+

margin

+ +

border

+ +
+

padding

+ +
+

element

+
+
+
+ +

element는 녹색 배경색이다..

+ 		+
+

 

+ +

 

+ +
+

 

+ +
+

element

+
+
+
+ +

브라우저에서 보면 위와 같다.

+
+ +

경계

+ +

라인이나 상자를 통해 element의 경계를 치장 할 수 있다.

+ +

경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.

+ +

스타일은 아래와 같다.

+ + + + + + + + + + + + + + + + +
+
solid
+ 		+
dotted
+ 		+
dashed
+ 		+
double
+
+
inset
+ 		+
outset
+ 		+
ridge
+ 		+
groove
+
+ +

스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.

+ +

경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할  수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.

+ +
+
예제
+ +

아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.

+ +
h3 {
+  border-top: 4px solid #7c7; /* mid green */
+  background-color: #efe;     /* pale green */
+  color: #050;                /* dark green */
+  }
+
+ +

결과는 아래와 같다.

+ + + + + + + +
+

Stylish heading

+
+ +

아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.

+ +
img {border: 2px solid #ccc;}
+
+
+ +

결과는 아래와 같다.

+ + + + + + + + +
Image:Image:Blue-rule.png
+ +

내/외부 여백

+ +

내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.

+ +

바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.

+ +

위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.

+ +

넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.

+ +

4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.

+ +
+
예제
+ +

아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.

+ +

안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.

+ +
p.remark {
+  border: 2px solid red;
+  padding: 4px;
+  margin-left: 24px;
+  }
+
+ +

결과는 아래와 같다.

+ + + + + + + +
+

Here is a normal paragraph.

+ +

Here is a remark.

+
+
+ +
+
좀더 자세히
+ +

내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.

+ +

브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.

+ +

원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.

+ +

내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 Box model를 참조하라.

+
+ +

액션: 경계선 추가

+ +

style2.css를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.

+ +
h3 {border-top: 1px solid gray;}
+
+ +

이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.

+ +
li {
+  list-style: lower-roman;
+  margin-bottom: 8px;
+  }
+
+ +

결과를 보기위해 브라우저에서 새로 읽어 보라.

+ + + + + + + +
+

(A) The oceans

+ +
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+ +

(B) Numbered paragraphs

+ +

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +
+
도전
+ +

예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +

. . .

+
+ +

 

+ +

(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)

+
+ +

결과 확인.

+ +

다음에는?

+ +

{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.

diff --git a/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..17a57d49e9 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,475 @@ +--- +title: 테이블 +slug: Web/CSS/시작하기/테이블 +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +

{{ CSSTutorialTOC() }}

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}CSS 시작하기 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.

+

정보 : 테이블

+

테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.

+

Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.

+

시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(Layout)를 사용하는 것이 더 좋은 방법이다.

+

테이블 구조

+

테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.

+

테이블의 같은 줄의 블럭은 하나의 행을 구성한다.

+

몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(header)로 사용된다.  테이블의 마지막 행의 그룹은 꼬릿말(footer)로 사용되기도 한다. 테이블의 다른 행들은 본문(body)이 되고 한 덩어리의 그룹으로 간주된다.

+

아래에 있는 블럭은 하나의 열(column)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.

+
+
+ 예제
+

설렉터페이지 내의 연관관계로 본 설렉터의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.

+

첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.

+

열은 2개이다.

+
+

여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.

+

경계

+

셀 블럭은 바깥 여백이 없다.

+

셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 collapse로 설정하면 이 여백을 없앨 수 있다.

+
+
+ 예제
+

여기 세가지 테이블을 확인 해 보자.

+

왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.

+ + + + + + + + +
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+

캡션

+

캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.

+

캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 bottom으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.

+

캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.

+
+
+ 예제
+

이 테이블은 아래쪽에 캡션을 가지고 있다.

+ 
#demo-table > caption {
+  caption-side: bottom;
+  font-style: italic;
+  text-align: right;
+}
+
+ + + + + + +
+ + + + + + + +
+ Suits
+ + + + + + + + + + + +
ClubsHearts
DiamondsSpades
+
+
+
+

빈 셀블럭

+

테이블 element에 {{ cssxref("empty-cells") }}: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.

+

empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.

+
+
+ 예제
+

이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.

+

아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.

+ + + + + + + +
+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+ 		+ + + + + + + + + + + +
 Hearts
DiamondsSpades
+
+
+
+
+ 자세히
+

CSS 사양서의 테이블에서 좀더 자세한 테이블에 대한 사항을 확인 하라.

+

여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.

+
+

액션 : 테이블 꾸미기

+
    +
  1. doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라. +
    + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Sample document 3</title>
+    <link rel="stylesheet" href="style3.css">
+  </head>
+  <body>
+    <table id="demo-table">
+      <caption>Oceans</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th>Area</th>
+          <th>Mean depth</th>
+        </tr>
+        <tr>
+          <th></th>
+          <th>million km<sup>2</sup></th>
+          <th>m</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>Arctic</th>
+          <td>13,000</td>
+          <td>1,200</td>
+        </tr>
+        <tr>
+          <th>Atlantic</th>
+          <td>87,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Pacific</th>
+          <td>180,000</td>
+          <td>4,000</td>
+        </tr>
+        <tr>
+          <th>Indian</th>
+          <td>75,000</td>
+          <td>3,900</td>
+        </tr>
+        <tr>
+          <th>Southern</th>
+          <td>20,000</td>
+          <td>4,500</td>
+        </tr>
+      </tbody>
+      <tfoot>
+        <tr>
+          <th>Total</th>
+          <td>361,000</td>
+          <td></td>
+        </tr>
+        <tr>
+          <th>Mean</th>
+          <td>72,000</td>
+          <td>3,800</td>
+        </tr>
+      </tfoot>
+    </table>
+  </body>
+</html>
+
    +
    +
    2. +
  2. style3.css를 만들어 아래 긴 내용을 전부 복사해 넣어라. + 
    /*** Style for doc3.html (Tables) ***/
+
+#demo-table {
+  font: 100% sans-serif;
+  background-color: #efe;
+  border-collapse: collapse;
+  empty-cells: show;
+  border: 1px solid #7a7;
+}
+
+#demo-table > caption {
+  text-align: left;
+  font-weight: bold;
+  font-size: 200%;
+  border-bottom: .2em solid #4ca;
+  margin-bottom: .5em;
+}
+
+
+/* basic shared rules */
+#demo-table th,
+#demo-table td {
+  text-align: right;
+  padding-right: .5em;
+}
+
+#demo-table th {
+  font-weight: bold;
+  padding-left: .5em;
+}
+
+
+/* header */
+#demo-table > thead > tr:first-child > th {
+  text-align: center;
+  color: blue;
+}
+
+#demo-table > thead > tr + tr > th {
+  font-style: italic;
+  color: gray;
+}
+
+/* fix size of superscript */
+#demo-table sup {
+  font-size: 75%;
+}
+
+/* body */
+#demo-table td {
+  background-color: #cef;
+  padding:.5em .5em .5em 3em;
+}
+
+#demo-table tbody th:after {
+  content: ":";
+}
+
+
+/* footer */
+#demo-table tfoot {
+  font-weight: bold;
+}
+
+#demo-table tfoot th {
+  color: blue;
+}
+
+#demo-table tfoot th:after {
+  content: ":";
+}
+
+#demo-table > tfoot td {
+  background-color: #cee;
+}
+
+#demo-table > tfoot > tr:first-child td {
+  border-top: .2em solid #7a7;
+}
+
    +
    3. +
  3. 브라우저에서 열어서 아래와 같이 나오는 지 확인 하라. + + + + + + +
    +
    +

    Oceans

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    +
    +
    +
    +
    4. +
  4. 화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다. +
      +
    • 캡션은 테이블 바깥 경계에 표시된다.
      • +
    • 옵션에 최소 포인트 크기 세트가 있다면 km2에 있는 '2'처럼 어깨 글자에 적용 될 것이다.
      • +
    • 테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.
      • +
    • 콜론은 Stylesheet에서 추가 되었다.
      • +
    +
    5. +
+
+
+ 도전
+

아래처럼 보이도록 Stylesheet를 바꿔 보라

+ + + + + + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
+
+

Oceans

+
+
+

 

+
+

정답 확인

+

다음에는?

+

{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 Full property table를 보라.

+

다음에는 CSS의 Stylesheet구조와 목적에 대해 다시한번 살펴보자.

diff --git a/files/ko/conflicting/learn/css/css_layout/index.html b/files/ko/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..86ea912bb7 --- /dev/null +++ b/files/ko/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,370 @@ +--- +title: 배치 +slug: Web/CSS/시작하기/배치 +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +

{{ CSSTutorialTOC() }}

+ +
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+ +

{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}CSS 시작하기 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.

+ +

정보: 배치

+ +

Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.

+ +

여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.

+ +

여기서는 간단한 기술에 대해 연습 해 보자.

+ +

Document 구조

+ +

만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.

+ +

document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.

+ +
+
예제
+ +

예제 Document에서 Numbered paragraphs가 표시된 단락은 컨테이너 구조가 아니다.

+ +

따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.

+ +

이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.

+ +
<h3>Numbered paragraphs</h3>
+<div id="numbered">
+  <p>Lorem ipsum</p>
+  <p>Dolor sit</p>
+  <p>Amet consectetuer</p>
+  <p>Magna aliquam</p>
+  <p>Autem veleum</p>
+</div>
+
+ +

이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.

+ +
ul, #numbered {
+  border: 1em solid #69b;
+  padding-right:1em;
+}
+
+ +

아래와 같은 형식으로 출력된다.

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+
+ +

크기 단위

+ +

지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.

+ +

다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다.  고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.

+ +
+
예제
+ +

아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.

+ +

오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.

+ +

브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.

+ + + + + + + +
+
RESIZE ME PLEASE
+
+
+ +
+
좀더 자세히
+ +

다른 기기에서는 다른 단위가 적절할 수 있다.

+ +

이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.

+ +

변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 Values 부분을 참고 하라.

+
+ +

텍스트 배치

+ +

element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.

+ +
+
{{ cssxref("text-align") }}
+
이 left, right, center, justify값로 할당하여 정열 할 수 있다.
+
{{ cssxref("text-indent") }}
+
들여쓰기를 위해 적당한 값을 명시하여 사용 한다.
+
+ +

이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.

+ +
+
예제
+ +

헤더를 가운데 정렬하려면

+ +
h3 {
+  border-top: 1px solid gray;
+  text-align: center;
+}
+
+ +

결과는 아래와 같다.

+ + + + + + + +
+

(A) The oceans

+
+ +

HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.

+
+ +

부유(Floats)

+ +

{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.

+ +

나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.

+ +
+
예제
+ +

예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.

+ +

아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.

+ +
ul, #numbered {float: left;}
+h3 {clear: left;}
+
+
+ +

The result looks like:

+ + + + + + + +
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+
+ +

(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)

+ +

위치잡기

+ +

{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.

+ +

더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.

+ +
+
relative
+
element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.
+
fixed
+
고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.
+
absolute
+
부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 relative, fixed or absolute 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.
+
static
+
기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.
+
+ +

이 위치 지정 속성과 함께(static은 제외) 방향(top, right, bottom, left), 높이(width), 넓이(height) 크기(size)도 같이 지정 해야 한다.

+ +
+
예제
+ +

아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.

+ +
<div id="parent-div">
+  <p id="forward">/</p>
+  <p id="back">\</p>
+</div>
+
+ +

예제 stylesheet에서 부모 element의 위치 속성을 relative로 하라. 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.

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

결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.

+ +
+

/

+ +

\

+
+ + + + + + + +
 
+
+ +
+
좀더 자세히
+ +

위치 지정에 대한 모든 내용은 CSS 사양서의 Visual formatting model과 Visual formatting model details의 두 챕터에 나와 있다.

+ +

다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.

+
+ +

액션: 배치 선언

+ +
    +
  1. doc2.html와 style2.css를 수정 하여 위에 나온Document structure 와 Floats를 연습 해 보자.
    2. +
  2. Floats예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.
    3. +
+ +
+
도전
+ +

doc2.html의 아래쪽 </body> 바로 위에 아래 태그를 추가하라.

+ +
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
+
+ +

아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.

+ + + + + + + +
Image:Yellow-pin.png
+ +

Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.

+ +

Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.

+ +

브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.

+ +
+
+

(A) The oceans

+ +
+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+ +

(B) Numbered paragraphs

+ +
+

1: Lorem ipsum

+ +

2: Dolor sit

+ +

3: Amet consectetuer

+ +

4: Magna aliquam

+ +

5: Autem veleum

+
+ +

 

+ +
Yellow map pin
+
+
+
+ +

정답 확인.

+ +

다음에는?

+ +

{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 테이블의 스타일을 설정하는 방법에 대해 알아보자.

diff --git a/files/ko/conflicting/learn/css/css_layout/introduction/index.html b/files/ko/conflicting/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..5437902bf1 --- /dev/null +++ b/files/ko/conflicting/learn/css/css_layout/introduction/index.html @@ -0,0 +1,409 @@ +--- +title: Introduction to CSS Layout +slug: Learn/CSS/Basics/Layout +translation_of: Learn/CSS/CSS_layout/Introduction +translation_of_original: Learn/CSS/Basics/Layout +--- +

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

+ +

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

+ +

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.

+ +

The flow

+ +

At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text flows. 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.

+ +

+ +

+ +

Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:

+ + + +

디스플레이 요소 (Elements display categories)

+ +

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:

+ +
+
none
+
모든 요소를 제거 합니다.
+
inline
+
줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. 
+
block
+
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 box model.
+
inline-block
+
This value makes the element somewhat in between inline and block type display: like inline boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.
+
+ +

Let's see an example.

+ +

HTML:

+ +
<p class="none">
+  1. I'm a big black cat,
+  <span>walking under a ladder,</span>
+  and I can see broken mirrors everywhere.
+</p>
+
+<p class="inline">
+  2. I'm a big black cat,
+  <span>walking under a ladder,</span>
+  and I can see broken mirrors everywhere.
+</p>
+
+<p class="block">
+  3. I'm a big black cat,
+  <span>walking under a ladder,</span>
+  and I can see broken mirrors everywhere.
+</p>
+
+<p class="inline-block">
+  4. I'm a big black cat,
+  <span>walking under a ladder,</span>
+  and I can see broken mirrors everywhere.
+</p>
+
+ +

CSS:

+ +
span {
+  width: 5em;
+  background: yellow;
+}
+
+.none span         { display: none;         }
+.inline span       { display: inline;       }
+.block span        { display: block;        }
+.inline-block span { display: inline-block; }
+ +

Results:

+ +

{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}

+ +

Altering the flow

+ +

By setting the display property you're already altering the flow, but you can go further.

+ +

Text layout

+ +

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.

+ +

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

+ +

Except for text-align and, text-indent the other properties have subtle effects on the text and vertical-align is often used with inline-block boxes.

+ +

An example will make things clearer.

+ +

HTML:

+ +
<p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
+<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
+
+ +

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

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.

+
+ +

Results:

+ +

{{ EmbedLiveSample('Text_layout', '100%', '350') }}

+ +
+

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.

+
+ +

Floating

+ +

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.

+ +

Simple floating

+ +

HTML:

+ +
<div>
+  <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p>
+  <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p>
+</div>
+ +

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

Results:

+ +

{{ EmbedLiveSample('Simple_floating', '100%', '280') }}

+ +

Layout with floating

+ +

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.

+ +

Once again, an example will make things clearer.

+ +

HTML:

+ +
<div class="layout">
+  <div class="row">
+    <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p>
+    <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p>
+  </div>
+  <div class="row">
+    <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p>
+  </div>
+  <div class="row">
+    <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p>
+    <p class="cell size33">
+      "Ding, dong!"<br>
+      "A quarter past," said Scrooge, counting.<br>
+      "Ding, dong!"<br>
+      "Half-past!" said Scrooge.<br>
+      "Ding, dong!"<br>
+      "A quarter to it," said Scrooge.<br>
+      "Ding, dong!"<br>
+      "The hour itself," said Scrooge, triumphantly, "and nothing else!"
+    </p>
+    <p class="cell size33">
+      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
+    </p>
+  </div>
+</div>
+ +

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 */
+ +

Results:

+ +

{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}

+ +

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 floating boxes has been studied for long and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.

+ +

If you want to better understand all the subtleties of floating boxes, we encourage you to read All about float by Chris Coyer.

+ +

Positioning

+ +

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.

+ +

The {{cssxref("position")}} property can take on four different values:

+ +
+
static
+
This is the default value for all elements: they are part of the flow and don't define any specific positioning context.
+
relative
+
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.
+
absolute
+
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 static. 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.
+
fixed
+
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")}}.
+
+ +

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.

+ +

Okay, let's see an example to visualize it at work.

+ +

HTML:

+ +
<div class="relative">
+    <div class="absolute-one">
+        <p>Position:absolute</p></br>
+        <p>Top Right</p>
+    </div>
+
+    <div class="absolute-two">
+        <p>Position:absolute</p></br>
+        <p>Bottom Centre</p>
+    </div>
+
+    <div class="absolute-three">
+        <p>Position:static</p></br>
+        <p>Where it falls</p>
+    </div>
+</div>
+ +

CSS:

+ +
p {
+  text-align:  centre;
+  color: #fff;
+}
+
+
+/* Setting the position to relative
+allows any child elements to be positioned
+anywhere, in relation to its container. */
+
+.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;
+}
+
+ +

Results:

+ +

{{ EmbedLiveSample('Positioning', '100%', '400') }}

+ +

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 CSS positioning 101 by Noah Stokes.

+ +

What's next

+ +

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 practical usage of CSS. 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, multiple columns layout, and flexible box layout.

+ +

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

+ +
 
diff --git a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..8866132472 --- /dev/null +++ b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,150 @@ +--- +title: 텍스트 스타일 +slug: Web/CSS/시작하기/텍스트_스타일 +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ CSSTutorialTOC() }}

+ +
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+ +

{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}CSS 시작하기 안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.

+ +

정보: 텍스트 스타일

+ +

CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.

+ +

여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면

+ + + +
+
예제
+ +
p {font: italic 75%/125% "Comic Sans MS", cursive;}
+
+ +

위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.

+ +

폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.

+ +

글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.

+ +

이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.

+
+ +

글씨체

+ +

보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.

+ +

맨 마지막에는 기본 글씨체(serif, sans-serif, cursive, fantasy or monospace)를 추가 설정 해 주는 것이 좋다.

+ +

만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.

+ +

글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.

+ +

글씨 크기

+ +

브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.

+ +

폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.

+ +

14px (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.

+ +

글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.

+ +

줄 높이

+ +

Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.

+ +

줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.

+ +

장식(Decoration)

+ +

별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.

+ +

다른 속성

+ +

기울기 속성 {{ cssxref("font-style") }}: italic;
+ 굵은 속성 {{ cssxref("font-weight") }}: bold;
+ 작은 대문자 {{ cssxref("font-variant") }}: small-caps;

+ +

위의 속성을 해제하려면 normal 또는 inherit로 설정하라.

+ +
+
좀더 자세히
+ +

텍스트 스타일은 다양한 방법으로 설정 가능하다.

+ +

예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.

+ +

복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 font 속성 사용을 피하라.

+ +

글씨체에 관한 모든 속성을 보려면, CSS 사양서의 Fonts부분을 보라. 다양한 텍스트 효과를 위해서는 Text 부분을 참고 하라.

+ +

사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 @font-face로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.

+
+ +

액션: 글씨체 설정

+ +

간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.

+ +
    +
  1. 예제 CSS 편집 해 보자.
    2. +
  2. 예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다. + 
    body {font: 16px "Comic Sans MS", cursive;}
+
    +
    3. +
  3. 주석을 탭이나 공백과 함께 잘 배치해 보라.
    4. +
  4. 저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다. + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. 브라우저 메뉴에서 View > Text Size > Increase (or View > Zoom > Zoom In)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.
    6. +
+ +
+
도전
+ +

다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Possible solution
+ +

Add the following style declaration to the strong rule:

+ +
  font: 200% serif;
+
+If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. + +

 

+Hide solution
+정답 확인
+ +

다음에는?

+ +

{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. 다음 장에서는 기본 색생과 다른 색상 표현 법에 대해 알아본다.

diff --git a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..0e0e215006 --- /dev/null +++ b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,245 @@ +--- +title: 리스트 +slug: Web/CSS/시작하기/리스트 +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

{{ CSSTutorialTOC() }}

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}CSS 시작하기 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지  설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.

+

정보: 리스트

+

지난 섹션에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.

+

CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.

+

리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.

+

CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.

+

무순서 리스트

+

무순서 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.

+

CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.

+ +

다른 이미지도 URL로 설정 가능하다.

+
+
+ 예제
+

아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.

+ 
li.open {list-style: circle;}
+li.closed {list-style: disc;}
+
+

When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):

+ 
<ul>
+  <li class="open">Lorem ipsum</li>
+  <li class="closed">Dolor sit</li>
+  <li class="closed">Amet consectetuer</li>
+  <li class="open">Magna aliquam</li>
+  <li class="closed">Autem veleum</li>
+</ul>
+
+

위 코드는 아래처럼 보여질 것이다.

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

순차 리스트

+

순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.

+

{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.

+ +
+
+ 예제
+

이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.

+ 
ol.info {list-style: upper-latin;}
+
+

아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.

+ + + + + + +
+
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+
+
+ 좀더 자세히
+

{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.

+

만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.

+

브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.

+
+

카운터

+
+

참고:  일부 브라우저는 카운터를 지원하지 않는다. Quirks Mode site의 CSS 내용물과 브라우저 호환성 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 CSS 참조Reference의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.

+
+

리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.

+

순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.

+

element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.

+

카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.

+

카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 content속성을 사용하여라.(이전 페이지에서, Content사용에 대해 참고하라).

+

content 속성 값에 counter()카운터 이름과 함께 사용하라. 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 Ordered lists 섹션에 나온것과 같다.

+

보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.

+
+
+ 예제
+

이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.

+ 
h3.numbered {counter-reset: mynum;}
+
+

 

+

이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.

+ 
p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;}
+
+

결과는 아래와 같다.

+ + + + + + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+
+ 좀더 자세히
+

카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.

+

카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.

+

좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 Automatic counters and numbering 를 확인 하라.

+
+

액션: 화려한 리스트

+

새로이 doc2.html파일을 만들어라. 아래 코드를 복사하라.

+
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Sample document 2</title>
+    <link rel="stylesheet" href="style2.css">
+  </head>
+  <body>
+
+    <h3 id="oceans">The oceans</h3>
+    <ul>
+      <li>Arctic</li>
+      <li>Atlantic</li>
+      <li>Pacific</li>
+      <li>Indian</li>
+      <li>Southern</li>
+    </ul>
+
+    <h3 class="numbered">Numbered paragraphs</h3>
+    <p class="numbered">Lorem ipsum</p>
+    <p class="numbered">Dolor sit</p>
+    <p class="numbered">Amet consectetuer</p>
+    <p class="numbered">Magna aliquam</p>
+    <p class="numbered">Autem veleum</p>
+
+  </body>
+</html>
+
+

style2.css를 만들어 아래 내용을 복사하라.

+
/* numbered paragraphs */
+h3.numbered {counter-reset: mynum;}
+
+p.numbered:before {
+  content: counter(mynum) ": ";
+  counter-increment: mynum;
+  font-weight: bold;
+}
+
+

배치와 주석이 맘에 들지 않으면 마음대로 변경하라.

+

브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+
+ 도전
+

예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.

+ + + + + + +
+

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

 

+

예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.

+ + + + + + +
+

(A) The oceans

+

. . .

+

(B) Numbered paragraphs

+

. . .

+
+
+

정답 확인.

+

다음에는?

+

{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(boxes.xm).

diff --git a/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..4eeb42cae2 --- /dev/null +++ b/files/ko/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,328 @@ +--- +title: 시작하기 (자바스크립트 튜토리얼) +slug: Web/JavaScript/시작하기 +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +

왜 자바스크립트인가?

+

자바스크립트는 종종 오해할 수 있는 강력하고 복잡한 컴퓨터 언어이다. 사용자가 쉽게 데이터를 입력하고 결과를 볼 수 있게 어플리케이션을 빠르게 개발 할 수 있다.

+

 웹브라우저를 중심으로 또한 ECMAScript로 알려진 자바스크립트의 주요 장점은 이와 같이 브라우저를 지원하는 모든 플랫폼에 동일한 결과를 만들 수 있다. 이 페이지의 예제는 구글 맵스처럼 맥 OS와 윈도우, 리눅스에서 실행한다. 수많은 자바스크립트 라이브러리의 최근 성장과 함께 AJax 어플리케이션을 개발하거나 이벤트 처리하기, 에니메이션 만들기, DOM 엘리먼트 선택하기, 도큐먼트 탐색하기가 이제 더욱 쉬워졌다. 다양한 소유권의 이익에 의해 추진된 다른 기술의 과대 광고와는 달리 자바스크립트는 모두 무료이면서 보편적으로 채택된 클라이언트 사이드 프로그래밍 언어이면서 정말이지 유일한 크로스 플래폼이다.

+

당신이 이미 알아야 하는 것

+

자바스크립트는 프로그래밍을 같이 시작하기 위해 매우 쉬운 언어이다. 시작하기 위해서  당신이 필요한 모든 것은 텍스트 에디터와  웹브라우저이다.  

+

이 문서의 범위를 벗어나는 자바스크립트와 함께 개발되고 통합 할 수 있는 다른 기술은 많이 있다. 첫날부터 구글맵스과 같이 완전한 어플리케이션을 만들 것이라고 기대하지 마라!

+

시작하기

+

자바스크립트로 시작하기는 매우 쉽다. 당신은 복잡한 개발 프로그램 설치가 필요가 없다. 컴파일러를 사용하거나 프로그램 만들기, 쉘을 어떻게 사용하는지 알 필요가 없다. 자바스크립트는 당신의 웹 브라우저에서 해석 된다. 당신이 해야 할 모든 일은 텍스트 파일에 당신의 프로그램을 저장하고 당신의 웹브라우저를 연다. 단지 그 것이다!

+

자바스크립트는 입문 컴퓨터 언어로서 최고의 프로그래밍 언어이다. 새로운 학생에게  즉시 피드백 할 수 있게 하고 그들이 아마도 그들의 실생활에 유용한 것을 발견할 수 있는 도구들에 관한 것을 그들에게 가르친다. 이것은 전용 소프트웨어 개발자를 위해 정말 유용한 C, C++, JAVA 와는 뚜렷하게  대조적이다. 

+

브라우저 호환성 이슈들

+

다른 브라우저에서 사용이 가능한 어떤 기능 중에는 차이가 있다. Mozilla, Chrome, Microsoft IE, Apple Safari, Opera에서 가동하는 것에 따라 변동될 수 있다. 이런 변동사항을 문서화 하려고 한다.  사용 가능한 다양한 크로스 플랫폼 자바스크립트 API 사용하여 이런 이슈들을 완하시킬 수 있다. 이런 API는 공통 기능으로 제공하고 이 브라우저의  변동된 것을 숨긴다. 

+

예제를 시도하는 방법

+

아래의 예제들은  몇가지 샘플 코드를 가지고 있다. 이 예제들을 시도하는 방법은 여러가지가 있다. 만약 당신이 이미 당신의 웹사이트를 가지고 있다면 당신은 당신의 웹사이트에 새로운 웹 페이지로써 이 예제들을 저장할 수 있어야 한다.

+

만약 당신이 당신의 웹사이트를 가지고 있지 않다면 당신의 컴퓨터에 파일로써 이 예제들을 저장할 수 있고 당신이 현재 사용하고 있는 웹브라우저를 통해 예제들을 열 수 있다. 자바스크립트는 이런 이유로 시작하려는 프로그래머가 사용하기 매운 쉬운 언어이다. 당신은 컴파일러 또는 개발 환경이 필요하지 않다. 그리고 당신과 당신의 브라우저가 시작하기 위해서 필요한 모든 것이다!

+

예제 : 마우스 클릭 잡기

+

이벤트 핸들링(이벤트 타입들, 핸들러 등록, 전파 등)의 특성은 이 간단한 예제들을 완전히 적용하기에는 너무 광범위하다. 그런데 이 예제는 자바스크립트 이벤트 시스템에 대한 조금의 탐구도 없이 마우스 클릭을 잡기를 설명할 수 없다. 이 예제는 자바스크립트 이벤트에 관해 전체 자세한 내용을 가볍게 스쳐 지나 갈 것이고 만약 당신이 여기 설명된 기본 기능의 범위를 넘어서고 싶다면 자바스크립트 이벤트 시스템에 관해 더 자세히 읽어야 함을 명심하라.

+

'마우스'이벤트들은 사용자 동작에 반응한 웹브라우저에 의해 발생된 전체 이벤트의  집합이다.다음은 사용자의 마우스 동작에 대한 응답으로 방출되는 이벤트의 목록이다.

+ +

인라인 이벤트 핸들러, HTML의 최신버전에서 주의할 것은 다시 말하면 하나가 태그 애트리뷰트들로써 추가 되었다는 것은 모두 소문자 이고 스크립트의 이벤트 핸들러가 항상 모든 소문자이어야 하는 것을 예상된다.

+

이벤트 핸들러를 등록하려는 이러한 이벤트들을 캡처하기 위해 가장 간단한 방법은 HTML을 사용하여 당신의 엘리먼트의 애트리뷰트들로서 개별적인 이벤트들을 지정하는 것이다.

+

예제:

+
  <span onclick="alert('Hello World!');">Click Here</span>
+

당신이 실행하기 원하는 자바스크립트 코드를 애트리뷰트 값으로서 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :

+
<script>
+  function clickHandler() {
+     alert("Hello, World!");
+  }
+</script>
+<span onclick="clickHandler();">Click Here</span>
+

또한 발생된 이벤트 객체는 캡처하거나 참조할 수 있으며 객체가 이벤트를 받거나 이벤트 타입 그리고 마우스가 클릭됐을 때 그러한 이벤트에 관한 특성을 접근하는 무언가 개발하는 것을  제공할 수 있다. 인라인 예제를 다시 사용 하라:

+
<script>
+  function clickHandler(event) {
+    var eType = event.type;
+    /* 다음은 호환성을 위한 것이다. */
+    /* Moz는 이벤트 객체의 target 프로퍼티로 채운다. */
+    /* IE는 srcElement 프로퍼티로 채운다.*/
+    var eTarget = event.target || event.srcElement;
+
+    alert( "Captured Event (type=" + eType + ", target=" + eTarget );
+  }
+</script>
+<span onclick="clickHandler(event);">Click Here</span>
+

당신의 HTML안에 이벤트를 수신 등록 이외에 당신은 당신의 자바스크립트에 의해 생성된 어떠한 HTML엘리먼트 객체의 똑같은 이름으로 애트리뷰트들을 마찬가지로 설정할 수 있다. 아래의 예는 span 객체를 인스터트화하고 페이지의 body에  추가하고 mouse-over, mouse-out, mouse-down, mouse-up 이벤트들을 수신하기위해 span 객체를 등록한다. 

+
<body></body>
+<script>
+  function mouseeventHandler(event) {
+    /*다음은 호환성을 위한 것이다. */
+    /* IE는 기본적으로 이벤트 객체를 전달하지 않는다. */
+    if (!event) event = window.event;
+
+    /* 미리 이벤트 타입과 타켓 얻기 */
+    var eType = event.type;
+    var eTarget = event.target || event.srcElement;
+    alert(eType +' event on element with id: '+ eTarget.id);
+  }
+
+ function onloadHandler() {
+   /*  페이지의 body 엘리먼트를 참조하여 얻기 */
+   var body = document.body;
+   /* 클릭되기 위한 span 엘리먼트 생성하기 */
+   var span = document.createElement('span');
+   span.id = 'ExampleSpan';
+   span.appendChild(document.createTextNode ('Click Here!'));
+
+   /* 특정 마우스 이벤트를 받기 위해 spna 객체 등록하기 - 이벤트들의 소문자에 유의하라 그러나 당신이 그것을 치환하기 위한 이름의 선택은 자유다.
+   */
+   span.onmousedown = mouseeventHandler;
+   span.onmouseup = mouseeventHandler;
+   span.onmouseover = mouseeventHandler;
+   span.onmouseout = mouseeventHandler;
+
+   /* 페이지에 span 보여주기 */
+   body.appendChild(span);
+}
+
+window.onload = onloadHandler; // 우리가 핸들러를 치환한 이후에는 우리는 함수 이름 뒤에 ()을 붙여서는 안된다.
+</script>
+

예제: 키보드 이벤트 잡기

+

위의 예제인 "마우스 이벤트 잡기"와 유사하게 키보드 이벤트 잡기는 자바스크립트 이벤트 시스템 탐험에 의존한다. 키보드 이벤트들은 어떤 키든 키보드에서 사용될 때마다 발생한다.

+

키보드 동작에 반응하여 방출 가능한 키보드 이벤트 목록들은 마으스로 사용 가능한 것보다 상당히 작다. 

+ +

keypress 이벤트는 키를 눌렀을 때의 Unicode값이 keycode나 charCode 프로퍼티에 둘다 저장되어 있다. 만약 키가  문자로 생성되어 눌러졌을때 (예를 들어 'a') charCode는 문자의 경우를 반영하여 문자의 코드를 설정한다.(즉, charCode은 Shift 키를 누르고 있는지 여부를 고려한다)그렇지 않으면, 누른 키의 코드가 keyCode에 저장된다.

+

키보드 이벤트들을 캡쳐하기 위한 가장 간단한 방법은 당신의 엘리먼트를 애트리뷰트들로써 개별적인 이벤트들을 지정한 HTML안에 이벤트 핸들러들을 다시 저장하는 것이다.

+

예:

+
  <input type="text" onkeypress="alert ('Hello World!');">
+
+

마우스 이벤트들과 마찬가지로 당신이 실행하기 원하는 자바스크립트 코드는 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :

+
<script>
+  function keypressHandler() {
+    alert ("Hello, World!");
+  }
+</script>
+
+<input onkeypress="keypressHandler();" />
+
+

타겟을 참조하거나 이벤트를 캡쳐 하는 것은 (즉, 눌러진 실제 키) 마우스 이벤트를 비슷한 방법으로 이룰 수 있다.

+

 <script type="text/javascript">

+
  function keypressHandler(evt) {
+      var eType = evt.type; // 이벤트 타입으로써 "keypress"를 반환할 것이다.
+
+   /*  여기에 우리는 which 나 다른 keyCode로 반환되는 모질라 기반으로 된 브라우저를 크로스 브라우저 방법으로 사용할 필요가 있다. 조건 연산자 또는 삼항식이 좋은 방법이다.
+      var keyCode = evt.which?evt.which:evt.keyCode;
+      var eCode = 'keyCode is ' + keyCode;
+      var eChar = 'charCode is ' + .fromCharCode(keyCode); // 또는 evt.charCode
+      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
+   }
+</script>
+<input onkeypress="keypressHandler(event);" />
+

페이지로 부터 어떤 키 이벤트를  캡처하기 위해서는 문서 레벨에서 이벤트를 등록하거나 함수안에서 처리하여 마칠 수 있다. 

+
<script>
+  document.onkeypress = keypressHandler;
+  document.onkeydown = keypressHandler;
+  document.onkeyup = keypressHandler;
+</script>
+

여기에 키 이벤트 처리하기 보여주는 완벽한 예제가 있다.

+
<!DOCTYPE html>
+<html>
+<head>
+  <script>
+    var metaChar = false;
+    var exampleKey = 16;
+    function keyEvent(event) {
+      var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
+      var keychar = String.fromCharCode(key);
+      if (key == exampleKey) {
+        metaChar = true;
+      }
+      if (key != exampleKey) {
+         if (metaChar) {
+            alert("Combination of metaKey + " + keychar)
+            metaChar = false;
+         } else {
+           alert("Key pressed " + key);
+         }
+      }
+    }
+    function metaKeyUp(event) {
+      var key = event.keyCode || event.which;
+      if (key == exampleKey) { metaChar = false; }
+    }
+  </script>
+</head>
+<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
+    Try pressing any key!
+</body>
+</html>
+

브라우저 버그들과 이상한 점

+

키 이벤트를 통해서 사용 가능하게 만들어진 두개의 프로퍼티들은 keycode와 charCode이다. 단순한 용어로 keyCode는 사용자에 의해 눌러진 실제 키보드 키를 의미하는데 반하여 charCode는 키의 ASCII 값을 반환한다. 이 두 값들은 반드시 동일하지 않을 수 있다. 예를 들어 소문자 'a'와 대문자 'A'는 같은 keyCode를 가지고 있다. 왜냐하면 사용자는 같은 키를 누르기 때문이다. 하지만 다른 charCode를 가지는 것은 왜냐하면 결과 문자가 다르기 때문이다.

+

charCode가 해석되는 브라우저의 방법은 일관되게 적용되는 방법이 아니다. 예를 들어  Internet Explorer 와 Opera는 charCode를 지원하지 않는다. 그런데 그들은 keyCode안에 문자 정보를 준다. onkeypress만 아니라 onkeydown 와 onkeyup의 keyCode가  키 정보를 가지고 있다. Firefox 는 "which",  문자를 구별하기 위해 다른 단어를 사용한다. 

+

더 나아가 키 이벤트들을 다루는 것에 관해서는  Keyboard Events에 대한 Mozilla 문서를 참조하시오.

+

{{ draft() }}

+

예제: 이미지 주변에 드래그하기

+

다음 예제는 페이지 근처의 firefox의 이미지를 이동할 수 있다.

+
<!DOCTYPE html>
+<html>
+<head>
+<style>
+img { position: absolute; }
+</style>
+
+<script>
+window.onload = function() {
+
+  movMeId = document.getElementById("ImgMov");
+  movMeId.style.top = "80px";
+  movMeId.style.left = "80px";
+
+  document.onmousedown = coordinates;
+  document.onmouseup = mouseup;
+
+  function coordinates(e) {
+    if (e == null) { e = window.event;}
+
+    // e.srcElement은 IE에서 타겟 엘리먼트로 가지고 있고 반면 e.target은 firefox에서 타겟 엘리먼트로 가지고 있다.
+// 두 프로퍼티들은 이벤트가 일어난 HTML 엘리먼트를 반환한다.
+    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
+
+    if (sender.id=="ImgMov") {
+      mouseover = true;
+      pleft = parseInt(movMeId.style.left);
+      ptop = parseInt(movMeId.style.top);
+      xcoor = e.clientX;
+      ycoor = e.clientY;
+      document.onmousemove = moveImage;
+      return false;
+    }
+    return false;
+  }
+
+  function moveImage(e) {
+    if (e == null) { e = window.event; }
+    movMeId.style.left = pleft+e.clientX-xcoor+"px";
+    movMeId.style.top = ptop+e.clientY-ycoor+"px";
+    return false;
+  }
+
+  function mouseup(e) {
+    document.onmousemove = null;
+  }
+}
+</script>
+</head>
+
+<body>
+  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
+  <p>Drag and drop around the image in this page.</p>
+</body>
+
+</html>
+

예제: 크기 조정하기

+
+

이미지 크기 조정하는 예제(실제 이미지가 크기가 조정되는 것이 아니고,  이미지의 랜더링만 되는 것이다.)

+ 
  <!DOCTYPE html>
+  <html>
+    <head>
+      <style>
+        #resizeImage {
+          margin-left: 100px;
+        }
+      </style>
+      <script>
+      window.onload = function() {
+
+        var resizeId = document.getElementById("resizeImage");
+        var resizeStartCoordsX,
+            resizeStartCoordsY,
+            resizeEndCoordsX,
+            resizeEndCoordsY;
+
+        var resizeEndCoords;
+        var resizing = false;
+
+        document.onmousedown = coordinatesMousedown;
+        document.onmouseup = coordinatesMouseup;
+
+        function coordinatesMousedown(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
+
+          if (element.id == "resizeImage") {
+            resizing = true;
+            resizeStartCoordsX = e.clientX;
+            resizeStartCoordsY = e.clientY;
+          }
+          return false;
+        }
+
+        function coordinatesMouseup(e) {
+          if (e == null) {
+            e = window.event;
+          }
+
+          if (resizing === true) {
+            var currentImageWidth = parseInt(resizeId.width);
+            var currentImageHeight = parseInt(resizeId.height);
+
+            resizeEndCoordsX = e.clientX;
+            resizeEndCoordsY = e.clientY;
+
+            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
+            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
+
+            resizing = false;
+          }
+          return false;
+        }
+      }
+      </script>
+    </head>
+
+    <body>
+      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
+width="64" height="64">
+      <p>Click on the image and drag for resizing.</p>
+    </body>
+
+  </html>
+
+

예제: 라인 그리기

+
<!DOCTYPE html>
+<html>
+<head>
+<script>
+function linedraw(ax,ay,bx,by)
+{
+    if(ay>by)
+    {
+        bx=ax+bx;
+        ax=bx-ax;
+        bx=bx-ax;
+        by=ay+by;
+        ay=by-ay;
+        by=by-ay;
+    }
+    var calc=Math.atan((ay-by)/(bx-ax));
+    calc=calc*180/Math.PI;
+    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
+    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
+}
+</script>
+</head>
+<body onload="linedraw(200,400,500,900);"> <!--당신의 좌표 교체하기 -->
+</body>
+</html>
+

 

diff --git a/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..8a1d0cb625 --- /dev/null +++ b/files/ko/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,268 @@ +--- +title: 약자 표시 및 이해시키는 방법 +slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +tags: + - HTML + - 초보 +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +--- +
+

HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.

+
+ + + + + + + + + + + + +
먼저:기초적인 HTML 문서 만들기에 익숙해지셔야 합니다.
목표:HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.
+ +

약자에 대해

+ +

항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)

+ +

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:

+ +
유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.
+ +
+

이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.

+
+ +

abbr 요소

+ +

HTML 약자 요소 ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.

+ +
+

알림: <acronym> 요소에 대해 들어보셨겠지만, <acronym>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.

+
+ +
<p>I need to talk to you <abbr>ASAP</abbr>.</p>
+ +

이렇게 title 속성으로 약자를 설명할 수도 있습니다:

+ +
<p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p>
+ +

언제 title 속성을 적어야 할까요? 마음대로 시면 됩니다. 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.

+ +
+

Note: In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your title attribute as inside your <abbr> element.

+
+ +

{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 title 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:

+ +

{{ EmbedLiveSample('The_abbr_element','100%',90) }}

+ +
+

중요: 만약 사람들이 약자를 이해하는 것을 따진다면, 절대로 title 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.

+
+ +

실전

+ +

{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <abbr>로 표시하고 title 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. 용어 사전에서 모든 약자들을 보실 수 있습니다.

+ + + +

{{ EmbedLiveSample('Exercise','100%',220) }}

+ +

더 알아보기

+ + diff --git a/files/ko/conflicting/learn/index.html b/files/ko/conflicting/learn/index.html new file mode 100644 index 0000000000..582bd0d275 --- /dev/null +++ b/files/ko/conflicting/learn/index.html @@ -0,0 +1,22 @@ +--- +title: 스킬 +slug: Learn/Skills +tags: + - Index +translation_of: Learn +translation_of_original: Learn/Skills +--- +

여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:

+ +
+
Web Mechanics
+
웹 생태계를 이해한다
+
Infrastructure
+
웹의 기술적 스택을 이해한다
+
Coding/Scripting
+
상호적인 웹 경험(Web experience)를 만든다.
+
Design and Accessibility
+
웹 리소스를 이용하여 모두와 효과적으로 의사소통한다
+
Composing for the web
+
웹 콘텐츠를 만들고 관장한다
+
diff --git a/files/ko/conflicting/learn/javascript/objects/index.html b/files/ko/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..03015b1407 --- /dev/null +++ b/files/ko/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,290 @@ +--- +title: 객체지향 자바스크립트 개요 +slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +

비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다.

+ +

이 글에서는 객체지향 프로그래밍에 대해 소개하는 것으로 시작해서 자바스크립트의 객체 모델, 그리고 자바스크립트에서의 객체지향 프로그래밍 개념에 대해 간단한 예제로 살펴볼 것이다.

+ +

자바스크립트 리뷰(JavaScript review)

+ +

만약 변수, 형, 함수, 스코프 등 자바스크립트의 개념에 대해 명확히 이해하고 있지 못하다면, A re-introduction to JavaScript를 참고해 보자. Core JavaScript 1.5 Guide라는 글도 도움이 될 것이다.

+ +

객체지향 프로그래밍(Object-oriented programming)

+ +

객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 modularity, polymorphism, encapsulation을 포함하여 이전에 정립된 패러다임들부터 여러가지 테크닉들을 사용한다. 오늘날 많은 유명한 프로그래밍 언어(자바, 자바스크립트, C#, C++, 파이썬, PHP, 루비, 오브젝트C)는 객체지향 프로그래밍을 지원한다.

+ +

객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록 이라는 기존의 프로그래밍에 대한 전통적인 관점에 반하여, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 객체지향 프로그래밍에서, 각 객체는 메시지를 받을 수도 있고, 데이터를 처리할 수도 있으며, 또다른 객체에게 메시지를 전달할 수도 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다.

+ +

객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었고, 대규모 소프트웨어 공학에서 널리 알려져 있다. 객체지향 프로그래밍이 갖는 modularity에 기반한 강력한 힘에 의해, 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다.2

+ +

용어(Terminology)

+ +
+
Class
+
객체의 특성을 정의
+
Object
+
Class의 인스턴스
+
Property
+
객체의 특성(예: 색깔)
+
Method
+
객체의 능력(예: 걷기)
+
Constructor
+
인스턴스화 되는 시점에서 호출되는 메서드
+
Inheritance
+
클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.
+
Encapsulation
+
클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)
+
Abstraction
+
복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.
+
Polymorphism
+
다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.
+
+ +

객체지향 프로그래밍에 대한 보다 확장된 설명은 Object-oriented programming를 참고하면 된다.

+ +

프로토타입기반 프로그래밍(Prototype-based programming)

+ +

프로토타입 기반 프로그래밍은 클래스가 존재하지 않는 객체지향 프로그래밍의 한가지 스타일로, 동작 재사용(behavior reuse, 클래스기반 언어에서는 상속이라고함)은 프로토타입으로서 존재하는 객체를 데코레이팅하는 과정을 통해 수행된다.

+ +

프로토타입 기반 언어의 원형적인 예는 David Ungar과 Randall Smith가 개발한 'Self'라는 프로그래밍 언어이다. 그러나 클래스가 없는 프로그래밍 스타일이 최근 인기를 얻으며 성장하였고, 자바스크립트, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak 등의 언어에서 채택되어 왔다.2

+ +

자바스크립트 객체지향 프로그래밍(JavaScript Object Oriented Programming)

+ +

Core Objects

+ +

자바스크립트는 코어(core)에 몇 개의 객체를 갖고 있다. 예를들면, Math, Object, Array, String과 같은 객체가 있다. 아래의 예제는 Math 객체를 사용해서 무작위 숫자를 만들어내는 것을 보여준다.

+ +
alert(Math.random());
+
+ +
Note: 여기와 다른 예제들 모두 alert 이라는 함수가 전역에 선언되어 있다고 가정하고 있다. alert 함수는 실제로 자바스크립트 그 자체에 포함되진 않았지만, 대부분의 브라우저에서 지원하고 있다.
+ +

자바스크립트의 core object들의 리스트는 Core JavaScript 1.5 Reference:Global Objects라는 글을 참고하면 자세히 알 수 있다.

+ +

자바스크립트의 모든 객체는 Object 객체의 인스턴스이므로 Object의 모든 속성과 메서드를 상속받는다.

+ +

Custom Objects

+ +

The Class

+ +

class문을 흔하게 볼 수 있는 C++이나 자바와는 달리 자바스크립트는 class문이 포함되지 않은 프로토타입 기반 언어이다. 이로인해 때때로 class 기반 언어에 익숙한 프로그래머들은 혼란을 일으킨다. 자바스크립트에서는 function을 class로서 사용한다. 클래스를 정의하는 것은 function을 정의하는 것만큼 쉽다. 아래 예제에서는 Person이라는 이름의 클래스를 새로 정의하고 있다.

+ +
function Person() { }
+
+ +

The Object (Class Instance)

+ +

obj라는 이름의 객체의 새로운 인스턴스를 만들 때에는 new obj라는 statement를 사용하고, 차후에 접근할 수 있도록 변수에 결과를 받는다.

+ +

아래의 예제에서 Person이라는 이름의 클래스를 정의한 후에, 두 개의 인스턴스를 생성하고 있다.

+ +
function Person() { }
+var person1 = new Person();
+var person2 = new Person();
+
+ +
Object.create 메서드 역시 새로운 인스턴스를 만들 때 사용할 수 있다.
+ +

The Constructor

+ +

생성자는 인스턴스화되는 순간(객체 인스턴스가 생성되는 순간) 호출된다. 생성자는 해당 클래스의 메서드이다. 자바스크립트에서는 함수 자체가 그 객체의 생성자 역할을 하기 때문에 특별히 생성자 메서드를 정의할 필요가 없다. 클래스 안에 선언된 모든 내역은 인스턴스화되는 그 시간에 실행된다. 생성자는 주로 객체의 속성을 설정하거나 사용하기 위해 객체를 준비시키는 메서드를 호출할 때 주로 사용된다. 클래스 메서드를 추가하고 정의하는 것은 나중에 설명한다.

+ +
아래의 예제에서, Person 클래스의 생성자는 Person 이 인스턴스화되었을 때 alert 을 보여주게 된다.
+ +
function Person() {
+  alert('Person instantiated');
+}
+
+var person1 = new Person();
+var person2 = new Person();
+
+ +

The Property (object attribute)

+ +
속성은 클래스 안에 있는 변수들을 말한다. 객체의 모든 인스턴스는 그 인스턴스의 속성을 갖는다. 속성들의 상속이 바르게 이루어지려면 해당 클래스(function)의 프로토타입에 선언되어 있어야 한다.
+ +
 
+ +
클래스 내에서 속성 작업은 현재 객체를 가리키는 this 키워드에 의해 이루어진다. 클래스의 외부에서 속성에 접근(읽기 혹은 쓰기)하는 것은 "인스턴스명.속성명" 의 형식으로 이루어진다. 이러한 문법은 C++, 자바나 다른 수많은 언어에서와 동일한 방식이다. (클래스 내부에서 "this.속성명" 은 해당 속성의 값을 읽거나 쓸 때 주로 사용된다)
+ +
 
+ +
아래의 예제에서 Person 클래스에 gender라는 속성을 정의하고 인스턴스화할 때 그 값을 설정한다.
+ +
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
+
+ +

메서드(The methods)

+ +

메서드는 앞서 살펴본 속성과 같은 방식을 따른다. 차이점이 있다면 메서드는 function이기 때문에 function 형태로 정의된다는 것입니다. 메서드를 호출하는 것은 속성에 접근하는 것과 매우 유사한데 단지 끝에 ()를 추가하면 된다. argument가 있다면 괄호 안에 입력해준다. 메서드를 정의하기 위해서는 클래스의 prototype에 명명된 속성에 함수를 할당하면 된다. 이때 할당된 이름은 해당 객체의 메서드를 호출할 때 사용되는 이름이다.

+ +

아래의 예에서는 Person 클래스에 sayHello()라는 메서드를 정의하고 사용하고 있다.

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

자바스크립트에서 메서드는 "컨텍스트에 관계 없이" 호출될 수 있는 속성으로서 클래스/객체에 연결되어 있다. 다음 예제의 코드를 살펴보자.

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

위의 예제는 많은 개념들을 한꺼번에 보여주고 있다. 

+ +
먼저 이 예제는 자바스크립트에 "per-object methods" 가 존재하지 않는다는 것을 보여준다. JavaScript는 메서드에 대한 레퍼런스가 모두 똑같은 (프로토타입에 처음 정의한) 함수를 참조하고 있기 때문이다.
+ +
 
+ +
자바스크립트는 어떤 객체의 메서드로서 함수가 호출될 때 현재 "객체의 컨텍스트"를 특별한 "this" 변수에 "연결한다". 이는 아래와 같이 function 객체의 call 메서드를 호출하는 것과 동일하다.
+ +
 
+ +
(역자주: 참고로, genderTeller() 만 호출했을 때 undefined 가 나타난 것은 해당 메서드가 호출될 때 컨텍스트가 window 로 잡혔기 때문에 window.gender 는 존재하지 않으므로 undefined 가 나타난 것이다.)
+ +
 
+ +
genderTeller.call(person1); //alerts 'Male'
+
+ +
더 자세한 것은 Function.call 과 Function.apply 를 참고하자.
+ +

상속(Inheritance)

+ +

상속은 하나 이상의 클래스를 특별한 버전의 클래스로 생성하는 하나의 방법이다. (다만 자바스크립트는 오직 하나의 클래스를 상속받는 것만 지원한다.) 이 특별한 클래스는 흔히 자식 클래스(child)라고 불리우고 원본 클래스는 흔히 부모 클래스(parent)라고 불리운다. 자바스크립트에서는 부모 클래스의 인스턴스를 자식 클래스에 할당함으로써 상속이 이루어진다. 최신 브라우저에서는 Object.create 메서드를 사용해서 상속을 수행할 수도 있다.

+ +
+

Core JavaScript 1.5 Reference:Global Objects:Object:prototype 에 나와있는 설명과 같이 자바스크립트는 자식 클래스의 prototype.constructor 를 검색하지 않으므로 직접 명시해주어야 한다.

+
+ +

아래의 예제에서는, Student라는 클래스를 Person 클래스의 자식 클래스로 정의한다. 그 후에 우리는 sayHello() 메서드를 재정의하고 sayGoodBye() 메서드를 추가한다.

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

Object.create 를 사용하면 상속을 아래와 같이 수행할 수 있다.

+ +
Student.prototype = Object.create(Person.prototype);
+ +

캡슐화(Encapsulation)

+ +

이전의 예제에서, Student 클래스는 Person 클래스의 walk() 메서드가 어떻게 실행되는지에 대해 알 필요가 없고, walk() 메서드를 사용하는데에도 전혀 문제가 없다. 또 Student 클래스에서는 walk() 메서드의 내용을 바꾸려는게 아니라면 walk() 메서드를 특별히 정의할 필요도 없다. 자식 클래스는 부모 클래스의 모든 메서드를 상속받고, 상속받은 메서드중 일부를 수정하고 싶은 경우에만 해당 메서드를 정의하는 것을 우리는 캡슐화(encapsulation)이라고 부른다.

+ +

추상화(Abstraction)

+ +

추상화는 작업 문제의 현재 부분을 모델링할 수 있도록 하는 매커니즘이다. 추상화는 상속(specialization, 추상의 수준을 낮추는 것)과 합성으로 구현할 수 있다. 자바스크립트는 상속에 의해 특별화(specialization)를, 클래스들의 인스턴스를 다른 객체의 속성값이 되게 함으로써 합성을 구현한다.

+ +

자바스크립트 Function 클래스는 Object 클래스를 상속받고(이는 모델의 특별화를 보여준다), Function.prototype 속성은 Object의 인스턴스이다(이는 합성을 보여준다).

+ +
var foo = function(){};
+alert( 'foo is a Function: ' + (foo instanceof Function) );
+alert( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) );
+
+ +

다형성(Polymorphism)

+ +

모든 메서드와 속성들은 prototype 속성에 선언되어 있고, 클래스가 다르다면 같은 이름의 메서드도 선언할 수 있다. 메서드들은 메서드가 선언된 클래스로 그 실행 영역이 한정된다. 물론 이건 두 개의 클래스들이 서로 부모-자식 관계가 아닐때에만 성립한다. 즉 다시 말해 부모-자식 관계의 상속 관계로 하나가 다른 하나에게서 상속받지 않았을 때에만 성립한다.

+ +

Notes

+ +

객체지향 프로그래밍을 구현하는데 있어서 자바스크립트는 매우 유연하기 때문에, 이 글에서 선보인 테크닉들은 자바스크립트에서 객체지향을 구현하는 유일한 방법들 중 일부일 뿐이다.

+ +

또, 여기에서 선보인 테크닉들은 어떤 hack도 사용하지 않았고 또한 다른 언어의 객체 이론 구현물들을 모방하지도 않았다.

+ +

자바스크립트의 객체지향 프로그래밍에 있어서 다른 보다 깊이있는 테크닉들이 많이 있지만, 소개하는 글이라는 이 글의 특성상 다루지 않기로 한다.

+ +

References

+ +
    +
  1. Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide
    2. +
  2. Wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. +
+ +
+

Original Document Information

+ + +
+ +

 

diff --git a/files/ko/conflicting/mdn/tools/index.html b/files/ko/conflicting/mdn/tools/index.html new file mode 100644 index 0000000000..eec139e803 --- /dev/null +++ b/files/ko/conflicting/mdn/tools/index.html @@ -0,0 +1,12 @@ +--- +title: MDN 사용자 가이드 +slug: MDN/User_guide +tags: + - 모질라 개발자 네트워크 + - 사용자 가이드 +translation_of: MDN/Tools +translation_of_original: MDN/User_guide +--- +
{{MDNSidebar}}

모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.

+ +

{{LandingPageListSubpages}}

diff --git a/files/ko/conflicting/mozilla/add-ons/index.html b/files/ko/conflicting/mozilla/add-ons/index.html new file mode 100644 index 0000000000..133e0f8341 --- /dev/null +++ b/files/ko/conflicting/mozilla/add-ons/index.html @@ -0,0 +1,241 @@ +--- +title: Building an Extension +slug: Building_an_Extension +tags: + - Add-ons + - Extensions +translation_of: Mozilla/Add-ons +translation_of_original: Building_an_Extension +--- +

시작하기

+

확장기능 마법사를 이용해서 웹으로 간단한 확장기능을 만들 수 있습니다.

+

MozillaZine Knowledge Base에는 확장기능 마법사를 이용해 만들 수 있는 것과 비슷한 Hello World 확장기능에 대해 한 줄 한 줄 설명한 다른 글도 있습니다.

+

소개

+

이 입문서는 여러분을 아주 간단한 확장기능(Firefox 브라우저에 텍스트 "Hello, World!"를 담고 있는 상태 표시줄 패널을 추가하는)을 만드는 데 필요한 과정 속으로 안내합니다.

+
+

주의 이 입문서는 Firefox 1.5 이상 버전의 확장기능 만들기에 관한 내용입니다. 이전 버전 Firefox용 확장기능 만들기를 다루는 입문서도 있습니다.

+

썬더버드용 확장기능을 만드는 방법에 대한 입문서는 Building a Thunderbird extension에서 보실 수 있습니다.

+
+

개발 환경 구축하기

+

확장기능은 파일 확장자가 xpi (“zippy”로 소리 냄)인 ZIP 파일이나 묶음(Bundles)으로 배포됩니다.

+

XPI 파일 안 구조의 예 :

+
extension.xpi:
+              /install.rdf
+              /components/*
+              /components/cmdline.js
+              /defaults/
+              /defaults/preferences/*.js
+              /plugins/*
+              /chrome.manifest
+              /chrome/icons/default/*
+              /chrome/
+              /chrome/content/
+
+
+

이 글에서도 위와 비슷한 파일 구조를 만들 것입니다. 그러면 이제 하드디스크 어디든지(예컨대, C:\extensions\myExtension\이나 ~/extensions/my_extension/) 확장기능을 위한 폴더를 만들고, 이 폴더 안에 chrome 폴더를 만들고, chrome 폴더 안에 content 폴더를 만드세요.

+

확장기능 폴더 루트 안에, chrome 폴더와 나란히, 빈 텍스트 파일 두 개를 새로 만드세요. 하나는 chrome.manifest 그리고 다른 하나는 install.rdf입니다. 그리고, chrome/content 폴더 안에 sample.xul이라는 빈 텍스트 파일을 하나 만드세요.

+

만들어진 폴더 구조 :

+
<ext path>\
+          install.rdf
+          chrome.manifest
+          chrome\
+              content\
+                  sample.xul
+
+

Install Manifest 만들기

+

확장기능 폴더 계층(hierarchy) 상단에 여러분이 만든 install.rdf 파일을 열어 안에 다음을 써넣으세요.

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@foo.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.5+</em:minVersion>
+        <em:maxVersion>2.0.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>Sample!</em:name>
+    <em:description>A test extension</em:description>
+    <em:creator>Your Name Here</em:creator>
+    <em:homepageURL>http://www.foo.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

최신 Firefox 1.5.0.x에서 작동하도록 디자인된 확장기능은 최대판을 "1.5.0.*"로 설정해야 합니다. 완전한 필수와 선택 프로퍼티 목록은 Install Manifests를 보세요.

+

파일을 저장하세요.

+

XUL로 브라우저 확장하기

+

Firefox의 사용자 인터페이스는 XUL과 JavaScript로 작성됩니다. XUL은 button, menu, toolbar, tree 등과 같은 사용자 인터페이스 위젯을 제공하는 XML 문법입니다. 사용자 동작은 JavaScript로 작동됩니다.

+

브라우저를 확장하기 위해, 우리는 위젯을 추가하거나 수정하여 브라우저의 UI 부분을 수정합니다. 브라우저 창에 새 XUL DOM 요소를 삽입하여 위젯을 추가하고 스크립트 쓰고 이벤트 처리기(handler)를 붙여 위젯을 수정합니다.

+

브라우저는 browser.xul($FIREFOX_INSTALL_DIR/chrome/browser.jar가 content/browser/browser.xul를 포함합니다)로 구현됩니다. browser.xul에서 아래처럼 보이는 상태 표시줄을 찾을 수 있습니다.

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<statusbar id="status-bar">는 XUL Overlay를 위한 "병합점(merge point)"입니다.

+

XUL Overlay

+

XUL Overlays는 실행 시간(run time)에 XUL 문서에 다른 UI 위젯을 붙이는 한 가지 방법입니다. XUL Overlay는 "주(master)" 문서 안에서 특정 병합점에 삽입되는 XUL 조각(fragment)을 지정하는 .xul 파일입니다. 이 조각은 삽입, 제거, 수정되는 위젯을 지정하기도 합니다.

+

XUL Overlay 문서 예

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"/>
+ </statusbar>
+</overlay>
+
+

status-bar로 불리는 <statusbar>는 우리가 붙쳤으면 하는 브라우저 창 안 "병합점"을 지정합니다.

+

<statusbarpanel> 자식은 병합점 안에서 삽입하고 싶은 새 위젯입니다.

+

위에 있는 이 sample 코드를 취해 여러분이 만든 chrome/content 폴더 안에 sample.xul 파일로 저장하세요.

+

위젯 병합과 Overlay를 쓴 사용자 인터페이스 수정에 관한 더 많은 정보는, 아래를 보세요.

+

Chrome URI

+

XUL 파일은 "Chrome Packages"(chrome:// URI를 거쳐 로드되는 사용자 인터페이스 컴포넌트 묶음)의 부분입니다. file:// URI(시스템 위에서 Firefox 위치가 플랫폼과 시스템마다 바뀌기도 하기 때문에)를 써서 디스크에서 브라우저로 로드하기보다는, Mozilla 개발자들은 설치된 응용프로그램이 알고 있는 XUL content에 이르는 URI를 만드는 해결책을 냈습니다.

+

브라우저 창은 chrome://browser/content/browser.xul입니다. Firefox의 location bar에 이 URL을 쳐 보세요!

+

Chrome URI는 여러 컴포넌트로 구성되어 있습니다.

+ +

그러므로, chrome://foo/skin/bar.png는 foo 테마의 skin section에서 bar.png 파일을 로드합니다.

+

Chrome URI를 써서 content를 로드할 때, Firefox는 이 URI를 디스크(나 JAR 패키지)의 실제 원본 파일로 번역하기 위해 Chrome 레지스트리를 씁니다.

+

Chrome Manifest 만들기

+

Chrome Manifest와 지원하는 프로퍼티에 관한 더 많은 정보는, Chrome Manifest 참고 문서를 보세요.

+

확장기능 원본 폴더 계층의 루트에 chrome 디렉토리와 나란히 만든 chrome.manifest 파일을 여세요.

+

이 코드를 추가하세요.

+
content     sample    chrome/content/
+
+

(끝에 "/"를 잊지 마세요! 빠트리면, 확장기능이 로드되지 않습니다.)

+

주의: Firefox/Thunderbird 1.5가 mixed/camel case를 지원하지 않기 때문에 패키지 이름("sample")에 모두 소문자를 씀을 확인하세요. 2.0과 이전버전에서 대소문자를 섞어쓰는 기능을 지원하지 않습니다. {{ Bug(132183) }}

+

이는 다음을 지정합니다.

+
    +
  1. chrome 패키지 안에 material 형
    2. +
  2. chrome 패키지 이름
    3. +
  3. chrome 패키지 파일의 위치
    4. +
+

그래서, 이 줄은 chrome 패키지 sample의 경우, chrome.manifest 위치와 상대 경로인 chrome/content 위치에서 우리가 패키지의 content 파일을 찾을 수 있음을 말합니다.

+

content, locale, skin 파일은 여러분의 chrome 하위디렉토리 안 content, locale, skin 폴더 안에 놓여야 함을 주의하세요.

+

파일을 저장하세요. 여러분의 확장기능이 깔린 Firefox를 띄우면, (이 입문서에서 뒤에), 이 줄이 chrome 패키지를 등록합니다.

+

Overlay 등록

+

브라우저를 표시할 때마다 Firefox가 여러분의 overlay를 브라우저 창에 병합할 필요가 있습니다. 그래서 chrome.manifest 파일에 이 줄을 추가하세요:

+
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+

이 줄은 Firefox에게 browser.xul을 로드할 때 browser.xul 안에 sample.xul을 병합하도록 합니다.

+

시험

+

먼저, 우리는 Firefox에 확장기능 정보 알림이 필요합니다. 예전 좋지 않은 Firefox 1.0 때는 이는 확장기능을 XPI로 패키징하고 그것을 사용자 인터페이스를 거쳐 설치함을 뜻합니다. 그것은 실로 고통이었습니다. 이제는, 훨씬 더 간단합니다.

+
    +
  1. Profile 폴더를 여세요.
    2. +
  2. extensions 폴더를 여세요(없으면 만드세요).
    3. +
  3. 새 텍스트 파일을 만들어, 그 안에 extension 폴더(예컨대, C:\extensions\myExtension\이나 ~/extensions/myExtension)를 써넣으세요. 확장기능 id를 이름(예컨대, sample@foo.net)으로 갖는 파일로 저장하세요.
    4. +
+

이제 확장기능을 시험할 준비가 됐습니다!

+

Firefox를 시작하세요. Firefox가 확장기능 디렉토리 텍스트 링크를 감지하고 확장기능을 설치합니다. 브라우저 창이 보이면 여러분은 상태 표시줄 패널의 오른쪽에 텍스트 "Hello, World!"를 봅니다.

+

이제 돌아가서 .xul 파일에 변화를 주고, Firefox를 닫고 재시작하면 그 변화가 보입니다. These don't actually match the described extension and confuse people. -Nickolay CENTER> Image:Helloworld_tools_menu.PNG Image:Helloworld_extensions_wnd.PNG </CENTER

+

Package

+

이제 여러분의 확장기능이 동작하므로, 배치(deployment)와 설치를 위해 그것을 패키지할 수 있습니다.

+

여러분의 확장기능 폴더 내용들을 Zip 파일로 압축하고 (확장기능 폴더 자체가 아닙니다.) zip 파일 확장자를 .xpi 로 바꾸세요. Windows XP에서는, 여러분의 확장기능 폴더 안 모든 파일과 하위폴더를 고르고 오른쪽 버튼을 누른 뒤 "보내기 -> Compressed (Zipped) Folder"를 골라 이를 쉽게 할 수 있습니다. .zip 파일은 여러분을 위해 만듭니다. 바로 이름을 바꾸면 끝납니다!

+

Mac OS X에서는, 확장기능 폴더의 내용들 위에서 오른쪽 버튼을 누른 뒤 zip 파일로 만들기 위해 "Create Archive of..."를 고를 수 있습니다. 그러나, Mac OS X가 파일 metadata를 추적(track)할 목적으로 숨김 파일을 폴더에 추가하기 때문에, 터미널을 쓰고 숨김 파일(의 이름은 마침표로 시작합니다)을 지워야 합니다. 그리고 나서 zip 파일을 만들기 위해 명령줄에서 zip 명령을 쓰세요.

+

Linux에서도, 역시 명령줄 Zip 도구를 씁니다.

+

혹시 여러분이 'Extension Builder' 확장기능을 설치했으면 여러분을 위해 .xpi 파일을 compile할 수 있습니다(도구 -> Extension Developer -> Extension Builder). 단지 여러분의 확장기능(install.rdf 등)이 있는 디렉토리를 탐색하고 Build Extension button을 누르세요. 이 확장기능에 개발을 더 쉽게 하는 많은 도구가 있습니다.

+

이제 여러분의 서버에 .xpi 파일을 올려주고(upload), application/x-xpinstall로 다뤄지는지 확인하세요. 여러분은 그 파일에 링크할 수 있고 사람들이 내려받고(download) Firefox에 설치하게 할 수 있습니다. .xpi 파일을 시험할 목적으로 우리는 단지 Tools -> Extensions이나 Add-Ons -> Extensions in FireFox 2을 거쳐 확장기능 창 안에 그것을 끌어다 놓을 수 있습니다.

+

addons.mozilla.org 이용하기

+

Mozilla Update는 공짜로 확장기능을 host할 수 있는 배포 사이트입니다. 여러분의 확장기능은 비록 매우 유명해지더라도 내려받기를 보장하는 Mozilla의 mirror 네트워크에 host됩니다. Mozilla 사이트는 또한 사용자에게 더 쉬운 설치를 제공하고 여러분이 새 버전을 올려주면 기존 버전 사용자들이 자동으로 이용할 수 있게 합니다. 게다가 Mozilla Update는 사용자들이 여러분의 확장기능에 평(comment)을 하고 feedback을 제공하게 합니다. 여러분이 확장기능을 배포하는 데 Mozilla Update 사용을 강력히 권고합니다!

+

http://addons.mozilla.org/developers/ 에 방문하여 계정을 만든 뒤 확장기능 배포를 시작하세요!

+

주의: 여러분의 확장기능은 좋은 설명과 확장기능 실행 스크린샷(screenshot)이 있으면 더 빨리 퍼지고 더 많이 내려받습니다.

+

Windows 레지스트리에 확장기능 등록하기

+

Windows에서, 확장기능 정보는 레지스트리에 추가될 수 있고 확장기능은 응용프로그램이 시작하는 다음 번에는 자동으로 pick up됩니다. 이는 응용프로그램 설치프로그램이 쉽게 integration hook을 확장기능에 추가하게 합니다. 더 많은 정보는 Windows 레지스트리를 써서 확장기능 추가하기를 보세요.

+

XUL Overlay 더 많은 정보

+

병합점에 UI 위젯 추가 외에 또, Overlay 안에 XUL 조각을 다음에 쓸 수 있습니다.

+ +
<statusbarpanel position="1" .../>
+
+<statusbarpanel insertbefore="other-id" .../>
+
+<statusbarpanel insertafter="other-id" .../>
+
+

새로운 사용자 인터페이스 컴포넌트 만들기

+

여러분은 UI 위젯을 조작하는 DOM 메소드를 써서 .js 파일에서 사용자 동작을 구현하여 기능(functionality)을 제공하는 분할한 .xul 파일로 여러분의 창과 대화상자를 만들 수 있습니다. 이미지 붙임, 색 설정 등을 하기 위해 .css 파일에서 스타일 규칙을 쓸 수 있습니다.

+

XUL 개발자를 위한 더 많은 자원(resource)은 XUL 문서를 보세요.

+

Defaults File

+

Defaults file은 여러분의 확장기능 폴더 계층의 루트 아래 defaults/에 놓일 사용자 profile을 뿌리는(seed) 데 씁니다. defaults/preferences/에 저장될 Default preferences .js file - .js 파일을 여기에 놓으면 시작할 때 Firefox preferences system에 의해 자동으로 로드되어 Preferences API를 써서 파일에 접근할 수 있습니다.

+

XPCOM 컴포넌트

+

Firefox는 확장기능에 XPCOM 컴포넌트를 지원합니다. 여러분은 JavaScript나 C++(Gecko SDK를 써서)로 쉽게 자신만의 컴포넌트를 만들 수 있습니다.

+

components/ 디렉토리에 모든 .js나 .dll 파일을 두세요 - 여러분의 확장기능이 설치된 뒤 Firefox가 도는 첫 번에 자동으로 등록됩니다.

+

더 많은 정보는 JavaScript로 XPCOM 컴포넌트 빌드하는 법과 책 XPCOM 컴포넌트 만들기를 보세요.

+

응용프로그램 명령줄

+

사용자 정의(custom) XPCOM 컴포넌트의 가능한 쓰임 가운데 하나는 Firefox 나 Thunderbird 에 명령줄 처리기 추가입니다. 여러분은 확장기능을 응용프로그램으로 실행하는 데 이 기술을 쓸 수 있습니다.

+
 firefox.exe -myapp
+
+

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(). 상세한 내용은 Chrome: Command Line과 forum discussion을 보세요.

+

지역화

+

하나 이상의 언어를 지원하려면, entities와 string bundles을 써서 content에서 문자열을 분리해야 합니다. 돌아와서 나중에 하기보다는 확장기능을 개발하면서 하면 훨씬 더 쉽습니다!

+

지역화 정보는 그 확장기능을 위한 locale 디렉토리에 저장됩니다. 예를 들어, sample 확장기능에 locale을 추가하려면, chrome 디렉토리("content" 디렉토리가 위치한)에 "locale"로 이름 붙인 디렉토리를 만들고 chrome.manifest 파일에 다음 줄을 추가하세요:

+
locale sample sampleLocale chrome/locale/
+
+

XUL로 localizable 속성값을 만들려면, .ent(나 .dtd) 파일에 그 값을 써넣으세요, 속성값은 locale 디렉토리에 놓이고 이와 같이 보입니다.

+
<!ENTITY  button.label     "Click Me!">
+<!ENTITY  button.accesskey "C">
+
+

그리고 나서 XUL 문서 상단(하지만 "<?xml version"1.0"?>" 아래)에 이렇게 포함(include)하세요.

+
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.ent">
+
+

window는 XUL 문서 루트 요소의 localName값이고 SYSTEM 프로퍼티 값은 엔티티(entity) 파일의 chrome URI입니다. sample 확장기능에서, 루트 요소는 overlay입니다.

+

그 엔티티를 쓰려면, XUL을 이렇게 보이도록 수정하세요.

+
<button label="&button.label;" accesskey="&button.accesskey;"/>
+
+

Chrome Registry가 선택한 locale과 대응하는 지역화 묶음에서 로드된 엔티티 파일인지 확인합니다.

+

스크립트에서 쓴 문자열은, 이 형식으로 각 줄에 문자열이 있는 .properties 파일, 텍스트 파일을 만드세요.

+
key=value
+
+

그리고 나서 스크립트에 그 값을 로드하기 위해 nsIStringBundleService/nsIStringBundle이나 <stringbundle> tag을 쓰세요.

+

브라우저 이해하기

+

브라우저 창이나 여러분이 확장하길 원하는 어떤 다른 XUL 창을 검사하려면 DOM Inspector (Standard Firefox 설치 부분이 아님, browser의 Tools(도구) 메뉴에 "DOM Inspector" 항목이 없으면 사용자 정의 설치 경로로 재설치하고 Developer Tools를 골라야 합니다)를 쓰세요.

+

노드를 선택하기 위해 XUL 창의 노드를 눈에 보이게 클릭하려면 DOM Inspector toolbar 좌상단에 있는 point-and-click 노드 finder button을 쓰세요. 이렇게 하면 DOM inspector의 DOM 계층 tree view는 여러분이 클릭하는 노드로 건너뜁니다.

+

overlay에서 여러분의 요소를 삽입하는 데 쓸 수 있는 id 붙은 병합점을 발견하려면 DOM Inspector의 오른쪽 패널을 쓰세요. 병합할 수 있는 id 붙은 요소를 발견할 수 없으면, overlay에 스크립트 붙임과 load 이벤트가 주 XUL 창 위에 발생할 때 요소 삽입이 필요할 지도 모릅니다.

+

확장기능 디버그하기

+

디버깅을 위한 분석 도구

+ +

printf 디버깅

+ +

고급 디버깅

+ +

빠른 시작

+

여러분은 작동하는 단순 확장기능을 만드는 데 Extension Wizard 온라인 도구를 쓸 수 있습니다.

+

Extension Wizard로 만들 수 있는 것과 비슷한 Hello World 확장기능은 MozillaZine Knowledge Base의 다른 입문서에서 한 줄 한 줄 설명합니다.

+

부가 정보

+ diff --git a/files/ko/conflicting/web/api/document_object_model/index.html b/files/ko/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..fc26bc0bee --- /dev/null +++ b/files/ko/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,22 @@ +--- +title: DOM developer guide +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - NeedsTranslation + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +

{{draft}}

+

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

+

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (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.

+

The DOM is most often used in conjunction with JavaScript. 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 any language.

+

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

+

Why is the DOM important?

+

"Dynamic HTML" (DHTML) 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 W3C FAQ). 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.

+

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

+

More about the DOM

+

{{LandingPageListSubpages}}

diff --git a/files/ko/conflicting/web/api/index.html b/files/ko/conflicting/web/api/index.html new file mode 100644 index 0000000000..07c0c99acb --- /dev/null +++ b/files/ko/conflicting/web/api/index.html @@ -0,0 +1,139 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Apps + - DOM + - Firefox OS + - Mobile + - NeedsTranslation + - TopicStub +translation_of: Web/API +translation_of_original: WebAPI +--- +

WebAPI는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.

+ +
+

Note: 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 WebAPI doc status page, where we're tracking work on WebAPI docs.

+
+ +
+
+

Communication APIs

+ +
+
Network Information API
+
현재 네트워크 연결에 대한 연결 속도와 같은 기본 정보를 알려줍니다.
+
+ +
+
Bluetooth
+
WebBluetooth API는 기기의 Bluetooth에 로우레벨 접근을 할 수 있게 해 줍니다.
+
Mobile Connection API {{NonStandardBadge}}
+
Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.
+
Network Stats API
+
Monitors data usage and exposes this data to privileged applications.
+
Telephony {{NonStandardBadge}}
+
Lets apps place and answer phone calls and use the built-in telephony user interface.
+
WebSMS {{NonStandardBadge}}
+
앱들이 SMS 문자 메시지를 주고 받게 하고, 장치에 저장된 메시지들을 접근하고 관리 하도록 해줍니다.
+
WiFi Information API {{NonStandardBadge}}
+
A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.
+
+ +

Hardware access APIs

+ +
+
Ambient Light Sensor API
+
광센서에 접근할 수 있게 해서 앱이 기기 주변의 밝기를 감지할 수 있게 해 줍니다.
+
Battery Status API
+
배터리의 충전 정보 및 현재 기기가 충전 중인지 여부에 대한 정보를 제공 합니다.
+
Geolocation API
+
Provides information about the device's physical location.
+
Pointer Lock API
+
Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.
+
Proximity API
+
Lets you detect proximity of the device to a nearby object, such as the user's face.
+
Device Orientation API
+
기기의 방향 변화를 감지하여 알려줍니다.
+
Screen Orientation API
+
화면의 방향 변화를 감지하여 알려줍니다. 앱이 어떤 방향을 선호하는지 지정하는데에도 사용 할 수 있습니다.
+
Vibration API
+
Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is not intended for things such as notification vibrations. See the Alarm API for that.
+
Camera API {{NonStandardBadge}}
+
Allows apps to take photographs and/or record video using the device's built-in camera.
+
Power Management API {{NonStandardBadge}}
+
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.
+
+ +

View All...

+
+ +
+

Data management APIs

+ +
+
+ +
+
FileHandle API
+
Provides support for writable files with locking support.
+
IndexedDB
+
고성능 검색을 지원하는 클라이언트측의 구조화된 데이터 저장소입니다.
+
+ +
+
Settings API {{NonStandardBadge}}
+
Lets apps examine and change system-wide configuration options that are permanently stored on the device.
+
+ +

Other APIs

+ +
+
Alarm API
+
Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.
+
Simple Push API
+
Lets the platform send notification messages to specific applications.
+
Web Notifications
+
Lets applications send notifications displayed at the system level.
+
Apps API {{NonStandardBadge}}
+
The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.
+
Web Activities {{NonStandardBadge}}
+
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.
+
WebPayment API {{NonStandardBadge}}
+
Lets Web content initiate payments and refunds for virtual goods.
+
Browser API {{NonStandardBadge}}
+
Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).
+
+ +
+
Idle API
+
Lets apps receive notifications when the user is not actively using the device.
+
Permissions API {{NonStandardBadge}}
+
Manages app permissions in a centralized location. Used by the Settings app.
+
Time/Clock API {{NonStandardBadge}}
+
현재 시각을 설정할 수 있게 해 줍니다. 시간대는 Settings API를 이용해서 설정할 수 있습니다.
+
+ +

WebAPI community

+ +

If you need help with these APIs, there are several ways you can talk to other developers making use of them.

+ +
    +
  • Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • +
  • Visit the WebAPI IRC channel: #webapi
    • +
+ +

Don't forget about the netiquette...

+ + + + +
+
+ +

 

diff --git a/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html new file mode 100644 index 0000000000..94e969e37a --- /dev/null +++ b/files/ko/conflicting/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html @@ -0,0 +1,34 @@ +--- +title: 크로스-도메인 텍스쳐 +slug: Web/API/WebGL_API/Cross-Domain_Textures +tags: + - WebGL + - 웹지엘 + - 크로스 도메인 + - 텍스쳐 +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures +translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures +--- +

WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐, 즉, 크로스-도메인 텍스쳐를 로딩하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 HTTP access control을 참고하시기 바랍니다.

+ +

CORS 승인된 이미지를 WebGL 텍스쳐에 사용하는 방법에 대한 설명은 hacks.mozilla.org 문서와 예제를 참고하시기 바랍니다.

+ +
+

역자 주 : 예제 링크가 깨져있는데, 원문에도 깨진 링크가 포함되어 있습니다.

+
+ +
+

Note: WebGL 텍스쳐에 대한 CORS 지원과 이미지 요소의 crossOrigin 속성이 {{Gecko("8.0")}}에 구현되어 있습니다.

+
+ +

내용이 변경되어 오염된(tainted) 쓰기 전용의 2D 캔버스는 WebGL 텍스쳐로 사용될 수 없습니다. 예를 들어 크로스-도메인 이미지가 그려진 2D {{ HTMLElement("canvas") }}는 오염된 2D 캔버스라고 할 수 있습니다.

+ +
+

Note: 캔버스 2D의 drawImage에 대한 CORS 지원은 {{Gecko("9.0")}}에 구현되어 있습니다. 따라서 {{Gecko("9.0")}}에서부터는, CORS 승인된 크로스-도메인 이미지는 2D 캔버스를 오염시키지 않으며, CORS 승인된 크로스-도메인 이미지가 그려진 2D 캔버스도 WebGL 텍스쳐로 사용할 수 있습니다.

+
+ +
+

Note: 크로스-도메인 비디오에 대한 CORS 지원과 {{ HTMLElement("video") }}요소의 crossorigin 속성은 {{Gecko("12.0")}}에 구현되어 있습니다.

+
+ +

{{ languages( { "ja": "ja/WebGL/Cross-Domain_Textures", "ko": "ko/Web/WebGL/Cross-Domain_Textures"} ) }}

diff --git a/files/ko/conflicting/web/css/@viewport/index.html b/files/ko/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..96dd3182ad --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport/index.html @@ -0,0 +1,76 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +
{{CSSRef}}
+ +

height CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.

+ +

뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.

+ +

{{cssinfo}}

+ +

구문

+ +
/* 한 값 */
+height: auto;
+height: 320px;
+height: 15em;
+
+/* 두 값 */
+height: 320px 200px;
+
+ +

값

+ +
+
auto
+
다른 CSS 설명자의 값에서 계산된 사용값(used value).
+
<length>
+
음이 아닌 절대 또는 상대 길이.
+
<percentage>
+
가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +
@viewport {
+  height: 500px;
+}
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.viewport.height")}}

diff --git a/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..7dab19acbd --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,73 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
+ +

viewport-fit CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.

+ +

Syntax

+ +
/* Keyword values */
+viewport-fit: auto;
+viewport-fit: contain;
+viewport-fit: cover;
+
+ +

Values

+ +
+
auto
+
이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.
+
contain
+
뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.
+
+ +
+
cover
+
뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 safe area inset 변수를 함께 사용할 것을 권장합니다.
+
+ +

Formal syntax

+ +
auto | contain | cover
+
+ + + +

접근성 문제

+ +

viewport-fit 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 safe area inset 변수를 함께 사용해야 함을 기억하세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.viewport.viewport-fit")}}

+ +

See also

+ + diff --git a/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..699b60921e --- /dev/null +++ b/files/ko/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,71 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - CSS Descriptor + - Graphics + - Layout + - NeedsExample + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +
{{ CSSRef }}
+ +

zoom CSS 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.

+ +

1.0 또는 100%인 줌 배율은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.

+ +

{{cssinfo}}

+ +

구문

+ +
/* 키워드 값 */
+zoom: auto;
+
+/* <number> 값 */
+zoom: 0.8;
+zoom: 2.0;
+
+/* <percentage> 값 */
+zoom: 150%;
+
+ +

값

+ +
+
auto
+
사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.
+
<number>
+
줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.
+
<percentage>
+
줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}초기 스펙
+ +

브라우저 호환성

+ +

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..69d4320e3c --- /dev/null +++ b/files/ko/conflicting/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,56 @@ +--- +title: 여러개의 배경 지정하기 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +--- +

{{CSSRef}}

+ +

CSS3를 사용하면 엘리먼트에 여러개의 배경을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. 

+ +

여러개의 배경을 지정하는건 간단하다.

+ +
.myclass {
+  background: background1, background 2, ..., backgroundN;
+}
+
+ +

배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다.  하지만  {{ 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") }}

+ +

예제

+ +

이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. 

+ +
.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;
+}
+
+ + + + + + + + + + +
Result
css_multibg.png
+ +

첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.

+ +

더 보기

+ + diff --git a/files/ko/conflicting/web/guide/index.html b/files/ko/conflicting/web/guide/index.html new file mode 100644 index 0000000000..6dc2104009 --- /dev/null +++ b/files/ko/conflicting/web/guide/index.html @@ -0,0 +1,67 @@ +--- +title: Web Development +slug: Web_Development +tags: + - Web Development +translation_of: Web/Guide +translation_of_original: Web_Development +--- +
+ 웹 개발은 웹 사이트 그리고 웹 응용프로그램 개발을 (양자를 포괄적으로) 포함하고 있습니다.
+ + + + + + + +
+

문서

+
+
+ Migrate apps from Internet Explorer to Mozilla
+
+ Doron Rosenberg가 가지고 계신 웹 응용프로그램이 IE와 Mozilla에서 동작하는지 확인하는 법을 알려줍니다.
+
+
+
+ Using URL values for the cursor property
+
+ Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)는 마우스 커서를 마음대로 지정할 수 있게 하는 CSS2 cursor property를 위한 URL 값을 지원합니다.
+
+

 

+
+
+ Using Firefox 1.5 caching
+
+ Firefox 1.5는 메모리에 JavaScript상태 값을 포함한 웹 페이지 전체를 캐시합니다. 방문한 페이지 사이에 "뒤로", "앞으로"의 이동은 페이지를 중복해서 불러올 필요가 없을 뿐더러 JavaScript상태 값을 보존합니다. 이러한 특징들은 웹 서핑을 매우 빠르게 해줍니다.
+
+


+ 모두 보기...

+ 		+

커뮤니티

+
    +
  • Mozilla 포럼 보기...
    • +
+

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}

+ +

도구

+ +

모두 보기...

+

관련 주제

+
+
+ AJAX, CSS, HTML, JavaScript, Web Standards, XHTML, XML
+
+
+

Categories

+

Interwiki Language Links

+

 

+

{{ languages( { "en": "en/Web_Development" } ) }}

diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html new file mode 100644 index 0000000000..f8793b4cbc --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators/index.html @@ -0,0 +1,45 @@ +--- +title: Arithmetic Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators +--- +

산술 연산자

+

산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다. +

+
1/2 //returns 0.5 in JavaScript
+1/2 //returns 0 in Java
+
+

JavaScript는 다음 표에 나오는 산술 연산자를 제공합니다. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
연산자설명예제
%
(나머지)		2항(binary) 연산자. 두 피연산자의 나눗셈에서 나온 나머지를 반환합니다.12 % 5 returns 2.
++
(증가)		단항(unary) 연산자. 피연산자에 1을 더함. 전위 연산자(++x)를 사용하면 피연산자에 1을 더한 후 그 값을 반환합니다. 후위 연산자(x++)를 사용하면 피연산자에 1을 더하기 전에 피연산자의 값을 반환합니다.x가 3일 때, ++x는 x를 4로 만들고 4를 반환합니다. 반면 x++는 x를 4로 만들고 3을 반환합니다.
--
(감소)		단항 연산자. 피연산자에서 1을 뺌. 반환값은 증가 연산자와 동일한 방식으로 결정됩니다.x가 3일 때, --x는 x를 2로 만들고 2를 반환합니다. 반면 x--는 x를 2로 만들고 3을 반환합니다.
-
(단항 부정)		단항 연산자. 피연산자의 부호를 바꾼 값을 반환합니다.x가 3이면 -x는 -3을 반환합니다.
+

표 3.4: 산술 연산자 +

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html new file mode 100644 index 0000000000..edf5f640a5 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_2285d0ecb7e20b6a4ac3cb462794e916/index.html @@ -0,0 +1,69 @@ +--- +title: Logical Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators +--- +

논리 연산자

+

논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다. +

+ + + + + + + + + + + + + + + + + + + + + +
연산자사용법설명
&&expr1 && expr2(논리적 AND) expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 피연산자 둘 모두가 true일 때 &&는 true를 반환하고 그렇지 않을 때는 false를 반환합니다.
||expr1 || expr2(논리적 OR) expr1이 true로 변환될 수 있으면 expr1을 반환하고 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 ||는 피연산자 중에서 하나만 true이면 true를 반환합니다. 둘 다 false이면 false를 반환합니다.
!!expr(논리적 NOT) 피연산자가 true로 변환될 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.
+

표 3.7: 논리 연산자 +

false로 변환될 수 있는 표현식은 null, 0, 빈 문자열(""), undefined로 평가될 수 있는 표현식들입니다. +

다음 코드는 && 연산자를 사용하는 예를 보여줍니다. +

+
a1=true && true       // t && t returns true
+a2=true && false      // t && f returns false
+a3=false && true      // f && t returns false
+a4=false && (3 == 4)  // f && f returns false
+a5="Cat" && "Dog"     // t && t returns Dog
+a6=false && "Cat"     // f && t returns false
+a7="Cat" && false     // t && f returns false
+
+

다음 코드는 || 연산자를 사용하는 예를 보여줍니다. +

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

다음 코드는 ! 연산자를 사용하는 예를 보여줍니다. +

+
n1=!true              // !t returns false
+n2=!false             // !f returns true
+n3=!"Cat"             // !t returns false
+
+

단축 평가

+

논리 표현식이 왼쪽부터 오른쪽으로 평가되기 때문에 다음 규칙을 이용해서 "단축(short-circuit)" 평가를 할 수 있습니다. +

+ +

이 규칙을 따라 평가를 수행한다고 해서 피연산자를 모두 평가할 때와 결과가 달라지지 않습니다. 아무 표현식 부분은 평가되지 않기 때문에 아무런 부수 효과(side effect)도 일어나지 않는다는 것에 주의하십시오. +

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators", "Core_JavaScript_1.5_Guide:Operators:String_Operators") }} +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html new file mode 100644 index 0000000000..fc39b5a34f --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_337b8dbe817777e70cc8002308284a74/index.html @@ -0,0 +1,12 @@ +--- +title: String Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators +--- +

문자열 연산자

+

문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, "my " + "string"는 "my string"라는 문자열을 반환합니다. +

축약된 할당 연산자인 += 또한 문자열 연결에 사용할 수 있습니다. 예를 들어 mystring 변수가 "alpha"라는 값을 가지고 있을 때, mystring += "bet"은 "alphabet"으로 평가되고, 그 값이 mystring에 할당됩니다. +

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html new file mode 100644 index 0000000000..f238901cab --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_d9fc22e5ddd08ea82ea5cf8ddb1d9915/index.html @@ -0,0 +1,229 @@ +--- +title: Special Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators +--- +

특수 연산자

+

JavaScript 다음과 같은 특별한 연산자를 제공합니다. +

+ +

조건 연산자

+

조건 연산자는 JavaScript에서 유일하게 세 개의 피연산자를 사용하는 연산자입니다. 연산자는 조건에 따라 둘 중에 하나의 값을 가질 수 있습니다. 문법은 이렇습니다. +

+
condition ? val1 : val2
+
+

condition이 true이면 연산자는 val1의 값을 갖습니다. 그렇지 않으면 val2의 값을 갖습니다. 다른 표준 연산자를 사용할 수 있는 곳이면 어디든지 조건 연산자를 사용할 수 있습니다. +

+
status = (age >= 18) ? "adult" : "minor"
+
+

이 문장은 age가 18이거나 더 큰 경우에 status 변수에 "adult"라는 값을 할당합니다. 그렇지 않으면 "minor"라는 값을 할당합니다. +

+

쉼표 연산자

+

쉼표 연산자(,)는 단순히 피연산자 둘을 모두 평가하고 두 번째 피연산자의 값을 반환하는 연산자입니다. 이 연산자는 주로 for 반복문에서 변수 여러 개가 매번 업데이트 되게 하는데 쓰입니다. +

예를 들어 a가 각각 10줄의 원소를 가지는 2차원 배열일 때, 다음 코드에서는 변수 두 개를 한 번에 바꾸기 위해서 쉼표 연산자를 사용하고 있습니다. 이 코드는 배열의 대각선 원소를 출력합니다. +

+
for (var i=0, j=9; i <= 9; i++, j--)
+   document.writeln("a["+i+"]["+j+"]= " + a[i][j])
+
+

delete

+

delete는 개체(object), 개체의 속성(property), 배열의 특정 인덱스에 있는 원소(element)를 지우는 연산자입니다. 문법은 이렇습니다. +

+
delete objectName
+delete objectName.property
+delete objectName[index]
+delete property // with 문장 안에서만 유효합니다
+
+

objectName은 개체 이름이고, property는 개체에 존재하는 속성이고, index는 배열의 원소 위치를 나타내는 정수입니다. +

네 번째 형식은 개체의 속성을 지우는 코드인데, with 문장 안에서만 사용할 수 있습니다. +

암시적으로 선언된 변수를 지울 때는 delete 연산자를 사용할 수 있지만 var 문장을 이용해서 선언된 변수는 지울 수 없습니다. +

delete 연산자 실행이 성공하면, 속성이나 원소가 undefined로 설정됩니다. delete 연산자는 실행이 가능하면 true를 반환하고, 불가능하면 false를 반환합니다. +

+
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 (암시적으로 선언되었으므로 지울 수 있습니다)
+
+

배열의 원소를 지우기
+배열의 원소를 지울 때, 배열의 길이에는 변화가 없습니다. 예를 들어, a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }}를 지우더라도 a{{ mediawiki.external(4) }}와 a{{ mediawiki.external(3) }}은 여전히 정의되지 않습니다. +

delete 연산자가 배열 원소를 제거할 때 원소는 더이상 배열에 존재하지 않습니다. 아래 예제에서 trees{{ mediawiki.external(3) }}은 delete로 제거되었습니다. +

+
trees=new Array("redwood","bay","cedar","oak","maple")
+delete trees[3]
+if (3 in trees) {
+   // 이 블록은 실행되지 않습니다.
+}
+
+

배열 원소가 존재하긴 하지만 정의되지 않은 값을 가지도록 하고 싶다면 delete 연산자 대신 undefined 키워드를 사용하십시오. 다음 예제에서 trees{{ mediawiki.external(3) }}에 undefined 값을 할당했지만 배열 요소는 여전히 존재합니다. +

+
trees=new Array("redwood","bay","cedar","oak","maple")
+trees[3]=undefined
+if (3 in trees) {
+   // 이 블록은 실행됩니다.
+}
+
+

in

+

in 연산자는 지정된 속성이 지정된 개체에 있으면 true를 반환합니다. 문법은 이렇습니다. +

+
propNameOrNumber in objectName
+
+

propNameOrNumber은 속성 이름을 나타내는 문자열이나 배열 인덱스를 나타내는 수이고, objectName은 개체 이름입니다. +

다음 예제는 in 연산자의 몇 가지 사용법을 보여줍니다. +

+
// 배열
+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
+
+

instanceof

+

instanceof는 지정된 개체가 지정된 개체 형식이면 true를 반환합니다. 문법은 이렇습니다. +

+
objectName instanceof objectType
+
+

objectName은 objectType과 비교할 개체의 이름이고, objectType은 개체 형식으로 Date나 Array 같은 것입니다. +

실행중에 개체의 형식을 알고 싶으면 instanceof를 사용하면 됩니다. 예를 들어 예외를 처리할 때, 발생한 예외의 형식에 따라 서로 다른 예외 처리 코드를 실행할 수 있습니다. +

다음 코드에서 theDay가 Date 개체인지 결정하기 위해서 instanceof를 사용합니다. theDay는 Date 개체이기 때문에 if문 안에 있는 문장이 실행됩니다. +

+
theDay=new Date(1995, 12, 17)
+if (theDay instanceof Date) {
+   // 실행할 문장
+}
+
+

new

+

사용자 정의 개체 형식이나 Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, String 같이 미리 정의된 개체 형식의 인스턴스를 만들 때 new 연산자를 사용합니다. 서버에서는 DbPool, Lock, File, SendMail 등을 만들 때 사용할 수 있습니다. new는 다음과 같이 사용합니다. +

+
objectName = new objectType ( param1 [,param2] ...[,paramN] )
+
+

개체 초기화 지정자 사용하기에 설명한 것처럼 개체 초기화 지정자를 이용해서 개체를 만들 수도 있습니다. +

더 많은 정보를 얻으려면 JavaScript 레퍼런스의 new 연산자 페이지를 보시기 바랍니다. +

+

this

+

현재 개체를 참조할 때 this 키워드를 사용합니다. 일반적으로 this는 메소드를 호출하는 개체를 참조합니다. 다음과 같이 사용하면 됩니다. +

+
this[.propertyName]
+
+

예제 1.
+개체의 value 속성이 높거나 낮은 값을 가지는지 검증하는 validate라는 함수가 있다고 가정합시다. +

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

이제 우리는 폼의 각 요소의 onChange 이벤트 핸들러에서 validate 함수를 호출하면서, this를 이용하여 스스로를 함수에 전달할 수 있습니다. +

+
<B>Enter a number between 18 and 99:</B>
+<INPUT TYPE = "text" NAME = "age" SIZE = 3
+   onChange="validate(this, 18, 99)">
+
+

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

+
<FORM NAME="myForm">
+Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
+<P>
+<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
+   onClick="this.form.text1.value=this.form.name">
+</FORM>
+
+

typeof

+

typeof 연산자는 둘 중 한 가지 방법으로 사용할 수 있습니다. +

+
1. typeof operand
+2. typeof (operand)
+
+

typeof 연산자는 피연산자의 평가되지 않은 형식을 나타내는 문자열을 반환합니다. 피연산자는 string, variable, keyword, object 등의 타입을 반환하게 됩니다. 괄호는 선택적입니다. +

우리가 이런 변수를 정의했다고 해봅시다. +

+
var myFun = new Function("5+2")
+var shape="round"
+var size=1
+var today=new Date()
+
+

typeof는 이 변수들에 대해서 다음과 같은 결과를 반환할 것입니다. +

+
typeof myFun is function
+typeof shape is string
+typeof size is number
+typeof today is object
+typeof dontExist is undefined
+
+

true와 null 키워드에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다. +

+
typeof true is boolean
+typeof null is object
+
+

수와 문자열에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다. +

+
typeof 62 is number
+typeof 'Hello world' is string
+
+

속성 값에 대해서 typeof 연산자는 속성이 포함하고 있는 값의 형식을 반환합니다. +

+
typeof document.lastModified is string
+typeof window.length is number
+typeof Math.LN2 is number
+
+

메소드와 함수에 사용하면 typeof 연산자는 다음과 같은 결과를 반환합니다. +

+
typeof blur is function
+typeof eval is function
+typeof parseInt is function
+typeof shape.split is function
+
+

미리 정의된 개체들에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다. +

+
typeof Date is function
+typeof Function is function
+typeof Math is function
+typeof Option is function
+typeof String is function
+
+

void

+

void 연산자는 다음과 같이 사용할 수 있습니다. +

+
1. void (expression)
+2. void expression
+
+

void 연산자는 표현식이 값을 반환하지 않으면서 평가되어야 한다고 지정하는데 사용됩니다. expression은 평가하려는 JavaScript 표현식입니다. 표현식을 감싸는 괄호는 선택적이지만 사용하는 쪽이 더 좋은 스타일입니다. +

표현식을 하이퍼텍스트 링크로 지정하기 위해서 void 연산자를 사용할 수 있습니다. 표현식이 평가되기는 하지만 현재 문서 대신 로드되지는 않습니다. +

아래 코드는 사용자가 클릭할 때 아무 동작도 하지 않는 하이퍼텍스트 링크를 만듭니다. 사용자가 링크를 클릭하면 void(0)는 정의되지 않은 것(undefined)으로 평가되고 JavaScript에서 아무런 효과가 없습니다. +

+
<A HREF="javascript:void(0)">Click here to do nothing</A>
+
+

다음 코드는 클릭하면 폼을 제출하는 하이퍼텍스트 링크를 만듭니다. +

+
<A HREF="javascript:void(document.form.submit())">
+Click here to submit</A>
+
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:String_Operators", "Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression") }} +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html new file mode 100644 index 0000000000..3aed13da65 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/expressions_and_operators_da1ab2546bd5e84ac81f952de51d5d40/index.html @@ -0,0 +1,102 @@ +--- +title: Bitwise Operators +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators +translation_of: Web/JavaScript/Guide/Expressions_and_Operators +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators +--- +


+

+

비트 연산자

+

비트 연산자는 피연산자를 10진수나 16진수, 8진수로 다루지 않고 32개의 비트 집합으로 다룹니다. 예를 들어, 10진수 9는 2진수로 1001입니다. 비트 연산자는 2진수 표현으로 연산을 하지만 반환값은 JavaScript 표준 수 값으로 반환합니다. +

JavaScript의 비트 연산자를 다음 표에 요약했습니다. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
연산자사용법설명
비트 ANDa & b두 피연산자의 대응되는 비트가 모두 1이면 1을 반환.
비트 ORa | b두 피연산자의 대응되는 비트에서 둘 중 하나가 1이거나 모두 1인 경우 1을 반환.
비트 XORa ^ b두 피연산자의 대응되는 비트에서 둘 중 하나가 1이고, 둘 다 1이 아닐 경우 1을 반환.
비트 NOT~ a피연산자의 비트를 뒤집음.
왼쪽으로 이동a << ba의 2진수 표현을 b 비트만큼 왼쪽으로 이동함. 오른쪽은 0으로 채움.
부호 비트로 채우는 오른쪽 이동a >> ba의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버림.
0으로 채우는 오른쪽 이동a >>> ba의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버리고, 왼쪽은 0으로 채움.
+

표 3.5: 비트 연산자 +

+

비트 논리 연산자

+

개념적으로 비트 논리 연산자는 다음과 같이 동작합니다. +

+ +

예를 들어, 9를 2진수로 쓰면 1001이고 15를 2진수로 표현하면 1111입니다. 두 값에 비트 연산을 적용하면 결과는 다음과 같습니다. +

+ +

비트 이동 연산자

+

비트 이동 연산자는 피연산자 두 개를 받습니다. 첫 번째는 이동하려는 수이고, 두 번째는 첫 번째 피연산자를 몇 비트나 이동시킬지 나타내는 비트 수입니다. 이동 방향은 사용된 연산자에 따라 다릅니다. +

이동 연산자는 피연산자를 32비트 정수로 변환하여 연산하고, 왼쪽 연산자와 같은 자료형으로 반환합니다. +

이동 연산자는 다음 표에 있습니다. +

+ + + + + + + + + + + + + + + + + + + + +
연산자설명예제
<<
+(왼쪽 이동)		이 연산자는 첫 번째 피연산자의 비트를 지정된 수만큼 왼쪽으로 옮깁니다. 왼쪽으로 넘친 비트는 버립니다. 오른쪽 빈 자리는 0으로 채웁니다. 9<<2는 36을 반환합니다. 1001을 왼쪽으로 2비트 이동하면 100100이 되고 이것은 36이기 때문입니다.
>>
+(부호 비트로 채우는 오른쪽 이동)		이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 원래 가장 왼쪽에 있던 비트 값으로 채웁니다.9>>2는 2를 반환합니다. 1001을 2비트 오른쪽으로 이동하면 10이 되는데 이것은 2이기 때문입니다. 비슷하게 -9>>2는 -3을 반환하는데, 부호가 유지되기 때문입니다.
>>>
+(0으로 채우는 오른쪽 이동)		이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 0으로 채웁니다.19>>>2는 4를 반환합니다. 10011을 2비트 오른쪽으로 이동하면 100이 되기 때문입니다. 음수가 아닌 수에 대해서는 0을 채우는 오른쪽 이동이나 부호 비트로 채우는 오른쪽 이동이 똑같은 결과를 반환합니다.
+

표 3.6: 비트 이동 연산자 +

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators", "Core_JavaScript_1.5_Guide:Operators:Logical_Operators") }} +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..7b5f5c577c --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types/index.html @@ -0,0 +1,29 @@ +--- +title: Constants +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants +--- +

상수

+

const 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다. +

+
const prefix = '212';
+
+

상수는 스크립트 실행 중에 값을 대입하거나 다시 선언하여 값을 바꿀 수 없습니다. +

전역 상수인 경우에도 항상 const 키워드를 붙여야 한다는 점만 제외하면, 상수의 범위 규칙은 변수의 경우와 동일합니다. const 키워드가 없으면 변수라고 판정됩니다. +

같은 범위에 있는 함수나 변수의 이름과 같은 이름으로 상수를 만들 수 없습니다. 예를 들어, +

+
//이 코드는 에러를 낼 것입니다
+function f() {};
+  const f = 5;
+
+//이 코드 또한 에러를 냅니다.
+function f() {
+  const g = 5;
+  var g;
+
+  //그 외 코드...
+
+}
+

{{ PreviousNext("Core_JavaScript_1.5_Guide:Variables", "Core_JavaScript_1.5_Guide:Literals") }} +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html new file mode 100644 index 0000000000..c9260414d3 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_3f037ba1fa5775d153289787ec51042f/index.html @@ -0,0 +1,65 @@ +--- +title: Variables +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables +--- +

변수

+

우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다. +

JavaScript 의 식별자는 문자(letter)나 밑줄(_)이나 달러 기호($)로 시작해야 합니다. 그 뒤에는 숫자(0-9)도 올 수 있습니다. JavaScript는 대소문자를 구별하기 때문에, 문자는 대문자 "A"부터 "Z"까지와 소문자 "a"부터 "z"까지를 사용할 수 있습니다. +

JavaScript 1.5부터, 식별자에 å나 ü같은 ISO 8859-1이나 유니코드 문자를 사용할 수 있습니다. 또한 유니코드 이스케이프 시퀀스 페이지에 나열된 \uXXXX 형식 유니코드 이스케이프 시퀀스를 식별자에 쓸 수도 있습니다. +

규칙에 맞는 이름 몇 가지는 이런 것입니다. Number_hits, temp99, _name. +

+

변수 선언

+

변수를 선언하는 방법에는 두 가지가 있습니다. +

+ +

변수를 평가하기(Evaluating)

+

초기값을 지정하지 않고 var 문장을 이용해서 선언한 변수는 undefined라는 값을 갖습니다. +

선언하지 않은 변수에 접근하려고 하면 ReferenceError 예외가 발생합니다. +

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

변수가 값을 갖고 있는지 결정하기 위해서 undefined를 사용할 수 있습니다. 다음 코드에서 input에는 값을 할당하지 않아서 if문은 true로 평가됩니다. +

+
var input;
+if(input === undefined){
+   doThis();
+} else {
+   doThat();
+}
+

Not sure how the following is related to "Variables" section +undefined값을 참/거짓을 판별하는 구문에 쓰면 false로 평가됩니다. 예를 들어 다음 코드에서는 myArray의 원소가 정의되지 않았기 때문에 myFunction 함수가 실행됩니다. +

+
myArray=new Array()
+if (!myArray[0])
+   myFunction();
+

숫자가 필요한 문맥에서 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: +

+
var n = null;
+n * 32; //0을 반환합니다
+

변수 범위

+

함 수 외부에서 선언한 변수는 "전역(global)" 변수라고 부릅니다. 그 변수는 현재 문서의 모든 코드에서 접근할 수 있기 때문입니다. 함수 안에서 선언한 변수는 "지역(local)" 변수라고 부릅니다. 그 변수는 함수 안에서만 접근할 수 있기 때문입니다. +

JavaScript에는 블록 문장 범위가 없습니다. 대신 그 블록이 포함된 코드의 지역 범위에 포함됩니다. 예를 들어 다음 코드에서는 condition이 false이면 예외를 발생시키는 대신 0을 출력합니다. +

+
if (condition) {
+  var x = 5;
+}
+print(x ? x : 0);
+
+

JavaScript의 변수와 관련해서 또다른 색다른 점은 나중에 선언될 변수에 예외 발생없이 접근할 수 있다는 것입니다. +

+
print(x === undefined); // prints "true"
+var x = 3;
+
+

전역 변수

+

need links to pages discussing scope chains and the global object +전역 변수는, 실제로는 "전역 개체(global object)"의 속성(property)입니다. 웹 페이지에서 전역 개체는 window이므로, window.variable 문장을 이용해서 전역 변수에 접근할 수 있습니다. +

그러므로, window나 frame 이름을 이용하면 다른 window나 frame에 정의된 전역 변수에 접근할 수 있습니다. 예를 들어 phoneNumber라는 변수를 FRAMESET 문서에 정의했다면, 자식 frame에서 parent.phoneNumber로 그 변수에 접근할 수 있습니다. +

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Variables", "fr": "fr/Guide_JavaScript_1.5/Variables", "ja": "ja/Core_JavaScript_1.5_Guide/Variables", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Zmienne" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html new file mode 100644 index 0000000000..9c97d9cf82 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_62e2c9dce87eab65e4f9dd2c3158468f/index.html @@ -0,0 +1,110 @@ +--- +title: Unicode +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode +--- +

유니코드

+

유니코드는 세계의 주요한 문자 언어를 교환하고 표현하기 위한 문자-코딩 표준입니다. 유니코드는 아메리카, 유럽, 중동, 아프리카, 인도, 아시아, 태평양 지역(Pacifica)의 언어를 포함하며 고문자와 기술 분야 기호들도 포함합니다. 유니코드는 공통적인 기술 분야, 수학 분야 기호 뿐만 아니라 여러 언어를 포함한 텍스트의 교환, 처리, 표현을 지원합니다. 유니코드는 나라마다 서로 다른 문자 표준으로 인해서 여러 언어를 포함했을 때 발생하는 국제화 문제를 해결할 수 있기를 희망합니다. 하지만 아직은 모든 현대 문자, 고대 문자를 지원하지는 못합니다. +

유니코드 문자 집합은 알려진 모든 인코딩을 위해 사용될 수 있습니다. 유니코드는 ASCII (American Standard Code for Information Interchange, 정보 교환을 위한 미국 표준 코드) 문자 집합을 본떠 만들어졌습니다. 각각의 문자에 숫자와 이름을 부여한 것입니다. 문자 인코딩은 문자의 정체성(identity)과 숫자 값(코드 위치)와 함께 숫자 값의 비트 표현을 명시합니다. 16비트 숫자 값(코드 값)은 U+0041처럼 접두어 U뒤에 16진수를 붙여서 표시합니다. 이 값의 유일한 이름은 LATIN CAPITAL LETTER A입니다. +

JavaScript 1.3 이전 버전은 유니코드를 지원하지 않습니다. +

+

유니코드와 ASCII 및 ISO 사이의 호환성

+

유니코드는 ISO 10646의 부분집합인 국제 표준 ISO/IEC 10646-1; 1993과 완벽하게 호환됩니다. +

몇몇 인코딩 표준(UTF-8, UTF-16, ISO UCS-2를 포함하는)들이 실제 비트 값으로 유니코드를 표현하기 위해 사용됩니다. +

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바이트를 사용합니다. +

JavaScript와 Navigator가 UTF-8/유니코드를 지원한다는 것은 우리가 비 라틴 문자와 국제화되고 지역화된 문자에다 특수한 기술 분야 기호까지 JavaScript 프로그램에 쓸 수 있다는 것을 의미합니다. 유니코드는 여러 언어를 포함한 텍스트를 인코딩할 수 있는 표준적인 방법을 제공합니다. UTF-8 인코딩이 ASCII와 호환되기 때문에, ASCII 문자를 프로그램에 사용할 수 있습니다. 우리는 JavaScript의 주석, 문자열 리터럴, 식별자(identifier), 정규 표현식에 비 ASCII 유니코드 문자를 쓸 수 있습니다. +

+

유니코드 이스케이프 시퀀스

+

우리는 문자열 리터럴, 정규 표현식, 식별자에 유니코드 이스케이프 시퀀스를 사용할 수 있습니다. 이스케이프 시퀀스는 ASCII 문자 여섯 개로 이루어지는데, \u 뒤에 16진수를 표현하는 숫자 네 개가 붙은 모양입니다. 예를 들어 \u00A9는 저작권 기호를 나타냅니다. JavaScript에서 모든 유니코드 이스케이프 시퀀스는 문자 한 개로 인식됩니다. +

다음의 코드는 저작권 문자와 "Netscape Communications"라는 문자열을 반환합니다. +

+
x="\u00A9 Netscape Communications"
+

다음의 표는 자주 사용되는 특수 문자의 유니코드 값을 모은 것입니다. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
분류유니코드 값이름형식화된 이름(Format name)
공백 문자\u0009Tab<TAB>
 \u000BVertical Tab<VT>
 \u000CForm Feed<FF>
 \u0020Space<SP>
줄 끝 문자\u000ALine Feed<LF>
 \u000DCarriage Return<CR>
그 외 유니코드 이스케이프 시퀀스\u0008Backspace<BS>
 \u0009Horizontal Tab<HT>
 \u0022Double Quote"
 \u0027Single Quote'
 \u005C Backslash\
+

표 2.2: 특수 문자의 유니코드 값 +

JavaScript에서 유니코드 이스케이프 시퀀스는 Java와 다릅니다. JavaScript에서, 이스케이프 시퀀스가 특수 문자로 먼저 해석되지 않습니다. 예를 들어, 줄 끝 이스케이프 시퀀스가 문자열에 포함되어 있어도 함수에 의해 해석되기 전까지는 문자열을 자르지 않습니다. 주석에 포함된 이스케이프 시퀀스는 모두 무시됩니다. Java에서는 한 줄 주석에 이스케이프 시퀀스가 있으면 유니코드 문자로 해석됩니다. 문자열 리터럴에서 Java 컴파일러는 이스케이프 시퀀스를 먼저 해석합니다. 예를 들어 줄 끝 이스케이프 문자(즉 \u000A)가 Java에서 사용되면 문자열 리터럴을 끝나게 합니다. Java에서는 줄 끝 문자가 문자열 리터럴에 포함될 수 없으므로, 에러가 발생합니다. 문자열 리터럴에 개행 문자를 넣으려면 반드시 \n을 사용해야 합니다. JavaScript에서 이스케이프 시퀀스는 \n과 같은 방식으로 동작합니다. +

+
참고: 긴 문자열을 변환하는 웹 프로그램 Hot-Tips' Unicode Converter, by Bob Foley.
+

JavaScript 파일에서 유니코드 문자

+

초기 버전의 Gecko는 XUL에서 로드되는 JavaScript 파일의 인코딩이 Latin-1일 것이라고 가정했습니다. Gecko 1.8부터는 XUL 파일의 인코딩으로 부터 JavaScript 파일의 인코딩을 유추하도록 변경되었습니다. 더 많은 정보는 International characters in XUL JavaScript 페이지를 참고하시기 바랍니다. +

+

유니코드로 문자 표시하기

+

우리는 다른 언어나 기술 분야 기호를 표시하기 위해서 유니코드를 사용할 수 있습니다. 문자를 제대로 표시하기 위해서는 Mozilla Firefox나 Netscape 같은 클라이언트가 유니코드를 지원해야 합니다. 게다가 클라이언트에서 사용할 수 있는 적절한 유니코드 글꼴이 필요하고, 클라이언트 플랫폼이 유니코드를 지원해야 합니다. 종종 유니코드 글꼴이 모든 유니코드 문자를 표시하지 못하는 경우가 있습니다. Windows 95 같은 몇몇 플랫폼은 유니코드를 부분적으로만 지원합니다. +

비 ASCII 문자 입력을 받기 위해서는 클라이언트가 유니코드로 입력을 보내야 합니다. 표준 확장 키보드(standard enhanced keyborad)를 사용하면 클라이언트에서 유니코드가 지원하는 추가적인 문자를 쉽게 입력할 수 없습니다. 때때로 유니코드 문자를 입력하려면 유니코드 이스케이프를 사용하는 방법 밖에 없을 때도 있습니다. +

유니코드에 대한 더 많은 정보를 얻으려면 유니코드 홈페이지나 The Unicode Standard, Version 2.0, published by Addison-Wesley, 1996 를 보시기 바랍니다. +

{{ PreviousNext("Core_JavaScript_1.5_Guide:Literals", "Core_JavaScript_1.5_Guide:Expressions") }} +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html new file mode 100644 index 0000000000..ee62d0cecf --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_94e75d7a4d8a473f1a4b19f9fb46fece/index.html @@ -0,0 +1,175 @@ +--- +title: Literals +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals +--- +

상수값(Literal)

+

JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.

+ +

배열 상수값

+

배열 상수값은 대괄호([])안에 배열의 원소(element)를 0개 이상 나열한 것입니다. 배열 상수값으로 배열을 만드면 배열은 지정된 원소를 가지도록 초기화되고, 지정된 원소의 개수만큼의 길이를 갖게 됩니다.

+

다음 예제는 세 개의 원소를 가지고 길이가 3인 coffees 배열을 만드는 예제입니다.

+
coffees = ["French Roast", "Colombian", "Kona"]
+

참고 배열 상수값은 개체 초기화지정자(object initializer) 중의 하나입니다. 개체 초기화지정자 사용하기를 보십시오.

+

최상위 스크립트에서 상수값을 이용하여 배열을 만들면 JavaScript는 배열 상수값을 포함하는 표현식을 평가(evaluate)할 때마다 배열을 만듭니다. 또한, 함수 안에서 사용된 상수값은 함수가 호출될 때마다 생성됩니다.

+

배열 상수값은 Array 개체입니다. Array 개체에 대한 상세한 내용은 Array 개체를 보십시오.

+

배열 상수값의 추가적인 쉼표

+

배열 상수값에 모든 원소를 지정할 필요는 없습니다. 쉼표만 찍어 두면 값이 할당되지 않은 빈 공간을 가진 배열이 만들어집니다. 다음 예제는 fish 배열을 만듭니다.

+
fish = ["Lion", , "Angel"]
+

이 배열은 값을 가진 원소 두 개와 빈 원소 하나를 갖게됩니다. (fish{{ mediawiki.external(0) }}은 "Lion", fish{{ mediawiki.external(1) }}은 undefined, fish{{ mediawiki.external(2) }}는 "Angel"이라는 값을 가집니다.)

+

원소 목록 끝에 남겨둔 쉼표는 무시됩니다. 다음 예제에서 배열 길이는 3입니다. myList{{ mediawiki.external(3) }}은 만들어지지 않습니다. 그외에 목록에 있는 다른 쉼표들은 각각 새로운 원소를 나타냅니다.

+
myList = ['home', , 'school', ];
+

다음 예제에서 배열 길이는 4이고, myList{{ mediawiki.external(0) }}과 myList{{ mediawiki.external(2) }}는 비게 됩니다.

+
myList = [ , 'home', , 'school'];
+

다음 예제에서 배열 길이는 4이고 myList{{ mediawiki.external(1) }}과 myList{{ mediawiki.external(3) }}이 비게 됩니다. 오직 마지막 쉼표만 무시됩니다.

+
myList = ['home', , 'school', , ];
+

불리언 상수값

+

불리언 형은 두 가지 상수값을 가질 수 있는데, 그것은 true와 false입니다.

+

true, false라는 기본(primitive) 불리언 값과 true, false 값의 불리언 개체를 혼동하지 마십시오. 불리언 개체는 기본 불리언 데이터 형을 감싸는 역할을 할 뿐입니다. 더 많은 정보는 불리언 개체를 참조하십시오.

+

정수

+

10진수, 16진수, 8진수 정수를 쓸 수 있습니다. 10진수 정수 상수값은 0(영)으로 시작하지 않는 숫자의 나열입니다. 0(영)으로 시작하는 정수 상수값은 8진수입니다. 0x(또는 0X)로 시작하면 16진수입니다. 16진수는 0부터 9까지의 숫자와 a부터 f나 A부터 F까지의 문자를 포함할 수 있습니다. 8진수에는 0부터 7까지만 쓸 수 있습니다.

+

8진수 정수 상수값은 사용하지 말기를 추천하고 있으며, ECMA-262 표준 3판에서는 아예 제거되었습니다. 하위 호환성을 위해 JavaScript 1.5에서는 여전히 8진수 정수 상수값을 지원하고 있습니다.

+

몇 가지 정수 상수값을 예를 보여드리겠습니다.

+
0, 117, -345 (10진수)
+015, 0001, -077 (8진수)
+0x1123, 0x00111, -0xF1A7 (16진수 또는 "hex")
+
+

소수 상수값

+

소수 상수값은 이런 부분으로 이뤄집니다.

+ +

지수 부분은 "e"나 "E" 뒤에 숫자가 붙은 형태입니다. 숫자 앞에는 부호("+"나 "-")를 붙일 수도 있습니다. 소수 상수값은 적어도 하나의 숫자에 소수점 또는 지수 부분을 가져야 합니다.

+

소수 상수값의 몇 가지 예제를 보여드리겠습니다. 3.1415, -3.1E12, .1e12, 2E-12

+

개체 상수값

+

개체 상수값은 중괄호({}) 안에 특성(property) 이름과 그에 해당하는 값의 쌍을 나열한 것입니다. 문장(statement)의 시작 부분에 개체 상수값을 사용해서는 안됩니다. { 가 블럭의 시작을 나타내기 때문에, 에러가 나거나 의도하지 않은 동작을 보일 것입니다.

+

다음은 개체 상수값의 예입니다. car 개체의 첫 번째 원소는 myCar라는 특성을 정의하고 있습니다. 두 번째 원소는 getCar 특성을 정의하는데, (CarTypes("Honda"));라는 함수를 호출하고 있습니다. 세 번째 원소는 special 특성을 정의하는데에 Sales라는 변수를 사용합니다.

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

개체 특성 이름에 정수 상수값이나 문자열 상수값을 사용할 수 있고, 개체 안에 다른 개체를 포함시킬 수도 있습니다. 다음 예제를 보십시오.

+
car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"}
+
+document.write(car.manyCars.b); // Jeep
+document.write(car[7]); // Mazda
+
+

다음 사항을 참고하십시오.

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

문자열 상수값

+

문자열 상수값은 큰따옴표(")나 작은따옴표(')로 둘러싸인 0개 이상의 문자들 입니다. 문자열은 같은 종류의 따옴표로 묶어야 합니다. 즉, 작은따옴표 둘로 묶거나, 큰따옴표 둘로 묶어야 한다는 말입니다. 문자열 상수값의 예를 보여드리겠습니다.

+ +

우 리는 문자열 상수값에 String 개체의 모든 메소드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 상수값을 임시 String 개체로 만들어서 메소드를 호출한 후, 임시 String 개체를 제거합니다. 문자열 상수값에 String.length 특성을 사용할 수도 있습니다. 이렇게 말입니다.

+ +

우리가 특별하게 String 개체를 필요로 하는 경우가 아니라면 문자열 상수값을 사용해야만 합니다. String 개체에 대한 자세한 내용은 String 개체를 보십시오.

+
문자열에서 특수문자 사용하기
+

다음 예제에서 볼 수 있듯이 일반적인 문자뿐만 아니라 특수문자도 문자열에 쓸 수 있습니다.

+
"one line \n another line"
+

JavaScript 문자열에 사용할 수 있는 특수문자를 표로 나타낸 것입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
문자의미
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Apostrophe or single quote
\"Double quote
\\Backslash character (\).
\XXX세 자리 까지의 8진수 "XXX"로 지정하는 Latin-1 인코딩의 문자. 0부터 377 사이. 예를 들어, \251은 저작권 기호의 8진수 표현입니다.
\xXX두 자리 까지의 16진수 "XX"로 지정하는 Latin-1 인코딩의 문자. 00부터 FF 사이. 예를 들어, \xA9는 저작권 기호의 16진수 표현입니다.
\uXXXX네 자리의 16진수 "XXXX"로 지정하는 유니코드 문자. 예를 들어, \u00A9는 저작권 기호의 유니코드 표현입니다. 유니코드 이스케이프 시퀀스를 보십시오.
+

표 2.1: JavaScript 특수문자

+
문자 이스케이프
+

표 2.1에 없는 문자에 대해서는 역슬래시가 무시됩니다. 그러나 이러한 기능은 사용하지 않기를 권장하므로 사용을 피해야만 합니다.

+

역슬래시를 앞에 붙이면 문자열 안에 따옴표를 넣을 수 있습니다. 이것은 따옴표 "이스케이프(escaping)"라고 알려져 있습니다.

+
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."
+document.write(quote)
+
+

이 코드의 결과는 다음과 같습니다.

+
He read "The Cremation of Sam McGee" by R.W. Service.
+
+

문자열 안에 역슬래시 문자를 넣고 싶으면 역슬래시 문자를 이스케이프시켜야 합니다. 예를 들어, c:\temp 라는 경로를 문자열에 할당하고 싶으면 다음과 같이 하면 됩니다.

+
var home = "c:\\temp"
+
+

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

+

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

diff --git a/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html new file mode 100644 index 0000000000..e5c40d23bf --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/grammar_and_types_ac4b5424077ceacccdb5f069bd2192f3/index.html @@ -0,0 +1,40 @@ +--- +title: Values +slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values +translation_of: Web/JavaScript/Guide/Grammar_and_types +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values +--- +

값

+

JavaScript는 다음과 같은 값 형식을 인식합니다. +

+ +

이렇게 조금 적어보이는 값 형식 또는 "자료형"이지만 훌륭한 기능을 작성할 수 있습니다. 정수와 실수 사이에 엄격한 구분은 없습니다. JavaScript에는 명시적인 날짜 자료형은 없습니다. 하지만 Date 개체를 이용하면 됩니다. +Object와 함수는 언어의 또다른 기초 요소입니다. 개체는 값을 포함할 수 있는 이름 붙은 어떤 것이라고 생각하면 되고, 함수는 프로그램이 수행할 수 있는 실행 절차라고 생각하면 됩니다. +

+

자료형 변환

+

JavaScript는 동적 타입 언어입니다. 이 말은 변수를 선언할 때 타입을 지정하지 않아도 되고, 스크립트 실행중에 필요에 따라 자동으로 자료형이 바뀐다는 말입니다. 예를 들어 다음과 같이 변수를 선언할 수 있습니다. +

+
var answer = 42
+
+

그 후에 이 변수에 문자열 값을 할당할 수 있습니다. +

+
answer = "Thanks for all the fish..."
+
+

JavaScript는 동적 타입 언어이기 때문에, 이렇게 대입하더라도 에러를 내지 않습니다. +

숫자와 문자열 값을 + 연산자로 계산하는 표현식에서, JavaScript는 숫자를 문자열로 변환합니다. 예를 들어 다음과 같은 문장을 생각해봅시다. +

+
x = "The answer is " + 42 // returns "The answer is 42"
+y = 42 + " is the answer" // returns "42 is the answer"
+
+

다른 연산자를 사용하는 문장에서는 숫자를 문자열로 변환하지 않습니다. +

+
"37" - 7 // returns 30
+"37" + 7 // returns "377"
+
+

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci" } ) }} diff --git a/files/ko/conflicting/web/javascript/guide/index.html b/files/ko/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..d8d0156dc2 --- /dev/null +++ b/files/ko/conflicting/web/javascript/guide/index.html @@ -0,0 +1,21 @@ +--- +title: Predefined Core Objects +slug: >- + Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects +--- +

미리 정의된 기본 개체

+

이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다. +

+ +

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object") }} +

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }} diff --git a/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html new file mode 100644 index 0000000000..b7d3de85bf --- /dev/null +++ b/files/ko/conflicting/web/javascript/javascript_technologies_overview/index.html @@ -0,0 +1,115 @@ +--- +title: The DOM and JavaScript +slug: The_DOM_and_JavaScript +tags: + - DOM + - JavaScript +--- +

큰 그림

+ +

페이지 안 레이어 이동, 레이어, 팝업 메뉴 보이기와 감추기 등과 같은 비주얼 효과는 "DHTML"이나 "Dynamic HTML"로 자주 참조됩니다. 일부 사람들은 표현(presentation)이 아니라 내용(content)을 다루기로 된 웹 페이지에서 이런 기술의 실제 쓰임을 묻습니다. 하지만 오늘날 실제 쓰임은 그 물음에 있습니다.

+ +

내가 이 프로젝트에서 일하고 많은 웹마스터들과 연락한 뒤로, 웹 디자인 커뮤니티 대부분이 그들의 DHTML이 어떻게 동작하는 지 모른다는 사실이 생각났습니다. 대부분의 시간을 그들은 스크립트 저장소(repository) 사이트에 가서, 그들 웹 페이지에 그 코드를 그냥 복사하고 붙여넣습니다. 불행하게도 이들 사이트 대부분은 결코 "DOM"에 관해서는 이야기하지 않으면서 "javascript"와 "DHTML"은 이야기합니다. 비록 DOM이 오래된 개념이더라도 DOM이 최근에야 "평균 웹 디자이너 전문어(jargon)"의 부분이 되었다는 사실입니다.

+ +

그 사이트를 W3C DOM을 위해 코딩할 가치가 있다고 사이트 임자에게 납득시키기는 Mozilla 같은 프로젝트를 위한 큰 도전입니다. 이는 때때로 많은 작업과 예전 브라우저를 위한 지원을 중단함을 뜻합니다. 또한 W3C DOM을 위한 지원에 관해 곧바로 참모습을 알아내는 큰 도전입니다. Netscape 6은 Netscape 4와 document.layers와 document.all를 쓰는 Internet Explorer를 위해 그들의 "JavaScript"를 작성했던 어리석은 웹 디자이너들에게 많은 혹평을 받았습니다. 매일 우리는 그들의 사이트를 얻도록 뉴스그룹에서, 개인 email로, Bugzilla로 되도록 공손하게 사람들을 돕기 위해 힘씁니다. 우리가 부딪친 문제 가운데 가장 큰 것은 JavaScript와 DHTML 그리고 DOM 사이의 혼동(confusion)입니다. 이 문서는 이를 정리하고 이 화려하고 쓸모 있는 기술 사이의 관계를 설명하려는 하나의 시도입니다.

+ +

JavaScript, 웹 스크립팅 언어

+ +

JavaScript은 Netscape Communications Corp에서 오늘날 Mozilla 프로젝트의 리더 가운데 한 명인 Brendan Eich가 처음 개발한 "object scripting language"입니다. Mozilla가 쓰는 JavaScript 엔진은 SpiderMonkey입니다. 이 엔진은 ECMA-262 개정 3 명세(specification)를 따릅니다. JavaScript는 또한 ECMAScript로 알려졌습니다(하지만 상세한 설명은 링크된 페이지를 보세요).

+ +

일반인의 오해와는 달리, JavaScript는 "Interpretive Java"가 아닙니다. 줄여 말하면, JavaScript는 개체 생성에 기반을 둔 원형(prototype)을 지원하는 dynamic scripting language입니다. 기본 구문(syntax)은 언어를 배우는 데 필요한 새로운 개념의 수를 줄이기 위해 Java와 C++ 둘 다와 개념에 있어 비슷합니다. JavaScript가 대단한 점은 혹시 여러분이 기본 프로그래밍(간단한 DHTML에서 필요한 것 같은)을 하고 싶은 경우 배우기 정말 쉽다는 점입니다. 불분명한 변수형, 정말 쓰기 쉬운 문자열, 전체 플랫폼 중립성(neutrality) 등. 또한 고급 코더들을 위해 개체 중심(object-oriented) 언어와 절차(procedural) 언어 둘 다로 기능합니다.

+ +

JavaScript에 관한 이 단락 대부분은 Mozilla JavaScript 페이지에서 가져왔음을 알게 됩니다. 가장 최근 ECMA 명세는 여기에서 찾습니다.

+ +

Document Object Model, 언어 중립 인터페이스 집합

+ +

JavaScript는 여러분이 DOM 개체를 운영(operate)하고 개체를 프로그램으로 조작(manipulate)하게 하는 프로그래밍 언어이지만, DOM은 여러분이 작업하는 문서의 부분을 검색(retrieve), 수정(modify), 갱신(update), 삭제(delete)하는 메소드(method)와 프로퍼티(property)를 제공합니다. 예를 들어, 여러분이 DOM을 써서 HTML textfield 값을 문자열로 검색할 지도 모릅니다. 그렇다면 여러분은 뜻있는 문장이 되도록 그 문자열을 다른 문자열에 연결(concatenate)하는 JavaScript "+" 연산자를 쓸 수 있습니다. 그리고 나서 여러분은 dialog에서 사용자에게 그 문자열을 표시하기 위해 DOM "alert()" 메소드를 씁니다. 또한 아래 예제를 보세요.

+ +

만약 웹페이지가 수입한 스웨덴 가구 한 점이라면, DOM은 선반, 나사못(bolt), Allen 렌치(wrench)와 드라이버 같은 각 부분의 도해입니다. 각 부분을 서로 조립하는 법과 많은 언어로 각 부분을 쓰는 법에 관한 명령 작성이 가능합니다. 하지만 여러분은 오직 여러분이 이해한 언어로 작성한 부분을 씁니다. 설명서는 실제 개체(브라우저의 렌더링 엔진)를 나타내는 개체의 도해(DOM)를 참조하는 작성 명령(JavaScript)을 써서 함께 가구를 만들기 쉽게 합니다. (유추한 Jonathan에게 감사를 올립니다!)

+ +

DOM에 있는 이 "언어 중립"이란 과대광고(hype)는 무엇일까요? DOM에 접근하는 데 쓰이는 유일한 언어가 JavaScript라면 왜 DOM이 언어 중립성을 띨까요? 글쎄요, 그것은 딱 맞지 않습니다. 예를 들어, Mozilla는 사용자 인터페이스를 위해 내부에 C++와 JavaScript로 작성된 DOM을 씁니다. 이를테면, 편집기는 Composer 모듈로 페이지를 작성(compose)할 때 여러분이 보는 HTML을 삽입(insert), 수정(modify), 삭제(delete)하기 위해 광범위하게 DOM을 씁니다. 다른 알려진 DOM 구현(implementation)은 아마도 Perl, Java, ActiveX, Python, 그리고 다른 것들을 포함합니다. 물론 이는 오직 DOM의 언어 중립성 덕분에 가능합니다.

+ +

DOM과 JavaScript - 무엇이 무엇을 하는가?

+ +

우리는 이 문서의 본론에 이르렀습니다. 각각 무엇을 할까요? 내 웹 페이지에 끼워 넣은(embed) 스크립트에서, DOM은 무엇이고 JavaScript는 무엇일까요? 간단한 예를 하나 더 자세히 보죠. 예는 우리가 "anchorTags"라고 부르는 NodeList에서 모든 <a> tag을 검색합니다. 그리고 나서 각 anchor tag(anchorTags NodeList의 각 요소)의 "href" 속성값을 경고(alert)로 띄웁니다.

+ +

파란색은 JavaScript, 빨간색은 DOM입니다.

+ +
var anchorTags = document.getElementsByTagName("a");
+for (var i = 0; i < anchorTags.length ; i++)
+{
+   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
+}
+
+ +

설명

+ +

이 코드 조각(snippet)은 기본 JavaScript가 무엇인지, 그리고 DOM이 무엇인지를 보입니다.

+ +
+
var anchorTags =
+
이는 "anchorTags"로 부르는 JavaScript 변수를 만듭니다.
+
+ +
+
document.getElementsByTagName("a")
+
Document 인터페이스는 DOM1 Core에서 정의한 첫 번째 인터페이스이고 document는 Document 인터페이스를 구현하는 host 개체입니다. document는 여러분의 페이지에 있는 모든 것을 지닙니다.
+ DOM1 Core는 Document 인터페이스에 getElementsByTagName() 메소드를 정의합니다. 메소드는 그 함수에 pass되는 매개변수와 일치하는 모든 tag의 NodeList (노드를 지니는 DOM 고유 배열의 한 종류)에서 문서 소스에 나오는 순서대로 검색합니다. 따라서 이제 anchorTags 변수는 NodeList입니다.
+
+ +
+
;
+
기본 명령 끝(end-of-instruction) 쌍반점(쎄미콜론, semicolon). JavaScript 문법.
+
+ +
+
for (var i = 0; i <
+
프로그래밍 언어의 특징을 잘 나타내는 "for" 루프(loop). 이는 우리가 anchorTags NodeList에 포함된 각 노드를 샅샅이 거치게 합니다. 변수 "i"의 선언을 주의하세요. 역시 JavaScript.
+
+ +
+
anchorTags.length
+
DOM1 Core는 NodeList 인터페이스의 length 프로퍼티를 정의합니다. 프로퍼티는 NodeList에 포함된 노드수(정수)를 반환합니다. JavaScript 배열은 또한 length 프로퍼티도 있음을 덧붙입니다.
+
+ +
+
; i++) {
+
1씩 증가하는 전형적인 JavaScript 변수.
+
+ +
+
alert(
+
alert()은 여러분이 pass한 매개변수(문자열)을 팝업하는 DOM 메소드입니다. DOM level 0이나 DOM0으로 부르는 것의 일부임을 유의하세요. DOM0은 일부 브라우저에서 지원되는 인터페이스 집합이지만 DOM 명세의 일부는 아닙니다.
+
+ +
+
"Href of this a element is : " +
+
문자열 리터럴(literal)과 문자열 연결 연산자. JavaScript.
+
+ +
+
anchorTags{{ mediawiki.external('i') }}.href
+
"href"는 DOM1 HTML 명세에 정의된 HTMLAnchorElement 인터페이스의 프로퍼티입니다. 있다면, 프로퍼티는 anchor 요소의 href 속성값을 반환합니다.
+ 우리는 또한 배열의 i 번째 항목(item)에 접근하기 위해 JavaScript에서 쓰는 구문과 같은 anchorTags{{ mediawiki.external('i') }}를 씁니다. NodeList의 항목에 접근하기 위해 언어 중립성을 띄는 "DOM 방식"은 NodeList 인터페이스에 정의된 item() 메소드(anchorTags.item(1).href)를 씁니다. 하지만 JavaScript 구현 대부분은 더 간단한 배열 방식 구문을 쓰도록 하고 그게 사람들 대부분이 실제로 쓰는 방식입니다.
+
+ +
+
+ "\n");
+
추가 문자열 연결. 문자열의 끝에 carriage return을 삽입합니다.
+
+ +
+
}
+
"for" 루프의 끝.
+
+ +
+

원본 문서 정보

+ + +
+ +

{{ languages( { "en": "en/The_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript" } ) }}

diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..6e90207661 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,82 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +tags: + - Boolean + - JavaScript + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +
{{JSRef}}
+ +

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

+ +
{{js_property_attributes(0, 0, 0)}}
+ +
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
+ + + +

설명

+ +

{{jsxref("Boolean")}} 인스턴스는 Boolean.prototype을 상속받습니다. 생성자의 프로토타입 객체를 사용해 모든 Boolean 인스턴스에 속성이나 메서드를 추가할 수 있습니다.

+ +

속성

+ +
+
Boolean.prototype.constructor
+
인스턴스의 프로토타입을 생성한 함수를 반환합니다. 기본값은 {{jsxref("Boolean")}} 함수입니다.
+
+ +

메서드

+ +
+
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
+
{{jsxref("Boolean")}} 객체의 소스를 포함한 문자열을 반환합니다. 반환 문자열을 사용해 동일한 객체를 생성할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.
+
{{jsxref("Boolean.prototype.toString()")}}
+
객체의 값에 따라 문자열 "true" 또는 "false"를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
+
{{jsxref("Boolean.prototype.valueOf()")}}
+
{{jsxref("Boolean")}} 객체의 원시 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ + + +

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

diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..06e1bba5f7 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,183 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +tags: + - Date + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +
{{JSRef}}
+ +

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

+ +
{{js_property_attributes(0, 0, 1)}}
+ +

설명

+ +

JavaScript {{jsxref("Date")}} 인스턴스는 Date.prototype을 상속합니다. 생성자의 프로토타입을 변경해 모든 Date 인스턴스의 속성과 메서드를 수정할 수 있습니다.

+ +

2000년대 달력과의 호환성을 위해 연도는 언제나 완전하게 네 자리 숫자로 작성해야 합니다. 즉 98 대신 1998이 올바른 작성법입니다. Date는 완전한 연도 설정에 도움이 될 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}}, {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 메서드를 가지고 있습니다.

+ +

ECMAScript 6부터 Date.prototype은 {{jsxref("Date")}} 인스턴스가 아닌 평범한 객체입니다.

+ +

속성

+ +
+
Date.prototype.constructor
+
인스턴스 생성에 사용한 생성자를 반환합니다. 기본값은 {{jsxref("Date")}}입니다.
+
+ +

메서드

+ +

접근자

+ +
+
{{jsxref("Date.prototype.getDate()")}}
+
주어진 날짜의 일(1-31)을 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getDay()")}}
+
주어진 날짜의 요일(0-6)을 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getFullYear()")}}
+
주어진 날짜의 연도(4자리 수)를 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getHours()")}}
+
주어진 날짜의 시(0-23)를 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getMilliseconds()")}}
+
주어진 날짜의 밀리초(0-999)를 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getMinutes()")}}
+
주어진 날짜의 분(0-59)을 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getMonth()")}}
+
주어진 날짜의 월(0-11)을 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getSeconds()")}}
+
주어진 날짜의 초(0-59)를 현지 시간에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getTime()")}}
+
주어진 날짜와 1970년 1월 1일 0시 0분(UTC)의 차이를 밀리초로 반환합니다.
+
{{jsxref("Date.prototype.getTimezoneOffset()")}}
+
현재 로케일의 시간대 차이를 분으로 환산해 반환합니다.
+
{{jsxref("Date.prototype.getUTCDate()")}}
+
주어진 날짜의 일(1-31)을 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCDay()")}}
+
주어진 날짜의 요일(0-6)을 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCFullYear()")}}
+
주어진 날짜의 연도(4자리 수)를 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCHours()")}}
+
주어진 날짜의 시(0-23)를 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
+
주어진 날짜의 밀리초(0-999)를 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCMinutes()")}}
+
주어진 날짜의 분(0-59)을 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCMonth()")}}
+
주어진 날짜의 월(0-11)을 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getUTCSeconds()")}}
+
주어진 날짜의 초(0-59)를 UTC에 맞춰 반환합니다.
+
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}
+
주어진 날짜의 연도(주로 두세자리 숫자)를 현지 시간에 맞춰 반환합니다. {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}를 사용하세요.
+
+ +

설정자

+ +
+
{{jsxref("Date.prototype.setDate()")}}
+
Sets the day of the month for a specified date according to local time.
+
{{jsxref("Date.prototype.setFullYear()")}}
+
Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.
+
{{jsxref("Date.prototype.setHours()")}}
+
Sets the hours for a specified date according to local time.
+
{{jsxref("Date.prototype.setMilliseconds()")}}
+
Sets the milliseconds for a specified date according to local time.
+
{{jsxref("Date.prototype.setMinutes()")}}
+
Sets the minutes for a specified date according to local time.
+
{{jsxref("Date.prototype.setMonth()")}}
+
Sets the month for a specified date according to local time.
+
{{jsxref("Date.prototype.setSeconds()")}}
+
Sets the seconds for a specified date according to local time.
+
{{jsxref("Date.prototype.setTime()")}}
+
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.
+
{{jsxref("Date.prototype.setUTCDate()")}}
+
Sets the day of the month for a specified date according to universal time.
+
{{jsxref("Date.prototype.setUTCFullYear()")}}
+
Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.
+
{{jsxref("Date.prototype.setUTCHours()")}}
+
Sets the hour for a specified date according to universal time.
+
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
+
Sets the milliseconds for a specified date according to universal time.
+
{{jsxref("Date.prototype.setUTCMinutes()")}}
+
Sets the minutes for a specified date according to universal time.
+
{{jsxref("Date.prototype.setUTCMonth()")}}
+
Sets the month for a specified date according to universal time.
+
{{jsxref("Date.prototype.setUTCSeconds()")}}
+
Sets the seconds for a specified date according to universal time.
+
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}
+
Sets the year (usually 2-3 digits) for a specified date according to local time. Use {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} instead.
+
+ +

변환 접근자

+ +
+
{{jsxref("Date.prototype.toDateString()")}}
+
Returns the "date" portion of the {{jsxref("Date")}} as a human-readable string like 'Thu Apr 12 2018'
+
{{jsxref("Date.prototype.toISOString()")}}
+
Converts a date to a string following the ISO 8601 Extended Format.
+
{{jsxref("Date.prototype.toJSON()")}}
+
Returns a string representing the {{jsxref("Date")}} using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Intended for use by {{jsxref("JSON.stringify()")}}.
+
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}
+
Returns a string representing the {{jsxref("Date")}} based on the GMT (UT) time zone. Use {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} instead.
+
{{jsxref("Date.prototype.toLocaleDateString()")}}
+
Returns a string with a locality sensitive representation of the date portion of this date based on system settings.
+
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}
+
Converts a date to a string, using a format string.
+
{{jsxref("Date.prototype.toLocaleString()")}}
+
Returns a string with a locality sensitive representation of this date. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.
+
{{jsxref("Date.prototype.toLocaleTimeString()")}}
+
Returns a string with a locality sensitive representation of the time portion of this date based on system settings.
+
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}
+
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.
+
{{jsxref("Date.prototype.toString()")}}
+
Returns a string representing the specified {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.toString()")}} method.
+
{{jsxref("Date.prototype.toTimeString()")}}
+
Returns the "time" portion of the {{jsxref("Date")}} as a human-readable string.
+
{{jsxref("Date.prototype.toUTCString()")}}
+
Converts a date to a string using the UTC timezone.
+
{{jsxref("Date.prototype.valueOf()")}}
+
Returns the primitive value of a {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ + + +

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

diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..6e13afb6db --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,101 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +--- +
{{JSRef}} {{non-standard_header}}
+ +

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

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

설명

+ +

모든 {{jsxref("InternalError")}} 인스턴스는 InternalError.prototype 으로부터 상속받습니다. 프로토타입은 모든 인스턴스에 속성이나 메소드를 추가하거나 하는 데에 사용할 수 있습니다.

+ +

속성

+ +
+
InternalError.prototype.constructor
+
인스턴스의 프로토타입을 생성하는 함수를 명시합니다. 
+
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
+
에러 메시지. {{jsxref("Error")}} 로부터 상속받습니다. 
+
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
+
에러명. {{jsxref("Error")}} 로부터 상속받습니다.
+
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
+
에러를 발생시킨 파일의 경로. {{jsxref("Error")}} 로부터 상속받습니다.
+
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
+
에러를 발생시킨 파일의 라인 넘버. {{jsxref("Error")}} 로부터 상속받습니다.
+
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
+
에러를 발생 시킨 라인의 컬럼 넘버. {{jsxref("Error")}} 로부터 상속받습니다.
+
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
+
스택 트레이스. {{jsxref("Error")}} 로부터 상속받습니다. 
+
+ +

메소드

+ +

비록 {{jsxref("InternalError")}}의 프로토타입 객체는 고유의 메소드를 가지고 있지는 않습니다. 하지만, {{jsxref("InternalError")}} 인스턴스는 프로토타입 체인을 통해 몇 가지의 메소드를 상속 받습니다.

+ +

스펙

+ +

Not part of any specifications.

+ +

브라우저 호환성

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

참조

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..2f1b031b39 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,87 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +tags: + - DateTimeFormat + - Internationalization + - Intl + - JavaScript + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +
{{JSRef}}
+ +

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

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

설명

+ +

Intl.DateTimeFormat 인스턴스에 대한 설명은 {{jsxref("DateTimeFormat")}} 문서를 참고하세요.

+ +

{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스는 Intl.DateTimeFormat.prototype을 상속합니다. 프로토타입 객체를 변경하면 모든 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스가 영향을 받습니다.

+ +

속성

+ +
+
Intl.DateTimeFormat.prototype.constructor
+
{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}에 대한 참조입니다.
+
+ +

메서드

+ +
+
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}
+
주어진 날짜에 {{jsxref("DateTimeFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.
+
+ +
+
{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
+
서식을 적용한 날짜 문자열의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.
+
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
+
객체 인스턴스 생성 때 주어진 로케일과 서식 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initial definition.
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}}
+ +

브라우저 호환성

+ +
+ + +

{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..fcbaa6c247 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,86 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +tags: + - Internationalization + - Intl + - JavaScript + - NumberFormat + - Property + - Prototype +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +--- +
{{JSRef}}
+ +

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

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

설명

+ +

Intl.NumberFormat 인스턴스에 대한 설명은 {{jsxref("NumberFormat")}} 문서를 참고하세요.

+ +

{{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스는 Intl.NumberFormat.prototype을 상속합니다. 프로토타입 객체를 변형하면 모든 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스가 영향을 받습니다.

+ +

속성

+ +
+
Intl.NumberFormat.prototype.constructor
+
Intl.NumberFormat에 대한 참조입니다.
+
+ +

메서드

+ +
+
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format()")}}
+
주어진 숫자에 {{jsxref("NumberFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.
+
+ +
+
{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
+
서식을 적용한 숫자의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.
+
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
+
객체 인스턴스 생성 때 주어진 로케일과 콜레이션 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initial definition.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}}
+ +

브라우저 호환성

+ +
+ + +

{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..3445bf2847 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,87 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +
{{JSRef}}
+ +

Map.prototype property는 {{jsxref("Map")}}의 프로토 타입을 나타낸다.

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

Description

+ +

{{jsxref("Map")}} instance는 {{jsxref("Map.prototype")}}를 상속한다. Constructor의 프로토타입에 property와 method를 추가함으로써 모든 Map 인스턴스에서 사용 가능하게끔 만들 수 있다.

+ +

Properties

+ +
+
Map.prototype.constructor
+
인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 {{jsxref("Map")}} 함수의 기본 값이다.
+
{{jsxref("Map.prototype.size")}}
+
Map 객체에 들어있는 key/value pair의 수를 반환한다.
+
+ +

Methods

+ +
+
{{jsxref("Map.prototype.clear()")}}
+
Map 객체의 모든 key/value pair를 제거한다.
+
{{jsxref("Map.delete", "Map.prototype.delete(key)")}}
+
주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 Map.prototype.has(key)가 반환했던 값을 반환한다. 그 후의 Map.prototype.has(key)는 false를 반환한다.
+
{{jsxref("Map.prototype.entries()")}}
+
Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
+
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
+
Map 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.
+
{{jsxref("Map.get", "Map.prototype.get(key)")}}
+
주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 undefined를 반환한다.
+
{{jsxref("Map.has", "Map.prototype.has(key)")}}
+
Map 객체 안에 주어진 key/value pair가 있는지 검사하고 Boolean 값을 반환한다.
+
{{jsxref("Map.prototype.keys()")}}
+
Map 객체 안의 모든 키(Key)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
+
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
+
Map 객체에 주어진 키(Key)에 값(Value)를 집어넣고, Map 객체를 반환한다.
+
{{jsxref("Map.prototype.values()")}}
+
Map 객체 안의 모든 값(Value)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
+
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
+
Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
+
+ +

Specifications

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

Browser compatibility

+ +

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

+ +

See also

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..2bf39d20f9 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,91 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +tags: + - JavaScript + - Number + - Property + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +
{{JSRef}}
+ +

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

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

설명

+ +

모든 {{jsxref("Number")}} 인스턴스는 Number.prototype을 상속합니다. {{jsxref("Number")}} 생성자의 프로토타입 객체는 모든 {{jsxref( "Number")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.

+ +

속성

+ +
+
Number.prototype.constructor
+
이 객체의 인스턴스를 생성한 함수를 반환합니다. 기본적으로 {{jsxref("Number")}} 객체 입니다.
+
+ +

메서드

+ +
+
{{jsxref("Number.prototype.toExponential()")}}
+
숫자의 지수표기법 표현을 문자열로 반환합니다.
+
{{jsxref("Number.prototype.toFixed()")}}
+
숫자의 고정소수점 표현을 문자열로 반환합니다.
+
{{jsxref("Number.prototype.toLocaleString()")}}
+
숫자의 표현을 특정 언어에 맞춘 형식의 문자열로 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 오버라이드 합니다.
+
{{jsxref("Number.prototype.toPrecision()")}}
+
지정한 정밀도로 숫자를 나타내는 문자열을 반환합니다. 고정소수점 혹은 지수표기법으로 표현합니다.
+
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
+
지정한 {{jsxref("Number")}} 객체를 나타내는 객체 리터럴을 반환합니다. 이 값을 사용하여 새 객체를 만들 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 오버라이드 합니다.
+
{{jsxref("Number.prototype.toString()")}}
+
지정된 기수(기본 10진수)로 지정된 객체를 문자열로 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 오버라이드 합니다.
+
{{jsxref("Number.prototype.valueOf()")}}
+
지정한 객체의 기본 자료형(primitive) 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 오버라이드 합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..8f7b08793f --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,219 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +tags: + - JavaScript + - Object + - Property + - Reference + - 프로토타입 +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +
{{JSRef}}
+ +

Object.prototype 속성은 {{jsxref("Object")}} 프로토타입(원형) 객체를
+ 나타냅니다.

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

설명

+ +

JavaScript에서 거의 모든 객체는 {{jsxref("Object")}}의 인스턴스입니다. 일반적인 객체는 Object.prototype 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다. 그러나, 의도적으로 Object를 생성할 때 ({{jsxref("Object.create", "Object.create(null)")}} 처럼) 이를 피할 수도 있고, {{jsxref("Object.setPrototypeOf")}} 등을 통해 나중에 무효화할 수도 있습니다.

+ +

Object 프로토타입에 가하는 변경은 프로토타입 체인을 통해, 더 아래쪽 체인에서 덮어 쓴 경우가 아니라면 모든 객체에서 관측할 수 있습니다. 이는 객체를 확장하거나 행동을 바꿀 수 있는 매우 강력하면서도 위험한 방법을 제공합니다.

+ + + +

속성

+ +
+
{{jsxref("Object.prototype.constructor")}}
+
객체의 프로토타입을 생성하는 함수를 지정합니다.
+
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
+
객체가 초기화될 때 프로토타입으로 사용된 객체를 가리킵니다.
+
{{jsxref("Object.prototype.__noSuchMethod__")}} {{obsolete_inline}}
+
정의되지 않은 객체 멤버가 메소드로서 호출될 때 실행되는 함수를 정의하는 데 쓰였지만 제거되었습니다.
+
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
+
사용자 정의 객체 상에 직접 있는 열거가능 속성의 수를 반환하는 데 쓰였지만 제거되었습니다.
+
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
+
객체 문맥을 가리키는 데 쓰였지만 제거되었습니다.
+
+ +

메서드

+ +
+
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
함수를 속성에 연결합니다, 접근했을 때 그 함수를 실행해 그 결과값을 반환하는.
+
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
함수를 속성에 연결합니다, 설정했을 때 그 속성을 수정하는 함수를 실행하는.
+
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
{{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.
+
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
+
{{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.
+
{{jsxref("Object.prototype.hasOwnProperty()")}}
+
객체가 지정된 속성을 프로토타입 체인을 통해 상속되지 않은 그 객체의 직접 속성으로 포함하는지를 나타내는 boolean을 반환합니다.
+
{{jsxref("Object.prototype.isPrototypeOf()")}}
+
지정된 객체가 이 메소드가 호출된 객체의 프로토타입 체인 내에 있는지를 나타내는 boolean을 반환합니다.
+
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
+
내부 ECMAScript [[Enumerable]] attribute가 설정된 경우를 나타내는 boolean을 반환합니다.
+
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
+
이 메소드가 호출된 객체를 나타내는 객체 리터럴의 출처를 포함하는 문자열을 반환합니다; 새로운 객체를 만들기 위해 이 값을 쓸 수 있습니다.
+
{{jsxref("Object.prototype.toLocaleString()")}}
+
{{jsxref("Object.toString", "toString()")}}을 호출합니다.
+
{{jsxref("Object.prototype.toString()")}}
+
객체의 문자열 표현을 반환합니다.
+
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
+
객체 속성에서 감시점을 제거합니다.
+
{{jsxref("Object.prototype.valueOf()")}}
+
지정된 객체의 원시값을 반환합니다.
+
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
+
객체 속성에 감시점을 추가합니다.
+
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
+
지정된 객체의 문맥에서 JavaScript 코드 문자열을 평가하는 데 쓰였지만 제거되었습니다.
+
+ +

예제

+ +

Object.prototype의 기본 메서드를 변경할 때, 기존 조직의 앞 또는 후에 확장(extension) 을 포장하여 코드를 주입시키는 것을 고려하자. 예를 들어서, 이 (시험받지
+ 않은) 코드는 내장된 로직 또는 어떤 다른 확장이 실행되기 전에 커스텀 로직을 전제조건적으로 실행시킬 것이다.

+ +

함수가 호출되었을 때, 불러온 매개변수들은 배열과 같은 형태로 '변수' arguments에 보관된다. 예를 들어 myFn(a, b, c) 라는 함수를 부를 때, 이 함수 내부에 배열형태로 매개변수 (a, b, c) 를 담게 된다. prototype을 훅을 이용해 수정할 때, 함수에서 apply()를 호출하여 단순하게 this와 arguments(호출 상태)에 현재 동작을 전달하면 된다. 이 패턴은 Node.prototype, Function.prototype등 prototype에도 사용할 수 있다.

+ +
var current = Object.prototype.valueOf;
+
+// 현재 설정한 "-prop-value" 속성은 cross-cutting 이고 
+// 항상 같은 prototype chain이 아니기 때문에, 이 Object.prototype을 바꾸고 싶다.
+Object.prototype.valueOf = function() {
+  if (this.hasOwnProperty('-prop-value')) {
+    return this['-prop-value'];
+  } else {
+    // 이 객체 내 속성(property)이 하나가 아니라면, 현재 동작을 재구성한 것으로부터
+    // 기본 동작으로 되돌리자(복구). 
+    // apply 동작은 다른 언어에서의 "super"와 유사하다.
+    // 비록 valueOf()가 매개변수를 받지못하더라도, 다른 훅에서 있을 것이다.
+    return current.apply(this, arguments);
+  }
+}
+
+ +

JavaScript는 엄밀히 말해서 하위클래스(sub-class) 객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책입니다. 예를 들어:

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

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
스펙상태설명
{{SpecName('ES1')}}{{Spec2('ES1')}}초기 정의. JavaScript 1.0에서 구현됨.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}}
+ +

브라우저 호환성

+ +

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

+ +

참조

+ + + +
+
<dicword style="user-select: text;">Even though valueOf() doesn't take arguments, some other hook may.</dicword><dicword style="user-select: text;"><dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"></dicimg> Eng<dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"></dicimg></dicword>
+
+
+
+valueOf ()가 인수를받지 않더라도 다른 후크가있을 수 있습니다.
+ +
+
+ + + +
diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..2e393d68d3 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,72 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype +tags: + - JavaScript + - Promise + - Property + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +
{{JSRef}}
+ +

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

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

설명

+ +

{{jsxref("Promise")}} 인스턴스는 {{jsxref("Promise.prototype")}}을 상속합니다. 모든 Promise 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

+ +

속성

+ +
+
Promise.prototype.constructor
+
인스턴스의 프로토타입을 만드는 함수를 반환합니다. 기본값은 {{jsxref("Promise")}} 함수입니다.
+
+ +

메서드

+ +
+
{{jsxref("Promise.prototype.catch()")}}
+
프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.
+
{{jsxref("Promise.prototype.then()")}}
+
프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다 (즉 관련 처리기 onFulfilled 또는 onRejected가 undefined인 경우).
+
{{jsxref("Promise.prototype.finally()")}}
+
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.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..8183d348a9 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,87 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Global_Objects/Set/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Property + - Reference + - set +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +
{{JSRef}}
+ +

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

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

설명

+ +

{{jsxref("Set")}} 인스턴스는 {{jsxref("Set.prototype")}}에서 상속합니다. 모든 Set 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

+ +

속성

+ +
+
Set.prototype.constructor
+
인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 {{jsxref("Set")}} 함수입니다.
+
{{jsxref("Set.prototype.size")}}
+
Set 객체 내 값의 개수를 반환합니다.
+
+ +

메서드

+ +
+
{{jsxref("Set.add", "Set.prototype.add(value)")}}
+
Set 객체에 주어진 값을 갖는 새로운 요소를 추가합니다. Set 객체를 반환합니다.
+
{{jsxref("Set.prototype.clear()")}}
+
Set 객체에서 모든 요소를 제거합니다.
+
{{jsxref("Set.delete", "Set.prototype.delete(value)")}}
+
value와 관련된 요소를 제거하고 Set.prototype.has(value)가 이전에 반환했던 값을 반환합니다. Set.prototype.has(value)는 그 뒤에 false를 반환합니다.
+
{{jsxref("Set.prototype.entries()")}}
+
삽입 순으로 Set 객체 내 각 값에 대한 [value, value] 배열을 포함하는 새로운 Iterator 객체를 반환합니다. 이는 Map 객체와 비슷하게 유지되므로 여기서 각 항목은 그 key와 value에 대해 같은 값을 갖습니다.
+
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
+
삽입 순으로 Set 객체 내에 있는 각 값에 대해 한 번 callbackFn을 호출합니다. thisArg 매개변수가 forEach에 제공된 경우, 이는 각 콜백에 대해 this 값으로 사용됩니다.
+
{{jsxref("Set.has", "Set.prototype.has(value)")}}
+
Set 객체 내 주어진 값을 갖는 요소가 있는지를 주장하는(asserting, 나타내는) boolean을 반환합니다.
+
{{jsxref("Set.prototype.keys()")}}
+
values() 함수와 같은 함수로 삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환합니다.
+
{{jsxref("Set.prototype.values()")}}
+
삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환합니다.
+
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
+
삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html new file mode 100644 index 0000000000..849b70c1c6 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,66 @@ +--- +title: SharedArrayBuffer.prototype +slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +tags: + - JavaScript + - SharedArrayBuffer + - TypedArrays + - 공유 메모리 + - 속성 +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +--- +
{{JSRef}}
+ +

SharedArrayBuffer.prototype 속성은 {{jsxref("SharedArrayBuffer")}} 객체를위한 프로토타입을 나타냅니다.

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

설명

+ +

SharedArrayBuffer 인스턴스는 SharedArrayBuffer.prototype 을 상속합니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 변경하여 모든 SharedArrayBuffer 인스턴스에 변화를 줄 수 있습니다.

+ +

속성

+ +
+
SharedArrayBuffer.prototype.constructor
+
객체의 프로토타입을 생성하는 함수를 지정합니다. 초기 값은 SharedArrayBuffer 생성자에 내장된 표준입니다.
+
{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
+
배열의 바이트 크기입니다. 배열이 생성되고 수정이 불가할 때 지정됩니다. 읽기 전용입니다.
+
+ +

메소드

+ +
+
{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}
+
begin 부터 end 까지의 모든 것을 포함하는 SharedArrayBuffer 바이트의 복사본을 컨텐츠로 갖는 새로운 SharedArrayBuffer 를 반환합니다. begin 또는 end 가 음수인 경우, 인덱스는 배열의 끝에서부터이고 반대인 경우 시작부터입니다.
+
+ +

명세

+ + + + + + + + + + + + + + +
명세상태코멘트
{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}{{Spec2('ESDraft')}}ES2017 에서 초기 정의.
+ +

브라우저 호환성

+ + + +

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

+ +

함께 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..fa32999954 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,219 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Global_Objects/String/prototype +tags: + - JavaScript + - Property + - Prototype + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +
{{JSRef("Global_Objects", "String")}}
+ +

요약

+ +

String.prototype 프라퍼티는 {{jsxref("Global_Objects/String", "String")}} 프로토타입 오브젝트를 표현하고 있습니다.

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

설명

+ +

모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들은 String.prototype를 상속합니다. String 프라퍼티 오브젝트를 변경하면, 그 변경은 모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들에 영향을 주게 됩니다.

+ +

Properties

+ +
+
String.prototype.constructor
+
오브젝트의 프로토타입을 생성하는 함수를 명세합니다.
+
{{jsxref("String.prototype.length")}}
+
문자열의 길이를 반영합니다.
+
N
+
N번째 위치에 있는 문자에 접근하기 위해 사용합니다.  N 은 0과 {{jsxref("String.length", "length")}}보다 작은 값 사이에 있는 양의 정수입니다. 이 퍼라퍼티들은 읽기 전용(read-only) 속성을 가지고 있습니다. 
+
+ +

메서드

+ +

HTML과 관련이 없는 메서드

+ +
+
{{jsxref("String.prototype.charAt()")}}
+
문자열 내 특정 위치(index)에 있는 문자를 반환합니다.
+
{{jsxref("String.prototype.charCodeAt()")}}
+
문자열 내 주어진 위치(index)에 있는 문자의 유니코드 값을 반환합니다.
+
{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}
+
주어진 위치에 있는 UTF-16으로 인코딩된 코드 포인터값인 음수가 아닌 정수값을 반환합니다. 
+
{{jsxref("String.prototype.concat()")}}
+
두 문자열의 문자를 합쳐서 새로운 문자열로 만든 다음, 그 새로운 문자열을 반환합니다. 
+
{{jsxref("String.prototype.includes()")}} {{experimental_inline}}
+
문자열 내에 찾고자 하는 문자열이 있는지를 확인합니다. 
+
{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}
+
문자열에서 특정 문자열로 끝나는지를 확인할 수 있습니다.
+
{{jsxref("String.prototype.indexOf()")}}
+
{{jsxref("Global_Objects/String", "String")}} 오브젝트에 있는 특정 값이 일치하는 첫 번째 인덱스 값을 반환하며, 일치하는 값이 없을 경우에는 -1을 반환합니다.
+
{{jsxref("String.prototype.lastIndexOf()")}}
+
String 오브젝트에서 fromIndex로부터 반대방향으로 찾기 시작하여 특정 값이 일치하는 마지막 인덱스를 반환합니다. 문자열에서 일치하는 특정 값이 없으면 -1을 리턴합니다.
+
{{jsxref("String.prototype.localeCompare()")}}
+
Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
+
{{jsxref("String.prototype.match()")}}
+
Used to match a regular expression against a string.
+
{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}
+
Returns the Unicode Normalization Form of the calling string value.
+
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
+
Wraps the string in double quotes (""").
+
{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}
+
Returns a string consisting of the elements of the object repeated the given times.
+
{{jsxref("String.prototype.replace()")}}
+
Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.
+
{{jsxref("String.prototype.search()")}}
+
Executes the search for a match between a regular expression and a specified string.
+
{{jsxref("String.prototype.slice()")}}
+
Extracts a section of a string and returns a new string.
+
{{jsxref("String.prototype.split()")}}
+
Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.
+
{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}
+
Determines whether a string begins with the characters of another string.
+
{{jsxref("String.prototype.substr()")}}
+
Returns the characters in a string beginning at the specified location through the specified number of characters.
+
{{jsxref("String.prototype.substring()")}}
+
Returns the characters in a string between two indexes into the string.
+
{{jsxref("String.prototype.toLocaleLowerCase()")}}
+
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()")}}.
+
{{jsxref("String.prototype.toLocaleUpperCase()")}}
+
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()")}}.
+
{{jsxref("String.prototype.toLowerCase()")}}
+
Returns the calling string value converted to lower case.
+
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
+
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.
+
{{jsxref("String.prototype.toString()")}}
+
Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.
+
{{jsxref("String.prototype.toUpperCase()")}}
+
Returns the calling string value converted to uppercase.
+
{{jsxref("String.prototype.trim()")}}
+
Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.
+
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
+
Trims whitespace from the left side of the string.
+
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
+
Trims whitespace from the right side of the string.
+
{{jsxref("String.prototype.valueOf()")}}
+
Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.
+
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}
+
Returns a new Iterator object that iterates over the code points of a String value, returning each code point as a String value.
+
+ +

HTML wrapper methods

+ +

These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.

+ +
+
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
+
{{HTMLElement("big")}}
+
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
+
{{HTMLElement("blink")}}
+
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
+
{{HTMLElement("b")}}
+
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
+
{{HTMLElement("tt")}}
+
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
+
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
+
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
+
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
+
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
+
{{HTMLElement("i")}}
+
{{jsxref("String.prototype.link()")}}
+
{{htmlattrxref("href", "a", "<a href=\"rul\">")}} (link to URL)
+
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
+
{{HTMLElement("small")}}
+
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
+
{{HTMLElement("strike")}}
+
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
+
{{HTMLElement("sub")}}
+
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
+
{{HTMLElement("sup")}}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..aa38e80799 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,127 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +
{{JSRef}}
+ +

SyntaxError.prototype 속성은 {{jsxref("SyntaxError")}} 객체의 생성자 프로토타입을 표현합니다.

+ +

설명

+ +

모든 {{jsxref("SyntaxError")}} 인스턴스는 SyntaxError.prototype 객체로부터 상속 받습니다. 또한, 속성이나 메소드를 추가할 때 모든 인스턴스에 프로토타입을 사용 할 수 있습니다.

+ +

속성

+ +
+
SyntaxError.prototype.constructor
+
인스턴스의 프로토타입을 생성하는 함수를 명시합니다.
+
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
+
에러 메시지. 비록 ECMA-262는  {{jsxref("SyntaxError")}} 가 고유의 message 속성을 제공해야 한다고 명시하고 있지만, SpiderMonkey 에서는, {{jsxref("Error.prototype.message")}}를 상속 받습니다. 
+
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
+
에러명. {{jsxref("Error")}}로부터 상속 받습니다.
+
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
+
에러를 발생시킨 파일의 경로. {{jsxref("Error")}}로부터 상속 받습니다.
+
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
+
에러가 발생한 파일의 코드 라인 넘버. {{jsxref("Error")}}로부터 상속 받습니다.
+
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
+
에러가 발생된 라인의 컬럼 넘버. {{jsxref("Error")}}로부터 상속 받습니다.
+
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
+
스택 트레이스. {{jsxref("Error")}}로부터 상속 받습니다.
+
+ +

메소드

+ +

비록 {{jsxref("SyntaxError")}} 프로토타입 객체는 고유의 메소드를 가지고 있지는 않지만, {{jsxref("SyntaxError")}} 인스턴스는 몇 가지의 메소드를 프로토타입 체인을 통하여 상속 받습니다.

+ +

스펙

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}초기 정의.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}NativeError.prototype로 정의.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}NativeError.prototype로 정의.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}NativeError.prototype로 정의.
+ +

브라우저 호환성

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

참조

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..75f63010bf --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,176 @@ +--- +title: TypedArray.prototype +slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +tags: + - JavaScript + - Property + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +--- +
{{JSRef}}
+ +

TypedArray.prototype 속성(property)은 {{jsxref("TypedArray")}} 생성자에 대한 프로토타입을 나타냅니다.

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

설명

+ +

{{jsxref("TypedArray")}} 인스턴스는 {{jsxref("TypedArray.prototype")}}을 상속합니다. 모든 TypedArray 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있으며, TypedArray는 TypedArray 객체 유형 중 하나입니다.

+ +

상속에 관한 자세한 정보를 위해 TypedArray에 대한 설명도 참조하세요.

+ +

속성

+ +
+
TypedArray.prototype.constructor
+
인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 해당 TypedArray 객체 유형 함수 중 하나입니다.
+
{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}
+
형식화 배열에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 반환합니다. 생성 시에 고정되기에 읽기 전용.
+
{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}
+
{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 길이(단위 바이트)를 반환합니다. 생성 시에 고정되기에 읽기 전용.
+
{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}
+
{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 오프셋(단위 바이트)을 반환합니다. 생성 시에 고정되기에 읽기 전용.
+
{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}
+
형식화 배열 내 보유한 요소의 수를 반환합니다. 생성 시에 고정되기에 읽기 전용.
+
+ +

메서드

+ +
+
{{jsxref("TypedArray.prototype.copyWithin()")}}
+
배열 내부 일련의 배열 요소를 복사합니다. {{jsxref("Array.prototype.copyWithin()")}}도 참조.
+
{{jsxref("TypedArray.prototype.entries()")}}
+
배열 내 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 Array Iterator 객체를 반환합니다. {{jsxref("Array.prototype.entries()")}}도 참조.
+
{{jsxref("TypedArray.prototype.every()")}}
+
배열의 모든 요소가 함수로 제공되는 테스트를 통과하는지를 테스트합니다. {{jsxref("Array.prototype.every()")}}도 참조.
+
{{jsxref("TypedArray.prototype.fill()")}}
+
시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정값으로 채웁니다. {{jsxref("Array.prototype.fill()")}}도 참조.
+
{{jsxref("TypedArray.prototype.filter()")}}
+
제공되는 필터링 함수가 true를 반환하는 이 배열의 모든 요소를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.filter()")}}도 참조.
+
{{jsxref("TypedArray.prototype.find()")}}
+
배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 값 또는 못 찾은 경우 undefined를 반환합니다. {{jsxref("Array.prototype.find()")}}도 참조.
+
{{jsxref("TypedArray.prototype.findIndex()")}}
+
배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.findIndex()")}}도 참조.
+
{{jsxref("TypedArray.prototype.forEach()")}}
+
배열 내 각 요소에 대해 함수를 호출합니다. {{jsxref("Array.prototype.forEach()")}}도 참조.
+
{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}
+
형식화 배열이 특정 요소를 포함하는지를 판단해, 적절히 true 또는 false를 반환합니다. {{jsxref("Array.prototype.includes()")}}도 참조.
+
{{jsxref("TypedArray.prototype.indexOf()")}}
+
지정된 값과 같은 배열 내부 요소의 첫(최소) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.indexOf()")}}도 참조.
+
{{jsxref("TypedArray.prototype.join()")}}
+
배열의 모든 요소를 문자열로 합칩니다. {{jsxref("Array.prototype.join()")}}도 참조.
+
{{jsxref("TypedArray.prototype.keys()")}}
+
배열의 각 인덱스에 대한 키를 포함하는 새로운 Array Iterator를 반환합니다. {{jsxref("Array.prototype.keys()")}}도 참조.
+
{{jsxref("TypedArray.prototype.lastIndexOf()")}}
+
지정된 값과 같은 배열 내부 요소의 끝(최대) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.lastIndexOf()")}}도 참조.
+
{{jsxref("TypedArray.prototype.map()")}}
+
이 배열의 모든 요소에 제공된 함수를 호출한 결과를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.map()")}}도 참조.
+
{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
+
{{jsxref("TypedArray.prototype.copyWithin()")}}의 이전 비표준 버전.
+
{{jsxref("TypedArray.prototype.reduce()")}}
+
누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduce()")}}도 참조.
+
{{jsxref("TypedArray.prototype.reduceRight()")}}
+
누산기 및 배열의 각 값(우에서 좌로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduceRight()")}}도 참조.
+
{{jsxref("TypedArray.prototype.reverse()")}}
+
배열 요소의 순서를 뒤집습니다 — 처음이 마지막이 되고 마지막이 처음이 됩니다. {{jsxref("Array.prototype.reverse()")}}도 참조.
+
{{jsxref("TypedArray.prototype.set()")}}
+
형식화 배열에 여러 값을 저장합니다, 지정된 배열에서 입력 값을 읽어.
+
{{jsxref("TypedArray.prototype.slice()")}}
+
배열의 한 부분을 추출하여 새로운 배열을 반환합니다. {{jsxref("Array.prototype.slice()")}}도 참조.
+
{{jsxref("TypedArray.prototype.some()")}}
+
이 배열의 적어도 한 요소가 제공된 테스트 함수를 만족하는 경우 true를 반환합니다. {{jsxref("Array.prototype.some()")}}도 참조.
+
{{jsxref("TypedArray.prototype.sort()")}}
+
배열의 요소를 적소에 정렬해 그 배열을 반환합니다. {{jsxref("Array.prototype.sort()")}}도 참조.
+
{{jsxref("TypedArray.prototype.subarray()")}}
+
주어진 시작 및 끝 요소 인덱스로부터 새로운 TypedArray를 반환합니다.
+
{{jsxref("TypedArray.prototype.values()")}}
+
배열의 각 인덱스에 대한 값을 포함하는 새로운 Array Iterator 객체를 반환합니다. {{jsxref("Array.prototype.values()")}}도 참조.
+
{{jsxref("TypedArray.prototype.toLocaleString()")}}
+
배열 및 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Array.prototype.toLocaleString()")}}도 참조.
+
{{jsxref("TypedArray.prototype.toString()")}}
+
배열 및 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Array.prototype.toString()")}}도 참조.
+
{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
+
배열의 각 인덱스에 대한 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.
+
+ +

스펙

+ + + + + + + + + + + + + + + + + + + +
스펙상태설명
{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7.0{{ CompatGeckoDesktop("2") }}1011.65.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}1011.64.2
+
+ +

참조

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..fa2ad9691d --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,143 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +
{{JSRef}}
+ +

WeakMap.prototype 속성(property)은 {{jsxref("WeakMap")}} 생성자에 대한 프로토타입을 나타냅니다.

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

설명

+ +

{{jsxref("WeakMap")}} 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다. 모든 WeakMap 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

+ +

WeakMap.prototype은 그 자체로 그냥 평범한 객체입니다:

+ +
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
+ +

속성

+ +
+
WeakMap.prototype.constructor
+
인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakMap")}} 함수입니다.
+
+ +

메서드

+ +
+
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
+
key와 관련된 모든 값을 제거합니다. WeakMap.prototype.has(key)는 그 뒤에 false를 반환합니다.
+
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
+
key와 관련된 값 또는 관련 값이 없는 경우 undefined를 반환합니다.
+
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
+
WeakMap 객체 내 key와 관련된 값이 있는지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.
+
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
+
WeakMap 객체 내 key에 대해 값을 설정합니다. WeakMap 객체를 반환합니다.
+
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
+
WeakMap 객체에서 모든 키/값 쌍을 제거합니다. 메서드가 없는 WeakMap 객체를 캡슐화하여 .clear() 메서드가 있는 WeakMap 같은 객체 구현이 가능함을 주의하세요 ({{jsxref("WeakMap")}} 페이지 예 참조)
+
+ +

스펙

+ + + + + + + + + + + + + + + + + + + +
스펙상태설명
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support36{{CompatGeckoDesktop("6.0")}}11237.1
Ordinary object{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Ordinary object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

참조

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..0c75408df5 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,142 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +tags: + - ECMAScript6 + - JavaScript + - Property + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +
{{JSRef}}
+ +

WeakSet.prototype 속성(property)은 {{jsxref("WeakSet")}} 생성자에 대한 프로토타입을 나타냅니다.

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

설명

+ +

{{jsxref("WeakSet")}} 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다. 모든 WeakSet 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

+ +

WeakSet.prototype은 그 자체로 그냥 평범한 객체입니다:

+ +
Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"
+ +

속성

+ +
+
WeakSet.prototype.constructor
+
인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakSet")}} 함수입니다.
+
+ +

메서드

+ +
+
{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}
+
WeakSet 객체에 주어진 값을 갖는 새로운 객체를 추가합니다.
+
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}
+
value와 관련된 요소를 제거합니다. WeakSet.prototype.has(value)는 그 뒤에 false를 반환합니다.
+
{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}
+
WeakSet 객체 내 주어진 값을 갖는 요소가 존재하는 지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.
+
{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}
+
WeakSet 객체에서 모든 요소를 제거합니다.
+
+ +

스펙

+ + + + + + + + + + + + + + + + + + + +
스펙상태설명
{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ESDraft')}} 
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support36{{ CompatGeckoDesktop(34) }}{{CompatNo}}23{{CompatNo}}
Ordinary object{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome for AndroidAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile(34) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Ordinary object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

참조

+ + diff --git a/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html new file mode 100644 index 0000000000..c7c1c54bab --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html @@ -0,0 +1,70 @@ +--- +title: WebAssembly.Global.prototype +slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +--- +
{{JSRef}}
+ +

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

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

Description

+ +

모든 {{jsxref("WebAssembly.Global")}} 인스턴스는 Global.prototype에서 상속받습니다. {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입 객체는 모든 {{jsxref( "WebAssembly.Global")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.

+ +

Properties

+ +
+
Global.prototype.constructor
+
이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Global()")}} 생성자입니다.
+
Global.prototype[@@toStringTag]
+
@@toStringTag 속성의 초기 값은 String 값인 "WebAssembly.Global"입니다.
+
Global.prototype.value
+
전역 변수에 포함 된 값 - 전역 값을 직접 설정하고 가져 오는 데 사용할 수 있습니다.
+
+ +

Methods

+ +
+
Global.prototype.valueOf()
+
전역 변수에 포함 된 값을 반환하는 Old-style 메서드입니다.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}{{Spec2('WebAssembly JS')}}Initial draft definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}

+
+ +
+ +
+ +

See also

+ + diff --git a/files/ko/conflicting/web/javascript/reference/operators/index.html b/files/ko/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..3e61415550 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,291 @@ +--- +title: 산술 연산자 +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +
{{jsSidebar("Operators")}}
+ +

산술 연산자는 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 숫자 값을 반환합니다. 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.

+ +
{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}
+ + + +

덧셈 (+)

+ +

덧셈 연산자는 숫자 피연산자를 더한 값, 또는 문자열을 연결한 값을 생성합니다.

+ +

구문

+ +
연산자: x + y
+
+ +

예제

+ +
// Number + Number -> 합
+1 + 2 // 3
+
+// Boolean + Number -> 합
+true + 1 // 2
+
+// Boolean + Boolean -> 합
+false + false // 0
+
+// Number + String -> 연결
+5 + "foo" // "5foo"
+
+// String + Boolean -> 연결
+"foo" + false // "foofalse"
+
+// String + String -> 연결
+"foo" + "bar" // "foobar"
+
+ +

뺄셈 (-)

+ +

뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.

+ +

구문

+ +
연산자: x - y
+
+ +

예제

+ +
5 - 3 // 2
+3 - 5 // -2
+"foo" - 3 // NaN
+ +

나눗셈 (/)

+ +

나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.

+ +

구문

+ +
연산자: x / y
+
+ +

예제

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

곱셈 (*)

+ +

곱셈 연산자는 두 연산자의 곱을 생성합니다.

+ +

구문

+ +
연산자: x * y
+
+ +

예제

+ +
2 * 2 // 4
+-2 * 2 // -4
+Infinity * 0 // NaN
+Infinity * Infinity // Infinity
+"foo" * 2 // NaN
+
+ +

나머지 (%)

+ +

나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.

+ +

구문

+ +
연산자: var1 % var2
+
+ +

예제

+ +
12 % 5 // 2
+-1 % 2 // -1
+NaN % 2 // NaN
+1 % 2 // 1
+2 % 3 // 2
+-4 % 2 // -0
+5.5 % 2 // 1.5
+
+ +

거듭제곱 (**)

+ +

거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, var1과 var2가 변수일 때, var1var2의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 a ** b ** c는 a ** (b ** c)와 같습니다.

+ +

구문

+ +
연산자: var1 ** var2
+
+ +

참고

+ +

PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(+/-/~/!/delete/void/typeof)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.

+ +
-2 ** 2;
+// Bash에서 4, 다른 언어에서는 -4.
+// 모호한 표현이므로 JavaScript에서는 유효하지 않음
+
+
+-(2 ** 2);
+// JavaScript에서 -4, 작성자의 의도가 명확함
+
+ +

예제

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

결과의 부호를 뒤집으려면 다음과 같이 작성합니다.

+ +
-(2 ** 2) // -4
+
+ +

거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.

+ +
(-2) ** 2 // 4
+
+ +
+

참고: JavaScript는 비트 연산자 ^ (논리 XOR)도 가지고 있습니다. **와 ^는 다릅니다. (예 : 2 ** 3 === 8이지만 2 ^ 3 === 1)

+
+ +

증가 (++)

+ +

증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.

+ + + +

구문

+ +
연산자: x++ or ++x
+
+ +

예제

+ +
// 접미사
+var x = 3;
+y = x++; // y = 3, x = 4
+
+// 접두사
+var a = 2;
+b = ++a; // a = 3, b = 3
+
+ +

감소 (--)

+ +

감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.

+ + + +

구문

+ +
연산자: x-- or --x
+
+ +

예제

+ +
// 접미사
+var x = 3;
+y = x--; // y = 3, x = 2
+
+// 접두사
+var a = 2;
+b = --a; // a = 1, b = 1
+
+ +

단항 부정 (-)

+ +

단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.

+ +

구문

+ +
연산자: -x
+
+ +

예제

+ +
var x = 3;
+y = -x; // y = -3, x = 3
+
+// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함
+var x = "4";
+y = -x; // y = -4
+ +

단항 양부호 (+)

+ +

단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 true, false, null도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.

+ +

구문

+ +
연산자: +x
+
+ +

예제

+ +
+3     // 3
++"3"   // 3
++true  // 1
++false // 0
++null  // 0
++function(val) { return val } // NaN
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}
{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}
{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}
{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html new file mode 100644 index 0000000000..b442b1d7bd --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_13aeb53e31f9cec454ca631cb162449f/index.html @@ -0,0 +1,250 @@ +--- +title: 논리 연산자 +slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) +tags: + - JavaScript + - Logic + - Not + - Operator + - Reference + - and + - or + - 논리 +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +
{{jsSidebar("Operators")}}
+ +

논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}
+ + + +

설명

+ +

다음 표는 논리 연산자의 종류입니다. (expr은 불리언을 포함해서 아무 자료형이나 가능합니다)

+ + + + + + + + + + + + + + + + + + + + + + + + +
연산자구문설명
논리 AND (&&)expr1 && expr2expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.
논리 OR (||)expr1 || expr2 +

expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.

+
논리 NOT (!)!expr단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.
+ +

값을 true로 변환하면 값이 {{Glossary("truthy", "참")}}인 것입니다.
+ 값을 false로 변환할 수 있으면 값이 {{Glossary("falsy", "거짓")}}인 것입니다.

+ +

거짓으로 변환할 수 있는 표현의 예는 다음과 같습니다.

+ + + +

&& 연산자와 || 연산자를 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 불리언 원시값으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있습니다. 반환 값을 직접 불리언으로 바꾸려면 {{jsxref("Boolean")}} 함수나 이중 부정 연산자를 사용하세요.

+ +

단락 평가

+ +

논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행합니다.

+ + + +

"단락"이란, 위 규칙에서 expr을 평가하지 않는다는 뜻입니다. 따라서 평가 중 발생해야 할 부작용(예: expr이 함수 호출이면 절대 호출하지 않음)도 나타나지 않습니다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문입니다. 다음 예제를 살펴보세요.

+ +
function A(){ console.log('A 호출'); return false; }
+function B(){ console.log('B 호출'); return true; }
+
+console.log( A() && B() );
+// 함수 호출로 인해 콘솔에 "A 호출" 기록
+// 그 후 연산자의 결과값인 "false" 기록
+
+console.log( B() || A() );
+// 함수 호출로 인해 콘솔에 "B 호출" 기록
+// 그 후 연산자의 결과인 "true" 기록
+
+ +

연산자 우선순위

+ +

다음 두 식은 똑같아 보이지만, && 연산자는 || 이전에 실행되므로 서로 다릅니다. 연산자 우선순위를 참고하세요.

+ +
true || false && false      // returns true, because && is executed first
+(true || false) && false    // returns false, because operator precedence cannot apply
+ +

논리 AND (&&)

+ +

다음은 &&(논리 AND) 연산자의 예제입니다.

+ +
a1 = true  && true       // t && t returns true
+a2 = true  && false      // t && f returns false
+a3 = false && true       // f && t returns false
+a4 = false && (3 == 4)   // f && f returns false
+a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
+a6 = false && 'Cat'      // f && t returns false
+a7 = 'Cat' && false      // t && f returns false
+a8 = ''    && false      // f && f returns ""
+a9 = false && ''         // f && f returns false
+ +

논리 OR (||)

+ +

다음은 ||(논리 OR) 연산자의 예제입니다.

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

논리 NOT (!)

+ +

다음은 !(논리 NOT) 연산자의 예제입니다.

+ +
n1 = !true               // !t returns false
+n2 = !false              // !f returns true
+n3 = !''                 // !f returns true
+n4 = !'Cat'              // !t returns false
+
+ +

이중 NOT (!!)

+ +

NOT 연산자 다수를 연속해서 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 변환 결과는 피연산자 값의 "참스러움"이나 "거짓스러움"에 따릅니다. ({{Glossary("truthy", "참")}}과 {{Glossary("falsy", "거짓")}}을 참고하세요)

+ +

동일한 변환을 {{jsxref("Boolean")}} 함수로도 수행할 수 있습니다.

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

불리언 변환 규칙

+ +

AND에서 OR로 변환

+ +

불리언 계산에서, 다음 두 코드는 항상 같습니다.

+ +
bCondition1 && bCondition2
+
+ +
!(!bCondition1 || !bCondition2)
+ +

OR에서 AND로 변환

+ +

불리언 계산에서, 다음 두 코드는 항상 같습니다.

+ +
bCondition1 || bCondition2
+
+ +
!(!bCondition1 && !bCondition2)
+ +

NOT 간 변환

+ +

불리언 계산에서, 다음 두 코드는 항상 같습니다.

+ +
!!bCondition
+
+ +
bCondition
+ +

중첩 괄호 제거

+ +

논리 표현식은 항상 왼쪽에서 오른쪽으로 평가되므로, 몇 가지 규칙을 따르면 복잡한 표현식에서 괄호를 제거할 수 있습니다.

+ +

중첩 AND 제거

+ +

불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.

+ +
bCondition1 || (bCondition2 && bCondition3)
+
+ +
bCondition1 || bCondition2 && bCondition3
+ +

중첩 OR 제거

+ +

불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.

+ +
bCondition1 && (bCondition2 || bCondition3)
+
+ +
!(!bCondition1 || !bCondition2 && !bCondition3)
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html new file mode 100644 index 0000000000..cf5ae3afa2 --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_310dc67549939233c3d18a8fa2cdbb23/index.html @@ -0,0 +1,216 @@ +--- +title: 비교 연산자 +slug: Web/JavaScript/Reference/Operators/Comparison_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +
{{jsSidebar("Operators")}}
+ +

JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(===)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(==)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<=)의 경우 {{glossary("primitive", "원시값")}}으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.

+ +

문자열의 경우 {{glossary("unicode", "유니코드")}} 값을 사용한 사전순으로 비교합니다.

+ +
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
+ + + +

비교 연산의 특징은 다음과 같습니다.

+ + + +

동치 연산자

+ +

동등 연산자 (==)

+ +

동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다.

+ +

구문

+ +
x == y
+
+ +

예제

+ +
  1   ==  1        // true
+ "1"  ==  1        // true
+  1   == '1'       // true
+  0   == false     // true
+  0   == null      // false
+
+  0   == undefined // false
+null  == undefined // true
+
+ +

부등 연산자 (!=)

+ +

부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환합니다. 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 서로 메모리의 다른 객체를 바라보고 있는지 판별합니다.

+ +

구문

+ +
x != y
+ +

예제

+ +
1 !=   2     // true
+1 !=  "1"    // false
+1 !=  '1'    // false
+1 !=  true   // false
+0 !=  false  // false
+
+ +

일치 연산자 (===)

+ +

일치 연산자는 자료형 변환 없이 두 연산자가 엄격히 같은지 판별합니다.

+ +

구문

+ +
x === y
+ +

예제

+ +
3 === 3   // true
+3 === '3' // false
+ +

불일치 연산자 (!==)

+ +

일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.

+ +

구문

+ +
x !== y
+ +

예제

+ +
3 !== '3' // true
+4 !== 3   // true
+
+ +

관계 연산자

+ +

이 항목의 모든 연산자는 비교 전에 피연산자를 {{glossary("primitive", "원시값")}}으로 변환합니다. 둘 다 문자열이 되는 경우 사전순으로 비교하고, 그렇지 않으면 숫자로 변환합니다. {{jsxref("NaN")}}과의 비교는 항상 false를 반환합니다.

+ +

초과 연산자 (>)

+ +

초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.

+ +

구문

+ +
x > y
+ +

예제

+ +
4 > 3 // true
+
+ +

이상 연산자 (>=)

+ +

이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.

+ +

구문

+ +
 x >= y
+ +

예제

+ +
4 >= 3 // true
+3 >= 3 // true
+
+ +

미만 연산자 (<)

+ +

미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.

+ +

구문

+ +
x < y
+ +

예제

+ +
3 < 4 // true
+ +

이하 연산자 (<=)

+ +

이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.

+ +

구문

+ +
 x <= y
+ +

예제

+ +
3 <= 4 // true
+
+ +

동치 연산자 사용하기

+ +

표준 동치, 동등 연산자(==, !=)는 두 피연산자를 비교하기 위해 추상 동치 비교 알고리즘(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 5 == '5'에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.

+ +

엄격 동치, 일치 연산자(===, !==)는 엄격 동치 비교 알고리즘(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 false이므로, 5 !== '5'입니다.

+ +

피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.

+ +

비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.

+ + + +
참고: String 객체는 자료형 객체지, 문자열이 아닙니다! String 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.
+ +
// 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'
+ +

명세

+ + + + + + + + + + + + + +
Status
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
+ +

브라우저 호환성

+ +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html new file mode 100644 index 0000000000..4cc5ab7b5a --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_7c8eb9475d97a4a734c5991857698560/index.html @@ -0,0 +1,541 @@ +--- +title: 비트 연산자 +slug: Web/JavaScript/Reference/Operators/Bitwise_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +
{{jsSidebar("Operators")}}
+ +

비트 연산자는 피연산자를 10진수, 16진수, 8진수가 아니라, 32개의 비트(0과 1) 집합으로 취급합니다. 예를 들어, 10진수 9의 2진수 표기법은 1001입니다. 이렇게, 비트 연산자는 값의 2진수 표현을 사용해 연산하지만, 결과는 표준 JavaScript 숫자 값으로 반환합니다.

+ +
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
+ + + +

다음은 JavaScript의 비트 연산자를 요약한 표입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
연산자사용방법설명
비트 ANDa & b피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이면 그 비트값에 1을 반환.
비트 ORa | b피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이거나 한 쪽이 1이면 1을 반환.
비트 XORa ^ b피연산자를 비트로 바꿨을 때 대응하는 비트가 서로 다르면 1을 반환.
비트 NOT~ a피연산자의 반전된 값을 반환.
왼쪽 시프트a << bShifts a in binary representation b (< 32) bits to the left, shifting in zeros from the right.
부호 유지 오른쪽 시프트a >> bShifts a in binary representation b (< 32) bits to the right, discarding bits shifted off.
부호 버림 오른쪽 시프트a >>> bShifts a in binary representation b (< 32) bits to the right, discarding bits shifted off, and shifting in zeros from the left.
+ +

부호 있는 32비트 정수

+ +

The operands of all bitwise operators are converted to signed 32-bit integers in two's complement format, except for zero-fill right shift which results in an unsigned 32-bit integer.

+ +

Two's complement format means that a number's negative counterpart (e.g. 5 vs. -5) is all the number's bits inverted (bitwise NOT of the number, or ones' complement of the number) plus one.

+ +

For example, the following encodes the integer 314:

+ +
00000000000000000000000100111010
+
+ +

The following encodes ~314, i.e. the one's complement of 314:

+ +
11111111111111111111111011000101
+
+ +

Finally, the following encodes -314, i.e. the two's complement of 314:

+ +
11111111111111111111111011000110
+
+ +

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

+ +

The number 0 is the integer that is composed completely of 0 bits.

+ +
0 (base 10) = 00000000000000000000000000000000 (base 2)
+
+ +

The number -1 is the integer that is composed completely of 1 bits.

+ +
-1 (base 10) = 11111111111111111111111111111111 (base 2)
+
+ +

The number -2147483648 (hexadecimal representation: -0x80000000) is the integer that is composed completely of 0 bits except the first (left-most) one.

+ +
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
+
+ +

The number 2147483647 (hexadecimal representation: 0x7fffffff) is the integer that is composed completely of 1 bits except the first (left-most) one.

+ +
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
+
+ +

The numbers -2147483648 and 2147483647 are the minimum and the maximum integers representable throught a 32bit signed number.

+ +

비트 논리 연산자

+ +

비트 논리 연산자는 다음과 같이 사용됩니다.

+ + + +

& (비트 AND)

+ +

비트 연산자 AND를 비트 쌍으로 실행합니다.

+ +

Performs the AND operation on each pair of bits. a AND b yields 1 only if both a and b are 1. The truth table for the AND operation is:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba AND b
000
010
100
111
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
+
+ +

Bitwise ANDing any number x with 0 yields 0. Bitwise ANDing any number x with -1 yields x.

+ +

| (비트 OR)

+ +

Performs the OR operation on each pair of bits. a OR b yields 1 if either a or b is 1. The truth table for the OR operation is:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba OR b
000
011
101
111
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
+
+ +

Bitwise ORing any number x with 0 yields x.

+ +

Bitwise ORing any number x with -1 yields -1.

+ +

^ (비트 XOR)

+ +

Performs the XOR operation on each pair of bits. a XOR b yields 1 if a and b are different. The truth table for the XOR operation is:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
aba XOR b
000
011
101
110
+ +
     9 (base 10) = 00000000000000000000000000001001 (base 2)
+    14 (base 10) = 00000000000000000000000000001110 (base 2)
+                   --------------------------------
+14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
+
+ +

Bitwise XORing any number x with 0 yields x.

+ +

Bitwise XORing any number x with -1 yields ~x.

+ +

~ (비트 NOT)

+ +

Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one's complement) of a. The truth table for the NOT operation is:

+ + + + + + + + + + + + + + + + +
aNOT a
01
10
+ +
 9 (base 10) = 00000000000000000000000000001001 (base 2)
+               --------------------------------
+~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
+
+ +

Bitwise NOTing any number x yields -(x + 1). For example, ~5 yields -6.

+ +

비트 시프트 연산자

+ +

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.

+ +

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.

+ +

<< (Left shift)

+ +

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.

+ +

For example, 9 << 2 yields 36:

+ +
     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
+
+ +

Bitwise shifting any number x to the left by y bits yields x * 2^y.

+ +

>> (Sign-propagating right shift)

+ +

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

+ +

For example, 9 >> 2 yields 2:

+ +
     9 (base 10): 00000000000000000000000000001001 (base 2)
+                  --------------------------------
+9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

Likewise, -9 >> 2 yields -3, because the sign is preserved:

+ +
     -9 (base 10): 11111111111111111111111111110111 (base 2)
+                   --------------------------------
+-9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
+
+ +

>>> (Zero-fill right shift)

+ +

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.

+ +

For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, 9 >>> 2 yields 2, the same as 9 >> 2:

+ +
      9 (base 10): 00000000000000000000000000001001 (base 2)
+                   --------------------------------
+9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
+
+ +

However, this is not the case for negative numbers. For example, -9 >>> 2 yields 1073741821, which is different than -9 >> 2 (which yields -3):

+ +
      -9 (base 10): 11111111111111111111111111110111 (base 2)
+                    --------------------------------
+-9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
+
+ +

예제

+ +

Flags and bitmasks

+ +

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, 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).

+ +

Suppose there are 4 flags:

+ + + +

These flags are represented by a sequence of bits: DCBA. When a flag is set, it has a value of 1. When a flag is cleared, it has a value of 0. Suppose a variable flags has the binary value 0101:

+ +
var flags = 5;   // binary 0101
+
+ +

This value indicates:

+ + + +

Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.

+ +

A bitmask is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:

+ +
var FLAG_A = 1; // 0001
+var FLAG_B = 2; // 0010
+var FLAG_C = 4; // 0100
+var FLAG_D = 8; // 1000
+
+ +

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:

+ +
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
+
+ +

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

+ +
// if we own a cat
+if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
+   // do stuff
+}
+
+ +

A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:

+ +
// if we own a bat or we own a cat
+if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
+   // do stuff
+}
+
+ +
// if we own a bat or cat
+var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
+if (flags & mask) { // 0101 & 0110 => 0100 => true
+   // do stuff
+}
+
+ +

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:

+ +
// yes, we own a cat and a duck
+var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
+flags |= mask;   // 0101 | 1100 => 1101
+
+ +

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:

+ +
// no, we don't have an ant problem or own a cat
+var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

+ +
// no, we don't have an ant problem, and we don't own a cat
+var mask = ~FLAG_A & ~FLAG_C;
+flags &= mask;   // 1101 & 1010 => 1000
+
+ +

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:

+ +
// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat
+// same thing for cats
+var mask = FLAG_B | FLAG_C;
+flags = flags ^ mask;   // 1100 ^ 0110 => 1010
+
+ +

Finally, the flags can all be flipped with the NOT operator:

+ +
// entering parallel universe...
+flags = ~flags;    // ~1010 => 0101
+
+ +

Conversion snippets

+ +

Convert a binary string to a decimal number:

+ +
var sBinString = "1011";
+var nMyNumber = parseInt(sBinString, 2);
+alert(nMyNumber); // prints 11, i.e. 1011
+
+ +

Convert a decimal number to a binary string:

+ +
var nMyNumber = 11;
+var sBinString = nMyNumber.toString(2);
+alert(sBinString); // prints 1011, i.e. 11
+
+ +

Automate Mask Creation

+ +

If you have to create many masks from some boolean values, you can automatize the process:

+ +
function createMask () {
+  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
+  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
+  return nMask;
+}
+var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
+var mask2 = createMask(false, false, true); // 4, i.e.: 0100
+var mask3 = createMask(true); // 1, i.e.: 0001
+// etc.
+
+alert(mask1); // prints 11, i.e.: 1011
+
+ +

Reverse algorithm: an array of booleans from a mask

+ +

If you want to create an array of booleans from a mask you can use this code:

+ +
function arrayFromMask (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  if (nMask > 0x7fffffff || nMask < -0x80000000) { throw new TypeError("arrayFromMask - out of range"); }
+  for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
+  return aFromMask;
+}
+
+var array1 = arrayFromMask(11);
+var array2 = arrayFromMask(4);
+var array3 = arrayFromMask(1);
+
+alert("[" + array1.join(", ") + "]");
+// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
+
+ +

You can test both algorithms at the same time…

+ +
var nTest = 19; // our custom mask
+var nResult = createMask.apply(this, arrayFromMask(nTest));
+
+alert(nResult); // 19
+
+ +

For didactic purpose only (since there is the Number.toString(2) method), we show how it is possible to modify the arrayFromMask algorithm in order to create a string containing the binary representation of a number, rather than an array of booleans:

+ +
function createBinaryString (nMask) {
+  // nMask must be between -2147483648 and 2147483647
+  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
+  return sMask;
+}
+
+var string1 = createBinaryString(11);
+var string2 = createBinaryString(4);
+var string3 = createBinaryString(1);
+
+alert(string1);
+// prints 00000000000000000000000000001011, i.e. 11
+
+ +

명세

+ + + + + + + + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}
{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}
{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}
+ +

브라우저 호환성

+ +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html new file mode 100644 index 0000000000..93146d63cf --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/operators_8d54701de06af40a7c984517cbe87b3e/index.html @@ -0,0 +1,395 @@ +--- +title: 할당 연산자 +slug: Web/JavaScript/Reference/Operators/Assignment_Operators +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +
{{jsSidebar("Operators")}}
+ +

할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.

+ +
{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}
+ + + +

개요

+ +

기본 할당연산자는 등호(=)로, 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 즉, x = y는 y의 값을 x에 할당힙니다. 다른 할당 연산자는 보통 표준 연산의 축약형으로, 다음 표에서 종류와 예시를 확인할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이름단축 연산자의미
할당x = yx = y
덧셈 할당x += yx = x + y
뺄셈 할당x -= yx = x - y
곱셈 할당x *= yx = x * y
나눗셈 할당x /= yx = x / y
나머지 연산 할당x %= yx = x % y
지수 연산 할당x **= yx = x ** y
왼쪽 시프트 할당x <<= yx = x << y
오른쪽 시프트 할당x >>= yx = x >> y
부호없는 오른쪽 시프트 할당x >>>= yx = x >>> y
비트 AND 할당x &= yx = x & y
비트 XOR 할당x ^= yx = x ^ y
비트 OR 할당x |= yx = x | y
+ +

할당

+ +

단순 할당 연산자는 값을 변수에 할당합니다. 할당 연산자는 할당의 결과값으로 평가됩니다. 할당 연산자를 연속해서 사용해, 다수의 변수에 하나의 값을 한꺼번에 할당할 수 있습니다. 예제를 참고하세요.

+ +

구문

+ +
연산자: x = y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  x = 5
+//  y = 10
+//  z = 25
+
+x = y     // x는 10
+x = y = z // x, y, z 모두 25
+
+ +

덧셈 할당

+ +

덧셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 더하고, 그 결과를 변수에 할당합니다. 두 피연산자의 자료형이 덧셈 할당 연산자의 행동을 결정합니다. 덧셈 연산자처럼 합 또는 연결이 가능합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "덧셈 연산자", "#Addition", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x += y
+의미: x = x + y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  foo = "foo"
+//  bar = 5
+//  baz = true
+
+
+// Number + Number -> 합
+bar += 2 // 7
+
+// Boolean + Number -> 합
+baz += 1 // 2
+
+// Boolean + Boolean -> 합
+baz += false // 1
+
+// Number + String -> 연결
+bar += 'foo' // "5foo"
+
+// String + Boolean -> 연결
+foo += false // "foofalse"
+
+// String + String -> 연결
+foo += 'bar' // "foobar"
+
+ +

뺄셈 할당

+ +

뺄셈 할당 연산자는 변수에서 오른쪽 피연산자의 값을 빼고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "뺄셈 연산자", "#Subtraction", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x -= y
+의미: x = x - y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  bar = 5
+
+bar -= 2     // 3
+bar -= "foo" // NaN
+
+ +

곱셈 할당

+ +

곱셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 곱하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "곱셈 연산자", "#Multiplication", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x *= y
+의미: x = x * y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  bar = 5
+
+bar *= 2     // 10
+bar *= "foo" // NaN
+
+ +

나눗셈 할당

+ +

나눗셈 할당 연산자는 변수를 오른쪽 피연산자로 나누고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나눗셈 연산자", "#Division", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x /= y
+의미: x = x / y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  bar = 5
+
+bar /= 2     // 2.5
+bar /= "foo" // NaN
+bar /= 0     // Infinity
+
+ +

나머지 연산 할당

+ +

나머지 연산 할당은 변수를 오른쪽 피연산자로 나눈 나머지를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나머지 연산자", "#Remainder", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x %= y
+의미: x = x % y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  bar = 5
+
+bar %= 2     // 1
+bar %= "foo" // NaN
+bar %= 0     // NaN
+
+ +

거듭제곱 할당

+ +

거듭제곱 할당 연산자는 변수를 오른쪽 피연산자만큼 거듭제곱한 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "거듭제곱 연산자", "#Exponentiation", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x **= y
+의미: x = x ** y
+
+ +

예제

+ +
// 다음과 같은 변수를 가정
+//  bar = 5
+
+bar **= 2     // 25
+bar **= "foo" // NaN
+ +

왼쪽 시프트 할당

+ +

왼쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 왼쪽으로 이동하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x <<= y
+의미: x = x << y
+
+ +

예제

+ +
var bar = 5; //  (00000000000000000000000000000101)
+bar <<= 2; // 20 (00000000000000000000000000010100)
+
+ +

오른쪽 시프트 할당

+ +

오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x >>= y
+의미: x = x >> y
+
+ +

예제

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>= 2;   // 1 (00000000000000000000000000000001)
+
+var bar -5; //    (-00000000000000000000000000000101)
+bar >>= 2;  // -2 (-00000000000000000000000000000010)
+
+ +

부호 없는 오른쪽 시프트 할당

+ +

부호 없는 오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}을 참고하세요.

+ +

구문

+ +
연산자: x >>>= y
+의미: x = x >>> y
+
+ +

예제

+ +
var bar = 5; //   (00000000000000000000000000000101)
+bar >>>= 2;  // 1 (00000000000000000000000000000001)
+
+var bar = -5; // (-00000000000000000000000000000101)
+bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
+ +

비트 AND 할당

+ +

비트 AND 할당 연산자는 양쪽 피연산자의 이진 표현을 AND 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은{{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}을 참고하세요.

+ +

구문

+ +
연산자: x &= y
+의미: x = x & y
+
+ +

예제

+ +
var bar = 5;
+// 5:     00000000000000000000000000000101
+// 2:     00000000000000000000000000000010
+bar &= 2; // 0
+
+ +

비트 XOR 할당

+ +

비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.

+ +

구문

+ +
연산자: x ^= y
+의미: x = x ^ y
+
+ +

예제

+ +
var bar = 5;
+bar ^= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

비트 OR 할당

+ +

비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.

+ +

문법

+ +
연산자: x |= y
+의미: x = x | y
+
+ +

예제

+ +
var bar = 5;
+bar |= 2; // 7
+// 5: 00000000000000000000000000000101
+// 2: 00000000000000000000000000000010
+// -----------------------------------
+// 7: 00000000000000000000000000000111
+
+ +

예제

+ +

다른 할당 연산자를 갖는 왼쪽 피연산자

+ +

드물게, 할당 연산자(예: x += y)와 그 의미를 나타낸 표현(x = x + y)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.

+ +
a[i++] += 5         // i는 한 번만 평가됨
+a[i++] = a[i++] + 5 // i는 두 번 평가됨
+
+ +

명세

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/javascript/reference/statements/switch/index.html b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..4fe127b7db --- /dev/null +++ b/files/ko/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,122 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +tags: + - JavaScript + - Keyword + - Reference +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +
{{jsSidebar("Statements")}}
+ +

default 키워드는 {{jsxref("Statements/switch", "switch")}} 구문과 {{jsxref("Statements/export", "export")}} 구문에서 사용할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
+ + + +

구문

+ +

{{jsxref("Statements/switch", "switch")}} 구문 내에서는 다음과 같이 사용합니다.

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

{{jsxref("Statements/export", "export")}} 구문 내에서는 다음과 같이 사용합니다.

+ +
export default nameN
+ +

설명

+ +

세부사항을 보려면,

+ + + +

예제

+ +

switch에서 default 사용

+ +

아래 예제에서 expr 이 "오렌지" 또는 "사과"일 때, 프로그램은 값을 "오렌지" 또는 "사과"와 일치시키고 해당 명령문을 실행합니다. 기본(default) 키워드는 다른 경우에 도움이 되며 연관된 명령문을 실행합니다.

+ +
switch (expr) {
+  case '오렌지':
+    console.log('오렌지는 1000원입니다.');
+    break;
+  case '사과':
+    console.log('사과는 500원입니다.');
+    break;
+  default:
+    console.log('죄송합니다. ' + expr + '의 재고가 다 떨어졌습니다.');
+}
+ +

export에서 default 사용

+ +

단일 값을 내보내거나 모듈의 기본 값이 필요한 경우, 기본 내보내기를 사용할 수 있습니다.

+ +
// module "my-module.js"
+let cube = function cube(x) {
+  return x * x * x;
+};
+export default cube;
+ +

다른 스크립트에서 가져오는 건 간단합니다.

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

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}}
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}}
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
+ +

브라우저 호환성

+ + + +

{{Compat("javascript.statements.default")}}

+ +

같이 보기

+ + diff --git a/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..e5e70ed9fa --- /dev/null +++ b/files/ko/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,87 @@ +--- +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 +translation_of_original: Using_XPath +--- +

XPath은 XML 문서의 위치 정보를 위한 언어입니다. +

이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) DOM Level 3 XPath에 설명되어 있습니다. +

이 문서는 XPath 자체를 설명하지 않습니다. 기술에 대해 익숙하지 않다면 W3Schools XPath tutorial을 참고하십시오. +

+

Wrapper function

+

다음의 함수는 주어진 XML 노드의 XPath 표현을 평가하는데 사용할 수 있습니다. 첫 번째 전달인자는 DOM 노드 혹은 Document 객체이고, 두 번째 전달인자는 XPath 표현에 대한 문자열 정의입니다. +

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

이 함수는 new XPathEvaluator()와 같이 사용할 수 있습니다. 이것의 생성자는 Mozilla에 정의되어 있습니다. 다른 브라우저에서 사용될 웹페이지에서 이 스크립트가 사용된다면 다음과 같이 new XPathEvaluator()를 호출하면 됩니다: +

+
  // XPathEvaluator is implemented on objects that implement Document
+  var xpe = aNode.ownerDocument || aNode;
+
+

이 예에서 XPathNSResolver를 생성하는 것은 다음과 같이 간략화할 수 있습니다: +

+
  var nsResolver = xpe.createNSResolver(xpe.documentElement);
+
+

그러나 createNSResolver는 XPath 표현에 대한 네임스페이스가 정해져 있고, 그러한 것들이 쿼리를 보낼 문서의 내용과 일치하여야 합니다. 그렇지 않다면 당신 자신만의 XPathNSResolver를 수행하는 부분을 만들어야 합니다. +

(Parsing and serializing XML에서 설명하는 것과 같은) DOM 트리안에 로컬이나 원격 XML 파일을 읽기 위해 XMLHttpRequest를 사용한다면, evaluateXPath()의 첫 번째 전달인자는 req.responseXML가 되어야 합니다. +

+

사용예

+

다음과 같은 XML 문서가 있다고 가정합니다.(How to Create a DOM tree와 Parsing and serializing XML을 참조하십시오.): +

+
<?xml version="1.0"?>
+<people>
+  <person first-name="eric" middle-initial="H" last-name="jung">
+    <address street="321 south st" city="denver" state="co" country="usa"/>
+    <address street="123 main st" city="arlington" state="ma" country="usa"/>
+  </person>
+
+  <person first-name="jed" last-name="brown">
+    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
+    <address street="123 west st" city="seattle" state="wa" country="usa"/>
+    <address street="321 south avenue" city="denver" state="co" country="usa"/>
+  </person>
+</people>
+
+

XPath 표현으로 문서에 "query"를 보낼 수 있습니다. 비록 DOM 트리를 탐색하는 것이 비슷한 결과를 가져오더라도 XPath를 사용하는 것이 더 빠르고 강력합니다. 만일 id attribute를 사용한다면 document.getElementById()를 사용해도 여전히 강력합니다. 하지만, XPath 만큼 강력하지 않습니다. 몇 가지 예제가 있습니다: +

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

정보

+ + +

{{ languages( { "fr": "fr/Utilisation_de_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath" } ) }}

diff --git a/files/ko/consistent_list_indentation/index.html b/files/ko/consistent_list_indentation/index.html deleted file mode 100644 index 675b5127f3..0000000000 --- a/files/ko/consistent_list_indentation/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Consistent List Indentation -slug: Consistent_List_Indentation -tags: - - CSS - - Guide - - NeedsUpdate -translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation ---- -
{{CSSRef}}
- -

가장 흔하게 리스트에 적용되는 스타일 변경은 들여쓰기(indentation)거리의 변경입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.

- -

왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.

- -

리스트 만들기

- -

먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.

- -

Figure 1

- -

빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.

- -

Figure 2

- -

이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <ul>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.

- -

Figure 3

- -

여기서, 푸른 점선 경계선은 <ul>엘리먼트의 내용물 지역의 경계를 보여줍니다. <ul>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.

- -

이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.

- -

Figure 4

- -

보여지는 것으론, 마커들은 <ul>의 내용물-지역의바깥 에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <li>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <lt>의 내용물-지역의 밖에 매달려 있으나 여전히 <li>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.

- -


- 바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <li>엘리먼트에 지정된 보더밖에 놓이며, list-sytle-position값으로 outside를 취하게 되는 것입니다. 만일 값이 inside로 바뀌게 되면, 마커들은, 비록 <li>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <li> 안쪽으로 옯겨지게 됩니다.

- -

두번 들여쓰기

- -

그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.

- -
ul, li {margin-left: 0; padding-left: 0;}
- -

만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.

- -

이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.

- -
    -
  1. 각 <li> 엘리먼트에 왼쪽 마진을 준다.
    2. -
  2. <ul> 엘리먼트에 왼쪽 마진을 준다.
    3. -
  3. <ul> 엘리먼트에 왼쪽 패딩을 준다.
    4. -
- -

결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.

- -

이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <ul>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <ul> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <ul> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.

- -

Figure 5

- -

반면, Gecko는 <ul> 엘리먼트에 대해서 40픽셀의 왼쪽패딩 을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.

- -

Figure 6

- -

보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <li> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <ul>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <ul> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.

- -

일관성 찾기

- -

모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <ul> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩둘다 지정해야 한다는 것입니다. 이런 목적으로 <li> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:

- -
ul {margin-left: 0; padding-left: 40px;}
- -

만약, 익스플로러/오페라 모델을 따르길 원한다면:

- -
ul {margin-left: 40px; padding-left: 0;}
- -

라고 쓰면 됩니다.

- -

물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 1.25em로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.

- -
ul {margin-left: 0; padding-left: 0;}
- -

하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 body가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.

- -

결론

- -

결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.

- -

권장 사항

- - - -
-

Original Document Information

- - -
diff --git a/files/ko/css3_columns/index.html b/files/ko/css3_columns/index.html deleted file mode 100644 index 47d363969c..0000000000 --- a/files/ko/css3_columns/index.html +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: CSS 다단 레이아웃 사용 -slug: CSS3_Columns -tags: - - Advanced - - CSS - - Guide - - Multi-columns -translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts ---- -

{{CSSRef("CSS Multi-columns")}}

- -

CSS 다단(multi-column) 레이아웃은 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장합니다. 사람들은 줄이 너무 긴 경우 텍스트 읽는데 어려움이 있습니다; 한 줄 끝에서 다음 줄 시작까지 눈에 옮기기 너무 긴 경우, 어느 줄을 읽고 있었는 지를 잊어버립니다. 그러므로, 큰 화면을 최대로 쓰기 위해서는, 너비가 제한된 텍스트 단을 나란히 놓아야 합니다, 바로 신문이 하는 것처럼.

- -

불행하게도 이는 CSS 및 HTML로 하기는 고정 위치에서 강제 단 바꿈 또는 텍스트에 허용되는 마크업의 심한 제한 혹은 위대한(heroic) 스크립팅 사용 없이는 불가능합니다. 이 제한은 전통 블록 레이아웃 모드를 확장하는 새로운 CSS 속성 추가로 해결됐습니다.

- -

단 사용

- -

단 수와 너비

- -

두 CSS 속성은 많은 단을 보일 지 여부와 방법을 제어합니다: {{ Cssxref("column-count") }} 및 {{ Cssxref("column-width") }}.

- -

column-count 속성은 단 수를 특정한 수로 설정합니다. 가령,

- -

예 1

- -

HTML

- -
-
<div id="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
-
- -

CSS

- -
#col {
--moz-column-count: 2;
--webkit-column-count: 2;
-column-count: 2;
-}
-
-
- -

결과

- -

두 단에 콘텐츠를 표시합니다 (다단 준수 브라우저를 사용 중인 경우):

- -

{{EmbedLiveSample('column_count','700px', '', '')}}

- -

column-width 속성은 희망 최소 단 너비를 설정합니다. column-count도 설정되지 않은 경우, 그러면 브라우저는 자동으로 이용 가능한 너비에 맞게 많은 단을 만듭니다.

- -

예 2

- -

HTML

- -
-
<div id="wid">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
-
- -

CSS

- -
#wid {
--moz-column-width: 100px;
--webkit-column-width: 100px;
-column-width: 100px;
-}
-
-
- -

결과

- -

{{ EmbedLiveSample('column_width','700px', '', '') }}

- -

정확한 세부사항은 CSS3 스펙에 설명되어 있습니다.

- -

다단 블록에서, 콘텐츠는 필요에 따라 한 단에서 다음 단으로 자동으로 흐릅니다. 모든 HTML, CSS 및 DOM 기능은 단 내에서 지원됩니다, 편집 및 인쇄 중일 때.

- -

columns 단축

- -

대부분, 웹 디자이너는 두 CSS 속성({{ cssxref("column-count") }} 또는 {{ cssxref("column-width") }}) 중 하나를 사용합니다. 이러한 속성에 대한 값이 겹치지 않기에, 종종 {{ cssxref("columns") }} 단축을 쓰는 게 편리합니다. 가령.

- -

column-width:12em CSS 선언은 다음으로 대체될 수 있습니다:

- -

예 3

- -

HTML

- -
-
<div id="col_short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
-
- -

CSS

- -
#col_short {
--moz-column-width: 12em;
--moz-columns: 12em;
--webkit-columns: 12em;
-columns: 12em;
-}
-
-
- -

결과

- -

{{EmbedLiveSample('column_short','700px', '', '')}}

- -

column-count:4 CSS 선언은 다음으로 대체될 수 있습니다:

- -

예 4

- -

HTML

- -
-
<div id="columns_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
-
- -

CSS

- -
#columns_4{
--moz-column-count: 4;
--moz-columns: 4;
--webkit-columns: 4;
-columns: 4;
-}
-
-
- -

결과

- -

{{ EmbedLiveSample('four_columns','700px', '', '') }}

- -

column-width:8em 및 column-count:12 두 CSS 선언은 다음으로 대체될 수 있습니다:

- -

예 5

- -

HTML

- -
-
<div id="columns_12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
-
- -

CSS

- -
#columns_12 {
--moz-columns: 12 8em;
--webkit-columns: 12 8em;
-columns: 12 8em;
-}
-
-
- -

결과

- -

{{ EmbedLiveSample('twelve_columns','700px', '', '') }}

- -

높이 균형

- -

CSS3 Column 스펙은 단 높이는 균형을 이루어야 함을 요구합니다: 즉, 브라우저는 각 단의 콘텐츠 높이가 거의 같도록 자동으로 최대 단 높이를 설정합니다. Firefox는 이를 행합니다.

- -

그러나, 일부 상황에서는 최대 단 높이를 명시해서 설정하는 것도 유용하고 그 다음 첫 단에서 시작하여 필요한 만큼 많은 단을 생성하며, 어쩌면 오른쪽으로 넘치는 콘텐츠를 배치합니다. 따라서, 높이가 제한되는 경우, 다단 블록에 CSS {{ cssxref("height") }} 또는 {{ cssxref("max-height") }} 속성을 설정하여, 각 단은 그 높이 및 더 이상 새로운 단을 추가하기 전까지 늘 수 있습니다. 이 모드 역시 레이아웃에 대해서 훨씬 더 효율이 좋습니다.

- -

단 간격

- -

단 사이 간격이 있습니다. 기본 권장값은 1em입니다. 이 크기는 {{ Cssxref("column-gap") }} 속성을 다단 블록에 적용하여 바꿀 수 있습니다:

- -

예 6

- -

HTML

- -
-
<div id="column_gap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
-
- -

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

결과

- -

{{ EmbedLiveSample('col_gap','700px', '', '') }}

- -

우아한 강등

- -

단 속성은 단을 지원하지 않는 브라우저에 의해 그냥 무시됩니다. 따라서 비지원 브라우저에서는 1단으로 표시하고 지원하는 브라우저에서는 다단을 사용하는 레이아웃을 만드는 게 그런 대로 쉽습니다.

- -

모든 브라우저가 이러한 접두어 없는 속성을 지원하는 것은 아님을 주의하세요. 오늘날 대부분의 브라우저에서 이 기능을 사용하기 위해서, 각 속성은 세 번({{ property_prefix("-moz") }} 접두어로 한 번, {{ property_prefix("-webkit") }} 접두어로 한 번 그리고 접두어 없이 한 번) 작성되어야 합니다.

- -

결론

- -

CSS3 단(column)은 웹 개발자가 화면 영역(real estate)을 최대한 쓸 수 있게 돕는 원시(primitive) 레이아웃입니다. 상상력이 풍부한 개발자는 많은 단 사용법을 찾을 지도 모릅니다, 특히 자동 높이 균형 기능 가지고.

- -

참조

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

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

- -

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

- -

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

- -

Image:Dimensions-offset.png

- -

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

- -

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

- -

Image:Dimensions-client.png

- -

컨텐트는 얼마나 크나요?

- -

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

- -

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

- -

참고자료

- -

MSDN: Measuring Element Dimension and Location

diff --git a/files/ko/dhtml/index.html b/files/ko/dhtml/index.html deleted file mode 100644 index 1eada4d952..0000000000 --- a/files/ko/dhtml/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: DHTML -slug: DHTML -tags: - - DHTML -translation_of: Glossary/DHTML ---- -
DHTML은 "dynamic HTML"을 줄인 것이다. DHTML은 일반적으로 Flash나Java 플러그인을 사용하여 다루어지지 않는 역동적 웹페이지 뒤의 코드를 참조하는데 사용된다. 복합 기능성을 모은 용어는 웹 개발자가 HTML, CSS, Document Object Model, 그리고 JavaScript를 사용하는 것을 가능하게 한다.
- - - - -
-

Documentation

-
DOM Client Object Cross-Reference -
이 client object reference는 DHTML에 사용하는 공통된 대상에 대한 정보를 제공한며, 각 브라우저 안에서 어떤 특성이 제공 되는지 당신이 결정하는 것을 돕기로 계획되었다 . -
-
DHTML Demonstrations Using DOM/Style -
Document Object Model (DOM) 데모, Cross-browser 위젯, DOM에 관해 배우기 위한 추가적 자원. -
-
Working around the Firefox 1.0.3 DHTML regression -
주의. 이 글이 다루고 있는 이 주제는 Firefox 1.0.4 release에서 고쳐졌고, 이 문서는 1.0.3 version의 브라우저에에 적용됨. -
-

View All... -

-		 -

커뮤니티

-
  • Mozilla 포럼 보기... -
-

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} -

-

도구

- -

관련 주제

-
AJAX, CSS, DOM, HTML, JavaScript -
-
-

Categories -

Interwiki Language Links -


-

{{ 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 deleted file mode 100644 index 800e5979df..0000000000 --- a/files/ko/dom_improvements_in_firefox_3/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: DOM improvements in Firefox 3 -slug: DOM_improvements_in_Firefox_3 -tags: - - DOM - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/DOM_improvements ---- -

{{ Fx_minversion_header(3) }}

-

Firefox 3에서는 Document Object Model (DOM)에 있어 다양한 개선이 있었으며, 특히 다른 브라우저들에서 제공되는 DOM의 확장을 지원한다는 면에서 특히 그러합니다. 본 글은 이러한 개선 사항들과 세부 문서에 대한 링크들로 구성되어 있습니다.

- -

참고

- -
-  
-

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

diff --git a/files/ko/drawing_text_using_a_canvas/index.html b/files/ko/drawing_text_using_a_canvas/index.html deleted file mode 100644 index 2c789e85a4..0000000000 --- a/files/ko/drawing_text_using_a_canvas/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: 텍스트 그리기 -slug: Drawing_text_using_a_canvas -tags: - - HTML - - 'HTML:Canvas' - - NeedsContent -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

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

-
- -

텍스트 그리기

- -

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

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

fillText 예제

- -

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

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

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

- -

strokeText 예제

- -

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

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

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

- -

텍스트 스타일 적용하기

- -

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

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

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

- -

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

- -

textBaseline 예제

- -

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

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

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

- -

어드밴스드 텍스트 측정

- -

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

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

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

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

Gecko 사용시 주의점

- -

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

- -

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

diff --git a/files/ko/firefox_1.5_for_developers/index.html b/files/ko/firefox_1.5_for_developers/index.html deleted file mode 100644 index fa1dba1cc6..0000000000 --- a/files/ko/firefox_1.5_for_developers/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -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 ---- -

Firefox 1.5

-

Firefox 1.5를 출시하여 내려 받기할 수 있습니다. Gecko 1.8 엔진에 기반을 둔 이 최신 버전은 이미 최고인 클래스 표준 지원 개선과 다음 세대 웹 어플리케이션에서 가능한 새 기능을 제공합니다. Firefox 1.5는 CSS2와 CSS3 지원 개선, 많은 DHTML, JavaScript, DOM 향상은 물론 SVG 1.1과 <canvas>, XForms, XML 이벤트를 통한 스크립팅과 프로그래밍이 가능한 2D 그래픽스 API를 크게 다룹니다.

-

Firefox 1.5는 http://www.mozilla.com/firefox/ 에서 내려받을 수 있습니다.

-

개발자 도구

-

개발자를 도울 수 있는 여러 도구와 브라우저 확장기능들이 Firefox 1.5를 지원합니다.

- -

주의: 확장기능 약간은 현재 Firefox 1.5를 지원하지 않아 자동으로 사용불가능합니다.

-

개요

-

Firefox 1.5의 새 기능:

-

웹 사이트 개발자와 어플리케이션 개발자

-
-
- SVG In XHTML Introduction
-
- XHTML 페이지에서 SVG를 쓰는 법과 정규 XHTML을 스크립트하는 방식과 같은 방식으로 그림을 조작하는데 JavaScript과 CSS를 쓰는 법을 배웁니다. 또한 Firefox의 SVG 구현 상태와 알려진 문제 정보를 알아보려면 SVG in Firefox를 보세요.
-
-
-
- Drawing Graphics with Canvas
-
- 새로운 <canvas> 태그 정보와 Firefox에서 그래프와 다른 개체 그리는 법을 알아봅니다.
-
-
-
- CSS3 Columns
-
- CSS3에 새로 제안한 자동 다단 텍스트 layout 지원 정보를 알아봅니다.
-
-
-
- Using Firefox 1.5 caching
-
- bfcache 정보와 뒤로 가기와 앞으로 가기 항해 속도를 높이는 법을 알아봅니다.
-
-

XUL 개발자와 확장기능 개발자

-
-
- Building an Extension
-
- 이 입문서는 당신이 Firefox에 가장 기본이 될만한 확장기능을 만드는데 필요한 과정을 통과하도록 합니다. 또한 새 확장기능을 만들기를 훨씬 더 쉽게 하는 1.5의 확장기능 관리자의 새로운 기능을 실제로 보이는 another tutorial on MozillaZine knowledge base를 보세요.
-
-
-
- XPCNativeWrapper
-
- XPCNativeWrapper는 safe to access from privileged code하도록 개체를 싸는(wrap up) 방법입니다. Firefox 1.5 (Gecko 1.8)에서 시작하여 약간 바뀐 behavior를 통해 모든 Firefox 버전에서 쓸 수 있습니다.
-
-
-
- Preferences System
-
- 더 적은 JavaScript 코드를 써서 더 쉽게 선택사항 창을 만들게 하는 새 위젯을 알아봅니다.
-
-
-
- International characters in XUL JavaScript
-
- XUL JavaScript 파일은 이제 ASCII 아닌 문자도 포함할 수 있습니다.
-
-
-
- Tree API changes
-
- XUL <tree> 요소에 접근하기 위한 인터페이스가 바뀌었습니다.
-
-
-
- XUL Changes for Firefox 1.5
-
- XUL 바뀐 점 요약. 또한 Adapting XUL Applications for Firefox 1.5를 보세요.
-
-
-
- 네트워킹 관련 바뀐 점
-
- -

새 최종 사용자 기능

-

사용자 Experience

- -

보안과 사생활

- -

열린 웹 표준 지원

-

Firefox는 시종일관 크로스 플랫폼을 구현하도록 기업을 계속 이끄는 웹 표준을 지원합니다.

- -

Firefox 1.5는 다음 데이터 전송 프로토콜(HTTP, FTP, SSL, TLS, 그리고 나머지)과 여러 언어 문자 데이터(Unicode), 그래픽스(GIF, JPEG, PNG, SVG, 그리고 나머지), 가장 유명한 스크립팅 언어의 최근 버전인 JavaScript 1.6을 지원합니다.

-

Firefox 1.0부터 바뀐 점

-

2004년 11월 9일 처음 출시된 뒤로 Firefox에 바뀐 점이 많습니다. Firefox는 많은 새로운 기능 보탬과 버그 고침과 함께 향상됐습니다. Deer Park(Firefox 1.5의 코드명)와 Firefox 출시 노트는 Firefox 각 출시본의 바뀐 점에 관한 훌륭한 정보원입니다.

- -

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

diff --git a/files/ko/firefox_2_for_developers/index.html b/files/ko/firefox_2_for_developers/index.html deleted file mode 100644 index e39f256625..0000000000 --- a/files/ko/firefox_2_for_developers/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Firefox 2 for developers -slug: Firefox_2_for_developers -translation_of: Mozilla/Firefox/Releases/2 ---- -

Firefox 2 새로운 기능

-

Firefox 2는 다양하고 새로운 기능들을 소개하고 있습니다. 이 문서는 이러한 새로운 기능들을 소개하고 자세한 정보를 제공하고 있습니다. -

-

웹 사이트 및 응용프로그램 개발자

-
Microsummaries -
Microsummaries는 자동으로 업데이트 될만한 웹 페이지 내 작은 정보를 말합니다. 웹 사이트 개발자들은 북마크나 페이지 제목에 이 정보가 자동으로 업데이트 될 수 있도록 제공할 수 있습니다. 예를 들어, 특정 회사 주가를 보여 주는 페이지에서 주가를 Microsummaries로 보여 줄 수 있습니다. -
-
Microsummary 만들기 -
Microsummary 생성기를 만들고 활용하는 방법을 알려 드립니다. -
-
Microsummary XML grammar reference -
Microsummary 생성기를 만드는 데 쓰이는 XML 문법 참조 문서 -
-
OpenSearch support -
Firefox 2는 OpenSearch 검색 엔진 포맷을 지원합니다. -
-
MozSearch 플러그인 만들기 -
Firefox 2는 OpenSearch 기반 검색 플러그인 포맷인 MozSearch를 지원하지만 내부 사용 목적입니다. -
-
검색 플러그인 만들기 -
MozSearch를 이용하여 검색 플러그인 및 자동 완성 기능을 제공 하는 방법을 알려드립니다. -
-
자바스크립트 1.7 지원 -
Firefox 2는 자바스크립트 1.7을 지원합니다. 여기에는 let, destructuring assignment, generators and iterators, array comprehensions 등의 기능이 추가되었습니다. -
-
WHATWG Client-side session and persistent storage|WHATWG 클라이언트 세션 저장 기능 -
클라이언트 세션 저장 기능은 클라이언트에서 구조화된 데이터를 저장하거나 사용할 수 있도록 해 주는 새로운 기능입니다.
-
SVG 기능 -
Firefox 2는 <textPath> 요소를 구현하고 이전에 지원하지 않은 속성 지원을 더해 Scalable Vector Graphics (SVG) 지원이 향상됩니다. -
-
Controlling spell checking in HTML forms -
Firefox 2는 text area와 text field에서 인라인 철자 검사 지원을 포함합니다. 이 문서는 각 폼 요소에 철자 검사를 켜고 끄는 HTML 작성법을 설명합니다. -
-
Security in Firefox 2 -
Firefox 2는 보안 프로토콜이 기본값으로 가능하게 바뀌었습니다. -
-

XUL과 개발자들을 위한 확장

-
Updating extensions for Firefox 2 -
기존 확장 기능이 Firefox 2에서 작동하게 하는 법을 다룹니다. -
-
Session store API -
Firefox에서 세션을 넘나들며 저장 및 복구되는 항목에 기여하기. -
-
Feed content access API -
개발자가 RSS와 Atom 피드에 접근 및 구문해석하게 하는 API. -
-
SAX support -
이벤트 기반 XML 파서 API. -
-
Adding search engines from web pages -
자바스크립트는 OpenSearch 또는 Sherlock 포맷으로 작성된 검색 엔진 플러그인을 설치하도록 Firefox 에게 지시할 수 있습니다. -
-
Adding phishing protection data providers -
안전한 브라우징 시스템을 위해 추가 데이터 프로바이더를 추가하여 Firefox의 피싱 방지를 향상이 가능합니다. -
-
Adding feed readers to Firefox -
웹 기반이든 응용프로그램이든 새 피드 리더를 Firefox에 추가할 수 있습니다. -
-
Storage -
Firefox 2는 sqlite 기반 데이터베이스 아키텍쳐인 mozStorage 를 도입했습니다. -
-
Theme changes in Firefox 2 -
Firefox 2에서 작동하도록 기존 테마를 업데이트하는 데 필요한 변화를 다룹니다. -
-

일반 사용자 기능

-
Firefox 2는 여러분의 온라인 사용성을 전보다 더 안전하고 편리하게 하는 개선된 보안 기능과 함께 이전 버전처럼 깔끔한 사용자 인터페이스를 향상시킨 판을 제공합니다. -
-

사용성 증대 기능

- -

개인 정보 및 보안

- -{{ 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 deleted file mode 100644 index 2431607551..0000000000 --- a/files/ko/firefox_3.5_for_developers/index.html +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Firefox 3.5 for developers -slug: Firefox_3.5_for_developers -translation_of: Mozilla/Firefox/Releases/3.5 ---- -

Firefox 3.5은 넓은 범위의 향상된 웹 표준을 지원하는 것을 포함한 새로운 여러 가지 기능을 보여줍니다. 이 문서에는 향상된 부분 중 주된 부분에 대한 문서의 링크를 제공합니다.

-

Firefox 3.5에서 개발자를 위한 새로운 부분

-

웹 사이트와 웹 애플리케이션 개발자를 위한 부분

-

HTML 5 지원

-
-
- Firefox에서 오디오와 비디오 사용
-
- Firefox 3.5 에는 HTML 5 의 audio와 video 요소가 추가되었습니다.
-
- Firefox에서의 오프라인 자원
-
- Firefox 3.5 에서는 이제 HTML 5 의 오프라인 자원 부분을 모두 지원합니다.
-
- 드래그 앤 드롭
-
- HTML 5 의 드래그 앤 드롭 API는 웹사이트에서의 드래그 앤 드롭을 지원합니다. 또한 확장기능과 모질라 기반 애플리케이션에서 사용되는 간단한 API도 제공합니다.
-
-

CSS 변경점

-
-
- Downloadable 다운로드 할 수 있는 폰트 지원 fonts support
-
- 새로운 {{ cssxref("@font-face") }} @rule 은 웹페이지에서 폰트를 다운로드 할 수 있게 합니다. 그래서 이 CSS가 적용된 사이트는 페이지를 만든 사람 의도대로 보여줄 수 있습니다.
-
- CSS media queries
-
- Firefox 3.5 에서는 CSS media query를 지원합니다. 이것은 미디어 기반의 스타일 시트를 이용할 수 있게 합니다.
-
- {{ cssxref(":before") }} 와 {{ cssxref(":after") }} 가 CSS 2.1에 추가되었습니다.
-
- :before 와 :after 모조요소(pseudo-elements)는 CSS 2.1의 position, float, list-style-*, 그리고 특정 display 속성에 추가되었습니다.
-
- opacity
-
- 표준 opacity 속성이 생겨서 모질라 확장 CSS인 -moz-opacity가 없어졌습니다.
-
- text-shadow
-
- 텍스트나 텍스트 꾸밈요소에 그림자 효과를 적용할 수 있는 text-shadow 속성이 지원됩니다.
-
- word-wrap
-
- 새로 지원되는 속성인 word-wrap은 한 줄에 띄어쓰기 되지 않은 긴 문자열이 있을 때, 넘쳐 보이지 않게 하기 위해 이 문자열을 중간에서 끊을 지 정합니다.
-
- -moz-box-shadow
-
- -moz-border-image
-
- -moz-column-rule
-
- -moz-column-rule-width
-
- -moz-column-rule-style
-
- -moz-column-rule-color
-
- Firefox 3.5에서는 CSS에 추가적으로 모질라 확장 CSS를 지원합니다.
-
- -moz-nativehyperlinktext 색상 값
-
- 이 새 색상값은 시스템 기본 하이퍼링크(hyperlink) 색상을 돌려줍니다.
-
- 새로운 -moz-window-shadow 와 -moz-system-metric(mac-graphite-theme) 속성
-
- These new CSS properties were added to facilitate theming.
-
- -moz-appearance 의 새로운 값
-
- -moz-win-glass 와 -moz-mac-unified-toolbar 값이 -moz-appearance 에 추가되었습니다.
-
- Using CSS transforms
-
- Firefox 3.5 supports CSS transforms.  See -moz-transform and -moz-transform-origin for details.
-
- :nth-child
-
- :nth-last-child
-
- :nth-of-type
-
- :nth-last-of-type
-
- :first-of-type
-
- :last-of-type
-
- :only-of-type
-
- 위의 선택자들 모두가 Firefox 3.5 에 새로 추가되었습니다.
-
-

DOM 변경점

-
-
- localStorage
-
- Firefox 3.5 에서는 웹 애플리케이션이 클라이언트 로컬에 데이터를 저장하는 방법을 제공해주는 웹 스토리지 localStorage 속성이 추가되었습니다.
-
- DOM workers 사용
-
- Firefox 3.5 에서는 웹 애플리케이션이 손쉽게 멀티스레드를 지원할 수 있게 해주는 DOM workers가 지원됩니다.
-
- geolocation 사용
-
- Firefox 3.5 에서는 Geolocation API를 지원합니다. 위치 정보 제공자가 설치되어 있고 활성화되어 있다면, 이 API는 웹 애플리케이션이 사용자의 현재 위치 정보를 얻을 수 있게 해줍니다.
-
- Locating DOM elements using selectors
-
- The selectors API allows querying a document to locate the elements that match a given selection rule.
-
- 마우스 제스쳐 이벤트
-
- Firefox 3.5 에서는 트랙패드를 강하게 치는 등의 마우스 제스쳐 이벤트를 지원합니다.
-
- NodeIterator 객체
-
- NodeIterator 객체는 DOM 하위 트리의 노드들을 반복(iterating)할 수 있도록 해줍니다.
-
- The MozAfterPaint event
-
- This new DOM event is sent after painting updates in windows.
-
- The MozMousePixelScroll event
-
- This new DOM event allows detection of pixel-based mouse scroll wheel events instead of line-based scroll events.
-
-

JavaScript 변경점

-
-
- Object.getPrototypeOf()
-
- 이 새로운 메소드는 특정 객체의 prototype을 반환합니다.
-
- 자체 JSON 사용
-
- Firefox 3.5 에는 자체에서 지원하는 JSON 객체가 있습니다.
-
- String 객체에 trim 메소드 추가
-
- 이제 String 객체에는 trim(), trimLeft(), trimRight() 메소드가 있습니다.
-
-

Networking

-
-
- Cross-site access controls for HTTP
-
- 서버에서 지원한다면 Firefox 3.5에서는 XMLHttpRequest를 이용해 만들어진 것을 포함한 HTTP 요청을 다른 도메인에 하는 것이 가능해졌습니다.
-
- Progress events for XMLHttpRequest
-
- 요청에 대한 진행상황을 살펴볼 수 있는 확장을 동작시키면 진행상황 이벤트를 이용할 수 있습니다.
-
- 향상된 동기화(Synchronous) XMLHttpRequest 지원
-
- DOM Timeout 과 Input Events 는 동기화 XMLHttpRequest로 인해 사용하지 않게 되었습니다.
-
- Controlling DNS prefetching
-
- 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.
-
-

Canvas 변경점

-
-
- canvas 요소에서의 HTML 5 텍스트 API
-
- Canvas 요소가 HTML 5 텍스트 API를 지원합니다.
-
- canvas에서 그림자 효과
-
- Canvas 그림자 효과가 지원됩니다.
-
- createImageData()
-
- canvas 메소드 createImageData() 가 지원됩니다. 이 메소드는 ImageData 객체를 코드로 지정해 생성할 수 있게 해줍니다. 이렇게 해서 ImageData 객체가 생성되는 것을 막아 다른 ImageData 메소드의 작동 속도를 향상시길 수 있습니다.
-
- moz-opaque attribute
-
- Added the moz-opaque 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.
-
-

New SVG features

-
-
- Applying SVG effects to HTML content
-
- You can now apply SVG effects to HTML and XHTML content; this article describes how.
-
-

Miscellaneous new features

-
-
- ICC color correction in Firefox
-
- Firefox 3.5 now supports ICC color correction for tagged images.
-
- The defer attribute is now supported on script elements
-
- This attribute indicates to the browser that it may choose to continue to parse and render the page without waiting for the script to finish executing.
-
-

그 외 향상된 점들

- -

XUL과 애드온 개발자를 위한 부분

-

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.5, which offers a helpful overview of what changes may affect your extension.

-

New components and functionality

-
-
- Supporting private browsing mode
-
- 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.
-
- Security changes in Firefox 3.5
-
- This article covers security-related changes in Firefox 3.5.
-
- Theme changes in Firefox 3.5
-
- This article covers theme-related changes in Firefox 3.5.
-
- Monitoring WiFi access points
-
- 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.
-
-

Notable changes and improvements

- -

사용자들을 위한 변경점

-

User experience

-
-
- Location aware browsing
-
- 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.
-
- Open audio and video support
-
- 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.
-
- Local data storage
-
- 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.
-
-

Security and privacy

-
-
- Private Browsing
-
- 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.
-
- Better privacy controls
-
- 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.
-
-

동작 속도

-
-
- 더  빠른 JavaScript 동작속도
-
- "AJAX"에서 "J"를 뜻하는 JavaScript가 Firefox 3.5에서 새로운 TraceMonkey JavaScript 엔진을 이용해 더욱 빨라졌습니다. 웹 애플리케이션은 Firefox 3 보다 더욱 빨라졌습니다.
-
- 더  빠른 페이지 표시속도
-
- "speculative parsing" 기술로 Firefox 3.5에서 웹 콘텐츠를 더 빨리 표시하게 되었습니다. 사용자들이 기술의 의미하는 바를 알 필요는 없습니다. 단지 "더 빨리 보여준다."고 알면 됩니다.
-
-

See also

- diff --git a/files/ko/full_page_zoom/index.html b/files/ko/full_page_zoom/index.html deleted file mode 100644 index 3051b40775..0000000000 --- a/files/ko/full_page_zoom/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Full page zoom -slug: Full_page_zoom -translation_of: Mozilla/Firefox/Releases/3/Full_page_zoom ---- -

{{ Gecko_minversion_header("1.9") }}

-

전체 페이지 확대(또는 그냥 전체 확대)는 Firefox 3에서 지원하게 될 새로운 기능입니다. Gecko 1.9a7 버전부터 트렁크 빌드에서 사용이 가능합니다. 지금은 사용자 인터페이스가 없지만 자바스크립트와 nsIMarkupDocumentViewer XPCOM 인터페이스를 사용할 수 있습니다.

-

예제 (xul:browser)

-

다음 예제는 현재의 포커스 있는 브라우저 윈도우의 사용을 보여줍니다. 이는 Firefox 확장을 위한 전형적인 사용법입니다.

-
var zoom = 1.5;
-var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
-docViewer.fullZoom = zoom;
-
-

예제 (xul:iframe)

-

xul:iframe에 대해서도 전체 확대 기능을 사용할 수 있습니다. 그러나, iframe이 markupDocumentViewer를 가지고 있지 않기 때문에 그것을 먼저 얻어야 합니다.

-
var zoom = 1.5;
-var iframe = document.getElementById("authorFrame");
-var contViewer = iframe.docShell.contentViewer;
-var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
-docViewer.fullZoom = zoom;
-
-

레퍼런스

- -

 

-

 

-
-  
-

{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "fr": "fr/Zoom_pleine_page", "ja": "ja/Full_page_zoom" } ) }}

diff --git a/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/index.html new file mode 100644 index 0000000000..ca79e665a1 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_phaser/the_score/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}

+ +
+

이것은 Gamedev Phaser tutorial의 16단계중 11번째 과정입니다. 이 과정의 소스코드를 얻고자 한다면 이 강좌를 수강한 후 Gamedev-Phaser-Content-Kit/demos/lesson11.html를 통해 얻으세요.

+
+ +

점수를 얻는 방식의 게임은 좀더 재미있을 것 입니다.— 당신 또는, 친구의 최고 기록을 갈아치울수도 있습니다. 이 글에서는 우리의 게임에 득점 시스템을 추가해 보려고 합니다.

+ +

우리는 점수를 저장해두기 위해 여러 변수를 사용하고, 점수를 화면에 출력하기 위해 내부의 text() 메소드를 사용합니다.

+ +

새로운 변수들

+ +

이전 정의되었던 변수들 바로 다음에 다음과 같이 새로운 변수 두개를 추가해 주세요:

+ +
// ...
+var scoreText;
+var score = 0;
+
+ +

게임 화면에 점수가 표시 되도록 해보자

+ +

지금 create() 함수 뒤에 다음과 같은 코드를 추가해봅시다:

+ +
scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
+
+ +

text() 메소드는 4개의 변수를 가질수 있습니다:

+ + + +

마지막 변수는 CSS와 매우 비슷해 보입니다. 우리의 점수는 파란색에, 18픽셀 크기이며, Arial 폰트를 사용하여 나타날 것입니다.

+ +

블록이 무너지면 점수를 갱신합니다.

+ +

우리는 공이 블록을 칠때마다 점수를 증가시킵니다 그리고 공이 블록을 칠때마다 동시에 점수판을 갱신하여 화면에 현재 점수를 나타낼 것입니다. 이건 setText()매소드를 써서 해결 할수 있습니다 — ballHitBrick() 함수 아래로 다음과 같은 새로운 코드 두 줄을 추가하세요:

+ +
function ballHitBrick(ball, brick) {
+    brick.kill();
+    score += 10;
+    scoreText.setText('Points: '+score);
+}
+
+ +

됬습니다, — index.html 을 다시 새로고침 해주고 공이 블록을 칠때마다 점수가 갱신되는지 확인해줍니다.

+ +

코드를 비교해보세요

+ +

이번 강좌에서 배운 득점 시스템이 어떻게 작동하는지 이해하고자 한다면, 다음 아래를 이용해 시연해보세요.:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}

+ +

다음 단계

+ +

우리는 이제 득점 시스템을 게임에 추가했습니다. 그러나 게임에서 이길 수 없다면, 게임하면서 득점하는게 무슨 소용일까요? 그래서 승리 상태를 추가해보려고 합니다. 게임에서 이기게 하고 싶다면 다음으로 넘어갑시다: win the game.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}

diff --git "a/files/ko/games/tutorials/2d_breakout_game_phaser/\353\223\235\354\240\220/index.html" "b/files/ko/games/tutorials/2d_breakout_game_phaser/\353\223\235\354\240\220/index.html" deleted file mode 100644 index ca79e665a1..0000000000 --- "a/files/ko/games/tutorials/2d_breakout_game_phaser/\353\223\235\354\240\220/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 득점 -slug: Games/Tutorials/2D_breakout_game_Phaser/득점 -tags: - - 게임 - - 게임제작 - - 득점 - - 득점시스템 - - 튜토리얼 -translation_of: Games/Tutorials/2D_breakout_game_Phaser/The_score ---- -
{{GamesSidebar}}
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}

- -
-

이것은 Gamedev Phaser tutorial의 16단계중 11번째 과정입니다. 이 과정의 소스코드를 얻고자 한다면 이 강좌를 수강한 후 Gamedev-Phaser-Content-Kit/demos/lesson11.html를 통해 얻으세요.

-
- -

점수를 얻는 방식의 게임은 좀더 재미있을 것 입니다.— 당신 또는, 친구의 최고 기록을 갈아치울수도 있습니다. 이 글에서는 우리의 게임에 득점 시스템을 추가해 보려고 합니다.

- -

우리는 점수를 저장해두기 위해 여러 변수를 사용하고, 점수를 화면에 출력하기 위해 내부의 text() 메소드를 사용합니다.

- -

새로운 변수들

- -

이전 정의되었던 변수들 바로 다음에 다음과 같이 새로운 변수 두개를 추가해 주세요:

- -
// ...
-var scoreText;
-var score = 0;
-
- -

게임 화면에 점수가 표시 되도록 해보자

- -

지금 create() 함수 뒤에 다음과 같은 코드를 추가해봅시다:

- -
scoreText = game.add.text(5, 5, 'Points: 0', { font: '18px Arial', fill: '#0095DD' });
-
- -

text() 메소드는 4개의 변수를 가질수 있습니다:

- - - -

마지막 변수는 CSS와 매우 비슷해 보입니다. 우리의 점수는 파란색에, 18픽셀 크기이며, Arial 폰트를 사용하여 나타날 것입니다.

- -

블록이 무너지면 점수를 갱신합니다.

- -

우리는 공이 블록을 칠때마다 점수를 증가시킵니다 그리고 공이 블록을 칠때마다 동시에 점수판을 갱신하여 화면에 현재 점수를 나타낼 것입니다. 이건 setText()매소드를 써서 해결 할수 있습니다 — ballHitBrick() 함수 아래로 다음과 같은 새로운 코드 두 줄을 추가하세요:

- -
function ballHitBrick(ball, brick) {
-    brick.kill();
-    score += 10;
-    scoreText.setText('Points: '+score);
-}
-
- -

됬습니다, — index.html 을 다시 새로고침 해주고 공이 블록을 칠때마다 점수가 갱신되는지 확인해줍니다.

- -

코드를 비교해보세요

- -

이번 강좌에서 배운 득점 시스템이 어떻게 작동하는지 이해하고자 한다면, 다음 아래를 이용해 시연해보세요.:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/n8o6rhrf/","","400")}}

- -

다음 단계

- -

우리는 이제 득점 시스템을 게임에 추가했습니다. 그러나 게임에서 이길 수 없다면, 게임하면서 득점하는게 무슨 소용일까요? 그래서 승리 상태를 추가해보려고 합니다. 게임에서 이기게 하고 싶다면 다음으로 넘어갑시다: win the game.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_Phaser/Collision_detection", "Games/Workflows/2D_Breakout_game_Phaser/Win_the_game")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/bounce_off_the_walls/index.html new file mode 100644 index 0000000000..2df00b91b9 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls")}}

+ +
+

이 글은 Gamedev Canvas 튜토리얼에 포함된 10단계 중 3단계 글입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 Gamedev-Canvas-workshop/lesson3.html에서 확인해볼 수 있습니다.

+
+ +

공이 움직이는 걸 보니 기쁩니다! 하지만 기쁨을 즐길 틈도 없이 공이 스크린 밖으로 사라져버리네요. 이 문제를 해결하기 위해 공이 캔버스의 4군데 모서리에 다달았을 때 튕겨나올 수 있도록 간단한 충돌 감지 기능(더 자세한 내용은 다음 글에서 다시 설명할 예정입니다)을 구현해야 합니다.

+ +

간단한 충돌 감지

+ +

충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 합니다.

+ +

보다 계산을 쉽게 하기 위하여 ballRadius 변수를 만든 뒤 원의 반지름 값을 대입하여 계산하는데 사용합니다. 아래의 코드를 기존의 변수들 아래에 삽입하세요:

+ +
var ballRadius = 10;
+ +

이제drawBall() func기능 안에 볼을 그리는 코드를 아래와 같이 수정하세요:

+ +
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+ +

위 아래 방향으로 튕기기

+ +

캔버스에는 총 4개의 모서리 즉, 4개의 벽이 있습니다. 일단 상단의 벽에 집중해 보겠습니다. 공을 그리는 매 프레임마다 우리는 볼이 상단 모서리에 닿았는지 확인해야합니다 — 닿았다면 볼이 움직이는 방향을 반대로 바꾸어 캔버스 안에 여전히 공이 보이도록 만들어주어야 합니다. 캔버스 내 위치 구조는 좌상단으로 부터 시작하는 것을 잊지마세요:

+ +
if(y + dy < 0) {
+    dy = -dy;
+}
+ +

만약 공의 위치에서 y값이 0보다 작은 경우 음/양수를 반대로 바꾸어주어 y 축의 방향을 바꾸어 줍니다. 공이 매 프레임마다 2픽셀만큼 움직이고 있었다면, 이제는 매 프레임마다 2픽셀만큼 "아래 방향으로" 이동할 것입니다.

+ +

위 코드는 상단 모서리를 튕기도록 해주기 때문에 이번엔 하단 모서리를 튕기도록 해보겠습니다:

+ +
if(y + dy > canvas.height) {
+    dy = -dy;
+}
+ +

공의 위치에서 y값이 캔버스의 높이보다 큰 경우(좌상단으로부터 y값을 측정하기 때문에 상단모서리에서의 y값은 0, 하단모서리에서의 y값은 480, 즉 캔버서의 높이값임을 잊지마세요) y축 움직임의 반대 방향으로 튕겨냅니다.

+ +

위의 두가지 코드를 하나로 합칠 수 있습니다:

+ +
if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

둘 중 하나의 조건이라도 만족한다면, 공의 방향은 반대로 바뀝니다.

+ +

좌우로 튕겨내기

+ +

우리는 방금 상, 하단 모서리를 인식했으므로 이번엔 좌우 모서리를 생각해봅시다. 거의 같은 문제이므로 우리는 y 대신 x값을 대입하여 그대로 반복해주기만 하면 됩니다:

+ +
if(x + dx > canvas.width || x + dx < 0) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height || y + dy < 0) {
+    dy = -dy;
+}
+ +

이 후 위 코드를 draw() 함수블럭이 끝나는 중괄호 바로 전에 삽입합니다.

+ +

공이 여전히 벽 밖으로 사라져요!

+ +

코드를 테스트해보세요. — 아마 캔버스 모서리에서 튕겨나오는 볼이 인상적이지 않나요? 하지만 또 다른 문제가 생겼습니다. — 공이 벽을 튕겨나와 방향이 바뀌기 전에 살짝 벽 안으로 숨어버리네요:

+ +

+ +

이 문제는 우리가 충돌을 감지할 때 그 기준을 공의 원점에 두고 계산했지만, 원의 둘레를 기준으로 계산을 해야 하기 때문입니다. 벽에 공이 절반쯤 지난 뒤가 아니라 닿자마자 튕겨나와야 합니다. 이에 맞게 코드를 조금 수정해봅시다. 여러분이 삽입한 코드를 아래와 같이 수정해보세요:

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

공의 원점과 벽 사이의 거리가 공의 반지름과 같아졌을 때 공의 움직임이 바뀌도록 만들었습니다. 이제야 볼이 정확히 튕겨나오고 있네요.

+ +

여러분의 코드를 비교해보세요

+ +

자, 다시 여러분이 작성한 코드를 완성된 코드와 비교해보고 게임을 실행해보세요:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

+ +
+

Exercise: 공이 벽에 부딪힐 때마다 공의 색을 무작위로 변화시켜보세요.

+
+ +

다음 단계

+ +

이제 우리는 공이 게임판 안에서 어디서 어떻게 움직이고 있는지 파악했습니다. 네번째 챕터에서는 조작 가능한 배드를 구현해볼 것입니다. — 패드와 키보드 조작.

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/build_the_brick_field/index.html new file mode 100644 index 0000000000..9560da25e9 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection")}}

+ +
+

이번 단계는 Gamedev Canvas tutorial의 여섯 번째 학습입니다. Gamedev-Canvas-workshop/lesson6.html에서 이번 학습의 소스코드를 확인할 수 있습니다.

+
+ +

게임플레이 원리를 수정한 후에, 우리는 게임에서 패배할 수 있게 되었습니다. 이것은 실제 게임에 보다 가까운 느낌이기 때문에 훌륭합니다. 하지만 벽과 패들에 공이 튀기는 것 말고 할 수 있는 것이 없기 때문에 금방 지루해집니다. 벽돌깨기 게임에서 진정으로 필요로 한 것은 공으로 파괴할 벽돌입니다. 이 것이 지금 우리가 만들 것입니다!

+ +

벽돌에 대한 변수 설정하기

+ +

이번 학습의 모든 목표는 벽돌들을 위한 코드를 2차원 배열로 동작하는 반복문을 통해 제공하는 것입니다. 그러나 먼저 우리는 가로, 세로, 행, 열 등 벽돌에 대한 값을 정의할 몇몇 변수들을 설정해야 합니다. 지난 학습에서 작성한 코드에 아래 코드를 추가해봅시다.

+ +
var brickRowCount = 3;
+var brickColumnCount = 5;
+var brickWidth = 75;
+var brickHeight = 20;
+var brickPadding = 10;
+var brickOffsetTop = 30;
+var brickOffsetLeft = 30;
+ +

우리는 벽돌 배열 행과 열의 수, 그것들의 가로, 세로길이, 각 벽돌이 서로 닿지 않을 정도의 간격과 벽돌이 캔버스의 모서리에 닿지 않게 할 오프셋 변수들을 정의했습니다.

+ +

우리는 2차원 배열에 벽돌을 담았습니다. 배열은 열 c, 행 r, 그리고 배열의 각 객체엔 화면에 벽돌을 그릴 위치를 나타낼 x, y 위치를 가지고 있습니다. 위에서 변수를 선언한 코드 뒤에 아래 코드를 추가해봅시다.

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0 };
+    }
+}
+ +

위 코드는 행과 열 수만큼 반복되면서 새로운 벽돌을 만듭니다. 각 벽돌 객체는 이후에 충돌감지에 사용됩니다.

+ +

벽돌을 그리는 방법

+ +

이제 배열안의 모든 벽돌을 반복해서 화면에 그려줄 함수를 만들어봅시다. 코드는 아래와 같습니다.

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<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();
+        }
+    }
+}
+ +

다시 행, 열 반복을 통해 각 벽돌의 x, y 값을 설정하고, 캔버스에 brickWidth * brickHeight 크기의 벽돌들을 그립니다. 문제는 모든 벽돌들이 좌표 (0, 0) 위치해있다는 것입니다. 우리는 약간의 연산을 통해 각 벽돌의 x, y 값을 계산해야 합니다.

+ +
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+ +

 

+ +

brickX는 brickWidth + brickPadding에 c를 곱하고, brickOffsetLeft를 더한 값입니다. brickY는 변수 r, brickHeight, brickOffsetTop 변수를 사용한다는 것을 제외하곤 동일합니다. 이제 모든 벽돌들을 올바른 위치에, 알맞은 간격을 두고, 캔버스 모서리로부터 오프셋 값만큼의 거리를 둔 상태로 그릴수 있게되었습니다.

+ +

brickX와 brickY 값을 (0, 0) 대신에 좌표 값으로 할당한 후에 drawBricks 함수의 마지막 버전은 아래와 같을 것입니다. 이 코드는 drawpaddle 함수 아래에 추가해봅시다.

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<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();
+        }
+    }
+}
+ +

실제 벽돌을 그리기

+ +

이 학습에서 마지막으로 할 일은 drawBrick함수를 호출하는 코드를 draw함수 어딘가에, 되도록이면 시작하는 부분에, 캔버스를 초기화하는 부분과 공을 그리는 사이에 추가하는 것입니다.  아래 코드를 drawBall() 코드 위에 추가해봅시다.

+ +
drawBricks();
+
+ +

코드 비교해보기

+ +

이 부분에서 게임은 조금 더 흥미로워졌습니다.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}

+ +
+

연습하기: 행과 열의 수를 바꿔서 벽돌의 수를 변경해보거나, 위치를 변경해봅시다.

+
+ +

다음 단계

+ +

이제 우리에겐 벽돌이 있습니다! 하지만 공은 벽돌들과의 반응이 없습니다. 우리는 다음 단계에서 이 문제에 대해 다룰 것입니다: 충돌 감지

+ +

 

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection")}}

+ +

 

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/collision_detection/index.html new file mode 100644 index 0000000000..f312374938 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

+ +
+

이 학습은 Gamedev Canvas tutorial의 일곱 번째 단계입니다. Gamedev-Canvas-workshop/lesson7.html에서 이번 학습에서 완성된 코드를 확인할 수 있습니다.

+
+ +

지난 학습에서 우린 화면에 벽돌을 표현했습니다. 그러나 공은 벽돌은 그냥 지나가버리고 게임은 아직 흥미로워지려면 멀어보입니다. 우린 공이 벽돌을 파괴하고 튕겨져 나올 수 있도록 충돌 감지 기능을 고려해봐야 합니다.

+ +

물론 어떻게 적용할지는 우리가 결정할 문제입니다. 그러나 공이 벽돌에 닿았는지 계산하는 일은 꽤나 까다로울 수 있습니다. 왜냐하면 캔버스엔 이를 위한 기능이 없기 때문입니다.  이번 학습은 가능한 쉬운 방법으로 진행될 것입니다. 우린 공의 중앙이 어느 벽돌과 충돌하는지 확인할 것입니다. 이는 항상 완벽한 결과를 주진 않지만, 충돌 감지를 위한 정교한 방법은 무궁무진합니다. 그러나 이 방법 역시 기본적인 개념을 학습하기에 꽤 괜찮습니다.

+ +

충돌 감지 함수

+ +

이 모든 것을 시작하기 위해 우리는 모든 벽돌들을 순회하고 각 벽돌의 좌표를 공의 위치와 비교하는 충돌 감지 함수를 만들어야 합니다. 코드의 가독성을 향상시키기 위해 충돌 감지의 반복에서 사용할 벽돌 객체를 저장하는 b 변수를 정의할 것입니다.

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            // calculations
+        }
+    }
+}
+ +

만약 공의 중앙이 어떤 벽돌의 범위 내에 있을 경우, 공의 방향을 바꾸게 됩니다. 공이 벽돌 안에 존재하려면, 아래 4가지 조건이 참이어야 합니다.

+ + + +

이 조건을 코드로 작성해봅시다.

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                dy = -dy;
+            }
+        }
+    }
+}
+ +

위 코드를 keyUpHandler() 함수 아래에 추가해봅시다.

+ +

충돌 후에 벽돌을 사라지게 만들기

+ +

위의 코드는 우리가 의도한대로 작동할 것이고 공은 방향을 바꿀 것입니다. 문제는 벽돌이 그대로 있다는 것입니다. 우린 이미 공이 부딪힌 벽돌을 제거하기 위한 방법을 고민해봐야 합니다. 우리는 화면에 있는 벽돌을 그릴지 결정하는 변수를 추가해서 이 문제를 해결할 수 있습니다, 벽돌을 초기화하는 코드에, status 속성을 각 벽돌 객체에 추가해봅시다. 아래와 같이 말입니다.

+ +
var bricks = [];
+for(var c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(var r=0; r<brickRowCount; r++) {
+        bricks[c][r] = { x: 0, y: 0, status: 1 };
+    }
+}
+ +

다음으로 drawBricks 함수에서 벽돌들을 그리기 전에 status 속성을 확인해야 합니다. 만약 status가 1이라면 벽돌을 그리고, 만약 0이라면 이미 공이 치고간 벽돌이므로 우린 더이상 화면에 그릴 필요가 없습니다. 아래와 같이 drawBricks 함수를 수정해봅시다,

+ +
function drawBricks() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<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();
+            }
+        }
+    }
+}
+ +

충돌 감지함수에서 상태 추적 및 업데이트

+ +

이제 collisonDectection 함수에 벽돌 status 속성을 포함시켜야 합니다. 만약 벽돌이 활성 상태(status 1)이라면 충돌이 일어났는지 확인해야 합니다. 만약 충돌이 발생했다면 다시 그리지 않게 벽돌의 속성을 0으로 변경해야 합니다. collisionDetection 함수를 아래와 같이 수정합시다.

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                }
+            }
+        }
+    }
+}
+ +

충돌 감지 활성화하기

+ +

마지막으로 할일은 draw함수에서 collisionDetection 함수를 호출하는 것입니다. 아래 코드를 draw 함수에, drawPaddle() 아래에 추가해봅시다.

+ +
collisionDetection();
+
+ +

코드 비교하기

+ +

이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 별돌을 파괴할 수 있습니다!

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/3/","","395")}}

+ +
+

연습하기: 벽돌이 부딪힐 때마다 색깔을 바꿔보세요.

+
+ +

다음 단계

+ +

우리는 충분히 여기까지 왔습니다! 이제 어덟 번째 장에서는 점수를 추가와 승패 판정 방법을 알아 볼 것입니다.

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.html new file mode 100644 index 0000000000..a7f1ed4130 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기")}}

+ +
+

이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 첫 번째 과정입니다. Gamedev-Canvas-workshop/lesson1.html에서 이 강의의 완성된 코드를 볼 수 있습니다.

+
+ +

게임의 기능들을 작성하기 전에, 게임 내부에 렌더링 하기 위한 기본 구조들을 HTML과 {{htmlelement("canvas")}} 엘리먼트를 사용하여 만들어야 합니다.

+ +

게임의 HTML

+ +

HTML문서 구조는 꽤 간단합니다. 게임은 {{htmlelement("canvas")}} 엘리먼트에 렌더링됩니다. 여러분이 좋아하는 텍스트 에디터로 새로운 HTML 문서를 생성하여 index.html로 저장하고, 아래 코드를 추가하세요.

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>Gamedev Canvas Workshop</title>
+    <style>
+    	* { padding: 0; margin: 0; }
+    	canvas { background: #eee; display: block; margin: 0 auto; }
+    </style>
+</head>
+<body>
+
+<canvas id="myCanvas" width="480" height="320"></canvas>
+
+<script>
+	// JavaScript 코드가 여기에 들어갈 것입니다.
+</script>
+
+</body>
+</html>
+
+ +

{{htmlelement("head")}} 에는 문자셋이 정의되어 있고, {{htmlelement("title")}}과 몇가지 기본적인 CSS가 있습니다. {{htmlelement("body")}}는 {{htmlelement("canvas")}} 와 {{htmlelement("script")}}를 포함하고 있습니다. {{htmlelement("canvas")}}에는 게임이 렌더되고, {{htmlelement("script")}}에는 JavaScript가 들어갑니다. {{htmlelement("canvas")}}엘리먼트는 쉽게 참조하기 위해 id로 myCanvas를 갖고 있고, 480픽셀의 길이와 320픽셀의 높이를 갖도록 되어있습니다. 우리가 이 튜토리얼에서 작성하게될 모든 JavaScript 코드는 <script>와  </script> 태그 사이에 들어가게 됩니다.

+ +

캔버스 기본

+ +

실제로 {{htmlelement("canvas")}}엘리먼트 위에 그래픽을 렌더링하기 위해서는 JavaScript로 참조할 수 있게 만들어야 합니다. 다음 코드를 여러분의 <script> 태그 다음에 추가하세요..

+ +
var canvas = document.getElementById("myCanvas");
+var ctx = canvas.getContext("2d");
+ +

{{htmlelement("canvas")}} 엘리먼트에 대한 참조를 canvas 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 ctx 변수에 저장하고 있습니다.

+ +

캔버스에 빨간색 네모를 그리는 짧은 예제 코드를 작성해봅시다. 바로 직전의 JavaScript 코드 아래에 다음 코드를 추가하고 index.html을 브라우저에서 열어 보세요.

+ +
ctx.beginPath();
+ctx.rect(20, 40, 50, 50);
+ctx.fillStyle = "#FF0000";
+ctx.fill();
+ctx.closePath();
+ +

{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}와 {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}메소드 사이에 모든 명령어가 들어갑니다. 우리는 {{domxref("CanvasRenderingContext2D.rect()","rect()")}}를 이용해서 직사각형을 정의했는데, 처음 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 두 값은 직사각형의 너비와 높이를 의미합니다. 위 코드에서 직사각형은 캔버스 좌측에서 20픽셀 떨어져있고, 캔버스 상단에서 40픽셀만큼 아래로 떨어져 있습니다. 그리고 너비와 높이는 각각 50픽셀로 설정되어 완벽한 정사각형으로 그려지고 있습니다. {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}은  {{domxref("CanvasRenderingContext2D.fill()","fill()")}}메소드에서 칠해질 색상 값을 갖게 됩니다. 위 코드에서는 사각형을 빨간색으로 칠하고 있습니다.

+ +

직사각형만 그릴 수 있는 것은 아닙니다. 이번에는 초록색 원을 그려보겠습니다. 아래의 코드를 여러분의 JavaScript의 마지막에 추가하고, 저장한 이후에 페이지를 새로고침 해보세요.

+ +
ctx.beginPath();
+ctx.arc(240, 160, 20, 0, Math.PI*2, false);
+ctx.fillStyle = "green";
+ctx.fill();
+ctx.closePath();
+ +

위 코드에서 볼 수 있듯이{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}와 {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}메소드가 다시 나왔습니다. 그 사이에, 가장 중요한 부분인 {{domxref("CanvasRenderingContext2D.arc()","arc()")}} 메소드가 있습니다. 이 메소드는 6개의 파라미터를 갖습니다.

+ + + +

{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}속성은 이전과 조금 달라 보이는데, 이는 CSS에서 색상을 표현하는 여러가지 방법 중 하나입니다. 색상을 표현할 때, 16진수로 색상값을 표현하거나, 색상 키워드를 사용하거나, rgba() 함수를 사용하거나 그외에 다른 색상 메소드를 사용할 수 있습니다.

+ +

{{domxref("CanvasRenderingContext2D.fill()","fill()")}}을 사용해서 원에 색상을 채울 수 있다면,{{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}를 이용하면 원의 외곽선에 색상을 부여할 수 있습니다. 아래의 코드들도 여러분의 JavaScript에 추가해보세요.

+ +
ctx.beginPath();
+ctx.rect(160, 10, 100, 40);
+ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
+ctx.stroke();
+ctx.closePath();
+ +

위 코드는 비어있는 파란색 외곽선으로 된 원을 그립니다. rgba() 함수의 알파 채널 값 때문에 파란색은 반투명하게 표현됩니다.

+ +

여러분의 코드와 비교해 보세요

+ +

 JSFiddle에서 라이브로 실행되는 전체 코드입니다.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

+ +
+

연습해보기: 주어진 모양들의 크기와 색상을 변경해보세요.

+
+ +

다음 단계로

+ +

이제 우리는 기본적인 HTML을 설정하고, canvas에 대해 조금 배웠습니다. 두 번째 챕터로 넘어가서 게임에서 공을 움직이기위해 어떻게 해야 하는지 계속 알아봅시다.

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/finishing_up/index.html new file mode 100644 index 0000000000..b23a4b6b33 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +
+

Gamedev Canvas tutorial.의 10 개의 레슨 중 마지막 단계 입니다. 이 수업을 마친 후 비교하여 살펴 볼 소스코드는 Gamedev-Canvas-workshop/lesson10.html. 여기서 찾아 볼 수 있습니다.

+
+ +

우리가 쓰는 모든 게임에 항상 개선해야 할 것이 있습니다. 예를 들어 이 게임에 2인용 플레이어를 추가할 수 있습니다. 한두 번 잘못 만들어 경기를 끝낼 수도 있습니다. 그러나 우리는 코드 렌더링을 향상시켜 발전할 수 있습니다.

+ +

플레이어에게 생명을 부여하기

+ +

생명을 구현하는 방법은 아주 간단하다. 먼저 변수를 선언했던 곳과 같은 장소에서  변수를 추가하여 생명 수를 저장합니다.

+ +
var lives = 3; //남은 생명 수
+ +

남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태 입니다. drawScore()함수 아래에 다음 기능을 추가 하십시오.

+ +
function drawLives() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
+}
+ +

지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이였습니다. 이제 우리는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄일 것입니다. 또한 플레이어가 게임 오버되면 다시 생명과 블럭들을 리셋하여 공과 패들 위치를 재설정할 수 있습니다. draw() 함수는 다음 세 줄로 대체합니다:

+ +
alert("GAME OVER");
+document.location.reload();
+clearInterval(interval); // Needed for Chrome to end game
+
+ +

 

+ +

 

+ +

이를 통해 아래와 같이 약간 복잡한 논리를 추가할 수 있습니다:

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

자, 이제 공이 화면의 맨아래 가장자리에 맞으면 생명(lives)을 하나 뺍니다. 생명이 없다면 게임이 끝나고 아직 남아있다면 공의 위치와 패들의 위치가 재설정 됩니다.

+ +

남은 생명 표시 렌더링하기

+ +

이제 draw()함수 내에서 drawLives()에 생명 수를 추가하고 drawLives() 아래에 생명 수를 추가해야 합니다.

+ +
drawLives();
+
+ +

requestAnimationFrame()을 사용하여 랜더링 개선하기

+ +

이제 게임 역학과 연결이 되지 않고, 그것이 렌더링되는 방식에 대해 연구해 봅시다. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} 브라우저가 현재 Replace를 사용하여 구현한 고정 프레임보다 게임을 더 잘 랜더링할 수 있도록 {{domxref("windowTimers.setInterval()", "setInterval()")}} 도와줍니다:

+ +
var interval = setInterval(draw, 10);
+ +

간단하게:

+ +
draw();
+ +

다음 각 인스턴스를 제거합니다:

+ +
clearInterval(interval); // Needed for Chrome to end game
+
+ +

그 다음, draw()함수의 맨 아래 (닫는 '}'바로 전에) 다음 줄을 추가하여 draw()함수가 반복적으로 자신을 호출하게 합니다:

+ +
requestAnimationFrame(draw);
+ +

이 draw() 함수는 현재 requestAnimationFrame() 루프 내에서 반복적으로 실행되고 있지만, 고정된 10ms 프레임 대신 프레임의 제어권을 브라우저에 다시 부여 합니다. 이는 프레임과 적절하게 일치하고 필요할 때만 모양을 만들 것입니다. 이것은 이전의 setInterval() 방법보다 더 효율적이고 부드럽게 애니메이션 루프를 만듭니다.

+ +

코드 비교하기

+ +

그것이 이 레슨의 전부입니다. 게임의 최종버전이 준비되 있고 시작할 준비가 되어 있습니다!

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

+ +
+

Exercise: 남은 생명에 따라 공이 패들에서 튕겨나가는 각도를 변경합니다.

+
+ +

게임 오버 - 마무리!

+ +

축하합니다! 당신은 모든 수업을 완수하였습니다! 이쯤 되면 이제 캔버스의 조작 기초와 간단한 2D 게임 구현 방법을 알게 되었을 것 입니다. 이제 몇 가지 프레임워크를 배우고 게임 개발을 해 본 좋은 시간이였습니다.

+ +

이 시리즈의 2D breakout game using Phaser 또는 Cyber Orb built in Phaser 튜토리얼을 확인해 볼 수 있습니다. Games section on MDN의 섹션에서 더 많은 지식과 영감을 얻으십시오.

+ +

 

+ +

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/game_over/index.html new file mode 100644 index 0000000000..d0c72fb8b3 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field")}}

+ +
+

이것은 Gamedev Canvas tutorial 의 다섯 번째 학습입니다. 이 학습을 통해 완성된 코드는 Gamedev-Canvas-workshop/lesson5.html 에서 확인할 수 있습니다.

+
+ +

공이 벽에서 튕겨져 나오는 것과 패들을 움직이는 것을 보는건 재밌지만, 더 진전이 필요합니다. 게임에서 질 수 있다면 좋겠습니다. 벽돌 깨기 게임에서 패배하는 구조는 꽤 단순합니다. 만약 패들이 공을 놓친다면, 공은 캔버스의 아래 면에 닿을 것이고, 그대로 게임은 끝납니다.

+ +

게임 오버 기능 적용하기

+ +

'게임 오버' 기능을 만들어봅시다. 아래에 세 번째 학습에서 작성한, 벽에서 공을 반사시키는 코드의 일부가 있습니다.

+ +
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+}
+
+if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
+    dy = -dy;
+}
+ +

사면 모두에서 공을 튕겨내지 말고 왼쪽, 위쪽, 오른쪽, 세 면에만 적용해봅시다. 아래쪽 면에 닿는 순간 게임은 끝납니다. 우리는 공이 밑면에 충돌하는 순간 "게임 오버" 상태로 바뀌게 하기 위해 두 번째 if 블록을 수정할 것입니다. 우선 경고 메시지를 보여주고 페이지를 리로딩해서 게임을 다시 시작하게 할 것입니다. 두번째 if 블록을 아래와 같이 수정해봅시다.

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    alert("GAME OVER");
+    document.location.reload();
+}
+ +

Paddle은 공을 튕겨내야지

+ +

이번 학습에서 할 마지막 일은 공과 패들 사이의 충돌 감지같은, 공을 게임 화면으로 되돌아가게 튕겨내는 기능을 만드는 것입니다. 가장 쉬운 방법은 공의 중심이 패들의 내부에 있는지 확인하는 것이다. 위에서 수정한 코드를 약간 고쳐봅시다.

+ +
if(y + dy < ballRadius) {
+    dy = -dy;
+} else if(y + dy > canvas.height-ballRadius) {
+    if(x > paddleX && x < paddleX + paddleWidth) {
+        dy = -dy;
+    }
+    else {
+        alert("GAME OVER");
+        document.location.reload();
+    }
+}
+ +

공이 캔버스의 밑면에 닿는 순간, 공이 패들의 안쪽에 있는지 확인해야 합니다. 만약 그렇다면, 우리가 기대하는대로 공은 튕겨져야 합니다. 그게 아니라면, 게임의 전과 같이 끝나야 합니다.

+ +

코드 비교하기

+ +

여기 완성된 코드가 있으니 작성한 코드와 비교해봅시다.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

+ +
+

연습: 공이 패들에 닿았을 때 공의 속도를 빠르게 만들어봅시다.

+
+ +

다음 단계

+ +

지금까지 아주 잘 하고 있습니다. 게임은 플레이 할 가치가 생겼고 이젠 게임이 끝날 수도 있습니다. 하지만 뭔가가 빠졌습니다. 여섯 번째 학습 — 벽돌 영역을 만들어보기 — 로 이동해서 몇 개의 벽돌을 만들어 봅시다.

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html new file mode 100644 index 0000000000..8b0e4da888 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/index.html @@ -0,0 +1,55 @@ +--- +title: 순수한 자바스크립트를 이용한 2D 벽돌깨기 게임 +slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 +tags: + - 2D + - 게임 + - 자바스크립트 + - 캔버스 + - 튜토리얼 +translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
+ +

{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}}

+ +

이 튜토리얼을 차례차례 진행하면서 우리는 HTML5 {{htmlelement("canvas")}} 로 렌더되는 순수하게 JavaScript로만 쓰여진 간단한 MDN 벽돌깨기 게임을 만들 것입니다.

+ +

모든 과정은 플레이 가능하고 편집가능한 라이브 샘플을 포함하고 있습니다. 이 샘플을 통해, 여러분은 중간 스테이지들이 어떻게 보여져야 하는지 확인할 수 있습니다. 여러분은 이미지의 렌더링과 움직임, 충돌 감지, 컨트롤 메카니즘들과 승리와 패배 상태와 같은 기본적인 게임 원리들을 구현하기 위해서, {{htmlelement("canvas")}}엘리먼트의 기본적인 사용 방법을  배우게 될 것입니다.

+ +

이 시리즈를 최대한 활용하려면 중급의 JavaScript 지식이 있어야 합니다. 이 튜토리얼을 끝낸 후에는 여러분은 스스로 간단한 웹 게임들을 만들 수 있게 될 것입니다.

+ +

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.

+ +

강의 내용

+ +

모든 강의 내용과 우리가 함께 만드는 MDN 벽돌깨기 게임의 다른 버전들은 GitHub에서 찾을 수 있습니다.:

+ +
    +
  1. 캔버스 생성과 그리기
    2. +
  2. 공 움직이기
    3. +
  3. 벽으로 부터 튕겨나오기
    4. +
  4. 패들과 키보드 컨트롤
    5. +
  5. 게임 오버
    6. +
  6. 벽돌 필드 만들기
    7. +
  7. 충돌 감지
    8. +
  8. 점수 추적과 승리
    9. +
  9. 마우스 컨트롤
    10. +
  10. 마무리
    11. +
+ +

웹 게임 개발의 확고한 지식을 얻기 위한 최고의 방법은 순수하게 JavaScript만 이용해서 시작하는 것입니다. 이후에, 여러분은 프로젝트에 프레임워크를 골라서 사용할 수도 있습니다.  프레임워크들은 JavaScript로 만들어진 도구일 뿐입니다. 따라서 여러분이 프레임워크를 사용하더라도, 프레임워크 밑에서 정확히 어떤 일이 일어나는지 알기 위해 언어를 배우는것이 좋습니다. 프레임워크들은 개발 속도를 올려주고, 게임의 지루한 부분들을 해결하는데 도움을 줍니다. 하지만 어떤 일들이 기대한대로 일어나지 않는다면, 여러분은 디버그를 시도하거나 여러분 스스로 순수하게 JavaScript만 이용한 솔루션을 작성할 수 도 있습니다.

+ +
+

노트: 만약 여러분이 게임 라이브러리를 이용한 2D 웹 게임 개발의 학습에 흥미가 있다면,  이 시리즈의 대응 파트인 2D breakout game using Phaser를 살펴보시기 바랍니다.

+
+ +
+

노트: 이 시리즈의 내용들은 게임개발 워크숍의 재료로 쓰일 수 있습니다. 또한, 만약 여러분이 게임개발에 있어 강연을 원한다면 이 튜토리얼에 기초한 Gamedev Canvas Content Kit를 활용할 수 있습니다.

+
+ +

다음 단계

+ +

좋습니다, 이제 시작하도록 합시다. 첫 번째 챕터인 캔버스 생성과 그리기 부터 시작합니다.

+ +

{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}} 

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/mouse_controls/index.html new file mode 100644 index 0000000000..e05faf32e8 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

+ +
+

이 레슨은 Gamedev Canvas tutorial.의 10개 중 9 번째 단계입니다. 당신은 Gamedev-Canvas-workshop/lesson9.html. 이 소스코드에서 이 수업의 교훈을 찾을 수 있습니다.

+
+ +

경기 자체가 사실상 끝났으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.

+ +

마우스 이동 감지하기

+ +

마우스 움직임을 감지하기 위해 감지를 하는 것은 키 감지를 하는 것보다 훨씬 더 쉽습니다. 우리가 필요한 것은 {{event("mousemove")}} 이 이벤트 감지입니다. 이 keyup event 바로 아래에 이 행을 추가하십시오.

+ +
document.addEventListener("mousemove", mouseMoveHandler, false);
+ +

마우스 움직임에 따라 패들 이동 하기

+ +

포인터 좌표에 따라 패들 위치를 업데이트를 할 수 있습니다. 다음과 같은 핸들러 기능을 정확하게 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가하십시오:

+ +
function mouseMoveHandler(e) {
+    var relativeX = e.clientX - canvas.offsetLeft;
+    if(relativeX > 0 && relativeX < canvas.width) {
+        paddleX = relativeX - paddleWidth/2;
+    }
+}
+ +

이 함수에서 우리는 먼저 상대적인 relativeX 를 구합니다. 이 값은 뷰포트(e.clientX)와 캔버스 왼쪽 가장자리 (canvas.offsetLeft) 사이의 거리에 마우스 위치를 뺀 값입니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, paddleX의 위치(패들 왼쪽 가장자리에 배치되어 있다)는 패들 width의 반을 뺀 relativeX의 값으로 설정되므로 이동은 실제로 패들 가운데 상대적으로 이동이 됩니다.

+ +

이제 패들은 마우스 커서의 움직임을 따르겠지만, 움직임을 캔버스 크기로 제한하고 있기 때문에 어느 쪽에서도 완전히 사라지지 않을 것입니다.

+ +

코드 비교하기

+ +

지금까지 해왔던 코드를 한번 비교해보세요.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

+ +
+

Exercise: 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것 입니다. 패들 이동 제한 경계를 조정해 보세요.

+
+ +

다음 단계

+ +

이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — Finishing up. (마지막)

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/index.html new file mode 100644 index 0000000000..5a8b02904e --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/move_the_ball/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls")}}

+ +
+

이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 두 번째 과정입니다.  Gamedev-Canvas-workshop/lesson2.html에서 이 강의의 완성된 코드를 볼 수 있습니다.

+
+ +

여러분은 이전 과정에서 어떻게 공이 그려지는지 배웠습니다. 이젠 공을 움직이게 만들어보죠! 기술적으로는 화면에 공을 그렸다가 지우는 과정을 반복하게 되는데, 매 프레임마다 공의 위치를 조금씩 다르게 해서 그리면 공이 움직이는것 처럼 보이게 됩니다. 마치 영화 화면이 움직이는 방식처럼 말이죠!

+ +

드로잉 루프를 정의하기

+ +

매 프레임마다 캔버스에 그리는것을 지속적으로 갱신하기 위해서는, 계속해서 그리는 것을 반복하게 만들어주는 함수가 필요합니다. 이 함수는 매 프레임마다 위치를 바꿔주기 위한 몇가지 변수들을 포함합니다.  JavaScript 타이밍 함수인 {{domxref("WindowTimers.setInterval()", "setInterval()")}}나 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}를 이용하면 함수를 몇번이고 계속 반복해서 실행할 수 있습니다..

+ +

현재 여러분의 HTML파일 안에 있는 JavaScript중에 처음 두 줄만 제외하고 나머지는 모두 지워주세요. 지운 후에는 아래에 있는 코드를 추가해주세요. draw()함수는 setInterval를 통해서 10밀리초마다 실행됩니다.

+ +
function draw() {
+    // drawing code
+}
+setInterval(draw, 10);
+ +

무한히 작동하는 setInterval 함수 덕에, draw() 함수는 우리가 멈추기 전 까지 10밀리초마다 영원히 호출됩니다. 이제 공을 그려봅시다! 다음 코드를 여러분의 draw() 함수 안에 추가해주세요.

+ +
ctx.beginPath();
+ctx.arc(50, 50, 10, 0, Math.PI*2);
+ctx.fillStyle = "#0095DD";
+ctx.fill();
+ctx.closePath();
+
+ +

이제 바뀐 코드를 실행해 보세요. 공은 매 프레임마다 다시 그려지게 됩니다.

+ +

움직이게 만들기

+ +

공이 움직이지 않고 있기 때문에, 여러분은 공이 다시 그려지고 있다는 사실을 알아챌 수 는 없었을 것입니다. 이제 공을 움직이게 바꿔봅시다. 첫 번째로, (50,50)이라는 지정된 좌표 대신에, x와 y라는 변수를 이용해서 화면 하단 중앙에서 그려지도록 하겠습니다. 

+ +

x와 y를 정의하기 위해서 다음 두 줄을 여러분의 draw() 함수위에 추가해주세요.

+ +
var x = canvas.width/2;
+var y = canvas.height-30;
+
+ +

그 다음에는 draw() 함수를 갱신할 것입니다. 아래 코드에서 강조된 줄에서 처럼, {{domxref("CanvasRenderingContext2D.arc()","arc()")}}메소드안에서 x와 y 변수를 사용하게 됩니다.

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+
+ +

이제 중요한 부분입니다. 공을 움직이는 것을 표현하기 위해 x와 y에 작은 값을 매 프레임마다 더해줄 것입니다. 그 작은 값을 dx와 dy라 정의하고, 각각 2와 -2로 그 값을 정해보겠습니다. 다음 코드를 여러분의 x와 y변수가 정의된 코드 아래에 추가하세요.

+ +
var dx = 2;
+var dy = -2;
+
+ +

마지막으로 할 일은 dx와 dy변수를 이용해서 매 프레임마다 x와 y변수를 갱신해 주는 것입니다. 그렇게 하면 매 갱신마다 공은 새 위치에 그려지게 됩니다. 다음 코드에 표시된 새로운 두 줄의 코드를 여러분의 draw() 함수에 추가해주세요.

+ +
function draw() {
+    ctx.beginPath();
+    ctx.arc(x, y, 10, 0, Math.PI*2);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+    x += dx;
+    y += dy;
+}
+ +

여러분의 코드를 다시 저장하고, 브라우저를 열어 실행해보세요. 공은 잘 움직이는군요. 뒤에 흔적이 남기는 하지만 말이죠.

+ +

+ +

다음 프레임 전에 캔버스를 지우기

+ +

공이 흔적을 남기는 것은, 매 프레임마다 공을 그릴 때 이전 프레임을 지워주지 않았기 때문입니다. 하지만 걱정할 것은 없습니다. 캔버스의 내용들을 지워주기 위한 메소드인 {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}가 있으니까요. 이 메소드는 네 개의 파라미터가 필요합니다. 직사각형의 좌상단 모서리를 표시할 x와 y좌표, 그리고 직사각형의 우하단 모서리를 표시할 x와 y좌표가 바로 그것이죠. 이 좌표들로 생기는 사각형 안에 있는 것들은 전부 지워지게 될 것입니다.

+ +

다음 코드에서 강조된 새로운 한줄의 코드를 draw() 함수에 추가하세요.

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

여러분의 코드를 저장하고, 다시 실행해보세요. 이번에는 흔적없이 공이 움직이는 것을 보실 수 있을 것입니다. 매 10밀리초마다 캔버스는 지워지고, 새로운 x와 y값의 좌표를 가지는 공이 다음 프레임에 그려지게 되는 것이죠.

+ +

코드 정리하기

+ +

다음 강좌에서도 계속해서 몇가지 명령들을 draw() 함수에다 추가해야 합니다. 그렇기 때문에 코드를 최대한 간단하고 깨끗하게 유지하는 것이 좋습니다. 공을 움직이는 코드를 분리된 함수로 옮기는 것 부터 시작해보죠!

+ +

현재의 draw() 함수를 다음의 분리된 두 함수로 바꿔주세요.

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

여러분의 코드와 비교해보세요

+ +

아래의 라이브 데모에서 이 강의의 완성된 코드를 확인할 수 있습니다. 어떻게 작동하는지 더 잘 이해하기 위해 플레이 해보세요.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

+ +
+

연습해보기: 움직이는 공의 속도를 바꾸거나, 움직이는 방향을 바꿔보세요.

+
+ +

다음 단계로

+ +

우리는 공을 그리고 움직이게 만들었지만, 캔버스 모서리 밖으로 사라져버립니다. 세 번째 챕터에서는 공이 벽으로부터 튕겨 나오기 위한 방법을 알아볼 것입니다.

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/paddle_and_keyboard_controls/index.html new file mode 100644 index 0000000000..47cde1be4e --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/")}}
+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over")}}

+ +
+

이 글은 Gamedev Canvas tutorial의 10단계 중 4단계 입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 Gamedev-Canvas-workshop/lesson4.html 에서 확인할 수 있습니다.

+
+ +

공이 계속해서 벽을 튕기며 이동하는 모습을 볼 수 있지만, 현재로서는 그것을 컨트롤 할 방법이 없습니다. 컨트롤 할 수 없으면 게임이 아니죠! paddle을 컨트롤 할 수 있는 몇가지 상호작용을 추가해 봅시다.

+ +

공을 치기 위한 paddle 정의

+ +

먼저, 우리는 공을 치기 위한 paddle이 필요합니다. 이를 위해 몇가지 변수들을 정의합시다. 코드 상단에 다른 변수들과 함께 아래 변수들을 추가하세요:

+ +
var paddleHeight = 10;
+var paddleWidth = 75;
+var paddleX = (canvas.width-paddleWidth)/2;
+ +

여기에서 paddle의 높이와 너비, 그리고  x 축 위에 시작 지점을 정의합니다. paddle을 스크린에 그리는 함수를 만듭시다. drawBall() 함수 아래에 다음 코드를 추가하세요:

+ +
function drawPaddle() {
+    ctx.beginPath();
+    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
+    ctx.fillStyle = "#0095DD";
+    ctx.fill();
+    ctx.closePath();
+}
+ +

유저의 paddle 컨트롤

+ +

paddle은 우리가 원하는 곳 어디든 그릴 수 있지만, 사용자의 컨트롤에 반응해야 합니다. — 키보드 컨트롤을 구현합시다. 다음 내용이 필요합니다.:

+ + + +

버튼을 누르는 것은 boolean 변수로 정의하고 초기화 합니다. 아래 코드를 변수 선언 부분에 추가하세요. :

+ +
var rightPressed = false;
+var leftPressed = false;
+ +

처음에는 컨트롤 버튼이 눌려지지 않은 상태이므로 두개의 기본값은 false 입니다. 키가 눌렸음을 인식하기 위해, 이벤트 리스너를 설정합니다. 자바스크립트 하단에 setInterval() 바로 위에 아래 코드를 추가합니다.:

+ +
document.addEventListener("keydown", keyDownHandler, false);
+document.addEventListener("keyup", keyUpHandler, false);
+ +

키보드 중 어떤 키 하나가 눌려서 keydown 이벤트가 발생하면, keyDownHandler() 함수가 실행됩니다. 두번째 리스너에도 같은 패턴이 적용됩니다: 키에서 손을 때면 keyup 이벤트가 keyUpHandler() 함수를 실행합니다 . addEventListener() 아래에 다음 코드를 추가하세요:

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

키를 누르면 변수에 정보가 저장됩니다. 각 경우에 관련된 변수가 true 로 설정됩니다. 키에서 손을 때면, 변수값은 false로 되돌아갑니다.

+ +

두 함수 모두 e 변수로 표시되는 이벤트를 파라미터로 사용합니다. 이것으로 유용한 정보를 얻을 수 있습니다: keyCode 는 눌려진 키에 대한 정보를 가지고 있습니다. 예를 들어 키 코드 37 은 왼쪽 방향키이고 39 는 오른쪽 방향키 입니다. 만약에 왼쪽 방향키를 누르면, leftPressed 변수가 true 로 설정되고, 왼쪽 방향키에서 손을 때면 leftPressed 변수가 false로 설정됩니다. 오른쪽 방향키와 rightPressed 변수에도 동일한 패턴이 적용됩니다.

+ +

Paddle 이동 로직

+ +

이제 우리는 눌려진 키, 이벤트 리스너, 관련된 함수에 대한 정보를 저장할 변수를 가지고 있습니다. 이제 실제 코드를 사용하여 이것들을 사용하고 paddle을 화면에서 움직여봅시다. draw() 함수에서, 각각의 프레임이 렌더링 될때마다 왼쪽이나 오른쪽 방향키가 눌려졌는지 확인합니다. 코드는 아래와 같습니다:

+ +
if(rightPressed) {
+    paddleX += 7;
+}
+else if(leftPressed) {
+    paddleX -= 7;
+}
+ +

만약 왼쪽 방향키를 누르면, paddle은 좌측으로 7픽셀 움직이고, 오른쪽 방향키를 누르면, 우측으로 7픽셀 움직입니다. 잘 작동하지만, 키를 너무 오래 누르고 있으면 paddle이 캔버스 밖으로 사라집니다. 아래처럼 코드를 수정해서 paddle이 캔버스 안에서만 움직이도록 개선합니다:

+ +
if(rightPressed && paddleX < canvas.width-paddleWidth) {
+    paddleX += 7;
+}
+else if(leftPressed && paddleX > 0) {
+    paddleX -= 7;
+}
+ +

paddleX 의 위치는 캔버스 왼쪽 끝 0 위치와 오른쪽 canvas.width-paddleWidth 에서 움직입니다.

+ +

위의 코드를 draw() 함수 아래쪽에 추가합니다.

+ +

이제 paddle이 화면에서 실제로 그려지도록 draw() 함수 안에서 drawPaddle() 을 호출합니다.  draw() 함수 안에  drawBall() 아래에 다음 코드를 추가합니다:

+ +
drawPaddle();
+
+ +

여러분의 코드와 비교해보세요

+ +

여기 움직이는 코드를 확인해보세요:

+ +

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

+ +
+

Exercise: paddle의 움직임을 빠르거나 느리게, 혹은 사이즈를 변경해보세요.

+
+ +

다음 단계

+ +

게임과 비슷해지긴 했지만 한가지 문제는 게임이 끝나지 않는다는 것입니다. 5단계에서 Game over를 추가할 것입니다.

+ +

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over")}}

diff --git a/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/track_the_score_and_win/index.html new file mode 100644 index 0000000000..76883a1655 --- /dev/null +++ b/files/ko/games/tutorials/2d_breakout_game_pure_javascript/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 +--- +
{{GamesSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/Games")}}
+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

+ +
+

이번 단계는  Gamedev Canvas tutorial 의 8번째 단계입니다.  Gamedev-Canvas-workshop/lesson8.html 에서 이번 단계의 소스 코드를 확인할 수 있습니다.

+
+ +

벽돌 깨기 기능은 잘 작동한다. 하지만 더 나은 게임이 되기 위해서, 유저가 벽돌을 깰 때마다 점수를 얻고, 그 점수를 기록하는 Score 기능을 만든다.

+ +

점수 계산하기

+ +

게임 안에 점수 기능이 있다면, 친구들이 더 좋아할 것이다. 그러기 위해서는 점수를 기록할 변수가 필요합니다. 작성중인 JS파일의 변수 영역의 하단에, 아래 코드를 추가하자.

+ +
var score = 0;
+ +

점수 화면을 만들고, 업데이트를 하기 위해서 drawScore() 함수가 필요하다. 아래 코드를 collisionDetection() 함수 아래에 추가하자.

+ +
function drawScore() {
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#0095DD";
+    ctx.fillText("Score: "+score, 8, 20);
+}
+ +

텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같다. — {{domxref("CanvasRenderingContext2D.font","font()")}} 함수에서 크기와 타입을 설정할 수 있다. 그런 다음 {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} 함수를 사용하여 글꼴의 색상을 설정하고 {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} 함수를 이용해서 캔버스에 배치 될 실제 텍스트와 배치 위치를 설정하는 데 사용한다. 첫 번째 매개 변수는 텍스트 자체다. 위의 코드는 현재 점의 수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치 될 좌표이다.

+ +

벽돌이 깨질 때마다 점수 변수의 값을 증가 시키기 위해서 collisionDetection() 함수에 강조 표시된 코드를 입력하여 수정한다.

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                }
+            }
+        }
+    }
+}
+ +

draw() 함수 안에서 위 함수를 호출하면 호출 될 때마다 다시 그리기 때문에 점수 변동을 확인할 수 있다. draw() 아래 코드를  drawPaddle() 아래에서 호출한다.

+ +
drawScore();
+ +

모든 벽돌이 파괴되었을 때 승리 메시지 표시

+ +

점수가 오르는 것은 좋지만, 평생 점수가 올라가진 않을 것이다. 모든 벽돌의 파괴가 결국 게임의 주된 목적이기 때문에 모든 점수를 얻는다면  승리 메시지를 표시해야한다.  collisionDetection()함수에 강조된 코드를 붙여넣는다.

+ +
function collisionDetection() {
+    for(var c=0; c<brickColumnCount; c++) {
+        for(var r=0; r<brickRowCount; r++) {
+            var b = bricks[c][r];
+            if(b.status == 1) {
+                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+                    dy = -dy;
+                    b.status = 0;
+                    score++;
+                    if(score == brickRowCount*brickColumnCount) {
+                        alert("YOU WIN, CONGRATULATIONS!");
+                        document.location.reload();
+                    }
+                }
+            }
+        }
+    }
+}
+ +

결국 사용자는 모든 벽돌을 파괴 한 순간, 실제로 게임에서 승리 할 수 ​​있다. 이는 게임과 관련하여 굉장히 중요하다. document.location.reload()기능은 페이지를 다시로드하고 경고를 클릭하면 게임을 다시 시작한다.

+ +

코드 비교

+ +

최종 코드는 아래와 같다. 지금까지 작성한 코드와 비교해보자.

+ +

 

+ +

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}}

+ +
+

추가학습: 벽돌을 깰 때마다 얻는 점수를 늘리고,  게임 클리어 시 최종 점수를 경고창에 표시해보자.

+
+ +

다음 단계

+ +

게임은 현재 꽤 멋지게 보인다. 다음 단계에서는,  Mouse controls (마우스로 패들 조종하는 방법) 을 통해서 게임을 즐길 수 있습니다.

+ +

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/bounce_off_the_walls/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/bounce_off_the_walls/index.html" deleted file mode 100644 index 2df00b91b9..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/bounce_off_the_walls/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 공을 벽에 튕기기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls")}}

- -
-

이 글은 Gamedev Canvas 튜토리얼에 포함된 10단계 중 3단계 글입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 Gamedev-Canvas-workshop/lesson3.html에서 확인해볼 수 있습니다.

-
- -

공이 움직이는 걸 보니 기쁩니다! 하지만 기쁨을 즐길 틈도 없이 공이 스크린 밖으로 사라져버리네요. 이 문제를 해결하기 위해 공이 캔버스의 4군데 모서리에 다달았을 때 튕겨나올 수 있도록 간단한 충돌 감지 기능(더 자세한 내용은 다음 글에서 다시 설명할 예정입니다)을 구현해야 합니다.

- -

간단한 충돌 감지

- -

충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 합니다.

- -

보다 계산을 쉽게 하기 위하여 ballRadius 변수를 만든 뒤 원의 반지름 값을 대입하여 계산하는데 사용합니다. 아래의 코드를 기존의 변수들 아래에 삽입하세요:

- -
var ballRadius = 10;
- -

이제drawBall() func기능 안에 볼을 그리는 코드를 아래와 같이 수정하세요:

- -
ctx.arc(x, y, ballRadius, 0, Math.PI*2);
- -

위 아래 방향으로 튕기기

- -

캔버스에는 총 4개의 모서리 즉, 4개의 벽이 있습니다. 일단 상단의 벽에 집중해 보겠습니다. 공을 그리는 매 프레임마다 우리는 볼이 상단 모서리에 닿았는지 확인해야합니다 — 닿았다면 볼이 움직이는 방향을 반대로 바꾸어 캔버스 안에 여전히 공이 보이도록 만들어주어야 합니다. 캔버스 내 위치 구조는 좌상단으로 부터 시작하는 것을 잊지마세요:

- -
if(y + dy < 0) {
-    dy = -dy;
-}
- -

만약 공의 위치에서 y값이 0보다 작은 경우 음/양수를 반대로 바꾸어주어 y 축의 방향을 바꾸어 줍니다. 공이 매 프레임마다 2픽셀만큼 움직이고 있었다면, 이제는 매 프레임마다 2픽셀만큼 "아래 방향으로" 이동할 것입니다.

- -

위 코드는 상단 모서리를 튕기도록 해주기 때문에 이번엔 하단 모서리를 튕기도록 해보겠습니다:

- -
if(y + dy > canvas.height) {
-    dy = -dy;
-}
- -

공의 위치에서 y값이 캔버스의 높이보다 큰 경우(좌상단으로부터 y값을 측정하기 때문에 상단모서리에서의 y값은 0, 하단모서리에서의 y값은 480, 즉 캔버서의 높이값임을 잊지마세요) y축 움직임의 반대 방향으로 튕겨냅니다.

- -

위의 두가지 코드를 하나로 합칠 수 있습니다:

- -
if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

둘 중 하나의 조건이라도 만족한다면, 공의 방향은 반대로 바뀝니다.

- -

좌우로 튕겨내기

- -

우리는 방금 상, 하단 모서리를 인식했으므로 이번엔 좌우 모서리를 생각해봅시다. 거의 같은 문제이므로 우리는 y 대신 x값을 대입하여 그대로 반복해주기만 하면 됩니다:

- -
if(x + dx > canvas.width || x + dx < 0) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height || y + dy < 0) {
-    dy = -dy;
-}
- -

이 후 위 코드를 draw() 함수블럭이 끝나는 중괄호 바로 전에 삽입합니다.

- -

공이 여전히 벽 밖으로 사라져요!

- -

코드를 테스트해보세요. — 아마 캔버스 모서리에서 튕겨나오는 볼이 인상적이지 않나요? 하지만 또 다른 문제가 생겼습니다. — 공이 벽을 튕겨나와 방향이 바뀌기 전에 살짝 벽 안으로 숨어버리네요:

- -

- -

이 문제는 우리가 충돌을 감지할 때 그 기준을 공의 원점에 두고 계산했지만, 원의 둘레를 기준으로 계산을 해야 하기 때문입니다. 벽에 공이 절반쯤 지난 뒤가 아니라 닿자마자 튕겨나와야 합니다. 이에 맞게 코드를 조금 수정해봅시다. 여러분이 삽입한 코드를 아래와 같이 수정해보세요:

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

공의 원점과 벽 사이의 거리가 공의 반지름과 같아졌을 때 공의 움직임이 바뀌도록 만들었습니다. 이제야 볼이 정확히 튕겨나오고 있네요.

- -

여러분의 코드를 비교해보세요

- -

자, 다시 여러분이 작성한 코드를 완성된 코드와 비교해보고 게임을 실행해보세요:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/redj37dc/","","370")}}

- -
-

Exercise: 공이 벽에 부딪힐 때마다 공의 색을 무작위로 변화시켜보세요.

-
- -

다음 단계

- -

이제 우리는 공이 게임판 안에서 어디서 어떻게 움직이고 있는지 파악했습니다. 네번째 챕터에서는 조작 가능한 배드를 구현해볼 것입니다. — 패드와 키보드 조작.

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/build_the_brick_field/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/build_the_brick_field/index.html" deleted file mode 100644 index 9560da25e9..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/build_the_brick_field/index.html" +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: 벽돌 만들기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection")}}

- -
-

이번 단계는 Gamedev Canvas tutorial의 여섯 번째 학습입니다. Gamedev-Canvas-workshop/lesson6.html에서 이번 학습의 소스코드를 확인할 수 있습니다.

-
- -

게임플레이 원리를 수정한 후에, 우리는 게임에서 패배할 수 있게 되었습니다. 이것은 실제 게임에 보다 가까운 느낌이기 때문에 훌륭합니다. 하지만 벽과 패들에 공이 튀기는 것 말고 할 수 있는 것이 없기 때문에 금방 지루해집니다. 벽돌깨기 게임에서 진정으로 필요로 한 것은 공으로 파괴할 벽돌입니다. 이 것이 지금 우리가 만들 것입니다!

- -

벽돌에 대한 변수 설정하기

- -

이번 학습의 모든 목표는 벽돌들을 위한 코드를 2차원 배열로 동작하는 반복문을 통해 제공하는 것입니다. 그러나 먼저 우리는 가로, 세로, 행, 열 등 벽돌에 대한 값을 정의할 몇몇 변수들을 설정해야 합니다. 지난 학습에서 작성한 코드에 아래 코드를 추가해봅시다.

- -
var brickRowCount = 3;
-var brickColumnCount = 5;
-var brickWidth = 75;
-var brickHeight = 20;
-var brickPadding = 10;
-var brickOffsetTop = 30;
-var brickOffsetLeft = 30;
- -

우리는 벽돌 배열 행과 열의 수, 그것들의 가로, 세로길이, 각 벽돌이 서로 닿지 않을 정도의 간격과 벽돌이 캔버스의 모서리에 닿지 않게 할 오프셋 변수들을 정의했습니다.

- -

우리는 2차원 배열에 벽돌을 담았습니다. 배열은 열 c, 행 r, 그리고 배열의 각 객체엔 화면에 벽돌을 그릴 위치를 나타낼 x, y 위치를 가지고 있습니다. 위에서 변수를 선언한 코드 뒤에 아래 코드를 추가해봅시다.

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0 };
-    }
-}
- -

위 코드는 행과 열 수만큼 반복되면서 새로운 벽돌을 만듭니다. 각 벽돌 객체는 이후에 충돌감지에 사용됩니다.

- -

벽돌을 그리는 방법

- -

이제 배열안의 모든 벽돌을 반복해서 화면에 그려줄 함수를 만들어봅시다. 코드는 아래와 같습니다.

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<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();
-        }
-    }
-}
- -

다시 행, 열 반복을 통해 각 벽돌의 x, y 값을 설정하고, 캔버스에 brickWidth * brickHeight 크기의 벽돌들을 그립니다. 문제는 모든 벽돌들이 좌표 (0, 0) 위치해있다는 것입니다. 우리는 약간의 연산을 통해 각 벽돌의 x, y 값을 계산해야 합니다.

- -
var brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
-var brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
- -

 

- -

brickX는 brickWidth + brickPadding에 c를 곱하고, brickOffsetLeft를 더한 값입니다. brickY는 변수 r, brickHeight, brickOffsetTop 변수를 사용한다는 것을 제외하곤 동일합니다. 이제 모든 벽돌들을 올바른 위치에, 알맞은 간격을 두고, 캔버스 모서리로부터 오프셋 값만큼의 거리를 둔 상태로 그릴수 있게되었습니다.

- -

brickX와 brickY 값을 (0, 0) 대신에 좌표 값으로 할당한 후에 drawBricks 함수의 마지막 버전은 아래와 같을 것입니다. 이 코드는 drawpaddle 함수 아래에 추가해봅시다.

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<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();
-        }
-    }
-}
- -

실제 벽돌을 그리기

- -

이 학습에서 마지막으로 할 일은 drawBrick함수를 호출하는 코드를 draw함수 어딘가에, 되도록이면 시작하는 부분에, 캔버스를 초기화하는 부분과 공을 그리는 사이에 추가하는 것입니다.  아래 코드를 drawBall() 코드 위에 추가해봅시다.

- -
drawBricks();
-
- -

코드 비교해보기

- -

이 부분에서 게임은 조금 더 흥미로워졌습니다.

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/t1zqmzLp/","","395")}}

- -
-

연습하기: 행과 열의 수를 바꿔서 벽돌의 수를 변경해보거나, 위치를 변경해봅시다.

-
- -

다음 단계

- -

이제 우리에겐 벽돌이 있습니다! 하지만 공은 벽돌들과의 반응이 없습니다. 우리는 다음 단계에서 이 문제에 대해 다룰 것입니다: 충돌 감지

- -

 

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection")}}

- -

 

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/collision_detection/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/collision_detection/index.html" deleted file mode 100644 index f312374938..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/collision_detection/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 충돌 감지 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Collision_detection -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

- -
-

이 학습은 Gamedev Canvas tutorial의 일곱 번째 단계입니다. Gamedev-Canvas-workshop/lesson7.html에서 이번 학습에서 완성된 코드를 확인할 수 있습니다.

-
- -

지난 학습에서 우린 화면에 벽돌을 표현했습니다. 그러나 공은 벽돌은 그냥 지나가버리고 게임은 아직 흥미로워지려면 멀어보입니다. 우린 공이 벽돌을 파괴하고 튕겨져 나올 수 있도록 충돌 감지 기능을 고려해봐야 합니다.

- -

물론 어떻게 적용할지는 우리가 결정할 문제입니다. 그러나 공이 벽돌에 닿았는지 계산하는 일은 꽤나 까다로울 수 있습니다. 왜냐하면 캔버스엔 이를 위한 기능이 없기 때문입니다.  이번 학습은 가능한 쉬운 방법으로 진행될 것입니다. 우린 공의 중앙이 어느 벽돌과 충돌하는지 확인할 것입니다. 이는 항상 완벽한 결과를 주진 않지만, 충돌 감지를 위한 정교한 방법은 무궁무진합니다. 그러나 이 방법 역시 기본적인 개념을 학습하기에 꽤 괜찮습니다.

- -

충돌 감지 함수

- -

이 모든 것을 시작하기 위해 우리는 모든 벽돌들을 순회하고 각 벽돌의 좌표를 공의 위치와 비교하는 충돌 감지 함수를 만들어야 합니다. 코드의 가독성을 향상시키기 위해 충돌 감지의 반복에서 사용할 벽돌 객체를 저장하는 b 변수를 정의할 것입니다.

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            // calculations
-        }
-    }
-}
- -

만약 공의 중앙이 어떤 벽돌의 범위 내에 있을 경우, 공의 방향을 바꾸게 됩니다. 공이 벽돌 안에 존재하려면, 아래 4가지 조건이 참이어야 합니다.

- - - -

이 조건을 코드로 작성해봅시다.

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                dy = -dy;
-            }
-        }
-    }
-}
- -

위 코드를 keyUpHandler() 함수 아래에 추가해봅시다.

- -

충돌 후에 벽돌을 사라지게 만들기

- -

위의 코드는 우리가 의도한대로 작동할 것이고 공은 방향을 바꿀 것입니다. 문제는 벽돌이 그대로 있다는 것입니다. 우린 이미 공이 부딪힌 벽돌을 제거하기 위한 방법을 고민해봐야 합니다. 우리는 화면에 있는 벽돌을 그릴지 결정하는 변수를 추가해서 이 문제를 해결할 수 있습니다, 벽돌을 초기화하는 코드에, status 속성을 각 벽돌 객체에 추가해봅시다. 아래와 같이 말입니다.

- -
var bricks = [];
-for(var c=0; c<brickColumnCount; c++) {
-    bricks[c] = [];
-    for(var r=0; r<brickRowCount; r++) {
-        bricks[c][r] = { x: 0, y: 0, status: 1 };
-    }
-}
- -

다음으로 drawBricks 함수에서 벽돌들을 그리기 전에 status 속성을 확인해야 합니다. 만약 status가 1이라면 벽돌을 그리고, 만약 0이라면 이미 공이 치고간 벽돌이므로 우린 더이상 화면에 그릴 필요가 없습니다. 아래와 같이 drawBricks 함수를 수정해봅시다,

- -
function drawBricks() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<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();
-            }
-        }
-    }
-}
- -

충돌 감지함수에서 상태 추적 및 업데이트

- -

이제 collisonDectection 함수에 벽돌 status 속성을 포함시켜야 합니다. 만약 벽돌이 활성 상태(status 1)이라면 충돌이 일어났는지 확인해야 합니다. 만약 충돌이 발생했다면 다시 그리지 않게 벽돌의 속성을 0으로 변경해야 합니다. collisionDetection 함수를 아래와 같이 수정합시다.

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                }
-            }
-        }
-    }
-}
- -

충돌 감지 활성화하기

- -

마지막으로 할일은 draw함수에서 collisionDetection 함수를 호출하는 것입니다. 아래 코드를 draw 함수에, drawPaddle() 아래에 추가해봅시다.

- -
collisionDetection();
-
- -

코드 비교하기

- -

이제 매 프레임마다 충돌 감지를 확인할 것입니다. 이제 우린 별돌을 파괴할 수 있습니다!

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/mkwtxgc3/3/","","395")}}

- -
-

연습하기: 벽돌이 부딪힐 때마다 색깔을 바꿔보세요.

-
- -

다음 단계

- -

우리는 충분히 여기까지 왔습니다! 이제 어덟 번째 장에서는 점수를 추가와 승패 판정 방법을 알아 볼 것입니다.

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/finishing_up/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/finishing_up/index.html" deleted file mode 100644 index b23a4b6b33..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/finishing_up/index.html" +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: 개발 마무리 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Finishing_up -tags: - - Canvas - - Games - - JavaScript -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -
-

Gamedev Canvas tutorial.의 10 개의 레슨 중 마지막 단계 입니다. 이 수업을 마친 후 비교하여 살펴 볼 소스코드는 Gamedev-Canvas-workshop/lesson10.html. 여기서 찾아 볼 수 있습니다.

-
- -

우리가 쓰는 모든 게임에 항상 개선해야 할 것이 있습니다. 예를 들어 이 게임에 2인용 플레이어를 추가할 수 있습니다. 한두 번 잘못 만들어 경기를 끝낼 수도 있습니다. 그러나 우리는 코드 렌더링을 향상시켜 발전할 수 있습니다.

- -

플레이어에게 생명을 부여하기

- -

생명을 구현하는 방법은 아주 간단하다. 먼저 변수를 선언했던 곳과 같은 장소에서  변수를 추가하여 생명 수를 저장합니다.

- -
var lives = 3; //남은 생명 수
- -

남은 생명 수를 표시하는 방법은 점수 카운터가 그려지는 것과 같은 형태 입니다. drawScore()함수 아래에 다음 기능을 추가 하십시오.

- -
function drawLives() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Lives: "+lives, canvas.width-65, 20);
-}
- -

지금까지 바닥에 닿으면 바로 게임을 끝내는 형식이였습니다. 이제 우리는 더 이상 게임을 이용할 수 없게 될 때까지 남은 생명 수를 줄일 것입니다. 또한 플레이어가 게임 오버되면 다시 생명과 블럭들을 리셋하여 공과 패들 위치를 재설정할 수 있습니다. draw() 함수는 다음 세 줄로 대체합니다:

- -
alert("GAME OVER");
-document.location.reload();
-clearInterval(interval); // Needed for Chrome to end game
-
- -

 

- -

 

- -

이를 통해 아래와 같이 약간 복잡한 논리를 추가할 수 있습니다:

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

자, 이제 공이 화면의 맨아래 가장자리에 맞으면 생명(lives)을 하나 뺍니다. 생명이 없다면 게임이 끝나고 아직 남아있다면 공의 위치와 패들의 위치가 재설정 됩니다.

- -

남은 생명 표시 렌더링하기

- -

이제 draw()함수 내에서 drawLives()에 생명 수를 추가하고 drawLives() 아래에 생명 수를 추가해야 합니다.

- -
drawLives();
-
- -

requestAnimationFrame()을 사용하여 랜더링 개선하기

- -

이제 게임 역학과 연결이 되지 않고, 그것이 렌더링되는 방식에 대해 연구해 봅시다. {{domxref("window.requestAnimationFrame", "requestAnimationFrame")}} 브라우저가 현재 Replace를 사용하여 구현한 고정 프레임보다 게임을 더 잘 랜더링할 수 있도록 {{domxref("windowTimers.setInterval()", "setInterval()")}} 도와줍니다:

- -
var interval = setInterval(draw, 10);
- -

간단하게:

- -
draw();
- -

다음 각 인스턴스를 제거합니다:

- -
clearInterval(interval); // Needed for Chrome to end game
-
- -

그 다음, draw()함수의 맨 아래 (닫는 '}'바로 전에) 다음 줄을 추가하여 draw()함수가 반복적으로 자신을 호출하게 합니다:

- -
requestAnimationFrame(draw);
- -

이 draw() 함수는 현재 requestAnimationFrame() 루프 내에서 반복적으로 실행되고 있지만, 고정된 10ms 프레임 대신 프레임의 제어권을 브라우저에 다시 부여 합니다. 이는 프레임과 적절하게 일치하고 필요할 때만 모양을 만들 것입니다. 이것은 이전의 setInterval() 방법보다 더 효율적이고 부드럽게 애니메이션 루프를 만듭니다.

- -

코드 비교하기

- -

그것이 이 레슨의 전부입니다. 게임의 최종버전이 준비되 있고 시작할 준비가 되어 있습니다!

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/dfh2tpu1/","","395")}}

- -
-

Exercise: 남은 생명에 따라 공이 패들에서 튕겨나가는 각도를 변경합니다.

-
- -

게임 오버 - 마무리!

- -

축하합니다! 당신은 모든 수업을 완수하였습니다! 이쯤 되면 이제 캔버스의 조작 기초와 간단한 2D 게임 구현 방법을 알게 되었을 것 입니다. 이제 몇 가지 프레임워크를 배우고 게임 개발을 해 본 좋은 시간이였습니다.

- -

이 시리즈의 2D breakout game using Phaser 또는 Cyber Orb built in Phaser 튜토리얼을 확인해 볼 수 있습니다. Games section on MDN의 섹션에서 더 많은 지식과 영감을 얻으십시오.

- -

 

- -

{{Previous("Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/game_over/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/game_over/index.html" deleted file mode 100644 index d0c72fb8b3..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/game_over/index.html" +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: 게임 오버 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over -tags: - - 게임 - - 게임 오버 - - 그래픽 - - 자바스크립트 - - 초심자 - - 캔버스 - - 튜토리얼 -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field")}}

- -
-

이것은 Gamedev Canvas tutorial 의 다섯 번째 학습입니다. 이 학습을 통해 완성된 코드는 Gamedev-Canvas-workshop/lesson5.html 에서 확인할 수 있습니다.

-
- -

공이 벽에서 튕겨져 나오는 것과 패들을 움직이는 것을 보는건 재밌지만, 더 진전이 필요합니다. 게임에서 질 수 있다면 좋겠습니다. 벽돌 깨기 게임에서 패배하는 구조는 꽤 단순합니다. 만약 패들이 공을 놓친다면, 공은 캔버스의 아래 면에 닿을 것이고, 그대로 게임은 끝납니다.

- -

게임 오버 기능 적용하기

- -

'게임 오버' 기능을 만들어봅시다. 아래에 세 번째 학습에서 작성한, 벽에서 공을 반사시키는 코드의 일부가 있습니다.

- -
if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
-    dx = -dx;
-}
-
-if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
-    dy = -dy;
-}
- -

사면 모두에서 공을 튕겨내지 말고 왼쪽, 위쪽, 오른쪽, 세 면에만 적용해봅시다. 아래쪽 면에 닿는 순간 게임은 끝납니다. 우리는 공이 밑면에 충돌하는 순간 "게임 오버" 상태로 바뀌게 하기 위해 두 번째 if 블록을 수정할 것입니다. 우선 경고 메시지를 보여주고 페이지를 리로딩해서 게임을 다시 시작하게 할 것입니다. 두번째 if 블록을 아래와 같이 수정해봅시다.

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    alert("GAME OVER");
-    document.location.reload();
-}
- -

Paddle은 공을 튕겨내야지

- -

이번 학습에서 할 마지막 일은 공과 패들 사이의 충돌 감지같은, 공을 게임 화면으로 되돌아가게 튕겨내는 기능을 만드는 것입니다. 가장 쉬운 방법은 공의 중심이 패들의 내부에 있는지 확인하는 것이다. 위에서 수정한 코드를 약간 고쳐봅시다.

- -
if(y + dy < ballRadius) {
-    dy = -dy;
-} else if(y + dy > canvas.height-ballRadius) {
-    if(x > paddleX && x < paddleX + paddleWidth) {
-        dy = -dy;
-    }
-    else {
-        alert("GAME OVER");
-        document.location.reload();
-    }
-}
- -

공이 캔버스의 밑면에 닿는 순간, 공이 패들의 안쪽에 있는지 확인해야 합니다. 만약 그렇다면, 우리가 기대하는대로 공은 튕겨져야 합니다. 그게 아니라면, 게임의 전과 같이 끝나야 합니다.

- -

코드 비교하기

- -

여기 완성된 코드가 있으니 작성한 코드와 비교해봅시다.

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/z4zy79fo/","","395")}}

- -
-

연습: 공이 패들에 닿았을 때 공의 속도를 빠르게 만들어봅시다.

-
- -

다음 단계

- -

지금까지 아주 잘 하고 있습니다. 게임은 플레이 할 가치가 생겼고 이젠 게임이 끝날 수도 있습니다. 하지만 뭔가가 빠졌습니다. 여섯 번째 학습 — 벽돌 영역을 만들어보기 — 로 이동해서 몇 개의 벽돌을 만들어 봅시다.

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Build_the_brick_field")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/index.html" deleted file mode 100644 index 8b0e4da888..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/index.html" +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: 순수한 자바스크립트를 이용한 2D 벽돌깨기 게임 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임 -tags: - - 2D - - 게임 - - 자바스크립트 - - 캔버스 - - 튜토리얼 -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
- -

{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}}

- -

이 튜토리얼을 차례차례 진행하면서 우리는 HTML5 {{htmlelement("canvas")}} 로 렌더되는 순수하게 JavaScript로만 쓰여진 간단한 MDN 벽돌깨기 게임을 만들 것입니다.

- -

모든 과정은 플레이 가능하고 편집가능한 라이브 샘플을 포함하고 있습니다. 이 샘플을 통해, 여러분은 중간 스테이지들이 어떻게 보여져야 하는지 확인할 수 있습니다. 여러분은 이미지의 렌더링과 움직임, 충돌 감지, 컨트롤 메카니즘들과 승리와 패배 상태와 같은 기본적인 게임 원리들을 구현하기 위해서, {{htmlelement("canvas")}}엘리먼트의 기본적인 사용 방법을  배우게 될 것입니다.

- -

이 시리즈를 최대한 활용하려면 중급의 JavaScript 지식이 있어야 합니다. 이 튜토리얼을 끝낸 후에는 여러분은 스스로 간단한 웹 게임들을 만들 수 있게 될 것입니다.

- -

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.

- -

강의 내용

- -

모든 강의 내용과 우리가 함께 만드는 MDN 벽돌깨기 게임의 다른 버전들은 GitHub에서 찾을 수 있습니다.:

- -
    -
  1. 캔버스 생성과 그리기
    2. -
  2. 공 움직이기
    3. -
  3. 벽으로 부터 튕겨나오기
    4. -
  4. 패들과 키보드 컨트롤
    5. -
  5. 게임 오버
    6. -
  6. 벽돌 필드 만들기
    7. -
  7. 충돌 감지
    8. -
  8. 점수 추적과 승리
    9. -
  9. 마우스 컨트롤
    10. -
  10. 마무리
    11. -
- -

웹 게임 개발의 확고한 지식을 얻기 위한 최고의 방법은 순수하게 JavaScript만 이용해서 시작하는 것입니다. 이후에, 여러분은 프로젝트에 프레임워크를 골라서 사용할 수도 있습니다.  프레임워크들은 JavaScript로 만들어진 도구일 뿐입니다. 따라서 여러분이 프레임워크를 사용하더라도, 프레임워크 밑에서 정확히 어떤 일이 일어나는지 알기 위해 언어를 배우는것이 좋습니다. 프레임워크들은 개발 속도를 올려주고, 게임의 지루한 부분들을 해결하는데 도움을 줍니다. 하지만 어떤 일들이 기대한대로 일어나지 않는다면, 여러분은 디버그를 시도하거나 여러분 스스로 순수하게 JavaScript만 이용한 솔루션을 작성할 수 도 있습니다.

- -
-

노트: 만약 여러분이 게임 라이브러리를 이용한 2D 웹 게임 개발의 학습에 흥미가 있다면,  이 시리즈의 대응 파트인 2D breakout game using Phaser를 살펴보시기 바랍니다.

-
- -
-

노트: 이 시리즈의 내용들은 게임개발 워크숍의 재료로 쓰일 수 있습니다. 또한, 만약 여러분이 게임개발에 있어 강연을 원한다면 이 튜토리얼에 기초한 Gamedev Canvas Content Kit를 활용할 수 있습니다.

-
- -

다음 단계

- -

좋습니다, 이제 시작하도록 합시다. 첫 번째 챕터인 캔버스 생성과 그리기 부터 시작합니다.

- -

{{Next("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기")}} 

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/mouse_controls/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/mouse_controls/index.html" deleted file mode 100644 index e05faf32e8..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/mouse_controls/index.html" +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: 마우스로 패들 조종하기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Mouse_controls -tags: - - Canvas - - Games - - JavaScript -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Mouse_controls ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

- -
-

이 레슨은 Gamedev Canvas tutorial.의 10개 중 9 번째 단계입니다. 당신은 Gamedev-Canvas-workshop/lesson9.html. 이 소스코드에서 이 수업의 교훈을 찾을 수 있습니다.

-
- -

경기 자체가 사실상 끝났으므로, 이를 다듬는 작업을 해봅시다. 우리는 이미 키보드로 조종하는 코드를 추가했지만 마우스 조종하는 코드를 쉽게 추가할 수 있습니다.

- -

마우스 이동 감지하기

- -

마우스 움직임을 감지하기 위해 감지를 하는 것은 키 감지를 하는 것보다 훨씬 더 쉽습니다. 우리가 필요한 것은 {{event("mousemove")}} 이 이벤트 감지입니다. 이 keyup event 바로 아래에 이 행을 추가하십시오.

- -
document.addEventListener("mousemove", mouseMoveHandler, false);
- -

마우스 움직임에 따라 패들 이동 하기

- -

포인터 좌표에 따라 패들 위치를 업데이트를 할 수 있습니다. 다음과 같은 핸들러 기능을 정확하게 할 것입니다. 추가한 이전 줄 아래에 다음 함수를 추가하십시오:

- -
function mouseMoveHandler(e) {
-    var relativeX = e.clientX - canvas.offsetLeft;
-    if(relativeX > 0 && relativeX < canvas.width) {
-        paddleX = relativeX - paddleWidth/2;
-    }
-}
- -

이 함수에서 우리는 먼저 상대적인 relativeX 를 구합니다. 이 값은 뷰포트(e.clientX)와 캔버스 왼쪽 가장자리 (canvas.offsetLeft) 사이의 거리에 마우스 위치를 뺀 값입니다. 상대적인 X 포인터 위치가 0보다 크고 캔버스 폭보다 적으면 포인터가 경계 내에 있게 되고, paddleX의 위치(패들 왼쪽 가장자리에 배치되어 있다)는 패들 width의 반을 뺀 relativeX의 값으로 설정되므로 이동은 실제로 패들 가운데 상대적으로 이동이 됩니다.

- -

이제 패들은 마우스 커서의 움직임을 따르겠지만, 움직임을 캔버스 크기로 제한하고 있기 때문에 어느 쪽에서도 완전히 사라지지 않을 것입니다.

- -

코드 비교하기

- -

지금까지 해왔던 코드를 한번 비교해보세요.

- -

{{JSFiddleEmbed("https://jsfiddle.net/raymondjplante/vt7y5hcp/","","395")}}

- -
-

Exercise: 패들이 캔버스 양쪽 가장자리에서 반만 잘려나가 보일 것 입니다. 패들 이동 제한 경계를 조정해 보세요.

-
- -

다음 단계

- -

이제 우리는 완전한 게임을 할 수 있게 되었습니다. 우리는 몇 가지 작은 코드만으로 이 레슨을 마치게 될 것 입니다! — Finishing up. (마지막)

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Track_the_score_and_win", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Finishing_up")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/paddle_and_keyboard_controls/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/paddle_and_keyboard_controls/index.html" deleted file mode 100644 index 47cde1be4e..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/paddle_and_keyboard_controls/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: Paddle과 키보드 컨트롤 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Paddle_and_keyboard_controls -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over")}}

- -
-

이 글은 Gamedev Canvas tutorial의 10단계 중 4단계 입니다. 이 글을 다 읽고 난 뒤 완성된 소스코드는 Gamedev-Canvas-workshop/lesson4.html 에서 확인할 수 있습니다.

-
- -

공이 계속해서 벽을 튕기며 이동하는 모습을 볼 수 있지만, 현재로서는 그것을 컨트롤 할 방법이 없습니다. 컨트롤 할 수 없으면 게임이 아니죠! paddle을 컨트롤 할 수 있는 몇가지 상호작용을 추가해 봅시다.

- -

공을 치기 위한 paddle 정의

- -

먼저, 우리는 공을 치기 위한 paddle이 필요합니다. 이를 위해 몇가지 변수들을 정의합시다. 코드 상단에 다른 변수들과 함께 아래 변수들을 추가하세요:

- -
var paddleHeight = 10;
-var paddleWidth = 75;
-var paddleX = (canvas.width-paddleWidth)/2;
- -

여기에서 paddle의 높이와 너비, 그리고  x 축 위에 시작 지점을 정의합니다. paddle을 스크린에 그리는 함수를 만듭시다. drawBall() 함수 아래에 다음 코드를 추가하세요:

- -
function drawPaddle() {
-    ctx.beginPath();
-    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
- -

유저의 paddle 컨트롤

- -

paddle은 우리가 원하는 곳 어디든 그릴 수 있지만, 사용자의 컨트롤에 반응해야 합니다. — 키보드 컨트롤을 구현합시다. 다음 내용이 필요합니다.:

- - - -

버튼을 누르는 것은 boolean 변수로 정의하고 초기화 합니다. 아래 코드를 변수 선언 부분에 추가하세요. :

- -
var rightPressed = false;
-var leftPressed = false;
- -

처음에는 컨트롤 버튼이 눌려지지 않은 상태이므로 두개의 기본값은 false 입니다. 키가 눌렸음을 인식하기 위해, 이벤트 리스너를 설정합니다. 자바스크립트 하단에 setInterval() 바로 위에 아래 코드를 추가합니다.:

- -
document.addEventListener("keydown", keyDownHandler, false);
-document.addEventListener("keyup", keyUpHandler, false);
- -

키보드 중 어떤 키 하나가 눌려서 keydown 이벤트가 발생하면, keyDownHandler() 함수가 실행됩니다. 두번째 리스너에도 같은 패턴이 적용됩니다: 키에서 손을 때면 keyup 이벤트가 keyUpHandler() 함수를 실행합니다 . addEventListener() 아래에 다음 코드를 추가하세요:

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

키를 누르면 변수에 정보가 저장됩니다. 각 경우에 관련된 변수가 true 로 설정됩니다. 키에서 손을 때면, 변수값은 false로 되돌아갑니다.

- -

두 함수 모두 e 변수로 표시되는 이벤트를 파라미터로 사용합니다. 이것으로 유용한 정보를 얻을 수 있습니다: keyCode 는 눌려진 키에 대한 정보를 가지고 있습니다. 예를 들어 키 코드 37 은 왼쪽 방향키이고 39 는 오른쪽 방향키 입니다. 만약에 왼쪽 방향키를 누르면, leftPressed 변수가 true 로 설정되고, 왼쪽 방향키에서 손을 때면 leftPressed 변수가 false로 설정됩니다. 오른쪽 방향키와 rightPressed 변수에도 동일한 패턴이 적용됩니다.

- -

Paddle 이동 로직

- -

이제 우리는 눌려진 키, 이벤트 리스너, 관련된 함수에 대한 정보를 저장할 변수를 가지고 있습니다. 이제 실제 코드를 사용하여 이것들을 사용하고 paddle을 화면에서 움직여봅시다. draw() 함수에서, 각각의 프레임이 렌더링 될때마다 왼쪽이나 오른쪽 방향키가 눌려졌는지 확인합니다. 코드는 아래와 같습니다:

- -
if(rightPressed) {
-    paddleX += 7;
-}
-else if(leftPressed) {
-    paddleX -= 7;
-}
- -

만약 왼쪽 방향키를 누르면, paddle은 좌측으로 7픽셀 움직이고, 오른쪽 방향키를 누르면, 우측으로 7픽셀 움직입니다. 잘 작동하지만, 키를 너무 오래 누르고 있으면 paddle이 캔버스 밖으로 사라집니다. 아래처럼 코드를 수정해서 paddle이 캔버스 안에서만 움직이도록 개선합니다:

- -
if(rightPressed && paddleX < canvas.width-paddleWidth) {
-    paddleX += 7;
-}
-else if(leftPressed && paddleX > 0) {
-    paddleX -= 7;
-}
- -

paddleX 의 위치는 캔버스 왼쪽 끝 0 위치와 오른쪽 canvas.width-paddleWidth 에서 움직입니다.

- -

위의 코드를 draw() 함수 아래쪽에 추가합니다.

- -

이제 paddle이 화면에서 실제로 그려지도록 draw() 함수 안에서 drawPaddle() 을 호출합니다.  draw() 함수 안에  drawBall() 아래에 다음 코드를 추가합니다:

- -
drawPaddle();
-
- -

여러분의 코드와 비교해보세요

- -

여기 움직이는 코드를 확인해보세요:

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/tgn3zscj/","","395")}}

- -
-

Exercise: paddle의 움직임을 빠르거나 느리게, 혹은 사이즈를 변경해보세요.

-
- -

다음 단계

- -

게임과 비슷해지긴 했지만 한가지 문제는 게임이 끝나지 않는다는 것입니다. 5단계에서 Game over를 추가할 것입니다.

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Game_over")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/track_the_score_and_win/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/track_the_score_and_win/index.html" deleted file mode 100644 index 76883a1655..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/track_the_score_and_win/index.html" +++ /dev/null @@ -1,100 +0,0 @@ ---- -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 ---- -
{{GamesSidebar}}
- -
{{IncludeSubnav("/en-US/docs/Games")}}
- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

- -
-

이번 단계는  Gamedev Canvas tutorial 의 8번째 단계입니다.  Gamedev-Canvas-workshop/lesson8.html 에서 이번 단계의 소스 코드를 확인할 수 있습니다.

-
- -

벽돌 깨기 기능은 잘 작동한다. 하지만 더 나은 게임이 되기 위해서, 유저가 벽돌을 깰 때마다 점수를 얻고, 그 점수를 기록하는 Score 기능을 만든다.

- -

점수 계산하기

- -

게임 안에 점수 기능이 있다면, 친구들이 더 좋아할 것이다. 그러기 위해서는 점수를 기록할 변수가 필요합니다. 작성중인 JS파일의 변수 영역의 하단에, 아래 코드를 추가하자.

- -
var score = 0;
- -

점수 화면을 만들고, 업데이트를 하기 위해서 drawScore() 함수가 필요하다. 아래 코드를 collisionDetection() 함수 아래에 추가하자.

- -
function drawScore() {
-    ctx.font = "16px Arial";
-    ctx.fillStyle = "#0095DD";
-    ctx.fillText("Score: "+score, 8, 20);
-}
- -

텍스트를 캔버스 안에 그리는 것은 도형을 그리는 작업과 비슷하다. 폰트를 정의하는 것은 CSS에서의 작업과 같다. — {{domxref("CanvasRenderingContext2D.font","font()")}} 함수에서 크기와 타입을 설정할 수 있다. 그런 다음 {{domxref("CanvasRenderingContext2D.fillStyle()","fillStyle()")}} 함수를 사용하여 글꼴의 색상을 설정하고 {{domxref("CanvasRenderingContext2D.fillText","fillText()")}} 함수를 이용해서 캔버스에 배치 될 실제 텍스트와 배치 위치를 설정하는 데 사용한다. 첫 번째 매개 변수는 텍스트 자체다. 위의 코드는 현재 점의 수를 나타내며 마지막 두 매개 변수는 텍스트가 캔버스에 배치 될 좌표이다.

- -

벽돌이 깨질 때마다 점수 변수의 값을 증가 시키기 위해서 collisionDetection() 함수에 강조 표시된 코드를 입력하여 수정한다.

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                }
-            }
-        }
-    }
-}
- -

draw() 함수 안에서 위 함수를 호출하면 호출 될 때마다 다시 그리기 때문에 점수 변동을 확인할 수 있다. draw() 아래 코드를  drawPaddle() 아래에서 호출한다.

- -
drawScore();
- -

모든 벽돌이 파괴되었을 때 승리 메시지 표시

- -

점수가 오르는 것은 좋지만, 평생 점수가 올라가진 않을 것이다. 모든 벽돌의 파괴가 결국 게임의 주된 목적이기 때문에 모든 점수를 얻는다면  승리 메시지를 표시해야한다.  collisionDetection()함수에 강조된 코드를 붙여넣는다.

- -
function collisionDetection() {
-    for(var c=0; c<brickColumnCount; c++) {
-        for(var r=0; r<brickRowCount; r++) {
-            var b = bricks[c][r];
-            if(b.status == 1) {
-                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
-                    dy = -dy;
-                    b.status = 0;
-                    score++;
-                    if(score == brickRowCount*brickColumnCount) {
-                        alert("YOU WIN, CONGRATULATIONS!");
-                        document.location.reload();
-                    }
-                }
-            }
-        }
-    }
-}
- -

결국 사용자는 모든 벽돌을 파괴 한 순간, 실제로 게임에서 승리 할 수 ​​있다. 이는 게임과 관련하여 굉장히 중요하다. document.location.reload()기능은 페이지를 다시로드하고 경고를 클릭하면 게임을 다시 시작한다.

- -

코드 비교

- -

최종 코드는 아래와 같다. 지금까지 작성한 코드와 비교해보자.

- -

 

- -

{{JSFiddleEmbed("https://jsfiddle.net/yumetodo/2m74vr9r/1/","","395")}}

- -
-

추가학습: 벽돌을 깰 때마다 얻는 점수를 늘리고,  게임 클리어 시 최종 점수를 경고창에 표시해보자.

-
- -

다음 단계

- -

게임은 현재 꽤 멋지게 보인다. 다음 단계에서는,  Mouse controls (마우스로 패들 조종하는 방법) 을 통해서 게임을 즐길 수 있습니다.

- -

{{PreviousNext("Games/Workflows/2D_Breakout_game_pure_JavaScript/Collision_detection", "Games/Workflows/2D_Breakout_game_pure_JavaScript/Mouse_controls")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\352\263\265_\354\233\200\354\247\201\354\235\264\352\270\260/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\352\263\265_\354\233\200\354\247\201\354\235\264\352\270\260/index.html" deleted file mode 100644 index 5a8b02904e..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\352\263\265_\354\233\200\354\247\201\354\235\264\352\270\260/index.html" +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: 공 움직이기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기 -tags: - - 2D - - 게임 - - 루프 - - 비기너 - - 움직임 - - 자바스크립트 - - 캔버스 - - 튜토리얼 -translation_of: Games/Tutorials/2D_Breakout_game_pure_JavaScript/Move_the_ball ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls")}}

- -
-

이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 두 번째 과정입니다.  Gamedev-Canvas-workshop/lesson2.html에서 이 강의의 완성된 코드를 볼 수 있습니다.

-
- -

여러분은 이전 과정에서 어떻게 공이 그려지는지 배웠습니다. 이젠 공을 움직이게 만들어보죠! 기술적으로는 화면에 공을 그렸다가 지우는 과정을 반복하게 되는데, 매 프레임마다 공의 위치를 조금씩 다르게 해서 그리면 공이 움직이는것 처럼 보이게 됩니다. 마치 영화 화면이 움직이는 방식처럼 말이죠!

- -

드로잉 루프를 정의하기

- -

매 프레임마다 캔버스에 그리는것을 지속적으로 갱신하기 위해서는, 계속해서 그리는 것을 반복하게 만들어주는 함수가 필요합니다. 이 함수는 매 프레임마다 위치를 바꿔주기 위한 몇가지 변수들을 포함합니다.  JavaScript 타이밍 함수인 {{domxref("WindowTimers.setInterval()", "setInterval()")}}나 {{domxref("window.requestAnimationFrame()", "requestAnimationFrame()")}}를 이용하면 함수를 몇번이고 계속 반복해서 실행할 수 있습니다..

- -

현재 여러분의 HTML파일 안에 있는 JavaScript중에 처음 두 줄만 제외하고 나머지는 모두 지워주세요. 지운 후에는 아래에 있는 코드를 추가해주세요. draw()함수는 setInterval를 통해서 10밀리초마다 실행됩니다.

- -
function draw() {
-    // drawing code
-}
-setInterval(draw, 10);
- -

무한히 작동하는 setInterval 함수 덕에, draw() 함수는 우리가 멈추기 전 까지 10밀리초마다 영원히 호출됩니다. 이제 공을 그려봅시다! 다음 코드를 여러분의 draw() 함수 안에 추가해주세요.

- -
ctx.beginPath();
-ctx.arc(50, 50, 10, 0, Math.PI*2);
-ctx.fillStyle = "#0095DD";
-ctx.fill();
-ctx.closePath();
-
- -

이제 바뀐 코드를 실행해 보세요. 공은 매 프레임마다 다시 그려지게 됩니다.

- -

움직이게 만들기

- -

공이 움직이지 않고 있기 때문에, 여러분은 공이 다시 그려지고 있다는 사실을 알아챌 수 는 없었을 것입니다. 이제 공을 움직이게 바꿔봅시다. 첫 번째로, (50,50)이라는 지정된 좌표 대신에, x와 y라는 변수를 이용해서 화면 하단 중앙에서 그려지도록 하겠습니다. 

- -

x와 y를 정의하기 위해서 다음 두 줄을 여러분의 draw() 함수위에 추가해주세요.

- -
var x = canvas.width/2;
-var y = canvas.height-30;
-
- -

그 다음에는 draw() 함수를 갱신할 것입니다. 아래 코드에서 강조된 줄에서 처럼, {{domxref("CanvasRenderingContext2D.arc()","arc()")}}메소드안에서 x와 y 변수를 사용하게 됩니다.

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-}
-
- -

이제 중요한 부분입니다. 공을 움직이는 것을 표현하기 위해 x와 y에 작은 값을 매 프레임마다 더해줄 것입니다. 그 작은 값을 dx와 dy라 정의하고, 각각 2와 -2로 그 값을 정해보겠습니다. 다음 코드를 여러분의 x와 y변수가 정의된 코드 아래에 추가하세요.

- -
var dx = 2;
-var dy = -2;
-
- -

마지막으로 할 일은 dx와 dy변수를 이용해서 매 프레임마다 x와 y변수를 갱신해 주는 것입니다. 그렇게 하면 매 갱신마다 공은 새 위치에 그려지게 됩니다. 다음 코드에 표시된 새로운 두 줄의 코드를 여러분의 draw() 함수에 추가해주세요.

- -
function draw() {
-    ctx.beginPath();
-    ctx.arc(x, y, 10, 0, Math.PI*2);
-    ctx.fillStyle = "#0095DD";
-    ctx.fill();
-    ctx.closePath();
-    x += dx;
-    y += dy;
-}
- -

여러분의 코드를 다시 저장하고, 브라우저를 열어 실행해보세요. 공은 잘 움직이는군요. 뒤에 흔적이 남기는 하지만 말이죠.

- -

- -

다음 프레임 전에 캔버스를 지우기

- -

공이 흔적을 남기는 것은, 매 프레임마다 공을 그릴 때 이전 프레임을 지워주지 않았기 때문입니다. 하지만 걱정할 것은 없습니다. 캔버스의 내용들을 지워주기 위한 메소드인 {{domxref("CanvasRenderingContext2D.clearRect()","clearRect()")}}가 있으니까요. 이 메소드는 네 개의 파라미터가 필요합니다. 직사각형의 좌상단 모서리를 표시할 x와 y좌표, 그리고 직사각형의 우하단 모서리를 표시할 x와 y좌표가 바로 그것이죠. 이 좌표들로 생기는 사각형 안에 있는 것들은 전부 지워지게 될 것입니다.

- -

다음 코드에서 강조된 새로운 한줄의 코드를 draw() 함수에 추가하세요.

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

여러분의 코드를 저장하고, 다시 실행해보세요. 이번에는 흔적없이 공이 움직이는 것을 보실 수 있을 것입니다. 매 10밀리초마다 캔버스는 지워지고, 새로운 x와 y값의 좌표를 가지는 공이 다음 프레임에 그려지게 되는 것이죠.

- -

코드 정리하기

- -

다음 강좌에서도 계속해서 몇가지 명령들을 draw() 함수에다 추가해야 합니다. 그렇기 때문에 코드를 최대한 간단하고 깨끗하게 유지하는 것이 좋습니다. 공을 움직이는 코드를 분리된 함수로 옮기는 것 부터 시작해보죠!

- -

현재의 draw() 함수를 다음의 분리된 두 함수로 바꿔주세요.

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

여러분의 코드와 비교해보세요

- -

아래의 라이브 데모에서 이 강의의 완성된 코드를 확인할 수 있습니다. 어떻게 작동하는지 더 잘 이해하기 위해 플레이 해보세요.

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/3x5foxb1/","","415")}}

- -
-

연습해보기: 움직이는 공의 속도를 바꾸거나, 움직이는 방향을 바꿔보세요.

-
- -

다음 단계로

- -

우리는 공을 그리고 움직이게 만들었지만, 캔버스 모서리 밖으로 사라져버립니다. 세 번째 챕터에서는 공이 벽으로부터 튕겨 나오기 위한 방법을 알아볼 것입니다.

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/Bounce_off_the_walls")}}

diff --git "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\354\272\224\353\262\204\354\212\244_\354\203\235\354\204\261\352\263\274_\352\267\270\353\246\254\352\270\260/index.html" "b/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\354\272\224\353\262\204\354\212\244_\354\203\235\354\204\261\352\263\274_\352\267\270\353\246\254\352\270\260/index.html" deleted file mode 100644 index a7f1ed4130..0000000000 --- "a/files/ko/games/tutorials/\354\210\234\354\210\230\355\225\234_\354\236\220\353\260\224\354\212\244\355\201\254\353\246\275\355\212\270\353\245\274_\354\235\264\354\232\251\355\225\234_2d_\353\262\275\353\217\214\352\271\250\352\270\260_\352\262\214\354\236\204/\354\272\224\353\262\204\354\212\244_\354\203\235\354\204\261\352\263\274_\352\267\270\353\246\254\352\270\260/index.html" +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: 캔버스 생성과 그리기 -slug: Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/캔버스_생성과_그리기 -tags: - - 2D - - 게임 - - 비기너 - - 자바스크립트 - - 캔버스 - - 튜토리얼 -translation_of: >- - Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it ---- -
{{GamesSidebar}}
{{IncludeSubnav("/ko/docs/Games")}}
- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기")}}

- -
-

이 강의는 게임 개발 캔버스 튜토리얼의 10단계 중 첫 번째 과정입니다. Gamedev-Canvas-workshop/lesson1.html에서 이 강의의 완성된 코드를 볼 수 있습니다.

-
- -

게임의 기능들을 작성하기 전에, 게임 내부에 렌더링 하기 위한 기본 구조들을 HTML과 {{htmlelement("canvas")}} 엘리먼트를 사용하여 만들어야 합니다.

- -

게임의 HTML

- -

HTML문서 구조는 꽤 간단합니다. 게임은 {{htmlelement("canvas")}} 엘리먼트에 렌더링됩니다. 여러분이 좋아하는 텍스트 에디터로 새로운 HTML 문서를 생성하여 index.html로 저장하고, 아래 코드를 추가하세요.

- -
<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8" />
-    <title>Gamedev Canvas Workshop</title>
-    <style>
-    	* { padding: 0; margin: 0; }
-    	canvas { background: #eee; display: block; margin: 0 auto; }
-    </style>
-</head>
-<body>
-
-<canvas id="myCanvas" width="480" height="320"></canvas>
-
-<script>
-	// JavaScript 코드가 여기에 들어갈 것입니다.
-</script>
-
-</body>
-</html>
-
- -

{{htmlelement("head")}} 에는 문자셋이 정의되어 있고, {{htmlelement("title")}}과 몇가지 기본적인 CSS가 있습니다. {{htmlelement("body")}}는 {{htmlelement("canvas")}} 와 {{htmlelement("script")}}를 포함하고 있습니다. {{htmlelement("canvas")}}에는 게임이 렌더되고, {{htmlelement("script")}}에는 JavaScript가 들어갑니다. {{htmlelement("canvas")}}엘리먼트는 쉽게 참조하기 위해 id로 myCanvas를 갖고 있고, 480픽셀의 길이와 320픽셀의 높이를 갖도록 되어있습니다. 우리가 이 튜토리얼에서 작성하게될 모든 JavaScript 코드는 <script>와  </script> 태그 사이에 들어가게 됩니다.

- -

캔버스 기본

- -

실제로 {{htmlelement("canvas")}}엘리먼트 위에 그래픽을 렌더링하기 위해서는 JavaScript로 참조할 수 있게 만들어야 합니다. 다음 코드를 여러분의 <script> 태그 다음에 추가하세요..

- -
var canvas = document.getElementById("myCanvas");
-var ctx = canvas.getContext("2d");
- -

{{htmlelement("canvas")}} 엘리먼트에 대한 참조를 canvas 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 ctx 변수에 저장하고 있습니다.

- -

캔버스에 빨간색 네모를 그리는 짧은 예제 코드를 작성해봅시다. 바로 직전의 JavaScript 코드 아래에 다음 코드를 추가하고 index.html을 브라우저에서 열어 보세요.

- -
ctx.beginPath();
-ctx.rect(20, 40, 50, 50);
-ctx.fillStyle = "#FF0000";
-ctx.fill();
-ctx.closePath();
- -

{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}와 {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}메소드 사이에 모든 명령어가 들어갑니다. 우리는 {{domxref("CanvasRenderingContext2D.rect()","rect()")}}를 이용해서 직사각형을 정의했는데, 처음 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 두 값은 직사각형의 너비와 높이를 의미합니다. 위 코드에서 직사각형은 캔버스 좌측에서 20픽셀 떨어져있고, 캔버스 상단에서 40픽셀만큼 아래로 떨어져 있습니다. 그리고 너비와 높이는 각각 50픽셀로 설정되어 완벽한 정사각형으로 그려지고 있습니다. {{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}은  {{domxref("CanvasRenderingContext2D.fill()","fill()")}}메소드에서 칠해질 색상 값을 갖게 됩니다. 위 코드에서는 사각형을 빨간색으로 칠하고 있습니다.

- -

직사각형만 그릴 수 있는 것은 아닙니다. 이번에는 초록색 원을 그려보겠습니다. 아래의 코드를 여러분의 JavaScript의 마지막에 추가하고, 저장한 이후에 페이지를 새로고침 해보세요.

- -
ctx.beginPath();
-ctx.arc(240, 160, 20, 0, Math.PI*2, false);
-ctx.fillStyle = "green";
-ctx.fill();
-ctx.closePath();
- -

위 코드에서 볼 수 있듯이{{domxref("CanvasRenderingContext2D.beginPath()","beginPath()")}}와 {{domxref("CanvasRenderingContext2D.closePath()","closePath()")}}메소드가 다시 나왔습니다. 그 사이에, 가장 중요한 부분인 {{domxref("CanvasRenderingContext2D.arc()","arc()")}} 메소드가 있습니다. 이 메소드는 6개의 파라미터를 갖습니다.

- - - -

{{domxref("CanvasRenderingContext2D.fillStyle","fillStyle")}}속성은 이전과 조금 달라 보이는데, 이는 CSS에서 색상을 표현하는 여러가지 방법 중 하나입니다. 색상을 표현할 때, 16진수로 색상값을 표현하거나, 색상 키워드를 사용하거나, rgba() 함수를 사용하거나 그외에 다른 색상 메소드를 사용할 수 있습니다.

- -

{{domxref("CanvasRenderingContext2D.fill()","fill()")}}을 사용해서 원에 색상을 채울 수 있다면,{{domxref("CanvasRenderingContext2D.stroke()","stroke()")}}를 이용하면 원의 외곽선에 색상을 부여할 수 있습니다. 아래의 코드들도 여러분의 JavaScript에 추가해보세요.

- -
ctx.beginPath();
-ctx.rect(160, 10, 100, 40);
-ctx.strokeStyle = "rgba(0, 0, 255, 0.5)";
-ctx.stroke();
-ctx.closePath();
- -

위 코드는 비어있는 파란색 외곽선으로 된 원을 그립니다. rgba() 함수의 알파 채널 값 때문에 파란색은 반투명하게 표현됩니다.

- -

여러분의 코드와 비교해 보세요

- -

 JSFiddle에서 라이브로 실행되는 전체 코드입니다.

- -

{{JSFiddleEmbed("https://jsfiddle.net/end3r/x62h15e2/","","370")}}

- -
-

연습해보기: 주어진 모양들의 크기와 색상을 변경해보세요.

-
- -

다음 단계로

- -

이제 우리는 기본적인 HTML을 설정하고, canvas에 대해 조금 배웠습니다. 두 번째 챕터로 넘어가서 게임에서 공을 움직이기위해 어떻게 해야 하는지 계속 알아봅시다.

- -

{{PreviousNext("Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임", "Games/Tutorials/순수한_자바스크립트를_이용한_2D_벽돌깨기_게임/공_움직이기")}}

diff --git a/files/ko/glossary/array/index.html b/files/ko/glossary/array/index.html new file mode 100644 index 0000000000..b7f3f63957 --- /dev/null +++ b/files/ko/glossary/array/index.html @@ -0,0 +1,30 @@ +--- +title: 배열 +slug: Glossary/배열 +tags: + - 배열 +translation_of: Glossary/array +--- +

배열은 데이터의 순서가 있는 집합  (  언어어 따라 {{Glossary("primitive")}} 또는  {{Glossary("object")}}) 이다. 배열은 하나의 변수의 여러개의 값들을 저장하는데 사용된다.  이것은 단 하나의 값을 저장하는 변수와 비교된다. 

+ +

어떤 숫자 배열의 각 항목에 붙어 있는데 그것을 숫자 인덱스라고 부른다. 숫자 인덱스는 항목에 접근하게 해준다. 자바스크립에서 배열은 인덱스 0 (zero) 에서 시작하고 여러  {{Glossary("Method", "methods")}} 로 조작될 수 있다. 

+ +

자바에서 배열은 아래와 같이 보인다:

+ +
var myArray = [1, 2, 3, 4];
+var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
+//자바스크립트에서 배열은 위에서 보는 바와 같아ㅣ 여러 데이터 유형을 가질 수 있다.
+ +

더 알아보기

+ +

General knowledge

+ + + +

Technical reference

+ + diff --git a/files/ko/glossary/boolean/index.html b/files/ko/glossary/boolean/index.html new file mode 100644 index 0000000000..9d63373163 --- /dev/null +++ b/files/ko/glossary/boolean/index.html @@ -0,0 +1,54 @@ +--- +title: 불린 +slug: Glossary/불린 +tags: + - 데이터 타입 + - 부울 + - 불린 + - 자료 유형 + - 자바스크립트 + - 프로그래밍 언어 +translation_of: Glossary/Boolean +--- +

컴퓨터 과학에서, 불린(boolean)은 논리적인 데이터 유형이다. 불린은 참(true) 혹은 거짓(false) 값만을 가질 수 있다. 자바스크립트에서 불린 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 쓰인다.

+ +

아래는 불린이 쓰일 수 있는 예시를 보여주는 유사코드이다(실행 가능한 코드가 아니다).

+ +
***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<4; i++) {
+  console.log("I print only when the boolean conditional is true");
+}
+ +

불린(Boolean)이란 이름은 기호 논리학 분야의 선구자인 영국 수학자 {{interwiki("wikipedia", "조지 불")}}의 이름을 따 만들어졌다.

+ +

더 알아보기

+ +

일반적인 지식

+ + + +

참고문헌

+ + diff --git a/files/ko/glossary/browsing_context/index.html b/files/ko/glossary/browsing_context/index.html new file mode 100644 index 0000000000..e4d5fab662 --- /dev/null +++ b/files/ko/glossary/browsing_context/index.html @@ -0,0 +1,24 @@ +--- +title: 브라우징 맥락 +slug: Glossary/브라우저-컨텍스트 +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Browsing_context +--- +
{{QuickLinksWithSubpages("/ko/docs/Glossary")}}
+ +

브라우징 맥락은 {{glossary("browser", "브라우저")}}가 {{domxref("Document")}}를 표시하는 환경을 말합니다. 오늘날에는 보통 탭이지만, 브라우저 창이나 페이지 내의 프레임도 가능합니다.

+ +

각 브라우징 맥락은 특정 {{glossary("origin", "출처")}}, 활성화된 문서의 출처, 그리고 표시했던 모든 문서의 방문 기록을 가집니다.

+ +

브라우징 맥락 간 통신은 엄격히 제한됩니다. 같은 출처를 가진 맥락끼리는 {{domxref("BroadcastChannel")}}을 열어 사용할 수 있습니다.

+ +

더 알아보기

+ +

기술 참조

+ + diff --git a/files/ko/glossary/cache/index.html b/files/ko/glossary/cache/index.html new file mode 100644 index 0000000000..6d45b6772c --- /dev/null +++ b/files/ko/glossary/cache/index.html @@ -0,0 +1,14 @@ +--- +title: 캐시 +slug: Glossary/캐시 +translation_of: Glossary/Cache +--- +

캐시 (웹 캐시 또는 HTTP 캐시)는 HTTP 응답들(responses)을 일시적으로 저장하는 곳입니다. 이를 통해 그 다음 HTTP 요청들(requests)에서 특정 조건이 만족될 때까지 캐시에 저장한 리소스를 사용할 수 있습니다. 

+ +

Learn More

+ +

General knowledge

+ + diff --git a/files/ko/glossary/dhtml/index.html b/files/ko/glossary/dhtml/index.html new file mode 100644 index 0000000000..1eada4d952 --- /dev/null +++ b/files/ko/glossary/dhtml/index.html @@ -0,0 +1,42 @@ +--- +title: DHTML +slug: DHTML +tags: + - DHTML +translation_of: Glossary/DHTML +--- +
DHTML은 "dynamic HTML"을 줄인 것이다. DHTML은 일반적으로 Flash나Java 플러그인을 사용하여 다루어지지 않는 역동적 웹페이지 뒤의 코드를 참조하는데 사용된다. 복합 기능성을 모은 용어는 웹 개발자가 HTML, CSS, Document Object Model, 그리고 JavaScript를 사용하는 것을 가능하게 한다.
+ + + + +
+

Documentation

+
DOM Client Object Cross-Reference +
이 client object reference는 DHTML에 사용하는 공통된 대상에 대한 정보를 제공한며, 각 브라우저 안에서 어떤 특성이 제공 되는지 당신이 결정하는 것을 돕기로 계획되었다 . +
+
DHTML Demonstrations Using DOM/Style +
Document Object Model (DOM) 데모, Cross-browser 위젯, DOM에 관해 배우기 위한 추가적 자원. +
+
Working around the Firefox 1.0.3 DHTML regression +
주의. 이 글이 다루고 있는 이 주제는 Firefox 1.0.4 release에서 고쳐졌고, 이 문서는 1.0.3 version의 브라우저에에 적용됨. +
+

View All... +

+		 +

커뮤니티

+
  • Mozilla 포럼 보기... +
+

{{ DiscussionList("dev-ajax", "mozilla.dev.ajax") }} +

+

도구

+ +

관련 주제

+
AJAX, CSS, DOM, HTML, JavaScript +
+
+

Categories +

Interwiki Language Links +


+

{{ languages( { "en": "en/DHTML", "pt": "pt/DHTML", "pl": "pl/DHTML" } ) }} diff --git a/files/ko/glossary/dynamic_programming_language/index.html b/files/ko/glossary/dynamic_programming_language/index.html new file mode 100644 index 0000000000..dc17a46f18 --- /dev/null +++ b/files/ko/glossary/dynamic_programming_language/index.html @@ -0,0 +1,20 @@ +--- +title: 동적 프로그래밍 언어 +slug: Glossary/동적_프로그래밍_언어 +translation_of: Glossary/Dynamic_programming_language +--- +

A dynamic programming language is a programming language in which operations otherwise done at compile-time can be done at run-time. For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running.

+ +

This is opposed to so-called static programming languages, in which such changes are normally not possible.

+ +
+

Note that while there is indeed a connection between this dynamic/static property of programming languages and dynamic/static-typing, the two are far from synonymous.

+
+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/ko/glossary/header/index.html b/files/ko/glossary/header/index.html deleted file mode 100644 index 30a1051acf..0000000000 --- a/files/ko/glossary/header/index.html +++ /dev/null @@ -1,61 +0,0 @@ ---- -title: 헤더 -slug: Glossary/Header -tags: - - WebMechanics - - 용어 -translation_of: Glossary/HTTP_header ---- -

HTTP 헤더는 부가적인 정보를 전달하는 HTTP 요청 또는 응답 필드로, 메시지나 바디의 의미를 변경하거나 미리 조정합니다. 헤더는 대소문자를 구별하지 않으며, 줄의 처음에서 시작하여 바로 다음에 ':'과 헤더에 해당하는 값이 따라옵니다. 값은 다음 CR 또는 메시지의 마지막에서 끝납니다.

- -

더 이상 어떠한 명세에도 포함되어 있지 않지만, 전통적으로, 헤더는 카테고리로 분류됩니다.

- - - -

하나의 헤더를 갖는 기본 요청:

- -
GET /example.http HTTP/1.1
-Host: example.com
-
- -

리다이렉트는 필수 헤더를 갖습니다({{HTTPHeader("Location")}}):

- -
302 Found
-Location: /NewPage.html
-
- -

대표적인 헤더의 집합:

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

더 알아보기

- -

일반 지식

- - - -

기술적 지식

- - diff --git a/files/ko/glossary/http_header/index.html b/files/ko/glossary/http_header/index.html new file mode 100644 index 0000000000..30a1051acf --- /dev/null +++ b/files/ko/glossary/http_header/index.html @@ -0,0 +1,61 @@ +--- +title: 헤더 +slug: Glossary/Header +tags: + - WebMechanics + - 용어 +translation_of: Glossary/HTTP_header +--- +

HTTP 헤더는 부가적인 정보를 전달하는 HTTP 요청 또는 응답 필드로, 메시지나 바디의 의미를 변경하거나 미리 조정합니다. 헤더는 대소문자를 구별하지 않으며, 줄의 처음에서 시작하여 바로 다음에 ':'과 헤더에 해당하는 값이 따라옵니다. 값은 다음 CR 또는 메시지의 마지막에서 끝납니다.

+ +

더 이상 어떠한 명세에도 포함되어 있지 않지만, 전통적으로, 헤더는 카테고리로 분류됩니다.

+ + + +

하나의 헤더를 갖는 기본 요청:

+ +
GET /example.http HTTP/1.1
+Host: example.com
+
+ +

리다이렉트는 필수 헤더를 갖습니다({{HTTPHeader("Location")}}):

+ +
302 Found
+Location: /NewPage.html
+
+ +

대표적인 헤더의 집합:

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

더 알아보기

+ +

일반 지식

+ + + +

기술적 지식

+ + diff --git a/files/ko/glossary/identifier/index.html b/files/ko/glossary/identifier/index.html new file mode 100644 index 0000000000..f306315b66 --- /dev/null +++ b/files/ko/glossary/identifier/index.html @@ -0,0 +1,21 @@ +--- +title: 식별자 +slug: Glossary/식별자 +tags: + - Beginner + - Glossary +translation_of: Glossary/Identifier +--- +

식별자는 코드 내의 {{glossary("variable", "변수")}}, {{glossary("function", "함수")}}, 혹은 {{glossary("property", "속성")}}을 식별하는 문자열입니다.

+ +

{{glossary("JavaScript")}}의 식별자는 대소문자를 구별하며 {{glossary("Unicode", "유니코드")}} 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없습니다.

+ +

식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다.

+ +

더 알아보기

+ +

일반 지식

+ + diff --git a/files/ko/glossary/localization/index.html b/files/ko/glossary/localization/index.html new file mode 100644 index 0000000000..d2f45a54e0 --- /dev/null +++ b/files/ko/glossary/localization/index.html @@ -0,0 +1,63 @@ +--- +title: Localization +slug: Localization +tags: + - Localization +translation_of: Glossary/Localization +--- +
+

지역화는 소프트웨어 사용자 인터페이스를 다른 언어로 번역하고 그 문화에 맞게 바꾸는 과정을 의미합니다. 지역화와 관련된 내용은 모질라 기반의 프로그램이나 확장기능을 지역화 할 수 있게 만드는 것에 관한 것입니다.

+ + + + + + + +
+

선택된 주제

+
+
+ Create a new localization
+
+ First read for volunteers wanting to create a new localization.
+
+
+
+ XUL Tutorial:Localization
+
+ XUL Tutorial XUL 응용프로그램 지역화 관련.
+
+
+
+ Writing localizable code
+
+ 프로그래머를 위한 최상의 지역화 작업의 실례와 제시안들.
+
+
+
+ Localizing descriptions of extensions
+
+ 확장기능의 설명을 지역화 하기위해서는 "install.rdf" 파일 내에 입력된 사항들을 대체하기 위한 특별한 설정키가 필요합니다.
+
+ 본문에서는 이러한 설정 키들을 어떻게 수정하는지 그 순서 및 방법에 관한 내용을 담고 있습니다.
+
+


+ View All...

+ 		+

다른 페이지들

+ +

관련 주제들

+
+
+ Extensions, XUL
+
+
+

Categories

+

Interwiki Language Links

+
+

{{ languages( { "en": "en/Localization", "es": "es/Localizaci\u00f3n", "it": "it/Localization", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja" } ) }}

diff --git a/files/ko/glossary/scope/index.html b/files/ko/glossary/scope/index.html new file mode 100644 index 0000000000..259cc6b9f4 --- /dev/null +++ b/files/ko/glossary/scope/index.html @@ -0,0 +1,39 @@ +--- +title: 스코프 +slug: Glossary/스코프 +translation_of: Glossary/Scope +--- +

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는  {{glossary("값","값")}}과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 {{glossary("변수")}} 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

+ +

{{glossary("함수")}}는 {{glossary("자바스크립트")}}에서 클로저 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다. 예를 들어 다음과 같은 상황은 유효하지 않다.

+ +
function exampleFunction() {
+    var x = "declared inside function";
+    // x는 오직 exampleFunction 내부에서만 사용 가능.
+    console.log("Inside function");
+    console.log(x);
+}
+
+console.log(x);  // 에러 발생
+ +

그러나 다음과 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효하다. 

+ +
var x = "declared outside function";
+
+exampleFunction();
+
+function exampleFunction() {
+    console.log("Inside function");
+    console.log(x);
+}
+
+console.log("Outside function");
+console.log(x);
+ +

Learn more

+ +

General knowledge

+ + diff --git a/files/ko/glossary/transmission_control_protocol_(tcp)/index.html b/files/ko/glossary/transmission_control_protocol_(tcp)/index.html new file mode 100644 index 0000000000..6644b8772c --- /dev/null +++ b/files/ko/glossary/transmission_control_protocol_(tcp)/index.html @@ -0,0 +1,21 @@ +--- +title: 전송 제어 프로토콜 +slug: Glossary/전송_제어_프로토콜_(TCP) +tags: + - 전송 제어 프로토콜 +translation_of: Glossary/Transmission_Control_Protocol_(TCP) +--- +

TCP (Transmission Control Protocol)는 IP 네트워크의 두 컴퓨터 간의 연결 지향 통신을 위한 전송 계층 호스트 간 프로토콜입니다. TCP는 가상 포트를 사용하여 두 컴퓨터 간의 물리적 연결을 재사용 할 수 있는 가상 종단 간 연결을 만듭니다. TCP는 {{glossary ( 'HTTP')}} 및 {{glossary ( 'SMTP')}} (email)과 같은 상위 레벨 프로토콜 데이터를 캡슐화합니다.

+ +

TCP 핸드 셰이크

+ +

TCP 3 방향 핸드 셰이크는 TCP-핸드셰이크라고 불립니다, 3개의 메시지 핸드 셰이크 및 / 또는 SYN-SYN-ACK라고도 하는 TCP 3 방향 핸드 셰이크는 TCP가 IP 기반 네트워크를 통해 TCP / IP 연결을 설정하는 데 사용하는 방법입니다. TCP 세션을 신뢰하기 위해 TCP에 의해 전송된 세 가지 메시지는 SYN, SYN-ACK,  SYNchronize를 위한 ACK는 SYNchronize-ACKnowledgement 와 ACKnowledge의 별칭입니다. 세 가지 메시지 메커니즘은 정보를 앞뒤로 전달하려는 두 컴퓨터 용으로 설계되었으며 HTTP 브라우저 요청과 같은 데이터를 전송하기 전에 연결 매개 변수를 신뢰할 수 있습니다.

+ +

See also

+ + diff --git a/files/ko/glossary/xhtml/index.html b/files/ko/glossary/xhtml/index.html new file mode 100644 index 0000000000..dfab34e19d --- /dev/null +++ b/files/ko/glossary/xhtml/index.html @@ -0,0 +1,76 @@ +--- +title: XHTML +slug: XHTML +tags: + - XHTML +translation_of: Glossary/XHTML +--- +

HTML은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.

+ +

HTML5 와 HTML/XHTML

+ +

HTML5 표준은 두가지 문법을 정의합니다. MIME 타입(HTTP Content-Type 헤더로 전송되는)을 참조하여 어떤 문법을 사용할지 선택합니다. : XHTML의 MIME 타입은 application/xhtml+xml이며  이외는 text/html.

+ +

아래 예제는 HTML 문서와 XHTML문서의 사용된 헤더내용을 보여줍니다.

+ +

HTML 문서

+ +
HTTP/1.1 200 OK
+Content-Type: text/html
+
+<!DOCTYPE html>
+<html lang=en>
+  <head>
+    <meta charset=utf-8>
+    <title>HTML</title>
+  </head>
+  <body>
+    <p>I am a HTML document</p>
+  </body>
+</html>
+ +

XHTML 문서

+ +
HTTP/1.1 200 OK Content-Type: application/xhtml+xml <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML</title> </head> <body> <p>I am a XHTML document</p> </body> </html>
+ +

MIME type vs DOCTYPE

+ +

HTML5 이전에는 HTML 4.01 과 XHTML 1.0  두개의 표준이 두개의 문법으로 분리되어 정의되었습니다. XHTML1 표준에는, XHTML을 사용하기 위해서는 특별한 DOCTYPE을 정의해야 한다고 명시되어있습니다. 하지만 브라우저들은 이 표준을 구현하지 않았고 반대로 HTML5 표준에서 다음과 같이 결정되었습니다. "content-type을 text/html로  전송한다면 XHTML을 사용하지 않는 것이다."

+ +

대신, 적절한 MIME 타입은 Content-Type HTTP 헤더에 정의 되어 있어야 합니다. 만약 <meta http-equiv=…> 같은  메타테그에 MIME 타입을 넣었다면 그것은 무시되고 text/html로 간주됩니다..

+ +

페이지를  text/html로 서비스 하지만 XHTML로 문서를 작성했다면 아래 글에서 설명하는 많은 문제점들이 발생할 것 입니다. :

+ + + +

지원

+ +

대부분의 브라우저들은 현재 XHTML를 지원합니다, Firefox, Chrome, Safari, Opera, 그리고 Internet Explorer (IE 9 이후). (Internet Explorer 8 과 그 이전 버전은 표준의 XHTML MIME타입을 선언한 XHTML문서를 알려지지않은 파일타입으로 간주하여 다운로드 다이얼로그를 표시합니다.)

+ +

또 많이 사용하는 {{Glossary("JavaScript")}} 라이브러리와 개발자도구들은 XHTML을 제한적으로 지원하건나 지원하지 않으니 주의하십시오.

+ +

HTML과의 차이점

+ +

Properly Using CSS and JavaScript in XHTML Documents 글의 일부문에서 HTML과 XHTML의차이점을 설명하고 있습니다.

+ +

도구

+ + + +

바깥 고리

+ + + +

View All...

diff --git "a/files/ko/glossary/\353\217\231\354\240\201_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215_\354\226\270\354\226\264/index.html" "b/files/ko/glossary/\353\217\231\354\240\201_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215_\354\226\270\354\226\264/index.html" deleted file mode 100644 index dc17a46f18..0000000000 --- "a/files/ko/glossary/\353\217\231\354\240\201_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215_\354\226\270\354\226\264/index.html" +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: 동적 프로그래밍 언어 -slug: Glossary/동적_프로그래밍_언어 -translation_of: Glossary/Dynamic_programming_language ---- -

A dynamic programming language is a programming language in which operations otherwise done at compile-time can be done at run-time. For example, in JavaScript it is possible to change the type of a variable or add new properties or methods to an object while the program is running.

- -

This is opposed to so-called static programming languages, in which such changes are normally not possible.

- -
-

Note that while there is indeed a connection between this dynamic/static property of programming languages and dynamic/static-typing, the two are far from synonymous.

-
- -

Learn more

- -

General knowledge

- - diff --git "a/files/ko/glossary/\353\260\260\354\227\264/index.html" "b/files/ko/glossary/\353\260\260\354\227\264/index.html" deleted file mode 100644 index b7f3f63957..0000000000 --- "a/files/ko/glossary/\353\260\260\354\227\264/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: 배열 -slug: Glossary/배열 -tags: - - 배열 -translation_of: Glossary/array ---- -

배열은 데이터의 순서가 있는 집합  (  언어어 따라 {{Glossary("primitive")}} 또는  {{Glossary("object")}}) 이다. 배열은 하나의 변수의 여러개의 값들을 저장하는데 사용된다.  이것은 단 하나의 값을 저장하는 변수와 비교된다. 

- -

어떤 숫자 배열의 각 항목에 붙어 있는데 그것을 숫자 인덱스라고 부른다. 숫자 인덱스는 항목에 접근하게 해준다. 자바스크립에서 배열은 인덱스 0 (zero) 에서 시작하고 여러  {{Glossary("Method", "methods")}} 로 조작될 수 있다. 

- -

자바에서 배열은 아래와 같이 보인다:

- -
var myArray = [1, 2, 3, 4];
-var catNamesArray = ["Jacqueline", "Sophia", "Autumn"];
-//자바스크립트에서 배열은 위에서 보는 바와 같아ㅣ 여러 데이터 유형을 가질 수 있다.
- -

더 알아보기

- -

General knowledge

- - - -

Technical reference

- - diff --git "a/files/ko/glossary/\353\266\210\353\246\260/index.html" "b/files/ko/glossary/\353\266\210\353\246\260/index.html" deleted file mode 100644 index 9d63373163..0000000000 --- "a/files/ko/glossary/\353\266\210\353\246\260/index.html" +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: 불린 -slug: Glossary/불린 -tags: - - 데이터 타입 - - 부울 - - 불린 - - 자료 유형 - - 자바스크립트 - - 프로그래밍 언어 -translation_of: Glossary/Boolean ---- -

컴퓨터 과학에서, 불린(boolean)은 논리적인 데이터 유형이다. 불린은 참(true) 혹은 거짓(false) 값만을 가질 수 있다. 자바스크립트에서 불린 조건은 어떤 코드 부문이 실행되어야 할 지(예를 들어 if 절 안에서) 또는 어떤 코드 부문을 반복해야 할지(예를 들어 for 문 안에서) 결정하는 데 쓰인다.

- -

아래는 불린이 쓰일 수 있는 예시를 보여주는 유사코드이다(실행 가능한 코드가 아니다).

- -
***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<4; i++) {
-  console.log("I print only when the boolean conditional is true");
-}
- -

불린(Boolean)이란 이름은 기호 논리학 분야의 선구자인 영국 수학자 {{interwiki("wikipedia", "조지 불")}}의 이름을 따 만들어졌다.

- -

더 알아보기

- -

일반적인 지식

- - - -

참고문헌

- - diff --git "a/files/ko/glossary/\353\270\214\353\235\274\354\232\260\354\240\200-\354\273\250\355\205\215\354\212\244\355\212\270/index.html" "b/files/ko/glossary/\353\270\214\353\235\274\354\232\260\354\240\200-\354\273\250\355\205\215\354\212\244\355\212\270/index.html" deleted file mode 100644 index e4d5fab662..0000000000 --- "a/files/ko/glossary/\353\270\214\353\235\274\354\232\260\354\240\200-\354\273\250\355\205\215\354\212\244\355\212\270/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: 브라우징 맥락 -slug: Glossary/브라우저-컨텍스트 -tags: - - CodingScripting - - Glossary -translation_of: Glossary/Browsing_context ---- -
{{QuickLinksWithSubpages("/ko/docs/Glossary")}}
- -

브라우징 맥락은 {{glossary("browser", "브라우저")}}가 {{domxref("Document")}}를 표시하는 환경을 말합니다. 오늘날에는 보통 탭이지만, 브라우저 창이나 페이지 내의 프레임도 가능합니다.

- -

각 브라우징 맥락은 특정 {{glossary("origin", "출처")}}, 활성화된 문서의 출처, 그리고 표시했던 모든 문서의 방문 기록을 가집니다.

- -

브라우징 맥락 간 통신은 엄격히 제한됩니다. 같은 출처를 가진 맥락끼리는 {{domxref("BroadcastChannel")}}을 열어 사용할 수 있습니다.

- -

더 알아보기

- -

기술 참조

- - diff --git "a/files/ko/glossary/\354\212\244\354\275\224\355\224\204/index.html" "b/files/ko/glossary/\354\212\244\354\275\224\355\224\204/index.html" deleted file mode 100644 index 259cc6b9f4..0000000000 --- "a/files/ko/glossary/\354\212\244\354\275\224\355\224\204/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: 스코프 -slug: Glossary/스코프 -translation_of: Glossary/Scope ---- -

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는  {{glossary("값","값")}}과 표현식이 "표현"되거나 참조 될 수 있음을 의미한다. 만약 {{glossary("변수")}} 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

- -

{{glossary("함수")}}는 {{glossary("자바스크립트")}}에서 클로저 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근 할 수 없다. 예를 들어 다음과 같은 상황은 유효하지 않다.

- -
function exampleFunction() {
-    var x = "declared inside function";
-    // x는 오직 exampleFunction 내부에서만 사용 가능.
-    console.log("Inside function");
-    console.log(x);
-}
-
-console.log(x);  // 에러 발생
- -

그러나 다음과 같은 코드는 변수가 함수 외부의 전역에서 선언되었기 때문에 유효하다. 

- -
var x = "declared outside function";
-
-exampleFunction();
-
-function exampleFunction() {
-    console.log("Inside function");
-    console.log(x);
-}
-
-console.log("Outside function");
-console.log(x);
- -

Learn more

- -

General knowledge

- - diff --git "a/files/ko/glossary/\354\213\235\353\263\204\354\236\220/index.html" "b/files/ko/glossary/\354\213\235\353\263\204\354\236\220/index.html" deleted file mode 100644 index f306315b66..0000000000 --- "a/files/ko/glossary/\354\213\235\353\263\204\354\236\220/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: 식별자 -slug: Glossary/식별자 -tags: - - Beginner - - Glossary -translation_of: Glossary/Identifier ---- -

식별자는 코드 내의 {{glossary("variable", "변수")}}, {{glossary("function", "함수")}}, 혹은 {{glossary("property", "속성")}}을 식별하는 문자열입니다.

- -

{{glossary("JavaScript")}}의 식별자는 대소문자를 구별하며 {{glossary("Unicode", "유니코드")}} 글자, $, _, 숫자(0-9)로 구성할 수 있지만, 숫자로 시작할 수는 없습니다.

- -

식별자는 코드의 일부이지만 문자열은 데이터이기 때문에, 식별자와 문자열은 다릅니다. JavaScript에서 식별자를 문자열로 변환하는 방법은 없지만, 어떤 경우 문자열을 분석해 식별자로 사용할 수 있습니다.

- -

더 알아보기

- -

일반 지식

- - diff --git "a/files/ko/glossary/\354\240\204\354\206\241_\354\240\234\354\226\264_\355\224\204\353\241\234\355\206\240\354\275\234_(tcp)/index.html" "b/files/ko/glossary/\354\240\204\354\206\241_\354\240\234\354\226\264_\355\224\204\353\241\234\355\206\240\354\275\234_(tcp)/index.html" deleted file mode 100644 index 6644b8772c..0000000000 --- "a/files/ko/glossary/\354\240\204\354\206\241_\354\240\234\354\226\264_\355\224\204\353\241\234\355\206\240\354\275\234_(tcp)/index.html" +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: 전송 제어 프로토콜 -slug: Glossary/전송_제어_프로토콜_(TCP) -tags: - - 전송 제어 프로토콜 -translation_of: Glossary/Transmission_Control_Protocol_(TCP) ---- -

TCP (Transmission Control Protocol)는 IP 네트워크의 두 컴퓨터 간의 연결 지향 통신을 위한 전송 계층 호스트 간 프로토콜입니다. TCP는 가상 포트를 사용하여 두 컴퓨터 간의 물리적 연결을 재사용 할 수 있는 가상 종단 간 연결을 만듭니다. TCP는 {{glossary ( 'HTTP')}} 및 {{glossary ( 'SMTP')}} (email)과 같은 상위 레벨 프로토콜 데이터를 캡슐화합니다.

- -

TCP 핸드 셰이크

- -

TCP 3 방향 핸드 셰이크는 TCP-핸드셰이크라고 불립니다, 3개의 메시지 핸드 셰이크 및 / 또는 SYN-SYN-ACK라고도 하는 TCP 3 방향 핸드 셰이크는 TCP가 IP 기반 네트워크를 통해 TCP / IP 연결을 설정하는 데 사용하는 방법입니다. TCP 세션을 신뢰하기 위해 TCP에 의해 전송된 세 가지 메시지는 SYN, SYN-ACK,  SYNchronize를 위한 ACK는 SYNchronize-ACKnowledgement 와 ACKnowledge의 별칭입니다. 세 가지 메시지 메커니즘은 정보를 앞뒤로 전달하려는 두 컴퓨터 용으로 설계되었으며 HTTP 브라우저 요청과 같은 데이터를 전송하기 전에 연결 매개 변수를 신뢰할 수 있습니다.

- -

See also

- - diff --git "a/files/ko/glossary/\354\272\220\354\213\234/index.html" "b/files/ko/glossary/\354\272\220\354\213\234/index.html" deleted file mode 100644 index 6d45b6772c..0000000000 --- "a/files/ko/glossary/\354\272\220\354\213\234/index.html" +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: 캐시 -slug: Glossary/캐시 -translation_of: Glossary/Cache ---- -

캐시 (웹 캐시 또는 HTTP 캐시)는 HTTP 응답들(responses)을 일시적으로 저장하는 곳입니다. 이를 통해 그 다음 HTTP 요청들(requests)에서 특정 조건이 만족될 때까지 캐시에 저장한 리소스를 사용할 수 있습니다. 

- -

Learn More

- -

General knowledge

- - 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 deleted file mode 100644 index a2f6f18b0c..0000000000 --- a/files/ko/how_to_build_an_xpcom_component_in_javascript/index.html +++ /dev/null @@ -1,192 +0,0 @@ ---- -title: How to Build an XPCOM Component in Javascript -slug: How_to_Build_an_XPCOM_Component_in_Javascript -tags: - - Add-ons - - Extensions - - XPCOM ---- -

-

본 문서는 자바스크립트에서 XPCOM 컴포넌트를 만드는 방법을 소개합니다. 이 문서에서는 XPCOM이 어떻게 움직이는지 혹은 그에 대한 코드는 다루지 않습니다. 자세한 사항은 XPCOM에서 아실 수 있습니다. 여기서는 실제로 이를 어떻게 움직이게하는 가에 달려 있습니다. -


-

-

구현 방법

-

아래 예제는 "Hello World!"라는 메시지를 표시하는 간단한 방법입니다. -This example component will expose a single method, which returns the string "Hello World!". -

-

인터페이스 재정의

-

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 only from JavaScript, you can use the wrappedJSObject trick so that you don't need to generate an interface as described here). -

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 XPCOMViewer, a GUI for browsing registered interfaces and components. You can download an old version of XPCOMViewer that works with Firefox 1.5 from mozdev mirrors. -

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

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 XPIDL. Here's the XPIDL definition for our HelloWorld component: -

HelloWorld.idl -

-
#include "nsISupports.idl"
-
-[scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)]
-interface nsIHelloWorld : nsISupports
-{
-  string hello();
-};
-
-

Note that you must generate a new UUID for each XPCOM component that you create. See Generating GUIDs for more information. -

-

Compiling the Typelib

-

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

-
Note: 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 Mozilla build tools for Windows and copy the DLLs from <tt>windows\bin\x86</tt> within the zip into the <tt>bin</tt> directory of the Gecko SDK.
-
Note: 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.
-

Execute this command to compile the typelib. Here, <tt>{sdk_dir}</tt> is the directory in which you unpacked the Gecko SDK. -

-
{sdk_dir}/bin/xpidl -m typelib -w -v -I {sdk_dir}/idl -e HelloWorld.xpt HelloWorld.idl
-
-


-

-
Note: On Windows you must use forward slashes for the include path.
-

(The -I flag is an uppercase i, not a lowercase L.) This will create the typelib file HelloWorld.xpt in the current working directory. -

-

Creating the Component

-

HelloWorld.js -

-
/***********************************************************
-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) &&
-        !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; }
-
-
-

Installation

-

For extensions:

-
  1. Copy HelloWorld.js and HelloWorld.xpt to {extensiondir}/components/ -
  2. Delete compreg.dat and xpti.dat from your profile directory. -
  3. Restart application -
-

For Firefox

-
  1. Copy HelloWorld.js and HelloWorld.xpt to the {objdir}/dist/bin/components directory, if running from the source. -
  2. Delete compreg.dat and xpti.dat from the components directory. -
  3. Delete compreg.dat and xpti.dat from your profile directory. -
  4. Restart application -
-

Using Your Component

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

Other resources

- -{{ 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/introduction_to_using_xpath_in_javascript/index.html b/files/ko/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index e15574b588..0000000000 --- a/files/ko/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,367 +0,0 @@ ---- -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 ---- -

이 문서는 JavaScript 안, 확장기능, 웹사이트에서 XPath를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 DOM 3 XPath를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.

- -

XPath를 사용하는 주 인터페이스는 document 개체의 evaluate 함수입니다.

- -

document.evaluate

- -

이 메소드는 XML에 기반을 둔 문서(HTML 문서 포함)에 대해 XPath 식을 평가하고 단일 노드나 노드 집합일 수 있는 XPathResult 개체를 반환합니다. 이 메소드를 다루는 기존 문서는 여기에 있지만 당장 우리 필요에 좀 부족하여, 더 이해가 빠른 설명을 아래에 제공합니다.

- -
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
-
- -

매개변수

- -

evaluate 함수는 매개변수를 총 5개 취합니다.

- - - - - - - - - - - -

반환값

- -

resultType 매개변수에서 지정한 형의 XPathResult 개체인 xpathResult를 반환합니다. XPathResult 인터페이스는 여기에서 정의됩니다.

- -

Default Namespace Resolver 구현

- -

우리는 document 개체의 createNSResolver 메소드를 써서 namespace resolver를 만듭니다.

- -
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
-
- -

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> 그리고 나서 document.evaluate 함수에 namespaceResolver 매개변수로 nsResolver 변수를 넘겨줍니다.

- -

XPath는 null namespace의 단 하나 뿐인 요소와 일치하는 접두사 없는 QNames을 정의함을 유의하세요. XPath에는 기본 namespace를 얻는 방법이 없습니다. null이 아닌 namespace의 요소나 속성을 일치시키려면, 접두사 붙은 이름 검사를 쓰고 접두사를 namespace에 매핑하는 namespace resolver를 만들어야 합니다. 아래 사용자 정의 namespace resolver 만드는 법을 더 읽으세요.

- -

반환형 지정

- -

document.evaluate로부터 반환하는 변수 xpathResult는 개별 노드 (단순 형)나 노드 모음(collection) (node-set 형) 가운데 하나로 구성할 수 있습니다.

- -

단순 형

- -

resultType으로 바랐던 결과형을 어느 한쪽으로 지정할 때,

- - - -

우리는 XPathResult 개체의 다음 속성에 각각 접근하여 식의 반환값을 얻습니다.

- - - -
예
- -

다음은 HTML 문서의 <p> 요소수를 얻기 위해 XPath 식 count(//p)을 씁니다.

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
-
- -

비록 Javascript가 표시를 위해 숫자를 문자열로 변환하는 것을 허용하더라도, stringValue 속성(property)을 요청하면 XPath 인터페이스는 자동으로 숫자 결과로 변환하지 않습니다. 그래서 다음 코드는 작동하지 '<big>않</big>'습니다.

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
-
- -

대신 NS_DOM_TYPE_ERROR 코드를 갖는 예외(exception)를 반환합니다.

- -

Node-Set 형

- -

XPathResult 개체는 주요한 3가지 서로 다른 형으로 반환될 node-set을 허용합니다.

- - - -
반복자(훑개)
- -

resultType 매개변수로 지정한 결과형이 어느 한쪽일 때,

- - - -

반환되는 XPathResult 개체는 일치하는 노드(XPathResult의 iterateNext() 메소드를 써서 포함될 개별 노드에 접근함을 허용하는 반복자로 행동할)의 노드 집합입니다.

- -

우리가 모든 일치하는 개별 노드에 반복하고 나면, iterateNext()는 null을 반환합니다.

- -

그러나 주의하세요, 만약 반복 도중에 문서가 바뀌면 (문서 tree가 변경됨) 그것은 반복을 무효로 만들고(invalidate) XPathResult의 invalidIteratorState 속성을 true로 지정하고 NS_ERROR_DOM_INVALID_STATE_ERR 예외를 냅니다.

- -
반복자 예
- -
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 );
-}
-
- -
Snapshots
- -

resultType 매개변수로 지정한 결과형이 어느 한쪽일 때,

- - - -

반환되는 XPathResult 개체는 일치하는 노드의 static node-set이고, 그것은 itemNumber가 검색(retrieve)되는 노드의 index인 XPathResult 개체의 snapshotItem(itemNumber) 메소드를 통해 각 노드에 접근을 허용합니다. 포함되는 노드의 총수는 snapshotLength 속성을 통해 입수할 수 있습니다.

- -

Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 달리 snapshot은 무효로 만들지는 않지만 현재 문서와 들어맞지 않을지도 모릅니다, 예를 들어 노드가 이동됐을지도 모르고, 더 이상 존재하지 않는 노드나 추가될 수 있는 새 노드를 포함할지도 모릅니다.

- -
Snapshot 예
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -
First Node
- -

resultType 매개변수로 지정한 결과형이 어느 한쪽일 때,

- - - -

반환되는 XPathResult 개체는 XPath 식과 일치하는 오직 처음 발견한 노드입니다. 이는 XPathResult 개체의 singleNodeValue 속성을 통해 접근할 수 있습니다. 이는 노드 집합이 비면 null입니다.

- -

순서 없는 subtype인 경우 반환되는 단일 노드가 문서 순으로 처음이 아닐지도 모르지만 순서 있는 subtype인 경우 문서 순으로 처음 일치하는 노드임을 보장함을 유의하세요.

- -
First Node 예
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

ANY_TYPE 상수

- -

resultType 매개변수에 결과형을 ANY_TYPE으로 지정할 때, 반환되는 XPathResult 개체는, 식 평가에서 자연스럽게 생긴 어떤 형입니다.

- -

단순 형( NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE ) 가운데 하나일 수도 있습니다, <big>하지만</big>, 만약 반환되는 결과형이 node-set이면 <big>오직</big> UNORDERED_NODE_ITERATOR_TYPE입니다.

- -

평가 뒤 형을 결정하기 위해서, 우리는 XPathResult 개체의 resultType 속성을 씁니다. 이 속성의 상수값은 부록에서 정의합니다. None Yet =====Any_Type 예===== <pre> </pre>

- -

예

- -

HTML 문서 안에서

- -

다음 코드는 XPath 식이 평가될 HTML 문서 안에서나 문서에 연결(link)된 어떤 JavaScript 조각(fragment)에 놓을 셈입니다.

- -

XPath를 써서 HTML의 모든 <h2> heading 요소를 뽑아내면(extract), xpathExpression 문자열은 간단히 '//h2'입니다. 어떤 점에서, //는 요소 트리 어디에서나 노드명 h2와 요소를 일치시키는 재귀 내림 연산자(Recursive Descent Operator)입니다. 이를 위한 자세한 코드입니다. link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

HTML이 namespace가 없기 때문에, 우리는 namespaceResolver 매개변수에 null을 넘겨줌을 유의하세요.

- -

우리가 문서 전체에서 heading을 찾기를 바라기 때문에, 우리는 contextNode로 document 개체 자신을 씁니다.

- -

이 식의 결과는 XPathResult 개체입니다. 우리가 반환되는 결과형을 알고 싶다면, 우리는 반환되는 개체의 resultType 속성을 평가할지도 모릅니다. 이 경우에는 그것은 값이 4인 UNORDERED_NODE_ITERATOR_TYPE로 평가합니다. 이는 XPath 식의 결과가 node-set일 때 기본 반환형입니다. 동시에 단일 노드로 접근을 제공하고 특정 순서로 노드를 반환할지도 모릅니다. 반환되는 개체에 접근하기 위해, 우리는 반환되는 개체의 iterateNext() 메소드를 씁니다.

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'Level 2 headings in this document are:\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

우리가 한 노드를 반복하기만 하면, 우리는 그 노드의 모든 표준 DOM interfaces에 접근할 수 있습니다. 우리 식에서 반환된 모든 h2 요소를 반복한 뒤에, 더 이상의 iterateNext() 호출은 null을 반환합니다.

- -

확장기능 안에서 XML 문서 평가

- -

다음은 예로 chrome://yourextension/content/peopleDB.xml에 자리한 XML 문서를 씁니다.

- -
<?xml version="1.0"?>
-<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
-  <person>
-	<name first="george" last="bush" />
-	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
-	<phoneNumber>202-456-1111</phoneNumber>
-  </person>
-  <person>
-	<name first="tony" last="blair" />
-	<address street="10 downing street" city="london" country="uk"/>
-	<phoneNumber>020 7925 0918</phoneNumber>
-  </person>
-</people>
-
- -

확장기능 안에서 XML 문서의 컨텐트를 쓸 수 있게, 우리는 문서를 로드하는 동시에 변수 xmlDoc를 우리가 evaluate 메소드를 쓸 수 있는 XMLDocument 개체로 문서에 포함하는 XMLHttpRequest 개체를 만듭니다,

- -

JavaScript는 확장기능 xul/js 문서에 씁니다.

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

부록

- -

사용자 정의 Namespace Resolver 구현

- -

이는 단지 설명을 위한 예입니다. 이 함수는 xpathExpression에서 namespace 접두사를 취할 필요가 있고 그 접두사와 들어맞는 URI를 반환합니다. 예를 들어, 다음 식은

- -
'//xhtml:td/mathml:math'
-
- -

(X)HTML 표 데이터 셀 요소의 자식인 모든 MathML 식을 선택합니다.

- -

mathml: 접두사를 namespace URI 'http://www.w3.org/1998/Math/MathML'와 html:을 URI http://www.w3.org/1999/xhtml와 관련시키기 위해 우리는 함수 하나를 제공합니다.

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

그러면 document.evaluate 호출은 다음과 같습니다.

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

XPathResult 정의 상수

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
결과형 정의 상수값설명
ANY_TYPE0식 평가에서 자연스럽게 생긴 어떤 형을 포함하는 결과 집합. 만약 결과가 node-set이면 UNORDERED_NODE_ITERATOR_TYPE이 항상 결과형임을 주의하세요.
NUMBER_TYPE1single 숫자를 포함하는 결과. 이는 예를 들어, count() 함수를 쓰는 XPath 식에 쓸모가 있습니다.
STRING_TYPE2single 문자열을 포함하는 결과.
BOOLEAN_TYPE3single boolean 값을 포함하는 결과. 이는 예를 들어, not() 함수를 쓰는 XPath 식에 쓸모가 있습니다.
UNORDERED_NODE_ITERATOR_TYPE4식과 일치하는 모든 노드를 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.
ORDERED_NODE_ITERATOR_TYPE5식과 일치하는 모든 노드를 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.
UNORDERED_NODE_SNAPSHOT_TYPE6식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.
ORDERED_NODE_SNAPSHOT_TYPE7식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.
ANY_UNORDERED_NODE_TYPE8식과 일치하는 어떤 단일 노드를 포함하는 결과 node-set. 노드는 식과 일치하는 문서의 첫 노드일 필요는 없습니다.
FIRST_ORDERED_NODE_TYPE9식과 일치하는 문서의 첫 노드를 포함하는 결과 node-set.
- -
-

원본 문서 정보

- - -
- -

{{ languages( { "en": "en/Introduction_to_using_XPath_in_JavaScript" } ) }}

diff --git a/files/ko/javascript_c_engine_embedder's_guide/index.html b/files/ko/javascript_c_engine_embedder's_guide/index.html deleted file mode 100644 index db46ed7fee..0000000000 --- a/files/ko/javascript_c_engine_embedder's_guide/index.html +++ /dev/null @@ -1,434 +0,0 @@ ---- -title: JavaScript C Engine Embedder's Guide -slug: JavaScript_C_Engine_Embedder's_Guide -tags: - - SpiderMonkey ---- -

이 문서는 C로 구현된 JavaScript 엔진인 SpiderMonkey를 전반적으로 소개하며, 애플리케이션이 JavaScript를 인식하도록 하기 위해 어떻게 엔진을 내장하는지에 대해 설명합니다. JavaScript엔진을 여러분의 애플리케이션에 내장하는데는 두가지 큰 이유가 있을 것입니다. 먼저, 스크립트를 사용하여 애플리케이션을 자동화하는 것이 있고, JavaScript엔진과 스크립트를 사용하여 특정 플랫폼에 의존적인 애플케이션 솔루션이 되지 않도록 크로스 플랫폼을 지원하는 것입니다.

-

지원되는 자바스크립트 버전

-

모질라 JS 엔진은 JS1.8, JS 1.3을 통해 JS1.0을 지원하고 ECMAScript-262 규약을 충족합니다. 간단하게 보면, JS 엔진은 JS 문장과 함수를 포함하는 스크립트를 파싱하여 컴파일하고 실행합니다. 해당 엔진은 스크립트 실행에 필요한 JS 개체의 메모리 할당을 관리하고 더 이상 필요하지 않을 경우, 가비지 컬렉션을 통해 개체를 지웁니다.

-

자바스크립트 엔진을 어떻게 사용하나?

-

일반적으로 JS엔진은 공유 리소스로 빌드합니다. 예를 들어, 윈도와 윈도NT에서는 DLL이고 유닉스에서는 공유 라이브러리가 됩니다. 사용방법은 간단합니다. 우선 애플리케이션에 JS엔진을 링크하고 나서 JS엔진 API를 애플리케이션에 임베딩합니다. 이렇게 하면 JS엔진 API는 다음 종류에 해당하는 기능을 제공하게 됩니다.

- -

애플리케이션이 자바스크립트 호출을 지원하려면 런타임 제어(runtime control)와 데이터 타입 조정(datatype manipulation)등과 같은 종류의 기능을 사용합니다. 예를 들어, 어떤 자바스크립트를 호출하기전에 JS_NewRuntime함수를 호출해서 JS엔진을 생성하고 초기화해야 하며, 보안 제어(security control)와 같은 기능은 필요에 따라 선택적으로 사용할 수 있습니다.

-

How Does the Engine Relate to Applications?

-

개념적으로 JS엔진은 시스템에 존재하는 공유 리소스라고 볼 수 있습니다. API call을 애플리케이션에 임베딩하여, JS엔진에 요청을 넘길 수 있습니다. 요청을 처리한 엔진은 값이나 상태정보를 애플리케이션에 되돌려줍니다. 그림1.1은 이러한 일반적인 관계를 보여주고 있습니다.

-

그림 1.1

-

Image:Over1.gif

-

예를 들어 여러분이 자바스크립트를 사용하여 애플리케이션을 자동화하기 위해 JS엔진을 사용한다고 가정합시다. 그리고 해당 애플리케이션에서 실행하는 스크립트에 사용자를 인증하고 애플리케이션에 사용자 접근 권한을 설정한다고 합시다. 우선, 애플리케이션은 사용자에게 이름, 아이디, 접근권한을 위한 입력과 사용자에게 허락되어 애플리케이션에서 사용 가능한 기능 리스트를 보여줄 수 있는 JS 오브젝트를 생성할 수도 있습니다.

-

이러한 경우, 애플리케이션이 처음으로 JS엔진에 요청하는 것은 JS_NewObject를 호출하여 사용자 정의 개체를 생성하는 것입니다. JS엔진이 개체를 생성할 때, 애플리케이션에 해당 포인터를 반환합니다. 이때 부터 애플리케이션은 해당 개체를 사용하여 스크립트를 실행하기 위해 다시 JS엔진을 호출할 수 있습니다. 예를 들어, 사용자 개체를 생성한 이후, 애플리케이션은 스크립트를 즉시 컴파일하고 실행하기 위해 바로 JS_EvaluateScript에 전달할 것입니다. 그 결과, 좀 전의 스크립트는 사용자 정보를 얻어 확인해주고 애플리케이션이 가진 다른 기능을 사용할 수 있도록 접근 권한을 허락하게 됩니다.

-

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 jsapi.h, and it assumes that the first call your application makes to the engine initializes the JS run time.

-

When the JS engine receives an initialization request, it allocates memory for the JS run time. Figure 1.2 illustrates this process:

-

Figure 1.2

-

Image:Over2.gif

-

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.

-

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

-

After you create contexts, you will usually want to initialize the built-in JS objects in the engine by calling JS_InitStandardClasses. The built-in objects include the Array, Boolean, Date, Math, Number, and String objects used in most scripts.

-

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 JS_InitClass to set up the class in the run time, and then call JS_NewObject 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 JS_SetProperty for each property.

-

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.

-

Figure 1.3

-

Image:Over3.gif

-

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.

-

NOTE: Only one thread at a time should be given access to a specific context.

-

Building the Engine

-

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.

-

For example, under Unix, the js source directory contains a base gnu make file called Makefile.ref, and a config directory. The config directory contains platform-specific .mk files to use with Makefile.ref for your environment. Under Windows NT the nmake file is js.mak.

-

Always check the source directory for any readme files that may contain late-breaking or updated compilation instructions or information.

-

What Are the Requirements for Engine Embedding?

-

To make your application JS-aware, embed the appropriate engine calls in your application code. There are at least five steps to embedding:

-
    -
  1. Add #include "jsapi.h" 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 jsdbgapi.h in the appropriate modules. Most other header files in the JS source code should - - not - be included. To do so might introduce dependencies based on internal engine implementations that might change from release to release.
    2. -
  2. 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 jsapi.h.
    3. -
  3. 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.
    4. -
  4. 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.
    5. -
  5. Most JS engine calls return a value. If this value is zero or NULL, 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.
    6. -
-

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 - - Client-Side JavaScript Guide - . For further information about scripting server-side objects, see the - - Server-Side JavaScript Guide - .

-
.
-.
-.
-#include <stdio.h>
-#include <stdlib.h>
-#include <string.h>
-
-/* 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;
-
-}
-
-

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 js.c, the sample application source code that is included with the JS engine source code.

-

Understanding Key Embedding Concepts

-

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.

-

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 main function typically sandwiches API calls for initializing and freeing the JS run time around whatever other functionality you provide:

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

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.

-

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:

-
builtins = JS_InitStandardClasses(cx, glob);
-
-

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.

-

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 Initializing Built-in and Global JS Objects and Creating and Initializing Custom Objects.

-

Managing a Run Time

-

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

-
 rt = JS_NewRuntime(8L * 1024L * 1024L);
-
-

As this example illustrates, JS_NewRuntime 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.

-

Normally, you only need one run time for an application. It is possible, however, to create multiple run times by calling JS_NewRuntime as necessary and storing the return value in a different pointer.

-

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

-
 JS_DestroyRuntime(rt);
-
-

If you use multiple run times, be sure to free each of them before ending your application.

-

Managing Contexts

-

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.

-

To create a new context for a script, use JS_NewContext. 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:

-
 JSContext *cx;
- .
- .
- .
- cx = JS_NewContext(rt, 8192);
-
-

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:

-
    -
  1. Create only as many contexts as you need at one time in your application.
    2. -
  2. Keep contexts for as long as they may be needed in your application rather than destroying and recreating them as needed.
    3. -
-

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 JS_DestroyContext to free the context when it is no longer needed. This function takes a single argument, the pointer to the context to destroy:

-
 JS_DestroyContext(cx);
-
-

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 JS_GetRuntime, and pass the context as an argument. JS_GetRuntime returns a pointer to the appropriate run time if there is one:

-
 rt = JS_GetRuntime(cx);
-
-

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 JS_SetContextPrivate to establish a pointer to private data for use with the context, and call JS_GetContextPrivate to retrieve the pointer so that you can access the data. Your application is responsible for creating and managing this optional private data.

-

To create private data and associate it with a context:

-
    -
  1. Establish the private data as you would a normal C void pointer variable.
    2. -
  2. Call JS_SetContextPrivate, and specify the context for which to establish private data, and specify the pointer to the data.
    3. -
-

For example:

-
 JS_SetContextPrivate(cx, pdata);
-
-

To retrieve the data at a later time, call JS_GetContextPrivate, and pass the context as an argument. This function returns the pointer to the private data:

-
 pdata = JS_GetContextPrivate(cx);
-
-

Initializing Built-in and Global JS Objects

-

The JavaScript engine provides several built-in objects that simplify some of your development tasks. For example, the built-in Array 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 JS_InitStandardClasses.

-

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.

-

A single API call, JS_InitStandardClasses, initializes the global and function objects and the built-in engine objects so that your application can use them:

-
 JSBool builtins;
- .
- .
- .
- builtins = JS_InitStandardClasses(cx, glob);
-
-

JS_InitStandardClasses returns a JS boolean value that indicates the success or failure of the initialization.

-

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 JS_SetGlobalObject. For more information, see the reference entry for JS_SetGlobalObject.

-

Creating and Initializing Custom Objects

-

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.

-

There are two ways to create custom objects that the JS engine can use:

- -

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 JS_AddRoot or JS_AddNamedRoot. Using these functions ensures that the JS engine will keep track of the objects and clean them up during garbage collection, if appropriate.

-

Creating an Object From a Script

-

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.

-

NOTE: You can also use scripts to create persistent objects, too.

-

To create a custom object using a script:

-
    -
  1. 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?
    2. -
  2. Code the JS script that defines and creates the object. For example: function myfun(){ var x = newObject(); . . . } NOTE: Object scripting using JavaScript occurs outside the context of embedding the JS engine in your applications. For more information about object scripting, see the - - Client-Side JavaScript Guide - and the - - Server-Side JavaScript Guide - . 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 JS_EvaluateScript, JS_EvaluateUCScript or 2.) compile the script once with a call to JS_CompileScript or JS_CompileUCScript, and then execute it repeatedly with individual calls to JS_ExecuteScript. The "UC" versions of these calls provide support for Unicode-encoded scripts.
    3. -
-

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.

-

Embedding a Custom Object in an Application

-

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.

-

One way to embed a custom object in an application is to:

-
    -
  1. Create a JSPropertySpec data type, and populate it with the property information for your object, including the name of the property's get and set methods.
    2. -
  2. Create a JSFunctionSpec data type, and populate it with information about the methods used by your object.
    3. -
  3. Create the actual C functions that are executed in response to your object's method calls.
    4. -
  4. Call to JS_NewObject or JS_ConstructObject to instantiate the object.
    5. -
  5. Call JS_DefineFunctions to create the object's methods.
    6. -
  6. Call JS_DefineProperties to create the object's properties.
    7. -
-

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.

-

NOTE: An alternate, and in many cases, easier way to create a custom object in application code is to call JS_DefineObject to create the object, and then make repeated calls to JS_SetProperty to set the object's properties. For more information about defining an object, see JS_DefineObject . For more information about setting an object's properties, see JS_SetProperty.

-

Providing Private Data for Objects

-

Like contexts, you can associate large quantities of data with an object without having to store the data in the object itself. Call JS_SetPrivate to establish a pointer to private data for the object, and call JS_GetPrivate to retrieve the pointer so that you can access the data. Your application is responsible for creating and managing this optional private data.

-

To create private data and associate it with an object:

-
    -
  1. Establish the private data as you would a normal C void pointer variable.
    2. -
  2. Call JS_SetPrivate, specify the object for which to establish private data, and specify the pointer to the data.
    3. -
-

For example:

-
 JS_SetPrivate(cx, obj, pdata);
-
-

To retrieve the data at a later time, call JS_GetPrivate, and pass the object as an argument. This function returns the pointer to an object's private data:

-
 pdata = JS_GetPrivate(cx, obj);
-
-

Handling Unicode

-

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Standard FunctionUnicode-enabled Function
JS_DefinePropertyJS_DefineUCProperty
JS_DefinePropertyWithTinyIdJS_DefineUCPropertyWithTinyId
JS_LookupPropertyJS_LookupUCProperty
JS_GetPropertyJS_GetUCProperty
JS_SetPropertyJS_SetUCProperty
JS_DeleteProperty2JS_DeleteUCProperty2
JS_CompileScriptJS_CompileUCScript
JS_CompileScriptForPrincipalsJS_CompileUCScriptForPrincipals
JS_CompileFunctionJS_CompileUCFunction
JS_CompileFunctionForPrincipalsJS_CompileUCFunctionForPrincipals
JS_EvaluateScriptJS_EvaluateUCScript
JS_EvaluateScriptForPrincipalsJS_EvaluateUCScriptForPrincipals
JS_NewStringJS_NewUCString
JS_NewStringCopyNJS_NewUCStringCopyN
JS_NewStringCopyZJS_NewUCStringCopyZ
JS_InternStringJS_InternUCString
--JS_InternUCStringN
-

Unicode-enabled functions work exactly like their traditional namesakes, except that where traditional functions take a char * argument, the Unicode versions take a jschar * argument.

-

Working with JS Data Types

-

JavaScript defines its own data types. Some of these data types correspond directly to their C counterparts. Others, such as JSObject, jsdouble, and JSString, are specific to JavaScript.

-

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: JSObject, jsdouble, and JSString. 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.

-

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.

-

NOTE: Your application can also call JS_GC or JS_MaybeGC to force garbage collection at any time. JS_GC forces garbage collection. JS_MaybeGC 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.

-

Working with JS Values

-

In addition to JS data types, the JS engine also uses JS values, called jsvals. A jsval is essentially a pointer to any JS data type except integers. For integers, a jsval 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 jsvals improves engine efficiency, and permits many API functions to handle a variety of underlying data types.

-

The engine API contains a group of macros that test the JS data type of a jsval. These are:

- -

Besides testing a jsval for its underlying data type, you can test it to determine if it is a primitive JS data type (JSVAL_IS_PRIMITIVE). Primitives are values that are undefined, null, boolean, numeric, or string types.

-

You can also test the value pointed to by a jsval to see if it is NULL (JSVAL_IS_NULL) or void (JSVAL_IS_VOID).

-

If a jsval points to a JS data type of JSObject, jsdouble, or jsstr, you can cast the jsval to its underlying data type using JSVAL_TO_OBJECT, JSVAL_TO_DOUBLE, and JSVAL_TO_STRING, 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 jsval. Similarly, you can convert a JSObject, jsdouble, and jsstr to a jsval using OBJECT_TO_JSVAL, DOUBLE_TO_JSVAL, and STRING_TO_JSVAL, respectively.

-

Unicode String Support

-

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 JS_NewStringCopyN, the corresponding Unicode version of the function is JS_NewUCStringCopyN. Unicode-enabled API string functions are also available for interned string.

-

Interned String Support

-

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.

-

The engine API offers several calls for working with interned strings:

- -

Managing Security

-

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.

-

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.

-

To implement secure JS, follow these steps:

-
    -
  1. Declare one or more structs of type JSPrincipals in your application code.
    2. -
  2. 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.
    3. -
  3. Populate the JSPrincipals struct with your security information. This information can include common codebase information.
    4. -
  4. 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 JSPrincipals struct. The following table lists these API functions and their purposes:
    5. -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FunctionPurpose
JS_CompileScriptForPrincipalsCompiles, but does not execute, a security-enabled script.
JS_CompileUCScriptForPrincipalsCompiles, but does not execute, a security-enabled, Unicode-encoded script.
JS_CompileFunctionForPrincipalsCreates a security-enabled JS function from a text string.
JS_CompileUCFunctionForPrincipalsCreates a JS function with security information from a Unicode-encoded character string.
JS_EvaluateScriptForPrincipalsCompiles and executes a security-enabled script.
JS_EvaluateUCScriptForPrincipalsCompiles and executes a security-enabled, Unicode-encoded character script.
-

 

diff --git a/files/ko/learn/accessibility/html/index.html b/files/ko/learn/accessibility/html/index.html new file mode 100644 index 0000000000..dae842fc92 --- /dev/null +++ b/files/ko/learn/accessibility/html/index.html @@ -0,0 +1,537 @@ +--- +title: 'HTML: 접근성을 위한 기초' +slug: Learn/접근성/HTML +tags: + - HTML + - HTML 접근성 + - 스크린리더 + - 시멘틱 + - 시멘틱 웹 + - 시멘틱웹 + - 웹 접근성 + - 접근성 향상 +translation_of: Learn/Accessibility/HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
+ +

HTML 요소가 늘 올바른 목적을 가지고 쓰이는지 확인하는 것만으로도, 수많은 웹 콘텐츠는 접근성이 향상됩니다. 이 문서에는 접근성을 최대한으로 보장하기 위해 HTML을 어떻게 사용해야 하는지 자세히 설명합니다.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML (see Introduction to HTML), and understanding of what accessibility is.
Objective:To gain familiarity with what features of HTML have accessibility benefits, and how to use them appropriately in your web documents.
+ +

HTML과 접근성

+ +

 

+ +

HTML에 대해 더 많은 자료와 예제를 접하고, 더 많이 배우면 배울수록 당신은 의미론적 HTML(시멘틱 HTML, POSH 또는 Plain Old Semantic HTML라고 부르기도 합니다)을 사용하는 것이 중요하다는 공통 주제를 계속해서 접하게 될 것입니다. 이것은 가능한 올바른 목적으로 올바른 HTML 요소를 사용하는 것을 의미합니다.

+ +

당신은 아마 이것이 왜 중요한지 의문을 가질 수 있을 것입니다. 당신은 CSS와 JavaScript 조합을 사용해 원하는 방식으로 HTML 요소들을 동작시킬 수 있기 때문입니다. 예를 들어 사이트에서 동영상을 제어하기 위한 버튼을 당신은 이렇게 마크업 할 수 있습니다.

+ +
<div>Play video</div>
+ +

그러나 당신이 나중에 더 자세하게 배울수록, 작업에 올바른 HTML 요소를 사용하는 것이 많은 의미를 내포하고 있음을 깨닫게 될 것입니다.

+ +
<button>Play video</button>
+ +

Not only do HTML <button>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.

+ +

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:

+ +
    +
  1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
    2. +
  2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
    3. +
  3. Good for SEO — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.
    4. +
+ +

Let's get on and look at accessible HTML in more detail.

+ +
+

Note: 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 Screenreaders guide for more details.

+
+ +

Good semantics

+ +

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.

+ +

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.

+ +

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.

+ +

The goal isn't "all or nothing", however — every improvement you are able to make will help the cause of accessibility.

+ +

Text content

+ +

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:

+ +
<h1>My heading</h1>
+
+<p>This is the first section of my document.</p>
+
+<p>I'll add another paragraph here too.</p>
+
+<ol>
+  <li>Here is</li>
+  <li>a list for</li>
+  <li>you to read</li>
+</ol>
+
+<h2>My subheading</h2>
+
+<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
+
+<h2>My 2nd subheading</h2>
+
+<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
+ +

We've prepared a version with longer text for you to try out with a screenreader (see good-semantics.html). If you try navigating through this, you'll see that this is pretty easy to navigate:

+ +
    +
  1. The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.
    2. +
  2. It stops after each element, letting you go at whatever pace is comfortable for you.
    3. +
  3. You can jump to next/previous heading in many screenreaders.
    4. +
  4. 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.
    5. +
+ +

People sometimes write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:

+ +
<font size="7">My heading</font>
+<br><br>
+This is the first section of my document.
+<br><br>
+I'll add another paragraph here too.
+<br><br>
+1. Here is
+<br><br>
+2. a list for
+<br><br>
+3. you to read
+<br><br>
+<font size="5">My subheading</font>
+<br><br>
+This is the first subsection of my document. I'd love people to be able to find this content!
+<br><br>
+<font size="5">My 2nd subheading</font>
+<br><br>
+This is the second subsection of my content. I think is more interesting than the last one.
+ +

If you try our longer version out with a screenreader (see bad-semantics.html), 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.

+ +

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.

+ +

Using clear language

+ +

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:

+ + + +

Page layouts

+ +

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.

+ +

Try our example table-layout.html example, which looks something like this:

+ +
<table width="1200">
+      <!-- main heading row -->
+      <tr id="heading">
+        <td colspan="6">
+
+          <h1 align="center">Header</h1>
+
+        </td>
+      </tr>
+      <!-- nav menu row  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Home</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Our team</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Projects</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Contact</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Search query" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Go!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- main content and aside row -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
+
+          <!-- main content goes here -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Related</h2>
+
+          <!-- aside content goes here -->
+
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
+
+        </td>
+      </tr>
+      <!-- footer row -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>©Copyright 2050 by nobody. All rights reversed.</p>
+        </td>
+      </tr>
+    </table>
+ +

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.

+ +

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!

+ +

You can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this:

+ +
<header>
+  <h1>Header</h1>
+</header>
+
+<nav>
+  <!-- main navigation in here -->
+</nav>
+
+<!-- Here is our page's main content -->
+<main>
+
+  <!-- It contains an article -->
+  <article>
+    <h2>Article heading</h2>
+
+    <!-- article content in here -->
+  </article>
+
+  <aside>
+    <h2>Related</h2>
+
+    <!-- aside content in here -->
+  </aside>
+
+</main>
+
+<!-- And here is our main footer that is used across all the pages of our website -->
+
+<footer>
+  <!-- footer content in here -->
+</footer>
+ +

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

+ +

Another consideration when creating layouts is using HTML5 semantic elements as seen in the above example (see content sectioning) — 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 Screen Reader Support for new HTML5 Section Elements for an idea of what screen reader support is like).

+ +
+

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

+
+ +

UI controls

+ +

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.

+ +

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 native-keyboard-accessibility.html example (see the source code) — 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.

+ +

+ +

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

+ +
+

Note: Different browsers may have different keyboard control options available. See Using native keyboard accessibility for more details.

+
+ +

You essentially get this behavior for free, just by using the appropriate elements, e.g.

+ +
<h1>Links</h1>
+
+<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
+
+<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
+
+<h2>Buttons</h2>
+
+<p>
+  <button data-message="This is from the first button">Click me!</button>
+  <button data-message="This is from the second button">Click me too!</button>
+  <button data-message="This is from the third button">And me!</button>
+</p>
+
+<h2>Form</h2>
+
+<form>
+  <div>
+    <label for="name">Fill in your name:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Enter your age:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Choose your mood:</label>
+    <select id="mood" name="mood">
+      <option>Happy</option>
+      <option>Sad</option>
+      <option>Angry</option>
+      <option>Worried</option>
+    </select>
+  </div>
+</form>
+ +

This means using links, buttons, form elements, and labels appropriately (including the {{htmlelement("label")}} element for form controls).

+ +

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:

+ +
<div data-message="This is from the first button">Click me!</div>
+<div data-message="This is from the second button">Click me too!</div>
+<div data-message="This is from the third button">And me!</div>
+ +

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.

+ +

Building keyboard accessibility back in

+ +

Adding such advantages back in takes a bit of work (you can an example code in our fake-div-buttons.html example — also see the source code). Here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0":

+ +
<div data-message="This is from the first button" tabindex="0">Click me!</div>
+<div data-message="This is from the second button" tabindex="0">Click me too!</div>
+<div data-message="This is from the third button" tabindex="0">And me!</div>
+ +

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

+ + + +

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:

+ +
document.onkeydown = function(e) {
+  if(e.keyCode === 13) { // The Enter/Return key
+    document.activeElement.click();
+  }
+};
+ +

Here we add a listener to the document object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's keyCode property; if it is the keycode that matches Return/Enter, we run the function stored in the button's onclick handler using document.activeElement.click(). activeElement gives us the element that is currently focused on the page.

+ +

This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.

+ +

Meaningful text labels

+ +

UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.

+ +

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.

+ +

+ +

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>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
+ +

but this is bad link text:

+ +
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
+ +
+

Note: You can find a lot more about link implementation and best practices in our Creating hyperlinks article. You can also see some good and bad examples at good-links.html and bad-links.html.

+
+ +

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:

+ +
Fill in your name: <input type="text" id="name" name="name">
+ +

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

+ +

The following is a much better example:

+ +
<div>
+  <label for="name">Fill in your name:</label>
+  <input type="text" id="name" name="name">
+</div>
+ +

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

+ +

+ +

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.

+ +
+

Note: you can see some good and bad form examples in good-form.html and bad-form.html.

+
+ +

Accessible data tables

+ +

A basic data table can be written with very simple markup, for example:

+ +
<table>
+  <tr>
+    <td>Name</td>
+    <td>Age</td>
+    <td>Gender</td>
+  </tr>
+  <tr>
+    <td>Gabriel</td>
+    <td>13</td>
+    <td>Male</td>
+  </tr>
+  <tr>
+    <td>Elva</td>
+    <td>8</td>
+    <td>Female</td>
+  </tr>
+  <tr>
+    <td>Freida</td>
+    <td>5</td>
+    <td>Female</td>
+  </tr>
+</table>
+ +

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 bad-table.html and try the example out yourself).

+ +

Now have a look at our punk bands table example — you can see a few accessibility aids at work here:

+ + + +
+

Note: See our HTML table advanced features and accessibility article for some more details around accessible data tables.

+
+ +

Text alternatives

+ +

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.

+ +

We have a simple example written up, accessible-image.html, which features four copies of the same image:

+ +
<img src="dinosaur.png">
+
+<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.">
+
+<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">
+
+
+<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">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.</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.

+ +
+

Note: 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!

+
+ +

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

+ +

This highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible. Note that the contents of the alt 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.

+ +

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.

+ +
+

Note: Read Images in HTML and Responsive images for a lot more information about image implementation and best practices.

+
+ +

If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a title 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.

+ +

+ +

Let's have another quick look at the fourth method:

+ +
<img src="dinosaur.png" aria-labelledby="dino-label">
+
+<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
+ +

In this case, we are not using the alt attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an id, and then used the aria-labelledby attribute to refer to that id, 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 alt.

+ +
+

Note: aria-labelledby is part of the WAI-ARIA 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 WAI-ARIA Basics article.

+
+ +

Other text alternative mechanisms

+ +

Images also have another mechanisms available for providing descriptive text. For example, there is a longdesc attribute that is meant to point to a separate web document containing an extended description of the image, for example:

+ +
<img src="dinosaur.png" longdesc="dino-info.html">
+ +

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

+ +

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:

+ +
<figure>
+  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
+  <figcaption>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.</figcaption>
+</figure>
+ +

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.

+ +

Empty alt attributes

+ +
<h3>
+  <img src="article-icon.png" alt="">
+  Tyrannosaurus Rex: the king of the dinosaurs
+</h3>
+ +

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

+ +

The reason to use an empty alt instead of not including it is because many screen readers announce the whole image URL if no alt 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 alt on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.

+ +
+

Note: if possible you should use CSS to display images that are only decoration.

+
+ +

Summary

+ +

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.

+ +

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/ko/learn/accessibility/index.html b/files/ko/learn/accessibility/index.html new file mode 100644 index 0000000000..01c9c2e2bb --- /dev/null +++ b/files/ko/learn/accessibility/index.html @@ -0,0 +1,59 @@ +--- +title: 접근성 +slug: Learn/접근성 +tags: + - ARIA + - CSS + - HTML + - JavaScript + - 랜딩 + - 모듈 + - 문서 + - 배우기 + - 비기너 + - 접근성 +translation_of: Learn/Accessibility +--- +
{{LearnSidebar}}
+ +

웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여 모범 사례(HTML, CSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.

+ +

선결조건

+ +

이 문서를 최대한 활용하려면 최소한 HTML, CSS 및 JavaScript 항목 중 처음 두 문서를 통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다. 

+ +
+

Note: 참고 : 당신은 당신이 당신의 자신의 파일을 생성 할 수있는 기능이없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은  JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할수 있습니다.

+
+ +

가이드

+ +
+
접근성이란?
+
이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.
+
HTML: 접근성을 위한 좋은기초
+
항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.
+
CSS 와 JavaScript의 접근성 모범 사례
+
또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.
+
WAI-ARIA 기초
+
이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는  컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.
+
멀티미디어 접근성
+
접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.
+
모바일 접근성
+
모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.
+
+ +

평가

+ +
+
접근성 문제 해결 
+
평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.
+
+ +

참고 항목

+ + diff --git a/files/ko/learn/accessibility/mobile/index.html b/files/ko/learn/accessibility/mobile/index.html new file mode 100644 index 0000000000..a64c0eaa88 --- /dev/null +++ b/files/ko/learn/accessibility/mobile/index.html @@ -0,0 +1,315 @@ +--- +title: 모바일 접근성 +slug: Learn/접근성/모바일 +translation_of: Learn/Accessibility/Mobile +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +

모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다.

+ + + + + + + + + + + + +
사전지식: +

기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해, 그리고 이전 내용들에 대한 이해.

+
목표: +

모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을 이해한다.

+
+ +

모바일 장치에서의 접근성

+ +

접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다).

+ + + +

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

+ +

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 WAI-ARIA, too.

+ +

To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.

+ +

There are some exceptions that need special consideration for mobile; the main ones are:

+ + + +

Summary of screenreader testing on Android and iOS

+ +

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.

+ +

Let's look at the main two: TalkBack on Android and VoiceOver on iOS.

+ +

Android TalkBack

+ +

The TalkBack screen reader is built into the Android operating system.

+ +

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.

+ +

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.

+ +

When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:

+ +
    +
  1. Single-tapping an app will select it, and the device will read out what the app is.
    2. +
  2. 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.
    3. +
  3. Double-tapping anywhere will open the app/select the option.
    4. +
  4. 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.
    5. +
+ +

If you want to turn TalkBack off:

+ +
    +
  1. Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.)
    2. +
  2. Navigate to the slider switch and activate it to turn it off.
    3. +
+ +
+

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

+
+ +

For a more complete list of TalkBack gestures, see Use TalkBack gestures.

+ +

Unlocking the phone

+ +

When TalkBack is turned on, unlocking the phone is a bit different.

+ +

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.

+ +

You can also explore by touch to find the Unlock button at the bottom middle of the screen, and then double-tap.

+ +

Global and local menus

+ +

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.

+ +

To get to these menus:

+ +
    +
  1. Access the global menu by quickly swiping down, and then right.
    2. +
  2. Access the local menu by quickly swiping up, and then right.
    3. +
  3. Swipe left and right to cycle between the different options.
    4. +
  4. Once you've selected the option you want, double-click to choose that option.
    5. +
+ +

For details on all the options available under the global and local context menus, see Use global and local context menus.

+ +

Browsing web pages

+ +

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.

+ +

For example, with TalkBack turned on:

+ +
    +
  1. Open your web browser.
    2. +
  2. Activate the URL bar.
    3. +
  3. 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: +
      +
    • Select the URL bar by swiping left/right till you get to it, and then double-tapping.
      • +
    • 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.
      • +
    • Once you've finished, find the Enter key and press it.
      • +
    +
    4. +
  4. Swipe left and right to move between different items on the page.
    5. +
  5. Swipe up and right with a smooth motion to enter the local content menu.
    6. +
  6. Swipe right until you find the "Headings and Landmarks" option.
    7. +
  7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
    8. +
  8. 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.
    9. +
+ +

Note: See Get started on Android with TalkBack for more complete documentation.

+ +

iOS VoiceOver

+ +

A mobile version of VoiceOver is built into the iOS operating system.

+ +

To turn it on, go to Your Settings app and select Accessibility > VoiceOver. Press the VoiceOver slider to enable it (you'll also see a number of other options related to VoiceOver on this page).

+ +
+

Note: Some older iOS devices have the VoiceOver menu at Settings app > General > Accessibility > VoiceOver.

+
+ +

Once VoiceOver is enabled, iOS's basic control gestures will be a bit different:

+ +
    +
  1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
    2. +
  2. 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).
    3. +
  3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
    4. +
  4. Swipe with three fingers to scroll through a page.
    5. +
  5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
    6. +
+ +

To turn it off again, navigate back to Settings > General > Accessibility > VoiceOver using the above gestures, and toggle the VoiceOver slider back to off.

+ +

Unlock phone

+ +

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.

+ +

Using the Rotor

+ +

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:

+ +
    +
  1. 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.
    2. +
  2. Once you've found the option you want: +
      +
    • Release your fingers to select it.
      • +
    • 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.
      • +
    +
    3. +
+ +

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

+ +

Browsing web pages

+ +

Let's have a go at web browsing with VoiceOver:

+ +
    +
  1. Open your web browser.
    2. +
  2. Activate the URL bar.
    3. +
  3. 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: +
      +
    • Select the URL bar by swiping left/right until you get to it, and then double-tapping.
      • +
    • 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.
      • +
    • Once you've finished, find the Enter key and press it.
      • +
    +
    4. +
  4. 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).
    5. +
  5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
    6. +
  6. 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: +
      +
    • Speaking Rate: Change the speaking rate.
      • +
    • Containers: Move between different semantic containers on the page.
      • +
    • Headings: Move between headings on the page.
      • +
    • Links: Move between links on the page.
      • +
    • Form Controls: Move between form controls on the page.
      • +
    • Language: Move between different translations, if they are available.
      • +
    +
    7. +
  7. Select Headings. Now you'll be able to swipe up and down to move between headings on the page.
    8. +
+ +

Note: For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see Test Accessibility on Your Device with VoiceOver.

+ +

Control mechanisms

+ +

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 Mouse-specific events). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.

+ +

As an example, the click 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 simple-button-example.html example (see it running live) to see what we mean.

+ +

Alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls.

+ +

If you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:

+ +
div.onmousedown = function() {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  movePanel();
+}
+
+document.onmouseup = stopMove;
+ +

To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:

+ +
div.ontouchstart = function(e) {
+  initialBoxX = div.offsetLeft;
+  initialBoxY = div.offsetTop;
+  positionHandler(e);
+  movePanel();
+}
+
+panel.ontouchend = stopMove;
+ +

We've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).

+ +
+

Note: You can also see fully functional examples showing how to implement different control mechanisms at Implementing game control mechanisms.

+
+ +

Responsive design

+ +

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

+ +

In particular, the most common problems that need to be addressed for mobile are:

+ + + +

Note: We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).

+ +

Specific mobile considerations

+ +

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.

+ +

Not disabling zoom

+ +

Using viewport, it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:

+ +
<meta name="viewport" content="width=device-width; user-scalable=yes">
+ +

You should never set user-scalable=no 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.

+ +

Keeping menus accessible

+ +

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

+ +

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.

+ +

Click here for a good hamburger menu example.

+ +

User input

+ +

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.

+ +

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 common-job-types.html (see the common jobs example live).

+ +

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 html5-form-examples.html for some examples (see the HTML5 form examples live) — try loading these and manipulating them on mobile devices. For example:

+ + + +

If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See input types for raw information on detecting different input types, and also check out our feature detection article for much more information.

+ +

Summary

+ +

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.

+ +

See also

+ + + +
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
+ +
+

In this module

+ + +
diff --git a/files/ko/learn/accessibility/what_is_accessibility/index.html b/files/ko/learn/accessibility/what_is_accessibility/index.html new file mode 100644 index 0000000000..67f4b6d302 --- /dev/null +++ b/files/ko/learn/accessibility/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 +--- +

{{LearnSidebar}}

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

이 글에서는 접근성이 실제로 무엇인지 자세히 살펴보기로 합니다. 이 글에는 웹에서 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 개발 워크 플로우를 포함됩니다.

+ + + + + + + + + + + + +
선행지식:기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해.
목표:접근성과 친해지기. 웹 개발자로서 접근성에어떻게 영향을 미치는지 알아보기
+ +

그렇다면 접근성이란 무엇일까요?

+ +

접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법으로, 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하고 있습니다.

+ +

접근성을 모든 사람을 동일하게 대하고, 그들의 능력이나 상황에 상관 없이 그들에게 같은 기회를 주는 것으로 생각할 수도 있습니다. 휠체어에 있기 때문에 누군가를 물리적 건물에서 제외시키는 것이 옳지 않은 것과 같은 방식으로(공공 건물에는 일반적으로 휠체어 경사로나 엘리베이터가 있기 때문에), 휴대 전화를 사용하지 않는 사람을 웹 사이트에서 제외시키는 것도 옳지 않다. 우리는 모두 다르지만, 모두 인간이기 때문에, 동일한 권리를 갖고 있다.

+ +

접근성은 당연히 지켜져야 할 일이지만 일부 국가에서는 법의 일부이기도 하며,  서비스 사용이나 제품 구매가 불가능했던 사람들을 불러모아 중요한 소비자들로 만들수도 있습니다.

+ +

접근성 및 이에 따른 모범 사례는 다음과 같은 모든 사람에게 도움이 될 수 있습니다.

+ + + +

어떤 종류의 장애를 본 적이 있습니까?

+ +

장애가 있는 사람들도 장애가 없는 사람들만큼이나 다양하고, 그만큰 그들의 장애유형도 다양합니다. 여기서 중요한 교훈은 자신이 컴퓨터와 웹을 어떻게 사용하는 지에 대해 생각하고 다른 사람들이 웹을 어떻게 사용하는 지에 대해 배우는 것이다.

+ +

장애의 주요 유형은 웹 콘텐츠에 액세스 하는 데 사용하는 전문 도구와 함께 아래에 설명되어 있습니다.(흔히 보조공학기기또는 보조기술 이라고 알려진).

+ +
+

Note: 세계 보건 기구(WHO)의 장애 및 보건 현황 보고서에 따르면 전 세계 인구의 약 15%에 해당하는 십억명 이상의 사람들이 장애를 갖고 있으며 1억 1천만명에서 1억 9천만명의 성인들이 심각한 장애를 갖고 있다.

+ +

 

+
+ +

시각장애인

+ +

여기에는 전맹, 저시력 장애인 색각장애인등이 포함되며 이런 많은 사람들이 화면확대경(물리적 확대경 또는 소프트웨어 줌 기능 - 대부분의 브라우저와 운영 체제에는 최근 확대 / 축소 기능이 있음)과 디지털 글자를 큰소리로 읽어주는 소프트웨어인 화면낭독기를 사용한다.

+ + + +

 

+ +

스크린 리더들과 친숙해 지는 것은 좋은 생각이다; 당신은 또한 스크린 리더를 설치하고 그것을 가지고 노는 것이 어떻게 작동하는 지에 대한 아이디어를 얻기 위해서 필요하다. 사용에 대한 자세한 내용은 크로스 브라우저 테스트 화면 판독기 가이드( cross browser testing screen readers guide)를 참조하십시오. 아래의 비디오는 또한 경험이 어떠한지에 대한 간단한 예를 제공한다.

+ +

{{EmbedYouTube("IK97XMibEws")}}

+ +

 

+ +

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 Visual impairment and blindness). 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.

+ +

People with hearing impairments

+ +

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 Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders), but there are not really special ATs specific for computer/web use.

+ +

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.

+ +

Hearing-impaired people also represent a significant userbase — "360 million people worldwide have disabling hearing loss", says the World Health Organization's Deafness and hearing loss fact sheet.

+ +

People with mobility impairments

+ +

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 head pointer to interact with computers.

+ +

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.

+ +

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 Cross browser testing Using native keyboard accessibility section.

+ +

In terms of statistics, a significant number of people have mobility impairments. The U.S. Centers for Disease Control and Prevention Disability and Functioning (Noninstitutionalized Adults 18 Years and Over) reports the USA "Percent of adults with any physical functioning difficulty: 15.1%".

+ +

People with cognitive impairments

+ +

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 ADHD (attention deficit hyperactivity disorder), to people on the autistic spectrum, to people with schizophrenia, 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.

+ +

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.

+ +

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:

+ + + +

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.

+ +

In terms of statistics, again the numbers are significant. Cornell University's 2014 Disability Status Report (PDF, 511KB) indicates that in 2014, 4.5% of people in the USA aged 21–64 had some form of cognitive disability.

+ +
+

Note: WebAIM's Cognitive page provides a useful expansion of these ideas, and is certainly worth reading.

+
+ +

Implementing accessibility into your project

+ +

A common accessibility myth is that accessibility is an expensive "added extra" to implement on a project. This myth actually can be true if either:

+ + + +

If however you consider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal.

+ +

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 alternative text or bad link text — see Element relationships and context), and doing some testing with disabled user groups to see how well more complex site features work for them. For example:

+ + + +

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.

+ +

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.

+ +

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.

+ +

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.

+ +
+

Note: Our Handling common accessibility problems article covers accessibility specifics that should be tested in more detail.

+
+ +

To summarize:

+ + + +

Accessibility guidelines and the law

+ +

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.

+ + + +

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.

+ +

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.

+ +

Accessibility APIs

+ +

Web browsers make use of special accessibility APIs (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 accessibility tree.

+ +

Different operating systems have different accessibility APIs available :

+ + + +

Where the native semantic information provided by the HTML elements in your web apps falls down, you can supplement it with features from the WAI-ARIA specification, which add semantic information to the accessibility tree to improve accessibility. You can learn a lot more about WAI-ARIA in our WAI-ARIA basics article.

+ +

Summary

+ +

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.

+ +

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

+ +

In this module

+ + diff --git a/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html new file mode 100644 index 0000000000..d39ea4069f --- /dev/null +++ b/files/ko/learn/common_questions/checking_that_your_web_site_is_working_properly/index.html @@ -0,0 +1,170 @@ +--- +title: 웹 사이트가 제대로 동작하는지 확인하는 방법 +slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 +translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly +--- +
+

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

+
+ + + + + + + + + + + + +
전제 조건:먼저, upload files웹 서버에 파일 업로드 방법을 알아야 합니다.
목표:웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.
+ +

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

+ +

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

+ +

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

+ +

Active Learning

+ +

There is no active learning available yet. Please, consider contributing.

+ +

Dig deeper

+ +

브라우저에서 테스트하기

+ +

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

+ +

어?, 이미지가 어디갔죠?

+ +

우리의 개인 사이트를 봅시다.(동작x), http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

+ +

Oops, the ‘unicorn’ image is missing

+ +

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

+ +

The image has a 404 error

+ +

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

+ +

HTTP statuses

+ +

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

+ +
+
200: OK
+
The resource you asked for was delivered.
+
301: Moved permanently
+
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.
+
304: Not modified
+
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.
+
403: Forbidden
+
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).
+
404: Not found
+
Self-explanatory. We'll discuss how to solve this below.
+
500: Internal server error
+
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.
+
503: Service unavailable
+
Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.
+
+ + + +

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

+ +

Fixing the 404

+ +

So what went wrong?

+ +

Le list of images in our project

+ +

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: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

+ +

Deleting the ‘s’

+ +

Save, push to the server, and reload the page in your browser:

+ +

The image loads corectly in the browser

+ +

There you go! Let's look at the {{Glossary("HTTP")}} statuses again:

+ + + +

So we fixed the error and learned a few HTTP statuses along the way!

+ +

Frequent errors

+ +

The most frequent errors that we find are these:

+ +

Typos in the address

+ +

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

+ +

Address unreachable

+ +

The address cannot be found. Indeed.

+ +

404 errors

+ +

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.

+ +

JavaScript errors

+ +

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.

+ +

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

+ +

A Javascript error is shown in the Console

+ +

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

+ +

More things to check

+ +

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:

+ +

How's the performance?

+ +

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

+ +

Yslow diagnostics

+ +

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.

+ +

Is the server responsive enough?

+ +

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

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

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

+ +

A simple checklist

+ + + +

Next steps

+ +

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.

+ + diff --git a/files/ko/learn/common_questions/thinking_before_coding/index.html b/files/ko/learn/common_questions/thinking_before_coding/index.html new file mode 100644 index 0000000000..8885c5999b --- /dev/null +++ b/files/ko/learn/common_questions/thinking_before_coding/index.html @@ -0,0 +1,176 @@ +--- +title: 나의 웹사이트를 설계하기 위해서는? +slug: Learn/Common_questions/코딩하기_전에_생각하기 +tags: + - 능동학습필요 + - 초보자 +translation_of: Learn/Common_questions/Thinking_before_coding +--- +

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

+ + + + + + + + + + + + +
선이수:없음
목표:웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.
+ +

요약

+ +

웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.

+ +

따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.

+ + + +

이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.

+ +

능동 학습

+ +

아직 가능한 능동 학습이 없다. 기여를 고민해보라.

+ +

깊게 들어가기

+ +

프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.

+ +

기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.

+ +

친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.

+ +
+

메모: 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  Project Ideation(관념화), Project Planning(계획) 그리고 Project Management(관리) 라고 부르는 것을 다루는 단순한 방법이다.

+
+ +

내가 정확히 달성하고 싶은 것은 무엇인가?

+ +

이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.

+ +

당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.

+ + + +

일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.

+ +
    +
  1. 새로운 애인 찾기
    2. +
  2. 다른 사람들이 내 음악을 듣게 하기
    3. +
  3. 내 음악에 대해 이야기하기
    4. +
  4. 다른 음악가들과 만나기
    5. +
  5. 관련 상품 팔기 
    6. +
  6. 동영상으로 음악 가르치기
    7. +
  7. 내 고양이 사진 출판하기
    8. +
+ +

단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)

+ +

우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.

+ +

어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?

+ +

그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?

+ +

우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.

+ +

애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.

+ +

음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.

+ +

어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.

+ +

내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?

+ +

이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.

+ +

긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
목표해야할 것
사람들이 당신의 음악을 듣게 하기 +
    +
  1. 음악을 녹음한다.
    2. +
  2. 온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)
    3. +
  3. 사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.
    4. +
+
음악에 대해 이야기하기 +
    +
  1. 토의를 시작하기 위한 몇몇의 글을 쓴다.
    2. +
  2. 어떻게 글이 보여야 하는 지 정해라.
    3. +
  3. 웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)
    4. +
+
다른 음악가들 만나기 +
    +
  1. 사람들이 너와 연락할 방법을 제공해라.
    2. +
  2. 너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.
    3. +
+
goodies 팔기 +
    +
  1. goodies 만든다.
    2. +
  2. goodies 저장한다.
    3. +
  3. 쇼핑을 하는 방식 찾는다.
    4. +
  4. 결제 방식 찾는다.
    5. +
  5. 사이트에서 사람들의 주문 메카니즘 만든다.
    6. +
+
동영상을 통해 음악 가르치기 +
    +
  1. 동영상 강의 녹화한다.
    2. +
  2. 온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)
    3. +
  3. 웹사이트의 한 부분에서 비디오 접근 가능하게 한다.
    4. +
+
+ +

공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.

+ +

둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)

+ +

결론

+ +

당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.

+ +

이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 how the Internet works(인터넷이 작동하는 법) 을 읽어야 할 것이다.

+ +

 

diff --git "a/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" "b/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" deleted file mode 100644 index d39ea4069f..0000000000 --- "a/files/ko/learn/common_questions/\354\233\271_\354\202\254\354\235\264\355\212\270\352\260\200_\354\240\234\353\214\200\353\241\234_\353\217\231\354\236\221\355\225\230\353\212\224\354\247\200_\355\231\225\354\235\270/index.html" +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: 웹 사이트가 제대로 동작하는지 확인하는 방법 -slug: Learn/Common_questions/웹_사이트가_제대로_동작하는지_확인 -translation_of: Learn/Common_questions/Checking_that_your_web_site_is_working_properly ---- -
-

이번에는 웹사이트 동작과 관련한 다양한 문제해결 단계와 그 문제들을 해결하기 위한 방법들을 알아보겠습니다.

-
- - - - - - - - - - - - -
전제 조건:먼저, upload files웹 서버에 파일 업로드 방법을 알아야 합니다.
목표:웹 사이트에서 발생할 수 있는 기본적인 문제들과 해결방법을 알아봅시다.
- -

개발하신 웹 사이트를 온라인상에 배포를 하였나요? 잘 했어요! 그런데 문제없이 동작하는게 확실한가요?

- -

종종 온라인에 배포한 웹 서버는 로컬에서 모습과는 꽤 다르게 동작할 때가 있습니다. 그 때문에 온라인에 배포할 때마다 한 번씩 확인이 필요합니다. 아마 많은 문제가 발생해 놀라게 될 텐데요: 이미지가 나오지 않거나, 페이지가 로딩이 안되거나 느리게 로딩되는 등 하는 문제들요. 대부분의 경우는 큰 문제가 아닙니다, 간단한 실수나 호스팅 세팅 같은 문제죠.

- -

이런 문제들을 어떻게 진단하고 해결하는지 살펴봅시다.

- -

Active Learning

- -

There is no active learning available yet. Please, consider contributing.

- -

Dig deeper

- -

브라우저에서 테스트하기

- -

웹 사이트가 잘 동작하는지 알고 싶다면, 먼저 브라우저를 시작하고 테스트하려는 페이지로 이동하세요.

- -

어?, 이미지가 어디갔죠?

- -

우리의 개인 사이트를 봅시다.(동작x), http://demozilla.examplehostingprovider.net/. It's not showing the image we expected!

- -

Oops, the ‘unicorn’ image is missing

- -

Open Firefox's Network tool (Tools ➤ Web Developer ➤ Network) and reload the page:

- -

The image has a 404 error

- -

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

- -

HTTP statuses

- -

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

- -
-
200: OK
-
The resource you asked for was delivered.
-
301: Moved permanently
-
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.
-
304: Not modified
-
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.
-
403: Forbidden
-
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).
-
404: Not found
-
Self-explanatory. We'll discuss how to solve this below.
-
500: Internal server error
-
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.
-
503: Service unavailable
-
Usually resulting from a shortterm system overload. The server has some sort of problem. Try again in a little while.
-
- - - -

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

- -

Fixing the 404

- -

So what went wrong?

- -

Le list of images in our project

- -

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: unicorn_pics.png rather than unicorn_pic.png. So correct the typo in your code editor by changing the image's src attribute:

- -

Deleting the ‘s’

- -

Save, push to the server, and reload the page in your browser:

- -

The image loads corectly in the browser

- -

There you go! Let's look at the {{Glossary("HTTP")}} statuses again:

- - - -

So we fixed the error and learned a few HTTP statuses along the way!

- -

Frequent errors

- -

The most frequent errors that we find are these:

- -

Typos in the address

- -

We wanted to type http://demozilla.examplehostingprovider.net/ but typed too fast and forgot an “l”:

- -

Address unreachable

- -

The address cannot be found. Indeed.

- -

404 errors

- -

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.

- -

JavaScript errors

- -

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.

- -

Open the console (Tools ➤ Web developer ➤ Web Console) and reload the page:

- -

A Javascript error is shown in the Console

- -

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

- -

More things to check

- -

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:

- -

How's the performance?

- -

Does the page load fast enough? Resources like WebPagetest.org or browser add-ons like YSlow can tell you a few interesting things:

- -

Yslow diagnostics

- -

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.

- -

Is the server responsive enough?

- -

ping is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:

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

Just keep in mind a handy keyboard shortcut: Ctrl+C.  Ctrl+C sends an “interrupt” signal to the runtime and tells it to stop.  If you don't stop the runtime, ping will ping the server indefinitely.

- -

A simple checklist

- - - -

Next steps

- -

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.

- - diff --git "a/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" "b/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" deleted file mode 100644 index 8885c5999b..0000000000 --- "a/files/ko/learn/common_questions/\354\275\224\353\224\251\355\225\230\352\270\260_\354\240\204\354\227\220_\354\203\235\352\260\201\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: 나의 웹사이트를 설계하기 위해서는? -slug: Learn/Common_questions/코딩하기_전에_생각하기 -tags: - - 능동학습필요 - - 초보자 -translation_of: Learn/Common_questions/Thinking_before_coding ---- -

이 글은 모든 프로젝트에서 중요한 첫 단계  - 프로젝트를 통해 달성하고 싶은 것을 정의하기 - 를 다룬다.

- - - - - - - - - - - - -
선이수:없음
목표:웹 프로젝트 방향 설정을 위해 목적을 정하는 법을 배운다.
- -

요약

- -

웹 프로젝트를 시작할 때, 많은 사람들은 기술적인 면에 집중한다. 물론 자기 분야의 기술에 익숙해야한다. 그러나 정말 중요한건 무엇을 달성하고 싶은가이다. 당연한 이야기같지만, 생각보다 많은 프로젝트들이 기술적 방법의 부족이 아닌, 목적과 전망의 부족으로 실패한다.

- -

따라서 아이디어를 얻고, 그것을 웹 사이트로 만들고 싶을 때, 다른 것보다 먼저 대답해야할 질문이 있다.

- - - -

이러한 것들을 프로젝트 관념(ideation)이라 한다. 당신이 초보자든 숙련된 개발자든 목표에 도달하기 위해 반드시 거쳐야 할 첫 단계이다.

- -

능동 학습

- -

아직 가능한 능동 학습이 없다. 기여를 고민해보라.

- -

깊게 들어가기

- -

프로젝트는 절대 기술에서 시작하지 않는다. 음악가는 무엇을 연주할 지 정하기 전엔 어떤 음악도 만들지 않는다. 화가, 작가, 그리고 웹 개발자도 마찬가지다. 기술은 다음이다.

- -

기술은 분명히 중요하다. 음악가는 기악을 완성해야 한다. 그러나 좋은 음악가는 절대 생각없이 좋은 음악을 만들수 없다. 그러므로 코드와 툴같은 기술로 뛰어들기 전에, 한 걸음 물러서서 하고 싶은 것을 상세히 결정해야 한다.

- -

친구와 함께하는 한 시간의 토론은 좋은 시작이지만 부족하다. 생각을 현실로 만들 길의 탁 트인 전망을 얻으려면 앉아서 생각을 구조화해야한다. 이것을 하기 위해서, 오직 펜과 종이 그리고 적어도 다음 질문에 대한 답할 시간이 필요하다.

- -
-

메모: 프로젝트 관념화를 수행하기 위한 셀 수 없는 방법들이 있다. 우리는 여기에 그것들을 모두 제시할 수는 없다. (책 전체로는 충분하지 않을 것이다). 이 곳에 주는 것은 전문가들이  Project Ideation(관념화), Project Planning(계획) 그리고 Project Management(관리) 라고 부르는 것을 다루는 단순한 방법이다.

-
- -

내가 정확히 달성하고 싶은 것은 무엇인가?

- -

이것은 대답해야 하는 가장 중요한 질문이다. 왜냐하면, 이것이 다른 모든 것을 만들기 때문이다. 도달하고 싶은 모든 목표를 목록화해라. 그것은 무엇일 수도 있다: 돈을 벌기 위해 물건 팔기, 정치적인 의견 표현하기, 새로운 친구 만들기,  음악가들과 공연하기, 고양이 사진 모으기, 또는 원하는 무엇이든.

- -

당신이 음악가라고 생각해보자. 이런걸 원할 수 있다.

- - - -

일단 이런 리스트를 만들고 나면, 우선순위를 정하는 것이 필요하다. 가장 중요한 것부터 덜 중요한 것까지 목표를 정렬해라.

- -
    -
  1. 새로운 애인 찾기
    2. -
  2. 다른 사람들이 내 음악을 듣게 하기
    3. -
  3. 내 음악에 대해 이야기하기
    4. -
  4. 다른 음악가들과 만나기
    5. -
  5. 관련 상품 팔기 
    6. -
  6. 동영상으로 음악 가르치기
    7. -
  7. 내 고양이 사진 출판하기
    8. -
- -

단순한 목표 쓰기와 순위 정하기가 만들고 싶은 것을 결정할 때, 도움이 될 것이다. (내가 이런 특징을 구현해야할까, 이런 서비스를 사용해야할까, 이런 디자인을 만들어야할까?)

- -

우선순위가 정리된 목적 기록부가 생겼으니, 다음 질문으로 이동하자.

- -

어떻게 웹사이트가 나를 목적지로 데려다 줄 수 있을까?

- -

그래서 당신은 목표 리스트를 가지고 있고, 그 목표들을 이루기위해 웹사이트가 필요하다고 느낍니다. 확실합니까?

- -

우리의 예를 다시 봅시다. 우리는 음악에 관련된 5개의 목표, 개인 삶(소중한 사람 찾기)에 관련된 하나의 목표 그리고, 완전히 상관없는 고양이 사진을 가지고 있습니다. 이 모든 목표들을 다루기 위한 하나의 웹사이트를 만드는 것이 합리적입니까? 그것이 필요할까요? 결국에, 많은 기존의 웹 서비스는 새로운 웹사이트를 만들지 않고 당신의 목표를 가져다 줄 지 모릅니다.

- -

애인을 찾는 것은 새로운 웹사이트를 구축하는 것보다 기존의 자원을 사용하는 것이 더 알맞다는 점에서 중요한 케이스입니다. 왜? 왜냐하면 우리가 실제로 애인을 찾는 것보다 웹사이트를 구축하고 유지하는 데 더 많은 시간을 소비하기 때문입니다. 우리의 목표가 가장 중요하기 때문에, 우리는 처음부터 시작하는 것보다는 기존의 툴을 레버리징(leveraging )하는 것에 에너지를 써야합니다. 다시, 사진을 보여주기 위해 이용할 수 있는 이미 너무 많은 웹서비스가 있습니다 그래서 우리의 고양이가 얼마나 귀여운 지에 대한 것을 퍼뜨리기 위해 새로운 사이트를 구축하는 데 노력할 가치가 없습니다.

- -

음악과 연관된 다른 5개의 목표가 있습니다. 물론, 이런 목표들을 다룰 수 있는 많은 웹서비스가 있습니다. 그러나, 우리만을 위한 웹사이트를 구축하는 경우에는 이해가 됩니다. 그런 웹사이트는 하나의 공간에 퍼블리싱하고 싶은 모든 항목을 합치는 것과 (목표 3, 5, 6에 적합) 그리고 우리와 대중 사이에 상호작용을 장려하는 것에 (목표 2, 4) 가장 좋은 방법입니다. 다시 말해서, 이런 목표들이 같은 주제를 중심으로 돌기 때문에, 한 곳에 모든 것을 가지는 것이 우리의 목표를 충족하고, 팔로어들과 연결하는 데 도움이 될 것입니다.

- -

어떻게 웹사이트가 나의 목표를 달성하는 데 도움이 될까요? 그것에 답함으로써, 우리는 우리의 목표를 달성하는 데 가장 좋은 방법을 찾을 것이고, 노력이 낭비되지 않도록 할 것입니다.

- -

내 목표를 달성하기 위해, 무엇을, 어떤 순서로 해야할까?

- -

이제 우리가 달성하고 싶은 것을 알고 있으므로, 그 목표들을 실행가능한 단계로 바꿀 시간입니다.

- -

긴 설명을 하기 보다는 이 표로 우리의 예제를 돌아봅시다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
목표해야할 것
사람들이 당신의 음악을 듣게 하기 -
    -
  1. 음악을 녹음한다.
    2. -
  2. 온라인에서 사용할 수 있는 몇몇의 오디오 파일을 준비힌다. (기존의 웹서비스로 이것을 할 수 있을까?)
    3. -
  3. 사람들에게 당신의 웹사이트의 일부에서 당신의 음악에 접근하게 한다.
    4. -
-
음악에 대해 이야기하기 -
    -
  1. 토의를 시작하기 위한 몇몇의 글을 쓴다.
    2. -
  2. 어떻게 글이 보여야 하는 지 정해라.
    3. -
  3. 웹사이트에 이 글을 게시해라 (어떻게 이것을 할까?)
    4. -
-
다른 음악가들 만나기 -
    -
  1. 사람들이 너와 연락할 방법을 제공해라.
    2. -
  2. 너의 웹사이트에서 어떻게 사람들이 연락 채널을 찾을 지 정해라.
    3. -
-
goodies 팔기 -
    -
  1. goodies 만든다.
    2. -
  2. goodies 저장한다.
    3. -
  3. 쇼핑을 하는 방식 찾는다.
    4. -
  4. 결제 방식 찾는다.
    5. -
  5. 사이트에서 사람들의 주문 메카니즘 만든다.
    6. -
-
동영상을 통해 음악 가르치기 -
    -
  1. 동영상 강의 녹화한다.
    2. -
  2. 온라인에서 볼 수 있는 동영상 파일 준비한다. (다시, 기존의 웹사이트에서 할 수 있을까?)
    3. -
  3. 웹사이트의 한 부분에서 비디오 접근 가능하게 한다.
    4. -
-
- -

공지할 것이 두 개가 있다. 첫째, 이런 아이템 중 몇몇은 웹과 상관이 없다. (예를 들어, 음악 녹음, 글 쓰기) 종종 그런 오프라인 활동이 프로젝트의 웹 부분보다 훨씬 더 중요하다. 예를 들어, 판매의 경우에, 공급, 결제, 배달에 시간을 쓰는 것이 사람들이 주문할 수 있는 웹사이트를 만드는 것보다 훨씬 더 중요하다.

- -

둘째, 실행가능한 단계를 설정하는 것은 우리가 답할 필요가 있는 새로운 질문을 이끌어 낸다. 종종 우리가 본래 생각했던 것보다 더 많은 질문으로 변한다. (예를 들어, 내가 혼자서 어떻게 이것을 배워야할까? 누군가에게 이것을 부탁할까? 서드파티(제 3의) 서비스를 사용해야할까?)

- -

결론

- -

당신이 본 것 처럼, "나는 웹사이트를 만들고 싶다" 라는 단순한 생각이 긴 해야할 목록을 만들었다. 그리고 그것은 생각하면 할 수록 더 길어진다. 금방 그것은 압도적으로 보일 것이다. 그러나 겁먹지 마라. 당신은 모든 질문에 대답할 필요는 없다. 그리고 당신은 리스트에 모든 것을 할 필요는 없다. 중요한 것은 원하는 것과 도달하는 법에 대한 비전을 가지고 있어야하는 것이다. 일단 분명한 비전이 있다면, 당신은 해야할 때와 하는 방법을 결정할 필요가 있다. 큰 일을 작은 실행할 수 있는 단계로 부숴라. 그리고 그 작은 단계를 거대한 성과로 합쳐라.

- -

이 글에서, 당신은 웹사이트를 만들기 위한 개략적인 계획을 지금 세울 수 있어야 한다. 다음 단계는 how the Internet works(인터넷이 작동하는 법) 을 읽어야 할 것이다.

- -

 

diff --git a/files/ko/learn/css/basics/layout/index.html b/files/ko/learn/css/basics/layout/index.html deleted file mode 100644 index 5437902bf1..0000000000 --- a/files/ko/learn/css/basics/layout/index.html +++ /dev/null @@ -1,409 +0,0 @@ ---- -title: Introduction to CSS Layout -slug: Learn/CSS/Basics/Layout -translation_of: Learn/CSS/CSS_layout/Introduction -translation_of_original: Learn/CSS/Basics/Layout ---- -

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

- -

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

- -

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.

- -

The flow

- -

At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text flows. 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.

- -

- -

- -

Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:

- - - -

디스플레이 요소 (Elements display categories)

- -

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:

- -
-
none
-
모든 요소를 제거 합니다.
-
inline
-
줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. 
-
block
-
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 box model.
-
inline-block
-
This value makes the element somewhat in between inline and block type display: like inline boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.
-
- -

Let's see an example.

- -

HTML:

- -
<p class="none">
-  1. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
-<p class="inline">
-  2. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
-<p class="block">
-  3. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
-<p class="inline-block">
-  4. I'm a big black cat,
-  <span>walking under a ladder,</span>
-  and I can see broken mirrors everywhere.
-</p>
-
- -

CSS:

- -
span {
-  width: 5em;
-  background: yellow;
-}
-
-.none span         { display: none;         }
-.inline span       { display: inline;       }
-.block span        { display: block;        }
-.inline-block span { display: inline-block; }
- -

Results:

- -

{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}

- -

Altering the flow

- -

By setting the display property you're already altering the flow, but you can go further.

- -

Text layout

- -

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.

- -

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

- -

Except for text-align and, text-indent the other properties have subtle effects on the text and vertical-align is often used with inline-block boxes.

- -

An example will make things clearer.

- -

HTML:

- -
<p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p>
-
- -

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

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.

-
- -

Results:

- -

{{ EmbedLiveSample('Text_layout', '100%', '350') }}

- -
-

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.

-
- -

Floating

- -

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.

- -

Simple floating

- -

HTML:

- -
<div>
-  <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p>
-  <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p>
-</div>
- -

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

Results:

- -

{{ EmbedLiveSample('Simple_floating', '100%', '280') }}

- -

Layout with floating

- -

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.

- -

Once again, an example will make things clearer.

- -

HTML:

- -
<div class="layout">
-  <div class="row">
-    <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p>
-    <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p>
-  </div>
-  <div class="row">
-    <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p>
-  </div>
-  <div class="row">
-    <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p>
-    <p class="cell size33">
-      "Ding, dong!"<br>
-      "A quarter past," said Scrooge, counting.<br>
-      "Ding, dong!"<br>
-      "Half-past!" said Scrooge.<br>
-      "Ding, dong!"<br>
-      "A quarter to it," said Scrooge.<br>
-      "Ding, dong!"<br>
-      "The hour itself," said Scrooge, triumphantly, "and nothing else!"
-    </p>
-    <p class="cell size33">
-      He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn.
-    </p>
-  </div>
-</div>
- -

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

Results:

- -

{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}

- -

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 floating boxes has been studied for long and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.

- -

If you want to better understand all the subtleties of floating boxes, we encourage you to read All about float by Chris Coyer.

- -

Positioning

- -

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.

- -

The {{cssxref("position")}} property can take on four different values:

- -
-
static
-
This is the default value for all elements: they are part of the flow and don't define any specific positioning context.
-
relative
-
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.
-
absolute
-
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 static. 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.
-
fixed
-
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")}}.
-
- -

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.

- -

Okay, let's see an example to visualize it at work.

- -

HTML:

- -
<div class="relative">
-    <div class="absolute-one">
-        <p>Position:absolute</p></br>
-        <p>Top Right</p>
-    </div>
-
-    <div class="absolute-two">
-        <p>Position:absolute</p></br>
-        <p>Bottom Centre</p>
-    </div>
-
-    <div class="absolute-three">
-        <p>Position:static</p></br>
-        <p>Where it falls</p>
-    </div>
-</div>
- -

CSS:

- -
p {
-  text-align:  centre;
-  color: #fff;
-}
-
-
-/* Setting the position to relative
-allows any child elements to be positioned
-anywhere, in relation to its container. */
-
-.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;
-}
-
- -

Results:

- -

{{ EmbedLiveSample('Positioning', '100%', '400') }}

- -

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 CSS positioning 101 by Noah Stokes.

- -

What's next

- -

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 practical usage of CSS. 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, multiple columns layout, and flexible box layout.

- -

{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}

- -
 
diff --git a/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..d16df40221 --- /dev/null +++ b/files/ko/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,128 @@ +--- +title: 기본적인 CSS 이해 +slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

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.

+ + + + + + + + + + + + +
Prerequisites:Before attempting this assessment you should have already worked through all the articles in this module.
Objective:To test comprehension of fundamental CSS theory, syntax and mechanics.
+ +

Starting point

+ +

To get this assessment started, you should:

+ + + +
+

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the <img> 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 <style> element in the head of the document.

+
+ +

Project brief

+ +

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.

+ +

Basic setup:

+ + + +

Taking care of the selectors and rulesets provided in the CSS resource file:

+ + + +

New rulesets you need to write:

+ + + +
+

Note: Bear in mind that the second ruleset sets font-size: 10px; on the <html> element — this means that for any descendants of <html>, 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 <html> in the hierarchy that have a different font-size set on them. This could affect the values you need, although in this simple example this is not an issue.)

+
+ +

Other things to think about:

+ + + +

Hints and tips

+ + + +

Example

+ +

The following screenshot shows an example of what the finished design should look like:

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

 

+ +

Assessment

+ +

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 discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/ko/learn/css/building_blocks/selectors/index.html b/files/ko/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..274653da91 --- /dev/null +++ b/files/ko/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,223 @@ +--- +title: CSS 선택자 +slug: Learn/CSS/Building_blocks/선택자 +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.

+ + + + + + + + + + + + +
전제조건:기본 컴퓨터 활용 능력, 기본 소프트웨어 설치, 파일 작업 에 대한 기본 지식, HTML 기본 사항 (HTML 소개 학습) 및 CSS 작동 방식에 대한 이해 (CSS 첫 단계 학습)
목적:CSS 선태자 작동 방식에 대해 자세히 알아보기.
+ +

선택자란 무엇인가?

+ +

우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

+ +

Some code with the h1 highlighted.

+ +

이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 h1 과 같은 요소 또는 .special 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.

+ +

CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 Level 3 선택자 사양 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.

+ +

선택자 목록

+ +

동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록 으로 결합할 수 있습니다. 예를 들어, h1 에 대해 동일한 CSS 와 special class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.

+ +
h1, .special {
+  color: blue;
+}
+ +

공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.

+ +
h1,
+.special {
+  color: blue;
+}
+ +

아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.

+ +

다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 h1 은 여전히 스타일이 지정됩니다.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 h1 또는 class 가 스타일 지정되지 않습니다.

+ +
h1, ..special {
+  color: blue;
+}
+ +

선택자의 유형

+ +

선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.

+ +

Type, class 및 ID 선택자

+ +

이 그룹에는 <h1> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.

+ +
h1 { }
+ +

또한 class 를 대상으로 하는 선택자가 포함됩니다:

+ +
.box { }
+ +

또는 ID:

+ +
#unique { }
+ +

속성 선택자

+ +

이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:

+ +
a[title] { }
+ +

또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:

+ +
a[href="https://example.com"] { }
+ +

Pseudo-classes 및 pseudo-elements

+ +

이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 :hover pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:

+ +
a:hover { }
+ +

또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, ::first-line 은 항상 <span> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.

+ +
p::first-line { }
+ +

결합자 (Combinators)

+ +

최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 요소의 자식인 단락을 선택합니다:

+ +
article > p { }
+ +

다음 단계

+ +

이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 type, class 및 ID 선택자 에 대해 계속해서 여행을 시작하십시오.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

선택자 참조 표

+ +

아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
선택자예제CSS 자습서 배우기
Type 선택자h1 {  }Type selectors
범용 선택자* {  }The universal selector
Class 선택자.box {  }Class selectors
id 선택자#unique { }ID selectors
속성 선택자a[title] {  }Attribute selectors
Pseudo-class 선택자p:first-child { }Pseudo-classes
Pseudo-element 선택자p::first-line { }Pseudo-elements
하위 결합자article pDescendant combinator
자식 결합자article > pChild combinator
인접 형제 결합자h1 + pAdjacent sibling
일반 형제 결합자h1 ~ pGeneral sibling
+ +

이번 강의에서는

+ +
    +
  1. 계단식 및 상속
    2. +
  2. CSS 선택자 + +
    3. +
  3. 박스 모델
    4. +
  4. 배경 및 테두리
    5. +
  5. 다른 텍스트 방향 처리
    6. +
  6. 콘텐츠 overflow
    7. +
  7. 값과 단위
    8. +
  8. CSS 에서 항목 크기 조정
    9. +
  9. 이미지, 미디어 및 양식 요소
    10. +
  10. 표 스타일링
    11. +
  11. CSS 디버깅
    12. +
  12. CSS 정리
    13. +
diff --git a/files/ko/learn/css/building_blocks/the_box_model/index.html b/files/ko/learn/css/building_blocks/the_box_model/index.html new file mode 100644 index 0000000000..eec5f2b929 --- /dev/null +++ b/files/ko/learn/css/building_blocks/the_box_model/index.html @@ -0,0 +1,347 @@ +--- +title: 상자 모델 +slug: Learn/CSS/Building_blocks/상자_모델 +tags: + - CSS + - 디스플레이 + - 상자 모델 + - 여백 + - 초보자 + - 테두리 + - 패딩 + - 학습 +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
+ +

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스모델을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.

+ + + + + + + + + + + + +
선결 사항:기본 컴퓨터 활용 능력기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본기 (HTML 학습), CSS 작동 방식에 대한 개념 (CSS 첫 단계 학습.) 등에 대한 기본 지식
목표:CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.
+ +

블록 및 인라인 박스

+ +

CSS에는 크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

+ +

박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

+ + + +

여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<h1>)과 <p>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 block 사용합니다.

+ +

박스의 외부 디스플레이 유형이 inline일 경우:

+ + + +

링크용 <a> 요소와 <span>, <em> 및 <strong> 요소는 모두 기본적으로 인라인으로 표시됩니다.

+ +

요소에 적용되는 박스 유형은 block 및 inline과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 display의 outer 값과 관련이 있습니다.

+ +

구분: 내부 및 외부 디스플레이 유형

+ +

이 시점에 우리는 내부 및 외부 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 외부 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.

+ +

그러나 박스에는 내부 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 일반 대열로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

+ +

그러나 여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex (가변) 으로 변경됩니다. 이 박스의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 가변박스 규격에 명시된 규칙에 따라 배치됩니다.

+ +
+

참고: 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 레이아웃에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.

+
+ +

CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 flex나 grid같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

+ +

그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 normal flow (일반 대열) 이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.

+ +

서로 다른 디스플레이 유형의 예

+ +

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 block입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

+ +

두 번째는 display: flex 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

+ +

바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <span> 요소가 있습니다. 이들 요소는 보통 inline이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 display: block로 설정했으니까요.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}

+ +

우리는 다음 예제에서 inline 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <span>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.

+ +

display: inline-flex로 설정된 <ul> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 박스를 생성합니다.

+ +

마지막으로 display: inline으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.

+ +

예제에서 여러분은 display: inline 부분을 display: block으로, 또는 display: inline-flex를 display: flex로 디스플레이 모드 사이를 전환할 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

+ +

나중에 해당 단원에서 가변 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 display 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

+ +

나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.

+ +

CSS Box Model이란 무엇인가?

+ +

전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.

+ +

Box의 구성

+ +

CSS 블록 박스 구성하기 위한 우리의 준비물은:

+ + + +

아래 도표는 이들 레이어를 보여줍니다.

+ +

Diagram of the box model

+ +

표준 CSS box model

+ +

표준 box model에서 box에서 width와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

+ +

우리는 박스의 width와 height, margin과 border 및 padding CSS 값이 다음과 같이 지정되어 있다고 간주합니다:

+ +
.box {
+  width: 350px;
+  height: 150px;
+  margin: 25px;
+  padding: 25px;
+  border: 5px solid black;
+}
+
+ +

표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.

+ +

Showing the size of the box when the standard box model is being used.

+ +
+

참고: 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

+
+ +

대체 CSS box model

+ +

박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

+ +

Showing the size of the box when the alternate box model is being used.

+ +

기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 box-sizing: border-box를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.

+ +
.box {
+  box-sizing: border-box;
+}
+ +

모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <html> 요소에 box-sizing 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 박스 크기에 관한 CSS 요령 문서를 참조하십시오.

+ +
html {
+  box-sizing: border-box;
+}
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+ +
+

참고: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

+
+ +

박스 모델 부리기

+ +

아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 .box 클래스에 해당하며 width, height, margin, border, padding에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.

+ +

당신은 (.alternate 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

+ +
+

참조: 여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다..

+
+ +

브라우저 개발자도구를 사용해 박스 모델 보기

+ +

브라우저 개발자 도구를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

+ +

Inspecting the box model of an element using Firefox DevTools

+ +

여백과 패딩과 테두리

+ +

상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 약칭(shorthands)으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

+ +

해당 속성에 대한 자세한 내용을 탐구해 봅시다.

+ +

여백

+ +

여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.

+ +

우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.

+ + + +

아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}

+ +

여백 축소

+ +

여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.

+ +

아래 예제에는 단락 두 개가 있습니다. 상위 단락은 margin-bottom 값이 50픽셀이 주어졌습니다. 두 번째 단락은 margin-top 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.

+ +

여러분은 2번째 단락의 margin-top 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 bottom-margin에 설정된 50픽셀은 유지됩니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}

+ +

여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 여백 축소 정복에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.

+ +

테두리

+ +

테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 width과 height에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 width와 height의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.

+ +

테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.

+ +

당산은 당장에 {{cssxref("border")}} 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.

+ +

테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:

+ + + +

테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:

+ + + +

테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.

+ + + +

아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 모질라 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}

+ +

패딩

+ +

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.

+ +

우리는 {{cssxref("padding")}} 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.

+ + + +

아래 예제에서 .box클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.

+ +

여러분은 또한 .container, 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}

+ +

박스 모델과 인라인 박스

+ +

상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 <span>에 의해 생성된 속성도 그렇습니다.

+ +

아래 예제에 한 단락 내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}

+ +

인라인 블록 디스플레이 사용하기

+ +

inline와 block 사이 중립 지대를 제공하는 display 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, width와 height가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.

+ +

display: inline-block 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.

+ + + +

그러나 새 줄로 행갈이를 하지 않고, width와 height 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.

+ +

다음 예제에서 우리는 <span> 요소에 display: inline-block를 추가했습니다. 스팬 요소 속성을 display: block로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}

+ +

여러분이 padding를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <a>는 <span>처럼 인라인 요소입니다. 여러분은 해당 요소에 display: inline-block을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.

+ +

탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변박스를 사용해 행으로 표시되었으며, <a>를 마우스로 가리킬 때 background-color를 변경할 수 있도록 <a> 요소에 패딩 추기했습니다. 패딩은 <ul> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <a>가 인라인 요소이기 때문입니다.

+ +

.links-list a 선택기에 딸린 규칙에 display: inline-block를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.

+ +

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}

+ +

요약정리

+ +

박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.

+ +

다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

+ +

이번 단위에는

+ +
    +
  1. 계단식 나열과 상속
    2. +
  2. CSS 선택기 + +
    3. +
  3. 박스 모델
    4. +
  4. 배경 및 테두리
    5. +
  5. 서로 다른 텍스트 방향 처리
    6. +
  6. 대열이탈 콘텐츠
    7. +
  7. 속성값과 단위
    8. +
  8. CSS 항목 크기 설정
    9. +
  9. 이미지와 미디아, 양식 요소
    10. +
  10. 테이블 스타일링
    11. +
  11. CSS 디버깅
    12. +
  12. CSS 체계화
    13. +
diff --git "a/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" "b/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" deleted file mode 100644 index eec5f2b929..0000000000 --- "a/files/ko/learn/css/building_blocks/\354\203\201\354\236\220_\353\252\250\353\215\270/index.html" +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: 상자 모델 -slug: Learn/CSS/Building_blocks/상자_모델 -tags: - - CSS - - 디스플레이 - - 상자 모델 - - 여백 - - 초보자 - - 테두리 - - 패딩 - - 학습 -translation_of: Learn/CSS/Building_blocks/The_box_model ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
- -

CSS에 포함되는 모든 요소의 외장은 박스이며, 이 박스를 이해하는 것은 CSS을 통해 레이아웃을 생성하거나, 아이템과 다른 아이템을 정렬하는 것을 가능하게 하는 열쇠입니다. 이번 단원에서 우리는 CSS 박스모델을 제대로 살펴보겠습니다. 박스의 작동 방식과 박스와 관련된 용어를 이해함으로써 더 복잡한 레이아웃 작업으로 넘어갈 수 있도록합니다.

- - - - - - - - - - - - -
선결 사항:기본 컴퓨터 활용 능력기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본기 (HTML 학습), CSS 작동 방식에 대한 개념 (CSS 첫 단계 학습.) 등에 대한 기본 지식
목표:CSS 박스 모델, 박스 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.
- -

블록 및 인라인 박스

- -

CSS에는 크게 두 가지 박스(블록 박스와 인라인 박스) 유형이 있습니다. 이러한 특성은 박스가 페이지 대열 측면 및 페이지의 다른 박스와 관련하여 박스의 작동 방식을 나타냅니다.

- -

박스가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:

- - - -

여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<h1>)과 <p>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 block 사용합니다.

- -

박스의 외부 디스플레이 유형이 inline일 경우:

- - - -

링크용 <a> 요소와 <span>, <em> 및 <strong> 요소는 모두 기본적으로 인라인으로 표시됩니다.

- -

요소에 적용되는 박스 유형은 block 및 inline과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 display의 outer 값과 관련이 있습니다.

- -

구분: 내부 및 외부 디스플레이 유형

- -

이 시점에 우리는 내부 및 외부 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 CSS의 박스는 외부 디스플레이 유형을 가지며, 이는 박스가 블록인지 인라인인지를 자세히 설명합니다.

- -

그러나 박스에는 내부 디스플레이 유형도 있으며 당 박스 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 박스 내부의 요소는 일반 대열로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.

- -

그러나 여러분은 flex과 같은 display 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 display: flex;를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 flex (가변) 으로 변경됩니다. 이 박스의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 가변박스 규격에 명시된 규칙에 따라 배치됩니다.

- -
-

참고: 디스플레이 속성 값 및 박스가 블록 및 인라인 레이아웃에서 작동하는 방법에 대해 자세히 보려면 블록 및 인라인 레이아웃에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.

-
- -

CSS 레이아웃에 대해 자세한 내용을 배우려면 다음번에는 예로 flex나 grid같은 박스가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.

- -

그러나 블록 및 인라인 레이아웃이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 normal flow (일반 대열) 이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 박스는 블록 또는 인라인 박스로 배치되기 때문입니다.

- -

서로 다른 디스플레이 유형의 예

- -

계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 HTML 요소가 있으며, 모두 외부 디스플레이 유형이 block입니다. 첫 번째 단락은 CSS에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 박스로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.

- -

두 번째는 display: flex 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 레이아웃을 수립하지만, 목록 자체는 블록 박스이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.

- -

바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <span> 요소가 있습니다. 이들 요소는 보통 inline이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 display: block로 설정했으니까요.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}

- -

우리는 다음 예제에서 inline 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <span>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.

- -

display: inline-flex로 설정된 <ul> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 박스를 생성합니다.

- -

마지막으로 display: inline으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.

- -

예제에서 여러분은 display: inline 부분을 display: block으로, 또는 display: inline-flex를 display: flex로 디스플레이 모드 사이를 전환할 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}

- -

나중에 해당 단원에서 가변 레이아웃과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 display 속성 값을 변경하면 박스의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 레이아웃 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.

- -

나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.

- -

CSS Box Model이란 무엇인가?

- -

전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 박스를 생성하기 위해 박스의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 박스 모델이 있습니다.

- -

Box의 구성

- -

CSS 블록 박스 구성하기 위한 우리의 준비물은:

- - - -

아래 도표는 이들 레이어를 보여줍니다.

- -

Diagram of the box model

- -

표준 CSS box model

- -

표준 box model에서 box에서 width와 height를 부여하면 content box의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 박스의 너비와 높이에 추가되여 박스가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.

- -

우리는 박스의 width와 height, margin과 border 및 padding CSS 값이 다음과 같이 지정되어 있다고 간주합니다:

- -
.box {
-  width: 350px;
-  height: 150px;
-  margin: 25px;
-  padding: 25px;
-  border: 5px solid black;
-}
-
- -

표준 박스 모델을 사용하여 박스가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 박스에 사용되는 너비에 더해지기 때문입니다.

- -

Showing the size of the box when the standard box model is being used.

- -
-

참고: 여백은 박스의 실제 크기에 포함되지 않습니다. 물론 여백은 박스가 페이지에서 차지하는 총 공간에 영향을 미치지만, 박스의 외부 공간에만 영향을 미칩니다. 박스의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.

-
- -

대체 CSS box model

- -

박스의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 CSS는 표준 박스 모델 이후 머지않아 대체 박스 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 박스 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 CSS를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.

- -

Showing the size of the box when the alternate box model is being used.

- -

기본값으로 브라우저는 기본 박스 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 box-sizing: border-box를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 박스가 점유하도록 브라우저에 전달할 수 있습니다.

- -
.box {
-  box-sizing: border-box;
-}
- -

모든 요소가 대체 박스 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <html> 요소에 box-sizing 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 박스 크기에 관한 CSS 요령 문서를 참조하십시오.

- -
html {
-  box-sizing: border-box;
-}
-*, *::before, *::after {
-  box-sizing: inherit;
-}
- -
-

참고: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 박스 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.

-
- -

박스 모델 부리기

- -

아래 예제에서 당신은 박스 2개를 확인할 수 있습니다. 둘 다 .box 클래스에 해당하며 width, height, margin, border, padding에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 박스는 대체 박스 모델을 사용하도록 설정되었다는 겁니다.

- -

당신은 (.alternate 클래스를 CSS에 추가해) 두 번째 박스 크기를 변경해 첫 번째 박스의 너비와 높이와 일치하도록 할 수 있습니까?

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}

- -
-

참조: 여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다..

-
- -

브라우저 개발자도구를 사용해 박스 모델 보기

- -

브라우저 개발자 도구를 사용하면 박스 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.

- -

Inspecting the box model of an element using Firefox DevTools

- -

여백과 패딩과 테두리

- -

상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 약칭(shorthands)으로 한꺼번에 박스의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 박스의 사방면을 개별적으로 제어할 수 있도록 해줍니다.

- -

해당 속성에 대한 자세한 내용을 탐구해 봅시다.

- -

여백

- -

여백은 박스 주변에 보이지 않는 공간입니다. 여백은 박스로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 박스 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 박스 모델을 사용하든지 관계없이 표시되는 박스의 크기를 계산한 후에 항상 여백이 추가됩니다.

- -

우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.

- - - -

아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 박스가 어떻게 밀려나는지 확인하십시오.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}

- -

여백 축소

- -

여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.

- -

아래 예제에는 단락 두 개가 있습니다. 상위 단락은 margin-bottom 값이 50픽셀이 주어졌습니다. 두 번째 단락은 margin-top 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 박스 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.

- -

여러분은 2번째 단락의 margin-top 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 bottom-margin에 설정된 50픽셀은 유지됩니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}

- -

여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 여백 축소 정복에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.

- -

테두리

- -

테두리는 박스의 여백과 패딩 사이에 그려집니다. 표준 박스 모델을 사용하는 경우 테두리의 크기가 박스의 width과 height에 추가됩니다. 대체 박스 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 width와 height의 일부를 점유함으로 콘텐츠 박스가 더 작아지게 됩니다.

- -

테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.

- -

당산은 당장에 {{cssxref("border")}} 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.

- -

테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:

- - - -

테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:

- - - -

테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.

- - - -

아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 모질라 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}

- -

패딩

- -

패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.

- -

우리는 {{cssxref("padding")}} 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.

- - - -

아래 예제에서 .box클래스에 대한 패딩값을 변경하면 박스와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.

- -

여러분은 또한 .container, 클래스에 대한 패딩을 변경하여 컨테이너와 박스 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}

- -

박스 모델과 인라인 박스

- -

상술한 모든 내용은 블록 박스에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 박스에도 적용할 수 있습니다. 예를 들어 <span>에 의해 생성된 속성도 그렇습니다.

- -

아래 예제에 한 단락 내부에 <span>가 있고 거기에 width와 height, 그리고 margin와 border를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 박스아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}

- -

인라인 블록 디스플레이 사용하기

- -

inline와 block 사이 중립 지대를 제공하는 display 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, width와 height가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.

- -

display: inline-block 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.

- - - -

그러나 새 줄로 행갈이를 하지 않고, width와 height 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 박스가) 더 커질 뿐입니다.

- -

다음 예제에서 우리는 <span> 요소에 display: inline-block를 추가했습니다. 스팬 요소 속성을 display: block로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}

- -

여러분이 padding를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <a>는 <span>처럼 인라인 요소입니다. 여러분은 해당 요소에 display: inline-block을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.

- -

탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변박스를 사용해 행으로 표시되었으며, <a>를 마우스로 가리킬 때 background-color를 변경할 수 있도록 <a> 요소에 패딩 추기했습니다. 패딩은 <ul> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <a>가 인라인 요소이기 때문입니다.

- -

.links-list a 선택기에 딸린 규칙에 display: inline-block를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.

- -

{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}

- -

요약정리

- -

박스 모델에 대해 이해해야 할 내용의 대부분입니다. 박스들이 레이아웃에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.

- -

다음 단원에서는 배경과 테두리를 사용하여 평범한 보이는 박스를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}

- -

이번 단위에는

- -
    -
  1. 계단식 나열과 상속
    2. -
  2. CSS 선택기 - -
    3. -
  3. 박스 모델
    4. -
  4. 배경 및 테두리
    5. -
  5. 서로 다른 텍스트 방향 처리
    6. -
  6. 대열이탈 콘텐츠
    7. -
  7. 속성값과 단위
    8. -
  8. CSS 항목 크기 설정
    9. -
  9. 이미지와 미디아, 양식 요소
    10. -
  10. 테이블 스타일링
    11. -
  11. CSS 디버깅
    12. -
  12. CSS 체계화
    13. -
diff --git "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" "b/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" deleted file mode 100644 index 274653da91..0000000000 --- "a/files/ko/learn/css/building_blocks/\354\204\240\355\203\235\354\236\220/index.html" +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: CSS 선택자 -slug: Learn/CSS/Building_blocks/선택자 -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.

- - - - - - - - - - - - -
전제조건:기본 컴퓨터 활용 능력, 기본 소프트웨어 설치, 파일 작업 에 대한 기본 지식, HTML 기본 사항 (HTML 소개 학습) 및 CSS 작동 방식에 대한 이해 (CSS 첫 단계 학습)
목적:CSS 선태자 작동 방식에 대해 자세히 알아보기.
- -

선택자란 무엇인가?

- -

우리는 이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 선택자의 주제(subject) 로 지칭됩니다.

- -

Some code with the h1 highlighted.

- -

이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 h1 과 같은 요소 또는 .special 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.

- -

CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 Level 3 선택자 사양 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.

- -

선택자 목록

- -

동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 선택자 목록 으로 결합할 수 있습니다. 예를 들어, h1 에 대해 동일한 CSS 와 special class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.

- -
h1, .special {
-  color: blue;
-}
- -

공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.

- -
h1,
-.special {
-  color: blue;
-}
- -

아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.

- -

다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 h1 은 여전히 스타일이 지정됩니다.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 h1 또는 class 가 스타일 지정되지 않습니다.

- -
h1, ..special {
-  color: blue;
-}
- -

선택자의 유형

- -

선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.

- -

Type, class 및 ID 선택자

- -

이 그룹에는 <h1> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.

- -
h1 { }
- -

또한 class 를 대상으로 하는 선택자가 포함됩니다:

- -
.box { }
- -

또는 ID:

- -
#unique { }
- -

속성 선택자

- -

이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를  선택하는 다른 방법을 제공합니다:

- -
a[title] { }
- -

또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:

- -
a[href="https://example.com"] { }
- -

Pseudo-classes 및 pseudo-elements

- -

이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 :hover pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:

- -
a:hover { }
- -

또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, ::first-line 은 항상 <span> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <p>) 을 선택합니다.

- -
p::first-line { }
- -

결합자 (Combinators)

- -

최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (>) 를 사용하여 <article> 요소의 자식인 단락을 선택합니다:

- -
article > p { }
- -

다음 단계

- -

이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 type, class 및 ID 선택자 에 대해 계속해서 여행을 시작하십시오.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

선택자 참조 표

- -

아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
선택자예제CSS 자습서 배우기
Type 선택자h1 {  }Type selectors
범용 선택자* {  }The universal selector
Class 선택자.box {  }Class selectors
id 선택자#unique { }ID selectors
속성 선택자a[title] {  }Attribute selectors
Pseudo-class 선택자p:first-child { }Pseudo-classes
Pseudo-element 선택자p::first-line { }Pseudo-elements
하위 결합자article pDescendant combinator
자식 결합자article > pChild combinator
인접 형제 결합자h1 + pAdjacent sibling
일반 형제 결합자h1 ~ pGeneral sibling
- -

이번 강의에서는

- -
    -
  1. 계단식 및 상속
    2. -
  2. CSS 선택자 - -
    3. -
  3. 박스 모델
    4. -
  4. 배경 및 테두리
    5. -
  5. 다른 텍스트 방향 처리
    6. -
  6. 콘텐츠 overflow
    7. -
  7. 값과 단위
    8. -
  8. CSS 에서 항목 크기 조정
    9. -
  9. 이미지, 미디어 및 양식 요소
    10. -
  10. 표 스타일링
    11. -
  11. CSS 디버깅
    12. -
  12. CSS 정리
    13. -
diff --git a/files/ko/learn/css/css_layout/media_queries/index.html b/files/ko/learn/css/css_layout/media_queries/index.html new file mode 100644 index 0000000000..cf13a1421c --- /dev/null +++ b/files/ko/learn/css/css_layout/media_queries/index.html @@ -0,0 +1,424 @@ +--- +title: 미디어 쿼리 초보자 안내서 +slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +tags: + - 미디어 쿼리 + - 씨에스에스 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.
+ +

미디어 쿼리 기본

+ +

가장 간단한 미디어 쿼리 구문은 다음과 같습니다:

+ +
@media media-type and (media-feature-rule) {
+  /* CSS rules go here */
+}
+ +

미디어 쿼리 구문의 구성 요소:

+ + + +

미디어 유형

+ +

당신이 지정할 수 있는 미디어 유형

+ + + +

다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.

+ +
@media print {
+    body {
+        font-size: 12pt;
+    }
+}
+ +
+

참고: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.

+
+ +
+

참고: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.

+
+ +

미디어 기능 규칙

+ +

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.

+ +

너비와 높이

+ +

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.

+ +

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

+ +
@media screen and (width: 600px) {
+    body {
+        color: red;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

+ +
@media screen and (max-width: 400px) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를를 브라우저에서 열거나 소스를 보세요.

+ +

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖습니다.

+ +

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있습니다.

+ +

방향성

+ +

잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

+ +
@media (orientation: landscape) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.

+ +

포인팅 장치의 사용

+ +

수준 4 규격의 일부로 hover 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.

+ +
@media (hover: hover) {
+    body {
+        color: rebeccapurple;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

+ +

마찬가지로 pointer 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 none과 fine coarse의 세 가지 값을 취할 수 있다. fine 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. coarse 포인터는 터치스크린상에 손가락을 말한다. none 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.

+ +

pointer 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

+ +

더 복잡한 미디어 쿼리

+ +

당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.

+ +

"논리곱" 미디어 쿼리

+ +

and를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 and를 사용했던 방식과 같습니다. 예를 들어, min-width와 orientation의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

+ +
@media screen and (min-width: 400px) and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

"논리합" 미디어 쿼리

+ +

만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.

+ +
@media screen and (min-width: 400px), screen and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

"

+ +

"부정 논리" 미디어 쿼리

+ +

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.

+ +
@media not all and (orientation: landscape) {
+    body {
+        color: blue;
+    }
+}
+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

분기점을 선정하는 방법

+ +

반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.

+ +

지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 breakpoints라고 합니다.

+ +

Firefox DevTools의 반응형 디자인 모드는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.

+ +

파이어폭스 개발툴상에 조판 갈무리

+ +

능동 학습: 모바일 우선 반응형 디자인

+ +

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 mobile first 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

+ + + +

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.

+ +

아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

+ +

길라잡이: 간단한 모바일 우선 조판

+ +

우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.

+ +
* {
+    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;
+}
+
+ +

우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

+ +
<body>
+    <div class="wrapper">
+      <header>
+        <nav>
+          <ul>
+            <li><a href="">사이트 소개</a></li>
+            <li><a href="">연락처</a></li>
+            <li><a href="">우리팀 안내</a></li>
+            <li><a href="">블로그</a></li>
+          </ul>
+        </nav>
+      </header>
+      <main>
+        <article>
+          <div class="content">
+            <h1>채식주의자!</h1>
+            <p>
+              ...
+            </p>
+          </aside>
+        </article>
+
+        <aside class="sidebar">
+          <h2>채식에 관한 외부 링크</h2>
+          <ul>
+            <li>
+              ...
+            </li>
+          </ul>
+        </aside>
+      </main>
+
+      <footer><p>&copy;2019</p></footer>
+    </div>
+  </body>
+
+ +

이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.

+ +

이 예제를 브라우저에서 열거나 소스를 보세요.

+ +

당신이 우리의 진행 과정대로 이 예제를 실행해보려면 step1.html의 사본을 당신 컴퓨터에 만드세요.

+ +

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.

+ +

아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.

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

이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

+ +

2단계 파일을 브라우저에서 열거나 소스를 보세요.

+ +

사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

+ +

다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.

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

3단계 파일을 브라우저에서 열거나 소스를 보세요.

+ +

최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.

+ +

당신에게 정말 미디어 쿼리가 필요할까요?

+ +

가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.

+ +

이것은 아래 용법으로 달성될 수 있습니다.

+ +
<ul class="grid">
+    <li>
+        <h2>카드 1</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 2</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 3</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 4</h2>
+        <p>...</p>
+    </li>
+    <li>
+        <h2>카드 5</h2>
+        <p>...</p>
+    </li>
+</ul>
+ +
.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;
+}
+ +

이 격자 예제를 브라우저에서 열거나 소스를 보세요.

+ +

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

+ +

요약정리

+ +

여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.

+ +

우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 pointer 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.

+ +

또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/normal_flow/index.html b/files/ko/learn/css/css_layout/normal_flow/index.html new file mode 100644 index 0000000000..43b4366c0e --- /dev/null +++ b/files/ko/learn/css/css_layout/normal_flow/index.html @@ -0,0 +1,102 @@ +--- +title: 일반 대열 +slug: Learn/CSS/CSS_layout/일반_흐름 +tags: + - 격자형 + - 부동 + - 씨에스에스 + - 일반 대열 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

+ + + + + + + + + + + + +
선결 사항:HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.)
목표:변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기
+ +

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

+ +

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

+ +

기본값으로 요소들은 어떻게 배치되는가?

+ +

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

+ +

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

+ +

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드(initial: horizontal-tb)에 기초해 블록 flow 방향에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

+ +

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

+ +

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

+ +

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

+ +
+
<h1>기본 문서 flow</h1>
+
+<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
+
+<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
+
+<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
+
+<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+ +
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;
+}
+
+ +

{{ EmbedLiveSample('일반_flow', '100%', 500) }}

+ +

요약정리

+ +

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/positioning/index.html b/files/ko/learn/css/css_layout/positioning/index.html new file mode 100644 index 0000000000..76a491ae0e --- /dev/null +++ b/files/ko/learn/css/css_layout/positioning/index.html @@ -0,0 +1,585 @@ +--- +title: 위치잡기 +slug: Learn/CSS/CSS_layout/위치잡기 +tags: + - 고정 + - 글 + - 상대 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 절대 + - 조판 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+ +

당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초 (에이치티엠엘 입문서)와 씨에스에스 작동 방식에 대한 개념(씨에스에스 입문서를 공부하세요.)
목표:씨에스에스 위치잡기가 작동하는 방법 배우기
+ +

가능하면 우리 깃허브 저장소에 있는 0_basic-flow.html 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

+ +

위치잡기 소개

+ +

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.

+ +

에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.

+ +

정적 위치잡기

+ +

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

+ +

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 positioned라는 클래스를 추가하십시오:

+ +
<p class="positioned"> ... </p>
+ +

이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:

+ +
.positioned {
+  position: static;
+  background: yellow;
+}
+ +

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

+ +
+

주석: 이 시점에 예제의 실제 구현 장면을 1_static-positioning.html에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

+
+ +

상대 위치잡기

+ +

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 position 선언을 업데이트하십시요.

+ +
position: relative;
+ +

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.

+ +

상하 좌우 위치잡기 소개

+ +

{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 .positioned 규칙에 추가하십시오:

+ +
top: 30px;
+left: 30px;
+ +
+

참고: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

+
+ +

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:

+ + + +

{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}

+ +

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, top: 30px;를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

+ +
+

참고: 이 시점에 예제의 실제 구현 장면을 2_relative-positioning.html에서 확인할 수 있습니다(소스 코드 보기).

+
+ +

절대 위치잡기

+ +

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.

+ +
position: absolute;
+ +

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:

+ + + +

{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}

+ +

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

+ +

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

+ +
+

참고: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

+
+ +
+

주석: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

+
+ +
+

참고: 당신은 3_absolute-positioning.html에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

+
+ +

위치잡기 상황

+ +

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

+ +

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 initial containing block에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

+ +

위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 positioning context(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 body 규칙에 추가하십시요:

+ +
position: relative;
+ +

이로써 다음과 같은 결과가 나와야 합니다.

+ + + +

{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}

+ +

위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 4_positioning-context.html에서 볼 수 있습니다(소스 코드 보기).

+
+ +

z-인덱스 소개

+ +

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

+ +

다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.

+ +
p:nth-of-type(1) {
+  position: absolute;
+  background: lime;
+  top: 10px;
+  right: 30px;
+}
+ +

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 .positioned 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 .positioned 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

+ +

스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

+ +

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 z-index가 auto 값을 가지며, 이는 사실상 0입니다.

+ +

스택 순서를 변경하려면 다음 선언을 p:nth-of-type(1) rule: 규칙에 추가하십시오.

+ +
z-index: 1;
+ +

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.

+ + + +

{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}

+ +

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

+ +
+

참고: 이 시점에 예제의 실제 구현 장면을 5_z-index.html에서 볼 수 있습니다(소스 코드 보기).

+
+ +

고정 위치잡기

+ +

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

+ +

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 p:nth-of-type(1)과 .positioned 규칙을 삭제합니다.

+ +

이제 position: relative; 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 body 규칙에 업데이트합니다:

+ +
body {
+  width: 500px;
+  height: 1400px;
+  margin: 0 auto;
+}
+ +

이제 우리는 {{htmlelement("h1")}} 요소에 position: fixed;를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.

+ +
h1 {
+  position: fixed;
+  top: 0;
+  width: 500px;
+  margin: 0 auto;
+  background: white;
+  padding: 10px;
+}
+ +

화면 상단에 고정시키려면 top: 0;이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 margin: 0 auto;를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

+ +

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:

+ +
p:nth-of-type(1) {
+  margin-top: 60px;
+}
+ +

당신은 이제 완성된 예제를 볼 수 있어야 합니다:

+ + + +

{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 6_fixed-positioning.html에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

+
+ +

position: sticky

+ +

이용할 수 있는 position: sticky라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.

+ +
+ + +
.positioned {
+  position: sticky;
+  top: 30px;
+  left: 30px;
+}
+
+ +

{{ EmbedLiveSample('흡착_1', '100%', 200) }}

+ +

position: sticky의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

+ +
<h1>흡착 위치잡기</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Apple</dd>
+    <dd>Ant</dd>
+    <dd>Altimeter</dd>
+    <dd>Airplane</dd>
+    <dt>B</dt>
+    <dd>Bird</dd>
+    <dd>Buzzard</dd>
+    <dd>Bee</dd>
+    <dd>Banana</dd>
+    <dd>Beanstalk</dd>
+    <dt>C</dt>
+    <dd>Calculator</dd>
+    <dd>Cane</dd>
+    <dd>Camera</dd>
+    <dd>Camel</dd>
+    <dt>D</dt>
+    <dd>Duck</dd>
+    <dd>Dime</dd>
+    <dd>Dipstick</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Egg</dd>
+    <dd>Elephant</dd>
+    <dd>Egret</dd>
+</dl>
+
+ +

씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 position: sticky를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

+ +
dt {
+  background-color: black;
+  color: white;
+  padding: 10px;
+  position: sticky;
+  top: 0;
+  left: 0;
+  margin: 1em 0;
+}
+
+ +
+ +
+ +

{{ EmbedLiveSample('흡착_2', '100%', 200) }}

+ +
+

참고: 당신은 이 시점에 예제의 실제 구현 장면을 7_sticky-positioning.html에서 볼 수 있습니다(소스 코드는 여기서 보세요).

+
+ +

요약정리

+ +

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

+ +

참조 항목

+ + + +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/responsive_design/index.html b/files/ko/learn/css/css_layout/responsive_design/index.html new file mode 100644 index 0000000000..b1311448c7 --- /dev/null +++ b/files/ko/learn/css/css_layout/responsive_design/index.html @@ -0,0 +1,333 @@ +--- +title: 반응형 디자인 +slug: Learn/CSS/CSS_layout/반응형_디자인 +tags: + - 가변상장 + - 격자 + - 다단 + - 미디어 쿼리 + - 반응형 웹 디자인 + - 유동 격자 + - 이미지 + - 타이포크래피 +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
+ +

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

+ + + + + + + + + + + + +
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:반응형 디자인의 역사와 핵심적인 계념 파악하기
+ +

웹사이트 조판 역사

+ +

역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.

+ + + +

이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.

+ +
두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다. +
+
+ +
+

주석: 여기 간단한 유동 조판을 보세요: 예제, 소스 코드. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.

+
+ +

고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.

+ +
이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다. +
+
+ +
+

주석: 여기 간단한 고정 너비 조판을 보세요: 예제, 소스 코드. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.

+
+ +
+

주석: 상단 화면는 파이어폭스 개발툴 안에서 반응형 디자인 모드을 사용해 갈무리 한 것입니다.

+
+ +

모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 m.example.com 또는 example.mobi 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.

+ +

게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.

+ +

반응형 디자인의 전신 가변 조판

+ +

유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 해상도 의존 조판이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.

+ +

조이 미클리 길렌워터는 그녀의 작업을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.

+ +

반응형 디자인

+ +

반응형 디자인이라는 용어는 2010년 이단 마르코트가 만든 신조어로 세 가지 기술을 조합한 용법을 설명하고 있습니다.

+ +
    +
  1. 첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 유동 격자란(2009년 A List Apart에 발표) 문서에서 읽을 수 있다.
    2. +
  2. 두 번째 기술은 유동 이미지라는 개념이다. max-width 속성을 100%로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.
    3. +
  3. 세 번째 핵심 구성요소는 미디어 쿼리였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.
    4. +
+ +

반응형 웹 디자인은 별도의 기술이 아니다라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 반응할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.

+ +

이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.

+ +

미디어 쿼리

+ +

반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.

+ +

예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. .container 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.

+ +
@media screen and (min-width: 800px) {
+  .container {
+    margin: 1em 2em;
+  }
+} 
+
+ +

스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 breakpoints(분기점)라고 합니다.

+ +

미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 모바일 우선 디자인이라고 표현하는 경우가 많다.

+ +

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

+ +

가변 격자

+ +

반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.

+ +

가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.

+ +

반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 부동체를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.

+ +
target / context = result 
+
+ +

예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.

+ +
.col {
+  width: 6.25%; /* 60 / 960 = 0.0625 */
+} 
+
+ +

이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 레거시 조판 메서드 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.

+ +

다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.

+ +
상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다. +

On wider screens they move to two columns:

+ +
+
+ +
2단 조판이 적용된 데스크탑 뷰입니다. +
+
+ +
+

주석: 여러분은 여기서 실례를 찾아볼 수 있으며, 이 예제에 대한 소스 코드를 깃허브에서 찾을 수 있습니다.

+
+ +

현대 조판 기술

+ +

다단 조판과 가변상자와 격자와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.

+ +

다단

+ +

이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 column-count를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.

+ +
.container {
+  column-count: 3;
+} 
+
+ +

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.

+ +
.container {
+  column-width: 10em;
+} 
+
+ +

가변상자

+ +

가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. flex-grow 및 flex-shrink 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.

+ +

아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, 가변상자: 가변 항목의 가변 크기 조정에서 설명했듯이 flex: 1식의 약칭을 사용할 수 있습니다.

+ +
.container {
+  display: flex;
+}
+
+.item {
+  flex: 1;
+} 
+
+ +
+

참고: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: 예제, 소스 코드.

+
+ +

씨에스에스 격자

+ +

씨에스에스 격자 조판에서 fr 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 1fr 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 fr 단위를 포함한 가변 격자라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.

+ +
.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+} 
+
+ +
+

참고: 격자 조판 버전은 .wrapper 예제상에 열을 정의할 수 있으므로 더 간단합니다: 소스 코드.

+
+ +

반응형 이미지

+ +

반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.

+ +
img {
+  max-width: 100%:
+} 
+
+ +

이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.

+ +

반응형 이미지는 <picture> 요소와 <img>, srcset과 sizes 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.

+ +

또한 다른 화면 크기에서 사용되는 이미지를 art direct할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.

+ +

이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 반응형 이미지에 대한 자세한 안내서를 찾을 수 있습니다.

+ +

반응형 타이포그래피

+ +

반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.

+ +

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.

+ +
html {
+  font-size: 1em;
+}
+
+h1 {
+  font-size: 2rem;
+}
+
+@media (min-width: 1200px) {
+  h1 {
+    font-size: 4rem;
+  }
+} 
+
+ +

상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.

+ +

모바일에서는 머리글이 더 작다:

+ +
머리글 크기가 작은 스택 모양의 조판입니다. +

On desktop however we see the larger heading size:

+ +
+
+ +
큰 머리글이 딸린 두개의 열 조판입니다. +
+
+ +
+

참고: 이 예제의 실제 구현 장면: 예제, 소스 코드.

+
+ +

타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.

+ +

반응형 타이포그래피에 대한 뷰포트 단위 사용하기

+ +

흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 vw를 사용할 수 있다는 점이다. 1vw는 뷰포트 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.

+ +
h1 {
+  font-size: 6vw;
+}
+ +

위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. 따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다.

+ +

해결책이 하나 있다. calc()를 사용하는 것이다. 즉, em와 같은 고정된 크기를 사용하여 속성값 집합에 vw 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 vw 단위는 확대/축소 값에 더해 추가된다.

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.

+ +
+

이에 대한 예제의 실현: 예제, 소스 코드.

+
+ +

뷰포트 메타 테그

+ +

응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <head>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.

+ +
<meta name="viewport" content="width=device-width,initial-scale=1">
+
+ +

이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.

+ +

왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.

+ +

이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.

+ +

문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. width=device-width를 설정하면 애플의 기본값인 width=960px를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.

+ +

따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 항상 포함해야 합니다.

+ +

뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.

+ + + +

여러분은 minimum-scale와 maximum-scale 사용을 피해야하며, 특히 user-scalable를 no로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.

+ +
+

참고: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. @viewport 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.

+
+ +

요약정리

+ +

반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.

+ +

또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.

+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git a/files/ko/learn/css/css_layout/supporting_older_browsers/index.html b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html new file mode 100644 index 0000000000..07910a4d26 --- /dev/null +++ b/files/ko/learn/css/css_layout/supporting_older_browsers/index.html @@ -0,0 +1,248 @@ +--- +title: 이전 브라우저 지원 +slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +tags: + - 가변상자 + - 격자 + - 기능 쿼리 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.

+ + + + + + + + + + + + +
선결 사항:HTML 기본 (HTML 입문 학습), CSS의 작동 방식 CSS 입문 및 (상자 양식 지정 학습)
목표:여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.
+ +

당신의 사이트 브라우저 지향은?

+ +

모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 Statcounter같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.

+ +

또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.

+ +

당신이 사용하려는 기능에 대한 지원은 어떻습니까?

+ +

사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.

+ +

+ +

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 Can I Use 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.

+ +

사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.

+ +

지원하는 것과 '모양이 똑같다'는 말은 다르다

+ +

일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.

+ +

기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?

+ +

한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.

+ +

CSS로 대체 페이지 생성하기

+ +

CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 레거시 기술을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.

+ +

아래 예에서는 세 개의 <div> 부동체를 행으로 표시했습니다. CSS grid 레이아웃을 지원하지 않는 브라우저는 상자 행을 부동 레이아웃 (浮動 組版) 으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, .wrapper 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 display: grid 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

+ +
+
* {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;
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제1', '100%', '200') }}

+
+ +
+

참고: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.

+
+ +

대체 메서드

+ +

이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.

+ +
+
Float(부동) 및 clear
+
위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.
+
display: inline-block
+
이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 display: inline-block로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.
+
display: table
+
CSS 테이블을 생성하는 메서드는 해당 단원의 입문서가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.
+
다단 레이아웃
+
특정 레이아웃의 경우 당신은 다단을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 column-* 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.
+
grid 대체품 역할인 Flexbox
+
Flexbox는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 flex () 속성은 무시됩니다.
+
+ +

구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.

+ +

부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.

+ +
+
* {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%;
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제2', '100%', '200') }}

+
+ +

이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.

+ +

Feature queries

+ +

feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.

+ +

위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 auto () 으로 다시 설정할 수 있습니다.

+ +
+
* {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;
+  }
+}
+
+ +
<div class="wrapper">
+  <div class="item">항목 하나</div>
+  <div class="item">항목 둘</div>
+  <div class="item">항목 셋</div>
+</div>
+
+ +

{{ EmbedLiveSample('예제3', '100%', '200') }}

+
+ +

feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.

+ +

feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.

+ +

Flexbox 예전 버전

+ +

이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 -ms- 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 안내서는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.

+ +

인터넷 익스플로러 10과 11 접두사 버전

+ +

CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 -ms- 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.

+ +

그리드 레이아웃의 점진적 향상에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.

+ +

이전 브라우저 여부 확인

+ +

Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 크로스 브라우저 테스트 단위에 설명 된대로 Sauce Labs과 같은 온라인 테스트 도구를 사용하는 것입니다.

+ +

또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 다양한 가상 컴퓨터를 무료로 다운로드 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.

+ +

요약정리

+ +

여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.

+ +

참조 항목

+ + + +

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

+ +

이번 단위에는

+ + diff --git "a/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" "b/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" deleted file mode 100644 index cf13a1421c..0000000000 --- "a/files/ko/learn/css/css_layout/\353\257\270\353\224\224\354\226\264_\354\277\274\353\246\254_\354\264\210\353\263\264\354\236\220_\354\225\210\353\202\264\354\204\234/index.html" +++ /dev/null @@ -1,424 +0,0 @@ ---- -title: 미디어 쿼리 초보자 안내서 -slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 -tags: - - 미디어 쿼리 - - 씨에스에스 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Media_queries ---- -

{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.
- -

미디어 쿼리 기본

- -

가장 간단한 미디어 쿼리 구문은 다음과 같습니다:

- -
@media media-type and (media-feature-rule) {
-  /* CSS rules go here */
-}
- -

미디어 쿼리 구문의 구성 요소:

- - - -

미디어 유형

- -

당신이 지정할 수 있는 미디어 유형

- - - -

다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.

- -
@media print {
-    body {
-        font-size: 12pt;
-    }
-}
- -
-

참고: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.

-
- -
-

참고: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.

-
- -

미디어 기능 규칙

- -

미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.

- -

너비와 높이

- -

반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.

- -

이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

- -
@media screen and (width: 600px) {
-    body {
-        color: red;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

width(및 height) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 min- or max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 max-width:를 사용할 수 있다.

- -
@media screen and (max-width: 400px) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를를 브라우저에서 열거나 소스를 보세요.

- -

실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 width 또는 height 값을 사용하는 경우는 좀처럼 흔치앖습니다.

- -

미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 미디어 쿼리 사용: 미디어 기능에서 전체 목록을 찾을 수 있습니다.

- -

방향성

- -

잘 지원되는 미디어 기능 중 하나는 orientation로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.

- -
@media (orientation: landscape) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.

- -

포인팅 장치의 사용

- -

수준 4 규격의 일부로 hover 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.

- -
@media (hover: hover) {
-    body {
-        color: rebeccapurple;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.

- -

마찬가지로 pointer 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 none과 fine coarse의 세 가지 값을 취할 수 있다. fine 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. coarse 포인터는 터치스크린상에 손가락을 말한다. none 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.

- -

pointer 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.

- -

더 복잡한 미디어 쿼리

- -

당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.

- -

"논리곱" 미디어 쿼리

- -

and를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 and를 사용했던 방식과 같습니다. 예를 들어, min-width와 orientation의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.

- -
@media screen and (min-width: 400px) and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

"논리합" 미디어 쿼리

- -

만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.

- -
@media screen and (min-width: 400px), screen and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

"

- -

"부정 논리" 미디어 쿼리

- -

not 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.

- -
@media not all and (orientation: landscape) {
-    body {
-        color: blue;
-    }
-}
- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

분기점을 선정하는 방법

- -

반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.

- -

지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 breakpoints라고 합니다.

- -

Firefox DevTools의 반응형 디자인 모드는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.

- -

파이어폭스 개발툴상에 조판 갈무리

- -

능동 학습: 모바일 우선 반응형 디자인

- -

대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 mobile first 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.

- - - -

가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.

- -

아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.

- -

길라잡이: 간단한 모바일 우선 조판

- -

우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.

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

우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.

- -
<body>
-    <div class="wrapper">
-      <header>
-        <nav>
-          <ul>
-            <li><a href="">사이트 소개</a></li>
-            <li><a href="">연락처</a></li>
-            <li><a href="">우리팀 안내</a></li>
-            <li><a href="">블로그</a></li>
-          </ul>
-        </nav>
-      </header>
-      <main>
-        <article>
-          <div class="content">
-            <h1>채식주의자!</h1>
-            <p>
-              ...
-            </p>
-          </aside>
-        </article>
-
-        <aside class="sidebar">
-          <h2>채식에 관한 외부 링크</h2>
-          <ul>
-            <li>
-              ...
-            </li>
-          </ul>
-        </aside>
-      </main>
-
-      <footer><p>&copy;2019</p></footer>
-    </div>
-  </body>
-
- -

이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.

- -

이 예제를 브라우저에서 열거나 소스를 보세요.

- -

당신이 우리의 진행 과정대로 이 예제를 실행해보려면 step1.html의 사본을 당신 컴퓨터에 만드세요.

- -

이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.

- -

아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.

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

이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.

- -

2단계 파일을 브라우저에서 열거나 소스를 보세요.

- -

사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.

- -

다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.

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

3단계 파일을 브라우저에서 열거나 소스를 보세요.

- -

최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.

- -

당신에게 정말 미디어 쿼리가 필요할까요?

- -

가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.

- -

이것은 아래 용법으로 달성될 수 있습니다.

- -
<ul class="grid">
-    <li>
-        <h2>카드 1</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 2</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 3</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 4</h2>
-        <p>...</p>
-    </li>
-    <li>
-        <h2>카드 5</h2>
-        <p>...</p>
-    </li>
-</ul>
- -
.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;
-}
- -

이 격자 예제를 브라우저에서 열거나 소스를 보세요.

- -

상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.

- -

요약정리

- -

여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.

- -

우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 pointer 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.

- -

또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" "b/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" deleted file mode 100644 index b1311448c7..0000000000 --- "a/files/ko/learn/css/css_layout/\353\260\230\354\235\221\355\230\225_\353\224\224\354\236\220\354\235\270/index.html" +++ /dev/null @@ -1,333 +0,0 @@ ---- -title: 반응형 디자인 -slug: Learn/CSS/CSS_layout/반응형_디자인 -tags: - - 가변상장 - - 격자 - - 다단 - - 미디어 쿼리 - - 반응형 웹 디자인 - - 유동 격자 - - 이미지 - - 타이포크래피 -translation_of: Learn/CSS/CSS_layout/Responsive_Design ---- -
{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
- -

웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 responsive web design 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초인 (에이치티엠엘 입문서를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (씨에스에스 첫걸음과 씨에스에스 구성 블록를 공부하세요.)
목표:반응형 디자인의 역사와 핵심적인 계념 파악하기
- -

웹사이트 조판 역사

- -

역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.

- - - -

이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.

- -
두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다. -
-
- -
-

주석: 여기 간단한 유동 조판을 보세요: 예제, 소스 코드. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.

-
- -

고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.

- -
이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다. -
-
- -
-

주석: 여기 간단한 고정 너비 조판을 보세요: 예제, 소스 코드. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.

-
- -
-

주석: 상단 화면는 파이어폭스 개발툴 안에서 반응형 디자인 모드을 사용해 갈무리 한 것입니다.

-
- -

모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 m.example.com 또는 example.mobi 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.

- -

게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.

- -

반응형 디자인의 전신 가변 조판

- -

유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 해상도 의존 조판이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.

- -

조이 미클리 길렌워터는 그녀의 작업을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.

- -

반응형 디자인

- -

반응형 디자인이라는 용어는 2010년 이단 마르코트가 만든 신조어로 세 가지 기술을 조합한 용법을 설명하고 있습니다.

- -
    -
  1. 첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 유동 격자란(2009년 A List Apart에 발표) 문서에서 읽을 수 있다.
    2. -
  2. 두 번째 기술은 유동 이미지라는 개념이다. max-width 속성을 100%로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.
    3. -
  3. 세 번째 핵심 구성요소는 미디어 쿼리였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.
    4. -
- -

반응형 웹 디자인은 별도의 기술이 아니다라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 반응할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.

- -

이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.

- -

미디어 쿼리

- -

반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.

- -

예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. .container 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.

- -
@media screen and (min-width: 800px) {
-  .container {
-    margin: 1em 2em;
-  }
-} 
-
- -

스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 breakpoints(분기점)라고 합니다.

- -

미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 모바일 우선 디자인이라고 표현하는 경우가 많다.

- -

미디어 쿼리에 대한 MDN 문서를 더 찾아보십시요.

- -

가변 격자

- -

반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.

- -

가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.

- -

반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 부동체를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.

- -
target / context = result 
-
- -

예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.

- -
.col {
-  width: 6.25%; /* 60 / 960 = 0.0625 */
-} 
-
- -

이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 레거시 조판 메서드 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.

- -

다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.

- -
상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다. -

On wider screens they move to two columns:

- -
-
- -
2단 조판이 적용된 데스크탑 뷰입니다. -
-
- -
-

주석: 여러분은 여기서 실례를 찾아볼 수 있으며, 이 예제에 대한 소스 코드를 깃허브에서 찾을 수 있습니다.

-
- -

현대 조판 기술

- -

다단 조판과 가변상자와 격자와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.

- -

다단

- -

이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 column-count를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.

- -
.container {
-  column-count: 3;
-} 
-
- -

column-width을 지정하는 대신 minimum 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.

- -
.container {
-  column-width: 10em;
-} 
-
- -

가변상자

- -

가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. flex-grow 및 flex-shrink 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.

- -

아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, 가변상자: 가변 항목의 가변 크기 조정에서 설명했듯이 flex: 1식의 약칭을 사용할 수 있습니다.

- -
.container {
-  display: flex;
-}
-
-.item {
-  flex: 1;
-} 
-
- -
-

참고: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: 예제, 소스 코드.

-
- -

씨에스에스 격자

- -

씨에스에스 격자 조판에서 fr 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 1fr 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 fr 단위를 포함한 가변 격자라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.

- -
.container {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-} 
-
- -
-

참고: 격자 조판 버전은 .wrapper 예제상에 열을 정의할 수 있으므로 더 간단합니다: 소스 코드.

-
- -

반응형 이미지

- -

반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.

- -
img {
-  max-width: 100%:
-} 
-
- -

이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.

- -

반응형 이미지는 <picture> 요소와 <img>, srcset과 sizes 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.

- -

또한 다른 화면 크기에서 사용되는 이미지를 art direct할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.

- -

이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 반응형 이미지에 대한 자세한 안내서를 찾을 수 있습니다.

- -

반응형 타이포그래피

- -

반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.

- -

이 예제에서 우리는 수준 1 머리글을 4rem로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.

- -
html {
-  font-size: 1em;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-@media (min-width: 1200px) {
-  h1 {
-    font-size: 4rem;
-  }
-} 
-
- -

상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.

- -

모바일에서는 머리글이 더 작다:

- -
머리글 크기가 작은 스택 모양의 조판입니다. -

On desktop however we see the larger heading size:

- -
-
- -
큰 머리글이 딸린 두개의 열 조판입니다. -
-
- -
-

참고: 이 예제의 실제 구현 장면: 예제, 소스 코드.

-
- -

타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.

- -

반응형 타이포그래피에 대한 뷰포트 단위 사용하기

- -

흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 vw를 사용할 수 있다는 점이다. 1vw는 뷰포트 너비의 1%와 동일하며, vw를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.

- -
h1 {
-  font-size: 6vw;
-}
- -

위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. 따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다.

- -

해결책이 하나 있다. calc()를 사용하는 것이다. 즉, em와 같은 고정된 크기를 사용하여 속성값 집합에 vw 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 vw 단위는 확대/축소 값에 더해 추가된다.

- -
h1 {
-  font-size: calc(1.5rem + 3vw);
-}
- -

즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.

- -
-

이에 대한 예제의 실현: 예제, 소스 코드.

-
- -

뷰포트 메타 테그

- -

응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <head>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.

- -
<meta name="viewport" content="width=device-width,initial-scale=1">
-
- -

이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.

- -

왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.

- -

이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.

- -

문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. width=device-width를 설정하면 애플의 기본값인 width=960px를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.

- -

따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 항상 포함해야 합니다.

- -

뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.

- - - -

여러분은 minimum-scale와 maximum-scale 사용을 피해야하며, 특히 user-scalable를 no로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.

- -
-

참고: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. @viewport 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.

-
- -

요약정리

- -

반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.

- -

또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" "b/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" deleted file mode 100644 index 76a491ae0e..0000000000 --- "a/files/ko/learn/css/css_layout/\354\234\204\354\271\230\354\236\241\352\270\260/index.html" +++ /dev/null @@ -1,585 +0,0 @@ ---- -title: 위치잡기 -slug: Learn/CSS/CSS_layout/위치잡기 -tags: - - 고정 - - 글 - - 상대 - - 씨에스에스 - - 안내서 - - 위치잡기 - - 절대 - - 조판 - - 초보자 - - 코딩스크립팅 -translation_of: Learn/CSS/CSS_layout/Positioning ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
- -

당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.

- - - - - - - - - - - - -
선결 사항:에이치티엠엘의 기초 (에이치티엠엘 입문서)와 씨에스에스 작동 방식에 대한 개념(씨에스에스 입문서를 공부하세요.)
목표:씨에스에스 위치잡기가 작동하는 방법 배우기
- -

가능하면 우리 깃허브 저장소에 있는 0_basic-flow.html 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (여기 소스 코드)가 있으니 그걸 착수 파일로 이용하십시요.

- -

위치잡기 소개

- -

크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.

- -

에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.

- -

정적 위치잡기

- -

정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."

- -

이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 positioned라는 클래스를 추가하십시오:

- -
<p class="positioned"> ... </p>
- -

이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:

- -
.positioned {
-  position: static;
-  background: yellow;
-}
- -

이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!

- -
-

주석: 이 시점에 예제의 실제 구현 장면을 1_static-positioning.html에서 볼 수 있습니다.(소스 코드는 여기서 보세요).

-
- -

상대 위치잡기

- -

상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 position 선언을 업데이트하십시요.

- -
position: relative;
- -

현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.

- -

상하 좌우 위치잡기 소개

- -

{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 .positioned 규칙에 추가하십시오:

- -
top: 30px;
-left: 30px;
- -
-

참고: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 단위를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.

-
- -

이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:

- - - -

{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}

- -

근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, top: 30px;를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.

- -
-

참고: 이 시점에 예제의 실제 구현 장면을 2_relative-positioning.html에서 확인할 수 있습니다(소스 코드 보기).

-
- -

절대 위치잡기

- -

절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.

- -
position: absolute;
- -

지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:

- - - -

{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}

- -

우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…

- -

둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.

- -
-

참고: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 top: 0; bottom: 0; left: 0; right: 0;과 margin: 0;를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...

-
- -
-

주석: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.

-
- -
-

참고: 당신은 3_absolute-positioning.html에서 예제를 확인할 수 있습니다(소스 코드를 보세요).

-
- -

위치잡기 상황

- -

어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See 콘테이너 블록 식별하기).

- -

조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 initial containing block에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.

- -

위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 positioning context(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 body 규칙에 추가하십시요:

- -
position: relative;
- -

이로써 다음과 같은 결과가 나와야 합니다.

- - - -

{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}

- -

위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 4_positioning-context.html에서 볼 수 있습니다(소스 코드 보기).

-
- -

z-인덱스 소개

- -

이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?

- -

다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.

- -
p:nth-of-type(1) {
-  position: absolute;
-  background: lime;
-  top: 10px;
-  right: 30px;
-}
- -

이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 .positioned 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 .positioned 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.

- -

스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).

- -

웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 z-index가 auto 값을 가지며, 이는 사실상 0입니다.

- -

스택 순서를 변경하려면 다음 선언을 p:nth-of-type(1) rule: 규칙에 추가하십시오.

- -
z-index: 1;
- -

이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.

- - - -

{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}

- -

z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.

- -
-

참고: 이 시점에 예제의 실제 구현 장면을 5_z-index.html에서 볼 수 있습니다(소스 코드 보기).

-
- -

고정 위치잡기

- -

이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.

- -

우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 p:nth-of-type(1)과 .positioned 규칙을 삭제합니다.

- -

이제 position: relative; 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 body 규칙에 업데이트합니다:

- -
body {
-  width: 500px;
-  height: 1400px;
-  margin: 0 auto;
-}
- -

이제 우리는 {{htmlelement("h1")}} 요소에 position: fixed;를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.

- -
h1 {
-  position: fixed;
-  top: 0;
-  width: 500px;
-  margin: 0 auto;
-  background: white;
-  padding: 10px;
-}
- -

화면 상단에 고정시키려면 top: 0;이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 margin: 0 auto;를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.

- -

지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:

- -
p:nth-of-type(1) {
-  margin-top: 60px;
-}
- -

당신은 이제 완성된 예제를 볼 수 있어야 합니다:

- - - -

{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 6_fixed-positioning.html에서 볼 수 있습니다 (소스 코드는 여기서 보세요).

-
- -

position: sticky

- -

이용할 수 있는 position: sticky라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.

- -
- - -
.positioned {
-  position: sticky;
-  top: 30px;
-  left: 30px;
-}
-
- -

{{ EmbedLiveSample('흡착_1', '100%', 200) }}

- -

position: sticky의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:

- -
<h1>흡착 위치잡기</h1>
-
-<dl>
-    <dt>A</dt>
-    <dd>Apple</dd>
-    <dd>Ant</dd>
-    <dd>Altimeter</dd>
-    <dd>Airplane</dd>
-    <dt>B</dt>
-    <dd>Bird</dd>
-    <dd>Buzzard</dd>
-    <dd>Bee</dd>
-    <dd>Banana</dd>
-    <dd>Beanstalk</dd>
-    <dt>C</dt>
-    <dd>Calculator</dd>
-    <dd>Cane</dd>
-    <dd>Camera</dd>
-    <dd>Camel</dd>
-    <dt>D</dt>
-    <dd>Duck</dd>
-    <dd>Dime</dd>
-    <dd>Dipstick</dd>
-    <dd>Drone</dd>
-    <dt>E</dt>
-    <dd>Egg</dd>
-    <dd>Elephant</dd>
-    <dd>Egret</dd>
-</dl>
-
- -

씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 position: sticky를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.

- -
dt {
-  background-color: black;
-  color: white;
-  padding: 10px;
-  position: sticky;
-  top: 0;
-  left: 0;
-  margin: 1em 0;
-}
-
- -
- -
- -

{{ EmbedLiveSample('흡착_2', '100%', 200) }}

- -
-

참고: 당신은 이 시점에 예제의 실제 구현 장면을 7_sticky-positioning.html에서 볼 수 있습니다(소스 코드는 여기서 보세요).

-
- -

요약정리

- -

기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}

- -

참조 항목

- - - -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" "b/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" deleted file mode 100644 index 07910a4d26..0000000000 --- "a/files/ko/learn/css/css_layout/\354\235\264\354\240\204_\353\270\214\353\235\274\354\232\260\354\240\200_\354\247\200\354\233\220/index.html" +++ /dev/null @@ -1,248 +0,0 @@ ---- -title: 이전 브라우저 지원 -slug: Learn/CSS/CSS_layout/이전_브라우저_지원 -tags: - - 가변상자 - - 격자 - - 기능 쿼리 - - 레거시 - - 부동체 - - 씨에스에스 - - 안내서 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.

- - - - - - - - - - - - -
선결 사항:HTML 기본 (HTML 입문 학습), CSS의 작동 방식 CSS 입문 및 (상자 양식 지정 학습)
목표:여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.
- -

당신의 사이트 브라우저 지향은?

- -

모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 Statcounter같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.

- -

또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.

- -

당신이 사용하려는 기능에 대한 지원은 어떻습니까?

- -

사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.

- -

- -

기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 Can I Use 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.

- -

사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.

- -

지원하는 것과 '모양이 똑같다'는 말은 다르다

- -

일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.

- -

기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?

- -

한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.

- -

CSS로 대체 페이지 생성하기

- -

CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 레거시 기술을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.

- -

아래 예에서는 세 개의 <div> 부동체를 행으로 표시했습니다. CSS grid 레이아웃을 지원하지 않는 브라우저는 상자 행을 부동 레이아웃 (浮動 組版) 으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, .wrapper 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 display: grid 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.

- -
-
* {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;
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제1', '100%', '200') }}

-
- -
-

참고: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.

-
- -

대체 메서드

- -

이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.

- -
-
Float(부동) 및 clear
-
위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.
-
display: inline-block
-
이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 display: inline-block로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.
-
display: table
-
CSS 테이블을 생성하는 메서드는 해당 단원의 입문서가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.
-
다단 레이아웃
-
특정 레이아웃의 경우 당신은 다단을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 column-* 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.
-
grid 대체품 역할인 Flexbox
-
Flexbox는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 flex () 속성은 무시됩니다.
-
- -

구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.

- -

부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.

- -
-
* {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%;
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제2', '100%', '200') }}

-
- -

이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.

- -

Feature queries

- -

feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.

- -

위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 auto () 으로 다시 설정할 수 있습니다.

- -
-
* {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;
-  }
-}
-
- -
<div class="wrapper">
-  <div class="item">항목 하나</div>
-  <div class="item">항목 둘</div>
-  <div class="item">항목 셋</div>
-</div>
-
- -

{{ EmbedLiveSample('예제3', '100%', '200') }}

-
- -

feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.

- -

feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.

- -

Flexbox 예전 버전

- -

이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 -ms- 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 안내서는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.

- -

인터넷 익스플로러 10과 11 접두사 버전

- -

CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 -ms- 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.

- -

그리드 레이아웃의 점진적 향상에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.

- -

이전 브라우저 여부 확인

- -

Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 크로스 브라우저 테스트 단위에 설명 된대로 Sauce Labs과 같은 온라인 테스트 도구를 사용하는 것입니다.

- -

또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 다양한 가상 컴퓨터를 무료로 다운로드 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.

- -

요약정리

- -

여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.

- -

참조 항목

- - - -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git "a/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" "b/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" deleted file mode 100644 index 43b4366c0e..0000000000 --- "a/files/ko/learn/css/css_layout/\354\235\274\353\260\230_\355\235\220\353\246\204/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: 일반 대열 -slug: Learn/CSS/CSS_layout/일반_흐름 -tags: - - 격자형 - - 부동 - - 씨에스에스 - - 일반 대열 - - 조판 - - 초보자 - - 학습 -translation_of: Learn/CSS/CSS_layout/Normal_Flow ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.

- - - - - - - - - - - - -
선결 사항:HTML의 기초 (HTML에 대한 소개)와 CSS 작동 방식에 대한 개념(CSS 소개를 공부하세요.)
목표:변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기
- -

이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.

- -

서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.

- -

기본값으로 요소들은 어떻게 배치되는가?

- -

우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.

- -

기본값으로 블록 수준 요소의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. 인라인 요소는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 display: block; 속성값이나 양쪽의 성격이 혼합된 display: inline-block;을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.

- -

앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 쓰기 모드(initial: horizontal-tb)에 기초해 블록 flow 방향에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.

- -

인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.

- -

두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.

- -

이 모든 것을 설명하는 간단한 예를 살펴봅시다.

- -
-
<h1>기본 문서 flow</h1>
-
-<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p>
-
-<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p>
-
-<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p>
-
-<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
- -
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;
-}
-
- -

{{ EmbedLiveSample('일반_flow', '100%', 500) }}

- -

요약정리

- -

이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.

- -

{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}

- -

이번 단위에는

- - diff --git a/files/ko/learn/css/howto/css_faq/index.html b/files/ko/learn/css/howto/css_faq/index.html new file mode 100644 index 0000000000..604448f6c3 --- /dev/null +++ b/files/ko/learn/css/howto/css_faq/index.html @@ -0,0 +1,199 @@ +--- +title: 공통된 CSS 질문들 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?

+ +

Browsers use the DOCTYPE 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 DOCTYPE declaration at the start of your HTML will improve browser standards compliance.

+ +

Modern browsers have two main rendering modes:

+ + + +

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

+ +

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

+ +
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+                   parser, this is the recommended doctype */
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+ +

왜 유효한 내 CSS는 모두 랜더링 되지 않는가?

+ +

원인은 다음과 같다:

+ + + +

id 와 css는 무엇이 다른가?

+ +

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.
+
+ 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.
+
+ Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.

+ +

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

+ +

See CSS selectors

+ +

 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?

+ +

 

+ +

본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.

+ +
/* Heading default color is black */
+h1 { color: red; }
+h1 { color: black; }
+ +

이것은 CSS 2에서 변경되었다. 키워드 initial은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.

+ +
/* Heading default color is black */
+h1 { color: red; }
+h1 { color: initial; }
+ +

 

+ +

어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?

+ +

CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See Eric Meyer's note about the Working Group's stance).  그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.

+ +

어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?

+ +

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

+ +
<style type="text/css">
+.news { background: black; color: white; }
+.today { font-weight: bold; }
+</style>
+
+<div class="news today">
+... content of today's news ...
+</div>
+
+ +

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 class attribute is not relevant.

+ +

왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?

+ +

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

+ +

HTML 요소(element) 계층(hierarchy)

+ +

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.

+ +
.news { color: black; }
+.corpName { font-weight: bold; color: red; }
+
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+
+ +

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.

+ +

명확한 스타일 룰 재정의

+ +

CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.

+ +
#stockTicker { font-weight: bold; }
+.stockSymbol { color: red; }
+/*  other rules             */
+/*  other rules             */
+/*  other rules             */
+.stockSymbol { font-weight: normal; }
+
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.

+ +

프로퍼티(property) 축약형의 사용

+ +

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.

+ +
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+.stockSymbol { font: 14px Arial; color: red; }
+
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+
+ +

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

+ +
#stockTicker {
+   font-weight: bold;
+   font: 12px Verdana;  /* font-weight is now normal */
+}
+
+ +

* 셀렉터(selector)의 사용

+ +

* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.

+ +
body * { font-weight: normal; }
+#stockTicker { font: 12px Verdana; }
+.corpName { font-weight: bold; }
+.stockUp { color: red; }
+
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+
+ +

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

+ +

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.

+ +

CSS의 특수성

+ +

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

+ +
div { color: black; }
+#orange { color: orange; }
+.green { color: green; }
+
+<div id="orange" class="green" style="color: red;">This is red</div>
+
+ +

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 CSS 2.1 Specification chapter 6.4.3.

+ +

-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?

+ +

These properties, called prefixed properties, 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.

+ +

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.

+ +

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

+ +

z-index는 어떻게 포지셔닝을 하는가?

+ +

The z-index property specifies the stack order of elements.

+ +

An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.

+ +

Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

diff --git "a/files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" "b/files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" deleted file mode 100644 index d16df40221..0000000000 --- "a/files/ko/learn/css/introduction_to_css/\352\270\260\353\263\270\354\240\201\354\235\270_css_\354\235\264\355\225\264/index.html" +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: 기본적인 CSS 이해 -slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 -translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
- -

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.

- - - - - - - - - - - - -
Prerequisites:Before attempting this assessment you should have already worked through all the articles in this module.
Objective:To test comprehension of fundamental CSS theory, syntax and mechanics.
- -

Starting point

- -

To get this assessment started, you should:

- - - -
-

Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use this URL to point the <img> 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 <style> element in the head of the document.

-
- -

Project brief

- -

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.

- -

Basic setup:

- - - -

Taking care of the selectors and rulesets provided in the CSS resource file:

- - - -

New rulesets you need to write:

- - - -
-

Note: Bear in mind that the second ruleset sets font-size: 10px; on the <html> element — this means that for any descendants of <html>, 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 <html> in the hierarchy that have a different font-size set on them. This could affect the values you need, although in this simple example this is not an issue.)

-
- -

Other things to think about:

- - - -

Hints and tips

- - - -

Example

- -

The following screenshot shows an example of what the finished design should look like:

- -

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

- -

 

- -

Assessment

- -

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 discussion thread about this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

- -

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

- -

 

- -

In this module

- - - -

 

diff --git a/files/ko/learn/forms/how_to_structure_a_web_form/index.html b/files/ko/learn/forms/how_to_structure_a_web_form/index.html new file mode 100644 index 0000000000..37bfbb57ae --- /dev/null +++ b/files/ko/learn/forms/how_to_structure_a_web_form/index.html @@ -0,0 +1,928 @@ +--- +title: HTML_폼_구성_방법 +slug: Learn/HTML/Forms/HTML_폼_구성_방법 +translation_of: Learn/Forms/How_to_structure_a_web_form +--- +

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

+ +

HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. XForms같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. How to build custom form widgets

+ +

글로벌 구조

+ +

<form> 요소

+ +

{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.

+ +

우리는 저번 문서에서 이미 이 내용을 다루었다.

+ +
주의:폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.
+ +

언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수  있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.

+ +
+

주의:HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.

+
+ +

{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.

+ +


+  {{HTMLElement("form")}} 요소 속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성 이름기본값설명
{{htmlattrxref("accept-charset","form")}}UNKNOWN서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 UNKNOWN이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.
{{htmlattrxref("action","form")}} 폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL 
{{htmlattrxref("autocomplete","form")}}on이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. on 또는 off.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencoded\method 속성이 post 값으로 지정되면,  서버로 폼을 전송하는 콘텐츠 MIME의 타입을 지정한다.: +
    +
  • application/x-www-form-urlencoded
    • +
  • multipart/form-data: {{HTMLElement("input")}}요소의 type 속성을 file로 지정한 경우 이 속성의 값을 사용한다. 
    • +
  • text/plain
    • +
+
{{htmlattrxref("method","form")}}get브라우저가 폼을 전송하기위해 사용하는 HTTP의 방식을 지정한다.
+ 이 속성은 두개의 값중 한개를 가진다.  get 또는 post.
{{htmlattrxref("name","form")}} 폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 id 속성으로 대신 지정할 수 있다.
{{htmlattrxref("novalidate","form")}}(false)이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.
{{htmlattrxref("target","form")}}_self폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다. +
    +
  • _self: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.
    • +
  • _blank: 응답을 새로운 브라우징 컨텍스트로 불러온다.
    • +
  • _parent: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 _self 키워드와 똑같이 작동한다.
    • +
  • _top: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면  _self 키워드와 똑같이 작동한다.
    • +
+
+ +

요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.

+ +

기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다. 이것은 요소들을 실제로  {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.

+ +

 <fieldset> 와 <legend> 요소

+ +

{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어  Jaws, NVDA같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다. 

+ +

아래 조그만 예제가 있다.

+ +
<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small" />
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium" />
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large" />
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+ +

이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,

+ +

이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}}  요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}}  요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.

+ +

{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.

+ + + + + + + + + + + + + + + + + +
{{HTMLElement("fieldset")}} 요소의 속성
속성 이름기본값설명
{{htmlattrxref("disabled","fieldset")}}(false)만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.
+ +

The <label> element

+ +

{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.

+ +

{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.

+ +


+ {{HTMLElement("label")}} 요소의 속성

+ +


+  

+ + + + + + + + + + + + + + + + +
속성 명기본값설명
{{htmlattrxref("for","label")}} {{HTMLElement("label")}}  요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.
+ +

요소는 for속성으로 지정한 위젯과 묶여진다. for속성은 해당 위젯의 실제 id 속성을 참조한다. 위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.

+ +

심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.

+ +
<form>
+  <p>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+    <label for="taste_1">I like cherry</label>
+  </p>
+  <p>
+    <label for="taste_2">
+      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
+      I like banana
+    </label>
+  </p>
+</form>
+ +

몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.

+ +

다음 예제를 보아라

+ +
<form>
+  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+
+  <p>
+    <label for="name">
+      <span>Name: </span>
+      <input type="text" id="name" name="username" required />
+      <strong><abbr title="required">*</abbr></strong>
+    </label>
+  </p>
+
+  <p>
+    <label for="birth">
+      <span>Date of birth: </span>
+      <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em>
+    </label>
+  </p>
+</form>
+ +

이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. 이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.

+ +

첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다  이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다).  만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.

+ +

두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.

+ +

<output> 요소

+ +

이 요소는 계산의 출력을 저장하는데 사용된다. 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).

+ +

{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.

+ + + + + + + + + + + + + + + + + +
{{HTMLElement("output")}} 요소 속성
Attribute nameDefault valueDescription
{{htmlattrxref("for","output")}} 스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)
+ +

form이 사용되는 일반적인 form 구조

+ +

HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.

+ +

예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은  {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.

+ +

게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.

+ +

HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.

+ +

간단한 지불 폼을 만들어 보자

+ +
<form>
+  <h1>Payment form</h1>
+  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+
+  <section>
+    <h2>Contact information</h2>
+
+    <fieldset>
+      <legend>Title</legend>
+      <ul>
+        <li>
+          <label for="title_1">
+            <input type="radio" id="title_1" name="title" value="M." />
+            Mister
+          </label>
+        </li>
+        <li>
+          <label for="title_2">
+            <input type="radio" id="title_2" name="title" value="Ms." />
+            Miss
+          </label>
+        </li>
+      </ul>
+    </fieldset>
+
+    <p>
+      <label for="name">
+        <span>Name: </span>
+        <input type="text" id="name" name="username" required />
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+    </p>
+
+     <p>
+      <label for="mail">
+        <span>E-mail: </span>
+        <input type="email" id="mail" name="usermail" required />
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+    </p>
+  </section>
+
+  <section>
+    <h2>Payment information</h2>
+
+    <p>
+      <label for="card">
+        <span>Card type:</span>
+        <select id="card" name="usercard">
+          <option value="visa">Visa</option>
+          <option value="mc">Mastercard</option>
+          <option value="amex">American Express</option>
+        </select>
+      </label>
+    </p>
+    <p>
+      <label for="number">
+        <span>Card number:</span>
+        <input type="text" id="number" name="cardnumber" required />
+        <strong><abbr title="required">*</abbr></strong>
+      </label>
+    </p>
+    <p>
+      <label for="date">
+        <span>Expiration date:</span>
+        <input type="text" id="date" name="expiration" required />
+        <strong><abbr title="required">*</abbr></strong>
+        <em>formated as mm/yy</em>
+      </label>
+    </p>
+  </section>
+
+  <section>
+    <p>
+      <button>Validate the payment</button>
+    </p>
+  </section>
+</form>
+ +

See this form in action (with a touch of CSS):

+ +

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

+ +

HTML 위젯

+ +

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: The native form widgets.

+ +

The <input> element

+ +

이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. 이와 같은 다형성 떄문에  {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만  type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지  선택하는 것은 어려울 수 있다. 

+ +

This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
type 속성 의 값설명필수 속성관련된 속성
단일 선 텍스트 필드
text이것은 가장 기본적인 텍스트 필드이다.  type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음) {{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")}}
email하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드 {{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")}}
password텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
search검색 하기 위한 텍스트 필드 {{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")}}
tel전화 번호를 입력할 수 있는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
url절대 URL을 다루기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
텍스트 입력 없는 컨트롤
checkbox체크박스 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
color색상을 입력 받기위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileA control that lets the user select a file. {{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hidden보여주지 않는 컨트롤 이지만 서버로 전송되는 필드  
number소숫점을 입력받는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radio라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
range정확하지 않는 숫자를 입력받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
시간 과 날짜 컨트롤
date(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeUTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-local타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
month타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
time타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
week타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
버튼
button기본 행동이 없는 누르는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
image그래픽적인 전송버튼{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
reset폼의 내용을 초기화 하는 컨트롤 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submit폼을 전송하는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
+ +

몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는  text 속성으로 렌더링 한다. 이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.

+ +

요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.

+ +

<textarea> 요소

+ +

이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
 {{HTMLElement("textarea")}} 요소 속성
Attribute name기본값설명
{{htmlattrxref("cols","textarea")}}20보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비
{{htmlattrxref("rows","textarea")}} 보여지는 텍스트 행의 수
{{htmlattrxref("wrap","textarea")}}softhard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.
+ +

 {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.

+ +

이는 두가지 영향이 있다.

+ + + +

 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.

+ +
<form>
+  <p>
+    <label for="text_1">With regular HTML</label><br>
+    <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
+  </p>
+  <p>
+    <label for="text_2">With escaped HTML</label><br>
+    <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
+  </p>
+  <p>
+    <button>Send me</button>
+  </p>
+</form>
+ +

<select>, <option>그리고 <optgroup> 요소

+ +

요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택  박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 The native form widgets.

+ +

선택 박스 안의 값들은  {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.

+ +

Let's take an example:

+ +
<form>
+  <p>
+    <label for="myFruit">Pick a fruit</label>
+    <select id="myFruit" name="fruit">
+      <!-- There is a trick here you think you'll pick
+         a banana but you'll eat an orange >:-) -->
+      <option value="orange">Banana</option>
+      <option>Cherry</option>
+      <optgroup label="berries">
+        <option>Blueberry</option>
+        <option>Raspberry</option>
+        <option>Strawberry</option>
+      </optgroup>
+    </select>
+  </p>
+</form>
+ +

{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다. 만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.

+ +

{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다..

+ + + + + + + + + + + + + + + + + + + + + + +
{{HTMLElement("option")}} 요소 의 속성
속성 이름기본값설명
{{htmlattrxref("label","option")}} 이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.
{{htmlattrxref("selected","option")}}(false)만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.
+ + + + + + + + + + + + + + + + + +
Attributes for the {{HTMLElement("optgroup")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("label","optgroup")}} The name of the group of options. This attribute is mandatory.
+ +

<datalist>요소 

+ +

이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.

+ +

{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.

+ +

요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.

+ +
<form>
+  <p>
+    <label for="myFruit">What is your favorite fruit?</label>
+    <input type="text" id="myFruit" name="fruit" list="fruitList" />
+
+    <datalist id="fruitList">
+      <label for="suggestion">or pick a fruit</label>
+      <select id="suggestion" name="altFruit">
+        <option value="banana">Banana</option>
+        <option value="cherry">Cherry</option>
+        <option value="strawberry">Strawberry</option>
+      </select>
+    </datalist>
+  </p>
+</form>
+ +

한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.

+ + + + + + + + + + + + +
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
+ +

<meter> 와 <progress> 요소들 

+ +

이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.

+ + + +

속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.

+ +


+ {{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute nameDefault valueDescription
{{htmlattrxref("min","meter")}}0The lower numeric bound of the measured range.
{{htmlattrxref("max","meter")}}1The upper numeric bound of the measured range.
{{htmlattrxref("low","meter")}}the min valueThe upper numeric bound of the low end of the measured range.
{{htmlattrxref("high","meter")}}the max valueThe lower numeric bound of the high end of the measured range.
{{htmlattrxref("optimum","meter")}} The optimal numeric value.
+ + + + + + + + + + + + + + + + + +
Attributes for the {{HTMLElement("progress")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("max","progress")}} This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.
+ +

The <button> element 

+ +

{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. 버튼은 type속성에 따라 3가지 타입을 가진다.

+ + + +


+ {HTMLElement("button")}} 요소의 속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성 이름기본값설명
{{htmlattrxref("type","button")}}submit버튼의 타입.  button, reset, submit 이 있다.
{{htmlattrxref("formaction","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.
{{htmlattrxref("formenctype","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.
{{htmlattrxref("formmethod","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.
{{htmlattrxref("formnovalidate","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.
{{htmlattrxref("formtarget","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.
+ +

기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.

+ +
Note: 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 name and a value attribute to a {{HTMLElement("button")}} element, they do not send the content of the value 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.
+ +
 
+ +

공통 속성

+ +

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attribute nameDefault valueDescription
autofocus(false)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.
disabled(false)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 disabled attribute set, then the element is enabled.
form The form element that the widget is associated with. The value of the attribute must be the id 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.
name The name of the element; this is submitted with the form data.
value The element's initial value.
+ +

Using ARIA to structure HTML forms

+ +

ARIA is a W3C Candidate Recommendation which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "How to build custom form widgets" article, but there are some basics that are good to know.

+ +

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.

+ +

If you want to dig into using ARIA with HTML forms, feel free to read the related section in the ARIA documentation.

+ +

The aria-labelledby attribute

+ +

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 id attribute of the element to use as a label.

+ +
<form>
+  <p id="fruitLabel">What's your favorite fruit</p>
+  <p>
+    <input type="text" name="fruit" aria-labelledby="fruitLabel">
+  </p>
+</form>
+ +

Conceptually, it's the opposite of the for attribute on the {{HTMLElement("label")}} element. With the for attribute, you reference the id of the widget but with the aria-labbeldby attribute, you reference the id of the label.

+ +

The aria-describedby attribute

+ +

This attribute works like the aria-labelledby 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 aria-labelledby 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.

+ +

The aria-label attribute

+ +

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.

+ +
<form>
+  <p>
+    <input type="search" name="q" aria-label="Search" />
+    <input type="submit" value="Go" />
+  </p>
+</form>
+ +

The role attribute

+ +

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.

+ +

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.

+ +

Those roles for form widgets are :

+ + + +

It's also worth noting that there's something called a composite role:

+ + + +

If those roles are extremely useful, know that there are more; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.

+ +

결론

+ +

You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: The native form widgets.

+ +

볼거리

+ + diff --git a/files/ko/learn/forms/index.html b/files/ko/learn/forms/index.html new file mode 100644 index 0000000000..f7244cbdc1 --- /dev/null +++ b/files/ko/learn/forms/index.html @@ -0,0 +1,358 @@ +--- +title: HTML 폼 가이드 +slug: Learn/HTML/Forms +translation_of: Learn/Forms +--- +

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

+ +

항목

+ +
    +
  1. 나의 첫 HTML 폼
    2. +
  2. HTML HTML 폼 구성 방법
    3. +
  3. 기본 폼 위젯
    4. +
  4. CSS와 HTML 폼 +
      +
    1. HTML 폼 스타일
      2. +
    2. HTML 폼을 위한 고급 스타일
      3. +
    3. 폼 위젯을 위한 호환성 테이블 속성
      4. +
    +
    5. +
  5. 데이터 주고 받기
    6. +
  6. 데이터 유효성 검사
    7. +
  7. 사용자 폼 위젯 만드는 방법
    8. +
  8. 자바스크립트를 통해서 폼 전달 하기 +
      +
    1. FormData 객체 사용
      2. +
    +
    9. +
  9. 기존 브라우저에서 HTML 폼
    10. +
+ +

HTML 문서

+ +

HTML 요소

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
요소관련 DOM 인터페이스설명
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}button 요소는 클릭할 수 있는 버튼을 나타낸다.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. 
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}form  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}keygen 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}legend 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}optgroup 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}HTML option 요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}output 요소는 계산 결과를 나타냅니다.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.
+ +
+

Note: 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.

+
+ +

HTML 속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성 이름요소설명
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset{{ HTMLElement("form") }}지원하는 문자 집합 목록
action{{ HTMLElement("form") }}폼을 통해서 전송 정보를 처리하는 프로그램의 URL 
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
challenge{{ HTMLElement("keygen") }}공개 키(public key)와 함께 전송되는 문자열입니다.
checked{{ HTMLElement("input") }} +

해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. 

+
cols{{ HTMLElement("textarea") }} +

textarea의 세로줄 수를 설정합니다.

+
data{{ HTMLElement("object") }}자원의 URL을 명시합니다.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype{{ HTMLElement("form") }}POST방식으로 전송되는 데이터의 타입을 설정합니다.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} +

요소의 소유자인 폼을 나타냅니다.

+
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}허용되는 최댓값을 나타냅니다.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}요소에서 허용되는 특징의 최대 수를 명시합니다.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}허용되는 최솟값을 나타냅니다.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} +

요소의 이름. For example used by the server to identify the fields in form submits.

+
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }}
target{{ HTMLElement("form") }}
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
+ +

Normative reference

+ + diff --git a/files/ko/learn/forms/sending_and_retrieving_form_data/index.html b/files/ko/learn/forms/sending_and_retrieving_form_data/index.html new file mode 100644 index 0000000000..f1d7c35437 --- /dev/null +++ b/files/ko/learn/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 +--- +

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

+ +

데이터는 어디로 갈까?

+ +

클라이언트/서버 구조

+ +

웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다. 서버 응답은 요청과 똑같은 프로토콜을 사용한다.

+ +

A basic schema of the Web client/server architecture

+ +

클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.

+ +

클라이언트측: 데이터 보내기

+ +

{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록  설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.

+ +

{{htmlattrxref("action","form")}} 속성

+ +

이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.

+ +
Examples
+ +

첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.

+ +
<form action="http://foo.com">
+ +

여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의  다른 URL로 전송된다.

+ +
<form action="/somewhere_else">
+ +

아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.

+ +
<form>
+ +

이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.

+ +
<form action="#">
+ +
+

Note: HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는  곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. 반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도  {{htmlattrxref("action","form")}} 속성에서 안전하지 않은 HTTP URL을  지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 

+
+ +

{{htmlattrxref("method","form")}} 속성

+ +

이 속성은 데이터를 어떻게 보낼 것인지 정의한다. HTTP protocol 은 요청 방법에 대해 다양한 방법들을 제공한다.  HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.

+ +

이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.

+ +
GET 방식
+ +

GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. 바디가 비어 있기 때문에,  만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.

+ +
예제
+ +

다음 폼을 생각 해 봅시다.

+ +
<form action="http://foo.com" method="get">
+  <input name="say" value="Hi">
+  <input name="to" value="Mom">
+  <button>Send my greetings</button>
+</form>
+ +

GET 방식을 사용하면 HTTP 요청은 다음과 같다.

+ +
GET /?say=Hi&to=Mom HTTP/1.1
+Host: foo.com
+ +
POST 방식
+ +

POST 방식은 조금 다르다. 이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" 만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.

+ +

예제

+ +

이 폼을 생각해보라(위 예제와 똑같다)

+ +
<form action="http://foo.com" method="post">
+  <input name="say" value="Hi">
+  <input name="to" value="Mom">
+  <button>Send my greetings</button>
+</form>
+ +

POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,

+ +
POST / HTTP/1.1
+Host: foo.com
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 13
+
+say=Hi&to=Mom
+ +

Content-Length 헤더는 바디의 크기를 나태내고,  Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.

+ +

물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). 사용자에게 보여지는 것은 호출한 URL뿐이다. 그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만,  POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.

+ +
    +
  1. 만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.
    2. +
  2. 만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.
    3. +
+ +

서버측: 데이터 가져오기

+ +

어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.

+ +

예제: PHP 날것

+ +

PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.

+ +
<?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;
+ +

이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.

+ +
Hi Mom
+ +

예제: Python

+ +

이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.

+ +
#!/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)
+ +

이 결과는 PHP와 똑같다?.

+ +
Hi Mom
+ +

다른 언어와 프레임 워크

+ +

 Perl, Java, .Net, Ruby등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) 다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.

+ + + +

이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다. 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.

+ +

특별한 경우: 파일 보내기

+ +

파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.

+ +

{{htmlattrxref("enctype","form")}} 속성

+ +

이 속성은 Content-Type  HTTP 헤더의 값을 지정할 수 있게 해준다. 서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. 기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다

+ +

만약 파일을 보내고 싶다면 두 가지를 해야한다.

+ + + +

예제 

+ +
<form method="post" enctype="multipart/form-data">
+  <input type="file" name="myFile">
+  <button>Send the file</button>
+</form>
+ +
+

Note: 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.

+
+ +
+

Warning: 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.

+
+ +

보안 코너

+ +

데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.

+ +

일반적인 보안 결함

+ +

무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.

+ +

XSS 과 CSRF

+ +

크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.

+ +

XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(same origin policy)의 접근 제어를 우회하여 사용 될 수 있다. 이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.

+ +

CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)

+ +

XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.

+ +

이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.

+ +

SQL injection

+ +

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 one of the main vector attacks against web sites.

+ +

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 mysql_real_escape_string() on a PHP/MySQL infrastructure).

+ +

HTTP header injection 와 email injection

+ +

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.

+ +

These attacks are mostly silent, and can turn your server into a zombie.

+ +

Be paranoid: Never trust your users

+ +

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.

+ +

All data that comes to your server must be checked and sanitized. Always. No exception.

+ + + +

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.

+ +

결론

+ +

여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

+ +

볼거리

+ +

If you want to learn more about securing a web application, you can dig into these resources:

+ + diff --git a/files/ko/learn/forms/your_first_form/index.html b/files/ko/learn/forms/your_first_form/index.html new file mode 100644 index 0000000000..b997fc1f08 --- /dev/null +++ b/files/ko/learn/forms/your_first_form/index.html @@ -0,0 +1,272 @@ +--- +title: 나의 첫 HTML 폼 +slug: Learn/HTML/Forms/Your_first_HTML_form +translation_of: Learn/Forms/Your_first_form +--- +

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

+ +

시작하기전에

+ +

HTML 폼 이란?

+ +

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

+ +

HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스,  버튼, 체크박스, 라디오 버튼이 될 수 있다. 대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.

+ +

폼을 사용하려면 무엇이 필요합니까?

+ +

HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. 물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.

+ +

HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 Sending and retrieving form data.

+ +

폼 디자인하기

+ +

코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다.   간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.

+ + + +

이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.

+ +

The form to build, roughly sketch

+ +

우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.

+ +

HTML를 직접 다루어 보자

+ +

자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

+ +

{{HTMLElement("form")}} 요소

+ +

모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:

+ +
<form action="/my-handling-form-page" method="post">
+
+</form>
+ +

이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 action 속성과 method 속성은 필수적으로 설정해야 한다.

+ + + +

만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

+ +

{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기

+ +

우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.

+ +

HTML코드를 다음과 같이 짤 것이다.

+ +
<form action="/my-handling-form-page" method="post">
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" />
+    </div>
+    <div>
+        <label for="msg">Message:</label>
+        <textarea id="msg"></textarea>
+    </div>
+</form>
+ +

{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. How to structure an HTML form.

+ +

{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. native form widgets 우리의 예제에서는 이 속성의 기본 값인 오직 text값만 사용했다. 이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다. 또한 오직 이메일 주소만 받는 한줄 텍스트 필드 email값을 사용했다. 이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. Form data validation

+ +

마지막 요소를 보기전에 다음 <input /> VS <textarea></textarea>요소를 봐야한다. 이것은 이상한 HTML 요소중 하나이다. <input>태그는 자동 닫힘 태그다 무슨 의미냐면 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. 요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.

+ +
<input type="text" value="by default this element is filled with this text" />
+ +

이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면,  {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.

+ +
<textarea>by default this element is filled with this text</textarea>
+ +

 {{HTMLElement("button")}} 요소로 끝내기

+ +

우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.

+ +
<form action="/my-handling-form-page" method="post">
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" />
+    </div>
+    <div>
+        <label for="msg">Message:</label>
+        <textarea id="msg"></textarea>
+    </div>
+
+    <div class="button">
+        <button type="submit">Send your message</button>
+    </div>
+</form>
+ +

버튼은 다음과 같은 3개 종류가 있다. submit, reset, button.

+ + + +

알아두어야 할것은  {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다.  {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.

+ +

CSS로 더욱 나이스하게 만들기

+ +

이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.

+ +

+ +

CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.

+ +

폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.

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

그 다음 각각 폼 위젯사이에 여백을 추가하자.

+ +
form div + div {
+    margin-top: 1em;
+}
+ +

이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.

+ +
label {
+    /* To make sure that all label have the same size and are properly align */
+    display: inline-block;
+    width: 90px;
+    text-align: right;
+}
+ +

HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오.  Styling HTML forms

+ +

폰트, 크기, 테두리를 변경 해보자

+ +
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 & feel of text field border */
+    border: 1px solid #999;
+}
+ +

HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.

+ +
input:focus, textarea:focus {
+    /* To give a little highlight on active elements */
+    border-color: #000;
+}
+ +

다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로  {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면  {{HTMLElement("textarea")}}요소의 vertical-align 속성을  top이라 변경 해야 한다.

+ +

또하나 유용한 resize 프로퍼티는 사용자가 쉽게  {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.

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

버튼도 특별한 스타일이 필요하다. 이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다

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

이제 폼이 더 나이스 해졋다.

+ +

+ +

웹서버로 데이터 보내기

+ +

까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.

+ +

{{HTMLElement("form")}} 요소는 action속성과 method속성을 사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.

+ +

이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.

+ +

그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 name속성을 지정해야한다.

+ +
<form action="/my-handling-form-page" method="post">
+    <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="user_name" />
+    </div>
+    <div>
+        <label for="mail">E-mail:</label>
+        <input type="email" id="mail" name="user_email" />
+    </div>
+    <div>
+        <label for="msg">Message:</label>
+        <textarea id="msg" name="user_message"></textarea>
+    </div>
+
+    <div class="button">
+        <button type="submit">Send your message</button>
+    </div>
+</form>
+ +

우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다.  "user_name", "user_email" and "user_message". 이 데이터는 "/my-handling-form-page"로  HTTP POST 방식으로 전송된다.

+ +

서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. 스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

+ +

결론

+ +

축하한다! 첫번째 HTML폼을 만들었다.

+ + + + + + + + + + + + + + + +
Live example
{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}
Check out the source code
+ +

하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.

+ +

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/ko/learn/getting_started_with_the_web/css_basics/index.html b/files/ko/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..a5e8e08648 --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/css_basics/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?

+
+ +

그래서 CSS가 뭔가요?

+ +

HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.

+ +
p {
+  color: red;
+}
+ +

한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 styles 디렉토리에 style.css로 파일을 저장하세요.

+ +

아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)

+ +
    +
  1. index.html 파일을 열고 head의 안쪽 어딘가(즉, <head>와 </head> 태그 사이)에 아래의 코드를 붙여 넣으세요: + + 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    +
    2. +
  2. index.html을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:
    3. +
+ +

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!

+ +

CSS의 ruleset 해부

+ +

위의 CSS를 좀 더 자세히 살펴 봅시다:

+ +

+ +

전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:

+ +
+
선택자(selector)
+
rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
+
선언
+
color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.
+
속성(property)
+
주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.
+
속성 값
+
속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).
+
+ +

구문의 다른 중요한 부분들도 주목하세요:

+ + + +

그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

+ +
p {
+  color: red;
+  width: 500px;
+  border: 1px solid black;
+}
+ +

여러 요소 선택하기

+ +

여러분은 요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 여러 선택자는 콤마로 구분합니다. 예를 들면:

+ +
p,li,h1 {
+  color: red;
+}
+ +

선택자의 여러 종류

+ +

선택자는 여러 종류가 있습니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 요소를 선택하는 요소 선택자만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 선택자의 일반적인 종류들입니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
선택자 이름선택하는 것예시
요소 선택자 (때때로 태그 또는 타입 선택자라 불림)특정 타입의 모든 HTML 요소.p
+ <p> 를 선택
아이디 선택자특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).#my-id
+ <p id="my-id">  또는  <a id="my-id"> 를 선택
클래스 선택자특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다)..my-class
+ <p class="my-class"> 와 <a class="my-class"> 를 선택
속성 선택자특정 속성을 갖는 페이지의 요소.img[src]
+ <img src="myimage.png"> 를 선택하지만 <img>  는 선택 안함
수도(Pseudo) 클래스 선택자특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.a:hover
+ <a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
+ +

탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 선택자 가이드에서 찾아보세요.

+ +

글꼴과 문자

+ +

지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 style.css 파일에 더  많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

+ +
+

노트: "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 CSS 주석입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.

+
+ +
    +
  1. 먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 구글 글꼴의 결과물을 찾으세요. index.html 의 head 안 어딘가에 <link> 요소를 추가하세요 (다시 말해서, <head> 와 </head> 태그 사이 어디에나). 이런식이 될 겁니다: + + 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    +
    2. +
  2. 다음으로, style.css 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아 보이지는 않습니다.
    3. +
  3. 아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 font-family 코드를 placeholder 줄에 덮어쓰세요. (font-family 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (html이 전체 페이지의 부모 요소일 때, 이 안의 모든 요소는 같은 font-size 와 font-family 를 물려 받습니다): + 
    html {
+  font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
+  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
+}
    +
    4. +
  4. 이제 HTML body 안에 문자를 포함하는 요소 h1, li 및 p 를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 body 콘텐츠의 제목을 가운데 정렬하고 줄의 높이(line-height)와 자간(lettet-spacing)도 설정할 것입니다: + 
    h1 {
+  font-size: 60px;
+  text-align: center;
+}
+
+p, li {
+  font-size: 16px;
+  line-height: 2;
+  letter-spacing: 1px;
+}
    +
    5. +
+ +

px(픽셀) 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:

+ +

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

+ +

박스, 박스, 박스의 모든 것

+ +

CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

+ +

a big stack of boxes or crates sat on top of one another

+ +

놀랍지 않게도, CSS 레이아웃은 박스모델 을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:

+ + + +

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

+ +

여기서 이런 것도 사용합니다:

+ + + +

그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.

+ +

페이지 색 바꾸기

+ +
html {
+  background-color: #00539F;
+}
+ +

이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 여러분의 사이트를 계획할 때 선택했던 색으로 변경하세요.

+ +

body 외부 정렬하기

+ +
body {
+  width: 600px;
+  margin: 0 auto;
+  background-color: #FF9500;
+  padding: 0 20px 20px 20px;
+  border: 5px solid black;
+}
+ +

이제는 body 요소를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:

+ + + +

메인 페이지 제목 배치하고 꾸미기

+ +
h1 {
+  margin: 0;
+  padding: 20px 0;
+  color: #00539F;
+  text-shadow: 3px 3px 1px black;
+}
+ +

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 h1 요소에 (다른 것들 사이에서) 어떤 초기 스타일링을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. margin: 0;.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

+ +

다음으로, 제목의 상단과 하단 padding 을 20 pixels로 설정하고, 제목 글자 색을 html 배경색과 같게 만들었습니다.

+ +

여기서 사용했던 꽤 흥미로운 속성 하나는 text-shadow 문자로, 요소의 문자 콘텐츠에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:

+ + + +

다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.

+ +

이미지 가운데 정렬

+ +
img {
+  display: block;
+  margin: 0 auto;
+}
+ +

마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 body 에서 했듯이 다시 margin: 0 auto 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. body 요소는 block level 입니다. 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 inline 요소 입니다. 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는,  display: block; 을 사용해 이미지에 block-level 성질을 주어야 합니다.

+ +
+

노트: 위의 지침에서는 body에 설정된 너비(600 픽셀) 보다 작은 이미지를 사용한다고 가정합니다. 이미지가 더 크면 body가 넘쳐 페이지의 나머지 부분으로 유출됩니다. 이 문제를 해결하려면 1) 그래픽 편집기를 사용하여 이미지의 너비를 줄이거나 2) 더 작은 값(예: 400px)  으로 <img> 요소에 width 속성을 설정하고 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.

+
+ +
+

노트: 아직 display: block; 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 display 참조 페이지에서 찾아보세요.

+
+ +

마무리

+ +

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

+ +

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.

+ +

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

+ +

여기서, 우리는 CSS의 겉만 살짝 맛봤습니다. 더 많은 것이 알고 싶으시면 CSS 배우기 페이지로 가보세요.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

+ +

이번 과목에서는

+ + diff --git "a/files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" "b/files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" deleted file mode 100644 index a5e8e08648..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/css_\352\270\260\353\263\270/index.html" +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: CSS 기초 -slug: Learn/Getting_started_with_the_web/CSS_기본 -tags: - - CSS - - 'l10n:priority' - - 꾸미기 - - 스크립트 코딩 - - 웹 - - 초보자 - - 학습 -translation_of: Learn/Getting_started_with_the_web/CSS_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
- -
-

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠습니다. 어떻게 하면 글자색을 검정이나 빨갛게 할 수 있을까? 어떻게 하면 콘텐츠를 화면의 이런 저런 곳에 보이게 할 수 있을까? 어떻게 하면 배경 이미지와 색상들로 웹페이지를 꾸밀 수 있을까?

-
- -

그래서 CSS가 뭔가요?

- -

HTML와 같이 CSS는 실제로 프로그래밍 언어는 아닙니다. 마크업(markup) 언어 도 아닙니다. Style sheet 언어 입니다. HTML 문서에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 말입니다. 예를 들면, HTML 페이지에서 모든 문단 요소들을 선택하고 그 문단 요소들 안에 있는 텍스트를 빨갛게 바꾸려고 한다면 다음과 같이 CSS를 작성할 것입니다.

- -
p {
-  color: red;
-}
- -

한 번 해봅시다. 텍스트 에디터의 새 파일에 위의 CSS 3줄을 복사해 붙여넣으세요. 그다음에 styles 디렉토리에 style.css로 파일을 저장하세요.

- -

아직 여러분의 HTML 문서에 CSS를 적용하는 것이 남아 있습니다. 그렇지 않으면 CSS 스타일은 그 HTML 문서가 브라우저에 표시될 때 아무 영향도 주지 않을 것입니다. (여러분이 우리 프로젝트를 따라오지 않으셨다면, 파일 다루기와 HTML 기본을 읽고 무엇이 먼저 필요한지를 알아보시기 바랍니다.)

- -
    -
  1. index.html 파일을 열고 head의 안쪽 어딘가(즉, <head>와 </head> 태그 사이)에 아래의 코드를 붙여 넣으세요: - - 
    <link href="styles/style.css" rel="stylesheet" type="text/css">
    -
    2. -
  2. index.html을 저장하고 브라우저에서 불러오세요. 여러분은 다음과 같은 것을 보게 되실겁니다:
    3. -
- -

A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.문단의 글자가 빨간색이라면 축하드립니다! 지금 여러분은 첫번째 CSS 를 성공적으로 작성하셨습니다!

- -

CSS의 ruleset 해부

- -

위의 CSS를 좀 더 자세히 살펴 봅시다:

- -

- -

전체 구조는 rule set 라 불립니다 (하지만 종종 줄여서 "rule"이라고 합니다). 각 부분의 이름에도 주목하세요:

- -
-
선택자(selector)
-
rule set의 맨 앞에 있는 HTML 요소 이름. 이것은 꾸밀 요소(들)을 선택합니다 (이 예에서는 p 요소). 다른 요소를 꾸미기 위해서는 선택자만 바꿔주세요.
-
선언
-
color: red와 같은 단일 규칙; 여러분이 꾸미기 원하는 요소의 속성을 명시합니다.
-
속성(property)
-
주어진 HTML 요소를 꾸밀 수 있는 방법입니다. (이 예에서, color는 p 요소의 속성입니다.) CSS에서, rule 내에서 영향을 줄 속성을 선택합니다.
-
속성 값
-
속성의 오른쪽에, 콜론 뒤에, 주어진 속성을 위한 많은 가능한 결과중 하나를 선택하기 위해 속성 값을 갖습니다 (color 의 값에는 red 외에 많은 것이 있습니다).
-
- -

구문의 다른 중요한 부분들도 주목하세요:

- - - -

그러니까 여러 속성 값들을 한번에 수정하기 위해서는, 세미콜론으로 구분해서 작성해야 합니다, 이렇게요:

- -
p {
-  color: red;
-  width: 500px;
-  border: 1px solid black;
-}
- -

여러 요소 선택하기

- -

여러분은 요소의 여러 타입을 선택하고 모두에게 하나의 rule set 을 적용할 수도 있습니다. 여러 선택자는 콤마로 구분합니다. 예를 들면:

- -
p,li,h1 {
-  color: red;
-}
- -

선택자의 여러 종류

- -

선택자는 여러 종류가 있습니다. 위에서, 우리는 주어진 HTML 문서안에 주어진 타입의 모든 요소를 선택하는 요소 선택자만 보았습니다. 하지만 이것보다 더 구체적인 선택을 만들 수 있습니다. 이것은 선택자의 일반적인 종류들입니다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
선택자 이름선택하는 것예시
요소 선택자 (때때로 태그 또는 타입 선택자라 불림)특정 타입의 모든 HTML 요소.p
- <p> 를 선택
아이디 선택자특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).#my-id
- <p id="my-id">  또는  <a id="my-id"> 를 선택
클래스 선택자특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다)..my-class
- <p class="my-class"> 와 <a class="my-class"> 를 선택
속성 선택자특정 속성을 갖는 페이지의 요소.img[src]
- <img src="myimage.png"> 를 선택하지만 <img>  는 선택 안함
수도(Pseudo) 클래스 선택자특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.a:hover
- <a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
- -

탐구할 더 많은 선택자가 있습니다. 더 자세한 목록은 선택자 가이드에서 찾아보세요.

- -

글꼴과 문자

- -

지금까지 약간의 CSS 기본에 대해 살펴보았습니다, 우리의 예제가 멋있게 보이도록 style.css 파일에 더  많은 rule 과 정보를 추가해 봅시다. 우선, 글꼴과 문자가 조금 더 나아보이도록 해보죠.

- -
-

노트: "px" 가 무슨 뜻인지 설명하는 주석을 추가해 두었습니다. CSS 문서의 /* 와 */ 사이에 있는 것은 브라우저가 코드를 표현할 때 무시하는 CSS 주석입니다. 여러분이 하고 있는 것에 대한 유용한 메모를 작성하기 위한 공간입니다.

-
- -
    -
  1. 먼저, 돌아가서 여러분이 안전한 어딘가에 저장해 두었던 구글 글꼴의 결과물을 찾으세요. index.html 의 head 안 어딘가에 <link> 요소를 추가하세요 (다시 말해서, <head> 와 </head> 태그 사이 어디에나). 이런식이 될 겁니다: - - 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    -
    2. -
  2. 다음으로, style.css 파일에 이미 존재하는 rule 을 지우세요. 좋은 테스트였지만, 빨간색의 글자가 정말 좋아 보이지는 않습니다.
    3. -
  3. 아래의 코드를 해당 위치에 추가하고, 구글 폰트로부터 얻은 font-family 코드를 placeholder 줄에 덮어쓰세요. (font-family 는 여러분이 글자를 위해 사용하길 원하는 글꼴을 의미합니다.) 이 rule 은 먼저 전체 페이지의 글자 크기와 기본 글꼴을 설정합니다. (html이 전체 페이지의 부모 요소일 때, 이 안의 모든 요소는 같은 font-size 와 font-family 를 물려 받습니다): - 
    html {
-  font-size: 10px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
-  font-family: placeholder: 구글 폰트로부터 여러분이 얻은 마지막 결과가 있어야합니다.
-}
    -
    4. -
  4. 이제 HTML body 안에 문자를 포함하는 요소 h1, li 및 p 를 위해 글자 크기를 설정할 것입니다. 또한 조금 더 읽기 좋게 하기 위해 body 콘텐츠의 제목을 가운데 정렬하고 줄의 높이(line-height)와 자간(lettet-spacing)도 설정할 것입니다: - 
    h1 {
-  font-size: 60px;
-  text-align: center;
-}
-
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}
    -
    5. -
- -

px(픽셀) 값들은 여러분이 원하는대로 조정할 수 있지만, 여러분이 원하는 디자인을 얻도록, 여러분의 디자인은 이런식으로 보여야 합니다:

- -

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

- -

박스, 박스, 박스의 모든 것

- -

CSS 작성에서 여러분이 알게 될 한 가지는 많은 것들이 박스에 관한 것이라는 겁니다 — 그들의 크기, 색상, 위치 등을 설정하는 것. 여러분의 페이지에 있는 대부분의 HTML 요소들은 서로의 위에 놓여있는 박스로 생각해볼 수 있습니다.

- -

a big stack of boxes or crates sat on top of one another

- -

놀랍지 않게도, CSS 레이아웃은 박스모델 을 주 기반으로 하고 있습니다. 여러분의 페이지의 공간을 차지하고 있는 각각의 블록들은 이와 같은 속성들을 가집니다:

- - - -

three boxes sat inside one another. From outside to in they are labelled margin, border and padding

- -

여기서 이런 것도 사용합니다:

- - - -

그럼, 우리의 페이지에 더 많은 CSS를 추가해봅시다! 페이지의 아래에 이러한 새로운 rule 을 계속 추가하세요, 그리고 값을 바꾸는 실험을 통해 이것이 어떤 결과가 나타나는지 보는것을 두려워하지 마세요.

- -

페이지 색 바꾸기

- -
html {
-  background-color: #00539F;
-}
- -

이 rule 은 전체 페이지를 위한 배경색을 설정합니다. 위의 색상 코드를 여러분의 사이트를 계획할 때 선택했던 색으로 변경하세요.

- -

body 외부 정렬하기

- -
body {
-  width: 600px;
-  margin: 0 auto;
-  background-color: #FF9500;
-  padding: 0 20px 20px 20px;
-  border: 5px solid black;
-}
- -

이제는 body 요소를 위한 것입니다. 여기 적지 않은 선언들이 있습니다. 하나 하나 모두 살펴 봅시다:

- - - -

메인 페이지 제목 배치하고 꾸미기

- -
h1 {
-  margin: 0;
-  padding: 20px 0;
-  color: #00539F;
-  text-shadow: 3px 3px 1px black;
-}
- -

여러분은 바디의 상단에 끔찍한 틈이 있다는 것을 알아차리셨을 겁니다. 브라우저가 h1 요소에 (다른 것들 사이에서) 어떤 초기 스타일링을 적용하기 때문에 발생합니다, 심지어 여러분이 아무런 CSS 를 적용하지 않았을 때도요! 안좋은 아이디어로 들릴수도 있지만, 우리는 꾸며지지 않은 웹사이트일지라도 기본적인 가독성을 갖기를 원합니다. margin: 0;.설정에 의해 초기 스타일링을 덮어쓰는 것으로 그 틈을 제거할 수 있습니다.

- -

다음으로, 제목의 상단과 하단 padding 을 20 pixels로 설정하고, 제목 글자 색을 html 배경색과 같게 만들었습니다.

- -

여기서 사용했던 꽤 흥미로운 속성 하나는 text-shadow 문자로, 요소의 문자 콘텐츠에 그림자를 적용해줍니다. 네 개의 값들은 다음과 같습니다:

- - - -

다시, 여러분이 무엇을 확인해 볼 수 있는지 다른 값으로 실험을 해보세요.

- -

이미지 가운데 정렬

- -
img {
-  display: block;
-  margin: 0 auto;
-}
- -

마지막으로, 이미지를 더 나아보이도록 가운데로 둘 것입니다. 전에 body 에서 했듯이 다시 margin: 0 auto 트릭을 사용해 볼 수 있지만, 무언가 더 해야할 필요가 있습니다. body 요소는 block level 입니다. 이것은 페이지의 공간을 차지하고, margin 과 여기에 적용된 다른 여백값을 가질 수 있다는 것을 의미합니다. 반면에 이미지는 inline 요소 입니다. 이것은 그렇지 못함을 의미합니다. 따라서 이미지에 margin 을 적용하기 위해서는,  display: block; 을 사용해 이미지에 block-level 성질을 주어야 합니다.

- -
-

노트: 위의 지침에서는 body에 설정된 너비(600 픽셀) 보다 작은 이미지를 사용한다고 가정합니다. 이미지가 더 크면 body가 넘쳐 페이지의 나머지 부분으로 유출됩니다. 이 문제를 해결하려면 1) 그래픽 편집기를 사용하여 이미지의 너비를 줄이거나 2) 더 작은 값(예: 400px)  으로 <img> 요소에 width 속성을 설정하고 CSS를 사용하여 이미지 크기를 조정할 수 있습니다.

-
- -
-

노트: 아직 display: block; 과 block-level/inline 차이를 이해하지 못하였더라도 걱정하시마세요. CSS 를 더 깊게 공부하면 이해하실 수 있을것입니다. display 의 여러 값들에 대한 더 많은 정보는 display 참조 페이지에서 찾아보세요.

-
- -

마무리

- -

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 되실 겁니다. (여기서 확인하실 수도 있습니다):

- -

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.

- -

혹시 막히셨다면, 여러분의 코드와 Github에 있는 우리의 예제 코드와 항상 비교해보세요.

- -

여기서, 우리는 CSS의 겉만 살짝 맛봤습니다. 더 많은 것이 알고 싶으시면 CSS 배우기 페이지로 가보세요.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}

- -

이번 과목에서는

- - diff --git a/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ko/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..1ed38e8cde --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/dealing_with_files/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 +--- +
{{LearnSidebar}}
+ +
{{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")}}
+ +
+

웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.

+
+ +

웹사이트는 컴퓨터의 어디에 두어야 할까요?

+ +

만약 여러분이 로컬컴퓨터에서 웹사이트에 대해 작업한다면, 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 여러분이 원하는 곳이라면 어디에나 둘 수 있지만, 아마도 쉽게 찾을 수 있는 곳에 두어야 할 것입니다. 예를들면 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 루트(root)가 될 것입니다.

+ +
    +
  1. 여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, web-projects (또는 비슷한 이름의 폴더) 라고 불리는 새 폴더를 생성하세요. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.
    2. +
  2. 이 첫 번째 폴더에, 또다른 폴더를 하나 만들고 첫 번째 웹사이트를 저장하도록 합시다. 그 폴더를 test-site (또는 무언가 더 상상력을 발휘한 다른 이름도 좋습니다) 라고 부릅시다.
    3. +
+ +

포장과 공백에 대한 여담

+ +

이 글을 통해 알게 되겠지만, 폴더와 파일의 이름을 지을 때 공백 없이 영문 소문자로 짓기를 바랍니다. 이것은 다음과 같은 이유 때문입니다.

+ +
    +
  1. 많은 컴퓨터들 -특히 웹 서버- 은 영문 대소문자를 구분합니다. 그래서 예를 들면, 웹사이트에 test-site/MyImage.jpg라는 이미지를 저장해 두었는데 여러분이 다른 파일에서 test-site/myimage.jpg라는 이미지를 호출하는 것은 작동하지 않을 것입니다.
    2. +
  2. 브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 또한, 밑줄문자를 사용하기 보다는 대시(하이픈)으로 단어를 구분하는 것이 훨씬 더 좋습니다.: my-file.html vs. my_file.html.
    3. +
+ +

간단히 말하자면 여러분은 파일 이름을 지을 때 붙임표(hyphen)를 사용해야 합니다. 구글 검색 엔진은 하이픈를 단어 구분자로 취급합니다. 그러나 밑줄문자는 단어 구분자로 취급하지 않습니다. 이러한 이유로, 여러분이 폴더와 파일 이름을 지을 때에는 공백이 없는 영문 소문자와 대시로 구분된 단어로 작성하는 습관을 들이는 것이 제일 좋습니다. 적어도 여러분이 무엇을 하는지 알 때까지는요. 그렇게하면 나중에 발생할 문제를 줄일 수 있습니다.

+ +

웹사이트는 어떤 구조를 가져야 할까요?

+ +

다음으로, 우리의 테스트 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트 프로젝트를 만들든지간에 가장 공통으로 가지게 되는 것들은 index HTML 파일과 이미지, 스타일 파일(CSS 파일), 스크립트 파일들을 포함하고 있는 폴더입니다. 이것들을 이제 생성해 봅시다.

+ +
    +
  1. index.html: 이 파일은 보통은 홈페이지의 내용을 가지고 있습니다. 다시 말하면, 처음 웹사이트에 방문하면 사람들이 볼 수 있는 텍스트나 이미지이 파일 같은 것입니다. 텍스트 에디터를 사용하여, index.html 라는 새 파일을 생성하고 test-site 폴더 안에 저장하세요.
    2. +
  2. images 폴더: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함하고 있습니다. test-site 폴더 안에, images 라는 폴더를 생성하세요.
    3. +
  3. styles 폴더: 이 폴더는 여러분의 내용을 보기 좋게 꾸며주기(예를 들어, 문자와 배경색을 세팅하는 것) 위한 CSS 코드를 포함할 것입니다. test-site 폴더 안에, styles 라는 폴더를 생성하세요.
    4. +
  4. scripts 폴더: 이 폴더는 모든 JavaScript 코드를 포함하고 있는데, 이 코드는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용될 것입니다.예를들면, 클릭할 때 자료를 불러오는 버튼). test-site 폴더 안에, scripts 라는 폴더를 생성하세요.
    5. +
+ +
+

참고: Windows 컴퓨터에서는 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 알려진 확장자 자동 숨김이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, 폴더 옵션...에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 인터넷에서 검색을 해보세요!

+
+ +

파일 경로

+ +

파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다 — 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 index.html파일에 약간의HTML을 작성할 것입니다, 그리고 "웹사이트의 외관은 어떻게 할까요?" 라는 글에서 여러분이 선택한 이미지를 보여주게 할 것입니다.

+ +
    +
  1. images폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.
    2. +
  2. index.html 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무슨 뜻인지 걱정할 필요가 없습니다 — 본 시리즈에서 나중에 이 구조에 대해 더 자세히 살펴볼 겁니다. + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="" alt="My test image">
+  </body>
+</html>
    +
    3. +
  3. <img src="" alt="My test image">라는 줄은 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는 이미지가 어디에 있는지에 대해 HTML에게 말해줄 필요가 있습니다. 이미지는 images라는 폴더 안에 있는데, 이것은 index.html 파일과 같은 폴더에 있습니다. index.html파일에서 우리 이미지 파일로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 images/your-image-filename입니다. 예를 들어, 우리 이미지가 firefox-icon.png라면, 파일 경로는 images/firefox-icon.png가 됩니다.
    4. +
  4. 여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.
    5. +
  5. HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

파일 경로를 위한 일반적인 규칙들:

+ + + +

지금으로선, 이것이 여러분이 알아야 할 전부 입니다.

+ +
+

노트: 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다. 예시: C:\windows. 이것은 HTML에서 문제가 되지않습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도 전방향 슬래시(/)를 코드에 사용해야 합니다.

+
+ +

또 무엇을 더 해야할까요?

+ +

현재로서는 이것이 전부입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:

+ +

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

+ +

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

+ + + +

In this module

+ + diff --git a/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ko/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..009b22ec8f --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/how_the_web_works/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 +--- +

{{LearnSidebar}}

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +
+

'웹의 동작 방식'은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.

+
+ +

이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.

+ +

클라이언트와 서버

+ +

웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

+ +

+ + + +

도구 상자의 다른 부분들

+ +

위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.

+ +

지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.

+ +

+ +

클라이언트와 서버에 덧붙여서 우리는 다음 내용들도 알아볼 필요가 있습니다.

+ + + +

그래서 정확히 무슨일이 발생할까요?

+ +

여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):

+ +
    +
  1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
    2. +
  2. 그 다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메세지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.
    3. +
  3. 이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
    4. +
  4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)
    5. +
+ +

DNS 설명

+ +

실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기 위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 63.245.217.105 같은 숫자 덩어리입니다.

+ +

이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그러나 기억하기에 쉽지는 않죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다. 

+ +

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 IP Checker와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.

+ +

패킷 설명

+ +

앞서 우리는 서버에서 클라이언트로 전송되는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. 이게 무엇을 의미하는 걸까요? 기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드 할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.

+ +

여기도 보세요

+ + + +

크레딧

+ +

거리 사진: Street composing, by Kevin D.

+ +

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

+ +

In this module

+ + diff --git a/files/ko/learn/getting_started_with_the_web/html_basics/index.html b/files/ko/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..530f3fe11f --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/html_basics/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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다.

+
+ +

그래서 HTML은 무엇일까요?

+ +

HTML 은 프로그래밍 언어가 아닙니다;  컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소({{Glossary("element", "elements")}})로 이루어져 있습니다. {{Glossary("tag", "tags")}}로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:

+ +
내 고양이는 고약해
+
+ +

그 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로해서 그것이 하나의 문단임을 명시할 수 있습니다:

+ +
<p>내 고양이는 고약해</p>
+ +

HTML 요소 분석

+ +

이 문단 요소에 대해 조금 더 탐구해봅시다.

+ +

+ +

이 요소의 주요 부분은 이렇습니다:

+ +
    +
  1. 여는 태그(opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다 — 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
    2. +
  2. 닫는 태그(closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
    3. +
  3. 컨텐츠(content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
    4. +
  4. 요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.
    5. +
+ +

요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다:

+ +

+ +

속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.

+ +

속성이 항상 가져야 하는 것:

+ +
    +
  1. 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
    2. +
  2. 속성 이름 뒤에는 등호(=)가 와야 합니다.
    3. +
  3. 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
    4. +
+ +

요소 중첩

+ +

여러분은 요소를 다른 요소의 안에 놓을 수 있습니다 — 이것을 중첩(nesting)이라고 부릅니다. 우리 고양이는 아주 고약하다라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는{{htmlelement("strong")}} 요소로 "아주"를 감싸면 됩니다:

+ +
<p>내 고양이는 <strong>아주</strong> 고약해.</p>
+ +

하지만 요소가 적절히 중첩되었는지 확인할 필요가 있습니다: 위의 예제에서 우리는 <p> 요소를 먼저 열었고, 그 다음 strong을 열었기 때문에 strong 요소를 먼저 닫고, 다음으로 p를 닫아야 합니다. 다음은 잘못된 예제 입니다:

+ +
<p>내 고양이는 <strong>아주 고약해.</p></strong>
+ +

요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 이렇게 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 해서 화면에 보여주겠지만, 여러분이 의도한 것과 다르게 보여질 수 있습니다. 그러니까 이렇게 하지 마세요!

+ +

빈 요소

+ +

어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 빈 요소(empty elements)라고 합니다. {{htmlelement("img")}} 요소는 이미 우리 HTML 코드에 있습니다.

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

이 요소는 두 개의 속성을 포함하고 있으나 닫는 </img> 태그가 없습니다. 이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.

+ +

HTML 문서 해부

+ +

각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. index.html 예제(파일들 다루기 편에서 처음 봤던)에 넣은 코드를 다시 살펴봅시다:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="My test image">
+  </body>
+</html>
+ +

살펴볼 것들:

+ + + +

이미지

+ +

{{htmlelement("img")}} 요소를 다시 살펴보도록 합시다:

+ +
<img src="images/firefox-icon.png" alt="My test image">
+ +

앞에서 설명한 것처럼 이 요소는 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 src (source) 속성을 통해 이러한 일을 합니다.

+ +

 alt (alternative) 속성도 존재합니다. — 이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있습니다.:

+ +
    +
  1. 시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.
    2. +
  2. 무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, src 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.
    3. +
+ +

+ +

alt 텍스트에서 핵심 단어는 "설명적인 문자(descriptive text)" 입니다. 여러분이 작성하는 alt 텍스트는 독자에게 이미지가 전달하는 어떤 것에 대해 좋은 아이디어를 가지기에 충분한 정보를 제공해야 합니다. 이 예제에서 "My test image"라는 현재의 텍스트는 전혀 좋지 않습니다. Firefox 로고에 대해서는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우"가 훨씬 나은 대안이될 수 있습니다.

+ +

지금 여러분의 이미지를 위한 더 나은 alt 텍스트를 만들어보세요.

+ +
+

노트: 접근성에 대한 더 많은 것은 MDN의 페이지 접근성 시작하기에서 찾아보세요.

+
+ +

문자 나타내기

+ +

여기에서는 문자를 나타내기 위해 사용하는 몇 개의 기본적인 HTML 엘리먼트를 다룰 것입니다.

+ +

제목

+ +

제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, {{htmlelement("h1")}}–{{htmlelement("h6")}} 여러분은 아마 3-4 만을 주로 사용하게 될겁니다:

+ +
<h1>My main title</h1>
+<h2>My top level heading</h2>
+<h3>My subheading</h3>
+<h4>My sub-subheading</h4>
+ +

지금 한번 해보세요, 여러분의 HTML 페이지에 있는 {{htmlelement("img")}} 요소 위에 적당한 제목을 추가합시다.

+ +

문단

+ +

위에서 설명했듯이, {{htmlelement("p")}} 요소는 문자의 문단을 포함하기 위한 것입니다; 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다:

+ +
<p>This is a single paragraph</p>
+ +

간단한 문자 (웹사이트의 외관은 어떻게 할까요? 에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, <img> 요소 바로 아래 둡시다.

+ +

목록

+ +

많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.

+ +
    +
  1. 순서 없는 목록은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다. {{htmlelement("ul")}} 요소로 둘러 쌓여 있습니다.
    2. +
  2. 순서 있는 리스트는 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다. {{htmlelement("ol")}} 요소로 둘러 쌓여 있습니다.
    3. +
+ +

목록의 각 항목은 {{htmlelement("li")}} (목록 항목) 요소 안에 놓여야 합니다.

+ +

그러니까 예를 들면, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면:

+ +
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
+ +

이렇게 해볼 수 있습니다:

+ +
<p>At Mozilla, we’re a global community of</p>
+
+<ul>
+  <li>technologists</li>
+  <li>thinkers</li>
+  <li>builders</li>
+</ul>
+
+<p>working together ... </p>
+ +

여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.

+ +

연결

+ +

연결은 아주 중요합니다 — 이것은 웹을 웹으로 만들어줍니다. 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다 — {{htmlelement("a")}} — a 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다:

+ +
    +
  1. 어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.
    2. +
  2. 문자를 <a> 요소로 감쌉니다, 이렇게요: + 
    <a>Mozilla Manifesto</a>
    +
    3. +
  3. <a> 요소에 href 속성을 줍니다, 이렇게요: + 
    <a href="">Mozilla Manifesto</a>
    +
    4. +
  4. 이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.: + 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    +
    5. +
+ +

만약 웹 주소의 시작부분에 프로토콜이라 불리는 https:// 또는 http:// 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.

+ +
+

처음에는 href 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 hypertext reference(하이퍼 텍스트 참조)를 나타낸다는 것을 기억하세요.

+
+ +

아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.

+ +

마무리

+ +

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 될 겁니다. (여기서도  볼 수 있습니다):
+
+ A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

+ +

잘 안 된다면, 여러분의 코드를 Github에 있는 예제 코드를 비교해 볼 수 있습니다. 

+ +

여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 알아보기 위해, HTML 배우기 페이지로 가보세요.

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

+ + + +

이번 모듈에서는

+ + diff --git "a/files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" "b/files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" deleted file mode 100644 index 530f3fe11f..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/html_\352\270\260\353\263\270/index.html" +++ /dev/null @@ -1,234 +0,0 @@ ---- -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 ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
- -
-

HTML(Hypertext Markup Language)은 웹 페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다. 예를 들면, 컨텐트는 여러 개의 문단, 글 머리 목록이 구조화된 것이거나 사진이나 데이터 테이블일 수도 있습니다. 제목과 같이 이 글은 HTML과 그 기능에 대한 기본적인 이해를 제공할 것입니다.

-
- -

그래서 HTML은 무엇일까요?

- -

HTML 은 프로그래밍 언어가 아닙니다;  컨텐츠의 구조를 정의하는 마크업 언어입니다. HTML은 컨텐츠의 서로 다른 부분들을 씌우거나(wrap) 감싸서(enclose) 다른 형식으로 보이게하거나 특정한 방식으로 동작하도록 하는 일련의 요소({{Glossary("element", "elements")}})로 이루어져 있습니다. {{Glossary("tag", "tags")}}로 감싸는 것으로 단어나 이미지를 다른 어딘가로 하이퍼링크(hyperlink)하거나 단어들을 이탤릭체로 표시하고 글씨체를 크게 또는 작게 만드는 등의 일을 할 수 있습니다. 예를 들어, 다음과 같은 컨텐츠에 대해:

- -
내 고양이는 고약해
-
- -

그 한 줄의 문장이 독립적인 구문이길 원한다면, 문단 태그(paragraph tags)로 둘러쌈으로해서 그것이 하나의 문단임을 명시할 수 있습니다:

- -
<p>내 고양이는 고약해</p>
- -

HTML 요소 분석

- -

이 문단 요소에 대해 조금 더 탐구해봅시다.

- -

- -

이 요소의 주요 부분은 이렇습니다:

- -
    -
  1. 여는 태그(opening tag): 이것은 요소의 이름으로 구성되고 (여기에서는 p), 여닫는 꺾쇠괄호로 감싸집니다. 이것은 요소가 시작되는 곳, 또는 효과를 시작하는 곳임을 나타냅니다 — 이 예제에서는 문단이 시작되는 위치를 나타냅니다.
    2. -
  2. 닫는 태그(closing tag): 이것은 여는 태그와 같지만, 요소의 이름 앞에 전방향 슬래시가 포함된다는 점이 다릅니다. 이것은 요소의 끝을 나타냅니다 — 이 예제에서는 문단이 끝나는 위치를 나타냅니다. 초보자가 가장 흔히 범하는 오류 중 하나가 닫는 태그를 쓰지 않는 것으로 이상한 결과가 표시됩니다.
    3. -
  3. 컨텐츠(content): 이것은 요소의 내용(content)으로 이 예제에서는 그냥 텍스트입니다.
    4. -
  4. 요소(element): 요소는 여는 태그와 닫는 태그, 그리고 컨텐츠로 이루어집니다.
    5. -
- -

요소는 속성도 가질 수 있는데, 다음과 같이 사용합니다:

- -

- -

속성은 실제 컨텐츠로 표시되길 원하지 않는 추가적인 정보를 담고 있습니다. 이 예제에서, class 속성을 이용해 나중에 해당 요소를 특정해 스타일이나 다른 정보를 설정할 때 사용할 수 있는 식별자를 지정할 수 있습니다.

- -

속성이 항상 가져야 하는 것:

- -
    -
  1. 요소 이름 (또는 요소가 하나 이상 속성을 이미 가지고 있다면 이전 속성)과 속성 사이에 공백이 있어야 합니다.
    2. -
  2. 속성 이름 뒤에는 등호(=)가 와야 합니다.
    3. -
  3. 속성 값의 앞 뒤에 열고 닫는 인용부호(" 또는 ')가 있어야 합니다.
    4. -
- -

요소 중첩

- -

여러분은 요소를 다른 요소의 안에 놓을 수 있습니다 — 이것을 중첩(nesting)이라고 부릅니다. 우리 고양이는 아주 고약하다라고 표시하길 원한다면, 단어를 강조하는 용도로 사용하는{{htmlelement("strong")}} 요소로 "아주"를 감싸면 됩니다:

- -
<p>내 고양이는 <strong>아주</strong> 고약해.</p>
- -

하지만 요소가 적절히 중첩되었는지 확인할 필요가 있습니다: 위의 예제에서 우리는 <p> 요소를 먼저 열었고, 그 다음 strong을 열었기 때문에 strong 요소를 먼저 닫고, 다음으로 p를 닫아야 합니다. 다음은 잘못된 예제 입니다:

- -
<p>내 고양이는 <strong>아주 고약해.</p></strong>
- -

요소들이 적절히 열고 닫혀야 서로가 깔끔하게 안쪽이나 바깥쪽에 있게 됩니다. 만약 이렇게 겹치게 되면, 웹 브라우저는 여러분이 무엇을 표현하려고 했었는지 추측을 해서 화면에 보여주겠지만, 여러분이 의도한 것과 다르게 보여질 수 있습니다. 그러니까 이렇게 하지 마세요!

- -

빈 요소

- -

어떤 요소들은 내용을 갖지 않습니다, 그리고 이것을 빈 요소(empty elements)라고 합니다. {{htmlelement("img")}} 요소는 이미 우리 HTML 코드에 있습니다.

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

이 요소는 두 개의 속성을 포함하고 있으나 닫는 </img> 태그가 없습니다. 이미지 요소는 효과를 주기 위해 컨텐츠를 감싸지 않기 때문입니다. 이 요소의 목적은 HTML 페이지에서 이미지가 나타날 위치에 이미지를 끼워 넣는 것입니다.

- -

HTML 문서 해부

- -

각 HTML 요소의 기본적인 내용들은 살펴봤지만, 그것만으로는 별로 유용하지 않습니다. 이제 각 요소들이 어떻게 전체 HTML 페이지를 구성하는지 살펴볼 차례입니다. index.html 예제(파일들 다루기 편에서 처음 봤던)에 넣은 코드를 다시 살펴봅시다:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="images/firefox-icon.png" alt="My test image">
-  </body>
-</html>
- -

살펴볼 것들:

- - - -

이미지

- -

{{htmlelement("img")}} 요소를 다시 살펴보도록 합시다:

- -
<img src="images/firefox-icon.png" alt="My test image">
- -

앞에서 설명한 것처럼 이 요소는 이미지가 나타나야 할 위치에 이미지를 끼워 넣습니다. 이미지 파일의 경로를 포함하는 src (source) 속성을 통해 이러한 일을 합니다.

- -

 alt (alternative) 속성도 존재합니다. — 이 속성에는 다음과 같은 이유로 이미지를 볼 수 없는 사용자들을 위한 설명문(descriptive text)을 지정할 수 있습니다.:

- -
    -
  1. 시각 장애자인 경우. 시각 장애가 심한 사용자들은 alt 텍스트(대체 텍스트)를 읽어주는 스크린 리더라는 도구를 자주 사용합니다.
    2. -
  2. 무언가 잘못되어서 이미지를 표시할 수 없는 경우. 예를 들면, src 속성 안의 경로를 일부러 틀리게 변경해보세요. 저장한 후에 페이지를 다시 열면, 이미지가 표시되어야할 위치에 다음과 같은 것을 보게 될 것입니다.
    3. -
- -

- -

alt 텍스트에서 핵심 단어는 "설명적인 문자(descriptive text)" 입니다. 여러분이 작성하는 alt 텍스트는 독자에게 이미지가 전달하는 어떤 것에 대해 좋은 아이디어를 가지기에 충분한 정보를 제공해야 합니다. 이 예제에서 "My test image"라는 현재의 텍스트는 전혀 좋지 않습니다. Firefox 로고에 대해서는 "파이어폭스 로고: 지구를 둘러싼 타오르는 여우"가 훨씬 나은 대안이될 수 있습니다.

- -

지금 여러분의 이미지를 위한 더 나은 alt 텍스트를 만들어보세요.

- -
-

노트: 접근성에 대한 더 많은 것은 MDN의 페이지 접근성 시작하기에서 찾아보세요.

-
- -

문자 나타내기

- -

여기에서는 문자를 나타내기 위해 사용하는 몇 개의 기본적인 HTML 엘리먼트를 다룰 것입니다.

- -

제목

- -

제목 요소는 여러분이 내용의 특정 부분이 제목 또는 내용의 하위 제목임을 구체화 할 수 있게 해줍니다. 책에 중심 제목이 있고 그 다음 각각의 장에 제목을 가지고, 그리고 그 안에 부제가 있는 것과 같은 방식으로 HTML 문서도 제목들을 갖습니다. HTML 은 여섯 단계의 제목을 갖고, {{htmlelement("h1")}}–{{htmlelement("h6")}} 여러분은 아마 3-4 만을 주로 사용하게 될겁니다:

- -
<h1>My main title</h1>
-<h2>My top level heading</h2>
-<h3>My subheading</h3>
-<h4>My sub-subheading</h4>
- -

지금 한번 해보세요, 여러분의 HTML 페이지에 있는 {{htmlelement("img")}} 요소 위에 적당한 제목을 추가합시다.

- -

문단

- -

위에서 설명했듯이, {{htmlelement("p")}} 요소는 문자의 문단을 포함하기 위한 것입니다; 일반적인 문자 내용을 나타낼 때 많이 사용하게 될 것입니다:

- -
<p>This is a single paragraph</p>
- -

간단한 문자 (웹사이트의 외관은 어떻게 할까요? 에서 보셨을겁니다)를 하나 또는 몇 개의 문단에 추가하고, <img> 요소 바로 아래 둡시다.

- -

목록

- -

많은 웹의 내용은 목록이기 때문에, HTML은 이것을 위한 특별한 요소를 가지고 있습니다. 목록을 나타내는 것은 항상 최소 두 개의 요소로 구성됩니다. 가장 일반적인 목록의 종류는 순서가 있는 것과 순서 없는 것이 있습니다.

- -
    -
  1. 순서 없는 목록은 쇼핑 목록과 같이 항목의 순서에 관계가 없는 목록을 위한 것입니다. {{htmlelement("ul")}} 요소로 둘러 쌓여 있습니다.
    2. -
  2. 순서 있는 리스트는 조리법처럼 항목의 순서가 중요한 목록을 위한 것입니다. {{htmlelement("ol")}} 요소로 둘러 쌓여 있습니다.
    3. -
- -

목록의 각 항목은 {{htmlelement("li")}} (목록 항목) 요소 안에 놓여야 합니다.

- -

그러니까 예를 들면, 만약 아래 문단의 한 부분을 목록으로 분리하길 원한다면:

- -
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
- -

이렇게 해볼 수 있습니다:

- -
<p>At Mozilla, we’re a global community of</p>
-
-<ul>
-  <li>technologists</li>
-  <li>thinkers</li>
-  <li>builders</li>
-</ul>
-
-<p>working together ... </p>
- -

여러분의 예시 페이지에서 순서 있는 목록과 순서 없는 목록을 추가해보세요.

- -

연결

- -

연결은 아주 중요합니다 — 이것은 웹을 웹으로 만들어줍니다. 연결을 하기 위해, 간단한 요소를 사용할 필요가 있습니다 — {{htmlelement("a")}} — a 는 "anchor" 의 약자입니다. 문장 안의 어떤 단어를 링크로 만들기 위해, 아래의 순서를 따르시면 됩니다:

- -
    -
  1. 어떤 단어를 선택하세요. "Mozilla Manifesto" 를 선택하겠습니다.
    2. -
  2. 문자를 <a> 요소로 감쌉니다, 이렇게요: - 
    <a>Mozilla Manifesto</a>
    -
    3. -
  3. <a> 요소에 href 속성을 줍니다, 이렇게요: - 
    <a href="">Mozilla Manifesto</a>
    -
    4. -
  4. 이 속성의 값에 여러분이 연결하길 원하는 웹 주소를 채웁니다.: - 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
    -
    5. -
- -

만약 웹 주소의 시작부분에 프로토콜이라 불리는 https:// 또는 http:// 부분을 빼먹으셨다면 예상하지 못한 결과를 얻을 것입니다. 이렇게 링크를 만든 후에, 원하는 곳으로 이동하는지 클릭해보세요.

- -
-

처음에는 href 라는 속성 이름이 꽤 어렵게 보일수도 있습니다. 만약 기억하기가 어려우시다면, 이것은 hypertext reference(하이퍼 텍스트 참조)를 나타낸다는 것을 기억하세요.

-
- -

아직 여러분의 페이지에 링크를 추가하지 않으셨다면, 지금 추가해보세요.

- -

마무리

- -

이 글의 모든 설명을 따라오셨다면, 이와 같이 보이는 페이지가 될 겁니다. (여기서도  볼 수 있습니다):
-
- A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text

- -

잘 안 된다면, 여러분의 코드를 Github에 있는 예제 코드를 비교해 볼 수 있습니다. 

- -

여기서, 우리는 HTML의 겉을 살짝 맛봤습니다. 더 알아보기 위해, HTML 배우기 페이지로 가보세요.

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}

- - - -

이번 모듈에서는

- - diff --git a/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ko/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..58ec16a8d9 --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/installing_basic_software/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 +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
+ +
+

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

+
+ +

전문가들이 사용하는 도구는 뭔가요?

+ + + +

지금 당장 필요한 도구는 뭔가요?

+ +

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

+ +

텍스트 편집기 설치하기

+ +

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

+ +

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

+ +

최신 웹 브라우저 설치하기

+ +

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

+ + + +

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

+ +

로컬 웹 서버 설치하기

+ +

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!

+ +

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

+ +

이번 과정에서는

+ + diff --git a/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ko/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..df2016e530 --- /dev/null +++ b/files/ko/learn/getting_started_with_the_web/publishing_your_website/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 +--- +

{{LearnSidebar}}

+ +

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

+ +
+

일단 여러분의 웹사이트를 만들기 위한 코드 작성과 파일 구성을 끝내셨다면, 이 모든 것을 온라인에 올려 사람들이 찾을 수 있게 할 필요가 있습니다. 이 글은 어떻게 최소한의 노력으로 간단한 예시 코드를 온라인에서 얻을 수 있는지 보여줍니다.

+
+ +

옵션들은 뭐가 있나요?

+ +

웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.

+ +

호스팅과 도메인 이름 얻기

+ +

만약 여러분이 출판된 웹사이트에 대한 모든 컨트롤를 원한다면, 이것들을 구매해야 할 것입니다:

+ + + +

많은 전문적인 웹사이트들은 이 방법으로 온라인에 진출합니다.

+ +

게다가, 여러분은 서버로 웹사이트 파일들을 실제로 전송하기 위한 파일 전송 프로토콜 (FTP) 프로그램 (자세한 내용은 얼마나 드나요: 소프트웨어 에서 확인하세요) 이 필요할 것입니다. FTP 프로그램은 아주 다양합니다, 하지만 일반적으로 호스팅 회사에 의해 제공된 정보 (예로 사용자 이름, 비밀번호, 호스트 이름) 를 사용해 여러분의 웹서버에 로그인을 해야 합니다. 그러면 프로그램은 여러분의 로컬 파일들과 웹 서버의 파일을 두 창에서 보여주므로, 그것들을 외부로 전송하거나 다시 돌려 놓을 수 있습니다:

+ +

+ +

호스팅과 도메인을 찾는 팁

+ + + +

GitHub 또는 Dropbox 같은 온라인 도구 사용하기

+ +

어떤 도구들은 여러분이 여러분의 웹사이트를 온라인에 출판할 수 있게 해줍니다:

+ + + +

대부분의 호스팅과 다르게, 많은 도구들은 일반적으로 무료이지만, 여러분은 제한된 기능들만 사용할 수 있습니다.

+ +

Thimble 같은 웹-기반 IDE 사용하기

+ +

HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로 만들어 질 때 코드의 결과를 보여주는 웹사이트 개발 환경을 대행하는 웹 앱은 많습니다 — 모든것이 한 브라우저 탭 안에 있습니다! 일반적으로 이러한 도구들을 이야기하기는 매우 쉽고, 배우기에 최고이고, 무료이고 (기본적 기능에대해), 그들은 여러분의 특정 웹 주소에 있는 만들어진 페이지를 관리합니다. 하지만, 그 기본적인 기능들은 매우 한정적이고, 그 앱들은 보통 자원들 (이미지 같은) 을 위한 관리 공간을 제공하지 않습니다.

+ +

여기 몇 개의 예시들을 실행해보시고, 어떤것이 제일 좋은지 확인해보세요:

+ + + +

+ +

GitHub 를 통한 출판

+ +

이제 어떻게 GitHub 페이지를 통해 여러분의 사이트를 출판할 수 있는지 알아보도록 합시다. 이게 여러분의 사이트를 출판하는데 유일한 방법이거나 최고의 방법이라고 이야기 하지는 않을 것입니다, 하지만 이것은 무료이고, 꽤 간단하고, 앞으로 유용할 여러분이 알게 될 몇 가지 새로운 기술도 다룰 것입니다.

+ +

기본 설치

+ +
    +
  1. 먼저, 여러분의 장치에 Git 을 설치 하세요. 이것은 GitHub 이 위에서 작동하게 되는 기초가 되는 버전 컨트롤 시스템 소프트웨어 입니다.
    2. +
  2. 다음으로, GitHub 계정을 위해 가입하세요. 간단하고 쉽습니다.
    3. +
  3. 가입을 하셨다면, github.com 에 여러분의 유저 이름과 암호로 로그인하세요.
    4. +
  4. 그리고나서, 여러분의 파일들이 들어가게될 새로운 repo 를 생성해야 합니다. GitHub 홈페이지의 오른쪽 상단에 있는 플러스 (+) 를 클릭하고, New Repository 를 선택하세요.
    5. +
  5. 이 페이지에서, Repository name 박스 안에, username.github.io 를 입력하세요, username 가 있는 곳이 여러분의 유저 이름입니다. 그러니까 예를 들어, 우리 친구 bobsmith 는 bobsmith.github.io 를 입력할 것입니다.
    6. +
  6. Create repository 를 클릭하세요. 다음과 같은 페이지로 이동하실 겁니다:
    7. +
+ +

GitHub 에 파일 올리기

+ +

이것은 GitHub 에 있는 우리의 repository 를 놓기 위해 사용해볼 커맨드 라인입니다. 커맨드 라인은 파일을 생성하거나 프로그램을 실행하는 것 같은 일을 하기 위해 유저 인터페이스 안에서 클릭을 하는 것 대신 명령어를 입력하는 창입니다. 이렇게 생긴 것입니다:

+ +

+ +
+

노트: 만약 커맨드라인이 불편하시다면, 같은 일을 하기 위해서 Git graphical user interface 를 사용하는것도 고려해 볼 수 있습니다.

+
+ +

모든 운영 체제는 커맨드 라인 도구를 갖습니다:

+ + + +

처음에는 좀 두려우실 수 있지만, 걱정하지마세요 — 기본적인 것들은 금방 익히실 수 있을 것입니다. 무언가를 하기 위해선 명령어를 입력하고 엔터를 누르는 것으로 컴퓨터에게 알려줘야합니다.

+ +
    +
  1. 커맨드 라인을 여러분의 test-site 폴더로 향하게 합니다 (또는 여러분의 웹사이트가 포함된 어디든지). 그러기 위해선, cd 명령을 사용합니다 (말하자면 "change directory"). 여기 만약 test-site 폴더 안에 여러분의 웹사이트를 놓으셨다면 여러분이 입력해야 하는 것이 있습니다: + + 
    cd Desktop/test-site
    +
    2. +
  2. 커맨드 라인이 여러분의 웹사이트 폴더 안을 가리킬 때, 그 폴더를 git repository 가 되도록 git 도구에게 알려주는 다음의 명령을 입력하세요: + 
    git init
    +
    3. +
  3. 다음으로, GitHub 사이트로 돌아가세요. 현재 페이지에서, you are interested in the section …or push an existing repository from the command line. 이 구역에 나열된 두 코드를 보게 되실 겁니다. 첫 번째 줄의 코드 전체를 복사하고, 커맨드 라인에 붙여넣은 다음, 엔터를 누르세요. 그 명령은 이렇게 보일 것입니다: + 
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
    +
    4. +
  4. 다음으로, 다음 두 명령어를 입력하고, 각 명령마다 엔터를 누릅니다. 이것은 GitHub 에 코드를 올릴 준비를 하는 것이고, Git 에게 그 파일들을 관리하도록 요청합니다. + 
    git add --all
+git commit -m "adding my files to my repository"
    +
    5. +
  5. 마지막으로, GitHub 웹 페이지로 가서 3단계에서 봤던 두 개의 명령어중 두 번째 줄을 터미널에 입력하는 것으로 코드를 푸시합니다: + 
    git push -u origin master
    +
    6. +
  6. 이제 새 브라우저 탭 (username.github.io) 에서 여러분의 GitHub 페이지의 웹 주소로 갈 때, 여러분의 사이트를 온라인에서 보실 수 있습니다! 친구들에게 메일을 보내서 여러분의 실력을 뽐내보세요.
    7. +
+ +
+

노트: 만약 막히셨다면, GitHub Pages 홈페이지 또한 아주 도움이 될 것입니다.

+
+ +

더 많은 GitHub 이해

+ +

만약 여러분이 테스트 사이트에 더 많은 변화를 주고 GitHub에 그것들을 업로드하길 원하신다면, 이전에 하신것 처럼 간단하게 파일에 변화를 주면 됩니다. 그리고나서, GitHub에 변화를 푸시하기 위해 다음 명령어를 입력 (각 명령 다음에 엔터누르기) 해야 합니다:

+ +
git add --all
+git commit -m 'another commit'
+git push
+ +

another commit 대신에 여러분이 막 변경했던 것을 설명할 수 있는 더 적합한 메시지로 바꾸세요.

+ +

우리는 Git 의 겉을 살짝 건드려 보았습니다. 더 많이 배우시려면, GitHub Help 사이트 에서 시작하세요.

+ +

마무리

+ +

이 지점에서, 특정 웹 주소에서 여러분의 예시 웹사이트를 사용하실 수 있을 것입니다. 수고하셨습니다!

+ +

+ +

 

+ +

더 읽을거리

+ + + +

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

+ +

 

+ +

In this module

+ + + +

 

+ +

 

diff --git "a/files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" "b/files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" deleted file mode 100644 index 58ec16a8d9..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\352\270\260\353\263\270_\354\206\214\355\224\204\355\212\270\354\233\250\354\226\264_\354\204\244\354\271\230\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,75 +0,0 @@ ---- -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 ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
- -
-

기본 소프트웨어 설치하기에서는 간단한 웹 개발을 하기 위해 어떤 도구가 필요하고, 어떻게 설치할 수 있는지 보여드립니다.

-
- -

전문가들이 사용하는 도구는 뭔가요?

- - - -

지금 당장 필요한 도구는 뭔가요?

- -

전문가가 사용하는 리스트가 두렵게 다가올지도 모르지만, 다행히도 여러분은 저런 대부분의 것들을 모르더라도 웹 개발을 시작하실 수 있습니다. 이 글을 통해 여러분이 최소한의 도구(텍스트 편집기와 최신 웹 브라우저 같은)를 마련할 수 있도록 할 것입니다.

- -

텍스트 편집기 설치하기

- -

지금도 기본적인 텍스트 편집기는 아마 갖고 계실겁니다. Windows는 기본으로 메모장을, macOS는 TextEdit을 포함하고 있습니다. Linux는 배포판마다 다르지만, Ubuntu는 gedit을 가지고 있습니다.

- -

웹 개발을 위해서라면 메모장이나 TextEdit보다는 좋은걸 써야 할겁니다. Brackets를 추천드립니다. 무려 무료인데다가(쫭쫭) 실시간 미리보기와 코드 힌트도 제공하기 때문이에요!

- -

최신 웹 브라우저 설치하기

- -

이제, 코드를 테스트할 데스크탑 웹 브라우저를 몇 가지 설치할겁니다. 다음 목록에서 여러분의 운영체제를 고른 후 원하시는 브라우저의 링크로 들어가 설치하세요.

- - - -

다음으로 진행하기 전에, 테스트를 위해 최소 두 개 이상의 브라우저를 설치해야 합니다.

- -

로컬 웹 서버 설치하기

- -

어떤 예제는 제대로 작동하려면 웹 서버가 필요합니다. 로컬 테스트 서버 설치하기에서 설치하는 방법을 알아보세요!

- -

{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}

- -

이번 과정에서는

- - diff --git "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" "b/files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" deleted file mode 100644 index df2016e530..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\202\254\354\235\264\355\212\270_\354\266\234\355\214\220\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: 웹사이트 출판하기 -slug: Learn/Getting_started_with_the_web/웹사이트_출판하기 -translation_of: Learn/Getting_started_with_the_web/Publishing_your_website ---- -

{{LearnSidebar}}

- -

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

- -
-

일단 여러분의 웹사이트를 만들기 위한 코드 작성과 파일 구성을 끝내셨다면, 이 모든 것을 온라인에 올려 사람들이 찾을 수 있게 할 필요가 있습니다. 이 글은 어떻게 최소한의 노력으로 간단한 예시 코드를 온라인에서 얻을 수 있는지 보여줍니다.

-
- -

옵션들은 뭐가 있나요?

- -

웹사이트를 출판하는 것은 간단한 것이 아닙니다, 주된 이유는 이것에 아주 많은 다른 방법이 있다는 것입니다. 이 글에서는 모든 가능한 방법을 문서화 하는 것이 목적이 아닙니다. 대신에, 초심자의 관점에서 세가지 큰 전략에 대한 장단점에 대해 이야기 할 것입니다, 그리고나서 현재로써 적합할 하나의 방법을 보여드릴 것입니다.

- -

호스팅과 도메인 이름 얻기

- -

만약 여러분이 출판된 웹사이트에 대한 모든 컨트롤를 원한다면, 이것들을 구매해야 할 것입니다:

- - - -

많은 전문적인 웹사이트들은 이 방법으로 온라인에 진출합니다.

- -

게다가, 여러분은 서버로 웹사이트 파일들을 실제로 전송하기 위한 파일 전송 프로토콜 (FTP) 프로그램 (자세한 내용은 얼마나 드나요: 소프트웨어 에서 확인하세요) 이 필요할 것입니다. FTP 프로그램은 아주 다양합니다, 하지만 일반적으로 호스팅 회사에 의해 제공된 정보 (예로 사용자 이름, 비밀번호, 호스트 이름) 를 사용해 여러분의 웹서버에 로그인을 해야 합니다. 그러면 프로그램은 여러분의 로컬 파일들과 웹 서버의 파일을 두 창에서 보여주므로, 그것들을 외부로 전송하거나 다시 돌려 놓을 수 있습니다:

- -

- -

호스팅과 도메인을 찾는 팁

- - - -

GitHub 또는 Dropbox 같은 온라인 도구 사용하기

- -

어떤 도구들은 여러분이 여러분의 웹사이트를 온라인에 출판할 수 있게 해줍니다:

- - - -

대부분의 호스팅과 다르게, 많은 도구들은 일반적으로 무료이지만, 여러분은 제한된 기능들만 사용할 수 있습니다.

- -

Thimble 같은 웹-기반 IDE 사용하기

- -

HTML, CSS 그리고 JavaScript 를 입력할 수 있게 하고 웹사이트로 만들어 질 때 코드의 결과를 보여주는 웹사이트 개발 환경을 대행하는 웹 앱은 많습니다 — 모든것이 한 브라우저 탭 안에 있습니다! 일반적으로 이러한 도구들을 이야기하기는 매우 쉽고, 배우기에 최고이고, 무료이고 (기본적 기능에대해), 그들은 여러분의 특정 웹 주소에 있는 만들어진 페이지를 관리합니다. 하지만, 그 기본적인 기능들은 매우 한정적이고, 그 앱들은 보통 자원들 (이미지 같은) 을 위한 관리 공간을 제공하지 않습니다.

- -

여기 몇 개의 예시들을 실행해보시고, 어떤것이 제일 좋은지 확인해보세요:

- - - -

- -

GitHub 를 통한 출판

- -

이제 어떻게 GitHub 페이지를 통해 여러분의 사이트를 출판할 수 있는지 알아보도록 합시다. 이게 여러분의 사이트를 출판하는데 유일한 방법이거나 최고의 방법이라고 이야기 하지는 않을 것입니다, 하지만 이것은 무료이고, 꽤 간단하고, 앞으로 유용할 여러분이 알게 될 몇 가지 새로운 기술도 다룰 것입니다.

- -

기본 설치

- -
    -
  1. 먼저, 여러분의 장치에 Git 을 설치 하세요. 이것은 GitHub 이 위에서 작동하게 되는 기초가 되는 버전 컨트롤 시스템 소프트웨어 입니다.
    2. -
  2. 다음으로, GitHub 계정을 위해 가입하세요. 간단하고 쉽습니다.
    3. -
  3. 가입을 하셨다면, github.com 에 여러분의 유저 이름과 암호로 로그인하세요.
    4. -
  4. 그리고나서, 여러분의 파일들이 들어가게될 새로운 repo 를 생성해야 합니다. GitHub 홈페이지의 오른쪽 상단에 있는 플러스 (+) 를 클릭하고, New Repository 를 선택하세요.
    5. -
  5. 이 페이지에서, Repository name 박스 안에, username.github.io 를 입력하세요, username 가 있는 곳이 여러분의 유저 이름입니다. 그러니까 예를 들어, 우리 친구 bobsmith 는 bobsmith.github.io 를 입력할 것입니다.
    6. -
  6. Create repository 를 클릭하세요. 다음과 같은 페이지로 이동하실 겁니다:
    7. -
- -

GitHub 에 파일 올리기

- -

이것은 GitHub 에 있는 우리의 repository 를 놓기 위해 사용해볼 커맨드 라인입니다. 커맨드 라인은 파일을 생성하거나 프로그램을 실행하는 것 같은 일을 하기 위해 유저 인터페이스 안에서 클릭을 하는 것 대신 명령어를 입력하는 창입니다. 이렇게 생긴 것입니다:

- -

- -
-

노트: 만약 커맨드라인이 불편하시다면, 같은 일을 하기 위해서 Git graphical user interface 를 사용하는것도 고려해 볼 수 있습니다.

-
- -

모든 운영 체제는 커맨드 라인 도구를 갖습니다:

- - - -

처음에는 좀 두려우실 수 있지만, 걱정하지마세요 — 기본적인 것들은 금방 익히실 수 있을 것입니다. 무언가를 하기 위해선 명령어를 입력하고 엔터를 누르는 것으로 컴퓨터에게 알려줘야합니다.

- -
    -
  1. 커맨드 라인을 여러분의 test-site 폴더로 향하게 합니다 (또는 여러분의 웹사이트가 포함된 어디든지). 그러기 위해선, cd 명령을 사용합니다 (말하자면 "change directory"). 여기 만약 test-site 폴더 안에 여러분의 웹사이트를 놓으셨다면 여러분이 입력해야 하는 것이 있습니다: - - 
    cd Desktop/test-site
    -
    2. -
  2. 커맨드 라인이 여러분의 웹사이트 폴더 안을 가리킬 때, 그 폴더를 git repository 가 되도록 git 도구에게 알려주는 다음의 명령을 입력하세요: - 
    git init
    -
    3. -
  3. 다음으로, GitHub 사이트로 돌아가세요. 현재 페이지에서, you are interested in the section …or push an existing repository from the command line. 이 구역에 나열된 두 코드를 보게 되실 겁니다. 첫 번째 줄의 코드 전체를 복사하고, 커맨드 라인에 붙여넣은 다음, 엔터를 누르세요. 그 명령은 이렇게 보일 것입니다: - 
    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
    -
    4. -
  4. 다음으로, 다음 두 명령어를 입력하고, 각 명령마다 엔터를 누릅니다. 이것은 GitHub 에 코드를 올릴 준비를 하는 것이고, Git 에게 그 파일들을 관리하도록 요청합니다. - 
    git add --all
-git commit -m "adding my files to my repository"
    -
    5. -
  5. 마지막으로, GitHub 웹 페이지로 가서 3단계에서 봤던 두 개의 명령어중 두 번째 줄을 터미널에 입력하는 것으로 코드를 푸시합니다: - 
    git push -u origin master
    -
    6. -
  6. 이제 새 브라우저 탭 (username.github.io) 에서 여러분의 GitHub 페이지의 웹 주소로 갈 때, 여러분의 사이트를 온라인에서 보실 수 있습니다! 친구들에게 메일을 보내서 여러분의 실력을 뽐내보세요.
    7. -
- -
-

노트: 만약 막히셨다면, GitHub Pages 홈페이지 또한 아주 도움이 될 것입니다.

-
- -

더 많은 GitHub 이해

- -

만약 여러분이 테스트 사이트에 더 많은 변화를 주고 GitHub에 그것들을 업로드하길 원하신다면, 이전에 하신것 처럼 간단하게 파일에 변화를 주면 됩니다. 그리고나서, GitHub에 변화를 푸시하기 위해 다음 명령어를 입력 (각 명령 다음에 엔터누르기) 해야 합니다:

- -
git add --all
-git commit -m 'another commit'
-git push
- -

another commit 대신에 여러분이 막 변경했던 것을 설명할 수 있는 더 적합한 메시지로 바꾸세요.

- -

우리는 Git 의 겉을 살짝 건드려 보았습니다. 더 많이 배우시려면, GitHub Help 사이트 에서 시작하세요.

- -

마무리

- -

이 지점에서, 특정 웹 주소에서 여러분의 예시 웹사이트를 사용하실 수 있을 것입니다. 수고하셨습니다!

- -

- -

 

- -

더 읽을거리

- - - -

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

- -

 

- -

In this module

- - - -

 

- -

 

diff --git "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" "b/files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" deleted file mode 100644 index 009b22ec8f..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\354\233\271\354\235\230_\353\217\231\354\236\221_\353\260\251\354\213\235/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: 웹의 동작 방식 -slug: Learn/Getting_started_with_the_web/웹의_동작_방식 -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -

{{LearnSidebar}}

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -
-

'웹의 동작 방식'은 여러분의 컴퓨터나 폰의 웹 브라우저 안에서 웹페이지를 볼 때 무슨 일이 발생하는지에 대한 간소화된 개념을 제공할 것입니다.

-
- -

이 이론은 단기적으로 봤을 때 웹 코드를 작성하기 위해 필수적인 것은 아니지만, 머지 않아 백그라운드에서 발생하는 것을 이해하는 것으로부터 오는 장점을 얻게 될 것입니다.

- -

클라이언트와 서버

- -

웹에 연결된 컴퓨터는 클라이언트 와 서버 라고 합니다. 그들이 어떻게 상호작용하는가에 대한 간소화된 다이어그램은 다음과 같습니다:

- -

- - - -

도구 상자의 다른 부분들

- -

위에서 설명한 클라이언트와 서버는 모든 내용을 알려주진 않습니다. 많은 다른 부분들이 포함되어 있고, 아래에서 그것들에 대해 설명할 것입니다.

- -

지금은, 웹이 도로라고 상상해봅시다. 도로의 한 쪽 끝은 여러분의 집 같은 클라이언트 입니다. 다른 한 쪽 끝은 여러분이 뭔가를 사길 원하는 상점같은 서버입니다.

- -

- -

클라이언트와 서버에 덧붙여서 우리는 다음 내용들도 알아볼 필요가 있습니다.

- - - -

그래서 정확히 무슨일이 발생할까요?

- -

여러분이 브라우저에 웹 주소를 입력할 때 (우리의 비유에서 상점으로 걸어가는 것과 유사합니다):

- -
    -
  1. 브라우저는 DNS 서버로 가서 웹사이트가 있는 서버의 진짜 주소를 찾습니다 (여러분이 상점의 주소를 찾습니다).
    2. -
  2. 그 다음 브라우저는 서버에게 웹사이트의 사본을 클라이언트에게 보내달라는 HTTP 요청 메세지를 서버로 전송합니다.(상점으로 가서 상품을 주문합니다.) 이 메세지, 그리고 클라이언트와 서버 사이에 전송된 모든 데이터는 TCP/IP 연결을 통해서 전송됩니다.
    3. -
  3. 이 메세지를 받은 서버는 클라이언트의 요청을 승인하고, "200 OK" 메세지를 클라이언트에게 전송합니다. "200 OK"는 "물론이죠. 당신은 웹 사이트를 볼 수 있어요! 여기 있어요" 라는 의미입니다. 그 다음 서버는 웹사이트의 파일들을 데이터 패킷이라 불리는 작은 일련의 덩어리들로 브라우저에 전송하기 시작합니다.(상점은 여러분이 주문한 상품을 전달하고, 여러분은 그것을 집으로 가져갑니다.)
    4. -
  4. 브라우저는 이 작은 덩어리들을 완전한 웹 사이트로 조립하고, 당신에게 보여줍니다. (상품이 당신의 문에 도착합니다. — 새 것이죠, 멋져요!)
    5. -
- -

DNS 설명

- -

실제 웹 주소는 멋지거나, 여러분이 선호하는 웹사이트를 찾기 위한 주소 막대에 입력하는 기억할만한 문자가 아닙니다. 그것은 63.245.217.105 같은 숫자 덩어리입니다.

- -

이것은 IP 주소라고 하고, 웹의 하나뿐인 특정 위치를 나타냅니다. 그러나 기억하기에 쉽지는 않죠? 그것이 도메인 이름 서버가 발명된 이유입니다. 도메인 이름 서버는 여러분이 브라우저에 입력하는 웹주소 ("mozilla.org" 같은) 를 웹사이트의 실제 (IP) 주소에 맞춰주는 특별한 서버입니다. 

- -

웹사이트는 그들의 IP 주소를 통해 직접 접근될 수도 있습니다. 여러분은 IP Checker와 같은 도구에 도메인을 입력해 IP 주소를 찾을 수 있습니다.

- -

패킷 설명

- -

앞서 우리는 서버에서 클라이언트로 전송되는 데이터의 포맷을 설명하기 위해 "패킷" 이라는 용어를 사용했습니다. 이게 무엇을 의미하는 걸까요? 기본적으로, 데이터가 웹을 거쳐서 전송될 때, 수천개의 작은 덩어리들로 전송됩니다. 그래서 다양한 웹 사용자들은 동시에 같은 웹 사이트를 다운로드 할 수 있게 됩니다. 만약 웹 사이트가 하나의 큰 덩어리들로 전송된다면, 오직 한 번에 하나의 사용자만 다운로드 할 수 있을 것입니다. 이는 분명 웹을 매우 비효율적이고, 사용하기에 재미없게 만들 것입니다.

- -

여기도 보세요

- - - -

크레딧

- -

거리 사진: Street composing, by Kevin D.

- -

{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}

- -

In this module

- - diff --git "a/files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" "b/files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" deleted file mode 100644 index 1ed38e8cde..0000000000 --- "a/files/ko/learn/getting_started_with_the_web/\355\214\214\354\235\274\353\223\244_\353\213\244\353\243\250\352\270\260/index.html" +++ /dev/null @@ -1,117 +0,0 @@ ---- -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 ---- -
{{LearnSidebar}}
- -
{{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")}}
- -
-

웹사이트는 문자, 코드, 스타일시트, 미디어 등 수많은 파일로 구성되어 있습니다. 웹사이트를 제작할 때, 여러분은 이러한 파일들을 여러분의 컴퓨터에 적당한 양식에 맞춰 정리해야 하고, 서로가 잘 작동하는지 확인해야 하며, 최종적으로 서버에 업로드하기 전에 모든 내용이 올바르게 나타나게 해야 합니다. 파일 다루기에서는 여러분의 웹사이트를 위한 적당한 양식을 만들기 위해 여러분이 알아야 하는 몇 가지 문제들에 대해 이야기 할 것입니다.

-
- -

웹사이트는 컴퓨터의 어디에 두어야 할까요?

- -

만약 여러분이 로컬컴퓨터에서 웹사이트에 대해 작업한다면, 퍼블리시된 웹사이트의 파일 구조를 반영하는 하나의 폴더 안에 관련된 모든 파일을 유지하여야 합니다. 이 폴더는 여러분이 원하는 곳이라면 어디에나 둘 수 있지만, 아마도 쉽게 찾을 수 있는 곳에 두어야 할 것입니다. 예를들면 여러분의 바탕화면이나 홈 폴더, 또는 하드 드라이브의 루트(root)가 될 것입니다.

- -
    -
  1. 여러분의 웹사이트 프로젝트를 저장할 장소를 선택하세요. 여기에, web-projects (또는 비슷한 이름의 폴더) 라고 불리는 새 폴더를 생성하세요. 이 곳이 여러분의 웹사이트 프로젝트가 위치할 곳입니다.
    2. -
  2. 이 첫 번째 폴더에, 또다른 폴더를 하나 만들고 첫 번째 웹사이트를 저장하도록 합시다. 그 폴더를 test-site (또는 무언가 더 상상력을 발휘한 다른 이름도 좋습니다) 라고 부릅시다.
    3. -
- -

포장과 공백에 대한 여담

- -

이 글을 통해 알게 되겠지만, 폴더와 파일의 이름을 지을 때 공백 없이 영문 소문자로 짓기를 바랍니다. 이것은 다음과 같은 이유 때문입니다.

- -
    -
  1. 많은 컴퓨터들 -특히 웹 서버- 은 영문 대소문자를 구분합니다. 그래서 예를 들면, 웹사이트에 test-site/MyImage.jpg라는 이미지를 저장해 두었는데 여러분이 다른 파일에서 test-site/myimage.jpg라는 이미지를 호출하는 것은 작동하지 않을 것입니다.
    2. -
  2. 브라우저들과 웹 서버들, 그리고 프로그래밍 언어들은 공백을 일관되게 처리하지 않습니다. 예를 들면, 만약 여러분이 파일 이름에 공백을 사용한다면, 어떤 시스템은 그 파일 이름을 두개의 파일 이름으로 다룰 것입니다. 어떤 서버들은 그 파일 이름의 공백을 "%20"(URIs 안의 공백을 위한 문자 코드)으로 대체하므로 여러분의 모든 링크들을 망가뜨릴 것입니다. 또한, 밑줄문자를 사용하기 보다는 대시(하이픈)으로 단어를 구분하는 것이 훨씬 더 좋습니다.: my-file.html vs. my_file.html.
    3. -
- -

간단히 말하자면 여러분은 파일 이름을 지을 때 붙임표(hyphen)를 사용해야 합니다. 구글 검색 엔진은 하이픈를 단어 구분자로 취급합니다. 그러나 밑줄문자는 단어 구분자로 취급하지 않습니다. 이러한 이유로, 여러분이 폴더와 파일 이름을 지을 때에는 공백이 없는 영문 소문자와 대시로 구분된 단어로 작성하는 습관을 들이는 것이 제일 좋습니다. 적어도 여러분이 무엇을 하는지 알 때까지는요. 그렇게하면 나중에 발생할 문제를 줄일 수 있습니다.

- -

웹사이트는 어떤 구조를 가져야 할까요?

- -

다음으로, 우리의 테스트 사이트가 어떤 구조를 가져야 하는지 살펴 봅시다. 어떤 웹사이트 프로젝트를 만들든지간에 가장 공통으로 가지게 되는 것들은 index HTML 파일과 이미지, 스타일 파일(CSS 파일), 스크립트 파일들을 포함하고 있는 폴더입니다. 이것들을 이제 생성해 봅시다.

- -
    -
  1. index.html: 이 파일은 보통은 홈페이지의 내용을 가지고 있습니다. 다시 말하면, 처음 웹사이트에 방문하면 사람들이 볼 수 있는 텍스트나 이미지이 파일 같은 것입니다. 텍스트 에디터를 사용하여, index.html 라는 새 파일을 생성하고 test-site 폴더 안에 저장하세요.
    2. -
  2. images 폴더: 이 폴더는 여러분의 사이트에 사용할 모든 이미지들을 포함하고 있습니다. test-site 폴더 안에, images 라는 폴더를 생성하세요.
    3. -
  3. styles 폴더: 이 폴더는 여러분의 내용을 보기 좋게 꾸며주기(예를 들어, 문자와 배경색을 세팅하는 것) 위한 CSS 코드를 포함할 것입니다. test-site 폴더 안에, styles 라는 폴더를 생성하세요.
    4. -
  4. scripts 폴더: 이 폴더는 모든 JavaScript 코드를 포함하고 있는데, 이 코드는 여러분의 사이트에 상호작용하는 기능을 추가할 때 사용될 것입니다.예를들면, 클릭할 때 자료를 불러오는 버튼). test-site 폴더 안에, scripts 라는 폴더를 생성하세요.
    5. -
- -
-

참고: Windows 컴퓨터에서는 파일 이름을 보는것에 문제가 생길 수 있습니다, 왜냐하면 윈도우는 기본적으로 알려진 확장자 자동 숨김이라는 귀찮은 옵션을 갖고 있기 때문입니다. 일반적으로 윈도우 익스플로러에서, 폴더 옵션...에서 알려진 확장자 자동 숨김을 선택 해제하는 것으로 이 옵션을 끌 수 있습니다. 여러분의 윈도우 버전을 포함한 더 많은 정보는, 인터넷에서 검색을 해보세요!

-
- -

파일 경로

- -

파일들이 서로 의사소통할 수 있도록 하려면 여러분은 서로에게 각자의 파일 경로를 제공해야 합니다 — 기본적으로 다른 파일이 어디있는지 알 수 있도록 경로를 제공해야하는 것이죠. 이것을 시연해보기 위해, 우리는 index.html파일에 약간의HTML을 작성할 것입니다, 그리고 "웹사이트의 외관은 어떻게 할까요?" 라는 글에서 여러분이 선택한 이미지를 보여주게 할 것입니다.

- -
    -
  1. images폴더 안에 여러분이 선택한 이미지를 복사해 넣으세요.
    2. -
  2. index.html 파일을 열고, 아래의 코드를 보이는 그대로 집어 넣습니다. 지금은 이 모든게 무슨 뜻인지 걱정할 필요가 없습니다 — 본 시리즈에서 나중에 이 구조에 대해 더 자세히 살펴볼 겁니다. - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>My test page</title>
-  </head>
-  <body>
-    <img src="" alt="My test image">
-  </body>
-</html>
    -
    3. -
  3. <img src="" alt="My test image">라는 줄은 페이지 안으로 이미지를 삽입하는 HTML 코드 입니다. 우리는 이미지가 어디에 있는지에 대해 HTML에게 말해줄 필요가 있습니다. 이미지는 images라는 폴더 안에 있는데, 이것은 index.html 파일과 같은 폴더에 있습니다. index.html파일에서 우리 이미지 파일로 파일 구조를 이동하기 위해, 우리가 필요한 파일 경로는 images/your-image-filename입니다. 예를 들어, 우리 이미지가 firefox-icon.png라면, 파일 경로는 images/firefox-icon.png가 됩니다.
    4. -
  4. 여러분의 HTML 코드 중 src="" 의 쌍따옴표 사이에 파일 경로를 입력하세요.
    5. -
  5. HTML 파일을 저장하고나서, 여러분의 웹 브라우저에서 이것을 로드하세요 (파일을 더블 클릭). 여러분의 새 웹페이지가 이미지를 표시하는 것을 보실 수 있습니다!
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

파일 경로를 위한 일반적인 규칙들:

- - - -

지금으로선, 이것이 여러분이 알아야 할 전부 입니다.

- -
-

노트: 윈도우 파일 시스템은 기본 슬래시가 아니라 역슬래시를 사용하는 경향이 있습니다. 예시: C:\windows. 이것은 HTML에서 문제가 되지않습니다 — 여러분이 윈도우에서 웹 사이트를 개발하더라도 전방향 슬래시(/)를 코드에 사용해야 합니다.

-
- -

또 무엇을 더 해야할까요?

- -

현재로서는 이것이 전부입니다. 여러분의 폴더 구조는 이와 같이 보여야 합니다:

- -

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

- -

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

- - - -

In this module

- - diff --git a/files/ko/learn/how_to_contribute/index.html b/files/ko/learn/how_to_contribute/index.html deleted file mode 100644 index 08ee091c24..0000000000 --- a/files/ko/learn/how_to_contribute/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: MDN의 학습 영역에 기여하는 방법 -slug: Learn/How_to_contribute -tags: - - Documentation - - MDN Meta - - 'l10n:priority' - - 가이드 - - 배우기 - - 참여 - - 초보자 -translation_of: Learn/How_to_contribute ---- -
{{LearnSidebar}}
- -

처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다. 그건 좋은 소식입니다!

- -

이 페이지에서는 MDN의 학습 콘텐츠를 개선하는 데 필요한 모든 것을 찾을 수 있습니다. 얼마나 많은 시간을 가지고 있는지, 초보자이든, 웹 개발자이든, 교사이든, 할 수있는 일이 많이 있습니다.

- -
-

Note: 새로운 학습 영역 기사를 작성하는 방법에 대한 안내서는 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법(How to write an article to help people learn about the Web)을 제공합니다.

-
- -

특정 작업 찾기

- -

참여자는 트렐로 보드(Trello board)를 사용하여 작업을 구성합니다. 이렇게 하면 프로젝트에서 수행할 특정 작업을 찾을 수 있습니다. 참여하려면 트렐로 계정을 만들고 Chris Mills에게 보드에 대한 쓰기 액세스 권한을 요청하면 됩니다.

- -

기여는 새로운 것을 즐겁게 배우는 좋은 방법입니다. 만약 당신이 길을 잃거나 질문이 있으면 our mailing list 또는 IRC channel (자세한 내용은 이 페이지 하단 참조)로 문의하십시오. Chris Mills는 학습 영역의 핵심 드라이버입니다. 직접 디렉토리에 알림을 보내볼 수도 있습니다.

- -

다음 섹션에서는 할 수있는 작업 유형에 대한 일반적인 아이디어를 제공합니다.

- -

초보자

- -
좋습니다! 초보자는 학습 자료에 대한 피드백을 만들고 제공하는 데 매우 중요하고 가치가 있습니다. 이 기사에 대한 독자적인 시각을 잠재 고객의 구성원으로 확보하면 우리 팀의 소중한 구성원이 될 수 있습니다. 실제로, 만약 당신이 무언가를 배우기 위해 우리의 글 중 하나를 사용하여 곤경에 빠지거나 글을 약간 혼란스럽게 하는 것을 발견한다면, 문제를 해결하거나 문제에 대해 알려줌으로써 해결할 수 있습니다.
- -
- -

다음은 참여 할 수있는 몇 가지 제안 방법입니다.

- -
-
기사에 태그 추가[Add tags to our articles] (5 min)
-
MDN 컨텐츠에 태그를 지정하는 것은 MDN에 기여하는 가장 쉬운 방법 중 하나입니다. 많은 기능이 정보를 제공하기 위해 태그를 사용하므로 태그 지정을 돕는 것은 매우 가치가 있는 공헌입니다. 시작하려면 태그가없는 용어집 항목(glossary entries) 및 학습 기사(learning articles) 목록을 살펴보십시오.
-
용어 사전 항목 읽기 및 검토[Read and review a glossary entry] (5 min)
-
우리는 당신이 초보자로서 우리의 콘텐츠를 바라 보는 신선한 눈을 필요로 합니다. 용어집을 쉽게 이해할 수 없다면 항목을 개선해야한다는 의미입니다. 필요하다고 생각되는 부분은 자유롭게 변경하십시오. 자신이 직접 항목을 편집 할 수있는 적절한 기술이 없다고 생각한다면 our mailing list로 알려주십시오.
-
새로운 용어집 항목 작성[Write a new glossary entry] (20 minutes)
-
-
-
-
이것은 새로운 것을 배우는 가장 효과적인 방법입니다. 이해하려는 개념을 고르고, 그것에 대해 배울 때 그에 관한 용어집 항목을 작성하십시오. 다른 사람들에게 무언가를 설명하는 것은 지식을 "시멘트"로 만들고 다른 사람들을 돕는 동안 자신이 이해할 수 있게 하는 훌륭한 방법입니다. 모두에게 이득입니다!
-
-
-
-
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
-
-
-
-
-
-
-
이것은 용어 사전 항목을 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.
-
-
-
-
-
-
-
- -

웹 개발자

- -

좋습니다! 당신의 기술 능력은 초보자에게 기술적으로 정확한 내용을 제공하기 위해 필요한 것입니다. MDN의 이 특정 부분은 웹 학습에만 전념하므로 유용한 설명이 아닌 단순하지 않은 설명을 가능한 간단하게 작성하십시오. 지나치게 정확한 것보다 이해하는 것이 더 중요합니다.

- -
-
용어집 항목 읽기 및 검토[Read and review a glossary entry] (5 min)
-
웹 개발자로서, 우리의 콘텐츠가 지나치게 규칙적이지 않으면서 기술적으로 정밀한 지 확인해 주길 바랍니다. 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 콘텐츠를 편집하기 전에 논의하기를 원하시면 our mailing list나 IRC channel로 알림을 보내주십시오.
-
새로운 용어집 항목 작성[Write a new glossary entry] (20 minutes)
-
기술적인 전문 용어를 명확히 하는 것은 기술적으로 정확하고 간결하게 배우는 좋은 방법이다. 초보자들은 그에 감사할 것입니다. 당신의 도움이 필요한 정의되지 않은 용어(many undefined terms)가 많이 있습니다. 선택해서 작성하실 수 있습니다. 
-
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
-
이것은 용어집을 읽고 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.
-
새로운 학습 기사 작성[Write a new learning article ](4 hours or more)
-
MDN는 웹 기술사용에 관한 간단한 기사가 부족합니다. (HTML, CSS, JavaScript, 등)MDN은 다소 오래 된 콘텐츠들이 있고, 그를 검토하고 개정할 필요가 있습니다. 기술을 최대한 초보자에게도 웹 기술을 이용하기 쉽게 작성하십시오.
-
연습, 코드 샘플 또는 대화식 학습 도구 만들기[Create exercises, code samples or interactive learning tools](? hours)
-
우리의 모든 학습 기사는 “능동적 학습" 자료라고 부르는 것을 요구합니다. 왜냐하면 사람들은 스스로 뭔가를 함으로써 최선을 다해 배우기 때문입니다. 이러한 자료는 사용자가 기사에 설명 된 개념을 적용하고 조작하는 데 도움이 되는 연습이나 대화형 콘텐츠입니다. JSFiddle 또는 그와 유사한 코드 샘플을 만드는 것에서 Thimble을 사용하여 완전히 공유된 대화형 콘텐츠를 만드는 것까지 능동적인 학습 콘텐츠를 만드는 방법은 다양합니다. 창의력을 발휘하십시오!
-
- -

교육자

- -

MDN은 기술적 우수성에 대한 오랜 역사를 가지고 있지만 새로 온 사람들에게 개념을 가르치는 가장 좋은 방법에 대한 깊이 있는 이해가 부족합니다. 이것은 우리가 교사 또는 교육자로서 당신을 필요로 하는 이유입니다. 자료를 통해 독자에게 훌륭한 교육 자료를 제공 할 수 있습니다.

- -
-
용어집 항목 읽기 및 검토[Read and review a glossary entry] (15 min)
-
용어집 항목을 확인하고 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 편집하기 전에 내용을 토론하고 싶다면 our mailing list 나 IRC channel로 알림을 보내주십시오.
-
새로운 용어집 항목 작성[Write a new glossary entry] (1 hour)
-
용어의 명확하고 간단한 정의와 용어집의 기본 개념은 초보자의 필요를 충족시키는 데 중요합니다. 교육자로서의 경험은 훌륭한 용어집 항목을 만드는 데 도움이 될 수 있습니다. 우리는 주의가 필요한 많은 정의되지 않은 용어(many undefined terms)를 가지고 있습니다. 하나를 선택하고 작성하실 수 있습니다.
-
기사에 삽화 또는 도식을 추가[Add illustrations and/or schematics to articles] (1 hour)
-
아시다시피, 삽화는 모든 학습 콘텐츠의 중요한 부분입니다. 이것은 종종 MDN에서 부족한 부분이며 당신의 기술이 해당 영역에서 변화를 가져올 수 있습니다. 설명이 부족한 기사(articles that lack illustrative content)를 확인하고 삽화를 삽입하고 싶은 기사를 선택하십시오.
-
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
-
이것은 용어집 항목을 검토하는 것과 비슷하지만 (위 참조) 일반적으로 기사가 상당히 길기 때문에 더 많은 시간이 필요합니다.
-
새로운 학습 기사 작성[Write a new learning article] (4 hours)
-
우리는 웹 생태계와 그 주변의 다른 기능적 주제에 대한 간단하고 직접적인 기사가 필요합니다. 이 학습 기사는 말 그대로 문자 그대로 모두를 다루려고 하기 보다는 교육적일 필요가 있기 때문에 무엇을 알아야하고 어떻게 하면 훌륭한 자산이 될지를 아는 당신의 경험으로 도움을 줄 수 있습니다.
-
연습 문제, 퀴즈 또는 대화식 학습 도구 만들기[Create exercises, quizzes or interactive learning tools] (? hours)
-
우리의 모든 학습 기사에는 "능동적 학습" 자료가 필요합니다. 이러한 자료는 사용자가 기사에서 설명하는 개념을 사용하고 확장하는 방법을 배우는 데 도움이 되는 연습 또는 대화형 콘텐츠입니다. Thimble와 함께 공유된 양방향 콘텐츠를 만드는 것부터 퀴즈 만들기에 이르기까지 여기에서 할 수 있는 많은 것들이 있습니다. 창의력을 발휘하십시오!
-
학습 경로 만들기[Create learning pathways ](? hours)
-
진보적이고 이해하기 쉬운 자습서를 제공하려면 콘텐츠를 하나의 경로로 만들어야 합니다. 기존 콘텐츠를 수집하고 누락된 부분을 찾아서 작성할 학습 기사를 만들 수 있습니다.
-
diff --git "a/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" "b/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" deleted file mode 100644 index 37bfbb57ae..0000000000 --- "a/files/ko/learn/html/forms/html_\355\217\274_\352\265\254\354\204\261_\353\260\251\353\262\225/index.html" +++ /dev/null @@ -1,928 +0,0 @@ ---- -title: HTML_폼_구성_방법 -slug: Learn/HTML/Forms/HTML_폼_구성_방법 -translation_of: Learn/Forms/How_to_structure_a_web_form ---- -

HTML폼을 만들떄 구조화 하는것은 중요한 것이다. 이것은 두가지 이유로 중요하다. 폼이 사용 할수 있다는 것을 보장하고 접근성도 늘릴수 있기 떄문이다.(즉 장애인들도 쉽게 사용할 수 있다.) HTML 폼의 접근성은 중요한 점이고 어떻게 폼 접근성을 높일 수 있는지 볼것이다.

- -

HTML 폼들은 그 유연성으로 인해 HTML 중 복잡한 구조를 가지고 있는 요소중 하나이다. 폼 요소와 속성을 잘 혼합하면 모든 형태의 기본적인 폼을 만들 수 있다. 즉 몇몇 사람들이 HTML폼이 단순하고 매우 거칠다는 것을 발견했다는 것에 주목할 가치가 있다. XForms같은 풍부한 기술이 있다는 것은 사실이지만 불행하게도 모든 브라우저에서 폼의 종류를 널리 구현되지 않았다. 왜냐하면 대부분 자바스크립트에 의존하여 HTML폼들을 다루기 떄문이다.이 문서에서는 HTML 폼 요소들을 어떻게 사용해야 하는지 자세하게 설명 할 것이다. 만약 사용자 폼 위젯 만들기에 대하여 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. How to build custom form widgets

- -

글로벌 구조

- -

<form> 요소

- -

{{HTMLElement("form")}} 요소는 공식적으로 폼을 정의하는 요소로 이 요소의 속성으로 폼의 작동하는 방식을 정의 할 수있다. HTML폼을 생성할떄마다 반드시 이 요소로 시작을 해야한다. 많은 보조 기술이나 브라우저 플러그인이 {{HTMLElement("form")}} 요소를 발견하고 쉽게 사용 할 수 있게 특별한 후크를 구현 할 수 있다.

- -

우리는 저번 문서에서 이미 이 내용을 다루었다.

- -
주의:폼을 다른 폼으로 둘러싸는 것은 엄격하게 제한되어 있다. 만약 그렇게 하면 사용자가 사용하는 브라우저에 따라 예측할 수 없는 방식으로 작동하게 된다.
- -

언제든지 폼위젯을 {{HTMLElement("form")}} 요소 바깥에서 사용할 수 있다. 하지만 그렇게 사용한다면, 그 폼위젯은 어떠한 폼과도 관련이 없다. 폼 위젯들은 폼 바깥에서 사용될 수  있지만, 그 위젯들은 스스로 아무것도 하지 않을 것이기 때문에 당신이 그 위젯들 전용 프로세스를 만들어주어야 한다. 당신은 자바스크립트로 그 동작을 정의해주어야 한다.

- -
-

주의:HTML5에서 HTML 폼 요소안의 폼 속성이 지원된다. 폼 속성은 {{HTMLElement("form")}} 바깥에 있는 폼요소라도 폼과 명시적으로 연결한다. 불행하게도 지금 시점에 이 기능은 다양한 브라우저에서 안정적으로 구현되지 않아서 신뢰할 수 없다.

-
- -

{{HTMLElement("form")}} 요소는 다음과 같은 속성을 가지고 모든 속성이 필수가 아닌 선택적이다.

- -


-  {{HTMLElement("form")}} 요소 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
{{htmlattrxref("accept-charset","form")}}UNKNOWN서버가 받아들일 문자 인코딩의 형식을 지정한다. 기본값은 특수 문자열 UNKNOWN이고 이경우에 폼 요소 안에 있는 문서의 인코딩에 맞는 인코딩이다.
{{htmlattrxref("action","form")}} 폼을 통해서 전송한 정보를 처리하는 웹페이지의 URL 
{{htmlattrxref("autocomplete","form")}}on이 속성은 이 폼안에 있는 위젯들의 기본값이 브라우저에 의해 자동 완성 하게 하는지 여부를 나타낸다. 이속성은 두가지 값중 하나를 같는다. on 또는 off.
{{htmlattrxref("enctype","form")}}application/x-www-form-urlencoded\method 속성이 post 값으로 지정되면,  서버로 폼을 전송하는 콘텐츠 MIME의 타입을 지정한다.: -
    -
  • application/x-www-form-urlencoded
    • -
  • multipart/form-data: {{HTMLElement("input")}}요소의 type 속성을 file로 지정한 경우 이 속성의 값을 사용한다. 
    • -
  • text/plain
    • -
-
{{htmlattrxref("method","form")}}get브라우저가 폼을 전송하기위해 사용하는 HTTP의 방식을 지정한다.
- 이 속성은 두개의 값중 한개를 가진다.  get 또는 post.
{{htmlattrxref("name","form")}} 폼의 이름이다. 이 속성값은 반드시 문서의 폼 사이에서 고유해야하며 빈 문자열을 지정할 수없다. 일반적으로 id 속성으로 대신 지정할 수 있다.
{{htmlattrxref("novalidate","form")}}(false)이 불리언 속성은 폼이 전송 할떄 유효성 검사를 할수 없음을 나타낸다.
{{htmlattrxref("target","form")}}_self폼 요청을 전송한후 응답을 어떻게 받을것인지 지정한다. 예를들어 {{HTMLElement("iframe")}}, tab, window를 사용 할 수 있다. 이 속성의 키워드로 다음과 같은 값을 사용 할 수있다. -
    -
  • _self: 응답을 현재 브라우징 컨텍스트 ({{HTMLElement("iframe")}}, tab, window 등)에서 불러온다.
    • -
  • _blank: 응답을 새로운 브라우징 컨텍스트로 불러온다.
    • -
  • _parent: 응답을 현재의 브라우징 컨텍스트의 부모 브라우징 컨텍스트에서 불러온다. 만약 부모가 없다면 _self 키워드와 똑같이 작동한다.
    • -
  • _top: 응답을 최상휘 레벨 브라우징 컨텍스트에서 불러온다. 만약 최상위 컨텍스트가 없다면  _self 키워드와 똑같이 작동한다.
    • -
-
- -

요소 밖에 폼 위젯들을 사용 할 수 있지만, 폼 위젯이 어떠한 폼과도 상관이 없다는 것을 유의 해야 한다.폼의 밖에서 위젯을 사용하는 것은 편리할 수 있지만 위젯들이 작동하기 위해 다른 것들을 해야 한다는 것을 의미한다. 아마 자바스크립트를 이용해서 동작을 정의 해야 할것이다.

- -

기술적으로 HTML5는 HTML 폼 요소에서 폼 속성을 설명 했다. 이것은 요소들을 실제로  {{ HTMLElement("form") }} 안에 있지 않아도 form요소로 확실하게 바인딩 하도록 해야한다. 불행하게도 모든 브라우저가 아직 이것을 충분히 지원하지 않는다.

- -

 <fieldset> 와 <legend> 요소

- -

{{HTMLElement("fieldset")}}요소는 같은 목적을 가진 위젯들을 편리하게 그룹화 하는 방법이다. A {{HTMLElement("fieldset")}} 요소는 라벨인 {{HTMLElement("legend")}} 요소와 같이 사용된다. {{HTMLElement("legend")}} 요소는 공식적으로 {{HTMLElement("fieldset")}} 요소를 설명하는데 사용된다. 많은 보조 기술들이 {{HTMLElement("legend")}} 요소를 {{HTMLElement("fieldset")}} 요소의 라벨로 이용하는데 사용된다. 예를 들어  Jaws, NVDA같은 스크린 리더들은 각각의 위젯의 라벨을 읽기전에 legend들을 읽을 것이다. 

- -

아래 조그만 예제가 있다.

- -
<form>
-  <fieldset>
-    <legend>Fruit juice size</legend>
-    <p>
-      <input type="radio" name="size" id="size_1" value="small" />
-      <label for="size_1">Small</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_2" value="medium" />
-      <label for="size_2">Medium</label>
-    </p>
-    <p>
-      <input type="radio" name="size" id="size_3" value="large" />
-      <label for="size_3">Large</label>
-    </p>
-  </fieldset>
-</form>
- -

이 예제를 스크림 리더가 Fruit juice size small을 먼저 읽고 Fruit juice size medium을 읽은 다음 마지막으로 Fruit juice size large을 읽을 것이다,

- -

이것은 가장 중요한것 중 하나이다. 대부분 라디오 버튼을 설정할떄 마다{{HTMLElement("fieldset")}} 요소 안에 있는지 확인해야한다. 다르게 사용하는 사례가 있지만 일반적으로 {{HTMLElement("fieldset")}}  요소는 폼을 강력하게 사용할 수 있게 해준다. 보조기술의 영향으로 {{HTMLElement("fieldset")}}  요소는 폼 접근 할수 있는 키 요소 중 하나이다. 이것을 남용하지 않는 것은 개발자 책임이다. 가능한 폼을 만들떄마다 스크린리더로 들어보면서 하는 것이 좋다. 만약 말이 이상하게 들린다면 개선 해야 한다는 신호이다.

- -

{{HTMLElement("fieldset")}} 요소는 다음과 같은 속성을 지정한다.

- - - - - - - - - - - - - - - - - -
{{HTMLElement("fieldset")}} 요소의 속성
속성 이름기본값설명
{{htmlattrxref("disabled","fieldset")}}(false)만약 이 불리언 속성이 설정되면 폼은(첫번째 {{ HTMLElement("legend") }}요소에 있는 요소는 예외이다. ) 이것에 파생된 요소를 사용하거나 편집 할 수없게된다. 그리고 마우스 클릭같은 어떠한 브라우저 이벤트들도 받지 않을것이다. 일반적으로 브라우저는 회색으로 이를 표시할 것이다.
- -

The <label> element

- -

{{HTMLElement("label")}} 요소는 HTML 폼 위젯을 정의하는 공식적인 방법이다. 이것은 접근성 있는 폼을 만드는데 가장 중요한 요소이다.

- -

{{HTMLElement("label")}} 요소는 다음과 같은 속성을 지원한다.

- -


- {{HTMLElement("label")}} 요소의 속성

- -


-  

- - - - - - - - - - - - - - - - -
속성 명기본값설명
{{htmlattrxref("for","label")}} {{HTMLElement("label")}}  요소와 같은 문서에 있는 위젯의 라벨의 ID . 문서안의 ID와 for속성 값이 같으면 그 라벨 요소는 그 위젯의 라벨이된다.
- -

요소는 for속성으로 지정한 위젯과 묶여진다. for속성은 해당 위젯의 실제 id 속성을 참조한다. 위젯은 요소로 둘러싸게 할수 있지만 이 경우 몇가지 보조 기술이 라벨과 위젯의 암시적인 관계를 이해하지 못하기 떄문에 for 속성을 고려 해봐야한다.

- -

심지어 보조 기술을 배제 한다고 하여도 모든 브라우저에서 공식적인 라벨 설정하면 사용자가 라벨을 누르면 해당하는 위젯이 활성화 할수 있다는 것을 알아 두어야한다. 이것은 라디오 버튼이나 체크박스를 사용하는데 특히 유용하다.

- -
<form>
-  <p>
-    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
-    <label for="taste_1">I like cherry</label>
-  </p>
-  <p>
-    <label for="taste_2">
-      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
-      I like banana
-    </label>
-  </p>
-</form>
- -

몇가지 보조 기술은 여러개의 라벨을 한개의 위젯을 다루면 문제를 가질수 있다. 이 떄문에 위젯을 그에 맞는 폼 요소안에 넣어서 사용해야한다.

- -

다음 예제를 보아라

- -
<form>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-
-  <p>
-    <label for="name">
-      <span>Name: </span>
-      <input type="text" id="name" name="username" required />
-      <strong><abbr title="required">*</abbr></strong>
-    </label>
-  </p>
-
-  <p>
-    <label for="birth">
-      <span>Date of birth: </span>
-      <input type="text" id="birth" name="userbirth" maxlength="10" /> <em>formated as mm/dd/yyyy</em>
-    </label>
-  </p>
-</form>
- -

이 예제에서 첫번째 단락은 필수적인 요소의 규칙들을 정의한다. 이 것은 스크린 리더와 같은 보조 기술이 필수 요소들을 찾기전에 출력하거나 읽기 위해서는 반드시 시작부분 나타내야 한다. 이런식으로 사용자는 항상 자신이 무엇을 하는지 알 수있다.

- -

첫번째 필드는 필수적이기 떄문에 라벨 요소는 name 과 * 로 필수적인 필드를 나타낸다  이런 식으로 하면 스크린 리더는 "Name star" 또는 "Name required"이라고 읽을 것이다. ( 스크린 리더의 설정에 따라 다르지만 항상 첫번째 단락에서 읽어진 것을 읽는다).  만약 두가지 라벨을 사용한다면, 사용자가 이 요소가 필수 요소 인지 보여지는지 보장 할 수없다.

- -

두번째 폼 요소는 비슷하게 작동한다. 이 기술을 사용하면 사용자에게 어떻게 데이터를 작성하는지 알려주는데 확신 할 수 있다.

- -

<output> 요소

- -

이 요소는 계산의 출력을 저장하는데 사용된다. 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).

- -

{{HTMLElement("output")}} 요소는 다음 속성은 지원한다.

- - - - - - - - - - - - - - - - - -
{{HTMLElement("output")}} 요소 속성
Attribute nameDefault valueDescription
{{htmlattrxref("for","output")}} 스페이스로 구분된 다른 요소의 ID로 설정하고 이 요소들에 값을 입력을 계산하는데 기여한다.(또는 다른 효과)
- -

form이 사용되는 일반적인 form 구조

- -

HTML 폼의 지정된 구조를 넘어서 하나의 HTML이라고 생각 하는게 좋다. T 이 의미는 HTML 폼을 구성하는데 HTML의 모든 능력을 사용할 수 있다는 것이다.

- -

예제에서 볼 수 있드니 라벨과 위젯을 둘러싸는데 최고의 방법은  {{HTMLElement("p")}}요소 나 {{HTMLElement("div")}}요소를 사용하는 것이다.

- -

게다가 {{HTMLElement("fieldset")}} 요소에 HTML 타이틀을 사용하고 복잡한 폼을 만드는데 구조에 섹션을 사용하는것도 일반적인 관행이다.

- -

HTML 목록은 체크박스나 라디오 버튼을 사용하는데 일반적으로 사용된다.

- -

간단한 지불 폼을 만들어 보자

- -
<form>
-  <h1>Payment form</h1>
-  <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
-
-  <section>
-    <h2>Contact information</h2>
-
-    <fieldset>
-      <legend>Title</legend>
-      <ul>
-        <li>
-          <label for="title_1">
-            <input type="radio" id="title_1" name="title" value="M." />
-            Mister
-          </label>
-        </li>
-        <li>
-          <label for="title_2">
-            <input type="radio" id="title_2" name="title" value="Ms." />
-            Miss
-          </label>
-        </li>
-      </ul>
-    </fieldset>
-
-    <p>
-      <label for="name">
-        <span>Name: </span>
-        <input type="text" id="name" name="username" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-
-     <p>
-      <label for="mail">
-        <span>E-mail: </span>
-        <input type="email" id="mail" name="usermail" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-  </section>
-
-  <section>
-    <h2>Payment information</h2>
-
-    <p>
-      <label for="card">
-        <span>Card type:</span>
-        <select id="card" name="usercard">
-          <option value="visa">Visa</option>
-          <option value="mc">Mastercard</option>
-          <option value="amex">American Express</option>
-        </select>
-      </label>
-    </p>
-    <p>
-      <label for="number">
-        <span>Card number:</span>
-        <input type="text" id="number" name="cardnumber" required />
-        <strong><abbr title="required">*</abbr></strong>
-      </label>
-    </p>
-    <p>
-      <label for="date">
-        <span>Expiration date:</span>
-        <input type="text" id="date" name="expiration" required />
-        <strong><abbr title="required">*</abbr></strong>
-        <em>formated as mm/yy</em>
-      </label>
-    </p>
-  </section>
-
-  <section>
-    <p>
-      <button>Validate the payment</button>
-    </p>
-  </section>
-</form>
- -

See this form in action (with a touch of CSS):

- -

{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}

- -

HTML 위젯

- -

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: The native form widgets.

- -

The <input> element

- -

이 요소는 거의 모든 것을 할 있기 떄문에 특별 한 종류이다. 간단하게 type속성을 설정하여 완전히 바뀔수 있다. 간단하게 하기 위해서 type속성의 값을 4가지로 분류하였다. 단일 라인 텍스트 필드, 텍스트 입력 없는 컨트롤, 시간이나 날짜 컨트롤, 버튼. 이와 같은 다형성 떄문에  {{HTMLElement("input")}} 요소는 많은 속성을 지원하지만  type 속성값에 따라 달라지기 떄문에 어느 속성이 적절한지, 어느 것이 필요한지  선택하는 것은 어려울 수 있다. 

- -

This is all summarized in the following table (for a full list of all attributes, visit the page for the {{HTMLElement("input")}} element):

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
type 속성 의 값설명필수 속성관련된 속성
단일 선 텍스트 필드
text이것은 가장 기본적인 텍스트 필드이다.  type속성을 위한 텍스트 값은 이 속성의 기본 값이다.(자동 유효성 검사를 하지않음) {{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")}}
email하나 또는 여러개 이메일 주소를 작성하기 위해 사용되는 필드 {{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")}}
password텍스트 필드의 값을 가리기 위해 사용되는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
search검색 하기 위한 텍스트 필드 {{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")}}
tel전화 번호를 입력할 수 있는 텍스트 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
url절대 URL을 다루기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("maxlength","input")}}, {{htmlattrxref("pattern","input")}}, {{htmlattrxref("placeholder","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("size","input")}}
텍스트 입력 없는 컨트롤
checkbox체크박스 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
color색상을 입력 받기위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("required","input")}}
fileA control that lets the user select a file. {{htmlattrxref("accept","input")}}, {{htmlattrxref("multiple","input")}}, {{htmlattrxref("required","input")}}
hidden보여주지 않는 컨트롤 이지만 서버로 전송되는 필드  
number소숫점을 입력받는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
radio라디오 버튼. 그룹 중 한가지만 선택하기 위한 필드 {{htmlattrxref("checked","input")}}, {{htmlattrxref("required","input")}}
range정확하지 않는 숫자를 입력받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("required","input")}}, {{htmlattrxref("step","input")}}
시간 과 날짜 컨트롤
date(년, 원, 일)날짜를 입력 받을 수 잇는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetimeUTC 타임 존 기반으로 전체 날짜와 시간(시간, 분, 초 )을 입력 받기 위한 필드 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
datetime-local타임존 기반이 아닌 날짜와 시간을 입력받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
month타임존 기반이 아닌 달과 년도를 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
time타임존 기반이 아닌 시간을 입력 받기 위한 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
week타임존 기반이 아닌 전체 날짜를 일주일-년도 숫자로 주 번호를 입력하는 컨트롤 {{htmlattrxref("autocomplete","input")}}, {{htmlattrxref("list","input")}}, {{htmlattrxref("max","input")}}, {{htmlattrxref("min","input")}}, {{htmlattrxref("readonly","input")}}, {{htmlattrxref("required","input")}}
버튼
button기본 행동이 없는 누르는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
image그래픽적인 전송버튼{{htmlattrxref("src","input")}}, {{htmlattrxref("alt","input")}}{{htmlattrxref("width","input")}}, {{htmlattrxref("height","input")}}, {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
reset폼의 내용을 초기화 하는 컨트롤 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
submit폼을 전송하는 버튼 {{htmlattrxref("formaction","input")}}, {{htmlattrxref("formenctype","input")}}, {{htmlattrxref("formmethod","input")}}, {{htmlattrxref("formnovalidate","input")}}, {{htmlattrxref("formtarget","input")}}
- -

몇가지 이유 때문에 브라우저에서 특정 type 속성의 값 설정을 지원하지 않으면 {{HTMLElement("input")}} 요소는  text 속성으로 렌더링 한다. 이것은 매력적이지 않아도 어쩔 수없이 폼이 작동하도록 한다.

- -

요소는 강력한 도구지만, 모든 것을 할수 없고 다른 것들을 다루기 위해 다른 요소들이 있다.

- -

<textarea> 요소

- -

이 요소는 다중 텍스트 필드로 설정된다. 이 요소는 사용자가 입력한 텍스트에 줄 바꿈을 할수 있다는 것을 제외하고 단일 라인 텍스트 필드와 정확하게 똑같이 작동한다. 또한 여러줄에 걸처 랜더링을 제어 하기위해 몇가지 추가 속성 설정을 허락한다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
 {{HTMLElement("textarea")}} 요소 속성
Attribute name기본값설명
{{htmlattrxref("cols","textarea")}}20보여지는 문자 너비의 평균을 기준으로 텍스트 컨트롤의 너비
{{htmlattrxref("rows","textarea")}} 보여지는 텍스트 행의 수
{{htmlattrxref("wrap","textarea")}}softhard, soft 이 둘중 하나의 값으로 어떻게 텍스트를 둘러쌀것인지 나타낸다.
- -

 {{HTMLElement("textarea")}} 요소는 {{HTMLElement("input")}} 요소와 다르게 작동한다. {{HTMLElement("input")}} 요소는 자동으로 닫히는 요소이다. 이는 자식 요소를 가질 수 없다는 것을 의미한다. 이와 반대로 요소는 text 콘텐츠를 자식으로 가질 수 있는 일반적인 요소이다.

- -

이는 두가지 영향이 있다.

- - - -

 예제를 따라가면 다음 두 요소는 똑같이 랜더링 되어 질것이다.

- -
<form>
-  <p>
-    <label for="text_1">With regular HTML</label><br>
-    <textarea id="text_1" name="regular"><p>I'm a paragraphe</p></textarea>
-  </p>
-  <p>
-    <label for="text_2">With escaped HTML</label><br>
-    <textarea id="text_2" name="escaped">&lt;p&gt;I'm a paragraphe&lt;/p&gt;</textarea>
-  </p>
-  <p>
-    <button>Send me</button>
-  </p>
-</form>
- -

<select>, <option>그리고 <optgroup> 요소

- -

요소는 선택 박스를 만들 수 있게 해준다(떄로는 콤보 박스라고 한다). 선택 박스는 사용자가 하나 이상 미리 정의 된 값을 선택하는 위젯이다. 단일 값 선택  박스와 다중 값 선택 박스는 다르다. 이에 대한 자세한 내용은 다음 문서를 확인해라 The native form widgets.

- -

선택 박스 안의 값들은  {{HTMLElement("option")}} 요소에서 정의되고 {{HTMLElement("optgroup")}} 요소 안에서 그룹화 될 수 있다.

- -

Let's take an example:

- -
<form>
-  <p>
-    <label for="myFruit">Pick a fruit</label>
-    <select id="myFruit" name="fruit">
-      <!-- There is a trick here you think you'll pick
-         a banana but you'll eat an orange >:-) -->
-      <option value="orange">Banana</option>
-      <option>Cherry</option>
-      <optgroup label="berries">
-        <option>Blueberry</option>
-        <option>Raspberry</option>
-        <option>Strawberry</option>
-      </optgroup>
-    </select>
-  </p>
-</form>
- -

{HTMLElement("option")}} 요소는 폼이 전송되면 전송될 value속성을 설정한다. 만약 value 속성을 바뜨리면 {{HTMLElement("option")}} 요소는 value 값을 선택 박스 값으로 사용된다.

- -

{{HTMLElement("optgroup")}} 요소의 라벨 속성은 값이 나오기전에 보여주고 옵션 같은 요소들은 선택할 수 없게 나온다..

- - - - - - - - - - - - - - - - - - - - - - -
{{HTMLElement("option")}} 요소 의 속성
속성 이름기본값설명
{{htmlattrxref("label","option")}} 이 속성은 옵션을 설명하는 라벨의 텍스트이다. 만약 라벨 속성이 정의되지 않으면 이 값은 요소의 텍스트 콘텐츠로 설정된다.
{{htmlattrxref("selected","option")}}(false)만약 이 속성이 불리언 값으로 설정되는 경우 처음에 선택된 상태로 시작하게된다.
- - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("optgroup")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("label","optgroup")}} The name of the group of options. This attribute is mandatory.
- -

<datalist>요소 

- -

이 요소는 기존에 있는 위젯들에 사전 설정 값을 제공 함으로써 위젯들을 확장시킨다. 가장 잘 알려진 사용 방법은 텍스트 필드의 자동 완성 목록이다. 값들은 {{HTMLElement("datalist")}} 요소 안에 있는 {{HTMLElement("option")}}요소의 값으로 사용할 수 있다.

- -

{{HTMLElement("datalist")}}요소와 바인드 하기위해서는 사용하는 요소의 list속성을 이용하여 설정해야한다. 이 속성은 {{HTMLElement("datalist")}} 요소의 id로 설정된다.

- -

요소는 최근에 HTML 폼으로 추가 되었다. 그러므로 아직 이를 지원하지 않는 브라우저들도 있다. 이 문제를 처리하기 위하여 아래에 약간 까다로운 예제가 있다.

- -
<form>
-  <p>
-    <label for="myFruit">What is your favorite fruit?</label>
-    <input type="text" id="myFruit" name="fruit" list="fruitList" />
-
-    <datalist id="fruitList">
-      <label for="suggestion">or pick a fruit</label>
-      <select id="suggestion" name="altFruit">
-        <option value="banana">Banana</option>
-        <option value="cherry">Cherry</option>
-        <option value="strawberry">Strawberry</option>
-      </select>
-    </datalist>
-  </p>
-</form>
- -

한편 {{HTMLElement("datalist")}} 요소를 지원하는 브라우저는 {{HTMLElement("option")}} 요소를 무시하고 이를 사용하는 요소를 확장 할 것이다. 이와 반대로 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저는 라벨과 선택 박스를 표시 할 것이다. 물론 {{HTMLElement("datalist")}} 요소를 지원하지 않는 브라우저에 대해 자바스크립트로 하는 다른 방법이 있지만 항상 자바스크립트만 사용하는 것은 좋은 것이 아니다.

- - - - - - - - - - - - -
Safari 6Screenshot of the datalist element fallback with Safari on Mac OS
Firefox 18Screenshot of the datalist element with Firefox on Mac OS
- -

<meter> 와 <progress> 요소들 

- -

이 두요소는 그래픽적으로 숫자 값을 표현 하는방법이다. 이 두 요소의 차이점은 두 요소의 의미가 다르다는 것이다.

- - - -

속성으로 인해 이 요소들은 다음 속성을 지정 가능하다.

- -


- {{HTMLElement("meter")}} 요소는 다음과 같은 속성을 가진다

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
{{htmlattrxref("min","meter")}}0The lower numeric bound of the measured range.
{{htmlattrxref("max","meter")}}1The upper numeric bound of the measured range.
{{htmlattrxref("low","meter")}}the min valueThe upper numeric bound of the low end of the measured range.
{{htmlattrxref("high","meter")}}the max valueThe lower numeric bound of the high end of the measured range.
{{htmlattrxref("optimum","meter")}} The optimal numeric value.
- - - - - - - - - - - - - - - - - -
Attributes for the {{HTMLElement("progress")}} element
Attribute nameDefault valueDescription
{{htmlattrxref("max","progress")}} This attribute describes how much work the task indicated by the {{HTMLElement("progress")}} element requires before it's complete.
- -

The <button> element 

- -

{{HTMLElement("button")}} 요소는 폼 버튼을 만드는 가장 쉬운 방법이다. 버튼은 type속성에 따라 3가지 타입을 가진다.

- - - -


- {HTMLElement("button")}} 요소의 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름기본값설명
{{htmlattrxref("type","button")}}submit버튼의 타입.  button, reset, submit 이 있다.
{{htmlattrxref("formaction","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 action 속성에 오버라이드 된다.
{{htmlattrxref("formenctype","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 enctype 속성에 오버라이드 된다.
{{htmlattrxref("formmethod","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 method 속성에 오버라이드 된다.
{{htmlattrxref("formnovalidate","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 novalidate 속성에 오버라이드 된다.
{{htmlattrxref("formtarget","button")}} 만약 버튼이 submit 버튼이면 이 속성은  {{HTMLElement("form")}}요소의 target 속성에 오버라이드 된다.
- -

기술적으로 말하면 {{HTMLElement("button")}} 요소와 {{HTMLElement("input")}} 요소의 속성에 정의된 버튼 요소는 거의 차이가 없다. 단 한가지 차이점은 버튼 자체의 라벨 이다.요소 안에서는 라벨은 오직 문자 데이터로만 나타 낼 수 있지만 {{HTMLElement("button")}} 요소에서는 어떠한 HTML이 될 수있다. 그래서 이에 따른 스타일을 디자인 할 수있다.

- -
Note: 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 name and a value attribute to a {{HTMLElement("button")}} element, they do not send the content of the value 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.
- -
 
- -

공통 속성

- -

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:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute nameDefault valueDescription
autofocus(false)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.
disabled(false)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 disabled attribute set, then the element is enabled.
form The form element that the widget is associated with. The value of the attribute must be the id 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.
name The name of the element; this is submitted with the form data.
value The element's initial value.
- -

Using ARIA to structure HTML forms

- -

ARIA is a W3C Candidate Recommendation which adds to HTML improved accessibility for rich Internet applications, including for forms. We will discuss its use in more detail in the "How to build custom form widgets" article, but there are some basics that are good to know.

- -

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.

- -

If you want to dig into using ARIA with HTML forms, feel free to read the related section in the ARIA documentation.

- -

The aria-labelledby attribute

- -

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 id attribute of the element to use as a label.

- -
<form>
-  <p id="fruitLabel">What's your favorite fruit</p>
-  <p>
-    <input type="text" name="fruit" aria-labelledby="fruitLabel">
-  </p>
-</form>
- -

Conceptually, it's the opposite of the for attribute on the {{HTMLElement("label")}} element. With the for attribute, you reference the id of the widget but with the aria-labbeldby attribute, you reference the id of the label.

- -

The aria-describedby attribute

- -

This attribute works like the aria-labelledby 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 aria-labelledby 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.

- -

The aria-label attribute

- -

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.

- -
<form>
-  <p>
-    <input type="search" name="q" aria-label="Search" />
-    <input type="submit" value="Go" />
-  </p>
-</form>
- -

The role attribute

- -

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.

- -

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.

- -

Those roles for form widgets are :

- - - -

It's also worth noting that there's something called a composite role:

- - - -

If those roles are extremely useful, know that there are more; ARIA is a very large specification. Digging into it can help you improve accessibility in areas far afield from HTML forms.

- -

결론

- -

You now have all the knowledge to properly structure your HTML forms; the next article will dig into implementation details and functional expectations: The native form widgets.

- -

볼거리

- - diff --git a/files/ko/learn/html/forms/index.html b/files/ko/learn/html/forms/index.html deleted file mode 100644 index f7244cbdc1..0000000000 --- a/files/ko/learn/html/forms/index.html +++ /dev/null @@ -1,358 +0,0 @@ ---- -title: HTML 폼 가이드 -slug: Learn/HTML/Forms -translation_of: Learn/Forms ---- -

이 가이드는 HTML 폼을 숙달 시키는데 도움이 되는 문서입니다. HTML 폼은 사용자와 상호작용할 수 있는 매우 강력한 도구입니다. 그러나 역사적으로 나 기술적인 이유로 사용자에게 항상 명확하게 기능을 제공할 수 있는 것은 아닙니다. 이 가이드에서 HTML 폼 관점에서 스타일 구조, 사용자 위젯으로 데이터 다루기 등 모든 것을 다룰 것입니다. 이러한 강력한 기술들을 즐기길 바랍니다!

- -

항목

- -
    -
  1. 나의 첫 HTML 폼
    2. -
  2. HTML HTML 폼 구성 방법
    3. -
  3. 기본 폼 위젯
    4. -
  4. CSS와 HTML 폼 -
      -
    1. HTML 폼 스타일
      2. -
    2. HTML 폼을 위한 고급 스타일
      3. -
    3. 폼 위젯을 위한 호환성 테이블 속성
      4. -
    -
    5. -
  5. 데이터 주고 받기
    6. -
  6. 데이터 유효성 검사
    7. -
  7. 사용자 폼 위젯 만드는 방법
    8. -
  8. 자바스크립트를 통해서 폼 전달 하기 -
      -
    1. FormData 객체 사용
      2. -
    -
    9. -
  9. 기존 브라우저에서 HTML 폼
    10. -
- -

HTML 문서

- -

HTML 요소

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
요소관련 DOM 인터페이스설명
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}button 요소는 클릭할 수 있는 버튼을 나타낸다.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}datalist 요소는 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 {{ HTMLElement("option") }} 요소의 집합을 포함합니다. 
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}fieldset 요소는 폼 안에 여러 폼 요소들을 그룹화 하는데 사용됩니다.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}form  요소는 사용자가 정보를 웹서버로 전송하도록 상호작용하는 요소를 포함하는 문서의 부분으로 나타냅니다.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}input 요소는 대화형 컨트롤 폼들을 생성하는데 사용됩니다.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}keygen 요소는 HTML 폼 요소의 일부로서 쉽게 키 데이터를 발생시키고 공개키를 전송을 위해서 존재 합니다.
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}label 요소는 사용자 인터페이스 항목에 대한 캡션을 나타냅니다.
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}legend 요소는 상위 요소인 {{ HTMLElement("fieldset") }} 컨텐츠를 위한 캡션을 나타냅니다.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}meter 요소는 알려진 범위 안에 정해 저 있는 스칼라 값이나 소수 값 주 하나를 나타냅니다.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}optgroup 요소는 {{ HTMLElement("select") }} 요소 안에 있는 옵션 그룹을 생성합니다.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}HTML option 요소는 {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }} 또는 {{ HTMLElement("datalist") }}요소 안에 항목을 나타내는 컨트롤을 생성하는데 사용됩니다.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}output 요소는 계산 결과를 나타냅니다.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}progress 요소는 작업 완료 진행 상태를 나타내는데 사용됩니다.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}select 요소는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}textarea 요소는 다중 라인 일반 텍스트 편집 컨트롤을 나타냅니다.
- -
-

Note: 모든 폼 요소들이나 모든 HTML요소들은 {{domxref("HTMLElement")}} 돔 인터페이스를 지원합니다.

-
- -

HTML 속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성 이름요소설명
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}서버가 받는 형식 목록, 일반적으로 file 형식을 사용합니다.
accept-charset{{ HTMLElement("form") }}지원하는 문자 집합 목록
action{{ HTMLElement("form") }}폼을 통해서 전송 정보를 처리하는 프로그램의 URL 
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}폼 안에서 브라우저로 부터 자동으로 완성되는 기본 값을 가진 컨트롤 인지 아닌지 나타냅니다.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}페이지가 로드된 후 요소가 자동으로 포커스 해야 되는지 설정합니다.
challenge{{ HTMLElement("keygen") }}공개 키(public key)와 함께 전송되는 문자열입니다.
checked{{ HTMLElement("input") }} -

해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정합니다. 

-
cols{{ HTMLElement("textarea") }} -

textarea의 세로줄 수를 설정합니다.

-
data{{ HTMLElement("object") }}자원의 URL을 명시합니다.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}사용자가 요소와 상호 작용할 수 있는 지 나타냅니다.
enctype{{ HTMLElement("form") }}POST방식으로 전송되는 데이터의 타입을 설정합니다.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} -

요소의 소유자인 폼을 나타냅니다.

-
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}허용되는 최댓값을 나타냅니다.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}요소에서 허용되는 특징의 최대 수를 명시합니다.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}허용되는 최솟값을 나타냅니다.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} -

요소의 이름. For example used by the server to identify the fields in form submits.

-
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }}
target{{ HTMLElement("form") }}
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
- -

Normative reference

- - 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 deleted file mode 100644 index f1d7c35437..0000000000 --- a/files/ko/learn/html/forms/sending_and_retrieving_form_data/index.html +++ /dev/null @@ -1,249 +0,0 @@ ---- -title: Sending and retrieving form data -slug: Learn/HTML/Forms/Sending_and_retrieving_form_data -translation_of: Learn/Forms/Sending_and_retrieving_form_data ---- -

많은 경우 HTML 폼은 서버에 데이터를 전송할 목적으로 사용된다. 서버는 데이터를 처리하고 사용자에게 응답을 보낼 것이다. 간단한 것 처럼 보이지만 데이터가 서버나 사용자에게 피해를 입히지 않기 위해서는 몇가지를 명심해야한다.

- -

데이터는 어디로 갈까?

- -

클라이언트/서버 구조

- -

웹은 간단히 말하면 클라이언트(파이어폭스, 크롬, 사파리, IE 등)는 서버(아파치, Nginx, IIS, 톰켓 등)로 HTTP프로토콜을 사용해 요청을 하는 클라이언트/서버 구조를 기본으로 작동된다. 서버 응답은 요청과 똑같은 프로토콜을 사용한다.

- -

A basic schema of the Web client/server architecture

- -

클라이언트 측에서 HTML폼 만큼 사용친화적으로 HTTP 요청을 서버에 보내는 편리한 것이 없다.이것은 사용자가 정보를 HTTP요청으로 전달을 할 수있게 만든다.

- -

클라이언트측: 데이터 보내기

- -

{{HTMLElement("form")}} 요소는 데이터 전송 방법을 정의한다. 제공하는 모든 속성은 사용자가 submit 버튼을 누를때 보내질 요청을 구성할 수 있도록  설계되었다. 두가지 중요한 속성은 {{htmlattrxref("action","form")}} 와 {{htmlattrxref("method","form")}}이다.

- -

{{htmlattrxref("action","form")}} 속성

- -

이 속성은 데이터를 어디로 보낼 것인지 지정한다. 이 값은 반드시 유효한 URL이어야 한다.만약 이 속성을 지정하지 않으면 데이터는 폼이 있는 페이지의 URL로 보내질 것이다.

- -
Examples
- -

첫번째 예제로 데이터는 http://foo.com로 보낼 것이다.

- -
<form action="http://foo.com">
- -

여기에서 데이터는 폼 페이지를 호스팅을 하는 같은 서버로 전송 되지만, 서버의  다른 URL로 전송된다.

- -
<form action="/somewhere_else">
- -

아래와 같이 속성을 지정하지 않으면 {{HTMLElement("form")}} 속성은 데이터를 폼을 포함한 페이지 주소로 보낼 것이다.

- -
<form>
- -

이전에 많은 페이지들은 데이터를 반드시 폼을 포함하는 페이지와 같은 페이지에 보내는 것을 나타내는 표기법을 다음과 같이 사용했다. 그러나 HTML5 이후로 속성은 필수로 지정하지 않아도 되기 떄문에 이제 더이상 필요하지 않는다.

- -
<form action="#">
- -
-

Note: HTTPS(보안 HTTP) 프로토콜을 사용하는 URL을 지정하는 것도 가능하다. 이 것을 사용하면 폼 자체가 안전하지 않은 페이지에 HTTP를 이용해서 접근하는  곳에 호스트된 경우에 데이터는 나머지 요청들과 함께 암호화된다. 반면, 만약 폼이 보안 페이지에서 호스트 된 경우라도  {{htmlattrxref("action","form")}} 속성에서 안전하지 않은 HTTP URL을  지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼때마다 보안 경고를 출력할 것이다 

-
- -

{{htmlattrxref("method","form")}} 속성

- -

이 속성은 데이터를 어떻게 보낼 것인지 정의한다. HTTP protocol 은 요청 방법에 대해 다양한 방법들을 제공한다.  HTML 폼 데이터는 오직 2가지 방법으로 만 전송 할 수 있는데 바로 GET 방식과 POST방식이 있다.

- -

이 두 가지 방식의 차이점을 이해하기 위해서는 뒤로 가서 HTTP가 어떻게 작동하는지 살펴봐야한다. 웹에서 리소스에 접근 할 때마다, 브라우저는 URL에 요청을 보낸다. HTTP요청은 두 가지 부분으로 나누어진다. 브라우저 수용력에 대한 전역 메타 테이터들을 포함하는 헤더와 서버에서 지정된 요청을 처리하는데 필요한 정보를 포함하는 바디가 있다.

- -
GET 방식
- -

GET 방식은 브라우저에서 서버에 주어진 리소스를 전달해달라고 말하기 위해 사용되는 방식이다. " 이봐 서버 난 이 리소스를 원해" 이 경우 브라우저는 바디가 비어 있는 요청을 하게 된다. 바디가 비어 있기 때문에,  만약 폼이 이 방식를 통하여 전송 하는 경우 데이터는 URL에 포함되어 서버로 보내진다.

- -
예제
- -

다음 폼을 생각 해 봅시다.

- -
<form action="http://foo.com" method="get">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

GET 방식을 사용하면 HTTP 요청은 다음과 같다.

- -
GET /?say=Hi&to=Mom HTTP/1.1
-Host: foo.com
- -
POST 방식
- -

POST 방식은 조금 다르다. 이는 브라우저의 HTTP요청 바디안에 제공되는 데이터를 고려한 응답을 요구하기 위해 서버로 보내는 방식이다. "이봐 서버 이 데이터를 보고 이거에 맞는 데이터를 보내봐" 만약 폼이 이 방식으로 사용하여 요청을 한다면 데이터는 HTTP요청 바디에 추가되어 전송된다.

- -

예제

- -

이 폼을 생각해보라(위 예제와 똑같다)

- -
<form action="http://foo.com" method="post">
-  <input name="say" value="Hi">
-  <input name="to" value="Mom">
-  <button>Send my greetings</button>
-</form>
- -

POST 방식을 사용하면 다음과 같이 HTTP 요청을 할 것이다,

- -
POST / HTTP/1.1
-Host: foo.com
-Content-Type: application/x-www-form-urlencoded
-Content-Length: 13
-
-say=Hi&to=Mom
- -

Content-Length 헤더는 바디의 크기를 나태내고,  Content-Type 헤더는 서버에 보낼 리소스의 종류 나태낸다. 우리는 비트(bit/조금씩?)에서 이러한 헤더를 설명 할 것이다.

- -

물론 http 요청은 절대 사용자에게 표시되지 않는다(파이어폭스 웹 콘솔이나 크롬 개발자 툴을 이용하지 않는이상). 사용자에게 보여지는 것은 호출한 URL뿐이다. 그래서 GET 요청은 사용자에게 URL바에서 데이터를 볼 수있지만,  POST 요청은 그러지 못한다. 이것은 두가지 이유에서 매우 중요하다.

- -
    -
  1. 만약 패스워드를 전송해야 되는 경우(또는 민간한 데이터의 부분), 절대 URL 바에 데이터를 출력하는 GET 방식을 사용해서는 안된다.
    2. -
  2. 만약 거대한 데이터를 보내는경우 POST 방식이 선호 된다. 왜냐하면 몇몇 브라우저는 URL들의 크기를 제한하기 떄문이다. 또한 많은 서버들이 URL들의 길이를 제한한다.
    3. -
- -

서버측: 데이터 가져오기

- -

어떠한 HTTP 방식을 선택 하든지 서버는 키/ 벨류 쌍의 목록과 같은 데이터를 얻기 위해 파싱된 문자열을 받을 것이다. 이러한 목록에 접근하는 방법은 사용하는 개발 플랫폼에 의존되고 어떠한 지정된 프레임워크에서 이것을 사용 할 수 있을것이다. 또한 사용 하는 기술은 동일한 키를 어떻게 처리할 것인지 결정한다. 보통 가장 마지막에 수신된 값이 우선순위를 가진다.

- -

예제: PHP 날것

- -

PHP 데이타에 접근 하기 위하여 몇가지 글로벌 객체를 제공한다. POST 방식 사용했다고 생각해보면, 다음과 같은 예제는 단순히 데이터만 받아 사용자에게 출력만 한다. 물론 데이터로 무엇을 할 것인지는 너어게 달려있다. 아마도 데이터를 사용자에게 출력하거나, 데이터베이스에 저장, 이메일에 전송 또는 다른 방법으로 처리할 것이다.

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

이 예제는 우리가 보낸 데이터를 페이지에 출력 할 것이다. 이 예제는 다음과 같이 출력할 것이다.

- -
Hi Mom
- -

예제: Python

- -

이 예제는 파이썬을 사용하여 제공된 데이터를 웹페이지에 출력하는 예제입니다. CGI 파이썬 패키지를 이용하여 폼데이터에 접근한다.

- -
#!/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)
- -

이 결과는 PHP와 똑같다?.

- -
Hi Mom
- -

다른 언어와 프레임 워크

- -

 Perl, Java, .Net, Ruby등 이와 같은 다른 서버측 기술이 있다. 이중에 최고라고 생각되는 것을 사용하면된다. 즉, 까다로운 일이 될 수 있기 때문에, 직접 기술을 사용하는 것은 매우 드문 일이 있음을 언급하는 것은 가치가있다.(?) 다음과 같은 폼을 더 쉽게 다루기위해 다음과 같은 좋은 프레임 워크들이 사용된다.

- - - -

이러한 프레임 워크를 사용하는 경우에도 폼을 다루는 것은 어쩔수 없이 쉽지 않다는 것을 주목을 할 필요가 있다. 그러나 이것을 사용하면 많은 시간을 절약 할 수 있다.

- -

특별한 경우: 파일 보내기

- -

파일은 HTML 폼에서 특별한 경우이다. 파일은 2진 데이터 또는 다른 데이터는 텍스트 데이터로 간주된다.HTTP는 텍스트 프로토콜 이기 때문에 2진 데이터를 다루기 위해서는 특별한 요구 사항이있다.

- -

{{htmlattrxref("enctype","form")}} 속성

- -

이 속성은 Content-Type  HTTP 헤더의 값을 지정할 수 있게 해준다. 서버에 데이터가 무슨 종류인지 전달하기 떄문에 이 해더는 매우 중요하다. 기본 값으로는 application/x-www-form-urlencoded. 이다. 사람 말로는 "이 폼 데이터는 URL 폼 형태로 인코딩되어 있습니다" 이다

- -

만약 파일을 보내고 싶다면 두 가지를 해야한다.

- - - -

예제 

- -
<form method="post" enctype="multipart/form-data">
-  <input type="file" name="myFile">
-  <button>Send the file</button>
-</form>
- -
-

Note: 몇 브라우저는 {{htmlattrxref("multiple","input")}}속성을 {{HTMLElement("input")}}요소에 지원하여 한번에 여러 요소를 전달 할 수 있다. 이러한 파일을 서버측에서 다루는 방법은 서버에서 어떠한 기술을 사용하냐에 따라서 매우 달라진다. 앞에서 언급 한바와 같이 프레임워크를 사용하면 더 쉽게 이용할 수있다.

-
- -
-

Warning: 많은 서버들이 남용을 예방하기 위해 HTTP요청과 파일의 크기를 제한하도록 구성된다. 파일을 전송하기 전에 서버 관리자에게 제한 크기를 확인하는것이 중요하다.

-
- -

보안 코너

- -

데이터를 서버로 보낼 떄마다 보안성에 대하여 생각해 봐야한다. HTML폼은 서버를 공격하는데 첫번째 매개변수가 될 수있다. 문제는 HTML폼에서 오지 않는다. 서버에서 어떻게 처리하냐에 따라 문제가 발생한다.

- -

일반적인 보안 결함

- -

무엇을 하는지에 따라 잘 알려진 보안 문제가 있다.

- -

XSS 과 CSRF

- -

크로스 사이트 스크립팅(XSS)과 크로스 사이트 요청 위조(CSRF)은 데이터를 출력하기 위해 사용자나 다른 사용자에게 데이터를 보낼떄 공격하는 일반적인 유형이다.

- -

XSS 공격자는 다른 사용자가 볼 웹 페이지에 클라이언트 측 스크립트를 주입할 수있다.크로스 사이트 스크립팅 취약점은 공격자가 동일 출처 정책(same origin policy)의 접근 제어를 우회하여 사용 될 수 있다. 이러한 공격은 조금 불편함에서 심각한 보안 위험에 이르기 까지 다양하게 영향을 미친다.

- -

CSRF는 XSS와 비슷하게 공격자가 같은 방법으로 시작한다. —클라이언트 스크립트를 웹페이지에 주입한다. - 그러나 이것의 대상은 다르다. CSRF 공격자는 높은 권한 계정(서버 관리자 같은)으로 권한을 상승하려고 시도하고 하지 말아야할 행동들을 할것이다.(예를들어 신뢰 할 수없는 사용자에게 데이터 전송하는 것)

- -

XSS 공격자는 사용자가 웹사이트에 대하여 가진 신뢰를 이용하여 공격자는 웹사이트가 사용자를 신뢰한다는 것을 이용한다.

- -

이러한 공격을 방지하려면 사용자가 서버에 보내는 데이터를 항상 확인해야하며 해당 내용을 표시해야 하는 경우 사용자가 제공한 HTML 콘텐츠를 표시하지 말아야 한다. 대신, 당신이 보여주려는 데이터가 사용자가 제공한 것과 동일한 데이터가 아니도록 데이터를 처리해야 한다. 현재 시장에 나와있는 거의 모든 프레임 워크는 어떤 유저가 보내는 데이터라도 HTML{{HTMLElement ( "script")}},{{HTMLElement ( "iframe")}} 및 {{HTMLElement ( "object")}} 요소를 데이터에서 제거하는 최소한의 필터를 구현한다. 이는 위험을 완화하는 데 도움은 되지만 반드시 근절한다고 보장할 수는 없다.

- -

SQL injection

- -

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 one of the main vector attacks against web sites.

- -

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 mysql_real_escape_string() on a PHP/MySQL infrastructure).

- -

HTTP header injection 와 email injection

- -

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.

- -

These attacks are mostly silent, and can turn your server into a zombie.

- -

Be paranoid: Never trust your users

- -

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.

- -

All data that comes to your server must be checked and sanitized. Always. No exception.

- - - -

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.

- -

결론

- -

여기서 볼 수 있듯이 폼데이터는 쉽게 보낼수 있지만 어플리케이션에서 데이터를 확보하는것은 까다로운 일이 될 수 있다. 프론트 앤드 개발자가 기억해야 할 것은 데이터 모델만 보안을 정한다고 끝이 아니라는 것이다. Yes, as we'll see, it's possible to perform client side data validation but the server can't trust this validation because it has no way to truly know what really happens on the client side.

- -

볼거리

- -

If you want to learn more about securing a web application, you can dig into these resources:

- - 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 deleted file mode 100644 index b997fc1f08..0000000000 --- a/files/ko/learn/html/forms/your_first_html_form/index.html +++ /dev/null @@ -1,272 +0,0 @@ ---- -title: 나의 첫 HTML 폼 -slug: Learn/HTML/Forms/Your_first_HTML_form -translation_of: Learn/Forms/Your_first_form ---- -

이 문서는 HTML 폼 소개 문서입니다. 간단한 폼들을 살펴보면서 HTML 폼을 만들기에 대한 기본적인 필요 사항들을 볼 수 있을 것이다. 이 문서는 HTML폼에 대해서는 아무것도 몰라도 되지만 다음 문서에 나와 있는 기본적인 HTML이나 CSS를 알아야 한다. (the basics of HTML, CSS)

- -

시작하기전에

- -

HTML 폼 이란?

- -

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상호 작용하는 것 중 중요한 기술 중에 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용한다. 일반적으로 데이터는 웹 서버로 전송되지만 웹페이지가 데이터를 사용하기 위하여 사용할 수 도 있다.

- -

HTML 폼은 하나 이상의 위젯으로 만들어 진다. 이러한 위젯들은 텍스트 필드(한줄 또는 여러줄), 셀렉 박스,  버튼, 체크박스, 라디오 버튼이 될 수 있다. 대부분 이러한 위젯들은 위젯을 설명하는 라벨과 함께 사용된다.

- -

폼을 사용하려면 무엇이 필요합니까?

- -

HTML을 다루기 위한 텍스트 에디터나 웹 브라우저외는 아무것도 필요 없습니다. 물론 비주얼 스튜디오, 이클립트, 앱타나 등 통합개발환경(IDE)을 사용하면 많은 이점이 있지만 이것은 만드는 사람 마음이다.

- -

HTML 폼과 일반적인 HTML 요소의 주요 차이점은 폼에 의해 수집된 데이터는 대부분 웹서버에 전송된다는 점이다. 이런 경우 데이터를 받거나 처리하는 웹서버를 설정해야한다. 웹서버를 설정하는 방법은 이 문서의 범위를 벗어나지만 알고 싶다면 다음 문서를 참조 하시오 Sending and retrieving form data.

- -

폼 디자인하기

- -

코드를 보기전에 항상 잠시 뒤로 물러나 폼에 대하여 생각하는 것이 더 중요하다.   간단한 모형을 디자인 하는것은 개발자가 사용자에게 묻고 싶은 데이터를 올바르게 정의하는데 도움을 준다. 사용자 경험 (UX)의 관점에서 폼이 많을수록 사용자들이 더 줄어든다는 사실을 기억하는게 중요하다. 반드시 필요한것이 무엇인지 생각하면서 간단하게 유지하는 것이 중요하다. 폼 디자인은 사이트나 어플리케이션을 만드는 과정 중 중요한 단계이다. 폼들의 디자인은 이 문서의 범위를 벗어나지만 만약 더 자세하게 알고 싶은 경우 다음 문서를 참조 하세요.

- - - -

이 문서에서는 간단한 문의를 하는 폼을 만들것이다. 거칠게 스케치 해보자.

- -

The form to build, roughly sketch

- -

우리가 만들 폼은 3개의 텍스트 필드와 하나의 버튼을 가지고 있다. 기본적으로 우리는 사용자에게 이름, 이메일, 문의사항을 물어 볼 것이고 버튼을 눌러서 웹서버로 데이터를 보내는게 목적이다.

- -

HTML를 직접 다루어 보자

- -

자 이제 HTML에가서 폼을 코딩 할 준비가 되었다. 우리의 문의하는 폼에서 다음과 같은 HTML 요소들을 사용할 것이다. {{HTMLElement("form")}}, {{HTMLElement("label")}}, {{HTMLElement("input")}}, {{HTMLElement("textarea")}}, and {{HTMLElement("button")}}.

- -

{{HTMLElement("form")}} 요소

- -

모든 HTML 폼은 {{HTMLElement("form")}} 요소로 다음과 같이 시작된다:

- -
<form action="/my-handling-form-page" method="post">
-
-</form>
- -

이 요소는 폼의 공식적인 형태이다. 이 요소는 다음 {{HTMLElement("div")}} 나 {{HTMLElement("p")}} 요소와 같이 사용되고,뿐만 아니라 폼이 동작하는 방식을 설정하는 일부 속성들을 지정 해야한다. 이러한 모든 속성은 선택적이지만 action 속성과 method 속성은 필수적으로 설정해야 한다.

- - - -

만약 이러한 속성에 더 자세한 내용을 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

- -

{{HTMLElement("label")}}, {{HTMLElement("input")}}, 그리고 {{HTMLElement("textarea")}} 요소 추가하기

- -

우리의 문의하는 폼은 정말 간단하고 라벨을 가지고 있는 세 개의 텍스트필드를 가지고 있다. 이름을 입력 받는 입력 필드는 한줄 텍스트 필드를 사용하고, 이메일을 입력 받는 입력 필드는 이메일만 입력받는 한줄 텍스트 필드를 사용하고, 문의 내용을 입력받는 입력 필드는 다중 라인 텍스트 필드가 사용 될것이다.

- -

HTML코드를 다음과 같이 짤 것이다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg"></textarea>
-    </div>
-</form>
- -

{{HTMLElement("div")}} 요소는 코드를 편리하게 구성하고 스타일링 쉽게 만들어 줍니다. 중요한 점은 for속성은 모든{{HTMLElement("label")}} 요소에서 공식적으로 폼 위젯과 라벨을 연결하는데 사용된는 것이다. 이 속성은 위젯에 맞는 ID를 참조한다. 이 것은 몇 가지 장점이 있다. 가장 두드러 지는 것은 사용자가 라벨을 눌럿을때 그거에 맞는 위젯을 활성화 시키는 것이다.만약 이 속성에 대한 장점을 더 알고 싶다면 다음 문서에 자세히 나와있다. How to structure an HTML form.

- -

{{HTMLElement("input")}} 요소의 가장 중요한 속성은 type 속성이다. 이 속성은 {{HTMLElement("input")}} 요소가 어떻게 입력을 받을 것인지 정의하기 떄문에 매우 중요하다. 이것은 아예 요소를 변경하기 떄문에 주의 해야한다. 만약 이것에 대하여 더 자세한 정보를 알고 싶다면 다음 문서를 참조 하라. native form widgets 우리의 예제에서는 이 속성의 기본 값인 오직 text값만 사용했다. 이 값은 제어나 유효성 검사 없이 모든 종류의 텍스트를 받아 들이는 한줄 텍스트 필드를 나타낸다. 또한 오직 이메일 주소만 받는 한줄 텍스트 필드 email값을 사용했다. 이 마지막 값은 기본 텍스트 필드를 사용자가 입력 한 데이터에 대한 몇 가지 검사를 수행하는 "지능형"필드의 종류로 전환한다. 만약 폼 데이터 유효성 확인에 대하여 자세히 알고싶다면 다음 문서를 참조 해라. Form data validation

- -

마지막 요소를 보기전에 다음 <input /> VS <textarea></textarea>요소를 봐야한다. 이것은 이상한 HTML 요소중 하나이다. <input>태그는 자동 닫힘 태그다 무슨 의미냐면 요소가 끝날떄 반드시 "/"닫는 태그에 추가해야 하는 것을 의미한다. 이와 반대로, {{HTMLElement("textarea")}}은 자동 닫힘 태그가 아니다 그래서 반드시 엔딩태그를 사용하여 요소를 종료해야한다. 이 것은 기본 값을 정의하는 특정 기능에 영향을 미친다. 요소의 기본 값 정의는 반드시 value 속성을 다음과 같이 지정 해야 한다.

- -
<input type="text" value="by default this element is filled with this text" />
- -

이와 반대로 {{HTMLElement("textarea")}}요소 에서 기본값을 정의하고 싶다면,  {{HTMLElement("textarea")}}요소의 시작 태그와 끝 태그 사이에 문자들을 다음과 같이 입력 하면된다.

- -
<textarea>by default this element is filled with this text</textarea>
- -

 {{HTMLElement("button")}} 요소로 끝내기

- -

우리의 폼이 거의 완성되간다. 이제 단지 사용자 데이터를 서버에 보낼수 있도록 버튼을 추가하면된다. 이것은 간단하게 {{HTMLElement("button")}} 요소를 사용한다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

버튼은 다음과 같은 3개 종류가 있다. submit, reset, button.

- - - -

알아두어야 할것은  {{HTMLElement("input")}} 요소를 사용하여 버튼 유형을 만들 수 있다.  {{HTMLElement("button")}}요소와 가장 큰 차이점은 {{HTMLElement("input")}}요소는 오직 일반 텍스트만 보내는 반면 {{HTMLElement("button")}}요소는 전체 HTML 콘텐츠를 보낸다.

- -

CSS로 더욱 나이스하게 만들기

- -

이제 우리는 HMLT폼을 가졋지만 가지고 있는 브라우저에서 보면 구리게 보인다.

- -

- -

CSS 스타일시트를 이용하여 조금만더 나이스하게 만들어 보자.

- -

폼을 가운데로 정렬하고 테두리를 보이게 하는것 부터 시작하자.

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

그 다음 각각 폼 위젯사이에 여백을 추가하자.

- -
form div + div {
-    margin-top: 1em;
-}
- -

이제 레이블에 초점을 맞추자. 우리의 폼을 더 읽기 쉽게 만들기 위해 모든 라벨들이 같은 사이즈와 같은 쪽을 정렬이 되게하자. 이 경우 오른쪽 정렬을 하지만 경우에 따라서 왼쪽 정렬도 좋을 수 있다.

- -
label {
-    /* To make sure that all label have the same size and are properly align */
-    display: inline-block;
-    width: 90px;
-    text-align: right;
-}
- -

HTML 폼을 다루는 가장 어려운 것중 하나는 HTML자체를 위젯으로 스타일 하는 것이다. 텍스트 필드는 쉽게 스타일 할수 있지만 다른 위젯들은 아니다. 만약 HTML 폼 위젯 스타일에 대하여 자세한 정보를 알고 싶으면 다음 문서를 참조하시오.  Styling HTML forms

- -

폰트, 크기, 테두리를 변경 해보자

- -
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 & feel of text field border */
-    border: 1px solid #999;
-}
- -

HTML 폼은 요소의 상태를 나타내는 많은 가상클래스 를 지원한다.예르들어 위젯이 활성화 되면 하이라이트 효과를 추가할 수있다. 이것은 사용자가 쉽게 따라가도록 하는 편리한 방법이다.

- -
input:focus, textarea:focus {
-    /* To give a little highlight on active elements */
-    border-color: #000;
-}
- -

다중 텍스트 필드는 몇몇 사용자 지정 스타일이 필요하다. 기본적으로  {{HTMLElement("textarea")}}요소는 바닥이 텍스트 기준선에 정렬되는 인라인 블록 이다. 대부분 이것들은 우리가 원하는 것이 아니다. 이런 경우 나이스하게 라벨과 필드를 정렬하려면  {{HTMLElement("textarea")}}요소의 vertical-align 속성을  top이라 변경 해야 한다.

- -

또하나 유용한 resize 프로퍼티는 사용자가 쉽게  {{HTMLElement("textarea")}}요소의 크기를 조정 할수 있게 해준다.

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

버튼도 특별한 스타일이 필요하다. 이를 위해 우선 {{HTMLElement("div")}}요소안에 버튼을 넣는다. 그리고 다른 위젯들과 정렬을 해야한다. 그럴러면 {{HTMLElement("label")}}요소를 흉내 내야한다. 그 후에 패딩 과 마진 속성을 지정하면된다

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

이제 폼이 더 나이스 해졋다.

- -

- -

웹서버로 데이터 보내기

- -

까다로울지 모르는 마지막 부분은 데이터를 서버측에서 처리하는 것이다. 앞에서 언급 된 바와 같이 HTML폼은 사용자에게 데이터를 물어보고 웹서버로 데이터를 전달하는 데 편리한 방법이다.

- -

{{HTMLElement("form")}} 요소는 action속성과 method속성을 사용하여 데이터를 어디에 어떻게 보낼것인지 정의한다.

- -

이걸로 충분하지않다. 데이터의 이름을 지정해야한다. 이러한 이름들은 브라우저측이나 서버 측 모두에게 중요하다. 브라우저에게는 데이터 각 부분에는 이름을 지정하고 서버측 에서는 이름을 이용하여 데이터를 다룰수 있게 해준다.

- -

그래서 데이터의 이름을 지정하려면 데이터를 받는 각 폼 위젯에 name속성을 지정해야한다.

- -
<form action="/my-handling-form-page" method="post">
-    <div>
-        <label for="name">Name:</label>
-        <input type="text" id="name" name="user_name" />
-    </div>
-    <div>
-        <label for="mail">E-mail:</label>
-        <input type="email" id="mail" name="user_email" />
-    </div>
-    <div>
-        <label for="msg">Message:</label>
-        <textarea id="msg" name="user_message"></textarea>
-    </div>
-
-    <div class="button">
-        <button type="submit">Send your message</button>
-    </div>
-</form>
- -

우리의 예제에서는 다음과 같이 3가지 데이터 이름을 지정했다.  "user_name", "user_email" and "user_message". 이 데이터는 "/my-handling-form-page"로  HTTP POST 방식으로 전송된다.

- -

서버 측에서는 URL에서 HTTP 요청에 의해 구현된 3개의 키/벨류 항목의 목록 데이터를 받게 된다. 스크립트로 데이터를 다루는 방법은 너에게 달려있다. 각각 의 서버 측 언어들은(PHP, Python, Ruby, Java, C# 등)자신만의 방식으로 이를 다룬다. 더 깊게 들어가는 것은 이문서의 범위를 벗어나지만 더자세히 알고 싶다면 다음 문서를 참조하시오. Sending and retrieving form data.

- -

결론

- -

축하한다! 첫번째 HTML폼을 만들었다.

- - - - - - - - - - - - - - - -
Live example
{{ EmbedLiveSample('A_simple_form', '100%', '240', '', 'Learn/HTML/Forms/Your_first_HTML_form/Example') }}
Check out the source code
- -

하지만 이제 시작일 뿐이고, 더 깊게 파고들 시간이다. HTML폼은 이 문서에서 본 것 보다 더 강력한 도구이고, 이 가이드의 다른 문서가 나머지 내용을 배우는데 도움이 될 것이다.

- -

{{NextMenu("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms")}}

diff --git a/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html b/files/ko/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..09ac7171e0 --- /dev/null +++ b/files/ko/learn/html/howto/author_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 +--- +

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

+

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

+

페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.

+

Tips

+

페이지 무게를 줄여라

+

페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.

+

불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다

+

HTML Tidy등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.

+

파일 수를 최소화하라

+

웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.

+

브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 If-Modified-Since 요청을 웹 서버로 보내게 됩니다.

+

웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.

+

브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.

+

도메인 검색을 줄이라

+

각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.

+

이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.

+

재사용되는 내용을 캐시하라

+

캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.

+

특히 Last-Modified 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, <tt>.html</tt>, <tt>.css</tt>)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 Last-Modified 헤더를 추가합니다. 동적인 페이지(예를 들면, <tt>.php</tt>, <tt>.aspx</tt>)는 물론 불가능합니다.

+

그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.

+

추가 정보:

+
    +
  1. RSS 해커들을 위한 HTTP 조건부 GET
    2. +
  2. HTTP 304: Not Modified
    3. +
  3. On HTTP Last-Modified and ETag
    4. +
+

페이지 컴포넌트의 순서를 최적화

+

사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.

+

페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.

+

페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.

+

inline script 수를 최소화

+

inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 document.write()의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. document.write()에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.

+

최신 CSS와 올바른 markup을 사용하라

+

최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.

+

올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를 + + 전처리(pre-process) + 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, HTML Tidy는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.

+

내용을 조각내라

+

table기반의 레이아웃을 <div>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.

+

아래와 같이 깊게 중첩된 table 대신

+
+ 
<TABLE>
+  <TABLE>
+    <TABLE>
+          ...
+    </TABLE>
+  </TABLE>
+</TABLE>
+
+

중첩되지 않은 table 또는 div를 쓰라

+
<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+

그림과 표의 크기를 명시하라

+

브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 그림의 height와 width가 명시되어야 합니다.

+

표는 CSS 선택자:속성 조합이다.

+
+

table-layout: fixed;

+
+

그리고 COL과 COLGROUP 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.

+

사용자 에이전트의 요구사항을 적절하게 선택하라

+

웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?

+

이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.

+

그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.

+

페이지 구조 예

+

· HTML

+
+
+ · HEAD
+
+
+
+
+
+ · LINK ...
+ 페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.
+
+
+
+
+
+
+
+ · SCRIPT ...
+ JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.
+
+ 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
+
+
+
+
+
+ · BODY
+
+ · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.
+
+
+
+
+
+ · SCRIPT ...
+ DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.
+
+ 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
+
+ 만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.
+
+
+
+

관련 링크

+ +
+

원문 정보

+ +
+

 

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 deleted file mode 100644 index 8a1d0cb625..0000000000 --- a/files/ko/learn/html/howto/mark_abbreviations_and_make_them_understandable/index.html +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: 약자 표시 및 이해시키는 방법 -slug: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable -tags: - - HTML - - 초보 -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations -translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable ---- -
-

HTML은 독자가 이해할 수 있도록 해주는 약자를 표시해주는 단순하고 직관적인 방법을 제공합니다.

-
- - - - - - - - - - - - -
먼저:기초적인 HTML 문서 만들기에 익숙해지셔야 합니다.
목표:HTML로 어떻게 약자 및 두음문자를 표시하는지 알아봅시다.
- -

약자에 대해

- -

항상 우리는 글을 쓸 때 약자나 두음문자를 사용합니다.('중화인민공화국'의 '중국'같이 짧게 적는 것이 약자, '아껴쓰고, 나눠쓰고, 바꿔쓰고, 다시쓰고'의 '아나바다'와 같이 첫 글자만 골라서 쓰는 것이 두음문자입니다.)

- -

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:

- -
유럽연합(UE)은 28 개의 주로, 합중국(US)은 50 개의 주로 이루어져 있습니다. US는 연방제 공화국, UE는 자치주들이 정치적, 경제적으로 결속한 집단입니다.
- -
-

이렇게 하면 모든 웹 페이지에 완전히 유효하지만, HTML은 독자들에게 약자를 설명하기 위한 부가적인 방법을 제공해줍니다.

-
- -

abbr 요소

- -

HTML 약자 요소 ({{HTMLElement("abbr")}})는 약자에 익숙하지 않거나 시각장애우같이 스크린 리더를 실행해야 하는 사람들을 돕기 위한 약자나 두음문자를 말합니다. 가장 중요한 규칙은, 가능한 언제든지 쓰라는 것입니다.

- -
-

알림: <acronym> 요소에 대해 들어보셨겠지만, <acronym>은 사장되었으므로 브라우저에서 언제든지 지원을 끊을 수 있기 때문에 사용하지 말아야 합니다.

-
- -
<p>I need to talk to you <abbr>ASAP</abbr>.</p>
- -

이렇게 title 속성으로 약자를 설명할 수도 있습니다:

- -
<p>I need to talk to you <abbr title="as soon as possible">ASAP</abbr>.</p>
- -

언제 title 속성을 적어야 할까요? 마음대로 시면 됩니다. 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.

- -
-

Note: In languages with grammatical number (especially languages with more than two numbers, like Arabic), use the same grammatical number in your title attribute as inside your <abbr> element.

-
- -

{{glossary("CSS")}}로 약자를 가리키는 가시적인 정보를 추가, 변경, 제거하실 수 있습니다. 보통 마우스를 대면 브라우저가 title 속성의 콘텐츠를 툴팁으로 보여준다는 것도 기억하십시오. 이전의 예시대로 하면 이렇게 보여집니다:

- -

{{ EmbedLiveSample('The_abbr_element','100%',90) }}

- -
-

중요: 만약 사람들이 약자를 이해하는 것을 따진다면, 절대로 title 속성에 의존하지 마세요. Spell your abbreviation out in the text on first occurrence. 툴팁에 접근하려면 마우스가 필요합니다. 이것은 폰이나 키보드, 스크린 리더를 쓰는 사람들을 배제합니다.

-
- -

실전

- -

{{HTMLElement('abbr')}}에 대해 알아봅시다. 이 글 바로 밑에 약자를 <abbr>로 표시하고 title 속성으로 설명합니다. 다 했으면 잘 되었는지 보기 위해 "show results"를 눌러봅시다. 용어 사전에서 모든 약자들을 보실 수 있습니다.

- - - -

{{ EmbedLiveSample('Exercise','100%',220) }}

- -

더 알아보기

- - diff --git a/files/ko/learn/html/howto/use_data_attributes/index.html b/files/ko/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..d4abd5da57 --- /dev/null +++ b/files/ko/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,82 @@ +--- +title: 데이터 속성 사용하기 +slug: Learn/HTML/Howto/데이터_속성_사용하기 +tags: + - HTML + - HTML5 + - 가이드 + - 예제 + - 웹 + - 전용 데이터 속성 +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +
{{LearnSidebar}}
+ +

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

+ +

HTML 문법

+ +

문법은 간단합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 data 사용법이 있습니다:

+ +
<article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars">
+...
+</article>
+ +

JavaScript 에서 접근하기

+ +

JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.

+ +

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

+ +
var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"
+ +

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

+ +

CSS 에서 접근하기

+ +

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 생성된 content 를 사용하면 됩니다.:

+ +
article::before {
+  content: attr(data-parent);
+}
+ +

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

+ +
article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}
+ +

이 JSBin 예시에서 이들이 함께 작동하는 것을 볼 수 있습니다. 

+ +

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요. (JSBin 예시).

+ +

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

+ +

문제점

+ +

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.

+ +

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

+ +

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

+ +

Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

+ +

더 알아보기

+ + diff --git "a/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" "b/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" deleted file mode 100644 index d4abd5da57..0000000000 --- "a/files/ko/learn/html/howto/\353\215\260\354\235\264\355\204\260_\354\206\215\354\204\261_\354\202\254\354\232\251\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 데이터 속성 사용하기 -slug: Learn/HTML/Howto/데이터_속성_사용하기 -tags: - - HTML - - HTML5 - - 가이드 - - 예제 - - 웹 - - 전용 데이터 속성 -translation_of: Learn/HTML/Howto/Use_data_attributes ---- -
{{LearnSidebar}}
- -

HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인되었습니다. data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, {{domxref("Node.setUserData()")}}과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다.

- -

HTML 문법

- -

문법은 간단합니다. 어느 엘리멘트에나 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있어요. 아래 data 사용법이 있습니다:

- -
<article
-  id="electriccars"
-  data-columns="3"
-  data-index-number="12314"
-  data-parent="cars">
-...
-</article>
- -

JavaScript 에서 접근하기

- -

JavaScript 에서 이 속성 값들을 읽는 방법은 너무 간단합니다. 값을 읽기 위한 완전한 HTML 이름과 함께 {{domxref("Element.getAttribute", "getAttribute()")}} 를 사용하면 됩니다. 그러나 표준은 더 간단한 방법을 정의합니다.:  {{domxref("DOMStringMap")}} 는 {{domxref("HTMLElement.dataset", "dataset")}} 속성을 통해 읽어낼 수 있습니다.

- -

dataset 객체를 통해 data 속성을 가져오기 위해서는 속성 이름의 data- 뒷 부분을 사용합니다.(대시들은 camelCase로 변환되는 것에 주의하세요.) 

- -
var article = document.getElementById('electriccars');
-
-article.dataset.columns // "3"
-article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"
- -

각 속성은 문자열이며 읽거나 쓸 수 있습니다. 위의 경우에서 article.dataset.columns = 5와 같이 설정하면 해당 속성을 "5"로 변경할 것입니다.

- -

CSS 에서 접근하기

- -

데이터 속성은 순 HTML 속성이기 때문에 CSS에서도 접근할 수 있다는 것에 주목하세요. 예를 들어, 부모 데이터를 article에서 보여주려면 {{cssxref("attr")}} 함수의 생성된 content 를 사용하면 됩니다.:

- -
article::before {
-  content: attr(data-parent);
-}
- -

CSS의 속성 선택자도 데이터에 따라 스타일을 바꾸는데 사용할 수 있습니다.:

- -
article[data-columns='3'] {
-  width: 400px;
-}
-article[data-columns='4'] {
-  width: 600px;
-}
- -

이 JSBin 예시에서 이들이 함께 작동하는 것을 볼 수 있습니다. 

- -

데이터 속성들은 게임 점수와 같이 계속 변하는 정보도 저장할 수 있습니다. CSS선택자와 자바스크립트 접근을 이용해서 display 규칙을 사용하지 않고도 훌륭한 효과를 만들 수도 있습니다. 생성된 content와 CSS transition의 예시를 보려면 이 screencast 를 확인하세요. (JSBin 예시).

- -

데이터 값은 문자열입니다. 스타일을 적용하려면 숫자 값은 선택자에 따옴표 안에 써주어야 합니다.

- -

문제점

- -

보여야 하고 접근 가능해야하는 내용은 데이터 속성에 저장하지 마세요. 접근 보조 기술이 접근할 수 없기 때문입니다. 또한 검색 크롤러가 데이터 속성의 값을 찾지 못할 것입니다.

- -

고려해야할 주요한 문제는 인터넷 익스플로러의 지원과 성능입니다. 인터넷 익스플로러11+ 은 표준을 지원하지만, 이전 버전들은 dataset을 지원하지 않습니다. IE 10 이하를 지원하기 위해서는 대신 {{domxref("Element.getAttribute", "getAttribute()")}}를 통해 데이터 속성을 접근해야 합니다. 또한, JS 데이터 저장소에 저장하는 것과 비교해서 데이터 속성 읽기의 성능은 저조합니다.

- -

하지만 이 때문에, 커스텀 요소와 관련된 메타 데이터를 위해서는 훌륭한 해결책입니다.

- -

Firefox 49.0.2(아마도 이전/이후의 버전)에서는,1022 데이터를 초과하는 데이터 속성은 자바스크립트(EcmaScript 4)가 읽지 못할 것입니다.

- -

더 알아보기

- - 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 deleted file mode 100644 index d6930ac381..0000000000 --- a/files/ko/learn/html/multimedia_and_embedding/ideo_and_audio_content/index.html +++ /dev/null @@ -1,327 +0,0 @@ ---- -title: 비디오 그리고 오디오 컨텐츠 -slug: Learn/HTML/Multimedia_and_embedding/ideo_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
- -

이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 {{htmlelement("video")}}와 {{htmlelement("audio")}}  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.

- - - - - - - - - - - - -
사전 지식:기본 컴퓨터 사용능력, 기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본 원리(HTML 시작에서 다룬 내용) 및 HTML의 이미지
목표:비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.
- -

웹 상에서 비디오 그리고 오디오

- -

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 Flash (and later, Silverlight) 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.

- -

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.

- -

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

- -
-

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. 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.

-
- -

The <video> element

- -

The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:

- -
<video src="rabbit320.webm" controls>
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
-</video>
- -

The features of note are:

- -
-
{{htmlattrxref("src","video")}}
-
In the same way as for the {{htmlelement("img")}} element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.
-
{{htmlattrxref("controls","video")}}
-
Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.
-
The paragraph inside the <video> tags
-
This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> 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.
-
- -

The embedded video will look something like this:

- -

A simple video player showing a video of a small white rabbit

- -

You can try the example live here (see also the source code.)

- -

Using multiple source formats to improve compatibility

- -

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.

- -

Contents of a media file

- -

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. 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.

- -

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.

- -

Diagram conceptualizing the contents of a media file at the track level.

- -

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 audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. 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).

- -

For example:

- - - -

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.

- -

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.

- -

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

- -

Media file support in browsers

- -
-

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.

- -

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.

-
- -

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 {{Glossary("Codec","codecs")}}, 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.

- -

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.

- -

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.

- -

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

- -

So how do we do this? Take a look at the following updated example (try it live here, also):

- -
<video controls>
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
- -

Here we've taken the src 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.

- -

Each <source> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The type attribute contains the {{glossary("MIME type")}} of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. Iftype 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.

- -

Refer to our guide to media types and formats 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.

- -

Other <video> features

- -

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

- -
<video controls width="400" height="400"
-       autoplay loop muted
-       poster="poster.png">
-  <source src="rabbit320.mp4" type="video/mp4">
-  <source src="rabbit320.webm" type="video/webm">
-  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-</video>
-
- -

The resulting UI looks something like this:

- -

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

- -

The new features are:

- -
-
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
-
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 aspect ratio. 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.
-
{{htmlattrxref("autoplay","video")}}
-
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.
-
{{htmlattrxref("loop","video")}}
-
Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
-
{{htmlattrxref("muted","video")}}
-
Causes the media to play with the sound turned off by default.
-
{{htmlattrxref("poster","video")}}
-
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.
-
{{htmlattrxref("preload","video")}}
-
-

Used for buffering large files; it can take one of three values:

- -
    -
  • "none" does not buffer the file
    • -
  • "auto" buffers the media file
    • -
  • "metadata" buffers only the metadata for the file
    • -
-
-
- -

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay 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!

- -

The <audio> element

- -

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:

- -
<audio controls>
-  <source src="viper.mp3" type="audio/mp3">
-  <source src="viper.ogg" type="audio/ogg">
-  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
-</audio>
- -

This produces something like the following in a browser:

- -

A simple audio player with a play button, timer, volume control, and progress bar

- -
-

Note: You can run the audio demo live on Github (also see the audio player source code.)

-
- -

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:

- - - -

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

- -

Restarting media playback

- -

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:

- -
const mediaElem = document.getElementById("my-media-element");
-mediaElem.load();
- -

Detecting track addition and removal

- -

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:

- -
const mediaElem = document.querySelector("video");
-mediaElem.audioTracks.onaddtrack = function(event) {
-  audioTrackAdded(event.track);
-}
-
- -

You'll find more information about this in our {{domxref("TrackEvent")}} documentation.

- -

Displaying video text tracks

- -

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:

- - - -

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 WebVTT file format and the {{htmlelement("track")}} element.

- -
-

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

-
- -

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 cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

- -
-
subtitles
-
Translations of foreign material, for people who don't understand the words spoken in the audio.
-
captions
-
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
-
timed descriptions
-
Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.
-
- -

A typical WebVTT file will look something like this:

- -
WEBVTT
-
-1
-00:00:22.230 --> 00:00:24.606
-This is the first subtitle.
-
-2
-00:00:30.739 --> 00:00:34.074
-This is the second.
-
-  ...
-
- -

To get this displayed along with the HTML media playback, you need to:

- -
    -
  1. Save it as a .vtt file in a sensible place.
    2. -
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. -
- -

Here's an example:

- -
<video controls>
-    <source src="example.mp4" type="video/mp4">
-    <source src="example.webm" type="video/webm">
-    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
-</video>
- -

This will result in a video that has subtitles displayed, kind of like this:

- -

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

- -

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code 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.

- -
-

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

-
- -

Active learning: Embedding your own audio and video

- -

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 Miro Video Converter and Audacity. We'd like you to have a go!

- -

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

- -

We would like you to:

- -
    -
  1. Save your audio and video files in a new directory on your computer.
    2. -
  2. Create a new HTML file in the same directory, called index.html.
    3. -
  3. Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.
    4. -
  4. 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.
    5. -
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. -
- -

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

- -

Test your skills!

- -

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 Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

- -

Summary

- -

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

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

- -

In this module

- - diff --git a/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ko/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..d6930ac381 --- /dev/null +++ b/files/ko/learn/html/multimedia_and_embedding/video_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 +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
+ +

이제 우리는 웹페이지에 간단한 이미지를 추가하는 것에 익숙해졌으므로, 다음 단계는 HTML 문서에 비디오와 오디오 플레이어를 추가하는 것이다! 이 기사에서는 {{htmlelement("video")}}와 {{htmlelement("audio")}}  요소들로 그렇게 하는 것에 대해 살펴보고, 동영상에 캡션/자막을 추가하는 방법을 살펴봄으로써 마무리하겠다.

+ + + + + + + + + + + + +
사전 지식:기본 컴퓨터 사용능력, 기본 소프트웨어 설치, 파일 작업에 대한 기본 지식, HTML 기본 원리(HTML 시작에서 다룬 내용) 및 HTML의 이미지
목표:비디오 및 오디오 컨텐츠를 웹 페이지에 포함시키고 비디오에 캡션/자막을 추가하는 방법을 배웁니다.
+ +

웹 상에서 비디오 그리고 오디오

+ +

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 Flash (and later, Silverlight) 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.

+ +

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.

+ +

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

+ +
+

Note: Before you begin here, you should also know that there are quite a few OVPs (online video providers) like YouTube, Dailymotion, and Vimeo, and online audio providers like Soundcloud. 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.

+
+ +

The <video> element

+ +

The {{htmlelement("video")}} element allows you to embed a video very easily. A really simple example looks like this:

+ +
<video src="rabbit320.webm" controls>
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
+</video>
+ +

The features of note are:

+ +
+
{{htmlattrxref("src","video")}}
+
In the same way as for the {{htmlelement("img")}} element, the src (source) attribute contains a path to the video you want to embed. It works in exactly the same way.
+
{{htmlattrxref("controls","video")}}
+
Users must be able to control video and audio playback (it's especially critical for people who have epilepsy.) You must either use the controls attribute to include the browser's own control interface, or build your interface using the appropriate JavaScript API. At a minimum, the interface must include a way to start and stop the media, and to adjust the volume.
+
The paragraph inside the <video> tags
+
This is called fallback content — this will be displayed if the browser accessing the page doesn't support the <video> 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.
+
+ +

The embedded video will look something like this:

+ +

A simple video player showing a video of a small white rabbit

+ +

You can try the example live here (see also the source code.)

+ +

Using multiple source formats to improve compatibility

+ +

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.

+ +

Contents of a media file

+ +

First, let's go through the terminology quickly. Formats like MP3, MP4 and WebM are called container formats. 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.

+ +

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.

+ +

Diagram conceptualizing the contents of a media file at the track level.

+ +

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 audio codec, while video tracks are encoded using (as you probably have guessed) a video codec. 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).

+ +

For example:

+ + + +

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.

+ +

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.

+ +

An audio player will tend to play an audio track directly, e.g. an MP3 or Ogg file. These don't need containers.

+ +

Media file support in browsers

+ +
+

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.

+ +

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.

+
+ +

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 {{Glossary("Codec","codecs")}}, 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.

+ +

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.

+ +

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.

+ +

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

+ +

So how do we do this? Take a look at the following updated example (try it live here, also):

+ +
<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+ +

Here we've taken the src 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.

+ +

Each <source> element also has a {{htmlattrxref("type", "source")}} attribute. This is optional, but it is advised that you include it. The type attribute contains the {{glossary("MIME type")}} of the file specified by the <source>, and browsers can use the type to immediately skip videos they don't understand. Iftype 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.

+ +

Refer to our guide to media types and formats 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.

+ +

Other <video> features

+ +

There are a number of other features you can include when displaying an HTML video. Take a look at our next example:

+ +
<video controls width="400" height="400"
+       autoplay loop muted
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+
+ +

The resulting UI looks something like this:

+ +

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!

+ +

The new features are:

+ +
+
{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}
+
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 aspect ratio. 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.
+
{{htmlattrxref("autoplay","video")}}
+
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.
+
{{htmlattrxref("loop","video")}}
+
Makes the video (or audio) start playing again whenever it finishes. This can also be annoying, so only use if really necessary.
+
{{htmlattrxref("muted","video")}}
+
Causes the media to play with the sound turned off by default.
+
{{htmlattrxref("poster","video")}}
+
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.
+
{{htmlattrxref("preload","video")}}
+
+

Used for buffering large files; it can take one of three values:

+ +
    +
  • "none" does not buffer the file
    • +
  • "auto" buffers the media file
    • +
  • "metadata" buffers only the metadata for the file
    • +
+
+
+ +

You can find the above example available to play live on Github (also see the source code.) Note that we haven't included the autoplay 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!

+ +

The <audio> element

+ +

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:

+ +
<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+ +

This produces something like the following in a browser:

+ +

A simple audio player with a play button, timer, volume control, and progress bar

+ +
+

Note: You can run the audio demo live on Github (also see the audio player source code.)

+
+ +

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:

+ + + +

Other than this, <audio> supports all the same features as <video> — review the above sections for more information about them.

+ +

Restarting media playback

+ +

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:

+ +
const mediaElem = document.getElementById("my-media-element");
+mediaElem.load();
+ +

Detecting track addition and removal

+ +

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:

+ +
const mediaElem = document.querySelector("video");
+mediaElem.audioTracks.onaddtrack = function(event) {
+  audioTrackAdded(event.track);
+}
+
+ +

You'll find more information about this in our {{domxref("TrackEvent")}} documentation.

+ +

Displaying video text tracks

+ +

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:

+ + + +

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 WebVTT file format and the {{htmlelement("track")}} element.

+ +
+

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

+
+ +

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 cues, and there are several kinds of cues which are used for different purposes. The most common cues are:

+ +
+
subtitles
+
Translations of foreign material, for people who don't understand the words spoken in the audio.
+
captions
+
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
+
timed descriptions
+
Text which should be spoken by the media player in order to describe important visuals to blind or otherwise visually impaired users.
+
+ +

A typical WebVTT file will look something like this:

+ +
WEBVTT
+
+1
+00:00:22.230 --> 00:00:24.606
+This is the first subtitle.
+
+2
+00:00:30.739 --> 00:00:34.074
+This is the second.
+
+  ...
+
+ +

To get this displayed along with the HTML media playback, you need to:

+ +
    +
  1. Save it as a .vtt file in a sensible place.
    2. +
  2. Link to the .vtt file with the {{htmlelement("track")}} element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
    3. +
+ +

Here's an example:

+ +
<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+ +

This will result in a video that has subtitles displayed, kind of like this:

+ +

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

+ +

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code 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.

+ +
+

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

+
+ +

Active learning: Embedding your own audio and video

+ +

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 Miro Video Converter and Audacity. We'd like you to have a go!

+ +

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

+ +

We would like you to:

+ +
    +
  1. Save your audio and video files in a new directory on your computer.
    2. +
  2. Create a new HTML file in the same directory, called index.html.
    3. +
  3. Add {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements to the page; make them display the default browser controls.
    4. +
  4. 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.
    5. +
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.
    6. +
+ +

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

+ +

Test your skills!

+ +

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 Test your skills: Multimedia and embedding. Note that the third assessment question in this test assumes knowledge of some of the techniques covered in the next article, so you may want to read that before attempting it.

+ +

Summary

+ +

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

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}

+ +

In this module

+ + diff --git a/files/ko/learn/infrastructure/index.html b/files/ko/learn/infrastructure/index.html deleted file mode 100644 index 3752c49274..0000000000 --- a/files/ko/learn/infrastructure/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Infrastructure -slug: Learn/Infrastructure -translation_of: Learn/Common_questions -translation_of_original: Learn/Infrastructure ---- -

이 능력은 인터넷 기술 스택에 대해  잘 이해할 수 있도록 해줍니다. 알아야 할 것들을 작고, 세부적 기술들로 나누었습니다:

- -

기본 스킬

- -

웹에 익숙하지 않으시다면 여기서부터 시작하세요. 웹에 관련된 전문용어를 이해하기위해서 용어사전을 참고하는 것을 추천합니다.

- -

중급 스킬

- -

웹에 익숙해지셨다면, 여기에 더 자세한 것들이 있습니다:

- -

고급 스킬

- -

경험있는 웹 저자라면, 특정 주제나 특별한 기술들에 흥미를 느끼실 것입니다.

diff --git a/files/ko/learn/javascript/building_blocks/conditionals/index.html b/files/ko/learn/javascript/building_blocks/conditionals/index.html new file mode 100644 index 0000000000..858d6f9116 --- /dev/null +++ b/files/ko/learn/javascript/building_blocks/conditionals/index.html @@ -0,0 +1,770 @@ +--- +title: Making decisions in your code — 조건문 +slug: Learn/JavaScript/Building_blocks/조건문 +translation_of: Learn/JavaScript/Building_blocks/conditionals +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
+ +

어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.

+ + + + + + + + + + + + +
선행 조건: +

기본적인 컴퓨터 활용 능력, HTML, CSS, Javascript 첫 걸음

+
목표: +

자바스크립트에서 조건문의 사용법을 이해합니다.

+
+ +

당신은 하나의 조건을 가질 수 있습니다.

+ +

사람(과 동물)은 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 자신의 경험을 바탕으로 결정합니다.

+ +

조건문은 결정해야 하는 선택(예를 들면, "과자 하나? 두 개?)부터 선택의 결과(과자를 하나 먹으면 여전히 배고플 수 있고, 두 개를 먹으면 배는 부르지만, 엄마한테 과자를 다 먹었다고 혼날 수 있다)까지 자바스크립트에서 의사 결정을 내릴 수 있습니다. 

+ +

+ +

if ... else 문

+ +

자바스크립트에서 사용하는 조건문 중에서 가장 일반적인 유형을 봅시다. — the humble if ... else statement.

+ +

if ... else 문법

+ +

if...else 문법은 {{glossary("pseudocode")}} 다음과 같습니다:

+ +
if (condition) {
+  code to run if condition is true
+} else {
+  run some other code instead
+}
+ +

Here we've got:

+ +
    +
  1. 키워드 if 뒤에 괄호가 옵니다.
    2. +
  2. 시험할 조건은 괄호 안에 위치합니다. (전형적으로 "이 값이 다른 값보다 큰지", "이 값이 존재하는지") 이 조건은 마지막 모듈에서 논의했던 비교연산자(comparison operators)를 사용할 것이고 true 나  false를 리턴합니다.
    3. +
  3. 내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 코드일 수 있고, 조건이 true를 반환하는 경우에만 실행됩니다.
    4. +
  4. 키워드 else.
    5. +
  5. 또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 코드 일 수 있고, 조건이 true가 아닌 경우에만 실행됩니다.
    6. +
+ +

이 코드는 사람이 읽을 수 있습니다. — "만약 조건이 true면, 코드 A를 실행하고, 아니면 코드 B를 실행한다." 라고 말합니다.

+ +

반드시 else와 두 번째 중괄호를 포함하지 않아도 된다는 것을 주목해야 합니다. — 다음은 또한 완벽한 코드입니다.:

+ +
if (condition) {
+  code to run if condition is true
+}
+
+run some other code
+ +

하지만, 여기서 조심 해야 할 점— 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않습니다. 그래서 조건이 true나 false를 리턴하는 것에 관계없이 항상 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 원하는 대로 되지 않을 수도 있습니다. — 코드의 한 블록이나 다른 블록이 실행되거나 둘 다 실행되지 않는 것을 원할 것입니다.

+ +

마지막으로, 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 if...else를  볼 수 있었을 것입니다.:

+ +
if (condition) code to run if condition is true
+else run some other code instead
+ +

이것은 완벽하게 유효한 코드이지만, 사용하는 것을 추천하지 않습니다. — 중괄호를 사용하여 코드를 구분하고, 여러 줄과 들여쓰기를 사용한다면, 코드를 쉽게 읽고, 진행되는 작업을 훨씬 쉽게 처리할 수 있습니다.

+ +

실제 예시

+ +

문법을 잘 이해하기 위해서 실제 예시를 알아봅시다. 어머니나 아버지가 아이에게 집안일을 도와달라고 요청한다고 상상해 봅시다. 부모님께서 "우리 애기, 만약에 쇼핑 하고 가는 걸 도와주면, 용돈을 더 줄게! 그럼 네가 원하는 걸 살 수 있을거야"라고 말씀 하신다면, 자바스크립트에서 이것을 다음과 같이 표현할 수 있습니다.

+ +
var shoppingDone = false;
+
+if (shoppingDone === true) {
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

위 코드에는 항상 false를 리턴하는 shoppingDone변수를 결과로 얻을 것입니다. 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 우리가 부모님을 위해 shoppingDone변수를 true로 설정하는 메커니즘을 만들 수 있겠죠.

+ +
+

Note: GitHub에서 예시를 더 볼 수 있습니다.  complete version of this example on GitHub (also see it running live.)

+
+ +

else if

+ +

지난 예시에서는  두 가지 선택과 결과가 있었죠. — 하지만 우리가 두 가지보다 더 많은 선택과 결과를 원한다면?

+ +

추가로 선택/결과를 if...else에 연결하는 방법이 있습니다. — else if를 사용하여. 각 추가 선택은 if() { ... }와 else { ... }사이에 추가적인 블록이 필요합니다. 간단한 날씨 예보 어플리케이션의 일부가 될 수 있는 다음의 예시를 확인하세요. 

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
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 = '';
+  }
+}
+
+
+ +

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
    +
  1. 여기서 우리는 HTML {{htmlelement("select")}} 엘리먼트를 사용하여 다른 날씨 선택과 간단한 문단을 만들 수 있습니다. 
    2. +
  2. 자바스크립트에서 {{htmlelement("select")}} 와 {{htmlelement("p")}} 엘리먼트를 모두 저장하고 있고,  <select> 엘리먼트에 이벤트 리스너를 추가하고, 값이 변할 때 setWeather()함수가 동작합니다.
    3. +
  3. 함수가 동작했을 때, 현재 <select> 에서 선택된 값을 choice라는 변수에 설정합니다. 그런 다음 조건문을 사용하여 choice값에 따라 문단 안에 다른 텍스트를 표시합니다. if() {...} block에서 테스트된 첫 번째를 제외하고, else if() {...}에서 조건은 테스트되는 방법에 유의하세요.
    4. +
  4. else {...}안의 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다. — true인 조건이 없으면 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면 예를 들어, 사용자가 처음에 표시한 "Make a choice" placeholder 옵션에서 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.
    5. +
+ +
+

Note: You can also find this example on GitHub (see it running live on there also.)

+
+ +

비교 연산자

+ +

비교 연산자는 우리의 조건문 안에 조건을 테스트하는데 사용된다. 우리는 먼저 Basic math in JavaScript — numbers and operators 에서 비교 연산자를 봤습니다. 

+ + + +
+

Note: Review the material at the previous link if you want to refresh your memories on these.

+
+ +

boolean(true/false)값과 몇 번이고 다시 만날 일반적인 패턴을 테스트하는 것의 특별한 언급을 하고 싶었습니다.. false, undefined, null, 0, NaN이나 빈 문자열('')이 아닌 어떤 값은 조건문이 테스트 되었을 때, true를 리턴합니다.. 그러므로 우리는 변수가 참인지 값이 존재하는지 간단하게 변수 이름을 사용할 수 있습니다.. 예를 들어,

+ +
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.');
+}
+ +

그리고 부모님을 위해 집안일을 하는 아이에 대한 이전 예시에서 리턴하는 것을 다음과 같이 작성할 수 있었습니다.

+ +
var shoppingDone = false;
+
+if (shoppingDone) { // don't need to explicitly specify '=== true'
+  var childsAllowance = 10;
+} else {
+  var childsAllowance = 5;
+}
+ +

if ... else 중첩

+ +

if...else문을 다른 문 앞에 넣는 것(중첩하여)은 완벽하게 가능합니다.. 예를 들어, 온도가 무엇인지에 따라 더 많은 선택의 옵션을 보여주기위해 우리의 날씨 예보 어플리케이션에서 업데이트 할 수 있습니다..

+ +
if (choice === 'sunny') {
+  if (temperature < 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 >= 86) {
+    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+  }
+}
+ +

비록 코드가 모두 동작하더라도, 각 if...else문은 다른 문과 완전히 독립적으로 동작합니다..

+ +

논리 연산자: AND, OR and NOT

+ +

만약 중첩된 if...else문을 작성하는 것 없이 다양한 조건을 테스트하길 원한다면 logical operators 이 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음 두 가지는 다음과 같이 합니다.

+ + + +

AND 예시를 위해서 앞의 예제 코드 중에서 다음과 같이 작성할 수 있습니다.

+ +
if (choice === 'sunny' && temperature < 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' && temperature >= 86) {
+  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
+}
+ +

위 예시에서, 첫 번째 코드 블록은 choice === 'sunny'와 temperature < 86가 true를 리턴한다면 실행될 것입니다.

+ +

빠르게 OR 예시를 봅시다.

+ +
if (iceCreamVanOutside || houseStatus === 'on fire') {
+  console.log('You should leave the house quickly.');
+} else {
+  console.log('Probably should just stay in then.');
+}
+ +

논리 연산자의 마지막 유형인 ! 연산자로 표현되는 NOT은 표현식을 무효화할 수 있습니다. 위 OR 예시와 함께 봅시다.

+ +
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+  console.log('Probably should just stay in then.');
+} else {
+  console.log('You should leave the house quickly.');
+}
+ +

위 예시에서, OR 문이 true를 리턴한다면, NOT 연산자는 전체 표현식이 false를 리턴하도록 무효화할 것입니다.

+ +

어떤 구조든지 당신이 원하는 만큼 많은 논리 문을 결합할 수 있습니다. 다음 예시는 두 가지 OR 문 모두 true를 리턴하면, 전체 AND문은 true를 리턴한다는 것을 의미하는 코드를 실행합니다.

+ +
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
+  // run the code
+}
+ +

조건 문에서 논리적 OR 연산자를 사용할 때 일반적인 실수는 값을 한번 체크하는 변수를 명시한 다음, || (OR) 연산로 분리하여 true를 리턴될 수 있는 변수의 리스트를 사용한다는 것입니다. 예를 들어: 

+ +
if (x === 5 || 7 || 10 || 20) {
+  // run my code
+}
+ +

이 경우에 if(...) 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true가 되므로, 항상 true를 계산할 것입니다. 조건은 "x가 5와 같거나 7이 true면, 항상 그렇다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자를 완전하게 명시해야 합니다.

+ +
if (x === 5 || x === 7 || x === 10 ||x === 20) {
+  // run my code
+}
+ +

switch 문

+ +

if...else 문은 조건문 코드가 잘 동작되는 일을 하지만, 단점이 없지 않습니다. 그 문은 두 가지 선택을 가지고 있는 경우에 주로 유용합니다. 그리고 각각은 실행되기 위한 합리적인 양의 코드가 필요하고, AND/OR 조건은 복잡합니다.(e.g. 다수의 논리 연산자) 어떤 값의 선택으로 변수를 설정하거나 조건에 따라서 특정 문을 출력하는 경우 구문이 약간 번거로울 수 있습니다. 특히 많은 선택 항목이 있는 경우에 특히 그렇습니다.

+ +

switch statements 은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여기 몇몇 많은 수도코드가 있습니다.

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

여기에서: 

+ +
    +
  1. 뒤에 괄호가 오는 키워드 switch.
    2. +
  2. 괄오 내부에는 표현식이나 값을 입력합니다.
    3. +
  3. 표현식이나 값이 될 수 있는 선택이 따라 오는 키워드 case는 콜론이 뒤에 옵니다.
    4. +
  4. break문은 뒤에 세미콜론이 옵니다. 이전의 선택이 표현식이나 값과 일치한다면 해당 코드 블록에서 실행을 멉추고, switch 문 아래에 있는 어떤 코드로 이동합니다.
    5. +
  5. 원하는 많은 다른 케이스를 입력할 수 있습니다. 
    6. +
  6. 키워드 default는 case들과 같은 코드를 입력하고, 일치하는 항목이 없으면 실행되는 기본 옵션입니다. case와 일치하지 않고, 예외가 필요하지 않는 경우 제외할 수 있습니다.
    7. +
+ +
+

Note: default를 반드시 포함하지 않고 생략가능합니다. 다만 필요하다면 미지의 경우를 처리하기 위해 포함해야 합니다.

+
+ +

A switch example

+ +

실전 예제를 해봅시다.switch문을 활용해 일기예보 애플리케이션을 작성하세요.

+ +
<label for="weather">Select the weather type today: </label>
+<select id="weather">
+  <option value="">--Make a choice--</option>
+  <option value="sunny">Sunny</option>
+  <option value="rainy">Rainy</option>
+  <option value="snowing">Snowing</option>
+  <option value="overcast">Overcast</option>
+</select>
+
+<p></p>
+ +
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 = '';
+  }
+}
+ +

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: You can also find this example on GitHub (see it running live on there also.)

+
+ +

삼항연산자 

+ +

다른 예제로 들어가기 전에 소개하고 싶은 마지막 구문이 있다.삼항(조건)연산자( ternary or conditional operator)는 조건이 참이면 한 값/표현식을 반환하고 조건이 거짓이면 다른  값/표현식을 반환하는 구문이다.— 이것은 어떤 상황에 유용할 수 있으며, 참/거짓 조건을 간단히 선택할 수 있는 상황이라면 if...else 블록문보다 코드를 훨씬 적게 사용할수 있다. 이 pseudocode는 아래와 같다:

+ +
( condition ) ? run this code : run this code instead
+ +

그러면 간단한 예를 보자:

+ +
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
+ +

isBirthday 라는 변수명이 여기 있다— 게스트가 생일이면 '해피버스데이' 메세지를 보내고, 생일이 아니라면  일반적인 '인사' 메세지를 보내는 경우에 해당된다..

+ +

삼항 연산자 예제

+ +

삼항연산자로 변수값을 정할 필요가 없다; 단지  좋아하는 함수나 코드를 사용하면 된다. — . 이 예제는 삼항연산자를 사용하여 사이트의 스타일링 테마를 선택할  수 있는 것을 보여준다

+ +
<label for="theme">Select theme: </label>
+<select id="theme">
+  <option value="white">White</option>
+  <option value="black">Black</option>
+</select>
+
+<h1>This is my website</h1>
+ +
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');
+}
+
+ +

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +

여기에는  black이나 white의 테마를 고르기 위한 '{{htmlelement('select')}}' 엘리먼트가 있고, 여기에 더하여 웹사이트 제목을 보여주는 '{{htmlelement('h1')}}" 엘리먼트가 있다.  update() 함수를 덧붙이면 두 칼라를 입력 인수(parameter)로 선택할 수 있다. 웹사이트 배경 칼라가 첫 번째 칼라로 지정되고, 텍스트 칼라가 두 번째로 정해진다.

+ +

끝으로,  'onchange' 이벤트 리스너는 삼중연산자를 포함하는 함수를 움직('run')이게 합니다. select.value === 'black' 조건을 테스트는 하는 것으로 시작하는데, 이 조건이 참이면  update() 함수가 배경색은 black으로 텍스트 색은  white로 동작하게 합니다. 이와는 반대로 select theme이  white로 선택되면(조건이 거짓이면) , update() 함수는  배경색은 white으로 텍스트 색은  black로 동작하게 합니다.

+ +
+

Note: You can also find this example on GitHub (see it running live on there also.)

+
+ +

Active learning: 간단한 달력 만들기

+ +

이 예제에서는 간단한 달력 어플리케이션을 만들어 볼겁니다. 코드에는 다음과 같은 것들이 들어 있습니다.

+ + + +

onchange 핸들러 함수내에 조건문을 작성해야 합니다. 위치는 // ADD CONDITIONAL HERE 주석 바로 아래입니다. 조건문은 다음을 만족해야 합니다:

+ +
    +
  1. 선택한 달 보기(이것은 값이 변경된 후의 요소 값이 됨.) 
    2. +
  2. days 란 변수를 선택한 달의 일 수와 같게 하기. 다만 윤년은 무시할 수 있다.
    3. +
+ +

Hints:

+ + + +

만약 실수를 하더라도 'Reset' 버튼으로 초기화 할 수 있습니다. 해답을 모르겠다면 "Show solution" 으로 해결방법을 확인하세요.

+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

+ +

Active learning: 색깔 고르기

+ +

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 // ADD SWITCH STATEMENT comment:

+ + + +

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.

+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

+ +

Conclusion

+ +

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 contact us to ask for help.

+ +

See also

+ + + +

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git "a/files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" "b/files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" deleted file mode 100644 index 858d6f9116..0000000000 --- "a/files/ko/learn/javascript/building_blocks/\354\241\260\352\261\264\353\254\270/index.html" +++ /dev/null @@ -1,770 +0,0 @@ ---- -title: Making decisions in your code — 조건문 -slug: Learn/JavaScript/Building_blocks/조건문 -translation_of: Learn/JavaScript/Building_blocks/conditionals ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
- -

어떤 프로그래밍 언어든 코드는 의사 결정을 내리고 입력 내용에 따라 작업을 수행해야합니다. 예를 들어 게임에서 플레이어의 생명 수치가 0이면 게임이 종료됩니다. 날씨 앱에서는 아침에 해가 뜬 그림을 보여주고 밤에는 달과 별을 보여줍니다. 이 문서에서는 JavaScript에서 조건문이 작동하는 방법을 살펴 보겠습니다.

- - - - - - - - - - - - -
선행 조건: -

기본적인 컴퓨터 활용 능력, HTML, CSS, Javascript 첫 걸음

-
목표: -

자바스크립트에서 조건문의 사용법을 이해합니다.

-
- -

당신은 하나의 조건을 가질 수 있습니다.

- -

사람(과 동물)은 작은 것(과자를 하나 먹을까? 두개 먹을까?)부터 큰 것(고향에 머물면서 아버지의 농장에서 일해야 할까? 아니면 천체물리학을 공부하러 미국으로 유학을 갈까?)까지 자신의 경험을 바탕으로 결정합니다.

- -

조건문은 결정해야 하는 선택(예를 들면, "과자 하나? 두 개?)부터 선택의 결과(과자를 하나 먹으면 여전히 배고플 수 있고, 두 개를 먹으면 배는 부르지만, 엄마한테 과자를 다 먹었다고 혼날 수 있다)까지 자바스크립트에서 의사 결정을 내릴 수 있습니다. 

- -

- -

if ... else 문

- -

자바스크립트에서 사용하는 조건문 중에서 가장 일반적인 유형을 봅시다. — the humble if ... else statement.

- -

if ... else 문법

- -

if...else 문법은 {{glossary("pseudocode")}} 다음과 같습니다:

- -
if (condition) {
-  code to run if condition is true
-} else {
-  run some other code instead
-}
- -

Here we've got:

- -
    -
  1. 키워드 if 뒤에 괄호가 옵니다.
    2. -
  2. 시험할 조건은 괄호 안에 위치합니다. (전형적으로 "이 값이 다른 값보다 큰지", "이 값이 존재하는지") 이 조건은 마지막 모듈에서 논의했던 비교연산자(comparison operators)를 사용할 것이고 true 나  false를 리턴합니다.
    3. -
  3. 내부의 중괄호 안에 코드가 있습니다. — 이것은 우리가 좋아하는 코드일 수 있고, 조건이 true를 반환하는 경우에만 실행됩니다.
    4. -
  4. 키워드 else.
    5. -
  5. 또 다른 중괄호 안에 더 많은 코드가 있습니다. — 이것은 우리가 좋아하는 코드 일 수 있고, 조건이 true가 아닌 경우에만 실행됩니다.
    6. -
- -

이 코드는 사람이 읽을 수 있습니다. — "만약 조건이 true면, 코드 A를 실행하고, 아니면 코드 B를 실행한다." 라고 말합니다.

- -

반드시 else와 두 번째 중괄호를 포함하지 않아도 된다는 것을 주목해야 합니다. — 다음은 또한 완벽한 코드입니다.:

- -
if (condition) {
-  code to run if condition is true
-}
-
-run some other code
- -

하지만, 여기서 조심 해야 할 점— 위의 경우, 코드의 두 번째 블록은 조건문에 의해서 제어되지 않습니다. 그래서 조건이 true나 false를 리턴하는 것에 관계없이 항상 동작합니다. 이것이 반드시 나쁜 것은 아니지만, 원하는 대로 되지 않을 수도 있습니다. — 코드의 한 블록이나 다른 블록이 실행되거나 둘 다 실행되지 않는 것을 원할 것입니다.

- -

마지막으로, 다음과 같이 짧은 스타일로 중괄호 없이 쓰여진 if...else를  볼 수 있었을 것입니다.:

- -
if (condition) code to run if condition is true
-else run some other code instead
- -

이것은 완벽하게 유효한 코드이지만, 사용하는 것을 추천하지 않습니다. — 중괄호를 사용하여 코드를 구분하고, 여러 줄과 들여쓰기를 사용한다면, 코드를 쉽게 읽고, 진행되는 작업을 훨씬 쉽게 처리할 수 있습니다.

- -

실제 예시

- -

문법을 잘 이해하기 위해서 실제 예시를 알아봅시다. 어머니나 아버지가 아이에게 집안일을 도와달라고 요청한다고 상상해 봅시다. 부모님께서 "우리 애기, 만약에 쇼핑 하고 가는 걸 도와주면, 용돈을 더 줄게! 그럼 네가 원하는 걸 살 수 있을거야"라고 말씀 하신다면, 자바스크립트에서 이것을 다음과 같이 표현할 수 있습니다.

- -
var shoppingDone = false;
-
-if (shoppingDone === true) {
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

위 코드에는 항상 false를 리턴하는 shoppingDone변수를 결과로 얻을 것입니다. 아이에게 실망을 안겨주겠죠. 아이가 부모님과 함께 쇼핑을 간다면 우리가 부모님을 위해 shoppingDone변수를 true로 설정하는 메커니즘을 만들 수 있겠죠.

- -
-

Note: GitHub에서 예시를 더 볼 수 있습니다.  complete version of this example on GitHub (also see it running live.)

-
- -

else if

- -

지난 예시에서는  두 가지 선택과 결과가 있었죠. — 하지만 우리가 두 가지보다 더 많은 선택과 결과를 원한다면?

- -

추가로 선택/결과를 if...else에 연결하는 방법이 있습니다. — else if를 사용하여. 각 추가 선택은 if() { ... }와 else { ... }사이에 추가적인 블록이 필요합니다. 간단한 날씨 예보 어플리케이션의 일부가 될 수 있는 다음의 예시를 확인하세요. 

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
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 = '';
-  }
-}
-
-
- -

{{ EmbedLiveSample('else_if', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
    -
  1. 여기서 우리는 HTML {{htmlelement("select")}} 엘리먼트를 사용하여 다른 날씨 선택과 간단한 문단을 만들 수 있습니다. 
    2. -
  2. 자바스크립트에서 {{htmlelement("select")}} 와 {{htmlelement("p")}} 엘리먼트를 모두 저장하고 있고,  <select> 엘리먼트에 이벤트 리스너를 추가하고, 값이 변할 때 setWeather()함수가 동작합니다.
    3. -
  3. 함수가 동작했을 때, 현재 <select> 에서 선택된 값을 choice라는 변수에 설정합니다. 그런 다음 조건문을 사용하여 choice값에 따라 문단 안에 다른 텍스트를 표시합니다. if() {...} block에서 테스트된 첫 번째를 제외하고, else if() {...}에서 조건은 테스트되는 방법에 유의하세요.
    4. -
  4. else {...}안의 가장 마지막 선택은 기본적으로 "최후의 수단" 옵션입니다. — true인 조건이 없으면 코드가 실행됩니다. 이 경우 아무것도 선택되지 않으면 예를 들어, 사용자가 처음에 표시한 "Make a choice" placeholder 옵션에서 다시 선택하기로 한다면, 문단의 텍스트를 비우는 역할을 합니다.
    5. -
- -
-

Note: You can also find this example on GitHub (see it running live on there also.)

-
- -

비교 연산자

- -

비교 연산자는 우리의 조건문 안에 조건을 테스트하는데 사용된다. 우리는 먼저 Basic math in JavaScript — numbers and operators 에서 비교 연산자를 봤습니다. 

- - - -
-

Note: Review the material at the previous link if you want to refresh your memories on these.

-
- -

boolean(true/false)값과 몇 번이고 다시 만날 일반적인 패턴을 테스트하는 것의 특별한 언급을 하고 싶었습니다.. false, undefined, null, 0, NaN이나 빈 문자열('')이 아닌 어떤 값은 조건문이 테스트 되었을 때, true를 리턴합니다.. 그러므로 우리는 변수가 참인지 값이 존재하는지 간단하게 변수 이름을 사용할 수 있습니다.. 예를 들어,

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

그리고 부모님을 위해 집안일을 하는 아이에 대한 이전 예시에서 리턴하는 것을 다음과 같이 작성할 수 있었습니다.

- -
var shoppingDone = false;
-
-if (shoppingDone) { // don't need to explicitly specify '=== true'
-  var childsAllowance = 10;
-} else {
-  var childsAllowance = 5;
-}
- -

if ... else 중첩

- -

if...else문을 다른 문 앞에 넣는 것(중첩하여)은 완벽하게 가능합니다.. 예를 들어, 온도가 무엇인지에 따라 더 많은 선택의 옵션을 보여주기위해 우리의 날씨 예보 어플리케이션에서 업데이트 할 수 있습니다..

- -
if (choice === 'sunny') {
-  if (temperature < 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 >= 86) {
-    para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-  }
-}
- -

비록 코드가 모두 동작하더라도, 각 if...else문은 다른 문과 완전히 독립적으로 동작합니다..

- -

논리 연산자: AND, OR and NOT

- -

만약 중첩된 if...else문을 작성하는 것 없이 다양한 조건을 테스트하길 원한다면 logical operators 이 당신을 도와줄 수 있습니다. 조건 내에서 사용될 때, 처음 두 가지는 다음과 같이 합니다.

- - - -

AND 예시를 위해서 앞의 예제 코드 중에서 다음과 같이 작성할 수 있습니다.

- -
if (choice === 'sunny' && temperature < 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' && temperature >= 86) {
-  para.textContent = 'It is ' + temperature + ' degrees outside — REALLY HOT! If you want to go outside, make sure to put some suncream on.';
-}
- -

위 예시에서, 첫 번째 코드 블록은 choice === 'sunny'와 temperature < 86가 true를 리턴한다면 실행될 것입니다.

- -

빠르게 OR 예시를 봅시다.

- -
if (iceCreamVanOutside || houseStatus === 'on fire') {
-  console.log('You should leave the house quickly.');
-} else {
-  console.log('Probably should just stay in then.');
-}
- -

논리 연산자의 마지막 유형인 ! 연산자로 표현되는 NOT은 표현식을 무효화할 수 있습니다. 위 OR 예시와 함께 봅시다.

- -
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
-  console.log('Probably should just stay in then.');
-} else {
-  console.log('You should leave the house quickly.');
-}
- -

위 예시에서, OR 문이 true를 리턴한다면, NOT 연산자는 전체 표현식이 false를 리턴하도록 무효화할 것입니다.

- -

어떤 구조든지 당신이 원하는 만큼 많은 논리 문을 결합할 수 있습니다. 다음 예시는 두 가지 OR 문 모두 true를 리턴하면, 전체 AND문은 true를 리턴한다는 것을 의미하는 코드를 실행합니다.

- -
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
-  // run the code
-}
- -

조건 문에서 논리적 OR 연산자를 사용할 때 일반적인 실수는 값을 한번 체크하는 변수를 명시한 다음, || (OR) 연산로 분리하여 true를 리턴될 수 있는 변수의 리스트를 사용한다는 것입니다. 예를 들어: 

- -
if (x === 5 || 7 || 10 || 20) {
-  // run my code
-}
- -

이 경우에 if(...) 내부 조건은 7(또는 다른 0이 아닌 값)이 항상 true가 되므로, 항상 true를 계산할 것입니다. 조건은 "x가 5와 같거나 7이 true면, 항상 그렇다"라고 분명하게 말하고 있습니다. 이것은 논리적으로 우리가 원하는 것이 아닙니다! 이를 동작하게 하기 위해 우리는 각 OR 연산자를 완전하게 명시해야 합니다.

- -
if (x === 5 || x === 7 || x === 10 ||x === 20) {
-  // run my code
-}
- -

switch 문

- -

if...else 문은 조건문 코드가 잘 동작되는 일을 하지만, 단점이 없지 않습니다. 그 문은 두 가지 선택을 가지고 있는 경우에 주로 유용합니다. 그리고 각각은 실행되기 위한 합리적인 양의 코드가 필요하고, AND/OR 조건은 복잡합니다.(e.g. 다수의 논리 연산자) 어떤 값의 선택으로 변수를 설정하거나 조건에 따라서 특정 문을 출력하는 경우 구문이 약간 번거로울 수 있습니다. 특히 많은 선택 항목이 있는 경우에 특히 그렇습니다.

- -

switch statements 은 당신의 친구입니다. 이는 입력으로 하나의 표현식/값을 받고, 값과 일치하는 하나를 찾을 때까지 여러 항목을 살펴보고 그에 맞는 코드를 실행합니다. 여기 몇몇 많은 수도코드가 있습니다.

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

여기에서: 

- -
    -
  1. 뒤에 괄호가 오는 키워드 switch.
    2. -
  2. 괄오 내부에는 표현식이나 값을 입력합니다.
    3. -
  3. 표현식이나 값이 될 수 있는 선택이 따라 오는 키워드 case는 콜론이 뒤에 옵니다.
    4. -
  4. break문은 뒤에 세미콜론이 옵니다. 이전의 선택이 표현식이나 값과 일치한다면 해당 코드 블록에서 실행을 멉추고, switch 문 아래에 있는 어떤 코드로 이동합니다.
    5. -
  5. 원하는 많은 다른 케이스를 입력할 수 있습니다. 
    6. -
  6. 키워드 default는 case들과 같은 코드를 입력하고, 일치하는 항목이 없으면 실행되는 기본 옵션입니다. case와 일치하지 않고, 예외가 필요하지 않는 경우 제외할 수 있습니다.
    7. -
- -
-

Note: default를 반드시 포함하지 않고 생략가능합니다. 다만 필요하다면 미지의 경우를 처리하기 위해 포함해야 합니다.

-
- -

A switch example

- -

실전 예제를 해봅시다.switch문을 활용해 일기예보 애플리케이션을 작성하세요.

- -
<label for="weather">Select the weather type today: </label>
-<select id="weather">
-  <option value="">--Make a choice--</option>
-  <option value="sunny">Sunny</option>
-  <option value="rainy">Rainy</option>
-  <option value="snowing">Snowing</option>
-  <option value="overcast">Overcast</option>
-</select>
-
-<p></p>
- -
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 = '';
-  }
-}
- -

{{ EmbedLiveSample('A_switch_example', '100%', 100, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: You can also find this example on GitHub (see it running live on there also.)

-
- -

삼항연산자 

- -

다른 예제로 들어가기 전에 소개하고 싶은 마지막 구문이 있다.삼항(조건)연산자( ternary or conditional operator)는 조건이 참이면 한 값/표현식을 반환하고 조건이 거짓이면 다른  값/표현식을 반환하는 구문이다.— 이것은 어떤 상황에 유용할 수 있으며, 참/거짓 조건을 간단히 선택할 수 있는 상황이라면 if...else 블록문보다 코드를 훨씬 적게 사용할수 있다. 이 pseudocode는 아래와 같다:

- -
( condition ) ? run this code : run this code instead
- -

그러면 간단한 예를 보자:

- -
var greeting = ( isBirthday ) ? 'Happy birthday Mrs. Smith — we hope you have a great day!' : 'Good morning Mrs. Smith.';
- -

isBirthday 라는 변수명이 여기 있다— 게스트가 생일이면 '해피버스데이' 메세지를 보내고, 생일이 아니라면  일반적인 '인사' 메세지를 보내는 경우에 해당된다..

- -

삼항 연산자 예제

- -

삼항연산자로 변수값을 정할 필요가 없다; 단지  좋아하는 함수나 코드를 사용하면 된다. — . 이 예제는 삼항연산자를 사용하여 사이트의 스타일링 테마를 선택할  수 있는 것을 보여준다

- -
<label for="theme">Select theme: </label>
-<select id="theme">
-  <option value="white">White</option>
-  <option value="black">Black</option>
-</select>
-
-<h1>This is my website</h1>
- -
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');
-}
-
- -

{{ EmbedLiveSample('Ternary_operator_example', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

- -

여기에는  black이나 white의 테마를 고르기 위한 '{{htmlelement('select')}}' 엘리먼트가 있고, 여기에 더하여 웹사이트 제목을 보여주는 '{{htmlelement('h1')}}" 엘리먼트가 있다.  update() 함수를 덧붙이면 두 칼라를 입력 인수(parameter)로 선택할 수 있다. 웹사이트 배경 칼라가 첫 번째 칼라로 지정되고, 텍스트 칼라가 두 번째로 정해진다.

- -

끝으로,  'onchange' 이벤트 리스너는 삼중연산자를 포함하는 함수를 움직('run')이게 합니다. select.value === 'black' 조건을 테스트는 하는 것으로 시작하는데, 이 조건이 참이면  update() 함수가 배경색은 black으로 텍스트 색은  white로 동작하게 합니다. 이와는 반대로 select theme이  white로 선택되면(조건이 거짓이면) , update() 함수는  배경색은 white으로 텍스트 색은  black로 동작하게 합니다.

- -
-

Note: You can also find this example on GitHub (see it running live on there also.)

-
- -

Active learning: 간단한 달력 만들기

- -

이 예제에서는 간단한 달력 어플리케이션을 만들어 볼겁니다. 코드에는 다음과 같은 것들이 들어 있습니다.

- - - -

onchange 핸들러 함수내에 조건문을 작성해야 합니다. 위치는 // ADD CONDITIONAL HERE 주석 바로 아래입니다. 조건문은 다음을 만족해야 합니다:

- -
    -
  1. 선택한 달 보기(이것은 값이 변경된 후의 요소 값이 됨.) 
    2. -
  2. days 란 변수를 선택한 달의 일 수와 같게 하기. 다만 윤년은 무시할 수 있다.
    3. -
- -

Hints:

- - - -

만약 실수를 하더라도 'Reset' 버튼으로 초기화 할 수 있습니다. 해답을 모르겠다면 "Show solution" 으로 해결방법을 확인하세요.

- - - -

{{ EmbedLiveSample('Playable_code', '100%', 1110, "", "", "hide-codepen-jsfiddle") }}

- -

Active learning: 색깔 고르기

- -

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 // ADD SWITCH STATEMENT comment:

- - - -

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.

- - - -

{{ EmbedLiveSample('Playable_code_2', '100%', 950, "", "", "hide-codepen-jsfiddle") }}

- -

Conclusion

- -

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 contact us to ask for help.

- -

See also

- - - -

{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..94759e21bf --- /dev/null +++ b/files/ko/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,145 @@ +--- +title: JavaScript +slug: Web/CSS/Getting_Started/JavaScript +tags: + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +

이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.

+

II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.

+

대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.

+

정보: 자바스크립트(JavaScript)

+

자바스크립트(JavaScript)는 + + 프로그래밍 언어 + 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.

+

자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.

+

이렇게 하는데 세가지 방법이 있습니다:

+ + + + + + + + +
+ More details
모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 JavaScript페이지를 보세요.
+

액션: 자바스크립트 예제(demonstration)

+

새로은 HTML 문서 doc5.html를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style5.css">
+<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
+</HEAD>
+
+<BODY>
+<H1>JavaScript sample</H1>
+
+<DIV id="square"></DIV>
+
+<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON>
+
+</BODY>
+</HTML>
+
+
+

새로운 CSS 파일 style5.css을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:

+
+ 
/*** JavaScript demonstration ***/
+#square {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  margin-bottom: 1em;
+  }
+
+button {
+  padding: .5em 2em;
+  }
+
+
+

새로운 텍스트 파일 script5.js을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:

+
+ 
// 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")
+  }
+
+
+

브라우저에서 문서을 열고 버튼을 누르세요.

+

이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:

+ + + + + + + +
+ + + + + + +
+

JavaScript demonstration

+
+
+  
+
+
+ 		+ + + + + + +
+

JavaScript demonstration

+
+
+  
+
+
+
+

이 예제에서 주의할 점:

+ + + + + + + + +
+ Challenge
스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.
+

그럼 다음은?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: XBL bindings

diff --git a/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html new file mode 100644 index 0000000000..526779b577 --- /dev/null +++ b/files/ko/learn/javascript/objects/test_your_skills_colon__json/index.html @@ -0,0 +1,65 @@ +--- +title: '얼마나 이해했는지 확인해보자: JSON' +slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' +translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' +--- +
{{learnsidebar}}
+ +

이 테스트의 목표는 JSON으로 작업하기를 잘 이해했는지 평가해보는 것입니다.

+ +
+

Note: 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.

+
+ +
+

Note: 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 자바스크립트 콘솔로도 확인 가능합니다.)

+
+ +

JSON 1

+ +

이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 sample.json에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 displayCatInfo() 함수의 catString 파라미터로 사용될 수 있습니다.

+ + + + + +

변수들의 값은 문단 내부의 화면에 출력됩니다.

+ +

몇 가지 힌트/질문:

+ + + +

완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:

+ +

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}

+ +
+

Warning:  이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, cross-origin 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 자바스크립트 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.)  하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.

+
+ +

평가 또는 추가 도움말

+ +

위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.

+ +

만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:

+ +
    +
  1. MDN 학습 토론 카테고리에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 : + +
      +
    • "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
      • +
    • 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
      • +
    • 작성한 코드를 삽입하세요.
      • +
    • 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
      • +
    +
    2. +
diff --git "a/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" "b/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" deleted file mode 100644 index 526779b577..0000000000 --- "a/files/ko/learn/javascript/objects/\354\226\274\353\247\210\353\202\230_\354\235\264\355\225\264\355\226\210\353\212\224\354\247\200_\355\231\225\354\235\270\355\225\264\353\263\264\354\236\220_colon__json/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: '얼마나 이해했는지 확인해보자: JSON' -slug: 'Learn/JavaScript/Objects/얼마나_이해했는지_확인해보자:_JSON' -translation_of: 'Learn/JavaScript/Objects/Test_your_skills:_JSON' ---- -
{{learnsidebar}}
- -

이 테스트의 목표는 JSON으로 작업하기를 잘 이해했는지 평가해보는 것입니다.

- -
-

Note: 아래에 있는 편집기를 사용해보세요. 테스트 중 막히면, 도움을 요청할 수 있습니다. 페이지 하단의 "평가 또는 추가 도움말" 을 참고하세요.

-
- -
-

Note: 작성한 코드에 오류가 발생하는 경우, 결과창에서 정답을 알아낼 수 있도록 돕기 위해 결과값을 보여줄 것입니다. (또는 브라우저의 자바스크립트 콘솔로도 확인 가능합니다.)

-
- -

JSON 1

- -

이번에 수행할 유일한 과제는 JSON 데이터에 접근하고 사용해보는 것입니다. 어미 고양이들과 그들의 새끼 고양이에 관한 JSON 데이터는 sample.json에서 확인할 수 있습니다. 이 JSON은 텍스트 문자열로 호출되며, 제시된 프로미스 체인(JSON 데이터를 가져오는 것으로 시작)의 조건을 만족시킬 때 displayCatInfo() 함수의 catString 파라미터로 사용될 수 있습니다.

- - - - - -

변수들의 값은 문단 내부의 화면에 출력됩니다.

- -

몇 가지 힌트/질문:

- - - -

완료된 예제를 다시 만드려면, 아래 코드를 변경해보세요:

- -

{{EmbedGHLiveSample("learning-area/javascript/oojs/tasks/json/json1.html", '100%', 400)}}

- -
-

Warning:  이번 테스트를 치를 때 코드를 위에 있는 편집기에 작성하세요. 로컬환경이나 CodePen 또는 JSFiddle 에서는 이 예제가 작동하지 않을 수 있는데, cross-origin 라고 불리는 보안정책 때문일 것입니다. 이는 현재 환경과 다른 출처의 리소스의 요청을 제한하는 정책입니다. 위 편집기는 자바스크립트 코드와 요청된 JSON 파일을 모두 동일한 출처에서 요청하고 있습니다. (Github 저장소의 <iframe>에 내장되어 있습니다.)  하지만 예를 들어 CodePen에 기입하는 코드는 JSON을 호출하는 출처와는 다르기 때문에 오류가 발생할 수 있습니다. CORS를 사용하여 이런 제약사항을 해결할 수 있지만, 이번 장에서 가르치는 범위에는 해당하지 않습니다.

-
- -

평가 또는 추가 도움말

- -

위에 있는 편집기를 이용해 예제를 연습해볼 수 있습니다.

- -

만일 작업을 평가하고나, 막혀서 도움을 요청하고 싶다면:

- -
    -
  1. MDN 학습 토론 카테고리에 평가 또는 도움을 요청하는 글을 작성하세요. 글에는 다음 사항이 포함되어야 합니다 : - -
      -
    • "Assessment wanted for JSON skill test (JSON 기술 테스트에 대한 평가를 요청드립니다)" 와 같은 제목을 사용하세요.
      • -
    • 이미 시도해보았거나, 원하는 것(예를 들어, 막혀서 도움이 필요하다거나 평가가 필요하다는 것과 같은)에 대한 세부사항을 기입해주세요.
      • -
    • 작성한 코드를 삽입하세요.
      • -
    • 실제 작업 또는 평가 페이지에 대한 링크를 삽입하세요. 그래야 도움받고자 하는 질문을 확인할 수 있습니다.
      • -
    -
    2. -
diff --git a/files/ko/learn/server-side/express_nodejs/development_environment/index.html b/files/ko/learn/server-side/express_nodejs/development_environment/index.html new file mode 100644 index 0000000000..f3ab1846f6 --- /dev/null +++ b/files/ko/learn/server-side/express_nodejs/development_environment/index.html @@ -0,0 +1,399 @@ +--- +title: Node 개발 환경을 설치하기 +slug: Learn/Server-side/Express_Nodejs/개발_환경 +tags: + - CodingScripting + - Express + - Node + - nodejs + - npm + - 개발 환경 + - 배움 + - 서버-사이드 + - 인트로 + - 초보자 +translation_of: Learn/Server-side/Express_Nodejs/development_environment +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
+ +

이제 Express에 관한 내용을 알았으니, Windows, Linux (Ubuntu), 그리고 macOS 에서의 Node/Express 개발 환경을 설정하고 테스트하는 법을 보여드리겠습니다. 사용중인 운영 체제가 무엇이든 간에, 이 글은 당신에게 Express 앱 개발을 시작할 수 있도록 필요한 내용을 제공합니다.

+ + + + + + + + + + + + +
전제 조건:터미널 혹은 명령어 창을 여는 방법. 당신의 개발 컴퓨터의 운영 체제에 소프트웨어 패키지를 설치하는 방법을 알고 있어야 합니다.
목표:당신의 컴퓨터에 Express (X.XX) 을 위한 개발 환경을 설치하는 것.
+ +

Express 개발 환경 개요

+ +

Node와 Express를 통해 웹앱 개발을 한결 수월하게 할 수 있습니다. 이 섹션에서는 어떤 도구들이 필요한지, Ubuntu, macOS, 그리고 Windows에서 어떻게 Node와 Express를 설치하는지, 마지막으로, 설치 후 어떻게 테스트해볼 수 있는지 살펴볼 것입니다.

+ +

Express 개발 환경이란 무엇입니까?

+ +

Express개발환경은 Nodejs의 설치, NPM 패키지 매니저, 그리고 (선택적) 로컬 컴퓨터의 Express Application Generator를 포함합니다.

+ +

Node and the NPM package manager are installed together from prepared binary packages, installers, operating system package managers or from source (as shown in the following sections). Express is then installed by NPM as a dependency of your individual Express web applications (along with other libraries like template engines, database drivers, authentication middleware, middleware to serve static files, etc.)

+ +

NPM can also be used to (globally) install the Express Application Generator, a handy tool for creating skeleton Express web apps that follow the MVC pattern. The application generator is optional because you don't need 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.

+ +
+

Note: Unlike for some other web frameworks, the development environment does not include a separate development web server. In Node/Express a web application creates and runs its own web server!

+
+ +

There are other peripheral tools that are part of a typical development environment, including text editors or IDEs for editing code, and source control management tools like Git 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).

+ +

What operating systems are supported?

+ +

Node can be run on Windows, macOS, many "flavours" of Linux, Docker, etc. (there is a full list on the nodejs Downloads page). Almost any personal computer should have the necessary performance to run Node during development. Express is run in a Node environment, and hence can run on any platform that runs Node.

+ +

이 기사에서는 Windows, macOS, 그리고 Ubuntu Linux에서의 설치방법을 안내해드리고 있습니다.

+ +

What version of Node/Express should you use?

+ +

There are many releases of Node — newer releases contain bug fixes, support for more recent versions of ECMAScript (JavaScript) standards, and improvements to the Node APIs. 

+ +

Generally you should use the most recent LTS (long-term supported) 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 Current release if you need a feature that is not present in the LTS version.

+ +

For Express you should always use the latest version.

+ +

What about databases and other dependencies?

+ +

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.

+ +

Node 설치하기

+ +

Express 를 사용하기 위해서 우선 운영체제에 Nodejs와 Node Package Manager (NPM)를 설치해야 합니다. 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.

+ +
+

Tip: The sections below show the easiest way to install Node and NPM 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 Installing Node.js via package manager (nodejs.org).

+
+ +

Windows and macOS

+ +

Node와 NPM을 설치하는 것은 간단합니다:

+ +
    +
  1. Installer를 다운받읍시다: +
      +
    1. https://nodejs.org/en/
      2. +
    2. "안정적이고 신뢰도가 높은" LTS버튼을 클릭해 다운로드를 시작합니다. .
      3. +
    +
    2. +
  2. 다운로드된 파일을 더블클릭해 Node를 설치합니다.
    3. +
+ +

The easiest way to install the most recent LTS version of Node 10.x is to use the package manager to get it from the Ubuntu binary distributions repository. This can be done very simply by running the following two commands on your terminal:

+ +
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
+sudo apt-get install -y nodejs
+
+ +
+

Warning: Don't install directly from the normal Ubuntu repositories because they contain very old versions of node.

+
+ +
    +
+ +

Nodejs와 NPM 테스팅

+ +

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:

+ +
>node -v
+v10.15.1
+ +

The Nodejs package manager NPM should also have been installed, and can be tested in the same way:

+ +
>npm -v
+6.4.1
+ +

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:

+ +
    +
  1. Copy the following text into a file named hellonode.js. This uses pure Node features (nothing from Express) and some ES6 syntax: + + 
    //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) => {
+
+  //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, () => {
+  console.log(`Server running at http://${hostname}:${port}/`);
+});
+
    + +

    The code imports the "http" module and uses it to create a server (createServer()) 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 createServer() 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".

    + +
    +

    Note:  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!

    +
    +
    2. +
  2. Start the server by navigating into the same directory as your hellonode.js file in your command prompt, and calling node along with the script name, like so: + 
    >node hellonode.js
+Server running at http://127.0.0.1:3000/
+
    +
    3. +
  3. Navigate to the URL http://127.0.0.1:3000 . If everything is working, the browser should simply display the string "Hello World".
    4. +
+ +

Using NPM

+ +

Next to Node itself, NPM is the most important tool for working with Node 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. 

+ +
+

Note: From Node's perspective, Express is just another package that you need to install using NPM and then require in your own code.

+
+ +

You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named package.json. 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 Node it can work with, etc. The package.json 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).

+ +

dependencies 추가

+ +

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.

+ +
+

Note: Here we show the instructions to fetch and install the Express package. Later on we'll show how this package, and others, are already specified for us using the Express Application Generator. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.

+
+ +
    +
  1. First create a directory for your new application and navigate into it: + 
    mkdir myapp
+cd myapp
    +
    2. +
  2. Use the npm init command to create a package.json 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 index.js). For now, just accept the defaults: + 
    npm init
    + +

    If you display the package.json file (cat package.json), you will see the defaults that you accepted, ending with the license.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}
+
    +
    3. +
  3. Now install Express in the myapp directory and save it in the dependencies list of your package.json file
    4. +
  4. + 
    npm install express
    + +

    The dependencies section of your package.json will now appear at the end of the package.json file and will include Express.

    + + 
    {
+  "name": "myapp",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "express": "^4.16.4"
+  }
+}
+
    +
    5. +
  5. To use the Express library you call the require() 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: + 
    const express = require('express')
+const app = express();
+
+app.get('/', (req, res) => {
+  res.send('Hello World!')
+});
+
+app.listen(8000, () => {
+  console.log('Example app listening on port 8000!')
+});
+
    + +

    This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using require() and uses it to create a server (app) 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 app.get() function only responds to HTTP GET requests with the specified URL path ('/'), in this case by calling a function to send our Hello World! message.

    +
    6. +
  6. You can start the server by calling node with the script in your command prompt: + 
    >node index.js
+Example app listening on port 8000
+
    +
    7. +
  7. Navigate to the URL (http://127.0.0.1:8000/). If everything is working, the browser should simply display the string "Hello World!".
    8. +
+ +

Development dependencies

+ +

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 eslint you would call NPM as shown:

+ +
npm install eslint --save-dev
+ +

The following entry would then be added to your application's package.json:

+ +
  "devDependencies": {
+    "eslint": "^4.12.1"
+  }
+
+ +
+

Note: "Linters" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.

+
+ +

Running tasks

+ +

In addition to defining and fetching dependencies you can also define named scripts in your package.json files and call NPM to execute them with the run-script 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).

+ +
+

Note: Task runners like Gulp and Grunt can also be used to run tests and other external tools.

+
+ +

For example, to define a script to run the eslint development dependency that we specified in the previous section we might add the following script block to our package.json file (assuming that our application source is in a folder /src/js):

+ +
"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+
+ +

To explain a little further, eslint src/js is a command that we could enter in our terminal/command line to run eslint on JavaScript files contained in the src/js directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — lint.

+ +

We would then be able to run eslint using NPM by calling:

+ +
npm run-script lint
+# OR (using the alias)
+npm run lint
+
+ +

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.

+ +

Installing the Express Application Generator

+ +

The Express Application Generator tool generates an Express application "skeleton". Install the generator using NPM as shown (the -g flag installs the tool globally so that you can call it from anywhere):

+ +
npm install express-generator -g
+ +

To create an Express app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:

+ +
express helloworld
+ +
+

Note: You can also specify the template library to use and a number of other settings. Use the help command to see all the options:

+ +
express --help
+
+
+ +

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.

+ +
+

The new app will have a package.json file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:

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

Install all the dependencies for the helloworld app using NPM as shown:

+ +
cd helloworld
+npm install
+
+ +

Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:

+ +
# Run the helloworld on Windows with Command Prompt
+SET DEBUG=helloworld:* & npm start
+
+# Run the helloworld on Windows with PowerShell
+SET DEBUG=helloworld:* | npm start
+
+# Run helloworld on Linux/macOS
+DEBUG=helloworld:* npm start
+
+ +

The DEBUG command creates useful logging, resulting in an output like that shown below.

+ +
>SET DEBUG=helloworld:* & npm start
+
+> helloworld@0.0.0 start D:\Github\expresstests\helloworld
+> node ./bin/www
+
+  helloworld:server Listening on port 3000 +0ms
+ +

Open a browser and navigate to http://127.0.0.1:3000/ to see the default Express welcome page.

+ +

Express - Generated App Default Screen

+ +

We'll talk more about the generated app when we get to the article on generating a skeleton application.

+ + + +

Summary

+ +

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.

+ +

In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

+ + + +

In this module

+ + diff --git a/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ko/learn/server-side/express_nodejs/skeleton_website/index.html new file mode 100644 index 0000000000..ca72e39124 --- /dev/null +++ b/files/ko/learn/server-side/express_nodejs/skeleton_website/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 +--- +
{{LearnSidebar}}
+ +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

+ +

This second article in our Express Tutorial 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.

+ + + + + + + + + + + + +
Prerequisites:Set up a Node development environment. Review the Express Tutorial.
Objective:Express 앱 제너레이터를 사용하여 자신만의 새로운 웹사이트 프로젝트를 시작할 수 있다.
+ +

Overview

+ +

이 아티클은 당신이 Express Application Generator 도구를 이용하여 스켈레톤(최소한의 프레임 모형만 갖춘) 웹사이트를 만드는 방법을 보여줍니다. 이는 사이트에 맞춘 라우트, 뷰/템플릿 그리고 데이터 베이스를 사용할 수 있게 합니다. In this case, we'll use the tool to create the framework for our Local Library website, 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.

+ +

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.

+ +
+

Note: The Express Application Generator 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 minimal Express application, see Hello world example (Express docs).

+
+ +

Using the application generator

+ +

You should already have installed the generator as part of setting up a Node development environment. As a quick reminder, you install the generator tool site-wide using the NPM package manager, as shown:

+ +
npm install express-generator -g
+ +

The generator has a number of options, which you can view on the command line using the --help (or -h) command:

+ +
> 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 <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+        --no-view        use static html instead of view engine
+    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
+        --git            add .gitignore
+    -f, --force          force on non-empty directory
+    -h, --help           output usage information
+
+ +

You can simply specify express to create a project inside the current directory using the Jade view engine and plain CSS (if you specify a directory name then the project will be created in a sub-folder with that name).

+ +
express
+ +

You can also choose a view (template) engine using --view and/or a CSS generation engine using --css.

+ +
+

Note: The other options for choosing template engines (e.g. --hogan, --ejs, --hbs etc.) are deprecated. Use --view (or -v)!

+
+ +

What view engine should I use?

+ +

The Express Application Generator allows you to configure a number of popular view/templating engines, including EJS, Hbs, Pug (Jade), Twig, and Vash, 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 out of the box.

+ +
+

Note: If you want to use a template engine that isn't supported by the generator then see Using template engines with Express (Express docs) and the documentation for your target view engine.

+
+ +

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:

+ + + +
+

Tip: There are many resources on the Internet to help you compare the different options!

+
+ +

For this project, we'll use the Pug 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.

+ +

What CSS stylesheet engine should I use?

+ +

The Express Application Generator allows you to create a project that is configured to use the most common CSS stylesheet engines: LESS, SASS, Compass, Stylus.

+ +
+

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

+
+ +

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.

+ +

What database should I use?

+ +

The generated code doesn't use/include any databases. Express apps can use any database mechanism supported by Node (Express itself doesn't define any specific additional behavior/requirements for database management).

+ +

We'll discuss how to integrate with a database in a later article.

+ +

Creating the project

+ +

Local Library 샘플 앱을 위해서 우리는 express-locallibrary-tutorial 라는 이름의 프로젝트를 생성할 것입니다. Pug 라는(jade의 후속격) 템플릿 라이브러리를 사용할 것이며, CSS stylesheet 엔진은 사용하지 않습니다.

+ +

First, navigate to where you want to create the project and then run the Express Application Generator in the command prompt as shown:

+ +
express express-locallibrary-tutorial --view=pug
+
+ +

The generator will create (and list) the project's files.

+ +
   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:
+     > cd express-locallibrary-tutorial
+
+   install dependencies:
+     > npm install
+
+   run the app:
+     > SET DEBUG=express-locallibrary-tutorial:* & npm start
+ +

At the end of the output, the generator provides instructions on how you install the dependencies (as listed in the package.json file) and then how to run the application (the instructions above are for Windows; on Linux/macOS they will be slightly different).

+ +
+

Note: When using Windows, the && and & assumes you are using the Command Prompt. If you are using the new default PowerShell terminal do not concatenate the commands with && and &. Instead set the DEBUG environment variable with $ENV:DEBUG = "express-locallibrary-tutorial:*";. The npm start can be followed by the npm start. 

+
+ +

Running the skeleton website

+ +

At this point, we have a complete skeleton project. The website doesn't actually do very much yet, but it's worth running it to show how it works.

+ +
    +
  1. First, install the dependencies (the install command will fetch all the dependency packages listed in the project's package.json file). + + 
    cd express-locallibrary-tutorial
+npm install
    +
    2. +
  2. Then run the application. +
      +
    • On Windows, use this command: + 
      SET DEBUG=express-locallibrary-tutorial:* & npm start
      +
      • +
    • On macOS or Linux, use this command: + 
      DEBUG=express-locallibrary-tutorial:* npm start
+
      +
      • +
    +
    3. +
  3. Then load http://localhost:3000/ in your browser to access the app.
    4. +
+ +

You should see a browser page that looks like this:

+ +

Browser for default Express app generator website

+ +

You have a working Express application, serving itself to localhost:3000.

+ +
+

Note: You could also start the app just using the npm start 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:

+ +
>SET DEBUG=express-locallibrary-tutorial:* & npm start
+
+> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
+> 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
+
+
+ +

Enable server restart on file changes

+ +

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.

+ +

One of the easiest such tools for this purpose is nodemon. This is usually installed globally (as it is a "tool"), but here we'll install and use it locally as a developer dependency, 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:

+ +
npm install --save-dev nodemon
+ +

If you still choose to install nodemon globally to your machine, and not only to your project's package.json file:

+ +
npm install -g nodemon
+ +

If you open your project's package.json file you'll now see a new section with this dependency:

+ +
 "devDependencies": {
+    "nodemon": "^1.18.10"
+}
+
+ +

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 scripts section of your package.json. Initially, it will contain one line, which begins with "start". Update it by putting a comma at the end of that line, and adding the "devstart" line seen below:

+ +
  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www",
+    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
+  },
+
+ +

We can now start the server in almost exactly the same way as previously, but with the devstart command specified:

+ + + +
+

Note: Now if you edit any file in the project the server will restart (or you can restart it by typing rs on the command prompt at any time). You will still need to reload the browser to refresh the page.

+ +

We now have to call "npm run <scriptname>" rather than just npm start, because "start" is actually an NPM command that is mapped to the named script. We could have replaced the command in the start script but we only want to use nodemon during development, so it makes sense to create a new script command.

+ +

The serverstart command added to the scripts in the package.json 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.

+
+ +

The generated project

+ +

Let's now take a look at the project we just created.

+ +

Directory structure

+ +

The generated project, now that you have installed dependencies, has the following file structure (files are the items not prefixed with "/"). The package.json file defines the application dependencies and other information. It also defines a startup script that will call the application entry point, the JavaScript file /bin/www. This sets up some of the application error handling and then loads app.js to do the rest of the work. The app routes are stored in separate modules under the routes/ directory. The templates are stored under the /views directory.

+ +
/express-locallibrary-tutorial
+    app.js
+    /bin
+        www
+    package.json
+    package-lock.json
+    /node_modules
+        [about 6700 subdirectories and files]
+    /public
+        /images
+        /javascripts
+        /stylesheets
+            style.css
+    /routes
+        index.js
+        users.js
+    /views
+        error.pug
+        index.pug
+        layout.pug
+
+
+ +

The following sections describe the files in a little more detail.

+ +

package.json

+ +

The package.json file defines the application dependencies and other information:

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

The dependencies include the express package and the package for our selected view engine (pug). In addition, we have the following packages that are useful in many web applications:

+ + + +

The scripts section defines a "start" script, which is what we are invoking when we call npm start to start the server. From the script definition, you can see that this actually starts the JavaScript file ./bin/www with node. It also defines a "devstart" script, which we invoke when calling npm run devstart instead. This starts the same ./bin/www file, but with nodemon rather than node.

+ +
  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
+  },
+
+ +

www file

+ +

The file /bin/www is the application entry point! The very first thing this does is require() the "real" application entry point (app.js, in the project root) that sets up and returns the express() application object.

+ +
#!/usr/bin/env node
+
+/**
+ * Module dependencies.
+ */
+
+var app = require('../app');
+
+ +
+

Note: require() is a global node function that is used to import modules into the current file. Here we specify app.js module using a relative path and omitting the optional (.js) file extension.

+
+ +

The remainder of the code in this file sets up a node HTTP server with app 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.

+ +

app.js

+ +

This file creates an express application object (named app, 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:

+ +
var express = require('express');
+var app = express();
+...
+module.exports = app;
+
+ +

Back in the www entry point file above, it is this module.exports object that is supplied to the caller when this file is imported.

+ +

Let's work through the app.js file in detail. First, we import some useful node libraries into the file using require(), including http-errors, express, morgan and cookie-parser that we previously downloaded for our application using NPM; and path, which is a core Node library for parsing file and directory paths.

+ +
var createError = require('http-errors');
+var express = require('express');
+var path = require('path');
+var cookieParser = require('cookie-parser');
+var logger = require('morgan');
+
+ +

Then we require() 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.

+ +
var indexRouter = require('./routes/index');
+var usersRouter = require('./routes/users');
+
+ +
+

Note: At this point, we have just imported the module; we haven't actually used its routes yet (this happens just a little bit further down the file).

+
+ +

Next, we create the app object using our imported express 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 'views' value to specify the folder where the templates will be stored (in this case the subfolder /views). Then we set the 'view engine' value to specify the template library (in this case "pug").

+ +
var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'pug');
+
+ +

The next set of functions call app.use() to add the middleware libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the express.static middleware to get Express to serve all the static files in the /public directory in the project root.

+ +
app.use(logger('dev'));
+app.use(express.json());
+app.use(express.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+ +

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 parts of the site:

+ +
app.use('/', indexRouter);
+app.use('/users', usersRouter);
+
+ +
+

Note: The paths specified above ('/' and '/users') are treated as a prefix to routes defined in the imported files. So for example, if the imported users module defines a route for /profile, you would access that route at /users/profile. We'll talk more about routes in a later article.

+
+ +

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

+ +
// 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');
+});
+
+ +

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 /bin/www).

+ +
module.exports = app;
+ +

Routes

+ +

The route file /routes/users.js is shown below (route files share a similar structure, so we don't need to also show index.js). First, it loads the express module and uses it to get an express.Router 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 app.js).

+ +
var express = require('express');
+var router = express.Router();
+
+/* GET users listing. */
+router.get('/', function(req, res, next) {
+  res.send('respond with a resource');
+});
+
+module.exports = router;
+
+ +

The route defines a callback that will be invoked whenever an HTTP GET request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('/users') plus whatever is defined in this file ('/'). In other words, this route will be used when an URL of /users/ is received.

+ +
+

Tip: Try this out by running the server with node and visiting the URL in your browser: http://localhost:3000/users/. You should see a message: 'respond with a resource'.

+
+ +

One thing of interest above is that the callback function has the third argument 'next', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the next argument, it may be useful in the future if you want to add multiple route handlers to the '/' route path.

+ +

Views (templates)

+ +

The views (templates) are stored in the /views directory (as specified in app.js) and are given the file extension .pug. The method Response.render() 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 /routes/index.js you can see how that route renders a response using the template "index" passing the template variable "title".

+ +
/* GET home page. */
+router.get('/', function(req, res, next) {
+  res.render('index', { title: 'Express' });
+});
+
+ +

The corresponding template for the above route is given below (index.pug). We'll talk more about the syntax later. All you need to know for now is that the title variable (with value 'Express') is inserted where specified in the template.

+ +
extends layout
+
+block content
+  h1= title
+  p Welcome to #{title}
+
+ +

Challenge yourself

+ +

Create a new route in /routes/users.js that will display the text "You're so cool" at URL /users/cool/. Test it by running the server and visiting http://localhost:3000/users/cool/ in your browser

+ + + +

Summary

+ +

You have now created a skeleton website project for the Local Library and verified that it runs using node. 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.

+ +

Next, we'll start modifying the skeleton so that it works as a library website.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

+ +

In this module

+ + diff --git "a/files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" "b/files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" deleted file mode 100644 index f3ab1846f6..0000000000 --- "a/files/ko/learn/server-side/express_nodejs/\352\260\234\353\260\234_\355\231\230\352\262\275/index.html" +++ /dev/null @@ -1,399 +0,0 @@ ---- -title: Node 개발 환경을 설치하기 -slug: Learn/Server-side/Express_Nodejs/개발_환경 -tags: - - CodingScripting - - Express - - Node - - nodejs - - npm - - 개발 환경 - - 배움 - - 서버-사이드 - - 인트로 - - 초보자 -translation_of: Learn/Server-side/Express_Nodejs/development_environment ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
- -

이제 Express에 관한 내용을 알았으니, Windows, Linux (Ubuntu), 그리고 macOS 에서의 Node/Express 개발 환경을 설정하고 테스트하는 법을 보여드리겠습니다. 사용중인 운영 체제가 무엇이든 간에, 이 글은 당신에게 Express 앱 개발을 시작할 수 있도록 필요한 내용을 제공합니다.

- - - - - - - - - - - - -
전제 조건:터미널 혹은 명령어 창을 여는 방법. 당신의 개발 컴퓨터의 운영 체제에 소프트웨어 패키지를 설치하는 방법을 알고 있어야 합니다.
목표:당신의 컴퓨터에 Express (X.XX) 을 위한 개발 환경을 설치하는 것.
- -

Express 개발 환경 개요

- -

Node와 Express를 통해 웹앱 개발을 한결 수월하게 할 수 있습니다. 이 섹션에서는 어떤 도구들이 필요한지, Ubuntu, macOS, 그리고 Windows에서 어떻게 Node와 Express를 설치하는지, 마지막으로, 설치 후 어떻게 테스트해볼 수 있는지 살펴볼 것입니다.

- -

Express 개발 환경이란 무엇입니까?

- -

Express개발환경은 Nodejs의 설치, NPM 패키지 매니저, 그리고 (선택적) 로컬 컴퓨터의 Express Application Generator를 포함합니다.

- -

Node and the NPM package manager are installed together from prepared binary packages, installers, operating system package managers or from source (as shown in the following sections). Express is then installed by NPM as a dependency of your individual Express web applications (along with other libraries like template engines, database drivers, authentication middleware, middleware to serve static files, etc.)

- -

NPM can also be used to (globally) install the Express Application Generator, a handy tool for creating skeleton Express web apps that follow the MVC pattern. The application generator is optional because you don't need 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.

- -
-

Note: Unlike for some other web frameworks, the development environment does not include a separate development web server. In Node/Express a web application creates and runs its own web server!

-
- -

There are other peripheral tools that are part of a typical development environment, including text editors or IDEs for editing code, and source control management tools like Git 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).

- -

What operating systems are supported?

- -

Node can be run on Windows, macOS, many "flavours" of Linux, Docker, etc. (there is a full list on the nodejs Downloads page). Almost any personal computer should have the necessary performance to run Node during development. Express is run in a Node environment, and hence can run on any platform that runs Node.

- -

이 기사에서는 Windows, macOS, 그리고 Ubuntu Linux에서의 설치방법을 안내해드리고 있습니다.

- -

What version of Node/Express should you use?

- -

There are many releases of Node — newer releases contain bug fixes, support for more recent versions of ECMAScript (JavaScript) standards, and improvements to the Node APIs. 

- -

Generally you should use the most recent LTS (long-term supported) 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 Current release if you need a feature that is not present in the LTS version.

- -

For Express you should always use the latest version.

- -

What about databases and other dependencies?

- -

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.

- -

Node 설치하기

- -

Express 를 사용하기 위해서 우선 운영체제에 Nodejs와 Node Package Manager (NPM)를 설치해야 합니다. 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.

- -
-

Tip: The sections below show the easiest way to install Node and NPM 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 Installing Node.js via package manager (nodejs.org).

-
- -

Windows and macOS

- -

Node와 NPM을 설치하는 것은 간단합니다:

- -
    -
  1. Installer를 다운받읍시다: -
      -
    1. https://nodejs.org/en/
      2. -
    2. "안정적이고 신뢰도가 높은" LTS버튼을 클릭해 다운로드를 시작합니다. .
      3. -
    -
    2. -
  2. 다운로드된 파일을 더블클릭해 Node를 설치합니다.
    3. -
- -

The easiest way to install the most recent LTS version of Node 10.x is to use the package manager to get it from the Ubuntu binary distributions repository. This can be done very simply by running the following two commands on your terminal:

- -
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
-sudo apt-get install -y nodejs
-
- -
-

Warning: Don't install directly from the normal Ubuntu repositories because they contain very old versions of node.

-
- -
    -
- -

Nodejs와 NPM 테스팅

- -

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:

- -
>node -v
-v10.15.1
- -

The Nodejs package manager NPM should also have been installed, and can be tested in the same way:

- -
>npm -v
-6.4.1
- -

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:

- -
    -
  1. Copy the following text into a file named hellonode.js. This uses pure Node features (nothing from Express) and some ES6 syntax: - - 
    //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) => {
-
-  //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, () => {
-  console.log(`Server running at http://${hostname}:${port}/`);
-});
-
    - -

    The code imports the "http" module and uses it to create a server (createServer()) 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 createServer() 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".

    - -
    -

    Note:  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!

    -
    -
    2. -
  2. Start the server by navigating into the same directory as your hellonode.js file in your command prompt, and calling node along with the script name, like so: - 
    >node hellonode.js
-Server running at http://127.0.0.1:3000/
-
    -
    3. -
  3. Navigate to the URL http://127.0.0.1:3000 . If everything is working, the browser should simply display the string "Hello World".
    4. -
- -

Using NPM

- -

Next to Node itself, NPM is the most important tool for working with Node 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. 

- -
-

Note: From Node's perspective, Express is just another package that you need to install using NPM and then require in your own code.

-
- -

You can manually use NPM to separately fetch each needed package. Typically we instead manage dependencies using a plain-text definition file named package.json. 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 Node it can work with, etc. The package.json 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).

- -

dependencies 추가

- -

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.

- -
-

Note: Here we show the instructions to fetch and install the Express package. Later on we'll show how this package, and others, are already specified for us using the Express Application Generator. This section is provided because it is useful to understand how NPM works and what is being created by the application generator.

-
- -
    -
  1. First create a directory for your new application and navigate into it: - 
    mkdir myapp
-cd myapp
    -
    2. -
  2. Use the npm init command to create a package.json 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 index.js). For now, just accept the defaults: - 
    npm init
    - -

    If you display the package.json file (cat package.json), you will see the defaults that you accepted, ending with the license.

    - - 
    {
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
-
    -
    3. -
  3. Now install Express in the myapp directory and save it in the dependencies list of your package.json file
    4. -
  4. - 
    npm install express
    - -

    The dependencies section of your package.json will now appear at the end of the package.json file and will include Express.

    - - 
    {
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "express": "^4.16.4"
-  }
-}
-
    -
    5. -
  5. To use the Express library you call the require() 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: - 
    const express = require('express')
-const app = express();
-
-app.get('/', (req, res) => {
-  res.send('Hello World!')
-});
-
-app.listen(8000, () => {
-  console.log('Example app listening on port 8000!')
-});
-
    - -

    This code shows a minimal "HelloWorld" Express web application. This imports the "express" module using require() and uses it to create a server (app) 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 app.get() function only responds to HTTP GET requests with the specified URL path ('/'), in this case by calling a function to send our Hello World! message.

    -
    6. -
  6. You can start the server by calling node with the script in your command prompt: - 
    >node index.js
-Example app listening on port 8000
-
    -
    7. -
  7. Navigate to the URL (http://127.0.0.1:8000/). If everything is working, the browser should simply display the string "Hello World!".
    8. -
- -

Development dependencies

- -

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 eslint you would call NPM as shown:

- -
npm install eslint --save-dev
- -

The following entry would then be added to your application's package.json:

- -
  "devDependencies": {
-    "eslint": "^4.12.1"
-  }
-
- -
-

Note: "Linters" are tools that perform static analysis on software in order to recognise and report adherence/non-adherance to some set of coding best practice.

-
- -

Running tasks

- -

In addition to defining and fetching dependencies you can also define named scripts in your package.json files and call NPM to execute them with the run-script 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).

- -
-

Note: Task runners like Gulp and Grunt can also be used to run tests and other external tools.

-
- -

For example, to define a script to run the eslint development dependency that we specified in the previous section we might add the following script block to our package.json file (assuming that our application source is in a folder /src/js):

- -
"scripts": {
-  ...
-  "lint": "eslint src/js"
-  ...
-}
-
- -

To explain a little further, eslint src/js is a command that we could enter in our terminal/command line to run eslint on JavaScript files contained in the src/js directory inside our app directory. Including the above inside our app's package.json file provides a shortcut for this command — lint.

- -

We would then be able to run eslint using NPM by calling:

- -
npm run-script lint
-# OR (using the alias)
-npm run lint
-
- -

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.

- -

Installing the Express Application Generator

- -

The Express Application Generator tool generates an Express application "skeleton". Install the generator using NPM as shown (the -g flag installs the tool globally so that you can call it from anywhere):

- -
npm install express-generator -g
- -

To create an Express app named "helloworld" with the default settings, navigate to where you want to create it and run the app as shown:

- -
express helloworld
- -
-

Note: You can also specify the template library to use and a number of other settings. Use the help command to see all the options:

- -
express --help
-
-
- -

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.

- -
-

The new app will have a package.json file in its root directory. You can open this to see what dependencies are installed, including Express and the template library Jade:

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

Install all the dependencies for the helloworld app using NPM as shown:

- -
cd helloworld
-npm install
-
- -

Then run the app (the commands are slightly different for Windows and Linux/macOS), as shown below:

- -
# Run the helloworld on Windows with Command Prompt
-SET DEBUG=helloworld:* & npm start
-
-# Run the helloworld on Windows with PowerShell
-SET DEBUG=helloworld:* | npm start
-
-# Run helloworld on Linux/macOS
-DEBUG=helloworld:* npm start
-
- -

The DEBUG command creates useful logging, resulting in an output like that shown below.

- -
>SET DEBUG=helloworld:* & npm start
-
-> helloworld@0.0.0 start D:\Github\expresstests\helloworld
-> node ./bin/www
-
-  helloworld:server Listening on port 3000 +0ms
- -

Open a browser and navigate to http://127.0.0.1:3000/ to see the default Express welcome page.

- -

Express - Generated App Default Screen

- -

We'll talk more about the generated app when we get to the article on generating a skeleton application.

- - - -

Summary

- -

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.

- -

In the next article we start working through a tutorial to build a complete web application using this environment and associated tools.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}

- - - -

In this module

- - diff --git "a/files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" "b/files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" deleted file mode 100644 index ca72e39124..0000000000 --- "a/files/ko/learn/server-side/express_nodejs/\354\212\244\354\274\210\353\240\210\355\206\244_\354\233\271\354\202\254\354\235\264\355\212\270/index.html" +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: 'Express Tutorial Part 2: 스켈레톤 웹사이트 만들기' -slug: Learn/Server-side/Express_Nodejs/스켈레톤_웹사이트 -translation_of: Learn/Server-side/Express_Nodejs/skeleton_website ---- -
{{LearnSidebar}}
- -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

- -

This second article in our Express Tutorial 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.

- - - - - - - - - - - - -
Prerequisites:Set up a Node development environment. Review the Express Tutorial.
Objective:Express 앱 제너레이터를 사용하여 자신만의 새로운 웹사이트 프로젝트를 시작할 수 있다.
- -

Overview

- -

이 아티클은 당신이 Express Application Generator 도구를 이용하여 스켈레톤(최소한의 프레임 모형만 갖춘) 웹사이트를 만드는 방법을 보여줍니다. 이는 사이트에 맞춘 라우트, 뷰/템플릿 그리고 데이터 베이스를 사용할 수 있게 합니다. In this case, we'll use the tool to create the framework for our Local Library website, 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.

- -

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.

- -
-

Note: The Express Application Generator 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 minimal Express application, see Hello world example (Express docs).

-
- -

Using the application generator

- -

You should already have installed the generator as part of setting up a Node development environment. As a quick reminder, you install the generator tool site-wide using the NPM package manager, as shown:

- -
npm install express-generator -g
- -

The generator has a number of options, which you can view on the command line using the --help (or -h) command:

- -
> 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 <engine>  add view <engine> support (dust|ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
-        --no-view        use static html instead of view engine
-    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
-        --git            add .gitignore
-    -f, --force          force on non-empty directory
-    -h, --help           output usage information
-
- -

You can simply specify express to create a project inside the current directory using the Jade view engine and plain CSS (if you specify a directory name then the project will be created in a sub-folder with that name).

- -
express
- -

You can also choose a view (template) engine using --view and/or a CSS generation engine using --css.

- -
-

Note: The other options for choosing template engines (e.g. --hogan, --ejs, --hbs etc.) are deprecated. Use --view (or -v)!

-
- -

What view engine should I use?

- -

The Express Application Generator allows you to configure a number of popular view/templating engines, including EJS, Hbs, Pug (Jade), Twig, and Vash, 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 out of the box.

- -
-

Note: If you want to use a template engine that isn't supported by the generator then see Using template engines with Express (Express docs) and the documentation for your target view engine.

-
- -

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:

- - - -
-

Tip: There are many resources on the Internet to help you compare the different options!

-
- -

For this project, we'll use the Pug 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.

- -

What CSS stylesheet engine should I use?

- -

The Express Application Generator allows you to create a project that is configured to use the most common CSS stylesheet engines: LESS, SASS, Compass, Stylus.

- -
-

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

-
- -

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.

- -

What database should I use?

- -

The generated code doesn't use/include any databases. Express apps can use any database mechanism supported by Node (Express itself doesn't define any specific additional behavior/requirements for database management).

- -

We'll discuss how to integrate with a database in a later article.

- -

Creating the project

- -

Local Library 샘플 앱을 위해서 우리는 express-locallibrary-tutorial 라는 이름의 프로젝트를 생성할 것입니다. Pug 라는(jade의 후속격) 템플릿 라이브러리를 사용할 것이며, CSS stylesheet 엔진은 사용하지 않습니다.

- -

First, navigate to where you want to create the project and then run the Express Application Generator in the command prompt as shown:

- -
express express-locallibrary-tutorial --view=pug
-
- -

The generator will create (and list) the project's files.

- -
   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:
-     > cd express-locallibrary-tutorial
-
-   install dependencies:
-     > npm install
-
-   run the app:
-     > SET DEBUG=express-locallibrary-tutorial:* & npm start
- -

At the end of the output, the generator provides instructions on how you install the dependencies (as listed in the package.json file) and then how to run the application (the instructions above are for Windows; on Linux/macOS they will be slightly different).

- -
-

Note: When using Windows, the && and & assumes you are using the Command Prompt. If you are using the new default PowerShell terminal do not concatenate the commands with && and &. Instead set the DEBUG environment variable with $ENV:DEBUG = "express-locallibrary-tutorial:*";. The npm start can be followed by the npm start. 

-
- -

Running the skeleton website

- -

At this point, we have a complete skeleton project. The website doesn't actually do very much yet, but it's worth running it to show how it works.

- -
    -
  1. First, install the dependencies (the install command will fetch all the dependency packages listed in the project's package.json file). - - 
    cd express-locallibrary-tutorial
-npm install
    -
    2. -
  2. Then run the application. -
      -
    • On Windows, use this command: - 
      SET DEBUG=express-locallibrary-tutorial:* & npm start
      -
      • -
    • On macOS or Linux, use this command: - 
      DEBUG=express-locallibrary-tutorial:* npm start
-
      -
      • -
    -
    3. -
  3. Then load http://localhost:3000/ in your browser to access the app.
    4. -
- -

You should see a browser page that looks like this:

- -

Browser for default Express app generator website

- -

You have a working Express application, serving itself to localhost:3000.

- -
-

Note: You could also start the app just using the npm start 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:

- -
>SET DEBUG=express-locallibrary-tutorial:* & npm start
-
-> express-locallibrary-tutorial@0.0.0 start D:\github\mdn\test\exprgen\express-locallibrary-tutorial
-> 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
-
-
- -

Enable server restart on file changes

- -

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.

- -

One of the easiest such tools for this purpose is nodemon. This is usually installed globally (as it is a "tool"), but here we'll install and use it locally as a developer dependency, 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:

- -
npm install --save-dev nodemon
- -

If you still choose to install nodemon globally to your machine, and not only to your project's package.json file:

- -
npm install -g nodemon
- -

If you open your project's package.json file you'll now see a new section with this dependency:

- -
 "devDependencies": {
-    "nodemon": "^1.18.10"
-}
-
- -

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 scripts section of your package.json. Initially, it will contain one line, which begins with "start". Update it by putting a comma at the end of that line, and adding the "devstart" line seen below:

- -
  "scripts": {
-    "start": "node ./bin/www",
-    "devstart": "nodemon ./bin/www",
-    "serverstart": "DEBUG=express-locallibrary-tutorial:* npm run devstart"
-  },
-
- -

We can now start the server in almost exactly the same way as previously, but with the devstart command specified:

- - - -
-

Note: Now if you edit any file in the project the server will restart (or you can restart it by typing rs on the command prompt at any time). You will still need to reload the browser to refresh the page.

- -

We now have to call "npm run <scriptname>" rather than just npm start, because "start" is actually an NPM command that is mapped to the named script. We could have replaced the command in the start script but we only want to use nodemon during development, so it makes sense to create a new script command.

- -

The serverstart command added to the scripts in the package.json 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.

-
- -

The generated project

- -

Let's now take a look at the project we just created.

- -

Directory structure

- -

The generated project, now that you have installed dependencies, has the following file structure (files are the items not prefixed with "/"). The package.json file defines the application dependencies and other information. It also defines a startup script that will call the application entry point, the JavaScript file /bin/www. This sets up some of the application error handling and then loads app.js to do the rest of the work. The app routes are stored in separate modules under the routes/ directory. The templates are stored under the /views directory.

- -
/express-locallibrary-tutorial
-    app.js
-    /bin
-        www
-    package.json
-    package-lock.json
-    /node_modules
-        [about 6700 subdirectories and files]
-    /public
-        /images
-        /javascripts
-        /stylesheets
-            style.css
-    /routes
-        index.js
-        users.js
-    /views
-        error.pug
-        index.pug
-        layout.pug
-
-
- -

The following sections describe the files in a little more detail.

- -

package.json

- -

The package.json file defines the application dependencies and other information:

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

The dependencies include the express package and the package for our selected view engine (pug). In addition, we have the following packages that are useful in many web applications:

- - - -

The scripts section defines a "start" script, which is what we are invoking when we call npm start to start the server. From the script definition, you can see that this actually starts the JavaScript file ./bin/www with node. It also defines a "devstart" script, which we invoke when calling npm run devstart instead. This starts the same ./bin/www file, but with nodemon rather than node.

- -
  "scripts": {
-    "start": "node ./bin/www",
-    "devstart": "nodemon ./bin/www"
-  },
-
- -

www file

- -

The file /bin/www is the application entry point! The very first thing this does is require() the "real" application entry point (app.js, in the project root) that sets up and returns the express() application object.

- -
#!/usr/bin/env node
-
-/**
- * Module dependencies.
- */
-
-var app = require('../app');
-
- -
-

Note: require() is a global node function that is used to import modules into the current file. Here we specify app.js module using a relative path and omitting the optional (.js) file extension.

-
- -

The remainder of the code in this file sets up a node HTTP server with app 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.

- -

app.js

- -

This file creates an express application object (named app, 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:

- -
var express = require('express');
-var app = express();
-...
-module.exports = app;
-
- -

Back in the www entry point file above, it is this module.exports object that is supplied to the caller when this file is imported.

- -

Let's work through the app.js file in detail. First, we import some useful node libraries into the file using require(), including http-errors, express, morgan and cookie-parser that we previously downloaded for our application using NPM; and path, which is a core Node library for parsing file and directory paths.

- -
var createError = require('http-errors');
-var express = require('express');
-var path = require('path');
-var cookieParser = require('cookie-parser');
-var logger = require('morgan');
-
- -

Then we require() 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.

- -
var indexRouter = require('./routes/index');
-var usersRouter = require('./routes/users');
-
- -
-

Note: At this point, we have just imported the module; we haven't actually used its routes yet (this happens just a little bit further down the file).

-
- -

Next, we create the app object using our imported express 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 'views' value to specify the folder where the templates will be stored (in this case the subfolder /views). Then we set the 'view engine' value to specify the template library (in this case "pug").

- -
var app = express();
-
-// view engine setup
-app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');
-
- -

The next set of functions call app.use() to add the middleware libraries into the request handling chain. In addition to the 3rd party libraries we imported previously, we use the express.static middleware to get Express to serve all the static files in the /public directory in the project root.

- -
app.use(logger('dev'));
-app.use(express.json());
-app.use(express.urlencoded({ extended: false }));
-app.use(cookieParser());
-app.use(express.static(path.join(__dirname, 'public')));
-
- -

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 parts of the site:

- -
app.use('/', indexRouter);
-app.use('/users', usersRouter);
-
- -
-

Note: The paths specified above ('/' and '/users') are treated as a prefix to routes defined in the imported files. So for example, if the imported users module defines a route for /profile, you would access that route at /users/profile. We'll talk more about routes in a later article.

-
- -

The last middleware in the file adds handler methods for errors and HTTP 404 responses.

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

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 /bin/www).

- -
module.exports = app;
- -

Routes

- -

The route file /routes/users.js is shown below (route files share a similar structure, so we don't need to also show index.js). First, it loads the express module and uses it to get an express.Router 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 app.js).

- -
var express = require('express');
-var router = express.Router();
-
-/* GET users listing. */
-router.get('/', function(req, res, next) {
-  res.send('respond with a resource');
-});
-
-module.exports = router;
-
- -

The route defines a callback that will be invoked whenever an HTTP GET request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('/users') plus whatever is defined in this file ('/'). In other words, this route will be used when an URL of /users/ is received.

- -
-

Tip: Try this out by running the server with node and visiting the URL in your browser: http://localhost:3000/users/. You should see a message: 'respond with a resource'.

-
- -

One thing of interest above is that the callback function has the third argument 'next', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the next argument, it may be useful in the future if you want to add multiple route handlers to the '/' route path.

- -

Views (templates)

- -

The views (templates) are stored in the /views directory (as specified in app.js) and are given the file extension .pug. The method Response.render() 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 /routes/index.js you can see how that route renders a response using the template "index" passing the template variable "title".

- -
/* GET home page. */
-router.get('/', function(req, res, next) {
-  res.render('index', { title: 'Express' });
-});
-
- -

The corresponding template for the above route is given below (index.pug). We'll talk more about the syntax later. All you need to know for now is that the title variable (with value 'Express') is inserted where specified in the template.

- -
extends layout
-
-block content
-  h1= title
-  p Welcome to #{title}
-
- -

Challenge yourself

- -

Create a new route in /routes/users.js that will display the text "You're so cool" at URL /users/cool/. Test it by running the server and visiting http://localhost:3000/users/cool/ in your browser

- - - -

Summary

- -

You have now created a skeleton website project for the Local Library and verified that it runs using node. 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.

- -

Next, we'll start modifying the skeleton so that it works as a library website.

- -

See also

- - - -

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}

- -

In this module

- - diff --git a/files/ko/learn/server-side/node_server_without_framework/index.html b/files/ko/learn/server-side/node_server_without_framework/index.html new file mode 100644 index 0000000000..1050f6aafd --- /dev/null +++ b/files/ko/learn/server-side/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 +--- +

소개

+ +

물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:

+ + + +

하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.

+ +

예제

+ +

다음은 짧고 간단한 정적 파일 nodejs 서버입니다.

+ +
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/');
diff --git a/files/ko/learn/skills/index.html b/files/ko/learn/skills/index.html deleted file mode 100644 index 582bd0d275..0000000000 --- a/files/ko/learn/skills/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: 스킬 -slug: Learn/Skills -tags: - - Index -translation_of: Learn -translation_of_original: Learn/Skills ---- -

여러분은 웹에 대하여 학습할 때 수 많은 스킬들을 선택해야 합니다. WebMaker는 초심자들이 기초를 학습하는 로드맵인 Web Literacy Map이라는 기본 스킬들의 목록을 정의합니다.  여기 MDN에서는 웹사이트를 제작하는데 필요한 역량에 초점을 맞추고, 모든 스킬 레벨에 대한 학습을 제공합니다:

- -
-
Web Mechanics
-
웹 생태계를 이해한다
-
Infrastructure
-
웹의 기술적 스택을 이해한다
-
Coding/Scripting
-
상호적인 웹 경험(Web experience)를 만든다.
-
Design and Accessibility
-
웹 리소스를 이용하여 모두와 효과적으로 의사소통한다
-
Composing for the web
-
웹 콘텐츠를 만들고 관장한다
-
diff --git "a/files/ko/learn/web_\352\270\260\354\210\240/index.html" "b/files/ko/learn/web_\352\270\260\354\210\240/index.html" deleted file mode 100644 index 1f04d35fe1..0000000000 --- "a/files/ko/learn/web_\352\270\260\354\210\240/index.html" +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Web 기술 -slug: Learn/Web_기술 -tags: - - Beginner - - WebMechanics -translation_of: Learn/Common_questions -translation_of_original: Learn/Web_Mechanics ---- -

이것은 여러분이 웹 생태계를 이해할 수 있도록 충분히 설명해줍니다. 저희는 여러분이 필요한 정보를 작고, 세분화된 기술로 나누었습니다.

- -

{{NoteStart}}Web 기술 은 웹 생태계의 기술적인 측명이 아니라, Infrastructure 범위의 기능에 집중합니다.{{NoteEnd}}

- -

기본 스킬

- -

만약 웹이 익숙하지 않다면 여기서 시작하세요. 웹 용어의 이해를 돕기 위한 우리의 glossary 에 의지하는것도 제안합니다.

- -

중급 스킬

- -

일단 웹이 익숙해지셨다면, 여러분이 탐구할 몇 가지 세부적인 것이 여기 있습니다:

- -

고급 스킬

- -

만약 웹 제작을 경험해보셨다면, 여러분은 몇 가지 특수하거나 일반적이지 않은 기술들에 흥미를 가지실 것입니다.

diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" deleted file mode 100644 index dae842fc92..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/html/index.html" +++ /dev/null @@ -1,537 +0,0 @@ ---- -title: 'HTML: 접근성을 위한 기초' -slug: Learn/접근성/HTML -tags: - - HTML - - HTML 접근성 - - 스크린리더 - - 시멘틱 - - 시멘틱 웹 - - 시멘틱웹 - - 웹 접근성 - - 접근성 향상 -translation_of: Learn/Accessibility/HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
- -

HTML 요소가 늘 올바른 목적을 가지고 쓰이는지 확인하는 것만으로도, 수많은 웹 콘텐츠는 접근성이 향상됩니다. 이 문서에는 접근성을 최대한으로 보장하기 위해 HTML을 어떻게 사용해야 하는지 자세히 설명합니다.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML (see Introduction to HTML), and understanding of what accessibility is.
Objective:To gain familiarity with what features of HTML have accessibility benefits, and how to use them appropriately in your web documents.
- -

HTML과 접근성

- -

 

- -

HTML에 대해 더 많은 자료와 예제를 접하고, 더 많이 배우면 배울수록 당신은 의미론적 HTML(시멘틱 HTML, POSH 또는 Plain Old Semantic HTML라고 부르기도 합니다)을 사용하는 것이 중요하다는 공통 주제를 계속해서 접하게 될 것입니다. 이것은 가능한 올바른 목적으로 올바른 HTML 요소를 사용하는 것을 의미합니다.

- -

당신은 아마 이것이 왜 중요한지 의문을 가질 수 있을 것입니다. 당신은 CSS와 JavaScript 조합을 사용해 원하는 방식으로 HTML 요소들을 동작시킬 수 있기 때문입니다. 예를 들어 사이트에서 동영상을 제어하기 위한 버튼을 당신은 이렇게 마크업 할 수 있습니다.

- -
<div>Play video</div>
- -

그러나 당신이 나중에 더 자세하게 배울수록, 작업에 올바른 HTML 요소를 사용하는 것이 많은 의미를 내포하고 있음을 깨닫게 될 것입니다.

- -
<button>Play video</button>
- -

Not only do HTML <button>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.

- -

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:

- -
    -
  1. Easier to develop with — as mentioned above, you get some functionality for free, plus it is arguably easier to understand.
    2. -
  2. Better on mobile — semantic HTML is arguably lighter in file size than non-semantic spaghetti code, and easier to make responsive.
    3. -
  3. Good for SEO — search engines give more importance to keywords inside headings, links, etc., than keywords included in non-semantic <div>s, etc., so your documents will be more findable by customers.
    4. -
- -

Let's get on and look at accessible HTML in more detail.

- -
-

Note: 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 Screenreaders guide for more details.

-
- -

Good semantics

- -

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.

- -

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.

- -

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.

- -

The goal isn't "all or nothing", however — every improvement you are able to make will help the cause of accessibility.

- -

Text content

- -

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:

- -
<h1>My heading</h1>
-
-<p>This is the first section of my document.</p>
-
-<p>I'll add another paragraph here too.</p>
-
-<ol>
-  <li>Here is</li>
-  <li>a list for</li>
-  <li>you to read</li>
-</ol>
-
-<h2>My subheading</h2>
-
-<p>This is the first subsection of my document. I'd love people to be able to find this content!</p>
-
-<h2>My 2nd subheading</h2>
-
-<p>This is the second subsection of my content. I think is more interesting than the last one.</p>
- -

We've prepared a version with longer text for you to try out with a screenreader (see good-semantics.html). If you try navigating through this, you'll see that this is pretty easy to navigate:

- -
    -
  1. The screenreader reads each header out as you progress through the content, notifying you what is a heading, what is a paragraph, etc.
    2. -
  2. It stops after each element, letting you go at whatever pace is comfortable for you.
    3. -
  3. You can jump to next/previous heading in many screenreaders.
    4. -
  4. 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.
    5. -
- -

People sometimes write headings, paragraphs, etc. using presentational HTML and line breaks, something like the following:

- -
<font size="7">My heading</font>
-<br><br>
-This is the first section of my document.
-<br><br>
-I'll add another paragraph here too.
-<br><br>
-1. Here is
-<br><br>
-2. a list for
-<br><br>
-3. you to read
-<br><br>
-<font size="5">My subheading</font>
-<br><br>
-This is the first subsection of my document. I'd love people to be able to find this content!
-<br><br>
-<font size="5">My 2nd subheading</font>
-<br><br>
-This is the second subsection of my content. I think is more interesting than the last one.
- -

If you try our longer version out with a screenreader (see bad-semantics.html), 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.

- -

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.

- -

Using clear language

- -

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:

- - - -

Page layouts

- -

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.

- -

Try our example table-layout.html example, which looks something like this:

- -
<table width="1200">
-      <!-- main heading row -->
-      <tr id="heading">
-        <td colspan="6">
-
-          <h1 align="center">Header</h1>
-
-        </td>
-      </tr>
-      <!-- nav menu row  -->
-      <tr id="nav" bgcolor="#ffffff">
-        <td width="200">
-          <a href="#" align="center">Home</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Our team</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Projects</a>
-        </td>
-        <td width="200">
-          <a href="#" align="center">Contact</a>
-        </td>
-        <td width="300">
-          <form width="300">
-            <input type="search" name="q" placeholder="Search query" width="300">
-          </form>
-        </td>
-        <td width="100">
-          <button width="100">Go!</button>
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- main content and aside row -->
-      <tr id="main">
-        <td id="content" colspan="4" bgcolor="#ffffff">
-
-          <!-- main content goes here -->
-        </td>
-        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
-          <h2>Related</h2>
-
-          <!-- aside content goes here -->
-
-        </td>
-      </tr>
-      <!-- spacer row -->
-      <tr id="spacer" height="10">
-        <td>
-
-        </td>
-      </tr>
-      <!-- footer row -->
-      <tr id="footer" bgcolor="#ffffff">
-        <td colspan="6">
-          <p>©Copyright 2050 by nobody. All rights reversed.</p>
-        </td>
-      </tr>
-    </table>
- -

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.

- -

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!

- -

You can verify these claims by comparing your previous experience with a more modern website structure example, which could look something like this:

- -
<header>
-  <h1>Header</h1>
-</header>
-
-<nav>
-  <!-- main navigation in here -->
-</nav>
-
-<!-- Here is our page's main content -->
-<main>
-
-  <!-- It contains an article -->
-  <article>
-    <h2>Article heading</h2>
-
-    <!-- article content in here -->
-  </article>
-
-  <aside>
-    <h2>Related</h2>
-
-    <!-- aside content in here -->
-  </aside>
-
-</main>
-
-<!-- And here is our main footer that is used across all the pages of our website -->
-
-<footer>
-  <!-- footer content in here -->
-</footer>
- -

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

- -

Another consideration when creating layouts is using HTML5 semantic elements as seen in the above example (see content sectioning) — 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 Screen Reader Support for new HTML5 Section Elements for an idea of what screen reader support is like).

- -
-

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

-
- -

UI controls

- -

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.

- -

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 native-keyboard-accessibility.html example (see the source code) — 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.

- -

- -

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

- -
-

Note: Different browsers may have different keyboard control options available. See Using native keyboard accessibility for more details.

-
- -

You essentially get this behavior for free, just by using the appropriate elements, e.g.

- -
<h1>Links</h1>
-
-<p>This is a link to <a href="https://www.mozilla.org">Mozilla</a>.</p>
-
-<p>Another link, to the <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
-
-<h2>Buttons</h2>
-
-<p>
-  <button data-message="This is from the first button">Click me!</button>
-  <button data-message="This is from the second button">Click me too!</button>
-  <button data-message="This is from the third button">And me!</button>
-</p>
-
-<h2>Form</h2>
-
-<form>
-  <div>
-    <label for="name">Fill in your name:</label>
-    <input type="text" id="name" name="name">
-  </div>
-  <div>
-    <label for="age">Enter your age:</label>
-    <input type="text" id="age" name="age">
-  </div>
-  <div>
-    <label for="mood">Choose your mood:</label>
-    <select id="mood" name="mood">
-      <option>Happy</option>
-      <option>Sad</option>
-      <option>Angry</option>
-      <option>Worried</option>
-    </select>
-  </div>
-</form>
- -

This means using links, buttons, form elements, and labels appropriately (including the {{htmlelement("label")}} element for form controls).

- -

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:

- -
<div data-message="This is from the first button">Click me!</div>
-<div data-message="This is from the second button">Click me too!</div>
-<div data-message="This is from the third button">And me!</div>
- -

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.

- -

Building keyboard accessibility back in

- -

Adding such advantages back in takes a bit of work (you can an example code in our fake-div-buttons.html example — also see the source code). Here we've given our fake <div> buttons the ability to be focused (including via tab) by giving each one the attribute tabindex="0":

- -
<div data-message="This is from the first button" tabindex="0">Click me!</div>
-<div data-message="This is from the second button" tabindex="0">Click me too!</div>
-<div data-message="This is from the third button" tabindex="0">And me!</div>
- -

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

- - - -

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:

- -
document.onkeydown = function(e) {
-  if(e.keyCode === 13) { // The Enter/Return key
-    document.activeElement.click();
-  }
-};
- -

Here we add a listener to the document object to detect when a button has been pressed on the keyboard. We check what button was pressed via the event object's keyCode property; if it is the keycode that matches Return/Enter, we run the function stored in the button's onclick handler using document.activeElement.click(). activeElement gives us the element that is currently focused on the page.

- -

This is a lot of extra hassle to build the functionality back in. And there's bound to be other problems with it. Better to just use the right element for the right job in the first place.

- -

Meaningful text labels

- -

UI control text labels are very useful to all users, but getting them right is particularly important to users with disabilities.

- -

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.

- -

- -

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>Whales are really awesome creatures. <a href="whales.html">Find out more about whales</a>.</p>
- -

but this is bad link text:

- -
<p>Whales are really awesome creatures. To find more out about whales, <a href="whales.html">click here</a>.</p>
- -
-

Note: You can find a lot more about link implementation and best practices in our Creating hyperlinks article. You can also see some good and bad examples at good-links.html and bad-links.html.

-
- -

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:

- -
Fill in your name: <input type="text" id="name" name="name">
- -

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

- -

The following is a much better example:

- -
<div>
-  <label for="name">Fill in your name:</label>
-  <input type="text" id="name" name="name">
-</div>
- -

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

- -

- -

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.

- -
-

Note: you can see some good and bad form examples in good-form.html and bad-form.html.

-
- -

Accessible data tables

- -

A basic data table can be written with very simple markup, for example:

- -
<table>
-  <tr>
-    <td>Name</td>
-    <td>Age</td>
-    <td>Gender</td>
-  </tr>
-  <tr>
-    <td>Gabriel</td>
-    <td>13</td>
-    <td>Male</td>
-  </tr>
-  <tr>
-    <td>Elva</td>
-    <td>8</td>
-    <td>Female</td>
-  </tr>
-  <tr>
-    <td>Freida</td>
-    <td>5</td>
-    <td>Female</td>
-  </tr>
-</table>
- -

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 bad-table.html and try the example out yourself).

- -

Now have a look at our punk bands table example — you can see a few accessibility aids at work here:

- - - -
-

Note: See our HTML table advanced features and accessibility article for some more details around accessible data tables.

-
- -

Text alternatives

- -

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.

- -

We have a simple example written up, accessible-image.html, which features four copies of the same image:

- -
<img src="dinosaur.png">
-
-<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.">
-
-<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">
-
-
-<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">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.</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.

- -
-

Note: 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!

-
- -

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

- -

This highlights the importance of not only using meaningful file names in case so-called alt text is not available, but also making sure that alt text is provided in alt attributes wherever possible. Note that the contents of the alt 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.

- -

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.

- -
-

Note: Read Images in HTML and Responsive images for a lot more information about image implementation and best practices.

-
- -

If you do want to provide extra contextual information, you should put it in the text surrounding the image, or inside a title 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.

- -

- -

Let's have another quick look at the fourth method:

- -
<img src="dinosaur.png" aria-labelledby="dino-label">
-
-<p id="dino-label">The Mozilla red Tyrannosaurus ... </p>
- -

In this case, we are not using the alt attribute at all — instead, we have presented our description of the image as a regular text paragraph, given it an id, and then used the aria-labelledby attribute to refer to that id, 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 alt.

- -
-

Note: aria-labelledby is part of the WAI-ARIA 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 WAI-ARIA Basics article.

-
- -

Other text alternative mechanisms

- -

Images also have another mechanisms available for providing descriptive text. For example, there is a longdesc attribute that is meant to point to a separate web document containing an extended description of the image, for example:

- -
<img src="dinosaur.png" longdesc="dino-info.html">
- -

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

- -

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:

- -
<figure>
-  <img src="dinosaur.png" alt="The Mozilla Tyrannosaurus">
-  <figcaption>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.</figcaption>
-</figure>
- -

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.

- -

Empty alt attributes

- -
<h3>
-  <img src="article-icon.png" alt="">
-  Tyrannosaurus Rex: the king of the dinosaurs
-</h3>
- -

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

- -

The reason to use an empty alt instead of not including it is because many screen readers announce the whole image URL if no alt 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 alt on your images. Another alternative is to use the aria role attribute role="presentation" — this also stops screens readers from reading out alternative text.

- -
-

Note: if possible you should use CSS to display images that are only decoration.

-
- -

Summary

- -

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.

- -

{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}

- -

 

- -

In this module

- - - -

 

diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" deleted file mode 100644 index 01c9c2e2bb..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/index.html" +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: 접근성 -slug: Learn/접근성 -tags: - - ARIA - - CSS - - HTML - - JavaScript - - 랜딩 - - 모듈 - - 문서 - - 배우기 - - 비기너 - - 접근성 -translation_of: Learn/Accessibility ---- -
{{LearnSidebar}}
- -

웹 개발자가 되기위해서 HTML, CSS 및 JavaScript를 배우는 것이 필요하지만 배운 지식을 효과적으로 사용하기위해서는 지식이상의 기술이 필요로 합니다. 이 기술을 사용해서 웹사이트에 접근하려는 모든 사용자를 차별없이 접근할수 있도록 해야합니다.  이를 위하여 모범 사례(HTML, CSS 및 JavaScript 항목에서 설명) 를 준수하고 브라우저 호환성 테스트를 거치며 처음부터 접근성을 고려해야합니다. 이 문서에서는 후자에 대해 자세히 다룰 것입니다.

- -

선결조건

- -

이 문서를 최대한 활용하려면 최소한 HTML, CSS 및 JavaScript 항목 중 처음 두 문서를 통해 작업하거나 또는 접근성 문서와 관련된 기술을 통해 개선해 나가는것이 좋습니다. 

- -
-

Note: 참고 : 당신은 당신이 당신의 자신의 파일을 생성 할 수있는 기능이없는 컴퓨터 / 태블릿 / 다른 장치에서 작업하는 경우, 당신은  JSBin 또는 Thimble 같은 온라인 코딩 프로그램에서 코드 예제의 대부분을 테스트 할수 있습니다.

-
- -

가이드

- -
-
접근성이란?
-
이 문서에서는 접근성이 실제로 무엇인지 자세히 살펴보는 것으로 모듈을 시작합니다. 여기에는 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 워크 플로우를 개발하는 방법이 포함됩니다.
-
HTML: 접근성을 위한 좋은기초
-
항상 올바른 HTML요소를 올바른 용도로 사용하는 것만으로 수많은 웹 콘텐츠에 접근 할 수 있습니다. 이 문서는 접근성을 극대화하기 위해 HTML을 사용하는 방법을 자세히 살펴봅니다.
-
CSS 와 JavaScript의 접근성 모범 사례
-
또한, CSS 와 JavaScript를 적절히 사용하면 접근성 높은 웹 경험을 줄수도 있지만 , 만약 잘못 사용될 경우 접근성을 크게 해칠 수 있다. 이 문서에서는 복잡한 컨텐츠도 가능한 액세스 할 수 있도록 하기 위해 고려해야 할 몇가지 CSS 및 JavaScript모범 사례를 간략히 설명합니다.
-
WAI-ARIA 기초
-
이전 문서에 이어, 시맨틱하지 못한 HTML과 동적 자바 스크립트로 업데이트되는  컨텐츠를 포함하는 복잡한 UI를 제어 하는 것은 어려울 수 있습니다. WAI-ARIA는 브라우저와 보조 기술이 사용자에게 상황을 알려 주는 데 사용할 수 있는 시맨틱한 요소를 추가하여 이러한 문제를 해결하는 기술이다. 여기서는 접근성을 향상시키기 위해 기본적인 수준에서 이 기능을 사용하는 방법을 보여 줍니다.
-
멀티미디어 접근성
-
접근성 문제를 야기할 수 있는 또 다른 범주의 콘텐츠 즉 멀티 미디어 . 비디오, 오디오 및 이미지 콘텐츠에 적절한 대체텍스트를 제공해서 보조 기술과 사용자가 이해할 수 있도록 해야 한다. 이 글은 그 방법을 보여 준다.
-
모바일 접근성
-
모바일 기기를 이용한 웹 접근이 매우 널리 사용되고 있고 iOS및 Android와 같은 유명한 플랫폼에서 액세스가 가능한 툴을 사용하는 경우, 이러한 플랫폼에서 웹 콘텐츠를 접근 할 수 있는지를 고려해야 합니다. 이 자료에서는 모바일 접근성 고려 사항에 대해 살펴봅니다.
-
- -

평가

- -
-
접근성 문제 해결 
-
평가에서는 진단 및 해결해야 하는 다양한 접근성 문제가 포함된 간단한 사이트를 제공합니다.
-
- -

참고 항목

- - diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" deleted file mode 100644 index 67f4b6d302..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/what_is_accessibility/index.html" +++ /dev/null @@ -1,205 +0,0 @@ ---- -title: What is accessibility? -slug: Learn/접근성/What_is_accessibility -translation_of: Learn/Accessibility/What_is_accessibility ---- -

{{LearnSidebar}}

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

- -

이 글에서는 접근성이 실제로 무엇인지 자세히 살펴보기로 합니다. 이 글에는 웹에서 고려해야 할 사람의 그룹, 웹과 상호 작용하는 데 사용하는 서로 다른 도구 및 접근성 개발 워크 플로우를 포함됩니다.

- - - - - - - - - - - - -
선행지식:기본적인 컴퓨터 사용 능력, HTML과 CSS에 대한 기본적인 이해.
목표:접근성과 친해지기. 웹 개발자로서 접근성에어떻게 영향을 미치는지 알아보기
- -

그렇다면 접근성이란 무엇일까요?

- -

접근성은 가능한 한 많은 사람이 웹 사이트를 사용할 수 있도록 하는 방법으로, 통상적으로 장애인만을 대상으로 한다고 생각하지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하고 있습니다.

- -

접근성을 모든 사람을 동일하게 대하고, 그들의 능력이나 상황에 상관 없이 그들에게 같은 기회를 주는 것으로 생각할 수도 있습니다. 휠체어에 있기 때문에 누군가를 물리적 건물에서 제외시키는 것이 옳지 않은 것과 같은 방식으로(공공 건물에는 일반적으로 휠체어 경사로나 엘리베이터가 있기 때문에), 휴대 전화를 사용하지 않는 사람을 웹 사이트에서 제외시키는 것도 옳지 않다. 우리는 모두 다르지만, 모두 인간이기 때문에, 동일한 권리를 갖고 있다.

- -

접근성은 당연히 지켜져야 할 일이지만 일부 국가에서는 법의 일부이기도 하며,  서비스 사용이나 제품 구매가 불가능했던 사람들을 불러모아 중요한 소비자들로 만들수도 있습니다.

- -

접근성 및 이에 따른 모범 사례는 다음과 같은 모든 사람에게 도움이 될 수 있습니다.

- - - -

어떤 종류의 장애를 본 적이 있습니까?

- -

장애가 있는 사람들도 장애가 없는 사람들만큼이나 다양하고, 그만큰 그들의 장애유형도 다양합니다. 여기서 중요한 교훈은 자신이 컴퓨터와 웹을 어떻게 사용하는 지에 대해 생각하고 다른 사람들이 웹을 어떻게 사용하는 지에 대해 배우는 것이다.

- -

장애의 주요 유형은 웹 콘텐츠에 액세스 하는 데 사용하는 전문 도구와 함께 아래에 설명되어 있습니다.(흔히 보조공학기기또는 보조기술 이라고 알려진).

- -
-

Note: 세계 보건 기구(WHO)의 장애 및 보건 현황 보고서에 따르면 전 세계 인구의 약 15%에 해당하는 십억명 이상의 사람들이 장애를 갖고 있으며 1억 1천만명에서 1억 9천만명의 성인들이 심각한 장애를 갖고 있다.

- -

 

-
- -

시각장애인

- -

여기에는 전맹, 저시력 장애인 색각장애인등이 포함되며 이런 많은 사람들이 화면확대경(물리적 확대경 또는 소프트웨어 줌 기능 - 대부분의 브라우저와 운영 체제에는 최근 확대 / 축소 기능이 있음)과 디지털 글자를 큰소리로 읽어주는 소프트웨어인 화면낭독기를 사용한다.

- - - -

 

- -

스크린 리더들과 친숙해 지는 것은 좋은 생각이다; 당신은 또한 스크린 리더를 설치하고 그것을 가지고 노는 것이 어떻게 작동하는 지에 대한 아이디어를 얻기 위해서 필요하다. 사용에 대한 자세한 내용은 크로스 브라우저 테스트 화면 판독기 가이드( cross browser testing screen readers guide)를 참조하십시오. 아래의 비디오는 또한 경험이 어떠한지에 대한 간단한 예를 제공한다.

- -

{{EmbedYouTube("IK97XMibEws")}}

- -

 

- -

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 Visual impairment and blindness). 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.

- -

People with hearing impairments

- -

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 Assistive Devices for People with Hearing, Voice, Speech, or Language Disorders), but there are not really special ATs specific for computer/web use.

- -

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.

- -

Hearing-impaired people also represent a significant userbase — "360 million people worldwide have disabling hearing loss", says the World Health Organization's Deafness and hearing loss fact sheet.

- -

People with mobility impairments

- -

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 head pointer to interact with computers.

- -

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.

- -

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 Cross browser testing Using native keyboard accessibility section.

- -

In terms of statistics, a significant number of people have mobility impairments. The U.S. Centers for Disease Control and Prevention Disability and Functioning (Noninstitutionalized Adults 18 Years and Over) reports the USA "Percent of adults with any physical functioning difficulty: 15.1%".

- -

People with cognitive impairments

- -

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 ADHD (attention deficit hyperactivity disorder), to people on the autistic spectrum, to people with schizophrenia, 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.

- -

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.

- -

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:

- - - -

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.

- -

In terms of statistics, again the numbers are significant. Cornell University's 2014 Disability Status Report (PDF, 511KB) indicates that in 2014, 4.5% of people in the USA aged 21–64 had some form of cognitive disability.

- -
-

Note: WebAIM's Cognitive page provides a useful expansion of these ideas, and is certainly worth reading.

-
- -

Implementing accessibility into your project

- -

A common accessibility myth is that accessibility is an expensive "added extra" to implement on a project. This myth actually can be true if either:

- - - -

If however you consider accessibility from the start of a project, the cost of making most content accessible should be fairly minimal.

- -

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 alternative text or bad link text — see Element relationships and context), and doing some testing with disabled user groups to see how well more complex site features work for them. For example:

- - - -

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.

- -

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.

- -

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.

- -

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.

- -
-

Note: Our Handling common accessibility problems article covers accessibility specifics that should be tested in more detail.

-
- -

To summarize:

- - - -

Accessibility guidelines and the law

- -

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.

- - - -

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.

- -

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.

- -

Accessibility APIs

- -

Web browsers make use of special accessibility APIs (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 accessibility tree.

- -

Different operating systems have different accessibility APIs available :

- - - -

Where the native semantic information provided by the HTML elements in your web apps falls down, you can supplement it with features from the WAI-ARIA specification, which add semantic information to the accessibility tree to improve accessibility. You can learn a lot more about WAI-ARIA in our WAI-ARIA basics article.

- -

Summary

- -

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.

- -

{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}

- -

In this module

- - diff --git "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" "b/files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" deleted file mode 100644 index a64c0eaa88..0000000000 --- "a/files/ko/learn/\354\240\221\352\267\274\354\204\261/\353\252\250\353\260\224\354\235\274/index.html" +++ /dev/null @@ -1,315 +0,0 @@ ---- -title: 모바일 접근성 -slug: Learn/접근성/모바일 -translation_of: Learn/Accessibility/Mobile ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -

모바일 기기에서 웹 접근이 매우 자주 발생하고 iOS와 안드로이드와 같은 유명 플랫폼들은 전문적인 접근성 점검도구들이 있기 때문에 웹콘텐츠의 접근성을 고려하는 것이 더욱 중요하다. 여기서는 모바일환경을 중심으로 접근성 고려사항을 살펴본다.

- - - - - - - - - - - - -
사전지식: -

기본적인 컴퓨터 사용능력, HTML, CSS, JavaScript에 대한 기본적인 이해, 그리고 이전 내용들에 대한 이해.

-
목표: -

모바일 기기의 접근성에 어떤 문제가 있는지, 그리고 이를 극복하는 방법을 이해한다.

-
- -

모바일 장치에서의 접근성

- -

접근성 상태(일반적으로 웹 표준에 대한 지원)는 최근의 모바일 장치에서 좋다. 모바일 기기가 데스크톱 브라우저에 전혀 다른 웹 기술을 실행하면서 개발자들이 브라우저 코웃음을 치며 완전히 별개의 사이트에 서비스를 제공하도록 강요하던 시대는 이미 오래 전에 지났다(아직도 상당수의 회사가 모바일 장치의 사용을 감지하여 별도의 모바일 도메인을 서비스하고 있다).

- - - -

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

- -

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 WAI-ARIA, too.

- -

To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.

- -

There are some exceptions that need special consideration for mobile; the main ones are:

- - - -

Summary of screenreader testing on Android and iOS

- -

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.

- -

Let's look at the main two: TalkBack on Android and VoiceOver on iOS.

- -

Android TalkBack

- -

The TalkBack screen reader is built into the Android operating system.

- -

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.

- -

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.

- -

When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:

- -
    -
  1. Single-tapping an app will select it, and the device will read out what the app is.
    2. -
  2. 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.
    3. -
  3. Double-tapping anywhere will open the app/select the option.
    4. -
  4. 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.
    5. -
- -

If you want to turn TalkBack off:

- -
    -
  1. Navigate back to the TalkBack menu screen (using the different gestures that are currently enabled.)
    2. -
  2. Navigate to the slider switch and activate it to turn it off.
    3. -
- -
-

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

-
- -

For a more complete list of TalkBack gestures, see Use TalkBack gestures.

- -

Unlocking the phone

- -

When TalkBack is turned on, unlocking the phone is a bit different.

- -

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.

- -

You can also explore by touch to find the Unlock button at the bottom middle of the screen, and then double-tap.

- -

Global and local menus

- -

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.

- -

To get to these menus:

- -
    -
  1. Access the global menu by quickly swiping down, and then right.
    2. -
  2. Access the local menu by quickly swiping up, and then right.
    3. -
  3. Swipe left and right to cycle between the different options.
    4. -
  4. Once you've selected the option you want, double-click to choose that option.
    5. -
- -

For details on all the options available under the global and local context menus, see Use global and local context menus.

- -

Browsing web pages

- -

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.

- -

For example, with TalkBack turned on:

- -
    -
  1. Open your web browser.
    2. -
  2. Activate the URL bar.
    3. -
  3. 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: -
      -
    • Select the URL bar by swiping left/right till you get to it, and then double-tapping.
      • -
    • 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.
      • -
    • Once you've finished, find the Enter key and press it.
      • -
    -
    4. -
  4. Swipe left and right to move between different items on the page.
    5. -
  5. Swipe up and right with a smooth motion to enter the local content menu.
    6. -
  6. Swipe right until you find the "Headings and Landmarks" option.
    7. -
  7. Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
    8. -
  8. 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.
    9. -
- -

Note: See Get started on Android with TalkBack for more complete documentation.

- -

iOS VoiceOver

- -

A mobile version of VoiceOver is built into the iOS operating system.

- -

To turn it on, go to Your Settings app and select Accessibility > VoiceOver. Press the VoiceOver slider to enable it (you'll also see a number of other options related to VoiceOver on this page).

- -
-

Note: Some older iOS devices have the VoiceOver menu at Settings app > General > Accessibility > VoiceOver.

-
- -

Once VoiceOver is enabled, iOS's basic control gestures will be a bit different:

- -
    -
  1. A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
    2. -
  2. 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).
    3. -
  3. To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
    4. -
  4. Swipe with three fingers to scroll through a page.
    5. -
  5. Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
    6. -
- -

To turn it off again, navigate back to Settings > General > Accessibility > VoiceOver using the above gestures, and toggle the VoiceOver slider back to off.

- -

Unlock phone

- -

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.

- -

Using the Rotor

- -

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:

- -
    -
  1. 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.
    2. -
  2. Once you've found the option you want: -
      -
    • Release your fingers to select it.
      • -
    • 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.
      • -
    -
    3. -
- -

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

- -

Browsing web pages

- -

Let's have a go at web browsing with VoiceOver:

- -
    -
  1. Open your web browser.
    2. -
  2. Activate the URL bar.
    3. -
  3. 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: -
      -
    • Select the URL bar by swiping left/right until you get to it, and then double-tapping.
      • -
    • 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.
      • -
    • Once you've finished, find the Enter key and press it.
      • -
    -
    4. -
  4. 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).
    5. -
  5. By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
    6. -
  6. 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: -
      -
    • Speaking Rate: Change the speaking rate.
      • -
    • Containers: Move between different semantic containers on the page.
      • -
    • Headings: Move between headings on the page.
      • -
    • Links: Move between links on the page.
      • -
    • Form Controls: Move between form controls on the page.
      • -
    • Language: Move between different translations, if they are available.
      • -
    -
    7. -
  7. Select Headings. Now you'll be able to swipe up and down to move between headings on the page.
    8. -
- -

Note: For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see Test Accessibility on Your Device with VoiceOver.

- -

Control mechanisms

- -

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 Mouse-specific events). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.

- -

As an example, the click 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 simple-button-example.html example (see it running live) to see what we mean.

- -

Alternatively, mouse-specific events such as mousedown and mouseup create problems — their event handlers cannot be invoked using non-mouse controls.

- -

If you try to control our simple-box-drag.html (see example live) example with a keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:

- -
div.onmousedown = function() {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  movePanel();
-}
-
-document.onmouseup = stopMove;
- -

To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:

- -
div.ontouchstart = function(e) {
-  initialBoxX = div.offsetLeft;
-  initialBoxY = div.offsetTop;
-  positionHandler(e);
-  movePanel();
-}
-
-panel.ontouchend = stopMove;
- -

We've provided a simple example that shows how to use the mouse and touch events together — see multi-control-box-drag.html (see the example live also).

- -
-

Note: You can also see fully functional examples showing how to implement different control mechanisms at Implementing game control mechanisms.

-
- -

Responsive design

- -

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

- -

In particular, the most common problems that need to be addressed for mobile are:

- - - -

Note: We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).

- -

Specific mobile considerations

- -

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.

- -

Not disabling zoom

- -

Using viewport, it is possible to disable zoom. Always ensure resizing is enabled, and set the width to the device's width in the {{htmlelement("head")}}:

- -
<meta name="viewport" content="width=device-width; user-scalable=yes">
- -

You should never set user-scalable=no 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.

- -

Keeping menus accessible

- -

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

- -

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.

- -

Click here for a good hamburger menu example.

- -

User input

- -

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.

- -

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 common-job-types.html (see the common jobs example live).

- -

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 html5-form-examples.html for some examples (see the HTML5 form examples live) — try loading these and manipulating them on mobile devices. For example:

- - - -

If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See input types for raw information on detecting different input types, and also check out our feature detection article for much more information.

- -

Summary

- -

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.

- -

See also

- - - -
{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
- -
-

In this module

- - -
diff --git a/files/ko/localization/index.html b/files/ko/localization/index.html deleted file mode 100644 index d2f45a54e0..0000000000 --- a/files/ko/localization/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Localization -slug: Localization -tags: - - Localization -translation_of: Glossary/Localization ---- -
-

지역화는 소프트웨어 사용자 인터페이스를 다른 언어로 번역하고 그 문화에 맞게 바꾸는 과정을 의미합니다. 지역화와 관련된 내용은 모질라 기반의 프로그램이나 확장기능을 지역화 할 수 있게 만드는 것에 관한 것입니다.

- - - - - - - -
-

선택된 주제

-
-
- Create a new localization
-
- First read for volunteers wanting to create a new localization.
-
-
-
- XUL Tutorial:Localization
-
- XUL Tutorial XUL 응용프로그램 지역화 관련.
-
-
-
- Writing localizable code
-
- 프로그래머를 위한 최상의 지역화 작업의 실례와 제시안들.
-
-
-
- Localizing descriptions of extensions
-
- 확장기능의 설명을 지역화 하기위해서는 "install.rdf" 파일 내에 입력된 사항들을 대체하기 위한 특별한 설정키가 필요합니다.
-
- 본문에서는 이러한 설정 키들을 어떻게 수정하는지 그 순서 및 방법에 관한 내용을 담고 있습니다.
-
-


- View All...

- 		-

다른 페이지들

- -

관련 주제들

-
-
- Extensions, XUL
-
-
-

Categories

-

Interwiki Language Links

-
-

{{ languages( { "en": "en/Localization", "es": "es/Localizaci\u00f3n", "it": "it/Localization", "fr": "fr/Localisation", "ja": "ja/Localization", "pl": "pl/Lokalizacja" } ) }}

diff --git a/files/ko/mdn/about/mdn_services/index.html b/files/ko/mdn/about/mdn_services/index.html deleted file mode 100644 index 1d04e3d468..0000000000 --- a/files/ko/mdn/about/mdn_services/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: MDN Services -slug: MDN/About/MDN_services -tags: - - Landing - - MDN Meta -translation_of: MDN/About/MDN_services ---- -
{{MDNSidebar}}
- -

MDN 서비스는 기존 워크플로우에 적합하고 개발자가 웹 코드를 개선할 수 있도록 설계된 웹 개개발자를 위한 실험적 유틸리티입니다. 모든 MDN 서비스는 개발 초기 알파 단계에 있으므로, 아직 코드 품질 보장에 의존하지 않는 것이 좋습니다. 만약 프로토타입으로 실험하고 싶다면, 아래의 서비스들은 실험할 준비가 되어있으며, 우리는 그것에 대해 당신의 피드백을 받고 싶습니다.

- -

웹 호환성 서비스 ("Discord")

- -

Discord는 당신의 코드에서 호환성 문제를 포착하기 위한 GitHub webhook 입니다. 현재 CSS 코드를 doiuse로 스캔하고 GitHub의 코드 커밋에 주석을 추가합니다.

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

MDN의 역사

+ +

2005년, 이상주의자들로 이루어진 작은 팀은 웹 개발자들을 위한 새롭고 무료이며 협력으로 만들어진 온라인 리소스를 만들었습니다. 그들의 뛰어난, 그러나 색다른 아이디어는 오늘날의 오픈 웹 기술자들을 위한 최고의 리소스인 Mozilla 개발자 네트워크로 성장되었습니다. 10년뒤, 우리의 세계적 커뮤니티는 역대 최고이며, 우리는 여전히 함께 문서를 만들고 코드를 작성하며 오픈 웹을 현재와 같이 강력하게 만들어주는 CSS, HTML, 자바스크립트 등과 같은 오픈 웹 기술자들을 위한 리소스들을 배웁니다.

+ +

더 알아보기about the history

+ + +

MDN에 공헌하기

+ +

10년동안 MDN 커뮤니티는 오픈 웹을 기록해왔습니다. 간단한 오탈자 수정에서부터 새로운 API의 전체를 작성하는 것까지, 모두가 무언가를 제공했고, 어떠한 기여도 적지 않았습니다. 우리는 Mozillians의 뛰어난 맴버들이 작성하거나 번역한 9만 페이지 이상의 자료들이 있습니다. 당신도 그중 하나가 될 수 있습니다.

+ +

더 알아보기about contributing

+ +

 

+ +

 

+
+ +
{{TenthCampaignQuote}}
+ +

추가정보

+ +
    +
  1. MDN 10주년
    2. +
  2. MDN의 역사
    3. +
  3. MDN에 기여하기
    4. +
+
diff --git a/files/ko/mdn/community/conversations/index.html b/files/ko/mdn/community/conversations/index.html deleted file mode 100644 index 9d41e6c30c..0000000000 --- a/files/ko/mdn/community/conversations/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: MDN community conversations -slug: MDN/Community/Conversations -tags: - - Community - - Guide - - MDN Meta -translation_of: MDN/Community/Conversations ---- -
{{MDNSidebar}}
- -

MDN "활동"은 MDN 웹사이트에서 발생하지만, "커뮤니티"는 별도의 온라인 토론과 채팅으로 발생합니다.

- -

비동기적 토론

- -

정보를 공유하고 토론을 계속하기 위해, MDN은 Mozilla Discourse 포럼에 자체 카테고리("MDN")를 가지고 있습니다. 문서 생성-번역-유지관리, MDN 플랫폼 개발, 미래계획, 목표설정, 진행상황 추적 등 MDN과 관련된 모든 글을 MDN 카테고리로 작성할 수 있습니다.

- - - -

보존용 기록

- -

2017년 6월 이전에는 MDN 관련 토론이 Google 그룹과 함께 게이트웨이되고 보관 된 메일 링리스트에서 진행되었습니다. 이전 토론을 검색하려면 이전 메일 링리스트에 해당하는 Google 그룹을 살펴보십시오. (예, 우리는이 이름들이 겹쳐지고 혼동을 일으킨다는 것을 알고 있습니다. 역사적인 사고입니다. 죄송합니다.)

- -
-
mozilla.dev.mdc a.k.a dev-mdc
-
이 목록은 MDN의 문서 내용에 대한 토론 용이었습니다.
-
mozilla.dev.mdn a.k.a dev-mdn
-
이 목록은 MDN의 기본 Kuma 플랫폼 개발 작업에 관한 것입니다.
-
mozilla.mdn a.k.a mdn@
-
이 포럼은 MDN 웹 사이트 및 기타 관련 이니셔티브를위한 높은 수준의 계획 및 우선 순위 토론을위한 것입니다.
-
- -

IRC 채팅하기

- -

IRC(Internet Relay Chat)는 커뮤니티 멤버들끼리 매일 채팅하고 실시간으로 토론하기 위한 방법으로 선호됩니다. 저희는 MDN에 관련된 토론을 위해 irc.mozilla.org 서버에 있는 몇 가지 채널을 사용합니다.

- -
-
#mdn
-
이 채널은 MDN 콘텐츠에 대해 토론하기 위한 기본적인 채널입니다. 저희는 작성, 콘텐츠 구성 등등에 대해 얘기합니다. 또한 저희는 여기서 "water cooler" 대화를 가집니다. 이는 저희의 커뮤니티가 연락을 유지하고 어울리기 위한 방법입니다. 또한 이는 데모 스튜디오, 프로필 등과 같이 MDN의 다른 측면(플래폼 개발이 아닌 부분)에 대해 토론하는 곳입니다.
-
 
-
#mdndev
-
이 채널은 우리의 개발 팀 - MDN이 작동하도록 코드를 작성하는 사람들 - 이 어울리고 그들의 일과를 토론하기 위한 곳입니다. 당신이 이 채널에 합류하고 개발에 참여하거나 혹은 단순히 당신이 소프트웨어에 대한 이슈에 관해 질문을 하는 것을 환영합니다.
-
- -

이 채널들은 대부분 북미 지역에서 주중에 활발합니다.

- -

당신은 IRC에 대해서 좀 더 알고 싶어하고, ChatZilla와 같은 설치형 IRC 클라이언트를 사용하고 싶어 할 것입니다. 이는 쉽고 빠르게 설치하고 사용할 수 있는 Firefox add-on에서 실행될 수 있습니다. 만약 IRC에 익숙하지 않다면, 참여하기 쉬운 방법에는 미리 mdn과 mdndev 채널들에 맞추어 설계된 mibit과 같은 웹기반 IRC 클라이언트를 사용하는 것이 있습니다. 

- -

회의 (및 기타 행사)에 참가

- -

MDN 팀은 MDN 커뮤니티에 열려있는 여러 정기 모임을 개최합니다. 일정, 의제 및 메모, 참여 방법에 대한 자세한 내용은 Mozilla wiki의 MDN Meetings 페이지를 참조하십시오.

- -

이 회의 및 기타 회의, 지역 회의 및 기타 행사에 대한 MDN 이벤트 달력을보십시오. 되풀이 모임은 MDN Meetings wiki 페이지에 요약되어 있습니다.

- -

 

- -

If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can join the conversation on the web.

- -

 

diff --git a/files/ko/mdn/community/index.html b/files/ko/mdn/community/index.html deleted file mode 100644 index faff8c5f2e..0000000000 --- a/files/ko/mdn/community/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: MDN 커뮤니티 참여하기 -slug: MDN/Community -tags: - - Community - - Guide - - Landing - - MDN Meta -translation_of: MDN/Community ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ko/docs/MDN")}}
- -
-

MDN 웹 문서는 위키 그 이상입니다. MDN은 공개 웹 기술을 사용하는 개발자들을 위해 뛰어난 자료를 만드는 사람들이 함께 작업하는 커뮤니티입니다.

-
- -

당신이 MDN에 기여하시는 것도 물론 좋지만, 더 나아가 공식 커뮤니티에 참여하시면 정말 기쁘겠습니다. 참여하시는 방법은 다음 세 단계면 됩니다. 

- -
    -
  1. 먼저 MDN 계정 생성을 만들고
    2. -
  2. 토론에 참여하고
    3. -
  3. 어떤 일이 일어나는지 지켜보세요.
    4. -
- -

커뮤니티가 돌아가는 방법

- -

MDN 커뮤니티를 더 자세히 설명하는 글입니다.

- -
-
-
커뮤니티의 역할
-
MDN 커뮤니티에는 특정 책임이 주어진 몇가지 역할들이 있습니다. 
-
문서화 스프린트
-
문서화 스프린트 운영 가이드입니다. 스프린트를 운영해온 사람들의 유익한 조언과 팁이 포함되어있습니다. 
-
어떤일이 일어나는지 지켜보기 
-
MDN은 Mozilla Developer Network community가 제공합니다. 하고있는 일에 대한 정보를 공유하는 몇가지 방법을 소개합니다. 
-
MDN 커뮤니티의 토론
-
MDN의 "작업"은 MDN 사이트에서 하지만, "소통"은 (비동기)  토론과 (실시간) 온라인 채팅을 통해 일어납니다.
-
커뮤니티에서 작업하기
-
규모와 관계 없이 MDN 문서 기여시 반드시 알아야 할 것은  MDN 커뮤니티의 일원으로 어떻게 일할는지를 아는 것입니다. 이 글은 다른 글쓴이, 기술팀과 상호작용을 어떻게 잘 할 수 있는지를 알려줍니다. 
-
-
-
-
diff --git a/files/ko/mdn/community/working_in_community/index.html b/files/ko/mdn/community/working_in_community/index.html deleted file mode 100644 index 0398e29823..0000000000 --- a/files/ko/mdn/community/working_in_community/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 커뮤니티에서의 활동 -slug: MDN/Community/Working_in_community -translation_of: MDN/Community/Working_in_community ---- -
{{MDNSidebar}}
- -

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.

- -

에티켓 가이드라인

- -

Mozilla 커뮤니티와 함께 일하면서 지켜주셨으면 하는 사항들입니다.

- - - -

Be tactful

- -

Always be tactful and respectful when communicating with others.

- -

Politely pointing out mistakes

- -

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.

- -

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

- -
-

안녕하세요 홍길동씨, 웜홀 API 문서 에 대한 홍길동씨의 기여에 대해 감사드립니다. 저는 특히 홍길동씨께서 가독성과 세부정보를 균형있게 서술한 점을 인상깊게 보았습니다. 아마도 작업하시면서 correct tag를 페이지마다 추가해주신다면 이 문서를 더 유익하고 잘 만들어 나갈 수 있을 것 같습니다.

- -

자세한 사항은 MDN 태그가이드를 이용해 주세요(https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag)

- -

다시 한번 감사를 드리며 앞으로의 기여활동도 기대하겠습니다!

-
- -

지식 공유

- -

MDN 프로젝트에 참여하면서 무슨 일들이 일어나는지 파악하고 다른 멤버들과 소통하는 것이 본인에게 도움이 됩니다. 커뮤니티 내의 다른 분들과 소통하므로 아이디어를 얻거나 공유할 수 있습니다. 우리는 누가 주체가 되어 무슨 일을 진행하는지 알 수 있는 도구들과 리소스들을 제공하고 있습니다.

- -

Communication channels

- -

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.

- -

Discourse

- -

The MDN Discourse forum is a good place to ask general questions about MDN contribution and start discussions.

- -

Chat

- -

Use the Matrix chat system to reach people in real time. MDN staff members are available in the MDN Web Docs room, 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.

- -

GitHub

- -

If you find a problem on MDN, or want to ask a question, you can file an issue over on our GitHub sprints repo issues! They will then be triaged and actioned at some point in the future.

- -

Email

- -

Sometimes, a private email exchange between you and one or more other people is the way to go, if you have their email address.

- -
-

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

-
- -

Content status tools

- -

We have several useful tools that provide information about the status of documentation content.

- -
-
Revision dashboard
-
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).
-
Documentation status overview
-
Our documentation status overview 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.
-
Documentation project plans
-
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.
-
MDN Taiga
-
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 Process page on the Mozilla wiki.
-
- -

The development community

- -

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!

- -

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.

- -

On a related note, a great way to find the right person to talk to is to look at the module owners lists.

- -

The writing community

- -

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.

- -

See the article Join the community for more information about the MDN community.

- -

The most frequent place you'll directly interact with other writers is in the Discourse forum.

- -

By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually, things go very smoothly.

- -

See also

- - diff --git a/files/ko/mdn/contribute/creating_and_editing_pages/index.html b/files/ko/mdn/contribute/creating_and_editing_pages/index.html deleted file mode 100644 index 6993674a4f..0000000000 --- a/files/ko/mdn/contribute/creating_and_editing_pages/index.html +++ /dev/null @@ -1,166 +0,0 @@ ---- -title: 페이지 생성 및 수정 -slug: MDN/Contribute/Creating_and_editing_pages -tags: - - 초보자 - - 페이지생성 - - 페이지수정 - - 페이지편집 -translation_of: MDN/Contribute/Howto/Create_and_edit_pages ---- -
{{MDNSidebar}}

신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다. 

- -

기존 페이지 수정하기

- -

페이지를 수정하기 위해서:

- - - -

MDN에 탑재된 편집기 사용에 대한 좀 더 세부적인 내용은 MDN 편집기 가이드에 있는 편집기 UI 요소를 참고하세요.

- -

변경 내용 미리보기

- -

수정한 내용이 어떤 모습일지 보기 위해서는...

- - - -

하지만!! 미리보기는 저장된 페이지가 아닙니다. 저장 전 편집 페이지를 닫지 않도록 주의하세요!!

- -

리비전 답글

- -

 미리보기로 확인했다면, 변경사항(리비전)를 저장하고 싶을 겁니다. 저장 전, 편집영역 아래 있는 리비전 답글 영역에 변경 사유를 남겨주세요. 다른 공헌자들이 참고할 수 있도록요. 예를 들면, 새로운 섹션을 추가했거나, 좀 더 정확한 용어를 쓰기 위해 단어를 수정했거나, 언어를 구분하기 위해 문장을 다시 썼거나, 중복되는 내용이기 때문에 정보를 제거했다 등을 적으면 됩니다. 

- -

목차

- -

페이지 상단에 "이동"이라는 목차 영역은 페이지에 있는 소제목 이동 링크를 자동으로 만들어준 것입니다.  소제목을 바꾸면 목차명도 바뀝니다. 편집화면 '설명 번역'의 "TOC" 드롭다운 메뉴를 통해서 목차를 제거하거나 목차 깊이를 조절할 수 있습니다. 

- -

태그

- -

페이지 내용과 기능을 설명하는 태그를 페이지의 편집 섹션 아래에서 추가하거나 제거할 수 있습니다. 어떤 태그를 적용할 것인지에 대해 자세히 알고 싶으면 페이지에 알맞은 태그를 붙이는 방법을 보세요.

- -

검토가 필요한가요?

- -

전문가 또는 숙련된 공헌자의 검토가 필요하다고 생각되면, 저장하기 전에, 검토 요청 체크박스를 이용하여, (코드 샘플, API 혹은 테크놀로지에 대한) 기술상의 검토, (산문, 문법 및 내용에 대한) 편집상의 검토, (KumaScript 코드에 대한) 템플릿 검토를 요청할 수 있습니다.

- -

자료 첨부

- -

자세한 설명을 추가하기 위해 자료를 첨부하고 싶다면, 페이지 하단에서 첨부할 수 있습니다. 

- -

개시, 버리기 또는 개시하고 계속 편집

- -

편집을 완료하고, 미리보기 한 결과에도 만족했다면, 페이지 제목의 오른쪽이나 페이지 하단에 있는 녹색의 "변경 사항 저장"을 클릭하여 작업한 결과와 답글을 저장할 수 있습니다. 마음이 바뀌었다면, 페이지 제목의 오른쪽에 있는 붉은색의 "변경 파기"를 클릭하여 그 동안 작업한 것을 버릴 수 있습니다.

- -

리비전 답글에서 답글을 달고 엔터키를 누르는 것은 "저장하고 계속 수정"하는 것을 클릭하는 것과 같습니다.

- -
-

변경내용을 저장하려 할 때, 밴경내용이 실제 MDN에는 적절한 내용인데 유효하지 않다는 이유로 거절된다면, 작성팀에 콘텐츠가 게시되게 도와 달라는메일을 보내야만 합니다. 

-
- -

새로운 페이지 생성하기

- -

만약 당신이 어디에 새로운 글을 써야할지 모른다고해도 , 걱정하지마세요! 어디든 적으세요 그러면 우리가 그 문서를 찾고 있어야 할 장소로 옴기고 새로 쓴 글이 해당 문서에 적합하다면 , 존재하는 문서에 합칠 거에요. 당신은 또한 완벽하게 해야한다는 것에 대한 걱정을 할 필요가 없어요. 우리는 도움을 주는 행복한 요정들을 가지고 있고  요정들은 당신의 글을 깔끔하고 아주 부드럽게 만드는 것을 도와 줄 것 입니다.

- -

새로운 페이지를 만드는 몇 가지 방법이 있습니다:

- - - -

페이지 생성 권한  얻기

- -

보안의 이유로, 새롭게 생성된 계정은 새로운 페이지를 생성할 수 있는 능력이 없습니다. 페이지 생성을 하고 싶다면, 페이지 생성 방법을 안내하는 페이지를 보게 될 것입니다. 두가지 선택이 있습니다.

- - - -
-
- -

"누락된 페이지" 링크

- -

대부분의 위키가 그러하듯,  MDN에서도 아직 존재하지 않는 페이지로 링크를 연결하는 것이 가능합니다.  예를 들어, 작성자가 어떤 API의  개별 항목에 대한 페이지를 생성하기 전에, 항목의 모든 리스트를 생성할 수 있습니다. MDN에서 존재하지 않는 페이지로 링크를 연결하면 통상 빨간색으로 표시됩니다.

- -

"누락된 페이지" 링크로 페이지를 생성하기 위해서는:

- -
    -
  1. MDN에 로그인 합니다. (로그인 하지 않고, "누락된 페이지" 링크를 클릭하면 404(페이지 없음) 에러가 발생합니다.)
    2. -
  2. "누락된 페이지" 링크를 클릭합니다. MDN 편집기 UI가 열리고,  누락된 페이지를 생성할 수 있는 준비가 됩니다.
    3. -
  3. 페이지의 내용을 작성하고, 저장합니다.
    4. -
- -

링크가 없는 새로운 페이지

- -

다른 페이지의 링크를 걸지 않은  새로운 페이지를 만들기 위해서는,  브라우저의 URL  항목에 고유한 페이지 이름을 입력합니다.  예를 들면,  아래와 같이 입력한다면..

- -
https://developer.mozilla.org/en-US/docs/FooBar
- -

MDN은 제목이 "FooBar"로 된 새로운 페이지가 생성하고,  편집기가 실행되어 새로운 페이지에 내용을 추가할 수 있게 해줍니다.  편집기 모드를 이용하는 방법에 대한 내용은  이 글의 이미 존재하는 페이지 편집하기 섹션을 참고하세요.

- -

이미 존재하는 페이지의 하위 페이지

- -

페이지의 계층 구조에서 이미 존재하는 페이지 하위로 페이지를 생성하고 싶다면:

- -
    -
  1. "부모" 페이지에서, Advanced 메뉴(툴바의 기어 아이콘)를 클릭하고, New sub-page를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다.
    2. -
  2. Title 항목에 문서의 제목을 입력합니다.
    3. -
  3. 필요하다면 Slug 항목을 수정합니다.  예를 들어,  제목이 너무 길어서 단축 URL을  입력할 수 있습니다. 이 항목은 에디터에서 제목의 공백을 언더스코어로 연결하여 자동적으로 채워줍니다.  이 경우,  문서의 URL  중 가장 마지막 부분만 수정할 수 있습니다.
    4. -
  4. TOC 항목에서,  페이지의 목차에 자동적으로 노출되기 원하는 헤드라인을 선택하거나, 페이지에서 필요가 없다면 "목차 없음(No table of contents)"을 선택합니다.
    5. -
  5. 편집 패널에서 페이지의  내용을 작성하고 변경사항을 저장합니다.  편집 모드 사용에 대한 방법은  이 글의 이미 존재하는 페이지 편집하기  섹션을 참고하세요.
    6. -
- -

이미 존재하는 페이지 복제

- -

새로운 페이지를 위해 사용하고자 하는 페이지의 포멧이 이미 존재한다면,  페이지를 '복제'하여 내용을 수정할 수 있습니다.

- -
    -
  1. 복제하려는 원래 페이지에서,  Advanced  메뉴(툴바의 기어 아이콘)을 클릭하고,  이 페이지 복제하기(Clone this page)를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다.
    2. -
  2. 페이지의 타이틀(Title)을 새로운 내용에 맞게 적절하게 바꿉니다. Slug 항목은  타이틀(Title) 항목을 바꾸면 자동적으로 반영됩니다.
    3. -
  3. 필요하다면, 문서의 계층구조의 다른 부분에 새로운 문서를 넣기 위해 Slug 항목의 경로 부분도 변경합니다. (대부분의 경우, 복제된 페이지가 원래 페이지와 유사한 내용을  가지고 있고, 따라서 위치도 비슷하기 때문에  이 과정은 필요하지 않습니다.)
    4. -
  4. TOC 항목에서,  페이지의 목자에 자동적으로 노출되기 원하는 헤드라인을 선택하거나,  목차를 가지고 있지 않다면 "목차 없음(No table of contenst)"을 선택합니다.
    5. -
  5. 편집 패널에서 페이지의  내용을 작성하고,  변경사항을 저장합니다. 편집 모드 사용에 대한 방법은  이 글의 이미 존재하는 페이지 편집하기  섹션을 참고하세요.
    6. -
- -

이미 존재하는 페이지의 링크

- -

이 방법은 다소 복합적입니다.  다른 페이지에 링크를 만들고,  새로운 페이지를 만들기 위해  삽입한 링크를 클릭합니다.

- -
    -
  1. 이미 존재하는 페이지의 텍스트 안에  넣고자 하는 새로운 페이지의 이름을 입력합니다.
    2. -
  2. 이름을 선택하고,  편집기의 툴바에서 링크 아이콘 클릭(click the Link icon ())을 클릭합니다. "Update Link" 다이얼로그가 열리고,  "Link To" 항목에 선택된 텍스트로 채워집니다.
    3. -
  3. 기본적으로, URL 항목의 시작  부분은  "/en-US/docs/"가 삽입됩니다.  "/en-US/docs/"  다음에 페이지의 이름을 입력하세요. (페이지 이름은 링크 텍스트와 동일하지 않아도 됩니다.)
    4. -
  4. 링크를 생성하고 삽입하기 위해 OK를 클릭합니다.
    5. -
- -

페이지가 존재하지 않는다면,  링크는 붉은색으로 보여집니다. 페이지가 존재한다면 링크는 파란색으로 보여집니다. 새로운 페이지를 만들고 싶은데 원하는 페이지 제목이 이미 존재한다면, 먼저 해당 페이지에 있는 내용을  추가 편집하거나 좀 더 개선할 부분은 없는지 확인하십시오. 아니면,  생성하고자 하는 페이지에 대한 다른 제목을 고민해보고 링크를 만들어 보세요. 페이지 이름에 대한 안내는 페이지 네이밍 가이드를 참고하세요.

- -

새로운 페이지에 내용을 추가하기 위해, 저장하고 편집기를 닫은 후에 이제 막 추가된 붉은색 링크를 클릭합니다. 편집 모드에 새로운 페이지가 열리고,  작성을 할 수 있습니다.  편집 모드 사용에 대한 방법은  이 글의 이미 존재하는 페이지 편집하기 섹션을 참고하세요.

- -

페이지 콘텐츠 새로고침하기

- -

MDN의 KumaScript 매크로와 페이지의 콘텐츠를 다른 페이지로 넣을 수 있는 트랜스클루젼(transclusion)의 지원은 성능 향상을 위해  생성된 페이지의 캐시의 필요에 의해 종종 방해될 수 있다. 페이지는 그 소스로부터 만들어지고, 이후에 있을 요청을 위해 산출물을 캐시로 저장해둔다. 그  때부터  어떤 매크로(템플릿),  페이지의 Page 매트로를 이용하는 트랜스클루젼도 매크로나 매크로의 산출물,  혹은 삽입되어 추가된 원래 자료의 변경에도 영향이 없을 것이다.

- - - -

함께 보기

- - diff --git a/files/ko/mdn/contribute/does_this_belong/index.html b/files/ko/mdn/contribute/does_this_belong/index.html deleted file mode 100644 index 46f6395a52..0000000000 --- a/files/ko/mdn/contribute/does_this_belong/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: 이건 MDN에 있나요? -slug: MDN/Contribute/Does_this_belong -translation_of: MDN/Guidelines/Does_this_belong_on_MDN ---- -
{{MDNSidebar}}
{{IncludeSubnav("/ko/docs/MDN")}}
- -

무엇인가를 문서로 남겨두겠다는 생각을 하기 시작했다면,  그 문서를 어디에 둘지도 고민해보았을 겁니다. 문서가 위치할 수 있는 몇 가지 장소가 있고, MDN이 웹에서 가장 큰 문서 저장소 중 하나이지만 유일한 옵션은 아닙니다. 또한 소스 코드에 문서를 보관해둘 수도 있고, Mozilla 위키나 git 저장소의 README 파일에 저장해 두어도 좋습니다. 이 글에서는 어느 방법이 여러분들의 문서와 어울릴지를 판단하는데 도움이 되기 위해서 쓰였습니다.

- -

MDN에는 뭐가 있죠?

- -

우리는 MDN에 정말 다양한 주제를 다룹니다. 하지만 완전히 MDN에 있어서는 안될 몇 가지도 있습니다. 이 섹션은 여러분의 문서가 MDN에 있어도 괜찮은지 판단할 수 있도록 도와주겠습니다.

- -

MDN에서 다루는 것

- -

우리는 MDN에서 정말 많은 내용을 다루고 있습니다. 일반적으로 완전히 제작되었거나 배포 중인 Mozilla 제품이나, 웹에 공개된 열린 기술이라면, MDN에 문서로 남겨둡니다.

- -

우리들이 다루고 있는 내용 몇가지를 맛보기로 보여드리겠습니다. 전체 리스트는 아니지만 몇가지 아이디어는 줄 수 있을 겁니다.

- - - -
-

참고하세요: 우리는 Mozilla 기술이 아니더라도 Web에 공개되어 있는 한 다룰 수 있다는 점이 중요합니다. 가령, 우리는 Webkit 전용 CSS 프로퍼티를 설명해놓은 문서도 있습니다.

-
- -

우리가 다루지 않는 것

- -

MDN에 문서로 남겨져서는 안되는 명백한 것인지 아닌지에 대해 스스로 질문해볼 수 있습니다.

- - - -

저 질문 중 하나라도 "예"라고 답변할 수 있다면, MDN에 있어서는 안될 문서입니다. 저 질문 모두에 "아니요"라고 대답할 수 있다면, MDN에 문서로 보관할지 진지하게 고민할 때가 되었다는 겁니다!

- -

MDN에 문서로 남겨두면 좋은 점

- -

MDN에 문서로 남겨두면 좋은 점이 굉장히 많답니다.

- -

글을 쓰는 사람들이 굉장히 많습니다

- -

MDN 공동체는 굉장히 큽니다. 정말 큽니다. 큰 것들을 작게 보이게 만들 정도로 큽니다. 농담이 아니라, 우리는 굉장히 많은 사람들과 MDN에 있는 자료를 만들어내며 관리하고 있습니다. 전세계 모든 땅(인정할게요. 남극까지는 잘 모르겠어요.)의 작가, 편집자들과 함께하고 있기 때문에, 글을 쓰려는 사람들은 무조건 득 보는 거에요.

- - - -

Do you want your development team to be entirely responsible for the production of documentation? That's likely if your documentation is maintained elsewhere.

- -

유지보수

- -

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:

- -
-
스팸 제거
-
스팸이 발생하면 우리들이 처리합니다.
-
편집
-
여러분 생각보다 필력이 달려도 걱정하실 것 없습니다. 여러분이 쓴 글을 다른 사람들이 읽을 수 있도록 해주겠습니다.
-
스타일의 일관성
-
여러분이 작성한 문서 하나에서만 지켜지는 일관성이 아니라, 다른 문서와 함께 있을 때에도 일관적인 스타일을 가지고 있을지 봐주겠습니다.
-
컨텐츠 관리
-
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.
-
- -

다른 곳에 문서로 남겨두는 경우

- -

MDN 말고 다른 곳에다가 여러분이 만든 작업물을 문서로 남겨둘 이유도 없는 건 아닙니다. 그런 이유에 대해서 몇가지 살펴보도록 하고, 각각 장단점을 찾아보도록 할게요.

- -

계획이나 진행 상황

- -

간단합니다. 계획, 진행 상황, 요청에 대한 문서는 MDN에 남기면 안됩니다.

- -

Github에 올라온 프로젝트

- -

Mozilla의 몇몇 프로젝트는 Github에 올라와 있습니다. 또, Github에는 문서를 보관하기 위해 자기네들만의 위키 비스무리한 시스템을 가지고 있어요. 몇몇 팀은 거기에다가 문서를 남겨두기를 더 좋아합니다. 여러분만의 문서를 만들어갈 생각이라면 아무래도 그쪽이 더 편하고 좋겠죠. 하지만 몇가지 사실을 기억하세요.

- - - -

물론 이런 점들이 여러분들에게 별로 문제가 되지 않거나 문제가 되더라도 딱히 불편한 점이 없을 수도 있습니다. 몇몇 팀은 문서로 남기겠다는 필요성이 별로 없어서 코드 안에서만 작업하고 문서를 남겨두기도 합니다.

- -

소스 안에 문서를 남겨두고 싶은 경우

- -

몇몇 팀은 소스 저장소에다가 자신들의 문서를 저장하는 걸 더 선호하기도 합니다. 내부 프로젝트나 라이브러리 프로젝트에서는 꽤나 흔한 일이긴 한데요. 코드를 쓰듯이 자신들의 기술을 문서로 남길 수 있다는 점에서 이점이 있기는 합니다. 하지만 그만큼 단점도 있지요.

- - - -

여전히 몇몇 프로젝트에서 이런 방법을 사용할 수 없는 건 아닙니다. (오히려 좋은 방법일 수도 있습니다.) 작은 프로젝트나 별로 관심을 얻을 생각을 하지 않는 프로젝트에는 특히 그렇죠.

- -

나중에는

- -

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.

diff --git a/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html b/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..27ac6774f1 --- /dev/null +++ b/files/ko/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,39 @@ +--- +title: '"살아있는" 코드 샘플로 변환하기' +slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 +tags: + - 라이브샘플 + - 살아있는 코드 + - 샘플코드 +translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live +--- +
{{MDNSidebar}}

MDN의 라이브 샘플 시스템이란, 페이지에서 보여주는 샘플 코드를 수정하면 이 샘플 코드의 실행 결과도 달라지는 기능을 말합니다. 많은 문서에 샘플 코드들이 있지만 모든 샘플이 이 시스템을 사용하고 있지는 않으며, 생명력을 불어 넣어줘야 합니다.

+ + + + + + + + + + + + + + + +
어디서부터 시작해야 하나요?라이브 샘플이 필요한 글 목록을 참고하세요.
작업을 위해 알아 두어야 할 사항은 무엇인가요? +
    +
  • HTML, CSS에 대한 이해가 필요합니다. 샘플에 따라 JavaScript에 대한 지식을 요구할 수도 있습니다.
    • +
  • MDN 문서 내에서 쿠마 스크립트(en) 매크로를 사용할 수 있어야 합니다.
    • +
+
작업 진행 절차는 어떻게 되나요? +

라이브 샘플을 삽입하는 방법을 포함하여, 올바른 라이브 샘플을 작성하려면 라이브 샘플 시스템 사용하기(en) 문서를 참고하세요.

+
    +
  1. 라이브 샘플이 필요한 글 목록에서 마음에 드는 글을 고르세요.
    2. +
  2. 샘플에 "생명력을 불어 넣으세요".
    3. +
  3. 과거의 것들은 지워버리세요.
    4. +
+
+

 

diff --git a/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html b/files/ko/mdn/contribute/howto/create_and_edit_pages/index.html new file mode 100644 index 0000000000..6993674a4f --- /dev/null +++ b/files/ko/mdn/contribute/howto/create_and_edit_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 +--- +
{{MDNSidebar}}

신규 공헌자가 이미 있는 문서를 수정하거나 신규 문서를 생성하는 법에 대해 설명합니다. 

+ +

기존 페이지 수정하기

+ +

페이지를 수정하기 위해서:

+ + + +

MDN에 탑재된 편집기 사용에 대한 좀 더 세부적인 내용은 MDN 편집기 가이드에 있는 편집기 UI 요소를 참고하세요.

+ +

변경 내용 미리보기

+ +

수정한 내용이 어떤 모습일지 보기 위해서는...

+ + + +

하지만!! 미리보기는 저장된 페이지가 아닙니다. 저장 전 편집 페이지를 닫지 않도록 주의하세요!!

+ +

리비전 답글

+ +

 미리보기로 확인했다면, 변경사항(리비전)를 저장하고 싶을 겁니다. 저장 전, 편집영역 아래 있는 리비전 답글 영역에 변경 사유를 남겨주세요. 다른 공헌자들이 참고할 수 있도록요. 예를 들면, 새로운 섹션을 추가했거나, 좀 더 정확한 용어를 쓰기 위해 단어를 수정했거나, 언어를 구분하기 위해 문장을 다시 썼거나, 중복되는 내용이기 때문에 정보를 제거했다 등을 적으면 됩니다. 

+ +

목차

+ +

페이지 상단에 "이동"이라는 목차 영역은 페이지에 있는 소제목 이동 링크를 자동으로 만들어준 것입니다.  소제목을 바꾸면 목차명도 바뀝니다. 편집화면 '설명 번역'의 "TOC" 드롭다운 메뉴를 통해서 목차를 제거하거나 목차 깊이를 조절할 수 있습니다. 

+ +

태그

+ +

페이지 내용과 기능을 설명하는 태그를 페이지의 편집 섹션 아래에서 추가하거나 제거할 수 있습니다. 어떤 태그를 적용할 것인지에 대해 자세히 알고 싶으면 페이지에 알맞은 태그를 붙이는 방법을 보세요.

+ +

검토가 필요한가요?

+ +

전문가 또는 숙련된 공헌자의 검토가 필요하다고 생각되면, 저장하기 전에, 검토 요청 체크박스를 이용하여, (코드 샘플, API 혹은 테크놀로지에 대한) 기술상의 검토, (산문, 문법 및 내용에 대한) 편집상의 검토, (KumaScript 코드에 대한) 템플릿 검토를 요청할 수 있습니다.

+ +

자료 첨부

+ +

자세한 설명을 추가하기 위해 자료를 첨부하고 싶다면, 페이지 하단에서 첨부할 수 있습니다. 

+ +

개시, 버리기 또는 개시하고 계속 편집

+ +

편집을 완료하고, 미리보기 한 결과에도 만족했다면, 페이지 제목의 오른쪽이나 페이지 하단에 있는 녹색의 "변경 사항 저장"을 클릭하여 작업한 결과와 답글을 저장할 수 있습니다. 마음이 바뀌었다면, 페이지 제목의 오른쪽에 있는 붉은색의 "변경 파기"를 클릭하여 그 동안 작업한 것을 버릴 수 있습니다.

+ +

리비전 답글에서 답글을 달고 엔터키를 누르는 것은 "저장하고 계속 수정"하는 것을 클릭하는 것과 같습니다.

+ +
+

변경내용을 저장하려 할 때, 밴경내용이 실제 MDN에는 적절한 내용인데 유효하지 않다는 이유로 거절된다면, 작성팀에 콘텐츠가 게시되게 도와 달라는메일을 보내야만 합니다. 

+
+ +

새로운 페이지 생성하기

+ +

만약 당신이 어디에 새로운 글을 써야할지 모른다고해도 , 걱정하지마세요! 어디든 적으세요 그러면 우리가 그 문서를 찾고 있어야 할 장소로 옴기고 새로 쓴 글이 해당 문서에 적합하다면 , 존재하는 문서에 합칠 거에요. 당신은 또한 완벽하게 해야한다는 것에 대한 걱정을 할 필요가 없어요. 우리는 도움을 주는 행복한 요정들을 가지고 있고  요정들은 당신의 글을 깔끔하고 아주 부드럽게 만드는 것을 도와 줄 것 입니다.

+ +

새로운 페이지를 만드는 몇 가지 방법이 있습니다:

+ + + +

페이지 생성 권한  얻기

+ +

보안의 이유로, 새롭게 생성된 계정은 새로운 페이지를 생성할 수 있는 능력이 없습니다. 페이지 생성을 하고 싶다면, 페이지 생성 방법을 안내하는 페이지를 보게 될 것입니다. 두가지 선택이 있습니다.

+ + + +
+
+ +

"누락된 페이지" 링크

+ +

대부분의 위키가 그러하듯,  MDN에서도 아직 존재하지 않는 페이지로 링크를 연결하는 것이 가능합니다.  예를 들어, 작성자가 어떤 API의  개별 항목에 대한 페이지를 생성하기 전에, 항목의 모든 리스트를 생성할 수 있습니다. MDN에서 존재하지 않는 페이지로 링크를 연결하면 통상 빨간색으로 표시됩니다.

+ +

"누락된 페이지" 링크로 페이지를 생성하기 위해서는:

+ +
    +
  1. MDN에 로그인 합니다. (로그인 하지 않고, "누락된 페이지" 링크를 클릭하면 404(페이지 없음) 에러가 발생합니다.)
    2. +
  2. "누락된 페이지" 링크를 클릭합니다. MDN 편집기 UI가 열리고,  누락된 페이지를 생성할 수 있는 준비가 됩니다.
    3. +
  3. 페이지의 내용을 작성하고, 저장합니다.
    4. +
+ +

링크가 없는 새로운 페이지

+ +

다른 페이지의 링크를 걸지 않은  새로운 페이지를 만들기 위해서는,  브라우저의 URL  항목에 고유한 페이지 이름을 입력합니다.  예를 들면,  아래와 같이 입력한다면..

+ +
https://developer.mozilla.org/en-US/docs/FooBar
+ +

MDN은 제목이 "FooBar"로 된 새로운 페이지가 생성하고,  편집기가 실행되어 새로운 페이지에 내용을 추가할 수 있게 해줍니다.  편집기 모드를 이용하는 방법에 대한 내용은  이 글의 이미 존재하는 페이지 편집하기 섹션을 참고하세요.

+ +

이미 존재하는 페이지의 하위 페이지

+ +

페이지의 계층 구조에서 이미 존재하는 페이지 하위로 페이지를 생성하고 싶다면:

+ +
    +
  1. "부모" 페이지에서, Advanced 메뉴(툴바의 기어 아이콘)를 클릭하고, New sub-page를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다.
    2. +
  2. Title 항목에 문서의 제목을 입력합니다.
    3. +
  3. 필요하다면 Slug 항목을 수정합니다.  예를 들어,  제목이 너무 길어서 단축 URL을  입력할 수 있습니다. 이 항목은 에디터에서 제목의 공백을 언더스코어로 연결하여 자동적으로 채워줍니다.  이 경우,  문서의 URL  중 가장 마지막 부분만 수정할 수 있습니다.
    4. +
  4. TOC 항목에서,  페이지의 목차에 자동적으로 노출되기 원하는 헤드라인을 선택하거나, 페이지에서 필요가 없다면 "목차 없음(No table of contents)"을 선택합니다.
    5. +
  5. 편집 패널에서 페이지의  내용을 작성하고 변경사항을 저장합니다.  편집 모드 사용에 대한 방법은  이 글의 이미 존재하는 페이지 편집하기  섹션을 참고하세요.
    6. +
+ +

이미 존재하는 페이지 복제

+ +

새로운 페이지를 위해 사용하고자 하는 페이지의 포멧이 이미 존재한다면,  페이지를 '복제'하여 내용을 수정할 수 있습니다.

+ +
    +
  1. 복제하려는 원래 페이지에서,  Advanced  메뉴(툴바의 기어 아이콘)을 클릭하고,  이 페이지 복제하기(Clone this page)를 클릭합니다. 새로운 문서를 생성하기 위한 편집기 화면이 열립니다.
    2. +
  2. 페이지의 타이틀(Title)을 새로운 내용에 맞게 적절하게 바꿉니다. Slug 항목은  타이틀(Title) 항목을 바꾸면 자동적으로 반영됩니다.
    3. +
  3. 필요하다면, 문서의 계층구조의 다른 부분에 새로운 문서를 넣기 위해 Slug 항목의 경로 부분도 변경합니다. (대부분의 경우, 복제된 페이지가 원래 페이지와 유사한 내용을  가지고 있고, 따라서 위치도 비슷하기 때문에  이 과정은 필요하지 않습니다.)
    4. +
  4. TOC 항목에서,  페이지의 목자에 자동적으로 노출되기 원하는 헤드라인을 선택하거나,  목차를 가지고 있지 않다면 "목차 없음(No table of contenst)"을 선택합니다.
    5. +
  5. 편집 패널에서 페이지의  내용을 작성하고,  변경사항을 저장합니다. 편집 모드 사용에 대한 방법은  이 글의 이미 존재하는 페이지 편집하기  섹션을 참고하세요.
    6. +
+ +

이미 존재하는 페이지의 링크

+ +

이 방법은 다소 복합적입니다.  다른 페이지에 링크를 만들고,  새로운 페이지를 만들기 위해  삽입한 링크를 클릭합니다.

+ +
    +
  1. 이미 존재하는 페이지의 텍스트 안에  넣고자 하는 새로운 페이지의 이름을 입력합니다.
    2. +
  2. 이름을 선택하고,  편집기의 툴바에서 링크 아이콘 클릭(click the Link icon ())을 클릭합니다. "Update Link" 다이얼로그가 열리고,  "Link To" 항목에 선택된 텍스트로 채워집니다.
    3. +
  3. 기본적으로, URL 항목의 시작  부분은  "/en-US/docs/"가 삽입됩니다.  "/en-US/docs/"  다음에 페이지의 이름을 입력하세요. (페이지 이름은 링크 텍스트와 동일하지 않아도 됩니다.)
    4. +
  4. 링크를 생성하고 삽입하기 위해 OK를 클릭합니다.
    5. +
+ +

페이지가 존재하지 않는다면,  링크는 붉은색으로 보여집니다. 페이지가 존재한다면 링크는 파란색으로 보여집니다. 새로운 페이지를 만들고 싶은데 원하는 페이지 제목이 이미 존재한다면, 먼저 해당 페이지에 있는 내용을  추가 편집하거나 좀 더 개선할 부분은 없는지 확인하십시오. 아니면,  생성하고자 하는 페이지에 대한 다른 제목을 고민해보고 링크를 만들어 보세요. 페이지 이름에 대한 안내는 페이지 네이밍 가이드를 참고하세요.

+ +

새로운 페이지에 내용을 추가하기 위해, 저장하고 편집기를 닫은 후에 이제 막 추가된 붉은색 링크를 클릭합니다. 편집 모드에 새로운 페이지가 열리고,  작성을 할 수 있습니다.  편집 모드 사용에 대한 방법은  이 글의 이미 존재하는 페이지 편집하기 섹션을 참고하세요.

+ +

페이지 콘텐츠 새로고침하기

+ +

MDN의 KumaScript 매크로와 페이지의 콘텐츠를 다른 페이지로 넣을 수 있는 트랜스클루젼(transclusion)의 지원은 성능 향상을 위해  생성된 페이지의 캐시의 필요에 의해 종종 방해될 수 있다. 페이지는 그 소스로부터 만들어지고, 이후에 있을 요청을 위해 산출물을 캐시로 저장해둔다. 그  때부터  어떤 매크로(템플릿),  페이지의 Page 매트로를 이용하는 트랜스클루젼도 매크로나 매크로의 산출물,  혹은 삽입되어 추가된 원래 자료의 변경에도 영향이 없을 것이다.

+ + + +

함께 보기

+ + 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 deleted file mode 100644 index 9b648a8d0c..0000000000 --- a/files/ko/mdn/contribute/howto/do_a_technical_review/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: 기술 리뷰를 하는 방법 -slug: MDN/Contribute/Howto/Do_a_technical_review -translation_of: MDN/Contribute/Howto/Do_a_technical_review ---- -
{{MDNSidebar}}

기술 리뷰는 기술적 정확성과 글의 완결성을 검토하는 것, 필요하다면 수정하는 것으로 이루어집니다. 글의 작성자가 다른 사람이 글의 기술적 내용을 확인하는 것을 바란다면, 작성자는 편집을 하는동안 "Technical review" 체크박스에 체크합니다. 작성자는 대개 기술 리뷰를 위해 특정한 엔지니어와 접촉하지만, 해당 주제에 대한 전문가라면 누구라도 가능합니다.

-

이 글은 기술 리뷰를 어떻게 하는지에 대해 기술하고, 그에 따라서 MDN의 컨텐츠들이 정확하도록 도움을 줍니다.

- - - - - - - - - - - - - - - -
어떤 부분에 이 일이 필요하나요?technical review가 필요하다고 표시된 특정 글
이 일을 하기 위해 무엇을 알아야 하나요? -
    -
  • 리뷰를 하고 있는 글의 주제에 대한 전문 지식.
    • -
  • MDN의 위키 글을 편집할 수 있는 능력.
    • -
-
어떤 단계를 거쳐야 하나요? -
    -
  1. technical reviews가 필요한 페이지 목록으로 갑니다. 기술 리뷰가 요청된 모든 페이지들이 보여집니다.
    2. -
  2. 친숙한 주제를 가진 페이지를 고르세요.
    3. -
  3. 링크를 클릭하여서 페이지를 부르세요.
    4. -
  4. 페이지가 불려지면, 최상단 근처의 EDIT 버튼을 클릭하세요; MDN 에디터로 갑니다. 처음에 고른 페이지가 당신한테 맞지 않는다면 다른 페이지로 바꾸는 것을 주저하지 마세요.
    5. -
  5. 글을 읽으면서 틀린 기술 정보를 고치고 빠진 중요한 정보를 추가하세요.
    6. -
  6. 글 아래에 당신이 한 일에 대해서 기술하는 다음과 같은 코멘트를 입력하세요, '기술 리뷰 완료.' 정보를 수정한다면, 그것을 코멘트에 포함시키세요, 예를 들어 '기술 리뷰: fixed parameter descriptions.'
    7. -
  7. SAVE CHANGES 버튼을 클릭하세요 .
    8. -
  8. 에디터를 닫고 난 후 올바른 글이 화면에 뜨고 나면, 측면의 Technical 엔트리를 체크하여 (다음의 리뷰가 요청되었습니다 아래) SUBMIT REVIEW 버튼을 클릭하세요.
    9. -
  9. 끝났습니다!
    10. -
-
-

 

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 deleted file mode 100644 index 13b2f0d4a1..0000000000 --- a/files/ko/mdn/contribute/howto/do_an_editorial_review/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 편집 검토를 하는 방법 -slug: MDN/Contribute/Howto/Do_an_editorial_review -translation_of: MDN/Contribute/Howto/Do_an_editorial_review ---- -
{{MDNSidebar}}
{{IncludeSubnav("/ko-KR/docs/MDN")}}
- -

편집자 검토는 글의 오타와 맞춤법, 문법, 단어의 용법, 또는 원문의 오류를 고치는 일입니다. 모든 공헌자분들은 자신의 지식을 사용해 유용하고 가치있는 글을 만드는 데 기여하고 있습니다만, 이분들이 모두 어학전문가는 아닙니다. 따라서 언어적인 측면에서 교열과 교정이 종종 필요해집니다. 이 교열과 교정 작업이 바로 편집자 검토입니다.

- -

이 글은 어떻게 편집자 검토를 수행하는지, 그리하여 MDN 컨텐츠들의 정확도를 높일 수 있게 되는 지에 대해 설명합니다.

- -
-
편집자 검토는 어떤 일입니까?
-
편집자 검토가 필요하다고 표시된 글들을 교열하고 교정하는 것.
-
어떤 글에서 편집자 검토가 필요합니까?
-
편집자 검토가 필요하다고 표시된 특별한 글들.
-
편집자 검토를 하기 위해서 알아야 하는 것이 있습니까?
-
괜찮은 문법과 맞춤법 실력이 필요합니다. 예를 들어 편집 검토는 문법과 철자에 대한 확인을 해야합니다.
-
편집자 검토는 어떤 단계를 거칩니까?
-
-
    -
  1. 검토할 글을 선택합니다: -
      -
    1. 편집자 검토가 필요한 글 목록으로 이동합니다. 이곳에는 편집자 검토가 필요한 페이지들이 나열되어 있습니다.
      2. -
    2. 경로가 Template:으로 시작하지 않는 한국어 제목을 가진 페이지를 선택합니다.(Template:페이지는 MDN 매크로코드를 포함하고 있습니다)
      3. -
    3. 글 링크를 클릭해서 페이지를 불러옵니다.
      4. -
    -
    2. -
  2. 글의 오탈자, 철자, 문법 및 어법상의 오류에 주의를 기울이며 읽습니다. 만일 선택한 글이 능력에 부친다고 생각되면, 다른 글을 새로 선택하십시오.
    3. -
  3. 만일 살펴본 글에 오류가 없다면, 페이지 왼쪽 사이드바에서 "quick review" 상자를 찾아보십시오:
    - Screenshot of Korean version of the editorial review request sidebar box
    4. -
  4. 편집 상자의 선택을 해제하고, 저장 버튼을 클릭합니다.
    5. -
  5. 오류를 발견했다면, 수정을 해야합니다: -
      -
    1. 페이지 상단의 편집 버튼을 클릭합니다. MDN editor가 열립니다.
      2. -
    2. 발견한 오탈자, 문법, 어법상의 오류를 수정 합니다. 모든 오류를 한번에 다 고치지 않아도 괜찮습니다만, 남은 오류가 없다는 확신을 갖기 어렵다면 편집자 검토 요청 상태를 유지해주십시오.
      3. -
    3. 글 하단의 리비전 답글 항목을 입력합니다; '편집자 검토: 오타, 문법, 맞춤법 수정됨.'같은 식으로 적으시면 됩니다. 이 리비전 답글의 내용으로 다른 공헌자들이나 사이트 편집자들이 어떤 것이 수정되었는지, 왜 수정했는 지에 대해 알 수 있습니다.
      4. -
    4. 검토가 필요한가요? 에서 편집 체크상자를 해제해주십시오. 이 내용은 리비전 답글 항목의 바로 위에 있습니다.
      5. -
    5. 게시 버튼을 클릭해주세요
      6. -
    -
    6. -
- -
-

수정 내용은 저장 직후에 바로 보이지 않을 수 있습니다. 페이지 내용이 처리되고 저장되기 까지는 약간의 시간지연이 있을 수 있습니다.

-
-
-
diff --git "a/files/ko/mdn/contribute/howto/mdn_\352\263\204\354\240\225_\354\203\235\354\204\261\355\225\230\352\270\260/index.html" "b/files/ko/mdn/contribute/howto/mdn_\352\263\204\354\240\225_\354\203\235\354\204\261\355\225\230\352\270\260/index.html" deleted file mode 100644 index b3b84a92b1..0000000000 --- "a/files/ko/mdn/contribute/howto/mdn_\352\263\204\354\240\225_\354\203\235\354\204\261\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: MDN 계정 생성 -slug: MDN/Contribute/Howto/MDN_계정_생성하기 -tags: - - 가입 - - 계정 - - 시작하기 - - 인증 -translation_of: MDN/Contribute/Howto/Create_an_MDN_account ---- -
{{MDNSidebar}}

페이지를 수정하거나 데모에 기여하는 등 MDN의 컨텐츠를 변경하려면 MDN 프로필이 필요합니다. 단지 내용을 읽거나 검색하는 것에는 프로필이 필요없으니 걱정하지 마세요. 아래는 MDN 프로필을 설정하기 위한 가이드입니다.

- -

MDN에 기여하기로 마음 먹었다면 여러분이 할 일은 다음과 같습니다. :

- -
    -
  1. 모든 MDN 페이지의 최상단에는 "Sign in with"(또는 '로그인') 버튼이 있습니다. 마우스를 포인터를 올려 놓으면(모바일 디바이스에서는 탭) MDN에서 사용 가능한 인증 서비스 목록이 나타납니다.
    2. -
  2. 로그인 할 서비스를 선택하세요. Persona 가 아닌 인증 서비스를 선택했다면 여러분의 공개 프로필에 여러분이 어떤 인증 방법으로 인증했는지 표시됩니다.
    3. -
  3. 각 서비스별 인증 단계를 따르십시오.
    4. -
  4. 각 서비스별 인증 단계를 마치고 MDN 페이지로 돌아오면,  이름과 이메일 주소를 입력해야 합니다. 입력한 이름은 모든 작업물에 공개적으로 표시되므로, 메일 주소를 이름으로 사용하지 마십시오.
    5. -
  5. 'MDN 프로필 생성' 버튼을 클릭합니다.
    6. -
  6. 4단계에서 입력한 이메일 주소가 여러분이 인증한 서비스 프로필 상의 이메일 주소와 다르면, 입력한 이메일 주소가 올바른지 확인하게 됩니다. 입력한 이메일 주소로 발송된 확인 메일의 링크를 클릭하세요.
    7. -
- -

이게 전부입니다! 이제 여러분의 MDN 계정이 생겼으니, 지금 당장 페이지들을 수정하거나 태그를 달 수 있습니다.

- -

모든 MDN 페이지의 최상단에 있는 여러분의 이름을 클릭하면 여러분의 공개 프로필을 볼 수 있으며, "편집" 버튼을 눌러 새로운 정보를 업데이트 할 수 있습니다. 여러분의 관심사나 블로그 주소, 트위터 계정, 혹은 그 외의 어떤 것이라도 나누어 보세요.

- -
-

참고: 새로운 사용자 이름에 공백이나 '@' 문자를 포함할 수 없습니다. 사용자 이름은 당신의 모든 작업물에서 공개적으로 보여진다는 것을 기억하세요!

-
- -

 

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 deleted file mode 100644 index e26a3d3a05..0000000000 --- a/files/ko/mdn/contribute/howto/set_the_summary_for_a_page/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: 페이지에 대한 요약을 설정하는 방법 -slug: MDN/Contribute/Howto/Set_the_summary_for_a_page -translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page ---- -
{{MDNSidebar}}
- -

MDN의 페이지에 대한 요약을 정의할 수 있습니다. 이 요약은 검색 엔진의 결과, 시사적인 랜딩 페이지와 같은 다른 MDN 페이지 또는 툴팁에서 다양하게 사용됩니다. 요약은 페이지 내용의 나머지가 없이도 페이지의 문맥과 다른 문맥에서 보여졌을 때 모두 의미가 통해야 합니다.

- -

요약은 한 페이지 이내로 분명하게 정의됩니다. 요약이 분명하게 정의되지 않았다면, 보통 첫 번째 문장 정도가 사용되는데 이는 언제나 목적을 위한 최고의 텍스트가 아닙니다.

- - - - - - - - - - - - - - - - - - - - -
어떤 일을 해야 하나요?다른 문맥에서 요약으로 사용되어야 하는 페이지 내의 텍스트를 표시하기; 필요하다면 이 작업은 적합한 텍스트를 작성하는 것을 포함할 수 있습니다.
어디서 이 일이 필요하나요?요약이 부족하거나 미흡한 페이지.
이 일을 하기 위해 무엇을 알아야 하나요?MDN 에디터 사용 능력; 좋은 영작문 솜씨; 좋은 요약을 작성하기 위한 주제에 대한 충분한 친숙도
이 일을 하기 위한 단계는 어떻게 되나요? -
    -
  1. 요약을 설정할 페이지를 고릅니다: -
      -
    1. MDN documentation status 페이지에서, Sections 아래에서 알고 있는 주제의 링크를 클릭합니다.(예를 들어, HTML).
      2. -
    2. 주제의 문서 상태 페이지에서 Summary 테이블의 Pages 헤더를 클릭합니다. 해당 주제 섹션의 모든 페이지 인덱스로 이동됩니다.; 왼쪽 열에는 페이지 링크들이, 오른쪽 열에는 태그와 요약들이 보입니다.
      3. -
    3. 요약이 없거나, 좋지 않은 요약을 가진 페이지를 고릅니다.
      4. -
    4. 링크를 클릭하여 해당 페이지로 갑니다.
      5. -
    -
    2. -
  2. Edit를 클릭하여서 MDN 에디터로 페이지를 엽니다.
    3. -
  3. 문맥과 상관없이 요약으로 사용될 한 문장 또는 두 문장을 찾습니다. 필요하다면, 기존의 내용을 수정하여서 문장이 좋은 요약이 되도록 만들거나 수정합니다.
    4. -
  4. 요약으로 사용될 텍스트를 선택합니다.
    5. -
  5. 에디터 툴바의 Styles 위젯에서 SEO Summary를 선택합니다. (이것은 페이지 소스에서 선택된 텍스트에 class="seoSummary"를 가진 {{HTMLElement("span")}} 엘레멘트를 추가합니다. )
    6. -
  6. "페이지 요약 설정"과 같은 수정 코멘트와 함께 변경사항을 저장합니다.
    7. -
-
- -

 

- -

 

- -

 

diff --git a/files/ko/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ko/mdn/contribute/howto/tag_javascript_pages/index.html deleted file mode 100644 index 8825a20a62..0000000000 --- a/files/ko/mdn/contribute/howto/tag_javascript_pages/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: JavaScript tag를 다는 방법 -slug: MDN/Contribute/Howto/Tag_JavaScript_pages -translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages ---- -
{{MDNSidebar}}

태그달기는 페이지에 메타 정보를 추가함을 통해 관련된 내용이 묶여질수 있도록 하는 작업을 포함합니다.

- -
-
어디서 필요한가요?
-
태그가 없는 JavaScript에 관련된 특정한 페이지안에서 필요합니다.
-
작업을 위해서 무엇을 알 필요가 있나요?
-
메소드나 변수들과 같은 기본적 JavaScript 코딩 지식이 필요합니다.
-
어떤 절차가 있나요?
-
-
    -
  1. 위에 링크된 페이지들중 하나를 선택하세요
    2. -
  2. 페이지를 로드하기위해 기사링크를 클릭하세요
    3. -
  3. 페이지가 로드됐다면, 맨 위 있는EDIT버튼을 클릭하세요; 이는 당신을 MDN 에디터로 만들어줍니다.
    4. -
  4. 적어도 JavaScript 태그가 추가돼야 합니다. 아래에는 가능한 다른 태그들입니다. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    TagWhat pages to use it on
    Methodmethods
    Propertyproperties
    prototypeprototypes
    Object type namemethods of an object; for example String.fromCharCode should have the tag String
    ECMAScript6 and Experimentalfeatures added in a new ECMAScript version
    Deprecateddeprecated features (whose use is discouraged but still supported)
    Obsoleteobsolete features (which are no longer supported in modern browsers)
    othersSee MDN tagging standards for other possible tags to apply
    -
    5. -
  5. Save with a comment.
    6. -
  6. You're done!
    7. -
-
-
- -

 

diff --git a/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html b/files/ko/mdn/contribute/howto/write_an_api_reference/sidebars/index.html new file mode 100644 index 0000000000..fd8be5585d --- /dev/null +++ b/files/ko/mdn/contribute/howto/write_an_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 +--- +
{{MDNSidebar}}
+ +

API 레퍼런스 문서에는 수정 가능한 사이드바 를 추가할 수 있습니다. 이 사이드바에 인터페이스, 튜토리얼, 혹은 API와 관련된 자료 링크를 노출합니다. 그 사용법을 설명합니다. 

+ +

뭘 해야 하나요?

+ +

사이드바 생성은 다음 세 단계로 나뉩니다. 

+ +
    +
  1. API 레퍼런스 페이지를 만듭니다. 
    2. +
  2. KumaScript 레파지토리의 GroupData.json 데이터 파일에 그 API를 위한 엔트리를 추가합니다. 
    3. +
  3. 사이드바가 필요한 페이지에 \{{APIRef}} 메크로를 추가합니다.
    4. +
+ +

Fetch API를 샘플로 삼아서 단계별로 살펴 보겠습니다. 

+ +

신규 API 레퍼런스 페이지 만들기

+ +

페이지에 사이드바를 추가하기 전에 여러분은 페이지를 만들어야 합니다. (자세한건 API 레퍼런스 문서에 필요한건 무엇일까요? 마이드 문서를 보세요)

+ +

GroupData.json에 API의 엔트리를 추가하기

+ +

GroupData.json 파일은 API 레퍼런스 문서의 사이드바 안에 담아야 하는 모든 데이타를 담고 있습니다. API를 파라미터로 주고 \{{APIRef}}메크로를 실행하면, GroupData.json에서 탐색해서 사이드바를 생성하고 페이지에 추가합니다. 

+ +

GroupData.json에 엔트리를 추가하려면 다음을 따르세요.

+ +
    +
  1. GitHub 계정이 필요합니다. 
    2. +
  2. KumaScript 레파지토리를 포크뜨고, 작업할 브랜치를 생성하고 로컬에 클론을 뜹니다. 
    3. +
  3. 생성한 브랜치로 체크아웃을 하고 작업후 오리진으로 푸시합니다. 
    4. +
  4. MDN 팀이 리뷰할 수 있도록 풀 리퀘스트를 날려주시고, 필요하다 생각이 들면 변경 요청을 주세요.
    5. +
+ +

GitHub 사용법을 잘 모르겠으면 호환성 테이블 가이드 문서를 참고하세요. 자세한 내용이 있습니다. 

+ +

GroupData.json은 KumaScript 레파지토리의 macros 폴더 안에 있습니다. 파일을 열어보면 API별로 자기 내용을 가진 거대한 JSON 구조체를 볼 수 있습니다. 키는 API명이고, 값은 사이드바 링크를 생성하기 위해 정의된 하위 멤버를 담은 객체입니다. 

+ +

Fetch API 를 예로 들면 일치하는 GroupData.json의 엔트리가 다음과 같습니다. 

+ +
"Fetch API": {
+    "overview":   [ "Fetch API"],
+    "interfaces": [ "Body",
+                    "Headers",
+                    "Request",
+                    "Response",
+                    "FetchController",
+                    "FetchObserver",
+                    "FetchSignal",
+                    "ObserverCallback" ],
+    "methods":    [ "WindowOrWorkerGlobalScope.fetch()" ],
+    "properties": [],
+    "events":     []
+},
+
+ +

보다시피 키 명을 "Fetch API"으로 명명 하고 있고, 하위 멤버들을 담은 객체를 가지고 있습니다. 

+ +

GroupData 엔트리에 담긴 하위 멤버들

+ +

GroupData 엔트리에 추가할 수 있는 하위 멤버 목록입니다. 

+ +

리스트업된 하위 멤버값 대부분은 링크걸 텍스트와 링크 생성을 위해 메인 API 색인 페이지(https://developer.mozilla.org/<language-code>/docs/Web/API) 끝에 추가될 슬러그입니다. 예를 들어 en-US 로케일에서 "Body"는 아래 링크를 만듭니다. 

+ +
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Body</a></li>
+
+ +

몇가지 예외가 있습니다.. 예를 들어 "guides" 하위 멤버는 가이드/튜토리얼 관련 링크를 정의할 하나이상의 링크 정보(타이틀과 슬러그)를 갖고 있는데, 이경우 슬러그는 MDN 어디든 추가될 수 있도록 MDN 문서 루트(https://developer.mozilla.org/<language-code>/docs)의 끝에 추가됩니다. 

+ +

사용가능한 멤버들입니다. 로케일은 en-US로 가정합니다. 

+ +
    +
  1. +

    "overview" — 값은 배열이고, API 오버뷰 문서의 슬러그입니다. 하나인 경우 "Fetch API"이면 다음 같은 링크를 만듭니다. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.

    +
    2. +
  2. +

    "interfaces" — 해당 API의 인터페이스 전체 목록을 담은 배열 입니다. 값이 "Body"이면 다음 과 같은 링크를 만듭니다. https://developer.mozilla.org/en-US/docs/Web/API/Body.

    +
    3. +
  3. +

    "methods" — 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 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

    +
    4. +
  4. +

    "properties" — 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 https://developer.mozilla.org/en-US/docs/Web/API/Headers/append.

    +
    5. +
  5. +

    "events" — 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 https://developer.mozilla.org/en-US/docs/Web/Events/animationstart.

    +
    6. +
  6. +

    "guides" — 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:

    + + 
    { "url":   "/docs/Web/API/Detecting_device_orientation",
+"title": "Detecting device orientation" }
    + +

    Creates a link with the title "Detecting device orientation", which points to https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation.

    +
    7. +
+ +

API Submembers and Tags

+ +

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

+ +

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.

+ +

Further information about tag-based processing is available in the APIRef source.

+ +

Inserting the sidebar in your pages

+ +

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 WebVR API's sidebar is included in its pages with the following:

+ +

\{{APIRef("WebVR API")}}

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 deleted file mode 100644 index 1eddcc7383..0000000000 --- a/files/ko/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -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 ---- -
{{MDNSidebar}}
- -

MDN의 학습 영역(Learning Area)은 새로운 개발자들에게 웹 개념을 소개하는 글들을 위한 우리의 집입니다. 왜냐하면 학습 영역의 콘텐츠는 대부분 초보자를 위한 것들이고, 당신의 지식을 공유하고 웹에 대해서 알고 싶은 사람들을 돕는 좋은 공간이기 때문입니다. 새로운 개발자들이 이 콘텐츠를 따라 할 수 있도록 하는 것이 중요합니다. 따라서 우리는 특별히 관심을 기울여야 합니다. 

- -

이 글에서는 학습 영역(Learning Area)을 위한 페이지를 작성하는 방법을 설명합니다.

- -

학습 영역 기사를 작성하는 방법

- -

당신의 지식을 공유하려면 아래의 큰 초록색 버튼을 누르세요. 그러면 다섯 단계로 이어집니다. 만약 당신이 아이디어를 찾는다면, 우리의 트렐로 보드(our team Trello board)를 살펴보세요.

- -

새 학습 기사 작성

- -

이 기사는 정확한 위치에 도달할 수 없을지도 모르지만, 최소한 그것은 MDN에게 달려 있습니다. 만약 당신이 정확한 위치로 옮기고 싶다면 우리(Contact us)에게 연락해 주세요.

- -

1단계 : 두개의 요약문 작성

- -

기사의 첫 문장은 당신이 다루고자 하는 주제를 요약해야 하고, 두번째 문장은 당신이 기사에 실린 물건들을 좀 더 구체적으로 다루어야 합니다. 예를 들어 :

- -
-

{{glossary("HTML")}}  HTML파일에는 정형 콘텐츠, {{Glossary("CSS")}}, 또 다른 주요 웹 기술이 포함되어 있어 콘텐츠를 원하는 대로 바라볼 수 있습니다.  이 기사에서는 이 기술이 어떻게 작동하는지, 어떻게 기본적인 예제를 작성하는지 살펴보겠습니다. 

-
- -

예를 들어 CSS가 페이지 스타일에 사용되는 핵심 웹 기술이라고 간단히 설명해 주세요. 그것은 독자들이 기사의 주제가 무엇인지에 대한 꽤 좋은 아이디어를 얻을 수 있는 충분한 근거가 됩니다. 

- -

왜냐하면 학습 영역 기사들은 주로 초보자를 대상으로 하고, 각각의 기사는 너무 많은 새로운 정보로 독자들을 압도하지 않도록 한가지 간단한 주제를 다루어야 하기 때문입니다. 만약 당신이 기사를 한 문장으로 요악하지 못하면,  너무 많은 것을 하나의 기사에서 다뤄야 할 지도 모릅니다.

- -

2단계 : 상단 상자 추가

- -

그리곤 독자들의 학습 과정에서 어떤 영향이 있는지 파악하는 것을 돕기 위해서 상단 상자를 추가합니다.  하단에 하나의 예로"URL과 그 구조의 이해(Understanding URLs and their structure)"에 대한 상단 상자가 있습니다. 당신의 기사를 쓰는 데 이 기사를 참고할 수 있습니다.

- - - - - - - - - - - - -
필수 조건:먼저 인터넷이 어떻게 작동하는지(how the Internet works), 웹서버가 무엇인지(what a Web server is), 웹에서 링크의 개념(the concepts behind links on the web)을 알아야 합니다.
목표:URL에 대해서와 URL이 어떻게 웹에서 작동하는지를 배웁니다.
- -
-
필수 조건
-
독자가 이 기사를 이해하기 위해 반드시 알고 있어야 할 것이 무엇인가요? 가능한 한 각 필수 요소에 대한 링크를 해당 개념을 다루는 다른 학습 영역 문서에 연결하세요. (사전 지식이 필요 없는 기초적인 기사가 아니라면)
-
목표
-
-

이 섹션에서는 독자가 글을 통해 습득할 내용을 간략하게 설명합니다. 이것은 요약문과는 좀 다릅니다, 요약문에서는 기사의 주제를 요약하지만 목표 부분은 독자들이 기사의 과정을 통해 달성할 수 있는 것을 구체적으로 제시합니다.

-
-
- -
-

Note: 이 테이블을 생성하려면, 위의 예제 테이블을 복사하여 붙여 넣을 수 있으며, MDN의 editor의 table tool을 사용할 수 있습니다. 테이블 도구를 사용하도록 선택한 경우에는 기본 standard-table 클래스 이외에 learn-box CSS 클래스를 추가해야 합니다. 이렇게 하려면 테이블 속성을 생성하거나 편집할 때"Advanced"패널로 이동하여 스타일시트 클래스 필드를 "standard-table learn-box"로 설정합니다. 

-
- -

3단계 : 전체 설명 작성

- -

다음으로 가장 중요한 개념을 강조하는 기사를 좀 더 자세히 설명하는 더 긴 설명을 작성합니다. 왜 독자들이 이 주제를 배우고 당신의 기사를 읽는 데 시간을 할애해야 하는지 설명하는 것을 잊지 마세요!

- -

4단계 : 깊이 들어가기

- -

모든 작업을 마친 후, 마침내 주제에 더욱 깊이 들어갈 수 있습니다. 원하는 대로 이 분야의 기사를 작성합니다(우리의 style guide를 자유롭게 참고하셔도 됩니다).  당신이 빛날 수 있는 기회입니다! 작성하는 주제에 대해 자세히 설명합니다. 전체 참조 문서에 대한 링크를 제공하고, 기술이 어떻게 작동하는지 설명하고, 구문 및 사용 상세 내역을 제공하는 방법을 설명합니다. 당신이 하고 싶은 대로 하세요!

- -

가이드로서, 여기에 초보자들을 위한 몇가지 조언이 있습니다:

- - - -

우리 기능의 첫번째 섹션을 살펴보세요. 몇가지 좋은 설명 섹션을 볼 수 있는 코드 문서를 보세요.(Functions — reusable blocks of code)

- -

5단계 : "능동적 학습" 자료 제공

- -

기사에 삽화를 넣는 것은 독자들이 더 쉽게 이해하고 배우는데 도움이 된다. 완수할 수 있는 연습, 튜토리얼 과제를 제공하세요. 여러분의 기사를 적극적으로 사용하고 실험하고 실험하고 실험하는 것을 통해, 여러분은 그들의 뇌에 정보를 "잠금" 하는 것을 도울 수 있습니다.

- -

직접 예제(live samples)로 페이지 안에 포함시키거나 직접 예제처럼 제대로 작동하지 않는 경우 링크하는 것(link to them)을 선택할 수 있습니다. 만약 여러분이 이 가치있는 자료를 만드는데 관심이 있다면, 웹을 배우는 것을 돕기 위한 대화형 연습 만들기(Create an interactive exercise to help learning the Web) 에 대한 기사를 읽어보세요.

- -

기존의 능동적인 학습 자료에 대한 링크를 제공할 수 없는 경우(관련 자료에 대해서 모르거나 만들 시간이 없을 경우) "NeedsActiveLearning"를 문서에 태그하세요. 다른 기여자들은 능동적인 학습 자료가 필요한 기사를 찾을 수 있고 당신이 그것들을 고안해 낼 수 있도록 도와 줄 지도 모릅니다.

- -

실시간 상호적인 학습 연습에 대한 Active learning: selecting different elements를 살펴보거나 Active learning: Playing with scope를 통해 로컬에서 탬플릿을 다운로드하고 수정하는 다양한 형태의 연습이 제공한 단계를 따라가세요.

- -

6단계 : 문서를 검토하고 탐색 영역 메뉴에 추가하세요

- -

기사를 쓰고 난 후, 우리가 보고 검토하고 개선점을 제안할 수 있도록 알려주세요. 연락할 수 있는 가장 좋은 방법은 당사의 연락처(Contact us) 섹션을 참조하는 것입니다.

- -

당신의 기사를 마무리하는 또 다른 방법은 학습 영역 기본 탐색 메뉴에 넣는 것입니다. 이 메뉴는 LearnSidebar 매크로에 의해 생성되어 편집할 특별한 권한이 필요합니다. 따라서 팀에서 추가한 내용에 대해 다시 한번 말씀 드리겠습니다.

- -

당신의 페이지에 기사를 추가해야 합니다. 이것은 당신의 페이지 맨 위에 있는 단락에 매크로(\{{LearnSidebar}})를 추가함으로써 이루어집니다.

- - - -

추천 기사

- -

기여를 하고 싶은데 어떤 것을 써야 할 지를 모르겠나요?

- -

학습 영역 팀은 글을 쓰기 위한 아이디어가 담긴 트렐로 보드(a Trello board with ideas of articles)를 유지합니다. 하나를 골라서 자유롭게 작성하세요! 

diff --git "a/files/ko/mdn/contribute/howto/\354\202\264\354\225\204\354\236\210\353\212\224_\354\275\224\353\223\234_\354\203\230\355\224\214\353\241\234_\353\263\200\355\231\230\355\225\230\352\270\260/index.html" "b/files/ko/mdn/contribute/howto/\354\202\264\354\225\204\354\236\210\353\212\224_\354\275\224\353\223\234_\354\203\230\355\224\214\353\241\234_\353\263\200\355\231\230\355\225\230\352\270\260/index.html" deleted file mode 100644 index 27ac6774f1..0000000000 --- "a/files/ko/mdn/contribute/howto/\354\202\264\354\225\204\354\236\210\353\212\224_\354\275\224\353\223\234_\354\203\230\355\224\214\353\241\234_\353\263\200\355\231\230\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: '"살아있는" 코드 샘플로 변환하기' -slug: MDN/Contribute/Howto/살아있는_코드_샘플로_변환하기 -tags: - - 라이브샘플 - - 살아있는 코드 - - 샘플코드 -translation_of: MDN/Contribute/Howto/Convert_code_samples_to_be_live ---- -
{{MDNSidebar}}

MDN의 라이브 샘플 시스템이란, 페이지에서 보여주는 샘플 코드를 수정하면 이 샘플 코드의 실행 결과도 달라지는 기능을 말합니다. 많은 문서에 샘플 코드들이 있지만 모든 샘플이 이 시스템을 사용하고 있지는 않으며, 생명력을 불어 넣어줘야 합니다.

- - - - - - - - - - - - - - - -
어디서부터 시작해야 하나요?라이브 샘플이 필요한 글 목록을 참고하세요.
작업을 위해 알아 두어야 할 사항은 무엇인가요? -
    -
  • HTML, CSS에 대한 이해가 필요합니다. 샘플에 따라 JavaScript에 대한 지식을 요구할 수도 있습니다.
    • -
  • MDN 문서 내에서 쿠마 스크립트(en) 매크로를 사용할 수 있어야 합니다.
    • -
-
작업 진행 절차는 어떻게 되나요? -

라이브 샘플을 삽입하는 방법을 포함하여, 올바른 라이브 샘플을 작성하려면 라이브 샘플 시스템 사용하기(en) 문서를 참고하세요.

-
    -
  1. 라이브 샘플이 필요한 글 목록에서 마음에 드는 글을 고르세요.
    2. -
  2. 샘플에 "생명력을 불어 넣으세요".
    3. -
  3. 과거의 것들은 지워버리세요.
    4. -
-
-

 

diff --git a/files/ko/mdn/editor/index.html b/files/ko/mdn/editor/index.html deleted file mode 100644 index a327f0fd89..0000000000 --- a/files/ko/mdn/editor/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: MDN 에디터 UI 가이드 -slug: MDN/Editor -tags: - - Landing - - MDN -translation_of: MDN/Editor ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("ko/docs/MDN")}}
- -

MDN 위키가 제공하는 위지윅(WYSIWYG) 에디터를 통해 새로운 컨텐츠에 쉽게 기여할 수 있습니다. 이 글은 에디터의 사용법과 작업 생산성을 향상시킬 수 있는 기능들에 대해 상세히 설명하고 있습니다. 새로운 페이지를 생성하거나 편집하기 전에 모질라의 법적고지를 읽고 여기에 따라주십시오.

- -

MDN 스타일 지침을 통해 MDN이 지향하는 형식, 스타일, 선호하는 문법과 스펠링 규칙에 대해 자세히 알 수 있습니다.

- -

{{LandingPageListSubpages}}

- -

{{EditorGuideQuicklinks}}

diff --git a/files/ko/mdn/editor/links/index.html b/files/ko/mdn/editor/links/index.html deleted file mode 100644 index f6217db92c..0000000000 --- a/files/ko/mdn/editor/links/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: Links -slug: MDN/Editor/Links -tags: - - MDN - - 가이드 - - 문서화 - - 에디터 -translation_of: MDN/Editor/Links ---- -
{{MDNSidebar}}
- - - -
-

주목할 점: 특별히 링크시에 선호되는 작성방법이 있습니다;  MDN  작성 스타일 가이드에 설명되어 있습니다.

-
- -

툴바 사용하기

- -

링크를 만드는 가장 확실한 방법은 툴바의  "link" 버튼을 클릭하거나, Ctl+K (맥에서는 Command-K )를 누르는 것입니다. 링크 버튼은 이렇게 생겼습니다: The link button (as of 2015-12-04). 문자열 선택없이 링크 작성시에, 혹은 기존에 있는 문자열을 선택하여 링크 작성시에 이 기능을 이용할 수 있습니다.

- -

문자열 선택없이 링크 작성하기

- -

일단 링크 버튼을 클릭하면, 아래에 보이는 링크 에디터 다이얼로그로 진입합니다:

- -

Screenshot of the Link dialog box, showing the Link Info tab

- -

여기서 새로운 링크를 구성할 수 있습니다. 이 다이얼로그의 콘트롤은 다음과 같습니다:

- -
-
링크 종류
-
생성중인 링크의 종류입니다. URL의 기본값은, MDN이든 오프사이트이든, 웹상 어딘가에 있는 URL입니다. 텍스트내의 앵커 (anchor)또는 "이메일"을 선택할 수도 있습니다. 앵커 링크 옵션은 툴바의 Anchor 버튼 으로 이전에 삽입된 anchor로의 링크를, 목록에서 골라서 생성할 수 있도록 합니다. 이메일 옵션은 받는사람의 이메일 주소와 제목 기본 메시지 콘텐츠를 입력하여 mailto: URL 이 구성되도록 합니다. 대부분의 경우 URL optin을 사용하게 될 겁니다.
-
문서 제목 찾기 / 링크 텍스트
-
이 필드는 두가지 목적을 수행합니다: 첫째는, 링크 대상으로 사용할 텍스트를 지정할 수 있습니다 (또는 대화 상자를 열기 전에 텍스트를 선택한 경우, 해당 텍스트가 이곳에 링크 대상으로 표시됩니다). 두번째로, 이 곳에 입력된 텍스트를 MDN내 등록된 문서와 대조하여 가능한 목적지 페이지를 찾아내는데 사용됩니다. 예를 들어, 이 박스안에 "Array"라고 타이핑하면, 아래와 같은 상황을 볼 수 있습니다:
- Screenshot of the Link dialog box, showing a lookup menu for the text "Array"
-
- -
-
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.
-
Attachments
-
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.
-
URL
-
Finally, the URL field lets you actually directly enter the URL; it also shows the URL of whatever you've selected in either the Article Title Lookup or Attachments 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.
-
- -

Once the link is configured, click the OK button to insert it.

- -
-

If you're paying attention, you'll see that there's a second tab—Advanced—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.

-
- -

기존 텍스트에 링크 생성하기

- -

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 Article Title/Lookup Text field with the selected text. For example, let's say we have the following text:

- -
-

You may find it useful to use JavaScript arrays when working on this project.

-
- -

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 developer.mozilla.org), which can give you a better idea of where it is located and what type of article it is.

- -

Screenshot of the Link dialog box, showing a lookup menu and a URL tooltip

- -

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 OK and the text gets turned into a link, like this:

- -
-

You may find it useful to use JavaScript arrays when working on this project.

-
- -

링크 매크로 사용하기

- -

MDN은, 선택된 용어에 적절한 콘텐츠로의 링크가 자동적으로 생성되는 동시에 스타일 가이드에 맞게 링크가 생성되도록 하는 작업을 매크로에 크게 의존합니다. 이 예를 보세요: 우리의 스타일 가이드는 API 용어 이름, HTML 요소와 속성, CSS 속성, 함수 이름등이 {{HTMLElement("code")}} 형식을 권장한다( 사실상 그대로 되어야 합니다)라고 되어있습니다. 그것들은 또한 MDN상의 적절한 페이지로 링크가 연결되어있어야 합니다.

- -

매크로를 이용하여 이런 링크들을 만드는 것은 익숙해지기에 약간 시간이 걸리지만 많은 장점이 있습니다:

- - - -

이런 종류의 매크로가 많이 있으며, 여기서 모든 매크로를 다 보지는 않을 겁니다. 대신, 가장 일반적인  몇가지 특별한 예를 살펴볼 것입니다. 더 완벽한 목록은  MDN 커스텀 매크로 가이드의 "하이퍼링크 생성하기" 섹션을 보세요. 모든 매크로에 대해서 KumaScript 소스 코드를 확인할 수 있다는 점은 주목할만 합니다. 대부분의 경우 소스코드 상단에 작동 방식과 다양한 매개변수가 무엏인지 설명하는 주석이 있습니다.

- -

API 문서에 링크걸기

- -

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

- -
-
{{TemplateLink("HTMLElement")}}
-
Inserts an HTML element's name, properly styled and linked. For example: \{{HTMLElement("table")}} yields {{HTMLElement("table")}}.
-
{{TemplateLink("cssxref")}}
-
Inserts a CSS property, at-rule, or selector's documentation in the CSS reference. For example: \{{cssxref("background-color")}} results in {{cssxref("background-color")}}.
-
{{TemplateLink("domxref")}}
-
Inserts a link into the Web API Reference for a given API term. For example: \{{domxref("window")}} yields {{domxref("window")}} and \{{domxref("window.scrollBy()")}} inserts {{domxref("window.scrollBy()")}}. You can also supply an additional parameter to override the text: \{{domxref("window.scrollBy", "scrollBy()")}} results in {{domxref("window.scrollBy", "scrollBy()")}}.
-
{{TemplateLink("SVGElement")}}
-
Inserts an SVG element's name, properly styled and linked. For example: \{{SVGElement("circle")}} yields {{SVGElement("circle")}}.
-
- -

동일 문서내 섹션에 링크걸기

- -

To link to a section within the same article, you can use the {{TemplateLink("anch")}} macro. The syntax is straightforward: \{{anch("Name of destination section")}}. 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:

- - - -

버그에 링크걸기

- -

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, \{{bug(765642)}} looks like this: {{bug(765642)}}.

- -

Similarly, you can create links to bugs in other browsers and Web engines:

- -
-
WebKit (Safari, etc.)
-
{{TemplateLink("WebkitBug")}}: \{{webkitbug(31277)}} yields {{webkitbug(31277)}}.
-
- -

RFCs 에 링크걸기

- -

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.

- -

XPCOM 인터페이스 정보에 링크걸기 

- -
-

The MDN staff no longer actively maintains the XPCOM documentation, but volunteer contributions are welcomel

-
- -

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.

- -

The syntax for linking to the documentation for an XPCOM interface as a whole is just: \{{interface("interfacename")}}. For example, you might write:

- -
-

When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.

-
- -

The result looks like this:

- -
-

When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.

-
- -

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, \{{ifmethod("nsIIOService", "newURI")}} results in {{ifmethod("nsIIOService", "newURI")}}. That's a case where you're being protected against possible changes in the style guide in the future!

- -

Mozilla 설정 문서에 링크걸기

- -

To insert the name of a Mozilla preference and make it link to the corresponding page in the Preference reference, 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 \{{pref("javascript.options.showInConsole")}} to create this: {{pref("javascript.options.showInConsole")}}.

- -

Mozilla 소스 파일에 링크걸기

- -

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 /source/ directory. For example: \{{source("browser/Makefile.in")}} creates this link: {{source("browser/Makefile.in")}}.

- -

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

- -
-

Please look at the {{anch("Using macros")}} documentation if you're interested in learning more about using macros, and check out our KumaScript documentation to learn more about the macro system itself.

-
- -

추천 콘텐츠에 링크걸기

- -

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

- -

URL 정책

- -

For security reasons, you should only create links that use the following schemes:

- - - -

Others may or may not work, but are not supported and will probably be removed by editorial staff.

- -
-

Special URL schemes such as about: and chrome: 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 javascript: and jar: schemes, which are blocked by most modern browsers as a security precaution.

-
- -

{{EditorGuideQuicklinks}}

diff --git a/files/ko/mdn/guidelines/best_practices/index.html b/files/ko/mdn/guidelines/best_practices/index.html deleted file mode 100644 index d8c5f2b247..0000000000 --- a/files/ko/mdn/guidelines/best_practices/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 모범 사례 -slug: MDN/Guidelines/Best_practices -tags: - - Guide - - Guidelines - - MDN Meta -translation_of: MDN/Guidelines/Conventions_definitions ---- -
{{MDNSidebar}}

이 글은 MDN에서 추천하는 콘텐츠 작업 법을 설명합니다. 이 가이드라인은 더 나은 결과로 이끌 선호하는 일하는 법을 설명하거나 비슷한 일을 하는 여러 방법 중에서 결정에 조언을 제공합니다.

- -

콘텐츠 복사하기

- -

때때로, 여러 페이지에 같은 텍스트를 재사용해야 합니다 (또는 한 페이지의 콘텐츠를 다른 페이지를 위한 템플릿으로 사용하고 싶습니다). 세 가지 선택 사항이 있습니다:

- - diff --git a/files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html b/files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html deleted file mode 100644 index 093f50ae47..0000000000 --- a/files/ko/mdn/guidelines/code_guidelines/code_guidelines/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: 모든 코드에 대한 일반 가이드라인 -slug: MDN/Guidelines/Code_guidelines/Code_guidelines -tags: - - Code - - General - - Guide - - MDN Meta - - 가이드 - - 가이드라인 - - 코드 블럭 - - 코드 블록 - - 코드 스타일 -translation_of: MDN/Guidelines/Code_guidelines/General ---- -
{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}
- -

아래 코드 예제 가이드라인에서 HTML, CSS, JavaScript 나 다른 어느 코드로 예로 들건 , 모든 코드 타입에 적용됩니다.

- -

 이 문서 내용은

- - - -

들여쓰기, 여백주기, 사이즈

- -

들여쓰기

- -

모든 코드는 2 스페이스로 들여쓰기 해야합니다. 예를 들면:

- -
<div>
-  <p>This is my paragraph.</p>
-</div>
- -
function myFunc() {
-  if(thingy) {
-    console.log('Yup, that worked.');
-  }
-}
- -

코드 한 줄 길이

- -

한 행의 코드는 최대 80자 (대화형 예제는 64자) 이내로 제한 되어야 합니다.  가독성을 위해 합리적으로 행을 분리 하는 것 좋지만 모범 사례를 벗어나지는 마십시오.

- -

예를 들면, 아래는 안 좋은 예입니다.

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

이것은 좀 낫지만, 그래도 여전히 좋지 않습니다:

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

템플릿 리터럴을 사용하는 것이 더 좋습니다:

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

코드 블럭 높이

- -

코드 블럭은 필요한 만큼 길어야 하지만 너무 길면 안됩니다. 15에서 25 라인 정도의 길이가 이상적입니다. 코드 블럭이 너무 길어진다면, 가장 유용한 스니펫만 보여주고, 나머지 부분은 깃허브 저장소나 코드펜 같은 링크로 연결하세요.

- -

예제 디스플레이 가이드라인

- -

렌더링 된 예제 크기

- -

MDN 메인 콘텐츠 창은 데스크탑에서 약  700px 크기 이므로, 삽입된 MDN 예제는 ( 삽입된 예제를 100% 너비로 설정했을 때 ) 해당 너비에서 잘 보여야 합니다.

- -

높이의 경우, 최대한의 화면 가독성을 위해 가능하면 렌더링 된 예제 높이를 700px 아래로 유지하는 것을 추천합니다.

- -

모바일 디바이스에서도 예제가 잘 보이도록 어느 정도는 반응형으로 동작되도록 예제를 작성하는데 신경써야 합니다.

- -

이미지나 다른 미디어의 사용

- -

가끔 이미지나 다른 미디어를 예제에 삽입하고 싶을 때가 있습니다. 그럴 때에는:

- - - -

컬러의 사용

- -

소문자 16진수 대신, 음영이나 주요 컬러(즉, 검은색, 흰색, 빨간색)는 키워드를 사용할 수있습니다. 필요한 경우에만 좀 더 복잡한 컬러스킴을 사용하세요.( 예를 들면, 투명색이 필요할 때)

- -

주요 "기본" 컬러는 키워드로 설정하는것이 좋습니다. 예를 들면:

- -
color: black;
-color: white;
-color: red;
- -

좀 더 복잡한 컬러는 rgb() 를 사용합니다. (반 투명 색 포함):

- -
color: rgb(0, 0, 0, 0.5);
-color: rgb(248, 242, 230);
- -

16진수 컬러를 사용해야 한다면, 소문자를 이용하세요:

- -
color: #058ed9;
-color: #a39a92;
- -

그리고 가능한 곳에는 단축형태를 사용하세요:

- -
color: #ff0;
-color: #fff;
- -

MDN's Fiori 가이드라인(프론트엔드 코드베이스용)은 전체 MDN 디자인에 사용된 유용한 컬러셋을 포함하고 있습니다. ( 역자주: 영어 원문 링크가 깨져 MDN Fiori 깃허브 리포 에서 비슷한 링크를 찾아 연결했습니다.)

- -

좋은 예시와 나쁜 예시 강조

- -

이 가이드라인에서 알 수 있는 것처럼, 좋은 실습예시는 연두색에 웃는얼굴로 강조되며, 나쁜 실습 예시는 슬픈표정에 빨간 바탕으로 강조됩니다.

- -

이 처럼 하려면, MDN 에디터 콘트롤로 코드 블럭을 <pre> 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:

- -
<pre class="brush: js">
-function myFunc() {
-  console.log('Hello!');
-};</pre>
- -

이 상태에서 좋은 예시로 만들려면, class 속성의 오른쪽 따옴표 바로 앞에 example-good을 넣으면 됩니다:

- -
<pre class="brush: js example-good">
-  ...
- -

나쁜 예시로 만들려면, class 속성의 오른쪽 따옴표 바로 앞에 example-bad를 넣으면 됩니다:

- -
<pre class="brush: js example-bad">
-  ...
- -

우리는 당신이 이 기능을 사용하길 권장합니다. 모든 곳에 사용할 필요는 없습니다. 당신의 코드에서 좋은 예와 나쁜 예를 구분할 필요가 있을때 사용하세요.

- -

레퍼런스 페이지에서 문법 섹션 작성

- -

MDN 레퍼런스 페이지에는  JavaScript 메서드, CSS 속성, HTML 요소 등과 같이 기능의 구문이 무엇을 할 수 있고, 어때야 하는지 명확하게 보여주는 문법 섹션(Syntax section)이 포함되어 있습니다. 이 내용을 작성하는 가이드라인은 Syntax sections 문서를 참고하세요.

diff --git a/files/ko/mdn/guidelines/code_guidelines/general/index.html b/files/ko/mdn/guidelines/code_guidelines/general/index.html new file mode 100644 index 0000000000..093f50ae47 --- /dev/null +++ b/files/ko/mdn/guidelines/code_guidelines/general/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 +--- +
{{MDNSidebar}}{{IncludeSubnav("/ko/docs/MDN")}}
+ +

아래 코드 예제 가이드라인에서 HTML, CSS, JavaScript 나 다른 어느 코드로 예로 들건 , 모든 코드 타입에 적용됩니다.

+ +

 이 문서 내용은

+ + + +

들여쓰기, 여백주기, 사이즈

+ +

들여쓰기

+ +

모든 코드는 2 스페이스로 들여쓰기 해야합니다. 예를 들면:

+ +
<div>
+  <p>This is my paragraph.</p>
+</div>
+ +
function myFunc() {
+  if(thingy) {
+    console.log('Yup, that worked.');
+  }
+}
+ +

코드 한 줄 길이

+ +

한 행의 코드는 최대 80자 (대화형 예제는 64자) 이내로 제한 되어야 합니다.  가독성을 위해 합리적으로 행을 분리 하는 것 좋지만 모범 사례를 벗어나지는 마십시오.

+ +

예를 들면, 아래는 안 좋은 예입니다.

+ +
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.';
+ +

이것은 좀 낫지만, 그래도 여전히 좋지 않습니다:

+ +
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.';
+ +

템플릿 리터럴을 사용하는 것이 더 좋습니다:

+ +
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.`;
+ +

코드 블럭 높이

+ +

코드 블럭은 필요한 만큼 길어야 하지만 너무 길면 안됩니다. 15에서 25 라인 정도의 길이가 이상적입니다. 코드 블럭이 너무 길어진다면, 가장 유용한 스니펫만 보여주고, 나머지 부분은 깃허브 저장소나 코드펜 같은 링크로 연결하세요.

+ +

예제 디스플레이 가이드라인

+ +

렌더링 된 예제 크기

+ +

MDN 메인 콘텐츠 창은 데스크탑에서 약  700px 크기 이므로, 삽입된 MDN 예제는 ( 삽입된 예제를 100% 너비로 설정했을 때 ) 해당 너비에서 잘 보여야 합니다.

+ +

높이의 경우, 최대한의 화면 가독성을 위해 가능하면 렌더링 된 예제 높이를 700px 아래로 유지하는 것을 추천합니다.

+ +

모바일 디바이스에서도 예제가 잘 보이도록 어느 정도는 반응형으로 동작되도록 예제를 작성하는데 신경써야 합니다.

+ +

이미지나 다른 미디어의 사용

+ +

가끔 이미지나 다른 미디어를 예제에 삽입하고 싶을 때가 있습니다. 그럴 때에는:

+ + + +

컬러의 사용

+ +

소문자 16진수 대신, 음영이나 주요 컬러(즉, 검은색, 흰색, 빨간색)는 키워드를 사용할 수있습니다. 필요한 경우에만 좀 더 복잡한 컬러스킴을 사용하세요.( 예를 들면, 투명색이 필요할 때)

+ +

주요 "기본" 컬러는 키워드로 설정하는것이 좋습니다. 예를 들면:

+ +
color: black;
+color: white;
+color: red;
+ +

좀 더 복잡한 컬러는 rgb() 를 사용합니다. (반 투명 색 포함):

+ +
color: rgb(0, 0, 0, 0.5);
+color: rgb(248, 242, 230);
+ +

16진수 컬러를 사용해야 한다면, 소문자를 이용하세요:

+ +
color: #058ed9;
+color: #a39a92;
+ +

그리고 가능한 곳에는 단축형태를 사용하세요:

+ +
color: #ff0;
+color: #fff;
+ +

MDN's Fiori 가이드라인(프론트엔드 코드베이스용)은 전체 MDN 디자인에 사용된 유용한 컬러셋을 포함하고 있습니다. ( 역자주: 영어 원문 링크가 깨져 MDN Fiori 깃허브 리포 에서 비슷한 링크를 찾아 연결했습니다.)

+ +

좋은 예시와 나쁜 예시 강조

+ +

이 가이드라인에서 알 수 있는 것처럼, 좋은 실습예시는 연두색에 웃는얼굴로 강조되며, 나쁜 실습 예시는 슬픈표정에 빨간 바탕으로 강조됩니다.

+ +

이 처럼 하려면, MDN 에디터 콘트롤로 코드 블럭을 <pre> 블럭이 되도록 하고, 적절한 문법 강조를 설정해야 합니다. 소스 코드는 아래와 비슷하게 보일겁니다:

+ +
<pre class="brush: js">
+function myFunc() {
+  console.log('Hello!');
+};</pre>
+ +

이 상태에서 좋은 예시로 만들려면, class 속성의 오른쪽 따옴표 바로 앞에 example-good을 넣으면 됩니다:

+ +
<pre class="brush: js example-good">
+  ...
+ +

나쁜 예시로 만들려면, class 속성의 오른쪽 따옴표 바로 앞에 example-bad를 넣으면 됩니다:

+ +
<pre class="brush: js example-bad">
+  ...
+ +

우리는 당신이 이 기능을 사용하길 권장합니다. 모든 곳에 사용할 필요는 없습니다. 당신의 코드에서 좋은 예와 나쁜 예를 구분할 필요가 있을때 사용하세요.

+ +

레퍼런스 페이지에서 문법 섹션 작성

+ +

MDN 레퍼런스 페이지에는  JavaScript 메서드, CSS 속성, HTML 요소 등과 같이 기능의 구문이 무엇을 할 수 있고, 어때야 하는지 명확하게 보여주는 문법 섹션(Syntax section)이 포함되어 있습니다. 이 내용을 작성하는 가이드라인은 Syntax sections 문서를 참고하세요.

diff --git a/files/ko/mdn/guidelines/conventions_definitions/index.html b/files/ko/mdn/guidelines/conventions_definitions/index.html new file mode 100644 index 0000000000..d8c5f2b247 --- /dev/null +++ b/files/ko/mdn/guidelines/conventions_definitions/index.html @@ -0,0 +1,34 @@ +--- +title: 모범 사례 +slug: MDN/Guidelines/Best_practices +tags: + - Guide + - Guidelines + - MDN Meta +translation_of: MDN/Guidelines/Conventions_definitions +--- +
{{MDNSidebar}}

이 글은 MDN에서 추천하는 콘텐츠 작업 법을 설명합니다. 이 가이드라인은 더 나은 결과로 이끌 선호하는 일하는 법을 설명하거나 비슷한 일을 하는 여러 방법 중에서 결정에 조언을 제공합니다.

+ +

콘텐츠 복사하기

+ +

때때로, 여러 페이지에 같은 텍스트를 재사용해야 합니다 (또는 한 페이지의 콘텐츠를 다른 페이지를 위한 템플릿으로 사용하고 싶습니다). 세 가지 선택 사항이 있습니다:

+ + diff --git a/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html b/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html new file mode 100644 index 0000000000..46f6395a52 --- /dev/null +++ b/files/ko/mdn/guidelines/does_this_belong_on_mdn/index.html @@ -0,0 +1,139 @@ +--- +title: 이건 MDN에 있나요? +slug: MDN/Contribute/Does_this_belong +translation_of: MDN/Guidelines/Does_this_belong_on_MDN +--- +
{{MDNSidebar}}
{{IncludeSubnav("/ko/docs/MDN")}}
+ +

무엇인가를 문서로 남겨두겠다는 생각을 하기 시작했다면,  그 문서를 어디에 둘지도 고민해보았을 겁니다. 문서가 위치할 수 있는 몇 가지 장소가 있고, MDN이 웹에서 가장 큰 문서 저장소 중 하나이지만 유일한 옵션은 아닙니다. 또한 소스 코드에 문서를 보관해둘 수도 있고, Mozilla 위키나 git 저장소의 README 파일에 저장해 두어도 좋습니다. 이 글에서는 어느 방법이 여러분들의 문서와 어울릴지를 판단하는데 도움이 되기 위해서 쓰였습니다.

+ +

MDN에는 뭐가 있죠?

+ +

우리는 MDN에 정말 다양한 주제를 다룹니다. 하지만 완전히 MDN에 있어서는 안될 몇 가지도 있습니다. 이 섹션은 여러분의 문서가 MDN에 있어도 괜찮은지 판단할 수 있도록 도와주겠습니다.

+ +

MDN에서 다루는 것

+ +

우리는 MDN에서 정말 많은 내용을 다루고 있습니다. 일반적으로 완전히 제작되었거나 배포 중인 Mozilla 제품이나, 웹에 공개된 열린 기술이라면, MDN에 문서로 남겨둡니다.

+ +

우리들이 다루고 있는 내용 몇가지를 맛보기로 보여드리겠습니다. 전체 리스트는 아니지만 몇가지 아이디어는 줄 수 있을 겁니다.

+ + + +
+

참고하세요: 우리는 Mozilla 기술이 아니더라도 Web에 공개되어 있는 한 다룰 수 있다는 점이 중요합니다. 가령, 우리는 Webkit 전용 CSS 프로퍼티를 설명해놓은 문서도 있습니다.

+
+ +

우리가 다루지 않는 것

+ +

MDN에 문서로 남겨져서는 안되는 명백한 것인지 아닌지에 대해 스스로 질문해볼 수 있습니다.

+ + + +

저 질문 중 하나라도 "예"라고 답변할 수 있다면, MDN에 있어서는 안될 문서입니다. 저 질문 모두에 "아니요"라고 대답할 수 있다면, MDN에 문서로 보관할지 진지하게 고민할 때가 되었다는 겁니다!

+ +

MDN에 문서로 남겨두면 좋은 점

+ +

MDN에 문서로 남겨두면 좋은 점이 굉장히 많답니다.

+ +

글을 쓰는 사람들이 굉장히 많습니다

+ +

MDN 공동체는 굉장히 큽니다. 정말 큽니다. 큰 것들을 작게 보이게 만들 정도로 큽니다. 농담이 아니라, 우리는 굉장히 많은 사람들과 MDN에 있는 자료를 만들어내며 관리하고 있습니다. 전세계 모든 땅(인정할게요. 남극까지는 잘 모르겠어요.)의 작가, 편집자들과 함께하고 있기 때문에, 글을 쓰려는 사람들은 무조건 득 보는 거에요.

+ + + +

Do you want your development team to be entirely responsible for the production of documentation? That's likely if your documentation is maintained elsewhere.

+ +

유지보수

+ +

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:

+ +
+
스팸 제거
+
스팸이 발생하면 우리들이 처리합니다.
+
편집
+
여러분 생각보다 필력이 달려도 걱정하실 것 없습니다. 여러분이 쓴 글을 다른 사람들이 읽을 수 있도록 해주겠습니다.
+
스타일의 일관성
+
여러분이 작성한 문서 하나에서만 지켜지는 일관성이 아니라, 다른 문서와 함께 있을 때에도 일관적인 스타일을 가지고 있을지 봐주겠습니다.
+
컨텐츠 관리
+
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.
+
+ +

다른 곳에 문서로 남겨두는 경우

+ +

MDN 말고 다른 곳에다가 여러분이 만든 작업물을 문서로 남겨둘 이유도 없는 건 아닙니다. 그런 이유에 대해서 몇가지 살펴보도록 하고, 각각 장단점을 찾아보도록 할게요.

+ +

계획이나 진행 상황

+ +

간단합니다. 계획, 진행 상황, 요청에 대한 문서는 MDN에 남기면 안됩니다.

+ +

Github에 올라온 프로젝트

+ +

Mozilla의 몇몇 프로젝트는 Github에 올라와 있습니다. 또, Github에는 문서를 보관하기 위해 자기네들만의 위키 비스무리한 시스템을 가지고 있어요. 몇몇 팀은 거기에다가 문서를 남겨두기를 더 좋아합니다. 여러분만의 문서를 만들어갈 생각이라면 아무래도 그쪽이 더 편하고 좋겠죠. 하지만 몇가지 사실을 기억하세요.

+ + + +

물론 이런 점들이 여러분들에게 별로 문제가 되지 않거나 문제가 되더라도 딱히 불편한 점이 없을 수도 있습니다. 몇몇 팀은 문서로 남기겠다는 필요성이 별로 없어서 코드 안에서만 작업하고 문서를 남겨두기도 합니다.

+ +

소스 안에 문서를 남겨두고 싶은 경우

+ +

몇몇 팀은 소스 저장소에다가 자신들의 문서를 저장하는 걸 더 선호하기도 합니다. 내부 프로젝트나 라이브러리 프로젝트에서는 꽤나 흔한 일이긴 한데요. 코드를 쓰듯이 자신들의 기술을 문서로 남길 수 있다는 점에서 이점이 있기는 합니다. 하지만 그만큼 단점도 있지요.

+ + + +

여전히 몇몇 프로젝트에서 이런 방법을 사용할 수 없는 건 아닙니다. (오히려 좋은 방법일 수도 있습니다.) 작은 프로젝트나 별로 관심을 얻을 생각을 하지 않는 프로젝트에는 특히 그렇죠.

+ +

나중에는

+ +

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.

diff --git a/files/ko/mdn/guidelines/style_guide/index.html b/files/ko/mdn/guidelines/style_guide/index.html deleted file mode 100644 index 507f30e228..0000000000 --- a/files/ko/mdn/guidelines/style_guide/index.html +++ /dev/null @@ -1,833 +0,0 @@ ---- -title: MDN 스타일 가이드 -slug: MDN/Guidelines/Style_guide -tags: - - Documentation - - Guide - - MDN - - MDN Meta - - MDN 스타일 가이드 - - 스타일 가이드 - - 스타일 가이드 작성 -translation_of: MDN/Guidelines/Writing_style_guide ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ko/docs/MDN")}}
- -

정돈되고 일관적이며 읽기 쉬운 문서를 제공하고자, MDN 웹 문서 스타일 안내서는 글의 정렬, 철자, 서식 방법 등을 정리합니다. 이 가이드는 엄격한 규칙이라기보다 가이드라인입니다. 우리는 형식보다는 내용에 더 관심이 있습니다. 그러니 기여하기 전에 스타일 가이드를 배워야 한다는 부담을 느끼시지 않아도 됩니다. 하지만 나중에 다른 부지런한 지원자가 이 가이드를 따라 당신의 작업물을 편집할 수 있습니다. 만약 그런 일이 벌어지더라도 화내거나 놀라지 마세요.

- -

이 가이드의 언어적 측면의 내용은 영문을 위주로 작성되었습니다. 기타 다른 언어는 언어만의 고유한 스타일 가이드를 가질 수 있으며, 새롭게 만드는 것도 좋습니다. 이 페이지들은 지역화 팀 페이지의 하위 페이지로 생성되어야 합니다.

- -

MDN이 아닌 다른 사이트를 위해 쓰여진 콘텐츠를 적용하는 스타일 표준에 대한 내용은 One Mozilla 스타일 가이드를 참고하세요.

- -

기본

- -

아무리 방대한 문서화 스타일 가이드라도 가장 기본적인 텍스트 표준에서 시작하는 것이 좋습니다. 텍스트 표준은 일관된 문서화를 유지하는데 도움을 줍니다. 이어지는 섹션에서 도움이 될 만한 이런 기본들을 설명합니다.

- -

페이지 제목

- -

페이지 제목은 검색 결과에 사용되며, 페이지 상단의 페이지 이동 경로(breadcrumb) 목록에 페이지 계층 구조를 구성하는 데 사용됩니다. (페이지 상단과 검색 결과 상단에 표시되는) 페이지 제목은 페이지 "슬러그"와 다를 수 있습니다. "슬러그"는 페이지 URL의 일부로   "<locale>/docs/" 다음에 따라오는 부분입니다.

- -

 제목과  섹션제목 대문자넣기(Capitalization)

- -

페이지 타이틀과 섹션 제목은 헤드라인 스타일 대문자넣기보다는 (첫번째 단어와 필요한 명사만 대문자를 넣는 방식의)일반 문장 스타일 대문자넣기를 해야 합니다:

- - - -

이런 스타일 규칙이 적용되기 전에 작성된 수많은 예전 문서들이 현재도 존재합니다. 자유롭게 해당 문서들을 수정해도 좋습니다. 우리는 점차적으로 스타일 규칙을 맞춰 나갈겁니다.

- -

제목 및 슬러그(slug) 선택하기

- -

페이지 슬러그는 짧게 만들어야 합니다. 새로운 레벨의 계층을 만들때, 그 레벨의 요소는 슬러그에서 한,두 단어로 표현되어야 합니다.

- -

반면에, 페이지 제목은 ,합리적인 범위내에서, 당신이 원하는 만큼 길어도 됩니다. 그리고 구체적이어야 합니다.

- -

신규 서브트리 생성하기

- -

어떤 토픽이나 주제 영역에 대한 문서를 추가할 필요가 있다면, 당신이 선택할 일반적인 방법은 랜딩 페이지를 생성한 이후, 각각의 개별적인 문서의 서브페이지를 추가하는 것입니다. 랜딩 페이지는 토픽이나 기술을 설명하는 한두 개의 문단으로 시작한 이후, 각 페이지의 설명이 달린 서브페이지의 목록을 전달해야합니다. 우리가 개발한 몇가지 매크로로 페이지를 목록에 자동으로 삽입할 수 있습니다.

- -

예를 들면 , 아래와 같이 구성된 자바스크립트 가이드를 생각해봅시다.

- - - -

문서를 문서구조 최상층에 두는 것은 최대한 피해야 합니다. 이렇게 하면 사이트가 느려지며, 사이트 탐색과 네비게이션을 비효율적으로 만듭니다.

- -
-

주목할 점: 문서 추가는 페이지 생성 권한이 필요합니다.

-
- -

General article content guidelines

- -

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.

- -

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 How to write for SEO on MDN.

- -

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.

- -

Consider your audience

- -

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.

- -

Provide a useful summary

- -

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.

- -

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.

- -
Example: Too short!
- -

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.

- -
CanvasRenderingContext2D.strokeText() draws a string.
- -
Example: Too long!
- -

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.

- -

Instead, the summary should focus on the strokeText() method, and should refer to the appropriate guide where the other details are offered.

- -
-

When called, the Canvas 2D API method CanvasRenderingContext2D.strokeText() 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.

- -

The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.

- -

The placement of the text relative to the specified coordinates are determined by the context's textAlign, textBaseline, and direction properties. textAlign controls the placement of the string relative to the X coordinate specified; if the value is "center", then the string is drawn starting at x - (stringWidth / 2), placing the specified X-coordinate in the middle of the string. If the value is "left", the string is drawn starting at the specified value of x. And if textAlign is "right", the text is drawn such that it ends at the specified X-coordinate.

- -

(etc etc etc...)

- -

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.

- -

You can call the fillText() method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.

-
- -
Example: Much better!
- -

Here we see a much better overview for the strokeText() method.

- -
-

The {{domxref("CanvasRenderingContext2D")}} method strokeText(), part of the Canvas 2D API, 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.

- -

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, Drawing text.

-
- -

Include all relevant examples

- -

More pages should have examples than not. The majority of pages probably deserve multiple examples, in fact.

- -

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.

- -

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.

- -
Code Examples
- -

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.

- -

The text following each piece of code should explain anything relevant, using an appropriate level of detail.

- - - -

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.

- -

Overly-short articles are hard to find

- -

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.

- -

Sections, paragraphs, and newlines

- -

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels.

- -

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

- -

Heading dos and donts

- - - -

The Enter (or Return) 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 Shift key while pressing Enter.

- -

Lists

- -

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.

- -

Bulleted lists

- -

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.

- -

An example of a correctly structured bulleted list:

- -
-

In this example we should include:

- - -
- -

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.

- -

Numbered lists

- -

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.

- -

An example of a correctly structured numbered list:

- -
-

In order to correctly structure a numbered list, you should:

- -
    -
  1. Open with a heading or brief paragraph to introduce the instructions. It's important to provide the user with context before beginning the instructions.
    2. -
  2. 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.
    3. -
  3. After you have finished your instructions, close off the numbered list with a brief summary or explanation of the expected outcome upon completion.
    4. -
- -

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.

-
- -

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.

- -

Text formatting and styles

- -

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

- -
-

The "Note Box" style is used to call out important notes, like this one.

-
- -
-

Similarly, the "Warning Box" style creates warning boxes like this.

-
- -

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, ask for help in the MDN discussion forum.

- -

Code sample style and formatting

- -
-

Note: 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 Code sample guidelines.

-
- -

Tabs and line breaks

- -

Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

- -
if (condition) {
-  /* handle the condition */
-} else {
-  /* handle the "else" case */
-}
-
- -

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:

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

Inline code formatting

- -

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names. (This uses the {{HTMLElement("code")}} element). For example: "the frenchText() function".

- -

Method names should be followed by a pair of parentheses: doSomethingUseful(). The parentheses help differentiate methods from other code terms.

- -

Syntax highlighting

- -

Screenshot of the 'Syntax Highlighter' menu.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.

- -
-

Note: Do not use the {{HTMLElement("code")}} element inside the {{HTMLElement("pre")}} block!

- -

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.

-
- -

The following example shows text with JavaScript formatting:

- -
for (let i = 0, j = 9; i <= 9; i++, j--)
-  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
- -

If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:

- -
x = 42;
- -

Syntax definitions

- -

When writing the syntax description section of a reference page, use the "Syntax Box" option in the "Styles" drop-down menu in the editor toolbar. This creates a specially-formatted box used specifically for syntax definitions, distinguishing them from other code blocks.

- -

Blocks not referring to code

- -

There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without a class attribute. Those cases include things like tree structures:

- -
root/
-
-  folder1/
-    file1
-
-  folder2/
-    file2
-    file3
-
- -

To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.

- -

Styling mentions of HTML elements

- -

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.

- -
-
Element names
-
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, enclose the name in angle brackets and use the "Inline Code" style (e.g., <title>).
-
Attribute names
-
Use "Inline Code" style to put attribute names in code font. Additionally, put them in bold face when the attribute is mentioned in association with an explanation of what it does, or the first time it's used in the article.
-
Attribute definitions
-
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.
-
Attribute values
-
Use the "Inline Code" style to apply <code> to attribute values, and don't use quotation marks around string values, unless needed by the syntax of a code sample.
-
For example: "When the type attribute of an <input> element is set to email or tel ..."
-
- -

Latin abbreviations

- -

In notes and parentheses

- - - -

In running text

- - - -

Meanings and English equivalents of Latin abbreviations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
- -
-

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.

- -

Also, be sure that you 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.

-
- -

Acronyms and abbreviations

- -

Capitalization and periods

- -

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

- - - -

Expansion

- -

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 glossary entry describing the technology.

- - - -

Plurals of acronyms and abbreviations

- -

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

- - - -

"Versus", "vs.", and "v."

- -

The contraction "vs." is preferred.

- - - -

Capitalization

- -

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

- -
-

This guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN.

- -

Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.

-
- -

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER." The only exception is that if you wish to abbreviate the name of the "Escape" key, you may use "ESC".

- -

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:

- - - -

Contractions

- -

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.

- -

Pluralization

- -

Use English-style plurals, not the Latin- or Greek-influenced forms.

- - - -

Hyphenation

- -

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

- - - -

Gender-neutral language

- -

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.
-
- Let's take the following example:

- -
-

A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.

-
- -
-

A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.

-
- -

Both versions are gender-specific. To fix this, use gender-neutral pronouns:

- -
-

A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.

-
- -
-

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.

- -

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 "singular 'they.'"

-
- -

You can use both genders:

- -
-

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

-
- -

Making the users plural:

- -
-

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

-
- -

The best solution, of course, is to rewrite and eliminate the pronouns:

- -
-

A confirmation dialog appears, requesting the user's permission for web cam access.

-
- -
-

A confirmation dialog box appears, which asks the user for permission to use the web cam.

-
- -

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.

- -

Numbers and numerals

- -

Dates

- -

For dates (not including dates in code samples) use the format "January 1, 1990".

- - - -

Alternately, you can use the YYYY/MM/DD format.

- - - -

Decades

- -

For decades, use the format "1990s". Don't use an apostrophe.

- - - -

Plurals of numerals

- -

For plurals of numerals add "s". Don't use an apostrophe.

- - - -

Commas

- -

In running text, use commas only in five-digit and larger numbers.

- - - -

Punctuation

- -

Serial comma

- -

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

- - - -
-

This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

-
- -

Apostrophes and quotation marks

- -

Do not use "curly" quotes and quotation marks. On MDN, we only use straight quotes and apostrophes.

- -

There are a couple of reasons for this.

- -
    -
  1. We need to choose one or the other for consistency.
    2. -
  2. 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).
    3. -
- - - -

Spelling

- -

For words with variant spellings, always use their American English spelling.

- -

In general, use the first entry at Dictionary.com, 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 look up "behaviour", you find the phrase "Chiefly British" followed by a link to the American standard form, "behavior". Do not use variant spellings.

- - - -

Terminology

- -

HTML elements

- -

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style.

- -

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

- - - -

Parameters vs. arguments

- -

The preferred term on MDN is parameters. Please avoid the term "arguments" for consistency whenever possible.

- -

User interface actions

- -

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

- - - -

Voice

- -

While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

- -

위키 마크업과 사용법

- -

링크

- -

링크는 위키를 강력한 배움과 가르침의 도구로 만드는 데 큰 역할을 합니다. 아래에서 관련한 기본적 정보를 찾을 수 있지만, 에디터 가이드에 있는 MDN에서 링크를 생성하고 편집하기 에서는 완전한 가이드를  볼 수 있습니다.

- -

우리는 당신이 문서간에 적절한 링크를 생성하도록 권장합니다; 링크는 콘덴츠 검색 용이성및 네비게이션을 개선하는데 도움을 주고, 구글과 같은 검색 엔진이 더 나은 검색결과를 제공하도록  중요한 콘텍스트를 제공 합니다. 모든 페이지는 단어나 구문에서 관련된 주제의 다른 페이지로 연결되는 좋은 링크집합을 가져야 합니다. 링크는 용어를 정의하거나 어떤 주제에 대한 상세하고 심화된 문서를 제공하는데에 모두 사용될 뿐만 아니라,  관련된 예제나 보다 관심이 갈만한 정보도 제공할 수도 있습니다.

- -

MDN내부의 문서(내부 링크)뿐만아니라 MDN 외부의 페이지(외부 링크)도 쉽게 링크를 걸 수 있습니다 .

- -

링크를 만드는 두 가지 방법이 있습니다:

- - - -

어떤 텍스트에 링크를 연결할 것인지에 대해, 몇가지 가이드라인을 소개합니다:

- - - -

URL 정책

- -

보안 때문에, 아래 스킴(schemes)을 사용한 링크만 생성할 수 있다:

- - - -

이 외의 것은 동작할 수도 아닐수도 있지만, 편집 스태프에 의해 지원되거나 삭제되지 않을 것이다.

- -
-

특별히,  about: 이나 chrome:// 스킴은 동작하지 않으므로 피해야 한다.

- -

유사하게 , javascript: 스킴도 jar:와 마찬가지로 대부분의 모던 브라우저에서 막혀있다

-
- -

페이지 태그

- -

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.

- -

You can find details on tagging in our How to properly tag pages guide.

- -

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

- -

Screenshot of the UX for adding and removing tags on MDN

- -

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 Enter (or Return) 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.

- -

To remove a tag, just click the little "×" icon in the tag.

- -

Tagging pages that need work

- -

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.

- -

Tagging obsolete pages

- -

Use the following tags for pages that are not current:

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

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.

- -

You can also use the {{TemplateLink("obsolete_header")}} macro to put a prominent banner on the topic.

-
-
Archive
-
-

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.

- -

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 NeedsUpdate tag, and add an explanation on the Talk page.)

- -

Pages with the Archive tag are eventually moved from the main content of MDN to the Archive section.

-
-
- -

SEO summary

- -

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

- -

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 "SEO summary" style in the WYSIWYG editor.

- -

Landing pages

- -

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

- -
    -
  1. 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.
    2. -
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. -
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. -
- -

Creating a page link list

- -

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

- -
<div class="row topicpage-table">
-  <div class="section">
-    ... left column contents ...
-  </div>
-  <div class="section">
-    ... right column contents ...
-  </div>
-</div>
- -

The left column should be a list of articles, with an <h2> 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 <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

- -

The right column should contain one or more of the following sections, in order:

- -
-
Getting help from the community
-
This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".
-
Tools
-
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".
-
Related topics
-
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
-
- -

{{TODO("Finish this once we finalize the landing page standards")}}

- -

Using and inserting images

- -

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical.

- -

To include an image:

- -
    -
  1. Before uploading your image, please ensure that it's as small as possible by using an image optiization tool. -
      -
    • For bitmap images (JPG or PNG), consider a tool such as ImageOptim (macOS), TinyPNG (web service), or Trimage (Linux).
      • -
    • For SVG images, use the svgo tool to optimize the SVG file before sending it. The default configuration is fine.
      • -
    -
    2. -
  2. 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.
    3. -
  3. Click the "insert image" button in the MDN documentation WYSIWYG editor.
    4. -
  4. In the WYSIWYG editor's drop-down list of attachments, select the newly created attachment that is your image.
    5. -
  5. Press the OK button.
    6. -
- -
-

Important: 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 does not verify whether or not you wish to save your work when it does so.

-
- -

Other references

- -

Preferred style guides

- -

If you have questions about usage and style not covered here, we recommend referring to the Microsoft Writing Style Guide—or, failing that, the Chicago Manual of Style. An unofficial crib sheet for the Chicago Manual of Style is available online.

- -

Preferred dictionary

- -

For questions of spelling, please refer to Dictionary.com. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use color rather than colour).

- -

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 MDN discussion forum, so we know what should be added.

- -

MDN-specific

- - - -

Language, grammar, spelling

- -

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

- - diff --git a/files/ko/mdn/guidelines/writing_style_guide/index.html b/files/ko/mdn/guidelines/writing_style_guide/index.html new file mode 100644 index 0000000000..507f30e228 --- /dev/null +++ b/files/ko/mdn/guidelines/writing_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 +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ko/docs/MDN")}}
+ +

정돈되고 일관적이며 읽기 쉬운 문서를 제공하고자, MDN 웹 문서 스타일 안내서는 글의 정렬, 철자, 서식 방법 등을 정리합니다. 이 가이드는 엄격한 규칙이라기보다 가이드라인입니다. 우리는 형식보다는 내용에 더 관심이 있습니다. 그러니 기여하기 전에 스타일 가이드를 배워야 한다는 부담을 느끼시지 않아도 됩니다. 하지만 나중에 다른 부지런한 지원자가 이 가이드를 따라 당신의 작업물을 편집할 수 있습니다. 만약 그런 일이 벌어지더라도 화내거나 놀라지 마세요.

+ +

이 가이드의 언어적 측면의 내용은 영문을 위주로 작성되었습니다. 기타 다른 언어는 언어만의 고유한 스타일 가이드를 가질 수 있으며, 새롭게 만드는 것도 좋습니다. 이 페이지들은 지역화 팀 페이지의 하위 페이지로 생성되어야 합니다.

+ +

MDN이 아닌 다른 사이트를 위해 쓰여진 콘텐츠를 적용하는 스타일 표준에 대한 내용은 One Mozilla 스타일 가이드를 참고하세요.

+ +

기본

+ +

아무리 방대한 문서화 스타일 가이드라도 가장 기본적인 텍스트 표준에서 시작하는 것이 좋습니다. 텍스트 표준은 일관된 문서화를 유지하는데 도움을 줍니다. 이어지는 섹션에서 도움이 될 만한 이런 기본들을 설명합니다.

+ +

페이지 제목

+ +

페이지 제목은 검색 결과에 사용되며, 페이지 상단의 페이지 이동 경로(breadcrumb) 목록에 페이지 계층 구조를 구성하는 데 사용됩니다. (페이지 상단과 검색 결과 상단에 표시되는) 페이지 제목은 페이지 "슬러그"와 다를 수 있습니다. "슬러그"는 페이지 URL의 일부로   "<locale>/docs/" 다음에 따라오는 부분입니다.

+ +

 제목과  섹션제목 대문자넣기(Capitalization)

+ +

페이지 타이틀과 섹션 제목은 헤드라인 스타일 대문자넣기보다는 (첫번째 단어와 필요한 명사만 대문자를 넣는 방식의)일반 문장 스타일 대문자넣기를 해야 합니다:

+ + + +

이런 스타일 규칙이 적용되기 전에 작성된 수많은 예전 문서들이 현재도 존재합니다. 자유롭게 해당 문서들을 수정해도 좋습니다. 우리는 점차적으로 스타일 규칙을 맞춰 나갈겁니다.

+ +

제목 및 슬러그(slug) 선택하기

+ +

페이지 슬러그는 짧게 만들어야 합니다. 새로운 레벨의 계층을 만들때, 그 레벨의 요소는 슬러그에서 한,두 단어로 표현되어야 합니다.

+ +

반면에, 페이지 제목은 ,합리적인 범위내에서, 당신이 원하는 만큼 길어도 됩니다. 그리고 구체적이어야 합니다.

+ +

신규 서브트리 생성하기

+ +

어떤 토픽이나 주제 영역에 대한 문서를 추가할 필요가 있다면, 당신이 선택할 일반적인 방법은 랜딩 페이지를 생성한 이후, 각각의 개별적인 문서의 서브페이지를 추가하는 것입니다. 랜딩 페이지는 토픽이나 기술을 설명하는 한두 개의 문단으로 시작한 이후, 각 페이지의 설명이 달린 서브페이지의 목록을 전달해야합니다. 우리가 개발한 몇가지 매크로로 페이지를 목록에 자동으로 삽입할 수 있습니다.

+ +

예를 들면 , 아래와 같이 구성된 자바스크립트 가이드를 생각해봅시다.

+ + + +

문서를 문서구조 최상층에 두는 것은 최대한 피해야 합니다. 이렇게 하면 사이트가 느려지며, 사이트 탐색과 네비게이션을 비효율적으로 만듭니다.

+ +
+

주목할 점: 문서 추가는 페이지 생성 권한이 필요합니다.

+
+ +

General article content guidelines

+ +

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.

+ +

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 How to write for SEO on MDN.

+ +

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.

+ +

Consider your audience

+ +

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.

+ +

Provide a useful summary

+ +

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.

+ +

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.

+ +
Example: Too short!
+ +

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.

+ +
CanvasRenderingContext2D.strokeText() draws a string.
+ +
Example: Too long!
+ +

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.

+ +

Instead, the summary should focus on the strokeText() method, and should refer to the appropriate guide where the other details are offered.

+ +
+

When called, the Canvas 2D API method CanvasRenderingContext2D.strokeText() 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.

+ +

The text is drawn using the context's current font as specified in the context's {{domxref("CanvasRenderingContext2D.font", "font")}} property.

+ +

The placement of the text relative to the specified coordinates are determined by the context's textAlign, textBaseline, and direction properties. textAlign controls the placement of the string relative to the X coordinate specified; if the value is "center", then the string is drawn starting at x - (stringWidth / 2), placing the specified X-coordinate in the middle of the string. If the value is "left", the string is drawn starting at the specified value of x. And if textAlign is "right", the text is drawn such that it ends at the specified X-coordinate.

+ +

(etc etc etc...)

+ +

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.

+ +

You can call the fillText() method to draw a string's characters as filled with color instead of only drawing the outlines of the characters.

+
+ +
Example: Much better!
+ +

Here we see a much better overview for the strokeText() method.

+ +
+

The {{domxref("CanvasRenderingContext2D")}} method strokeText(), part of the Canvas 2D API, 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.

+ +

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, Drawing text.

+
+ +

Include all relevant examples

+ +

More pages should have examples than not. The majority of pages probably deserve multiple examples, in fact.

+ +

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.

+ +

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.

+ +
Code Examples
+ +

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.

+ +

The text following each piece of code should explain anything relevant, using an appropriate level of detail.

+ + + +

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.

+ +

Overly-short articles are hard to find

+ +

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.

+ +

Sections, paragraphs, and newlines

+ +

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels.

+ +

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

+ +

Heading dos and donts

+ + + +

The Enter (or Return) 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 Shift key while pressing Enter.

+ +

Lists

+ +

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.

+ +

Bulleted lists

+ +

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.

+ +

An example of a correctly structured bulleted list:

+ +
+

In this example we should include:

+ + +
+ +

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.

+ +

Numbered lists

+ +

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.

+ +

An example of a correctly structured numbered list:

+ +
+

In order to correctly structure a numbered list, you should:

+ +
    +
  1. Open with a heading or brief paragraph to introduce the instructions. It's important to provide the user with context before beginning the instructions.
    2. +
  2. 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.
    3. +
  3. After you have finished your instructions, close off the numbered list with a brief summary or explanation of the expected outcome upon completion.
    4. +
+ +

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.

+
+ +

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.

+ +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
+

The "Note Box" style is used to call out important notes, like this one.

+
+ +
+

Similarly, the "Warning Box" style creates warning boxes like this.

+
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, ask for help in the MDN discussion forum.

+ +

Code sample style and formatting

+ +
+

Note: 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 Code sample guidelines.

+
+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code examples. Indent the code cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

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:

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

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names. (This uses the {{HTMLElement("code")}} element). For example: "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). The parentheses help differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the 'Syntax Highlighter' menu.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.

+ +
+

Note: Do not use the {{HTMLElement("code")}} element inside the {{HTMLElement("pre")}} block!

+ +

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.

+
+ +

The following example shows text with JavaScript formatting:

+ +
for (let i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+ +

If no appropriate language is available, use ("No Highlight" in the language menu). This will result in code without syntax highlighting:

+ +
x = 42;
+ +

Syntax definitions

+ +

When writing the syntax description section of a reference page, use the "Syntax Box" option in the "Styles" drop-down menu in the editor toolbar. This creates a specially-formatted box used specifically for syntax definitions, distinguishing them from other code blocks.

+ +

Blocks not referring to code

+ +

There are a few use cases where a <pre> block does not refer to code and doesn't have syntax highlighting nor line numbers. In such cases you should add a <pre> without a class attribute. Those cases include things like tree structures:

+ +
root/
+
+  folder1/
+    file1
+
+  folder2/
+    file2
+    file3
+
+ +

To create preformatted content without syntax highlighting and line numbers click the "pre" button in the toolbar. Then start to type the text.

+ +

Styling mentions of HTML elements

+ +

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.

+ +
+
Element names
+
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, enclose the name in angle brackets and use the "Inline Code" style (e.g., <title>).
+
Attribute names
+
Use "Inline Code" style to put attribute names in code font. Additionally, put them in bold face when the attribute is mentioned in association with an explanation of what it does, or the first time it's used in the article.
+
Attribute definitions
+
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.
+
Attribute values
+
Use the "Inline Code" style to apply <code> to attribute values, and don't use quotation marks around string values, unless needed by the syntax of a code sample.
+
For example: "When the type attribute of an <input> element is set to email or tel ..."
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

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.

+ +

Also, be sure that you 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.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

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 glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

"Versus", "vs.", and "v."

+ +

The contraction "vs." is preferred.

+ + + +

Capitalization

+ +

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

+ +
+

This guideline is a change from a previous version of this guide, so you may find many instances of "Web" and "Internet" on MDN.

+ +

Feel free to change these as you are making other changes, but editing an article just to change capitalization is not necessary.

+
+ +

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER." The only exception is that if you wish to abbreviate the name of the "Escape" key, you may use "ESC".

+ +

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:

+ + + +

Contractions

+ +

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.

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Gender-neutral language

+ +

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.
+
+ Let's take the following example:

+ +
+

A confirmation dialog appears, asking the user if he allows the Web page to make use of his Web cam.

+
+ +
+

A confirmation dialog appears, asking the user if she allows the Web page to make use of her Web cam.

+
+ +

Both versions are gender-specific. To fix this, use gender-neutral pronouns:

+ +
+

A confirmation dialog appears, asking the user if they allow the Web page to make use of their Web cam.

+
+ +
+

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.

+ +

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 "singular 'they.'"

+
+ +

You can use both genders:

+ +
+

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

+
+ +

Making the users plural:

+ +
+

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

+
+ +

The best solution, of course, is to rewrite and eliminate the pronouns:

+ +
+

A confirmation dialog appears, requesting the user's permission for web cam access.

+
+ +
+

A confirmation dialog box appears, which asks the user for permission to use the web cam.

+
+ +

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.

+ +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Apostrophes and quotation marks

+ +

Do not use "curly" quotes and quotation marks. On MDN, we only use straight quotes and apostrophes.

+ +

There are a couple of reasons for this.

+ +
    +
  1. We need to choose one or the other for consistency.
    2. +
  2. 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).
    3. +
+ + + +

Spelling

+ +

For words with variant spellings, always use their American English spelling.

+ +

In general, use the first entry at Dictionary.com, 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 look up "behaviour", you find the phrase "Chiefly British" followed by a link to the American standard form, "behavior". Do not use variant spellings.

+ + + +

Terminology

+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style.

+ +

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

+ + + +

Parameters vs. arguments

+ +

The preferred term on MDN is parameters. Please avoid the term "arguments" for consistency whenever possible.

+ +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

위키 마크업과 사용법

+ +

링크

+ +

링크는 위키를 강력한 배움과 가르침의 도구로 만드는 데 큰 역할을 합니다. 아래에서 관련한 기본적 정보를 찾을 수 있지만, 에디터 가이드에 있는 MDN에서 링크를 생성하고 편집하기 에서는 완전한 가이드를  볼 수 있습니다.

+ +

우리는 당신이 문서간에 적절한 링크를 생성하도록 권장합니다; 링크는 콘덴츠 검색 용이성및 네비게이션을 개선하는데 도움을 주고, 구글과 같은 검색 엔진이 더 나은 검색결과를 제공하도록  중요한 콘텍스트를 제공 합니다. 모든 페이지는 단어나 구문에서 관련된 주제의 다른 페이지로 연결되는 좋은 링크집합을 가져야 합니다. 링크는 용어를 정의하거나 어떤 주제에 대한 상세하고 심화된 문서를 제공하는데에 모두 사용될 뿐만 아니라,  관련된 예제나 보다 관심이 갈만한 정보도 제공할 수도 있습니다.

+ +

MDN내부의 문서(내부 링크)뿐만아니라 MDN 외부의 페이지(외부 링크)도 쉽게 링크를 걸 수 있습니다 .

+ +

링크를 만드는 두 가지 방법이 있습니다:

+ + + +

어떤 텍스트에 링크를 연결할 것인지에 대해, 몇가지 가이드라인을 소개합니다:

+ + + +

URL 정책

+ +

보안 때문에, 아래 스킴(schemes)을 사용한 링크만 생성할 수 있다:

+ + + +

이 외의 것은 동작할 수도 아닐수도 있지만, 편집 스태프에 의해 지원되거나 삭제되지 않을 것이다.

+ +
+

특별히,  about: 이나 chrome:// 스킴은 동작하지 않으므로 피해야 한다.

+ +

유사하게 , javascript: 스킴도 jar:와 마찬가지로 대부분의 모던 브라우저에서 막혀있다

+
+ +

페이지 태그

+ +

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.

+ +

You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

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 Enter (or Return) 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.

+ +

To remove a tag, just click the little "×" icon in the tag.

+ +

Tagging pages that need work

+ +

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.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ +
+
Junk
+
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.
+
Obsolete
+
+

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.

+ +

You can also use the {{TemplateLink("obsolete_header")}} macro to put a prominent banner on the topic.

+
+
Archive
+
+

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.

+ +

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 NeedsUpdate tag, and add an explanation on the Talk page.)

+ +

Pages with the Archive tag are eventually moved from the main content of MDN to the Archive section.

+
+
+ +

SEO summary

+ +

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

+ +

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 "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. 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.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left column should be a list of articles, with an <h2> 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 <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix chat rooms and mailing lists available on the topic. The heading should use the class "Community".
+
Tools
+
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".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

{{TODO("Finish this once we finalize the landing page standards")}}

+ +

Using and inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical.

+ +

To include an image:

+ +
    +
  1. Before uploading your image, please ensure that it's as small as possible by using an image optiization tool. +
      +
    • For bitmap images (JPG or PNG), consider a tool such as ImageOptim (macOS), TinyPNG (web service), or Trimage (Linux).
      • +
    • For SVG images, use the svgo tool to optimize the SVG file before sending it. The default configuration is fine.
      • +
    +
    2. +
  2. 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.
    3. +
  3. Click the "insert image" button in the MDN documentation WYSIWYG editor.
    4. +
  4. In the WYSIWYG editor's drop-down list of attachments, select the newly created attachment that is your image.
    5. +
  5. Press the OK button.
    6. +
+ +
+

Important: 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 does not verify whether or not you wish to save your work when it does so.

+
+ +

Other references

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Microsoft Writing Style Guide—or, failing that, the Chicago Manual of Style. An unofficial crib sheet for the Chicago Manual of Style is available online.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Dictionary.com. The spelling checker for this site uses American English. Please do not use variant spellings (e.g., use color rather than colour).

+ +

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 MDN discussion forum, so we know what should be added.

+ +

MDN-specific

+ + + +

Language, grammar, spelling

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git a/files/ko/mdn/kuma/index.html b/files/ko/mdn/kuma/index.html deleted file mode 100644 index becf84221a..0000000000 --- a/files/ko/mdn/kuma/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: '쿠마(Kuma): MDN 위키 플랫폼' -slug: MDN/Kuma -tags: - - MDN 메타 - - 시작하기 - - 쿠마 -translation_of: MDN/Kuma ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/ko/docs/MDN")}}
- -
쿠마(Kuma)는 MDN Web Docs를 작동시키는 Django 코드 입니다. 
- -

{{SubpagesWithSummaries}}

- -

Kuma와 함께해주세요. 

- -

함께 하고 싶다면 

- - 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 deleted file mode 100644 index fd8be5585d..0000000000 --- a/files/ko/mdn/structures/api_references/api_reference_sidebars/index.html +++ /dev/null @@ -1,114 +0,0 @@ ---- -title: API 레퍼런스의 사이드바 -slug: MDN/Structures/API_references/API_reference_sidebars -translation_of: MDN/Structures/API_references/API_reference_sidebars ---- -
{{MDNSidebar}}
- -

API 레퍼런스 문서에는 수정 가능한 사이드바 를 추가할 수 있습니다. 이 사이드바에 인터페이스, 튜토리얼, 혹은 API와 관련된 자료 링크를 노출합니다. 그 사용법을 설명합니다. 

- -

뭘 해야 하나요?

- -

사이드바 생성은 다음 세 단계로 나뉩니다. 

- -
    -
  1. API 레퍼런스 페이지를 만듭니다. 
    2. -
  2. KumaScript 레파지토리의 GroupData.json 데이터 파일에 그 API를 위한 엔트리를 추가합니다. 
    3. -
  3. 사이드바가 필요한 페이지에 \{{APIRef}} 메크로를 추가합니다.
    4. -
- -

Fetch API를 샘플로 삼아서 단계별로 살펴 보겠습니다. 

- -

신규 API 레퍼런스 페이지 만들기

- -

페이지에 사이드바를 추가하기 전에 여러분은 페이지를 만들어야 합니다. (자세한건 API 레퍼런스 문서에 필요한건 무엇일까요? 마이드 문서를 보세요)

- -

GroupData.json에 API의 엔트리를 추가하기

- -

GroupData.json 파일은 API 레퍼런스 문서의 사이드바 안에 담아야 하는 모든 데이타를 담고 있습니다. API를 파라미터로 주고 \{{APIRef}}메크로를 실행하면, GroupData.json에서 탐색해서 사이드바를 생성하고 페이지에 추가합니다. 

- -

GroupData.json에 엔트리를 추가하려면 다음을 따르세요.

- -
    -
  1. GitHub 계정이 필요합니다. 
    2. -
  2. KumaScript 레파지토리를 포크뜨고, 작업할 브랜치를 생성하고 로컬에 클론을 뜹니다. 
    3. -
  3. 생성한 브랜치로 체크아웃을 하고 작업후 오리진으로 푸시합니다. 
    4. -
  4. MDN 팀이 리뷰할 수 있도록 풀 리퀘스트를 날려주시고, 필요하다 생각이 들면 변경 요청을 주세요.
    5. -
- -

GitHub 사용법을 잘 모르겠으면 호환성 테이블 가이드 문서를 참고하세요. 자세한 내용이 있습니다. 

- -

GroupData.json은 KumaScript 레파지토리의 macros 폴더 안에 있습니다. 파일을 열어보면 API별로 자기 내용을 가진 거대한 JSON 구조체를 볼 수 있습니다. 키는 API명이고, 값은 사이드바 링크를 생성하기 위해 정의된 하위 멤버를 담은 객체입니다. 

- -

Fetch API 를 예로 들면 일치하는 GroupData.json의 엔트리가 다음과 같습니다. 

- -
"Fetch API": {
-    "overview":   [ "Fetch API"],
-    "interfaces": [ "Body",
-                    "Headers",
-                    "Request",
-                    "Response",
-                    "FetchController",
-                    "FetchObserver",
-                    "FetchSignal",
-                    "ObserverCallback" ],
-    "methods":    [ "WindowOrWorkerGlobalScope.fetch()" ],
-    "properties": [],
-    "events":     []
-},
-
- -

보다시피 키 명을 "Fetch API"으로 명명 하고 있고, 하위 멤버들을 담은 객체를 가지고 있습니다. 

- -

GroupData 엔트리에 담긴 하위 멤버들

- -

GroupData 엔트리에 추가할 수 있는 하위 멤버 목록입니다. 

- -

리스트업된 하위 멤버값 대부분은 링크걸 텍스트와 링크 생성을 위해 메인 API 색인 페이지(https://developer.mozilla.org/<language-code>/docs/Web/API) 끝에 추가될 슬러그입니다. 예를 들어 en-US 로케일에서 "Body"는 아래 링크를 만듭니다. 

- -
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API">Body</a></li>
-
- -

몇가지 예외가 있습니다.. 예를 들어 "guides" 하위 멤버는 가이드/튜토리얼 관련 링크를 정의할 하나이상의 링크 정보(타이틀과 슬러그)를 갖고 있는데, 이경우 슬러그는 MDN 어디든 추가될 수 있도록 MDN 문서 루트(https://developer.mozilla.org/<language-code>/docs)의 끝에 추가됩니다. 

- -

사용가능한 멤버들입니다. 로케일은 en-US로 가정합니다. 

- -
    -
  1. -

    "overview" — 값은 배열이고, API 오버뷰 문서의 슬러그입니다. 하나인 경우 "Fetch API"이면 다음 같은 링크를 만듭니다. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API.

    -
    2. -
  2. -

    "interfaces" — 해당 API의 인터페이스 전체 목록을 담은 배열 입니다. 값이 "Body"이면 다음 과 같은 링크를 만듭니다. https://developer.mozilla.org/en-US/docs/Web/API/Body.

    -
    3. -
  3. -

    "methods" — 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 https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch.

    -
    4. -
  4. -

    "properties" — 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 https://developer.mozilla.org/en-US/docs/Web/API/Headers/append.

    -
    5. -
  5. -

    "events" — 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 https://developer.mozilla.org/en-US/docs/Web/Events/animationstart.

    -
    6. -
  6. -

    "guides" — 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:

    - - 
    { "url":   "/docs/Web/API/Detecting_device_orientation",
-"title": "Detecting device orientation" }
    - -

    Creates a link with the title "Detecting device orientation", which points to https://developer.mozilla.org/en-US/docs/Web/API/Detecting_device_orientation.

    -
    7. -
- -

API Submembers and Tags

- -

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

- -

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.

- -

Further information about tag-based processing is available in the APIRef source.

- -

Inserting the sidebar in your pages

- -

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 WebVR API's sidebar is included in its pages with the following:

- -

\{{APIRef("WebVR API")}}

diff --git a/files/ko/mdn/structures/api_references/index.html b/files/ko/mdn/structures/api_references/index.html deleted file mode 100644 index c521b5f4ec..0000000000 --- a/files/ko/mdn/structures/api_references/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: API 레퍼런스 -slug: MDN/Structures/API_references -tags: - - API - - 가이드 - - 레퍼런스 - - 봉사 -translation_of: MDN/Structures/API_references ---- -
{{MDNSidebar}}
- -
{{IncludeSubnav("/en-US/docs/MDN")}}
- -

웹에서 사용 가능한 기술 중 클라이언트 측 자바스크립트 API가 차지하는 비중은 상당히 높습니다. 그렇기 때문에, MDN은 API의 기능과 사용법을 설명하는 광범위한 참조 자료를 보유하고 있습니다. 이 안내 문서는 이런 API 참고 자료를 MDN에 생성하는 방법을 설명합니다. 

- -

사전 준비

- -

API를 문서화 하려면 다음이 가능해야 합니다. 

- -
    -
  1. 최종 버전의 스팩: 그 API를 다루는 스팩의 단계가 W3C 최종 권고안인지, 초안인지는 관계없지만, 최종 버전의 스팩을 참조해야 합니다.  보통은 웹에서 쉽게 검색할 수 있으며, 그 스팩의 모든 버전의 문서에는 보통 최종 버전으로의 링크가 "lastest draft"등의 제목으로 걸려있습니다. 
    2. -
  2. 최신 모던 브라우저: 여러분이 문서화할 기능들은 정식 버전이 아닌 파이어폭스 나이틀리/크롬 카나리와 같은 실험 버전에서 지원할 가능성이 높습니다. 앞서가는 실험적인 API를 문서화 한다면 더욱 이런 버전의 브라우저를 사용해야 합니다. 
    3. -
  3. 데모/블로그 글/다른 정보: 가능하면 최대한 정보를 찾아보세요. 그 API가 어떻게 동작하는지 스스로 익숙히는 좋은 출발점이 됩니다. 주 인터페이스, 프로퍼티, 메서드가 무엇인지, 주요한 유즈 케이스가 어떻게 되는지 배우고, 어떻게 그 기능을 간단시 서술할지 고민하세요. 
    4. -
  4. 기술문의 활용: API 표준화에 참여했거나 브라우저에서 그 스팩을 구현한 누군가에게 기술문의를 할 수 있는 나만의 연락처를 찾을 수 있다면 정말 좋습니다. 다음을 참고하세요. -
      -
    • 관련 업무를 보는 회사에서 근무한다면 사내 주소록
      • -
    • 그 API에 대한 토론 채널에 참여한 공개 메일링 리스트. 모질라의 dev-platform, dev-webapi 목록, public-webapps 같은 W3C 목록 참고
      • -
    • 스팩 문서. 예를 들면 Web Audio API 문서 상단에는 저자들의 연락처가 있음.
      • -
    -
    5. -
- -

문서 구조

- -
-
API 레퍼런스 문서에 필요한 것은 무엇일까요? 
-
이 문서는 완벽한 API 레퍼런스 문서에 필요한 것들을 설명합니다. 
-
페이지 타입
-
MDN에서 반복적으로 사용되는 페이지 타입들이 있습니다. 이 문서는 그 타입들의 목적을 설명하고 신규 문서를 만들때 사용할 수 있는 템플릿 예제를 제공합니다. 
-
- -

페이지의 기능

- -

API 레퍼런스 문서를 위한 페이지 기능을 생성하는 방법을 설명합니다. 

- -
-
API 레퍼런스 사이드바
-
작성한 MDN API 레퍼런스 문서에 사이드바를 추가할 때, 여러분은 API와 관련된 인터페이스 튜토리얼, 다른 자료 링크를 맘대로 출력할 수 있습니다. 이 문서는 그 방법을 설명합니다. 
-
API 문법 섹션
-
MDN 참조 문서에서 문법 섹션은 그 기능이 가지고 있는 정확한 문법을 기술한 박스형태를 띄고 있다. (어떤 매개변수가 사용가능한지, 어떤 것이 옵션인지 등) 그 문서는 레퍼런스 문서를 위한 문법 섹션 작성법에 대해 설명합니다. 
-
예제 코드
-
웹 플랫폼 기능 사용법을 설명하는 페이지에는 어김없이 많은 예제 코드가 있습니다. 이 문서는 페이지에 예제 코드를 추가하기 위한 각각의 가능한 메카니즘을 기술합니다. 무엇을 언제 사용해야 하는지도 함께요.
-
스펙 테이블
-
MDN의 모든 레퍼런스 페이지는 API나 기술이 정의된 스팩, 또는 그 스팩에 대한 정보를 제공해야 합니다. 이 문서는 테이블의 형태와 제작 방법을 설명합니다. 
-
호환성 테이블
-
MDN은 오픈 웹 문서, 즉 모든 브라우저에서 공유되는 DOM, HTML, CSS, JavaScript, SVG 등과 같은 기술 문서를 위한 호환성 테이블 표준을 가지고 있습니다. 이 문서는 호환성 데이터를 MDN 페이지에 추가하는 기능 사용법을 다룹니다. 
-
diff --git "a/files/ko/mdn/tools/\355\216\230\354\235\264\354\247\200_\354\236\254\354\203\235\354\204\261/index.html" "b/files/ko/mdn/tools/\355\216\230\354\235\264\354\247\200_\354\236\254\354\203\235\354\204\261/index.html" deleted file mode 100644 index 2b75d2508f..0000000000 --- "a/files/ko/mdn/tools/\355\216\230\354\235\264\354\247\200_\354\236\254\354\203\235\354\204\261/index.html" +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 페이지 재생성 -slug: MDN/Tools/페이지_재생성 -tags: - - Guide - - MDN Meta - - Page-level - - Tools -translation_of: MDN/Tools/Page_regeneration ---- -
{{MDNSidebar}}

MDN 사이트는 성능상의 이유로 페이지를 캐시합니다. 그 결과, 당신이 페이지에 저장한 변경 사항이 다음 번 페이지 새로 고침할 때 나타나지 않을 수 있습니다. 자주, 항상은 아니지만, 배너가 페이지 업데이트가 진행 중임을 알리는 페이지에 나타납니다. 당신은 서버에서 페이지를 새로 고침하기 위해 브라우저에 "강제 새로 고침"을 할 수 있지만, 이는 서버의 업데이트가 끝나지 않았다면 효과가 없을 지도 모릅니다.

- -

일부 페이지(특히 첫방문landing 페이지)는 자동으로 생성하고 콘텐츠를 업데이트하기 위해 매크로를 사용합니다. 첫방문 페이지의 경우, 매크로는 글쓴이가 손수 추가할 필요 없이 새 글이 자동으로 페이지에 나열되게 합니다. 이는 오랜 공헌자에게는 편리하고, 새로 온 이들은 사이트 계층구조에 자신의 글을 링크하는 법을 모르기에 그들의 작업을 셔플에서 잃는 것을 막는 데 도움이 됩니다.

- -

이는 (예를 들어, {{TemplateLink("Page")}} 매크로를 써서) 한 페이지의 콘텐츠를 다른 페이지로 삽입(transcluding)할 때도 사용할 수 있습니다.

- -

MDN은 성능상의 이유로 렌더링된 콘텐츠를 캐시하기 때문에, (매크로 출력이나 삽입transcluded 페이지 같은) 원 저작물(source material)에 더해진 변경 사항은 자동으로 페이지에 반영되지 않습니다. 그러한 원 저작물에 자주 변경이 예상되는 경우, 자동 페이지 재생성 활성화를 고려할 수 있습니다.

- -

자동 재생성을 활성화하기 위해서:

- -
    -
  1. 편집 모드 진입을 위해 페이지 상의 편집 버튼 클릭.
    2. -
  2. 페이지 제목 아래, 페이지 제목 근처에 위치한 페이지 제목과 속성 편집 클릭. 페이지 메타데이터 필드가 나타남.
    3. -
  3. 렌더링 최대 수명값을 설정. 이 값은 캐시된 페이지의 매크로 재실행을 포함하여, 재빌드되는 일정을 결정합니다. 보통, 우리는 여기에 4내지 8시간을 사용합니다. 기술의 문서화가 빠르게 바뀌는 경우, 더 작은 수를 선택할 수 있습니다.
    4. -
  4. 페이지에 변경 사항을 저장. 리비전 코멘트에 "렌더링 최대 수명을 4시간으로 설정"과 같이, 당신이 작업한 내용을 설명하는 것은 좋은 습관입니다. 
    5. -
- -

페이지는 당신이 지정한 일정대로 자동으로 재성성됩니다.

- -
-

주의: "페이지 제목과 속성 편집" 옵션은 새 페이지를 만들 때는 이용할 수 없습니다. 첫 번째 저장 이후로 편집기를 다시 열어야 합니다.

-
- -

 

diff --git a/files/ko/mdn/user_guide/index.html b/files/ko/mdn/user_guide/index.html deleted file mode 100644 index eec139e803..0000000000 --- a/files/ko/mdn/user_guide/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: MDN 사용자 가이드 -slug: MDN/User_guide -tags: - - 모질라 개발자 네트워크 - - 사용자 가이드 -translation_of: MDN/Tools -translation_of_original: MDN/User_guide ---- -
{{MDNSidebar}}

모질라 개발자 네트워크 (이하 MDN) 사이트는, (파이어폭스 및 파이어폭스 운영체제 개발자 뿐 아니라) 웹 개발자를 위한 문서 및 샘플 코드를 찾고, 읽고, 기여하는 고급 시스템입니다. MDN 사용자 가이드는 필요한 문서를 찾도록 MDN을 이용하는 방법을, 원한다면 좀 더 좋은, 더 광범위하고, 더 완전한 자료를 만들도록 돕는 방법을 열거하는 항목을 제공합니다.

- -

{{LandingPageListSubpages}}

diff --git a/files/ko/mdn/yari/index.html b/files/ko/mdn/yari/index.html new file mode 100644 index 0000000000..becf84221a --- /dev/null +++ b/files/ko/mdn/yari/index.html @@ -0,0 +1,26 @@ +--- +title: '쿠마(Kuma): MDN 위키 플랫폼' +slug: MDN/Kuma +tags: + - MDN 메타 + - 시작하기 + - 쿠마 +translation_of: MDN/Kuma +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ko/docs/MDN")}}
+ +
쿠마(Kuma)는 MDN Web Docs를 작동시키는 Django 코드 입니다. 
+ +

{{SubpagesWithSummaries}}

+ +

Kuma와 함께해주세요. 

+ +

함께 하고 싶다면 

+ + diff --git a/files/ko/mdn_at_ten/index.html b/files/ko/mdn_at_ten/index.html deleted file mode 100644 index d4883ca7cd..0000000000 --- a/files/ko/mdn_at_ten/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: MDN at 10 -slug: MDN_at_ten -tags: - - MDN - - MDN 메타 - - MDN 변천 - - 역사 - - 출발 -translation_of: MDN_at_ten ---- - - -
-
-

MDN의 역사

- -

2005년, 이상주의자들로 이루어진 작은 팀은 웹 개발자들을 위한 새롭고 무료이며 협력으로 만들어진 온라인 리소스를 만들었습니다. 그들의 뛰어난, 그러나 색다른 아이디어는 오늘날의 오픈 웹 기술자들을 위한 최고의 리소스인 Mozilla 개발자 네트워크로 성장되었습니다. 10년뒤, 우리의 세계적 커뮤니티는 역대 최고이며, 우리는 여전히 함께 문서를 만들고 코드를 작성하며 오픈 웹을 현재와 같이 강력하게 만들어주는 CSS, HTML, 자바스크립트 등과 같은 오픈 웹 기술자들을 위한 리소스들을 배웁니다.

- -

더 알아보기about the history

- - -

MDN에 공헌하기

- -

10년동안 MDN 커뮤니티는 오픈 웹을 기록해왔습니다. 간단한 오탈자 수정에서부터 새로운 API의 전체를 작성하는 것까지, 모두가 무언가를 제공했고, 어떠한 기여도 적지 않았습니다. 우리는 Mozillians의 뛰어난 맴버들이 작성하거나 번역한 9만 페이지 이상의 자료들이 있습니다. 당신도 그중 하나가 될 수 있습니다.

- -

더 알아보기about contributing

- -

 

- -

 

-
- -
{{TenthCampaignQuote}}
- -

추가정보

- -
    -
  1. MDN 10주년
    2. -
  2. MDN의 역사
    3. -
  3. MDN에 기여하기
    4. -
-
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 deleted file mode 100644 index d6d933b22e..0000000000 --- a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/contexttype/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: menus.ContextType -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/ContextType -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/ContextType ---- -
{{AddonSidebar()}}
- -

메뉴 항목이 나타나게 하는 콘텍스트들.

- -

자료형

- -

이 자료형의 값은 문자열이다. 항목은 주어진 콘텍스트일 때 표시된다. 가능한 값은:

- -
-
all
-
'all'은 'bookmark', 'tab' 그리고 'tools_menu'를 뺀 나머지 모든 콘텍스트를 다 나열한 것과 같다.
-
audio
-
audio 요소를 콘텍스트-클릭할 때 적용된다. (역주: 콘텍스트-클릭은 보통 마우스 오른쪽 버튼을 클릭하는 것이다)
-
bookmark
-
툴바나 메뉴에서 북마크 항목을 콘텍스트-클릭할 때 적용된다. 현재 북마크 사이드바나 라이브러리 윈도우 항목에서는 동작하지 않는다. manifest에 "bookmarks" API 권한이 있어야 한다.
-
browser_action
-
브라우저 액션에서 콘텍스트-클릭을 할 때 적용된다. 최대로 추가할 수 있는 최상위 브라우저 액션 콘텍스트 매뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.
-
editable
-
편집 가능한 요소, 가령은 textarea를 콘텍스트-클릭할 때 적용된다.
-
frame
-
내포된 iframe을 콘텍스트-클릭할 때 적용된다.
-
image
-
이미지를 콘텍스트-클릭할 때 적용된다.
-
link
-
링크를 콘텍스트-클릭할 때 적용된다.
-
page
-
페이지를 콘텍스트-클릭할 때 적용된다. 단, 페이지의 다른 콘텍스트가 적용되지 않을 때만이다(예를 들면, 클릭이 이미지나 내포된 iframe 또는 링크가 아니여야 한다).
-
page_action
-
페이지 액션을 콘텍스트-클릭할 때 적용된다. 최대로 추가할 수 있는 최상위 페이지 액션 콘텍스트 메뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.
-
password
-
password 입력 요소를 콘텍스트-클릭할 때 적용된다.
-
selection
-
페이지 일부가 선택되었을 때 적용된다.
-
tab
-
-

탭을 콘텍스트-클릭할 때 적용된다(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).

- -

파이어폭스 63부터, 탭에서 메뉴 항목을 클릭하면 그것이 설사 현재탭이 아니더라도 클릭한 탭에 대해 activeTab 권한이 승인된다.

-
-
tools_menu
-
항목은 브라우저 툴바의 메뉴로 추가된다. 주의해야 할 것은 menus 이름공간을 통해 ContextType에 접근해야지 contextMenus 이름공간으로 하면 안된다.
-
video
-
video 요소에 콘텍스트-클릭을 할 때 적용된다.
-
- -

"launcher"는 지원되지 않는다.

- -

브라우저 호환성

- - - -

{{Compat("webextensions.api.menus.ContextType", 10)}}

- -

{{WebExtExamples}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

-
- - 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 deleted file mode 100644 index 9a053e6639..0000000000 --- a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/create/index.html +++ /dev/null @@ -1,212 +0,0 @@ ---- -title: menus.create() -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/create -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/create ---- -
{{AddonSidebar()}}
- -

주어진 객체대로 새 메뉴 항목을 만든다.

- -

이 함수는 다른 비공기 함수들과 달리 promise가 아니라 새 항목의 ID를 반환한다. 성공과 실패에 대한 처리는 필요하면 콜백으로 한다.

- -

다른 브라우저와의 호환성을 위해, menus 이름공간 뿐 아니라 contextMenus 이름공간으로도 이 메소드를 사용할 수 있다. 하지만 contextMenus로는 툴 메뉴 항목(contexts: ["tools_menu"])은 만들 수 없다.

- -

문법

- -
browser.menus.create(
-  createProperties, // object
-  function() {...}  // optional function
-)
-
- -

매개변수

- -
-
createProperties
-
object. 새 메뉴 항목의 속성들
-
-
-
checked {{optional_inline}}
-
boolean. checkbox나 radio 항목의 초기값: 선택은 true, 선택이 아니면 false. radio 항목이라면 그룹 중에서 하나만 선택된 것으로 할 수 있다.
-
command {{optional_inline}}
-
-

string. 클릭 했을 때 수행할 동작을 기술한다. 가능한 값은:

- -
    -
  • "_execute_browser_action": 확장의 브라우저 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.
    • -
  • "_execute_page_action": 확장의 페이지 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.
    • -
  • "_execute_sidebar_action": 확장의 사이드바를 연다.
    • -
- -

항목을 클릭하면 여전히 {{WebExtAPIRef("menus.onClicked")}} 이벤트도 발생한다. 어느게 먼저 인지는 보장되지 않지만 onClicked이 발생하기 전에 명령이 실행될 것이다.

-
-
contexts {{optional_inline}}
-
-

{{WebExtAPIRef('menus.ContextType')}}의 배열. 메뉴 항목이 표시할 콘텍스트의 배열. 생략되면:

- -
    -
  • 상위 항목에 콘텍스트가 설정되었으면 그걸 물려받는다.
    • -
  • 아니면, 항목은 ["page"]로 설정된다.
    • -
-
-
documentUrlPatterns {{optional_inline}}
-
string의 배열. 메뉴 항목의 표시를 URL이 주어진 match patterns과 일치하는 문서로 제한한다. 프레임에도 적용된다.
-
enabled {{optional_inline}}
-
boolean. 메뉴 항목이 사용 가능한지 아닌지를 지정한다. 기본값은 true.
-
icons {{optional_inline}}
-
-

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

- - 
"icons": {
-      "16": "path/to/geo-16.png",
-      "32": "path/to/geo-32.png"
-    }
- -

Alternatively, you can specify a single SVG icon, and it will be scaled appropriately:

- - 
"icons": {
-      "16": "path/to/geo.svg"
-    }
- -
-

Note: The top-level menu item uses the icons specified in the manifest rather than what is specified with this key.

-
-
-
id {{optional_inline}}
-
string. The unique ID to assign to this item. Mandatory for event pages. Cannot be the same as another ID for this extension.
-
onclick {{optional_inline}}
-
function. 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')}}.
-
parentId {{optional_inline}}
-
integer or string. 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.
-
targetUrlPatterns {{optional_inline}}
-
string의 배열. documentUrlPatterns 비슷한데, anchor 태그의 href 속성과 img/audio/video 태그의 src 속성에 기초해 걸러지는 것이다. 여기서 URL scheme는 뭐라도 상관없다. 설사 match pattern으로 보통은 허용되지 않는 것이라도 된다.
-
title {{optional_inline}}
-
-

string. The text to be displayed in the item. Mandatory unless type is "separator".

- -

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

- -

If the title contains an ampersand "&" 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:

- -
    -
  • If the next character is also an ampersand: then a single ampersand will be displayed and no access key will be set. In effect, "&&" is used to display a single ampersand.
    • -
  • If the next characters are the interpolation directive "%s": then the ampersand will not be displayed and no access key will be set.
    • -
  • If the ampersand is the last character in the title: then the ampersand will not be displayed and no access key will be set.
    • -
- -

Only the first ampersand will be used to set an access key: subsequent ampersands will not be displayed but will not set keys. So "&A and &B" will be shown as "A and B" and set "A" as the access key.

-
-
type {{optional_inline}}
-
{{WebExtAPIRef('menus.ItemType')}}. The type of menu item: "normal", "checkbox", "radio", "separator". Defaults to "normal".
-
visible {{optional_inline}}
-
boolean. Whether the item is shown in the menu. Defaults to true.
-
-
-
callback {{optional_inline}}
-
function. Called when the item has been created. If there were any problems creating the item, details will be available in {{WebExtAPIRef('runtime.lastError')}}.
-
- -

Return value

- -

integer or string. The ID of the newly created item.

- -

브라우저 호환성

- - - -

{{Compat("webextensions.api.menus.create", 10)}}

- -

예제

- -

이 예제는 페이지에 선택된 텍스트가 있을 때 표시되는 콘텍스트 메뉴 항목을 만든다. 동작은 선택된 텍스트를 콘솔에 로그로 남기는 것이다:

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

이 예제는 두 개의 radio 항목을 추가한다. 선택해서 테두리의 색을 녹색이나 청색으로 할 수 있다. 이 예제는 activeTab 권한이 필요하다.

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

{{WebExtExamples}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

-
- - 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 deleted file mode 100644 index 7cb70b5fa7..0000000000 --- a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/gettargetelement/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: menus.getTargetElement() -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/getTargetElement -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/getTargetElement ---- -
{{AddonSidebar}}{{Draft}}
- -

주어진 targetElementId에 해당하는 요소를 돌려준다.

- -

이 함수는 오직 클릭된 요소가 있는 문서에서만 동작한다. so everywhere but in the background page.

- -

문법

- -
let elem = browser.menus.getTargetElement(targetElementId);
-
- -

파라메터

- -
-
targetElementId
-
{{WebExtAPIRef("menus.onClicked")}} 핸들러 또는 {{WebExtAPIRef("menus.onShown")}} 이벤트에 전달된 {{WebExtAPIRef("menus.OnClickData")}} 객체의 속성
-
- -

반환값

- -

targetElementId로 참조되는 요소를 반환한다. targetElementId가 유효하지 않으면 null를 반환한다.

- -

예제

- -

아래 예제는 인수로 전달된 info.targetElementId 값으로 요소를 구하고, 그것을 지운다. 하지만 getTargetElement는 요소가 있는 문서에서만 동작하므로 문서가 있는 탭에 스크립트를 주입하는 형태로 처리하고 있다. 

- -
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();`,
-    });
-  },
-});
-
- -

{{WebExtExamples}}

- -

브라우저 호환성

- - - -

{{Compat("webextensions.api.menus.getTargetElement")}}

- -

같이 보기

- - diff --git a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html b/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html deleted file mode 100644 index 58f5af938b..0000000000 --- a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: contextMenus -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus -translation_of: Mozilla/Add-ons/WebExtensions/API/menus ---- -
{{AddonSidebar}}
- -

브라우저의 메뉴 시스템에 항목을 추가한다.

- -

이 API는 크롬의 "contextMenus" API를 모델로 했다. 크롬 확장앱이 브라우저의 콘텍스트 메뉴에 항목을 추가하는 API인데, 파이어폭스의 browser.menus API는 여기에 몇 가지 특징을 더했다.

- -

파이어폭스 55 이전에 이 API의 원래 이름은 contextMenus였고, 지금도 이 이름은 별명으로 유지되므로 다른 브라우저에서도 동작하는 코드를 작성한다면 contextMenus를 사용할 수 있다.

- -

이 API를 사용하려면 'menus'  권한이 필요하다. menus 대신에 contextMenus를 사용해도 된다. contextMenus를 사용했으면 API도 browser.contextMenus를 써야 한다.

- -

콘텐트 스크립트에서는 menus.getTargetElement()만 사용할 수 있다.

- -

메뉴 항목 만들기

- -

메뉴 항목을 만들려면 {{WebExtAPIRef("contextMenus.create()")}} 메소드를 호출한다. 인수로 항목의 ID, 종류, 어떤 콘텍스트일 때 표시되는지 등이 포함된 객체를 전달한다.

- -

항목의 클릭을 처리하려면 {{WebExtAPIRef("contextMenus.onClicked")}} 이벤트에 리스너를 추가한다. 리스너는 상세한 이벤트 정보를 담고 있는{{WebExtAPIRef("contextMenus.OnClickData")}} 객체를 받는다.

- -

콘텍스트 메뉴는 네 종류다. create()에 주어지는 type 속성으로 지정한다:

- - - -

메뉴 항목을 하나 이상 만들면 그 항목들은 서버메뉴로 표시되고, 상위메뉴의 라벨은 확장의 이름이 된다. 예를 들어, "Menu demo"라는 확장이 있고, 그것이 두 개의 콘텍스트 메뉴 항목을 추가했다면:

- -

- -

아이콘

- -

"icons" manifest 키로 확장이 아이콘을 가졌으면,  콘텍스트 메뉴 항목은 라벨 옆에 아이콘을 함께 표시한다. 보통의 경우 16x16 픽셀이 표시되고, 고해상도이면 32x32 픽셀의 아이콘이 표시된다.

- -

- -

서버메뉴에 대해서만 {{WebExtAPIRef("menus.create()")}}에 icons 옵션을 전달해서 아이콘을 지정할 수 있다.

- -

- -

예제

- -

아래 콘텍스트 메뉴에는 4개 항목이 있다: 보통 항목 하나, 위-아래가 구분선인 두 개의 라디오 항목, 그리고 체크박스 항목 하나다. 라디오 항목에는 따로 아이콘이 지정되었다.

- -

이 서버메뉴는 아래 코드로 만들 수 있다:

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

타입

- -
-
{{WebExtAPIRef("contextMenus.ContextType")}}
-
메뉴가 표시되게 하는 여러 콘텍스트. 가능한 값은: "all", "audio", "browser_action", "editable", "frame", "image", "link", "page", "page_action", "password", "selection", "tab", "video".
-
{{WebExtAPIRef("contextMenus.ItemType")}}
-
메뉴 항목의 종류: "normal", "checkbox", "radio", "separator".
-
{{WebExtAPIRef("contextMenus.OnClickData")}}
-
메뉴 항목이 클릭됐을 때 보내지는 정보.
-
- -

속성

- -
-
{{WebExtAPIRef("contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT")}}
-
최상위에 추가할 수 있는 ContextType이 "browser_action"이나 "page_action"인 메뉴 항목의 최대 수량.
-
- -

함수

- -
-
{{WebExtAPIRef("contextMenus.create()")}}
-
새 콘텍스트 메뉴 항목을 만든다.
-
{{WebExtAPIRef("contextMenus.update()")}}
-
전에 만든 콘텍스트 메뉴 항목을 갱신한다.
-
{{WebExtAPIRef("contextMenus.remove()")}}
-
콘텍스트 메뉴 항목을 지운다.
-
{{WebExtAPIRef("contextMenus.removeAll()")}}
-
확자앱에 추가된 모든 콘텍스트 메뉴 항목을 지운다.
-
- -

이벤트

- -
-
{{WebExtAPIRef("contextMenus.onClicked")}}
-
콘텍스트 메뉴 항목이 클릭하면 발생한다.
-
- -

브라우저 호환성

- -

{{ Compat("webextensions.api.menus", 1, "true") }}

- -

{{WebExtExamples("h2")}}

- -
Acknowledgements - -

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

-
- - 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 deleted file mode 100644 index 1fd716e3bb..0000000000 --- a/files/ko/mozilla/add-ons/webextensions/api/contextmenus/onshown/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: menus.onShown -slug: Mozilla/Add-ons/WebExtensions/API/contextMenus/onShown -translation_of: Mozilla/Add-ons/WebExtensions/API/menus/onShown ---- -
{{AddonSidebar()}}
- -

Fired when the browser has shown a menu.

- -

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 onShown handler and then call {{WebExtAPIRef("menus.refresh()")}} to update the menu itself.

- -

The handler can add, remove, or update menu items.

- -

For example, the menu-labelled-open 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 onShown and refresh() to annotate the menu item with the hostname for the link, so the user can easily see where they will go before they click.

- -

Note that an extension should not take too much time before calling refresh(), or the update will be noticeable to the user.

- -

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 host permission for it.

- -

If the onShown 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:

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

Note that it is possible to call menus API functions synchronously, and in this case you don't have to perform this check:

- -
browser.menus.onShown.addListener(async function(info, tab) {
-  browser.menus.update(menuId, ...);
-   // Note: Not waiting for returned promise.
-  browser.menus.refresh();
-});
- -

However, if you call these APIs asynchronously, then you do have to perform the check:

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

Firefox makes this event available via the contextMenus namespace as well as the menus namespace.

- -

문법

- -
browser.menus.onShown.addListener(listener)
-browser.menus.onShown.removeListener(listener)
-browser.menus.onShown.hasListener(listener)
-
- -

Events have three functions:

- -
-
addListener(listener)
-
Adds a listener to this event.
-
removeListener(listener)
-
Stop listening to this event. The listener argument is the listener to remove.
-
hasListener(listener)
-
Check whether listener is registered for this event. Returns true if it is listening, false otherwise.
-
- -

addListener syntax

- -

매개변수

- -
-
callback
-
-

Function that will be called when this event occurs. The function will be passed the following arguments:

- -
-
info
-
-

Object. This is just like the {{WebExtAPIRef('menus.OnClickData')}} object, except it contains two extra properties:

- -
    -
  • contexts: an array of all the {{WebExtAPIRef("menus.ContextType", "contexts")}} that are applicable to this menu.
    • -
  • menuIds: an array of IDs of all menu items belonging to this extension that are being shown in this menu.
    • -
- -

Compared with menus.OnClickData, the info object also omits the menuItemId and modifiers properties, because of course these are not available until a menu item has been selected.

- -

The contexts, menuIds, frameId, and editable properties are always provided. All the other properties in info are only provided if the extension has the host permission for the page.

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

브라우저 호환성

- - - -

{{Compat("webextensions.api.menus.onShown", 10)}}

- -

예제

- -

This example listens for the context menu to be shown over a link, then updates the openLabelledId menu item with the link's hostname:

- -
function updateMenuItem(linkHostname) {
-  browser.menus.update(openLabelledId, {
-    title: `Open (${linkHostname})`
-  });
-  browser.menus.refresh();
-}
-
-browser.menus.onShown.addListener(info => {
-  if (!info.linkUrl) {
-    return;
-  }
-  let linkElement = document.createElement("a");
-  linkElement.href = info.linkUrl;
-  updateMenuItem(linkElement.hostname);
-});
-
- -

{{WebExtExamples}}

diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/contexttype/index.html new file mode 100644 index 0000000000..d6d933b22e --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/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 +--- +
{{AddonSidebar()}}
+ +

메뉴 항목이 나타나게 하는 콘텍스트들.

+ +

자료형

+ +

이 자료형의 값은 문자열이다. 항목은 주어진 콘텍스트일 때 표시된다. 가능한 값은:

+ +
+
all
+
'all'은 'bookmark', 'tab' 그리고 'tools_menu'를 뺀 나머지 모든 콘텍스트를 다 나열한 것과 같다.
+
audio
+
audio 요소를 콘텍스트-클릭할 때 적용된다. (역주: 콘텍스트-클릭은 보통 마우스 오른쪽 버튼을 클릭하는 것이다)
+
bookmark
+
툴바나 메뉴에서 북마크 항목을 콘텍스트-클릭할 때 적용된다. 현재 북마크 사이드바나 라이브러리 윈도우 항목에서는 동작하지 않는다. manifest에 "bookmarks" API 권한이 있어야 한다.
+
browser_action
+
브라우저 액션에서 콘텍스트-클릭을 할 때 적용된다. 최대로 추가할 수 있는 최상위 브라우저 액션 콘텍스트 매뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.
+
editable
+
편집 가능한 요소, 가령은 textarea를 콘텍스트-클릭할 때 적용된다.
+
frame
+
내포된 iframe을 콘텍스트-클릭할 때 적용된다.
+
image
+
이미지를 콘텍스트-클릭할 때 적용된다.
+
link
+
링크를 콘텍스트-클릭할 때 적용된다.
+
page
+
페이지를 콘텍스트-클릭할 때 적용된다. 단, 페이지의 다른 콘텍스트가 적용되지 않을 때만이다(예를 들면, 클릭이 이미지나 내포된 iframe 또는 링크가 아니여야 한다).
+
page_action
+
페이지 액션을 콘텍스트-클릭할 때 적용된다. 최대로 추가할 수 있는 최상위 페이지 액션 콘텍스트 메뉴 항목의 수는 {{WebExtAPIRef("menus.ACTION_MENU_TOP_LEVEL_LIMIT")}}지만 서버메뉴에는 얼마든지 추가할 수 있다.
+
password
+
password 입력 요소를 콘텍스트-클릭할 때 적용된다.
+
selection
+
페이지 일부가 선택되었을 때 적용된다.
+
tab
+
+

탭을 콘텍스트-클릭할 때 적용된다(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).

+ +

파이어폭스 63부터, 탭에서 메뉴 항목을 클릭하면 그것이 설사 현재탭이 아니더라도 클릭한 탭에 대해 activeTab 권한이 승인된다.

+
+
tools_menu
+
항목은 브라우저 툴바의 메뉴로 추가된다. 주의해야 할 것은 menus 이름공간을 통해 ContextType에 접근해야지 contextMenus 이름공간으로 하면 안된다.
+
video
+
video 요소에 콘텍스트-클릭을 할 때 적용된다.
+
+ +

"launcher"는 지원되지 않는다.

+ +

브라우저 호환성

+ + + +

{{Compat("webextensions.api.menus.ContextType", 10)}}

+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

+
+ + diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/create/index.html new file mode 100644 index 0000000000..9a053e6639 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/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 +--- +
{{AddonSidebar()}}
+ +

주어진 객체대로 새 메뉴 항목을 만든다.

+ +

이 함수는 다른 비공기 함수들과 달리 promise가 아니라 새 항목의 ID를 반환한다. 성공과 실패에 대한 처리는 필요하면 콜백으로 한다.

+ +

다른 브라우저와의 호환성을 위해, menus 이름공간 뿐 아니라 contextMenus 이름공간으로도 이 메소드를 사용할 수 있다. 하지만 contextMenus로는 툴 메뉴 항목(contexts: ["tools_menu"])은 만들 수 없다.

+ +

문법

+ +
browser.menus.create(
+  createProperties, // object
+  function() {...}  // optional function
+)
+
+ +

매개변수

+ +
+
createProperties
+
object. 새 메뉴 항목의 속성들
+
+
+
checked {{optional_inline}}
+
boolean. checkbox나 radio 항목의 초기값: 선택은 true, 선택이 아니면 false. radio 항목이라면 그룹 중에서 하나만 선택된 것으로 할 수 있다.
+
command {{optional_inline}}
+
+

string. 클릭 했을 때 수행할 동작을 기술한다. 가능한 값은:

+ +
    +
  • "_execute_browser_action": 확장의 브라우저 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.
    • +
  • "_execute_page_action": 확장의 페이지 액션을 클릭한 것처럼 한다. 팝업이 있으면 팝업이 열린다.
    • +
  • "_execute_sidebar_action": 확장의 사이드바를 연다.
    • +
+ +

항목을 클릭하면 여전히 {{WebExtAPIRef("menus.onClicked")}} 이벤트도 발생한다. 어느게 먼저 인지는 보장되지 않지만 onClicked이 발생하기 전에 명령이 실행될 것이다.

+
+
contexts {{optional_inline}}
+
+

{{WebExtAPIRef('menus.ContextType')}}의 배열. 메뉴 항목이 표시할 콘텍스트의 배열. 생략되면:

+ +
    +
  • 상위 항목에 콘텍스트가 설정되었으면 그걸 물려받는다.
    • +
  • 아니면, 항목은 ["page"]로 설정된다.
    • +
+
+
documentUrlPatterns {{optional_inline}}
+
string의 배열. 메뉴 항목의 표시를 URL이 주어진 match patterns과 일치하는 문서로 제한한다. 프레임에도 적용된다.
+
enabled {{optional_inline}}
+
boolean. 메뉴 항목이 사용 가능한지 아닌지를 지정한다. 기본값은 true.
+
icons {{optional_inline}}
+
+

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

+ + 
"icons": {
+      "16": "path/to/geo-16.png",
+      "32": "path/to/geo-32.png"
+    }
+ +

Alternatively, you can specify a single SVG icon, and it will be scaled appropriately:

+ + 
"icons": {
+      "16": "path/to/geo.svg"
+    }
+ +
+

Note: The top-level menu item uses the icons specified in the manifest rather than what is specified with this key.

+
+
+
id {{optional_inline}}
+
string. The unique ID to assign to this item. Mandatory for event pages. Cannot be the same as another ID for this extension.
+
onclick {{optional_inline}}
+
function. 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')}}.
+
parentId {{optional_inline}}
+
integer or string. 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.
+
targetUrlPatterns {{optional_inline}}
+
string의 배열. documentUrlPatterns 비슷한데, anchor 태그의 href 속성과 img/audio/video 태그의 src 속성에 기초해 걸러지는 것이다. 여기서 URL scheme는 뭐라도 상관없다. 설사 match pattern으로 보통은 허용되지 않는 것이라도 된다.
+
title {{optional_inline}}
+
+

string. The text to be displayed in the item. Mandatory unless type is "separator".

+ +

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

+ +

If the title contains an ampersand "&" 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:

+ +
    +
  • If the next character is also an ampersand: then a single ampersand will be displayed and no access key will be set. In effect, "&&" is used to display a single ampersand.
    • +
  • If the next characters are the interpolation directive "%s": then the ampersand will not be displayed and no access key will be set.
    • +
  • If the ampersand is the last character in the title: then the ampersand will not be displayed and no access key will be set.
    • +
+ +

Only the first ampersand will be used to set an access key: subsequent ampersands will not be displayed but will not set keys. So "&A and &B" will be shown as "A and B" and set "A" as the access key.

+
+
type {{optional_inline}}
+
{{WebExtAPIRef('menus.ItemType')}}. The type of menu item: "normal", "checkbox", "radio", "separator". Defaults to "normal".
+
visible {{optional_inline}}
+
boolean. Whether the item is shown in the menu. Defaults to true.
+
+
+
callback {{optional_inline}}
+
function. Called when the item has been created. If there were any problems creating the item, details will be available in {{WebExtAPIRef('runtime.lastError')}}.
+
+ +

Return value

+ +

integer or string. The ID of the newly created item.

+ +

브라우저 호환성

+ + + +

{{Compat("webextensions.api.menus.create", 10)}}

+ +

예제

+ +

이 예제는 페이지에 선택된 텍스트가 있을 때 표시되는 콘텍스트 메뉴 항목을 만든다. 동작은 선택된 텍스트를 콘솔에 로그로 남기는 것이다:

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

이 예제는 두 개의 radio 항목을 추가한다. 선택해서 테두리의 색을 녹색이나 청색으로 할 수 있다. 이 예제는 activeTab 권한이 필요하다.

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

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

+
+ + diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/gettargetelement/index.html new file mode 100644 index 0000000000..7cb70b5fa7 --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/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 +--- +
{{AddonSidebar}}{{Draft}}
+ +

주어진 targetElementId에 해당하는 요소를 돌려준다.

+ +

이 함수는 오직 클릭된 요소가 있는 문서에서만 동작한다. so everywhere but in the background page.

+ +

문법

+ +
let elem = browser.menus.getTargetElement(targetElementId);
+
+ +

파라메터

+ +
+
targetElementId
+
{{WebExtAPIRef("menus.onClicked")}} 핸들러 또는 {{WebExtAPIRef("menus.onShown")}} 이벤트에 전달된 {{WebExtAPIRef("menus.OnClickData")}} 객체의 속성
+
+ +

반환값

+ +

targetElementId로 참조되는 요소를 반환한다. targetElementId가 유효하지 않으면 null를 반환한다.

+ +

예제

+ +

아래 예제는 인수로 전달된 info.targetElementId 값으로 요소를 구하고, 그것을 지운다. 하지만 getTargetElement는 요소가 있는 문서에서만 동작하므로 문서가 있는 탭에 스크립트를 주입하는 형태로 처리하고 있다. 

+ +
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();`,
+    });
+  },
+});
+
+ +

{{WebExtExamples}}

+ +

브라우저 호환성

+ + + +

{{Compat("webextensions.api.menus.getTargetElement")}}

+ +

같이 보기

+ + diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/index.html new file mode 100644 index 0000000000..58f5af938b --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/index.html @@ -0,0 +1,183 @@ +--- +title: contextMenus +slug: Mozilla/Add-ons/WebExtensions/API/contextMenus +translation_of: Mozilla/Add-ons/WebExtensions/API/menus +--- +
{{AddonSidebar}}
+ +

브라우저의 메뉴 시스템에 항목을 추가한다.

+ +

이 API는 크롬의 "contextMenus" API를 모델로 했다. 크롬 확장앱이 브라우저의 콘텍스트 메뉴에 항목을 추가하는 API인데, 파이어폭스의 browser.menus API는 여기에 몇 가지 특징을 더했다.

+ +

파이어폭스 55 이전에 이 API의 원래 이름은 contextMenus였고, 지금도 이 이름은 별명으로 유지되므로 다른 브라우저에서도 동작하는 코드를 작성한다면 contextMenus를 사용할 수 있다.

+ +

이 API를 사용하려면 'menus'  권한이 필요하다. menus 대신에 contextMenus를 사용해도 된다. contextMenus를 사용했으면 API도 browser.contextMenus를 써야 한다.

+ +

콘텐트 스크립트에서는 menus.getTargetElement()만 사용할 수 있다.

+ +

메뉴 항목 만들기

+ +

메뉴 항목을 만들려면 {{WebExtAPIRef("contextMenus.create()")}} 메소드를 호출한다. 인수로 항목의 ID, 종류, 어떤 콘텍스트일 때 표시되는지 등이 포함된 객체를 전달한다.

+ +

항목의 클릭을 처리하려면 {{WebExtAPIRef("contextMenus.onClicked")}} 이벤트에 리스너를 추가한다. 리스너는 상세한 이벤트 정보를 담고 있는{{WebExtAPIRef("contextMenus.OnClickData")}} 객체를 받는다.

+ +

콘텍스트 메뉴는 네 종류다. create()에 주어지는 type 속성으로 지정한다:

+ + + +

메뉴 항목을 하나 이상 만들면 그 항목들은 서버메뉴로 표시되고, 상위메뉴의 라벨은 확장의 이름이 된다. 예를 들어, "Menu demo"라는 확장이 있고, 그것이 두 개의 콘텍스트 메뉴 항목을 추가했다면:

+ +

+ +

아이콘

+ +

"icons" manifest 키로 확장이 아이콘을 가졌으면,  콘텍스트 메뉴 항목은 라벨 옆에 아이콘을 함께 표시한다. 보통의 경우 16x16 픽셀이 표시되고, 고해상도이면 32x32 픽셀의 아이콘이 표시된다.

+ +

+ +

서버메뉴에 대해서만 {{WebExtAPIRef("menus.create()")}}에 icons 옵션을 전달해서 아이콘을 지정할 수 있다.

+ +

+ +

예제

+ +

아래 콘텍스트 메뉴에는 4개 항목이 있다: 보통 항목 하나, 위-아래가 구분선인 두 개의 라디오 항목, 그리고 체크박스 항목 하나다. 라디오 항목에는 따로 아이콘이 지정되었다.

+ +

이 서버메뉴는 아래 코드로 만들 수 있다:

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

타입

+ +
+
{{WebExtAPIRef("contextMenus.ContextType")}}
+
메뉴가 표시되게 하는 여러 콘텍스트. 가능한 값은: "all", "audio", "browser_action", "editable", "frame", "image", "link", "page", "page_action", "password", "selection", "tab", "video".
+
{{WebExtAPIRef("contextMenus.ItemType")}}
+
메뉴 항목의 종류: "normal", "checkbox", "radio", "separator".
+
{{WebExtAPIRef("contextMenus.OnClickData")}}
+
메뉴 항목이 클릭됐을 때 보내지는 정보.
+
+ +

속성

+ +
+
{{WebExtAPIRef("contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT")}}
+
최상위에 추가할 수 있는 ContextType이 "browser_action"이나 "page_action"인 메뉴 항목의 최대 수량.
+
+ +

함수

+ +
+
{{WebExtAPIRef("contextMenus.create()")}}
+
새 콘텍스트 메뉴 항목을 만든다.
+
{{WebExtAPIRef("contextMenus.update()")}}
+
전에 만든 콘텍스트 메뉴 항목을 갱신한다.
+
{{WebExtAPIRef("contextMenus.remove()")}}
+
콘텍스트 메뉴 항목을 지운다.
+
{{WebExtAPIRef("contextMenus.removeAll()")}}
+
확자앱에 추가된 모든 콘텍스트 메뉴 항목을 지운다.
+
+ +

이벤트

+ +
+
{{WebExtAPIRef("contextMenus.onClicked")}}
+
콘텍스트 메뉴 항목이 클릭하면 발생한다.
+
+ +

브라우저 호환성

+ +

{{ Compat("webextensions.api.menus", 1, "true") }}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.contextMenus API. This documentation is derived from context_menus.json in the Chromium code.

+
+ + diff --git a/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html b/files/ko/mozilla/add-ons/webextensions/api/menus/onshown/index.html new file mode 100644 index 0000000000..1fd716e3bb --- /dev/null +++ b/files/ko/mozilla/add-ons/webextensions/api/menus/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 +--- +
{{AddonSidebar()}}
+ +

Fired when the browser has shown a menu.

+ +

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 onShown handler and then call {{WebExtAPIRef("menus.refresh()")}} to update the menu itself.

+ +

The handler can add, remove, or update menu items.

+ +

For example, the menu-labelled-open 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 onShown and refresh() to annotate the menu item with the hostname for the link, so the user can easily see where they will go before they click.

+ +

Note that an extension should not take too much time before calling refresh(), or the update will be noticeable to the user.

+ +

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 host permission for it.

+ +

If the onShown 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:

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

Note that it is possible to call menus API functions synchronously, and in this case you don't have to perform this check:

+ +
browser.menus.onShown.addListener(async function(info, tab) {
+  browser.menus.update(menuId, ...);
+   // Note: Not waiting for returned promise.
+  browser.menus.refresh();
+});
+ +

However, if you call these APIs asynchronously, then you do have to perform the check:

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

Firefox makes this event available via the contextMenus namespace as well as the menus namespace.

+ +

문법

+ +
browser.menus.onShown.addListener(listener)
+browser.menus.onShown.removeListener(listener)
+browser.menus.onShown.hasListener(listener)
+
+ +

Events have three functions:

+ +
+
addListener(listener)
+
Adds a listener to this event.
+
removeListener(listener)
+
Stop listening to this event. The listener argument is the listener to remove.
+
hasListener(listener)
+
Check whether listener is registered for this event. Returns true if it is listening, false otherwise.
+
+ +

addListener syntax

+ +

매개변수

+ +
+
callback
+
+

Function that will be called when this event occurs. The function will be passed the following arguments:

+ +
+
info
+
+

Object. This is just like the {{WebExtAPIRef('menus.OnClickData')}} object, except it contains two extra properties:

+ +
    +
  • contexts: an array of all the {{WebExtAPIRef("menus.ContextType", "contexts")}} that are applicable to this menu.
    • +
  • menuIds: an array of IDs of all menu items belonging to this extension that are being shown in this menu.
    • +
+ +

Compared with menus.OnClickData, the info object also omits the menuItemId and modifiers properties, because of course these are not available until a menu item has been selected.

+ +

The contexts, menuIds, frameId, and editable properties are always provided. All the other properties in info are only provided if the extension has the host permission for the page.

+
+
+ +
+
tab
+
{{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.
+
+
+
+ +

브라우저 호환성

+ + + +

{{Compat("webextensions.api.menus.onShown", 10)}}

+ +

예제

+ +

This example listens for the context menu to be shown over a link, then updates the openLabelledId menu item with the link's hostname:

+ +
function updateMenuItem(linkHostname) {
+  browser.menus.update(openLabelledId, {
+    title: `Open (${linkHostname})`
+  });
+  browser.menus.refresh();
+}
+
+browser.menus.onShown.addListener(info => {
+  if (!info.linkUrl) {
+    return;
+  }
+  let linkElement = document.createElement("a");
+  linkElement.href = info.linkUrl;
+  updateMenuItem(linkElement.hostname);
+});
+
+ +

{{WebExtExamples}}

diff --git a/files/ko/mozilla/developer_guide/source_code/cvs/index.html b/files/ko/mozilla/developer_guide/source_code/cvs/index.html new file mode 100644 index 0000000000..bcd46453fc --- /dev/null +++ b/files/ko/mozilla/developer_guide/source_code/cvs/index.html @@ -0,0 +1,136 @@ +--- +title: Mozilla Source Code Via CVS +slug: Mozilla_Source_Code_Via_CVS +--- +

Those doing active development can check out the latest source using CVS. This is the preferred method if you plan to provide patches and fix bugs, as it lets you get up-to-the-minute changes and merge them with your own.

+

If you want to compile a product for release, it is generally better to Download Mozilla Source Code tarballs.

+

Quick Start Guide

+

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

+

The basic steps to checkout the trunk (unstable) Firefox sources are:

+
cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
+cd mozilla
+make -f client.mk checkout MOZ_CO_PROJECT=browser
+
+

Note that on Windows, your source tree must be located at a /cygdrive/<c> mount point. It must not be located within your /home.

+

Getting Started

+

CVS means "Concurrent Versioning System". To learn more about CVS in general, visit ximbiot.com, or read the tutorial.

+

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 module owners and their delegates. Read our document on hacking mozilla to find out how to get the ability to check in. You may also wish to read about using SSH to connect to CVS.

+

Requirements

+

To check out the sources, you need to be running CVS 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 GNU make 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".

+

CVS Client Settings

+

The "cvsroot" (repository identification string) used for anonymous access to Mozilla CVS is

+
:pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot
+
+

If you are using a graphical CVS interface, use the following server data:

+ +

Selecting a Project to Pull

+

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 MOZ_CO_PROJECT variable. This information has to be supplied when it comes to the checkout of the actual source code (see the appropriate checkout section below, according to the branch you want to checkout). The possible options include the following:

+
+
+ browser 
+
+ The standalone "Firefox" browser.
+
+ mail 
+
+ The standalone "Thunderbird" mail/news client.
+
+ suite 
+
+ The traditional "Mozilla" SeaMonkey suite of browser, mail/news, composer, and other applications.
+
+ minimo 
+
+ The standalone browser for small devices.
+
+ composer 
+
+ The standalone HTML composer.
+
+ calendar 
+
+ The standalone "Sunbird" calendar app.
+
+ xulrunner 
+
+ The next-generation XUL application launcher.
+
+ macbrowser 
+
+ The "Camino" native browser for Macintosh.
+
+ all 
+
+ Check out sources for all of the above projects, plus some additional utility code
+
+

Multiple projects can be specified with commas: MOZ_CO_PROJECT=suite,browser,xulrunner.

+

Note that if you are using a custom <tt>.mozconfig</tt> file, you can also specify MOZ_CO_PROJECT there, instead of including it on the command line.

+

Checking Out a New Source Tree

+

Check Tinderbox

+

Before pulling a tree, you should always check the appropriate Tinderbox 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.

+

Branch HEAD

+

To check out a new source tree from scratch, get the <tt>client.mk</tt> file which contains makefile instructions which are used to pull the rest of the tree:

+
$ cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
+
+

Note: if you have already set up a <tt>.mozconfig</tt> file, you may also need to check out the following files:

+
+
+ Firefox 
+
+ 
cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig
+
+
+ Thunderbird 
+
+ 
cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig
+
+
+

Specific Branch

+

If you want to check out the source code of a specific CVS branch, use

+
$ cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co -r BRANCH mozilla/client.mk
+
+

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

+

The information on pulling project specific .mozconfig files as listed in the previous section apply to other branches than HEAD as well of course.

+

Checkout

+

After having chosen the correct branch, run:

+
$ cd mozilla
+$ make -f client.mk checkout MOZ_CO_PROJECT=option,option
+
+

As mentioned above, if you are using a custom .mozconfig file where you have already specified the MOZ_CO_PROJECT variable, you do not need to repeat it here on command line.

+
+ Always use <tt>client.mk</tt> to checkout the Mozilla sources: do not check out the <tt>mozilla/</tt> 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.
+

Updating a Source Tree

+

Branch HEAD

+

In order to update a source tree (be it branch HEAD or a specific branch) to latest branch HEAD, run:

+
$ cd mozilla
+$ cvs up -A client.mk
+
+

The -A option removes any "sticky branch" information, which leads to the effect that the tree is updated to HEAD.

+

Specific Branch

+

To update a source tree which was pulled from a specific branch, use

+
$ cd mozilla
+$ cvs up -r BRANCH client.mk
+
+

instead. Replace BRANCH by the tag of the branch you want to update.

+

Checkout

+

Having updated client.mk, you can do the checkout:

+
$ make -f client.mk checkout MOZ_CO_PROJECT=option,option
+
+

As always, if you use a custom .mozconfig file where MOZ_CO_PROJECT is already defined, you do not need to repeat it on command line.

+

Creating a Diff File

+

In order to create a diff of a single local file against the current file in the repository, use:

+
$ cvs diff -u8p FILENAME
+
+

See Creating a patch for more information.

+

Converting a Downloaded Source Tree

+

Downloaded source trees from mozilla.org (source tarballs) 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.

+


+ interwiki link

+

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

diff --git a/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html b/files/ko/mozilla/firefox/releases/1.5/adapting_xul_applications_for_firefox_1.5/index.html new file mode 100644 index 0000000000..363b27b75e --- /dev/null +++ b/files/ko/mozilla/firefox/releases/1.5/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 +--- +

이 페이지는 XUL 개발자에 영향을 미치는 Firefox 1.5에서 바뀐 점 목록을 포함합니다.

+

특정 바뀐 점

+ +

다른 정보

+ diff --git a/files/ko/mozilla/firefox/releases/1.5/index.html b/files/ko/mozilla/firefox/releases/1.5/index.html new file mode 100644 index 0000000000..fa1dba1cc6 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/1.5/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 +--- +

Firefox 1.5

+

Firefox 1.5를 출시하여 내려 받기할 수 있습니다. Gecko 1.8 엔진에 기반을 둔 이 최신 버전은 이미 최고인 클래스 표준 지원 개선과 다음 세대 웹 어플리케이션에서 가능한 새 기능을 제공합니다. Firefox 1.5는 CSS2와 CSS3 지원 개선, 많은 DHTML, JavaScript, DOM 향상은 물론 SVG 1.1과 <canvas>, XForms, XML 이벤트를 통한 스크립팅과 프로그래밍이 가능한 2D 그래픽스 API를 크게 다룹니다.

+

Firefox 1.5는 http://www.mozilla.com/firefox/ 에서 내려받을 수 있습니다.

+

개발자 도구

+

개발자를 도울 수 있는 여러 도구와 브라우저 확장기능들이 Firefox 1.5를 지원합니다.

+ +

주의: 확장기능 약간은 현재 Firefox 1.5를 지원하지 않아 자동으로 사용불가능합니다.

+

개요

+

Firefox 1.5의 새 기능:

+

웹 사이트 개발자와 어플리케이션 개발자

+
+
+ SVG In XHTML Introduction
+
+ XHTML 페이지에서 SVG를 쓰는 법과 정규 XHTML을 스크립트하는 방식과 같은 방식으로 그림을 조작하는데 JavaScript과 CSS를 쓰는 법을 배웁니다. 또한 Firefox의 SVG 구현 상태와 알려진 문제 정보를 알아보려면 SVG in Firefox를 보세요.
+
+
+
+ Drawing Graphics with Canvas
+
+ 새로운 <canvas> 태그 정보와 Firefox에서 그래프와 다른 개체 그리는 법을 알아봅니다.
+
+
+
+ CSS3 Columns
+
+ CSS3에 새로 제안한 자동 다단 텍스트 layout 지원 정보를 알아봅니다.
+
+
+
+ Using Firefox 1.5 caching
+
+ bfcache 정보와 뒤로 가기와 앞으로 가기 항해 속도를 높이는 법을 알아봅니다.
+
+

XUL 개발자와 확장기능 개발자

+
+
+ Building an Extension
+
+ 이 입문서는 당신이 Firefox에 가장 기본이 될만한 확장기능을 만드는데 필요한 과정을 통과하도록 합니다. 또한 새 확장기능을 만들기를 훨씬 더 쉽게 하는 1.5의 확장기능 관리자의 새로운 기능을 실제로 보이는 another tutorial on MozillaZine knowledge base를 보세요.
+
+
+
+ XPCNativeWrapper
+
+ XPCNativeWrapper는 safe to access from privileged code하도록 개체를 싸는(wrap up) 방법입니다. Firefox 1.5 (Gecko 1.8)에서 시작하여 약간 바뀐 behavior를 통해 모든 Firefox 버전에서 쓸 수 있습니다.
+
+
+
+ Preferences System
+
+ 더 적은 JavaScript 코드를 써서 더 쉽게 선택사항 창을 만들게 하는 새 위젯을 알아봅니다.
+
+
+
+ International characters in XUL JavaScript
+
+ XUL JavaScript 파일은 이제 ASCII 아닌 문자도 포함할 수 있습니다.
+
+
+
+ Tree API changes
+
+ XUL <tree> 요소에 접근하기 위한 인터페이스가 바뀌었습니다.
+
+
+
+ XUL Changes for Firefox 1.5
+
+ XUL 바뀐 점 요약. 또한 Adapting XUL Applications for Firefox 1.5를 보세요.
+
+
+
+ 네트워킹 관련 바뀐 점
+
+ +

새 최종 사용자 기능

+

사용자 Experience

+ +

보안과 사생활

+ +

열린 웹 표준 지원

+

Firefox는 시종일관 크로스 플랫폼을 구현하도록 기업을 계속 이끄는 웹 표준을 지원합니다.

+ +

Firefox 1.5는 다음 데이터 전송 프로토콜(HTTP, FTP, SSL, TLS, 그리고 나머지)과 여러 언어 문자 데이터(Unicode), 그래픽스(GIF, JPEG, PNG, SVG, 그리고 나머지), 가장 유명한 스크립팅 언어의 최근 버전인 JavaScript 1.6을 지원합니다.

+

Firefox 1.0부터 바뀐 점

+

2004년 11월 9일 처음 출시된 뒤로 Firefox에 바뀐 점이 많습니다. Firefox는 많은 새로운 기능 보탬과 버그 고침과 함께 향상됐습니다. Deer Park(Firefox 1.5의 코드명)와 Firefox 출시 노트는 Firefox 각 출시본의 바뀐 점에 관한 훌륭한 정보원입니다.

+ +

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

diff --git a/files/ko/mozilla/firefox/releases/2/index.html b/files/ko/mozilla/firefox/releases/2/index.html new file mode 100644 index 0000000000..e39f256625 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/2/index.html @@ -0,0 +1,85 @@ +--- +title: Firefox 2 for developers +slug: Firefox_2_for_developers +translation_of: Mozilla/Firefox/Releases/2 +--- +

Firefox 2 새로운 기능

+

Firefox 2는 다양하고 새로운 기능들을 소개하고 있습니다. 이 문서는 이러한 새로운 기능들을 소개하고 자세한 정보를 제공하고 있습니다. +

+

웹 사이트 및 응용프로그램 개발자

+
Microsummaries +
Microsummaries는 자동으로 업데이트 될만한 웹 페이지 내 작은 정보를 말합니다. 웹 사이트 개발자들은 북마크나 페이지 제목에 이 정보가 자동으로 업데이트 될 수 있도록 제공할 수 있습니다. 예를 들어, 특정 회사 주가를 보여 주는 페이지에서 주가를 Microsummaries로 보여 줄 수 있습니다. +
+
Microsummary 만들기 +
Microsummary 생성기를 만들고 활용하는 방법을 알려 드립니다. +
+
Microsummary XML grammar reference +
Microsummary 생성기를 만드는 데 쓰이는 XML 문법 참조 문서 +
+
OpenSearch support +
Firefox 2는 OpenSearch 검색 엔진 포맷을 지원합니다. +
+
MozSearch 플러그인 만들기 +
Firefox 2는 OpenSearch 기반 검색 플러그인 포맷인 MozSearch를 지원하지만 내부 사용 목적입니다. +
+
검색 플러그인 만들기 +
MozSearch를 이용하여 검색 플러그인 및 자동 완성 기능을 제공 하는 방법을 알려드립니다. +
+
자바스크립트 1.7 지원 +
Firefox 2는 자바스크립트 1.7을 지원합니다. 여기에는 let, destructuring assignment, generators and iterators, array comprehensions 등의 기능이 추가되었습니다. +
+
WHATWG Client-side session and persistent storage|WHATWG 클라이언트 세션 저장 기능 +
클라이언트 세션 저장 기능은 클라이언트에서 구조화된 데이터를 저장하거나 사용할 수 있도록 해 주는 새로운 기능입니다.
+
SVG 기능 +
Firefox 2는 <textPath> 요소를 구현하고 이전에 지원하지 않은 속성 지원을 더해 Scalable Vector Graphics (SVG) 지원이 향상됩니다. +
+
Controlling spell checking in HTML forms +
Firefox 2는 text area와 text field에서 인라인 철자 검사 지원을 포함합니다. 이 문서는 각 폼 요소에 철자 검사를 켜고 끄는 HTML 작성법을 설명합니다. +
+
Security in Firefox 2 +
Firefox 2는 보안 프로토콜이 기본값으로 가능하게 바뀌었습니다. +
+

XUL과 개발자들을 위한 확장

+
Updating extensions for Firefox 2 +
기존 확장 기능이 Firefox 2에서 작동하게 하는 법을 다룹니다. +
+
Session store API +
Firefox에서 세션을 넘나들며 저장 및 복구되는 항목에 기여하기. +
+
Feed content access API +
개발자가 RSS와 Atom 피드에 접근 및 구문해석하게 하는 API. +
+
SAX support +
이벤트 기반 XML 파서 API. +
+
Adding search engines from web pages +
자바스크립트는 OpenSearch 또는 Sherlock 포맷으로 작성된 검색 엔진 플러그인을 설치하도록 Firefox 에게 지시할 수 있습니다. +
+
Adding phishing protection data providers +
안전한 브라우징 시스템을 위해 추가 데이터 프로바이더를 추가하여 Firefox의 피싱 방지를 향상이 가능합니다. +
+
Adding feed readers to Firefox +
웹 기반이든 응용프로그램이든 새 피드 리더를 Firefox에 추가할 수 있습니다. +
+
Storage +
Firefox 2는 sqlite 기반 데이터베이스 아키텍쳐인 mozStorage 를 도입했습니다. +
+
Theme changes in Firefox 2 +
Firefox 2에서 작동하도록 기존 테마를 업데이트하는 데 필요한 변화를 다룹니다. +
+

일반 사용자 기능

+
Firefox 2는 여러분의 온라인 사용성을 전보다 더 안전하고 편리하게 하는 개선된 보안 기능과 함께 이전 버전처럼 깔끔한 사용자 인터페이스를 향상시킨 판을 제공합니다. +
+

사용성 증대 기능

+ +

개인 정보 및 보안

+ +{{ languages( { "en": "en/Firefox_2_for_developers", "ja": "ja/Firefox_2_for_developers" } ) }} diff --git a/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html b/files/ko/mozilla/firefox/releases/2/updating_extensions/index.html new file mode 100644 index 0000000000..b8c6f9f648 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/2/updating_extensions/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 +--- +

이 문서는 Firefox 2에서 확장 기능이 동작하도록 개발자들에게 유용한 정보를 제공해 줍니다. +

+

단계 1: install manifest 업데이트

+

첫 단계로 대부분의 확장기능이 install manifest 파일과 <tt>install.rdf</tt>에서 Firefox 2와의 호환성 정보를 기재해야 합니다. +

간단히 Furefix의 최대 호환 버전에 대한 정보를 제공하면 됩니다. Firefox 1.5는 다음과 같습니다. +

+
 <em:maxVersion>1.5.0.*</em:maxVersion>
+
+

Firefox 2와 호환성을 유지하려면 아래와 같이 수정 합니다. +

+
 <em:maxVersion>2.0.0.*</em:maxVersion>
+
+

확장 기능을 다시 설치해야 합니다. +

+

단계 2: XML 오버레이 업데이트

+

Firefox 2는 기본 스킨이 변경 됩니다. 부가적으로 몇 가지 사용자 인터페이스가 변경 됩니다. 어떤 부가 기능들은 XUL 오버레이와 관련되어 변경 가능성이 있습니다. +

XUL 오버레이와 관련된 변화에 대해서는 Firefox 2에서 테마 변경이라는 문서를 참고하십시오. +

+

단계 3: 테스트

+

확장 기능을 공개 하기 전에 Firefox 2에서 제대로 동작 여부를 테스트해야 합니다. 마지막으로 확장 기능 최신 버전이 Firefox에 문제가 있는 지 여부를 확인 하는 것이 좋습니다. +

+

단계 4: 출시

+

사용자들이 이용할 수 있도록 http://addons.mozilla.org 상 내용을 업데이트 합니다. +

부가적으로 확장 기능이 Firefox 2에서 업데이트 사실을 자동적으로 알 수 있도록 install manifest에 updateURL도 함께 변경 합니다. 이렇게 하면 사용자들이 Firefox 2로 업그레이드 한 후에 자동적으로 확장 기능 업데이트도 함께 제공하게 됩니다. +

{{ 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/mozilla/firefox/releases/3.5/index.html b/files/ko/mozilla/firefox/releases/3.5/index.html new file mode 100644 index 0000000000..2431607551 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3.5/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 +--- +

Firefox 3.5은 넓은 범위의 향상된 웹 표준을 지원하는 것을 포함한 새로운 여러 가지 기능을 보여줍니다. 이 문서에는 향상된 부분 중 주된 부분에 대한 문서의 링크를 제공합니다.

+

Firefox 3.5에서 개발자를 위한 새로운 부분

+

웹 사이트와 웹 애플리케이션 개발자를 위한 부분

+

HTML 5 지원

+
+
+ Firefox에서 오디오와 비디오 사용
+
+ Firefox 3.5 에는 HTML 5 의 audio와 video 요소가 추가되었습니다.
+
+ Firefox에서의 오프라인 자원
+
+ Firefox 3.5 에서는 이제 HTML 5 의 오프라인 자원 부분을 모두 지원합니다.
+
+ 드래그 앤 드롭
+
+ HTML 5 의 드래그 앤 드롭 API는 웹사이트에서의 드래그 앤 드롭을 지원합니다. 또한 확장기능과 모질라 기반 애플리케이션에서 사용되는 간단한 API도 제공합니다.
+
+

CSS 변경점

+
+
+ Downloadable 다운로드 할 수 있는 폰트 지원 fonts support
+
+ 새로운 {{ cssxref("@font-face") }} @rule 은 웹페이지에서 폰트를 다운로드 할 수 있게 합니다. 그래서 이 CSS가 적용된 사이트는 페이지를 만든 사람 의도대로 보여줄 수 있습니다.
+
+ CSS media queries
+
+ Firefox 3.5 에서는 CSS media query를 지원합니다. 이것은 미디어 기반의 스타일 시트를 이용할 수 있게 합니다.
+
+ {{ cssxref(":before") }} 와 {{ cssxref(":after") }} 가 CSS 2.1에 추가되었습니다.
+
+ :before 와 :after 모조요소(pseudo-elements)는 CSS 2.1의 position, float, list-style-*, 그리고 특정 display 속성에 추가되었습니다.
+
+ opacity
+
+ 표준 opacity 속성이 생겨서 모질라 확장 CSS인 -moz-opacity가 없어졌습니다.
+
+ text-shadow
+
+ 텍스트나 텍스트 꾸밈요소에 그림자 효과를 적용할 수 있는 text-shadow 속성이 지원됩니다.
+
+ word-wrap
+
+ 새로 지원되는 속성인 word-wrap은 한 줄에 띄어쓰기 되지 않은 긴 문자열이 있을 때, 넘쳐 보이지 않게 하기 위해 이 문자열을 중간에서 끊을 지 정합니다.
+
+ -moz-box-shadow
+
+ -moz-border-image
+
+ -moz-column-rule
+
+ -moz-column-rule-width
+
+ -moz-column-rule-style
+
+ -moz-column-rule-color
+
+ Firefox 3.5에서는 CSS에 추가적으로 모질라 확장 CSS를 지원합니다.
+
+ -moz-nativehyperlinktext 색상 값
+
+ 이 새 색상값은 시스템 기본 하이퍼링크(hyperlink) 색상을 돌려줍니다.
+
+ 새로운 -moz-window-shadow 와 -moz-system-metric(mac-graphite-theme) 속성
+
+ These new CSS properties were added to facilitate theming.
+
+ -moz-appearance 의 새로운 값
+
+ -moz-win-glass 와 -moz-mac-unified-toolbar 값이 -moz-appearance 에 추가되었습니다.
+
+ Using CSS transforms
+
+ Firefox 3.5 supports CSS transforms.  See -moz-transform and -moz-transform-origin for details.
+
+ :nth-child
+
+ :nth-last-child
+
+ :nth-of-type
+
+ :nth-last-of-type
+
+ :first-of-type
+
+ :last-of-type
+
+ :only-of-type
+
+ 위의 선택자들 모두가 Firefox 3.5 에 새로 추가되었습니다.
+
+

DOM 변경점

+
+
+ localStorage
+
+ Firefox 3.5 에서는 웹 애플리케이션이 클라이언트 로컬에 데이터를 저장하는 방법을 제공해주는 웹 스토리지 localStorage 속성이 추가되었습니다.
+
+ DOM workers 사용
+
+ Firefox 3.5 에서는 웹 애플리케이션이 손쉽게 멀티스레드를 지원할 수 있게 해주는 DOM workers가 지원됩니다.
+
+ geolocation 사용
+
+ Firefox 3.5 에서는 Geolocation API를 지원합니다. 위치 정보 제공자가 설치되어 있고 활성화되어 있다면, 이 API는 웹 애플리케이션이 사용자의 현재 위치 정보를 얻을 수 있게 해줍니다.
+
+ Locating DOM elements using selectors
+
+ The selectors API allows querying a document to locate the elements that match a given selection rule.
+
+ 마우스 제스쳐 이벤트
+
+ Firefox 3.5 에서는 트랙패드를 강하게 치는 등의 마우스 제스쳐 이벤트를 지원합니다.
+
+ NodeIterator 객체
+
+ NodeIterator 객체는 DOM 하위 트리의 노드들을 반복(iterating)할 수 있도록 해줍니다.
+
+ The MozAfterPaint event
+
+ This new DOM event is sent after painting updates in windows.
+
+ The MozMousePixelScroll event
+
+ This new DOM event allows detection of pixel-based mouse scroll wheel events instead of line-based scroll events.
+
+

JavaScript 변경점

+
+
+ Object.getPrototypeOf()
+
+ 이 새로운 메소드는 특정 객체의 prototype을 반환합니다.
+
+ 자체 JSON 사용
+
+ Firefox 3.5 에는 자체에서 지원하는 JSON 객체가 있습니다.
+
+ String 객체에 trim 메소드 추가
+
+ 이제 String 객체에는 trim(), trimLeft(), trimRight() 메소드가 있습니다.
+
+

Networking

+
+
+ Cross-site access controls for HTTP
+
+ 서버에서 지원한다면 Firefox 3.5에서는 XMLHttpRequest를 이용해 만들어진 것을 포함한 HTTP 요청을 다른 도메인에 하는 것이 가능해졌습니다.
+
+ Progress events for XMLHttpRequest
+
+ 요청에 대한 진행상황을 살펴볼 수 있는 확장을 동작시키면 진행상황 이벤트를 이용할 수 있습니다.
+
+ 향상된 동기화(Synchronous) XMLHttpRequest 지원
+
+ DOM Timeout 과 Input Events 는 동기화 XMLHttpRequest로 인해 사용하지 않게 되었습니다.
+
+ Controlling DNS prefetching
+
+ 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.
+
+

Canvas 변경점

+
+
+ canvas 요소에서의 HTML 5 텍스트 API
+
+ Canvas 요소가 HTML 5 텍스트 API를 지원합니다.
+
+ canvas에서 그림자 효과
+
+ Canvas 그림자 효과가 지원됩니다.
+
+ createImageData()
+
+ canvas 메소드 createImageData() 가 지원됩니다. 이 메소드는 ImageData 객체를 코드로 지정해 생성할 수 있게 해줍니다. 이렇게 해서 ImageData 객체가 생성되는 것을 막아 다른 ImageData 메소드의 작동 속도를 향상시길 수 있습니다.
+
+ moz-opaque attribute
+
+ Added the moz-opaque 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.
+
+

New SVG features

+
+
+ Applying SVG effects to HTML content
+
+ You can now apply SVG effects to HTML and XHTML content; this article describes how.
+
+

Miscellaneous new features

+
+
+ ICC color correction in Firefox
+
+ Firefox 3.5 now supports ICC color correction for tagged images.
+
+ The defer attribute is now supported on script elements
+
+ This attribute indicates to the browser that it may choose to continue to parse and render the page without waiting for the script to finish executing.
+
+

그 외 향상된 점들

+ +

XUL과 애드온 개발자를 위한 부분

+

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.5, which offers a helpful overview of what changes may affect your extension.

+

New components and functionality

+
+
+ Supporting private browsing mode
+
+ 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.
+
+ Security changes in Firefox 3.5
+
+ This article covers security-related changes in Firefox 3.5.
+
+ Theme changes in Firefox 3.5
+
+ This article covers theme-related changes in Firefox 3.5.
+
+ Monitoring WiFi access points
+
+ 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.
+
+

Notable changes and improvements

+ +

사용자들을 위한 변경점

+

User experience

+
+
+ Location aware browsing
+
+ 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.
+
+ Open audio and video support
+
+ 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.
+
+ Local data storage
+
+ 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.
+
+

Security and privacy

+
+
+ Private Browsing
+
+ 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.
+
+ Better privacy controls
+
+ 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.
+
+

동작 속도

+
+
+ 더  빠른 JavaScript 동작속도
+
+ "AJAX"에서 "J"를 뜻하는 JavaScript가 Firefox 3.5에서 새로운 TraceMonkey JavaScript 엔진을 이용해 더욱 빨라졌습니다. 웹 애플리케이션은 Firefox 3 보다 더욱 빨라졌습니다.
+
+ 더  빠른 페이지 표시속도
+
+ "speculative parsing" 기술로 Firefox 3.5에서 웹 콘텐츠를 더 빨리 표시하게 되었습니다. 사용자들이 기술의 의미하는 바를 알 필요는 없습니다. 단지 "더 빨리 보여준다."고 알면 됩니다.
+
+

See also

+ diff --git a/files/ko/mozilla/firefox/releases/3.6/index.html b/files/ko/mozilla/firefox/releases/3.6/index.html new file mode 100644 index 0000000000..d6b5b7521f --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3.6/index.html @@ -0,0 +1,261 @@ +--- +title: 개발자를 위한 Firefox 3.6 +slug: 개발자를_위한_Firefox_3.6 +translation_of: Mozilla/Firefox/Releases/3.6 +--- +

Firefox 3.6은 새로운 웹표준, 향상된 퍼포먼스, 그리고 전체적으로 개선된 사용자와 개발자 경험을 제공합니다. 이 페이지에서는 Firefox 3.6의 새로운 기능을 다루는 링크를 제공합니다.

+ +

웹사이트와 어플리케이션 개발자를 위하여

+ +

CSS

+ +
+
Using gradients
+
Firefox 3.6 adds support for the proposed -moz-linear-gradient and -moz-radial-gradient properties  for background.
+
Multiple backgrounds
+
The background property (as well as background-color, background-image, background-position, background-repeat, and background-attachment) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.
+
Mozilla-specific media features
+
Media features have been added for Mozilla-specific system metrics, so that media queries can be used to more safely check on the availability of features such as touch support.
+
Scaling background images
+
The background-size property from the CSS 3 Backgrounds and Borders draft is now supported under the name -moz-background-size.
+
WOFF font support
+
@font-face now supports the WOFF downloadable font file format.
+
Pointer events
+
The pointer-events property lets content specify whether or not an element may be the target of mouse pointer events.
+
+ +

다방면의 CSS 변화

+ + + +

HTML

+ +
+
Using files from web applications
+
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 input type="file" HTML element's new multiple attribute.
+
HTML5 비디오가 poster frames을 제공합니다
+
The poster 속성은 is now supported for the video element, allowing content to specify a poster frame to be displayed until the video begins to play.
+
Checkboxes and radio buttons support the indeterminate property
+
HTML input elements of types checkbox and radio now support the indeterminate property, which allows a third, "indeterminate" state.
+
Canvas image smoothing can be controlled
+
The new mozImageSmoothingEnabled property can be used to turn on and off image smoothing when scaling in canvas elements.
+
Asynchronous script execution
+
By setting the async attribute on a script element, the script will not block loading or display of the rest of the page. Instead the script executes as soon as it is downloaded.
+
+ +

JavaScript

+ +

Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the ECMAScript 5 standard:

+ + + +

DOM

+ +
+
Web workers can now self-terminate
+
Workers now support the nsIWorkerScope.close() method, which allows them to terminate themselves.
+
Drag and drop now supports files
+
The DataTransfer object provided to drag listeners now includes a list of files that were dragged.
+
Detecting device orientation
+
Content can now detect the orientation of the device if it has a supported accelerometer, using the MozOrientation event; see window.onmozorientation for details. Firefox 3.6 supports the accelerometer in Mac laptops.
+
Detecting document width and height changes
+
The new MozScrollAreaChanged event is dispatched whenever the document's scrollWidth and/or scrollHeight properties change.
+
+ +

Miscellaneous DOM changes

+ + + +

XPath

+ +
+
The choose() XPath method is now supported
+
The choose() method is now supported by our implementation of XPath.
+
+ +

XUL 과 add-on 개발자를 위하여

+ +

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.6, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read Updating plug-ins for Firefox 3.6.

+ +

New features

+ +
+
Detecting device orientation
+
Content can now detect the orientation of the device if it has a supported accelerometer, using the MozOrientation event; see window.onmozorientation for details. Firefox 3.6 supports the accelerometer in Mac laptops.
+
Monitoring HTTP activity
+
You can now monitor HTTP transactions to observe requests and responses in real time.
+
Working with the Windows taskbar
+
It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. This has been disabled by default in Firefox 3.6.
+
+ +

Places

+ + + +

Storage

+ +
+
Locale-aware collation of data is now supported by the Storage API
+
Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.
+
Properties on a statement can now be enumerated
+
You can now use a for..in enumeration to enumerate all the properties on a statement.
+
mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.
+
See bug 528166 for details.
+
Asynchronously bind multiple sets of parameters and execute a statement.
+
See bug 490085 for details. Documentation coming soon.
+
+ +

Preferences

+ + + +

태마

+ +

See Updating themes for Firefox 3.6 for a list of changes related to themes.

+ +
+
Lightweight themes
+
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 Personas theme architecture into Firefox.
+
+ +

Miscellaneous

+ + + +

Firefox/Gecko 개발자

+ +

Certain changes are only really interesting if you work on the internals of Firefox itself.

+ +

인터페이스 융합

+ +

다음과 같은 인터페이스들은 결합되었습니다:

+ + + +

인터페이스 제거

+ +

The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:

+ + + +

인터페이스 이동

+ +

The following interfaces have been relocated from their previous IDL files into new ones:

+ + + +

A large number of interfaces have been moved. See Interfaces moved in Firefox 3.6 for a complete list.

+ +

그 외 인터페이스 변화

+ +

The following assorted changes have been made:

+ + + +

Changes in accessibility code

+ + + +

같이 보기

+ + diff --git a/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html b/files/ko/mozilla/firefox/releases/3/dom_improvements/index.html new file mode 100644 index 0000000000..800e5979df --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/dom_improvements/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 +--- +

{{ Fx_minversion_header(3) }}

+

Firefox 3에서는 Document Object Model (DOM)에 있어 다양한 개선이 있었으며, 특히 다른 브라우저들에서 제공되는 DOM의 확장을 지원한다는 면에서 특히 그러합니다. 본 글은 이러한 개선 사항들과 세부 문서에 대한 링크들로 구성되어 있습니다.

+ +

참고

+ +
+  
+

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

diff --git a/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html b/files/ko/mozilla/firefox/releases/3/full_page_zoom/index.html new file mode 100644 index 0000000000..3051b40775 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/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 +--- +

{{ Gecko_minversion_header("1.9") }}

+

전체 페이지 확대(또는 그냥 전체 확대)는 Firefox 3에서 지원하게 될 새로운 기능입니다. Gecko 1.9a7 버전부터 트렁크 빌드에서 사용이 가능합니다. 지금은 사용자 인터페이스가 없지만 자바스크립트와 nsIMarkupDocumentViewer XPCOM 인터페이스를 사용할 수 있습니다.

+

예제 (xul:browser)

+

다음 예제는 현재의 포커스 있는 브라우저 윈도우의 사용을 보여줍니다. 이는 Firefox 확장을 위한 전형적인 사용법입니다.

+
var zoom = 1.5;
+var docViewer = getBrowser().mCurrentBrowser.markupDocumentViewer;
+docViewer.fullZoom = zoom;
+
+

예제 (xul:iframe)

+

xul:iframe에 대해서도 전체 확대 기능을 사용할 수 있습니다. 그러나, iframe이 markupDocumentViewer를 가지고 있지 않기 때문에 그것을 먼저 얻어야 합니다.

+
var zoom = 1.5;
+var iframe = document.getElementById("authorFrame");
+var contViewer = iframe.docShell.contentViewer;
+var docViewer = contViewer.QueryInterface(Components.interfaces.nsIMarkupDocumentViewer);
+docViewer.fullZoom = zoom;
+
+

레퍼런스

+ +

 

+

 

+
+  
+

{{ languages( { "en": "en/Full_page_zoom", "es": "es/Zoom_a_p\u00e1gina_completa", "fr": "fr/Zoom_pleine_page", "ja": "ja/Full_page_zoom" } ) }}

diff --git a/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html b/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/index.html new file mode 100644 index 0000000000..fa8b5ea99a --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/notable_bugs_fixed/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 +--- +

이 글은 문서에서는 명확하지 않을 수도 있는 Firefox 3의 중요한 버그 수정 목록을 제공합니다.

+ +

See also

+ +

 

+

 

+

 

+
+  
+

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

diff --git a/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html b/files/ko/mozilla/firefox/releases/3/svg_improvements/index.html new file mode 100644 index 0000000000..e64f1600bc --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/svg_improvements/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 +--- +

{{ Fx_minversion_header(3) }}

+

Firefox 3에서는 이전 버전에 비해 Scalable Vector Graphics (SVG)에 대한 향상된 지원을 제공합니다. 이러한 내용은 다른 곳에서도 문서화되어 있지만, Firefox 3에서 어떤 기능들이 추가되었는지 쉽게 찾아볼 수 있도록 본 글이 작성되었습니다.

+ +

참고

+ +
+  
+

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

diff --git a/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ko/mozilla/firefox/releases/3/updating_extensions/index.html new file mode 100644 index 0000000000..82531182f4 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/updating_extensions/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 +--- +
+

초안
+ 이 문서는 작성중입니다.

+ +
+ +

이 글은 기존에 작성한 확장 기능이 Firefox 3에서도 잘 작동할 수 있게 업데이트하기 원하는 개발자들에게 유용한 정보를 제공합니다.

+ +

진행하기 앞서 유용한 힌트를 드리겠습니다. 여러분이 작성한 확장기능이 install manifest의 maxVersion 값만 수정하면 되고 addons.mozilla.org 에서 제공되고 있다면, 새로운 버전의 확장기능을 업로드할 필요가 없습니다! 그냥 AMO에 있는 Developer Control Panel을 사용해서 maxVersion 을 수정하면 됩니다. 이렇게 하면 여러분의 확장기능이 다시 리뷰되는 것을 막을 수 있습니다.

+ +

1단계: install manifest 수정

+ +

첫 번째 단계(아마 대부분의 확장기능이 이 단계만 거치면 될 것 같습니다)는 install manifest 파일인 install.rdf를 Firefox 3과 호환되도록 수정하는 것입니다.

+ +

먼저 호환 가능한 Firefox의 최고 버전을 나타내는 라인을 찾습니다(Firefox 2에서는 다음과 같을 것입니다).

+ +
 <em:maxVersion>2.0.*</em:maxVersion>
+
+ +

이 라인을 Firefox 3과 호환되도록 수정하세요.

+ +
 <em:maxVersion>3.0.*</em:maxVersion>
+
+ +

그리고 확장 기능을 다시 설치하세요.

+ +

Firefox 3에서는 버전 번호의 마지막 ".0"이 사용되지 않으므로, "3.0.0.*" 대신 "3.0.*"으로 사용하면 된다는 점을 기억하세요.

+ +
주의: 현재 시점에서 Firefox 3가 계속적으로 변경이 있을것으로 생각됩니다. 이러한 변화들로 인해 어떤 확장기능들은 제대로 실행되지 않을 수도 있으므로 Firefox 3 release candidate 버전이 출시되기 전까지는 maxVersion이 3.0.*인 확장기능을 배포하지 않는 것이 좋습니다. Firefox 3 Beta 기간동안에는 maxVersion 값에 3.0b3을 사용하는 것이 좋습니다.
+ +

확장기능들을 제대로 동작하지 않게 만들 수 있는 API의 많은 변화가 있었고 앞으로도 계속될 것입니다. 우리는 이러한 변화에 대한 전체 목록을 제공하기 위해 지속적으로 작업하고 있습니다.

+ +
주의: 여러분의 확장기능이 아직도 install manifest가 아닌 Install.js 스크립트를 사용하고 있다면, 지금 시점에는 install manifest로 전환해야만 합니다. Firefox 3은 더 이상 XPI 파일의 install.js 스크립트를 지원하지 않습니다.
+ +

Install manifest에 지역화 추가하기

+ +

Firefox 3에서는 지역화된 정보를 명시하기 위해 install manifest에 새로운 속성을 지원합니다. 기존 방법들이 여전히 동작하긴 하지만 새로운 방법을 이용하면 Firefox에서 부가 기능의 설치가 중지되어 있거나 불가능한 동안에도 지역 정보를 선택할 수 있도록 해 줍니다. 자세한 내용은 Localizing extension descriptions을 참조하세요.

+ +

단계 2: 보안 업데이트를 제공하고 있는지 확인하세요.

+ +

여러분이 직접 부가기능을 제공하고 있지만 addons.mozilla.org과 같은 보안을 지원하지 않을 경우에는, 부가 기능을 업데이트할 수 있는 보안 방법을 제공해야 합니다. 이를 위해서는 여러분의 업데이트 사이트가 SSL 웹사이트에서 운영되던지 업데이트 정보가 서명된 암호화 키를 사용해야 합니다. 자세한 정보는 Securing Updates를 읽어보세요.

+ +

단계 3: 변경된 API 처리하기

+ +

몇 가지 API에서 중요한 변화가 있었습니다. 다음은 대부분의 확장 기능에 영향을 줄 것으로 보이는, 가장 중요한 변화들 입니다.

+ +

DOM

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

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.

+ +

북마크 & 히스토리

+ +

여러분의 확장 기능이 어떤 방식으로든 북마크나 히스토리 자료에 접근한다면, Firefox 3과 호환되도록 하기 위해 많은 수정 작업이 필요합니다. 해당 정보에 접근하는데 사용되었던 기존 API는 새로운 Places 구조로 변경되었습니다. 기존 확장 기능을 Places API를 사용하도록 업데이트하는 것과 관련된 상세 내용은 플레이스로 이행 가이드를 참조하세요.

+ +

다운로드 관리자

+ +

다운로드 관리자 API는 RDF data store에서 [Storage]] API로의 변경으로 인하여 약간의 변경 사항이 있습니다. 이와 관련된 변경은 꽤 쉽습니다. 추가적으로 다운로드 진행을 모니터링하는 API에서는 다중 다운로드 관리자 리스너를 지원하도록 변경되었습니다. 자세한 내용은 nsIDownloadManager, nsIDownloadProgressListener, Monitoring downloads를 참조하세요.

+ +

암호 관리자

+ +

여러분의 확장기능이 암호 관리자를 이용하여 사용자의 로그인 정보에 접근한다면, 새로운 암호 관리자 API를 사용하도록 업데이트해야만 합니다.

+ + + +

Popups (Menus, Context Menus, Tooltips and Panels)

+ +

The XUL Popup system was heavily modified in Firefox 3. The Popup system includes main menus, context menus and popup panels. A guide to using Popups has been created, detailing how the system works. One thing to note is that popup.showPopup has been deprecated in favor of new popup.openPopup and popup.openPopupAtScreen.

+ +

제거된 인터페이스

+ +

다음 인터페이스들은 Firefox 3의 기반인 Gecko 1.9에서 제거되었습니다. 확장 기능이 이것들을 사용한다면 코드를 업데이트 해야 합니다.

+ + + +

Step 4: Check for relevant chrome changes

+ +

There has been a minor change to the chrome that may require changes in your code. A new vbox 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.

+ +

For example, if you previously overlaid some chrome before the status bar, like this:

+ +
<window id="main-window">
+  <something insertbefore="status-bar" />
+</window>
+
+ +

You should now overlay it like this:

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +
주의: This change is effective for Firefox 3 beta 4 and the pre-beta 4 nightlies.
+ +

그 밖의 변화들

+ +

여러분의 확장기능이 Firefox 3에서 제대로 동작하기 위해 업데이트 했던 간단한 사항들을 추가해 주세요.

+ + + +
 
diff --git a/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html b/files/ko/mozilla/firefox/releases/3/updating_web_applications/index.html new file mode 100644 index 0000000000..6598042587 --- /dev/null +++ b/files/ko/mozilla/firefox/releases/3/updating_web_applications/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 +--- +

{{ Fx_minversion_header(3) }}{{ Draft() }} Firefox 3에는 웹 사이트와 웹 애플리케이션에 영향을 줄 수 있는 다수의 변경 사항과 잇점을 줄 수 있는 새로운 기능이 포함 되어 있습니다. 이 문서는 Firefox 3의 잇점을 최대한 이용 가능할 수 있도록 웹 사이트를 업데이트 하는 방법을 알려 줄 것입니다.

+ +

Firefox 3는 2007년 가을 현재 베타 버전을 출시하였습니다.

+ +

이 문서를 계속 주시하시면 추가 사항들을 계속 업데이트 할 것입니다.

+ +

DOM 변경 사항

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

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.

+ +

HTML 변경 사항

+ +

Firefox 3는 frame과 iframe이 부모의 문자 인코딩을 상속받도록 하는 보안 문제를 해결하였습니다. 이 문제는 여러 가지 이슈를 만들어내었습니다. 이제 frame은 두 frame이 같은 서버에서 읽으면 부모의 문자 인코딩만 상속 받습니다. 만약 여러분의 웹 페이지 내에서 다른 서버에 있는 웹 페이지를 frame으로 호출할 경우, HTML로 특정 문자 인코딩을 선언해 주어야 합니다.

+ +

JavaScript 변경 사항

+ +

Firefox 3는 JavaScript 1.8을 지원 합니다. 웹 사이트에서 변경 해야할 주요 사항은 이제 더 이상 사용하지 않는 비표준 Script 객체를 더 이상 지원하지 않는 다는 것입니다. 그러나 Script가 비표준이기 때문에 대부분 이런 문제를 가지고 있지 않을 것으로 판단 하고 있습니다.

+ +

참고 사항

+ +

Firefox 3 개발자 필독 사항, JavaScript 1.8, Firefox 3를 위한 확장 기능 업데이트

+ +
 
+ +

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

diff --git a/files/ko/mozilla_source_code_via_cvs/index.html b/files/ko/mozilla_source_code_via_cvs/index.html deleted file mode 100644 index bcd46453fc..0000000000 --- a/files/ko/mozilla_source_code_via_cvs/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Mozilla Source Code Via CVS -slug: Mozilla_Source_Code_Via_CVS ---- -

Those doing active development can check out the latest source using CVS. This is the preferred method if you plan to provide patches and fix bugs, as it lets you get up-to-the-minute changes and merge them with your own.

-

If you want to compile a product for release, it is generally better to Download Mozilla Source Code tarballs.

-

Quick Start Guide

-

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

-

The basic steps to checkout the trunk (unstable) Firefox sources are:

-
cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
-cd mozilla
-make -f client.mk checkout MOZ_CO_PROJECT=browser
-
-

Note that on Windows, your source tree must be located at a /cygdrive/<c> mount point. It must not be located within your /home.

-

Getting Started

-

CVS means "Concurrent Versioning System". To learn more about CVS in general, visit ximbiot.com, or read the tutorial.

-

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 module owners and their delegates. Read our document on hacking mozilla to find out how to get the ability to check in. You may also wish to read about using SSH to connect to CVS.

-

Requirements

-

To check out the sources, you need to be running CVS 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 GNU make 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".

-

CVS Client Settings

-

The "cvsroot" (repository identification string) used for anonymous access to Mozilla CVS is

-
:pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot
-
-

If you are using a graphical CVS interface, use the following server data:

- -

Selecting a Project to Pull

-

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 MOZ_CO_PROJECT variable. This information has to be supplied when it comes to the checkout of the actual source code (see the appropriate checkout section below, according to the branch you want to checkout). The possible options include the following:

-
-
- browser 
-
- The standalone "Firefox" browser.
-
- mail 
-
- The standalone "Thunderbird" mail/news client.
-
- suite 
-
- The traditional "Mozilla" SeaMonkey suite of browser, mail/news, composer, and other applications.
-
- minimo 
-
- The standalone browser for small devices.
-
- composer 
-
- The standalone HTML composer.
-
- calendar 
-
- The standalone "Sunbird" calendar app.
-
- xulrunner 
-
- The next-generation XUL application launcher.
-
- macbrowser 
-
- The "Camino" native browser for Macintosh.
-
- all 
-
- Check out sources for all of the above projects, plus some additional utility code
-
-

Multiple projects can be specified with commas: MOZ_CO_PROJECT=suite,browser,xulrunner.

-

Note that if you are using a custom <tt>.mozconfig</tt> file, you can also specify MOZ_CO_PROJECT there, instead of including it on the command line.

-

Checking Out a New Source Tree

-

Check Tinderbox

-

Before pulling a tree, you should always check the appropriate Tinderbox 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.

-

Branch HEAD

-

To check out a new source tree from scratch, get the <tt>client.mk</tt> file which contains makefile instructions which are used to pull the rest of the tree:

-
$ cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/client.mk
-
-

Note: if you have already set up a <tt>.mozconfig</tt> file, you may also need to check out the following files:

-
-
- Firefox 
-
- 
cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/browser/config/mozconfig
-
-
- Thunderbird 
-
- 
cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co mozilla/mail/config/mozconfig
-
-
-

Specific Branch

-

If you want to check out the source code of a specific CVS branch, use

-
$ cvs -d :pserver:anonymous:anonymous@cvs-mirror.mozilla.org:/cvsroot co -r BRANCH mozilla/client.mk
-
-

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

-

The information on pulling project specific .mozconfig files as listed in the previous section apply to other branches than HEAD as well of course.

-

Checkout

-

After having chosen the correct branch, run:

-
$ cd mozilla
-$ make -f client.mk checkout MOZ_CO_PROJECT=option,option
-
-

As mentioned above, if you are using a custom .mozconfig file where you have already specified the MOZ_CO_PROJECT variable, you do not need to repeat it here on command line.

-
- Always use <tt>client.mk</tt> to checkout the Mozilla sources: do not check out the <tt>mozilla/</tt> 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.
-

Updating a Source Tree

-

Branch HEAD

-

In order to update a source tree (be it branch HEAD or a specific branch) to latest branch HEAD, run:

-
$ cd mozilla
-$ cvs up -A client.mk
-
-

The -A option removes any "sticky branch" information, which leads to the effect that the tree is updated to HEAD.

-

Specific Branch

-

To update a source tree which was pulled from a specific branch, use

-
$ cd mozilla
-$ cvs up -r BRANCH client.mk
-
-

instead. Replace BRANCH by the tag of the branch you want to update.

-

Checkout

-

Having updated client.mk, you can do the checkout:

-
$ make -f client.mk checkout MOZ_CO_PROJECT=option,option
-
-

As always, if you use a custom .mozconfig file where MOZ_CO_PROJECT is already defined, you do not need to repeat it on command line.

-

Creating a Diff File

-

In order to create a diff of a single local file against the current file in the repository, use:

-
$ cvs diff -u8p FILENAME
-
-

See Creating a patch for more information.

-

Converting a Downloaded Source Tree

-

Downloaded source trees from mozilla.org (source tarballs) 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.

-


- interwiki link

-

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

diff --git a/files/ko/navigation_timing/index.html b/files/ko/navigation_timing/index.html deleted file mode 100644 index c9a0c1465b..0000000000 --- a/files/ko/navigation_timing/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 내비게이션 타이밍(Navigation Timing) -slug: Navigation_timing -translation_of: Web/API/Navigation_timing_API ---- -

Navigation Timing API는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.

-

다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.

-
function onLoad() {
-  var now = new Date().getTime();
-  var page_load_time = now - performance.timing.navigationStart;
-  console.log("User-perceived page loading time: " + page_load_time);
-}
-
-

{{domxref("PerformanceTiming")}} 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.

- -

window.performance.navigation 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.

-

window.performance.navigation.type:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
상수값설명
TYPE_NAVIGATENEXT0아래 목록의 TYPE_RELOAD과 TYPE_BACK_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션.
TYPE_RELOAD1리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션.
TYPE_BACK_FORWARD2히스토리 순회(traversal) 연산을 통한 내비게이션
TYPE_UNDEFINED255위 값으로 정의되지 않는 어떠한 내비게이션 타입.
-

window.performance.navigation.redirectCount는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.

-

Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.

-

예제

-

어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.

-
var perfData = window.performance.timing;
-var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
-
-

요청 응답 시간 계산하기.

-
var connectTime = perfData.responseEnd - perfData.requestStart;
-

링크

- -

브라우저 호환

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChrome**Firefox (Gecko)*Internet ExplorerOpera*Safari (WebKit)
Basic support -

6

- 		-

7

-

 

- 		915{{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.015.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
-

 

diff --git a/files/ko/node_server_without_framework/index.html b/files/ko/node_server_without_framework/index.html deleted file mode 100644 index 1050f6aafd..0000000000 --- a/files/ko/node_server_without_framework/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: Node server without framework -slug: Node_server_without_framework -translation_of: Learn/Server-side/Node_server_without_framework ---- -

소개

- -

물론 Node 는 서버를 만들고 실행하는데 도움을 주는 많은 프레임워크가 있습니다, 예를 들면:

- - - -

하지만, 모든 것에 꼭 맞는 사이즈가 없듯이, 개발자들은 어떤 다른 의존성 없이 스스로 서버를 만들어야 할 때가 있습니다.

- -

예제

- -

다음은 짧고 간단한 정적 파일 nodejs 서버입니다.

- -
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/');
diff --git a/files/ko/notable_bugs_fixed_in_firefox_3/index.html b/files/ko/notable_bugs_fixed_in_firefox_3/index.html deleted file mode 100644 index fa8b5ea99a..0000000000 --- a/files/ko/notable_bugs_fixed_in_firefox_3/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Notable bugs fixed in Firefox 3 -slug: Notable_bugs_fixed_in_Firefox_3 -translation_of: Mozilla/Firefox/Releases/3/Notable_bugs_fixed ---- -

이 글은 문서에서는 명확하지 않을 수도 있는 Firefox 3의 중요한 버그 수정 목록을 제공합니다.

- -

See also

- -

 

-

 

-

 

-
-  
-

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

diff --git a/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html b/files/ko/orphaned/how_to_build_an_xpcom_component_in_javascript/index.html new file mode 100644 index 0000000000..a2f6f18b0c --- /dev/null +++ b/files/ko/orphaned/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 +--- +

+

본 문서는 자바스크립트에서 XPCOM 컴포넌트를 만드는 방법을 소개합니다. 이 문서에서는 XPCOM이 어떻게 움직이는지 혹은 그에 대한 코드는 다루지 않습니다. 자세한 사항은 XPCOM에서 아실 수 있습니다. 여기서는 실제로 이를 어떻게 움직이게하는 가에 달려 있습니다. +


+

+

구현 방법

+

아래 예제는 "Hello World!"라는 메시지를 표시하는 간단한 방법입니다. +This example component will expose a single method, which returns the string "Hello World!". +

+

인터페이스 재정의

+

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 only from JavaScript, you can use the wrappedJSObject trick so that you don't need to generate an interface as described here). +

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 XPCOMViewer, a GUI for browsing registered interfaces and components. You can download an old version of XPCOMViewer that works with Firefox 1.5 from mozdev mirrors. +

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 next section. +

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 XPIDL. Here's the XPIDL definition for our HelloWorld component: +

HelloWorld.idl +

+
#include "nsISupports.idl"
+
+[scriptable, uuid(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)]
+interface nsIHelloWorld : nsISupports
+{
+  string hello();
+};
+
+

Note that you must generate a new UUID for each XPCOM component that you create. See Generating GUIDs for more information. +

+

Compiling the Typelib

+

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 Gecko SDK. +

+
Note: 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 Mozilla build tools for Windows and copy the DLLs from <tt>windows\bin\x86</tt> within the zip into the <tt>bin</tt> directory of the Gecko SDK.
+
Note: 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.
+

Execute this command to compile the typelib. Here, <tt>{sdk_dir}</tt> is the directory in which you unpacked the Gecko SDK. +

+
{sdk_dir}/bin/xpidl -m typelib -w -v -I {sdk_dir}/idl -e HelloWorld.xpt HelloWorld.idl
+
+


+

+
Note: On Windows you must use forward slashes for the include path.
+

(The -I flag is an uppercase i, not a lowercase L.) This will create the typelib file HelloWorld.xpt in the current working directory. +

+

Creating the Component

+

HelloWorld.js +

+
/***********************************************************
+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) &&
+        !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; }
+
+
+

Installation

+

For extensions:

+
  1. Copy HelloWorld.js and HelloWorld.xpt to {extensiondir}/components/ +
  2. Delete compreg.dat and xpti.dat from your profile directory. +
  3. Restart application +
+

For Firefox

+
  1. Copy HelloWorld.js and HelloWorld.xpt to the {objdir}/dist/bin/components directory, if running from the source. +
  2. Delete compreg.dat and xpti.dat from the components directory. +
  3. Delete compreg.dat and xpti.dat from your profile directory. +
  4. Restart application +
+

Using Your Component

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

Other resources

+ +{{ 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/orphaned/javascript_c_engine_embedder's_guide/index.html b/files/ko/orphaned/javascript_c_engine_embedder's_guide/index.html new file mode 100644 index 0000000000..db46ed7fee --- /dev/null +++ b/files/ko/orphaned/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 +--- +

이 문서는 C로 구현된 JavaScript 엔진인 SpiderMonkey를 전반적으로 소개하며, 애플리케이션이 JavaScript를 인식하도록 하기 위해 어떻게 엔진을 내장하는지에 대해 설명합니다. JavaScript엔진을 여러분의 애플리케이션에 내장하는데는 두가지 큰 이유가 있을 것입니다. 먼저, 스크립트를 사용하여 애플리케이션을 자동화하는 것이 있고, JavaScript엔진과 스크립트를 사용하여 특정 플랫폼에 의존적인 애플케이션 솔루션이 되지 않도록 크로스 플랫폼을 지원하는 것입니다.

+

지원되는 자바스크립트 버전

+

모질라 JS 엔진은 JS1.8, JS 1.3을 통해 JS1.0을 지원하고 ECMAScript-262 규약을 충족합니다. 간단하게 보면, JS 엔진은 JS 문장과 함수를 포함하는 스크립트를 파싱하여 컴파일하고 실행합니다. 해당 엔진은 스크립트 실행에 필요한 JS 개체의 메모리 할당을 관리하고 더 이상 필요하지 않을 경우, 가비지 컬렉션을 통해 개체를 지웁니다.

+

자바스크립트 엔진을 어떻게 사용하나?

+

일반적으로 JS엔진은 공유 리소스로 빌드합니다. 예를 들어, 윈도와 윈도NT에서는 DLL이고 유닉스에서는 공유 라이브러리가 됩니다. 사용방법은 간단합니다. 우선 애플리케이션에 JS엔진을 링크하고 나서 JS엔진 API를 애플리케이션에 임베딩합니다. 이렇게 하면 JS엔진 API는 다음 종류에 해당하는 기능을 제공하게 됩니다.

+ +

애플리케이션이 자바스크립트 호출을 지원하려면 런타임 제어(runtime control)와 데이터 타입 조정(datatype manipulation)등과 같은 종류의 기능을 사용합니다. 예를 들어, 어떤 자바스크립트를 호출하기전에 JS_NewRuntime함수를 호출해서 JS엔진을 생성하고 초기화해야 하며, 보안 제어(security control)와 같은 기능은 필요에 따라 선택적으로 사용할 수 있습니다.

+

How Does the Engine Relate to Applications?

+

개념적으로 JS엔진은 시스템에 존재하는 공유 리소스라고 볼 수 있습니다. API call을 애플리케이션에 임베딩하여, JS엔진에 요청을 넘길 수 있습니다. 요청을 처리한 엔진은 값이나 상태정보를 애플리케이션에 되돌려줍니다. 그림1.1은 이러한 일반적인 관계를 보여주고 있습니다.

+

그림 1.1

+

Image:Over1.gif

+

예를 들어 여러분이 자바스크립트를 사용하여 애플리케이션을 자동화하기 위해 JS엔진을 사용한다고 가정합시다. 그리고 해당 애플리케이션에서 실행하는 스크립트에 사용자를 인증하고 애플리케이션에 사용자 접근 권한을 설정한다고 합시다. 우선, 애플리케이션은 사용자에게 이름, 아이디, 접근권한을 위한 입력과 사용자에게 허락되어 애플리케이션에서 사용 가능한 기능 리스트를 보여줄 수 있는 JS 오브젝트를 생성할 수도 있습니다.

+

이러한 경우, 애플리케이션이 처음으로 JS엔진에 요청하는 것은 JS_NewObject를 호출하여 사용자 정의 개체를 생성하는 것입니다. JS엔진이 개체를 생성할 때, 애플리케이션에 해당 포인터를 반환합니다. 이때 부터 애플리케이션은 해당 개체를 사용하여 스크립트를 실행하기 위해 다시 JS엔진을 호출할 수 있습니다. 예를 들어, 사용자 개체를 생성한 이후, 애플리케이션은 스크립트를 즉시 컴파일하고 실행하기 위해 바로 JS_EvaluateScript에 전달할 것입니다. 그 결과, 좀 전의 스크립트는 사용자 정보를 얻어 확인해주고 애플리케이션이 가진 다른 기능을 사용할 수 있도록 접근 권한을 허락하게 됩니다.

+

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 jsapi.h, and it assumes that the first call your application makes to the engine initializes the JS run time.

+

When the JS engine receives an initialization request, it allocates memory for the JS run time. Figure 1.2 illustrates this process:

+

Figure 1.2

+

Image:Over2.gif

+

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.

+

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

+

After you create contexts, you will usually want to initialize the built-in JS objects in the engine by calling JS_InitStandardClasses. The built-in objects include the Array, Boolean, Date, Math, Number, and String objects used in most scripts.

+

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 JS_InitClass to set up the class in the run time, and then call JS_NewObject 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 JS_SetProperty for each property.

+

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.

+

Figure 1.3

+

Image:Over3.gif

+

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.

+

NOTE: Only one thread at a time should be given access to a specific context.

+

Building the Engine

+

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.

+

For example, under Unix, the js source directory contains a base gnu make file called Makefile.ref, and a config directory. The config directory contains platform-specific .mk files to use with Makefile.ref for your environment. Under Windows NT the nmake file is js.mak.

+

Always check the source directory for any readme files that may contain late-breaking or updated compilation instructions or information.

+

What Are the Requirements for Engine Embedding?

+

To make your application JS-aware, embed the appropriate engine calls in your application code. There are at least five steps to embedding:

+
    +
  1. Add #include "jsapi.h" 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 jsdbgapi.h in the appropriate modules. Most other header files in the JS source code should + + not + be included. To do so might introduce dependencies based on internal engine implementations that might change from release to release.
    2. +
  2. 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 jsapi.h.
    3. +
  3. 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.
    4. +
  4. 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.
    5. +
  5. Most JS engine calls return a value. If this value is zero or NULL, 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.
    6. +
+

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 + + Client-Side JavaScript Guide + . For further information about scripting server-side objects, see the + + Server-Side JavaScript Guide + .

+
.
+.
+.
+#include <stdio.h>
+#include <stdlib.h>
+#include <string.h>
+
+/* 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;
+
+}
+
+

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 js.c, the sample application source code that is included with the JS engine source code.

+

Understanding Key Embedding Concepts

+

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.

+

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 main function typically sandwiches API calls for initializing and freeing the JS run time around whatever other functionality you provide:

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

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.

+

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:

+
builtins = JS_InitStandardClasses(cx, glob);
+
+

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.

+

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 Initializing Built-in and Global JS Objects and Creating and Initializing Custom Objects.

+

Managing a Run Time

+

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

+
 rt = JS_NewRuntime(8L * 1024L * 1024L);
+
+

As this example illustrates, JS_NewRuntime 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.

+

Normally, you only need one run time for an application. It is possible, however, to create multiple run times by calling JS_NewRuntime as necessary and storing the return value in a different pointer.

+

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

+
 JS_DestroyRuntime(rt);
+
+

If you use multiple run times, be sure to free each of them before ending your application.

+

Managing Contexts

+

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.

+

To create a new context for a script, use JS_NewContext. 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:

+
 JSContext *cx;
+ .
+ .
+ .
+ cx = JS_NewContext(rt, 8192);
+
+

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:

+
    +
  1. Create only as many contexts as you need at one time in your application.
    2. +
  2. Keep contexts for as long as they may be needed in your application rather than destroying and recreating them as needed.
    3. +
+

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 JS_DestroyContext to free the context when it is no longer needed. This function takes a single argument, the pointer to the context to destroy:

+
 JS_DestroyContext(cx);
+
+

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 JS_GetRuntime, and pass the context as an argument. JS_GetRuntime returns a pointer to the appropriate run time if there is one:

+
 rt = JS_GetRuntime(cx);
+
+

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 JS_SetContextPrivate to establish a pointer to private data for use with the context, and call JS_GetContextPrivate to retrieve the pointer so that you can access the data. Your application is responsible for creating and managing this optional private data.

+

To create private data and associate it with a context:

+
    +
  1. Establish the private data as you would a normal C void pointer variable.
    2. +
  2. Call JS_SetContextPrivate, and specify the context for which to establish private data, and specify the pointer to the data.
    3. +
+

For example:

+
 JS_SetContextPrivate(cx, pdata);
+
+

To retrieve the data at a later time, call JS_GetContextPrivate, and pass the context as an argument. This function returns the pointer to the private data:

+
 pdata = JS_GetContextPrivate(cx);
+
+

Initializing Built-in and Global JS Objects

+

The JavaScript engine provides several built-in objects that simplify some of your development tasks. For example, the built-in Array 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 JS_InitStandardClasses.

+

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.

+

A single API call, JS_InitStandardClasses, initializes the global and function objects and the built-in engine objects so that your application can use them:

+
 JSBool builtins;
+ .
+ .
+ .
+ builtins = JS_InitStandardClasses(cx, glob);
+
+

JS_InitStandardClasses returns a JS boolean value that indicates the success or failure of the initialization.

+

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 JS_SetGlobalObject. For more information, see the reference entry for JS_SetGlobalObject.

+

Creating and Initializing Custom Objects

+

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.

+

There are two ways to create custom objects that the JS engine can use:

+ +

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 JS_AddRoot or JS_AddNamedRoot. Using these functions ensures that the JS engine will keep track of the objects and clean them up during garbage collection, if appropriate.

+

Creating an Object From a Script

+

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.

+

NOTE: You can also use scripts to create persistent objects, too.

+

To create a custom object using a script:

+
    +
  1. 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?
    2. +
  2. Code the JS script that defines and creates the object. For example: function myfun(){ var x = newObject(); . . . } NOTE: Object scripting using JavaScript occurs outside the context of embedding the JS engine in your applications. For more information about object scripting, see the + + Client-Side JavaScript Guide + and the + + Server-Side JavaScript Guide + . 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 JS_EvaluateScript, JS_EvaluateUCScript or 2.) compile the script once with a call to JS_CompileScript or JS_CompileUCScript, and then execute it repeatedly with individual calls to JS_ExecuteScript. The "UC" versions of these calls provide support for Unicode-encoded scripts.
    3. +
+

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.

+

Embedding a Custom Object in an Application

+

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.

+

One way to embed a custom object in an application is to:

+
    +
  1. Create a JSPropertySpec data type, and populate it with the property information for your object, including the name of the property's get and set methods.
    2. +
  2. Create a JSFunctionSpec data type, and populate it with information about the methods used by your object.
    3. +
  3. Create the actual C functions that are executed in response to your object's method calls.
    4. +
  4. Call to JS_NewObject or JS_ConstructObject to instantiate the object.
    5. +
  5. Call JS_DefineFunctions to create the object's methods.
    6. +
  6. Call JS_DefineProperties to create the object's properties.
    7. +
+

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.

+

NOTE: An alternate, and in many cases, easier way to create a custom object in application code is to call JS_DefineObject to create the object, and then make repeated calls to JS_SetProperty to set the object's properties. For more information about defining an object, see JS_DefineObject . For more information about setting an object's properties, see JS_SetProperty.

+

Providing Private Data for Objects

+

Like contexts, you can associate large quantities of data with an object without having to store the data in the object itself. Call JS_SetPrivate to establish a pointer to private data for the object, and call JS_GetPrivate to retrieve the pointer so that you can access the data. Your application is responsible for creating and managing this optional private data.

+

To create private data and associate it with an object:

+
    +
  1. Establish the private data as you would a normal C void pointer variable.
    2. +
  2. Call JS_SetPrivate, specify the object for which to establish private data, and specify the pointer to the data.
    3. +
+

For example:

+
 JS_SetPrivate(cx, obj, pdata);
+
+

To retrieve the data at a later time, call JS_GetPrivate, and pass the object as an argument. This function returns the pointer to an object's private data:

+
 pdata = JS_GetPrivate(cx, obj);
+
+

Handling Unicode

+

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:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Standard FunctionUnicode-enabled Function
JS_DefinePropertyJS_DefineUCProperty
JS_DefinePropertyWithTinyIdJS_DefineUCPropertyWithTinyId
JS_LookupPropertyJS_LookupUCProperty
JS_GetPropertyJS_GetUCProperty
JS_SetPropertyJS_SetUCProperty
JS_DeleteProperty2JS_DeleteUCProperty2
JS_CompileScriptJS_CompileUCScript
JS_CompileScriptForPrincipalsJS_CompileUCScriptForPrincipals
JS_CompileFunctionJS_CompileUCFunction
JS_CompileFunctionForPrincipalsJS_CompileUCFunctionForPrincipals
JS_EvaluateScriptJS_EvaluateUCScript
JS_EvaluateScriptForPrincipalsJS_EvaluateUCScriptForPrincipals
JS_NewStringJS_NewUCString
JS_NewStringCopyNJS_NewUCStringCopyN
JS_NewStringCopyZJS_NewUCStringCopyZ
JS_InternStringJS_InternUCString
--JS_InternUCStringN
+

Unicode-enabled functions work exactly like their traditional namesakes, except that where traditional functions take a char * argument, the Unicode versions take a jschar * argument.

+

Working with JS Data Types

+

JavaScript defines its own data types. Some of these data types correspond directly to their C counterparts. Others, such as JSObject, jsdouble, and JSString, are specific to JavaScript.

+

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: JSObject, jsdouble, and JSString. 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.

+

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.

+

NOTE: Your application can also call JS_GC or JS_MaybeGC to force garbage collection at any time. JS_GC forces garbage collection. JS_MaybeGC 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.

+

Working with JS Values

+

In addition to JS data types, the JS engine also uses JS values, called jsvals. A jsval is essentially a pointer to any JS data type except integers. For integers, a jsval 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 jsvals improves engine efficiency, and permits many API functions to handle a variety of underlying data types.

+

The engine API contains a group of macros that test the JS data type of a jsval. These are:

+ +

Besides testing a jsval for its underlying data type, you can test it to determine if it is a primitive JS data type (JSVAL_IS_PRIMITIVE). Primitives are values that are undefined, null, boolean, numeric, or string types.

+

You can also test the value pointed to by a jsval to see if it is NULL (JSVAL_IS_NULL) or void (JSVAL_IS_VOID).

+

If a jsval points to a JS data type of JSObject, jsdouble, or jsstr, you can cast the jsval to its underlying data type using JSVAL_TO_OBJECT, JSVAL_TO_DOUBLE, and JSVAL_TO_STRING, 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 jsval. Similarly, you can convert a JSObject, jsdouble, and jsstr to a jsval using OBJECT_TO_JSVAL, DOUBLE_TO_JSVAL, and STRING_TO_JSVAL, respectively.

+

Unicode String Support

+

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 JS_NewStringCopyN, the corresponding Unicode version of the function is JS_NewUCStringCopyN. Unicode-enabled API string functions are also available for interned string.

+

Interned String Support

+

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.

+

The engine API offers several calls for working with interned strings:

+ +

Managing Security

+

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.

+

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.

+

To implement secure JS, follow these steps:

+
    +
  1. Declare one or more structs of type JSPrincipals in your application code.
    2. +
  2. 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.
    3. +
  3. Populate the JSPrincipals struct with your security information. This information can include common codebase information.
    4. +
  4. 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 JSPrincipals struct. The following table lists these API functions and their purposes:
    5. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionPurpose
JS_CompileScriptForPrincipalsCompiles, but does not execute, a security-enabled script.
JS_CompileUCScriptForPrincipalsCompiles, but does not execute, a security-enabled, Unicode-encoded script.
JS_CompileFunctionForPrincipalsCreates a security-enabled JS function from a text string.
JS_CompileUCFunctionForPrincipalsCreates a JS function with security information from a Unicode-encoded character string.
JS_EvaluateScriptForPrincipalsCompiles and executes a security-enabled script.
JS_EvaluateUCScriptForPrincipalsCompiles and executes a security-enabled, Unicode-encoded character script.
+

 

diff --git a/files/ko/orphaned/learn/how_to_contribute/index.html b/files/ko/orphaned/learn/how_to_contribute/index.html new file mode 100644 index 0000000000..08ee091c24 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{LearnSidebar}}
+ +

처음으로 또는 심도 깊은 검색을 통해 오셨다면 MDN 학습 영역에 참여하는 데 관심이있는 것 같습니다. 그건 좋은 소식입니다!

+ +

이 페이지에서는 MDN의 학습 콘텐츠를 개선하는 데 필요한 모든 것을 찾을 수 있습니다. 얼마나 많은 시간을 가지고 있는지, 초보자이든, 웹 개발자이든, 교사이든, 할 수있는 일이 많이 있습니다.

+ +
+

Note: 새로운 학습 영역 기사를 작성하는 방법에 대한 안내서는 사람들이 웹에 대해 알 수 있도록 기사를 작성하는 방법(How to write an article to help people learn about the Web)을 제공합니다.

+
+ +

특정 작업 찾기

+ +

참여자는 트렐로 보드(Trello board)를 사용하여 작업을 구성합니다. 이렇게 하면 프로젝트에서 수행할 특정 작업을 찾을 수 있습니다. 참여하려면 트렐로 계정을 만들고 Chris Mills에게 보드에 대한 쓰기 액세스 권한을 요청하면 됩니다.

+ +

기여는 새로운 것을 즐겁게 배우는 좋은 방법입니다. 만약 당신이 길을 잃거나 질문이 있으면 our mailing list 또는 IRC channel (자세한 내용은 이 페이지 하단 참조)로 문의하십시오. Chris Mills는 학습 영역의 핵심 드라이버입니다. 직접 디렉토리에 알림을 보내볼 수도 있습니다.

+ +

다음 섹션에서는 할 수있는 작업 유형에 대한 일반적인 아이디어를 제공합니다.

+ +

초보자

+ +
좋습니다! 초보자는 학습 자료에 대한 피드백을 만들고 제공하는 데 매우 중요하고 가치가 있습니다. 이 기사에 대한 독자적인 시각을 잠재 고객의 구성원으로 확보하면 우리 팀의 소중한 구성원이 될 수 있습니다. 실제로, 만약 당신이 무언가를 배우기 위해 우리의 글 중 하나를 사용하여 곤경에 빠지거나 글을 약간 혼란스럽게 하는 것을 발견한다면, 문제를 해결하거나 문제에 대해 알려줌으로써 해결할 수 있습니다.
+ +
+ +

다음은 참여 할 수있는 몇 가지 제안 방법입니다.

+ +
+
기사에 태그 추가[Add tags to our articles] (5 min)
+
MDN 컨텐츠에 태그를 지정하는 것은 MDN에 기여하는 가장 쉬운 방법 중 하나입니다. 많은 기능이 정보를 제공하기 위해 태그를 사용하므로 태그 지정을 돕는 것은 매우 가치가 있는 공헌입니다. 시작하려면 태그가없는 용어집 항목(glossary entries) 및 학습 기사(learning articles) 목록을 살펴보십시오.
+
용어 사전 항목 읽기 및 검토[Read and review a glossary entry] (5 min)
+
우리는 당신이 초보자로서 우리의 콘텐츠를 바라 보는 신선한 눈을 필요로 합니다. 용어집을 쉽게 이해할 수 없다면 항목을 개선해야한다는 의미입니다. 필요하다고 생각되는 부분은 자유롭게 변경하십시오. 자신이 직접 항목을 편집 할 수있는 적절한 기술이 없다고 생각한다면 our mailing list로 알려주십시오.
+
새로운 용어집 항목 작성[Write a new glossary entry] (20 minutes)
+
+
+
+
이것은 새로운 것을 배우는 가장 효과적인 방법입니다. 이해하려는 개념을 고르고, 그것에 대해 배울 때 그에 관한 용어집 항목을 작성하십시오. 다른 사람들에게 무언가를 설명하는 것은 지식을 "시멘트"로 만들고 다른 사람들을 돕는 동안 자신이 이해할 수 있게 하는 훌륭한 방법입니다. 모두에게 이득입니다!
+
+
+
+
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
+
+
+
+
+
+
+
이것은 용어 사전 항목을 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.
+
+
+
+
+
+
+
+ +

웹 개발자

+ +

좋습니다! 당신의 기술 능력은 초보자에게 기술적으로 정확한 내용을 제공하기 위해 필요한 것입니다. MDN의 이 특정 부분은 웹 학습에만 전념하므로 유용한 설명이 아닌 단순하지 않은 설명을 가능한 간단하게 작성하십시오. 지나치게 정확한 것보다 이해하는 것이 더 중요합니다.

+ +
+
용어집 항목 읽기 및 검토[Read and review a glossary entry] (5 min)
+
웹 개발자로서, 우리의 콘텐츠가 지나치게 규칙적이지 않으면서 기술적으로 정밀한 지 확인해 주길 바랍니다. 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 콘텐츠를 편집하기 전에 논의하기를 원하시면 our mailing list나 IRC channel로 알림을 보내주십시오.
+
새로운 용어집 항목 작성[Write a new glossary entry] (20 minutes)
+
기술적인 전문 용어를 명확히 하는 것은 기술적으로 정확하고 간결하게 배우는 좋은 방법이다. 초보자들은 그에 감사할 것입니다. 당신의 도움이 필요한 정의되지 않은 용어(many undefined terms)가 많이 있습니다. 선택해서 작성하실 수 있습니다. 
+
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
+
이것은 용어집을 읽고 검토하는 것과 같습니다. (위 참조) 이 기사는 일반적으로 꽤 길기 때문에 더 많은 시간이 걸립니다.
+
새로운 학습 기사 작성[Write a new learning article ](4 hours or more)
+
MDN는 웹 기술사용에 관한 간단한 기사가 부족합니다. (HTML, CSS, JavaScript, 등)MDN은 다소 오래 된 콘텐츠들이 있고, 그를 검토하고 개정할 필요가 있습니다. 기술을 최대한 초보자에게도 웹 기술을 이용하기 쉽게 작성하십시오.
+
연습, 코드 샘플 또는 대화식 학습 도구 만들기[Create exercises, code samples or interactive learning tools](? hours)
+
우리의 모든 학습 기사는 “능동적 학습" 자료라고 부르는 것을 요구합니다. 왜냐하면 사람들은 스스로 뭔가를 함으로써 최선을 다해 배우기 때문입니다. 이러한 자료는 사용자가 기사에 설명 된 개념을 적용하고 조작하는 데 도움이 되는 연습이나 대화형 콘텐츠입니다. JSFiddle 또는 그와 유사한 코드 샘플을 만드는 것에서 Thimble을 사용하여 완전히 공유된 대화형 콘텐츠를 만드는 것까지 능동적인 학습 콘텐츠를 만드는 방법은 다양합니다. 창의력을 발휘하십시오!
+
+ +

교육자

+ +

MDN은 기술적 우수성에 대한 오랜 역사를 가지고 있지만 새로 온 사람들에게 개념을 가르치는 가장 좋은 방법에 대한 깊이 있는 이해가 부족합니다. 이것은 우리가 교사 또는 교육자로서 당신을 필요로 하는 이유입니다. 자료를 통해 독자에게 훌륭한 교육 자료를 제공 할 수 있습니다.

+ +
+
용어집 항목 읽기 및 검토[Read and review a glossary entry] (15 min)
+
용어집 항목을 확인하고 필요하다고 생각되는 부분을 자유롭게 변경하십시오. 편집하기 전에 내용을 토론하고 싶다면 our mailing list 나 IRC channel로 알림을 보내주십시오.
+
새로운 용어집 항목 작성[Write a new glossary entry] (1 hour)
+
용어의 명확하고 간단한 정의와 용어집의 기본 개념은 초보자의 필요를 충족시키는 데 중요합니다. 교육자로서의 경험은 훌륭한 용어집 항목을 만드는 데 도움이 될 수 있습니다. 우리는 주의가 필요한 많은 정의되지 않은 용어(many undefined terms)를 가지고 있습니다. 하나를 선택하고 작성하실 수 있습니다.
+
기사에 삽화 또는 도식을 추가[Add illustrations and/or schematics to articles] (1 hour)
+
아시다시피, 삽화는 모든 학습 콘텐츠의 중요한 부분입니다. 이것은 종종 MDN에서 부족한 부분이며 당신의 기술이 해당 영역에서 변화를 가져올 수 있습니다. 설명이 부족한 기사(articles that lack illustrative content)를 확인하고 삽화를 삽입하고 싶은 기사를 선택하십시오.
+
학습 자료 읽기 및 검토[Read and review a learning article] (2 hours)
+
이것은 용어집 항목을 검토하는 것과 비슷하지만 (위 참조) 일반적으로 기사가 상당히 길기 때문에 더 많은 시간이 필요합니다.
+
새로운 학습 기사 작성[Write a new learning article] (4 hours)
+
우리는 웹 생태계와 그 주변의 다른 기능적 주제에 대한 간단하고 직접적인 기사가 필요합니다. 이 학습 기사는 말 그대로 문자 그대로 모두를 다루려고 하기 보다는 교육적일 필요가 있기 때문에 무엇을 알아야하고 어떻게 하면 훌륭한 자산이 될지를 아는 당신의 경험으로 도움을 줄 수 있습니다.
+
연습 문제, 퀴즈 또는 대화식 학습 도구 만들기[Create exercises, quizzes or interactive learning tools] (? hours)
+
우리의 모든 학습 기사에는 "능동적 학습" 자료가 필요합니다. 이러한 자료는 사용자가 기사에서 설명하는 개념을 사용하고 확장하는 방법을 배우는 데 도움이 되는 연습 또는 대화형 콘텐츠입니다. Thimble와 함께 공유된 양방향 콘텐츠를 만드는 것부터 퀴즈 만들기에 이르기까지 여기에서 할 수 있는 많은 것들이 있습니다. 창의력을 발휘하십시오!
+
학습 경로 만들기[Create learning pathways ](? hours)
+
진보적이고 이해하기 쉬운 자습서를 제공하려면 콘텐츠를 하나의 경로로 만들어야 합니다. 기존 콘텐츠를 수집하고 누락된 부분을 찾아서 작성할 학습 기사를 만들 수 있습니다.
+
diff --git a/files/ko/orphaned/mdn/about/mdn_services/index.html b/files/ko/orphaned/mdn/about/mdn_services/index.html new file mode 100644 index 0000000000..1d04e3d468 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
+ +

MDN 서비스는 기존 워크플로우에 적합하고 개발자가 웹 코드를 개선할 수 있도록 설계된 웹 개개발자를 위한 실험적 유틸리티입니다. 모든 MDN 서비스는 개발 초기 알파 단계에 있으므로, 아직 코드 품질 보장에 의존하지 않는 것이 좋습니다. 만약 프로토타입으로 실험하고 싶다면, 아래의 서비스들은 실험할 준비가 되어있으며, 우리는 그것에 대해 당신의 피드백을 받고 싶습니다.

+ +

웹 호환성 서비스 ("Discord")

+ +

Discord는 당신의 코드에서 호환성 문제를 포착하기 위한 GitHub webhook 입니다. 현재 CSS 코드를 doiuse로 스캔하고 GitHub의 코드 커밋에 주석을 추가합니다.

diff --git a/files/ko/orphaned/mdn/community/conversations/index.html b/files/ko/orphaned/mdn/community/conversations/index.html new file mode 100644 index 0000000000..9d41e6c30c --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
+ +

MDN "활동"은 MDN 웹사이트에서 발생하지만, "커뮤니티"는 별도의 온라인 토론과 채팅으로 발생합니다.

+ +

비동기적 토론

+ +

정보를 공유하고 토론을 계속하기 위해, MDN은 Mozilla Discourse 포럼에 자체 카테고리("MDN")를 가지고 있습니다. 문서 생성-번역-유지관리, MDN 플랫폼 개발, 미래계획, 목표설정, 진행상황 추적 등 MDN과 관련된 모든 글을 MDN 카테고리로 작성할 수 있습니다.

+ + + +

보존용 기록

+ +

2017년 6월 이전에는 MDN 관련 토론이 Google 그룹과 함께 게이트웨이되고 보관 된 메일 링리스트에서 진행되었습니다. 이전 토론을 검색하려면 이전 메일 링리스트에 해당하는 Google 그룹을 살펴보십시오. (예, 우리는이 이름들이 겹쳐지고 혼동을 일으킨다는 것을 알고 있습니다. 역사적인 사고입니다. 죄송합니다.)

+ +
+
mozilla.dev.mdc a.k.a dev-mdc
+
이 목록은 MDN의 문서 내용에 대한 토론 용이었습니다.
+
mozilla.dev.mdn a.k.a dev-mdn
+
이 목록은 MDN의 기본 Kuma 플랫폼 개발 작업에 관한 것입니다.
+
mozilla.mdn a.k.a mdn@
+
이 포럼은 MDN 웹 사이트 및 기타 관련 이니셔티브를위한 높은 수준의 계획 및 우선 순위 토론을위한 것입니다.
+
+ +

IRC 채팅하기

+ +

IRC(Internet Relay Chat)는 커뮤니티 멤버들끼리 매일 채팅하고 실시간으로 토론하기 위한 방법으로 선호됩니다. 저희는 MDN에 관련된 토론을 위해 irc.mozilla.org 서버에 있는 몇 가지 채널을 사용합니다.

+ +
+
#mdn
+
이 채널은 MDN 콘텐츠에 대해 토론하기 위한 기본적인 채널입니다. 저희는 작성, 콘텐츠 구성 등등에 대해 얘기합니다. 또한 저희는 여기서 "water cooler" 대화를 가집니다. 이는 저희의 커뮤니티가 연락을 유지하고 어울리기 위한 방법입니다. 또한 이는 데모 스튜디오, 프로필 등과 같이 MDN의 다른 측면(플래폼 개발이 아닌 부분)에 대해 토론하는 곳입니다.
+
 
+
#mdndev
+
이 채널은 우리의 개발 팀 - MDN이 작동하도록 코드를 작성하는 사람들 - 이 어울리고 그들의 일과를 토론하기 위한 곳입니다. 당신이 이 채널에 합류하고 개발에 참여하거나 혹은 단순히 당신이 소프트웨어에 대한 이슈에 관해 질문을 하는 것을 환영합니다.
+
+ +

이 채널들은 대부분 북미 지역에서 주중에 활발합니다.

+ +

당신은 IRC에 대해서 좀 더 알고 싶어하고, ChatZilla와 같은 설치형 IRC 클라이언트를 사용하고 싶어 할 것입니다. 이는 쉽고 빠르게 설치하고 사용할 수 있는 Firefox add-on에서 실행될 수 있습니다. 만약 IRC에 익숙하지 않다면, 참여하기 쉬운 방법에는 미리 mdn과 mdndev 채널들에 맞추어 설계된 mibit과 같은 웹기반 IRC 클라이언트를 사용하는 것이 있습니다. 

+ +

회의 (및 기타 행사)에 참가

+ +

MDN 팀은 MDN 커뮤니티에 열려있는 여러 정기 모임을 개최합니다. 일정, 의제 및 메모, 참여 방법에 대한 자세한 내용은 Mozilla wiki의 MDN Meetings 페이지를 참조하십시오.

+ +

이 회의 및 기타 회의, 지역 회의 및 기타 행사에 대한 MDN 이벤트 달력을보십시오. 되풀이 모임은 MDN Meetings wiki 페이지에 요약되어 있습니다.

+ +

 

+ +

If you see a meeting which takes place in the "mdn" channel on our Vidyo videoconferencing system, you can join the conversation on the web.

+ +

 

diff --git a/files/ko/orphaned/mdn/community/index.html b/files/ko/orphaned/mdn/community/index.html new file mode 100644 index 0000000000..faff8c5f2e --- /dev/null +++ b/files/ko/orphaned/mdn/community/index.html @@ -0,0 +1,46 @@ +--- +title: MDN 커뮤니티 참여하기 +slug: MDN/Community +tags: + - Community + - Guide + - Landing + - MDN Meta +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/ko/docs/MDN")}}
+ +
+

MDN 웹 문서는 위키 그 이상입니다. MDN은 공개 웹 기술을 사용하는 개발자들을 위해 뛰어난 자료를 만드는 사람들이 함께 작업하는 커뮤니티입니다.

+
+ +

당신이 MDN에 기여하시는 것도 물론 좋지만, 더 나아가 공식 커뮤니티에 참여하시면 정말 기쁘겠습니다. 참여하시는 방법은 다음 세 단계면 됩니다. 

+ +
    +
  1. 먼저 MDN 계정 생성을 만들고
    2. +
  2. 토론에 참여하고
    3. +
  3. 어떤 일이 일어나는지 지켜보세요.
    4. +
+ +

커뮤니티가 돌아가는 방법

+ +

MDN 커뮤니티를 더 자세히 설명하는 글입니다.

+ +
+
+
커뮤니티의 역할
+
MDN 커뮤니티에는 특정 책임이 주어진 몇가지 역할들이 있습니다. 
+
문서화 스프린트
+
문서화 스프린트 운영 가이드입니다. 스프린트를 운영해온 사람들의 유익한 조언과 팁이 포함되어있습니다. 
+
어떤일이 일어나는지 지켜보기 
+
MDN은 Mozilla Developer Network community가 제공합니다. 하고있는 일에 대한 정보를 공유하는 몇가지 방법을 소개합니다. 
+
MDN 커뮤니티의 토론
+
MDN의 "작업"은 MDN 사이트에서 하지만, "소통"은 (비동기)  토론과 (실시간) 온라인 채팅을 통해 일어납니다.
+
커뮤니티에서 작업하기
+
규모와 관계 없이 MDN 문서 기여시 반드시 알아야 할 것은  MDN 커뮤니티의 일원으로 어떻게 일할는지를 아는 것입니다. 이 글은 다른 글쓴이, 기술팀과 상호작용을 어떻게 잘 할 수 있는지를 알려줍니다. 
+
+
+
+
diff --git a/files/ko/orphaned/mdn/community/working_in_community/index.html b/files/ko/orphaned/mdn/community/working_in_community/index.html new file mode 100644 index 0000000000..0398e29823 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
+ +

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.

+ +

에티켓 가이드라인

+ +

Mozilla 커뮤니티와 함께 일하면서 지켜주셨으면 하는 사항들입니다.

+ + + +

Be tactful

+ +

Always be tactful and respectful when communicating with others.

+ +

Politely pointing out mistakes

+ +

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.

+ +

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

+ +
+

안녕하세요 홍길동씨, 웜홀 API 문서 에 대한 홍길동씨의 기여에 대해 감사드립니다. 저는 특히 홍길동씨께서 가독성과 세부정보를 균형있게 서술한 점을 인상깊게 보았습니다. 아마도 작업하시면서 correct tag를 페이지마다 추가해주신다면 이 문서를 더 유익하고 잘 만들어 나갈 수 있을 것 같습니다.

+ +

자세한 사항은 MDN 태그가이드를 이용해 주세요(https://developer.mozilla.org/en-US/docs/MDN/Contribute/Howto/Tag)

+ +

다시 한번 감사를 드리며 앞으로의 기여활동도 기대하겠습니다!

+
+ +

지식 공유

+ +

MDN 프로젝트에 참여하면서 무슨 일들이 일어나는지 파악하고 다른 멤버들과 소통하는 것이 본인에게 도움이 됩니다. 커뮤니티 내의 다른 분들과 소통하므로 아이디어를 얻거나 공유할 수 있습니다. 우리는 누가 주체가 되어 무슨 일을 진행하는지 알 수 있는 도구들과 리소스들을 제공하고 있습니다.

+ +

Communication channels

+ +

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.

+ +

Discourse

+ +

The MDN Discourse forum is a good place to ask general questions about MDN contribution and start discussions.

+ +

Chat

+ +

Use the Matrix chat system to reach people in real time. MDN staff members are available in the MDN Web Docs room, 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.

+ +

GitHub

+ +

If you find a problem on MDN, or want to ask a question, you can file an issue over on our GitHub sprints repo issues! They will then be triaged and actioned at some point in the future.

+ +

Email

+ +

Sometimes, a private email exchange between you and one or more other people is the way to go, if you have their email address.

+ +
+

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

+
+ +

Content status tools

+ +

We have several useful tools that provide information about the status of documentation content.

+ +
+
Revision dashboard
+
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).
+
Documentation status overview
+
Our documentation status overview 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.
+
Documentation project plans
+
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.
+
MDN Taiga
+
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 Process page on the Mozilla wiki.
+
+ +

The development community

+ +

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!

+ +

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.

+ +

On a related note, a great way to find the right person to talk to is to look at the module owners lists.

+ +

The writing community

+ +

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.

+ +

See the article Join the community for more information about the MDN community.

+ +

The most frequent place you'll directly interact with other writers is in the Discourse forum.

+ +

By keeping in mind the {{anch("General etiquette guidelines")}}, you'll find that usually, things go very smoothly.

+ +

See also

+ + diff --git a/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html new file mode 100644 index 0000000000..b3b84a92b1 --- /dev/null +++ b/files/ko/orphaned/mdn/contribute/howto/create_an_mdn_account/index.html @@ -0,0 +1,32 @@ +--- +title: MDN 계정 생성 +slug: MDN/Contribute/Howto/MDN_계정_생성하기 +tags: + - 가입 + - 계정 + - 시작하기 + - 인증 +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

페이지를 수정하거나 데모에 기여하는 등 MDN의 컨텐츠를 변경하려면 MDN 프로필이 필요합니다. 단지 내용을 읽거나 검색하는 것에는 프로필이 필요없으니 걱정하지 마세요. 아래는 MDN 프로필을 설정하기 위한 가이드입니다.

+ +

MDN에 기여하기로 마음 먹었다면 여러분이 할 일은 다음과 같습니다. :

+ +
    +
  1. 모든 MDN 페이지의 최상단에는 "Sign in with"(또는 '로그인') 버튼이 있습니다. 마우스를 포인터를 올려 놓으면(모바일 디바이스에서는 탭) MDN에서 사용 가능한 인증 서비스 목록이 나타납니다.
    2. +
  2. 로그인 할 서비스를 선택하세요. Persona 가 아닌 인증 서비스를 선택했다면 여러분의 공개 프로필에 여러분이 어떤 인증 방법으로 인증했는지 표시됩니다.
    3. +
  3. 각 서비스별 인증 단계를 따르십시오.
    4. +
  4. 각 서비스별 인증 단계를 마치고 MDN 페이지로 돌아오면,  이름과 이메일 주소를 입력해야 합니다. 입력한 이름은 모든 작업물에 공개적으로 표시되므로, 메일 주소를 이름으로 사용하지 마십시오.
    5. +
  5. 'MDN 프로필 생성' 버튼을 클릭합니다.
    6. +
  6. 4단계에서 입력한 이메일 주소가 여러분이 인증한 서비스 프로필 상의 이메일 주소와 다르면, 입력한 이메일 주소가 올바른지 확인하게 됩니다. 입력한 이메일 주소로 발송된 확인 메일의 링크를 클릭하세요.
    7. +
+ +

이게 전부입니다! 이제 여러분의 MDN 계정이 생겼으니, 지금 당장 페이지들을 수정하거나 태그를 달 수 있습니다.

+ +

모든 MDN 페이지의 최상단에 있는 여러분의 이름을 클릭하면 여러분의 공개 프로필을 볼 수 있으며, "편집" 버튼을 눌러 새로운 정보를 업데이트 할 수 있습니다. 여러분의 관심사나 블로그 주소, 트위터 계정, 혹은 그 외의 어떤 것이라도 나누어 보세요.

+ +
+

참고: 새로운 사용자 이름에 공백이나 '@' 문자를 포함할 수 없습니다. 사용자 이름은 당신의 모든 작업물에서 공개적으로 보여진다는 것을 기억하세요!

+
+ +

 

diff --git a/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..9b648a8d0c --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}

기술 리뷰는 기술적 정확성과 글의 완결성을 검토하는 것, 필요하다면 수정하는 것으로 이루어집니다. 글의 작성자가 다른 사람이 글의 기술적 내용을 확인하는 것을 바란다면, 작성자는 편집을 하는동안 "Technical review" 체크박스에 체크합니다. 작성자는 대개 기술 리뷰를 위해 특정한 엔지니어와 접촉하지만, 해당 주제에 대한 전문가라면 누구라도 가능합니다.

+

이 글은 기술 리뷰를 어떻게 하는지에 대해 기술하고, 그에 따라서 MDN의 컨텐츠들이 정확하도록 도움을 줍니다.

+ + + + + + + + + + + + + + + +
어떤 부분에 이 일이 필요하나요?technical review가 필요하다고 표시된 특정 글
이 일을 하기 위해 무엇을 알아야 하나요? +
    +
  • 리뷰를 하고 있는 글의 주제에 대한 전문 지식.
    • +
  • MDN의 위키 글을 편집할 수 있는 능력.
    • +
+
어떤 단계를 거쳐야 하나요? +
    +
  1. technical reviews가 필요한 페이지 목록으로 갑니다. 기술 리뷰가 요청된 모든 페이지들이 보여집니다.
    2. +
  2. 친숙한 주제를 가진 페이지를 고르세요.
    3. +
  3. 링크를 클릭하여서 페이지를 부르세요.
    4. +
  4. 페이지가 불려지면, 최상단 근처의 EDIT 버튼을 클릭하세요; MDN 에디터로 갑니다. 처음에 고른 페이지가 당신한테 맞지 않는다면 다른 페이지로 바꾸는 것을 주저하지 마세요.
    5. +
  5. 글을 읽으면서 틀린 기술 정보를 고치고 빠진 중요한 정보를 추가하세요.
    6. +
  6. 글 아래에 당신이 한 일에 대해서 기술하는 다음과 같은 코멘트를 입력하세요, '기술 리뷰 완료.' 정보를 수정한다면, 그것을 코멘트에 포함시키세요, 예를 들어 '기술 리뷰: fixed parameter descriptions.'
    7. +
  7. SAVE CHANGES 버튼을 클릭하세요 .
    8. +
  8. 에디터를 닫고 난 후 올바른 글이 화면에 뜨고 나면, 측면의 Technical 엔트리를 체크하여 (다음의 리뷰가 요청되었습니다 아래) SUBMIT REVIEW 버튼을 클릭하세요.
    9. +
  9. 끝났습니다!
    10. +
+
+

 

diff --git a/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html b/files/ko/orphaned/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..13b2f0d4a1 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
{{IncludeSubnav("/ko-KR/docs/MDN")}}
+ +

편집자 검토는 글의 오타와 맞춤법, 문법, 단어의 용법, 또는 원문의 오류를 고치는 일입니다. 모든 공헌자분들은 자신의 지식을 사용해 유용하고 가치있는 글을 만드는 데 기여하고 있습니다만, 이분들이 모두 어학전문가는 아닙니다. 따라서 언어적인 측면에서 교열과 교정이 종종 필요해집니다. 이 교열과 교정 작업이 바로 편집자 검토입니다.

+ +

이 글은 어떻게 편집자 검토를 수행하는지, 그리하여 MDN 컨텐츠들의 정확도를 높일 수 있게 되는 지에 대해 설명합니다.

+ +
+
편집자 검토는 어떤 일입니까?
+
편집자 검토가 필요하다고 표시된 글들을 교열하고 교정하는 것.
+
어떤 글에서 편집자 검토가 필요합니까?
+
편집자 검토가 필요하다고 표시된 특별한 글들.
+
편집자 검토를 하기 위해서 알아야 하는 것이 있습니까?
+
괜찮은 문법과 맞춤법 실력이 필요합니다. 예를 들어 편집 검토는 문법과 철자에 대한 확인을 해야합니다.
+
편집자 검토는 어떤 단계를 거칩니까?
+
+
    +
  1. 검토할 글을 선택합니다: +
      +
    1. 편집자 검토가 필요한 글 목록으로 이동합니다. 이곳에는 편집자 검토가 필요한 페이지들이 나열되어 있습니다.
      2. +
    2. 경로가 Template:으로 시작하지 않는 한국어 제목을 가진 페이지를 선택합니다.(Template:페이지는 MDN 매크로코드를 포함하고 있습니다)
      3. +
    3. 글 링크를 클릭해서 페이지를 불러옵니다.
      4. +
    +
    2. +
  2. 글의 오탈자, 철자, 문법 및 어법상의 오류에 주의를 기울이며 읽습니다. 만일 선택한 글이 능력에 부친다고 생각되면, 다른 글을 새로 선택하십시오.
    3. +
  3. 만일 살펴본 글에 오류가 없다면, 페이지 왼쪽 사이드바에서 "quick review" 상자를 찾아보십시오:
    + Screenshot of Korean version of the editorial review request sidebar box
    4. +
  4. 편집 상자의 선택을 해제하고, 저장 버튼을 클릭합니다.
    5. +
  5. 오류를 발견했다면, 수정을 해야합니다: +
      +
    1. 페이지 상단의 편집 버튼을 클릭합니다. MDN editor가 열립니다.
      2. +
    2. 발견한 오탈자, 문법, 어법상의 오류를 수정 합니다. 모든 오류를 한번에 다 고치지 않아도 괜찮습니다만, 남은 오류가 없다는 확신을 갖기 어렵다면 편집자 검토 요청 상태를 유지해주십시오.
      3. +
    3. 글 하단의 리비전 답글 항목을 입력합니다; '편집자 검토: 오타, 문법, 맞춤법 수정됨.'같은 식으로 적으시면 됩니다. 이 리비전 답글의 내용으로 다른 공헌자들이나 사이트 편집자들이 어떤 것이 수정되었는지, 왜 수정했는 지에 대해 알 수 있습니다.
      4. +
    4. 검토가 필요한가요? 에서 편집 체크상자를 해제해주십시오. 이 내용은 리비전 답글 항목의 바로 위에 있습니다.
      5. +
    5. 게시 버튼을 클릭해주세요
      6. +
    +
    6. +
+ +
+

수정 내용은 저장 직후에 바로 보이지 않을 수 있습니다. 페이지 내용이 처리되고 저장되기 까지는 약간의 시간지연이 있을 수 있습니다.

+
+
+
diff --git a/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/property_template/index.html new file mode 100644 index 0000000000..9df3680b49 --- /dev/null +++ b/files/ko/orphaned/mdn/contribute/howto/document_a_css_property/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 +--- +

{{MDNSidebar}}

+ +
+

This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.
+ Comment in italics are information about how to use part of the template

+
+ +

{{CSSRef}}

+ +

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.

+ +

{{Non-standard_Header}}

+ +

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.

+ +

{{SeeCompatTable}}

+ +

Description of the property. It must start by "The xyz 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.

+ +
+

Note: Placeholder for any special messages.

+
+ +

But don't add several notes. It should be really important, or be part of the description!

+ +

Syntax

+ +
/* Keyword values */
+property: value1;
+property: value2;
+
+/* <length> values */
+property: 12.8em;   /* A valid length */
+
+/* Global values */
+property: inherit;  /* <-- To remember those are a possible values */
+property: initial;
+property: unset;
+
+ +

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.

+ +

Values

+ +

Each element of the formal syntax must be explained

+ +
+
value_1
+
Is a keyword meaning...
+
value_2 {{Non-standard_Inline}} {{Experimental_Inline}}
+
Is a keyword meaning
+
+ +

Formal syntax

+ +

The formal syntax must be taken from the spec and added to the MDN data repository. It is an important tool to get precise syntax information for advanced users.

+ +
{{CSSSyntax}}
+ +

Examples

+ +

Add this only if there is such an example. No dead link here.

+ +

CSS

+ +
elementName {
+  property: value;
+  thisis: "example";
+  dream: 10000000mm;
+  love: "danger";
+}
+ +

HTML

+ +
<elementName>foo bar</elementName>
+ +

Result

+ +

{{EmbedLiveSample("Examples")}}

+ +

Specifications

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}No change from CSS 2.1
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Initial definition
+ +

{{CSSInfo}}

+ +

Browser compatibility

+ +

(See Compatibility tables for more information)

+ + + +

{{Compat("css.property.property-name")}}

+ +

See also

+ + diff --git a/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/ko/orphaned/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..e26a3d3a05 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
+ +

MDN의 페이지에 대한 요약을 정의할 수 있습니다. 이 요약은 검색 엔진의 결과, 시사적인 랜딩 페이지와 같은 다른 MDN 페이지 또는 툴팁에서 다양하게 사용됩니다. 요약은 페이지 내용의 나머지가 없이도 페이지의 문맥과 다른 문맥에서 보여졌을 때 모두 의미가 통해야 합니다.

+ +

요약은 한 페이지 이내로 분명하게 정의됩니다. 요약이 분명하게 정의되지 않았다면, 보통 첫 번째 문장 정도가 사용되는데 이는 언제나 목적을 위한 최고의 텍스트가 아닙니다.

+ + + + + + + + + + + + + + + + + + + + +
어떤 일을 해야 하나요?다른 문맥에서 요약으로 사용되어야 하는 페이지 내의 텍스트를 표시하기; 필요하다면 이 작업은 적합한 텍스트를 작성하는 것을 포함할 수 있습니다.
어디서 이 일이 필요하나요?요약이 부족하거나 미흡한 페이지.
이 일을 하기 위해 무엇을 알아야 하나요?MDN 에디터 사용 능력; 좋은 영작문 솜씨; 좋은 요약을 작성하기 위한 주제에 대한 충분한 친숙도
이 일을 하기 위한 단계는 어떻게 되나요? +
    +
  1. 요약을 설정할 페이지를 고릅니다: +
      +
    1. MDN documentation status 페이지에서, Sections 아래에서 알고 있는 주제의 링크를 클릭합니다.(예를 들어, HTML).
      2. +
    2. 주제의 문서 상태 페이지에서 Summary 테이블의 Pages 헤더를 클릭합니다. 해당 주제 섹션의 모든 페이지 인덱스로 이동됩니다.; 왼쪽 열에는 페이지 링크들이, 오른쪽 열에는 태그와 요약들이 보입니다.
      3. +
    3. 요약이 없거나, 좋지 않은 요약을 가진 페이지를 고릅니다.
      4. +
    4. 링크를 클릭하여 해당 페이지로 갑니다.
      5. +
    +
    2. +
  2. Edit를 클릭하여서 MDN 에디터로 페이지를 엽니다.
    3. +
  3. 문맥과 상관없이 요약으로 사용될 한 문장 또는 두 문장을 찾습니다. 필요하다면, 기존의 내용을 수정하여서 문장이 좋은 요약이 되도록 만들거나 수정합니다.
    4. +
  4. 요약으로 사용될 텍스트를 선택합니다.
    5. +
  5. 에디터 툴바의 Styles 위젯에서 SEO Summary를 선택합니다. (이것은 페이지 소스에서 선택된 텍스트에 class="seoSummary"를 가진 {{HTMLElement("span")}} 엘레멘트를 추가합니다. )
    6. +
  6. "페이지 요약 설정"과 같은 수정 코멘트와 함께 변경사항을 저장합니다.
    7. +
+
+ +

 

+ +

 

+ +

 

diff --git a/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html b/files/ko/orphaned/mdn/contribute/howto/tag_javascript_pages/index.html new file mode 100644 index 0000000000..8825a20a62 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}

태그달기는 페이지에 메타 정보를 추가함을 통해 관련된 내용이 묶여질수 있도록 하는 작업을 포함합니다.

+ +
+
어디서 필요한가요?
+
태그가 없는 JavaScript에 관련된 특정한 페이지안에서 필요합니다.
+
작업을 위해서 무엇을 알 필요가 있나요?
+
메소드나 변수들과 같은 기본적 JavaScript 코딩 지식이 필요합니다.
+
어떤 절차가 있나요?
+
+
    +
  1. 위에 링크된 페이지들중 하나를 선택하세요
    2. +
  2. 페이지를 로드하기위해 기사링크를 클릭하세요
    3. +
  3. 페이지가 로드됐다면, 맨 위 있는EDIT버튼을 클릭하세요; 이는 당신을 MDN 에디터로 만들어줍니다.
    4. +
  4. 적어도 JavaScript 태그가 추가돼야 합니다. 아래에는 가능한 다른 태그들입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    TagWhat pages to use it on
    Methodmethods
    Propertyproperties
    prototypeprototypes
    Object type namemethods of an object; for example String.fromCharCode should have the tag String
    ECMAScript6 and Experimentalfeatures added in a new ECMAScript version
    Deprecateddeprecated features (whose use is discouraged but still supported)
    Obsoleteobsolete features (which are no longer supported in modern browsers)
    othersSee MDN tagging standards for other possible tags to apply
    +
    5. +
  5. Save with a comment.
    6. +
  6. You're done!
    7. +
+
+
+ +

 

diff --git a/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html b/files/ko/orphaned/mdn/contribute/howto/write_an_article_to_help_learn_about_the_web/index.html new file mode 100644 index 0000000000..1eddcc7383 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
+ +

MDN의 학습 영역(Learning Area)은 새로운 개발자들에게 웹 개념을 소개하는 글들을 위한 우리의 집입니다. 왜냐하면 학습 영역의 콘텐츠는 대부분 초보자를 위한 것들이고, 당신의 지식을 공유하고 웹에 대해서 알고 싶은 사람들을 돕는 좋은 공간이기 때문입니다. 새로운 개발자들이 이 콘텐츠를 따라 할 수 있도록 하는 것이 중요합니다. 따라서 우리는 특별히 관심을 기울여야 합니다. 

+ +

이 글에서는 학습 영역(Learning Area)을 위한 페이지를 작성하는 방법을 설명합니다.

+ +

학습 영역 기사를 작성하는 방법

+ +

당신의 지식을 공유하려면 아래의 큰 초록색 버튼을 누르세요. 그러면 다섯 단계로 이어집니다. 만약 당신이 아이디어를 찾는다면, 우리의 트렐로 보드(our team Trello board)를 살펴보세요.

+ +

새 학습 기사 작성

+ +

이 기사는 정확한 위치에 도달할 수 없을지도 모르지만, 최소한 그것은 MDN에게 달려 있습니다. 만약 당신이 정확한 위치로 옮기고 싶다면 우리(Contact us)에게 연락해 주세요.

+ +

1단계 : 두개의 요약문 작성

+ +

기사의 첫 문장은 당신이 다루고자 하는 주제를 요약해야 하고, 두번째 문장은 당신이 기사에 실린 물건들을 좀 더 구체적으로 다루어야 합니다. 예를 들어 :

+ +
+

{{glossary("HTML")}}  HTML파일에는 정형 콘텐츠, {{Glossary("CSS")}}, 또 다른 주요 웹 기술이 포함되어 있어 콘텐츠를 원하는 대로 바라볼 수 있습니다.  이 기사에서는 이 기술이 어떻게 작동하는지, 어떻게 기본적인 예제를 작성하는지 살펴보겠습니다. 

+
+ +

예를 들어 CSS가 페이지 스타일에 사용되는 핵심 웹 기술이라고 간단히 설명해 주세요. 그것은 독자들이 기사의 주제가 무엇인지에 대한 꽤 좋은 아이디어를 얻을 수 있는 충분한 근거가 됩니다. 

+ +

왜냐하면 학습 영역 기사들은 주로 초보자를 대상으로 하고, 각각의 기사는 너무 많은 새로운 정보로 독자들을 압도하지 않도록 한가지 간단한 주제를 다루어야 하기 때문입니다. 만약 당신이 기사를 한 문장으로 요악하지 못하면,  너무 많은 것을 하나의 기사에서 다뤄야 할 지도 모릅니다.

+ +

2단계 : 상단 상자 추가

+ +

그리곤 독자들의 학습 과정에서 어떤 영향이 있는지 파악하는 것을 돕기 위해서 상단 상자를 추가합니다.  하단에 하나의 예로"URL과 그 구조의 이해(Understanding URLs and their structure)"에 대한 상단 상자가 있습니다. 당신의 기사를 쓰는 데 이 기사를 참고할 수 있습니다.

+ + + + + + + + + + + + +
필수 조건:먼저 인터넷이 어떻게 작동하는지(how the Internet works), 웹서버가 무엇인지(what a Web server is), 웹에서 링크의 개념(the concepts behind links on the web)을 알아야 합니다.
목표:URL에 대해서와 URL이 어떻게 웹에서 작동하는지를 배웁니다.
+ +
+
필수 조건
+
독자가 이 기사를 이해하기 위해 반드시 알고 있어야 할 것이 무엇인가요? 가능한 한 각 필수 요소에 대한 링크를 해당 개념을 다루는 다른 학습 영역 문서에 연결하세요. (사전 지식이 필요 없는 기초적인 기사가 아니라면)
+
목표
+
+

이 섹션에서는 독자가 글을 통해 습득할 내용을 간략하게 설명합니다. 이것은 요약문과는 좀 다릅니다, 요약문에서는 기사의 주제를 요약하지만 목표 부분은 독자들이 기사의 과정을 통해 달성할 수 있는 것을 구체적으로 제시합니다.

+
+
+ +
+

Note: 이 테이블을 생성하려면, 위의 예제 테이블을 복사하여 붙여 넣을 수 있으며, MDN의 editor의 table tool을 사용할 수 있습니다. 테이블 도구를 사용하도록 선택한 경우에는 기본 standard-table 클래스 이외에 learn-box CSS 클래스를 추가해야 합니다. 이렇게 하려면 테이블 속성을 생성하거나 편집할 때"Advanced"패널로 이동하여 스타일시트 클래스 필드를 "standard-table learn-box"로 설정합니다. 

+
+ +

3단계 : 전체 설명 작성

+ +

다음으로 가장 중요한 개념을 강조하는 기사를 좀 더 자세히 설명하는 더 긴 설명을 작성합니다. 왜 독자들이 이 주제를 배우고 당신의 기사를 읽는 데 시간을 할애해야 하는지 설명하는 것을 잊지 마세요!

+ +

4단계 : 깊이 들어가기

+ +

모든 작업을 마친 후, 마침내 주제에 더욱 깊이 들어갈 수 있습니다. 원하는 대로 이 분야의 기사를 작성합니다(우리의 style guide를 자유롭게 참고하셔도 됩니다).  당신이 빛날 수 있는 기회입니다! 작성하는 주제에 대해 자세히 설명합니다. 전체 참조 문서에 대한 링크를 제공하고, 기술이 어떻게 작동하는지 설명하고, 구문 및 사용 상세 내역을 제공하는 방법을 설명합니다. 당신이 하고 싶은 대로 하세요!

+ +

가이드로서, 여기에 초보자들을 위한 몇가지 조언이 있습니다:

+ + + +

우리 기능의 첫번째 섹션을 살펴보세요. 몇가지 좋은 설명 섹션을 볼 수 있는 코드 문서를 보세요.(Functions — reusable blocks of code)

+ +

5단계 : "능동적 학습" 자료 제공

+ +

기사에 삽화를 넣는 것은 독자들이 더 쉽게 이해하고 배우는데 도움이 된다. 완수할 수 있는 연습, 튜토리얼 과제를 제공하세요. 여러분의 기사를 적극적으로 사용하고 실험하고 실험하고 실험하는 것을 통해, 여러분은 그들의 뇌에 정보를 "잠금" 하는 것을 도울 수 있습니다.

+ +

직접 예제(live samples)로 페이지 안에 포함시키거나 직접 예제처럼 제대로 작동하지 않는 경우 링크하는 것(link to them)을 선택할 수 있습니다. 만약 여러분이 이 가치있는 자료를 만드는데 관심이 있다면, 웹을 배우는 것을 돕기 위한 대화형 연습 만들기(Create an interactive exercise to help learning the Web) 에 대한 기사를 읽어보세요.

+ +

기존의 능동적인 학습 자료에 대한 링크를 제공할 수 없는 경우(관련 자료에 대해서 모르거나 만들 시간이 없을 경우) "NeedsActiveLearning"를 문서에 태그하세요. 다른 기여자들은 능동적인 학습 자료가 필요한 기사를 찾을 수 있고 당신이 그것들을 고안해 낼 수 있도록 도와 줄 지도 모릅니다.

+ +

실시간 상호적인 학습 연습에 대한 Active learning: selecting different elements를 살펴보거나 Active learning: Playing with scope를 통해 로컬에서 탬플릿을 다운로드하고 수정하는 다양한 형태의 연습이 제공한 단계를 따라가세요.

+ +

6단계 : 문서를 검토하고 탐색 영역 메뉴에 추가하세요

+ +

기사를 쓰고 난 후, 우리가 보고 검토하고 개선점을 제안할 수 있도록 알려주세요. 연락할 수 있는 가장 좋은 방법은 당사의 연락처(Contact us) 섹션을 참조하는 것입니다.

+ +

당신의 기사를 마무리하는 또 다른 방법은 학습 영역 기본 탐색 메뉴에 넣는 것입니다. 이 메뉴는 LearnSidebar 매크로에 의해 생성되어 편집할 특별한 권한이 필요합니다. 따라서 팀에서 추가한 내용에 대해 다시 한번 말씀 드리겠습니다.

+ +

당신의 페이지에 기사를 추가해야 합니다. 이것은 당신의 페이지 맨 위에 있는 단락에 매크로(\{{LearnSidebar}})를 추가함으로써 이루어집니다.

+ + + +

추천 기사

+ +

기여를 하고 싶은데 어떤 것을 써야 할 지를 모르겠나요?

+ +

학습 영역 팀은 글을 쓰기 위한 아이디어가 담긴 트렐로 보드(a Trello board with ideas of articles)를 유지합니다. 하나를 골라서 자유롭게 작성하세요! 

diff --git a/files/ko/orphaned/mdn/editor/index.html b/files/ko/orphaned/mdn/editor/index.html new file mode 100644 index 0000000000..a327f0fd89 --- /dev/null +++ b/files/ko/orphaned/mdn/editor/index.html @@ -0,0 +1,19 @@ +--- +title: MDN 에디터 UI 가이드 +slug: MDN/Editor +tags: + - Landing + - MDN +translation_of: MDN/Editor +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("ko/docs/MDN")}}
+ +

MDN 위키가 제공하는 위지윅(WYSIWYG) 에디터를 통해 새로운 컨텐츠에 쉽게 기여할 수 있습니다. 이 글은 에디터의 사용법과 작업 생산성을 향상시킬 수 있는 기능들에 대해 상세히 설명하고 있습니다. 새로운 페이지를 생성하거나 편집하기 전에 모질라의 법적고지를 읽고 여기에 따라주십시오.

+ +

MDN 스타일 지침을 통해 MDN이 지향하는 형식, 스타일, 선호하는 문법과 스펠링 규칙에 대해 자세히 알 수 있습니다.

+ +

{{LandingPageListSubpages}}

+ +

{{EditorGuideQuicklinks}}

diff --git a/files/ko/orphaned/mdn/editor/links/index.html b/files/ko/orphaned/mdn/editor/links/index.html new file mode 100644 index 0000000000..f6217db92c --- /dev/null +++ b/files/ko/orphaned/mdn/editor/links/index.html @@ -0,0 +1,181 @@ +--- +title: Links +slug: MDN/Editor/Links +tags: + - MDN + - 가이드 + - 문서화 + - 에디터 +translation_of: MDN/Editor/Links +--- +
{{MDNSidebar}}
+ + + +
+

주목할 점: 특별히 링크시에 선호되는 작성방법이 있습니다;  MDN  작성 스타일 가이드에 설명되어 있습니다.

+
+ +

툴바 사용하기

+ +

링크를 만드는 가장 확실한 방법은 툴바의  "link" 버튼을 클릭하거나, Ctl+K (맥에서는 Command-K )를 누르는 것입니다. 링크 버튼은 이렇게 생겼습니다: The link button (as of 2015-12-04). 문자열 선택없이 링크 작성시에, 혹은 기존에 있는 문자열을 선택하여 링크 작성시에 이 기능을 이용할 수 있습니다.

+ +

문자열 선택없이 링크 작성하기

+ +

일단 링크 버튼을 클릭하면, 아래에 보이는 링크 에디터 다이얼로그로 진입합니다:

+ +

Screenshot of the Link dialog box, showing the Link Info tab

+ +

여기서 새로운 링크를 구성할 수 있습니다. 이 다이얼로그의 콘트롤은 다음과 같습니다:

+ +
+
링크 종류
+
생성중인 링크의 종류입니다. URL의 기본값은, MDN이든 오프사이트이든, 웹상 어딘가에 있는 URL입니다. 텍스트내의 앵커 (anchor)또는 "이메일"을 선택할 수도 있습니다. 앵커 링크 옵션은 툴바의 Anchor 버튼 으로 이전에 삽입된 anchor로의 링크를, 목록에서 골라서 생성할 수 있도록 합니다. 이메일 옵션은 받는사람의 이메일 주소와 제목 기본 메시지 콘텐츠를 입력하여 mailto: URL 이 구성되도록 합니다. 대부분의 경우 URL optin을 사용하게 될 겁니다.
+
문서 제목 찾기 / 링크 텍스트
+
이 필드는 두가지 목적을 수행합니다: 첫째는, 링크 대상으로 사용할 텍스트를 지정할 수 있습니다 (또는 대화 상자를 열기 전에 텍스트를 선택한 경우, 해당 텍스트가 이곳에 링크 대상으로 표시됩니다). 두번째로, 이 곳에 입력된 텍스트를 MDN내 등록된 문서와 대조하여 가능한 목적지 페이지를 찾아내는데 사용됩니다. 예를 들어, 이 박스안에 "Array"라고 타이핑하면, 아래와 같은 상황을 볼 수 있습니다:
+ Screenshot of the Link dialog box, showing a lookup menu for the text "Array"
+
+ +
+
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.
+
Attachments
+
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.
+
URL
+
Finally, the URL field lets you actually directly enter the URL; it also shows the URL of whatever you've selected in either the Article Title Lookup or Attachments 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.
+
+ +

Once the link is configured, click the OK button to insert it.

+ +
+

If you're paying attention, you'll see that there's a second tab—Advanced—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.

+
+ +

기존 텍스트에 링크 생성하기

+ +

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 Article Title/Lookup Text field with the selected text. For example, let's say we have the following text:

+ +
+

You may find it useful to use JavaScript arrays when working on this project.

+
+ +

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 developer.mozilla.org), which can give you a better idea of where it is located and what type of article it is.

+ +

Screenshot of the Link dialog box, showing a lookup menu and a URL tooltip

+ +

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 OK and the text gets turned into a link, like this:

+ +
+

You may find it useful to use JavaScript arrays when working on this project.

+
+ +

링크 매크로 사용하기

+ +

MDN은, 선택된 용어에 적절한 콘텐츠로의 링크가 자동적으로 생성되는 동시에 스타일 가이드에 맞게 링크가 생성되도록 하는 작업을 매크로에 크게 의존합니다. 이 예를 보세요: 우리의 스타일 가이드는 API 용어 이름, HTML 요소와 속성, CSS 속성, 함수 이름등이 {{HTMLElement("code")}} 형식을 권장한다( 사실상 그대로 되어야 합니다)라고 되어있습니다. 그것들은 또한 MDN상의 적절한 페이지로 링크가 연결되어있어야 합니다.

+ +

매크로를 이용하여 이런 링크들을 만드는 것은 익숙해지기에 약간 시간이 걸리지만 많은 장점이 있습니다:

+ + + +

이런 종류의 매크로가 많이 있으며, 여기서 모든 매크로를 다 보지는 않을 겁니다. 대신, 가장 일반적인  몇가지 특별한 예를 살펴볼 것입니다. 더 완벽한 목록은  MDN 커스텀 매크로 가이드의 "하이퍼링크 생성하기" 섹션을 보세요. 모든 매크로에 대해서 KumaScript 소스 코드를 확인할 수 있다는 점은 주목할만 합니다. 대부분의 경우 소스코드 상단에 작동 방식과 다양한 매개변수가 무엏인지 설명하는 주석이 있습니다.

+ +

API 문서에 링크걸기

+ +

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

+ +
+
{{TemplateLink("HTMLElement")}}
+
Inserts an HTML element's name, properly styled and linked. For example: \{{HTMLElement("table")}} yields {{HTMLElement("table")}}.
+
{{TemplateLink("cssxref")}}
+
Inserts a CSS property, at-rule, or selector's documentation in the CSS reference. For example: \{{cssxref("background-color")}} results in {{cssxref("background-color")}}.
+
{{TemplateLink("domxref")}}
+
Inserts a link into the Web API Reference for a given API term. For example: \{{domxref("window")}} yields {{domxref("window")}} and \{{domxref("window.scrollBy()")}} inserts {{domxref("window.scrollBy()")}}. You can also supply an additional parameter to override the text: \{{domxref("window.scrollBy", "scrollBy()")}} results in {{domxref("window.scrollBy", "scrollBy()")}}.
+
{{TemplateLink("SVGElement")}}
+
Inserts an SVG element's name, properly styled and linked. For example: \{{SVGElement("circle")}} yields {{SVGElement("circle")}}.
+
+ +

동일 문서내 섹션에 링크걸기

+ +

To link to a section within the same article, you can use the {{TemplateLink("anch")}} macro. The syntax is straightforward: \{{anch("Name of destination section")}}. 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:

+ + + +

버그에 링크걸기

+ +

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, \{{bug(765642)}} looks like this: {{bug(765642)}}.

+ +

Similarly, you can create links to bugs in other browsers and Web engines:

+ +
+
WebKit (Safari, etc.)
+
{{TemplateLink("WebkitBug")}}: \{{webkitbug(31277)}} yields {{webkitbug(31277)}}.
+
+ +

RFCs 에 링크걸기

+ +

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.

+ +

XPCOM 인터페이스 정보에 링크걸기 

+ +
+

The MDN staff no longer actively maintains the XPCOM documentation, but volunteer contributions are welcomel

+
+ +

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.

+ +

The syntax for linking to the documentation for an XPCOM interface as a whole is just: \{{interface("interfacename")}}. For example, you might write:

+ +
+

When you need to parse or create URIs, the \{{interface("nsIIOService")}} interface can help.

+
+ +

The result looks like this:

+ +
+

When you need to parse or create URIs, the {{interface("nsIIOService")}} interface can help.

+
+ +

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, \{{ifmethod("nsIIOService", "newURI")}} results in {{ifmethod("nsIIOService", "newURI")}}. That's a case where you're being protected against possible changes in the style guide in the future!

+ +

Mozilla 설정 문서에 링크걸기

+ +

To insert the name of a Mozilla preference and make it link to the corresponding page in the Preference reference, 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 \{{pref("javascript.options.showInConsole")}} to create this: {{pref("javascript.options.showInConsole")}}.

+ +

Mozilla 소스 파일에 링크걸기

+ +

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 /source/ directory. For example: \{{source("browser/Makefile.in")}} creates this link: {{source("browser/Makefile.in")}}.

+ +

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

+ +
+

Please look at the {{anch("Using macros")}} documentation if you're interested in learning more about using macros, and check out our KumaScript documentation to learn more about the macro system itself.

+
+ +

추천 콘텐츠에 링크걸기

+ +

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

+ +

URL 정책

+ +

For security reasons, you should only create links that use the following schemes:

+ + + +

Others may or may not work, but are not supported and will probably be removed by editorial staff.

+ +
+

Special URL schemes such as about: and chrome: 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 javascript: and jar: schemes, which are blocked by most modern browsers as a security precaution.

+
+ +

{{EditorGuideQuicklinks}}

diff --git a/files/ko/orphaned/mdn/structures/api_references/index.html b/files/ko/orphaned/mdn/structures/api_references/index.html new file mode 100644 index 0000000000..c521b5f4ec --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

웹에서 사용 가능한 기술 중 클라이언트 측 자바스크립트 API가 차지하는 비중은 상당히 높습니다. 그렇기 때문에, MDN은 API의 기능과 사용법을 설명하는 광범위한 참조 자료를 보유하고 있습니다. 이 안내 문서는 이런 API 참고 자료를 MDN에 생성하는 방법을 설명합니다. 

+ +

사전 준비

+ +

API를 문서화 하려면 다음이 가능해야 합니다. 

+ +
    +
  1. 최종 버전의 스팩: 그 API를 다루는 스팩의 단계가 W3C 최종 권고안인지, 초안인지는 관계없지만, 최종 버전의 스팩을 참조해야 합니다.  보통은 웹에서 쉽게 검색할 수 있으며, 그 스팩의 모든 버전의 문서에는 보통 최종 버전으로의 링크가 "lastest draft"등의 제목으로 걸려있습니다. 
    2. +
  2. 최신 모던 브라우저: 여러분이 문서화할 기능들은 정식 버전이 아닌 파이어폭스 나이틀리/크롬 카나리와 같은 실험 버전에서 지원할 가능성이 높습니다. 앞서가는 실험적인 API를 문서화 한다면 더욱 이런 버전의 브라우저를 사용해야 합니다. 
    3. +
  3. 데모/블로그 글/다른 정보: 가능하면 최대한 정보를 찾아보세요. 그 API가 어떻게 동작하는지 스스로 익숙히는 좋은 출발점이 됩니다. 주 인터페이스, 프로퍼티, 메서드가 무엇인지, 주요한 유즈 케이스가 어떻게 되는지 배우고, 어떻게 그 기능을 간단시 서술할지 고민하세요. 
    4. +
  4. 기술문의 활용: API 표준화에 참여했거나 브라우저에서 그 스팩을 구현한 누군가에게 기술문의를 할 수 있는 나만의 연락처를 찾을 수 있다면 정말 좋습니다. 다음을 참고하세요. +
      +
    • 관련 업무를 보는 회사에서 근무한다면 사내 주소록
      • +
    • 그 API에 대한 토론 채널에 참여한 공개 메일링 리스트. 모질라의 dev-platform, dev-webapi 목록, public-webapps 같은 W3C 목록 참고
      • +
    • 스팩 문서. 예를 들면 Web Audio API 문서 상단에는 저자들의 연락처가 있음.
      • +
    +
    5. +
+ +

문서 구조

+ +
+
API 레퍼런스 문서에 필요한 것은 무엇일까요? 
+
이 문서는 완벽한 API 레퍼런스 문서에 필요한 것들을 설명합니다. 
+
페이지 타입
+
MDN에서 반복적으로 사용되는 페이지 타입들이 있습니다. 이 문서는 그 타입들의 목적을 설명하고 신규 문서를 만들때 사용할 수 있는 템플릿 예제를 제공합니다. 
+
+ +

페이지의 기능

+ +

API 레퍼런스 문서를 위한 페이지 기능을 생성하는 방법을 설명합니다. 

+ +
+
API 레퍼런스 사이드바
+
작성한 MDN API 레퍼런스 문서에 사이드바를 추가할 때, 여러분은 API와 관련된 인터페이스 튜토리얼, 다른 자료 링크를 맘대로 출력할 수 있습니다. 이 문서는 그 방법을 설명합니다. 
+
API 문법 섹션
+
MDN 참조 문서에서 문법 섹션은 그 기능이 가지고 있는 정확한 문법을 기술한 박스형태를 띄고 있다. (어떤 매개변수가 사용가능한지, 어떤 것이 옵션인지 등) 그 문서는 레퍼런스 문서를 위한 문법 섹션 작성법에 대해 설명합니다. 
+
예제 코드
+
웹 플랫폼 기능 사용법을 설명하는 페이지에는 어김없이 많은 예제 코드가 있습니다. 이 문서는 페이지에 예제 코드를 추가하기 위한 각각의 가능한 메카니즘을 기술합니다. 무엇을 언제 사용해야 하는지도 함께요.
+
스펙 테이블
+
MDN의 모든 레퍼런스 페이지는 API나 기술이 정의된 스팩, 또는 그 스팩에 대한 정보를 제공해야 합니다. 이 문서는 테이블의 형태와 제작 방법을 설명합니다. 
+
호환성 테이블
+
MDN은 오픈 웹 문서, 즉 모든 브라우저에서 공유되는 DOM, HTML, CSS, JavaScript, SVG 등과 같은 기술 문서를 위한 호환성 테이블 표준을 가지고 있습니다. 이 문서는 호환성 데이터를 MDN 페이지에 추가하는 기능 사용법을 다룹니다. 
+
diff --git a/files/ko/orphaned/mdn/tools/page_regeneration/index.html b/files/ko/orphaned/mdn/tools/page_regeneration/index.html new file mode 100644 index 0000000000..2b75d2508f --- /dev/null +++ b/files/ko/orphaned/mdn/tools/page_regeneration/index.html @@ -0,0 +1,34 @@ +--- +title: 페이지 재생성 +slug: MDN/Tools/페이지_재생성 +tags: + - Guide + - MDN Meta + - Page-level + - Tools +translation_of: MDN/Tools/Page_regeneration +--- +
{{MDNSidebar}}

MDN 사이트는 성능상의 이유로 페이지를 캐시합니다. 그 결과, 당신이 페이지에 저장한 변경 사항이 다음 번 페이지 새로 고침할 때 나타나지 않을 수 있습니다. 자주, 항상은 아니지만, 배너가 페이지 업데이트가 진행 중임을 알리는 페이지에 나타납니다. 당신은 서버에서 페이지를 새로 고침하기 위해 브라우저에 "강제 새로 고침"을 할 수 있지만, 이는 서버의 업데이트가 끝나지 않았다면 효과가 없을 지도 모릅니다.

+ +

일부 페이지(특히 첫방문landing 페이지)는 자동으로 생성하고 콘텐츠를 업데이트하기 위해 매크로를 사용합니다. 첫방문 페이지의 경우, 매크로는 글쓴이가 손수 추가할 필요 없이 새 글이 자동으로 페이지에 나열되게 합니다. 이는 오랜 공헌자에게는 편리하고, 새로 온 이들은 사이트 계층구조에 자신의 글을 링크하는 법을 모르기에 그들의 작업을 셔플에서 잃는 것을 막는 데 도움이 됩니다.

+ +

이는 (예를 들어, {{TemplateLink("Page")}} 매크로를 써서) 한 페이지의 콘텐츠를 다른 페이지로 삽입(transcluding)할 때도 사용할 수 있습니다.

+ +

MDN은 성능상의 이유로 렌더링된 콘텐츠를 캐시하기 때문에, (매크로 출력이나 삽입transcluded 페이지 같은) 원 저작물(source material)에 더해진 변경 사항은 자동으로 페이지에 반영되지 않습니다. 그러한 원 저작물에 자주 변경이 예상되는 경우, 자동 페이지 재생성 활성화를 고려할 수 있습니다.

+ +

자동 재생성을 활성화하기 위해서:

+ +
    +
  1. 편집 모드 진입을 위해 페이지 상의 편집 버튼 클릭.
    2. +
  2. 페이지 제목 아래, 페이지 제목 근처에 위치한 페이지 제목과 속성 편집 클릭. 페이지 메타데이터 필드가 나타남.
    3. +
  3. 렌더링 최대 수명값을 설정. 이 값은 캐시된 페이지의 매크로 재실행을 포함하여, 재빌드되는 일정을 결정합니다. 보통, 우리는 여기에 4내지 8시간을 사용합니다. 기술의 문서화가 빠르게 바뀌는 경우, 더 작은 수를 선택할 수 있습니다.
    4. +
  4. 페이지에 변경 사항을 저장. 리비전 코멘트에 "렌더링 최대 수명을 4시간으로 설정"과 같이, 당신이 작업한 내용을 설명하는 것은 좋은 습관입니다. 
    5. +
+ +

페이지는 당신이 지정한 일정대로 자동으로 재성성됩니다.

+ +
+

주의: "페이지 제목과 속성 편집" 옵션은 새 페이지를 만들 때는 이용할 수 없습니다. 첫 번째 저장 이후로 편집기를 다시 열어야 합니다.

+
+ +

 

diff --git a/files/ko/orphaned/places/custom_containers/index.html b/files/ko/orphaned/places/custom_containers/index.html new file mode 100644 index 0000000000..305255ee4d --- /dev/null +++ b/files/ko/orphaned/places/custom_containers/index.html @@ -0,0 +1,21 @@ +--- +title: Custom Containers +slug: Places/Custom_Containers +tags: + - Places +--- +

사용자 정의 콘테이너는 확장이나 기타 서비스가 플레이스 폴더의 결과를 동적으로 제공하는 것을 가능하게 합니다. 이 문서를 읽기 전에 질의와 결과의 작동 방법에 대한 플레이스 질의 시스템을 숙지하는 것이 좋습니다.

+ +

원격 콘테이너

+ +

원격 콘테이너는 확장 작성자 등이 플레이스 질의 결과에 콘테이너의 내용을 제공하는 방법입니다. 먼저 nsIRemoteContainer를 구현하는 콤포넌트를 생성해야 합니다. 그리고 나서, nsINavBookmarksService.createContainer를 사용하여 여러분의 콤포넌트와 연관된 북마크 폴더를 생성합니다. type 매개 변수는 콤포넌트의 contract ID를 포함한 문자열입니다. 북마크 서비스와 기타 콤포넌트는 여러분의 nsIRemoteContainer 구현을 얻기 위하여 이 contract ID를 사용하여 CreateService를 호출합니다.

+ +

여러분의 서비스가 폴더와 관련을 맺으면, 폴더가 이동하거나 삭제될 때 알림을 받게 됩니다. 이러한 동작에 대응하여 여러분의 서비스는 폴더와 관련한 관리 정보를 갱신해야 합니다.(여러분의 콘테이너를 나타내는 콘테이너 결과 노드를 결과 사용자가 열거나 닫을 때 발생하는 알림은 테스트 부족으로 주석 처리되어 있습니다.) 또한, 여러분의 서비스는 콘테이너가 읽기 전용 자식을 가지고 있는지 또는 보통의 북마크와 마찬가지로 수정이 가능한지를 선언할 수 있습니다.

+ +

모드

+ +

원격 콘테이너 구현이 사용할 수 있는 작동 모드에는 두 가지가 있습니다. 첫 번째 모드는 북마크 제공자처럼 동작하여 일반 북마크 폴더 안에 실제 북마크를 생성합니다. 이러한 예가 라이브마크 서비스입니다. 라이브마크 서비스는 피드를 읽고 해당 스트림 안의 항목에 해당하는 폴더에 북마크를 생성합니다. 이 북마크는 북마크 서비스가 관리하므로 라이브마크 서비스는 콘테이너가 언제 열리고 닫히는지 상관하지 않습니다. (폴더의 피드와 관련한 정보를 갱신하기 위하여) 폴더가 이동하거나 삭제되는 경우를 처리하는 것과 라이브마크가 읽기 전용이라고 선언하는 것만 필요합니다.

+ +

두 번째 작동 모드는 더 적극적입니다.현재 이 모드는 지원하지 않습니다. 함수 호출은 테스트 지연으로 주석 처리되어 있습니다. 서비스는 콘테이너 열기 및 닫기 동작에 대응하여 실행 중에 결과를 채울 수 있습니다. 그러므로 표시되는 순간에 더 동적인 내용을 생성할 수 있습니다. 콘테이너 형식을 가진 폴더가 열리면 서비스는 알림을 받고 콘테이너 결과 노드가 주어집니다. 그러면 서비스는 appendURINode, appendFolderNode 등을 이용하여 해당 콘테이너에 자식을 생성할 수 있습니다. appendContainerNode를 특히 주목하십시오. 이는 다른 원격 콘테이너를 생성하는데 사용할 수 있습니다. 이러한 원격 콘테이너는 어떠한 북마크 폴더와도 관련이 없습니다(관련을 맺으려면 appendFolderNode를 사용하십시오). 예를 들어, 하위 폴더와 관련한 콘테이너를 동적으로 생성할 수 있는 파일 브라우저를 생성할 수 있습니다. 각 콘테이너는 속성 백(property bag)을 가지고 있어서 경로와 같은 임의의 정보를 노드에 연결하는데 사용할 수 있다는 점을 기억하십시오.

+ +
diff --git a/files/ko/orphaned/places/instantiating_views/index.html b/files/ko/orphaned/places/instantiating_views/index.html new file mode 100644 index 0000000000..4fdcc5d1c9 --- /dev/null +++ b/files/ko/orphaned/places/instantiating_views/index.html @@ -0,0 +1,70 @@ +--- +title: Instantiating Views +slug: Places/Instantiating_Views +tags: + - Places +--- +

여러분의 확장이나 애플리케이션에서 북마크나 히스토리의 내용을 보여주려면 내장 플레이스 뷰를 사용할 수 있습니다. 이는 포괄적이며, 기본 기능을 작성하는 시간을 많이 아껴주므로 여러분은 애플리케이션을 작성하는데 집중할 수 있습니다.

+ +

다른 콘트롤 형식을 위해서 또는 더욱 사용자 정의된 뷰를 얻기 위해서 여러분 자신의 뷰를 구현할 수도 있습니다. Places:Views는 이 주제에 대해서 다룹니다.

+ +

보기

+ +

플레이스에서는 다음과 같은 내장 뷰를 이용할 수 있습니다.

+ + + +

XUL에서 생성하기

+ +
  <!-- include the places stylesheet to get the XBL bindings -->
+  <?xml-stylesheet href="chrome://browser/content/places/places.css"?>
+
+  <!-- include the required .js files -->
+  <script type="application/x-javascript"
+          src="chrome://global/content/globalOverlay.js"/>
+  <script type="application/x-javascript"
+          src="chrome://browser/content/places/utils.js"/>
+  <script type="application/x-javascript"
+          src="chrome://browser/content/places/controller.js"/>
+  <script type="application/x-javascript"
+          src="chrome://browser/content/places/treeView.js"/>
+
+  <!-- Tree View -->
+  <tree type="places" id="your_tree" place="place:..." ...>
+    <treecols>
+      <treecol id="title" flex="1" primary="true" .../>
+      ...
+    </treecols>
+    <treechildren flex="1"/>
+  </tree>
+
+  <!-- Menu View -->
+  <menu label="Your Menu">
+    <menupopup type="places" place="place:..."/>
+  </menu>
+
+  <!-- Toolbar View -->
+  <toolbaritem type="places" id="your_item" place="place:..."
+               .../>
+
+ +

스크립트에서 DOM 개체를 생성할 수도 있습니다.

+ +

스크립트 가로채기(Hookup)

+ +
var view = document.getElementById("your_view");
+view.init(null);
+view.appendController(PlacesController);
+
+ +

뷰는 null로 초기화되고(기본 뷰 구성입니다. ViewConfig 개체를 사용하여 뷰의 기능을 수정하는 것에 대한 자세한 정보는 Places:View Configurations를 참고하십시오.) 콘트롤러가 붙습니다. 뷰는 이제 사용할 준비가 되었습니다.

+ +

플레이스뷰 인터페이스

+ +

플레이스뷰 인터페이스를 통하여 뷰와 상호작용하는 것에 대한 정보는 Places:PlacesView Interface를 참고하시기 바랍니다.

+ +
diff --git a/files/ko/orphaned/places/query_system/index.html b/files/ko/orphaned/places/query_system/index.html new file mode 100644 index 0000000000..1a3dccf574 --- /dev/null +++ b/files/ko/orphaned/places/query_system/index.html @@ -0,0 +1,173 @@ +--- +title: Query System +slug: Places/Query_System +tags: + - Firefox 3 + - Places +--- +

+

Firefox의 히스토리와 북마크 데이터는 "플레이스" 질의 API를 이용하여 접근할 수 있습니다. 이 API는 히스토리, 북마크, 그리고 두 가지 모두에 대하여 복잡한 질의를 실행할 수 있는 기능을 제공합니다. 질의의 결과는 조건에 맞는 데이터의 단순 목록이나 트리 구조를 포함한 개체입니다. 질의 API와 결과 데이터의 구조에 대한 정의는 toolkit/components/places/public/nsINavHistoryService.idl에 있습니다. 이 페이지는 일반적인 작업에 대한 소개와 핵심 API 사용법에 대한 예제를 제공합니다.

+

질의 실행

+

플레이스 질의는 몇 가지 기본 요소을 가지고 있습니다.

+ +

첫 번째 단계는 질의와 옵션을 생성하고 원하는 매개 변수를 채우는 것입니다. 빈 개체를 얻으려면 nsINavHistoryService.getNewQuery()와 nsINavHistoryService.getNewQueryOptions()를 사용합니다. 이 개체의 기본 값은 모든 브라우저 히스토리를 단순 목록으로 반환하는 질의를 낳습니다.

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

결과 형식

+

nsINavHistoryQueryOptions는 resultType 속성을 가지고 있는데 이는 결과로 반환되는 그룹화와 세부사항 수준의 구성을 가능하게 합니다. 이 속성의 여러 가지 값은 아래에 나와 있습니다. 이 값은 nsINavHistoryQueryOptions의 속성이기도 한데, Components.interfaces.nsINavHistoryQueryOptions.RESULTS_AS_VISIT와 같이 접근할 수 있습니다.

+ +

기본 질의 검색 매개 변수

+

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

+

기본 질의 구성 옵션

+

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

+

복합 질의

+

하나 이상의 nsINavHistoryQuery 개체를 executeQueries()로 전달할 수 있습니다. 하나의 질의 개체 안에서 모든 매개 변수는 + + AND + 로 연결됩니다. 그리고 서로 다른 질의 개체의 조건들은 + + OR + 로 연결됩니다. 이는 여전히 표현력이 있으면서도 중첩된 절을 가진 완전한 논리 연산보다 더 간단한 구현과 인터페이스를 가능하게 합니다.

+

다음은 방문한 모든 페이지 중 제목이나 URL에 "firefox"라는 단어를 포함한 페이지나 오늘 mozilla.org에서 방문한 페이지를 질의하는 예제입니다.

+
// 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);
+
+
+ 참고: 키워드 검색은 + + OR + 질의를 가로질러 올바르게 동작하지 않습니다. 현재 작동 방식은 보통의 질의를 실행하고 나서 첫 번째 질의의 키워드를 선택하여 모든 결과를 거릅니다. (달리 이야기하면, 첫 번째 질의의 키워드는 모든 질의와 + + AND + 로 연결됩니다.) 뒤따르는 질의 개체의 키워드는 무시합니다. 이는 bug 320332입니다.
+

북마크 질의

+

간단한 북마크 질의를 실행하기 위한 빠른 시작 설명이 Accessing Bookmarks에 있습니다.

+

북마크 폴더의 내용은 질의 개체에 "folders" 멤버를 설정하는 것으로 구할 수 있습니다. 이 항목은 북마크 서비스에서 온 폴더 ID의 배열입니다. 일반적으로 이 목록에는 해당 폴더의 내용을 알려줄 하나의 폴더 ID가 있습니다. 여러 개의 폴더를 지정할 수 있으며 결과는 모든 폴더의 교집합이 됩니다.

+
+ 주의: 북마크 질의에 영향을 줄 목적으로 GROUP_BY_FOLDER 옵션이 있습니다. 이는 구현되지 않았는데 bug 331487를 참고하십시오. 북마크 계층 구조를 원한다면 항상 이 옵션을 사용해야 합니다. 이 옵션이 빠지면 질의가 반환하는 모든 폴더의 모든 북마크 항목을 단순한 목록으로 반환하도록 바뀝니다.
+

정렬에 대해서는 보통 (기본 값인) SORT_BY_NONE를 사용하는데 이는 사용자가 북마크 관리자에서 지정한 "자연스러운" 순서로 항목을 반환하기 때문입니다. 그러나 다른 정렬도 작동합니다.

+

북마크 질의에 대해서는 보통 요청한 폴더의 모든 항목을 구하기 위하여 질의 매개 변수가 없습니다. 정확하게 하나의 폴더 및 GROUP_BY_FOLDER를 지정하고 매개 변수가 없으면 이는 정확하게 하나의 폴더에 대응하므로 시스템은 훨씬 효율적인 질의를 수행하고 최신 결과를 유지하게 됩니다.

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

질의 직렬화

+

질의와 옵션 개체는 queriesToQueryString를 사용하여 "place:"로 시작하는 문자열로 직렬화할 수 있습니다. 결과 문자열은 저장하거나 북마크할 수 있습니다. "place:" URI를 북마크하면 사용자가 그것을 열 때 질의의 결과로 확장됩니다. 원본 개체는 queryStringToQueries를 사용하여 문자열로부터 직렬화를 해제할 수 있습니다.

+

주의할 점은 문자열이 비어 있으면 queryStringToQueries는 어떠한 질의 개체도 반환하지 않는다는 것입니다. 코드는 이를 처리해야 합니다. 반환되는 옵션 구조는 항상 있습니다. 옵션을 지정하지 않으면 기본 값을 갖게 됩니다. 질의 매개 변수가 없는데 입력 문자열이 빈 것이 아니면(옵션이 있었습니다) 기본 질의 값을 포함하는 하나의 질의 개체를 얻게 됩니다.

+

다음은 두 개의 질의와 하나의 옵션 개체를 직렬화하고 해제하는 예제입니다.

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

"place:" URI에서 이용 가능한 용어에 대한 참조는 Places:PlaceURIs를 참고하십시오.

+

결과 사용

+

결과를 사용하는 가장 일반적인 방법은 뷰를 구현하는 것입니다. 결과를 트리 콘트롤에 넣는 내장 뷰가 있으며 여러분 자신의 뷰를 구현할 수도 있습니다. 자세한 사항은 Places:Views를 참고하시기 바랍니다. 이 섹션은 결과를 직접 접근하는 방법에 대해서 다룹니다. 예를 들어, 여러분 자신의 뷰를 생성하거나 결과를 표시하는 대신 처리하는 경우입니다.

+

+ + 참고: 노드를 접근할 대는 참조를 유지하지 않도록 주의하십시오. 정렬과 같은 프로그래머가 실행하는 명령어 뿐만 아니라 히스토리와 북마크 시스템에서 결과로 보내는 알림은 구조가 변경되거나 노드가 삽입, 삭제, 대체되도록 합니다. +

+

executeQuery()/executeQueries()가 반환하는 nsINavHistoryResult 개체는 주어진 히스토리나 북마크 질의에 부합하는 목록을 포함합니다. 이 결과는 노드로 구성된 트리 구조에 포함됩니다. 노드 형식은 type 속성을 이용해서 구할 수 있습니다. 이 형식은 더 자세한 정보를 얻기 위해서 어떤 인테페이스를 QueryInterface 할 수 있는지 알려줍니다.

+ +

다음은 노드의 형식을 구하는 예제입니다.

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

콘테이너

+

콘테이너는 다른 콘테이너 목록과 결과 노드를 포함합니다. 각 결과는 질의의 루트를 나타내는 콘테이너를 가지고 있습니다. 이는 결과의 root 속성을 이용하여 구할 수 있습니다. 일반적인 질의에 대해서 이 루트 콘테이너는 원본 질의에서 여러분이 제공한 질의 매개 변수와 옵션을 포함한 nsINavHistoryQueryResultNode입니다. 하나의 북마크 폴더로 대응하는 질의에 대해서 이는 nsINavHistoryContainerResultNode이 됩니다.

+

콘테이너는 열리거나 닫힐 수 있습니다. 이는 트리 뷰의 열린 상태나 닫힌 상태에 해당하며 메뉴를 보이거나 감추는 것에 대응할 수 있습니다. 콘테이너의 내용을 얻으려면 먼저 콘테이너를 열어야 합니다. 대부분의 콘테이너 형식은 자신을 지연된 방식으로(lazily) 채우기 때문에 콘테이너를 여는 것은 실제 주어진 질의를 실행하는 것에 해당합니다. 콘테이너가 열린 동안에는 히스토리와 북마크 시스템의 알림을 듣고 내용을 수정하여 최신 상태로 유지합니다. 이러한 이유로 작업을 마치자 마자 콘테이너를 닫는 것이 최선인데, 이는 더 나은 성능을 제공하기 때문입니다. 콘테이너를 닫고 히스토리나 북마크 변경 알림이 도착하기 전에 다시 열면 보통 결과는 여전히 존재하고 작업은 빠르게 됩니다.

+

다음은 콘테이너를 탐색하는 예제입니다.

+
var cont = result.root;
+cont.containerOpen = true;
+for (var i = 0; i < cont.childCount; i ++) {
+  var node = cont.getChild(i);
+  dump(node.title + "\n");
+}
+cont.containerOpen = false;
+
+

결과 뷰 인터페이스

+

결과를 UI에 대응하려면 nsINavHistoryResultViewer 인터페이스를 구현하고 그것을 nsINavHistoryResult.viewer 속성과 함께 결과에 붙입니다. 사용자 동작의 결과로서 또는 북마크와 히스토리 시스템의 알림의 결과로서 결과 트리가 바뀌면 이 뷰어가 호출됩니다. 그러면 여러분의 구현은 이러한 변경을 UI에 반영하게 됩니다.

+

nsITreeBoxObject에 대한 미리 준비된 뷰 인터페이스가 제공되는데 이는 트리의 복잡한 뷰 요구사항을 관리합니다. 이 개체의 인터페이스는 nsINavHistoryResultTreeViewer (nsINavHistoryResultViewer의 파생 인터페이스)입니다. 더 자세한 정보와 예제는 Places:Views를 참고하시기 바랍니다.

+
+  
+

diff --git a/files/ko/orphaned/places/views/index.html b/files/ko/orphaned/places/views/index.html new file mode 100644 index 0000000000..7f4233cc5a --- /dev/null +++ b/files/ko/orphaned/places/views/index.html @@ -0,0 +1,43 @@ +--- +title: Views +slug: Places/Views +tags: + - Places +--- +

뷰는 nsINavHistoryResult 개체를 사용자에게 표시하는 방법입니다. 뷰는 nsINavHistoryService.idl에 정의된 nsINavHistoryResultViewer 인터페이스를 구현합니다.

+ +

대부분의 애플리케이션에서 내장 뷰를 포함한 플레이스 콘트롤 중의 하나를 사용하면 충분하고 자신의 뷰를 사용하는 복잡함을 피할 수 있습니다. 더 자세한 사항은 Instantiating Views를 참고하시기 바랍니다.

+ +

뷰 등록하기

+ +

nsINavHistoryResult에 viewer 속성을 지정하여 뷰를 등록합니다. 이 때, 결과는 주어진 뷰의 result 속성을 지정하게 됩니다.뷰의 결과 속성을 명시적으로 지정하면 안됩니다. 뷰를 초기화하려면 viewer 속성을 null로 지정합니다. 이는 뷰의 결과 속성 또한 null로 지정하게 합니다.

+ +

참조 고리에 대해 주의하십시오. 뷰와 결과는 모두 서로에 대한 참조를 가지고 있습니다. 이 개체들을 삭제하려면 result.viewer를 null로 지정하여 이 고리를 없애야 합니다. 내장 트리 뷰(아래를 참고하십시오)는 이를 자동으로 처리합니다. 트리가 소멸되거나 다른 nsITreeView가 트리와 결합하면 트리는 nsITreeView.tree = null를 호출합니다. 뷰어는 이 경우를 감지하고 자신을 결과에서 분리합니다.

+ +
내장 트리 뷰
+ +

가장 흔한 형식의 뷰는 트리 콘트롤이지만 이는 구현하기가 상대적으로 어려운 콘트롤이기도 합니다. 그러므로, 플레이스는 여러분이 결과를 트리 뷰에 표시하기를 원하는 경우를 위하여 내장 뷰 개체를 제공합니다. 이는 browser/components/places/content/treeView.js에 구현되어 있습니다.

+ +

이 개체는 nsINavHistoryResultViewer와 nsITreeView를 모두 구현합니다. 그러므로 이 개체를 사용하면 결과(플레이스 질의 시스템 참고)와 트리 사이를 중개할 수 있습니다.

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

내장 트리 뷰는 (nsINavHistoryService.idl에 선언된) nsINavHistoryResultViewObserver를 구현한 관찰자(observer) 인터페이스를 붙일 수도 있습니다. 이 관찰자 인터페이스를 이용하면 외부 콤포넌트는 어떤 일이 발생하는지 확인하고 적절한 동작을 취할 수 있습니다. 예를 들어, 플레이스 트리에서는 콘트롤러가 붙어서 무엇인가 트리에 드래그 앤 드롭되는지 알아차릴 수 있습니다. 그리고 나서 적절한 동작을 취합니다.

+ +

뷰 구현하기

+ +

사용자 정의 트리 뷰가 필요할 때는 여러분 자신의 클래스 안에 nsINavHistoryResultTreeViewer를 둘러싸는 것이 가장 쉽습니다. 예를 들어, 특별한 첫 번째 행을 구현하려면 여러분의 개체는 첫 번째 행에 대한 nsITreeView 응답을 제공하고 다른 모든 메시지는 하나 이동한 색인과 함께 내장 트리 뷰에 전달하면 됩니다.

+ +

nsINavHistoryResultNode.viewIndex 속성은 뷰에 사용하기 위하여 명시적으로 제공됩니다. 이 값은 각 노드가 생성될 때 -1로 초기화됩니다. 이 값을 사용하여 보이는 노드는 추적할 수 있습니다. 내장 트리 뷰어는 노드가 켜진 행의 색인을 보관하기 위하여 이 속성을 사용합니다.

+ +

nsINavHistoryResultViewer 또한 관찰자 인터페이스를 가지고 있어서 nsINavHistoryResultViewObserver가 변화를 관찰할 수 있도록 합니다. 그러나 이 관찰자 인터페이스는 트리만을 위한 것입니다. bug 337638는 이를 nsINavHistoryResultTreeViewer 개체로 옮기기 위한 것입니다. nsINavHistoryResultViewer의 다른 구현은 자신의 관찰자를 이용해야 합니다.

+ +
diff --git a/files/ko/orphaned/theme_packaging/index.html b/files/ko/orphaned/theme_packaging/index.html new file mode 100644 index 0000000000..0ff635c4aa --- /dev/null +++ b/files/ko/orphaned/theme_packaging/index.html @@ -0,0 +1,98 @@ +--- +title: Theme Packaging +slug: Theme_Packaging +tags: + - Add-ons + - Themes + - Toolkit API +--- +

이 문서는 파이어폭스나 썬더버드에서 테마를 포장하는 방법에 대해서 기술하고 있습니다.

+

준비사항

+

파이어폭스나 썬더버드의 테마를 만들 때에는 Cascading Stylesheets(CSS) 에 대한 지식이 필수적이며, XBL에 대한 지식도 필요할 수 있습니다. 또한, 그래픽 디자인 및 미적 감각(...은 아닐지도)도 필요합니다. 하지만, 이 문서에서는 파이어폭스의 테마 창에서 보여질 수 있도록 테마를 포장하는 방법에 대해서만 기술할 것입니다.

+

테마 파일의 구조

+

파이어폭스/썬더버드의 테마는 다음과 같은 구조의 JAR 파일로 포장됩니다.

+
theme.jar:
+  install.rdf
+  contents.rdf
+  preview.png
+  icon.png
+  browser/files
+  global/files
+  mozapps/files
+  communicator/files
+  ...
+
+ +

install.rdf

+

install.rdf manifest 는 다음과 같이 만들 수 있습니다:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:type>4</em:type>more properties
+  </Description>
+</RDF>
+
+

install.rdf 에 본적으로 들어가야 하는 속성들

+

install.rdf 파일에는 다음과 같은 속성들이 들어가야 합니다. 상세한 정보는 install.rdf Reference 에서 얻을 수 있습니다.

+ +

install.rdf 에 선택적으로 들어갈 수 있는 속성들

+ +

만약 여러분의 테마가 http://addons.mozilla.org 웹사이트에 게시된다면 updateURL 속성은 포함시키면 안 됩니다.

+

샘플 install.rdf 파일

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id>
+    <em:version>1.0</em:version>
+    <em:type>4</em:type>
+
+    <!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>0.8</em:minVersion>
+        <em:maxVersion>0.9</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Front End MetaData -->
+    <em:name>New Theme 1</em:name>
+    <em:description>A test theme for Firefox</em:description>
+    <em:creator>Ben Goodger</em:creator>
+    <em:contributor>John Doe</em:contributor>
+    <em:homepageURL>http://www.bengoodger.com/</em:homepageURL>
+
+    <!-- Front End Integration Hooks (used by Theme Manager)-->
+    <em:internalName>newtheme1</em:internalName>
+  </Description>
+</RDF>
+
+

아래의 것은 통상적인 타겟 어플리케이션의 GUID 입니다. 여러분은 이 GUID 를 여러분의 targetApplication 속성에 정의할 수 있습니다:

+
Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
+Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}
+
diff --git a/files/ko/orphaned/tools/add-ons/dom_inspector/index.html b/files/ko/orphaned/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..d84e82b45e --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{ToolsSidebar}}

DOMi로도 알려진 DOM Inspector는 문서 - 보통 웹 페이지 또는 XUL windows - 의 Document Object Model을 검증, 검색, 편집하는데 사용되는 Mozilla 도구입니다.

+ +

DOMi에 대한 더 많은 정보를 위해서는 DOM Inspector page at MozillaZine를 보십시오.

+ +

{{ languages( { "en": "en/DOM_Inspector" } ) }}

diff --git a/files/ko/orphaned/tools/add-ons/index.html b/files/ko/orphaned/tools/add-ons/index.html new file mode 100644 index 0000000000..24ffbe79e9 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{ToolsSidebar}}

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html b/files/ko/orphaned/using_mozilla_in_testing_and_debugging_web_sites/index.html new file mode 100644 index 0000000000..194ca2c7b7 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
+

Original Document Information

+ +
diff --git a/files/ko/orphaned/web/css/index/index.html b/files/ko/orphaned/web/css/index/index.html new file mode 100644 index 0000000000..953130cd26 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

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

diff --git a/files/ko/orphaned/web/html/element/command/index.html b/files/ko/orphaned/web/html/element/command/index.html new file mode 100644 index 0000000000..8353384f2a --- /dev/null +++ b/files/ko/orphaned/web/html/element/command/index.html @@ -0,0 +1,111 @@ +--- +title: +slug: Web/HTML/Element/command +tags: + - HTML + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/command +--- +
{{obsolete_header()}}
+ +

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

+ +
+

The <command> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.

+
+ + + + + + + + + + + + + + + + + + + + + + + + +
Content categoriesFlow content, phrasing content, metadata content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionThe start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden.
Permitted parent elements{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.
DOM interface{{domxref("HTMLCommandElement")}}
+ +

Attributes

+ +

This element includes the global attributes.

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

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

    +
    • +
  • +

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

    +
    • +
  • +

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

    +
    • +
+
+
+ +

Examples

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

Specifications

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

Browser compatibility

+ + + +

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

+ +

{{ HTMLRef }}

diff --git a/files/ko/orphaned/web/html/element/element/index.html b/files/ko/orphaned/web/html/element/element/index.html new file mode 100644 index 0000000000..be045093a5 --- /dev/null +++ b/files/ko/orphaned/web/html/element/element/index.html @@ -0,0 +1,57 @@ +--- +title: +slug: Web/HTML/Element/element +translation_of: Web/HTML/Element/element +--- +
{{HTMLRef}}{{obsolete_header}}
+ +

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

+ +
+

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

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

Attributes

+ +

This element includes the global attributes.

+ +

Specifications

+ +

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

+ +

Browser compatibility

+ + + +

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

+ +

See also

+ +
    +
  • Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}
    • +
diff --git a/files/ko/orphaned/web/html/global_attributes/dropzone/index.html b/files/ko/orphaned/web/html/global_attributes/dropzone/index.html new file mode 100644 index 0000000000..15d26aad15 --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
+ +

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

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

명세

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

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ + diff --git a/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/orphaned/web/javascript/differential_inheritance_in_javascript/index.html new file mode 100644 index 0000000000..70fd4256c3 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

Introduction

+ +

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

+ +

Example

+ + + +

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

+ +
Object.prototype.inherit = function(){
+  // Create a new object with this as its prototype
+  var p = Object.create(this);
+
+  /* actually not necessary:
+  // Apply the constructor on the new object
+  this.constructor.apply(p, arguments);
+  */
+
+  return p;
+};
+
+ +

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

+ +
var root = {}; // Could be any object with any prototype object
+
+var record = root.inherit();
+record.toString = function(){ return "a Record"; };
+
+var person = root.inherit();
+person.firstName = false;
+person.lastName = false;
+person.toString = function(){
+    if (this.firstName) {
+        if (this.lastName) {
+            return this.firstName + " " + this.lastName;
+        } else {
+            return this.firstName;
+        }
+    } else if (this.lastName) {
+        return this.lastName;
+    } else {
+        return "a Person";
+    }
+};
+
+JoePerson = person.inherit();
+JoePerson.firstName = "Joe";
+alert( JoePerson.toString() );
+
+ +

See also

+ + diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html new file mode 100644 index 0000000000..05deb2017f --- /dev/null +++ b/files/ko/orphaned/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 +--- +

이번 릴리즈의 새 기능

+

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

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

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

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

+ +

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

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

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

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

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

+

미리 알고 있어야 할 것

+

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

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

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

+

JavaScript 버전

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

표1: JavaScript와 Navigator 버전
+
+Each version of the Netscape Enterprise Server also supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of the Enterprise Server, this manual uses an abbreviation to indicate the server version in which each feature was implemented. +

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

Table 2: Abbreviations of Netscape Enterprise Server versions +

+

JavaScript 정보를 찾을 수 있는 곳

+

The core JavaScript documentation includes the following books: +

+ +

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

+

문서 규약

+

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

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

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

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

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

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

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html new file mode 100644 index 0000000000..20601a0e81 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

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

+

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

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

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

+

クラスの定義

+

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

+

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

+

サブクラスと継承

+

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

+

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

+

プロパティの追加と削除

+

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

+

違いの概要

+

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

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

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

+
+

{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html new file mode 100644 index 0000000000..d969b378f4 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

정규표현식 만들기

+

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

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

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

+
+

 

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html new file mode 100644 index 0000000000..3238e19b0f --- /dev/null +++ b/files/ko/orphaned/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 +--- +

getter/setter 정의하기

+ +

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

+ +

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

+ +

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

+ +
    +
  • o.a - 수
    • +
  • o.b - o.a 더하기 1을 반환하는 getter
    • +
  • o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter
    • +
+ +
js> o = new Object;
+[object Object]
+js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
+[object Object]
+js> o.a
+7
+js> o.b
+8
+js> o.c = 50
+js> o.a
+25
+js>
+
+ +

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

+ +

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

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

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

+ +
js> var now = new Date;
+js> print(now.year);
+2000
+js> now.year=2001;
+987617605170
+js> print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+ +
JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 getter =, setter =이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.
+ +

 

+ +

요약

+ +

getter/setter를

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

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

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

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

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

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

+ +

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html new file mode 100644 index 0000000000..8e91a2007f --- /dev/null +++ b/files/ko/orphaned/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 +--- +

메소드 정의

+

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

+
object.methodname = function_name
+
+

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

+

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

+
object.methodname(params);
+
+

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

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

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

+

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

+
this.displayCar = displayCar;
+
+

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

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

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

+
car1.displayCar()
+car2.displayCar()
+
+

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

+

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

+

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html new file mode 100644 index 0000000000..17c2aa7de8 --- /dev/null +++ b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html @@ -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 +--- +

개체 형식에 속성 정의하기

+

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

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

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html new file mode 100644 index 0000000000..1b6f50cc11 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

속성 제거

+

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

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

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

+
g = 17;
+delete g;
+
+

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html new file mode 100644 index 0000000000..8345ba1478 --- /dev/null +++ b/files/ko/orphaned/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/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html new file mode 100644 index 0000000000..84b9df2c2d --- /dev/null +++ b/files/ko/orphaned/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 +--- +

개체 속성 접근하기

+

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

+

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

+

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html new file mode 100644 index 0000000000..552347b70e --- /dev/null +++ b/files/ko/orphaned/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 +--- +

생성자 함수 사용하기

+

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

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

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

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

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

+

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

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

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

+

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

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

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

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

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

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

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

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

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

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

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

+
car2.owner.name
+
+

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

+
car1.color = "black"
+
+

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

+

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html new file mode 100644 index 0000000000..0ed663ae1f --- /dev/null +++ b/files/ko/orphaned/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 +--- +

this를 사용한 개체 참조

+

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

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

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

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

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

+
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+      onclick="this.form.text1.value=this.form.name">
+</p>
+</form>
+
+

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html new file mode 100644 index 0000000000..d9f8bb0bf9 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

표현식

+

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

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

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

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

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html new file mode 100644 index 0000000000..310ab25c67 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

JavaScript란 무엇인가?

+

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

+

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

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

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

+

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

+

JavaScript와 Java

+

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

+

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

+

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

+

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

+

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

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

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

JavaScript와 ECMAScript 명세

+

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

+

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

+

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

+

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

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

JavaScript 1.3

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

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

JavaScript 1.4

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

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

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

+

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

+

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

+

JavaScript 문서 vs ECMAScript 명세서

+

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

+

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

+

JavaScript와 ECMAScript 용어

+

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

+

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

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

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

+

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_JavaScriptu" } ) }}

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html new file mode 100644 index 0000000000..abe9ff83f4 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

객체와 속성

+

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

+
객체이름.속성이름
+
+

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

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

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

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

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

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

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

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

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

{{ languages( { "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142a\u015bciwo\u015bci" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html new file mode 100644 index 0000000000..dbc284f12f --- /dev/null +++ b/files/ko/orphaned/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 +--- +

할당 연산자

+

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

+

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

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

표: 할당 연산자

+

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

diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html new file mode 100644 index 0000000000..53b8e67492 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

연산자

+

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

+ +

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

+
operand1 operator operand2
+
+

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

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

+
operator operand
+
+

혹은 +

+
operand operator
+
+

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

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

+

연산자 우선순위

+

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

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

표: 연산자 우선순위 +

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

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

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }} diff --git a/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/orphaned/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html new file mode 100644 index 0000000000..1f6ef48f3a --- /dev/null +++ b/files/ko/orphaned/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 +--- +

Array 개체

+

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

+

 

+

배열 만들기

+

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

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

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

+

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

+

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

+
billingMethod = new Array(5)
+
+

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

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

배열에 원소 넣기

+

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

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

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

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

배열 원소 참조하기

+

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

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

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

+

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

+

 

+

Array 개체의 메소드

+

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

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

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

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

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

+
var sortFn = function(a,b){
+    if (a[a.length - 1] < b[b.length - 1]) return -1;
+    if (a[a.length - 1] > b[b.length - 1]) return 1;
+    if (a[a.length - 1] == b[b.length - 1]) return 0;
+    }
+myArray.sort(sortFn); // 배열을 정렬했으므로 myArray = ["Wind","Fire","Rain"]가 되었습니다.
+
+
    +
  • unshift 메소드는 하나 또는 그 이상의 원소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.
    • +
+

2차원 배열

+

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

+
a = new Array(4)
+for (i=0; i < 4; i++) {
+   a[i] = new Array(4)
+   for (j=0; j < 4; j++) {
+      a[i][j] = "["+i+","+j+"]"
+   }
+}
+
+

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

+
Row 0:[0,0][0,1][0,2][0,3]
+Row 1:[1,0][1,1][1,2][1,3]
+Row 2:[2,0][2,1][2,2][2,3]
+Row 3:[3,0][3,1][3,2][3,3]
+
+

배열과 정규 표현식

+

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

+

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

diff --git a/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/orphaned/web/javascript/reference/global_objects/bigint/prototype/index.html new file mode 100644 index 0000000000..6ba56eb37e --- /dev/null +++ b/files/ko/orphaned/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 +--- +
{{JSRef}}
+ +

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

+ +

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

+ +

설명

+ +

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

+ +

속성

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

메서드

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

명세

+ + + + + + + + + + + + +
SpecificationStatus
BigInt.prototypeStage 3
+ +

브라우저 호환성

+ + + +

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

diff --git a/files/ko/orphaned/web/security/information_security_basics/index.html b/files/ko/orphaned/web/security/information_security_basics/index.html new file mode 100644 index 0000000000..48eeaed961 --- /dev/null +++ b/files/ko/orphaned/web/security/information_security_basics/index.html @@ -0,0 +1,28 @@ +--- +title: Information Security Basics +slug: Web/Security/정보_보안_기본 +translation_of: Web/Security/Information_Security_Basics +--- +

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

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

참고

+ + diff --git a/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html b/files/ko/orphaned/windows_and_menus_in_xulrunner/index.html new file mode 100644 index 0000000000..53fc6eea99 --- /dev/null +++ b/files/ko/orphaned/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 +--- +

+{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} +

XULRunner을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 알아보겠습니다. 앞 장에서 우리는 XULRunner를 설치하고 기본적인 테스트 프로그램을 만들어 보았습니다. 이번에는 사용자 인터페이스를 갖는 프로그램을 만들어 보겠습니다. +

+
  • 윈도우와 대화창 +
  • 메뉴와 툴바 +
  • 운영체제 기본 대화창 +
  • 콘트롤 및 위젯 +
+

윈도우

+

각 윈도우나 대화창은 각 XUL 파일로 만듭니다. XUL 파일 상위에는 우리가 사용할 CSS와 DTD를 선언하게 됩니다. <window>는 기본 창을 만드는 요소 입니다. 콘트롤에 대한 제목과 캡션, 창의 가로 및 세로폭을 정하는 속성을 가지고 있습니다. 아마 대부분은 아시겠지만 XUL 파일 하나 당 하나의 <window> 요소를 가집니다. 예를 들어, +

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?>
+
+<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">
+
+<window id="main"
+    title="&title;"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script src="main.js"/>
+...
+</window>
+
+

이제 CSS와 DTD에 대해 알아보겠습니다. CSS는 HTML에서 사용하는 방법과 같이 각 요소에 대한 디자인 및 형식을 지정해 줍니다. DTD는 XUL파일에서 언어별 지역화를 위해 바로 저장할 수 없는 제목이나 라벨 같은 문자열을 참조하는 방식으로 사용합니다. 메시지를 변경하거나 지역화 작업에 용이 합니다. 예제에서 창 title을 표시하는 방법을 참고하세요. 또한, <script> 요소를 이용하여 XUL 파일내의 동작을 제어해 줍니다. CSS, DTD, 자바스크립트를 XUL 파일에 기본적으로 삽입하는 것은 가장 기본적인 코드입니다. +

XUL 애플리케이션을 실행하려면 XULRunner가 윈도우 기본 아이콘을 제공 합니다만 원하는 아이콘으로 바꾸려면 윈도우 아이콘을 참고해서 바꿀 수 있습니다. +

+

메뉴와 툴바

+

대부분 데스크톱 애플리케이션은 자체 폼 도구를 가지고 있어서 메뉴나 툴바 구조를 추가하고 변경하는 데 매우 어렵습니다. 하지만 XUL에서는 쉽게 요소만 추가하면 만들어 낼 수 있습니다. +

아래는 XUL 메뉴와 툴바를 만드는 아주 간단한 예제 코드입니다. +

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?>
+
+<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">
+
+<window id="main"
+    title="&title;"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script src="main.js"/>
+  <toolbox>
+    <menubar id="menubar">
+      <menu id="file-menu" label="&file;">
+        <menupopup id="file-popup">
+          <menuitem label="&file.new'" oncommand="doFileNew();"/>
+          <menuitem label="&file.open;" oncommand="doFileOpen();"/>
+          <menuitem label="&file.save;" oncommand="doFileSave();"/>
+          <menuseparator/>
+          <menuitem label="&file.exit;" oncommand="doFileExit();"/>
+        </menupopup>
+      </menu>
+      <menu id="edit-menu" label="&edit;">
+        <menupopup id="edit-popup">
+          <menuitem label="&edit.undo;" oncommand="doEditUndo();"/>
+          <menuitem label="&edit.redo;" oncommand="doEditRedo();"/>
+        </menupopup>
+      </menu>
+    </menubar>
+    <toolbar id="main-toolbar">
+      <toolbarbutton id="open" label="&file.open;" oncommand="doFileOpen();"/>
+      <toolbarbutton id="save" label="&file.save;" oncommand="doFileSave();"/>
+    </toolbar>
+  </toolbox>
+...
+</window>
+
+

각 메뉴와 툴바의 라벨을 표시하기 위해 엔티티-참조를 사용했고, oncommand 이벤트는 HTML에서 onclick를 쓰는 것 처럼 자바 스크립트를 참조합니다. XUL에서는 <var>open</var>나 <var>save</var> 같은 메뉴와 툴바의 이벤트 핸들러와 명령 수행을 위한 방식을 가지고 있습니다. +

+
<commandset>
+  <command id="cmd_open" label="&file.open;" oncommand="doFileOpen();"/>
+  <command id="cmd_save" label="&file.save;" oncommand="doFileSave();"/>
+</commandset>
+...
+<menuitem  command="cmd_open"/>
+<menuitem command="cmd_save"/>
+...
+<toolbarbutton id="open" command="cmd_open"/>
+<toolbarbutton id="save" command="cmd_save"/>
+...
+
+

또한, CSS 파일로 툴바 버튼에 그림을 추가할 수 있습니다. XUL 파일내에 아이콘 파일이 있으면 CSS로 다음과 같이 표시할 수 있습니다. +


+

+
/* 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;
+}
+
+

물론 PNG 파일을 애플리케이션에 포함해서 배포해야 합니다. +

지금까지 아주 간단한 XUL 사용자 인터페이스를 살펴 보았습니다. 다음 장에서는 XUL Runner에서 UI를 생성하는 과정을 계속 살펴 보겠습니다. +

+

참고 문서

+ +

{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} +

+
+

원본 문서

+
  • 저자: Mark Finkle +
  • 최종 수정일: October 2, 2006 +
+
+
+
+{{ languages( { "ja": "ja/Windows_and_menus_in_XULRunner" } ) }} diff --git "a/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" "b/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" new file mode 100644 index 0000000000..617dea4228 --- /dev/null +++ "b/files/ko/orphaned/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" @@ -0,0 +1,5 @@ +--- +title: 지역의 코드를 씁니다. +slug: 지역의_코드를_씁니다. +--- +

이 페이지는 연결되어 있지 않습니다.. 풍부한 MDC에 기여합니다.

diff --git "a/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" "b/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" new file mode 100644 index 0000000000..19bfdf3f81 --- /dev/null +++ "b/files/ko/orphaned/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" @@ -0,0 +1,88 @@ +--- +title: 확장기능 개발 환경 구축 +slug: 확장기능_개발_환경_구축 +--- +

이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.

+

개요

+
    +
  • Firefox의 개발세션을 실행하기 위한 개발용 사용자 프로필을 생성합니다. 그리고 about:config 에서 특정한 개발용 환경설정을 합니다.
    • +
  • 개발용 프로필에 몇가지 Firefox 개발용 확장기능을 설치합니다.
    • +
  • 당신의 프로필의 extensions 폴더안의 파일들을 수정하고 개발용 프로필과 응용프로그램을 재시작합니다.
    • +
+

개발용 프로필

+

개발 단계에서 성능저하를 방지하려면 환경 설정 및 확장과 관련된 개인 데이터의 손실을 피하기 위해 개발 작업을 위한 별도의 프로필을 사용 할 수 있습니다.

+

별도의 프로필과 -no-remote 매개 변수와 함께 응용 프로그램을 구동하여 같은 시간에 Thunderbird 또는 Firefox 의 두 개의 인스턴스를 실행 할 수 있습니다.

+

우분투:

+
/usr/bin/firefox -no-remote -P dev
+

다른 리눅스 배포판:

+
/usr/local/bin/firefox -no-remote -P dev
+
+

맥킨토시:

+
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
+
+

윈도우즈:

+
시작 -> 실행 "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+
+

Firefox 대신에 Thunderbird 또는 SeaMonkey를 시작 하려면 , 위의 예제에서 "firefox" 대신 "thunderbird" 또는 "seamonkey" 으로 대체합니다.

+

프로필 지정이 존재 하지 않는 경우 (또는 프로필을 지정 안하는 경우), Thunderbird 또는 Firefox 프로필 관리자가 표시됩니다. 기본 프로필로 실행 하기위해 프로필을 "default"로 지정합니다. (또는 "-P 를 생략합니다.).

+

(There is a thread in the Mozillazine forums that explains how to use both stable and development versions of Firefox to check extension compatibility. See Installing Firefox 3 or Minefield while keeping Firefox 2.)

+

개발용 설정

+

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 "about:config".

+

Not all preferences are defined by default, and are therefore not listed in about:config by default. You will have to create new (boolean) entries for them.

+
    +
  • javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console.
    • +
  • nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
    • +
  • browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See {{ Domxref("window.dump") }} for more info. You can also use {{ Interface("nsIConsoleService") }} from a privileged script.
    • +
  • javascript.options.strict = true. 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 Console2.
    • +
  • extensions.logging.enabled = true. This will send more detailed information about installation and update problems to the Error Console. (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.)
    • +
  • You might also want to set dom.report_all_js_exceptions = true. See Exception logging in JavaScript for details.
    • +
+

Accessing Firefox development preferences

+

To change preference settings in Firefox or SeaMonkey, type about:config in the Location Bar. Alternatively, use the Extension Developer's Extension, which provides a menu interface for Firefox settings.

+

Accessing Thunderbird development preferences

+

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.

+

개발에 도움되는 확장 기능

+

이 확장 기능들이 당신이 개발을 할때 도움을 줄 수 있습니다.

+ +

 

+

Firefox extension proxy file

+

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.

+
    +
  1. Get the extension ID from the extension's install.rdf file.
    2. +
  2. 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}"). (How to find your profile directory) Alternatively, rather than using a GUID, create a unique ID using the format "name@youremail" (for example chromebug@mydomain.com).
    3. +
  3. The contents of this file should be the path to the directory that contains your install.rdf file. (eg. "/full/path/to/yourExtension/". Windows users should use the drive name (CAPS) and backslashes instead of frontslashes (for example "C:\full\path\to\yourExtension\" or "C:\sam\workspace\toolbar\helloWorldtoolbar\").Remember to include the closing slash and remove any trailing whitespace. +
      +
    • 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 extensions.cache, extensions.ini, extensions.rdf, compreg.dat, and xpti.dat 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.)
      • +
    +
    4. +
  4. Place the file in the extensions folder of your profile and restart the application.
    5. +
+

Using directories rather than JARs

+

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

+
content	myExtension	jar:chrome/myExtension.jar!/content/
+
+

use

+
content	myExtension	chrome/content/
+
diff --git a/files/ko/places/custom_containers/index.html b/files/ko/places/custom_containers/index.html deleted file mode 100644 index 305255ee4d..0000000000 --- a/files/ko/places/custom_containers/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Custom Containers -slug: Places/Custom_Containers -tags: - - Places ---- -

사용자 정의 콘테이너는 확장이나 기타 서비스가 플레이스 폴더의 결과를 동적으로 제공하는 것을 가능하게 합니다. 이 문서를 읽기 전에 질의와 결과의 작동 방법에 대한 플레이스 질의 시스템을 숙지하는 것이 좋습니다.

- -

원격 콘테이너

- -

원격 콘테이너는 확장 작성자 등이 플레이스 질의 결과에 콘테이너의 내용을 제공하는 방법입니다. 먼저 nsIRemoteContainer를 구현하는 콤포넌트를 생성해야 합니다. 그리고 나서, nsINavBookmarksService.createContainer를 사용하여 여러분의 콤포넌트와 연관된 북마크 폴더를 생성합니다. type 매개 변수는 콤포넌트의 contract ID를 포함한 문자열입니다. 북마크 서비스와 기타 콤포넌트는 여러분의 nsIRemoteContainer 구현을 얻기 위하여 이 contract ID를 사용하여 CreateService를 호출합니다.

- -

여러분의 서비스가 폴더와 관련을 맺으면, 폴더가 이동하거나 삭제될 때 알림을 받게 됩니다. 이러한 동작에 대응하여 여러분의 서비스는 폴더와 관련한 관리 정보를 갱신해야 합니다.(여러분의 콘테이너를 나타내는 콘테이너 결과 노드를 결과 사용자가 열거나 닫을 때 발생하는 알림은 테스트 부족으로 주석 처리되어 있습니다.) 또한, 여러분의 서비스는 콘테이너가 읽기 전용 자식을 가지고 있는지 또는 보통의 북마크와 마찬가지로 수정이 가능한지를 선언할 수 있습니다.

- -

모드

- -

원격 콘테이너 구현이 사용할 수 있는 작동 모드에는 두 가지가 있습니다. 첫 번째 모드는 북마크 제공자처럼 동작하여 일반 북마크 폴더 안에 실제 북마크를 생성합니다. 이러한 예가 라이브마크 서비스입니다. 라이브마크 서비스는 피드를 읽고 해당 스트림 안의 항목에 해당하는 폴더에 북마크를 생성합니다. 이 북마크는 북마크 서비스가 관리하므로 라이브마크 서비스는 콘테이너가 언제 열리고 닫히는지 상관하지 않습니다. (폴더의 피드와 관련한 정보를 갱신하기 위하여) 폴더가 이동하거나 삭제되는 경우를 처리하는 것과 라이브마크가 읽기 전용이라고 선언하는 것만 필요합니다.

- -

두 번째 작동 모드는 더 적극적입니다.현재 이 모드는 지원하지 않습니다. 함수 호출은 테스트 지연으로 주석 처리되어 있습니다. 서비스는 콘테이너 열기 및 닫기 동작에 대응하여 실행 중에 결과를 채울 수 있습니다. 그러므로 표시되는 순간에 더 동적인 내용을 생성할 수 있습니다. 콘테이너 형식을 가진 폴더가 열리면 서비스는 알림을 받고 콘테이너 결과 노드가 주어집니다. 그러면 서비스는 appendURINode, appendFolderNode 등을 이용하여 해당 콘테이너에 자식을 생성할 수 있습니다. appendContainerNode를 특히 주목하십시오. 이는 다른 원격 콘테이너를 생성하는데 사용할 수 있습니다. 이러한 원격 콘테이너는 어떠한 북마크 폴더와도 관련이 없습니다(관련을 맺으려면 appendFolderNode를 사용하십시오). 예를 들어, 하위 폴더와 관련한 콘테이너를 동적으로 생성할 수 있는 파일 브라우저를 생성할 수 있습니다. 각 콘테이너는 속성 백(property bag)을 가지고 있어서 경로와 같은 임의의 정보를 노드에 연결하는데 사용할 수 있다는 점을 기억하십시오.

- -
diff --git a/files/ko/places/instantiating_views/index.html b/files/ko/places/instantiating_views/index.html deleted file mode 100644 index 4fdcc5d1c9..0000000000 --- a/files/ko/places/instantiating_views/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: Instantiating Views -slug: Places/Instantiating_Views -tags: - - Places ---- -

여러분의 확장이나 애플리케이션에서 북마크나 히스토리의 내용을 보여주려면 내장 플레이스 뷰를 사용할 수 있습니다. 이는 포괄적이며, 기본 기능을 작성하는 시간을 많이 아껴주므로 여러분은 애플리케이션을 작성하는데 집중할 수 있습니다.

- -

다른 콘트롤 형식을 위해서 또는 더욱 사용자 정의된 뷰를 얻기 위해서 여러분 자신의 뷰를 구현할 수도 있습니다. Places:Views는 이 주제에 대해서 다룹니다.

- -

보기

- -

플레이스에서는 다음과 같은 내장 뷰를 이용할 수 있습니다.

- -
    -
  • 트리
    • -
  • 메뉴
    • -
  • 도구 막대 - 포함된 폴더는 메뉴 뷰를 사용
    • -
- -

XUL에서 생성하기

- -
  <!-- include the places stylesheet to get the XBL bindings -->
-  <?xml-stylesheet href="chrome://browser/content/places/places.css"?>
-
-  <!-- include the required .js files -->
-  <script type="application/x-javascript"
-          src="chrome://global/content/globalOverlay.js"/>
-  <script type="application/x-javascript"
-          src="chrome://browser/content/places/utils.js"/>
-  <script type="application/x-javascript"
-          src="chrome://browser/content/places/controller.js"/>
-  <script type="application/x-javascript"
-          src="chrome://browser/content/places/treeView.js"/>
-
-  <!-- Tree View -->
-  <tree type="places" id="your_tree" place="place:..." ...>
-    <treecols>
-      <treecol id="title" flex="1" primary="true" .../>
-      ...
-    </treecols>
-    <treechildren flex="1"/>
-  </tree>
-
-  <!-- Menu View -->
-  <menu label="Your Menu">
-    <menupopup type="places" place="place:..."/>
-  </menu>
-
-  <!-- Toolbar View -->
-  <toolbaritem type="places" id="your_item" place="place:..."
-               .../>
-
- -

스크립트에서 DOM 개체를 생성할 수도 있습니다.

- -

스크립트 가로채기(Hookup)

- -
var view = document.getElementById("your_view");
-view.init(null);
-view.appendController(PlacesController);
-
- -

뷰는 null로 초기화되고(기본 뷰 구성입니다. ViewConfig 개체를 사용하여 뷰의 기능을 수정하는 것에 대한 자세한 정보는 Places:View Configurations를 참고하십시오.) 콘트롤러가 붙습니다. 뷰는 이제 사용할 준비가 되었습니다.

- -

플레이스뷰 인터페이스

- -

플레이스뷰 인터페이스를 통하여 뷰와 상호작용하는 것에 대한 정보는 Places:PlacesView Interface를 참고하시기 바랍니다.

- -
diff --git a/files/ko/places/query_system/index.html b/files/ko/places/query_system/index.html deleted file mode 100644 index 1a3dccf574..0000000000 --- a/files/ko/places/query_system/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Query System -slug: Places/Query_System -tags: - - Firefox 3 - - Places ---- -

-

Firefox의 히스토리와 북마크 데이터는 "플레이스" 질의 API를 이용하여 접근할 수 있습니다. 이 API는 히스토리, 북마크, 그리고 두 가지 모두에 대하여 복잡한 질의를 실행할 수 있는 기능을 제공합니다. 질의의 결과는 조건에 맞는 데이터의 단순 목록이나 트리 구조를 포함한 개체입니다. 질의 API와 결과 데이터의 구조에 대한 정의는 toolkit/components/places/public/nsINavHistoryService.idl에 있습니다. 이 페이지는 일반적인 작업에 대한 소개와 핵심 API 사용법에 대한 예제를 제공합니다.

-

질의 실행

-

플레이스 질의는 몇 가지 기본 요소을 가지고 있습니다.

- -

첫 번째 단계는 질의와 옵션을 생성하고 원하는 매개 변수를 채우는 것입니다. 빈 개체를 얻으려면 nsINavHistoryService.getNewQuery()와 nsINavHistoryService.getNewQueryOptions()를 사용합니다. 이 개체의 기본 값은 모든 브라우저 히스토리를 단순 목록으로 반환하는 질의를 낳습니다.

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

결과 형식

-

nsINavHistoryQueryOptions는 resultType 속성을 가지고 있는데 이는 결과로 반환되는 그룹화와 세부사항 수준의 구성을 가능하게 합니다. 이 속성의 여러 가지 값은 아래에 나와 있습니다. 이 값은 nsINavHistoryQueryOptions의 속성이기도 한데, Components.interfaces.nsINavHistoryQueryOptions.RESULTS_AS_VISIT와 같이 접근할 수 있습니다.

-
    -
  • RESULTS_AS_URI: 기본 값이며 질의에 부합하는 각 URI에 대하여 RESULT_TYPE_URI 형식의 하나의 결과 노드를 반환합니다.
    • -
  • RESULTS_AS_VISIT: 이 옵션은 방문했던 페이지가 주어진 질의에 부합할 때마다 하나의 항목을 반환합니다. 결과는 다른 날짜를 가진 중복된 URL 항목을 포함할 수 있습니다. 노드는 RESULT_TYPE_VISIT 형식이며 각 방문에 대한 세션 ID를 제공합니다. 이 세션 ID는 링크를 클릭해서 방문한 모든 페이지에 대해 동일합니다. 사용자가 새로운 URL을 입력하거나 북마크를 따라가면 새로운 세션이 시작합니다.
    • -
  • RESULTS_AS_FULL_VISIT: 이는 RESULT_TYPE_VISIT의 확장된 버전입니다. 결과는 RESULT_TYPE_FULL_VISIT 형식으로서 방문에 대한 추가 정보와 이동 방식(입력, 리디렉트, 링크 등)에 대한 정보를 가지고 있습니다.
    • -
-

기본 질의 검색 매개 변수

-

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

-

기본 질의 구성 옵션

-

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

-

복합 질의

-

하나 이상의 nsINavHistoryQuery 개체를 executeQueries()로 전달할 수 있습니다. 하나의 질의 개체 안에서 모든 매개 변수는 - - AND - 로 연결됩니다. 그리고 서로 다른 질의 개체의 조건들은 - - OR - 로 연결됩니다. 이는 여전히 표현력이 있으면서도 중첩된 절을 가진 완전한 논리 연산보다 더 간단한 구현과 인터페이스를 가능하게 합니다.

-

다음은 방문한 모든 페이지 중 제목이나 URL에 "firefox"라는 단어를 포함한 페이지나 오늘 mozilla.org에서 방문한 페이지를 질의하는 예제입니다.

-
// 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);
-
-
- 참고: 키워드 검색은 - - OR - 질의를 가로질러 올바르게 동작하지 않습니다. 현재 작동 방식은 보통의 질의를 실행하고 나서 첫 번째 질의의 키워드를 선택하여 모든 결과를 거릅니다. (달리 이야기하면, 첫 번째 질의의 키워드는 모든 질의와 - - AND - 로 연결됩니다.) 뒤따르는 질의 개체의 키워드는 무시합니다. 이는 bug 320332입니다.
-

북마크 질의

-

간단한 북마크 질의를 실행하기 위한 빠른 시작 설명이 Accessing Bookmarks에 있습니다.

-

북마크 폴더의 내용은 질의 개체에 "folders" 멤버를 설정하는 것으로 구할 수 있습니다. 이 항목은 북마크 서비스에서 온 폴더 ID의 배열입니다. 일반적으로 이 목록에는 해당 폴더의 내용을 알려줄 하나의 폴더 ID가 있습니다. 여러 개의 폴더를 지정할 수 있으며 결과는 모든 폴더의 교집합이 됩니다.

-
- 주의: 북마크 질의에 영향을 줄 목적으로 GROUP_BY_FOLDER 옵션이 있습니다. 이는 구현되지 않았는데 bug 331487를 참고하십시오. 북마크 계층 구조를 원한다면 항상 이 옵션을 사용해야 합니다. 이 옵션이 빠지면 질의가 반환하는 모든 폴더의 모든 북마크 항목을 단순한 목록으로 반환하도록 바뀝니다.
-

정렬에 대해서는 보통 (기본 값인) SORT_BY_NONE를 사용하는데 이는 사용자가 북마크 관리자에서 지정한 "자연스러운" 순서로 항목을 반환하기 때문입니다. 그러나 다른 정렬도 작동합니다.

-

북마크 질의에 대해서는 보통 요청한 폴더의 모든 항목을 구하기 위하여 질의 매개 변수가 없습니다. 정확하게 하나의 폴더 및 GROUP_BY_FOLDER를 지정하고 매개 변수가 없으면 이는 정확하게 하나의 폴더에 대응하므로 시스템은 훨씬 효율적인 질의를 수행하고 최신 결과를 유지하게 됩니다.

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

질의 직렬화

-

질의와 옵션 개체는 queriesToQueryString를 사용하여 "place:"로 시작하는 문자열로 직렬화할 수 있습니다. 결과 문자열은 저장하거나 북마크할 수 있습니다. "place:" URI를 북마크하면 사용자가 그것을 열 때 질의의 결과로 확장됩니다. 원본 개체는 queryStringToQueries를 사용하여 문자열로부터 직렬화를 해제할 수 있습니다.

-

주의할 점은 문자열이 비어 있으면 queryStringToQueries는 어떠한 질의 개체도 반환하지 않는다는 것입니다. 코드는 이를 처리해야 합니다. 반환되는 옵션 구조는 항상 있습니다. 옵션을 지정하지 않으면 기본 값을 갖게 됩니다. 질의 매개 변수가 없는데 입력 문자열이 빈 것이 아니면(옵션이 있었습니다) 기본 질의 값을 포함하는 하나의 질의 개체를 얻게 됩니다.

-

다음은 두 개의 질의와 하나의 옵션 개체를 직렬화하고 해제하는 예제입니다.

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

"place:" URI에서 이용 가능한 용어에 대한 참조는 Places:PlaceURIs를 참고하십시오.

-

결과 사용

-

결과를 사용하는 가장 일반적인 방법은 뷰를 구현하는 것입니다. 결과를 트리 콘트롤에 넣는 내장 뷰가 있으며 여러분 자신의 뷰를 구현할 수도 있습니다. 자세한 사항은 Places:Views를 참고하시기 바랍니다. 이 섹션은 결과를 직접 접근하는 방법에 대해서 다룹니다. 예를 들어, 여러분 자신의 뷰를 생성하거나 결과를 표시하는 대신 처리하는 경우입니다.

-

- - 참고: 노드를 접근할 대는 참조를 유지하지 않도록 주의하십시오. 정렬과 같은 프로그래머가 실행하는 명령어 뿐만 아니라 히스토리와 북마크 시스템에서 결과로 보내는 알림은 구조가 변경되거나 노드가 삽입, 삭제, 대체되도록 합니다. -

-

executeQuery()/executeQueries()가 반환하는 nsINavHistoryResult 개체는 주어진 히스토리나 북마크 질의에 부합하는 목록을 포함합니다. 이 결과는 노드로 구성된 트리 구조에 포함됩니다. 노드 형식은 type 속성을 이용해서 구할 수 있습니다. 이 형식은 더 자세한 정보를 얻기 위해서 어떤 인테페이스를 QueryInterface 할 수 있는지 알려줍니다.

-
    -
  • nsINavHistoryResultNode: 모든 노드의 기본 클래스입니다. URI, 제목, 기타 일반적인 정보를 담고 있습니다.
    • -
  • nsINavHistoryVisitResultNode: nsINavHistoryResultNode에서 파생되고, 세션 정보를 담고 있습니다.
    • -
  • nsINavHistoryFullVisitResultNode: nsINavHistoryVisitResultNode에서 파생되고, 사용자가 이 페이지를 탐색한 방법에 대한 정보를 담고 있습니다. - - 참고: 현재 구현되지 않은 상태입니다. bug 320831를 참고하십시오. -
    • -
  • nsINavHistoryContainerResultNode: 자식으로 접근할 수 있도록 하는 일반 콘테이너 노드입니다. nsINavHistoryResultNode에서 파생됩니다. 북마크 폴더는 이 형식입니다.
    • -
  • nsINavHistoryQueryResultNode: 히스토리 시스템의 질의를 나타내는 콘테이너 형식입니다. 질의 옵션과 매개 변수를 구할 수 있도록 해줍니다.
    • -
-

다음은 노드의 형식을 구하는 예제입니다.

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

콘테이너

-

콘테이너는 다른 콘테이너 목록과 결과 노드를 포함합니다. 각 결과는 질의의 루트를 나타내는 콘테이너를 가지고 있습니다. 이는 결과의 root 속성을 이용하여 구할 수 있습니다. 일반적인 질의에 대해서 이 루트 콘테이너는 원본 질의에서 여러분이 제공한 질의 매개 변수와 옵션을 포함한 nsINavHistoryQueryResultNode입니다. 하나의 북마크 폴더로 대응하는 질의에 대해서 이는 nsINavHistoryContainerResultNode이 됩니다.

-

콘테이너는 열리거나 닫힐 수 있습니다. 이는 트리 뷰의 열린 상태나 닫힌 상태에 해당하며 메뉴를 보이거나 감추는 것에 대응할 수 있습니다. 콘테이너의 내용을 얻으려면 먼저 콘테이너를 열어야 합니다. 대부분의 콘테이너 형식은 자신을 지연된 방식으로(lazily) 채우기 때문에 콘테이너를 여는 것은 실제 주어진 질의를 실행하는 것에 해당합니다. 콘테이너가 열린 동안에는 히스토리와 북마크 시스템의 알림을 듣고 내용을 수정하여 최신 상태로 유지합니다. 이러한 이유로 작업을 마치자 마자 콘테이너를 닫는 것이 최선인데, 이는 더 나은 성능을 제공하기 때문입니다. 콘테이너를 닫고 히스토리나 북마크 변경 알림이 도착하기 전에 다시 열면 보통 결과는 여전히 존재하고 작업은 빠르게 됩니다.

-

다음은 콘테이너를 탐색하는 예제입니다.

-
var cont = result.root;
-cont.containerOpen = true;
-for (var i = 0; i < cont.childCount; i ++) {
-  var node = cont.getChild(i);
-  dump(node.title + "\n");
-}
-cont.containerOpen = false;
-
-

결과 뷰 인터페이스

-

결과를 UI에 대응하려면 nsINavHistoryResultViewer 인터페이스를 구현하고 그것을 nsINavHistoryResult.viewer 속성과 함께 결과에 붙입니다. 사용자 동작의 결과로서 또는 북마크와 히스토리 시스템의 알림의 결과로서 결과 트리가 바뀌면 이 뷰어가 호출됩니다. 그러면 여러분의 구현은 이러한 변경을 UI에 반영하게 됩니다.

-

nsITreeBoxObject에 대한 미리 준비된 뷰 인터페이스가 제공되는데 이는 트리의 복잡한 뷰 요구사항을 관리합니다. 이 개체의 인터페이스는 nsINavHistoryResultTreeViewer (nsINavHistoryResultViewer의 파생 인터페이스)입니다. 더 자세한 정보와 예제는 Places:Views를 참고하시기 바랍니다.

-
-  
-

diff --git a/files/ko/places/views/index.html b/files/ko/places/views/index.html deleted file mode 100644 index 7f4233cc5a..0000000000 --- a/files/ko/places/views/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Views -slug: Places/Views -tags: - - Places ---- -

뷰는 nsINavHistoryResult 개체를 사용자에게 표시하는 방법입니다. 뷰는 nsINavHistoryService.idl에 정의된 nsINavHistoryResultViewer 인터페이스를 구현합니다.

- -

대부분의 애플리케이션에서 내장 뷰를 포함한 플레이스 콘트롤 중의 하나를 사용하면 충분하고 자신의 뷰를 사용하는 복잡함을 피할 수 있습니다. 더 자세한 사항은 Instantiating Views를 참고하시기 바랍니다.

- -

뷰 등록하기

- -

nsINavHistoryResult에 viewer 속성을 지정하여 뷰를 등록합니다. 이 때, 결과는 주어진 뷰의 result 속성을 지정하게 됩니다.뷰의 결과 속성을 명시적으로 지정하면 안됩니다. 뷰를 초기화하려면 viewer 속성을 null로 지정합니다. 이는 뷰의 결과 속성 또한 null로 지정하게 합니다.

- -

참조 고리에 대해 주의하십시오. 뷰와 결과는 모두 서로에 대한 참조를 가지고 있습니다. 이 개체들을 삭제하려면 result.viewer를 null로 지정하여 이 고리를 없애야 합니다. 내장 트리 뷰(아래를 참고하십시오)는 이를 자동으로 처리합니다. 트리가 소멸되거나 다른 nsITreeView가 트리와 결합하면 트리는 nsITreeView.tree = null를 호출합니다. 뷰어는 이 경우를 감지하고 자신을 결과에서 분리합니다.

- -
내장 트리 뷰
- -

가장 흔한 형식의 뷰는 트리 콘트롤이지만 이는 구현하기가 상대적으로 어려운 콘트롤이기도 합니다. 그러므로, 플레이스는 여러분이 결과를 트리 뷰에 표시하기를 원하는 경우를 위하여 내장 뷰 개체를 제공합니다. 이는 browser/components/places/content/treeView.js에 구현되어 있습니다.

- -

이 개체는 nsINavHistoryResultViewer와 nsITreeView를 모두 구현합니다. 그러므로 이 개체를 사용하면 결과(플레이스 질의 시스템 참고)와 트리 사이를 중개할 수 있습니다.

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

내장 트리 뷰는 (nsINavHistoryService.idl에 선언된) nsINavHistoryResultViewObserver를 구현한 관찰자(observer) 인터페이스를 붙일 수도 있습니다. 이 관찰자 인터페이스를 이용하면 외부 콤포넌트는 어떤 일이 발생하는지 확인하고 적절한 동작을 취할 수 있습니다. 예를 들어, 플레이스 트리에서는 콘트롤러가 붙어서 무엇인가 트리에 드래그 앤 드롭되는지 알아차릴 수 있습니다. 그리고 나서 적절한 동작을 취합니다.

- -

뷰 구현하기

- -

사용자 정의 트리 뷰가 필요할 때는 여러분 자신의 클래스 안에 nsINavHistoryResultTreeViewer를 둘러싸는 것이 가장 쉽습니다. 예를 들어, 특별한 첫 번째 행을 구현하려면 여러분의 개체는 첫 번째 행에 대한 nsITreeView 응답을 제공하고 다른 모든 메시지는 하나 이동한 색인과 함께 내장 트리 뷰에 전달하면 됩니다.

- -

nsINavHistoryResultNode.viewIndex 속성은 뷰에 사용하기 위하여 명시적으로 제공됩니다. 이 값은 각 노드가 생성될 때 -1로 초기화됩니다. 이 값을 사용하여 보이는 노드는 추적할 수 있습니다. 내장 트리 뷰어는 노드가 켜진 행의 색인을 보관하기 위하여 이 속성을 사용합니다.

- -

nsINavHistoryResultViewer 또한 관찰자 인터페이스를 가지고 있어서 nsINavHistoryResultViewObserver가 변화를 관찰할 수 있도록 합니다. 그러나 이 관찰자 인터페이스는 트리만을 위한 것입니다. bug 337638는 이를 nsINavHistoryResultTreeViewer 개체로 옮기기 위한 것입니다. nsINavHistoryResultViewer의 다른 구현은 자신의 관찰자를 이용해야 합니다.

- -
diff --git a/files/ko/plugins/guide/scripting_plugins/index.html b/files/ko/plugins/guide/scripting_plugins/index.html new file mode 100644 index 0000000000..cb761b44e4 --- /dev/null +++ b/files/ko/plugins/guide/scripting_plugins/index.html @@ -0,0 +1,7 @@ +--- +title: Scripting Plugins +slug: Scripting_Plugins +translation_of: Plugins/Guide/Scripting_plugins +translation_of_original: Scripting_plugins +--- +

{{wiki.localize('System.API.page-generated-for-subpage')}}

diff --git a/files/ko/scripting_plugins/index.html b/files/ko/scripting_plugins/index.html deleted file mode 100644 index cb761b44e4..0000000000 --- a/files/ko/scripting_plugins/index.html +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Scripting Plugins -slug: Scripting_Plugins -translation_of: Plugins/Guide/Scripting_plugins -translation_of_original: Scripting_plugins ---- -

{{wiki.localize('System.API.page-generated-for-subpage')}}

diff --git a/files/ko/svg_improvements_in_firefox_3/index.html b/files/ko/svg_improvements_in_firefox_3/index.html deleted file mode 100644 index e64f1600bc..0000000000 --- a/files/ko/svg_improvements_in_firefox_3/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: SVG improvements in Firefox 3 -slug: SVG_improvements_in_Firefox_3 -tags: - - Firefox 3 - - SVG -translation_of: Mozilla/Firefox/Releases/3/SVG_improvements ---- -

{{ Fx_minversion_header(3) }}

-

Firefox 3에서는 이전 버전에 비해 Scalable Vector Graphics (SVG)에 대한 향상된 지원을 제공합니다. 이러한 내용은 다른 곳에서도 문서화되어 있지만, Firefox 3에서 어떤 기능들이 추가되었는지 쉽게 찾아볼 수 있도록 본 글이 작성되었습니다.

-
    -
  • foreignObject 요소를 지원합니다({{ Bug(326966) }}). 자세한 사항은 명세서 또는 이 기사를 참조하세요.
    • -
  • pattern 요소를 지원합니다. (spec)
    • -
  • mask 요소를 지원합니다. (spec)
    • -
  • 다음의 모든 SVG 1.1 필터를 지원합니다 (spec): -
      -
    • filter
      • -
    • feDistantLight
      • -
    • fePointLight
      • -
    • feSpotLight
      • -
    • feBlend
      • -
    • feColorMatrix
      • -
    • feConvolveMatrix
      • -
    • feComponentTransfer, feFuncR, feFuncG, feFuncB, feFuncA
      • -
    • feComposite
      • -
    • feConvolveMatrix
      • -
    • feDiffuseLighting
      • -
    • feDisplacementMap
      • -
    • feDistantLight
      • -
    • feFlood
      • -
    • feGaussianBlur
      • -
    • feImage
      • -
    • feMerge, feMergeNode
      • -
    • feMorphology
      • -
    • feOffset
      • -
    • fePointLight
      • -
    • feSpecularLighting
      • -
    • feTurbulence
      • -
    • feTile
      • -
    -
    • -
  • SVG에서 <a> 요소를 처리하는 것과 관련된 몇가지 버그가 수정되었습니다. 자세한 사항은 {{ Bug(267664) }}, {{ Bug(268135) }}, {{ Bug(316248) }}, {{ Bug(317270) }}, {{ Bug(320724) }}를 참조하세요.
    • -
  • SVG DOM 메소드인 getNumberOfChars(), getComputedTextLength(), getSubStringLength(), getStartPositionOfChar(), getEndPositionOfChar(), getRotationOfChar(), getCharNumAtPosition()가 구현되었습니다.
    • -
  • xml:space 속성을 지원합니다. (spec)
    • -
  • fill/stroke를 지원합니다. (spec)
    • -
  • 길이 단위로 사용되는 em과 ex 단위를 지원합니다. ({{ Bug(305859) }}).
    • -
-

참고

- -
-  
-

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

diff --git a/files/ko/svg_in_firefox/index.html b/files/ko/svg_in_firefox/index.html deleted file mode 100644 index f8c31a2a8c..0000000000 --- a/files/ko/svg_in_firefox/index.html +++ /dev/null @@ -1,845 +0,0 @@ ---- -title: SVG in Firefox -slug: SVG_in_Firefox -tags: - - SVG -translation_of: Web/SVG/SVG_1.1_Support_in_Firefox ---- -

Firefox 2는 더욱 폭넓은 Scalable Vector Graphics (SVG) 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.

-

Firefox SVG는 SVG 1.1의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.

-

우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.

-

이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 현재 로드맵에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 nightly builds를 사용해볼 수 있습니다.

-

성능

-

Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 cairo를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.

-

Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.

-

좌표 범위

-

당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.

-

Windows 98에서의 Text

-

안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.

-

폰트 선택

-

CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 font-family="Arial,LucidaSansUnicode" 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.

-

인쇄

-

아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.

-

Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.

-

그룹 opacity

-

그룹 opacity 속성인 opacity는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, fill-opacity나 stroke-opacity들과는 독립적인 속성입니다. 현재 opacity의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. fill-opacity와 stroke-opacity는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.

-

그룹 opacity는 현재 <g>에만 구현되어 있으며 <text>나 <svg>는 구현되어 있지 않습니다.

-

폰트 기울이기

-

Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:

-

그림:그림-text-fill-stroke.png

-

<image>

-

<image>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.

-

<image>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <image>의 <use>는 또 다른 다른 복사본으로 간주합니다.

-

덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.

-

Events

-

We support the SVG event attributes with the exception of onfocusin, onfocusout, and onactivate.

-

Our onload handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the onload attribute is called for each element, an SVGLoad event is only fired for the root <svg> 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 onload code. Such methods are getBBox, getScreenCTM, etc.

-

We do not support the Adobe specific key events (onkeydown, onkeyup).

-

Interoperability

-

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 SVG Authoring Guidelines explains the common problems.

-

SVG usage situations

-

Firefox 1.5 handles SVG as entire documents or when referenced by embed, object, or iframe. It cannot currently be used as source for an HTML or XHTML img element or for CSS properties that take an image reference.

-

Animation

-

Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create SmilScript, a small Javascript library that implements a subset of SVG's declarative animation.

-

Bugs fixed in Firefox 2

-

Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.

-
    -
  • A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug 333615).
    • -
-
    -
  • Radial gradients now properly clamp the fx and fy attributes to ensure that they're within the circumference of a circle (bug 330682).
    • -
-
    -
  • Text spans' and text elements' lengths can now be computed using their getComputedTextLength() methods, which improves compatibility with certain web sites (bugs 311031 and 264380).
    • -
-
    -
  • <tspan> elements now properly support the dx and dy attributes, and work if the x and y attributes aren't specified (bug 311063).
    • -
-
    -
  • Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug 312269).
    • -
-
    -
  • Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug 315861).
    • -
-
    -
  • Fixed a bug that would crash if a <path> element had a d attribute with an empty string (bug 318379).
    • -
-
    -
  • The overflow attribute now works for the marker element, using the syntax overflow="visible", which did not previously work correctly (bug 320623).
    • -
-
    -
  • You can now access the <style> attribute of marker elements without throwing an exception (bug 323589).
    • -
-
    -
  • You can now use percent values for the radius of a radial gradient (bug 323669).
    • -
-
    -
  • The documentElement.createSVGAngle() method is now implemented (bug 327437).
    • -
-
    -
  • Making a <stop> element a child of another <stop> element no longer asserts (bug 328137).
    • -
-
    -
  • Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug 325728).
    • -
-
    -
  • Font sizes when printing on Windows are no longer much larger than specified for SVG (bug 314707).
    • -
-

Element implementation status

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementNotes
Structure Module
svg -
    -
  • Implemented.
    • -
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
    • -
  • SVGSVGElement -
      -
    • Unimplemented attributes: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
      • -
    • Unimplemented bindings: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
      • -
    -
    • -
-
g -
    -
  • Implemented.
    • -
-
defs -
    -
  • Implemented.
    • -
-
desc -
    -
  • Implemented.
    • -
  • Only stored in the DOM, no user interface.</td>
    • -
-
title -
    -
  • Implemented.
    • -
-
metadata -
    -
  • Implemented.
    • -
  • Only stored in the DOM, no user interface.</td>
    • -
-
symbol -
    -
  • Implemented.
    • -
-
use -
    -
  • Implemented.
    • -
  • Only works for internal document references (bug 269482).
    • -
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
    • -
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
    • -
-
Conditional Processing Module
switch -
    -
  • Implemented.
    • -
-
Image Module
image -
    -
  • Implemented.
    • -
  • Only works for raster images (bug 272288).
    • -
-
Style Module
style -
    -
  • Implemented.
    • -
-
Shape Module
path -
    -
  • Implemented.
    • -
  • SVGPathElement Interface -
      -
    • Unimplemented attributes: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • -
    • Unimplemented bindings: getTotalLength, getPointAtLength, getPathSegAtLength
      • -
    -
    • -
  • SVGPathSegList Interface -
      -
    • Unimplemented bindings: replaceItem()
      • -
    -
    • -
-
rect -
    -
  • Implemented.
    • -
-
circle -
    -
  • Implemented.
    • -
-
line -
    -
  • Implemented.
    • -
-
ellipse -
    -
  • Implemented.
    • -
-
polyline -
    -
  • Implemented.
    • -
-
polygon -
    -
  • Implemented.
    • -
-
Text Module
text -
    -
  • Implemented.
    • -
  • SVGTextElement -
      -
    • Unimplemented attributes: rotate, textLength, lengthAdjust
      • -
    • Unimplemented bindings: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • -
    • Bindings not functional at onload time: getExtentOfChar
      • -
    -
    • -
-
tspan -
    -
  • Implemented.
    • -
  • SVGTSpanElement -
      -
    • Unimplemented attributes: rotate, textLength, lengthAdjust
      • -
    • Unimplemented bindings: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • -
    -
    • -
-
tref -
    -
  • Not implemented.
    • -
-
textPath -
    -
  • Implemented in Firefox 2.
    • -
  • Unimplemented attributes: method, spacing, textLength, lengthAdjust
    • -
-
altGlyph -
    -
  • Not implemented.
    • -
-
altGlyphDef -
    -
  • Not implemented.
    • -
-
altGlyphItem -
    -
  • Not implemented.
    • -
-
glyphRef -
    -
  • Not implemented.
    • -
-
Marker Module
marker -
    -
  • Implemented.
    • -
-
Color Profile Module
color-profile -
    -
  • Not implemented.
    • -
-
Gradient Module
linearGradient -
    -
  • Implemented.
    • -
-
radialGradient -
    -
  • Implemented.
    • -
-
stop -
    -
  • Implemented.
    • -
-
Pattern Module
pattern -
    -
  • Not implemented.
    • -
-
Clip Module
clipPath -
    -
  • Implemented.
    • -
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
    • -
-
Mask Module
mask -
    -
  • Not implemented.
    • -
-
Filter Module
filter -
    -
  • Not implemented.
    • -
-
feBlend -
    -
  • Not implemented.
    • -
-
feColorMatrix -
    -
  • Not implemented.
    • -
-
feComponentTransfer -
    -
  • Not implemented.
    • -
-
feComposite -
    -
  • Not implemented.
    • -
-
feConvolveMatrix -
    -
  • Not implemented.
    • -
-
feDiffuseLighting -
    -
  • Not implemented.
    • -
-
feDisplacementMap -
    -
  • Not implemented.
    • -
-
feFlood -
    -
  • Not implemented.
    • -
-
feGaussianBlur -
    -
  • Not implemented.
    • -
-
feImage -
    -
  • Not implemented.
    • -
-
feMerge -
    -
  • Not implemented.
    • -
-
feMergeNode -
    -
  • Not implemented.
    • -
-
feMorphology -
    -
  • Not implemented.
    • -
-
feOffset -
    -
  • Not implemented.
    • -
-
feSpecularLighting -
    -
  • Not implemented.
    • -
-
feTile -
    -
  • Not implemented.
    • -
-
feTurbulence -
    -
  • Not implemented.
    • -
-
feDistantLight -
    -
  • Not implemented.
    • -
-
fePointLight -
    -
  • Not implemented.
    • -
-
feSpotLight -
    -
  • Not implemented.
    • -
-
feFuncR -
    -
  • Not implemented.
    • -
-
feFuncG -
    -
  • Not implemented.
    • -
-
feFuncB -
    -
  • Not implemented.
    • -
-
feFuncA -
    -
  • Not implemented.
    • -
-
Cursor Module
cursor -
    -
  • Not implemented.
    • -
-
Hyperlinking Module
a -
    -
  • Implemented as an XBL binding - object is not of type SVGAElement.
    • -
  • Only xlink:href, xlink:show, and xlink:target (as of Firefox 2) attributes implemented.
    • -
-
View Module
view -
    -
  • Not implemented.
    • -
-
Scripting Module
script -
    -
  • Implemented.
    • -
-
Animation Module
animate -
    -
  • Not implemented.
    • -
-
set -
    -
  • Not implemented.
    • -
-
animateMotion -
    -
  • Not implemented.
    • -
-
animateTransform -
    -
  • Not implemented.
    • -
-
animateColor -
    -
  • Not implemented.
    • -
-
mpath -
    -
  • Not implemented.
    • -
-
Font Module
font -
    -
  • Not implemented.
    • -
-
font-face -
    -
  • Not implemented.
    • -
-
glyph -
    -
  • Not implemented.
    • -
-
missing-glyph -
    -
  • Not implemented.
    • -
-
hkern -
    -
  • Not implemented.
    • -
-
vkern -
    -
  • Not implemented.
    • -
-
font-face-src -
    -
  • Not implemented.
    • -
-
font-face-uri -
    -
  • Not implemented.
    • -
-
font-face-format -
    -
  • Not implemented.
    • -
-
font-face-name -
    -
  • Not implemented.
    • -
-
definition-src -
    -
  • Not implemented.
    • -
-
Extensibility Module
foreignObject -
    -
  • Implemented, but not built.
    • -
-
-

{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}

diff --git a/files/ko/the_dom_and_javascript/index.html b/files/ko/the_dom_and_javascript/index.html deleted file mode 100644 index b7d3de85bf..0000000000 --- a/files/ko/the_dom_and_javascript/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: The DOM and JavaScript -slug: The_DOM_and_JavaScript -tags: - - DOM - - JavaScript ---- -

큰 그림

- -

페이지 안 레이어 이동, 레이어, 팝업 메뉴 보이기와 감추기 등과 같은 비주얼 효과는 "DHTML"이나 "Dynamic HTML"로 자주 참조됩니다. 일부 사람들은 표현(presentation)이 아니라 내용(content)을 다루기로 된 웹 페이지에서 이런 기술의 실제 쓰임을 묻습니다. 하지만 오늘날 실제 쓰임은 그 물음에 있습니다.

- -

내가 이 프로젝트에서 일하고 많은 웹마스터들과 연락한 뒤로, 웹 디자인 커뮤니티 대부분이 그들의 DHTML이 어떻게 동작하는 지 모른다는 사실이 생각났습니다. 대부분의 시간을 그들은 스크립트 저장소(repository) 사이트에 가서, 그들 웹 페이지에 그 코드를 그냥 복사하고 붙여넣습니다. 불행하게도 이들 사이트 대부분은 결코 "DOM"에 관해서는 이야기하지 않으면서 "javascript"와 "DHTML"은 이야기합니다. 비록 DOM이 오래된 개념이더라도 DOM이 최근에야 "평균 웹 디자이너 전문어(jargon)"의 부분이 되었다는 사실입니다.

- -

그 사이트를 W3C DOM을 위해 코딩할 가치가 있다고 사이트 임자에게 납득시키기는 Mozilla 같은 프로젝트를 위한 큰 도전입니다. 이는 때때로 많은 작업과 예전 브라우저를 위한 지원을 중단함을 뜻합니다. 또한 W3C DOM을 위한 지원에 관해 곧바로 참모습을 알아내는 큰 도전입니다. Netscape 6은 Netscape 4와 document.layers와 document.all를 쓰는 Internet Explorer를 위해 그들의 "JavaScript"를 작성했던 어리석은 웹 디자이너들에게 많은 혹평을 받았습니다. 매일 우리는 그들의 사이트를 얻도록 뉴스그룹에서, 개인 email로, Bugzilla로 되도록 공손하게 사람들을 돕기 위해 힘씁니다. 우리가 부딪친 문제 가운데 가장 큰 것은 JavaScript와 DHTML 그리고 DOM 사이의 혼동(confusion)입니다. 이 문서는 이를 정리하고 이 화려하고 쓸모 있는 기술 사이의 관계를 설명하려는 하나의 시도입니다.

- -

JavaScript, 웹 스크립팅 언어

- -

JavaScript은 Netscape Communications Corp에서 오늘날 Mozilla 프로젝트의 리더 가운데 한 명인 Brendan Eich가 처음 개발한 "object scripting language"입니다. Mozilla가 쓰는 JavaScript 엔진은 SpiderMonkey입니다. 이 엔진은 ECMA-262 개정 3 명세(specification)를 따릅니다. JavaScript는 또한 ECMAScript로 알려졌습니다(하지만 상세한 설명은 링크된 페이지를 보세요).

- -

일반인의 오해와는 달리, JavaScript는 "Interpretive Java"가 아닙니다. 줄여 말하면, JavaScript는 개체 생성에 기반을 둔 원형(prototype)을 지원하는 dynamic scripting language입니다. 기본 구문(syntax)은 언어를 배우는 데 필요한 새로운 개념의 수를 줄이기 위해 Java와 C++ 둘 다와 개념에 있어 비슷합니다. JavaScript가 대단한 점은 혹시 여러분이 기본 프로그래밍(간단한 DHTML에서 필요한 것 같은)을 하고 싶은 경우 배우기 정말 쉽다는 점입니다. 불분명한 변수형, 정말 쓰기 쉬운 문자열, 전체 플랫폼 중립성(neutrality) 등. 또한 고급 코더들을 위해 개체 중심(object-oriented) 언어와 절차(procedural) 언어 둘 다로 기능합니다.

- -

JavaScript에 관한 이 단락 대부분은 Mozilla JavaScript 페이지에서 가져왔음을 알게 됩니다. 가장 최근 ECMA 명세는 여기에서 찾습니다.

- -

Document Object Model, 언어 중립 인터페이스 집합

- -

JavaScript는 여러분이 DOM 개체를 운영(operate)하고 개체를 프로그램으로 조작(manipulate)하게 하는 프로그래밍 언어이지만, DOM은 여러분이 작업하는 문서의 부분을 검색(retrieve), 수정(modify), 갱신(update), 삭제(delete)하는 메소드(method)와 프로퍼티(property)를 제공합니다. 예를 들어, 여러분이 DOM을 써서 HTML textfield 값을 문자열로 검색할 지도 모릅니다. 그렇다면 여러분은 뜻있는 문장이 되도록 그 문자열을 다른 문자열에 연결(concatenate)하는 JavaScript "+" 연산자를 쓸 수 있습니다. 그리고 나서 여러분은 dialog에서 사용자에게 그 문자열을 표시하기 위해 DOM "alert()" 메소드를 씁니다. 또한 아래 예제를 보세요.

- -

만약 웹페이지가 수입한 스웨덴 가구 한 점이라면, DOM은 선반, 나사못(bolt), Allen 렌치(wrench)와 드라이버 같은 각 부분의 도해입니다. 각 부분을 서로 조립하는 법과 많은 언어로 각 부분을 쓰는 법에 관한 명령 작성이 가능합니다. 하지만 여러분은 오직 여러분이 이해한 언어로 작성한 부분을 씁니다. 설명서는 실제 개체(브라우저의 렌더링 엔진)를 나타내는 개체의 도해(DOM)를 참조하는 작성 명령(JavaScript)을 써서 함께 가구를 만들기 쉽게 합니다. (유추한 Jonathan에게 감사를 올립니다!)

- -

DOM에 있는 이 "언어 중립"이란 과대광고(hype)는 무엇일까요? DOM에 접근하는 데 쓰이는 유일한 언어가 JavaScript라면 왜 DOM이 언어 중립성을 띨까요? 글쎄요, 그것은 딱 맞지 않습니다. 예를 들어, Mozilla는 사용자 인터페이스를 위해 내부에 C++와 JavaScript로 작성된 DOM을 씁니다. 이를테면, 편집기는 Composer 모듈로 페이지를 작성(compose)할 때 여러분이 보는 HTML을 삽입(insert), 수정(modify), 삭제(delete)하기 위해 광범위하게 DOM을 씁니다. 다른 알려진 DOM 구현(implementation)은 아마도 Perl, Java, ActiveX, Python, 그리고 다른 것들을 포함합니다. 물론 이는 오직 DOM의 언어 중립성 덕분에 가능합니다.

- -

DOM과 JavaScript - 무엇이 무엇을 하는가?

- -

우리는 이 문서의 본론에 이르렀습니다. 각각 무엇을 할까요? 내 웹 페이지에 끼워 넣은(embed) 스크립트에서, DOM은 무엇이고 JavaScript는 무엇일까요? 간단한 예를 하나 더 자세히 보죠. 예는 우리가 "anchorTags"라고 부르는 NodeList에서 모든 <a> tag을 검색합니다. 그리고 나서 각 anchor tag(anchorTags NodeList의 각 요소)의 "href" 속성값을 경고(alert)로 띄웁니다.

- -

파란색은 JavaScript, 빨간색은 DOM입니다.

- -
var anchorTags = document.getElementsByTagName("a");
-for (var i = 0; i < anchorTags.length ; i++)
-{
-   alert("Href of " + i + "-th element is : " + anchorTags[i].href + "\n");
-}
-
- -

설명

- -

이 코드 조각(snippet)은 기본 JavaScript가 무엇인지, 그리고 DOM이 무엇인지를 보입니다.

- -
-
var anchorTags =
-
이는 "anchorTags"로 부르는 JavaScript 변수를 만듭니다.
-
- -
-
document.getElementsByTagName("a")
-
Document 인터페이스는 DOM1 Core에서 정의한 첫 번째 인터페이스이고 document는 Document 인터페이스를 구현하는 host 개체입니다. document는 여러분의 페이지에 있는 모든 것을 지닙니다.
- DOM1 Core는 Document 인터페이스에 getElementsByTagName() 메소드를 정의합니다. 메소드는 그 함수에 pass되는 매개변수와 일치하는 모든 tag의 NodeList (노드를 지니는 DOM 고유 배열의 한 종류)에서 문서 소스에 나오는 순서대로 검색합니다. 따라서 이제 anchorTags 변수는 NodeList입니다.
-
- -
-
;
-
기본 명령 끝(end-of-instruction) 쌍반점(쎄미콜론, semicolon). JavaScript 문법.
-
- -
-
for (var i = 0; i <
-
프로그래밍 언어의 특징을 잘 나타내는 "for" 루프(loop). 이는 우리가 anchorTags NodeList에 포함된 각 노드를 샅샅이 거치게 합니다. 변수 "i"의 선언을 주의하세요. 역시 JavaScript.
-
- -
-
anchorTags.length
-
DOM1 Core는 NodeList 인터페이스의 length 프로퍼티를 정의합니다. 프로퍼티는 NodeList에 포함된 노드수(정수)를 반환합니다. JavaScript 배열은 또한 length 프로퍼티도 있음을 덧붙입니다.
-
- -
-
; i++) {
-
1씩 증가하는 전형적인 JavaScript 변수.
-
- -
-
alert(
-
alert()은 여러분이 pass한 매개변수(문자열)을 팝업하는 DOM 메소드입니다. DOM level 0이나 DOM0으로 부르는 것의 일부임을 유의하세요. DOM0은 일부 브라우저에서 지원되는 인터페이스 집합이지만 DOM 명세의 일부는 아닙니다.
-
- -
-
"Href of this a element is : " +
-
문자열 리터럴(literal)과 문자열 연결 연산자. JavaScript.
-
- -
-
anchorTags{{ mediawiki.external('i') }}.href
-
"href"는 DOM1 HTML 명세에 정의된 HTMLAnchorElement 인터페이스의 프로퍼티입니다. 있다면, 프로퍼티는 anchor 요소의 href 속성값을 반환합니다.
- 우리는 또한 배열의 i 번째 항목(item)에 접근하기 위해 JavaScript에서 쓰는 구문과 같은 anchorTags{{ mediawiki.external('i') }}를 씁니다. NodeList의 항목에 접근하기 위해 언어 중립성을 띄는 "DOM 방식"은 NodeList 인터페이스에 정의된 item() 메소드(anchorTags.item(1).href)를 씁니다. 하지만 JavaScript 구현 대부분은 더 간단한 배열 방식 구문을 쓰도록 하고 그게 사람들 대부분이 실제로 쓰는 방식입니다.
-
- -
-
+ "\n");
-
추가 문자열 연결. 문자열의 끝에 carriage return을 삽입합니다.
-
- -
-
}
-
"for" 루프의 끝.
-
- -
-

원본 문서 정보

- -
    -
  • 저자: Fabian Guisset <fguisset at softhome dot net>
    • -
  • 저작권 정보: © 1998-2005 by individual mozilla.org contributors; 내용은 Creative Commons license 아래에서 이용 가능합니다
    • -
-
- -

{{ languages( { "en": "en/The_DOM_and_JavaScript", "fr": "fr/Le_DOM_et_JavaScript" } ) }}

diff --git a/files/ko/theme_packaging/index.html b/files/ko/theme_packaging/index.html deleted file mode 100644 index 0ff635c4aa..0000000000 --- a/files/ko/theme_packaging/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -title: Theme Packaging -slug: Theme_Packaging -tags: - - Add-ons - - Themes - - Toolkit API ---- -

이 문서는 파이어폭스나 썬더버드에서 테마를 포장하는 방법에 대해서 기술하고 있습니다.

-

준비사항

-

파이어폭스나 썬더버드의 테마를 만들 때에는 Cascading Stylesheets(CSS) 에 대한 지식이 필수적이며, XBL에 대한 지식도 필요할 수 있습니다. 또한, 그래픽 디자인 및 미적 감각(...은 아닐지도)도 필요합니다. 하지만, 이 문서에서는 파이어폭스의 테마 창에서 보여질 수 있도록 테마를 포장하는 방법에 대해서만 기술할 것입니다.

-

테마 파일의 구조

-

파이어폭스/썬더버드의 테마는 다음과 같은 구조의 JAR 파일로 포장됩니다.

-
theme.jar:
-  install.rdf
-  contents.rdf
-  preview.png
-  icon.png
-  browser/files
-  global/files
-  mozapps/files
-  communicator/files
-  ...
-
-
    -
  • 테마에 사용되는 크롬을 등록하기 위하여 chrome.manifest (Firefox/Thunderbird 1.5 의 경우) 나 contents.rdf 파일을 디렉토리 최상위단에 만들어 주어야 합니다. 또한 테마 윈도우에 나타낼 메타데이터를 정의하기 위한 install.rdf manifest 파일도 함께 만들어 주어야 합니다.
    • -
  • preview.png 는 테마 윈도우의 스크롤 가능한 미리보기 영역에 보여질 이미지입니다. 이미지의 사이즈는 어떤 크기로도 가능합니다.
    • -
  • icon.png 는 32x32 크기의 PNG (알파 투명도 값을 가질 수 있는)파일입니다. 이는 테마 윈도우의 테마 목록에서 보여집니다.
    • -
-

install.rdf

-

install.rdf manifest 는 다음과 같이 만들 수 있습니다:

-
<?xml version="1.0"?>
-
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
-
-  <Description about="urn:mozilla:install-manifest">
-    <em:type>4</em:type>more properties
-  </Description>
-</RDF>
-
-

install.rdf 에 본적으로 들어가야 하는 속성들

-

install.rdf 파일에는 다음과 같은 속성들이 들어가야 합니다. 상세한 정보는 install.rdf Reference 에서 얻을 수 있습니다.

-
    -
  • em:id
    • -
  • em:version
    • -
  • em:type
    • -
  • em:targetApplication
    • -
  • em:name
    • -
  • em:internalName
    • -
-

install.rdf 에 선택적으로 들어갈 수 있는 속성들

-
    -
  • em:description
    • -
  • em:creator
    • -
  • em:contributor
    • -
  • em:homepageURL
    • -
  • em:updateURL
    • -
-

만약 여러분의 테마가 http://addons.mozilla.org 웹사이트에 게시된다면 updateURL 속성은 포함시키면 안 됩니다.

-

샘플 install.rdf 파일

-
<?xml version="1.0"?>
-
-<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
-
-  <Description about="urn:mozilla:install-manifest">
-    <em:id>{18b64b56-d42f-428d-a88c-baa413bc413f}</em:id>
-    <em:version>1.0</em:version>
-    <em:type>4</em:type>
-
-    <!-- Target Application this extension can install into,
-         with minimum and maximum supported versions. -->
-    <em:targetApplication>
-      <Description>
-        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
-        <em:minVersion>0.8</em:minVersion>
-        <em:maxVersion>0.9</em:maxVersion>
-      </Description>
-    </em:targetApplication>
-
-    <!-- Front End MetaData -->
-    <em:name>New Theme 1</em:name>
-    <em:description>A test theme for Firefox</em:description>
-    <em:creator>Ben Goodger</em:creator>
-    <em:contributor>John Doe</em:contributor>
-    <em:homepageURL>http://www.bengoodger.com/</em:homepageURL>
-
-    <!-- Front End Integration Hooks (used by Theme Manager)-->
-    <em:internalName>newtheme1</em:internalName>
-  </Description>
-</RDF>
-
-

아래의 것은 통상적인 타겟 어플리케이션의 GUID 입니다. 여러분은 이 GUID 를 여러분의 targetApplication 속성에 정의할 수 있습니다:

-
Firefox      {ec8030f7-c20a-464f-9b0e-13a3a9e97384}
-Thunderbird  {3550f703-e582-4d05-9a08-453d09bdfdc6}
-Sunbird      {718e30fb-e89b-41dd-9da7-e25a45638b28}
-
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 deleted file mode 100644 index 09ac7171e0..0000000000 --- a/files/ko/tips_for_authoring_fast-loading_html_pages/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -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 ---- -

Summary: Learn common-sense tips for producing HTML pages which load quickly and provide visitor satisfaction. 여기에 나온 팁들은 상식과 실험에 바탕을 두고 있습니다. 만약 당신이 페이지 불러오기 성능을 향상시킬 수 있는 팁을 알고 있다면 이 글의 토론 페이지에 조언해 주시기 바랍니다.

-

최적화된 웹 페이지는 사이트 방문자들에게 즉각적인 응답을 해줄 뿐만 아니라, 웹 서버의 부담을 덜어주고 인터넷 연결의 부하를 줄여줍니다. 이것은 커다란 사이트나 뉴스 속보와 같은 특별한 상황에서 트래픽이 급격히 증가하는 사이트에 있어서 아주 중요합니다.

-

페이지 불러오기 성능을 최적화하는 것이 저대역폭 방문자를 위한 컨텐츠에만 해당하는 것은 아닙니다. 이것은 고대역폭 컨텐츠에도 똑같이 중요하며 고속 인터넷 사용자들에게도 상당한 성능 향상을 기대할 수 있습니다.

-

Tips

-

페이지 무게를 줄여라

-

페이지 무게는 지금까지 페이지 불러오기 성능의 가장 중요한 요소이다.

-

불필요한 공백, 주석을 없애고 인라인 스크립트와 CSS를 외부파일로 옮기면 페이지 구조의 변화를 최소화하면서 다운로드 성능을 향상시킬 수 있다

-

HTML Tidy등의 도구를 사용, 바른 HTML 소스로부터 첫 공백과 여분의 빈라인을 자동으로 줄일 수 있다. 다른 도구는 재형식화하거나 긴 식별자를 짧은 버전으로 줄여 JavaScript를 압축할 수 있다.

-

파일 수를 최소화하라

-

웹 페이지에서 참조하는 파일의 수를 줄이면 페이지를 다운로드하는데 필요한 HTTP 접속 횟수가 감소합니다.

-

브라우저의 캐시 설정에 따라서, 브라우저는 각각의 CSS와 JavaScript, 그림 파일에 대해서 마지막으로 다운로드한 이후로 해당 파일이 변경되었는지 확인하기 위해 If-Modified-Since 요청을 웹 서버로 보내게 됩니다.

-

웹 페이지에서 참조하는 파일의 수를 줄이면, 이러한 요청을 보내고 그에 해당하는 응답이 도착하는데 필요한 시간을 줄일 수 있습니다.

-

브라우저는 페이지를 표시하기 전에 각각의 CSS와 JavaScript 파일의 변경시간을 반드시 확인해야 합니다. 따라서 웹 페이지에서 참조하는 파일들에 대한 마지막 변경시간을 확인하는데 너무 많은 시간을 소비하면 웹 페이지의 초기 표시 시간이 오래 걸릴 수 있습니다.

-

도메인 검색을 줄이라

-

각각의 도메인은 DNS 검색에 시간을 소비하기 때문에, CSS와 JavaScript 및 이미지를 참조하는데 사용되는 도메인 수를 줄이면 페이지를 불러오는 시간이 단축됩니다.

-

이것이 항상 실현가능한 것이 아닐지라도, 가능한한 최소한의 도메인을 사용하도록 주의해야 합니다.

-

재사용되는 내용을 캐시하라

-

캐시가능한 내용이 적절한 만료시간으로 캐시되었는지 확인해야 합니다.

-

특히 Last-Modified 헤더에 신경써야 합니다. 이것은 페이지의 효율적인 캐싱을 가능케 합니다. 이것에 의해 브라우저가 읽어들이고자 하는 파일이 마지막으로 변경된 시간에 대한 정보가 전달됩니다. 정적인 페이지(예를 들면, <tt>.html</tt>, <tt>.css</tt>)는 대부분의 웹 서버가 파일 시스템에 저장된 마지막 변경시간을 토대로 자동적으로 Last-Modified 헤더를 추가합니다. 동적인 페이지(예를 들면, <tt>.php</tt>, <tt>.aspx</tt>)는 물론 불가능합니다.

-

그러므로, 특히 동적으로 생성되는 페이지들에 대한 이 부분의 연구가 중요합니다. 이것은 조금 복잡하지만, 정상적으로 캐시 불가능한 페이지들에 대한 페이지 요청을 대폭 줄일 수 있게 합니다.

-

추가 정보:

-
    -
  1. RSS 해커들을 위한 HTTP 조건부 GET
    2. -
  2. HTTP 304: Not Modified
    3. -
  3. On HTTP Last-Modified and ETag
    4. -
-

페이지 컴포넌트의 순서를 최적화

-

사용자가 페이지를 읽어들일 때 페이지의 내용 요소를 가장 먼저 다운로드하면 가장 빠른 응답시간을 얻을 수 있습니다.

-

페이지의 내용 요소는 페이지의 표시를 위해 필요한 모든 CSS 및 JavaScript와 함께 가장 먼저 다운로드되어야 합니다. 이러한 내용 요소들은 일반적으로 텍스트로 되어 있고 모뎀상에서 텍스트 압축효과를 얻을 수 있기에 사용자에게 가장 빠른 응답 시간을 제공합니다.

-

페이지를 모두 읽어들인 후에야 사용가능한 모든 DHTML 기능들은 초기에는 사용하지 못하게 설정되어 있어야 하며 페이지 불러오기가 끝난 후에만 사용가능해야 합니다. 이것은 페이지의 내용 요소를 먼저 읽어들인 다음에 DHTML JavaScript를 읽어들이게 하여 전체적인 페이지 불러오기 성능을 향상시킵니다.

-

inline script 수를 최소화

-

inline script는 페이지 구조를 바꿀 수 있다는 것을 파서가 가정해야 하므로 페이지 불러오기에 비용이 많이 들 수 있다. 일반적으로 inline script 사용을 줄이고 내용을 출력하기 위해 document.write()의 사용을 줄여 전체페이지의 불러오는 시간을 향상시킬 수 있다. document.write()에 기반한 오래된 방식 대신 현대의 W3C DOM방법을 사용하여 페이지 내용을 다루라.

-

최신 CSS와 올바른 markup을 사용하라

-

최신 CSS는 markup의 양을 줄여주며, 레이아웃 측면에서 그림의 사용을 줄여줍니다. 또한 다양한 방법으로 텍스트를 나타내는 그림의 사용을 줄여줍니다. 텍스트를 나타내는 그림을 사용하면 텍스트와 CSS를 사용할 때보다 부하가 큽니다.

-

올바른 markup을 사용하는 것에는 추가적인 장점이 있습니다. 브라우저가 HTML을 처리할 때 "오류 정정"을 하지 않아도 될 뿐만 아니라, 웹 페이지를 - - 전처리(pre-process) - 할 수 있는 다른 도구들을 마음대로 사용할 수 있습니다. 예를 들면, HTML Tidy는 웹 페이지상의 공백과 불필요한 종료 태그들을 삭제해 줍니다. 그러나 웹 페이지에 심각한 markup 오류가 있다면 이 도구는 사용할 수 없습니다.

-

내용을 조각내라

-

table기반의 레이아웃을 <div>를 쓰거나 table을 작은 table로 나누면 전체 페이지 내용을 내려받지 않고 표시할 수 있다.

-

아래와 같이 깊게 중첩된 table 대신

-
- 
<TABLE>
-  <TABLE>
-    <TABLE>
-          ...
-    </TABLE>
-  </TABLE>
-</TABLE>
-
-

중첩되지 않은 table 또는 div를 쓰라

-
<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-<TABLE>...</TABLE>
-

그림과 표의 크기를 명시하라

-

브라우저가 그림과 표의 크기를 바로 알아낼 수 있다면, 내용을 바꾸지 않고도 웹 페이지를 표시하는게 가능합니다. 이것은 페이지를 표시하는 속도를 빠르게 할 뿐만 아니라 페이지 불러오기가 끝났을 때 페이지의 배치가 바뀌는 것을 막아줍니다. 그런 이유로, 가능하면 그림의 height와 width가 명시되어야 합니다.

-

표는 CSS 선택자:속성 조합이다.

-
-

table-layout: fixed;

-
-

그리고 COL과 COLGROUP 태그를 사용하여 열(column)의 넓이를 명시해야 합니다.

-

사용자 에이전트의 요구사항을 적절하게 선택하라

-

웹 페이지의 디자인 향상을 위해서는 사용자 에이전트의 요구사항을 적절하게 선택해야 합니다. 모든 브라우저, 특히 저사양의 브라우저에서까지 웹 페이지의 내용이 픽셀 하나하나까지 완벽하게 표현되기를 원하지는 않습니까?

-

이상적으로, 기본적인 최소 요구사항은 관련된 표준을 지원하는 현대적인 브라우저를 기준으로 해야 합니다. 이것은 모든 플랫폼 상의 Netscape 7/Gecko 1.0.2+, Windows의 Internet Explorer 5.5+, Windows의 Opera 7+, Mac OS X의 Safari에 해당합니다.

-

그러나 여기에 나와있는 대부분의 팁들은 사용자 에이전트 요구사항과 관계 없이 모든 사용자 에이전트와 웹 페이지에 해당하는 일반적인 내용임을 알아두시기 바랍니다.

-

페이지 구조 예

-

· HTML

-
-
- · HEAD
-
-
-
-
-
- · LINK ...
- 페이지의 표시를 위해 CSS 파일이 필요하다. 유지보수를 위해 관련되지 않은 CSS 파일을 분리하고 성능을 위해 파일 수를 최소화하라.
-
-
-
-
-
-
-
- · SCRIPT ...
- JavaScript 파일은 페이지를 불러들일 때 필요하지만 DHTML은 페이지 불러오기가 끝난 후에만 동작합니다.
-
- 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
-
-
-
-
-
- · BODY
-
- · 페이지 내용을 가시적인 작은 덩어리(tables / divs)로 나누면 전체 페이지를 모두 다운로드 하지 않고도 내용을 표시할 수 있습니다.
-
-
-
-
-
- · SCRIPT ...
- DHTML을 위해 어떠한 스크립트라도 사용될 수 있습니다. 일반적으로 DHTML 스크립트는 페이지 불러오기가 완전히 끝나고 필요한 객체들이 모두 초기화된 후에만 동작합니다. 따라서 페이지 내용을 불러오기 전에 이러한 스크립트들을 먼저 읽어들일 필요가 없습니다. 오직 페이지 로딩시간을 증가시킬 뿐입니다.
-
- 유지보수를 위해 관련되지 않은 JavaScript를 별도의 파일로 분리하고 성능을 위해 파일 수를 최소화하세요.
-
- 만약 롤오버 효과를 위해 사용되는 그림이 있다면, 페이지 내용을 읽어들인 후에 그 그림을 미리 읽어들여야 합니다.
-
-
-
-

관련 링크

- -
-

원문 정보

-
    -
  • 저자: Bob Clary, Technology Evangelist, Netscape Communications
    • -
  • 최종 갱신일: Published 04 Apr 2003
    • -
  • 저작권 정보: Copyright © 2001-2003 Netscape. All rights reserved.
    • -
  • 알림: 이 문서는 본래 DevEdge 사이트의 일부분이었습니다.
    • -
-
-

 

diff --git a/files/ko/tools/add-ons/dom_inspector/index.html b/files/ko/tools/add-ons/dom_inspector/index.html deleted file mode 100644 index d84e82b45e..0000000000 --- a/files/ko/tools/add-ons/dom_inspector/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -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 ---- -
{{ToolsSidebar}}

DOMi로도 알려진 DOM Inspector는 문서 - 보통 웹 페이지 또는 XUL windows - 의 Document Object Model을 검증, 검색, 편집하는데 사용되는 Mozilla 도구입니다.

- -

DOMi에 대한 더 많은 정보를 위해서는 DOM Inspector page at MozillaZine를 보십시오.

- -

{{ languages( { "en": "en/DOM_Inspector" } ) }}

diff --git a/files/ko/tools/add-ons/index.html b/files/ko/tools/add-ons/index.html deleted file mode 100644 index 24ffbe79e9..0000000000 --- a/files/ko/tools/add-ons/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Add-ons -slug: Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Add-ons ---- -
{{ToolsSidebar}}

Developer tools that are not built into Firefox, but ship as separate add-ons.

- -
-
WebSocket Monitor
-
Examine the data exchanged in a WebSocket connection.
-
 
-
diff --git a/files/ko/tools/debugger/how_to/index.html b/files/ko/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..40f5269f45 --- /dev/null +++ b/files/ko/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/ko/tools/debugger/how_to/open_the_debugger/index.html b/files/ko/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..5b27e11b7a --- /dev/null +++ b/files/ko/tools/debugger/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 +--- +
{{ToolsSidebar}}
+

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition 에 나타나는 JavaScript Debugger 에 대해 설명합니다.

+ +

이전 버전의 Firefox 또는 FireFox Beta 또는 Release 에서는 어떠했는지 보려면 Debugger (before Firefox 52) 를 참조하세요.

+ +

이전 버전의 Debugger 로 다시 전환해야 하는 경우, about:config 에서 "devtools.debugger.new-debugger-frontend" 를 false 로 설정하면 됩니다.

+
+ +

Debugger 를 여는 방법에는 3가지가 있습니다

+ +
    +
  • Firefox 상단 메뉴 모음 (또는 메뉴 막대를 표시하거나 Mac OS X에있는 경우 도구 메뉴)의 [도구] - [웹 개발자 도구] - [디버거]를 선택하십시오.
    • +
  • 단축키 CtrlShiftS 사용하여 열 수 있습니다. (Mac OS X에서는 CommandOptionS)
    • +
  • 매뉴 버튼 ( new fx menu )을 누릅니다, [웹 개발자 도구] - [디버거]를 선택하십시오.
    • +
+ +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +

 

diff --git a/files/ko/tools/debugger/how_to/search/index.html b/files/ko/tools/debugger/how_to/search/index.html new file mode 100644 index 0000000000..9971abcaae --- /dev/null +++ b/files/ko/tools/debugger/how_to/search/index.html @@ -0,0 +1,24 @@ +--- +title: Search +slug: Tools/How_to/Search +translation_of: Tools/Debugger/How_to/Search +--- +
{{ToolsSidebar}}
+

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

+ +

이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 Debugger (Firefox 52 이전)를 참조하십시오.

+ +

이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을false로 설정하여 수행 할 수 있습니다.

+
+ +

파일 찾기

+ +

특정 파일을 검색하려면, 단축키 Control + P (Mac에서는 Command + P ) 를 누르고 검색어를 입력하세요. 소스창(source pane)에는 입력하는 동안 일치하는 모든 파일 목록을 표시됩니다. 위 아래 방향키로 목록을 이동할 수 있고,  Enter(Return)키로 해당 파일을 열 수 있습니다:

+ +

{{EmbedYouTube("xXsfYx0THWg")}}

+ +

파일 내에서 찾기

+ +

소스창(source pane)에 로드된 파일의 특정 단어를 검색하려면 소스창(source pane)에 포커스가 있는 상태에서 단축키 Control + F (Mac에서는 Command + F) 를 누르고 Enter(Return) 키를 눌러서 검색합니다. 디버거는 코드내에 일치하는 검색한 단어의 수를 표시하고 각 단어를 네모칸으로 표시합니다 :

+ +

diff --git a/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html b/files/ko/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..f5d2af9e06 --- /dev/null +++ b/files/ko/tools/debugger/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 +--- +
{{ToolsSidebar}}
+

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

+ +

이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 Debugger (Firefox 52 이전)를 참조하십시오.

+ +

이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을false로 설정하여 수행 할 수 있습니다.

+
+ +

중단점을 설정하는 방법은 다음과 같은 세가지 방법이 있습니다:

+ +
    +
  • 소스 창(source pane) 내에서, 중단점을 원하는 지점의 줄번호(line number)를 클릭하여 중단점을 설정할 수 있습니다.
    • +
  • 소스 창(source pane) 내에서,중단점을 원하는 지점의 줄번호에서 마우스 오른쪽 클릭하여 바로가기 메뉴의"중단점 추가"를 클릭하여 중단점을 설정할 수 있습니다.
    • +
  • 소스 창(source pane) 내에서, 중단점을 원하는 지점의 부분에 커서를 놓고 단축키Ctrl+B (Windows/Linux) 또는 Command+B (Mac OS X)를 눌러서 중단점을 설정할 수 있습니다.
    • +
+ +

아래 비디오는 바로가기 메뉴(context menu)를 사용하여 중단 점을 설정합니다:

+ +

{{EmbedYouTube("P7b98lEijF0")}}

+ +

각 중단점은 디버거의 두 위치에 표시됩니다:

+ + diff --git a/files/ko/tools/debugger/keyboard_shortcuts/index.html b/files/ko/tools/debugger/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..d213621412 --- /dev/null +++ b/files/ko/tools/debugger/keyboard_shortcuts/index.html @@ -0,0 +1,10 @@ +--- +title: 디버거 단축키 +slug: Tools/Debugger/단축키 +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +
{{ToolsSidebar}}

{{ Page ("ko/docs/tools/Keyboard_shortcuts", "debugger") }}

+ +

공통 단축키

+ +

{{ Page ("ko/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git "a/files/ko/tools/debugger/\353\213\250\354\266\225\355\202\244/index.html" "b/files/ko/tools/debugger/\353\213\250\354\266\225\355\202\244/index.html" deleted file mode 100644 index d213621412..0000000000 --- "a/files/ko/tools/debugger/\353\213\250\354\266\225\355\202\244/index.html" +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: 디버거 단축키 -slug: Tools/Debugger/단축키 -translation_of: Tools/Debugger/Keyboard_shortcuts ---- -
{{ToolsSidebar}}

{{ Page ("ko/docs/tools/Keyboard_shortcuts", "debugger") }}

- -

공통 단축키

- -

{{ Page ("ko/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/ko/tools/how_to/index.html b/files/ko/tools/how_to/index.html deleted file mode 100644 index 40f5269f45..0000000000 --- a/files/ko/tools/how_to/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: How to -slug: Tools/How_to -tags: - - NeedsTranslation - - TopicStub -translation_of: Tools/Debugger/How_to ---- -
{{ToolsSidebar}}

These articles describe how to use the debugger.

- -

{{ ListSubpages () }}

diff --git a/files/ko/tools/how_to/open_the_debugger/index.html b/files/ko/tools/how_to/open_the_debugger/index.html deleted file mode 100644 index 5b27e11b7a..0000000000 --- a/files/ko/tools/how_to/open_the_debugger/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Open the debugger -slug: Tools/How_to/Open_the_debugger -translation_of: Tools/Debugger/How_to/Open_the_debugger ---- -
{{ToolsSidebar}}
-

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition 에 나타나는 JavaScript Debugger 에 대해 설명합니다.

- -

이전 버전의 Firefox 또는 FireFox Beta 또는 Release 에서는 어떠했는지 보려면 Debugger (before Firefox 52) 를 참조하세요.

- -

이전 버전의 Debugger 로 다시 전환해야 하는 경우, about:config 에서 "devtools.debugger.new-debugger-frontend" 를 false 로 설정하면 됩니다.

-
- -

Debugger 를 여는 방법에는 3가지가 있습니다

- -
    -
  • Firefox 상단 메뉴 모음 (또는 메뉴 막대를 표시하거나 Mac OS X에있는 경우 도구 메뉴)의 [도구] - [웹 개발자 도구] - [디버거]를 선택하십시오.
    • -
  • 단축키 CtrlShiftS 사용하여 열 수 있습니다. (Mac OS X에서는 CommandOptionS)
    • -
  • 매뉴 버튼 ( new fx menu )을 누릅니다, [웹 개발자 도구] - [디버거]를 선택하십시오.
    • -
- -

{{EmbedYouTube("yI5SlVQiZtI")}}

- -

 

diff --git a/files/ko/tools/how_to/search/index.html b/files/ko/tools/how_to/search/index.html deleted file mode 100644 index 9971abcaae..0000000000 --- a/files/ko/tools/how_to/search/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: Search -slug: Tools/How_to/Search -translation_of: Tools/Debugger/How_to/Search ---- -
{{ToolsSidebar}}
-

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

- -

이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 Debugger (Firefox 52 이전)를 참조하십시오.

- -

이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을false로 설정하여 수행 할 수 있습니다.

-
- -

파일 찾기

- -

특정 파일을 검색하려면, 단축키 Control + P (Mac에서는 Command + P ) 를 누르고 검색어를 입력하세요. 소스창(source pane)에는 입력하는 동안 일치하는 모든 파일 목록을 표시됩니다. 위 아래 방향키로 목록을 이동할 수 있고,  Enter(Return)키로 해당 파일을 열 수 있습니다:

- -

{{EmbedYouTube("xXsfYx0THWg")}}

- -

파일 내에서 찾기

- -

소스창(source pane)에 로드된 파일의 특정 단어를 검색하려면 소스창(source pane)에 포커스가 있는 상태에서 단축키 Control + F (Mac에서는 Command + F) 를 누르고 Enter(Return) 키를 눌러서 검색합니다. 디버거는 코드내에 일치하는 검색한 단어의 수를 표시하고 각 단어를 네모칸으로 표시합니다 :

- -

diff --git a/files/ko/tools/how_to/set_a_breakpoint/index.html b/files/ko/tools/how_to/set_a_breakpoint/index.html deleted file mode 100644 index f5d2af9e06..0000000000 --- a/files/ko/tools/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Set a breakpoint -slug: Tools/How_to/Set_a_breakpoint -translation_of: Tools/Debugger/How_to/Set_a_breakpoint ---- -
{{ToolsSidebar}}
-

이 페이지는 Firefox 52 이상, Firefox Nightly 및 Firefox Developer Edition에 나타나는 JavaScript 디버거에 대해 설명합니다.

- -

이전 버전의 Firefox 나 Firefox Beta 및 Release에서 어떤 모습인지 보려면 Debugger (Firefox 52 이전)를 참조하십시오.

- -

이 버전의 디버거를 가져와 이전 버전으로 다시 전환해야하는 경우 about:config를 url에 입력하여 "devtools.debugger.new-debugger-frontend"환경 설정을false로 설정하여 수행 할 수 있습니다.

-
- -

중단점을 설정하는 방법은 다음과 같은 세가지 방법이 있습니다:

- -
    -
  • 소스 창(source pane) 내에서, 중단점을 원하는 지점의 줄번호(line number)를 클릭하여 중단점을 설정할 수 있습니다.
    • -
  • 소스 창(source pane) 내에서,중단점을 원하는 지점의 줄번호에서 마우스 오른쪽 클릭하여 바로가기 메뉴의"중단점 추가"를 클릭하여 중단점을 설정할 수 있습니다.
    • -
  • 소스 창(source pane) 내에서, 중단점을 원하는 지점의 부분에 커서를 놓고 단축키Ctrl+B (Windows/Linux) 또는 Command+B (Mac OS X)를 눌러서 중단점을 설정할 수 있습니다.
    • -
- -

아래 비디오는 바로가기 메뉴(context menu)를 사용하여 중단 점을 설정합니다:

- -

{{EmbedYouTube("P7b98lEijF0")}}

- -

각 중단점은 디버거의 두 위치에 표시됩니다:

- - diff --git a/files/ko/updating_extensions_for_firefox_2/index.html b/files/ko/updating_extensions_for_firefox_2/index.html deleted file mode 100644 index b8c6f9f648..0000000000 --- a/files/ko/updating_extensions_for_firefox_2/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Updating extensions for Firefox 2 -slug: Updating_extensions_for_Firefox_2 -translation_of: Mozilla/Firefox/Releases/2/Updating_extensions ---- -

이 문서는 Firefox 2에서 확장 기능이 동작하도록 개발자들에게 유용한 정보를 제공해 줍니다. -

-

단계 1: install manifest 업데이트

-

첫 단계로 대부분의 확장기능이 install manifest 파일과 <tt>install.rdf</tt>에서 Firefox 2와의 호환성 정보를 기재해야 합니다. -

간단히 Furefix의 최대 호환 버전에 대한 정보를 제공하면 됩니다. Firefox 1.5는 다음과 같습니다. -

-
 <em:maxVersion>1.5.0.*</em:maxVersion>
-
-

Firefox 2와 호환성을 유지하려면 아래와 같이 수정 합니다. -

-
 <em:maxVersion>2.0.0.*</em:maxVersion>
-
-

확장 기능을 다시 설치해야 합니다. -

-

단계 2: XML 오버레이 업데이트

-

Firefox 2는 기본 스킨이 변경 됩니다. 부가적으로 몇 가지 사용자 인터페이스가 변경 됩니다. 어떤 부가 기능들은 XUL 오버레이와 관련되어 변경 가능성이 있습니다. -

XUL 오버레이와 관련된 변화에 대해서는 Firefox 2에서 테마 변경이라는 문서를 참고하십시오. -

-

단계 3: 테스트

-

확장 기능을 공개 하기 전에 Firefox 2에서 제대로 동작 여부를 테스트해야 합니다. 마지막으로 확장 기능 최신 버전이 Firefox에 문제가 있는 지 여부를 확인 하는 것이 좋습니다. -

-

단계 4: 출시

-

사용자들이 이용할 수 있도록 http://addons.mozilla.org 상 내용을 업데이트 합니다. -

부가적으로 확장 기능이 Firefox 2에서 업데이트 사실을 자동적으로 알 수 있도록 install manifest에 updateURL도 함께 변경 합니다. 이렇게 하면 사용자들이 Firefox 2로 업그레이드 한 후에 자동적으로 확장 기능 업데이트도 함께 제공하게 됩니다. -

{{ 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 deleted file mode 100644 index 82531182f4..0000000000 --- a/files/ko/updating_extensions_for_firefox_3/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: Updating extensions for Firefox 3 -slug: Updating_extensions_for_Firefox_3 -tags: - - Firefox 3 -translation_of: Mozilla/Firefox/Releases/3/Updating_extensions ---- -
-

초안
- 이 문서는 작성중입니다.

- -
- -

이 글은 기존에 작성한 확장 기능이 Firefox 3에서도 잘 작동할 수 있게 업데이트하기 원하는 개발자들에게 유용한 정보를 제공합니다.

- -

진행하기 앞서 유용한 힌트를 드리겠습니다. 여러분이 작성한 확장기능이 install manifest의 maxVersion 값만 수정하면 되고 addons.mozilla.org 에서 제공되고 있다면, 새로운 버전의 확장기능을 업로드할 필요가 없습니다! 그냥 AMO에 있는 Developer Control Panel을 사용해서 maxVersion 을 수정하면 됩니다. 이렇게 하면 여러분의 확장기능이 다시 리뷰되는 것을 막을 수 있습니다.

- -

1단계: install manifest 수정

- -

첫 번째 단계(아마 대부분의 확장기능이 이 단계만 거치면 될 것 같습니다)는 install manifest 파일인 install.rdf를 Firefox 3과 호환되도록 수정하는 것입니다.

- -

먼저 호환 가능한 Firefox의 최고 버전을 나타내는 라인을 찾습니다(Firefox 2에서는 다음과 같을 것입니다).

- -
 <em:maxVersion>2.0.*</em:maxVersion>
-
- -

이 라인을 Firefox 3과 호환되도록 수정하세요.

- -
 <em:maxVersion>3.0.*</em:maxVersion>
-
- -

그리고 확장 기능을 다시 설치하세요.

- -

Firefox 3에서는 버전 번호의 마지막 ".0"이 사용되지 않으므로, "3.0.0.*" 대신 "3.0.*"으로 사용하면 된다는 점을 기억하세요.

- -
주의: 현재 시점에서 Firefox 3가 계속적으로 변경이 있을것으로 생각됩니다. 이러한 변화들로 인해 어떤 확장기능들은 제대로 실행되지 않을 수도 있으므로 Firefox 3 release candidate 버전이 출시되기 전까지는 maxVersion이 3.0.*인 확장기능을 배포하지 않는 것이 좋습니다. Firefox 3 Beta 기간동안에는 maxVersion 값에 3.0b3을 사용하는 것이 좋습니다.
- -

확장기능들을 제대로 동작하지 않게 만들 수 있는 API의 많은 변화가 있었고 앞으로도 계속될 것입니다. 우리는 이러한 변화에 대한 전체 목록을 제공하기 위해 지속적으로 작업하고 있습니다.

- -
주의: 여러분의 확장기능이 아직도 install manifest가 아닌 Install.js 스크립트를 사용하고 있다면, 지금 시점에는 install manifest로 전환해야만 합니다. Firefox 3은 더 이상 XPI 파일의 install.js 스크립트를 지원하지 않습니다.
- -

Install manifest에 지역화 추가하기

- -

Firefox 3에서는 지역화된 정보를 명시하기 위해 install manifest에 새로운 속성을 지원합니다. 기존 방법들이 여전히 동작하긴 하지만 새로운 방법을 이용하면 Firefox에서 부가 기능의 설치가 중지되어 있거나 불가능한 동안에도 지역 정보를 선택할 수 있도록 해 줍니다. 자세한 내용은 Localizing extension descriptions을 참조하세요.

- -

단계 2: 보안 업데이트를 제공하고 있는지 확인하세요.

- -

여러분이 직접 부가기능을 제공하고 있지만 addons.mozilla.org과 같은 보안을 지원하지 않을 경우에는, 부가 기능을 업데이트할 수 있는 보안 방법을 제공해야 합니다. 이를 위해서는 여러분의 업데이트 사이트가 SSL 웹사이트에서 운영되던지 업데이트 정보가 서명된 암호화 키를 사용해야 합니다. 자세한 정보는 Securing Updates를 읽어보세요.

- -

단계 3: 변경된 API 처리하기

- -

몇 가지 API에서 중요한 변화가 있었습니다. 다음은 대부분의 확장 기능에 영향을 줄 것으로 보이는, 가장 중요한 변화들 입니다.

- -

DOM

- -

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they - can be inserted into the current document. For more on the Node.ownerDocument issues, see the - W3C DOM FAQ.

- -

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.

- -

북마크 & 히스토리

- -

여러분의 확장 기능이 어떤 방식으로든 북마크나 히스토리 자료에 접근한다면, Firefox 3과 호환되도록 하기 위해 많은 수정 작업이 필요합니다. 해당 정보에 접근하는데 사용되었던 기존 API는 새로운 Places 구조로 변경되었습니다. 기존 확장 기능을 Places API를 사용하도록 업데이트하는 것과 관련된 상세 내용은 플레이스로 이행 가이드를 참조하세요.

- -

다운로드 관리자

- -

다운로드 관리자 API는 RDF data store에서 [Storage]] API로의 변경으로 인하여 약간의 변경 사항이 있습니다. 이와 관련된 변경은 꽤 쉽습니다. 추가적으로 다운로드 진행을 모니터링하는 API에서는 다중 다운로드 관리자 리스너를 지원하도록 변경되었습니다. 자세한 내용은 nsIDownloadManager, nsIDownloadProgressListener, Monitoring downloads를 참조하세요.

- -

암호 관리자

- -

여러분의 확장기능이 암호 관리자를 이용하여 사용자의 로그인 정보에 접근한다면, 새로운 암호 관리자 API를 사용하도록 업데이트해야만 합니다.

- -
    -
  • The article Using nsILoginManager 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.
    • -
  • nsILoginInfo
    • -
  • nsILoginManager
    • -
- -

Popups (Menus, Context Menus, Tooltips and Panels)

- -

The XUL Popup system was heavily modified in Firefox 3. The Popup system includes main menus, context menus and popup panels. A guide to using Popups has been created, detailing how the system works. One thing to note is that popup.showPopup has been deprecated in favor of new popup.openPopup and popup.openPopupAtScreen.

- -

제거된 인터페이스

- -

다음 인터페이스들은 Firefox 3의 기반인 Gecko 1.9에서 제거되었습니다. 확장 기능이 이것들을 사용한다면 코드를 업데이트 해야 합니다.

- -
    -
  • nsIDOMPaintListener
    • -
  • nsIDOMScrollListener
    • -
  • nsIDOMMutationListener
    • -
  • nsIDOMPageTransitionListener
    • -
  • nsICloseAllWindows (bug 386200 참조)
    • -
- -

Step 4: Check for relevant chrome changes

- -

There has been a minor change to the chrome that may require changes in your code. A new vbox 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.

- -

For example, if you previously overlaid some chrome before the status bar, like this:

- -
<window id="main-window">
-  <something insertbefore="status-bar" />
-</window>
-
- -

You should now overlay it like this:

- -
<vbox id="browser-bottombox">
-  <something insertbefore="status-bar" />
-</vbox>
-
- -
주의: This change is effective for Firefox 3 beta 4 and the pre-beta 4 nightlies.
- -

그 밖의 변화들

- -

여러분의 확장기능이 Firefox 3에서 제대로 동작하기 위해 업데이트 했던 간단한 사항들을 추가해 주세요.

- - - -
 
diff --git a/files/ko/updating_web_applications_for_firefox_3/index.html b/files/ko/updating_web_applications_for_firefox_3/index.html deleted file mode 100644 index 6598042587..0000000000 --- a/files/ko/updating_web_applications_for_firefox_3/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -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 ---- -

{{ Fx_minversion_header(3) }}{{ Draft() }} Firefox 3에는 웹 사이트와 웹 애플리케이션에 영향을 줄 수 있는 다수의 변경 사항과 잇점을 줄 수 있는 새로운 기능이 포함 되어 있습니다. 이 문서는 Firefox 3의 잇점을 최대한 이용 가능할 수 있도록 웹 사이트를 업데이트 하는 방법을 알려 줄 것입니다.

- -

Firefox 3는 2007년 가을 현재 베타 버전을 출시하였습니다.

- -

이 문서를 계속 주시하시면 추가 사항들을 계속 업데이트 할 것입니다.

- -

DOM 변경 사항

- -

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they - can be inserted into the current document. For more on the Node.ownerDocument issues, see the - W3C DOM FAQ.

- -

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.

- -

HTML 변경 사항

- -

Firefox 3는 frame과 iframe이 부모의 문자 인코딩을 상속받도록 하는 보안 문제를 해결하였습니다. 이 문제는 여러 가지 이슈를 만들어내었습니다. 이제 frame은 두 frame이 같은 서버에서 읽으면 부모의 문자 인코딩만 상속 받습니다. 만약 여러분의 웹 페이지 내에서 다른 서버에 있는 웹 페이지를 frame으로 호출할 경우, HTML로 특정 문자 인코딩을 선언해 주어야 합니다.

- -

JavaScript 변경 사항

- -

Firefox 3는 JavaScript 1.8을 지원 합니다. 웹 사이트에서 변경 해야할 주요 사항은 이제 더 이상 사용하지 않는 비표준 Script 객체를 더 이상 지원하지 않는 다는 것입니다. 그러나 Script가 비표준이기 때문에 대부분 이런 문제를 가지고 있지 않을 것으로 판단 하고 있습니다.

- -

참고 사항

- -

Firefox 3 개발자 필독 사항, JavaScript 1.8, Firefox 3를 위한 확장 기능 업데이트

- -
 
- -

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

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 deleted file mode 100644 index 194ca2c7b7..0000000000 --- a/files/ko/using_mozilla_in_testing_and_debugging_web_sites/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -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 ---- -
-

Original Document Information

-
  • Author(s): Henrik Gemal -
  • Last Updated Date: Published 11 Apr 2003 -
  • Copyright Information: © Copyright 2003 Henrik Gemal. Reprinted with permission. -
  • Note: This reprinted article was originally part of the DevEdge site. -
-
diff --git a/files/ko/using_xpath/index.html b/files/ko/using_xpath/index.html deleted file mode 100644 index e5e70ed9fa..0000000000 --- a/files/ko/using_xpath/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -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 -translation_of_original: Using_XPath ---- -

XPath은 XML 문서의 위치 정보를 위한 언어입니다. -

이 문서는 자바스크립트 코드와 XPath의 관계를 위한 Mozilla 인터페이스에 대해 설명합니다. 이러한 것들은 (이 부분에 대해 W3C 작업 그룹에서 작성한) DOM Level 3 XPath에 설명되어 있습니다. -

이 문서는 XPath 자체를 설명하지 않습니다. 기술에 대해 익숙하지 않다면 W3Schools XPath tutorial을 참고하십시오. -

-

Wrapper function

-

다음의 함수는 주어진 XML 노드의 XPath 표현을 평가하는데 사용할 수 있습니다. 첫 번째 전달인자는 DOM 노드 혹은 Document 객체이고, 두 번째 전달인자는 XPath 표현에 대한 문자열 정의입니다. -

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

이 함수는 new XPathEvaluator()와 같이 사용할 수 있습니다. 이것의 생성자는 Mozilla에 정의되어 있습니다. 다른 브라우저에서 사용될 웹페이지에서 이 스크립트가 사용된다면 다음과 같이 new XPathEvaluator()를 호출하면 됩니다: -

-
  // XPathEvaluator is implemented on objects that implement Document
-  var xpe = aNode.ownerDocument || aNode;
-
-

이 예에서 XPathNSResolver를 생성하는 것은 다음과 같이 간략화할 수 있습니다: -

-
  var nsResolver = xpe.createNSResolver(xpe.documentElement);
-
-

그러나 createNSResolver는 XPath 표현에 대한 네임스페이스가 정해져 있고, 그러한 것들이 쿼리를 보낼 문서의 내용과 일치하여야 합니다. 그렇지 않다면 당신 자신만의 XPathNSResolver를 수행하는 부분을 만들어야 합니다. -

(Parsing and serializing XML에서 설명하는 것과 같은) DOM 트리안에 로컬이나 원격 XML 파일을 읽기 위해 XMLHttpRequest를 사용한다면, evaluateXPath()의 첫 번째 전달인자는 req.responseXML가 되어야 합니다. -

-

사용예

-

다음과 같은 XML 문서가 있다고 가정합니다.(How to Create a DOM tree와 Parsing and serializing XML을 참조하십시오.): -

-
<?xml version="1.0"?>
-<people>
-  <person first-name="eric" middle-initial="H" last-name="jung">
-    <address street="321 south st" city="denver" state="co" country="usa"/>
-    <address street="123 main st" city="arlington" state="ma" country="usa"/>
-  </person>
-
-  <person first-name="jed" last-name="brown">
-    <address street="321 north st" city="atlanta" state="ga" country="usa"/>
-    <address street="123 west st" city="seattle" state="wa" country="usa"/>
-    <address street="321 south avenue" city="denver" state="co" country="usa"/>
-  </person>
-</people>
-
-

XPath 표현으로 문서에 "query"를 보낼 수 있습니다. 비록 DOM 트리를 탐색하는 것이 비슷한 결과를 가져오더라도 XPath를 사용하는 것이 더 빠르고 강력합니다. 만일 id attribute를 사용한다면 document.getElementById()를 사용해도 여전히 강력합니다. 하지만, XPath 만큼 강력하지 않습니다. 몇 가지 예제가 있습니다: -

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

정보

- - -

{{ languages( { "fr": "fr/Utilisation_de_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath" } ) }}

diff --git a/files/ko/web/api/ambient_light_events/index.html b/files/ko/web/api/ambient_light_events/index.html new file mode 100644 index 0000000000..b033d4f80d --- /dev/null +++ b/files/ko/web/api/ambient_light_events/index.html @@ -0,0 +1,64 @@ +--- +title: Using Light Events +slug: WebAPI/Using_Light_Events +tags: + - Ambient Light +translation_of: Web/API/Ambient_Light_Events +--- +
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
+ +

주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.

+ +

빛 이벤트

+ +

기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.

+ +

이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 window 객체 수준에서 캡춰됩니다.

+ +

캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.

+ +

예제

+ +
window.addEventListener('devicelight', function(event) {
+  var html = document.getElementsByTagName('html')[0];
+
+  if (event.value < 50) {
+    html.classList.add('darklight');
+    html.classList.remove('brightlight');
+  } else {
+    html.classList.add('brightlight');
+    html.classList.remove('darklight');
+  }
+});
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}{{ Spec2('AmbientLight') }}Initial specification
+ +

브라우저 호환성

+ + + +

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

+ +

같이 보기

+ +
    +
  • {{domxref("DeviceLightEvent")}}
    • +
  • {{event("devicelight")}}
    • +
diff --git a/files/ko/web/api/battery_status_api/index.html b/files/ko/web/api/battery_status_api/index.html new file mode 100644 index 0000000000..12347b0f20 --- /dev/null +++ b/files/ko/web/api/battery_status_api/index.html @@ -0,0 +1,75 @@ +--- +title: Battery Status API +slug: WebAPI/Battery_Status +tags: + - API + - Apps + - Battery API + - Battery Status API + - Obsolete + - 가이드 + - 개요 + - 모바일 + - 배터리 + - 어플리케이션 +translation_of: Web/API/Battery_Status_API +--- +
{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}
+ +

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

+ +

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

+ +

예제

+ +

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

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

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

+ +

사양

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

브라우저 호환성

+ + + +

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

+ +

더보기

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

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

+ +

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

+ +

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

+ +

일반 정보

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

특성

+ +

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

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

방법

+ +

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

+ +

관련 자료

+ +
    +
  • {{event("open")}}, {{event("close")}}.
    • +
+ +

사양

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

브라우저 호환성

+ +

{{ CompatibilityTable() }}

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

보기

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

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

+ +

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

+ +

Open in new window

+ +

Why?

+ +

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

+ +

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

+ +

How?

+ +

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

+ +

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

+ +

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

+ +

Results

+ +

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

+ +

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

+ +

The ray-caster

+ +

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

+ +

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

+ +

See also

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

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

+ +

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

+ +

기본 예시

+ +

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

+ +

HTML

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

JavaScript

+ +

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

+ +

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

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

결과

+ +

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

+ +

레퍼런스

+ +
+
    +
  • {{domxref("HTMLCanvasElement")}}
    • +
  • {{domxref("CanvasRenderingContext2D")}}
    • +
  • {{domxref("CanvasGradient")}}
    • +
  • {{domxref("CanvasImageSource")}}
    • +
  • {{domxref("CanvasPattern")}}
    • +
  • {{domxref("ImageBitmap")}}
    • +
  • {{domxref("ImageData")}}
    • +
  • {{domxref("RenderingContext")}}
    • +
  • {{domxref("TextMetrics")}}
    • +
  • {{domxref("OffscreenCanvas")}} {{experimental_inline}}
    • +
  • {{domxref("Path2D")}} {{experimental_inline}}
    • +
  • {{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}
    • +
+
+ +
+

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

+
+ +

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

+ +

가이드 및 튜토리얼

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

라이브러리

+ +

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

+ +
    +
  • EaselJS는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.
    • +
  • Fabric.js는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.
    • +
  • heatmap.js는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.
    • +
  • JavaScript InfoVis Toolkit은 인터렉티브한 데이터 시각화를 생성합니다.
    • +
  • Konva.js는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.
    • +
  • p5.js는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.
    • +
  • Paper.js는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.
    • +
  • Phaser는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.
    • +
  • Processing.js는 Processing 시각화 언어의 포트입니다.
    • +
  • Pts.js는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.
    • +
  • Rekapi는 Canvas를 위한 애니메이션 키 프레임 API입니다.
    • +
  • Scrawl-canvas는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.
    • +
  • ZIM 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.
    • +
+ +
+

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

+
+ +

명세

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

브라우저 호환성

+ +

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

+ +

함께 보기

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

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

+
+ +

라이브 예제 보기

+ +

문서(document) 내용

+ +

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

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

여기에서 중요한 요소는:

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

자바스크립트 코드

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

타이머 콜백

+ +

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

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

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

+ +

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

+ +

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

+ +

비디오 프레임 데이터 조작

+ +

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

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

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

+ +

video.png

+ +

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

+ +

sourcectx.png

+ +

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

+ +

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

+ +

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

+ +

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

+ +

output.png

+ +

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

+ +

라이브 예제 보기

+ +

더 보기

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

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

+
+ +

공 그리기

+ +

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

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

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

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

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

+ +

속도 추가하기

+ +

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

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

경계

+ +

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

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

First demo

+ +

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

+ + + +

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

+ +

가속

+ +

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

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

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

+ + + +

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

+ +

후행 효과

+ +

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

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

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

+ +

마우스 컨트롤 추가하기

+ +

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

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

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

+ +

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

+ +

Breakout

+ +

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

+ +

더보기

+ + + +

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

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

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

+
+ +

색상

+ +

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

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

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

+ +
+

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

+
+ +

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

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

fillStyle 예제

+ +

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

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

결과는 아래와 같습니다.

+ +

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

+ +

strokeStyle 예제

+ +

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

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

결과는 아래와 같습니다.

+ +

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

+ +

투명도

+ +

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

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

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

+ +

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

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

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

+ +

globalAlpha 예제

+ +

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

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

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

+ +

rgba()를 사용한 예제

+ +

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

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

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

+ +

선 모양

+ +

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

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

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

+ +

lineWidth 예제

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

+ +

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

+ +

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

+ +
+

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

+ +

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

+
+ +

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

+ +

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

+ +

lineCap 예제

+ +

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

+ +

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

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

+ +

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

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

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

+ +

lineJoin 예제

+ +

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

+ +

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

+ +

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

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

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

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

+ +

miterLimit 속성 예제

+ +

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

+ +

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

+ +

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

+ +
    +
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • +
  • 초기 설정값이 10.0인 뾰족함 제한(miter limit)값은 약 11도보다 낮은 예각인 곳을 bevel 값 모양으로 만듭니다.
    • +
  • 뾰족함 제한 값이 √2 ≈ 1.4142136(반올림)과 같다면 연결되는 곳이 둔각이거나 직각인 곳을 제외한 모든 곳을 bevel 값 모양으로 만듭니다.
    • +
  • 뾰족함 제한 값이 1.0과 같다면 모든 곳을 bevel 값 모양으로 만듭니다.
    • +
  • 뾰족함 제한 값에는 1.0보다 작은 값이 올 수 없습니다.
    • +
+ +

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

+ +

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

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

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

+ +

 

+ +

대시라인 사용하기

+ +

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

+ +

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

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

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

+ +

그라디언트(Gradient)

+ +

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

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

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

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

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

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

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

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

createLinearGradient 예제

+ +

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

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

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

+ +

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

+ +

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

+ +

createRadialGradient 예제

+ +

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

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

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

+ +

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

+ +

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

+ +

패턴(Patterns)

+ +

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

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

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

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

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

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

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

+
+ +

createPattern 예제

+ +

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

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

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

+ +

그림자

+ +

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

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

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

+ +

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

+ +

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

+ +
+

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

+
+ +

그림자 있는 글자 예제

+ +

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

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

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

+ +

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

+ +

캔버스 채우기 규칙

+ +

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

+ + + +

In this example we are using the evenodd rule.

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

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

+ +

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

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

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

+

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

+

기본 애니메이션 단계

+

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

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

애니메이션 제어하기

+

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

+

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

+

예정된 변경

+

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

+
+

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

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

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

+

사용자 상호 작용 변경

+

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

+

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

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

또는

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

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

+

태양계 애니메이션

+

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

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

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

+

시계 애니메이션

+

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

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

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

+

움직이는 파노라마 사진

+

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

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

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

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

Live sample

+

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

+

또 다른 예제들

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

이것도 보세요

+ +

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

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

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

+
+ +

<canvas> 요소

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

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

+ +
+

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

+
+ +

 

+ +

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

+ +

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

+ +
+

대체 콘텐츠

+ +

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

+ +

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

+ +

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

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

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

+ +

</canvas> 태그 필수

+ +

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

+ +

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

+ +

렌더링 컨텍스트

+ +

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

+ +

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

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

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

+ +
+

지원여부 검사

+ +

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

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

템플릿 뼈대

+ +

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

+ +
+

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

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

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

+ +

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

+ +

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

+ +

기본 예제

+ +

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

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

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

+ +

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

+ +

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

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

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

+ +

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

+ +

도형 합성 예제

+ +

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

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

메인 프로그램

+ +

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

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

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

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

보조 함수

+ +

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

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

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

+ +

globalCompositeOperation

+ +

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

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

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

+ +

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

+ +

잘라내기 경로(Clipping path)

+ +

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

+ +

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

+ +

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

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

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

+ +

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

+ +

clip 예제

+ +

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

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

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

+ +

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

+ +

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

+ +

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

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

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

+
+ +

그리드

+ +

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

+ +

직사각형 그리기

+ +

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

+ +

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

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

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

+ +

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

+ +

직사각형 도형 예제

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

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

+ +

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

+ +

fillRect() 함수는 가로 세로 100 픽셀 사이즈의 검정 사각형을 그립니다. 이후 clearRect() 함수가 60x60 픽셀의 사각형 크기로 도형 중앙을 지우게 되고, strokeRect()은 이 빈 사각형 공간 안에 50x50 픽셀 사이즈의 윤곽선만 있는 사각형을 만들게 됩니다.

+ +

다음 페이지에서, 우리는 clearRect()를 대신하는 두개의 함수에 대해 살펴보고, 만들어진 도형의 색이나 윤곽선의 스타일을 바꾸는 방법들에 대하여 알아보도록 하겠습니다.

+ +

우리가 다음 섹션에서 보게될 path 함수와 다르게 세개의 직사각형 함수는 캔버스에 바로 그릴 수 있습니다.

+ +

경로 그리기

+ +

경로(path)는 직사각형 이외의 유일한 원시적인(primitive) 도형입니다. 경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 됩니다. 경로나 하위 경로(sub-path)는 닫힐 수 있습니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거쳐야 합니다:

+ +
    +
  1. 경로를 생성합니다.
    2. +
  2. 그리기 명령어를 사용하여 경로상에 그립니다.
    3. +
  3. 경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.
    4. +
+ +

다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다:

+ +
+
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
+
새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.
+
Path 메소드 (Path methods)
+
물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.
+
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
+
현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.
+
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
+
윤곽선을 이용하여 도형을 그립니다.
+
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
+
경로의 내부를 채워서 내부가 채워진 도형을 그립니다.
+
+ +

경로를 만들기 위한 첫번째 단계는 beginPath() 메소드를 사용하는 것 입니다. 내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있습니다. 이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 됩니다.

+ +
참고:  현재 열린 path가  비어있는 경우 ( beginPath() 메소드를 사용한 직 후, 혹은캔버스를 새로 생성한 직후), 첫 경로 생성 명령은 실제 동작에 상관 없이 moveTo()로 여겨지게 됩니다. 그렇기 때문에 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해 두는것이 좋습니다.
+ +

두번째 단계는 실제로 경로가 그려지는 위치를 설정하는 메소드를 호출하는 것 입니다. 이 내용에 대해서는 곧 보실수 있습니다.

+ +

세번째 단계는 선택사항으로 closePath() 메소드를 호출하는 것 입니다. 이 메소드는 현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫습니다. 이미 도형이 닫혔거나 한 점만 존재한다면, 이 메소드는 아무것도 하지 않습니다.

+ +
참고:  fill() 메소드 호출 시, 열린 도형은 자동으로 닫히게 되므로  closePath()메소드를 호출하지 않아도 됩니다. 이것은 stroke() 메소드에는 적용되지 않습니다.
+ +

삼각형 그리기

+ +

예를 들어, 삼각형을 그리기 위한 코드는 다음과 같습니다:

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.moveTo(75, 50);
+    ctx.lineTo(100, 75);
+    ctx.lineTo(100, 25);
+    ctx.fill();
+  }
+}
+
+ +

위 코드의 실행 결과는 다음과 같습니다:

+ +

{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

+ +

펜(pen) 이동하기

+ +

가장 유용한 함수중에 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는  moveTo() 함수가 있습니다. 이는 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 보시면 됩니다.

+ +
+
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
+
펜을  x와 y 로 지정된 좌표로 옮깁니다.
+
+ +

캔버스가 초기화 되었거나 beginPath() 메소드가 호출되었을 때, 특정 시작점 설정을 위해 moveTo() 함수를 사용하는것이 좋습니다. 또한 moveTo()  함수는 연결되지 않은 경로를 그리는데에도 사용 할 수 있습니다. 아래의 스마일 아이콘을 봅시다.

+ +

코드 snippet을 사용해하여 직접 시도하여 보세요. 앞에서 보았던 draw() 함수(function)를 붙혀넣기 해 보세요.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+     var ctx = canvas.getContext('2d');
+
+    ctx.beginPath();
+    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
+    ctx.moveTo(110, 75);
+    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
+    ctx.moveTo(65, 65);
+    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
+    ctx.moveTo(95, 65);
+    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
+    ctx.stroke();
+  }
+}
+
+ +

결과는 다음과 같습니다:

+ +

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

+ +

 moveTo()를 사용한 코드라인을 지우면 연결된 선들을 확인 할 수 있습니다

+ +
+

참고: arc() function에 대하여 더 알아보고 싶다면 아래의  {{anch("Arcs")}} 를 확인하세요.

+
+ +

선

+ +

직선을 그리기 위해서는 lineTo() 메소드를 사용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
+
현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.
+
+ +

이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 moveTo() 메소드를 통해 변경될 수 있습니다.

+ +

아래의 예시는 하나의 두 삼각형 (윤곽선 삼각형, 색칠된 삼각형)을 그립니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Filled triangle
+    ctx.beginPath();
+    ctx.moveTo(25, 25);
+    ctx.lineTo(105, 25);
+    ctx.lineTo(25, 105);
+    ctx.fill();
+
+    // Stroked triangle
+    ctx.beginPath();
+    ctx.moveTo(125, 125);
+    ctx.lineTo(125, 45);
+    ctx.lineTo(45, 125);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+ +

새로운 경로를 지정하기 위해 beginPath() 메소드를 먼저 실행합니다. 그 다음 moveTo() 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정 해 줍니다. 다음은, 두선을 그어 삼각형의 두 면을 그려줍니다.

+ +

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

+ +

여러분은 채워진 삼각형과 윤곽선 삼각형의 차이를 확인 하셨을 겁니다. 위에 언급했던 것 처럼, 경로가 채워지게 되면 그 도형은 자동으로 닫히게 되지만 윤곽선 삼각형에서는 그렇지 않기 때문입니다. 만약에 closePath() 메소드를 윤곽선 삼각형 코드에서 지운다면, 오직 두 선만 그려지게 되며 완벽한 삼각형으로 만들어지지 않습니다.

+ +

호(arc)

+ +

호나 원을 그리기위해서는 arc() 혹은 arcTo() 메소드를 사용합니다..

+ +
+
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
+
(x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.
+
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
+
주어진 제어점들과 반지름으로 호를 그리고,  이전 점과 직선으로 연결합니다.
+
+ +

arc 메소드의 여섯개의 매개변수에 대하여 좀 더 자세하게 알아봅시다: x 와 y는 호를 그릴 때 필요한 원점 좌표입니다. 반지름(radius) 은 말 그대로 호의 반지름을 뜻합니다. startAngle 및 endAngle 매개 변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. Boolean 값을 가지는 anticlockwise 변수는 true일 때 호를 반시계 방향으로 그리게 되며, 그렇지 않을 경우에는 시계 방향으로 그리게 됩니다.

+ +
+

참고: arc 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 다음의 자바스크립트(JavaScript) 코드를 사용하실 수 있습니다: radians = (Math.PI/180)*degrees.

+
+ +

다음의 예제는 우리가 이제껏 봐 왔던 예제들 보다 약간 더 복잡합니다. 이 예제는 12가지의 다양한 각도로 채워진 각기 다른 호를 그립니다.

+ +

두개의  for loops은 루프를 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. beginPath()를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 꼭 필요한 것은 아닙니다.

+ +

x와 y 좌표는 충분히 명확하게 표기되어야 합니다.  radius 와 startAngle은 고정되어 있습니다. endAngle는 처음 180도 (반원) 에서 시작하고 이후 매번 90도씩 증가하다가 마지막 열에서 완벽한 원을 그립니다.

+ +

clockwise 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로 원호들이 그려졌고 두번째와 네번째 줄에는 반시계방향의 원호들이 그려졌습니다. 마지막으로 if 문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어 냅니다.

+ +
+

참고: 이 예제는 다른 예제들 보다 더 큰사이즈의 캔버스가 필요합니다: 150 x 200 픽셀

+
+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.beginPath();
+        var x = 25 + j * 50; // x coordinate
+        var y = 25 + i * 50; // y coordinate
+        var radius = 20; // Arc radius
+        var startAngle = 0; // Starting point on circle
+        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
+        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
+
+        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
+
+        if (i > 1) {
+          ctx.fill();
+        } else {
+          ctx.stroke();
+        }
+      }
+    }
+  }
+}
+
+ +

{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

+ +

베지어(Bezier) 곡선과 이차(Quadratic )곡선

+ +

다음 경로 타입은 베지어 곡선 (Bézier curves)으로, 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 대게 복잡한 유기체적 형태 (organic shape)를 그리는데 사용됩니다.

+ +
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
+
cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다.
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
+
(cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.
+
+ +

오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명해주고 있습니다. 이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 제어점 (control point, 빨간 점으로 표시)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.

+ +

두 메소드에 모두 사용되는 x와 y 변수는 모두 끝점의 좌표를 나타냅니다. 첫번째 제어점은 cp1x 와 cp1y 좌표로, 두번째 제어점은 cp2x 와 cp2y  좌표로 표시되었습니다.

+ +

이차 및 삼차 베지어 곡선을 사용하는 것은 매우 어려울 수 있습니다. Adobe Illustrator와 같은 벡터 드로잉 소프트웨어와는 달리, 우리는 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다. 이런 점은 복잡한 모양을 그리기 어렵도록 합니다. 다음 예제에서 우리는 간단한 유기체적 형태만 그리도록 하겠지만, 여러분이 연습과 시간을 투자 하신다면, 이후에 더욱 복잡한 도형을 그릴수 있게 될 것입니다.

+ +

이 예제는 아주 어려운 점은 없습니다. 두 경우 모두 연속된 곡선이 그려지면서 최종 모양이 완성됩니다.

+ +

이차 베지에 곡선(Quadratic Bezier curves)

+ +

이 예제는 여러개의 이차 베지어 곡선을 이용해 말풍선을 만들어 냅니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Quadratric curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 25);
+    ctx.quadraticCurveTo(25, 25, 25, 62.5);
+    ctx.quadraticCurveTo(25, 100, 50, 100);
+    ctx.quadraticCurveTo(50, 120, 30, 125);
+    ctx.quadraticCurveTo(60, 120, 65, 100);
+    ctx.quadraticCurveTo(125, 100, 125, 62.5);
+    ctx.quadraticCurveTo(125, 25, 75, 25);
+    ctx.stroke();
+  }
+}
+
+ +

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

+ +

삼차 베지어 곡선 (Cubic Bezier curves)

+ +

이 예제는 삼차 곡선을 이용하여 하트를 그립니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    // Cubic curves example
+    ctx.beginPath();
+    ctx.moveTo(75, 40);
+    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
+    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
+    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
+    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
+    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
+    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
+    ctx.fill();
+  }
+}
+
+ +

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

+ +

직사각형

+ +

직사각형을 캔버스에 직접 그리는 {{anch("직사각형 그리기")}}에서 본 세 가지 메소드 외에 rect() 메소드도 있습니다. 이 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.

+ +
+
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
+
좌측상단이 (x, y)이고 폭과 높이가 width와 height인 직사각형을 그립니다.
+
+ +

이 메소드가 실행되기 전에, (x,y) 매개변수를 가진 moveTo() 메소드가 자동으로 호출됩니다. 즉, 현재의 펜위치가 자동으로 기본 좌표로 초기화 됩니다.

+ +

조합하기

+ +

이제까지 이 페이지의 예제들은 각각의 도형마다 하나의 path 함수를 가지고 있었습니다. 하지만 도형을 만드는데에 사용되는 경로의 종류와 개수는 제한이 없습니다. 그렇기 때문에 이 마지막 예제에서는 모든 경로 함수를 합쳐 여러 게임 캐릭터들을 그려보도록 하겠습니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    roundedRect(ctx, 12, 12, 150, 150, 15);
+    roundedRect(ctx, 19, 19, 150, 150, 9);
+    roundedRect(ctx, 53, 53, 49, 33, 10);
+    roundedRect(ctx, 53, 119, 49, 16, 6);
+    roundedRect(ctx, 135, 53, 49, 33, 10);
+    roundedRect(ctx, 135, 119, 25, 49, 10);
+
+    ctx.beginPath();
+    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
+    ctx.lineTo(31, 37);
+    ctx.fill();
+
+    for (var i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 35, 4, 4);
+    }
+
+    for (i = 0; i < 6; i++) {
+      ctx.fillRect(115, 51 + i * 16, 4, 4);
+    }
+
+    for (i = 0; i < 8; i++) {
+      ctx.fillRect(51 + i * 16, 99, 4, 4);
+    }
+
+    ctx.beginPath();
+    ctx.moveTo(83, 116);
+    ctx.lineTo(83, 102);
+    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
+    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
+    ctx.lineTo(111, 116);
+    ctx.lineTo(106.333, 111.333);
+    ctx.lineTo(101.666, 116);
+    ctx.lineTo(97, 111.333);
+    ctx.lineTo(92.333, 116);
+    ctx.lineTo(87.666, 111.333);
+    ctx.lineTo(83, 116);
+    ctx.fill();
+
+    ctx.fillStyle = 'white';
+    ctx.beginPath();
+    ctx.moveTo(91, 96);
+    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
+    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
+    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
+    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
+    ctx.moveTo(103, 96);
+    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
+    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
+    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
+    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
+    ctx.fill();
+
+    ctx.fillStyle = 'black';
+    ctx.beginPath();
+    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+
+    ctx.beginPath();
+    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
+    ctx.fill();
+  }
+}
+
+// A utility function to draw a rectangle with rounded corners.
+
+function roundedRect(ctx, x, y, width, height, radius) {
+  ctx.beginPath();
+  ctx.moveTo(x, y + radius);
+  ctx.lineTo(x, y + height - radius);
+  ctx.arcTo(x, y + height, x + radius, y + height, radius);
+  ctx.lineTo(x + width - radius, y + height);
+  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
+  ctx.lineTo(x + width, y + radius);
+  ctx.arcTo(x + width, y, x + width - radius, y, radius);
+  ctx.lineTo(x + radius, y);
+  ctx.arcTo(x, y, x, y + radius, radius);
+  ctx.stroke();
+}
+
+ +

결과 이미지는 다음과 같습니다:

+ +

{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

+ +

이 예제는 보기보다 아주 간단하기 때문에 자세한 설명은 생략하겠습니다. 알아 두어야할 가장 중요한 부분은 fillStyle  코드와 사용된 유틸리티 함수 (roundedRect() 부분) 입니다. 유틸리티 함수를 사용하게 되면, 사용해야 할 코드의 양과 복잡함을 줄여주는데 도움을 줍니다.

+ +

이 튜토리얼에서 나중에 fillStyle에 대하여 조금 더 자세하게 알아보도록 하겠지만, 지금은 경로의 채우는 색을 기본값(흑백)에서 바꾸었다가 다시 기본값으로 바꾸는 정도로만 사용하였습니다.

+ +

Path2D 오브젝트 (Path2D objects)

+ +

마지막 예제에서 보았 듯이, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수있는 {{domxref("Path2D")}} 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이로써 여러분은 경로를 빠르게 다시 실행 시킬 수 있습니다.

+ +

어떻게 Path2D object를 생성 할 수 있는지 확인해 봅시다:

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Path2D() 생성자는 새로운 Path2D 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.
+
+ +
new Path2D();     // empty path object
+new Path2D(path); // copy from another Path2D object
+new Path2D(d);    // path from SVG path data
+ +

moveTo, rect, arc 혹은 quadraticCurveTo 등과 같은 모든 경로 메소드 (path methods)들은  Path2D 객체에서 사용 가능합니다.

+ +

Path2D API는 또한 addPath 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들자면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용 될 수 있습니다.

+ +
+
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
+
옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.
+
+ +

Path2D 예제

+ +

이 예제에서는, 직사각형과 원을 만들어 볼 것입니다. 나중에 사용할 것을 고려하여, 두 도형 모두 Path2D object로 저장 될 것입니다. 새로운 버전의 Path2D API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 Path2D object를 옵션으로 선택하여 사용 할 수 있도록 업데이트 되었습니다. 아래의 예제에서 보시면, stroke 와 fill 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.

+ + + +
function draw() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    var rectangle = new Path2D();
+    rectangle.rect(10, 10, 50, 50);
+
+    var circle = new Path2D();
+    circle.moveTo(125, 35);
+    circle.arc(100, 35, 25, 0, 2 * Math.PI);
+
+    ctx.stroke(rectangle);
+    ctx.fill(circle);
+  }
+}
+
+ +

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

+ +

SVG paths 사용하기

+ +

새로운 캔버스 path2D API 또다른 강력한 특징 중 하나는, 캔버스의 path를 초기화 하기 위해 SVG path data를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG와 canvas 에서 재사용 할 수 있도록 해줍니다. 

+ +

path는 (M10 10) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (h 80)  만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (h -80) 수평하게 이동하고 다시 시작점 (z)으로 돌아갑니다. 예시는 이곳( Path2D constructor )에서 확인하실 수 있습니다.

+ +
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
+ +
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html new file mode 100644 index 0000000000..2c789e85a4 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/drawing_text/index.html @@ -0,0 +1,164 @@ +--- +title: 텍스트 그리기 +slug: Drawing_text_using_a_canvas +tags: + - HTML + - 'HTML:Canvas' + - NeedsContent +translation_of: Web/API/Canvas_API/Tutorial/Drawing_text +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
+ +
+

이전 챕터에서 스타일과 컬러를 적용하는 방법에 대해서 보았고 이번에는 캔버스에 텍스트를 그리는 방법에 대해서 볼 예정입니다.

+
+ +

텍스트 그리기

+ +

캔버스 렌더링 컨텍스트(canvas rendering context)는 텍스트를 렌더링하는 두 가지 방법을 제공합니다.

+ +
+
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
+
주어진 (x, y) 위치에 주어진 텍스트를 채웁니다. 최대 폭(width)은 옵션 값 입니다.
+
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
+
주어진 (x, y) 위치에 주어진 텍스트를 칠(stroke)합니다. 최대 폭(width)은 옵션 값 입니다.
+
+ +

fillText 예제

+ +

텍스트는 현재의 fillStyle을 사용하여 채워집니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.fillText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

+ +

strokeText 예제

+ +

텍스트는 현재의 strokeStyle을 이용하여 채워집니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  ctx.font = '48px serif';
+  ctx.strokeText('Hello world', 10, 50);
+}
+ + + +

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

+ +

텍스트 스타일 적용하기

+ +

 위의 예제에서 우리는 이미 텍스트를 기본 사이즈를 키우기 위하여 font 프로퍼티를 사용하였습니다. 그리고 캔버스에 표시되는 텍스트를 조정할 수 있는 속성이 더 있습니다. 

+ +
+
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
+
텍스트를 그릴 때 사용되는 현재 텍스트 스타일. 이 문자열은 CSS {{cssxref("font")}} 프로퍼티와 동일한구문을 사용합니다. 기본값으로 sans-serif의 10px가 설정되어 있습니다.
+
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
+
텍스트 정렬 설정. 사용가능한 값: start, end, left, right, center. 기본 값은 start 입니다.
+
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
+
베이스라인 정렬 설정. 사용가능한 값: top, hanging, middle, alphabetic, ideographic, bottom. 기본 값은 alphabetic 입니다
+
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
+
글자 방향. 사용가능한 값: ltr, rtl, inherit. 기본 값은 inherit 입니다.
+
+ +

만약 CSS를 다뤄보신적이 있다면 이러한 프로퍼티들은 익숙하실겁니다.

+ +

다음에 나오는  WHATWG 예제 다이어그램은 textBaseline를 이용하여 다양한 베이스라인 설정을 보여줍니다.The top of the em square is +roughly at the top of the glyphs in a font, the hanging baseline is +where some glyphs like आ are anchored, the middle is half-way +between the top of the em square and the bottom of the em square, +the alphabetic baseline is where characters like Á, ÿ, +f, and Ω are anchored, the ideographic baseline is +where glyphs like 私 and 達 are anchored, and the bottom +of the em square is roughly at the bottom of the glyphs in a +font. The top and bottom of the bounding box can be far from these +baselines, due to glyphs extending far outside the em square.

+ +

textBaseline 예제

+ +

아래의 코드를 수정하여 캔버스에서 어떻게 바뀌는지 실시간으로 확인해 보세요.

+ +
ctx.font = '48px serif';
+ctx.textBaseline = 'hanging';
+ctx.strokeText('Hello world', 0, 100);
+
+ + + +

{{ EmbedLiveSample('Playable_code', 700, 360) }}

+ +

어드밴스드 텍스트 측정

+ +

만약 텍스트에대해 조금 더 디테일한 것들을 얻고 싶다면 다음의 메소드를 이용해보세요.

+ +
+
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
+
현재 스타일로 특정 텍스트가 그려질 때의 폭, 픽셀 등을 포함하는 {{domxref("TextMetrics")}} 객체 리턴. 
+
+ +

다음의 코드는 어떻게 텍스트를 측정하는 지, 그리고 폭을 구하는 예제입니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var text = ctx.measureText('foo'); // TextMetrics object
+  text.width; // 16;
+}
+
+ +

Gecko 사용시 주의점

+ +

Gecko(Firefox, Firefox OS외 Mozilla 기반의 에플리케이션 렌더링 엔진)에서는 캔버스에 텍스트를 그리기 위한 몇몇의 prefixed APIs가 구현되어 있습니다. 그리고 지금은 사용되지 않아 제거되었거나 작동을 보장하지 않는 것들도 있습니다. 

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/finale/index.html b/files/ko/web/api/canvas_api/tutorial/finale/index.html new file mode 100644 index 0000000000..1241680c5c --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/finale/index.html @@ -0,0 +1,51 @@ +--- +title: Finale +slug: Web/HTML/Canvas/Tutorial/Finale +tags: + - 그래픽 + - 캔버스 + - 튜토리얼 +translation_of: Web/API/Canvas_API/Tutorial/Finale +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
+ +
+

축하합니다 Canvas 튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.

+
+ +

더 많은 예시와 튜토리얼

+ +

이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.

+ +
+
Codepen.io
+
프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.
+
HTML5 Canvas Tutorials
+
대부분 canvas API의 예시
+
Game development
+
게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.
+
+ +

기타 웹API

+ +

이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.

+ +
+
WebGL
+
3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.
+
SVG
+
확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.
+
Web Audio
+
Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.
+
+ +

문의사항

+ +
+
Stack Overflow
+
"canvas"가 태그된 문의사항.
+
Comments about this tutorial – the MDN documentation community
+
이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html new file mode 100644 index 0000000000..e720af3159 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html @@ -0,0 +1,97 @@ +--- +title: 히트(Hit) 영역과 접근성 +slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility +translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility +--- +
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
+ +
{{HTMLElement("canvas")}} 엘리먼트는 비트맵이며 그려진 객체에 대한 정보는 제공하지 않습니다. 캔버스 컨텐츠는 시멘틱 HTML과 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성을 위한 웹 사이트 또는 앱에서는 캔버스를 사용하지 않는 것이 좋습니다. 본 가이드라인은 접근성이 향상된 캔버스를 만드는데 도움이 될 것입니다.
+ +

대체 컨텐츠

+ +

<canvas> ... </ canvas> 태그 안의 내용은 캔버스 렌더링을 지원하지 않는 브라우저의 대체 컨텐츠로 사용할 수 있습니다. 또한 하위 DOM을 읽고 해석 할 수있는 보조 기술 사용자 (스크린 리더와 같은)에게도 매우 유용합니다. html5accessibility.com의 좋은 예가 이를 수행 할 수있는 방법을 보여줍니다.

+ +
<canvas>
+  <h2>Shapes</h2>
+  <p>A rectangle with a black border.
+   In the background is a pink circle.
+   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
+   Partially overlaying the circle is a green
+   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
+   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
+   both of which are semi-opaque, so the full circle can be seen underneath.</p>
+</canvas>
+ +

Steve Faulkner의 NVDA가 이 예제를 어떻게 읽는지를 보여주는 동영상을 참고하시기 바랍니다.

+ +

ARIA 규칙

+ +

ARIA(Accessible Rich Internet Application)는 장애인이 사용자가 웹 콘텐츠 및 웹 응용 프로그램을보다 쉽게 사용할 수 있도록하는 방법을 정의합니다. ARIA 속성을 사용하여 캔버스 엘리먼트의 동작 및 용도를 설명 할 수 있습니다. 자세한 내용은 ARIA 및 ARIA 기술을 참조하십시오.

+ +
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
+
+ +

히트(Hit) 영역

+ +

마우스 좌표가 캔버스의 특정 영역 내에 있는지 여부는 문제를 해결하는 데 공통적입니다. 히트 영역 API를 사용하면 캔버스 영역을 정의 할 수 있으며 캔버스에 대화형 컨텐츠를 접근성 도구에 표시 할 수 있습니다. 히트 영역 API는 여러분이 히트 감지를 쉽게 할 수 있도록 하며 DOM 엘리먼트에 이벤트를 전달할 수 있도록 합니다. API에는 다음 세 가지 메소드가 있습니다 (현재 웹 브라우저에서는 아직 실험 중이며 브라우저 호환성 테이블을 확인하십시오).

+ +
+
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
+
히트 영역을 캔버스에 추가합니다.
+
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
+
캔버스에서 해당 id를 가진 히트 영역을 제거합니다.
+
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
+
캔버스에서 모든 히트 영역을 제거합니다.
+
+ +

경로에 히트 영역을 추가하고 {{domxref("MouseEvent.region")}} 속성을 확인하여 마우스가 영역을 히트하는지 테스트 할 수 있습니다.

+ +
<canvas id="canvas"></canvas>
+<script>
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.beginPath();
+ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
+ctx.fill();
+ctx.addHitRegion({id: 'circle'});
+
+canvas.addEventListener('mousemove', function(event) {
+  if (event.region) {
+    alert('hit region: ' + event.region);
+  }
+});
+</script>
+ +

addHitRegion() 메소드는 control 옵션을 이용하여 이벤트를 엘리먼트(즉, 캔버스의 자식으로)로 전달합니다.

+ +
ctx.addHitRegion({control: element});
+ +

예를 들어 {{HTMLElement("input")}} 엘리먼트로 전달하는 데 유용 할 수 있습니다. codepen 데모를 참조하십시오.

+ +

포커스 링(Focus rings)

+ +

키보드로 작업 할 때 포커스 링은 페이지 탐색에 도움이되는 편리한 표시기입니다. 캔버스 드로잉에 포커스 링을 그리려면 drawFocusIfNeeded 속성을 사용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
+
지정된 엘리먼트에 포커스가있는 경우,이 메소드는 현재 경로 주위에 포커스 링을 그립니다.
+
+ +

또한 scrollPathIntoView() 메서드를 사용하여 포커스가있는 경우 엘리먼트를 화면에 표시 할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
+
현재 경로 또는 지정된 경로를 뷰로 스크롤합니다.
+
+ +

See also

+ + + +
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/ko/web/api/canvas_api/tutorial/index.html b/files/ko/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..03077163aa --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,62 @@ +--- +title: 캔버스 튜토리얼 +slug: Web/HTML/Canvas/Tutorial +tags: + - Canvas + - Graphic + - Guide + - HTML + - HTML5 + - Intermediate + - Web +translation_of: Web/API/Canvas_API/Tutorial +--- +
{{CanvasSidebar}}
+ +
+ +
+

<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 <canvas>를 사용하여 만들 수 있는 것들의 일부입니다.

+
+ +

이 튜토리얼은 <canvas> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.

+ +

<canvas>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.

+ +

시작하기 전 알아두어야 할 것

+ +

<canvas> 요소를 사용하는 것이 어려운 일은 아니지만, HTML과 자바스크립트에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <canvas> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML height와 width 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.

+ +

튜토리얼 내용

+ + + +

같이 보기

+ + + + + +
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html new file mode 100644 index 0000000000..460b5e893f --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/optimizing_canvas/index.html @@ -0,0 +1,110 @@ +--- +title: 캔버스 최적화 +slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas +translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
+ +
+

{{HTMLElement("canvas")}} 엘리먼트는 웹에서 2D 그래픽을 렌더링하는 데 가장 널리 사용되는 도구 중 하나입니다. 그러나 웹 사이트와 앱이 Canvas API를 최대한으로 밀면 성능이 저하되기 시작합니다. 그러나 웹 사이트 및 앱이 Canvas API를 한계치까지 사용하면 성능이 저하되기 시작합니다. 이 글에서는 그래픽이 잘 동작하도록 보장하기 위해 캔버스 엘리먼트의 사용을 최적화하기위한 제안 사항을 제공합니다.

+
+ +

성능 팁

+ +

다음은 캔버스 성능을 개선하기 위한 팁 모음입니다.

+ +

캔버스에 표시되지 않는 비슷한 원시 혹은 반복 객체를 미리 그려라

+ +

만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.

+ +
myCanvas.offscreenCanvas = document.createElement('canvas');
+myCanvas.offscreenCanvas.width = myCanvas.width;
+myCanvas.offscreenCanvas.height = myCanvas.height;
+
+myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
+ +

부동 소수점 좌표를 피하고 대신 정수를 사용하라.

+ +

정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.

+ +
ctx.drawImage(myImage, 0.3, 0.5);
+
+ +

이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.

+ +

drawImage에서 이미지 크기를 조정하지 마라.

+ +

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.

+ +

복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.

+ +

어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 <canvas> 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.

+ +

예를 들어 상단에 UI, 중간에 게임 플레이 액션, 하단에 정적 배경이있는 게임이 있다고 가정 해 보겠습니다. 이 경우 게임을 세 개의 <canvas> 레이어로 나눌 수 있습니다. UI는 사용자 입력시에만 변경되며 게임 플레이 레이어는 모든 새 프레임마다 변경되며 배경은 일반적으로 변경되지 않습니다.

+ +
<div id="stage">
+  <canvas id="ui-layer" width="480" height="320"></canvas>
+  <canvas id="game-layer" width="480" height="320"></canvas>
+  <canvas id="background-layer" width="480" height="320"></canvas>
+</div>
+
+<style>
+  #stage {
+    width: 480px;
+    height: 320px;
+    position: relative;
+    border: 2px solid black;
+  }
+
+  canvas { position: absolute; }
+  #ui-layer { z-index: 3; }
+  #game-layer { z-index: 2; }
+  #background-layer { z-index: 1; }
+</style>
+
+ +

큰 배경 이미지는 일반 CSS를 사용하라.

+ +

정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.

+ +

CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.

+ +

CSS 변환(transform)은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.

+ +
var scaleX = window.innerWidth / canvas.width;
+var scaleY = window.innerHeight / canvas.height;
+
+var scaleToFit = Math.min(scaleX, scaleY);
+var scaleToCover = Math.max(scaleX, scaleY);
+
+stage.style.transformOrigin = '0 0'; //scale from top left
+stage.style.transform = 'scale(' + scaleToFit + ')';
+
+ +

투명도를 사용하지 마라.

+ +

응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 HTMLCanvasElement.getContext()를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.

+ +
var ctx = canvas.getContext('2d', { alpha: false });
+ +

추가 팁들

+ +
    +
  • 배치 캔버스를 함께 호출합니다. 예를 들어 여러 개의 개별 선 대신 다각형 선을 그립니다.
    • +
  • 불필요한 캔버스 상태 변경을 피하십시오.
    • +
  • 화면의 차이만 렌더링하고 완전히 새로운 상태로 렌더링하지 마십시오.
    • +
  • 가능하면 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} 속성을 사용하지 마십시오.
    • +
  • 가능하면 텍스트 렌더링을 피하십시오.
    • +
  • 캔버스를 지우는 여러 가지 방법을 시도해보십시오 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 캔버스 크기 조정).
    • +
  • 애니메이션에서는 {{domxref("window.setInterval()")}} 대신 {{domxref("window.requestAnimationFrame()")}}을 사용하십시오.
    • +
  • 무거운 물리 연산 라이브러리를 주의하십시오.
    • +
+ +

See also

+ + + +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/transformations/index.html b/files/ko/web/api/canvas_api/tutorial/transformations/index.html new file mode 100644 index 0000000000..b93747b581 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/transformations/index.html @@ -0,0 +1,286 @@ +--- +title: 변형 (transformations) +slug: Web/HTML/Canvas/Tutorial/변형 +tags: + - CSS + - HTML + - 이동 + - 축소 + - 캔버스 + - 크기변형 + - 트랜스폼 + - 확대 +translation_of: Web/API/Canvas_API/Tutorial/Transformations +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
+ +
이 튜토리얼에 앞서 canvas 그리드와 좌표 공간에 대해 알아 보았습니다. 지금까지는 기본적인 그리드를 사용해 요구에 맞추어 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다.
+ +

상태(state)의 저장과 복원

+ +

변형(transformation) 메소드을 살펴보기 전에 두 가지 다른 메소드를 보도록 하지요. 일단 여러분이 더 복잡한 그림(drawings)을 그리기 시작하면 반드시 있어야 하는 메소드들입니다.

+ +
+
{{domxref("CanvasRenderingContext2D.save", "save()")}}
+
canvas의 모든 상태를 저장합니다.
+
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
+
가장 최근에 저장된 canvas 상태를 복원합니다.
+
+ +

Canvas 상태는 스택(stack)에 쌓입니다. save() 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시됩니다. drawing 상태는 다음과 같이 이루어집니다.

+ +
    +
  • 이전부터 적용된 변형(가령,  translate과 rotate와 scale 같은 – 아래의 내용을 보세요).
    • +
  • 다음 속성(attributes)의 현재 값:
    + {{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")}}.
    • +
  • 현재의 clipping path, 이것은 다음 섹션에서 다루겠습니다.
    • +
+ +

여러분은 원하는 만큼 save() 메소드를 많이 호출할 수 있습니다. restore() 메소드를 호출할 때마다 마지막으로 저장된 상태가 스택에서 튀어나와 저장된 설정들을 모두 복원시킵니다.

+ +

save와 restore canvas 상태(state) 예제

+ +

사각형 세트를 연이어 그려서 drawing 상태를 가진 스택이 어떻게 기능하는지를 이 예제에서 설명하고자 합니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillRect(0, 0, 150, 150);   // 기본 설정으로 사각형을 그리기
+  ctx.save();                  // 기본 상태를 저장하기
+
+  ctx.fillStyle = '#09F';      // 설정 변경하기
+  ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기
+
+  ctx.save();                  // 현재 상태 저장하기
+  ctx.fillStyle = '#FFF';      // 설정 변경하기
+  ctx.globalAlpha = 0.5;
+  ctx.fillRect(30, 30, 90, 90);   // 새로운 설정으로 사각형 그리기
+
+  ctx.restore();               // 이전 상태 복원하기
+  ctx.fillRect(45, 45, 60, 60);   // 복원된 설정으로 사각형 그리기
+
+  ctx.restore();               // 초기 상태를 복원하기
+  ctx.fillRect(60, 60, 30, 30);   // 복원된 설정으로 사각형 그리기
+}
+ + + +

첫 단계로 기본 설정으로 커다란 사각형을 그립니다. 그다음에는 이 상태를 저장하고 fill color를 바꿉니다. 그런 후에 두 번째이자 크기가 더 작은 파란 사각형을 그리고 그 상태를 저장합니다. 다시 한번 일부 drawing 설정을 바꾸고 세 번째 반투명한 흰 사각형을 그립니다. 

+ +

여기까지는 이전 섹션에서 했던 작업과 매우 유사합니다. 하지만 일단 첫 번째 restore() 문을 호출하면 스택에서 맨 위의 drawing 상태가 지워지고 설정이 복원됩니다. 만일 save()로 저장하지 않았다면, 이전 상태로 되돌리기 위해 fill color와 투명도를 일일이 바꿔주어야 했을 것입니다. 두 속성이라서 간단했을 테지만 그보다 더 많았으면 코드가 급속히 길어졌겠지요. 

+ +

두 번째 restore()문이 호출될 때, 초기 상태( 처음으로 save를 호출하기 전에 설정한 상태)가 복원되고 마지막 사각형은 한번 더 검게 그려집니다.

+ +

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

+ +

이동(translating)

+ +

우리가 살펴볼 첫 번째 변형 메소드는 translate()입니다.  이 메소드는 그리드에서 canvas를 원점에서 다른 점으로 옮기는 데 사용됩니다. 

+ +
+
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
+
그리드에서 canvas와 그 원점을 이동합니다. x는 이동시킬 수평 거리를 가리키고, y는 그리드에서 수직으로 얼마나 멀리 떨어지는지를 표시합니다. 
+
+ +

변형하기 전에 canvas 상태를 저장하는 것이 좋습니다. 대다수의 경우, 원래 상태로 되돌리려고 역이동(reverse translation)을 시키는 것보다 restore 메소드를 호출하는 것이 더욱 간편합니다. 게다가 루프(loop) 안에서 이동하는 거라면 canvas 상태를 저장하고 복원하지 마세요. canvas 모서리 밖에서 그려지는 바람에 drawing의 일부를 잃어버리게 될지 모릅니다. 

+ +

translate 예제

+ +

이 예제에서 canvas 원점의 이동에 관한 좋은 점을 일부 보여드리겠습니다. translate() 메소드를 쓰지 않으면 모든 사각형은 같은 위치 (0, 0)에 그려집니다. 또한, translate() 메소드는 사각형을 fillRect() function에서 좌표를 일일이 적으며 바꾸지 않아도 어디에나 위치할 수 있게 해줍니다. 이렇게 하면 이해하고 사용하기가 좀 더 쉽습니다. 

+ +

 draw() function에서 두 개의 루프(loops)를 이용해 fillRect() function을 아홉 번 호출합니다. 루프마다 canvas가 이동하고 사각형이 그려지며, canvas는 원래 상태로 되돌아 갑니다. fillRect()로의 호출이 translate()에 의지해 drawing 위치를 바꾸는데 어떻게 매번 같은 좌표를 사용하는지 눈여겨 보세요.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  for (var i = 0; i < 3; i++) {
+    for (var j = 0; j < 3; j++) {
+      ctx.save();
+      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
+      ctx.translate(10 + j * 50, 10 + i * 50);
+      ctx.fillRect(0, 0, 25, 25);
+      ctx.restore();
+    }
+  }
+}
+
+ + + +

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

+ +

회전(rotating)

+ +

두 번째 변형 메소드는 rotate()입니다. canvas를 현재의 원점 둘레로 회전하는 데 사용합니다.

+ +
+
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
+
canvas를 현재 원점을 기준으로 라디안의 angle 숫자만큼 시계방향으로 회전시킵니다.
+
+ +

회전의 중심점은 언제나 canvas 원점입니다. 중심점을 바꾸려면 translate() 메소드를 써서 canvas를 이동해야 합니다.

+ +

rotate 예제

+ +

이 예제는 사각형을 canvas 원점에서 먼저 회전하고 그다음에 translate()의 도움을 받아 사각형 자체의 중심에서 회전하는 데 rotate()를 사용합니다.

+ +
+

주의: 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다.   변환하려면 radians = (Math.PI/180)*degrees.를 사용합니다.

+
+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 좌측 사각형, canvas 원점에서 회전하기
+  ctx.save();
+  // 파란 사각형
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.rotate((Math.PI / 180) * 25);
+  // 회색 사각형
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(30, 30, 100, 100);
+  ctx.restore();
+
+  // 우측 사각형, 사각형 중심에서 회전하기
+  // 파란 사각형 그리기
+  ctx.fillStyle = '#0095DD';
+  ctx.fillRect(150, 30, 100, 100);
+
+  ctx.translate(200, 80); // 사각형 중심으로 이동하기
+                          // x = x + 0.5 * width
+                          // y = y + 0.5 * height
+  ctx.rotate((Math.PI / 180) * 25); // 회전
+  ctx.translate(-200, -80); // 예전 위치로 이동하기
+
+  // 회색 사각형 그리기
+  ctx.fillStyle = '#4D4E53';
+  ctx.fillRect(150, 30, 100, 100);
+}
+
+ +

사각형 자체의 중심 둘레로 회전하려면 사각형의 중심으로 canvas를 옮기세요. 그런 후에 canvas를 회전하고, 그 canvas를 0, 0로 되돌려 이동합니다. 그다음에 사각형을 그리세요.

+ + + +

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

+ +

확대·축소(scaling)

+ +

다음 변형 메소드는 확대·축소(scaling)입니다. canvas 그리드에서 단위(units)를 키우거나 줄이는 데 사용합니다. 이는 벡터 모양과 비트맵(bitmaps) 요소를 축소하거나 확대해서 그리는 데 사용될 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
+
canvas 단위를 수평으로 x만큼, 수직으로 y만큼 크기를 확대·축소합니다. 둘의 매개 변수는 실수입니다. 1.0보다 작은 값이면 단위의 크기를 축소하고, 1.0보다 큰 값이면 단위의 크기를 확대합니다. 값이 1.0이면 단위의 크기는 그대로입니다.
+
+ +

음수를 이용해서 축을 대칭 시킬 수 있습니다(가령 translate(0,canvas.height); scale(1,-1);로 쓰는 것처럼 말이죠. 좌측 하단 모서리에 있는 원점을 이용한, 잘 알려진 카르테시안 좌표계(Cartesian coordinate)인 것이지요.

+ +

기본적으로 canvas에서 하나의 단위는 정확히 1픽셀입니다. 예를 들어 0.5라는 확대·축소 비율을 적용한다면, 결과로 나오는 단위는 0.5 픽셀이 될 것이고, 고로 모양도 절반 크기로 그려질 것입니다. 이런 방식으로 크기 비율을 2.0으로 잡으면 단위 크기가 확대되어 하나의 단위는 이제 2픽셀이 되겠지요. 이 결과로 모양은 그만큼 2배로 커집니다.

+ +

scale 예제

+ +

마지막 예제로 다양한 확대·축소 비율을 이용해 모양을 그려보겠습니다.

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // 간단하지만 확대·축소 비율을 적용한 사각형 그리기
+  ctx.save();
+  ctx.scale(10, 3);
+  ctx.fillRect(1, 10, 10, 10);
+  ctx.restore();
+
+  // 수평으로 대칭하기
+  ctx.scale(-1, 1);
+  ctx.font = '48px serif';
+  ctx.fillText('MDN', -135, 120);
+}
+
+
+ + + +

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

+ +

변형(transforms)

+ +

마지막으로, 다음의 변형(transform) 메소드들은 변환 행렬(transformation matrix)로 변경할 사항을 즉시 적용할 수 있습니다.

+ +
+
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
+
인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. 
+ [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
+
+ +
+
만일 인수 중에 Infinity가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.
+
+ +

이 function의 매개 변수들은 다음과 같습니다.

+ +
+
a (m11)
+
수평으로 확대·축소하기
+
b (m12)
+
수평으로 비스듬히 기울이기
+
c (m21)
+
수직으로 비스듬히 기울이기
+
d (m22)
+
수직으로 확대·축소하기
+
e (dx)
+
수평으로 이동하기
+
f (dy)
+
수직으로 이동하기
+
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
+
현재 변형 상태를 단위 행렬로 재설정하고 나서 동일한 인수로 transform() 메소드를 적용합니다. 이는 기본적으로 현재의 변형을 무효로 한 후에 명시된 변형으로 바뀌는데, 한번에 모든 게 진행됩니다.
+
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
+
현재 변형 상태를 단위 행렬로 재설정합니다. 이는 ctx.setTransform(1, 0, 0, 1, 0, 0); 호출과 같습니다.
+
+ +

transform과 setTransform 예제

+ +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  var sin = Math.sin(Math.PI / 6);
+  var cos = Math.cos(Math.PI / 6);
+  ctx.translate(100, 100);
+  var c = 0;
+  for (var i = 0; i <= 12; i++) {
+    c = Math.floor(255 / 12 * i);
+    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
+    ctx.fillRect(0, 0, 100, 10);
+    ctx.transform(cos, sin, -sin, cos, 0, 0);
+  }
+
+  ctx.setTransform(-1, 0, 0, 1, 100, 100);
+  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
+  ctx.fillRect(0, 50, 100, 100);
+}
+
+ + + +

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

diff --git a/files/ko/web/api/canvas_api/tutorial/using_images/index.html b/files/ko/web/api/canvas_api/tutorial/using_images/index.html new file mode 100644 index 0000000000..d9aae1c993 --- /dev/null +++ b/files/ko/web/api/canvas_api/tutorial/using_images/index.html @@ -0,0 +1,347 @@ +--- +title: Using images +slug: Web/HTML/Canvas/Tutorial/Using_images +tags: + - Advanced + - Canvas + - Graphics + - HTML + - Tutorial +translation_of: Web/API/Canvas_API/Tutorial/Using_images +--- +
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
+ +
+

지금까지 우리는 Canvas를 가지고 스스로 도형을 만들고 그 도형에 스타일 적용 해 보았습니다. 이미지를 사용 하는 기능은 {{HTMLElement("canvas")}}의 가장 흥미로운 기능중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 다이나믹한 사진 도음들을 위해 사용 될 수 있습니다. PNG,GIF, JPEG등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용 될 수 있습니다. 같은 페이지 소스에서 다른 Canvas요소로 만들어진 이미지 또한 사용할수 있습니다!

+
+ +

이미지를 캔버스로 불러오는것은 기본적으로 두 단계를 필요로 합니다:

+ +
    +
  1. {{domxref("HTMLImageElement")}} object를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. 이는 URL을 가지고 이미지를 사용 할 수 있습니다.
    2. +
  2. drawImage() function을 사용하여 캔버스에 나타난 이미지 위에 그림을 그립니다.
    3. +
+ +

이 과정이 어떻게 되는지 봅시다.

+ +

이미지 불러오기

+ +

canvas API는 아래의 데이터 타입을 이미지 소스로 사용 할 수 있습니다:

+ +
+
{{domxref("HTMLImageElement")}}
+
{{HTMLElement("img")}} element와 마찬가지로, Image() constructor를 통해 만들어진 이미지입니다.
+
+ +
+
{{domxref("SVGImageElement")}}
+
{{SVGElement("image")}} element 를 사용해 불러온 이미지입니다.
+
+ + + +
+
{{domxref("HTMLVideoElement")}}
+
HTML {{HTMLElement("video")}} 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러옵니다.
+
{{domxref("HTMLCanvasElement")}}
+
다른 {{HTMLElement("canvas")}} 요소를 이미지 소스로 사용합니다.
+
+ +

이렇게 얻은 소스들은 {{domxref("CanvasImageSource")}}.를 사용하여 불러 올 수 있습니다.

+ +

다음은 캔버스에 놓인 이미지를 사용하는 여러가지 방법입니다.

+ +

같은 페이지의 이미지 사용하기

+ +

우리는 다음을 사용하여 같은 페이지에 있는 캔버스나 이미지를 참고 할 수 있습니다.

+ +
    +
  • {{domxref("document.images")}} 모음
    • +
  • {{domxref("document.getElementsByTagName()")}} 메소드
    • +
  • 사용 하고자 하는 특정한 이미지의 ID를 알고 있다면, {{domxref("document.getElementById()")}} 를 사용하여 특정한 이미지를 참고할 수 있습니다.
    • +
+ +

다른 도메인의 이미지 사용하기

+ +

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

+ +

다른 캔버스 요소 (canvas elements) 사용하기

+ +

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

+ +

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

+ +

처음부터 이미지 만들기

+ +

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

+ +
var img = new Image();   // Create new img element
+img.src = 'myImage.png'; // Set source path
+
+ +

When this script gets executed, the image starts loading.

+ +

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

+ +
var img = new Image();   // Create new img element
+img.addEventListener('load', function() {
+  // execute drawImage statements here
+}, false);
+img.src = 'myImage.png'; // Set source path
+
+ +

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

+ +

데이터를 사용하여 이미지 불러오기Embedding an image via data: URL

+ +

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

+ +
var img = new Image();   // Create new img element
+img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
+
+ +

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

+ +

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

+ +

비디오 프레임 사용하기Using frames from a video

+ +

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

+ +
function getMyVideo() {
+  var canvas = document.getElementById('canvas');
+  if (canvas.getContext) {
+    var ctx = canvas.getContext('2d');
+
+    return document.getElementById('myvideo');
+  }
+}
+
+ +

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

+ +

이미지 그리기

+ +

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
+
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
+
+ +
+

SVG images must specify a width and height in the root <svg> element.

+
+ +

예제: 기본 선 그래프

+ +

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    ctx.drawImage(img, 0, 0);
+    ctx.beginPath();
+    ctx.moveTo(30, 96);
+    ctx.lineTo(70, 66);
+    ctx.lineTo(103, 76);
+    ctx.lineTo(170, 15);
+    ctx.stroke();
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
+}
+ +

The resulting graph looks like this:

+ +

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

+ +

비례 크기 조정

+ +

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
+
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
+
+ +

예제: 이미지를 타일처럼 배치

+ +

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

+ +
+

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

+
+ + + +
function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+  var img = new Image();
+  img.onload = function() {
+    for (var i = 0; i < 4; i++) {
+      for (var j = 0; j < 3; j++) {
+        ctx.drawImage(img, j * 50, i * 38, 50, 38);
+      }
+    }
+  };
+  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
+}
+ +

The resulting canvas looks like this:

+ +

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

+ +

이미지 자르기

+ +

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

+ +
+
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
+
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
+
+ +

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

+ +

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

+ +

예제: 이미지 프레임 넣기

+ +

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

+ +
<html>
+ <body onload="draw();">
+   <canvas id="canvas" width="150" height="150"></canvas>
+   <div style="display:none;">
+     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+   </div>
+ </body>
+</html>
+
+ +
function draw() {
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+
+  // Draw slice
+  ctx.drawImage(document.getElementById('source'),
+                33, 71, 104, 124, 21, 20, 87, 104);
+
+  // Draw frame
+  ctx.drawImage(document.getElementById('frame'), 0, 0);
+}
+ +

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

+ +

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

+ +

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

+ +

아트 갤러리 예제

+ +

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

+ +

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

+ +

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

+ +
<html>
+ <body onload="draw();">
+     <table>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
+      </tr>
+      <tr>
+        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
+        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
+      </tr>
+     </table>
+     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
+ </body>
+</html>
+
+ +

And here's some CSS to make things look nice:

+ +
body {
+  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
+  margin: 10px;
+}
+
+img {
+  display: none;
+}
+
+table {
+  margin: 0 auto;
+}
+
+td {
+  padding: 15px;
+}
+
+ +

Tying it all together is the JavaScript to draw our framed images:

+ +
function draw() {
+
+  // Loop through all images
+  for (var i = 0; i < document.images.length; i++) {
+
+    // Don't add a canvas for the frame image
+    if (document.images[i].getAttribute('id') != 'frame') {
+
+      // Create canvas element
+      canvas = document.createElement('canvas');
+      canvas.setAttribute('width', 132);
+      canvas.setAttribute('height', 150);
+
+      // Insert before the image
+      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
+
+      ctx = canvas.getContext('2d');
+
+      // Draw image to canvas
+      ctx.drawImage(document.images[i], 15, 20);
+
+      // Add frame
+      ctx.drawImage(document.getElementById('frame'), 0, 0);
+    }
+  }
+}
+ +

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

+ +

이미지 비율 습성(scaling behavior) 제어하기

+ +

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

+ +
ctx.mozImageSmoothingEnabled = false;
+ctx.webkitImageSmoothingEnabled = false;
+ctx.msImageSmoothingEnabled = false;
+ctx.imageSmoothingEnabled = false;
+
+ +

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git a/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html new file mode 100644 index 0000000000..c9bb8b32ba --- /dev/null +++ b/files/ko/web/api/css_object_model/determining_the_dimensions_of_elements/index.html @@ -0,0 +1,28 @@ +--- +title: Determining the dimensions of elements +slug: Determining_the_dimensions_of_elements +translation_of: Web/API/CSS_Object_Model/Determining_the_dimensions_of_elements +--- +

엘리먼트의 너비와 높이를 알기 위해 살펴볼 수 있는 여러 속성이 있습니다. 또한, 요구하는 사항에 딱 맞는 것을 고르기 다소 까다로울 수도 있습니다. 이 글은 여러분이 필요에 맞는 속성을 고르는데 도움을 주기 위해 작성했습니다.

+ +

공간을 얼마나 차지하나요?

+ +

표시된 컨텐트의 너비, 스크롤바, 패딩까지 포함해서 엘리먼트가 차지하는 전체 공간을 알고 싶다면, offsetWidth와 offsetHeight 속성을 사용하세요:

+ +

Image:Dimensions-offset.png

+ +

보이는 컨텐트의 크기는요?

+ +

패딩은 포함하되 경계선, 여백, 스크롤바는 포함시키지 않고 보이는 컨텐트가 실제로 차지하는 공간이 알고 싶다면, clientWidth와 clientHeight 속성을 사용하세요:

+ +

Image:Dimensions-client.png

+ +

컨텐트는 얼마나 크나요?

+ +

컨텐트의 실제 크기를 알고 싶다면(보여지는 부분만이 아닌 전체 컨텐트 크기), scrollWidth와 scrollHeight 속성을 사용하세요. 이 속성들은 엘리먼트 컨텐트의 전체 크기에 해당하는 너비와 높이를 반환합니다. 보여지는 영역이 작아서 스크롤바를 사용하고 있다해도 관계없습니다.

+ +

예를 들어, 600x400 픽셀 크기의 엘리먼트가 300x300 픽셀의 스크롤박스에서 보여진다면 scrollWidth는 600을, scrollHeight는 400을 각각 반환합니다.

+ +

참고자료

+ +

MSDN: Measuring Element Dimension and Location

diff --git a/files/ko/web/api/css_object_model/managing_screen_orientation/index.html b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html new file mode 100644 index 0000000000..934384d0bf --- /dev/null +++ b/files/ko/web/api/css_object_model/managing_screen_orientation/index.html @@ -0,0 +1,136 @@ +--- +title: Managing screen orientation +slug: WebAPI/Managing_screen_orientation +translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation +--- +

{{SeeCompatTable}}

+

Summary

+

Screen orientation 은 device orientation 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.

+

화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 orientation media query 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데,  브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.

+

두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.

+

Adjusting layout based on the orientation

+

방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.

+

다음의 HTML code 예제를 보자

+
<ul id="toolbar">
+  <li>A</li>
+  <li>B</li>
+  <li>C</li>
+</ul>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
+
+

CSS 는 화면 방향에 따라 특정 스타일을 을 다루기 위해 orientation media query 에 의존한다

+
/* First let's define some common styles */
+
+html, body {
+  width : 100%;
+  height: 100%;
+}
+
+body {
+  border: 1px solid black;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+p {
+  font   : 1em sans-serif;
+  margin : 0;
+  padding: .5em;
+}
+
+ul {
+  list-style: none;
+
+  font   : 1em monospace;
+  margin : 0;
+  padding: .5em;
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  background: black;
+}
+
+li {
+  display: inline-block;
+  margin : 0;
+  padding: 0.5em;
+  background: white;
+}
+
+

Once we have some common styles we can start defining a special case for the orientation

+
/* For portrait, we want the tool bar on top */
+
+@media screen and (orientation: portrait) {
+  #toolbar {
+    width: 100%;
+  }
+}
+
+/* For landscape, we want the tool bar stick on the left */
+
+@media screen and (orientation: landscape) {
+  #toolbar {
+    position: fixed;
+    width: 2.65em;
+    height: 100%;
+  }
+
+  p {
+    margin-left: 2em;
+  }
+
+  li + li {
+    margin-top: .5em;
+  }
+}
+
+

실행 결과를 보자

+ + + + + + + + + + + + + +
PortraitLandscape
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}
+
+

Note: orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.

+
+

Locking the screen orientation

+
+

Warning: 이 API 는 실험적이며 현재 Firefox OS 와 Firefox for Android 에서 moz 접두사를 이용하여 사용할 수 있다.

+
+

몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.

+

Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.

+

Listening orientation change

+

{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 방향이  {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 마다 불려 진다.  

+
screen.addEventListener("orientationchange", function () {
+  console.log("The orientation of the screen is: " + screen.orientation);
+});
+
+

Preventing orientation change

+

모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.

+

{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열  (또는 일련의 문자열) 을 수용한다. 수용하는 값들: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (각각의 값들에 대해 좀 더 알려면  {{domxref("window.screen.lockOrientation","lockOrientation")}}  를 보라).

+
screen.lockOrientation('landscape');
+
+

Note: 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.

+

그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.

+
+

See also

+ diff --git a/files/ko/web/api/detecting_device_orientation/index.html b/files/ko/web/api/detecting_device_orientation/index.html new file mode 100644 index 0000000000..664842f66d --- /dev/null +++ b/files/ko/web/api/detecting_device_orientation/index.html @@ -0,0 +1,273 @@ +--- +title: 기기 방향 감지하기 +slug: WebAPI/Detecting_device_orientation +translation_of: Web/API/Detecting_device_orientation +--- +
{{SeeCompatTable}}
+ +

요약

+ +

웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.

+ +

방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다.  이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.

+ +

두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.

+ +

방향 이벤트 처리하기

+ +

방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:

+ +
window.addEventListener("deviceorientation", handleOrientation, true);
+
+ +

이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.

+ +

방향 이벤트는 다음 네 개의 값을 가진다:

+ +
    +
  • {{ domxref("DeviceOrientationEvent.absolute") }}
    • +
  • {{ domxref("DeviceOrientationEvent.alpha") }}
    • +
  • {{ domxref("DeviceOrientationEvent.beta") }}
    • +
  • {{ domxref("DeviceOrientationEvent.gamma") }}
    • +
+ +

이벤트 핸들러 함수는 보통 다음과 같다:

+ +
function handleOrientation(event) {
+  var absolute = event.absolute;
+  var alpha    = event.alpha;
+  var beta     = event.beta;
+  var gamma    = event.gamma;
+
+  // Do stuff with the new orientation data
+}
+
+ +

방향 값 설명

+ +

각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 Orientation and motion data explained 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.

+ +
    +
  • {{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.
    • +
  • {{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.
    • +
  • {{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.
    • +
+ +

방향 예제

+ +

이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.

+ +

자 그럼, 정원에 공이 하나 있다고 상상해보자:

+ +
<div class="garden">
+  <div class="ball"></div>
+</div>
+
+<pre class="output"></pre>
+
+ +

이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:

+ +
.garden {
+  position: relative;
+  width : 200px;
+  height: 200px;
+  border: 5px solid #CCC;
+  border-radius: 10px;
+}
+
+.ball {
+  position: absolute;
+  top   : 90px;
+  left  : 90px;
+  width : 20px;
+  height: 20px;
+  background: green;
+  border-radius: 100%;
+}
+
+ +

이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:

+ +
var ball   = document.querySelector('.ball');
+var garden = document.querySelector('.garden');
+var output = document.querySelector('.output');
+
+var maxX = garden.clientWidth  - ball.clientWidth;
+var maxY = garden.clientHeight - ball.clientHeight;
+
+function handleOrientation(event) {
+  var x = event.beta;  // In degree in the range [-180,180]
+  var y = event.gamma; // In degree in the range [-90,90]
+
+  output.innerHTML  = "beta : " + x + "\n";
+  output.innerHTML += "gamma: " + y + "\n";
+
+  // Because we don't want to have the device upside down
+  // We constrain the x value to the range [-90,90]
+  if (x >  90) { x =  90};
+  if (x < -90) { x = -90};
+
+  // To make computation easier we shift the range of
+  // x and y to [0,180]
+  x += 90;
+  y += 90;
+
+  // 10 is half the size of the ball
+  // It center the positionning point to the center of the ball
+  ball.style.top  = (maxX*x/180 - 10) + "px";
+  ball.style.left = (maxY*y/180 - 10) + "px";
+}
+
+window.addEventListener('deviceorientation', handleOrientation);
+
+ +

여기 실제로 실행해 볼 수 있는 예제이다:

+ +
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
+ +
+

경고: Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.

+
+ +

모션 이벤트 처리하기

+ +

모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.

+ +
window.addEventListener("devicemotion", handleMotion, true);
+ +

HandleMotion 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.

+ +

모션 이벤트는 다음 네 가지 속성을 가진다:

+ +
    +
  • {{ domxref("DeviceMotionEvent.acceleration") }}
    • +
  • {{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}
    • +
  • {{ domxref("DeviceMotionEvent.rotationRate") }}
    • +
  • {{ domxref("DeviceMotionEvent.interval") }}
    • +
+ +

모션 값 설명

+ +

{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 Orientation and motion data explained 문서를 참조).

+ +

{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:

+ +
    +
  • x: 서쪽에서 동쪽으로 나타나는 축을 의미한다
    • +
  • y: 남쪽에서 북쪽으로 나타나는 축을 의미한다
    • +
  • z: 땅에서 수직으로 나타나는 축을 의미한다
    • +
+ +

{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:

+ +
    +
  • alpha: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다
    • +
  • beta: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다
    • +
  • gamma: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다
    • +
+ +

마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.

+ +

스펙

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

브라우저 호환성

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
+ 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
+ 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}4.2
+
+ +

Gecko 구현 참고 사항

+ +
    +
  1. Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 mozOrientation 을 지원한다
    2. +
+ +

참고 자료

+ + diff --git a/files/ko/web/api/document/createevent/index.html b/files/ko/web/api/document/createevent/index.html new file mode 100644 index 0000000000..549a51bfdc --- /dev/null +++ b/files/ko/web/api/document/createevent/index.html @@ -0,0 +1,30 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +

{{APIRef("DOM")}}

+ +

새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.

+ +

Syntax

+ +
document.createEvent(type)
+ +
+
type
+
A string indicating the event type to create.
+
+ +

이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.

+ +

Example

+ +
var newEvent = document.createEvent("UIEvents");
+ +

Specification

+ + diff --git a/files/ko/web/api/document/getselection/index.html b/files/ko/web/api/document/getselection/index.html deleted file mode 100644 index c4d219fbde..0000000000 --- a/files/ko/web/api/document/getselection/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Document.getSelection() -slug: Web/API/Document/getSelection -translation_of: Web/API/DocumentOrShadowRoot/getSelection -translation_of_original: Web/API/Document/getSelection ---- -

{{APIRef("DOM")}}

- -

이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.

diff --git a/files/ko/web/api/document_object_model/introduction/index.html b/files/ko/web/api/document_object_model/introduction/index.html new file mode 100644 index 0000000000..b31dbc43d9 --- /dev/null +++ b/files/ko/web/api/document_object_model/introduction/index.html @@ -0,0 +1,239 @@ +--- +title: DOM 소개 +slug: Web/API/Document_Object_Model/소개 +tags: + - DOM + - 가이드 + - 문서 +translation_of: Web/API/Document_Object_Model/Introduction +--- +

이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. 

+ +

DOM 이란?

+ +

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

+ +

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

+ +

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

+ +

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다:

+ +
var paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] is the first <p> element
+// paragraphs[1] is the second <p> element, etc.
+alert(paragraphs[0].nodeName);
+
+ +

웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference 를 제공한다.

+ +

DOM 과 자바스크립트

+ +

이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 {{glossary("JavaScript")}}이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.  

+ +

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만,  나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

+ +

API (web or XML page) = DOM + JS (scripting language)

+ +

DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.  이 문서에서는 자바스크립트를 주로 사용하였지만, DOM 의 구현은 어떠한 언어에서도 가능하다. 아래는 파이썬을 사용한 예제이다:

+ +
# Python DOM example
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # DOM property of document object;
+p_list = doc.getElementsByTagName("para");
+
+ +

웹에서 자바스크립트 사용하기와 관련된 기술에 대한 추가정보는 자바스크립트 기술 개요 문서를 참조하라.

+ +

DOM 에 어떻게 접근할 수 있는가?

+ +

DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. (이 문제는 이 문서에서 피하고 싶어하는 주제이기도 하다.) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 

+ +

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 window elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object 로 부터 alert() 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.

+ +
<body onload="window.alert('welcome to my home page!');">
+
+ +

아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.

+ +
<html>
+  <head>
+    <script>
+       // run this function when the document is loaded
+       window.onload = function() {
+
+         // create a couple of elements in an otherwise empty HTML page
+         var heading = document.createElement("h1");
+         var heading_text = document.createTextNode("Big Head!");
+         heading.appendChild(heading_text);
+         document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

중요한 데이터 타입들

+ +

이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.  이 문서에서는 nodes 는 elements 로, 노드의 arrays 는 nodeLists(또는 elements), attribute 노드들은 attributes 로 표현하였다.

+ +

아래의 표는 이러한 data types 에 대한 간략한 설명이다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
document +

member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM document Reference 챕터를 참조하라.

+
element +

element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.

+
nodeList +

nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:

+ +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ 위의 방식들은 동일한 것이다. item()method는 nodeList object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다.  
attribute +

attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.

+
namedNodeMap +

namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다.

+
+ +

DOM interfaces

+ +

이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element 가 HTMLFormElement interface 로부터 name property 를 얻고, className property 는  HTMLElement interface 로부터 얻는 것에 대해 별로 관심을 보이지 않는 것 같다. 두가지 경우 모두, property 는 form object 안에 있는 것이다. 

+ +

하지만 DOM 안에 구현된 objects 와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제  interfaces 와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하겠다.

+ +

Interfaces 와 Objects

+ +

많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다.  예를 들어, table object 는 createCaption, insertRow method 들이 포함된 {{domxref("HTMLTableElement")}} 을 구현한 것이다. table object 는 HTML element 이기도 하기 때문에, table 은 Element interface(DOM {{domxref("Element")}} Reference 챕터 참조)도 구현한다. 마지막으로, HTML element 는 DOM 이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node 이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model 을 구성한다. 때문에 table element 는 보다 기본적인 Element 에서 파생된 Node interface 를 구현하고 있다.

+ +

아래의 예제처럼, table object 를 참조하게 되면, 기본적으로 이들 3 가지 interfaces 를 사용할 수 있게 된다.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/Element interface
+for (var i = 0; i < tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+
+ +

DOM 의 핵심 Interfaces

+ +

이 섹션은 DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다.  이들 API 는 이 책의 마지막에 소개된 DOM 예제에서도 사용되었다.

+ +

Document 와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다.  간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다. generic Node interface 로부터 상속받은 Element 와 Node, Element interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 table object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.

+ +

아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. 

+ + + +

DOM API 테스팅

+ +

이 문서는 사용자가 웹 개발에 사용할 수 있는 모든 interface 에 대한 예제를 제공한다. 예제는 <script> element 안에서 DOM 에 접근하는 완벽한 HTML 페이지 형태인 것도 있고, form 에서 script 를 실행하기 위해 버튼과 같은 interface 가 필요한 경우도 있으며, DOM 이 목록화되어 수행되는 HTML elements 도 있을 것이다. 사용자들은 이러한 예제를 새로운 HTML 문서에 복사하여 브라우저에서 실행할 수 있다. 

+ +

어떤 예제는 매우 간단할 수도 있다. HTML elements 에 대한 interface의 기본적인 관계만 보여주는 이러한 예제를 실행할 때는, 스크립트에서 쉽게 접근할 수 있는 test page 를 설정할 수도 있다. 아래의 예제는 interface를 테스트 할 수 있는 함수가 위치할 수 있는 header 안에  <script> element 제공한다. 이 함수는 retrieve, set, 조작할 수 있는 attributes 가 포함된 HTML elements 가 사용되었으며, 브라우저에서 이들 함수를 호출하기 위해 웹 UI 를 제공한다.

+ +

사용자는 자신이 관심있어 하는 DOM interfaces 를 테스트 하기 위해, 이 test page 를 사용하거나 이와 비슷한 것을 만들어 브라우저에서 어떻게 동작하는지 확인할 수 있다. 사용자는 test() 함수 내용을 필요에 따라 업데이트할 수 있다. (버튼 추가, elements 추가 등)

+ +
<html>
+  <head>
+    <title>DOM Tests</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr,value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>text</tt>color</b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">black
+          <option value="darkblue">darkblue
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">white
+          <option value="lightgrey">gray
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">blue
+          <option value="green">green
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+
+ +

단일 페이지(예를 들어, 웹 페이지의 색상에 영향을 주는 property 설정하는) 안의 수많은 interfaces 를 테스트하기 위해 설정 버튼, textfield, 또는 다른 HTML elements를 사용하여 유사한 테스트 페이지를 만들 수 있다. 아래의 스크린샷은 테스트를 위해 어떻게 interfaces를 그룹화하는지에 대한 아이디어를 제공하고 있다.  

+ +
+
Figure 0.1 Sample DOM Test Page
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

이 예제에서 드롭다운 메뉴는 웹 페이지에서 DOM 접근가능한 배경색상(bgColor), 하이퍼링크 색상(aLink), 텍스트 색상(text)을 동적으로 업데이트한다. 어떻게 자신의 test pages 를 디자인하더라도, interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
diff --git "a/files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" "b/files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" deleted file mode 100644 index b31dbc43d9..0000000000 --- "a/files/ko/web/api/document_object_model/\354\206\214\352\260\234/index.html" +++ /dev/null @@ -1,239 +0,0 @@ ---- -title: DOM 소개 -slug: Web/API/Document_Object_Model/소개 -tags: - - DOM - - 가이드 - - 문서 -translation_of: Web/API/Document_Object_Model/Introduction ---- -

이 문서는 {{glossary("DOM")}}에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 {{glossary("HTML")}}, {{glossary("XML")}} 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한 참조 정보와 예제들을 제공한다. 

- -

DOM 이란?

- -

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 구조화된 nodes와 property 와 method 를 갖고 있는 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다.

- -

웹 페이지는 일종의 문서(document)다.  이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다. 동일한 문서를 사용하여 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

- -

W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM 을 구현하는 기준이다. 많은 브라우저들이 표준 규약에서 제공하는 기능 외에도 추가적인 기능들을 제공하기 때문에 사용자가 작성한 문서들이 각기 다른 DOM 이 적용된 다양한 브라우저 환경에서 동작할 수 있다는 사실을 항상 인지하고 있어야 한다.

- -

예를 들어, 표준 DOM 에서는 문서 안에서 모든 <P> elements 에 대한 list 를 리턴하는 getElementsByTagName method 를 정의하고 있다:

- -
var paragraphs = document.getElementsByTagName("P");
-// paragraphs[0] is the first <p> element
-// paragraphs[1] is the second <p> element, etc.
-alert(paragraphs[0].nodeName);
-
- -

웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects 로 구성된다. 예를 들어 document object 는 document 자체를 의미하며, table object 는 HTML table 에 접근하기 위한 HTMLTableElement DOM 인터페이스를 구현한 것이다. 이 문서는 Gecko 기반의 브라우저에서 구현된 DOM 에 대한 object-by-object reference 를 제공한다.

- -

DOM 과 자바스크립트

- -

이 문서의 대부분의 예제와 같이, 위에서 사용된 예제는 {{glossary("JavaScript")}}이다. 위의 예제는 자바스크립트로 작성되었지만 문서(document) 와 문서의 요소(element) 에 접근하기 위해 DOM 이 사용되었다. DOM 은 프로그래밍 언어는 아니지만 DOM 이 없다면 자바스크립트 언어는 웹 페이지 또는 XML 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 된다. 문서의 모든 element - 전체 문서, 헤드, 문서 안의 table, table header, table cell 안의 text - 는 문서를 위한 document object model 의 한 부분이다. 때문에, 이러한 요소들을 DOM 과 자바스크립트와 같은 스크립팅 언어를 통해 접근하고 조작할 수 있는 것이다.  

- -

초창기에는 자바스크립트와 DOM 가 밀접하게 연결되어 있었지만,  나중에는 각각 분리되어 발전해왔다. 페이지 콘텐츠(the page content)는 DOM 에 저장되고 자바스크립트를 통해 접근하거나 조작할 수 있다. 이것을 방정식으로 표현하면 아래와 같다:

- -

API (web or XML page) = DOM + JS (scripting language)

- -

DOM 은 프로그래밍 언어와 독립적으로 디자인되었다. 때문에 문서의 구조적인 표현은 단일 API 를 통해 이용가능하다.  이 문서에서는 자바스크립트를 주로 사용하였지만, DOM 의 구현은 어떠한 언어에서도 가능하다. 아래는 파이썬을 사용한 예제이다:

- -
# Python DOM example
-import xml.dom.minidom as m
-doc = m.parse("C:\\Projects\\Py\\chap1.xml");
-doc.nodeName # DOM property of document object;
-p_list = doc.getElementsByTagName("para");
-
- -

웹에서 자바스크립트 사용하기와 관련된 기술에 대한 추가정보는 자바스크립트 기술 개요 문서를 참조하라.

- -

DOM 에 어떻게 접근할 수 있는가?

- -

DOM 을 사용하기 위해 특별히 해야할 일은 없다. 각각의 브라우저는 자신만의 방법으로 DOM 구현하였으며, 이로 인해 실제 DOM 기준을 따르는지 확인해야 하는 번거로움이 발생하였다. (이 문제는 이 문서에서 피하고 싶어하는 주제이기도 하다.) 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 

- -

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), 문서 자체를 조작하거나 문서의 children 을 얻기 위해 {{domxref("document")}} 또는 window elements 를 위한 API 를 즉시 사용할 수 있다. DOM 프로그래밍은 아래처럼 window object 로 부터 alert() 함수를 사용하여 alert message 를 표시하는 매우 간단한 것일 수도 있고 다음번 예제처럼 새로운 content 를 작성하는 복잡한 DOM 이 될 수도 있다.

- -
<body onload="window.alert('welcome to my home page!');">
-
- -

아래의 자바스크립트는 문서가 로드될 때(모든 DOM을 사용할 수 있게 되는 때임) 실행되는 함수를 정의하였다. 이 함수는 새로운 H1 element 를 생성하고, element 에 text 를 추가하며, H1 을 이 문서의 트리에 추가한다.

- -
<html>
-  <head>
-    <script>
-       // run this function when the document is loaded
-       window.onload = function() {
-
-         // create a couple of elements in an otherwise empty HTML page
-         var heading = document.createElement("h1");
-         var heading_text = document.createTextNode("Big Head!");
-         heading.appendChild(heading_text);
-         document.body.appendChild(heading);
-      }
-    </script>
-  </head>
-  <body>
-  </body>
-</html>
-
- -

중요한 데이터 타입들

- -

이 문서는 objects 와 types 을 최대한 간단하게 설명하려 한다. API 에는 우리가 반드시 알고 있어야 할 수많은 data types 이 있다는 사실을 염두해 두기 바란다.  이 문서에서는 nodes 는 elements 로, 노드의 arrays 는 nodeLists(또는 elements), attribute 노드들은 attributes 로 표현하였다.

- -

아래의 표는 이러한 data types 에 대한 간략한 설명이다.

- - - - - - - - - - - - - - - - - - - - - - - - -
document -

member 가 document type 의 object 를 리턴할 때(예를 들어 element의 ownerDocument property 는 그것이 속해 있는 document 를 return 한다. ), 이 object 는 root document object 자체이다. 는 document object 에 대한 설명은 DOM document Reference 챕터를 참조하라.

-
element -

element 는 DOM API 의 member 에 의해 return 된 element 또는 element type 의 node 를 의미한다. document.createElement() method 가 node 를 참조하는 object 를 리턴한다고 말하는 대신, 이 method 가 DOM 안에서 생생되는 element 를 리턴한다고 좀 더 단순하게 말할 수 있다. element 객체들은 DOM Element interface 와 함께 좀 더 기본적인 Node interface 를 구현한 것이기 때문에 이 reference 에는 두 가지가 모두 포함되었다고 생각하면 된다.

-
nodeList -

nodeList 는 elements 의 배열이다. (document.getElementsByTagName() method 에 의해 리턴된 것과 같은) nodeList의 Items 은 index 를 통해 접근 가능하며, 다음과 같이 두 가지 방식이 있다:

- -
    -
  • list.item(1)
    • -
  • list[1]
    • -
- 위의 방식들은 동일한 것이다. item()method는 nodeList object 의 단일 method 이다. 두번째 방식은 list 에서 두번째 item 을 fetch 하는 전형적인 array syntax 이다.  
attribute -

attribute 가 member 에 의해 리턴되는 것은(예를 들어 createAttribute() method 호출에 의한 리턴), attribute 에 대한 특별한 인터페이스를 노출하는 object reference 이다. attributes 는 DOM 에서 elements 와 같은 nodes 이다. elements 만큼 많이 사용되지는 않는다.

-
namedNodeMap -

namedNodeMap 는 array 와 유사하지만 items 은 name 또는 index 에 의해 접근 가능하다. 리스트는 특별한 정렬이 적용되지 않았기 enumeration 할 때 index 를 주로 사용한다. namedNodeMap 는 이를 위해 item() method 가 있으며, namedNodeMap 에 item 을 추가하거나 삭제할 수 있다.

-
- -

DOM interfaces

- -

이 문서는 objects 와 DOM 에서 조작가능한 것들에 대해 설명하고 있다. 사람들은 HTML FORM element 가 HTMLFormElement interface 로부터 name property 를 얻고, className property 는  HTMLElement interface 로부터 얻는 것에 대해 별로 관심을 보이지 않는 것 같다. 두가지 경우 모두, property 는 form object 안에 있는 것이다. 

- -

하지만 DOM 안에 구현된 objects 와 interfaces 사이의 관계는 혼동될 수 있다. 이 섹션에서는 DOM specification 안의 실제  interfaces 와 그들을 어떻게 활용할 수 있는지에 대해 살펴보도록 하겠다.

- -

Interfaces 와 Objects

- -

많은 objects 가 여러 개의 다른 interfaces 와 연관되어 있다.  예를 들어, table object 는 createCaption, insertRow method 들이 포함된 {{domxref("HTMLTableElement")}} 을 구현한 것이다. table object 는 HTML element 이기도 하기 때문에, table 은 Element interface(DOM {{domxref("Element")}} Reference 챕터 참조)도 구현한다. 마지막으로, HTML element 는 DOM 이 연관되어 있는 한 nodes 트리(tree)에서 하나의 node 이다. nodes 트리는 웹 페이지 또는 XML 페이지를 위한 object model 을 구성한다. 때문에 table element 는 보다 기본적인 Element 에서 파생된 Node interface 를 구현하고 있다.

- -

아래의 예제처럼, table object 를 참조하게 되면, 기본적으로 이들 3 가지 interfaces 를 사용할 수 있게 된다.

- -
var table = document.getElementById("table");
-var tableAttrs = table.attributes; // Node/Element interface
-for (var i = 0; i < tableAttrs.length; i++) {
-  // HTMLTableElement interface: border attribute
-  if(tableAttrs[i].nodeName.toLowerCase() == "border")
-    table.border = "1";
-}
-// HTMLTableElement interface: summary attribute
-table.summary = "note: increased border";
-
- -

DOM 의 핵심 Interfaces

- -

이 섹션은 DOM 에서 가장 많이 사용되는 interfaces 를 정리해보았다. 여기에서는 이들 API 가 실제로 어떤 일을 하는지 설명하는 대신 DOM 을 사용하면서 자주 만나게 되는 methods 와 properties 를 보여줄 것이다.  이들 API 는 이 책의 마지막에 소개된 DOM 예제에서도 사용되었다.

- -

Document 와 window objects 는 DOM 프로그래밍에서 가장 자주 사용하는 objects 이다.  간단하게 설명하자면, window object 는 브라우저와 같다고 할 수 있으며, document object 는 root document 자체라고 할 수 있다. generic Node interface 로부터 상속받은 Element 와 Node, Element interfaces 가 협력하여 각각의 elements 에서 사용할 수 있는 수많은 methods 와 properties 를 제공한다. 이러한 elements 는 이전 섹션에서 설명한 table object 예제에서도 살펴봤듯이, elements 가 보유한 데이터를 처리할 수 있는 특정한 interfaces 도 가지고 있다.

- -

아래는 웹 페이지, XML 페이지 스크립팅에서 DOM 을 사용하는 공통적인 API 들의 간략한 목록이다. 

- - - -

DOM API 테스팅

- -

이 문서는 사용자가 웹 개발에 사용할 수 있는 모든 interface 에 대한 예제를 제공한다. 예제는 <script> element 안에서 DOM 에 접근하는 완벽한 HTML 페이지 형태인 것도 있고, form 에서 script 를 실행하기 위해 버튼과 같은 interface 가 필요한 경우도 있으며, DOM 이 목록화되어 수행되는 HTML elements 도 있을 것이다. 사용자들은 이러한 예제를 새로운 HTML 문서에 복사하여 브라우저에서 실행할 수 있다. 

- -

어떤 예제는 매우 간단할 수도 있다. HTML elements 에 대한 interface의 기본적인 관계만 보여주는 이러한 예제를 실행할 때는, 스크립트에서 쉽게 접근할 수 있는 test page 를 설정할 수도 있다. 아래의 예제는 interface를 테스트 할 수 있는 함수가 위치할 수 있는 header 안에  <script> element 제공한다. 이 함수는 retrieve, set, 조작할 수 있는 attributes 가 포함된 HTML elements 가 사용되었으며, 브라우저에서 이들 함수를 호출하기 위해 웹 UI 를 제공한다.

- -

사용자는 자신이 관심있어 하는 DOM interfaces 를 테스트 하기 위해, 이 test page 를 사용하거나 이와 비슷한 것을 만들어 브라우저에서 어떻게 동작하는지 확인할 수 있다. 사용자는 test() 함수 내용을 필요에 따라 업데이트할 수 있다. (버튼 추가, elements 추가 등)

- -
<html>
-  <head>
-    <title>DOM Tests</title>
-    <script type="application/javascript">
-    function setBodyAttr(attr,value){
-      if (document.body) eval('document.body.'+attr+'="'+value+'"');
-      else notSupported();
-    }
-    </script>
-  </head>
-  <body>
-    <div style="margin: .5in; height: 400;">
-      <p><b><tt>text</tt>color</b></p>
-      <form>
-        <select onChange="setBodyAttr('text',
-        this.options[this.selectedIndex].value);">
-          <option value="black">black
-          <option value="darkblue">darkblue
-        </select>
-        <p><b><tt>bgColor</tt></b></p>
-        <select onChange="setBodyAttr('bgColor',
-        this.options[this.selectedIndex].value);">
-          <option value="white">white
-          <option value="lightgrey">gray
-        </select>
-        <p><b><tt>link</tt></b></p>
-        <select onChange="setBodyAttr('link',
-        this.options[this.selectedIndex].value);">
-          <option value="blue">blue
-          <option value="green">green
-        </select>  <small>
-        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
-        (sample link)</a></small><br>
-      </form>
-      <form>
-        <input type="button" value="version" onclick="ver()" />
-      </form>
-    </div>
-  </body>
-</html>
-
- -

단일 페이지(예를 들어, 웹 페이지의 색상에 영향을 주는 property 설정하는) 안의 수많은 interfaces 를 테스트하기 위해 설정 버튼, textfield, 또는 다른 HTML elements를 사용하여 유사한 테스트 페이지를 만들 수 있다. 아래의 스크린샷은 테스트를 위해 어떻게 interfaces를 그룹화하는지에 대한 아이디어를 제공하고 있다.  

- -
-
Figure 0.1 Sample DOM Test Page
-Image:DOM_Ref_Introduction_to_the_DOM.gif
- -

이 예제에서 드롭다운 메뉴는 웹 페이지에서 DOM 접근가능한 배경색상(bgColor), 하이퍼링크 색상(aLink), 텍스트 색상(text)을 동적으로 업데이트한다. 어떻게 자신의 test pages 를 디자인하더라도, interface 테스트는 DOM 을 효과적으로 사용하는 법을 배우는 데 매우 중요한 수단임을 명심하라.

- - - - - -
{{DefaultAPISidebar("DOM")}}
diff --git a/files/ko/web/api/documentorshadowroot/getselection/index.html b/files/ko/web/api/documentorshadowroot/getselection/index.html new file mode 100644 index 0000000000..c4d219fbde --- /dev/null +++ b/files/ko/web/api/documentorshadowroot/getselection/index.html @@ -0,0 +1,9 @@ +--- +title: Document.getSelection() +slug: Web/API/Document/getSelection +translation_of: Web/API/DocumentOrShadowRoot/getSelection +translation_of_original: Web/API/Document/getSelection +--- +

{{APIRef("DOM")}}

+ +

이 메소드는 {{domxref("Window.getSelection()")}} 와 동일합니다. 이 메소드는 {{domxref("Selection")}} 형의 객체를 반환하는데, 이 객체는 현재 페이지에서 선택된 영역의 정보를 반영합니다.

diff --git a/files/ko/web/api/element/accesskey/index.html b/files/ko/web/api/element/accesskey/index.html deleted file mode 100644 index 0fc48bd749..0000000000 --- a/files/ko/web/api/element/accesskey/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -tags: - - API - - Access Keys - - DOM - - Hotkeys - - NeedsContent - - 레퍼런스 - - 속성 - - 엘리먼트 - - 키보드 단축키 -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -
{{APIRef("DOM")}}
- -

Element.accessKey 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.

- -
-

Element.accessKey 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, Alt + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.

-
- -

브라우저 호환성

- - - -

{{Compat("api.Element.accessKey")}}

- -

함께 보기

- - diff --git a/files/ko/web/api/element/blur_event/index.html b/files/ko/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..3bbcc6acb0 --- /dev/null +++ b/files/ko/web/api/element/blur_event/index.html @@ -0,0 +1,154 @@ +--- +title: blur +slug: Web/Events/blur +translation_of: Web/API/Element/blur_event +--- +

blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout 이벤트의 가장 다른점은 focusout 은 이벤트 버블링이 발생합니다.

+ +

General info

+ +
+
Specification
+
DOM L3
+
Interface
+
{{domxref("FocusEvent")}}
+
Bubbles
+
No
+
Cancelable
+
No
+
Target
+
Element
+
Default Action
+
None.
+
+ +

{{NoteStart}} 이 이벤트가 처리될때 {{domxref("Document.activeElement")}}의 값이 브라우저마다 다릅니다 ({{bug(452307)}}): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, 파이어폭스와 크롬은 도큐먼트의 body 에 추가합니다.{{NoteEnd}}

+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
+ +

이벤트 위임

+ +

이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 focusout 이벤트를 사용하거나,   addEventListener의 "useCapture" 파라미터를 true로 설정하세요:

+ +

HTML Content

+ +
<form id="form">
+  <input type="text" placeholder="text input">
+  <input type="password" placeholder="password">
+</form>
+ +

JavaScript Content

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Event_delegation')}}

+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
+
+ +

[1] Prior to Gecko 24 {{geckoRelease(24)}} the interface for this event was {{domxref("Event")}}, not {{domxref("FocusEvent")}}. See ({{bug(855741)}}).

+ + + +
    +
  • {{event("focus")}}
    • +
  • {{event("blur")}}
    • +
  • {{event("focusin")}}
    • +
  • {{event("focusout")}}
    • +
diff --git a/files/ko/web/api/elementcssinlinestyle/style/index.html b/files/ko/web/api/elementcssinlinestyle/style/index.html new file mode 100644 index 0000000000..5976dd66bc --- /dev/null +++ b/files/ko/web/api/elementcssinlinestyle/style/index.html @@ -0,0 +1,41 @@ +--- +title: element.style +slug: Web/API/HTMLElement/style +tags: + - API + - HTML DOM + - HTMLElement + - Property + - Reference + - Style +translation_of: Web/API/ElementCSSInlineStyle/style +--- +
{{ APIRef("HTML DOM") }}
+ +

HTMLElement.style 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다

+ +

예제

+ +
// Set multiple styles in a single statement
+elt.style.cssText = "color: blue; border: 1px solid black";
+// Or
+elt.setAttribute("style", "color:red; border: 1px solid blue;");
+
+// Set specific style while leaving other inline style values untouched
+elt.style.color = "blue";
+ +

명세

+ +

DOM Level 2 Style: ElementCSSInlineStyle.style

+ +

CSSOM: ElementCSSInlineStyle

+ +

브라우저 호환성

+ +

{{Compat("api.HTMLElement.style")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/api/event/createevent/index.html b/files/ko/web/api/event/createevent/index.html deleted file mode 100644 index 549a51bfdc..0000000000 --- a/files/ko/web/api/event/createevent/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: Event.createEvent() -slug: Web/API/Event/createEvent -translation_of: Web/API/Document/createEvent -translation_of_original: Web/API/Event/createEvent ---- -

{{APIRef("DOM")}}

- -

새로운 event를 생성합니다, 새로 만들어진 event는 반드시 자신의 init() method를 호출함으로써 초기화되어야만 합니다.

- -

Syntax

- -
document.createEvent(type)
- -
-
type
-
A string indicating the event type to create.
-
- -

이 method는 명시된 타입인 새로운 DOM {{ domxref("Event") }} 객체를 반환하며 이는 반드시 사용 전에 초기화되어야만 합니다.

- -

Example

- -
var newEvent = document.createEvent("UIEvents");
- -

Specification

- - diff --git "a/files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" "b/files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" deleted file mode 100644 index 403c340413..0000000000 --- "a/files/ko/web/api/fetch_api/fetch\354\235\230_\354\202\254\354\232\251\353\262\225/index.html" +++ /dev/null @@ -1,419 +0,0 @@ ---- -title: Using Fetch -slug: Web/API/Fetch_API/Fetch의_사용법 -translation_of: Web/API/Fetch_API/Using_Fetch ---- -

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.

- -

이전에 이러한 기능을  {{domxref("XMLHttpRequest")}}에서 제공하고 있었습니다. Fetch는 이러한 API의 대체제로 {{domxref("ServiceWorker_API", "Service Workers")}}같은 기술로 간단히 이용하는것이 가능합니다. 또한 CORS나 HTTP확장같은  HTTP에 관련한 개념을 모아 정의하고 있습니다.

- -

Fetch의 기본 스펙은jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야합니다.

- -
    -
  • fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.
    • -
  • 보통 fetch는 쿠키를 보내거나 받지 않습니다.  사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.
    - 2017년 8월 25일 이후. 기본 자격증명(credentials) 정책이 same-origin 으로 변경되었습니다. 파이어폭스는 61.0b13 이후 변경되었습니다.
    • -
- -

기본적인 fetch는 누구라도 알기쉽고 간단하게 작성할 수 있습니다. 아래의 코드를 봐주시기 바랍니다.

- -
fetch('http://example.com/movies.json')
-  .then(function(response) {
-    return response.json();
-  })
-  .then(function(myJson) {
-    console.log(JSON.stringify(myJson));
-  });
- -

네트워크에서 JSON 파일을 가져 와서 콘솔에 인쇄합니다. 간단한 fetch() 사용 흐름은 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속 ({{domxref ( "Response")}} 개체)을 반환하는 것입니다.

- -

이것은 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 {{domxref("Body.json","json()")}} 메서드를 사용할 필요가 있습니다. ({{domxref("Body")}}의 믹스인 (역주:php의 트레이드와 같은것입니다. )으로 정의되어, 이것은 {{domxref("Request")}} 객체와 {{domxref("Response")}} 객체의 쌍방에 구현되어 있습니다.

- -
-

노트: http Request와 http Response의 Body mixin은 Body 컨텐츠를 다른 mine 타입으로 사용하는 비슷한 메서드를 제공하고 있습니다.  상세한 내용은 {{anch("Body")}} 섹션을 참고해 주시기 바랍니다.

-
- -

Fetch Reqeust는 검색된 리소스로부터의 지시가 아닌 CSP의connect-src의 디렉티브(directive)에 의해 제어됩니다.

- -

리퀘스트의 옵션 적용

- -

fetch() 메서드에 두번째 파라미터를 적용하는것도 가능합니다. init 오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해줍니다.

- -

모든 설정 가능한 옵션의 상세 설명은 {{domxref("GlobalFetch.fetch","fetch()")}}를 참고해주시기 바랍니다.

- -
// Example POST method implementation:
-
-postData('http://example.com/answer', {answer: 42})
-  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
-  .catch(error => console.error(error));
-
-function postData(url = '', data = {}) {
-  // Default options are marked with *
-    return fetch(url, {
-        method: 'POST', // *GET, POST, PUT, DELETE, etc.
-        mode: 'cors', // no-cors, cors, *same-origin
-        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
-        credentials: 'same-origin', // include, *same-origin, omit
-        headers: {
-            'Content-Type': 'application/json',
-            // 'Content-Type': 'application/x-www-form-urlencoded',
-        },
-        redirect: 'follow', // manual, *follow, error
-        referrer: 'no-referrer', // no-referrer, *client
-        body: JSON.stringify(data), // body data type must match "Content-Type" header
-    })
-    .then(response => response.json()); // parses JSON response into native JavaScript objects
-}
-
- -

자격 증명(credentials)이 포함된 Request 요청

- -

자격 증명이 포함된 인증서를 보내도록 하려면 fetch() 메서드에 credentials: 'include'를 추가하도록 합니다. 이것은 cross-origin 요청에서도 사용됩니다.

- -
fetch('https://example.com', {
-  credentials: 'include'
-})
- -

요청하려는 URL이 호출 스크립트와 동일한 origin을 가지고 있을때만 자격증명을 전송하려면 credentials: 'same-origin'를 추가해 주시기 바랍니다.

- -
// The calling script is on the origin 'https://example.com'
-
-fetch('https://example.com', {
-  credentials: 'same-origin'
-})
- -

브라우저의 보안을 유지하는것 대신 자격증명을 포함하지 않는것을 원한다면 credentials: 'omit'를 작성해 주시기 바랍니다.

- -
fetch('https://example.com', {
-  credentials: 'omit'
-})
-
- -

Uploading JSON data

- -

POST프로토콜로 JSON인코딩된 데이터를 보내기 위해 {{domxref("GlobalFetch.fetch","fetch()")}}를 사용합니다.

- -
var url = 'https://example.com/profile';
-var data = {username: 'example'};
-
-fetch(url, {
-  method: 'POST', // or 'PUT'
-  body: JSON.stringify(data), // data can be `string` or {object}!
-  headers:{
-    'Content-Type': 'application/json'
-  }
-}).then(res => res.json())
-.then(response => console.log('Success:', JSON.stringify(response)))
-.catch(error => console.error('Error:', error));
- -

Uploading a file

- -

<input type="file" /> input엘리먼트, {{domxref("FormData.FormData","FormData()")}}, {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}를 사용하여 파일을 업로드 할 수 있습니다.

- -
var formData = new FormData();
-var fileField = document.querySelector('input[type="file"]');
-
-formData.append('username', 'abc123');
-formData.append('avatar', fileField.files[0]);
-
-fetch('https://example.com/profile/avatar', {
-  method: 'PUT',
-  body: formData
-})
-.then(response => response.json())
-.catch(error => console.error('Error:', error))
-.then(response => console.log('Success:', JSON.stringify(response)));
- -

Uploading multiple files

- -

<input type="file" multiple /> input엘리먼트와{{domxref("FormData.FormData","FormData()")}}, {{domxref("GlobalFetch.fetch","fetch()")}}를 사용하여 파일 다중업로드를 할 수 있습니다.

- -
var formData = new FormData();
-var photos = document.querySelector('input[type="file"][multiple]');
-
-formData.append('title', 'My Vegas Vacation');
-for (var i = 0; i < photos.files.length; i++) {
-  formData.append('photos', photos.files[i]);
-}
-
-fetch('https://example.com/posts', {
-  method: 'POST',
-  body: formData
-})
-.then(response => response.json())
-.then(response => console.log('Success:', JSON.stringify(response)))
-.catch(error => console.error('Error:', error));
- -

문서 파일을 열단위로 처리하기

- -

응답하는 곳에서 읽는 덩어리들은 줄 단위로 깔끔하게 떨어지지 않으며 문자열이 아니라 Uint8Arrys(8비트 부호 없는 정수)입니다. 만약 텍스트 파일은 fetch하고 이것을 줄 단위로 처리하고자 한다면, 이런 복잡함을 다루는 것은 사용자에게 달려있습니다. 아래의 예시는 line iterator를 생성하여 처리하는 한가지 방법을 보여주고 있습니다. (간단하게 하기위해, 텍스트는 UTF-8이라고 가정하며,  fetch errors를 다루지 않는다고 합시다).

- -
async function* makeTextFileLineIterator(fileURL) {
-  const utf8Decoder = new TextDecoder("utf-8");
-  let response = await fetch(fileURL);
-  let reader = response.body.getReader();
-  let {value: chunk, done: readerDone} = await reader.read();
-  chunk = chunk ? utf8Decoder.decode(chunk) : "";
-
-  let re = /\n|\r|\r\n/gm;
-  let startIndex = 0;
-  let result;
-
-  for (;;) {
-    let result = re.exec(chunk);
-    if (!result) {
-      if (readerDone) {
-        break;
-      }
-      let remainder = chunk.substr(startIndex);
-      ({value: chunk, done: readerDone} = await reader.read());
-      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
-      startIndex = re.lastIndex = 0;
-      continue;
-    }
-    yield chunk.substring(startIndex, result.index);
-    startIndex = re.lastIndex;
-  }
-  if (startIndex < chunk.length) {
-    // last line didn't end in a newline char
-    yield chunk.substr(startIndex);
-  }
-}
-
-for await (let line of makeTextFileLineIterator(urlOfFile)) {
-  processLine(line);
-}
- -

fetch의 성공 여부를 체크

- -

한가지 예를 들자면, 네트워크 error가 발생했을때 또는 CORS 가 서버단에서 잘못 설정되어있다면 {{domxref("GlobalFetch.fetch","fetch()")}} promise 객체는 {{jsxref("TypeError")}} 메시지와 함께 반려 할것입니다. 비록 이 현상은 보통 허가 이슈나 그와 비슷한 것을 의미할지라도, 404 는 네트워크 error를 구성하지는 않습니다.  성공적인 fetch() 를 체크하는 정확한 방법은 promise 객체가 해결되었는지를 체크하는 것을 포함합니다. 그리고 {{domxref("Response.ok")}} property 가 "true"의 값을 가지고 있는지 확인하는 것입니다. 코드는 아래와 같이 구현될겁니다:

- -
fetch('flowers.jpg').then(function(response) {
-  if(response.ok) {
-    return response.blob();
-  }
-  throw new Error('Network response was not ok.');
-}).then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-}).catch(function(error) {
-  console.log('There has been a problem with your fetch operation: ', error.message);
-});
- -

request 객체를 fetch로 전달

- -

fetch()를 사용해 요청한 리소스의 경로를 전달하는것 대신{{domxref("Request.Request","Request()")}} 생성자를 사용해 Request 객체를 작성하여 fetch() 메서드를 인수로 전달하는것도 가능합니다.

- -
var myHeaders = new Headers();
-
-var myInit = { method: 'GET',
-               headers: myHeaders,
-               mode: 'cors',
-               cache: 'default' };
-
-var myRequest = new Request('flowers.jpg', myInit);
-
-fetch(myRequest).then(function(response) {
-  return response.blob();
-}).then(function(myBlob) {
-  var objectURL = URL.createObjectURL(myBlob);
-  myImage.src = objectURL;
-});
- -

fetch()메서드의 인수와 똑같은 인수를 Request()객체에 전달하여 적용하는것이 가능합니다. 또한 Request 객체의 클론을 생성하기 위해 이미 존재하는 Request 객체를 전달하는것도 가능합니다.

- -
var anotherRequest = new Request(myRequest,myInit);
- -

이것은 Request와 Resposne의 Body를 하나만 사용하고 있으므로 사용성이 높습니다.필요하면 init 객체를 변화시켜 Response나 Request를 재사용할 수 있도록 복사합니다. The copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request.

- -
-

노트: {{domxref("Request.clone","clone()")}} 메서드를 사용해 Request 객체의 클론을 생성할 수 있습니다. 다른 카피 메서드와 약간 다른 의미가 있습니다. 이전 요청의 body가 이미 읽어들여진 경우 전자는  실패하지만 clone()메서드는 실패하지 않습니다. 이 기능은 Response와 동일합니다.

-
- -

Headers

- -

{{domxref("Headers")}} 인터페이스에서  {{domxref("Headers.Headers","Headers()")}} 생성자를 사용해 헤더 객체를 생성할 수 있습니다. 헤더 객체는 Key와 Value로 이루어진 간단한 multi-map입니다.

- -
var content = "Hello World";
-var myHeaders = new Headers();
-myHeaders.append("Content-Type", "text/plain");
-myHeaders.append("Content-Length", content.length.toString());
-myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
- -

똑같이 배열을 전달하거나 객체 리터럴을 생성자에 전달하는것으로 생성할 수 있습니다.

- -
myHeaders = new Headers({
-  "Content-Type": "text/plain",
-  "Content-Length": content.length.toString(),
-  "X-Custom-Header": "ProcessThisImmediately",
-});
- -

다음과 같은 코드로 헤더의 내용을 들여다 볼 수 있습니다.

- -
console.log(myHeaders.has("Content-Type")); // true
-console.log(myHeaders.has("Set-Cookie")); // false
-myHeaders.set("Content-Type", "text/html");
-myHeaders.append("X-Custom-Header", "AnotherValue");
-
-console.log(myHeaders.get("Content-Length")); // 11
-console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
-
-myHeaders.delete("X-Custom-Header");
-console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
- -

이러한 몇몇개의 조작법은 {{domxref("ServiceWorker_API","ServiceWorkers")}}에서밖에 도움되지 않지만 헤더를 조작하기 위해서 보다 나은 API를 제공하고 있습니다.

- -

모든 Header 메서드는 유효한 HTTP 헤더가 전달되지 않았을 경우 TypeError을 반환합니다. immutable Guard(다음 섹션 참고)가 설정되어 있는 경우에도 TypeError를 반환합니다. TypeError를 반환하지 않고 실패하는 경우도 있습니다. 다음 예를 참고해주시기 바랍니다.

- -
var myResponse = Response.error();
-try {
-  myResponse.headers.set("Origin", "http://mybank.com");
-} catch(e) {
-  console.log("은행이 아니잖아요!!");
-}
- -

헤더의 좋은 사용법으로 처리하기 전에 컨텐츠 타입으로 올바른가의 여부를 판별하는 방법이 있습니다. 예를 들어,

- -
fetch(myRequest).then(function(response) {
-    var contentType = response.headers.get('content-type');
-    if(contentType && contentType.includes('application/json')) {
-      return response.json();
-    }
-    throw new TypeError("Oops, we haven't got JSON!");
-  })
-  .then(function(json) { /* process your JSON further */ })
-  .catch(function(error) { console.log(error); });
- -

가드

- -

헤더는 리퀘스트를 송신할 수 있으며 리스폰스를 수신할 수 있습니다. 어떤 정보를 수정할 수 있게 하기 위해, 혹은 수정하기 위해 여러 종류의 제어가 가능합니다. 헤더는 guard 프로퍼티는 이것을 가능하게 합니다. 가드는 Request나 Response에 포함되지 않지만  헤더 객체에서 조작 가능한 여러 메서드들의 사용 가능 여부에 영향을 미칩니다.

- -

가드의 설정값은 다음과 같습니다.

- -
    -
  • none: 기본치
    • -
  • request: ({{domxref("Request.headers")}})에서 얻은 헤더 객체에 대한 가드
    • -
  • request-no-cors: {{domxref("Request.mode")}} no-cors에 생성된 ({{domxref("Request.headers")}})에서 사용할 수 있는 값만 헤더에 확보함
    • -
  • response: ({{domxref("Response.headers")}}) Response에서 얻은 객체애 대한 가드
    • -
  • immutable: 대개 ServiceWorker에서 사용됨. 헤더의 설정을 읽기 전용으로 바꿈.
    • -
- -
-

메모: request에서 가드된 헤더의Content-Length 헤더는 추가나 변경할 수 없는 가능성이 있습니다.  마찬가지로 리스폰스 헤더에 Set-Cookie를 삽입하는것은 불가능합니다.ServiceWorker는 동기 Reponse를 추출하여 쿠키를 설정합니다.

-
- -

Response 객체

- -

위에서 본 바와 같이 {{domxref("Response")}} 인스턴스들은 fetch() promise가 resolve됬을때 반환됩니다.

- -

아래는 어떤 리스폰스 객체라도 공통으로 사용되는 리스폰스 프로퍼티입니다.

- -
    -
  • {{domxref("Response.status")}} — HTTP Status의 정수치, 기본값 200
    • -
  • {{domxref("Response.statusText")}} — HTTP Status 코드의 메서드와 일치하는 문자열, 기본값은 "OK"
    • -
  • {{domxref("Response.ok")}} 상술한 프로퍼티에서 사용한 HTTP Status 코드가 200에서 299중 하나임을 체크하는 값, {{domxref("Boolean")}}를 반환
    • -
- -

Response 객체는 개발자의 손에 의해 동적으로 만드는것이 가능합니다. 이 방법은 {{domxref("ServiceWorker_API", "ServiceWorkers")}}내에서 활약할 때가 많습니다. 예를들어 Request를 획득했을 때  {{domxref("FetchEvent.respondWith","respondWith()")}}메서드에 의해 커스텀된 리스폰스를 반환하는 경우가 있습니다.

- -
var myBody = new Blob();
-
-addEventListener('fetch', function(event) {
-  event.respondWith(
-    new Response(myBody, {
-      headers: { "Content-Type" : "text/plain" }
-    })
-  );
-});
- -

{{domxref("Response.Response","Response()")}} 생성자는 파라미터로써 두개의 객체를 전달하는것이 가능합니다.첫번째는 Response Body, 두번째는 초기화 객체({{domxref("Request.Request","Request()")}}의 클론을 생성하는 방법과 비슷합니다.) 입니다.

- -
    -
- -
-

付記: 정적 메서드 {{domxref("Response.error","error()")}}는 단순한 에러 Response를 반환합니다. {{domxref("Response.redirect","redirect()")}} 메서드 또한 지정한 URL에 리다이렉트할 Response를 반환합니다. 이것들은 Service Workers에서만 사용되고 있습니다.

-
- -

Body

- -

Request, Response 둘다 Body를 가지고 있습니다. body는 아래에서 기술한 타입들 중 하나의 인스턴스입니다.

- -
    -
  • {{domxref("ArrayBuffer")}}
    • -
  • {{domxref("ArrayBufferView")}} (Uint8Array같은 TypedArray)
    • -
  • {{domxref("Blob")}}/File
    • -
  • 문자열
    • -
  • {{domxref("URLSearchParams")}}
    • -
  • {{domxref("FormData")}}
    • -
- -

{{domxref("Body")}} 믹스인은 {{domxref("Request")}}나{{domxref("Response")}}에 구현되어, 콘텐츠를 추출하기 위해 아래의 메서드가 정의되어 있습니다. 이러한 메서드들은 전부 최종적으로 요청으로 반환된 값을 내장하고 있는 promise를 반환합니다.

- -
    -
  • {{domxref("Body.arrayBuffer","arrayBuffer()")}}
    • -
  • {{domxref("Body.blob","blob()")}}
    • -
  • {{domxref("Body.json","json()")}}
    • -
  • {{domxref("Body.text","text()")}}
    • -
  • {{domxref("Body.formData","formData()")}}
    • -
- -

이것들은 비 텍스트 데이터를 XHR보다 훨씬 간단하게 사용하는것을 도와줍니다.

- -

Request 바디는 body 파라미터를 전달하는 것으로 설정할 수 있습니다.

- -
var form = new FormData(document.getElementById('login-form'));
-fetch("/login", {
-  method: "POST",
-  body: form
-})
- -

Both request and response (and by extension the fetch() function), will try to intelligently determine the content type. A request will also automatically set a Content-Type header if none is set in the dictionary.

- -

Feature detection(특징 추출)

- -

Fetch API support는{{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} or {{domxref("GlobalFetch.fetch","fetch()")}} on the {{domxref("Window")}} or {{domxref("Worker")}}로 존재여부를 확인함으로써 추출할 수 있습니다. 예를 들어:

- -
if (window.fetch) {
-    // run my fetch request here
-} else {
-    // do something with XMLHttpRequest?
- -

Polyfill

- -

Fetch를 지원하지 않는 브라우저를 위해 미지원 브라우저를 위한 Fetch Polyfill이 지원되고 있습니다.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Initial definition
- -

Browser compatibility

- -

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

- -

관련항목

- -
- - - -

{{DefaultAPISidebar("Fetch API")}} 

diff --git a/files/ko/web/api/fetch_api/using_fetch/index.html b/files/ko/web/api/fetch_api/using_fetch/index.html new file mode 100644 index 0000000000..403c340413 --- /dev/null +++ b/files/ko/web/api/fetch_api/using_fetch/index.html @@ -0,0 +1,419 @@ +--- +title: Using Fetch +slug: Web/API/Fetch_API/Fetch의_사용법 +translation_of: Web/API/Fetch_API/Using_Fetch +--- +

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는것이 가능합니다. 또한 {{domxref("GlobalFetch.fetch","fetch()")}} 메서드를 이용하는 것으로 비동기 네트워크 통신을 알기쉽게 기술할 수 있습니다.

+ +

이전에 이러한 기능을  {{domxref("XMLHttpRequest")}}에서 제공하고 있었습니다. Fetch는 이러한 API의 대체제로 {{domxref("ServiceWorker_API", "Service Workers")}}같은 기술로 간단히 이용하는것이 가능합니다. 또한 CORS나 HTTP확장같은  HTTP에 관련한 개념을 모아 정의하고 있습니다.

+ +

Fetch의 기본 스펙은jQuery.ajax()와 기본적으로 두가지가 다르다는 사실에 유념해야합니다.

+ +
    +
  • fetch()로 부터 반환되는 Promise 객체는 HTTP error 상태를 reject하지 않습니다. HTTP Statue Code가 404나 500을 반환하더라도요. 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에는 reject가 반환됩니다.
    • +
  • 보통 fetch는 쿠키를 보내거나 받지 않습니다.  사이트에서 사용자 세션을 유지 관리해야하는 경우 인증되지 않는 요청이 발생합니다. 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해야 합니다.
    + 2017년 8월 25일 이후. 기본 자격증명(credentials) 정책이 same-origin 으로 변경되었습니다. 파이어폭스는 61.0b13 이후 변경되었습니다.
    • +
+ +

기본적인 fetch는 누구라도 알기쉽고 간단하게 작성할 수 있습니다. 아래의 코드를 봐주시기 바랍니다.

+ +
fetch('http://example.com/movies.json')
+  .then(function(response) {
+    return response.json();
+  })
+  .then(function(myJson) {
+    console.log(JSON.stringify(myJson));
+  });
+ +

네트워크에서 JSON 파일을 가져 와서 콘솔에 인쇄합니다. 간단한 fetch() 사용 흐름은 인수 한개(가져올 자원의 경로)를 가져오고 응답을 포함하는 약속 ({{domxref ( "Response")}} 개체)을 반환하는 것입니다.

+ +

이것은 단순한 HTTP Response이며, 실제 JSON이 아닙니다. response 객체로부터 사진을 가져오기 위해서는 {{domxref("Body.json","json()")}} 메서드를 사용할 필요가 있습니다. ({{domxref("Body")}}의 믹스인 (역주:php의 트레이드와 같은것입니다. )으로 정의되어, 이것은 {{domxref("Request")}} 객체와 {{domxref("Response")}} 객체의 쌍방에 구현되어 있습니다.

+ +
+

노트: http Request와 http Response의 Body mixin은 Body 컨텐츠를 다른 mine 타입으로 사용하는 비슷한 메서드를 제공하고 있습니다.  상세한 내용은 {{anch("Body")}} 섹션을 참고해 주시기 바랍니다.

+
+ +

Fetch Reqeust는 검색된 리소스로부터의 지시가 아닌 CSP의connect-src의 디렉티브(directive)에 의해 제어됩니다.

+ +

리퀘스트의 옵션 적용

+ +

fetch() 메서드에 두번째 파라미터를 적용하는것도 가능합니다. init 오브젝트는 다른 여러 세팅을 컨트롤 할 수 있게 해줍니다.

+ +

모든 설정 가능한 옵션의 상세 설명은 {{domxref("GlobalFetch.fetch","fetch()")}}를 참고해주시기 바랍니다.

+ +
// Example POST method implementation:
+
+postData('http://example.com/answer', {answer: 42})
+  .then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
+  .catch(error => console.error(error));
+
+function postData(url = '', data = {}) {
+  // Default options are marked with *
+    return fetch(url, {
+        method: 'POST', // *GET, POST, PUT, DELETE, etc.
+        mode: 'cors', // no-cors, cors, *same-origin
+        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
+        credentials: 'same-origin', // include, *same-origin, omit
+        headers: {
+            'Content-Type': 'application/json',
+            // 'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        redirect: 'follow', // manual, *follow, error
+        referrer: 'no-referrer', // no-referrer, *client
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+    })
+    .then(response => response.json()); // parses JSON response into native JavaScript objects
+}
+
+ +

자격 증명(credentials)이 포함된 Request 요청

+ +

자격 증명이 포함된 인증서를 보내도록 하려면 fetch() 메서드에 credentials: 'include'를 추가하도록 합니다. 이것은 cross-origin 요청에서도 사용됩니다.

+ +
fetch('https://example.com', {
+  credentials: 'include'
+})
+ +

요청하려는 URL이 호출 스크립트와 동일한 origin을 가지고 있을때만 자격증명을 전송하려면 credentials: 'same-origin'를 추가해 주시기 바랍니다.

+ +
// The calling script is on the origin 'https://example.com'
+
+fetch('https://example.com', {
+  credentials: 'same-origin'
+})
+ +

브라우저의 보안을 유지하는것 대신 자격증명을 포함하지 않는것을 원한다면 credentials: 'omit'를 작성해 주시기 바랍니다.

+ +
fetch('https://example.com', {
+  credentials: 'omit'
+})
+
+ +

Uploading JSON data

+ +

POST프로토콜로 JSON인코딩된 데이터를 보내기 위해 {{domxref("GlobalFetch.fetch","fetch()")}}를 사용합니다.

+ +
var url = 'https://example.com/profile';
+var data = {username: 'example'};
+
+fetch(url, {
+  method: 'POST', // or 'PUT'
+  body: JSON.stringify(data), // data can be `string` or {object}!
+  headers:{
+    'Content-Type': 'application/json'
+  }
+}).then(res => res.json())
+.then(response => console.log('Success:', JSON.stringify(response)))
+.catch(error => console.error('Error:', error));
+ +

Uploading a file

+ +

<input type="file" /> input엘리먼트, {{domxref("FormData.FormData","FormData()")}}, {{domxref("WindowOrWorkerGlobalScope/fetch","fetch()")}}를 사용하여 파일을 업로드 할 수 있습니다.

+ +
var formData = new FormData();
+var fileField = document.querySelector('input[type="file"]');
+
+formData.append('username', 'abc123');
+formData.append('avatar', fileField.files[0]);
+
+fetch('https://example.com/profile/avatar', {
+  method: 'PUT',
+  body: formData
+})
+.then(response => response.json())
+.catch(error => console.error('Error:', error))
+.then(response => console.log('Success:', JSON.stringify(response)));
+ +

Uploading multiple files

+ +

<input type="file" multiple /> input엘리먼트와{{domxref("FormData.FormData","FormData()")}}, {{domxref("GlobalFetch.fetch","fetch()")}}를 사용하여 파일 다중업로드를 할 수 있습니다.

+ +
var formData = new FormData();
+var photos = document.querySelector('input[type="file"][multiple]');
+
+formData.append('title', 'My Vegas Vacation');
+for (var i = 0; i < photos.files.length; i++) {
+  formData.append('photos', photos.files[i]);
+}
+
+fetch('https://example.com/posts', {
+  method: 'POST',
+  body: formData
+})
+.then(response => response.json())
+.then(response => console.log('Success:', JSON.stringify(response)))
+.catch(error => console.error('Error:', error));
+ +

문서 파일을 열단위로 처리하기

+ +

응답하는 곳에서 읽는 덩어리들은 줄 단위로 깔끔하게 떨어지지 않으며 문자열이 아니라 Uint8Arrys(8비트 부호 없는 정수)입니다. 만약 텍스트 파일은 fetch하고 이것을 줄 단위로 처리하고자 한다면, 이런 복잡함을 다루는 것은 사용자에게 달려있습니다. 아래의 예시는 line iterator를 생성하여 처리하는 한가지 방법을 보여주고 있습니다. (간단하게 하기위해, 텍스트는 UTF-8이라고 가정하며,  fetch errors를 다루지 않는다고 합시다).

+ +
async function* makeTextFileLineIterator(fileURL) {
+  const utf8Decoder = new TextDecoder("utf-8");
+  let response = await fetch(fileURL);
+  let reader = response.body.getReader();
+  let {value: chunk, done: readerDone} = await reader.read();
+  chunk = chunk ? utf8Decoder.decode(chunk) : "";
+
+  let re = /\n|\r|\r\n/gm;
+  let startIndex = 0;
+  let result;
+
+  for (;;) {
+    let result = re.exec(chunk);
+    if (!result) {
+      if (readerDone) {
+        break;
+      }
+      let remainder = chunk.substr(startIndex);
+      ({value: chunk, done: readerDone} = await reader.read());
+      chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : "");
+      startIndex = re.lastIndex = 0;
+      continue;
+    }
+    yield chunk.substring(startIndex, result.index);
+    startIndex = re.lastIndex;
+  }
+  if (startIndex < chunk.length) {
+    // last line didn't end in a newline char
+    yield chunk.substr(startIndex);
+  }
+}
+
+for await (let line of makeTextFileLineIterator(urlOfFile)) {
+  processLine(line);
+}
+ +

fetch의 성공 여부를 체크

+ +

한가지 예를 들자면, 네트워크 error가 발생했을때 또는 CORS 가 서버단에서 잘못 설정되어있다면 {{domxref("GlobalFetch.fetch","fetch()")}} promise 객체는 {{jsxref("TypeError")}} 메시지와 함께 반려 할것입니다. 비록 이 현상은 보통 허가 이슈나 그와 비슷한 것을 의미할지라도, 404 는 네트워크 error를 구성하지는 않습니다.  성공적인 fetch() 를 체크하는 정확한 방법은 promise 객체가 해결되었는지를 체크하는 것을 포함합니다. 그리고 {{domxref("Response.ok")}} property 가 "true"의 값을 가지고 있는지 확인하는 것입니다. 코드는 아래와 같이 구현될겁니다:

+ +
fetch('flowers.jpg').then(function(response) {
+  if(response.ok) {
+    return response.blob();
+  }
+  throw new Error('Network response was not ok.');
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+}).catch(function(error) {
+  console.log('There has been a problem with your fetch operation: ', error.message);
+});
+ +

request 객체를 fetch로 전달

+ +

fetch()를 사용해 요청한 리소스의 경로를 전달하는것 대신{{domxref("Request.Request","Request()")}} 생성자를 사용해 Request 객체를 작성하여 fetch() 메서드를 인수로 전달하는것도 가능합니다.

+ +
var myHeaders = new Headers();
+
+var myInit = { method: 'GET',
+               headers: myHeaders,
+               mode: 'cors',
+               cache: 'default' };
+
+var myRequest = new Request('flowers.jpg', myInit);
+
+fetch(myRequest).then(function(response) {
+  return response.blob();
+}).then(function(myBlob) {
+  var objectURL = URL.createObjectURL(myBlob);
+  myImage.src = objectURL;
+});
+ +

fetch()메서드의 인수와 똑같은 인수를 Request()객체에 전달하여 적용하는것이 가능합니다. 또한 Request 객체의 클론을 생성하기 위해 이미 존재하는 Request 객체를 전달하는것도 가능합니다.

+ +
var anotherRequest = new Request(myRequest,myInit);
+ +

이것은 Request와 Resposne의 Body를 하나만 사용하고 있으므로 사용성이 높습니다.필요하면 init 객체를 변화시켜 Response나 Request를 재사용할 수 있도록 복사합니다. The copy must be made before the body is read, and reading the body in the copy will also mark it as read in the original request.

+ +
+

노트: {{domxref("Request.clone","clone()")}} 메서드를 사용해 Request 객체의 클론을 생성할 수 있습니다. 다른 카피 메서드와 약간 다른 의미가 있습니다. 이전 요청의 body가 이미 읽어들여진 경우 전자는  실패하지만 clone()메서드는 실패하지 않습니다. 이 기능은 Response와 동일합니다.

+
+ +

Headers

+ +

{{domxref("Headers")}} 인터페이스에서  {{domxref("Headers.Headers","Headers()")}} 생성자를 사용해 헤더 객체를 생성할 수 있습니다. 헤더 객체는 Key와 Value로 이루어진 간단한 multi-map입니다.

+ +
var content = "Hello World";
+var myHeaders = new Headers();
+myHeaders.append("Content-Type", "text/plain");
+myHeaders.append("Content-Length", content.length.toString());
+myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
+ +

똑같이 배열을 전달하거나 객체 리터럴을 생성자에 전달하는것으로 생성할 수 있습니다.

+ +
myHeaders = new Headers({
+  "Content-Type": "text/plain",
+  "Content-Length": content.length.toString(),
+  "X-Custom-Header": "ProcessThisImmediately",
+});
+ +

다음과 같은 코드로 헤더의 내용을 들여다 볼 수 있습니다.

+ +
console.log(myHeaders.has("Content-Type")); // true
+console.log(myHeaders.has("Set-Cookie")); // false
+myHeaders.set("Content-Type", "text/html");
+myHeaders.append("X-Custom-Header", "AnotherValue");
+
+console.log(myHeaders.get("Content-Length")); // 11
+console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
+
+myHeaders.delete("X-Custom-Header");
+console.log(myHeaders.getAll("X-Custom-Header")); // [ ]
+ +

이러한 몇몇개의 조작법은 {{domxref("ServiceWorker_API","ServiceWorkers")}}에서밖에 도움되지 않지만 헤더를 조작하기 위해서 보다 나은 API를 제공하고 있습니다.

+ +

모든 Header 메서드는 유효한 HTTP 헤더가 전달되지 않았을 경우 TypeError을 반환합니다. immutable Guard(다음 섹션 참고)가 설정되어 있는 경우에도 TypeError를 반환합니다. TypeError를 반환하지 않고 실패하는 경우도 있습니다. 다음 예를 참고해주시기 바랍니다.

+ +
var myResponse = Response.error();
+try {
+  myResponse.headers.set("Origin", "http://mybank.com");
+} catch(e) {
+  console.log("은행이 아니잖아요!!");
+}
+ +

헤더의 좋은 사용법으로 처리하기 전에 컨텐츠 타입으로 올바른가의 여부를 판별하는 방법이 있습니다. 예를 들어,

+ +
fetch(myRequest).then(function(response) {
+    var contentType = response.headers.get('content-type');
+    if(contentType && contentType.includes('application/json')) {
+      return response.json();
+    }
+    throw new TypeError("Oops, we haven't got JSON!");
+  })
+  .then(function(json) { /* process your JSON further */ })
+  .catch(function(error) { console.log(error); });
+ +

가드

+ +

헤더는 리퀘스트를 송신할 수 있으며 리스폰스를 수신할 수 있습니다. 어떤 정보를 수정할 수 있게 하기 위해, 혹은 수정하기 위해 여러 종류의 제어가 가능합니다. 헤더는 guard 프로퍼티는 이것을 가능하게 합니다. 가드는 Request나 Response에 포함되지 않지만  헤더 객체에서 조작 가능한 여러 메서드들의 사용 가능 여부에 영향을 미칩니다.

+ +

가드의 설정값은 다음과 같습니다.

+ +
    +
  • none: 기본치
    • +
  • request: ({{domxref("Request.headers")}})에서 얻은 헤더 객체에 대한 가드
    • +
  • request-no-cors: {{domxref("Request.mode")}} no-cors에 생성된 ({{domxref("Request.headers")}})에서 사용할 수 있는 값만 헤더에 확보함
    • +
  • response: ({{domxref("Response.headers")}}) Response에서 얻은 객체애 대한 가드
    • +
  • immutable: 대개 ServiceWorker에서 사용됨. 헤더의 설정을 읽기 전용으로 바꿈.
    • +
+ +
+

메모: request에서 가드된 헤더의Content-Length 헤더는 추가나 변경할 수 없는 가능성이 있습니다.  마찬가지로 리스폰스 헤더에 Set-Cookie를 삽입하는것은 불가능합니다.ServiceWorker는 동기 Reponse를 추출하여 쿠키를 설정합니다.

+
+ +

Response 객체

+ +

위에서 본 바와 같이 {{domxref("Response")}} 인스턴스들은 fetch() promise가 resolve됬을때 반환됩니다.

+ +

아래는 어떤 리스폰스 객체라도 공통으로 사용되는 리스폰스 프로퍼티입니다.

+ +
    +
  • {{domxref("Response.status")}} — HTTP Status의 정수치, 기본값 200
    • +
  • {{domxref("Response.statusText")}} — HTTP Status 코드의 메서드와 일치하는 문자열, 기본값은 "OK"
    • +
  • {{domxref("Response.ok")}} 상술한 프로퍼티에서 사용한 HTTP Status 코드가 200에서 299중 하나임을 체크하는 값, {{domxref("Boolean")}}를 반환
    • +
+ +

Response 객체는 개발자의 손에 의해 동적으로 만드는것이 가능합니다. 이 방법은 {{domxref("ServiceWorker_API", "ServiceWorkers")}}내에서 활약할 때가 많습니다. 예를들어 Request를 획득했을 때  {{domxref("FetchEvent.respondWith","respondWith()")}}메서드에 의해 커스텀된 리스폰스를 반환하는 경우가 있습니다.

+ +
var myBody = new Blob();
+
+addEventListener('fetch', function(event) {
+  event.respondWith(
+    new Response(myBody, {
+      headers: { "Content-Type" : "text/plain" }
+    })
+  );
+});
+ +

{{domxref("Response.Response","Response()")}} 생성자는 파라미터로써 두개의 객체를 전달하는것이 가능합니다.첫번째는 Response Body, 두번째는 초기화 객체({{domxref("Request.Request","Request()")}}의 클론을 생성하는 방법과 비슷합니다.) 입니다.

+ +
    +
+ +
+

付記: 정적 메서드 {{domxref("Response.error","error()")}}는 단순한 에러 Response를 반환합니다. {{domxref("Response.redirect","redirect()")}} 메서드 또한 지정한 URL에 리다이렉트할 Response를 반환합니다. 이것들은 Service Workers에서만 사용되고 있습니다.

+
+ +

Body

+ +

Request, Response 둘다 Body를 가지고 있습니다. body는 아래에서 기술한 타입들 중 하나의 인스턴스입니다.

+ +
    +
  • {{domxref("ArrayBuffer")}}
    • +
  • {{domxref("ArrayBufferView")}} (Uint8Array같은 TypedArray)
    • +
  • {{domxref("Blob")}}/File
    • +
  • 문자열
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("FormData")}}
    • +
+ +

{{domxref("Body")}} 믹스인은 {{domxref("Request")}}나{{domxref("Response")}}에 구현되어, 콘텐츠를 추출하기 위해 아래의 메서드가 정의되어 있습니다. 이러한 메서드들은 전부 최종적으로 요청으로 반환된 값을 내장하고 있는 promise를 반환합니다.

+ +
    +
  • {{domxref("Body.arrayBuffer","arrayBuffer()")}}
    • +
  • {{domxref("Body.blob","blob()")}}
    • +
  • {{domxref("Body.json","json()")}}
    • +
  • {{domxref("Body.text","text()")}}
    • +
  • {{domxref("Body.formData","formData()")}}
    • +
+ +

이것들은 비 텍스트 데이터를 XHR보다 훨씬 간단하게 사용하는것을 도와줍니다.

+ +

Request 바디는 body 파라미터를 전달하는 것으로 설정할 수 있습니다.

+ +
var form = new FormData(document.getElementById('login-form'));
+fetch("/login", {
+  method: "POST",
+  body: form
+})
+ +

Both request and response (and by extension the fetch() function), will try to intelligently determine the content type. A request will also automatically set a Content-Type header if none is set in the dictionary.

+ +

Feature detection(특징 추출)

+ +

Fetch API support는{{domxref("Headers")}}, {{domxref("Request")}}, {{domxref("Response")}} or {{domxref("GlobalFetch.fetch","fetch()")}} on the {{domxref("Window")}} or {{domxref("Worker")}}로 존재여부를 확인함으로써 추출할 수 있습니다. 예를 들어:

+ +
if (window.fetch) {
+    // run my fetch request here
+} else {
+    // do something with XMLHttpRequest?
+ +

Polyfill

+ +

Fetch를 지원하지 않는 브라우저를 위해 미지원 브라우저를 위한 Fetch Polyfill이 지원되고 있습니다.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch')}}{{Spec2('Fetch')}}Initial definition
+ +

Browser compatibility

+ +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

관련항목

+ +
+ + + +

{{DefaultAPISidebar("Fetch API")}} 

diff --git a/files/ko/web/api/fullscreen_api/index.html b/files/ko/web/api/fullscreen_api/index.html new file mode 100644 index 0000000000..d7f561a95c --- /dev/null +++ b/files/ko/web/api/fullscreen_api/index.html @@ -0,0 +1,198 @@ +--- +title: Using fullscreen mode +slug: Web/Guide/DOM/Using_full_screen_mode +translation_of: Web/API/Fullscreen_API +--- +
{{DefaultAPISidebar("Fullscreen API")}}
+ +

Fullscreen API 는 특정 요소{{DOMxRef("Element")}}(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.

+ +

API 사용 방법에 대한 자세한 내용은 Guide to the Fullscreen API 문서를 참조하세요.

+ +
+

주의: 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 {{anch("Browser compatibility")}} 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, Fscreen 과 같은 라이브러리를 사용할 수 있습니다.

+
+ +

Interfaces

+ +

Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다.

+ +

Methods

+ +

Fullscreen API 는 {{DOMxRef("Document")}}, {{DOMxRef("Element")}} 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.

+ +

Methods on the Document interface

+ +
+
{{DOMxRef("Document.exitFullscreen()")}}
+
{{Glossary("user agent")}} 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 {{jsxref("Promise")}} resolved 를 반환합니다.
+
+ +

Methods on the Element interface

+ +
+
{{DOMxRef("Element.requestFullscreen()")}}
+
유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 {{jsxref("Promise")}} resolved를 반환합니다.
+
+ +

Properties

+ +

{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.

+ +
+
{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}
+
fullscreenElement 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소{{DOMxRef("Element")}}를 알려줍니다. 이것이 null인 경우, document는 full-screen mode가 아닙니다.
+
{{DOMxRef("Document.fullscreenEnabled")}}
+
fullscreenEnabled 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, "fullscreen" 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 false 입니다.
+
+ +

Event handlers

+ +

Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다.

+ +
+

주의: 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. 자바스크립트 코드로 추가해야만 합니다.

+
+ +

Event handlers on documents

+ +
+
{{DOMxRef("Document.onfullscreenchange")}}
+
문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.
+
{{DOMxRef("Document.onfullscreenerror")}}
+
전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.
+
+ +

Event handlers on elements

+ +
+
{{DOMxRef("Element.onfullscreenchange")}}
+
{{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.
+
{{DOMxRef("Element.onfullscreenerror")}}
+
full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.
+
+ +

Obsolete properties

+ +
+
{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}
+
문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 true, 그렇지 않으면 false의 Boolean 값입니다. +
주의: 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 null이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다.
+
+
+ +

Events

+ +

Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.

+ +
+
{{Event("fullscreenchange")}}
+
full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다.
+
{{Event("fullscreenerror")}}
+
full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 Document 또는 Element 로 보냅니다.
+
+ +

Dictionaries

+ +
+
{{DOMxRef("FullscreenOptions")}}
+
{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.
+
+ +

Controlling access

+ +

Feature Policy을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 "fullscreen"으로 식별되고, 기본 허용 목록 값은 "self" 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.

+ +

기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 Using Feature Policy을 참조하세요.

+ +

Usage notes

+ +

사용자는 ESC (혹은 F11) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.

+ +
+

주의: 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 Alt-Tab)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.

+
+ +

Example

+ +

이 예제에서는 비디오가 웹 페이지에 표시됩니다. Return 또는 Enter 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.

+ +

View Live Examples

+ +

Watching for the Enter key

+ +

페이지가 로드되면, 이 코드가 실행되어 Enter 키 를 주시하는 이벤트 리스너를 설정합니다.

+ +
document.addEventListener("keypress", function(e) {
+  if (e.keyCode === 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Toggling full-screen mode

+ +

이 코드는 사용자가 Enter 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+ +

먼저 {{DOMxRef("Document", "document")}}의 fullscreenElement 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, mozFullscreenElement, msFullscreenElement, webkitFullscreenElement)을 확인해야 합니다. 값이 null인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, {{HTMLElement("video")}}요소에서 {{DOMxRef("Element.requestFullscreen()")}}을 호출하여 수행합니다.

+ +

full-screen mode가 이미 활성화 된 경우(fullscreenElement 가 null이 아닌 경우), document에서 {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}}을 호출하여 full-screen mode를 종료합니다.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
+ +

Browser compatibility

+ +

Document.fullscreen

+ +
+ + +

{{Compat("api.Document.fullscreen")}}

+ +

Document.fullscreenEnabled

+ +
+ + +

{{Compat("api.Document.fullscreenEnabled")}}

+
+
+ +

See also

+ +
    +
  • Using full-screen mode
    • +
  • {{DOMxRef("Element.requestFullscreen()")}}
    • +
  • {{DOMxRef("Document.exitFullscreen()")}}
    • +
  • {{DOMxRef("Document.fullscreen")}}
    • +
  • {{DOMxRef("Document.fullscreenElement")}}
    • +
  • {{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}
    • +
  • {{HTMLAttrXRef("allowfullscreen", "iframe")}}
    • +
diff --git a/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html new file mode 100644 index 0000000000..e5f9913376 --- /dev/null +++ b/files/ko/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -0,0 +1,165 @@ +--- +title: Geolocation API 사용하기 +slug: WebAPI/Using_geolocation +tags: + - Geolocation API + - Guide + - Intermediate +translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API +--- +

{{securecontext_header}}{{APIRef("Geolocation API")}}
+ Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

+ +

geolocation 객체

+ +

Geolocation API는 {{domxref("navigator.geolocation")}} 객체를 통해 사용할 수 있습니다.

+ +

geolocation 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.

+ +
if('geolocation' in navigator) {
+  /* 위치정보 사용 가능 */
+} else {
+  /* 위치정보 사용 불가능 */
+}
+
+ +

현재 위치 가져오기

+ +

{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. getCurrentPosition()은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.

+ +
+

참고: {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}의 기본값에서는 최대한 빠르게 낮은 정밀도의 응답을 반환합니다. 정확하지 않더라도 빠른 정보가 필요한 상황에서 유용합니다. 예를 들어, GPS 기능을 가진 장비는 보정 과정에 수 분이 걸릴 수도 있으므로 IP 위치와 WiFi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있습니다.

+
+ +
navigator.geolocation.getCurrentPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

위의 예제는 사용자 위치가 확인되면 doSomething() 함수를 실행합니다.

+ +

현재 위치 추적하기

+ +

장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백 함수를 {{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드로 설정할 수 있으며, {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 같은 매개변수를 받습니다. 콜백은 계속해서 호출될 수 있으므로, 브라우저가 사용자의 이동 시, 또는 고정밀 위치 기술을 사용할 수 있는 시점에 새로운 위치 정보를 제공할 수 있습니다. getCurrentPosition()과 마찬가지로 선택 사항인 오류 콜백 역시 여러 번 호출할 수 있습니다.

+ +
+

참고: {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}을 먼저 호출하지 않고도 {{domxref("Geolocation.watchPosition", "watchPosition()")}}을 사용할 수 있습니다.

+
+ +
const watchID = navigator.geolocation.watchPosition((position) => {
+  doSomething(position.coords.latitude, position.coords.longitude);
+});
+ +

{{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드는 위치 추적 요청의 고유 식별자를 나타내는 숫자값을 반환합니다. 해당 식별자를 {{domxref("Geolocation.clearWatch","clearWatch()")}} 메서드에 전달해서 추적을 종료할 수 있습니다.

+ +
navigator.geolocation.clearWatch(watchID);
+
+ +

응답 미세 조정

+ +

{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition","watchPosition()")}} 둘 다 성공 콜백, 실패 콜백 외에도 PositionOptions 객체를 받을 수 있습니다.

+ +

PositionsOptions 객체를 사용하면 고정밀도 활성화 여부, 위치 정보의 캐시 수명(수명이 끝나기 전까지는 이전에 반환한 위치 정보를 저장해뒀다가, 같은 요청을 또 받을 경우 그대로 반환합니다), 그리고 위치 정보 요청의 응답을 대기할 최대 대기시간을 지정할 수 있습니다.

+ +

옵션 객체를 사용한 {{domxref("Geolocation.watchPosition","watchPosition")}}의 호출 예시는 다음과 같습니다.

+ +
function success(position) {
+  doSomething(position.coords.latitude, position.coords.longitude);
+}
+
+function error() {
+  alert('Sorry, no position available.');
+}
+
+const options = {
+  enableHighAccuracy: true,
+  maximumAge: 30000,
+  timeout: 27000
+};
+
+const watchID = navigator.geolocation.watchPosition(success, error, options);
+ +

위치 표현

+ +

사용자의 위치는 {{domxref("GeolocationPosition")}} 객체를 담은 {{domxref("GeolocationCoordinates")}} 객체를 사용하여 표현합니다.

+ +

GeolocationPosition은 단 두 가지만 가집니다. 하나는 GeolocationCoordinates 인스턴스를 가진 coords 속성이고, 다른 하나는 위치 정보의 기록 시점을 나타내는 {{domxref("DOMTimeStamp")}} 인스턴스입니다.

+ +

GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 latitude와 longitude입니다. 따라서 대부분의 Geolocation 성공 콜백은 아래와 같이 꽤 간단한 형태입니다.

+ +
function success(position) {
+  const latitude  = position.coords.latitude;
+  const longitude = position.coords.longitude;
+
+  // Do something with your latitude and longitude
+}
+ +

그러나 GeolocationCoordinates 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.

+ +

오류 처리

+ +

getCurrentPosition() 또는 watchPosition()에 오류 콜백을 제공한 경우, 콜백은 첫 번째 매개변수로 GeolocationPositionError 객체를 받습니다. 해당 객체는 오류의 유형을 나타내는 code 속성과, 사람이 읽을 수 있는 형태로 오류 코드의 뜻을 설명한 message 속성을 갖습니다.

+ +

다음 형태로 사용할 수 있습니다.

+ +
function errorCallback(error) {
+  alert(`ERROR(${error.code}): ${error.message}`);
+};
+ +

예제

+ +

다음 예제는 Geolocation API를 사용해 사용자의 위경도를 가져옵니다. 성공한 경우, 사용자의 위치를 가리키는 openstreetmap.org 링크를 생성해 하이퍼링크에 할당합니다.

+ + + +

HTML

+ +
<button id = "find-me">Show my location</button><br/>
+<p id = "status"></p>
+<a id = "map-link" target="_blank"></a>
+ +

JavaScript

+ +
function geoFindMe() {
+
+  const status = document.querySelector('#status');
+  const mapLink = document.querySelector('#map-link');
+
+  mapLink.href = '';
+  mapLink.textContent = '';
+
+  function success(position) {
+    const latitude  = position.coords.latitude;
+    const longitude = position.coords.longitude;
+
+    status.textContent = '';
+    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
+    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
+  }
+
+  function error() {
+    status.textContent = 'Unable to retrieve your location';
+  }
+
+  if(!navigator.geolocation) {
+    status.textContent = 'Geolocation is not supported by your browser';
+  } else {
+    status.textContent = 'Locating…';
+    navigator.geolocation.getCurrentPosition(success, error);
+  }
+
+}
+
+document.querySelector('#find-me').addEventListener('click', geoFindMe);
+ +

결과

+ +

{{EmbedLiveSample('예제', 350, 150)}}

diff --git a/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html new file mode 100644 index 0000000000..122e835b75 --- /dev/null +++ b/files/ko/web/api/html_drag_and_drop_api/drag_operations/index.html @@ -0,0 +1,343 @@ +--- +title: Drag Operations +slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations +translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations +--- +

{{DefaultAPISidebar("HTML Drag and Drop API")}}

+ +

다음은 드래그 & 드랍(drag & drop) 동작 실행 시 각 단계에 대한 설명입니다.

+ +

이 문서에 설명된 드래그 동작은 {{domxref("DataTransfer")}} 인터페이스를 사용합니다. 이 문서에서는 {{domxref("DataTransferItem")}} 인터페이스나 {{domxref("DataTransferItemList")}} 인터페이스를 사용하지 않습니다.

+ +

Draggable 속성

+ +

웹 페이지 안에서 특정 상황에 기본 드래그(default drag) 행위가 사용될 경우가 있습니다. 선택된 텍스트(text selections), 이미지 또는 링크가 여기에 포함됩니다. 이미지나 링크가 드래그될 때, 이미지나 링크의 URL이 드래그 데이터(drag data)로 설정되고 드래그가 시작됩니다. 다른 요소의 경우, 기본 드래그가 발생할 선택(selections)에 포함되어 있어야 합니다(For other elements, they must be part of a selection for a default drag to occur). 이 효과를 보기 위해서는 웹 페이지의 어떤 영역을 선택하고 마우스를 클릭한 채로 드래그하면 됩니다. 드래그가 발생할 때 마우스 포인터로 선택 영역에 대한 OS별 렌더링이 표시됩니다. 이 행위는 기본 드래그 행위인 경우에만 발생하는 것으로 드래그되는 데이터를 조정할 리스너가 없는 경우에는 작동하지 않습니다.

+ +

HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행위를 제외한 나머지 요소는 기본적으로 드래그되지 않습니다. XUL에서는 모든 요소가 드래그 가능합니다.

+ +

다른 HTML 요소를 드래그할 수 있게 하려면 세 가지가 이루어져야 합니다:

+ +
    +
  • 드래그가 가능하도록 만들고자 하는 요소에 대한 {{htmlattrxref("draggable")}} 속성이 true로 설정되어야 합니다.
    • +
  • {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.
    • +
  • 위에서 정의한 리스너에 {{domxref("DataTransfer.setData","Set the drag data")}}를 설정합니다.
    • +
+ +

컨텐츠의 일부 영역을 드래그할 수 있도록 만드는 예제는 다음과 같습니다.

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+  This text <strong>may</strong> be dragged.
+</div>
+
+ +

요소를 드래그할 수 있게 하기 위해서는 {{htmlattrxref("draggable")}} 속성이 true로 설정되어야 합니다. 이 속성이 생략되거나 false로 설정되면 해당 요소는 드래그할 수 없으며, 대신 텍스트가 선택됩니다. {{htmlattrxref("draggable")}} 속성은 이미지나 링크를 포함한 어떤 요소에서도 사용할 수 있습니다. 하지만, 이미지나 링크에 대해서는 기본값이 true로 설정되어 있으므로 이들 요소에 대해 드래깅할 수 없게 만들 경우에만 {{htmlattrxref("draggable")}} 속성의 값을 false로 설정하면 됩니다.

+ +

어떤 요소가 드래그 가능한 경우, 해당 요소 내의 텍스트나 다른 요소는 마우스를 클릭하고 드래그하는 통상적인 방식으로는 선택할 수 없게 됩니다. 대신, 사용자가 alt 키를 누른채로 마우스로 텍스트를 선택하거나 키보드를 이용해 선택할 수 있습니다.

+ +

XUL 요소에 대해서는 {{htmlattrxref("draggable")}} 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능합니다.

+ +
<button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');">
+
+ +

드래그 작업 시작

+ +

이 예제에서는 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 속성을 이용하여 {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.

+ +
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
+  This text <strong>may</strong> be dragged.
+</div>
+
+ +

사용자가 드래그를 시작할 때, {{event("dragstart")}} 이벤트가 발생합니다. 이 예제에서는 드래그할 요소에 {{event("dragstart")}} 리스너가 추가되었습니다; 하지만, 대부분의 다른 이벤트가 그렇듯이 상위 요소에서 드래그 이벤트를 포착할 수 있습니다. {{event("dragstart")}} 이벤트 내에서 아래에서 설명하는 바와 같이 피드백 이미지(feedback image)나 드래그 효과와 그리고 드래그 데이터를 명시할 수 있습니다. 기본 이미지나 드래그 효과는 대부분의 상황에 적합하게 되어 있으며, 드래그 데이터만 필요합니다.

+ +

데이터 드래그

+ +

모든 {{domxref("DragEvent","drag events")}}는 드래그 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}}라는 속성이 존재합니다 (dataTransfer는 {{domxref("DataTransfer")}} 객체입니다).

+ +

드래그가 발생할 때, 데이터는 어떤 것이 드래그되는지를 구분할 수 있는 드래그와 연관되어야 합니다(When a drag occurs, data must be associated with the drag which identifies what is being dragged). 예를 들어, 선택된 텍스트가 드래그될 경우 드래그 데이터 항목에 연관된 데이터는 텍스트 자체입니다. 이와 유사하게, 웹 페이지 상의 링크가 드래그될 경우에 드래그 데이터 항목은 링크의 URL이됩니다.

+ +

{{domxref("DataTransfer","drag data")}}는 두 가지 정보를 담고 있는데, 데이터의 유형(또는 형식)과 데이터 값입니다. 형식은 (텍스트 데이터에 해당하는 text/plain과 같은) 형식 문자열(type string) 값이고, 값은 텍스트의 문자열입니다. 드래그가 시작되면, 데이터와 형식을 제공하는 데이터를 추가해야 합니다. 드래그되는 동안, {{event("dragenter")}} 이벤트와 {{event("dragover")}} 이벤트에 대한 이벤트 리스너에서 드래그되는 데이터의 형식을 사용해 드랍이 허용되는지 확인할 수 있습니다. 예를 들어, 링크가 허용되는 드랍 대상(drop target)은 text/uri-list 형식의 링크인지 확인합니다. 드랍 이벤트 동안 리스너는 드래그 대상(being dragged)으로부터 데이터를 추출해 드랍되는 위치에 삽입합니다.

+ +

{{domxref("DataTransfer","drag data's")}}의 {{domxref("DataTransfer.types","types")}} 속성은 text/plain or image/jpeg과 같은 {{domxref("DOMString")}} MIME-type 목록을 반환홥니다. 여러분은 자신만의 형식을 만들 수도 있습니다. 가장 흔하게 사용되는 형식은 권장 드래그 데이터 형식(Recommended Drag Types)에서 소개하고 있습니다.

+ +

드래그에는 여러 가지 다른 형식의 데이터 항목이 포함될 수 있습니다. 이를 통해 사용자 정의 형식(custom types)과 같은 보다 특정한 형식의 데이터를 주로 제공하지만, 특정한 유형을 지원하지 않는 드롭 대상에 대해 대체 데이터(fallback data)를 제공할 수도 있습니다. text/plain 형식의 일반적인 텍스트 데이터가 가장 단순한 형식의 데이터일 것입니다.이 형식의 데이터는 단순히 텍스트 형식으로 표시될 것입니다.

+ +

{{domxref("DragEvent.dataTransfer","dataTransfer")}} 내에 드래그 데이터 항목(drag data item)을 설정하기 위해서는 {{domxref("DataTransfer.setData","setData()")}} 메서드를 이용합니다. 이 메서드는 각각 데이터 형식과 데이터 값인 두 개의 인자가 필요합니다. 예를 들어:

+ +
event.dataTransfer.setData("text/plain", "Text to drag");
+
+ +

이 경우, 데이터 값은 "Text to drag"이고 형식은 text/plain입니다.

+ +

여러 형식의 데이터를 제공할 수도 있습니다. 이를 위해서는 서로 다른 형식으로 {{domxref("DataTransfer.setData","setData()")}} 메서드를 여러 번 호출합니다. 이 때, 가장 세부적인 형식에서 덜 세부적인 형식의 순으로 호출해야 합니다.

+ +
var dt = event.dataTransfer;
+dt.setData("application/x-bookmark", bookmarkString);
+dt.setData("text/uri-list", "http://www.mozilla.org");
+dt.setData("text/plain", "http://www.mozilla.org");
+
+ +

여기서 데이터는 세가지 유형으로 추가됩니다. 첫번째 형식의 'application2x-bookmark'는 사용자 지정 형식입니다. 다른 응용 프로그램에서는 이 형식을 지원하지 않지만 동일한 사이트 또는 응용 프로그램의 영역 간 드래그할 경우, 이 사용자 지정 형식을 사용할 수 있습니다. 또한 다른 형식의 데이터를 제공함으로써 덜 세부적인 형태로 다른 애플리케이션으로의 드래그도 지원할 수 있습니다. 다른 형식이 하나의 URL또는 텍스트 형식만 제공할 때, 'application2x-bookmark' 형식은 해당 어플리케이션 내에서 사용될 경우 더 상세한 데이터를 제공할 수 있습니다

+ +

이 예제에서 text/uri-list와 text/plain은 동일한 데이터를 담고있음에 주목하시기 바랍니다. 이렇게 해도 되지만, 꼭 이럴 필요는 없습니다.

+ +

동일한 형식으로 데이터를 두 번 추가하려고 하면 새로운 데이터가 기존 데이터를 대체하지만 형식 목록 내에서 이전 데이터(old data)와 같은 위치에 있게 됩니다.

+ +

{{domxref("DataTransfer.clearData","clearData()")}} 메서드를 이용해 해당 데이터를 지울 수 있는데, 이 메서드는 지우고자 하는 데이터의 형식을 인자로 가집니다.

+ +
event.dataTransfer.clearData("text/uri-list");
+
+ +

{{domxref("DataTransfer.clearData","clearData()")}} 메서드에 대한 형식 인자는 선택적입니다. 형식을 지정하지 않으면 모든 형식과 연관된 데이터가 지워집니다. 드래그할 때, 드래그 데이터 항목이 없거나 이후에 모든 항목이 삭제되면 드래그가 발생하지 않습니다.

+ +

드래그 피드백 이미지 설정

+ +

드래그가 발생할 때, 드래그 대상("{{event("dragstart")}}" 이벤트가 발생한 요소)으로부터 반투명한 이미지가 생성되고 드래그 하는 동안 마우스 포인터를 따라 움직입니다. 이 이미지는 자동으로 생성되며, 따로 생성할 필요가 없습니다. 하지만, {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 이용해 사용자 정의 드래그 피드백 이미지를 지정할 수 있습니다.

+ +
event.dataTransfer.setDragImage(image, xOffset, yOffset);
+
+ +

세 개의 인자는 필수입니다. 첫 번째 인자는 이미지에 대한 참조(reference)입니다. 이 참조는 일반적으로 이미지에 대한 참조이나 캔버스(canvas)나 다른 요소를 지정할 수도 있습니다. 피드백 이미지는 단순하게 화면에 표시된 이미지의 모양으로부터 생성되지만, 이미지의 경우 원래 크기로 그려집니다. {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드의 두 번째와 세 번째 인자는 마우스 포인터에 대해 상대적인 옵셋(offsets)으로 이미지가 나타날 위치를 의미합니다.

+ +

문서 내에 있지 않은 이미지나 캔버스를 사용하는 것 역시 가능합니다. 이 기법은 다음의 예제와 같이 캔버스 요소를 이용해 드래그 이미지를 사용자 정의 형태로 그리고자 할 때 유용합니다:

+ +
function dragWithCustomImage(event) {
+  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
+  canvas.width = canvas.height = 50;
+
+  var ctx = canvas.getContext("2d");
+  ctx.lineWidth = 4;
+  ctx.moveTo(0, 0);
+  ctx.lineTo(50, 50);
+  ctx.moveTo(0, 50);
+  ctx.lineTo(50, 0);
+  ctx.stroke();
+
+  var dt = event.dataTransfer;
+  dt.setData('text/plain', 'Data to Drag');
+  dt.setDragImage(canvas, 25, 25);
+}
+
+ +

이 예제에서, 드래그 이미지를 표시할 캔버스를 하나 생성합니다. 캔버스는 너비가 와 높이가 모두 50 픽셀이고, 마우스 포인터가 이미지의 중앙에 위치하도록 옵셋(offsets)을 너비와 높이의 절반(25)으로 설정했습니다.

+ +

{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}

+ +

Gecko 개발자일 경우 (Mozilla 어플리케이션 개발자든 add-on 개발자든 상관 없이), Gecko 9.0 {{geckoRelease("9.0")}}에 드래그 피드백 이미지로 XUL {{XULElem("panel")}} 요소를 사용할 수 있도록 하는 지원이 추가되었습니다. 간단히 {{XULElem("panel")}} 요소를 {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드로 전달하기만 하면 됩니다.

+ +

다음 XUL {{XULElem("panel")}}를 살펴보시기 바랍니다:

+ +
<panel id="panel" style="opacity: 0.6">
+  <description id="pb">Drag Me</description>
+</panel>
+
+<vbox align="start" style="border: 1px solid black;" ondragstart="startDrag(event)">
+  <description>Drag Me</description>
+</vbox>
+
+ +

위의 예에서 사용자가 {{XULElem("vbox")}}를 클릭하고 드래그하기 시작하면, 아래의 startDrag() 함수가 호출됩니다.

+ +
function startDrag(event) {
+  event.dataTransfer.setData("text/plain", "<strong>Body</strong>");
+  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
+}
+
+ +

이 함수는 해당 패널을 드래그 이미지로 사용하고, HTML 형식의 "<strong>Body</strong>"을 데이터로 가집니다. 텍스트 편집기에 패널을 드랍하면 "Body"라는 텍스트가 드랍된 위치에 삽입됩니다.

+ +

드래그 효과

+ +

드래그할 때, 여러 가지 작업이 수행될 수 있습니다. copy 작업은 드래그되는 데이터가 현재 위치에서 드랍되는 위치로 복사될 것임을 나타냅니다. move 작업은 드래그되는 데이터가 이동될 것임을 나타내고, link 작업은 특정 형태의 관계(relationship)나 연결(connection)이 소스와 드랍되는 위치 사이에 생성될 것임을 나타냅니다.

+ +

드래그 소스(drag source)에 대해 {{event("dragstart")}} 이벤트 리스너의 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 설정함으로써, 이 세 가지 작업 중 어떤 것을 허용할 것인지를 지정할 수 있습니다.

+ +
event.dataTransfer.effectAllowed = "copy";
+
+ +

이 예제에서는, 복사만 허용됩니다. 다양한 방식으로 값을 조합할 수 있습니다:

+ +
+
none
+
어떤 작업도 허용하지 않음.
+
copy
+
복사만 허용
+
move
+
이동만 허용
+
link
+
연결만 허용
+
copyMove
+
복사 또는 이동만 허용
+
copyLink
+
복사 또는 연결만 허용
+
linkMove
+
연결 또는 이동만 허용
+
all
+
복사, 이동 및 연결 모두 허용
+
+ +

이 값들은 반드시 위에 나열한 것과 정확하게 일치해야 함에 유의하시기 바랍니다. 예를 들어, {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 copyMove로 설정하면 복사와 이동 작업이 허용되나 연결(link) 작업은 금지됩니다. {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 변경하지 않으면 'all' 값과 마찬가지로 어떤 작업도 허용됩니다. 따라서, 특정한 유형의 작업을 제외시키고 싶지 않다면 이 속성을 조정할 필요가 없습니다.

+ +

드래그 작업 중에 {{event("dragenter")}} 또는 {{event("dragover")}} 이벤트에 대한 리스너는 어떤 작업이 허용되어 있는지 알기 위해 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 확인할 수 있습니다. 관련된 속성으로, {{domxref("DataTransfer.dropEffect","dropEffect")}}는 이들 이벤트 중 하나에서 수행되어야 하는 단일 작업을 지정하기 위해 설정되어야 할 속성입니다. {{domxref("DataTransfer.dropEffect","dropEffect")}}에 유효한 값은 none, copy, move, 또는 link입니다. 이 속성에 값의 조합은 허용되지 않습니다.

+ +

{{event("dragenter")}}나 {{event("dragover")}} 이벤트가 발생하면 사용자가 요청하는 효과로 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성이 초기화됩니다. 사용자는 한정자 키를 눌러 원하는 효과로 수정할 수 있습니다. 플랫폼에 따라 정확한 키가 달라질 수 있지만, 일반적으로 쉬프트(Shift)와 컨트롤(Control) 키가 복사하기, 이동하기, 연결하기 간 전환에 사용됩니다. 마우스 포인터를 원하는 작업을 나타내도록 변경할 수 있습니다; 예를 들어, 복사 작업에 대해서는 마우스 포인터 옆에 더하기 기호가 표시된 커서가 나타날 수 있습니다.

+ +

{{event("dragenter")}} 또는 {{event("dragover")}} 이벤트가 발생하는 동안 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 변경할 수 있는데, 예를 들자면, 특정 작업만 지원되는 특수한 드랍 대상(drop target)일 경우가 그렇습니다. {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 수정하여 사용자 효과(user effect)를 오버라이드하여 특정한 드랍 작업이 발생하게 할 수 있습니다. 이 효과는 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성에 열거된 것 중의 하나 이어야 함에 유의하시기 바랍니다. 그렇지 않을 경우, 허용되는 대체 값으로 설정되게 됩니다.

+ +
event.dataTransfer.dropEffect = "copy";
+
+ +

이 예제에서는 복사가 수행될 효과입니다.

+ +

이 경우에는 이벤트를 취소하지 않는 것이 좋지만 none 값을 사용하여 이 위치에서 드롭이 허용되지 않음을 나타낼 수 있습니다.

+ +

{{event("drop")}}와 {{event("dragend")}} 이벤트 내에서{{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 확인하면 최종적으로 어떤 효과가 선택되었는지를 알 수 있습니다. 선택된 효과가 "move"였다면, {{event("dragend")}} 이벤트 내에서 드래그 소스의 원본 데이터가 삭제되어야 합니다.

+ +

드랍 대상 지정하기

+ +

{{event("dragenter")}}와 {{event("dragover")}} 이벤트에 대한 리스너는 유효한 드랍 대상인지, 즉 드래그된 아이템이 드랍될 수 있는 곳인지를 나타내는데 사용할 수 있습니다. 웹 페이지 또는 어플리케이션의 대부분의 영역은 데이터를 드랍할 수 있는 유효한 영역이 아닙니다. 따라서, 이들 이벤트에 대한 기본적인 처리는 드랍을 허용하지 않는 것입니다.

+ +

드랍을 허용하길 원한다면, 해당 이벤트를 취소하는 기본 처리를 막아야 합니다. 속성 정의(attribute-defined) 이벤트 리스너로부터 false를 반환 받거나 해당 이벤트의 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하면 됩니다. 후자는 별도의 스크립트에 정의된 함수에 더 적합합니다.

+ +
<div ondragover="return false">
+<div ondragover="event.preventDefault()">
+
+ +

{{event("dragenter")}} and {{event("dragover")}} 두 이벤트 모두에서 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하는 것은 그 위치에 드랍이 허용되는 것을 나타냅니다. 하지만, 일반적으로 특정한 상황에서만, 예를 들자면 링크가 드래그될 때만 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하길 원할 것입니다. 이렇게 하기 위해서는 조건을 확인하여 조건이 충족될 때에만 해당 이벤트를 취소하는 함수를 호출합니다. 조건이 충족되지 않을 경우, 이벤트를 취소하지 않으면 사용자가 마우스 버튼을 놓더라도 드랍은 발생하지 않을 것입니다.

+ +

data transfer의 드래그 데이터 형식에 따라 드랍을 허용하거나 기각하는 경우가 대부분일 것입니다(예를 들어, 이미지나 링크를 허용하거나 둘 다 허용하는 경우). 이렇게 하기 위해서는 이벤트의 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 속성의 {{domxref("DataTransfer.types","types")}} 속성을 확인합니다. {{domxref("DataTransfer.types","types")}} 속성은 드래그가 시작될 때 추가된 형식 문자열의 배열을 반환하는데, 그 순서는 가장 세부적인 형식에서 가장 덜 세부적인 형식의 순서입니다.

+ +
function contains(list, value) {
+    for( var i = 0; i < list.length; ++i ) {
+        if(list[i] === value) return true;
+    }
+    return false;
+}
+
+function doDragOver(event) {
+  var isLink = contains( event.dataTransfer.types, "text/uri-list");
+  if (isLink) {
+    event.preventDefault();
+  }
+}
+ +

이 예제에서 형식 목록 내에 text/uri-list 형식이 존재하는지 확인하기 위해 contains 메서드를사용합니다. 존재할 경우에는 드랍을 허용하기 위해 이벤트가 취소될 것입니다. 드래그 데이터가 링크를 포함하지 않았다면, 해당 이벤트는 취소되지 않을 것이고 그 위치에 대한 드랍이 발생하지 않을 것입니다.

+ +

수행되어야 하는 작업 형식을 더 세부적으로 설정하길 원한다면, {{domxref("DataTransfer.effectAllowed","effectAllowed")}}나 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 각각 설정하거나 동시에 둘 다를 설정하고 싶을 것입니다. 두 속성을 변경하더라도 해당 이벤트를 취소하지 않으면 아무런 영향이 없을 것입니다.

+ +

Updates to DataTransfer.types

+ +

최신 스펙에는 {{domxref("DataTransfer.types")}}이 {{domxref("DOMStringList")}}(이 속성은 Fiirefox 52 이상에서 지원됨)이 아닌 {{domxref("DOMString")}} 형식의 고정배열(fronzen array)을 반환하도록 명시하고 있음에 유의하시기 바랍니다.

+ +

그 결과로, contains 메서드는 해당 속성에 대해 더 이상 동작하지 않으며; 특정 형식의 데이터가 제공되는지 확인하기 위해서는 다음 코드와 같이 includes 메서드를 사용해야 합니다:

+ +
if ([...event.dataTransfer.types].includes('text/html')) {
+  // Do something
+}
+ +

일부 특성 검출(feature detection)을 이용해 types에 대해 어떤 메서드가 지원되는지를 판별하고 적절하게 코드를 실행할 수 있습니다.

+ +

Drop Feedback

+ +

There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property. Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.

+ +

However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the -moz-drag-over CSS pseudoclass on a drop target.

+ +
.droparea:-moz-drag-over {
+  border: 1px solid black;
+}
+
+ +

In this example, the element with the class droparea will receive a 1 pixel black border while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the {{event("dragenter")}} event. Note that you must cancel the {{event("dragenter")}} event for this pseudoclass to apply, as this state is not checked for the {{event("dragover")}} event.

+ +

For more complex visual effects, you can also perform other operations during the {{event("dragenter")}} event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an image or separator element, for example, and simply insert it into the document during the {{event("dragenter")}} event.

+ +

The {{event("dragover")}} event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a {{event("dragover")}} event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.

+ +

Finally, the {{event("dragleave")}} event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the -moz-drag-over pseudoclass will be removed automatically. The {{event("dragleave")}} event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

+ +

Performing a Drop

+ +

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last {{event("dragenter")}} or {{event("dragover")}} event, and then the drop will be successful, and a {{event("drop")}} event will fire at the target. Otherwise, the drag operation is cancelled, and no {{event("drop")}} event is fired.

+ +

During the {{event("drop")}} event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.

+ +

As with all drag-related events, the event's {{domxref("DataTransfer","dataTransfer")}} property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.

+ +
function onDrop(event) {
+  var data = event.dataTransfer.getData("text/plain");
+  event.target.textContent = data;
+  event.preventDefault();
+}
+
+ +

The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a {{event("dragover")}} event.

+ +

In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

+ +

In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop so that the default browser handling does not handle the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

+ +

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

+ +
function doDrop(event) {
+  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
+  for (let line of lines) {
+    if (line.startsWith("#"))
+      continue;
+
+    let link = document.createElement("a");
+    link.href = line;
+    link.textContent = line;
+    event.target.appendChild(link);
+  }
+  event.preventDefault();
+}
+
+ +

This example inserts a link from the dragged data. As you might be able to guess from the name, the text/uri-list type actually may contain a list of URLs, each on a separate line. In this code, we use the split to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.

+ +

For simple cases, you can use the special type URL just to retrieve the first valid URL in the list. For example:

+ +
var link = event.dataTransfer.getData("URL");
+
+ +

This eliminates the need to check for comments or iterate through lines yourself; however, it is limited to only the first URL in the list.

+ +

The URL type is a special type used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.

+ +

Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are supported by a drop target.

+ +

The following example returns the data associated with the best-supported format:

+ +
function doDrop(event) {
+  var types = event.dataTransfer.types;
+  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
+  types = supportedTypes.filter((value) => types.includes(value));
+  if (types.length)
+    var data = event.dataTransfer.getData(types[0]);
+  event.preventDefault();
+}
+
+ +

This method relies on JavaScript functionality available in Firefox 3. However, the code could be adjusted to support other platforms.

+ +

Finishing a Drag

+ +

Once the drag is complete, a {{event("dragend")}} event is fired at the source of the drag (the same element that received the {{event("dragstart")}} event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine what drop operation occurred.

+ +

If the {{domxref("DataTransfer.dropEffect","dropEffect")}} property has the value none during a {{event("dragend")}}, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.

+ +

A drop can occur inside the same window or over another application. The {{event("dragend")}} event will always fire regardless. The event's {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}} properties will be set to the screen coordinate where the drop occurred.

+ +

After the {{event("dragend")}} event has finished propagating, the drag and drop operation is complete.

+ +

[1] In Gecko, {{event("dragend")}} is not dispatched if the source node is moved or removed during the drag (e.g. on drop or {{event("dragover")}}).  bug 460801

+ +

See also

+ + diff --git a/files/ko/web/api/html_drag_and_drop_api/index.html b/files/ko/web/api/html_drag_and_drop_api/index.html new file mode 100644 index 0000000000..70a4295284 --- /dev/null +++ b/files/ko/web/api/html_drag_and_drop_api/index.html @@ -0,0 +1,303 @@ +--- +title: HTML 드래그 앤 드롭 API +slug: Web/API/HTML_드래그_앤_드롭_API +tags: + - HTML5 + - XUL + - 가이드 + - 개요 + - 고급 + - 드래그 앤 드롭 + - 이벤트 +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}

+ +

HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppable 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.

+ +

웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.

+ +

이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.

+ +

드래그 이벤트

+ +

HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 {{domxref("DragEvent","drag events")}} 를  {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}).

+ +

모든 드래그 이벤트는 글로벌 이벤트 핸들러와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이벤트이벤트 핸들러설명
{{domxref('Document/drag_이벤트', 'drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}요소나 텍스트 블록을 드래그 할 때 발생한다.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}} +

드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (드래그 끝내기를 보시오)

+
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} +

드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (드롭 대상 지정하기를 보시오.)

+
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} +

요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.

+
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} +

드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.

+
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}} +

요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)

+
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} +

사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (드래그 시작하기를 보시오.)

+
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}} +

요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (드롭하기를 보시오.)

+
+ +

참고: dragstart와 dragend 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.

+ +

인터페이스

+ +

HTML 드래그와 드롭 인터페이스는 {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}}, {{domxref("DataTransferItemList")}} 입니다.

+ +

{{domxref("DataTransfer")}} 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. {{domxref("DataTransfer")}} 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The {{domxref("DragEvent")}} 와 {{domxref("DataTransfer")}} 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 파이어폭스는 {{domxref("DataTransfer")}}에 {{anch("Gecko specific interfaces","Gecko-specific extensions")}} 와 같은 파이어폭스에서만 동작하는 추가적인 확장을 제공합니다. 

+ +

{{domxref("DataTransfer")}}는 {{domxref("DataTransferItem")}}의 {{domxref("DataTransferItemList","목록")}} 인 {{domxref("DataTransfer.items","items")}} 프로퍼티를 가지고 있습니다. 각 {{domxref("DataTransferItem")}} 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (string 혹은 file) 를 나타내는 {{domxref("DataTransferItem.kind","kind")}} 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 {{domxref("DataTransferItem.type","type")}} 프로퍼티를 가집니다. {{domxref("DataTransferItem")}}은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.

+ +

{{domxref("DataTransferItemList")}} 객체는 {{domxref("DataTransferItem")}}의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.

+ +

A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTransferItem")}} interfaces is that the former uses the synchronous {{domxref("DataTransfer.getData","getData()")}} method to access a drag item's data, whereas the later uses the asynchronous {{domxref("DataTransferItem.getAsString","getAsString()")}} method to access a drag item's data.

+ +

{{domxref("DataTransfer")}}와 {{domxref("DataTransferItem")}}의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 {{domxref("DataTransfer.getData","getData()")}}를 사용하는데 반해, 후자는 비동기 메소드인 {{domxref("DataTransferItem.getAsString","getAsString()")}}를 사용한다는 점입니다.

+ +

참고: {{domxref("DragEvent")}} and {{domxref("DataTransfer")}}는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 {{domxref("DataTransferItem")}}와 {{domxref("DataTransferItemList")}}는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 {{anch("Interoperability")}}를 보십시오.

+ +

Gecko 한정 인터페이스

+ +

모질라와 파이어폭스는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, Dragging and Dropping Multiple Items을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 {{domxref("DataTransfer")}} 참조 페이지도 보시기 바랍니다.

+ +

기본

+ +

이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.

+ +

어떤 것이 draggable인지 확인하기

+ +

하나의 요소를 draggable로 만들기 위해서는 {{htmlattrxref("draggable")}}와 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.

+ +
function dragstart_handler(ev) {
+ console.log("dragStart");
+ // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+ ev.dataTransfer.setData("text/plain", ev.target.id);
+}
+
+
+ +
<script>
+  function dragstart_handler(ev) {
+    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+    ev.dataTransfer.setData("text/plain", ev.target.id);
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    // id를 통해 element를 가져옵니다.
+    const element = document.getElementById("p1");
+    // 'dragstart' 이벤트 리스터를 추가합니다.
+    element.addEventListener("dragstart", dragstart_handler);
+  });
+</script>
+
+<p id="p1" draggable="true">This element is draggable.</p>
+ +

추가 정보를 위해 draggable attribute reference와 Drag operations guide를 참고하세요.

+ +

드래그 데이터 정의하기

+ +

드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 type의 {{domxref("DOMString","문자열")}}이며, 보통 text/html와 같은 MIME type입니다.

+ +

각 {{domxref("DragEvent","drag event")}} 은 이벤트 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 를 가집니다. 이 프로퍼티는 ({{domxref("DataTransfer")}} 객체) 드래그 데이터를 관리하는 메소드를 가집니다. {{domxref("DataTransfer.setData","setData()")}} 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.

+ +
function dragstart_handler(ev) {
+  // 드래그 데이터를 추가합니다.
+  ev.dataTransfer.setData("text/plain", ev.target.id);
+  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
+  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
+}
+
+ +

드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, Recommended Drag Types를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 Drag Data를 참고하십시오.

+ +

드래그 이미지 정의하기

+ +

브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 사용할 수 있습니다.

+ +
function dragstart_handler(ev) {
+  // 드래그 이미지로 사용할 이미지를 만듭니다.
+  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
+  var img = new Image();
+  img.src = 'example.gif';
+  ev.dataTransfer.setDragImage(img, 10, 10);
+}
+
+ +

드래그 이미지에 대해 더 알아보려면, Setting the Drag Feedback Image를 참고하세요.

+ +

드래그 효과 정의하기

+ +

{{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.

+ +

세 개의 효과가 정의되어 있습니다:

+ +

copy는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.

+ +

move는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.

+ +

link는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.

+ +

특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.

+ +

다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.

+ +
function dragstart_handler(ev) {
+  // 드래그 효과를 copy로 지정합니다.
+  ev.dataTransfer.dropEffect = "copy";
+}
+
+ +

더 자세한 설명은 Drag Effects를 참고하세요.

+ +

드롭 지역 정의하기

+ +

기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}와 {{domxref("GlobalEventHandlers.ondrop","ondrop")}} 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.

+ +
<script>
+function dragover_handler(ev) {
+ ev.preventDefault();
+ // dropEffect를 move로 설정.
+ ev.dataTransfer.dropEffect = "move";
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
+ const data = ev.dataTransfer.getData("text/plain");
+ ev.target.appendChild(document.getElementById(data));
+}
+</script>
+
+<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
+ +

각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.

+ +

추가적인 정보는, Specifying Drop Targets를 참고하세요.

+ +

드롭 효과 다루기

+ +

{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.

+ +

아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.

+ +
<script>
+function dragstart_handler(ev) {
+ // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
+ ev.dataTransfer.setData("application/my-app", ev.target.id);
+ ev.dataTransfer.dropEffect = "move";
+}
+function dragover_handler(ev) {
+ ev.preventDefault();
+ ev.dataTransfer.dropEffect = "move"
+}
+function drop_handler(ev) {
+ ev.preventDefault();
+ // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
+ // Get the id of the target and add the moved element to the target's DOM
+ const data = ev.dataTransfer.getData("application/my-app");
+ ev.target.appendChild(document.getElementById(data));
+}
+</script>
+
+<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
+<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
+ +

더 많은 정보를 위해 Performing a Drop을 보십시오.

+ +

드래그가 끝나면

+ +

드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.

+ +

드래그 끝을 다루기 위한 더 많은 정보는 Finishing a Drag를 참고하세요. 

+ +

상호 운용성

+ +

DataTransferItem interface's Browser Compatibility table에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 ({{domxref("DataTransferItem")}}는 {{domxref("DataTransferItemList")}} 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.

+ +

예제와 데모

+ + + +

명세서 

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dnd")}}{{Spec2('HTML WHATWG')}}
+ +

더보기

+ + diff --git "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" "b/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" deleted file mode 100644 index 122e835b75..0000000000 --- "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/drag_operations/index.html" +++ /dev/null @@ -1,343 +0,0 @@ ---- -title: Drag Operations -slug: Web/API/HTML_드래그_앤_드롭_API/Drag_operations -translation_of: Web/API/HTML_Drag_and_Drop_API/Drag_operations ---- -

{{DefaultAPISidebar("HTML Drag and Drop API")}}

- -

다음은 드래그 & 드랍(drag & drop) 동작 실행 시 각 단계에 대한 설명입니다.

- -

이 문서에 설명된 드래그 동작은 {{domxref("DataTransfer")}} 인터페이스를 사용합니다. 이 문서에서는 {{domxref("DataTransferItem")}} 인터페이스나 {{domxref("DataTransferItemList")}} 인터페이스를 사용하지 않습니다.

- -

Draggable 속성

- -

웹 페이지 안에서 특정 상황에 기본 드래그(default drag) 행위가 사용될 경우가 있습니다. 선택된 텍스트(text selections), 이미지 또는 링크가 여기에 포함됩니다. 이미지나 링크가 드래그될 때, 이미지나 링크의 URL이 드래그 데이터(drag data)로 설정되고 드래그가 시작됩니다. 다른 요소의 경우, 기본 드래그가 발생할 선택(selections)에 포함되어 있어야 합니다(For other elements, they must be part of a selection for a default drag to occur). 이 효과를 보기 위해서는 웹 페이지의 어떤 영역을 선택하고 마우스를 클릭한 채로 드래그하면 됩니다. 드래그가 발생할 때 마우스 포인터로 선택 영역에 대한 OS별 렌더링이 표시됩니다. 이 행위는 기본 드래그 행위인 경우에만 발생하는 것으로 드래그되는 데이터를 조정할 리스너가 없는 경우에는 작동하지 않습니다.

- -

HTML에서 이미지나 링크 그리고 선택(selections)에 대한 기본 행위를 제외한 나머지 요소는 기본적으로 드래그되지 않습니다. XUL에서는 모든 요소가 드래그 가능합니다.

- -

다른 HTML 요소를 드래그할 수 있게 하려면 세 가지가 이루어져야 합니다:

- -
    -
  • 드래그가 가능하도록 만들고자 하는 요소에 대한 {{htmlattrxref("draggable")}} 속성이 true로 설정되어야 합니다.
    • -
  • {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.
    • -
  • 위에서 정의한 리스너에 {{domxref("DataTransfer.setData","Set the drag data")}}를 설정합니다.
    • -
- -

컨텐츠의 일부 영역을 드래그할 수 있도록 만드는 예제는 다음과 같습니다.

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
-  This text <strong>may</strong> be dragged.
-</div>
-
- -

요소를 드래그할 수 있게 하기 위해서는 {{htmlattrxref("draggable")}} 속성이 true로 설정되어야 합니다. 이 속성이 생략되거나 false로 설정되면 해당 요소는 드래그할 수 없으며, 대신 텍스트가 선택됩니다. {{htmlattrxref("draggable")}} 속성은 이미지나 링크를 포함한 어떤 요소에서도 사용할 수 있습니다. 하지만, 이미지나 링크에 대해서는 기본값이 true로 설정되어 있으므로 이들 요소에 대해 드래깅할 수 없게 만들 경우에만 {{htmlattrxref("draggable")}} 속성의 값을 false로 설정하면 됩니다.

- -

어떤 요소가 드래그 가능한 경우, 해당 요소 내의 텍스트나 다른 요소는 마우스를 클릭하고 드래그하는 통상적인 방식으로는 선택할 수 없게 됩니다. 대신, 사용자가 alt 키를 누른채로 마우스로 텍스트를 선택하거나 키보드를 이용해 선택할 수 있습니다.

- -

XUL 요소에 대해서는 {{htmlattrxref("draggable")}} 속성을 사용할 필요가 없으며, 모든 XUL 요소는 드래그가 가능합니다.

- -
<button label="Drag Me" ondragstart="event.dataTransfer.setData('text/plain', 'Drag Me Button');">
-
- -

드래그 작업 시작

- -

이 예제에서는 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 속성을 이용하여 {{event("dragstart")}} 이벤트에 대한 리스너를 추가합니다.

- -
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'This text may be dragged')">
-  This text <strong>may</strong> be dragged.
-</div>
-
- -

사용자가 드래그를 시작할 때, {{event("dragstart")}} 이벤트가 발생합니다. 이 예제에서는 드래그할 요소에 {{event("dragstart")}} 리스너가 추가되었습니다; 하지만, 대부분의 다른 이벤트가 그렇듯이 상위 요소에서 드래그 이벤트를 포착할 수 있습니다. {{event("dragstart")}} 이벤트 내에서 아래에서 설명하는 바와 같이 피드백 이미지(feedback image)나 드래그 효과와 그리고 드래그 데이터를 명시할 수 있습니다. 기본 이미지나 드래그 효과는 대부분의 상황에 적합하게 되어 있으며, 드래그 데이터만 필요합니다.

- -

데이터 드래그

- -

모든 {{domxref("DragEvent","drag events")}}는 드래그 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}}라는 속성이 존재합니다 (dataTransfer는 {{domxref("DataTransfer")}} 객체입니다).

- -

드래그가 발생할 때, 데이터는 어떤 것이 드래그되는지를 구분할 수 있는 드래그와 연관되어야 합니다(When a drag occurs, data must be associated with the drag which identifies what is being dragged). 예를 들어, 선택된 텍스트가 드래그될 경우 드래그 데이터 항목에 연관된 데이터는 텍스트 자체입니다. 이와 유사하게, 웹 페이지 상의 링크가 드래그될 경우에 드래그 데이터 항목은 링크의 URL이됩니다.

- -

{{domxref("DataTransfer","drag data")}}는 두 가지 정보를 담고 있는데, 데이터의 유형(또는 형식)과 데이터 값입니다. 형식은 (텍스트 데이터에 해당하는 text/plain과 같은) 형식 문자열(type string) 값이고, 값은 텍스트의 문자열입니다. 드래그가 시작되면, 데이터와 형식을 제공하는 데이터를 추가해야 합니다. 드래그되는 동안, {{event("dragenter")}} 이벤트와 {{event("dragover")}} 이벤트에 대한 이벤트 리스너에서 드래그되는 데이터의 형식을 사용해 드랍이 허용되는지 확인할 수 있습니다. 예를 들어, 링크가 허용되는 드랍 대상(drop target)은 text/uri-list 형식의 링크인지 확인합니다. 드랍 이벤트 동안 리스너는 드래그 대상(being dragged)으로부터 데이터를 추출해 드랍되는 위치에 삽입합니다.

- -

{{domxref("DataTransfer","drag data's")}}의 {{domxref("DataTransfer.types","types")}} 속성은 text/plain or image/jpeg과 같은 {{domxref("DOMString")}} MIME-type 목록을 반환홥니다. 여러분은 자신만의 형식을 만들 수도 있습니다. 가장 흔하게 사용되는 형식은 권장 드래그 데이터 형식(Recommended Drag Types)에서 소개하고 있습니다.

- -

드래그에는 여러 가지 다른 형식의 데이터 항목이 포함될 수 있습니다. 이를 통해 사용자 정의 형식(custom types)과 같은 보다 특정한 형식의 데이터를 주로 제공하지만, 특정한 유형을 지원하지 않는 드롭 대상에 대해 대체 데이터(fallback data)를 제공할 수도 있습니다. text/plain 형식의 일반적인 텍스트 데이터가 가장 단순한 형식의 데이터일 것입니다.이 형식의 데이터는 단순히 텍스트 형식으로 표시될 것입니다.

- -

{{domxref("DragEvent.dataTransfer","dataTransfer")}} 내에 드래그 데이터 항목(drag data item)을 설정하기 위해서는 {{domxref("DataTransfer.setData","setData()")}} 메서드를 이용합니다. 이 메서드는 각각 데이터 형식과 데이터 값인 두 개의 인자가 필요합니다. 예를 들어:

- -
event.dataTransfer.setData("text/plain", "Text to drag");
-
- -

이 경우, 데이터 값은 "Text to drag"이고 형식은 text/plain입니다.

- -

여러 형식의 데이터를 제공할 수도 있습니다. 이를 위해서는 서로 다른 형식으로 {{domxref("DataTransfer.setData","setData()")}} 메서드를 여러 번 호출합니다. 이 때, 가장 세부적인 형식에서 덜 세부적인 형식의 순으로 호출해야 합니다.

- -
var dt = event.dataTransfer;
-dt.setData("application/x-bookmark", bookmarkString);
-dt.setData("text/uri-list", "http://www.mozilla.org");
-dt.setData("text/plain", "http://www.mozilla.org");
-
- -

여기서 데이터는 세가지 유형으로 추가됩니다. 첫번째 형식의 'application2x-bookmark'는 사용자 지정 형식입니다. 다른 응용 프로그램에서는 이 형식을 지원하지 않지만 동일한 사이트 또는 응용 프로그램의 영역 간 드래그할 경우, 이 사용자 지정 형식을 사용할 수 있습니다. 또한 다른 형식의 데이터를 제공함으로써 덜 세부적인 형태로 다른 애플리케이션으로의 드래그도 지원할 수 있습니다. 다른 형식이 하나의 URL또는 텍스트 형식만 제공할 때, 'application2x-bookmark' 형식은 해당 어플리케이션 내에서 사용될 경우 더 상세한 데이터를 제공할 수 있습니다

- -

이 예제에서 text/uri-list와 text/plain은 동일한 데이터를 담고있음에 주목하시기 바랍니다. 이렇게 해도 되지만, 꼭 이럴 필요는 없습니다.

- -

동일한 형식으로 데이터를 두 번 추가하려고 하면 새로운 데이터가 기존 데이터를 대체하지만 형식 목록 내에서 이전 데이터(old data)와 같은 위치에 있게 됩니다.

- -

{{domxref("DataTransfer.clearData","clearData()")}} 메서드를 이용해 해당 데이터를 지울 수 있는데, 이 메서드는 지우고자 하는 데이터의 형식을 인자로 가집니다.

- -
event.dataTransfer.clearData("text/uri-list");
-
- -

{{domxref("DataTransfer.clearData","clearData()")}} 메서드에 대한 형식 인자는 선택적입니다. 형식을 지정하지 않으면 모든 형식과 연관된 데이터가 지워집니다. 드래그할 때, 드래그 데이터 항목이 없거나 이후에 모든 항목이 삭제되면 드래그가 발생하지 않습니다.

- -

드래그 피드백 이미지 설정

- -

드래그가 발생할 때, 드래그 대상("{{event("dragstart")}}" 이벤트가 발생한 요소)으로부터 반투명한 이미지가 생성되고 드래그 하는 동안 마우스 포인터를 따라 움직입니다. 이 이미지는 자동으로 생성되며, 따로 생성할 필요가 없습니다. 하지만, {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 이용해 사용자 정의 드래그 피드백 이미지를 지정할 수 있습니다.

- -
event.dataTransfer.setDragImage(image, xOffset, yOffset);
-
- -

세 개의 인자는 필수입니다. 첫 번째 인자는 이미지에 대한 참조(reference)입니다. 이 참조는 일반적으로 이미지에 대한 참조이나 캔버스(canvas)나 다른 요소를 지정할 수도 있습니다. 피드백 이미지는 단순하게 화면에 표시된 이미지의 모양으로부터 생성되지만, 이미지의 경우 원래 크기로 그려집니다. {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드의 두 번째와 세 번째 인자는 마우스 포인터에 대해 상대적인 옵셋(offsets)으로 이미지가 나타날 위치를 의미합니다.

- -

문서 내에 있지 않은 이미지나 캔버스를 사용하는 것 역시 가능합니다. 이 기법은 다음의 예제와 같이 캔버스 요소를 이용해 드래그 이미지를 사용자 정의 형태로 그리고자 할 때 유용합니다:

- -
function dragWithCustomImage(event) {
-  var canvas = document.createElementNS("http://www.w3.org/1999/xhtml","canvas");
-  canvas.width = canvas.height = 50;
-
-  var ctx = canvas.getContext("2d");
-  ctx.lineWidth = 4;
-  ctx.moveTo(0, 0);
-  ctx.lineTo(50, 50);
-  ctx.moveTo(0, 50);
-  ctx.lineTo(50, 0);
-  ctx.stroke();
-
-  var dt = event.dataTransfer;
-  dt.setData('text/plain', 'Data to Drag');
-  dt.setDragImage(canvas, 25, 25);
-}
-
- -

이 예제에서, 드래그 이미지를 표시할 캔버스를 하나 생성합니다. 캔버스는 너비가 와 높이가 모두 50 픽셀이고, 마우스 포인터가 이미지의 중앙에 위치하도록 옵셋(offsets)을 너비와 높이의 절반(25)으로 설정했습니다.

- -

{{h2_gecko_minversion("Using XUL panels as drag images", "9.0")}}

- -

Gecko 개발자일 경우 (Mozilla 어플리케이션 개발자든 add-on 개발자든 상관 없이), Gecko 9.0 {{geckoRelease("9.0")}}에 드래그 피드백 이미지로 XUL {{XULElem("panel")}} 요소를 사용할 수 있도록 하는 지원이 추가되었습니다. 간단히 {{XULElem("panel")}} 요소를 {{domxref("DataTransfer.setDragImage","setDragImage()")}} 메서드로 전달하기만 하면 됩니다.

- -

다음 XUL {{XULElem("panel")}}를 살펴보시기 바랍니다:

- -
<panel id="panel" style="opacity: 0.6">
-  <description id="pb">Drag Me</description>
-</panel>
-
-<vbox align="start" style="border: 1px solid black;" ondragstart="startDrag(event)">
-  <description>Drag Me</description>
-</vbox>
-
- -

위의 예에서 사용자가 {{XULElem("vbox")}}를 클릭하고 드래그하기 시작하면, 아래의 startDrag() 함수가 호출됩니다.

- -
function startDrag(event) {
-  event.dataTransfer.setData("text/plain", "<strong>Body</strong>");
-  event.dataTransfer.setDragImage(document.getElementById("panel"), 20, 20);
-}
-
- -

이 함수는 해당 패널을 드래그 이미지로 사용하고, HTML 형식의 "<strong>Body</strong>"을 데이터로 가집니다. 텍스트 편집기에 패널을 드랍하면 "Body"라는 텍스트가 드랍된 위치에 삽입됩니다.

- -

드래그 효과

- -

드래그할 때, 여러 가지 작업이 수행될 수 있습니다. copy 작업은 드래그되는 데이터가 현재 위치에서 드랍되는 위치로 복사될 것임을 나타냅니다. move 작업은 드래그되는 데이터가 이동될 것임을 나타내고, link 작업은 특정 형태의 관계(relationship)나 연결(connection)이 소스와 드랍되는 위치 사이에 생성될 것임을 나타냅니다.

- -

드래그 소스(drag source)에 대해 {{event("dragstart")}} 이벤트 리스너의 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 설정함으로써, 이 세 가지 작업 중 어떤 것을 허용할 것인지를 지정할 수 있습니다.

- -
event.dataTransfer.effectAllowed = "copy";
-
- -

이 예제에서는, 복사만 허용됩니다. 다양한 방식으로 값을 조합할 수 있습니다:

- -
-
none
-
어떤 작업도 허용하지 않음.
-
copy
-
복사만 허용
-
move
-
이동만 허용
-
link
-
연결만 허용
-
copyMove
-
복사 또는 이동만 허용
-
copyLink
-
복사 또는 연결만 허용
-
linkMove
-
연결 또는 이동만 허용
-
all
-
복사, 이동 및 연결 모두 허용
-
- -

이 값들은 반드시 위에 나열한 것과 정확하게 일치해야 함에 유의하시기 바랍니다. 예를 들어, {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 copyMove로 설정하면 복사와 이동 작업이 허용되나 연결(link) 작업은 금지됩니다. {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 변경하지 않으면 'all' 값과 마찬가지로 어떤 작업도 허용됩니다. 따라서, 특정한 유형의 작업을 제외시키고 싶지 않다면 이 속성을 조정할 필요가 없습니다.

- -

드래그 작업 중에 {{event("dragenter")}} 또는 {{event("dragover")}} 이벤트에 대한 리스너는 어떤 작업이 허용되어 있는지 알기 위해 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성을 확인할 수 있습니다. 관련된 속성으로, {{domxref("DataTransfer.dropEffect","dropEffect")}}는 이들 이벤트 중 하나에서 수행되어야 하는 단일 작업을 지정하기 위해 설정되어야 할 속성입니다. {{domxref("DataTransfer.dropEffect","dropEffect")}}에 유효한 값은 none, copy, move, 또는 link입니다. 이 속성에 값의 조합은 허용되지 않습니다.

- -

{{event("dragenter")}}나 {{event("dragover")}} 이벤트가 발생하면 사용자가 요청하는 효과로 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성이 초기화됩니다. 사용자는 한정자 키를 눌러 원하는 효과로 수정할 수 있습니다. 플랫폼에 따라 정확한 키가 달라질 수 있지만, 일반적으로 쉬프트(Shift)와 컨트롤(Control) 키가 복사하기, 이동하기, 연결하기 간 전환에 사용됩니다. 마우스 포인터를 원하는 작업을 나타내도록 변경할 수 있습니다; 예를 들어, 복사 작업에 대해서는 마우스 포인터 옆에 더하기 기호가 표시된 커서가 나타날 수 있습니다.

- -

{{event("dragenter")}} 또는 {{event("dragover")}} 이벤트가 발생하는 동안 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 변경할 수 있는데, 예를 들자면, 특정 작업만 지원되는 특수한 드랍 대상(drop target)일 경우가 그렇습니다. {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 수정하여 사용자 효과(user effect)를 오버라이드하여 특정한 드랍 작업이 발생하게 할 수 있습니다. 이 효과는 {{domxref("DataTransfer.effectAllowed","effectAllowed")}} 속성에 열거된 것 중의 하나 이어야 함에 유의하시기 바랍니다. 그렇지 않을 경우, 허용되는 대체 값으로 설정되게 됩니다.

- -
event.dataTransfer.dropEffect = "copy";
-
- -

이 예제에서는 복사가 수행될 효과입니다.

- -

이 경우에는 이벤트를 취소하지 않는 것이 좋지만 none 값을 사용하여 이 위치에서 드롭이 허용되지 않음을 나타낼 수 있습니다.

- -

{{event("drop")}}와 {{event("dragend")}} 이벤트 내에서{{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 확인하면 최종적으로 어떤 효과가 선택되었는지를 알 수 있습니다. 선택된 효과가 "move"였다면, {{event("dragend")}} 이벤트 내에서 드래그 소스의 원본 데이터가 삭제되어야 합니다.

- -

드랍 대상 지정하기

- -

{{event("dragenter")}}와 {{event("dragover")}} 이벤트에 대한 리스너는 유효한 드랍 대상인지, 즉 드래그된 아이템이 드랍될 수 있는 곳인지를 나타내는데 사용할 수 있습니다. 웹 페이지 또는 어플리케이션의 대부분의 영역은 데이터를 드랍할 수 있는 유효한 영역이 아닙니다. 따라서, 이들 이벤트에 대한 기본적인 처리는 드랍을 허용하지 않는 것입니다.

- -

드랍을 허용하길 원한다면, 해당 이벤트를 취소하는 기본 처리를 막아야 합니다. 속성 정의(attribute-defined) 이벤트 리스너로부터 false를 반환 받거나 해당 이벤트의 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하면 됩니다. 후자는 별도의 스크립트에 정의된 함수에 더 적합합니다.

- -
<div ondragover="return false">
-<div ondragover="event.preventDefault()">
-
- -

{{event("dragenter")}} and {{event("dragover")}} 두 이벤트 모두에서 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하는 것은 그 위치에 드랍이 허용되는 것을 나타냅니다. 하지만, 일반적으로 특정한 상황에서만, 예를 들자면 링크가 드래그될 때만 {{domxref("Event.preventDefault","preventDefault()")}} 메서드를 호출하길 원할 것입니다. 이렇게 하기 위해서는 조건을 확인하여 조건이 충족될 때에만 해당 이벤트를 취소하는 함수를 호출합니다. 조건이 충족되지 않을 경우, 이벤트를 취소하지 않으면 사용자가 마우스 버튼을 놓더라도 드랍은 발생하지 않을 것입니다.

- -

data transfer의 드래그 데이터 형식에 따라 드랍을 허용하거나 기각하는 경우가 대부분일 것입니다(예를 들어, 이미지나 링크를 허용하거나 둘 다 허용하는 경우). 이렇게 하기 위해서는 이벤트의 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 속성의 {{domxref("DataTransfer.types","types")}} 속성을 확인합니다. {{domxref("DataTransfer.types","types")}} 속성은 드래그가 시작될 때 추가된 형식 문자열의 배열을 반환하는데, 그 순서는 가장 세부적인 형식에서 가장 덜 세부적인 형식의 순서입니다.

- -
function contains(list, value) {
-    for( var i = 0; i < list.length; ++i ) {
-        if(list[i] === value) return true;
-    }
-    return false;
-}
-
-function doDragOver(event) {
-  var isLink = contains( event.dataTransfer.types, "text/uri-list");
-  if (isLink) {
-    event.preventDefault();
-  }
-}
- -

이 예제에서 형식 목록 내에 text/uri-list 형식이 존재하는지 확인하기 위해 contains 메서드를사용합니다. 존재할 경우에는 드랍을 허용하기 위해 이벤트가 취소될 것입니다. 드래그 데이터가 링크를 포함하지 않았다면, 해당 이벤트는 취소되지 않을 것이고 그 위치에 대한 드랍이 발생하지 않을 것입니다.

- -

수행되어야 하는 작업 형식을 더 세부적으로 설정하길 원한다면, {{domxref("DataTransfer.effectAllowed","effectAllowed")}}나 {{domxref("DataTransfer.dropEffect","dropEffect")}} 속성을 각각 설정하거나 동시에 둘 다를 설정하고 싶을 것입니다. 두 속성을 변경하더라도 해당 이벤트를 취소하지 않으면 아무런 영향이 없을 것입니다.

- -

Updates to DataTransfer.types

- -

최신 스펙에는 {{domxref("DataTransfer.types")}}이 {{domxref("DOMStringList")}}(이 속성은 Fiirefox 52 이상에서 지원됨)이 아닌 {{domxref("DOMString")}} 형식의 고정배열(fronzen array)을 반환하도록 명시하고 있음에 유의하시기 바랍니다.

- -

그 결과로, contains 메서드는 해당 속성에 대해 더 이상 동작하지 않으며; 특정 형식의 데이터가 제공되는지 확인하기 위해서는 다음 코드와 같이 includes 메서드를 사용해야 합니다:

- -
if ([...event.dataTransfer.types].includes('text/html')) {
-  // Do something
-}
- -

일부 특성 검출(feature detection)을 이용해 types에 대해 어떤 메서드가 지원되는지를 판별하고 적절하게 코드를 실행할 수 있습니다.

- -

Drop Feedback

- -

There are several ways in which you can indicate to the user that a drop is allowed at a certain location. The mouse pointer will update as necessary depending on the value of the {{domxref("DataTransfer.dropEffect","dropEffect")}} property. Although the exact appearance depends on the user's platform, typically a plus sign icon will appear for a 'copy' for example, and a 'cannot drop here' icon will appear when a drop is not allowed. This mouse pointer feedback is sufficient in many cases.

- -

However, you can also update the user interface with an insertion point or highlight as needed. For simple highlighting, you can use the -moz-drag-over CSS pseudoclass on a drop target.

- -
.droparea:-moz-drag-over {
-  border: 1px solid black;
-}
-
- -

In this example, the element with the class droparea will receive a 1 pixel black border while it is a valid drop target, that is, if the {{domxref("Event.preventDefault","preventDefault()")}} method was called during the {{event("dragenter")}} event. Note that you must cancel the {{event("dragenter")}} event for this pseudoclass to apply, as this state is not checked for the {{event("dragover")}} event.

- -

For more complex visual effects, you can also perform other operations during the {{event("dragenter")}} event, for example, by inserting an element at the location where the drop will occur. For example, this might be an insertion marker or an element that represents the dragged element in its new location. To do this, you could create an image or separator element, for example, and simply insert it into the document during the {{event("dragenter")}} event.

- -

The {{event("dragover")}} event will fire at the element the mouse is pointing at. Naturally, you may need to move the insertion marker around a {{event("dragover")}} event as well. You can use the event's {{domxref("MouseEvent.clientX","clientX")}} and {{domxref("MouseEvent.clientY","clientY")}} properties as with other mouse events to determine the location of the mouse pointer.

- -

Finally, the {{event("dragleave")}} event will fire at an element when the drag leaves the element. This is the time when you should remove any insertion markers or highlighting. You do not need to cancel this event. Any highlighting or other visual effects specified using the -moz-drag-over pseudoclass will be removed automatically. The {{event("dragleave")}} event will always fire, even if the drag is cancelled, so you can always ensure that any insertion point cleanup can be done during this event.

- -

Performing a Drop

- -

When the user releases the mouse, the drag and drop operation ends. If the mouse was released over an element that is a valid drop target, that is, one that cancelled the last {{event("dragenter")}} or {{event("dragover")}} event, and then the drop will be successful, and a {{event("drop")}} event will fire at the target. Otherwise, the drag operation is cancelled, and no {{event("drop")}} event is fired.

- -

During the {{event("drop")}} event, you should retrieve that data that was dropped from the event and insert it at the drop location. You can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine which drag operation was desired.

- -

As with all drag-related events, the event's {{domxref("DataTransfer","dataTransfer")}} property will hold the data that is being dragged. The {{domxref("DataTransfer.getData","getData()")}} method may be used to retrieve the data again.

- -
function onDrop(event) {
-  var data = event.dataTransfer.getData("text/plain");
-  event.target.textContent = data;
-  event.preventDefault();
-}
-
- -

The {{domxref("DataTransfer.getData","getData()")}} method takes one argument, the type of data to retrieve. It will return the string value that was set when {{domxref("DataTransfer.setData","setData()")}} was called at the beginning of the drag operation. An empty string will be returned if data of that type does not exist. Naturally, though, you would likely know that the right type of data was available, as it was previously checked during a {{event("dragover")}} event.

- -

In the example here, once we have retrieved the data, we insert the string as the textual content of the target. This has the effect of inserting the dragged text where it was dropped, assuming that the drop target is an area of text such as a p or div element.

- -

In a web page, you should call the {{domxref("Event.preventDefault","preventDefault()")}} method of the event if you have accepted the drop so that the default browser handling does not handle the dropped data as well. For example, when a link is dragged to a web page, Firefox will open the link. By cancelling the event, this behavior will be prevented.

- -

You can retrieve other types of data as well. If the data is a link, it should have the type text/uri-list. You could then insert a link into the content.

- -
function doDrop(event) {
-  var lines = event.dataTransfer.getData("text/uri-list").split("\n");
-  for (let line of lines) {
-    if (line.startsWith("#"))
-      continue;
-
-    let link = document.createElement("a");
-    link.href = line;
-    link.textContent = line;
-    event.target.appendChild(link);
-  }
-  event.preventDefault();
-}
-
- -

This example inserts a link from the dragged data. As you might be able to guess from the name, the text/uri-list type actually may contain a list of URLs, each on a separate line. In this code, we use the split to split the string into lines, then iterate over the list of lines, inserting each as a link into the document. Note also that we skip links starting with a number sign (#) as these are comments.

- -

For simple cases, you can use the special type URL just to retrieve the first valid URL in the list. For example:

- -
var link = event.dataTransfer.getData("URL");
-
- -

This eliminates the need to check for comments or iterate through lines yourself; however, it is limited to only the first URL in the list.

- -

The URL type is a special type used only as a shorthand, and it does not appear within the list of types specified in the {{domxref("DataTransfer.types","types")}} property.

- -

Sometimes you may support some different formats, and you want to retrieve the data that is most specific that is supported. In this example, three formats are supported by a drop target.

- -

The following example returns the data associated with the best-supported format:

- -
function doDrop(event) {
-  var types = event.dataTransfer.types;
-  var supportedTypes = ["application/x-moz-file", "text/uri-list", "text/plain"];
-  types = supportedTypes.filter((value) => types.includes(value));
-  if (types.length)
-    var data = event.dataTransfer.getData(types[0]);
-  event.preventDefault();
-}
-
- -

This method relies on JavaScript functionality available in Firefox 3. However, the code could be adjusted to support other platforms.

- -

Finishing a Drag

- -

Once the drag is complete, a {{event("dragend")}} event is fired at the source of the drag (the same element that received the {{event("dragstart")}} event). This event will fire if the drag was successful[1] or if it was cancelled. However, you can use the {{domxref("DataTransfer.dropEffect","dropEffect")}} property to determine what drop operation occurred.

- -

If the {{domxref("DataTransfer.dropEffect","dropEffect")}} property has the value none during a {{event("dragend")}}, then the drag was cancelled. Otherwise, the effect specifies which operation was performed. The source can use this information after a move operation to remove the dragged item from the old location. The {{domxref("DataTransfer.mozUserCancelled","mozUserCancelled")}} property will be set to true if the user cancelled the drag (by pressing Escape), and false if the drag was cancelled for other reasons such as an invalid drop target, or if it was successful.

- -

A drop can occur inside the same window or over another application. The {{event("dragend")}} event will always fire regardless. The event's {{domxref("MouseEvent.screenX","screenX")}} and {{domxref("MouseEvent.screenY","screenY")}} properties will be set to the screen coordinate where the drop occurred.

- -

After the {{event("dragend")}} event has finished propagating, the drag and drop operation is complete.

- -

[1] In Gecko, {{event("dragend")}} is not dispatched if the source node is moved or removed during the drag (e.g. on drop or {{event("dragover")}}).  bug 460801

- -

See also

- - diff --git "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" "b/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" deleted file mode 100644 index 70a4295284..0000000000 --- "a/files/ko/web/api/html_\353\223\234\353\236\230\352\267\270_\354\225\244_\353\223\234\353\241\255_api/index.html" +++ /dev/null @@ -1,303 +0,0 @@ ---- -title: HTML 드래그 앤 드롭 API -slug: Web/API/HTML_드래그_앤_드롭_API -tags: - - HTML5 - - XUL - - 가이드 - - 개요 - - 고급 - - 드래그 앤 드롭 - - 이벤트 -translation_of: Web/API/HTML_Drag_and_Drop_API ---- -

{{DefaultAPISidebar("HTML 드래그 앤 드롭 API")}}

- -

HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. 이 기능을 이용해 사용자는 draggable 요소를 마우스로 선택해 droppable 요소로 드래그하고, 마우스 버튼에서 손을 뗌으로써 요소를 드롭할 수 있습니다. 드래그하는 동안 draggable 요소는 반투명한 채로 마우스 포인터를 따라다닙니다.

- -

웹 사이트나 확장 기능, XUL 어플리케이션을 위해, 다양한 요소를 draggable 요소로 만들 수 있고, 이벤트에 대한 draggable 요소의 반응들을 만들어내거나 droppable 요소를 자유자재로 만들 수 있습니다.

- -

이 문서는 HTML 드래그 앤 드롭에 대한 전반적인 개요입니다. 인터페이스에 대한 설명과 드래그 앤 드롭 기능을 어플리케이션에서 사용하기 위한 기본적인 절차, 인터페이스의 상호 운용성에 대한 요약 등이 이 문서에 담겨있습니다.

- -

드래그 이벤트

- -

HTML 드래그 앤 드롭은 {{domxref("Event","DOM event model")}} 과 {{domxref("DragEvent","drag events")}} 를  {{domxref("MouseEvent","mouse events")}} 로부터 상속받습니다. 보통 드래그는 사용자가 draggable 요소를 마우스로 선택하고, 마우스 포인터를 droppable 요소로 가져가 마우스 버튼을 때는 것으로 이루어집니다. 드래그하는 도중에 많은 이벤트가 발생하고, 몇몇 이벤트는 여러번 발생하기도 합니다. ( {{event("drag")}}와 {{event("dragover")}}).

- -

모든 드래그 이벤트는 글로벌 이벤트 핸들러와 연결되어 있습니다. 각 드래그 이벤트와 드래그 전역 속성은 참조 문서를 가지고 있습니다. 아래 표는 각 이벤트에 대한 간략한 설명과 참조 문서로의 링크를 담고 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
이벤트이벤트 핸들러설명
{{domxref('Document/drag_이벤트', 'drag')}}{{domxref('GlobalEventHandlers.ondrag','ondrag')}}요소나 텍스트 블록을 드래그 할 때 발생한다.
{{event('dragend')}}{{domxref('GlobalEventHandlers.ondragend','ondragend')}} -

드래그를 끝냈을 때 발생한다. (마우스 버튼을 떼거나 ESC 키를 누를 때) (드래그 끝내기를 보시오)

-
{{event('dragenter')}}{{domxref('GlobalEventHandlers.ondragenter','ondragenter')}} -

드래그한 요소나 텍스트 블록을 적합한 드롭 대상위에 올라갔을 때 발생한다. (드롭 대상 지정하기를 보시오.)

-
{{event('dragexit')}}{{domxref('GlobalEventHandlers.ondragexit','ondragexit')}} -

요소가 더 이상 드래그의 직접적인 대상이 아닐 때 발생한다.

-
{{event('dragleave')}}{{domxref('GlobalEventHandlers.ondragleave','ondragleave')}} -

드래그하는 요소나 텍스트 블록이 적합한 드롭 대상에서 벗어났을 때 발생한다.

-
{{event('dragover')}}{{domxref('GlobalEventHandlers.ondragover','ondragover')}} -

요소나 텍스트 블록을 적합한 드롭 대상 위로 지나갈 때 발생한다. (매 수백 밀리초마다 발생한다.)

-
{{event('dragstart')}}{{domxref('GlobalEventHandlers.ondragstart','ondragstart')}} -

사용자가 요소나 텍스트 블록을 드래그하기 시작했을 때 발생한다. (드래그 시작하기를 보시오.)

-
{{event('drop')}}{{domxref('GlobalEventHandlers.ondrop','ondrop')}} -

요소나 텍스트 블록을 적합한 드롭 대상에 드롭했을 때 발생한다. (드롭하기를 보시오.)

-
- -

참고: dragstart와 dragend 이벤트는 파일을 브라우저로 드래그할 때는 발생하지 않습니다.

- -

인터페이스

- -

HTML 드래그와 드롭 인터페이스는 {{domxref("DragEvent")}}, {{domxref("DataTransfer")}}, {{domxref("DataTransferItem")}}, {{domxref("DataTransferItemList")}} 입니다.

- -

{{domxref("DataTransfer")}} 객체는 드래그 형태나 드래그 데이터 (하나 이상의 아이템), 각 드래그 아이템의 종류 (MIME 종류) 와 같은 드래그 이벤트의 상태를 담고 있습니다. {{domxref("DataTransfer")}} 는 또한 드래그 데이터에 아이템을 추가하거나 제거하는 메소드를 가지고 있습니다. The {{domxref("DragEvent")}} 와 {{domxref("DataTransfer")}} 인터페이스만 있으면 어플리케이션에 HTML 드래그 앤 드롭 기능을 추가할 수 있습니다. 참고로 파이어폭스는 {{domxref("DataTransfer")}}에 {{anch("Gecko specific interfaces","Gecko-specific extensions")}} 와 같은 파이어폭스에서만 동작하는 추가적인 확장을 제공합니다. 

- -

{{domxref("DataTransfer")}}는 {{domxref("DataTransferItem")}}의 {{domxref("DataTransferItemList","목록")}} 인 {{domxref("DataTransfer.items","items")}} 프로퍼티를 가지고 있습니다. 각 {{domxref("DataTransferItem")}} 는 하나의 드래그 아이템을 나타내고 각 아이템은 데이터의 종류 (string 혹은 file) 를 나타내는 {{domxref("DataTransferItem.kind","kind")}} 프로퍼티와 데이터 아이템의 종류 (MIME 종류) 를 나타내는 {{domxref("DataTransferItem.type","type")}} 프로퍼티를 가집니다. {{domxref("DataTransferItem")}}은 드래그 아이템의 데이터를 가져오는 메소드를 제공합니다.

- -

{{domxref("DataTransferItemList")}} 객체는 {{domxref("DataTransferItem")}}의 리스트입니다. 이 리스트 객체는 세 개의 메소드 - 드래그 아이템을 리스트에 추가하거나, 리스트에서 아이템을 삭제하거나, 모든 드래그 아이템을 리스트에서 삭제하는 메소드 - 를 가집니다.

- -

A key difference between the {{domxref("DataTransfer")}} and {{domxref("DataTransferItem")}} interfaces is that the former uses the synchronous {{domxref("DataTransfer.getData","getData()")}} method to access a drag item's data, whereas the later uses the asynchronous {{domxref("DataTransferItem.getAsString","getAsString()")}} method to access a drag item's data.

- -

{{domxref("DataTransfer")}}와 {{domxref("DataTransferItem")}}의 가장 중요한 차이점은 전자는 드래그 아이템의 데이터에 접근하기 위해 동기 메소드인 {{domxref("DataTransfer.getData","getData()")}}를 사용하는데 반해, 후자는 비동기 메소드인 {{domxref("DataTransferItem.getAsString","getAsString()")}}를 사용한다는 점입니다.

- -

참고: {{domxref("DragEvent")}} and {{domxref("DataTransfer")}}는 여러 데스크탑 브라우저에서 폭넓게 지원하고 있습니다. 하지만 {{domxref("DataTransferItem")}}와 {{domxref("DataTransferItemList")}}는 제한적으로 사용 가능합니다. 드래그 앤 드롭의 상호 운용성에 대한 더 많은 정보를 찾아보기 위해 {{anch("Interoperability")}}를 보십시오.

- -

Gecko 한정 인터페이스

- -

모질라와 파이어폭스는 표준 드래그 앤 드롭 모델에서 제공하지 않는 몇가지 기능들을 추가로 제공합니다. 여러 개의 아이템을 동시에 드래그하거나 파일과 같이 문자열이 아닌 데이터를 드래그 하기 위한 여러 편리한 기능을 제공합니다. 더 많은 정보를 찾아보기 위해, Dragging and Dropping Multiple Items을 보십시오. 덧붙여, 모든 Gecko 한정 프로퍼티나 Gecko 한정 메소드를 찾아보기 위해 {{domxref("DataTransfer")}} 참조 페이지도 보시기 바랍니다.

- -

기본

- -

이번 절은 드래그 앤 드롭 기능을 추가하기 위한 기본적인 방법을 요약하고 있습니다. 각 절은 단계를 설명하고, 짧은 코드 예제와 추가적인 정보를 위한 링크를 포함합니다.

- -

어떤 것이 draggable인지 확인하기

- -

하나의 요소를 draggable로 만들기 위해서는 {{htmlattrxref("draggable")}}와 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 전역 이벤트 핸들러를 아래 예제 코드와 같이 추가해야합니다.

- -
function dragstart_handler(ev) {
- console.log("dragStart");
- // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
- ev.dataTransfer.setData("text/plain", ev.target.id);
-}
-
-
- -
<script>
-  function dragstart_handler(ev) {
-    // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
-    ev.dataTransfer.setData("text/plain", ev.target.id);
-  }
-
-  window.addEventListener('DOMContentLoaded', () => {
-    // id를 통해 element를 가져옵니다.
-    const element = document.getElementById("p1");
-    // 'dragstart' 이벤트 리스터를 추가합니다.
-    element.addEventListener("dragstart", dragstart_handler);
-  });
-</script>
-
-<p id="p1" draggable="true">This element is draggable.</p>
- -

추가 정보를 위해 draggable attribute reference와 Drag operations guide를 참고하세요.

- -

드래그 데이터 정의하기

- -

드래그할 때 자유롭게 데이터 아이템을 포함할 수 있습니다. 각 데이터 아이템은 특정 type의 {{domxref("DOMString","문자열")}}이며, 보통 text/html와 같은 MIME type입니다.

- -

각 {{domxref("DragEvent","drag event")}} 은 이벤트 데이터를 가지고 있는 {{domxref("DragEvent.dataTransfer","dataTransfer")}} 를 가집니다. 이 프로퍼티는 ({{domxref("DataTransfer")}} 객체) 드래그 데이터를 관리하는 메소드를 가집니다. {{domxref("DataTransfer.setData","setData()")}} 는 아래 코드 예제와 같이 아이템을 드래그 데이터에 추가할 때 사용합니다.

- -
function dragstart_handler(ev) {
-  // 드래그 데이터를 추가합니다.
-  ev.dataTransfer.setData("text/plain", ev.target.id);
-  ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
-  ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
-}
-
- -

드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입 (텍스트, HTML, 링크, 파일 등) 의 목록을 보려면, Recommended Drag Types를 참고하십시오. 드래그 데이터에 대한 추가적인 정보를 위해서는 Drag Data를 참고하십시오.

- -

드래그 이미지 정의하기

- -

브라우저는 드래그 하는 동안 마우스 포인터 옆에 나타나는 이미지를 기본적으로 제공합니다. 어플리케이션에서 다른 이미지를 사용하기 원한다면 아래 예제와 같이 {{domxref("DataTransfer.setDragImage","setDragImage()")}}를 사용할 수 있습니다.

- -
function dragstart_handler(ev) {
-  // 드래그 이미지로 사용할 이미지를 만듭니다.
-  // 참고: "example.gif"를 존재하는 이미지로 바꾸지 않으면 기본 드래그 이미지를 사용합니다.
-  var img = new Image();
-  img.src = 'example.gif';
-  ev.dataTransfer.setDragImage(img, 10, 10);
-}
-
- -

드래그 이미지에 대해 더 알아보려면, Setting the Drag Feedback Image를 참고하세요.

- -

드래그 효과 정의하기

- -

{{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티는 드래그 앤 드롭 도중에 사용자에게 피드백 (보통 시각적인) 을 제공하기 위해 사용합니다. 브라우저가 드래그 하는 동안 어떤 마우스 포인터를 보여줄 지 결정합니다. 사용자가 마우스 포인터를 대상 드롭 요소에 올려놓으면, 브라우저는 드래그 효과에 적합한 마우스 포인터를 보여줄 것입니다.

- -

세 개의 효과가 정의되어 있습니다:

- -

copy는 현재 위치에서 드롭하는 위치로 데이터가 복사될 것을 암시합니다.

- -

move는 현재 위치에서 드롭하는 위치로 데이터가 이동할 것을 암시합니다.

- -

link는 드래그하는 위치와 드롭하는 위치 간의 일종의 관계나 연결이 맺어진 다는 것을 암시합니다.

- -

특정 위치에서는 특정 효과가 허용된다는 것을 알려주기 위해 드래그 하는 도중에 효과가 변할 수 있습니다. 허용되는 경우에만 해당 위치에 드롭할 수 있습니다.

- -

다음 예제는 어떻게 이 프로퍼티를 사용하는지 보여줍니다.

- -
function dragstart_handler(ev) {
-  // 드래그 효과를 copy로 지정합니다.
-  ev.dataTransfer.dropEffect = "copy";
-}
-
- -

더 자세한 설명은 Drag Effects를 참고하세요.

- -

드롭 지역 정의하기

- -

기본적으로는 브라우저는 HTML 요소에 뭔가를 드롭했을 때 아무 일도 일어나지 않도록 합니다. 특정 요소가 드롭 지역 혹은 droppable로 만들기 위해서는 해당 요소가 {{domxref("GlobalEventHandlers.ondragover","ondragover")}}와 {{domxref("GlobalEventHandlers.ondrop","ondrop")}} 이벤트 핸들러 속성을 가져야합니다. 아래 예제는 두 요소를 어떻게 사용하고, 각 요소에 포함된 기본적인 이벤트 핸들러를 보여줍니다.

- -
<script>
-function dragover_handler(ev) {
- ev.preventDefault();
- // dropEffect를 move로 설정.
- ev.dataTransfer.dropEffect = "move";
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // 대상의 id를 가져와 대상 DOM에 움직인 요소를 추가합니다.
- const data = ev.dataTransfer.getData("text/plain");
- ev.target.appendChild(document.getElementById(data));
-}
-</script>
-
-<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
- -

각 핸들러는 {{domxref("Event.preventDefault","preventDefault()")}} 를 호출해 추가적인 이벤트 (터치 이벤트나 포인터 이벤트) 가 일어나지 않도록 합니다.

- -

추가적인 정보는, Specifying Drop Targets를 참고하세요.

- -

드롭 효과 다루기

- -

{{event("drop")}} 이벤트 핸들러는 자유롭게 드래그 데이터를 가공할 수 있습니다. 보통, 드래그 아이템과 각 아이템을 가공하기 위해 {{domxref("DataTransfer.getData","getData()")}}를 사용합니다. 추가로, {{domxref("DataTransfer.dropEffect","dropEffect")}} 값이나 보조키 상태에 따라 어플리케이션이 어떻게 동작할지를 결정할 수 있습니다.

- -

아래 예제는 드롭 핸들러가 드래그 데이터로부터 드래그하는 요소의 id를 가져와 드래그하는 요소를 드롭하는 요소로 옮기기위해 사용합니다.

- -
<script>
-function dragstart_handler(ev) {
- // 데이터 전달 객체에 대상 요소의 id를 추가합니다.
- ev.dataTransfer.setData("application/my-app", ev.target.id);
- ev.dataTransfer.dropEffect = "move";
-}
-function dragover_handler(ev) {
- ev.preventDefault();
- ev.dataTransfer.dropEffect = "move"
-}
-function drop_handler(ev) {
- ev.preventDefault();
- // 대상의 id를 가져와 이동한 대상 DOM 요소를 추가합니다.
- // Get the id of the target and add the moved element to the target's DOM
- const data = ev.dataTransfer.getData("application/my-app");
- ev.target.appendChild(document.getElementById(data));
-}
-</script>
-
-<p id="p1" draggable="true" ondragstart="dragstart_handler(event)">This element is draggable.</p>
-<div id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</div>
- -

더 많은 정보를 위해 Performing a Drop을 보십시오.

- -

드래그가 끝나면

- -

드래그가 끝나면 드래그한 요소에 {{event("dragend")}} 이벤트가 발생합니다. 이 이벤트는 드래그가 완료되거나 중간에 취소되어도 발생합니다. {{event("dragend")}} 이벤트 핸들러는 {{domxref("DataTransfer.dropEffect","dropEffect")}} 프로퍼티를 확인해 드래그가 성공했는지를 확인할 수 있습니다.

- -

드래그 끝을 다루기 위한 더 많은 정보는 Finishing a Drag를 참고하세요. 

- -

상호 운용성

- -

DataTransferItem interface's Browser Compatibility table에 나온 대로, 드래그 앤 드롭은 상대적으로 여러 데스크톱 브라우저에서 폭넓게 사용할 수 있습니다 ({{domxref("DataTransferItem")}}는 {{domxref("DataTransferItemList")}} 덜 지원하지만). 또한 모바일 브라우저에서는 매우 한정적으로 사용할 수 있습니다.

- -

예제와 데모

- - - -

명세서 

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#dnd")}}{{Spec2('HTML WHATWG')}}
- -

더보기

- - diff --git a/files/ko/web/api/htmlelement/accesskey/index.html b/files/ko/web/api/htmlelement/accesskey/index.html new file mode 100644 index 0000000000..0fc48bd749 --- /dev/null +++ b/files/ko/web/api/htmlelement/accesskey/index.html @@ -0,0 +1,35 @@ +--- +title: Element.accessKey +slug: Web/API/Element/accessKey +tags: + - API + - Access Keys + - DOM + - Hotkeys + - NeedsContent + - 레퍼런스 + - 속성 + - 엘리먼트 + - 키보드 단축키 +translation_of: Web/API/HTMLElement/accessKey +translation_of_original: Web/API/Element/accessKey +--- +
{{APIRef("DOM")}}
+ +

Element.accessKey 속성은 주어진 사용자가 눌러 주어진 엘리먼트로 이동할 수 있는 키 입력 세트입니다.

+ +
+

Element.accessKey 속성은 브라우저에 이미 바인딩 된 키와의 여러 충돌로 인해 거의 사용되지 않습니다. 이를 해결하기 위해, 브라우저는 다른 "적절한" 키(예, Alt + accesskey)와 함께 키가 눌렸을 때동작하도록 구현하였습니다.

+
+ +

브라우저 호환성

+ + + +

{{Compat("api.Element.accessKey")}}

+ +

함께 보기

+ + diff --git a/files/ko/web/api/htmlelement/dataset/index.html b/files/ko/web/api/htmlelement/dataset/index.html deleted file mode 100644 index 2b2a891dca..0000000000 --- a/files/ko/web/api/htmlelement/dataset/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: HTMLElement.dataset -slug: Web/API/HTMLElement/dataset -tags: - - API - - HTML DOM - - HTMLElement - - HTMLOrForeignElement - - Property - - Read-only - - Reference -translation_of: Web/API/HTMLOrForeignElement/dataset ---- -
{{APIRef("HTML DOM")}}
- -

HTMLElement.dataset 읽기 전용 속성은 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다. 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. dataset 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 dataset 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 data-이름과, 이에 대응하는 DOM dataset['이름']의 이름은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.

- -
    -
  • HTML의 사용자 지정 특성 이름은 data-로 시작합니다. 또한 문자, 숫자, 대시(-), 점(.), 콜론(:), 언더스코어(_)만 사용할 수 있고, ASCII 대문자(A-Z)는 사용할 수 없습니다.
    • -
  • JavaScript의 사용자 지정 특성 이름은 HTML 이름을 카멜 표기법으로 변환한 형태로, 대시, 점 등을 모두 제거합니다.
    • -
- -

아래의 내용과 함께, Using data attributes 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. 

- -

Name conversion

- -

dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. 

- -
    -
  • 접두사 data- 는 삭제됩니다. (대시 포함);
    • -
  • a 부터 z 까지 ASCII 소문자 앞에 오는 모든 대시(U+002D)는 삭제되고 해당 소문자는 대문자로 변환됩니다.
    • -
  • 다른 기호는(다른 대시들을 포함한) 바뀌지 않습니다.
    • -
- -

camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:

- -
    -
  • 제약 조건: 대시 바로 뒤에는 a 에서 z 까지 ASCII 소문자를 쓸 수 없습니다 (변환 전);
    • -
  • 접두사 data- 가 추가됩니다;
    • -
  • A 에서 Z 까지 모든 ASCII 대문자는 대시와 해당 소문자로 변환됩니다;
    • -
  • 다른 문자는 변하지 않습니다.
    • -
- -

이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.

- -

예를 들어, data-abc-def 라는 이름의 속성은 abcDef 라는 키에 대응합니다.

- -

Accessing values

- -
    -
  • 속성들은 element.dataset.keyname과 같이 dataset의 객체 속성처럼 camelCase 이름(키)을 사용해서 설정하거나 읽을 수 있습니다
    • -
  • 속성들은 또한 element.dataset[keyname]과 같이 객체 속성의 괄호 신택스로 설정하거나 읽을 수 있습니다.
    • -
- -

Syntax

- -
    -
  • string = element.dataset.camelCasedName;
    • -
  • element.dataset.camelCasedName = string;
    • -
    -
  • string = element.dataset[camelCasedName];
    • -
  • element.dataset[camelCasedName] = string;
    • -
  • -

    HTML elements에서 사용자가 지정한 data attribute에 직접 설정할 수 있으나 attribute names는 위의 데이터 문법을 반드시 사용해야 합니다.

    -
    • -
- -

예시

- -
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
- -
const el = document.querySelector('#user');
-
-// el.id === 'user'
-// el.dataset.id === '1234567890'
-// el.dataset.user === 'johndoe'
-// el.dataset.dateOfBirth === ''
-
-// set the data attribute
-el.dataset.dateOfBirth = '1960-10-03';
-// Result: el.dataset.dateOfBirth === 1960-10-03
-
-delete el.dataset.dateOfBirth;
-// Result: el.dataset.dateOfBirth === undefined
-
-// 'someDataAttr' in el.dataset === false
-el.dataset.someDataAttr = 'mydata';
-// Result: 'someDataAttr' in el.dataset === true
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
- -

브라우저 호환성

- -

{{Compat("api.HTMLElement.dataset")}}

- -

See also

- - diff --git a/files/ko/web/api/htmlelement/innertext/index.html b/files/ko/web/api/htmlelement/innertext/index.html new file mode 100644 index 0000000000..414fab5c00 --- /dev/null +++ b/files/ko/web/api/htmlelement/innertext/index.html @@ -0,0 +1,88 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API + - DOM + - HTMLElement + - Property + - Reference +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLElement")}} 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

+ +
+

참고: innerText는 {{domxref("Node.textContent")}}와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

+
+ +

구문

+ +
const renderedText = htmlElement.innerText
+htmlElement.innerText = string
+
+ +

값

+ +

요소의 렌더링 된 텍스트 콘텐츠를 나타내는 {{domxref("DOMString")}}. 요소 자체가 렌더링 중이 아니라면 {{domxref("Node.textContent")}} 속성의 값과 동일합니다.

+ +

예제

+ +

다음 예제는 innerText와 {{domxref("Node.textContent")}}를 비교합니다. innerText가 {{htmlElement("br")}} 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

+ +

HTML

+ +
<h3>원본 요소:</h3>
+<p id="source">
+  <style>#source { color: red; }</style>
+아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
+  <span style="display:none">숨겨진 글</span>
+</p>
+<h3>textContent 결과:</h3>
+<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
+<h3>innerText 결과:</h3>
+<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
+ +

JavaScript

+ +
const source = document.getElementById('source');
+const textContentOutput = document.getElementById('textContentOutput');
+const innerTextOutput = document.getElementById('innerTextOutput');
+
+textContentOutput.innerHTML = source.textContent;
+innerTextOutput.innerHTML = source.innerText;
+ +

결과

+ +

{{EmbedLiveSample("예제", 700, 450)}}

+ +

명세

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
+ +

브라우저 호환성

+ + + +

{{Compat("api.HTMLElement.innerText")}}

+ +

같이 보기

+ +
    +
  • {{domxref("HTMLElement.outerText")}}
    • +
  • {{domxref("Element.innerHTML")}}
    • +
diff --git a/files/ko/web/api/htmlelement/style/index.html b/files/ko/web/api/htmlelement/style/index.html deleted file mode 100644 index 5976dd66bc..0000000000 --- a/files/ko/web/api/htmlelement/style/index.html +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: element.style -slug: Web/API/HTMLElement/style -tags: - - API - - HTML DOM - - HTMLElement - - Property - - Reference - - Style -translation_of: Web/API/ElementCSSInlineStyle/style ---- -
{{ APIRef("HTML DOM") }}
- -

HTMLElement.style 속성은 요소의 인라인 스타일에 접근하거나 설정할 때 사용할 수 있습니다. 접근자로서는 요소의 인라인 style 속성이 포함한 CSS 선언을 담은 {{domxref("CSSStyleDeclaration")}} 객체를 반환합니다

- -

예제

- -
// Set multiple styles in a single statement
-elt.style.cssText = "color: blue; border: 1px solid black";
-// Or
-elt.setAttribute("style", "color:red; border: 1px solid blue;");
-
-// Set specific style while leaving other inline style values untouched
-elt.style.color = "blue";
- -

명세

- -

DOM Level 2 Style: ElementCSSInlineStyle.style

- -

CSSOM: ElementCSSInlineStyle

- -

브라우저 호환성

- -

{{Compat("api.HTMLElement.style")}}

- -

같이 보기

- - diff --git a/files/ko/web/api/htmlelement/tabindex/index.html b/files/ko/web/api/htmlelement/tabindex/index.html deleted file mode 100644 index 7cbb0fa1f0..0000000000 --- a/files/ko/web/api/htmlelement/tabindex/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: element.tabIndex -slug: Web/API/HTMLElement/tabIndex -tags: - - DOM - - Gecko - - Gecko DOM Reference -translation_of: Web/API/HTMLOrForeignElement/tabIndex ---- -

{{ ApiRef() }}

-

요약

-

현재 요소의 탭 순서를 get/set.

-

구문

-
element.tabIndex =iIndex
-
-

매개변수

-
    -
  • iIndex는 숫자
    • -
-

예

-
b1 = document.getElementById("button1");
-b1.tabIndex = 1;
-
-

명세

-

tabIndex

-

{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}

diff --git a/files/ko/web/api/htmlmediaelement/abort_event/index.html b/files/ko/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..2278a24c24 --- /dev/null +++ b/files/ko/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,74 @@ +--- +title: abort +slug: Web/Events/abort +tags: + - DOM + - Event + - Reference + - 레퍼런스 + - 이벤트 +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +

abort 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.

+ +

개요

+ +
+
스펙
+
DOM L3
+
인터페이스
+
유저 인터페이스에서 발생하면 UIEvent, 그렇지 않으면 Event.
+
버블
+
안됨
+
취소 가능
+
안됨
+
타겟
+
Element
+
디폴트 액션
+
없음
+
+ +

속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성타입설명
target {{readonlyInline}}EventTarget이벤트 타겟 (DOM tree의 최상위 타겟).
type {{readonlyInline}}DOMString이벤트의 타입
bubbles {{readonlyInline}}Boolean이벤트가 버블링 되는지 안되는지
cancelable {{readonlyInline}}Boolean이벤트가 취소 가능한지 아닌지
view {{readonlyInline}}WindowProxydocument.defaultView (document의 window )
detail {{readonlyInline}}long (float)0.
diff --git a/files/ko/web/api/htmlorforeignelement/dataset/index.html b/files/ko/web/api/htmlorforeignelement/dataset/index.html new file mode 100644 index 0000000000..2b2a891dca --- /dev/null +++ b/files/ko/web/api/htmlorforeignelement/dataset/index.html @@ -0,0 +1,127 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - HTMLOrForeignElement + - Property + - Read-only + - Reference +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{APIRef("HTML DOM")}}
+ +

HTMLElement.dataset 읽기 전용 속성은 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공합니다. 반환하는 값은 {{domxref("DOMStringMap")}}으로, 각 데이터 특성마다 하나의 항목을 가집니다. dataset 속성 자체는 읽기 전용이라는 점에 주의하세요. 모든 쓰기 작업은 dataset 안의, 데이터 특성을 나타내는 각각의 속성에 수행해야 합니다. 또한 HTML의 data-이름과, 이에 대응하는 DOM dataset['이름']의 이름은 서로 일치하지 않으나, 다음 규칙에 따라 유사함을 기억하세요.

+ +
    +
  • HTML의 사용자 지정 특성 이름은 data-로 시작합니다. 또한 문자, 숫자, 대시(-), 점(.), 콜론(:), 언더스코어(_)만 사용할 수 있고, ASCII 대문자(A-Z)는 사용할 수 없습니다.
    • +
  • JavaScript의 사용자 지정 특성 이름은 HTML 이름을 카멜 표기법으로 변환한 형태로, 대시, 점 등을 모두 제거합니다.
    • +
+ +

아래의 내용과 함께, Using data attributes 아티클에서는 HTML 데이터 속성을 어떻게 쓰는지 안내를 찾을 수 있습니다. 

+ +

Name conversion

+ +

dash-style 에서 camelCase로 변환: 커스텀 데이터 속성의 이름은 아래의 규칙에 따라 {{ domxref("DOMStringMap") }}의 key로 변환됩니다. 

+ +
    +
  • 접두사 data- 는 삭제됩니다. (대시 포함);
    • +
  • a 부터 z 까지 ASCII 소문자 앞에 오는 모든 대시(U+002D)는 삭제되고 해당 소문자는 대문자로 변환됩니다.
    • +
  • 다른 기호는(다른 대시들을 포함한) 바뀌지 않습니다.
    • +
+ +

camelCase 에서 dash-style로 변환: key를 속성 이름으로 매핑하는 반대의 변환은 아래의 규칙을 따릅니다.:

+ +
    +
  • 제약 조건: 대시 바로 뒤에는 a 에서 z 까지 ASCII 소문자를 쓸 수 없습니다 (변환 전);
    • +
  • 접두사 data- 가 추가됩니다;
    • +
  • A 에서 Z 까지 모든 ASCII 대문자는 대시와 해당 소문자로 변환됩니다;
    • +
  • 다른 문자는 변하지 않습니다.
    • +
+ +

이러한 제약 조건은 반드시 두 변환이 서로의 역이 되도록 합니다.

+ +

예를 들어, data-abc-def 라는 이름의 속성은 abcDef 라는 키에 대응합니다.

+ +

Accessing values

+ +
    +
  • 속성들은 element.dataset.keyname과 같이 dataset의 객체 속성처럼 camelCase 이름(키)을 사용해서 설정하거나 읽을 수 있습니다
    • +
  • 속성들은 또한 element.dataset[keyname]과 같이 객체 속성의 괄호 신택스로 설정하거나 읽을 수 있습니다.
    • +
+ +

Syntax

+ +
    +
  • string = element.dataset.camelCasedName;
    • +
  • element.dataset.camelCasedName = string;
    • +
    +
  • string = element.dataset[camelCasedName];
    • +
  • element.dataset[camelCasedName] = string;
    • +
  • +

    HTML elements에서 사용자가 지정한 data attribute에 직접 설정할 수 있으나 attribute names는 위의 데이터 문법을 반드시 사용해야 합니다.

    +
    • +
+ +

예시

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id === 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// set the data attribute
+el.dataset.dateOfBirth = '1960-10-03';
+// Result: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Result: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Result: 'someDataAttr' in el.dataset === true
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

브라우저 호환성

+ +

{{Compat("api.HTMLElement.dataset")}}

+ +

See also

+ + diff --git a/files/ko/web/api/htmlorforeignelement/tabindex/index.html b/files/ko/web/api/htmlorforeignelement/tabindex/index.html new file mode 100644 index 0000000000..7cbb0fa1f0 --- /dev/null +++ b/files/ko/web/api/htmlorforeignelement/tabindex/index.html @@ -0,0 +1,26 @@ +--- +title: element.tabIndex +slug: Web/API/HTMLElement/tabIndex +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/HTMLOrForeignElement/tabIndex +--- +

{{ ApiRef() }}

+

요약

+

현재 요소의 탭 순서를 get/set.

+

구문

+
element.tabIndex =iIndex
+
+

매개변수

+
    +
  • iIndex는 숫자
    • +
+

예

+
b1 = document.getElementById("button1");
+b1.tabIndex = 1;
+
+

명세

+

tabIndex

+

{{ languages( { "en": "en/DOM/element.tabIndex", "pl": "pl/DOM/element.tabIndex" } ) }}

diff --git a/files/ko/web/api/navigation_timing_api/index.html b/files/ko/web/api/navigation_timing_api/index.html new file mode 100644 index 0000000000..c9a0c1465b --- /dev/null +++ b/files/ko/web/api/navigation_timing_api/index.html @@ -0,0 +1,137 @@ +--- +title: 내비게이션 타이밍(Navigation Timing) +slug: Navigation_timing +translation_of: Web/API/Navigation_timing_API +--- +

Navigation Timing API는 웹 사이트의 성능을 측정하는 데 사용할 수 있는 데이터를 제공합니다. 같은 목적에 사용했던 다른 JavaScript 기반 메커니즘과 다르게 이 API는 더 유용하고 정확한 종단 간(end-to-end) 대기 시간(latency)을 제공할 수 있습니다.

+

다음 예제는 지각하는(perceived) 로딩 시간을 측정하는 법을 보여줍니다.

+
function onLoad() {
+  var now = new Date().getTime();
+  var page_load_time = now - performance.timing.navigationStart;
+  console.log("User-perceived page loading time: " + page_load_time);
+}
+
+

{{domxref("PerformanceTiming")}} 인터페이스로 접근할 수 있는 밀리 초 단위로 주어진 측정된 이벤트가 많이 있습니다. 발생하는 순서로 된 이벤트 목록입니다.

+
    +
  • navigationStart
    • +
  • unloadEventStart
    • +
  • unloadEventEnd
    • +
  • redirectStart
    • +
  • redirectEnd
    • +
  • fetchStart
    • +
  • domainLookupStart
    • +
  • domainLookupEnd
    • +
  • connectStart
    • +
  • connectEnd
    • +
  • secureConnectionStart
    • +
  • requestStart
    • +
  • responseStart
    • +
  • responseEnd
    • +
  • domLoading
    • +
  • domInteractive
    • +
  • domContentLoadedEventStart
    • +
  • domContentLoadedEventEnd
    • +
  • domComplete
    • +
  • loadEventStart
    • +
  • loadEventEnd
    • +
+

window.performance.navigation 객체는 리다이렉트(redirect), 앞/뒤 버튼, 혹은 보통의 URL 로딩이 어떤 페이지 로드를 일으키는지(trigger) 아는 데 사용할 수 있는 두 속성을 저장합니다.

+

window.performance.navigation.type:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
상수값설명
TYPE_NAVIGATENEXT0아래 목록의 TYPE_RELOAD과 TYPE_BACK_FORWARD가 사용하는 것 외에, 링크 클릭하기, 사용자 에이전트(UA) 주소 바에 URL 입력하기, 폼 전송, 스크립트 연산으로 초기화하기로 시작한 내비게이션.
TYPE_RELOAD1리로드(reload) 연산 혹은 location.reload() 메소드를 통한 내비게이션.
TYPE_BACK_FORWARD2히스토리 순회(traversal) 연산을 통한 내비게이션
TYPE_UNDEFINED255위 값으로 정의되지 않는 어떠한 내비게이션 타입.
+

window.performance.navigation.redirectCount는 마지막 페이지에 도달할 때까지, 만일 있다면 몇 번의 리다이렉션이 일어났는지를 나타냅니다.

+

Navigation Timing API는 XHR로 서버에 보낸 클라이언트 쪽 성능 데이터를 모을 뿐 아니라 이전 페이지 언로드(unload) 시간, 도메인 룩업(look up) 시간, window.onload 전체 시간 등 다른 방법으로 측정하기 매우 어려운 데이터를 측정하는 데 사용할 수 있습니다.

+

예제

+

어떤 페이지를 로딩하는 데 필요한 전체 시간 계산하기.

+
var perfData = window.performance.timing;
+var pageLoadTime = perfData.loadEventEnd - perfData.navigationStart;
+
+

요청 응답 시간 계산하기.

+
var connectTime = perfData.responseEnd - perfData.requestStart;
+

링크

+ +

브라우저 호환

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChrome**Firefox (Gecko)*Internet ExplorerOpera*Safari (WebKit)
Basic support +

6

+ 		+

7

+

 

+ 		915{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.015.0{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+

 

diff --git a/files/ko/web/api/navigator/connection/index.html b/files/ko/web/api/navigator/connection/index.html new file mode 100644 index 0000000000..1afa39d9c1 --- /dev/null +++ b/files/ko/web/api/navigator/connection/index.html @@ -0,0 +1,105 @@ +--- +title: window.navigator.connection +slug: Web/API/NetworkInformation/connection +translation_of: Web/API/Navigator/connection +--- +

{{ Apiref() }}

+

{{ SeeCompatTable() }}

+

요약

+

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 연결이 과금되는 지와 같은 정보를 알려줍니다. 이를 이용해서 사용자의 연결에 기반해서 높은 품질의 콘텐츠를 제공할지 낮은 품질의 콘텐츠를 제공할지 선택할 수 있습니다.

+

속성

+
+
+ {{domxref("window.navigator.connection.bandwidth", "connection.bandwidth")}} {{ReadOnlyInline}}
+
+ 현재 연결에 대한 다운로드 대역폭을 MB/s 단위의 double 형태로 알려줍니다. 사용자가 오프라인일 경우는 0이고 알 수 없을 경우에는 infinity로 나옵니다.
+
+ {{domxref("window.navigator.connection.metered", "connection.metered")}} {{ReadOnlyInline}}
+
+ 연결이 과금이 되는 경우(예를 들어 pay-per-use) Boolean 형의 true가 반환됩니다.
+
+

이벤트 핸들러

+
+
+ {{domxref("window.navigator.connection.onchange", "connection.onchange")}}
+
+ {{event("change")}} 이벤트에 대한 이벤트 핸들러 속성입니다. 연결 정보가 변경될 때 이벤트가 발생합니다.
+
+
+

주의: connection 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다.

+
+

명세

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
+

브라우저 호환성

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support20? {{ property_prefix("webkit") }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Gecko 관련 내용

+
    +
  • 네트워크 API는 dom.network.enabled 설정을 통해 비활성화 할 수 있습니다.
    • +
  • metered 속성은 기본값이 false이고 dom.network.metered 설정을 통해 설정할 수 있습니다(로밍시에 과금 상태로 설정하는 방법은 {{ bug("716943") }}를 참고하세요).
    • +
  • Gecko 12.0부터는 네트워크 API가 안드로이드 시스템에서만 사용할 수 있게 구현되어 있습니다. 리눅스({{ bug("712442") }})와 윈도우({{ bug("721306") }})에 대한 지원은 진행중입니다.
    • +
  • Gecko 14.0이전에는 navigator.mozConnection이 {{domxref("EventTarget")}}의 인스턴스가 아니어서 addEventListener()를 사용할 수 없었습니다. 이 문제는 해결되었습니다.
    • +
+

관련 내용

+ diff --git a/files/ko/web/api/network_information_api/index.html b/files/ko/web/api/network_information_api/index.html new file mode 100644 index 0000000000..9526bd2d5f --- /dev/null +++ b/files/ko/web/api/network_information_api/index.html @@ -0,0 +1,46 @@ +--- +title: Network Information API +slug: WebAPI/Network_Information +translation_of: Web/API/Network_Information_API +--- +

{{ SeeCompatTable() }}

+

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.

+

연결상태 변경 감지

+

이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.

+
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
+
+function updateConnectionStatus() {
+  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
+  if (connection.metered) {
+    alert("The connection is metered!");
+  }
+}
+
+connection.addEventListener("change", updateConnectionStatus);
+updateConnectionStatus();
+
+

명세

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
+

브라우저 호환성

+

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

+

관련 내용

+
    +
  • {{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}
    • +
  • Online and offline events
    • +
  • {{domxref("window.navigator.connection")}}
    • +
diff --git a/files/ko/web/api/networkinformation/connection/index.html b/files/ko/web/api/networkinformation/connection/index.html deleted file mode 100644 index 1afa39d9c1..0000000000 --- a/files/ko/web/api/networkinformation/connection/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: window.navigator.connection -slug: Web/API/NetworkInformation/connection -translation_of: Web/API/Navigator/connection ---- -

{{ Apiref() }}

-

{{ SeeCompatTable() }}

-

요약

-

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 연결이 과금되는 지와 같은 정보를 알려줍니다. 이를 이용해서 사용자의 연결에 기반해서 높은 품질의 콘텐츠를 제공할지 낮은 품질의 콘텐츠를 제공할지 선택할 수 있습니다.

-

속성

-
-
- {{domxref("window.navigator.connection.bandwidth", "connection.bandwidth")}} {{ReadOnlyInline}}
-
- 현재 연결에 대한 다운로드 대역폭을 MB/s 단위의 double 형태로 알려줍니다. 사용자가 오프라인일 경우는 0이고 알 수 없을 경우에는 infinity로 나옵니다.
-
- {{domxref("window.navigator.connection.metered", "connection.metered")}} {{ReadOnlyInline}}
-
- 연결이 과금이 되는 경우(예를 들어 pay-per-use) Boolean 형의 true가 반환됩니다.
-
-

이벤트 핸들러

-
-
- {{domxref("window.navigator.connection.onchange", "connection.onchange")}}
-
- {{event("change")}} 이벤트에 대한 이벤트 핸들러 속성입니다. 연결 정보가 변경될 때 이벤트가 발생합니다.
-
-
-

주의: connection 객체는 이벤트를 다루기 위한 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드를 사용할 수 있는 {{domxref("EventTarget")}}을 상속받습니다.

-
-

명세

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
-

브라우저 호환성

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support20? {{ property_prefix("webkit") }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}12.0 {{ property_prefix("moz") }} (see notes){{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-

Gecko 관련 내용

-
    -
  • 네트워크 API는 dom.network.enabled 설정을 통해 비활성화 할 수 있습니다.
    • -
  • metered 속성은 기본값이 false이고 dom.network.metered 설정을 통해 설정할 수 있습니다(로밍시에 과금 상태로 설정하는 방법은 {{ bug("716943") }}를 참고하세요).
    • -
  • Gecko 12.0부터는 네트워크 API가 안드로이드 시스템에서만 사용할 수 있게 구현되어 있습니다. 리눅스({{ bug("712442") }})와 윈도우({{ bug("721306") }})에 대한 지원은 진행중입니다.
    • -
  • Gecko 14.0이전에는 navigator.mozConnection이 {{domxref("EventTarget")}}의 인스턴스가 아니어서 addEventListener()를 사용할 수 없었습니다. 이 문제는 해결되었습니다.
    • -
-

관련 내용

- diff --git a/files/ko/web/api/node/innertext/index.html b/files/ko/web/api/node/innertext/index.html deleted file mode 100644 index 414fab5c00..0000000000 --- a/files/ko/web/api/node/innertext/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Node.innerText -slug: Web/API/Node/innerText -tags: - - API - - DOM - - HTMLElement - - Property - - Reference -translation_of: Web/API/HTMLElement/innerText ---- -
{{APIRef("HTML DOM")}}
- -

{{domxref("HTMLElement")}} 인터페이스의 innerText 속성은 요소와 그 자손의 렌더링 된 텍스트 콘텐츠를 나타냅니다. innerText는 사용자가 커서를 이용해 요소의 콘텐츠를 선택하고 클립보드에 복사했을 때 얻을 수 있는 텍스트의 근삿값을 제공합니다.

- -
-

참고: innerText는 {{domxref("Node.textContent")}}와 혼동하기 쉬우나 중요한 차이점을 가지고 있습니다. 기본적으로, innerText는 텍스트의 렌더링 후 모습을 인식할 수 있지만 textContent는 그렇지 않습니다.

-
- -

구문

- -
const renderedText = htmlElement.innerText
-htmlElement.innerText = string
-
- -

값

- -

요소의 렌더링 된 텍스트 콘텐츠를 나타내는 {{domxref("DOMString")}}. 요소 자체가 렌더링 중이 아니라면 {{domxref("Node.textContent")}} 속성의 값과 동일합니다.

- -

예제

- -

다음 예제는 innerText와 {{domxref("Node.textContent")}}를 비교합니다. innerText가 {{htmlElement("br")}} 태그를 인식하고, 숨겨진 요소를 무시하는 점에 주목하세요.

- -

HTML

- -
<h3>원본 요소:</h3>
-<p id="source">
-  <style>#source { color: red; }</style>
-아래에서<br>이 글을<br>어떻게 인식하는지 살펴보세요.
-  <span style="display:none">숨겨진 글</span>
-</p>
-<h3>textContent 결과:</h3>
-<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
-<h3>innerText 결과:</h3>
-<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>
- -

JavaScript

- -
const source = document.getElementById('source');
-const textContentOutput = document.getElementById('textContentOutput');
-const innerTextOutput = document.getElementById('innerTextOutput');
-
-textContentOutput.innerHTML = source.textContent;
-innerTextOutput.innerHTML = source.innerText;
- -

결과

- -

{{EmbedLiveSample("예제", 700, 450)}}

- -

명세

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}}Introduced, based on the draft of the innerText specification. See whatwg/html#465 and whatwg/compat#5 for history.
- -

브라우저 호환성

- - - -

{{Compat("api.HTMLElement.innerText")}}

- -

같이 보기

- -
    -
  • {{domxref("HTMLElement.outerText")}}
    • -
  • {{domxref("Element.innerHTML")}}
    • -
diff --git a/files/ko/web/api/notifications_api/using_the_notifications_api/index.html b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html new file mode 100644 index 0000000000..351361d2af --- /dev/null +++ b/files/ko/web/api/notifications_api/using_the_notifications_api/index.html @@ -0,0 +1,265 @@ +--- +title: 알림 API 사용하기 +slug: WebAPI/Using_Web_Notifications +translation_of: Web/API/Notifications_API/Using_the_Notifications_API +--- +

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

+ +

웹 페이지나 앱에서 알림(Notifications) API를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.

+ +

일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.

+ +

+ +

물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.

+ +

예시

+ +

웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 Slack 등 이러한 사례를 많이 찾아볼 수 있습니다.

+ +

우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 IndexedDB로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. 할 일 목록 코드를 다운로드하거나, 앱의 라이브 실행을 보세요.

+ +

권한 요청하기

+ +

앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인  요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.

+ +

과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 — 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. 파이어폭스는 이미 72 버전부터 이렇게 하고 있으며 사파리도 하고 있습니다.

+ +

또한 크롬과 파이어폭스에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 {{htmlelement("iframe")}}으로부터의 알림 권한은 요청할 수 없게 되었습니다. 

+ +

현재 권한 상태 확인하기

+ +

권한을 이미 가지고 있는지 확인하려면 {{domxref("Notification.permission")}} 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.

+ +
+
default
+
사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.
+
granted
+
사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.
+
denied
+
사용자가 명시적으로 알림 표시 권한을 거부했습니다.
+
+ +

권한 획득하기

+ +

아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.

+ +
Notification.requestPermission().then(function(result) {
+  console.log(result);
+});
+ +

여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.

+ +
Notification.requestPermission();
+ +

콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.

+ +

예시

+ +

우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.

+ +
<button id="enable">알림 허용</button>
+ +

누르면 다음 askNotificationPermission() 함수를 호출합니다.

+ +
function askNotificationPermission() {
+  // 권한을 실제로 요구하는 함수
+  function handlePermission(permission) {
+    // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함
+    if(!('permission' in Notification)) {
+      Notification.permission = permission;
+    }
+
+    // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정
+    if(Notification.permission === 'denied' || Notification.permission === 'default') {
+      notificationBtn.style.display = 'block';
+    } else {
+      notificationBtn.style.display = 'none';
+    }
+  }
+
+  // 브라우저가 알림을 지원하는지 확인
+  if (!('Notification' in window)) {
+    console.log("이 브라우저는 알림을 지원하지 않습니다.");
+  } else {
+    if(checkNotificationPromise()) {
+      Notification.requestPermission()
+      .then((permission) => {
+        handlePermission(permission);
+      })
+    } else {
+      Notification.requestPermission(function(permission) {
+        handlePermission(permission);
+      });
+    }
+  }
+}
+ +

두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 Notification.requestPermission()의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(사파리 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(사파리에서 지원).

+ +

코드 중복을 피하기 위해 뒷 처리 수행 코드를 handlePermission() 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 Notification.permission 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.

+ +

참고: 크롬 37 버전 전에는 load 이벤트 핸들러에서 {{domxref("Notification.requestPermission()")}}을 호출할 수 없었습니다(이슈 274284 참고).

+ +

requestPermission() 프로미스 기능 알아내기

+ +

위에서 우리는 브라우저가 Notification.requestPermission()의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.

+ +
function checkNotificationPromise() {
+    try {
+      Notification.requestPermission().then();
+    } catch(e) {
+      return false;
+    }
+
+    return true;
+  }
+ +

기본적으로 requestPermission()에 .then() 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 true를 반환합니다. 실패라면 catch() {} 블록에서 false를 반환합니다.

+ +

알림 만들기 

+ +

알림 만들기는 쉬워서 {{domxref("Notification")}} 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 {{domxref("Notification.icon","icon")}}이나 텍스트 {{domxref("Notification.body","body")}} 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.

+ +

예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(createNotification() 함수에서 찾을 수 있음).

+ +
var img = '/to-do-notifications/img/icon-128.png';
+var text = '아! "' + title + '" 작업 기한이 만료됐습니다.';
+var notification = new Notification('할 일 목록', { body: text, icon: img });
+
+ +

알림 닫기

+ +

파이어폭스와 사파리는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수에서 {{domxref("Notification.close")}} 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. bind()를 사용하여 close() 호출이 알림에 연동되게 하는 것도 해줘야 합니다.

+ +
setTimeout(notification.close.bind(notification), 4000);
+ +
+

참고: "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.

+
+ +

알림 이벤트

+ +

{{domxref("Notification")}} 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.

+ +
+
click
+
사용자가 알림을 클릭하면 촉발됩니다.
+
close
+
알림이 닫힌 후 촉발됩니다.
+
error
+
알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.
+
show
+
알림이 사용자에게 표시되면 촉발됩니다.
+
+ +

이 이벤트들은 {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror","onerror")}}, {{domxref("Notification.onshow","onshow")}} 핸들러로 추적할 수 있습니다. {{domxref("Notification")}}이 {{domxref("EventTarget")}}을 상속하기 때문에 {{domxref("EventTarget.addEventListener","addEventListener()")}} 메서드를 사용할 수 있습니다.

+ +

기존 알림 대체하기

+ +

사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.

+ +

이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.

+ +

태그 예시

+ +

다음과 같은 간단한 HTML을 봅시다.

+ +
<button>알림 실행!</button>
+ +

다수의 알림을 아래 방법으로 처리할 수 있습니다.

+ +
window.addEventListener('load', function () {
+  // 처음에는 알림 권한이 있는지 확인함
+  // 없으면 권한 요구
+  if (Notification && Notification.permission !== "granted") {
+    Notification.requestPermission(function (status) {
+      if (Notification.permission !== status) {
+        Notification.permission = status;
+      }
+    });
+  }
+
+  var button = document.getElementsByTagName('button')[0];
+
+  button.addEventListener('click', function () {
+    // 사용자가 알림을 받는 데 동의한 경우
+    // 알림 10개를 보내본다
+    if (Notification && Notification.permission === "granted") {
+      var i = 0;
+      // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
+      var interval = window.setInterval(function () {
+        // 태그 덕분에 "안녕! 9" 알림만 보여야 함
+        var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+        if (i++ == 9) {
+          window.clearInterval(interval);
+        }
+      }, 200);
+    }
+
+    // 사용자가 알림을 받을지 말지 답하지 않은 경우
+    // 참고: 크롬 때문에 권한 속성이 설정됐는지 알 수 없으므로
+    // "기본" 값을 확인하는 것은 안전하지 않음
+    else if (Notification && Notification.permission !== "denied") {
+      Notification.requestPermission(function (status) {
+        // 사용자가 ok한 경우
+        if (status === "granted") {
+          var i = 0;
+          // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
+          var interval = window.setInterval(function () {
+            // 태그 덕분에 "안녕! 9" 알림만 보여야 함
+            var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
+            if (i++ == 9) {
+              window.clearInterval(interval);
+            }
+          }, 200);
+        }
+
+        // 그 외의 경우 일반적인 모달 alert로 폴백
+        else {
+          alert("안녕!");
+        }
+      });
+    }
+
+    // 사용자가 알림을 거부한 경우
+    else {
+      // 일반적인 모달 alert로 폴백
+      alert("안녕!");
+    }
+  });
+});
+ +

라이브 결과는 아래에서 보세요.

+ +

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

+ +

규격

+ + + + + + + + + + + + + + + + +
규격상태비고
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}현행 표준
+ +

브라우저 호환성

+ +

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

+ +

참고

+ + diff --git a/files/ko/web/api/proximity_events/index.html b/files/ko/web/api/proximity_events/index.html new file mode 100644 index 0000000000..ad1687ddd2 --- /dev/null +++ b/files/ko/web/api/proximity_events/index.html @@ -0,0 +1,119 @@ +--- +title: Proximity +slug: WebAPI/Proximity +translation_of: Web/API/Proximity_Events +--- +

{{ SeeCompatTable }}

+

Summary

+

근접 이벤트는 사용자가 디바이스에 가까이 갔을때를 알 수 있는 간단한 벙법이다.

+

예를 들어,  사용자가 전화가 걸려왔을 때 디바이스에 귀를 가까이 하면, 근접 이벤트들은 스마트폰의 화면이 꺼지게 하여 이러한 변화에 대응할 수 있게 해준다.

+
+

Note: 당연히 이 API는 근접 센서를 가진 장치를 필요로 하며, 이 근접 센서는 대게 모바일 다비이스들에서만 이용 가능하다. 근접 센서가 없는 장치들에서는 근접 이벤트들을 지원할 수는 있을 지 몰라도 해당 이벤트들은 절대 발생하지 않을 것이다.

+
+

Proximity Events

+

다비이스 근접 센서가 장치와 대상 사이의 변화를 감지했을 때, 센서는 그  변화를 브라우저에게 알린다. 브라우저는 그 알림을 받으면 그 변화에 대해 {{domxref("DeviceProximityEvent")}} 이벤트를 발생시킨다. 그리고 더 대략적인 변화(more rough change)를 알리기 위해  {{domxref("UserProximityEvent")}} 이벤트를 발생시킨다.

+

window object 레벨에서  {{domxref("EventTarget.addEventListener","addEventListener")}} 메소드 ({{event("deviceproximity")}} 또는 {{event("userproximity")}} 이벤트명) 를 이용하여 근접 이벤트를 전달받을 수 있다. 또한 {{domxref("window.ondeviceproximity")}} 또는 {{domxref("window.onuserproximity")}} 프로퍼티에 이벤트 핸들러를 붙이는 방법으로도 이벤트를 전달받을 수 있다.

+

일단 이벤트가 전달되면, 그 이벤트 오브젝트는 다음과 같은 여러 종류의 정보에 접근할 수 있게 해준다:

+
    +
  •  {{domxref("DeviceProximityEvent")}} 이벤트는 {{domxref("DeviceProximityEvent.value","value")}} 프로퍼티를 통해 디바이스와 대상 사이의 거리에 정확히 매치되는 값을 제공한다. 또한 이 이벤트는 장치가 감지할 수 있는 가장 가까운 거리, 가장 먼거리에 대한 정보를 {{domxref("DeviceProximityEvent.min","min")}} 와  {{domxref("DeviceProximityEvent.max","max")}} 프로퍼티 값을 통해 제공한다.
    • +
  • {{domxref("UserProximityEvent")}} 이벤트는 거리에 대한 대략적인 추정치를 boolean 형태로 제공한다. 대상과 디바이스가 가까운면   {{domxref("UserProximityEvent.near")}} 프로퍼티 값은 true 가 되고, 대상과의 거리가 멀다면 그 값은 false가 된다.
    • +
+

Example

+
window.addEventListener('userproximity', function(event) {
+  if (event.near) {
+    // let's power off the screen
+    navigator.mozPower.screenEnabled = false;
+  } else {
+    // Otherwise, let's power on the screen
+    navigator.mozPower.screenEnabled = true;
+  }
+});
+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Initial specification
+

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{ CompatGeckoMobile("15.0") }}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
+
+

See also

+
    +
  • {{domxref("DeviceProximityEvent")}}
    • +
  • {{domxref("UserProximityEvent")}}
    • +
  • {{event("deviceproximity")}}
    • +
  • {{event("userproximity")}}
    • +
diff --git a/files/ko/web/api/screen.onorientationchange/index.html b/files/ko/web/api/screen.onorientationchange/index.html deleted file mode 100644 index dc1a76013f..0000000000 --- a/files/ko/web/api/screen.onorientationchange/index.html +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: window.screen.onorientationchange -slug: Web/API/Screen.onorientationchange -translation_of: Web/API/Screen/onorientationchange ---- -

{{ ApiRef() }}

-

{{SeeCompatTable}}

-

Summary

-

{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.

-

Syntax

-
screen.onorientationchange = funcRef;
-
-

funcRef 는 함수로의 참조 이다.

-

Specifications

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Screen Orientation')}}{{Spec2('Screen Orientation')}}Draft specification.
-

Browser compatibility

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
-

Gecko notes

-

이 API 는 현재 초안형태이다. 오직 B2G 와 안드로이드용 Firefox 에서 prefixed method (onmozorientationchange) 형태로만 구현된다.

-

See also

- diff --git a/files/ko/web/api/screen/onorientationchange/index.html b/files/ko/web/api/screen/onorientationchange/index.html new file mode 100644 index 0000000000..dc1a76013f --- /dev/null +++ b/files/ko/web/api/screen/onorientationchange/index.html @@ -0,0 +1,85 @@ +--- +title: window.screen.onorientationchange +slug: Web/API/Screen.onorientationchange +translation_of: Web/API/Screen/onorientationchange +--- +

{{ ApiRef() }}

+

{{SeeCompatTable}}

+

Summary

+

{{ event("orientationchange")}} 이벤트를 화면 객체로 보내는 이벤트 핸들러이다.

+

Syntax

+
screen.onorientationchange = funcRef;
+
+

funcRef 는 함수로의 참조 이다.

+

Specifications

+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Screen Orientation')}}{{Spec2('Screen Orientation')}}Draft specification.
+

Browser compatibility

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatVersionUnknown() }} {{ property_prefix("moz") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+

Gecko notes

+

이 API 는 현재 초안형태이다. 오직 B2G 와 안드로이드용 Firefox 에서 prefixed method (onmozorientationchange) 형태로만 구현된다.

+

See also

+ diff --git a/files/ko/web/api/streams_api/concepts/index.html b/files/ko/web/api/streams_api/concepts/index.html new file mode 100644 index 0000000000..9c993b81a3 --- /dev/null +++ b/files/ko/web/api/streams_api/concepts/index.html @@ -0,0 +1,115 @@ +--- +title: Streams API 컨셉 +slug: Web/API/Streams_API/컨셉 +translation_of: Web/API/Streams_API/Concepts +--- +
{{apiref("Streams")}}
+ +

The Streams API adds a very useful set of tools to the web platform, providing objects allowing JavaScript to programmatically access streams of data received over the network and process them as desired by the developer. Some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know.

+ +

Readable streams

+ +

A readable stream is a data source represented in JavaScript by a {{domxref("ReadableStream")}} object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from.

+ +

There are two types of underlying source:

+ +
    +
  • Push sources 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/Web sockets.
    • +
  • Pull sources require you to explicitly request data from them once connected to. Examples include a file access operation via a Fetch or XHR call.
    • +
+ +

컨The data is read sequentially in small pieces called chunks. A chunk can be a single byte, or it can be something larger such as a typed array of a certain size. A single stream can contain chunks of different sizes and types.

+ +

+ +

The chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. An internal queue keeps track of the chunks that have not yet been read (see the Internal queues and queueing strategies section below).

+ +

The chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other processing code that goes along with it is called a consumer.

+ +

There is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).

+ +

Only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it. If you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams, see the Teeing section below)

+ +

Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).

+ +
+

Important: Byte streams are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

+
+ +

You can make use of ready-made readable streams via mechanisms like a {{domxref("Response.body")}} from a fetch request, or roll your own streams using the {{domxref("ReadableStream.ReadableStream()")}} constructor.

+ +

Teeing

+ +

Even though only a single reader can read a stream at once, it is possible to split a stream into two identical copies, which can then be read by two separate readers. This is called teeing.

+ +

In JavaScript, this is achieved via the {{domxref("ReadableStream.tee()")}} method — it outputs an array containing two identical copies of the original readable stream, which can then be read independently by two separate readers.

+ +

You might do this for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this.

+ +

+ +

Writable streams

+ +

A writable stream is a destination into which you can write data, represented in JavaScript by a {{domxref("WritableStream")}} object. This serves as an abstraction over the top of an underlying sink — a lower-level I/O sink into which raw data is written.

+ +

The data is written to the stream via a writer, one chunk at a time. A chunk can take a multitude of forms, just like the chunks in a reader. You can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer.

+ +

When a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. Only one writer can write to a writable stream at one time. If you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it.

+ +

An internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink.

+ +

There is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).

+ +

+ +

You can make use of writable streams using the {{domxref("WritableStream.WritableStream()")}} constructor. These currently have very limited availability in browsers.

+ +

Pipe chains

+ +

The Streams API makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain. There are two methods available in the spec to facilitate this:

+ +
    +
  • {{domxref("ReadableStream.pipeThrough()")}} — pipes the stream through a transform stream, 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 Transform streams for ideas, and this web sockets example.
    • +
  • {{domxref("ReadableStream.pipeTo()")}} — pipes to a writable stream that acts as the end point of the pipe chain.
    • +
+ +

The start of the pipe chain is called the original source, and the end is called the ultimate sink.

+ +

+ +
+

Note: This functionality isn't fully thought through yet, or available in many browsers. At some point the spec writers hope to add something like a TransformStream class to make creating transform streams easier.

+
+ +

Backpressure

+ +

An important concept in streams is backpressure — this is the process by which a single stream or a pipe chain regulates the speed of reading/writing. When a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.

+ +

To use backpressure in a ReadableStream, we can ask the controller for the chunk size  desired by the consumer by querying the {{domxref("ReadableStreamDefaultController.desiredSize")}} attribute on the controller. If it is too low, our ReadableStream can tell its underlying source to stop sending data, and we backpressure along the stream chain.

+ +

If later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our stream with data.

+ +

Internal queues and queuing strategies

+ +

As mentioned earlier, the chunks in a stream that have not yet been processed and finished with are kept track of by an internal queue.

+ +
    +
  • In the case of readable streams, these are the chunks that have been enqueued but not yet read
    • +
  • In the case of writable streams, these are chunks that have been written but not yet processed by the underlying sink.
    • +
+ +

Internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state.

+ +

In general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage.

+ +

The calculation performed is

+ +
high water mark - total size of chunks in queue = desired size
+ +

The desired size is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. After the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero. If the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems.

+ +
+

Note: What happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. Patience is a virtue.

+
+ +

As an example, let's take a chunk size of 1, and a high water mark of 3. This means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied.

diff --git "a/files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" "b/files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" deleted file mode 100644 index 9c993b81a3..0000000000 --- "a/files/ko/web/api/streams_api/\354\273\250\354\205\211/index.html" +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: Streams API 컨셉 -slug: Web/API/Streams_API/컨셉 -translation_of: Web/API/Streams_API/Concepts ---- -
{{apiref("Streams")}}
- -

The Streams API adds a very useful set of tools to the web platform, providing objects allowing JavaScript to programmatically access streams of data received over the network and process them as desired by the developer. Some of the concepts and terminology associated with streams might be new to you — this article explains all you need to know.

- -

Readable streams

- -

A readable stream is a data source represented in JavaScript by a {{domxref("ReadableStream")}} object that flows from an underlying source — this is a resource somewhere on the network or elsewhere on your domain that you want to get data from.

- -

There are two types of underlying source:

- -
    -
  • Push sources 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/Web sockets.
    • -
  • Pull sources require you to explicitly request data from them once connected to. Examples include a file access operation via a Fetch or XHR call.
    • -
- -

컨The data is read sequentially in small pieces called chunks. A chunk can be a single byte, or it can be something larger such as a typed array of a certain size. A single stream can contain chunks of different sizes and types.

- -

- -

The chunks placed in a stream are said to be enqueued — this means they are waiting in a queue ready to be read. An internal queue keeps track of the chunks that have not yet been read (see the Internal queues and queueing strategies section below).

- -

The chunks inside the stream are read by a reader — this processes the data one chunk at a time, allowing you to do whatever kind of operation you want to do on it. The reader plus the other processing code that goes along with it is called a consumer.

- -

There is also a construct you’ll use called a controller — each reader has an associated controller that allows you to control the stream (for example, to cancel it if wished).

- -

Only one reader can read a stream at a time; when a reader is created and starts reading a stream (an active reader), we say it is locked to it. If you want another reader to start reading your stream, you typically need to cancel the first reader before you do anything else (although you can tee streams, see the Teeing section below)

- -

Note that there are two different types of readable stream. As well as the conventional readable stream there is a type called a byte stream — this is an extended version of a conventional stream for reading underlying byte sources (otherwise known as BYOB, or “bring your own buffer”) sources. These allow streams to be read straight into a buffer supplied by the developer, minimizing the copying required. Which underlying stream (and by extension, reader and controller) your code will use depends on how the stream was created in the first place (see the {{domxref("ReadableStream.ReadableStream()")}} constructor page).

- -
-

Important: Byte streams are not implemented anywhere as yet, and questions have been raised as to whether the spec details are in a finished enough state for them to be implemented. This may change over time.

-
- -

You can make use of ready-made readable streams via mechanisms like a {{domxref("Response.body")}} from a fetch request, or roll your own streams using the {{domxref("ReadableStream.ReadableStream()")}} constructor.

- -

Teeing

- -

Even though only a single reader can read a stream at once, it is possible to split a stream into two identical copies, which can then be read by two separate readers. This is called teeing.

- -

In JavaScript, this is achieved via the {{domxref("ReadableStream.tee()")}} method — it outputs an array containing two identical copies of the original readable stream, which can then be read independently by two separate readers.

- -

You might do this for example in a ServiceWorker if you want to fetch a response from the server and stream it to the browser, but also stream it to the ServiceWorker cache. Since a response body cannot be consumed more than once, and a stream can't be read by more than one reader at once, you’d need two copies to do this.

- -

- -

Writable streams

- -

A writable stream is a destination into which you can write data, represented in JavaScript by a {{domxref("WritableStream")}} object. This serves as an abstraction over the top of an underlying sink — a lower-level I/O sink into which raw data is written.

- -

The data is written to the stream via a writer, one chunk at a time. A chunk can take a multitude of forms, just like the chunks in a reader. You can use whatever code you like to produce the chunks ready for writing; the writer plus the associated code is called a producer.

- -

When a writer is created and starts writing to a stream (an active writer), it is said to be locked to it. Only one writer can write to a writable stream at one time. If you want another writer to start writing to your stream, you typically need to abort it before you then attach another writer to it.

- -

An internal queue keeps track of the chunks that have been written to the stream but not yet been processed by the underlying sink.

- -

There is also a construct you’ll use called a controller — each writer has an associated controller that allows you to control the stream (for example, to abort it if wished).

- -

- -

You can make use of writable streams using the {{domxref("WritableStream.WritableStream()")}} constructor. These currently have very limited availability in browsers.

- -

Pipe chains

- -

The Streams API makes it possible to pipe streams into one another (or at least it will do when browsers implement the relevant functionality) using a structure called a pipe chain. There are two methods available in the spec to facilitate this:

- -
    -
  • {{domxref("ReadableStream.pipeThrough()")}} — pipes the stream through a transform stream, 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 Transform streams for ideas, and this web sockets example.
    • -
  • {{domxref("ReadableStream.pipeTo()")}} — pipes to a writable stream that acts as the end point of the pipe chain.
    • -
- -

The start of the pipe chain is called the original source, and the end is called the ultimate sink.

- -

- -
-

Note: This functionality isn't fully thought through yet, or available in many browsers. At some point the spec writers hope to add something like a TransformStream class to make creating transform streams easier.

-
- -

Backpressure

- -

An important concept in streams is backpressure — this is the process by which a single stream or a pipe chain regulates the speed of reading/writing. When a stream later in the chain is still busy and isn't yet ready to accept more chunks, it sends a signal backwards through the chain to tell earlier transform streams (or the original source) to slow down delivery as appropriate so that you don't end up with a bottleneck anywhere.

- -

To use backpressure in a ReadableStream, we can ask the controller for the chunk size  desired by the consumer by querying the {{domxref("ReadableStreamDefaultController.desiredSize")}} attribute on the controller. If it is too low, our ReadableStream can tell its underlying source to stop sending data, and we backpressure along the stream chain.

- -

If later on the consumer again wants to receive data, we can use the pull method in the stream creation to tell our underlying source to feed our stream with data.

- -

Internal queues and queuing strategies

- -

As mentioned earlier, the chunks in a stream that have not yet been processed and finished with are kept track of by an internal queue.

- -
    -
  • In the case of readable streams, these are the chunks that have been enqueued but not yet read
    • -
  • In the case of writable streams, these are chunks that have been written but not yet processed by the underlying sink.
    • -
- -

Internal queues employ a queuing strategy, which dictates how to signal backpressure based on the internal queue state.

- -

In general, the strategy compares the size of the chunks in the queue to a value called the high water mark, which is the largest total chunk size that the queue can realistically manage.

- -

The calculation performed is

- -
high water mark - total size of chunks in queue = desired size
- -

The desired size is the size of chunks the stream can still accept to keep the stream flowing but below the high water mark in size. After the calculation is performed, chunk generation will be slowed down/sped up as appropriate to keep the stream flowing as fast as possible while keeping the desired size above zero. If the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which results in problems.

- -
-

Note: What happens in the case of zero or negative desired size hasn’t really been defined in the spec so far. Patience is a virtue.

-
- -

As an example, let's take a chunk size of 1, and a high water mark of 3. This means that up to 3 chunks can be enqueued before the high water mark is reached and backpressure is applied.

diff --git a/files/ko/web/api/vibration_api/index.html b/files/ko/web/api/vibration_api/index.html new file mode 100644 index 0000000000..16271ff248 --- /dev/null +++ b/files/ko/web/api/vibration_api/index.html @@ -0,0 +1,100 @@ +--- +title: Vibration API +slug: Web/Guide/API/Vibration/Vibration +translation_of: Web/API/Vibration_API +--- +
{{DefaultAPISidebar("Vibration API")}}
+ +

요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.

+ +

Vibration API는 웹앱들이 기기에 장착된 물리 진동장치를 통해 진동을 전달할 수 있도록 해줍니다. 하지만 대응하는 진동 장치가 없는 기기일 경우 아무일도 일어나지 않습니다.

+ +

Describing vibrations

+ +

바이브레이션은 온오프 펄스들의 패턴이라고 할 수 있는데, 이 펄스들은 아마도 다양한 길이를 가질 것이다. 이 패턴은 아마 하나의 정수값으로 구성될 수 있는데 이 정수값은 진동이 일어날 밀리세컨드 수를 의미한다. 또한 이 패턴은 정수 배열이 될 수도 있는데 이것은 진동과 정지들의 패턴을 의미한다. 바이브레이션은 {{domxref("window.navigator.vibrate()")}} 라는 하나의 메소드로 제어된다.

+ +

한번 진동시키기

+ +

여러분은 다음과 같이 하나의 값 또는 하나의 값으로 구성된 배열을 명시함으로써 바이브레이션 하드웨어를 1회 진동시킬 수 있을 것이다.

+ +
window.navigator.vibrate(200);
+window.navigator.vibrate([200]);
+
+ +

이 두 가지 예제들은 디바이스를 200ms 동안 진동시킨다.

+ +

패턴이 있는 진동 만들기

+ +

배 열에 있는 값들은 다바이스가 진동해야 하는 시간과 진동하지 않아야 하는 시간을 번갈아가며 적어놓은 것이다. 배열에 있는 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석된다. 다음 예제를 보자.

+ +
window.navigator.vibrate([200, 100, 200]);
+
+ +

이 예제는 장치를 200ms 동안 진동시킨 후 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킨다.

+ +

여 러분은 여러분이 원하는 진동/정지 페어를 명시할 수 있다. 그리고 배열 내에 홀수 또는 짝수개의 값들을 명시할 수도 있다. 이렇게 하는 이유는 각각의 진동 시간이 끝나면 디바이스의 진동은 자동적으로 멈추게 되므로 배열의 마지막 값이 정지에 해당하는 값이라면 그 값은 아무 의미가 없기 때문이다.

+ +

이미 실행중인 진동 캔슬하기

+ +

{{domxref("window.navigator.vibrate()")}} 메소드를 0값을 호출하거나, 빈 배열, 0값으로 구성된 배열로 호출하면 현재 진행중인 진동패턴은 취소될 것이다.

+ +

지속적인 진동 내보내기

+ +

Some basic setInterval and clearInterval action will allow you to create persistent vibration:

+ +
var vibrateInterval;
+
+// Starts vibration at passed in level
+function startVibrate(duration) {
+    navigator.vibrate(duration);
+}
+
+// Stops vibration
+function stopVibrate() {
+    // Clear interval and stop persistent vibrating
+    if(vibrateInterval) clearInterval(vibrateInterval);
+    navigator.vibrate(0);
+}
+
+// Start persistent vibration at given duration and interval
+// Assumes a number value is given
+function startPeristentVibrate(duration, interval) {
+    vibrateInterval = setInterval(function() {
+        startVibrate(duration);
+    }, interval);
+}
+ +

Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).

+ +

Why use Vibration API?

+ +

This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications. Imagine watching a video on your mobile device, and during an explosion scene, your phone got a bit of a shake. Or playing Bomberman and feeling a gentle kick when a block explodes!

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Initial specification.
+ +

브라우저 호환성

+ +
{{Compat("api.Navigator.vibrate")}}
+ +

같이 보기

+ +
    +
  • {{domxref("window.navigator.vibrate()")}}
    • +
diff --git a/files/ko/web/api/web_workers_api/basic_usage/index.html b/files/ko/web/api/web_workers_api/basic_usage/index.html deleted file mode 100644 index eb0e309e8e..0000000000 --- a/files/ko/web/api/web_workers_api/basic_usage/index.html +++ /dev/null @@ -1,908 +0,0 @@ ---- -title: 웹 워커 사용하기 -slug: Web/API/Web_Workers_API/basic_usage -translation_of: Web/API/Web_Workers_API/Using_web_workers ---- -
-

웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( responseXML 과 channel속성이 언제나 null이지만) XMLHttpRequest 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.

-
- -

Web Workers API

- -

Worker는 생성자(예를 들면 {{domxref("Worker.Worker", "Worker()")}})를 사용하여 생성된 객체이며 이름있는 자바스크립트 파일(이 파일은 Worker 스레드에서 실행하는 코드를 가집니다)을 실행합니다. 또한 Worker는 현재의 {{domxref("window")}}와는 다른 글로벌 컨텍스트에서 실행됩니다. 따라서 {{domxref("Worker")}} 내에서 현재의 글로벌 스코프를 접근하기 위해 ({{domxref("window.self","self")}} 대신에) {{domxref("window")}}를 사용해도 오류가 돌아옵니다.

- -

Worker의 콘텍스트는 Dedicated Workers(한 개의 스크립트가 이용하는 표준적인 Workers)일 경우{{domxref("DedicatedWorkerGlobalScope")}} 객체로 제공됩니다. (Shared Workers의 경우는 {{domxref("SharedWorkerGlobalScope")}}). Dedicated Worker 는 Worker 를 처음에 생성한 스크립트만 액세스 할 수 있습니다. 반면에 Shared Worker는, 복수의 스크립트에서 액세스 할 수 있습니다.

- -
-

메모: Worker 의 레퍼런스 문서나 추가적인 가이드에 대해서는 The Web Workers API landing page를 봐 주세요.

-
- -

Worker Thread에서는 몇 가지 제한 하에서 어떤 코드라도 실행할 수 있습니다. 예를 들어, Worker내에서는 직접 DOM 를 조작할 수 없습니다. 그리고 {{domxref("window")}} 객체의 기본 메서드나 속성에서 사용할 수 없는 것들이 있습니다. 그럼에도 WebSockets과 IndexedDB, Data Store API(Firefox OS 한정)와 같은 데이터 스토리지 메커니즘 등, window에 있는 다수의 아이템을 사용할 수 있습니다.자세한 것은 Functions and classes available to workers를 봐 주세요.

- -

Worker와 메인 스레드 사이에서는 메시지 시스템을 통해 데이터를 발송합니다. 양쪽 모두 postMessage() 메서드를 사용하여 메시지를 발송하고, onmessage이벤트 핸들러에 의해 메시지에 응답합니다(메시지는 {{event("Message")}}이벤트의 data 속성에 들어갑니다). 데이터는 공유되지 않고 복사됩니다.

- -

Worker 는 새로운 Worker 를 작성할 수 있습니다만, 생성된 Worker는 같은 부모 페이지일 경우에 한합니다. 추가적으로 Worker는 네트워크 I/O를 위한 XMLHttpRequest를 사용할 수 있으나,  responseXML의 exception과 channel속성의 XMLHttpRequest는 항상 null을 반환합니다.

- -

Dedicated workers

- -

As mentioned above, a dedicated worker is only accessible by the script that called it. In this section we'll discuss the JavaScript found in our Basic dedicated worker example (run dedicated worker): This allows you to enter two numbers to be multiplied together. The numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed.

- -

This example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. More advanced details are covered later on in the article.

- -

Worker feature detection

- -

For slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js):

- -
if (window.Worker) {
-
-  ...
-
-}
- -

Spawning a dedicated worker

- -

Creating a new worker is simple. All you need to do is call the {{domxref("Worker.Worker", "Worker()")}} constructor, specifying the URI of a script to execute in the worker thread (main.js):

- -
var myWorker = new Worker("worker.js");
- -

Sending messages to and from a dedicated worker

- -

The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

- -
first.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
-
-second.onchange = function() {
-  myWorker.postMessage([first.value,second.value]);
-  console.log('Message posted to worker');
-}
- -

So here we have two {{htmlelement("input")}} elements represented by the variables first and second; when the value of either is changed, myWorker.postMessage([first.value,second.value]) is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.

- -

In the worker, we can respond when the message is received by writing an event handler block like this (worker.js):

- -
onmessage = function(e) {
-  console.log('Message received from main script');
-  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-  console.log('Posting message back to main script');
-  postMessage(workerResult);
-}
- -

The onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute. Here we simply multiply together the two numbers then use postMessage() again, to post the result back to the main thread.

- -

Back in the main thread, we use onmessage again, to respond to the message sent back from the worker:

- -
myWorker.onmessage = function(e) {
-  result.textContent = e.data;
-  console.log('Message received from worker');
-}
- -

Here we grab the message event data and set it as the textContent of the result paragraph, so the user can see the result of the calculation.

- -
-

Note: The URI passed as a parameter to the Worker constructor must obey the same-origin policy .

- -

There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 {{geckoRelease("10.0")}} and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.

-
- -
-

Note: Notice that onmessage and postMessage() need to be hung off the Worker object when used in the main script thread, but not when used in the worker. This is because, inside the worker, the worker is effectively the global scope.

-
- -
-

Note: When a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared. Read {{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} for a much more thorough explanation.

-
- -

Terminating a worker

- -

If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's {{domxref("Worker", "terminate")}} method:

- -
myWorker.terminate();
- -

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

- -

In the worker thread, workers may close themselves by calling their own {{domxref("WorkerGlobalScope", "close")}} method:

- -
close();
- -

Handling errors

- -

When a runtime error occurs in the worker, its onerror event handler is called. It receives an event named error which implements the ErrorEvent interface.

- -

The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

- -

The error event has the following three fields that are of interest:

- -
-
message
-
A human-readable error message.
-
filename
-
The name of the script file in which the error occurred.
-
lineno
-
The line number of the script file on which the error occurred.
-
- -

Spawning subworkers

- -

Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the same origin as the parent page. Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page. This makes it easier for workers to keep track of where their dependencies are.

- -

Importing scripts and libraries

- -

Worker threads have access to a global function, importScripts(), which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:

- -
importScripts();                         /* imports nothing */
-importScripts('foo.js');                 /* imports just "foo.js" */
-importScripts('foo.js', 'bar.js');       /* imports two scripts */
-importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
- -

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations after the importScripts()method are also kept, since these are always evaluated before the rest of the code.

- -
-

Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.

-
- -

Shared workers

- -

A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. In this section we'll discuss the JavaScript found in our Basic shared worker example (run shared worker): This is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: multiplying two numbers, or squaring a number. Both scripts use the same worker to do the actual calculation required.

- -

Here we'll concentrate on the differences between dedicated and shared workers. Note that in this example we have two HTML pages, each with JavaScript applied that uses the same single worker file.

- -
-

Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).

-
- -
-

Note: In Firefox, shared workers cannot be shared between documents loaded in private and non-private windows ({{bug(1177621)}}).

-
- -

Spawning a shared worker

- -

Spawning a new worker is pretty much the same as with a dedicated worker, but with a different constructor name (see index.html and index2.html) — each one has to spin up the worker using code like the following:

- -
var myWorker = new SharedWorker("worker.js");
- -

One big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).

- -

The port connection needs to be started either implicitly by use of the onmessage event handler or explicitly with the start()method before any messages can be posted. Although the multiply.js and worker.js files in the demo currently call the start()method, those calls are not necessary since the onmessage event handler is being used. Calling start() is only needed if the message event is wired up via the addEventListener() method.

- -

When using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.

- -
myWorker.port.start();  // called in parent thread
- -
port.start(); // called in worker thread, assuming the port variable references a port
- -

Sending messages to and from a shared worker

- -

Now messages can be sent to the worker as before, but the postMessage() method has to be invoked through the port object (again, you'll see similar constructs in both multiply.js and square.js):

- -
squareNumber.onchange = function() {
-  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
-  console.log('Message posted to worker');
-}
- -

Now, on to the worker. There is a bit more complexity here as well (worker.js):

- -
onconnect = function(e) {
-  var port = e.ports[0];
-
-  port.onmessage = function(e) {
-    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
-    port.postMessage(workerResult);
-  }
-}
- -

First, we use an onconnect handler to fire code when a connection to the port happens (i.e. when the onmessage event handler in the parent thread is setup, or when the start() method is explicitly called in the parent thread).

- -

We use the ports attribute of this event object to grab the port and store it in a variable.

- -

Next, we add a message handler on the port to do the calculation and return the result to the main thread. Setting up this messagehandler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to port.start() is not actually needed, as noted above.

- -

Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both multiply.js and square.js):

- -
myWorker.port.onmessage = function(e) {
-  result2.textContent = e.data;
-  console.log('Message received from worker');
-}
- -

When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.

- -

About thread safety

- -

The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.

- -

However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.

- -

Content security policy

- -

Workers are considered to have their own execution context, distinct from the document that created them. For this reasons they are, in general, not governed by the content security policy of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:

- -
Content-Security-Policy: script-src 'self'
- -

Among other things, this will prevent any scripts it includes from using eval(). However, if the script constructs a worker, code running in the worker's context will be allowed to use eval().
-
- To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which delivered the worker script itself.
-
- The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the CSP of the document or worker than created it.

- -

Transferring data to and from workers: further details

- -

Data passed between the main page and workers is copied, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker do not share the same instance, so the end result is that a duplicate is created on each end. Most browsers implement this feature as structured cloning.

- -

To illustrate this, let's create for didactical purpose a function named emulateMessage(), which will simulate the behavior of a value that is cloned and not shared during the passage from a worker to the main page or vice versa:

- -
function emulateMessage (vVal) {
-    return eval("(" + JSON.stringify(vVal) + ")");
-}
-
-// Tests
-
-// test #1
-var example1 = new Number(3);
-console.log(typeof example1); // object
-console.log(typeof emulateMessage(example1)); // number
-
-// test #2
-var example2 = true;
-console.log(typeof example2); // boolean
-console.log(typeof emulateMessage(example2)); // boolean
-
-// test #3
-var example3 = new String("Hello World");
-console.log(typeof example3); // object
-console.log(typeof emulateMessage(example3)); // string
-
-// test #4
-var example4 = {
-    "name": "John Smith",
-    "age": 43
-};
-console.log(typeof example4); // object
-console.log(typeof emulateMessage(example4)); // object
-
-// test #5
-function Animal (sType, nAge) {
-    this.type = sType;
-    this.age = nAge;
-}
-var example5 = new Animal("Cat", 3);
-alert(example5.constructor); // Animal
-alert(emulateMessage(example5).constructor); // Object
- -

A value that is cloned and not shared is called message. As you will probably know by now, messages can be sent to and from the main thread by using postMessage(), and the message event's {{domxref("MessageEvent.data", "data")}} attribute contains data passed back from the worker.

- -

example.html: (the main page):

- -
var myWorker = new Worker("my_task.js");
-
-myWorker.onmessage = function (oEvent) {
-  console.log("Worker said : " + oEvent.data);
-};
-
-myWorker.postMessage("ali");
- -

my_task.js (the worker):

- -
postMessage("I\'m working before postMessage(\'ali\').");
-
-onmessage = function (oEvent) {
-  postMessage("Hi " + oEvent.data);
-};
- -

The structured cloning algorithm can accept JSON and a few things that JSON can't — like circular references.

- -

Passing data examples

- -

Example #1: Create a generic "asynchronous eval()"

- -

The following example shows how to use a worker in order to asynchronously execute any JavaScript code allowed in a worker, through eval() within the worker:

- -
// Syntax: asyncEval(code[, listener])
-
-var asyncEval = (function () {
-  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
-
-  oParser.onmessage = function (oEvent) {
-    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
-    delete aListeners[oEvent.data.id];
-  };
-
-  return function (sCode, fListener) {
-    aListeners.push(fListener || null);
-    oParser.postMessage({
-      "id": aListeners.length - 1,
-      "code": sCode
-    });
-  };
-})();
- -

The data URL is equivalent to a network request, with the following response:

- -
onmessage = function (oEvent) {
-  postMessage({
-    "id": oEvent.data.id,
-    "evaluated": eval(oEvent.data.code)
-  });
-}
- -

Sample usage:

- -
// asynchronous alert message...
-asyncEval("3 + 2", function (sMessage) {
-    alert("3 + 2 = " + sMessage);
-});
-
-// asynchronous print message...
-asyncEval("\"Hello World!!!\"", function (sHTML) {
-    document.body.appendChild(document.createTextNode(sHTML));
-});
-
-// asynchronous void...
-asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
- -

Example #2: Advanced passing JSON Data and creating a switching system

- -

If you have to pass some complex data and have to call many different functions both on the main page and in the Worker, you can create a system which groups everything together.

- -

First, we create a QueryableWorker class that takes the url of the worker, a default listener, and an error handler, and this class is gonna keep track of a list of listeners and help us communicate wirh the worker:

- -
function QueryableWorker(url, defaultListener, onError){
-    var instance = this,
-        worker = new Worker(url),
-        listeners = {};
-
-    this.defaultListener = defaultListener || function(){};
-
-    if (onError) {worker.onerror = onError;}
-
-    this.postMessage = function(message){
-        worker.postMessage(message);
-    }
-
-    this.terminate = function(){
-        worker.terminate();
-    }
-}
- -

Then we add the methods of adding/removing listeners:

- -
this.addListeners = function(name, listener){
-    listeners[name] = listener;
-}
-
-this.removeListeners = function(name){
-    delete listeners[name];
-}
- -

Here we let the worker handle two simple operations for illuatration: getting the difference of two numbers and making an alert after three seconds. In order to acheieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.

- -
/*
-  This functions takes at least one argument, the method name we want to query.
-  Then we can pass in the arguments that the method needs.
- */
-this.sendQuery = function(){
-    if (arguments.length < 1){
-         throw new TypeError("QueryableWorker.sendQuery takes at least one argument");
-         return;
-    }
-    worker.postMessage({
-        "queryMethod": arguments[0],
-        "queryArguments": Array.prototype.slice.call(arguments, 1)
-    });
-}
- -

We finish QueryableWorker with the onmessage method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in listeners.:

- -
worker.onmessage = function(event){
-    if (event.data instanceof Object &&
-        event.data.hasOwnProperty("queryMethodListener") &&
-        event.data.hasOwnProperty("queryMethodArguments")){
-        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-    } else {
-        this.defaultListener.call(instance, event.data);
-    }
-}
- -

Now onto the worker.  First we need to have the methods to handle the two simple operations:

- -
var queryableFunctions = {
-    getDifference: function(a, b){
-        reply("printStuff", a - b);
-    },
-    waitSomeTime: function(){
-        setTimeout(function(){
-            reply("doAlert", 3, "seconds");
-        }, 3000);
-    }
-}
-
-function reply(){
-    if (arguments.length < 1) {
-        throw new TypeError("reply - takes at least one argument");
-        return;
-    }
-    postMessage({
-        queryMethodListener: arguments[0],
-        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
-    });
-}
-
-/* This method is called when main page calls QueryWorker's postMessage method directly*/
-function defaultReply(message){
-    // do something
-}
- -

And the onmessage method is now trivial:

- -
onmessage = function(event){
-    if (event.data instanceof Object &&
-        event.data.hasOwnProperty("queryMethod") &&
-        event.data.hasOwnProperty("queryMethodArguments")){
-        queryableFunctions[event.data.queryMethod]
-            .apply(self, event.data.queryMethodArguments);
-    } else {
-        defaultReply(event.data);
-    }
-}
- -

Here are the full implementation:

- -

example.html (the main page):

- -
<!doctype html>
-  <html>
-    <head>
-      <meta charset="UTF-8"  />
-      <title>MDN Example - Queryable worker</title>
-    <script type="text/javascript">
-    /*
-      QueryableWorker instances methods:
-        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
-        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
-        * terminate(): terminates the Worker
-        * addListener(name, function): adds a listener
-        * removeListener(name): removes a listener
-      QueryableWorker instances properties:
-        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
-     */
-    function QueryableWorker(url, defaultListener, onError){
-      var instance = this,
-      worker = new Worker(url),
-      listeners = {};
-
-      this.defaultListener = defaultListener || function(){};
-
-      if (onError) {worker.onerror = onError;}
-
-      this.postMessage = function(message){
-        worker.postMessage(message);
-      }
-
-      this.terminate = function(){
-        worker.terminate();
-      }
-
-      this.addListeners = function(name, listener){
-        listeners[name] = listener;
-      }
-
-      this.removeListeners = function(name){
-        delete listeners[name];
-      }
-
-      worker.onmessage = function(event){
-        if (event.data instanceof Object &&
-          event.data.hasOwnProperty("queryMethodListener") &&
-          event.data.hasOwnProperty("queryMethodArguments")){
-          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
-        } else {
-          this.defaultListener.call(instance, event.data);
-        }
-      }
-    }
-
-    // your custom "queryable" worker
-    var myTask = new QueryableWorker("my_task.js");
-
-    // your custom "listeners"
-    myTask.addListener("printStuff", function (result) {
-      document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + result + "!"));
-    });
-
-    myTask.addListener("doAlert", function (time, unit) {
-      alert("Worker waited for " + time + " " + unit + " :-)");
-    });
-</script>
-</head>
-<body>
-  <ul>
-    <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
-    <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
-    <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
-  </ul>
-</body>
-</html>
- -

my_task.js (the worker):

- -
var queryableFunctions = {
-  // example #1: get the difference between two numbers:
-  getDifference: function (nMinuend, nSubtrahend) {
-      reply("printSomething", nMinuend - nSubtrahend);
-  },
-  // example #2: wait three seconds
-  waitSomeTime: function () {
-      setTimeout(function() { reply("doAlert", 3, "seconds"); }, 3000);
-  }
-};
-
-// system functions
-
-function defaultReply (message) {
-  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
-  // do something
-}
-
-function reply () {
-  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
-  postMessage({ "queryMethodListener": arguments[0], "queryMethodArguments": Array.prototype.slice.call(arguments, 1) });
-}
-
-onmessage = function (oEvent) {
-  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("queryMethod") && oEvent.data.hasOwnProperty("queryMethodArguments")) {
-    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
-  } else {
-    defaultReply(oEvent.data);
-  }
-};
- -

It is possible to switch the content of each mainpage -> worker and worker -> mainpage message. And the property names "queryMethod", "queryMethodListeners", "queryMethodArguments" can be anything as long as they are consistent in QueryableWorker and the worker.

- -

Passing data by transferring ownership (transferable objects)

- -

Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the {{domxref("Transferable")}} interface) to or from a worker with high performance. Transferable objects are transferred from one context to another with a zero-copy operation, which results in a vast performance improvement when sending large data sets. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred. Its ownership is transferred to the new context. For example, when transferring an {{domxref("ArrayBuffer")}} from your main app to a worker script, the original {{domxref("ArrayBuffer")}} is cleared and no longer usable. Its content is (quite literally) transferred to the worker context.

- -
// Create a 32MB "file" and fill it.
-var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
-for (var i = 0; i < uInt8Array.length; ++i) {
-  uInt8Array[i] = i;
-}
-
-worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
- -
-

Note: For more information on transferable objects, performance, and feature-detection for this method, read Transferable Objects: Lightning Fast! on HTML5 Rocks.

-
- -

Embedded workers

- -

There is not an "official" way to embed the code of a worker within a web page, like {{HTMLElement("script")}} elements do for normal scripts. But a {{HTMLElement("script")}} element that does not have a src attribute and has a type attribute that does not identify an executable MIME type can be considered a data block element that JavaScript could use. "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

- -
<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8" />
-<title>MDN Example - Embedded worker</title>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
-  var myVar = "Hello World!";
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
-  function pageLog (sMsg) {
-    // Use a fragment: browser will only render/reflow once.
-    var oFragm = document.createDocumentFragment();
-    oFragm.appendChild(document.createTextNode(sMsg));
-    oFragm.appendChild(document.createElement("br"));
-    document.querySelector("#logDisplay").appendChild(oFragm);
-  }
-</script>
-<script type="text/js-worker">
-  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
-  onmessage = function (oEvent) {
-    postMessage(myVar);
-  };
-  // Rest of your worker code goes here.
-</script>
-<script type="text/javascript">
-  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
-
-  // In the past...:
-  // blob builder existed
-  // ...but now we use Blob...:
-  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
-
-  // Creating a new document.worker property containing all our "text/js-worker" scripts.
-  document.worker = new Worker(window.URL.createObjectURL(blob));
-
-  document.worker.onmessage = function (oEvent) {
-    pageLog("Received: " + oEvent.data);
-  };
-
-  // Start the worker.
-  window.onload = function() { document.worker.postMessage(""); };
-</script>
-</head>
-<body><div id="logDisplay"></div></body>
-</html>
- -

The embedded worker is now nested into a new custom document.worker property.

- -

It is also worth noting that you can also convert a function into a Blob, then generate an object URL from that blob. For example:

- -
function fn2workerURL(fn) {
-  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
-  return URL.createObjectURL(blob)
-}
- -

Further examples

- -

This section provides further examples of how to use web workers.

- -

Performing computations in the background

- -

Workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread. In this example, a worker is used to calculate Fibonacci numbers.

- -

The JavaScript code

- -

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

- -
var results = [];
-
-function resultReceiver(event) {
-  results.push(parseInt(event.data));
-  if (results.length == 2) {
-    postMessage(results[0] + results[1]);
-  }
-}
-
-function errorReceiver(event) {
-  throw event.data;
-}
-
-onmessage = function(event) {
-  var n = parseInt(event.data);
-
-  if (n == 0 || n == 1) {
-    postMessage(n);
-    return;
-  }
-
-  for (var i = 1; i <= 2; i++) {
-    var worker = new Worker("fibonacci.js");
-    worker.onmessage = resultReceiver;
-    worker.onerror = errorReceiver;
-    worker.postMessage(n - i);
-  }
- };
- -

The worker sets the property onmessage to a function which will receive messages sent when the worker object's postMessage() is called (note that this differs from defining a global variable of that name, or defining a function with that name. var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

- -

The HTML code

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8"  />
-    <title>Test threads fibonacci</title>
-  </head>
-  <body>
-
-  <div id="result"></div>
-
-  <script language="javascript">
-
-    var worker = new Worker("fibonacci.js");
-
-    worker.onmessage = function(event) {
-      document.getElementById("result").textContent = event.data;
-      dump("Got: " + event.data + "\n");
-    };
-
-    worker.onerror = function(error) {
-      dump("Worker error: " + error.message + "\n");
-      throw error;
-    };
-
-    worker.postMessage("5");
-
-  </script>
-  </body>
-</html>
- -

The web page creates a div element with the ID result , which gets used to display the result, then spawns the worker. After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

- -

Finally, a message is sent to the worker to start it.

- -

Try this example.

- -

Performing web I/O in the background

- -

You can find an example of this in the article Using workers in extensions .

- -

Dividing tasks among multiple workers

- -

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

- -

Other types of worker

- -

In addition to dedicated and shared web workers, there are other types of worker available:

- -
    -
  • ServiceWorkers 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.
    • -
  • 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 js-ctypes in your worker. See {{domxref("ChromeWorker")}} for more details.
    • -
  • Audio Workers provide the ability for direct scripted audio processing to be done in a web worker context.
    • -
- -

Functions and interfaces available in workers

- -

You can use most standard JavaScript features inside a web worker, including:

- -
    -
  • {{domxref("Navigator")}}
    • -
  • {{domxref("XMLHttpRequest")}}
    • -
  • {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}}
    • -
  • {{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, and {{domxref("WindowTimers.setInterval")}}
    • -
- -

The main thing you can't do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then actioning the changes from there.

- -
-

Note: For a complete list of functions available to workers, see Functions and interfaces available to workers.

-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4[1]{{CompatGeckoDesktop("1.9.1")}}10.010.6[1]4[2]
Shared workers4[1]{{CompatGeckoDesktop(29)}}{{CompatNo}}10.65
- {{CompatNo}} 6.1[4]
Passing data using structured cloning13{{CompatGeckoDesktop(8)}}10.011.56
Passing data using transferable objects17 {{property_prefix("webkit")}}
- 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[3]
- 23		{{CompatGeckoDesktop(21)}}11156[3]
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44[1]3.51.0.110.011.5[1]5.1[2]
Shared workers{{CompatNo}}4[1]81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using transferable objects{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
- -

[1] Chrome and Opera give an error "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." when you try to run a worker locally. It needs to be on a proper domain.

- -

[2] As of Safari 7.1.2, you can call console.log from inside a worker, but it won't print anything to the console. Older versions of Safari don't allow you to call console.log from inside a worker.

- -

[3] This feature is implemented prefixed as webkitURL.

- -

[4] Safari removed SharedWorker support.

- -

See also

- - diff --git a/files/ko/web/api/web_workers_api/using_web_workers/index.html b/files/ko/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..eb0e309e8e --- /dev/null +++ b/files/ko/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,908 @@ +--- +title: 웹 워커 사용하기 +slug: Web/API/Web_Workers_API/basic_usage +translation_of: Web/API/Web_Workers_API/Using_web_workers +--- +
+

웹 워커는 웹 컨텐츠를 위해서 백그라운드 스레드에서 스크립트를 실행할 간편한 방법을 제공합니다. 워커 스레드는 사용자 인터페이스(UI)를 방해하지 않고 작업을 수행할 수 있습니다. 또한 워커는 ( responseXML 과 channel속성이 언제나 null이지만) XMLHttpRequest 를 사용하여 I/O작업을 수행할 수도 있습니다. 워커는 생성이 된 후에 생성자가 명시한 이벤트 핸들러로 메세지를 올려서 자신의 하위 작업(spawning task)에 메세지를 전달할 수 도 있습니다. 본 글에서 전용 워커와 공유 워커에 대하여 소개합니다.

+
+ +

Web Workers API

+ +

Worker는 생성자(예를 들면 {{domxref("Worker.Worker", "Worker()")}})를 사용하여 생성된 객체이며 이름있는 자바스크립트 파일(이 파일은 Worker 스레드에서 실행하는 코드를 가집니다)을 실행합니다. 또한 Worker는 현재의 {{domxref("window")}}와는 다른 글로벌 컨텍스트에서 실행됩니다. 따라서 {{domxref("Worker")}} 내에서 현재의 글로벌 스코프를 접근하기 위해 ({{domxref("window.self","self")}} 대신에) {{domxref("window")}}를 사용해도 오류가 돌아옵니다.

+ +

Worker의 콘텍스트는 Dedicated Workers(한 개의 스크립트가 이용하는 표준적인 Workers)일 경우{{domxref("DedicatedWorkerGlobalScope")}} 객체로 제공됩니다. (Shared Workers의 경우는 {{domxref("SharedWorkerGlobalScope")}}). Dedicated Worker 는 Worker 를 처음에 생성한 스크립트만 액세스 할 수 있습니다. 반면에 Shared Worker는, 복수의 스크립트에서 액세스 할 수 있습니다.

+ +
+

메모: Worker 의 레퍼런스 문서나 추가적인 가이드에 대해서는 The Web Workers API landing page를 봐 주세요.

+
+ +

Worker Thread에서는 몇 가지 제한 하에서 어떤 코드라도 실행할 수 있습니다. 예를 들어, Worker내에서는 직접 DOM 를 조작할 수 없습니다. 그리고 {{domxref("window")}} 객체의 기본 메서드나 속성에서 사용할 수 없는 것들이 있습니다. 그럼에도 WebSockets과 IndexedDB, Data Store API(Firefox OS 한정)와 같은 데이터 스토리지 메커니즘 등, window에 있는 다수의 아이템을 사용할 수 있습니다.자세한 것은 Functions and classes available to workers를 봐 주세요.

+ +

Worker와 메인 스레드 사이에서는 메시지 시스템을 통해 데이터를 발송합니다. 양쪽 모두 postMessage() 메서드를 사용하여 메시지를 발송하고, onmessage이벤트 핸들러에 의해 메시지에 응답합니다(메시지는 {{event("Message")}}이벤트의 data 속성에 들어갑니다). 데이터는 공유되지 않고 복사됩니다.

+ +

Worker 는 새로운 Worker 를 작성할 수 있습니다만, 생성된 Worker는 같은 부모 페이지일 경우에 한합니다. 추가적으로 Worker는 네트워크 I/O를 위한 XMLHttpRequest를 사용할 수 있으나,  responseXML의 exception과 channel속성의 XMLHttpRequest는 항상 null을 반환합니다.

+ +

Dedicated workers

+ +

As mentioned above, a dedicated worker is only accessible by the script that called it. In this section we'll discuss the JavaScript found in our Basic dedicated worker example (run dedicated worker): This allows you to enter two numbers to be multiplied together. The numbers are sent to a dedicated worker, multiplied together, and the result is returned to the page and displayed.

+ +

This example is rather trivial, but we decided to keep it simple while introducing you to basic worker concepts. More advanced details are covered later on in the article.

+ +

Worker feature detection

+ +

For slightly more controlled error handling and backwards compatibility, it is a good idea to wrap your worker accessing code in the following (main.js):

+ +
if (window.Worker) {
+
+  ...
+
+}
+ +

Spawning a dedicated worker

+ +

Creating a new worker is simple. All you need to do is call the {{domxref("Worker.Worker", "Worker()")}} constructor, specifying the URI of a script to execute in the worker thread (main.js):

+ +
var myWorker = new Worker("worker.js");
+ +

Sending messages to and from a dedicated worker

+ +

The magic of workers happens via the {{domxref("Worker.postMessage", "postMessage()")}} method and the {{domxref("Worker.onmessage", "onmessage")}} event handler. When you want to send a message to the worker, you post messages to it like this (main.js):

+ +
first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

So here we have two {{htmlelement("input")}} elements represented by the variables first and second; when the value of either is changed, myWorker.postMessage([first.value,second.value]) is used to send the value inside both to the worker, as an array. You can send pretty much anything you like in the message.

+ +

In the worker, we can respond when the message is received by writing an event handler block like this (worker.js):

+ +
onmessage = function(e) {
+  console.log('Message received from main script');
+  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+  console.log('Posting message back to main script');
+  postMessage(workerResult);
+}
+ +

The onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute. Here we simply multiply together the two numbers then use postMessage() again, to post the result back to the main thread.

+ +

Back in the main thread, we use onmessage again, to respond to the message sent back from the worker:

+ +
myWorker.onmessage = function(e) {
+  result.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Here we grab the message event data and set it as the textContent of the result paragraph, so the user can see the result of the calculation.

+ +
+

Note: The URI passed as a parameter to the Worker constructor must obey the same-origin policy .

+ +

There is currently disagreement among browsers vendors on what URIs are of the same-origin; Gecko 10.0 {{geckoRelease("10.0")}} and later do allow data URIs and Internet Explorer 10 does not allow Blob URIs as a valid script for workers.

+
+ +
+

Note: Notice that onmessage and postMessage() need to be hung off the Worker object when used in the main script thread, but not when used in the worker. This is because, inside the worker, the worker is effectively the global scope.

+
+ +
+

Note: When a message is passed between the main thread and worker, it is copied or "transferred" (moved), not shared. Read {{anch("Transferring data to and from workers further details", "Transferring data to and from workers: further details")}} for a much more thorough explanation.

+
+ +

Terminating a worker

+ +

If you need to immediately terminate a running worker from the main thread, you can do so by calling the worker's {{domxref("Worker", "terminate")}} method:

+ +
myWorker.terminate();
+ +

The worker thread is killed immediately without an opportunity to complete its operations or clean up after itself.

+ +

In the worker thread, workers may close themselves by calling their own {{domxref("WorkerGlobalScope", "close")}} method:

+ +
close();
+ +

Handling errors

+ +

When a runtime error occurs in the worker, its onerror event handler is called. It receives an event named error which implements the ErrorEvent interface.

+ +

The event doesn't bubble and is cancelable; to prevent the default action from taking place, the worker can call the error event's preventDefault() method.

+ +

The error event has the following three fields that are of interest:

+ +
+
message
+
A human-readable error message.
+
filename
+
The name of the script file in which the error occurred.
+
lineno
+
The line number of the script file on which the error occurred.
+
+ +

Spawning subworkers

+ +

Workers may spawn more workers if they wish. So-called sub-workers must be hosted within the same origin as the parent page. Also, the URIs for subworkers are resolved relative to the parent worker's location rather than that of the owning page. This makes it easier for workers to keep track of where their dependencies are.

+ +

Importing scripts and libraries

+ +

Worker threads have access to a global function, importScripts(), which lets them import scripts. It accepts zero or more URIs as parameters to resources to import; all of the following examples are valid:

+ +
importScripts();                         /* imports nothing */
+importScripts('foo.js');                 /* imports just "foo.js" */
+importScripts('foo.js', 'bar.js');       /* imports two scripts */
+importScripts('//example.com/hello.js'); /* You can import scripts from other origins */
+ +

The browser loads each listed script and executes it. Any global objects from each script may then be used by the worker. If the script can't be loaded, NETWORK_ERROR is thrown, and subsequent code will not be executed. Previously executed code (including code deferred using {{domxref("window.setTimeout()")}}) will still be functional though. Function declarations after the importScripts()method are also kept, since these are always evaluated before the rest of the code.

+ +
+

Note: Scripts may be downloaded in any order, but will be executed in the order in which you pass the filenames into importScripts() . This is done synchronously; importScripts() does not return until all the scripts have been loaded and executed.

+
+ +

Shared workers

+ +

A shared worker is accessible by multiple scripts — even if they are being accessed by different windows, iframes or even workers. In this section we'll discuss the JavaScript found in our Basic shared worker example (run shared worker): This is very similar to the basic dedicated worker example, except that it has two functions available handled by different script files: multiplying two numbers, or squaring a number. Both scripts use the same worker to do the actual calculation required.

+ +

Here we'll concentrate on the differences between dedicated and shared workers. Note that in this example we have two HTML pages, each with JavaScript applied that uses the same single worker file.

+ +
+

Note: If SharedWorker can be accessed from several browsing contexts, all those browsing contexts must share the exact same origin (same protocol, host, and port).

+
+ +
+

Note: In Firefox, shared workers cannot be shared between documents loaded in private and non-private windows ({{bug(1177621)}}).

+
+ +

Spawning a shared worker

+ +

Spawning a new worker is pretty much the same as with a dedicated worker, but with a different constructor name (see index.html and index2.html) — each one has to spin up the worker using code like the following:

+ +
var myWorker = new SharedWorker("worker.js");
+ +

One big difference is that with a shared worker you have to communicate via a port object — an explicit port is opened that the scripts can use to communicate with the worker (this is done implicitly in the case of dedicated workers).

+ +

The port connection needs to be started either implicitly by use of the onmessage event handler or explicitly with the start()method before any messages can be posted. Although the multiply.js and worker.js files in the demo currently call the start()method, those calls are not necessary since the onmessage event handler is being used. Calling start() is only needed if the message event is wired up via the addEventListener() method.

+ +

When using the start() method to open the port connection, it needs to be called from both the parent thread and the worker thread if two-way communication is needed.

+ +
myWorker.port.start();  // called in parent thread
+ +
port.start(); // called in worker thread, assuming the port variable references a port
+ +

Sending messages to and from a shared worker

+ +

Now messages can be sent to the worker as before, but the postMessage() method has to be invoked through the port object (again, you'll see similar constructs in both multiply.js and square.js):

+ +
squareNumber.onchange = function() {
+  myWorker.port.postMessage([squareNumber.value,squareNumber.value]);
+  console.log('Message posted to worker');
+}
+ +

Now, on to the worker. There is a bit more complexity here as well (worker.js):

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.onmessage = function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  }
+}
+ +

First, we use an onconnect handler to fire code when a connection to the port happens (i.e. when the onmessage event handler in the parent thread is setup, or when the start() method is explicitly called in the parent thread).

+ +

We use the ports attribute of this event object to grab the port and store it in a variable.

+ +

Next, we add a message handler on the port to do the calculation and return the result to the main thread. Setting up this messagehandler in the worker thread also implicitly opens the port connection back to the parent thread, so the call to port.start() is not actually needed, as noted above.

+ +

Finally, back in the main script, we deal with the message (again, you'll see similar constructs in both multiply.js and square.js):

+ +
myWorker.port.onmessage = function(e) {
+  result2.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

When a message comes back through the port from the worker, we check what result type it is, then insert the calculation result inside the appropriate result paragraph.

+ +

About thread safety

+ +

The {{domxref("Worker")}} interface spawns real OS-level threads, and mindful programmers may be concerned that concurrency can cause “interesting” effects in your code if you aren't careful.

+ +

However, since web workers have carefully controlled communication points with other threads, it's actually very hard to cause concurrency problems. There's no access to non-threadsafe components or the DOM. And you have to pass specific data in and out of a thread through serialized objects. So you have to work really hard to cause problems in your code.

+ +

Content security policy

+ +

Workers are considered to have their own execution context, distinct from the document that created them. For this reasons they are, in general, not governed by the content security policy of the document (or parent worker) that created them. So for example, suppose a document is served with the following header:

+ +
Content-Security-Policy: script-src 'self'
+ +

Among other things, this will prevent any scripts it includes from using eval(). However, if the script constructs a worker, code running in the worker's context will be allowed to use eval().
+
+ To specify a content security policy for the worker, set a Content-Security-Policy response header for the request which delivered the worker script itself.
+
+ The exception to this is if the worker script's origin is a globally unique identifier (for example, if its URL has a scheme of data or blob). In this case, the worker does inherit the CSP of the document or worker than created it.

+ +

Transferring data to and from workers: further details

+ +

Data passed between the main page and workers is copied, not shared. Objects are serialized as they're handed to the worker, and subsequently, de-serialized on the other end. The page and worker do not share the same instance, so the end result is that a duplicate is created on each end. Most browsers implement this feature as structured cloning.

+ +

To illustrate this, let's create for didactical purpose a function named emulateMessage(), which will simulate the behavior of a value that is cloned and not shared during the passage from a worker to the main page or vice versa:

+ +
function emulateMessage (vVal) {
+    return eval("(" + JSON.stringify(vVal) + ")");
+}
+
+// Tests
+
+// test #1
+var example1 = new Number(3);
+console.log(typeof example1); // object
+console.log(typeof emulateMessage(example1)); // number
+
+// test #2
+var example2 = true;
+console.log(typeof example2); // boolean
+console.log(typeof emulateMessage(example2)); // boolean
+
+// test #3
+var example3 = new String("Hello World");
+console.log(typeof example3); // object
+console.log(typeof emulateMessage(example3)); // string
+
+// test #4
+var example4 = {
+    "name": "John Smith",
+    "age": 43
+};
+console.log(typeof example4); // object
+console.log(typeof emulateMessage(example4)); // object
+
+// test #5
+function Animal (sType, nAge) {
+    this.type = sType;
+    this.age = nAge;
+}
+var example5 = new Animal("Cat", 3);
+alert(example5.constructor); // Animal
+alert(emulateMessage(example5).constructor); // Object
+ +

A value that is cloned and not shared is called message. As you will probably know by now, messages can be sent to and from the main thread by using postMessage(), and the message event's {{domxref("MessageEvent.data", "data")}} attribute contains data passed back from the worker.

+ +

example.html: (the main page):

+ +
var myWorker = new Worker("my_task.js");
+
+myWorker.onmessage = function (oEvent) {
+  console.log("Worker said : " + oEvent.data);
+};
+
+myWorker.postMessage("ali");
+ +

my_task.js (the worker):

+ +
postMessage("I\'m working before postMessage(\'ali\').");
+
+onmessage = function (oEvent) {
+  postMessage("Hi " + oEvent.data);
+};
+ +

The structured cloning algorithm can accept JSON and a few things that JSON can't — like circular references.

+ +

Passing data examples

+ +

Example #1: Create a generic "asynchronous eval()"

+ +

The following example shows how to use a worker in order to asynchronously execute any JavaScript code allowed in a worker, through eval() within the worker:

+ +
// Syntax: asyncEval(code[, listener])
+
+var asyncEval = (function () {
+  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");
+
+  oParser.onmessage = function (oEvent) {
+    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
+    delete aListeners[oEvent.data.id];
+  };
+
+  return function (sCode, fListener) {
+    aListeners.push(fListener || null);
+    oParser.postMessage({
+      "id": aListeners.length - 1,
+      "code": sCode
+    });
+  };
+})();
+ +

The data URL is equivalent to a network request, with the following response:

+ +
onmessage = function (oEvent) {
+  postMessage({
+    "id": oEvent.data.id,
+    "evaluated": eval(oEvent.data.code)
+  });
+}
+ +

Sample usage:

+ +
// asynchronous alert message...
+asyncEval("3 + 2", function (sMessage) {
+    alert("3 + 2 = " + sMessage);
+});
+
+// asynchronous print message...
+asyncEval("\"Hello World!!!\"", function (sHTML) {
+    document.body.appendChild(document.createTextNode(sHTML));
+});
+
+// asynchronous void...
+asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");
+ +

Example #2: Advanced passing JSON Data and creating a switching system

+ +

If you have to pass some complex data and have to call many different functions both on the main page and in the Worker, you can create a system which groups everything together.

+ +

First, we create a QueryableWorker class that takes the url of the worker, a default listener, and an error handler, and this class is gonna keep track of a list of listeners and help us communicate wirh the worker:

+ +
function QueryableWorker(url, defaultListener, onError){
+    var instance = this,
+        worker = new Worker(url),
+        listeners = {};
+
+    this.defaultListener = defaultListener || function(){};
+
+    if (onError) {worker.onerror = onError;}
+
+    this.postMessage = function(message){
+        worker.postMessage(message);
+    }
+
+    this.terminate = function(){
+        worker.terminate();
+    }
+}
+ +

Then we add the methods of adding/removing listeners:

+ +
this.addListeners = function(name, listener){
+    listeners[name] = listener;
+}
+
+this.removeListeners = function(name){
+    delete listeners[name];
+}
+ +

Here we let the worker handle two simple operations for illuatration: getting the difference of two numbers and making an alert after three seconds. In order to acheieve that we first implement a sendQuery method which queries if the worker actually has the corresponding methods to do what we want.

+ +
/*
+  This functions takes at least one argument, the method name we want to query.
+  Then we can pass in the arguments that the method needs.
+ */
+this.sendQuery = function(){
+    if (arguments.length < 1){
+         throw new TypeError("QueryableWorker.sendQuery takes at least one argument");
+         return;
+    }
+    worker.postMessage({
+        "queryMethod": arguments[0],
+        "queryArguments": Array.prototype.slice.call(arguments, 1)
+    });
+}
+ +

We finish QueryableWorker with the onmessage method. If the worker has the corresponding methods we queried, it should return the name of the corresponding listener and the arguments it needs, we just need to find it in listeners.:

+ +
worker.onmessage = function(event){
+    if (event.data instanceof Object &&
+        event.data.hasOwnProperty("queryMethodListener") &&
+        event.data.hasOwnProperty("queryMethodArguments")){
+        listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+    } else {
+        this.defaultListener.call(instance, event.data);
+    }
+}
+ +

Now onto the worker.  First we need to have the methods to handle the two simple operations:

+ +
var queryableFunctions = {
+    getDifference: function(a, b){
+        reply("printStuff", a - b);
+    },
+    waitSomeTime: function(){
+        setTimeout(function(){
+            reply("doAlert", 3, "seconds");
+        }, 3000);
+    }
+}
+
+function reply(){
+    if (arguments.length < 1) {
+        throw new TypeError("reply - takes at least one argument");
+        return;
+    }
+    postMessage({
+        queryMethodListener: arguments[0],
+        queryMethodArguments: Array.prototype.slice.call(arguments, 1)
+    });
+}
+
+/* This method is called when main page calls QueryWorker's postMessage method directly*/
+function defaultReply(message){
+    // do something
+}
+ +

And the onmessage method is now trivial:

+ +
onmessage = function(event){
+    if (event.data instanceof Object &&
+        event.data.hasOwnProperty("queryMethod") &&
+        event.data.hasOwnProperty("queryMethodArguments")){
+        queryableFunctions[event.data.queryMethod]
+            .apply(self, event.data.queryMethodArguments);
+    } else {
+        defaultReply(event.data);
+    }
+}
+ +

Here are the full implementation:

+ +

example.html (the main page):

+ +
<!doctype html>
+  <html>
+    <head>
+      <meta charset="UTF-8"  />
+      <title>MDN Example - Queryable worker</title>
+    <script type="text/javascript">
+    /*
+      QueryableWorker instances methods:
+        * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function
+        * postMessage(string or JSON Data): see Worker.prototype.postMessage()
+        * terminate(): terminates the Worker
+        * addListener(name, function): adds a listener
+        * removeListener(name): removes a listener
+      QueryableWorker instances properties:
+        * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly
+     */
+    function QueryableWorker(url, defaultListener, onError){
+      var instance = this,
+      worker = new Worker(url),
+      listeners = {};
+
+      this.defaultListener = defaultListener || function(){};
+
+      if (onError) {worker.onerror = onError;}
+
+      this.postMessage = function(message){
+        worker.postMessage(message);
+      }
+
+      this.terminate = function(){
+        worker.terminate();
+      }
+
+      this.addListeners = function(name, listener){
+        listeners[name] = listener;
+      }
+
+      this.removeListeners = function(name){
+        delete listeners[name];
+      }
+
+      worker.onmessage = function(event){
+        if (event.data instanceof Object &&
+          event.data.hasOwnProperty("queryMethodListener") &&
+          event.data.hasOwnProperty("queryMethodArguments")){
+          listeners[event.data.queryMethodListener].apply(instance, event.data.queryMethodArguments);
+        } else {
+          this.defaultListener.call(instance, event.data);
+        }
+      }
+    }
+
+    // your custom "queryable" worker
+    var myTask = new QueryableWorker("my_task.js");
+
+    // your custom "listeners"
+    myTask.addListener("printStuff", function (result) {
+      document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + result + "!"));
+    });
+
+    myTask.addListener("doAlert", function (time, unit) {
+      alert("Worker waited for " + time + " " + unit + " :-)");
+    });
+</script>
+</head>
+<body>
+  <ul>
+    <li><a id="firstLink" href="javascript:myTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li>
+    <li><a href="javascript:myTask.sendQuery('waitSomeTime');">Wait 3 seconds</a></li>
+    <li><a href="javascript:myTask.terminate();">terminate() the Worker</a></li>
+  </ul>
+</body>
+</html>
+ +

my_task.js (the worker):

+ +
var queryableFunctions = {
+  // example #1: get the difference between two numbers:
+  getDifference: function (nMinuend, nSubtrahend) {
+      reply("printSomething", nMinuend - nSubtrahend);
+  },
+  // example #2: wait three seconds
+  waitSomeTime: function () {
+      setTimeout(function() { reply("doAlert", 3, "seconds"); }, 3000);
+  }
+};
+
+// system functions
+
+function defaultReply (message) {
+  // your default PUBLIC function executed only when main page calls the queryableWorker.postMessage() method directly
+  // do something
+}
+
+function reply () {
+  if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; }
+  postMessage({ "queryMethodListener": arguments[0], "queryMethodArguments": Array.prototype.slice.call(arguments, 1) });
+}
+
+onmessage = function (oEvent) {
+  if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("queryMethod") && oEvent.data.hasOwnProperty("queryMethodArguments")) {
+    queryableFunctions[oEvent.data.queryMethod].apply(self, oEvent.data.queryMethodArguments);
+  } else {
+    defaultReply(oEvent.data);
+  }
+};
+ +

It is possible to switch the content of each mainpage -> worker and worker -> mainpage message. And the property names "queryMethod", "queryMethodListeners", "queryMethodArguments" can be anything as long as they are consistent in QueryableWorker and the worker.

+ +

Passing data by transferring ownership (transferable objects)

+ +

Google Chrome 17+ and Firefox 18+ contain an additional way to pass certain types of objects (transferable objects, that is objects implementing the {{domxref("Transferable")}} interface) to or from a worker with high performance. Transferable objects are transferred from one context to another with a zero-copy operation, which results in a vast performance improvement when sending large data sets. Think of it as pass-by-reference if you're from the C/C++ world. However, unlike pass-by-reference, the 'version' from the calling context is no longer available once transferred. Its ownership is transferred to the new context. For example, when transferring an {{domxref("ArrayBuffer")}} from your main app to a worker script, the original {{domxref("ArrayBuffer")}} is cleared and no longer usable. Its content is (quite literally) transferred to the worker context.

+ +
// Create a 32MB "file" and fill it.
+var uInt8Array = new Uint8Array(1024*1024*32); // 32MB
+for (var i = 0; i < uInt8Array.length; ++i) {
+  uInt8Array[i] = i;
+}
+
+worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]);
+ +
+

Note: For more information on transferable objects, performance, and feature-detection for this method, read Transferable Objects: Lightning Fast! on HTML5 Rocks.

+
+ +

Embedded workers

+ +

There is not an "official" way to embed the code of a worker within a web page, like {{HTMLElement("script")}} elements do for normal scripts. But a {{HTMLElement("script")}} element that does not have a src attribute and has a type attribute that does not identify an executable MIME type can be considered a data block element that JavaScript could use. "Data blocks" is a more general feature of HTML5 that can carry almost any textual data. So, a worker could be embedded in this way:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8" />
+<title>MDN Example - Embedded worker</title>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+  var myVar = "Hello World!";
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+  function pageLog (sMsg) {
+    // Use a fragment: browser will only render/reflow once.
+    var oFragm = document.createDocumentFragment();
+    oFragm.appendChild(document.createTextNode(sMsg));
+    oFragm.appendChild(document.createElement("br"));
+    document.querySelector("#logDisplay").appendChild(oFragm);
+  }
+</script>
+<script type="text/js-worker">
+  // This script WON'T be parsed by JS engines because its MIME type is text/js-worker.
+  onmessage = function (oEvent) {
+    postMessage(myVar);
+  };
+  // Rest of your worker code goes here.
+</script>
+<script type="text/javascript">
+  // This script WILL be parsed by JS engines because its MIME type is text/javascript.
+
+  // In the past...:
+  // blob builder existed
+  // ...but now we use Blob...:
+  var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"});
+
+  // Creating a new document.worker property containing all our "text/js-worker" scripts.
+  document.worker = new Worker(window.URL.createObjectURL(blob));
+
+  document.worker.onmessage = function (oEvent) {
+    pageLog("Received: " + oEvent.data);
+  };
+
+  // Start the worker.
+  window.onload = function() { document.worker.postMessage(""); };
+</script>
+</head>
+<body><div id="logDisplay"></div></body>
+</html>
+ +

The embedded worker is now nested into a new custom document.worker property.

+ +

It is also worth noting that you can also convert a function into a Blob, then generate an object URL from that blob. For example:

+ +
function fn2workerURL(fn) {
+  var blob = new Blob(['('+fn.toString()+')()'], {type: 'application/javascript'})
+  return URL.createObjectURL(blob)
+}
+ +

Further examples

+ +

This section provides further examples of how to use web workers.

+ +

Performing computations in the background

+ +

Workers are mainly useful for allowing your code to perform processor-intensive calculations without blocking the user interface thread. In this example, a worker is used to calculate Fibonacci numbers.

+ +

The JavaScript code

+ +

The following JavaScript code is stored in the "fibonacci.js" file referenced by the HTML in the next section.

+ +
var results = [];
+
+function resultReceiver(event) {
+  results.push(parseInt(event.data));
+  if (results.length == 2) {
+    postMessage(results[0] + results[1]);
+  }
+}
+
+function errorReceiver(event) {
+  throw event.data;
+}
+
+onmessage = function(event) {
+  var n = parseInt(event.data);
+
+  if (n == 0 || n == 1) {
+    postMessage(n);
+    return;
+  }
+
+  for (var i = 1; i <= 2; i++) {
+    var worker = new Worker("fibonacci.js");
+    worker.onmessage = resultReceiver;
+    worker.onerror = errorReceiver;
+    worker.postMessage(n - i);
+  }
+ };
+ +

The worker sets the property onmessage to a function which will receive messages sent when the worker object's postMessage() is called (note that this differs from defining a global variable of that name, or defining a function with that name. var onmessage and function onmessage will define global properties with those names, but they will not register the function to receive messages sent by the web page that created the worker). This starts the recursion, spawning new copies of itself to handle each iteration of the calculation.

+ +

The HTML code

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8"  />
+    <title>Test threads fibonacci</title>
+  </head>
+  <body>
+
+  <div id="result"></div>
+
+  <script language="javascript">
+
+    var worker = new Worker("fibonacci.js");
+
+    worker.onmessage = function(event) {
+      document.getElementById("result").textContent = event.data;
+      dump("Got: " + event.data + "\n");
+    };
+
+    worker.onerror = function(error) {
+      dump("Worker error: " + error.message + "\n");
+      throw error;
+    };
+
+    worker.postMessage("5");
+
+  </script>
+  </body>
+</html>
+ +

The web page creates a div element with the ID result , which gets used to display the result, then spawns the worker. After spawning the worker, the onmessage handler is configured to display the results by setting the contents of the div element, and the onerror handler is set to dump the error message.

+ +

Finally, a message is sent to the worker to start it.

+ +

Try this example.

+ +

Performing web I/O in the background

+ +

You can find an example of this in the article Using workers in extensions .

+ +

Dividing tasks among multiple workers

+ +

As multi-core computers become increasingly common, it's often useful to divide computationally complex tasks among multiple workers, which may then perform those tasks on multiple-processor cores.

+ +

Other types of worker

+ +

In addition to dedicated and shared web workers, there are other types of worker available:

+ +
    +
  • ServiceWorkers 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.
    • +
  • 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 js-ctypes in your worker. See {{domxref("ChromeWorker")}} for more details.
    • +
  • Audio Workers provide the ability for direct scripted audio processing to be done in a web worker context.
    • +
+ +

Functions and interfaces available in workers

+ +

You can use most standard JavaScript features inside a web worker, including:

+ +
    +
  • {{domxref("Navigator")}}
    • +
  • {{domxref("XMLHttpRequest")}}
    • +
  • {{jsxref("Global_Objects/Array", "Array")}}, {{jsxref("Global_Objects/Date", "Date")}}, {{jsxref("Global_Objects/Math", "Math")}}, and {{jsxref("Global_Objects/String", "String")}}
    • +
  • {{domxref("Window.requestAnimationFrame")}}, {{domxref("WindowTimers.setTimeout")}}, and {{domxref("WindowTimers.setInterval")}}
    • +
+ +

The main thing you can't do in a Worker is directly affect the parent page. This includes manipulating the DOM and using that page's objects. You have to do it indirectly, by sending a message back to the main script via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}, then actioning the changes from there.

+ +
+

Note: For a complete list of functions available to workers, see Functions and interfaces available to workers.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#toc-workers')}}{{Spec2('HTML WHATWG')}}No change from {{SpecName("Web Workers")}}.
{{SpecName('Web Workers')}}{{Spec2('Web Workers')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4[1]{{CompatGeckoDesktop("1.9.1")}}10.010.6[1]4[2]
Shared workers4[1]{{CompatGeckoDesktop(29)}}{{CompatNo}}10.65
+ {{CompatNo}} 6.1[4]
Passing data using structured cloning13{{CompatGeckoDesktop(8)}}10.011.56
Passing data using transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[3]
+ 23		{{CompatGeckoDesktop(21)}}11156[3]
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44[1]3.51.0.110.011.5[1]5.1[2]
Shared workers{{CompatNo}}4[1]81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}481.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using transferable objects{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+ +

[1] Chrome and Opera give an error "Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Path/to/worker.js' cannot be accessed from origin 'null'." when you try to run a worker locally. It needs to be on a proper domain.

+ +

[2] As of Safari 7.1.2, you can call console.log from inside a worker, but it won't print anything to the console. Older versions of Safari don't allow you to call console.log from inside a worker.

+ +

[3] This feature is implemented prefixed as webkitURL.

+ +

[4] Safari removed SharedWorker support.

+ +

See also

+ + diff --git a/files/ko/web/api/webgl_api/cross-domain_textures/index.html b/files/ko/web/api/webgl_api/cross-domain_textures/index.html deleted file mode 100644 index 94e969e37a..0000000000 --- a/files/ko/web/api/webgl_api/cross-domain_textures/index.html +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: 크로스-도메인 텍스쳐 -slug: Web/API/WebGL_API/Cross-Domain_Textures -tags: - - WebGL - - 웹지엘 - - 크로스 도메인 - - 텍스쳐 -translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL#Cross-domain_textures -translation_of_original: Web/API/WebGL_API/Cross-Domain_Textures ---- -

WebGL 텍스쳐 로딩은 크로스-도메인 접근 규칙에 따라 제약을 받습니다. 여러분이 만든 컨텐츠에서 다른 도메인의 텍스쳐, 즉, 크로스-도메인 텍스쳐를 로딩하려면 CORS 승인이 필요합니다. CORS에 대한 자세한 내용은 HTTP access control을 참고하시기 바랍니다.

- -

CORS 승인된 이미지를 WebGL 텍스쳐에 사용하는 방법에 대한 설명은 hacks.mozilla.org 문서와 예제를 참고하시기 바랍니다.

- -
-

역자 주 : 예제 링크가 깨져있는데, 원문에도 깨진 링크가 포함되어 있습니다.

-
- -
-

Note: WebGL 텍스쳐에 대한 CORS 지원과 이미지 요소의 crossOrigin 속성이 {{Gecko("8.0")}}에 구현되어 있습니다.

-
- -

내용이 변경되어 오염된(tainted) 쓰기 전용의 2D 캔버스는 WebGL 텍스쳐로 사용될 수 없습니다. 예를 들어 크로스-도메인 이미지가 그려진 2D {{ HTMLElement("canvas") }}는 오염된 2D 캔버스라고 할 수 있습니다.

- -
-

Note: 캔버스 2D의 drawImage에 대한 CORS 지원은 {{Gecko("9.0")}}에 구현되어 있습니다. 따라서 {{Gecko("9.0")}}에서부터는, CORS 승인된 크로스-도메인 이미지는 2D 캔버스를 오염시키지 않으며, CORS 승인된 크로스-도메인 이미지가 그려진 2D 캔버스도 WebGL 텍스쳐로 사용할 수 있습니다.

-
- -
-

Note: 크로스-도메인 비디오에 대한 CORS 지원과 {{ HTMLElement("video") }}요소의 crossorigin 속성은 {{Gecko("12.0")}}에 구현되어 있습니다.

-
- -

{{ languages( { "ja": "ja/WebGL/Cross-Domain_Textures", "ko": "ko/Web/WebGL/Cross-Domain_Textures"} ) }}

diff --git a/files/ko/web/api/websockets_api/index.html b/files/ko/web/api/websockets_api/index.html new file mode 100644 index 0000000000..8b6fd20b1a --- /dev/null +++ b/files/ko/web/api/websockets_api/index.html @@ -0,0 +1,172 @@ +--- +title: 웹 소켓 +slug: WebSockets +translation_of: Web/API/WebSockets_API +--- +

웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

+ +
+

인터페이스

+ +
+
WebSocket
+
웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스
+
CloseEvent
+
연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
+
MessageEvent
+
서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
+
+
+ +
+

도구

+ + + + + + +
+ +

같이 보기

+ + + +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
버전 76 지원 {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
버전 7 지원 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
+ {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
버전 10 지원 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
+ {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
표준 - RFC 6455 지원16{{CompatGeckoDesktop("11.0")}}1012.106.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
버전 76 지원 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
버전 7 지원 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
버전 8 지원 (IETF draft 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
표준 - RFC 6455 지원16 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
+
+ +

Gecko

+ +

파이어폭스는 발전하는 웹 소켓 규격을 지속적으로 지원하고 있습니다. 파이어폭스 6은 웹 소켓 프로토콜 버전 7을, 파이어폭스 7은 버전 8을 지원합니다. (IETF 초안 10) 파이어폭스 모바일은 7.0부터 웹 소켓을 지원합니다.

+ +

Gecko 6.0

+ +

Gecko 6.0 {{geckoRelease("6.0")}} 이전엔 WebSocket 객체가 존재하였으며, 일부 사이트가 WebSocket 서비스는 접두어가 붙지 않는 것이라고 생각하기도 했습니다. 이 객체는 MozWebSocket으로 개명되었습니다.

+ +

Gecko 7.0

+ +

Gecko 7.0 {{geckoRelease("7.0")}} 이후로 고급 환경 설정의 network.websocket.max-connections 항목을 통해 동시에 열릴 수 있는 웹 소켓 연결의 최대값을 지정할 수 있습니다. 기본값은 200입니다.

+ +

Gecko 8.0

+ +

Gecko 8.0 {{geckoRelease("8.0")}} 이후로 웹 소켓 규격 초안의 변경에 따라 웹 소켓의 deflate 스트림 확장이 비활성화 되었습니다. 이는 일부 사이트의 호환성 문제를 해결합니다.

+ +

Gecko 11.0

+ +

Gecko 11.0 이전에는 모든 메시지가 16 MB를 넘을 수 없었으나, 지금은 최대 2 GB까지 가능합니다. 그러나 (특히 모바일에서) 권장되는 방법은 아닙니다. 충분한 메모리를 가지지 못한 장치에서는 통신이 실패하게 될 것입니다.

+ +

추가적으로 바이너리 데이터를 위한 ArrayBuffer 지원이 구현되었습니다.

+ +

Gecko 11.0부터 웹 소켓 API는 더이상 접두사가 붙지 않습니다.

+ +
주의: 파이어폭스 4, 5에서 웹 소켓이 비활성화 돼있었던 가장 주요한 이유는 프로토콜 설계의 보안성 문제 때문이었습니다. 이는 파이어폭스 6에서 상위 버전의 프로토콜을 구현함으로써 해결되었습니다.
+ +
{{HTML5ArticleTOC}}
diff --git a/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html new file mode 100644 index 0000000000..e7826d8595 --- /dev/null +++ b/files/ko/web/api/websockets_api/writing_websocket_client_applications/index.html @@ -0,0 +1,191 @@ +--- +title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 +slug: WebSockets/Writing_WebSocket_client_applications +tags: + - 가이드 + - 네트워킹 + - 예제 + - 웹소켓 + - 웹소켓API + - 클라이언트 +translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications +--- +

WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.

+ +
Note: 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.
+ +

{{AvailableInWorkers}}

+ +

WebSocket 객체 생성하기

+ +

WebSocket 프로토콜을 사용하여 통신하기 위해서는 WebSocket객체를 생성해야 합니다. 이 객체는 자동으로 서버로의 연결을 열려고 할 것입니다.

+ +

WebSocket 생성자는 하나의 필수 파라미터와 하나의 선택 파라미터를 받습니다.

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+ +
+
url
+
연결할 URL으로, 이것은 WebSocket 서버가 응답할 URL이어야 합니다.
+
protocols {{ optional_inline() }}
+
하나의 프로토콜 문자열, 또는 프로토콜 문자열의 배열입니다. 이 문자열들은 서브 프로토콜을 지정하는데 사용되어, 하나의 서버가 여러 개의 WebSocket 서브 프로토콜을 구현할 수 있도록 해줍니다. 예를 들어, 하나의 서버가 처리하는 상호작용이 지정된 protocols에 따라 달라지도록 할 수 있습니다. 만약 프로토콜 문자열을 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.
+
+ +

생성자는 예외를 발생시킬 수 있습니다:

+ +
+
SECURITY_ERR
+
접속을 시도하고 있는 포트가 차단되었습니다.
+
+ +
+
+ +

연결 에러

+ +

만약 연결 시도 중 에러가 발생하면, 먼저 "error"란 이름의 이벤트가 WebSocket 오브젝트로 전달되고, 그로 인해 onerror 핸들러가 실행됩니다. 그 후에 연결이 종료되는 이유를 가리키는 CloseEvent 이벤트가 WebSocket 오브젝트로 전달되고, 그로 인해 onclose 핸들러가 실행됩니다.

+ +

Firefox 11부터는 보통 에러 메세지에 대한 설명이 Mozillia 플랫폼의 콘솔에 표시되며, CloseEvent로부터는 RFC 6455, Section 7.4에 정의되어 있는 연결 종료 코드를 받게 됩니다.

+ +

예제

+ +

이 간단한 예제는 새 웹소켓 오브젝트를 생성하여 ws://www.example.com/socketserver 서버에 접속하는것을 보여줍니다. 이 예제에서는 커스텀 프로토콜인 "protocolOne" 을 리퀘스트에 같이 지정합니다. (이 프로토콜을 지정하는 부분은 생략될 수 있습니다.)

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
+
+ +

반환된 exampleSocket 오브젝트의 exampleSocket.readyState 값은 CONNECTING 입니다. readyState 값은 연결이 수립되어 데이터가 전송 가능한 상태가 되면 OPEN 으로 변경됩니다.

+ +

만약 여러개의 프로토콜을 유연하게 대응할 수 있는 구조를 가지고 있다면, 연결 시에 배열을 통해 프로토콜의 목록을 지정할 수 있습니다.

+ +
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
+
+ +

연결이 수립되면(readyState 가 OPEN 이 되었을 때), exampleSocket.protocol 값을 조사하여 서버가 어떤 프로토콜을 선택했는지 알아낼 수 있습니다.

+ +

위의 예제에서 ws 는 http 를 대체합니다. 비슷하게 wss 는 https 를 대체합니다. 웹소켓 연결은 HTTP 업그레이드 메카니즘에 의해 수행되기 때문에 HTTP 서버 주소 지정에 대한 프로토콜 업그레이드 요청은 암시적입니다.  (ws://www.example.com 또는 wss://www.example.com. 같이)

+ +

서버에 데이터 전송하기

+ +

한번 연결이 수립되면 이제부터는 서버로 데이터를 전송할 수 있습니다. 이것을 하기 위해서는 단순히 WebSocket 오브젝트의 send() 호출하여 보내고 싶은 메세지를 지정하기만 하면 됩니다.:

+ +
exampleSocket.send("Here's some text that the server is urgently awaiting!");
+
+ +

보낼 수 있는 데이터는 String , {{ domxref("Blob") }},  또는 ArrayBuffer 입니다.

+ +
Note: 버전 11 아래의 파이어폭스는 String 데이터 전송만을 지원합니다.
+ +

연결을 맺는것은 비동기 작업이고 실패하기 쉬운 작업이기 때문에, WebSocket 오브젝트를 생성하자마자  send() 로 데이터 전송을 시도하는것은 성공하지 않을 가능성이 있습니다. 우리는 연결이 수립된 이후에만 데이터를 전송하도록 하기 위해 onopen 핸들러를 정의하고, 이 위에서 작업합니다.

+ +
exampleSocket.onopen = function (event) {
+  exampleSocket.send("Here's some text that the server is urgently awaiting!");
+};
+
+ +

데이터 전송에 JSON 사용하기

+ +

JSON 을 사용하면 서버에 복잡한 데이터를 편리하게 보낼 수 있습니다. 예를 들어, 채팅 프로그램이 서버와 JSON으로 캡슐화된 패킷 데이터를 주고받는 프로토콜을 구현한것을 상상해 볼 수 있습니다.:

+ +
// Send text to all users through the server
+function sendText() {
+  // Construct a msg object containing the data the server needs to process the message from the chat client.
+  var msg = {
+    type: "message",
+    text: document.getElementById("text").value,
+    id:   clientID,
+    date: Date.now()
+  };
+
+  // Send the msg object as a JSON-formatted string.
+  exampleSocket.send(JSON.stringify(msg));
+
+  // Blank the text input element, ready to receive the next line of text from the user.
+  document.getElementById("text").value = "";
+}
+
+ +

서버로부터 데이터 수신하기

+ +

WebSockets는 event-driven API 입니다; 메세지가 수신되면 "message" 이벤트가 onmessage 함수로 전달되게 됩니다. 아래와 같은 코드를 작성하여 수신되는 데이터를 받아볼 수 있습니다.:

+ +
exampleSocket.onmessage = function (event) {
+  console.log(event.data);
+}
+
+ +

JSON 오브젝트를 받아서 처리하기

+ +

상단의 {{ anch("데이터 전송에 JSON 사용하기") }} 에서 작업한 코드와 연관되는 클라이언트를 생각해 봅시다. 클라이언트에서 받을 수 있는 패킷들의 목록은 다음과 같을 것 입니다.:

+ +
    +
  • 로그인 핸드쉐이크
    • +
  • 메세지 텍스트
    • +
  • 유저 목록 업데이트
    • +
+ +

위의 메세지들을 받아서 처리하는 코드는 아래와 같을 것 입니다.:

+ +
exampleSocket.onmessage = function(event) {
+  var f = document.getElementById("chatbox").contentDocument;
+  var text = "";
+  var msg = JSON.parse(event.data);
+  var time = new Date(msg.date);
+  var timeStr = time.toLocaleTimeString();
+
+  switch(msg.type) {
+    case "id":
+      clientID = msg.id;
+      setUsername();
+      break;
+    case "username":
+      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
+      break;
+    case "message":
+      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
+      break;
+    case "rejectusername":
+      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
+      break;
+    case "userlist":
+      var ul = "";
+      for (i=0; i < msg.users.length; i++) {
+        ul += msg.users[i] + "<br>";
+      }
+      document.getElementById("userlistbox").innerHTML = ul;
+      break;
+  }
+
+  if (text.length) {
+    f.write(text);
+    document.getElementById("chatbox").contentWindow.scrollByPages(1);
+  }
+};
+
+ +

여기서 우리는 JSON.parse() 를 통해 JSON 오브젝트를 자바스크립트 오브젝트로 변환합니다. 그 다음 콘텐츠에 따라 분기하고 처리하는 로직을 가집니다.

+ +

Text data format

+ +

웹소켓을 통해 전달되는 텍스트들은 UTF-8 포멧을 가집니다.

+ +

Gecko 9.0 {{ geckoRelease("9.0") }} 먼저 버전들은 유효한 UTF-8 텍스트가 아닌 문자가 들어올 경우 연결이 종료되었습니다. 지금은 이 값들을 정상적으로 허용합니다.

+ +

연결을 종료하기

+ +

웹 소켓 사용을 마쳤다면 close() 메소드를 호출해 연결을 종료합니다.:

+ +
exampleSocket.close();
+
+ +

연결을 닫아버리기 전에 bufferedAmount 어트리뷰트를 조사하여 아직 네트워크에 전달되지 않은 데이터가 있는지 검사하는것도 좋은 방법입니다.

+ +

보안에 대한 고려 사항

+ +

웹소켓은 혼합된 연결 환경에서 이용되어서는안됩니다. 예를들어 HTTPS를 이용해 로드된 페이지에서 non-secure 웹소켓 연결을 수립하는것(또는 반대) 처럼 말입니다. 몇몇 브라우저들은 이를 강제로 금지하고 있습니다. 파이어폭스 버전 8이상도 이를 금지합니다.

+ +

{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}

diff --git a/files/ko/web/api/websockets_api/writing_websocket_servers/index.html b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html new file mode 100644 index 0000000000..24c3cbe6c0 --- /dev/null +++ b/files/ko/web/api/websockets_api/writing_websocket_servers/index.html @@ -0,0 +1,258 @@ +--- +title: 웹소켓 서버 작성하기 +slug: WebSockets/Writing_WebSocket_servers +translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers +--- +

{{gecko_minversion_header("2")}}

+ +

개요

+ +

웹 소켓 서버는 특정한 프로토콜을 따르는 서버의 임의 포트를 리스닝하고 있는 TCP 어플리케이션입니다. 사용자 서버를 만드는 작업은 두려운 일일수도 있습니다. 하지만, 당신이 선택한 플랫폼상에서 간단한 웹 소켓 서버를 구현하는것은 쉬울것입니다.  

+ +

웹 소켓 서버는 C(++), Python, PHP, server-side JavaScript등과 같은 Berkeley sockets을 지원하는 어떠한 server-side 프로그래밍 언어로도 개발될 수 있습니다. 이것은 어느 특정한 언어의 자습서는 아니지만, 당신 자신의 서버를 개발하는것을 용이하게 하는 지침으로써의 역할을 합니다.

+ +

당신은 HTTP가 작동하는 방식과 중간정도의 개발 경험이 있어야만 합니다. 개발언어에서 제공하는 TCP 소켓에 대한 지식이 요구될 수도 있습니다. 이 지침의 범위는 당신이 웹 소켓서버를 개발하기위해 필요한 최소한의 지식에 대해 소개하는것입니다.

+ +
+

최신의 공식 웹 소켓 문서인 RFC 6455를 읽으세요. 1과 4-7 섹션이 특별히 서버개발자에게 흥미로운 부분입니다. 10 섹션에서는 보안에 대해 논의하며, 당신의 서버를 공개하기전 해당 부분을 반드시 정독하여 읽어보셔야만합니다.

+
+ +

이 페이지에서 웹 소켓 서버는 매우 약간만 설명되어 있습니다. 웹 소켓 서버는 종종 다른 특정한 이유로 인해 분리되거나 전문화됩니다. 따라서 웹 소켓과의 핸드 쉐이크를 감지하거나 미리 처리하거나 또는 클라이언트들을 실제 웹 소켓 서버에 보내기위해 일반적으로 HTTP 서버와 같은 reverse proxy를 사용합니다. 이는 쿠키나 인증을 처리하기 위해 당신의 서버 코드를 잔뜩 작성하지 않아도 된다는 것을 의미합니다.

+ +

Step 1: The WebSocket Handshake

+ +

먼저 서버는 표준 TCP 소켓을 사용하여 연결하려는 소켓을 위해 반드시 듣고 있어야 합니다. 당신의 플랫폼에 따라 서버는 이미 준비가 되어있을수도 있습니다. 예를들어, 당신의 서버가 example.com에 port가 8000인 채로 듣고 있다고 가정해봅시다. 

+ +
+

경고: 서버에서 아무 포트나 선택하여 연결할 수 있지만, 80 또는 443 포트가 아닌 다른 연결은 방화벽/프록시에 의해 문제를 일으킬 수 있습니다. TLS/SSL 보안 연결인 443 포트와의 연결이 가장 쉬울 것입니다. 현재 대부분의 브라우저(특히 Firefox 8+)는 안전한 페이지라 할지라도 보안 연결이 아닌 웹소켓 연결은 허용되지 않습니다.

+
+ +

웹소켓의 핸드셰이크 과정은 HTTP를 바탕으로 이루어집니다. 자세한 연결 과정은 다루지 않으나, 각 요청자는 연결 과정이 제대로 이루어질때까지 요청을 보류합니다. 서버는 클라이언트가 요청하는 모든 것을 주의깊게 이해해야 하고, 그렇지 않을 경우 보안 이슈가 일어날 수 있습니다.

+ +

클라이언트 핸드쉐이크 요청

+ +

당신이 웹 소켓 서버를 개발 중이라도, 클라이언트는 여전히 웹 소켓 핸드쉐이킹 과정을 시작합니다. 따라서, 당신은 클라이언트의 요청을 이해하기 위한 방법을 이해해야합니다. 클라이언트는 아래와 같아 보이는 매우 표준적인 HTTP 요청을 보낼것입니다.(HTTP 버전은 반드시 1.1. 혹은 그 이상이어하며, 반드시 GET방식이어야합니다.)

+ +
GET /chat HTTP/1.1
+Host: example.com:8000
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
+Sec-WebSocket-Version: 13
+
+
+ +

이외에도 클라이언트는 여러 메세지나 서브프로토콜을 추가해 보낼 수도 있습니다. User-Agent, Referer, Cookie와 같은 공통 헤더나, 인증 헤더도 말이죠. 자세한 사항은 다음을 참조하세요. 원하는 대로 요청에 무엇이든지 첨부하여 보낼 수 있으며 웹소켓과 관련이 없을 경우 무시합니다. 통상적으로, 리버스 프록시가 이미 그런 기능을 담당하고 있을 겁니다.

+ +

잘못된 값을 가지거나 형식이 잘못된 헤더의 경우, 서버는 "400 Bad Request" 응답을 보내 즉시 소켓을 종료시켜야 합니다. HTTP 응답 바디에 핸드셰이크에 실패한 이유가 명시되어 있지만, 브라우저 상에서 명시적으로 나타내진 않습니다. 서버가 웹소켓의 버전 인식을 실패할 경우, 인식 가능한 버전을 명시해 Sec-WebSocket-Version 요청을 보내야 합니다. (최신 가이드 v13에서 설명되어 있습니다) 이제, 가장 흥미로운 헤더인 Sec-WebSocket-Key을 살펴봅니다.

+ +
+

팁: 모든 브라우저는 Origin header를 보냅니다. 이 헤더는 보안을 위해 활용되며, (checking for same origin, whitelisting/ blacklisting, etc.) 활용하고 싶지 않다면 403 Forbidden을 보냅니다. 하지만 non-browser 에이전트가 위조된 Origin을 보낼수도 있다는 것을 명심해야 합니다. 따라서 대부분의 애플리케이션은 이 헤더가 없는 요청을 거부합니다.

+
+ +
+

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

+
+ +
+

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

+
+ +

서버가 보내는 핸드쉐이크 응답

+ +

위와 같은 요청을 받으면 서버 역시도 HTTP 구조의 응답을 보내주어야 합니다. 자세한 내용은 아래와 같습니다.(각각의 헤더 끝에는 \r\n을 그리고 가장 마지막에는 한번 더 \r\n을 넣는걸 잊지 마세요.)

+ +
HTTP/1.1 101 Switching Protocols
+Upgrade: websocket
+Connection: Upgrade
+Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
+
+
+ +

Additionally, the server can decide on extension/subprotocol requests here; see Miscellaneous for details. The Sec-WebSocket-Accept part is interesting. The server must derive it from the Sec-WebSocket-Key that the client sent. To get it, concatenate the client's Sec-WebSocket-Key and "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" together (it's a "magic string"), take the SHA-1 hash of the result, and return the base64 encoding of the hash.

+ +
+

FYI: This seemingly overcomplicated process exists so that it's obvious to the client whether or not the server supports WebSockets. This is important because security issues might arise if the server accepts a WebSockets connection but interprets the data as a HTTP request.

+
+ +

So if the Key was "dGhlIHNhbXBsZSBub25jZQ==", the Accept will be "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Once the server sends these headers, the handshake is complete and you can start swapping data!

+ +
+

The server can send other headers like Set-Cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake.

+
+ +

클라이언트 추적

+ +

웹소켓 프로토콜과 직접적인 연관은 없지만, 이 항목에서 언급할만한 의미가 있습니다. 웹소켓 서버는 이미 연결된 클라이언트들의 반복적인 연결(hand shaking)을 막기위해 클라이언트의 소켓 상태를 추적해야합니다. 같은 IP 주소를 가지는 클라이언트는 여러번 연결을 시도 할 수 있습니다.(하지만, 서버는 Denial-of-Service attacks 을 위해 너무 많은 연결 요청을 거부할 수 있습니다).

+ +

Step 2: 데이터 프레임 교환

+ +

Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using XOR encryption (with a 32-bit key). Section 5 of the specification describes this in detail.

+ +

데이터 프레임 포멧

+ +

모든 데이터 프레임 (서버->클라이언트 / 클라이언트 -> 서버) 은 아래의 구조를 따릅니다:

+ +
 0               1               2               3
+ 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
++-+-+-+-+-------+-+-------------+-------------------------------+
+|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
+|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
+|N|V|V|V|       |S|             |   (if payload len==126/127)   |
+| |1|2|3|       |K|             |                               |
++-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
+ 4               5               6               7
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|     Extended payload length continued, if payload len == 127  |
++ - - - - - - - - - - - - - - - +-------------------------------+
+ 8               9               10              11
++ - - - - - - - - - - - - - - - +-------------------------------+
+|                               |Masking-key, if MASK set to 1  |
++-------------------------------+-------------------------------+
+ 12              13              14              15
++-------------------------------+-------------------------------+
+| Masking-key (continued)       |          Payload Data         |
++-------------------------------- - - - - - - - - - - - - - - - +
+:                     Payload Data continued ...                :
++ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+|                     Payload Data continued ...                |
++---------------------------------------------------------------+
+ +

RSV1-3 는 사용되지 않습니다. 이 필드들은 확장 프로토콜 또는 미래를 위해 예약되었습니다.

+ +

MASK 비트는 메세지가 인코딩되어있는지의 여부를 나타냅니다.클라이언트가 서버로 보내는 메세지는 항상 마스킹되어야합니다. 따라서 서버는 클라이언트로부터 받은 이 필드가 항상 1임을 기대할 수 있습니다. (만약 클라이언트가 마스킹되지 않은 메세지를 보낸다면 서버는 연결을 종료해야 합니다. 참고 : section 5.1 of the spec ).
+ 서버가 클라이언트에게 보내는 메세지는 MASK 필드가 항상 0이고 데이터는 마스킹되지 않은 상태여야 합니다. 마스킹이 어떻게 이루어지는지 / 마스킹된 메세지를 어떻게 디코딩하는지는 나중에 설명합니다.
+ (주의: wss 연결이라고 하더라도 클라이언트가 보내는 패킷은 항상 마스킹되어야 합니다.)

+ +

opcode 필드는 뒤따라오는 payload 데이터가 어떠한 포멧인지를 나타냅니다. 0x0은 continuation, 0x1은 텍스트(항상 UTF-8), 0x2는 바이너리 데이터 / 나머지 값은 "컨트롤 코드"에 사용됩니다. (컨트롤 코드에 대해서는 나중에 다루게 됩니다.) 현재 버전의 웹소켓 프로토콜에서는 0x3 / 0x7 / 0xB~0xF는 아무런 의미도 지니고있지 않습니다.

+ +

FIN 비트는 이 메세지가 마지막임을 나타냅니다. 만약 FIN 비트가 0이라면 서버는 뒤에 더 따라오게 될 메세지들까지 수신해야 합니다. FIN 비트가 1일 경우에는 전체 메세지가 수신되었으므로 이를 처리합니다. 이 부분에 대해서는 뒤에 다시 설명합니다.

+ +

Payload 길이 알아내기

+ +

수신한 프레임으로부터 payload 데이터를 읽기 위해서는 payload length 필드를 읽어야 합니다. 불행히도 이는 약간 복잡한 작업을 거치는데 아래 순서대로 처리해 주세요.

+ +
    +
  1. 9번째부터 15번재까지의 비트를 읽습니다. 이를 unsigned integer로 취급한 다음 값이 125거나 이보다 작을 경우 이 자체가 payload length 입니다. 이 경우에는 2, 3 과정은 필요 없습니다. 하지만 126이면 2번으로, 127일 경우 3번으로 가주세요
    2. +
  2. 다음 16비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다.
    3. +
  3. 다음 64비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다. (최상위 비트는 항상 0이어야 합니다.)
    4. +
+ +

마스킹된 Payload 데이터 디코딩하기

+ +

MASK 비트가 설정되어 있디만 32비트 사이즈의 Masking-Key 필드 또한 존재하게 됩니다. 
+ 아래 의사코드는 Payload 데이터를 ENCODED / Masking-Key 필드를 MASK 라고 가정하고 데이터를 디코딩하는 방법을 보여줍니다. ENCODED값을 0부터 순회하면서 MASK의 i % 4에 해당하는 1바이트와 XOR 연산을 수행합니다.

+ +

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

+ +
var DECODED = "";
+for (var i = 0; i < ENCODED.length; i++) {
+    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
+}
+ +

이제 DECODED 데이터를 가지고 프로토콜에 맞게 활용하면 됩니다.

+ +

Message Fragmentation

+ +

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

+ +

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

+ +
Client: FIN=1, opcode=0x1, msg="hello"
+Server: (process complete message immediately) Hi.
+Client: FIN=0, opcode=0x1, msg="and a"
+Server: (listening, new message containing text started)
+Client: FIN=0, opcode=0x0, msg="happy new"
+Server: (listening, payload concatenated to previous message)
+Client: FIN=1, opcode=0x0, msg="year!"
+Server: (process complete message) Happy new year to you too!
+ +

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

+ +

Pings and Pongs: The Heartbeat of WebSockets

+ +

핸드쉐이크가 끝난 시점부터 서버 혹은 클라이언트는 언제든지 ping 패킷을 보낼 수 있습니다. 만약 ping 패킷이 수신되면 수신자는 가능한 빨리 응답으로 pong 패킷을 보내야 합니다. (ping에서 전달된 payload와 동일한 payload를 붙여서 pong을 보냅니다. 이 경우 최대 payload length는 125입니다.) 서버는 주기적으로 ping을 보내 클라이언트가 아직 살아있는 상태인지 체크할 수 있습니다.

+ +

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

+ +
+

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

+
+ +

Step 4: Closing the connection

+ +

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

+ +

Miscellaneous

+ +
+

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

+
+ +

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

+ +

Extensions

+ +
+

This section needs expansion. Please edit if you are equipped to do so.

+
+ +

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

+ +
+

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

+
+ +

TODO

+ +

서브프로토콜

+ +

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

+ +
+

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

+
+ +

클라이언트는 핸드쉐이크 요청 시에 특정한 서브프로콜의 목록을 같이 보낼 수 있습니다. Sec-WebSocket-Protocol 헤더에 사용하기를 원하는 서브프로토콜의 목록을 같이 보냅니다.

+ +
GET /chat HTTP/1.1
+...
+Sec-WebSocket-Protocol: soap, wamp
+
+
+ +

또는 아래와 같이 보낼 수도 있습니다.:

+ +
...
+Sec-WebSocket-Protocol: soap
+Sec-WebSocket-Protocol: wamp
+
+
+ +

클라이언트로부터 서브프로토콜 요청을 받으면, 서버는 그 중에서 자신이 지원할 수 있는 서브프로토콜을 하나 골라야 합니다. 만약 클라이언트가 보낸 목록 중, 여러개를 지원할 수 있다면 지원하는 목록 중 가장 첫번째 서브프로토콜을 보내주세요. 

+ +

Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

+ +
Sec-WebSocket-Protocol: soap
+
+
+ +
+

서버는 반드시 하나의 Sec-Websocket-Protocol 헤더만을 송신해야 합니다.
+ 만약 서버가 어떠한 서브프로토콜도 지원하고 싶지 않다면 Sec-Websocket-Protocol 헤더를 빼고 보내주세요. 빈 값을 넣어서 보내도 안됩니다.
+ 서버가 아무 서브프로토콜을 지원하지 않겠다고 한다면 클라이언트는 연결을 닫아버릴수도 있습니다.

+
+ +

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

+ +
+

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

+
+ +

같이 보기

+ + diff --git a/files/ko/web/api/window/domcontentloaded_event/index.html b/files/ko/web/api/window/domcontentloaded_event/index.html new file mode 100644 index 0000000000..24db56aa91 --- /dev/null +++ b/files/ko/web/api/window/domcontentloaded_event/index.html @@ -0,0 +1,77 @@ +--- +title: DOMContentLoaded +slug: Web/Events/DOMContentLoaded +tags: + - Event + - Reference + - Web + - Window +translation_of: Web/API/Window/DOMContentLoaded_event +--- +
{{APIRef}}
+ +

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.

+ + + + + + + + + + + + + + + + + + + + +
확산예
취소 가능예 (although specified as a simple event that isn't cancelable)
인터페이스{{domxref("Event")}}
이벤트 처리기 속성아니오
+ +

DOMContentLoaded의 원본 대상은 다 불러온 {{domxref("Document")}}입니다. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event.

+ +

A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

+ +

예제

+ +

기본 용도

+ +
window.addEventListener('DOMContentLoaded', (event) => {
+    console.log('DOM fully loaded and parsed');
+});
+
+ +

사양

+ + + + + + + + + + + + + + +
사양상태
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
+ +

브라우저 호환성

+ + + +

{{Compat("api.Window.DOMContentLoaded_event")}}

+ +

같이 보기

+ +
    +
  • Related events: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
    • +
  • This event on {{domxref("Document")}} targets: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
    • +
diff --git a/files/ko/web/api/window/load_event/index.html b/files/ko/web/api/window/load_event/index.html new file mode 100644 index 0000000000..baef50af25 --- /dev/null +++ b/files/ko/web/api/window/load_event/index.html @@ -0,0 +1,128 @@ +--- +title: load +slug: Web/Events/load +tags: + - Event + - 이벤트 +translation_of: Web/API/Window/load_event +--- +

load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

+ +

 

+ +

예제

+ +

Window

+ +
<script>
+  window.addEventListener("load", function(event) {
+    console.log("All resources finished loading!");
+  });
+</script>
+ +

script 엘리먼트

+ +
<script>
+  var script = document.createElement("script");
+  script.addEventListener("load", function(event) {
+    console.log("Script finished loading and executing");
+  });
+  script.src = "http://example.com/example.js";
+  script.async = true;
+  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
+</script>
+ +

일반 정보

+ +
+
스펙
+
DOM L3
+
인터페이스
+
UIEvent
+
Bubbles
+
No
+
취소가능 여부
+
No
+
타겟
+
Window,Document,Element
+
기본 동작
+
None.
+
+ +

속성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성타입설명
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Whether the event is cancellable or not.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
+ +

스펙 정보

+ + + + + + + + + + + + + + + + + + + +
스펙상태코멘트
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}} +

이것은 문서 로딩이 끝날때 수행되는 단계와 연결되는 섹션과 연결됩니다. 'load' 이벤트는 많은 엘리먼트들에서도 발생합니다. 그리고 스펙 문서에서는 많은 곳에서 "load이벤트를 지연할 수 있는" 것들을 언급한다는 것을 주의하십시오.

+
+ +

관련 이벤트

+ +
    +
  • {{event("DOMContentLoaded")}}
    • +
  • {{event("readystatechange")}}
    • +
  • {{event("load")}}
    • +
  • {{event("beforeunload")}}
    • +
  • {{event("unload")}}
    • +
diff --git a/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html new file mode 100644 index 0000000000..7b338a83fa --- /dev/null +++ b/files/ko/web/api/windoworworkerglobalscope/settimeout/index.html @@ -0,0 +1,429 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +tags: + - setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.

+ +

문법

+ +
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
+var timeoutID = window.setTimeout(code[, delay]);
+window.setTimeout(function, milliseconds);
+
+ +

매개변수

+ +
+
func
+
{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.
+
code
+
선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.
+ 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 보안 위험성을 이유로 권장되지 않습니다.
+
delay {{optional_inline}}
+
타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.
+ 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;
+ 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.
+
param1, ..., paramN {{optional_inline}}
+
타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.
+
+ +
+

Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.
+ 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (Callback arguments를 봐주세요)

+
+ +

반환 값

+ +

반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;
+ 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.

+ +

setTimeout()과 {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, clearTimeout()과 {{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.
+ 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.

+ +

예제

+ +

다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 setTimeout()과 clearTimeout()에 연결합니다.
+ 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 clearTimeout()에 사용되는 ID가 저장됩니다.
+ 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.

+ +

HTML

+ +
<p>Live Example</p>
+<button onclick="delayedAlert();">Show an alert box after two seconds</button>
+<p></p>
+<button onclick="clearAlert();">Cancel alert before it happens</button>
+
+ +

JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert("That was really slow!");
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+
+ +

결과

+ +

{{EmbedLiveSample('Example')}}
+ clearTimeout() 예제도 봐주세요.

+ +

Polyfill

+ +

하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, setTimeout() 또는 setInterval()을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면(e.g. Internet Explorer 9 이하), HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.

+ +
/*\
+|*|
+|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+
+ +

IE

+ +

IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:

+ +
/*@cc_on
+  // conditional IE < 9 only fix
+  @if (@_jscript_version <= 9)
+  (function(f){
+     window.setTimeout=f(window.setTimeout);
+     window.setInterval=f(window.setInterval);
+  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
+  @end
+@*/
+
+ +

혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:

+ +
<!--[if lte IE 9]><script>
+(function(f){
+window.setTimeout=f(window.setTimeout);
+window.setInterval=f(window.setInterval);
+})(function(f){return function(c,t){
+var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
+});
+</script><![endif]-->
+
+ +

예시

+ +

다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.

+ +
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
+
+ +

위 예제는 arrow function으로도 작성하실 수 있습니다.

+ +
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
+
+ +

다른 하나는 function's bind를 이용하는 것 입니다.

+ +
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
+
+ +

"this" 문제

+ +

setTimeout()에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 JavaScript reference를 참고해주세요.

+ +

설명

+ +

setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: 

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // prints "zero,one,two"
+myArray.myMethod(1); // prints "one"
+ +

위와 같이 동작하는 이유는 myMethod 호출될 때, this는 myArray로 설정되므로, 함수 내에서의 this[속성]은 myArray[속성]와 같습니다. 하지만, 다음 예제를 보면:

+ +
setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
+setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력
+ +

myArray.myMethod 함수는 setTimeout에 전달되고, 호출될 때 this는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 this를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, call을 사용해 this를 설정하는 것도 동작하지 않습니다.

+ +
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
+
+ +

가능한 해결책

+ +

일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:

+ +
setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
+setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력
+ +

화살표 함수(Arrow Function) 역시 가능한 대안입니다:

+ +
setTimeout(() => {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
+setTimeout(() => {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력
+ +

this 문제를 해결하는 또다른 방법은 전역함수 setTimeout()과 setInterval()를 this 객체를 전달할 수 있는 전역함수로 대체하고 Function.prototype.call을 사용하여 콜백을 설정합니다:

+ +
// Enable setting 'this' in JavaScript timers
+
+var __nativeST__ = window.setTimeout,
+    __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this,
+      aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.
+ +

새로운 기능 테스트:

+ +
myArray = ["zero", "one", "two"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
+setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
+
+ +
JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 Function.prototype.bind() 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.
+ +

bind()를 사용한 예제:

+ +
myArray = ["zero", "one", "two"];
+myBoundMethod = (function (sProperty) {
+    console.log(arguments.length > 0 ? this[sProperty] : this);
+}).bind(myArray);
+
+myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
+myBoundMethod(1); // prints "one"
+setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
+setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
+
+ +

참고

+ +

Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.

+ +

setTimeout()을 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:

+ +
function foo(){
+  console.log('foo has been called');
+}
+setTimeout(foo, 0);
+console.log('After setTimeout');
+ +

콘솔에 이렇게 쓰여질겁니다:

+ +
After setTimeout
+foo has been called
+ +

그 이유는 setTimeout가 지연시간 0으로 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.

+ +

문자열을 넘길경우

+ +

 setTimeout()에 함수대신 문자열을 넘기면 eval 사용했을 때와 같은 위험성을 가집니다.

+ +
// 권장
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// 비권장
+window.setTimeout("alert('Hello World!');", 500);
+
+ +

setTimeout에 전달된 문자열은 전역 context에서 해석하므로, setTimeout()이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.

+ +

지정된 것보다 더 오래 지연되는 이유

+ +

타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.

+ +

중첩된 타임아웃이 4ms 이하일 경우

+ +

역사적으로 브라우저들은 setTimeout() "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 setTimeout() 호출은 최소 지연을 사용하도록 강제됩니다.

+ +

실제로, 4ms는 HTML5 스펙에 명시되어 있고 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.

+ +

최신 브라우저에서 0ms 타임아웃을 구현하려면, 이곳에 설명된 {{domxref("window.postMessage()")}}를 사용할 수 있습니다.

+ +

비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우

+ +

부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.

+ +

Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  dom.min_background_timeout_value 설정을 통해 수정할 수 있습니다)
+ Chrome은  11버전부터 구현했습니다 (crbug.com/66078).

+ +

Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.

+ +

타임아웃 지연

+ +

"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.

+ +

최대 지연 값

+ +

Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.

+ +

사양

+ + + + + + + + + + + + + + +
사양상태주석
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
+ +

지원 브라우저

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
기본1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Callback 매개변수 지원[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
기능AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
기본1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Callback 매개변수 지원[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] 첫번째 form에서 매개변수를 지원하는지에 대한 여부.

+ +

더 알아보기

+ + diff --git a/files/ko/web/api/windowtimers/settimeout/index.html b/files/ko/web/api/windowtimers/settimeout/index.html deleted file mode 100644 index 7b338a83fa..0000000000 --- a/files/ko/web/api/windowtimers/settimeout/index.html +++ /dev/null @@ -1,429 +0,0 @@ ---- -title: WindowTimers.setTimeout() -slug: Web/API/WindowTimers/setTimeout -tags: - - setTimeout -translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout ---- -
{{APIRef("HTML DOM")}}
- -

타이머가 만료된 뒤 함수나 지정된 코드를 실행하는 타이머를 설정합니다.

- -

문법

- -
var timeoutID = window.setTimeout(func[, delay, param1, param2, ...]);
-var timeoutID = window.setTimeout(code[, delay]);
-window.setTimeout(function, milliseconds);
-
- -

매개변수

- -
-
func
-
{{jsxref("function")}}이 타이머가 만료된 뒤 실행됩니다.
-
code
-
선택적 구문으로 함수 대신에 문자열을 넣을 수 있는데, 이것은 타이머가 만료된 뒤 해석되고 실행됩니다.
- 이 구문은 {{jsxref("Global_Objects/eval", "eval()")}}을 사용하는 것과 같은 보안 위험성을 이유로 권장되지 않습니다.
-
delay {{optional_inline}}
-
타이머가 지정된 함수나 코드를 실행시키기 전에 기다려야할 ms(1000분의 1초) 단위의 시간입니다.
- 만약 이 매개변수를 생략하면, 0이 값으로 사용됩니다. 실제 지연시간은 더 길어질 수 있습니다;
- 아래 {{anch("Reasons for delays longer than specified")}}를 참고하세요.
-
param1, ..., paramN {{optional_inline}}
-
타이머가 만료되고 {{anch("func")}}에 전달되는 추가적인 매개변수들입니다.
-
- -
-

Internet Explorer 9 이하에서는 함수에 추가적인 매개변수들을 전달하는 기능이 동작하지 않습니다.
- 만약 브라우저에서 이 기능을 사용하고 싶다면, {{anch("polyfill")}}을 사용하세요. (Callback arguments를 봐주세요)

-
- -

반환 값

- -

반환되는 timeoutID는 숫자이고, setTimeout()을 호출하여 만들어진 타이머를 식별할 수 있는 0이 아닌 값 입니다;
- 이 값은 타이머를 취소시키기 위해 {{domxref("WindowTimers.clearTimeout()")}}에 전달할 수도 있습니다.

- -

setTimeout()과 {{domxref("WindowTimers.setInterval", "setInterval()")}}는 같은 ID 공간을 공유하기 때문에, clearTimeout()과 {{domxref("WindowTimers.clearInterval", "clearInterval()")}} 둘 중 어느 것을 사용해도 기술적으로 동일하게 동작합니다.
- 하지만 명확성을 위해, 코드를 유지보수할 때 혼란을 피하기 위해 항상 일치시켜야 합니다.

- -

예제

- -

다음 예제는 웹 페이지에 2개의 간단한 버튼을 설정하고 setTimeout()과 clearTimeout()에 연결합니다.
- 첫 번째 버튼이 눌려지면 2초 뒤에 호출되는 타임아웃이 설정되고 clearTimeout()에 사용되는 ID가 저장됩니다.
- 두 번째 버튼을 누름으로써 당신은 선택적으로 이 타임아웃을 취소할 수 있습니다.

- -

HTML

- -
<p>Live Example</p>
-<button onclick="delayedAlert();">Show an alert box after two seconds</button>
-<p></p>
-<button onclick="clearAlert();">Cancel alert before it happens</button>
-
- -

JavaScript

- -
var timeoutID;
-
-function delayedAlert() {
-  timeoutID = window.setTimeout(slowAlert, 2000);
-}
-
-function slowAlert() {
-  alert("That was really slow!");
-}
-
-function clearAlert() {
-  window.clearTimeout(timeoutID);
-}
-
- -

결과

- -

{{EmbedLiveSample('Example')}}
- clearTimeout() 예제도 봐주세요.

- -

Polyfill

- -

하나 이상의 매개변수를 콜백 함수에 넘겨야 하는데, setTimeout() 또는 setInterval()을 사용하여 추가적인 매개변수를 보내는 것을 브라우저에서 지원하지 않는다면(e.g. Internet Explorer 9 이하), HTML5 표준 매개변수 전달 기능을 사용 가능하게 하는 이 polyfill을 넣을 수 있습니다. 그저 아래 코드를 스크립트를 상단에 작성해주시면 됩니다.

- -
/*\
-|*|
-|*|  임의의 매개변수를 자바스크립트 타이머의 콜백함수에 전달하기 위한 Polyfill (HTML5 표준 명세).
-|*|
-|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
-|*|
-|*|  Syntax:
-|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
-|*|  var timeoutID = window.setTimeout(code, delay);
-|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
-|*|  var intervalID = window.setInterval(code, delay);
-|*|
-\*/
-
-(function() {
-  setTimeout(function(arg1) {
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeST__ = window.setTimeout;
-    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeST__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-
-  var interval = setInterval(function(arg1) {
-    clearInterval(interval);
-    if (arg1 === 'test') {
-      // feature test is passed, no need for polyfill
-      return;
-    }
-    var __nativeSI__ = window.setInterval;
-    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
-      var aArgs = Array.prototype.slice.call(arguments, 2);
-      return __nativeSI__(vCallback instanceof Function ? function() {
-        vCallback.apply(null, aArgs);
-      } : vCallback, nDelay);
-    };
-  }, 0, 'test');
-}())
-
- -

IE

- -

IE9 이하를 포함하는 모든 모바일/데스크톱 브라우저에서 자바스크립트를 남용하지 않는 완벽한 해결책으로 , JavaScript 조건부 주석을 사용할 수 있습니다:

- -
/*@cc_on
-  // conditional IE < 9 only fix
-  @if (@_jscript_version <= 9)
-  (function(f){
-     window.setTimeout=f(window.setTimeout);
-     window.setInterval=f(window.setInterval);
-  })(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}});
-  @end
-@*/
-
- -

혹은 IE HTML 조건부 기능을 기반으로 깔끔하게 접근할 수 있습니다:

- -
<!--[if lte IE 9]><script>
-(function(f){
-window.setTimeout=f(window.setTimeout);
-window.setInterval=f(window.setInterval);
-})(function(f){return function(c,t){
-var a=[].slice.call(arguments,2);return f(function(){c instanceof Function?c.apply(this,a):eval(c)},t)}
-});
-</script><![endif]-->
-
- -

예시

- -

다른 해결책으로는 익명 함수를 callback으로 호출하여 사용할 수 있으나, 이 방법은 비용이 더 비쌉니다.

- -
var intervalID = setTimeout(function() { myFunc("one", "two", "three"); }, 1000);
-
- -

위 예제는 arrow function으로도 작성하실 수 있습니다.

- -
var intervalID = setTimeout(() => { myFunc("one", "two", "three"); }, 1000);
-
- -

다른 하나는 function's bind를 이용하는 것 입니다.

- -
setTimeout(function(arg1){}.bind(undefined, 10), 1000);
-
- -

"this" 문제

- -

setTimeout()에 매개변수(혹은 다른 함수)를 전달할 때, 당신의 기대와는 다르게 this의 값이 호출될 것이다. 해당 이슈에 대한 자세한 사항은 JavaScript reference를 참고해주세요.

- -

설명

- -

setTimeout()에 의해 실행된 코드는 별도의 실행 컨텍스트에서 setTimeout이 호출된 함수로 호출됩니다.  호출된 함수에 대해서는 this 키워드를 설정하는 일반적인 규칙이 적용되며, this를 설정 혹은 할당하지 않은 경우, non-strict 모드에서 전역(혹은 window) 객체, strict모드에서 undefined를 기본 값으로 합니다. 다음 예제를 봐주세요: 

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-myArray.myMethod(); // prints "zero,one,two"
-myArray.myMethod(1); // prints "one"
- -

위와 같이 동작하는 이유는 myMethod 호출될 때, this는 myArray로 설정되므로, 함수 내에서의 this[속성]은 myArray[속성]와 같습니다. 하지만, 다음 예제를 보면:

- -
setTimeout(myArray.myMethod, 1000); // 1초 뒤 "[Window 객체]" 출력
-setTimeout(myArray.myMethod, 1500, "1"); // 1.5초 뒤 "undefined" 출력
- -

myArray.myMethod 함수는 setTimeout에 전달되고, 호출될 때 this는 설정되어 있지 않아 window 객체를 기본값으로 합니다. forEach, reduce 등 Array 메서드 같이 this를 매개변수로 넘길 수 있는 옵션 또한 없습니다. 그리고 아래에서 보다시피, call을 사용해 this를 설정하는 것도 동작하지 않습니다.

- -
setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
-
- -

가능한 해결책

- -

일반적인 해결책은 this 설정이 필요한 곳을 함수로 감싸는 것(Wrapper Function) 입니다:

- -
setTimeout(function(){myArray.myMethod()}, 2000); // 2초 뒤"zero,one,two" 출력
-setTimeout(function(){myArray.myMethod('1')}, 2500); // 2.5초 뒤"one" 출력
- -

화살표 함수(Arrow Function) 역시 가능한 대안입니다:

- -
setTimeout(() => {myArray.myMethod()}, 2000); // 2초 뒤 "zero,one,two" 출력
-setTimeout(() => {myArray.myMethod('1')}, 2500); // 2.5초 뒤 "one" after 2.5 출력
- -

this 문제를 해결하는 또다른 방법은 전역함수 setTimeout()과 setInterval()를 this 객체를 전달할 수 있는 전역함수로 대체하고 Function.prototype.call을 사용하여 콜백을 설정합니다:

- -
// Enable setting 'this' in JavaScript timers
-
-var __nativeST__ = window.setTimeout,
-    __nativeSI__ = window.setInterval;
-
-window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeST__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
-
-window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
-  var oThis = this,
-      aArgs = Array.prototype.slice.call(arguments, 2);
-  return __nativeSI__(vCallback instanceof Function ? function () {
-    vCallback.apply(oThis, aArgs);
-  } : vCallback, nDelay);
-};
- -
위 2개의 대안들은 IE의 타이 콜백함수에 임의의 매개변수를 전달하는 HTML5 표준 또한 가능하게 합니다.
- -

새로운 기능 테스트:

- -
myArray = ["zero", "one", "two"];
-myArray.myMethod = function (sProperty) {
-    alert(arguments.length > 0 ? this[sProperty] : this);
-};
-
-setTimeout(alert, 1500, "Hello world!"); // the standard use of setTimeout and setInterval is preserved, but...
-setTimeout.call(myArray, myArray.myMethod, 2000); // prints "zero,one,two" after 2 seconds
-setTimeout.call(myArray, myArray.myMethod, 2500, 2); // prints "two" after 2.5 seconds
-
- -
JavaScript 1.8.5은 주어진 함수에 대한 모든 호출의 this 값을 설정하기 위한 Function.prototype.bind() 메서드를 도입하였습니다. 이렇게 하면 wrapper 함수를 사용하지 않고 콜백에 this 값을 설정할 수 있습니다.
- -

bind()를 사용한 예제:

- -
myArray = ["zero", "one", "two"];
-myBoundMethod = (function (sProperty) {
-    console.log(arguments.length > 0 ? this[sProperty] : this);
-}).bind(myArray);
-
-myBoundMethod(); // prints "zero,one,two" because 'this' is bound to myArray in the function
-myBoundMethod(1); // prints "one"
-setTimeout(myBoundMethod, 1000); // still prints "zero,one,two" after 1 second because of the binding
-setTimeout(myBoundMethod, 1500, "1"); // prints "one" after 1.5 seconds
-
- -

참고

- -

Timeout은 {{domxref("WindowOrWorkerGlobalScope.clearTimeout()")}}을 사용하면 취소됩니다. 함수를 반복해서 호출해야 한다면 (e.g., N 밀리초마다), {{domxref("WindowOrWorkerGlobalScope.setInterval()")}} 사용을 고려해보세요.

- -

setTimeout()을 호출한 쓰레드가 종료될 때까지 함수나 코드 조각이 실행될 수 없다는 점에 유의해야합니다. 예를들어:

- -
function foo(){
-  console.log('foo has been called');
-}
-setTimeout(foo, 0);
-console.log('After setTimeout');
- -

콘솔에 이렇게 쓰여질겁니다:

- -
After setTimeout
-foo has been called
- -

그 이유는 setTimeout가 지연시간 0으로 호출되었지만, queue에 배치되어 다음 기회에 실행되도록 예정되기 때문입니다. 현재 실행중인 코드는 queue에 있는 함수들이 실행되기 전에 완료되고, 실행 순서가 예상과 다를 수 있습니다.

- -

문자열을 넘길경우

- -

 setTimeout()에 함수대신 문자열을 넘기면 eval 사용했을 때와 같은 위험성을 가집니다.

- -
// 권장
-window.setTimeout(function() {
-    alert("Hello World!");
-}, 500);
-
-// 비권장
-window.setTimeout("alert('Hello World!');", 500);
-
- -

setTimeout에 전달된 문자열은 전역 context에서 해석하므로, setTimeout()이 호출된 로컬 context의 Symbol은 문자열이 코드로 해석될 때 사용할 수 없습니다.

- -

지정된 것보다 더 오래 지연되는 이유

- -

타임아웃이 예상보다 더 늦게까지 지연되는 데는 여러가지 이유가 있습니다. 이 문단에서는 일반적인 이유에 대해서 설명합니다.

- -

중첩된 타임아웃이 4ms 이하일 경우

- -

역사적으로 브라우저들은 setTimeout() "clamping"을 구현했습니다: "최소 지연" 한계보다 작은 지연을 가진 setTimeout() 호출은 최소 지연을 사용하도록 강제됩니다.

- -

실제로, 4ms는 HTML5 스펙에 명시되어 있고 2010년 이후에 출시된 브라우저들은 일관성을 유지하고 있습니다. {{geckoRelease("5.0")}} 이전에 출시된 브라우저들은, 타임아웃(중첩 5이상)의 최소 지연시간은 10ms였습니다.

- -

최신 브라우저에서 0ms 타임아웃을 구현하려면, 이곳에 설명된 {{domxref("window.postMessage()")}}를 사용할 수 있습니다.

- -

비활성 탭에서 타임아웃이1000ms에 여러 번 일어날 경우

- -

부하와 배터리 사용양을 줄이기 위해서, 비활성화 탭들에서 타임아웃이 1초에 여러번 일어나지 않도록 "clamping" 됩니다.

- -

Firefox는 5버전부터 이 동작을 구현했습니다. ({{bug(633421)}}참고, 1000ms 상수는  dom.min_background_timeout_value 설정을 통해 수정할 수 있습니다)
- Chrome은  11버전부터 구현했습니다 (crbug.com/66078).

- -

Android용 Firefox는 {{bug(736602)}} 이후 버전 14부터 백그라운드 탭에 15분의 타임아웃을 사용하고, 완전히 unload도 할 수 있습니다.

- -

타임아웃 지연

- -

"clamping"과 더불어, 타임아웃은 다른 작업들로 인해 바쁜 페이지에서 늦게 실행될 수 있습니다.

- -

최대 지연 값

- -

Internet Explorer, Chrome, Safari, and Firefox 포함하는 브라우저들은 내부적으로 32-bit 부호있는 정수로 지연 값을 저장합니다. 이로 인해 2147483647보다 더 큰 지연을 사용할 때 정수 오버플로우가 발생하여, 타임아웃이 즉시 실행됩니다.

- -

사양

- - - - - - - - - - - - - - -
사양상태주석
{{SpecName("HTML WHATWG", "webappapis.html#dom-settimeout", "WindowTimers.setTimeout()")}}{{Spec2("HTML WHATWG")}}Initial definition (DOM Level 0)
- -

지원 브라우저

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
기본1.0{{CompatGeckoDesktop("1")}}4.04.01.0
Callback 매개변수 지원[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기능AndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
기본1.01.0{{CompatGeckoMobile("1")}}6.06.01.0
Callback 매개변수 지원[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] 첫번째 form에서 매개변수를 지원하는지에 대한 여부.

- -

더 알아보기

- - diff --git a/files/ko/web/api/xmlhttprequest/timeout/index.html b/files/ko/web/api/xmlhttprequest/timeout/index.html deleted file mode 100644 index 4ecc599f9d..0000000000 --- a/files/ko/web/api/xmlhttprequest/timeout/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -title: timeout -slug: Web/API/XMLHttpRequest/timeout -translation_of: Web/API/XMLHttpRequest/timeout_event ---- -
-

timeout 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

-
- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Target objects{{domxref("XMLHttpRequest")}}
Interface{{domxref("ProgressEvent")}}
- -

Examples

- -
var client = new XMLHttpRequest();
-client.open("GET", "http://www.example.org/example.txt");
-client.ontimeout = function(e) {
-  console.error("Timeout!!");
-}
-client.send();
- -

Inheritance

- -

timeout 이벤트는 {{domxref("Event")}}에서 상속받은 {{domxref("ProgressEvent")}} 인터페이스를 구현합니다. 이 인터페이스에 선언된 속성(property)과 메서드를 사용할 수 있습니다.

- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}} 
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{domxref("XMLHttpRequest")}}
    • -
diff --git a/files/ko/web/api/xmlhttprequest/timeout_event/index.html b/files/ko/web/api/xmlhttprequest/timeout_event/index.html new file mode 100644 index 0000000000..4ecc599f9d --- /dev/null +++ b/files/ko/web/api/xmlhttprequest/timeout_event/index.html @@ -0,0 +1,123 @@ +--- +title: timeout +slug: Web/API/XMLHttpRequest/timeout +translation_of: Web/API/XMLHttpRequest/timeout_event +--- +
+

timeout 이벤트는 미리 설정한 시간이 만료되어 진행이 종료되면 시작합니다.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Target objects{{domxref("XMLHttpRequest")}}
Interface{{domxref("ProgressEvent")}}
+ +

Examples

+ +
var client = new XMLHttpRequest();
+client.open("GET", "http://www.example.org/example.txt");
+client.ontimeout = function(e) {
+  console.error("Timeout!!");
+}
+client.send();
+ +

Inheritance

+ +

timeout 이벤트는 {{domxref("Event")}}에서 상속받은 {{domxref("ProgressEvent")}} 인터페이스를 구현합니다. 이 인터페이스에 선언된 속성(property)과 메서드를 사용할 수 있습니다.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ +
    +
  • {{domxref("XMLHttpRequest")}}
    • +
diff --git a/files/ko/web/api/xsltprocessor/basic_example/index.html b/files/ko/web/api/xsltprocessor/basic_example/index.html new file mode 100644 index 0000000000..cb96c52c55 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/basic_example/index.html @@ -0,0 +1,49 @@ +--- +title: Basic Example +slug: XSLT_in_Gecko/Basic_Example +translation_of: Web/API/XSLTProcessor/Basic_Example +--- +

기본 예

+

이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다. +

그림1은 기본 XSLT예의 소스를 보여준다. XML문서(example.xml)은 글의 정보를 포함한다. ?xml-stylesheet? 처리명령을 써서, 그것의 href 속성을 통해 XSLT 스타일쉬트(example.xsl)에 연결한다. +

XSLT 스타일쉬트는 xsl:stylesheet 요소로 시작하는데, 이것은 최종 출력을 생성하는데 쓰이는 모든 템플리트를 포함한다. 그림1의 예는 템플리트 2개를 가진다 - 하나는 root 노드에 하나는 Author 노드에 대응한다. root 노드에 대응하는 템플리트는 글의 제목을 출력하고 Authors 노드의 자식노드인 Author 노드에 대응하는 모든 템플리트를 처리하기 위해 말한다. +

그림1 : 간단한 XSLT예 +

XML 문서 (example.xml) : +

+
  <?xml version="1.0"?>
+  <?xml-stylesheet type="text/xsl" href="example.xsl"?>
+  <Article>
+    <Title>My Article</Title>
+    <Authors>
+      <Author>Mr. Foo</Author>
+      <Author>Mr. Bar</Author>
+    </Authors>
+    <Body>This is my article text.</Body>
+  </Article>
+
+

XSL 스타일쉬트 (example.xsl) : +

+
  <?xml version="1.0"?>
+  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+
+    <xsl:output method="text"/>
+
+    <xsl:template match="/">
+      Article - <xsl:value-of select="/Article/Title"/>
+      Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
+    </xsl:template>
+
+    <xsl:template match="Author">
+      - <xsl:value-of select="." />
+    </xsl:template>
+
+  </xsl:stylesheet>
+
+

브라우저 출력: +

+
  Article - My Article
+  Authors:
+  - Mr. Foo
+  - Mr. Bar
+
+{{ languages( { "en": "en/XSLT_in_Gecko/Basic_Example" } ) }} diff --git a/files/ko/web/api/xsltprocessor/browser_differences/index.html b/files/ko/web/api/xsltprocessor/browser_differences/index.html new file mode 100644 index 0000000000..0d22a5b825 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/browser_differences/index.html @@ -0,0 +1,8 @@ +--- +title: Browser Differences +slug: XSLT_in_Gecko/Browser_Differences +translation_of: Web/API/XSLTProcessor/Browser_Differences +--- +

브라우저 차이

+

Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( http://www.w3.org/TR/xslt )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다. +

{{ languages( { "en": "en/XSLT_in_Gecko/Browser_Differences" } ) }} diff --git a/files/ko/web/api/xsltprocessor/generating_html/index.html b/files/ko/web/api/xsltprocessor/generating_html/index.html new file mode 100644 index 0000000000..5bb284bdb8 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/generating_html/index.html @@ -0,0 +1,174 @@ +--- +title: Generating HTML +slug: XSLT_in_Gecko/Generating_HTML +translation_of: Web/API/XSLTProcessor/Generating_HTML +--- +

HTML 생성하기

+

브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. +

Article의 <body> 요소는 지금 HTML의 요소 (<b> 와 <u> 태그, 그림 2)를 포함한다. XML 문서는 HTML요소와 XML 요소 모두 포함하지만, 단 하나의 namespace 즉 XML 요소만 필요하다. HTML namespace가 없으므로, 그리고 XHTML namespace를 사용하여 XSL에서 an XML document를 생성하고 그것은 HTML문서와 같은 양상은 아닐 것이고, XSL Stylesheet 의xsl:output는 결과문서는 HTML처럼 다루어질 것을 보장한다 . XML 요소에 대해, 우리 자신의 namespace http://devedge.netscape.com/2002/de 는 필요하고, 그것은 접두어 myNS (xmlns:myNS="http://devedge.netscape.com/2002/de)에 주어진다. +

그림 2 XML 파일 (example2.xml) +XML Document (example2.xml): +

+
<?xml version="1.0"?>
+<?xml-stylesheet type="text/xsl" href="example2.xsl"?>
+<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
+<myNS:Title>My Article</myNS:Title>
+<myNS:Authors>
+<myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
+<myNS:Author>Mr. Bar</myNS:Author>
+</myNS:Authors>
+<myNS:Body>
+The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
+</myNS:Body>
+</myNS:Article>
+
+

The XSL Stylesheet used will need to have two namespaces - one for the XSLT elements and one for our own XML elements used in the XML document. The output of the XSL Stylesheet is set to HTML by using the xsl:output element. By setting the output to be HTML and not having a namespace on the resulting elements (colored in blue), those elements will be treated as HTML elements. +

그림 3 : 두 namespaces를 가진 XSL Stylesheet (example2.xsl) +XSL Stylesheet (example2.xsl): +

+
<?xml version="1.0"?>
+<xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+<xsl:output method="html"/>
+...
+</xsl:stylesheet version="1.0">
+
+

A template matching the root node of the XML document is created and used to create the basic structure of the HTML page. +

Figure 4 : Creating the basic HTML document +XSL Stylesheet (example2.xsl): +

+
...
+<xsl:template match="/">
+<html>
+
+<head>
+
+<title>
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</title>
+
+<style type="text/css">
+.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+</style>
+
+</head>
+
+<body>
+<p class="myBox">
+<span class="title">
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</span> </br>
+
+Authors: <br />
+<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+</p>
+
+<p class="myBox">
+<xsl:apply-templates select="//myNS:Body"/>
+</p>
+
+</body>
+
+</html>
+</xsl:template>
+...
+
+

Three more xsl:template's are needed to complete the example. The first xsl:template is used for the author nodes, while the second one processes the body node. The third template has a general matching rule which will match any node and any attribute. It is needed in order to preserve the html elements in the XML document, since it matches all of them and copies them out into the HTML document the transformation creates. +

그림 5 : 최종 3개 템플리트 +XSL Stylesheet(example2.xsl): +

+
...
+<xsl:template match="myNS:Author">
+-- <xsl:value-of select="." />
+
+<xsl:if test="@company">
+:: <b> <xsl:value-of select="@company" /> </b>
+</xsl:if>
+
+<br />
+</xsl:template>
+
+<xsl:template match="myNS:Body">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="@*|node()">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+...
+
+

The final XSLT stylesheet looks as follows: +

그림 6 : 최종 XSLT Stylesheetview example | view source +XSL Stylesheet: +

+
<?xml version="1.0"?>
+<xsl:stylesheet version="1.0"
+xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+xmlns:myNS="http://devedge.netscape.com/2002/de">
+
+<xsl:output method="html" />
+
+<xsl:template match="/">
+<html>
+
+<head>
+
+<title>
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</title>
+
+<style type="text/css">
+.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
+</style>
+
+</head>
+
+<body>
+<p class="myBox">
+<span class="title">
+<xsl:value-of select="/myNS:Article/myNS:Title"/>
+</span> <br />
+
+Authors: <br />
+<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
+</p>
+
+<p class="myBox">
+<xsl:apply-templates select="//myNS:Body"/>
+</p>
+
+</body>
+
+</html>
+</xsl:template>
+
+<xsl:template match="myNS:Author">
+-- <xsl:value-of select="." />
+
+<xsl:if test="@company">
+:: <b> <xsl:value-of select="@company" /> </b>
+</xsl:if>
+
+<br />
+</xsl:template>
+
+<xsl:template match="myNS:Body">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+
+<xsl:template match="@*|node()">
+<xsl:copy>
+<xsl:apply-templates select="@*|node()"/>
+</xsl:copy>
+</xsl:template>
+</xsl:stylesheet>
+
+{{ languages( { "en": "en/XSLT_in_Gecko/Generating_HTML" } ) }} diff --git a/files/ko/web/api/xsltprocessor/index.html b/files/ko/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..84d5198c58 --- /dev/null +++ b/files/ko/web/api/xsltprocessor/index.html @@ -0,0 +1,15 @@ +--- +title: XSLT in Gecko +slug: XSLT_in_Gecko +tags: + - XSLT +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLT_in_Gecko +--- +
  1. 개요 +
  2. 기본 예제 +
  3. HTML 생성 +
  4. 브라우저 차이 +
  5. 자원 +
+{{ languages( { "en": "en/XSLT_in_Gecko" } ) }} diff --git a/files/ko/web/api/xsltprocessor/introduction/index.html b/files/ko/web/api/xsltprocessor/introduction/index.html new file mode 100644 index 0000000000..bfb103b98f --- /dev/null +++ b/files/ko/web/api/xsltprocessor/introduction/index.html @@ -0,0 +1,13 @@ +--- +title: Introduction +slug: XSLT_in_Gecko/Introduction +translation_of: Web/API/XSLTProcessor/Introduction +--- +

개요

+

W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다. +

이것은 같은 스타일이 여러 내용에서 재사용되는 것을 허용할 뿐 아니라 유지보수를 쉽게 하고 (하나의 파일만 바꾸어서) 내용의 외관을 빠르게 바꾸는 방법을 허용한다. +

CSS (Cascade Style Sheets)는 W3C에서 제안된 첫번째 방법이다. CSS는 스타일규칙을 웹문서에 적용하는 간단한 방법이다. 이 스타일규칙은 어떻게 문서(내용)가 놓일지 정의한다. 그러나, 여러 제한이 있다. 프로그램 구조와 복잡한 레이아웃 모델을 만드는 가능성의 부족. CSS는 요소의 위치 변화제공에 제한된다. +

XSL (Extensible Stylesheet Language)변환은 두 부분으로 구성된다. XML트리를 다른 마크업 트리로 변환하는 XSL요소, 트리를 위한 선택언어 XPath. +XSLT는 XML문서를 얻어서 XSL스타일쉬트안의 규칙에 기반한 새 문서를 생성한다. 이것은 XSLT가 원 XML문서로부터 요소를 추가, 제거, 재구성하는 것을 허용하고 따라서 결과문서구조의 좀더 세분된 제어를 허용한다. +

XSLT의 변환은 template로 구성된 규칙에 기반한다. 각 template은 입력 XML문서의 조각에 대응하고 대응하는 부분을 새 결과문서에 적용한다. +

{{ languages( { "en": "en/XSLT_in_Gecko/Introduction" } ) }} diff --git a/files/ko/web/api/xsltprocessor/resources/index.html b/files/ko/web/api/xsltprocessor/resources/index.html new file mode 100644 index 0000000000..bcdb54116f --- /dev/null +++ b/files/ko/web/api/xsltprocessor/resources/index.html @@ -0,0 +1,14 @@ +--- +title: Resources +slug: XSLT_in_Gecko/Resources +translation_of: Web/API/XSLTProcessor/Resources +--- +

자원

+ diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html deleted file mode 100644 index 96dd3182ad..0000000000 --- a/files/ko/web/css/@viewport/height/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: height -slug: Web/CSS/@viewport/height -tags: - - '@viewport' - - CSS - - CSS Descriptor - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/height ---- -
{{CSSRef}}
- -

height CSS 서술자(descriptor)는 뷰포트의 {{cssxref("@viewport/min-height", "min-height")}} 및 {{cssxref("@viewport/max-height", "max-height")}} 둘 다 설정하기 위한 단축(shorthand) 설명자입니다. 뷰포트 길이 값 하나를 주어 최소 높이 및 최대 높이 둘 다를 주어진 값으로 설정합니다.

- -

뷰포트 값이 두 개 주어진 경우, 첫 번째 값은 최소 높이로 두 번째 값은 최대 높이로 설정합니다.

- -

{{cssinfo}}

- -

구문

- -
/* 한 값 */
-height: auto;
-height: 320px;
-height: 15em;
-
-/* 두 값 */
-height: 320px 200px;
-
- -

값

- -
-
auto
-
다른 CSS 설명자의 값에서 계산된 사용값(used value).
-
<length>
-
음이 아닌 절대 또는 상대 길이.
-
<percentage>
-
가로 및 세로 길이 각각을 위한 줌 배율(factor) 1.0에서 초기 뷰포트의 너비 또는 높이에 대한 퍼센트 값. 음이 아니어야 합니다.
-
- -

형식 구문

- -
{{csssyntax}}
-
- -

예제

- -
@viewport {
-  height: 500px;
-}
- -

명세

- - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}{{Spec2('CSS3 Device')}}초기 정의
- -

브라우저 호환성

- - - -

{{Compat("css.at-rules.viewport.height")}}

diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html deleted file mode 100644 index 7dab19acbd..0000000000 --- a/files/ko/web/css/@viewport/viewport-fit/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: viewport-fit -slug: Web/CSS/@viewport/viewport-fit -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/viewport-fit ---- -
{{CSSRef}}{{Draft}}{{SeeCompatTable}}
- -

viewport-fit CSS {{CSSxRef("@viewport")}} {{Glossary("Descriptor (CSS)", "설명자")}}는 문서의 뷰포트가 화면을 채우는 방법을 제어합니다.

- -

Syntax

- -
/* Keyword values */
-viewport-fit: auto;
-viewport-fit: contain;
-viewport-fit: cover;
-
- -

Values

- -
-
auto
-
이 값은 초기 레이아웃 뷰포트에 영향을 미치지 않으며 전체 웹 페이지가 보여집니다.
-
contain
-
뷰포트 크기가 디스플레이 내에 새겨진 가장 큰 직사각형에 들어맞게 조정됩니다.
-
- -
-
cover
-
뷰포트 크기가 기기 디스플레이를 모두 채우도록 조정됩니다. 이때 중요한 내용이 디스플레이 바깥 영역으로 밀려나지 않도록 safe area inset 변수를 함께 사용할 것을 권장합니다.
-
- -

Formal syntax

- -
auto | contain | cover
-
- - - -

접근성 문제

- -

viewport-fit 설명자를 사용할 때에는 모든 기기의 디스플레이가 직사각형인 것은 아니므로 safe area inset 변수를 함께 사용해야 함을 기억하세요.

- -

명세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}{{Spec2("CSS Round Display")}}Initial definition.
- -

브라우저 호환성

- - - -

{{Compat("css.at-rules.viewport.viewport-fit")}}

- -

See also

- -
    -
  • {{CSSxRef("env", "env()")}}
    • -
diff --git a/files/ko/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html deleted file mode 100644 index 699b60921e..0000000000 --- a/files/ko/web/css/@viewport/zoom/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: zoom -slug: Web/CSS/@viewport/zoom -tags: - - CSS - - CSS Descriptor - - Graphics - - Layout - - NeedsExample - - Reference -translation_of: Web/CSS/@viewport -translation_of_original: Web/CSS/@viewport/zoom ---- -
{{ CSSRef }}
- -

zoom CSS 설명자(descriptor)는 {{cssxref("@viewport")}}에 의해 정의된 문서의 초기 줌 배율(factor)을 설정합니다.

- -

1.0 또는 100%인 줌 배율은 줌이 없음에 해당합니다. 큰 값은 확대. 작은 값은 축소.

- -

{{cssinfo}}

- -

구문

- -
/* 키워드 값 */
-zoom: auto;
-
-/* <number> 값 */
-zoom: 0.8;
-zoom: 2.0;
-
-/* <percentage> 값 */
-zoom: 150%;
-
- -

값

- -
-
auto
-
사용자 에이전트가 문서의 초기 줌 배율을 설정합니다. 사용자 에이전트는 문서가 그 배율을 찾기 위해 렌더링되는 캔버스 영역의 크기를 사용할 수 있습니다.
-
<number>
-
줌 배율로 사용되는 음이 아닌 수. 배율 1.0은 줌이 수행되지 않음을 뜻합니다. 1.0보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.
-
<percentage>
-
줌 배율로 사용되는 음이 아닌 퍼센트 값. 배율 100%는 줌이 수행되지 않음을 뜻합니다. 100%보다 큰 값은 확대 작은 값은 축소 효과가 됩니다.
-
- -

형식 구문

- -
{{csssyntax}}
- -

명세

- - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName('CSS3 Device', '#the-lsquozoomrsquo-descriptor', '"zoom" descriptor')}}{{Spec2('CSS3 Device')}}초기 스펙
- -

브라우저 호환성

- -

{{Compat("css.at-rules.viewport.zoom")}}

diff --git a/files/ko/web/css/adjacent_sibling_combinator/index.html b/files/ko/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..4446172ab3 --- /dev/null +++ b/files/ko/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,83 @@ +--- +title: 인접 형제 결합자 +slug: Web/CSS/인접_형제_선택자 +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

인접 형제 결합자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택합니다.

+ +
/* Paragraphs that come immediately after any image */
+img + p {
+  font-weight: bold;
+}
+
+ +

구문

+ +
former_element + target_element { style properties }
+
+ +

예제

+ +

CSS

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li>One</li>
+  <li>Two!</li>
+  <li>Three</li>
+</ul>
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", 100)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

브라우저 호환성

+ +

{{Compat("css.selectors.adjacent_sibling")}}

+ +

같이 보기

+ + 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 deleted file mode 100644 index 35c6bf56cb..0000000000 --- a/files/ko/web/css/all_about_the_containing_block/index.html +++ /dev/null @@ -1,263 +0,0 @@ ---- -title: 컨테이닝 블록의 모든 것 -slug: Web/CSS/All_About_The_Containing_Block -tags: - - CSS - - Guide - - Layout - - Position -translation_of: Web/CSS/Containing_block ---- -
{{cssref}}
- -

요소의 크기와 위치는 컨테이닝 블록(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨 조상의 콘텐츠 영역이나, 항상 그런 것은 아닙니다. 이 글에서는 요소의 컨테이닝 블록을 결정하는 요인을 살펴보겠습니다.

- -

사용자 에이전트(브라우저 등)는 문서를 그릴 때 모든 요소에 대해 상자(박스)를 생성합니다. 각각의 상자는 아래의 네 가지 영역으로 나눠집니다.

- -
    -
  1. 콘텐츠 영역
    2. -
  2. 안쪽 여백(패딩) 영역
    3. -
  3. 테두리 영역
    4. -
  4. 바깥 여백(마진) 영역
    5. -
- -

Diagram of the box model

- -

많은 개발자들은 요소의 컨테이닝 블록이 언제나 부모 요소의 콘텐츠 영역이라고 생각하지만, 사실 꼭 그렇지는 않습니다. 어떤 항목이 컨테이닝 블록을 결정짓나 알아보겠습니다.

- -

컨테이닝 블록의 효과

- -

컨테이닝 블록을 결정하는 요인에 뭐가 있는지 알아보기 전에, 애초에 컨테이닝 블록이 무슨 상관인지 알아두는게 유용하겠습니다.

- -

요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받습니다. 백분율 값을 사용한 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성의 값과 절대적 위치(absolute나 fixed 등)로 설정된 요소의 오프셋 속성 값은 자신의 컨테이닝 블록으로부터 계산됩니다.

- -

컨테이닝 블록 식별

- -

컨테이닝 블록의 식별 과정은 {{cssxref("position")}} 속성에 따라 완전히 달라집니다.

- -
    -
  1. position 속성이 static, relative, sticky 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너(inline-block, block, list-item 등의 요소), 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.
    2. -
  2. position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이 아닌(fixed, absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역입니다.
    3. -
  3. position 속성이 fixed인 경우, 컨테이닝 블록은 {{glossary("viewport", "뷰포트")}}나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.
    4. -
  4. position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다. -
      -
    1. {{cssxref("transform")}}이나 {{cssxref("perspective")}} 속성이 none이 아님.
      2. -
    2. {{cssxref("will-change")}} 속성이 transform이나 perspective임.
      3. -
    3. {{cssxref("filter")}} 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
      4. -
    4. {{cssxref("contain")}} 속성이 paint임.
      5. -
    -
    5. -
- -
-

참고: 루트 요소({{HTMLElement("html")}})의 컨테이닝 블록은 초기 컨테이닝 블록이라고 불리는 사각형입니다. 초기 컨테이닝 블록은 뷰포트 또는 (페이지로 나뉘는 매체에선) 페이지 영역의 크기와 같습니다.

-
- -

컨테이닝 블록으로부터 백분율 값 계산하기

- -

앞서 언급했듯, 특정 속성의 값이 백분율이라면 그 계산값은 요소의 컨테이닝 블록에 의해 결정됩니다. 이렇게 동작하는 속성으로 박스 모델 속성과 오프셋 속성이 있습니다.

- -
    -
  1. {{cssxref("height")}}, {{cssxref("top")}}, {{cssxref("bottom")}} 속성은 컨테이닝 블록의 height를 사용해 백분율을 계산합니다. 컨테이닝 블록의 height가 콘텐츠의 크기에 따라 달라질 수 있고, 컨테이닝 블록의 position이 relative거나 static이면 계산값은 0이 됩니다.
    2. -
  2. {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성은 컨테이닝 블록의 width를 사용해 백분율을 계산합니다.
    3. -
- -

예제

- -

모든 예제의 HTML코드는 다음과 같습니다.

- -
<body>
-  <section>
-    <p>문단입니다!</p>
-  </section>
-</body>
-
- -

이하 예제는 모두 CSS만 변경합니다.

- -

예제 1

- -

다음 예제에서 문단은 정적 위치를 가지고, 가장 가까운 블록 컨테이너는 {{HTMLElement("section")}}이므로 문단의 컨테이닝 블록도 <section>입니다.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('예제_1','100%','300')}}

- -

예제 2

- -

다음 예제에서 <section>은 display: inline으로 인해 블록 컨테이너가 아니고, 서식 문맥도 형성하지 않으므로 문단의 컨테이닝 블록은 {{HTMLElement("body")}} 요소입니다.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: inline;
-  background: lightgray;
-}
-
-p {
-  width: 50%;     /* == body 너비의 절반 */
-  height: 200px;  /* 참고: 백분율 값이었으면 0 */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('예제_2','100%','300')}}

- -

예제 3

- -

다음 예제에서는 <section>의 position이 absolute이기 때문에 문단의 컨테이닝 블록은 <section>입니다. 문단의 백분율 값은 컨테이닝 블록의 {{cssxref("padding")}} 값의 영향을 받겠지만, 컨테이닝 블록의 {{cssxref("box-sizing")}} 속성이 border-box였다면 그렇지 않을 것입니다.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('예제_3','100%','300')}}

- -

예제 4

- -

다음 예제에서는 문단의 position이 fixed이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면 매체에서는 뷰포트)입니다. 따라서 문단의 크기는 브라우저 창의 크기에 따라 변합니다.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('예제_4','100%','300')}}

- -

예제 5

- -

다음 예제에서는 문단의 position이 absolute이므로, 컨테이닝 블록은 {{cssxref("transform")}} 속성이 none이 아닌 가장 가까운 조상, <section>입니다.

- - - -
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;
-}
-
- -

{{EmbedLiveSample('예제_5','100%','300')}}

- -

같이 보기

- -
    -
  • {{css_key_concepts}}
    • -
  • 모든 CSS 선언을 주어진 상태로 되돌리는 {{cssxref("all")}} 속성
    • -
diff --git a/files/ko/web/css/common_css_questions/index.html b/files/ko/web/css/common_css_questions/index.html deleted file mode 100644 index 604448f6c3..0000000000 --- a/files/ko/web/css/common_css_questions/index.html +++ /dev/null @@ -1,199 +0,0 @@ ---- -title: 공통된 CSS 질문들 -slug: Web/CSS/Common_CSS_Questions -translation_of: Learn/CSS/Howto/CSS_FAQ ---- -

왜 유효한 내 CSS가 왜 올바르게 그려지지 않는가?

- -

Browsers use the DOCTYPE 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 DOCTYPE declaration at the start of your HTML will improve browser standards compliance.

- -

Modern browsers have two main rendering modes:

- -
    -
  • Quirks Mode: 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 DOCTYPE declaration or a known DOCTYPE declaration in common use before 2001 will be rendered in Quirks Mode.
    • -
  • Standards Mode: 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 DOCTYPE declaration will be rendered with Standards Mode.
    • -
- -

Gecko-based browsers, have a third Almost Standards Mode that has only a few minor quirks.

- -

This is a list of the most commonly used DOCTYPE declarations that will trigger Standards or Almost Standards mode:

- -
<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
-                   parser, this is the recommended doctype */
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd">
-
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
- -

왜 유효한 내 CSS는 모두 랜더링 되지 않는가?

- -

원인은 다음과 같다:

- -
    -
  • CSS 파일의 경로가 잘못되었다.
    • -
  • 적용을 위해서는 CSS 파일은 반드시 text/css MIME type으로 전달되어야 한다. 만약 웹 서버가 이 타입을 지원하지 않는다면 적용할 수 없다.
    • -
- -

id 와 css는 무엇이 다른가?

- -

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.
-
- 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.
-
- Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.

- -

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).

- -

See CSS selectors

- -

 프로퍼티(property)에 기본값(default value)으로 복귀 시키는 방법은?

- -

 

- -

본래 CSS는 "default" 키워드를 제공하지 않으며 속성의 기본값을 복원하는 유일한 방법은 해당 속성을 명시 적으로 다시 선언하는 것이다.

- -
/* Heading default color is black */
-h1 { color: red; }
-h1 { color: black; }
- -

이것은 CSS 2에서 변경되었다. 키워드 initial은 이제 CSS 속성에서 유효한 값이다. 지정된 속성의 CSS 사양에 정의 된 기본값으로 재설정된다.

- -
/* Heading default color is black */
-h1 { color: red; }
-h1 { color: initial; }
- -

 

- -

어떻게 하면 한 스타일(style)로 부터 다른 스타일을 파생시킬 수 있는가?

- -

CSS는 한 스타일 안에서 다른 조건을 정의하는 것을 허용하지 않는다. (See Eric Meyer's note about the Working Group's stance).  그러나 여러개의 클래스(class)들을 한 엘리먼트(element)에 할당하면 같은 효과를 제공받을 수 있다.

- -

어떻게 하면 한 요소(element)에 여러 클래스(class)를 할당할 수 있는가?

- -

HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them.

- -
<style type="text/css">
-.news { background: black; color: white; }
-.today { font-weight: bold; }
-</style>
-
-<div class="news today">
-... content of today's news ...
-</div>
-
- -

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 class attribute is not relevant.

- -

왜 내 스타일 룰(style rule)은 올바르게 동작하지 않는가?

- -

Style rules that are syntactically correct may not apply in certain situations. You can use DOM Inspector's CSS Style Rules view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.

- -

HTML 요소(element) 계층(hierarchy)

- -

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.

- -
.news { color: black; }
-.corpName { font-weight: bold; color: red; }
-
-<!-- news item text is black, but corporate name is red and in bold -->
-<div class="news">
-   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
-</div>
-
- -

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.

- -

명확한 스타일 룰 재정의

- -

CSS 스타일시트 안에서 순서가 중요하다. 만약 룰을 정의하고 같은 룰을 재정의 한다면 마지막 정의가 적용된다.

- -
#stockTicker { font-weight: bold; }
-.stockSymbol { color: red; }
-/*  other rules             */
-/*  other rules             */
-/*  other rules             */
-.stockSymbol { font-weight: normal; }
-
-<!-- most text is in bold, except "GE", which is red and not bold -->
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

위와 같은 종류의 오류를 방지하려면 특정 선택자에 대해 규칙을 한 번만 정의하고 해당 선택자에 속하는 모든 규칙을 그룹화 하는 것이 좋다.

- -

프로퍼티(property) 축약형의 사용

- -

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.

- -
#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
-.stockSymbol { font: 14px Arial; color: red; }
-
-<div id="stockTicker">
-   NYS: <span class="stockSymbol">GE</span> +1.0 ...
-</div>
-
- -

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 is important.

- -
#stockTicker {
-   font-weight: bold;
-   font: 12px Verdana;  /* font-weight is now normal */
-}
-
- -

* 셀렉터(selector)의 사용

- -

* 와일드카드 셀렉터는 모든 엘리먼트에 적용되고, 이것은 특별히 주의를 기울여 사용해야 한다.

- -
body * { font-weight: normal; }
-#stockTicker { font: 12px Verdana; }
-.corpName { font-weight: bold; }
-.stockUp { color: red; }
-
-<div id="section">
-   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
-</div>
-
- -

In this example the body * selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So font-weight: bold; applied to the .corpName class is overridden by font-weight: normal; applied to all elements in the body.

- -

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.

- -

CSS의 특수성

- -

When multiples rules apply to a certain element, the rule chosen depends on its style specificity. Inline style (in HTML style attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.

- -
div { color: black; }
-#orange { color: orange; }
-.green { color: green; }
-
-<div id="orange" class="green" style="color: red;">This is red</div>
-
- -

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 CSS 2.1 Specification chapter 6.4.3.

- -

-moz-*, -ms-*, -webkit-*, -o-* and -khtml-* 프로퍼티(property)들이 하는 것은?

- -

These properties, called prefixed properties, 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.

- -

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.

- -

Please see the Mozilla CSS Extensions page for more information on the Mozilla-prefixed CSS properties.

- -

z-index는 어떻게 포지셔닝을 하는가?

- -

The z-index property specifies the stack order of elements.

- -

An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.

- -

Z-index will only work on elements that have a specified position (position:absolute, position:relative, or position:fixed).

diff --git a/files/ko/web/css/containing_block/index.html b/files/ko/web/css/containing_block/index.html new file mode 100644 index 0000000000..35c6bf56cb --- /dev/null +++ b/files/ko/web/css/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 +--- +
{{cssref}}
+ +

요소의 크기와 위치는 컨테이닝 블록(containing block)의 영향을 받곤 합니다. 대부분의 경우, 어떤 요소의 컨테이닝 블록은 가장 가까운 블록 레벨 조상의 콘텐츠 영역이나, 항상 그런 것은 아닙니다. 이 글에서는 요소의 컨테이닝 블록을 결정하는 요인을 살펴보겠습니다.

+ +

사용자 에이전트(브라우저 등)는 문서를 그릴 때 모든 요소에 대해 상자(박스)를 생성합니다. 각각의 상자는 아래의 네 가지 영역으로 나눠집니다.

+ +
    +
  1. 콘텐츠 영역
    2. +
  2. 안쪽 여백(패딩) 영역
    3. +
  3. 테두리 영역
    4. +
  4. 바깥 여백(마진) 영역
    5. +
+ +

Diagram of the box model

+ +

많은 개발자들은 요소의 컨테이닝 블록이 언제나 부모 요소의 콘텐츠 영역이라고 생각하지만, 사실 꼭 그렇지는 않습니다. 어떤 항목이 컨테이닝 블록을 결정짓나 알아보겠습니다.

+ +

컨테이닝 블록의 효과

+ +

컨테이닝 블록을 결정하는 요인에 뭐가 있는지 알아보기 전에, 애초에 컨테이닝 블록이 무슨 상관인지 알아두는게 유용하겠습니다.

+ +

요소의 크기와 위치는 컨테이닝 블록의 영향을 자주 받습니다. 백분율 값을 사용한 {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성의 값과 절대적 위치(absolute나 fixed 등)로 설정된 요소의 오프셋 속성 값은 자신의 컨테이닝 블록으로부터 계산됩니다.

+ +

컨테이닝 블록 식별

+ +

컨테이닝 블록의 식별 과정은 {{cssxref("position")}} 속성에 따라 완전히 달라집니다.

+ +
    +
  1. position 속성이 static, relative, sticky 중 하나이면, 컨테이닝 블록은 가장 가까운 조상 블록 컨테이너(inline-block, block, list-item 등의 요소), 또는 가장 가까우면서 서식 맥락을 형성하는 조상 요소(table, flex, grid, 아니면 블록 컨테이너 자기 자신)의 콘텐츠 영역 경계를 따라 형성됩니다.
    2. +
  2. position 속성이 absolute인 경우, 컨테이닝 블록은 position 속성 값이 static이 아닌(fixed, absolute, relative, sticky) 가장 가까운 조상의 내부 여백 영역입니다.
    3. +
  3. position 속성이 fixed인 경우, 컨테이닝 블록은 {{glossary("viewport", "뷰포트")}}나 페이지 영역(페이지로 나뉘는 매체인 경우)입니다.
    4. +
  4. position 속성이 absolute나 fixed인 경우, 다음 조건 중 하나를 만족하는 가장 가까운 조상의 내부 여백 영역이 컨테이닝 블록이 될 수도 있습니다. +
      +
    1. {{cssxref("transform")}}이나 {{cssxref("perspective")}} 속성이 none이 아님.
      2. +
    2. {{cssxref("will-change")}} 속성이 transform이나 perspective임.
      3. +
    3. {{cssxref("filter")}} 속성이 none임. (Firefox에선 will-change가 filter일 때도 적용)
      4. +
    4. {{cssxref("contain")}} 속성이 paint임.
      5. +
    +
    5. +
+ +
+

참고: 루트 요소({{HTMLElement("html")}})의 컨테이닝 블록은 초기 컨테이닝 블록이라고 불리는 사각형입니다. 초기 컨테이닝 블록은 뷰포트 또는 (페이지로 나뉘는 매체에선) 페이지 영역의 크기와 같습니다.

+
+ +

컨테이닝 블록으로부터 백분율 값 계산하기

+ +

앞서 언급했듯, 특정 속성의 값이 백분율이라면 그 계산값은 요소의 컨테이닝 블록에 의해 결정됩니다. 이렇게 동작하는 속성으로 박스 모델 속성과 오프셋 속성이 있습니다.

+ +
    +
  1. {{cssxref("height")}}, {{cssxref("top")}}, {{cssxref("bottom")}} 속성은 컨테이닝 블록의 height를 사용해 백분율을 계산합니다. 컨테이닝 블록의 height가 콘텐츠의 크기에 따라 달라질 수 있고, 컨테이닝 블록의 position이 relative거나 static이면 계산값은 0이 됩니다.
    2. +
  2. {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, {{cssxref("margin")}} 속성은 컨테이닝 블록의 width를 사용해 백분율을 계산합니다.
    3. +
+ +

예제

+ +

모든 예제의 HTML코드는 다음과 같습니다.

+ +
<body>
+  <section>
+    <p>문단입니다!</p>
+  </section>
+</body>
+
+ +

이하 예제는 모두 CSS만 변경합니다.

+ +

예제 1

+ +

다음 예제에서 문단은 정적 위치를 가지고, 가장 가까운 블록 컨테이너는 {{HTMLElement("section")}}이므로 문단의 컨테이닝 블록도 <section>입니다.

+ + + +
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;
+}
+
+ +

{{EmbedLiveSample('예제_1','100%','300')}}

+ +

예제 2

+ +

다음 예제에서 <section>은 display: inline으로 인해 블록 컨테이너가 아니고, 서식 문맥도 형성하지 않으므로 문단의 컨테이닝 블록은 {{HTMLElement("body")}} 요소입니다.

+ + + +
body {
+  background: beige;
+}
+
+section {
+  display: inline;
+  background: lightgray;
+}
+
+p {
+  width: 50%;     /* == body 너비의 절반 */
+  height: 200px;  /* 참고: 백분율 값이었으면 0 */
+  background: cyan;
+}
+
+ +

{{EmbedLiveSample('예제_2','100%','300')}}

+ +

예제 3

+ +

다음 예제에서는 <section>의 position이 absolute이기 때문에 문단의 컨테이닝 블록은 <section>입니다. 문단의 백분율 값은 컨테이닝 블록의 {{cssxref("padding")}} 값의 영향을 받겠지만, 컨테이닝 블록의 {{cssxref("box-sizing")}} 속성이 border-box였다면 그렇지 않을 것입니다.

+ + + +
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;
+}
+
+ +

{{EmbedLiveSample('예제_3','100%','300')}}

+ +

예제 4

+ +

다음 예제에서는 문단의 position이 fixed이므로 컨테이닝 블록은 초기 컨테이닝 블록(화면 매체에서는 뷰포트)입니다. 따라서 문단의 크기는 브라우저 창의 크기에 따라 변합니다.

+ + + +
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;
+}
+
+ +

{{EmbedLiveSample('예제_4','100%','300')}}

+ +

예제 5

+ +

다음 예제에서는 문단의 position이 absolute이므로, 컨테이닝 블록은 {{cssxref("transform")}} 속성이 none이 아닌 가장 가까운 조상, <section>입니다.

+ + + +
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;
+}
+
+ +

{{EmbedLiveSample('예제_5','100%','300')}}

+ +

같이 보기

+ +
    +
  • {{css_key_concepts}}
    • +
  • 모든 CSS 선언을 주어진 상태로 되돌리는 {{cssxref("all")}} 속성
    • +
diff --git a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html deleted file mode 100644 index 69d4320e3c..0000000000 --- a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html +++ /dev/null @@ -1,56 +0,0 @@ ---- -title: 여러개의 배경 지정하기 -slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds -tags: - - CSS - - CSS Background - - Example - - Guide - - Intermediate -translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds -translation_of_original: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds ---- -

{{CSSRef}}

- -

CSS3를 사용하면 엘리먼트에 여러개의 배경을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상({{ cssxref("color") }})는 맨 마지막에만 지정할 수 있다. 

- -

여러개의 배경을 지정하는건 간단하다.

- -
.myclass {
-  background: background1, background 2, ..., backgroundN;
-}
-
- -

배경에 관련된 다른 속성들은 {{ cssxref("background") }} 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다.  하지만  {{ 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") }}

- -

예제

- -

이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다. 

- -
.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;
-}
-
- - - - - - - - - - -
Result
css_multibg.png
- -

첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. {{ cssxref("background-repeat") }} 와 {{ cssxref("background-position") }}) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 {{ cssxref("background-repeat") }} 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.

- -

더 보기

- - diff --git a/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/resizing_background_images/index.html new file mode 100644 index 0000000000..f3f0d6529b --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/resizing_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 +--- +
{{cssref}}
+ +

CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. {{cssxref("background-size")}} 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. 이미지는 원하는대로 확대할 수도, 줄일 수도 있습니다.

+ +

큰 이미지 바둑판식 배열

+ +

2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. background-size와 고정값 150 픽셀로 목표를 달성할 수 있습니다.

+ +

HTML

+ +
<div class="tiledBackground">
+</div>
+ +

CSS

+ +
.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;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("큰_이미지_바둑판식_배열", 340, 340)}}

+ +

이미지 늘리기

+ +

가로와 세로 크기를 각각 지정할 수도 있습니다.

+ +
background-size: 300px 150px;
+
+ +

결과는 다음과 같습니다.

+ +

+ +

작은 이미지 키우기

+ +

반대로 배경 이미지를 키울 수도 있습니다. 다음 코드는 32x32 픽셀 파비콘을 300x300 픽셀로 늘린 결과입니다.

+ +

+ +
.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;
+}
+
+ +

보시다시피 CSS는 이미지 파일 이름을 제외하면 동일합니다.

+ +

특별한 값: "contain" 과 "cover"

+ +

길이를 나타내는 {{cssxref("<length>")}} 값 대신, {{ cssxref("background-size") }} CSS 속성에 contain 과 cover 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.

+ +

contain

+ +

contain 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

+ +

HTML

+ +
<div class="bgSizeContain">
+  <p>Try resizing this element!</p>
+</div>
+ +

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;
+}
+ +

결과

+ +

{{ EmbedLiveSample('contain', 250, 250) }}

+ +

cover

+ +

값을 cover 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

+ +

HTML

+ +
<div class="bgSizeCover">
+  <p>Try resizing this element!</p>
+</div>
+ +

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;
+}
+ +

결과

+ +

{{ EmbedLiveSample('cover', 250, 250) }}

+ +

같이 보기

+ + 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 deleted file mode 100644 index f3f0d6529b..0000000000 --- a/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -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 ---- -
{{cssref}}
- -

CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. {{cssxref("background-size")}} 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다. 이미지는 원하는대로 확대할 수도, 줄일 수도 있습니다.

- -

큰 이미지 바둑판식 배열

- -

2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. background-size와 고정값 150 픽셀로 목표를 달성할 수 있습니다.

- -

HTML

- -
<div class="tiledBackground">
-</div>
- -

CSS

- -
.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;
-}
-
- -

Result

- -

{{EmbedLiveSample("큰_이미지_바둑판식_배열", 340, 340)}}

- -

이미지 늘리기

- -

가로와 세로 크기를 각각 지정할 수도 있습니다.

- -
background-size: 300px 150px;
-
- -

결과는 다음과 같습니다.

- -

- -

작은 이미지 키우기

- -

반대로 배경 이미지를 키울 수도 있습니다. 다음 코드는 32x32 픽셀 파비콘을 300x300 픽셀로 늘린 결과입니다.

- -

- -
.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;
-}
-
- -

보시다시피 CSS는 이미지 파일 이름을 제외하면 동일합니다.

- -

특별한 값: "contain" 과 "cover"

- -

길이를 나타내는 {{cssxref("<length>")}} 값 대신, {{ cssxref("background-size") }} CSS 속성에 contain 과 cover 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.

- -

contain

- -

contain 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

- -

HTML

- -
<div class="bgSizeContain">
-  <p>Try resizing this element!</p>
-</div>
- -

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;
-}
- -

결과

- -

{{ EmbedLiveSample('contain', 250, 250) }}

- -

cover

- -

값을 cover 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.

- -

HTML

- -
<div class="bgSizeCover">
-  <p>Try resizing this element!</p>
-</div>
- -

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;
-}
- -

결과

- -

{{ EmbedLiveSample('cover', 250, 250) }}

- -

같이 보기

- - diff --git a/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..416718c17f --- /dev/null +++ b/files/ko/web/css/css_basic_user_interface/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 +--- +

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.

+ +

문법

+ +

이 속성의 문법은 다음과 같습니다:

+ +
cursor: [<url>,]* keyword;
+
+ +

즉, URL을 지정하지 않거나 혹은 다수의 콤마로 분리된 URL값들을 지정할 수 있으며, 이 값들 뒤엔 반드시 CSS규정에 정의된 auto 나 pointer같은 키워드들이 따라와야 합니다.

+ +

예를 들면, 다음과 같은 값이 지정될 수 있습니다:

+ +
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
+
+ +

우선 foo.cur의 로딩이 시도 되고, 만약 이 파일이 없거나 어떤 다른 이유로 파일이 부적합할 경우, bar.gif를 로드하게 되고 이것 마저 사용할 수 없게 되면, auto가 사용될 것입니다.

+ +

커서 값에 대한 CSS3 syntax 지원은 Gecko 1.8beta3에 부가되었으며, 따라서 Firefox 1.5에서 사용할 수 있습니다. 이 기능은 커서 이미지의 바운더리에 부착시킬 커서의 핫스팟의 좌표를 지정할 수 있게 해줍니다. 만일 아무것도 지정되지 않을 경우, 핫스팟의 좌표는 이미지 파일 자체에서 (CUR 와 XBN 파일의 경우) 읽어 들이거나 이미지의 좌측 상단 코너로 지정됩니다. CSS3 문법의 예문은 다음과 같습니다:

+ +
cursor: url(foo.png) 4 12, auto;
+
+ +

첫번째 숫자는 x좌표이며, 두번째 숫자는 y좌표입니다. 이 예문은 이미지의 왼쪽 위 (0,0)로부터 (4, 12)의 위치의 픽셀을 핫스팟으로 지정할 것입니다.

+ +

제약 사항

+ +

Gecko가 지원하는 모든 이미지 포팻이 사용가능합니다. 즉, BMP, JPG, CUR, GIF 등의 이미지를 사용할 수 있습니다. 그러나, ANI는 지원되지 않습니다. animated GIF 이미지로 지정해도, 커서는 animated 커서가 되지는 않을 것입니다. 이런 문제점은 향후 릴리즈에서 제거될 것입니다.

+ +

Gecko는 커서의 크기에 관해서 어떤 제약을 두고 있지는 않습니다만, 다른 운영체제나 플랫폼들과의 최대의 호환성을 유지하기 위해 커서 크기를 32x32로 제한할것을 권장합니다. 특히, 이보다 큰 커서는 윈도우 9x (95, 98, ME) 에서 작동하지 않을 것입니다.

+ +

투명 커서는 XP보다 이전 윈도우 릴리즈에서는 지원되지 않으며, 이는 운영체제의 제약사항입니다. 투명기능은 모든 플랫폼에서 작동합니다.

+ +

모질라의 윈도우, 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) }})

+ +

다른 브라우저들과의 호환성

+ +

마이크로소프트 인터넷 익스플로러(MSIE)도 cursor속성으로 URL 값을 지원합니다. 그러나, CUR 과 ANI 포맷만을 지원합니다.

+ +

cursor속성 문법도 또한 제약이 덜한 관계로

+ +
cursor: url(foo.cur);
+
+ +

이나

+ +
cursor: url(foo.cur), pointer, url(bar.cur), auto;
+
+ +

와 같은 값도 MSIE에선 작동할 것입니다. 그러나 이런 값은 Gecko에선 작동하지 않을 것입니다. Gecko와의 호환성을 위해서 또 CSS규약에 따라, 항상 URL 리스트를 먼저 나열하시고, 정확히 하나의 키워드 값을 그 뒤에 사용하십시오.

+ +

To-do

+ +
+
To-do: document what MSIE does with CSS 3 hotspot locations
+
+ +

Interwiki Language Links

+ +

{{ languages( { "ja": "ja/Using_URL_values_for_the_cursor_property" } ) }}

diff --git a/files/ko/web/css/css_columns/using_multi-column_layouts/index.html b/files/ko/web/css/css_columns/using_multi-column_layouts/index.html new file mode 100644 index 0000000000..47d363969c --- /dev/null +++ b/files/ko/web/css/css_columns/using_multi-column_layouts/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 +--- +

{{CSSRef("CSS Multi-columns")}}

+ +

CSS 다단(multi-column) 레이아웃은 다단 텍스트 정의가 쉽도록 블록 레이아웃 모드를 확장합니다. 사람들은 줄이 너무 긴 경우 텍스트 읽는데 어려움이 있습니다; 한 줄 끝에서 다음 줄 시작까지 눈에 옮기기 너무 긴 경우, 어느 줄을 읽고 있었는 지를 잊어버립니다. 그러므로, 큰 화면을 최대로 쓰기 위해서는, 너비가 제한된 텍스트 단을 나란히 놓아야 합니다, 바로 신문이 하는 것처럼.

+ +

불행하게도 이는 CSS 및 HTML로 하기는 고정 위치에서 강제 단 바꿈 또는 텍스트에 허용되는 마크업의 심한 제한 혹은 위대한(heroic) 스크립팅 사용 없이는 불가능합니다. 이 제한은 전통 블록 레이아웃 모드를 확장하는 새로운 CSS 속성 추가로 해결됐습니다.

+ +

단 사용

+ +

단 수와 너비

+ +

두 CSS 속성은 많은 단을 보일 지 여부와 방법을 제어합니다: {{ Cssxref("column-count") }} 및 {{ Cssxref("column-width") }}.

+ +

column-count 속성은 단 수를 특정한 수로 설정합니다. 가령,

+ +

예 1

+ +

HTML

+ +
+
<div id="col">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+
+ +

CSS

+ +
#col {
+-moz-column-count: 2;
+-webkit-column-count: 2;
+column-count: 2;
+}
+
+
+ +

결과

+ +

두 단에 콘텐츠를 표시합니다 (다단 준수 브라우저를 사용 중인 경우):

+ +

{{EmbedLiveSample('column_count','700px', '', '')}}

+ +

column-width 속성은 희망 최소 단 너비를 설정합니다. column-count도 설정되지 않은 경우, 그러면 브라우저는 자동으로 이용 가능한 너비에 맞게 많은 단을 만듭니다.

+ +

예 2

+ +

HTML

+ +
+
<div id="wid">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+
+ +

CSS

+ +
#wid {
+-moz-column-width: 100px;
+-webkit-column-width: 100px;
+column-width: 100px;
+}
+
+
+ +

결과

+ +

{{ EmbedLiveSample('column_width','700px', '', '') }}

+ +

정확한 세부사항은 CSS3 스펙에 설명되어 있습니다.

+ +

다단 블록에서, 콘텐츠는 필요에 따라 한 단에서 다음 단으로 자동으로 흐릅니다. 모든 HTML, CSS 및 DOM 기능은 단 내에서 지원됩니다, 편집 및 인쇄 중일 때.

+ +

columns 단축

+ +

대부분, 웹 디자이너는 두 CSS 속성({{ cssxref("column-count") }} 또는 {{ cssxref("column-width") }}) 중 하나를 사용합니다. 이러한 속성에 대한 값이 겹치지 않기에, 종종 {{ cssxref("columns") }} 단축을 쓰는 게 편리합니다. 가령.

+ +

column-width:12em CSS 선언은 다음으로 대체될 수 있습니다:

+ +

예 3

+ +

HTML

+ +
+
<div id="col_short">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+
+ +

CSS

+ +
#col_short {
+-moz-column-width: 12em;
+-moz-columns: 12em;
+-webkit-columns: 12em;
+columns: 12em;
+}
+
+
+ +

결과

+ +

{{EmbedLiveSample('column_short','700px', '', '')}}

+ +

column-count:4 CSS 선언은 다음으로 대체될 수 있습니다:

+ +

예 4

+ +

HTML

+ +
+
<div id="columns_4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+
+ +

CSS

+ +
#columns_4{
+-moz-column-count: 4;
+-moz-columns: 4;
+-webkit-columns: 4;
+columns: 4;
+}
+
+
+ +

결과

+ +

{{ EmbedLiveSample('four_columns','700px', '', '') }}

+ +

column-width:8em 및 column-count:12 두 CSS 선언은 다음으로 대체될 수 있습니다:

+ +

예 5

+ +

HTML

+ +
+
<div id="columns_12">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+
+ +

CSS

+ +
#columns_12 {
+-moz-columns: 12 8em;
+-webkit-columns: 12 8em;
+columns: 12 8em;
+}
+
+
+ +

결과

+ +

{{ EmbedLiveSample('twelve_columns','700px', '', '') }}

+ +

높이 균형

+ +

CSS3 Column 스펙은 단 높이는 균형을 이루어야 함을 요구합니다: 즉, 브라우저는 각 단의 콘텐츠 높이가 거의 같도록 자동으로 최대 단 높이를 설정합니다. Firefox는 이를 행합니다.

+ +

그러나, 일부 상황에서는 최대 단 높이를 명시해서 설정하는 것도 유용하고 그 다음 첫 단에서 시작하여 필요한 만큼 많은 단을 생성하며, 어쩌면 오른쪽으로 넘치는 콘텐츠를 배치합니다. 따라서, 높이가 제한되는 경우, 다단 블록에 CSS {{ cssxref("height") }} 또는 {{ cssxref("max-height") }} 속성을 설정하여, 각 단은 그 높이 및 더 이상 새로운 단을 추가하기 전까지 늘 수 있습니다. 이 모드 역시 레이아웃에 대해서 훨씬 더 효율이 좋습니다.

+ +

단 간격

+ +

단 사이 간격이 있습니다. 기본 권장값은 1em입니다. 이 크기는 {{ Cssxref("column-gap") }} 속성을 다단 블록에 적용하여 바꿀 수 있습니다:

+ +

예 6

+ +

HTML

+ +
+
<div id="column_gap">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
+
+ +

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;
+}
+
+
+ +

결과

+ +

{{ EmbedLiveSample('col_gap','700px', '', '') }}

+ +

우아한 강등

+ +

단 속성은 단을 지원하지 않는 브라우저에 의해 그냥 무시됩니다. 따라서 비지원 브라우저에서는 1단으로 표시하고 지원하는 브라우저에서는 다단을 사용하는 레이아웃을 만드는 게 그런 대로 쉽습니다.

+ +

모든 브라우저가 이러한 접두어 없는 속성을 지원하는 것은 아님을 주의하세요. 오늘날 대부분의 브라우저에서 이 기능을 사용하기 위해서, 각 속성은 세 번({{ property_prefix("-moz") }} 접두어로 한 번, {{ property_prefix("-webkit") }} 접두어로 한 번 그리고 접두어 없이 한 번) 작성되어야 합니다.

+ +

결론

+ +

CSS3 단(column)은 웹 개발자가 화면 영역(real estate)을 최대한 쓸 수 있게 돕는 원시(primitive) 레이아웃입니다. 상상력이 풍부한 개발자는 많은 단 사용법을 찾을 지도 모릅니다, 특히 자동 높이 균형 기능 가지고.

+ +

참조

+ + diff --git a/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html new file mode 100644 index 0000000000..1966114608 --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/basic_concepts_of_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 +--- +
{{CSSRef}}
+ +

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.

+ +

flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조됩니다.

+ +

flexbox의 두 개의 축

+ +

flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 합니다. 주축은 {{cssxref("flex-direction")}} 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정됩니다. flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원되기 때문에 이들이 어떻게 동작하는지 처음부터 이해하는 것이 중요합니다.

+ +

주축

+ +

주축은 flex-direction에 의해 정의되며 4개의 값을 가질 수 있습니다:

+ +
    +
  • row
    • +
  • row-reverse
    • +
  • column
    • +
  • column-reverse
    • +
+ +

row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따릅니다.

+ +

If flex-direction is set to row the main axis runs along the row in the inline direction.

+ +

column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따릅니다.

+ +

If flex-direction is set to column the main axis runs in the block direction.

+ +

교차축

+ +

교차축은 주축에 수직하므로, 만약 flex-direction(주축)이 row 나 row-reverse 라면 교차축은 열 방향을 따릅니다.

+ +

If flex-direction is set to row then the cross axis runs in the block direction.

+ +

주축이 column 혹은 column-reverse 라면 교차축은 행 방향을 따릅니다.

+ +

If flex-direction is set to column then the cross axis runs in the inline direction.

+ +

flex 요소를 정렬하고 끝을 맞추(justify)려면 어느 축이 어느 방향인지 이해하는 것이 중요합니다; flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.

+ +

시작선과 끝선

+ +

flexbox가 쓰기 방법(writing mode)을 가정하지 않는다는 것은 상당히 중요합니다. 과거의 CSS는 왼쪽에서 오른쪽으로 향하는 가로 방향의 쓰기 방법에 치우쳐 있었습니다. 하지만 현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다. 새 라인이 항상 아래에 쌓인다고 가정하지도 않습니다.

+ +

다른 글에서 flexbox와 쓰기 방법 명세(writing mode spec.)가 어떤 관련이 있는지 알아볼 수 있습니다. 그 전에, 이 글에서 flex 요소의 정렬 방향에 "왼쪽, 오른쪽, 위, 아래"를  사용하지 않는 이유를 알 수 있었으면 합니다.

+ +

flex-direction이 row고 영어 문장을 문서에 쓰고 있다면, 주축의 시작선은 왼쪽 끝, 끝선은 오른쪽 끝이 될 것입니다.

+ +

Working in English the start edge is on the left.

+ +

아랍어 문장을 쓰고 있다면, 주축의 시작선은 오른쪽 끝, 끝 선은 왼쪽 끝이 될 것입니다.

+ +

The start edge in a RTL language is on the right.

+ +

영어와 아랍어는 모두 가로 쓰기를 채택하고 있으므로 두 예시에서 교차축의 시작선은 flex 컨테이너의 위 끝이며 끝선은 아래 끝입니다.

+ +

조금만 지나면 왼쪽-오른쪽으로 생각하는 것보다 시작선-끝선으로 생각하는 것이 금새 자연스러워질 것입니다. 동일한 패턴을 따르는 CSS 그리드 레이아웃 같은 방법을 다룰 때도 쉽게 적응할 수 있을 것입니다.

+ +

flex 컨테이너

+ +

문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부릅니다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 {{cssxref("display")}} 값을 flex 혹은 inline-flex로 지정합니다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됩니다. display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.

+ +
    +
  • 항목은 행으로 나열됩니다. (flex-direction 속성의 기본값은 row입니다).
    • +
  • 항목은 주축의 시작 선에서 시작합니다.
    • +
  • 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.
    • +
  • 항목은 교차축의 크기를 채우기 위해 늘어납니다.
    • +
  • {{cssxref("flex-basis")}} 속성은 auto로 지정됩니다.
    • +
  • {{cssxref("flex-wrap")}} 속성은 nowrap으로 지정됩니다.
    • +
+ +

이렇게되면 flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.

+ +

다음의 라이브 예시를 통해 어떻게 보여지는지 확인할 수 있습니다. flexbox의 초기 동작을 시험해보려면 항목을 추가하거나 수정해보시기 바랍니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+ +

flex-direction 지정

+ +

flex 컨테이너에 {{cssxref("flex-direction")}} 속성을 지정하면 flex 항목이 나열되는 방향을 변경할 수 있습니다. flex-direction: row-reverse 라고 지정하면 행으로 나열되는 것은 그대로지만 시작 선과 끝 선이 서로 바뀌게 됩니다.

+ +

flex-direction을 column으로 지정하면 주축이 변경되고 항목들은 열로 나열됩니다. column-reverse로 지정하면 그에 더해 시작 선과 끝 선이 서로 바뀌게 됩니다.

+ +

다음의 라이브 예시는 flex-direction이 row-reverse로 지정되어 있습니다. row, column, column-reverse와 같은 값을 지정해서 어떻게 되는지 확인해보시기 바랍니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+ +

flex-wrap을 이용한 복수 행 flex 컨테이너 지정

+ +

flexbox는 1차원 모델이지만 flex 항목이 여러 행에 나열되도록 할 수 있습니다. 그 경우 각 행이 새로운 flex 컨테이너라고 생각해야 합니다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않습니다.

+ +

항목이 여러 행에 나열되도록 하려면 {{cssxref("flex-wrap")}} 속성의 값을 wrap으로 지정합니다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치됩니다. 아래의 라이브 예시에 있는 flex 항목은 폭이 지정되어 있으며 항목들의 폭의 합은 flex 컨테이너에 들어가기에는 너무 넓습니다. flex-wrap속성이 wrap으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 nowrap을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다.  nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+ +

Mastering Wrapping of Flex Items 가이드에서 더 자세한 내용을 확인할 수 있습니다.

+ +

축약형 속성 flex-flow

+ +

flex-direction 속성과 flex-wrap 속성을 {{cssxref("flex-flow")}}라는 축약 속성으로 합칠 수 있습니다. 첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrap입니다.

+ +

다음의 라이브 예시에서 첫 번째 값을 flex-direction에 지정 가능한 값들(row, row-reverse, column or column-reverse)로 바꿔보시기 바랍니다. 두 번째 값도 wrap이나 nowrap으로 바꿔보시기 바랍니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+ +

flex 항목에 지정 가능한 속성들

+ +

flex 항목에 적용할 수 있는 속성은 다음과 같습니다.

+ +
    +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
+ +

이 글에서는 위의 속성들에 대해 간략하게 살펴보겠습니다. 자세한 내용은 Controlling Ratios of Flex Items on the Main Axis에서 다룹니다.

+ +

500 픽셀의 크기를 갖는 flex 컨테이너 내에 100 픽셀 크기의 자식 세 개가 존재할 때, 사용가능한 공간 200 픽셀이 남게 됩니다. 기본적으로 flexbox는 이 공간을 마지막 자식 요소 다음에 빈공간으로 남겨둡니다.

+ +

This flex container has available space after laying out the items.

+ +

위의 세 가지 속성을 변경한다는 것은 flex 항목에게 사용가능한 공간을 분배하는 방식을 변경하는 것입니다. 사용가능한 공간 개념은 flex 항목을 정렬할 때 특히 중요합니다.

+ +

flex-basis 속성

+ +

flex-basis 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 auto이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다. 위의 사진 예시의 경우 항목의 크기가 100 픽셀이므로 flex-basis의 값으로 100 픽셀이 사용됩니다.

+ +

flex 항목에 크기가 지정되어 있지 않으면, flex 항목의 내용물 크기가 flex-basis 값으로 사용됩니다. 따라서 flex 컨테이너에서 display: flex 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지하게 됩니다.

+ +

flex-grow 속성

+ +

flex-grow값을 양수로 지정하면 flex 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어날 수 있게 됩니다. 위의 사진 예시에서 모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.

+ +

첫 항목의 flex-grow 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 flex-grow 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 flex-grow 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.

+ +

flex-shrink 속성

+ +

flex-grow 속성이 주축에서 남는 공간을 항목들에게 분배하는 방법을 결정한다면 flex-shrink 속성은 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다. 만약 flex 컨테이너가 flex 항목을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 flex-shrink 값이 양수이면 flex 항목은 flex-basis에 지정된 크기보다 작아집니다. 또한, flex-grow 속성과 마찬가지로 더 큰 flex-shrink 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.

+ +

항목의 최소 크기는 실제 축소량을 계산할 때 고려되기 때문에 flex-shrink 속성이 flex-grow 속성에 비해 덜 일관된 모습을 보여줄지도 모릅니다. flex-shrink 속성이 항목의 사이즈를 결정하는 알고리즘에 관해서는 Controlling Ratios of Flex Items on the Main Axis에서 자세히 살펴히보겠습니다.

+ +
+

flex-grow 와 flex-shrink의 값이 비율임을 유의하세요.  flex 항목의 flex 속성을 모두 1 1 200px 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 flex 항목의 flex 속성을 2 1 200px로 지정하면 되지만, flex 속성 값을 모두  10 1 200px로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 20 1 200px로 지정해도 동일하게 동작합니다.

+
+ +

축약형 속성 flex

+ +

보통은 flex-grow, flex-shrink, flex-basis  값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 {{cssxref("flex")}} 축약형을 많이 사용합니다. flex 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정됩니다.

+ +

다음의 라이브 예시에서 flex 축약형의 값들을 조절하면서 시험해 볼 수 있습니다. 첫 값이 flex-grow를 지정하며,  이 첫 값을 양수로 하면 flex 항목이 넓어질 수 있습니다. 두 번째 값은 flex-shrink 를 지정하며 이 두 번째 값에 양수를 지정하면 flex 항목이 좁아질 수 있습니다. 세 번째 값은 flex-basis를 지정하며 이 값은 flex 항목이 넓어지거나 좁아질 때 고려하는 기준 값입니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+ +

flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들이 아래에 나열되어 있습니다. 이 값들 만으로도 대부분의 경우(use-case)에 대응할 수 있을 것 입니다.

+ +
    +
  • flex: initial
    • +
  • flex: auto
    • +
  • flex: none
    • +
  • flex: <positive-number>
    • +
+ +

flex 항목을 flex: initial로 지정하면  flex: 0 1 auto 로 지정한 것과 동일하게 동작합니다. 이 경우, flex 항목들은  flex-grow가 0이므로  flex-basis값보다 커지지 않고  flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어듭니다. 또, flex-basis가 auto이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.

+ +

flex: auto 로 지정하면 flex: 1 1 auto로 지정한 것과 동일하며, flex:initial 과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다.

+ +

flex: none으로 지정하면 flex: 0 0 auto으로 지정한 것과 동일하며 flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 flex-basis를 auto로 지정했을 때 정해지는 크기로 결정됩니다.  

+ +

이 축약형은 더 축약해서 flex: 1 이나 flex: 2처럼 쓸수도 있는데, 이는 flex-grow 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 flex: 2는 flex: 2 1 0와 동일하게 처리됩니다.

+ +

다음 라이브 예제에서 이 축약 값들을 시험해 볼 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+ +

정렬, 끝 맞추기(justification), flex 항목간 여유 공간 분배

+ +

flexbox의 주 기능 중 하나는 (주축과 교차축으로 표현되는) flex 컨테이너 공간 안에 flex 항목들을 정렬하고 끝 마추며 여유 공간을 항목 간에 분배하는 것입니다. 

+ +

역주) 이 절의 내용은 편의상 flex 컨테이너의 flex-direction를 row로 가정하고 '행'과 '열'로 표기했습니다.

+ +

align-items

+ +

{{cssxref("align-items")}}는 flex 컨테이너에 지정하는 속성이며, 교차축을 따라 flex 항목 열을 정렬하는 방식을 지정합니다. 

+ +

이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 stretch이며 이 값을 지정하면 flex 항목의 높이는 flex 컨테이너 내 flex 항목 행의 최대 높이로 지정됩니다. 따라서, flex 항목 행이 하나 일 때는 flex 항목은 교차축 방향으로 flex 컨테이너를 가득 채우게 됩니다.

+ +

이 속성을 flex-start로 지정하면 flex 항목의 첫 열이 교차축 방향의 시작선에 정렬됩니다. flex-end로 지정하면 flex 항목의 첫 열이 교차축 방향의 끝선에 정렬됩니다. center로 지정하면 flex 항목 행에 배분된 공간의 가운데 라인에 정렬됩니다.

+ +

다음 라이브 예제에서 이 값들을 시험해 볼 수 있습니다. - 이 시험을 위해 의도적으로 flex 컨테이너에 높이를 지정해 두었습니다.

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+ +

justify-content

+ +

{{cssxref("justify-content")}} 속성은 주축을 따라 flex 항목 행을 정렬하는 방식을 지정합니다.

+ +

이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 flex-start이며 이 값을 지정하면 flex 항목 행 내의 항목들은 flex 컨테이너의 시작선에서 부터 정렬됩니다. flex-end로 지정하면 flex 항목 행의 마지막 항목이 flex 컨테이너의 끝선에서 정렬됩니다. center로 지정하면 flex 항목들이 flex 항목 행의 가운데 정렬됩니다.

+ +

space-between을 지정하면 주죽 방향 여유 공간을 flex 항목 사이의 공간에 균등 배분합니다. 

+ +

space-around는 시작선 및 끝선과 flex 항목간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 flex 항목 간의 공간의 크기를 1로 배분한다면 flex 항목 사이의 공간은 2로 배분합니다. 

+ +

space-evenly로 지정하면 여유 공간을 flex 항목 사이의 공간 및 시작선 및 끝선과 flex 항목 간의 공간에 모두 균등하게 배분합니다.

+ +

다음 라이브 예제에서 justify-content에 지정할 수 있는 다음 값들을 시험해 볼 수 있습니다.

+ +
    +
  • stretch
    • +
  • flex-start
    • +
  • flex-end
    • +
  • center
    • +
  • space-around
    • +
  • space-between
    • +
  • space-evenly
    • +
+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+ +

이 절에서 설명한 내용으로 대부분의 경우에 대응할 수 있지만,  Aligning Items in a Flex Container 에서 이 속성들을 더 자세히 살펴볼 것입니다.

+ +

Next steps

+ +

Flexbox의 개요를 살펴보았습니다. 다음 글 how this specification relates to other parts of CSS에서 이 규격이 다른 CSS 규격과 어떻게 연관되어 있는지 말씀드리겠습니다.

diff --git "a/files/ko/web/css/css_flexible_box_layout/flexbox\354\235\230_\352\270\260\353\263\270_\352\260\234\353\205\220/index.html" "b/files/ko/web/css/css_flexible_box_layout/flexbox\354\235\230_\352\270\260\353\263\270_\352\260\234\353\205\220/index.html" deleted file mode 100644 index 1966114608..0000000000 --- "a/files/ko/web/css/css_flexible_box_layout/flexbox\354\235\230_\352\270\260\353\263\270_\352\260\234\353\205\220/index.html" +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: flexbox의 기본 개념 -slug: Web/CSS/CSS_Flexible_Box_Layout/Flexbox의_기본_개념 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox ---- -
{{CSSRef}}
- -

일명 flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었습니다. 이 글에서는 flexbox의 주요 기능에 대한 개요를 다룹니다. 더 자세한 내용은 가이드의 다른 글에서 탐구하게 될 것입니다.

- -

flexbox를 1차원이라 칭하는 것은, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 뜻입니다. 이는 행과 열을 함께 조절하는 CSS 그리드 레이아웃의 2차원 모델과는 대조됩니다.

- -

flexbox의 두 개의 축

- -

flexbox를 다루려면 주축과 교차축이라는 두 개의 축에 대한 정의를 알아야 합니다. 주축은 {{cssxref("flex-direction")}} 속성을 사용하여 지정하며 교차축은 이에 수직인 축으로 결정됩니다. flexbox의 동작은 결국 이 두 개의 축에 대한 문제로 환원되기 때문에 이들이 어떻게 동작하는지 처음부터 이해하는 것이 중요합니다.

- -

주축

- -

주축은 flex-direction에 의해 정의되며 4개의 값을 가질 수 있습니다:

- -
    -
  • row
    • -
  • row-reverse
    • -
  • column
    • -
  • column-reverse
    • -
- -

row 혹은 row-reverse를 선택하면 주축은 인라인 방향으로 행을 따릅니다.

- -

If flex-direction is set to row the main axis runs along the row in the inline direction.

- -

column 혹은 column-reverse 을 선택하면 주축은 페이지 상단에서 하단으로 블록 방향을 따릅니다.

- -

If flex-direction is set to column the main axis runs in the block direction.

- -

교차축

- -

교차축은 주축에 수직하므로, 만약 flex-direction(주축)이 row 나 row-reverse 라면 교차축은 열 방향을 따릅니다.

- -

If flex-direction is set to row then the cross axis runs in the block direction.

- -

주축이 column 혹은 column-reverse 라면 교차축은 행 방향을 따릅니다.

- -

If flex-direction is set to column then the cross axis runs in the inline direction.

- -

flex 요소를 정렬하고 끝을 맞추(justify)려면 어느 축이 어느 방향인지 이해하는 것이 중요합니다; flexbox는 주축, 교차축을 따라 항목을 정렬하고 끝을 맞추는 각종 속성들을 적용하는 방식으로 동작합니다.

- -

시작선과 끝선

- -

flexbox가 쓰기 방법(writing mode)을 가정하지 않는다는 것은 상당히 중요합니다. 과거의 CSS는 왼쪽에서 오른쪽으로 향하는 가로 방향의 쓰기 방법에 치우쳐 있었습니다. 하지만 현대의 레이아웃은 다양한 쓰기 방법을 포괄해야 하므로, 더이상 텍스트가 문서의 왼쪽 상단에서 시작해서 오른쪽으로 향한다고 가정하지 않습니다. 새 라인이 항상 아래에 쌓인다고 가정하지도 않습니다.

- -

다른 글에서 flexbox와 쓰기 방법 명세(writing mode spec.)가 어떤 관련이 있는지 알아볼 수 있습니다. 그 전에, 이 글에서 flex 요소의 정렬 방향에 "왼쪽, 오른쪽, 위, 아래"를  사용하지 않는 이유를 알 수 있었으면 합니다.

- -

flex-direction이 row고 영어 문장을 문서에 쓰고 있다면, 주축의 시작선은 왼쪽 끝, 끝선은 오른쪽 끝이 될 것입니다.

- -

Working in English the start edge is on the left.

- -

아랍어 문장을 쓰고 있다면, 주축의 시작선은 오른쪽 끝, 끝 선은 왼쪽 끝이 될 것입니다.

- -

The start edge in a RTL language is on the right.

- -

영어와 아랍어는 모두 가로 쓰기를 채택하고 있으므로 두 예시에서 교차축의 시작선은 flex 컨테이너의 위 끝이며 끝선은 아래 끝입니다.

- -

조금만 지나면 왼쪽-오른쪽으로 생각하는 것보다 시작선-끝선으로 생각하는 것이 금새 자연스러워질 것입니다. 동일한 패턴을 따르는 CSS 그리드 레이아웃 같은 방법을 다룰 때도 쉽게 적응할 수 있을 것입니다.

- -

flex 컨테이너

- -

문서의 영역 중에서 flexbox가 놓여있는 영역을 flex 컨테이너라고 부릅니다. flex 컨테이너를 생성하려면 영역 내의 컨테이너 요소의 {{cssxref("display")}} 값을 flex 혹은 inline-flex로 지정합니다. 이 값이 지정된 컨테이너의 일차 자식(direct children) 요소가 flex 항목이 됩니다. display 속성만 지정하여 flex 컨테이너를 생성하면 다른 flex 관련 속성들은 아래처럼 기본 값이 지정됩니다.

- -
    -
  • 항목은 행으로 나열됩니다. (flex-direction 속성의 기본값은 row입니다).
    • -
  • 항목은 주축의 시작 선에서 시작합니다.
    • -
  • 항목은 주 차원 위에서 늘어나지는 않지만 줄어들 수 있습니다.
    • -
  • 항목은 교차축의 크기를 채우기 위해 늘어납니다.
    • -
  • {{cssxref("flex-basis")}} 속성은 auto로 지정됩니다.
    • -
  • {{cssxref("flex-wrap")}} 속성은 nowrap으로 지정됩니다.
    • -
- -

이렇게되면 flex 항목들은 각 항목 별 내부 요소의 크기로 주축을 따라 정렬됩니다. 컨테이너의 크기보다 더 많은 항목이 있을 경우 행을 바꾸지 않고 주축 방향으로 흘러 넘치게 됩니다. 어떤 항목이 다른 항목보다 높이 값이 크다면 나머지 모든 항목들은 그에 맞게 교차축을 따라 늘어나게 됩니다.

- -

다음의 라이브 예시를 통해 어떻게 보여지는지 확인할 수 있습니다. flexbox의 초기 동작을 시험해보려면 항목을 추가하거나 수정해보시기 바랍니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

- -

flex-direction 지정

- -

flex 컨테이너에 {{cssxref("flex-direction")}} 속성을 지정하면 flex 항목이 나열되는 방향을 변경할 수 있습니다. flex-direction: row-reverse 라고 지정하면 행으로 나열되는 것은 그대로지만 시작 선과 끝 선이 서로 바뀌게 됩니다.

- -

flex-direction을 column으로 지정하면 주축이 변경되고 항목들은 열로 나열됩니다. column-reverse로 지정하면 그에 더해 시작 선과 끝 선이 서로 바뀌게 됩니다.

- -

다음의 라이브 예시는 flex-direction이 row-reverse로 지정되어 있습니다. row, column, column-reverse와 같은 값을 지정해서 어떻게 되는지 확인해보시기 바랍니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

- -

flex-wrap을 이용한 복수 행 flex 컨테이너 지정

- -

flexbox는 1차원 모델이지만 flex 항목이 여러 행에 나열되도록 할 수 있습니다. 그 경우 각 행이 새로운 flex 컨테이너라고 생각해야 합니다. 공간 배분은 해당 행에서만 이루어지며 다른 행은 영향을 받지 않습니다.

- -

항목이 여러 행에 나열되도록 하려면 {{cssxref("flex-wrap")}} 속성의 값을 wrap으로 지정합니다. 그러면 항목이 하나의 행에 들어가지 않을 정도로 클 경우 다른 행에 배치됩니다. 아래의 라이브 예시에 있는 flex 항목은 폭이 지정되어 있으며 항목들의 폭의 합은 flex 컨테이너에 들어가기에는 너무 넓습니다. flex-wrap속성이 wrap으로 지정되어 있으므로 항목은 여러 행에 나열됩니다. 초깃값과 동일한 nowrap을 지정하고 flex항목에 대한 확대/축소 방식을 별도로 지정하지 않으면 flex 항목들은 컨테이너의 폭에 맞게 줄어듭니다.  nowrap을 지정하면 항목이 전혀 줄어들 수 없거나 충분히 줄어들 수 없을 때 흘러넘치게 됩니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

- -

Mastering Wrapping of Flex Items 가이드에서 더 자세한 내용을 확인할 수 있습니다.

- -

축약형 속성 flex-flow

- -

flex-direction 속성과 flex-wrap 속성을 {{cssxref("flex-flow")}}라는 축약 속성으로 합칠 수 있습니다. 첫 번째 값은 flex-direction이고 두 번째 값은 flex-wrap입니다.

- -

다음의 라이브 예시에서 첫 번째 값을 flex-direction에 지정 가능한 값들(row, row-reverse, column or column-reverse)로 바꿔보시기 바랍니다. 두 번째 값도 wrap이나 nowrap으로 바꿔보시기 바랍니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

- -

flex 항목에 지정 가능한 속성들

- -

flex 항목에 적용할 수 있는 속성은 다음과 같습니다.

- -
    -
  • {{cssxref("flex-grow")}}
    • -
  • {{cssxref("flex-shrink")}}
    • -
  • {{cssxref("flex-basis")}}
    • -
- -

이 글에서는 위의 속성들에 대해 간략하게 살펴보겠습니다. 자세한 내용은 Controlling Ratios of Flex Items on the Main Axis에서 다룹니다.

- -

500 픽셀의 크기를 갖는 flex 컨테이너 내에 100 픽셀 크기의 자식 세 개가 존재할 때, 사용가능한 공간 200 픽셀이 남게 됩니다. 기본적으로 flexbox는 이 공간을 마지막 자식 요소 다음에 빈공간으로 남겨둡니다.

- -

This flex container has available space after laying out the items.

- -

위의 세 가지 속성을 변경한다는 것은 flex 항목에게 사용가능한 공간을 분배하는 방식을 변경하는 것입니다. 사용가능한 공간 개념은 flex 항목을 정렬할 때 특히 중요합니다.

- -

flex-basis 속성

- -

flex-basis 속성은 항목의 크기를 결정합니다. 이 속성의 기본값은 auto이며, 이 경우 브라우저는 항목이 크기를 갖는지 확인합니다. 위의 사진 예시의 경우 항목의 크기가 100 픽셀이므로 flex-basis의 값으로 100 픽셀이 사용됩니다.

- -

flex 항목에 크기가 지정되어 있지 않으면, flex 항목의 내용물 크기가 flex-basis 값으로 사용됩니다. 따라서 flex 컨테이너에서 display: flex 속성만을 지정하면 flex항목들이 각 내용물 크기만큼 공간을 차지하게 됩니다.

- -

flex-grow 속성

- -

flex-grow값을 양수로 지정하면 flex 항목별로 주축 방향 크기가 flex-basis 값 이상으로 늘어날 수 있게 됩니다. 위의 사진 예시에서 모든 항목의 flex-grow 값을 1로 지정하면 사용가능한 공간은 각 항목에게 동일하게 분배되며, 각 항목은 주축을 따라 분배받은 값만큼 사이즈를 늘려 공간을 차지합니다.

- -

첫 항목의 flex-grow 값을 2로 지정하고 나머지 두 개의 항목을 1로 지정한다면 각 항목에 지정된 flex-grow 값의 비율에 따라 남은 공간이 분배됩니다. 각 항목의 flex-grow 비율이 2:1:1 이므로 첫 항목에게 100 픽셀, 두 번째와 세 번째 항목에게 50 픽셀씩 분배됩니다.

- -

flex-shrink 속성

- -

flex-grow 속성이 주축에서 남는 공간을 항목들에게 분배하는 방법을 결정한다면 flex-shrink 속성은 주축의 공간이 부족할때 각 항목의 사이즈를 줄이는 방법을 정의합니다. 만약 flex 컨테이너가 flex 항목을 모두 포함할 만큼 넉넉한 공간을 갖고 있지 않고 flex-shrink 값이 양수이면 flex 항목은 flex-basis에 지정된 크기보다 작아집니다. 또한, flex-grow 속성과 마찬가지로 더 큰 flex-shrink 값을 갖는 항목의 사이즈가 더 빨리 줄어듭니다.

- -

항목의 최소 크기는 실제 축소량을 계산할 때 고려되기 때문에 flex-shrink 속성이 flex-grow 속성에 비해 덜 일관된 모습을 보여줄지도 모릅니다. flex-shrink 속성이 항목의 사이즈를 결정하는 알고리즘에 관해서는 Controlling Ratios of Flex Items on the Main Axis에서 자세히 살펴히보겠습니다.

- -
-

flex-grow 와 flex-shrink의 값이 비율임을 유의하세요.  flex 항목의 flex 속성을 모두 1 1 200px 로 지정하고 한 항목만 크기가 늘어나는 비율을 타 항목의 두배로 하고 싶으면 해당 flex 항목의 flex 속성을 2 1 200px로 지정하면 되지만, flex 속성 값을 모두  10 1 200px로 지정하고 늘어나는 비율을 두 배로 하고 싶은 항목의 flex 속성 값만 20 1 200px로 지정해도 동일하게 동작합니다.

-
- -

축약형 속성 flex

- -

보통은 flex-grow, flex-shrink, flex-basis  값을 각각 사용하지 않고 이 세 속성을 한번에 지정하는 {{cssxref("flex")}} 축약형을 많이 사용합니다. flex 축약형의 값은 flex-grow, flex-shrink, flex-basis 순서로 지정됩니다.

- -

다음의 라이브 예시에서 flex 축약형의 값들을 조절하면서 시험해 볼 수 있습니다. 첫 값이 flex-grow를 지정하며,  이 첫 값을 양수로 하면 flex 항목이 넓어질 수 있습니다. 두 번째 값은 flex-shrink 를 지정하며 이 두 번째 값에 양수를 지정하면 flex 항목이 좁아질 수 있습니다. 세 번째 값은 flex-basis를 지정하며 이 값은 flex 항목이 넓어지거나 좁아질 때 고려하는 기준 값입니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

- -

flex 축약형 표현에 사용할 수 있는 미리 정의된 축약 값들이 아래에 나열되어 있습니다. 이 값들 만으로도 대부분의 경우(use-case)에 대응할 수 있을 것 입니다.

- -
    -
  • flex: initial
    • -
  • flex: auto
    • -
  • flex: none
    • -
  • flex: <positive-number>
    • -
- -

flex 항목을 flex: initial로 지정하면  flex: 0 1 auto 로 지정한 것과 동일하게 동작합니다. 이 경우, flex 항목들은  flex-grow가 0이므로  flex-basis값보다 커지지 않고  flex-shrink가 1이므로 flex 컨테이너 공간이 모자라면 크기가 줄어듭니다. 또, flex-basis가 auto이므로 flex 항목은 주축 방향으로 지정된 크기 또는 자기 내부 요소 크기 만큼 공간을 차지합니다.

- -

flex: auto 로 지정하면 flex: 1 1 auto로 지정한 것과 동일하며, flex:initial 과는 주축 방향 여유 공간이 있을 때 flex 항목들이 늘어나서 주축 방향 여유 공간을 채우는 점만 다릅니다.

- -

flex: none으로 지정하면 flex: 0 0 auto으로 지정한 것과 동일하며 flex 컨테이너의 크기 변화에도 flex 항목 크기는 변하지 않고 flex-basis를 auto로 지정했을 때 정해지는 크기로 결정됩니다.  

- -

이 축약형은 더 축약해서 flex: 1 이나 flex: 2처럼 쓸수도 있는데, 이는 flex-grow 만 지정하고 나머지는 1 0으로 사용한다는 뜻이다. 따라서 flex: 2는 flex: 2 1 0와 동일하게 처리됩니다.

- -

다음 라이브 예제에서 이 축약 값들을 시험해 볼 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

- -

정렬, 끝 맞추기(justification), flex 항목간 여유 공간 분배

- -

flexbox의 주 기능 중 하나는 (주축과 교차축으로 표현되는) flex 컨테이너 공간 안에 flex 항목들을 정렬하고 끝 마추며 여유 공간을 항목 간에 분배하는 것입니다. 

- -

역주) 이 절의 내용은 편의상 flex 컨테이너의 flex-direction를 row로 가정하고 '행'과 '열'로 표기했습니다.

- -

align-items

- -

{{cssxref("align-items")}}는 flex 컨테이너에 지정하는 속성이며, 교차축을 따라 flex 항목 열을 정렬하는 방식을 지정합니다. 

- -

이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 stretch이며 이 값을 지정하면 flex 항목의 높이는 flex 컨테이너 내 flex 항목 행의 최대 높이로 지정됩니다. 따라서, flex 항목 행이 하나 일 때는 flex 항목은 교차축 방향으로 flex 컨테이너를 가득 채우게 됩니다.

- -

이 속성을 flex-start로 지정하면 flex 항목의 첫 열이 교차축 방향의 시작선에 정렬됩니다. flex-end로 지정하면 flex 항목의 첫 열이 교차축 방향의 끝선에 정렬됩니다. center로 지정하면 flex 항목 행에 배분된 공간의 가운데 라인에 정렬됩니다.

- -

다음 라이브 예제에서 이 값들을 시험해 볼 수 있습니다. - 이 시험을 위해 의도적으로 flex 컨테이너에 높이를 지정해 두었습니다.

- -
    -
  • stretch
    • -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

- -

justify-content

- -

{{cssxref("justify-content")}} 속성은 주축을 따라 flex 항목 행을 정렬하는 방식을 지정합니다.

- -

이 속성의 (아무것도 지정하지 않았을 때 적용되는)초기 값은 flex-start이며 이 값을 지정하면 flex 항목 행 내의 항목들은 flex 컨테이너의 시작선에서 부터 정렬됩니다. flex-end로 지정하면 flex 항목 행의 마지막 항목이 flex 컨테이너의 끝선에서 정렬됩니다. center로 지정하면 flex 항목들이 flex 항목 행의 가운데 정렬됩니다.

- -

space-between을 지정하면 주죽 방향 여유 공간을 flex 항목 사이의 공간에 균등 배분합니다. 

- -

space-around는 시작선 및 끝선과 flex 항목간 공간도 균등 배분에 고려하므로 시작선 및 끝선과 flex 항목 간의 공간의 크기를 1로 배분한다면 flex 항목 사이의 공간은 2로 배분합니다. 

- -

space-evenly로 지정하면 여유 공간을 flex 항목 사이의 공간 및 시작선 및 끝선과 flex 항목 간의 공간에 모두 균등하게 배분합니다.

- -

다음 라이브 예제에서 justify-content에 지정할 수 있는 다음 값들을 시험해 볼 수 있습니다.

- -
    -
  • stretch
    • -
  • flex-start
    • -
  • flex-end
    • -
  • center
    • -
  • space-around
    • -
  • space-between
    • -
  • space-evenly
    • -
- -

{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

- -

이 절에서 설명한 내용으로 대부분의 경우에 대응할 수 있지만,  Aligning Items in a Flex Container 에서 이 속성들을 더 자세히 살펴볼 것입니다.

- -

Next steps

- -

Flexbox의 개요를 살펴보았습니다. 다음 글 how this specification relates to other parts of CSS에서 이 규격이 다른 CSS 규격과 어떻게 연관되어 있는지 말씀드리겠습니다.

diff --git a/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..a9f75246aa --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/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 +--- +

{{CSSRef}}

+ +

이번 안내서에서는 흔히 볼 수 있는 가변상자 사용 사례 중 일부를 살펴 보겠습니다. 가변상자의 사용이 다른 조판 메서드보다 더 적합한 사례입니다.

+ +

왜 가변상자를 선택?

+ +

완벽한 브라우저 지원 환경에서 가변상자를 사용하기로 선택한 이유는 항목 모음을 한 방향 또는 다른 방향으로 배치하길 원하기 때문입니다. 우리가 항목을 배치할 때 해당 일차원의 항목 크기를 제어하거나 항목 간 간격을 제어하려고 합니다. 이것이 가변상자를 설계한 목적에 맞는 용도입니다. 가변상자와 여타 씨에스에스 조판 메서드의 관계에서 가변상자와 씨에스에스 격자 조판의 차이점에 대해 자세히 읽을 수 있습니다. 그곳에선 가변상자가 씨에스에스 조판의 전체 그림에서 어떤 역할을 하고 있는지에 대해 논의합니다.

+ +

실제로 격자 조판에 의해 더 잘 수행 될 수있는 작업이나 격자에 대한 대체품 및 정렬 기능을 얻기 위해 가변상자를 종종 사용합니다. 당 사용례는 블록 조판에서 상자 정렬 (Box Alignment) 이 구현되고 나면 변경될 수 있습니다. 이 안내서에서는 오늘날 가변상자가 쓰일 수 있는 몇 가지 대표적인 사용례를 살펴봅니다.

+ +

탐색 메뉴

+ +

탐색 메뉴의 일반적인 패턴은 항목 목록을 가로 막대로 표시하는 것입니다. 이 패턴은 기본적으로 가변상자 이전에는 달성하기 어려웠습니다. 이는(탐색 가로 막대) 가장 간단한 가변상자 예제를 형성하며 이상적인 가변상자 사용 사례로 간주될 수 있습니다.

+ +

가로로 표시하려는 항목 집합이 있으면 잉여 공간이 생길 수밖에 없습니다. 우리는 그 공간으로 무엇을 해야할지 결정해야 하며 몇 가지 선택 옵션이 있습니다. 일번 선택은 우리가 항목 무리 이외의 공간을 표시합니다. 따라서 그 사이 또는 그 주변에 공백이 생깁니다. 또는 항목 내부 여분의 공간을 흡수하려면 항목 집합이 이 공간을 확장하고 점유할 수 있는 메소드가 필요합니다.

+ +

항목 외부에 공간 분배

+ +

항목 사이 또는 주위에 공간을 분배시키기 위해 가변상자의 정렬 속성과 {{cssxref("justify-content")}} 속성을 사용합니다. 이 속성에 대한 자세한 내용은 기본 축을 기준으로 항목 정렬을 처리하는 가변 컨테이너의 항목 정렬에서 확인할 수 있습니다.

+ +

아래 실제 예에서 우리는 항목을 원래 크기로 표시하고 justify-content: space-between를 사용하여 항목 사이의 간격을 동일하게 만듭니다. space-around 값을 사용하거나, 지원이 될 경우 space-evenly를 사용해 공간이 분배되는 방식을 변경할 수 있습니다. flex-start를 사용하여 항목 끝에 공간을 배치하거나 flex-end를 사용하여 항목 앞에 배치하거나 center를 사용해 탐색 항목 중앙에 배치할 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

+ +

항목 내부에 공간 분배

+ +

탐색 메뉴를 위한 다른 패턴은 항목 사이에 공간을 만드는 것이 아니라 항목 자체 내에 사용 가능한 공간을 분배하는 것입니다. 이 경우, 주축을 따라 가변 항목의 비율 제어에서 설명된대로 가변 속성을 사용하여 항목이 서로 비례하여 확대 및 축소되도록 합니다.

+ +

모든 탐색 메뉴 항목의 너비를 동일하게 하려면 flex: auto를 사용하면 됩니다. 그것은 flex: 1 1 auto의 약칭으로 모든 항목이 자동이란 가변 기반에 따라 확대되거나 축소됩니다. 여기서 자동이란 항목이 길수록 더 많은 공간이 생긴다는 말입니다.

+ +

아래의 실제 예제에서 flex: auto를 flex: 1로 변경해보십시요. 이것은 flex: 1 1 0의 약칭입니다. 모든 항목이 0의 가변 기반에서 작동하여 모든 공간을 고르게 배분할 수 있기 때문에 모든 항목이 동일한 너비가 됩니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

+ +

탐색 메뉴 분할

+ +

주축에서 항목을 정렬하는 또 다른 방법은 자동 여백을 사용하는 것입니다. 이를 통해 한 그룹의 항목이 왼쪽으로 정렬되고 다른 그룹이 오른쪽으로 정렬되는 탐색 모음(메뉴)의 디자인 패턴이 가능합니다.

+ +

여기에서는 주축 정렬에 대한 자동 여백 사용에서 설명된 자동 여백 기술을 사용합니다. 항목 무리는 flex-start를 사용해 주축에 정렬됩니다. 그것이 가변상자의 초기값 동작이며, 우리가 항목을 오른쪽으로 정렬하려면 왼쪽 여백을 자동으로 지정합니다. 클래스 지정을 한 항목에서 다른 항목으로 이동하여 분할이 발생하는 위치를 변경할 수 있습니다.

+ +

또한 이 예제에서는 가변 항목에 여백을 사용하여 항목 사이에 간격을 만들고 컨테이너에 음의 여백을 사용하여 항목이 여전히 오른쪽 및 왼쪽 가장자리와 맞붙도록 합니다. 박스 정렬 (Box Alignment) 규격의 gap 속성이 가변상자에 구현될 때까지 항목 간에 배수구를 만들려면 이 방식으로 여백을 사용해야 합니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

+ +

항목 중심에 놓기

+ +

가변상자 이전에 개발자들은 웹 디자인에서 가장 어려운 문제는 수직 중심이라고 농담할겁니다. 다음 실제 예제에서 볼 수 있듯이 가변상자의 정렬 속성을 사용하여 간단하게 만들었습니다.

+ +

항목에 flex-start를 지정해 시작 부분으로 정렬하거나 flex-end를 지정해 끝 부분에 항목을 정렬하는 식으로 정렬을 맘대로 조정할 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

+ +

박스 정렬 (Box Alignment) 속성은 궁극적으로 블록 조판의 내용으로 구현될 예정이므로 미래에는 단일 아이템을 중앙에 배치하기 위해 컨테이너를 가변 컨테이너로 만들 필요는 없습니다. 그러나 당장은 하나의 것을 다른 것의 중심에 올바로 배치해야하는 경우 가변상자를 사용하는 게 맞습니다. 위의 예에서와 같이 컨테이너를 가변 컨테이너로 만든 다음 상위 요소에 대해 align-items을 사용하거나 가변 항목 자체를 align-self로 공략합니다.

+ +

바닥글을 아래로 밀어내는 카드 조판

+ +

가변상자 또는 씨에스에스 격자를 사용하여 카드 구성 요소의 목록을 조판하더라도, 이들 조판 메서드는 가변 또는 격자 구성 요소의 직계 자식에서만 작동합니다. 즉, 콘텐츠의 크기가 가변적이면 카드가 격자 영역의 높이나 가변 컨테이너의 높이까지 늘어납니다. 모든 내부 콘텐츠는 친숙한 블록 조판을 사용합니다. 즉, 콘텐츠가 적은 카드에서는 바닥글이 카드의 아래쪽에 고정되지 않고 콘텐츠의 밑단까지 차오릅니다.

+ +

구성 요소의 내부가 (상위) 랩퍼와 함께 늘어나지 않음을 표시하는 두 개의 카드 구성 요소.

+ +

가변상자가 이를 해결할 수 있습니다. 우리는 {{cssxref("flex-direction")}}: column 속성를 가진 카드를 가변 컨테이너로 만듭니다. 그런 다음 컨텐츠 영역을 flex: 1로 설정합니다. 이는 flex: 1 1 0의 축약형입니다. — 항목이 0의 가변 기준에서 커지거나 줄어들 수 있습니다. 이것이(컨텐츠 영역이) 커질 수 있는 유일한 항목이므로 가변 컨테이너에 있는 잉여 공간을 차지하고 바닥글을 바닥으로 밉니다. 라이브 예제에서 flex 속성을 제거하면 바닥글이 컨텐츠 바로 아래로 이동하는 방식을 볼 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

+ +

미디어 객체

+ +

미디어 객체는 웹 디자인에서 일반적인 패턴입니다. 이 패턴에는 한쪽에 이미지 나 다른 요소가 있고 오른쪽에 텍스트가 있습니다. 이상적으로 미디어 개체를 반대쪽으로 돌릴 수 있어야 합니다. 말하자면 이미지를 왼쪽에서 오른쪽으로 이동시키는 겁니다.

+ +

이 패턴은 어디에서나 볼 수 있으며, 주석 상자용으로 쓰이기도 하고, 이미지와 설명을 표시해야하는 모든 곳에서 볼 수 있습니다. 가변상자를 사용하면 이미지를 포함하는 미디어 객체의 일부가 이미지에서 크기 정보를 가져온 다음 미디어 객체의 본문이 가변적으로 남은 공간을 차지할 수 있습니다.

+ +

여러분은 아래 실제 예제에서 미디어 객체를 볼 수 있습니다. 정렬 속성을 사용하여 십자축의 항목을 flex-start로 정렬한 다음 .content 가변 항목을 flex: 1로 설정했습니다. 위의 열 조판 카드 패턴에서와 같이 flex: 1를 사용하면 카드가 커질 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

+ +

이 라이브 예제에서 시도할 수 있는 것은 디자인에서 미디어 개체를 제약하려는 여러 가지 방법과 관련이 있습니다.

+ +

이미지가 너무 커지는 것을 방지하려면 이미지에 {{cssxref("max-width")}}를 추가하십시오. 미디어 객체의 그쪽 측면이 가변상자의 초기값(예: 100px)을 사용함에 따라 줄어들지만 커질 수는 없으며 flex-basis는 자동을 사용합니다. 이미지에 적용된 모든 {{cssxref("width")}} 또는 최대 너비는 flex-basis (가변 기준) 이 됩니다.

+ +
.image img {
+  max-width: 100px;
+}
+
+ +

또한 양쪽이 비례하여 커지거나 줄어들 수 있습니다. 양면을 flex: 1로 설정하면 0의 {{cssxref("flex-basis")}}에서 커지거나 줄어들기 때문에 두 개의 동일한 크기의 열이 생깁니다. 컨텐츠를 기준으로 사용하여 (컨텐츠와 이미지) 둘 다에 flex: auto로 설정하면 컨텐츠의 크기에 따라, 또는 이미지의 너비와 같은 가변 항목에 직접 적용되는 크기에 따라 커지거나 줄어들 수 있습니다.

+ +
.media .content {
+  flex: 1;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

예를 들어 이미지가 있는 쪽을 flex: 1로 설정하고 콘텐츠 쪽을 flex: 3으로 설정하는 등 각면에 서로 다른 {{cssxref("flex-grow")}}를 부여할 수 있습니다. 즉, flex-basis를 0으로 사용하지만 해당 공간을 flex-grow 인수에 맞춰 서로 다르게 공간을 할당합니다. 그런 용도로 사용하는 가변 속성은 주축을 따라 가변 항목의 비율 제어 안내서에서 자세히 설명되어 있습니다.

+ +
.media .content {
+  flex: 3;
+  padding: 10px;
+}
+
+.image {
+  flex: 1;
+}
+ +

미디어 객체 방향 돌리기

+ +

이미지가 오른쪽에 있고 콘텐츠가 왼쪽에 있도록 미디어 객체의 표시를 전환하려면 flex-direction 속성을 이용해 row-reverse로 설정할 수 있습니다. 미디어 개체가 이제 다른 방향으로 표시됩니다. 저는 그걸 달성하기 위해 라이브 예제에서 기존 .media 클래스와 함께 flipped 클래스를 추가했습니다. 즉, 에이치티엠엘에서 해당 클래스를 제거하여 디스플레이가 어떻게 변경되는지 확인할 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

+ +

양식 컨트롤

+ +

가변상자는 양식 컨트롤에 스타일을 적용할 때 특히 유용합니다. 양식에는 일반적으로 서로 정렬하고 싶은 다수의 마크업과 다수의 작은 요소를 포함할 수 있습니다. 일반적인 패턴은 {{htmlelement("input")}} 요소가 {{htmlelement("button")}}과 짝을 이루는 검색 양식의 경우나 방문자가 단순히 전자 메일 주소를 입력하도록 하려는 경우입니다.

+ +

가변상자를 사용하면 이러한 유형의 조판을 쉽게 달성할 수 있습니다. 테두리를 지정하고 표시하도록 설정한 래퍼 클래스에 <button> 및 <input> 필드가 포함되어 있습니다. 거기에 테두리를 부여하고 display: flex를 설정했습니다. 그런 다음 가변 속성을 사용하여 <input> 필드가 커지도록 했고, 버튼은 그렇지 않습니다. 이것은 사용 가능한 공간이 변함에 따라 텍스트 필드가 커지거나 작아지는 한 쌍의 필드가 있음을 의미합니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

+ +

버튼을 오른쪽에 올려 놓은 것처럼 레이블이나 아이콘을 왼쪽에 쉽게 추가 할 수 있습니다. 나는 레이블을 추가했으며 배경색에 대한 스타일링 이외에 조판을 변경할 필요가 없었습니다. 신축성있는 입력 필드는 이제 맘대로 이용할 공간이 조금 줄어들지만 두 항목의 지분이 고려된 후 남은 공간을 사용합니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

+ +

이와 같은 패턴을 사용하면 디자인에 추가할 요소를 쉽게 수용할 수 있는 양식 요소 라이브러리를 훨씬 쉽게 만들 수 있습니다. 커지지 않는 항목과 커지는 항목을 혼합하는 식으로 가변상자의 유연성을 활용하고 있습니다.

+ +

결론

+ +

위의 패턴을 살펴보면서 가변 상자를 사용하여 원하는 결과를 얻는 가장 좋은 방법을 여러분이 생각을 통해 파악되기 시작했길 희망해봅니다. 종종 하나 이상의 선택이 있습니다. 늘릴 수 없는 항목을 늘릴 수 있는 것과 혼합하거나, 콘텐츠를 사용하여 크기를 알리거나, 가변상자가 공간을 비례적으로 공유할 수 있도록 하십시오. 그것은 당신에게 달려 있습니다.

+ +

보유 컨텐츠를 제시하는 가장 좋은 방법을 생각한 다음 가변상자 또는 기타 조판 방법이 컨텐츠를 선보이는 데 어떻게 도움이 되는지 살펴보십시오.

diff --git "a/files/ko/web/css/css_flexible_box_layout/\352\260\200\353\263\200\354\203\201\354\236\220\354\235\230_\353\214\200\355\221\234\354\240\201\354\235\270_\354\202\254\354\232\251\353\241\200/index.html" "b/files/ko/web/css/css_flexible_box_layout/\352\260\200\353\263\200\354\203\201\354\236\220\354\235\230_\353\214\200\355\221\234\354\240\201\354\235\270_\354\202\254\354\232\251\353\241\200/index.html" deleted file mode 100644 index a9f75246aa..0000000000 --- "a/files/ko/web/css/css_flexible_box_layout/\352\260\200\353\263\200\354\203\201\354\236\220\354\235\230_\353\214\200\355\221\234\354\240\201\354\235\270_\354\202\254\354\232\251\353\241\200/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 가변상자의 대표적인 사용례 -slug: Web/CSS/CSS_Flexible_Box_Layout/가변상자의_대표적인_사용례 -tags: - - 가변상자 - - 씨에스에스 - - 안내서 - - 용례 - - 패턴 -translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox ---- -

{{CSSRef}}

- -

이번 안내서에서는 흔히 볼 수 있는 가변상자 사용 사례 중 일부를 살펴 보겠습니다. 가변상자의 사용이 다른 조판 메서드보다 더 적합한 사례입니다.

- -

왜 가변상자를 선택?

- -

완벽한 브라우저 지원 환경에서 가변상자를 사용하기로 선택한 이유는 항목 모음을 한 방향 또는 다른 방향으로 배치하길 원하기 때문입니다. 우리가 항목을 배치할 때 해당 일차원의 항목 크기를 제어하거나 항목 간 간격을 제어하려고 합니다. 이것이 가변상자를 설계한 목적에 맞는 용도입니다. 가변상자와 여타 씨에스에스 조판 메서드의 관계에서 가변상자와 씨에스에스 격자 조판의 차이점에 대해 자세히 읽을 수 있습니다. 그곳에선 가변상자가 씨에스에스 조판의 전체 그림에서 어떤 역할을 하고 있는지에 대해 논의합니다.

- -

실제로 격자 조판에 의해 더 잘 수행 될 수있는 작업이나 격자에 대한 대체품 및 정렬 기능을 얻기 위해 가변상자를 종종 사용합니다. 당 사용례는 블록 조판에서 상자 정렬 (Box Alignment) 이 구현되고 나면 변경될 수 있습니다. 이 안내서에서는 오늘날 가변상자가 쓰일 수 있는 몇 가지 대표적인 사용례를 살펴봅니다.

- -

탐색 메뉴

- -

탐색 메뉴의 일반적인 패턴은 항목 목록을 가로 막대로 표시하는 것입니다. 이 패턴은 기본적으로 가변상자 이전에는 달성하기 어려웠습니다. 이는(탐색 가로 막대) 가장 간단한 가변상자 예제를 형성하며 이상적인 가변상자 사용 사례로 간주될 수 있습니다.

- -

가로로 표시하려는 항목 집합이 있으면 잉여 공간이 생길 수밖에 없습니다. 우리는 그 공간으로 무엇을 해야할지 결정해야 하며 몇 가지 선택 옵션이 있습니다. 일번 선택은 우리가 항목 무리 이외의 공간을 표시합니다. 따라서 그 사이 또는 그 주변에 공백이 생깁니다. 또는 항목 내부 여분의 공간을 흡수하려면 항목 집합이 이 공간을 확장하고 점유할 수 있는 메소드가 필요합니다.

- -

항목 외부에 공간 분배

- -

항목 사이 또는 주위에 공간을 분배시키기 위해 가변상자의 정렬 속성과 {{cssxref("justify-content")}} 속성을 사용합니다. 이 속성에 대한 자세한 내용은 기본 축을 기준으로 항목 정렬을 처리하는 가변 컨테이너의 항목 정렬에서 확인할 수 있습니다.

- -

아래 실제 예에서 우리는 항목을 원래 크기로 표시하고 justify-content: space-between를 사용하여 항목 사이의 간격을 동일하게 만듭니다. space-around 값을 사용하거나, 지원이 될 경우 space-evenly를 사용해 공간이 분배되는 방식을 변경할 수 있습니다. flex-start를 사용하여 항목 끝에 공간을 배치하거나 flex-end를 사용하여 항목 앞에 배치하거나 center를 사용해 탐색 항목 중앙에 배치할 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation.html", '100%', 550)}}

- -

항목 내부에 공간 분배

- -

탐색 메뉴를 위한 다른 패턴은 항목 사이에 공간을 만드는 것이 아니라 항목 자체 내에 사용 가능한 공간을 분배하는 것입니다. 이 경우, 주축을 따라 가변 항목의 비율 제어에서 설명된대로 가변 속성을 사용하여 항목이 서로 비례하여 확대 및 축소되도록 합니다.

- -

모든 탐색 메뉴 항목의 너비를 동일하게 하려면 flex: auto를 사용하면 됩니다. 그것은 flex: 1 1 auto의 약칭으로 모든 항목이 자동이란 가변 기반에 따라 확대되거나 축소됩니다. 여기서 자동이란 항목이 길수록 더 많은 공간이 생긴다는 말입니다.

- -

아래의 실제 예제에서 flex: auto를 flex: 1로 변경해보십시요. 이것은 flex: 1 1 0의 약칭입니다. 모든 항목이 0의 가변 기반에서 작동하여 모든 공간을 고르게 배분할 수 있기 때문에 모든 항목이 동일한 너비가 됩니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/navigation-flex.html", '100%', 550)}}

- -

탐색 메뉴 분할

- -

주축에서 항목을 정렬하는 또 다른 방법은 자동 여백을 사용하는 것입니다. 이를 통해 한 그룹의 항목이 왼쪽으로 정렬되고 다른 그룹이 오른쪽으로 정렬되는 탐색 모음(메뉴)의 디자인 패턴이 가능합니다.

- -

여기에서는 주축 정렬에 대한 자동 여백 사용에서 설명된 자동 여백 기술을 사용합니다. 항목 무리는 flex-start를 사용해 주축에 정렬됩니다. 그것이 가변상자의 초기값 동작이며, 우리가 항목을 오른쪽으로 정렬하려면 왼쪽 여백을 자동으로 지정합니다. 클래스 지정을 한 항목에서 다른 항목으로 이동하여 분할이 발생하는 위치를 변경할 수 있습니다.

- -

또한 이 예제에서는 가변 항목에 여백을 사용하여 항목 사이에 간격을 만들고 컨테이너에 음의 여백을 사용하여 항목이 여전히 오른쪽 및 왼쪽 가장자리와 맞붙도록 합니다. 박스 정렬 (Box Alignment) 규격의 gap 속성이 가변상자에 구현될 때까지 항목 간에 배수구를 만들려면 이 방식으로 여백을 사용해야 합니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/split-navigation.html", '100%', 550)}}

- -

항목 중심에 놓기

- -

가변상자 이전에 개발자들은 웹 디자인에서 가장 어려운 문제는 수직 중심이라고 농담할겁니다. 다음 실제 예제에서 볼 수 있듯이 가변상자의 정렬 속성을 사용하여 간단하게 만들었습니다.

- -

항목에 flex-start를 지정해 시작 부분으로 정렬하거나 flex-end를 지정해 끝 부분에 항목을 정렬하는 식으로 정렬을 맘대로 조정할 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/center.html", '100%', 700)}}

- -

박스 정렬 (Box Alignment) 속성은 궁극적으로 블록 조판의 내용으로 구현될 예정이므로 미래에는 단일 아이템을 중앙에 배치하기 위해 컨테이너를 가변 컨테이너로 만들 필요는 없습니다. 그러나 당장은 하나의 것을 다른 것의 중심에 올바로 배치해야하는 경우 가변상자를 사용하는 게 맞습니다. 위의 예에서와 같이 컨테이너를 가변 컨테이너로 만든 다음 상위 요소에 대해 align-items을 사용하거나 가변 항목 자체를 align-self로 공략합니다.

- -

바닥글을 아래로 밀어내는 카드 조판

- -

가변상자 또는 씨에스에스 격자를 사용하여 카드 구성 요소의 목록을 조판하더라도, 이들 조판 메서드는 가변 또는 격자 구성 요소의 직계 자식에서만 작동합니다. 즉, 콘텐츠의 크기가 가변적이면 카드가 격자 영역의 높이나 가변 컨테이너의 높이까지 늘어납니다. 모든 내부 콘텐츠는 친숙한 블록 조판을 사용합니다. 즉, 콘텐츠가 적은 카드에서는 바닥글이 카드의 아래쪽에 고정되지 않고 콘텐츠의 밑단까지 차오릅니다.

- -

구성 요소의 내부가 (상위) 랩퍼와 함께 늘어나지 않음을 표시하는 두 개의 카드 구성 요소.

- -

가변상자가 이를 해결할 수 있습니다. 우리는 {{cssxref("flex-direction")}}: column 속성를 가진 카드를 가변 컨테이너로 만듭니다. 그런 다음 컨텐츠 영역을 flex: 1로 설정합니다. 이는 flex: 1 1 0의 축약형입니다. — 항목이 0의 가변 기준에서 커지거나 줄어들 수 있습니다. 이것이(컨텐츠 영역이) 커질 수 있는 유일한 항목이므로 가변 컨테이너에 있는 잉여 공간을 차지하고 바닥글을 바닥으로 밉니다. 라이브 예제에서 flex 속성을 제거하면 바닥글이 컨텐츠 바로 아래로 이동하는 방식을 볼 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/cards.html", '100%', 800)}}

- -

미디어 객체

- -

미디어 객체는 웹 디자인에서 일반적인 패턴입니다. 이 패턴에는 한쪽에 이미지 나 다른 요소가 있고 오른쪽에 텍스트가 있습니다. 이상적으로 미디어 개체를 반대쪽으로 돌릴 수 있어야 합니다. 말하자면 이미지를 왼쪽에서 오른쪽으로 이동시키는 겁니다.

- -

이 패턴은 어디에서나 볼 수 있으며, 주석 상자용으로 쓰이기도 하고, 이미지와 설명을 표시해야하는 모든 곳에서 볼 수 있습니다. 가변상자를 사용하면 이미지를 포함하는 미디어 객체의 일부가 이미지에서 크기 정보를 가져온 다음 미디어 객체의 본문이 가변적으로 남은 공간을 차지할 수 있습니다.

- -

여러분은 아래 실제 예제에서 미디어 객체를 볼 수 있습니다. 정렬 속성을 사용하여 십자축의 항목을 flex-start로 정렬한 다음 .content 가변 항목을 flex: 1로 설정했습니다. 위의 열 조판 카드 패턴에서와 같이 flex: 1를 사용하면 카드가 커질 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media.html", '100%', 600)}}

- -

이 라이브 예제에서 시도할 수 있는 것은 디자인에서 미디어 개체를 제약하려는 여러 가지 방법과 관련이 있습니다.

- -

이미지가 너무 커지는 것을 방지하려면 이미지에 {{cssxref("max-width")}}를 추가하십시오. 미디어 객체의 그쪽 측면이 가변상자의 초기값(예: 100px)을 사용함에 따라 줄어들지만 커질 수는 없으며 flex-basis는 자동을 사용합니다. 이미지에 적용된 모든 {{cssxref("width")}} 또는 최대 너비는 flex-basis (가변 기준) 이 됩니다.

- -
.image img {
-  max-width: 100px;
-}
-
- -

또한 양쪽이 비례하여 커지거나 줄어들 수 있습니다. 양면을 flex: 1로 설정하면 0의 {{cssxref("flex-basis")}}에서 커지거나 줄어들기 때문에 두 개의 동일한 크기의 열이 생깁니다. 컨텐츠를 기준으로 사용하여 (컨텐츠와 이미지) 둘 다에 flex: auto로 설정하면 컨텐츠의 크기에 따라, 또는 이미지의 너비와 같은 가변 항목에 직접 적용되는 크기에 따라 커지거나 줄어들 수 있습니다.

- -
.media .content {
-  flex: 1;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

예를 들어 이미지가 있는 쪽을 flex: 1로 설정하고 콘텐츠 쪽을 flex: 3으로 설정하는 등 각면에 서로 다른 {{cssxref("flex-grow")}}를 부여할 수 있습니다. 즉, flex-basis를 0으로 사용하지만 해당 공간을 flex-grow 인수에 맞춰 서로 다르게 공간을 할당합니다. 그런 용도로 사용하는 가변 속성은 주축을 따라 가변 항목의 비율 제어 안내서에서 자세히 설명되어 있습니다.

- -
.media .content {
-  flex: 3;
-  padding: 10px;
-}
-
-.image {
-  flex: 1;
-}
- -

미디어 객체 방향 돌리기

- -

이미지가 오른쪽에 있고 콘텐츠가 왼쪽에 있도록 미디어 객체의 표시를 전환하려면 flex-direction 속성을 이용해 row-reverse로 설정할 수 있습니다. 미디어 개체가 이제 다른 방향으로 표시됩니다. 저는 그걸 달성하기 위해 라이브 예제에서 기존 .media 클래스와 함께 flipped 클래스를 추가했습니다. 즉, 에이치티엠엘에서 해당 클래스를 제거하여 디스플레이가 어떻게 변경되는지 확인할 수 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/media-flipped.html", '100%', 650)}}

- -

양식 컨트롤

- -

가변상자는 양식 컨트롤에 스타일을 적용할 때 특히 유용합니다. 양식에는 일반적으로 서로 정렬하고 싶은 다수의 마크업과 다수의 작은 요소를 포함할 수 있습니다. 일반적인 패턴은 {{htmlelement("input")}} 요소가 {{htmlelement("button")}}과 짝을 이루는 검색 양식의 경우나 방문자가 단순히 전자 메일 주소를 입력하도록 하려는 경우입니다.

- -

가변상자를 사용하면 이러한 유형의 조판을 쉽게 달성할 수 있습니다. 테두리를 지정하고 표시하도록 설정한 래퍼 클래스에 <button> 및 <input> 필드가 포함되어 있습니다. 거기에 테두리를 부여하고 display: flex를 설정했습니다. 그런 다음 가변 속성을 사용하여 <input> 필드가 커지도록 했고, 버튼은 그렇지 않습니다. 이것은 사용 가능한 공간이 변함에 따라 텍스트 필드가 커지거나 작아지는 한 쌍의 필드가 있음을 의미합니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/input-button.html", '100%', 550)}}

- -

버튼을 오른쪽에 올려 놓은 것처럼 레이블이나 아이콘을 왼쪽에 쉽게 추가 할 수 있습니다. 나는 레이블을 추가했으며 배경색에 대한 스타일링 이외에 조판을 변경할 필요가 없었습니다. 신축성있는 입력 필드는 이제 맘대로 이용할 공간이 조금 줄어들지만 두 항목의 지분이 고려된 후 남은 공간을 사용합니다.

- -

{{EmbedGHLiveSample("css-examples/flexbox/use-cases/label-input-button.html", '100%', 550)}}

- -

이와 같은 패턴을 사용하면 디자인에 추가할 요소를 쉽게 수용할 수 있는 양식 요소 라이브러리를 훨씬 쉽게 만들 수 있습니다. 커지지 않는 항목과 커지는 항목을 혼합하는 식으로 가변상자의 유연성을 활용하고 있습니다.

- -

결론

- -

위의 패턴을 살펴보면서 가변 상자를 사용하여 원하는 결과를 얻는 가장 좋은 방법을 여러분이 생각을 통해 파악되기 시작했길 희망해봅니다. 종종 하나 이상의 선택이 있습니다. 늘릴 수 없는 항목을 늘릴 수 있는 것과 혼합하거나, 콘텐츠를 사용하여 크기를 알리거나, 가변상자가 공간을 비례적으로 공유할 수 있도록 하십시오. 그것은 당신에게 달려 있습니다.

- -

보유 컨텐츠를 제시하는 가장 좋은 방법을 생각한 다음 가변상자 또는 기타 조판 방법이 컨텐츠를 선보이는 데 어떻게 도움이 되는지 살펴보십시오.

diff --git a/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/index.html new file mode 100644 index 0000000000..cc7753cb70 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/block_and_inline_layout_in_normal_flow/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 +--- +
{{CSSRef}}
+ +

이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.

+ +

일반 대열은 씨에스에스 2.1규격에 정의되어 있으며, 이는 일반 대열에 소속된 상자가 서식 상황의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 블록 서식 상황에 참여하는 것으로, 인라인 수준 상자는 인라인 서식 상황에 참여하는 것으로 기술한다.

+ +

블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:

+ +
+

블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.
+ 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1

+
+ +

인라인 서식 상황에 해당하는 요소의 경우:

+ +
+

인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2

+
+ +

씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.

+ +

블록 서식 상황에 참여하는 요소

+ +

영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.

+ +

+ +

세로 쓰기 모드에서는 수평으로 배치된다.

+ +

+ +

이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.

+ +

씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

+ +

단락 요소의 여백을 0으로 설정하면, 테두리는 접촉한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

+ +

기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

+ +

여백 축소

+ +

씨에스에스 규격에 따라 블록 요소 사이의 여백이 축소된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.

+ +

아래의 예에 포함된 단락들은 20px의 상부 여백과 40px의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 40px이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

+ +

여백 축소에 관해선 여백 축소 정복 안내서에서 자세한 내용을 파악할 수 있다.

+ +
+

참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.

+ +

+
+ +

인라인 서식 상황에 참여하는 요소

+ +

인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.

+ +

다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

+ +

strong 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.

+ +

블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

+ +

블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 시각적 서식 모델 안내서를 찾아보십시요.

+ +

display속성 및 대열 조판

+ +

씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. display 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.

+ +

요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 display: flex를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 block의 외부 디스플레이 유형이다.

+ +

그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

+ +

따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 대열 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.

+ +

외부 및 내부 디스플레이 유형이란 개념은 Flexbox(display: flex)와 Grid Layout(display: grid)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 block인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.

+ +

하나의 요소가 참여하는 대상의 서식 상황 변경

+ +

브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 strong 요소에 display: block를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

+ +

요약정리

+ +

이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.

+ +

참조 항목

+ + diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/index.html new file mode 100644 index 0000000000..697bdfacde --- /dev/null +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_overflow/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 +--- +

컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

+ +

오버플로은 무엇인가?

+ +

어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

+ +

내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 visible로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.

+ +

오버플로 통제

+ +

오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 hidden 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

+ +

scroll 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

+ +

auto 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 overflow: scroll 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 overflow scroll의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 auto 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

+ +

이미 배운 바와 같이 기본값인 visible 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.

+ +

참고: 작업 초안 오버플로 수준 3을 보면 추가적인 속성 값으로 overflow: clip이 있다. 이것은 overflow: hidden와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.

+ +

오버플로 속성은 실제로는 overflow-x와 overflow-y 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 overflow-x를 수평 방향 값으로 두번째 경우에는 overflow-y를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 overflow-y: scroll만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

+ +

상대적 플로우 속성

+ +

우리는 쓰기 모드와 플로우 레이아웃 안내서에서 block-size와 inline-size라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들overflow-block와 overflow-inline도 포함되어 있다. 그것들은 overflow-x와 overflow-y에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.

+ +

이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.

+ +

오버플로 표시

+ +

수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.

+ +

인라인축 오버플로

+ +

text-overflow 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. clip의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, ellipsis의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

+ +

블록축 오버플로

+ +

이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, block-overflow란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.

+ +

이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.

+ +

요약정리

+ +

웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.

+ +
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/index.html new file mode 100644 index 0000000000..4d35855ee5 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/flow_layout_and_writing_modes/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 +--- +

어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. 조판 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.

+ +

이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 참조 항목과 외부 리소스 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.

+ +

쓰기 모드 규격

+ +

씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 규격은 다음과 같다.

+ +
+

씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."

+
+ +

쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 인라인 기준 방향을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.

+ +

블록 대열 방향은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 vertical-lr로 변경하고 싶다면, 대상 요소에 writing-mode: vertical-lr를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.

+ +

특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

+ +

writing-mode 속성 및 블록 대열

+ +

{{cssxref("writing-mode")}} 속성은 horizontal-tb과 vertical-rl, vertical-lr를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 horizontal-tb,로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 horizontal-tb이다.

+ +

다음 예는 horizontal-tb를 사용하는 블록을 보여준다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

+ +

속성값 vertical-rl는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

+ +

마지막 예는 vertical-lr로써 세번 째로 가능한 writing-mode 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

+ +

부모와 다른 쓰기 모드를 가진 상자

+ +

중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 display: inline-block이 적용된 듯이 표시된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

+ +

블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 flow일 경우 계산에 따른 디스플레이 유형인 flow-root를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 horizontal-tb 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

+ +

대체 요소

+ +

이미지와 같은 대체 요소는 writing-mode에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

+ +

논리적 속성 및 속성값

+ +

당신이 horizontal-tb 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 horizontal-tb일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 vertical-lr일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

+ +

따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 inline-size를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, inline-size일 경우 항상 인라인 방향의 크기를 의미하게 된다.

+ +

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

+ +

씨에스에스 논리적 속성 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.

+ +

요약정리

+ +

대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 ​​독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.

+ +

참조 항목

+ + + +

외부 리소스

+ + + +
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/index.html new file mode 100644 index 0000000000..2b05d99f39 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/in_flow_and_out_of_flow/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 +--- +
{{CSSRef}}
+ +

이전 안내서에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.

+ +

다음 예제에서는 머리글, 단락, 목록 및 strong 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, strong 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 display 유형이 block 대열에 참여하고 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

+ +

요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.

+ +

항목을 대열 밖으로 빼내기

+ +

대열에 속한 모든 요소는 다음과 구분된다:

+ +
    +
  • 부동 항목
    • +
  • position: absolute 속성이 부여된 항목 (아울러 position: fixed 속성이 딸린 항목도 마찬가지로 동작합니다.)
    • +
  • 뿌리 요소(html)
    • +
+ +

대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.

+ +

부동 항목

+ +

이 예제에서 나는 div를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 div 요소를 왼쪽으로 부동시켰다. 이제 div는 대열에서 벗어났다.

+ +

부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

+ +

여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.

+ +

절대 위치잡기

+ +

어떤 항목에 position: absolute나 position: fixed를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 position와 absolute임에 더해 간격띄우기 값이 top: 30px에 right: 30px 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

+ +

position: fixed를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.

+ +

위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.

+ +

상대 위치잡기와 대열

+ +

어떤 항목에 position: relative 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

+ +

일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 position: absolute가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.

+ +

요약정리

+ +

이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 서식 상황 해설 가운데에서 블록 서식 상황을 생성하는 등의 관련 이슈를 살펴볼 겁니다.

+ +

참조 항목

+ + diff --git "a/files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" "b/files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" deleted file mode 100644 index 2b05d99f39..0000000000 --- "a/files/ko/web/css/css_flow_layout/\353\214\200\354\227\264\352\263\274_\355\203\210\353\214\200\354\227\264/index.html" +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: 대열과 탈대열 -slug: Web/CSS/CSS_Flow_Layout/대열과_탈대열 -tags: - - 대열 - - 대열 조판 - - 씨에스에스 - - 씨에스에스 대열 조판 - - 안내서 - - 조판 - - 중급 -translation_of: Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow ---- -
{{CSSRef}}
- -

이전 안내서에서 제가 일반 대열 속 블록 및 인라인 조판에 대해 설명하였습니다. 대열에 속한 모든 요소는 이 메서드를 사용하여 배치됩니다.

- -

다음 예제에서는 머리글, 단락, 목록 및 strong 요소가 포함된 마지막 단락이 있습니다. 머리글과 단락은 블록 레벨이며, strong 요소는 인라인입니다. 목록은 가변상자를 사용하여 항목을 행 내부로 정렬하지만 블록 및 인라인 조판에도 참여하고 있습니다. 컨테이너는 외곽에 display 유형이 block 대열에 참여하고 있습니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/in-flow.html", '100%', 800)}}

- -

요소 무리 전체는 대열에 속해 있다고 말할 수 있습니다. 에이치티엠엘 소스에 나타나는 순서대로 요소 무리들이 웹페이지에 등장합니다.

- -

항목을 대열 밖으로 빼내기

- -

대열에 속한 모든 요소는 다음과 구분된다:

- -
    -
  • 부동 항목
    • -
  • position: absolute 속성이 부여된 항목 (아울러 position: fixed 속성이 딸린 항목도 마찬가지로 동작합니다.)
    • -
  • 뿌리 요소(html)
    • -
- -

대열에서 벗어난 항목은 새로운 블록 서식 상황(BFC)를 생성하므로, 그 안에 있는 모든 것은 페이지의 나머지 부분과는 구분되는 소형 조판으로 볼 수 있다. 따라서 뿌리 요소는 우리 문서의 모든 내용에 해당하는 컨테이너이기 때문에 대열을 벗어나 있으며 당 문서에 대한 블록 서식 상황을 수립합니다.

- -

부동 항목

- -

이 예제에서 나는 div를 가지고 있고, 그 다음 두 단락을 갖고 있다. 문단에 배경색을 추가한 다음 div 요소를 왼쪽으로 부동시켰다. 이제 div는 대열에서 벗어났다.

- -

부동체는 우선 일반 대열에 속했던 애초의 위치를 기준으로 배치되었고, 그 뒤 대열에서 벗어나 최대한 왼쪽으로 이동합니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/float.html", '100%', 800)}}

- -

여러분은 부동체 밑에 펼쳐지고 있는 다음 단락의 배경색을 볼 수 있습니다. 동 단락의 라인 상자 무리만 부동체 주변 콘텐츠를 둘러싸는 효과를 위해 축소되었습니다. 우리 단락 형태의 상자는 여전히 일반 대열이라는 규칙에 따라 표시되고 있습니다. 바로 그런 까닭에 부동 항목 주위에 공간을 만들려면 동 항목에 여백을 추가해서 그 여백으로부터 라인 상자 무리를 밀려나도록 해야하는 겁니다. 대열에 속한 다음 순번 콘텐츠에는 그 어떤 것을 적용한다고 해도 그런 효과를 달성할 수 없습니다.

- -

절대 위치잡기

- -

어떤 항목에 position: absolute나 position: fixed를 부여하면 동 항목이 대열에서 제거되며, 그것이 점유하고 있던 모든 공간이 제거됩니다. 다음 예제에서 나는 세 개의 단락 요소를 가지고 있으며, 두 번째 요소는 position와 absolute임에 더해 간격띄우기 값이 top: 30px에 right: 30px 해당됩니다. 그 (두 번째) 요소는 문서 대열에서 제거되었습니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/abspos.html", '100%', 700)}}

- -

position: fixed를 사용해 대열에서 항목을 제거하지만, 간격띄우기는 컨테이너 블록이 아닌 브라우저 뷰포트가 기준입니다.

- -

위치잡기를 통해 대열에서 항목을 빼내면 콘텐츠의 중복 가능성을 관리해야 합니다. 대열에서 벗어나면 페이지의 다른 요소는 더 이상 요소가 존재한다는 것을 알지 못하므로 이에 반응하지 않습니다.

- -

상대 위치잡기와 대열

- -

어떤 항목에 position: relative 위치잡기를 부여하면 그것은 대열에 잔류하지만, 당신은 간격띄우기 값을 사용하여 동 항목을 주변으로 밀어낼 수 있습니다. 그러나 아래 예제에서 볼 수 있듯이 그것이 일반 대열 위치에 그대로 남아 있게 됩니다.

- -

{{EmbedGHLiveSample("css-examples/flow/in-flow/relative.html", '100%', 800)}}

- -

일반 대열에 속해 있었던 어떤 항목을 제거하거나 이동할 때, 해당 항목 주변의 콘텐츠를 겹치지 않도록 관리해야 할 필요성이 있다는 것을 예상할 수밖에 없을 겁니다. 말하자면 부동체를 정리하거나 position: absolute가 적용된 요소가 여타 콘텐츠에 올라타지 않도록 담보해야 합니다. 이러한 이유로 요소 무리를 대열 속에서 제거하는 메서드는 그들 메서드가 가져올 영향을 파악한 상태에서 사용되어야 합니다.

- -

요약정리

- -

이번 안내서에서는 매우 구체적인 유형의 위치잡기를 달성하기 위해 요소를 일반 대열에서 빼내는 여러 방법을 다루었습니다. 다음 안내서에서는 서식 상황 해설 가운데에서 블록 서식 상황을 생성하는 등의 관련 이슈를 살펴볼 겁니다.

- -

참조 항목

- - diff --git "a/files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" "b/files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" deleted file mode 100644 index cc7753cb70..0000000000 --- "a/files/ko/web/css/css_flow_layout/\354\235\274\353\260\230_\355\235\220\353\246\204_\354\206\215_\353\270\224\353\241\235_\353\260\217_\354\235\270\353\235\274\354\235\270_\353\240\210\354\235\264\354\225\204\354\233\203/index.html" +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: 일반 대열 속 블록 및 인라인 조판 -slug: Web/CSS/CSS_Flow_Layout/일반_흐름_속_블록_및_인라인_레이아웃 -tags: - - 대열 - - 씨에스에스 - - 씨에스에스 대열 조판 - - 안내서 - - 여백 - - 조판 - - 중급 -translation_of: Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow ---- -
{{CSSRef}}
- -

이번 안내서에서는 블록 및 인라인 요소가 일반 대열의 일부일 때 어떻게 동작하는지에 대한 기본 사항을 살펴본다.

- -

일반 대열은 씨에스에스 2.1규격에 정의되어 있으며, 이는 일반 대열에 소속된 상자가 서식 상황의 일부가 된다는 것을 설명한다. 그 상자는 블록 또는 인라인이 될 수 있지만 동시에 양수겸장이 될 수는 없다. 블록 수준 상자는 블록 서식 상황에 참여하는 것으로, 인라인 수준 상자는 인라인 서식 상황에 참여하는 것으로 기술한다.

- -

블록 또는 인라인 서식 상황에 해당하는 요소의 동작은 이(CSS2.1) 규격에서 정의한다. 블록 형식 상황에 해당하는 요소의 경우 규격은 다음과 같다:

- -
-

블록 서식 상황에서 상자는 컨테이너 블록의 맨 위에서 시작하여 수직으로 하나씩 배치된다. 두 형제(동급) 상자 사이 수직 간격은 '여백' 속성에 의해 결정된다. 블록 서식 상황에 속하는 인접하는 블록 수준 상자 사이 수직 여백은 축소된다.
- 블록 서식 지정 상황에 속하는 각 상자의 왼쪽 바깥족 가장자리는 콘테이너 블록의 왼쪽 가장자리를 접한다. (오른쪽에서 왼쪽[아랍어] 방향 서식의 경우는 우측 가장자리를 접한다.)" - 9.4.1

-
- -

인라인 서식 상황에 해당하는 요소의 경우:

- -
-

인라인 서식 상황에서 상자는 콘테이너 블록의 상단에서 하나씩 차례로 수평으로 배치된다. 이 상자들 사이 수평 여백, 테두리 및 패딩은 준수된다. 상자는 다양한 방법으로 수직으로 정렬될 수 있다. 상자의 하단이나 상단에 맞춰 정렬되거나 텍스트의 기준선에 맞춰 정렬될 수 있다. 라인 형태를 띠는 여러 상자를 가두는 직사각형 영역을 라인 상자라고 한다. "- 9.4.2

-
- -

씨에스에스 2.1 규격은 문서를 가로쓰기와 세로 쓰기 모드로 기술하고 있다. 예를 들어 블록 상자 사이의 수직 거리를 기술한다. 블록 및 인라인 요소의 동작 방식은 세로 쓰기 모드에서 동작할 때와 동일하다. 앞으로 게시될 대열 조판과 쓰기 모드에 관한 안내서에서 세로 쓰기 모드의 경우를 살펴볼 예정이다.

- -

블록 서식 상황에 참여하는 요소

- -

영어와 같은 가로쓰기 모드에서 블록 요소는 수직으로 다른 대상 요소 바로 밑에 배치된다.

- -

- -

세로 쓰기 모드에서는 수평으로 배치된다.

- -

- -

이 안내서에서 우리는 영어로 작업할 것이기 때문에 가로쓰기 모드를 다룬다. 그러나 기술된 내용 전체는 세로 쓰기 모드에서도 당연히 동일한 방식으로 작동한다.

- -

씨에스에스 규격에 정의된 대로 2개의 블록 상자 사이 여백이 바로 상자 요소 사이를 구분해주는 것이다. 우리는 그점을 눈으로 확인하기 위해 2개의 단락으로 매우 간단한 하나의 조판에 테두리를 추가했다. 기본 브라우저의 스타일시트는 상하 요소에 여백을 더하는 방식으로 단락 사이 간격을 추가한다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow.html", '100%', 700)}}

- -

단락 요소의 여백을 0으로 설정하면, 테두리는 접촉한다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-margin-zero.html", '100%', 700)}}

- -

기본 설정에 따라 블록 요소는 인라인 방향에 포함된 모든 빈공간을 차지하므로 당해 단락은 펼쳐지면서 콘테이너 블록 내부를 최대한 차지할 수 있게 된다. 블록 너비를 적시하게 되면 옆 공간에 나란히 배치될 공간이 있다손치더라도 다른 대상 요소 바로 밑에 배치된다. 각 블록은 콘테이너 블록의 시작 가장자리에 맞춰 시작되며, 그 위치에 맞춰 해당 쓰기 모드에 포함되는 문장이 시작된다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-width.html", '100%', 700)}}

- -

여백 축소

- -

씨에스에스 규격에 따라 블록 요소 사이의 여백이 축소된다. 즉, 하단 여백이 있는 요소 바로 뒤에 상단 여백을 가진 요소가 있으면 두 여백의 합이 전체 공간이 되는게 아니라 여백이 축소되는데, 본질적으로 두 여백 중 더 큰 것으로 갈음한다.

- -

아래의 예에 포함된 단락들은 20px의 상부 여백과 40px의 하부 여백을 갖고 있다. 단락 사이 여백의 크기는 40px이다. 왜냐면 두번째 단락의 상대적으로 작은 상부 여백이 첫번째 단락의 상대적으로 큰 하부 여백에 맞춰 축소되었기 때문이다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/normal-flow-collapsing.html", '100%', 500)}}

- -

여백 축소에 관해선 여백 축소 정복 안내서에서 자세한 내용을 파악할 수 있다.

- -
-

참고: 여백의 축소 여부가 불확실할 경우 브라우저 개발툴에 나오는 상자 모델 값을 확인하십시오. 이렇게 하면 현재 일어나고 일을 파악하는 데 도움이 될 수 있는 실제 여백 크기를 알 수 있습니다.

- -

-
- -

인라인 서식 상황에 참여하는 요소

- -

인라인 요소는 특정 쓰기 모드에서 문장이 진행하는 방향으로 하나씩 차례대로 표시한다. 인라인 요소를 상자로 간주하지 않는 경향이 있지만 씨에스에스에 속하는 모든 요소처럼 그들도 상자로 간주된다. 이 인라인 상자들은 하나씩 차례대로 배열되어 있다. 컨테이너 블락에 상자 전체를 위한 충분한 공간이 없으면 새 줄로 넘어간다. 생성된 라인은 라인 상자라고 통용된다.

- -

다음 예에서는 스트롱(strong) 요소를 내부에 포함하는 단락의 형태로 생성된 세개의 인라인 상자가 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/inline.html", '100%', 500)}}

- -

strong 요소 전후로 단어를 감싼 상자들은 무명 상자라고 하며 모든 것이 상자로 둘러쳐 있음을 담보하기 위해 상자가 도입된 것이되 직접 대상화할 수 없는 요소이다.

- -

블록 방향의 라인 상자의 크기는(영어 단락 작업시 글 높이의 경우)는 내부에 있는 가장 큰 상자에 의해 정의된다. 다음 예에서 나는 스트롱 요소의 크기를 300%로 만들었고, 이제 그 콘텐츠가 해당 선상의 라인 상자 높이를 정의한다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/line-box.html", '100%', 500)}}

- -

블락과 인라인 상자의 동작 방식에 대해 자세한 내용은 시각적 서식 모델 안내서를 찾아보십시요.

- -

display속성 및 대열 조판

- -

씨에스에스 2.1에 존재하는 규칙 외에도 새로운 수준의 씨에스에스는 블록 및 인라인 상자의 동작을 추가로 기술한다. display 속성은 상자와 상자 속 상자의 동작 방법을 정의한다. 씨에스에스 디스플레이 모델 수준 3 내용을 보면 디스플레이 속성이 상자의 동작과 생성된 상자에 변화를 주는 방법에 대해 더 자세히 알 수 있다.

- -

요소의 디스플레이 유형은 외부 디스플레이 유형을 정의하며, 이 외부 디스플레이 유형은 상자가 동일 서식 상황에 속한 다른 요소와 어떻게 병행 표시되는지를 지정한다. 또한, (씨에스에스 디스플레이 모델 수준 3을 보면) 이 요소 내부에 속한 상자가 작동하는 방식을 지정하는 내부 디스플레이 유형도 정의한다. 이런 내용은 가변(flex) 조판를 고려할 때 명확하게 확인할 수 있다. 아래 예제에서 나에게 display: flex를 적용한 div 요소 하나가 있다. 가변 컨테이너는 블록 요소처럼 동작한다. 새 줄에 표시되고 인라인 진행 방향에서 차지할 수 있는 모든 공간을을 차지한다. 이것은 block의 외부 디스플레이 유형이다.

- -

그러나 가변 항목("Flex Item" 문자열 2개)은 가변 서식 상황에 참여하고 있다. 왜냐면 부모(class container)가 display: flex가 지정된 요소이고, 따라서 (상속에 의해) 내부 디스플레이 유형이 가변이므로 직계 자식의 경우 가변 서식 상황이 수립된다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/flex.html", '100%', 500)}}

- -

따라서 씨에스에스에 포함된 모든 상자가 이런 식으로 작동한다고 간주할 수 있다. 상자 자체는 외부 디스플레이 유형도 갖고있기 때문에 다른 상자와 병행 동작하는 방법을 알고 있다. 그리고 상자는 내부 디스플레이 유형도 갖고있어 자식의 동작 방식도 변경한다. 이어 해당 자식은 외부 및 내부 디스플레이 유형도 갖게된다. 앞 예제에서 가변 항목("Flex Item" 문자열 2개)은 가변 수준 상자가 되며, 따라서 그것의 외부 디스플레이 유형은 그것들이 가변 서식 상황의 일부가 되는 방식에 의해 결정된다. 그들 항목은 대열 디스플레이 유형을 갖게 되는데, 그 의미는 자식이 일반 대열에 참여한다는 것을 의미한다. 당해 가변 항목 내부에 중첩된 항목('children' 'are in' 'normal flow')은 디스플레이 유형이 바뀌지 않는한 블록 및 인라인 요소로 배치된다.

- -

외부 및 내부 디스플레이 유형이란 개념은 Flexbox(display: flex)와 Grid Layout(display: grid)과 같은 조판 메서드를 사용하는 컨테이너가 해당 메서드의 외부 디스플레이 유형이 block인 관계로 블록 및 인라인 조판에 계속해서 참여하고 있다는 것을 알려준다는 점에서 중요하다.

- -

하나의 요소가 참여하는 대상의 서식 상황 변경

- -

브라우저는 해당 요소의 통상적 타당성 여하에 따라 항목을 블록 또는 인라인 서식 맥락의 일부로 표시한다. 예들들면 단어를 강조를 강조하기 위해 스트롱 요소를 사용하며, 브라우저에 굵게 표시됩니다. 스트롱 요소가 블록 수준 요소로 표시되어 새 줄로 밀려나는 것은 일반적으로 타당하지 않다. 당신이 모든 스트롱 요소를 블록 요소로 표시하기를 원하면 당신은 strong 요소에 display: block를 설정함으로써 그렇게 할 수 있다. 즉, 항상 가장 의미론적으로 타당한 HTML 요소를 사용하여 콘텐츠를 표시한 다음 씨에스에스를 사용하여 표시되는 방식을 변경할 수 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/block-inline/change-formatting.html", '100%', 500)}}

- -

요약정리

- -

이번 안내서에서 우리는 블록 요소나 인라인 요소일 경우처럼 일반 대열속에서 요소가 어떻게 표시되는지 살펴보았다. 이러한 요소에 정해진 기본 동작이 있는 관계로 씨에스에스 스타일 지정이 전혀 없는 에이치티엠엘 문서가 읽기 가능한 방식으로 표시된다. 일반 대열의 작동 방식을 이해하면 조판이 더 쉬워지는 데 그 이유는 요소가 표시되는 방식을 변경하는 출발점을 이해하는 것이기 때문이다.

- -

참조 항목

- - diff --git "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" "b/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" deleted file mode 100644 index 4d35855ee5..0000000000 --- "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\223\260\352\270\260_\353\252\250\353\223\234/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 대열 조판과 쓰기 모드 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_쓰기_모드 -tags: - - 대열 조판 - - 쓰기모드 - - 씨에스에스 - - 안내서 - - 지향 -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Writing_Modes ---- -

어떻게 일반 대열이 동작하는지 자세히 설명하는 씨에스에스 2.1 규격은 가로쓰기 모드라고 가정한다. 조판 속성은 세로 쓰기 모드에서 동일한 방식으로 작동해야 한다. 이 안내서는 서로 다른 문서 작성 모드에서 사용될 때 대열 조판이 어떻게 작동하는지 살펴 봅니다.

- -

이것은 씨에스에스(CSS)에 포함된 쓰기 모드 사용에 대한 종합적인 안내서가 아니다. 이 글의 목적은 대열 조판이 쓰기 모드와 예상치 못한 방식으로 상호 작용하는 지점을 문서화하는 것이다. 이 문서의 참조 항목과 외부 리소스 섹션은 쓰기 모드 관련 더 많은 링크를 제공하고 있다.

- -

쓰기 모드 규격

- -

씨에스에스 쓰기 모드 수준 3 규격은 문서의 쓰기 모드가 대열 조판에 미치는 영향을 정의한다. 씨에스에스 쓰기 모드 소개란에서 전하는 규격은 다음과 같다.

- -
-

씨에스에스에 포함되는 쓰기 모드는 {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} 속성에 의해 결정된다. 쓰기 모드는 주로 인라인 기준 방향과 블록 대열 방향 여하에 따라 정의된다."

-
- -

쓰기 모드 규격은 내용물이 라인에 정렬되는 방향에 따라 인라인 기준 방향을 정의한다. 기준 방향이 인라인 방향의 시작과 끝을 정의한다. 인라인 방향의 시작은 문장이 시작되는 곳이고, 인라인 방향의 끝은 새 줄로 넘어가기 전에 텍스트가 끝나는 곳이 끝나는 곳이다.

- -

블록 대열 방향은 예로 단락의 경우처럼 블록 쓰기 모드에서 상자를 쌓는 방향이다. 씨에스에스 쓰기 모드 속성은 블록 대열 방향을 제어한다. 페이지 또는 페이지의 일부를 vertical-lr로 변경하고 싶다면, 대상 요소에 writing-mode: vertical-lr를 설정할 수 있고, 이로써 블록의 방향을 변경하는 것이고 아울러 인라인 방향도 변경된다.

- -

특정 언어일 경우 특정 쓰기 모드나 텍스트 방향을 사용하겠지만, 제목을 세로로 돌리는 등 창의적인 효과를 위해 그러한 속성을 사용할 수도 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/creative-use.html", '100%', 720)}}

- -

writing-mode 속성 및 블록 대열

- -

{{cssxref("writing-mode")}} 속성은 horizontal-tb과 vertical-rl, vertical-lr를 속성값으로 받는다. 이들 속성값은 페이지 상에 블록의 대열 방향을 제어한다. 초기 값은 horizontal-tb,로써 가로 인라인 방향이 포함된 상단에서 하단으로 가는 블록 대열 방향이다. 영어와 같이 왼쪽에서 오른쪽 방향 언어과 오른쪽에서 왼쪽 방향 언어인 아랍어의 경우든 모두가 horizontal-tb이다.

- -

다음 예는 horizontal-tb를 사용하는 블록을 보여준다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/horizontal-tb.html", '100%', 720)}}

- -

속성값 vertical-rl는 다음 예와 같이 세로 인라인 방향을 포함하는 오른쪽에서 왼쪽으로 가는 블록 대열 방향을 제공한다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-rl.html", '100%', 720)}}

- -

마지막 예는 vertical-lr로써 세번 째로 가능한 writing-mode 속성값을 시연하고 있다. 이렇게 하면 왼쪽에서 오른쪽 블록 대열 방향과 세로 인라인 방향을 얻을 수 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/vertical-lr.html", '100%', 720)}}

- -

부모와 다른 쓰기 모드를 가진 상자

- -

중첩된 상자에 부모와 다른 쓰기 모드가 할당된 경우 인라인 수준 상자는 display: inline-block이 적용된 듯이 표시된다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-change-mode.html", '100%', 720)}}

- -

블록 수준 박스는 새로운 블록 서식 상황을 설정하게 되는데, 내부 디스플레이 유형이 flow일 경우 계산에 따른 디스플레이 유형인 flow-root를 얻게 된다는 뜻이다. 이것은 다음 예에서 보다시피 horizontal-tb 속성에 따라 표시되는 상자가 부동 요소를 포함하고 있는데, 그것이 포함된 까닭은 부모가 새로운 블록 대열 상황을 수립했기 때문이다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/block-change-mode.html", '100%', 720)}}

- -

대체 요소

- -

이미지와 같은 대체 요소는 writing-mode에 주어진 속성에 근거하여 (가로 세로) 쓰기 방향를 바꾸지 않는다. 그러나 텍스트를 포함하는 양식 컨트롤과 같은 대체 요소는 사용중인 쓰기 모드와 일치해야 한다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/replaced.html", '100%', 720)}}

- -

논리적 속성 및 속성값

- -

당신이 horizontal-tb 이외의 쓰기 모드에서 작업하게 될 경우, 스크린의 물리적 크기에 매핑되는 많은 속성 및 속성값들이 이상하게 보일 것이다. 예를 들면 상자에 100px을 부여하면 쓰기 모드가 horizontal-tb일 경우에 인라인 방향의 크기(100px)를 통제하게 된다. 쓰기 모드가 vertical-lr일 상황에서 상자가 텍스트에 맞춰 회전하지 않기 때문에 블록 방향 크기를 상자가 제어한다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/width.html", '100%', 720)}}

- -

따라서 우리에게 {{cssxref("블록 크기")}} 및 {{cssxref("인라인 크기")}}라는 새로운 속성이 주어진다. 당해 블록에 inline-size를 100px 부여할 경우 가로쓰기 또는 세로 쓰기 모드 여부는 상관없어지며, inline-size일 경우 항상 인라인 방향의 크기를 의미하게 된다.

- -

{{EmbedGHLiveSample("css-examples/flow/writing-modes/inline-size.html", '100%', 720)}}

- -

씨에스에스 논리적 속성 규격은 여백, 패딩 및 테두리를 제어하는 속성의 논리적 버전뿐만 아니라 일반적으로 물리적 방향 지정을 위해 대상 요소에 전형적으로 사용되는 다른 매핑을 포함하고 있다.

- -

요약정리

- -

대부분의 경우, 문서의 쓰기 모드 또는 문서의 일부를 변경할 때 당신이 대상 요소에 기대하는 대로 대열 조판이 작동한다. 쓰기 모드는 세로 쓰기 언어를 올바르게 조판하거나 ​​독창적 표현을 이유로 사용할 수 있다. 씨에스에스는 세로 쓰기 모드에서 작업할 때 크기의 척도를 요소의 인라인과 블록 크기에 기초할 수 있도록 논리적 속성과 속성값을 도입하는 방식으로 간편한 설정을 가능케 해준다. 이런 내용은 다른 쓰기 모드에서 작동할 수 있는 구성 요소를 만들 경우에 유용할 것이다.

- -

참조 항목

- - - -

외부 리소스

- - - -
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" "b/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" deleted file mode 100644 index 697bdfacde..0000000000 --- "a/files/ko/web/css/css_flow_layout/\355\235\220\353\246\204_\353\240\210\354\235\264\354\225\204\354\233\203\352\263\274_\354\230\244\353\262\204\355\224\214\353\241\234/index.html" +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: 대열 조판과 대열이탈 -slug: Web/CSS/CSS_Flow_Layout/흐름_레이아웃과_오버플로 -tags: - - 가시성 - - 대열 조판 - - 대열이탈 - - 씨에스에스 - - 안내서 - - 조판 - - 중급 - - 텍스트 대열이탈 -translation_of: Web/CSS/CSS_Flow_Layout/Flow_Layout_and_Overflow ---- -

컨테이너에 채울 수 없을 만큼 더 많은 내용물이 있을 때 오버플로 상황이 발생한다. CSS에서 크기 제한이 있는 요소를 다루려면 오버플로의 동작 방식을 이해하는 것이 중요하다. 이 안내서는 일반 플로우에 해당하는 작업 중에 오버플로이 작동하는 방식을 설명한다.

- -

오버플로은 무엇인가?

- -

어떤 요소에 고정 높이 및 너비를 부여한 다음, 상자에 상당한 내용물을 추가하면 기본적인 오버플로 사례가 만들어 진다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow.html", '100%', 700)}}

- -

내용물이 상자 안으로 들어간다. 상자가 채워지면, 눈에 보이게 오버플로이 계속되면서 상자 밖으로 내용물이 표시되고, 후속 내용물 아래에 표시될 가능성까지 있다. 오버플로 동작 방식을 통제하는 속성은 오버플로 속성으로 초기값은 visible로 되어 있다. 그런 까닭에 오버플로한 내용물를 볼 수 있다.

- -

오버플로 통제

- -

오버플로된 내용물이 동작하는 방식을 통제하는 그 밖의 값들이 있다. 오버플로된 내용물을 감추려면 hidden 값을 사용한다. 이 값은 내용물을 보이지 않게 만들 수도 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/hidden.html", '100%', 700)}}

- -

scroll 값을 사용해서 상자의 내용물을 상자 안에 가둬두고 내용물을 볼 수 있게 스크롤 막대를 추가할 수 있다. 스크롤 막대는 내용물이 상자에 들어맞더라도 추가될 것이다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/scroll.html", '100%', 700)}}

- -

auto 값을 사용하면 상자안에 내용물이 들어맞을 경우 스크롤 막대 없이 내용물을 표시하게 된다. 만일 내용물이 들어맞지 않는다면 스크롤 막대가 추가되게 된다. 다음 예를 overflow: scroll 경우의 예와 비교하면 수직 스크롤 막대가 필요할 경우에도 overflow scroll의 예는 수평 및 수직 스크롤 막대가 있음을 알수 있다. 아래 auto 예제에서는 우리가 스크롤이 필요한 방향으로만 스크롤 막대를 추가한다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/auto.html", '100%', 700)}}

- -

이미 배운 바와 같이 기본값인 visible 이외에 살펴본 값 중의 어떤 값을 사용하게 되면 새로운 블록 서식 상황을 생성하게 된다.

- -

참고: 작업 초안 오버플로 수준 3을 보면 추가적인 속성 값으로 overflow: clip이 있다. 이것은 overflow: hidden와 같이 작용하지만, 프로그래밍 방식의 스크롤이 불용되어 스크롤 할 수 상자가 된다. 또한, 이것은 블록 서식 상황을 생성하지 못한다.

- -

오버플로 속성은 실제로는 overflow-x와 overflow-y 속성의 약칭이다. 오버플로 값을 하나만 지정하면 이 값은 가로 세로 양 축에 모두 사용된다. 그러나 두 가지 값 모두를 지정할 수 있다. 첫번 째 경우에는 overflow-x를 수평 방향 값으로 두번째 경우에는 overflow-y를 수직 방향 값으로 사용하면 된다. 아래 예에서 나는 overflow-y: scroll만 지정함으로써 원치 않는 가로 스크롤 막대가 나타나지 않도록 했다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/overflow-y.html", '100%', 700)}}

- -

상대적 플로우 속성

- -

우리는 쓰기 모드와 플로우 레이아웃 안내서에서 block-size와 inline-size라는 새로운 속성를 살펴보았는데, 이 속성은 물리적인 화면 크기에 레이아웃을 구속하기보다는 다양한 쓰기 모드에서 작업할 경우에 적합하다. 수준 3 오버플로 모듈에는 플로우에 상대적인 오버플로 속성들overflow-block와 overflow-inline도 포함되어 있다. 그것들은 overflow-x와 overflow-y에 대응하지만, 매핑은 문서의 쓰기 모드 여하에 달려 있다.

- -

이들 속성은 현재 브라우저에 구현이 되어 있지 않으므로, 현 시점에는 물리적인 속성을 사용하고 쓰기 모드에 맞게 조정해야 한다.

- -

오버플로 표시

- -

수준 3 오버플로 규격에서 우리는 콘텐츠가 오버플로 상황에서 내용물이 보여지는 방식을 개선하도록 도움을 줄 수 있는 몇 가지 속성을 보유하고 있다.

- -

인라인축 오버플로

- -

text-overflow 속성은 인라인 방향의 텍스트 오버플로을 처리한다. 이 속성에는 두 가지 값 중에서 택일한다. clip의 경우는 오버플로하면 내용물이 잘려나간다. 이것이 초기값이므로 기본 동작이다. 또한, ellipsis의 경우는 줄임표를 렌더링하는 것인데, 사용 중인 언어와 쓰기 모드에 따라서는 더 나은 문자로 대체될 수도 있다.

- -

{{EmbedGHLiveSample("css-examples/flow/overflow/text-overflow.html", '100%', 500)}}

- -

블록축 오버플로

- -

이 글의 작성 시점에 명칭을 두고 아직 논의의 여지가 있지만, block-overflow란 속성도 있다. 이 제안으로 텍스트가 블록 크기를 오버플로할 때 줄임표를 추가할 수 있게 된다.

- -

이것은 예를 들어 문서 목록이 있고 제한된 양의 텍스트만 취하는 고정 높이 상자에 목록을 표시하는 경우에 유용하다. 상자나 제목을 클릭할 때 클릭할 내용이 더 많다는 것을 독자들이 인지하지 못할 수도 있다. 줄임표는 더 많은 내용이 있다는 사실을 분명하게 보여준다. 이 규격은 일련의 내용 또는 규칙적인 줄임표를 삽입할 수 있게 한다.

- -

요약정리

- -

웹 상의 연속적인 미디어에 있는지 또는 인쇄 또는 EPUB와 같은 페이징 미디어 형식에 있는지 여부는 어떤 레이아웃 메서드를 처리할 때 어떻게 내용물이 오버플로하게 되는지 이해를 돕는데 유용하다. 일반 대열에서 오버플로이 어떻게 작동하는지 이해함으로써 격자나 가변상자 같은 레이아웃 방식에 포함된 오버플로 내용물의 파장을 더 쉽게 이해할 수 있어야 한다.

- -
{{QuickLinksWithSubpages("/ko/docs/Web/CSS/CSS_Flow_Layout/")}}
diff --git a/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html b/files/ko/web/css/css_lists_and_counters/consistent_list_indentation/index.html new file mode 100644 index 0000000000..675b5127f3 --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/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 +--- +
{{CSSRef}}
+ +

가장 흔하게 리스트에 적용되는 스타일 변경은 들여쓰기(indentation)거리의 변경입니다 -- 즉, 리스트 아이텡을 오른쪽으로 얼마나 멀리 들여쓸것인가 라는것입니다. 이 작업은 가끔 한 브라우저에서 나오던 효과가 다른 브라우저에서는 같은 효과를 내지 못해서 애를 먹게하곤 합니다. 예를들면, 리스트가 왼쪽 마진을 갖지 못하도록 선언할 경우, 익스플로러에선 이동이되지만, Gecko기반의 브라우저에선 고집스럽게도 꼼짝않고 제 자리를 지키며 있는 그런 경우 입니다.

+ +

왜 이런 일이 일어나는 가를 이해하고 더 나아가 이러한 문제점을 피해나갈 방법을 이해하기 위해서, 리스트 형성에대한 세부과정을 검토하는 것이 필요합니다.

+ +

리스트 만들기

+ +

먼저, 한개의 단순한 리스트 아이템을 생각해봅시다. 이 리스트 아이템엔 아무런 마커(불렛이라고도 알려져 있습니다)도 없고, 아직 그자체로 어떤 리스트의 부분이 아닙니다. 그림 1에서 보이는 바와같이, 단순하고 아무 치장도 없는 채로 그냥 혼자 허공에 떠 있는 상태라고 할 수 있습니다.

+ +

Figure 1

+ +

빨간 점선으로된 경계선은 리스트 아이템의 내용물-지역의 바깥 경계를 나타내고 있습니다. 이 시점에서 리스트 아이템은 패딩이나 보더(경계)를 가지고 있지 않다는 점을 상기하십시오. 만약 2개의 리스트 아이템을 더 추가 한다면, 그림 2에 보여진 것과같은 결과를 얻게 될 것입니다.

+ +

Figure 2

+ +

이제 이 아이템들을 부모 엘리먼트로 랩핑(포장)합니다; 이 경우, 우리는 아이템들을 순서없는 리스트로 (즉, <ul>) 랩핑합니다. CSS 상자(박스) 모델에 의하면, 리스트 아이템들의 상자들은 부모 엘리먼트의 내용물-지역안에 디스플레이 되어야만 합니다. 이 부모 엘리먼트에 패딩이나 마진이 아직 없으므로 우리는 그림 3에 보여진 것과 같은 상황을 맞이하게 됩니다.

+ +

Figure 3

+ +

여기서, 푸른 점선 경계선은 <ul>엘리먼트의 내용물 지역의 경계를 보여줍니다. <ul>엘리먼트에 패딩이 없으므로 엘리먼트의 내용물은 세 리스트 아이템들을 촘촘하게 랩핑하게 됩니다.

+ +

이제, 리스트 아이템 마커를 추가합니다. 이 리스트는 순서가 없는 리스트이므로, 그림 4에 보여긴 것 같은 전통적인 채워진 원 불렛을 추가합니다.

+ +

Figure 4

+ +

보여지는 것으론, 마커들은 <ul>의 내용물-지역의바깥 에 있으나, 여기서 이점은 그다지 중요하지 않습니다. 중요한 점은 마커들이 <li>엘리먼트들의 "principal 상자"의 밖에 놓여진다는 점입니다. 이 마커들은 <lt>의 내용물-지역의 밖에 매달려 있으나 여전히 <li>에 부착되어있는 일종의 리스트 아이템들의 꼬리표같다고 할 수 있습니다.

+ +


+ 바로 이런 이유로, 윈도우의 익스플로러을 제외한 모든 브라우저에서, 마커들이 <li>엘리먼트에 지정된 보더밖에 놓이며, list-sytle-position값으로 outside를 취하게 되는 것입니다. 만일 값이 inside로 바뀌게 되면, 마커들은, 비록 <li>의 바로 시작부분에 놓여진 inline 상자임에도 불구하고, <li> 안쪽으로 옯겨지게 됩니다.

+ +

두번 들여쓰기

+ +

그럼 이 모든게 문서에서는 어떻게 나타날까요? 현재, 우리는 아래의 스타일들에 비견되는 상황에 있다고 할 수 있습니다.

+ +
ul, li {margin-left: 0; padding-left: 0;}
+ +

만일 이 리스트를 있는 그대로 문서에 삽입할 경우, 가시적 들여쓰기 효과는 나타나지 않고, 마커들은 브라우저 윈도우의 왼쪽끝으로 잘려나갈 상황에 처하게 될것입니다.

+ +

이를 피하고 들여쓰기효과를 얻을 목적으로 브라우저 개발자들에게 사용가능한 옵션은 다음의 세가지밖에 없습니다.

+ +
    +
  1. 각 <li> 엘리먼트에 왼쪽 마진을 준다.
    2. +
  2. <ul> 엘리먼트에 왼쪽 마진을 준다.
    3. +
  3. <ul> 엘리먼트에 왼쪽 패딩을 준다.
    4. +
+ +

결과론적으로, 누구도 첫번째 옵션을 사용하지는 않는것 같습니다. 두번째 옵션은 윈도우 익스플로러, 매킨토쉬, 그리고 오페라에서 적용되었습니다. 세번째 옵션은 Gecko 와 범주상 이를 임베드해서 사용하는 모든 브라우저들에 적용되었다고 할 수 있습니다.

+ +

이 두 접근법에 대해서 잠깐 살펴봅시다. 익스플로러와 오페라의 경우, 리스트들은 <ul>에 40 픽셀의 왼쪽 마진을 줌으로써 들여쓰여지게 됩니다. 만일 <ul> 엘리먼트에 배경색을 적용하고 리스트 아이템과 <ul> 보더들을 그냥 놔둘 경우, 그림 5에서 보이는 것과 같은 결과를 얻게 됩니다.

+ +

Figure 5

+ +

반면, Gecko는 <ul> 엘리먼트에 대해서 40픽셀의 왼쪽패딩 을 줍니다. 따라서 그림 5를 만들어내는데 사용된 것과 똑 같은 스타일을 적용하게 된다고 가정하면, Gecko기반 브라우저로 예제를 로딩했을때 그림 6과 같은 그림을 보게 됩니다.

+ +

Figure 6

+ +

보이는 바와 같이, 마커들은, 어디에 있게 되건간에, <li> 엘리먼트에 붙여진 채로 남아 있습니다. 차이점은 전적으로 <ul>가 어떤식으로 스타일을 갖추게 되는가에 달려있습니다. 이 차이점은 <ul> 엘리먼트에 배경색이나 보더를 지정하려고 할 경우에만 나타나게 됩니다.

+ +

일관성 찾기

+ +

모든것을 정리해보면 이런 결론에 도달하게 됩니다. 즉, Gecko, 익스플로러, 그리고 오페라 간에 리스트을 일관성있게 렌더링하고 싶으면, <ul> 엘리먼트의 왼쪽 마진 그리고 왼쪽 패딩둘다 지정해야 한다는 것입니다. 이런 목적으로 <li> 을 아예 무시해 버릴 수도 있습니다. 넷스케이프 6.x 에서 디폴트 디스플레이로 돌아가고 싶다면:

+ +
ul {margin-left: 0; padding-left: 40px;}
+ +

만약, 익스플로러/오페라 모델을 따르길 원한다면:

+ +
ul {margin-left: 40px; padding-left: 0;}
+ +

라고 쓰면 됩니다.

+ +

물론, 자기 자신이 선호하는 값을 써 넣을 수도 있습니다. 원한다면 둘다 1.25em로 정해 줄 수도 있습니다 -- 픽셀에 기반한 들여쓰기에만 묶여있을 이유는 없습니다. 만일 리스트들이 들여쓰기를 하지 않도록 리셋하고 싶으면, 패딩과 마진 값을 0으로 정해 주어야만 합니다.

+ +
ul {margin-left: 0; padding-left: 0;}
+ +

하지만, 그렇게 하면, 불렛들이 리스트와 부모 엘리먼트의 바깥쪽에 매달려 있게 된다는 점을 기억하세요. 만일 body가 부모일 경우, 불렛이 브라우저 윈도우 밖으로 완전히 나가있게 되서, 보이지 않게 될 가능성이 아주 높습니다.

+ +

결론

+ +

결국, 여기에 언급된 브라우져들이 리스트를 레이아웃하는 방식에있어서 올바르거나 그르거나 하지 않다는 것을 알 수 있습니다. 각 브라우저는 다른 디폴트 스타일을 사용하고 있으며, 거기서 문제점들이 기어들어 오게 되는 것입니다. 리스트의 왼쪽 패딩과 왼쪽 마진 둘다를 확실하게 스타일 지정 함으로써 리스트 들여쓰기에 있어서 브라우저간 일관성을 보다 획기적으로 유지할 수 있게 되는 것입니다.

+ +

권장 사항

+ +
    +
  • 리스트의 들여쓰기간격을 바꿀때에는 패딩과 마진 둘다 지정하는 것을 잊지마세요.
    • +
+ +
+

Original Document Information

+ +
    +
  • Author(s): Eric A. Meyer, Netscape Communications
    • +
  • Last Updated Date: Published 30 Aug 2002
    • +
  • Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
    • +
  • Note: This reprinted article was originally part of the DevEdge site.
    • +
+
diff --git a/files/ko/web/css/css_masking/index.html b/files/ko/web/css/css_masking/index.html new file mode 100644 index 0000000000..5a48e0af6e --- /dev/null +++ b/files/ko/web/css/css_masking/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 +--- +
{{CSSRef}}
+ +

CSS Masking은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("clip")}} {{deprecated_inline}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("clip-rule")}}
    • +
  • {{cssxref("mask")}}
    • +
  • {{cssxref("mask-border")}}
    • +
  • {{cssxref("mask-border-mode")}}
    • +
  • {{cssxref("mask-border-outset")}}
    • +
  • {{cssxref("mask-border-repeat")}}
    • +
  • {{cssxref("mask-border-slice")}}
    • +
  • {{cssxref("mask-border-source")}}
    • +
  • {{cssxref("mask-border-width")}}
    • +
  • {{cssxref("mask-clip")}}
    • +
  • {{cssxref("mask-composite")}}
    • +
  • {{cssxref("mask-image")}}
    • +
  • {{cssxref("mask-mode")}}
    • +
  • {{cssxref("mask-origin")}}
    • +
  • {{cssxref("mask-position")}}
    • +
  • {{cssxref("mask-repeat")}}
    • +
  • {{cssxref("mask-size")}}
    • +
  • {{cssxref("mask-type")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}초기 정의
+ +
 
diff --git a/files/ko/web/css/css_masks/index.html b/files/ko/web/css/css_masks/index.html deleted file mode 100644 index 5a48e0af6e..0000000000 --- a/files/ko/web/css/css_masks/index.html +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: CSS Masking -slug: Web/CSS/CSS_Masks -tags: - - CSS - - CSS Masking - - Overview - - Reference -translation_of: Web/CSS/CSS_Masking ---- -
{{CSSRef}}
- -

CSS Masking은 마스킹 및 클리핑을 포함해 시각 요소의 부분 또는 전체를 숨기기 위한 수단을 정의하는 CSS 모듈입니다.

- -

참고서

- -

속성

- -
-
    -
  • {{cssxref("clip")}} {{deprecated_inline}}
    • -
  • {{cssxref("clip-path")}}
    • -
  • {{cssxref("clip-rule")}}
    • -
  • {{cssxref("mask")}}
    • -
  • {{cssxref("mask-border")}}
    • -
  • {{cssxref("mask-border-mode")}}
    • -
  • {{cssxref("mask-border-outset")}}
    • -
  • {{cssxref("mask-border-repeat")}}
    • -
  • {{cssxref("mask-border-slice")}}
    • -
  • {{cssxref("mask-border-source")}}
    • -
  • {{cssxref("mask-border-width")}}
    • -
  • {{cssxref("mask-clip")}}
    • -
  • {{cssxref("mask-composite")}}
    • -
  • {{cssxref("mask-image")}}
    • -
  • {{cssxref("mask-mode")}}
    • -
  • {{cssxref("mask-origin")}}
    • -
  • {{cssxref("mask-position")}}
    • -
  • {{cssxref("mask-repeat")}}
    • -
  • {{cssxref("mask-size")}}
    • -
  • {{cssxref("mask-type")}}
    • -
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}초기 정의
- -
 
diff --git a/files/ko/web/css/css_values_and_units/index.html b/files/ko/web/css/css_values_and_units/index.html new file mode 100644 index 0000000000..94d8ceabd6 --- /dev/null +++ b/files/ko/web/css/css_values_and_units/index.html @@ -0,0 +1,497 @@ +--- +title: CSS 단위와 값 +slug: Web/CSS/CSS_단위와_값 +tags: + - CSS + - 값과 단위 + - 안내서 + - 참조 +translation_of: Web/CSS/CSS_Values_and_Units +--- +
{{CSSRef}}
+ +

모든 CSS 선언은 속성 / 값 쌍을 포함합니다. 속성에 따라 값은 하나의 정수 또는 키워드, 여러 개의 키워드, 단위가 있거나 없는 값의 나열이 될 수 있습니다. CSS 속성에 허용되는 공통적인 자료형(단위와 값)의 집합이 있습니다. 아래는 이들 자료형 대부분에 대한 개요입니다. 더 자세한 정보를 보려면 각 자료형의 페이지를 참고하세요.

+ +

텍스트 자료형

+ +
    +
  • {{cssxref("<custom-ident>")}}
    • +
  • <ident>로서 미리 정의된 키워드
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<url>")}}
    • +
+ +

텍스트 자료형은 <string>이거나, 연속된 문자를 따옴표로 감싼 것, 또는 따옴표로 감싸지 않은 "CSS 식별자"인 <ident>가 될 수 있습니다. <string>은 작은따옴표 또는 큰따옴표로 감싸져야 합니다. 사양에서 <ident> 또는 <custom-ident>의 목록에 포함되어 있는 CSS 식별자는 따옴표로 감싸서는 안 됩니다.

+ +

CSS 사양에서는 웹 개발자가 정의할 수 있는 값들, 가령 키프레임 애니메이션이나 서체 가족의 이름, 그리드 영역 같은 것들을 {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, 또는 둘 다로서 목록에 표시합니다.

+ +

사용자가 정의한 텍스트 값을 따옴표로 감싸는 것과 감싸지 않는 것 모두가 허용되는 경우, 사양에서는 <custom-ident> | <string>로서 이를 목록에 표시하며, 이는 따옴표가 선택 사항임을 의미합니다. 애니메이션 이름이 바로 그런 경우입니다:

+ +
@keyframe validIdent {
+  /* keyframes go here */
+}
+@keyframe 'validString' {
+  /* keyframes go here */
+}
+ +

몇몇 텍스트 값은 따옴표로 감싸지 않는 경우 유효하지 않습니다. 예를 들어, {{cssxref("grid-area")}}의 값은 <custom-ident>일 수 있으므로, 만약 content라는 이름의 그리드 영역이 있을 때 아래처럼 이를 따옴표 없이 사용할 수 있습니다:

+ +
.item {
+  grid-area: content;
+}
+
+ +

반면, {{cssxref("<string>")}}인 자료형의 경우, 예를 들어 {{cssxref("content")}} 속성의 문자열 값은 따옴표로 감싸져야 합니다:

+ +
.item::after {
+    content: "This is my content.";
+}
+
+ +

일반적으로 이모지를 포함해 여러분이 원하는 아무 이름이나 만들 수 있지만, none, unset, initial, inherit, 숫자 또는 2개의 대시로 시작하는 이름은 식별자가 될 수 없으며, 대부분의 경우 미리 정의된 다른 CSS 키워드와 동일한 이름을 사용하고 싶지는 않을 것입니다. 더 자세한 내용을 보려면 {{cssxref("<custom-ident>")}}와 {{cssxref("<string>")}}의 참조 페이지를 확인하세요.

+ +

미리 정의된 키워드 값

+ +

미리 정의된 키워드 값은 특정 속성의 사양에 정의된 텍스트 값입니다. 이 키워드들은 CSS 식별자이기도 해서 따옴표 없이 사용됩니다.

+ +

CSS 사양 또는 MDN의 속성 페이지에서 CSS 속성의 값에 대한 문법을 보면, 허용되는 키워드가 아래와 같은 형태로 나열됩니다. 아래는 {{cssxref("float")}}에 허용되는 미리 정의된 키워드 값입니다.

+ +
left | right | none | inline-start | inline-end
+ +

이런 값들은 따옴표 없이 사용됩니다:

+ +
.box {
+    float: left;
+}
+
+ +

CSS 전체에 공유되는 값

+ +

한 속성의 사양의 일부로서 존재하는 미리 정의된 키워드와 더불어, 모든 CSS 속성은 CSS 전체에 걸쳐 공유되는 값인 {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}을 받아들일 수 있으며, 이들은 기본 동작을 명시적으로 지정합니다.

+ +

initial 키워드는 속성의 초기 값으로 지정된 값을 표현합니다. inherit 키워드는 해당 요소의 부모에 적용된 동일 속성의 계산값을 표현하며, 해당 속성이 상속된다고 가정합니다.

+ +

unset 키워드는 inherit 또는 initial처럼 동작하는데, 해당 속성이 상속되는 경우 전자, 아닌 경우 후자로 동작합니다.

+ +

네번째 값으로 {{cssxref("revert")}}가 Cascade Level 4 사양에 추가되었지만, 지금은 브라우저 지원 상태가 좋지 않습니다.

+ +

URL

+ +

{{cssxref("<url>")}} 자료형은 함수 표기법을 사용하며, 함수가 URL에 해당하는 <string>을 받는 형태입니다. 이것은 절대 URL 또는 상대 URL일 수 있습니다. 예를 들어, 배경 이미지를 넣고 싶을 때 다음 중 아무거나 사용할 수 있습니다.

+ +
.box {
+  background-image: url("images/my-background.png");
+}
+
+.box {
+  background-image: url("https://www.exammple.com/images/my-background.png");
+}
+
+ +

url() 의 매개변수는 따옴표로 감싸거나 감싸지 않을 수 있습니다. 감싸지 않는 경우, 이는 <url-token>으로 해석되어 특정 문자를 이스케이프하는 등의 추가적인 할 일이 생깁니다. 더 자세한 내용을 보려면 {{cssxref("<url>")}}를 확인하세요.

+ +

숫자 자료형

+ +
    +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
+ +

정수

+ +

정수는 1개 이상의 10진수 숫자(0부터 9)로, 예를 들어 1024나 -55가 이에 속합니다. 정수 앞에는 + 또는 - 기호를 덧붙일 수 있는데, 기호와 정수 사이에 공백이 없어야 합니다.

+ +

숫자

+ +

{{cssxref("<number>")}}는 실수를 나타내며, 소수점과 소수부분을 포함할 수도 있고 포함하지 않을 수도 있습니다. 예를 들어 0.255, 128, -1.2가 이에 속합니다. 숫자 앞에도 +나 - 기호를 덧붙일 수 있습니다.

+ +

치수

+ +

{{cssxref("<dimension>")}}은 <number>에 단위를 붙인 것으로, 예를 들면 45deg, 100ms, 10px가 이에 속합니다. 덧붙인 단위 식별자는 대소문자를 구별하지 않습니다. 숫자와 단위 식별자 사이에는 공백 또는 다른 문자가 들어갈 수 없습니다: 즉, 1 cm는 유효하지 않습니다.

+ +

CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:

+ +
    +
  • {{cssxref("<length>")}} (거리 단위)
    • +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
+ +

다음 절에서 이것들을 다룹니다.

+ +

거리 단위

+ +

거리 단위, 또는 길이가 값으로 허용되는 속성은 {{cssxref("<length>")}} 자료형으로 표시됩니다. CSS에는 2가지 종류의 길이가 있습니다: 상대적 길이와 절대적 길이입니다.

+ +

상대적 길이 단위는 다른 무언가와 비교해 상대적인 길이를 나타냅니다. 예를 들어, em은 해당 요소의 폰트 크기에 상대적이며 vh는 뷰포트의 높이에 상대적입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

상대적 길이 단위들

+
단위비교의 대상
em해당 요소의 폰트 크기
ex해당 요소의 폰트의 x높이
cap해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이)
ch해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, “0” (ZERO, U+0030) 문자로 대표됨.
ic해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, “水” (CJK 물 표의 문자, U+6C34) 문자로 대표됨.
rem루트 요소의 폰트 크기
lh해당 요소의 줄 높이
rlh루트 요소의 줄 높이
vw뷰포트 너비의 1%
vh뷰포트 높이의 1%
vi루트 요소의 인라인 축 방향으로 뷰포트 길이의 1%
vb루트 요소의 블록 축 방향으로 뷰포트 길이의 1%
vmin뷰포트의 길이 중 더 짧은 것의 1%
vmax뷰포트의 길이 중 더 긴 것의 1%
+ +

절대적 길이 단위는 인치 또는 센티미터의 물리적 길이로 고정적입니다. 그래서 이 단위들의 다수는 인쇄물과 같은 고정된 크기의 매체로 출력되는 경우에 유용합니다. 예를 들어, mm는 물리적인 밀리미터, 즉 센티미터의 1/10입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

절대적 길이 단위

+
단위이름다음과 동일함
cm센티미터1cm = 96px/2.54
mm밀리미터1mm = 1cm의 1/10
Q쿼터-밀리미터1Q = 1cm의 1/40
in인치1in = 2.54cm = 96px
pc피카1pc = 1in의 1/16
pt포인트1pt = 1in의 1/72
px픽셀1px = 1in의 1/96
+ +

길이 값을 포함할 때 길이가 0이면, 단위 식별자가 필요하지 않습니다. 그 외의 경우 단위 식별자가 필요합니다. 단위 식별자는 대소문자를 구별하지 않으며, 값의 숫자 부분 이후에 공백 없이 바로 나와야 합니다.

+ +

각도 단위

+ +

각도 값은 {{cssxref("<angle>")}} 자료형으로 표시되며 다음의 값이 허용됩니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
단위이름설명
deg도360도가 완전한 원을 이룹니다.
grad그라디안400 그라디안이 완전한 원을 이룹니다.
rad라디안2π 라디안이 완전한 원을 이룹니다.
turn턴1턴이 완전한 원을 이룹니다.
+ +

시간 단위

+ +

시간 단위는 {{cssxref("<time>")}} 자료형으로 표시됩니다. 시간 단위를 포함할 때는 단위 식별자인 s 또는 ms가 반드시 필요합니다. 아래의 값이 허용됩니다.

+ + + + + + + + + + + + + + + + + + + + + +
단위이름설명
s초
ms밀리초1,000 밀리초는 1초와 같습니다.
+ +

진동수 단위

+ +

진동수 단위는 {{cssxref("<frequency>")}} 자료형으로 표시됩니다. 아래 값이 허용됩니다.

+ + + + + + + + + + + + + + + + + + + + + +
단위이름설명
Hz헤르츠1초당 발생한 횟수를 나타냅니다.
kHz킬로헤르츠1 킬로헤르츠는 1000 헤르츠와 같습니다.
+ +

1Hz, 또는 1hz, 1HZ는 초당 진동수입니다.

+ +

해상도 단위

+ +

해상도 단위는 {{cssxref("<resolution>")}}로 표시됩니다. 이것들은 스크린과 같은 그래픽 표시에서 CSS 인치당, 센티미터당, 픽셀당 몇 개의 점을 포함할 수 있는지를 나타냄으로써 점 1개의 크기를 표현합니다. 다음의 값이 허용됩니다:

+ + + + + + + + + + + + + + + + + + + + + + +
단위설명
dpi인치당 점의 수.
dpcm센티미터당 점의 수.
dppx, x픽셀당 점의 수.
+ +

퍼센트

+ +

{{cssxref("<percentage>")}}는 다른 값의 일부분을 표현하는 자료형입니다.

+ +

퍼센트 값은 언제나 다른 양, 예컨대 길이와 같은 것에 상대적입니다. 퍼센트를 허용하는 속성은 그 퍼센트가 참조하는 양 또한 정의합니다. 이 양은 같은 요소가 갖는 다른 속성의 값이거나, 조상 요소가 갖는 속성의 값이거나, 이 요소를 포함하는 블록의 치수 등이 될 수 있습니다.

+ +

예를 들면, 어떤 박스의 {{cssxref("width")}}를 퍼센트로 지정한 경우, 그 박스의 부모의 계산된 너비의 퍼센트를 참조합니다:

+ +
.box {
+  width: 50%;
+}
+ +

퍼센트와 치수 함께 사용하기

+ +

일부 속성은 두 자료형 중 하나를 선택해서, 예를 들면 <length> 또는 <percentage>를 골라서 치수를 지정할 수 있습니다. 이 경우 사양에는 허용되는 값이 {{cssxref("<length-percentage>")}}처럼 조합된 단위로 기술됩니다. 다음은 가능한 다른 조합입니다:

+ +
    +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
+ +

특별한 자료형 (다른 사양에서 정의된 것들)

+ +
    +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<position>")}}
    • +
+ +

색깔

+ +

{{cssxref("<color>")}} 값은 요소의 외관 색깔(예: 배경색)을 지정하며, CSS Color Module에 정의되어 있습니다.

+ +

이미지

+ +

{{cssxref("<image>")}} 값은 CSS에서 사용될 수 있는 다양한 종류의 이미지를 지정하며, CSS Image Values and Replaced Content Module에 정의되어 있습니다.

+ +

위치

+ +

{{cssxref("<position>")}} 자료형은 배치 영역 안에서 객체의 2D 위치를, 예컨대 컨테이너 안에서 배경 이미지의 위치 같은 것을 정의합니다. 이 자료형은 {{cssxref("background-position")}}으로 해석되므로 CSS Backgrounds and Borders specification에 명시되어 있습니다.

+ +

함수 표기법

+ +
    +
  • {{cssxref("calc()")}}
    • +
  • {{cssxref("min", "min()")}}
    • +
  • {{cssxref("max", "max()")}}
    • +
  • {{cssxref("clamp", "clamp()")}}
    • +
  • {{cssxref("toggle", "toggle()")}}
    • +
  • {{cssxref("attr", "attr()")}}
    • +
+ +

함수 표기법은 더 복잡한 자료형을 표현하거나 CSS가 특별한 처리를 하도록 지시하는 자료형의 값입니다. 이 문법은 함수의 이름으로 시작해서 바로 왼쪽 괄호 (가 뒤따르고, 함수의 인자를 나열한 다음, 오른쪽 괄호 )로 끝납니다. 함수는 여러 개의 인자를 받을 수 있으며, CSS 속성 값과 비슷한 형식을 가집니다.

+ +

공백 문자는 허용되지만, 괄호 안에서는 선택 사항입니다. (단 min(), max(), clamp() 함수 페이지의 주의 사항에서 공백 문자에 대한 내용을 확인하세요.)

+ +

rgba()와 같은 몇몇 레거시 함수 표기법이 콤마를 사용하지만, 일반적으로 콤마는 목록에서 아이템을 구분하기 위해 사용됩니다. 콤마가 인자를 구분하기 위해 사용된 경우, 콤마 전후의 공백 문자는 선택 사항입니다.

+ +

사양

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
사양상태비고
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}vi, vb, ic, cap, lh, rlh 단위 추가.
+ min(), max(), clamp() 함수 표기법 추가
+ toggle() 추가
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}calc(), ch, rem, vw, vw, vmin, vmax, Q 추가
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}rgb(), rgba(), hsl(), hsla() 함수에 콤마 없는 문법 추가. rgb()와 hsl()에 알파 값 허용하며 rgba()와 hsla()를 그것들의 (지원이 중단된) 별칭으로 전환.
+ 색깔 키워드 rebeccapurple 추가. 4자리와 8자리의 16진수 색깔 값 추가, 마지막 숫자(들)이 알파 값을 의미함.
+ hwb(), device-cmyk(), color() 함수 추가.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}system-colors를 지원 중단으로 표시. SVG 색깔 추가. rgba(), hsl(), hsla() 함수 추가.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} +

element(), image(), image-set(), conic-gradient() 추가

+
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}이미지를 처음으로 정의함.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}첫번째 정의.
+ +

같이 보기

+ + diff --git "a/files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/index.html" "b/files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/index.html" deleted file mode 100644 index 94d8ceabd6..0000000000 --- "a/files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/index.html" +++ /dev/null @@ -1,497 +0,0 @@ ---- -title: CSS 단위와 값 -slug: Web/CSS/CSS_단위와_값 -tags: - - CSS - - 값과 단위 - - 안내서 - - 참조 -translation_of: Web/CSS/CSS_Values_and_Units ---- -
{{CSSRef}}
- -

모든 CSS 선언은 속성 / 값 쌍을 포함합니다. 속성에 따라 값은 하나의 정수 또는 키워드, 여러 개의 키워드, 단위가 있거나 없는 값의 나열이 될 수 있습니다. CSS 속성에 허용되는 공통적인 자료형(단위와 값)의 집합이 있습니다. 아래는 이들 자료형 대부분에 대한 개요입니다. 더 자세한 정보를 보려면 각 자료형의 페이지를 참고하세요.

- -

텍스트 자료형

- -
    -
  • {{cssxref("<custom-ident>")}}
    • -
  • <ident>로서 미리 정의된 키워드
    • -
  • {{cssxref("<string>")}}
    • -
  • {{cssxref("<url>")}}
    • -
- -

텍스트 자료형은 <string>이거나, 연속된 문자를 따옴표로 감싼 것, 또는 따옴표로 감싸지 않은 "CSS 식별자"인 <ident>가 될 수 있습니다. <string>은 작은따옴표 또는 큰따옴표로 감싸져야 합니다. 사양에서 <ident> 또는 <custom-ident>의 목록에 포함되어 있는 CSS 식별자는 따옴표로 감싸서는 안 됩니다.

- -

CSS 사양에서는 웹 개발자가 정의할 수 있는 값들, 가령 키프레임 애니메이션이나 서체 가족의 이름, 그리드 영역 같은 것들을 {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, 또는 둘 다로서 목록에 표시합니다.

- -

사용자가 정의한 텍스트 값을 따옴표로 감싸는 것과 감싸지 않는 것 모두가 허용되는 경우, 사양에서는 <custom-ident> | <string>로서 이를 목록에 표시하며, 이는 따옴표가 선택 사항임을 의미합니다. 애니메이션 이름이 바로 그런 경우입니다:

- -
@keyframe validIdent {
-  /* keyframes go here */
-}
-@keyframe 'validString' {
-  /* keyframes go here */
-}
- -

몇몇 텍스트 값은 따옴표로 감싸지 않는 경우 유효하지 않습니다. 예를 들어, {{cssxref("grid-area")}}의 값은 <custom-ident>일 수 있으므로, 만약 content라는 이름의 그리드 영역이 있을 때 아래처럼 이를 따옴표 없이 사용할 수 있습니다:

- -
.item {
-  grid-area: content;
-}
-
- -

반면, {{cssxref("<string>")}}인 자료형의 경우, 예를 들어 {{cssxref("content")}} 속성의 문자열 값은 따옴표로 감싸져야 합니다:

- -
.item::after {
-    content: "This is my content.";
-}
-
- -

일반적으로 이모지를 포함해 여러분이 원하는 아무 이름이나 만들 수 있지만, none, unset, initial, inherit, 숫자 또는 2개의 대시로 시작하는 이름은 식별자가 될 수 없으며, 대부분의 경우 미리 정의된 다른 CSS 키워드와 동일한 이름을 사용하고 싶지는 않을 것입니다. 더 자세한 내용을 보려면 {{cssxref("<custom-ident>")}}와 {{cssxref("<string>")}}의 참조 페이지를 확인하세요.

- -

미리 정의된 키워드 값

- -

미리 정의된 키워드 값은 특정 속성의 사양에 정의된 텍스트 값입니다. 이 키워드들은 CSS 식별자이기도 해서 따옴표 없이 사용됩니다.

- -

CSS 사양 또는 MDN의 속성 페이지에서 CSS 속성의 값에 대한 문법을 보면, 허용되는 키워드가 아래와 같은 형태로 나열됩니다. 아래는 {{cssxref("float")}}에 허용되는 미리 정의된 키워드 값입니다.

- -
left | right | none | inline-start | inline-end
- -

이런 값들은 따옴표 없이 사용됩니다:

- -
.box {
-    float: left;
-}
-
- -

CSS 전체에 공유되는 값

- -

한 속성의 사양의 일부로서 존재하는 미리 정의된 키워드와 더불어, 모든 CSS 속성은 CSS 전체에 걸쳐 공유되는 값인 {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}을 받아들일 수 있으며, 이들은 기본 동작을 명시적으로 지정합니다.

- -

initial 키워드는 속성의 초기 값으로 지정된 값을 표현합니다. inherit 키워드는 해당 요소의 부모에 적용된 동일 속성의 계산값을 표현하며, 해당 속성이 상속된다고 가정합니다.

- -

unset 키워드는 inherit 또는 initial처럼 동작하는데, 해당 속성이 상속되는 경우 전자, 아닌 경우 후자로 동작합니다.

- -

네번째 값으로 {{cssxref("revert")}}가 Cascade Level 4 사양에 추가되었지만, 지금은 브라우저 지원 상태가 좋지 않습니다.

- -

URL

- -

{{cssxref("<url>")}} 자료형은 함수 표기법을 사용하며, 함수가 URL에 해당하는 <string>을 받는 형태입니다. 이것은 절대 URL 또는 상대 URL일 수 있습니다. 예를 들어, 배경 이미지를 넣고 싶을 때 다음 중 아무거나 사용할 수 있습니다.

- -
.box {
-  background-image: url("images/my-background.png");
-}
-
-.box {
-  background-image: url("https://www.exammple.com/images/my-background.png");
-}
-
- -

url() 의 매개변수는 따옴표로 감싸거나 감싸지 않을 수 있습니다. 감싸지 않는 경우, 이는 <url-token>으로 해석되어 특정 문자를 이스케이프하는 등의 추가적인 할 일이 생깁니다. 더 자세한 내용을 보려면 {{cssxref("<url>")}}를 확인하세요.

- -

숫자 자료형

- -
    -
  • {{cssxref("<integer>")}}
    • -
  • {{cssxref("<number>")}}
    • -
  • {{cssxref("<dimension>")}}
    • -
  • {{cssxref("<percentage>")}}
    • -
- -

정수

- -

정수는 1개 이상의 10진수 숫자(0부터 9)로, 예를 들어 1024나 -55가 이에 속합니다. 정수 앞에는 + 또는 - 기호를 덧붙일 수 있는데, 기호와 정수 사이에 공백이 없어야 합니다.

- -

숫자

- -

{{cssxref("<number>")}}는 실수를 나타내며, 소수점과 소수부분을 포함할 수도 있고 포함하지 않을 수도 있습니다. 예를 들어 0.255, 128, -1.2가 이에 속합니다. 숫자 앞에도 +나 - 기호를 덧붙일 수 있습니다.

- -

치수

- -

{{cssxref("<dimension>")}}은 <number>에 단위를 붙인 것으로, 예를 들면 45deg, 100ms, 10px가 이에 속합니다. 덧붙인 단위 식별자는 대소문자를 구별하지 않습니다. 숫자와 단위 식별자 사이에는 공백 또는 다른 문자가 들어갈 수 없습니다: 즉, 1 cm는 유효하지 않습니다.

- -

CSS는 치수를 사용해 아래와 같은 것들을 표시합니다:

- -
    -
  • {{cssxref("<length>")}} (거리 단위)
    • -
  • {{cssxref("<angle>")}}
    • -
  • {{cssxref("<time>")}}
    • -
  • {{cssxref("<frequency>")}}
    • -
  • {{cssxref("<resolution>")}}
    • -
- -

다음 절에서 이것들을 다룹니다.

- -

거리 단위

- -

거리 단위, 또는 길이가 값으로 허용되는 속성은 {{cssxref("<length>")}} 자료형으로 표시됩니다. CSS에는 2가지 종류의 길이가 있습니다: 상대적 길이와 절대적 길이입니다.

- -

상대적 길이 단위는 다른 무언가와 비교해 상대적인 길이를 나타냅니다. 예를 들어, em은 해당 요소의 폰트 크기에 상대적이며 vh는 뷰포트의 높이에 상대적입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

상대적 길이 단위들

-
단위비교의 대상
em해당 요소의 폰트 크기
ex해당 요소의 폰트의 x높이
cap해당 요소의 폰트의 대문자 높이(대문자의 공칭 높이)
ch해당 요소의 폰트의 좁은 문자가 평균적으로 나아가는 길이, “0” (ZERO, U+0030) 문자로 대표됨.
ic해당 요소의 폰트의 전각 문자가 평균적으로 나아가는 길이, “水” (CJK 물 표의 문자, U+6C34) 문자로 대표됨.
rem루트 요소의 폰트 크기
lh해당 요소의 줄 높이
rlh루트 요소의 줄 높이
vw뷰포트 너비의 1%
vh뷰포트 높이의 1%
vi루트 요소의 인라인 축 방향으로 뷰포트 길이의 1%
vb루트 요소의 블록 축 방향으로 뷰포트 길이의 1%
vmin뷰포트의 길이 중 더 짧은 것의 1%
vmax뷰포트의 길이 중 더 긴 것의 1%
- -

절대적 길이 단위는 인치 또는 센티미터의 물리적 길이로 고정적입니다. 그래서 이 단위들의 다수는 인쇄물과 같은 고정된 크기의 매체로 출력되는 경우에 유용합니다. 예를 들어, mm는 물리적인 밀리미터, 즉 센티미터의 1/10입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

절대적 길이 단위

-
단위이름다음과 동일함
cm센티미터1cm = 96px/2.54
mm밀리미터1mm = 1cm의 1/10
Q쿼터-밀리미터1Q = 1cm의 1/40
in인치1in = 2.54cm = 96px
pc피카1pc = 1in의 1/16
pt포인트1pt = 1in의 1/72
px픽셀1px = 1in의 1/96
- -

길이 값을 포함할 때 길이가 0이면, 단위 식별자가 필요하지 않습니다. 그 외의 경우 단위 식별자가 필요합니다. 단위 식별자는 대소문자를 구별하지 않으며, 값의 숫자 부분 이후에 공백 없이 바로 나와야 합니다.

- -

각도 단위

- -

각도 값은 {{cssxref("<angle>")}} 자료형으로 표시되며 다음의 값이 허용됩니다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
단위이름설명
deg도360도가 완전한 원을 이룹니다.
grad그라디안400 그라디안이 완전한 원을 이룹니다.
rad라디안2π 라디안이 완전한 원을 이룹니다.
turn턴1턴이 완전한 원을 이룹니다.
- -

시간 단위

- -

시간 단위는 {{cssxref("<time>")}} 자료형으로 표시됩니다. 시간 단위를 포함할 때는 단위 식별자인 s 또는 ms가 반드시 필요합니다. 아래의 값이 허용됩니다.

- - - - - - - - - - - - - - - - - - - - - -
단위이름설명
s초
ms밀리초1,000 밀리초는 1초와 같습니다.
- -

진동수 단위

- -

진동수 단위는 {{cssxref("<frequency>")}} 자료형으로 표시됩니다. 아래 값이 허용됩니다.

- - - - - - - - - - - - - - - - - - - - - -
단위이름설명
Hz헤르츠1초당 발생한 횟수를 나타냅니다.
kHz킬로헤르츠1 킬로헤르츠는 1000 헤르츠와 같습니다.
- -

1Hz, 또는 1hz, 1HZ는 초당 진동수입니다.

- -

해상도 단위

- -

해상도 단위는 {{cssxref("<resolution>")}}로 표시됩니다. 이것들은 스크린과 같은 그래픽 표시에서 CSS 인치당, 센티미터당, 픽셀당 몇 개의 점을 포함할 수 있는지를 나타냄으로써 점 1개의 크기를 표현합니다. 다음의 값이 허용됩니다:

- - - - - - - - - - - - - - - - - - - - - - -
단위설명
dpi인치당 점의 수.
dpcm센티미터당 점의 수.
dppx, x픽셀당 점의 수.
- -

퍼센트

- -

{{cssxref("<percentage>")}}는 다른 값의 일부분을 표현하는 자료형입니다.

- -

퍼센트 값은 언제나 다른 양, 예컨대 길이와 같은 것에 상대적입니다. 퍼센트를 허용하는 속성은 그 퍼센트가 참조하는 양 또한 정의합니다. 이 양은 같은 요소가 갖는 다른 속성의 값이거나, 조상 요소가 갖는 속성의 값이거나, 이 요소를 포함하는 블록의 치수 등이 될 수 있습니다.

- -

예를 들면, 어떤 박스의 {{cssxref("width")}}를 퍼센트로 지정한 경우, 그 박스의 부모의 계산된 너비의 퍼센트를 참조합니다:

- -
.box {
-  width: 50%;
-}
- -

퍼센트와 치수 함께 사용하기

- -

일부 속성은 두 자료형 중 하나를 선택해서, 예를 들면 <length> 또는 <percentage>를 골라서 치수를 지정할 수 있습니다. 이 경우 사양에는 허용되는 값이 {{cssxref("<length-percentage>")}}처럼 조합된 단위로 기술됩니다. 다음은 가능한 다른 조합입니다:

- -
    -
  • {{cssxref("<frequency-percentage>")}}
    • -
  • {{cssxref("<angle-percentage>")}}
    • -
  • {{cssxref("<time-percentage>")}}
    • -
- -

특별한 자료형 (다른 사양에서 정의된 것들)

- -
    -
  • {{cssxref("<color>")}}
    • -
  • {{cssxref("<image>")}}
    • -
  • {{cssxref("<position>")}}
    • -
- -

색깔

- -

{{cssxref("<color>")}} 값은 요소의 외관 색깔(예: 배경색)을 지정하며, CSS Color Module에 정의되어 있습니다.

- -

이미지

- -

{{cssxref("<image>")}} 값은 CSS에서 사용될 수 있는 다양한 종류의 이미지를 지정하며, CSS Image Values and Replaced Content Module에 정의되어 있습니다.

- -

위치

- -

{{cssxref("<position>")}} 자료형은 배치 영역 안에서 객체의 2D 위치를, 예컨대 컨테이너 안에서 배경 이미지의 위치 같은 것을 정의합니다. 이 자료형은 {{cssxref("background-position")}}으로 해석되므로 CSS Backgrounds and Borders specification에 명시되어 있습니다.

- -

함수 표기법

- -
    -
  • {{cssxref("calc()")}}
    • -
  • {{cssxref("min", "min()")}}
    • -
  • {{cssxref("max", "max()")}}
    • -
  • {{cssxref("clamp", "clamp()")}}
    • -
  • {{cssxref("toggle", "toggle()")}}
    • -
  • {{cssxref("attr", "attr()")}}
    • -
- -

함수 표기법은 더 복잡한 자료형을 표현하거나 CSS가 특별한 처리를 하도록 지시하는 자료형의 값입니다. 이 문법은 함수의 이름으로 시작해서 바로 왼쪽 괄호 (가 뒤따르고, 함수의 인자를 나열한 다음, 오른쪽 괄호 )로 끝납니다. 함수는 여러 개의 인자를 받을 수 있으며, CSS 속성 값과 비슷한 형식을 가집니다.

- -

공백 문자는 허용되지만, 괄호 안에서는 선택 사항입니다. (단 min(), max(), clamp() 함수 페이지의 주의 사항에서 공백 문자에 대한 내용을 확인하세요.)

- -

rgba()와 같은 몇몇 레거시 함수 표기법이 콤마를 사용하지만, 일반적으로 콤마는 목록에서 아이템을 구분하기 위해 사용됩니다. 콤마가 인자를 구분하기 위해 사용된 경우, 콤마 전후의 공백 문자는 선택 사항입니다.

- -

사양

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
사양상태비고
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}vi, vb, ic, cap, lh, rlh 단위 추가.
- min(), max(), clamp() 함수 표기법 추가
- toggle() 추가
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}calc(), ch, rem, vw, vw, vmin, vmax, Q 추가
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}rgb(), rgba(), hsl(), hsla() 함수에 콤마 없는 문법 추가. rgb()와 hsl()에 알파 값 허용하며 rgba()와 hsla()를 그것들의 (지원이 중단된) 별칭으로 전환.
- 색깔 키워드 rebeccapurple 추가. 4자리와 8자리의 16진수 색깔 값 추가, 마지막 숫자(들)이 알파 값을 의미함.
- hwb(), device-cmyk(), color() 함수 추가.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}system-colors를 지원 중단으로 표시. SVG 색깔 추가. rgba(), hsl(), hsla() 함수 추가.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} -

element(), image(), image-set(), conic-gradient() 추가

-
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}이미지를 처음으로 정의함.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}첫번째 정의.
- -

같이 보기

- - 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 deleted file mode 100644 index 416718c17f..0000000000 --- a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -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 ---- -

Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)은 URL 값을 CSS2 커서 속성값으로 사용하는 것을 지원합니다. 이 기능은 마우스 커서 모양으로 임의의 이미지 를 지정할 수 있게 해줍니다 — Gecko가 지원하는 모든 이미지 포맷을 사용할 수 있습니다.

- -

문법

- -

이 속성의 문법은 다음과 같습니다:

- -
cursor: [<url>,]* keyword;
-
- -

즉, URL을 지정하지 않거나 혹은 다수의 콤마로 분리된 URL값들을 지정할 수 있으며, 이 값들 뒤엔 반드시 CSS규정에 정의된 auto 나 pointer같은 키워드들이 따라와야 합니다.

- -

예를 들면, 다음과 같은 값이 지정될 수 있습니다:

- -
cursor: url(foo.cur), url(http://www.example.com/bar.gif), auto;
-
- -

우선 foo.cur의 로딩이 시도 되고, 만약 이 파일이 없거나 어떤 다른 이유로 파일이 부적합할 경우, bar.gif를 로드하게 되고 이것 마저 사용할 수 없게 되면, auto가 사용될 것입니다.

- -

커서 값에 대한 CSS3 syntax 지원은 Gecko 1.8beta3에 부가되었으며, 따라서 Firefox 1.5에서 사용할 수 있습니다. 이 기능은 커서 이미지의 바운더리에 부착시킬 커서의 핫스팟의 좌표를 지정할 수 있게 해줍니다. 만일 아무것도 지정되지 않을 경우, 핫스팟의 좌표는 이미지 파일 자체에서 (CUR 와 XBN 파일의 경우) 읽어 들이거나 이미지의 좌측 상단 코너로 지정됩니다. CSS3 문법의 예문은 다음과 같습니다:

- -
cursor: url(foo.png) 4 12, auto;
-
- -

첫번째 숫자는 x좌표이며, 두번째 숫자는 y좌표입니다. 이 예문은 이미지의 왼쪽 위 (0,0)로부터 (4, 12)의 위치의 픽셀을 핫스팟으로 지정할 것입니다.

- -

제약 사항

- -

Gecko가 지원하는 모든 이미지 포팻이 사용가능합니다. 즉, BMP, JPG, CUR, GIF 등의 이미지를 사용할 수 있습니다. 그러나, ANI는 지원되지 않습니다. animated GIF 이미지로 지정해도, 커서는 animated 커서가 되지는 않을 것입니다. 이런 문제점은 향후 릴리즈에서 제거될 것입니다.

- -

Gecko는 커서의 크기에 관해서 어떤 제약을 두고 있지는 않습니다만, 다른 운영체제나 플랫폼들과의 최대의 호환성을 유지하기 위해 커서 크기를 32x32로 제한할것을 권장합니다. 특히, 이보다 큰 커서는 윈도우 9x (95, 98, ME) 에서 작동하지 않을 것입니다.

- -

투명 커서는 XP보다 이전 윈도우 릴리즈에서는 지원되지 않으며, 이는 운영체제의 제약사항입니다. 투명기능은 모든 플랫폼에서 작동합니다.

- -

모질라의 윈도우, 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) }})

- -

다른 브라우저들과의 호환성

- -

마이크로소프트 인터넷 익스플로러(MSIE)도 cursor속성으로 URL 값을 지원합니다. 그러나, CUR 과 ANI 포맷만을 지원합니다.

- -

cursor속성 문법도 또한 제약이 덜한 관계로

- -
cursor: url(foo.cur);
-
- -

이나

- -
cursor: url(foo.cur), pointer, url(bar.cur), auto;
-
- -

와 같은 값도 MSIE에선 작동할 것입니다. 그러나 이런 값은 Gecko에선 작동하지 않을 것입니다. Gecko와의 호환성을 위해서 또 CSS규약에 따라, 항상 URL 리스트를 먼저 나열하시고, 정확히 하나의 키워드 값을 그 뒤에 사용하십시오.

- -

To-do

- -
-
To-do: document what MSIE does with CSS 3 hotspot locations
-
- -

Interwiki Language Links

- -

{{ languages( { "ja": "ja/Using_URL_values_for_the_cursor_property" } ) }}

diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html deleted file mode 100644 index 94759e21bf..0000000000 --- a/files/ko/web/css/getting_started/javascript/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: JavaScript -slug: Web/CSS/Getting_Started/JavaScript -tags: - - 'CSS:Getting_Started' -translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents -translation_of_original: Web/Guide/CSS/Getting_started/JavaScript ---- -

이 페이지는 입문서의 II 부입니다. II 부는 모질라에서의 CSS의 범위(scope)를 보여주는 예제들을 포함하고 있습니다.

-

II 부의 각 페이지는 CSS 가 다른 기술(technologies)들과 어떻게 상호작용하는지 설명하고 있습니다. 이 페이지들은 이들 다른 기술들을 사용하는 방법들을 가르치기위해서 디자인 되지는 않았습니다. 이 들 기술들을 자세히 배우려면 다른 입문서를 보세요.

-

대신 이 페이지들은 CSS의 다양한 사용법을 설명하기 위해서 디자인되었습니다. 이들 페이지들을 사용하려면, CSS에 대해 좀 알고 있어야만 합니다, 그러나, 다른 분야 기술들에대한 어떤 지식을 필요로하지는 않습니다.

-

정보: 자바스크립트(JavaScript)

-

자바스크립트(JavaScript)는 - - 프로그래밍 언어 - 입니다. 모질라 애플리케이션( 예를 들면, 모질라 브라우저) 사용할 때, 컴퓨터가 실행시키는 코드의 많은 부분이 자바스크립트로 쓰여져 있습니다.

-

자바스크립트는 스타일 시트와 상호작용하여, 문서 스타일을 동적으로 변화시키는 프로그램을 쓸 수 있게 해줍니다.

-

이렇게 하는데 세가지 방법이 있습니다:

-
    -
  • 문서의 스타일 시트 리스트와 함께 작동함으로써 — 예: 스타일 시트를 첨가, 제거, 또는 수정함으로써
    • -
  • 스타일 시트의 규칙(rules)와 함께 작동함으로써 — 예: 규칙을 첨가, 제거, 또는 수정 함으로써
    • -
  • DOM내의 각 엘리먼트(element)와 함께 작동함으로써 — 예: 문서 스타일을 문서의 스타일 시트와는 독립적으로 수정함으로써
    • -
- - - - - - - -
- More details
모질라에서의 자바스트립트에 대해 더 많은 정보를 원하시면, 이 위키(wiki)에 있는 JavaScript페이지를 보세요.
-

액션: 자바스크립트 예제(demonstration)

-

새로은 HTML 문서 doc5.html를 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Mozilla CSS Getting Started - JavaScript demonstration</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style5.css">
-<SCRIPT type="text/javascript" src="script5.js"></SCRIPT>
-</HEAD>
-
-<BODY>
-<H1>JavaScript sample</H1>
-
-<DIV id="square"></DIV>
-
-<BUTTON type="button" onclick="doDemo(this);">Click Me</BUTTON>
-
-</BODY>
-</HTML>
-
-
-

새로운 CSS 파일 style5.css을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:

-
- 
/*** JavaScript demonstration ***/
-#square {
-  width: 20em;
-  height: 20em;
-  border: 2px inset gray;
-  margin-bottom: 1em;
-  }
-
-button {
-  padding: .5em 2em;
-  }
-
-
-

새로운 텍스트 파일 script5.js을 만드세요. 아래의 내용물을 복사해서 붙여넣으세요:

-
- 
// 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")
-  }
-
-
-

브라우저에서 문서을 열고 버튼을 누르세요.

-

이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:

- - - - - - - -
- - - - - - -
-

JavaScript demonstration

-
-
-  
-
-
- 		- - - - - - -
-

JavaScript demonstration

-
-
-  
-
-
-
-

이 예제에서 주의할 점:

-
    -
  • HTML 문서는 전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.
    • -
  • 스크립트는 DOM안의 개개의 엘리먼트(element)와 함께 작동합니다. 스크립트는 사각형(square)의 스타일을 직접 수정합니다. 스크립트는 버튼의 스타일을 속성(attribute)을 변경함으로써 간접적으로 수정합니다.
    • -
  • 자바스크립트에서 document.getElementById("square") 는 그 기능상 CSS 선별자(selector) #square 와 유사합니다.
    • -
  • 자바스크립트에서 backgroundColor는 CSS 속성 background-color에 상응합니다.
    • -
  • 브라우저는 버튼이 사용할 수 없게 되었을 때 그 모습을 바꾸어 주는 button{{ mediawiki.external('disabled=\"true\"') }}에 대한 내장된 CSS 규칙을 가지고 있습니다.
    • -
- - - - - - - -
- Challenge
스크립트를 변경해서 사각형(square)이 색이 변할 때 오른쪽으로 20em 점프했다가 이후 되 돌아오게 만드세요.
-

그럼 다음은?

-

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

-

이 예제에서 HTML 문서가 단지 버튼 엘리먼트만이 스크립트를 사용함에도 불구하고 스크립트에 링크를 가지고 있었습니다. 모질라는 CSS를 확장해서 자바스크립트 코드를 (내용물과 다른 스타일 시트들도) 선택된 엘리먼트에 링크할 수 있게 합니다. 다음 페이지에서는 다음을 실행해 봅니다: XBL bindings

diff --git a/files/ko/web/css/getting_started/svg_graphics/index.html b/files/ko/web/css/getting_started/svg_graphics/index.html deleted file mode 100644 index d8ca001fb2..0000000000 --- a/files/ko/web/css/getting_started/svg_graphics/index.html +++ /dev/null @@ -1,195 +0,0 @@ ---- -title: SVG graphics -slug: Web/CSS/Getting_Started/SVG_graphics -tags: - - 'CSS:Getting_Started' -translation_of: Web/SVG/Tutorial/SVG_and_CSS ---- -

이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.

-

SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.

-

정보: SVG

-

- - SVG - (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.

-

움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.

-

다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.

-

또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 background 속성 값에 SVG값의 URL을 지정할 수 있습니다.

- - - - - - - -
- More details
이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다. -

Adobe에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.

-

모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 SVG 페이지를 보세요.

-
-

액션: SVG 예제

-

새로운 SVG 문서를 텍스트 파일 doc8.svg로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

-
- 
<?xml version="1.0" standalone="no"?>
-
-<?xml-stylesheet type="text/css" href="style8.css"?>
-
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
-  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-
-<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">
-
-<title>SVG demonstration</title>
-<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
-
-<defs>
-  <g id="segment" class="segment">
-    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
-    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
-    </g>
-  <g id="quadrant">
-    <use xlink:href="#segment"/>
-    <use xlink:href="#segment" transform="rotate(18)"/>
-    <use xlink:href="#segment" transform="rotate(36)"/>
-    <use xlink:href="#segment" transform="rotate(54)"/>
-    <use xlink:href="#segment" transform="rotate(72)"/>
-    </g>
-  <g id="petals">
-    <use xlink:href="#quadrant"/>
-    <use xlink:href="#quadrant" transform="rotate(90)"/>
-    <use xlink:href="#quadrant" transform="rotate(180)"/>
-    <use xlink:href="#quadrant" transform="rotate(270)"/>
-    </g>
-  <radialGradient id="fade" cx="0" cy="0" r="200"
-      gradientUnits="userSpaceOnUse">
-    <stop id="fade-stop-1" offset="33%"/>
-    <stop id="fade-stop-2" offset="95%"/>
-    </radialGradient>
-  </defs>
-
-<text id="heading" x="-280" y="-270">
-  SVG demonstration</text>
-<text  id="caption" x="-280" y="-250">
-  Move your mouse pointer over the flower.</text>
-
-<g id="flower">
-  <circle id="overlay" cx="0" cy="0" r="200"
-    stroke="none" fill="url(#fade)"/>
-  <use id="outer-petals" xlink:href="#petals"/>
-  <use id="inner-petals" xlink:href="#petals"
-    transform="rotate(9) scale(0.33)"/>
-  </g>
-
-</svg>
-
-
-

새로운 CSS 문서를 텍스트 파일 style8.css로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

-
- 
/*** 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 > .segment-fill {
-  fill: plum;
-  stroke: none;
-  }
-
-#outer-petals .segment:hover > .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 > .segment-fill {
-  fill: darkseagreen;
-  stroke: none;
-  }
-
-#inner-petals .segment:hover > .segment-edge {
-  stroke: green;
-  }
-
-
-

문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.

-

이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:

- - - - - - -
SVG demonstration
-

이 예제에서 주의할 점:

-
    -
  • SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.
    • -
  • SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.
    • -
- - - - - - - -
- Challenge
스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요
-

그럼 다음은?

-

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

-

이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: XML data

-

{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}

diff --git a/files/ko/web/css/index/index.html b/files/ko/web/css/index/index.html deleted file mode 100644 index 953130cd26..0000000000 --- a/files/ko/web/css/index/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: CSS documentation index -slug: Web/CSS/Index -tags: - - CSS - - Index - - MDN Meta -translation_of: Web/CSS/Index ---- -

{{Index("/ko/docs/Web/CSS")}}

diff --git a/files/ko/web/css/media_queries/using_media_queries/index.html b/files/ko/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..559b5805c6 --- /dev/null +++ b/files/ko/web/css/media_queries/using_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 +--- +
{{cssref}}
+ +

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

+ +

미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.

+ +
    +
  • CSS {{cssxref("@media")}}와 {{cssxref("@import")}} @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때.
    • +
  • {{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 HTML 요소에 media 특성을 사용해 특정 매체만 가리키게 할 때.
    • +
  • {{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} JavaScript 메서드를 사용해 미디어 상태를 판별하고 관측할 때.
    • +
+ +
+

참고: 이 페이지의 CSS는 시연용으로 @media를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.

+
+ +

구문

+ +

미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.

+ +

미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.

+ +
+

참고: {{HTMLElement("link")}}의 미디어 쿼리가 거짓을 반환하더라도 스타일시트는 다운로드됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.

+
+ +

미디어 유형

+ +

미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 not이나 only 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 all을 사용합니다.

+ +
+
all
+
모든 장치에 적합합니다.
+
print
+
인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
+ (인쇄 미디어 문서를 방문해 print 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)
+
screen
+
주로 화면이 대상입니다.
+
speech
+
음성 합성장치 대상입니다.
+
+ +
+

사용하지 않는 미디어 유형: CSS2.1과 Media Queries 3 모듈은 여러가지 추가 유형(tty, tv, projection, handheld, braille, embossed, aural)을 정의했으나 Media Queries 4에서 제거됐으므로 사용해선 안됩니다. aural은 유사한 유형인 speech로 대체됐습니다.

+
+ +

미디어 특성

+ +

미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이름요약참고
{{cssxref("@media/any-hover", "any-hover")}}사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?Media Queries Level 4에서 추가
{{cssxref("@media/any-pointer", "any-pointer")}}사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?Media Queries Level 4에서 추가
{{cssxref("@media/aspect-ratio", "aspect-ratio")}}뷰포트의 가로세로비
{{cssxref("@media/color", "color")}}출력 장치의 색상 채널별 비트 수, 흑백일 땐 0
{{cssxref("@media/color-gamut", "color-gamut")}}사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위Media Queries Level 4에서 추가
{{cssxref("@media/color-index", "color-index")}}출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0
{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}출력 장치의 가로세로비Media Queries Level 4에서 제거
{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}출력 장치 렌더링 표면의 높이Media Queries Level 4에서 제거
{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}출력 장치 렌더링 표면의 너비Media Queries Level 4에서 제거
{{cssxref("@media/display-mode", "display-mode")}}웹 앱 매니페스트의 display 항목이 정의한 애플리케이션의 표시 모드Web App Manifest 명세에서 정의
{{cssxref("@media/forced-colors", "forced-colors")}}사용자 에이전트가 색상 팔레트를 제한하는지 여부Media Queries Level 5에서 추가
{{cssxref("@media/grid", "grid")}}장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?
{{cssxref("@media/height", "height")}}뷰포트의 높이
{{cssxref("@media/hover", "hover")}}주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?Media Queries Level 4에서 제거
{{cssxref("@media/inverted-colors", "inverted-colors")}}사용자 에이전트나 운영 체제가 색상을 반전 중인가?Media Queries Level 5에서 추가
{{cssxref("@media/light-level", "light-level")}}주변 환경의 광도Media Queries Level 5에서 추가
{{cssxref("@media/monochrome", "monochrome")}}출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0
{{cssxref("@media/orientation", "orientation")}}뷰포트의 방향
{{cssxref("@media/overflow-block", "overflow-block")}}콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?Media Queries Level 4에서 추가
{{cssxref("@media/overflow-inline", "overflow-inline")}}콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?Media Queries Level 4에서 추가
{{cssxref("@media/pointer", "pointer")}}주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?Media Queries Level 4에서 추가
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}라이트/다크 색채 조합 중 사용자가 선호하는 것Media Queries Level 5에서 추가
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지Media Queries Level 5에서 추가
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}사용자가 줄어든 움직임을 선호함Media Queries Level 5에서 추가
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}사용자가 줄어든 투명도를 선호함.Media Queries Level 5에서 추가
{{cssxref("@media/resolution", "resolution")}}출력 장치의 픽셀 밀도
{{cssxref("@media/scan", "scan")}}출력 장치의 스캔 절차
{{cssxref("@media/scripting", "scripting")}}JavaScript 등 스크립트 사용 가능 여부 탐지Media Queries Level 5에서 추가
{{cssxref("@media/update-frequency", "update")}}출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기Media Queries Level 4에서 추가
{{cssxref("@media/width", "width")}}스크롤바를 포함한 뷰포트 너비
+ +

논리 연산자

+ +

not, and, only와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.

+ +

and

+ +

and 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.

+ +

not

+ +

not 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. not 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

+ +
+

참고: Level 3 모듈에서는 not 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.

+
+ +

only

+ +

only 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. only를 사용하지 않은 screen and (max-width: 500px) 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 screen으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. only 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

+ +

, (쉼표)

+ +

쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 or 연산자처럼 동작합니다.

+ +

미디어 유형 특정하기

+ +

미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.

+ +
@media print { ... }
+ +

다수의 장치를 특정할 수도 있습니다. 예컨대 아래 @media 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.

+ +
@media screen, print { ... }
+ +

미디어 유형 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.

+ +

미디어 기능 특정하기

+ +

미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.

+ +
@media (hover: hover) { ... }
+ +

많은 미디어 기능은 범위 기능으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.

+ +
@media (max-width: 12450px) { ... }
+ +

미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 0이 아닐 때 (Level 4부터는 0과 none이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.

+ +
@media (color) { ... }
+ +

어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

미디어 특성 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.

+ +

복잡한 미디어 쿼리 생성

+ +

때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : not, and, 그리고 only를 사용하면 됩니다.  더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.

+ +

앞서 예와 같이,  and 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 and 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 not 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. only 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.

+ +
+

Note: 대부분의 경우,  all 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 not 이나 only 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.

+
+ +

다수의 유형과 기능 조합하기

+ +

The and 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 screen 미디어유형에 미디어기능을 연결합니다:

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
+ +

다수의 쿼리 판별

+ +

쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.

+ +

쿼리의 뜻 반전하기

+ +

not 키워드는 미디어쿼리 전체의 의미를 반전시킵니다.  이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) not 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다.  not 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:

+ +
@media not all and (monochrome) { ... }
+
+ +

... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... 다음과 같이 되는 것이 아닙니다:

+ +
@media (not all) and (monochrome) { ... }
+ +

다른 예를 보자면, 다음의 미디어 쿼리는:

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

... 이렇게 평가됩니다:

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

구형 브라우저와의 호환성 향상하기

+ +

only 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. 신형브라우저에는 아무런 영향을 주지 않습니다.

+ +
@media only screen and (color) { ... }
+
+ +

Level 4의 구문 향상

+ +

미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a range context for writing such queries. 폭을 표현하기 위해 max- 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:

+ +
+

Note: 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만,  몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 @media browser compatibility table 를 참조해 주십시요. 

+
+ +
@media (max-width: 30em) { ... }
+ +

미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:

+ +
@media (width <= 30em) { ... }
+ +

min- 과 max- 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:

+ +
@media (min-width: 30em) and (max-width: 50em) { ... }
+ +

Level 4 구문에서는 이렇게 표현할 수 있습니다:

+ +
@media (30em <= width <= 50em ) { ... }
+
+ +

 Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 and, not, or.연산자를 결합할 수 있습니다. 

+ +

not으로 기능 부정

+ +

미디어기능에 not() 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 not(hover) 를 사용할 수 있습니다.

+ +
@media (not(hover)) { ... }
+ +

or로 다수의 기능 판별

+ +

or 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 true 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.

+ +
@media (not (color)) or (hover) { ... }
+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html deleted file mode 100644 index 9df3680b49..0000000000 --- a/files/ko/web/css/reference/property_template/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -title: Property Template -slug: Web/CSS/Reference/Property_Template -tags: - - CSS - - MDN Meta -translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template ---- -

{{MDNSidebar}}

- -
-

This is a template page for CSS property. Please use this as a raw template when you create a new CSS property page.
- Comment in italics are information about how to use part of the template

-
- -

{{CSSRef}}

- -

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.

- -

{{Non-standard_Header}}

- -

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.

- -

{{SeeCompatTable}}

- -

Description of the property. It must start by "The xyz 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.

- -
-

Note: Placeholder for any special messages.

-
- -

But don't add several notes. It should be really important, or be part of the description!

- -

Syntax

- -
/* Keyword values */
-property: value1;
-property: value2;
-
-/* <length> values */
-property: 12.8em;   /* A valid length */
-
-/* Global values */
-property: inherit;  /* <-- To remember those are a possible values */
-property: initial;
-property: unset;
-
- -

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.

- -

Values

- -

Each element of the formal syntax must be explained

- -
-
value_1
-
Is a keyword meaning...
-
value_2 {{Non-standard_Inline}} {{Experimental_Inline}}
-
Is a keyword meaning
-
- -

Formal syntax

- -

The formal syntax must be taken from the spec and added to the MDN data repository. It is an important tool to get precise syntax information for advanced users.

- -
{{CSSSyntax}}
- -

Examples

- -

Add this only if there is such an example. No dead link here.

- -

CSS

- -
elementName {
-  property: value;
-  thisis: "example";
-  dream: 10000000mm;
-  love: "danger";
-}
- -

HTML

- -
<elementName>foo bar</elementName>
- -

Result

- -

{{EmbedLiveSample("Examples")}}

- -

Specifications

- -

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.

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}No change from CSS 2.1
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Initial definition
- -

{{CSSInfo}}

- -

Browser compatibility

- -

(See Compatibility tables for more information)

- - - -

{{Compat("css.property.property-name")}}

- -

See also

- -
    -
  • Links of link of related properties: {{CSSxRef("example-property")}}
    • -
  • Links to article showing how to use the property in context: "Using … article"
    • -
  • Very good external links. Don't be afraid of external links, but they should be outstanding, and not only mention minor details.
    • -
diff --git a/files/ko/web/css/url()/index.html b/files/ko/web/css/url()/index.html new file mode 100644 index 0000000000..76904ccd73 --- /dev/null +++ b/files/ko/web/css/url()/index.html @@ -0,0 +1,80 @@ +--- +title: +slug: Web/CSS/url +tags: + - CSS + - CSS Data Type + - Layout + - Reference +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +
{{ CssRef() }}
+ +

<url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.

+ +
+

URI와 URL URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 위치를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

+ +

CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있습니다.

+
+ +

구문

+ +

<url> 자료형은 url() 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.

+ +
<a_css_property>: url("http://mysite.example.com/mycursor.png")
+<a_css_property>: url('http://mysite.example.com/mycursor.png')
+<a_css_property>: url(http://mysite.example.com/mycursor.png)
+
+ +
+

참고: Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 {{Bug(752230)}}을 참고하세요.

+
+ +

예제

+ +
.topbanner {
+  background: url("topbanner.png") #00D no-repeat fixed;
+}
+
+ +
ul {
+  list-style: square url(http://www.example.com/redball.png);
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}No significant change from CSS Level 2 (Revision 1).
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}No significant change from CSS Level 1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.url")}}

diff --git a/files/ko/web/css/url/index.html b/files/ko/web/css/url/index.html deleted file mode 100644 index 76904ccd73..0000000000 --- a/files/ko/web/css/url/index.html +++ /dev/null @@ -1,80 +0,0 @@ ---- -title: -slug: Web/CSS/url -tags: - - CSS - - CSS Data Type - - Layout - - Reference -translation_of: Web/CSS/url() -translation_of_original: Web/CSS/url ---- -
{{ CssRef() }}
- -

<url> CSS 자료형은 이미지나 글꼴 등 리소스를 가리키는 문자열을 나타냅니다. URL은 {{ Cssxref("background-image") }}, {{ Cssxref("cursor") }}, {{ cssxref("list-style") }} 등 다양한 속성에서 사용할 수 있습니다.

- -
-

URI와 URL URI와 URL은 다릅니다. URI는 단순히 리소스의 식별자입니다. URL은 URI의 종류 중 하나로, 리소스의 위치를 표현합니다. URI는 URL일 수도 있고, 리소스의 이름(URN)일 수도 있습니다.

- -

CSS Level 1의 url() 함수형 표기법은 순수 URL을 나타낼 때만 사용했고, CSS Level 2에서 범위가 늘어나 URL이나 URN 등 어떤 URI도 사용할 수 있도록 바뀌었습니다. 이로써 url()을 사용해 <uri> CSS 자료형을 표현할 수 있었는데, 이상한 방식인데다 실제 CSS에서 URN은 거의 사용하지 않았으므로 불필요하다고 생각할만한 점이었습니다. CSS3에서는 혼란을 잠재우기 위해 초기의 더 좁은 정의로 돌아갔기 때문에 이제 url()은 <url>만을 나타낼 수 있습니다.

-
- -

구문

- -

<url> 자료형은 url() 함수형 표기법을 사용해 설정합니다. 따옴표는 선택사항으로 작은따옴표, 큰따옴표 둘 다 사용할 수 있습니다. 상대 URL도 사용할 수 있으며, 웹페이지의 URL이 아닌 스타일시트의 URL을 기준으로 사용합니다.

- -
<a_css_property>: url("http://mysite.example.com/mycursor.png")
-<a_css_property>: url('http://mysite.example.com/mycursor.png')
-<a_css_property>: url(http://mysite.example.com/mycursor.png)
-
- -
-

참고: Firefox 15부터, 0x7e을 초과하는 제어 문자는 URL을 따옴표로 둘러싸야 유요합니다. 자세한 내용은 {{Bug(752230)}}을 참고하세요.

-
- -

예제

- -
.topbanner {
-  background: url("topbanner.png") #00D no-repeat fixed;
-}
-
- -
ul {
-  list-style: square url(http://www.example.com/redball.png);
-}
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('CSS3 Values', '#urls', '<url>') }}{{ Spec2('CSS3 Values') }}No significant change from CSS Level 2 (Revision 1).
{{ Specname('CSS2.1', 'syndata.html#uri', '<uri>') }}{{ Spec2('CSS2.1') }}No significant change from CSS Level 1.
{{ SpecName('CSS1', '#url', '<url>') }}{{ Spec2('CSS1') }}Initial definition.
- -

브라우저 호환성

- - - -

{{Compat("css.types.url")}}

diff --git a/files/ko/web/css/visual_formatting_model/index.html b/files/ko/web/css/visual_formatting_model/index.html new file mode 100644 index 0000000000..4b32d08a30 --- /dev/null +++ b/files/ko/web/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 +--- +
{{CSSRef}}
+ +

씨에스에스 시각적 서식 모델 (visual formatting model) 은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다.

+ +

시각적 서식 모델은 문서의 각 요소를 변환하여, 씨에스에스 상자 모델에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:

+ +
    +
  • 상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.
    • +
  • 상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.
    • +
  • 위치잡기 기법: 일반 대열 소속, 부동체, 또는 절대 위치잡기.
    • +
  • 트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.
    • +
  • {{glossary("viewport")}} 크기와 위치.
    • +
  • 컨테이너에 속한 이미지의 고유한 면적.
    • +
  • 다른 외부 정보
    • +
+ +

동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 대열이탈 (overflow) 했다고 말합니다..

+ +

상자 생성

+ +

상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.

+ +

블록수준 요소와 블록 상자

+ +

어떤 요소를 블록수준이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 block, list-item, 또는 table일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.

+ +

각각의 블록수준 상자는 블록 서식 상황에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 수석 블록수준 상자 (principal block-level box) 라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.

+ +

수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 위치잡기 기법에도 관여하고 있습니다.

+ +

venn_blocks.png블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. 블록 컨테이너 상자는 다른 블록수준 상자만을 포함하고 인라인 서식 상황을 생성하므로 인라인 상자 무리만을 포함합니다.

+ +

중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 비객원 (non-replaced) 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.

+ +

또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 블록 상자 (block boxes) 라고 부릅니다.

+ +

무명 블록 상자

+ +

경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다

+ +

씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어무명 상자라고 합니다.

+ +

선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 inherit 값을 갖고 상속할 수 없는 씨에스에스 속성은 initial 값을 가집니다.

+ +

상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.

+ +

예제

+ +

아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 display: block 속성을 갖고 있다면:

+ +
<div>약간의 인라인 텍스트 <p>뒤를 잇는 단락 하나</p> 그 뒤를 잇는 인라인 텍스트.</div>
+ +

두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(약간의 인라인 텍스트) 나머지 하나는 단락 이후 텍스트(그 뒤를 잇는 인라인 텍스트). 이는 다음과 같은 블록 구조를 구축합니다:

+ +

anonymous_block-level_boxes.png

+ +

결과는:

+ +
약간의 인라인 텍스트
+뒤를 잇는 단락 하나
+그 뒤를 잇는 인라인 텍스트.
+
+ +

{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(initial)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(initial)값을 가지며 투명합니다. 따라서 <div>의 배경이 보여집니다. 특정 배경색은 <p> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.

+ +

무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 무명 블록 상자로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.

+ +

중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.

+ +

예제

+ +

아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 display: inline 속성을 갖고 있고 {{ HTMLElement("span") }}는 display:block 속성을 갖고 있습니다:

+ +
<p>일부 <em>인라인</em> 텍스트 <span>그 뒤를 잇는 단락</span> 그 뒤를 잇는 추가 인라인 텍스트.</p>
+ +

두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(일부 인라인 텍스트) 하나와 그 뒤의 텍스트(그 뒤를 잇는 추가 인라인 텍스트) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:

+ +

+ +

이 것의 결과는:

+ +
약간의 인라인 텍스트
+뒤를 잇는 단락 하나
+그 뒤를 잇는 인라인 텍스트.
+
+ +

인라인수준 요소와 인라인 상자

+ +

어떤 요소가 인라인수준이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 inline, inline-block 또는 inline-table일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.

+ +

venn_inlines.png

+ +
+

이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조

+
+ +

인라인 수준 요소는 인라인 서식 상황에 참여하는 상자로 정의되는 인라인수준 상자를 생성합니다. 인라인 상자는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, display: inline 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 원자 인라인수준 상자 (atomic inline-level boxes) 라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 inline-block인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.

+ +
참고: 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 아니기 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.
+ +
원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다. +
+
<style>
+  span {
+    display:inline; /* default value*/
+  }
+</style>
+<div style="width:20em;">
+   스팬 요소에 포함된 택스트는 <span> 몇 개의 라인으로 분할 될 수
+   있습니다. 왜냐면 </span> 그것이 인라인 상자이기 때문입니다.
+</div>
+
+ +

이 것의 결과는:

+ +
The text in the span can be split into several lines as it is an inline box.
+ +
<style>
+  span {
+    display:inline-block;
+  }
+</style>
+<div style="width:20em;">
+   스팬 요소에 포함된 텍스트는 <span>몇 라인으로 분할 될 수
+   없 습니다. 왜냐면 </span> 그것이 인라인 블록이기 때문입니다.
+</div>
+
+ +

이 것의 결과는:

+ +
스팬 요소에 포함된 텍스트는 분할될 수 없습니다. 왜냐면 인라인 블록 상자이기 때문입니다.
+
+
+ +

무명 인라인 상자

+ +

블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 initial 값을 가집니다.

+ +

무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.

+ +
예제 TBD
+ +

다른 유형의 상자

+ +

라인 상자

+ +

라인 상자는 텍스트 라인을 표현하기 위해 인라인 서식 상황에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. 부동체가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.

+ +

이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.

+ +

내부진행 상자

+ +

display: run-in을 사용하도록 정의되는 내부진행 상자 (Run-in boxes) 는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.

+ +
참고: 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 씨에스에스 3 (CSS 3) 에선 다시 등장할 수도 있지만, 현재로선 실험 상태로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.
+ +

모델유인 상자

+ +

인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 콘텐츠 모델을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.

+ +
    +
  • 테이블 콘텐츠 모델은 테이블 래퍼 상자와 테이블 상자를 생성할 수 있을뿐만 아니라 캡션 상자같은 특정 상자도 생성할 수 있습니다.
    • +
  • The 다단 콘텐츠 모델 은 컨테이너 상자와 컨텐츠 사이에 열 상자 (column boxes) 를 생성할 수 있습니다.
    • +
  • 실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.
    • +
+ +

위치잡기 기법

+ +

상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.

+ +
    +
  • 일반 대열 (normal flow) - 하나씩 차례대로 상자를 위치시킵니다.
    • +
  • 부동체 (floats) 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.
    • +
  • 절대 위치잡기 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.
    • +
+ +

일반 대열

+ +

일반 대열 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 static 또는 relative 값으로 설정될 경우와 {{ cssxref("float") }}가 none으로 설정되면 발동됩니다.

+ +

예제

+ +
일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.
+
+일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.
+ +
+

일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:

+ +
    +
  • 정적 위치잡기에서는 {{ cssxref("position") }} 속성이 static 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.
    • +
  • 상대 위치잡기에서는 {{ cssxref("position") }} 속성이 relative 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.
    • +
+
+ +

부동체

+ +

부동 위치잡기 기법 (float positioning scheme) 에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.

+ +

상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 none 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 static이나 relative가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 left로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 right으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.

+ +

절대 위치잡기

+ +

절대 위치잡기 기법 (absolute positioning scheme) 에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 상위 컨테이너 블록 기준으로 비례해서 위치잡기합니다.

+ +

하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 absolute 또는 fixed로 설정하면 됩니다.

+ +

고정 위치잡기한 요소의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.

+ +

참조 항목

+ +
    +
  • {{css_key_concepts}}
    • +
diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" deleted file mode 100644 index 0e0e215006..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\246\254\354\212\244\355\212\270/index.html" +++ /dev/null @@ -1,245 +0,0 @@ ---- -title: 리스트 -slug: Web/CSS/시작하기/리스트 -translation_of: Learn/CSS/Styling_text/Styling_lists -translation_of_original: Web/Guide/CSS/Getting_started/Lists ---- -

{{ CSSTutorialTOC() }}

-
- 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
-

{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}CSS 시작하기 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지  설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.

-

정보: 리스트

-

지난 섹션에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.

-

CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.

-

리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.

-

CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.

-

무순서 리스트

-

무순서 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.

-

CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.

-
    -
  • disc
    • -
  • circle
    • -
  • square
    • -
-

다른 이미지도 URL로 설정 가능하다.

-
-
- 예제
-

아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.

- 
li.open {list-style: circle;}
-li.closed {list-style: disc;}
-
-

When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):

- 
<ul>
-  <li class="open">Lorem ipsum</li>
-  <li class="closed">Dolor sit</li>
-  <li class="closed">Amet consectetuer</li>
-  <li class="open">Magna aliquam</li>
-  <li class="closed">Autem veleum</li>
-</ul>
-
-

위 코드는 아래처럼 보여질 것이다.

- - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
-

순차 리스트

-

순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.

-

{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.

-
    -
  • decimal
    • -
  • lower-roman
    • -
  • upper-roman
    • -
  • lower-latin
    • -
  • upper-latin
    • -
-
-
- 예제
-

이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.

- 
ol.info {list-style: upper-latin;}
-
-

아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.

- - - - - - -
-
    -
  • Lorem ipsum
    • -
  • Dolor sit
    • -
  • Amet consectetuer
    • -
  • Magna aliquam
    • -
  • Autem veleum
    • -
-
-
-
-
- 좀더 자세히
-

{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.

-

만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.

-

브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.

-
-

카운터

-
-

참고:  일부 브라우저는 카운터를 지원하지 않는다. Quirks Mode site의 CSS 내용물과 브라우저 호환성 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 CSS 참조Reference의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.

-
-

리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.

-

순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.

-

element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.

-

카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.

-

카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 content속성을 사용하여라.(이전 페이지에서, Content사용에 대해 참고하라).

-

content 속성 값에 counter()카운터 이름과 함께 사용하라. 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 Ordered lists 섹션에 나온것과 같다.

-

보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.

-
-
- 예제
-

이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.

- 
h3.numbered {counter-reset: mynum;}
-
-

 

-

이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.

- 
p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;}
-
-

결과는 아래와 같다.

- - - - - - -
Heading
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
-
- 좀더 자세히
-

카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.

-

카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.

-

좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 Automatic counters and numbering 를 확인 하라.

-
-

액션: 화려한 리스트

-

새로이 doc2.html파일을 만들어라. 아래 코드를 복사하라.

-
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Sample document 2</title>
-    <link rel="stylesheet" href="style2.css">
-  </head>
-  <body>
-
-    <h3 id="oceans">The oceans</h3>
-    <ul>
-      <li>Arctic</li>
-      <li>Atlantic</li>
-      <li>Pacific</li>
-      <li>Indian</li>
-      <li>Southern</li>
-    </ul>
-
-    <h3 class="numbered">Numbered paragraphs</h3>
-    <p class="numbered">Lorem ipsum</p>
-    <p class="numbered">Dolor sit</p>
-    <p class="numbered">Amet consectetuer</p>
-    <p class="numbered">Magna aliquam</p>
-    <p class="numbered">Autem veleum</p>
-
-  </body>
-</html>
-
-

style2.css를 만들어 아래 내용을 복사하라.

-
/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
-  content: counter(mynum) ": ";
-  counter-increment: mynum;
-  font-weight: bold;
-}
-
-

배치와 주석이 맘에 들지 않으면 마음대로 변경하라.

-

브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)

- - - - - - -
-

The oceans

-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-

Numbered paragraphs

-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
- 도전
-

예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.

- - - - - - -
-

The oceans

-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

 

-

예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.

- - - - - - -
-

(A) The oceans

-

. . .

-

(B) Numbered paragraphs

-

. . .

-
-
-

정답 확인.

-

다음에는?

-

{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(boxes.xm).

diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\257\270\353\224\224\354\226\264/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\257\270\353\224\224\354\226\264/index.html" deleted file mode 100644 index 2c9fceaca0..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\257\270\353\224\224\354\226\264/index.html" +++ /dev/null @@ -1,346 +0,0 @@ ---- -title: 미디어 -slug: Web/CSS/시작하기/미디어 -translation_of: Web/Progressive_web_apps/Responsive/Media_types ---- -

{{ CSSTutorialTOC() }}

-
- 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
-

{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}CSS 시작하기 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.

-

정보 : 미디어

-

CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.

-

예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.

-

미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.

-
-
- 예제
-

웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.

-

마크업 언어에서는, 조정영역의 부모 element의 id가 nav-area이다. ({{ HTMLVersionInline(5) }}에서는 id 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)

-

Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.

- 
@media print {
-  #nav-area {display: none;}
-  }
-
-
-

일반적인 미디어 타입은 아래와 같다.

- - - - - - - - - - - - - - - - - - - -
screen컬러 컴퓨터 표시 장치
print출력 장치
projection프로젝트 출력 장치
all그외 모든 미디어 장치(기본 설정)
-
-
- 좀더 자세히
-

한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.

-

Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 LINK 태그에서 media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.

-

CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.

-

이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.

-

좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 Media를 참고하라.

-

{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 XML data를 참고하라.

-
-

출력

-

CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다

-

{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 @page:left와 @page:right로 각각의 여백을 개별로 설정 할 수 있다.

-

출력 매체를 위해 사용되는 단위는 인치 (in), 포인트(pt = 1/72 inch), 센티미터(cm)와 밀리미터(mm)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.

-

Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.

-
-
- 예제
-

아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.

- 
@page {margin: 1in;}
-
-

 

-

아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.

- 
h1 {page-break-before: always;}
-
-
-
-
- 좀더 자세히
-

CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 Paged media를 확인 하라.

-

CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.

-
-

사용자 인터페이스

-

CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.

-

사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.

-

단지 5가지 설렉터가 있을 뿐이다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
설렉터선택
E{{ cssxref(":hover") }}포인터가 E로 명시된 element위에 놓일 경우
E{{ cssxref(":focus") }}키보드 포커스를 가진 E element
E{{ cssxref(":active") }}사용자 현재 동작에 개임된 E element
E{{ cssxref(":link") }}최근에 방문하지 않은 URL을 가진 Hyperlink인 E element
E{{ cssxref(":visited") }}최근에 방문한 URL을 가진 Hyperlink인 E element
-
-

주의: :visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 Privacy and the :visited selector을 보라.

-
-

{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.

- - - - - - - - - - - - - - - - - - - - - - - -
설렉터선택
pointer링크임을 나타낼때
wait프로그램이 실행중이라 입력을 받지 못하는 상태일때
progress프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태
default기본 상태(보통 화살표 모양)
-

{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.

-

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 disabled attribute or the readonly attribute. Selectors can specify these attributes like any other attributes, by using square brackets: {{ mediawiki.external('disabled') }} or {{ mediawiki.external('readonly') }}.

-
-
- Example
-

These rules specify styles for a button that changes dynamically as the user interacts with it:

- 
.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;
-  }
-
-

 

-

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:

- - - - - - -
- - - - - - - - - - - - - - - - -
Click MeClick MeClick Me
 
disablednormalactive
-
-

 

-

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.

-
-
-
- More details
-

For more information about user interfaces in CSS, see User interface in the CSS Specification.

-

There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.

-
-

Action: Printing a document

-
    -
  1. Make a new HTML document, doc4.html. Copy and paste the content from here: - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Print sample</title>
-    <link rel="stylesheet" href="style4.css">
-  </head>
-  <body>
-    <h1>Section A</h11>
-    <p>This is the first section...</p>
-    <h1>Section B</h1>
-    <p>This is the second section...</p>
-    <div id="print-head">
-      Heading for paged media
-    </div>
-    <div id="print-foot">
-      Page:
-    </div>
-</body>
-</html>
-
    -
    2. -
  2. Make a new stylesheet, style4.css. Copy and paste the content from here: - 
    /*** 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 */
-
    -
    3. -
  3. View this document in your browser; it uses your browser's default style.
    4. -
  4. 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. - - - - - - - -
    - - - - - - -
    - - - - - - -
    -
    - Heading for paged media
    -
    - Section A
    -
    - This is the first section...
    -
    - Page: 1
    -
    -
    -     		- - - - - - -
    - - - - - - -
    -
    - Heading for paged media
    -
    - Section B
    -
    - This is the second section...
    -
    - Page: 2
    -
    -
    -
    -
    5. -
- - - - - - - -
- Challenges
Move the print-specific style rules to a separate CSS file. -

Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your style4.css stylesheet.

-

Make the headings turn blue when the mouse pointer is over them.

-
-

 See solutions to these challenges.

-

What next?

-

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

-

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: JavaScript

diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\260\260\354\271\230/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\260\260\354\271\230/index.html" deleted file mode 100644 index 86ea912bb7..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\353\260\260\354\271\230/index.html" +++ /dev/null @@ -1,370 +0,0 @@ ---- -title: 배치 -slug: Web/CSS/시작하기/배치 -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ CSSTutorialTOC() }}

- -
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
- -

{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}CSS 시작하기 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.

- -

정보: 배치

- -

Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.

- -

여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.

- -

여기서는 간단한 기술에 대해 연습 해 보자.

- -

Document 구조

- -

만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.

- -

document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.

- -
-
예제
- -

예제 Document에서 Numbered paragraphs가 표시된 단락은 컨테이너 구조가 아니다.

- -

따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.

- -

이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.

- -
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
- -

이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.

- -
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
- -

아래와 같은 형식으로 출력된다.

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
-
- -

크기 단위

- -

지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.

- -

다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다.  고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.

- -
-
예제
- -

아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.

- -

오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.

- -

브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.

- - - - - - - -
-
RESIZE ME PLEASE
-
-
- -
-
좀더 자세히
- -

다른 기기에서는 다른 단위가 적절할 수 있다.

- -

이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.

- -

변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 Values 부분을 참고 하라.

-
- -

텍스트 배치

- -

element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.

- -
-
{{ cssxref("text-align") }}
-
이 left, right, center, justify값로 할당하여 정열 할 수 있다.
-
{{ cssxref("text-indent") }}
-
들여쓰기를 위해 적당한 값을 명시하여 사용 한다.
-
- -

이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.

- -
-
예제
- -

헤더를 가운데 정렬하려면

- -
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
- -

결과는 아래와 같다.

- - - - - - - -
-

(A) The oceans

-
- -

HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.

-
- -

부유(Floats)

- -

{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.

- -

나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.

- -
-
예제
- -

예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.

- -

아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.

- -
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
- -

The result looks like:

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
-
- -

(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)

- -

위치잡기

- -

{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.

- -

더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.

- -
-
relative
-
element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.
-
fixed
-
고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.
-
absolute
-
부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 relative, fixed or absolute 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.
-
static
-
기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.
-
- -

이 위치 지정 속성과 함께(static은 제외) 방향(top, right, bottom, left), 높이(width), 넓이(height) 크기(size)도 같이 지정 해야 한다.

- -
-
예제
- -

아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.

- -
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
- -

예제 stylesheet에서 부모 element의 위치 속성을 relative로 하라. 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.

- -
#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;
-}
-
- -

결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.

- -
-

/

- -

\

-
- - - - - - - -
 
-
- -
-
좀더 자세히
- -

위치 지정에 대한 모든 내용은 CSS 사양서의 Visual formatting model과 Visual formatting model details의 두 챕터에 나와 있다.

- -

다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.

-
- -

액션: 배치 선언

- -
    -
  1. doc2.html와 style2.css를 수정 하여 위에 나온Document structure 와 Floats를 연습 해 보자.
    2. -
  2. Floats예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.
    3. -
- -
-
도전
- -

doc2.html의 아래쪽 </body> 바로 위에 아래 태그를 추가하라.

- -
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
- -

아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.

- - - - - - - -
Image:Yellow-pin.png
- -

Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.

- -

Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.

- -

브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.

- -
-
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -
-

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -

 

- -
Yellow map pin
-
-
-
- -

정답 확인.

- -

다음에는?

- -

{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 테이블의 스타일을 설정하는 방법에 대해 알아보자.

diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" deleted file mode 100644 index cc6b499241..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\203\201\354\236\220/index.html" +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: 상자 -slug: Web/CSS/시작하기/상자 -translation_of: Learn/CSS/Building_blocks -translation_of_original: Web/Guide/CSS/Getting_started/Boxes ---- -

{{ CSSTutorialTOC() }}

- -
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
- -

{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}CSS 시작하기 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.

- -

정보: 상자

- -

Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.

- -

가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

옅은 회색은 레이아웃의 구성을 보여준다.

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

브라우저에서는 위와 같이 보여준다.

-
- -

안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.

- -

색상입히기

- -

안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.

- - - - - - - - -
-
-

margin

- -

border

- -
-

padding

- -
-

element

-
-
-
- -

element는 녹색 배경색이다..

- 		-
-

 

- -

 

- -
-

 

- -
-

element

-
-
-
- -

브라우저에서 보면 위와 같다.

-
- -

경계

- -

라인이나 상자를 통해 element의 경계를 치장 할 수 있다.

- -

경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.

- -

스타일은 아래와 같다.

- - - - - - - - - - - - - - - - -
-
solid
- 		-
dotted
- 		-
dashed
- 		-
double
-
-
inset
- 		-
outset
- 		-
ridge
- 		-
groove
-
- -

스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.

- -

경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할  수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.

- -
-
예제
- -

아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.

- -
h3 {
-  border-top: 4px solid #7c7; /* mid green */
-  background-color: #efe;     /* pale green */
-  color: #050;                /* dark green */
-  }
-
- -

결과는 아래와 같다.

- - - - - - - -
-

Stylish heading

-
- -

아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.

- -
img {border: 2px solid #ccc;}
-
-
- -

결과는 아래와 같다.

- - - - - - - - -
Image:Image:Blue-rule.png
- -

내/외부 여백

- -

내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.

- -

바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.

- -

위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.

- -

넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.

- -

4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.

- -
-
예제
- -

아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.

- -

안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.

- -
p.remark {
-  border: 2px solid red;
-  padding: 4px;
-  margin-left: 24px;
-  }
-
- -

결과는 아래와 같다.

- - - - - - - -
-

Here is a normal paragraph.

- -

Here is a remark.

-
-
- -
-
좀더 자세히
- -

내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.

- -

브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.

- -

원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.

- -

내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 Box model를 참조하라.

-
- -

액션: 경계선 추가

- -

style2.css를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.

- -
h3 {border-top: 1px solid gray;}
-
- -

이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.

- -
li {
-  list-style: lower-roman;
-  margin-bottom: 8px;
-  }
-
- -

결과를 보기위해 브라우저에서 새로 읽어 보라.

- - - - - - - -
-

(A) The oceans

- -
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
- -

(B) Numbered paragraphs

- -

1: Lorem ipsum

- -

2: Dolor sit

- -

3: Amet consectetuer

- -

4: Magna aliquam

- -

5: Autem veleum

-
- -
-
도전
- -

예제 stylesheet에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.

- - - - - - - -
-

(A) The oceans

- -
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
- -

(B) Numbered paragraphs

- -

. . .

-
- -

 

- -

(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)

-
- -

결과 확인.

- -

다음에는?

- -

{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.

diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\242\205\354\206\215\352\263\274_\354\203\201\354\206\215/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\242\205\354\206\215\352\263\274_\354\203\201\354\206\215/index.html" deleted file mode 100644 index 5c58432ad2..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\354\242\205\354\206\215\352\263\274_\354\203\201\354\206\215/index.html" +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: 종속과 상속 -slug: Web/CSS/시작하기/종속과_상속 -translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance -translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance ---- -

{{ CSSTutorialTOC() }}

- -
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/14)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
- -

{{ previousPage("/en-US/docs/CSS/Getting_Started/How_CSS_works", "CSS 동작 원리")}}CSS 시작하기 안내서의 4번쨰 섹션; stylesheets가 종속적으로 동작하는 것과 element가 부모로 부터 style을 상속 받는 것에 대해 서술해 본다. 단순하게 document의 많은 Style중 어떤 Style을 사용할 것인지 한단계 상속만으로 하나의 Style을 stylesheet에 추가 할 수 있다.

- -

정보: 종속과 상속

- -

element의 최종 style은 다양한 상호작용을 통해 여러 장소에서 선언된 것을 사용할 수 있다. 이런 다양한 상호작용을 통해 CSS는 강력해 질 수 있으며, 반대로 디버그 하기에는 복잡하고 어려워 진다.

- -

종속의 세가지 주요 원천은 아래와 같다.

- -
    -
  • 마크업 언어를 위한 브라우저의 기본 style들
    • -
  • document를 읽는 사용자가 정의하는 styles
    • -
  • 만든이에 의해 Style은 Document와 연결된다. 다음 3곳에서 그 내용을 명시할 수 있다.These can be specified in three places: -
      -
    • 외부 파일: 이 안내서에서 주로 취급하는 Style에 대한 정의하는 법.
      • -
    • Document의 시작 부분에 정의하는 법: 선언한 Style은 선언된 Document의 페이지에서만 사용된다.
      • -
    • Document body의 특정 element에: 유지 보수가 가장 불편한 방법이며, 주로 테스트 용도로 쓴다.
      • -
    -
    • -
- -

사용자 Style은 브라우저의 기본 Style을 변경 할수 있다. document 만든이의 style 에서 더 수정 변경 될 수도 있다. 이 안내서에서는, 예제 Document에서 만든 자신만의 stylesheets를 만들 수 있다.

- -
-
예제
- -

이 문서를 브라우저로 보면, 일부 style은 브라우저의 기본 값을 사용한다.

- -

일부는 브라우저 셋팅에서 수정한 style이 저장된 파일에서 가져온다. 파이어 폭스 브라우저에서 "설정" 메뉴나, 브라우저 폴더에 있는 userContent.css 직접 수정하여 변경 가능하다.

- -

일부 style은 wiki server에 의해 Stylesheet에 정의된 값을 사용한다.

-
- -

예제 Document를 브라우저에서 열면, {{ HTMLElement("strong") }} elements로 지정된 문자는 다른 문자들 보다 두껍다. 이 Style은 기본 Style로 설정된 값에서 나온다.

- -

{{ HTMLElement("strong") }} elements의 색상은 red이다. 이 값은 예제 stylesheet에서 값을 가져 온다.

- -

{{ HTMLElement("strong") }} elements는 {{ HTMLElement("p") }} element의 자식 style이므로 대부분의 {{ HTMLElement("p") }} element의 style을 상속한다. 같은 방식으로, {{ HTMLElement("p") }} element는 {{ HTMLElement("body") }} element의 대부분의 style을 상속한다.

- -

종속적인 면에서 style은, 제작자(author)의 stylesheets가 사용자(reader) stylesheet보다도 브라우저의 기본 값보다도 우선 순위가 높다.

- -

상속적인 면에서는, 자식 노드의 자체 Style이 부모의 Style보다 우선 순위가 높다.

- -

우선 순위만 적용되는 것은 아니다. 페이지 아래부분에 좀더 자세히 설명 하도록 하자.

- -
-
좀더 자세히
- -

CSS는 !important 키워드를 써서 사용자(reader)가 document 제작자(author)의 style을 덮어 쓰는 방법도 제공힌다.

- -

이는 Document 제작자에게 사용자가 항상 제작자가 만든 내용을 그대로 본다는 것을 보장 하지 않는 다는 것을 의미한다.

- -

종속과 상속에 대해 자세히 알고 싶다면, CSS의 상세 사양서 중 속성 값 할당, 종속 및 상속 부분을 보라.

-
- -

액션: 상속 사용하기

- -
    -
  1. CSS 예제 파일을 편집해 보자.
    2. -
  2. 아래 라인을 추가 하라. 이미 문서 내에 존재하는 다른 내용이 있더라도 문서의 어디에 추가하든 상관 없다. 그러나, 맨 위에 추가 할수록 Document에 있는{{ HTMLElement("p") }} element가 {{ HTMLElement("strong") }} element의 부모가 되므로 지역적으로 영향을 미친다. - 
    p {color: blue; text-decoration: underline;}
-
    -
    3. -
  3. 이제 브라우저를 갱신하여 적용된 사항을 보라. 첫글자를 포함한 모든 문자들에 밑출이 그어져 있다. {{ HTMLElement("strong") }} elements는 부모{{ HTMLElement("p") }} element의 밑줄 속성을 상속 받았다.
    - -

    그러나 {{ HTMLElement("strong") }} elements는 여전히 붉은색이다. 붉은색 속성은 자체 속성이므로 부모인 {{ HTMLElement("p") }} element의 파란색 속성보다 우선한다.

    -
    4. -
- - -
- - - - - - - - -
Before
Cascading Style Sheets
- - - - - - - - -
After
Cascading Style Sheets
- -
-
도전
-Stylesheet를 변경하여 아래와 같이 붉은 글자만 밑줄 속성을 가지도록 수정 해 보라. - - - - - - - -
Cascading Style Sheets
- -
-
Possible solution
- -

Move the declaration for underlining from the rule for {{ HTMLElement("p") }} to the one for {{ HTMLElement("strong") }}. The resulting file looks like this:

- -
p {color: blue; }
-strong {color: orange; text-decoration: underline;}
-
- -

 

-Hide solution
-정답 확인
- -

다음에는?

- -

{{ nextPage("/en-US/docs/CSS/Getting_Started/Selectors", "설렉터")}}예제 Stylesheet의 <p>와 <strong> 태그를 원하는 style로 임으로 바꾸어 보라. 다음 장에는 설렉터를 사용하는 법에 대해 알아보자.

diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\214\354\235\264\353\270\224/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\214\354\235\264\353\270\224/index.html" deleted file mode 100644 index 17a57d49e9..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\214\354\235\264\353\270\224/index.html" +++ /dev/null @@ -1,475 +0,0 @@ ---- -title: 테이블 -slug: Web/CSS/시작하기/테이블 -translation_of: Learn/CSS/Building_blocks/Styling_tables -translation_of_original: Web/Guide/CSS/Getting_started/Tables ---- -

{{ CSSTutorialTOC() }}

-
- 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/20)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
-

{{ previousPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}CSS 시작하기 안내서 13번째; 여기서는 고급 설렉터에 대해 알아보고, 테이블을 사용하는 특별한 방법에 대해 확인 해 보자. 테이블이 포함된 예제 Document와 여기서 사용될 Stylesheet를 만들어 보자.

-

정보 : 테이블

-

테이블이란 정보를 사각 격자 형태로 배치하는 것을 말한다. 어떤 테이블은 복잡하게 구성 될 수 있으며 그 복잡한 테이블은 브라우저마나 다르게 보여줄 수도 있다.

-

Document를 디자인 할때, 테이블을 이용하여 내용들 간의 관개정보들을 표시 할 수 있다. 브라우저별로 테이블을 조금 다르게 표시하여도 정보를 보여주는데는 크게 문제 되지 않는다.

-

시각적인 표시의 사용목적으로 테이블을 사용하는 것은 좋지 않다. 테이블 보다는 이전 페이지에 소개한 배치(Layout)를 사용하는 것이 더 좋은 방법이다.

-

테이블 구조

-

테이블에서는 각 내용들이 각 테이블 블럭에 표시된다.

-

테이블의 같은 줄의 블럭은 하나의 행을 구성한다.

-

몇몇 테이블에서는 행은 하나의 그룹으로 구성된다. 테이블의 첫 행의 그룹은 머릿말(header)로 사용된다.  테이블의 마지막 행의 그룹은 꼬릿말(footer)로 사용되기도 한다. 테이블의 다른 행들은 본문(body)이 되고 한 덩어리의 그룹으로 간주된다.

-

아래에 있는 블럭은 하나의 열(column)로 구성되었고 제한적으로 사용되는 CSS테이블 이다.

-
-
- 예제
-

설렉터페이지 내의 연관관계로 본 설렉터의 테이블은 10개의 셀 블럭으로 구성된 5행 테이블이다.

-

첫번째 행은 머릿말이고 나머지 4개행은 본문이다. 꼬릿말은 없다.

-

열은 2개이다.

-
-

여기 안내서는 간단한 예제만을 다루고 있으며, 그 결과물은 쉽게 예상 가능한 수준이다. 간단한 테이블에서는 모든 셀블럭들은 하나의 행/열만을 차지한다. 셀이 하나 이상의 행이나 열을 차지하는 복잡한 테이블 구성 방법도 CSS를 통해 표현 가능하다. 그러나 이런 고급기술은 초급 안내서의 범주를 벗어난다.

-

경계

-

셀 블럭은 바깥 여백이 없다.

-

셀블럭은 바깥 여백과 들여쓰기 공간이 없다. 기본적으로 경계는 테이블 내용과의 같격을 {{ cssxref("border-spacing") }}속성으로 조절 가능하다. 테이블의 {{ cssxref("border-collapse") }}속성을 collapse로 설정하면 이 여백을 없앨 수 있다.

-
-
- 예제
-

여기 세가지 테이블을 확인 해 보자.

-

왼쪽 테이블은 0.5 em 경계 여백을 가지고 있다. 가운데는 경계 여백을 0으로 했으며, 오른쪽은 collapse속성을 사용 하였다.

- - - - - - - - -
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- 		- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
- 		- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-

캡션

-

캡션({{ HTMLElement("caption") }}) elemen전체 테이블에 적용되는 라벨이다. 기본적으로 테이블 위쪽에 표시된다.

-

캡션을 아래쪽에 두고 싶다면 {{ cssxref("caption-side") }}속성 값을 bottom으로 설정하라. 속성은 상속되므로 상속받은 테이블들에 선택적으로 속성값 재설정도 가능하다.

-

캡션의 텍스트 스타일을 조정 하려면 텍스트 속성을 사용하면 된다.

-
-
- 예제
-

이 테이블은 아래쪽에 캡션을 가지고 있다.

- 
#demo-table > caption {
-  caption-side: bottom;
-  font-style: italic;
-  text-align: right;
-}
-
- - - - - - -
- - - - - - - -
- Suits
- - - - - - - - - - - -
ClubsHearts
DiamondsSpades
-
-
-
-

빈 셀블럭

-

테이블 element에 {{ cssxref("empty-cells") }}: show로 설정 함으로 빈 셀블럭을 표시 할 수 있다.

-

empty-cells: hide로 설정하여 해당 셀블럭을 안보이도록 감출 수 있다. 셀의 부모 element가 배경색을 가지고 있다면 그 배경색이 보이게 될 것이다.

-
-
- 예제
-

이 테이블은 옅은 녹색 배경을 가지고 있으며, 셀은 진한 회색의 테두리와 회색 배경을 가지고 이다.

-

아래 테이블의 왼쪽은 빈 셀을 보여주고, 오른쪽은 셀감추기의 결과를 확인 할 수 있다.

- - - - - - - -
- - - - - - - - - - - -
 Hearts
DiamondsSpades
- 		- - - - - - - - - - - -
 Hearts
DiamondsSpades
-
-
-
-
- 자세히
-

CSS 사양서의 테이블에서 좀더 자세한 테이블에 대한 사항을 확인 하라.

-

여기에서 보다 더 자세한 테이블에 관한 내용을 확인 할 수 있지만, 브라우저별로 다르게 보여지는 복잡한 테이블에 대한 사항은 포함하고 있지 않다.

-
-

액션 : 테이블 꾸미기

-
    -
  1. doc3.html파일을 만들어 아래 긴 코드를 전부 복사해 넣고 저장하라. -
    - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <title>Sample document 3</title>
-    <link rel="stylesheet" href="style3.css">
-  </head>
-  <body>
-    <table id="demo-table">
-      <caption>Oceans</caption>
-      <thead>
-        <tr>
-          <th></th>
-          <th>Area</th>
-          <th>Mean depth</th>
-        </tr>
-        <tr>
-          <th></th>
-          <th>million km<sup>2</sup></th>
-          <th>m</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <th>Arctic</th>
-          <td>13,000</td>
-          <td>1,200</td>
-        </tr>
-        <tr>
-          <th>Atlantic</th>
-          <td>87,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Pacific</th>
-          <td>180,000</td>
-          <td>4,000</td>
-        </tr>
-        <tr>
-          <th>Indian</th>
-          <td>75,000</td>
-          <td>3,900</td>
-        </tr>
-        <tr>
-          <th>Southern</th>
-          <td>20,000</td>
-          <td>4,500</td>
-        </tr>
-      </tbody>
-      <tfoot>
-        <tr>
-          <th>Total</th>
-          <td>361,000</td>
-          <td></td>
-        </tr>
-        <tr>
-          <th>Mean</th>
-          <td>72,000</td>
-          <td>3,800</td>
-        </tr>
-      </tfoot>
-    </table>
-  </body>
-</html>
-
    -
    -
    2. -
  2. style3.css를 만들어 아래 긴 내용을 전부 복사해 넣어라. - 
    /*** Style for doc3.html (Tables) ***/
-
-#demo-table {
-  font: 100% sans-serif;
-  background-color: #efe;
-  border-collapse: collapse;
-  empty-cells: show;
-  border: 1px solid #7a7;
-}
-
-#demo-table > caption {
-  text-align: left;
-  font-weight: bold;
-  font-size: 200%;
-  border-bottom: .2em solid #4ca;
-  margin-bottom: .5em;
-}
-
-
-/* basic shared rules */
-#demo-table th,
-#demo-table td {
-  text-align: right;
-  padding-right: .5em;
-}
-
-#demo-table th {
-  font-weight: bold;
-  padding-left: .5em;
-}
-
-
-/* header */
-#demo-table > thead > tr:first-child > th {
-  text-align: center;
-  color: blue;
-}
-
-#demo-table > thead > tr + tr > th {
-  font-style: italic;
-  color: gray;
-}
-
-/* fix size of superscript */
-#demo-table sup {
-  font-size: 75%;
-}
-
-/* body */
-#demo-table td {
-  background-color: #cef;
-  padding:.5em .5em .5em 3em;
-}
-
-#demo-table tbody th:after {
-  content: ":";
-}
-
-
-/* footer */
-#demo-table tfoot {
-  font-weight: bold;
-}
-
-#demo-table tfoot th {
-  color: blue;
-}
-
-#demo-table tfoot th:after {
-  content: ":";
-}
-
-#demo-table > tfoot td {
-  background-color: #cee;
-}
-
-#demo-table > tfoot > tr:first-child td {
-  border-top: .2em solid #7a7;
-}
-
    -
    3. -
  3. 브라우저에서 열어서 아래와 같이 나오는 지 확인 하라. - - - - - - -
    -
    -

    Oceans

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
     AreaMean depth
     million km2m
    Arctic:13,0001,200
    Atlantic:87,0003,900
    Pacific:180,0004,000
    Indian:75,0003,900
    Southern:20,0004,500
    Total:361,000 
    Mean:72,0003,800
    -
    -
    -
    -
    4. -
  4. 화면에 보여지는 테이블과 stylesheet에 추가한 규칙과 비교하여 각 규칙이 어떻게 적용되었는지 확인해 보라. 원하는 방향으로 적용되지 않은 규칙이 있다면 해당 규칙을 주석 처리해서 저장한 후 브라우저로 다시 읽어 확인 해 보라. 아래는 위의 테이블에 관해 확인 해볼 사항이다. -
      -
    • 캡션은 테이블 바깥 경계에 표시된다.
      • -
    • 옵션에 최소 포인트 크기 세트가 있다면 km2에 있는 '2'처럼 어깨 글자에 적용 될 것이다.
      • -
    • 테이블은 세가지 빈 셀 블럭을 가지고 있다. 그중 둘은 테이블 배경색을 그대로 보여줄 수 있도록 설정되어 있다. 세번째 빈 셀블럭은 자체 색상과 위쪽에 경계선을 가지고 있다.
      • -
    • 콜론은 Stylesheet에서 추가 되었다.
      • -
    -
    5. -
-
-
- 도전
-

아래처럼 보이도록 Stylesheet를 바꿔 보라

- - - - - - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 AreaMean depth
 million km2m
Arctic:13,0001,200
Atlantic:87,0003,900
Pacific:180,0004,000
Indian:75,0003,900
Southern:20,0004,500
Total:361,000 
Mean:72,0003,800
-
-

Oceans

-
-
-

 

-
-

정답 확인

-

다음에는?

-

{{ nextPage("/en-US/docs/CSS/Getting_Started/Media", "미디어") }}이 장이 CSS의 속성과 그 변수에 대해 설명하는 마지막 장이다. 전체 속성 및 변수에 대해 확인 하려면 CSS 사양서의 Full property table를 보라.

-

다음에는 CSS의 Stylesheet구조와 목적에 대해 다시한번 살펴보자.

diff --git "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\215\354\212\244\355\212\270_\354\212\244\355\203\200\354\235\274/index.html" "b/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\215\354\212\244\355\212\270_\354\212\244\355\203\200\354\235\274/index.html" deleted file mode 100644 index 8866132472..0000000000 --- "a/files/ko/web/css/\354\213\234\354\236\221\355\225\230\352\270\260/\355\205\215\354\212\244\355\212\270_\354\212\244\355\203\200\354\235\274/index.html" +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: 텍스트 스타일 -slug: Web/CSS/시작하기/텍스트_스타일 -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

- -
중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
- -

{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}CSS 시작하기 안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.

- -

정보: 텍스트 스타일

- -

CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.

- -

여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면

- -
    -
  • 굵게, 기울기, 작은 대문자체
    • -
  • 크기
    • -
  • 라인 높이
    • -
  • 글씨체
    • -
- -
-
예제
- -
p {font: italic 75%/125% "Comic Sans MS", cursive;}
-
- -

위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.

- -

폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.

- -

글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.

- -

이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.

-
- -

글씨체

- -

보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.

- -

맨 마지막에는 기본 글씨체(serif, sans-serif, cursive, fantasy or monospace)를 추가 설정 해 주는 것이 좋다.

- -

만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.

- -

글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.

- -

글씨 크기

- -

브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.

- -

폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.

- -

14px (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.

- -

글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.

- -

줄 높이

- -

Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.

- -

줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.

- -

장식(Decoration)

- -

별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.

- -

다른 속성

- -

기울기 속성 {{ cssxref("font-style") }}: italic;
- 굵은 속성 {{ cssxref("font-weight") }}: bold;
- 작은 대문자 {{ cssxref("font-variant") }}: small-caps;

- -

위의 속성을 해제하려면 normal 또는 inherit로 설정하라.

- -
-
좀더 자세히
- -

텍스트 스타일은 다양한 방법으로 설정 가능하다.

- -

예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.

- -

복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 font 속성 사용을 피하라.

- -

글씨체에 관한 모든 속성을 보려면, CSS 사양서의 Fonts부분을 보라. 다양한 텍스트 효과를 위해서는 Text 부분을 참고 하라.

- -

사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 @font-face로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.

-
- -

액션: 글씨체 설정

- -

간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.

- -
    -
  1. 예제 CSS 편집 해 보자.
    2. -
  2. 예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다. - 
    body {font: 16px "Comic Sans MS", cursive;}
-
    -
    3. -
  3. 주석을 탭이나 공백과 함께 잘 배치해 보라.
    4. -
  4. 저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다. - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. 브라우저 메뉴에서 View > Text Size > Increase (or View > Zoom > Zoom In)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.
    6. -
- -
-
도전
- -

다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.

- - - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- -
-
Possible solution
- -

Add the following style declaration to the strong rule:

- -
  font: 200% serif;
-
-If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. - -

 

-Hide solution
-정답 확인
- -

다음에는?

- -

{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. 다음 장에서는 기본 색생과 다른 색상 표현 법에 대해 알아본다.

diff --git "a/files/ko/web/css/\354\235\270\354\240\221_\355\230\225\354\240\234_\354\204\240\355\203\235\354\236\220/index.html" "b/files/ko/web/css/\354\235\270\354\240\221_\355\230\225\354\240\234_\354\204\240\355\203\235\354\236\220/index.html" deleted file mode 100644 index 4446172ab3..0000000000 --- "a/files/ko/web/css/\354\235\270\354\240\221_\355\230\225\354\240\234_\354\204\240\355\203\235\354\236\220/index.html" +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: 인접 형제 결합자 -slug: Web/CSS/인접_형제_선택자 -tags: - - CSS - - Reference - - Selectors -translation_of: Web/CSS/Adjacent_sibling_combinator ---- -
{{CSSRef("Selectors")}}
- -

인접 형제 결합자(+)는 앞에서 지정한 요소의 바로 다음에 위치하는 형제 요소만 선택합니다.

- -
/* Paragraphs that come immediately after any image */
-img + p {
-  font-weight: bold;
-}
-
- -

구문

- -
former_element + target_element { style properties }
-
- -

예제

- -

CSS

- -
li:first-of-type + li {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li>One</li>
-  <li>Two!</li>
-  <li>Three</li>
-</ul>
- -

결과

- -

{{EmbedLiveSample("예제", "100%", 100)}}

- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Initial definition
- -

브라우저 호환성

- -

{{Compat("css.selectors.adjacent_sibling")}}

- -

같이 보기

- - diff --git a/files/ko/web/events/abort/index.html b/files/ko/web/events/abort/index.html deleted file mode 100644 index 2278a24c24..0000000000 --- a/files/ko/web/events/abort/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -tags: - - DOM - - Event - - Reference - - 레퍼런스 - - 이벤트 -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

abort 이벤트는 리소스의 로딩이 중단되었을 때, 발생합니다.

- -

개요

- -
-
스펙
-
DOM L3
-
인터페이스
-
유저 인터페이스에서 발생하면 UIEvent, 그렇지 않으면 Event.
-
버블
-
안됨
-
취소 가능
-
안됨
-
타겟
-
Element
-
디폴트 액션
-
없음
-
- -

속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성타입설명
target {{readonlyInline}}EventTarget이벤트 타겟 (DOM tree의 최상위 타겟).
type {{readonlyInline}}DOMString이벤트의 타입
bubbles {{readonlyInline}}Boolean이벤트가 버블링 되는지 안되는지
cancelable {{readonlyInline}}Boolean이벤트가 취소 가능한지 아닌지
view {{readonlyInline}}WindowProxydocument.defaultView (document의 window )
detail {{readonlyInline}}long (float)0.
diff --git a/files/ko/web/events/blur/index.html b/files/ko/web/events/blur/index.html deleted file mode 100644 index 3bbcc6acb0..0000000000 --- a/files/ko/web/events/blur/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: blur -slug: Web/Events/blur -translation_of: Web/API/Element/blur_event ---- -

blur 이벤트는 엘리먼트의 포커스가 해제되었을때 발생합니다. 이 이벤트와 focusout 이벤트의 가장 다른점은 focusout 은 이벤트 버블링이 발생합니다.

- -

General info

- -
-
Specification
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None.
-
- -

{{NoteStart}} 이 이벤트가 처리될때 {{domxref("Document.activeElement")}}의 값이 브라우저마다 다릅니다 ({{bug(452307)}}): IE10은 이 값을 포커스가 옮겨가는 엘리먼트에 추가하지만, 파이어폭스와 크롬은 도큐먼트의 body 에 추가합니다.{{NoteEnd}}

- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

이벤트 위임

- -

이 이벤트에 이벤트 위임을 적용하는 방법은 두가지가 있습니다 : 브라우저가 지원한다면 focusout 이벤트를 사용하거나,   addEventListener의 "useCapture" 파라미터를 true로 설정하세요:

- -

HTML Content

- -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
- -

JavaScript Content

- -
var form = document.getElementById("form");
-form.addEventListener("focus", function( event ) {
-  event.target.style.background = "pink";
-}, true);
-form.addEventListener("blur", function( event ) {
-  event.target.style.background = "";
-}, true);
- -

{{EmbedLiveSample('Event_delegation')}}

- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]612.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.053{{CompatVersionUnknown}}{{CompatUnknown}}10.012.15.1
-
- -

[1] Prior to Gecko 24 {{geckoRelease(24)}} the interface for this event was {{domxref("Event")}}, not {{domxref("FocusEvent")}}. See ({{bug(855741)}}).

- - - -
    -
  • {{event("focus")}}
    • -
  • {{event("blur")}}
    • -
  • {{event("focusin")}}
    • -
  • {{event("focusout")}}
    • -
diff --git a/files/ko/web/events/domcontentloaded/index.html b/files/ko/web/events/domcontentloaded/index.html deleted file mode 100644 index 24db56aa91..0000000000 --- a/files/ko/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -tags: - - Event - - Reference - - Web - - Window -translation_of: Web/API/Window/DOMContentLoaded_event ---- -
{{APIRef}}
- -

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.

- - - - - - - - - - - - - - - - - - - - -
확산예
취소 가능예 (although specified as a simple event that isn't cancelable)
인터페이스{{domxref("Event")}}
이벤트 처리기 속성아니오
- -

DOMContentLoaded의 원본 대상은 다 불러온 {{domxref("Document")}}입니다. You can listen for this event on the Window interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event.

- -

A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use load where DOMContentLoaded would be more appropriate.

- -

예제

- -

기본 용도

- -
window.addEventListener('DOMContentLoaded', (event) => {
-    console.log('DOM fully loaded and parsed');
-});
-
- -

사양

- - - - - - - - - - - - - - -
사양상태
{{SpecName('HTML WHATWG', 'indices.html#event-domcontentloaded')}}{{Spec2('HTML WHATWG')}}
- -

브라우저 호환성

- - - -

{{Compat("api.Window.DOMContentLoaded_event")}}

- -

같이 보기

- -
    -
  • Related events: {{domxref("Window/load_event", "load")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}
    • -
  • This event on {{domxref("Document")}} targets: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}
    • -
diff --git a/files/ko/web/events/load/index.html b/files/ko/web/events/load/index.html deleted file mode 100644 index baef50af25..0000000000 --- a/files/ko/web/events/load/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - Event - - 이벤트 -translation_of: Web/API/Window/load_event ---- -

load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

- -

 

- -

예제

- -

Window

- -
<script>
-  window.addEventListener("load", function(event) {
-    console.log("All resources finished loading!");
-  });
-</script>
- -

script 엘리먼트

- -
<script>
-  var script = document.createElement("script");
-  script.addEventListener("load", function(event) {
-    console.log("Script finished loading and executing");
-  });
-  script.src = "http://example.com/example.js";
-  script.async = true;
-  document.getElementsByTagName("script")[0].parentNode.appendChild(script);
-</script>
- -

일반 정보

- -
-
스펙
-
DOM L3
-
인터페이스
-
UIEvent
-
Bubbles
-
No
-
취소가능 여부
-
No
-
타겟
-
Window,Document,Element
-
기본 동작
-
None.
-
- -

속성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성타입설명
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{domxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{domxref("Boolean")}}Whether the event is cancellable or not.
view {{readonlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView", "document.defaultView")}} (window of the document)
detail {{readonlyInline}}long (float)0.
- -

스펙 정보

- - - - - - - - - - - - - - - - - - - -
스펙상태코멘트
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}} 
{{SpecName('HTML WHATWG', 'parsing.html#the-end:event-load', 'Load event')}}{{Spec2('HTML WHATWG')}} -

이것은 문서 로딩이 끝날때 수행되는 단계와 연결되는 섹션과 연결됩니다. 'load' 이벤트는 많은 엘리먼트들에서도 발생합니다. 그리고 스펙 문서에서는 많은 곳에서 "load이벤트를 지연할 수 있는" 것들을 언급한다는 것을 주의하십시오.

-
- -

관련 이벤트

- -
    -
  • {{event("DOMContentLoaded")}}
    • -
  • {{event("readystatechange")}}
    • -
  • {{event("load")}}
    • -
  • {{event("beforeunload")}}
    • -
  • {{event("unload")}}
    • -
diff --git a/files/ko/web/events/message/index.html b/files/ko/web/events/message/index.html deleted file mode 100644 index 1796b8ee0c..0000000000 --- a/files/ko/web/events/message/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: message -slug: Web/Events/message -translation_of: Web/API/BroadcastChannel/message_event ---- -

메시지 이벤트는 메시지가 수신되었음을 알리는 메시지, {{domxref("WebSocket")}}, {{domxref("RTCDataConnection")}} 또는 {{domxref("BroadcastChannel")}} 개체를 알려 줍니다.

- -

대상이 {{domxref("RTCDataConnection")}}, 인 경우 이 이벤트에 대한 이벤트 핸들러를 {{domxref("RTCDataConnection.onmessage")}}속성을 통해 추가할 수 있습니다.

- -

대상이 {{domxref("BroadcastChannel")}}인 경우, 이 이벤트에 대한 이벤트 핸들러를 {{domxref("BroadcastChannel.onmessage")}} 속성을 통해 추가할 수 있습니다.

- -

일반 정보

- -
-
인터페이스
-
- -
-
{{domxref("MessageEvent")}}
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
{{domxref("RTCDataChannelEvent")}}, {{domxref("WebSocket")}}, {{domxref("BroadcastChannel")}}
-
Default Action
-
None
-
- -

특성

- -

{{domxref("Event")}}가 진행되는 동안  {{domxref("MessageEvent")}} 이러한 속성을 구현합니다.

- -
-
data {{readOnlyInline}}
-
수신된 메시지를 포함하는 {{domxref("DOMString")}} 가 있습니다.
-
- -

방법

- -

{{domxref("Event")}}가 진행되는 동안  {{domxref("MessageEvent")}} 이러한 속성을 구현합니다.

- -

관련 자료

- -
    -
  • {{event("open")}}, {{event("close")}}.
    • -
- -

사양

- - - - - - - - - - - - - - - - - - - -
사양상황Comment
{{ SpecName('WebRTC 1.0', '#event-datachannel-message', 'message on RTCDataChannel') }}{{Spec2('WebRTC 1.0')}}{{domxref("RTCDataChannel")}} 를 {{domxref("EventTarget")}}로 추가하고 이 이벤트가 전송될 시기를 정의합니다.
{{SpecName('HTML WHATWG', '#', 'message on BroadcastChannel')}}{{Spec2('HTML WHATWG')}}{{domxref("RTCDataChannel")}} 를 {{domxref("EventTarget")}}로 추가하고 이 이벤트가 전송될 시기를 정의합니다.
- -

브라우저 호환성

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
on {{domxref("BroadcastChannel")}} {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
on {{domxref("BroadcastChannel")}}  {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

보기

- -
    -
  • WebRTC
    • -
  • BroadcastChannel API
    • -
  • WebSockets
    • -
diff --git a/files/ko/web/guide/api/vibration/vibration/index.html b/files/ko/web/guide/api/vibration/vibration/index.html deleted file mode 100644 index 16271ff248..0000000000 --- a/files/ko/web/guide/api/vibration/vibration/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Vibration API -slug: Web/Guide/API/Vibration/Vibration -translation_of: Web/API/Vibration_API ---- -
{{DefaultAPISidebar("Vibration API")}}
- -

요즘 나오는 대부분은 모바일 디바이스는 바이브레이션 하드웨어를 포함하고 있다. 소프트웨어 코드를 이용해 바이브레이션 하드웨어를 제어하면, 모바일 디바이스를 흔들리게 만들어 사용자에게 물리적인 피드백을 제공할 수 있다.

- -

Vibration API는 웹앱들이 기기에 장착된 물리 진동장치를 통해 진동을 전달할 수 있도록 해줍니다. 하지만 대응하는 진동 장치가 없는 기기일 경우 아무일도 일어나지 않습니다.

- -

Describing vibrations

- -

바이브레이션은 온오프 펄스들의 패턴이라고 할 수 있는데, 이 펄스들은 아마도 다양한 길이를 가질 것이다. 이 패턴은 아마 하나의 정수값으로 구성될 수 있는데 이 정수값은 진동이 일어날 밀리세컨드 수를 의미한다. 또한 이 패턴은 정수 배열이 될 수도 있는데 이것은 진동과 정지들의 패턴을 의미한다. 바이브레이션은 {{domxref("window.navigator.vibrate()")}} 라는 하나의 메소드로 제어된다.

- -

한번 진동시키기

- -

여러분은 다음과 같이 하나의 값 또는 하나의 값으로 구성된 배열을 명시함으로써 바이브레이션 하드웨어를 1회 진동시킬 수 있을 것이다.

- -
window.navigator.vibrate(200);
-window.navigator.vibrate([200]);
-
- -

이 두 가지 예제들은 디바이스를 200ms 동안 진동시킨다.

- -

패턴이 있는 진동 만들기

- -

배 열에 있는 값들은 다바이스가 진동해야 하는 시간과 진동하지 않아야 하는 시간을 번갈아가며 적어놓은 것이다. 배열에 있는 각 값은 하나의 정수로 변환된 후 차례대로 장치가 진동해야 하는 시간, 장치가 진동하지 않아야 하는 시간으로 해석된다. 다음 예제를 보자.

- -
window.navigator.vibrate([200, 100, 200]);
-
- -

이 예제는 장치를 200ms 동안 진동시킨 후 100ms 동안 멈추게 하고 그 후 다시 200ms 동안 장치를 진동시킨다.

- -

여 러분은 여러분이 원하는 진동/정지 페어를 명시할 수 있다. 그리고 배열 내에 홀수 또는 짝수개의 값들을 명시할 수도 있다. 이렇게 하는 이유는 각각의 진동 시간이 끝나면 디바이스의 진동은 자동적으로 멈추게 되므로 배열의 마지막 값이 정지에 해당하는 값이라면 그 값은 아무 의미가 없기 때문이다.

- -

이미 실행중인 진동 캔슬하기

- -

{{domxref("window.navigator.vibrate()")}} 메소드를 0값을 호출하거나, 빈 배열, 0값으로 구성된 배열로 호출하면 현재 진행중인 진동패턴은 취소될 것이다.

- -

지속적인 진동 내보내기

- -

Some basic setInterval and clearInterval action will allow you to create persistent vibration:

- -
var vibrateInterval;
-
-// Starts vibration at passed in level
-function startVibrate(duration) {
-    navigator.vibrate(duration);
-}
-
-// Stops vibration
-function stopVibrate() {
-    // Clear interval and stop persistent vibrating
-    if(vibrateInterval) clearInterval(vibrateInterval);
-    navigator.vibrate(0);
-}
-
-// Start persistent vibration at given duration and interval
-// Assumes a number value is given
-function startPeristentVibrate(duration, interval) {
-    vibrateInterval = setInterval(function() {
-        startVibrate(duration);
-    }, interval);
-}
- -

Of course the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval based on that number (with an additional delay, probably).

- -

Why use Vibration API?

- -

This API is clearly targeted toward mobile devices. The Vibration API would be good for alerts within mobile web applications, and would be especially awesome when used in games or media-heavy applications. Imagine watching a video on your mobile device, and during an explosion scene, your phone got a bit of a shake. Or playing Bomberman and feeling a gentle kick when a block explodes!

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Initial specification.
- -

브라우저 호환성

- -
{{Compat("api.Navigator.vibrate")}}
- -

같이 보기

- -
    -
  • {{domxref("window.navigator.vibrate()")}}
    • -
diff --git a/files/ko/web/guide/css/media_queries/index.html b/files/ko/web/guide/css/media_queries/index.html deleted file mode 100644 index 559b5805c6..0000000000 --- a/files/ko/web/guide/css/media_queries/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -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 ---- -
{{cssref}}
- -

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, {{glossary("viewport", "뷰포트")}} 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

- -

미디어 쿼리는 다음과 같은 상황에 사용할 수 있습니다.

- -
    -
  • CSS {{cssxref("@media")}}와 {{cssxref("@import")}} @규칙을 사용해 특정 조건에 따라 스타일을 적용할 때.
    • -
  • {{htmlelement("style")}}, {{htmlelement("link")}}, {{htmlelement("source")}}, 기타 다른 HTML 요소에 media 특성을 사용해 특정 매체만 가리키게 할 때.
    • -
  • {{domxref("Window.matchMedia()")}}와 {{domxref("MediaQueryList.addListener()")}} JavaScript 메서드를 사용해 미디어 상태를 판별하고 관측할 때.
    • -
- -
-

참고: 이 페이지의 CSS는 시연용으로 @media를 사용했지만, 기본적인 구문은 모든 미디어 쿼리가 동일합니다.

-
- -

구문

- -

미디어 쿼리는 선택 사항인 미디어 유형과, 자유로운 수의 미디어 특성 표현식으로 이루어집니다. 논리 연산자를 사용해 다수의 쿼리를 다양한 방법으로 결합할 수도 있습니다. 미디어 쿼리는 대소문자를 구분하지 않습니다.

- -

미디어 쿼리는 (유형을 지정했다면) 문서를 보여주는 미디어의 유형이 일치하고 모든 미디어 특성 표현식의 계산값이 참일 때 참으로 계산됩니다.

- -
-

참고: {{HTMLElement("link")}}의 미디어 쿼리가 거짓을 반환하더라도 스타일시트는 다운로드됩니다. 그렇지만 그 안의 내용은 쿼리가 참이 되어야 적용됩니다.

-
- -

미디어 유형

- -

미디어 유형은 장치의 일반적인 범주를 나타냅니다. 미디어 유형은 not이나 only 논리연산자를 사용할 때를 제외하면 선택사항이며 지정하지 않으면 all을 사용합니다.

- -
-
all
-
모든 장치에 적합합니다.
-
print
-
인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서입니다.
- (인쇄 미디어 문서를 방문해 print 형식에서 발생 가능한 서식 문제의 정보를 확인해주세요.)
-
screen
-
주로 화면이 대상입니다.
-
speech
-
음성 합성장치 대상입니다.
-
- -
-

사용하지 않는 미디어 유형: CSS2.1과 Media Queries 3 모듈은 여러가지 추가 유형(tty, tv, projection, handheld, braille, embossed, aural)을 정의했으나 Media Queries 4에서 제거됐으므로 사용해선 안됩니다. aural은 유사한 유형인 speech로 대체됐습니다.

-
- -

미디어 특성

- -

미디어 특성은 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 환경 등의 특징을 나타냅니다. 미디어 특성 표현식은 선택 사항이며 특성의 존재 여부와 값을 판별합니다. 각각의 미디어 특성 표현식은 괄호로 감싸야 합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
이름요약참고
{{cssxref("@media/any-hover", "any-hover")}}사용 가능한 입력 방식 중 하나로 사용자가 요소 위에 호버할 수 있는가?Media Queries Level 4에서 추가
{{cssxref("@media/any-pointer", "any-pointer")}}사용 가능한 입력 방식 중 하나가 포인팅 장치인가? 그렇다면 얼마나 정확한가?Media Queries Level 4에서 추가
{{cssxref("@media/aspect-ratio", "aspect-ratio")}}뷰포트의 가로세로비
{{cssxref("@media/color", "color")}}출력 장치의 색상 채널별 비트 수, 흑백일 땐 0
{{cssxref("@media/color-gamut", "color-gamut")}}사용자 에이전트와 출력 장치가 지원하는 색상의 대략적인 범위Media Queries Level 4에서 추가
{{cssxref("@media/color-index", "color-index")}}출력 장치의 색상 검색 테이블(LUT) 항목 수, 존재하지 않을 땐 0
{{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}} {{obsolete_inline}}출력 장치의 가로세로비Media Queries Level 4에서 제거
{{cssxref("@media/device-height", "device-height")}} {{obsolete_inline}}출력 장치 렌더링 표면의 높이Media Queries Level 4에서 제거
{{cssxref("@media/device-width", "device-width")}} {{obsolete_inline}}출력 장치 렌더링 표면의 너비Media Queries Level 4에서 제거
{{cssxref("@media/display-mode", "display-mode")}}웹 앱 매니페스트의 display 항목이 정의한 애플리케이션의 표시 모드Web App Manifest 명세에서 정의
{{cssxref("@media/forced-colors", "forced-colors")}}사용자 에이전트가 색상 팔레트를 제한하는지 여부Media Queries Level 5에서 추가
{{cssxref("@media/grid", "grid")}}장치가 그리드와 비트맵 스크린 중 어느 것을 사용하나?
{{cssxref("@media/height", "height")}}뷰포트의 높이
{{cssxref("@media/hover", "hover")}}주 입력 방식으로 사용자가 요소 위에 호버할 수 있는가?Media Queries Level 4에서 제거
{{cssxref("@media/inverted-colors", "inverted-colors")}}사용자 에이전트나 운영 체제가 색상을 반전 중인가?Media Queries Level 5에서 추가
{{cssxref("@media/light-level", "light-level")}}주변 환경의 광도Media Queries Level 5에서 추가
{{cssxref("@media/monochrome", "monochrome")}}출력 장치의, 모노크롬 프레임 버퍼의 픽셀 당 비트 수. 단색을 사용하지 않으면 0
{{cssxref("@media/orientation", "orientation")}}뷰포트의 방향
{{cssxref("@media/overflow-block", "overflow-block")}}콘텐츠가 블록 축 방향으로 뷰포트를 오버플로 할 경우 출력 장치가 어떻게 처리하는가?Media Queries Level 4에서 추가
{{cssxref("@media/overflow-inline", "overflow-inline")}}콘텐츠가 인라인 축 방향으로 뷰포트를 오버플로 할 경우 스크롤 가능한가?Media Queries Level 4에서 추가
{{cssxref("@media/pointer", "pointer")}}주 입력 방식이 포인팅 장치인가? 그렇다면 얼마나 정확한가?Media Queries Level 4에서 추가
{{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}}라이트/다크 색채 조합 중 사용자가 선호하는 것Media Queries Level 5에서 추가
{{cssxref("@media/prefers-contrast", "prefers-contrast")}}사용자가 시스템에 두 인접 색상 간의 고대비를 요청했는지 탐지Media Queries Level 5에서 추가
{{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}}사용자가 줄어든 움직임을 선호함Media Queries Level 5에서 추가
{{cssxref("@media/prefers-reduced-transparency", "prefers-reduced-transparency")}}사용자가 줄어든 투명도를 선호함.Media Queries Level 5에서 추가
{{cssxref("@media/resolution", "resolution")}}출력 장치의 픽셀 밀도
{{cssxref("@media/scan", "scan")}}출력 장치의 스캔 절차
{{cssxref("@media/scripting", "scripting")}}JavaScript 등 스크립트 사용 가능 여부 탐지Media Queries Level 5에서 추가
{{cssxref("@media/update-frequency", "update")}}출력 장치가 콘텐츠의 외형을 수정할 수 있는 주기Media Queries Level 4에서 추가
{{cssxref("@media/width", "width")}}스크롤바를 포함한 뷰포트 너비
- -

논리 연산자

- -

not, and, only와 같은 논리 연산자를 사용해 복잡한 쿼리를 조합할 수 있습니다. 여러 미디어 쿼리를 쉼표로 구분해서 하나의 규칙으로 만들 수도 있습니다.

- -

and

- -

and 연산자는 다수의 미디어 특성을 조합하여 하나의 미디어 쿼리를 만들 때 사용합니다. 쿼리가 참이려면 모든 구성 특성이 참을 반환해야 합니다. 미디어 특성과 미디어 유형을 같이 사용할 때도 쓰입니다.

- -

not

- -

not 연산자는 미디어 쿼리를 부정하여, 쿼리가 거짓일 때만 참을 반환합니다. 쉼표로 구분한 쿼리 목록 중 하나에서 사용한 경우 전체 쿼리가 아닌 해당하는 하나의 쿼리에만 적용됩니다. not 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

- -
-

참고: Level 3 모듈에서는 not 키워드를 사용해 단일 미디어 기능을 부정할 수 없으며 전체 쿼리만 부정 가능합니다.

-
- -

only

- -

only 연산자는 전체 쿼리가 일치할 때만 스타일을 적용할 때 사용하며 오래 된 브라우저가 스타일을 잘못 적용하지 못하도록 방지할 때 유용합니다. only를 사용하지 않은 screen and (max-width: 500px) 쿼리를 가정했을 때, 구형 브라우저는 쿼리를 단순히 screen으로만 읽고 뒷부분은 무시한 채 스타일을 적용해버립니다. only 연산자를 사용할 경우 반드시 미디어 유형도 지정해야 합니다.

- -

, (쉼표)

- -

쉼표는 다수의 미디어 쿼리를 하나의 규칙으로 조합할 때 사용합니다. 쉼표 목록 내의 쿼리 각각은 나머지와 별개로 취급하므로, 단 하나의 쿼리만 참을 반환해도 규칙 전체가 참이 됩니다. 즉 쉼표는 논리 or 연산자처럼 동작합니다.

- -

미디어 유형 특정하기

- -

미디어 유형은 주어진 장치의 일반적인 분류를 설명합니다. 비록 웹사이트는 보통 스크린을 염두에 놓고 디자인하지만, 프린터나 오디오 기반 스크린 리더처럼 특정 장치를 대상으로 하는 스타일을 만들고 싶을 때가 있을지도 모릅니다. 예를 들어 다음의 CSS는 프린터를 특정합니다.

- -
@media print { ... }
- -

다수의 장치를 특정할 수도 있습니다. 예컨대 아래 @media 규칙은 두 개의 미디어 쿼리를 사용해 스크린과 인쇄 장치 모두 특정합니다.

- -
@media screen, print { ... }
- -

미디어 유형 구획으로 올라가서 가능한 미디어 유형의 목록을 확인해보세요. 미디어 유형은 굉장히 넓은 범위에서 장치를 설명하기 때문에 적은 수만 존재합니다. 더 세부적인 특성을 특정하려면 미디어 기능을 사용하세요.

- -

미디어 기능 특정하기

- -

미디어 기능은 주어진 {{glossary("user agent", "사용자 에이전트")}}, 출력 장치, 주변 환경의 특징을 설명합니다. 예를 들어 어떤 스타일을 와이드스크린 모니터에만, 마우스를 사용하는 컴퓨터에만, 저광도 환경에서 사용 중인 장치에서만 적용할 수 있습니다. 다음의 예제는 사용자의 주 입력 방식(마우스 등)이 요소 위에 호버할 수 있으면 스타일을 적용합니다.

- -
@media (hover: hover) { ... }
- -

많은 미디어 기능은 범위 기능으로, "min-" 또는 "max-"를 앞에 붙여 각각 "최소 조건"과 "최대 조건" 제약을 나타낼 수 있습니다. 다음의 CSS는 브라우저의 {{glossary("viewport", "뷰포트")}} 너비가 12450px 이하인 경우에만 스타일을 적용합니다.

- -
@media (max-width: 12450px) { ... }
- -

미디어 기능 쿼리를 값 없이 생성할 경우 주어진 기능의 값이 0이 아닐 때 (Level 4부터는 0과 none이 아닐 때) 중첩 스타일을 적용합니다. 그러므로 다음 CSS는 흑백이 아닌 모든 장치에 해당합니다.

- -
@media (color) { ... }
- -

어떤 기능이 현재 브라우저가 가동 중인 장치에 적용되지 않으면, 해당 미디어 기능을 포함한 표현식은 항상 거짓입니다. 예를 들어, 음성 출력 전용 장치에 화면 가로세로비는 존재하지 않으므로 다음 쿼리에 중첩된 스타일은 절대 적용되지 않습니다.

- -
@media speech and (aspect-ratio: 11/5) { ... }
- -

미디어 특성 각각의 참고서 문서를 방문해 더 많은 예제를 확인하세요.

- -

복잡한 미디어 쿼리 생성

- -

때로는 사용자가 다수의 조건으로 구성된 쿼리를 생성하기 원할 수도 있습니다. 이때 논리연산자인 : not, and, 그리고 only를 사용하면 됩니다.  더 나아가 , 사용자는 복수의 미디어쿼리를 쉼표로 연결하여 리스트를 작성할수도 있습니다. 이렇게 함으로써 사용자는 다양한 상황에서 같은 스타일을 적용할 수 있습니다.

- -

앞서 예와 같이,  and 연산자를 사용하여 미디어유형과 미디어기능을 그룹지을 수 있습니다. 또한 and 를 사용하여 복수의 미디어 기능을 하나의 미디어 쿼리로 결합해낼수도 있습니다. 하지만 not 연산자는 미디어쿼리 자체를 부정시키는데, 근본적으로 원래의 의미를 반전시킵니다. only 연산자는 구형 브라우저가 스타일을 적용시키지 못하게 합니다.

- -
-

Note: 대부분의 경우,  all 미디어유형은 다른 유형이 특정되지 않았을 때 디폴트로 적용됩니다. 하지만, 사용자가 not 이나 only 연산자를 사용하면, 사용자는 반드시 미디어유형을 특정해야 합니다.

-
- -

다수의 유형과 기능 조합하기

- -

The and 연산자는 미디어기능과 미디어유형 혹은 다른 미디어 기능들과 연결해줍니다. 이 예에서는 두개의 미디어기능을 기기의 랜스케입(가로방향화면)방향으로 제한시키고 최소폭을 30 ems로 지정합니다:

- -
@media (min-width: 30em) and (orientation: landscape) { ... }
- -

화면에 달린 기기에만 스타일을 적용하는 것으로 한정시키기 위해, 사용자는 screen 미디어유형에 미디어기능을 연결합니다:

- -
@media screen and (min-width: 30em) and (orientation: landscape) { ... }
- -

다수의 쿼리 판별

- -

쉼표로 연결된 리스트를 작성하여 사용자의 기기가 다양한 미디어타입, 기능, 상태 어떤 것과 맞는 것이 있을 때 스타일을 적용하게 할 수 있습니다. 예를 들면, 다음의 룰은 사용자의 기기가 최소한 높이가 680px 이거나 화면이 세로로 긴 모드일 때 스타일이 적용됩니다:

- -
@media (min-height: 680px), screen and (orientation: portrait) { ... }
- -

위에 예에서 보면, 만일 사용자가 페이지높이가 800px인 프린터를 사용한다면, 첫번째 쿼리가 적용되기에 참 (true)값을 반환할 것입니다. 마찬가지로, 만일 사용자가 화면 높이가 480px인 스마트폰을 사용한다면 두번째 쿼리가 적용될 것이고, 미디어 문은 참값을 반환하게 됩니다.

- -

쿼리의 뜻 반전하기

- -

not 키워드는 미디어쿼리 전체의 의미를 반전시킵니다.  이 키워드는 적용된 미디어쿼리를 반전시킵니다. (즉, 쉼표로 연결된 미디어쿼리 리스트의 하나하나의 미디어쿼리에 적용되는 것이 아닙니다) not 키워드는 개별적인 기능의 쿼리를 부정하는데 사용할 수 없고, 오직 미디어쿼리 전체를 부정하는 데에만 사용됩니다.  not 연산자 키워드는 다음의 쿼리에서 보여지듯이 가장 나중에 적용됩니다:

- -
@media not all and (monochrome) { ... }
-
- -

... 그러므로 위의 쿼리는 다음과 같이 평가됩니다:

- -
@media not (all and (monochrome)) { ... }
-
- -

... 다음과 같이 되는 것이 아닙니다:

- -
@media (not all) and (monochrome) { ... }
- -

다른 예를 보자면, 다음의 미디어 쿼리는:

- -
@media not screen and (color), print and (color) { ... }
-
- -

... 이렇게 평가됩니다:

- -
@media (not (screen and (color))), print and (color) { ... }
- -

구형 브라우저와의 호환성 향상하기

- -

only 키워드는 미디어기능을 가진 미디어쿼리를 지원하지 않는 구형 브라우저가 주어진 스타일을 적용하지 못하게 합니다. 신형브라우저에는 아무런 영향을 주지 않습니다.

- -
@media only screen and (color) { ... }
-
- -

Level 4의 구문 향상

- -

미디어쿼리 Level 4 사양은 향상된 구문을 포함하는데 그를 통해 미디어쿼리가 '범위' 유형을 가진 기능을 사용할 수 있습니다. 예를 들면, 폭, 높이 처럼 말보다는 숫자에 관련된 것들입니다. Level 4 는 그러한 쿼리들을 작성하는데에 필요한 범위 구문을 제공합니다. 예를 들면, adds a range context for writing such queries. 폭을 표현하기 위해 max- 함수를 써서 사용자는 다음과 같이 쓸 수 있습니다:

- -
-

Note: 미디어쿼리 Level 4 사양에는 상당수의 최신 브라우저를 지원하지만,  몇몇 미디어기능들은 잘 지원되지 않습니다. 자세한 사항은 @media browser compatibility table 를 참조해 주십시요. 

-
- -
@media (max-width: 30em) { ... }
- -

미디어 쿼리 Level 4 에서는 다음과 같이 쓸 수 있습니다:

- -
@media (width <= 30em) { ... }
- -

min- 과 max- 를 사용하여 사용자가 두 값 사이에서 폭 값을 시험해 보고 싶은 상황이라면:

- -
@media (min-width: 30em) and (max-width: 50em) { ... }
- -

Level 4 구문에서는 이렇게 표현할 수 있습니다:

- -
@media (30em <= width <= 50em ) { ... }
-
- -

 Level 4 미디어쿼리는 또한 완전한 불리언 대수법을 사용하는 미디어쿼리들과 and, not, or.연산자를 결합할 수 있습니다. 

- -

not으로 기능 부정

- -

미디어기능에 not() 을 사용하면 쿼리에 있는 기능을 부정합니다. 예를 들어, hover를 할 수 없는 장치를 사용할 때 not(hover) 를 사용할 수 있습니다.

- -
@media (not(hover)) { ... }
- -

or로 다수의 기능 판별

- -

or 를 사용하면 다수의 기능 가운데 맞는 것이 하나라도 있는지를 테스트하여, 그중에 맞는 것이 하나라도 있으면 true 값을 반환하게 할 수 있습니다. 예를 들어, 다음에 보이는 쿼리에서는 흑백화면인지 혹은 hover가 가능한 지를 시험하고 있습니다.

- -
@media (not (color)) or (hover) { ... }
-
- -

같이 보기

- - diff --git a/files/ko/web/guide/css/visual_formatting_model/index.html b/files/ko/web/guide/css/visual_formatting_model/index.html deleted file mode 100644 index 4b32d08a30..0000000000 --- a/files/ko/web/guide/css/visual_formatting_model/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: 시각적 서식 모델 -slug: Web/Guide/CSS/Visual_formatting_model -tags: - - 씨에스에스 - - 씨에스에스 상자 모델 - - 참조 -translation_of: Web/CSS/Visual_formatting_model ---- -
{{CSSRef}}
- -

씨에스에스 시각적 서식 모델 (visual formatting model) 은 문서를 처리하여 그것을 시각적 매체에 표시하는 알고리즘입니다. 이 모델은 씨에스에스의 기본 개념입니다.

- -

시각적 서식 모델은 문서의 각 요소를 변환하여, 씨에스에스 상자 모델에 부합하는 0, 1 또는 여러 상자를 생성합니다. 각 상자의 조판은 다음과 같이 정의됩니다:

- -
    -
  • 상자의 면적: 정확히 정의하거나 제약을 받거나, 아에 정의하지 않습니다.
    • -
  • 상자의 유형: 인라인, 인라인수준, 원자 인라인수준, 블록.
    • -
  • 위치잡기 기법: 일반 대열 소속, 부동체, 또는 절대 위치잡기.
    • -
  • 트리 구조에 속한 다른 요소 무리: 그것의 자녀와 이웃.
    • -
  • {{glossary("viewport")}} 크기와 위치.
    • -
  • 컨테이너에 속한 이미지의 고유한 면적.
    • -
  • 다른 외부 정보
    • -
- -

동 모델은 컨테이너 블록의 모서리 기준과 비례하여 상자를 렌더링합니다. 보통, 하나의 상자는 자기 자손들을 위한 컨테이너 블록을 수립합니다. 그러나 상자는 자신의 상위 컨테이너 블록에 구속되지 않습니다. 상자 조판이 상위 컨테이너 블록을 벗어나면 대열이탈 (overflow) 했다고 말합니다..

- -

상자 생성

- -

상자 생성은 해당 문서의 요소로부터 상자를 생성하는 씨에스에스 시각적 서식 모델의 일부입니다. 생성된 상자는 다양한 유형으로, 이 유형은 시각적 서식이 이뤄지는 방식에 영향을 미칩니다. 생성되는 상자 유형은 {{ cssxref("display") }} 씨에스에스 속성의 값 여하에 따라 달라집니다.

- -

블록수준 요소와 블록 상자

- -

어떤 요소를 블록수준이라고 말하려면 계산된 {{ cssxref("display") }} 씨에스에스 속성값이 block, list-item, 또는 table일 때입니다. 블록수준 요소는 사실상 하나의 블록으로 취급되어 시각적으로 서식되며, 수직적으로 겹겹이 포개집니다.

- -

각각의 블록수준 상자는 블록 서식 상황에 참여합니다. 각 블록수준 요소는 적어도 하나의 블록수준 상자를 생성하며 이를 일컬어 수석 블록수준 상자 (principal block-level box) 라고 합니다. 일부 요소 무리는 목록항목 요소와 같이 목록 항목을 안내하는 글머리표와 서로 다른 타이포그래픽 요소를 처리하기 위한 상자를 추가적으로 생성하듯 더 많은 상자 무리를 생성할 수 있습니다. 대다수는 수석 블록 수준 상자만을 생성합니다.

- -

수석 블록수준 상자는 자손이 생성한 상자 및 콘텐츠를 포함합니다. 상자는 위치잡기 기법에도 관여하고 있습니다.

- -

venn_blocks.png블록 수준 상자는 역시 블록 콘테이너 상자도 될 수 있습니다. 블록 컨테이너 상자는 다른 블록수준 상자만을 포함하고 인라인 서식 상황을 생성하므로 인라인 상자 무리만을 포함합니다.

- -

중요한 점은 블록수준 상자와 블록 컨테이너 상자의 개념은 별개라는 점에 유의해야 한다는 것입니다. 첫째, 상자가 자기 부모와 형제자매과 함께하는 행동 방식을 설명합니다. 둘째, 상자가 자기 자손과는 어떻게 상호작용하는지 설명합니다. 테이블과 같은 블록 수준의 상자 무리는 블록 컨테이너 상자가 아닙니다. 마찬가지로 비객원 (non-replaced) 인라인 블록과 비객원 테이블 셀과 같은 일부 블록 컨테이너 상자는 블록 수준 상자가 아닙니다.

- -

또한, 블록 컨테이너 상자이며 동시에 블록수준 상자를 일컬어 우리는 블록 상자 (block boxes) 라고 부릅니다.

- -

무명 블록 상자

- -

경우에 따라서는 시각적 서식 알고리즘은 보충 상자를 추가할 알고리즘도 필요합니다

- -

씨에스에스 선택기는 해당 상자에 이름을 부여하거나 스타일링을 할 수 없기 때문에 이를 일컬어무명 상자라고 합니다.

- -

선택기는 무명 상자와 협력하지 않기 때문에 스타일시트를 통해 스타일링이 적용될 수 없습니다. 즉, 상속할 수 있는 모든 씨에스에스 속성은 inherit 값을 갖고 상속할 수 없는 씨에스에스 속성은 initial 값을 가집니다.

- -

상자를 포함하는 블록은 인라인수준 상자 또는 블록수준 상자만을 포함합니다. 그러나 문서는 두 가지 모두를 혼합해 포함합니다. 그 경우 무명 블록 상자는 인접 인라인수준 상자 주변에 생성됩니다.

- -

예제

- -

아래와 같은 ({{ HTMLElement("div") }}와 {{ HTMLElement("p") }}에 기본값 스타일링이 적용된 에이치티엠엘 코드가 display: block 속성을 갖고 있다면:

- -
<div>약간의 인라인 텍스트 <p>뒤를 잇는 단락 하나</p> 그 뒤를 잇는 인라인 텍스트.</div>
- -

두 개의 무명 블록 상자가 만들어집니다: 하나는 단락 이전 텍스트(약간의 인라인 텍스트) 나머지 하나는 단락 이후 텍스트(그 뒤를 잇는 인라인 텍스트). 이는 다음과 같은 블록 구조를 구축합니다:

- -

anonymous_block-level_boxes.png

- -

결과는:

- -
약간의 인라인 텍스트
-뒤를 잇는 단락 하나
-그 뒤를 잇는 인라인 텍스트.
-
- -

{{ HTMLElement("p") }} 요소인 상자와 달리 웹 개발자는 두 개의 무명 상자 스타일을 제어할 수 없습니다. 상속 가능한 속성은 (마치 텍스트의 색상을 정의하기 위한 {{ cssxref("color") }}와 같이) {{ HTMLElement("div") }}의 속성 값에서 값을 취하고, 나머지는 초기(initial)값으로 설정합니다. 예를 들어, 무명 상자는 {{ cssxref("background-color") }}를 갖지 않을 것이라, 항상 해당 속성의 초기(initial)값을 가지며 투명합니다. 따라서 <div>의 배경이 보여집니다. 특정 배경색은 <p> 상자에 적용할 수 있습니다. 마찬가지로 두 무명 상자는 항상 같은 색을 텍스트에 사용합니다.

- -

무명 블록 상자를 만드는 또 다른 사례는 하나 또는 여러 개의 블록 상자를 포함하는 인라인 상자입니다. 이 경우 블록 상자가 들어있는 상자는 두 개의 인라인 상자로 쪼개집니다. 하나는 블록 상자 이전에, 다른 하나는 뒤에 옵니다. 블록 상자 이전의 모든 인라인 상자는 무명 블록 상자로 포섭되며, 블록 상자 뒤에 있는 인라인 상자도 마찬가지입니다. 따라서 블록 상자는 인라인 요소를 포함하는 두 개의 무명 블록 상자의 형제가 됩니다.

- -

중간에 인라인 콘텐츠가 없이 여러 블록 상자가 있는 경우 무명 블록 상자가 해당 상자 집합 이전과 이후에 생성됩니다.

- -

예제

- -

아래 에이치티엠엘 코드를 보면 {{ HTMLElement("p") }}는 display: inline 속성을 갖고 있고 {{ HTMLElement("span") }}는 display:block 속성을 갖고 있습니다:

- -
<p>일부 <em>인라인</em> 텍스트 <span>그 뒤를 잇는 단락</span> 그 뒤를 잇는 추가 인라인 텍스트.</p>
- -

두 개의 무명 블록 상자가 생성되었습니다. 스팬 요소 이전의 텍스트(일부 인라인 텍스트) 하나와 그 뒤의 텍스트(그 뒤를 잇는 추가 인라인 텍스트) 하나가 있는데 이로써 다음과 같은 블록 구조가 주어졌습니다:

- -

- -

이 것의 결과는:

- -
약간의 인라인 텍스트
-뒤를 잇는 단락 하나
-그 뒤를 잇는 인라인 텍스트.
-
- -

인라인수준 요소와 인라인 상자

- -

어떤 요소가 인라인수준이라고 말하려면 자신의 계산된 {{ cssxref("display") }} 씨에스에스 속성 값이 inline, inline-block 또는 inline-table일 때입니다. 시각적으로는 이것은 콘텐츠로 이뤄진 블록 무리를 구성하지 않고 다른 인라인수준 콘텐츠와 함께 라인의 형태로 배포됩니다. 일반적으로 강조 또는 이미지와 같이 서로 다른 서식을 가진 단락의 콘텐츠는 인라인수준 요소로 만들어집니다.

- -

venn_inlines.png

- -
-

이 도식은 구식 용어를 사용합니다: 아래 참조 사항을 보세요. 그것 이외에도 오른쪽의 노란색 타원은 정의에 따르면 왼쪽의 타원형과 동일하거나 그보다 크기 때문에(수학적 상위집합일 수 있어) 그림이 틀렀습니다, 왜냐하면 해당 씨에스에스 스펙을 보면 "인라인수준 요소는 인라인 서식 상황에 참여하는 상자인 인라인수준 상자를 생성한다"라고 쓰여있기 때문입니다. 씨에스에스 2.2, 9.2.2장 참조

-
- -

인라인 수준 요소는 인라인 서식 상황에 참여하는 상자로 정의되는 인라인수준 상자를 생성합니다. 인라인 상자는 상자와 인라인 수준 상자 모두가 해당합니다. 다만 이들 상자의 콘텐츠는 인라인 서식 상황에 참여해야 합니다. 예를 들어, display: inline 속성을 가진 모든 비객원 상자의 경우가 인라인입니다. 인라인 서식 상황에 참여하지 않는 인라인수준 상자를 원자 인라인수준 상자 (atomic inline-level boxes) 라고 합니다. 객원 인라인수준 요소 또는 계산된 {{ cssxref("display") }} 값이 inline-block인 요소에 의해 생성된 해당 상자 무리는 인라인 상자에서 가능했던 것처럼 여러 상자로 쪼개지지 않습니다.

- -
참고: 처음에는 원자 인라인수준 상자를 원자 인라인 상자라고 불렀습니다. 그 명명은 불행한 일입니다. 인라인 상자가 아니기 때문입니다. 이건 씨에스에스 규격 상에 오타로 시정된 겁니다. 그렇긴 하지만, 문장 속에서 원자 인라인 상자를 마주칠 때마다 무리없이 원자 인라인 수준 상자로 읽을 수 있습니다. 그냥 이름 변경에 불과하기 때문입니다.
- -
원자 일라인 상자는 인라인 서식 상황 속에서 여러 라인에 걸쳐 분할될 수 없습니다. -
-
<style>
-  span {
-    display:inline; /* default value*/
-  }
-</style>
-<div style="width:20em;">
-   스팬 요소에 포함된 택스트는 <span> 몇 개의 라인으로 분할 될 수
-   있습니다. 왜냐면 </span> 그것이 인라인 상자이기 때문입니다.
-</div>
-
- -

이 것의 결과는:

- -
The text in the span can be split into several lines as it is an inline box.
- -
<style>
-  span {
-    display:inline-block;
-  }
-</style>
-<div style="width:20em;">
-   스팬 요소에 포함된 텍스트는 <span>몇 라인으로 분할 될 수
-   없 습니다. 왜냐면 </span> 그것이 인라인 블록이기 때문입니다.
-</div>
-
- -

이 것의 결과는:

- -
스팬 요소에 포함된 텍스트는 분할될 수 없습니다. 왜냐면 인라인 블록 상자이기 때문입니다.
-
-
- -

무명 인라인 상자

- -

블록상자처럼 씨에스에스 엔진에 의해 자동적으로 인라인상자가 생성되는 경우가 몇 개 있습니다. 이들 인라인 상자는 무명으로, 선택기가 이름을 특정할 수 없습니다. 무명 인라인 상자의 속성은, 상속 가능한 것은 상속된 값을, 그 이외는 initial 값을 가집니다.

- -

무명의 인라인 상자가 만들어지는 흔한 경우는 인라인 서식 상황을 만드는 블록상자의 직계 자식 요소로 파악되는 텍스트가 있는 경우입니다. 이 경우, 동 텍스트는 최대한 큰 무명 인라인 상자에 넣을 수 있습니다. 또한, 씨에스에스의 {{ cssxref("white-space") }} 속성으로 지정된 동작에 의해 제거되는 공백의 콘텐츠는 결국 공백이 될 것이기 때문에 무명 인라인 상자를 생성하지 않습니다.

- -
예제 TBD
- -

다른 유형의 상자

- -

라인 상자

- -

라인 상자는 텍스트 라인을 표현하기 위해 인라인 서식 상황에 의해 생성되는 상자입니다. 블록 상자 내부의 라인 상자는 상자의 한쪽 테두리로부터 반대측의 테두리까지 넓어집니다. 부동체가 있을 경우 라인 상자 구역은 왼쪽 부동체의 맨우측 테두리에서 시작해 우측 부동체의 맨좌측 테두리에서 끝납니다.

- -

이들 상자는 기술적인 것으로, 보통 웹 저술가가 이것에 대해 고민할 필요는 없습니다.

- -

내부진행 상자

- -

display: run-in을 사용하도록 정의되는 내부진행 상자 (Run-in boxes) 는 후속 상자의 유형 여하에 따라 블록 상자이거나 인라인 상자입니다. 그들은 가능할 경우 자신의 첫 단락 내부에 진행하는 글 제목을 생성하는 데 사용될 수 있습니다.

- -
참고: 내부진행 상자는 씨에스에스 2.1 규격에서 제외되었다. 상호운용 실현 가능성을 불충분하게 명시했기 때문입니다. 그들이 씨에스에스 3 (CSS 3) 에선 다시 등장할 수도 있지만, 현재로선 실험 상태로 간주합니다. 그들을 완성품에선 사용하지 말아야 합니다.
- -

모델유인 상자

- -

인라인 및 블록 서식 상황 외에도 씨에스에스는 요소에 적용할 수 있는 몇 가지 추가 콘텐츠 모델을 지정할 수 있습니다. 특정 레이아웃을 설명하는 데 사용되는 이러한 추가 모델은 추가 상자 유형을 정의할 수 있습니다.

- -
    -
  • 테이블 콘텐츠 모델은 테이블 래퍼 상자와 테이블 상자를 생성할 수 있을뿐만 아니라 캡션 상자같은 특정 상자도 생성할 수 있습니다.
    • -
  • The 다단 콘텐츠 모델 은 컨테이너 상자와 컨텐츠 사이에 열 상자 (column boxes) 를 생성할 수 있습니다.
    • -
  • 실험적인 격자 또는 가변상자 콘텐츠 모델, 또는 추가적인 유형의 상자를 생성할 수 있습니다.
    • -
- -

위치잡기 기법

- -

상자를 생성하고 나면 씨에스에스 엔진은 그것들을 조판에 위치시켜야 합니다. 그렇게 하려면 다음과 같은 알고리즘 중의 하나를 사용합니다.

- -
    -
  • 일반 대열 (normal flow) - 하나씩 차례대로 상자를 위치시킵니다.
    • -
  • 부동체 (floats) 알고리즘 - 일반 대열에서 상자를 빼내어 상위 컨테이너 상자 옆에 놓습니다.
    • -
  • 절대 위치잡기 기법 - 자신의 상위 컨테이너 요소가 수립한 절대 좌표 시스템 내부에 상자를 위치시킵니다. 절대적으로 위치잡기한 요소는 다른 요소를 덮을 수 있습니다.
    • -
- -

일반 대열

- -

일반 대열 속 상자 무리는 하나씩 차례대로 배치됩니다. 블록 서식 상황 속에서 그들은 수직으로 배치됩니다. 반면에 인라인 서식 상황 속에서 그들은 수평으로 배치됩니다. 일반 대열은 CSS {{ cssxref("position") }}이 static 또는 relative 값으로 설정될 경우와 {{ cssxref("float") }}가 none으로 설정되면 발동됩니다.

- -

예제

- -
일반 대열 속에서는 블록 서식 상황에 포함된 상자는 수직으로 하나씩 차례대로 배치됩니다.
-
-일반 대열 속에서는 인라인 서식 상황에 포함된 상자는 수평으로 하나씩 차례대로 배치됩니다.
- -
-

일반 대열에는 두 가지 하위 사례가 있습니다. 정적 위치잡기와 상대 위치잡기:

- -
    -
  • 정적 위치잡기에서는 {{ cssxref("position") }} 속성이 static 값일 경우에 발동됩니다. 상자 무리는 일반 대열 조판에 정의된 정확한 위치에 그려집니다.
    • -
  • 상대 위치잡기에서는 {{ cssxref("position") }} 속성이 relative 값일 경우 발동합니다. 상자는 씨에스에스 속성 무리인 {{ cssxref("top") }}, {{ cssxref("bottom") }}과 {{ cssxref("left") }}, {{ cssxref("right") }}에 의해 정의된 간격띄우기 값을 기준으로 그려집니다.
    • -
-
- -

부동체

- -

부동 위치잡기 기법 (float positioning scheme) 에서는 특정 상자(부동 상자 또는 단순 부동체라고 일컬음)를 현재 라인의 시작 또는 끝에 위치시킵니다. 이는 텍스트(그리고 더 일반적으로 일반 대열 내의 모든 것)은 부동 상자의 가장자리를 따라 대열을 맞추는 속성으로 귀결됩니다. 다만 씨에스에스 {{ cssxref("clear") }} 속성에 의해 다른 예기가 나올 경우는 예외입니다.

- -

상자에 대해 부동 위치잡기 기법을 선택하려면 해당 상대에 대해 씨에스에스 {{ cssxref("float") }} 속성을 none 이외의 값으로 설정하거나 {{ cssxref("position") }} 속성에 static이나 relative가 아닌 값으로 설정할 때 이뤄진다. 만일 {{ cssxref("float") }}가 left로 설정되면 부동체는 라인 상자의 시작 부분에 위치합니다. 만일 right으로 설정되면 동 부동체는 라인 상자의 끝에 위치합니다. 어떤 경우든 라인 상자는 부동체에 들어맞게 축소됩니다.

- -

절대 위치잡기

- -

절대 위치잡기 기법 (absolute positioning scheme) 에 포함된 상자는 대열에서 제거되어 대열과는 어떤 상호작용도 하지 않습니다. 그들은 {{ cssxref("top") }}과 {{ cssxref("bottom") }}, {{ cssxref("left") }}와 {{ cssxref("right") }}를 사용해서 상위 컨테이너 블록 기준으로 비례해서 위치잡기합니다.

- -

하나의 요소를 절대 위치잡기하려면 {{ cssxref("position") }}이 absolute 또는 fixed로 설정하면 됩니다.

- -

고정 위치잡기한 요소의 경우 상위 컨테이너 블록이 뷰포트입니다. 동 요소의 위치는 뷰포트 내부에서 절대적 위치가 됩니다. 스크롤링은 동 요소의 위치를 변경시키지 않습니다.

- -

참조 항목

- -
    -
  • {{css_key_concepts}}
    • -
diff --git a/files/ko/web/guide/dom/index.html b/files/ko/web/guide/dom/index.html deleted file mode 100644 index fc26bc0bee..0000000000 --- a/files/ko/web/guide/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

-

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (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.

-

The DOM is most often used in conjunction with JavaScript. 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 any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) 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 W3C FAQ). 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.

-

Even more important is the fact that the user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

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 deleted file mode 100644 index d7f561a95c..0000000000 --- a/files/ko/web/guide/dom/using_full_screen_mode/index.html +++ /dev/null @@ -1,198 +0,0 @@ ---- -title: Using fullscreen mode -slug: Web/Guide/DOM/Using_full_screen_mode -translation_of: Web/API/Fullscreen_API ---- -
{{DefaultAPISidebar("Fullscreen API")}}
- -

Fullscreen API 는 특정 요소{{DOMxRef("Element")}}(와 해당 자손들을)를 full-screen mode로 표시하고, 더 이상 필요하지 않으면 full-screen mode를 종료하는 메서드를 추가합니다. 이렇게 하면 사용자의 전체 화면을 사용하여, 온라인 게임과 같은 원하는 내용을 표시할 수 있습니다. full-screen mode가 종료될 때까지 화면에서 브라우저의 모든 유저 인터페이스 요소와 기타 응용 프로그램을 제거할 수 있습니다.

- -

API 사용 방법에 대한 자세한 내용은 Guide to the Fullscreen API 문서를 참조하세요.

- -
-

주의: 이 API에 대한 지원은 여러 브라우저에서 이루어지며, 다양한 업체의 접두사(prefix)가 필요하거나, 최신 사양을 구현하지 않는 경우가 많습니다. 이 API 지원에 대한 자세한 내용은 아래에 있는 {{anch("Browser compatibility")}} 섹션을 참조하세요. Fullscreen API를 지원하지 않는 업체의 경우, Fscreen 과 같은 라이브러리를 사용할 수 있습니다.

-
- -

Interfaces

- -

Fullscreen API 에는 자체 인터페이스가 없습니다. 대신에, full-screen 기능을 제공하는데 필요한 메서드, 속성(property), 이벤트 핸들러를 추가하기 위해, 다음 섹션에 나열된 것과 같은 몇 가지 다른 인터페이스를 추가합니다.

- -

Methods

- -

Fullscreen API 는 {{DOMxRef("Document")}}, {{DOMxRef("Element")}} 인터페이스에 메서드를 추가하여 full-screen mode를 설정하거나 해제할 수 있습니다.

- -

Methods on the Document interface

- -
-
{{DOMxRef("Document.exitFullscreen()")}}
-
{{Glossary("user agent")}} 가 full-screen mode에서 창 모드로 다시 전환되도록 요청합니다. full-screen mode가 완전히 종료되면 {{jsxref("Promise")}} resolved 를 반환합니다.
-
- -

Methods on the Element interface

- -
-
{{DOMxRef("Element.requestFullscreen()")}}
-
유저 에이전트가 지정한 요소(그리고 그 자손들까지)를 full-screen mode로 설정하고, 브라우저의 모든 UI 요소와 다른 모든 애플리케이션을 화면에서 제거하도록 요구합니다. full-screen mode가 활성화되면 {{jsxref("Promise")}} resolved를 반환합니다.
-
- -

Properties

- -

{{DOMxRef("Document")}} 인터페이스는 full-screen mode가 지원되고 사용 가능한지, full-screen mode가 현재 활성화 되어있는지, 어떤 요소가 스크린을 사용하고 있는지 확인하는데 사용할 수 있는 속성(property)을 제공합니다.

- -
-
{{DOMxRef("DocumentOrShadowRoot.fullscreenElement")}}
-
fullscreenElement 속성은 DOM(혹은 shadow DOM)에서 현재 full-screen mode로 표시되는 요소{{DOMxRef("Element")}}를 알려줍니다. 이것이 null인 경우, document는 full-screen mode가 아닙니다.
-
{{DOMxRef("Document.fullscreenEnabled")}}
-
fullscreenEnabled 속성(property)은 full-screen mode를 사용할 수 있는지 여부를 알려줍니다. 이유가 어떻든(예를들어, "fullscreen" 기능이 허락되지 않거나, full-screen mode가 지원되지 않는 경우) full-screen mode를 사용할 수 없으면 false 입니다.
-
- -

Event handlers

- -

Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다. 이러한 이벤트에 대한 이벤트 핸들러는 {{DOMxRef("Document")}} 와{{DOMxRef("Element")}} 인터페이스 에서 사용할 수 있습니다.

- -
-

주의: 이러한 이벤트 핸들러 속성(property)은 HTML 컨텐트 속성(attribute)으로 사용할 수 없습니다. 즉, HTML 컨텐트에서 {{Event("fullscreenchange")}} 및 {{Event("fullscreenerror")}} 이벤트를 지정할 수 없습니다. 자바스크립트 코드로 추가해야만 합니다.

-
- -

Event handlers on documents

- -
-
{{DOMxRef("Document.onfullscreenchange")}}
-
문서(document)가 full-screen mode로 전환되거나 full-screen mode를 종료할 때 {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenchange")}} 이벤트에 대한 이벤트 핸들러 입니다. 이 핸들러는 오직 전체 문서가 full-screen mode로 표시될 때만 호출됩니다.
-
{{DOMxRef("Document.onfullscreenerror")}}
-
전체 문서에 대해 full-screen mode를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면, {{DOMxRef("Document")}}로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.
-
- -

Event handlers on elements

- -
-
{{DOMxRef("Element.onfullscreenchange")}}
-
{{Event("fullscreenchange")}} 이벤트가 요소(element)로 전송되면, 요소가 full-screen mode로 배치되거나 제거되었음을 나타내는 이벤트 핸들러입니다.
-
{{DOMxRef("Element.onfullscreenerror")}}
-
full-screen mode 를 사용하거나, 사용하지 않도록 설정하는 동안 오류가 발생하면 요소로 보내지는 {{Event("fullscreenerror")}} 이벤트의 이벤트 핸들러입니다.
-
- -

Obsolete properties

- -
-
{{DOMxRef("Document.fullscreen")}} {{Deprecated_Inline}}
-
문서에 현재 full-screen mode로 표시되는 요소가 있는 경우 true, 그렇지 않으면 false의 Boolean 값입니다. -
주의: 대신에 {{DOMxRef("Document")}} 나 {{DOMxRef("ShadowRoot")}} 에서 {{DOMxRef("Document.fullscreenElement", "fullscreenElement")}} 속성(property)을 사용하세요. 그것이 null이 아닌 경우 {{DOMxRef("Element")}}가 full-screen mode로 표시됩니다.
-
-
- -

Events

- -

Fullscreen API는 full-screen mode를 켜고 끌 때 혹은, full-screen mode와 window mode간에 변경하는 과정에서 오류가 발생하는 것을 감지하는데 사용할 수 있는 두 가지 이벤트를 정의합니다.

- -
-
{{Event("fullscreenchange")}}
-
full-screen mode를 사용하거나, 사용하지 않도록 전환할 때 {{DOMxRef("Document")}} 혹은{{DOMxRef("Element")}} 로 보냅니다.
-
{{Event("fullscreenerror")}}
-
full-screen mode를 사용하거나, 사용하지 않도록 전환하려고 시도하는 중에 오류가 발생하면 Document 또는 Element 로 보냅니다.
-
- -

Dictionaries

- -
-
{{DOMxRef("FullscreenOptions")}}
-
{{DOMxRef("Element.requestFullscreen", "requestFullscreen()")}}을 호출할 때 지정할 수 있는 옵션 설정을 제공합니다.
-
- -

Controlling access

- -

Feature Policy을 사용하여 full-screen mode의 유효성을 제어할 수 있습니다. full-screen mode는 "fullscreen"으로 식별되고, 기본 허용 목록 값은 "self" 입니다. 이는 최상위(top-level) 문서 컨텍스트에서 full-screen mode가 허용된다는 것을 의미하며, 최상위(top-most) 문서와 같은 출처에서 로드 된 중첩 된 컨텍스트에도 적용됩니다.

- -

기능 정책을 사용하여 API에 대한 액세스를 제어하는 자세한 내용은 Using Feature Policy을 참조하세요.

- -

Usage notes

- -

사용자는 ESC (혹은 F11) 키를 누르기만하면 사이트 또는 앱이 프로그래밍 방식으로 기다리는 대신에, full-screen mode를 종료하도록 선택할 수 있습니다. 유저 인터페이스의 어딘가에 사용자에게 이 옵션을 사용할 수 있음을 알리는, 적절한 유저 인터페이스 요소를 제공해야 합니다.

- -
-

주의: 다른 페이지로 이동하거나, 탭을 변경하거나, 응용 프로그램 전환기(또는 Alt-Tab)를 사용하여, 다른 응용 프로그램으로 전환하면 마찬가지로 full-screen mode가 종료됩니다.

-
- -

Example

- -

이 예제에서는 비디오가 웹 페이지에 표시됩니다. Return 또는 Enter 키를 누르면, 사용자가 비디오의 창과 full-screen 표시를 전환할 수 있습니다.

- -

View Live Examples

- -

Watching for the Enter key

- -

페이지가 로드되면, 이 코드가 실행되어 Enter 키 를 주시하는 이벤트 리스너를 설정합니다.

- -
document.addEventListener("keypress", function(e) {
-  if (e.keyCode === 13) {
-    toggleFullScreen();
-  }
-}, false);
-
- -

Toggling full-screen mode

- -

이 코드는 사용자가 Enter 키를 누를 때, 위의 이벤트 핸들러에 의해 호출됩니다.

- -
function toggleFullScreen() {
-  if (!document.fullscreenElement) {
-    document.documentElement.requestFullscreen();
-  } else {
-    if (document.exitFullscreen) {
-      document.exitFullscreen();
-    }
-  }
-}
- -

먼저 {{DOMxRef("Document", "document")}}의 fullscreenElement 속성(attribute)값을 살펴보겠습니다. 실제 배포 시에는 이 시점에 접두어가 붙은 버전(예를들어, mozFullscreenElement, msFullscreenElement, webkitFullscreenElement)을 확인해야 합니다. 값이 null인 경우, 문서는 현재 window mode에 있으므로, full-screen mode로 전환해야 합니다. 그렇지 않으면, 이 요소는 지금 full-screen mode 상태입니다. full-screen mode로 전환하는 작업은, {{HTMLElement("video")}}요소에서 {{DOMxRef("Element.requestFullscreen()")}}을 호출하여 수행합니다.

- -

full-screen mode가 이미 활성화 된 경우(fullscreenElement 가 null이 아닌 경우), document에서 {{DOMxRef("Document.exitFullscreen", "exitFullscreen()")}}을 호출하여 full-screen mode를 종료합니다.

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
- -

Browser compatibility

- -

Document.fullscreen

- -
- - -

{{Compat("api.Document.fullscreen")}}

- -

Document.fullscreenEnabled

- -
- - -

{{Compat("api.Document.fullscreenEnabled")}}

-
-
- -

See also

- -
    -
  • Using full-screen mode
    • -
  • {{DOMxRef("Element.requestFullscreen()")}}
    • -
  • {{DOMxRef("Document.exitFullscreen()")}}
    • -
  • {{DOMxRef("Document.fullscreen")}}
    • -
  • {{DOMxRef("Document.fullscreenElement")}}
    • -
  • {{CSSxRef(":fullscreen")}}, {{CSSxRef("::backdrop")}}
    • -
  • {{HTMLAttrXRef("allowfullscreen", "iframe")}}
    • -
diff --git a/files/ko/web/guide/graphics/index.html b/files/ko/web/guide/graphics/index.html new file mode 100644 index 0000000000..cb7cd6f873 --- /dev/null +++ b/files/ko/web/guide/graphics/index.html @@ -0,0 +1,48 @@ +--- +title: 웹 상 그래픽 +slug: Web/Guide/그래픽 +tags: + - 2D + - 3D + - Canvas + - Graphics + - HTML5 + - SVG + - WebGL + - WebRTC +translation_of: Web/Guide/Graphics +--- +

웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다. 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. 여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.

+ +
+
+

2D 그래픽

+ +
+
Canvas
+
{{HTMLElement("canvas")}} 요소는 JavaScript를 사용하여 2D 그래픽을 그리는 API를 제공합니다.
+
SVG
+
Scalable Vector Graphics (SVG)는 그래픽을 묘사하기 위해 선, 곡선 및 그 밖의 기하학 도형을 사용할 수 있습니다. 벡터로, 어떤 크기로든 깔끔하게 크기 조정하는 이미지를 만들 수 있습니다.
+
+ +

모두 보기...

+
+ +
+

3D 그래픽

+ +
+
WebGL
+
웹을 위한 3D 그래픽인 WebGL 시작 안내서. 이 기술로 웹 콘텐츠에 표준 OpenGL ES를 사용할 수 있습니다.
+
+ +

비디오

+ +
+
HTML5 audio 및 video 사용
+
웹 페이지 내 비디오 및/또는 오디오 삽입 및 그 재생 제어.
+
WebRTC
+
WebRTC에서 RTC는 실시간 통신(Real-Time Communications)을 뜻하며, 오디오/비디오 스트리밍 및 브라우저 클라이언트(peer) 간 데이터 공유를 가능하게 하는 기술입니다.
+
+
+
diff --git a/files/ko/web/guide/html/content_editable/index.html b/files/ko/web/guide/html/content_editable/index.html deleted file mode 100644 index 2e039ea976..0000000000 --- a/files/ko/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -tags: - - HTML - - HTML5 - - 가이드 - - 고급 - - 예제 - - 웹 - - 필요컨텐트 -translation_of: Web/Guide/HTML/Editable_content ---- -

HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.

- -

호환성

- -

Content editable 은 현재 브라우저들과 완전히 호환된다.

- -
    -
  • Firefox 3.5+
    • -
  • Firefox for Android 19+
    • -
  • Chrome 4.0+
    • -
  • Internet Explorer 5.5+ *
    • -
  • Safari 3.1+
    • -
  • Opera 9+
    • -
  • iOS Safari 5.0+
    • -
  • Android Browser 3.0+
    • -
  • Opera Mobile 12.1+
    • -
  • Chrome for Android 25+
    • -
- -

Opera Mini 는 아직 지원되지 않는다.

- -
-

*대부분의 html elements 를 지원 하지 않는다.

-
- -

어떻게 작동 하는가?

- -

{{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} 속성을 HTML element 에서 true 로 설정하라. 이 속성은 대부분의 HTML elements 에 사용될 수 있다.

- -

예제들

- -

간단한 예제:

- -
<!DOCTYPE html>
-<html>
-  <body>
-    <div contentEditable="true">
-      This text can be edited by the user.
-    </div>
-  </body>
-</html>
- -

LocalStorage 를 이용한 JavaScript 와 합쳐진 작동 예제를 여기에서 볼 수 있다. 소스는 이곳에 있다.

- -

더 보기

- -
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");
- -

컨텐트와 상호 작용하는 방법  (오래된 IE 스타일 API) 그리고 이곳

diff --git a/files/ko/web/guide/html/editable_content/index.html b/files/ko/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..2e039ea976 --- /dev/null +++ b/files/ko/web/guide/html/editable_content/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 +--- +

HTML5 에서는 어떤 엘러먼트라도 수정이 가능하다. 약간의 JavaScript 이벤트 핸들러들을 사용하는 것만로 당신은 웹페이지를 완전하고 빠른 리치-텍스트 에디터로 변형할 수 있다. 이 문서는 이런 기능성에 대하여 대략의 정보를 제공 한다.

+ +

호환성

+ +

Content editable 은 현재 브라우저들과 완전히 호환된다.

+ +
    +
  • Firefox 3.5+
    • +
  • Firefox for Android 19+
    • +
  • Chrome 4.0+
    • +
  • Internet Explorer 5.5+ *
    • +
  • Safari 3.1+
    • +
  • Opera 9+
    • +
  • iOS Safari 5.0+
    • +
  • Android Browser 3.0+
    • +
  • Opera Mobile 12.1+
    • +
  • Chrome for Android 25+
    • +
+ +

Opera Mini 는 아직 지원되지 않는다.

+ +
+

*대부분의 html elements 를 지원 하지 않는다.

+
+ +

어떻게 작동 하는가?

+ +

{{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} 속성을 HTML element 에서 true 로 설정하라. 이 속성은 대부분의 HTML elements 에 사용될 수 있다.

+ +

예제들

+ +

간단한 예제:

+ +
<!DOCTYPE html>
+<html>
+  <body>
+    <div contentEditable="true">
+      This text can be edited by the user.
+    </div>
+  </body>
+</html>
+ +

LocalStorage 를 이용한 JavaScript 와 합쳐진 작동 예제를 여기에서 볼 수 있다. 소스는 이곳에 있다.

+ +

더 보기

+ +
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");
+ +

컨텐트와 상호 작용하는 방법  (오래된 IE 스타일 API) 그리고 이곳

diff --git a/files/ko/web/guide/html/html5/index.html b/files/ko/web/guide/html/html5/index.html new file mode 100644 index 0000000000..2d64ce56d6 --- /dev/null +++ b/files/ko/web/guide/html/html5/index.html @@ -0,0 +1,122 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

+ +

(HTML5의 문서에 대한 다른 분류도 참고하세요.)

+ +

HTML5 소개

+ +
+
HTML5의 소개
+
이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.
+
+ +

HTML5의 요소

+ +
+
HTML5 요소·태그의 목록
+
현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.
+
오디오/비디오 사용하기
+
Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.
+
HTML5 웹 폼양식
+
HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.
+
HTML5 섹션과 아웃라인
+
HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.
+
{{ HTMLElement("mark") }} 요소
+
mark 요소는 텍스트중에서의 특별한 관련성을 강조시키기 위해서 이용합니다.
+
{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소
+
주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.
+
+ +

Canvas 기술 지원

+ +
+
Canvas 튜토리얼
+
새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.
+
canvas 요소의 HTML5 text API
+
{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.
+
+ +

웹 애플리케이션 기능

+ +
+
Firefox 오프 라인 자원
+
Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.
+
Online 이벤트와 Offline 이벤트
+
Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.
+
WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)
+
클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.
+
contentEditable 속성： 웹 사이트 및 위키 편집 용이성
+
HTML5 에서는 contentEditable 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.
+
로컬 파일 사용하기
+
새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 type 속성의 값에 file를 지정한 {{ HTMLElement("input") }} 요소에 새롭게 추가된 multiple 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.
+
+ +

DOM 주요 기능

+ +
+
getElementsByClassName
+
Document 및 Element 노드에 있어서의 getElementsByClassName 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.
+
드래그 앤 드롭
+
HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.
+
HTML 내 포커스 관리
+
HTML5가 새로운 activeElement 속성과 hasFocus 속성이 지원되어 있습니다.
+
웹 기반 프로토콜 핸들러
+
navigator.registerProtocolHandler()메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.
+
+ +

HTML 파서

+ +

Gecko의 HTML5 표준 파서(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}

+ +

추가 변경사항

+ +
    +
  • HTML 문서에 있어서의 localName 및 namespaceURI는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, localName는 소문자를 돌려주어, HTML 요소의 namespaceURI는 "http://www.w3.org/1999/xhtml"를 돌려줍니다.
    • +
  • 페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 hashchange 이벤트가 페이지에 보내집니다. 자세한 것은 window.onhashchange를 참조해 주십시오.
    • +
  • class 속성을 보다 간단하게 취급할 수 있도록 HTML5의 element.classList이 기술 지원되었습니다.
    • +
  • 문서에 즉시 생성되는 이벤트에 응하는 document.onreadystatechange와 document.readyState가 기술 지원되었습니다.
    • +
  • 표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.
    • +
+ +

HTML5의 일부로서 포함된 기술

+ +

아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.

+ + + +

관련 문서

+ +

웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：

+ + diff --git a/files/ko/web/guide/html/html5/introduction_to_html5/index.html b/files/ko/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..8b9698dc53 --- /dev/null +++ b/files/ko/web/guide/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 +--- +

HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

+ +

HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. HTML5의 메인 페이지에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 CanIUse 웹 사이트를 참조해 주십시오.

+ +

HTML5 DOCTYPE

+ +

HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：

+ +
<!DOCTYPE html>
+
+ +

이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.

+ +

이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.

+ +

<meta charset>으로 문자셋 정의하기

+ +

보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.

+ +
<meta charset="UTF-8">
+ +

이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.

+ +

HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.

+ +

새로운 HTML5 해석기의 사용

+ +

HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.

+ +

이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.

+ +

걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!

diff --git a/files/ko/web/guide/html/using_html_sections_and_outlines/index.html b/files/ko/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..87cae41ebd --- /dev/null +++ b/files/ko/web/guide/html/using_html_sections_and_outlines/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 +--- +
{{HTMLSidebar}}
+ +
+

중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 안됩니다. 문서 작성자는 대신 제목 순위(h1-h6)를 사용해 문서 구조를 나타내는 것이 좋습니다.

+
+ +

HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.

+ +

예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.

+ +

새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.

+ +

HTML4에서의 문서 구조

+ +

문서의 구조, 즉 <body>와 </body> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다. HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.

+ +

그래서 다음과 같은 마크업은:

+ +
<div class="section" id="forest-elephants">
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+  ...섹션 내용 진행 중...
+  <div class="subsection" id="forest-habitat">
+    <h2>서식지</h2>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...하위 섹션 내용 진행 중...
+  </div>
+</div>
+ +

다음과 같은 문서 아웃라인을 가지게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지
+
+ +

새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,

+ +
<h1>둥근귀코끼리</h1>
+<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
+...섹션 내용 진행 중...
+<h2>서식지</h2>
+<p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+...하위 섹션 내용 진행 중...
+<h2>먹이</h2>
+<h1>몽골 게르빌루스쥐</h1>
+ +

앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지
+   1.2 먹이
+2. 몽골 게르빌루스쥐
+
+ +

HTML5에서 해결한 문제들

+ +

HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:

+ +
    +
  1. 의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 class 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 것은 불가능합니다("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 보조 장비에 사용되는 기술에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.
    2. +
  2. 여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.
    3. +
  3. HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.
    4. +
  4. 반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.
    5. +
+ +

좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.

+ +

HTML5 문서 아웃라인 알고리즘

+ +

HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.

+ +

HTML5에서의 섹션 정의

+ +

우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.

+ +
각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. HTML5에서 제목 지정하는 법을 보십시오.
+ +

보기:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <section>
+    <h1>소개</h1>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+  <section>
+    <h1>서식지</h1>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
+  </section>
+  <aside>
+    <p>광고 구역</p>
+  </aside>
+</section>
+<footer>
+  <p>(c) 2013 회사 이름</p>
+</footer>
+ +

위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <section>
+    <h1>소개</h1>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+  <section>
+    <h1>서식지</h1>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
+  </section>
+  <aside>
+    <p>광고 구역</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2013 회사 이름?</p>
+</footer>
+ +

첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+
+  <section>
+    <h1>소개</h1>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+
+  <section>
+    <h1>서식지</h1>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
+  </section>
+
+  <aside>
+    <p>광고 구역</p>
+  </aside>
+</section>
+
+<footer>
+  <p>(c) 2013 회사 이름</p>
+</footer>
+ +

그래서 다음과 같은 구조를 가지게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 소개
+   1.2 서식지
+   1.3 광고 구역 (aside)
+
+ +

HTML5에서 제목 지정하는 법

+ +

비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.

+ +

제목 요소엔 요소 이름에 붙은 숫자를 가지고 계급을 매기는데, {{HTMLElement("h1")}}이 최상위 계급이며 {{HTMLElement("h6")}}는 최하위 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+  <section>
+    <h2>서식지</h2>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...계속 된 하위 섹션 내용...
+  </section>
+</section>
+<section>
+  <h3>몽골 게르빌루스쥐</h3>
+  <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
+    ...계속 된 섹션 내용...
+</section>
+ +

이는 다음과 같은 아웃라인을 갖게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지
+2. 몽골 게르빌루스쥐
+ +

여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)

+ +

은연중 자동으로 정의되는 섹션

+ +

HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 절대적으로 필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 은연중 자동으로 정의되는 섹션이라 하겠습니다.

+ +

HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  <h3 class="implicit subsection">서식지</h3>
+  <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+    ...하위 섹션 내용 진행 중...
+</section>
+ +

이는 다음과 같은 문서 아웃라인을 갖게 됩니다:

+ +
1. 둥근귀코끼리
+   1.1 서식지 (h3 요소에 의해 은연중 자동으로 정의됨)
+
+ +

만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

+ +
<section>
+  <h1>둥근귀코끼리</h1>
+  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  <h1 class="implicit section">몽골 게르빌루스쥐</h1>
+  <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
+    ...섹션 내용 진행 중...
+</section>
+ +

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

+ +
1. 둥근귀코끼리
+2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+
+ +

만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

+ +
<body>
+  <h1>포유 동물</h1>
+  <h2>고래</h2>
+  <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
+    ...섹션 내용 진행 중...
+  <section>
+    <h3>둥근귀코끼리</h3>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
+      ...섹션 내용 진행 중...
+    <h3>몽골 게르빌루스쥐</h3>
+      <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
+         ...하위 섹션 내용 진행 중...
+    <h2>파충류</h2>
+      <p>파충류는 냉혈 동물입니다.
+          ...하위 섹션 내용 진행 중...
+  </section>
+</body>
+ +

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

+ +
1. 포유 동물
+   1.1 고래 (h2 요소에 의해 자동으로 정의됨)
+   1.2 둥근귀코끼리 (섹션 요소에 의해 명시적으로 정의됨)
+   1.3 몽골 게르빌루스쥐 (h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+2. 파충류 (h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
+ +

단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 브라우저가 원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.

+ +

제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.

+ +

섹션 구분의 근원점

+ +

섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.

+ +

보기:

+ +
<section>
+  <h1>숲 코끼리</h1>
+  <section>
+    <h2>소개</h2>
+    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
+  </section>
+  <section>
+    <h2>서식지</h2>
+    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
+      과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p>
+    <blockquote>
+       <h1>보르네오 섬</h1>
+       <p>보르네오 섬에 서식하는 둥근귀코끼리...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:

+ +
1. 숲 코끼리
+   1.1 소개
+   1.2 서식지
+ +

이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.

+ +

문서의 아웃라인 밖에 존재하는 섹션

+ +

HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:

+ +
    +
  1. HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.
    2. +
  2. HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.
    3. +
  3. HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.
    4. +
  4. HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.
    5. +
+ +

섹션을 구분짓는 요소의 주소와 발행 시간

+ +

문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.

+ +

가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.

+ +

비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.

+ +

HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법

+ +

섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 display:inline 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:

+ +
section, article, aside, footer, header, nav, hgroup {
+  display:block;
+}
+
+ +

물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.

+ +
그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:
+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+<![endif]-->
+ +

이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:

+ +
<noscript>
+   <strong>주의 !</strong>
+   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+</noscript>
+ +

그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("header" );
+    document.createElement("footer" );
+    document.createElement("section");
+    document.createElement("aside"  );
+    document.createElement("nav"    );
+    document.createElement("article");
+    document.createElement("hgroup" );
+    document.createElement("time"   );
+  </script>
+  <noscript>
+     <strong>주의 !</strong>
+     귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
+     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
+   </noscript>
+<![endif]-->
+
+ +

맺음말

+ +

HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.

diff --git a/files/ko/web/guide/parsing_and_serializing_xml/index.html b/files/ko/web/guide/parsing_and_serializing_xml/index.html new file mode 100644 index 0000000000..872dfffaa3 --- /dev/null +++ b/files/ko/web/guide/parsing_and_serializing_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 +--- +

웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.

+ +
    +
  • DOM 트리를 문자열로 직렬화하는 XMLSerializer
    • +
  • XML 문서 상의 각기 다른 부분들을 (비 XML 문법을 사용하여) 문자열로 직렬화하는 XPath
    • +
  • XML을 파싱하여 문자열을 DOM 트리로 변환하는 DOMParser
    • +
  • URL을 사용하여 주소화 가능한(URL-addressable) 리소스를 DOM 트리로 파싱하는 XMLHttpRequest
    • +
+ +

Part 1: XML 문서 생성법

+ +

XML 문서 생성법은 다음과 같습니다. (XML 문서는 Document의 인스턴스 입니다.)

+ +

문자열을 DOM 트리로 파싱

+ +
+
var sMyString = '<a id="a"><b id="b">hey!</b></a>';
+var oParser = new DOMParser();
+var oDOM = oParser.parseFromString(sMyString, "text/xml");
+// 루트 요소의 이름, 또는 에러 메시지를 출력합니다.
+dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
+
+
+ +

자바스크립트 객체 트리를 시작점으로 하여 XML 문서를 생성(JXON)

+ +

JXON 역(reverse) 알고리즘을 참고하세요.

+ +

URL 주소화 가능한(URL-addressable) 리소스를 DOM 트리로 파싱

+ +

XMLHttpRequest를 사용합니다

+ +

다음은 URL 주소화 가능한 XML 파일을 DOM 트리로 읽어들인 후 파싱하는 예시 코드입니다.

+ +
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();
+
+ +

xhr.responseXML는 {{domxref("Document")}}의 인스턴스입니다.

+ +

Part 2: 특정 XML 문서의 콘텐츠를 직렬화하는 방법

+ +

Part 1에서 생성한 XML 문서의 콘텐츠를 직렬화할 수 있는 방법은 다음과 같습니다.

+ +

DOM 트리를 문자열로 직렬화

+ +

제일 먼저 DOM 트리 생성법에 나와 있는 대로 DOM 트리를 생성합니다. 다른 방법으로는 {{ domxref("XMLHttpRequest") }}에서 얻어낸 DOM 트리를 사용하는 방법이 있습니다.

+ +

이제 doc(DOM 트리)를 문자열로 직렬화 해 봅시다.

+ +
var oSerializer = new XMLSerializer();
+var sXML = oSerializer.serializeToString(doc);
+ +

new XMLSerializer() 생성자는 JS XPCOM 컴포넌트(혹은 JS module) 내에서는 사용이 불가능합니다. 대신, 다음과 같은 코드를 작성하세요.

+ +
var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
+                            .createInstance(Components.interfaces.nsIDOMSerializer);
+var sXML = oSerializer.serializeToString(doc);
+
+ +

DOM 트리를 문자열로 "예쁘게(pretty)" 직렬화

+ +

XMLSerializer와 E4X를 사용하면 DOM 트리를 예쁘게 출력(pretty print) 할 수 있습니다. 우선, DOM 트리 생성법 글을 참고하여 DOM 트리를 생성합니다. 혹은 {{ domxref("XMLHttpRequest") }}를 통해 DOM 트리를 뽑아내는 방법도 있습니다. 아래 코드에서 변수 doc는 DOM 트리를 가지고 있습니다.

+ +
var oSerializer = new XMLSerializer();
+var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();
+ +

들여쓰기는 두 번 스페이스가 들어간 것과 같게 되어 있습니다. 좀 더 효율적인 코드를 작성하거나 들여쓰기 문자열을 임의로 설정하고 싶다면 {{ domxref("treeWalker") }}를 사용하십시오.

+ +
Note: E4X toXMLString 메소드를 쓴다면, CDATA 요소가 없어지거나, 요소 안에 담긴 텍스트만 남을 수 있습니다. 그러므로 만약 XML 내에 CDATA 요소가 들어 있다면, 위에 나온 메소드는 그다지 유용하지 않을 수도 있습니다.
+ +
<content><![CDATA[This is the content]]></content>
+
+ +

위의 코드는 다음과 같이 변환됩니다.

+ +
<content>This is the content</content>
+ +

DOM 트리를 자바스크립트 객체 트리로 직렬화 (JXON)

+ +

JXON (lossless JavaScript XML Object Notation, 무손실 자바스크립트 XML 객체 표기법)은 XML을 사용하여 자바스크립트 객체를 표현하는 방법입니다. XML 문서의 일부분만 나오게 하고 싶다면, 문서 전체를 JSON으로 변환하지 말고 XPath를 사용하세요! 이 외의 상황이라면 JSON에 관한 글을 참조하세요.

+ +

DOM 트리를 파일로 직렬화

+ +

먼저, DOM 트리 생성법 글에 나와 있는 대로 DOM 트리를 생성하세요. 만약 {{ domxref("XMLHttpRequest") }}를 사용하여 이미 DOM 트리가 존재한다면 이 절의 마지막 부분으로 건너 뛰십시오.

+ +

이제 DOM 트리인 doc를 파일로 직렬화 해봅시다. 파일에 대해 더 알아보고 싶다면, 모질라에서 파일 사용과 관련하여를 참조하세요.

+ +
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();
+
+ +

XMLHttpRequest 객체를 파일로 직렬화

+ +

이미 {{ domxref("XMLHttpRequest") }}를 사용하여 DOM 트리를 보유한 상태라면, 위의 코드를 사용하되 serializer.serializeToStream(doc, oFOStream, "") 부분을 serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")로 대체하십시오. xmlHttpRequest은 XMLHttpRequest의 인스턴스입니다.

+ +

위 코드는 서버에서 XML을 찾아낸 후 문자열 스트림으로 재직렬화(re-serialize)한다는 것을 알아두세요. 필요에 따라 xmlHttpRequest.responseText를 곧장 건너뛸 수 있습니다.

+ +

HTML 문서를 직렬화

+ +

만약 보유한 DOM이 HTML 문서라면 다음과 같이 간단하게 직렬화할 수 있습니다.

+ +
var serialized = document.documentElement.innerHTML;
+
+ +

참고 자료

+ + diff --git "a/files/ko/web/guide/xml_\355\214\214\354\213\261_\353\260\217_\354\247\201\353\240\254\355\231\224/index.html" "b/files/ko/web/guide/xml_\355\214\214\354\213\261_\353\260\217_\354\247\201\353\240\254\355\231\224/index.html" deleted file mode 100644 index 872dfffaa3..0000000000 --- "a/files/ko/web/guide/xml_\355\214\214\354\213\261_\353\260\217_\354\247\201\353\240\254\355\231\224/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: XML 파싱 및 직렬화 -slug: Web/Guide/XML_파싱_및_직렬화 -tags: - - AJAX - - Add-ons - - DOM - - Extensions - - JSON - - JXON - - XML - - XMLHttpRequest - - 가이드 -translation_of: Web/Guide/Parsing_and_serializing_XML ---- -

웹 상에서 XML을 파싱하고 직렬화할 때 사용할 수 있는 객체는 다음과 같습니다.

- -
    -
  • DOM 트리를 문자열로 직렬화하는 XMLSerializer
    • -
  • XML 문서 상의 각기 다른 부분들을 (비 XML 문법을 사용하여) 문자열로 직렬화하는 XPath
    • -
  • XML을 파싱하여 문자열을 DOM 트리로 변환하는 DOMParser
    • -
  • URL을 사용하여 주소화 가능한(URL-addressable) 리소스를 DOM 트리로 파싱하는 XMLHttpRequest
    • -
- -

Part 1: XML 문서 생성법

- -

XML 문서 생성법은 다음과 같습니다. (XML 문서는 Document의 인스턴스 입니다.)

- -

문자열을 DOM 트리로 파싱

- -
-
var sMyString = '<a id="a"><b id="b">hey!</b></a>';
-var oParser = new DOMParser();
-var oDOM = oParser.parseFromString(sMyString, "text/xml");
-// 루트 요소의 이름, 또는 에러 메시지를 출력합니다.
-dump(oDOM.documentElement.nodeName == "parsererror" ? "error while parsing" : oDOM.documentElement.nodeName);
-
-
- -

자바스크립트 객체 트리를 시작점으로 하여 XML 문서를 생성(JXON)

- -

JXON 역(reverse) 알고리즘을 참고하세요.

- -

URL 주소화 가능한(URL-addressable) 리소스를 DOM 트리로 파싱

- -

XMLHttpRequest를 사용합니다

- -

다음은 URL 주소화 가능한 XML 파일을 DOM 트리로 읽어들인 후 파싱하는 예시 코드입니다.

- -
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();
-
- -

xhr.responseXML는 {{domxref("Document")}}의 인스턴스입니다.

- -

Part 2: 특정 XML 문서의 콘텐츠를 직렬화하는 방법

- -

Part 1에서 생성한 XML 문서의 콘텐츠를 직렬화할 수 있는 방법은 다음과 같습니다.

- -

DOM 트리를 문자열로 직렬화

- -

제일 먼저 DOM 트리 생성법에 나와 있는 대로 DOM 트리를 생성합니다. 다른 방법으로는 {{ domxref("XMLHttpRequest") }}에서 얻어낸 DOM 트리를 사용하는 방법이 있습니다.

- -

이제 doc(DOM 트리)를 문자열로 직렬화 해 봅시다.

- -
var oSerializer = new XMLSerializer();
-var sXML = oSerializer.serializeToString(doc);
- -

new XMLSerializer() 생성자는 JS XPCOM 컴포넌트(혹은 JS module) 내에서는 사용이 불가능합니다. 대신, 다음과 같은 코드를 작성하세요.

- -
var oSerializer = Components.classes["@mozilla.org/xmlextras/xmlserializer;1"]
-                            .createInstance(Components.interfaces.nsIDOMSerializer);
-var sXML = oSerializer.serializeToString(doc);
-
- -

DOM 트리를 문자열로 "예쁘게(pretty)" 직렬화

- -

XMLSerializer와 E4X를 사용하면 DOM 트리를 예쁘게 출력(pretty print) 할 수 있습니다. 우선, DOM 트리 생성법 글을 참고하여 DOM 트리를 생성합니다. 혹은 {{ domxref("XMLHttpRequest") }}를 통해 DOM 트리를 뽑아내는 방법도 있습니다. 아래 코드에서 변수 doc는 DOM 트리를 가지고 있습니다.

- -
var oSerializer = new XMLSerializer();
-var sPrettyXML = XML(oSerializer.serializeToString(doc)).toXMLString();
- -

들여쓰기는 두 번 스페이스가 들어간 것과 같게 되어 있습니다. 좀 더 효율적인 코드를 작성하거나 들여쓰기 문자열을 임의로 설정하고 싶다면 {{ domxref("treeWalker") }}를 사용하십시오.

- -
Note: E4X toXMLString 메소드를 쓴다면, CDATA 요소가 없어지거나, 요소 안에 담긴 텍스트만 남을 수 있습니다. 그러므로 만약 XML 내에 CDATA 요소가 들어 있다면, 위에 나온 메소드는 그다지 유용하지 않을 수도 있습니다.
- -
<content><![CDATA[This is the content]]></content>
-
- -

위의 코드는 다음과 같이 변환됩니다.

- -
<content>This is the content</content>
- -

DOM 트리를 자바스크립트 객체 트리로 직렬화 (JXON)

- -

JXON (lossless JavaScript XML Object Notation, 무손실 자바스크립트 XML 객체 표기법)은 XML을 사용하여 자바스크립트 객체를 표현하는 방법입니다. XML 문서의 일부분만 나오게 하고 싶다면, 문서 전체를 JSON으로 변환하지 말고 XPath를 사용하세요! 이 외의 상황이라면 JSON에 관한 글을 참조하세요.

- -

DOM 트리를 파일로 직렬화

- -

먼저, DOM 트리 생성법 글에 나와 있는 대로 DOM 트리를 생성하세요. 만약 {{ domxref("XMLHttpRequest") }}를 사용하여 이미 DOM 트리가 존재한다면 이 절의 마지막 부분으로 건너 뛰십시오.

- -

이제 DOM 트리인 doc를 파일로 직렬화 해봅시다. 파일에 대해 더 알아보고 싶다면, 모질라에서 파일 사용과 관련하여를 참조하세요.

- -
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();
-
- -

XMLHttpRequest 객체를 파일로 직렬화

- -

이미 {{ domxref("XMLHttpRequest") }}를 사용하여 DOM 트리를 보유한 상태라면, 위의 코드를 사용하되 serializer.serializeToStream(doc, oFOStream, "") 부분을 serializer.serializeToStream(xmlHttpRequest.responseXML.documentElement, oFOStream, "")로 대체하십시오. xmlHttpRequest은 XMLHttpRequest의 인스턴스입니다.

- -

위 코드는 서버에서 XML을 찾아낸 후 문자열 스트림으로 재직렬화(re-serialize)한다는 것을 알아두세요. 필요에 따라 xmlHttpRequest.responseText를 곧장 건너뛸 수 있습니다.

- -

HTML 문서를 직렬화

- -

만약 보유한 DOM이 HTML 문서라면 다음과 같이 간단하게 직렬화할 수 있습니다.

- -
var serialized = document.documentElement.innerHTML;
-
- -

참고 자료

- - diff --git "a/files/ko/web/guide/\352\267\270\353\236\230\355\224\275/index.html" "b/files/ko/web/guide/\352\267\270\353\236\230\355\224\275/index.html" deleted file mode 100644 index cb7cd6f873..0000000000 --- "a/files/ko/web/guide/\352\267\270\353\236\230\355\224\275/index.html" +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: 웹 상 그래픽 -slug: Web/Guide/그래픽 -tags: - - 2D - - 3D - - Canvas - - Graphics - - HTML5 - - SVG - - WebGL - - WebRTC -translation_of: Web/Guide/Graphics ---- -

웹 사이트 및 응용 프로그램은 종종 그래픽을 보일 필요가 있습니다. 정지 이미지는 {{HTMLElement("img")}} 요소 사용이나 {{cssxref("background-image")}} 속성을 사용한 HTML 요소의 배경 설정으로 쉽게 표시할 수 있습니다. 또한 그래픽을 그때그때 생성하거나 사후에 이미지를 조작할 수도 있습니다. 여기서는 이를 수행할 수 있는 법을 주의 깊게 살펴봅니다.

- -
-
-

2D 그래픽

- -
-
Canvas
-
{{HTMLElement("canvas")}} 요소는 JavaScript를 사용하여 2D 그래픽을 그리는 API를 제공합니다.
-
SVG
-
Scalable Vector Graphics (SVG)는 그래픽을 묘사하기 위해 선, 곡선 및 그 밖의 기하학 도형을 사용할 수 있습니다. 벡터로, 어떤 크기로든 깔끔하게 크기 조정하는 이미지를 만들 수 있습니다.
-
- -

모두 보기...

-
- -
-

3D 그래픽

- -
-
WebGL
-
웹을 위한 3D 그래픽인 WebGL 시작 안내서. 이 기술로 웹 콘텐츠에 표준 OpenGL ES를 사용할 수 있습니다.
-
- -

비디오

- -
-
HTML5 audio 및 video 사용
-
웹 페이지 내 비디오 및/또는 오디오 삽입 및 그 재생 제어.
-
WebRTC
-
WebRTC에서 RTC는 실시간 통신(Real-Time Communications)을 뜻하며, 오디오/비디오 스트리밍 및 브라우저 클라이언트(peer) 간 데이터 공유를 가능하게 하는 기술입니다.
-
-
-
diff --git a/files/ko/web/html/canvas/index.html b/files/ko/web/html/canvas/index.html deleted file mode 100644 index bbe466e58d..0000000000 --- a/files/ko/web/html/canvas/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Canvas API -slug: Web/HTML/Canvas -tags: - - API - - Canvas - - JavaScript - - 개요 - - 레퍼런스 -translation_of: Web/API/Canvas_API ---- -
{{CanvasSidebar}}
- -

Canvas API는 JavaScript와 HTML {{HtmlElement("canvas")}} 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

- -

Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 <canvas> 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그립니다.

- -

기본 예시

- -

canvas에 초록색 사각형을 그리는 간단한 예시입니다.

- -

HTML

- -
<canvas id="canvas"></canvas>
-
- -

JavaScript

- -

{{domxref("Document.getElementById()")}} 메소드는 HTML <canvas> 엘리먼트에 대한 참조를 얻습니다. 그 다음, {{domxref("HTMLCanvasElement.getContext()")}} 메소드는 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻습니다.

- -

실제 그리기는 {{domxref("CanvasRenderingContext2D")}} 인터페이스를 사용해 수행됩니다. {{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle")}} 프로퍼티는 사각형을 초록색으로 만듭니다. {{domxref("CanvasRenderingContext2D.fillRect()", "fillRect()")}} 메소드는 좌측 상단 코너를 (10, 10) 위치에 놓으며, 너비를 150, 높이를 100으로 지정합니다.

- -
const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
-
-ctx.fillStyle = 'green';
-ctx.fillRect(10, 10, 150, 100);
-
- -

결과

- -

{{ EmbedLiveSample('기본_예시', 700, 180) }}

- -

레퍼런스

- -
-
    -
  • {{domxref("HTMLCanvasElement")}}
    • -
  • {{domxref("CanvasRenderingContext2D")}}
    • -
  • {{domxref("CanvasGradient")}}
    • -
  • {{domxref("CanvasImageSource")}}
    • -
  • {{domxref("CanvasPattern")}}
    • -
  • {{domxref("ImageBitmap")}}
    • -
  • {{domxref("ImageData")}}
    • -
  • {{domxref("RenderingContext")}}
    • -
  • {{domxref("TextMetrics")}}
    • -
  • {{domxref("OffscreenCanvas")}} {{experimental_inline}}
    • -
  • {{domxref("Path2D")}} {{experimental_inline}}
    • -
  • {{domxref("ImageBitmapRenderingContext")}} {{experimental_inline}}
    • -
-
- -
-

노트: WebGLRenderingContext에 관련된 인터페이스는 WebGL 하위에 참조되어있습니다.

-
- -

{{domxref("CanvasCaptureMediaStream")}}은 관련된 인터페이스입니다.

- -

가이드 및 튜토리얼

- -
-
Canvas 튜토리얼
-
Canvas API의 기본적인 사용과 고급 기능 모두를 다루는 이해하기 쉬운 튜토리얼.
-
HTML5 Canvas 깊이 살펴보기
-
Canvas API 및 WebGL의 실습, 자세한 소개.
-
Canvas 핸드북
-
Canvas API에 대한 유용한 레퍼런스.
-
데모: A basic ray-caster
-
Canvas를 사용한 ray-tracing 애니메이션 데모.
-
Canvas를 사용하여 비디오 조작
-
{{HTMLElement("video")}}와 {{HTMLElement("canvas")}}를 조합하여 실시간으로 비디오 데이터를 조작.
-
- -

라이브러리

- -

Canvas API는 굉장히 강력하지만, 사용하는 것이 항상 간단하지 않습니다. 아래에 나열된 라이브러리들은 캔버스 기반 프로젝트를 더 빠르고 더 쉽게 생성할 수 있게 해줍니다.

- -
    -
  • EaselJS는 게임, 생성 예술 및 기타 고도의 그래픽 경험을 쉽게 생성할 수 있게 해주는 오픈소스 캔버스 라이브러리입니다.
    • -
  • Fabric.js는 SVG 파싱 기능을 갖춘 오픈소스 캔버스 라이브러리입니다.
    • -
  • heatmap.js는 캔버스 기반 데이터 열지도를 생성하기위한 오픈소스 라이브러리입니다.
    • -
  • JavaScript InfoVis Toolkit은 인터렉티브한 데이터 시각화를 생성합니다.
    • -
  • Konva.js는 데스크탑 및 모바일 애플리케이션을 위한 2D 캔버스 라이브러리입니다.
    • -
  • p5.js는 예술가, 디자이너, 교육자 및 입문자를 위한 캔버스 그리기 기능의 모든 세트를 포함하고 있습니다.
    • -
  • Paper.js는 HTML5 Canvas 위에서 실행되는 오픈소스 벡터 그래픽 스크립팅 프레임워크입니다.
    • -
  • Phaser는 Canvas 및 WebGL 기반의 브라우저 게임을 위한 빠르고, 자유롭고, 재미있는 오픈소스 프레임워크입니다.
    • -
  • Processing.js는 Processing 시각화 언어의 포트입니다.
    • -
  • Pts.js는 canvas 및 SVG를 사용한 창의적인 코딩 및 시각화를 위한 라이브러리입니다.
    • -
  • Rekapi는 Canvas를 위한 애니메이션 키 프레임 API입니다.
    • -
  • Scrawl-canvas는 2D 캔버스 엘리먼트를 생성하고 조작하기위한 오픈소스 JavaScript 라이브러리입니다.
    • -
  • ZIM 프레임워크는 canvas에서의 창의적인 코딩을 위한 편의성, 컴포넌트 및 컨트롤을 제공하는 프레임워크입니다. 접근성 및 다채로운 튜토리얼을 포함합니다.
    • -
- -
-

노트: WebGL을 사용하는 2D 및 3D를 위한 WebGL API를 확인하세요.

-
- -

명세

- - - - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('HTML WHATWG', '#2dcontext', 'the 2D rendering context')}}{{Spec2('HTML WHATWG')}}
- -

브라우저 호환성

- -

Mozilla 애플리케이션은 Gecko 1.8(Firefox 1.5)을 시작으로 <canvas>에 대한 지원을 받았습니다. OS X Dashboard 및 Safari를 위해 Apple이 소개한 것이 캔버스 엘리먼트의 기원입니다. Internet Explorer는 9버전부터 <canvas>를 지원하며, 이전 버전의 IE에서는 Google의 Explorer Canvas 프로젝트의 스크립트를 추가하여 <canvas>에 대한 지원을 효과적으로 추가할 수 있습니다. Google Chrome 및 Opera 9 또한 <canvas>를 지원합니다.

- -

함께 보기

- - diff --git a/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html b/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html deleted file mode 100644 index 7851f86154..0000000000 --- a/files/ko/web/html/canvas/manipulating_video_using_canvas/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: 캔버스(canvas)를 이용한 비디오 조작하기 -slug: Web/HTML/Canvas/Manipulating_video_using_canvas -tags: - - Canvas - - Video - - 비디오 - - 캔버스 -translation_of: Web/API/Canvas_API/Manipulating_video_using_canvas ---- -
{{CanvasSidebar}}
- -
-

비디오에서 다양한 시각적 효과를 보여주기 위해, 캔버스와 비디오의 기능을 결합하여 실시간으로 비디오 데이터를 조작할 수 있습니다. 이 튜토리얼에서는 자바스크립트 코드로 어떻게 크로마 키잉(chroma-keying, 또한 "녹색 스크린 효과, green screen effect")을 구현할 수 있는지 보여줍니다. 

-
- -

라이브 예제 보기

- -

문서(document) 내용

- -

이 내용을 보여주기 위한 XHTML 문서는 아래와 같습니다.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <style>
-      body {
-        background: black;
-        color:#CCCCCC;
-      }
-      #c2 {
-        background-image: url(foo.png);
-        background-repeat: no-repeat;
-      }
-      div {
-        float: left;
-        border :1px solid #444444;
-        padding:10px;
-        margin: 10px;
-        background:#3B3B3B;
-      }
-    </style>
-    <script type="text/javascript" src="main.js"></script>
-  </head>
-
-  <body onload="processor.doLoad()">
-    <div>
-      <video id="video" src="video.ogv" controls="true"/>
-    </div>
-    <div>
-      <canvas id="c1" width="160" height="96"></canvas>
-      <canvas id="c2" width="160" height="96"></canvas>
-    </div>
-  </body>
-</html>
-
- -

여기에서 중요한 요소는:

- -
    -
  1. 이 문서에는 ID가 c1, c2인 두 개의  캔버스가 있습니다. 캔버스 c1은 비디오 원본의 현재 프레임을 보여주기 위해 사용되고, c2는 크로마 키잉 효과를 수행한 결과를 보여줍니다. c2에서 비디오의 녹색 배경을 대체할 정지 이미지를 미리 로드합니다.
    2. -
  2. 자바스크립트 코드는 main.js에서 가져옵니다. 이 스크립트는 자바스크립트 1.8 기능을 사용했기 때문에 스크립트를 가져오는 22번째 줄에서 버전이 명시됩니다(원문: this script uses JavaScript 1.8 features, so that version is specified in line 22 when importing the script).
    3. -
  3. 문서가 로드되면, processor.doLoad() 메서드가 실행됩니다.
    4. -
- -

자바스크립트 코드

- -

main.js에 있는 자바스크립트 코드는 3개의 메서드로 구성됩니다.

- -

크로마 키잉 플레이어 초기화

- -

doLoad() 메서드는 문서가 최초에 로드될 때 호출됩니다. 이 메서드가 하는 일은 크로마 키잉 처리에서 쓰일 변수를 준비하고, 이벤트 리스너를 등록함으로써 사용자가 비디오 재생을 시작할 때 감지할 수 있도록 해줍니다. 

- -
  var processor;
-
-  processor.doLoad = function doLoad() {
-    this.video = document.getElementById('video');
-    this.c1 = document.getElementById('c1');
-    this.ctx1 = this.c1.getContext('2d');
-    this.c2 = document.getElementById('c2');
-    this.ctx2 = this.c2.getContext('2d');
-    let self = this;
-    this.video.addEventListener('play', function() {
-        self.width = self.video.videoWidth / 2;
-        self.height = self.video.videoHeight / 2;
-        self.timerCallback();
-      }, false);
-  },
-
- -

이코드는 XHTML에서 중요한 요소인 비디오와 캔버스의 참조를 가져옵니다. 두 개의 캔버스에 대한 그래픽 컨텍스트의 참조도 가져옵니다. 이 참조들은 뒤에서 크로마 키잉 효과를 구현할 때 사용됩니다.

- -

그리고 addEventListener()는 비디오가 재생을 시작하기 위해 호출되기 때문에 사용자가 재생 버튼을 누를 때 알림을 받습니다. 재생이 시작되면 이 코드는 비디오의 가로, 세로를 이등분 한 값을 가져오고(크로마 키잉 효과를 수행할 때 이등분 함), timerCallback() 메서드를 호출하여 비디오를 보고 시각적 효과를 계산하기 시작합니다.

- -

타이머 콜백

- -

타이머 콜백은 비디오가 재생되기 시작("재생" 이벤트가 발생)할 때 호출되는데, 매 프레임마다 키잉 효과를 주기 위해 주기적으로 호출 될 수 있도록 설정해 주어야 합니다.

- -
  processor.timerCallback = function timerCallback() {
-    if (this.video.paused || this.video.ended) {
-      return;
-    }
-    this.computeFrame();
-    let self = this;
-    setTimeout(function() {
-        self.timerCallback();
-      }, 0);
-  },
-
- -

콜백에서 하는 첫 번 째 일은 비디오가 재생되고 있는지 확인하는 것인데, 만약 그렇지 않다면 콜백은 아무 일도 하지 않고 즉시 반환됩니다.

- -

그 후에 현재 비디오 프레임에서 크로마 키잉 효과를 주기 위한 computeFrame() 메서드를 호출합니다.

- -

콜백에서 마지막으로 하는 일은 setTimeout()을 호출하여 가능한 한 빨리 timerCallback() 메서드를 다시 호출할 수 있도록 하는 것입니다. 실제로는, 비디오 프레임 속도에 대한 기반 지식으로 호출할 수 있도록 합니다. 

- -

비디오 프레임 데이터 조작

- -

아래의 computeFrame() 메서드는 프레임 데이터를 가져와서 크로마 키잉 효과를 수행하는 역할을 합니다. 

- -
  processor.computeFrame = function computeFrame() {
-    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
-    let frame = this.ctx1.getImageData(0, 0, this.width, this.height);
-    let l = frame.data.length / 4;
-
-    for (let i = 0; i < l; i++) {
-      let r = frame.data[i * 4 + 0];
-      let g = frame.data[i * 4 + 1];
-      let b = frame.data[i * 4 + 2];
-      if (g > 100 && r > 100 && b < 43)
-        frame.data[i * 4 + 3] = 0;
-    }
-    this.ctx2.putImageData(frame, 0, 0);
-    return;
-  }
-
- -

위 과정이 계속 호출 되면, 아래와 같이 비디오 요소에 가장 최근 프레임의 비디오 데이터가 표출됩니다.

- -

video.png

- -

2번째 줄에서, 첫 번째 캔버스의 그래픽 컨텍스트 ctx1에 비디오 프레임이 복사 되는데, 원본의 절반 크기로 프레임을 그리기 위해 이전에 저장한 가로, 세로 값으로 지정합니다. 컨텍스트의 drawImage() 메서드에 비디오 요소를 전달하기만 하면 현재 비디오 프레임을 그릴 수 있습니다. 결과는 아래와 같습니다: 

- -

sourcectx.png

- -

3번째 줄에서는 첫 번째 컨텍스트의 getImageData() 메서드를 호출해서 현재 비디오 프레임의 원시 그래픽 데이터 복사본을 가져옵니다. 이것은 조작할 수 있는 원시 32비트 픽셀 이미지 데이터를 제공합니다. 4번째 줄에서는 프레임의 이미지 데이터 전체 크기를 4로 나누어 이미지의 픽셀 수를 계산합니다.

- -

6번째 줄에서 시작하는 for 문은 프레임의 픽셀을 스캔하여, 빨간색, 녹색, 파란색 값을 추출하여 사전에 정의된 숫자와 비교합니다. 이 숫자는 foo.png에서 가져온 배경 이미지로 대체될 녹색 스크린 영역을 감지합니다.

- -

녹색 스크린이라고 간주된 매개변수 내의 프레임 이미지 데이터의 모든 픽셀은 투명해질 수 있도록 알파값이 0으로 대체됩니다. 결과적으로 최종 이미지는 100% 투명해진 녹색 스크린 영역을 갖게 되고, 13번째 줄에서 대상 컨텍스트에 고정된 배경 위로 올려져 그려집니다.

- -

결과 이미지는 아래와 같습니다:

- -

output.png

- -

이 과정은 비디오가 재생될 때마다 반복되므로, 매 프레임마다 처리되어 크로마 키잉 효과가 나타나는 것입니다.

- -

라이브 예제 보기

- -

더 보기

- - diff --git a/files/ko/web/html/canvas/tutorial/advanced_animations/index.html b/files/ko/web/html/canvas/tutorial/advanced_animations/index.html deleted file mode 100644 index 1779e63b2c..0000000000 --- a/files/ko/web/html/canvas/tutorial/advanced_animations/index.html +++ /dev/null @@ -1,376 +0,0 @@ ---- -title: 발전된 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Advanced_animations -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

마지막 챕터에서 우리는 몇가지 간단한 애니메이션들을 만들었고 이제 이것들을 어떻게 움직이게 하는지 안다. 이 챕터에서 우리는 각각의 모션들을 자세히 살펴보고 애니메이션을 더 발전시키기 위해 몇가지 물리 동작을 추가할 것이다.

-
- -

공 그리기

- -

우리는 애니메이션 공부를 위해 공을 사용할 것이다. 먼저 캔버스에 공을 그려보자. 다음 코드를 통해 준비해보자.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

언제나처럼, 우리는 context를 먼저 그려야 한다. 공을 그리기 위해 우리는 캔버스에 그림을 그리기 위한 프로퍼티와 draw() 메소드를 가진 ball 오브젝트를 생성할 것이다.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

특이할 건 없다. 이공은 사실상 간단한 원이고 그리는 방법은 다음{{domxref("CanvasRenderingContext2D.arc()", "arc()")}} 메소드에서 참고할 수 있다.

- -

속도 추가하기

- -

우리한테는 이제 공이 있다. 이제 이 튜토리얼 마지막 챕터에서 배웠던 것과 같은 기본 애니메이션을 추가할 준비가 되었다. 다시 한 번, 애니메이션 컨트롤은 {{domxref("window.requestAnimationFrame()")}}가 도와주 것이다. 공은 위치에 속도 벡터를 추가하여 움직일 수 있게 된다.  각각의 프레임에, 우리는{{domxref("CanvasRenderingContext2D.clearRect", "clear", "", 1)}}를 캔버스에 주어 오래된 원을 이전 프래임에서 지운다.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e) {
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

경계

- -

경게 충돌 테스트의 필요 없이 우리가 만든 공은 캔버스 밖으로 빠르게 빠져나갈 것입니다. 우리는 공의 x 와 y 위치가 캔버스 차원을 빠져나갔는지 체크해서 방향과 속도를 바꿔주어야 합니다. 그러기 위해서 우리는 draw 메소드에 다음 확인사항을 추가할 것입니다.:

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

First demo

- -

이제 동작을 확인해 봅시다. 시작하려먼 마우스를 캔버스 안으로 움직여 주세요.

- - - -

{{EmbedLiveSample("First_demo", "610", "310")}}

- -

가속

- -

움직임을 좀 더 리얼하게 만들기 위해, 우리는 속도를 다음과 같이 줄 겁니다. 예를들어:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

이것은 각 프레임의 세로 속도를 줄여주어, 공이 결국 바닥에서 튀게 만듭니다.

- - - -

{{EmbedLiveSample("Second_demo", "610", "310")}}

- -

후행 효과

- -

지금까지 우리는 {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}메소드를 사용해서 이전 프레임을 지웠다. 만약 당신이 {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}}르 사용하여 약간 투명도를 준다면, 쉽게 후행 효과(Trailing effect)를 만들 수 있을 것이다.

- -
ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-ctx.fillRect(0, 0, canvas.width, canvas.height);
- - - -

{{EmbedLiveSample("Third_demo", "610", "310")}}

- -

마우스 컨트롤 추가하기

- -

공을 컨트롤 하기 위해, 우리는 mousemove 이벤트를 사용하여 마우스를 따라오게 할 것이다. click 이벤트를 통해 공을 놓으면 다시 공이 튀도록 할 것이다.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e) {
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener('click', function(e) {
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener('mouseout', function(e) {
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

마우스로 공을 움직이고, 클릭을 통해 놓아보자.

- -

{{EmbedLiveSample("Adding_mouse_control", "610", "310")}}

- -

Breakout

- -

이 짧은 챕터는 발전된 애니메이션을 만들기 위한 조금의 기술을 설명했다. 여기에 더 많은 것들이 있다! 노나 벽돌을 추가해서 이 튜토리얼을  Breakout 으로 발전시키는 건 어떨까?  Game development에서 게임에 관련된 글들을 찾아보자.

- -

더보기

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html b/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index df094acb71..0000000000 --- a/files/ko/web/html/canvas/tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,732 +0,0 @@ ---- -title: 스타일과 색 적용하기 -slug: Web/HTML/Canvas/Tutorial/Applying_styles_and_colors -tags: - - HTML5 - - 그래픽 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그라디언트, 패턴 및 그림자를 추가하는 방법을 배우게됩니다.

-
- -

색상

- -

지금까지는 그리기 메소드만 살펴봤습니다. 도형에 색을 적용하고자 하면, fillStyle과  strokeStyle 두 가지 중요한 속성을 사용할 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
도형을 채우는 색을 설정합니다.
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
도형의 윤곽선 색을 설정합니다.
-
- -

여기서의 color는 CSS의 {{cssxref("<color>")}}, 그라디언트 객체, 패턴 객체를 뜻합니다. 그라디언트 객체와 패턴 객체는 페이지 아래에서 설명합니다. 윤곽선과 채움 색의 초기 설정값은 검은색입니다. (CSS 색상 값 #000000)

- -
-

참고: strokeStyle 또는 fillStyle 속성을 설정하면, 새로 설정된 값이 앞으로 그려질 도형의 기본 값이 됩니다. 각 도형에 다른 색을 적용하려면 fillStyle 또는 strokeStyle 속성을 다시 적용해야 합니다.

-
- -

색의 올바른 값은 CSS3 사양에 나오는 {{cssxref("<color>")}} 값입니다. 아래에 나오는 색은 모두 한가지 색을 다르게 표현한 것입니다.

- -
// fillStyle에 적용되는 색은 모두 '오렌지'
-
-ctx.fillStyle = "orange";
-ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255, 165, 0)";
-ctx.fillStyle = "rgba(255, 165, 0, 1)";
-
- -

fillStyle 예제

- -

이 예제에서 for 반복문을 두 번 사용하여 사각형 격자를 그릴 것입니다. 결과는 스크린샷과 같을 것입니다. 결과가 그리 대단한 것은 아닙니다. 각 사각형의 RGB 색상값에서 붉은색과 녹색 값만을 변수 i와 j를 사용하여 변경합니다. 파란색 채널은 고정된 값입니다. 채널 값들을 변경함으로써, 모든 종류의 팔레트를 생성할 수 있습니다. 단계를 늘리면 Photoshop에서 사용하는 색상 팔레트와 비슷한 모양을 얻을 수 있습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++){
-    for (var j = 0; j < 6; j++){
-      ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
-                       Math.floor(255 - 42.5 * j) + ', 0)';
-      ctx.fillRect(j*25,i*25,25,25);
-    }
-  }
-}
- - - -

결과는 아래와 같습니다.

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

strokeStyle 예제

- -

이번 예제는 위에 나온 예제와 비슷하지만, strokeStyle 속성을 사용하여 윤곽선의 색을 바꿉니다. 사각형 대신, 원을 그리는 arc() 메소드를 사용합니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 6; i++) {
-    for (var j = 0; j < 6; j++) {
-      ctx.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
-                       Math.floor(255 - 42.5 * j) + ')';
-      ctx.beginPath();
-      ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-      ctx.stroke();
-    }
-  }
-}
- - - -

결과는 아래와 같습니다.

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

투명도

- -

캔버스에는 불투명한 도형을 그릴 수도 있고, 반투명한 도형도 그릴 수도 있습니다. globalAlpha 값을 설정하거나 윤곽선 또는 채움 스타일에 반투명 색을 적용하면 됩니다.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
투명도 값이 설정되면 이후 캔버스에 그려지는 모든 도형들의 투명도가 바뀝니다. 설정하는 값은 0.0(완전히 투명)과 1.0(완전히 불투명) 사이에 있어야 하며, 초기 설정값은 1.0(완전히 투명)입니다.
-
- -

globalAlpha는 모두 같은 투명도로 캔버스에 많은 도형을 그릴 때 유용합니다. 하지만, 보통은 각각의 도형마다 투명도를 설정하는 것이 더 유용할 것입니다.

- -

strokeStyle과 fillStyle 값에 CSS rgba 색상값을 적용할 수 있으므로, 투명한 색을 적용하려면 아래와 같은 표기법을 사용할 수 있습니다.

- -
// 외곽선과 채움 스타일에 투명 적용
-
-ctx.strokeStyle = 'rgba(255, 0, 0, 0.5)';
-ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
-
- -

rgba() 함수는 rgb() 함수와 비슷하지만, 인자가 하나 더 있습니다. 마지막 인자는 투명도 값을 설정하는 인자입니다. 올바른 범위는 0.0(완전히 투명)에서 1.0(완전히 불투명)입니다.

- -

globalAlpha 예제

- -

이 예제에서, 네 가지 다른 색을 가진 사각형을 배경에 그릴 것입니다. 그 위에, 반투명한 원을 여러 개 그릴 것입니다. globalAlpha 값을 0.2로 설정하면 이후 그려질 도형은 이 값을 사용합니다. for 반복문을 사용하여 점점 큰 반지름의 원을 그립니다. 최종 결과물은 원형 그레이디언트가 됩니다. 원이 겹쳐지면서 점점 불투명해지는 것을 볼 수 있으며, 최종적으로 한 가운데에 있는 원에서는 뒷 배경이 거의 보이지 않게 됩니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // 배경을 그린다
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0, 0, 75, 75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75, 0, 75, 75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0, 75, 75, 75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75, 75, 75, 75);
-  ctx.fillStyle = '#FFF';
-
-  // 투명값을 설정한다
-  ctx.globalAlpha = 0.2;
-
-  // 반투명한 원을 그린다
-  for (var i = 0; i < 7; i++){
-    ctx.beginPath();
-    ctx.arc(75, 75, 10 + 10 * i, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

rgba()를 사용한 예제

- -

두번째 예제에서는 위의 예제와 비슷한 일을 하지만, 겹쳐진 원을 그리는 대신, 불투명도가 증가하는 작은 사각형을 그릴 것입니다. 각각의 도형마다 윤곽선이나 채움 스타일을 따로따로 설정할 수 있기 때문에, rgba()를 사용할 때는 조금 더 제어가 쉽고 융통성도 있습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 배경을 그린다
-  ctx.fillStyle = 'rgb(255,221,0)';
-  ctx.fillRect(0,0,150,37.5);
-  ctx.fillStyle = 'rgb(102,204,0)';
-  ctx.fillRect(0,37.5,150,37.5);
-  ctx.fillStyle = 'rgb(0,153,255)';
-  ctx.fillRect(0,75,150,37.5);
-  ctx.fillStyle = 'rgb(255,51,0)';
-  ctx.fillRect(0,112.5,150,37.5);
-
-  // 반투명한 사각형을 그린다
-  for (var i=0;i<10;i++){
-    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
-    for (var j=0;j<4;j++){
-      ctx.fillRect(5+i*14,5+j*37.5,14,27.5)
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

선 모양

- -

선의 스타일을 바꾸는 방법이 몇가지 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
이후 그려질 선의 두께를 설정합니다.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
선의 끝 모양을 설정합니다.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
선들이 만나는 "모서리"의 모양을 설정합니다.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
두 선이 예각으로 만날 때 접합점의 두께를 제어할 수 있도록, 연결부위의 크기를 제한하는 값을 설정합니다.
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
음수가 아닌 짝수를 포함하는 현재 선의 대시 패턴 배열을 반환합니다.
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
현재 선의 대시 패턴을 설정합니다.
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
선의 대시 배열이 어디서 시작될지 지정합니다.
-
- -

아래 예제들을 보면 어떻게 동작하는지 이해할 수 있을 것입니다.

- -

lineWidth 예제

- -

현재 선의 두께를 설정합니다. 설정값은 반드시 양수이어야 하며, 초기 설정값은 1.0 단위입니다.

- -

선의 두께는 지정된 경로의 가운데에 있는 획의 두께입니다. 이 말의 뜻은, 경로의 좌우로, 설정된 두께 반 만큼의 폭 영역이 그려진다는 것입니다. 캔버스 좌표는 픽셀을 직접 참조하지 않으므로, 선명한 수평 및 수직선을 얻기 위해 특별히 주의를 기울여야 합니다.

- -

아래에 나오는 예제에서는, 선의 두께가 점점 증가하는 10개의 직선이 그려집니다. 가장 왼쪽의 선은 1.0 단위 폭입니다. 그러나, 경로의 위치 때문에 가장 왼쪽과 다른 모든 홀수 폭 두께 선은 선명하게 보이지 않습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++){
-    ctx.lineWidth = 1 + i;
-    ctx.beginPath();
-    ctx.moveTo(5 + i * 14, 5);
-    ctx.lineTo(5 + i * 14, 140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

선명한 선을 얻으려면 경로에 획을 어떻게 그려지는지 이해해야 합니다. 아래의 이미지를 보면, 격자는 캔버스의 좌표 격자를 나타냅니다. 격자선 사이에 있는 사각형은 실제 픽셀과 딱 맞아 떨어집니다. 아래에 있는 첫번째 이미지를 보면, (2,1)에서 (5,5)로 사각형이 채워져 있습니다. 사각형의 전체 영역(연한 붉은 색)은 픽셀 경계선 사이에 딱 맞아 떨어지기 때문에 채워진 사각형은 선명한 가장자리를 갖습니다.

- -

- -

만일 (3,1)에서 (3,5)로 그리는 직선의 두께가 1.0이라면, 두번째 이미지와 같은 상황이 됩니다. 채워진 실제 영역 (진한 파란색)은 패스의 양쪽에있는 픽셀의 절반까지만 확장됩니다. 이것은 1 픽셀을 채우는 것이 아니므로 근사값으로 화면에 그려지게 됩니다. 그래서 양옆의 영역(연한 파란색과 짙은 파란 색)으로, 실제 설정한 색과는 다른 흐릿한 색으로 채워지는 것입니다. 이전 예제에서 보듯이 선 두께가 1.0인 선에서 일어난 일입니다.

- -

이렇게 되는 것을 막으려면, 경로를 아주 정밀하게 생성해야 합니다. 선의 두께가 1.0이면 경로의 양쪽으로 0.5 단위만큼이라는 것을 알고 있으니, (3.5,1)에서 (3.5,5)로 그리는 경로를 생성하는 세번째 이미지의 결과는 완벽히 정밀하게 1 픽셀 두께의 수직선이 됩니다.

- -
-

참고: 위에 나온 수직선 그리기 예제를 살펴보면, Y 위치는 정수로 된 격자선 위치를 참조하고 있습니다. 그렇지 않았다면, 끝점에서 픽셀의 반을 차지한 상태로 보였을 것입니다. (초기값이 butt인 lineCap 스타일의 설정값에 따라 다르게 보입니다. 홀수 두께 선들의 좌표를 0.5 픽셀씩 조정하여 다시 계산하고 싶을지도 모릅니다. lineCap 스타일을 square로 설정함으로써, 끝점에서 선의 외곽 경계선은 픽셀에 딱 맞게 자동적으로 확장될 것입니다.)

- -

경로의 시작 지점과 종료 지점의 끝점만이 영향을 받는다는 것에 주목하세요. 만약 closePath()로 경로가 닫힌다면, 시작 지점과 종료 지점은 없는 것입니다. 그 대신, 경로 안에 있는 모든 끝점들은, 초기 설정값이 miter인 lineJoin 스타일의 설정값을 사용하여 이전 부분 및 다음 부분과 이어지는데, 교차되는 점들로 이어진 부분들의 외곽 경계선을 자동적으로 확장하는 효과가 생깁니다. 그렇기 때문에 만약 이들 이어진 부분들이 수직 또는 수평이라면, 그려지는 선들은 각 끝점의 중심에 놓인 픽셀을 가득 채우게 될 것입니다. 이들 선 스타일에 대한 예제는 아래에 나옵니다.

-
- -

짝수 두께의 선들은 반으로 나누어도 각각의 반은 정수의 양만큼이기 때문에 픽셀을 조정할 필요가 없습니다.

- -

비트맵이 아닌 벡터 2D 그래픽으로 작업할 때, 작업을 시작할 때는 약간 힘들겠지만, 격자와 경로의 위치에 주의를 기울인다면, 크기를 키우거나 줄이거나 또는 어떠한 변형을 하더라도 그리려는 이미지는 똑바로 보일 것입니다. 1.0 두께의 수직선은 2배로 크기를 키웠을 때, 정확히 2 픽셀 두께의 선이 되며, 올바른 위치에 나타날 것입니다.

- -

lineCap 예제

- -

lineCap 속성은 그리려는 모든 선의 끝점 모양을 결정합니다. butt, round, square라는 세 가지 값을 가지며, 초기 설정값은 butt입니다.

- -

- -
-
butt
-
선의 끝이 좌표에 딱맞게 잘립니다.
-
round
-
선의 끝이 동그랗습니다.
-
square
-
선 끝에, 선 두께 반만큼의 사각형 영역이 더해집니다.
-
- -

이 예제에서는, 각기 다른 lineCap 속성 값을 가진 선 세개가 그려집니다. 또한 각 선들의 차이점을 정확히 보이기 위한 안내선이 추가로 그려집니다. 세개의 선 모두, 이 안내선 위에 시작과 종료 좌표가 있습니다.

- -

맨 왼쪽에 있는 선은 초기 설정값인 butt을 사용합니다. 안내선에 딱 맞게 선이 시작되고 끝이 납니다. 가운데에 있는 선은 round를 사용합니다. 선 두께의 반을 반지름으로 하는 반원이 끝에 붙습니다. 맨 오른쪽에 있는 선은 square를 사용합니다. 선 두께 만큼의 너비와 선 두께 반 만큼의 높이를 가진 네모 상자가 끝에 붙습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt','round','square'];
-
-  // 안내선을 그린다
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10, 10);
-  ctx.lineTo(140, 10);
-  ctx.moveTo(10, 140);
-  ctx.lineTo(140, 140);
-  ctx.stroke();
-
-  // 선을 그린다
-  ctx.strokeStyle = 'black';
-  for (var i=0;i<lineCap.length;i++){
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25 + i * 50, 10);
-    ctx.lineTo(25 + i * 50,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

lineJoin 예제

- -

lineJoin 속성은, 도형을 이루는 선이나 호나 곡선들이 연결되는 지점의 모양을 결정합니다. 끝점과 제어점이 정확히 같은 위치인, 길이가 0인 부분들은 제외된다.

- -

이 속성에는 세 가지 값이 있는데, round, bevel, miter이며, 초기 설정값은 miter입니다. 두 부분들이 같은 방향으로 연결되어 있는 경우에는, lineJoin을 설정해도 아무런 효과가 나타나지 않습니다.

- -

- -
-
round
-
도형의 모서리를, 연결되는 부분들의 공통 끝점을 중심으로 하는 원 모양으로 만듭니다. 이때 원의 반지름은 선의 두께와 같습니다.
-
bevel
-
도형의 모서리를, 연결되는 부분들의 공통 끝점에서 세모 모양으로 만듭니다.
-
miter
-
도형의 모서리를, 두 부분의 바깥쪽 테두리 선을 각각 연장하여 교차된 점으로 생긴 마름모꼴 모양으로 만듭니다. miterLimit 속성값에 따라 모양이 달라집니다.
-
- -

아래 예제에서 세 개의 경로를 그릴 것입니다. 세 경로는 각각 다른 lineJoin 속성값을 가집니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round', 'bevel', 'miter'];
-  ctx.lineWidth = 10;
-  for (var i=0;i<lineJoin.length;i++){
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5, 5 + i * 40);
-    ctx.lineTo(35, 45 + i * 40);
-    ctx.lineTo(75, 5 + i * 40);
-    ctx.lineTo(115, 45 + i * 40);
-    ctx.lineTo(155, 5 + i * 40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

miterLimit 속성 예제

- -

위의 예제에서 볼 수 있듯이, 속성값을 miter로 하여 두 선이 연결되면, 연결되는 두 선의 바깥쪽 테두리는 연장선이 만나는 지점까지 확장됩니다. 연결된 두 선이 이루는 각도가 크면, 확장되는 영역이 크지 않지만, 각도가 작아짐(끝이 뾰족해짐)에 따라서 이 영역이 기하급수적으로 커질 수도 있습니다.

- -

miterLimit 속성은 끝점이 만나는 지점과 테두리 연장선이 만나는 지점이 얼마나 떨어져 있을지를 결정합니다. 두 선이 이 값을 넘게 되면, lineJoin 속성의 bevel 값 모양이 적용됩니다. miterLimit 속성값(HTML {{HTMLElement("canvas")}}에서, 초기 설정값은 10.0)에 의해, 현재 좌표 방식 안에서, 선의 두께에 따라, 어느 정도까지 뾰족해질 수 있는지가 계산됩니다. 그래서 miterLimit은 현재 디스플레이 비율이나 경로의 변형 같은 것으로 각각 설정될 수 있습니다. 그렇게 하여 선의 모서리에만 영향을 줍니다.

- -

더 자세히 얘기하자면, 뾰족함 제한(miter limit)은, 선 두께의 반과 확장되는 길이(HTML 캔버스에서, 선이 연결되는 바깥쪽 끝부분과, 경로에서 연결되는 두 부분의 공통 끝점 사이로 측정합니다.)의 최대 허용 비율입니다. 이것은 두 부분의 외곽선이 만나는 안쪽 점과 바깥쪽 점 사이 거리와, 선 두께의 최대 허용 비율과 같습니다. miter 값 모양이 아닌 bevel 값 모양으로 연결되는 지점의 최소 안쪽 각 반 만큼의 값과 같은 것입니다.

- -
    -
  • miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
    • -
  • 초기 설정값이 10.0인 뾰족함 제한(miter limit)값은 약 11도보다 낮은 예각인 곳을 bevel 값 모양으로 만듭니다.
    • -
  • 뾰족함 제한 값이 √2 ≈ 1.4142136(반올림)과 같다면 연결되는 곳이 둔각이거나 직각인 곳을 제외한 모든 곳을 bevel 값 모양으로 만듭니다.
    • -
  • 뾰족함 제한 값이 1.0과 같다면 모든 곳을 bevel 값 모양으로 만듭니다.
    • -
  • 뾰족함 제한 값에는 1.0보다 작은 값이 올 수 없습니다.
    • -
- -

다음 예제에서는 miterLimit 값을 바꾸고 그 결과가 어떤지 바로 확인할 수 있습니다. 파란색 선은 지그재그 무늬 안에서 선들의 시작 지점과 종료 지점을 나타냅니다.

- -

이 예제에서 miterLimit 값을 4.2보다 낮게 설정하면, 모든 연결 지점은 bevel 값 모양이 되어 파란색 선에 붙을 것입니다. miterLimit 값이 10보다 높다면, 거의 모든 연결 지점들이 파란색 선 바깥쪽에 있을 것입니다. 왼쪽으로 갈수록 파란색 선에서 더 많이 튀어나오는데, 왼쪽으로 갈수록 연결되는 각이 더 작아지기 때문입니다. 값을 5로 설정하면, 반은 bevel 값 모양으로, 반은 miter 값 모양이 됩니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 캔버스를 비운다
-  ctx.clearRect(0,0,150,150);
-
-  // 안내선을 그린다
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5,50,160,50);
-
-  // 선 스타일을 설정한다
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // 입력 값을 검사한다
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // 선을 그린다
-  ctx.beginPath();
-  ctx.moveTo(0,100);
-  for (i=0;i<24;i++){
-    var dy = i%2==0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

 

- -

대시라인 사용하기

- -

setLineDash 메소드와 lineDashOffset 속성은 선의 대시 패턴을 지정합니다.  setLineDash 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 lineDashOffset 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다.

- -

이 예제에서 우리는 행진하는 개미 효과를 만들고 있습니다. 컴퓨터 그래픽 프로그램의 선택 도구에서 흔히 볼 수있는 애니메이션 기술입니다. 테두리를 애니메이션화하여 사용자가 선택 테두리와 이미지 배경을 구별하는 데 도움이됩니다. 이 튜토리얼의 뒷부분에서 이 작업 및 다른 기본 애니메이션을 수행하는 방법을 배울 수 있습니다.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10, 10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

그라디언트(Gradient)

- -

다른 그래픽 프로그램들과 마찬가지로, 선형 및 원형의 그레이디언트를 사용할 수 있습니다. 다음 메소드 중 하나를 사용하여 {{domxref("CanvasGradient")}} 객체를 생성합니다. 그런 다음 이 객체를 fillStyle 또는 strokeStyle 속성에 할당 할 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
시작점 좌표를 (x1, y1)로 하고, 종료점 좌표를 (x2, y2)로 하는 선형 그라디언트 오브젝트를 생성합니다.
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
반지름이 r1이고 좌표 (x1, y1)을 중심으로 하는 원과, 반지름이 r2이고 좌표 (x2, y2)를 중심으로 하는 원을 사용하여 그라디언트가 생성됩니다.
-
- -

예를 들면 다음과 같습니다.

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

CanvasGradient 객체를 만들었다면, addColorStop() 메소드를 사용하여, 오브젝트에 색을 적용할 수 있습니다.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
gradient 오브젝트에 새로운 색 중단점(color stop)을 생성합니다. position은 0.0에서 1.0 사이의 숫자이고 그라디언트에서 색상의 상대적인 위치를 정의합니다. color 인자는 CSS {{cssxref("<color>")}}를 나타내는 문자열이어야하고, 그라디언트가 (전환효과로) 진행되면서 도달한 지점의 색상을 의미합니다.
-
- -

색 중단점은 원하는 만큼 마음대로 추가할 수 있습니다. 흰 색에서 검은 색으로 변하는 선형 그레이디언트를 만들려면 아래와 같이 합니다.

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

createLinearGradient 예제

- -

이 예제에서 그레이디언트 두 개를 만들 것입니다. 예제에서 볼 수 있듯이, strokeStyle과 fillStyle 속성 모두 canvasGradient 오브젝트를 속성 값으로 가질 수 있습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 그레이디언트를 생성한다
-  var lingrad = ctx.createLinearGradient(0, 0, 0, 150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0, 50, 0, 95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0, 0, 0, 0)');
-
-  // 외곽선과 채움 스타일에 그레이디언트를 적용한다
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // 도형을 그린다
-  ctx.fillRect(10, 10, 130, 130);
-  ctx.strokeRect(50, 50, 50, 50);
-
-}
-
- - - -

첫번째 그라디언트는 배경 그라디언트입니다. 보시다시피 같은 위치에 두 가지 색상을 지정했습니다. 매우 선명한 색상 전환을 만들기 위해 이 작업을 수행합니다(이 경우 흰색에서 녹색으로). 일반적으로 색상 중단점을 정의하는 순서는 중요하지 않지만, 이 특별한 경우에는 의미가 있습니다.

- -

두 번째 그래디언트에서는 시작 색상 (위치 0.0)을 지정하지 않았는데, 자동으로 다음 색상 중단점의 색상으로 가정하기 때문에 반드시 필요하지는 않기 때문입니다. 따라서 위치 0.5에 검은색을 지정하면 시작부터 중단점까지 자동으로 검정색 그라이언트를 만듭니다.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

createRadialGradient 예제

- -

이 예제에서는 원형 그레이디언트를 4개 만들 것입니다. 포토샵같은 프로그램에서 원형 그레이디언트를 만들 때는 하나의 점을 중심으로 그레이디언트를 만드는데, 캔버스의 원형 그레이디언트에서는 시작과 종료 지점 두군데를 제어할 수 있기 때문에, 기존의 프로그램에서 볼 수 있는 원형 그레이디언트보다는 더 복잡한 효과를 만들어 낼 수 있습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 그라디언트를 생성한다
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
-
-  // 도형을 그린다
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
-}
-
- - - -

이 예제에서는 원형 그레이디언트에 사용되는 두 원의 중심을 달리하여 입체적인 공처럼 보이게 했습니다. 안쪽 원과 바깥쪽 원은 겹치지 않게 하는 것이 좋습니다. 왜냐하면 예상하기 힘든 이상한 결과가 나타날 수 있기 때문입니다.

- -

그레이디언트의 마지막 색 적용 지점에서는 투명도를 적용하였습니다. 투명도가 적용된 지점에서 이전 지점까지의 색 변화를 보기 좋게 만들려면, 두 지점에 똑같은 색을 적용하면 되는데, 이 예제에서는 색의 값을 다른 방식으로 입력하여 헷갈릴 수도 있습니다. 첫번째 그레이디언트에 사용된 #019F62와 rgba(1,159,98,1)은 같은 색입니다.

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

패턴(Patterns)

- -

이전 페이지의 예제 중 하나에서 일련의 루프를 사용하여 이미지 패턴을 만들었습니다. 그러나 훨씬 간단한 메소드 인 createPattern () 메소드가 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
새 캔버스 패턴 객체를 만들어 반환합니다. image는 {{domxref("CanvasImageSource")}}(즉, {{domxref("HTMLImageElement")}}, 다른 캔버스, {{HTMLElement("video")}} 요소 등등)입니다. type은 이미지 사용 방법을 나타내는 문자열입니다.
-
- -

type은 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다.

- -
-
repeat
-
수직 및 수평 방향으로 이미지를 이어 붙입니다.
-
repeat-x
-
수평 방향으로만 이미지를 이어 붙입니다.
-
repeat-y
-
수직 방향으로만 이미지를 이어 붙입니다.
-
no-repeat
-
이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다.
-
- -

이 메소드를 사용하여 위에서 본 그라디언트 메소드와 매우 유사한 {{domxref ( "CanvasPattern")}} 객체를 생성합니다. 패턴을 생성하면 fillStyle 또는 strokeStyle 속성에 패턴을 할당 할 수 있습니다. 예를 들면 다음과 같습니다.

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img, 'repeat');
-
- -
-

참고: drawImage () 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.

-
- -

createPattern 예제

- -

이 마지막 예제에서, fillStyle 속성에 적용할 패턴을 만들 것입니다. 한 가지 눈여겨 볼 것은, 이미지 onload 핸들러 사용한다는 것입니다. 이미지를 패턴에 적용하기 전에 불러오기가 완료되었는지 확인하는 것입니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 패턴으로 사용할 이미지 오브젝트를 생성한다
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function() {
-
-    // 패턴을 생성한다
-    var ptrn = ctx.createPattern(img,'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

그림자

- -

그림자 사용에는 네 개의 속성이 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
그림자가 객체에서 연장되어야하는 수평 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
그림자가 객체에서 연장되어야하는 수직 거리를 나타냅니다. 이 값은 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
흐림(blur) 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을 받지 않습니다. 기본값은 0입니다.
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
그림자 효과의 색상을 나타내는 표준 CSS 색상 값. 기본적으로 완전 검은색입니다.
-
- -

shadowOffsetX 및 shadowOffsetY 속성은 그림자가 X 및 Y 방향으로 객체에서 얼마나 멀리 떨어져야하는지 나타냅니다. 이 값은 현재 변환 행렬의 영향을받지 않습니다. 음수값을 사용하면 그림자가 위로 또는 왼쪽으로 확장되고 양수값을 사용하면 그림자가 아래로 또는 오른쪽으로 확장됩니다. 기본값은 모두 0입니다.

- -

shadowBlur 속성은 흐림 효과의 크기를 나타냅니다. 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을받지 않습니다. 기본값은 0입니다.

- -

shadowColor 속성은 그림자 효과의 색상을 나타내는 표준 CSS 색상 값입니다. 기본값은 완전 검은색입니다.

- -
-

알아둘 것: 음영은 source-over 합성 작업에만 사용됩니다.

-
- -

그림자 있는 글자 예제

- -

이 예제에서는 그림자가 있는 글자를 그립니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-  ctx.font = "20px Times New Roman";
-  ctx.fillStyle = "Black";
-  ctx.fillText("Sample String", 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

다음 장에서 텍스트 그리기에 대한 font 속성과 fillText 메소드를 살펴 보겠습니다.

- -

캔버스 채우기 규칙

- -

fill (혹은 {{domxref("CanvasRenderingContext2D.clip", "clip")}} 및 {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}})을 사용할 때 한 점이 경로 안쪽 또는 바깥에 있는지 그리고 따라서 채워지는지 여부를 결정하기 위한 채우기 규칙 알고리즘을 선택적으로 제공 할 수 있습니다. 경로가 교차하거나 중첩 된 경우에 유용합니다.
-
- 다음 두가지 값을 사용할 수 있습니다:

- - - -

In this example we are using the evenodd rule.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
-  ctx.fill('evenodd');
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/ko/web/html/canvas/tutorial/basic_animations/index.html b/files/ko/web/html/canvas/tutorial/basic_animations/index.html deleted file mode 100644 index 457d658172..0000000000 --- a/files/ko/web/html/canvas/tutorial/basic_animations/index.html +++ /dev/null @@ -1,310 +0,0 @@ ---- -title: 기본 애니메이션 -slug: Web/HTML/Canvas/Tutorial/Basic_animations -tags: - - HTML5 - - 그래픽 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -

{{HTMLElement("canvas")}} 요소는 자바스크립트로 제어하는 것이므로, 애니메이션도 쉽게 만들 수 있습니다. 복잡한 애니메이션을 만드는 것은 추가 작업이 더 필요하고, 앞으로 그에 대한 페이지도 머지 않아 추가되기를 기대합니다.

-

도형은 한번 만들어 놓으면 그 모습 그대로 있다는 것이 애니메이션을 만들 때의 가장 큰 제약일 것입니다. 그 도형을 움직이고자 하면 그 도형뿐만이 아니라 그 도형이 그려지기 전에 그려진 모든 것을 다시 그려야 합니다. 복잡한 장면을 다시 그리는 것은 시간도 많이 걸리며, 코드를 실행하는 컴퓨터의 능력에 따라 달라집니다.

-

기본 애니메이션 단계

-

한 장면을 그리려면 아래와 같은 단계를 밟습니다.

-
    -
  1. 캔버스를 비웁니다.
    - 그리려는 도형이 (배경 이미지를 만들 때처럼) 캔버스를 가득 채우는 것이 아니라면, 이전에 그려진 모든 도형을 지울 필요가 있습니다. 가장 쉬운 방법은 clearRect() 메소드를 사용하는 것입니다.
    2. -
  2. 캔버스 상태를 저장합니다.
    - 캔버스 상태에 영향을 주는 (스타일 변경, 모양 변형 등의) 설정값을 바꾸려고 하고, 바뀐 값을 각 장면마다 사용하려고 한다면, 원래 상태를 저장할 필요가 있습니다.
    3. -
  3. 애니메이션할 도형을 그립니다.
    - 실제 장면을 그리는 단계입니다.
    4. -
  4. 캔버스 상태를 복원합니다.
    - 새로운 장면을 그리기 전에 저장된 상태를 복원합니다.
    5. -
-

애니메이션 제어하기

-

캔버스 메소드를 사용하거나 사용자 함수를 사용하여 캔버스에 도형들을 그립니다. 보통의 경우에서는, 코드 실행이 완료되면 캔버스에 나타나는 결과만을 보게 됩니다. 예를 들어,  for 반복문 안에서 애니메이션을 실행하는 것은 불가능합니다.

-

그래서 정해진 시간마다 그리기 함수를 실행하는 방법이 필요한 것입니다. 아래와 같이 애니메이션을 제어하는 두 가지 방법이 있습니다.

-

예정된 변경

-

정해진 시간마다 특정 함수를 부를 때 사용할 수 있는  {{domxref("window.setInterval()")}}과 {{domxref("window.setTimeout()")}} 함수가 있습니다.

-
-

알아둘 것: 현재는 애니메이션을 만드는 방법으로  {{domxref("window.requestAnimationFrame()")}} 메소드를 추천합니다. 이에 대한 튜토리얼은 곧 업데이트할 것입니다.

-
-
-
- setInterval(function, delay)
-
- delay 밀리세컨드(1,000분의 1초)마다 function 함수 반복 실행을 시작합니다.
-
- setTimeout(function, delay)
-
- delay 밀리세컨드(1,000분의 1초) 경과후, function 함수를 실행합니다.
-
-

사용자의 제어를  필요로 하지 않는 반복 실행에는  setInterval() 함수가 알맞을 것입니다.

-

사용자 상호 작용 변경

-

애니메이션을 제어하는 두번째 방법은 사용자 입력입니다. 게임을 만들려고 한다면, 애니메이션을 제어하기 위해 키보드나 마우스 이벤트를 사용할 수 있을 것입니다.  {{domxref("EventListener")}}를 설정하여, 사용자와 상호 작용하여 애니메이션 함수를 실행합니다.

-

사용자 상호 작용이 필요하다면, 우리가 만든 애니메이션용 프레임웍(framework)의 최소 기능 버전 또는 최대 기능 버전을 사용할 수 있을 것입니다.

-
var myAnimation = new MiniDaemon(null, animateShape, 500, Infinity);
-

또는

-
var myAnimation = new Daemon(null, animateShape, 500, Infinity);
-

아래 예제에서는, 애니메이션을 제어하기 위해 {{domxref("window.setInterval()")}}을 사용할 것입니다. 페이지 제일 아래쪽에 {{domxref("window.setTimeout()")}}을 사용한 예제 링크도 있습니다.

-

태양계 애니메이션

-

이 예제에서는 달이 지구를 돌고 지구가 태양을 도는 애니메이션을 만듭니다.

-
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init(){
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  setInterval(draw,100);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0,0,300,300); // 캔버스를 비운다
-
-  ctx.fillStyle = 'rgba(0,0,0,0.4)';
-  ctx.strokeStyle = 'rgba(0,153,255,0.4)';
-  ctx.save();
-  ctx.translate(150,150);
-
-  // 지구
-  var time = new Date();
-  ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
-  ctx.translate(105,0);
-  ctx.fillRect(0,-12,50,24); // Shadow
-  ctx.drawImage(earth,-12,-12);
-
-  // 달
-  ctx.save();
-  ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
-  ctx.translate(0,28.5);
-  ctx.drawImage(moon,-3.5,-3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150,150,105,0,Math.PI*2,false); // 지구 궤도
-  ctx.stroke();
-
-  ctx.drawImage(sun,0,0,300,300);
-}
-
- -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

-

시계 애니메이션

-

이 예제에서는, 현재 시각을 보여주는 움직이는 시계를 만듭니다.

-
function init(){
-  clock();
-  setInterval(clock,1000);
-}
-
-function clock(){
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0,0,150,150);
-  ctx.translate(75,75);
-  ctx.scale(0.4,0.4);
-  ctx.rotate(-Math.PI/2);
-  ctx.strokeStyle = "black";
-  ctx.fillStyle = "white";
-  ctx.lineWidth = 8;
-  ctx.lineCap = "round";
-
-  // 시계판 - 시
-  ctx.save();
-  for (var i=0;i<12;i++){
-    ctx.beginPath();
-    ctx.rotate(Math.PI/6);
-    ctx.moveTo(100,0);
-    ctx.lineTo(120,0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // 시계판 - 분
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i=0;i<60;i++){
-    if (i%5!=0) {
-      ctx.beginPath();
-      ctx.moveTo(117,0);
-      ctx.lineTo(120,0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI/30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr>=12 ? hr-12 : hr;
-
-  ctx.fillStyle = "black";
-
-  // 시간 표시 - 시
-  ctx.save();
-  ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20,0);
-  ctx.lineTo(80,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // 시간 표시 - 분
-  ctx.save();
-  ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28,0);
-  ctx.lineTo(112,0);
-  ctx.stroke();
-  ctx.restore();
-
-  // 시간 표시 - 초
-  ctx.save();
-  ctx.rotate(sec * Math.PI/30);
-  ctx.strokeStyle = "#D40000";
-  ctx.fillStyle = "#D40000";
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30,0);
-  ctx.lineTo(83,0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0,0,10,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95,0,10,0,Math.PI*2,true);
-  ctx.stroke();
-  ctx.fillStyle = "rgba(0,0,0,0)";
-  ctx.arc(0,0,3,0,Math.PI*2,true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0,0,142,0,Math.PI*2,true);
-  ctx.stroke();
-
-  ctx.restore();
-}
- -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

-

움직이는 파노라마 사진

-

이 예제에서는, 움직이는 파노라마 사진을 만듭니다. 사용할 그림은 위키피디어(Wikipedia)에서 구한 요세미티 국립공원입니다. 캔버스보다 큰 그림을 사용할 수도 있습니다.

-
var img = new Image();
-
-// 변수
-// 스크롤될 이미지, 방향, 속도를 바꾸려면 변수값을 바꾼다.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // 값이 작을 수록 빨라진다
-var scale = 1.05;
-var y = -4.5; // 수직 옵셋
-
-// 주요 프로그램
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width*scale;
-    imgH = img.height*scale;
-    if (imgW > CanvasXSize) { x = CanvasXSize-imgW; } // 캔버스보다 큰 이미지
-    if (imgW > CanvasXSize) { clearX = imgW; } // 캔버스보다 큰 이미지
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // 캔버스보다 큰 이미지
-    else { clearY = CanvasYSize; }
-    // 캔버스 요소 얻기
-    ctx = document.getElementById('canvas').getContext('2d');
-    // 새로 그리기 속도 설정
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    // 캔버스를 비운다
-    ctx.clearRect(0,0,clearX,clearY);
-    // 이미지가 캔버스보다 작거나 같다면 (If image is <= Canvas Size)
-    if (imgW <= CanvasXSize) {
-        // 재설정, 처음부터 시작
-        if (x > (CanvasXSize)) { x = 0; }
-        // 추가 이미지 그리기
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-CanvasXSize+1,y,imgW,imgH); }
-    }
-    // 이미지가 캔버스보다 크다면 (If image is > Canvas Size)
-    else {
-        // 재설정, 처음부터 시작
-        if (x > (CanvasXSize)) { x = CanvasXSize-imgW; }
-        // 추가 이미지 그리기
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img,x-imgW+1,y,imgW,imgH); }
-    }
-    // 이미지 그리기
-    ctx.drawImage(img,x,y,imgW,imgH);
-    // 움직임 정도
-    x += dx;
-}
-
-

예제에 사용된 {{HTMLElement("canvas")}}의 크기는 아래와 같다. 캔버스의 너비가 변수 CanvasXSize값과 같고, 캔버스의 높이는 변수 CanvasYSize값과 같다는 것에 주목하라.

-
<canvas id="canvas" width="800" height="200"></canvas>
-

Live sample

-

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

-

또 다른 예제들

-
-
- Gartic
-
- 다중 사용자 지원 그리기 놀이.
-
- Canvascape
-
- 3D 어드벤처 게임 (1인칭 슈팅).
-
- A basic ray-caster
-
- 키보드를 사용한 애니메이션 제어 방법에 대한 좋은 예제.
-
- canvas adventure
-
- 키보드 제어를 사용하는 또다른 좋은 예제.
-
- An interactive Blob
-
- 물방울 갖고 놀기.
-
- Flying through a starfield
-
- 별, 동그라미, 네모가 떠다니는 우주를 누벼라.
-
- iGrapher
-
- 주식 시장 자료 차트 예제.
-
-

이것도 보세요

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Compositing", "Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas")}}

diff --git a/files/ko/web/html/canvas/tutorial/basic_usage/index.html b/files/ko/web/html/canvas/tutorial/basic_usage/index.html deleted file mode 100644 index f455563e87..0000000000 --- a/files/ko/web/html/canvas/tutorial/basic_usage/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: 캔버스(Canvas) 기본 사용법 -slug: Web/HTML/Canvas/Tutorial/Basic_usage -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

{{HTMLElement ( "canvas")}} {{Glossary ( "HTML")}} 엘리먼트를 살펴보는 것으로 이 튜토리얼을 시작해 보겠습니다. 이 페이지의 끝에서 캔버스 2D 컨텍스트를 설정하는 방법을 알게되고, 여러분의 브라우저에서 첫 번째 예제를 그리게 될 것입니다.

-
- -

<canvas> 요소

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

{{HTMLElement ( "canvas")}}는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 {{HTMLElement ( "img")}} 요소처럼 보입니다. 실제로 <canvas> 요소에는 {{htmlattrxref ( "width", "canvas")}}와 {{htmlattrxref ( "height", "canvas")}}의 두 속성만 있습니다. 이것들은 모두 선택사항이며 {{Glossary ( "DOM")}} 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 요소는 {{Glossary ( "CSS")}}에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .

- -
-

노트: 만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 <canvas> 속성에서 width 및 height 속성을 명시적으로 지정하십시오.

-
- -

 

- -

id 속성(어트리뷰트)는  <canvas> 요소에 국한되지 않는 글로벌HTML 속성 (global HTML attributes )중 하나로,  모든 HTML 요소에 적용 ( class 등등)될 수 있습니다.  대체로 항상 id 속성을 사용해 주는것이 좋은데, 이는 스크립트 내에서 구분을 쉽게 해 줄 수 있기 때문입니다.

- -

<canvas>요소는 일반적인 이미지 ({{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("background")}}…) 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다.  이 방법이 어떻게 사용되는지는 해당 챕터에서 확인 할 수 있습니다.  캔버스에 스타일링이 따로 지정 되있지 않았다면, 캔버스 스타일은 투명으로 설정되어있습니다.

- -
-

대체 콘텐츠

- -

<canvas> 요소는 {{HTMLElement("video")}}, {{HTMLElement("audio")}} 혹은 {{HTMLElement("picture")}}처럼 {{HTMLElement("img")}}와는 달리, 인터넷 익스플로러 9 이하의 버전이나 텍스트기반 브라우저 등과 같은, 캔버스를 지원하지 않는 오래된 브라우저들을 위한 대체 컨텐츠를 정의하기 쉽습니다. 여러분은 그러한 브라우저들을 위한 대체 컨텐츠를 제공해야 합니다.

- -

대체 컨텐츠를 제공하는 것은 매우 간단합니다. <canvas>태그 안에  대체 컨텐츠를 삽입합니다. <canvas>태그 를 지원하지 않는 브라우저는 컨테이너를 무시하고 컨테이너 내부의 대체 콘텐츠를 렌더링 합니다. <canvas>를 지원하는 브라우저는 컨테이너 내부의 내용을 무시하고 캔버스를 정상적으로 렌더링합니다.

- -

예를 들어, 캔버스 내용에 대한 텍스트 설명을 제공하거나 동적으로 렌더링 된 내용의 정적 이미지를 제공 할 수 있습니다. 이것은 다음과 같이 보일 수있습니다:

- -
<canvas id="stockGraph" width="150" height="150">
-  current stock price: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

사용자에게 캔버스를 지원하는 다른 브라우저를 사용하도록 하는 것은 캔버스를 해석하지 못하는 사용자에게 전혀 도움이 되지 않습니다. 유용한 대체 텍스트나 하위 DOM을 제공하는 것이 캔버스에 더 쉽게 접근할수 있도록 도움이 될 것입니다.

- -

</canvas> 태그 필수

- -

대체 컨텐츠가 제공되는 방식때문에, {{HTMLElement("img")}} 요소와 달리, {{HTMLElement("canvas")}} 요소는 닫는 태그(</canvas>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.

- -

대체 컨텐츠가 필요하지 않다면, 단순히 <canvas id="foo" ...></canvas>가 모든 미지원 브라우저에서 완전하게 호환됩니다.

- -

렌더링 컨텍스트

- -

{{HTMLElement("canvas")}} 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다. 본 튜토리얼에서는, 2D 렌더링 컨텍스트를 집중적으로 다룹니다. 다른 컨텍스트는 다른 렌더링 타입을 제공합니다. 예를 들어, WebGL은 OpenGL ES 을 기반으로 하는 3D 컨텍스트를 사용합니다.

- -

캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. {{HTMLElement("canvas")}} 요소는 {{domxref("HTMLCanvasElement.getContext", "getContext()")}} 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다.  getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다. 본 튜토리얼에서 다루고 있는 2D 그래픽의 경우, {{domxref("CanvasRenderingContext2D")}}을 얻기위해 "2d"로 지정합니다.

- -
var canvas = document.getElementById('tutorial');
-var ctx = canvas.getContext('2d');
-
- -

첫 번째 줄의 스크립트는  {{domxref ( "document.getElementById()")}} 메서드를 호출하여 {{HTMLElement ( "canvas")}} 요소를 표시할 DOM을 검색합니다.  요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.

- -
-

지원여부 검사

- -

대체 콘텐츠는 {{HTMLElement ( "canvas")}}를 지원하지 않는 브라우저에 표시됩니다. 스크립트 역시 간단하게 getContext() 메소드의 존재 여부를 테스트함으로써 프로그래밍 방식으로 지원하는지를 확인할 수 있습니다. 위의 코드 예제는 다음과 같이 될 수 있습니다:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext){
-  var ctx = canvas.getContext('2d');
-  // drawing code here
-} else {
-  // canvas-unsupported code here
-}
-
-
-
- -

템플릿 뼈대

- -

다음은 이후의 예제들에서 시작점으로 사용될 수 있는 가장 최소한의 템플릿입니다.

- -
-

알아두기: HTML 내에 스크립트(script)를 사용하는것은 좋은 연습 방법이 아닙니다. 다음의 예시에서는 간결하게 나타내기 위해 사용 한 것입니다.

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8"/>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw(){
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext){
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

위 스크립트에 draw() 함수 문서가 호출되었는데, 이는 문서가 {{event("load")}} 이벤트를 수신하여 페이지 로딩이 완료될 때 한번 실행됩니다. 이 함수 혹은 이와 유사한 함수는, 페이지가 처음 로딩되는 한, {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}}, 혹은 또 다른 이벤트 핸들러 등을 이용하여 호출될 수 있습니다.

- -

다음은 템플릿이 실제로 어떻게 실행되는지를 보여줍니다. 보이는 바와 같이, 초기에 blank 로 보여집니다.

- -

{{EmbedLiveSample("A_skeleton_template", 160, 160)}}

- -

기본 예제

- -

먼저 두 개의 직사각형을 그린 간단한 예제를 보도록하겠습니다. 그 중 하나는 투명도(alpha transparency)를가집니다. 나중에 이 예제가 어떻게 작동하는지 자세히 살펴 보겠습니다.

- -
<!DOCTYPE html>
-<html>
- <head>
-  <meta charset="utf-8"/>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect (10, 10, 50, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect (30, 30, 50, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

이 예제는 다음과 같습니다.

- -

{{EmbedLiveSample("A_simple_example", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}

diff --git a/files/ko/web/html/canvas/tutorial/compositing/example/index.html b/files/ko/web/html/canvas/tutorial/compositing/example/index.html deleted file mode 100644 index e3d74f5220..0000000000 --- a/files/ko/web/html/canvas/tutorial/compositing/example/index.html +++ /dev/null @@ -1,293 +0,0 @@ ---- -title: 도형 합성 예제 -slug: Web/HTML/Canvas/Tutorial/Compositing/Example -tags: - - HTML5 - - 그래픽 - - 예제 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Compositing/Example ---- -
{{CanvasSidebar}}
- -

이 샘플 프로그램에서는 여러 가지 도형 합성 방법을 보여줍니다. 출력은 다음과 같습니다:

- -

{{ EmbedLiveSample('도형_합성_예제', '100%', '7250', '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}

- -

도형 합성 예제

- -

다음 코드에서는 프로그램의 나머지 부분에서 사용할 전역 값을 설정합니다.

- -
var canvas1 = document.createElement("canvas");
-var canvas2 = document.createElement("canvas");
-var gco = [ 'source-over','source-in','source-out','source-atop',
-            'destination-over','destination-in','destination-out','destination-atop',
-            'lighter', 'copy','xor', 'multiply', 'screen', 'overlay', 'darken',
-            'lighten', 'color-dodge', 'color-burn', 'hard-light', 'soft-light',
-            'difference', 'exclusion', 'hue', 'saturation', 'color', 'luminosity'
-          ].reverse();
-var gcoText = [
-'기본 설정으로, 새로운 도형이 원래 도형 위에 그려집니다.',
-'새로운 도형이 원래 도형과 겹치는 부분에만 그려지며, 나머지는 투명하게 설정됩니다.',
-'새로운 도형이 원래 도형과 겹치지 않는 부분에만 그려집니다.',
-'새로운 도형이 원래 도형과 겹치는 부분에만 그려집니다.',
-'새로운 도형이 원래 도형 아래에 그려집니다.',
-'원래 도형 중 새로운 도형과 겹치는 부분이 유지되며, 나머지는 투명하게 설정됩니다.',
-'원래 도형 중 새로운 도형과 겹치지 않는 부분이 유지됩니다.',
-'원래 도형 중 새로운 도형과 겹치는 부분만 유지됩니다. 새로운 도형은 원래 도형 아래에 그려집니다.',
-'두 도형이 겹치는 곳의 색상이 두 색상값을 합한 값으로 결정됩니다.',
-'새로운 도형만 그려집니다.',
-'두 도형이 겹치는 곳이 투명하게 변하며, 나머지는 평범하게 그려집니다.',
-'위쪽 레이어의 픽셀값이 아래쪽 레이어의 해당하는 픽셀값과 곱해지며, 결과적으로 어두운 이미지가 생성됩니다.',
-'픽셀값을 뒤집고 곱한 다음 도로 뒤집습니다. 결과적으로 밝은 이미지가 생성됩니다(multiply의 반대).',
-'multiply와 screen의 조합입니다. 아래쪽 레이어의 어두운 부분은 더 어두워지고, 밝은 부분은 더 밝아집니다.',
-'두 레이어 중 어두운 픽셀값을 취합니다.',
-'두 레이어 중 밝은 픽셀값을 취합니다.',
-'아래쪽 레이어의 픽셀값을 위쪽 레이어의 뒤집힌 픽셀값으로 나눕니다.',
-'아래쪽 레이어의 뒤집힌 픽셀값을 위쪽 레이어의 픽셀값으로 나누고, 그 값을 도로 뒤집습니다.',
-'overlay와 같이 multiply와 screen의 조합이지만, 위아래 레이어의 순서가 바뀐 상태입니다.',
-'조금 더 부드러운 hard-light입니다. 완전한 검은색/흰색에서 무조건 완전한 검은색/흰색이 나오지 않습니다.',
-'한쪽 레이어의 픽셀값에서 다른 쪽 레이어의 픽셀값을 뺍니다. 빼는 순서는 결과값이 양수가 나오는 순서입니다.',
-'difference와 비슷하지만 대비가 덜합니다.',
-'아래쪽 레이어의 채도(chroma)와 명도(luma)를 보존하고 위쪽 레이어의 색상(hue)을 적용합니다.',
-'아래쪽 레이어의 색상과 명도를 보존하고 위쪽 레이어의 채도를 적용합니다.',
-'아래쪽 레이어의 명도를 보존하고 위쪽 레이어의 색상과 채도를 적용합니다.',
-'아래쪽 레이어의 색상과 채도를 보존하고 위쪽 레이어의 명도를 적용합니다.'
-          ].reverse();
-var width = 320;
-var height = 340;
-
- -

메인 프로그램

- -

페이지를 불러오고 나면 다음 코드에서 예제를 준비하고 실행합니다:

- -
window.onload = function() {
-    // lum in sRGB
-    var lum = {
-        r: 0.33,
-        g: 0.33,
-        b: 0.33
-    };
-    // 캔버스 크기 변경
-    canvas1.width = width;
-    canvas1.height = height;
-    canvas2.width = width;
-    canvas2.height = height;
-    lightMix()
-    colorSphere();
-    runComposite();
-    return;
-};
-
- -

또한 다음 코드의 runComposite()가 여러 가지 작업을 처리하며, 어려운 부분은 보조 함수를 사용합니다.

- -
function createCanvas() {
-    var canvas = document.createElement("canvas");
-    canvas.style.background = "url("+op_8x8.data+")";
-    canvas.style.border = "1px solid #000";
-    canvas.style.margin = "5px";
-    canvas.width = width/2;
-    canvas.height = height/2;
-    return canvas;
-}
-
-function runComposite() {
-    var dl = document.createElement("dl");
-    document.body.appendChild(dl);
-    while(gco.length) {
-        var pop = gco.pop();
-        var dt = document.createElement("dt");
-        dt.textContent = pop;
-        dl.appendChild(dt);
-        var dd = document.createElement("dd");
-        var p = document.createElement("p");
-        p.textContent = gcoText.pop();
-        dd.appendChild(p);
-
-        var canvasToDrawOn = createCanvas();
-        var canvasToDrawFrom = createCanvas();
-        var canvasToDrawResult = createCanvas();
-
-        var ctx = canvasToDrawResult.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = pop;
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.globalCompositeOperation = "source-over";
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText(pop, 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawOn.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas1, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('기존 도형', 5, height/2 - 5);
-        ctx.restore();
-
-        var ctx = canvasToDrawFrom.getContext('2d');
-        ctx.clearRect(0, 0, width, height)
-        ctx.save();
-        ctx.drawImage(canvas2, 0, 0, width/2, height/2);
-        ctx.fillStyle = "rgba(0,0,0,0.8)";
-        ctx.fillRect(0, height/2 - 20, width/2, 20);
-        ctx.fillStyle = "#FFF";
-        ctx.font = "14px arial";
-        ctx.fillText('새로운 도형', 5, height/2 - 5);
-        ctx.restore();
-
-        dd.appendChild(canvasToDrawOn);
-        dd.appendChild(canvasToDrawFrom);
-        dd.appendChild(canvasToDrawResult);
-
-        dl.appendChild(dd);
-    }
-};
-
- -

보조 함수

- -

이 프로그램에서는 몇몇 보조 함수를 사용합니다.

- -
var lightMix = function() {
-    var ctx = canvas2.getContext("2d");
-    ctx.save();
-    ctx.globalCompositeOperation = "lighter";
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(255,0,0,1)";
-    ctx.arc(100, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,0,255,1)";
-    ctx.arc(220, 200, 100, Math.PI*2, 0, false);
-    ctx.fill()
-    ctx.beginPath();
-    ctx.fillStyle = "rgba(0,255,0,1)";
-    ctx.arc(160, 100, 100, Math.PI*2, 0, false);
-    ctx.fill();
-    ctx.restore();
-    ctx.beginPath();
-    ctx.fillStyle = "#f00";
-    ctx.fillRect(0,0,30,30)
-    ctx.fill();
-};
-
- -
var colorSphere = function(element) {
-    var ctx = canvas1.getContext("2d");
-    var width = 360;
-    var halfWidth = width / 2;
-    var rotate = (1 / 360) * Math.PI * 2; // per degree
-    var offset = 0; // scrollbar offset
-    var oleft = -20;
-    var otop = -20;
-    for (var n = 0; n <= 359; n ++) {
-        var gradient = ctx.createLinearGradient(oleft + halfWidth, otop, oleft + halfWidth, otop + halfWidth);
-        var color = Color.HSV_RGB({ H: (n + 300) % 360, S: 100, V: 100 });
-        gradient.addColorStop(0, "rgba(0,0,0,0)");
-        gradient.addColorStop(0.7, "rgba("+color.R+","+color.G+","+color.B+",1)");
-        gradient.addColorStop(1, "rgba(255,255,255,1)");
-        ctx.beginPath();
-        ctx.moveTo(oleft + halfWidth, otop);
-        ctx.lineTo(oleft + halfWidth, otop + halfWidth);
-        ctx.lineTo(oleft + halfWidth + 6, otop);
-        ctx.fillStyle = gradient;
-        ctx.fill();
-        ctx.translate(oleft + halfWidth, otop + halfWidth);
-        ctx.rotate(rotate);
-        ctx.translate(-(oleft + halfWidth), -(otop + halfWidth));
-    }
-    ctx.beginPath();
-    ctx.fillStyle = "#00f";
-    ctx.fillRect(15,15,30,30)
-    ctx.fill();
-    return ctx.canvas;
-};
-
- -
// HSV (1978) = H: Hue / S: Saturation / V: Value
-Color = {};
-Color.HSV_RGB = function (o) {
-    var H = o.H / 360,
-        S = o.S / 100,
-        V = o.V / 100,
-        R, G, B;
-    var A, B, C, D;
-    if (S == 0) {
-        R = G = B = Math.round(V * 255);
-    } else {
-        if (H >= 1) H = 0;
-        H = 6 * H;
-        D = H - Math.floor(H);
-        A = Math.round(255 * V * (1 - S));
-        B = Math.round(255 * V * (1 - (S * D)));
-        C = Math.round(255 * V * (1 - (S * (1 - D))));
-        V = Math.round(255 * V);
-        switch (Math.floor(H)) {
-            case 0:
-                R = V;
-                G = C;
-                B = A;
-                break;
-            case 1:
-                R = B;
-                G = V;
-                B = A;
-                break;
-            case 2:
-                R = A;
-                G = V;
-                B = C;
-                break;
-            case 3:
-                R = A;
-                G = B;
-                B = V;
-                break;
-            case 4:
-                R = C;
-                G = A;
-                B = V;
-                break;
-            case 5:
-                R = V;
-                G = A;
-                B = B;
-                break;
-        }
-    }
-    return {
-        R: R,
-        G: G,
-        B: B
-    };
-};
-
-var createInterlace = function (size, color1, color2) {
-    var proto = document.createElement("canvas").getContext("2d");
-    proto.canvas.width = size * 2;
-    proto.canvas.height = size * 2;
-    proto.fillStyle = color1; // top-left
-    proto.fillRect(0, 0, size, size);
-    proto.fillStyle = color2; // top-right
-    proto.fillRect(size, 0, size, size);
-    proto.fillStyle = color2; // bottom-left
-    proto.fillRect(0, size, size, size);
-    proto.fillStyle = color1; // bottom-right
-    proto.fillRect(size, size, size, size);
-    var pattern = proto.createPattern(proto.canvas, "repeat");
-    pattern.data = proto.canvas.toDataURL();
-    return pattern;
-};
-
-var op_8x8 = createInterlace(8, "#FFF", "#eee");
diff --git a/files/ko/web/html/canvas/tutorial/compositing/index.html b/files/ko/web/html/canvas/tutorial/compositing/index.html deleted file mode 100644 index 108c493d9d..0000000000 --- a/files/ko/web/html/canvas/tutorial/compositing/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: 도형 합성 -slug: Web/HTML/Canvas/Tutorial/Compositing -tags: - - HTML5 - - 그래픽 - - 캔버스 -translation_of: Web/API/Canvas_API/Tutorial/Compositing ---- -

이전 페이지들에서 나온 모든 예제에서, 새로 그리는 도형은 언제나 이미 그려진 도형의 위에 그려졌습니다. 대부분의 상황에서는 이렇게 하는 것이 적절하지만, 도형을 합성하기 위한 순서를 제한하게 되는데,  globalCompositeOperation 속성을 설정함으로써 이러한 상태를 바꿀 수 있습니다.

- -

globalCompositeOperation

- -

기존 도형 뒤에 새로운 도형을 그릴 수 있을 뿐만 아니라, 도형의 일정 영역을 가려 보이지 않게 하거나 캔버스의 특정 부분을 지우는 (clearRect() 메소드는 사각형의 영역만을 지우지만, 이같은 제한도 없다.) 등의 효과를 얻을 수도 있습니다.

- -
-
globalCompositeOperation = type
-
새로운 도형을 그릴 때, 도형 합성 방법을 설정합니다. type은 다음 26종류의 합성 방법 중에서 선택할 수 있습니다.
-
- -

다음 예제의 코드를 확인하려면 도형 합성 예제를 확인해 주세요.

- -

{{ EmbedLiveSample('도형_합성_예제', 750, 6750, '', 'Web/HTML/Canvas/Tutorial/Compositing/Example') }}

- -

잘라내기 경로(Clipping path)

- -

 잘라내기 경로는 다른 캔버스 도형과 비슷하지만, 다른 도형에서 원하지 않는 부분을 가리는 가면과 같은 역할을 합니다. 오른쪽에 있는 그림을 보면 어떤 역할을 하는지 알 수 있을 것입니다. 붉은 별 모양이 잘라내기 경로입니다. 이 경로 밖에 있는 모든 것은 캔버스에 그려지지 않을 것입니다.

- -

잘라내기 경로와 위에서 살펴본  globalCompositeOperation 속성을 비교해 보면,   source-in과 source-atop에서 비슷한 효과가 보입니다. 이들과 잘라내기 경로와의 가장 중요한 차이점은, 잘라내기 경로 자체는 캔버스에 전혀 그려지지 않는다는 것입니다. 잘라내기 경로는 제한된 영역 안에서 여러 가지 도형을 그리는 데에 적합합니다.

- -

캔버스에 도형 그리기에서는 stroke()과 fill() 메소드만을 설명했었는데, clip()이라는 세 번째 메소드도 있습니다.

- -
-
clip()
-
현재 그려지는 경로를 현재 잘라내기 경로로 만듭니다.
-
- -

경로를 닫기 위해 closePath() 대신 clip()을 사용하고, 경로를 채우거나 윤곽선을 만드는 대신 잘라내기 경로로 만들 수 있습니다.

- -

{{HTMLElement("canvas")}} 요소의 초기 설정값으로써, 캔버스는 캔버스와 똑같은 크기의 잘라내기 경로를 가집니다. 크기가 똑같기 때문에 잘라내기 효과는 나타나지 않습니다.

- -

clip 예제

- -

다음 예제에서는 특정 영역의 별들만 보이도록 동그란 모양의 잘라내기 경로를 사용할 것입니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.fillRect(0,0,150,150);
-  ctx.translate(75,75);
-
-  // 동그란 모양의 잘라내기 경로를 생성한다
-  ctx.beginPath();
-  ctx.arc(0,0,60,0,Math.PI*2,true);
-  ctx.clip();
-
-  // 배경을 그린다
-  var lingrad = ctx.createLinearGradient(0,-75,0,75);
-  lingrad.addColorStop(0, '#232256');
-  lingrad.addColorStop(1, '#143778');
-
-  ctx.fillStyle = lingrad;
-  ctx.fillRect(-75,-75,150,150);
-
-  // 별을 그린다
-  for (var j=1;j<50;j++){
-    ctx.save();
-    ctx.fillStyle = '#fff';
-    ctx.translate(75-Math.floor(Math.random()*150),
-                  75-Math.floor(Math.random()*150));
-    drawStar(ctx,Math.floor(Math.random()*4)+2);
-    ctx.restore();
-  }
-
-}
-
-function drawStar(ctx,r){
-  ctx.save();
-  ctx.beginPath()
-  ctx.moveTo(r,0);
-  for (var i=0;i<9;i++){
-    ctx.rotate(Math.PI/5);
-    if(i%2 == 0) {
-      ctx.lineTo((r/0.525731)*0.200811,0);
-    } else {
-      ctx.lineTo(r,0);
-    }
-  }
-  ctx.closePath();
-  ctx.fill();
-  ctx.restore();
-}
-
- - - -

코드의 위쪽 몇 줄에서는 배경으로 캔버스 크기와 같은 검은색 네모를 그리고, 가운데로 원점을 옮깁니다. 그런 다음 호를 그리고 clip()을 사용하여 동그란 모양의 잘라내기 경로를 생성합니다. 캔버스 상태를 저장할 때 잘라내기 경로도 같이 저장됩니다. 이전의 잘라내기 경로를 보존하려면, 새로운 잘라내기 경로를 만들기 전에 캔버스 상태를 저장하면 됩니다.

- -

잘라내기 경로를 만든 후에 그려지는 모든 것들은, 그 경로의 안쪽에서만 보입니다. 이는 그 다음에 그려지는 선형 그라디언트에서 확실히 볼 수 있습니다. 이렇게 하고 나서, drawStar() 함수를 사용하여 위치와 크기가 모두 다른 50개의 별을 그립니다. 이 별들은 잘라내기 경로 안쪽에만 나타납니다.

- -

{{EmbedLiveSample("A_clip_example", "180", "180", "https://mdn.mozillademos.org/files/208/Canvas_clip.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Transformations", "Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}

diff --git a/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html b/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html deleted file mode 100644 index 09df4b829d..0000000000 --- a/files/ko/web/html/canvas/tutorial/drawing_shapes/index.html +++ /dev/null @@ -1,577 +0,0 @@ ---- -title: 캔버스(canvas)를 이용한 도형 그리기 -slug: Web/HTML/Canvas/Tutorial/Drawing_shapes -tags: - - Canvas - - 그래픽 - - 중급 - - 캔버스 - - 튜토리얼 -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
- -
-

앞서 캔버스 환경 설정(canvas environment)을 완료 하였다면, 이제 어떻게 캔버스에 그릴수 있는지에 대하여 자세하게 알아봅시다. 이 글을 끝내고 난 후, 여러분은 어떻게 사각형, 삼각형, 선, 아치, 곡선 등 의 기본적인 도형을 그릴수 있는지 익히실 수 있을 것 입니다.  캔버스 위에 물체를 그릴 때에는 path를 사용하는것이 필수적이므로 우리는 이것이 어떻게 사용되는지 볼 것입니다.

-
- -

그리드

- -

드로잉을 시작 하기에 앞서, 캔버스 그리드 혹은 좌표공간 (coordinate space) 에 대하여 이야기 해보겠습니다. 이전 페이지에서 이야기 했던 HTML 골격(skeleton)는 가로 세로 각각 150 픽셀의 캔버스 요소를 가지고 있습니다. 오른쪽에 보시면, 캔버스와 기본 그리드가 놓인것을 보실 수 있습니다. 기본적으로 그리드의 1단위는 캔버스의 1픽셀과 같습니다. 이 그리드의 원점은 좌측상단의 (0,0) 입니다. 모든 요소들은 이 원점을 기준으로 위치됩니다. 그렇기 때문에, 파란 사각형의 좌측상단은 왼쪽에서 x 픽셀, 위에서 y 픽셀 떨어진 것이라 볼 수 있고, 이 사각형의 좌표는 (x,y)가 됩니다. 이 튜토리얼 후반부에서 어떻게 원점을 이동하며, 그리드를 회전하고 같은 비율로 확대/축소할 수 있는지 살펴볼 것이지만, 지금은 기본에 충실하도록 합시다.

- -

직사각형 그리기

- -

{{Glossary("SVG")}} 와는 다르게, {{HTMLElement("canvas")}}는 오직 하나의 원시적인 도형만을 제공합니다. 바로 직사각형 입니다. 다른 모든 도형들은 무조건 하나 혹은 하나 이상의 path 와 여러 점으로 이어진 선으로 만들어집니다. 다행히도, 우리는 여러 path drawing 함수(function)들을 통해 아주 어려운 도형들도 그릴수 있습니다.

- -

첫번째로, 직사각형을 봅시다. 캔버스 위에 직사각형을 그리는데에는 세가지 함수(function)가 있습니다:

- -
-
{{domxref("CanvasRenderingContext2D.fillRect", "fillRect(x, y, width, height)")}}
-
색칠된 직사각형을 그립니다.
-
{{domxref("CanvasRenderingContext2D.strokeRect", "strokeRect(x, y, width, height)")}}
-
직사각형 윤곽선을 그립니다.
-
{{domxref("CanvasRenderingContext2D.clearRect", "clearRect(x, y, width, height)")}}
-
특정 부분을 지우는 직사각형이며, 이 지워진 부분은 완전히 투명해집니다.
-
- -

각각의 세 함수는 모두 같은 변수를 가집니다. x와 y는 캔버스의 좌측상단에서 사각형의 (원점으로부터 상대적인) 위치를 뜻하며,  width 와 height는 사각형의 크기를 뜻하게 됩니다.

- -

전 페이지에서 보여드렸던 draw() 함수(function)를 이용하여 위의 세가지 함수를 아래의 예제에 적용해 보았습니다.

- -

직사각형 도형 예제

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

위 예제의 결과는 다음과 같습니다.

- -

{{EmbedLiveSample("Rectangular_shape_example", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

fillRect() 함수는 가로 세로 100 픽셀 사이즈의 검정 사각형을 그립니다. 이후 clearRect() 함수가 60x60 픽셀의 사각형 크기로 도형 중앙을 지우게 되고, strokeRect()은 이 빈 사각형 공간 안에 50x50 픽셀 사이즈의 윤곽선만 있는 사각형을 만들게 됩니다.

- -

다음 페이지에서, 우리는 clearRect()를 대신하는 두개의 함수에 대해 살펴보고, 만들어진 도형의 색이나 윤곽선의 스타일을 바꾸는 방법들에 대하여 알아보도록 하겠습니다.

- -

우리가 다음 섹션에서 보게될 path 함수와 다르게 세개의 직사각형 함수는 캔버스에 바로 그릴 수 있습니다.

- -

경로 그리기

- -

경로(path)는 직사각형 이외의 유일한 원시적인(primitive) 도형입니다. 경로는 점들의 집합이며, 선의 한 부분으로 연결되어 여러가지 도형, 곡선을 이루고 두께와 색을 나타내게 됩니다. 경로나 하위 경로(sub-path)는 닫힐 수 있습니다. 경로를 이용하여 도형을 만들 때에는 몇가지 추가적인 단계를 거쳐야 합니다:

- -
    -
  1. 경로를 생성합니다.
    2. -
  2. 그리기 명령어를 사용하여 경로상에 그립니다.
    3. -
  3. 경로가 한번 만들어졌다면, 경로를 렌더링 하기 위해서 윤곽선을 그리거나 도형 내부를 채울수 있습니다.
    4. -
- -

다음은 위의 단계들을 실행하기 위해 사용되는 함수입니다:

- -
-
{{domxref("CanvasRenderingContext2D.beginPath", "beginPath()")}}
-
새로운 경로를 만듭니다. 경로가 생성됬다면, 이후 그리기 명령들은 경로를 구성하고 만드는데 사용하게 됩니다.
-
Path 메소드 (Path methods)
-
물체를 구성할 때 필요한 여러 경로를 설정하는데 사용하는 함수입니다.
-
{{domxref("CanvasRenderingContext2D.closePath", "closePath()")}}
-
현재 하위 경로의 시작 부분과 연결된 직선을 추가합니다.
-
{{domxref("CanvasRenderingContext2D.stroke", "stroke()")}}
-
윤곽선을 이용하여 도형을 그립니다.
-
{{domxref("CanvasRenderingContext2D.fill", "fill()")}}
-
경로의 내부를 채워서 내부가 채워진 도형을 그립니다.
-
- -

경로를 만들기 위한 첫번째 단계는 beginPath() 메소드를 사용하는 것 입니다. 내부적으로, 경로는 도형을 이루는 하위경로(선, 아치 등)들의 집합으로 이루어져있습니다. 이 메소드가 호출될 때 마다, 하위 경로의 모음은 초기화되며, 우리는 새로운 도형을 그릴 수 있게 됩니다.

- -
참고:  현재 열린 path가  비어있는 경우 ( beginPath() 메소드를 사용한 직 후, 혹은캔버스를 새로 생성한 직후), 첫 경로 생성 명령은 실제 동작에 상관 없이 moveTo()로 여겨지게 됩니다. 그렇기 때문에 경로를 초기화한 직후에는 항상 명확하게 시작 위치를 설정해 두는것이 좋습니다.
- -

두번째 단계는 실제로 경로가 그려지는 위치를 설정하는 메소드를 호출하는 것 입니다. 이 내용에 대해서는 곧 보실수 있습니다.

- -

세번째 단계는 선택사항으로 closePath() 메소드를 호출하는 것 입니다. 이 메소드는 현재 점 위치와 시작점 위치를 직선으로 이어서 도형을 닫습니다. 이미 도형이 닫혔거나 한 점만 존재한다면, 이 메소드는 아무것도 하지 않습니다.

- -
참고:  fill() 메소드 호출 시, 열린 도형은 자동으로 닫히게 되므로  closePath()메소드를 호출하지 않아도 됩니다. 이것은 stroke() 메소드에는 적용되지 않습니다.
- -

삼각형 그리기

- -

예를 들어, 삼각형을 그리기 위한 코드는 다음과 같습니다:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75, 50);
-    ctx.lineTo(100, 75);
-    ctx.lineTo(100, 25);
-    ctx.fill();
-  }
-}
-
- -

위 코드의 실행 결과는 다음과 같습니다:

- -

{{EmbedLiveSample("Drawing_a_triangle", 110, 110, "https://mdn.mozillademos.org/files/9847/triangle.png")}}

- -

펜(pen) 이동하기

- -

가장 유용한 함수중에 실제로 어떤 것도 그리지 않지만 위에서 언급한 경로의 일부가 되는  moveTo() 함수가 있습니다. 이는 펜이나 연필을 종이위에서 들어 옆으로 옮기는것이라고 보시면 됩니다.

- -
-
{{domxref("CanvasRenderingContext2D.moveTo", "moveTo(x, y)")}}
-
펜을  x와 y 로 지정된 좌표로 옮깁니다.
-
- -

캔버스가 초기화 되었거나 beginPath() 메소드가 호출되었을 때, 특정 시작점 설정을 위해 moveTo() 함수를 사용하는것이 좋습니다. 또한 moveTo()  함수는 연결되지 않은 경로를 그리는데에도 사용 할 수 있습니다. 아래의 스마일 아이콘을 봅시다.

- -

코드 snippet을 사용해하여 직접 시도하여 보세요. 앞에서 보았던 draw() 함수(function)를 붙혀넣기 해 보세요.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-     var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
-    ctx.moveTo(110, 75);
-    ctx.arc(75, 75, 35, 0, Math.PI, false);  // Mouth (clockwise)
-    ctx.moveTo(65, 65);
-    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Left eye
-    ctx.moveTo(95, 65);
-    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Right eye
-    ctx.stroke();
-  }
-}
-
- -

결과는 다음과 같습니다:

- -

{{EmbedLiveSample("Moving_the_pen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -

 moveTo()를 사용한 코드라인을 지우면 연결된 선들을 확인 할 수 있습니다

- -
-

참고: arc() function에 대하여 더 알아보고 싶다면 아래의  {{anch("Arcs")}} 를 확인하세요.

-
- -

선

- -

직선을 그리기 위해서는 lineTo() 메소드를 사용할 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.lineTo", "lineTo(x, y)")}}
-
현재의 드로잉 위치에서 x와 y로 지정된 위치까지 선을 그립니다.
-
- -

이 메소드는 선의 끝점의 좌표가 되는 x와 y의 두개의 인자가 필요합니다. 시작점은 이전에 그려진 경로에 의해 결정 되며, 이전 경로의 끝점이 다음 그려지는 경로의 시작점이 됩니다. 또한 시작점은 moveTo() 메소드를 통해 변경될 수 있습니다.

- -

아래의 예시는 하나의 두 삼각형 (윤곽선 삼각형, 색칠된 삼각형)을 그립니다.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
-
- -

새로운 경로를 지정하기 위해 beginPath() 메소드를 먼저 실행합니다. 그 다음 moveTo() 메소드를 가지고 시작점을 원하는 위치로 새롭게 지정 해 줍니다. 다음은, 두선을 그어 삼각형의 두 면을 그려줍니다.

- -

{{EmbedLiveSample("Lines", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

여러분은 채워진 삼각형과 윤곽선 삼각형의 차이를 확인 하셨을 겁니다. 위에 언급했던 것 처럼, 경로가 채워지게 되면 그 도형은 자동으로 닫히게 되지만 윤곽선 삼각형에서는 그렇지 않기 때문입니다. 만약에 closePath() 메소드를 윤곽선 삼각형 코드에서 지운다면, 오직 두 선만 그려지게 되며 완벽한 삼각형으로 만들어지지 않습니다.

- -

호(arc)

- -

호나 원을 그리기위해서는 arc() 혹은 arcTo() 메소드를 사용합니다..

- -
-
{{domxref("CanvasRenderingContext2D.arc", "arc(x, y, radius, startAngle, endAngle, anticlockwise)")}}
-
(x, y) 위치에 원점을 두면서, 반지름 r을 가지고,  startAngle 에서 시작하여 endAngle 에서 끝나며 주어진 anticlockwise 방향으로 향하는 (기본값은 시계방향 회전) 호를 그리게 됩니다.
-
{{domxref("CanvasRenderingContext2D.arcTo", "arcTo(x1, y1, x2, y2, radius)")}}
-
주어진 제어점들과 반지름으로 호를 그리고,  이전 점과 직선으로 연결합니다.
-
- -

arc 메소드의 여섯개의 매개변수에 대하여 좀 더 자세하게 알아봅시다: x 와 y는 호를 그릴 때 필요한 원점 좌표입니다. 반지름(radius) 은 말 그대로 호의 반지름을 뜻합니다. startAngle 및 endAngle 매개 변수는 원의 커브를 따라 호의 시작점과 끝점을 라디안 단위로 정의합니다. 이 변수들은 x축을 기준으로 계산됩니다. Boolean 값을 가지는 anticlockwise 변수는 true일 때 호를 반시계 방향으로 그리게 되며, 그렇지 않을 경우에는 시계 방향으로 그리게 됩니다.

- -
-

참고: arc 함수에서 각도는 각이 아닌 라디안 값을 사용합니다. 각도를 라디안으로 바꾸려면 다음의 자바스크립트(JavaScript) 코드를 사용하실 수 있습니다: radians = (Math.PI/180)*degrees.

-
- -

다음의 예제는 우리가 이제껏 봐 왔던 예제들 보다 약간 더 복잡합니다. 이 예제는 12가지의 다양한 각도로 채워진 각기 다른 호를 그립니다.

- -

두개의  for loops은 루프를 통해 호(arc)들의 행과 열을 읽기 위해 사용되었습니다. beginPath()를 사용해 각 호의 새로운 경로를 만듭니다. 코드 내에서, 각각의 매개변수들을 명확하게 보여주기 위해 변수로 정의 하였지만, 실제로 사용할때 꼭 필요한 것은 아닙니다.

- -

x와 y 좌표는 충분히 명확하게 표기되어야 합니다.  radius 와 startAngle은 고정되어 있습니다. endAngle는 처음 180도 (반원) 에서 시작하고 이후 매번 90도씩 증가하다가 마지막 열에서 완벽한 원을 그립니다.

- -

clockwise 매개 변수를 지정한 결과로 첫번째와 세번째 줄은 시계방향으로 원호들이 그려졌고 두번째와 네번째 줄에는 반시계방향의 원호들이 그려졌습니다. 마지막으로 if 문은 위 반쪽이 윤곽선으로, 아래 반쪽이 색으로 채워진 호들을 만들어 냅니다.

- -
-

참고: 이 예제는 다른 예제들 보다 더 큰사이즈의 캔버스가 필요합니다: 150 x 200 픽셀

-
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // x coordinate
-        var y = 25 + i * 50; // y coordinate
-        var radius = 20; // Arc radius
-        var startAngle = 0; // Starting point on circle
-        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
-        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i > 1) {
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-
- -

{{EmbedLiveSample("Arcs", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}}

- -

베지어(Bezier) 곡선과 이차(Quadratic )곡선

- -

다음 경로 타입은 베지어 곡선 (Bézier curves)으로, 삼차(cubic)와 이차(quadric) 변수가 모두 가능합니다. 이 타입은 대게 복잡한 유기체적 형태 (organic shape)를 그리는데 사용됩니다.

- -
-
{{domxref("CanvasRenderingContext2D.quadraticCurveTo", "quadraticCurveTo(cp1x, cp1y, x, y)")}}
-
cp1x 및 cp1y로 지정된 제어점을 사용하여 현재 펜의 위치에서 x와 y로 지정된 끝점까지 이차 베지어 곡선을 그립니다.
-
{{domxref("CanvasRenderingContext2D.bezierCurveTo", "bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)")}}
-
(cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 펜 위치에서 x 및 y로 지정된 끝점까지 삼차 베지어 곡선을 그립니다.
-
- -

오른쪽의 사진은 두 곡선의 차이를 가장 잘 설명해주고 있습니다. 이차 베지에 곡선은 시작점과 끝점 (파란색 점) 그리고 하나의 제어점 (control point, 빨간 점으로 표시)을 가지고 있지만, 삼차 베지에 곡선은 두개의 제어점을 사용하고 있습니다.

- -

두 메소드에 모두 사용되는 x와 y 변수는 모두 끝점의 좌표를 나타냅니다. 첫번째 제어점은 cp1x 와 cp1y 좌표로, 두번째 제어점은 cp2x 와 cp2y  좌표로 표시되었습니다.

- -

이차 및 삼차 베지어 곡선을 사용하는 것은 매우 어려울 수 있습니다. Adobe Illustrator와 같은 벡터 드로잉 소프트웨어와는 달리, 우리는 현재 수행중인 작업에 대해 직접적인 시각적 피드백을 받을 수 없기 때문입니다. 이런 점은 복잡한 모양을 그리기 어렵도록 합니다. 다음 예제에서 우리는 간단한 유기체적 형태만 그리도록 하겠지만, 여러분이 연습과 시간을 투자 하신다면, 이후에 더욱 복잡한 도형을 그릴수 있게 될 것입니다.

- -

이 예제는 아주 어려운 점은 없습니다. 두 경우 모두 연속된 곡선이 그려지면서 최종 모양이 완성됩니다.

- -

이차 베지에 곡선(Quadratic Bezier curves)

- -

이 예제는 여러개의 이차 베지어 곡선을 이용해 말풍선을 만들어 냅니다.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
-
- -

{{EmbedLiveSample("Quadratic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

삼차 베지어 곡선 (Cubic Bezier curves)

- -

이 예제는 삼차 곡선을 이용하여 하트를 그립니다.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Cubic curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
-
- -

{{EmbedLiveSample("Cubic_Bezier_curves", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

직사각형

- -

직사각형을 캔버스에 직접 그리는 {{anch("직사각형 그리기")}}에서 본 세 가지 메소드 외에 rect() 메소드도 있습니다. 이 메소드는 현재 열린 패스에 직사각형 경로를 추가합니다.

- -
-
{{domxref("CanvasRenderingContext2D.rect", "rect(x, y, width, height)")}}
-
좌측상단이 (x, y)이고 폭과 높이가 width와 height인 직사각형을 그립니다.
-
- -

이 메소드가 실행되기 전에, (x,y) 매개변수를 가진 moveTo() 메소드가 자동으로 호출됩니다. 즉, 현재의 펜위치가 자동으로 기본 좌표로 초기화 됩니다.

- -

조합하기

- -

이제까지 이 페이지의 예제들은 각각의 도형마다 하나의 path 함수를 가지고 있었습니다. 하지만 도형을 만드는데에 사용되는 경로의 종류와 개수는 제한이 없습니다. 그렇기 때문에 이 마지막 예제에서는 모든 경로 함수를 합쳐 여러 게임 캐릭터들을 그려보도록 하겠습니다.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
-    roundedRect(ctx, 53, 53, 49, 33, 10);
-    roundedRect(ctx, 53, 119, 49, 16, 6);
-    roundedRect(ctx, 135, 53, 49, 33, 10);
-    roundedRect(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for (var i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for (i = 0; i < 6; i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for (i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = 'black';
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// A utility function to draw a rectangle with rounded corners.
-
-function roundedRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + radius);
-  ctx.lineTo(x, y + height - radius);
-  ctx.arcTo(x, y + height, x + radius, y + height, radius);
-  ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
-  ctx.lineTo(x + width, y + radius);
-  ctx.arcTo(x + width, y, x + width - radius, y, radius);
-  ctx.lineTo(x + radius, y);
-  ctx.arcTo(x, y, x, y + radius, radius);
-  ctx.stroke();
-}
-
- -

결과 이미지는 다음과 같습니다:

- -

{{EmbedLiveSample("Making_combinations", 160, 160, "https://mdn.mozillademos.org/files/9849/combinations.png")}}

- -

이 예제는 보기보다 아주 간단하기 때문에 자세한 설명은 생략하겠습니다. 알아 두어야할 가장 중요한 부분은 fillStyle  코드와 사용된 유틸리티 함수 (roundedRect() 부분) 입니다. 유틸리티 함수를 사용하게 되면, 사용해야 할 코드의 양과 복잡함을 줄여주는데 도움을 줍니다.

- -

이 튜토리얼에서 나중에 fillStyle에 대하여 조금 더 자세하게 알아보도록 하겠지만, 지금은 경로의 채우는 색을 기본값(흑백)에서 바꾸었다가 다시 기본값으로 바꾸는 정도로만 사용하였습니다.

- -

Path2D 오브젝트 (Path2D objects)

- -

마지막 예제에서 보았 듯이, 캔버스에 객체를 그리는 일련의 경로와 그리기 명령이 있을 수 있습니다. 코드를 단순화하고 성능을 향상시키기 위해 최근 버전의 브라우저에서 사용할 수있는 {{domxref("Path2D")}} 객체를 사용하여 이러한 드로잉 명령을 캐시하거나 기록 할 수 있습니다. 이로써 여러분은 경로를 빠르게 다시 실행 시킬 수 있습니다.

- -

어떻게 Path2D object를 생성 할 수 있는지 확인해 봅시다:

- -
-
{{domxref("Path2D.Path2D", "Path2D()")}}
-
Path2D() 생성자는 새로운 Path2D 객체를 반환합니다. 선택적으로 다른 경로를 인수로 받거나(복사본을 생성), SVG 경로 데이터로 구성된 문자열을 받아서 객체로 반환합니다.
-
- -
new Path2D();     // empty path object
-new Path2D(path); // copy from another Path2D object
-new Path2D(d);    // path from SVG path data
- -

moveTo, rect, arc 혹은 quadraticCurveTo 등과 같은 모든 경로 메소드 (path methods)들은  Path2D 객체에서 사용 가능합니다.

- -

Path2D API는 또한 addPath 메소드를 사용하여 경로를 결합하는 방법을 추가합니다. 예를 들자면, 여러 요소를 사용하는 오브젝트를 만들 때 유용하게 사용 될 수 있습니다.

- -
-
{{domxref("Path2D.addPath", "Path2D.addPath(path [, transform])")}}
-
옵션으로 변환 행렬(transformation matrix)을 사용하여 현재 경로에 경로를 추가합니다.
-
- -

Path2D 예제

- -

이 예제에서는, 직사각형과 원을 만들어 볼 것입니다. 나중에 사용할 것을 고려하여, 두 도형 모두 Path2D object로 저장 될 것입니다. 새로운 버전의 Path2D API에서는 여러 메소드들이 지금 사용하고있는 path가 아닌 Path2D object를 옵션으로 선택하여 사용 할 수 있도록 업데이트 되었습니다. 아래의 예제에서 보시면, stroke 와 fill 메소드가 오브젝트를 캔버스 위에 그리도록 path 변수와 함께 사용되었습니다.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    var rectangle = new Path2D();
-    rectangle.rect(10, 10, 50, 50);
-
-    var circle = new Path2D();
-    circle.moveTo(125, 35);
-    circle.arc(100, 35, 25, 0, 2 * Math.PI);
-
-    ctx.stroke(rectangle);
-    ctx.fill(circle);
-  }
-}
-
- -

{{EmbedLiveSample("Path2D_example", 130, 110, "https://mdn.mozillademos.org/files/9851/path2d.png")}}

- -

SVG paths 사용하기

- -

새로운 캔버스 path2D API 또다른 강력한 특징 중 하나는, 캔버스의 path를 초기화 하기 위해 SVG path data를 사용한다는 것입니다. 이는 path 데이터를 이동시키며, SVG와 canvas 에서 재사용 할 수 있도록 해줍니다. 

- -

path는 (M10 10) 점으로 이동한 다음, 수평하게 오른쪽으로 으로 80 포인트 (h 80)  만큼 이동합니다. 이후 수직으로 80포인트 (v 80) 내려간 다음, 80 포인트 왼쪽으로 (h -80) 수평하게 이동하고 다시 시작점 (z)으로 돌아갑니다. 예시는 이곳( Path2D constructor )에서 확인하실 수 있습니다.

- -
var p = new Path2D('M10 10 h 80 v 80 h -80 Z');
- -
{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_usage", "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors")}}
diff --git a/files/ko/web/html/canvas/tutorial/finale/index.html b/files/ko/web/html/canvas/tutorial/finale/index.html deleted file mode 100644 index 1241680c5c..0000000000 --- a/files/ko/web/html/canvas/tutorial/finale/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Finale -slug: Web/HTML/Canvas/Tutorial/Finale -tags: - - 그래픽 - - 캔버스 - - 튜토리얼 -translation_of: Web/API/Canvas_API/Tutorial/Finale ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}
- -
-

축하합니다 Canvas 튜토리얼을 모두 끝마쳤습니다! 이 정보는 웹에서 더 나은 2D 그래픽을 만드는데 도움이 됩니다.

-
- -

더 많은 예시와 튜토리얼

- -

이 사이트에는 다양한 데모와 canvas에 대한 추가 설명이 있다.

- -
-
Codepen.io
-
프론트 엔드 개발자 playground 및 브라우저의 코드 편집기.
-
HTML5 Canvas Tutorials
-
대부분 canvas API의 예시
-
Game development
-
게임은 가장 인기있는 컴퓨터 활동 중 하나이다. 어떤 표준 규격의 웹 브라우저에서도 실행할 수 있는 더 나은 게임을 개발할 수 있도록 하기 위한 신기술이 끊임없이 등장하고 있다.
-
- -

기타 웹API

- -

이 API들는 canvas 및 그래픽으로 작업할 때 유용하다.

- -
-
WebGL
-
3D를 포함한 복잡한 그래픽 렌더링을 위한 고급 API.
-
SVG
-
확장 가능한 Vector Graphics는 이미지를 벡터(선)과 형태의 집합으로 묘사하여 이미지를 그리는 크기에 상관없이 원활하게 확장할 수 있다.
-
Web Audio
-
Web Audio API는 개발자들이 오디오 소스 선택, 오디오에 효과 추가, 오디오 시각화 생성, 공간 효과 적용(예: 패닝)등을 할 수 있도록 웹 상에서 오디오를 제어하기 위한 다양하고 좋은 시스템을 제공한다.
-
- -

문의사항

- -
-
Stack Overflow
-
"canvas"가 태그된 문의사항.
-
Comments about this tutorial – the MDN documentation community
-
이 튜토리얼에 대해 의견이 있으시거나 저희에게 감사를 표하고 싶다면 언제든지 연락해주세요!
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Optimizing_canvas")}}

diff --git a/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html b/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index e720af3159..0000000000 --- a/files/ko/web/html/canvas/tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: 히트(Hit) 영역과 접근성 -slug: Web/HTML/Canvas/Tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility ---- -
{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
- -
{{HTMLElement("canvas")}} 엘리먼트는 비트맵이며 그려진 객체에 대한 정보는 제공하지 않습니다. 캔버스 컨텐츠는 시멘틱 HTML과 같은 접근성 도구에 노출되지 않습니다. 일반적으로 접근성을 위한 웹 사이트 또는 앱에서는 캔버스를 사용하지 않는 것이 좋습니다. 본 가이드라인은 접근성이 향상된 캔버스를 만드는데 도움이 될 것입니다.
- -

대체 컨텐츠

- -

<canvas> ... </ canvas> 태그 안의 내용은 캔버스 렌더링을 지원하지 않는 브라우저의 대체 컨텐츠로 사용할 수 있습니다. 또한 하위 DOM을 읽고 해석 할 수있는 보조 기술 사용자 (스크린 리더와 같은)에게도 매우 유용합니다. html5accessibility.com의 좋은 예가 이를 수행 할 수있는 방법을 보여줍니다.

- -
<canvas>
-  <h2>Shapes</h2>
-  <p>A rectangle with a black border.
-   In the background is a pink circle.
-   Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>.
-   Partially overlaying the circle is a green
-   <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a>
-   and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>,
-   both of which are semi-opaque, so the full circle can be seen underneath.</p>
-</canvas>
- -

Steve Faulkner의 NVDA가 이 예제를 어떻게 읽는지를 보여주는 동영상을 참고하시기 바랍니다.

- -

ARIA 규칙

- -

ARIA(Accessible Rich Internet Application)는 장애인이 사용자가 웹 콘텐츠 및 웹 응용 프로그램을보다 쉽게 사용할 수 있도록하는 방법을 정의합니다. ARIA 속성을 사용하여 캔버스 엘리먼트의 동작 및 용도를 설명 할 수 있습니다. 자세한 내용은 ARIA 및 ARIA 기술을 참조하십시오.

- -
<canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas>
-
- -

히트(Hit) 영역

- -

마우스 좌표가 캔버스의 특정 영역 내에 있는지 여부는 문제를 해결하는 데 공통적입니다. 히트 영역 API를 사용하면 캔버스 영역을 정의 할 수 있으며 캔버스에 대화형 컨텐츠를 접근성 도구에 표시 할 수 있습니다. 히트 영역 API는 여러분이 히트 감지를 쉽게 할 수 있도록 하며 DOM 엘리먼트에 이벤트를 전달할 수 있도록 합니다. API에는 다음 세 가지 메소드가 있습니다 (현재 웹 브라우저에서는 아직 실험 중이며 브라우저 호환성 테이블을 확인하십시오).

- -
-
{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}
-
히트 영역을 캔버스에 추가합니다.
-
{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}
-
캔버스에서 해당 id를 가진 히트 영역을 제거합니다.
-
{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}
-
캔버스에서 모든 히트 영역을 제거합니다.
-
- -

경로에 히트 영역을 추가하고 {{domxref("MouseEvent.region")}} 속성을 확인하여 마우스가 영역을 히트하는지 테스트 할 수 있습니다.

- -
<canvas id="canvas"></canvas>
-<script>
-var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-ctx.beginPath();
-ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
-ctx.fill();
-ctx.addHitRegion({id: 'circle'});
-
-canvas.addEventListener('mousemove', function(event) {
-  if (event.region) {
-    alert('hit region: ' + event.region);
-  }
-});
-</script>
- -

addHitRegion() 메소드는 control 옵션을 이용하여 이벤트를 엘리먼트(즉, 캔버스의 자식으로)로 전달합니다.

- -
ctx.addHitRegion({control: element});
- -

예를 들어 {{HTMLElement("input")}} 엘리먼트로 전달하는 데 유용 할 수 있습니다. codepen 데모를 참조하십시오.

- -

포커스 링(Focus rings)

- -

키보드로 작업 할 때 포커스 링은 페이지 탐색에 도움이되는 편리한 표시기입니다. 캔버스 드로잉에 포커스 링을 그리려면 drawFocusIfNeeded 속성을 사용할 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}
-
지정된 엘리먼트에 포커스가있는 경우,이 메소드는 현재 경로 주위에 포커스 링을 그립니다.
-
- -

또한 scrollPathIntoView() 메서드를 사용하여 포커스가있는 경우 엘리먼트를 화면에 표시 할 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}
-
현재 경로 또는 지정된 경로를 뷰로 스크롤합니다.
-
- -

See also

- - - -
{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}
diff --git a/files/ko/web/html/canvas/tutorial/index.html b/files/ko/web/html/canvas/tutorial/index.html deleted file mode 100644 index 03077163aa..0000000000 --- a/files/ko/web/html/canvas/tutorial/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: 캔버스 튜토리얼 -slug: Web/HTML/Canvas/Tutorial -tags: - - Canvas - - Graphic - - Guide - - HTML - - HTML5 - - Intermediate - - Web -translation_of: Web/API/Canvas_API/Tutorial ---- -
{{CanvasSidebar}}
- -
- -
-

<canvas>는 HTML 요소 중 하나로서, 스크립트(보통은 자바스크립트)를 사용하여 그림을 그리는 데에 사용됩니다. 예를 들면, 그래프를 그리거나 사진을 합성하거나, 간단한(혹은 복잡할 수도 있는) 애니메이션을 만드는 데에 사용될 수 있습니다. 오른쪽에 보이는 이미지들은 앞으로 설명하게 될 <canvas>를 사용하여 만들 수 있는 것들의 일부입니다.

-
- -

이 튜토리얼은 <canvas> 요소를 사용하여 2D 그래픽을 어떻게 그리는지 기초부터 설명합니다. 예제들을 통하여 캔버스로 할 수 있는 것이 무엇인지 알려주며, 바로 사용할 수 있도록 코드도 제공합니다.

- -

<canvas>는 Apple의 Webkit에 처음 도입되어 Mac OS X 대시보드(Dashboard)에 사용되었고, 이후 다른 브라우저에도 구현되어 왔습니다. 현재 대부분의 주요 브라우저에서 지원됩니다.

- -

시작하기 전 알아두어야 할 것

- -

<canvas> 요소를 사용하는 것이 어려운 일은 아니지만, HTML과 자바스크립트에 대한 기본 지식을 갖추고 있어야 합니다. 몇몇 오래된 브라우저는 <canvas> 요소를 지원하지 않지만, 최근 버전의 주요 브라우저들은 모두 지원하고 있습니다. 캔버스의 크기는 300px * 150px (너비 * 높이)가 초기 설정값이며, HTML height와 width 속성을 사용하여 바꿀 수 있습니다. 캔버스에 그림을 그리려면 자바스크립트 컨텍스트 오브젝트를 사용하며, 즉석에서 그림을 생성할 수 있습니다.

- -

튜토리얼 내용

- - - -

같이 보기

- - - - - -
{{ Next("Web/API/Canvas_API/Tutorial/Basic_usage") }}
diff --git a/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html b/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html deleted file mode 100644 index 460b5e893f..0000000000 --- a/files/ko/web/html/canvas/tutorial/optimizing_canvas/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: 캔버스 최적화 -slug: Web/HTML/Canvas/Tutorial/Optimizing_canvas -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

{{HTMLElement("canvas")}} 엘리먼트는 웹에서 2D 그래픽을 렌더링하는 데 가장 널리 사용되는 도구 중 하나입니다. 그러나 웹 사이트와 앱이 Canvas API를 최대한으로 밀면 성능이 저하되기 시작합니다. 그러나 웹 사이트 및 앱이 Canvas API를 한계치까지 사용하면 성능이 저하되기 시작합니다. 이 글에서는 그래픽이 잘 동작하도록 보장하기 위해 캔버스 엘리먼트의 사용을 최적화하기위한 제안 사항을 제공합니다.

-
- -

성능 팁

- -

다음은 캔버스 성능을 개선하기 위한 팁 모음입니다.

- -

캔버스에 표시되지 않는 비슷한 원시 혹은 반복 객체를 미리 그려라

- -

만약 당신이 캔버스에 애니메이션 프레임을 그리면서 반복적인 작업이 발견된다면, 눈에 보이지 않는 숨겨진 캔버스 요소를 새로 만들고 그 캔버스에 미리 그려 넣는 방법을 고려하세요. 그렇게 하면 필요한 순간에 숨긴 캔버스에 그려진 이미지를 다시 주 캔버스 이미지에 그려넣어, 불필요한 렌더링 반복 작업을 줄여 성능 향상을 꾀할 수 있습니다.

- -
myCanvas.offscreenCanvas = document.createElement('canvas');
-myCanvas.offscreenCanvas.width = myCanvas.width;
-myCanvas.offscreenCanvas.height = myCanvas.height;
-
-myCanvas.getContext('2d').drawImage(myCanvas.offScreenCanvas, 0, 0);
- -

부동 소수점 좌표를 피하고 대신 정수를 사용하라.

- -

정수값들 없이 캔버스 상의 객체를 렌더링할 때 부가적인 픽셀 렌더링이 발생합니다.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

이렇게하면 앤티 앨리어싱(anti-aliasing) 효과를 만들기 위해 브라우저에서 추가 연산을 수행해야합니다. 예제에서 이를 방지하려면 {{jsxref("Math.floor()")}}를 사용하여 {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} 호출에 사용된 모든 좌표를 반올림해야합니다.

- -

drawImage에서 이미지 크기를 조정하지 마라.

- -

{{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}}에서 즉시 크기를 조정하지 말고 다양한 이미지 크기를 오프스크린(offscreen) 캔버스에 캐시하십시오.

- -

복잡한 장면에 여러 개의 레이어 캔버스를 사용하라.

- -

어플리케이션에서 일부 객체는 자주 이동하거나 변경해야하지만 다른 객체는 상대적으로 고정 위치에 남아야 합니다. 이런 상황에서 대응 가능한 최적화는 여러 <canvas> 엘리먼트를 사용하여 항목을 겹쳐서 만드는 것입니다.

- -

예를 들어 상단에 UI, 중간에 게임 플레이 액션, 하단에 정적 배경이있는 게임이 있다고 가정 해 보겠습니다. 이 경우 게임을 세 개의 <canvas> 레이어로 나눌 수 있습니다. UI는 사용자 입력시에만 변경되며 게임 플레이 레이어는 모든 새 프레임마다 변경되며 배경은 일반적으로 변경되지 않습니다.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black;
-  }
-
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3; }
-  #game-layer { z-index: 2; }
-  #background-layer { z-index: 1; }
-</style>
-
- -

큰 배경 이미지는 일반 CSS를 사용하라.

- -

정적 배경 이미지가있는 경우 CSS {{cssxref("background")}} 속성을 사용하여 일반 {{HTMLElement("div")}} 요소에 그릴 수 있으며 캔버스 아래에 배치 할 수 있습니다. 이렇게하면 모든 틱 마다 배경을 캔버스에 렌더링 할 필요가 없어집니다.

- -

CSS 변환(transform)을 사용하여 캔버스 크기 조정하라.

- -

CSS 변환(transform)은 GPU를 사용하기 때문에 더 빠릅니다. 가장 좋은 경우는 캔버스를 스케일링하지 않거나, 큰 캔버스를 축소하기보다 작은 캔버스를 확대하는 것입니다.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

투명도를 사용하지 마라.

- -

응용 프로그램이 캔버스를 사용하고 투명 배경을 필요로하지 않는 경우 HTMLCanvasElement.getContext()를 사용하여 드로잉 컨텍스트를 만들 때 alpha 옵션을 false로 설정합니다. 이 정보는 렌더링을 최적화하기 위해 브라우저에서 내부적으로 사용할 수 있습니다.

- -
var ctx = canvas.getContext('2d', { alpha: false });
- -

추가 팁들

- -
    -
  • 배치 캔버스를 함께 호출합니다. 예를 들어 여러 개의 개별 선 대신 다각형 선을 그립니다.
    • -
  • 불필요한 캔버스 상태 변경을 피하십시오.
    • -
  • 화면의 차이만 렌더링하고 완전히 새로운 상태로 렌더링하지 마십시오.
    • -
  • 가능하면 {{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur")}} 속성을 사용하지 마십시오.
    • -
  • 가능하면 텍스트 렌더링을 피하십시오.
    • -
  • 캔버스를 지우는 여러 가지 방법을 시도해보십시오 ({{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}} vs. {{domxref("CanvasRenderingContext2D.fillRect", "fillRect()")}} vs. 캔버스 크기 조정).
    • -
  • 애니메이션에서는 {{domxref("window.setInterval()")}} 대신 {{domxref("window.requestAnimationFrame()")}}을 사용하십시오.
    • -
  • 무거운 물리 연산 라이브러리를 주의하십시오.
    • -
- -

See also

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/ko/web/html/canvas/tutorial/using_images/index.html b/files/ko/web/html/canvas/tutorial/using_images/index.html deleted file mode 100644 index d9aae1c993..0000000000 --- a/files/ko/web/html/canvas/tutorial/using_images/index.html +++ /dev/null @@ -1,347 +0,0 @@ ---- -title: Using images -slug: Web/HTML/Canvas/Tutorial/Using_images -tags: - - Advanced - - Canvas - - Graphics - - HTML - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations" )}}
- -
-

지금까지 우리는 Canvas를 가지고 스스로 도형을 만들고 그 도형에 스타일 적용 해 보았습니다. 이미지를 사용 하는 기능은 {{HTMLElement("canvas")}}의 가장 흥미로운 기능중 하나입니다. 이 기능은 게임의 그래픽 배경이나 혹은 다이나믹한 사진 도음들을 위해 사용 될 수 있습니다. PNG,GIF, JPEG등 브라우저에서 지원되는 포맷형태라면 어떠한 외부 이미지라도 사용 될 수 있습니다. 같은 페이지 소스에서 다른 Canvas요소로 만들어진 이미지 또한 사용할수 있습니다!

-
- -

이미지를 캔버스로 불러오는것은 기본적으로 두 단계를 필요로 합니다:

- -
    -
  1. {{domxref("HTMLImageElement")}} object를 참조하거나 다른 캔버스 요소를 소스로 사용합니다. 이는 URL을 가지고 이미지를 사용 할 수 있습니다.
    2. -
  2. drawImage() function을 사용하여 캔버스에 나타난 이미지 위에 그림을 그립니다.
    3. -
- -

이 과정이 어떻게 되는지 봅시다.

- -

이미지 불러오기

- -

canvas API는 아래의 데이터 타입을 이미지 소스로 사용 할 수 있습니다:

- -
-
{{domxref("HTMLImageElement")}}
-
{{HTMLElement("img")}} element와 마찬가지로, Image() constructor를 통해 만들어진 이미지입니다.
-
- -
-
{{domxref("SVGImageElement")}}
-
{{SVGElement("image")}} element 를 사용해 불러온 이미지입니다.
-
- - - -
-
{{domxref("HTMLVideoElement")}}
-
HTML {{HTMLElement("video")}} 요소를 이미지 소스로 사용하여 비디오의 현재 프레임을 이미지로 불러옵니다.
-
{{domxref("HTMLCanvasElement")}}
-
다른 {{HTMLElement("canvas")}} 요소를 이미지 소스로 사용합니다.
-
- -

이렇게 얻은 소스들은 {{domxref("CanvasImageSource")}}.를 사용하여 불러 올 수 있습니다.

- -

다음은 캔버스에 놓인 이미지를 사용하는 여러가지 방법입니다.

- -

같은 페이지의 이미지 사용하기

- -

우리는 다음을 사용하여 같은 페이지에 있는 캔버스나 이미지를 참고 할 수 있습니다.

- -
    -
  • {{domxref("document.images")}} 모음
    • -
  • {{domxref("document.getElementsByTagName()")}} 메소드
    • -
  • 사용 하고자 하는 특정한 이미지의 ID를 알고 있다면, {{domxref("document.getElementById()")}} 를 사용하여 특정한 이미지를 참고할 수 있습니다.
    • -
- -

다른 도메인의 이미지 사용하기

- -

Using the {{htmlattrxref("crossorigin", "img")}} attribute of an {{HTMLElement("img")}} element (reflected by the {{domxref("HTMLImageElement.crossOrigin")}} property), you can request permission to load an image from another domain for use in your call to drawImage(). If the hosting domain permits cross-domain access to the image, the image can be used in your canvas without tainting it; otherwise using the image will taint the canvas.

- -

다른 캔버스 요소 (canvas elements) 사용하기

- -

Just as with normal images, we access other canvas elements using either the {{domxref("document.getElementsByTagName()")}} or {{domxref("document.getElementById()")}} method. Be sure you've drawn something to the source canvas before using it in your target canvas.

- -

One of the more practical uses of this would be to use a second canvas element as a thumbnail view of the other larger canvas.

- -

처음부터 이미지 만들기

- -

Another option is to create new {{domxref("HTMLImageElement")}} objects in our script. To do this, you can use the convenient Image() constructor:

- -
var img = new Image();   // Create new img element
-img.src = 'myImage.png'; // Set source path
-
- -

When this script gets executed, the image starts loading.

- -

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

- -
var img = new Image();   // Create new img element
-img.addEventListener('load', function() {
-  // execute drawImage statements here
-}, false);
-img.src = 'myImage.png'; // Set source path
-
- -

If you're only using one external image this can be a good approach, but once you need to track more than one we need to resort to something more clever. It's beyond the scope of this tutorial to look at image pre-loading tactics, but you should keep that in mind.

- -

데이터를 사용하여 이미지 불러오기Embedding an image via data: URL

- -

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

- -
var img = new Image();   // Create new img element
-img.src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

- -

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

- -

비디오 프레임 사용하기Using frames from a video

- -

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

- -

이미지 그리기

- -

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y)")}}
-
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
-
- -
-

SVG images must specify a width and height in the root <svg> element.

-
- -

예제: 기본 선 그래프

- -

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    ctx.drawImage(img, 0, 0);
-    ctx.beginPath();
-    ctx.moveTo(30, 96);
-    ctx.lineTo(70, 66);
-    ctx.lineTo(103, 76);
-    ctx.lineTo(170, 15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

The resulting graph looks like this:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

비례 크기 조정

- -

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, x, y, width, height)")}}
-
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
-
- -

예제: 이미지를 타일처럼 배치

- -

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

- -
-

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function() {
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.drawImage(img, j * 50, i * 38, 50, 38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

The resulting canvas looks like this:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

이미지 자르기

- -

The third and last variant of the drawImage() method has eight parameters in addition to the image source. It lets us cut out a section of the source image, then scale and draw it on our canvas.

- -
-
{{domxref("CanvasRenderingContext2D.drawImage", "drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)")}}
-
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
-
- -

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

- -

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

- -

예제: 이미지 프레임 넣기

- -

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'), 0, 0);
-}
- -

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

- -

아트 갤러리 예제

- -

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn around it.

- -

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

- -

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

And here's some CSS to make things look nice:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Tying it all together is the JavaScript to draw our framed images:

- -
function draw() {
-
-  // Loop through all images
-  for (var i = 0; i < document.images.length; i++) {
-
-    // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id') != 'frame') {
-
-      // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width', 132);
-      canvas.setAttribute('height', 150);
-
-      // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Draw image to canvas
-      ctx.drawImage(document.images[i], 15, 20);
-
-      // Add frame
-      ctx.drawImage(document.getElementById('frame'), 0, 0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400)}}

- -

이미지 비율 습성(scaling behavior) 제어하기

- -

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's {{domxref("CanvasRenderingContext2D.imageSmoothingEnabled", "imageSmoothingEnabled")}} property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

- -
ctx.mozImageSmoothingEnabled = false;
-ctx.webkitImageSmoothingEnabled = false;
-ctx.msImageSmoothingEnabled = false;
-ctx.imageSmoothingEnabled = false;
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_text", "Web/API/Canvas_API/Tutorial/Transformations")}}

diff --git "a/files/ko/web/html/canvas/tutorial/\353\263\200\355\230\225/index.html" "b/files/ko/web/html/canvas/tutorial/\353\263\200\355\230\225/index.html" deleted file mode 100644 index b93747b581..0000000000 --- "a/files/ko/web/html/canvas/tutorial/\353\263\200\355\230\225/index.html" +++ /dev/null @@ -1,286 +0,0 @@ ---- -title: 변형 (transformations) -slug: Web/HTML/Canvas/Tutorial/변형 -tags: - - CSS - - HTML - - 이동 - - 축소 - - 캔버스 - - 크기변형 - - 트랜스폼 - - 확대 -translation_of: Web/API/Canvas_API/Tutorial/Transformations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}
- -
이 튜토리얼에 앞서 canvas 그리드와 좌표 공간에 대해 알아 보았습니다. 지금까지는 기본적인 그리드를 사용해 요구에 맞추어 전체 canvas의 크기를 바꾸기만 했습니다. Transformation(변형)에는 그리드를 원점에서 다른 위치로 옮기고, 회전하며, 확대·축소까지 하는 더 강력한 방법들이 있습니다.
- -

상태(state)의 저장과 복원

- -

변형(transformation) 메소드을 살펴보기 전에 두 가지 다른 메소드를 보도록 하지요. 일단 여러분이 더 복잡한 그림(drawings)을 그리기 시작하면 반드시 있어야 하는 메소드들입니다.

- -
-
{{domxref("CanvasRenderingContext2D.save", "save()")}}
-
canvas의 모든 상태를 저장합니다.
-
{{domxref("CanvasRenderingContext2D.restore", "restore()")}}
-
가장 최근에 저장된 canvas 상태를 복원합니다.
-
- -

Canvas 상태는 스택(stack)에 쌓입니다. save() 메소드가 호출될 때마다 현재 drawing 상태가 스택 위로 푸시됩니다. drawing 상태는 다음과 같이 이루어집니다.

- -
    -
  • 이전부터 적용된 변형(가령,  translate과 rotate와 scale 같은 – 아래의 내용을 보세요).
    • -
  • 다음 속성(attributes)의 현재 값:
    - {{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")}}.
    • -
  • 현재의 clipping path, 이것은 다음 섹션에서 다루겠습니다.
    • -
- -

여러분은 원하는 만큼 save() 메소드를 많이 호출할 수 있습니다. restore() 메소드를 호출할 때마다 마지막으로 저장된 상태가 스택에서 튀어나와 저장된 설정들을 모두 복원시킵니다.

- -

save와 restore canvas 상태(state) 예제

- -

사각형 세트를 연이어 그려서 drawing 상태를 가진 스택이 어떻게 기능하는지를 이 예제에서 설명하고자 합니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.fillRect(0, 0, 150, 150);   // 기본 설정으로 사각형을 그리기
-  ctx.save();                  // 기본 상태를 저장하기
-
-  ctx.fillStyle = '#09F';      // 설정 변경하기
-  ctx.fillRect(15, 15, 120, 120); // 새로운 설정으로 사각형 그리기
-
-  ctx.save();                  // 현재 상태 저장하기
-  ctx.fillStyle = '#FFF';      // 설정 변경하기
-  ctx.globalAlpha = 0.5;
-  ctx.fillRect(30, 30, 90, 90);   // 새로운 설정으로 사각형 그리기
-
-  ctx.restore();               // 이전 상태 복원하기
-  ctx.fillRect(45, 45, 60, 60);   // 복원된 설정으로 사각형 그리기
-
-  ctx.restore();               // 초기 상태를 복원하기
-  ctx.fillRect(60, 60, 30, 30);   // 복원된 설정으로 사각형 그리기
-}
- - - -

첫 단계로 기본 설정으로 커다란 사각형을 그립니다. 그다음에는 이 상태를 저장하고 fill color를 바꿉니다. 그런 후에 두 번째이자 크기가 더 작은 파란 사각형을 그리고 그 상태를 저장합니다. 다시 한번 일부 drawing 설정을 바꾸고 세 번째 반투명한 흰 사각형을 그립니다. 

- -

여기까지는 이전 섹션에서 했던 작업과 매우 유사합니다. 하지만 일단 첫 번째 restore() 문을 호출하면 스택에서 맨 위의 drawing 상태가 지워지고 설정이 복원됩니다. 만일 save()로 저장하지 않았다면, 이전 상태로 되돌리기 위해 fill color와 투명도를 일일이 바꿔주어야 했을 것입니다. 두 속성이라서 간단했을 테지만 그보다 더 많았으면 코드가 급속히 길어졌겠지요. 

- -

두 번째 restore()문이 호출될 때, 초기 상태( 처음으로 save를 호출하기 전에 설정한 상태)가 복원되고 마지막 사각형은 한번 더 검게 그려집니다.

- -

{{EmbedLiveSample("A_save_and_restore_canvas_state_example", "180", "180", "https://mdn.mozillademos.org/files/249/Canvas_savestate.png")}}

- -

이동(translating)

- -

우리가 살펴볼 첫 번째 변형 메소드는 translate()입니다.  이 메소드는 그리드에서 canvas를 원점에서 다른 점으로 옮기는 데 사용됩니다. 

- -
-
{{domxref("CanvasRenderingContext2D.translate", "translate(x, y)")}}
-
그리드에서 canvas와 그 원점을 이동합니다. x는 이동시킬 수평 거리를 가리키고, y는 그리드에서 수직으로 얼마나 멀리 떨어지는지를 표시합니다. 
-
- -

변형하기 전에 canvas 상태를 저장하는 것이 좋습니다. 대다수의 경우, 원래 상태로 되돌리려고 역이동(reverse translation)을 시키는 것보다 restore 메소드를 호출하는 것이 더욱 간편합니다. 게다가 루프(loop) 안에서 이동하는 거라면 canvas 상태를 저장하고 복원하지 마세요. canvas 모서리 밖에서 그려지는 바람에 drawing의 일부를 잃어버리게 될지 모릅니다. 

- -

translate 예제

- -

이 예제에서 canvas 원점의 이동에 관한 좋은 점을 일부 보여드리겠습니다. translate() 메소드를 쓰지 않으면 모든 사각형은 같은 위치 (0, 0)에 그려집니다. 또한, translate() 메소드는 사각형을 fillRect() function에서 좌표를 일일이 적으며 바꾸지 않아도 어디에나 위치할 수 있게 해줍니다. 이렇게 하면 이해하고 사용하기가 좀 더 쉽습니다. 

- -

 draw() function에서 두 개의 루프(loops)를 이용해 fillRect() function을 아홉 번 호출합니다. 루프마다 canvas가 이동하고 사각형이 그려지며, canvas는 원래 상태로 되돌아 갑니다. fillRect()로의 호출이 translate()에 의지해 drawing 위치를 바꾸는데 어떻게 매번 같은 좌표를 사용하는지 눈여겨 보세요.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 3; i++) {
-    for (var j = 0; j < 3; j++) {
-      ctx.save();
-      ctx.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
-      ctx.translate(10 + j * 50, 10 + i * 50);
-      ctx.fillRect(0, 0, 25, 25);
-      ctx.restore();
-    }
-  }
-}
-
- - - -

{{EmbedLiveSample("A_translate_example", "160", "160", "https://mdn.mozillademos.org/files/9857/translate.png")}}

- -

회전(rotating)

- -

두 번째 변형 메소드는 rotate()입니다. canvas를 현재의 원점 둘레로 회전하는 데 사용합니다.

- -
-
{{domxref("CanvasRenderingContext2D.rotate", "rotate(angle)")}}
-
canvas를 현재 원점을 기준으로 라디안의 angle 숫자만큼 시계방향으로 회전시킵니다.
-
- -

회전의 중심점은 언제나 canvas 원점입니다. 중심점을 바꾸려면 translate() 메소드를 써서 canvas를 이동해야 합니다.

- -

rotate 예제

- -

이 예제는 사각형을 canvas 원점에서 먼저 회전하고 그다음에 translate()의 도움을 받아 사각형 자체의 중심에서 회전하는 데 rotate()를 사용합니다.

- -
-

주의: 각도의 단위는 도(degree)가 아닌 라디안(radian)입니다.   변환하려면 radians = (Math.PI/180)*degrees.를 사용합니다.

-
- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 좌측 사각형, canvas 원점에서 회전하기
-  ctx.save();
-  // 파란 사각형
-  ctx.fillStyle = '#0095DD';
-  ctx.fillRect(30, 30, 100, 100);
-  ctx.rotate((Math.PI / 180) * 25);
-  // 회색 사각형
-  ctx.fillStyle = '#4D4E53';
-  ctx.fillRect(30, 30, 100, 100);
-  ctx.restore();
-
-  // 우측 사각형, 사각형 중심에서 회전하기
-  // 파란 사각형 그리기
-  ctx.fillStyle = '#0095DD';
-  ctx.fillRect(150, 30, 100, 100);
-
-  ctx.translate(200, 80); // 사각형 중심으로 이동하기
-                          // x = x + 0.5 * width
-                          // y = y + 0.5 * height
-  ctx.rotate((Math.PI / 180) * 25); // 회전
-  ctx.translate(-200, -80); // 예전 위치로 이동하기
-
-  // 회색 사각형 그리기
-  ctx.fillStyle = '#4D4E53';
-  ctx.fillRect(150, 30, 100, 100);
-}
-
- -

사각형 자체의 중심 둘레로 회전하려면 사각형의 중심으로 canvas를 옮기세요. 그런 후에 canvas를 회전하고, 그 canvas를 0, 0로 되돌려 이동합니다. 그다음에 사각형을 그리세요.

- - - -

{{EmbedLiveSample("A_rotate_example", "310", "210", "https://mdn.mozillademos.org/files/9859/rotate.png")}}

- -

확대·축소(scaling)

- -

다음 변형 메소드는 확대·축소(scaling)입니다. canvas 그리드에서 단위(units)를 키우거나 줄이는 데 사용합니다. 이는 벡터 모양과 비트맵(bitmaps) 요소를 축소하거나 확대해서 그리는 데 사용될 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.scale", "scale(x, y)")}}
-
canvas 단위를 수평으로 x만큼, 수직으로 y만큼 크기를 확대·축소합니다. 둘의 매개 변수는 실수입니다. 1.0보다 작은 값이면 단위의 크기를 축소하고, 1.0보다 큰 값이면 단위의 크기를 확대합니다. 값이 1.0이면 단위의 크기는 그대로입니다.
-
- -

음수를 이용해서 축을 대칭 시킬 수 있습니다(가령 translate(0,canvas.height); scale(1,-1);로 쓰는 것처럼 말이죠. 좌측 하단 모서리에 있는 원점을 이용한, 잘 알려진 카르테시안 좌표계(Cartesian coordinate)인 것이지요.

- -

기본적으로 canvas에서 하나의 단위는 정확히 1픽셀입니다. 예를 들어 0.5라는 확대·축소 비율을 적용한다면, 결과로 나오는 단위는 0.5 픽셀이 될 것이고, 고로 모양도 절반 크기로 그려질 것입니다. 이런 방식으로 크기 비율을 2.0으로 잡으면 단위 크기가 확대되어 하나의 단위는 이제 2픽셀이 되겠지요. 이 결과로 모양은 그만큼 2배로 커집니다.

- -

scale 예제

- -

마지막 예제로 다양한 확대·축소 비율을 이용해 모양을 그려보겠습니다.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // 간단하지만 확대·축소 비율을 적용한 사각형 그리기
-  ctx.save();
-  ctx.scale(10, 3);
-  ctx.fillRect(1, 10, 10, 10);
-  ctx.restore();
-
-  // 수평으로 대칭하기
-  ctx.scale(-1, 1);
-  ctx.font = '48px serif';
-  ctx.fillText('MDN', -135, 120);
-}
-
-
- - - -

{{EmbedLiveSample("A_scale_example", "160", "160", "https://mdn.mozillademos.org/files/9861/scale.png")}}

- -

변형(transforms)

- -

마지막으로, 다음의 변형(transform) 메소드들은 변환 행렬(transformation matrix)로 변경할 사항을 즉시 적용할 수 있습니다.

- -
-
{{domxref("CanvasRenderingContext2D.transform", "transform(a, b, c, d, e, f)")}}
-
인수(arguments)에 표시된 행렬을 이용해 현재 변환 행렬을 곱합니다. 변환 행렬은 다음과 같이 작성됩니다. 
- [acebdf001]\left[ \begin{array}{ccc} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{array} \right]
-
- -
-
만일 인수 중에 Infinity가 있다면, 변환 행렬은 예외 처리하는 메소드 대신에 반드시 infinite로 표시되어야 합니다.
-
- -

이 function의 매개 변수들은 다음과 같습니다.

- -
-
a (m11)
-
수평으로 확대·축소하기
-
b (m12)
-
수평으로 비스듬히 기울이기
-
c (m21)
-
수직으로 비스듬히 기울이기
-
d (m22)
-
수직으로 확대·축소하기
-
e (dx)
-
수평으로 이동하기
-
f (dy)
-
수직으로 이동하기
-
{{domxref("CanvasRenderingContext2D.setTransform", "setTransform(a, b, c, d, e, f)")}}
-
현재 변형 상태를 단위 행렬로 재설정하고 나서 동일한 인수로 transform() 메소드를 적용합니다. 이는 기본적으로 현재의 변형을 무효로 한 후에 명시된 변형으로 바뀌는데, 한번에 모든 게 진행됩니다.
-
{{domxref("CanvasRenderingContext2D.resetTransform", "resetTransform()")}}
-
현재 변형 상태를 단위 행렬로 재설정합니다. 이는 ctx.setTransform(1, 0, 0, 1, 0, 0); 호출과 같습니다.
-
- -

transform과 setTransform 예제

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  var sin = Math.sin(Math.PI / 6);
-  var cos = Math.cos(Math.PI / 6);
-  ctx.translate(100, 100);
-  var c = 0;
-  for (var i = 0; i <= 12; i++) {
-    c = Math.floor(255 / 12 * i);
-    ctx.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
-    ctx.fillRect(0, 0, 100, 10);
-    ctx.transform(cos, sin, -sin, cos, 0, 0);
-  }
-
-  ctx.setTransform(-1, 0, 0, 1, 100, 100);
-  ctx.fillStyle = 'rgba(255, 128, 255, 0.5)';
-  ctx.fillRect(0, 50, 100, 100);
-}
-
- - - -

{{EmbedLiveSample("Example_for_transform_and_setTransform", "230", "280", "https://mdn.mozillademos.org/files/255/Canvas_transform.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Using_images", "Web/API/Canvas_API/Tutorial/Compositing")}}

diff --git a/files/ko/web/html/element/command/index.html b/files/ko/web/html/element/command/index.html deleted file mode 100644 index 8353384f2a..0000000000 --- a/files/ko/web/html/element/command/index.html +++ /dev/null @@ -1,111 +0,0 @@ ---- -title: -slug: Web/HTML/Element/command -tags: - - HTML - - Obsolete - - Reference - - Web -translation_of: Web/HTML/Element/command ---- -
{{obsolete_header()}}
- -

The HTML Command element (<command>) represents a command which the user can invoke. Commands are often used as part of a context menu or toolbar. However, they can be used anywhere on the page.

- -
-

The <command> element is included in the W3C specification, but not in the WHATWG specification, and browser support is nonexistent. You should use the {{HTMLElement("menuitem")}} element instead, although that element is non-standard and only supported in Edge and Firefox.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, phrasing content, metadata content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionThe start tag is mandatory, but, as it is a void element, the use of an end tag is forbidden.
Permitted parent elements{{HTMLElement("colgroup")}} only, though it can be implicitly defined as its start tag is not mandatory. The {{HTMLElement("colgroup")}} must not have a {{HTMLElement("span")}} as child.
DOM interface{{domxref("HTMLCommandElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -
-
{{htmlattrdef("checked")}}
-
Indicates whether the command is selected. Must be omitted unless the type attribute is checkbox or radio.
-
{{htmlattrdef("disabled")}}
-
Iindicates that the command is not available.
-
{{htmlattrdef("icon")}}
-
Gives a picture which represents the command.
-
{{htmlattrdef("label")}}
-
The name of the command as shown to the user.
-
{{htmlattrdef("radiogroup")}}
-
This attribute gives the name of the group of commands, with a type of radio, that will be toggled when the command itself is toggled. This attribute must be omitted unless the type attribute is radio.
-
{{htmlattrdef("type")}}
-
This attribute indicates the kind of command. This can be one of three values. -
    -
  • -

    command or empty which is the default state and indicates that this is a normal command.

    -
    • -
  • -

    checkbox indicates that the command can be toggled using a checkbox.

    -
    • -
  • -

    radio indicates that the command can be toggled using a radio button.

    -
    • -
-
-
- -

Examples

- -
<command type="command" label="Save"
-    icon="icons/save.png" onclick="save()">
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#commands')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'semantics.html#the-command-element', '<command>')}}{{Spec2('HTML5 W3C')}} 
- -

Browser compatibility

- - - -

{{Compat("html.elements.command")}}

- -

{{ HTMLRef }}

diff --git a/files/ko/web/html/element/element/index.html b/files/ko/web/html/element/element/index.html deleted file mode 100644 index be045093a5..0000000000 --- a/files/ko/web/html/element/element/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: -slug: Web/HTML/Element/element -translation_of: Web/HTML/Element/element ---- -
{{HTMLRef}}{{obsolete_header}}
- -

The obsolete HTML <element> element was part of the Web Components specification; it was intended to be used to define new custom DOM elements. It was removed in favor of a JavaScript-driven approach for creating new custom elements.

- -
-

Note: This element has been removed from the specification. See this for more information from the editor of the specification.

-
- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesTransparent content.
Permitted content???
Tag omission{{no_tag_omission}}
Permitted parent elements???
DOM interface{{domxref("HTMLElement")}}
- -

Attributes

- -

This element includes the global attributes.

- -

Specifications

- -

The <element> element was formerly in a draft specification of Custom Elements but it has been removed.

- -

Browser compatibility

- - - -

{{Compat("html.elements.element")}}

- -

See also

- -
    -
  • Web components: {{HTMLElement("content")}}, {{HTMLElement("shadow")}}, {{HTMLElement("slot")}}, and {{HTMLElement("template")}}
    • -
diff --git a/files/ko/web/html/global_attributes/class/index.html b/files/ko/web/html/global_attributes/class/index.html new file mode 100644 index 0000000000..d0aa89b606 --- /dev/null +++ b/files/ko/web/html/global_attributes/class/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 +--- +
{{HTMLSidebar("Global_attributes")}}
+ +

class 전역 특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM 메서드의 {{domxref("document.getElementsByClassName()")}}과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.

+ +
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
+ + + +

명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, class is now a true global attribute.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
+ +

브라우저 호환성

+ + + +

{{Compat("html.global_attributes.class")}}

+ +

같이 보기

+ +
    +
  • 모든 전역 특성.
    • +
  • {{domxref("element.className")}}
    • +
  • {{domxref("element.classList")}}
    • +
diff --git a/files/ko/web/html/global_attributes/dropzone/index.html b/files/ko/web/html/global_attributes/dropzone/index.html deleted file mode 100644 index 15d26aad15..0000000000 --- a/files/ko/web/html/global_attributes/dropzone/index.html +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: dropzone -slug: Web/HTML/Global_attributes/dropzone -tags: - - Deprecated - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/dropzone ---- -
{{HTMLSidebar("Global_attributes")}}{{deprecated_header}}
- -

dropzone 전역 특성은 열거형 속성으로 한 요소에 어떤 형식의 컨텐츠가 Drag and Drop API를 이용해 드랍될 수 있는지를 나타냅니다. 이 속성은 다음의 값을 가질 수 있습니다:

- -
    -
  • copy, 드랍할 때 드래그되는 요소의 사본이 생성됨을 나타냅니다.
    • -
  • move, 드래그되는 요소가 새로운 위치로 이동할 것임을 나타냅니다.
    • -
  • link, 드래그되는 데이터에 대한 링크가 생성될 것임을 나타냅니다.
    • -
- -

명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "interaction.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "editing.html#the-dropzone-attribute", "dropzone")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, initial definition
- -

브라우저 호환성

- - - -

{{Compat("html.global_attributes.dropzone")}}

- -

같이 보기

- - diff --git "a/files/ko/web/html/global_attributes/\355\201\264\353\236\230\354\212\244/index.html" "b/files/ko/web/html/global_attributes/\355\201\264\353\236\230\354\212\244/index.html" deleted file mode 100644 index d0aa89b606..0000000000 --- "a/files/ko/web/html/global_attributes/\355\201\264\353\236\230\354\212\244/index.html" +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: class -slug: Web/HTML/Global_attributes/클래스 -tags: - - Global attributes - - HTML - - Reference -translation_of: Web/HTML/Global_attributes/class ---- -
{{HTMLSidebar("Global_attributes")}}
- -

class 전역 특성은 공백으로 구분한 요소 클래스의 목록으로, 대소문자를 구분하지 않습니다. 클래스는 CSS나 JavaScript에서 클래스 선택자나 DOM 메서드의 {{domxref("document.getElementsByClassName()")}}과 같은 메서드를 통해 요소에 접근할 수 있는 방법입니다.

- -
{{EmbedInteractiveExample("pages/tabbed/attribute-class.html","tabbed-standard")}}
- - - -

명세서가 클래스의 명칭에 대한 요구사항을 제시하지는 않았지만, 웹 개발자는 해당 요소의 표시 방식보다는 요소의 의미와 목적을 설명하는 명칭을 사용하는 것이 좋습니다. 예를 들어, 클래스 특성을 가진 어떤 요소가 기울임꼴로 나타난다 하더라도, 클래스 이름은 "기울임꼴"을 설명하는 것이 아니라 요소를 설명하는 것입니다. 의미를 가진 이름은 해당 페이지의 표현 방식이 바뀌더라도 논리성을 잃지 않습니다.

- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "elements.html#classes", "class")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "elements.html#classes", "class")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "elements.html#classes", "class")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}}. From {{SpecName('HTML4.01')}}, class is now a true global attribute.
{{SpecName('HTML4.01', "struct/global.html#h-7.5.2", "class")}}{{Spec2('HTML4.01')}}Supported on all elements but {{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, and {{HTMLElement("title")}}.
- -

브라우저 호환성

- - - -

{{Compat("html.global_attributes.class")}}

- -

같이 보기

- -
    -
  • 모든 전역 특성.
    • -
  • {{domxref("element.className")}}
    • -
  • {{domxref("element.classList")}}
    • -
diff --git a/files/ko/web/html/html5/index.html b/files/ko/web/html/html5/index.html deleted file mode 100644 index 2d64ce56d6..0000000000 --- a/files/ko/web/html/html5/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: HTML5 -slug: Web/HTML/HTML5 -translation_of: Web/Guide/HTML/HTML5 ---- -

HTML5는 HTML를 정의하는 표준화에 있어서의 최신 표준 명세입니다. HTML5 명세는 아직도 표준 지정이 완료되지 않았고 변경이 계속 진행 중입니다. 하지만, Mozilla 및 다른 웹 브라우저 벤더는 이미 사양 중  많은 부분에 대한 구현을 시작하고 있습니다. 여기에 링크 하고 있는 문서에서는 Firefox 및 다른 많은 제품으로 사용되어 있는 Mozilla의 Gecko 엔진에 있어서 이미 기술 지원되어 있는 HTML5의 기능에 대해 설명하고 있습니다. 각각의 기능을 기술 지원하고 있는 Gecko 버전 및 다른 브라우저 엔진에 대해서는 지정된 페이지를 참조해 주십시오.

- -

(HTML5의 문서에 대한 다른 분류도 참고하세요.)

- -

HTML5 소개

- -
-
HTML5의 소개
-
이 문서에서는 웹 디자인이나 웹 애플리케이션으로 HTML5 이용 방법을 소개합니다.
-
- -

HTML5의 요소

- -
-
HTML5 요소·태그의 목록
-
현재 사양 초안에 근거한 HTML5 요소(태그)의 목록표입니다.
-
오디오/비디오 사용하기
-
Firefox 3.5이상에서  HTML5의 {{ HTMLElement("audio") }} 요소와 {{ HTMLElement("video") }} 요소의 기술 지원이 추가되었습니다.
-
HTML5 웹 폼양식
-
HTML5에서는 웹 폼양식이 개선됩니다. {{ HTMLElement("input") }} 요소의 {{ htmlattrxref("type", "input") }} 속성에 새로운 값이나 새 요소인 {{ HTMLElement("output") }} 요소 등이 새롭게 추가되었습니다.
-
HTML5 섹션과 아웃라인
-
HTML5 에서는 아웃라인과 섹션에 관한 요소가 추가되었습니다.: {{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }}, {{ HTMLElement("hgroup") }}.
-
{{ HTMLElement("mark") }} 요소
-
mark 요소는 텍스트중에서의 특별한 관련성을 강조시키기 위해서 이용합니다.
-
{{ HTMLElement("figure") }} 및 {{ HTMLElement("figcaption") }} 요소
-
주로 사용된 문장과 느슨하게 연결된, 최종 캡션을 수반한 도식이나 그림을 추가할 수 있습니다.
-
- -

Canvas 기술 지원

- -
-
Canvas 튜토리얼
-
새로운 요소인 {{ HTMLElement("canvas") }} 요소와 그것을 사용하여 Firefox에 그래프나 다른 객체를 재생 하는 방법에 대해 배웁니다.
-
canvas 요소의 HTML5 text API
-
{{ HTMLElement("canvas") }} 요소가 HTML5 text API를 기술 지원합니다.
-
- -

웹 애플리케이션 기능

- -
-
Firefox 오프 라인 자원
-
Firefox는 HTML5의 오프 라인 자원 사양을 완전하게 구현 및 지원하고 있습니다. 대다수 브라우저의 몇 가지 레벨로 오프 라인 자원을 기술 지원하고 있습니다.
-
Online 이벤트와 Offline 이벤트
-
Firefox 3은 WHATWG의 online 및 offline 이벤트를 기술 지원하고 있습니다. 이러한 이벤트는 애플리케이션이나 확장 기능에 현재 인터넷 접속 상태의 연결 여부를 확인할 수 있습니다.
-
WHATWG 클라이언트 사이드 세션 스토리지 및 영구 스토리지 (DOM Storage)
-
클라이언트 사이드 세션 스토리지와 영구 스토리지에 의하고 웹 애플리케이션이 구조화 데이터를 클라이언트 측에 저장할 수 있도록 합니다.
-
contentEditable 속성： 웹 사이트 및 위키 편집 용이성
-
HTML5 에서는 contentEditable 속성이 표준화 되었습니다. 이 기능에 대해 살펴봅니다.
-
로컬 파일 사용하기
-
새로운 HTML5 File API 지원이 Gecko에 추가되었습니다. 이 API는 웹 애플리케이션이 사용자가 선택한 로컬 파일에 접근 하는 것을 가능하게 합니다. 이것에는 type 속성의 값에 file를 지정한 {{ HTMLElement("input") }} 요소에 새롭게 추가된 multiple 속성을 이용하는 것으로 복수 파일을 선택할 수 있게 되는 기술 지원가 포함되어 있습니다.
-
- -

DOM 주요 기능

- -
-
getElementsByClassName
-
Document 및 Element 노드에 있어서의 getElementsByClassName 메소드가 지원되어 있습니다. 이러한 메소드를 이용하는 것으로 지정한 클래스 또는 지정한 클래스의 목록를 가지는 요소를 찾아낼 수 있습니다.
-
드래그 앤 드롭
-
HTML5의 드래그앤 드롭 API는 웹 사이트간에 있어서의 아이템의 끌어오기 및 놓기 기능을 지원합니다. 또, 확장 기능이나 Mozilla 기반의 애플리케이션으로 사용할 수 있는 단순한 API 도 제공합니다.
-
HTML 내 포커스 관리
-
HTML5가 새로운 activeElement 속성과 hasFocus 속성이 지원되어 있습니다.
-
웹 기반 프로토콜 핸들러
-
navigator.registerProtocolHandler()메소드를 사용하여, 웹 애플리케이션을 프로토콜 핸들러로서 등록할 수 있게 되었습니다.
-
- -

HTML 파서

- -

Gecko의 HTML5 표준 파서(HTML 문서를  DOM으로 변환하는 엔진)는 2010 년 3 월에 기본적으로 사용됩니다(Gecko 1.9.2 / Firefox 3.6에 탑재되어 있는 시점의 HTML5 파서는 매우 불안정한 버전이며 실제 이용하는 것을 추천 하지 않습니다).{{ fx_minversion_inline(4.0) }}

- -

추가 변경사항

- -
    -
  • HTML 문서에 있어서의 localName 및 namespaceURI는 XML 문서 때와 같은 행동을 하게 되었습니다. 예를 들면, localName는 소문자를 돌려주어, HTML 요소의 namespaceURI는 "http://www.w3.org/1999/xhtml"를 돌려줍니다.
    • -
  • 페이지 URI 문서 단편 식별자 ("#" (해시) 문자에서 후의 부분)가 변경되었을 때, 새로운 hashchange 이벤트가 페이지에 보내집니다. 자세한 것은 window.onhashchange를 참조해 주십시오.
    • -
  • class 속성을 보다 간단하게 취급할 수 있도록 HTML5의 element.classList이 기술 지원되었습니다.
    • -
  • 문서에 즉시 생성되는 이벤트에 응하는 document.onreadystatechange와 document.readyState가 기술 지원되었습니다.
    • -
  • 표시에 관련하는 속성으로 지정한 색은 HTML5의 사양에 따라서 해석됩니다.
    • -
- -

HTML5의 일부로서 포함된 기술

- -

아래 기술들은 "HTML5"의 광의의 영역에 포함되어 있습니다만 W3C의 HTML5 사양에 없는 것들입니다.

- - - -

관련 문서

- -

웹 발자에게 영향이 있는 Firefox 출시 버전에 따른 변경점：

- - diff --git a/files/ko/web/html/html5/introduction_to_html5/index.html b/files/ko/web/html/html5/introduction_to_html5/index.html deleted file mode 100644 index 8b9698dc53..0000000000 --- a/files/ko/web/html/html5/introduction_to_html5/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: HTML5 소개 -slug: Web/HTML/HTML5/Introduction_to_HTML5 -tags: - - HTML5 - - 웹개발 -translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 ---- -

HTML5는 HTML 표준의 가장 새로운 버전입니다. HTML5를 통해 리치 미디어의 기술 지원 뿐만이 아니라, 사용자 및 로컬 데이터를 웹 서버 사이에 보다 간편하면서도 효과적으로 교환할 수 있는 웹 애플리케이션을 개발하기 위한 확장 기술 지원를 제공하는 새로운 기능도 제공됩니다.

- -

HTML5는 아직 표준 제정 단계에 있기 때문에 현재 사양에 대한 변경이 있을 것입니다. 따라서 모든 브라우저에 HTML5 기능 모든 것이 기술 지원되어 있는 것은 아닙니다. 하지만, Gecko (그리고 이를 사용하는 Firefox)에는 훌륭하게 HTML5의 최초 단계 기술 지원이 포함되어 있어 새로운 기능에 대한 대처를 계속하고 있습니다. Gecko는 버전 1.8.1에서 HTML5의 기능을 기술 지원하기 시작했습니다. HTML5의 메인 페이지에 Gecko가 기술 지원하고 있는 HTML5기능 목록이 있습니다. 여러 브라우저의 기술 지원 상황의 상세한 정보에 대해서는 CanIUse 웹 사이트를 참조해 주십시오.

- -

HTML5 DOCTYPE

- -

HTML5의 DOCTYPE는 매우 간단합니다. HTML 콘텐트로 HTML5를 사용하는 것을 나타내려면 단순하게 아래와 같이 합니다：

- -
<!DOCTYPE html>
-
- -

이  DOCTYPE은 현재 HTML5를 기술 지원하고 있지 않는 브라우저조차, HTML의 호환성을 유지함과 동시에 HTML5의 규격 대로 기능이 지원되지 않더라도 신기능을 무시하는 것을 의미하는 표준 모드로 전환합니다.

- -

이것은 이전의 doctype들 보다 훨씬 간단하고 짧으며, 기억하기 쉽고, 다운로드 받아야 하는 바이트의 양을 줄여줍니다.

- -

<meta charset>으로 문자셋 정의하기

- -

보통 문서의 처음에는 사용된 문자셋을 정의합니다. 이전 버전의 HTML에서는 매우 복잡한 {{HTMLElement("meta")}} 엘리먼트를 통해서 문자셋을 정의했습니다. 이제는 이렇게 간단해졌습니다.

- -
<meta charset="UTF-8">
- -

이것을 {{HTMLElement("head") }} 뒤에 가져다 놓으세요. 몇몇 브라우저는 HTML에 기대했던것과 다른 문자셋이 정의되어 있으면 문서를 다시 해석합니다. 또한, 여러분이 현재 다른 문자셋을 사용하고 있다면 UTF-8로 여러분 웹 페이지의 문자셋을 변경하는것을 추천합니다. 이것이 여러 스크립트를 사용한 문서의 문자 처리를 단순화시켜줍니다.

- -

HTML5는 ASCII와 호환되며 적어도 8비트의 크기를 가지는 문자셋만을 지원합니다. 이렇게 함으로서 보안을 강화하고 특정형태의 공격을 방지할수 있습니다.

- -

새로운 HTML5 해석기의 사용

- -

HTML5에서는 마크업의 의미를 분석하는 해석 룰이 더 정확하게 정의 되었습니다. HTML5가 나오기 전까지는 단지 유효한 마크업의 의미만 정의되었기 때문에 마크업에 작은 에러라도 있을 때 문서를 어떻게 해석해야 할지는 정의되지 않았습니다. 결국 모든 브라우저가 서로 다르게 작동했습니다. 이제는 그렇지 않습니다. 이제 마크업에 에러가 있을 때는 모든 호환 브라우저가 똑같이 반응해야 합니다.

- -

이 요구사항이 웹 개발자들의 삶을 꽤 편하게 해줍니다. 이제 모든 최신 브라우저가 HTML5의 해석 룰을 따르지만 HTML5-비호환 브라우저들도 여전히 사용되고 있습니다. 유효한 마크업을 사용하면 읽기 편하고 유지보수에 좋을 뿐 아니라, 여러 오래된 브라우저에서 호환되지 않을 가능성을 매우 줄여주기 때문에 이를 매우 추천합니다.

- -

걱정하지 마세요 — 여러분 웹사이트를 손 댈 필요는 없습니다 — 웹브라우저 개발자들이 여러분을 위해 모두 준비해놓았습니다!

diff --git "a/files/ko/web/html/html5_\353\254\270\354\204\234\354\235\230_\354\204\271\354\205\230\352\263\274_\354\234\244\352\263\275/index.html" "b/files/ko/web/html/html5_\353\254\270\354\204\234\354\235\230_\354\204\271\354\205\230\352\263\274_\354\234\244\352\263\275/index.html" deleted file mode 100644 index 87cae41ebd..0000000000 --- "a/files/ko/web/html/html5_\353\254\270\354\204\234\354\235\230_\354\204\271\354\205\230\352\263\274_\354\234\244\352\263\275/index.html" +++ /dev/null @@ -1,367 +0,0 @@ ---- -title: HTML 구획과 개요 사용하기 -slug: Web/HTML/HTML5_문서의_섹션과_윤곽 -tags: - - HTML - - HTML5 -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
{{HTMLSidebar}}
- -
-

중요: 개요 알고리즘은 W3C의 최종 명세에 포함된 적이 없고, 브라우저와 보조 기술 중 알고리즘을 구현한 경우도 없습니다. 따라서 개요 알고리즘을 사용해 사용자에게 문서 구조를 나타내서는 안됩니다. 문서 작성자는 대신 제목 순위(h1-h6)를 사용해 문서 구조를 나타내는 것이 좋습니다.

-
- -

HTML5 표준 명세서에서는 웹 개발자가 표준화된 의미론적 체계를 가지고 웹 문서의 구조를 표현할 수 있게 해주는 몇 개의 새로운 요소들을 선보였습니다. 이 문서에서는 이 새로운 요소들과 문서의 아웃라인을 의도한 대로 정의하는 법을 설명하고 있습니다.

- -

예를 들면 <div>는 콘텐츠에 대한 어떠한 내용도 포함하지 않지만, <figcaption>은 콘텐츠에 어떤 내용을 포함하고 있는지를 명확하게 포함합니다.

- -

새로운 의미론적 요소들은 HTML5에서 웹사이트의 내용을 구분하는 것을 향상시키기 위해 추가되었습니다. 개발자들은 표시된 목적 이외의 용도로 의미론적 요소를 사용하지 않도록 하는 것이 중요합니다.

- -

HTML4에서의 문서 구조

- -

문서의 구조, 즉 <body>와 </body> 사이에 있는 것의 의미론적 구조는, 페이지 내용을 사용자에게 전달하는 데 중요한 토대가 됩니다. HTML4에선 일종의 섹션과 그 하위 섹션으로 구분하는 개념을 써서 문서의 구조를 표현합니다. 섹션은 HTML 구획({{HTMLElement("div")}})요소와 함께 그 안에 있는 제목을 정의하는 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, 혹은 {{HTMLElement("h6")}})를 써서 정의됩니다. 이런 HTML 구획 요소와 HTML 제목 요소의 관계가 문서의 구조와 그 아웃라인을 결정짓게 됩니다.

- -

그래서 다음과 같은 마크업은:

- -
<div class="section" id="forest-elephants">
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
-  ...섹션 내용 진행 중...
-  <div class="subsection" id="forest-habitat">
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...하위 섹션 내용 진행 중...
-  </div>
-</div>
- -

다음과 같은 문서 아웃라인을 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-
- -

새로운 섹션을 정의할 때 {{HTMLElement("div")}} 요소가 꼭 필요한 것은 아닙니다. 단순히 HTML 제목 요소만 있으면 새로운 섹션이 시작됨을 자동으로 암시해 줍니다. 그래서,

- -
<h1>둥근귀코끼리</h1>
-<p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 대해 알아보겠습니다.
-...섹션 내용 진행 중...
-<h2>서식지</h2>
-<p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-...하위 섹션 내용 진행 중...
-<h2>먹이</h2>
-<h1>몽골 게르빌루스쥐</h1>
- -

앞의 문서는 다음과 같은 아웃라인을 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-   1.2 먹이
-2. 몽골 게르빌루스쥐
-
- -

HTML5에서 해결한 문제들

- -

HTML4에서의 문서 구조에 대한 정의와 여기에 내포된 암묵적인 문서 알고리듬은 매우 투박해서 다음과 같은 많은 문제점을 가지고 있습니다:

- -
    -
  1. 의미론적으로 섹션을 정의하는데 {{HTMLElement("div")}}을 사용하면, 특히나 class 속성에 어떠한 값도 지정하지 않았을 땐, 문서의 아웃라인을 파악하는 알고리듬을 자동화하는 것은 불가능합니다("사용된 {{HTMLElement("div")}}이 문서 아웃라인에 포함되는가, 만약 포함된다면 섹션인가 아니면 하위 섹션인가?" 혹은 "오로지 스타일 목적으로만 쓰인 표상적인 {{HTMLElement("div")}}일 뿐인가?"). 바꾸어 말하면, HTML4 표준 명세서에는 무엇이 섹션이고 어떻게 그 범위를 구분 짓는지에 대해 매우 모호하게 정의해 놓았습니다. 문서의 윤곽을 자동으로 생성하는 작업은 매우 중요하며, 특히나 보조 장비에 사용되는 기술에선 더욱 그러한데, 이를 이용해서 파악된 문서의 구조를 바탕으로 사용자에게 정보를 전달해 주게 된다는 것을 고려하면 그 중요성은 더욱 명확해집니다. HTML5에선 HTML 섹션 요소로 새롭게 {{HTMLElement("section")}} 요소를 도입하면서 문서 아웃라인 알고리듬에서 {{HTMLElement("div")}} 요소의 사용 필요성을 없애버렸습니다.
    2. -
  2. 여러 문서를 하나로 합치는 일은 복잡하고 어려운 일입니다: 주 문서에 어떤 하위 문서를 추가할 때 원래 문서의 아웃라인을 온전히 보전하려면 HTML 제목 요소의 계급을 고쳐야만 하는 일이 생깁니다. HTML5에서 새로 소개된 섹션을 구분 짓는 요소들({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} 그리?고 {{HTMLElement("aside")}})은, 내부에 포함된 제목 요소와 관계없이, 항상 그들이 속한 가장 가까운 상위 섹션의 바로 밑 하위 섹션으로 자리 잡게 되면서 이 문제를 해결하였습니다.
    3. -
  3. HTML4에선 모든 섹션이 문서 아웃라인에 영향을 주게 됩니다. 하지만 문서?가 언제나 그렇게 선형적이지만은 않지요. 문서에는 가령 광고 표시 문구를 담고 있는 구역이나 설명 문구를 담은 구획처럼 주 내용의 흐름에는 포함되진 않지만, 간접적으로 연관되는 정보를 가진 특별한 섹션이 포함될 수도 있습니다. HTML5에선 이렇게 문서의 주요 내용 윤곽에는 포함되지 않는 {{HTMLElement("aside")}} 요소가 소개되었습니다.
    4. -
  4. 반복되는 얘기지만, HTML4에선 모든 섹션이 문서의 아웃라인에 포함되기 때문에 로고나 메뉴, 문서의 목차, 혹은 저작권 정보나 법률적 고지처럼 특정 문서가 아닌 사이트 전체와 관련된 정보를 포함하는 섹션을 표현할 수가 없었습니다. 이러한 목적으로, HTML5에서 다음과 같은 세 가지 특수 목적의 섹션 요소를 소개하였습니다: 예를 들어 콘텐츠의 목차처럼 링크들의 모음을 감싸줄 때 쓰는 {{HTMLElement("nav")}} 그리고 사이트와 관련된 정보 표시를 위한 {{HTMLElement("footer")}}와 {{HTMLElement("header")}}가 있습니다.
    5. -
- -

좀 더 포괄적으로 말하면 HTML5에선 문서를 구획하고 이들에게 제목을 부여하는 방법이 좀 더 세밀해지면서, 문서의 아웃라인 파악이 좀 더 예측 가능해지고 덩달아 이를 이용한 브라우저를 통해서 사용자 경험도 향상됩니다.

- -

HTML5 문서 아웃라인 알고리즘

- -

HTML이 섹션과 문서 아웃라인을 다루는 방식에 기반한 알고리즘을 생각해 보겠습니다.

- -

HTML5에서의 섹션 정의

- -

우선 {{HTMLElement("body")}} 요소 안에 배치된 콘텐츠는 모두 적어도 하나의 섹션 안에 포함되어 자리하게 됩니다. 그리고 HTML5에서 섹션은 서로 중첩되서 표시될 수도 있습니다. {{HTMLElement("body")}} 요소에 의해 정의된 주요 섹션을 제외하고, 모든 섹션은 명시적으로나 혹은 은연중 자동으로 구분되어 정의될 수 있습니다. 명시적으로 정의되는 섹션은 {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("footer")}}, {{HTMLElement("header")}}, 그리고 {{HTMLElement("nav")}} 태그들 안에 포함된 콘텐츠입니다.

- -
각 섹션은 자기들만의 제목 계층을 가질 수 있습니다. 그래서, 중첩된 섹션이라도 {{HTMLElement("h1")}} 제목을 가질 수 있습니다. HTML5에서 제목 지정하는 법을 보십시오.
- -

보기:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <section>
-    <h1>소개</h1>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h1>서식지</h1>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
-  </section>
-  <aside>
-    <p>광고 구역</p>
-  </aside>
-</section>
-<footer>
-  <p>(c) 2013 회사 이름</p>
-</footer>
- -

위에 있는 HTML 코드에선 가장 윗 단계에 두 개의 섹션이 정의되었습니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <section>
-    <h1>소개</h1>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h1>서식지</h1>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
-  </section>
-  <aside>
-    <p>광고 구역</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2013 회사 이름?</p>
-</footer>
- -

첫 번째 섹션에선 세 개의 하위 섹션이 존재합니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-
-  <section>
-    <h1>소개</h1>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-
-  <section>
-    <h1>서식지</h1>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.</p>
-  </section>
-
-  <aside>
-    <p>광고 구역</p>
-  </aside>
-</section>
-
-<footer>
-  <p>(c) 2013 회사 이름</p>
-</footer>
- -

그래서 다음과 같은 구조를 가지게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 소개
-   1.2 서식지
-   1.3 광고 구역 (aside)
-
- -

HTML5에서 제목 지정하는 법

- -

비록 명시적 HTML 섹션 요소가 문서의 전체 구조를 정해주기는 하지만, 그 아웃라인을 좀 더 명확하게 표현하려면 제목의 사용도 중요합니다. 기본 규칙은 단순합니다: 처음 쓰인 HTML 제목 요소({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} 중 하나)가 해당 섹션의 제목으로 정해집니다.

- -

제목 요소엔 요소 이름에 붙은 숫자를 가지고 계급을 매기는데, {{HTMLElement("h1")}}이 최상위 계급이며 {{HTMLElement("h6")}}는 최하위 계급이 됩니다. 제목 간 계급의 상대적 등급은 오로지 같은 섹션 안에서만 중요해집니다; 이 말은 섹션의 구조가 문서의 아웃라인을 결정짓는 데 중요한 변수로 작용하지만, 섹션 안에서 사용된 제목의 계급은 여기에 아무런 관련이 없다는 얘기입니다. 예를 들어, 아래와 같은 코드를 살펴보면:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...계속 된 섹션 내용...
-  <section>
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...계속 된 하위 섹션 내용...
-  </section>
-</section>
-<section>
-  <h3>몽골 게르빌루스쥐</h3>
-  <p>이번 섹션에선, 잘 알려진 몽골 게르빌루스쥐에 관해 알아보겠습니다.
-    ...계속 된 섹션 내용...
-</section>
- -

이는 다음과 같은 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지
-2. 몽골 게르빌루스쥐
- -

여기서 쓰인 제목 요소의 계급(위 보기에선 처음 최상위 섹션의 {{HTMLElement("h1")}}, 그 하위 섹션의 {{HTMLElement("h2")}} 그리고 두 번째 최상위 섹션에서 사용된 {{HTMLElement("h3")}})은 중요하지 않다는 점을 주목하십시오. (명시적으로 정의된 섹션의 제목으로 어떠한 계급을 써도 상관은 없지만, 이 방식이 권장되는 것은 아닙니다.)

- -

은연중 자동으로 정의되는 섹션

- -

HTML5에서 소개된 명시적 섹션 요소들만이 문서의 아웃라인을 정의하는 데 절대적으로 필요한 요소는 아니므로, 기존 웹에서 지배적으로 사용되는 HTML4와의 호환성을 지키려는 노력의 일환으로, 이들 없이도 섹션을 정의하는 또 하나의 방법이 있습니다. 이를 은연중 자동으로 정의되는 섹션이라 하겠습니다.

- -

HTML 제목 요소({{HTMLElement("h1")}}부터 {{HTMLElement("h6")}})는 만약에 그들이 속한 상위 명시적 섹션의 첫 번째 제목으로 사용되지 않았다면, 자동으로 또 하나의 새로운 암묵적인 섹션으로 분류/정의되어 집니다. 이들 암묵적 섹션이 문서 아웃라인에서 위치하게 되는 기준은 기존 이들 제목을 포함하고 있는 상위 섹션에서 사용된 제목과의 상대적 계급에 따라 결정됩니다. 만약 전에 사용된 제목보다 계급이 더 낮다면, 은연중으로 해당 섹션의 하위 섹션으로 자리 잡게 됩니다. 아래 코드를 살펴보면:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <h3 class="implicit subsection">서식지</h3>
-  <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-    ...하위 섹션 내용 진행 중...
-</section>
- -

이는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-   1.1 서식지 (h3 요소에 의해 은연중 자동으로 정의됨)
-
- -

만약에 이전에 사용된 제목과 같은 계급이라면, (명시적으로 정의되었을 수도 있지요!) 바로 이전 섹션과 구분되면서 같은 계급의 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

- -
<section>
-  <h1>둥근귀코끼리</h1>
-  <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <h1 class="implicit section">몽골 게르빌루스쥐</h1>
-  <p>몽골 게르빌루스쥐는 귀엽고 작은 포유 동물입니다.
-    ...섹션 내용 진행 중...
-</section>
- -

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 둥근귀코끼리
-2. 몽골 게르빌루스쥐 (h1 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
-
- -

만약에 이전에 사용된 제목보다 더 높은 계급의 제목이 사용되었다면, 이전 섹션과 구분되면서 더 높은 제목의 계급을 가진 또 하나의 새로운 암묵적 섹션으로 자리하게 됩니다:

- -
<body>
-  <h1>포유 동물</h1>
-  <h2>고래</h2>
-  <p>이번 섹션에선, 유영하는 고래에 관해 알아보겠습니다.
-    ...섹션 내용 진행 중...
-  <section>
-    <h3>둥근귀코끼리</h3>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.
-      ...섹션 내용 진행 중...
-    <h3>몽골 게르빌루스쥐</h3>
-      <p>몽골 게르빌루스쥐의 무리는 몽골을 훨씬 벗어나는 구역까지 퍼져있습니다.
-         ...하위 섹션 내용 진행 중...
-    <h2>파충류</h2>
-      <p>파충류는 냉혈 동물입니다.
-          ...하위 섹션 내용 진행 중...
-  </section>
-</body>
- -

위 코드는 다음과 같은 문서 아웃라인을 갖게 됩니다:

- -
1. 포유 동물
-   1.1 고래 (h2 요소에 의해 자동으로 정의됨)
-   1.2 둥근귀코끼리 (섹션 요소에 의해 명시적으로 정의됨)
-   1.3 몽골 게르빌루스쥐 (h3 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
-2. 파충류 (h2 요소에 의해 자동으로 정의됨과 동시에 이전 섹션과 구분되어 짐)
- -

단순히 써진 제목의 태그들만 살펴본다면, 이것은 결코 예상했던 문서의 아웃라인은 아닐 것입니다. 그래서 작성한 마크업이 다른 사람에게도 쉽게 이해되도록 하려면, 섹션을 구분할 때 명시적 섹션 요소의 태그들을 쓰는 것이 바람직하며, 원래 의도하는 섹션의 중첩 수준을 고려해서 그에 어울리는 제목의 계급을 써야 합니다. 그런데 이것이 꼭 HTML5 명세서에서 요구하는 필수 준수 사항은 아닙니다. 만약에 작성한 문서의 아웃라인을 브라우저가 원래 의도한 방향으로 표시해 주지 못한다면, 혹시 사용한 제목 요소가 은연중 자동으로 기존 섹션과 구분되게 사용되었는지 확인해 보시기 바랍니다.

- -

제목의 계급은 항상 해당 섹션의 중첩 수준과 일치하도록 쓰라는 규칙의 예외도 있을 수 있는데, 그 중 하나 여러 문서에서 공통으로 재사용되는 섹션의 경우가 있습니다. 예를 들면, 섹션 내용이 어떤 콘텐츠 관리 시스템에 저장되어 실시간으로 여러 다른 저장된 내용과 함께 조합되어 문서에 표시될 때가 있습니다. 이 경우엔, 재사용되는 섹션의 가장 최상위 제목으로 {{HTMLElement("h1")}}부터 시작해서 사용하실 것을 권장합니다. 그러면 재사용되는 섹션의 중첩 수준은 문서의 섹션 계층 중 해당 섹션이 삽입되어 보이는 위치에 따라 자동으로 결정될 것입니다. 이 경우에도 명시적 섹션 태그가 문서 아웃라인을 명확히 하는 데 도움을 줍니다.

- -

섹션 구분의 근원점

- -

섹션 구분의 근원점은 HTML 요소 중 자기만의 아웃라인을 가질 수는 있지만, 그 안의 섹션이나 제목이 자기 위에 있는 요소의 아웃라인에는 어떠한 영향도 끼치지 않는 것들을 가리킵니다. 논리적으로 따지면 당연히 문서의 섹션을 구분하는데 그 근본이 되는 {{HTMLElement("body")}}가 여기에 포함되고, 이 외에도 종종 외부 콘텐츠를 페이지에 표시하는 데 사용되는 다음과 같은 요소들도 있습니다: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}} 마지막으로 {{HTMLElement("td")}}.

- -

보기:

- -
<section>
-  <h1>숲 코끼리</h1>
-  <section>
-    <h2>소개</h2>
-    <p>이번 섹션에선, 잘 알려지지 않은 둥근귀코끼리에 관해 알아보겠습니다.</p>
-  </section>
-  <section>
-    <h2>서식지</h2>
-    <p>둥근귀코끼리는 나무에 살지는 않고 나무들 사이에 그 서식지를 이루고 있습니다.
-      과학자들은 "<cite>보르네오 섬의 둥근귀코끼리</cite>"라는 제목의 책에서 다음과 같이 서술하고 있습니다:</p>
-    <blockquote>
-       <h1>보르네오 섬</h1>
-       <p>보르네오 섬에 서식하는 둥근귀코끼리...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

위의 보기에선 다음과 같은 문서 아웃라인을 가지게 됩니다:

- -
1. 숲 코끼리
-   1.1 소개
-   1.2 서식지
- -

이 문서의 아웃라인을 살펴보면 외부 인용 문구로 사용된 {{HTMLElement("blockquote")}} 요소의 경우, 섹션 구분의 근원이 되는 요소 중 하나로서 자기가 포함하고 있는 내부 내용의 아웃라인이 외부의 것과 완전히 차단되면서, 전체 문서의 아웃라인에는 포함되지 않았습니다.

- -

문서의 아웃라인 밖에 존재하는 섹션

- -

HTML5에선 웹 문서의 주요 아웃라인에 속하지 않는 섹션을 정의할 수 있도록 하는 새로운 네 가지의 요소들을 소개하고 있습니다:

- -
    -
  1. HTML Aside 섹션 요소({{HTMLElement("aside")}})는 주요 문맥을 담은 요소와 어떤 관련성을 지니고 있지만, 어떤 부연 설명 표시 영역이나 광고처럼 문맥의 주요 흐름 줄기엔 속하지 않는 섹션을 나타냅니다. 물론 자기만의 아웃라인을 가지고 있어서, 문서의 주요 아웃라인엔 포함되지 않습니다.
    2. -
  2. HTML Navigational 섹션 요소({{HTMLElement("nav")}})는 내비게이션 링크들을 포함하고 있는 섹션입니다. 이런 링크들은 문서에 여러 개가 있을 수 있는데, 예를 들어, 콘텐츠 목차와 같은 페이지 내부 링크나 사이트의 내비게이션 링크가 있습니다. 이런 링크는 문서의 주요 문맥과 아웃라인에 포함되지 않아서 보통 처음에는 스크린 리더나 비슷한 보조 기술을 사용하는 장치에서 읽어드리지 않을 수도 있습니다.
    3. -
  3. HTML Header 섹션 요소({{HTMLElement("header")}})는 페이지의 도입부로서 보통 로고나 사이트 이름 그리고 수평 메뉴를 포함하고 있습니다. 이름에서 풍기는 느낌과는 달리 꼭 페이지 처음에 있을 필요는 없습니다.
    4. -
  4. HTML Footer 섹션 요소({{HTMLElement("footer")}})는 페이지의 종결부로서 보통 저작권이나 법률적 고지 혹은 약간의 링크들을 포함하고 있습니다. 이것도 역시 이름이 가진 직설적 의미와 달리 페이지 끝에 있을 필요는 없습니다.
    5. -
- -

섹션을 구분짓는 요소의 주소와 발행 시간

- -

문서를 작성하다 보면 종종 저자의 이름이나 주소와 같은 연락 정보를 공개하고 싶을 때가 있습니다. HTML4에선 이런 목적으로 {{HTMLElement("address")}} 요소가 쓰였는데, HTML5에선 여기에 더 보완된 내용이 추가되었습니다.

- -

가끔 문서에는 여러 명의 저자가 작성한 여러 개의 섹션이 포함되어 있을 수도 있습니다. 메인 페이지의 저자와 다른 또 다른 사람?이 작성한 콘텐츠가 포함된 섹션은 {{HTMLElement("article")}} 요소를 써서 정의합니다. 이렇게 하면, {{HTMLElement("address")}} 요소는 지정?된 위치에 따라 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}}과 연관된 정보로 표시됩니다.

- -

비슷하게, HTML5의 새 {{HTMLElement("time")}} 요소에 pubdate boolean 속성이 지정되었다면 문서 전체의 발행 날짜를 표시해 주는데, article에서처럼, 가장 가까운 상위의 {{HTMLElement("body")}} 혹은 {{HTMLElement("article")}} 과 연관된 정보로 표시됩니다.

- -

HTML5 미지원 브라우저에서 HTML5 요소를 사용하는 법

- -

섹션과 제목 요소들은 대부분의 HTML5 미지원 브라우저에서도 정상적으로 사용하실 수 있습니다. 지원하진 않더라도, 어떤 특별한 DOM 인터페이스가 필요한 것은 아니고 단지 인식하지 못하는 요소는 기본적으로 display:inline 으로 표시되기 때문에 다음과 같이 특별한 CSS 스타일을 지정해 주어야 합니다:

- -
section, article, aside, footer, header, nav, hgroup {
-  display:block;
-}
-
- -

물론 웹 개발자가 이들의 스타일을 달리 표시해 줄 수도 있는데, HTML5 미지원 브라우저에선 해당 요소들의 기본 표시 스타일이 원래의 정상적인 것과 다르다는 점을 명심해야 합니다. 또한, 여기엔 {{HTMLElement("time")}} 요소가 포함되지 않았는데, 그 이유는 기본 스타일이 HTML5 미지원 브라우저의 것과 HTML5 호환 브라우저의 것과 서로 같기 때문입니다.

- -
그런데 이 방법도 약간의 제약이 있어서, 어떤 브라우저에선 지원하지 않은 요소의 스타일을 애초에 지정할 수도 없게 되어 있습니다. Internet Explorer(버전 8 이하)가 여기에 해당하는데, 제대로 스타일을 지정해 주려면 다음과 같은 스크립트가 필요합니다:
- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-<![endif]-->
- -

이 스크립트가 하는 일은, Internet Explorer(8 혹은 그 이하)일 경우, HTML5의 섹션 요소와 제목 요소가 제대로 표시될 수 있도록 실행됩니다. 여기에 언급된 요소들은 전체 페이지의 구조를 정의하는 데 필요한 아주 중요한 요소이기 때문에, 만약에 스크립트의 힘을 빌리지 않다면 표시조차 되지 않게 되면서 문제 될 수 있습니다. 그래서 이런 때를 대비해서 명시적으로 다음과 같은 {{HTMLElement("noscript")}} 요소도 추가되어야 합니다:

- -
<noscript>
-   <strong>주의 !</strong>
-   귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
-   그런데 안타깝게도 귀하의 브라우저에선 스크립트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
-</noscript>
- -

그래서 결국, Internet Explorer(8 혹은 그 이하)처럼 HTML5 미지원 브라우저에서도 HTML5의 섹션과 제목 요소를 제대로 지원하도록 하고, 또 만약을 대비해 이런 미지원 브라우저에서 스크립팅 기능이 꺼져있을 때를 대비해서 다음과 같은 코드를 추가해 줘야 합니다:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("header" );
-    document.createElement("footer" );
-    document.createElement("section");
-    document.createElement("aside"  );
-    document.createElement("nav"    );
-    document.createElement("article");
-    document.createElement("hgroup" );
-    document.createElement("time"   );
-  </script>
-  <noscript>
-     <strong>주의 !</strong>
-     귀하가 사용하고 계신 브라우저는 HTML5를 지원하고 있지 않아서, 할 수 없이 JScript를 써서 몇몇 요소가 제대로 보이도록 구현했습니다.
-     그런데 안타깝게도 귀하의 브라우저에선 스크리트 기능이 꺼져있습니다. 이 페이지가 제대로 표시되려면 스크립트 기능을 켜주셔야만 합니다.
-   </noscript>
-<![endif]-->
-
- -

맺음말

- -

HTML5에서 소개된 새로운 섹션과 제목 요소는 웹 문서의 구조와 아웃라인을 표준화된 방법으로 작성할 수 있게 도와줍니다. 또한, HTML5를 지원하는 브라우저 사용자나 페이지 내용을 제대로 전달하는데 그 구조 파악이 중요한, 예를 들어 보조 지원 기술의 도움으로 페이지의 내용을 파악하는, 사용자 모두에게 커다란 이득을 안겨다 줍니다. 새로 소개된 의미가 담긴 요소들은, 약간의 노력만 기울인다면, 사용이 간편해서 HTML5 미지원 브라우저에서도 온전히 사용하실 수 있습니다. 그러므로 아무런 제약 없이 마음 놓고 사용하시기 바랍니다.

diff --git a/files/ko/web/http/browser_detection_using_the_user_agent/index.html b/files/ko/web/http/browser_detection_using_the_user_agent/index.html new file mode 100644 index 0000000000..8ffc0ff0b5 --- /dev/null +++ b/files/ko/web/http/browser_detection_using_the_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 +--- +
{{HTTPSidebar}}
+ +

보통 브라우저마다 다른 웹 페이지 또는 서비스를 제공하는 것은 나쁜 생각입니다. 웹은 사용자가 어떤 브라우저나 디바이스를 사용하고 있는지 개의치 않고 모두에게 접근성이 용이해야 하기 때문입니다. 따라서 특정 브라우저를 타겟으로 개발하는 것보다 가용적인 기능들 (예를 들어 Web API 등)을 이용하여 당신의 웹 사이트를 개선하는 것을 추천합니다.

+ +

하지만 브라우저와 웹 표준은 완벽하지 않고 그 간극은 여전히 브라우저 감지 기능을 필요로 합니다. User-Agent를 사용하여 브라우저를 감지하는 것은 간단해 보이지만, 사실 그것을 잘 이용하는 것은 무척 힘든 일입니다. 이 문서는 사용자 에이전트를 이용하여 브라우저를 바르게 감지하도록 안내합니다.

+ +
+

주의하세요! user agent 정보를 가로채는 것은 좋은 아이디어가 아닙니다. 대부분의 경우 호환성이 뛰어난 좋은 다른 해결방안을 찾을 수 있을 것입니다.

+
+ +

브라우저 감지를 하기 전 고려할 것

+ +

사용자 에이전트 문자열을 이용해 브라우저를 감지하기 전에 가능하다면 이것을 사용하지 않는 것이 첫 번째입니다. 내가 왜 이 기능을 원하는지 다시 한 번 스스로 확인하길 바랍니다.

+ +
+
특정 브라우저 버전의 버그를 고치려고 하나요?
+
포럼에서 찾아보십시오. 만약 이 버그를 당신이 처음 발견했다면 포럼에 질문을 하십시오. 또한 전문가나 다른 견해를 가진 이들이 이 버그를 해결하는데 도움을 줄 것입니다. 만약 버그가 좀처럼 없는 문제라면 브라우저 제공자의 버그 추적 시스템(Mozilla, WebKit, Blink, Opera)에 보고된 버그인지 확인하세요.
+
특정 기능의 존재를 확인하려고 하나요?
+
당신의 사이트에 몇몇 브라우저에서 아직 지원하지 않은 기능을 사용해야 하고, 해당 유저들을 이전 버전의 웹사이트로 보내고 싶어 하지만 당신은 후에 해당 브라우저에서 해당 기능이 동작할 것이라는걸 압니다. 이것이 사용자 에이전트 탐지를 사용하는 가장 나쁜 이유인데, 결국 다른 브라우저들이 그 문제를 따라잡을 것이기 때문입니다. 이러한 시나리오에서 당신은 가능한 유저 에이전트 탐지를 절대 피해야 하고, 대신 언제나 기능탐지를 하는데 최선을 다해야 합니다. 대신 언제든지 기능 탐지를 할 수 있는 대체방안이 존재합니다
+
사용하는 브라우저에 따라 다른 HTML을 제공해야 하나요?
+
이는 권해드리고 싶지 않지만, 필요에 따른 몇가지 방법이 있습니다. 이러한 상황들일 경우, 우선 브라우저에 따른 다양한 HTML을 사용해야 하는지 결정하기 위해 당신의 상황을 분석할 필요가 있습니다. 당신은 non-semantic인  {{ HTMLElement("div") }} 나 {{ HTMLElement("span") }}  요소를 추가함으로써 이를 방지할 수 있나요? user Agent 감지를 성공적으로 하는 것의 어려움은 몇몇 혼란스러운 HTML을 깨끗하게 바꾸는데 가치가 있습니다. 또한 당신의 디자인에 대해 다시한번 생각해보세요. 브라우저별로 다른 HTML을 사용할 필요성을 없애기 위해 점진적 향상(progressive enhancement)이나 가변 레이아웃(fluid layout)을 사용할 수 있나요?
+
+ +

사용자 에이전트를 대신할 방법

+ +

user agent 감지를 피하는 몇 가지 방법이 있습니다!

+ +
+
기능 탐지
+
기능 탐지는 어떤 브라우저가 당신의 페이지를 렌더링하는지를 알아내려고 할 때가 아니라, 어떤 특정한 기능을 당신이 사용가능한지를 확인할 때 사용합니다. 그렇지 않다면, 대비책을 사용하세요. 브라우저 간의 차이점을 찾는 몇 안되는 경우에서는 user agent 문자열을 사용하는 대신, 브라우저가 API를 구현하는 방법을 탐지하고 API를 사용하는 방법을 결정하는 테스트를 구현하는 것이 좋습니다. 아래는 기능탐지의 좋은 최신 예시 입니다. 최근 크롬은 experimental lookbehind support to regular expressions을 추가했지만, 다른 브라우저들은 이를 지원하지 않습니다. 그러므로 당신은 이와 같이 해야 한다고 잘못 생각하고 있을 것입니다.
+
+ 
// 아래 코드 조각은 한 문자열을 특별한 표기법으로 쪼갭니다.
+
+if (navigator.userAgent.indexOf("Chrome") !== -1){
+    // 네! 이 사용자가 정규표현식의 look-behind 기능을 사용하려는 것
+    //  같습니다.
+    // /(?<=[A-Z])/를 사용하지 마십시오. 정규표현식의
+    //  look-behind 기능을 지원하지 않는 브라우저에서는 문법오류가
+    //  발생할 것입니다. 왜냐하면, 모든 브라우저들은 실제로 실행되지
+    //  않는 부분을 포함한 전체 스크립트를 해석하기 때문입니다.
+    var camelCaseExpression = new RegExp("(?<=[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"]
+ +

위의 코드는 다음과 같은 몇 가지 잘못된 가정을 했습니다.

+ +
    +
  • 하위 문자열 "Chrome"을 포함하는 모든 사용자 에이전트 문자열은 크롬이라고 가정했습니다. UA 문자열은 틀릴 가능성이 매우 높습니다.
    • +
  • 정규표현식의 look-behind 기능이 크롬 브라우저에서는 항상 지원될 것이라고 가정했습니다. 하지만 agent가 해당 기능이 지원되기 전인 옛 버전의 크롬일 수도 있고, 당시에는 look-behind는 실험적 기능이었기 때문에, 이를 제거한 버전의 크롬일 수도 있습니다.
    • +
  • 가장 중요한 점은, 다른 모든 브라우저들이 look-behind를 지원할 것이라고 가정했습니다. 다른 브라우저들도 look-behind 기능을 지원하는 버전이 모두 다를텐데, 이 코드는 이를 무시하고 코드를 진행합니다.
    • +
+ +

look-behind 지원여부 자체를 테스트함으로써 이 문제들을 회피할 수 있습니다.

+ + 
var isLookBehindSupported = false;
+
+try {
+    new RegExp("(?<=)");
+    isLookBehindSupported = true;
+} catch (err) {
+    // agent가 look-behind 기능을 지원하지 않는다면, 위 문법을 사용한
+    // RegExp 객체의 생성이 에러를 던질 것이고, isLookBehindSupported는
+    // 여전히 false일 것입니다.
+}
+
+var splitUpString = isLookBehindSupported ? function(str) {
+    return (""+str).split(new RegExp("(?<=[A-Z])"));
+} : function(str) {
+    return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
+};
+
+ +

위의 코드가 시범을 보였듯이, user agent를 살펴보지 않고도 어떤 기능에 대한 브라우저 지원 여부를 시험할 수 있는 방법이 항상 존재합니다. 기능 지원 여부를 확인하기 위해 user agent 문자열을 확인할 필요가 전혀 없습니다.

+ +

마지막으로, 위의 코드 조각은 크로스 브라우저 코딩과 관련하여 항상 염두에 두어야만 하는 중요한 이슈를 시사합니다.테스트 중인 API를 해당 기능이 지원되지 않는 브라우저에서 실수로 사용하지 마십시오. 확실하고 단순한 이야기 같지만, 때때로 그렇지 않습니다. 예를 들어, 위의 코드 조각에서, lookbehind 기능을 short-regexp 표기법(예를 들어, /reg/igm)으로 사용한다면, 지원되지 않는 브라우저에서는 파싱 에러가 발생할 것입니다. 따라서, 위의 예제에서, /(?<=look_behind_stuff)/ 대신에 new RegExp("(?<=look_behind_stuff)")를 사용하는 것이 좋습니다. 심지어 lookbehind가 지원되는 조건분기의 코드에서도 말입니다.

+
+
점진적 향상
+
이 디자인 테크닉은 여러분의 사이트를 상향식 접근방법으로 "레이어" 형태 개발할 수 있게 해줍니다. 간단한 레이어로 시작하여, 각각이 더 많은 기능을 이용하는 연속적인 레이어를 가진 사이트로 성능을 개선할 수 있습니다.
+
부드러운 하향
+
이는 여러분이 원하는 모든 기능이 포함된 최선의 사이트를 만들고 나서 오래된 브라우저들도 지원하게 수정하는 하향식 접근입니다. 점진적 상향 방식보다는 조금 더 어렵기도 하고 덜 효과적이기도 하지만, 몇몇 케이스에서는 유용할 것입니다.
+
모바일 장치 감지
+
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 Navigator.maxTouchPoints to detect if the user's device has a touchscreen. Then, default back to checking the user agent screen only if (!("maxTouchPoints" in Navigator)) { /*Code here*/}. 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 window.innerWidth and window.addEventListener("resize", function(){ /*refresh screen size dependent things*/ }). 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.
+
+ +

Which part of the user agent contains the information you are looking for

+ +

As there is no uniformity of the different part of the user agent string, this is the tricky part.

+ +

브라우저 이름

+ +

사람들이 "브라우저 감시(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.

+ +

Most browser set the name and version in the format BrowserName/VersionNumber, 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.

+ +

Also pay attention not to use a simple regular expression on the BrowserName, user agents also contain strings outside the Keyword/Value syntax. Safari & Chrome contain the string 'like Gecko', for instance.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
반드시 포함반드시 포함하지 않음
FirefoxFirefox/xyzSeamonkey/xyz
SeamonkeySeamonkey/xyz
ChromeChrome/xyzChromium/xyz
ChromiumChromium/xyz
SafariSafari/xyzChrome/xyz or Chromium/xyzSafari gives two version number, one technical in the Safari/xyz token, one user-friendly in a Version/xyz token
Opera +

OPR/xyz [1]

+ +

Opera/xyz [2]

+ 		+

[1]  Opera 15+ (Blink-based engine) 

+ +

[2] Opera 12- (Presto-based engine)

+
Internet Explorer; MSIE xyz;Internet Explorer doesn't put its name in the BrowserName/VersionNumber format
+ +

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).

+ +

브라우저 버전

+ +

The browser version is often, but not always, put in the value part of the BrowserName/VersionNumber 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/VersionNumber token.

+ +

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.

+ +

렌더링 엔진

+ +

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.

+ +

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.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
반드시 포함
GeckoGecko/xyz
WebKitAppleWebKit/xyzPay attention, WebKit browsers add a 'like Gecko' string that may trigger false positive for Gecko if the detection is not careful.
PrestoOpera/xyzNote: Presto is no longer used in Opera browser builds >= version 15 (see 'Blink')
TridentTrident/xyzInternet Explorer put this token in the comment part of the User Agent String
BlinkChrome/xyz
+ +

렌더링 엔진 버전

+ +

Most rendering engine put the version number in the RenderingEngine/VersionNumber token, with the notable exception of Gecko. Gecko puts the Gecko version number in the comment part of the User Agent after the rv: string. From Gecko 14 for the mobile version and Gecko 17 for the desktop version, it also puts this value in the Gecko/version token (previous version put there the build date, then a fixed date called the GeckoTrail).

+ +

운영체제

+ +

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).

+ +

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.

+ +

모바일, 태블릿, 데스크톱

+ +

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.

+ +
    +
  • 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.
    • +
  • 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).
    • +
+ +

The following table summarizes the way major browser vendors indicate that their browsers are running on a mobile device:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Common browsers User Agent strings
브라우저규칙예제
Mozilla (Gecko, Firefox)Mobile or Tablet token in the comment.Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0
WebKit-based (Android, Safari)Mobile Safari token outside the comment.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
Blink-based (Chromium, Google Chrome, Opera 15+)Mobile Safari token outside the commentMozilla/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
Presto-based (Opera 12-) +

Opera Mobi/xyz token in the comment (Opera 12-)

+ 		+

Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50

+
Internet ExplorerIEMobile/xyz token in the comment.Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
+ +

In summary, we recommend looking for the string “Mobi” anywhere in the User Agent to detect a mobile device.

+ +
+

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).

+
diff --git "a/files/ko/web/http/user_agent\353\245\274_\354\235\264\354\232\251\355\225\234_\353\270\214\353\235\274\354\232\260\354\240\200_\352\260\220\354\247\200/index.html" "b/files/ko/web/http/user_agent\353\245\274_\354\235\264\354\232\251\355\225\234_\353\270\214\353\235\274\354\232\260\354\240\200_\352\260\220\354\247\200/index.html" deleted file mode 100644 index 8ffc0ff0b5..0000000000 --- "a/files/ko/web/http/user_agent\353\245\274_\354\235\264\354\232\251\355\225\234_\353\270\214\353\235\274\354\232\260\354\240\200_\352\260\220\354\247\200/index.html" +++ /dev/null @@ -1,296 +0,0 @@ ---- -title: 사용자 에이전트를 이용한 브라우저 감지 -slug: Web/HTTP/User_agent를_이용한_브라우저_감지 -tags: - - Compatibility - - HTTP - - Web Development -translation_of: Web/HTTP/Browser_detection_using_the_user_agent ---- -
{{HTTPSidebar}}
- -

보통 브라우저마다 다른 웹 페이지 또는 서비스를 제공하는 것은 나쁜 생각입니다. 웹은 사용자가 어떤 브라우저나 디바이스를 사용하고 있는지 개의치 않고 모두에게 접근성이 용이해야 하기 때문입니다. 따라서 특정 브라우저를 타겟으로 개발하는 것보다 가용적인 기능들 (예를 들어 Web API 등)을 이용하여 당신의 웹 사이트를 개선하는 것을 추천합니다.

- -

하지만 브라우저와 웹 표준은 완벽하지 않고 그 간극은 여전히 브라우저 감지 기능을 필요로 합니다. User-Agent를 사용하여 브라우저를 감지하는 것은 간단해 보이지만, 사실 그것을 잘 이용하는 것은 무척 힘든 일입니다. 이 문서는 사용자 에이전트를 이용하여 브라우저를 바르게 감지하도록 안내합니다.

- -
-

주의하세요! user agent 정보를 가로채는 것은 좋은 아이디어가 아닙니다. 대부분의 경우 호환성이 뛰어난 좋은 다른 해결방안을 찾을 수 있을 것입니다.

-
- -

브라우저 감지를 하기 전 고려할 것

- -

사용자 에이전트 문자열을 이용해 브라우저를 감지하기 전에 가능하다면 이것을 사용하지 않는 것이 첫 번째입니다. 내가 왜 이 기능을 원하는지 다시 한 번 스스로 확인하길 바랍니다.

- -
-
특정 브라우저 버전의 버그를 고치려고 하나요?
-
포럼에서 찾아보십시오. 만약 이 버그를 당신이 처음 발견했다면 포럼에 질문을 하십시오. 또한 전문가나 다른 견해를 가진 이들이 이 버그를 해결하는데 도움을 줄 것입니다. 만약 버그가 좀처럼 없는 문제라면 브라우저 제공자의 버그 추적 시스템(Mozilla, WebKit, Blink, Opera)에 보고된 버그인지 확인하세요.
-
특정 기능의 존재를 확인하려고 하나요?
-
당신의 사이트에 몇몇 브라우저에서 아직 지원하지 않은 기능을 사용해야 하고, 해당 유저들을 이전 버전의 웹사이트로 보내고 싶어 하지만 당신은 후에 해당 브라우저에서 해당 기능이 동작할 것이라는걸 압니다. 이것이 사용자 에이전트 탐지를 사용하는 가장 나쁜 이유인데, 결국 다른 브라우저들이 그 문제를 따라잡을 것이기 때문입니다. 이러한 시나리오에서 당신은 가능한 유저 에이전트 탐지를 절대 피해야 하고, 대신 언제나 기능탐지를 하는데 최선을 다해야 합니다. 대신 언제든지 기능 탐지를 할 수 있는 대체방안이 존재합니다
-
사용하는 브라우저에 따라 다른 HTML을 제공해야 하나요?
-
이는 권해드리고 싶지 않지만, 필요에 따른 몇가지 방법이 있습니다. 이러한 상황들일 경우, 우선 브라우저에 따른 다양한 HTML을 사용해야 하는지 결정하기 위해 당신의 상황을 분석할 필요가 있습니다. 당신은 non-semantic인  {{ HTMLElement("div") }} 나 {{ HTMLElement("span") }}  요소를 추가함으로써 이를 방지할 수 있나요? user Agent 감지를 성공적으로 하는 것의 어려움은 몇몇 혼란스러운 HTML을 깨끗하게 바꾸는데 가치가 있습니다. 또한 당신의 디자인에 대해 다시한번 생각해보세요. 브라우저별로 다른 HTML을 사용할 필요성을 없애기 위해 점진적 향상(progressive enhancement)이나 가변 레이아웃(fluid layout)을 사용할 수 있나요?
-
- -

사용자 에이전트를 대신할 방법

- -

user agent 감지를 피하는 몇 가지 방법이 있습니다!

- -
-
기능 탐지
-
기능 탐지는 어떤 브라우저가 당신의 페이지를 렌더링하는지를 알아내려고 할 때가 아니라, 어떤 특정한 기능을 당신이 사용가능한지를 확인할 때 사용합니다. 그렇지 않다면, 대비책을 사용하세요. 브라우저 간의 차이점을 찾는 몇 안되는 경우에서는 user agent 문자열을 사용하는 대신, 브라우저가 API를 구현하는 방법을 탐지하고 API를 사용하는 방법을 결정하는 테스트를 구현하는 것이 좋습니다. 아래는 기능탐지의 좋은 최신 예시 입니다. 최근 크롬은 experimental lookbehind support to regular expressions을 추가했지만, 다른 브라우저들은 이를 지원하지 않습니다. 그러므로 당신은 이와 같이 해야 한다고 잘못 생각하고 있을 것입니다.
-
- 
// 아래 코드 조각은 한 문자열을 특별한 표기법으로 쪼갭니다.
-
-if (navigator.userAgent.indexOf("Chrome") !== -1){
-    // 네! 이 사용자가 정규표현식의 look-behind 기능을 사용하려는 것
-    //  같습니다.
-    // /(?<=[A-Z])/를 사용하지 마십시오. 정규표현식의
-    //  look-behind 기능을 지원하지 않는 브라우저에서는 문법오류가
-    //  발생할 것입니다. 왜냐하면, 모든 브라우저들은 실제로 실행되지
-    //  않는 부분을 포함한 전체 스크립트를 해석하기 때문입니다.
-    var camelCaseExpression = new RegExp("(?<=[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"]
- -

위의 코드는 다음과 같은 몇 가지 잘못된 가정을 했습니다.

- -
    -
  • 하위 문자열 "Chrome"을 포함하는 모든 사용자 에이전트 문자열은 크롬이라고 가정했습니다. UA 문자열은 틀릴 가능성이 매우 높습니다.
    • -
  • 정규표현식의 look-behind 기능이 크롬 브라우저에서는 항상 지원될 것이라고 가정했습니다. 하지만 agent가 해당 기능이 지원되기 전인 옛 버전의 크롬일 수도 있고, 당시에는 look-behind는 실험적 기능이었기 때문에, 이를 제거한 버전의 크롬일 수도 있습니다.
    • -
  • 가장 중요한 점은, 다른 모든 브라우저들이 look-behind를 지원할 것이라고 가정했습니다. 다른 브라우저들도 look-behind 기능을 지원하는 버전이 모두 다를텐데, 이 코드는 이를 무시하고 코드를 진행합니다.
    • -
- -

look-behind 지원여부 자체를 테스트함으로써 이 문제들을 회피할 수 있습니다.

- - 
var isLookBehindSupported = false;
-
-try {
-    new RegExp("(?<=)");
-    isLookBehindSupported = true;
-} catch (err) {
-    // agent가 look-behind 기능을 지원하지 않는다면, 위 문법을 사용한
-    // RegExp 객체의 생성이 에러를 던질 것이고, isLookBehindSupported는
-    // 여전히 false일 것입니다.
-}
-
-var splitUpString = isLookBehindSupported ? function(str) {
-    return (""+str).split(new RegExp("(?<=[A-Z])"));
-} : function(str) {
-    return str.replace(/[A-Z]/g,"z$1").split(/z(?=[A-Z])/g);
-};
-
- -

위의 코드가 시범을 보였듯이, user agent를 살펴보지 않고도 어떤 기능에 대한 브라우저 지원 여부를 시험할 수 있는 방법이 항상 존재합니다. 기능 지원 여부를 확인하기 위해 user agent 문자열을 확인할 필요가 전혀 없습니다.

- -

마지막으로, 위의 코드 조각은 크로스 브라우저 코딩과 관련하여 항상 염두에 두어야만 하는 중요한 이슈를 시사합니다.테스트 중인 API를 해당 기능이 지원되지 않는 브라우저에서 실수로 사용하지 마십시오. 확실하고 단순한 이야기 같지만, 때때로 그렇지 않습니다. 예를 들어, 위의 코드 조각에서, lookbehind 기능을 short-regexp 표기법(예를 들어, /reg/igm)으로 사용한다면, 지원되지 않는 브라우저에서는 파싱 에러가 발생할 것입니다. 따라서, 위의 예제에서, /(?<=look_behind_stuff)/ 대신에 new RegExp("(?<=look_behind_stuff)")를 사용하는 것이 좋습니다. 심지어 lookbehind가 지원되는 조건분기의 코드에서도 말입니다.

-
-
점진적 향상
-
이 디자인 테크닉은 여러분의 사이트를 상향식 접근방법으로 "레이어" 형태 개발할 수 있게 해줍니다. 간단한 레이어로 시작하여, 각각이 더 많은 기능을 이용하는 연속적인 레이어를 가진 사이트로 성능을 개선할 수 있습니다.
-
부드러운 하향
-
이는 여러분이 원하는 모든 기능이 포함된 최선의 사이트를 만들고 나서 오래된 브라우저들도 지원하게 수정하는 하향식 접근입니다. 점진적 상향 방식보다는 조금 더 어렵기도 하고 덜 효과적이기도 하지만, 몇몇 케이스에서는 유용할 것입니다.
-
모바일 장치 감지
-
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 Navigator.maxTouchPoints to detect if the user's device has a touchscreen. Then, default back to checking the user agent screen only if (!("maxTouchPoints" in Navigator)) { /*Code here*/}. 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 window.innerWidth and window.addEventListener("resize", function(){ /*refresh screen size dependent things*/ }). 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.
-
- -

Which part of the user agent contains the information you are looking for

- -

As there is no uniformity of the different part of the user agent string, this is the tricky part.

- -

브라우저 이름

- -

사람들이 "브라우저 감시(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.

- -

Most browser set the name and version in the format BrowserName/VersionNumber, 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.

- -

Also pay attention not to use a simple regular expression on the BrowserName, user agents also contain strings outside the Keyword/Value syntax. Safari & Chrome contain the string 'like Gecko', for instance.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
반드시 포함반드시 포함하지 않음
FirefoxFirefox/xyzSeamonkey/xyz
SeamonkeySeamonkey/xyz
ChromeChrome/xyzChromium/xyz
ChromiumChromium/xyz
SafariSafari/xyzChrome/xyz or Chromium/xyzSafari gives two version number, one technical in the Safari/xyz token, one user-friendly in a Version/xyz token
Opera -

OPR/xyz [1]

- -

Opera/xyz [2]

- 		-

[1]  Opera 15+ (Blink-based engine) 

- -

[2] Opera 12- (Presto-based engine)

-
Internet Explorer; MSIE xyz;Internet Explorer doesn't put its name in the BrowserName/VersionNumber format
- -

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).

- -

브라우저 버전

- -

The browser version is often, but not always, put in the value part of the BrowserName/VersionNumber 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/VersionNumber token.

- -

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.

- -

렌더링 엔진

- -

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.

- -

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.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
반드시 포함
GeckoGecko/xyz
WebKitAppleWebKit/xyzPay attention, WebKit browsers add a 'like Gecko' string that may trigger false positive for Gecko if the detection is not careful.
PrestoOpera/xyzNote: Presto is no longer used in Opera browser builds >= version 15 (see 'Blink')
TridentTrident/xyzInternet Explorer put this token in the comment part of the User Agent String
BlinkChrome/xyz
- -

렌더링 엔진 버전

- -

Most rendering engine put the version number in the RenderingEngine/VersionNumber token, with the notable exception of Gecko. Gecko puts the Gecko version number in the comment part of the User Agent after the rv: string. From Gecko 14 for the mobile version and Gecko 17 for the desktop version, it also puts this value in the Gecko/version token (previous version put there the build date, then a fixed date called the GeckoTrail).

- -

운영체제

- -

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).

- -

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.

- -

모바일, 태블릿, 데스크톱

- -

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.

- -
    -
  • 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.
    • -
  • 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).
    • -
- -

The following table summarizes the way major browser vendors indicate that their browsers are running on a mobile device:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Common browsers User Agent strings
브라우저규칙예제
Mozilla (Gecko, Firefox)Mobile or Tablet token in the comment.Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0
WebKit-based (Android, Safari)Mobile Safari token outside the comment.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
Blink-based (Chromium, Google Chrome, Opera 15+)Mobile Safari token outside the commentMozilla/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
Presto-based (Opera 12-) -

Opera Mobi/xyz token in the comment (Opera 12-)

- 		-

Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/2.9.201 Version/11.50

-
Internet ExplorerIEMobile/xyz token in the comment.Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
- -

In summary, we recommend looking for the string “Mobi” anywhere in the User Agent to detect a mobile device.

- -
-

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).

-
diff --git a/files/ko/web/javascript/a_re-introduction_to_javascript/index.html b/files/ko/web/javascript/a_re-introduction_to_javascript/index.html new file mode 100644 index 0000000000..7206716138 --- /dev/null +++ b/files/ko/web/javascript/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 +--- +
{{jsSidebar}}
+ +

어째서 재입문일까요? 왜냐하면, JavaScript는 세계에서 가장 오해받고 있는 프로그래밍 언어로 악명이 높기 때문입니다. 종종 장난감같다고 조롱당하기도했지만, 이 거짓말같은 단순함 아래에는 몇 가지의 강력한 언어 기능이 숨어 있습니다. Javascript는 현재 엄청나게 많은, 요즘 가장 뜨고있는 애플리케이션들에 사용되고 있어서, 웹 또는 모바일 개발자 누구에게라도 이 기술에 대한 깊은 지식이 중요한 기량이 된다는 것을 보여주고 있습니다.

+ +

이 이야기를 이해하는데는 이 언어의 역사를 먼저 보는 것이 도움이 됩니다. JavaScript는 1995년 Netscape의 엔지니어 Brendan Eich에 의해 만들어졌고, 1996년 초에 Netscape 2와 함께 처음 릴리즈 되었습니다. 이것은 원래 LiveScript로 불리기로 되어 있었습니다만 Sun Microsystem의 Java 언어의 성공에 편승해보려고 -두 언어 사이의 공통점이 매우 적음에도 불구하고- 불행이 예견된 마케팅 결정에 따라 이름이 바뀌게 됩니다. 이 결정은 역사상 유래가 없는 혼란의 근원이 되어버립니다.

+ +

몇 달 후, Microsoft는 IE3와 함께 JScript를 발표했습니다. 이 JScript는 Javascript를 정말 닮았고 호환성이 좋았습니다. 몇 달 뒤에, Netscape는 1997년에 ECMAScript 표준의 첫번째 판이 되는 JavaScript를 유럽 표준화 단체인 Ecma International에 보냅니다. 이 표준은 1999년에 ECMAScript edition 3에 따라 큰 규모의 개정을 거친 후, 유례없이 아주 안정된 상태로 계속 유지되고 있습니다. 4번째 판은 중도 포기되었는데, 언어의 복잡성 증가에 관련한 정치적 문제 때문이었습니다. 이 4번째 판의 많은 파트들은 ECMAScript edition 5 (2009년 12월에 출간)와 6번째 개정판 규격(2015년에 출간)의 근간을 형성하고 있습니다. 

+ +
+

 이제부터는 ECMAScript를 우리에게 좀 더 친근한 말인  "JavaScript"라고 부르겠습니다.

+
+ +

대부분의 프로그래밍 언어와는 달리, JavaScript 언어는 입출력 개념이 없습니다. 이 언어는 호스트 환경 아래에서 스크립트 언어로서 동작하도록 디자인 되어있고, 따라서 외부 세계와 통신하기위해 호스트 환경이 제공하는 메커니즘에 의존합니다. 대부분의 경우 일반적인 호스트 환경은 브라우저이지만 JavaScript 인터프리터는 Adobe Acrobat, Photoshop, SVG images, Yahoo! 위젯 엔진 등의 제품에서도 발견할 수 있고, node.js 와 같은 서버 측 환경에서도 찾을 수 있습니다. 하지만 JavaScript가 사용되는 분야는 계속 더 넓혀지고 있습니다. NoSQL 데이터베이스, Apache CouchDB, 임베디드 컴퓨터, GNU/Linux OS의 가장 유명한 GUI 인 GNOME 과 같은 데스크톱 환경에서도 JavaScript가 사용됩니다.

+ +

개요

+ +

JavaScript는 유형 및 연산자, 표준 내장 객체 및 메소드가 있는 다중 패러다임, 동적 언어입니다. 구문은 Java 및 C 언어를 기반으로합니다. 이러한 언어의 많은 구조가 JavaScript에도 적용됩니다. JavaScript는 클래스 대신 객체 프로토 타입을 사용하여 객체 지향 프로그래밍을 지원합니다 (프로토 타입 상속 및 ES2015 {{jsxref("Classes")}}). JavaScript는 함수형 프로그래밍도 지원합니다. 함수는 객체이며, 함수는 실행 가능한 코드를 유지하고 다른 객체와 마찬가지로 전달 될 수 있습니다.

+ +

어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:

+ + + +

... 오, 그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 배열(Array) 객체. 그리고 자유롭게 사용할 수 있는 날짜(Date) 객체 와 정규식(RegExp) 객체가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다:

+ + + +

그리고 또 몇 가지 오류 타입이 내장되어 있습니다. 그렇지만 처음 구조도를 기억하고만 있으면 다른 것들도 아주 쉽게 이해할 수 있을 것입니다.

+ +

수 (Numbers)

+ +

설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 정수와 같은 것이 존재하지 않으므로 ({{jsxref("BigInt")}} 제외), 조금 조심해야 합니다. 이 예제를 보세요:

+ +
console.log(3 / 2);             // 1이 아닌, 1.5
+console.log(Math.floor(3 / 2)); // 1
+ +

명백한 정수는 사실 암묵적으로 실수입니다.

+ +

또한, 다음과 같은 것들을 주의하세요:

+ +
0.1 + 0.2 = 0.30000000000000004
+
+ +

실제로 정수 값은 32 비트 정수로 처리되며 일부 구현은 32 비트 정수가 아닌 숫자에 유효한 명령어를 수행 할 때까지 이러한 방식으로 저장합니다. 이는 비트 단위 작업에 중요 할 수 있습니다.

+ +

덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 산술 연산자가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 수학(Math)으로 불리는 내장 객체가 있습니다:

+ +
Math.sin(3.5);
+var circumference = 2 * Math.PI * r;
+ +

내장 parseInt() 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:

+ +
parseInt('123', 10); // 123
+parseInt('010', 10); // 10
+ +

구형 브라우저에서 "0"으로 시작하는 문자열은 8 진수 (기수 8)로 가정되지만, 2013 년 이후에는 그렇지 않습니다. 문자열 형식이 확실하지 않으면 이전 브라우저에서 놀라운 결과를 얻을 수 있습니다.

+ +
parseInt('010');  //  8
+parseInt('0x10'); // 16
+ +

이 같은 결과는 {{jsxref("Global_Objects/parseInt", "parseInt()")}} 함수가 0으로 시작되는 문자열을 8진수로, "0x"로 시작하는 문자열은 16진수로 취급하기 때문에 발생합니다. 16진수 표기법이 그대로 유지됩니다. 8진수는 제거되었습니다.

+ +

만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:

+ +
parseInt('11', 2); // 3
+
+ +

이와 비슷하게, 내장 함수 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}}를 사용하여 부동 소수점 숫자를 파싱 할 수 있습니다. {{jsxref("Global_Objects/parseInt", "parseInt()")}}과 달리 parseFloat()는 항상 10진수를 사용합니다.

+ +

단항 연산자 + 를 사용하여 값을 숫자로 변환 할 수도 있습니다:

+ +
+ '42';   // 42
++ '010';  // 10
++ '0x10'; // 16
+ +

문자열이 수가 아닌 경우 NaN ("Not a Number" (수가 아님)을 줄인 약자)로 불리는 특별한 값을 돌려줍니다:

+ +
parseInt('hello', 10); // NaN
+
+ +

NaN 는 독성을 가지고 있습니다: 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 NaN가 되기 때문입니다:

+ +
NaN + 5; // NaN
+
+ +

내장 isNaN() 함수를 사용해서 NaN 인지 여부를 검사할 수 있습니다:

+ +
isNaN(NaN); // true
+
+ +

JavaScript는 또 특별한 값 Infinity와 -Infinity를 가지고 있습니다:

+ +
 1 / 0; //  Infinity
+-1 / 0; // -Infinity
+ +

내장 함수 {{jsxref("Global_Objects/isFinite", "isFinite()")}}를 사용하여 Infinity, -Infinity 및 NaN 값을 테스트 할 수 있습니다.

+ +
isFinite(1 / 0);     // false
+isFinite(-Infinity); // false
+isFinite(NaN);       // false
+ +
+

{{jsxref("Global_Objects/parseInt", "parseInt()")}} 와 {{jsxref("Global_Objects/parseFloat", "parseFloat()")}} 함수는 숫자로 아닌 문자가 나올때까지 문자열을 파싱하고, 그 지점까지 파싱된 숫자를 반환합니다. 그런데 "+"연산자는 중간에 유효하지 않은 문자가 있으면 그대로 문자열을 NaN 으로 그냥 변환해버립니다. console에서 "10.2abc"를 파싱해보면 어떤점이 다른지 더 쉽게 이해할 수 있습니다.

+
+ +

문자열 (Strings)

+ +

JavaScript에서 문자열은 유니코드 문자들이 연결되어 만들어진 것입니다. 이는 국제화(i18n, internationalization) 하려하는 누구에게라도 환영받을만한 소식입니다. 좀 더 정확히 말하자면, 각각이 16비트 숫자로 표현된 UTF-16 코드 유닛이 길게 이어져있는 것입니다. 각 유니코드 문자는 1개나 2개의 코드 유닛으로 표현됩니다.

+ +

한 개의 문자를 나타내려면 길이가 1인 문자열을 사용하면 됩니다.

+ +

문자열의 길이를 알고싶다면, 해당 문자열의 length 속성(해당 객체가 소유하고 있는 성질을 나타내는 값)에 접근하면 됩니다:

+ +
'hello'.length; // 5
+
+ +

우리의 첫 JavaScript 객체입니다! 문자열도 역시 객체로 취급된다고 언급했던적이 있죠? 다음과 같이 메소드까지 있는 확실한 녀석입니다:

+ +
'hello'.charAt(0); // "h"
+'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
+'hello'.toUpperCase(); // "HELLO"
+ +

이외의 타입들

+ +

JavaScript는 의도적으로 값이 없음을 가리키는 '객체' 타입의 객체인 null과 초기화되지 않은 값 — 아직 어떤 값도 주어지않은(할당되지않은) 변수임을 가리키는 '정의되지 않음' 타입의 객체인 undefined로 구분됩니다. 값에 대해서 나중에 언급할 것이지만 JavaScript에서 변수에 값을 주지않고 선언하는 것이 가능합니다. 이럴 경우, 변수의 타입은 undefined이 되는 것입니다.

+ +

JavaScript는 true 와 false 값 (둘은 모두 키워드로 예약되어있는 값)을 가질 수 있는 부울 타입을 가지고 있습니다. 다음과 같은 규칙에 따라 어떤 임의의 값을 부울값으로 변환할 수 있습니다:

+ +
    +
  1. false, 0, 빈 문자열 (""), 수가 아님을 뜻하는 NaN, null, 와 undefined은 모두 false가 됩니다.
    2. +
  2. 다른 모든 값은 true가 됩니다.
    3. +
+ +

이 변환은 Boolean() 함수를 써서 명시적으로 이 작업을 수행하실 수 있습니다:

+ +
Boolean('');  // false
+Boolean(234); // true
+ +

하지만 반드시 이렇게 할 필요는 거의 없습니다. JavaScript는 이러한 변환 작업을 if 문 (아래를 보세요)과 같이 부울값이 필요한 경우를 만나게되면 자동으로 사용자가 모르는 사이에 처리해버리기 때문입니다. 이러한 이유로 인해 우리는 가끔 부울 타입으로 변환되었을 때, true와 false이 됨을 의미하는 값들을 각각 "참 값"과 "거짓 값"으로 부를 것입니다. 또는 각각 "참으로 취급되다"와 "거짓으로 취급되다"라는 식으로 불릴 수도 있습니다.

+ +

부울 연산자는 && (논리적와, 그리고 ), || (논리적또는 ), 그리고 ! (논리적부정 )이 지원됩니다. 아래에서 다시 언급하겠습니다.

+ +

변수 (Variables)

+ +

JavaScript에서 새로운 변수는 let, const, var 키워드로 선언됩니다.

+ +

let을 사용하면 블록 유효 범위 변수를 선언 할 수 있습니다. 선언 된 변수는 변수가 포함 된 함수 블록에서 사용할 수 있습니다.

+ +
let a;
+let name = 'Simon';
+ +

아래는 let으로 선언한 변수가 가지는 유효 범위의 예제입니다. 

+ +
// myLetVariable는 여기에서 보이지 *않습니다*
+
+for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
+  // myLetVariable는 여기에서 유효합니다
+}
+
+// myLetVariable는 여기에서 보이지 *않습니다*
+ +

const는 값이 변경되지 않는 변수를 선언 할 수 있게 합니다. 변수는 변수가 선언 된 함수 블록에서 사용할 수 있습니다.

+ +
const Pi = 3.14; // 변수 Pi 설정
+Pi = 1; // 상수로 설정된 변수는 변경 할 수 없기 때문에 애러 발생.
+ +

var은 가장 일반적인 변수 선언 키워드입니다. let, const 키워드가 가지는 제한을 var은 갖지 않습니다. 이는 자바스크립트에서 변수를 선언하는 전통적인 유일한 방법이었기 때문입니다. var 키워드로 선언 된 변수는 변수가 선언 된 함수 블록에서 사용 할 수 있습니다.

+ +
var a;
+var name = 'Simon';
+ +

var로 선언한 변수의 유효 범위 예제입니다.

+ +
// myVarVariable는 여기에서 사용 할 수 *있습니다*
+
+for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
+  // myVarVariable는 함수 전체에서 사용 할 수 있습니다.
+}
+
+// myVarVariable는 여기에서 사용 할 수 *있습니다*
+ +

변수에 값을 지정하지 않고 변수를 선언하면, 타입은 undefined로 지정 됩니다.

+ +

자바스크립트와 자바 같은 다른 언어 사이의 중요한 차이점은 자바스크립트는 블록에 범위가 없다는 것입니다. 함수에만 범위가 있습니다. 변수가 복합 문에서 (예를 들어 if 제어 구조 내에서) var를 사용하여 정의 된 경우 전체 함수에서 볼 수 있습니다. 그러나 ECMAScript 2015부터 let 및 const 선언을 사용하면 블록 범위 변수를 만들 수 있습니다.

+ +

연산자 (Operators)

+ +

JavaScript의 산술 연산자로는 +, -, *, /, %(나머지 연산자)가 있습니다. 값은 = 연산자로 할당할 수 있고, += 와 -=처럼 다른 연산자를 같이사용해서 할당할 수 있습니다. 이렇게 쓰인 연산자는 x = x연산자 y와 같은 결과를 나타냅니다.

+ +
x += 5;
+x = x + 5;
+
+ +

++ 와 -- 를 각각 점진적인 증가와 감소에 사용할 수 있습니다. 이들은 또한 전처리 또는 후처리 연산자로 사용될 수 있습니다.

+ +

+ 연산자는 문자열 이어붙이기도 합니다:

+ +
'hello' + ' world'; // "hello world"
+
+ +

문자열에 어떤 수 (또는 다른 값)를 더하면 일단 모두 문자열로 바뀌게 됩니다. 다음 예를 보시면 무슨 말씀인지 아실 수 있을겁니다:

+ +
'3' + 4 + 5;  // "345"
+ 3 + 4 + '5'; // "75"
+ +

빈 문자열에 어떤 값을 더하는 것은 해당 값을 문자열로 바꾸는 요령입니다.

+ +

JavaScript에서 비교는 <, >, <= 와 >= 를 통해 가능합니다. 이 연산자들은 문자열과 수 양쪽 모두에서 동작합니다. 상동은 약간 직관성이 떨어지는데 이중 등호 (==) 연산자는 서로 다른 타입을 줄 경우 타입 강제 변환을 수행하기 때문에 다음과 같이 때때로 기대하지 않은 결과를 내보내기 때문입니다:

+ +
123 == '123'; // true
+1 == true;    // true
+
+ +

타입 강제 변환을 하지 않게 하려면, 삼중 등호 연산자 (===)를 사용해야합니다:

+ +
123 === '123'; // false
+1 === true;    // false
+
+ +

이와 비슷하게 != 와 !== 연산자가 있습니다.

+ +

JavaScript는 값을 비트로 취급하는 연산자도 가지고 있습니다. 사용하고 싶을 때 언제라도 사용할 수 있도록 말이죠.

+ +

제어 구조

+ +

JavaScript는 C 계열의 다른 언어들과 비슷한 제어 구조를 가지고 있습니다. 조건문은 if 와 else를 지원하는데, 원하시는대로 얼마든지 중첩 시켜서 사용할 수 있습니다:

+ +
var name = 'kittens';
+if (name == 'puppies') {
+  name += ' woof';
+} else if (name == 'kittens') {
+  name += ' meow';
+} else {
+  name += '!';
+}
+name == 'kittens meow';
+
+ +

JavaScript는 while 반복문과 do-while 반복문도 사용할 수 있습니다. 첫번째 것은 단순 반복에 유용하게 사용할 수 있고, 두번째 것은 반복문이 반드시 적어도 한번이상 실행 되도록 하고 싶을 때 사용할 수 있습니다:

+ +
while (true) {
+  // 무한루프!
+}
+
+var input;
+do {
+  input = get_input();
+} while (inputIsNotValid(input));
+
+ +

JavaScript의 for 반복문은 C 와 Java의 반복문과 같습니다. 말하자면, 반복문에 필요한 제어 정보를 한 줄에 표현할 수 있다는 이야기지요.

+ +
for (var i = 0; i < 5; i++) {
+  // 내부 동작을 5번 반복합니다
+}
+
+ +

JavaScript에는 두개의 중요한 for 반복문 또한 포함됩니다. 첫번째로 for...of 입니다.

+ +
for (let value of array) {
+  // value로 작업을 실행합니다
+}
+
+ +

그리고 for ... in 입니다.

+ +
for (let property in object) {
+  // object의 항목(property)으로 작업을 실행합니다
+}
+
+ +

&& 와 || 연산자는 첫번째 식을 평가한 결과에 따라서 두번째 식을 평가를 실행하는 단축평가(short-circuit) 논리를 사용합니다. 이는 다음과 같이 객체에 접근하기 전에 null 객체인지, 아닌지를 검사하는데 유용하게 사용될 수 있습니다:

+ +
var name = o && o.getName();
+
+ +

또는 (틀린값이 유효하지 않은 값일때) 캐싱 값에 대해서도 사용합니다.:

+ +
var name = cachedName || (cachedName = getName());
+
+ +

JavaScript는 한줄로 조건문을 쓸 수 있게 해주는 삼중 연산자도 가지고 있습니다:

+ +
var allowed = (age > 18) ? "yes" : "no";
+
+ +

switch 문은 숫자나 문자열을 기반으로 다중 분기되는 문장을 작성하는데 사용될 수 있습니다:

+ +
switch(action) {
+    case 'draw':
+        drawIt();
+        break;
+    case 'eat':
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+
+ +

break 문장을 추가하지 않았다면, 다음 단계로 "넘어가서" 실행합니다. 이렇게 되는 것을 기대하는 것은 매우 드문경우 입니다. 실은 디버깅하는데 용이하도록 하기위해 주석으로서 일부러 붙여놓은 넘어가기 이름표 입니다:

+ +
switch(a) {
+    case 1: // fallthrough
+    case 2:
+        eatIt();
+        break;
+    default:
+        doNothing();
+}
+
+ +

default 구문의 적용은 선택사항입니다. switch와 case 부분에서 둘다 표현식을 사용할 수도 있습니다. switch부분과 case 부분의 표현식은  === 연산자로 비교됩니다.

+ +
switch(1 + 3){
+    case 2 + 2:
+        yay();
+        break;
+    default:
+        neverhappens();
+}
+
+ +

객체 (Objects)

+ +

JavaScript 객체는 간단히 이름-값 쌍(name-value pairs)의 모임입니다. 그렇기 때문에, JavaScript의 객체의 모임은 다음과 비슷하다고 할 수 있습니다:

+ +
    +
  • Python의 Dictionaries
    • +
  • Perl 과 Ruby의 Hashes
    • +
  • C 와 C++ 의 Hash tables
    • +
  • Java 의 HashMaps
    • +
  • PHP의 Associative arrays
    • +
+ +

이 데이터 구조가 매우 광범위하게 사용된다는 사실은 활용 방도가 다양함을 입증합니다. JavaScript내 모든 것 (코어 타입들은 제외)은 객체로 취급되기 때문에 어떤 JavaScript 프로그램도 기본적으로 해쉬 테이블을 검색하는데 필요한 출중한 성능을 가지고 있습니다. 매우 빠르기 때문에 장점이 됩니다!

+ +

값은 객체를 포함하여 아무 JavaScript 값이 될 수 있는 반면, "이름" 부분은 JavaScript 문자열 입니다. 이는 무작위적인 복잡성을 가지는 데이터 구조를 만들 수 있도록 해줍니다.

+ +

빈 객체를 생성하는데 두가지 방법이 있습니다:

+ +
var obj = new Object();
+
+ +

와:

+ +
var obj = {};
+
+ +

이들은 의미적으로 동치입니다. 두번째 방법은 객체 리터럴 구문이라고 부르며 더 편리합니다. 객체 리터럴 구문은 JSON 구문의 핵심이며 이 방법을 사용한 코드를 더 많이 볼 수 있습니다.

+ +

객체 리터럴 구문으로 객체의 전체적인 구조를 초기화 할 수 있습니다:

+ +
var obj = {
+    name: "Carrot",
+    "for": "Max",
+    details: {
+        color: "orange",
+        size: 12
+    }
+}
+
+ +

속성에 연속적으로 접근할 수 있습니다:

+ +
obj.details.color; // orange
+obj["details"]["size"]; // 12
+
+ +

아래 예제는 객체 프로토타입(Person)과 프로토타입의 인스턴스(you)를 생성합니다.

+ +
function Person(name, age) {
+  this.name = name;
+  this.age = age;
+}
+
+// 객체를 정의한다
+var you = new Person('You', 24);
+// "You"라는 이름의 24세인 새로운 사람을 생성중이다.
+
+ +

일단 생성되면, 객체의 속성에 다음의 두가지 방법들 중 한가지로 접근할 수 있습니다:

+ +
// dot 표기법
+obj.name = "Simon"
+var name = obj.name;
+
+ +

그리고...

+ +
// bracket 표기법
+obj["name"] = "Simon";
+var name = obj["name"];
+// key를 정의하기 위해 변수도 쓸수 있습니다.
+var user = prompt('what is your key?')
+obj[user] = prompt('what is its value?')
+
+ +

이들은 의미적으로 역시 같습니다. 두번째 방법은 속성의 이름이 실행시간(run-time)에 계산될 수 있는 문자열로 주어집니다. 하지만 이방법을 사용하면 일부 JavaScript엔진과 압축기 최적화(minifier optimizations)를 적용할수 없습니다.또한 예약된 단어(키워드)로 되어있는 이름으로 객체의 속성을 설정하거나 얻어낼 수 있습니다:

+ +
obj.for = "Simon"; // 구문 오류, for 가 예약된 단어(키워드)이기 때문에
+obj["for"] = "Simon"; // 정상 동작
+
+ +
+

ECMAScript 5 이래로, 예약어는  객체 항목의 이름으로 "덧붙임없이" 사용할수도 있습니다. 이말은 객체 리터럴을 정의할때 따옴표로 "둘러쌀" 필요가 없다는 의미입니다.  ES5 Spec을 참고해 보십시오.

+
+ +

객체나 프로토타입에 대한 좀더 상세한 내용은 Object.prototype 을 참조하십시오. 객체 프로토타입과 객체 프로토타입 체인에 대한 설명은 상속과 프로토타입 체인 을 참조하십시오.

+ +
+

ECMAScript 2015 이래로, 객체의 key는 생성시의 대괄호 표기법(bracket notation)으로 정의될수 있습니다. 그냥 var userPhone = {}; userPhone[phoneType] = 12345. 처럼 표기하는 방법 대신 {[phoneType]: 12345} 와 같은 사용법도 가능합니다.

+
+ +

배열 (Arrays)

+ +

JavaScript에서 배열은 실제로는 특별한 타입의 객체입니다. (숫자로 나타낸 속성은 자연스럽게 [] 구문만을 사용해서 접근하게 되므로) 일반 객체와 많이 비슷하게 동작하지만, 이 객체는 'length'라는 한가지 마법적인 속성을 가집니다. 이는 항상 배열에서 가장 큰 인덱스보다 하나 더 큰 값으로 존재합니다.

+ +

배열을 생성하는 예전 방법은 다음과 같습니다:

+ +
var a = new Array();
+a[0] = "dog";
+a[1] = "cat";
+a[2] = "hen";
+a.length // 3
+
+ +

한가지 더 편리한 배열 표현 방법은 배열 리터럴을 사용하는 것입니다:

+ +
> var a = ["dog", "cat", "hen"];
+> a.length
+3
+
+ +

배열 리터럴 끝에 콤마(",")를 꼬리로 남겨두는 것은 브라우저마다 다르게 처리하므로 그렇게 하지는 마시기 바랍니다.

+ +

array.length 는 배열에 들어있는 항목의 수를 반드시 반영하지는 않는다는 점을 주의하시기 바랍니다. 다음과 같은 경우를 고려해보겠습니다:

+ +
> var a = ["dog", "cat", "hen"];
+> a[100] = "fox";
+> a.length
+101
+
+ +

기억해두세요 - 배열의 length 속성은 최대 인덱스에 하나를 더한 값일 뿐입니다.

+ +

존재하지 않는 배열 인덱스를 참조하려고하면 다음과 같이 undefined 을 얻게됩니다:

+ +
> typeof(a[90])
+undefined
+
+ +

[] 와 length에 관한 위의 사항들을 감안하면 배열을 for 반복문으로 처리할 때 다음과 같은 방법으로 처리하실 수 있을 것입니다:

+ +
for (var i = 0; i < a.length; i++) {
+    // a[i] 로 뭔가를 수행
+}
+
+ +

ES2015는 배열과 같은 이터러블 객체를 위해 좀더 간결한 for...of 루프를 소개했습니다.

+ +
for (const currentValue of a) {
+    // currentValue 로 뭔가를 수행
+}
+ +

또한 for...in 루프를 이용하여 배열에 루프를 돌릴수도 있지만, 이 방법은 배열 요소를 반복하는게 아니라 배열 인덱스를 반복합니다. 뿐만 아니라, 누군가 Array.prototype에 새로운 속성을 추가하면, 그 속성들 또한 이런 루프로 반복됩니다. 따라서 이런 반복 형태는 배열에는 추천되지 않습니다.

+ +

배열에 대한 또다른 반복방법은 ECMAScript 5에 추가된 forEach() 입니다:

+ +
['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
+    // currentValue나 array[index]로 뭔가를 수행
+}
+
+ +

배열에 항목 하나를 추가하길 원한다면 이렇게 하면 됩니다:

+ +
a.push(item);
+ +

배열은 몇가지 메서드가 제공됩니다. 배열 메서드에 대한 전체 문서를 참조하십시오.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
메서드 이름설명
a.toString()각 항목에 대한 toString()의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.
a.toLocaleString()각 항목에 대한 toLocaleString()의 출력이 콤마로 구분된 한개의 문자열을 반환합니다.
a.concat(item1[, item2[, ...[, itemN]]])item들이 덧붙여진 한개의 배열을 반환합니다.
a.join(sep)배열의 값들을 sep 인자로 구분하여 합친 한개의 문자열로 변환합니다.
a.pop()배열의 마지막 항목을 반환하면서 제거합니다.
a.push(item1, ..., itemN)배열의 끝에 item들을 덧붙입니다.
a.shift()배열의 첫번째 항목을 반환하면서 제거합니다.
a.unshift(item1[, item2[, ...[, itemN]]])배열의 앞쪽에 item들을 덧붙입니다.
a.slice(start[, end])배열의 일부분을 새배열로 반환합니다.
a.sort([cmpfn])옵션으로 비교용도의 함수를 입력받습니다.
a.splice(start, delcount[, item1[, ...[, itemN]]])배열의 일부분을 제거하고 다른 항목으로 대체하여 배열을 변경합니다..
a.reverse()배열의 순서를 거꾸로 배열합니다.
+ +

함수 (Functions)

+ +

객체와 마찬가지로, 함수는 JavaScript를 이해하는데 핵심이 되는 컴포넌트입니다. 가장 기본적인 함수의 예는 다음과 같습니다:

+ +
function add(x, y) {
+    var total = x + y;
+    return total;
+}
+
+ +

이 예는 기본 함수에 대해 알아야 할 모든 것을 보여주고 있습니다. JavaScript 함수는 0 이상의 이름이 있는 매개변수를 가질 수 있습니다. 함수의 본체는 갯수 제한없이 구문을 포함할 수 있고 해당 함수에 지역적으로 변수를 보유하도록 선언할 수 있습니다. return 문은 언제나 값을 돌려주고 함수의 실행을 끝내는데 사용될 수 있습니다. 리턴 문이 없으면 (혹은 값이 없는 리턴이 사용되면), JavaScript는 undefined을 돌려줍니다.

+ +

이름 붙여진 매개변수들은 다른 어떤 것보다도 해당 함수가 어떤 함수인지 설명해주는 좋은 역할을 할 수 있습니다. 해당 함수가 원하는 매개변수를 주지않고 함수를 호출할 수 있지만 그럴 경우 해당 변수들은 undefined로 설정됩니다.

+ +
add(); //NaN
+// undefined에 대해 덧셈을 수행할 수 없습니다
+
+ +

함수가 기대하는 원래의 매개변수보다 많은 매개변수를 넘겨줄 수도 있습니다:

+ +
add(2, 3, 4); // 5
+// 처음의 두 수가 더해집니다. 4는 무시됨
+
+ +

이 예는 조금 어리석어 보이지만, 함수는 추가적으로 주어진 매개변수를 함수 내부에서 접근할수 있습니다. 이 객체는 arguments라고 하며, 해당 함수에  매개변수로 넘겨진 모든 값을 가지고 있는 배열과 비슷한 객체입니다. 우리가 원하는만큼 값을 취하는 add 함수를 다시 써보겠습니다:

+ +
function add() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum;
+}
+
+add(2, 3, 4, 5); // 14
+
+ +

확실히 2 + 3 + 4 + 5를 직접쓰는 것보다 유용한 함수는아닙니다. 평균계산 함수를 만들어 보겠습니다:

+ +
function avg() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+
+ +

이건 매우 유용합니다만, 좀 번잡해보입니다. 코드 크기를 다소 줄이기 위해, arguments 배열의 사용을 Rest 파라미터 문법으로 대체해볼 필요가 있습니다. 이 방법으로, 코드 크기는 최소한으로 유지 하면서, 갯수 제한없이 함수로 인자를 전달할수 있습니다. Rest 파라미터 연산자는 다음과 같은 포맷(...variable)으로 함수 파라미터 목록에 사용됩니다. 이 varaible 인자는 함수가 호출될때 전달되는 모든 인자를 포함합니다. variable 인자에서 반환되는 값을 사용하기 위해 위 코드에서 for 루프를 for..of 루프로 변경합니다.

+ +
function avg(...args) {
+    var sum = 0;
+    for (let value of args) {
+        sum += value;
+    }
+    return sum / arr.length;
+}
+
+avg(2, 3, 4, 5); // 3.5
+
+ +
+

위 코드에서,변수 args 는 함수로 전달된  모든 값을 가지고 있습니다.
+
+ rest 파라미터 연산자가 함수 선언의 어느곳에 위치하든 선언 위치 이후에 모든 인자를 저장하는것이며, 이전이 아니라는 것이 중요합니다. 즉 , function avg(firstValue, ...args) 에서 함수로 전달된 첫번째 값은 firstValue 변수에 저장되며, 남은 변수들은 args에 저장됩니다.

+
+ +

이건 또다른 유용한 언어 특성입니다만 우리를 새로운 문제점으로 인도합니다. avg() 함수는 콤마로 구분된 인자목록을 받지만, 배열의 평균을 알고싶은 경우라면요? 함수를 다음과 같이 재작성 하면 됩니다 :

+ +
function avgArray(arr) {
+  var sum = 0;
+  for (var i = 0, j = arr.length; i < j; i++) {
+    sum += arr[i];
+  }
+  return sum / arr.length;
+}
+
+avgArray([2, 3, 4, 5]); // 3.5
+ +

하지만 우리가 이미 만든 함수를 다시 사용할 수 있다면 좋을 것입니다. 운이 좋게도 JavaScript는 함수 객체라면 모두 가지게 되는 apply() 메소드를 사용해서 임의의 매개변수 배열을 함수에 넘겨줄 수 있습니다.

+ +
> avg.apply(null, [2, 3, 4, 5])
+3.5
+
+ +

apply()의 두번째 매개변수는 '매개변수들'로 사용하고자 하는 배열입니다. 첫번째 매개변수는 나중에 설명하도록 하겠습니다. 이는 함수가 역시 객체임을 명확히 해주는 사실입니다.

+ +
+

함수 호출시 전개 연산자(spread operator) 를 이용하여 똑같은 결과를 얻을수 있습니다.

+ +

예를 들면: avg(...numbers)

+
+ +

JavaScript는 익명의 함수를 만들 수 있도록 허용하고 있습니다.

+ +
var avg = function() {
+    var sum = 0;
+    for (var i = 0, j = arguments.length; i < j; i++) {
+        sum += arguments[i];
+    }
+    return sum / arguments.length;
+}
+
+ +

이것은 의미적으로 function avg() 형식과 같습니다. 이 특징은 매우 강력한데, 일반적인 표현식(expression)을 사용할 수있는 어디에서나 완전한 함수 정의를 넣을 수 있도록 허용하는 것이기 때문입니다. 이 특징은 다양한 요령을 부릴 수 있게합니다. 다음 예는 C에서 블록 유효 범위를 적용 시킨 것 처럼 지역 변수를 "숨기는" 요령을 보여줍니다:

+ +
var a = 1;
+var b = 2;
+
+(function() {
+    var b = 3;
+    a += b;
+})();
+
+a; // 4
+b; // 2
+
+ +

JavaScript는 재귀적으로 함수를 부를 수 있습니다. 이는 브라우저 DOM 등에서 볼수 있는 트리 구조를 다루는데 유용합니다.

+ +
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;
+}
+
+ +

다음의 예는 익명 함수를 사용함에 있어 잠재적인 문제점을 보여줍니다: 이름이 없으면 어떻게 재귀적으로 부를 수 있을까요? JavaScript는 함수 표현식을 이렇게 이름붙이도록 지원합니다. 이름붙은 IIFEs (Immediately Invoked Function Expressions: 즉시 실행 함수 표현) 를 다음과 같이 사용할 수 있습니다:

+ +
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);
+
+ +

위와 같이 함수 표현식에 제공된 이름은 함수 자체 범위에서만 유효합니다. 이 특징은 엔진에 의한 최적화뿐만 아니라 코드 가독성을 높이는데 도움을 줍니다. 이 이름은 디버거와 스택 추적에서도 나타나므로 디버깅시간을 줄일수 있게합니다.

+ +

JavaScript 함수는 - JavsScript 내의 다른 모든 것들과 마찬가지로 -  그 자체가 객체이며, 객체 섹션에서 이미 확인한 것처럼, 속성을 추가하거나 변경할수 있다는 점을 명심하십시오

+ +

사용자 정의 객체

+ +
+

JavaScript에서 객체 지향 프로그래밍에 대한 더 자세한 논의는 객체 지향 JavaScript 소개를 참조하십시오.

+
+ +

고전 객체지향 프로그래밍에서 객체는 데이터와 해당 데이터들을 다루는 메소드의 집합이었습니다. JavaScript는 프로토타입 기반 언어로, C++ 이나 Java에서 발견할 수 있는 class 구문이 없습니다(이런 이유로 class 구문에 익숙한 프로그래머들이 때때로 혼란을 경험합니다). 그 대신, JavaScrip는 function을 class로 사용합니다. 이름과 성을 필드로 가지고 있는 'person' 객체를 고려해보도록 합시다. 이름을 표시하는 두가지 방법이 있을 수 있습니다. 예를 들어, "이름 성" 또는 "성, 이름" 이런 식으로 말이죠. 이전에 다룬 함수와 객체를 사용해서 이를 표현하면 다음과 같습니다:

+ +
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"
+
+ +

이렇게 하면 작동하긴 하지만, 보기 안좋습니다. 이런 방법이라면 전역 이름공간(global namespace)에 관련 함수가 너무 많아집니다. 정말 우리에게 필요한 것은 객체에 함수를 붙여놓는 것입니다. 함수는 객체이기 때문에 이건 별로 어렵지 않습니다.

+ +
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"
+
+ +

this 키워드에 주목해 주십시오. 함수 안쪽에서 사용되면서, this는 현재 객체를 참조합니다. 그것이 실제로 의미하는 바는 당신이 부른 바로 그 함수를 지정하는 것입니다. 객체에서 dot 표기법이나 bracket 표기법을 사용해서 부른 경우, 해당 객체는 this가 됩니다. 해당 호출에서 dot 표기법을 사용하지 않은 경우, this는 전역 객체를 참조하게 됩니다.

+ +

this가 실수의 잦은 원인이 된다는 것을 명심하십시오 . 예를 들면:

+ +
var s = makePerson('Simon', 'Willison');
+var fullName = s.fullName;
+fullName(); // undefined undefined
+
+ +

s.fullName()을 이용하지 않고 fullName()을 단독으로 호출하면, 'this'는 전역 객체로 묶이게(bind) 됩니다. first 또는 last 로 명명된 전역 변수가 없기 때문에, 각각에 대해 undefined 결과를 얻게됩니다.

+ +

makePerson 함수를 개선하는데 'this' 키워드의 이점을 취할 수 있습니다:

+ +
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');
+
+ +

여기서 new라는 또다른 키워드를 도입했습니다. new는 this와 깊게 연관되어 있습니다. 새로운 빈 객체를 만든 다음 지정된 함수를 불러 새로운 객체를 this 에 설정합니다. this로 지정된 함수는 값을 반환하지 않고 단지 this 객체를 수정한다는 것을 명심하세요. this 객체를 호출하는 곳으로 반환하는 것은  new 입니다. 'new' 에 의해 호출되도록 설계된 함수는 컨스트럭터 함수라고 불립니다. 일반적으로 이러한 함수의 첫자를 대문자로 써서 new로 불릴 컨스트럭터 함수임을 나타냅니다.

+ +

개선된 함수는 여전히 fullName() 을 단독으로 호출할 때의 함정이 존재합니다.

+ +

우리의 person 객체가 점점 개선되고 있지만, 아직 좀 보기 안좋은 면이 있습니다. 매번 person 계열의 객체를 만들 때마다 내부에서 2개의 새로운 함수 객체를 만들고 있습니다. 이 코드가 객체간에 공유된다면 더 낫지 않을까요?

+ +
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;
+}
+
+ +

더 좋아 보이네요: 메소드 함수를 한번만 만들고, 컨스트럭터 내에 해당 메소드들을 참조하도록 할당합니다. 이보다 더 개선 할 수 있을까요? 네, 그렇게 할 수 있습니다:

+ +
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;
+};
+
+ +

Person.prototype은 모든 Person 인스턴스들간에 공유되는 객체입니다. 이는 lookup(찾아보기) 체인의 한 부분을 이룹니다. (이건 "prototype chain"이라는 특수한 이름을 따로 가지고 있습니다) 다시 말해, Person 객체의 설정되지 않은 속성에 접근을 시도할 때마다, 그것의 대체용도로 JavaScript는 Person.prototype에 그 속성이 존재하는지 살펴봅니다.그 결과,  Person.prototype에 할당된 모든 것은 this 객체를 통해 해당 컨스트럭터에 속한 모든 인스턴스들간에 사용 가능하게 됩니다.

+ +

이것은 정말 강력한 도구입니다. JavaScript에서는 임의의 prototype을 프로그램 내에서 언제든 변형할 수 있습니다. 이미 존재하는 객체에 추가적인 메소드를 실시간으로 추가가할 수 있다는 이야기입니다:

+ +
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"
+
+ +

흥미롭게도, JavaScript의 빌트인 객체의 prototype에도 뭔가를 더 추가할 수 있습니다. String 객체에 문자열 순서를 거꾸로 배열하여 돌려주는 메소드를 추가해 봅시다.

+ +
var s = "Simon";
+s.reversed(); // TypeError on line 1: s.reversed is not a function
+
+String.prototype.reversed = function() {
+    var r = "";
+    for (var i = this.length - 1; i >= 0; i--) {
+        r += this[i];
+    }
+    return r;
+};
+
+s.reversed(); // nomiS
+
+ +

우리가 추가한 새로운 메소드는 심지어 문자열 상수에서도 동작합니다!

+ +
"This can now be reversed".reversed(); // desrever eb won nac sihT
+
+ +

기존에 언급한 바와같이, prototype은 체인의 한 부분을 이룹니다. 해당 체인의 루트는 Object.prototype 이며 toString() 메소드를 포함합니다. 이 메소드는 객체를 문자열로 나타내려할 때 호출됩니다. 이 메소드는 우리의 Person 객체의 디버깅에 유용합니다:

+ +
var s = new Person("Simon", "Willison");
+s.toString(); // [object Object]
+
+Person.prototype.toString = function() {
+  return '<Person: ' + this.fullName() + '>';
+}
+
+s.toString(); // "<Person: Simon Willison>"
+
+ +

avg.apply()의 첫번째 매개변수가 null 이었던걸 기억해봅시다. apply()에 적용되는 첫번째 인자는 당연히 `this'로 간주되는 객체입니다. 여기에 new 의 간단한 구현을 보시죠:

+ +
function trivialNew(constructor, ...args) {
+    var o = {}; // 빈 객체를 생성
+    constructor.apply(o, args);
+    return o;
+}
+
+ +

이것은 prototype 체인을 설정하지 않으므로 new의 완벽한 대체물이 될 수 없습니다.(이 부분은 설명하기 어렵습니다). 이 내용은 자주 사용하지는 않겠지만 알아두면 좋습니다. 이 부분에서 ...args (생략 부호를 포함해서)는 "rest arguments" 라고 불립니다. 이름이 암시하는 것처럼 매개변수의 나머지를 포함합니다.

+ +

그러므로 이렇게 호출하는 것은

+ +
var bill = trivialNew(Person, 'William', 'Orange');
+ +

아래와 거의 동일합니다.

+ +
var bill = new Person('William', 'Orange');
+ +

apply() 와 비슷하게 this를 다시 설정할 수 있게 하는, call이라는 이름의 자매 함수가 있는데, 인자로 단일 배열이 아니라 확장된 인자 목록을 입력받습니다.

+ +
function lastNameCaps() {
+  return this.last.toUpperCase();
+}
+var s = new Person('Simon', 'Willison');
+lastNameCaps.call(s);
+// 위의 구문은 다음과 같습니다:
+s.lastNameCaps = lastNameCaps;
+s.lastNameCaps();
+
+ +

내장 함수 (Inner functions)

+ +

다른 함수의 내부에서 JavaScript 함수를 선언할 수 있습니다. 우리는 makePerson() 함수 초기 버전에서 이것을 한번 본적이 있습니다. JavaScript에서 중첩 함수(nested functions)의 중요한 세부사항은 부모 함수 범위의 변수에 접근할 수 있다는 사실입니다:

+ +
function parentFunc() {
+    var a = 1;
+
+    function nestedFunc() {
+        var b = 4; // parentFunc은 사용할 수 없는 변수
+        return a + b;
+    }
+    return nestedFunc();  // 5
+}
+
+ +

좀 더 유지관리가 쉬운 코드를 작성하고자 할때 이 특성이 굉장히 유용합니다. 한개 혹은 두개의 정도의 함수에서만 호출되며 전체 코드중 다른 부분에서는 사용처가 없는 함수라면 그 함수내에 해당 함수를 중첩시키는 것이 좋습니다. 이렇게 전역 범위 함수의 갯수를 늘리지 않도록 하는 것은 언제나 좋은 습관입니다.

+ +

이것은 또한 전역 변수에 대한 유혹을 뿌리칠 수 있는 좋은 대안이 됩니다. 복잡한 코드를 쓸 때, 다양한 함수들간에 값을 공유할 수 있도록 전역 변수를 사용하고 싶어집니다 - 전역 변수는 코드 유지 보수를 어렵게 만듭니다. 중첩 함수는 그 부모 함수의 범위에서 변수를 공유할 수 있으므로, 이 방법을 사용하면 전역 변수 이름공간을 건드리지 않고도 적절한 경우에 함수들을 연동시킬수 있습니다. - '지역 전역'이라고 불러도 괜찮겠네요. 이 기술을 사용할 때는 주의를 요하겠지만, 반드시 알아둬야할 유용한 기술입니다.

+ +

클로져 (Closures)

+ +

클로져 (역자주: 글자 그대로 한국어로 해석하면 닫힌 주머니)는 JavaScript가 제공해야만 하는 가장 막강한 추상 개념으로 우리를 이끕니다 - 하지만 동시에 잠재적으로 가장 혼란스럽기도 합니다. 다음 함수는 무엇을 하는 걸까요?

+ +
function makeAdder(a) {
+  return function(b) {
+    return a + b;
+  };
+}
+var add5 = makeAdder(5);
+var add20 = makeAdder(20);
+add5(6); // ?
+add20(7); // ?
+
+ +

makeAdder 함수의 이름은 다음과 같은 과정을 거쳐 반드시 없어집니다: 해당 함수가 한 매개변수를 받아 호출됐을 때, 생성될 때 주어진 매개변수를 더하는 새 'adder' 함수를 생성합니다.

+ +

여기서 일어나는 일은 다른 함수의 내에 정의된 어떤 함수가 외부 함수의 변수에 액세스한다는 점에서 앞에 언급한 내장 함수에서 일어나는 일과 매우 비슷합니다. 한가지 다른 점은 외부 함수가 리턴 된다는 점인데, 상식적으로 그것에 들어 있는 변수는 사라진다고 볼 수 있습니다. 하지만 그들은 여전히존재합니다 - 그렇지 않으면 adder 함수는 동작하지 않겠지요. 게다가, makeAdder 지역 변수의 서로 다른 두 "복사본"이 존재합니다 - 하나의 a는 5이고, 다른 하나의 a는 20이죠. 따라서 해당 함수를 부른 결과는 다음과 같습니다:

+ +
x(6) // 11을 돌려줌
+y(7) // 27을 돌려줌
+
+ +

이건 실제로 일어나는 일입니다. JavaScript 함수가 실행될 때는 언제나, '범위' 객체가 생성되어 해당 함수내에서 생성된 지역 변수를 여기에 저장하고 있습니다. 함수 매개변수로서 넘겨진 어떤 변수라도 여기에 초기값으로 저장하고 있습니다. 이것은 모든 전역 변수와 함수가 들어있는 전역 객체와 비슷하지만, 두가지 중요한 차이점이 있습니다. 첫번째로, 함수가 실행될 때마다 새로운 범위 객체가 생성된다는 점과, 두번째로, (브라우저에서 window로 접근가능한) 전역 객체와 달리 범위 객체는 JavaScript 코드에서 직접적으로 액세스할 수 없다는 점입니다. 예를 들자면 현재 범위 객체의 속성에 반복 접근할 수 있는 수단이 없습니다.

+ +

따라서 makeAdder 가 호출되면, 범위 객체는 makeAdder 함수에 매개변수로 넘겨진 하나의 속성 a를 가진 상태로 생성됩니다. 일반적으로 JavaScript의 가비지 컬렉터가 이때 makeAdder에 의해 생성된 범위 객체를 청소해야겠지만, 리턴된 함수가 여전히 범위 객체를 참조하고 있습니다. 결과적으로 범위 객체는 makeAdder에 의해 리턴된 함수 객체가 더는 참조되지 않을 때까지 가비지 컬렉터에 의해 정리되지 않게됩니다.

+ +

범위 객체는 JavaScript 객체 체계에서 사용되는 prototype 사슬과 비슷한 범위 사슬이라고 불리는 사슬을 형성합니다.

+ +

클로져는 함수와 함수에 의해 생성되는 범위 객체를 함께 지칭하는 용어입니다.

+ +

또한 클로져는 상태를 저장할 수 있도록 허용합니다 - 그렇기 때문에, 객체의 내부에서 자주 사용될 수 있는 것입니다.

+ +

메모리 누출

+ +

클로져의 부작용은 Internet Explorer에서 심각하지는 않지만 쉽게 메모리 누출이 된다는 것입니다. JavaScript는 가비지 컬렉트를 하는 언어 입니다. 객체가 생성됨에 따라서 메모리가 할당되고, 사용하고난 메모리는 더 참조하는 다른 객체가 없을 때 되돌아가는 방식으로 동작하는 언어란 말이죠. 호스트 환경에서 제공되는 객체들은 해당 환경에 의해 다뤄집니다.

+ +

브라우저 호스트는 HTML 페이지에 DOM 객체로서 표현되어있는 많은 수의 객체를 다뤄야 합니다. 이 객체들을 어떻게 할당하고 다시 거둬들일지는 브라우저 책임이죠.

+ +

Internet Explorer는 이를 위해 자신만의 고유한, JavaScript의 그것과는 다른 가비지 컬렉션 방식을 사용합니다. 두 언어간에 상호작용이 일어날 수 있고 이 과정에서 메모리 누출이 발생할 수 있습니다.

+ +

IE에서 메모리 누출은 JavaScript 객체와 고유 객체간에 참조하는 중 자기 자신을 참조 (circular reference, 순환 참조)하게 되는 일이 발생할 경우라면 언제든지 발생하게 됩니다. 다음을 고려해 보도록 합시다:

+ +
function leakMemory() {
+    var el = document.getElementById('el');
+    var o = { 'el': el };
+    el.o = o;
+}
+
+ +

위의 코드는 순환 참조로서 메모리 누출을 일으킵니다. IE는 완전히 다시 시작되기 전까지는 el와 o에 의해 사용되는 메모리를 반환하지 못합니다.

+ +

위의 경우는 알아채지 못하고 지나갈 확률이 높습니다. 메모리 누출은 사실 오랫동안 실행되거나 큰 데이터 구조나 반복, 순환에 의해 누출된는 메모리 양이 많은 경우에서 실질적으로 고려할만한 가치가 생깁니다.

+ +

누출이 이처럼 명확한 경우는 드뭅니다. 누출을 일으키는 데이터 구조는 수차례에 걸친 참조 구조를 가지고 있어서 순환 참조를 하고있는지 명확하지 않은 경우가 더 많습니다.

+ +

클로져는 그렇게 되도록 하지않아도 간단하게 메모리 누출을 일으킬 수 있습니다. 다음을 고려해 봅시다:

+ +
function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+}
+
+ +

위의 코드는 클릭했을때 배경색이 빨강으로 바뀌는 엘레멘트를 설정합니다. 그리고 메모리 누출도 일으킵니다. 어째서냐고요? el을 참조하면 의도와는 달리 익명 내부 함수 때문에 생성된 클로져 내에 붙잡혀 있게 되기 때문입니다. 이는 JavaScript 객체 (내부 함수)와 원시 객체 (el)간에 순환 참조를 만듭니다.

+ +

이 문제를 피할 수 있는 많은 방법이 있습니다. 가장 간단한 건 이겁니다:

+ +
function addHandler() {
+    var el = document.getElementById('el');
+    el.onclick = function() {
+        this.style.backgroundColor = 'red';
+    }
+    el = null;
+}
+
+ +

이렇게 하면 순환 참조 고리를 끊을 수 있습니다.

+ +

놀랍게도, 클로져에 의해 발생된 순환 참조를 고리를 끊기 위한 한 요령은 또다른 클로져를 추가하는 것입니다:

+ +
function addHandler() {
+    var clickHandler = function() {
+        this.style.backgroundColor = 'red';
+    }
+    (function() {
+        var el = document.getElementById('el');
+        el.onclick = clickHandler;
+    })();
+}
+
+ +

내부 함수는 실행되고 바로 사라지므로서, clickHandler와 함께 생성된 클로져로부터 그 내용을 숨깁니다.

+ +

클로져를 피할 수 있는 또다른 좋은 요령은 window.onunload 이벤트가 발생하는 동안 순환 참조를 끊는 것입니다. 많은 이벤트 라이브러리가 이렇게 동작합니다. 주의할 것은 그렇게 하도록하면 Firefox 1.5의 bfcache를 비활성화 하게 되므로, 별 다른 이유가 없다면 Firefox에서 unload listener를 등록해서는 안 된다는 것입니다.

+ +
+

원본 문서 정보

+ +
    +
  • 저자: Simon Willison
    • +
  • 최근 갱신 날짜: March 7, 2006
    • +
  • 저작권: © 2006 Simon Willison, contributed under the Creative Commons: Attribute-Sharealike 2.0 license.
    • +
  • 추가 정보: For more information about this tutorial (and for links to the original talk's slides), see Simon's Etech weblog post.
    • +
+
+ +
+ +

{{ 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" } ) }}

diff --git a/files/ko/web/javascript/about/index.html b/files/ko/web/javascript/about/index.html deleted file mode 100644 index c7ec0f9f28..0000000000 --- a/files/ko/web/javascript/about/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: JavaScript에 대하여 -slug: Web/JavaScript/About -tags: - - 비기너 - - 소개 - - 자바스크립트 -translation_of: Web/JavaScript/About_JavaScript ---- -

{{JsSidebar}}

- -

JavaScript란 무엇인가?

- -

JavaScript® (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.

- -

자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다.

- -

대중적인 오해와 달리, Javascript는 인터프리트 형태 자바가 아니다. 간단히 말하면, Javascript는 프로토 타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다.  기본적인 문법은  언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 if문, for와 while문, switch문과 try...catch 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다.

- -

Javascript는 절차지향 (procedural) 언어와  객체지향 (object oriented) 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 실시간으로 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.

- -

JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, (eval 에 의한)동적 스크립트 작성, (for ... in 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다.

- -

자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 자바스크립트 리소스 링크를 참조하면 된다.

- -

어떠한 JavaScript 구현이 유용한가?

- -

Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. SpiderMonkey 라는 이름의 엔진은 C/C++로 구현되었다. Rhino 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다.

- -

TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다.

- -

위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다.

- -
    -
  • 구글의 V8 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다.
    • -
  • JavaScriptCore (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다.
    • -
  • Carakan 는 오페라의 예전 버전안에 있다.
    • -
  • Chakra 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.)
    • -
- -

mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 DOM을 Javascript로 반영하는 호스트 객체를 만든다.

- -

JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. Node.js는 이에 대한 대중적인 예이다.

- -

JavaScript 자원

- -
-
SpiderMonkey
-
애플리케이션에 임베드하는 방법을 포함하는, C/C++ 엔진(SpiderMonkey)으로 구현된 Mozilla의 JavaScript 구현체에 관한 정보.
-
Rhino
-
Java(Rhino)로 작성된 자바스크립트 구현체에 관련 정보.
-
Language resources
-
자바스크립트 표준을 출판하기 위한 포인터들.
-
A re-introduction to JavaScript
-
자바스크립트 가이드와 자바스크립트 레퍼런스.
-
- -

JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다.

diff --git a/files/ko/web/javascript/about_javascript/index.html b/files/ko/web/javascript/about_javascript/index.html new file mode 100644 index 0000000000..c7ec0f9f28 --- /dev/null +++ b/files/ko/web/javascript/about_javascript/index.html @@ -0,0 +1,58 @@ +--- +title: JavaScript에 대하여 +slug: Web/JavaScript/About +tags: + - 비기너 + - 소개 + - 자바스크립트 +translation_of: Web/JavaScript/About_JavaScript +--- +

{{JsSidebar}}

+ +

JavaScript란 무엇인가?

+ +

JavaScript® (줄여서 JS)는 일급 함수를 사용하는 가벼운 객체 지향 인터프리터 언어이며 웹페이지의 스크립트 언어로 잘 알려져 있지만, 브라우저가 아닌 환경에서도 많이 사용된다. 프로토타입 기반, 다중 패러다임 스크립트 언어이며, 동적이고 명령어, 객체 지향, 함수 프로그래밍 스타일을 지원한다.

+ +

자바스크립트는 클라이언트 측 웹(브라우저)에서 실행 되고, 웹 페이지가 이벤트 발생시 어떻게 작동하는 지 디자인 / 프로그래밍할 수 있다. 자바스크립트는 쉽게 배울 수 있고 강력한 스크립트 언어로 웹 페이지 동작을 제어하는 데 널리 사용된다.

+ +

대중적인 오해와 달리, Javascript는 인터프리트 형태 자바가 아니다. 간단히 말하면, Javascript는 프로토 타입 기반 객체 생성을 지원하는 동적 스크립트 언어이다.  기본적인 문법은  언어 학습에 필요한 새로운 개념을 줄이기 위해 Java와 C++의 if문, for와 while문, switch문과 try...catch 구문을 사용하는 언어구조를 사용하며, 그와 같은 (거의 가까운) 동작을 한다.

+ +

Javascript는 절차지향 (procedural) 언어와  객체지향 (object oriented) 언어 두가지 형태로 만들수 있다. 자바스크립트에서 객체는 실시간으로 빈 객체를 오버라이딩하여 메소드와 프로퍼티를 연결하는 (프로그래밍)방식으로 생성된다. C++ 및 Java와 같은 컴파일 언어에서 공통적인 구문 클래스 정의와 반대되는 개념이다. 한번 객체가 생성하면, 비슷한 객체를 생성할 때 프로토타입으로 사용할 수 있다.

+ +

JavaScript의 동적인 성질은, 실행시의 오브젝트 구축, 가변 인수 리스트, 함수 변수, (eval 에 의한)동적 스크립트 작성, (for ... in 에 의한) 오브젝트의 내부참조, 또는 소스코드 복원 (JavaScript 의 프로그램은 함수본체를 소스텍스트에 역컴파일할 수 있다.) 을 포함하고 있다.

+ +

자바스크립트 프로그래밍에 대한 더 자세한 설명은 아래의 자바스크립트 리소스 링크를 참조하면 된다.

+ +

어떠한 JavaScript 구현이 유용한가?

+ +

Mozilla 프로젝트는 두 가지 자바스크립트 구현을 제공한다. 최초의 Javascript는 Netscape의 Brendan Eich에 의해 만들었다. 이후 ECMA-262 에디션 5 와 최신 버전을 준수하도록 업데이트되었다. SpiderMonkey 라는 이름의 엔진은 C/C++로 구현되었다. Rhino 엔진은 주로 Norris Boys(또한 Netscape)가 만들었고 Java로 작성된 Javascript 구현체이다. SpiderMonkey와 마찬가지로 Rhino도 ECMA-262 에디션 5를 준거한다.

+ +

TraceMonkey (Firefox 3.5), JägerMonkey (Firefox 4) 그리고 IonMonkey와 같은 몇가지 주요한 실시간 최적화는 차츰 SpiderMonkey 자바스크립트 엔진에 추가되었다. 자바스크립트 실행 성능 향상을 위한 작업은 지금도 진행 중이다.

+ +

위의 구현 이외에도 다음과 같은 다른 인기있는 자바스크립트 엔진이 있다.

+ +
    +
  • 구글의 V8 은 크롬 브라우저와 최신 버전의 오페라 브라우저에 사용된다. 또 Node.js의 엔진으로 사용된다.
    • +
  • JavaScriptCore (SquirrelFish/Nitro) 는 Apple 사파리와 같은 일부 WebKit 브라우저에서 사용된다.
    • +
  • Carakan 는 오페라의 예전 버전안에 있다.
    • +
  • Chakra 엔진은 Internet Explorer에서 사용된다. (상표권 문제를 피하기 위해 공식적으로 "JScript"라고 불린다.)
    • +
+ +

mozilla.org의 각 JavaScript 엔진은, 애플리케이션이 JavaScript를 지원하기 위해 부를 수 있는 공개 API를 공개하고 있다. JavaScript 를 지원하는 가장 일반적인 호스트환경은 웹브라우저이다. 웹 브라우저는 일반적으로 공개 API를 사용하여 DOM을 Javascript로 반영하는 호스트 객체를 만든다.

+ +

JavaScript 의 또 다른 일반적인 애플리케이션은 (웹) 서버사이드 스크립팅 언어이다. 자바스크립트 웹 서버는 HTTP 요청 및 응답 객체를 나타내는 호스트 객체를 공개하며 자바 스크립트 프로그램에 의해 조작되어 웹 페이지를 동적으로 생성 할 수 있다. Node.js는 이에 대한 대중적인 예이다.

+ +

JavaScript 자원

+ +
+
SpiderMonkey
+
애플리케이션에 임베드하는 방법을 포함하는, C/C++ 엔진(SpiderMonkey)으로 구현된 Mozilla의 JavaScript 구현체에 관한 정보.
+
Rhino
+
Java(Rhino)로 작성된 자바스크립트 구현체에 관련 정보.
+
Language resources
+
자바스크립트 표준을 출판하기 위한 포인터들.
+
A re-introduction to JavaScript
+
자바스크립트 가이드와 자바스크립트 레퍼런스.
+
+ +

JavaScript® 는 미국 및 여러 나라의 Oracle 트레이드마크 또는 등록된 트레이드마크입니다.

diff --git a/files/ko/web/javascript/closures/index.html b/files/ko/web/javascript/closures/index.html new file mode 100644 index 0000000000..b56d843b2b --- /dev/null +++ b/files/ko/web/javascript/closures/index.html @@ -0,0 +1,454 @@ +--- +title: 클로저 +slug: Web/JavaScript/Guide/Closures +tags: + - Closure + - ES5 + - Intermediate + - JavaScript + - Reference +translation_of: Web/JavaScript/Closures +--- +
{{jsSidebar("Intermediate")}}
+ +

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

+ +

어휘적 범위 지정(Lexical scoping)

+ +

다음을 보자:

+ +
function init() {
+  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
+  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
+    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
+  }
+  displayName();
+}
+init();
+ +

init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 만약 displayName()가 자신만의 name변수를 가지고 있었다면, name대신 this.name을 사용했을 것이다.

+ +

{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}

+ +

위 코드를 실행하면 displayName() 함수 내의 alert()문이 부모 함수에서 정의한 변수 name의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.

+ +

클로저(Closure)

+ +

이제 다음 예제를 보자:

+ +
function makeFunc() {
+  var name = "Mozilla";
+  function displayName() {
+    alert(name);
+  }
+  return displayName;
+}
+
+var myFunc = makeFunc();
+//myFunc변수에 displayName을 리턴함
+//유효범위의 어휘적 환경을 유지
+myFunc();
+//리턴된 displayName 함수를 실행(name 변수에 접근)
+ +

이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다는 것이다.

+ +

한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. makeFunc() 실행이 끝나면(displayName함수가 리턴되고 나면) name 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다.

+ +

하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, myFunc은 makeFunc이 실행될 때 생성된 displayName 함수의 인스턴스에 대한 참조다. displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 alert 에 전달된다.

+ +

다음은 조금 더 흥미로운 예제인 makeAdder 함수이다:

+ +
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값에 접근하여 값을 계산
+
+
+ +

이 예제에서 단일 인자 x를 받아서 새 함수를 반환하는 함수 makeAdder(x)를 정의했다. 반환되는 함수는 단일 인자 z를 받아서 x와 y와 z의 합을 반환한다.

+ +

본질적으로 makeAdder는 함수를 만들어내는 공장이다. 이는 makeAdder함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 add5, add10 두 개의 새로운 함수들을 만들기 위해 makeAdder함수 공장을 사용했다. 하나는 매개변수 x에 5를 더하고 다른 하나는 매개변수 x에 10을 더한다.

+ +

add5와 add10은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 add5의 맥락적 환경에서 클로저 내부의 x는 5 이지만 add10의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는 것이 아니라는 것을 의미한다.

+ +

실용적인 클로저

+ +

클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다.

+ +

결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다.

+ +

이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다.

+ +

예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 body 요소의 font-size를 픽셀 단위로 지정하고 상대적인 em 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다.

+ +
body {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 12px;
+}
+
+h1 {
+  font-size: 1.5em;
+}
+
+h2 {
+  font-size: 1.2em;
+}
+
+ +

우리의 대화식 글자 크기 버튼들은 body 요소의 font-size 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다.

+ +

여기 자바스크립트 코드가 있다.

+ +
function makeSizer(size) {
+  return function() {
+    document.body.style.fontSize = size + 'px';
+  };
+}
+
+var size12 = makeSizer(12);
+var size14 = makeSizer(14);
+var size16 = makeSizer(16);
+
+ +

size12, size14, size16은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다.

+ +
document.getElementById('size-12').onclick = size12;
+document.getElementById('size-14').onclick = size14;
+document.getElementById('size-16').onclick = size16;
+
+ +
<a href="#" id="size-12">12</a>
+<a href="#" id="size-14">14</a>
+<a href="#" id="size-16">16</a>
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}

+ +

클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기

+ +

자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다.

+ +

자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다.

+ +

아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 모듈 패턴이라 한다.

+ +
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
+
+ +

이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 counter.increment, counter.decrement, counter.value 세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다.

+ +

공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 privateCounter라는 변수이고 나머지 하나는 changeBy라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다.

+ +

위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 privateCounter 변수와 changeBy 함수에 접근할 수 있다.

+ +

카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 counter 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 makeCounter 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다.

+ +
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 */
+
+ +

두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 privateCounter 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.

+ +

이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.

+ +

클로저 스코프 체인

+ +

모든 클로저에는 세가지 스코프(범위)가 있다:-

+ +
    +
  • 지역 범위 (Local Scope, Own scope)
    • +
  • 외부 함수 범위 (Outer Functions Scope)
    • +
  • 전역 범위 (Global Scope)
    • +
+ +

따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자:

+ +
// 전역 범위 (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
+ +

위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.

+ +

루프에서 클로저 생성하기: 일반적인 실수

+ +

ECMAScript 2015의 let 키워드 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.

+ +
<p id="help">Helpful notes will appear here</p>
+<p>E-mail: <input type="text" id="email" name="email"></p>
+<p>Name: <input type="text" id="name" name="name"></p>
+<p>Age: <input type="text" id="age" name="age"></p>
+
+ +
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 < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}

+ +

helpText 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 onfocus 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다.

+ +

이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다.

+ +

onfocus 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 setupHelp 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.

+ +

이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다.

+ +
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 < helpText.length; i++) {
+    var item = helpText[i];
+    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
+  }
+}
+
+setupHelp();
+
+ +

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}

+ +

이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, makeHelpCallback 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 help는 helpText 배열의 해당 문자열을 나타낸다.

+ +

익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다.

+ +
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 < 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();
+ +

더 많은 클로저를 사용하는 것이 싫다면 ES2015의 let 키워드를 사용할 수 있다.

+ +
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 < helpText.length; i++) {
+    let item = helpText[i];
+    document.getElementById(item.id).onfocus = function() {
+      showHelp(item.help);
+    }
+  }
+}
+
+setupHelp();
+ +

위의 경우 var 대신 let을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다.

+ +

성능 관련 고려 사항

+ +

특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다.

+ +

예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다).

+ +

비실용적이지만 시범적인 다음 예를 고려하라:

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+  this.getName = function() {
+    return this.name;
+  };
+
+  this.getMessage = function() {
+    return this.message;
+  };
+}
+
+ +

앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다.

+ +
function MyObject(name, message) {
+  this.name = name.toString();
+  this.message = message.toString();
+}
+MyObject.prototype = {
+  getName: function() {
+    return this.name;
+  },
+  getMessage: function() {
+    return this.message;
+  }
+};
+
+ +

그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다.

+ +
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;
+};
+
+ +

위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다:

+ +
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);
+
+ +

앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. 객체 모델의 세부 사항을 참고하라.

diff --git a/files/ko/web/javascript/differential_inheritance_in_javascript/index.html b/files/ko/web/javascript/differential_inheritance_in_javascript/index.html deleted file mode 100644 index 70fd4256c3..0000000000 --- a/files/ko/web/javascript/differential_inheritance_in_javascript/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: Differential inheritance in JavaScript -slug: Web/JavaScript/Differential_inheritance_in_JavaScript -translation_of: Web/JavaScript/Differential_inheritance_in_JavaScript ---- -

Introduction

- -

차등 상속(Differential Inheritance)은 자바 스크립트와 같은 프로토 타입 기반 프로그래밍 언어에서 사용되는 일반적인 상속 모델입니다. 대부분의 객체는 다른 일반적인 객체에서 파생되고 몇 가지 작은 측면에서만 차이가 있다는 원칙에 따라 동작합니다. 일반적으로 객체가 다른 다른 객체에 대한 포인터 목록을 내부적으로 유지합니다.

- -

Example

- - - -

다음 코드는 개체를 "상속"하는 간단한 메서드 예제입니다.

- -
Object.prototype.inherit = function(){
-  // Create a new object with this as its prototype
-  var p = Object.create(this);
-
-  /* actually not necessary:
-  // Apply the constructor on the new object
-  this.constructor.apply(p, arguments);
-  */
-
-  return p;
-};
-
- -

상속(inherit)을 사용하면 일반 프로토 타입에서보다 구체적인 개체를 간단히 파생시킬 수 있습니다. 다음은 상속 방법 및 차등 상속을 사용하여 점점 더 구체적인 객체를 구성하는 간단한 예입니다.

- -
var root = {}; // Could be any object with any prototype object
-
-var record = root.inherit();
-record.toString = function(){ return "a Record"; };
-
-var person = root.inherit();
-person.firstName = false;
-person.lastName = false;
-person.toString = function(){
-    if (this.firstName) {
-        if (this.lastName) {
-            return this.firstName + " " + this.lastName;
-        } else {
-            return this.firstName;
-        }
-    } else if (this.lastName) {
-        return this.lastName;
-    } else {
-        return "a Person";
-    }
-};
-
-JoePerson = person.inherit();
-JoePerson.firstName = "Joe";
-alert( JoePerson.toString() );
-
- -

See also

- - diff --git a/files/ko/web/javascript/guide/closures/index.html b/files/ko/web/javascript/guide/closures/index.html deleted file mode 100644 index b56d843b2b..0000000000 --- a/files/ko/web/javascript/guide/closures/index.html +++ /dev/null @@ -1,454 +0,0 @@ ---- -title: 클로저 -slug: Web/JavaScript/Guide/Closures -tags: - - Closure - - ES5 - - Intermediate - - JavaScript - - Reference -translation_of: Web/JavaScript/Closures ---- -
{{jsSidebar("Intermediate")}}
- -

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다.

- -

어휘적 범위 지정(Lexical scoping)

- -

다음을 보자:

- -
function init() {
-  var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다.
-  function displayName() { // displayName() 은 내부 함수이며, 클로저다.
-    alert(name); // 부모 함수에서 선언된 변수를 사용한다.
-  }
-  displayName();
-}
-init();
- -

init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init() 안에 정의된 내부 함수이며 init() 함수 본문에서만 사용할 수 있다. 여기서 주의할 점은 displayName() 내부엔 자신만의 지역 변수가 없다는 점이다. 그런데 함수 내부에서 외부 함수의 변수에 접근할 수 있기 때문에 displayName() 역시 부모 함수 init()에서 선언된 변수 name에 접근할 수 있다. 만약 displayName()가 자신만의 name변수를 가지고 있었다면, name대신 this.name을 사용했을 것이다.

- -

{{JSFiddleEmbed("https://jsfiddle.net/78dg25ax/", "js,result", 250)}}

- -

위 코드를 실행하면 displayName() 함수 내의 alert()문이 부모 함수에서 정의한 변수 name의 값을 성공적으로 출력한다. 이 예시를 통해 함수가 중첩된 상황에서 파서가 어떻게 변수를 처리하는지 알 수 있다. 이는 어휘적 범위 지정(lexical scoping)의 한 예이다. 여기서 "lexical"이란, 어휘적 범위 지정(lexical scoping) 과정에서 변수가 어디에서 사용 가능한지 알기 위해 그 변수가 소스코드 내 어디에서 선언되었는지 고려한다는 것을 의미한다. 단어 "lexical"은 이런 사실을 나타낸다. 중첩된 함수는 외부 범위(scope)에서 선언한 변수에도 접근할 수 있다.

- -

클로저(Closure)

- -

이제 다음 예제를 보자:

- -
function makeFunc() {
-  var name = "Mozilla";
-  function displayName() {
-    alert(name);
-  }
-  return displayName;
-}
-
-var myFunc = makeFunc();
-//myFunc변수에 displayName을 리턴함
-//유효범위의 어휘적 환경을 유지
-myFunc();
-//리턴된 displayName 함수를 실행(name 변수에 접근)
- -

이 코드는 바로 전의 예제와 완전히 동일한 결과가 실행된다. 하지만 흥미로운 차이는 displayName()함수가 실행되기 전에 외부함수인 makeFunc()로부터 리턴되어 myFunc 변수에 저장된다는 것이다.

- -

한 눈에 봐서는 이 코드가 여전히 작동하는 것이 직관적으로 보이지 않을 수 있다. 몇몇 프로그래밍 언어에서, 함수 안의 지역 변수들은 그 함수가 처리되는 동안에만 존재한다. makeFunc() 실행이 끝나면(displayName함수가 리턴되고 나면) name 변수에 더 이상 접근할 수 없게 될 것으로 예상하는 것이 일반적이다.

- -

하지만 위의 예시와 자바스크립트의 경우는 다르다. 그 이유는 자바스크립트는 함수를 리턴하고, 리턴하는 함수가 클로저를 형성하기 때문이다. 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 첫 번째 예시의 경우, myFunc은 makeFunc이 실행될 때 생성된 displayName 함수의 인스턴스에 대한 참조다. displayName의 인스턴스는 변수 name 이 있는 어휘적 환경에 대한 참조를 유지한다. 이런 이유로 myFunc가 호출될 때 변수 name은 사용할 수 있는 상태로 남게 되고 "Mozilla" 가 alert 에 전달된다.

- -

다음은 조금 더 흥미로운 예제인 makeAdder 함수이다:

- -
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값에 접근하여 값을 계산
-
-
- -

이 예제에서 단일 인자 x를 받아서 새 함수를 반환하는 함수 makeAdder(x)를 정의했다. 반환되는 함수는 단일 인자 z를 받아서 x와 y와 z의 합을 반환한다.

- -

본질적으로 makeAdder는 함수를 만들어내는 공장이다. 이는 makeAdder함수가 특정한 값을 인자로 가질 수 있는 함수들을 리턴한다는 것을 의미한다. 위의 예제에서 add5, add10 두 개의 새로운 함수들을 만들기 위해 makeAdder함수 공장을 사용했다. 하나는 매개변수 x에 5를 더하고 다른 하나는 매개변수 x에 10을 더한다.

- -

add5와 add10은 둘 다 클로저이다. 이들은 같은 함수 본문 정의를 공유하지만 서로 다른 맥락(어휘)적 환경을 저장한다. 함수 실행 시 add5의 맥락적 환경에서 클로저 내부의 x는 5 이지만 add10의 맥락적 환경에서 x는 10이다. 또한 리턴되는 함수에서 초기값이 1로 할당된 y에 접근하여 y값을 100으로 변경한 것을 볼 수 있다. (물론 x값도 동일하게 변경 가능하다.) 이는 클로저가 리턴된 후에도 외부함수의 변수들에 접근 가능하다는 것을 보여주는 포인트이며 클로저에 단순히 값 형태로 전달되는 것이 아니라는 것을 의미한다.

- -

실용적인 클로저

- -

클로저는 어떤 데이터(어휘적 환경)와 그 데이터를 조작하는 함수를 연관시켜주기 때문에 유용하다. 이것은 객체가 어떤 데이터와(그 객체의 속성) 하나 혹은 그 이상의 메소드들을 연관시킨다는 점에서 객체지향 프로그래밍과 분명히 같은 맥락에 있다.

- -

결론적으로 오직 하나의 메소드를 가지고 있는 객체를 일반적으로 사용하는 모든 곳에 클로저를 사용할 수 있다.

- -

이렇게 할 수 있는 상황은 특히 웹에서 일반적이다. 프론트 엔드 자바스크립트에서 우리가 쓰는 많은 코드가 이벤트 기반이다. 우리는 몇 가지 동작을 정의한 다음 사용자에 의한 이벤트에(클릭 혹은 키 누르기 같은) 연결한다. 우리의 코드는 일반적으로 콜백으로 첨부된다: 이벤트에 응답하여 실행되는 단일 함수다.

- -

예를 들면 페이지의 글자 크기를 조정하는 몇 개의 버튼을 추가한다고 가정하자. 이 작업을 수행하는 한 가지 방법은 body 요소의 font-size를 픽셀 단위로 지정하고 상대적인 em 단위를 사용하여 페이지의 다른 요소들의 (예: 헤더) 크기를 설정하는 것이다.

- -
body {
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 12px;
-}
-
-h1 {
-  font-size: 1.5em;
-}
-
-h2 {
-  font-size: 1.2em;
-}
-
- -

우리의 대화식 글자 크기 버튼들은 body 요소의 font-size 속성을 변경할 수 있고 이런 조정은 상대적 단위들 덕분에 페이지의 다른 요소에 의해 선택된다.

- -

여기 자바스크립트 코드가 있다.

- -
function makeSizer(size) {
-  return function() {
-    document.body.style.fontSize = size + 'px';
-  };
-}
-
-var size12 = makeSizer(12);
-var size14 = makeSizer(14);
-var size16 = makeSizer(16);
-
- -

size12, size14, size16은 body 요소의 글자 크기를 각각 12, 14, 16 픽셀로 바꾸는 함수이다. 이 함수들을 아래처럼 버튼들에(이 경우에는 링크) 연결할 수 있다.

- -
document.getElementById('size-12').onclick = size12;
-document.getElementById('size-14').onclick = size14;
-document.getElementById('size-16').onclick = size16;
-
- -
<a href="#" id="size-12">12</a>
-<a href="#" id="size-14">14</a>
-<a href="#" id="size-16">16</a>
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/vnkuZ/","","200")}}

- -

클로저를 이용해서 프라이빗 메소드 (private method) 흉내내기

- -

자바와 같은 몇몇 언어들은 메소드를 프라이빗으로 선언할 수 있는 기능을 제공한다. 이는 같은 클래스 내부의 다른 메소드에서만 그 메소드들을 호출할 수 있다는 의미이다.

- -

자바스크립트는 태생적으로는 이런 방법을 제공하지 않지만 클로저를 이용하여 프라이빗 메소드를 흉내내는 것이 가능하다. 프라이빗 메소드는 코드에 제한적인 접근만을 허용한다는 점 뿐만 아니라 전역 네임 스페이스를 관리하는 강력한 방법을 제공하여 불필요한 메소드가 공용 인터페이스를 혼란스럽게 만들지 않도록 한다.

- -

아래 코드는 프라이빗 함수와 변수에 접근하는 퍼블릭 함수를 정의하기 위해 클로저를 사용하는 방법을 보여준다. 이렇게 클로저를 사용하는 것을 모듈 패턴이라 한다.

- -
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
-
- -

이전 예제에서 각 클로저들이 고유한 문법적 환경을 가졌지만 여기서 우리는 counter.increment, counter.decrement, counter.value 세 함수에 의해 공유되는 하나의 어휘적 환경을 만든다.

- -

공유되는 어휘적 환경은 실행되는 익명 함수 안에서 만들어진다. 이 익명 함수는 정의되는 즉시 실행된다. 이 어휘적 환경은 두 개의 프라이빗 아이템을 포함한다. 하나는 privateCounter라는 변수이고 나머지 하나는 changeBy라는 함수이다. 둘 다 익명 함수 외부에서 접근될 수 없다. 대신에 익명 래퍼에서 반환된 세 개의 퍼블릭 함수를 통해서만 접근되어야만 한다.

- -

위의 세 가지 퍼블릭 함수는 같은 환경을 공유하는 클로저다. 자바스크립트의 어휘적 유효 범위 덕분에 세 함수 각각 privateCounter 변수와 changeBy 함수에 접근할 수 있다.

- -

카운터를 생성하는 익명 함수를 정의하고 그 함수를 즉시 호출하고 결과를 counter 변수에 할당하는 것을 알아차렸을 것이다. 이 함수를 별도의 변수 makeCounter 저장하고 이 변수를 이용해 여러 개의 카운터를 만들 수 있다.

- -
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 */
-
- -

두 개의 카운터가 어떻게 다른 카운터와 독립성을 유지하는지 주목해보자. 각 클로저는 그들 고유의 클로저를 통한 privateCounter 변수의 다른 버전을 참조한다. 각 카운터가 호출될 때마다; 하나의 클로저에서 변수 값을 변경해도 다른 클로저의 값에는 영향을 주지 않는다.

- -

이런 방식으로 클로저를 사용하여 객체지향 프로그래밍의 정보 은닉과 캡슐화 같은 이점들을 얻을 수 있다.

- -

클로저 스코프 체인

- -

모든 클로저에는 세가지 스코프(범위)가 있다:-

- -
    -
  • 지역 범위 (Local Scope, Own scope)
    • -
  • 외부 함수 범위 (Outer Functions Scope)
    • -
  • 전역 범위 (Global Scope)
    • -
- -

따라서, 우리는 클로저에 대해 세가지 범위 모두 접근할 수 있지만, 중첩된 내부 함수가 있는 경우 종종 실수를 저지른다. 아래 예제를 확인해보자:

- -
// 전역 범위 (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
- -

위의 예제를 보면 일련의 중첩된 함수들을 확인할 수 있다. 이 함수들은 전부 외부 함수의 스코프에 접근할 수 있다. 그런데 문제는 즉각적인 외부 함수의 스코프만을 추측한다는 것이다. 이 문맥에서는 모든 클로저가 선언된 외부 함수의 스코프에 접근한다라고 말할 수 있다.

- -

루프에서 클로저 생성하기: 일반적인 실수

- -

ECMAScript 2015의 let 키워드 소개 전에는 클로저와 관련된 일반적인 문제는 루프 안에서 클로저가 생성되었을 때 발생한다.다음 예제를 보자.

- -
<p id="help">Helpful notes will appear here</p>
-<p>E-mail: <input type="text" id="email" name="email"></p>
-<p>Name: <input type="text" id="name" name="name"></p>
-<p>Age: <input type="text" id="age" name="age"></p>
-
- -
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 < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = function() {
-      showHelp(item.help);
-    }
-  }
-}
-
-setupHelp();
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/", "", 200)}}

- -

helpText 배열은 세 개의 도움말 힌트를 정의한다. 각 도움말은 문서의 입력 필드의 ID와 연관된다. 루프를 돌면서 각 입력 필드 ID에 해당하는 엘리먼트의 onfocus 이벤트에 관련된 도움말을 보여주는 메소드에 연결한다.

- -

이 코드를 사용하면 제대로 동작하지 않는 것을 알게 된다. 어떤 필드에 포커스를 주더라도 나이에 관한 도움말이 표시된다.

- -

onfocus 이벤트에 연결된 함수가 클로저이기 때문이다. 이 클로저는 함수 정의와 setupHelp 함수 범위에서 캡처된 환경으로 구성된다. 루프에서 세 개의 클로저가 만들어졌지만 각 클로저는 값이 변하는 변수가 (item.help) 있는 같은 단일 환경을 공유한다. onfocus 콜백이 실행될 때 콜백의 환경에서 item 변수는 (세개의 클로저가 공유한다) helpText 리스트의 마지막 요소를 가리키고 있을 것이다.

- -

이 경우 한 가지 해결책은 더 많은 클로저를 사용하는 것이다: 특히 앞에서 설명한 함수 팩토리를 사용하는 것이다.

- -
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 < helpText.length; i++) {
-    var item = helpText[i];
-    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
-  }
-}
-
-setupHelp();
-
- -

{{JSFiddleEmbed("https://jsfiddle.net/v7gjv/1/", "", 300)}}

- -

이것은 예상대로 동작한다. 모두 단일 환경을 공유하는 콜백대신, makeHelpCallback 함수는 각각의 콜백에 새로운 어휘적 환경을 생성한다. 여기서 help는 helpText 배열의 해당 문자열을 나타낸다.

- -

익명 클로저를 사용하여 위 코드를 작성하는 또 다른 방법은 다음과 같다.

- -
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 < 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();
- -

더 많은 클로저를 사용하는 것이 싫다면 ES2015의 let 키워드를 사용할 수 있다.

- -
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 < helpText.length; i++) {
-    let item = helpText[i];
-    document.getElementById(item.id).onfocus = function() {
-      showHelp(item.help);
-    }
-  }
-}
-
-setupHelp();
- -

위의 경우 var 대신 let을 사용하여 모든 클로저가 블록 범위 변수를 바인딩할 것이므로 추가적인 클로저를 사용하지 않아도 완벽하게 동작할 것이다.

- -

성능 관련 고려 사항

- -

특정 작업에 클로저가 필요하지 않는데 다른 함수 내에서 함수를 불필요하게 작성하는 것은 현명하지 않다. 이것은 처리 속도와 메모리 소비 측면에서 스크립트 성능에 부정적인 영향을 미칠 것이다.

- -

예를 들어, 새로운 객체/클래스를 생성 할 때, 메소드는 일반적으로 객체 생성자에 정의되기보다는 객체의 프로토타입에 연결되어야 한다. 그 이유는 생성자가 호출 될 때마다 메서드가 다시 할당되기 때문이다 (즉, 모든 개체가 생성 될 때마다).

- -

비실용적이지만 시범적인 다음 예를 고려하라:

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-  this.getName = function() {
-    return this.name;
-  };
-
-  this.getMessage = function() {
-    return this.message;
-  };
-}
-
- -

앞의 코드는 클로저의 이점을 이용하지 않음으로 다음과 같이 다시 쓸 수 있다.

- -
function MyObject(name, message) {
-  this.name = name.toString();
-  this.message = message.toString();
-}
-MyObject.prototype = {
-  getName: function() {
-    return this.name;
-  },
-  getMessage: function() {
-    return this.message;
-  }
-};
-
- -

그러나 프로토타입을 다시 정의하는 것은 권장되지 않음으로 기존 프로토타입에 추가하는 다음 예제가 더 좋다.

- -
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;
-};
-
- -

위의 코드는 같은 결과를 가진 더 깨끗한 방법으로 작성할 수도 있다:

- -
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);
-
- -

앞의 두 가지 예제에서 상속된 프로토타입은 모든 객체에서 공유될 수 있으며 메소드 정의는 모든 객체 생성시 발생할 필요가 없다. 객체 모델의 세부 사항을 참고하라.

diff --git a/files/ko/web/javascript/guide/details_of_the_object_model/index.html b/files/ko/web/javascript/guide/details_of_the_object_model/index.html new file mode 100644 index 0000000000..230d5cb9e1 --- /dev/null +++ b/files/ko/web/javascript/guide/details_of_the_object_model/index.html @@ -0,0 +1,714 @@ +--- +title: 객체 모델의 세부 사항 +slug: Web/JavaScript/Guide/객체_모델의_세부사항 +translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
+ +

자바스크립트는 클래스 기반이 아닌 prototype에 기초한 객체 기반 언어 입니다. 이런 차이점으로 인해, 객체들의 계층 구조의 생성과 속성 및 속성 값의 상속을 어떻게 구현해야 하는지에 대한 부분이 덜 분명할 수 있습니다. 이번 장에서는 이런 상황을 명확하게 하고자 합니다. 

+ +

이번 장에선 이미 자바스크립트를 어느 정도 알고 있고, 간단한 객체를 생성하는 함수들을 사용해보았다는 가정하에 진행합니다.

+ +

클래스 기반 언어 대 프로토타입 기반 언어

+ +

Java와 C++같은 클래스 기반의 언어들은 두개의 구별되는 개념에 기반을 두고 있습니다: 그건 바로 클래스와 인스턴스입니다.

+ +
    +
  • 클래스는  특정 객체군을 특징 짓는 모든 속성들(Java에서는 메서드들과 필드들을 , C++에서는  멤버들을 속성으로 간주합니다. )을 정의합니다.클래스는 해당 객체군을 표현할 수 있는 특정 멤버를 지칭하는 것이 아닌 그보다 더 추상적인 것입니다. 예를 들어, 직원클래스는 직원들을 대표할 수 있습니다.
    • +
  • 반면 인스턴스는 클래스를 기반으로 실체화된 것입니다. 예를 들어, 빅토리아는 특정 직원 개인을 나타내는 직원클래스의 인스턴스가 될 수 있습니다. 인스턴스는 부모 클래스의 속성과 동일한 속성들을 가집니다.
    • +
+ +

자바스크립트같은 프로토타입기반의 언어들은 위와 같은 클래스와 인스턴스의 차이를 두지 않습니다. 간단하게 객체들을 가질 뿐입니다. prototype기반의 언어는 원형(프로토타입)의 객체 개념을 가지고 있습니다. 하나의 객체는 새로운 객체를 생성했을 때 초기 속성을 가질 수 있도록 하는 형판(template)으로 사용됩니다. 객체는 생성될 때 혹은 실행 시에 자기 자신의 속성을 명시할 수 있습니다. 추가적으로, 객체들은 또 다른 객체를 생성하기 위한 프로토타입으로 연관지어 질 수 있으며 프로토타입으로부터 생성된 두번째 객체가 프로토타입인 첫번째 객체의 속성을 공유(혹은 접근)하는 것을 허용합니다. 

+ +

클래스 정의

+ +

클래스 기반의 언어들에서, 별도의 클래스를 생성하고 그 안에서 해당 클래스를 정의 할 수 있습니다. 해당 정의에서 클래스의 인스턴스를 생성할 수 있는 생성자라고하는 특별한 메서드를 명시할 수 있습니다. 생성자는 해당 인스턴스의 초기 속성 값을 지정할 수 있고, 생성 시점에, 다른 적절한 처리를 수행 할 수 있습니다. 클래스의 인스턴스를 생성하기 위해서 new 연산자와 함께 생성자를 호출해야 합니다. 

+ +

자바스크립트는 위와 비슷한 방법을 취합니다. 하지만 생성자이외에 따로 클래스 정의를 가지고 있지는 않습니다. 대신, 특정 속성및 속성값들을 가지고 객체를 생성하는 생성자 함수를 정의할 수 있습니다. 특정 자바스크립트 함수는 생성자로 사용 될 수 있습니다. 새로운 객체를 생성할려면 new연산자와 함께 생성자 함수를 사용해야 합니다.

+ +
+

ECMAScript 2015에 클래스 선언이 새롭게 소개되었습니다.

+ +
+

ECMAScript 2015에서 소개된 자바스크립트 클래스는 주로 문법적 설탕으로 기존 자바스크립트 프로토타입 기반 상속에  읽기 좋은 형식으로 바뀌었습니다. 이 클래스 문법이 자바스크립트에 새로운 객체 중심 상속 모델을 소개한 것은 아닙니다.

+
+
+ +

하위 클래스와 상속

+ +

클래스 기반 언어에서는 클래스 정의를 통해 클래스 계층구조를 생성합니다. 클래스를 정의할 때 이미 존재하는 클래스의 하위 클래스를 새로운 클래스로 지정할 수 있습니다. 이 하위 클래스는 부모 클래스의 모든 속성을 상속받으며 추가로 새로운 속성을 추가하거나 상속받은 속성을 수정할 수 있습니다. 예를 들어  이름(name)과 부서(dept)을 가진 직원(Employee) 클래스와 그 하위 클래스에 보고(reports) 속성을 추가한 관리자(Manager) 클래스가 있다고 해봅시다. 이 경우 관리자(Manager)의 인스턴스는 다음과 같이 세가지 속성을 모두 가질 수 있습니다 - 이름(name),  부서(dept),  보고(reports).

+ +

자바스크립트는 생성자 함수와 프로토타입 객체를 연결해 상속을 구현합니다. 이런 식으로 직원(Employee) — 관리자(Manager) 예제를 똑같이 구현할 수 있지만 조금 다른 * 사용합니다. 먼저, 이름(name),  부서(dept) 속성을 명시하여 직원(Employee) 생성자 함수를 정의합니다. 그런 다음, 직원(Employee)의 생성자를 호출한 후 보고(reports) 속성을 명시해 관리자(Manager) 생성자 함수를 정의합니다. 마지막으로 Employee.prototype 에서 파생된 새로운 객체를  관리자(Manager) 생성자 함수의 프로토타입으로 지정합니다. 그런 다음 새로운 관리자(Manager)를 만들면 관리자(Manager) 객체를 직원(Employee) 객체로부터 이름(name),  부서(dept) 속성을 상속받습니다. 

+ +

속성의 추가 삭제

+ +

클래스 기반의 언어들에서는, 일반적으로 컴파일 시점에 클래스를 생성한 후에 컴파일 시점 혹은 실행 시에 해당 클래스의 인스턴스를 생성합니다. 클래스가 한번 정의된 후에 클래스를 다시 컴파일 하지 않는다면, 속성의 갯수나 형식을 변경할 수 없습니다. 하지만 자바스크립트에서느 실행 시에 객체의 속성을 추가 혹은 삭제 할 수 있습니다.  만약 객체군의 프로토타입으로 사용되는 객체에 속성을 추가하면, 프로토타입이 되는 객체들에도 새로운 속성이 추가가 됩니다.

+ +

차이점들에 대한 정리

+ +

다음 표는 이런 차이점들에 대한 간략한 요약을 포함하고 있습니다. 이번 장의 다음 내용들은 객체의 계층 구조를 생성하기 위한 자바스크립트 생성자와 프로토타입들의 사용에 대한 세부 사항에 대해 기술합니다. 그리고 동일한 작업을 자바에서 어떻게 처리해야 하는지도 비교해서 살펴보겠습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
클래스 기반(자바)과 프로토타입(prototype)기반(자바스크립트) 객체 시스템의 비교
클래스 기반(자바)원형 기반(자바스크립트)
클래스와 인스턴스는 별개입니다.모든 객체는 다른 객체로부터 상속을 받습니다.
클래스 정의를 가지고 클래스를 생성하고 생성자 메서드로 인스턴스를 생성합니다.생성자 함수를 가지고 객체군을 정의 및 생성합니다.
new 연산자로 하나의 객체(인스턴스)를 생성합니다.동일합니다.
이미 존재하는 클래스에 대한 하위 클래스를 정의함으로써 객체의 계층구조를 생성합니다.하나의 객체를 생성자 함수와 결합된 프로토타입에 할당함으로써 객체의 계층구조를 생성 합니다.
클래스의 상속 구조에 따라 속성을 상속 받습니다.프로토타입 체인에 따라  속성을 상속 받습니다.
클래스 정의는 모든 인스턴스의 모든 속성을 명시합니다. 실행시에 동적으로 속성을 추가할 수 없습니다.생성자 함수 혹은 프로토타입은 초기 속성들을 명시합니다. 개별 객체 혹은 전체 객체군에 동적으로 속성을 추가 삭제할 수 있습니다.
+ +

직원 예제

+ +

이장의 나머지 부분에서는 다음과 같은 직원 객체의 계층구조를 사용합니다. 

+ +
+

직원 객체의 계층 구조.

+ +

+ +
    +
  • 직원(Employee) 객체는 빈 문자열을 기본값으로 가지는 이름(name) 그리고 "일반(general)"을 기본 값으로 가지는 부서(dept)를 속성으로 가집니다.
    • +
  • 관리자(Manager)객체는 직원(Employee) 객체를 근간으로 하며, 직원 객체들을 포함하기 위한 빈 배열을 기본 값으로 하는 보고(reports)속성을 가지고 있습니다.
    • +
  • 근로자(WorkerBee)객체 또한 직원(Employee) 객체를 근간으로 하며, 문자열들을 포함하기 위한 빈 배열을 기본 값으로 하는 프로젝트(projects)속성을 가집니다.
    • +
  • 영업사원(SalesPerson)객체는 또한 근로자(WorkerBee) 객체를 근간으로 하며, 100을 기본값으로 하는 할당량(quota)를 속성으로 가집니다. 또한 같은 부서내의 모든 영업사원을 지칭하기 위한 부서 속성을 "판매부서"로 재정의 합니다. 
    • +
  • 엔지니어(Engineer)객체도 근로자(WorkerBee) 객체를 근간으로 하며, 빈 문자열을 기본값으로 가지는 장비(machine) 속성을 가집니다.그리고 엔지니어링(engineering)이라는 값으로 부서 속성을 재정의 합니다.
    • +
+
+ +

계층 구조 생성

+ +

직원 계층 구조를 구현하기 위한 적절한 생성자 함수를 정의하는 방법에는 여러가지가 있습니다. 개발하려고 하는 어플리케이션에 따라 생성자 함수를 정의 하는 방법은 달라질 수 있습니다. 

+ +

이번 절에서는 상속을 구현하기 위한 간단한 (비교적 유연하지는 않은) 정의 방법을 보여 줄 것입니다. 이런 정의 방법을 사용하게되면, 객체를 생성할 때 어떤 속성 값도 지정을 할 수 없습니다. 새로이 생성된 객체들은 기본값들을 가지고 있으며, 나중에 해당 속성 값들을 변경할 수 있습니다.

+ +

실제 어플리케이션에서는, 객체를 생성할때, 해당 객체가 가져야할 속성을 인자로 받는 생성자를 정의 할수 있습니다.(보다 자세한 사항은 다음을 참조하세요. More flexible constructors). 지금 당장은, 상속이 어떻게 작동하는지를 보여주기 위한 간단한 예제를 사용합니다. 

+ +

다음의 자바와 자바스크립트로 작성된 직원 정의는 비슷합니다. 차이점은 자바언어에서는 개별 속성에 대한 타입(type)을 일일이 지정을 해야 하지만  자바스크립트에서는 일일이 개별 속성에 대한 타입(type)을 지정할 필요가 없다는 것입니다.(이런 이유로 자바스크립트가 약하게 형식화된 언어로 불리는 반면 자바는 강력하게 형식화된 언어로 불립니다.)

+ + + + + + + + +
+

자바스크립트

+ + 
+function Employee() {
+  this.name = "";
+  this.dept = "general";
+}
+ 		+

자바

+ + 
+public class Employee {
+   public String name = "";
+   public String dept = "general";
+}
+
+
+ +

관리자와 근로자 정의는 계층 구조상에서 상위에 위치하는 객체를 어떻게 표시하는지에 대한 차이점을 보여 줍니다. 자바스크립트에서는 생성자 함수 정의 이후에 언제든 생성자 함수의 프로토타입(prototype) 속성의 값으로 프로토타입 인스턴스를 추가할 수 있습니다.  자바에서는 클래스 정의에 상위 클래스를 명시해야 합니다. 클래스 정의 이후에는 상위 클래스를 변경할 수 없습니다.

+ +
+

자바스크립트

+ +
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);
+
+ +

자바

+ +
public class Manager extends Employee {
+   public Employee[] reports = new Employee[0];
+}
+
+
+
+public class WorkerBee extends Employee {
+   public String[] projects = new String[0];
+}
+
+
+
+
+ +

엔지니어와 영업사원 정의들은 객체들을 생성합니다. 생성된 객체는 근로자 객체의 하위 객체이고 따라서 직원 객체의 하위 객체가 됩니다. 상속 관계에 따라 엔지니어와 영업사원 객체들은 근로자와 직원객체의 속성을 가지게 됩니다. 게다가, 상속받은 부서 속성은 엔지니어와 영업사원에서 재정되어 새로운 값을 가지게 됩니다. 

+ +
+

자바스크립트

+ +
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);
+
+ +

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 = "";
+}
+
+
+ +

이런 정의 방법을 통해, 기본값을 가지는 각각의 속성을 포함하는 객체의 인스턴스를 생성할 수 있습니다. 다음 그림은 새로운 객체를 생성하고 새로운 객체에 대한 속성값들을 보여 표시하기 위한 자바스크립트의 정의들을 보여 줍니다.

+ +
+

유의사항: 클래스 기반 언어들에서 인스턴스라는 용어는 특정한 기술적 의미를 가지고 있습니다. 이러한 언어들에서,  하나의 인스턴스란 하나의 클래스의 개별적인  실체이며 클래스와는 근본적으로 다릅니다. 자바스크립트에서는 클래스와 인스턴스 간의 차이가 없기 때문에, "인스턴스"가 이런 기술적 의미를 갖지 않습니다. 하지만, 자바스크립트에 대해서 얘기하자면, 비공식적으로 "인스턴스"는 특정한 생성자 함수를 이용하여 생성된 오브젝트를  의미합니다. 그래서 이번 예제에서는 jane이  Engineer 의 인스턴스라고 할 수 있습니다. 이와 유사하게, 부모, 자식, 상위, 하위의 용어들은 자바스크립트에서 공식적인 의미를 갖지 않습니다; 다만 프로토타입 체인 상의 상위 또는 하위 객체를 지칭하기 위해서 비공식적으로 사용할 수 있습니다.

+
+ +

간단한 정의로 객체 생성

+ +
+

객체의 계층구조

+ +

오른쪽에 보이는 코드로 생성된 객체의 계층 구조는 아래와 같습니다.

+ +

+ +

개별 객체들

+ +
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 ''
+
+
+ +

객체 속성들

+ +

이번 장에서는 객체가 프로토타입체인 상의 다른 객체로부터 특성을 상속받는 방법과 런타임 상에서 프로퍼티를 추가하면 무슨 일이 일어나는 지 살펴봅니다.

+ +

속성 상속

+ +

아래 구문처럼 WorkerBee 생성자로 mark 객체를 생성했다고 가정합니다.

+ +
var mark = new WorkerBee;
+
+ +

new 연산자를 만나면, 자바스크립트는 새로운 일반 객체를 생성하고 암묵적으로 내부의 [[Prototype]](__proto__) 속성의 값을 WorkerBee.prototype 의 값으로 할당하며, 해당 객체를 this 키워드의 값으로써 생성자 함수 WorkerBee에 전달합니다. 내부의 [[Prototype]] 속성은 속성값을 반환하기 위해 사용할 프로토타입 체인을 결정합니다. 이런 속성들이 할당되면, 자바스크립트는 새 객체를 반환하고, 할당 구문에 의해 변수 mark를 객체에 할당합니다.

+ +

이러한 절차는 mark가 프로토타입 체인으로부터 상속받는  속성의 값을 mark 객체 내부에(local values) 명시적으로 부여하진 않습니다. 당신이 속성의 값을 요청하면, 자바스크립트는 먼저 해당 객체에 값이 존재하는지 확인합니다. 존재한다면, 해당 값이 반환됩니다. 만약 해당 객체에 값이 없다면, 프로토타입 체인을 (내장 [[Prototype]] 속성;__proto__을 이용하여)확인합니다. 체인 상의 어떤 객체가 해당 속성의 값을 가지고 있다면 그 값이 반환됩니다. 그런 속성이 발견되지 않는다면, 자바스크립트는 객체가 속성을 가지고있지 않다고 할 것입니다. 이런 식으로, mark 객체는 다음의 속성과 값을 가집니다.

+ +
mark.name = "";
+mark.dept = "general";
+mark.projects = [];
+ +

mark 객체는 mark.__proto__로 연결되어 있는 원형의 객체로부터 이름(name)과 부서(dept)에 대한 값을 상속 받습니다. 근로자(WorkerBee) 생성자로부터 projects속성에 대한 값을 할당을 받습니다.이것들이 자바스크립트내에서 속성과 속성 값의 상속입니다. 이런 과정의 몇몇 세부 사항들은 Property inheritance revisited에서 다룹니다. 

+ +

이런 생성자들은 당신이 직접 인스턴스에만 해당 하는 값을 설정하도록 하지 않기때문에, 객체에 대한 이런 정보들은 일반적으로 적용됩니다. 근로자(WorkerBee)로부터 생성된 모든 새로운 객체들은 기본값이 적용된 속성 값들을 가지게 됩니다. 물론, 속성 값들을 변경할 수 있습니다. 아래처럼 특정 인스턴스에만 해당하는 값을 설정할 수 있습니다. 

+ +
mark.name = "Doe, Mark";
+mark.dept = "admin";
+mark.projects = ["navigator"];
+ +

속성 추가

+ +

자바스크립트에선, 실행 시점에 특정 객체에 속성들을 추가 할 수 있습니다.생성자 함수가 제공하는 속성외에 다른 속성을 추가할 수 있습니다. 특정 단일 객체에 속성을 추가하기 위해선, 다음과 같이 해당 객체에 값을 할당 하면 됩니다:

+ +
mark.bonus = 3000;
+
+ +

이렇게 하면 mark객체는 보너스(bonus)속성을 가지게 됩니다. 하지만 mark객체를 제외한 나머지 근로자(WorkerBee)객체들은 보너스 속성을 가지지 않습니다. 

+ +

만약 생성자 함수의 원형으로 사용되는 객체에 새로운 속성을 추가한다면,  해당 프로토타입 객체(prototype)의 속성을 상속받는 모든 객체에 해당 속성이 추가됩니다. 예를 들면, 전문분야(specialty)속성을 모든 직원 객체에 다음과 같은 구문으로 추가할 수 있습니다:

+ +
Employee.prototype.specialty = "none";
+
+ +

위의 구문을 실행한 직후, mark객체는 "none"이라는 값을 가지는 전문분야(specialty)속성을 가지게 됩니다.아래의 그림들은 해당 속성을 추가한 후 엔지니어(Engineer) 프로토타입에 대해 해당 속성을 재정의 했을 경우 각 객체에 미치는 영향을 보여줍니다.

+ +


+ 속성의 추가

+ +

좀 더 유연한 생성자들

+ +

지금까지 살펴 본 생성자 함수들은 인스턴스를 생성하면서 동시에 속성값을 지정할 수 없었습니다. 자바의 경우, 인스턴스를 생성 시 생성자에 인자들을 넘겨주어 인스턴스의 속성들을 초기화 할 수 있습니다. 다음의 예제 그림들은 자바처럼 인스턴스 생성 시 속성값을 설정하는 방법을 보여줍니다.

+ +


+ Specifying properties in a constructor, take 1

+ +

다음의 표는 자바와 자바스크립트 각각의 생성자와 객체에 대한 정의를 보여 줍니다. 

+ +
+

자바스크립트

+ +

자바

+
+ +
+
function Employee (name, dept) {
+  this.name = name || "";
+  this.dept = dept || "general";
+}
+
+ +
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;
+   }
+}
+
+
+ +
+
function WorkerBee (projs) {
+
+ this.projects = projs || [];
+}
+WorkerBee.prototype = new Employee;
+
+ +
public class WorkerBee extends Employee {
+   public String[] projects;
+   public WorkerBee () {
+      this(new String[0]);
+   }
+   public WorkerBee (String[] projs) {
+      projects = projs;
+   }
+}
+
+
+ +
+
+function Engineer (mach) {
+   this.dept = "engineering";
+   this.machine = mach || "";
+}
+Engineer.prototype = new WorkerBee;
+
+ +
public class Engineer extends WorkerBee {
+   public String machine;
+   public Engineer () {
+      dept = "engineering";
+      machine = "";
+   }
+   public Engineer (String mach) {
+      dept = "engineering";
+      machine = mach;
+   }
+}
+
+
+ +

자바스크립트의 속성값을 설정하는 방법은 기본값을 설정하기 위한 관용구를 사용합니다.

+ +
this.name = name || "";
+
+ +

자바스크립트의 OR 논리 연산자(||) 첫번째 인자를 평가합니다. 첫번째 인자가 참이면 첫번째 인자를 반환하고 그렇지 않은 경우는 두번째 인자를 반환합니다. 그러므로, 위의 코드는 name인자가 name 속성에 사용 가능한 값을 가지고 있는지 확인합니다. 확인 결과 name속성에 사용가능한 값을 가지고 있을 경우, 해당 값을 this.name에 설정하게 됩니다. 반대로 그렇지 않은 경우는 빈 문자열을 this.name에 설정합니다.얼핏 보면 헛갈리지만 보다 짧은 관용구를 사용하였습니다.

+ +
+

주의: 만약 인자로 false와 빈 문자열 값을 줄 경우 해당 구문은 예상한 대로 작동하지 않을 수 있습니다.

+
+ +

이런 정의들을 가지고, 객체의 인스턴스를 생성할때, 객체 자신만의 속성에 대한 값을 지정할 수 있습니다. 새로운 Engineer를 생성하기 위해서 다음과 같은 구문을 사용할 수 있습니다:

+ +
var jane = new Engineer("belau");
+
+ +

Jane의 속성들은 다음과 같습니다:

+ +
jane.name == "";
+jane.dept == "engineering";
+jane.projects == [];
+jane.machine == "belau"
+
+ +

위와 같은 코드 구문으로는 name과 같이 상속받은 속성에 대한 초기값을 지정할 수 없습니다.만약 상속 받은 속성의 초기값을 설정하고자 한다면, 생성자 함수의 코드를 변경해야 합니다.

+ +

지금까지, 원형 객체를 생성한 후, 그 새로운 객체 자신의 속성과 속성 값을 지정하는 것을 살펴 보았습니다. 프로토타입 체인상에서 해당 생성자가 상위 객체에 대한 생성자를 직접 호출 함으로써 더 많은 속성을 추가하도록 할 수 있습니다. 다음의 그림은 새로운 정의 방법을 보여 줍니다.

+ +


+ 생성자내에서 속성들 정의, 그림 2

+ +

그럼 좀 더 상세하게 생성자 내에서 속성들을 정의하는 것을 살펴 보겠습니다. 다음은 엔지니어(Engineer) 생성자의 새로운 정의입니다:

+ +
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +

다음과 같이 새로운 엔지니어(Engineer)객체를 생성할 수 있습니다:

+ +
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
+
+ +

다음과 같은 순서에 따라 객체를 생성하고 속성을 정의하게 됩니다:

+ +
    +
  1. new 연산자는 프로토타입 객체를 생성하고 생성된 객체의 __proto__속성을 Engineer.prototype으로 설정합니다.
    2. +
  2. new 연산자는 새로이 생성된 객체를 엔지니어(Engineer)생성자에 this 키워드의 값으로 전달합니다.
    3. +
  3. 생성자는 생성한 객체에 대한 base라는 새로운 속성을 생성하고 근로자(WorkerBee) 생성자의 값을 base 속성에 할당합니다. 이런 과정은 근로자(WorkerBee) 생성자를 엔지니어(Engineer)객체의 메서드로 만듭니다. base 속성의 이름은 그리 특별하지 않습니다. 다른 어떤 속성명을 사용해도 무방합니다. base 속성명은 단지 해당 속성의 목적을 환기시키기 위한 것입니다.
    4. +
  4. +

    생성자는 base 메서드에 필요한 인자들 ("Doe, Jane" and ["navigator", "javascript"])을 주어 호출합니다.명시적으로 생성자에서 사용한 "engineering"은 모든 엔지니어(Engineer)객체들이 상속받은 부서 속성에 대한 동일한 값을 가지며, 직원(Employee)으로부터 상속받은 값을 재정의 하는 것을 나타냅니다.

    +
    5. +
  5. base가 엔지니어(Engineer)의 메서드이기때문에 base메서드 내에서 this키워드를 스텝1에서 생성한 객체를 지칭하도록 해줍니다. 따라서, 근로자(WorkerBee) 함수는 차례대로 "Doe, Jane"과 "engineering" 인자를 직원(Employee)생성자에 전달합니다. 직원(Employee)생성자로부터 반환 시, 근로자(WorkerBee)함수는 남은 인자들을 프로젝트(projects)속성을 설정하기 위해 사용합니다. 
    6. +
  6. base메서드로부터 반환 시, 엔지니어(Engineer) 생성자는 해당 객체의 장비(machine)속성을 "belau"로 초기화 합니다.
    7. +
  7. 생성자로부터 반환 시, 새롭게 생성된 객체를 jane변수에 할당 합니다.
    8. +
+ +

엔지니어(Engineer) 생성자내에서 근로자(WorkerBee)생성자를 호출하면, 엔지니어(Engineer)에 대한 상송을 적절하게 설정할 수 도 있을 것이라고 생각할 수 있을 것입니다.하지만 그렇지 않습니다. 근로자(WorkerBee)생성자를 호출하는 것은 엔지니어(Engineer)객체로 하여금 호출되는 모든 생성자 함수내에서 열거된 속성들을 가지고도록 보장합니다.그러나, 나중에 직원(Employee)혹은 근로자(WorkerBee) 원형에 속성을 추가한다면, 엔지니어(Engineer)객체에 의해 추가된 속성들은 상속이 되지 않습니다. 예를 들어, 아래와 같은 구문을 작성하였다고 가정합니다:

+ +
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";
+
+ +

jane객체는 전문분야(specialty)속성을 상속받지 않습니다.

+ +
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";
+
+ +

이제 jane객체의 전문분야(specialty)속성은 "none"이 되었습니다.

+ +

call() 혹은 apply() 메서드를 사용는 것은 상속을 구현하는 또 다른 방법입니다. 다음의 두 예제는 동일한 결과를 보여줍니다. 

+ +
+
function Engineer (name, projs, mach) {
+  this.base = WorkerBee;
+  this.base(name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+ +
function Engineer (name, projs, mach) {
+  WorkerBee.call(this, name, "engineering", projs);
+  this.machine = mach || "";
+}
+
+
+ +

base를 사용하지 않고 구현을 하기 때문에, call() 메서드를 사용하여 상속을 구현하는 것이 보다 깔끔합니다.

+ +

속성 상속의 재고

+ +

이전 절에서 자바스크립트의 생성자와 원형(prototype)이 어떤 방식으로 상속과 객체의 계층 구조를 제공하는지를 살펴 보았습니다. 이번장에서는 이전 절에서 반드시 명백하게 짚고 넘어가지 않은 일부 미묘한 점들에 대해 살펴보겠습니다.

+ +

객체 자신의 값과 상속받은 값

+ +

이번 장에서 이미 설명된 것 처럼, 객체의 속성에 접근할 때, 자바스크립트는 아래와 같은 절차를 따릅니다.

+ +
    +
  1. 해당 속성에 대한 객체 자신의 값이 있는지 확인하고 있으면 그 값을 반환한다.
    2. +
  2. 객체 자신의 값이 없으면 __proto__ 속성을 사용하여 프로토타입 체인을 확인한다.
    3. +
  3. 프로토타입 체인상의 특정 객체가 해당 속성에 대한 값을 가지고 있다면 해당 객체의 값을 반환한다.
    4. +
  4. 해당 속성을 가진 어떤 객체도 발견하지 못하면 해당 객체는 그 속성을 가지고 있지 않은 것으로 판단한다.
    5. +
+ +

이런 단계들의 결과는 생성자 및 프로토타입 체인등의 것들을 어떻게 정의 하느냐에 따라 달라집니다. 아래와 같은 원래의 예제는 이런 정의들을 가지고 있습니다:

+ +
function Employee () {
+  this.name = "";
+  this.dept = "general";
+}
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+ +

이런 정의들을 가지고, amy라는 근로자(WorkerBee)인스턴스를 아래와 같이 생성하였다고 가정합니다.

+ +
var amy = new WorkerBee;
+
+ +

amy객체는 프로젝트라는 자신만의 속성을 가집니다.이름과 부서 속성들은 amy 자신의 속성이 아닌 amy객체의 __proto__속성을 통해 가지고 온 속성들입니다. 따라서 amy는 이런 속성들의 값을 가지게 됩니다.

+ +
amy.name == "";
+amy.dept == "general";
+amy.projects == [];
+
+ +

직원(Employee)과 연관되어 있는 프로토타입내의 이름 속성의 값을 아래와 같이 변경하였다고 가정합니다.

+ +
Employee.prototype.name = "Unknown"
+
+ +

얼핏보기에, 새로운 값이 모든 직원 인스턴스에 적용이 될것으로 예상하겠지만 그렇지 않습니다. 

+ +

직원 객체의 인스턴스를 생성할때, 해당 인스턴스는 이름 속성에 대해 자신이 가지고 있는 값(빈 문자열)을 취하게 됩니다.이것이 의미하는 것은 새로운 직원 객체를 생성하여 근로자(WorkerBee)의 프로토타입에 설정을 할때, WorkerBee.prototype이 이름 속성에 대한 자신만의 값을 가지고 있다는 것입니다.그러므로, amy객체(근로자 인스턴스)의 이름 속성에 대해 검색할때, WorkerBee.prototype내에서 이름 속성에 대한 amy 객체 자신의 값을 찾게됩니다. 그렇기때문에 Employee.prototype까지의 프로토타입 체인을 검색하지 않게 됩니다.

+ +

실행시에 객체의 속성 값을 변경하고 새로운 값이 모든 하위 객체들에게도 적용되도록 할려면, 객체의 생성자함수에서는 속성을 정의할 수 없습니다. 대신에, 생성자와 연결된 프로토타입에 추가할 수 있습니다. 예를 들어, 이전의 코드를 아래와 같이 변경하였다고 가정합니다:

+ +
function Employee () {
+  this.dept = "general";
+}
+Employee.prototype.name = "";
+
+function WorkerBee () {
+  this.projects = [];
+}
+WorkerBee.prototype = new Employee;
+
+var amy = new WorkerBee;
+
+Employee.prototype.name = "Unknown";
+
+ +

이 경우 amy 객체의 이름 속성의 값은 "Unknown"이 됩니다.

+ +

위의 예제에서처럼, 객체 생성 시에 객체의 속성에 대한 기본 값을 설정하고 실행 시에 해당 속성의 값을 변경하기를 원한다면, 해당 속성들을 생성자 함수 자체안에가 아닌 생성자의 프로토타입에 설정 하여야 합니다.

+ +

인스턴스 관계 결정

+ +

자바스크립트에서의 속성 검색은 객체 자신의 속성들을 먼저 살펴보고 해당 속성명을 찾지 못할 경우, 객체의 특별한 속성인 __proto__내에서 찾게 됩니다. 이런 검색은 재귀적으로 진행되며, 이런 과정을 "프로토타입 체인에서의 검색"이라고 합니다.

+ +

특별한 속성인 __proto__객체가 생성이 될때 설정이 됩니다. __proto__속성은 생성자의 프로토타입 속성의 값으로 설정이 됩니다. 따라서 new Foo() 표현식은 __proto__ == Foo.prototype인 객체를 생성합니다. 결과적으로 Foo.prototype의 속성들에 대한 변경은 new Foo() 표현식으로 생성한 모든 객체에 대한 속성 검색을 변경하게 됩니다.

+ +

모든 객체는 __proto__라는 객체 속성을 가집니다.(예외: Object). 모든 함수들은 prototype이라는 객체 속성을 가집니다. 따라서 객체들은 '프로토타입 상속'에 의해 다른 객체들과의 관계를 가지게 됩니다.객체의 __proto__속성과 함수의 prototype 객체를 비교하여 상속을 테스트 해볼 수 있습니다. 자바스크립트는 특정 객체가 함수 prototype으로부터 상속 받는 객체일 경우 참(true)를 반환하는  instanceof라는 연산자를 제공합니다. 예를 들면,

+ +
var f = new Foo();
+var isTrue = (f instanceof Foo);
+ +

Inheriting properties에 나오는 예제와 동일한 정의들을 작성해 놓았을 경우, 보다 상세한 예제는 아래와 같습니다.엔지니어(Engineer)객체를 아래와 같이 생성합니다:

+ +
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
+
+ +

생성된 객체를 가지고 아래와 같은 구문을 실행할 경우 각 구문에 대한 결과는 모두 참(true)입니다.

+ +
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;
+
+ +

주어진 이런 상황에서, instanceOf를 다음과 같이 직접 작성할 수 있을 것입니다:

+ +
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;
+}
+
+ +
+

주의: 위의 구현내용은 최신 버전의 자바스크립트에서 XML객체들이 표현되는 방법의 특질을 해결하기 위해 해당 객체의 타입이 "xml"인지 확인합니다. 핵심적인 세부 사항을 확인하려면 {{ bug(634150) }}를 참조하세요.

+
+ +

위의 instanceOf함수를 사용하면 아래의 표현들은 모두 참(true)입니다:

+ +
instanceOf (chris, Engineer)
+instanceOf (chris, WorkerBee)
+instanceOf (chris, Employee)
+instanceOf (chris, Object)
+
+ +

하지만 아래의 표현식은 거짓(false)가 됩니다:

+ +
instanceOf (chris, SalesPerson)
+
+ +

생성자내에서의 전역 정보

+ +

생성자를 생성할때, 생성자내에서 전역 정보를 설정할 경우, 주의를 해야 합니다. 예를 들어, 각각의 새로운 직원에게 자동으로 고유한 ID값을 할당하기를 원한다고 했을 때, 다음과 같은 직원(Employee) 정의를 사용할 수 있을 것입니다:

+ +
var idCounter = 1;
+
+function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   this.id = idCounter++;
+}
+
+ +

이런 정의 내용을 가지고, 새로운 직원을 생성했을 때, 생성자는 다음의 고유한 ID값을 새로운 직원객체에 할당하고 전역 ID 카운터를 증가 시킵니다. 따라서 다음과 같은 구문으로 각각의 객체를 생성한다면, 결과는 victoria.id는 1 그리고 harry.id는 2가 됩니다:

+ +
var victoria = new Employee("Pigbert, Victoria", "pubs")
+var harry = new Employee("Tschopik, Harry", "sales")
+
+ +

얼핏보면 괜찮아 보입니다. 하지만 이유를 불문하고 직원 객체가 생성될때마다 idCounter는 증가분을 가지게 됩니다.이번장에서 나온 예제에서처럼 전체 직원(Employee) 객체의 계층 구조를 생성하였다면, 프로토타입을 설정할때마다 직원 생성자는 매번 호출 됩니다.다음과 같은 코드를 작성하였다고 가정합니다:

+ +
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");
+
+ +

여기서 생략된 정의가 base속성을 가지고 해당 생성자를 프로토타입 체인내의 상위 생성자들을 호출한닥고 좀 더 가정하면, 이런 경우, 생성된 mac객체의 id값은 5가 됩니다.

+ +

어플리케이셔네 따라, 카운터가 이렇게 추가적으로 증가된 것은 문제가 될 수도 그렇지 않을 수 도 있습니다. 카운터에 정확한 값이 설정되기를 원한다면, 사용가능한 해결적은 아래와 같은 생성자를 대신 사용하는 것입니다:

+ +
function Employee (name, dept) {
+   this.name = name || "";
+   this.dept = dept || "general";
+   if (name)
+      this.id = idCounter++;
+}
+
+ +

prototype으로 사용할 직원 인스턴스를 생성할 때, 생성자에 인자들을 주어선 안됩니다. 이 생성자 정의를 사용하여, 인자들을 주지 않을 경우, 생성자는 id에 값을 할당하지 않으며 카운터를 갱신하지 않습니다. 따라서, id값을 가지는 직원 객체에 대해, 반드시 해당 직원의 이름을 명시해야 합니다. 이 예제의 경우 mac인스턴스의 id값은 1이 됩니다.

+ +

다중상속 금지

+ +

몇몇 객체 지향언어들은 다중 상속을 허용합니다. 그것은, 관련이 없는 부모 객체들로 부터 속성들과 값들을 상속 받을 수 있는 것을 말합니다. 자바스크립트는 다중 상속을 지원하지 않습니다.

+ +

속성 값의 상속은 속성에 대한 값을 찾기 위한 프로토타입 체인을 검색에 의해 실행 시점에 이루어 집니다. 하나의 객체는 오로지 하나의 결합된 prototype만을 가지기 때문에, 자바스크립트는 동적으로 하나 이상의 프로토타입 체인으로 부터 상속을 할 수 없습니다. 

+ +

자바스크립트에서, 하나 이상의 다른 생성자 함수를 호출하는 생성자를 사용할 수 있습니다. 이것은 다중 상속처럼 보여질 수 있습니다. 예를 들어, 다음과 같은 구문들을 살펴보세요:

+ +
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")
+
+ +

WorkerBee의 정의는 이번 장의 이전에 사용된 것과 동일하다고 가정합니다.이런 경우, dennis객체는 다음과 같은 속성들을 가지게 됩니다:

+ +
dennis.name == "Doe, Dennis"
+dennis.dept == "engineering"
+dennis.projects == ["collabra"]
+dennis.machine == "hugo"
+dennis.hobby == "scuba"
+
+ +

 따라서 dennis객체는 Hobbyist 생성자로부터 취미(hobby)속성을 받아 오지 않습니다. 그런데 Hobbyist생성자의 프로토타입에 속성을 추가 했다고 가정하면 

+ +
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
+
+ +

dennis객체는 새로이 추가된 속성을 상속받지 않습니다.

+ +
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git a/files/ko/web/javascript/guide/functions/index.html b/files/ko/web/javascript/guide/functions/index.html new file mode 100644 index 0000000000..cf9d928eb3 --- /dev/null +++ b/files/ko/web/javascript/guide/functions/index.html @@ -0,0 +1,658 @@ +--- +title: 함수 +slug: Web/JavaScript/Guide/함수 +translation_of: Web/JavaScript/Guide/Functions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
+ +

함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.

+ +

세부 사항에 대해서는 exhaustive reference chapter about JavaScript functions를 참조하세요.

+ +

함수 정의

+ +

함수 선언

+ +

함수 정의(또는 함수 선언)는 다음과 같은 함수 키워드로 구성되어 있습니다:

+ +
    +
  • 함수의 이름
    • +
  • 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록 
    • +
  • 중괄호 { } 안에서 함수를 정의하는 자바스크립트 표현
    • +
+ +

예를 들어, 다음의 코드는 square라는 간단한 함수를 정의하였습니다:

+ +
function square(number) {
+  return number * number;
+}
+ +

함수 square은 number라는 하나의 매개변수를 가집니다. 이 함수는 인수 (즉, number) 자체를 곱하여 반환하는 하나의 문장으로 구성되어 있습니다. return 문은 함수에 의해 반환된 값을 지정합니다.

+ +
return number * number;
+ +

기본 자료형인 매개변수(number와 같은)는 값으로 함수에 전달됩니다; 즉, 값이 함수로 전달됩니다. 그러나 함수가 매개변수의 값을 바꾸더라도 이는 전역적으로 또는 함수를 호출하는 곳에는 반영되지 않습니다.

+ +

만약 여러분이 매개변수로 (예: {{jsxref("Array")}}이나 사용자가 정의한 객체와 같이 기본 자료형이 아닌 경우)를 전달하거나 함수가 객체의 속성을 변하게 하는 경우, 다음의 예처럼 그 변화는 함수 외부에서 볼 수 있습니다:

+ +
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에서 변경되었습니다.)
+
+ +

함수 표현식

+ +

위에서 함수 선언은 구문적인 문(statement)이지만, 함수 표현식( function expression)에 의해서 함수가 만들어 질 수도 있습니다. 이 같은 함수를 익명이라고 합니다. 이 말은 모든 함수가 이름을 가질 필요는 없다는 것을 뜻합니다. 예를 들어, 함수 square은 다음과 같이 정의 될 수도 있습니다:

+ +
var square = function(number) { return number * number };
+var x = square(4) // x 의 값은 16 입니다.
+ +

하지만, 함수 표현식에서 함수의 이름을 지정 할 수 있으며, 함수내에서 자신을 참조하는데 사용되거나, 디버거 내 스택 추적에서 함수를 식별하는 데 사용될 수 있습니다.

+ +
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
+
+console.log(factorial(3));
+
+ +

함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리합니다. 다음 예는 첫 번째 인자로로 함수를, 두 번째 인자로 배열을 받는 map 함수를 보여줍니다.

+ +
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;
+}
+
+ +

다음 코드에서, 함수 표현식으로 정의된 함수를 인자로 받아, 2번 째 인자인 배열의 모든 요소에 대해 그 함수를 실행합니다.

+ +
function map(f, a) {
+  var result = []; // Create a new Array
+  var i; // Declare variable
+  for (i = 0; i != a.length; i++)
+    result[i] = f(a[i]);
+      return result;
+}
+var f = function(x) {
+   return x * x * x;
+}
+var numbers = [0, 1, 2, 5, 10];
+var cube = map(f,numbers);
+console.log(cube);
+ +

함수는 [0, 1, 8, 125, 1000] 을 반환합니다.

+ +

JavaScript에서 함수는 조건에 의해 정의될 수 있습니다. 예를 들어, 다음 함수 정의는 오직 num이 0일 때 경우에 만 myFunc을 정의합니다.

+ +
var myFunc;
+if (num == 0){
+  myFunc = function(theObject) {
+    theObject.make = "Toyota"
+  }
+}
+ +

여기에 기술된 바와 같이 함수를 정의하는것에 더하여 {{jsxref("eval", "eval()")}} 과 같이 런타임에 문자열에서 함수들을 만들기위해 {{jsxref("Function")}} 생성자를 사용할 수 있습니다.

+ +

객체내의 한 속성이 함수인 경우 메서드라고 합니다. Working with objects에서 객체와 방법에 대해 자세히 알아보세요.

+ +

함수 호출

+ +

함수를 정의하는 것은 함수를 실행하는 것이 아닙니다. 함수를 정의하는 것은 간단히 함수의 이름을 지어주고, 함수가 호출될 때 무엇을 할지 지정 해주는 것입니다. 사실 함수를 호출하는 것은 나타나있는 매개변수를 가지고 지정된 행위를 수행하는 것입니다. 예를 들어, 만약 여러분이 함수 square를 정의한다면, 함수를 다음과 같이 호출할 수 있습니다.

+ +
square(5);
+
+ +

위의 문장은 5라는 인수를 가지고 함수를 호출합니다. 함수는 이 함수의 실행문을 실행하고 값 25를 반환합니다.

+ +

함수는 호출될 때 범위 내에 있어야 합니다. 그러나 함수의 선언은 이 예에서와 같이, 호이스팅 될 수 있습니다. (코드에서 호출 아래에 선언문이 있습니다.):

+ +
console.log(square(5));
+/* ... */
+function square(n) { return n*n }
+
+ +

함수의 범위는 함수가 선언된 곳이거나, 전체 프로그램 에서의 최상위 레벨(전역)에 선언된 곳입니다.

+ +
+

비고: 위에 구문을 사용하여 함수를 정의하는 경우에만 작동합니다 (즉, function funcName(){} ). 아래와 같은 코드는 작동되지 않습니다. 이것이 의미하는 바는, 함수 호이스팅은 오직 함수 선언과 함께 작동하고, 함수 표현식에서는 동작하지 않습니다.

+
+ +
console.log(square);   // square는 초기값으로 undefined를 가지고 호이스트된다.
+console.log(square(5));  // TypeError: square는 함수가 아니다.
+square = function (n) {
+  return n * n;
+}
+
+ +

함수의 인수는 문자열과 숫자에 제한되지 않습니다. 여러분은 함수에 전체 객체를 전달할 수 있습니다. show_props() 함수(Working with objects에서 정의된)는 인수로 객체를 취하는 함수의 예입니다.

+ +

함수는 자신을 호출할 수 있습니다. 예를 들어, 팩토리얼을 재귀적으로 계산하는 함수가 있습니다:

+ +
function factorial(n){
+  if ((n == 0) || (n == 1))
+    return 1;
+  else
+    return (n * factorial(n - 1));
+}
+
+ +

여러분은 다음과 같이 1부터 5까지의 팩토리얼을 계산할 수 있습니다.

+ +
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
+
+ +

함수를 호출하는 다른 방법들이 있습니다. 함수를 동적 호출해야 하거나, 함수의 인수의 수가 달라져야 하거나, 함수 호출의 맥락이 런타임에서 결정된 특정한 객체로 설정될 필요가 있는 경우가 자주 있습니다. 함수가 그 자체로 객체이고 이들 객체는 차례로 메서드를({{jsxref("Function")}} 객체를 참조) 가지고 있습니다. 이들 중 하나인 {{jsxref("Function.apply", "apply()")}} 메서드는 이러한 목표를 달성하기 위해 사용될 수 있습니다.

+ +

함수의 범위

+ +

함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에, 함수 외부의 어느 곳에서든 액세스할 수 없습니다. 그러나, 함수가 정의된 범위 내에서 정의된 모든 변수나 함수는 액세스할 수 있습니다. 즉, 전역함수는 모든 전역 변수를 액세스할 수 있습니다. 다른 함수 내에서 정의 된 함수는 부모 함수와 부모 함수가 액세스 할 수 있는 다른 변수에 정의된 모든 변수를 액세스할 수 있습니다.

+ +
// 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"
+
+ +

범위와 함수 스택

+ +

재귀

+ +

함수는 자신을 참조하고 호출할 수 있습니다. 함수가 자신을 참조하는 방법은 세 가지가 있습니다.

+ +
    +
  1. 함수의 이름
    2. +
  2. arguments.callee
    3. +
  3. 함수를 참조하는 범위 내 변수
    4. +
+ +

예를 들어, 다음 함수의 정의를 고려해보세요.

+ +
var foo = function bar() {
+   // statements go here
+};
+
+ +

함수 본문 내에서 다음은 모두 동일합니다.

+ +
    +
  1. bar()
    2. +
  2. arguments.callee()
    3. +
  3. foo()
    4. +
+ +

자신을 호출하는 함수를 재귀 함수라고 합니다. 어떤 면에서, 재귀는 루프와 유사합니다. 둘 다 동일한 코드를 여러 번 실행하고, 조건(무한 루프를 방지하거나, 이 경우에는 오히려 무한 재귀하는)을 요구합니다. 예를 들어, 다음 루프는:

+ +
var x = 0;
+while (x < 10) { // "x < 10" is the loop condition
+   // do stuff
+   x++;
+}
+
+ +

아래와 같이 재귀 함수와 그 함수에 대한 호출로 변환될 수 있습니다.

+ +
function loop(x) {
+  if (x >= 10) // "x >= 10" 는 탈출 조건 ("!(x < 10)"와 동등)
+    return;
+  // do stuff
+  loop(x + 1); // the recursive call
+}
+loop(0);
+
+ +

그러나 일부 알고리즘은 단순 재귀 루프로 변환할 수 없습니다. 예를 들어, 트리 구조(가령, DOM)의 모든 노드를 얻는 것은 재귀를 사용하여 보다 쉽게 할 수 있습니다:

+ +
function walkTree(node) {
+  if (node == null) //
+    return;
+  // do something with node
+  for (var i = 0; i < node.childNodes.length; i++) {
+    walkTree(node.childNodes[i]);
+  }
+}
+
+ +

함수  loop 와 비교하여, 각 재귀 호출 자체는 여기에 많은 재귀 호출을 만듭니다.

+ +

재귀적 알고리즘은 비 재귀적인 알고리즘으로 변환 할 수 있습니다. 그러나 변환된 알고리즘이 훨씬 더 복잡하며 그렇게 함으로써 스택의 사용을 요구합니다. 사실, 재귀 자체가 함수 스택을 사용 합니다.

+ +

스택형 동작은 다음의 예에서 볼 수 있습니다:

+ +
function foo(i) {
+  if (i < 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
+ +

중첩된 함수와 클로저

+ +

여러분은 함수 내에 함수를 끼워 넣을 수 있습니다. 중첩 된 (내부) 함수는 그것을 포함하는 (외부) 함수와 별개입니다. 그것은 또한 클로저를 형성합니다. 클로저는 그 변수(“폐쇄”라는 표현)를 결합하는 환경을 자유롭게 변수와 함께 가질 수 있는 표현(전형적인 함수)입니다.

+ +

중첩 함수는 클로저이므로, 중첩된 함수는 그것을 포함하는 함수의 인수와 변수를 “상속”할 수 있는 것을 의미합니다. 즉, 내부 함수는 외부 함수의 범위를 포함합니다.

+ +

요약하면:

+ +
    +
  • 내부 함수는 외부 함수의 명령문에서만 액세스할 수 있습니다.
    • +
+ +
    +
  • 내부 함수는 클로저를 형성합니다: 외부 함수는 내부 함수의 인수와 변수를 사용할 수 없는 반면에, 내부 함수는 외부 함수의 인수와 변수를 사용할 수 있습니다.
    • +
+ +

다음 예는 중첩된 함수를 보여줍니다:

+ +
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
+
+ +

내부 함수는 클로저를 형성하기 때문에, 여러분은 외부 함수를 호출하고, 외부 및 내부 함수 모두에 인수를 지정할 수 있습니다.

+ +
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
+
+ +

변수의 보존

+ +

중첩된 내부 함수가 반환될 때 외부 함수의 인수 x가 보존된다는 점을 알 수 있습니다. 클로저는 그것을 참조하는 모든 범위에서 인수와 변수를 보존해두어야 합니다. 매번 호출될 때마다 잠재적으로 다른 인수를 제공할 수 있기 때문에, 클로저는 외부 함수에 대하여 매번 새로 생성됩니다. 메모리는 그 무엇도 내부 함수에 접근하지 않을 때만 해제됩니다.

+ +

변수의 보존은 일반 객체에서 참조를 저장해두는 것과 다르지 않지만, 사용자가 직접 참조를 설정하는 것이 아니고 자세히 들여다볼 수 없어서 종종 명확하지 않습니다.

+ +

다중 중첩 함수

+ +

함수는 다중 중첩될 수 있습니다. 즉, 함수 (C)를 포함하는 함수 (B)를 포함하는 함수 (A). 여기에서 두 함수 B와 C는 모두 클로저를 형성합니다. 그래서 B는 A를 엑세스할 수 있고, C는 B를 액세스 할 수 있습니다. 이와 같이, 클로저는 다중 범위를 포함 할 수 있습니다; 그들은 재귀적으로 그것을 포함하는 함수의 범위를 포함합니다. 이것을 범위 체이닝이라 합니다.(그것을 “체이닝”이라 하는 이유는 추후에 설명할 것입니다.)

+ +

다음 예를 살펴 보겠습니다:

+ +
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)
+
+ +

이 예에서, C는 B의 y와 A의 x를 엑세스 합니다. 이 때문에 수행할 수 있습니다:

+ +
    +
  1. B는 A를 포함하는 클로저를 형성합니다. 즉, B는 A의 인수와 변수를 엑세스할 수 있습니다.
    2. +
  2. C는 B를 포함하는 클로저를 형성합니다.
    3. +
  3. B의 클로저는 A를 포함하고, C의 클로저는 A를 포함하기 때문에, C는 B와 A의 인수와 변수를 엑세스할 수 있습니다. 즉, 순서대로 C는 A와 B의 범위를 체이닝합니다.
    4. +
+ +

그러나 역은 사실이 아닙니다. A는 C에 접근 할 수 없습니다. 왜냐하면 A는 B의 인수와 변수(C는 B변수)에 접근할수 없기 때문입니다. 그래서 C는 B에게만 사적으로 남게됩니다.

+ +

이름 충돌

+ +

클로저의 범위에서 두 개의 인수 또는 변수의 이름이 같은 경우, 이름 충돌이 있습니다. 더 안쪽 범위가 우선순위를 갖습니다. 그래서 가장 바깥 범위는 우선순위가 가장 낮은 반면에, 가장 안쪽 범위는 가장 높은 우선순위를 갖습니다. 이것이 범위 체인(scope chaini)입니다. 체인에서 첫번째는 가장 안쪽 범위이고, 마지막은 가장 바깥 쪽의 범위입니다. 다음 사항을 고려하세요:

+ +
function outside() {
+  var x = 10;
+  function inside(x) {
+    return x;
+  }
+  return inside;
+}
+result = outside()(20); // returns 20 instead of 10
+
+ +

이름 충돌이 x를 반환하는 문과 내부의 매개 변수 x와 외부 변수 x 사이에서 발생합니다. 여기에서 범위 체이닝은 {내부, 외부, 전역 객체}입니다. 따라서 내부의 x는 외부의 x보다 높은 우선순위를 갖게 되고, 20(내부의 x)이 10(외부의 x) 대신에 반환됩니다.

+ +

클로저

+ +

클로저는 자바스크립트의 강력한 기능 중 하나입니다. 자바스크립트는 함수의 중첩(함수 안에 함수를 정의하는것)을 허용하고, 내부함수가 외부 함수 안에서 정의된 모든 변수와 함수들을 완전하게 접근 할 수 있도록 승인해줍니다.(그리고 외부함수가 접근할수 있는 모든 다른 변수와 함수들까지) 그러나 외부 함수는 내부 함수 안에서 정의된 변수와 함수들에 접근 할 수 없습니다. 이는 내부 함수의 변수에 대한 일종의 캡슐화를 제공합니다. 또한, 내부함수는 외부함수의 범위에 접근할 수 있기 때문에, 내부 함수가 외부 함수의 수명을 초과하여 생존하는 경우, 외부함수에서 선언된 변수나 함수는 외부함수의 실행 기간보다 오래갑니다. 클로저는 내부 함수가 어떻게든 외부 함수 범위 밖의 모든 범위에서 사용 가능해지면 생성됩니다.

+ +
var pet = function(name) {   // 외부 함수는 'name'이라 불리는 변수를 정의합니다.
+  var getName = function() {
+    return name;             // 내부 함수는 외부 함수의 'name' 변수에 접근합니다.
+  }
+  return getName;            // 내부 함수를 리턴함으로써, 외부 범위에 노출됩니다.
+},
+myPet = pet("Vivie");
+
+myPet();                     // "Vivie"로 리턴합니다.
+
+ +

클로저는 위 코드보다 더 복잡해 질 수도 있습니다. 외부 함수의 내부 변수를 다루는 메서드를 포함한 객체도 반환될 수도 있습니다.

+ +
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" && (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
+
+ +

위 코드에서, 외부 함수의 'name' 이란 변수는 내부 함수에서 접근이 가능합니다. 그리고 그 내장 함수를 통하는 방법 말고는 내부 변수로 접근할 수 없습니다. 내부 함수의 내부 변수는 외부 인수와 변수를 안전하게 저장합니다. 내부 변수는 내부 함수가 작동하기 위해 '지속적'이고 '갭슐화된' 데이터를 보유합니다. 함수는 변수로 할당되거나, 이름을 가질 필요가 없습니다.

+ +
var getCode = (function(){
+  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
+
+  return function () {
+    return secureCode;
+  };
+})();
+
+getCode();    // Returns the secureCode
+
+ +

그러나 클로저를 쓰면서 조심해야 할 위험이 많이 있습니다. 만약 내부 함수가 외부 함수의 범위에 있는 이름과 같은 변수를 정의하였을 경우, 다시는 외부 함수 범위의 변수를 참조(접근)할 방법이 없습니다.

+ +
var createPet = function(name) {  // 외부 함수가 "name" 이라는 변수를 정의하였다
+  return {
+    setName: function(name) {    // 내부 함수 또한 "name" 이라는 변수를 정의하였다
+      name = name;               // ??? 어떻게 우리는 외부 함수에 정의된 "name"에 접근할까???
+    }
+  }
+}
+
+ +

인수(arguments) 객체 사용하기

+ +

함수의 인수는 배열과 비슷한 객체로 처리가 됩니다. 함수 내에서는, 전달 된 인수를 다음과 같이 다룰 수 있습니다. :

+ +
arguments[i]
+
+ +

i 는 0 으로 시작하는 순서 번호입니다. 따라서 함수에 전달된 첫 번째 인수는 arguments[0] 입니다. 총 인수의 개수는 arguments.length 에서 얻을 수 있습니다.

+ +

인수(arguments) 객체를 이용하면, 보통 함수에 정의된 개수보다 많은 인수를 넘겨주면서 함수를 호출할 수 있습니다. 이것은 얼마나 많은 인수가 함수로 넘겨질지 모르는 상황에서 유용합니다. arguments.length를 함수에 실제로 넘겨받은 인수의 수를 알아낼 때 사용할 수 있고 , 각각의 인수에 인수(arguments) 객체를  이용하여 접근 할 수 있습니다.

+ +

예를 들어, 몇 개의 문자열을 연결하는 함수를 생각해 봅시다. 이 함수의 유일한 형식 인수는 각 문자열을 구분해주는 문자를 나타내는 문자열입니다 . 이 함수는 다음과 같이 정의됩니다:

+ +
function myConcat(separator) {
+   var result = ""; // 리스트를 초기화한다
+   var i;
+   // arguments를 이용하여 반복한다
+   for (i = 1; i < arguments.length; i++) {
+      result += arguments[i] + separator;
+   }
+   return result;
+}
+
+ +

어떤 개수의 인수도 이 함수로 넘겨줄 수 있고, 이 함수는 각각의 인수를 하나의 문자열 "리스트" 로 연결합니다. :

+ +
// 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");
+
+ +
+

Note: 인수(arguments) 객체는 배열과 닮은 것이지 배열이 아닙니다. 인수(arguments) 객체는 번호 붙여진 인덱스와 길이 속성을 가지고 있다는 점에서 배열과 닮은 것입니다. 인수(arguments) 객체는 배열을 다루는 모든 메서드를 가지고 있지 않습니다.

+
+ +

더 자세한 정보를 얻고 싶으면 자바스크립트 참조문의 {{jsxref("Function")}}객체에 대하여 보세요.

+ +

함수의 매개변수

+ +

 ECMAScript 2015와 함께 시작된,두 종류의 매개변수가 있습니다 : 디폴트 매개변수 , 나머지 매개변수.

+ +

디폴트 매개변수

+ +

자바스크립트에서, 함수의 매개변수는 undefined 가 기본으로 설정됩니다. 그러나, 어떤 상황에서는 다른 값을 기본값으로 가진 것이 유용할 때가 있습니다. 이때가 디폴트 매개변수가 도움을 줄 수 있는 상황입니다.

+ +

옛날엔, 기본값을 설정하는 보편적인 전략은 함수의 본문에서 매개변수 값을 테스트하여 그 값이 undefined 인 경우에 값을 할당하는 것이었습니다. 다음과 같은 예제에서, 함수호출 시 b 매개변수에 아무 값을 주지 않으면, a*b 계산 시 b 매개변수의 값은 undefined 일 것이므로 multiply 함수 호출은 NaN을 리턴할 것입니다. 그러나 이런 것은 이 예제의 2번째 줄에서 걸립니다:

+ +
function multiply(a, b) {
+  b = typeof b !== 'undefined' ?  b : 1;
+
+  return a*b;
+}
+
+multiply(5); // 5
+
+ +

디폴트 매개변수와 함께라면, 함수 본문에서 검사하는 부분은 필요가 없습니다. 이제 , 함수 머리에서 b 의 기본값에 간단히 1을 넣어주면 됩니다:

+ +
function multiply(a, b = 1) {
+  return a*b;
+}
+
+multiply(5); // 5
+ +

더 자세한 내용을 보고 싶으시면,  default parameters 문서를 참조하세요.

+ +

나머지 매개변수

+ +

 나머지 매개변수 구문을 사용하면 배열로 불확실한 개수의 인수를 나타낼 수 있습니다. 이 예제에서, 우리는 나머지 매개변수를 2번째 인수부터 마지막 인수까지 얻기 위하여 사용하였습니다. 그리고 우리는 첫번째 값으로 나머지 매개변수에 곱하였습니다. 이 예제는 다음 섹션에서 소개할  화살표(arrow) 함수 입니다.

+ +
function multiply(multiplier, ...theArgs) {
+  return theArgs.map(x => multiplier * x);
+}
+
+var arr = multiply(2, 1, 2, 3);
+console.log(arr); // [2, 4, 6]
+ +

화살표 함수

+ +

 화살표 함수 표현 (뚱뚱한 화살표(fat arrow) 함수라고 알려진)은 함수 표현과 비교하였을때 짧은 문법을 가지고 있고 사전적으로 this 값을 묶습니다. 화살표 함수는 언제나 익명입니다. hacks.mozilla.org 블로그 포스트 "ES6 In Depth: Arrow functions" 를 참조하세요.

+ +

화살표  함수 소개에 영향을 주는 두 요소: 더 짧은 함수와 바인딩 되지않은 this.

+ +

더 짧은 함수

+ +

어떤 함수적 패턴에서는, 더 짧은 함수가 환영받습니다. 다음을 비교해 보세요:

+ +
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 => s.length );
+
+console.log(a3); // logs [8, 6, 7, 9]
+ +

사전적 this

+ +

화살표 함수에서, 모든 new함수들은  그들의  this 값을 정의합니다 (생성자로서의 새로운 객체, 정의되지 않은 strict mode의 함수 호출,   함수가 "object method"로 호출했을때의 context object ,등등.). 이런 것은 객체지향 프로그래밍 스타일에서 짜증을 불러 일으킵니다.

+ +
function Person() {
+  // The Person() constructor defines `this` 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();
+ +

IECMAScript 3/5 에서는, 이 문제는 this 안의 값을 뒤덮을 수 있는변수에 할당하면서 고쳐졌습니다.

+ +
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);
+}
+ +

또는, 적절한 this 값이 growUp() 함수에 전달되도록, 바인딩된 함수가 생성될 수 있습니다.

+ + + +

화살표 함수에는 this;가 없습니다. 화살표 함수를 포함하는 객체 값이 사용됩니다. 따라서 다음 코드에서 setInterval에 전달 된 함수 내의 this 값은 화살표 함수를 둘러싼 함수의 this와 같은 값을 갖습니다.

+ +
function Person() {
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this| properly refers to the person object
+  }, 1000);
+}
+
+var p = new Person();
+ +

미리 정의된 함수들

+ +

자바스크립트에는 최고 등급의 몇가지 내장함수가 있습니다:

+ +
+
{{jsxref("Global_Objects/eval", "eval()")}}
+
+

eval() 메소드는 문자열로 표현된 자바스크립트 코드를 수행합니다.

+
+
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
+
+

uneval() 메소드는  {{jsxref("Object")}}의 소스코드를 표현하는 문자열을 만듭니다.

+
+
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
+
+

전역 isFinite() 함수는 전달받은 값이 유한한지 결정합니다. 만약 필요하다면, 매개변수는 첫번째로 숫자로 변환됩니다.

+
+
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
+
+

isNaN() 함수는 {{jsxref("Global_Objects/NaN", "NaN")}}인지 아닌지 결정합니다. Note:  isNaN 함수 안의 강제 변환은  흥미로운 규칙을 가지고 있습니다;  {{jsxref("Number.isNaN()")}}을 대신 사용하고 싶을것입니다, ECMAScript 6 에서 정의된,또는 값이 숫자값이 아닐때,  typeof 를 사용할 수도 있습니다 .

+
+
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
+
+

parseFloat() 함수는  문자열 인수 값을 해석하여 부동소숫점 수를 반환합니다.

+
+
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
+
+

parseInt() 함수는 문자열 인수 값을 해석하여 특정한 진법의 정수를 반환합니다  (수학적 수 체계를 기반으로 해서).

+
+
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
+
+

decodeURI() 함수는  사전에 {{jsxref("Global_Objects/encodeURI", "encodeURI")}}을 통해 만들어지거나 비슷한 과정을 통해 만들어진 URI(Uniform Resource Identifier)  를 해독합니다.

+
+
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
+
+

decodeURIComponent() 메소드는 사전에{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}를 통하여 만들어 지거나 또는 비슷한 과정을 통해 만들어진 URI (Uniform Resource Identifier) 컴포넌트를 해독합니다.

+
+
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
+
+

encodeURI() 메소드는  URI(Uniform Resource Identifier)를  각 인스턴스의 특정한 문자를 한개, 두개,세개, 또는 네개의 UTF-8인코딩으로 나타내어지는 연속된 확장문자들과 바꾸는 방법으로 부호화 합니다 .(두"surrogate"문자로 구성된 문자들은 오직 네개의 연속된 확장문자 입니다. ).

+
+
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
+
+

encodeURIComponent() 메소드는  URI(Uniform Resource Identifier) 컴포넌트를  각 인스턴스의 특정한 문자를 한개, 두개,세개, 또는 네개의 UTF-8인코딩으로 나타내어지는 연속된 확장문자들과 바꾸는 방법으로 부호화 합니다 .(두"surrogate"문자로 구성된 문자들은 오직 네개의 연속된 확장문자 입니다. ).).

+
+
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
+
+

곧 사라질 escape() 메소드는 한 문자열에서 특정 문자들이 16진 확장 비트열로 바뀌어진 문자열로 계산합니다.  {{jsxref("Global_Objects/encodeURI", "encodeURI")}} 또는 {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} 를 사용하세요.

+
+
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
+
+

곧 사라질 unescape() 메소드는 문자열에서 확장 비트열이 확장 비트열이 나타내는 문자로 바뀌어진 문자열로 계산합니다.  {{jsxref("Global_Objects/escape", "escape")}}에서 확장 비트열이 소개될 것입니다.  unescape() 메소드가 곧 사라지기 때문에,  {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} 를 대신 사용하세요.

+
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

+ + + + diff --git a/files/ko/web/javascript/guide/grammar_and_types/index.html b/files/ko/web/javascript/guide/grammar_and_types/index.html new file mode 100644 index 0000000000..629cbd069a --- /dev/null +++ b/files/ko/web/javascript/guide/grammar_and_types/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 +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
+ +

이 장은 JavaScript의 기본 문법과 변수 선언, 자료형 및 리터럴을 다룹니다.

+ +

기본

+ +

JavaScript는 문법의 대부분을 Java와 C, C++로부터 차용하고 있으며, Awk, Perl, Python의 영향도 받았습니다.

+ +

JavaScript는 대소문자를 구별하며 유니코드 문자셋을 이용합니다. 따라서 다음과 같은 코드도 유효합니다.

+ +
var 갑을 = "병정";
+var Früh = "foobar"; // Früh: 독일어로 "이른"
+
+ +

하지만 Früh는 früh와 다릅니다. 대소문자를 구분하기 때문입니다.

+ +

JavaScript에서는 명령을 {{Glossary("Statement", "명령문(statement)")}}이라고 부르며, 세미콜론(;)으로 구분합니다.

+ +

명령문이 한 줄을 다 차지할 경우에는 세미콜론이 필요하지 않습니다. 그러나 한 줄에 두 개 이상의 명령문이 필요하다면 세미콜론으로 구분해야 합니다. ECMAScript는 세미콜론을 자동으로 삽입해 명령문을 끝내는 규칙(ASI)도 가지고 있습니다. (더 많은 정보는 JavaScript의 어휘 문법 에 대한 자세한 참고서를 참고하세요) 하지만, 세미콜론이 필요하지 않은 경우라도 항상 세미콜론으로 끝마치는 편이 버그 예방 차원에서 더 좋은 습관이라고 여겨집니다.

+ +

JavaScript의 스크립트 소스는 왼쪽에서 오른쪽으로 탐색하면서 토큰, 제어 문자, 줄바꿈 문자, 주석이나 공백으로 이루어진 입력 element의 시퀀스로 변환됩니다. 스페이스, 탭, 줄바꿈 문자는 공백으로 간주됩니다.

+ +

주석

+ +

주석의 구문은 C++ 및 다른 많은 언어와 똑같습니다.

+ +
// 한 줄 주석
+
+/* 이건 더 긴,
+ * 여러 줄 주석입니다.
+ */
+
+/* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */
+ +

주석은 공백처럼 행동하며 스크립트 실행 시 버려집니다.

+ +
+

참고: 몇몇 자바스크립트 파일의 시작부에 #!/usr/bin/env node와 같은 형태의 주석 문법이 쓰이는 것을 볼 수 있습니다. 이것은 해시백 주석 문법이라고 하는데, 이 특별한 주석은 스크립트를 실행할 때 쓸 특별한 자바스크립트 인터프리터의 경로를 설정할 때 쓰입니다.  해시백 주석을 참고하여 자세한 내용을 확인할 수 있습니다.

+
+ +

선언

+ +

JavaScript의 선언에는 3가지 방법이 있습니다.

+ +
+
{{jsxref("Statements/var", "var")}}
+
변수를 선언. 추가로 동시에 값을 초기화.
+
{{jsxref("Statements/let", "let")}}
+
블록 범위(scope) 지역 변수를 선언. 추가로 동시에 값을 초기화.
+
{{jsxref("Statements/const", "const")}}
+
블록 범위 읽기 전용 상수를 선언.
+
+ +

변수

+ +

어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 {{Glossary("식별자(identifier)")}}라고 불리며 특정 규칙을 따릅니다.

+ +

JavaScript 식별자는 문자, 밑줄(_) 혹은 달러 기호($)로 시작해야 하는 반면 이후는 숫자(0-9)일 수도 있습니다. JavaScript가 대소문자를 구분하기에, 문자는 "A"부터 "Z"(대문자)와 "a"부터 "z"(소문자)까지 모두 포함합니다.

+ +

ISO 8859-1 혹은 Unicode 문자(가령 å 나 ü)도 식별자에 사용할 수 있습니다(좀 더 상세한 내용은 이 블로그 글을 참고). 또한 Unicode escape sequences도 식별자에 문자로 사용할 수 있습니다.

+ +

적절한 이름으로는 Number_hits, temp99, $credit 및 _name등입니다.

+ +

변수 선언

+ +

변수 선언은 아래 3가지 방법으로 가능합니다.

+ +
    +
  • {{jsxref("Statements/var", "var")}} 키워드로. 예를 들어, var x = 42. 이 구문은 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다.
    • +
  • {{jsxref("Statements/let", "let")}} 키워드로. 예를 들어, let y = 13. 이 구문은 블록 범위 지역 변수를 선언하는데 사용될 수 있습니다. 아래 변수 범위 참고하세요.
    • +
+ +

간단히 변수에 값을 할당 할 수도 있습니다. 예를 들어, x = 42 와 같은 구문은 선언되지 않는 전역변수 를 만듭니다. 뿐만 아니라, 자바스크립트의 엄격한 경고를 만들어냅니다. 선언되지 않은 전역변수는 의도되지 않은 동작을 만들어내고는 합니다. 따라서 선언되지 않는 전역변수를 사용하면 안됩니다.

+ +

변수 할당

+ +

지정된 초기값 없이 var 혹은 let 문을 사용해서 선언된 변수는 {{jsxref("undefined")}} 값을 갖습니다.

+ +

선언되지 않은 변수에 접근을 시도하는 경우 {{jsxref("ReferenceError")}} 예외가 발생합니다.

+ +
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;
+
+ +

undefined를 사용하여 변수값이 있는지 확인할 수 있습니다. 아래 코드에서, input 변수는 값이 할당되지 않았고 if문은 true로 평가합니다.

+ +
var input;
+if(input === undefined) {
+  doThis();
+} else {
+  doThat();
+}
+
+ +

undefined 값은 boolean 문맥(context)에서 사용될 때 false로 동작합니다. 예를 들어, 아래 코드는 myArray 요소가 undefined이므로 myFunction 함수를 실행합니다.

+ +
var myArray = [];
+if (!myArray[0]) myFunction();
+
+ +

undefined 값은 수치 문맥에서 사용될 때 NaN으로 변환됩니다.

+ +
var a;
+a + 2; // NaN으로 평가
+ +

{{jsxref("null")}} 값을 평가할 때, 수치 문맥에서는 0으로, boolean 문맥에서는 false로 동작합니다. 예를 들면,

+ +
var n = null;
+console.log(n * 32); // 콘솔에 0 으로 로그가 남음.
+
+ +

변수 범위

+ +

어떤 함수의 바깥에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있기에 전역 변수라고 합니다. 만약 함수 내부에 변수를 선언하면, 오직 그 함수 내에서만 사용할 수 있기에 지역 변수라고 부릅니다.

+ +

ECMAScript 6 이전의 JavaScript는 block 문 범위가 없습니다. 그래서 오히려, 블록 내에 선언된 변수는 그 블록 내에 존재하는 함수(혹은 전역 범위)에 지역적입니다. 예를 들어서 아래의 코드는 5라는 로그를 남깁니다. x의 범위가 이 경우 if문 블록이 아니라 x가 선언된 함수(나 전역 문맥)이기 때문입니다.

+ +
if (true) {
+  var x = 5;
+}
+console.log(x); // 5
+
+ +

ECMAScript 6에 도입된 let 선언을 사용했을 때, 이 동작은 바뀌었습니다.

+ +
if (true) {
+  let y = 5;
+}
+console.log(y); // ReferenceError: y is not defined
+ +

변수 호이스팅

+ +

또 다른 JavaScript 변수의 특이한 점은 예외를 받지 않고도, 나중에 선언된 변수를 참조할 수 있다는 것입니다. 이 개념은 호이스팅(hoisting)으로 알려져 있습니다. 즉 JavaScript 변수가 어떤 의미에서 "끌어올려지거"나 함수나 문의 최상단으로 올려지는 것을 말합니다. 하지만, 끌어올려진 변수는 undefined 값을 반환합니다. 그래서 심지어 이 변수를 사용 혹은 참조한 후에 선언 및 초기화하더라도, 여전히 undefined를 반환합니다.

+ +
/**
+ * 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";
+})();
+
+ +

위 예제는 아래 예제와 동일하게 볼 수 있습니다.

+ +
/**
+ * 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";
+})();
+ +

호이스팅 때문에, 함수 내의 모든 var 문은 가능한 함수 상단 근처에 두는 것이 좋습니다. 이 방법은 코드를 더욱 명확하게 만들어줍니다.

+ +

ECMAScript 2015의 let (const)는 변수를 블록의 상단으로 올리지 않습니다.
+ 변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 {{jsxref("ReferenceError")}}를 발생시키게 됩니다.
+ 변수는 블록 시작부터 선언이 처리될 때까지 'temporal dead zone'에 위치하게 됩니다.

+ +
console.log(x); // ReferenceError
+let x = 3;
+
+ +

함수 호이스팅

+ +

함수에서는 단지 함수 선언만 상단으로 끌어올려집니다. 함수 표현식은 그렇지 않습니다.

+ +
/* 함수 선언 */
+
+foo(); // "bar"
+
+function foo() {
+  console.log('bar');
+}
+
+
+/* 함수 표현식 */
+
+baz(); // TypeError: baz is not a function
+
+var baz = function() {
+  console.log('bar2');
+};
+ +

전역 변수

+ +

전역 변수는 사실 global 객체의 속성(property)입니다. 웹 페이지에서 global 객체는 {{domxref("window")}} 이므로, windows.variable 구문을 통해 전역 변수를 설정하고 접근할 수 있습니다.

+ +

그 결과, window 혹은 frame의 이름을 지정하여 한 window 혹은 frame에서 다른 window 혹은 frame에 선언된 전역 변수에 접근할 수 있습니다. 예를 들어, phoneNumber 라는 변수가 문서에 선언된 경우, iframe에서 parent.phoneNumber로 이 변수를 참조할 수 있습니다.

+ +

상수

+ +

{{jsxref("Statements/const", "const")}} 키워드로 읽기 전용 상수를 만들 수 있습니다. 상수 식별자의 구문은 변수 식별자와 같습니다. 문자, 밑줄이나 달러 기호로 시작해야 하고 문자, 숫자나 밑줄을 포함할 수 있습니다.

+ +
const PI = 3.14;
+
+ +

상수는 스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재선언될 수 없습니다. 값으로 초기화해야 합니다.

+ +

상수에 대한 범위 규칙은 let 블록 범위 변수와 동일합니다. 만약 const 키워드가 생략된 경우에는, 식별자는 변수를 나타내는 것으로 간주됩니다.

+ +

상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없습니다. 예를 들어,

+ +
// 오류가 발생합니다
+function f() {};
+const f = 5;
+
+// 역시 오류가 발생합니다
+function f() {
+  const g = 5;
+  var g;
+
+  //statements
+}
+
+ +

그러나, 상수에 할당된 객체의 속성은 보호되지 않아서 다음의 문은 문제없이 실행됩니다.

+ +
const MY_OBJECT = {'key': 'value'};
+MY_OBJECT.key = 'otherValue';
+
+ +

또한, 배열의 내용도 보호되지 않아서 다음의 문도 문제없이 실행됩니다.

+ +
const MY_ARRAY = ['HTML','CSS'];
+MY_ARRAY.push('JAVASCRIPT');
+console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];
+
+ +

데이터 구조 및 형

+ +

데이터 형

+ +

최신 ECMAScript 표준은 7가지 데이터 형을 정의합니다.

+ +
    +
  • 6가지 {{Glossary("Primitive", "원시")}} 데이터 형 +
      +
    • {{Glossary("Boolean")}}. true와 false
      • +
    • {{Glossary("null")}}. null 값을 나타내는 특별한 키워드. JavaScript는 대소문자를 구분하므로, null은 Null, NULL 혹은 다른 변형과도 다릅니다.
      • +
    • {{Glossary("undefined")}}. 값이 저장되어 있지 않은 최상위 속성.
      • +
    • {{Glossary("Number")}}. 정수 또는 실수형 숫자. 예:42 혹은 3.14159.
      • +
    • {{Glossary("String")}}. 문자열. 예:"안녕"
      • +
    • {{Glossary("Symbol")}}. (ECMAScript 6에 도입) 인스턴스가 고유하고 불변인 데이터 형.
      • +
    +
    • +
  • 그리고 {{Glossary("Object")}}
    • +
+ +

이 데이터 형이 비교적 많지 않지만, 어플리케이션에 유용한 기능을 수행할 수 있습니다. {{jsxref("Object", "객체")}}와 {{jsxref("Function", "함수")}}는 언어의 다른 기본 요소입니다. 객체는 값을 위한 컨테이너, 함수는 어플리케이션이 수행할 수 있는 절차(procedure)로 생각할 수 있습니다.

+ +

자료형 변환

+ +

JavaScript는 동적 형지정(정형) 언어입니다. 이는 변수를 선언할 때 데이터 형을 지정할 필요가 없음을 의미합니다. 또한 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환됨을 뜻합니다. 그래서, 예를 들어, 다음과 같이 변수를 정의할 수 있습니다.

+ +
var answer = 42;
+ +

그리고 나중에, 동일한 변수에 문자열 값을 할당할 수도 있습니다. 아래와 같이,

+ +
answer = "Thanks for all the fish...";
+
+ +

JavaScript는 동적 형지정 언어이므로, 이 할당은 오류 메시지가 발생하지 않습니다.

+ +

숫자와 문자열 값 사이에 + 연산자를 포함한 식에서, JavaScript는 숫자 값을 문자열로 변환합니다. 예를 들어, 아래와 같은 문이 있습니다.

+ +
x = "The answer is " + 42 // "The answer is 42"
+y = 42 + " is the answer" // "42 is the answer"
+ +

다른 연산자를 포함한 식의 경우, JavaScript는 숫자 값을 문자열로 변환하지 않습니다. 예를 들면,

+ +
"37" - 7 // 30
+"37" + 7 // 377
+
+ +

문자열을 숫자로 변환하기

+ +

숫자를 나타내는 값이 문자열로 메모리에 있는 경우, 변환을 위한 메서드가 있습니다.

+ +
    +
  • {{jsxref("parseInt", "parseInt()")}}
    • +
  • {{jsxref("parseFloat", "parseFloat()")}}
    • +
+ +

parseInt는 오직 정수만 반환하므로, 소수에서는 사용성이 떨어집니다. 게다가 parseInt를 잘 사용하기 위해서는 항상 진법(Radix) 매개변수를 포함해야 합니다. 진법 매개변수는 변환에 사용될 진법을 지정하는데 사용됩니다.

+ +

문자열을 숫자로 변환하는 대안은 +(단항 더하기) 연산자입니다.

+ +
"1.1" + "1.1" = "1.11.1"
+(+"1.1") + (+"1.1") = 2.2
+// 참고: 괄호는 명확성을 위해 추가, 필요한 것은 아닙니다.
+
+ +

리터럴

+ +

JavaScript에서 값을 나타내기 위해 리터럴을 사용합니다. 이는 말 그대로 스크립트에 부여한 고정값으로, 변수가 아닙니다. 이 절에서는 다음과 같은 형태의 리터럴을 설명합니다.

+ +
    +
  • {{anch("배열_리터럴", "배열 리터럴")}}
    • +
  • {{anch("불린_리터럴", "불린 리터럴")}}
    • +
  • {{anch("부동_소수점_리터럴", "부동 소수점 리터럴")}}
    • +
  • {{anch("정수", "정수")}}
    • +
  • {{anch("객체_리터럴", "객체 리터럴")}}
    • +
  • {{anch("정규식_리터럴", "정규식 리터럴")}}
    • +
  • {{anch("문자열_리터럴", "문자열 리터럴")}}
    • +
+ +

배열 리터럴

+ +

배열 리터럴은 0개 이상의 식(expression) 목록입니다. 각 식은 배열 요소를 나타내고 대괄호([])로 묶입니다. 배열 리터럴을 사용하여 배열을 만들 때, 그 요소로 지정된 값으로 초기화되고, 그 길이는 지정된 인수의 갯수로 설정됩니다.

+ +

아래 예제는 요소가 3개로 길이가 3인 coffees 배열을 만듭니다.

+ +
var coffees = ["French Roast", "Colombian", "Kona"];
+
+ +
+

참고: 배열 리터럴은 일종의 객체 이니셜라이저(initialiizer)입니다. Using Object Initializers 참고.

+
+ +

배열이 최상단 스크립트에서 리터럴을 사용하여 만들어진 경우, JavaScript는 배열 리터럴을 포함한 식을 평가할 때마다 배열로 해석합니다. 게다가, 함수에서 사용되는 리터럴은 함수가 호출될 때마다 생성됩니다.

+ +

배열 리터럴은 배열 객체입니다. 배열 객체에 대한 자세한 내용은 {{jsxref("Array")}}와 Indexed collections 참고.

+ +

배열 리터럴의 추가 쉼표

+ +

배열 리터럴에서 모든 요소를 지정할 필요는 없습니다. 만약 잇달아 두 개의 쉼표를 두면, 배열은 지정되지 않은 요소를 undefined로 만듭니다. 다음 예제는 fish 배열을 만듭니다.

+ +
var fish = ["Lion", , "Angel"];
+
+ +

이 배열은 값이 있는 두 요소와 빈 요소 하나를 가집니다(fish[0]은 "Lion", fish[1]은 undefined, fish[2]는 "Angel").

+ +

만약 요소 목록을 후행(trailing) 쉼표로 끝낸다면, 그 쉼표는 무시됩니다. 다음 예제에서, 배열의 길이는 3입니다. myList[3]은 없습니다. 목록의 다른 모든 쉼표는 새로운 요소를 나타냅니다.

+ +
+

참고: 후행 쉼표는 구버전 브라우저에서 오류를 유발할 수 있으므로 제거하는게 최선입니다.

+
+ +
var myList = ['home', , 'school', ];
+
+ +

아래 예제에서, 배열의 길이는 4이며, myList[0]과 myList[2]는 값이 빠졌습니다.

+ +
var myList = [ , 'home', , 'school'];
+
+ +

아래 예제에서, 배열의 길이는 4이며, myList[1]과 myList[3]은 값이 빠졌습니다. 마지막 쉼표는 무시됩니다.

+ +
var myList = ['home', , 'school', , ];
+
+ +

추가 쉼표의 동작을 이해하는 것은 JavaScript를 언어로서 이해하는데 중요하지만, 코드를 작성할 때는 빠진 요소의 값을 명시적으로 undefined로 선언하는 것이 코드의 명확성과 유지보수성을 높입니다.

+ +

불리언 리터럴

+ +

불리언 형은 true와 false의 리터럴 값을 가집니다.

+ +

원시 불린 값 true 및 false와 Boolean 객체의 true 및 false 값을 혼동하지 마세요. Boolean 객체는 원시 불린 데이터 형을 감싸는 래퍼(wrapper)입니다. 더 많은 정보는 {{jsxref("Boolean")}}을 참고하세요.

+ +

정수 리터럴

+ +

정수는 10진, 16진, 8진 및 2진수로 표현될 수 있습니다.

+ +
    +
  • 10진 정수 리터럴은 선행 0(zero)이 아닌 숫자열로 이루어집니다.
    • +
  • 정수 리터럴에서 선행 0(zero)이나 선행 0o(혹은 0O)은 8진수임을 나타냅니다. 8진 정수는 오직 숫자 0-7만 포함할 수 있습니다.
    • +
  • 선행 0x(나 0X)는 16진수임을 나타냅니다. 16진 정수는 숫자 0-9 및 문자 a-f, A-F를 포함할 수 있습니다.
    • +
  • 선행 0b(나 0B)는 2진수임을 나타냅니다. 2진 정수는 오직 숫자 0과 1만 포함할 수 있습니다.
    • +
+ +

다음은 정수 리터럴 예제입니다.

+ +
0, 117 및 -345 (10진수)
+015, 0001 및 -0o77 (8진수)
+0x1123, 0x00111 및 -0xF1A7 (16진수)
+0b11, 0b0011 및 -0b11 (2진수)
+
+ +

더 많은 정보는 Lexical grammar reference의 Numeric literals를 참고하세요.

+ +

부동 소수점 리터럴

+ +

부동 소수점 리터럴은 아래와 같은 부분으로 이루어집니다.

+ +
    +
  • 부호("+"나 "-")가 달릴 수 있는 10진 정수,
    • +
  • 소수점("."),
    • +
  • 소수(또 다른 10진수),
    • +
  • 지수.
    • +
+ +

지수부는 "e"나 "E" 다음에 오며 부호("+"나 "-")가 달릴 수 있는 정수입니다. 부동 소수점 리터럴은 적어도 숫자 하나와 소수점 혹은 "e"(나 "E")가 있어야 합니다.

+ +

더 간결하게 설명하면, 구문은 다음과 같습니다.

+ +
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
+
+ +

예를 들면,

+ +
3.1415926
+-.123456789
+-3.1E+12
+.1e-23
+
+ +

객체 리터럴

+ +

객체 리터럴은 중괄호({})로 묶인 0개 이상인 객체의 속성명과 관련 값 쌍 목록입니다. 문의 시작에 객체 리터럴을 사용해서는 안됩니다. 이는 {가 블록의 시작으로 해석되기 때문에 오류를 이끌거나 의도한 대로 동작하지 않습니다.

+ +

아래는 객체 리터럴의 예제입니다. car 객체의 첫째 요소는 myCar 속성을 정의하고 문자열 "Saturn"을 할당합니다. 반면 둘째 요소인 getCar 속성은 function (carTypes("Honda"))을 호출한 결과가 즉시 할당됩니다. 셋째 요소 special 속성은 기존 변수 sales를 사용합니다.

+ +
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
+
+ +

게다가, 속성명으로 숫자나 문자열 리터럴을 사용하거나 또다른 객체 리터럴 내부에 객체를 중첩할 수도 있습니다. 아래 예제는 이 옵션을 사용합니다.

+ +
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
+
+console.log(car.manyCars.b); // Jeep
+console.log(car[7]); // Mazda
+
+ +

객체 속성명은 빈 문자열 포함 어떤 문자열도 될 수 있습니다. 속성명이 유효한 JavaScript {{Glossary("식별자")}}나 숫자가 아닌 경우, 따옴표로 묶여야 합니다. 또한 유효한 식별자가 아닌 속성명은 점(.) 속성으로 접근할 수 없습니다. 대신 배열 같은 표기법("[]")으로 접근하고 값을 설정할 수 있습니다.

+ +
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!
+
+ +

향상된 객체 리터럴

+ +

ES2015에서, 객체 리터럴은 구성에서 프로토타입 설정, foo: foo 할당을 위한 단축 표기, 메서드 정의, super 클래스 호출 및 식으로 동적인 속성명 계산을 지원하기 위해 확장됐습니다. 그에 따라 객체 리터럴 및 클래스 선언이 함께 더 가까워지고, 객체 기반 설계는 같은 일부 편의기능으로 득을 볼 수 있습니다.

+ +
var obj = {
+    // __proto__
+    __proto__: theProtoObj,
+    // ‘handler: handler’의 단축 표기
+    handler,
+    // Methods
+    toString() {
+     // Super calls
+     return "d " + super.toString();
+    },
+    // Computed (dynamic) property names
+    [ 'prop_' + (() => 42)() ]: 42
+};
+ +

아래를 참고하세요.

+ +
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
+
+ +

정규식 리터럴

+ +

정규식 리터럴은 (정규식 상세) 슬래시 사이에 감싸인 패턴입니다. 다음은 정규식 리터럴 예제입니다.

+ +
var re = /ab+c/;
+ +

문자열 리터럴

+ +

문자열 리터럴은 큰 따옴표(") 혹은 작은 따옴표(')로 묶인 0개 이상의 문자입니다. 문자열은 같은 형 따옴표, 즉 큰 따옴표 쌍이나 작은 따옴표 쌍으로 구분되어야 합니다. 아래는 문자열 리터럴의 예제입니다.

+ +
"foo"
+'bar'
+"1234"
+"one line \n another line"
+"John's cat"
+
+ +

문자열 리터럴 값은 문자열 객체의 모든 메서드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 리터럴을 임시 문자열 객체로 변환, 메서드를 호출하고 나서 임시 문자열 객체를 폐기합니다. 또한 문자열 리터럴에서도 String.length 속성을 사용할 수 있습니다.

+ +
console.log("John's cat".length)
+// 공백을 포함한 문자열 내 심볼 갯수가 출력됩니다.
+// 여기서는, 10.
+
+ +

ES2015에서는, 템플릿 리터럴도 사용할 수 있습니다. 템플릿 문자열은 문자열 구성을 위한 달콤한 구문을 제공합니다. 이는 Perl, Python 등에 있는 문자열 삽입(interpolation) 기능과 비슷합니다. 마음대로, 문자열 구성을 사용자 정의하고 인젝션 공격을 피하거나 문자열 콘텐츠로 더 고레벨 데이터 구조를 구성하기 위한 태그가 추가될 수 있습니다.

+ +
// 기본적인 문자열 리터럴 생성
+`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}&b=${b}
+     Content-Type: application/json
+     X-Credentials: ${credentials}
+     { "foo": ${foo},
+       "bar": ${bar}}`(myOnReadyStateChangeHandler);
+ +

꼭 문자열 객체를 사용할 필요가 없는 경우 문자열 리터럴을 사용해야 합니다. 문자열 객체에 대해 자세한 사항은 {{jsxref("String")}}을 참고하세요.

+ +

문자열에서 특수 문자 사용

+ +

보통 문자에 더해서, 문자열에 아래 예제와 같이 특수 문자도 포함할 수 있습니다.

+ +
"one line \n another line"
+
+ +

다음 표는 JavaScript 문자열에 사용할 수 있는 특수 문자 목록입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
표: JavaScript 특수 문자
문자뜻
\0Null Byte
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Apostrophe 혹은 작은 따옴표
\"큰 따옴표
\\백슬래시
\XXXLatin-1 인코딩 문자는 0 - 377 사이 8진수 3자리까지 지정될 수 있습니다. 예를 들어, \251은 copyright 심볼을 표현하는 8진수 시퀀스입니다.
\xXXLatin-1 인코딩 문자는 00 - FF 사이의 16진수 2자리로 지정될 수 있습니다. 예를 들어, \xA9는 copyright 심볼을 표현하는 16진수 시퀀스입니다.
\uXXXX유니코드 문자는 16진수 4자리로 지정될 수 있습니다. 예를 들어, \u00A9는 copyright 심볼을 표현하는 유니코드 열입니다. Unicode escape sequences를 참고하세요.
\u{XXXXX}유니코드 코드 포인트 이스케이프. 예를 들어, \u{2F804}는 간단한 유니코드 이스케이프 \uD87E\uDC04와 같습니다.
+ +

문자 이스케이프

+ +

표에 없는 문자의 경우 전행 백슬래시는 무시되지만, 이 용법은 더 이상 사용되지 않으며, 사용을 피해야 합니다.

+ +

전행 백슬래시와 함께 문자열 안에 따옴표를 사용할 수 있습니다. 이것을 따옴표 이스케이프라고 합니다. 예를 들어,

+ +
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
+console.log(quote);
+
+ +

이 코드의 결과는,

+ +
He read "The Cremation of Sam McGee" by R.W. Service.
+
+ +

백슬래시를 문자열 내에 포함시키기 위해서는, 백슬래시 문자를 이스케이프 해야 합니다. 예를 들어, 파일 경로 c:\temp를 문자열에 할당하기 위해서는 아래와 같이 사용합니다.

+ +
var home = "c:\\temp";
+
+ +

또한 줄바꿈 역시 전행 백슬래시로 이스케이프할 수 있습니다. 백슬래시와 줄바꿈 모두 문자열 값에서는 사라집니다.

+ +
var str = "this string \
+is broken \
+across multiple\
+lines."
+console.log(str);   // this string is broken across multiplelines.
+
+ +

JavaScript에는 "heredoc" 구문은 없지만, 줄바꿈 이스케이프와 각 줄 끝 이스케이프된 줄바꿈을 추가하여 흉내낼 수 있습니다.

+ +
var poem =
+"Roses are red,\n\
+Violets are blue.\n\
+I'm schizophrenic,\n\
+And so am I."
+
+ +

ECMAScript 2015에서는 템플릿 리터럴(template literals)이라는 새로운 리터럴이 소개되었습니다. 이 것은 다중 문자열을 포함한 많은 새로운 기능을 가지고 있습니다!

+ +
var poem =
+`Roses are red,
+Violets are blue.
+Sugar is sweet,
+and so is foo.`
+
+ +

추가 정보

+ +

이 장은 선언과 형에 대한 기본 구문에 초점을 맞춥니다. JavaScript 언어 구조에 대해 더 많이 배우려면, 다음 장을 참고하세요.

+ + + +

다음 장에서는, 흐름 제어 구조와 오류 처리를 살핍니다.

+ +

{{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

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 deleted file mode 100644 index e05bab3102..0000000000 --- a/files/ko/web/javascript/guide/inheritance_and_the_prototype_chain/index.html +++ /dev/null @@ -1,531 +0,0 @@ ---- -title: 상속과 프로토타입 -slug: Web/JavaScript/Guide/Inheritance_and_the_prototype_chain -tags: - - JavaScript - - 객체지향 - - 상속 - - 중급 -translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain ---- -

{{jsSidebar("Advanced")}}

- -

Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.)

- -

상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 한다.

- -

종종 이러한 점이 자바스크립트의 약점이라고 지적되지만, 프로토타입적 상속 모델은 사실 고전적인 방법보다 좀 더 강력한 방법이다. 그 말은, 예를 들자면, 프로토타입적 모델에서 고전적인 방식을 구현하는 건 꽤나 사소한 일이지만, 그 반대는 훨씬 더 어려운 일이기 때문이다.

- -

프로토타입 체인을 이용한 상속

- -

속성 상속

- -

자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (자기만의 속성이라고 부른다) 프로토타입 객체에 대한 링크를 가진다. 객체의 어떤 속성에 접근하려할 때 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색한다.

- -
ECMAScript 표준은 someObject.[[Prototype]]을 객체 someObject의 프로토타입을 지시하도록 명시하였다. ECMAScript 2015부터 [[Prototype]]에 조상 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}}을 이용하여 접근하기 때문이다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 __proto__과 동일하다.
- -

아래 코드에는 어떤 속성에 접근 하려할 때 일어나는 상황이다.

- -
// 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} ---> {b: 3, c: 4} ---> Object.prototype ---> 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를 반환한다.
-
- -

객체의 속성에 값을 지정하면 "자기만의 속성"이 생긴다.  단, getter or a setter가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용된다.

- -

메소드 상속

- -

자바스크립트에 "메소드"라는건 없다. 하지만 자바스크립트는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 쓸 수 있다. 속성 값으로 지정한 함수의 상속 역시 위에서 본 속성의 상속과 동일하다. (단 위에서 언급한 "속성의 가려짐" 대신 "메소드 오버라이딩, method overriding" 라는 용어를 사용한다)

- -

상속된 함수가 실행 될 때,  this 라는 변수는 상속된 오브젝트를 가르킨다. 그 함수가 프로토타입의 속성으로 지정되었다고 해도 말이다.

- -
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'가 된다.
-
- -

Javascript 에서 프로토타입을 사용하는 방법

- -

뒤에서 일어나는 일을 좀 더 자세히 파헤쳐보자.

- -

위에서 언급했듯이, 자바스크립트에서 함수는 속성을 가질 수 있다. 모든 함수에는 prototype이라는 특수한 속성이 있다. 아래의 예제 코드는 독립적이라는 것에 유의하자. (아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정하는 것이 좋다.)

- -

최적의 실습을 위해서 콘솔을 열고 "Console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣은 다음 , 엔터키를 눌러 실행할 것을 적극 권한다. (콘솔은 대부분 웹 브라우저의 Developer Tools에 포함되어있다. 자세한 내용은 Firefox Developer Tools, Chrome DevTools, Edge DevTools 에서 확인할 수 있다. )

- -
- -
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 );
- -

위 내용을 토대로, 콘솔을 보면  doSomething() 은 기본 prototype 속성을 가진다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야한다.

- -
{
-    constructor: ƒ doSomething(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}
- -

우리는 아래에 보이는 것과 같이 doSomething() 프로토타입에 속성을 추가할 수 있다.

- -
function doSomething(){}
-doSomething.prototype.foo = "bar";
-console.log( doSomething.prototype );
- -

결과:

- -
{
-    foo: "bar",
-    constructor: ƒ doSomething(),
-    __proto__: {
-        constructor: ƒ Object(),
-        hasOwnProperty: ƒ hasOwnProperty(),
-        isPrototypeOf: ƒ isPrototypeOf(),
-        propertyIsEnumerable: ƒ propertyIsEnumerable(),
-        toLocaleString: ƒ toLocaleString(),
-        toString: ƒ toString(),
-        valueOf: ƒ valueOf()
-    }
-}
-
- -

이제 new 연산자를 사용해서 프로토타입 기반의 doSomething() 인스턴스를 생성할 수 있다. new 연산자를 사용하려면 함수 호출 형식에 new 접두사를 붙이기만하면 된다. new 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받는다. 그러면 속성들을 이 객체에 추가할 수 있다.

- -

다음의 코드를 실행해보자.

- -
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 );
- -

실행하고나면 결과는 다음과 비슷할 것이다.

- -
{
-    prop: "some value",
-    __proto__: {
-        foo: "bar",
-        constructor: ƒ doSomething(),
-        __proto__: {
-            constructor: ƒ Object(),
-            hasOwnProperty: ƒ hasOwnProperty(),
-            isPrototypeOf: ƒ isPrototypeOf(),
-            propertyIsEnumerable: ƒ propertyIsEnumerable(),
-            toLocaleString: ƒ toLocaleString(),
-            toString: ƒ toString(),
-            valueOf: ƒ valueOf()
-        }
-    }
-}
-
- -

위에서 본 것과 같이, doSomeInstancing 객체의 __proto__ 는 doSomething.prototype 이다.
- 그래서 도대체 __proto__는 무엇을 하는것인지 알아보자.
- 우리가 doSomeInstancing의 속성에 접근할때 브라우저는 우선 doSomeInstancing이 그 속성을 갖고있는지 확인한다.
- 만약 doSomeInstancing이 속성을 갖고있지 않다면, 브라우저는 doSomeInstancing의 __proto__(doSomething.prototype)가 그 속성을 갖고있는지 확인한다.
- 만약 doSomeInstancing의 __proto__가 브라우저가 찾던 속성을 갖고 있다면, doSomething의 __proto__가 갖고있는 그 속성을 사용한다.

- -

그렇지 않고, doSomeInstancing의 __proto__가 그 속성을 갖고있지 않을때에는
- doSomeInstancing의 __proto__의 __proto__가 그 속성을 갖는지 확인한다.
- 기본적으로, 어떠한 함수던지 그 함수의 prototype 속성의 __proto__는 window.Object.prototype이다.
- 그러므로 브라우저는 doSomeInstancing의 __proto__의 __proto__(doSomething.prototype의 __proto__(다시말해, Object.prototype))  에서 그 속성을 찾아본다.
- 만약 그 속성을 doSomeInstancing의 __proto__의 __proto__에서 찾을 수 없다면 그다음엔 doSomeInstancing의 __proto__의 __proto__의 __proto__에서 찾을것이다.
- 하지만 여기서 문제가 발생한다.
- doSomeInstancing의 __proto__의 __proto__의 __proto__는 존재할 수 없다(window.Object.prototype의 __proto__는 null이기 때문).
- 그제서야, 오직 모든 프로토타입 체인이 검사 되고 브라우저가 더이상  검사할 __proto__가 없을때에서야 브라우저는 우리가 찾던 값이 undefined라고 결론짓는다.

- -

콘솔에 코드를 조금 더 추가해보자.

- -
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);
-
- -

이 코드의 결과는 아래와 같다.

- -
doSomeInstancing.prop:      some value
-doSomeInstancing.foo:       bar
-doSomething.prop:           undefined
-doSomething.foo:            undefined
-doSomething.prototype.prop: undefined
-doSomething.prototype.foo:  bar
-
- -

객체를 생성하는 여러 방법과 프로토타입 체인 결과

- -

문법 생성자로 객체 생성

- -
var o = {a: 1};
-
-// o 객체는 프로토타입으로 Object.prototype 을 가진다.
-// 이로 인해 o.hasOwnProperty('a') 같은 코드를 사용할 수 있다.
-// hasOwnProperty 라는 속성은 Object.prototype 의 속성이다.
-// Object.prototype 의 프로토타입은 null 이다.
-// o ---> Object.prototype ---> null
-
-var a = ["yo", "whadup", "?"];
-
-// Array.prototype을 상속받은 배열도 마찬가지다.
-// (이번에는 indexOf, forEach 등의 메소드를 가진다)
-// 프로토타입 체인은 다음과 같다.
-// a ---> Array.prototype ---> Object.prototype ---> null
-
-function f(){
-  return 2;
-}
-
-// 함수는 Function.prototype 을 상속받는다.
-// (이 프로토타입은 call, bind 같은 메소드를 가진다)
-// f ---> Function.prototype ---> Object.prototype ---> null
-
- -

생성자를 이용

- -

자바스크립트에서 생성자는 단지 new 연산자를  사용해 함수를 호출하면 된다.

- -
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의 값과 같은 값을 가진다.
-
- -

Object.create 이용

- -

ECMAScript 5는 새로운 방법을 도입했다. Object.create라는 메소드를 호출하여 새로운 객체를 만들 수 있다. 생성된 객체의 프로토타입은 이 메소드의 첫 번째 인수로 지정된다.

- -
var a = {a: 1};
-// a ---> Object.prototype ---> null
-
-var b = Object.create(a);
-// b ---> a ---> Object.prototype ---> null
-console.log(b.a); // 1 (상속됨)
-
-var c = Object.create(b);
-// c ---> b ---> a ---> Object.prototype ---> null
-
-var d = Object.create(null);
-// d ---> null
-console.log(d.hasOwnProperty); // undefined이다. 왜냐하면 d는 Object.prototype을 상속받지 않기 때문이다.
-
- -
-

class 키워드 이용

- -

ECMAScript2015에는 몇 가지 키워드가 도입되어 class를 구현하였다. 이런 생성 방식은 클래서 기반 언어의 개발자들에게 친숙하게 다가오나 동작 방식이 같지는 않다. 자바스크립트는 여전히 프로토타입 기반으로 남아있다. 새로 도입된 키워드는 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, 그리고 {{jsxref("Operators/super", "super")}}가 있다.

- -
'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);
-
- -

성능

- -

프로토타입 체인에 걸친 속성 검색으로 성능에 나쁜 영향을 줄 수 있으며, 때때로 치명적일 수 있다. 또한 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색해서 확인하게 만든다.

- -

객체의 속성에 걸쳐 루프를 수행 하는 경우 프로토타입 체인 전체의 모든 열거자 속성에 대하여 적용된다. 객체 개인 속성인지 프로토타입 체인상 어딘가에 있는지 확인하기 위해서는 Object.prototype에서 모든 오브젝트로 상속된 hasOwnProperty 메소드를 이용할 필요가 있다. 다음 코드를 통하여 구체적인 예를 확인하여 보자.

- -
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
-
- -

hasOwnProperty 메소드만이 속성을 확인하고 프로토타입 체인 전체를 훑지 않게 할 수 있다.

- -

참고: undefined인지 여부만 확인하는 것으로는 충분하지 않다. 여전히 속성이 존재할 수도 있는데 단지 그 값에 undefined가 할당되어 있을 수도 있기 때문이다.

- -

좋지 않은 사례: 기본 프로타입의 확장 변형

- -

Object.prototype 혹은 빌트인 프로토타입의 확장은 종종 이용되지만 오용이다.

- -

이 기법은 Monkey patching으로 불리며 캡슐화를 망가뜨린다. Prototype.js와 같은 유명한 프레임워크에서도 사용되지만, 빌트인 타입에 비표준 기능을 추가하는 것은 좋은 생각이 아니다.

- -

유일하게 좋은 사용 예라면, 새로운 자바스크립트 엔진에 Array.forEach등의 새로운 기능을 추가하면서 빌트인 프로토타입을 확장하는 것 정도다. 

- -

예

- -

B는 A를 상속한다:

- -
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();
-
- -

중요한 점은:

- -
    -
  • .prototype에 타입이 정의되어 있다.
    • -
  • Object.create()을 이용하여 상속한다.
    • -
- -

prototype 그리고 Object.getPrototypeOf

- -

Java나 C++에 익숙한 개발자는 클래스라는 것도 없고, 모든 것이 동적이고 실행 시 결정되는 자바스크립트의 특징 때문에 어려움을 겪을 수도 있다. 모든 것은 객체이고, 심지의 "class"를 흉내내는 방식도 단지 함수 오브젝트를 이용하는 것 뿐이다.

- -

이미 알아챘겠지만 우리의 함수 A도 특별한 속성 prototype를 가지고 있다. 이 특별한 속성은 자바스크립트의 new 연산자와 함께 쓰인다. 프로토타입 객체는 새로 만들어진 인스턴스의 내부 [[Prototype]] 속성에 복사되어 참조된다. 가령, var a1 = new A()를 수행할 때, this를 포함하고 있는 함수을 수행하기 전, 메모리에 새로 생성된 객체를 생성한 직후 자바스크립트는 a1.[[Prototype]] = A.prototype를 수행한다. 그 인스턴스의 속성에 접근하려 할 때 자바스크립트는 그 객체의 개인 속성인지 우선 확인하고 그렇지 않은 경우에 [[Prototype]]에서 찾는다. 이것은 prototype에 정의한 모든 것은 모든 인스턴스가 효과적으로 공유한다는 뜻이며, 심지어 프로토타입의 일부를 나중에 변경하다고 해도 이미 생성되어 있는 인스턴스는 필요한 경우 그 변경 사항에 접근할 수 있다.

- -

위의 예에서, 만일 var a1 = new A(); var a2 = new A(); 그 후 a1.doSomething이 Object.getPrototypeOf(a1).doSomething를 가리키게 되는 것은A.prototype.doSomething으로 정의한 것과 같게 된다. 즉, Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething.

- -

요약 하자면, prototype은 타입 정의를 위한 것이고, Object.getPrototypeOf()는 모든 인스턴스가 공유한다.

- -

[[Prototype]]은 재귀적으로 탐색된다. 즉, a1.doSomething, Object.getPrototypeOf(a1).doSomething,Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething 등등, 이미 발견했거나 Object.getPrototypeOf가 null을 반환할 때까지 반복된다.

- -

따라서 다음 호출에 대하여

- -
var o = new Foo();
- -

자바스크립트는 실제로 다음 작업을 수행한다.

- -
var o = new Object();
-o.[[Prototype]] = Foo.prototype;
-Foo.call(o);
- -

(혹은 그런 비슷한 작업, 내부 구현은 다를 수 있다) 그리고 나중에 다음을 수행하면

- -
o.someProp;
- -

자바스크립트는 o가 속성 someProp을 가졌는지 확인하고, 아니면 Object.getPrototypeOf(o).someProp, 또 아니면 Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp 등으로 계속 된다.

- -

프로토타입 상속의 종류

- -

프로토타입 상속에는 3가지 종류가 있다 : 위임형 상속, 연결형 상속, 함수형 상속.

- -

위임형 상속(Delegation inheritance)

- -

위임형 상속에서 프로토타입 객체는 다른 객체의 기반이 된다. 위임 프로토타입을 상속받을 경우 새 객체는 해당 프로토타입에 대한 참조를 가지고 있다.

- -

새 객체의 속성에 접근할 때, 해당 객체가 직접적으로 속성을 소유하고 있는지 먼저 체크한다. 없다면 다음 순서로 [[Prototype]]을 체크한다. 이 과정은 프로토타입 체인을 따라서 모든 객체의 프로토타입 체인의 최상위에 있는 객체인 Object.prototype에 도달할 때 까지 반복된다.

- -

메소드를 위임 상속할 경우 모든 객체가 각 메소드에에 대해 하나의 코드를 공유하므로 메모리를 절약할 수 있다.

- -

Javascript에서 이를 구현하는 방법은 여러가지가 있는데 ES6에서는 아래와 같은 방식이 흔하다:

- -
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
-
- -

Object.create(null). 을 통해 프로토타입을 {{jsxref("null")}}로 지정하여 속성 위임 없이 객체를 생성할 수 있다..

- -

이 방법의 큰 단점 중 하나는 상태를 저장하는데 그리 좋은 방법이 아니라는 것이다. 객체나 배열의 상태를 변경하게 되면 같은 프로토타입을 공유하는 모든 객체의 상태가 변경된다.

- -

상태 변경이 전파되는 것을 막으려면 각 객체마다 상태 값의 복사본을 만들어야 한다.

- -

연결형 상속(Concatenative inheritance)

- -

연결형 상속은 한 객체의 속성을 다른 객체에 모두 복사함으로써 상속을 구현하는 방법이다.

- -

이 상속법은 Javascript 객체의 동적 확장성을 이용한 방법이다. 객체 복사는 속성의 초기값을 저장하기 위한 좋은 방법이다: 이 방식은 {{jsxref("Object.assign()")}}을 통해 구현하는 것이 보통이며 ES6 이전에 Lodash, Underscore, jQuery등의 라이브러리들이 .extend() 와 비슷한 메소드로 제공한 방법이다.

- -
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
-
- -

연결형 상속은 매우 좋은 방법이며 클로져와 같이 사용한다면 훨씬 효과적인 상속 방식입니다..

- -

함수형 상속(Functional inheritance)

- -

함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 “JavaScript: The Good Parts”에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다.

- -

기존의 객체를 확장하는데 쓰이는 함수를 일반적으로 믹스인 함수라 칭한다. 객체 확장에 함수를 사용하는 가장 큰 이점은 Private Data를 클로져를 통해 캡슐화 시킬 수 있다는 점이다.

- -

다르게 말하자면 Private 상태를 지정할 수 있다는 의미이다.

- -

특정 함수를 통할 필요 없이 public 접근이 가능한 속성에 대해 접근 제한을 거는 것은 문제가 있다. 따라서 private 클로져에 속성 값을 숨겨야 하며 이는 아래와 같이 구현한다:

- -
// 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) => rawMixin.call(target);
-const george = { name: 'george' };
-const model = mixinModel(george);
-model.on('change', data => console.log(data));
-model.set('name', 'Sam');
-/*
-{
-  prop: 'name',
-  value: 'Sam'
-}
-*/
-
- -

attrs 을 public 속성에서 private 영역으로 옮겨서 public API를 통한 접근을 차단할 수 있다. // 접근할 수 있는 유일한 방법은 Privileged 메소드 뿐이다. Privileged 메소드는 클로져 영역에 정의된 함수로 private data에 접근 가능한 함수들을 일컫는다.

- -

위 예제를 보면 믹스인 함수 rawMixin().에 대한 래퍼로 mixinModel() 을 선언한 것을 알 수 있다. 이는 예제에서 {{jsxref("Function.prototype.call()")}} 을 사용했듯이 함수 내에서 this의 값을 설정해야 하기 때문이다. Wrapper를 생략하고 호출자가 알아서 하도록 놔둘 수 있지만 그럴 경우 혼동될 가능성이 있다.

- -
-

결론

- -

복잡한 코드를 작성하여 이용하기 전에 프로토타입 기반의 상속 모델을 이해하는 것이 중요하다. 또한 프로토타입 체인의 길이는 성능을 저해하지 않도록 줄이는 방법을 고안해야 한다. 또한 빌트인 프로토타입은 새로운 자바스크립트 기능과 호환성을 갖기 위한 이유가 아닌 이상 절대 확장해서는 안된다.

-
-
diff --git a/files/ko/web/javascript/guide/introduction/index.html b/files/ko/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..cac0779ee0 --- /dev/null +++ b/files/ko/web/javascript/guide/introduction/index.html @@ -0,0 +1,153 @@ +--- +title: Introduction +slug: Web/JavaScript/Guide/소개 +tags: + - JavaScript + - 가이드 + - 안내서 + - 자바스크립트 +translation_of: Web/JavaScript/Guide/Introduction +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
+ +

이 장은 JavaScript를 소개하고 그 일부 기초 개념을 다룹니다.

+ +

무엇을 미리 알고 있어야 하나요?

+ +

이 안내서는 당신이 다음의 기본적인 배경지식이 있다고 가정합니다.

+ +
    +
  • 인터넷과 월드 와이드 웹({{Glossary("WWW")}})에 대한 전반적인 이해.
    • +
  • HyperText 마크업 언어({{Glossary("HTML")}})에 대한 괜찮은 실무 지식.
    • +
  • 약간의 프로그래밍 경험. 만약 프로그래밍이 처음이라면, JavaScript 메인 페이지에 링크된 tutorial 중 하나를 따라하세요.
    • +
+ +

어디서 JavaScript 정보를 찾을 수 있을까

+ +

MDN에 있는 JavaScript 문서는 다음 세가지 파트로 되어있습니다.

+ +
    +
  • Learning the Web은 입문자를 위한 정보를 제공하며, 프로그래밍과 인터넷에 대한 기본 개념을 소개합니다.
    • +
  • JavaScript Guide (이 안내서)는 JavaScript 언어와 객체에 대한 개요를 제공합니다.
    • +
  • JavaScript Reference JavaScript에 관련된 자세한 참고 자료를 제공합니다.
    • +
+ +

JavaScript가 처음이라면, learning area와 JavaScript Guide에 있는 문서를 먼저 보세요. 일단 기초를 확실히 파악한 후에는, 각 객체와 문(statement)에 대한 더 자세한 정보를 JavaScript Reference에서 확인할 수 있습니다.

+ +

JavaScript는 무엇인가?

+ +

JavaScript는 크로스-플랫폼, 객체지향 스크립트 언어입니다. 작고 가벼운 언어입니다. 호스트 환경(가령, 웹 브라우저) 내에서, JavaScript는 프로그램 제어를 제공하기 위해 그 환경의 객체에 연결될 수 있습니다. Node.Js와 같은 자바 스크립트의 고급 서버언어로 사용 할 수도 있습니다.이것을 사용하면 단순히 파일을 다운로드하는 것 (예 : 여러 컴퓨터 간의 실시간 공동 작업)보다 웹 사이트에 더 많은 기능을 추가 할 수 있습니다. 호스트 환경 (예 : 웹 브라우저) 내에서 JavaScript는 해당 환경의 객체에 연결되어 프로그래밍 방식으로 제어 할 수 있습니다.

+ +

JavaScript는 Array, Date, Math와 같은 객체에 대한 표준 라이브러리와 연산자(operator), 제어 구조, 문과 같은 언어 요소의 코어 집합을 포함합니다. 코어 JavaScript는 거기에 추가 객체를 보충하여 다양한 목적으로 확장될 수 있습니다. 예를 들면:

+ +
    +
  • 클라이언트 측 JavaScript는 브라우저와 문서 객체 모델(DOM) 을 제어하는 객체를 제공하여 코어 언어를 확장합니다. 예를 들어, 클라이언트 측 확장은 어플리케이션이 요소(element)를 HTML 폼에 두고, 마우스 클릭, 폼 입력 및 페이지 탐색 같은 사용자 이벤트에 응답하게 해줍니다.
    • +
  • 서버 측 JavaScript는 서버에서 JavaScript 실행에 관련된 객체를 제공하여 코어 언어를 확장합니다. 예를 들어, 서버 측 확장은 어플리케이션이 데이터베이스와 통신하고, 한 번의 호출 정보의 연속성을 어플리케이션의 다른 곳에 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.
    • +
+ +

이것은 브라우저에서 JavaScript가 웹 페이지 (DOM)의 모양을 바꿀 수 있음을 의미합니다. 또한 서버의 Node.js JavaScript는 브라우저에 작성된 코드의 사용자 정의 요청에 응답 할 수 있습니다.

+ +

JavaScript 와 Java

+ +

JavaScript 와 Java는 여러 면에서 비슷하지만 어떤 면에서는 근본적으로 다릅니다. JavaScript 언어는 Java를 닮았지만 Java의 정적 형지정(static typing)과 강한 형 검사(strong type checking)가 없습니다. JavaScript는 대부분의 Java 식 구문, 명명 규칙 및 기본적인 흐름 제어 구조를 따릅니다. 그것이 LiveScript에서 JavaScript로 이름이 바뀐 이유였습니다.

+ +

Java의 선언에 의해 생성되는 클래스의 컴파일-타임 시스템과는 달리, JavaScript는 숫자, 불리언, 그리고 문자열 값을 표현하는 적은 수의 자료 형을 기반으로 한 런타임 시스템을 지원합니다. JavaScript 는 더 일반적인 클래스 기반 객체 모델 대신에 프로토타입 기반 객체 모델을 갖습니다. 프로토타입 기반 모델은 동적 상속을 제공합니다. 즉, 상속된 대상은 각각의 객체에 따라 다양할 수 있습니다. JavaScript는 또한 어떤 특정한 선언을 요구하지 않는 함수도 지원합니다. 함수는 객체의 속성이나, 타입이 느슨하게 형지정된 채 실행되는 메소드가 될 수 있습니다.

+ +

JavaScript는 Java에 비해 매우 자유로운 형태의 언어입니다. 여러분은 모든 변수, 클래스, 및 메소드를 선언하지 않아도 됩니다. 여러분은 메소드가 public, private, 또는 protected 인지 염려할 필요가 없고 인터페이스를 구현하지 않아도 됩니다. 변수, 매개변수(parameter), 및 함수의 반환 형은 명시적으로 지정되지 않습니다.

+ +

Java는 빠른 실행과 형 안전성(type safety)을 위해 설계된 클래스 기반 프로그래밍 언어입니다. 형 안전성은, 예를 들어, 여러분이 Java 정수를 객체의 레퍼런스로 형변환(cast)하거나 Java 바이트코드를 변경하여 private 메모리에 접근할 수 없음을 의미합니다. Java의 클래스 기반 모델은 프로그램이 오로지 클래스와 그 메소드로만 구성된다는 것을 뜻합니다. Java의 클래스 상속과 강한 형지정은 보통 단단하게 결합된 객체 계층구조를 요구합니다. 이러한 요구는 Java 프로그래밍을 JavaScript 프로그래밍보다 더 복잡하게 만듭니다.

+ +

반면에, JavaScript는 HyperTalk 과 dBASE 같은 더 작고 동적 형지정이 가능한 언어들의 정신을 계승했습니다. 이러한 스크립팅 언어는 더 쉬운 구문과 특별한 내장(built-in) 기능 및 객체 생성을 위한 최소 요구사항으로 인해 훨씬 더 많은 사람들에게 프로그래밍 도구를 제공합니다.

+ + + + + + + + + + + + + + + + + + + + + + + +
Java와 비교한 JavaScript
JavaScriptJava
객체 지향. 객체의 형 간에 차이 없음. 프로토타입 메커니즘을 통한 상속, 그리고 속성과 메서드는 어떤 객체든 동적으로 추가될 수 있음.클래스 기반. 객체는 클래스 계층구조를 통한 모든 상속과 함께 클래스와 인스턴스로 나뉨. 클래스와 인스턴스는 동적으로 추가된 속성이나 메소드를 가질 수 없음.
변수 자료형이 선언되지 않음(dynamic typing, loosely typed).변수 자료형은 반드시 선언되어야 함(정적 형지정, static typing).
하드 디스크에 자동으로 작성 불가.하드 디스크에 자동으로 작성 가능.
+ +

JavaScript와 Java의 차이에 대한 더 많은 정보는, 객체 모델의 세부사항 장을 보세요.

+ +

JavaScript 와 ECMAScript 명세

+ +

JavaScript는 JavaScript에 기반한 표준화된 국제 프로그래밍 언어를 제공하기 위해Ecma International 에서 표준화 됩니다 — European association for standardizing information and communication systems (ECMA는 이전에 European Computer Manufacturers Association의 두문자어였습니다). ECMAScript라 불리는 이 JavaScript의 표준화 버전은 표준을 지원하는 모든 어플리케이션에서 같은 방식으로 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해 공개 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세(specification)에서 문서화되었습니다. JavaScript와 ECMAScript 명세 판의 여러 버전에 대한 더 많은 것을 배우려면 New in JavaScript 을 보세요.

+ +

ECMA-262 표준은 또한 IOS-16262로서 ISO (국제 표준화 기구) 에 의해 승인되었습니다. Ecma International website 에서 그 명세를 찾을 수 있습니다. ECMAScript 명세는 World Wide Web Consortium (W3C) 나  WHATWG (Web Hypertext Application Technology Working Group)에 의해 표준화된 Document Object Model (DOM)을 설명하지 않습니다. DOM은 여러분의 스크립트에 HTML 문서 객체를 드러내는 방법을 정의합니다. JavaScript로 프로그래밍을 할 때 사용되는 여러 기술들에 대한 정보를 얻으 시려면, JavaScript technologies overview 를 참고하세요.

+ +

JavaScript 문서 vs ECMAScript 명세

+ +

ECMAScript 명세는 ECMAScript 구현을 위한 요구사항의 집합입니다; 여러분이 여러분의 ECMAScript 구현이나 엔진(가령 Firefox의 SpiderMonkey, 또는 Chrome의 v8)에서 표준을 따르는 언어의 기능을 구현하길 원할 때 유용합니다.

+ +

ECMAScript 문서는 스크립트 프로그래머를 돕기 위함이 아닙니다; 스크립트 작성을 위한 정보는 JavaScript 문서를 사용하세요.

+ +

ECMAScript 명세는 JavaScript 프로그래머에게 익숙하지 않을 수 있는 용어와 문법을 사용합니다. 언어의 기술이 ECMAScript 에서 다를 수 있지만, 언어 그 자체는 같습니다. JavaScript는 ECMAScript 명세에 서술된 모든 기능을 지원합니다.

+ +

JavaScript 문서는 JavaScript 프로그래머에게 적합한 언어의 측면을 설명합니다.

+ +

JavaScript 시작하기

+ +

JavaScript 시작은 쉽습니다: 최신 웹 브라우저만 있으면 됩니다. 이 안내서는 현재 Firefox의 최신 버전에서만 사용 가능한 약간의 JavaScript 기능을 포함하므로, 가장 최신 버전의 Firefox를 사용하기를 권합니다.

+ +

JavaScript를 실험하기 유용한 두 도구가 Firefox에 내장되어 있습니다: Web Console과 Scratchpad.

+ +

웹 콘솔

+ +

웹 콘솔은 현재 로드된 페이지에 대한 정보를 보이고, 또한 여러분이 현재 페이지에서 JavaScript 식을 실행해볼 수 있는 명령어 입력줄(command line)을 제공합니다.

+ +

웹 콘솔을 열기 위해서는, Firefox의 "도구" 메뉴 하위에 있는 "개발자" 메뉴의 "웹 콘솔"을 선택(윈도우와 리눅스에서는 Ctrl+Shift+I, 맥에서는  Cmd-Option-K)합니다. 브라우저 창의 아래에 웹 콘솔이 나타납니다. 콘솔의 바닥을 따라 나온 것이 여러분이 JavaScript를 입력할 수 있는 명령어 입력줄이고, 실행 결과는 바로 위 공간에 표시됩니다:

+ +

+ +

이 콘솔은 eval과 완전히 동일하게 동작합니다:마지막 입력된 표현식이 반환되죠. 간단하게 생각해서, 콘솔에 뭔가 입력할 때마다 eval로 감싼 console.log로 둘러싸인 형태라고 보시면 됩니다.

+ +
function greetMe(yourName) { alert('Hello ' + yourName); } console.log(eval('3 + 5'));
+ +

Scratchpad

+ +

Web Console은 한 줄 JavaScript를 실행하기에 훌륭합니다. 하지만 비록 여러 줄을 실행할 수 있지만, 아주 불편하고 Web Console을 사용해 여러분의 샘플 코드를 저장할 수도 없습니다. 그러므로 좀 더 복잡한 예제를 위해서는 Scratchpad가 더 나은 도구입니다.

+ +

Scratchpad를 열기 위해, Firefox의 메뉴 "Tools" 의 하위에 있는 "Web Developer" 메뉴의 "Scratchpad" 를 선택합니다(단축키: Shift+F4). 이것은 분리된 창에서 열리고 브라우저에서 JavaScript를 작성하고 실행하기 위해 사용할 수 있는 에디터입니다. 여러분은 또한 디스크로부터 스크립트를 부르거나 저장할 수도 있습니다.

+ +

+ +

Hello world

+ +

JavaScript 작성을 시작하기 위해서, Scratchpad를 열고 첫 JavaScript 코드 "Hello World" 를 작성하세요.

+ +
(function(){
+  "use strict";
+  /* Start of your code */
+  function greetMe(yourName) {
+    alert('Hello ' + yourName);
+  }
+
+  greetMe('World');
+  /* End of your code */
+})();
+ +

패드에서 코드를 선택하고 Ctrl + R 키를 눌러 브라우저에서 펼쳐지는 것을 지켜보십시오! 다음 페이지에서 이 가이드는 JavaScript 구문 및 언어 기능을 소개하므로보다 복잡한 응용 프로그램을 작성할 수 있습니다. 그러나 당분간은 (function () { "use strict"를 코드 앞에 추가하고}}) ();를 코드마지막에 추가하세요. 아직은 이코드가 뭔지 잘 모르겠지만 나중에 이 코드가 의미하는 것을 배울 것입니다, 지금은 간단히 다음과 같다고 생각하세요.

+ +
    +
  1. 성능을 크게 개선합니다.
    2. +
  2. 초보자가 실수하게 만드는 Javascript의 일부 시맨틱을 막습니다.
    3. +
  3. 콘솔에서 실행되는 코드 스니펫이 서로 상호 작용하지 못하도록합니다 (예 : 한 콘솔 실행에서 생성 된 내용을 다른 콘솔 실행에 사용하는 경우).
    4. +
+ +

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git a/files/ko/web/javascript/guide/meta_programming/index.html b/files/ko/web/javascript/guide/meta_programming/index.html new file mode 100644 index 0000000000..fe4fa13f83 --- /dev/null +++ b/files/ko/web/javascript/guide/meta_programming/index.html @@ -0,0 +1,258 @@ +--- +title: 메타 프로그래밍 +slug: Web/JavaScript/Guide/메타_프로그래밍 +translation_of: Web/JavaScript/Guide/Meta_programming +--- +
{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}
+ +

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.

+ +

Proxies

+ +

 ECMAScript 6에서 소개되었습니다, {{jsxref("Proxy")}} 객체는  특정 작업을 가로막는것과  사용자 정의 행위를 시행하는것을 허용합니다.예를 들면 객체가 속성을 가지는 것입니다:

+ +
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
+
+ +

The Proxy object defines a target (an empty object here) and a handler object in which a get trap is implemented. Here, an object that is proxied will not return undefined when getting undefined properties, but will instead return the number 42.

+ +

Additional examples are available on the {{jsxref("Proxy")}} reference page.

+ +

Terminology

+ +

The following terms are used when talking about the functionality of proxies.

+ +
+
{{jsxref("Global_Objects/Proxy/handler","handler","","true")}}
+
Placeholder object which contains traps.
+
traps
+
The methods that provide property access. This is analogous to the concept of traps in operating systems.
+
target
+
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.
+
invariants
+
Semantics that remain unchanged when implementing custom operations are called invariants. If you violate the invariants of a handler, a {{jsxref("TypeError")}} will be thrown.
+
+ +

Handlers and traps

+ +

The following table summarizes the available traps available to Proxy objects. See the reference pages for detailed explanations and examples.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Handler / trapInterceptionsInvariants
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}{{jsxref("Object.getPrototypeOf()")}}
+ {{jsxref("Reflect.getPrototypeOf()")}}
+ {{jsxref("Object/proto", "__proto__")}}
+ {{jsxref("Object.prototype.isPrototypeOf()")}}
+ {{jsxref("Operators/instanceof", "instanceof")}}		 +
    +
  • getPrototypeOf method must return an object or null.
    • +
  • If target is not extensible, Object.getPrototypeOf(proxy) method must return the same value as Object.getPrototypeOf(target).
    • +
+
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}{{jsxref("Object.setPrototypeOf()")}}
+ {{jsxref("Reflect.setPrototypeOf()")}}		If target is not extensible, the prototype parameter must be the same value as Object.getPrototypeOf(target).
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}{{jsxref("Object.isExtensible()")}}
+ {{jsxref("Reflect.isExtensible()")}}		Object.isExtensible(proxy) must return the same value as Object.isExtensible(target).
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}{{jsxref("Object.preventExtensions()")}}
+ {{jsxref("Reflect.preventExtensions()")}}		Object.preventExtensions(proxy) only returns true if Object.isExtensible(proxy) is false.
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}{{jsxref("Object.getOwnPropertyDescriptor()")}}
+ {{jsxref("Reflect.getOwnPropertyDescriptor()")}}		 +
    +
  • getOwnPropertyDescriptor must return an object or undefined.
    • +
  • A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
    • +
  • 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.
    • +
  • 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.
    • +
  • 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.
    • +
  • The result of Object.getOwnPropertyDescriptor(target)can be applied to the target object using Object.defineProperty and will not throw an exception.
    • +
+
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}{{jsxref("Object.defineProperty()")}}
+ {{jsxref("Reflect.defineProperty()")}}		 +
    +
  • A property cannot be added, if the target object is not extensible.
    • +
  • 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.
    • +
  • A property may not be non-configurable, if a corresponding configurable property of the target object exists.
    • +
  • If a property has a corresponding target object property then Object.defineProperty(target, prop, descriptor) will not throw an exception.
    • +
  • In strict mode, a false return value from the defineProperty handler will throw a {{jsxref("TypeError")}} exception.
    • +
+
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}Property query: foo in proxy
+ Inherited property query: foo in Object.create(proxy)
+ {{jsxref("Reflect.has()")}}		 +
    +
  • A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
    • +
  • 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.
    • +
+
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}Property access: proxy[foo]and proxy.bar
+ Inherited property access: Object.create(proxy)[foo]
+ {{jsxref("Reflect.get()")}}		 +
    +
  • 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.
    • +
  • 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.
    • +
+
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}Property assignment: proxy[foo] = barand proxy.foo = bar
+ Inherited property assignment: Object.create(proxy)[foo] = bar
+ {{jsxref("Reflect.set()")}}		 +
    +
  • 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.
    • +
  • Cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has undefined as its [[Set]] attribute.
    • +
  • In strict mode, a false return value from the sethandler will throw a {{jsxref("TypeError")}} exception.
    • +
+
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}Property deletion: delete proxy[foo] and delete proxy.foo
+ {{jsxref("Reflect.deleteProperty()")}}		A property cannot be deleted, if it exists as a non-configurable own property of the target object.
{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}Property enumeration / for...in: for (var name in proxy) {...}
+ {{jsxref("Reflect.enumerate()")}}		The enumerate method must return an object.
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}{{jsxref("Object.getOwnPropertyNames()")}}
+ {{jsxref("Object.getOwnPropertySymbols()")}}
+ {{jsxref("Object.keys()")}}
+ {{jsxref("Reflect.ownKeys()")}}		 +
    +
  • The result of ownKeys is a List.
    • +
  • The Type of each result List element is either {{jsxref("String")}} or {{jsxref("Symbol")}}.
    • +
  • The result List must contain the keys of all non-configurable own properties of the target object.
    • +
  • 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.
    • +
+
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}proxy(..args)
+ {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}
+ {{jsxref("Reflect.apply()")}}		There are no invariants for the handler.applymethod.
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}new proxy(...args)
+ {{jsxref("Reflect.construct()")}}		The result must be an Object.
+ +

Revocable Proxy

+ +

The {{jsxref("Proxy.revocable()")}} method is used to create a revocable Proxy object. This means that the proxy can be revoked via the function revoke and switches the proxy off. Afterwards, any operation on the proxy leads to a {{jsxref("TypeError")}}

+ +
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
+ +

Reflection

+ +

{{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")}}. Reflect is not a function object.

+ +

Reflect helps with forwarding default operations from the handler to the target.

+ +

With {{jsxref("Reflect.has()")}} for example, you get the in operator as a function:

+ +
Reflect.has(Object, 'assign'); // true
+ +

A better apply function

+ +

In ES5, you typically use the {{jsxref("Function.prototype.apply()")}} method to call a function with a given this value and arguments provided as an array (or an array-like object).

+ +
Function.prototype.apply.call(Math.floor, undefined, [1.75]);
+ +

With {{jsxref("Reflect.apply")}} this becomes less verbose and easier to understand:

+ +
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"
+ +

Checking if property definition has been successful

+ +

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:

+ +
if (Reflect.defineProperty(target, property, attributes)) {
+  // success
+} else {
+  // failure
+}
+ +

{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}

+ +

 

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html deleted file mode 100644 index 05deb2017f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/about/index.html +++ /dev/null @@ -1,109 +0,0 @@ ---- -title: About -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/About ---- -

이번 릴리즈의 새 기능

-

JavaScript 버전 1.5는 다음과 같은 개선과 새 기능을 제공합니다: -

런타임 오류
-런타임 오류가 예외로서 보고됩니다. -

숫자 표현 서식 개선
-숫자를 표현하는 서식이 Number.prototype.toExponential, Number.prototype.toFixed, Number.prototype.toPrecision 메소드를 포함함으로서 개선되었습니다. Number 개체 페이지를 보십시오. -

정규 표현식 개선
-정규표현식이 다음과 같이 개선되었습니다: -

- -

조건부 함수 선언
-함수를 if 조건안에서 선언할 수 있습니다. 함수 정의 페이지를 참고하세요. -

함수 표현식
-함수를 표현식 안에서 선언할 수 있습니다. 함수 정의 페이지를 참고하세요. -

Multiple catch clauses
-Multiple catch clauses in a try...catch statement are supported. See The catch Block page. -

Getters와 Setters
-JavaScript writers can now add getters and setters to their objects. This feature is available only in the C implementation of JavaScript. See the Defining Getters and Setters page. -

상수
-읽기전용의 상수가 지원됩니다. This feature is available only in the C implementation of JavaScript. See the Constants page. -

-

미리 알고 있어야 할 것

-

이 안내서는 당신이 다음과 같은 배경지식을 지녔다고 가정합니다: -

-
  • 인터넷과 World Wide Web (WWW)에 대한 상식적인 이해 -
  • HyperText Markup Language (HTML)에 대한 충분한 지식
    -
-

C 혹은 Visual Basic에 대한 프로그래밍 경험이 있으면 좋지만, 필수사항은 아닙니다. -

-

JavaScript 버전

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
JavaScript 버전Navigator 버전
JavaScript 1.0Navigator 2.0
JavaScript 1.1Navigator 3.0
JavaScript 1.2Navigator 4.0-4.05
JavaScript 1.3Navigator 4.06-4.7x
JavaScript 1.4 
JavaScript 1.5Navigator 6.0
모질라 (오픈소스 브라우저)
-

표1: JavaScript와 Navigator 버전
-
-Each version of the Netscape Enterprise Server also supports a different version of JavaScript. To help you write scripts that are compatible with multiple versions of the Enterprise Server, this manual uses an abbreviation to indicate the server version in which each feature was implemented. -

- - - - - - - - - - - - - -
AbbreviationEnterprise Server version
NES 2.0Netscape Enterprise Server 2.0
NES 3.0Netscape Enterprise Server 3.0
-

Table 2: Abbreviations of Netscape Enterprise Server versions -

-

JavaScript 정보를 찾을 수 있는 곳

-

The core JavaScript documentation includes the following books: -

- -

If you are new to JavaScript, start with the Core JavaScript Guide. Once you have a firm grasp of the fundamentals, you can use the Core JavaScript Reference to get more details on individual objects and statements. -

-

문서 규약

-

JavaScript 응용프로그램은 많은 운영체제에서 실행됩니다. 이 책에 있는 정보는 모든 운영체제에 적용됩니다. 파일과 디렉토리 경로는 Windows 형식(디렉토리 이름을 구분하는데 역슬래시를 사용)으로 썼습니다. Unix에서는 역슬래시를 슬래시로 바꾸어 사용하면 됩니다. -

이 안내서에서 URL은 다음과 같은 형태로 씁니다. -

http://server.domain/path/file.html -

이 URL에서 "server"는 우리가 응용프로그램을 실행하는 서버 이름(research1이나 www 등)이고, "domain"은 인터넷 도메인 이름(netscape.com이나 uiuc.edu 등)입니다. "path"는 서버의 디렉토리 구조를 나타내고, "file.html"은 파일 이름입니다. 일반적으로 URL에서 이탤릭체로 쓴 부분은 알맞은 내용으로 바꿔써야 할 내용(placeholder)이고, 평범한 고정폭 글꼴은 그대로 쓰면 되는 내용입니다. Secure Socket Layer(SSL)을 사용하는 서버라면 http 대신 https를 쓰면 됩니다. -

이 안내서는 다음과 같은 관례를 따릅니다. -

-
  • 고정폭 글꼴은 샘플 코드, API, 언어 요소(메소드 이름, 속성 이름 등), 파일 이름, 경로, 디렉토리 이름, HTML 태그, 화면에 입력해야 할 텍스트를 나타내는 데 쓰입니다. (고정폭 이탤릭체는 코드 내용 중에서 적당히 알맞은 내용으로 바꿔써야 할 부분을 나타내는 데 씁니다.) -
  • 이탤릭체는 책 제목, 강조, 변수, 뜻 그대로 쓰인 단어(words in the literal sense)에 씁니다. -
  • 굵은 글씨는 용어에 씁니다. -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide", "Core_JavaScript_1.5_Guide:JavaScript_Overview") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/About", "fr": "fr/Guide_JavaScript_1.5/\u00c0_propos", "ja": "ja/Core_JavaScript_1.5_Guide/About", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/O" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 20601a0e81..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages ---- -

클래스 기반언어와 프로토타입 기반언어

-

Java와 C++이라는 클래스 기반의 객체지향언어는 클래스와 인스턴스라는 2개의 다른 실체가 있다는 개념에 기초하고 있습니다.

-
  • 클래스는 어떤 객체의 집합을 특징짓는 모든 속성(Java에서는 메소드와 필드를, C++에서는 멤버를 프로퍼티로 간주)을 정의합니다. 클래스란 그것이 나타내는 객체집합의 특정멤버가 아닌, 추상적인것입니다. 예를들어, Employee클래스는 모든 종업원의 집합을 나타냅니다.
  • 한편, 인스턴스는 클래스를 실례로 한것입니다. 즉, 그 멤버중 하나인것입니다. 예를들어, Victoria는 Employee클래스의 인스턴스가 될 수 있습니다. 이 클래스는 특정 개인을 종업원으로서 표현하고 있는것입니다. 인스턴스는 그 부모클래스의 속성을 정확하게 유지하고 있습니다.
    • -
-

JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。

-

クラスの定義

-

クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。

-

JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。

-

サブクラスと継承

-

クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。

-

JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。

-

プロパティの追加と削除

-

クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。

-

違いの概要

-

次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。

- -
クラスベース (Java) プロトタイプベース (JavaScript)
クラスとインスタンスは異なる実体である。 すべてのオブジェクトはインスタンスである。
クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。 コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。
new 演算子を用いて単一のオブジェクトを作成する。 同じ。
既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。 コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。
クラスチェーンに従ってプロパティを継承する。 プロトタイプチェーンに従ってプロパティを継承する。
クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。 コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}

-
-

{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html deleted file mode 100644 index 7b5f5c577c..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/constants/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Constants -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Constants -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Constants ---- -

상수

-

const 키워드를 이용하면 읽기 전용의 이름 있는 상수를 만들 수 있습니다. 상수 식별자(const identifier)는 변수의 식별자와 동일합니다. 문자나 밑줄로 시작해야 하고, 알파벳, 숫자, 밑줄 문자를 사용할 수 있습니다. -

-
const prefix = '212';
-
-

상수는 스크립트 실행 중에 값을 대입하거나 다시 선언하여 값을 바꿀 수 없습니다. -

전역 상수인 경우에도 항상 const 키워드를 붙여야 한다는 점만 제외하면, 상수의 범위 규칙은 변수의 경우와 동일합니다. const 키워드가 없으면 변수라고 판정됩니다. -

같은 범위에 있는 함수나 변수의 이름과 같은 이름으로 상수를 만들 수 없습니다. 예를 들어, -

-
//이 코드는 에러를 낼 것입니다
-function f() {};
-  const f = 5;
-
-//이 코드 또한 에러를 냅니다.
-function f() {
-  const g = 5;
-  var g;
-
-  //그 외 코드...
-
-}
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Variables", "Core_JavaScript_1.5_Guide:Literals") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Constants", "fr": "fr/Guide_JavaScript_1.5/Constantes", "ja": "ja/Core_JavaScript_1.5_Guide/Constants", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Sta\u0142e" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html deleted file mode 100644 index d969b378f4..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_a_regular_expression/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: Creating a Regular Expression -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_a_Regular_Expression ---- -

정규표현식 만들기

-

정규표현식은 다음의 두 가지 방법으로 만들 수 있습니다.

-
    -
  • 정규표현식 상수값을 이용하여 만들기
    • -
-
 re = /ab+c/;
-
-
-
-
- 정규표현식 상수값은 스크립트가 실행될 때 컴파일됩니다. 따라서 정규표현식의 값이 변하지 않을 경우, 이 방법을 사용하면 좀 더 나은 성능을 얻을 수 있습니다.
-
-
-
-
    -
  • RegExp 객체의 생성자를 호출하여 만들기
    • -
-
 re = new RegExp("ab+c");
-
-
-
-
- 생성자를 이용하면 실행 시간에 정규표현식이 컴파일됩니다. 정규표현식 패턴이 바뀔 것을 알고 있거나, 또는 패턴을 사용자의 입력 등을 통해 외부에서 가져오려고 할 때 이 방법을 사용하십시오.
-
-
-
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Special_Operators", "Core_JavaScript_1.5_Guide:Writing_a_Regular_Expression_Pattern") }}

-
-

 

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html deleted file mode 100644 index 3238e19b0f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_getters_and_setters/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: Defining Getters and Setters -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters ---- -

getter/setter 정의하기

- -

getter는 속성의 값을 얻어오는 메소드이고, setter는 속성의 값을 설정하는 메소드입니다. 우리는 언어에서 미리 정의한 핵심 개체들과 사용자 정의 개체에 getter/setter를 정의할 수 있습니다. getter와 setter를 정의할 때 쓰이는 문법은 개체 상수값 문법입니다.

- -

다음의 JS 쉘 세션은 사용자가 정의한 개체 o에 대해서 getter와 setter가 어떻게 동작하는지 보여줍니다. JS 쉘은 JavaScript를 한 번에 실행(batch)하거나 대화식으로(interactively) 실행할 수 있게 해주는 응용프로그램입니다.

- -

o 개체에는 이런 속성이 있습니다.

- -
    -
  • o.a - 수
    • -
  • o.b - o.a 더하기 1을 반환하는 getter
    • -
  • o.c - 받은 값을 2로 나누어서 o.a에 설정하는 setter
    • -
- -
js> o = new Object;
-[object Object]
-js> o = {a:7, get b() {return this.a+1; }, set c(x) {this.a = x/2}};
-[object Object]
-js> o.a
-7
-js> o.b
-8
-js> o.c = 50
-js> o.a
-25
-js>
-
- -

다음 JavaScript 쉘 세션은 이미 정의된 Date 모든 인스턴스에 year 속성을 추가하기 위해서 getter/setter가 어떻게 Date 프로토타입을 확장하는지 보여줍니다. 이 세션에서는 year 속성의 getter와 setter를 지원하기 위해서 Date에 있는 getFullYear 메소드와 setFullYear 메소드를 사용하고 있습니다.

- -

이 문장들은 year 속성에 대한 getter와 setter를 정의합니다.

- -
js> var d = Date.prototype;
-js> d.__defineGetter__("year", function() { return this.getFullYear(); });
-js> d.__defineSetter__("year", function(y) { this.setFullYear(y); });
-
- -

이 문장들은 Date의 getter/setter를 사용합니다.

- -
js> var now = new Date;
-js> print(now.year);
-2000
-js> now.year=2001;
-987617605170
-js> print(now);
-Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
- -
JavaScript 1.5를 개발하는 동안 이미 존재하는 개체에 getter/setter를 추가할 때 getter =, setter =이라는 식의 문법을 사용하던 때가 잠깐 있었습니다. 이 문법은 이제 사용하지 말아야 합니다. 현재의 JS 1.5 엔진에서는 경고를 발생시키고, 더 나중의 버전에서는 문법 에러를 발생시키게 될 것입니다.
- -

 

- -

요약

- -

getter/setter를

- -
    -
  • 개체 초기화 지정자를 이용해서 정의하거나,
    • -
  • 개체가 만들어진 이후에 getter/setter 추가 메소드를 이용해서 언제든지 추가할 수 있습니다.
    • -
- -

개체 초기화 지정자를 이용할 때는 단순히 getter 메소드 앞에는 get을 써주고 setter 메소드 앞에는 set을 써주기만 하면됩니다. 물론 getter 메소드에는 매개변수가 없어야 하고 setter에는 정확히 하나만 있어야 합니다. 다음 예제에서와 같이 말입니다.

- -
o = {
-  a:7,
-  get b() { return this.a+1; },
-  set c(x) { this.a = x/2; }
-};
-
- -

개체가 생성된 이후에 어느 때라도 __defineGetter__와 __defineSetter__라는 메소드를 이용하면 getter/setter를 정의할 수 있습니다. 두 메소드 모두 첫 번째 매개변수에 getter/setter 이름을 나타내는 문자열을 받습니다. 두 번째 매개변수는 getter/setter로서 호출될 함수를 받습니다. 예제를 보십시오.

- -
o.__defineGetter__("b", function() { return this.a+1; });
-o.__defineSetter__("c", function(x) { this.a = x/2; });
-
- -

두 가지 중에서 어떤 방식을 택할지는 프로그래밍 스타일이나 해야할 작업에 달려있습니다. 프로토타입을 정의하는데 이미 개체 초기화 지정자를 사용하고 있다면 거의 첫 번째 방식을 사용할 것입니다. 첫 번째가 좀 더 단순하고 자연스러운 방식입니다. 그러나 우리가 직접 프로토토입을 만들거나 개체를 생성할 수 없어서 나중에 getter/setter를 추가해야 하는 상황이라면 두 번째 방식을 사용할 수 밖에 없습니다. 두 번째 방식은 JavaScript의 동적인 특성을 잘 보여주는 방식입니다. 하지만 코드를 읽고 이해하기 어렵게 만들 수도 있습니다.

- -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html deleted file mode 100644 index 8e91a2007f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_methods/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: Defining Methods -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Methods ---- -

메소드 정의

-

- - 메소드 - 는 개체와 연관되어 있는 함수입니다. 일반적인 함수를 정의하는 것과 같은 방법으로 메소드를 정의합니다. 그 후에, 존재하는 개체와 함수를 연관시키기 위해서 다음과 같은 문법을 사용합니다.

-
object.methodname = function_name
-
-

object는 존재하는 개체중에 하나이고, methodname은 지금 추가하려는 메소드 이름이며, function_name은 함수 이름입니다.

-

이제 우리는 개체의 메소드를 호출할 때 다음과 같이 할 수 있습니다.

-
object.methodname(params);
-
-

개체 생성자 함수에 메소드 정의를 포함시켜서 개체 타입에 대한 메소드를 정의할 수 있습니다. 예를 들어, 미리 정의된 car 개체의 속성을 출력해주는 함수를 정의할 수 있습니다.

-
function displayCar() {
-   var result = "A Beautiful " + this.year + " " + this.make
-      + " " + this.model;
-   pretty_print(result);
-}
-
-

pretty_print는 가로선과 문자열을 출력하는 함수입니다. 이 메소드가 포함된 개체를 참조하기 위해서 this를 사용하고 있다는 것을 주의해서 보십시오.

-

아래 문장을 개체 정의에 추가함으로써 이 함수를 car의 메소드로 만들 수 있습니다.

-
this.displayCar = displayCar;
-
-

그러므로 car 개체의 완벽한 정의는 아래와 같은 모습이 될 것입니다.

-
function car(make, model, year, owner) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-   this.owner = owner;
-   this.displayCar = displayCar;
-}
-
-

그러면 우리는 모든 car 개체에 대해서 이런 식으로 displayCar 메소드를 호출할 수 있게됩니다.

-
car1.displayCar()
-car2.displayCar()
-
-

이 코드는 다음 그림과 같은 내용을 만들어냅니다.

-

Image:obja.gif 그림 7.1: 메소드 출력 결과

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_this_for_Object_References") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html deleted file mode 100644 index 17c2aa7de8..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/defining_properties_for_an_object_type/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Defining Properties for an Object Type -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Properties_for_an_Object_Type ---- -

개체 형식에 속성 정의하기

-

prototype 속성을 이용하면 이미 정의해 놓은 개체 형식에 속성을 추가할 수 있습니다. 이 방법을 사용하면 개체의 인스턴스 하나에만 속성이 추가되는 것이 아니라 같은 타입의 모든 개체가 공유하는 속성을 정의합니다. 다음 코드는 car 형식의 모든 개체에 color 속성을 추가하고, car1 개체의 color 속성에 값을 할당하는 코드입니다.

-
Car.prototype.color=null;
-car1.color="black";
-
-

더 많은 정보를 얻으려면 기본 JavaScript 레퍼런스에 있는 Function 개체의 prototype 속성을 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html deleted file mode 100644 index 1b6f50cc11..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/deleting_properties/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -title: Deleting Properties -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Deleting_Properties ---- -

속성 제거

-

delete 연산자를 사용하여 속성을 제거할 수 있습니다. 어떻게 속성을 제거하는지 코드를 보십시오.

-
//a와 b라는 속성을 가지는 새 개체를 만듭니다.
-myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-//myobj가 속성 b만을 가지도록 속성 a를 지웁니다.
-delete myobj.a;
-
-

전역 변수를 선언할 때 var 키워드를 사용하지 않았다면 그 전역 변수를 제거하는데 delete 연산자를 사용할 수 있습니다.

-
g = 17;
-delete g;
-
-

더 많은 정보를 얻으려면 delete를 보십시오. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html deleted file mode 100644 index 8345ba1478..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/index.html +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Creating New Objects -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects ---- -{{wiki.localize('System.API.page-generated-for-subpage')}} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html deleted file mode 100644 index 84b9df2c2d..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/indexing_object_properties/index.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -title: Indexing Object Properties -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Indexing_Object_Properties ---- -

개체 속성 접근하기

-

JavaScript 1.0에서는 개체의 속성을 참조할 때 개체 이름이나 순서 인덱스를 사용할 수 있습니다. 그러나 JavaScript 1.1과 그 이후 버전에서는 처음에 속성을 정의할 때 이름으로 정의했으면 항상 이름으로만 참조해야 하고, 인덱스로 정의했으면 인덱스로만 참조해야 합니다.

-

이런 제한은 앞 페이지 예제의 car 개체 형식처럼 생성자 함수로 개체와 개체 속성을 만들 때나 명시적으로 개별 속성을 만들 때(예를 들어 myCar.color = "red" 같은 식으로 속성을 추가할 때) 모두 적용됩니다. 그러므로 myCar{{ mediawiki.external(5) }} = "25 mpg"라고 인덱스를 이용해서 속성을 정의하면 그 이후로는 항상 myCar{{ mediawiki.external(5) }}로 참조할 수 있습니다.

-

이 규칙은 forms 배열 같이 HTML을 반영하여 생성된 개체에는 예외입니다. 이 배열에 있는 개체를 참조할 때는 순서(문서에 기록된 순서)를 나타내는 숫자나 이름(이름을 정의한 경우에만)을 이용하여 참조할 수 있습니다. 예를 들어, 문서에 있는 두 번째 <FORM> 태그가 "myForm"이라는 값을 가진 NAME 속성을 갖고 있다면 이 폼은 document.forms{{ mediawiki.external(1) }}, document.forms{{ mediawiki.external('\"myForm\"') }}, document.myForm으로 접근할 수 있습니다. {{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_a_Constructor_Function", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Properties_for_an_Object_Type") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html deleted file mode 100644 index 552347b70e..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_a_constructor_function/index.html +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Using a Constructor Function -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_a_Constructor_Function ---- -

생성자 함수 사용하기

-

다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.

-
    -
  1. 생성자 함수를 작성함으로써 개체를 정의합니다.
    2. -
  2. new 키워드를 사용하여 개체의 인스턴스를 만듭니다.
    3. -
-

개체 형식을 정의하기 위해서, 개체의 이름, 속성, 메소드를 지정하는 함수를 만듭니다. 자동차를 나타내기 위한 개체를 만들고 싶다고 해봅시다. 그렇다면 이 형식이 car라고 불리길 원할 것이고, make, model, year라는 속성이 있기를 원할 것입니다. 원하는 것을 이루기 위해서 이런 함수를 작성합니다.

-
function car(make, model, year) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-}
-
-

함수의 인자로 전달받은 값을 개체의 속성에 할당하기 위해서 this를 사용했다는 것을 명심하십시오.

-

이제 우리는 mycar라는 개체를 이렇게 만들 수 있습니다.

-
mycar = new car("Eagle", "Talon TSi", 1993);
-
-

이 문장은 mycar를 만들고, 지정된 값을 mycar의 속성에 할당합니다. 그러면 mycar.make는 "Eagle"이라는 문자열 값을 가지고, mycar.year는 1993이라는 정수를 가질 것입니다.

-

우리는 new를 써서 car 개체를 몇 개라도 만들 수 있습니다.

-
kenscar = new car("Nissan", "300ZX", 1992);
-vpgscar = new car("Mazda", "Miata", 1990);
-
-

개체는 다른 개체를 속성으로 가질 수 있습니다. 예를 들어, person 개체를 다음과 같이 정의했다고 합시다.

-
function person(name, age, sex) {
-   this.name = name;
-   this.age = age;
-   this.sex = sex;
-}
-
-

그리고나서 person 개체의 인스턴스 두 개를 만듭니다.

-
rand = new person("Rand McKinnon", 33, "M");
-ken = new person("Ken Jones", 39, "M");
-
-

이제 우리는 car가 owner라는 속성으로 person 개체를 가지도록 car의 정의를 바꿀 수 있습니다.

-
function car(make, model, year, owner) {
-   this.make = make;
-   this.model = model;
-   this.year = year;
-   this.owner = owner;
-}
-
-

새 개체 인스턴스를 만들 때 이렇게 쓸 수 있습니다.

-
car1 = new car("Eagle", "Talon TSi", 1993, rand);
-car2 = new car("Nissan", "300ZX", 1992, ken);
-
-

위 문장에서 owner 인자로 문자열 상수값이나 정수값을 전달하는 대신 rand와 ken이라는 개체를 전달했다는 사실에 주의하십시오. 이제 car2의 소유자 이름을 알고 싶으면 이런식으로 접근할 수 있습니다.

-
car2.owner.name
-
-

정의된 개체에 아무때나 속성을 추가할 수 있다는 사실을 기억하십시오.

-
car1.color = "black"
-
-

이 문장은 car1에 color 속성을 추가하고 "black"이라는 값을 할당합니다. 그러나 이 문장이 다른 개체에 영향을 미치지는 않습니다. 같은 형식을 가지는 모든 개체에 새 속성을 추가하고 싶으면 car 개체 형식의 정의에 속성을 추가해야 합니다.

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Using_Object_Initializers", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Indexing_Object_Properties") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html deleted file mode 100644 index 0ed663ae1f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/creating_new_objects/using_this_for_object_references/index.html +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Using this for Object References -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Creating_New_Objects/Using_this_for_Object_References ---- -

this를 사용한 개체 참조

-

JavaScript에는 this라는 키워드가 있는데, 메소드 안에서 현재 개체를 참조하기 위해서 이 키워드를 사용할 수 있습니다. 예를 들어, 개체의 값 속성을 검증하는 validate라는 함수가 있다고 해봅시다.

-
function validate(obj, lowval, hival) {
-   if ((obj.value < lowval) || (obj.value > hival))
-      alert("Invalid Value!");
-}
-
-

그러면 폼의 각 요소의 onchange 이벤트 핸들러에서 validate를 호출할 때, 다음 예제와 같은 방법으로 this를 사용해서 폼 요소를 validate에 전달할 수 있습니다.

-
<input type="text" name="age" size="3"
-   onChange="validate(this, 18, 99)">
-
-

form 속성과 같이 사용하면, this는 현재 개체의 부모 폼을 참조할 수 있습니다. 다음 예제에서, myForm이라는 폼은 Text 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 Text 개체의 값을 폼 이름으로 바꿉니다. 버튼의 onclick 이벤트 핸들러에서 부모 폼인 myForm을 참조하기 위해서 this.form을 사용하고 있습니다.

-
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-      onclick="this.form.text1.value=this.form.name">
-</p>
-</form>
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Methods", "Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html deleted file mode 100644 index d9f8bb0bf9..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/expressions/index.html +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Expressions -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Expressions ---- -

표현식

-

표현식은 상수(literals), 변수, 연산자 그리고 단일값을 반환하는 계산식(값은 숫자, 문자열, 논리값이 가능)이 알맞게 조합된 집합체다. -

개념적으로 보면 표현식에는 두가지 타입이 있다: 하나는 변수에 값을 할당하는 것이고 다른 하나는 단순히 값을 가지고 있는 것이다. 예를 들어, x = 7 이라는 표현식은 x 에 7이라는 값을 할당하는 표현식이다. 이 표현식은 스스로 7이라는 값을 부여한다. 이런 표현식들은 할당 연산자를 사용한다. 반면에, 3 + 4 라는 표현식은 단순히 7이라는 값을 계산할 뿐이다; 할당하지 않는다. 이런 표현식에서 사용되는 연산자는 그냥 단순히 연산자라고만 한다. -

JavaScript에는 다음과 같은 타입의 표현식이 있다: -

-
  • 산술형 : 3.14159와 같이 숫자를 표현(evaluate). (일반적으로 산술 연산자를 사용) -
  • 문자열형: "Fred"나 "234"와 같이 문자열을 표현(evaluate). (일반적으로 문자열 연산자를 사용) -
  • 논리형: 참(true) 혹은 거짓(false)을 표현(evaluate). (종종 논리 연산자와 함께 사용) -
  • 객체형: 객체를 표현(evaluate). (객체표현식에 사용하는 다양한 연산자는 특수 연산자를 참고) -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Unicode", "Core_JavaScript_1.5_Guide:Operators") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Expressions", "fr": "fr/Guide_JavaScript_1.5/Expressions", "ja": "ja/Core_JavaScript_1.5_Guide/Expressions", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Wyra\u017cenia" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html deleted file mode 100644 index 310ab25c67..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/javascript_overview/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: JavaScript Overview -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/JavaScript_Overview ---- -

JavaScript란 무엇인가?

-

JavaScript는 크로스 플랫폼, 객체 지향 스크립트 언어입니다. JavaScript는 작고, 가벼운 언어입니다; JavaScript는 단독으로 쓰이는 언어로는 유용하지 않지만, 웹 브라우져 같은 다른 제품이나 프로그램에 포함하기 쉽습니다. 호스트 환경에서 JavaScript는 그 환경의 다른 개체(object)들을 프로그램적으로 제어하기 위해서 그들과 연결될 수 있습니다.

-

기본 JavaScript(core JavaScript)는 Array, Date, Math등 기본이 되는 개체들(core set of objects)과 연산자, 제어 구조, 문장등 언어의 기본 요소들(core set of language elements)을 포함하고 있습니다. 기본 JavaScript는 다른 개체를 추가함으로써 다양한 목적을 위해 확장될 수 있습니다. 예를 들면 다음과 같은 것들입니다.

-
  • "클라이언트쪽 JavaScript"는 브라우저(Navigatore 또는 다른 브라우저들)와 브라우저의 Document Object Model(DOM)을 제어할 수 있는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 클라이언트쪽 확장 기능은 응용프로그램이 HTML 폼에 요소를 두어 마우스 클릭이나 폼 입력, 페이지 이동 같은 사용자 이벤트에 반응할 수 있게 합니다.
  • "서버쪽 JavaScript"는 서버에서 JavaScript를 실행하는 데 연관되는 개체들을 제공함으로써 기본 언어를 확장합니다. 예를 들어, 서버쪽 확장 기능은 응용프로그램이 관계형 데이터베이스와 통신할 수 있게 하고, 응용프로그램의 호출들 사이에 연속성을 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.
    • -
-

JavaScript의 LiveConnect 기능을 통해서, Java와 JavaScript 코드가 서로 통신할 수 있습니다. JavaScript에서 Java 개체를 초기화하여 개체의 공개 메소드와 필드에 접근할 수 있습니다. Java에서 JavaScript 개체, 속성(property), 메소드에 접근할 수 있습니다.

-

Netscape가 JavaScript를 개발했고 Netscape 브라우저에서 JavaScript가 가장 먼저 사용되었습니다.

-

JavaScript와 Java

-

JavaScript 와 Java 는 여러가지 면에서 비슷하지만 본질적으로 다릅니다. JavaScript는 Java 와 공통점이 있지만 Java 처럼 형(type)을 검사하지 않습니다. JavaScript는 Java 문법의 대부분과 제어흐름의 기본적인 개념들을 지원합니다.

-

Java의 클래스 선언으로 이루어지는 컴파일 타임 시스템에 대조적으로, JavaScript는 수, 불리언, 문자열 값을 나타내는 작은 규모의 자료형에 기반한 런타임 시스템을 지원합니다. JavaScript는 클래스 기반 개체 모델이 아닌 프로토타입 기반(prototype-based) 개체 모델을 갖고 있습니다. 프로토타입 기반 개체 모델은 동적인 상속을 제공합니다. 즉, 각각의 개체를 상속할 수 있는 것입니다. JavaScript는 또 특별히 선언시의 요구사항이 없는 함수도 지원합니다. 함수는 느슨하게 타입된 메소드로 실행됨으로써 개체의 속성이 될 수 있습니다.(Functions can be properties of objects, executing as loosely typed methods.)

-

Java에 비해 JavaScript는 형식이 자유로운 언어입니다. 모든 변수, 클래스, 메소드들을 꼭 선언 할 필요는 없습니다. 메소드가 public, private, protected 인지 고민해야할 필요가 없고, interface를 구현할 필요도 없습니다. 변수, 매개변수(parameter), 함수의 반환 형식도 명시적으로 지정할 필요가 없습니다.

-

Java는 클래스 기반 프로그래밍 언어로서, 빠른 실행과 형 안정성(type safety)을 위해 설계되었습니다. 형 안정성이란 예를 들면 Java에서 정수를 개체 참조로 변환할 수 없고, Java 바이트코드에 오류를 일으켜서 사적인(private) 메모리 공간에 접근할 수 없다는 말입니다. 자바의 클래스 기반 모델은 프로그램이 클래스와 클래스의 메소드로만 이루어진다는 의미입니다. Java의 클래스 상속과 엄격한 형 검사(strong typing)는 일반적으로 단단히 결합된 개체의 계층 구조를 필요로 합니다. 이런 요구사항이 JavaScript 프로그래밍에 비해 Java 프로그래밍을 더 복잡하게 만듭니다.

-

반면 JavaScript는 HyperTalk나 dBASE 같이 적은 줄수의 동적 타입 언어를 계승한 것입니다. 이런 스크립트 언어는 더 많은 사람들을 위한 프로그래밍 도구로서 제공되는데, 이 언어들이 문법이 쉽고, 내장되기에 쉬우며, 개체 생성에 요구 사항이 단순하기 때문입니다.

- -
JavaScript Java
개체 지향. 개체의 형식 사이에 구분이 없음. 프로토타입 메커니즘을 통해 상속을 지원하고, 어떤 개체에든지 동적으로 속성과 메소드를 추가할 수 있습니다. 클래스 기반. 개체는 클래스 계층 구조를 관통하는 상속을 통해서 클래스와 인스턴스(instance)로 나뉩니다. 클래스와 인스턴스에는 동적으로 속성과 메소드를 추가할 수 없습니다.
변수의 자료형을 선언하지 않음(동적 형 검사) 변수의 자료형을 반드시 선언해야 함(정적 형 검사)
Cannot automatically write to hard disk. Cannot automatically write to hard disk.
-

표(Table) 1.1: JavaScript 와 Java 비교
-
-Java와 JavaScript 사이의 차이점에 대해서 더 알고 싶으시면 개체 모델의 상세 내용을 보시기 바랍니다.

JavaScript와 ECMAScript 명세

-

Netscape가 JavaScript를 개발했고, Netscape 브라우저에서 가장 처음으로 사용되었습니다. 그러나 Ecma International - 정보와 통신 시스템을 표준화하기 위한 유럽 기구(공식적으로 ECMA - the European Computer Manufacturers Association으로 알려짐) - 과 Netscape가 공동으로 작업하여 기본 JavaScript에 기반하여 표준화되고 국제적인 프로그래밍 언어를 만들어냈습니다. JavaScript의 표준화된 버전은 ECMAScript라고 부르고, 표준을 지원하는 응용프로그램에서는 모두 동일하게 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해서 공개된 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세에 문서화되어 있습니다.

-

ECMA-262 표준은 ISO (International Organization for Standardization, 국제 표준화기구)의 승인을 받아 ISO-16262가 되었습니다. Mozilla 웹사이트에서 ECMA-262의 PDF 문서를 얻을 수 있습니다. the Ecma International 웹사이트 에서도 명세를 찾을 수 있습니다. ECMAScript 명세는 World Wide Web Consortium (W3C)에서 표준화 한 Document Object Model(DOM)에 대해서는 설명하지 않습니다. DOM은 HTML 문서 개체들이 스크립트에 노출되는 방식을 정의합니다.

-

JavaScript 버전과 ECMAScript 판본 사이의 관계

-

Netscape는 ECMA와 밀접하게 작업하여 ECMAScript Specification(ECMA-262)를 만들었습니다. JavaScript 버전과 ECMAScript 판본(edition)들 사이의 관계가 아래 표에 설명되어 있습니다.

- -
JavaScript 버전 ECMAScript 판본과의 관계
JavaScript 1.1 ECMA-262, 1판은 JavaScript 1.1에 기초합니다.
JavaScript 1.2 JavaScript 1.2가 발표됐을 때 ECMA-262가 아직 완성되지 않았습니다. 다음과 같은 이유때문에 JavaScript 1.2는 ECMA-262 1판과 완벽하게 호환되지 않습니다.
  • Netscape는 JavaScript 1.2에 몇 가지 기능을 추가했으나, ECMA-262에서 고려하지 못했습니다.
  • ECMA-262는 두 가지 새 기능을 추가했습니다. 유니코드를 이용한 국제화, 모든 플랫폼에서의 동일한 동작. Date 개체 같은 JavaScript 1.2의 몇 가지 기능이 플랫폼에 의존적이었습니다.

JavaScript 1.3

JavaScript 1.3은 ECMA-262 1판과 완벽하게 호환됩니다.

JavaScript 1.3은 ==와 !=연산자를 제외하고는 JavaScript 1.2의 추가적인 기능을 그대로 유지하면서 JavaScript 1.2가 ECMA-262와 어긋나던 점들을 해결했습니다. ==, != 연산자는 ECMA-262에 맞추기 위해 수정되었습니다.

JavaScript 1.4

JavaScript 1.4는 ECMA-262 1판과 완벽하게 호환됩니다.

JavaScript 1.4가 발표되었을 때 ECMAScript 명세의 세 번째 버전이 아직 완성되지 않았습니다.
JavaScript 1.5 JavaScript 1.5는 ECMA-262 3판과 완벽하게 호환됩니다.
-

표 1.2: JavaScript 버전과 ECMAScript 판본
-
-참고: ECMA-262 2판은 1판에 편집상 사소한 변경과 버그 수정을 가한 판본입니다. 현재 ECMA의 TC39 워킹그룹에서 ECMAScript 4판을 작업하고 있습니다. 4판은 JavaScript 2.0과 대응될 것입니다.

-

JavaScript 기본 레퍼런스에서 ECMAScript 호환 기능을 보여줍니다.

-

JavaScript는 항상 ECMAScript Specification에 포함되지 않은 기능들을 포함할 것입니다. JavaScript는 추가적인 기능을 제공하지만 ECMAScript와 호환됩니다.

-

JavaScript 문서 vs ECMAScript 명세서

-

ECMAScript 명세는 ECMAScript를 구현하는데 필요한 요구사항을 모아놓은 것입니다. 이것은 우리가 JavaScript의 한 기능이 다른 ECMAScript 구현에서도 지원될 것인지 결정하는데 유용합니다. ECMAScript에서 지원하는 기능만을 사용하는 JavaScript 코드를 작성할 계획이라면 ECMAScript 명세를 살펴볼 필요가 있을 것입니다.

-

ECMAScript 문서는 스크립트 프로그래머를 돕기위해 작성된 것이 아닙니다. 스크립트 작성에 대한 정보를 얻으려면 JavaScript 문서를 보십시오.

-

JavaScript와 ECMAScript 용어

-

ECMAScript 명세는 JavaScript 프로그래머에게는 친숙하지 않은 용어와 문법을 사용하여 작성되었습니다. 비록 ECMAScript의 언어 설명이 다르긴 하지만 언어는 똑같습니다. JavaScript는 ECMAScript 명세에서 설명하는 모든 기능을 지원합니다.

-

JavaScript 문서는 JavaScript 프로그래머에게 적당한 언어의 측면을 설명합니다. 예를 들면 이렇습니다.

-
  • 전역 개체(Global Object)는 JavaScript 문서에서는 논의되지 않는데, 그것은 우리가 그 개체를 직접 사용할 일이 없기 때문입니다. 전역 개체에서 우리가 사용할 만한 메소드와 속성은 JavaScript 문서에서 논의되고 있기는 하지만 최상위(top-level) 함수와 속성이라고 부릅니다.
  • JavaScript 문서에서 매개변수가 없는 Number와 String 개체 생성자는 논의되지 않고 있는데, 그것은 거의 사용할 일이 없기 때문입니다. Number의 인자없는 생성자는 +0을 반환하고, String의 인자없는 생성자는 ""(빈 문자열)을 반환합니다.
    • -
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:About", "Core_JavaScript_1.5_Guide:Values") }}

-

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/JavaScript_Overview", "fr": "fr/Guide_JavaScript_1.5/Aper\u00e7u_de_JavaScript", "ja": "ja/Core_JavaScript_1.5_Guide/JavaScript_Overview", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Podgl\u0105d_JavaScriptu" } ) }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html deleted file mode 100644 index ee62d0cecf..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/literals/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: Literals -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Literals -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Literals ---- -

상수값(Literal)

-

JavaScript에서 값을 표현하기 위해 상수값을 사용할 수 있습니다. 그것은 변수가 아니라 고정된 값으로서 "문자 그대로(literally)" 스크립트에 값을 제공하는 것입니다. 이 절에서 다음과 같은 상수값에 대해서 설명하겠습니다.

-
    -
  • {{ Anch("배열 상수값") }}
    • -
  • {{ Anch("불리언 상수값") }}
    • -
  • {{ Anch("소수 상수값") }}
    • -
  • {{ Anch("정수") }}
    • -
  • {{ Anch("개체 상수값") }}
    • -
  • {{ Anch("문자열 상수값") }}
    • -
-

배열 상수값

-

배열 상수값은 대괄호([])안에 배열의 원소(element)를 0개 이상 나열한 것입니다. 배열 상수값으로 배열을 만드면 배열은 지정된 원소를 가지도록 초기화되고, 지정된 원소의 개수만큼의 길이를 갖게 됩니다.

-

다음 예제는 세 개의 원소를 가지고 길이가 3인 coffees 배열을 만드는 예제입니다.

-
coffees = ["French Roast", "Colombian", "Kona"]
-

참고 배열 상수값은 개체 초기화지정자(object initializer) 중의 하나입니다. 개체 초기화지정자 사용하기를 보십시오.

-

최상위 스크립트에서 상수값을 이용하여 배열을 만들면 JavaScript는 배열 상수값을 포함하는 표현식을 평가(evaluate)할 때마다 배열을 만듭니다. 또한, 함수 안에서 사용된 상수값은 함수가 호출될 때마다 생성됩니다.

-

배열 상수값은 Array 개체입니다. Array 개체에 대한 상세한 내용은 Array 개체를 보십시오.

-

배열 상수값의 추가적인 쉼표

-

배열 상수값에 모든 원소를 지정할 필요는 없습니다. 쉼표만 찍어 두면 값이 할당되지 않은 빈 공간을 가진 배열이 만들어집니다. 다음 예제는 fish 배열을 만듭니다.

-
fish = ["Lion", , "Angel"]
-

이 배열은 값을 가진 원소 두 개와 빈 원소 하나를 갖게됩니다. (fish{{ mediawiki.external(0) }}은 "Lion", fish{{ mediawiki.external(1) }}은 undefined, fish{{ mediawiki.external(2) }}는 "Angel"이라는 값을 가집니다.)

-

원소 목록 끝에 남겨둔 쉼표는 무시됩니다. 다음 예제에서 배열 길이는 3입니다. myList{{ mediawiki.external(3) }}은 만들어지지 않습니다. 그외에 목록에 있는 다른 쉼표들은 각각 새로운 원소를 나타냅니다.

-
myList = ['home', , 'school', ];
-

다음 예제에서 배열 길이는 4이고, myList{{ mediawiki.external(0) }}과 myList{{ mediawiki.external(2) }}는 비게 됩니다.

-
myList = [ , 'home', , 'school'];
-

다음 예제에서 배열 길이는 4이고 myList{{ mediawiki.external(1) }}과 myList{{ mediawiki.external(3) }}이 비게 됩니다. 오직 마지막 쉼표만 무시됩니다.

-
myList = ['home', , 'school', , ];
-

불리언 상수값

-

불리언 형은 두 가지 상수값을 가질 수 있는데, 그것은 true와 false입니다.

-

true, false라는 기본(primitive) 불리언 값과 true, false 값의 불리언 개체를 혼동하지 마십시오. 불리언 개체는 기본 불리언 데이터 형을 감싸는 역할을 할 뿐입니다. 더 많은 정보는 불리언 개체를 참조하십시오.

-

정수

-

10진수, 16진수, 8진수 정수를 쓸 수 있습니다. 10진수 정수 상수값은 0(영)으로 시작하지 않는 숫자의 나열입니다. 0(영)으로 시작하는 정수 상수값은 8진수입니다. 0x(또는 0X)로 시작하면 16진수입니다. 16진수는 0부터 9까지의 숫자와 a부터 f나 A부터 F까지의 문자를 포함할 수 있습니다. 8진수에는 0부터 7까지만 쓸 수 있습니다.

-

8진수 정수 상수값은 사용하지 말기를 추천하고 있으며, ECMA-262 표준 3판에서는 아예 제거되었습니다. 하위 호환성을 위해 JavaScript 1.5에서는 여전히 8진수 정수 상수값을 지원하고 있습니다.

-

몇 가지 정수 상수값을 예를 보여드리겠습니다.

-
0, 117, -345 (10진수)
-015, 0001, -077 (8진수)
-0x1123, 0x00111, -0xF1A7 (16진수 또는 "hex")
-
-

소수 상수값

-

소수 상수값은 이런 부분으로 이뤄집니다.

-
    -
  • 부호를 가질 수 있는(즉, "+"나 "-"로 시작할 수 있는) 10진수 정수,
    • -
  • 소수점("."),
    • -
  • 소수 부분(10진수),
    • -
  • 지수 부분
    • -
-

지수 부분은 "e"나 "E" 뒤에 숫자가 붙은 형태입니다. 숫자 앞에는 부호("+"나 "-")를 붙일 수도 있습니다. 소수 상수값은 적어도 하나의 숫자에 소수점 또는 지수 부분을 가져야 합니다.

-

소수 상수값의 몇 가지 예제를 보여드리겠습니다. 3.1415, -3.1E12, .1e12, 2E-12

-

개체 상수값

-

개체 상수값은 중괄호({}) 안에 특성(property) 이름과 그에 해당하는 값의 쌍을 나열한 것입니다. 문장(statement)의 시작 부분에 개체 상수값을 사용해서는 안됩니다. { 가 블럭의 시작을 나타내기 때문에, 에러가 나거나 의도하지 않은 동작을 보일 것입니다.

-

다음은 개체 상수값의 예입니다. car 개체의 첫 번째 원소는 myCar라는 특성을 정의하고 있습니다. 두 번째 원소는 getCar 특성을 정의하는데, (CarTypes("Honda"));라는 함수를 호출하고 있습니다. 세 번째 원소는 special 특성을 정의하는데에 Sales라는 변수를 사용합니다.

-
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
-

개체 특성 이름에 정수 상수값이나 문자열 상수값을 사용할 수 있고, 개체 안에 다른 개체를 포함시킬 수도 있습니다. 다음 예제를 보십시오.

-
car = {manyCars: {a: "Saab", b: "Jeep"}, 7: "Mazda"}
-
-document.write(car.manyCars.b); // Jeep
-document.write(car[7]); // Mazda
-
-

다음 사항을 참고하십시오.

-
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
-
-

문자열 상수값

-

문자열 상수값은 큰따옴표(")나 작은따옴표(')로 둘러싸인 0개 이상의 문자들 입니다. 문자열은 같은 종류의 따옴표로 묶어야 합니다. 즉, 작은따옴표 둘로 묶거나, 큰따옴표 둘로 묶어야 한다는 말입니다. 문자열 상수값의 예를 보여드리겠습니다.

-
    -
  • "blah"
    • -
  • 'blah'
    • -
  • "1234"
    • -
  • "one line \n another line"
    • -
  • "John's cat"
    • -
-

우 리는 문자열 상수값에 String 개체의 모든 메소드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 상수값을 임시 String 개체로 만들어서 메소드를 호출한 후, 임시 String 개체를 제거합니다. 문자열 상수값에 String.length 특성을 사용할 수도 있습니다. 이렇게 말입니다.

-
    -
  • "John's cat".length
    • -
-

우리가 특별하게 String 개체를 필요로 하는 경우가 아니라면 문자열 상수값을 사용해야만 합니다. String 개체에 대한 자세한 내용은 String 개체를 보십시오.

-
문자열에서 특수문자 사용하기
-

다음 예제에서 볼 수 있듯이 일반적인 문자뿐만 아니라 특수문자도 문자열에 쓸 수 있습니다.

-
"one line \n another line"
-

JavaScript 문자열에 사용할 수 있는 특수문자를 표로 나타낸 것입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
문자의미
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Apostrophe or single quote
\"Double quote
\\Backslash character (\).
\XXX세 자리 까지의 8진수 "XXX"로 지정하는 Latin-1 인코딩의 문자. 0부터 377 사이. 예를 들어, \251은 저작권 기호의 8진수 표현입니다.
\xXX두 자리 까지의 16진수 "XX"로 지정하는 Latin-1 인코딩의 문자. 00부터 FF 사이. 예를 들어, \xA9는 저작권 기호의 16진수 표현입니다.
\uXXXX네 자리의 16진수 "XXXX"로 지정하는 유니코드 문자. 예를 들어, \u00A9는 저작권 기호의 유니코드 표현입니다. 유니코드 이스케이프 시퀀스를 보십시오.
-

표 2.1: JavaScript 특수문자

-
문자 이스케이프
-

표 2.1에 없는 문자에 대해서는 역슬래시가 무시됩니다. 그러나 이러한 기능은 사용하지 않기를 권장하므로 사용을 피해야만 합니다.

-

역슬래시를 앞에 붙이면 문자열 안에 따옴표를 넣을 수 있습니다. 이것은 따옴표 "이스케이프(escaping)"라고 알려져 있습니다.

-
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service."
-document.write(quote)
-
-

이 코드의 결과는 다음과 같습니다.

-
He read "The Cremation of Sam McGee" by R.W. Service.
-
-

문자열 안에 역슬래시 문자를 넣고 싶으면 역슬래시 문자를 이스케이프시켜야 합니다. 예를 들어, c:\temp 라는 경로를 문자열에 할당하고 싶으면 다음과 같이 하면 됩니다.

-
var home = "c:\\temp"
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Constants", "Core_JavaScript_1.5_Guide:Unicode") }}

-

{{ 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" } ) }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html deleted file mode 100644 index abe9ff83f4..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/objects_and_properties/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: Objects and Properties -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Objects_and_Properties ---- -

객체와 속성

-

자바스크립트 객체는 객체를 구성하는 속성을 가지고 있습니다. 속성에는 간단한 방법으로 접근할 수 있습니다.: -

-
객체이름.속성이름
-
-

객체 이름과 속성 이름 두 가지 모두에 대해 알기쉬운 예가 있습니다. 속성은 값을 지정하여 정의합니다. 예를 들어 myCar라는 객체가 있다면(객체가 이미 존재한다고 가정합니다.), make, model, year라는 속성에 다음과 같이 값을 지정할 수 있습니다. -

-
myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-
-

배열은 한 가지 변수 이름으로 결합되어 있는 연속된 값의 집합입니다. 자바스크립트에서 속성과 배열은 밀접한 관련이 있습니다; 말하자면 그 두 가지는 같은 데이터 구조에 다른 인터페이스라는 뜻입니다. 예를 들면 myCar 객체에 다음과 같이 접근할 수도 있습니다: -

-
myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1967;
-
-

이러한 배열의 종류는 연관 배열이라고 부릅니다. 왜냐하면 각각의 인덱스 요소가 문자열 값과 연관되어 있기 때문입니다. 이러한 방식에 대한 설명은 다음의 함수에 객체와 객체의 이름을 입력했을 때 객체의 속성을 표시해주는 다음과 같은 함수에서 알아볼 수 있습니다: -

-
function show_props(obj, obj_name) {
-   var result = "";
-   for (var i in obj)
-      result += obj_name + "." + i + " = " + obj[i] + "\n";
-   return result;
-}
-
-

결과적으로 call show_props(myCar, "myCar")라는 함수 호출은 다음과 같은 값을 반환합니다: -

-
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1967
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Functions:escape_and_unescape_Functions", "Core_JavaScript_1.5_Guide:Creating_New_Objects") }} -

{{ languages( { "fr": "fr/Guide_JavaScript_1.5/Objets_et_propri\u00e9t\u00e9s", "ja": "ja/Core_JavaScript_1.5_Guide/Objects_and_Properties", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_i_w\u0142a\u015bciwo\u015bci" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html deleted file mode 100644 index f8793b4cbc..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Arithmetic Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Arithmetic_Operators ---- -

산술 연산자

-

산술 연산자는 수(상수값이든지 변수든지)를 받아서 하나의 수를 반환합니다. 표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)입니다. 이 연산자들은 대부분의 다른 프로그래밍 언어에서 처럼 동작합니다. 예외적으로 / 연산자는 JavaScript에서 소수를 반환합니다. C나 Java 같은 다른 언어에서는 / 연산자가 소수 부분은 잘라버립니다. 예를 들면 이렇습니다. -

-
1/2 //returns 0.5 in JavaScript
-1/2 //returns 0 in Java
-
-

JavaScript는 다음 표에 나오는 산술 연산자를 제공합니다. -

- - - - - - - - - - - - - - - - - - - - - - - - - - -
연산자설명예제
%
(나머지)		2항(binary) 연산자. 두 피연산자의 나눗셈에서 나온 나머지를 반환합니다.12 % 5 returns 2.
++
(증가)		단항(unary) 연산자. 피연산자에 1을 더함. 전위 연산자(++x)를 사용하면 피연산자에 1을 더한 후 그 값을 반환합니다. 후위 연산자(x++)를 사용하면 피연산자에 1을 더하기 전에 피연산자의 값을 반환합니다.x가 3일 때, ++x는 x를 4로 만들고 4를 반환합니다. 반면 x++는 x를 4로 만들고 3을 반환합니다.
--
(감소)		단항 연산자. 피연산자에서 1을 뺌. 반환값은 증가 연산자와 동일한 방식으로 결정됩니다.x가 3일 때, --x는 x를 2로 만들고 2를 반환합니다. 반면 x--는 x를 2로 만들고 3을 반환합니다.
-
(단항 부정)		단항 연산자. 피연산자의 부호를 바꾼 값을 반환합니다.x가 3이면 -x는 -3을 반환합니다.
-

표 3.4: 산술 연산자 -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Comparison_Operators", "Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_arithm\u00e9tiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_arytmetyczne" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html deleted file mode 100644 index dbc284f12f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/assignment_operators/index.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Assignment Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Assignment_Operators ---- -

할당 연산자

-

할당 연산자는 왼쪽 피연산자에 오른쪽 피연산자의 값을 할당합니다. 가장 기본적인 할당 연산자에는 등호(=)가 있는데, 왼쪽 피연산자의 값을 오른쪽 연산자에 할당합니다. 즉, x = y 라고 하면 y의 값이 x에 할당되는 것입니다.

-

다른 할당 연산자는 다음 표에서 보듯이 표준연산을 약식으로 쓰는 것입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
약식 연산자의미
x += yx = x + y
x -= yx = x - y
x *= yx = x * y
x /= yx = x / y
x %= yx = x % y
x <<= yx = x << y
x >>= yx = x >> y
x >>>= yx = x >>> y
x &= yx = x & y
x ^= yx = x ^ y
x |= yx = x | y
-

표: 할당 연산자

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators", "Core_JavaScript_1.5_Guide:Operators:Comparison_Operators") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html deleted file mode 100644 index 3aed13da65..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/bitwise_operators/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Bitwise Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Bitwise_Operators ---- -


-

-

비트 연산자

-

비트 연산자는 피연산자를 10진수나 16진수, 8진수로 다루지 않고 32개의 비트 집합으로 다룹니다. 예를 들어, 10진수 9는 2진수로 1001입니다. 비트 연산자는 2진수 표현으로 연산을 하지만 반환값은 JavaScript 표준 수 값으로 반환합니다. -

JavaScript의 비트 연산자를 다음 표에 요약했습니다. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
연산자사용법설명
비트 ANDa & b두 피연산자의 대응되는 비트가 모두 1이면 1을 반환.
비트 ORa | b두 피연산자의 대응되는 비트에서 둘 중 하나가 1이거나 모두 1인 경우 1을 반환.
비트 XORa ^ b두 피연산자의 대응되는 비트에서 둘 중 하나가 1이고, 둘 다 1이 아닐 경우 1을 반환.
비트 NOT~ a피연산자의 비트를 뒤집음.
왼쪽으로 이동a << ba의 2진수 표현을 b 비트만큼 왼쪽으로 이동함. 오른쪽은 0으로 채움.
부호 비트로 채우는 오른쪽 이동a >> ba의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버림.
0으로 채우는 오른쪽 이동a >>> ba의 2진수 표현을 b 비트만큼 오른쪽으로 이동함. 오른쪽 남는 비트는 버리고, 왼쪽은 0으로 채움.
-

표 3.5: 비트 연산자 -

-

비트 논리 연산자

-

개념적으로 비트 논리 연산자는 다음과 같이 동작합니다. -

-
  • 피연산자는 32비트 정수로 변환되어 비트의 나열로 표현됩니다. -
  • 두 피연산자의 비트를 같은 위치에 있는 것 끼리 짝을 짓습니다. -
  • 짝 지어진 각각의 쌍에 대해서 연산자를 적용하여 결과를 만들어냅니다. -
-

예를 들어, 9를 2진수로 쓰면 1001이고 15를 2진수로 표현하면 1111입니다. 두 값에 비트 연산을 적용하면 결과는 다음과 같습니다. -

-
  • 15 & 9 yields 9 (1111 & 1001 = 1001) -
  • 15 | 9 yields 15 (1111 | 1001 = 1111) -
  • 15 ^ 9 yields 6 (1111 ^ 1001 = 0110) -
-

비트 이동 연산자

-

비트 이동 연산자는 피연산자 두 개를 받습니다. 첫 번째는 이동하려는 수이고, 두 번째는 첫 번째 피연산자를 몇 비트나 이동시킬지 나타내는 비트 수입니다. 이동 방향은 사용된 연산자에 따라 다릅니다. -

이동 연산자는 피연산자를 32비트 정수로 변환하여 연산하고, 왼쪽 연산자와 같은 자료형으로 반환합니다. -

이동 연산자는 다음 표에 있습니다. -

- - - - - - - - - - - - - - - - - - - - -
연산자설명예제
<<
-(왼쪽 이동)		이 연산자는 첫 번째 피연산자의 비트를 지정된 수만큼 왼쪽으로 옮깁니다. 왼쪽으로 넘친 비트는 버립니다. 오른쪽 빈 자리는 0으로 채웁니다. 9<<2는 36을 반환합니다. 1001을 왼쪽으로 2비트 이동하면 100100이 되고 이것은 36이기 때문입니다.
>>
-(부호 비트로 채우는 오른쪽 이동)		이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 원래 가장 왼쪽에 있던 비트 값으로 채웁니다.9>>2는 2를 반환합니다. 1001을 2비트 오른쪽으로 이동하면 10이 되는데 이것은 2이기 때문입니다. 비슷하게 -9>>2는 -3을 반환하는데, 부호가 유지되기 때문입니다.
>>>
-(0으로 채우는 오른쪽 이동)		이 연산자는 첫 번째 피연산자의 비트를 지정된 수 만큼 오른쪽으로 옮깁니다. 오른쪽으로 넘친 비트는 버립니다. 왼쪽 빈 자리는 0으로 채웁니다.19>>>2는 4를 반환합니다. 10011을 2비트 오른쪽으로 이동하면 100이 되기 때문입니다. 음수가 아닌 수에 대해서는 0을 채우는 오른쪽 이동이나 부호 비트로 채우는 오른쪽 이동이 똑같은 결과를 반환합니다.
-

표 3.6: 비트 이동 연산자 -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Arithmetic_Operators", "Core_JavaScript_1.5_Guide:Operators:Logical_Operators") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_bit-\u00e0-bit", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Bitwise_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_bitowe" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html deleted file mode 100644 index 53b8e67492..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: Operators -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators ---- -

연산자

-

JavaScript에는 다음과 같은 연산자 타입이 있습니다. 이 섹션은 연산자에 대해 기술하고 연산자 우선순위에 대한 정보를 제공합니다. -

- -

JavaScript는 이항연산자와 단항연산자를 모두 사용할 수 있습니다. 이항연산자는 두개의 피연산자(operand)를 가지며, 하나의 피연산자는 연산자 앞에 나머지 하나는 뒤에 위치합니다: -

-
operand1 operator operand2
-
-

예를 들자면, 3+4 혹은 x*y와 같은 것입니다. -

단항연산자는 연산자 앞 혹은 뒤쪽에 하나의 피연산자만 있으면 됩니다: -

-
operator operand
-
-

혹은 -

-
operand operator
-
-

예를 들자면, x++ 혹은 ++x와 같은 것입니다. -

덧붙여, JavaScript는 한개의 삼항연산자, 조건 연산자를 가지고 있습니다. 삼항 연산자는 세개의 피연산자가 필요합니다. -

-

연산자 우선순위

-

관련된 논의에 따라서, 아래의 표는 우선순위 순으로 내림차순 정렬되었습니다. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
연산자 타입사용하는 연산자
멤버 .  []
호출 / 인스턴스 생성 ()  new
부정/증감 !  ~  -  +  ++  --  typeof  void  delete
곱하기/나누기 *  /  %
더하기/빼기 +  -
비트 이동 <<  >>  >>>
관계 <  <=  >  >=  in  instanceof
같음 ==  !=  ===  !==
비트연산-and &
비트연산-xor ^
비트연산-or |
논리연산-and &&
논리연산-or ||
조건 ?:
할당 =  +=  -=  *=  /=  %=  <<=  >>=  >>>=  &=  ^=  |=
컴마,
-

표: 연산자 우선순위 -

이 표의 보다 자세한 버전은 레퍼런스 섹션에 있는 각 연산자별 상세한 추가 설명 링크를 참고하세요. -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Expressions", "Core_JavaScript_1.5_Guide:Operators:Assignment_Operators") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs", "ja": "ja/Core_JavaScript_1.5_Guide/Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html deleted file mode 100644 index edf5f640a5..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/logical_operators/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -title: Logical Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Logical_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Logical_Operators ---- -

논리 연산자

-

논리 연산자는 주로 불리언(논리적) 값과 함께 사용됩니다. 그때 논리 연산자는 불리언 값을 반환합니다. 그러나 &&와 || 연산자는 실제로는 피연산자 중에 하나의 값을 반환하기 때문에, 이 연산자가 불리언 값이 아닌 값과 함께 사용되면 불리언 값이 아닌 값을 반환할 것입니다. 다음 표에 논리 연산자에 대해서 설명했습니다. -

- - - - - - - - - - - - - - - - - - - - - -
연산자사용법설명
&&expr1 && expr2(논리적 AND) expr1이 false로 변환될 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 피연산자 둘 모두가 true일 때 &&는 true를 반환하고 그렇지 않을 때는 false를 반환합니다.
||expr1 || expr2(논리적 OR) expr1이 true로 변환될 수 있으면 expr1을 반환하고 그렇지 않으면 expr2를 반환합니다. 그러므로 불리언 값과 같이 사용하면 ||는 피연산자 중에서 하나만 true이면 true를 반환합니다. 둘 다 false이면 false를 반환합니다.
!!expr(논리적 NOT) 피연산자가 true로 변환될 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.
-

표 3.7: 논리 연산자 -

false로 변환될 수 있는 표현식은 null, 0, 빈 문자열(""), undefined로 평가될 수 있는 표현식들입니다. -

다음 코드는 && 연산자를 사용하는 예를 보여줍니다. -

-
a1=true && true       // t && t returns true
-a2=true && false      // t && f returns false
-a3=false && true      // f && t returns false
-a4=false && (3 == 4)  // f && f returns false
-a5="Cat" && "Dog"     // t && t returns Dog
-a6=false && "Cat"     // f && t returns false
-a7="Cat" && false     // t && f returns false
-
-

다음 코드는 || 연산자를 사용하는 예를 보여줍니다. -

-
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
-
-

다음 코드는 ! 연산자를 사용하는 예를 보여줍니다. -

-
n1=!true              // !t returns false
-n2=!false             // !f returns true
-n3=!"Cat"             // !t returns false
-
-

단축 평가

-

논리 표현식이 왼쪽부터 오른쪽으로 평가되기 때문에 다음 규칙을 이용해서 "단축(short-circuit)" 평가를 할 수 있습니다. -

-
  • false && 아무 표현식은 false로 단축 평가 됩니다. -
  • true || 아무 표현식은 true로 단축 평가 됩니다. -
-

이 규칙을 따라 평가를 수행한다고 해서 피연산자를 모두 평가할 때와 결과가 달라지지 않습니다. 아무 표현식 부분은 평가되지 않기 때문에 아무런 부수 효과(side effect)도 일어나지 않는다는 것에 주의하십시오. -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Bitwise_Operators", "Core_JavaScript_1.5_Guide:Operators:String_Operators") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_logiques", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_logiczne" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html deleted file mode 100644 index f238901cab..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/special_operators/index.html +++ /dev/null @@ -1,229 +0,0 @@ ---- -title: Special Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/Special_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/Special_Operators ---- -

특수 연산자

-

JavaScript 다음과 같은 특별한 연산자를 제공합니다. -

-
  • {{ Anch("조건 연산자") }} -
  • {{ Anch("쉼표 연산자") }} -
  • {{ Anch("delete") }} -
  • {{ Anch("in") }} -
  • {{ Anch("instanceof") }} -
  • {{ Anch("new") }} -
  • {{ Anch("this") }} -
  • {{ Anch("typeof") }} -
  • {{ Anch("void") }} -
-

조건 연산자

-

조건 연산자는 JavaScript에서 유일하게 세 개의 피연산자를 사용하는 연산자입니다. 연산자는 조건에 따라 둘 중에 하나의 값을 가질 수 있습니다. 문법은 이렇습니다. -

-
condition ? val1 : val2
-
-

condition이 true이면 연산자는 val1의 값을 갖습니다. 그렇지 않으면 val2의 값을 갖습니다. 다른 표준 연산자를 사용할 수 있는 곳이면 어디든지 조건 연산자를 사용할 수 있습니다. -

-
status = (age >= 18) ? "adult" : "minor"
-
-

이 문장은 age가 18이거나 더 큰 경우에 status 변수에 "adult"라는 값을 할당합니다. 그렇지 않으면 "minor"라는 값을 할당합니다. -

-

쉼표 연산자

-

쉼표 연산자(,)는 단순히 피연산자 둘을 모두 평가하고 두 번째 피연산자의 값을 반환하는 연산자입니다. 이 연산자는 주로 for 반복문에서 변수 여러 개가 매번 업데이트 되게 하는데 쓰입니다. -

예를 들어 a가 각각 10줄의 원소를 가지는 2차원 배열일 때, 다음 코드에서는 변수 두 개를 한 번에 바꾸기 위해서 쉼표 연산자를 사용하고 있습니다. 이 코드는 배열의 대각선 원소를 출력합니다. -

-
for (var i=0, j=9; i <= 9; i++, j--)
-   document.writeln("a["+i+"]["+j+"]= " + a[i][j])
-
-

delete

-

delete는 개체(object), 개체의 속성(property), 배열의 특정 인덱스에 있는 원소(element)를 지우는 연산자입니다. 문법은 이렇습니다. -

-
delete objectName
-delete objectName.property
-delete objectName[index]
-delete property // with 문장 안에서만 유효합니다
-
-

objectName은 개체 이름이고, property는 개체에 존재하는 속성이고, index는 배열의 원소 위치를 나타내는 정수입니다. -

네 번째 형식은 개체의 속성을 지우는 코드인데, with 문장 안에서만 사용할 수 있습니다. -

암시적으로 선언된 변수를 지울 때는 delete 연산자를 사용할 수 있지만 var 문장을 이용해서 선언된 변수는 지울 수 없습니다. -

delete 연산자 실행이 성공하면, 속성이나 원소가 undefined로 설정됩니다. delete 연산자는 실행이 가능하면 true를 반환하고, 불가능하면 false를 반환합니다. -

-
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 (암시적으로 선언되었으므로 지울 수 있습니다)
-
-

배열의 원소를 지우기
-배열의 원소를 지울 때, 배열의 길이에는 변화가 없습니다. 예를 들어, a{{ mediawiki.external(3) }}, a{{ mediawiki.external(4) }}를 지우더라도 a{{ mediawiki.external(4) }}와 a{{ mediawiki.external(3) }}은 여전히 정의되지 않습니다. -

delete 연산자가 배열 원소를 제거할 때 원소는 더이상 배열에 존재하지 않습니다. 아래 예제에서 trees{{ mediawiki.external(3) }}은 delete로 제거되었습니다. -

-
trees=new Array("redwood","bay","cedar","oak","maple")
-delete trees[3]
-if (3 in trees) {
-   // 이 블록은 실행되지 않습니다.
-}
-
-

배열 원소가 존재하긴 하지만 정의되지 않은 값을 가지도록 하고 싶다면 delete 연산자 대신 undefined 키워드를 사용하십시오. 다음 예제에서 trees{{ mediawiki.external(3) }}에 undefined 값을 할당했지만 배열 요소는 여전히 존재합니다. -

-
trees=new Array("redwood","bay","cedar","oak","maple")
-trees[3]=undefined
-if (3 in trees) {
-   // 이 블록은 실행됩니다.
-}
-
-

in

-

in 연산자는 지정된 속성이 지정된 개체에 있으면 true를 반환합니다. 문법은 이렇습니다. -

-
propNameOrNumber in objectName
-
-

propNameOrNumber은 속성 이름을 나타내는 문자열이나 배열 인덱스를 나타내는 수이고, objectName은 개체 이름입니다. -

다음 예제는 in 연산자의 몇 가지 사용법을 보여줍니다. -

-
// 배열
-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
-
-

instanceof

-

instanceof는 지정된 개체가 지정된 개체 형식이면 true를 반환합니다. 문법은 이렇습니다. -

-
objectName instanceof objectType
-
-

objectName은 objectType과 비교할 개체의 이름이고, objectType은 개체 형식으로 Date나 Array 같은 것입니다. -

실행중에 개체의 형식을 알고 싶으면 instanceof를 사용하면 됩니다. 예를 들어 예외를 처리할 때, 발생한 예외의 형식에 따라 서로 다른 예외 처리 코드를 실행할 수 있습니다. -

다음 코드에서 theDay가 Date 개체인지 결정하기 위해서 instanceof를 사용합니다. theDay는 Date 개체이기 때문에 if문 안에 있는 문장이 실행됩니다. -

-
theDay=new Date(1995, 12, 17)
-if (theDay instanceof Date) {
-   // 실행할 문장
-}
-
-

new

-

사용자 정의 개체 형식이나 Array, Boolean, Date, Function, Image, Number, Object, Option, RegExp, String 같이 미리 정의된 개체 형식의 인스턴스를 만들 때 new 연산자를 사용합니다. 서버에서는 DbPool, Lock, File, SendMail 등을 만들 때 사용할 수 있습니다. new는 다음과 같이 사용합니다. -

-
objectName = new objectType ( param1 [,param2] ...[,paramN] )
-
-

개체 초기화 지정자 사용하기에 설명한 것처럼 개체 초기화 지정자를 이용해서 개체를 만들 수도 있습니다. -

더 많은 정보를 얻으려면 JavaScript 레퍼런스의 new 연산자 페이지를 보시기 바랍니다. -

-

this

-

현재 개체를 참조할 때 this 키워드를 사용합니다. 일반적으로 this는 메소드를 호출하는 개체를 참조합니다. 다음과 같이 사용하면 됩니다. -

-
this[.propertyName]
-
-

예제 1.
-개체의 value 속성이 높거나 낮은 값을 가지는지 검증하는 validate라는 함수가 있다고 가정합시다. -

-
function validate(obj, lowval, hival) {
-   if ((obj.value < lowval) || (obj.value > hival))
-      alert("Invalid Value!")
-}
-
-

이제 우리는 폼의 각 요소의 onChange 이벤트 핸들러에서 validate 함수를 호출하면서, this를 이용하여 스스로를 함수에 전달할 수 있습니다. -

-
<B>Enter a number between 18 and 99:</B>
-<INPUT TYPE = "text" NAME = "age" SIZE = 3
-   onChange="validate(this, 18, 99)">
-
-

예제 2.
-form 속성과 결합되면, this는 현재 개체가 포함된 폼을 참조할 수 있습니다. 다음 예제에서 myForm 폼은 Text 개체와 버튼을 포함하고 있습니다. 사용자가 버튼을 클릭하면 Text 개체의 값이 폼 이름으로 설정됩니다. 버튼의 onClick 이벤트 핸들러는 부모 폼인 myForm을 참조하기 위해서 this.form을 사용하고 있습니다. -

-
<FORM NAME="myForm">
-Form name:<INPUT TYPE="text" NAME="text1" VALUE="Beluga">
-<P>
-<INPUT NAME="button1" TYPE="button" VALUE="Show Form Name"
-   onClick="this.form.text1.value=this.form.name">
-</FORM>
-
-

typeof

-

typeof 연산자는 둘 중 한 가지 방법으로 사용할 수 있습니다. -

-
1. typeof operand
-2. typeof (operand)
-
-

typeof 연산자는 피연산자의 평가되지 않은 형식을 나타내는 문자열을 반환합니다. 피연산자는 string, variable, keyword, object 등의 타입을 반환하게 됩니다. 괄호는 선택적입니다. -

우리가 이런 변수를 정의했다고 해봅시다. -

-
var myFun = new Function("5+2")
-var shape="round"
-var size=1
-var today=new Date()
-
-

typeof는 이 변수들에 대해서 다음과 같은 결과를 반환할 것입니다. -

-
typeof myFun is function
-typeof shape is string
-typeof size is number
-typeof today is object
-typeof dontExist is undefined
-
-

true와 null 키워드에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다. -

-
typeof true is boolean
-typeof null is object
-
-

수와 문자열에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다. -

-
typeof 62 is number
-typeof 'Hello world' is string
-
-

속성 값에 대해서 typeof 연산자는 속성이 포함하고 있는 값의 형식을 반환합니다. -

-
typeof document.lastModified is string
-typeof window.length is number
-typeof Math.LN2 is number
-
-

메소드와 함수에 사용하면 typeof 연산자는 다음과 같은 결과를 반환합니다. -

-
typeof blur is function
-typeof eval is function
-typeof parseInt is function
-typeof shape.split is function
-
-

미리 정의된 개체들에 대해서 typeof 연산자는 다음과 같은 결과를 반환합니다. -

-
typeof Date is function
-typeof Function is function
-typeof Math is function
-typeof Option is function
-typeof String is function
-
-

void

-

void 연산자는 다음과 같이 사용할 수 있습니다. -

-
1. void (expression)
-2. void expression
-
-

void 연산자는 표현식이 값을 반환하지 않으면서 평가되어야 한다고 지정하는데 사용됩니다. expression은 평가하려는 JavaScript 표현식입니다. 표현식을 감싸는 괄호는 선택적이지만 사용하는 쪽이 더 좋은 스타일입니다. -

표현식을 하이퍼텍스트 링크로 지정하기 위해서 void 연산자를 사용할 수 있습니다. 표현식이 평가되기는 하지만 현재 문서 대신 로드되지는 않습니다. -

아래 코드는 사용자가 클릭할 때 아무 동작도 하지 않는 하이퍼텍스트 링크를 만듭니다. 사용자가 링크를 클릭하면 void(0)는 정의되지 않은 것(undefined)으로 평가되고 JavaScript에서 아무런 효과가 없습니다. -

-
<A HREF="javascript:void(0)">Click here to do nothing</A>
-
-

다음 코드는 클릭하면 폼을 제출하는 하이퍼텍스트 링크를 만듭니다. -

-
<A HREF="javascript:void(document.form.submit())">
-Click here to submit</A>
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:String_Operators", "Core_JavaScript_1.5_Guide:Creating_a_Regular_Expression") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_sp\u00e9ciaux", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operatory_specjalne" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html deleted file mode 100644 index fc39b5a34f..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/operators/string_operators/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: String Operators -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Operators/String_Operators -translation_of: Web/JavaScript/Guide/Expressions_and_Operators -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Operators/String_Operators ---- -

문자열 연산자

-

문자열 값에 사용할 수 있는 비교 연산자 외에도 연결 연산자(+)가 있는데, 이 연산자는 두 문자열 값을 연결한 새로운 문자열 값을 반환합니다. 예를 들어, "my " + "string"는 "my string"라는 문자열을 반환합니다. -

축약된 할당 연산자인 += 또한 문자열 연결에 사용할 수 있습니다. 예를 들어 mystring 변수가 "alpha"라는 값을 가지고 있을 때, mystring += "bet"은 "alphabet"으로 평가되고, 그 값이 mystring에 할당됩니다. -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Operators:Logical_Operators", "Core_JavaScript_1.5_Guide:Operators:Special_Operators") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Operators/String_Operators", "fr": "fr/Guide_JavaScript_1.5/Op\u00e9rateurs/Op\u00e9rateurs_li\u00e9s_aux_cha\u00eenes", "ja": "ja/Core_JavaScript_1.5_Guide/Operators/String_Operators", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Operatory/Operacje_na_\u0142a\u0144cuchach" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html deleted file mode 100644 index 1f6ef48f3a..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/array_object/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Array Object -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects/Array_Object ---- -

Array 개체

-

JavaScript에는 명시적인 배열 자료형이 없습니다. 하지만 배열을 다루기 위해서 Array 개체와 그 개체의 메소드를 이용할 수 있습니다. Array 개체에는 다양한 방법으로 배열을 다루기 위한 메소드들이 있는데, 배열을 합치거나, 순서를 뒤집거나, 정렬하는 등의 작업을 할 수 있습니다. 배열 길이를 알 수 있는 속성과 정규 표현식에 사용할 수 있는 속성들이 있습니다. - - 배열 - 은 이름이나 색인으로 참조할 수 있는 값들을 모아놓은, 값의 순서가 유지되는 집합입니다. 예를 들어, 우리는 고용 번호로 색인된 고용인의 이름을 담고 있는 emp라는 배열을 만들 수 있습니다. 이 때 emp{{ mediawiki.external(1) }}는 1번 고용인, emp{{ mediawiki.external(2) }} 2번 고용인이 되는 것입니다.

-

 

-

배열 만들기

-

Array 개체는 이렇게 만들 수 있습니다.

-
1. arrayObjectName = new Array(element0, element1, ..., elementN)
-2. arrayObjectName = new Array(arrayLength)
-
-

arrayObjectName은 새 개체의 이름이거나 존재하는 다른 개체의 속성 이름입니다. Array 개체의 속성이나 메소드를 이용할 때는 arrayObjectName은 존재하는 Array 개체 이름이거나 존재하는 다른 개체의 속성입니다.

-

element0, element1, ..., elementN는 배열의 원소(element)가 될 값들입니다. 이런 식으로 지정하면, 나열한 값들을 원소로 가지고, 길이는 값의 개수인 배열이 만들어집니다.

-

arrayLength는 배열의 초기 길이입니다. 다음 코드는 원소 다섯 개를 가지는 배열을 만듭니다.

-
billingMethod = new Array(5)
-
-

배열 상수값 또한 Array 개체입니다. 예를 들어, 다음과 같은 상수값은 Array 개체입니다. 배열 상수값에 대한 자세한 내용은 배열 상수값을 보시기 바랍니다.

-
coffees = ["French Roast", "Columbian", "Kona"]
-
-

배열에 원소 넣기

-

원소에 값을 할당함으로써 배열에 값을 넣을 수 있습니다.

-
emp[1] = "Casey Jones"
-emp[2] = "Phil Lesh"
-emp[3] = "August West"
-
-

배열을 만들 때 값을 넣을 수도 있습니다.

-
myArray = new Array("Hello", myVar, 3.14159)
-
-

배열 원소 참조하기

-

배열 원소의 순서를 나타내는 숫자로 원소를 참조할 수 있습니다. 예를 들어 다음과 같은 배열을 만들었다고 해봅시다.

-
myArray = new Array("Wind","Rain","Fire")
-
-

그러면 첫 번째 원소는 myArray{{ mediawiki.external(0) }}으로 참조할 수 있고, 두 번째 원소는 myArray{{ mediawiki.external(1) }}로 참조할 수 있습니다.

-

원소의 색인은 영(0)부터 시작하지만 배열 길이(예를 들면 myArray.length)는 배열의 원소 개수를 나타냅니다.

-

 

-

Array 개체의 메소드

-

Array 개체는 다음과 같은 메소드들을 가지고 있습니다.

-
    -
  • concat 메소드는 두 배열을 합쳐서 새 배열 하나를 반환합니다.
    • -
-
myArray = new Array("1","2","3")
-myArray = myArray.concat("a", "b", "c"); // myArray는 ["1", "2", "3", "a", "b", "c"]이 되었습니다.
-
-
    -
  • join(deliminator = ",") 메소드는 배열의 모든 원소를 문자열로 바꿔서 하나의 문자열을 만들어줍니다.
    • -
-
myArray = new Array("Wind","Rain","Fire")
-list = myArray.join(" - "); // list는 "Wind - Rain - Fire"입니다.
-
-
    -
  • pop 메소드는 배열의 마지막 원소를 배열에서 제거하고 그 원소를 반환합니다.
    • -
-
myArray = new Array("1", "2", "3");
-last=myArray.pop(); // MyArray는 ["1", "2"], last = "3"이 되었습니다.
-
-
    -
  • push 메소드는 하나 또는 그 이상의 원소를 배열 끝에 추가하고, 추가된 마지막 원소를 반환합니다.
    • -
-
myArray = new Array("1", "2");
-myArray.push("3"); // MyArray는 ["1", "2", "3"]이 되었습니다.
-
-
    -
  • reverse 메소드는 원소의 순서를 뒤집어서 첫 번째 원소가 마지막 원소가 되고, 마지막 원소가 첫 번째 원소가 되도록 합니다.
    • -
-
myArray = new Array ("1", "2", "3");
-myArray.reverse(); // myArray = [ "3", "2", "1" ]이 되었습니다.
-
-
    -
  • shift 메소드는 첫 번째 요소를 배열에서 제거하고, 그 원소를 반환합니다.
    • -
-
myArray = new Array ("1", "2", "3");
-first=myArray.shift(); // MyArray는 ["2", "3"], first는 "1"이 되었습니다.
-
-
    -
  • slice (start_index, upto_index) 메소드는 배열의 일부분을 추출하여 새 배열을 반환합니다.
    • -
-
myArray = new Array ("a", "b", "c", "d", "e");
-myArray = myArray.slice(1,4); //색인 1부터 색인 4 바로 앞까지의 원소를 추출해서 [ "b", "c", "d" ]를 반환합니다.
-
-
    -
  • splice(index, count_to_remove, addelement1, addelement2, ...) 메소드는 배열에 원소를 추가하거나 배열에서 원소를 제거합니다.
    • -
-
myArray = new Array ("1", "2", "3", "4", "5");
-myArray.splice(1,3,"a","b","c", "d"); // MyArray는 ["1", "a", "b", "c", "d", "5"]가 되었습니다.
-// 이 코드는 색인 1(즉 "2")부터 원소 세 개를 제거하고, 그 자리에 원소를 추가합니다.
-
-
    -
  • sort 메소드는 원소를 정렬합니다.
    • -
-
myArray = new Array("Wind","Rain","Fire")
-myArray.sort(); // 배열을 정렬했으므로 myArrray = [ "Fire", "Rain", "Wind" ]가 되었습니다.
-
-

sort 메소드에 배열을 어떻게 정렬할지 결정하는 콜백 함수를 전해줄 수 있습니다. 그 함수는 두 값을 비교해서 다음 셋 중 하나를 반환해야 합니다.

-
    -
  • 정렬할 때 a가 b보다 작다면 -1(또는 임의의 음수)를 반환
    • -
  • 정렬할 때 a가 b보다 크다면 1(또는 임의의 양수)를 반환
    • -
  • a와 b가 같으면 0을 반환
    • -
-

예를 들어 다음 코드는 원소의 마지막 글자를 기준으로 배열을 정렬합니다.

-
var sortFn = function(a,b){
-    if (a[a.length - 1] < b[b.length - 1]) return -1;
-    if (a[a.length - 1] > b[b.length - 1]) return 1;
-    if (a[a.length - 1] == b[b.length - 1]) return 0;
-    }
-myArray.sort(sortFn); // 배열을 정렬했으므로 myArray = ["Wind","Fire","Rain"]가 되었습니다.
-
-
    -
  • unshift 메소드는 하나 또는 그 이상의 원소를 배열 앞에 추가하고 배열의 새 길이를 반환합니다.
    • -
-

2차원 배열

-

다음 코드는 2차원 배열을 만듭니다.

-
a = new Array(4)
-for (i=0; i < 4; i++) {
-   a[i] = new Array(4)
-   for (j=0; j < 4; j++) {
-      a[i][j] = "["+i+","+j+"]"
-   }
-}
-
-

바로 위 코드는 이런 배열을 만들어냅니다.

-
Row 0:[0,0][0,1][0,2][0,3]
-Row 1:[1,0][1,1][1,2][1,3]
-Row 2:[2,0][2,1][2,2][2,3]
-Row 3:[3,0][3,1][3,2][3,3]
-
-

배열과 정규 표현식

-

배열이 정규 표현식과 문자열을 매치한 결과로 생성되었을 때, 그 배열은 매치에 대한 정보를 제공하는 속성과 원소를 포함하고 있습니다. RegExp.exec, String.match, String.split의 반환 값은 배열입니다. 정규 표현식과 관련된 배열 사용에 대한 정보를 얻으려면 4장 정규 표현식을 보십시오.

-

{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Boolean_Object") }}

diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html deleted file mode 100644 index d8d0156dc2..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/predefined_core_objects/index.html +++ /dev/null @@ -1,21 +0,0 @@ ---- -title: Predefined Core Objects -slug: >- - Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Predefined_Core_Objects -translation_of: Web/JavaScript/Guide -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Predefined_Core_Objects ---- -

미리 정의된 기본 개체

-

이 절에서는 기본 JavaScrip에 미리 정의된 개체에 대해서 설명하겠습니다. -

- -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Creating_New_Objects:Deleting_Properties", "Core_JavaScript_1.5_Guide:Predefined_Core_Objects:Array_Object") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "fr": "fr/Guide_JavaScript_1.5/Objets_pr\u00e9d\u00e9finis", "ja": "ja/Core_JavaScript_1.5_Guide/Predefined_Core_Objects", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Obiekty_predefiniowane" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html deleted file mode 100644 index 9c97d9cf82..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/unicode/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: Unicode -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Unicode -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Unicode ---- -

유니코드

-

유니코드는 세계의 주요한 문자 언어를 교환하고 표현하기 위한 문자-코딩 표준입니다. 유니코드는 아메리카, 유럽, 중동, 아프리카, 인도, 아시아, 태평양 지역(Pacifica)의 언어를 포함하며 고문자와 기술 분야 기호들도 포함합니다. 유니코드는 공통적인 기술 분야, 수학 분야 기호 뿐만 아니라 여러 언어를 포함한 텍스트의 교환, 처리, 표현을 지원합니다. 유니코드는 나라마다 서로 다른 문자 표준으로 인해서 여러 언어를 포함했을 때 발생하는 국제화 문제를 해결할 수 있기를 희망합니다. 하지만 아직은 모든 현대 문자, 고대 문자를 지원하지는 못합니다. -

유니코드 문자 집합은 알려진 모든 인코딩을 위해 사용될 수 있습니다. 유니코드는 ASCII (American Standard Code for Information Interchange, 정보 교환을 위한 미국 표준 코드) 문자 집합을 본떠 만들어졌습니다. 각각의 문자에 숫자와 이름을 부여한 것입니다. 문자 인코딩은 문자의 정체성(identity)과 숫자 값(코드 위치)와 함께 숫자 값의 비트 표현을 명시합니다. 16비트 숫자 값(코드 값)은 U+0041처럼 접두어 U뒤에 16진수를 붙여서 표시합니다. 이 값의 유일한 이름은 LATIN CAPITAL LETTER A입니다. -

JavaScript 1.3 이전 버전은 유니코드를 지원하지 않습니다. -

-

유니코드와 ASCII 및 ISO 사이의 호환성

-

유니코드는 ISO 10646의 부분집합인 국제 표준 ISO/IEC 10646-1; 1993과 완벽하게 호환됩니다. -

몇몇 인코딩 표준(UTF-8, UTF-16, ISO UCS-2를 포함하는)들이 실제 비트 값으로 유니코드를 표현하기 위해 사용됩니다. -

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바이트를 사용합니다. -

JavaScript와 Navigator가 UTF-8/유니코드를 지원한다는 것은 우리가 비 라틴 문자와 국제화되고 지역화된 문자에다 특수한 기술 분야 기호까지 JavaScript 프로그램에 쓸 수 있다는 것을 의미합니다. 유니코드는 여러 언어를 포함한 텍스트를 인코딩할 수 있는 표준적인 방법을 제공합니다. UTF-8 인코딩이 ASCII와 호환되기 때문에, ASCII 문자를 프로그램에 사용할 수 있습니다. 우리는 JavaScript의 주석, 문자열 리터럴, 식별자(identifier), 정규 표현식에 비 ASCII 유니코드 문자를 쓸 수 있습니다. -

-

유니코드 이스케이프 시퀀스

-

우리는 문자열 리터럴, 정규 표현식, 식별자에 유니코드 이스케이프 시퀀스를 사용할 수 있습니다. 이스케이프 시퀀스는 ASCII 문자 여섯 개로 이루어지는데, \u 뒤에 16진수를 표현하는 숫자 네 개가 붙은 모양입니다. 예를 들어 \u00A9는 저작권 기호를 나타냅니다. JavaScript에서 모든 유니코드 이스케이프 시퀀스는 문자 한 개로 인식됩니다. -

다음의 코드는 저작권 문자와 "Netscape Communications"라는 문자열을 반환합니다. -

-
x="\u00A9 Netscape Communications"
-

다음의 표는 자주 사용되는 특수 문자의 유니코드 값을 모은 것입니다. -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
분류유니코드 값이름형식화된 이름(Format name)
공백 문자\u0009Tab<TAB>
 \u000BVertical Tab<VT>
 \u000CForm Feed<FF>
 \u0020Space<SP>
줄 끝 문자\u000ALine Feed<LF>
 \u000DCarriage Return<CR>
그 외 유니코드 이스케이프 시퀀스\u0008Backspace<BS>
 \u0009Horizontal Tab<HT>
 \u0022Double Quote"
 \u0027Single Quote'
 \u005C Backslash\
-

표 2.2: 특수 문자의 유니코드 값 -

JavaScript에서 유니코드 이스케이프 시퀀스는 Java와 다릅니다. JavaScript에서, 이스케이프 시퀀스가 특수 문자로 먼저 해석되지 않습니다. 예를 들어, 줄 끝 이스케이프 시퀀스가 문자열에 포함되어 있어도 함수에 의해 해석되기 전까지는 문자열을 자르지 않습니다. 주석에 포함된 이스케이프 시퀀스는 모두 무시됩니다. Java에서는 한 줄 주석에 이스케이프 시퀀스가 있으면 유니코드 문자로 해석됩니다. 문자열 리터럴에서 Java 컴파일러는 이스케이프 시퀀스를 먼저 해석합니다. 예를 들어 줄 끝 이스케이프 문자(즉 \u000A)가 Java에서 사용되면 문자열 리터럴을 끝나게 합니다. Java에서는 줄 끝 문자가 문자열 리터럴에 포함될 수 없으므로, 에러가 발생합니다. 문자열 리터럴에 개행 문자를 넣으려면 반드시 \n을 사용해야 합니다. JavaScript에서 이스케이프 시퀀스는 \n과 같은 방식으로 동작합니다. -

-
참고: 긴 문자열을 변환하는 웹 프로그램 Hot-Tips' Unicode Converter, by Bob Foley.
-

JavaScript 파일에서 유니코드 문자

-

초기 버전의 Gecko는 XUL에서 로드되는 JavaScript 파일의 인코딩이 Latin-1일 것이라고 가정했습니다. Gecko 1.8부터는 XUL 파일의 인코딩으로 부터 JavaScript 파일의 인코딩을 유추하도록 변경되었습니다. 더 많은 정보는 International characters in XUL JavaScript 페이지를 참고하시기 바랍니다. -

-

유니코드로 문자 표시하기

-

우리는 다른 언어나 기술 분야 기호를 표시하기 위해서 유니코드를 사용할 수 있습니다. 문자를 제대로 표시하기 위해서는 Mozilla Firefox나 Netscape 같은 클라이언트가 유니코드를 지원해야 합니다. 게다가 클라이언트에서 사용할 수 있는 적절한 유니코드 글꼴이 필요하고, 클라이언트 플랫폼이 유니코드를 지원해야 합니다. 종종 유니코드 글꼴이 모든 유니코드 문자를 표시하지 못하는 경우가 있습니다. Windows 95 같은 몇몇 플랫폼은 유니코드를 부분적으로만 지원합니다. -

비 ASCII 문자 입력을 받기 위해서는 클라이언트가 유니코드로 입력을 보내야 합니다. 표준 확장 키보드(standard enhanced keyborad)를 사용하면 클라이언트에서 유니코드가 지원하는 추가적인 문자를 쉽게 입력할 수 없습니다. 때때로 유니코드 문자를 입력하려면 유니코드 이스케이프를 사용하는 방법 밖에 없을 때도 있습니다. -

유니코드에 대한 더 많은 정보를 얻으려면 유니코드 홈페이지나 The Unicode Standard, Version 2.0, published by Addison-Wesley, 1996 를 보시기 바랍니다. -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Literals", "Core_JavaScript_1.5_Guide:Expressions") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Unicode", "fr": "fr/Guide_JavaScript_1.5/Unicode", "ja": "ja/Core_JavaScript_1.5_Guide/Unicode", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Unicode" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html deleted file mode 100644 index e5c40d23bf..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/values/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: Values -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Values -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Values ---- -

값

-

JavaScript는 다음과 같은 값 형식을 인식합니다. -

-
  • 수, 42나 3.14159 -
  • 논리적(불리언) 값, true와 false -
  • 문자열, "안녕!" -
  • null, null 값을 나타내는 특별한 키워드. null은 또한 기본(primitive) 값이기도 합니다. JavaScript는 대소문자를 구분하므로, null은 Null이나 NULL과는 다릅니다. -
  • undefined, 값이 정의되지 않은 최상위 속성. undefined도 기본(primitive) 값입니다. -
-

이렇게 조금 적어보이는 값 형식 또는 "자료형"이지만 훌륭한 기능을 작성할 수 있습니다. 정수와 실수 사이에 엄격한 구분은 없습니다. JavaScript에는 명시적인 날짜 자료형은 없습니다. 하지만 Date 개체를 이용하면 됩니다. -Object와 함수는 언어의 또다른 기초 요소입니다. 개체는 값을 포함할 수 있는 이름 붙은 어떤 것이라고 생각하면 되고, 함수는 프로그램이 수행할 수 있는 실행 절차라고 생각하면 됩니다. -

-

자료형 변환

-

JavaScript는 동적 타입 언어입니다. 이 말은 변수를 선언할 때 타입을 지정하지 않아도 되고, 스크립트 실행중에 필요에 따라 자동으로 자료형이 바뀐다는 말입니다. 예를 들어 다음과 같이 변수를 선언할 수 있습니다. -

-
var answer = 42
-
-

그 후에 이 변수에 문자열 값을 할당할 수 있습니다. -

-
answer = "Thanks for all the fish..."
-
-

JavaScript는 동적 타입 언어이기 때문에, 이렇게 대입하더라도 에러를 내지 않습니다. -

숫자와 문자열 값을 + 연산자로 계산하는 표현식에서, JavaScript는 숫자를 문자열로 변환합니다. 예를 들어 다음과 같은 문장을 생각해봅시다. -

-
x = "The answer is " + 42 // returns "The answer is 42"
-y = 42 + " is the answer" // returns "42 is the answer"
-
-

다른 연산자를 사용하는 문장에서는 숫자를 문자열로 변환하지 않습니다. -

-
"37" - 7 // returns 30
-"37" + 7 // returns "377"
-
-

{{ PreviousNext("Core_JavaScript_1.5_Guide:JavaScript_Overview", "Core_JavaScript_1.5_Guide:Variables") }} -

{{ languages( { "en": "en/Core_JavaScript_1.5_Guide/Values", "fr": "fr/Guide_JavaScript_1.5/Valeurs", "ja": "ja/Core_JavaScript_1.5_Guide/Values", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/Warto\u015bci" } ) }} diff --git a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html b/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html deleted file mode 100644 index c9260414d3..0000000000 --- a/files/ko/web/javascript/guide/obsolete_pages/core_javascript_1.5_guide/variables/index.html +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Variables -slug: Web/JavaScript/Guide/Obsolete_Pages/Core_JavaScript_1.5_Guide/Variables -translation_of: Web/JavaScript/Guide/Grammar_and_types -translation_of_original: Web/JavaScript/Guide/Obsolete_Pages/Variables ---- -

변수

-

우리는 프로그램 내에서 값에 이름을 부여하기 위해서 변수를 사용할 수 있습니다. 변수의 이름은 "식별자(identifier)"라고 불리며, 몇 가지 규칙을 따라야 합니다. -

JavaScript 의 식별자는 문자(letter)나 밑줄(_)이나 달러 기호($)로 시작해야 합니다. 그 뒤에는 숫자(0-9)도 올 수 있습니다. JavaScript는 대소문자를 구별하기 때문에, 문자는 대문자 "A"부터 "Z"까지와 소문자 "a"부터 "z"까지를 사용할 수 있습니다. -

JavaScript 1.5부터, 식별자에 å나 ü같은 ISO 8859-1이나 유니코드 문자를 사용할 수 있습니다. 또한 유니코드 이스케이프 시퀀스 페이지에 나열된 \uXXXX 형식 유니코드 이스케이프 시퀀스를 식별자에 쓸 수도 있습니다. -

규칙에 맞는 이름 몇 가지는 이런 것입니다. Number_hits, temp99, _name. -

-

변수 선언

-

변수를 선언하는 방법에는 두 가지가 있습니다. -

-
  • var 키워드를 이용하는 방법. 예를 들면 var x = 42 같은 식입니다. 이 문법은 지역, 전역 변수를 선언하는데 모두 사용할 수 있습니다. -
  • 그냥 값을 대입하는 방법. x = 42 같은 식입니다. 이 방법은 항상 전역 변수를 선언하고, strict JavaScript 경고를 냅니다. 이 방법은 절대 사용하지 맙시다. -
-

변수를 평가하기(Evaluating)

-

초기값을 지정하지 않고 var 문장을 이용해서 선언한 변수는 undefined라는 값을 갖습니다. -

선언하지 않은 변수에 접근하려고 하면 ReferenceError 예외가 발생합니다. -

-
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
-
-

변수가 값을 갖고 있는지 결정하기 위해서 undefined를 사용할 수 있습니다. 다음 코드에서 input에는 값을 할당하지 않아서 if문은 true로 평가됩니다. -

-
var input;
-if(input === undefined){
-   doThis();
-} else {
-   doThat();
-}
-

Not sure how the following is related to "Variables" section -undefined값을 참/거짓을 판별하는 구문에 쓰면 false로 평가됩니다. 예를 들어 다음 코드에서는 myArray의 원소가 정의되지 않았기 때문에 myFunction 함수가 실행됩니다. -

-
myArray=new Array()
-if (!myArray[0])
-   myFunction();
-

숫자가 필요한 문맥에서 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: -

-
var n = null;
-n * 32; //0을 반환합니다
-

변수 범위

-

함 수 외부에서 선언한 변수는 "전역(global)" 변수라고 부릅니다. 그 변수는 현재 문서의 모든 코드에서 접근할 수 있기 때문입니다. 함수 안에서 선언한 변수는 "지역(local)" 변수라고 부릅니다. 그 변수는 함수 안에서만 접근할 수 있기 때문입니다. -

JavaScript에는 블록 문장 범위가 없습니다. 대신 그 블록이 포함된 코드의 지역 범위에 포함됩니다. 예를 들어 다음 코드에서는 condition이 false이면 예외를 발생시키는 대신 0을 출력합니다. -

-
if (condition) {
-  var x = 5;
-}
-print(x ? x : 0);
-
-

JavaScript의 변수와 관련해서 또다른 색다른 점은 나중에 선언될 변수에 예외 발생없이 접근할 수 있다는 것입니다. -

-
print(x === undefined); // prints "true"
-var x = 3;
-
-

전역 변수

-

need links to pages discussing scope chains and the global object -전역 변수는, 실제로는 "전역 개체(global object)"의 속성(property)입니다. 웹 페이지에서 전역 개체는 window이므로, window.variable 문장을 이용해서 전역 변수에 접근할 수 있습니다. -

그러므로, window나 frame 이름을 이용하면 다른 window나 frame에 정의된 전역 변수에 접근할 수 있습니다. 예를 들어 phoneNumber라는 변수를 FRAMESET 문서에 정의했다면, 자식 frame에서 parent.phoneNumber로 그 변수에 접근할 수 있습니다. -

{{ PreviousNext("Core_JavaScript_1.5_Guide:Values", "Core_JavaScript_1.5_Guide:Constants") }} -

{{ 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/regular_expressions/assertions/index.html b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html new file mode 100644 index 0000000000..350c50f8f9 --- /dev/null +++ b/files/ko/web/javascript/guide/regular_expressions/assertions/index.html @@ -0,0 +1,244 @@ +--- +title: Assertions +slug: Web/JavaScript/Guide/정규식/Assertions +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +--- +

{{jsSidebar("JavaScript Guide")}}

+ +

Assertions에는 행이나 단어의 시작 · 끝을 나타내는 경계와 (앞, 뒤 읽고 조건식을 포함한) 어떤 식 으로든 매치가 가능한 것을 나타내는 다른 패턴이 포함됩니다.

+ +
{{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}
+ +

Types

+ +

Boundary-type assertions

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CharactersMeaning
^ +

Matches the beginning of input. If the multiline flag is set to true, also matches immediately after a line break character. For example, /^A/ does not match the "A" in "an A", but does match the first "A" in "An A".

+ +
+

This character has a different meaning when it appears at the start of a group.

+
+
$ +

Matches the end of input. If the multiline flag is set to true, also matches immediately before a line break character. For example, /t$/ does not match the "t" in "eater", but does match it in "eat".

+
\b +

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.

+ +

Examples:

+ +
    +
  • /\bm/ matches the "m" in "moon".
    • +
  • /oo\b/ does not match the "oo" in "moon", because "oo" is followed by "n" which is a word character.
    • +
  • /oon\b/ matches the "oon" in "moon", because "oon" is the end of the string, thus not followed by a word character.
    • +
  • /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character.
    • +
+ +

To match a backspace character ([\b]), see Character Classes.

+
\B +

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, /\Bon/ matches "on" in "at noon", and /ye\B/ matches "ye" in "possibly yesterday".

+
+ +

Other assertions

+ +
+

Note: The ? character may also be used as a quantifier.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
CharactersMeaning
x(?=y) +

Lookahead assertion: Matches "x" only if "x" is followed by "y". For example, /Jack(?=Sprat)/ matches "Jack" only if it is followed by "Sprat".
+ /Jack(?=Sprat|Frost)/ matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.

+
x(?!y) +

Negative lookahead assertion: Matches "x" only if "x" is not followed by "y". For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. /\d+(?!\.)/.exec('3.141') matches "141" but not "3.

+
(?<=y)x +

Lookbehind assertion: Matches "x" only if "x" is preceded by "y". For example, /(?<=Jack)Sprat/ matches "Sprat" only if it is preceded by "Jack". /(?<=Jack|Tom)Sprat/ matches "Sprat" only if it is preceded by "Jack" or "Tom". However, neither "Jack" nor "Tom" is part of the match results.

+
(?<!y)x +

Negative lookbehind assertion: Matches "x" only if "x" is not preceded by "y". For example, /(?<!-)\d+/ matches a number only if it is not preceded by a minus sign. /(?<!-)\d+/.exec('3') matches "3". /(?<!-)\d+/.exec('-3')  match is not found because the number is preceded by the minus sign.

+
+ +

Examples

+ +

General boundary-type overview example

+ +
// 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' => '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' => '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'.
+
+ +

Matching the beginning of an input using a ^ control character

+ +

입력 시작시 일치를 위해 ^를 사용하십시오. 이 예에서는 /^A/ regex로 'A'로 시작하는 결과를 얻습니다. 여기서 ^는 한 가지 역할 만합니다. 적절한 결과를 보기위해 화살표 함수가있는 필터 메소드를 사용합니다.

+ +
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 => /^A/.test(fruit));
+console.log(fruitsStartsWithA); // [ 'Apple', 'Avocado' ]
+
+ +

두 번째 예제에서 ^는 두 가지 모두에 사용됩니다 : 입력의 일치 시작점, 그룹에서 사용될 때 부정 또는 보완 문자 세트.

+ +
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 => /^[^A]/.test(fruit));
+
+console.log(fruitsStartsWithNotA); // [ 'Watermelon', 'Orange', 'Strawberry' ]
+ +

Matching a word boundary

+ +
let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
+
+// Select descriptions that contains 'en' or 'ed' words endings:
+let enEdSelection = fruitsWithDescription.filter(descr => /(en|ed)\b/.test(descr));
+
+console.log(enEdSelection); // [ 'Red apple', 'Green Avocado' ]
+ +

Lookahead assertion

+ +
// 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
+
+ +

Basic negative lookahead assertion

+ +

For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. /\d+(?!\.)/.exec('3.141') matches "141" but not "3.

+ +
console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
+
+ +

Different meaning of '?!' combination usage in Assertions and  Ranges 

+ +

Different meaning of ?! combination usage in Assertions /x(?!y)/ and Ranges [^?!].

+ +
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!' ]
+
+ +

Lookbehind assertion

+ +
let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
+
+let ripe_oranges = oranges.filter( fruit => fruit.match(/(?<=ripe )orange/));
+console.log(ripe_oranges); // [ 'ripe orange A ', 'ripe orange C' ]
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-assertion', 'RegExp: Assertions')}}{{Spec2('ESDraft')}}
+ +

Browser compatibility

+ +

For browser compatibility information, check out the main Regular Expressions compatibility table.

+ +

See also

+ + diff --git a/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html b/files/ko/web/javascript/guide/regular_expressions/groups_and_ranges/index.html new file mode 100644 index 0000000000..2e2109b4ed --- /dev/null +++ b/files/ko/web/javascript/guide/regular_expressions/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 +--- +

{{jsSidebar("JavaScript Guide")}}{{draft}}

+ +

그룹(Groups)과 범위(ranges)는 표현 문자의 그룹과 범위를 나타냅니다.

+ +

Types

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CharactersMeaning
x|y +

x또는 y와 매칭되는 경우. 예를들면 /green|red/ 은 "green apple"의 "green"과 매치되고 "red apple"의 "red"와 매치됩니다.

+
[xyz]
+ [a-c]		 +

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.

+ +

For example, [abcd] is the same as [a-d]. They match the "b" in "brisket" and the "c" in "chop".

+ +

For example, [abcd-] and [-abcd] match the "b" in "brisket", the "c" in "chop" and the "-" (hyphen) in "non-profit".

+ +

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".

+
+

[^xyz]
+ [^a-c]

+ 		+

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, [^abc] is the same as [^a-c]. They initially match "o" in "bacon" and "h" in "chop".

+ +
+

The ^ character may also indicate the beginning of input.

+
+
(x) +

Capturing group: Matches x and remembers the match. For example, /(foo)/ matches and remembers "foo" in "foo bar". 

+ +

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 ([1], ..., [n]) or from the predefined RegExp object's properties ($1, ..., $9).

+ +

Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).

+ +

String.match() won't return groups if the /.../g flag is set. However, you can still use String.matchAll() to get all matches.

+
\n +

Where n is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses). For example, /apple(,)\sorange\1/ matches "apple, orange," in "apple, orange, cherry, peach". A complete example follows this table.

+
(?<Name>x) +

Named capturing group: Matches x and stores it on the groups property of the returned matches under the name specified by <Name>. The angle brackets ('<' and '>') are required for group name.

+ +

For example, to extract the United States area code from a phone number, I could use /\((?<area>\d\d\d)\)/. The resulting number would appear under matches.groups.area.

+
(?:x)Non-capturing group: Matches x but does not remember the match. The matched substring cannot be recalled from the resulting array's elements ([1], ..., [n]) or from the predefined RegExp object's properties ($1, ..., $9).
+ +

Examples

+ +

Browser support

+ +

Firefox currently doesn't support named groups. See corresponding issue.

+ +

See also

diff --git a/files/ko/web/javascript/guide/regular_expressions/index.html b/files/ko/web/javascript/guide/regular_expressions/index.html new file mode 100644 index 0000000000..5fbbcef0a0 --- /dev/null +++ b/files/ko/web/javascript/guide/regular_expressions/index.html @@ -0,0 +1,666 @@ +--- +title: 정규 표현식 +slug: Web/JavaScript/Guide/정규식 +tags: + - 자바스크립트 + - 정규식 +translation_of: Web/JavaScript/Guide/Regular_Expressions +--- +
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
+ +

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.  이 패턴들은 {{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")}} 메소드와 함께 쓰입니다 . 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다.

+ +

정규 표현식 만들기

+ +

(역주: 정규 표현식을 줄여서 '정규식'이라고 하기도 합니다. 아래 부분부터 '정규식'이라는 용어를 사용하겠습니다.)

+ +

정규식을 만드는 방법에는 두 가지가 있습니다.

+ +

정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다.

+ +
var re = /ab+c/;
+
+ +

정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다.

+ +

다른 방법으로는,  {{jsxref("RegExp")}} 객체의 생성자 함수를 호출하는 방법도 있습니다:

+ +
var re = new RegExp("ab+c");
+
+ +

생성자 함수를 사용하면 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 생성자 함수를 사용하세요.

+ +

정규식 패턴 작성하기

+ +

정규식 패턴은 /abc/ 같이 단순 문자로 구성될 수도 있고, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같이 단순 문자와 특수 문자의 조합으로 구성될 수도 있습니다. 마지막 예제는 기억장치처럼 쓰이는 괄호를 포함하고 있습니다. {{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", "패턴화된 부분 문자열 일치 사용하기") }}에서 설명하는것 처럼 패턴에서 괄호를 포함한 부분은 나중에 사용하기 위하여 저장됩니다.

+ +

단순 패턴 사용하기

+ +

단순 패턴은 문자열을 있는 그대로 대응시키고자 할 때 사용됩니다. 예를 들어, /abc/라는 패턴은 문자열에서 정확히 'abc' 라는 문자들이 모두 함께 순서대로 나타나야 대응됩니다. 위의 패턴은 "Hi, do you know your abc's?" 와 "The latest airplane designs evolved from slabcraft." 두가지 예에서 부분 문자열 'abc'에 대응될 것입니다.  'Grab crab' 이라는 문자열에서 'ab c' 라는 부분 문자열을 포함하고 있지만, 'abc'를 정확하게 포함하고 있지 않기 때문에 대응되지 않습니다.

+ +

특수 문자 사용하기

+ +

검색에서 하나 이상의 b들을 찾거나, 혹은 공백을 찾는 것과 같이 '있는 그대로의 대응' 이상의 대응을 필요로 할 경우, 패턴에 특수한 문자를 포함시킵니다. 예를 들어, /ab*c/ 패턴은  'a' 문자 뒤에 0개 이상의 'b' 문자(* 문자는 바로 앞의 문자가 0개 이상이라는 것을 의미합니다)가 나타나고 바로 뒤에 'c' 문자가 나타나는 문자 조합에 대응됩니다. 문자열 "cbbabbbbcdebc," 에서 위의 패턴은 부분 문자열 'abbbbc' 와 대응됩니다.

+ +

아래 표는 정규식에서 사용되는 모든 특수문자 목록 및 그에 대한 설명입니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
정규식에서의 특수문자
CharacterMeaning
\ +

다음의 규칙에 따라 일치합니다:
+
+ 특수 문자가 아닌 문자(non-special character) 앞에서 사용된 백슬래시는 '해당 문자는 특별하고, 문자 그대로 해석되면 안된다'는 사실을 가리킵니다. 예를 들어, 앞에 \가 없는 'b'는 보통 소문자 b가 나오는 패턴과 대응됩니다. 그러나 '\b' 자체는 어떤 문자와도 대응되지 않습니다; 이 문자는 특별한 단어 경계 문자를 형성합니다.
+
+ 특수 문자 앞에 위치한 백슬래시는 '다음에 나오는 문자는 특별하지않고, 문자 그대로 해석되어야 한다'는 사실을 가리킵니다. 예를 들어, 패턴 /a*/ 에서의 특수문자 '*'는 0개 이상의 'a' 문자가 등장함을 나타냅니다. 이와는 다르게, 패턴 /a\*/ 는 '*'이 특별하지 않다는 것을 나타내며, 'a*'와 같은 문자열과 대응될 수 있습니다.
+
+ RegExp("pattern") 표기를 쓰면서 \ 자체를 이스케이프 하는 것을 잊지 마세요. 왜냐하면 \ 는 문자열에서도 이스케이프 문자이기 때문입니다. (역주: /a\*/ 와 같은 패턴을 생성자로 만들려면 new RegExp('a\\*')와 같이 백슬래시 자체를 이스케이프 시켜주어야 합니다.)

+
^입력의 시작 부분에 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 다음 부분과도 대응됩니다.
+
+ 예를 들어, /^A/ 는 "an A" 의 'A'와는 대응되지 않습니다, 그러나 "An E" 의 'A'와는 대응됩니다.
+
+ '^' 가 문자셋([abc]) 패턴의 첫 글자로 쓰인다면, 그 때는 전혀 다른 의미를 가집니다. 자세한 내용은 역 문자셋을 참고하세요.
$ +

입력의 끝 부분과 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자의 바로 앞 부분과도 대응됩니다.

+ +

예를 들어, /t$/ 는 "eater" 의 't'에는 대응되지 않습니다, 그러나 "eat" 과는 대응됩니다.

+
* +

앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응됩니다. {0,} 와 같은 의미입니다.

+ +

예를 들어, /bo*/ 는 "A ghost booooed" 의 'boooo' 와 대응되고, "A bird warbled" 의 'b'에 대응되지만 "A goat grunted" 내의 어느 부분과도 대응되지 않습니다.

+
+ +

앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다. {1,} 와 같은 의미입니다.

+ +

예를 들어, /a+/ 는 "candy"의 'a'에 대응되고 "caaaaaaandy" 의 모든 'a'들에 대응되지만, "cndy" 내의 어느 부분과도 대응되지 않습니다.

+
?앞의 표현식이 0 또는 1회 등장하는 부분과 대응됩니다. {0,1} 와 같은 의미입니다.
+
+ 예를 들어, /e?le?/ 는 "angel"의 'el' 에 대응되고, "angle"의 'le' 에 대응되고 또한 "oslo" 의 'l'에도 대응됩니다.
+
+ 만약 수량자 *, +, ?, {} 바로 뒤에 사용하면, 기본적으로 탐욕스럽던(가능한 한 많이 대응시킴) 수량자를 탐욕스럽지 않게(가능한 가장 적은 문자들에 대응시킴) 만듭니다. 예를 들어, /\d+/를 "123abc"에 적용시키면 "123"과 대응됩니다. 그러나 /\d+?/를 같은 문자열에 적용시키면 오직 "1"과만 대응됩니다.
+
+ 또한 이 문자는 x(?=y) 와 x(?!y) 항목에서 설명하는 바와 같이 사전 검증(lookahead assertion)을 위해서도 쓰입니다.
+  
. +

개행 문자를 제외한 모든 단일 문자와 대응됩니다.

+ +

예를 들어, /.n/는 "nay, an apple is on the tree"에서 'an'과 'on'에 대응되지만, 'nay' 에는 대응되지 않습니다.

+
(x) +

다음의 예제가 보여주는것 처럼 'x'에 대응되고, 그것을 기억합니다. 괄호는 포획 괄호(capturing parentheses)라 불립니다.
+
+ 패턴 /(foo) (bar) \1 \2/ 안의 '(foo)' 와 '(bar)'는 문자열"foo bar foo bar"에서 처음의 두 단어에 대응되고 이를 기억합니다. 패턴 내부의 \1와 \2는 문자열의 마지막 두 단어에 대응됩니다. (역주: \n 패턴은 앞의 n번째 포획괄호에 대응된 문자열과 똑같은 문자열에 대응됩니다.) \1, \2, \n과 같은 문법은 정규식의 패턴 부분에서 사용됩니다. 정규식의 치환 부분에서는 $1, $2, $n과 같은 문법이 사용되어야 합니다. 예를 들어, 'bar foo'.replace( /(...) (...)/, '$2 $1')와 같이 사용되어야 합니다. $& 패턴은 앞에서 대응된 전체 문자열을 가리킵니다.

+
(?:x)'x'에 대응되지만 대응된 것을 기억하지 않습니다. 괄호는 비포획 괄호(non-capturing parentheses)라고 불리우고, 정규식 연산자가 같이 동작할 수 있게 하위 표현을 정의할 수 있습니다. 정규식 예제 /(?:foo){1,2}/을 생각해보세요. 만약 정규식이 /foo{1,2}/라면, {1,2}는 'foo'의 마지막 'o' 에만 적용됩니다. 비포획 괄호과 같이 쓰인다면, {1,2}는 단어 'foo' 전체에 적용됩니다.
x(?=y) +

오직 'y'가 뒤따라오는 'x'에만 대응됩니다. 이것은 lookahead 라고 불립니다.

+ +

예를 들어, /Jack(?=Sprat)/ 는 'Sprat'가 뒤따라오는 'Jack' 에만 대응됩니다. /Jack(?=Sprat|Frost)/는 'Sprat' 또는 'Frost'가 뒤따라오는 'Jack'에만 대응됩니다. 그러나, 'Sprat' 및 'Frost' 는 대응 결과의 일부가 아닙니다.

+
x(?!y) +

'x'뒤에  'y'가 없는경우에만 'x'에 일치합니다. 이것은 negated lookahead 라고 불립니다.

+ +

예를 들어, /\d+(?!\.)/는 소숫점이 뒤따라오지 않는 숫자에 일치합니다. 정규식 /\d+(?!\.)/.exec("3.141")는 '3.141' 이 아닌 '141'에 일치합니다.

+
x|y +

'x' 또는 'y'에 대응됩니다.

+ +

예를 들어, /green|red/는 "green apple"의 'green'에 대응되고, "red apple."의 'red'에 대응됩니다.

+
{n}앞 표현식이 n번 나타나는 부분에 대응됩니다. n은 반드시 양의 정수여야 합니다.
+
+ 예를 들어, /a{2}/는 "candy,"의 'a'에는 대응되지 않지만, "caandy,"의 모든 a 와, "caaandy."의 첫 두 a 에는 대응됩니다.
{n,m} +

n과 m은 양의 정수이고, n <= m를 만족해야 합니다. 앞 문자가 최소 n개, 최대 m개가 나타나는 부분에 대응됩니다. m이 생략된다면, m은 ∞로 취급됩니다.

+ +

예를 들어, /a{1,3}/는 "cndy"에서 아무것에도 대응되지 않지만, "caandy,"의 첫 두 a 와 "caaaaaaandy"의 첫 세 a 에 대응됩니다. "caaaaaaandy"에서 더 많은 a 들이 있지만, "aaa"에만 대응된다는 점에 주목하세요.

+
[xyz]문자셋(Character set) 입니다. 이 패턴 타입은 괄호 안의 어떤 문자(이스케이프 시퀀스까지 포함)와도 대응됩니다. 점(.) 이나 별표 (*) 같은 특수 문자는 문자셋 내부에서는 특수 문자가 아닙니다. 따라서 이스케이프시킬 필요가 없습니다. 하이픈을 이용하여 문자의 범위를 지정해줄 수 있습니다.
+
+ 예를 들어, 패턴 [a-d] 는 패턴 [abcd] 와 똑같이 동작하며, "brisket"의 'b' 에 일치하고, "city"의 'c' 에 일치합니다. 패턴 /[a-z.]+/ 와 /[\w.]+/ 는 "test.i.ng" 전체 문자열이 일치합니다.
[^xyz] +

부정 문자셋(negated character set) 또는 보충 문자셋(complemented character set)입니다. 괄호 내부에 등장하지 않는 어떤 문자와도 대응됩니다. 하이픈을 이용하여 문자의 범위를 지정할 수 있습니다. 일반적인 문자셋에서 작동하는 모든 것은 여기에서도 작동합니다.

+ +

예를 들어, 패턴[^abc]는 패턴[^a-c]와 동일합니다. 두 패턴은 "brisket"의 'r', "chop."의 'h' 에 대응됩니다.

+
[\b]백스페이스(U+0008)에 대응됩니다. 이와 같이, 백스페이스 문자 리터럴에 대응시키려면, 대괄호("[]")를 이용해야만 합니다. (\b와 혼동하지 마세요.)
\b +

단어 경계에 대응됩니다. 단어 경계는 다른 '단어 문자'가 앞이나 뒤에 등장하지 않는 위치에 대응됩니다. 단어의 경계는 대응 결과에 포함되지 않는다는 사실에 주의하세요. 다른 말로는, 단어의 경계에 대응되는 문자열의 길이는 항상 0입니다. (패턴 [\b]와 혼동하지 마세요.)

+ +

예제:
+ /\bm/는 "moon"의 'm'에 대응됩니다;
+ /oo\b/ 는 "moon"의 'oo' 부분에 대응되지 않는데, 왜냐하면 'oo'를 뒤따라오는 'n'이 단어 문자이기 때문입니다;
+ /oon\b/는 "moon"의 'oon'에 대응됩니다. 왜냐하면, 'oon'은 문자열의 끝이라서, 뒤따라오는 단어 문자가 없기 때문입니다 ;
+ /\w\b\w/는 어떤 것에도 일치하지 않습니다. 왜냐하면, 단어 문자는 절대로 비 단어 문자와 단어 문자 두개가 뒤따라올수 없기 때문입니다.

+ +
+

숙지하세요: 자바스크립트의 정규식 엔진은 특정 문자 집합을 '단어 문자'로 정의합니다. 이 집단에 속하지 않는 모든 문자는 단어 분리(word break) 로 여겨집니다. 단어 문자로 간주되는 문자들은 얼마 없습니다: 오로지 로마자 소문자와 대문자, 10진수 숫자, 밑줄 문자로 구성되어 있습니다. "é" 또는 "ü" 같이, 강세 표시 문자들은 안타깝게도 단어 분리(word breaks) 로 취급됩니다.

+
+
\B +

단어 경계가 아닌 부분에 대응됩니다. 아래와 같은 경우들이 있습니다:

+ +
    +
  • 문자열의 첫 번째 문자가 단어 문자가 아닌 경우, 해당 문자의 앞 부분에 대응됩니다.
    • +
  • 문자열의 마지막 문자가 단어 문자가 아닌 경우, 해당 문자의 뒷 부분에 대응됩니다.
    • +
  • 두 단어 문자의 사이에 대응됩니다.
    • +
  • 단어 문자가 아닌 두 문자 사이에 대응됩니다.
    • +
  • 빈 문자열에 대응됩니다.
    • +
+ +

문자열의 시작 부분과 끝 부분은 단어가 아닌 것으로 간주됩니다.

+ +

예를 들어, /\B../ 는 "noonday"의 'oo'와 대응되며, /y\B./ 는 "possibly yesterday."의 'ye'와 대응됩니다.

+
\cX +

문자열 내부의 제어 문자에 대응됩니다. 여기서 X는 A에서 Z까지의 문자 중 하나입니다.

+ +

예를 들어, /\cM/는 문자열에서 control-M (U+000D)에 대응됩니다.

+
\d +

숫자 문자에 대응됩니다. [0-9]와 동일합니다.

+ +

예를 들어, /\d/ 또는 /[0-9]/는 "B2 is the suite number."에서 '2'에 대응됩니다.

+
\D +

숫자 문자가 아닌 문자에 대응됩니다. [^0-9]와 동일합니다.

+ +

예를 들어, /\D/ 또는 /[^0-9]/는 "B2 is the suite number."의 'B'에 대응됩니다.

+
\f폼피드 (U+000C) 문자에 대응됩니다.
\n줄 바꿈 (U+000A) 문자에 대응됩니다.
\r캐리지 리턴(U+000D) 문자에 대응됩니다.
\s +

스페이스, 탭, 폼피드, 줄 바꿈 문자등을 포함한 하나의 공백 문자에 대응됩니다. [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].와 동일합니다.

+ +

예를 들어, /\s\w*/는 "foo bar."의 ' bar'에 대응됩니다.

+
\S +

공백 문자가 아닌 하나의 문자에 대응됩니다. [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]. 와 동일합니다.

+ +

예를 들어, /\S\w*/는 "foo bar."의 'foo' 에 대응됩니다.

+
\t탭 (U+0009) 문자에 대응됩니다.
\v수직 탭(U+000B) 문자에 대응됩니다.
\w +

밑줄 문자를 포함한 영숫자 문자에 대응됩니다. [A-Za-z0-9_] 와 동일합니다. (역주: 여기에 대응되는 문자를 단어 문자라고 합니다.)

+ +

예를 들어, /\w/는 "apple,"의 'a' 에 대응되고, "$5.28,"의 '5'에 대응되고,"3D."의 '3'에 대응됩니다.

+
\W +

단어 문자가 아닌 문자에 대응됩니다. [^A-Za-z0-9_] 와 동일합니다.

+ +

예를 들어, /\W/ 또는 /[^A-Za-z0-9_]/는 "50%."의 '%' 에 대응됩니다.

+
\n +

정규식 내부의 n번째 괄호에서 대응된 부분에 대한 역참조 입니다. 여기서, n은 양의 정수입니다.

+ +

예를 들어, /apple(,)\sorange\1/는 "apple, orange, cherry, peach."의 'apple, orange,' 에 일치합니다.

+
\0널 (U+0000)문자에 대응합니다. 이 때 다른 숫자를 뒤에 쓰지 마세요. 왜냐하면 \0<digits>는 8진 이스케이프 시퀀스이기 때문입니다.
\xhh코드가 hh(두 16진 숫자)인 문자에 일치합니다.
\uhhhh코드가 hhhh(네개의 16진 숫자)인 문자에 일치합니다.
+ +

사용자 입력을 이스케이프해서 정규식 내부에서 문자 그대로 취급해야 하는 경우, 간단히 치환을 하면 됩니다:

+ +
function escapeRegExp(string){
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $&는 일치한 전체 문자열을 의미합니다.
+}
+ +

괄호를 사용하기

+ +

정규식 내부의 일부를 둘러싼 괄호는, 해당 부분에서 대응된 문자열을 기억하는 효과를 갖습니다. 기억된 문자열은 이후 {{ 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", "패턴화된 부분 문자열 일치 사용하기") }}에서 설명한 것처럼 다른 곳에서 사용하기 위하여 불러와질 수 있습니다.

+ +

예를 들면, 패턴 /Chapter (\d+)\.\d*/는 패턴의 일부분이 기억될 거라는 사실을 나타냅니다. 이 패턴은 하나 이상의 숫자(\d는 숫자를 의미하고 +는 1개 이상을 의미합니다.) 이후에 하나의 소숫점(\가 앞에 붙은 소숫점은 문자 그대로의 문자 '.' 에 대응됨을 나타냅니다), 그뒤 0개 이상의 숫자(\d 는 숫자, * 는 0개 이상을 의미합니다.)가 뒤따라오는 'Chapter ' 문자열에 대응됩니다. 더해서, 괄호는 처음으로 일치하는 숫자 문자들을 기억하기 위하여 사용되었습니다.

+ +

이 패턴은 "Open Chapter 4.3, paragraph 6"에 나타나며, '4'가 기억됩니다. 이 패턴은 "Chapter 3 and 4"에는 나타나지 않습니다. 왜냐하면 문자열이 '3'이후에 마침표를 가지고 있지 않기 때문입니다.

+ +

부분 문자열을 대응시키면서도 해당 부분을 기억하지 않으려면, 괄호의 첫머리에 ?:패턴을 사용하세요. 예를 들어, (?:\d+)는 1개 이상의 숫자에 대응되지만 해당 문자들을 기억하지 않습니다.

+ +

정규식 사용하기

+ +

정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다. 이 메소드는 JavaScript reference에서 잘 설명되어 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
정규식에서 쓰이는 메소드
MethodDescription
{{jsxref("RegExp.exec", "exec")}}대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
{{jsxref("RegExp.test", "test")}}대응되는 문자열이 있는지 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다.
{{jsxref("String.match", "match")}}대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
{{jsxref("String.search", "search")}} +

대응되는 문자열이 있는지 검사하는 String 메소드 입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.

+
{{jsxref("String.replace", "replace")}}대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.
{{jsxref("String.split", "split")}}정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.
+ +

문자열 내부에 패턴과 대응되는 부분이 있는지 알고 싶다면, test 나 search 메소드를 사용하세요; 좀 더 많은 정보를 원하면 (대신 실행이 느림)  exec 나 match 메소드를 사용하세요. 만약 exec 나 match 메소드를 사용했는데 대응되는 부분이 있다면, 이 메소드는 배열을 반환하고 정규식 객체의 속성을 업데이트 합니다. 만약 대응되는 부분이 없다면, exec 메소드는 null 을 반환합니다. (즉, false와 같은 의미로 사용될 수 있습니다.).

+ +

아래의 예에서는, 문자열 내부에서 대응되는 부분을 찾기 위해 exec 메소드를 사용했습니다.

+ +
var myRe = /d(b+)d/g;
+var myArray = myRe.exec("cdbbdbsbz");
+
+ +

만약 정규식 속성에 접근할 필요가 없다면, 아래와 같이 myArray를 만드는 다른 방법도 있습니다:

+ +
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
+
+ +

문자열로부터 정규식을 만들고 싶다면, 이런 방법도 있습니다:

+ +
var myRe = new RegExp("d(b+)d", "g");
+var myArray = myRe.exec("cdbbdbsbz");
+
+ +

위의 스크립트에서는, 대응되는 부분이 발견되었고 아래의 표에서 설명하는 대로 배열을 반환하며 속성을 갱신합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
정규식 실행결과
ObjectProperty or indexDescriptionIn this example
myArray대응된 문자열 및 기억한 모든 부분 문자열['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
index입력된 문자열에서 대응된 부분에 해당하는 인덱스 (0부터 시작)1
input입력된 원본 문자열"cdbbdbsbz"
[0]마지막으로 대응된 문자열"dbbd"
myRelastIndex다음 검색 시 검색을 시작할 인덱스 (이 속성은 g 옵션을 설정한 정규식에 대해서만 설정됩니다. 자세한 사항은 {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }} 부분을 참고하세요.)5
source패턴 문자열. 정규식이 생성될 때 갱신됩니다. 실행 시점에는 갱신되지 않습니다."d(b+)d"
+ +

위 예제에서의 두 번째 형태처럼, 정규식 객체를 변수에 대입하지 않고도 사용할 수 있습니다. 하지만, 이렇게 하면 정규식 객체가 매번 새로 생성됩니다. 이러한 이유로, 만약 변수에 대입하지 않는 형태를 사용하는 경우 나중에 그 정규식의 속성에 접근할 수 없게 됩니다. 예를 들어, 이러한 스크립트가 있을 수 있습니다:

+ +
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"
+
+ +

그러나, 만약 이러한 스크립트가 있으면:

+ +
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"
+
+ +

두 구문에서의 /d(b+)d/g 는 서로 다른  정규식 객체이고, 따라서 별개의 lastIndex 속성을 갖게 됩니다. 정규식 객체의 속성을 사용해야 하는 경우라면, 먼저 변수에 대입하세요.

+ +

괄호로 둘러싼 패턴 사용하기

+ +

정규식 패턴에 괄호를 사용하면, 그 부분을 별도로 대응시키면서 대응된 부분을 기억합니다. 예를 들면, /a(b)c/ 는 'abc' 와 대응되면서 'b'를 기억합니다. 괄호로 감싸진 문자열을 불러오려면, 배열 요소 [1], ..., [n] 를 사용하세요.

+ +

괄호로 감쌀 수 있는 문자의 개수에는 제한이 없습니다. 반환된 배열은 찾아낸 모든 것들을 갖고 있습니다. 다음의 예는 괄호로 둘러싸진 부분이 어떻게 대응되는지 보여줍니다.

+ +

다음의 예는 문자열 내부의 단어를 바꾸기 위해 {{jsxref("String.replace", "replace()")}} 메소드를 이용하고 있습니다. 치환 문자열로는 $1 과 $2 를 사용하고 있는데, 이는 각각 첫 번째와 두 번째 괄호가 쳐진 부분에 대응된 문자열을 가리킵니다.

+ +
var re = /(\w+)\s(\w+)/;
+var str = "John Smith";
+var newstr = str.replace(re, "$2, $1");
+console.log(newstr);
+
+// "Smith, John"
+
+ +

플래그를 사용한 고급검색

+ +

정규식은 여섯 개의 플래그를 설정해줄 수 있으며, 이를 통해 전역 검색 또는 대소문자 구분 없는 검색을 수행할 수 있습니다. 이 플래그들은 각기 사용될 수도 있고 함께 사용될 수도 있고 순서에 구분이 없습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Regular expression flags
FlagDescription
g전역 검색
i대소문자 구분 없는 검색
m다중행(multi-line) 검색
s.에 개행 문자도 매칭(ES2018)
u유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급합니다.
y"sticky" 검색을 수행. 문자열의 현재 위치부터 검색을 수행합니다. {{jsxref("RegExp.sticky", "sticky")}} 문서를 확인하세요.
+ +

정규식에 플래그를 포함시키려면, 아래 문법을 사용하세요:

+ +
var re = /pattern/flags;
+
+ +

혹은 아래와 같이 할 수도 있습니다:

+ +
var re = new RegExp("pattern", "flags");
+
+ +

이 플래그는 정규식에 합쳐지는 정보임을 기억하는게 좋습니다. 이것들은 나중에 추가되거나 제거될 수 없습니다.

+ +

예를 들어, re = /\w+\s/g 는 한 개 이상의 문자열 뒤에 공백이 하나 있는 패턴을 찾는 정규식을 생성합니다. 그리고 문자열 전체에 걸쳐 이 조합을 검색합니다.

+ +
var re = /\w+\s/g;
+var str = "fee fi fo fum";
+var myArray = str.match(re);
+console.log(myArray);
+
+// ["fee ", "fi ", "fo "]
+
+ +

아래 코드는:

+ +
var re = /\w+\s/g;
+
+ +

이렇게 바꿔쓸 수 있습니다:

+ +
var re = new RegExp("\\w+\\s", "g");
+
+ +

그리고 똑같은 결과를 얻습니다.

+ +

 .exec() 메소드를 사용할 때에는 'g' 플래그에 대한 동작이 다릅니다.  ("클래스"와 "인수"의 역할이 뒤바뀝니다:  .match()를 사용할 때는, string 클래스가 메소드를 갖고 정규식은 인수였던 것에 반해, .exec()를 사용할 때는 정규식이 메소드를 갖고 문자열이 인수가 됩니다. str.match(re) 과 re.exec(str)를 비교해보세요.)  'g' 플래그와  .exec() 메소드가 함께 사용되면 진행상황에 대한 정보가 반환됩니다.

+ +
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"]
+ +

m 플래그는 여러 줄의 입력 문자열이 실제로 여러 줄로서 다뤄져야 하는 경우에 쓰입니다. 만약 m 플래그가 사용되면, ^ 와 $ 문자는 전체 문자열의 시작과 끝에 대응되는 것이 아니라 각 라인의 시작과 끝에 대응됩니다.

+ +

예시

+ +

다음의 예는 정규 표현식의 몇 가지 사용법을 보여줍니다.

+ +

입력 문자열에서 순서를 변경하기

+ +

다음 예는 정규식의 , string.split()과 string.replace()의 사용을 설명합니다. 그것은 공백, 탭과 정확히 하나의 세미콜론의 구분으로 이름(이름을 먼저)이 포함된 대략 형식의 입력 문자열을 정리합니다. 마지막으로, 순서(성을 먼저)를 뒤바꾸고 목록을 정렬합니다.

+ +
// 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 < 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 < 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 < len; i++){
+  output.push(bySurnameList[i]);
+}
+
+output.push("---------- End");
+
+console.log(output.join("\n"));
+
+ +

입력을 확인하기 위해 특수 문자를 사용하기

+ +

다음 예에서, 사용자는 전화번호를 입력 할 것으로 예상됩니다. 사용자가 "Check" 버튼을 누를 때, 스크립트는 번호의 유효성을 검사합니다. 번호가 유효한 경우(정규식에 의해 지정된 문자 시퀀스와 일치합니다), 스크립트는 사용자에게 감사하는 메시지와 번호를 확인하는 메시지를 나타냅니다. 번호가 유효하지 않은 경우, 스크립트는 전화번호가 유효하지 않다는 것을 사용자에게 알립니다.

+ +

비 캡처링 괄호 (?: , 정규식은 세 자리 숫자를 찾습니다 \d{3} OR | 왼쪽 괄호\( 세 자리 숫자 다음에 \d{3}, 닫는 괄호 다음에 \), (비 캡처링 괄호를 종료)) 안에, 하나의 대시, 슬래시, 또는 소수점을 다음과 같이 발견했을 때,  세 자리 숫자 다음에 d{3}, 대시의 기억 매치, 슬래시, 또는 소수점 다음에 \1, 네 자리 숫자 다음에 \d{4} 문자를 기억합니다([-\/\.]).

+ +

사용자가 <Enter> 키를 누를 때 활성화 변경 이벤트는 RegExp.input의 값을 설정합니다.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
+    <meta http-equiv="Content-Script-Type" content="text/javascript">
+    <script type="text/javascript">
+      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]);
+      }
+    </script>
+  </head>
+  <body>
+    <p>Enter your phone number (with area code) and then click "Check".
+        <br>The expected format is like ###-###-####.</p>
+    <form action="#">
+      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
+    </form>
+  </body>
+</html>
+
+ +

{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}

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 deleted file mode 100644 index 629cbd069a..0000000000 --- a/files/ko/web/javascript/guide/values,_variables,_and_literals/index.html +++ /dev/null @@ -1,708 +0,0 @@ ---- -title: 문법과 자료형 -slug: 'Web/JavaScript/Guide/Values,_variables,_and_literals' -tags: - - Guide - - JavaScript - - 'l10n:priority' -translation_of: Web/JavaScript/Guide/Grammar_and_types ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}
- -

이 장은 JavaScript의 기본 문법과 변수 선언, 자료형 및 리터럴을 다룹니다.

- -

기본

- -

JavaScript는 문법의 대부분을 Java와 C, C++로부터 차용하고 있으며, Awk, Perl, Python의 영향도 받았습니다.

- -

JavaScript는 대소문자를 구별하며 유니코드 문자셋을 이용합니다. 따라서 다음과 같은 코드도 유효합니다.

- -
var 갑을 = "병정";
-var Früh = "foobar"; // Früh: 독일어로 "이른"
-
- -

하지만 Früh는 früh와 다릅니다. 대소문자를 구분하기 때문입니다.

- -

JavaScript에서는 명령을 {{Glossary("Statement", "명령문(statement)")}}이라고 부르며, 세미콜론(;)으로 구분합니다.

- -

명령문이 한 줄을 다 차지할 경우에는 세미콜론이 필요하지 않습니다. 그러나 한 줄에 두 개 이상의 명령문이 필요하다면 세미콜론으로 구분해야 합니다. ECMAScript는 세미콜론을 자동으로 삽입해 명령문을 끝내는 규칙(ASI)도 가지고 있습니다. (더 많은 정보는 JavaScript의 어휘 문법 에 대한 자세한 참고서를 참고하세요) 하지만, 세미콜론이 필요하지 않은 경우라도 항상 세미콜론으로 끝마치는 편이 버그 예방 차원에서 더 좋은 습관이라고 여겨집니다.

- -

JavaScript의 스크립트 소스는 왼쪽에서 오른쪽으로 탐색하면서 토큰, 제어 문자, 줄바꿈 문자, 주석이나 공백으로 이루어진 입력 element의 시퀀스로 변환됩니다. 스페이스, 탭, 줄바꿈 문자는 공백으로 간주됩니다.

- -

주석

- -

주석의 구문은 C++ 및 다른 많은 언어와 똑같습니다.

- -
// 한 줄 주석
-
-/* 이건 더 긴,
- * 여러 줄 주석입니다.
- */
-
-/* 그러나, /* 중첩된 주석은 쓸 수 없습니다 */ SyntaxError */
- -

주석은 공백처럼 행동하며 스크립트 실행 시 버려집니다.

- -
-

참고: 몇몇 자바스크립트 파일의 시작부에 #!/usr/bin/env node와 같은 형태의 주석 문법이 쓰이는 것을 볼 수 있습니다. 이것은 해시백 주석 문법이라고 하는데, 이 특별한 주석은 스크립트를 실행할 때 쓸 특별한 자바스크립트 인터프리터의 경로를 설정할 때 쓰입니다.  해시백 주석을 참고하여 자세한 내용을 확인할 수 있습니다.

-
- -

선언

- -

JavaScript의 선언에는 3가지 방법이 있습니다.

- -
-
{{jsxref("Statements/var", "var")}}
-
변수를 선언. 추가로 동시에 값을 초기화.
-
{{jsxref("Statements/let", "let")}}
-
블록 범위(scope) 지역 변수를 선언. 추가로 동시에 값을 초기화.
-
{{jsxref("Statements/const", "const")}}
-
블록 범위 읽기 전용 상수를 선언.
-
- -

변수

- -

어플리케이션에서 값에 상징적인 이름으로 변수를 사용합니다. 변수명은 {{Glossary("식별자(identifier)")}}라고 불리며 특정 규칙을 따릅니다.

- -

JavaScript 식별자는 문자, 밑줄(_) 혹은 달러 기호($)로 시작해야 하는 반면 이후는 숫자(0-9)일 수도 있습니다. JavaScript가 대소문자를 구분하기에, 문자는 "A"부터 "Z"(대문자)와 "a"부터 "z"(소문자)까지 모두 포함합니다.

- -

ISO 8859-1 혹은 Unicode 문자(가령 å 나 ü)도 식별자에 사용할 수 있습니다(좀 더 상세한 내용은 이 블로그 글을 참고). 또한 Unicode escape sequences도 식별자에 문자로 사용할 수 있습니다.

- -

적절한 이름으로는 Number_hits, temp99, $credit 및 _name등입니다.

- -

변수 선언

- -

변수 선언은 아래 3가지 방법으로 가능합니다.

- -
    -
  • {{jsxref("Statements/var", "var")}} 키워드로. 예를 들어, var x = 42. 이 구문은 지역 및 전역 변수를 선언하는데 모두 사용될 수 있습니다.
    • -
  • {{jsxref("Statements/let", "let")}} 키워드로. 예를 들어, let y = 13. 이 구문은 블록 범위 지역 변수를 선언하는데 사용될 수 있습니다. 아래 변수 범위 참고하세요.
    • -
- -

간단히 변수에 값을 할당 할 수도 있습니다. 예를 들어, x = 42 와 같은 구문은 선언되지 않는 전역변수 를 만듭니다. 뿐만 아니라, 자바스크립트의 엄격한 경고를 만들어냅니다. 선언되지 않은 전역변수는 의도되지 않은 동작을 만들어내고는 합니다. 따라서 선언되지 않는 전역변수를 사용하면 안됩니다.

- -

변수 할당

- -

지정된 초기값 없이 var 혹은 let 문을 사용해서 선언된 변수는 {{jsxref("undefined")}} 값을 갖습니다.

- -

선언되지 않은 변수에 접근을 시도하는 경우 {{jsxref("ReferenceError")}} 예외가 발생합니다.

- -
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;
-
- -

undefined를 사용하여 변수값이 있는지 확인할 수 있습니다. 아래 코드에서, input 변수는 값이 할당되지 않았고 if문은 true로 평가합니다.

- -
var input;
-if(input === undefined) {
-  doThis();
-} else {
-  doThat();
-}
-
- -

undefined 값은 boolean 문맥(context)에서 사용될 때 false로 동작합니다. 예를 들어, 아래 코드는 myArray 요소가 undefined이므로 myFunction 함수를 실행합니다.

- -
var myArray = [];
-if (!myArray[0]) myFunction();
-
- -

undefined 값은 수치 문맥에서 사용될 때 NaN으로 변환됩니다.

- -
var a;
-a + 2; // NaN으로 평가
- -

{{jsxref("null")}} 값을 평가할 때, 수치 문맥에서는 0으로, boolean 문맥에서는 false로 동작합니다. 예를 들면,

- -
var n = null;
-console.log(n * 32); // 콘솔에 0 으로 로그가 남음.
-
- -

변수 범위

- -

어떤 함수의 바깥에 변수를 선언하면, 현재 문서의 다른 코드에 해당 변수를 사용할 수 있기에 전역 변수라고 합니다. 만약 함수 내부에 변수를 선언하면, 오직 그 함수 내에서만 사용할 수 있기에 지역 변수라고 부릅니다.

- -

ECMAScript 6 이전의 JavaScript는 block 문 범위가 없습니다. 그래서 오히려, 블록 내에 선언된 변수는 그 블록 내에 존재하는 함수(혹은 전역 범위)에 지역적입니다. 예를 들어서 아래의 코드는 5라는 로그를 남깁니다. x의 범위가 이 경우 if문 블록이 아니라 x가 선언된 함수(나 전역 문맥)이기 때문입니다.

- -
if (true) {
-  var x = 5;
-}
-console.log(x); // 5
-
- -

ECMAScript 6에 도입된 let 선언을 사용했을 때, 이 동작은 바뀌었습니다.

- -
if (true) {
-  let y = 5;
-}
-console.log(y); // ReferenceError: y is not defined
- -

변수 호이스팅

- -

또 다른 JavaScript 변수의 특이한 점은 예외를 받지 않고도, 나중에 선언된 변수를 참조할 수 있다는 것입니다. 이 개념은 호이스팅(hoisting)으로 알려져 있습니다. 즉 JavaScript 변수가 어떤 의미에서 "끌어올려지거"나 함수나 문의 최상단으로 올려지는 것을 말합니다. 하지만, 끌어올려진 변수는 undefined 값을 반환합니다. 그래서 심지어 이 변수를 사용 혹은 참조한 후에 선언 및 초기화하더라도, 여전히 undefined를 반환합니다.

- -
/**
- * 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";
-})();
-
- -

위 예제는 아래 예제와 동일하게 볼 수 있습니다.

- -
/**
- * 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";
-})();
- -

호이스팅 때문에, 함수 내의 모든 var 문은 가능한 함수 상단 근처에 두는 것이 좋습니다. 이 방법은 코드를 더욱 명확하게 만들어줍니다.

- -

ECMAScript 2015의 let (const)는 변수를 블록의 상단으로 올리지 않습니다.
- 변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 {{jsxref("ReferenceError")}}를 발생시키게 됩니다.
- 변수는 블록 시작부터 선언이 처리될 때까지 'temporal dead zone'에 위치하게 됩니다.

- -
console.log(x); // ReferenceError
-let x = 3;
-
- -

함수 호이스팅

- -

함수에서는 단지 함수 선언만 상단으로 끌어올려집니다. 함수 표현식은 그렇지 않습니다.

- -
/* 함수 선언 */
-
-foo(); // "bar"
-
-function foo() {
-  console.log('bar');
-}
-
-
-/* 함수 표현식 */
-
-baz(); // TypeError: baz is not a function
-
-var baz = function() {
-  console.log('bar2');
-};
- -

전역 변수

- -

전역 변수는 사실 global 객체의 속성(property)입니다. 웹 페이지에서 global 객체는 {{domxref("window")}} 이므로, windows.variable 구문을 통해 전역 변수를 설정하고 접근할 수 있습니다.

- -

그 결과, window 혹은 frame의 이름을 지정하여 한 window 혹은 frame에서 다른 window 혹은 frame에 선언된 전역 변수에 접근할 수 있습니다. 예를 들어, phoneNumber 라는 변수가 문서에 선언된 경우, iframe에서 parent.phoneNumber로 이 변수를 참조할 수 있습니다.

- -

상수

- -

{{jsxref("Statements/const", "const")}} 키워드로 읽기 전용 상수를 만들 수 있습니다. 상수 식별자의 구문은 변수 식별자와 같습니다. 문자, 밑줄이나 달러 기호로 시작해야 하고 문자, 숫자나 밑줄을 포함할 수 있습니다.

- -
const PI = 3.14;
-
- -

상수는 스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재선언될 수 없습니다. 값으로 초기화해야 합니다.

- -

상수에 대한 범위 규칙은 let 블록 범위 변수와 동일합니다. 만약 const 키워드가 생략된 경우에는, 식별자는 변수를 나타내는 것으로 간주됩니다.

- -

상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없습니다. 예를 들어,

- -
// 오류가 발생합니다
-function f() {};
-const f = 5;
-
-// 역시 오류가 발생합니다
-function f() {
-  const g = 5;
-  var g;
-
-  //statements
-}
-
- -

그러나, 상수에 할당된 객체의 속성은 보호되지 않아서 다음의 문은 문제없이 실행됩니다.

- -
const MY_OBJECT = {'key': 'value'};
-MY_OBJECT.key = 'otherValue';
-
- -

또한, 배열의 내용도 보호되지 않아서 다음의 문도 문제없이 실행됩니다.

- -
const MY_ARRAY = ['HTML','CSS'];
-MY_ARRAY.push('JAVASCRIPT');
-console.log(MY_ARRAY); //logs ['HTML','CSS','JAVASCRIPT'];
-
- -

데이터 구조 및 형

- -

데이터 형

- -

최신 ECMAScript 표준은 7가지 데이터 형을 정의합니다.

- -
    -
  • 6가지 {{Glossary("Primitive", "원시")}} 데이터 형 -
      -
    • {{Glossary("Boolean")}}. true와 false
      • -
    • {{Glossary("null")}}. null 값을 나타내는 특별한 키워드. JavaScript는 대소문자를 구분하므로, null은 Null, NULL 혹은 다른 변형과도 다릅니다.
      • -
    • {{Glossary("undefined")}}. 값이 저장되어 있지 않은 최상위 속성.
      • -
    • {{Glossary("Number")}}. 정수 또는 실수형 숫자. 예:42 혹은 3.14159.
      • -
    • {{Glossary("String")}}. 문자열. 예:"안녕"
      • -
    • {{Glossary("Symbol")}}. (ECMAScript 6에 도입) 인스턴스가 고유하고 불변인 데이터 형.
      • -
    -
    • -
  • 그리고 {{Glossary("Object")}}
    • -
- -

이 데이터 형이 비교적 많지 않지만, 어플리케이션에 유용한 기능을 수행할 수 있습니다. {{jsxref("Object", "객체")}}와 {{jsxref("Function", "함수")}}는 언어의 다른 기본 요소입니다. 객체는 값을 위한 컨테이너, 함수는 어플리케이션이 수행할 수 있는 절차(procedure)로 생각할 수 있습니다.

- -

자료형 변환

- -

JavaScript는 동적 형지정(정형) 언어입니다. 이는 변수를 선언할 때 데이터 형을 지정할 필요가 없음을 의미합니다. 또한 데이터 형이 스크립트 실행 도중 필요에 의해 자동으로 변환됨을 뜻합니다. 그래서, 예를 들어, 다음과 같이 변수를 정의할 수 있습니다.

- -
var answer = 42;
- -

그리고 나중에, 동일한 변수에 문자열 값을 할당할 수도 있습니다. 아래와 같이,

- -
answer = "Thanks for all the fish...";
-
- -

JavaScript는 동적 형지정 언어이므로, 이 할당은 오류 메시지가 발생하지 않습니다.

- -

숫자와 문자열 값 사이에 + 연산자를 포함한 식에서, JavaScript는 숫자 값을 문자열로 변환합니다. 예를 들어, 아래와 같은 문이 있습니다.

- -
x = "The answer is " + 42 // "The answer is 42"
-y = 42 + " is the answer" // "42 is the answer"
- -

다른 연산자를 포함한 식의 경우, JavaScript는 숫자 값을 문자열로 변환하지 않습니다. 예를 들면,

- -
"37" - 7 // 30
-"37" + 7 // 377
-
- -

문자열을 숫자로 변환하기

- -

숫자를 나타내는 값이 문자열로 메모리에 있는 경우, 변환을 위한 메서드가 있습니다.

- -
    -
  • {{jsxref("parseInt", "parseInt()")}}
    • -
  • {{jsxref("parseFloat", "parseFloat()")}}
    • -
- -

parseInt는 오직 정수만 반환하므로, 소수에서는 사용성이 떨어집니다. 게다가 parseInt를 잘 사용하기 위해서는 항상 진법(Radix) 매개변수를 포함해야 합니다. 진법 매개변수는 변환에 사용될 진법을 지정하는데 사용됩니다.

- -

문자열을 숫자로 변환하는 대안은 +(단항 더하기) 연산자입니다.

- -
"1.1" + "1.1" = "1.11.1"
-(+"1.1") + (+"1.1") = 2.2
-// 참고: 괄호는 명확성을 위해 추가, 필요한 것은 아닙니다.
-
- -

리터럴

- -

JavaScript에서 값을 나타내기 위해 리터럴을 사용합니다. 이는 말 그대로 스크립트에 부여한 고정값으로, 변수가 아닙니다. 이 절에서는 다음과 같은 형태의 리터럴을 설명합니다.

- -
    -
  • {{anch("배열_리터럴", "배열 리터럴")}}
    • -
  • {{anch("불린_리터럴", "불린 리터럴")}}
    • -
  • {{anch("부동_소수점_리터럴", "부동 소수점 리터럴")}}
    • -
  • {{anch("정수", "정수")}}
    • -
  • {{anch("객체_리터럴", "객체 리터럴")}}
    • -
  • {{anch("정규식_리터럴", "정규식 리터럴")}}
    • -
  • {{anch("문자열_리터럴", "문자열 리터럴")}}
    • -
- -

배열 리터럴

- -

배열 리터럴은 0개 이상의 식(expression) 목록입니다. 각 식은 배열 요소를 나타내고 대괄호([])로 묶입니다. 배열 리터럴을 사용하여 배열을 만들 때, 그 요소로 지정된 값으로 초기화되고, 그 길이는 지정된 인수의 갯수로 설정됩니다.

- -

아래 예제는 요소가 3개로 길이가 3인 coffees 배열을 만듭니다.

- -
var coffees = ["French Roast", "Colombian", "Kona"];
-
- -
-

참고: 배열 리터럴은 일종의 객체 이니셜라이저(initialiizer)입니다. Using Object Initializers 참고.

-
- -

배열이 최상단 스크립트에서 리터럴을 사용하여 만들어진 경우, JavaScript는 배열 리터럴을 포함한 식을 평가할 때마다 배열로 해석합니다. 게다가, 함수에서 사용되는 리터럴은 함수가 호출될 때마다 생성됩니다.

- -

배열 리터럴은 배열 객체입니다. 배열 객체에 대한 자세한 내용은 {{jsxref("Array")}}와 Indexed collections 참고.

- -

배열 리터럴의 추가 쉼표

- -

배열 리터럴에서 모든 요소를 지정할 필요는 없습니다. 만약 잇달아 두 개의 쉼표를 두면, 배열은 지정되지 않은 요소를 undefined로 만듭니다. 다음 예제는 fish 배열을 만듭니다.

- -
var fish = ["Lion", , "Angel"];
-
- -

이 배열은 값이 있는 두 요소와 빈 요소 하나를 가집니다(fish[0]은 "Lion", fish[1]은 undefined, fish[2]는 "Angel").

- -

만약 요소 목록을 후행(trailing) 쉼표로 끝낸다면, 그 쉼표는 무시됩니다. 다음 예제에서, 배열의 길이는 3입니다. myList[3]은 없습니다. 목록의 다른 모든 쉼표는 새로운 요소를 나타냅니다.

- -
-

참고: 후행 쉼표는 구버전 브라우저에서 오류를 유발할 수 있으므로 제거하는게 최선입니다.

-
- -
var myList = ['home', , 'school', ];
-
- -

아래 예제에서, 배열의 길이는 4이며, myList[0]과 myList[2]는 값이 빠졌습니다.

- -
var myList = [ , 'home', , 'school'];
-
- -

아래 예제에서, 배열의 길이는 4이며, myList[1]과 myList[3]은 값이 빠졌습니다. 마지막 쉼표는 무시됩니다.

- -
var myList = ['home', , 'school', , ];
-
- -

추가 쉼표의 동작을 이해하는 것은 JavaScript를 언어로서 이해하는데 중요하지만, 코드를 작성할 때는 빠진 요소의 값을 명시적으로 undefined로 선언하는 것이 코드의 명확성과 유지보수성을 높입니다.

- -

불리언 리터럴

- -

불리언 형은 true와 false의 리터럴 값을 가집니다.

- -

원시 불린 값 true 및 false와 Boolean 객체의 true 및 false 값을 혼동하지 마세요. Boolean 객체는 원시 불린 데이터 형을 감싸는 래퍼(wrapper)입니다. 더 많은 정보는 {{jsxref("Boolean")}}을 참고하세요.

- -

정수 리터럴

- -

정수는 10진, 16진, 8진 및 2진수로 표현될 수 있습니다.

- -
    -
  • 10진 정수 리터럴은 선행 0(zero)이 아닌 숫자열로 이루어집니다.
    • -
  • 정수 리터럴에서 선행 0(zero)이나 선행 0o(혹은 0O)은 8진수임을 나타냅니다. 8진 정수는 오직 숫자 0-7만 포함할 수 있습니다.
    • -
  • 선행 0x(나 0X)는 16진수임을 나타냅니다. 16진 정수는 숫자 0-9 및 문자 a-f, A-F를 포함할 수 있습니다.
    • -
  • 선행 0b(나 0B)는 2진수임을 나타냅니다. 2진 정수는 오직 숫자 0과 1만 포함할 수 있습니다.
    • -
- -

다음은 정수 리터럴 예제입니다.

- -
0, 117 및 -345 (10진수)
-015, 0001 및 -0o77 (8진수)
-0x1123, 0x00111 및 -0xF1A7 (16진수)
-0b11, 0b0011 및 -0b11 (2진수)
-
- -

더 많은 정보는 Lexical grammar reference의 Numeric literals를 참고하세요.

- -

부동 소수점 리터럴

- -

부동 소수점 리터럴은 아래와 같은 부분으로 이루어집니다.

- -
    -
  • 부호("+"나 "-")가 달릴 수 있는 10진 정수,
    • -
  • 소수점("."),
    • -
  • 소수(또 다른 10진수),
    • -
  • 지수.
    • -
- -

지수부는 "e"나 "E" 다음에 오며 부호("+"나 "-")가 달릴 수 있는 정수입니다. 부동 소수점 리터럴은 적어도 숫자 하나와 소수점 혹은 "e"(나 "E")가 있어야 합니다.

- -

더 간결하게 설명하면, 구문은 다음과 같습니다.

- -
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
-
- -

예를 들면,

- -
3.1415926
--.123456789
--3.1E+12
-.1e-23
-
- -

객체 리터럴

- -

객체 리터럴은 중괄호({})로 묶인 0개 이상인 객체의 속성명과 관련 값 쌍 목록입니다. 문의 시작에 객체 리터럴을 사용해서는 안됩니다. 이는 {가 블록의 시작으로 해석되기 때문에 오류를 이끌거나 의도한 대로 동작하지 않습니다.

- -

아래는 객체 리터럴의 예제입니다. car 객체의 첫째 요소는 myCar 속성을 정의하고 문자열 "Saturn"을 할당합니다. 반면 둘째 요소인 getCar 속성은 function (carTypes("Honda"))을 호출한 결과가 즉시 할당됩니다. 셋째 요소 special 속성은 기존 변수 sales를 사용합니다.

- -
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
-
- -

게다가, 속성명으로 숫자나 문자열 리터럴을 사용하거나 또다른 객체 리터럴 내부에 객체를 중첩할 수도 있습니다. 아래 예제는 이 옵션을 사용합니다.

- -
var car = { manyCars: {a: "Saab", "b": "Jeep"}, 7: "Mazda" };
-
-console.log(car.manyCars.b); // Jeep
-console.log(car[7]); // Mazda
-
- -

객체 속성명은 빈 문자열 포함 어떤 문자열도 될 수 있습니다. 속성명이 유효한 JavaScript {{Glossary("식별자")}}나 숫자가 아닌 경우, 따옴표로 묶여야 합니다. 또한 유효한 식별자가 아닌 속성명은 점(.) 속성으로 접근할 수 없습니다. 대신 배열 같은 표기법("[]")으로 접근하고 값을 설정할 수 있습니다.

- -
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!
-
- -

향상된 객체 리터럴

- -

ES2015에서, 객체 리터럴은 구성에서 프로토타입 설정, foo: foo 할당을 위한 단축 표기, 메서드 정의, super 클래스 호출 및 식으로 동적인 속성명 계산을 지원하기 위해 확장됐습니다. 그에 따라 객체 리터럴 및 클래스 선언이 함께 더 가까워지고, 객체 기반 설계는 같은 일부 편의기능으로 득을 볼 수 있습니다.

- -
var obj = {
-    // __proto__
-    __proto__: theProtoObj,
-    // ‘handler: handler’의 단축 표기
-    handler,
-    // Methods
-    toString() {
-     // Super calls
-     return "d " + super.toString();
-    },
-    // Computed (dynamic) property names
-    [ 'prop_' + (() => 42)() ]: 42
-};
- -

아래를 참고하세요.

- -
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
-
- -

정규식 리터럴

- -

정규식 리터럴은 (정규식 상세) 슬래시 사이에 감싸인 패턴입니다. 다음은 정규식 리터럴 예제입니다.

- -
var re = /ab+c/;
- -

문자열 리터럴

- -

문자열 리터럴은 큰 따옴표(") 혹은 작은 따옴표(')로 묶인 0개 이상의 문자입니다. 문자열은 같은 형 따옴표, 즉 큰 따옴표 쌍이나 작은 따옴표 쌍으로 구분되어야 합니다. 아래는 문자열 리터럴의 예제입니다.

- -
"foo"
-'bar'
-"1234"
-"one line \n another line"
-"John's cat"
-
- -

문자열 리터럴 값은 문자열 객체의 모든 메서드를 호출할 수 있습니다. JavaScript는 자동으로 문자열 리터럴을 임시 문자열 객체로 변환, 메서드를 호출하고 나서 임시 문자열 객체를 폐기합니다. 또한 문자열 리터럴에서도 String.length 속성을 사용할 수 있습니다.

- -
console.log("John's cat".length)
-// 공백을 포함한 문자열 내 심볼 갯수가 출력됩니다.
-// 여기서는, 10.
-
- -

ES2015에서는, 템플릿 리터럴도 사용할 수 있습니다. 템플릿 문자열은 문자열 구성을 위한 달콤한 구문을 제공합니다. 이는 Perl, Python 등에 있는 문자열 삽입(interpolation) 기능과 비슷합니다. 마음대로, 문자열 구성을 사용자 정의하고 인젝션 공격을 피하거나 문자열 콘텐츠로 더 고레벨 데이터 구조를 구성하기 위한 태그가 추가될 수 있습니다.

- -
// 기본적인 문자열 리터럴 생성
-`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}&b=${b}
-     Content-Type: application/json
-     X-Credentials: ${credentials}
-     { "foo": ${foo},
-       "bar": ${bar}}`(myOnReadyStateChangeHandler);
- -

꼭 문자열 객체를 사용할 필요가 없는 경우 문자열 리터럴을 사용해야 합니다. 문자열 객체에 대해 자세한 사항은 {{jsxref("String")}}을 참고하세요.

- -

문자열에서 특수 문자 사용

- -

보통 문자에 더해서, 문자열에 아래 예제와 같이 특수 문자도 포함할 수 있습니다.

- -
"one line \n another line"
-
- -

다음 표는 JavaScript 문자열에 사용할 수 있는 특수 문자 목록입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
표: JavaScript 특수 문자
문자뜻
\0Null Byte
\bBackspace
\fForm feed
\nNew line
\rCarriage return
\tTab
\vVertical tab
\'Apostrophe 혹은 작은 따옴표
\"큰 따옴표
\\백슬래시
\XXXLatin-1 인코딩 문자는 0 - 377 사이 8진수 3자리까지 지정될 수 있습니다. 예를 들어, \251은 copyright 심볼을 표현하는 8진수 시퀀스입니다.
\xXXLatin-1 인코딩 문자는 00 - FF 사이의 16진수 2자리로 지정될 수 있습니다. 예를 들어, \xA9는 copyright 심볼을 표현하는 16진수 시퀀스입니다.
\uXXXX유니코드 문자는 16진수 4자리로 지정될 수 있습니다. 예를 들어, \u00A9는 copyright 심볼을 표현하는 유니코드 열입니다. Unicode escape sequences를 참고하세요.
\u{XXXXX}유니코드 코드 포인트 이스케이프. 예를 들어, \u{2F804}는 간단한 유니코드 이스케이프 \uD87E\uDC04와 같습니다.
- -

문자 이스케이프

- -

표에 없는 문자의 경우 전행 백슬래시는 무시되지만, 이 용법은 더 이상 사용되지 않으며, 사용을 피해야 합니다.

- -

전행 백슬래시와 함께 문자열 안에 따옴표를 사용할 수 있습니다. 이것을 따옴표 이스케이프라고 합니다. 예를 들어,

- -
var quote = "He read \"The Cremation of Sam McGee\" by R.W. Service.";
-console.log(quote);
-
- -

이 코드의 결과는,

- -
He read "The Cremation of Sam McGee" by R.W. Service.
-
- -

백슬래시를 문자열 내에 포함시키기 위해서는, 백슬래시 문자를 이스케이프 해야 합니다. 예를 들어, 파일 경로 c:\temp를 문자열에 할당하기 위해서는 아래와 같이 사용합니다.

- -
var home = "c:\\temp";
-
- -

또한 줄바꿈 역시 전행 백슬래시로 이스케이프할 수 있습니다. 백슬래시와 줄바꿈 모두 문자열 값에서는 사라집니다.

- -
var str = "this string \
-is broken \
-across multiple\
-lines."
-console.log(str);   // this string is broken across multiplelines.
-
- -

JavaScript에는 "heredoc" 구문은 없지만, 줄바꿈 이스케이프와 각 줄 끝 이스케이프된 줄바꿈을 추가하여 흉내낼 수 있습니다.

- -
var poem =
-"Roses are red,\n\
-Violets are blue.\n\
-I'm schizophrenic,\n\
-And so am I."
-
- -

ECMAScript 2015에서는 템플릿 리터럴(template literals)이라는 새로운 리터럴이 소개되었습니다. 이 것은 다중 문자열을 포함한 많은 새로운 기능을 가지고 있습니다!

- -
var poem =
-`Roses are red,
-Violets are blue.
-Sugar is sweet,
-and so is foo.`
-
- -

추가 정보

- -

이 장은 선언과 형에 대한 기본 구문에 초점을 맞춥니다. JavaScript 언어 구조에 대해 더 많이 배우려면, 다음 장을 참고하세요.

- - - -

다음 장에서는, 흐름 제어 구조와 오류 처리를 살핍니다.

- -

{{PreviousNext("Web/JavaScript/Guide/소개", "Web/JavaScript/Guide/Control_flow_and_error_handling")}}

diff --git "a/files/ko/web/javascript/guide/\352\260\235\354\262\264_\353\252\250\353\215\270\354\235\230_\354\204\270\353\266\200\354\202\254\355\225\255/index.html" "b/files/ko/web/javascript/guide/\352\260\235\354\262\264_\353\252\250\353\215\270\354\235\230_\354\204\270\353\266\200\354\202\254\355\225\255/index.html" deleted file mode 100644 index 230d5cb9e1..0000000000 --- "a/files/ko/web/javascript/guide/\352\260\235\354\262\264_\353\252\250\353\215\270\354\235\230_\354\204\270\353\266\200\354\202\254\355\225\255/index.html" +++ /dev/null @@ -1,714 +0,0 @@ ---- -title: 객체 모델의 세부 사항 -slug: Web/JavaScript/Guide/객체_모델의_세부사항 -translation_of: Web/JavaScript/Guide/Details_of_the_Object_Model ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
- -

자바스크립트는 클래스 기반이 아닌 prototype에 기초한 객체 기반 언어 입니다. 이런 차이점으로 인해, 객체들의 계층 구조의 생성과 속성 및 속성 값의 상속을 어떻게 구현해야 하는지에 대한 부분이 덜 분명할 수 있습니다. 이번 장에서는 이런 상황을 명확하게 하고자 합니다. 

- -

이번 장에선 이미 자바스크립트를 어느 정도 알고 있고, 간단한 객체를 생성하는 함수들을 사용해보았다는 가정하에 진행합니다.

- -

클래스 기반 언어 대 프로토타입 기반 언어

- -

Java와 C++같은 클래스 기반의 언어들은 두개의 구별되는 개념에 기반을 두고 있습니다: 그건 바로 클래스와 인스턴스입니다.

- -
    -
  • 클래스는  특정 객체군을 특징 짓는 모든 속성들(Java에서는 메서드들과 필드들을 , C++에서는  멤버들을 속성으로 간주합니다. )을 정의합니다.클래스는 해당 객체군을 표현할 수 있는 특정 멤버를 지칭하는 것이 아닌 그보다 더 추상적인 것입니다. 예를 들어, 직원클래스는 직원들을 대표할 수 있습니다.
    • -
  • 반면 인스턴스는 클래스를 기반으로 실체화된 것입니다. 예를 들어, 빅토리아는 특정 직원 개인을 나타내는 직원클래스의 인스턴스가 될 수 있습니다. 인스턴스는 부모 클래스의 속성과 동일한 속성들을 가집니다.
    • -
- -

자바스크립트같은 프로토타입기반의 언어들은 위와 같은 클래스와 인스턴스의 차이를 두지 않습니다. 간단하게 객체들을 가질 뿐입니다. prototype기반의 언어는 원형(프로토타입)의 객체 개념을 가지고 있습니다. 하나의 객체는 새로운 객체를 생성했을 때 초기 속성을 가질 수 있도록 하는 형판(template)으로 사용됩니다. 객체는 생성될 때 혹은 실행 시에 자기 자신의 속성을 명시할 수 있습니다. 추가적으로, 객체들은 또 다른 객체를 생성하기 위한 프로토타입으로 연관지어 질 수 있으며 프로토타입으로부터 생성된 두번째 객체가 프로토타입인 첫번째 객체의 속성을 공유(혹은 접근)하는 것을 허용합니다. 

- -

클래스 정의

- -

클래스 기반의 언어들에서, 별도의 클래스를 생성하고 그 안에서 해당 클래스를 정의 할 수 있습니다. 해당 정의에서 클래스의 인스턴스를 생성할 수 있는 생성자라고하는 특별한 메서드를 명시할 수 있습니다. 생성자는 해당 인스턴스의 초기 속성 값을 지정할 수 있고, 생성 시점에, 다른 적절한 처리를 수행 할 수 있습니다. 클래스의 인스턴스를 생성하기 위해서 new 연산자와 함께 생성자를 호출해야 합니다. 

- -

자바스크립트는 위와 비슷한 방법을 취합니다. 하지만 생성자이외에 따로 클래스 정의를 가지고 있지는 않습니다. 대신, 특정 속성및 속성값들을 가지고 객체를 생성하는 생성자 함수를 정의할 수 있습니다. 특정 자바스크립트 함수는 생성자로 사용 될 수 있습니다. 새로운 객체를 생성할려면 new연산자와 함께 생성자 함수를 사용해야 합니다.

- -
-

ECMAScript 2015에 클래스 선언이 새롭게 소개되었습니다.

- -
-

ECMAScript 2015에서 소개된 자바스크립트 클래스는 주로 문법적 설탕으로 기존 자바스크립트 프로토타입 기반 상속에  읽기 좋은 형식으로 바뀌었습니다. 이 클래스 문법이 자바스크립트에 새로운 객체 중심 상속 모델을 소개한 것은 아닙니다.

-
-
- -

하위 클래스와 상속

- -

클래스 기반 언어에서는 클래스 정의를 통해 클래스 계층구조를 생성합니다. 클래스를 정의할 때 이미 존재하는 클래스의 하위 클래스를 새로운 클래스로 지정할 수 있습니다. 이 하위 클래스는 부모 클래스의 모든 속성을 상속받으며 추가로 새로운 속성을 추가하거나 상속받은 속성을 수정할 수 있습니다. 예를 들어  이름(name)과 부서(dept)을 가진 직원(Employee) 클래스와 그 하위 클래스에 보고(reports) 속성을 추가한 관리자(Manager) 클래스가 있다고 해봅시다. 이 경우 관리자(Manager)의 인스턴스는 다음과 같이 세가지 속성을 모두 가질 수 있습니다 - 이름(name),  부서(dept),  보고(reports).

- -

자바스크립트는 생성자 함수와 프로토타입 객체를 연결해 상속을 구현합니다. 이런 식으로 직원(Employee) — 관리자(Manager) 예제를 똑같이 구현할 수 있지만 조금 다른 * 사용합니다. 먼저, 이름(name),  부서(dept) 속성을 명시하여 직원(Employee) 생성자 함수를 정의합니다. 그런 다음, 직원(Employee)의 생성자를 호출한 후 보고(reports) 속성을 명시해 관리자(Manager) 생성자 함수를 정의합니다. 마지막으로 Employee.prototype 에서 파생된 새로운 객체를  관리자(Manager) 생성자 함수의 프로토타입으로 지정합니다. 그런 다음 새로운 관리자(Manager)를 만들면 관리자(Manager) 객체를 직원(Employee) 객체로부터 이름(name),  부서(dept) 속성을 상속받습니다. 

- -

속성의 추가 삭제

- -

클래스 기반의 언어들에서는, 일반적으로 컴파일 시점에 클래스를 생성한 후에 컴파일 시점 혹은 실행 시에 해당 클래스의 인스턴스를 생성합니다. 클래스가 한번 정의된 후에 클래스를 다시 컴파일 하지 않는다면, 속성의 갯수나 형식을 변경할 수 없습니다. 하지만 자바스크립트에서느 실행 시에 객체의 속성을 추가 혹은 삭제 할 수 있습니다.  만약 객체군의 프로토타입으로 사용되는 객체에 속성을 추가하면, 프로토타입이 되는 객체들에도 새로운 속성이 추가가 됩니다.

- -

차이점들에 대한 정리

- -

다음 표는 이런 차이점들에 대한 간략한 요약을 포함하고 있습니다. 이번 장의 다음 내용들은 객체의 계층 구조를 생성하기 위한 자바스크립트 생성자와 프로토타입들의 사용에 대한 세부 사항에 대해 기술합니다. 그리고 동일한 작업을 자바에서 어떻게 처리해야 하는지도 비교해서 살펴보겠습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
클래스 기반(자바)과 프로토타입(prototype)기반(자바스크립트) 객체 시스템의 비교
클래스 기반(자바)원형 기반(자바스크립트)
클래스와 인스턴스는 별개입니다.모든 객체는 다른 객체로부터 상속을 받습니다.
클래스 정의를 가지고 클래스를 생성하고 생성자 메서드로 인스턴스를 생성합니다.생성자 함수를 가지고 객체군을 정의 및 생성합니다.
new 연산자로 하나의 객체(인스턴스)를 생성합니다.동일합니다.
이미 존재하는 클래스에 대한 하위 클래스를 정의함으로써 객체의 계층구조를 생성합니다.하나의 객체를 생성자 함수와 결합된 프로토타입에 할당함으로써 객체의 계층구조를 생성 합니다.
클래스의 상속 구조에 따라 속성을 상속 받습니다.프로토타입 체인에 따라  속성을 상속 받습니다.
클래스 정의는 모든 인스턴스의 모든 속성을 명시합니다. 실행시에 동적으로 속성을 추가할 수 없습니다.생성자 함수 혹은 프로토타입은 초기 속성들을 명시합니다. 개별 객체 혹은 전체 객체군에 동적으로 속성을 추가 삭제할 수 있습니다.
- -

직원 예제

- -

이장의 나머지 부분에서는 다음과 같은 직원 객체의 계층구조를 사용합니다. 

- -
-

직원 객체의 계층 구조.

- -

- -
    -
  • 직원(Employee) 객체는 빈 문자열을 기본값으로 가지는 이름(name) 그리고 "일반(general)"을 기본 값으로 가지는 부서(dept)를 속성으로 가집니다.
    • -
  • 관리자(Manager)객체는 직원(Employee) 객체를 근간으로 하며, 직원 객체들을 포함하기 위한 빈 배열을 기본 값으로 하는 보고(reports)속성을 가지고 있습니다.
    • -
  • 근로자(WorkerBee)객체 또한 직원(Employee) 객체를 근간으로 하며, 문자열들을 포함하기 위한 빈 배열을 기본 값으로 하는 프로젝트(projects)속성을 가집니다.
    • -
  • 영업사원(SalesPerson)객체는 또한 근로자(WorkerBee) 객체를 근간으로 하며, 100을 기본값으로 하는 할당량(quota)를 속성으로 가집니다. 또한 같은 부서내의 모든 영업사원을 지칭하기 위한 부서 속성을 "판매부서"로 재정의 합니다. 
    • -
  • 엔지니어(Engineer)객체도 근로자(WorkerBee) 객체를 근간으로 하며, 빈 문자열을 기본값으로 가지는 장비(machine) 속성을 가집니다.그리고 엔지니어링(engineering)이라는 값으로 부서 속성을 재정의 합니다.
    • -
-
- -

계층 구조 생성

- -

직원 계층 구조를 구현하기 위한 적절한 생성자 함수를 정의하는 방법에는 여러가지가 있습니다. 개발하려고 하는 어플리케이션에 따라 생성자 함수를 정의 하는 방법은 달라질 수 있습니다. 

- -

이번 절에서는 상속을 구현하기 위한 간단한 (비교적 유연하지는 않은) 정의 방법을 보여 줄 것입니다. 이런 정의 방법을 사용하게되면, 객체를 생성할 때 어떤 속성 값도 지정을 할 수 없습니다. 새로이 생성된 객체들은 기본값들을 가지고 있으며, 나중에 해당 속성 값들을 변경할 수 있습니다.

- -

실제 어플리케이션에서는, 객체를 생성할때, 해당 객체가 가져야할 속성을 인자로 받는 생성자를 정의 할수 있습니다.(보다 자세한 사항은 다음을 참조하세요. More flexible constructors). 지금 당장은, 상속이 어떻게 작동하는지를 보여주기 위한 간단한 예제를 사용합니다. 

- -

다음의 자바와 자바스크립트로 작성된 직원 정의는 비슷합니다. 차이점은 자바언어에서는 개별 속성에 대한 타입(type)을 일일이 지정을 해야 하지만  자바스크립트에서는 일일이 개별 속성에 대한 타입(type)을 지정할 필요가 없다는 것입니다.(이런 이유로 자바스크립트가 약하게 형식화된 언어로 불리는 반면 자바는 강력하게 형식화된 언어로 불립니다.)

- - - - - - - - -
-

자바스크립트

- - 
-function Employee() {
-  this.name = "";
-  this.dept = "general";
-}
- 		-

자바

- - 
-public class Employee {
-   public String name = "";
-   public String dept = "general";
-}
-
-
- -

관리자와 근로자 정의는 계층 구조상에서 상위에 위치하는 객체를 어떻게 표시하는지에 대한 차이점을 보여 줍니다. 자바스크립트에서는 생성자 함수 정의 이후에 언제든 생성자 함수의 프로토타입(prototype) 속성의 값으로 프로토타입 인스턴스를 추가할 수 있습니다.  자바에서는 클래스 정의에 상위 클래스를 명시해야 합니다. 클래스 정의 이후에는 상위 클래스를 변경할 수 없습니다.

- -
-

자바스크립트

- -
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);
-
- -

자바

- -
public class Manager extends Employee {
-   public Employee[] reports = new Employee[0];
-}
-
-
-
-public class WorkerBee extends Employee {
-   public String[] projects = new String[0];
-}
-
-
-
-
- -

엔지니어와 영업사원 정의들은 객체들을 생성합니다. 생성된 객체는 근로자 객체의 하위 객체이고 따라서 직원 객체의 하위 객체가 됩니다. 상속 관계에 따라 엔지니어와 영업사원 객체들은 근로자와 직원객체의 속성을 가지게 됩니다. 게다가, 상속받은 부서 속성은 엔지니어와 영업사원에서 재정되어 새로운 값을 가지게 됩니다. 

- -
-

자바스크립트

- -
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);
-
- -

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 = "";
-}
-
-
- -

이런 정의 방법을 통해, 기본값을 가지는 각각의 속성을 포함하는 객체의 인스턴스를 생성할 수 있습니다. 다음 그림은 새로운 객체를 생성하고 새로운 객체에 대한 속성값들을 보여 표시하기 위한 자바스크립트의 정의들을 보여 줍니다.

- -
-

유의사항: 클래스 기반 언어들에서 인스턴스라는 용어는 특정한 기술적 의미를 가지고 있습니다. 이러한 언어들에서,  하나의 인스턴스란 하나의 클래스의 개별적인  실체이며 클래스와는 근본적으로 다릅니다. 자바스크립트에서는 클래스와 인스턴스 간의 차이가 없기 때문에, "인스턴스"가 이런 기술적 의미를 갖지 않습니다. 하지만, 자바스크립트에 대해서 얘기하자면, 비공식적으로 "인스턴스"는 특정한 생성자 함수를 이용하여 생성된 오브젝트를  의미합니다. 그래서 이번 예제에서는 jane이  Engineer 의 인스턴스라고 할 수 있습니다. 이와 유사하게, 부모, 자식, 상위, 하위의 용어들은 자바스크립트에서 공식적인 의미를 갖지 않습니다; 다만 프로토타입 체인 상의 상위 또는 하위 객체를 지칭하기 위해서 비공식적으로 사용할 수 있습니다.

-
- -

간단한 정의로 객체 생성

- -
-

객체의 계층구조

- -

오른쪽에 보이는 코드로 생성된 객체의 계층 구조는 아래와 같습니다.

- -

- -

개별 객체들

- -
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 ''
-
-
- -

객체 속성들

- -

이번 장에서는 객체가 프로토타입체인 상의 다른 객체로부터 특성을 상속받는 방법과 런타임 상에서 프로퍼티를 추가하면 무슨 일이 일어나는 지 살펴봅니다.

- -

속성 상속

- -

아래 구문처럼 WorkerBee 생성자로 mark 객체를 생성했다고 가정합니다.

- -
var mark = new WorkerBee;
-
- -

new 연산자를 만나면, 자바스크립트는 새로운 일반 객체를 생성하고 암묵적으로 내부의 [[Prototype]](__proto__) 속성의 값을 WorkerBee.prototype 의 값으로 할당하며, 해당 객체를 this 키워드의 값으로써 생성자 함수 WorkerBee에 전달합니다. 내부의 [[Prototype]] 속성은 속성값을 반환하기 위해 사용할 프로토타입 체인을 결정합니다. 이런 속성들이 할당되면, 자바스크립트는 새 객체를 반환하고, 할당 구문에 의해 변수 mark를 객체에 할당합니다.

- -

이러한 절차는 mark가 프로토타입 체인으로부터 상속받는  속성의 값을 mark 객체 내부에(local values) 명시적으로 부여하진 않습니다. 당신이 속성의 값을 요청하면, 자바스크립트는 먼저 해당 객체에 값이 존재하는지 확인합니다. 존재한다면, 해당 값이 반환됩니다. 만약 해당 객체에 값이 없다면, 프로토타입 체인을 (내장 [[Prototype]] 속성;__proto__을 이용하여)확인합니다. 체인 상의 어떤 객체가 해당 속성의 값을 가지고 있다면 그 값이 반환됩니다. 그런 속성이 발견되지 않는다면, 자바스크립트는 객체가 속성을 가지고있지 않다고 할 것입니다. 이런 식으로, mark 객체는 다음의 속성과 값을 가집니다.

- -
mark.name = "";
-mark.dept = "general";
-mark.projects = [];
- -

mark 객체는 mark.__proto__로 연결되어 있는 원형의 객체로부터 이름(name)과 부서(dept)에 대한 값을 상속 받습니다. 근로자(WorkerBee) 생성자로부터 projects속성에 대한 값을 할당을 받습니다.이것들이 자바스크립트내에서 속성과 속성 값의 상속입니다. 이런 과정의 몇몇 세부 사항들은 Property inheritance revisited에서 다룹니다. 

- -

이런 생성자들은 당신이 직접 인스턴스에만 해당 하는 값을 설정하도록 하지 않기때문에, 객체에 대한 이런 정보들은 일반적으로 적용됩니다. 근로자(WorkerBee)로부터 생성된 모든 새로운 객체들은 기본값이 적용된 속성 값들을 가지게 됩니다. 물론, 속성 값들을 변경할 수 있습니다. 아래처럼 특정 인스턴스에만 해당하는 값을 설정할 수 있습니다. 

- -
mark.name = "Doe, Mark";
-mark.dept = "admin";
-mark.projects = ["navigator"];
- -

속성 추가

- -

자바스크립트에선, 실행 시점에 특정 객체에 속성들을 추가 할 수 있습니다.생성자 함수가 제공하는 속성외에 다른 속성을 추가할 수 있습니다. 특정 단일 객체에 속성을 추가하기 위해선, 다음과 같이 해당 객체에 값을 할당 하면 됩니다:

- -
mark.bonus = 3000;
-
- -

이렇게 하면 mark객체는 보너스(bonus)속성을 가지게 됩니다. 하지만 mark객체를 제외한 나머지 근로자(WorkerBee)객체들은 보너스 속성을 가지지 않습니다. 

- -

만약 생성자 함수의 원형으로 사용되는 객체에 새로운 속성을 추가한다면,  해당 프로토타입 객체(prototype)의 속성을 상속받는 모든 객체에 해당 속성이 추가됩니다. 예를 들면, 전문분야(specialty)속성을 모든 직원 객체에 다음과 같은 구문으로 추가할 수 있습니다:

- -
Employee.prototype.specialty = "none";
-
- -

위의 구문을 실행한 직후, mark객체는 "none"이라는 값을 가지는 전문분야(specialty)속성을 가지게 됩니다.아래의 그림들은 해당 속성을 추가한 후 엔지니어(Engineer) 프로토타입에 대해 해당 속성을 재정의 했을 경우 각 객체에 미치는 영향을 보여줍니다.

- -


- 속성의 추가

- -

좀 더 유연한 생성자들

- -

지금까지 살펴 본 생성자 함수들은 인스턴스를 생성하면서 동시에 속성값을 지정할 수 없었습니다. 자바의 경우, 인스턴스를 생성 시 생성자에 인자들을 넘겨주어 인스턴스의 속성들을 초기화 할 수 있습니다. 다음의 예제 그림들은 자바처럼 인스턴스 생성 시 속성값을 설정하는 방법을 보여줍니다.

- -


- Specifying properties in a constructor, take 1

- -

다음의 표는 자바와 자바스크립트 각각의 생성자와 객체에 대한 정의를 보여 줍니다. 

- -
-

자바스크립트

- -

자바

-
- -
-
function Employee (name, dept) {
-  this.name = name || "";
-  this.dept = dept || "general";
-}
-
- -
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;
-   }
-}
-
-
- -
-
function WorkerBee (projs) {
-
- this.projects = projs || [];
-}
-WorkerBee.prototype = new Employee;
-
- -
public class WorkerBee extends Employee {
-   public String[] projects;
-   public WorkerBee () {
-      this(new String[0]);
-   }
-   public WorkerBee (String[] projs) {
-      projects = projs;
-   }
-}
-
-
- -
-
-function Engineer (mach) {
-   this.dept = "engineering";
-   this.machine = mach || "";
-}
-Engineer.prototype = new WorkerBee;
-
- -
public class Engineer extends WorkerBee {
-   public String machine;
-   public Engineer () {
-      dept = "engineering";
-      machine = "";
-   }
-   public Engineer (String mach) {
-      dept = "engineering";
-      machine = mach;
-   }
-}
-
-
- -

자바스크립트의 속성값을 설정하는 방법은 기본값을 설정하기 위한 관용구를 사용합니다.

- -
this.name = name || "";
-
- -

자바스크립트의 OR 논리 연산자(||) 첫번째 인자를 평가합니다. 첫번째 인자가 참이면 첫번째 인자를 반환하고 그렇지 않은 경우는 두번째 인자를 반환합니다. 그러므로, 위의 코드는 name인자가 name 속성에 사용 가능한 값을 가지고 있는지 확인합니다. 확인 결과 name속성에 사용가능한 값을 가지고 있을 경우, 해당 값을 this.name에 설정하게 됩니다. 반대로 그렇지 않은 경우는 빈 문자열을 this.name에 설정합니다.얼핏 보면 헛갈리지만 보다 짧은 관용구를 사용하였습니다.

- -
-

주의: 만약 인자로 false와 빈 문자열 값을 줄 경우 해당 구문은 예상한 대로 작동하지 않을 수 있습니다.

-
- -

이런 정의들을 가지고, 객체의 인스턴스를 생성할때, 객체 자신만의 속성에 대한 값을 지정할 수 있습니다. 새로운 Engineer를 생성하기 위해서 다음과 같은 구문을 사용할 수 있습니다:

- -
var jane = new Engineer("belau");
-
- -

Jane의 속성들은 다음과 같습니다:

- -
jane.name == "";
-jane.dept == "engineering";
-jane.projects == [];
-jane.machine == "belau"
-
- -

위와 같은 코드 구문으로는 name과 같이 상속받은 속성에 대한 초기값을 지정할 수 없습니다.만약 상속 받은 속성의 초기값을 설정하고자 한다면, 생성자 함수의 코드를 변경해야 합니다.

- -

지금까지, 원형 객체를 생성한 후, 그 새로운 객체 자신의 속성과 속성 값을 지정하는 것을 살펴 보았습니다. 프로토타입 체인상에서 해당 생성자가 상위 객체에 대한 생성자를 직접 호출 함으로써 더 많은 속성을 추가하도록 할 수 있습니다. 다음의 그림은 새로운 정의 방법을 보여 줍니다.

- -


- 생성자내에서 속성들 정의, 그림 2

- -

그럼 좀 더 상세하게 생성자 내에서 속성들을 정의하는 것을 살펴 보겠습니다. 다음은 엔지니어(Engineer) 생성자의 새로운 정의입니다:

- -
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -

다음과 같이 새로운 엔지니어(Engineer)객체를 생성할 수 있습니다:

- -
var jane = new Engineer("Doe, Jane", ["navigator", "javascript"], "belau");
-
- -

다음과 같은 순서에 따라 객체를 생성하고 속성을 정의하게 됩니다:

- -
    -
  1. new 연산자는 프로토타입 객체를 생성하고 생성된 객체의 __proto__속성을 Engineer.prototype으로 설정합니다.
    2. -
  2. new 연산자는 새로이 생성된 객체를 엔지니어(Engineer)생성자에 this 키워드의 값으로 전달합니다.
    3. -
  3. 생성자는 생성한 객체에 대한 base라는 새로운 속성을 생성하고 근로자(WorkerBee) 생성자의 값을 base 속성에 할당합니다. 이런 과정은 근로자(WorkerBee) 생성자를 엔지니어(Engineer)객체의 메서드로 만듭니다. base 속성의 이름은 그리 특별하지 않습니다. 다른 어떤 속성명을 사용해도 무방합니다. base 속성명은 단지 해당 속성의 목적을 환기시키기 위한 것입니다.
    4. -
  4. -

    생성자는 base 메서드에 필요한 인자들 ("Doe, Jane" and ["navigator", "javascript"])을 주어 호출합니다.명시적으로 생성자에서 사용한 "engineering"은 모든 엔지니어(Engineer)객체들이 상속받은 부서 속성에 대한 동일한 값을 가지며, 직원(Employee)으로부터 상속받은 값을 재정의 하는 것을 나타냅니다.

    -
    5. -
  5. base가 엔지니어(Engineer)의 메서드이기때문에 base메서드 내에서 this키워드를 스텝1에서 생성한 객체를 지칭하도록 해줍니다. 따라서, 근로자(WorkerBee) 함수는 차례대로 "Doe, Jane"과 "engineering" 인자를 직원(Employee)생성자에 전달합니다. 직원(Employee)생성자로부터 반환 시, 근로자(WorkerBee)함수는 남은 인자들을 프로젝트(projects)속성을 설정하기 위해 사용합니다. 
    6. -
  6. base메서드로부터 반환 시, 엔지니어(Engineer) 생성자는 해당 객체의 장비(machine)속성을 "belau"로 초기화 합니다.
    7. -
  7. 생성자로부터 반환 시, 새롭게 생성된 객체를 jane변수에 할당 합니다.
    8. -
- -

엔지니어(Engineer) 생성자내에서 근로자(WorkerBee)생성자를 호출하면, 엔지니어(Engineer)에 대한 상송을 적절하게 설정할 수 도 있을 것이라고 생각할 수 있을 것입니다.하지만 그렇지 않습니다. 근로자(WorkerBee)생성자를 호출하는 것은 엔지니어(Engineer)객체로 하여금 호출되는 모든 생성자 함수내에서 열거된 속성들을 가지고도록 보장합니다.그러나, 나중에 직원(Employee)혹은 근로자(WorkerBee) 원형에 속성을 추가한다면, 엔지니어(Engineer)객체에 의해 추가된 속성들은 상속이 되지 않습니다. 예를 들어, 아래와 같은 구문을 작성하였다고 가정합니다:

- -
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";
-
- -

jane객체는 전문분야(specialty)속성을 상속받지 않습니다.

- -
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";
-
- -

이제 jane객체의 전문분야(specialty)속성은 "none"이 되었습니다.

- -

call() 혹은 apply() 메서드를 사용는 것은 상속을 구현하는 또 다른 방법입니다. 다음의 두 예제는 동일한 결과를 보여줍니다. 

- -
-
function Engineer (name, projs, mach) {
-  this.base = WorkerBee;
-  this.base(name, "engineering", projs);
-  this.machine = mach || "";
-}
-
- -
function Engineer (name, projs, mach) {
-  WorkerBee.call(this, name, "engineering", projs);
-  this.machine = mach || "";
-}
-
-
- -

base를 사용하지 않고 구현을 하기 때문에, call() 메서드를 사용하여 상속을 구현하는 것이 보다 깔끔합니다.

- -

속성 상속의 재고

- -

이전 절에서 자바스크립트의 생성자와 원형(prototype)이 어떤 방식으로 상속과 객체의 계층 구조를 제공하는지를 살펴 보았습니다. 이번장에서는 이전 절에서 반드시 명백하게 짚고 넘어가지 않은 일부 미묘한 점들에 대해 살펴보겠습니다.

- -

객체 자신의 값과 상속받은 값

- -

이번 장에서 이미 설명된 것 처럼, 객체의 속성에 접근할 때, 자바스크립트는 아래와 같은 절차를 따릅니다.

- -
    -
  1. 해당 속성에 대한 객체 자신의 값이 있는지 확인하고 있으면 그 값을 반환한다.
    2. -
  2. 객체 자신의 값이 없으면 __proto__ 속성을 사용하여 프로토타입 체인을 확인한다.
    3. -
  3. 프로토타입 체인상의 특정 객체가 해당 속성에 대한 값을 가지고 있다면 해당 객체의 값을 반환한다.
    4. -
  4. 해당 속성을 가진 어떤 객체도 발견하지 못하면 해당 객체는 그 속성을 가지고 있지 않은 것으로 판단한다.
    5. -
- -

이런 단계들의 결과는 생성자 및 프로토타입 체인등의 것들을 어떻게 정의 하느냐에 따라 달라집니다. 아래와 같은 원래의 예제는 이런 정의들을 가지고 있습니다:

- -
function Employee () {
-  this.name = "";
-  this.dept = "general";
-}
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
- -

이런 정의들을 가지고, amy라는 근로자(WorkerBee)인스턴스를 아래와 같이 생성하였다고 가정합니다.

- -
var amy = new WorkerBee;
-
- -

amy객체는 프로젝트라는 자신만의 속성을 가집니다.이름과 부서 속성들은 amy 자신의 속성이 아닌 amy객체의 __proto__속성을 통해 가지고 온 속성들입니다. 따라서 amy는 이런 속성들의 값을 가지게 됩니다.

- -
amy.name == "";
-amy.dept == "general";
-amy.projects == [];
-
- -

직원(Employee)과 연관되어 있는 프로토타입내의 이름 속성의 값을 아래와 같이 변경하였다고 가정합니다.

- -
Employee.prototype.name = "Unknown"
-
- -

얼핏보기에, 새로운 값이 모든 직원 인스턴스에 적용이 될것으로 예상하겠지만 그렇지 않습니다. 

- -

직원 객체의 인스턴스를 생성할때, 해당 인스턴스는 이름 속성에 대해 자신이 가지고 있는 값(빈 문자열)을 취하게 됩니다.이것이 의미하는 것은 새로운 직원 객체를 생성하여 근로자(WorkerBee)의 프로토타입에 설정을 할때, WorkerBee.prototype이 이름 속성에 대한 자신만의 값을 가지고 있다는 것입니다.그러므로, amy객체(근로자 인스턴스)의 이름 속성에 대해 검색할때, WorkerBee.prototype내에서 이름 속성에 대한 amy 객체 자신의 값을 찾게됩니다. 그렇기때문에 Employee.prototype까지의 프로토타입 체인을 검색하지 않게 됩니다.

- -

실행시에 객체의 속성 값을 변경하고 새로운 값이 모든 하위 객체들에게도 적용되도록 할려면, 객체의 생성자함수에서는 속성을 정의할 수 없습니다. 대신에, 생성자와 연결된 프로토타입에 추가할 수 있습니다. 예를 들어, 이전의 코드를 아래와 같이 변경하였다고 가정합니다:

- -
function Employee () {
-  this.dept = "general";
-}
-Employee.prototype.name = "";
-
-function WorkerBee () {
-  this.projects = [];
-}
-WorkerBee.prototype = new Employee;
-
-var amy = new WorkerBee;
-
-Employee.prototype.name = "Unknown";
-
- -

이 경우 amy 객체의 이름 속성의 값은 "Unknown"이 됩니다.

- -

위의 예제에서처럼, 객체 생성 시에 객체의 속성에 대한 기본 값을 설정하고 실행 시에 해당 속성의 값을 변경하기를 원한다면, 해당 속성들을 생성자 함수 자체안에가 아닌 생성자의 프로토타입에 설정 하여야 합니다.

- -

인스턴스 관계 결정

- -

자바스크립트에서의 속성 검색은 객체 자신의 속성들을 먼저 살펴보고 해당 속성명을 찾지 못할 경우, 객체의 특별한 속성인 __proto__내에서 찾게 됩니다. 이런 검색은 재귀적으로 진행되며, 이런 과정을 "프로토타입 체인에서의 검색"이라고 합니다.

- -

특별한 속성인 __proto__객체가 생성이 될때 설정이 됩니다. __proto__속성은 생성자의 프로토타입 속성의 값으로 설정이 됩니다. 따라서 new Foo() 표현식은 __proto__ == Foo.prototype인 객체를 생성합니다. 결과적으로 Foo.prototype의 속성들에 대한 변경은 new Foo() 표현식으로 생성한 모든 객체에 대한 속성 검색을 변경하게 됩니다.

- -

모든 객체는 __proto__라는 객체 속성을 가집니다.(예외: Object). 모든 함수들은 prototype이라는 객체 속성을 가집니다. 따라서 객체들은 '프로토타입 상속'에 의해 다른 객체들과의 관계를 가지게 됩니다.객체의 __proto__속성과 함수의 prototype 객체를 비교하여 상속을 테스트 해볼 수 있습니다. 자바스크립트는 특정 객체가 함수 prototype으로부터 상속 받는 객체일 경우 참(true)를 반환하는  instanceof라는 연산자를 제공합니다. 예를 들면,

- -
var f = new Foo();
-var isTrue = (f instanceof Foo);
- -

Inheriting properties에 나오는 예제와 동일한 정의들을 작성해 놓았을 경우, 보다 상세한 예제는 아래와 같습니다.엔지니어(Engineer)객체를 아래와 같이 생성합니다:

- -
var chris = new Engineer("Pigman, Chris", ["jsd"], "fiji");
-
- -

생성된 객체를 가지고 아래와 같은 구문을 실행할 경우 각 구문에 대한 결과는 모두 참(true)입니다.

- -
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;
-
- -

주어진 이런 상황에서, instanceOf를 다음과 같이 직접 작성할 수 있을 것입니다:

- -
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;
-}
-
- -
-

주의: 위의 구현내용은 최신 버전의 자바스크립트에서 XML객체들이 표현되는 방법의 특질을 해결하기 위해 해당 객체의 타입이 "xml"인지 확인합니다. 핵심적인 세부 사항을 확인하려면 {{ bug(634150) }}를 참조하세요.

-
- -

위의 instanceOf함수를 사용하면 아래의 표현들은 모두 참(true)입니다:

- -
instanceOf (chris, Engineer)
-instanceOf (chris, WorkerBee)
-instanceOf (chris, Employee)
-instanceOf (chris, Object)
-
- -

하지만 아래의 표현식은 거짓(false)가 됩니다:

- -
instanceOf (chris, SalesPerson)
-
- -

생성자내에서의 전역 정보

- -

생성자를 생성할때, 생성자내에서 전역 정보를 설정할 경우, 주의를 해야 합니다. 예를 들어, 각각의 새로운 직원에게 자동으로 고유한 ID값을 할당하기를 원한다고 했을 때, 다음과 같은 직원(Employee) 정의를 사용할 수 있을 것입니다:

- -
var idCounter = 1;
-
-function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   this.id = idCounter++;
-}
-
- -

이런 정의 내용을 가지고, 새로운 직원을 생성했을 때, 생성자는 다음의 고유한 ID값을 새로운 직원객체에 할당하고 전역 ID 카운터를 증가 시킵니다. 따라서 다음과 같은 구문으로 각각의 객체를 생성한다면, 결과는 victoria.id는 1 그리고 harry.id는 2가 됩니다:

- -
var victoria = new Employee("Pigbert, Victoria", "pubs")
-var harry = new Employee("Tschopik, Harry", "sales")
-
- -

얼핏보면 괜찮아 보입니다. 하지만 이유를 불문하고 직원 객체가 생성될때마다 idCounter는 증가분을 가지게 됩니다.이번장에서 나온 예제에서처럼 전체 직원(Employee) 객체의 계층 구조를 생성하였다면, 프로토타입을 설정할때마다 직원 생성자는 매번 호출 됩니다.다음과 같은 코드를 작성하였다고 가정합니다:

- -
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");
-
- -

여기서 생략된 정의가 base속성을 가지고 해당 생성자를 프로토타입 체인내의 상위 생성자들을 호출한닥고 좀 더 가정하면, 이런 경우, 생성된 mac객체의 id값은 5가 됩니다.

- -

어플리케이셔네 따라, 카운터가 이렇게 추가적으로 증가된 것은 문제가 될 수도 그렇지 않을 수 도 있습니다. 카운터에 정확한 값이 설정되기를 원한다면, 사용가능한 해결적은 아래와 같은 생성자를 대신 사용하는 것입니다:

- -
function Employee (name, dept) {
-   this.name = name || "";
-   this.dept = dept || "general";
-   if (name)
-      this.id = idCounter++;
-}
-
- -

prototype으로 사용할 직원 인스턴스를 생성할 때, 생성자에 인자들을 주어선 안됩니다. 이 생성자 정의를 사용하여, 인자들을 주지 않을 경우, 생성자는 id에 값을 할당하지 않으며 카운터를 갱신하지 않습니다. 따라서, id값을 가지는 직원 객체에 대해, 반드시 해당 직원의 이름을 명시해야 합니다. 이 예제의 경우 mac인스턴스의 id값은 1이 됩니다.

- -

다중상속 금지

- -

몇몇 객체 지향언어들은 다중 상속을 허용합니다. 그것은, 관련이 없는 부모 객체들로 부터 속성들과 값들을 상속 받을 수 있는 것을 말합니다. 자바스크립트는 다중 상속을 지원하지 않습니다.

- -

속성 값의 상속은 속성에 대한 값을 찾기 위한 프로토타입 체인을 검색에 의해 실행 시점에 이루어 집니다. 하나의 객체는 오로지 하나의 결합된 prototype만을 가지기 때문에, 자바스크립트는 동적으로 하나 이상의 프로토타입 체인으로 부터 상속을 할 수 없습니다. 

- -

자바스크립트에서, 하나 이상의 다른 생성자 함수를 호출하는 생성자를 사용할 수 있습니다. 이것은 다중 상속처럼 보여질 수 있습니다. 예를 들어, 다음과 같은 구문들을 살펴보세요:

- -
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")
-
- -

WorkerBee의 정의는 이번 장의 이전에 사용된 것과 동일하다고 가정합니다.이런 경우, dennis객체는 다음과 같은 속성들을 가지게 됩니다:

- -
dennis.name == "Doe, Dennis"
-dennis.dept == "engineering"
-dennis.projects == ["collabra"]
-dennis.machine == "hugo"
-dennis.hobby == "scuba"
-
- -

 따라서 dennis객체는 Hobbyist 생성자로부터 취미(hobby)속성을 받아 오지 않습니다. 그런데 Hobbyist생성자의 프로토타입에 속성을 추가 했다고 가정하면 

- -
Hobbyist.prototype.equipment = ["mask", "fins", "regulator", "bcd"]
-
- -

dennis객체는 새로이 추가된 속성을 상속받지 않습니다.

- -
{{PreviousNext("Web/JavaScript/Guide/Working_with_Objects", "Web/JavaScript/Guide/Iterators_and_Generators")}}
diff --git "a/files/ko/web/javascript/guide/\353\251\224\355\203\200_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/index.html" "b/files/ko/web/javascript/guide/\353\251\224\355\203\200_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/index.html" deleted file mode 100644 index fe4fa13f83..0000000000 --- "a/files/ko/web/javascript/guide/\353\251\224\355\203\200_\355\224\204\353\241\234\352\267\270\353\236\230\353\260\215/index.html" +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: 메타 프로그래밍 -slug: Web/JavaScript/Guide/메타_프로그래밍 -translation_of: Web/JavaScript/Guide/Meta_programming ---- -
{{jsSidebar("JavaScript Guide")}} {{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}
- -

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.

- -

Proxies

- -

 ECMAScript 6에서 소개되었습니다, {{jsxref("Proxy")}} 객체는  특정 작업을 가로막는것과  사용자 정의 행위를 시행하는것을 허용합니다.예를 들면 객체가 속성을 가지는 것입니다:

- -
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
-
- -

The Proxy object defines a target (an empty object here) and a handler object in which a get trap is implemented. Here, an object that is proxied will not return undefined when getting undefined properties, but will instead return the number 42.

- -

Additional examples are available on the {{jsxref("Proxy")}} reference page.

- -

Terminology

- -

The following terms are used when talking about the functionality of proxies.

- -
-
{{jsxref("Global_Objects/Proxy/handler","handler","","true")}}
-
Placeholder object which contains traps.
-
traps
-
The methods that provide property access. This is analogous to the concept of traps in operating systems.
-
target
-
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.
-
invariants
-
Semantics that remain unchanged when implementing custom operations are called invariants. If you violate the invariants of a handler, a {{jsxref("TypeError")}} will be thrown.
-
- -

Handlers and traps

- -

The following table summarizes the available traps available to Proxy objects. See the reference pages for detailed explanations and examples.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Handler / trapInterceptionsInvariants
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}{{jsxref("Object.getPrototypeOf()")}}
- {{jsxref("Reflect.getPrototypeOf()")}}
- {{jsxref("Object/proto", "__proto__")}}
- {{jsxref("Object.prototype.isPrototypeOf()")}}
- {{jsxref("Operators/instanceof", "instanceof")}}		 -
    -
  • getPrototypeOf method must return an object or null.
    • -
  • If target is not extensible, Object.getPrototypeOf(proxy) method must return the same value as Object.getPrototypeOf(target).
    • -
-
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}{{jsxref("Object.setPrototypeOf()")}}
- {{jsxref("Reflect.setPrototypeOf()")}}		If target is not extensible, the prototype parameter must be the same value as Object.getPrototypeOf(target).
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}{{jsxref("Object.isExtensible()")}}
- {{jsxref("Reflect.isExtensible()")}}		Object.isExtensible(proxy) must return the same value as Object.isExtensible(target).
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}{{jsxref("Object.preventExtensions()")}}
- {{jsxref("Reflect.preventExtensions()")}}		Object.preventExtensions(proxy) only returns true if Object.isExtensible(proxy) is false.
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}{{jsxref("Object.getOwnPropertyDescriptor()")}}
- {{jsxref("Reflect.getOwnPropertyDescriptor()")}}		 -
    -
  • getOwnPropertyDescriptor must return an object or undefined.
    • -
  • A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
    • -
  • 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.
    • -
  • 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.
    • -
  • 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.
    • -
  • The result of Object.getOwnPropertyDescriptor(target)can be applied to the target object using Object.defineProperty and will not throw an exception.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}{{jsxref("Object.defineProperty()")}}
- {{jsxref("Reflect.defineProperty()")}}		 -
    -
  • A property cannot be added, if the target object is not extensible.
    • -
  • 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.
    • -
  • A property may not be non-configurable, if a corresponding configurable property of the target object exists.
    • -
  • If a property has a corresponding target object property then Object.defineProperty(target, prop, descriptor) will not throw an exception.
    • -
  • In strict mode, a false return value from the defineProperty handler will throw a {{jsxref("TypeError")}} exception.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}Property query: foo in proxy
- Inherited property query: foo in Object.create(proxy)
- {{jsxref("Reflect.has()")}}		 -
    -
  • A property cannot be reported as non-existent, if it exists as a non-configurable own property of the target object.
    • -
  • 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.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}Property access: proxy[foo]and proxy.bar
- Inherited property access: Object.create(proxy)[foo]
- {{jsxref("Reflect.get()")}}		 -
    -
  • 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.
    • -
  • 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.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}Property assignment: proxy[foo] = barand proxy.foo = bar
- Inherited property assignment: Object.create(proxy)[foo] = bar
- {{jsxref("Reflect.set()")}}		 -
    -
  • 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.
    • -
  • Cannot set the value of a property if the corresponding target object property is a non-configurable accessor property that has undefined as its [[Set]] attribute.
    • -
  • In strict mode, a false return value from the sethandler will throw a {{jsxref("TypeError")}} exception.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}Property deletion: delete proxy[foo] and delete proxy.foo
- {{jsxref("Reflect.deleteProperty()")}}		A property cannot be deleted, if it exists as a non-configurable own property of the target object.
{{jsxref("Global_Objects/Proxy/handler/enumerate", "handler.enumerate()")}}Property enumeration / for...in: for (var name in proxy) {...}
- {{jsxref("Reflect.enumerate()")}}		The enumerate method must return an object.
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}{{jsxref("Object.getOwnPropertyNames()")}}
- {{jsxref("Object.getOwnPropertySymbols()")}}
- {{jsxref("Object.keys()")}}
- {{jsxref("Reflect.ownKeys()")}}		 -
    -
  • The result of ownKeys is a List.
    • -
  • The Type of each result List element is either {{jsxref("String")}} or {{jsxref("Symbol")}}.
    • -
  • The result List must contain the keys of all non-configurable own properties of the target object.
    • -
  • 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.
    • -
-
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}proxy(..args)
- {{jsxref("Function.prototype.apply()")}} and {{jsxref("Function.prototype.call()")}}
- {{jsxref("Reflect.apply()")}}		There are no invariants for the handler.applymethod.
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}new proxy(...args)
- {{jsxref("Reflect.construct()")}}		The result must be an Object.
- -

Revocable Proxy

- -

The {{jsxref("Proxy.revocable()")}} method is used to create a revocable Proxy object. This means that the proxy can be revoked via the function revoke and switches the proxy off. Afterwards, any operation on the proxy leads to a {{jsxref("TypeError")}}

- -
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
- -

Reflection

- -

{{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")}}. Reflect is not a function object.

- -

Reflect helps with forwarding default operations from the handler to the target.

- -

With {{jsxref("Reflect.has()")}} for example, you get the in operator as a function:

- -
Reflect.has(Object, 'assign'); // true
- -

A better apply function

- -

In ES5, you typically use the {{jsxref("Function.prototype.apply()")}} method to call a function with a given this value and arguments provided as an array (or an array-like object).

- -
Function.prototype.apply.call(Math.floor, undefined, [1.75]);
- -

With {{jsxref("Reflect.apply")}} this becomes less verbose and easier to understand:

- -
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"
- -

Checking if property definition has been successful

- -

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:

- -
if (Reflect.defineProperty(target, property, attributes)) {
-  // success
-} else {
-  // failure
-}
- -

{{Previous("Web/JavaScript/Guide/Iterators_and_Generators")}}

- -

 

diff --git "a/files/ko/web/javascript/guide/\354\206\214\352\260\234/index.html" "b/files/ko/web/javascript/guide/\354\206\214\352\260\234/index.html" deleted file mode 100644 index cac0779ee0..0000000000 --- "a/files/ko/web/javascript/guide/\354\206\214\352\260\234/index.html" +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Introduction -slug: Web/JavaScript/Guide/소개 -tags: - - JavaScript - - 가이드 - - 안내서 - - 자바스크립트 -translation_of: Web/JavaScript/Guide/Introduction ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}
- -

이 장은 JavaScript를 소개하고 그 일부 기초 개념을 다룹니다.

- -

무엇을 미리 알고 있어야 하나요?

- -

이 안내서는 당신이 다음의 기본적인 배경지식이 있다고 가정합니다.

- -
    -
  • 인터넷과 월드 와이드 웹({{Glossary("WWW")}})에 대한 전반적인 이해.
    • -
  • HyperText 마크업 언어({{Glossary("HTML")}})에 대한 괜찮은 실무 지식.
    • -
  • 약간의 프로그래밍 경험. 만약 프로그래밍이 처음이라면, JavaScript 메인 페이지에 링크된 tutorial 중 하나를 따라하세요.
    • -
- -

어디서 JavaScript 정보를 찾을 수 있을까

- -

MDN에 있는 JavaScript 문서는 다음 세가지 파트로 되어있습니다.

- -
    -
  • Learning the Web은 입문자를 위한 정보를 제공하며, 프로그래밍과 인터넷에 대한 기본 개념을 소개합니다.
    • -
  • JavaScript Guide (이 안내서)는 JavaScript 언어와 객체에 대한 개요를 제공합니다.
    • -
  • JavaScript Reference JavaScript에 관련된 자세한 참고 자료를 제공합니다.
    • -
- -

JavaScript가 처음이라면, learning area와 JavaScript Guide에 있는 문서를 먼저 보세요. 일단 기초를 확실히 파악한 후에는, 각 객체와 문(statement)에 대한 더 자세한 정보를 JavaScript Reference에서 확인할 수 있습니다.

- -

JavaScript는 무엇인가?

- -

JavaScript는 크로스-플랫폼, 객체지향 스크립트 언어입니다. 작고 가벼운 언어입니다. 호스트 환경(가령, 웹 브라우저) 내에서, JavaScript는 프로그램 제어를 제공하기 위해 그 환경의 객체에 연결될 수 있습니다. Node.Js와 같은 자바 스크립트의 고급 서버언어로 사용 할 수도 있습니다.이것을 사용하면 단순히 파일을 다운로드하는 것 (예 : 여러 컴퓨터 간의 실시간 공동 작업)보다 웹 사이트에 더 많은 기능을 추가 할 수 있습니다. 호스트 환경 (예 : 웹 브라우저) 내에서 JavaScript는 해당 환경의 객체에 연결되어 프로그래밍 방식으로 제어 할 수 있습니다.

- -

JavaScript는 Array, Date, Math와 같은 객체에 대한 표준 라이브러리와 연산자(operator), 제어 구조, 문과 같은 언어 요소의 코어 집합을 포함합니다. 코어 JavaScript는 거기에 추가 객체를 보충하여 다양한 목적으로 확장될 수 있습니다. 예를 들면:

- -
    -
  • 클라이언트 측 JavaScript는 브라우저와 문서 객체 모델(DOM) 을 제어하는 객체를 제공하여 코어 언어를 확장합니다. 예를 들어, 클라이언트 측 확장은 어플리케이션이 요소(element)를 HTML 폼에 두고, 마우스 클릭, 폼 입력 및 페이지 탐색 같은 사용자 이벤트에 응답하게 해줍니다.
    • -
  • 서버 측 JavaScript는 서버에서 JavaScript 실행에 관련된 객체를 제공하여 코어 언어를 확장합니다. 예를 들어, 서버 측 확장은 어플리케이션이 데이터베이스와 통신하고, 한 번의 호출 정보의 연속성을 어플리케이션의 다른 곳에 제공하거나, 서버에서 파일 조작을 수행할 수 있도록 해줍니다.
    • -
- -

이것은 브라우저에서 JavaScript가 웹 페이지 (DOM)의 모양을 바꿀 수 있음을 의미합니다. 또한 서버의 Node.js JavaScript는 브라우저에 작성된 코드의 사용자 정의 요청에 응답 할 수 있습니다.

- -

JavaScript 와 Java

- -

JavaScript 와 Java는 여러 면에서 비슷하지만 어떤 면에서는 근본적으로 다릅니다. JavaScript 언어는 Java를 닮았지만 Java의 정적 형지정(static typing)과 강한 형 검사(strong type checking)가 없습니다. JavaScript는 대부분의 Java 식 구문, 명명 규칙 및 기본적인 흐름 제어 구조를 따릅니다. 그것이 LiveScript에서 JavaScript로 이름이 바뀐 이유였습니다.

- -

Java의 선언에 의해 생성되는 클래스의 컴파일-타임 시스템과는 달리, JavaScript는 숫자, 불리언, 그리고 문자열 값을 표현하는 적은 수의 자료 형을 기반으로 한 런타임 시스템을 지원합니다. JavaScript 는 더 일반적인 클래스 기반 객체 모델 대신에 프로토타입 기반 객체 모델을 갖습니다. 프로토타입 기반 모델은 동적 상속을 제공합니다. 즉, 상속된 대상은 각각의 객체에 따라 다양할 수 있습니다. JavaScript는 또한 어떤 특정한 선언을 요구하지 않는 함수도 지원합니다. 함수는 객체의 속성이나, 타입이 느슨하게 형지정된 채 실행되는 메소드가 될 수 있습니다.

- -

JavaScript는 Java에 비해 매우 자유로운 형태의 언어입니다. 여러분은 모든 변수, 클래스, 및 메소드를 선언하지 않아도 됩니다. 여러분은 메소드가 public, private, 또는 protected 인지 염려할 필요가 없고 인터페이스를 구현하지 않아도 됩니다. 변수, 매개변수(parameter), 및 함수의 반환 형은 명시적으로 지정되지 않습니다.

- -

Java는 빠른 실행과 형 안전성(type safety)을 위해 설계된 클래스 기반 프로그래밍 언어입니다. 형 안전성은, 예를 들어, 여러분이 Java 정수를 객체의 레퍼런스로 형변환(cast)하거나 Java 바이트코드를 변경하여 private 메모리에 접근할 수 없음을 의미합니다. Java의 클래스 기반 모델은 프로그램이 오로지 클래스와 그 메소드로만 구성된다는 것을 뜻합니다. Java의 클래스 상속과 강한 형지정은 보통 단단하게 결합된 객체 계층구조를 요구합니다. 이러한 요구는 Java 프로그래밍을 JavaScript 프로그래밍보다 더 복잡하게 만듭니다.

- -

반면에, JavaScript는 HyperTalk 과 dBASE 같은 더 작고 동적 형지정이 가능한 언어들의 정신을 계승했습니다. 이러한 스크립팅 언어는 더 쉬운 구문과 특별한 내장(built-in) 기능 및 객체 생성을 위한 최소 요구사항으로 인해 훨씬 더 많은 사람들에게 프로그래밍 도구를 제공합니다.

- - - - - - - - - - - - - - - - - - - - - - - -
Java와 비교한 JavaScript
JavaScriptJava
객체 지향. 객체의 형 간에 차이 없음. 프로토타입 메커니즘을 통한 상속, 그리고 속성과 메서드는 어떤 객체든 동적으로 추가될 수 있음.클래스 기반. 객체는 클래스 계층구조를 통한 모든 상속과 함께 클래스와 인스턴스로 나뉨. 클래스와 인스턴스는 동적으로 추가된 속성이나 메소드를 가질 수 없음.
변수 자료형이 선언되지 않음(dynamic typing, loosely typed).변수 자료형은 반드시 선언되어야 함(정적 형지정, static typing).
하드 디스크에 자동으로 작성 불가.하드 디스크에 자동으로 작성 가능.
- -

JavaScript와 Java의 차이에 대한 더 많은 정보는, 객체 모델의 세부사항 장을 보세요.

- -

JavaScript 와 ECMAScript 명세

- -

JavaScript는 JavaScript에 기반한 표준화된 국제 프로그래밍 언어를 제공하기 위해Ecma International 에서 표준화 됩니다 — European association for standardizing information and communication systems (ECMA는 이전에 European Computer Manufacturers Association의 두문자어였습니다). ECMAScript라 불리는 이 JavaScript의 표준화 버전은 표준을 지원하는 모든 어플리케이션에서 같은 방식으로 동작합니다. 회사들은 그들의 JavaScript 구현을 개발하기 위해 공개 표준 언어를 사용할 수 있습니다. ECMAScript 표준은 ECMA-262 명세(specification)에서 문서화되었습니다. JavaScript와 ECMAScript 명세 판의 여러 버전에 대한 더 많은 것을 배우려면 New in JavaScript 을 보세요.

- -

ECMA-262 표준은 또한 IOS-16262로서 ISO (국제 표준화 기구) 에 의해 승인되었습니다. Ecma International website 에서 그 명세를 찾을 수 있습니다. ECMAScript 명세는 World Wide Web Consortium (W3C) 나  WHATWG (Web Hypertext Application Technology Working Group)에 의해 표준화된 Document Object Model (DOM)을 설명하지 않습니다. DOM은 여러분의 스크립트에 HTML 문서 객체를 드러내는 방법을 정의합니다. JavaScript로 프로그래밍을 할 때 사용되는 여러 기술들에 대한 정보를 얻으 시려면, JavaScript technologies overview 를 참고하세요.

- -

JavaScript 문서 vs ECMAScript 명세

- -

ECMAScript 명세는 ECMAScript 구현을 위한 요구사항의 집합입니다; 여러분이 여러분의 ECMAScript 구현이나 엔진(가령 Firefox의 SpiderMonkey, 또는 Chrome의 v8)에서 표준을 따르는 언어의 기능을 구현하길 원할 때 유용합니다.

- -

ECMAScript 문서는 스크립트 프로그래머를 돕기 위함이 아닙니다; 스크립트 작성을 위한 정보는 JavaScript 문서를 사용하세요.

- -

ECMAScript 명세는 JavaScript 프로그래머에게 익숙하지 않을 수 있는 용어와 문법을 사용합니다. 언어의 기술이 ECMAScript 에서 다를 수 있지만, 언어 그 자체는 같습니다. JavaScript는 ECMAScript 명세에 서술된 모든 기능을 지원합니다.

- -

JavaScript 문서는 JavaScript 프로그래머에게 적합한 언어의 측면을 설명합니다.

- -

JavaScript 시작하기

- -

JavaScript 시작은 쉽습니다: 최신 웹 브라우저만 있으면 됩니다. 이 안내서는 현재 Firefox의 최신 버전에서만 사용 가능한 약간의 JavaScript 기능을 포함하므로, 가장 최신 버전의 Firefox를 사용하기를 권합니다.

- -

JavaScript를 실험하기 유용한 두 도구가 Firefox에 내장되어 있습니다: Web Console과 Scratchpad.

- -

웹 콘솔

- -

웹 콘솔은 현재 로드된 페이지에 대한 정보를 보이고, 또한 여러분이 현재 페이지에서 JavaScript 식을 실행해볼 수 있는 명령어 입력줄(command line)을 제공합니다.

- -

웹 콘솔을 열기 위해서는, Firefox의 "도구" 메뉴 하위에 있는 "개발자" 메뉴의 "웹 콘솔"을 선택(윈도우와 리눅스에서는 Ctrl+Shift+I, 맥에서는  Cmd-Option-K)합니다. 브라우저 창의 아래에 웹 콘솔이 나타납니다. 콘솔의 바닥을 따라 나온 것이 여러분이 JavaScript를 입력할 수 있는 명령어 입력줄이고, 실행 결과는 바로 위 공간에 표시됩니다:

- -

- -

이 콘솔은 eval과 완전히 동일하게 동작합니다:마지막 입력된 표현식이 반환되죠. 간단하게 생각해서, 콘솔에 뭔가 입력할 때마다 eval로 감싼 console.log로 둘러싸인 형태라고 보시면 됩니다.

- -
function greetMe(yourName) { alert('Hello ' + yourName); } console.log(eval('3 + 5'));
- -

Scratchpad

- -

Web Console은 한 줄 JavaScript를 실행하기에 훌륭합니다. 하지만 비록 여러 줄을 실행할 수 있지만, 아주 불편하고 Web Console을 사용해 여러분의 샘플 코드를 저장할 수도 없습니다. 그러므로 좀 더 복잡한 예제를 위해서는 Scratchpad가 더 나은 도구입니다.

- -

Scratchpad를 열기 위해, Firefox의 메뉴 "Tools" 의 하위에 있는 "Web Developer" 메뉴의 "Scratchpad" 를 선택합니다(단축키: Shift+F4). 이것은 분리된 창에서 열리고 브라우저에서 JavaScript를 작성하고 실행하기 위해 사용할 수 있는 에디터입니다. 여러분은 또한 디스크로부터 스크립트를 부르거나 저장할 수도 있습니다.

- -

- -

Hello world

- -

JavaScript 작성을 시작하기 위해서, Scratchpad를 열고 첫 JavaScript 코드 "Hello World" 를 작성하세요.

- -
(function(){
-  "use strict";
-  /* Start of your code */
-  function greetMe(yourName) {
-    alert('Hello ' + yourName);
-  }
-
-  greetMe('World');
-  /* End of your code */
-})();
- -

패드에서 코드를 선택하고 Ctrl + R 키를 눌러 브라우저에서 펼쳐지는 것을 지켜보십시오! 다음 페이지에서 이 가이드는 JavaScript 구문 및 언어 기능을 소개하므로보다 복잡한 응용 프로그램을 작성할 수 있습니다. 그러나 당분간은 (function () { "use strict"를 코드 앞에 추가하고}}) ();를 코드마지막에 추가하세요. 아직은 이코드가 뭔지 잘 모르겠지만 나중에 이 코드가 의미하는 것을 배울 것입니다, 지금은 간단히 다음과 같다고 생각하세요.

- -
    -
  1. 성능을 크게 개선합니다.
    2. -
  2. 초보자가 실수하게 만드는 Javascript의 일부 시맨틱을 막습니다.
    3. -
  3. 콘솔에서 실행되는 코드 스니펫이 서로 상호 작용하지 못하도록합니다 (예 : 한 콘솔 실행에서 생성 된 내용을 다른 콘솔 실행에 사용하는 경우).
    4. -
- -

{{PreviousNext("Web/JavaScript/Guide", "Web/JavaScript/Guide/Grammar_and_types")}}

diff --git "a/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/assertions/index.html" "b/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/assertions/index.html" deleted file mode 100644 index 350c50f8f9..0000000000 --- "a/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/assertions/index.html" +++ /dev/null @@ -1,244 +0,0 @@ ---- -title: Assertions -slug: Web/JavaScript/Guide/정규식/Assertions -translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions ---- -

{{jsSidebar("JavaScript Guide")}}

- -

Assertions에는 행이나 단어의 시작 · 끝을 나타내는 경계와 (앞, 뒤 읽고 조건식을 포함한) 어떤 식 으로든 매치가 가능한 것을 나타내는 다른 패턴이 포함됩니다.

- -
{{EmbedInteractiveExample("pages/js/regexp-assertions.html", "taller")}}
- -

Types

- -

Boundary-type assertions

- - - - - - - - - - - - - - - - - - - - - - - - - - -
CharactersMeaning
^ -

Matches the beginning of input. If the multiline flag is set to true, also matches immediately after a line break character. For example, /^A/ does not match the "A" in "an A", but does match the first "A" in "An A".

- -
-

This character has a different meaning when it appears at the start of a group.

-
-
$ -

Matches the end of input. If the multiline flag is set to true, also matches immediately before a line break character. For example, /t$/ does not match the "t" in "eater", but does match it in "eat".

-
\b -

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.

- -

Examples:

- -
    -
  • /\bm/ matches the "m" in "moon".
    • -
  • /oo\b/ does not match the "oo" in "moon", because "oo" is followed by "n" which is a word character.
    • -
  • /oon\b/ matches the "oon" in "moon", because "oon" is the end of the string, thus not followed by a word character.
    • -
  • /\w\b\w/ will never match anything, because a word character can never be followed by both a non-word and a word character.
    • -
- -

To match a backspace character ([\b]), see Character Classes.

-
\B -

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, /\Bon/ matches "on" in "at noon", and /ye\B/ matches "ye" in "possibly yesterday".

-
- -

Other assertions

- -
-

Note: The ? character may also be used as a quantifier.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
CharactersMeaning
x(?=y) -

Lookahead assertion: Matches "x" only if "x" is followed by "y". For example, /Jack(?=Sprat)/ matches "Jack" only if it is followed by "Sprat".
- /Jack(?=Sprat|Frost)/ matches "Jack" only if it is followed by "Sprat" or "Frost". However, neither "Sprat" nor "Frost" is part of the match results.

-
x(?!y) -

Negative lookahead assertion: Matches "x" only if "x" is not followed by "y". For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. /\d+(?!\.)/.exec('3.141') matches "141" but not "3.

-
(?<=y)x -

Lookbehind assertion: Matches "x" only if "x" is preceded by "y". For example, /(?<=Jack)Sprat/ matches "Sprat" only if it is preceded by "Jack". /(?<=Jack|Tom)Sprat/ matches "Sprat" only if it is preceded by "Jack" or "Tom". However, neither "Jack" nor "Tom" is part of the match results.

-
(?<!y)x -

Negative lookbehind assertion: Matches "x" only if "x" is not preceded by "y". For example, /(?<!-)\d+/ matches a number only if it is not preceded by a minus sign. /(?<!-)\d+/.exec('3') matches "3". /(?<!-)\d+/.exec('-3')  match is not found because the number is preceded by the minus sign.

-
- -

Examples

- -

General boundary-type overview example

- -
// 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' => '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' => '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'.
-
- -

Matching the beginning of an input using a ^ control character

- -

입력 시작시 일치를 위해 ^를 사용하십시오. 이 예에서는 /^A/ regex로 'A'로 시작하는 결과를 얻습니다. 여기서 ^는 한 가지 역할 만합니다. 적절한 결과를 보기위해 화살표 함수가있는 필터 메소드를 사용합니다.

- -
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 => /^A/.test(fruit));
-console.log(fruitsStartsWithA); // [ 'Apple', 'Avocado' ]
-
- -

두 번째 예제에서 ^는 두 가지 모두에 사용됩니다 : 입력의 일치 시작점, 그룹에서 사용될 때 부정 또는 보완 문자 세트.

- -
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 => /^[^A]/.test(fruit));
-
-console.log(fruitsStartsWithNotA); // [ 'Watermelon', 'Orange', 'Strawberry' ]
- -

Matching a word boundary

- -
let fruitsWithDescription = ["Red apple", "Orange orange", "Green Avocado"];
-
-// Select descriptions that contains 'en' or 'ed' words endings:
-let enEdSelection = fruitsWithDescription.filter(descr => /(en|ed)\b/.test(descr));
-
-console.log(enEdSelection); // [ 'Red apple', 'Green Avocado' ]
- -

Lookahead assertion

- -
// 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
-
- -

Basic negative lookahead assertion

- -

For example, /\d+(?!\.)/ matches a number only if it is not followed by a decimal point. /\d+(?!\.)/.exec('3.141') matches "141" but not "3.

- -
console.log(/\d+(?!\.)/g.exec('3.141')); // [ '141', index: 2, input: '3.141' ]
-
- -

Different meaning of '?!' combination usage in Assertions and  Ranges 

- -

Different meaning of ?! combination usage in Assertions /x(?!y)/ and Ranges [^?!].

- -
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!' ]
-
- -

Lookbehind assertion

- -
let oranges = ['ripe orange A ', 'green orange B', 'ripe orange C',];
-
-let ripe_oranges = oranges.filter( fruit => fruit.match(/(?<=ripe )orange/));
-console.log(ripe_oranges); // [ 'ripe orange A ', 'ripe orange C' ]
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-assertion', 'RegExp: Assertions')}}{{Spec2('ESDraft')}}
- -

Browser compatibility

- -

For browser compatibility information, check out the main Regular Expressions compatibility table.

- -

See also

- - diff --git "a/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/groups_and_ranges/index.html" "b/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/groups_and_ranges/index.html" deleted file mode 100644 index 2e2109b4ed..0000000000 --- "a/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/groups_and_ranges/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Groups and Ranges -slug: Web/JavaScript/Guide/정규식/Groups_and_Ranges -translation_of: Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges ---- -

{{jsSidebar("JavaScript Guide")}}{{draft}}

- -

그룹(Groups)과 범위(ranges)는 표현 문자의 그룹과 범위를 나타냅니다.

- -

Types

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CharactersMeaning
x|y -

x또는 y와 매칭되는 경우. 예를들면 /green|red/ 은 "green apple"의 "green"과 매치되고 "red apple"의 "red"와 매치됩니다.

-
[xyz]
- [a-c]		 -

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.

- -

For example, [abcd] is the same as [a-d]. They match the "b" in "brisket" and the "c" in "chop".

- -

For example, [abcd-] and [-abcd] match the "b" in "brisket", the "c" in "chop" and the "-" (hyphen) in "non-profit".

- -

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".

-
-

[^xyz]
- [^a-c]

- 		-

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, [^abc] is the same as [^a-c]. They initially match "o" in "bacon" and "h" in "chop".

- -
-

The ^ character may also indicate the beginning of input.

-
-
(x) -

Capturing group: Matches x and remembers the match. For example, /(foo)/ matches and remembers "foo" in "foo bar". 

- -

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 ([1], ..., [n]) or from the predefined RegExp object's properties ($1, ..., $9).

- -

Capturing groups have a performance penalty. If you don't need the matched substring to be recalled, prefer non-capturing parentheses (see below).

- -

String.match() won't return groups if the /.../g flag is set. However, you can still use String.matchAll() to get all matches.

-
\n -

Where n is a positive integer. A back reference to the last substring matching the n parenthetical in the regular expression (counting left parentheses). For example, /apple(,)\sorange\1/ matches "apple, orange," in "apple, orange, cherry, peach". A complete example follows this table.

-
(?<Name>x) -

Named capturing group: Matches x and stores it on the groups property of the returned matches under the name specified by <Name>. The angle brackets ('<' and '>') are required for group name.

- -

For example, to extract the United States area code from a phone number, I could use /\((?<area>\d\d\d)\)/. The resulting number would appear under matches.groups.area.

-
(?:x)Non-capturing group: Matches x but does not remember the match. The matched substring cannot be recalled from the resulting array's elements ([1], ..., [n]) or from the predefined RegExp object's properties ($1, ..., $9).
- -

Examples

- -

Browser support

- -

Firefox currently doesn't support named groups. See corresponding issue.

- -

See also

diff --git "a/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/index.html" "b/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/index.html" deleted file mode 100644 index 5fbbcef0a0..0000000000 --- "a/files/ko/web/javascript/guide/\354\240\225\352\267\234\354\213\235/index.html" +++ /dev/null @@ -1,666 +0,0 @@ ---- -title: 정규 표현식 -slug: Web/JavaScript/Guide/정규식 -tags: - - 자바스크립트 - - 정규식 -translation_of: Web/JavaScript/Guide/Regular_Expressions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}
- -

정규 표현식은 문자열에 나타는 특정 문자 조합과 대응시키기 위해 사용되는 패턴입니다. 자바스크립트에서, 정규 표현식 또한 객체입니다.  이 패턴들은 {{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")}} 메소드와 함께 쓰입니다 . 이 장에서는 자바스크립트의 정규식에 대하여 설명합니다.

- -

정규 표현식 만들기

- -

(역주: 정규 표현식을 줄여서 '정규식'이라고 하기도 합니다. 아래 부분부터 '정규식'이라는 용어를 사용하겠습니다.)

- -

정규식을 만드는 방법에는 두 가지가 있습니다.

- -

정규식 리터럴(슬래쉬"/"로 감싸는 패턴)을 사용하는 방법은 다음과 같습니다.

- -
var re = /ab+c/;
-
- -

정규식 리터럴은 스크립트가 불러와질 때 컴파일됩니다. 만약 정규식이 상수라면, 이렇게 사용하는 것이 성능을 향상시킬 수 있습니다.

- -

다른 방법으로는,  {{jsxref("RegExp")}} 객체의 생성자 함수를 호출하는 방법도 있습니다:

- -
var re = new RegExp("ab+c");
-
- -

생성자 함수를 사용하면 정규식이 실행 시점에 컴파일됩니다. 정규식의 패턴이 변경될 수 있는 경우, 혹은 사용자 입력과 같이 다른 출처로부터 패턴을 가져와야 하는 경우에는 생성자 함수를 사용하세요.

- -

정규식 패턴 작성하기

- -

정규식 패턴은 /abc/ 같이 단순 문자로 구성될 수도 있고, /ab*c/ 또는 /Chapter (\d+)\.\d*/와 같이 단순 문자와 특수 문자의 조합으로 구성될 수도 있습니다. 마지막 예제는 기억장치처럼 쓰이는 괄호를 포함하고 있습니다. {{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", "패턴화된 부분 문자열 일치 사용하기") }}에서 설명하는것 처럼 패턴에서 괄호를 포함한 부분은 나중에 사용하기 위하여 저장됩니다.

- -

단순 패턴 사용하기

- -

단순 패턴은 문자열을 있는 그대로 대응시키고자 할 때 사용됩니다. 예를 들어, /abc/라는 패턴은 문자열에서 정확히 'abc' 라는 문자들이 모두 함께 순서대로 나타나야 대응됩니다. 위의 패턴은 "Hi, do you know your abc's?" 와 "The latest airplane designs evolved from slabcraft." 두가지 예에서 부분 문자열 'abc'에 대응될 것입니다.  'Grab crab' 이라는 문자열에서 'ab c' 라는 부분 문자열을 포함하고 있지만, 'abc'를 정확하게 포함하고 있지 않기 때문에 대응되지 않습니다.

- -

특수 문자 사용하기

- -

검색에서 하나 이상의 b들을 찾거나, 혹은 공백을 찾는 것과 같이 '있는 그대로의 대응' 이상의 대응을 필요로 할 경우, 패턴에 특수한 문자를 포함시킵니다. 예를 들어, /ab*c/ 패턴은  'a' 문자 뒤에 0개 이상의 'b' 문자(* 문자는 바로 앞의 문자가 0개 이상이라는 것을 의미합니다)가 나타나고 바로 뒤에 'c' 문자가 나타나는 문자 조합에 대응됩니다. 문자열 "cbbabbbbcdebc," 에서 위의 패턴은 부분 문자열 'abbbbc' 와 대응됩니다.

- -

아래 표는 정규식에서 사용되는 모든 특수문자 목록 및 그에 대한 설명입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
정규식에서의 특수문자
CharacterMeaning
\ -

다음의 규칙에 따라 일치합니다:
-
- 특수 문자가 아닌 문자(non-special character) 앞에서 사용된 백슬래시는 '해당 문자는 특별하고, 문자 그대로 해석되면 안된다'는 사실을 가리킵니다. 예를 들어, 앞에 \가 없는 'b'는 보통 소문자 b가 나오는 패턴과 대응됩니다. 그러나 '\b' 자체는 어떤 문자와도 대응되지 않습니다; 이 문자는 특별한 단어 경계 문자를 형성합니다.
-
- 특수 문자 앞에 위치한 백슬래시는 '다음에 나오는 문자는 특별하지않고, 문자 그대로 해석되어야 한다'는 사실을 가리킵니다. 예를 들어, 패턴 /a*/ 에서의 특수문자 '*'는 0개 이상의 'a' 문자가 등장함을 나타냅니다. 이와는 다르게, 패턴 /a\*/ 는 '*'이 특별하지 않다는 것을 나타내며, 'a*'와 같은 문자열과 대응될 수 있습니다.
-
- RegExp("pattern") 표기를 쓰면서 \ 자체를 이스케이프 하는 것을 잊지 마세요. 왜냐하면 \ 는 문자열에서도 이스케이프 문자이기 때문입니다. (역주: /a\*/ 와 같은 패턴을 생성자로 만들려면 new RegExp('a\\*')와 같이 백슬래시 자체를 이스케이프 시켜주어야 합니다.)

-
^입력의 시작 부분에 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자 바로 다음 부분과도 대응됩니다.
-
- 예를 들어, /^A/ 는 "an A" 의 'A'와는 대응되지 않습니다, 그러나 "An E" 의 'A'와는 대응됩니다.
-
- '^' 가 문자셋([abc]) 패턴의 첫 글자로 쓰인다면, 그 때는 전혀 다른 의미를 가집니다. 자세한 내용은 역 문자셋을 참고하세요.
$ -

입력의 끝 부분과 대응됩니다. 만약 다중행 플래그가 참으로 설정되어 있다면, 줄 바꿈 문자의 바로 앞 부분과도 대응됩니다.

- -

예를 들어, /t$/ 는 "eater" 의 't'에는 대응되지 않습니다, 그러나 "eat" 과는 대응됩니다.

-
* -

앞의 표현식이 0회 이상 연속으로 반복되는 부분과 대응됩니다. {0,} 와 같은 의미입니다.

- -

예를 들어, /bo*/ 는 "A ghost booooed" 의 'boooo' 와 대응되고, "A bird warbled" 의 'b'에 대응되지만 "A goat grunted" 내의 어느 부분과도 대응되지 않습니다.

-
+ -

앞의 표현식이 1회 이상 연속으로 반복되는 부분과 대응됩니다. {1,} 와 같은 의미입니다.

- -

예를 들어, /a+/ 는 "candy"의 'a'에 대응되고 "caaaaaaandy" 의 모든 'a'들에 대응되지만, "cndy" 내의 어느 부분과도 대응되지 않습니다.

-
?앞의 표현식이 0 또는 1회 등장하는 부분과 대응됩니다. {0,1} 와 같은 의미입니다.
-
- 예를 들어, /e?le?/ 는 "angel"의 'el' 에 대응되고, "angle"의 'le' 에 대응되고 또한 "oslo" 의 'l'에도 대응됩니다.
-
- 만약 수량자 *, +, ?, {} 바로 뒤에 사용하면, 기본적으로 탐욕스럽던(가능한 한 많이 대응시킴) 수량자를 탐욕스럽지 않게(가능한 가장 적은 문자들에 대응시킴) 만듭니다. 예를 들어, /\d+/를 "123abc"에 적용시키면 "123"과 대응됩니다. 그러나 /\d+?/를 같은 문자열에 적용시키면 오직 "1"과만 대응됩니다.
-
- 또한 이 문자는 x(?=y) 와 x(?!y) 항목에서 설명하는 바와 같이 사전 검증(lookahead assertion)을 위해서도 쓰입니다.
-  
. -

개행 문자를 제외한 모든 단일 문자와 대응됩니다.

- -

예를 들어, /.n/는 "nay, an apple is on the tree"에서 'an'과 'on'에 대응되지만, 'nay' 에는 대응되지 않습니다.

-
(x) -

다음의 예제가 보여주는것 처럼 'x'에 대응되고, 그것을 기억합니다. 괄호는 포획 괄호(capturing parentheses)라 불립니다.
-
- 패턴 /(foo) (bar) \1 \2/ 안의 '(foo)' 와 '(bar)'는 문자열"foo bar foo bar"에서 처음의 두 단어에 대응되고 이를 기억합니다. 패턴 내부의 \1와 \2는 문자열의 마지막 두 단어에 대응됩니다. (역주: \n 패턴은 앞의 n번째 포획괄호에 대응된 문자열과 똑같은 문자열에 대응됩니다.) \1, \2, \n과 같은 문법은 정규식의 패턴 부분에서 사용됩니다. 정규식의 치환 부분에서는 $1, $2, $n과 같은 문법이 사용되어야 합니다. 예를 들어, 'bar foo'.replace( /(...) (...)/, '$2 $1')와 같이 사용되어야 합니다. $& 패턴은 앞에서 대응된 전체 문자열을 가리킵니다.

-
(?:x)'x'에 대응되지만 대응된 것을 기억하지 않습니다. 괄호는 비포획 괄호(non-capturing parentheses)라고 불리우고, 정규식 연산자가 같이 동작할 수 있게 하위 표현을 정의할 수 있습니다. 정규식 예제 /(?:foo){1,2}/을 생각해보세요. 만약 정규식이 /foo{1,2}/라면, {1,2}는 'foo'의 마지막 'o' 에만 적용됩니다. 비포획 괄호과 같이 쓰인다면, {1,2}는 단어 'foo' 전체에 적용됩니다.
x(?=y) -

오직 'y'가 뒤따라오는 'x'에만 대응됩니다. 이것은 lookahead 라고 불립니다.

- -

예를 들어, /Jack(?=Sprat)/ 는 'Sprat'가 뒤따라오는 'Jack' 에만 대응됩니다. /Jack(?=Sprat|Frost)/는 'Sprat' 또는 'Frost'가 뒤따라오는 'Jack'에만 대응됩니다. 그러나, 'Sprat' 및 'Frost' 는 대응 결과의 일부가 아닙니다.

-
x(?!y) -

'x'뒤에  'y'가 없는경우에만 'x'에 일치합니다. 이것은 negated lookahead 라고 불립니다.

- -

예를 들어, /\d+(?!\.)/는 소숫점이 뒤따라오지 않는 숫자에 일치합니다. 정규식 /\d+(?!\.)/.exec("3.141")는 '3.141' 이 아닌 '141'에 일치합니다.

-
x|y -

'x' 또는 'y'에 대응됩니다.

- -

예를 들어, /green|red/는 "green apple"의 'green'에 대응되고, "red apple."의 'red'에 대응됩니다.

-
{n}앞 표현식이 n번 나타나는 부분에 대응됩니다. n은 반드시 양의 정수여야 합니다.
-
- 예를 들어, /a{2}/는 "candy,"의 'a'에는 대응되지 않지만, "caandy,"의 모든 a 와, "caaandy."의 첫 두 a 에는 대응됩니다.
{n,m} -

n과 m은 양의 정수이고, n <= m를 만족해야 합니다. 앞 문자가 최소 n개, 최대 m개가 나타나는 부분에 대응됩니다. m이 생략된다면, m은 ∞로 취급됩니다.

- -

예를 들어, /a{1,3}/는 "cndy"에서 아무것에도 대응되지 않지만, "caandy,"의 첫 두 a 와 "caaaaaaandy"의 첫 세 a 에 대응됩니다. "caaaaaaandy"에서 더 많은 a 들이 있지만, "aaa"에만 대응된다는 점에 주목하세요.

-
[xyz]문자셋(Character set) 입니다. 이 패턴 타입은 괄호 안의 어떤 문자(이스케이프 시퀀스까지 포함)와도 대응됩니다. 점(.) 이나 별표 (*) 같은 특수 문자는 문자셋 내부에서는 특수 문자가 아닙니다. 따라서 이스케이프시킬 필요가 없습니다. 하이픈을 이용하여 문자의 범위를 지정해줄 수 있습니다.
-
- 예를 들어, 패턴 [a-d] 는 패턴 [abcd] 와 똑같이 동작하며, "brisket"의 'b' 에 일치하고, "city"의 'c' 에 일치합니다. 패턴 /[a-z.]+/ 와 /[\w.]+/ 는 "test.i.ng" 전체 문자열이 일치합니다.
[^xyz] -

부정 문자셋(negated character set) 또는 보충 문자셋(complemented character set)입니다. 괄호 내부에 등장하지 않는 어떤 문자와도 대응됩니다. 하이픈을 이용하여 문자의 범위를 지정할 수 있습니다. 일반적인 문자셋에서 작동하는 모든 것은 여기에서도 작동합니다.

- -

예를 들어, 패턴[^abc]는 패턴[^a-c]와 동일합니다. 두 패턴은 "brisket"의 'r', "chop."의 'h' 에 대응됩니다.

-
[\b]백스페이스(U+0008)에 대응됩니다. 이와 같이, 백스페이스 문자 리터럴에 대응시키려면, 대괄호("[]")를 이용해야만 합니다. (\b와 혼동하지 마세요.)
\b -

단어 경계에 대응됩니다. 단어 경계는 다른 '단어 문자'가 앞이나 뒤에 등장하지 않는 위치에 대응됩니다. 단어의 경계는 대응 결과에 포함되지 않는다는 사실에 주의하세요. 다른 말로는, 단어의 경계에 대응되는 문자열의 길이는 항상 0입니다. (패턴 [\b]와 혼동하지 마세요.)

- -

예제:
- /\bm/는 "moon"의 'm'에 대응됩니다;
- /oo\b/ 는 "moon"의 'oo' 부분에 대응되지 않는데, 왜냐하면 'oo'를 뒤따라오는 'n'이 단어 문자이기 때문입니다;
- /oon\b/는 "moon"의 'oon'에 대응됩니다. 왜냐하면, 'oon'은 문자열의 끝이라서, 뒤따라오는 단어 문자가 없기 때문입니다 ;
- /\w\b\w/는 어떤 것에도 일치하지 않습니다. 왜냐하면, 단어 문자는 절대로 비 단어 문자와 단어 문자 두개가 뒤따라올수 없기 때문입니다.

- -
-

숙지하세요: 자바스크립트의 정규식 엔진은 특정 문자 집합을 '단어 문자'로 정의합니다. 이 집단에 속하지 않는 모든 문자는 단어 분리(word break) 로 여겨집니다. 단어 문자로 간주되는 문자들은 얼마 없습니다: 오로지 로마자 소문자와 대문자, 10진수 숫자, 밑줄 문자로 구성되어 있습니다. "é" 또는 "ü" 같이, 강세 표시 문자들은 안타깝게도 단어 분리(word breaks) 로 취급됩니다.

-
-
\B -

단어 경계가 아닌 부분에 대응됩니다. 아래와 같은 경우들이 있습니다:

- -
    -
  • 문자열의 첫 번째 문자가 단어 문자가 아닌 경우, 해당 문자의 앞 부분에 대응됩니다.
    • -
  • 문자열의 마지막 문자가 단어 문자가 아닌 경우, 해당 문자의 뒷 부분에 대응됩니다.
    • -
  • 두 단어 문자의 사이에 대응됩니다.
    • -
  • 단어 문자가 아닌 두 문자 사이에 대응됩니다.
    • -
  • 빈 문자열에 대응됩니다.
    • -
- -

문자열의 시작 부분과 끝 부분은 단어가 아닌 것으로 간주됩니다.

- -

예를 들어, /\B../ 는 "noonday"의 'oo'와 대응되며, /y\B./ 는 "possibly yesterday."의 'ye'와 대응됩니다.

-
\cX -

문자열 내부의 제어 문자에 대응됩니다. 여기서 X는 A에서 Z까지의 문자 중 하나입니다.

- -

예를 들어, /\cM/는 문자열에서 control-M (U+000D)에 대응됩니다.

-
\d -

숫자 문자에 대응됩니다. [0-9]와 동일합니다.

- -

예를 들어, /\d/ 또는 /[0-9]/는 "B2 is the suite number."에서 '2'에 대응됩니다.

-
\D -

숫자 문자가 아닌 문자에 대응됩니다. [^0-9]와 동일합니다.

- -

예를 들어, /\D/ 또는 /[^0-9]/는 "B2 is the suite number."의 'B'에 대응됩니다.

-
\f폼피드 (U+000C) 문자에 대응됩니다.
\n줄 바꿈 (U+000A) 문자에 대응됩니다.
\r캐리지 리턴(U+000D) 문자에 대응됩니다.
\s -

스페이스, 탭, 폼피드, 줄 바꿈 문자등을 포함한 하나의 공백 문자에 대응됩니다. [ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff].와 동일합니다.

- -

예를 들어, /\s\w*/는 "foo bar."의 ' bar'에 대응됩니다.

-
\S -

공백 문자가 아닌 하나의 문자에 대응됩니다. [^ \f\n\r\t\v\u00a0\u1680\u2000-\u200a\u2028\u2029\u202f\u205f\u3000\ufeff]. 와 동일합니다.

- -

예를 들어, /\S\w*/는 "foo bar."의 'foo' 에 대응됩니다.

-
\t탭 (U+0009) 문자에 대응됩니다.
\v수직 탭(U+000B) 문자에 대응됩니다.
\w -

밑줄 문자를 포함한 영숫자 문자에 대응됩니다. [A-Za-z0-9_] 와 동일합니다. (역주: 여기에 대응되는 문자를 단어 문자라고 합니다.)

- -

예를 들어, /\w/는 "apple,"의 'a' 에 대응되고, "$5.28,"의 '5'에 대응되고,"3D."의 '3'에 대응됩니다.

-
\W -

단어 문자가 아닌 문자에 대응됩니다. [^A-Za-z0-9_] 와 동일합니다.

- -

예를 들어, /\W/ 또는 /[^A-Za-z0-9_]/는 "50%."의 '%' 에 대응됩니다.

-
\n -

정규식 내부의 n번째 괄호에서 대응된 부분에 대한 역참조 입니다. 여기서, n은 양의 정수입니다.

- -

예를 들어, /apple(,)\sorange\1/는 "apple, orange, cherry, peach."의 'apple, orange,' 에 일치합니다.

-
\0널 (U+0000)문자에 대응합니다. 이 때 다른 숫자를 뒤에 쓰지 마세요. 왜냐하면 \0<digits>는 8진 이스케이프 시퀀스이기 때문입니다.
\xhh코드가 hh(두 16진 숫자)인 문자에 일치합니다.
\uhhhh코드가 hhhh(네개의 16진 숫자)인 문자에 일치합니다.
- -

사용자 입력을 이스케이프해서 정규식 내부에서 문자 그대로 취급해야 하는 경우, 간단히 치환을 하면 됩니다:

- -
function escapeRegExp(string){
-  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $&는 일치한 전체 문자열을 의미합니다.
-}
- -

괄호를 사용하기

- -

정규식 내부의 일부를 둘러싼 괄호는, 해당 부분에서 대응된 문자열을 기억하는 효과를 갖습니다. 기억된 문자열은 이후 {{ 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", "패턴화된 부분 문자열 일치 사용하기") }}에서 설명한 것처럼 다른 곳에서 사용하기 위하여 불러와질 수 있습니다.

- -

예를 들면, 패턴 /Chapter (\d+)\.\d*/는 패턴의 일부분이 기억될 거라는 사실을 나타냅니다. 이 패턴은 하나 이상의 숫자(\d는 숫자를 의미하고 +는 1개 이상을 의미합니다.) 이후에 하나의 소숫점(\가 앞에 붙은 소숫점은 문자 그대로의 문자 '.' 에 대응됨을 나타냅니다), 그뒤 0개 이상의 숫자(\d 는 숫자, * 는 0개 이상을 의미합니다.)가 뒤따라오는 'Chapter ' 문자열에 대응됩니다. 더해서, 괄호는 처음으로 일치하는 숫자 문자들을 기억하기 위하여 사용되었습니다.

- -

이 패턴은 "Open Chapter 4.3, paragraph 6"에 나타나며, '4'가 기억됩니다. 이 패턴은 "Chapter 3 and 4"에는 나타나지 않습니다. 왜냐하면 문자열이 '3'이후에 마침표를 가지고 있지 않기 때문입니다.

- -

부분 문자열을 대응시키면서도 해당 부분을 기억하지 않으려면, 괄호의 첫머리에 ?:패턴을 사용하세요. 예를 들어, (?:\d+)는 1개 이상의 숫자에 대응되지만 해당 문자들을 기억하지 않습니다.

- -

정규식 사용하기

- -

정규식은 RegExp, test, exec, String, match, replace, search, split 메소드와 함께 쓰입니다. 이 메소드는 JavaScript reference에서 잘 설명되어 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
정규식에서 쓰이는 메소드
MethodDescription
{{jsxref("RegExp.exec", "exec")}}대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
{{jsxref("RegExp.test", "test")}}대응되는 문자열이 있는지 검사하는 RegExp 메소드 입니다. true 나 false를 반환합니다.
{{jsxref("String.match", "match")}}대응되는 문자열을 찾는 RegExp 메소드입니다. 정보를 가지고 있는 배열을 반환합니다. 대응되는 문자열을 찾지 못했다면 null을 반환합니다.
{{jsxref("String.search", "search")}} -

대응되는 문자열이 있는지 검사하는 String 메소드 입니다. 대응된 부분의 인덱스를 반환합니다. 대응되는 문자열을 찾지 못했다면 -1을 반환합니다.

-
{{jsxref("String.replace", "replace")}}대응되는 문자열을 찾아 다른 문자열로 치환하는 String 메소드입니다.
{{jsxref("String.split", "split")}}정규식 혹은 문자열로 대상 문자열을 나누어 배열로 반환하는 String 메소드입니다.
- -

문자열 내부에 패턴과 대응되는 부분이 있는지 알고 싶다면, test 나 search 메소드를 사용하세요; 좀 더 많은 정보를 원하면 (대신 실행이 느림)  exec 나 match 메소드를 사용하세요. 만약 exec 나 match 메소드를 사용했는데 대응되는 부분이 있다면, 이 메소드는 배열을 반환하고 정규식 객체의 속성을 업데이트 합니다. 만약 대응되는 부분이 없다면, exec 메소드는 null 을 반환합니다. (즉, false와 같은 의미로 사용될 수 있습니다.).

- -

아래의 예에서는, 문자열 내부에서 대응되는 부분을 찾기 위해 exec 메소드를 사용했습니다.

- -
var myRe = /d(b+)d/g;
-var myArray = myRe.exec("cdbbdbsbz");
-
- -

만약 정규식 속성에 접근할 필요가 없다면, 아래와 같이 myArray를 만드는 다른 방법도 있습니다:

- -
var myArray = /d(b+)d/g.exec("cdbbdbsbz");
-
- -

문자열로부터 정규식을 만들고 싶다면, 이런 방법도 있습니다:

- -
var myRe = new RegExp("d(b+)d", "g");
-var myArray = myRe.exec("cdbbdbsbz");
-
- -

위의 스크립트에서는, 대응되는 부분이 발견되었고 아래의 표에서 설명하는 대로 배열을 반환하며 속성을 갱신합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
정규식 실행결과
ObjectProperty or indexDescriptionIn this example
myArray대응된 문자열 및 기억한 모든 부분 문자열['dbbd', 'bb', index: 1, input: 'cdbbdbsbz']
index입력된 문자열에서 대응된 부분에 해당하는 인덱스 (0부터 시작)1
input입력된 원본 문자열"cdbbdbsbz"
[0]마지막으로 대응된 문자열"dbbd"
myRelastIndex다음 검색 시 검색을 시작할 인덱스 (이 속성은 g 옵션을 설정한 정규식에 대해서만 설정됩니다. 자세한 사항은 {{ web.link("#Advanced_searching_with_flags", "Advanced Searching With Flags") }} 부분을 참고하세요.)5
source패턴 문자열. 정규식이 생성될 때 갱신됩니다. 실행 시점에는 갱신되지 않습니다."d(b+)d"
- -

위 예제에서의 두 번째 형태처럼, 정규식 객체를 변수에 대입하지 않고도 사용할 수 있습니다. 하지만, 이렇게 하면 정규식 객체가 매번 새로 생성됩니다. 이러한 이유로, 만약 변수에 대입하지 않는 형태를 사용하는 경우 나중에 그 정규식의 속성에 접근할 수 없게 됩니다. 예를 들어, 이러한 스크립트가 있을 수 있습니다:

- -
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"
-
- -

그러나, 만약 이러한 스크립트가 있으면:

- -
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"
-
- -

두 구문에서의 /d(b+)d/g 는 서로 다른  정규식 객체이고, 따라서 별개의 lastIndex 속성을 갖게 됩니다. 정규식 객체의 속성을 사용해야 하는 경우라면, 먼저 변수에 대입하세요.

- -

괄호로 둘러싼 패턴 사용하기

- -

정규식 패턴에 괄호를 사용하면, 그 부분을 별도로 대응시키면서 대응된 부분을 기억합니다. 예를 들면, /a(b)c/ 는 'abc' 와 대응되면서 'b'를 기억합니다. 괄호로 감싸진 문자열을 불러오려면, 배열 요소 [1], ..., [n] 를 사용하세요.

- -

괄호로 감쌀 수 있는 문자의 개수에는 제한이 없습니다. 반환된 배열은 찾아낸 모든 것들을 갖고 있습니다. 다음의 예는 괄호로 둘러싸진 부분이 어떻게 대응되는지 보여줍니다.

- -

다음의 예는 문자열 내부의 단어를 바꾸기 위해 {{jsxref("String.replace", "replace()")}} 메소드를 이용하고 있습니다. 치환 문자열로는 $1 과 $2 를 사용하고 있는데, 이는 각각 첫 번째와 두 번째 괄호가 쳐진 부분에 대응된 문자열을 가리킵니다.

- -
var re = /(\w+)\s(\w+)/;
-var str = "John Smith";
-var newstr = str.replace(re, "$2, $1");
-console.log(newstr);
-
-// "Smith, John"
-
- -

플래그를 사용한 고급검색

- -

정규식은 여섯 개의 플래그를 설정해줄 수 있으며, 이를 통해 전역 검색 또는 대소문자 구분 없는 검색을 수행할 수 있습니다. 이 플래그들은 각기 사용될 수도 있고 함께 사용될 수도 있고 순서에 구분이 없습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Regular expression flags
FlagDescription
g전역 검색
i대소문자 구분 없는 검색
m다중행(multi-line) 검색
s.에 개행 문자도 매칭(ES2018)
u유니코드; 패턴을 유니코드 코드 포인트의 나열로 취급합니다.
y"sticky" 검색을 수행. 문자열의 현재 위치부터 검색을 수행합니다. {{jsxref("RegExp.sticky", "sticky")}} 문서를 확인하세요.
- -

정규식에 플래그를 포함시키려면, 아래 문법을 사용하세요:

- -
var re = /pattern/flags;
-
- -

혹은 아래와 같이 할 수도 있습니다:

- -
var re = new RegExp("pattern", "flags");
-
- -

이 플래그는 정규식에 합쳐지는 정보임을 기억하는게 좋습니다. 이것들은 나중에 추가되거나 제거될 수 없습니다.

- -

예를 들어, re = /\w+\s/g 는 한 개 이상의 문자열 뒤에 공백이 하나 있는 패턴을 찾는 정규식을 생성합니다. 그리고 문자열 전체에 걸쳐 이 조합을 검색합니다.

- -
var re = /\w+\s/g;
-var str = "fee fi fo fum";
-var myArray = str.match(re);
-console.log(myArray);
-
-// ["fee ", "fi ", "fo "]
-
- -

아래 코드는:

- -
var re = /\w+\s/g;
-
- -

이렇게 바꿔쓸 수 있습니다:

- -
var re = new RegExp("\\w+\\s", "g");
-
- -

그리고 똑같은 결과를 얻습니다.

- -

 .exec() 메소드를 사용할 때에는 'g' 플래그에 대한 동작이 다릅니다.  ("클래스"와 "인수"의 역할이 뒤바뀝니다:  .match()를 사용할 때는, string 클래스가 메소드를 갖고 정규식은 인수였던 것에 반해, .exec()를 사용할 때는 정규식이 메소드를 갖고 문자열이 인수가 됩니다. str.match(re) 과 re.exec(str)를 비교해보세요.)  'g' 플래그와  .exec() 메소드가 함께 사용되면 진행상황에 대한 정보가 반환됩니다.

- -
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"]
- -

m 플래그는 여러 줄의 입력 문자열이 실제로 여러 줄로서 다뤄져야 하는 경우에 쓰입니다. 만약 m 플래그가 사용되면, ^ 와 $ 문자는 전체 문자열의 시작과 끝에 대응되는 것이 아니라 각 라인의 시작과 끝에 대응됩니다.

- -

예시

- -

다음의 예는 정규 표현식의 몇 가지 사용법을 보여줍니다.

- -

입력 문자열에서 순서를 변경하기

- -

다음 예는 정규식의 , string.split()과 string.replace()의 사용을 설명합니다. 그것은 공백, 탭과 정확히 하나의 세미콜론의 구분으로 이름(이름을 먼저)이 포함된 대략 형식의 입력 문자열을 정리합니다. 마지막으로, 순서(성을 먼저)를 뒤바꾸고 목록을 정렬합니다.

- -
// 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 < 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 < 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 < len; i++){
-  output.push(bySurnameList[i]);
-}
-
-output.push("---------- End");
-
-console.log(output.join("\n"));
-
- -

입력을 확인하기 위해 특수 문자를 사용하기

- -

다음 예에서, 사용자는 전화번호를 입력 할 것으로 예상됩니다. 사용자가 "Check" 버튼을 누를 때, 스크립트는 번호의 유효성을 검사합니다. 번호가 유효한 경우(정규식에 의해 지정된 문자 시퀀스와 일치합니다), 스크립트는 사용자에게 감사하는 메시지와 번호를 확인하는 메시지를 나타냅니다. 번호가 유효하지 않은 경우, 스크립트는 전화번호가 유효하지 않다는 것을 사용자에게 알립니다.

- -

비 캡처링 괄호 (?: , 정규식은 세 자리 숫자를 찾습니다 \d{3} OR | 왼쪽 괄호\( 세 자리 숫자 다음에 \d{3}, 닫는 괄호 다음에 \), (비 캡처링 괄호를 종료)) 안에, 하나의 대시, 슬래시, 또는 소수점을 다음과 같이 발견했을 때,  세 자리 숫자 다음에 d{3}, 대시의 기억 매치, 슬래시, 또는 소수점 다음에 \1, 네 자리 숫자 다음에 \d{4} 문자를 기억합니다([-\/\.]).

- -

사용자가 <Enter> 키를 누를 때 활성화 변경 이벤트는 RegExp.input의 값을 설정합니다.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
-    <meta http-equiv="Content-Script-Type" content="text/javascript">
-    <script type="text/javascript">
-      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]);
-      }
-    </script>
-  </head>
-  <body>
-    <p>Enter your phone number (with area code) and then click "Check".
-        <br>The expected format is like ###-###-####.</p>
-    <form action="#">
-      <input id="phone"><button onclick="testInfo(document.getElementById('phone'));">Check</button>
-    </form>
-  </body>
-</html>
-
- -

{{PreviousNext("Web/JavaScript/Guide/Text_formatting", "Web/JavaScript/Guide/Indexed_collections")}}

diff --git "a/files/ko/web/javascript/guide/\355\225\250\354\210\230/index.html" "b/files/ko/web/javascript/guide/\355\225\250\354\210\230/index.html" deleted file mode 100644 index cf9d928eb3..0000000000 --- "a/files/ko/web/javascript/guide/\355\225\250\354\210\230/index.html" +++ /dev/null @@ -1,658 +0,0 @@ ---- -title: 함수 -slug: Web/JavaScript/Guide/함수 -translation_of: Web/JavaScript/Guide/Functions ---- -
{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}
- -

함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.

- -

세부 사항에 대해서는 exhaustive reference chapter about JavaScript functions를 참조하세요.

- -

함수 정의

- -

함수 선언

- -

함수 정의(또는 함수 선언)는 다음과 같은 함수 키워드로 구성되어 있습니다:

- -
    -
  • 함수의 이름
    • -
  • 괄호 안에서 쉼표로 분리된 함수의 매개변수 목록 
    • -
  • 중괄호 { } 안에서 함수를 정의하는 자바스크립트 표현
    • -
- -

예를 들어, 다음의 코드는 square라는 간단한 함수를 정의하였습니다:

- -
function square(number) {
-  return number * number;
-}
- -

함수 square은 number라는 하나의 매개변수를 가집니다. 이 함수는 인수 (즉, number) 자체를 곱하여 반환하는 하나의 문장으로 구성되어 있습니다. return 문은 함수에 의해 반환된 값을 지정합니다.

- -
return number * number;
- -

기본 자료형인 매개변수(number와 같은)는 값으로 함수에 전달됩니다; 즉, 값이 함수로 전달됩니다. 그러나 함수가 매개변수의 값을 바꾸더라도 이는 전역적으로 또는 함수를 호출하는 곳에는 반영되지 않습니다.

- -

만약 여러분이 매개변수로 (예: {{jsxref("Array")}}이나 사용자가 정의한 객체와 같이 기본 자료형이 아닌 경우)를 전달하거나 함수가 객체의 속성을 변하게 하는 경우, 다음의 예처럼 그 변화는 함수 외부에서 볼 수 있습니다:

- -
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에서 변경되었습니다.)
-
- -

함수 표현식

- -

위에서 함수 선언은 구문적인 문(statement)이지만, 함수 표현식( function expression)에 의해서 함수가 만들어 질 수도 있습니다. 이 같은 함수를 익명이라고 합니다. 이 말은 모든 함수가 이름을 가질 필요는 없다는 것을 뜻합니다. 예를 들어, 함수 square은 다음과 같이 정의 될 수도 있습니다:

- -
var square = function(number) { return number * number };
-var x = square(4) // x 의 값은 16 입니다.
- -

하지만, 함수 표현식에서 함수의 이름을 지정 할 수 있으며, 함수내에서 자신을 참조하는데 사용되거나, 디버거 내 스택 추적에서 함수를 식별하는 데 사용될 수 있습니다.

- -
var factorial = function fac(n) { return n<2 ? 1 : n*fac(n-1) };
-
-console.log(factorial(3));
-
- -

함수 표현식은 함수를 다른 함수의 매개변수로 전달할 때 편리합니다. 다음 예는 첫 번째 인자로로 함수를, 두 번째 인자로 배열을 받는 map 함수를 보여줍니다.

- -
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;
-}
-
- -

다음 코드에서, 함수 표현식으로 정의된 함수를 인자로 받아, 2번 째 인자인 배열의 모든 요소에 대해 그 함수를 실행합니다.

- -
function map(f, a) {
-  var result = []; // Create a new Array
-  var i; // Declare variable
-  for (i = 0; i != a.length; i++)
-    result[i] = f(a[i]);
-      return result;
-}
-var f = function(x) {
-   return x * x * x;
-}
-var numbers = [0, 1, 2, 5, 10];
-var cube = map(f,numbers);
-console.log(cube);
- -

함수는 [0, 1, 8, 125, 1000] 을 반환합니다.

- -

JavaScript에서 함수는 조건에 의해 정의될 수 있습니다. 예를 들어, 다음 함수 정의는 오직 num이 0일 때 경우에 만 myFunc을 정의합니다.

- -
var myFunc;
-if (num == 0){
-  myFunc = function(theObject) {
-    theObject.make = "Toyota"
-  }
-}
- -

여기에 기술된 바와 같이 함수를 정의하는것에 더하여 {{jsxref("eval", "eval()")}} 과 같이 런타임에 문자열에서 함수들을 만들기위해 {{jsxref("Function")}} 생성자를 사용할 수 있습니다.

- -

객체내의 한 속성이 함수인 경우 메서드라고 합니다. Working with objects에서 객체와 방법에 대해 자세히 알아보세요.

- -

함수 호출

- -

함수를 정의하는 것은 함수를 실행하는 것이 아닙니다. 함수를 정의하는 것은 간단히 함수의 이름을 지어주고, 함수가 호출될 때 무엇을 할지 지정 해주는 것입니다. 사실 함수를 호출하는 것은 나타나있는 매개변수를 가지고 지정된 행위를 수행하는 것입니다. 예를 들어, 만약 여러분이 함수 square를 정의한다면, 함수를 다음과 같이 호출할 수 있습니다.

- -
square(5);
-
- -

위의 문장은 5라는 인수를 가지고 함수를 호출합니다. 함수는 이 함수의 실행문을 실행하고 값 25를 반환합니다.

- -

함수는 호출될 때 범위 내에 있어야 합니다. 그러나 함수의 선언은 이 예에서와 같이, 호이스팅 될 수 있습니다. (코드에서 호출 아래에 선언문이 있습니다.):

- -
console.log(square(5));
-/* ... */
-function square(n) { return n*n }
-
- -

함수의 범위는 함수가 선언된 곳이거나, 전체 프로그램 에서의 최상위 레벨(전역)에 선언된 곳입니다.

- -
-

비고: 위에 구문을 사용하여 함수를 정의하는 경우에만 작동합니다 (즉, function funcName(){} ). 아래와 같은 코드는 작동되지 않습니다. 이것이 의미하는 바는, 함수 호이스팅은 오직 함수 선언과 함께 작동하고, 함수 표현식에서는 동작하지 않습니다.

-
- -
console.log(square);   // square는 초기값으로 undefined를 가지고 호이스트된다.
-console.log(square(5));  // TypeError: square는 함수가 아니다.
-square = function (n) {
-  return n * n;
-}
-
- -

함수의 인수는 문자열과 숫자에 제한되지 않습니다. 여러분은 함수에 전체 객체를 전달할 수 있습니다. show_props() 함수(Working with objects에서 정의된)는 인수로 객체를 취하는 함수의 예입니다.

- -

함수는 자신을 호출할 수 있습니다. 예를 들어, 팩토리얼을 재귀적으로 계산하는 함수가 있습니다:

- -
function factorial(n){
-  if ((n == 0) || (n == 1))
-    return 1;
-  else
-    return (n * factorial(n - 1));
-}
-
- -

여러분은 다음과 같이 1부터 5까지의 팩토리얼을 계산할 수 있습니다.

- -
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
-
- -

함수를 호출하는 다른 방법들이 있습니다. 함수를 동적 호출해야 하거나, 함수의 인수의 수가 달라져야 하거나, 함수 호출의 맥락이 런타임에서 결정된 특정한 객체로 설정될 필요가 있는 경우가 자주 있습니다. 함수가 그 자체로 객체이고 이들 객체는 차례로 메서드를({{jsxref("Function")}} 객체를 참조) 가지고 있습니다. 이들 중 하나인 {{jsxref("Function.apply", "apply()")}} 메서드는 이러한 목표를 달성하기 위해 사용될 수 있습니다.

- -

함수의 범위

- -

함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에, 함수 외부의 어느 곳에서든 액세스할 수 없습니다. 그러나, 함수가 정의된 범위 내에서 정의된 모든 변수나 함수는 액세스할 수 있습니다. 즉, 전역함수는 모든 전역 변수를 액세스할 수 있습니다. 다른 함수 내에서 정의 된 함수는 부모 함수와 부모 함수가 액세스 할 수 있는 다른 변수에 정의된 모든 변수를 액세스할 수 있습니다.

- -
// 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"
-
- -

범위와 함수 스택

- -

재귀

- -

함수는 자신을 참조하고 호출할 수 있습니다. 함수가 자신을 참조하는 방법은 세 가지가 있습니다.

- -
    -
  1. 함수의 이름
    2. -
  2. arguments.callee
    3. -
  3. 함수를 참조하는 범위 내 변수
    4. -
- -

예를 들어, 다음 함수의 정의를 고려해보세요.

- -
var foo = function bar() {
-   // statements go here
-};
-
- -

함수 본문 내에서 다음은 모두 동일합니다.

- -
    -
  1. bar()
    2. -
  2. arguments.callee()
    3. -
  3. foo()
    4. -
- -

자신을 호출하는 함수를 재귀 함수라고 합니다. 어떤 면에서, 재귀는 루프와 유사합니다. 둘 다 동일한 코드를 여러 번 실행하고, 조건(무한 루프를 방지하거나, 이 경우에는 오히려 무한 재귀하는)을 요구합니다. 예를 들어, 다음 루프는:

- -
var x = 0;
-while (x < 10) { // "x < 10" is the loop condition
-   // do stuff
-   x++;
-}
-
- -

아래와 같이 재귀 함수와 그 함수에 대한 호출로 변환될 수 있습니다.

- -
function loop(x) {
-  if (x >= 10) // "x >= 10" 는 탈출 조건 ("!(x < 10)"와 동등)
-    return;
-  // do stuff
-  loop(x + 1); // the recursive call
-}
-loop(0);
-
- -

그러나 일부 알고리즘은 단순 재귀 루프로 변환할 수 없습니다. 예를 들어, 트리 구조(가령, DOM)의 모든 노드를 얻는 것은 재귀를 사용하여 보다 쉽게 할 수 있습니다:

- -
function walkTree(node) {
-  if (node == null) //
-    return;
-  // do something with node
-  for (var i = 0; i < node.childNodes.length; i++) {
-    walkTree(node.childNodes[i]);
-  }
-}
-
- -

함수  loop 와 비교하여, 각 재귀 호출 자체는 여기에 많은 재귀 호출을 만듭니다.

- -

재귀적 알고리즘은 비 재귀적인 알고리즘으로 변환 할 수 있습니다. 그러나 변환된 알고리즘이 훨씬 더 복잡하며 그렇게 함으로써 스택의 사용을 요구합니다. 사실, 재귀 자체가 함수 스택을 사용 합니다.

- -

스택형 동작은 다음의 예에서 볼 수 있습니다:

- -
function foo(i) {
-  if (i < 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
- -

중첩된 함수와 클로저

- -

여러분은 함수 내에 함수를 끼워 넣을 수 있습니다. 중첩 된 (내부) 함수는 그것을 포함하는 (외부) 함수와 별개입니다. 그것은 또한 클로저를 형성합니다. 클로저는 그 변수(“폐쇄”라는 표현)를 결합하는 환경을 자유롭게 변수와 함께 가질 수 있는 표현(전형적인 함수)입니다.

- -

중첩 함수는 클로저이므로, 중첩된 함수는 그것을 포함하는 함수의 인수와 변수를 “상속”할 수 있는 것을 의미합니다. 즉, 내부 함수는 외부 함수의 범위를 포함합니다.

- -

요약하면:

- -
    -
  • 내부 함수는 외부 함수의 명령문에서만 액세스할 수 있습니다.
    • -
- -
    -
  • 내부 함수는 클로저를 형성합니다: 외부 함수는 내부 함수의 인수와 변수를 사용할 수 없는 반면에, 내부 함수는 외부 함수의 인수와 변수를 사용할 수 있습니다.
    • -
- -

다음 예는 중첩된 함수를 보여줍니다:

- -
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
-
- -

내부 함수는 클로저를 형성하기 때문에, 여러분은 외부 함수를 호출하고, 외부 및 내부 함수 모두에 인수를 지정할 수 있습니다.

- -
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
-
- -

변수의 보존

- -

중첩된 내부 함수가 반환될 때 외부 함수의 인수 x가 보존된다는 점을 알 수 있습니다. 클로저는 그것을 참조하는 모든 범위에서 인수와 변수를 보존해두어야 합니다. 매번 호출될 때마다 잠재적으로 다른 인수를 제공할 수 있기 때문에, 클로저는 외부 함수에 대하여 매번 새로 생성됩니다. 메모리는 그 무엇도 내부 함수에 접근하지 않을 때만 해제됩니다.

- -

변수의 보존은 일반 객체에서 참조를 저장해두는 것과 다르지 않지만, 사용자가 직접 참조를 설정하는 것이 아니고 자세히 들여다볼 수 없어서 종종 명확하지 않습니다.

- -

다중 중첩 함수

- -

함수는 다중 중첩될 수 있습니다. 즉, 함수 (C)를 포함하는 함수 (B)를 포함하는 함수 (A). 여기에서 두 함수 B와 C는 모두 클로저를 형성합니다. 그래서 B는 A를 엑세스할 수 있고, C는 B를 액세스 할 수 있습니다. 이와 같이, 클로저는 다중 범위를 포함 할 수 있습니다; 그들은 재귀적으로 그것을 포함하는 함수의 범위를 포함합니다. 이것을 범위 체이닝이라 합니다.(그것을 “체이닝”이라 하는 이유는 추후에 설명할 것입니다.)

- -

다음 예를 살펴 보겠습니다:

- -
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)
-
- -

이 예에서, C는 B의 y와 A의 x를 엑세스 합니다. 이 때문에 수행할 수 있습니다:

- -
    -
  1. B는 A를 포함하는 클로저를 형성합니다. 즉, B는 A의 인수와 변수를 엑세스할 수 있습니다.
    2. -
  2. C는 B를 포함하는 클로저를 형성합니다.
    3. -
  3. B의 클로저는 A를 포함하고, C의 클로저는 A를 포함하기 때문에, C는 B와 A의 인수와 변수를 엑세스할 수 있습니다. 즉, 순서대로 C는 A와 B의 범위를 체이닝합니다.
    4. -
- -

그러나 역은 사실이 아닙니다. A는 C에 접근 할 수 없습니다. 왜냐하면 A는 B의 인수와 변수(C는 B변수)에 접근할수 없기 때문입니다. 그래서 C는 B에게만 사적으로 남게됩니다.

- -

이름 충돌

- -

클로저의 범위에서 두 개의 인수 또는 변수의 이름이 같은 경우, 이름 충돌이 있습니다. 더 안쪽 범위가 우선순위를 갖습니다. 그래서 가장 바깥 범위는 우선순위가 가장 낮은 반면에, 가장 안쪽 범위는 가장 높은 우선순위를 갖습니다. 이것이 범위 체인(scope chaini)입니다. 체인에서 첫번째는 가장 안쪽 범위이고, 마지막은 가장 바깥 쪽의 범위입니다. 다음 사항을 고려하세요:

- -
function outside() {
-  var x = 10;
-  function inside(x) {
-    return x;
-  }
-  return inside;
-}
-result = outside()(20); // returns 20 instead of 10
-
- -

이름 충돌이 x를 반환하는 문과 내부의 매개 변수 x와 외부 변수 x 사이에서 발생합니다. 여기에서 범위 체이닝은 {내부, 외부, 전역 객체}입니다. 따라서 내부의 x는 외부의 x보다 높은 우선순위를 갖게 되고, 20(내부의 x)이 10(외부의 x) 대신에 반환됩니다.

- -

클로저

- -

클로저는 자바스크립트의 강력한 기능 중 하나입니다. 자바스크립트는 함수의 중첩(함수 안에 함수를 정의하는것)을 허용하고, 내부함수가 외부 함수 안에서 정의된 모든 변수와 함수들을 완전하게 접근 할 수 있도록 승인해줍니다.(그리고 외부함수가 접근할수 있는 모든 다른 변수와 함수들까지) 그러나 외부 함수는 내부 함수 안에서 정의된 변수와 함수들에 접근 할 수 없습니다. 이는 내부 함수의 변수에 대한 일종의 캡슐화를 제공합니다. 또한, 내부함수는 외부함수의 범위에 접근할 수 있기 때문에, 내부 함수가 외부 함수의 수명을 초과하여 생존하는 경우, 외부함수에서 선언된 변수나 함수는 외부함수의 실행 기간보다 오래갑니다. 클로저는 내부 함수가 어떻게든 외부 함수 범위 밖의 모든 범위에서 사용 가능해지면 생성됩니다.

- -
var pet = function(name) {   // 외부 함수는 'name'이라 불리는 변수를 정의합니다.
-  var getName = function() {
-    return name;             // 내부 함수는 외부 함수의 'name' 변수에 접근합니다.
-  }
-  return getName;            // 내부 함수를 리턴함으로써, 외부 범위에 노출됩니다.
-},
-myPet = pet("Vivie");
-
-myPet();                     // "Vivie"로 리턴합니다.
-
- -

클로저는 위 코드보다 더 복잡해 질 수도 있습니다. 외부 함수의 내부 변수를 다루는 메서드를 포함한 객체도 반환될 수도 있습니다.

- -
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" && (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
-
- -

위 코드에서, 외부 함수의 'name' 이란 변수는 내부 함수에서 접근이 가능합니다. 그리고 그 내장 함수를 통하는 방법 말고는 내부 변수로 접근할 수 없습니다. 내부 함수의 내부 변수는 외부 인수와 변수를 안전하게 저장합니다. 내부 변수는 내부 함수가 작동하기 위해 '지속적'이고 '갭슐화된' 데이터를 보유합니다. 함수는 변수로 할당되거나, 이름을 가질 필요가 없습니다.

- -
var getCode = (function(){
-  var secureCode = "0]Eal(eh&2";    // A code we do not want outsiders to be able to modify...
-
-  return function () {
-    return secureCode;
-  };
-})();
-
-getCode();    // Returns the secureCode
-
- -

그러나 클로저를 쓰면서 조심해야 할 위험이 많이 있습니다. 만약 내부 함수가 외부 함수의 범위에 있는 이름과 같은 변수를 정의하였을 경우, 다시는 외부 함수 범위의 변수를 참조(접근)할 방법이 없습니다.

- -
var createPet = function(name) {  // 외부 함수가 "name" 이라는 변수를 정의하였다
-  return {
-    setName: function(name) {    // 내부 함수 또한 "name" 이라는 변수를 정의하였다
-      name = name;               // ??? 어떻게 우리는 외부 함수에 정의된 "name"에 접근할까???
-    }
-  }
-}
-
- -

인수(arguments) 객체 사용하기

- -

함수의 인수는 배열과 비슷한 객체로 처리가 됩니다. 함수 내에서는, 전달 된 인수를 다음과 같이 다룰 수 있습니다. :

- -
arguments[i]
-
- -

i 는 0 으로 시작하는 순서 번호입니다. 따라서 함수에 전달된 첫 번째 인수는 arguments[0] 입니다. 총 인수의 개수는 arguments.length 에서 얻을 수 있습니다.

- -

인수(arguments) 객체를 이용하면, 보통 함수에 정의된 개수보다 많은 인수를 넘겨주면서 함수를 호출할 수 있습니다. 이것은 얼마나 많은 인수가 함수로 넘겨질지 모르는 상황에서 유용합니다. arguments.length를 함수에 실제로 넘겨받은 인수의 수를 알아낼 때 사용할 수 있고 , 각각의 인수에 인수(arguments) 객체를  이용하여 접근 할 수 있습니다.

- -

예를 들어, 몇 개의 문자열을 연결하는 함수를 생각해 봅시다. 이 함수의 유일한 형식 인수는 각 문자열을 구분해주는 문자를 나타내는 문자열입니다 . 이 함수는 다음과 같이 정의됩니다:

- -
function myConcat(separator) {
-   var result = ""; // 리스트를 초기화한다
-   var i;
-   // arguments를 이용하여 반복한다
-   for (i = 1; i < arguments.length; i++) {
-      result += arguments[i] + separator;
-   }
-   return result;
-}
-
- -

어떤 개수의 인수도 이 함수로 넘겨줄 수 있고, 이 함수는 각각의 인수를 하나의 문자열 "리스트" 로 연결합니다. :

- -
// 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");
-
- -
-

Note: 인수(arguments) 객체는 배열과 닮은 것이지 배열이 아닙니다. 인수(arguments) 객체는 번호 붙여진 인덱스와 길이 속성을 가지고 있다는 점에서 배열과 닮은 것입니다. 인수(arguments) 객체는 배열을 다루는 모든 메서드를 가지고 있지 않습니다.

-
- -

더 자세한 정보를 얻고 싶으면 자바스크립트 참조문의 {{jsxref("Function")}}객체에 대하여 보세요.

- -

함수의 매개변수

- -

 ECMAScript 2015와 함께 시작된,두 종류의 매개변수가 있습니다 : 디폴트 매개변수 , 나머지 매개변수.

- -

디폴트 매개변수

- -

자바스크립트에서, 함수의 매개변수는 undefined 가 기본으로 설정됩니다. 그러나, 어떤 상황에서는 다른 값을 기본값으로 가진 것이 유용할 때가 있습니다. 이때가 디폴트 매개변수가 도움을 줄 수 있는 상황입니다.

- -

옛날엔, 기본값을 설정하는 보편적인 전략은 함수의 본문에서 매개변수 값을 테스트하여 그 값이 undefined 인 경우에 값을 할당하는 것이었습니다. 다음과 같은 예제에서, 함수호출 시 b 매개변수에 아무 값을 주지 않으면, a*b 계산 시 b 매개변수의 값은 undefined 일 것이므로 multiply 함수 호출은 NaN을 리턴할 것입니다. 그러나 이런 것은 이 예제의 2번째 줄에서 걸립니다:

- -
function multiply(a, b) {
-  b = typeof b !== 'undefined' ?  b : 1;
-
-  return a*b;
-}
-
-multiply(5); // 5
-
- -

디폴트 매개변수와 함께라면, 함수 본문에서 검사하는 부분은 필요가 없습니다. 이제 , 함수 머리에서 b 의 기본값에 간단히 1을 넣어주면 됩니다:

- -
function multiply(a, b = 1) {
-  return a*b;
-}
-
-multiply(5); // 5
- -

더 자세한 내용을 보고 싶으시면,  default parameters 문서를 참조하세요.

- -

나머지 매개변수

- -

 나머지 매개변수 구문을 사용하면 배열로 불확실한 개수의 인수를 나타낼 수 있습니다. 이 예제에서, 우리는 나머지 매개변수를 2번째 인수부터 마지막 인수까지 얻기 위하여 사용하였습니다. 그리고 우리는 첫번째 값으로 나머지 매개변수에 곱하였습니다. 이 예제는 다음 섹션에서 소개할  화살표(arrow) 함수 입니다.

- -
function multiply(multiplier, ...theArgs) {
-  return theArgs.map(x => multiplier * x);
-}
-
-var arr = multiply(2, 1, 2, 3);
-console.log(arr); // [2, 4, 6]
- -

화살표 함수

- -

 화살표 함수 표현 (뚱뚱한 화살표(fat arrow) 함수라고 알려진)은 함수 표현과 비교하였을때 짧은 문법을 가지고 있고 사전적으로 this 값을 묶습니다. 화살표 함수는 언제나 익명입니다. hacks.mozilla.org 블로그 포스트 "ES6 In Depth: Arrow functions" 를 참조하세요.

- -

화살표  함수 소개에 영향을 주는 두 요소: 더 짧은 함수와 바인딩 되지않은 this.

- -

더 짧은 함수

- -

어떤 함수적 패턴에서는, 더 짧은 함수가 환영받습니다. 다음을 비교해 보세요:

- -
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 => s.length );
-
-console.log(a3); // logs [8, 6, 7, 9]
- -

사전적 this

- -

화살표 함수에서, 모든 new함수들은  그들의  this 값을 정의합니다 (생성자로서의 새로운 객체, 정의되지 않은 strict mode의 함수 호출,   함수가 "object method"로 호출했을때의 context object ,등등.). 이런 것은 객체지향 프로그래밍 스타일에서 짜증을 불러 일으킵니다.

- -
function Person() {
-  // The Person() constructor defines `this` 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();
- -

IECMAScript 3/5 에서는, 이 문제는 this 안의 값을 뒤덮을 수 있는변수에 할당하면서 고쳐졌습니다.

- -
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);
-}
- -

또는, 적절한 this 값이 growUp() 함수에 전달되도록, 바인딩된 함수가 생성될 수 있습니다.

- - - -

화살표 함수에는 this;가 없습니다. 화살표 함수를 포함하는 객체 값이 사용됩니다. 따라서 다음 코드에서 setInterval에 전달 된 함수 내의 this 값은 화살표 함수를 둘러싼 함수의 this와 같은 값을 갖습니다.

- -
function Person() {
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this| properly refers to the person object
-  }, 1000);
-}
-
-var p = new Person();
- -

미리 정의된 함수들

- -

자바스크립트에는 최고 등급의 몇가지 내장함수가 있습니다:

- -
-
{{jsxref("Global_Objects/eval", "eval()")}}
-
-

eval() 메소드는 문자열로 표현된 자바스크립트 코드를 수행합니다.

-
-
{{jsxref("Global_Objects/uneval", "uneval()")}} {{non-standard_inline}}
-
-

uneval() 메소드는  {{jsxref("Object")}}의 소스코드를 표현하는 문자열을 만듭니다.

-
-
{{jsxref("Global_Objects/isFinite", "isFinite()")}}
-
-

전역 isFinite() 함수는 전달받은 값이 유한한지 결정합니다. 만약 필요하다면, 매개변수는 첫번째로 숫자로 변환됩니다.

-
-
{{jsxref("Global_Objects/isNaN", "isNaN()")}}
-
-

isNaN() 함수는 {{jsxref("Global_Objects/NaN", "NaN")}}인지 아닌지 결정합니다. Note:  isNaN 함수 안의 강제 변환은  흥미로운 규칙을 가지고 있습니다;  {{jsxref("Number.isNaN()")}}을 대신 사용하고 싶을것입니다, ECMAScript 6 에서 정의된,또는 값이 숫자값이 아닐때,  typeof 를 사용할 수도 있습니다 .

-
-
{{jsxref("Global_Objects/parseFloat", "parseFloat()")}}
-
-

parseFloat() 함수는  문자열 인수 값을 해석하여 부동소숫점 수를 반환합니다.

-
-
{{jsxref("Global_Objects/parseInt", "parseInt()")}}
-
-

parseInt() 함수는 문자열 인수 값을 해석하여 특정한 진법의 정수를 반환합니다  (수학적 수 체계를 기반으로 해서).

-
-
{{jsxref("Global_Objects/decodeURI", "decodeURI()")}}
-
-

decodeURI() 함수는  사전에 {{jsxref("Global_Objects/encodeURI", "encodeURI")}}을 통해 만들어지거나 비슷한 과정을 통해 만들어진 URI(Uniform Resource Identifier)  를 해독합니다.

-
-
{{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}
-
-

decodeURIComponent() 메소드는 사전에{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}}를 통하여 만들어 지거나 또는 비슷한 과정을 통해 만들어진 URI (Uniform Resource Identifier) 컴포넌트를 해독합니다.

-
-
{{jsxref("Global_Objects/encodeURI", "encodeURI()")}}
-
-

encodeURI() 메소드는  URI(Uniform Resource Identifier)를  각 인스턴스의 특정한 문자를 한개, 두개,세개, 또는 네개의 UTF-8인코딩으로 나타내어지는 연속된 확장문자들과 바꾸는 방법으로 부호화 합니다 .(두"surrogate"문자로 구성된 문자들은 오직 네개의 연속된 확장문자 입니다. ).

-
-
{{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}
-
-

encodeURIComponent() 메소드는  URI(Uniform Resource Identifier) 컴포넌트를  각 인스턴스의 특정한 문자를 한개, 두개,세개, 또는 네개의 UTF-8인코딩으로 나타내어지는 연속된 확장문자들과 바꾸는 방법으로 부호화 합니다 .(두"surrogate"문자로 구성된 문자들은 오직 네개의 연속된 확장문자 입니다. ).).

-
-
{{jsxref("Global_Objects/escape", "escape()")}} {{deprecated_inline}}
-
-

곧 사라질 escape() 메소드는 한 문자열에서 특정 문자들이 16진 확장 비트열로 바뀌어진 문자열로 계산합니다.  {{jsxref("Global_Objects/encodeURI", "encodeURI")}} 또는 {{jsxref("Global_Objects/encodeURIComponent", "encodeURIComponent")}} 를 사용하세요.

-
-
{{jsxref("Global_Objects/unescape", "unescape()")}} {{deprecated_inline}}
-
-

곧 사라질 unescape() 메소드는 문자열에서 확장 비트열이 확장 비트열이 나타내는 문자로 바뀌어진 문자열로 계산합니다.  {{jsxref("Global_Objects/escape", "escape")}}에서 확장 비트열이 소개될 것입니다.  unescape() 메소드가 곧 사라지기 때문에,  {{jsxref("Global_Objects/decodeURI", "decodeURI()")}} or {{jsxref("Global_Objects/decodeURIComponent", "decodeURIComponent")}} 를 대신 사용하세요.

-
-
- -

{{PreviousNext("Web/JavaScript/Guide/Loops_and_iteration", "Web/JavaScript/Guide/Expressions_and_Operators")}}

- - - - diff --git a/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/ko/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..e05bab3102 --- /dev/null +++ b/files/ko/web/javascript/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 +--- +

{{jsSidebar("Advanced")}}

+ +

Java 나 C++ 같이 클래스 기반의 언어를 사용하던 프로그래머는 자바스크립트가 동적인 언어라는 점과 클래스가 없다는 것에서 혼란스러워 한다. (ES2015부터 class 키워드를 지원하기 시작했으나, 문법적인 양념일 뿐이며 자바스크립트는 여전히 프로토타입 기반의 언어다.)

+ +

상속 관점에서 자바스크립트의 유일한 생성자는 객체뿐이다. 각각의 객체는 [[Prototype]]이라는 은닉(private) 속성을 가지는데 자신의 프로토타입이 되는 다른 객체를 가리킨다. 그 객체의 프로토타입 또한 프로토타입을 가지고 있고 이것이 반복되다, 결국 null을 프로토타입으로 가지는 오브젝트에서 끝난다. null은 더 이상의 프로토타입이 없다고 정의되며, 프로토타입 체인의 종점 역할을 한다.

+ +

종종 이러한 점이 자바스크립트의 약점이라고 지적되지만, 프로토타입적 상속 모델은 사실 고전적인 방법보다 좀 더 강력한 방법이다. 그 말은, 예를 들자면, 프로토타입적 모델에서 고전적인 방식을 구현하는 건 꽤나 사소한 일이지만, 그 반대는 훨씬 더 어려운 일이기 때문이다.

+ +

프로토타입 체인을 이용한 상속

+ +

속성 상속

+ +

자바스크립트 객체는 속성을 저장하는 동적인 "가방"과 (자기만의 속성이라고 부른다) 프로토타입 객체에 대한 링크를 가진다. 객체의 어떤 속성에 접근하려할 때 그 객체 자체 속성 뿐만 아니라 객체의 프로토타입, 그 프로토타입의 프로토타입 등 프로토타입 체인의 종단에 이를 때까지 그 속성을 탐색한다.

+ +
ECMAScript 표준은 someObject.[[Prototype]]을 객체 someObject의 프로토타입을 지시하도록 명시하였다. ECMAScript 2015부터 [[Prototype]]에 조상 {{jsxref("Object.getPrototypeOf()")}}과 {{jsxref("Object.setPrototypeOf()")}}을 이용하여 접근하기 때문이다. 이것은 자바스크립트의 표준은 아니나 많은 브라우저에 구현되어 사실상의 표준이 된 속성 __proto__과 동일하다.
+ +

아래 코드에는 어떤 속성에 접근 하려할 때 일어나는 상황이다.

+ +
// 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} ---> {b: 3, c: 4} ---> Object.prototype ---> 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를 반환한다.
+
+ +

객체의 속성에 값을 지정하면 "자기만의 속성"이 생긴다.  단, getter or a setter가 적용되는 속성이 상속되는 경우 예외적인 규칙이 적용된다.

+ +

메소드 상속

+ +

자바스크립트에 "메소드"라는건 없다. 하지만 자바스크립트는 객체의 속성으로 함수를 지정할 수 있고 속성 값을 사용하듯 쓸 수 있다. 속성 값으로 지정한 함수의 상속 역시 위에서 본 속성의 상속과 동일하다. (단 위에서 언급한 "속성의 가려짐" 대신 "메소드 오버라이딩, method overriding" 라는 용어를 사용한다)

+ +

상속된 함수가 실행 될 때,  this 라는 변수는 상속된 오브젝트를 가르킨다. 그 함수가 프로토타입의 속성으로 지정되었다고 해도 말이다.

+ +
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'가 된다.
+
+ +

Javascript 에서 프로토타입을 사용하는 방법

+ +

뒤에서 일어나는 일을 좀 더 자세히 파헤쳐보자.

+ +

위에서 언급했듯이, 자바스크립트에서 함수는 속성을 가질 수 있다. 모든 함수에는 prototype이라는 특수한 속성이 있다. 아래의 예제 코드는 독립적이라는 것에 유의하자. (아래의 코드 이외에는 웹페이지에 다른 자바스크립트가 없다고 가정하는 것이 좋다.)

+ +

최적의 실습을 위해서 콘솔을 열고 "Console" 탭으로 이동하여 아래의 JavaScript 코드를 복사하여 붙여넣은 다음 , 엔터키를 눌러 실행할 것을 적극 권한다. (콘솔은 대부분 웹 브라우저의 Developer Tools에 포함되어있다. 자세한 내용은 Firefox Developer Tools, Chrome DevTools, Edge DevTools 에서 확인할 수 있다. )

+ +
+ +
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 );
+ +

위 내용을 토대로, 콘솔을 보면  doSomething() 은 기본 prototype 속성을 가진다. 코드를 실행한 뒤에 콘솔에서는 다음과 유사한 형태의 객체가 표시되어야한다.

+ +
{
+    constructor: ƒ doSomething(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+ +

우리는 아래에 보이는 것과 같이 doSomething() 프로토타입에 속성을 추가할 수 있다.

+ +
function doSomething(){}
+doSomething.prototype.foo = "bar";
+console.log( doSomething.prototype );
+ +

결과:

+ +
{
+    foo: "bar",
+    constructor: ƒ doSomething(),
+    __proto__: {
+        constructor: ƒ Object(),
+        hasOwnProperty: ƒ hasOwnProperty(),
+        isPrototypeOf: ƒ isPrototypeOf(),
+        propertyIsEnumerable: ƒ propertyIsEnumerable(),
+        toLocaleString: ƒ toLocaleString(),
+        toString: ƒ toString(),
+        valueOf: ƒ valueOf()
+    }
+}
+
+ +

이제 new 연산자를 사용해서 프로토타입 기반의 doSomething() 인스턴스를 생성할 수 있다. new 연산자를 사용하려면 함수 호출 형식에 new 접두사를 붙이기만하면 된다. new 연산자로 함수를 호출하면 해당 함수의 인스턴스 객체를 반환받는다. 그러면 속성들을 이 객체에 추가할 수 있다.

+ +

다음의 코드를 실행해보자.

+ +
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 );
+ +

실행하고나면 결과는 다음과 비슷할 것이다.

+ +
{
+    prop: "some value",
+    __proto__: {
+        foo: "bar",
+        constructor: ƒ doSomething(),
+        __proto__: {
+            constructor: ƒ Object(),
+            hasOwnProperty: ƒ hasOwnProperty(),
+            isPrototypeOf: ƒ isPrototypeOf(),
+            propertyIsEnumerable: ƒ propertyIsEnumerable(),
+            toLocaleString: ƒ toLocaleString(),
+            toString: ƒ toString(),
+            valueOf: ƒ valueOf()
+        }
+    }
+}
+
+ +

위에서 본 것과 같이, doSomeInstancing 객체의 __proto__ 는 doSomething.prototype 이다.
+ 그래서 도대체 __proto__는 무엇을 하는것인지 알아보자.
+ 우리가 doSomeInstancing의 속성에 접근할때 브라우저는 우선 doSomeInstancing이 그 속성을 갖고있는지 확인한다.
+ 만약 doSomeInstancing이 속성을 갖고있지 않다면, 브라우저는 doSomeInstancing의 __proto__(doSomething.prototype)가 그 속성을 갖고있는지 확인한다.
+ 만약 doSomeInstancing의 __proto__가 브라우저가 찾던 속성을 갖고 있다면, doSomething의 __proto__가 갖고있는 그 속성을 사용한다.

+ +

그렇지 않고, doSomeInstancing의 __proto__가 그 속성을 갖고있지 않을때에는
+ doSomeInstancing의 __proto__의 __proto__가 그 속성을 갖는지 확인한다.
+ 기본적으로, 어떠한 함수던지 그 함수의 prototype 속성의 __proto__는 window.Object.prototype이다.
+ 그러므로 브라우저는 doSomeInstancing의 __proto__의 __proto__(doSomething.prototype의 __proto__(다시말해, Object.prototype))  에서 그 속성을 찾아본다.
+ 만약 그 속성을 doSomeInstancing의 __proto__의 __proto__에서 찾을 수 없다면 그다음엔 doSomeInstancing의 __proto__의 __proto__의 __proto__에서 찾을것이다.
+ 하지만 여기서 문제가 발생한다.
+ doSomeInstancing의 __proto__의 __proto__의 __proto__는 존재할 수 없다(window.Object.prototype의 __proto__는 null이기 때문).
+ 그제서야, 오직 모든 프로토타입 체인이 검사 되고 브라우저가 더이상  검사할 __proto__가 없을때에서야 브라우저는 우리가 찾던 값이 undefined라고 결론짓는다.

+ +

콘솔에 코드를 조금 더 추가해보자.

+ +
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);
+
+ +

이 코드의 결과는 아래와 같다.

+ +
doSomeInstancing.prop:      some value
+doSomeInstancing.foo:       bar
+doSomething.prop:           undefined
+doSomething.foo:            undefined
+doSomething.prototype.prop: undefined
+doSomething.prototype.foo:  bar
+
+ +

객체를 생성하는 여러 방법과 프로토타입 체인 결과

+ +

문법 생성자로 객체 생성

+ +
var o = {a: 1};
+
+// o 객체는 프로토타입으로 Object.prototype 을 가진다.
+// 이로 인해 o.hasOwnProperty('a') 같은 코드를 사용할 수 있다.
+// hasOwnProperty 라는 속성은 Object.prototype 의 속성이다.
+// Object.prototype 의 프로토타입은 null 이다.
+// o ---> Object.prototype ---> null
+
+var a = ["yo", "whadup", "?"];
+
+// Array.prototype을 상속받은 배열도 마찬가지다.
+// (이번에는 indexOf, forEach 등의 메소드를 가진다)
+// 프로토타입 체인은 다음과 같다.
+// a ---> Array.prototype ---> Object.prototype ---> null
+
+function f(){
+  return 2;
+}
+
+// 함수는 Function.prototype 을 상속받는다.
+// (이 프로토타입은 call, bind 같은 메소드를 가진다)
+// f ---> Function.prototype ---> Object.prototype ---> null
+
+ +

생성자를 이용

+ +

자바스크립트에서 생성자는 단지 new 연산자를  사용해 함수를 호출하면 된다.

+ +
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의 값과 같은 값을 가진다.
+
+ +

Object.create 이용

+ +

ECMAScript 5는 새로운 방법을 도입했다. Object.create라는 메소드를 호출하여 새로운 객체를 만들 수 있다. 생성된 객체의 프로토타입은 이 메소드의 첫 번째 인수로 지정된다.

+ +
var a = {a: 1};
+// a ---> Object.prototype ---> null
+
+var b = Object.create(a);
+// b ---> a ---> Object.prototype ---> null
+console.log(b.a); // 1 (상속됨)
+
+var c = Object.create(b);
+// c ---> b ---> a ---> Object.prototype ---> null
+
+var d = Object.create(null);
+// d ---> null
+console.log(d.hasOwnProperty); // undefined이다. 왜냐하면 d는 Object.prototype을 상속받지 않기 때문이다.
+
+ +
+

class 키워드 이용

+ +

ECMAScript2015에는 몇 가지 키워드가 도입되어 class를 구현하였다. 이런 생성 방식은 클래서 기반 언어의 개발자들에게 친숙하게 다가오나 동작 방식이 같지는 않다. 자바스크립트는 여전히 프로토타입 기반으로 남아있다. 새로 도입된 키워드는 {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, 그리고 {{jsxref("Operators/super", "super")}}가 있다.

+ +
'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);
+
+ +

성능

+ +

프로토타입 체인에 걸친 속성 검색으로 성능에 나쁜 영향을 줄 수 있으며, 때때로 치명적일 수 있다. 또한 존재하지도 않는 속성에 접근하려는 시도는 항상 모든 프로토타입 체인인 전체를 탐색해서 확인하게 만든다.

+ +

객체의 속성에 걸쳐 루프를 수행 하는 경우 프로토타입 체인 전체의 모든 열거자 속성에 대하여 적용된다. 객체 개인 속성인지 프로토타입 체인상 어딘가에 있는지 확인하기 위해서는 Object.prototype에서 모든 오브젝트로 상속된 hasOwnProperty 메소드를 이용할 필요가 있다. 다음 코드를 통하여 구체적인 예를 확인하여 보자.

+ +
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
+
+ +

hasOwnProperty 메소드만이 속성을 확인하고 프로토타입 체인 전체를 훑지 않게 할 수 있다.

+ +

참고: undefined인지 여부만 확인하는 것으로는 충분하지 않다. 여전히 속성이 존재할 수도 있는데 단지 그 값에 undefined가 할당되어 있을 수도 있기 때문이다.

+ +

좋지 않은 사례: 기본 프로타입의 확장 변형

+ +

Object.prototype 혹은 빌트인 프로토타입의 확장은 종종 이용되지만 오용이다.

+ +

이 기법은 Monkey patching으로 불리며 캡슐화를 망가뜨린다. Prototype.js와 같은 유명한 프레임워크에서도 사용되지만, 빌트인 타입에 비표준 기능을 추가하는 것은 좋은 생각이 아니다.

+ +

유일하게 좋은 사용 예라면, 새로운 자바스크립트 엔진에 Array.forEach등의 새로운 기능을 추가하면서 빌트인 프로토타입을 확장하는 것 정도다. 

+ +

예

+ +

B는 A를 상속한다:

+ +
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();
+
+ +

중요한 점은:

+ +
    +
  • .prototype에 타입이 정의되어 있다.
    • +
  • Object.create()을 이용하여 상속한다.
    • +
+ +

prototype 그리고 Object.getPrototypeOf

+ +

Java나 C++에 익숙한 개발자는 클래스라는 것도 없고, 모든 것이 동적이고 실행 시 결정되는 자바스크립트의 특징 때문에 어려움을 겪을 수도 있다. 모든 것은 객체이고, 심지의 "class"를 흉내내는 방식도 단지 함수 오브젝트를 이용하는 것 뿐이다.

+ +

이미 알아챘겠지만 우리의 함수 A도 특별한 속성 prototype를 가지고 있다. 이 특별한 속성은 자바스크립트의 new 연산자와 함께 쓰인다. 프로토타입 객체는 새로 만들어진 인스턴스의 내부 [[Prototype]] 속성에 복사되어 참조된다. 가령, var a1 = new A()를 수행할 때, this를 포함하고 있는 함수을 수행하기 전, 메모리에 새로 생성된 객체를 생성한 직후 자바스크립트는 a1.[[Prototype]] = A.prototype를 수행한다. 그 인스턴스의 속성에 접근하려 할 때 자바스크립트는 그 객체의 개인 속성인지 우선 확인하고 그렇지 않은 경우에 [[Prototype]]에서 찾는다. 이것은 prototype에 정의한 모든 것은 모든 인스턴스가 효과적으로 공유한다는 뜻이며, 심지어 프로토타입의 일부를 나중에 변경하다고 해도 이미 생성되어 있는 인스턴스는 필요한 경우 그 변경 사항에 접근할 수 있다.

+ +

위의 예에서, 만일 var a1 = new A(); var a2 = new A(); 그 후 a1.doSomething이 Object.getPrototypeOf(a1).doSomething를 가리키게 되는 것은A.prototype.doSomething으로 정의한 것과 같게 된다. 즉, Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething.

+ +

요약 하자면, prototype은 타입 정의를 위한 것이고, Object.getPrototypeOf()는 모든 인스턴스가 공유한다.

+ +

[[Prototype]]은 재귀적으로 탐색된다. 즉, a1.doSomething, Object.getPrototypeOf(a1).doSomething,Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething 등등, 이미 발견했거나 Object.getPrototypeOf가 null을 반환할 때까지 반복된다.

+ +

따라서 다음 호출에 대하여

+ +
var o = new Foo();
+ +

자바스크립트는 실제로 다음 작업을 수행한다.

+ +
var o = new Object();
+o.[[Prototype]] = Foo.prototype;
+Foo.call(o);
+ +

(혹은 그런 비슷한 작업, 내부 구현은 다를 수 있다) 그리고 나중에 다음을 수행하면

+ +
o.someProp;
+ +

자바스크립트는 o가 속성 someProp을 가졌는지 확인하고, 아니면 Object.getPrototypeOf(o).someProp, 또 아니면 Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp 등으로 계속 된다.

+ +

프로토타입 상속의 종류

+ +

프로토타입 상속에는 3가지 종류가 있다 : 위임형 상속, 연결형 상속, 함수형 상속.

+ +

위임형 상속(Delegation inheritance)

+ +

위임형 상속에서 프로토타입 객체는 다른 객체의 기반이 된다. 위임 프로토타입을 상속받을 경우 새 객체는 해당 프로토타입에 대한 참조를 가지고 있다.

+ +

새 객체의 속성에 접근할 때, 해당 객체가 직접적으로 속성을 소유하고 있는지 먼저 체크한다. 없다면 다음 순서로 [[Prototype]]을 체크한다. 이 과정은 프로토타입 체인을 따라서 모든 객체의 프로토타입 체인의 최상위에 있는 객체인 Object.prototype에 도달할 때 까지 반복된다.

+ +

메소드를 위임 상속할 경우 모든 객체가 각 메소드에에 대해 하나의 코드를 공유하므로 메모리를 절약할 수 있다.

+ +

Javascript에서 이를 구현하는 방법은 여러가지가 있는데 ES6에서는 아래와 같은 방식이 흔하다:

+ +
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
+
+ +

Object.create(null). 을 통해 프로토타입을 {{jsxref("null")}}로 지정하여 속성 위임 없이 객체를 생성할 수 있다..

+ +

이 방법의 큰 단점 중 하나는 상태를 저장하는데 그리 좋은 방법이 아니라는 것이다. 객체나 배열의 상태를 변경하게 되면 같은 프로토타입을 공유하는 모든 객체의 상태가 변경된다.

+ +

상태 변경이 전파되는 것을 막으려면 각 객체마다 상태 값의 복사본을 만들어야 한다.

+ +

연결형 상속(Concatenative inheritance)

+ +

연결형 상속은 한 객체의 속성을 다른 객체에 모두 복사함으로써 상속을 구현하는 방법이다.

+ +

이 상속법은 Javascript 객체의 동적 확장성을 이용한 방법이다. 객체 복사는 속성의 초기값을 저장하기 위한 좋은 방법이다: 이 방식은 {{jsxref("Object.assign()")}}을 통해 구현하는 것이 보통이며 ES6 이전에 Lodash, Underscore, jQuery등의 라이브러리들이 .extend() 와 비슷한 메소드로 제공한 방법이다.

+ +
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
+
+ +

연결형 상속은 매우 좋은 방법이며 클로져와 같이 사용한다면 훨씬 효과적인 상속 방식입니다..

+ +

함수형 상속(Functional inheritance)

+ +

함수형 상속(Functional inheritance)이라는 단어는 Douglas Crockford가 자신의 저서 “JavaScript: The Good Parts”에서 창조한 단어이다. 이 방법은 새 속성들을 연결형 상속으로 쌓되 상속 기능을 Factory 함수로 만들어 사용하는 방식이다.

+ +

기존의 객체를 확장하는데 쓰이는 함수를 일반적으로 믹스인 함수라 칭한다. 객체 확장에 함수를 사용하는 가장 큰 이점은 Private Data를 클로져를 통해 캡슐화 시킬 수 있다는 점이다.

+ +

다르게 말하자면 Private 상태를 지정할 수 있다는 의미이다.

+ +

특정 함수를 통할 필요 없이 public 접근이 가능한 속성에 대해 접근 제한을 거는 것은 문제가 있다. 따라서 private 클로져에 속성 값을 숨겨야 하며 이는 아래와 같이 구현한다:

+ +
// 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) => rawMixin.call(target);
+const george = { name: 'george' };
+const model = mixinModel(george);
+model.on('change', data => console.log(data));
+model.set('name', 'Sam');
+/*
+{
+  prop: 'name',
+  value: 'Sam'
+}
+*/
+
+ +

attrs 을 public 속성에서 private 영역으로 옮겨서 public API를 통한 접근을 차단할 수 있다. // 접근할 수 있는 유일한 방법은 Privileged 메소드 뿐이다. Privileged 메소드는 클로져 영역에 정의된 함수로 private data에 접근 가능한 함수들을 일컫는다.

+ +

위 예제를 보면 믹스인 함수 rawMixin().에 대한 래퍼로 mixinModel() 을 선언한 것을 알 수 있다. 이는 예제에서 {{jsxref("Function.prototype.call()")}} 을 사용했듯이 함수 내에서 this의 값을 설정해야 하기 때문이다. Wrapper를 생략하고 호출자가 알아서 하도록 놔둘 수 있지만 그럴 경우 혼동될 가능성이 있다.

+ +
+

결론

+ +

복잡한 코드를 작성하여 이용하기 전에 프로토타입 기반의 상속 모델을 이해하는 것이 중요하다. 또한 프로토타입 체인의 길이는 성능을 저해하지 않도록 줄이는 방법을 고안해야 한다. 또한 빌트인 프로토타입은 새로운 자바스크립트 기능과 호환성을 갖기 위한 이유가 아닌 이상 절대 확장해서는 안된다.

+
+
diff --git a/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html b/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html deleted file mode 100644 index 03015b1407..0000000000 --- a/files/ko/web/javascript/introduction_to_object-oriented_javascript/index.html +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: 객체지향 자바스크립트 개요 -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript -translation_of: Learn/JavaScript/Objects -translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---- -

비록 다른 객체지향적인 언어들과의 차이점에 대한 논쟁들이 있긴 하지만, JavaScript는 강력한 객체지향 프로그래밍 능력들을 지니고 있다.

- -

이 글에서는 객체지향 프로그래밍에 대해 소개하는 것으로 시작해서 자바스크립트의 객체 모델, 그리고 자바스크립트에서의 객체지향 프로그래밍 개념에 대해 간단한 예제로 살펴볼 것이다.

- -

자바스크립트 리뷰(JavaScript review)

- -

만약 변수, 형, 함수, 스코프 등 자바스크립트의 개념에 대해 명확히 이해하고 있지 못하다면, A re-introduction to JavaScript를 참고해 보자. Core JavaScript 1.5 Guide라는 글도 도움이 될 것이다.

- -

객체지향 프로그래밍(Object-oriented programming)

- -

객체지향 프로그래밍은 실제 세계에 기반한 모델을 만들기 위해 추상화를 사용하는 프로그래밍 패러다임이다. 객체지향 프로그래밍은 modularity, polymorphism, encapsulation을 포함하여 이전에 정립된 패러다임들부터 여러가지 테크닉들을 사용한다. 오늘날 많은 유명한 프로그래밍 언어(자바, 자바스크립트, C#, C++, 파이썬, PHP, 루비, 오브젝트C)는 객체지향 프로그래밍을 지원한다.

- -

객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록 이라는 기존의 프로그래밍에 대한 전통적인 관점에 반하여, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. 객체지향 프로그래밍에서, 각 객체는 메시지를 받을 수도 있고, 데이터를 처리할 수도 있으며, 또다른 객체에게 메시지를 전달할 수도 있다. 각 객체는 별도의 역할이나 책임을 갖는 작은 독립적인 기계로 볼 수 있는 것이다.

- -

객체지향 프로그래밍은 보다 유연하고 유지보수성이 높은 프로그래밍을 하도록 의도되었고, 대규모 소프트웨어 공학에서 널리 알려져 있다. 객체지향 프로그래밍이 갖는 modularity에 기반한 강력한 힘에 의해, 객체지향적인 코드는 개발을 보다 단순하게 했고, 시간이 흐른 뒤에도 보다 쉽게 이해할 수 있도록 했으며, 복잡한 상황이나 절차들을 덜 모듈화된 프로그래밍 방법들보다 더 직접적으로 분석하고, 코딩하고, 이해할 수 있도록 만들었다.2

- -

용어(Terminology)

- -
-
Class
-
객체의 특성을 정의
-
Object
-
Class의 인스턴스
-
Property
-
객체의 특성(예: 색깔)
-
Method
-
객체의 능력(예: 걷기)
-
Constructor
-
인스턴스화 되는 시점에서 호출되는 메서드
-
Inheritance
-
클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.
-
Encapsulation
-
클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)
-
Abstraction
-
복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.
-
Polymorphism
-
다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.
-
- -

객체지향 프로그래밍에 대한 보다 확장된 설명은 Object-oriented programming를 참고하면 된다.

- -

프로토타입기반 프로그래밍(Prototype-based programming)

- -

프로토타입 기반 프로그래밍은 클래스가 존재하지 않는 객체지향 프로그래밍의 한가지 스타일로, 동작 재사용(behavior reuse, 클래스기반 언어에서는 상속이라고함)은 프로토타입으로서 존재하는 객체를 데코레이팅하는 과정을 통해 수행된다.

- -

프로토타입 기반 언어의 원형적인 예는 David Ungar과 Randall Smith가 개발한 'Self'라는 프로그래밍 언어이다. 그러나 클래스가 없는 프로그래밍 스타일이 최근 인기를 얻으며 성장하였고, 자바스크립트, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak 등의 언어에서 채택되어 왔다.2

- -

자바스크립트 객체지향 프로그래밍(JavaScript Object Oriented Programming)

- -

Core Objects

- -

자바스크립트는 코어(core)에 몇 개의 객체를 갖고 있다. 예를들면, Math, Object, Array, String과 같은 객체가 있다. 아래의 예제는 Math 객체를 사용해서 무작위 숫자를 만들어내는 것을 보여준다.

- -
alert(Math.random());
-
- -
Note: 여기와 다른 예제들 모두 alert 이라는 함수가 전역에 선언되어 있다고 가정하고 있다. alert 함수는 실제로 자바스크립트 그 자체에 포함되진 않았지만, 대부분의 브라우저에서 지원하고 있다.
- -

자바스크립트의 core object들의 리스트는 Core JavaScript 1.5 Reference:Global Objects라는 글을 참고하면 자세히 알 수 있다.

- -

자바스크립트의 모든 객체는 Object 객체의 인스턴스이므로 Object의 모든 속성과 메서드를 상속받는다.

- -

Custom Objects

- -

The Class

- -

class문을 흔하게 볼 수 있는 C++이나 자바와는 달리 자바스크립트는 class문이 포함되지 않은 프로토타입 기반 언어이다. 이로인해 때때로 class 기반 언어에 익숙한 프로그래머들은 혼란을 일으킨다. 자바스크립트에서는 function을 class로서 사용한다. 클래스를 정의하는 것은 function을 정의하는 것만큼 쉽다. 아래 예제에서는 Person이라는 이름의 클래스를 새로 정의하고 있다.

- -
function Person() { }
-
- -

The Object (Class Instance)

- -

obj라는 이름의 객체의 새로운 인스턴스를 만들 때에는 new obj라는 statement를 사용하고, 차후에 접근할 수 있도록 변수에 결과를 받는다.

- -

아래의 예제에서 Person이라는 이름의 클래스를 정의한 후에, 두 개의 인스턴스를 생성하고 있다.

- -
function Person() { }
-var person1 = new Person();
-var person2 = new Person();
-
- -
Object.create 메서드 역시 새로운 인스턴스를 만들 때 사용할 수 있다.
- -

The Constructor

- -

생성자는 인스턴스화되는 순간(객체 인스턴스가 생성되는 순간) 호출된다. 생성자는 해당 클래스의 메서드이다. 자바스크립트에서는 함수 자체가 그 객체의 생성자 역할을 하기 때문에 특별히 생성자 메서드를 정의할 필요가 없다. 클래스 안에 선언된 모든 내역은 인스턴스화되는 그 시간에 실행된다. 생성자는 주로 객체의 속성을 설정하거나 사용하기 위해 객체를 준비시키는 메서드를 호출할 때 주로 사용된다. 클래스 메서드를 추가하고 정의하는 것은 나중에 설명한다.

- -
아래의 예제에서, Person 클래스의 생성자는 Person 이 인스턴스화되었을 때 alert 을 보여주게 된다.
- -
function Person() {
-  alert('Person instantiated');
-}
-
-var person1 = new Person();
-var person2 = new Person();
-
- -

The Property (object attribute)

- -
속성은 클래스 안에 있는 변수들을 말한다. 객체의 모든 인스턴스는 그 인스턴스의 속성을 갖는다. 속성들의 상속이 바르게 이루어지려면 해당 클래스(function)의 프로토타입에 선언되어 있어야 한다.
- -
 
- -
클래스 내에서 속성 작업은 현재 객체를 가리키는 this 키워드에 의해 이루어진다. 클래스의 외부에서 속성에 접근(읽기 혹은 쓰기)하는 것은 "인스턴스명.속성명" 의 형식으로 이루어진다. 이러한 문법은 C++, 자바나 다른 수많은 언어에서와 동일한 방식이다. (클래스 내부에서 "this.속성명" 은 해당 속성의 값을 읽거나 쓸 때 주로 사용된다)
- -
 
- -
아래의 예제에서 Person 클래스에 gender라는 속성을 정의하고 인스턴스화할 때 그 값을 설정한다.
- -
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
-
- -

메서드(The methods)

- -

메서드는 앞서 살펴본 속성과 같은 방식을 따른다. 차이점이 있다면 메서드는 function이기 때문에 function 형태로 정의된다는 것입니다. 메서드를 호출하는 것은 속성에 접근하는 것과 매우 유사한데 단지 끝에 ()를 추가하면 된다. argument가 있다면 괄호 안에 입력해준다. 메서드를 정의하기 위해서는 클래스의 prototype에 명명된 속성에 함수를 할당하면 된다. 이때 할당된 이름은 해당 객체의 메서드를 호출할 때 사용되는 이름이다.

- -

아래의 예에서는 Person 클래스에 sayHello()라는 메서드를 정의하고 사용하고 있다.

- -
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
-
- -

자바스크립트에서 메서드는 "컨텍스트에 관계 없이" 호출될 수 있는 속성으로서 클래스/객체에 연결되어 있다. 다음 예제의 코드를 살펴보자.

- -
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
-
- -

위의 예제는 많은 개념들을 한꺼번에 보여주고 있다. 

- -
먼저 이 예제는 자바스크립트에 "per-object methods" 가 존재하지 않는다는 것을 보여준다. JavaScript는 메서드에 대한 레퍼런스가 모두 똑같은 (프로토타입에 처음 정의한) 함수를 참조하고 있기 때문이다.
- -
 
- -
자바스크립트는 어떤 객체의 메서드로서 함수가 호출될 때 현재 "객체의 컨텍스트"를 특별한 "this" 변수에 "연결한다". 이는 아래와 같이 function 객체의 call 메서드를 호출하는 것과 동일하다.
- -
 
- -
(역자주: 참고로, genderTeller() 만 호출했을 때 undefined 가 나타난 것은 해당 메서드가 호출될 때 컨텍스트가 window 로 잡혔기 때문에 window.gender 는 존재하지 않으므로 undefined 가 나타난 것이다.)
- -
 
- -
genderTeller.call(person1); //alerts 'Male'
-
- -
더 자세한 것은 Function.call 과 Function.apply 를 참고하자.
- -

상속(Inheritance)

- -

상속은 하나 이상의 클래스를 특별한 버전의 클래스로 생성하는 하나의 방법이다. (다만 자바스크립트는 오직 하나의 클래스를 상속받는 것만 지원한다.) 이 특별한 클래스는 흔히 자식 클래스(child)라고 불리우고 원본 클래스는 흔히 부모 클래스(parent)라고 불리운다. 자바스크립트에서는 부모 클래스의 인스턴스를 자식 클래스에 할당함으로써 상속이 이루어진다. 최신 브라우저에서는 Object.create 메서드를 사용해서 상속을 수행할 수도 있다.

- -
-

Core JavaScript 1.5 Reference:Global Objects:Object:prototype 에 나와있는 설명과 같이 자바스크립트는 자식 클래스의 prototype.constructor 를 검색하지 않으므로 직접 명시해주어야 한다.

-
- -

아래의 예제에서는, Student라는 클래스를 Person 클래스의 자식 클래스로 정의한다. 그 후에 우리는 sayHello() 메서드를 재정의하고 sayGoodBye() 메서드를 추가한다.

- -
// 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
-
- -

Object.create 를 사용하면 상속을 아래와 같이 수행할 수 있다.

- -
Student.prototype = Object.create(Person.prototype);
- -

캡슐화(Encapsulation)

- -

이전의 예제에서, Student 클래스는 Person 클래스의 walk() 메서드가 어떻게 실행되는지에 대해 알 필요가 없고, walk() 메서드를 사용하는데에도 전혀 문제가 없다. 또 Student 클래스에서는 walk() 메서드의 내용을 바꾸려는게 아니라면 walk() 메서드를 특별히 정의할 필요도 없다. 자식 클래스는 부모 클래스의 모든 메서드를 상속받고, 상속받은 메서드중 일부를 수정하고 싶은 경우에만 해당 메서드를 정의하는 것을 우리는 캡슐화(encapsulation)이라고 부른다.

- -

추상화(Abstraction)

- -

추상화는 작업 문제의 현재 부분을 모델링할 수 있도록 하는 매커니즘이다. 추상화는 상속(specialization, 추상의 수준을 낮추는 것)과 합성으로 구현할 수 있다. 자바스크립트는 상속에 의해 특별화(specialization)를, 클래스들의 인스턴스를 다른 객체의 속성값이 되게 함으로써 합성을 구현한다.

- -

자바스크립트 Function 클래스는 Object 클래스를 상속받고(이는 모델의 특별화를 보여준다), Function.prototype 속성은 Object의 인스턴스이다(이는 합성을 보여준다).

- -
var foo = function(){};
-alert( 'foo is a Function: ' + (foo instanceof Function) );
-alert( 'foo.prototype is an Object: ' + (foo.prototype instanceof Object) );
-
- -

다형성(Polymorphism)

- -

모든 메서드와 속성들은 prototype 속성에 선언되어 있고, 클래스가 다르다면 같은 이름의 메서드도 선언할 수 있다. 메서드들은 메서드가 선언된 클래스로 그 실행 영역이 한정된다. 물론 이건 두 개의 클래스들이 서로 부모-자식 관계가 아닐때에만 성립한다. 즉 다시 말해 부모-자식 관계의 상속 관계로 하나가 다른 하나에게서 상속받지 않았을 때에만 성립한다.

- -

Notes

- -

객체지향 프로그래밍을 구현하는데 있어서 자바스크립트는 매우 유연하기 때문에, 이 글에서 선보인 테크닉들은 자바스크립트에서 객체지향을 구현하는 유일한 방법들 중 일부일 뿐이다.

- -

또, 여기에서 선보인 테크닉들은 어떤 hack도 사용하지 않았고 또한 다른 언어의 객체 이론 구현물들을 모방하지도 않았다.

- -

자바스크립트의 객체지향 프로그래밍에 있어서 다른 보다 깊이있는 테크닉들이 많이 있지만, 소개하는 글이라는 이 글의 특성상 다루지 않기로 한다.

- -

References

- -
    -
  1. Mozilla. "Core JavaScript 1.5 Guide", http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide
    2. -
  2. Wikipedia. "Object-oriented programming", http://en.wikipedia.org/wiki/Object-...ed_programming
    3. -
- -
-

Original Document Information

- -
    -
  • Author(s): Fernando Trasviña <f_trasvina at hotmail dot com>
    • -
  • Copyright Information: © 1998-2005 by individual mozilla.org contributors; content available under a Creative Commons license
    • -
-
- -

 

diff --git a/files/ko/web/javascript/language_resources/index.html b/files/ko/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..5743a54e24 --- /dev/null +++ b/files/ko/web/javascript/language_resources/index.html @@ -0,0 +1,155 @@ +--- +title: 자바스크립트 언어 자료 +slug: Web/JavaScript/언어_리소스 +tags: + - Advanced + - 자바스크립트 +translation_of: Web/JavaScript/Language_Resources +--- +
{{JsSidebar}}
+ +

ECMAScript는 자바스크립트의 토대를 구성하는 스크립트 언어입니다. ECMAScript는 ECMA International 표준화 기구에 의해서 ECMA-262 및 ECMA-402 스펙에서 표준화되었습니다. 다음은 현재까지 승인됐거나 작업 중인 ECMAScript 표준입니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
이름링크출시 날짜설명
현재판
ECMA-262 10th EditionWorking draft2019ECMAScript 2019 (제 10판), 명세 작업 중
ECMA-262 9th EditionPDF, HTML, 
+ Working draft, repository		2018ECMAScript 2018 (제 9판)
ECMA-402 5th EditionWorking draft, repository2018ECMAScript 2018 국제화 API 표준
폐기(Obsolete)/역사판
ECMA-262 (ES 1)PDFJune 1997ECMAScript 표준 원본.
ECMA-262 (ES 2)PDFAugust 1998ECMAScript 표준 제2판; 또한 ISO 표준 16262.
ECMA-262 (ES 3)PDFDecember 1999ECMAScript 표준 제3판; JavaScript 1.5에 해당.
+ errata 참조
ECMA-262 (ES 5)PDFDecember 2009ECMAScript 제5판
+ ES5 errata 및 ECMAScript 5 support in Mozilla 참조
ECMA-357PDFJune 2004ECMAScript for XML (E4X).
+ E4X errata 참조.
ECMA-357 Edition 2PDFDecember 2005ECMAScript for XML (E4X).
ECMA-262 (ES 5.1)PDF, HTMLJune 2011이 판은 국제화 표준 ISO/IEC 16262:2011 제3판과 완전히 정렬됨.
+ ES5 errata 수정 포함, 새로운 기능은 없음.
ECMA-402 1.0PDF, HTMLDecember 2012ECMAScript 국제화 API 1.0.
ECMA-262 2015 (ES 6)PDF, HTMLJune 2015ECMAScript 2015 (제6판).
ECMA-402 2.0PDFJune 2015ECMAScript 국제화 API 2.0.
ECMA-262 2016 (ES 7)HTMLJune 2016ECMAScript 2016 (제7판).
ECMA-402 3.0HTMLJune 2016ECMAScript 국제화 API 3.0. 나중(올해 6월)에 승인될.
ECMA-262 2017 (ES 8)HTMLJune 2017ECMAScript 2017 (제8판).
ECMA-402 4th EditionHTMLJune 2017ECMAScript 국제화 API 4.0.
+ +

ECMAScript의 역사에 대한 자세한 정보는 Wikipedia ECMAScript entry를 살펴보세요.

+ +

여러분은 코드네임 "Harmony"로 불리우는 ECMAScript의 다음 개정에 참여하거나 그냥 진행상황을 확인할 수도 있습니다.  또한 ECMAScript 국제화 API 스펙도 공개 위키와 ecmascript.org 에 연결된 es-discuss mailing list에서도 확인할 수 있습니다.

+ +

구현

+ +
    +
  • SpiderMonkey - 파이어폭스 포함 여러 Mozilla 제품에 사용되는 자바스크립트 엔진;
    • +
  • Rhino - 자바로 작성된 자바스크립트 엔진;
    • +
  • Tamarin - (어도비® 플래쉬® 재생기에서 사용되는) 액션스크립트 가상머신;
    • +
  • Other implementations (위키피디아).
    • +
+ +

관련 항목

+ + diff --git a/files/ko/web/javascript/reference/classes/class_fields/index.html b/files/ko/web/javascript/reference/classes/class_fields/index.html deleted file mode 100644 index 959c65fada..0000000000 --- a/files/ko/web/javascript/reference/classes/class_fields/index.html +++ /dev/null @@ -1,396 +0,0 @@ ---- -title: Class fields -slug: Web/JavaScript/Reference/Classes/Class_fields -translation_of: Web/JavaScript/Reference/Classes/Public_class_fields ---- -
{{JsSidebar("Classes")}}
- -
-

This page describes experimental features.

- -

Both Public and private field declarations are an experimental feature (stage 3) proposed at TC39, the JavaScript standards committee.

- -

Support in browsers is limited, but the feature can be used through a build step with systems like Babel. See the compat information below.

-
- -

Public fields

- -

static fields와 instance의 public fields 는 둘 다 writable, enumerable, configurable 한 프로퍼티들이다. 예를들면, 정 반대인 private 과는 다르게, unlike their private counterparts, static fields는 프로토타입 상속에 관여한다.

- -

Public static fields

- -

Public static fields 는 클래스에서 생성하는 모든 인스턴스에 대한 필드가 아닌, 클래스마다 단 한개의 필드가 존재하기를 원할 때 유용하게 사용할 수 있다. Public fields는 캐시, 고정된 설정값, 또는 인스턴스 간 복제할 필요가 없는 어떤 데이터 등에 유용하게 쓰일 수 있다.

- -

Public static fields are declared using the static 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.

- -
class ClassWithStaticField {
-  static staticField = 'static field'
-}
-
-console.log(ClassWithStaticField.staticField)
-// expected output: "static field"​
-
- -

Fields without initializers are initialized to undefined.

- -
class ClassWithStaticField {
-  static staticField
-}
-
-console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
-console.log(ClassWithStaticField.staticField)
-// expected output: "undefined"
- -

Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.

- -
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"
- -

When initializing fields, this refers to the class constructor. You can also reference it by name, and use super to get the superclass constructor (if one exists).

- -
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"
-
- -

Public instance fields

- -

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.

- -

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 super() returns in a subclass.

- -
class ClassWithInstanceField {
-  instanceField = 'instance field'
-}
-
-const instance = new ClassWithInstanceField()
-console.log(instance.instanceField)
-// expected output: "instance field"
- -

Fields without initializers are initialized to undefined.

- -
class ClassWithInstanceField {
-  instanceField
-}
-
-const instance = new ClassWithInstanceField()
-console.assert(instance.hasOwnProperty('instanceField'))
-console.log(instance.instanceField)
-// expected output: "undefined"
- -

Like properties, field names may be computed.

- -
const PREFIX = 'prefix'
-
-class ClassWithComputedFieldName {
-    [`${PREFIX}Field`] = 'prefixed field'
-}
-
-const instance = new ClassWithComputedFieldName()
-console.log(instance.prefixField)
-// expected output: "prefixed field"
- -

When initializing fields this 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 super.

- -
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"
- -

Public methods

- -

Public static methods

- -

The static 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.

- -

{{EmbedInteractiveExample("pages/js/classes-static.html")}}

- - - -

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.

- -

Public instance methods

- -

As the name implies, public instance methods are methods available on class instances.

- -
class ClassWithPublicInstanceMethod {
-  publicMethod() {
-    return 'hello world'
-  }
-}
-
-const instance = new ClassWithPublicInstanceMethod()
-console.log(instance.publicMethod())
-// expected output: "hello worl​d"
- -

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.

- -

You may make use of generator, async, and async generator functions.

- -
class ClassWithFancyMethods {
-  *generatorMethod() { }
-  async asyncMethod() { }
-  async *asyncGeneratorMethod() { }
-}
- -

Inside instance methods, this refers to the instance itself. In subclasses, super lets you access the superclass prototype, allowing you to call methods from the superclass.

- -
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"
-
- -

Getters and setters are special methods that bind to a class property and are called when that property is accessed or set. Use the get and set syntax to declare a public instance getter or setter.

- -
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"
-
- -

Private fields

- -

Private static fields 

- -

Private fields are accessible on the class constructor from inside the class declaration itself.

- -

The limitation of static variables being called by only static methods still holds. 

- -
class ClassWithPrivateStaticField {
-  static #PRIVATE_STATIC_FIELD
-
-  static publicStaticMethod() {
-    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
-    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
-  }
-}
-
-assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)
- -

Private static fields are added to the class constructor at class evaluation time.

- -

There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field.

- -

This can lead to unexpected behaviour when using this.

- -
class BaseClassWithPrivateStaticField {
-  static #PRIVATE_STATIC_FIELD
-
-  static basePublicStaticMethod() {
-    this.#PRIVATE_STATIC_FIELD = 42
-    return this.#PRIVATE_STATIC_FIELD
-  }
-}
-
-class SubClass extends BaseClassWithPrivateStaticField { }
-
-assertThrows(() => SubClass.basePublicStaticMethod(), TypeError)
-
- -

Private instance fields

- -

Private instance fields are declared with # names (pronounced "hash names"), which are identifiers prefixed with #. The # is a part of the name itself. It is used for declaration and accessing as well.

- -

The encapsulation is enforced by the language. It is a syntax error to refer to # names from out of scope.

- -
class ClassWithPrivateField {
-  #privateField
-
-  constructor() {
-    this.#privateField = 42
-    this.#randomField = 666 // Syntax error
-  }
-}
-
-const instance = new ClassWithPrivateField()
-instance.#privateField === 42 // Syntax error
-
- -

Private Methods

- -

Private static methods

- -

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.

- -

Private static methods may be generator, async, and async generator functions.

- -
class ClassWithPrivateStaticMethod {
-    static #privateStaticMethod() {
-        return 42
-    }
-
-    static publicStaticMethod1() {
-        return ClassWithPrivateStaticMethod.#privateStaticMethod();
-    }
-
-    static publicStaticMethod2() {
-        return this.#privateStaticMethod();
-    }
-}
-
-assert(ClassWithPrivateStaticField.publicStaticMethod1() === 42);
-assert(ClassWithPrivateStaticField.publicStaticMethod2() === 42);
-
- -

This can lead to unexpected behaviour when using this(because this binding rule applies).

- -
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
-
- -

Private instance methods

- -

Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.

- -
class ClassWithPrivateMethod {
-  #privateMethod() {
-    return 'hello world'
-  }
-
-  getPrivateMessage() {
-      return this.#privateMethod()
-  }
-}
-
-const instance = new ClassWithPrivateMethod()
-console.log(instance.getPrivateMessage())
-// expected output: "hello worl​d"
- -

Private instance methods may be generator, async, or async generator functions. Private getters and setters are also possible:

- -
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✨"
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
FieldDefinition productionStage 3
- -

Browser compatibility

- -

Public class fields

- - - -

{{Compat("javascript.classes.public_class_fields")}}

- -

Private class fields

- - - -

{{Compat("javascript.classes.private_class_fields")}}

- -

See also

- - diff --git a/files/ko/web/javascript/reference/classes/public_class_fields/index.html b/files/ko/web/javascript/reference/classes/public_class_fields/index.html new file mode 100644 index 0000000000..959c65fada --- /dev/null +++ b/files/ko/web/javascript/reference/classes/public_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 +--- +
{{JsSidebar("Classes")}}
+ +
+

This page describes experimental features.

+ +

Both Public and private field declarations are an experimental feature (stage 3) proposed at TC39, the JavaScript standards committee.

+ +

Support in browsers is limited, but the feature can be used through a build step with systems like Babel. See the compat information below.

+
+ +

Public fields

+ +

static fields와 instance의 public fields 는 둘 다 writable, enumerable, configurable 한 프로퍼티들이다. 예를들면, 정 반대인 private 과는 다르게, unlike their private counterparts, static fields는 프로토타입 상속에 관여한다.

+ +

Public static fields

+ +

Public static fields 는 클래스에서 생성하는 모든 인스턴스에 대한 필드가 아닌, 클래스마다 단 한개의 필드가 존재하기를 원할 때 유용하게 사용할 수 있다. Public fields는 캐시, 고정된 설정값, 또는 인스턴스 간 복제할 필요가 없는 어떤 데이터 등에 유용하게 쓰일 수 있다.

+ +

Public static fields are declared using the static 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.

+ +
class ClassWithStaticField {
+  static staticField = 'static field'
+}
+
+console.log(ClassWithStaticField.staticField)
+// expected output: "static field"​
+
+ +

Fields without initializers are initialized to undefined.

+ +
class ClassWithStaticField {
+  static staticField
+}
+
+console.assert(ClassWithStaticField.hasOwnProperty('staticField'))
+console.log(ClassWithStaticField.staticField)
+// expected output: "undefined"
+ +

Public static fields are not reinitialized on subclasses, but can be accessed via the prototype chain.

+ +
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"
+ +

When initializing fields, this refers to the class constructor. You can also reference it by name, and use super to get the superclass constructor (if one exists).

+ +
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"
+
+ +

Public instance fields

+ +

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.

+ +

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 super() returns in a subclass.

+ +
class ClassWithInstanceField {
+  instanceField = 'instance field'
+}
+
+const instance = new ClassWithInstanceField()
+console.log(instance.instanceField)
+// expected output: "instance field"
+ +

Fields without initializers are initialized to undefined.

+ +
class ClassWithInstanceField {
+  instanceField
+}
+
+const instance = new ClassWithInstanceField()
+console.assert(instance.hasOwnProperty('instanceField'))
+console.log(instance.instanceField)
+// expected output: "undefined"
+ +

Like properties, field names may be computed.

+ +
const PREFIX = 'prefix'
+
+class ClassWithComputedFieldName {
+    [`${PREFIX}Field`] = 'prefixed field'
+}
+
+const instance = new ClassWithComputedFieldName()
+console.log(instance.prefixField)
+// expected output: "prefixed field"
+ +

When initializing fields this 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 super.

+ +
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"
+ +

Public methods

+ +

Public static methods

+ +

The static 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.

+ +

{{EmbedInteractiveExample("pages/js/classes-static.html")}}

+ + + +

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.

+ +

Public instance methods

+ +

As the name implies, public instance methods are methods available on class instances.

+ +
class ClassWithPublicInstanceMethod {
+  publicMethod() {
+    return 'hello world'
+  }
+}
+
+const instance = new ClassWithPublicInstanceMethod()
+console.log(instance.publicMethod())
+// expected output: "hello worl​d"
+ +

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.

+ +

You may make use of generator, async, and async generator functions.

+ +
class ClassWithFancyMethods {
+  *generatorMethod() { }
+  async asyncMethod() { }
+  async *asyncGeneratorMethod() { }
+}
+ +

Inside instance methods, this refers to the instance itself. In subclasses, super lets you access the superclass prototype, allowing you to call methods from the superclass.

+ +
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"
+
+ +

Getters and setters are special methods that bind to a class property and are called when that property is accessed or set. Use the get and set syntax to declare a public instance getter or setter.

+ +
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"
+
+ +

Private fields

+ +

Private static fields 

+ +

Private fields are accessible on the class constructor from inside the class declaration itself.

+ +

The limitation of static variables being called by only static methods still holds. 

+ +
class ClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static publicStaticMethod() {
+    ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD = 42
+    return ClassWithPrivateStaticField.#PRIVATE_STATIC_FIELD
+  }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod() === 42)
+ +

Private static fields are added to the class constructor at class evaluation time.

+ +

There is a provenance restriction on private static fields. Only the class which defines the private static field can access the field.

+ +

This can lead to unexpected behaviour when using this.

+ +
class BaseClassWithPrivateStaticField {
+  static #PRIVATE_STATIC_FIELD
+
+  static basePublicStaticMethod() {
+    this.#PRIVATE_STATIC_FIELD = 42
+    return this.#PRIVATE_STATIC_FIELD
+  }
+}
+
+class SubClass extends BaseClassWithPrivateStaticField { }
+
+assertThrows(() => SubClass.basePublicStaticMethod(), TypeError)
+
+ +

Private instance fields

+ +

Private instance fields are declared with # names (pronounced "hash names"), which are identifiers prefixed with #. The # is a part of the name itself. It is used for declaration and accessing as well.

+ +

The encapsulation is enforced by the language. It is a syntax error to refer to # names from out of scope.

+ +
class ClassWithPrivateField {
+  #privateField
+
+  constructor() {
+    this.#privateField = 42
+    this.#randomField = 666 // Syntax error
+  }
+}
+
+const instance = new ClassWithPrivateField()
+instance.#privateField === 42 // Syntax error
+
+ +

Private Methods

+ +

Private static methods

+ +

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.

+ +

Private static methods may be generator, async, and async generator functions.

+ +
class ClassWithPrivateStaticMethod {
+    static #privateStaticMethod() {
+        return 42
+    }
+
+    static publicStaticMethod1() {
+        return ClassWithPrivateStaticMethod.#privateStaticMethod();
+    }
+
+    static publicStaticMethod2() {
+        return this.#privateStaticMethod();
+    }
+}
+
+assert(ClassWithPrivateStaticField.publicStaticMethod1() === 42);
+assert(ClassWithPrivateStaticField.publicStaticMethod2() === 42);
+
+ +

This can lead to unexpected behaviour when using this(because this binding rule applies).

+ +
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
+
+ +

Private instance methods

+ +

Private instance methods are methods available on class instances whose access is restricted in the same manner as private instance fields.

+ +
class ClassWithPrivateMethod {
+  #privateMethod() {
+    return 'hello world'
+  }
+
+  getPrivateMessage() {
+      return this.#privateMethod()
+  }
+}
+
+const instance = new ClassWithPrivateMethod()
+console.log(instance.getPrivateMessage())
+// expected output: "hello worl​d"
+ +

Private instance methods may be generator, async, or async generator functions. Private getters and setters are also possible:

+ +
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✨"
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
FieldDefinition productionStage 3
+ +

Browser compatibility

+ +

Public class fields

+ + + +

{{Compat("javascript.classes.public_class_fields")}}

+ +

Private class fields

+ + + +

{{Compat("javascript.classes.private_class_fields")}}

+ +

See also

+ + diff --git a/files/ko/web/javascript/reference/functions/arrow_functions/index.html b/files/ko/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..02dc0d55e4 --- /dev/null +++ b/files/ko/web/javascript/reference/functions/arrow_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 +--- +
{{jsSidebar("Functions")}}
+ +

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

+ +

{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}

+ +

구문

+ +

기본 구문

+ +
(param1, param2, …, paramN) => { statements }
+(param1, param2, …, paramN) => expression
+// 다음과 동일함:  => { return expression; }
+
+// 매개변수가 하나뿐인 경우 괄호는 선택사항:
+(singleParam) => { statements }
+singleParam => { statements }
+
+// 매개변수가 없는 함수는 괄호가 필요:
+() => { statements }
+ +

고급 구문

+ +
// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
+params => ({foo: bar})
+
+// 나머지 매개변수 및 기본 매개변수를 지원함
+(param1, param2, ...rest) => { statements }
+(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
+
+// 매개변수 목록 내 구조분해할당도 지원됨
+var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
+f();  // 6
+
+ +

상세한 구문 예는 여기에서 볼 수 있습니다.

+ +

설명

+ +

Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트 참조.

+ +

화살표 함수 도입에 영향을 준 두 요소: 보다 짧아진 함수 및  바인딩하지 않은 this.

+ +

짧은 함수

+ +

일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요:

+ +
var elements = [
+  'Hydrogen',
+  'Helium',
+  'Lithium',
+  'Beryllium'
+];
+
+// 이 문장은 배열을 반환함: [8, 6, 7, 9]
+elements.map(function(element) {
+  return element.length;
+});
+
+// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
+elements.map((element) => {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
+elements.map(element => {
+  return element.length;
+}); // [8, 6, 7, 9]
+
+// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
+// 중괄호({})를 생략할 수 있다.
+elements.map(element => element.length); // [8, 6, 7, 9]
+
+// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
+// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
+// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
+// 원하는 유효한 변수명으로 변경할 수 있다.
+elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
+
+// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
+// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
+// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
+elements.map(({ length }) => length); // [8, 6, 7, 9]
+ +

바인딩 되지 않은 this

+ +

화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라  자신의 this 값을 정의했습니다:

+ +
    +
  • 이 함수가 생성자인 경우는 새로운 객체
    • +
  • 엄격 모드 함수 호출에서는 undefined 
    • +
  • 함수가 "객체 메서드"로서 호출된 경우 문맥 객체
    • +
  • 등등
    • +
+ +

이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.

+ +
function Person() {
+  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
+  this.age = 0;
+
+  setInterval(function growUp() {
+    // 비엄격 모드에서, growUp() 함수는 `this`를
+    // 전역 객체로 정의하고, 이는 Person() 생성자에
+    // 정의된 `this`와 다름.
+    this.age++;
+  }, 1000);
+}
+
+var p = new Person();
+ +

ECMAScript 3/5 에서는, 이 문제를 this 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했습니다.

+ +
function Person() {
+  var that = this;
+  that.age = 0;
+
+  setInterval(function growUp() {
+    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
+    that.age++;
+  }, 1000);
+}
+ +

이렇게 하는 대신에, 바인딩한 함수는 적절한 this 값이 growUp() 함수에 전달될 수 있도록 생성될 수 있습니다.

+ +

화살표 함수는 자신의 this가 없습니다.  대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 됩니다.

+ +

따라서 다음 코드에서 setInterval에 전달 된 함수 내부의 this는 setInterval을 포함한 function의 this와 동일한 값을 갖습니다.

+ +
function Person(){
+  this.age = 0;
+
+  setInterval(() => {
+    this.age++; // |this|는 Person 객체를 참조
+  }, 1000);
+}
+
+var p = new Person();
+ +

엄격 모드와의 관계

+ +

this가 렉시컬(lexical, 정적)임을 감안하면, this에 관한 엄격 모드 규칙은 그냥 무시됩니다.

+ +
var f = () => { 'use strict'; return this; };
+f() === window; // 혹은 전역객체
+ +

엄격 모드의 나머지 규칙은 평소대로 적용합니다.

+ +

CORRECTION: START

+ +

NOTE: the previous statement seems false.

+ +

Strict mode should prevent creating global variables when assigning to an undeclared identifier in a function.

+ +

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):

+ +
> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
+x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
+
+> y
+VM51587:1 Uncaught ReferenceError: y is not defined
+    at <anonymous>:1:1
+(anonymous) @ VM51587:1
+
+> f1(3)
+VM51533:1 x: 3, y: 3
+4
+
+> y
+3
+
+> f2 = x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
+x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
+
+> z
+VM51757:1 Uncaught ReferenceError: z is not defined
+    at <anonymous>:1:1
+(anonymous) @ VM51757:1
+
+> f2(4)
+VM51712:1 Uncaught ReferenceError: z is not defined
+    at f2 (<anonymous>:1:29)
+    at <anonymous>:1:1
+f2 @ VM51712:1
+(anonymous) @ VM51800:1
+
+> f3 = x => (z1 = x + 1)
+x => (z1 = x + 1)
+
+> z1
+VM51891:1 Uncaught ReferenceError: z1 is not defined
+    at <anonymous>:1:1
+(anonymous) @ VM51891:1
+
+> f3(10)
+11
+
+> z1
+11
+
+ +

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.

+ +

https://www.ecma-international.org/ecma-262/10.0/index.html#sec-strict-mode-code

+ +

https://www.ecma-international.org/ecma-262/10.0/index.html#sec-arrow-function-definitions-runtime-semantics-evaluation

+ +

CORRECTION: END

+ +

call 또는 apply를 통한 피호출

+ +

화살표 함수에서는 this가 바인딩되지 않았기 때문에, call() 또는 apply() 메서드는  인자만 전달 할 수 있습니다. this는 무시됩니다.

+ +
var adder = {
+  base : 1,
+
+  add : function(a) {
+    var f = v => v + this.base;
+    return f(a);
+  },
+
+  addThruCall: function(a) {
+    var f = v => v + this.base;
+    var b = {
+      base : 2
+    };
+
+    return f.call(b, a);
+  }
+};
+
+console.log(adder.add(1));         // 이는 2가 콘솔에 출력될 것임
+console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임
+ +

바인딩 되지 않은 arguments

+ +

화살표 함수는 arguments 객체를 바인드 하지 않습니다.  때문에, arguments는  그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.

+ +
var arguments = [1, 2, 3];
+var arr = () => arguments[0];
+
+arr(); // 1
+
+function foo(n) {
+  var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
+  return f();
+}
+
+foo(1); // 2
+ +

화살표 함수는 자신의 arguments 객체가 없지만, 대부분의 경우에 나머지 매개변수가 좋은 대안입니다:

+ +
function foo(n) {
+  var f = (...args) => args[0] + n;
+  return f(2);
+}
+
+foo(1); // 3
+ +

메소드로 사용되는 화살표 함수

+ +

이야기 했듯이, 화살표 함수 표현은 메소드 함수가 아닌 형태로 사용 할 수 있습니다. 메소드로 사용하려고 한면 무슨일이 발생하는지 봅시다.

+ +
'use strict';
+
+var obj = { // does not create a new scope
+  i: 10,
+  b: () => 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 {...}
+
+ +

화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.{{jsxref("Object.defineProperty()")}}

+ +
'use strict';
+
+var obj = {
+  a: 10
+};
+
+Object.defineProperty(obj, 'b', {
+  get: () => {
+    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'
+  }
+});
+ +

new 연산자 사용

+ +

화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

+ +
var Foo = () => {};
+var foo = new Foo(); // TypeError: Foo is not a constructor
+ +

prototype 속성 사용

+ +

화살표 함수는 prototype 속성이 없습니다.

+ +
var Foo = () => {};
+console.log(Foo.prototype); // undefined
+ +

yield 키워드 사용

+ +

yield 키워드는 화살표 함수의 본문(그 안에 더 중첩된 함수 내에서 허용한 경우를 제외하고)에 사용될 수 없습니다. 그 결과, 화살표 함수는 생성기(generator)로서 사용될 수 없습니다.

+ +

함수 본문

+ +

화살표 함수는 "concise 바디"든 보통 "block 바디"든 하나를 가질 수 있습니다.

+ +
+

concise바디는 중괄호'{}'로 묶이지않은 한줄짜리 바디이고 block바디는 중괄호로 묶인 바디입니다. 보통 여러줄 쓸때 block바디를 사용합니다.

+
+ +

block바디는 자동으로 값을 반환하지 않습니다. return을 사용해서 값을 반환해야 합니다.

+ +
var func = x => x * x;                  // concise 바디, 생략된 "return" 여기서는 x * x
+var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요
+
+ +

객체 리터럴 반환

+ +

간결한 구문 params => {object:literal}을 사용한 객체 리터럴 반환은 예상대로 작동하지 않음을 명심하세요:

+ +
var func = () => {  foo: 1  };
+// func() 호출은 undefined를 반환!
+
+var func = () => {  foo: function() {}  };
+// SyntaxError: function 문은 이름이 필요함
+ +

이는 중괄호({}) 안 코드가 일련의 문(즉 foo는 라벨처럼 취급됩니다, 객체 리터럴 내 키가 아니라)으로 파싱(parse, 구문 분석)되기 때문입니다.

+ +

객체 리터럴를 괄호로 감싸는 것을 기억하세요:

+ +
var func = () => ({ foo: 1 });
+ +

줄바꿈

+ +

화살표 함수는 파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.

+ +
var func = (a, b, c)
+           => 1;
+// SyntaxError: expected expression, got '=>'
+ +

하지만, 보기 좋은 코드를 유지하고 싶다면, 아래에 보는 것처럼 괄호나 개행을 둠으로써 이를 수정할 수 있습니다.

+ +
var func = (a, b, c) =>
+  1;
+
+var func = (a, b, c) => (
+  1
+);
+
+var func = (a, b, c) => {
+  return 1
+};
+
+var func = (
+  a,
+  b,
+  c
+) => 1;
+
+// SyntaxError가 발생하지 않습니다.
+ +

파싱순서

+ +

화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 operator precedence와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.

+ +
let callback;
+
+callback = callback || function() {}; // ok
+
+callback = callback || () => {};
+// SyntaxError: invalid arrow-function arguments
+
+callback = callback || (() => {});    // ok
+
+ +

다른 예

+ +

기본 사용법

+ +
//  empty 화살표 함수는 undefined를 반환 
+let empty = () => {};
+
+(() => 'foobar')();
+// "foobar" 반환
+// (this is an Immediately Invoked Function Expression
+
+var simple = a => a > 15 ? 15 : a;
+simple(16); // 15
+simple(10); // 10
+
+let max = (a, b) => a > b ? a : b;
+
+// Easy array filtering, mapping, ...
+
+var arr = [5, 6, 13, 0, 1, 18, 23];
+
+var sum = arr.reduce((a, b) => a + b);
+// 66
+
+var even = arr.filter(v => v % 2 == 0);
+// [6, 0, 18]
+
+var double = arr.map(v => v * 2);
+// [10, 12, 26, 0, 2, 36, 46]
+
+// 더 간결한 promise 체인
+promise.then(a => {
+  // ...
+}).then(b => {
+  // ...
+});
+
+// 매개변수가 없는 경우에도 더 읽기 쉬움
+setTimeout( () => {
+  console.log('I happen sooner');
+  setTimeout( () => {
+    // deeper code
+    console.log('I happen later');
+  }, 1);
+}, 1);
+ +

스펙

+ + + + + + + + + + +
Specification
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}
+ +

브라우저 호환성

+ + + +

{{Compat("javascript.functions.arrow_functions")}}

+ +

참조

+ + diff --git "a/files/ko/web/javascript/reference/functions/\354\225\240\353\241\234\354\232\260_\355\216\221\354\205\230/index.html" "b/files/ko/web/javascript/reference/functions/\354\225\240\353\241\234\354\232\260_\355\216\221\354\205\230/index.html" deleted file mode 100644 index 02dc0d55e4..0000000000 --- "a/files/ko/web/javascript/reference/functions/\354\225\240\353\241\234\354\232\260_\355\216\221\354\205\230/index.html" +++ /dev/null @@ -1,465 +0,0 @@ ---- -title: 화살표 함수 -slug: Web/JavaScript/Reference/Functions/애로우_펑션 -tags: - - ECMAScript6 - - Functions - - Intermediate - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Functions/Arrow_functions ---- -
{{jsSidebar("Functions")}}
- -

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고  자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다. 화살표 함수는 항상 익명입니다. 이  함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다. 그래서 생성자로서 사용할 수 없습니다.

- -

{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}

- -

구문

- -

기본 구문

- -
(param1, param2, …, paramN) => { statements }
-(param1, param2, …, paramN) => expression
-// 다음과 동일함:  => { return expression; }
-
-// 매개변수가 하나뿐인 경우 괄호는 선택사항:
-(singleParam) => { statements }
-singleParam => { statements }
-
-// 매개변수가 없는 함수는 괄호가 필요:
-() => { statements }
- -

고급 구문

- -
// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
-params => ({foo: bar})
-
-// 나머지 매개변수 및 기본 매개변수를 지원함
-(param1, param2, ...rest) => { statements }
-(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
-
-// 매개변수 목록 내 구조분해할당도 지원됨
-var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
-f();  // 6
-
- -

상세한 구문 예는 여기에서 볼 수 있습니다.

- -

설명

- -

Hacks 블로그 "ES6 In Depth: Arrow functions" 포스트 참조.

- -

화살표 함수 도입에 영향을 준 두 요소: 보다 짧아진 함수 및  바인딩하지 않은 this.

- -

짧은 함수

- -

일부 함수 패턴에서는, 짧은 함수가 환영받습니다. 비교해 보세요:

- -
var elements = [
-  'Hydrogen',
-  'Helium',
-  'Lithium',
-  'Beryllium'
-];
-
-// 이 문장은 배열을 반환함: [8, 6, 7, 9]
-elements.map(function(element) {
-  return element.length;
-});
-
-// 위의 일반적인 함수 표현은 아래 화살표 함수로 쓸 수 있다.
-elements.map((element) => {
-  return element.length;
-}); // [8, 6, 7, 9]
-
-// 파라미터가 하나만 있을 때는 주변 괄호를 생략할 수 있다.
-elements.map(element => {
-  return element.length;
-}); // [8, 6, 7, 9]
-
-// 화살표 함수의 유일한 문장이 'return'일 때 'return'과
-// 중괄호({})를 생략할 수 있다.
-elements.map(element => element.length); // [8, 6, 7, 9]
-
-// 이 경우 length 속성만 필요하므로 destructuring 매개변수를 사용할 수 있다.
-// 'length'는 우리가 얻고자 하는 속성에 해당하는 반면,
-// lengthFooBArX'는 변경 가능한 변수의 이름일 뿐이므로
-// 원하는 유효한 변수명으로 변경할 수 있다.
-elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
-
-// destructuring 파라미터 할당도 아래와 같이 작성할 수 있습니다.
-// 이 예에서 정의한 객체내의 'length'에 값을 지정하지 않은 점에 주목하세요. 대신, "length" 변수의
-// 리터럴 이름은 우리가 해당 객체에서 꺼내오고 싶은 속성이름 자체로 사용됩니다.
-elements.map(({ length }) => length); // [8, 6, 7, 9]
- -

바인딩 되지 않은 this

- -

화살표 함수가 나오기 전까지는, 모든 새로운 함수는, 어떻게 그 함수가 호출되는지에 따라  자신의 this 값을 정의했습니다:

- -
    -
  • 이 함수가 생성자인 경우는 새로운 객체
    • -
  • 엄격 모드 함수 호출에서는 undefined 
    • -
  • 함수가 "객체 메서드"로서 호출된 경우 문맥 객체
    • -
  • 등등
    • -
- -

이는 객체 지향 스타일로 프로그래밍할 때 별로 좋지않습니다.

- -
function Person() {
-  // Person() 생성자는 `this`를 자신의 인스턴스로 정의.
-  this.age = 0;
-
-  setInterval(function growUp() {
-    // 비엄격 모드에서, growUp() 함수는 `this`를
-    // 전역 객체로 정의하고, 이는 Person() 생성자에
-    // 정의된 `this`와 다름.
-    this.age++;
-  }, 1000);
-}
-
-var p = new Person();
- -

ECMAScript 3/5 에서는, 이 문제를 this 값을 폐쇄될 수 있는 (비전역) 변수에 할당하여 해결했습니다.

- -
function Person() {
-  var that = this;
-  that.age = 0;
-
-  setInterval(function growUp() {
-    // 콜백은  `that` 변수를 참조하고 이것은 값이 기대한 객체이다.
-    that.age++;
-  }, 1000);
-}
- -

이렇게 하는 대신에, 바인딩한 함수는 적절한 this 값이 growUp() 함수에 전달될 수 있도록 생성될 수 있습니다.

- -

화살표 함수는 자신의 this가 없습니다.  대신 화살표 함수를 둘러싸는 렉시컬 범위(lexical scope)의 this가 사용됩니다; 화살표 함수는 일반 변수 조회 규칙(normal variable lookup rules)을 따릅니다. 때문에 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수는 바로 바깥 범위에서 this를 찾는것으로 검색을 끝내게 됩니다.

- -

따라서 다음 코드에서 setInterval에 전달 된 함수 내부의 this는 setInterval을 포함한 function의 this와 동일한 값을 갖습니다.

- -
function Person(){
-  this.age = 0;
-
-  setInterval(() => {
-    this.age++; // |this|는 Person 객체를 참조
-  }, 1000);
-}
-
-var p = new Person();
- -

엄격 모드와의 관계

- -

this가 렉시컬(lexical, 정적)임을 감안하면, this에 관한 엄격 모드 규칙은 그냥 무시됩니다.

- -
var f = () => { 'use strict'; return this; };
-f() === window; // 혹은 전역객체
- -

엄격 모드의 나머지 규칙은 평소대로 적용합니다.

- -

CORRECTION: START

- -

NOTE: the previous statement seems false.

- -

Strict mode should prevent creating global variables when assigning to an undeclared identifier in a function.

- -

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):

- -
> f1 = x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
-x => { y = x; console.log(`x: ${x}, y: ${y}`); return x + 1; }
-
-> y
-VM51587:1 Uncaught ReferenceError: y is not defined
-    at <anonymous>:1:1
-(anonymous) @ VM51587:1
-
-> f1(3)
-VM51533:1 x: 3, y: 3
-4
-
-> y
-3
-
-> f2 = x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
-x => { 'use strict'; z = x; console.log(`x: ${x}, z: ${z}`); return x + 1; }
-
-> z
-VM51757:1 Uncaught ReferenceError: z is not defined
-    at <anonymous>:1:1
-(anonymous) @ VM51757:1
-
-> f2(4)
-VM51712:1 Uncaught ReferenceError: z is not defined
-    at f2 (<anonymous>:1:29)
-    at <anonymous>:1:1
-f2 @ VM51712:1
-(anonymous) @ VM51800:1
-
-> f3 = x => (z1 = x + 1)
-x => (z1 = x + 1)
-
-> z1
-VM51891:1 Uncaught ReferenceError: z1 is not defined
-    at <anonymous>:1:1
-(anonymous) @ VM51891:1
-
-> f3(10)
-11
-
-> z1
-11
-
- -

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.

- -

https://www.ecma-international.org/ecma-262/10.0/index.html#sec-strict-mode-code

- -

https://www.ecma-international.org/ecma-262/10.0/index.html#sec-arrow-function-definitions-runtime-semantics-evaluation

- -

CORRECTION: END

- -

call 또는 apply를 통한 피호출

- -

화살표 함수에서는 this가 바인딩되지 않았기 때문에, call() 또는 apply() 메서드는  인자만 전달 할 수 있습니다. this는 무시됩니다.

- -
var adder = {
-  base : 1,
-
-  add : function(a) {
-    var f = v => v + this.base;
-    return f(a);
-  },
-
-  addThruCall: function(a) {
-    var f = v => v + this.base;
-    var b = {
-      base : 2
-    };
-
-    return f.call(b, a);
-  }
-};
-
-console.log(adder.add(1));         // 이는 2가 콘솔에 출력될 것임
-console.log(adder.addThruCall(1)); // 이도 2가 콘솔에 출력될 것임
- -

바인딩 되지 않은 arguments

- -

화살표 함수는 arguments 객체를 바인드 하지 않습니다.  때문에, arguments는  그저 둘러싸는 범위(scope) 내 이름에 대한 참조입니다.

- -
var arguments = [1, 2, 3];
-var arr = () => arguments[0];
-
-arr(); // 1
-
-function foo(n) {
-  var f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n
-  return f();
-}
-
-foo(1); // 2
- -

화살표 함수는 자신의 arguments 객체가 없지만, 대부분의 경우에 나머지 매개변수가 좋은 대안입니다:

- -
function foo(n) {
-  var f = (...args) => args[0] + n;
-  return f(2);
-}
-
-foo(1); // 3
- -

메소드로 사용되는 화살표 함수

- -

이야기 했듯이, 화살표 함수 표현은 메소드 함수가 아닌 형태로 사용 할 수 있습니다. 메소드로 사용하려고 한면 무슨일이 발생하는지 봅시다.

- -
'use strict';
-
-var obj = { // does not create a new scope
-  i: 10,
-  b: () => 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 {...}
-
- -

화살표 함수는 자신의 this를 가지고("bind" 바인드)있지 않습니다.{{jsxref("Object.defineProperty()")}}

- -
'use strict';
-
-var obj = {
-  a: 10
-};
-
-Object.defineProperty(obj, 'b', {
-  get: () => {
-    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'
-  }
-});
- -

new 연산자 사용

- -

화살표 함수는 생성자로서 사용될 수 없으며 new와 함께 사용하면 오류가 발생합니다.

- -
var Foo = () => {};
-var foo = new Foo(); // TypeError: Foo is not a constructor
- -

prototype 속성 사용

- -

화살표 함수는 prototype 속성이 없습니다.

- -
var Foo = () => {};
-console.log(Foo.prototype); // undefined
- -

yield 키워드 사용

- -

yield 키워드는 화살표 함수의 본문(그 안에 더 중첩된 함수 내에서 허용한 경우를 제외하고)에 사용될 수 없습니다. 그 결과, 화살표 함수는 생성기(generator)로서 사용될 수 없습니다.

- -

함수 본문

- -

화살표 함수는 "concise 바디"든 보통 "block 바디"든 하나를 가질 수 있습니다.

- -
-

concise바디는 중괄호'{}'로 묶이지않은 한줄짜리 바디이고 block바디는 중괄호로 묶인 바디입니다. 보통 여러줄 쓸때 block바디를 사용합니다.

-
- -

block바디는 자동으로 값을 반환하지 않습니다. return을 사용해서 값을 반환해야 합니다.

- -
var func = x => x * x;                  // concise 바디, 생략된 "return" 여기서는 x * x
-var func = (x, y) => { return x + y; }; // block 바디, "return"이 필요
-
- -

객체 리터럴 반환

- -

간결한 구문 params => {object:literal}을 사용한 객체 리터럴 반환은 예상대로 작동하지 않음을 명심하세요:

- -
var func = () => {  foo: 1  };
-// func() 호출은 undefined를 반환!
-
-var func = () => {  foo: function() {}  };
-// SyntaxError: function 문은 이름이 필요함
- -

이는 중괄호({}) 안 코드가 일련의 문(즉 foo는 라벨처럼 취급됩니다, 객체 리터럴 내 키가 아니라)으로 파싱(parse, 구문 분석)되기 때문입니다.

- -

객체 리터럴를 괄호로 감싸는 것을 기억하세요:

- -
var func = () => ({ foo: 1 });
- -

줄바꿈

- -

화살표 함수는 파라메터와 화살표 사이에 개행 문자를 포함 할 수 없습니다.

- -
var func = (a, b, c)
-           => 1;
-// SyntaxError: expected expression, got '=>'
- -

하지만, 보기 좋은 코드를 유지하고 싶다면, 아래에 보는 것처럼 괄호나 개행을 둠으로써 이를 수정할 수 있습니다.

- -
var func = (a, b, c) =>
-  1;
-
-var func = (a, b, c) => (
-  1
-);
-
-var func = (a, b, c) => {
-  return 1
-};
-
-var func = (
-  a,
-  b,
-  c
-) => 1;
-
-// SyntaxError가 발생하지 않습니다.
- -

파싱순서

- -

화살표 함수 내의 화살표는 연산자가 아닙니다. 그러나 화살표 함수는 평범한 함수와 비교했을 때 operator precedence와 다르게 반응하는 특별한 파싱룰을 가지고 있습니다.

- -
let callback;
-
-callback = callback || function() {}; // ok
-
-callback = callback || () => {};
-// SyntaxError: invalid arrow-function arguments
-
-callback = callback || (() => {});    // ok
-
- -

다른 예

- -

기본 사용법

- -
//  empty 화살표 함수는 undefined를 반환 
-let empty = () => {};
-
-(() => 'foobar')();
-// "foobar" 반환
-// (this is an Immediately Invoked Function Expression
-
-var simple = a => a > 15 ? 15 : a;
-simple(16); // 15
-simple(10); // 10
-
-let max = (a, b) => a > b ? a : b;
-
-// Easy array filtering, mapping, ...
-
-var arr = [5, 6, 13, 0, 1, 18, 23];
-
-var sum = arr.reduce((a, b) => a + b);
-// 66
-
-var even = arr.filter(v => v % 2 == 0);
-// [6, 0, 18]
-
-var double = arr.map(v => v * 2);
-// [10, 12, 26, 0, 2, 36, 46]
-
-// 더 간결한 promise 체인
-promise.then(a => {
-  // ...
-}).then(b => {
-  // ...
-});
-
-// 매개변수가 없는 경우에도 더 읽기 쉬움
-setTimeout( () => {
-  console.log('I happen sooner');
-  setTimeout( () => {
-    // deeper code
-    console.log('I happen later');
-  }, 1);
-}, 1);
- -

스펙

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}
- -

브라우저 호환성

- - - -

{{Compat("javascript.functions.arrow_functions")}}

- -

참조

- - diff --git a/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html b/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html deleted file mode 100644 index 6ba56eb37e..0000000000 --- a/files/ko/web/javascript/reference/global_objects/bigint/prototype/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: BigInt.prototype -slug: Web/JavaScript/Reference/Global_Objects/BigInt/prototype -tags: - - BigInt - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/BigInt/prototype ---- -
{{JSRef}}
- -

BigInt.prototype 속성은 {{jsxref("BigInt")}} 생성자의 프로토타입을 나타냅니다.

- -

{{js_property_attributes(0, 0, 0)}}

- -

설명

- -

모든 {{jsxref("BigInt")}} 인스턴스는 BigInt.prototype을 상속합니다. BigInt 생성자의 프로토타입 객체를 변형해 모든 BigInt 인스턴스에 영향을 줄 수 있습니다.

- -

속성

- -
-
BigInt.prototype.constructor
-
이 객체의 인스턴스를 만들 때 사용한 함수를 반환합니다. 기본값은 {{jsxref("BigInt")}} 객체입니다.
-
- -

메서드

- -
-
BigInt.prototype.toLocaleString()
-
BigInt를 주어진 언어에 적합한 형태를 가진 문자열로 변환해 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
-
BigInt.prototype.toString()
-
BigInt의 값을 주어진 진수로 표현한 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
-
BigInt.prototype.valueOf()
-
BigInt 객체의 원시 값 표현을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.
-
- -

명세

- - - - - - - - - - - - -
SpecificationStatus
BigInt.prototypeStage 3
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.BigInt.prototype")}}

diff --git a/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html b/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html deleted file mode 100644 index 6e90207661..0000000000 --- a/files/ko/web/javascript/reference/global_objects/boolean/prototype/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype -tags: - - Boolean - - JavaScript - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Boolean -translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---- -
{{JSRef}}
- -

Boolean.prototype 속성은 {{jsxref("Boolean")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -
{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}
- - - -

설명

- -

{{jsxref("Boolean")}} 인스턴스는 Boolean.prototype을 상속받습니다. 생성자의 프로토타입 객체를 사용해 모든 Boolean 인스턴스에 속성이나 메서드를 추가할 수 있습니다.

- -

속성

- -
-
Boolean.prototype.constructor
-
인스턴스의 프로토타입을 생성한 함수를 반환합니다. 기본값은 {{jsxref("Boolean")}} 함수입니다.
-
- -

메서드

- -
-
{{jsxref("Boolean.prototype.toSource()")}} {{non-standard_inline}}
-
{{jsxref("Boolean")}} 객체의 소스를 포함한 문자열을 반환합니다. 반환 문자열을 사용해 동일한 객체를 생성할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.
-
{{jsxref("Boolean.prototype.toString()")}}
-
객체의 값에 따라 문자열 "true" 또는 "false"를 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
-
{{jsxref("Boolean.prototype.valueOf()")}}
-
{{jsxref("Boolean")}} 객체의 원시 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 재정의합니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.0.
{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Boolean.prototype")}}

diff --git a/files/ko/web/javascript/reference/global_objects/date/prototype/index.html b/files/ko/web/javascript/reference/global_objects/date/prototype/index.html deleted file mode 100644 index 06e1bba5f7..0000000000 --- a/files/ko/web/javascript/reference/global_objects/date/prototype/index.html +++ /dev/null @@ -1,183 +0,0 @@ ---- -title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype -tags: - - Date - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Date -translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype ---- -
{{JSRef}}
- -

Date.prototype 속성은 {{jsxref("Date")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 1)}}
- -

설명

- -

JavaScript {{jsxref("Date")}} 인스턴스는 Date.prototype을 상속합니다. 생성자의 프로토타입을 변경해 모든 Date 인스턴스의 속성과 메서드를 수정할 수 있습니다.

- -

2000년대 달력과의 호환성을 위해 연도는 언제나 완전하게 네 자리 숫자로 작성해야 합니다. 즉 98 대신 1998이 올바른 작성법입니다. Date는 완전한 연도 설정에 도움이 될 {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}, {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}}, {{jsxref("Date.prototype.getUTCFullYear()", "getUTCFullYear()")}}, {{jsxref("Date.prototype.setUTCFullYear()", "setUTCFullYear()")}} 메서드를 가지고 있습니다.

- -

ECMAScript 6부터 Date.prototype은 {{jsxref("Date")}} 인스턴스가 아닌 평범한 객체입니다.

- -

속성

- -
-
Date.prototype.constructor
-
인스턴스 생성에 사용한 생성자를 반환합니다. 기본값은 {{jsxref("Date")}}입니다.
-
- -

메서드

- -

접근자

- -
-
{{jsxref("Date.prototype.getDate()")}}
-
주어진 날짜의 일(1-31)을 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getDay()")}}
-
주어진 날짜의 요일(0-6)을 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getFullYear()")}}
-
주어진 날짜의 연도(4자리 수)를 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getHours()")}}
-
주어진 날짜의 시(0-23)를 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getMilliseconds()")}}
-
주어진 날짜의 밀리초(0-999)를 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getMinutes()")}}
-
주어진 날짜의 분(0-59)을 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getMonth()")}}
-
주어진 날짜의 월(0-11)을 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getSeconds()")}}
-
주어진 날짜의 초(0-59)를 현지 시간에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getTime()")}}
-
주어진 날짜와 1970년 1월 1일 0시 0분(UTC)의 차이를 밀리초로 반환합니다.
-
{{jsxref("Date.prototype.getTimezoneOffset()")}}
-
현재 로케일의 시간대 차이를 분으로 환산해 반환합니다.
-
{{jsxref("Date.prototype.getUTCDate()")}}
-
주어진 날짜의 일(1-31)을 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCDay()")}}
-
주어진 날짜의 요일(0-6)을 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCFullYear()")}}
-
주어진 날짜의 연도(4자리 수)를 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCHours()")}}
-
주어진 날짜의 시(0-23)를 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCMilliseconds()")}}
-
주어진 날짜의 밀리초(0-999)를 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCMinutes()")}}
-
주어진 날짜의 분(0-59)을 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCMonth()")}}
-
주어진 날짜의 월(0-11)을 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getUTCSeconds()")}}
-
주어진 날짜의 초(0-59)를 UTC에 맞춰 반환합니다.
-
{{jsxref("Date.prototype.getYear()")}} {{deprecated_inline}}
-
주어진 날짜의 연도(주로 두세자리 숫자)를 현지 시간에 맞춰 반환합니다. {{jsxref("Date.prototype.getFullYear()", "getFullYear()")}}를 사용하세요.
-
- -

설정자

- -
-
{{jsxref("Date.prototype.setDate()")}}
-
Sets the day of the month for a specified date according to local time.
-
{{jsxref("Date.prototype.setFullYear()")}}
-
Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to local time.
-
{{jsxref("Date.prototype.setHours()")}}
-
Sets the hours for a specified date according to local time.
-
{{jsxref("Date.prototype.setMilliseconds()")}}
-
Sets the milliseconds for a specified date according to local time.
-
{{jsxref("Date.prototype.setMinutes()")}}
-
Sets the minutes for a specified date according to local time.
-
{{jsxref("Date.prototype.setMonth()")}}
-
Sets the month for a specified date according to local time.
-
{{jsxref("Date.prototype.setSeconds()")}}
-
Sets the seconds for a specified date according to local time.
-
{{jsxref("Date.prototype.setTime()")}}
-
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.
-
{{jsxref("Date.prototype.setUTCDate()")}}
-
Sets the day of the month for a specified date according to universal time.
-
{{jsxref("Date.prototype.setUTCFullYear()")}}
-
Sets the full year (e.g. 4 digits for 4-digit years) for a specified date according to universal time.
-
{{jsxref("Date.prototype.setUTCHours()")}}
-
Sets the hour for a specified date according to universal time.
-
{{jsxref("Date.prototype.setUTCMilliseconds()")}}
-
Sets the milliseconds for a specified date according to universal time.
-
{{jsxref("Date.prototype.setUTCMinutes()")}}
-
Sets the minutes for a specified date according to universal time.
-
{{jsxref("Date.prototype.setUTCMonth()")}}
-
Sets the month for a specified date according to universal time.
-
{{jsxref("Date.prototype.setUTCSeconds()")}}
-
Sets the seconds for a specified date according to universal time.
-
{{jsxref("Date.prototype.setYear()")}} {{deprecated_inline}}
-
Sets the year (usually 2-3 digits) for a specified date according to local time. Use {{jsxref("Date.prototype.setFullYear()", "setFullYear()")}} instead.
-
- -

변환 접근자

- -
-
{{jsxref("Date.prototype.toDateString()")}}
-
Returns the "date" portion of the {{jsxref("Date")}} as a human-readable string like 'Thu Apr 12 2018'
-
{{jsxref("Date.prototype.toISOString()")}}
-
Converts a date to a string following the ISO 8601 Extended Format.
-
{{jsxref("Date.prototype.toJSON()")}}
-
Returns a string representing the {{jsxref("Date")}} using {{jsxref("Date.prototype.toISOString()", "toISOString()")}}. Intended for use by {{jsxref("JSON.stringify()")}}.
-
{{jsxref("Date.prototype.toGMTString()")}} {{deprecated_inline}}
-
Returns a string representing the {{jsxref("Date")}} based on the GMT (UT) time zone. Use {{jsxref("Date.prototype.toUTCString()", "toUTCString()")}} instead.
-
{{jsxref("Date.prototype.toLocaleDateString()")}}
-
Returns a string with a locality sensitive representation of the date portion of this date based on system settings.
-
{{jsxref("Date.prototype.toLocaleFormat()")}} {{non-standard_inline}}
-
Converts a date to a string, using a format string.
-
{{jsxref("Date.prototype.toLocaleString()")}}
-
Returns a string with a locality sensitive representation of this date. Overrides the {{jsxref("Object.prototype.toLocaleString()")}} method.
-
{{jsxref("Date.prototype.toLocaleTimeString()")}}
-
Returns a string with a locality sensitive representation of the time portion of this date based on system settings.
-
{{jsxref("Date.prototype.toSource()")}} {{non-standard_inline}}
-
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.
-
{{jsxref("Date.prototype.toString()")}}
-
Returns a string representing the specified {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.toString()")}} method.
-
{{jsxref("Date.prototype.toTimeString()")}}
-
Returns the "time" portion of the {{jsxref("Date")}} as a human-readable string.
-
{{jsxref("Date.prototype.toUTCString()")}}
-
Converts a date to a string using the UTC timezone.
-
{{jsxref("Date.prototype.valueOf()")}}
-
Returns the primitive value of a {{jsxref("Date")}} object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Date.prototype")}}

diff --git a/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html deleted file mode 100644 index 6e13afb6db..0000000000 --- a/files/ko/web/javascript/reference/global_objects/internalerror/prototype/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/InternalError -translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---- -
{{JSRef}} {{non-standard_header}}
- -

InternalError.prototype 속성은 {{jsxref("InternalError")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

설명

- -

모든 {{jsxref("InternalError")}} 인스턴스는 InternalError.prototype 으로부터 상속받습니다. 프로토타입은 모든 인스턴스에 속성이나 메소드를 추가하거나 하는 데에 사용할 수 있습니다.

- -

속성

- -
-
InternalError.prototype.constructor
-
인스턴스의 프로토타입을 생성하는 함수를 명시합니다. 
-
{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}
-
에러 메시지. {{jsxref("Error")}} 로부터 상속받습니다. 
-
{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}
-
에러명. {{jsxref("Error")}} 로부터 상속받습니다.
-
{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}
-
에러를 발생시킨 파일의 경로. {{jsxref("Error")}} 로부터 상속받습니다.
-
{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}
-
에러를 발생시킨 파일의 라인 넘버. {{jsxref("Error")}} 로부터 상속받습니다.
-
{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}
-
에러를 발생 시킨 라인의 컬럼 넘버. {{jsxref("Error")}} 로부터 상속받습니다.
-
{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}
-
스택 트레이스. {{jsxref("Error")}} 로부터 상속받습니다. 
-
- -

메소드

- -

비록 {{jsxref("InternalError")}}의 프로토타입 객체는 고유의 메소드를 가지고 있지는 않습니다. 하지만, {{jsxref("InternalError")}} 인스턴스는 프로토타입 체인을 통해 몇 가지의 메소드를 상속 받습니다.

- -

스펙

- -

Not part of any specifications.

- -

브라우저 호환성

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
-
- -

참조

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html deleted file mode 100644 index 2f1b031b39..0000000000 --- a/files/ko/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype -tags: - - DateTimeFormat - - Internationalization - - Intl - - JavaScript - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---- -
{{JSRef}}
- -

Intl.DateTimeFormat.prototype 속성은 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

설명

- -

Intl.DateTimeFormat 인스턴스에 대한 설명은 {{jsxref("DateTimeFormat")}} 문서를 참고하세요.

- -

{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스는 Intl.DateTimeFormat.prototype을 상속합니다. 프로토타입 객체를 변경하면 모든 {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} 인스턴스가 영향을 받습니다.

- -

속성

- -
-
Intl.DateTimeFormat.prototype.constructor
-
{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}에 대한 참조입니다.
-
- -

메서드

- -
-
{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format()")}}
-
주어진 날짜에 {{jsxref("DateTimeFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.
-
- -
-
{{jsxref("DateTimeFormat.formatToParts", "Intl.DateTimeFormat.prototype.formatToParts()")}}
-
서식을 적용한 날짜 문자열의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.
-
{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}
-
객체 인스턴스 생성 때 주어진 로케일과 서식 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initial definition.
{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}{{Spec2('ES Int Draft')}}
- -

브라우저 호환성

- -
- - -

{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}

-
- -

같이 보기

- -
    -
  • {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html b/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html deleted file mode 100644 index fcbaa6c247..0000000000 --- a/files/ko/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype -tags: - - Internationalization - - Intl - - JavaScript - - NumberFormat - - Property - - Prototype -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat -translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---- -
{{JSRef}}
- -

Intl.NumberFormat.prototype 속성은 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

설명

- -

Intl.NumberFormat 인스턴스에 대한 설명은 {{jsxref("NumberFormat")}} 문서를 참고하세요.

- -

{{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스는 Intl.NumberFormat.prototype을 상속합니다. 프로토타입 객체를 변형하면 모든 {{jsxref("NumberFormat", "Intl.NumberFormat")}} 인스턴스가 영향을 받습니다.

- -

속성

- -
-
Intl.NumberFormat.prototype.constructor
-
Intl.NumberFormat에 대한 참조입니다.
-
- -

메서드

- -
-
{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format()")}}
-
주어진 숫자에 {{jsxref("NumberFormat")}} 객체의 로케일과 서식 설정을 적용해 반환합니다.
-
- -
-
{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}
-
서식을 적용한 숫자의 각 부분을 객체로 표현해서 {{jsxref("Array")}}로 반환합니다. 반환 값은 로케일별 커스텀 서식에 사용할 수 있습니다.
-
{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}
-
객체 인스턴스 생성 때 주어진 로케일과 콜레이션 설정이 어떻게 반영되었나 나타내는 새로운 객체를 반환합니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 1.0')}}Initial definition.
{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int 2.0')}}
{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}{{Spec2('ES Int Draft')}}
- -

브라우저 호환성

- -
- - -

{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}

-
- -

같이 보기

- -
    -
  • {{jsxref("NumberFormat", "Intl.NumberFormat")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/map/prototype/index.html b/files/ko/web/javascript/reference/global_objects/map/prototype/index.html deleted file mode 100644 index 3445bf2847..0000000000 --- a/files/ko/web/javascript/reference/global_objects/map/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Map - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Map -translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype ---- -
{{JSRef}}
- -

Map.prototype property는 {{jsxref("Map")}}의 프로토 타입을 나타낸다.

- -
{{js_property_attributes(0,0,0)}}
- -

Description

- -

{{jsxref("Map")}} instance는 {{jsxref("Map.prototype")}}를 상속한다. Constructor의 프로토타입에 property와 method를 추가함으로써 모든 Map 인스턴스에서 사용 가능하게끔 만들 수 있다.

- -

Properties

- -
-
Map.prototype.constructor
-
인스턴스의 프로토타입을 만드는 함수를 반환한다. 이것 {{jsxref("Map")}} 함수의 기본 값이다.
-
{{jsxref("Map.prototype.size")}}
-
Map 객체에 들어있는 key/value pair의 수를 반환한다.
-
- -

Methods

- -
-
{{jsxref("Map.prototype.clear()")}}
-
Map 객체의 모든 key/value pair를 제거한다.
-
{{jsxref("Map.delete", "Map.prototype.delete(key)")}}
-
주어진 키(Key)와 해당되는 값(Value)를 제거하고 제거하기 전에 Map.prototype.has(key)가 반환했던 값을 반환한다. 그 후의 Map.prototype.has(key)는 false를 반환한다.
-
{{jsxref("Map.prototype.entries()")}}
-
Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
-
{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}
-
Map 객체 안에 존재하는 각각의 key/value pair에 집어넣은 순서대로 callbackFn을 부른다. 만약 thisArg 매개변수가 제공되면, 이것이 각 callback의 this 값으로 사용된다.
-
{{jsxref("Map.get", "Map.prototype.get(key)")}}
-
주어진 키(Key)에 해당되는 값(value)을 반환하고, 만약 없으면 undefined를 반환한다.
-
{{jsxref("Map.has", "Map.prototype.has(key)")}}
-
Map 객체 안에 주어진 key/value pair가 있는지 검사하고 Boolean 값을 반환한다.
-
{{jsxref("Map.prototype.keys()")}}
-
Map 객체 안의 모든 키(Key)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
-
{{jsxref("Map.set", "Map.prototype.set(key, value)")}}
-
Map 객체에 주어진 키(Key)에 값(Value)를 집어넣고, Map 객체를 반환한다.
-
{{jsxref("Map.prototype.values()")}}
-
Map 객체 안의 모든 값(Value)들을 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
-
{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}
-
Map 객체 안의 모든 요소들을 [key, value] 형태의 array 로 집어넣은 순서대로 가지고 있는 Iterator 객체를 반환한다.
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -

{{Compat("javascript.builtins.Map.prototype")}}

- -

See also

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/number/prototype/index.html b/files/ko/web/javascript/reference/global_objects/number/prototype/index.html deleted file mode 100644 index 2bf39d20f9..0000000000 --- a/files/ko/web/javascript/reference/global_objects/number/prototype/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype -tags: - - JavaScript - - Number - - Property - - Prototype - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Number -translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype ---- -
{{JSRef}}
- -

Number.prototype 속성은 {{jsxref("Number")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

설명

- -

모든 {{jsxref("Number")}} 인스턴스는 Number.prototype을 상속합니다. {{jsxref("Number")}} 생성자의 프로토타입 객체는 모든 {{jsxref( "Number")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.

- -

속성

- -
-
Number.prototype.constructor
-
이 객체의 인스턴스를 생성한 함수를 반환합니다. 기본적으로 {{jsxref("Number")}} 객체 입니다.
-
- -

메서드

- -
-
{{jsxref("Number.prototype.toExponential()")}}
-
숫자의 지수표기법 표현을 문자열로 반환합니다.
-
{{jsxref("Number.prototype.toFixed()")}}
-
숫자의 고정소수점 표현을 문자열로 반환합니다.
-
{{jsxref("Number.prototype.toLocaleString()")}}
-
숫자의 표현을 특정 언어에 맞춘 형식의 문자열로 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 오버라이드 합니다.
-
{{jsxref("Number.prototype.toPrecision()")}}
-
지정한 정밀도로 숫자를 나타내는 문자열을 반환합니다. 고정소수점 혹은 지수표기법으로 표현합니다.
-
{{jsxref("Number.prototype.toSource()")}} {{non-standard_inline}}
-
지정한 {{jsxref("Number")}} 객체를 나타내는 객체 리터럴을 반환합니다. 이 값을 사용하여 새 객체를 만들 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 오버라이드 합니다.
-
{{jsxref("Number.prototype.toString()")}}
-
지정된 기수(기본 10진수)로 지정된 객체를 문자열로 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 오버라이드 합니다.
-
{{jsxref("Number.prototype.valueOf()")}}
-
지정한 객체의 기본 자료형(primitive) 값을 반환합니다. {{jsxref("Object.prototype.valueOf()")}} 메서드를 오버라이드 합니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition. Implemented in JavaScript 1.1.
{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Number.prototype")}}

- -

같이 보기

- -
    -
  • {{jsxref("Number")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/object/prototype/index.html b/files/ko/web/javascript/reference/global_objects/object/prototype/index.html deleted file mode 100644 index 8f7b08793f..0000000000 --- a/files/ko/web/javascript/reference/global_objects/object/prototype/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype -tags: - - JavaScript - - Object - - Property - - Reference - - 프로토타입 -translation_of: Web/JavaScript/Reference/Global_Objects/Object -translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype ---- -
{{JSRef}}
- -

Object.prototype 속성은 {{jsxref("Object")}} 프로토타입(원형) 객체를
- 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

설명

- -

JavaScript에서 거의 모든 객체는 {{jsxref("Object")}}의 인스턴스입니다. 일반적인 객체는 Object.prototype 에서 속성과 메서드를 상속받으며, 그 중 일부는 (오버라이드 등으로 인해) 숨겨질 수 있습니다. 그러나, 의도적으로 Object를 생성할 때 ({{jsxref("Object.create", "Object.create(null)")}} 처럼) 이를 피할 수도 있고, {{jsxref("Object.setPrototypeOf")}} 등을 통해 나중에 무효화할 수도 있습니다.

- -

Object 프로토타입에 가하는 변경은 프로토타입 체인을 통해, 더 아래쪽 체인에서 덮어 쓴 경우가 아니라면 모든 객체에서 관측할 수 있습니다. 이는 객체를 확장하거나 행동을 바꿀 수 있는 매우 강력하면서도 위험한 방법을 제공합니다.

- - - -

속성

- -
-
{{jsxref("Object.prototype.constructor")}}
-
객체의 프로토타입을 생성하는 함수를 지정합니다.
-
{{jsxref("Object.prototype.__proto__")}} {{non-standard_inline}}
-
객체가 초기화될 때 프로토타입으로 사용된 객체를 가리킵니다.
-
{{jsxref("Object.prototype.__noSuchMethod__")}} {{obsolete_inline}}
-
정의되지 않은 객체 멤버가 메소드로서 호출될 때 실행되는 함수를 정의하는 데 쓰였지만 제거되었습니다.
-
{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}
-
사용자 정의 객체 상에 직접 있는 열거가능 속성의 수를 반환하는 데 쓰였지만 제거되었습니다.
-
{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}
-
객체 문맥을 가리키는 데 쓰였지만 제거되었습니다.
-
- -

메서드

- -
-
{{jsxref("Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
함수를 속성에 연결합니다, 접근했을 때 그 함수를 실행해 그 결과값을 반환하는.
-
{{jsxref("Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
함수를 속성에 연결합니다, 설정했을 때 그 속성을 수정하는 함수를 실행하는.
-
{{jsxref("Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
{{jsxref("Object.prototype.__defineGetter__()", "__defineGetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.
-
{{jsxref("Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}
-
{{jsxref("Object.prototype.__defineSetter__()", "__defineSetter__()")}} 메소드에 의해 지정된 속성과 관련된 함수를 반환합니다.
-
{{jsxref("Object.prototype.hasOwnProperty()")}}
-
객체가 지정된 속성을 프로토타입 체인을 통해 상속되지 않은 그 객체의 직접 속성으로 포함하는지를 나타내는 boolean을 반환합니다.
-
{{jsxref("Object.prototype.isPrototypeOf()")}}
-
지정된 객체가 이 메소드가 호출된 객체의 프로토타입 체인 내에 있는지를 나타내는 boolean을 반환합니다.
-
{{jsxref("Object.prototype.propertyIsEnumerable()")}}
-
내부 ECMAScript [[Enumerable]] attribute가 설정된 경우를 나타내는 boolean을 반환합니다.
-
{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}
-
이 메소드가 호출된 객체를 나타내는 객체 리터럴의 출처를 포함하는 문자열을 반환합니다; 새로운 객체를 만들기 위해 이 값을 쓸 수 있습니다.
-
{{jsxref("Object.prototype.toLocaleString()")}}
-
{{jsxref("Object.toString", "toString()")}}을 호출합니다.
-
{{jsxref("Object.prototype.toString()")}}
-
객체의 문자열 표현을 반환합니다.
-
{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}
-
객체 속성에서 감시점을 제거합니다.
-
{{jsxref("Object.prototype.valueOf()")}}
-
지정된 객체의 원시값을 반환합니다.
-
{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}
-
객체 속성에 감시점을 추가합니다.
-
{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}
-
지정된 객체의 문맥에서 JavaScript 코드 문자열을 평가하는 데 쓰였지만 제거되었습니다.
-
- -

예제

- -

Object.prototype의 기본 메서드를 변경할 때, 기존 조직의 앞 또는 후에 확장(extension) 을 포장하여 코드를 주입시키는 것을 고려하자. 예를 들어서, 이 (시험받지
- 않은) 코드는 내장된 로직 또는 어떤 다른 확장이 실행되기 전에 커스텀 로직을 전제조건적으로 실행시킬 것이다.

- -

함수가 호출되었을 때, 불러온 매개변수들은 배열과 같은 형태로 '변수' arguments에 보관된다. 예를 들어 myFn(a, b, c) 라는 함수를 부를 때, 이 함수 내부에 배열형태로 매개변수 (a, b, c) 를 담게 된다. prototype을 훅을 이용해 수정할 때, 함수에서 apply()를 호출하여 단순하게 this와 arguments(호출 상태)에 현재 동작을 전달하면 된다. 이 패턴은 Node.prototype, Function.prototype등 prototype에도 사용할 수 있다.

- -
var current = Object.prototype.valueOf;
-
-// 현재 설정한 "-prop-value" 속성은 cross-cutting 이고 
-// 항상 같은 prototype chain이 아니기 때문에, 이 Object.prototype을 바꾸고 싶다.
-Object.prototype.valueOf = function() {
-  if (this.hasOwnProperty('-prop-value')) {
-    return this['-prop-value'];
-  } else {
-    // 이 객체 내 속성(property)이 하나가 아니라면, 현재 동작을 재구성한 것으로부터
-    // 기본 동작으로 되돌리자(복구). 
-    // apply 동작은 다른 언어에서의 "super"와 유사하다.
-    // 비록 valueOf()가 매개변수를 받지못하더라도, 다른 훅에서 있을 것이다.
-    return current.apply(this, arguments);
-  }
-}
-
- -

JavaScript는 엄밀히 말해서 하위클래스(sub-class) 객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책입니다. 예를 들어:

- -
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();
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
스펙상태설명
{{SpecName('ES1')}}{{Spec2('ES1')}}초기 정의. JavaScript 1.0에서 구현됨.
{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}{{Spec2('ESDraft')}}
- -

브라우저 호환성

- -

{{Compat("javascript.builtins.Object.prototype")}}

- -

참조

- - - -
-
<dicword style="user-select: text;">Even though valueOf() doesn't take arguments, some other hook may.</dicword><dicword style="user-select: text;"><dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"></dicimg> Eng<dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"></dicimg></dicword>
-
-
-
-valueOf ()가 인수를받지 않더라도 다른 후크가있을 수 있습니다.
- -
-
- - - -
diff --git a/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html b/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html deleted file mode 100644 index 2e393d68d3..0000000000 --- a/files/ko/web/javascript/reference/global_objects/promise/prototype/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Promise.prototype -slug: Web/JavaScript/Reference/Global_Objects/Promise/prototype -tags: - - JavaScript - - Promise - - Property - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Promise -translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype ---- -
{{JSRef}}
- -

Promise.prototype 속성은 {{jsxref("Promise")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0,0,0)}}
- -

설명

- -

{{jsxref("Promise")}} 인스턴스는 {{jsxref("Promise.prototype")}}을 상속합니다. 모든 Promise 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

- -

속성

- -
-
Promise.prototype.constructor
-
인스턴스의 프로토타입을 만드는 함수를 반환합니다. 기본값은 {{jsxref("Promise")}} 함수입니다.
-
- -

메서드

- -
-
{{jsxref("Promise.prototype.catch()")}}
-
프로미스(promise)에 거부 처리기 콜백을 추가하고 호출된 경우 콜백의 반환값 또는 프로미스가 대신 이행된 경우 그 원래 이행(fulfillment)값으로 결정하는(resolving) 새 프로미스를 반환합니다.
-
{{jsxref("Promise.prototype.then()")}}
-
프로미스에 이행 또는 거부 처리기를 추가하고 호출된 처리기의 반환값 또는 프로미스가 처리되지 않은 경우 그 원래 처리된(settled) 값으로 결정하는 새 프로미스를 반환합니다 (즉 관련 처리기 onFulfilled 또는 onRejected가 undefined인 경우).
-
{{jsxref("Promise.prototype.finally()")}}
-
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.
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Promise.prototype")}}

- -

같이 보기

- -
    -
  • {{jsxref("Promise")}}
    • -
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 deleted file mode 100644 index b4928da1d8..0000000000 --- a/files/ko/web/javascript/reference/global_objects/proxy/handler/apply/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: handler.apply() -slug: Web/JavaScript/Reference/Global_Objects/Proxy/handler/apply -tags: - - apply트랩 - - 트랩 - - 프록시 -translation_of: Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/apply ---- -
{{JSRef}}
- -

handler.apply() 메소드는 함수호출 시를 위한 트랩(trap)이다.

- -

문법

- -
var p = new Proxy(target, {
-  apply: function(target, thisArg, argumentsList) {
-  }
-});
-
- -

인자

- -

apply 메소드에는 다음과 같은 인자가 들어온다.. this는 handler를 가리킨다.

- -
-
target
-
대상이 되는 객체(함수)
-
thisArg
-
호출 시 바인딩 된 this
-
argumentsList
-
호출 시 전달된 인자목록.
-
- -

반환 값

- -

apply 메소드는 어떤 값이든 반환할 수 있다.

- -

설명

- -

handler.apply 메소드는 함수호출 시를 위한 트랩이다.

- -

가로채기

- -

이 트랩은 다음과 같은 것들을 가로챌 수 있다:

- -
    -
  • proxy(...args)
    • -
  • {{jsxref("Function.prototype.apply()")}} 와 {{jsxref("Function.prototype.call()")}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
- -

기본(불변)조건

- -

handler.apply 메소드에 대한 특별히 지켜야 할 기본조건은 없다.

- -

예제

- -

다음의 코드는 함수 호출 시에 트랩을 건다.

- -
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
-
- -

관련 명세

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ESDraft')}} 
- -

브라우저별 호환성

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("18")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("18")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

관련 내용

- -
    -
  • {{jsxref("Proxy")}}
    • -
  • {{jsxref("Proxy.handler", "handler")}}
    • -
  • {{jsxref("Function.prototype.apply")}}
    • -
  • {{jsxref("Function.prototype.call")}}
    • -
  • {{jsxref("Reflect.apply()")}}
    • -
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 deleted file mode 100644 index d153c621c6..0000000000 --- a/files/ko/web/javascript/reference/global_objects/proxy/handler/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -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 -translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler ---- -
{{JSRef}}
- -

The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.

- -

Methods

- -

All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.

- -
-
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
-
A trap for {{jsxref("Object.getPrototypeOf")}}.
-
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
-
A trap for {{jsxref("Object.setPrototypeOf")}}.
-
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}
-
A trap for {{jsxref("Object.isExtensible")}}.
-
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
-
A trap for {{jsxref("Object.preventExtensions")}}.
-
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
-
A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.
-
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}
-
A trap for {{jsxref("Object.defineProperty")}}.
-
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}
-
A trap for the {{jsxref("Operators/in", "in")}} operator.
-
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}
-
A trap for getting property values.
-
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}
-
A trap for setting property values.
-
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
-
A trap for the {{jsxref("Operators/delete", "delete")}} operator.
-
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}
-
A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.
-
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}
-
A trap for a function call.
-
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}
-
A trap for the {{jsxref("Operators/new", "new")}} operator.
-
- -

Some non-standard traps are obsolete and have been removed.

- -

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ESDraft')}}The enumerate handler has been removed.
- -

Browser compatibility

- - - -

{{Compat("javascript.builtins.Proxy.handler")}}

- -

See also

- -
    -
  • {{jsxref("Proxy")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html b/files/ko/web/javascript/reference/global_objects/proxy/proxy/apply/index.html new file mode 100644 index 0000000000..b4928da1d8 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/proxy/proxy/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 +--- +
{{JSRef}}
+ +

handler.apply() 메소드는 함수호출 시를 위한 트랩(trap)이다.

+ +

문법

+ +
var p = new Proxy(target, {
+  apply: function(target, thisArg, argumentsList) {
+  }
+});
+
+ +

인자

+ +

apply 메소드에는 다음과 같은 인자가 들어온다.. this는 handler를 가리킨다.

+ +
+
target
+
대상이 되는 객체(함수)
+
thisArg
+
호출 시 바인딩 된 this
+
argumentsList
+
호출 시 전달된 인자목록.
+
+ +

반환 값

+ +

apply 메소드는 어떤 값이든 반환할 수 있다.

+ +

설명

+ +

handler.apply 메소드는 함수호출 시를 위한 트랩이다.

+ +

가로채기

+ +

이 트랩은 다음과 같은 것들을 가로챌 수 있다:

+ +
    +
  • proxy(...args)
    • +
  • {{jsxref("Function.prototype.apply()")}} 와 {{jsxref("Function.prototype.call()")}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
+ +

기본(불변)조건

+ +

handler.apply 메소드에 대한 특별히 지켜야 할 기본조건은 없다.

+ +

예제

+ +

다음의 코드는 함수 호출 시에 트랩을 건다.

+ +
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
+
+ +

관련 명세

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots-call-thisargument-argumentslist', '[[Call]]')}}{{Spec2('ESDraft')}} 
+ +

브라우저별 호환성

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("18")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("18")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

관련 내용

+ +
    +
  • {{jsxref("Proxy")}}
    • +
  • {{jsxref("Proxy.handler", "handler")}}
    • +
  • {{jsxref("Function.prototype.apply")}}
    • +
  • {{jsxref("Function.prototype.call")}}
    • +
  • {{jsxref("Reflect.apply()")}}
    • +
diff --git a/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html b/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html new file mode 100644 index 0000000000..d153c621c6 --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/proxy/proxy/index.html @@ -0,0 +1,82 @@ +--- +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 +translation_of_original: Web/JavaScript/Reference/Global_Objects/Proxy/handler +--- +
{{JSRef}}
+ +

The proxy's handler object is a placeholder object which contains traps for {{jsxref("Proxy", "proxies", "", 1)}}.

+ +

Methods

+ +

All traps are optional. If a trap has not been defined, the default behavior is to forward the operation to the target.

+ +
+
{{jsxref("Global_Objects/Proxy/handler/getPrototypeOf", "handler.getPrototypeOf()")}}
+
A trap for {{jsxref("Object.getPrototypeOf")}}.
+
{{jsxref("Global_Objects/Proxy/handler/setPrototypeOf", "handler.setPrototypeOf()")}}
+
A trap for {{jsxref("Object.setPrototypeOf")}}.
+
{{jsxref("Global_Objects/Proxy/handler/isExtensible", "handler.isExtensible()")}}
+
A trap for {{jsxref("Object.isExtensible")}}.
+
{{jsxref("Global_Objects/Proxy/handler/preventExtensions", "handler.preventExtensions()")}}
+
A trap for {{jsxref("Object.preventExtensions")}}.
+
{{jsxref("Global_Objects/Proxy/handler/getOwnPropertyDescriptor", "handler.getOwnPropertyDescriptor()")}}
+
A trap for {{jsxref("Object.getOwnPropertyDescriptor")}}.
+
{{jsxref("Global_Objects/Proxy/handler/defineProperty", "handler.defineProperty()")}}
+
A trap for {{jsxref("Object.defineProperty")}}.
+
{{jsxref("Global_Objects/Proxy/handler/has", "handler.has()")}}
+
A trap for the {{jsxref("Operators/in", "in")}} operator.
+
{{jsxref("Global_Objects/Proxy/handler/get", "handler.get()")}}
+
A trap for getting property values.
+
{{jsxref("Global_Objects/Proxy/handler/set", "handler.set()")}}
+
A trap for setting property values.
+
{{jsxref("Global_Objects/Proxy/handler/deleteProperty", "handler.deleteProperty()")}}
+
A trap for the {{jsxref("Operators/delete", "delete")}} operator.
+
{{jsxref("Global_Objects/Proxy/handler/ownKeys", "handler.ownKeys()")}}
+
A trap for {{jsxref("Object.getOwnPropertyNames")}} and {{jsxref("Object.getOwnPropertySymbols")}}.
+
{{jsxref("Global_Objects/Proxy/handler/apply", "handler.apply()")}}
+
A trap for a function call.
+
{{jsxref("Global_Objects/Proxy/handler/construct", "handler.construct()")}}
+
A trap for the {{jsxref("Operators/new", "new")}} operator.
+
+ +

Some non-standard traps are obsolete and have been removed.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('ES2015', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ES2015')}}Initial definition.
{{SpecName('ESDraft', '#sec-proxy-object-internal-methods-and-internal-slots', 'Proxy Object Internal Methods and Internal Slots')}}{{Spec2('ESDraft')}}The enumerate handler has been removed.
+ +

Browser compatibility

+ + + +

{{Compat("javascript.builtins.Proxy.handler")}}

+ +

See also

+ +
    +
  • {{jsxref("Proxy")}}
    • +
diff --git a/files/ko/web/javascript/reference/global_objects/set/prototype/index.html b/files/ko/web/javascript/reference/global_objects/set/prototype/index.html deleted file mode 100644 index 8183d348a9..0000000000 --- a/files/ko/web/javascript/reference/global_objects/set/prototype/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: Set.prototype -slug: Web/JavaScript/Reference/Global_Objects/Set/prototype -tags: - - ECMAScript 2015 - - JavaScript - - Property - - Reference - - set -translation_of: Web/JavaScript/Reference/Global_Objects/Set -translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype ---- -
{{JSRef}}
- -

Set.prototype 속성은 {{jsxref("Set")}} 생성자의 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0,0,0)}}
- -

설명

- -

{{jsxref("Set")}} 인스턴스는 {{jsxref("Set.prototype")}}에서 상속합니다. 모든 Set 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

- -

속성

- -
-
Set.prototype.constructor
-
인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 {{jsxref("Set")}} 함수입니다.
-
{{jsxref("Set.prototype.size")}}
-
Set 객체 내 값의 개수를 반환합니다.
-
- -

메서드

- -
-
{{jsxref("Set.add", "Set.prototype.add(value)")}}
-
Set 객체에 주어진 값을 갖는 새로운 요소를 추가합니다. Set 객체를 반환합니다.
-
{{jsxref("Set.prototype.clear()")}}
-
Set 객체에서 모든 요소를 제거합니다.
-
{{jsxref("Set.delete", "Set.prototype.delete(value)")}}
-
value와 관련된 요소를 제거하고 Set.prototype.has(value)가 이전에 반환했던 값을 반환합니다. Set.prototype.has(value)는 그 뒤에 false를 반환합니다.
-
{{jsxref("Set.prototype.entries()")}}
-
삽입 순으로 Set 객체 내 각 값에 대한 [value, value] 배열을 포함하는 새로운 Iterator 객체를 반환합니다. 이는 Map 객체와 비슷하게 유지되므로 여기서 각 항목은 그 key와 value에 대해 같은 값을 갖습니다.
-
{{jsxref("Set.forEach", "Set.prototype.forEach(callbackFn[, thisArg])")}}
-
삽입 순으로 Set 객체 내에 있는 각 값에 대해 한 번 callbackFn을 호출합니다. thisArg 매개변수가 forEach에 제공된 경우, 이는 각 콜백에 대해 this 값으로 사용됩니다.
-
{{jsxref("Set.has", "Set.prototype.has(value)")}}
-
Set 객체 내 주어진 값을 갖는 요소가 있는지를 주장하는(asserting, 나타내는) boolean을 반환합니다.
-
{{jsxref("Set.prototype.keys()")}}
-
values() 함수와 같은 함수로 삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환합니다.
-
{{jsxref("Set.prototype.values()")}}
-
삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환합니다.
-
{{jsxref("Set.prototype.@@iterator()", "Set.prototype[@@iterator]()")}}
-
삽입 순으로 Set 객체 내 각 요소에 대한 값을 포함하는 새로운 Iterator 객체를 반환합니다.
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
명세상태설명
{{SpecName('ES6', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.Set.prototype")}}

- -

같이 보기

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html b/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html deleted file mode 100644 index 849b70c1c6..0000000000 --- a/files/ko/web/javascript/reference/global_objects/sharedarraybuffer/prototype/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: SharedArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype -tags: - - JavaScript - - SharedArrayBuffer - - TypedArrays - - 공유 메모리 - - 속성 -translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer -translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype ---- -
{{JSRef}}
- -

SharedArrayBuffer.prototype 속성은 {{jsxref("SharedArrayBuffer")}} 객체를위한 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0,0,0)}}
- -

설명

- -

SharedArrayBuffer 인스턴스는 SharedArrayBuffer.prototype 을 상속합니다. 모든 생성자와 마찬가지로, 생성자의 프로토타입 객체를 변경하여 모든 SharedArrayBuffer 인스턴스에 변화를 줄 수 있습니다.

- -

속성

- -
-
SharedArrayBuffer.prototype.constructor
-
객체의 프로토타입을 생성하는 함수를 지정합니다. 초기 값은 SharedArrayBuffer 생성자에 내장된 표준입니다.
-
{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}
-
배열의 바이트 크기입니다. 배열이 생성되고 수정이 불가할 때 지정됩니다. 읽기 전용입니다.
-
- -

메소드

- -
-
{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(begin, end)")}}
-
begin 부터 end 까지의 모든 것을 포함하는 SharedArrayBuffer 바이트의 복사본을 컨텐츠로 갖는 새로운 SharedArrayBuffer 를 반환합니다. begin 또는 end 가 음수인 경우, 인덱스는 배열의 끝에서부터이고 반대인 경우 시작부터입니다.
-
- -

명세

- - - - - - - - - - - - - - -
명세상태코멘트
{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}{{Spec2('ESDraft')}}ES2017 에서 초기 정의.
- -

브라우저 호환성

- - - -

{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}

- -

함께 보기

- -
    -
  • {{jsxref("SharedArrayBuffer")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/string/prototype/index.html b/files/ko/web/javascript/reference/global_objects/string/prototype/index.html deleted file mode 100644 index fa32999954..0000000000 --- a/files/ko/web/javascript/reference/global_objects/string/prototype/index.html +++ /dev/null @@ -1,219 +0,0 @@ ---- -title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype -tags: - - JavaScript - - Property - - Prototype - - String -translation_of: Web/JavaScript/Reference/Global_Objects/String -translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype ---- -
{{JSRef("Global_Objects", "String")}}
- -

요약

- -

String.prototype 프라퍼티는 {{jsxref("Global_Objects/String", "String")}} 프로토타입 오브젝트를 표현하고 있습니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

설명

- -

모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들은 String.prototype를 상속합니다. String 프라퍼티 오브젝트를 변경하면, 그 변경은 모든 {{jsxref("Global_Objects/String", "String")}} 인스턴스들에 영향을 주게 됩니다.

- -

Properties

- -
-
String.prototype.constructor
-
오브젝트의 프로토타입을 생성하는 함수를 명세합니다.
-
{{jsxref("String.prototype.length")}}
-
문자열의 길이를 반영합니다.
-
N
-
N번째 위치에 있는 문자에 접근하기 위해 사용합니다.  N 은 0과 {{jsxref("String.length", "length")}}보다 작은 값 사이에 있는 양의 정수입니다. 이 퍼라퍼티들은 읽기 전용(read-only) 속성을 가지고 있습니다. 
-
- -

메서드

- -

HTML과 관련이 없는 메서드

- -
-
{{jsxref("String.prototype.charAt()")}}
-
문자열 내 특정 위치(index)에 있는 문자를 반환합니다.
-
{{jsxref("String.prototype.charCodeAt()")}}
-
문자열 내 주어진 위치(index)에 있는 문자의 유니코드 값을 반환합니다.
-
{{jsxref("String.prototype.codePointAt()")}} {{experimental_inline}}
-
주어진 위치에 있는 UTF-16으로 인코딩된 코드 포인터값인 음수가 아닌 정수값을 반환합니다. 
-
{{jsxref("String.prototype.concat()")}}
-
두 문자열의 문자를 합쳐서 새로운 문자열로 만든 다음, 그 새로운 문자열을 반환합니다. 
-
{{jsxref("String.prototype.includes()")}} {{experimental_inline}}
-
문자열 내에 찾고자 하는 문자열이 있는지를 확인합니다. 
-
{{jsxref("String.prototype.endsWith()")}} {{experimental_inline}}
-
문자열에서 특정 문자열로 끝나는지를 확인할 수 있습니다.
-
{{jsxref("String.prototype.indexOf()")}}
-
{{jsxref("Global_Objects/String", "String")}} 오브젝트에 있는 특정 값이 일치하는 첫 번째 인덱스 값을 반환하며, 일치하는 값이 없을 경우에는 -1을 반환합니다.
-
{{jsxref("String.prototype.lastIndexOf()")}}
-
String 오브젝트에서 fromIndex로부터 반대방향으로 찾기 시작하여 특정 값이 일치하는 마지막 인덱스를 반환합니다. 문자열에서 일치하는 특정 값이 없으면 -1을 리턴합니다.
-
{{jsxref("String.prototype.localeCompare()")}}
-
Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.
-
{{jsxref("String.prototype.match()")}}
-
Used to match a regular expression against a string.
-
{{jsxref("String.prototype.normalize()")}} {{experimental_inline}}
-
Returns the Unicode Normalization Form of the calling string value.
-
{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}
-
Wraps the string in double quotes (""").
-
{{jsxref("String.prototype.repeat()")}} {{experimental_inline}}
-
Returns a string consisting of the elements of the object repeated the given times.
-
{{jsxref("String.prototype.replace()")}}
-
Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.
-
{{jsxref("String.prototype.search()")}}
-
Executes the search for a match between a regular expression and a specified string.
-
{{jsxref("String.prototype.slice()")}}
-
Extracts a section of a string and returns a new string.
-
{{jsxref("String.prototype.split()")}}
-
Splits a {{jsxref("Global_Objects/String", "String")}} object into an array of strings by separating the string into substrings.
-
{{jsxref("String.prototype.startsWith()")}} {{experimental_inline}}
-
Determines whether a string begins with the characters of another string.
-
{{jsxref("String.prototype.substr()")}}
-
Returns the characters in a string beginning at the specified location through the specified number of characters.
-
{{jsxref("String.prototype.substring()")}}
-
Returns the characters in a string between two indexes into the string.
-
{{jsxref("String.prototype.toLocaleLowerCase()")}}
-
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()")}}.
-
{{jsxref("String.prototype.toLocaleUpperCase()")}}
-
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()")}}.
-
{{jsxref("String.prototype.toLowerCase()")}}
-
Returns the calling string value converted to lower case.
-
{{jsxref("String.prototype.toSource()")}} {{non-standard_inline}}
-
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.
-
{{jsxref("String.prototype.toString()")}}
-
Returns a string representing the specified object. Overrides the {{jsxref("Object.prototype.toString()")}} method.
-
{{jsxref("String.prototype.toUpperCase()")}}
-
Returns the calling string value converted to uppercase.
-
{{jsxref("String.prototype.trim()")}}
-
Trims whitespace from the beginning and end of the string. Part of the ECMAScript 5 standard.
-
{{jsxref("String.prototype.trimLeft()")}} {{non-standard_inline}}
-
Trims whitespace from the left side of the string.
-
{{jsxref("String.prototype.trimRight()")}} {{non-standard_inline}}
-
Trims whitespace from the right side of the string.
-
{{jsxref("String.prototype.valueOf()")}}
-
Returns the primitive value of the specified object. Overrides the {{jsxref("Object.prototype.valueOf()")}} method.
-
{{jsxref("String.prototype.@@iterator()", "String.prototype[@@iterator]()")}} {{experimental_inline}}
-
Returns a new Iterator object that iterates over the code points of a String value, returning each code point as a String value.
-
- -

HTML wrapper methods

- -

These methods are of limited use, as they provide only a subset of the available HTML tags and attributes.

- -
-
{{jsxref("String.prototype.big()")}} {{deprecated_inline}}
-
{{HTMLElement("big")}}
-
{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}
-
{{HTMLElement("blink")}}
-
{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}
-
{{HTMLElement("b")}}
-
{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}
-
{{HTMLElement("tt")}}
-
{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}
-
{{htmlattrxref("color", "font", "<font color=\"color\">")}}
-
{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}
-
{{htmlattrxref("size", "font", "<font size=\"size\">")}}
-
{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}
-
{{HTMLElement("i")}}
-
{{jsxref("String.prototype.link()")}}
-
{{htmlattrxref("href", "a", "<a href=\"rul\">")}} (link to URL)
-
{{jsxref("String.prototype.small()")}} {{deprecated_inline}}
-
{{HTMLElement("small")}}
-
{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}
-
{{HTMLElement("strike")}}
-
{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}
-
{{HTMLElement("sub")}}
-
{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}
-
{{HTMLElement("sup")}}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
ECMAScript 1st Edition.StandardInitial definition.
{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}{{Spec2('ES5.1')}}
{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}{{Spec2('ES6')}}
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- -
    -
  • {{jsxref("Global_Objects/String", "String")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html b/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html deleted file mode 100644 index aa38e80799..0000000000 --- a/files/ko/web/javascript/reference/global_objects/syntaxerror/prototype/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError -translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---- -
{{JSRef}}
- -

SyntaxError.prototype 속성은 {{jsxref("SyntaxError")}} 객체의 생성자 프로토타입을 표현합니다.

- -

설명

- -

모든 {{jsxref("SyntaxError")}} 인스턴스는 SyntaxError.prototype 객체로부터 상속 받습니다. 또한, 속성이나 메소드를 추가할 때 모든 인스턴스에 프로토타입을 사용 할 수 있습니다.

- -

속성

- -
-
SyntaxError.prototype.constructor
-
인스턴스의 프로토타입을 생성하는 함수를 명시합니다.
-
{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}
-
에러 메시지. 비록 ECMA-262는  {{jsxref("SyntaxError")}} 가 고유의 message 속성을 제공해야 한다고 명시하고 있지만, SpiderMonkey 에서는, {{jsxref("Error.prototype.message")}}를 상속 받습니다. 
-
{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}
-
에러명. {{jsxref("Error")}}로부터 상속 받습니다.
-
{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}
-
에러를 발생시킨 파일의 경로. {{jsxref("Error")}}로부터 상속 받습니다.
-
{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}
-
에러가 발생한 파일의 코드 라인 넘버. {{jsxref("Error")}}로부터 상속 받습니다.
-
{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}
-
에러가 발생된 라인의 컬럼 넘버. {{jsxref("Error")}}로부터 상속 받습니다.
-
{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}
-
스택 트레이스. {{jsxref("Error")}}로부터 상속 받습니다.
-
- -

메소드

- -

비록 {{jsxref("SyntaxError")}} 프로토타입 객체는 고유의 메소드를 가지고 있지는 않지만, {{jsxref("SyntaxError")}} 인스턴스는 몇 가지의 메소드를 프로토타입 체인을 통하여 상속 받습니다.

- -

스펙

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}초기 정의.
{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}{{Spec2('ES5.1')}}NativeError.prototype로 정의.
{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ES6')}}NativeError.prototype로 정의.
{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}{{Spec2('ESDraft')}}NativeError.prototype로 정의.
- -

브라우저 호환성

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

참조

- -
    -
  • {{jsxref("Error.prototype")}}
    • -
  • {{jsxref("Function.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html b/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html deleted file mode 100644 index 75f63010bf..0000000000 --- a/files/ko/web/javascript/reference/global_objects/typedarray/prototype/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: TypedArray.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype -tags: - - JavaScript - - Property - - TypedArray -translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray -translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype ---- -
{{JSRef}}
- -

TypedArray.prototype 속성(property)은 {{jsxref("TypedArray")}} 생성자에 대한 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0,0,0)}}
- -

설명

- -

{{jsxref("TypedArray")}} 인스턴스는 {{jsxref("TypedArray.prototype")}}을 상속합니다. 모든 TypedArray 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있으며, TypedArray는 TypedArray 객체 유형 중 하나입니다.

- -

상속에 관한 자세한 정보를 위해 TypedArray에 대한 설명도 참조하세요.

- -

속성

- -
-
TypedArray.prototype.constructor
-
인스턴스의 프로토타입을 만든 함수를 반환합니다. 이는 기본으로 해당 TypedArray 객체 유형 함수 중 하나입니다.
-
{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}
-
형식화 배열에 의해 참조되는 {{jsxref("ArrayBuffer")}}를 반환합니다. 생성 시에 고정되기에 읽기 전용.
-
{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}
-
{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 길이(단위 바이트)를 반환합니다. 생성 시에 고정되기에 읽기 전용.
-
{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}
-
{{jsxref("ArrayBuffer")}}의 시작점부터 형식화 배열의 오프셋(단위 바이트)을 반환합니다. 생성 시에 고정되기에 읽기 전용.
-
{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}
-
형식화 배열 내 보유한 요소의 수를 반환합니다. 생성 시에 고정되기에 읽기 전용.
-
- -

메서드

- -
-
{{jsxref("TypedArray.prototype.copyWithin()")}}
-
배열 내부 일련의 배열 요소를 복사합니다. {{jsxref("Array.prototype.copyWithin()")}}도 참조.
-
{{jsxref("TypedArray.prototype.entries()")}}
-
배열 내 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 Array Iterator 객체를 반환합니다. {{jsxref("Array.prototype.entries()")}}도 참조.
-
{{jsxref("TypedArray.prototype.every()")}}
-
배열의 모든 요소가 함수로 제공되는 테스트를 통과하는지를 테스트합니다. {{jsxref("Array.prototype.every()")}}도 참조.
-
{{jsxref("TypedArray.prototype.fill()")}}
-
시작 인덱스부터 끝 인덱스까지 배열의 모든 요소를 고정값으로 채웁니다. {{jsxref("Array.prototype.fill()")}}도 참조.
-
{{jsxref("TypedArray.prototype.filter()")}}
-
제공되는 필터링 함수가 true를 반환하는 이 배열의 모든 요소를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.filter()")}}도 참조.
-
{{jsxref("TypedArray.prototype.find()")}}
-
배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 값 또는 못 찾은 경우 undefined를 반환합니다. {{jsxref("Array.prototype.find()")}}도 참조.
-
{{jsxref("TypedArray.prototype.findIndex()")}}
-
배열 내 요소가 제공되는 테스트 함수를 만족하는 경우 배열 내 찾은 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.findIndex()")}}도 참조.
-
{{jsxref("TypedArray.prototype.forEach()")}}
-
배열 내 각 요소에 대해 함수를 호출합니다. {{jsxref("Array.prototype.forEach()")}}도 참조.
-
{{jsxref("TypedArray.prototype.includes()")}} {{experimental_inline}}
-
형식화 배열이 특정 요소를 포함하는지를 판단해, 적절히 true 또는 false를 반환합니다. {{jsxref("Array.prototype.includes()")}}도 참조.
-
{{jsxref("TypedArray.prototype.indexOf()")}}
-
지정된 값과 같은 배열 내부 요소의 첫(최소) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.indexOf()")}}도 참조.
-
{{jsxref("TypedArray.prototype.join()")}}
-
배열의 모든 요소를 문자열로 합칩니다. {{jsxref("Array.prototype.join()")}}도 참조.
-
{{jsxref("TypedArray.prototype.keys()")}}
-
배열의 각 인덱스에 대한 키를 포함하는 새로운 Array Iterator를 반환합니다. {{jsxref("Array.prototype.keys()")}}도 참조.
-
{{jsxref("TypedArray.prototype.lastIndexOf()")}}
-
지정된 값과 같은 배열 내부 요소의 끝(최대) 인덱스 또는 못 찾은 경우 -1을 반환합니다. {{jsxref("Array.prototype.lastIndexOf()")}}도 참조.
-
{{jsxref("TypedArray.prototype.map()")}}
-
이 배열의 모든 요소에 제공된 함수를 호출한 결과를 갖는 새로운 배열을 생성합니다. {{jsxref("Array.prototype.map()")}}도 참조.
-
{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}
-
{{jsxref("TypedArray.prototype.copyWithin()")}}의 이전 비표준 버전.
-
{{jsxref("TypedArray.prototype.reduce()")}}
-
누산기(accumulator) 및 배열의 각 값(좌에서 우로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduce()")}}도 참조.
-
{{jsxref("TypedArray.prototype.reduceRight()")}}
-
누산기 및 배열의 각 값(우에서 좌로)에 대해 한 값으로 줄도록 함수를 적용합니다. {{jsxref("Array.prototype.reduceRight()")}}도 참조.
-
{{jsxref("TypedArray.prototype.reverse()")}}
-
배열 요소의 순서를 뒤집습니다 — 처음이 마지막이 되고 마지막이 처음이 됩니다. {{jsxref("Array.prototype.reverse()")}}도 참조.
-
{{jsxref("TypedArray.prototype.set()")}}
-
형식화 배열에 여러 값을 저장합니다, 지정된 배열에서 입력 값을 읽어.
-
{{jsxref("TypedArray.prototype.slice()")}}
-
배열의 한 부분을 추출하여 새로운 배열을 반환합니다. {{jsxref("Array.prototype.slice()")}}도 참조.
-
{{jsxref("TypedArray.prototype.some()")}}
-
이 배열의 적어도 한 요소가 제공된 테스트 함수를 만족하는 경우 true를 반환합니다. {{jsxref("Array.prototype.some()")}}도 참조.
-
{{jsxref("TypedArray.prototype.sort()")}}
-
배열의 요소를 적소에 정렬해 그 배열을 반환합니다. {{jsxref("Array.prototype.sort()")}}도 참조.
-
{{jsxref("TypedArray.prototype.subarray()")}}
-
주어진 시작 및 끝 요소 인덱스로부터 새로운 TypedArray를 반환합니다.
-
{{jsxref("TypedArray.prototype.values()")}}
-
배열의 각 인덱스에 대한 값을 포함하는 새로운 Array Iterator 객체를 반환합니다. {{jsxref("Array.prototype.values()")}}도 참조.
-
{{jsxref("TypedArray.prototype.toLocaleString()")}}
-
배열 및 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Array.prototype.toLocaleString()")}}도 참조.
-
{{jsxref("TypedArray.prototype.toString()")}}
-
배열 및 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Array.prototype.toString()")}}도 참조.
-
{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}
-
배열의 각 인덱스에 대한 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.
-
- -

스펙

- - - - - - - - - - - - - - - - - - - -
스펙상태설명
{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7.0{{ CompatGeckoDesktop("2") }}1011.65.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.0{{CompatVersionUnknown}}{{ CompatGeckoMobile("2") }}1011.64.2
-
- -

참조

- - diff --git a/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html deleted file mode 100644 index fa2ad9691d..0000000000 --- a/files/ko/web/javascript/reference/global_objects/weakmap/prototype/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: WeakMap.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakMap -translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype ---- -
{{JSRef}}
- -

WeakMap.prototype 속성(property)은 {{jsxref("WeakMap")}} 생성자에 대한 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0,0,0)}}
- -

설명

- -

{{jsxref("WeakMap")}} 인스턴스는 {{jsxref("WeakMap.prototype")}}에서 상속합니다. 모든 WeakMap 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

- -

WeakMap.prototype은 그 자체로 그냥 평범한 객체입니다:

- -
Object.prototype.toString.call(WeakMap.prototype); // "[object Object]"
- -

속성

- -
-
WeakMap.prototype.constructor
-
인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakMap")}} 함수입니다.
-
- -

메서드

- -
-
{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(key)")}}
-
key와 관련된 모든 값을 제거합니다. WeakMap.prototype.has(key)는 그 뒤에 false를 반환합니다.
-
{{jsxref("WeakMap.get", "WeakMap.prototype.get(key)")}}
-
key와 관련된 값 또는 관련 값이 없는 경우 undefined를 반환합니다.
-
{{jsxref("WeakMap.has", "WeakMap.prototype.has(key)")}}
-
WeakMap 객체 내 key와 관련된 값이 있는지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.
-
{{jsxref("WeakMap.set", "WeakMap.prototype.set(key, value)")}}
-
WeakMap 객체 내 key에 대해 값을 설정합니다. WeakMap 객체를 반환합니다.
-
{{jsxref("WeakMap.prototype.clear()")}} {{obsolete_inline}}
-
WeakMap 객체에서 모든 키/값 쌍을 제거합니다. 메서드가 없는 WeakMap 객체를 캡슐화하여 .clear() 메서드가 있는 WeakMap 같은 객체 구현이 가능함을 주의하세요 ({{jsxref("WeakMap")}} 페이지 예 참조)
-
- -

스펙

- - - - - - - - - - - - - - - - - - - -
스펙상태설명
{{SpecName('ES6', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support36{{CompatGeckoDesktop("6.0")}}11237.1
Ordinary object{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("6.0")}}{{CompatNo}}{{CompatNo}}8
Ordinary object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

참조

- -
    -
  • {{jsxref("Map.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html b/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html deleted file mode 100644 index 0c75408df5..0000000000 --- a/files/ko/web/javascript/reference/global_objects/weakset/prototype/index.html +++ /dev/null @@ -1,142 +0,0 @@ ---- -title: WeakSet.prototype -slug: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype -tags: - - ECMAScript6 - - JavaScript - - Property - - WeakSet -translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet -translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype ---- -
{{JSRef}}
- -

WeakSet.prototype 속성(property)은 {{jsxref("WeakSet")}} 생성자에 대한 프로토타입을 나타냅니다.

- -
{{js_property_attributes(0,0,0)}}
- -

설명

- -

{{jsxref("WeakSet")}} 인스턴스는 {{jsxref("WeakSet.prototype")}}에서 상속합니다. 모든 WeakSet 인스턴스에 속성 또는 메서드를 추가하기 위해 생성자의 프로토타입 객체를 사용할 수 있습니다.

- -

WeakSet.prototype은 그 자체로 그냥 평범한 객체입니다:

- -
Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"
- -

속성

- -
-
WeakSet.prototype.constructor
-
인스턴스의 프로토타입을 생성한 함수를 반환합니다. 이는 기본으로 {{jsxref("WeakSet")}} 함수입니다.
-
- -

메서드

- -
-
{{jsxref("WeakSet.add", "WeakSet.prototype.add(value)")}}
-
WeakSet 객체에 주어진 값을 갖는 새로운 객체를 추가합니다.
-
{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(value)")}}
-
value와 관련된 요소를 제거합니다. WeakSet.prototype.has(value)는 그 뒤에 false를 반환합니다.
-
{{jsxref("WeakSet.has", "WeakSet.prototype.has(value)")}}
-
WeakSet 객체 내 주어진 값을 갖는 요소가 존재하는 지 여부를 주장하는(asserting, 나타내는) boolean을 반환합니다.
-
{{jsxref("WeakSet.prototype.clear()")}} {{obsolete_inline}}
-
WeakSet 객체에서 모든 요소를 제거합니다.
-
- -

스펙

- - - - - - - - - - - - - - - - - - - -
스펙상태설명
{{SpecName('ES6', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ES6')}}초기 정의.
{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}{{Spec2('ESDraft')}} 
- -

브라우저 호환성

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support36{{ CompatGeckoDesktop(34) }}{{CompatNo}}23{{CompatNo}}
Ordinary object{{CompatUnknown}}{{CompatGeckoDesktop("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChrome for AndroidAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{ CompatGeckoMobile(34) }}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Ordinary object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("40")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

참조

- -
    -
  • {{jsxref("Set.prototype")}}
    • -
  • {{jsxref("WeakMap.prototype")}}
    • -
diff --git a/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html b/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html deleted file mode 100644 index c7c1c54bab..0000000000 --- a/files/ko/web/javascript/reference/global_objects/webassembly/global/prototype/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: WebAssembly.Global.prototype -slug: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype -translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global -translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype ---- -
{{JSRef}}
- -

WebAssembly.Global.prototype 속성은 {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입을 나타냅니다.

- -
{{js_property_attributes(0, 0, 0)}}
- -

Description

- -

모든 {{jsxref("WebAssembly.Global")}} 인스턴스는 Global.prototype에서 상속받습니다. {{jsxref("WebAssembly.Global()")}} 생성자의 프로토 타입 객체는 모든 {{jsxref( "WebAssembly.Global")}} 인스턴스에 영향을 미치도록 수정할 수 있습니다.

- -

Properties

- -
-
Global.prototype.constructor
-
이 객체의 인스턴스를 생성 한 함수를 돌려줍니다. 기본적으로 이것은 {{jsxref("WebAssembly.Global()")}} 생성자입니다.
-
Global.prototype[@@toStringTag]
-
@@toStringTag 속성의 초기 값은 String 값인 "WebAssembly.Global"입니다.
-
Global.prototype.value
-
전역 변수에 포함 된 값 - 전역 값을 직접 설정하고 가져 오는 데 사용할 수 있습니다.
-
- -

Methods

- -
-
Global.prototype.valueOf()
-
전역 변수에 포함 된 값을 반환하는 Old-style 메서드입니다.
-
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}{{Spec2('WebAssembly JS')}}Initial draft definition.
- -

Browser compatibility

- -
- - -

{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}

-
- -
- -
- -

See also

- -
    -
  • {{jsxref("WebAssembly.Global()")}}
    • -
diff --git a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html b/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html deleted file mode 100644 index 3e61415550..0000000000 --- a/files/ko/web/javascript/reference/operators/arithmetic_operators/index.html +++ /dev/null @@ -1,291 +0,0 @@ ---- -title: 산술 연산자 -slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators ---- -
{{jsSidebar("Operators")}}
- -

산술 연산자는 숫자 값(리터럴 또는 변수)을 피연산자로 받아 하나의 숫자 값을 반환합니다. 표준 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/)입니다.

- -
{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}
- - - -

덧셈 (+)

- -

덧셈 연산자는 숫자 피연산자를 더한 값, 또는 문자열을 연결한 값을 생성합니다.

- -

구문

- -
연산자: x + y
-
- -

예제

- -
// Number + Number -> 합
-1 + 2 // 3
-
-// Boolean + Number -> 합
-true + 1 // 2
-
-// Boolean + Boolean -> 합
-false + false // 0
-
-// Number + String -> 연결
-5 + "foo" // "5foo"
-
-// String + Boolean -> 연결
-"foo" + false // "foofalse"
-
-// String + String -> 연결
-"foo" + "bar" // "foobar"
-
- -

뺄셈 (-)

- -

뺄셈 연산자는 두 개의 피연산자를 뺀 값을 생성합니다.

- -

구문

- -
연산자: x - y
-
- -

예제

- -
5 - 3 // 2
-3 - 5 // -2
-"foo" - 3 // NaN
- -

나눗셈 (/)

- -

나눗셈 연산자는 왼쪽 피연산자를 피제수로, 오른쪽 피연산자를 제수로 한 몫을 생성합니다.

- -

구문

- -
연산자: x / y
-
- -

예제

- -
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
- -

곱셈 (*)

- -

곱셈 연산자는 두 연산자의 곱을 생성합니다.

- -

구문

- -
연산자: x * y
-
- -

예제

- -
2 * 2 // 4
--2 * 2 // -4
-Infinity * 0 // NaN
-Infinity * Infinity // Infinity
-"foo" * 2 // NaN
-
- -

나머지 (%)

- -

나머지 연산자는 왼쪽 피연산자를 오른쪽 피연산자로 나눴을 때의 나머지를 반환합니다. 결과는 항상 피제수의 부호를 따라갑니다.

- -

구문

- -
연산자: var1 % var2
-
- -

예제

- -
12 % 5 // 2
--1 % 2 // -1
-NaN % 2 // NaN
-1 % 2 // 1
-2 % 3 // 2
--4 % 2 // -0
-5.5 % 2 // 1.5
-
- -

거듭제곱 (**)

- -

거듭제곱 연산자는 첫 번째 피연산자를 밑으로, 두 번째 피연산자를 지수로 한 값을 생성합니다. 즉, var1과 var2가 변수일 때, var1var2의 값을 생성합니다. 거듭제곱 연산자는 우결합성을 가집니다. 따라서 a ** b ** c는 a ** (b ** c)와 같습니다.

- -

구문

- -
연산자: var1 ** var2
-
- -

참고

- -

PHP와 Python 등 거듭제곱 연산자를 가진 대부분의 언어는 거듭제곱 연산자의 우선순위가 +와 - 등 단항 연산자보다 높습니다. 그러나 Bash는 단항 연산자가 거듭제곱 연산자보다 우선순위가 높은 등 일부 예외도 있습니다. JavaScript는 단항 연산자(+/-/~/!/delete/void/typeof)를 왼쪽 피연산자 앞에 배치할 수 없으므로, 모호한 표현도 작성할 수 없습니다.

- -
-2 ** 2;
-// Bash에서 4, 다른 언어에서는 -4.
-// 모호한 표현이므로 JavaScript에서는 유효하지 않음
-
-
--(2 ** 2);
-// JavaScript에서 -4, 작성자의 의도가 명확함
-
- -

예제

- -
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
-
- -

결과의 부호를 뒤집으려면 다음과 같이 작성합니다.

- -
-(2 ** 2) // -4
-
- -

거듭제곱의 밑을 음수로 강제하려면 다음과 같이 작성합니다.

- -
(-2) ** 2 // 4
-
- -
-

참고: JavaScript는 비트 연산자 ^ (논리 XOR)도 가지고 있습니다. **와 ^는 다릅니다. (예 : 2 ** 3 === 8이지만 2 ^ 3 === 1)

-
- -

증가 (++)

- -

증가 연산자는 피연산자를 증가(1을 덧셈)시키고, 그 값을 반환합니다.

- -
    -
  • 피연산자 뒤에 붙여(예: x++) 접미사로 사용한 경우 증가하기 전의 값을 반환합니다.
    • -
  • 피연산자 앞에 붙여(예: ++x) 접두사로 사용한 경우 증가한 후의 값을 반환합니다.
    • -
- -

구문

- -
연산자: x++ or ++x
-
- -

예제

- -
// 접미사
-var x = 3;
-y = x++; // y = 3, x = 4
-
-// 접두사
-var a = 2;
-b = ++a; // a = 3, b = 3
-
- -

감소 (--)

- -

감소 연산자는 피연산자를 감소(1을 뺄셈)시키고, 그 값을 반환합니다.

- -
    -
  • 피연산자 뒤에 붙여(예: x--) 접미사로 사용한 경우 감소하기 전의 값을 반환합니다.
    • -
  • 피연산자 앞에 붙여(예: --x) 접두사로 사용한 경우 감소한 후의 값을 반환합니다.
    • -
- -

구문

- -
연산자: x-- or --x
-
- -

예제

- -
// 접미사
-var x = 3;
-y = x--; // y = 3, x = 2
-
-// 접두사
-var a = 2;
-b = --a; // a = 1, b = 1
-
- -

단항 부정 (-)

- -

단항 부정 연산자는 피연산자의 앞에 위치하며 부호를 뒤집습니다.

- -

구문

- -
연산자: -x
-
- -

예제

- -
var x = 3;
-y = -x; // y = -3, x = 3
-
-// 단항 부정 연산자는 숫자가 아닌 값을 숫자로 변환함
-var x = "4";
-y = -x; // y = -4
- -

단항 양부호 (+)

- -

단항 양부호 연산자는 피연산자의 앞에 위치하며 피연산자의 값 그대로 평가되지만, 값이 숫자가 아닐 경우 숫자로 변환을 시도합니다. 단항 부정(-) 연산자도 숫자가 아닌 값을 변환할 수 있지만, 단항 양부호가 속도도 제일 빠르고 다른 연산도 수행하지 않으므로 선호해야 할 방법입니다. 문자열로 표현한 정수 및 부동소수점 실수, 문자열이 아닌 true, false, null도 변환할 수 있습니다. 10진수와 (앞에 "0x"가 붙은) 16진수 정수 모두 지원합니다. 음수도 지원하지만 16진수 음수에는 사용할 수 없습니다. 어떤 값을 분석할 수 없으면 {{jsxref("NaN")}}으로 평가됩니다.

- -

구문

- -
연산자: +x
-
- -

예제

- -
+3     // 3
-+"3"   // 3
-+true  // 1
-+false // 0
-+null  // 0
-+function(val) { return val } // NaN
-
- -

명세

- - - - - - - - - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}
{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}
{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}
{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}
- -

브라우저 호환성

- - - -

{{Compat("javascript.operators.arithmetic")}}

- -

같이 보기

- - diff --git a/files/ko/web/javascript/reference/operators/assignment_operators/index.html b/files/ko/web/javascript/reference/operators/assignment_operators/index.html deleted file mode 100644 index 93146d63cf..0000000000 --- a/files/ko/web/javascript/reference/operators/assignment_operators/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: 할당 연산자 -slug: Web/JavaScript/Reference/Operators/Assignment_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators#Assignment_operators -translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators ---- -
{{jsSidebar("Operators")}}
- -

할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다.

- -
{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}
- - - -

개요

- -

기본 할당연산자는 등호(=)로, 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당합니다. 즉, x = y는 y의 값을 x에 할당힙니다. 다른 할당 연산자는 보통 표준 연산의 축약형으로, 다음 표에서 종류와 예시를 확인할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
이름단축 연산자의미
할당x = yx = y
덧셈 할당x += yx = x + y
뺄셈 할당x -= yx = x - y
곱셈 할당x *= yx = x * y
나눗셈 할당x /= yx = x / y
나머지 연산 할당x %= yx = x % y
지수 연산 할당x **= yx = x ** y
왼쪽 시프트 할당x <<= yx = x << y
오른쪽 시프트 할당x >>= yx = x >> y
부호없는 오른쪽 시프트 할당x >>>= yx = x >>> y
비트 AND 할당x &= yx = x & y
비트 XOR 할당x ^= yx = x ^ y
비트 OR 할당x |= yx = x | y
- -

할당

- -

단순 할당 연산자는 값을 변수에 할당합니다. 할당 연산자는 할당의 결과값으로 평가됩니다. 할당 연산자를 연속해서 사용해, 다수의 변수에 하나의 값을 한꺼번에 할당할 수 있습니다. 예제를 참고하세요.

- -

구문

- -
연산자: x = y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  x = 5
-//  y = 10
-//  z = 25
-
-x = y     // x는 10
-x = y = z // x, y, z 모두 25
-
- -

덧셈 할당

- -

덧셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 더하고, 그 결과를 변수에 할당합니다. 두 피연산자의 자료형이 덧셈 할당 연산자의 행동을 결정합니다. 덧셈 연산자처럼 합 또는 연결이 가능합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "덧셈 연산자", "#Addition", 1)}}를 참고하세요.

- -

구문

- -
연산자: x += y
-의미: x = x + y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  foo = "foo"
-//  bar = 5
-//  baz = true
-
-
-// Number + Number -> 합
-bar += 2 // 7
-
-// Boolean + Number -> 합
-baz += 1 // 2
-
-// Boolean + Boolean -> 합
-baz += false // 1
-
-// Number + String -> 연결
-bar += 'foo' // "5foo"
-
-// String + Boolean -> 연결
-foo += false // "foofalse"
-
-// String + String -> 연결
-foo += 'bar' // "foobar"
-
- -

뺄셈 할당

- -

뺄셈 할당 연산자는 변수에서 오른쪽 피연산자의 값을 빼고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "뺄셈 연산자", "#Subtraction", 1)}}를 참고하세요.

- -

구문

- -
연산자: x -= y
-의미: x = x - y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  bar = 5
-
-bar -= 2     // 3
-bar -= "foo" // NaN
-
- -

곱셈 할당

- -

곱셈 할당 연산자는 변수에 오른쪽 피연산자의 값을 곱하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "곱셈 연산자", "#Multiplication", 1)}}를 참고하세요.

- -

구문

- -
연산자: x *= y
-의미: x = x * y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  bar = 5
-
-bar *= 2     // 10
-bar *= "foo" // NaN
-
- -

나눗셈 할당

- -

나눗셈 할당 연산자는 변수를 오른쪽 피연산자로 나누고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나눗셈 연산자", "#Division", 1)}}를 참고하세요.

- -

구문

- -
연산자: x /= y
-의미: x = x / y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  bar = 5
-
-bar /= 2     // 2.5
-bar /= "foo" // NaN
-bar /= 0     // Infinity
-
- -

나머지 연산 할당

- -

나머지 연산 할당은 변수를 오른쪽 피연산자로 나눈 나머지를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "나머지 연산자", "#Remainder", 1)}}를 참고하세요.

- -

구문

- -
연산자: x %= y
-의미: x = x % y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  bar = 5
-
-bar %= 2     // 1
-bar %= "foo" // NaN
-bar %= 0     // NaN
-
- -

거듭제곱 할당

- -

거듭제곱 할당 연산자는 변수를 오른쪽 피연산자만큼 거듭제곱한 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Arithmetic_Operators", "거듭제곱 연산자", "#Exponentiation", 1)}}를 참고하세요.

- -

구문

- -
연산자: x **= y
-의미: x = x ** y
-
- -

예제

- -
// 다음과 같은 변수를 가정
-//  bar = 5
-
-bar **= 2     // 25
-bar **= "foo" // NaN
- -

왼쪽 시프트 할당

- -

왼쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 왼쪽으로 이동하고, 그 결과를 변수에 할당합니다. 더 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "left shift operator", "#Left_shift", 1)}}를 참고하세요.

- -

구문

- -
연산자: x <<= y
-의미: x = x << y
-
- -

예제

- -
var bar = 5; //  (00000000000000000000000000000101)
-bar <<= 2; // 20 (00000000000000000000000000010100)
-
- -

오른쪽 시프트 할당

- -

오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "right shift operator", "#Right_shift", 1)}}를 참고하세요.

- -

구문

- -
연산자: x >>= y
-의미: x = x >> y
-
- -

예제

- -
var bar = 5; //   (00000000000000000000000000000101)
-bar >>= 2;   // 1 (00000000000000000000000000000001)
-
-var bar -5; //    (-00000000000000000000000000000101)
-bar >>= 2;  // -2 (-00000000000000000000000000000010)
-
- -

부호 없는 오른쪽 시프트 할당

- -

부호 없는 오른쪽 시프트 할당 연산자는 변수의 비트를 오른쪽 피연산자의 값만큼 우측으로 이동하고, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", " unsigned right shift operator", "#Unsigned_right_shift", 1)}}을 참고하세요.

- -

구문

- -
연산자: x >>>= y
-의미: x = x >>> y
-
- -

예제

- -
var bar = 5; //   (00000000000000000000000000000101)
-bar >>>= 2;  // 1 (00000000000000000000000000000001)
-
-var bar = -5; // (-00000000000000000000000000000101)
-bar >>>= 2; // 1073741822 (00111111111111111111111111111110)
- -

비트 AND 할당

- -

비트 AND 할당 연산자는 양쪽 피연산자의 이진 표현을 AND 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은{{jsxref("Operators/Bitwise_Operators", "bitwise AND operator", "#Bitwise_AND", 1)}}을 참고하세요.

- -

구문

- -
연산자: x &= y
-의미: x = x & y
-
- -

예제

- -
var bar = 5;
-// 5:     00000000000000000000000000000101
-// 2:     00000000000000000000000000000010
-bar &= 2; // 0
-
- -

비트 XOR 할당

- -

비트 XOR 할당 연산자는 양쪽 피연산자의 이진 표현을 XOR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise XOR operator", "#Bitwise_XOR", 1)}}를 참고하세요.

- -

구문

- -
연산자: x ^= y
-의미: x = x ^ y
-
- -

예제

- -
var bar = 5;
-bar ^= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

비트 OR 할당

- -

비트 OR 할당 연산자는 양쪽 피연산자의 이진 표현을 OR 연산한 후, 그 결과를 변수에 할당합니다. 자세한 내용은 {{jsxref("Operators/Bitwise_Operators", "bitwise OR operator", "#Bitwise_OR", 1)}}를 참고하세요.

- -

문법

- -
연산자: x |= y
-의미: x = x | y
-
- -

예제

- -
var bar = 5;
-bar |= 2; // 7
-// 5: 00000000000000000000000000000101
-// 2: 00000000000000000000000000000010
-// -----------------------------------
-// 7: 00000000000000000000000000000111
-
- -

예제

- -

다른 할당 연산자를 갖는 왼쪽 피연산자

- -

드물게, 할당 연산자(예: x += y)와 그 의미를 나타낸 표현(x = x + y)이 동일하지 않은 경우가 있습니다. 할당 연산자의 왼쪽 피연산자가 다른 할당 연산자를 포함할 때, 왼쪽 피연산자는 한 번만 평가됩니다. 예를 들면 다음과 같습니다.

- -
a[i++] += 5         // i는 한 번만 평가됨
-a[i++] = a[i++] + 5 // i는 두 번 평가됨
-
- -

명세

- - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}
- -

브라우저 호환성

- - - -

{{Compat("javascript.operators.assignment")}}

- -

같이 보기

- - diff --git a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html b/files/ko/web/javascript/reference/operators/bitwise_operators/index.html deleted file mode 100644 index 4cc5ab7b5a..0000000000 --- a/files/ko/web/javascript/reference/operators/bitwise_operators/index.html +++ /dev/null @@ -1,541 +0,0 @@ ---- -title: 비트 연산자 -slug: Web/JavaScript/Reference/Operators/Bitwise_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators ---- -
{{jsSidebar("Operators")}}
- -

비트 연산자는 피연산자를 10진수, 16진수, 8진수가 아니라, 32개의 비트(0과 1) 집합으로 취급합니다. 예를 들어, 10진수 9의 2진수 표기법은 1001입니다. 이렇게, 비트 연산자는 값의 2진수 표현을 사용해 연산하지만, 결과는 표준 JavaScript 숫자 값으로 반환합니다.

- -
{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}
- - - -

다음은 JavaScript의 비트 연산자를 요약한 표입니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
연산자사용방법설명
비트 ANDa & b피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이면 그 비트값에 1을 반환.
비트 ORa | b피연산자를 비트로 바꿨을 때 각각 대응하는 비트가 모두 1이거나 한 쪽이 1이면 1을 반환.
비트 XORa ^ b피연산자를 비트로 바꿨을 때 대응하는 비트가 서로 다르면 1을 반환.
비트 NOT~ a피연산자의 반전된 값을 반환.
왼쪽 시프트a << bShifts a in binary representation b (< 32) bits to the left, shifting in zeros from the right.
부호 유지 오른쪽 시프트a >> bShifts a in binary representation b (< 32) bits to the right, discarding bits shifted off.
부호 버림 오른쪽 시프트a >>> bShifts a in binary representation b (< 32) bits to the right, discarding bits shifted off, and shifting in zeros from the left.
- -

부호 있는 32비트 정수

- -

The operands of all bitwise operators are converted to signed 32-bit integers in two's complement format, except for zero-fill right shift which results in an unsigned 32-bit integer.

- -

Two's complement format means that a number's negative counterpart (e.g. 5 vs. -5) is all the number's bits inverted (bitwise NOT of the number, or ones' complement of the number) plus one.

- -

For example, the following encodes the integer 314:

- -
00000000000000000000000100111010
-
- -

The following encodes ~314, i.e. the one's complement of 314:

- -
11111111111111111111111011000101
-
- -

Finally, the following encodes -314, i.e. the two's complement of 314:

- -
11111111111111111111111011000110
-
- -

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 sign bit.

- -

The number 0 is the integer that is composed completely of 0 bits.

- -
0 (base 10) = 00000000000000000000000000000000 (base 2)
-
- -

The number -1 is the integer that is composed completely of 1 bits.

- -
-1 (base 10) = 11111111111111111111111111111111 (base 2)
-
- -

The number -2147483648 (hexadecimal representation: -0x80000000) is the integer that is composed completely of 0 bits except the first (left-most) one.

- -
-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)
-
- -

The number 2147483647 (hexadecimal representation: 0x7fffffff) is the integer that is composed completely of 1 bits except the first (left-most) one.

- -
2147483647 (base 10) = 01111111111111111111111111111111 (base 2)
-
- -

The numbers -2147483648 and 2147483647 are the minimum and the maximum integers representable throught a 32bit signed number.

- -

비트 논리 연산자

- -

비트 논리 연산자는 다음과 같이 사용됩니다.

- -
    -
  • 피연산자는 32비트 정수로 변환되고, 이진법으로 표현됩니다 (0과 1).
    • -
  • 이진법으로 표현된 첫 번째 피연산자는 두 번째 피연산자와 쌍을 이룹니다: 첫 번째는 첫 번째 비트끼리, 두 번째는 두 번째 비트끼리...
    • -
  • 연산자는 각각의 비트쌍에 적용되고, 결과 또한 이진법으로 구성됩니다.
    • -
- -

& (비트 AND)

- -

비트 연산자 AND를 비트 쌍으로 실행합니다.

- -

Performs the AND operation on each pair of bits. a AND b yields 1 only if both a and b are 1. The truth table for the AND operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba AND b
000
010
100
111
- -
     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10)
-
- -

Bitwise ANDing any number x with 0 yields 0. Bitwise ANDing any number x with -1 yields x.

- -

| (비트 OR)

- -

Performs the OR operation on each pair of bits. a OR b yields 1 if either a or b is 1. The truth table for the OR operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba OR b
000
011
101
111
- -
     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10)
-
- -

Bitwise ORing any number x with 0 yields x.

- -

Bitwise ORing any number x with -1 yields -1.

- -

^ (비트 XOR)

- -

Performs the XOR operation on each pair of bits. a XOR b yields 1 if a and b are different. The truth table for the XOR operation is:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
aba XOR b
000
011
101
110
- -
     9 (base 10) = 00000000000000000000000000001001 (base 2)
-    14 (base 10) = 00000000000000000000000000001110 (base 2)
-                   --------------------------------
-14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10)
-
- -

Bitwise XORing any number x with 0 yields x.

- -

Bitwise XORing any number x with -1 yields ~x.

- -

~ (비트 NOT)

- -

Performs the NOT operator on each bit. NOT a yields the inverted value (a.k.a. one's complement) of a. The truth table for the NOT operation is:

- - - - - - - - - - - - - - - - -
aNOT a
01
10
- -
 9 (base 10) = 00000000000000000000000000001001 (base 2)
-               --------------------------------
-~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10)
-
- -

Bitwise NOTing any number x yields -(x + 1). For example, ~5 yields -6.

- -

비트 시프트 연산자

- -

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.

- -

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.

- -

<< (Left shift)

- -

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.

- -

For example, 9 << 2 yields 36:

- -
     9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 << 2 (base 10): 00000000000000000000000000100100 (base 2) = 36 (base 10)
-
- -

Bitwise shifting any number x to the left by y bits yields x * 2^y.

- -

>> (Sign-propagating right shift)

- -

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".

- -

For example, 9 >> 2 yields 2:

- -
     9 (base 10): 00000000000000000000000000001001 (base 2)
-                  --------------------------------
-9 >> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

Likewise, -9 >> 2 yields -3, because the sign is preserved:

- -
     -9 (base 10): 11111111111111111111111111110111 (base 2)
-                   --------------------------------
--9 >> 2 (base 10): 11111111111111111111111111111101 (base 2) = -3 (base 10)
-
- -

>>> (Zero-fill right shift)

- -

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.

- -

For non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same result. For example, 9 >>> 2 yields 2, the same as 9 >> 2:

- -
      9 (base 10): 00000000000000000000000000001001 (base 2)
-                   --------------------------------
-9 >>> 2 (base 10): 00000000000000000000000000000010 (base 2) = 2 (base 10)
-
- -

However, this is not the case for negative numbers. For example, -9 >>> 2 yields 1073741821, which is different than -9 >> 2 (which yields -3):

- -
      -9 (base 10): 11111111111111111111111111110111 (base 2)
-                    --------------------------------
--9 >>> 2 (base 10): 00111111111111111111111111111101 (base 2) = 1073741821 (base 10)
-
- -

예제

- -

Flags and bitmasks

- -

The bitwise logical operators are often used to create, manipulate, and read sequences of flags, 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).

- -

Suppose there are 4 flags:

- -
    -
  • flag A: we have an ant problem
    • -
  • flag B: we own a bat
    • -
  • flag C: we own a cat
    • -
  • flag D: we own a duck
    • -
- -

These flags are represented by a sequence of bits: DCBA. When a flag is set, it has a value of 1. When a flag is cleared, it has a value of 0. Suppose a variable flags has the binary value 0101:

- -
var flags = 5;   // binary 0101
-
- -

This value indicates:

- -
    -
  • flag A is true (we have an ant problem);
    • -
  • flag B is false (we don't own a bat);
    • -
  • flag C is true (we own a cat);
    • -
  • flag D is false (we don't own a duck);
    • -
- -

Since bitwise operators are 32-bit, 0101 is actually 00000000000000000000000000000101, but the preceding zeroes can be neglected since they contain no meaningful information.

- -

A bitmask is a sequence of bits that can manipulate and/or read flags. Typically, a "primitive" bitmask for each flag is defined:

- -
var FLAG_A = 1; // 0001
-var FLAG_B = 2; // 0010
-var FLAG_C = 4; // 0100
-var FLAG_D = 8; // 1000
-
- -

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:

- -
var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011
-
- -

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 masks 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:

- -
// if we own a cat
-if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true
-   // do stuff
-}
-
- -

A bitmask with multiple set flags acts like an "either/or". For example, the following two are equivalent:

- -
// if we own a bat or we own a cat
-if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true
-   // do stuff
-}
-
- -
// if we own a bat or cat
-var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110
-if (flags & mask) { // 0101 & 0110 => 0100 => true
-   // do stuff
-}
-
- -

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:

- -
// yes, we own a cat and a duck
-var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100
-flags |= mask;   // 0101 | 1100 => 1101
-
- -

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:

- -
// no, we don't have an ant problem or own a cat
-var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

The mask could also have been created with ~FLAG_A & ~FLAG_C (De Morgan's law):

- -
// no, we don't have an ant problem, and we don't own a cat
-var mask = ~FLAG_A & ~FLAG_C;
-flags &= mask;   // 1101 & 1010 => 1000
-
- -

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:

- -
// if we didn't have a bat, we have one now, and if we did have one, bye-bye bat
-// same thing for cats
-var mask = FLAG_B | FLAG_C;
-flags = flags ^ mask;   // 1100 ^ 0110 => 1010
-
- -

Finally, the flags can all be flipped with the NOT operator:

- -
// entering parallel universe...
-flags = ~flags;    // ~1010 => 0101
-
- -

Conversion snippets

- -

Convert a binary string to a decimal number:

- -
var sBinString = "1011";
-var nMyNumber = parseInt(sBinString, 2);
-alert(nMyNumber); // prints 11, i.e. 1011
-
- -

Convert a decimal number to a binary string:

- -
var nMyNumber = 11;
-var sBinString = nMyNumber.toString(2);
-alert(sBinString); // prints 1011, i.e. 11
-
- -

Automate Mask Creation

- -

If you have to create many masks from some boolean values, you can automatize the process:

- -
function createMask () {
-  var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length;
-  for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++);
-  return nMask;
-}
-var mask1 = createMask(true, true, false, true); // 11, i.e.: 1011
-var mask2 = createMask(false, false, true); // 4, i.e.: 0100
-var mask3 = createMask(true); // 1, i.e.: 0001
-// etc.
-
-alert(mask1); // prints 11, i.e.: 1011
-
- -

Reverse algorithm: an array of booleans from a mask

- -

If you want to create an array of booleans from a mask you can use this code:

- -
function arrayFromMask (nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  if (nMask > 0x7fffffff || nMask < -0x80000000) { throw new TypeError("arrayFromMask - out of range"); }
-  for (var nShifted = nMask, aFromMask = []; nShifted; aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1);
-  return aFromMask;
-}
-
-var array1 = arrayFromMask(11);
-var array2 = arrayFromMask(4);
-var array3 = arrayFromMask(1);
-
-alert("[" + array1.join(", ") + "]");
-// prints "[true, true, false, true]", i.e.: 11, i.e.: 1011
-
- -

You can test both algorithms at the same time…

- -
var nTest = 19; // our custom mask
-var nResult = createMask.apply(this, arrayFromMask(nTest));
-
-alert(nResult); // 19
-
- -

For didactic purpose only (since there is the Number.toString(2) method), we show how it is possible to modify the arrayFromMask algorithm in order to create a string containing the binary representation of a number, rather than an array of booleans:

- -
function createBinaryString (nMask) {
-  // nMask must be between -2147483648 and 2147483647
-  for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1);
-  return sMask;
-}
-
-var string1 = createBinaryString(11);
-var string2 = createBinaryString(4);
-var string3 = createBinaryString(1);
-
-alert(string1);
-// prints 00000000000000000000000000001011, i.e. 11
-
- -

명세

- - - - - - - - - - - - - - - - -
Specification
{{SpecName('ESDraft', '#sec-bitwise-not-operator', 'Bitwise NOT Operator')}}
{{SpecName('ESDraft', '#sec-binary-bitwise-operators', 'Binary Bitwise Operators')}}
{{SpecName('ESDraft', '#sec-bitwise-shift-operators', 'Bitwise Shift Operators')}}
- -

브라우저 호환성

- -

{{Compat("javascript.operators.bitwise")}}

- -

같이 보기

- - diff --git a/files/ko/web/javascript/reference/operators/comparison_operators/index.html b/files/ko/web/javascript/reference/operators/comparison_operators/index.html deleted file mode 100644 index cf5ae3afa2..0000000000 --- a/files/ko/web/javascript/reference/operators/comparison_operators/index.html +++ /dev/null @@ -1,216 +0,0 @@ ---- -title: 비교 연산자 -slug: Web/JavaScript/Reference/Operators/Comparison_Operators -tags: - - JavaScript - - Operator - - Reference -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators ---- -
{{jsSidebar("Operators")}}
- -

JavaScript는 엄격한 비교와 형변환 비교 두 가지의 비교 방법을 모두 가지고 있습니다. 엄격(일치) 비교(===)는 두 피연산자가 같은 자료형에, 그 내용도 일치해야만 참입니다. 추상(동등) 비교(==)는 비교 전에 두 피연산자를 동일한 자료형으로 변환합니다. 관계 추상 비교(<=)의 경우 {{glossary("primitive", "원시값")}}으로 바꾸고, 같은 자료형으로 다시 바꾼후 비교를 수행합니다.

- -

문자열의 경우 {{glossary("unicode", "유니코드")}} 값을 사용한 사전순으로 비교합니다.

- -
{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}
- - - -

비교 연산의 특징은 다음과 같습니다.

- -
    -
  • 두 문자열이 같은 문자 시퀀스로 구성되고, 같은 길이를 가지며, 같은 위치에 같은 문자가 존재하면 일치합니다.
    • -
  • 두 숫자는 숫자로서 같은 값(같은 숫자 값)이면 일치합니다. {{jsxref("NaN")}}은 자기 자신을 포함한 그 무엇과도 동등하지 않습니다. +0과 -0은 서로 일치합니다.
    • -
  • 두 불리언은 둘 다 true거나 false이면 일치합니다.
    • -
  • 서로 다른 두 객체는 절대 일치하지도, 동등하지도 않습니다.
    • -
  • 객체를 비교하는 표현식은 두 피연산자가 동일한 객체를 참조하는 경우에만 참입니다.
    • -
  • {{jsxref("null")}}과 {{jsxref("undefined")}}는 자기 자신과 일치하며, 서로 동등합니다.
    • -
- -

동치 연산자

- -

동등 연산자 (==)

- -

동등 연산자는 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 엄격 비교를 수행합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 둘 다 메모리의 같은 객체를 바라보고 있는지 판별합니다.

- -

구문

- -
x == y
-
- -

예제

- -
  1   ==  1        // true
- "1"  ==  1        // true
-  1   == '1'       // true
-  0   == false     // true
-  0   == null      // false
-
-  0   == undefined // false
-null  == undefined // true
-
- -

부등 연산자 (!=)

- -

부등 연산자는 두 피연산자가 같지 않은 경우 참을 반환합니다. 피연산자의 자료형이 일치하지 않는 경우 적절한 자료형으로의 변환을 시도합니다. 피연산자가 모두 객체라면, JavaScript는 내부 참조를 보고, 서로 메모리의 다른 객체를 바라보고 있는지 판별합니다.

- -

구문

- -
x != y
- -

예제

- -
1 !=   2     // true
-1 !=  "1"    // false
-1 !=  '1'    // false
-1 !=  true   // false
-0 !=  false  // false
-
- -

일치 연산자 (===)

- -

일치 연산자는 자료형 변환 없이 두 연산자가 엄격히 같은지 판별합니다.

- -

구문

- -
x === y
- -

예제

- -
3 === 3   // true
-3 === '3' // false
- -

불일치 연산자 (!==)

- -

일치 연산자는 두 연산자가 같지 않거나, 같은 자료형이 아닐 때 참을 반환합니다.

- -

구문

- -
x !== y
- -

예제

- -
3 !== '3' // true
-4 !== 3   // true
-
- -

관계 연산자

- -

이 항목의 모든 연산자는 비교 전에 피연산자를 {{glossary("primitive", "원시값")}}으로 변환합니다. 둘 다 문자열이 되는 경우 사전순으로 비교하고, 그렇지 않으면 숫자로 변환합니다. {{jsxref("NaN")}}과의 비교는 항상 false를 반환합니다.

- -

초과 연산자 (>)

- -

초과 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 큰 경우 참을 반환합니다.

- -

구문

- -
x > y
- -

예제

- -
4 > 3 // true
-
- -

이상 연산자 (>=)

- -

이상 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 참을 반환합니다.

- -

구문

- -
 x >= y
- -

예제

- -
4 >= 3 // true
-3 >= 3 // true
-
- -

미만 연산자 (<)

- -

미만 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작은 경우 참을 반환합니다.

- -

구문

- -
x < y
- -

예제

- -
3 < 4 // true
- -

이하 연산자 (<=)

- -

이하 연산자는 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 참을 반환합니다.

- -

구문

- -
 x <= y
- -

예제

- -
3 <= 4 // true
-
- -

동치 연산자 사용하기

- -

표준 동치, 동등 연산자(==, !=)는 두 피연산자를 비교하기 위해 추상 동치 비교 알고리즘(Abstract Equlity Comparison Algorithm)을 사용합니다. 피연산자 간 자료형이 일치하지 않으면 우선 변환을 시도합니다. 예를 들어 표현식 5 == '5'에서는 비교 전 오른쪽 문자열을 {{jsxref("Number")}}로 변환합니다.

- -

엄격 동치, 일치 연산자(===, !==)는 엄격 동치 비교 알고리즘(Strict Equality Comparison Algorithm)을 사용하며, 같은 자료형을 가진 피연산자를 비교하기 위해 사용합니다. 피연산자 간 자료형이 일치하지 않으면 항상 false이므로, 5 !== '5'입니다.

- -

피연산자의 값은 물론 특정 자료형이어야 하는 경우 일치 연산자를 사용하세요. 그렇지 않은 경우 형변환을 자동으로 해주는 동등 연산자를 사용할 수도 있습니다.

- -

비교 과정에 자료형 변환이 필요한 경우 JavaScript는 {{jsxref("String")}}, {{jsxref("Number")}}, {{jsxref("Boolean")}}, {{jsxref("Object")}} 자료형을 다음과 같이 변환합니다.

- -
    -
  • 숫자와 문자열을 비교할 땐 문자열을 숫자로 변환합니다. 우선, 문자열에서 수학적 값을 도출합니다. 그 후 가장 가까운 Number 자료형 값으로 반올림합니다.
    • -
  • 하나의 연산자가 Boolean인 경우, true는 1, false는 0으로 변환합니다.
    • -
  • 객체를 문자열이나 숫자와 비교하는 경우, JavaScript는 객체의 기본값을 사용합니다. 연산자는 우선 객체의 valueOf() 또는 toString() 메서드를 사용해 문자열 혹은 숫자 값을 받으려 시도합니다. 실패할 경우 런타임 오류가 발생합니다.
    • -
  • 객체를 원시값과 비교하는 경우에만 객체의 변환이 발생합니다. 두 연산자가 모두 객체인 경우 변환하지 않으며, 둘 다 같은 객체를 참조하는 경우 참을 반환합니다.
    • -
- -
참고: String 객체는 자료형 객체지, 문자열이 아닙니다! String 객체는 거의 쓰이지 않으며, 이런 성질로 인해 아래의 결과는 예상치 못한 값일 수 있습니다.
- -
// 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'
- -

명세

- - - - - - - - - - - - - -
Status
{{SpecName('ESDraft', '#sec-equality-operators', 'Equality Operators')}}
{{SpecName('ESDraft', '#sec-relational-operators', 'Relational Operators')}}
- -

브라우저 호환성

- -

{{Compat("javascript.operators.comparison")}}

- -

같이 보기

- - diff --git a/files/ko/web/javascript/reference/operators/operator_precedence/index.html b/files/ko/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..7a82346d09 --- /dev/null +++ b/files/ko/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,462 @@ +--- +title: 연산자 우선순위 +slug: Web/JavaScript/Reference/Operators/연산자_우선순위 +tags: + - JavaScript + - Operator + - 연산자 + - 우선순위 +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +
{{jsSidebar("Operators")}}
+ +

연산자 우선순위는 연산자를 실행하는 순서를 결정합니다. 우선순위가 높은 연산자가 먼저 실행됩니다.

+ +
{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}
+ + + +

우선순위와 결합성

+ +

아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자1과 연산자2의 자리에는 아무 연산자를 넣을 수 있습니다.

+ +
a 연산자1 b 연산자2 c
+ +

두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.

+ +
console.log(3 + 10 * 2);   // 23을 출력
+console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함
+console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜
+
+ +

좌결합성(왼쪽에서 오른쪽으로)은 표현식이 (a 연산자1 b) 연산자2 c와 같이, 우결합성(오른쪽에서 왼쪽으로)은 a 연산자1 (b 연산자2 c)와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.

+ +
a = b = 5; // a = (b = 5);와 같음
+
+ +

이때 대입 연산자는 대입된 값을 반환하므로 a와 b의 값이 5가 됨을 예상할 수 있습니다. 우선 b의 값이 5로 설정되고, 그 다음에는 a의 값이 우변인 b = 5의 반환값 5로 설정됩니다.

+ +

다른 예시로, 좌결합성인 다른 산술 연산자와 달리 거듭제곱 연산자 (**)만은 우결합성입니다. 흥미로운 점으로 표현식의 평가는 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행됩니다.

+ + + + + + + + + + + + + + + + +
코드출력
+ 
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 나눗셈 연산자 (/)에 주목
+console.log(echo("첫째", 6) / echo("둘째", 2));
+
+ 		+ 
+첫째 항 평가함
+둘째 항 평가함
+3
+
+
+ 
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 거듭제곱 연산자 (**)에 주목
+console.log(echo("첫째", 2) ** echo("둘째", 3));
+ 		+ 
+첫째 항 평가함
+둘째 항 평가함
+8
+
+ +

여러 연산자의 우선순위가 같을 때는 결합성을 고려합니다. 위에서와 같이 연산자가 하나이거나 연산자끼리 우선순위가 다를 경우에는 결합성이 결과에 영향을 미치지 않습니다. 아래의 예제에서 같은 종류의 연산자를 여러 번 사용했을 때 결합성이 결과에 영향을 미치는 것을 확인할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + +
코드출력
+ 
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 나눗셈 연산자 (/)에 주목
+console.log(echo("첫째", 6) / echo("둘째", 2) / echo("셋째", 3));
+
+ 		+ 
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+1
+
+
+ 
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 거듭제곱 연산자 (**)에 주목
+console.log(echo("첫째", 2) ** echo("둘째", 3) ** echo("셋째", 2));
+
+ 		+ 
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+512
+
+
+ 
+function echo(name, num) {
+    console.log(name + " 항 평가함");
+    return num;
+}
+// 첫 번째 거듭제곱 연산자 주변의 괄호에 주목
+console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2));
+ 		+ 
+첫째 항 평가함
+둘째 항 평가함
+셋째 항 평가함
+64
+
+ +

위의 예제에서 나눗셈은 좌결합성이므로 6 / 3 / 2는 (6 / 3) / 2와 같습니다. 한편 거듭제곱은 우결합성이므로 2 ** 3 ** 2는 2 ** (3 ** 2)와 같습니다. 그러므로 (2 ** 3) ** 2는 괄호로 인해 실행 순서가 바뀌기 때문에 위 표와 같이 64로 평가됩니다.

+ +

우선순위는 결합성보다 항상 우선하므로, 거듭제곱과 나눗셈을 같이 사용하면 나눗셈보다 거듭제곱이 먼저 계산됩니다. 예를 들어 2 ** 3 / 3 ** 2는 (2 ** 3) / (3 ** 2)와 같으므로 0.8888888888888888로 계산됩니다.

+ +

예제

+ +
3 > 2 && 2 > 1
+// true를 반환
+
+3 > 2 > 1
+// 3 > 2는 true인데, 부등호 연산자에서 true는 1로 변환되므로
+// true > 1은 1 > 1이 되고, 이는 거짓이다.
+// 괄호를 추가하면 (3 > 2) > 1과 같다.
+ +

표

+ +

다음 표는 우선순위 내림차순(21부터 1까지)으로 정렬되어 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
우선순위연산자 유형결합성연산자
21{{jsxref("Operators/Grouping", "그룹", "", 1)}}없음( … )
20{{jsxref("Operators/Property_Accessors", "멤버 접근", "#점_표기법", 1)}}좌결합성… . …
{{jsxref("Operators/Property_Accessors", "계산된 멤버 접근","#괄호_표기법", "1")}}좌결합성… [ … ]
{{jsxref("Operators/new","new")}} (매개변수 리스트 존재)없음new … ( … )
+

함수 호출

+ 		좌결합성… ( … )
Optional chaining좌결합성?.
19{{jsxref("Operators/new","new")}} (매개변수 리스트 생략)우결합성new …
18{{jsxref("Operators/Arithmetic_Operators","후위 증가","#Increment", 1)}}없음… ++
{{jsxref("Operators/Arithmetic_Operators","후위 감소","#Decrement", 1)}}… --
17논리 NOT우결합성! …
비트 NOT~ …
단항 양부호+ …
단항 부정- …
전위 증가++ …
전위 감소-- …
{{jsxref("Operators/typeof", "typeof")}}typeof …
{{jsxref("Operators/void", "void")}}void …
{{jsxref("Operators/delete", "delete")}}delete …
{{jsxref("Operators/await", "await")}}await …
16거듭제곱우결합성… ** …
15곱셈좌결합성… * …
나눗셈… / …
나머지… % …
14덧셈좌결합성… + …
뺄셈… - …
13비트 왼쪽 시프트좌결합성… << …
비트 오른쪽 시프트… >> …
비트 부호 없는 오른쪽 시프트… >>> …
12미만좌결합성… < …
이하… <= …
초과… > …
이상… >= …
{{jsxref("Operators/in", "in")}}… in …
{{jsxref("Operators/instanceof", "instanceof")}}… instanceof …
11동등좌결합성… == …
부등… != …
일치… === …
불일치… !== …
10비트 AND좌결합성… & …
9비트 XOR좌결합성… ^ …
8비트 OR좌결합성… | …
7널 병합 연산자좌결합성… ?? …
6논리 AND좌결합성… && …
5논리 OR좌결합성… || …
4조건우결합성… ? … : …
3할당우결합성… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2{{jsxref("Operators/yield", "yield")}}우결합성yield …
{{jsxref("Operators/yield*", "yield*")}}yield* …
1쉼표 / 시퀀스좌결합성… , …
diff --git "a/files/ko/web/javascript/reference/operators/\353\205\274\353\246\254_\354\227\260\354\202\260\354\236\220(logical_operators)/index.html" "b/files/ko/web/javascript/reference/operators/\353\205\274\353\246\254_\354\227\260\354\202\260\354\236\220(logical_operators)/index.html" deleted file mode 100644 index b442b1d7bd..0000000000 --- "a/files/ko/web/javascript/reference/operators/\353\205\274\353\246\254_\354\227\260\354\202\260\354\236\220(logical_operators)/index.html" +++ /dev/null @@ -1,250 +0,0 @@ ---- -title: 논리 연산자 -slug: Web/JavaScript/Reference/Operators/논리_연산자(Logical_Operators) -tags: - - JavaScript - - Logic - - Not - - Operator - - Reference - - and - - or - - 논리 -translation_of: Web/JavaScript/Reference/Operators -translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators ---- -
{{jsSidebar("Operators")}}
- -

논리 연산자는 보통 {{jsxref("Boolean")}}(논리적) 값과 함께 쓰이며, 불리언 값을 반환합니다. 그런데, &&과 || 연산자는 사실 피연산자 중 하나의 값을 반환합니다. 그러므로 불리언 외의 다른 값과 함께 사용하면 불리언 값이 아닌 것을 반환할 수 있습니다.

- -
{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}
- - - -

설명

- -

다음 표는 논리 연산자의 종류입니다. (expr은 불리언을 포함해서 아무 자료형이나 가능합니다)

- - - - - - - - - - - - - - - - - - - - - - - - -
연산자구문설명
논리 AND (&&)expr1 && expr2expr1을 true로 변환할 수 있는 경우 expr2을 반환하고, 그렇지 않으면 expr1을 반환합니다.
논리 OR (||)expr1 || expr2 -

expr1을 true로 변환할 수 있으면 expr1을 반환하고, 그렇지 않으면 expr2를 반환합니다.

-
논리 NOT (!)!expr단일 피연산자를 true로 변환할 수 있으면 false를 반환합니다. 그렇지 않으면 true를 반환합니다.
- -

값을 true로 변환하면 값이 {{Glossary("truthy", "참")}}인 것입니다.
- 값을 false로 변환할 수 있으면 값이 {{Glossary("falsy", "거짓")}}인 것입니다.

- -

거짓으로 변환할 수 있는 표현의 예는 다음과 같습니다.

- -
    -
  • null
    • -
  • NaN
    • -
  • 0
    • -
  • 빈 문자열 ("", '', ``)
    • -
  • undefined
    • -
- -

&& 연산자와 || 연산자를 불리언 값이 아닌 피연산자와 함께 사용될 수 있지만, 반환 값을 항상 불리언 원시값으로 변환할 수 있으므로 불리언 연산자로 생각할 수 있습니다. 반환 값을 직접 불리언으로 바꾸려면 {{jsxref("Boolean")}} 함수나 이중 부정 연산자를 사용하세요.

- -

단락 평가

- -

논리 표현식을 좌측부터 평가하므로, 아래 규칙에 따라 단락(short-circuit) 평가를 수행합니다.

- -
    -
  • (거짓 표현식) && expr은 거짓 표현식으로 단락 평가됩니다.
    • -
  • (참 표현식) || expr은 참 표현식으로 단락 평가됩니다.
    • -
- -

"단락"이란, 위 규칙에서 expr을 평가하지 않는다는 뜻입니다. 따라서 평가 중 발생해야 할 부작용(예: expr이 함수 호출이면 절대 호출하지 않음)도 나타나지 않습니다. 단락 평가가 발생하는 원인은 첫 번째 피연산자를 평가한 순간 이미 연산자의 결과가 정해지기 때문입니다. 다음 예제를 살펴보세요.

- -
function A(){ console.log('A 호출'); return false; }
-function B(){ console.log('B 호출'); return true; }
-
-console.log( A() && B() );
-// 함수 호출로 인해 콘솔에 "A 호출" 기록
-// 그 후 연산자의 결과값인 "false" 기록
-
-console.log( B() || A() );
-// 함수 호출로 인해 콘솔에 "B 호출" 기록
-// 그 후 연산자의 결과인 "true" 기록
-
- -

연산자 우선순위

- -

다음 두 식은 똑같아 보이지만, && 연산자는 || 이전에 실행되므로 서로 다릅니다. 연산자 우선순위를 참고하세요.

- -
true || false && false      // returns true, because && is executed first
-(true || false) && false    // returns false, because operator precedence cannot apply
- -

논리 AND (&&)

- -

다음은 &&(논리 AND) 연산자의 예제입니다.

- -
a1 = true  && true       // t && t returns true
-a2 = true  && false      // t && f returns false
-a3 = false && true       // f && t returns false
-a4 = false && (3 == 4)   // f && f returns false
-a5 = 'Cat' && 'Dog'      // t && t returns "Dog"
-a6 = false && 'Cat'      // f && t returns false
-a7 = 'Cat' && false      // t && f returns false
-a8 = ''    && false      // f && f returns ""
-a9 = false && ''         // f && f returns false
- -

논리 OR (||)

- -

다음은 ||(논리 OR) 연산자의 예제입니다.

- -
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
-
- -

논리 NOT (!)

- -

다음은 !(논리 NOT) 연산자의 예제입니다.

- -
n1 = !true               // !t returns false
-n2 = !false              // !f returns true
-n3 = !''                 // !f returns true
-n4 = !'Cat'              // !t returns false
-
- -

이중 NOT (!!)

- -

NOT 연산자 다수를 연속해서 사용하면 아무 값이나 불리언 원시값으로 강제 변환할 수 있습니다. 변환 결과는 피연산자 값의 "참스러움"이나 "거짓스러움"에 따릅니다. ({{Glossary("truthy", "참")}}과 {{Glossary("falsy", "거짓")}}을 참고하세요)

- -

동일한 변환을 {{jsxref("Boolean")}} 함수로도 수행할 수 있습니다.

- -
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
-
- -

불리언 변환 규칙

- -

AND에서 OR로 변환

- -

불리언 계산에서, 다음 두 코드는 항상 같습니다.

- -
bCondition1 && bCondition2
-
- -
!(!bCondition1 || !bCondition2)
- -

OR에서 AND로 변환

- -

불리언 계산에서, 다음 두 코드는 항상 같습니다.

- -
bCondition1 || bCondition2
-
- -
!(!bCondition1 && !bCondition2)
- -

NOT 간 변환

- -

불리언 계산에서, 다음 두 코드는 항상 같습니다.

- -
!!bCondition
-
- -
bCondition
- -

중첩 괄호 제거

- -

논리 표현식은 항상 왼쪽에서 오른쪽으로 평가되므로, 몇 가지 규칙을 따르면 복잡한 표현식에서 괄호를 제거할 수 있습니다.

- -

중첩 AND 제거

- -

불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.

- -
bCondition1 || (bCondition2 && bCondition3)
-
- -
bCondition1 || bCondition2 && bCondition3
- -

중첩 OR 제거

- -

불리언의 합성 계산에서, 다음 두 코드는 항상 같습니다.

- -
bCondition1 && (bCondition2 || bCondition3)
-
- -
!(!bCondition1 || !bCondition2 && !bCondition3)
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES1')}}{{Spec2('ES1')}}Initial definition.
{{SpecName('ES5.1', '#sec-11.11')}}{{Spec2('ES5.1')}}Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
{{SpecName('ES6', '#sec-binary-logical-operators')}}{{Spec2('ES6')}}Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
{{SpecName('ESDraft', '#sec-binary-logical-operators')}}{{Spec2('ESDraft')}}Defined in several sections of the specification: Logical NOT Operator, Binary Logical Operators
- -

브라우저 호환성

- - - -

{{Compat("javascript.operators.logical")}}

- -

같이 보기

- -
    -
  • 비트 연산자
    • -
  • {{jsxref("Boolean")}}
    • -
  • {{Glossary("truthy", "참")}}
    • -
  • {{Glossary("falsy", "거짓")}}
    • -
diff --git "a/files/ko/web/javascript/reference/operators/\354\227\260\354\202\260\354\236\220_\354\232\260\354\204\240\354\210\234\354\234\204/index.html" "b/files/ko/web/javascript/reference/operators/\354\227\260\354\202\260\354\236\220_\354\232\260\354\204\240\354\210\234\354\234\204/index.html" deleted file mode 100644 index 7a82346d09..0000000000 --- "a/files/ko/web/javascript/reference/operators/\354\227\260\354\202\260\354\236\220_\354\232\260\354\204\240\354\210\234\354\234\204/index.html" +++ /dev/null @@ -1,462 +0,0 @@ ---- -title: 연산자 우선순위 -slug: Web/JavaScript/Reference/Operators/연산자_우선순위 -tags: - - JavaScript - - Operator - - 연산자 - - 우선순위 -translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence ---- -
{{jsSidebar("Operators")}}
- -

연산자 우선순위는 연산자를 실행하는 순서를 결정합니다. 우선순위가 높은 연산자가 먼저 실행됩니다.

- -
{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}
- - - -

우선순위와 결합성

- -

아래와 같이 표현할 수 있는 표현식을 생각해 봅시다. 연산자1과 연산자2의 자리에는 아무 연산자를 넣을 수 있습니다.

- -
a 연산자1 b 연산자2 c
- -

두 연산자의 우선순위(아래 표 참조)가 다를 경우, 우선순위가 높은 연산자가 먼저 실행되고 결합성은 영향을 미치지 않습니다. 아래 예제에서는 덧셈이 곱셈보다 먼저 쓰였음에도 곱셈의 우선순위가 높기 때문에 먼저 실행됩니다.

- -
console.log(3 + 10 * 2);   // 23을 출력
-console.log(3 + (10 * 2)); // 23을 출력, 괄호는 불필요함
-console.log((3 + 10) * 2); // 26을 출력, 괄호로 인해 실행 순서가 바뀜
-
- -

좌결합성(왼쪽에서 오른쪽으로)은 표현식이 (a 연산자1 b) 연산자2 c와 같이, 우결합성(오른쪽에서 왼쪽으로)은 a 연산자1 (b 연산자2 c)와 같이 계산된다는 의미입니다. 대입 연산자는 우결합성이므로 다음과 같은 코드를 작성할 수 있습니다.

- -
a = b = 5; // a = (b = 5);와 같음
-
- -

이때 대입 연산자는 대입된 값을 반환하므로 a와 b의 값이 5가 됨을 예상할 수 있습니다. 우선 b의 값이 5로 설정되고, 그 다음에는 a의 값이 우변인 b = 5의 반환값 5로 설정됩니다.

- -

다른 예시로, 좌결합성인 다른 산술 연산자와 달리 거듭제곱 연산자 (**)만은 우결합성입니다. 흥미로운 점으로 표현식의 평가는 결합성과 무관하게 항상 왼쪽에서 오른쪽으로 진행됩니다.

- - - - - - - - - - - - - - - - -
코드출력
- 
-function echo(name, num) {
-    console.log(name + " 항 평가함");
-    return num;
-}
-// 나눗셈 연산자 (/)에 주목
-console.log(echo("첫째", 6) / echo("둘째", 2));
-
- 		- 
-첫째 항 평가함
-둘째 항 평가함
-3
-
-
- 
-function echo(name, num) {
-    console.log(name + " 항 평가함");
-    return num;
-}
-// 거듭제곱 연산자 (**)에 주목
-console.log(echo("첫째", 2) ** echo("둘째", 3));
- 		- 
-첫째 항 평가함
-둘째 항 평가함
-8
-
- -

여러 연산자의 우선순위가 같을 때는 결합성을 고려합니다. 위에서와 같이 연산자가 하나이거나 연산자끼리 우선순위가 다를 경우에는 결합성이 결과에 영향을 미치지 않습니다. 아래의 예제에서 같은 종류의 연산자를 여러 번 사용했을 때 결합성이 결과에 영향을 미치는 것을 확인할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - -
코드출력
- 
-function echo(name, num) {
-    console.log(name + " 항 평가함");
-    return num;
-}
-// 나눗셈 연산자 (/)에 주목
-console.log(echo("첫째", 6) / echo("둘째", 2) / echo("셋째", 3));
-
- 		- 
-첫째 항 평가함
-둘째 항 평가함
-셋째 항 평가함
-1
-
-
- 
-function echo(name, num) {
-    console.log(name + " 항 평가함");
-    return num;
-}
-// 거듭제곱 연산자 (**)에 주목
-console.log(echo("첫째", 2) ** echo("둘째", 3) ** echo("셋째", 2));
-
- 		- 
-첫째 항 평가함
-둘째 항 평가함
-셋째 항 평가함
-512
-
-
- 
-function echo(name, num) {
-    console.log(name + " 항 평가함");
-    return num;
-}
-// 첫 번째 거듭제곱 연산자 주변의 괄호에 주목
-console.log((echo("첫째", 2) ** echo("둘째", 3)) ** echo("셋째", 2));
- 		- 
-첫째 항 평가함
-둘째 항 평가함
-셋째 항 평가함
-64
-
- -

위의 예제에서 나눗셈은 좌결합성이므로 6 / 3 / 2는 (6 / 3) / 2와 같습니다. 한편 거듭제곱은 우결합성이므로 2 ** 3 ** 2는 2 ** (3 ** 2)와 같습니다. 그러므로 (2 ** 3) ** 2는 괄호로 인해 실행 순서가 바뀌기 때문에 위 표와 같이 64로 평가됩니다.

- -

우선순위는 결합성보다 항상 우선하므로, 거듭제곱과 나눗셈을 같이 사용하면 나눗셈보다 거듭제곱이 먼저 계산됩니다. 예를 들어 2 ** 3 / 3 ** 2는 (2 ** 3) / (3 ** 2)와 같으므로 0.8888888888888888로 계산됩니다.

- -

예제

- -
3 > 2 && 2 > 1
-// true를 반환
-
-3 > 2 > 1
-// 3 > 2는 true인데, 부등호 연산자에서 true는 1로 변환되므로
-// true > 1은 1 > 1이 되고, 이는 거짓이다.
-// 괄호를 추가하면 (3 > 2) > 1과 같다.
- -

표

- -

다음 표는 우선순위 내림차순(21부터 1까지)으로 정렬되어 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
우선순위연산자 유형결합성연산자
21{{jsxref("Operators/Grouping", "그룹", "", 1)}}없음( … )
20{{jsxref("Operators/Property_Accessors", "멤버 접근", "#점_표기법", 1)}}좌결합성… . …
{{jsxref("Operators/Property_Accessors", "계산된 멤버 접근","#괄호_표기법", "1")}}좌결합성… [ … ]
{{jsxref("Operators/new","new")}} (매개변수 리스트 존재)없음new … ( … )
-

함수 호출

- 		좌결합성… ( … )
Optional chaining좌결합성?.
19{{jsxref("Operators/new","new")}} (매개변수 리스트 생략)우결합성new …
18{{jsxref("Operators/Arithmetic_Operators","후위 증가","#Increment", 1)}}없음… ++
{{jsxref("Operators/Arithmetic_Operators","후위 감소","#Decrement", 1)}}… --
17논리 NOT우결합성! …
비트 NOT~ …
단항 양부호+ …
단항 부정- …
전위 증가++ …
전위 감소-- …
{{jsxref("Operators/typeof", "typeof")}}typeof …
{{jsxref("Operators/void", "void")}}void …
{{jsxref("Operators/delete", "delete")}}delete …
{{jsxref("Operators/await", "await")}}await …
16거듭제곱우결합성… ** …
15곱셈좌결합성… * …
나눗셈… / …
나머지… % …
14덧셈좌결합성… + …
뺄셈… - …
13비트 왼쪽 시프트좌결합성… << …
비트 오른쪽 시프트… >> …
비트 부호 없는 오른쪽 시프트… >>> …
12미만좌결합성… < …
이하… <= …
초과… > …
이상… >= …
{{jsxref("Operators/in", "in")}}… in …
{{jsxref("Operators/instanceof", "instanceof")}}… instanceof …
11동등좌결합성… == …
부등… != …
일치… === …
불일치… !== …
10비트 AND좌결합성… & …
9비트 XOR좌결합성… ^ …
8비트 OR좌결합성… | …
7널 병합 연산자좌결합성… ?? …
6논리 AND좌결합성… && …
5논리 OR좌결합성… || …
4조건우결합성… ? … : …
3할당우결합성… = …
… += …
… -= …
… **= …
… *= …
… /= …
… %= …
… <<= …
… >>= …
… >>>= …
… &= …
… ^= …
… |= …
2{{jsxref("Operators/yield", "yield")}}우결합성yield …
{{jsxref("Operators/yield*", "yield*")}}yield* …
1쉼표 / 시퀀스좌결합성… , …
diff --git a/files/ko/web/javascript/reference/statements/default/index.html b/files/ko/web/javascript/reference/statements/default/index.html deleted file mode 100644 index 4fe127b7db..0000000000 --- a/files/ko/web/javascript/reference/statements/default/index.html +++ /dev/null @@ -1,122 +0,0 @@ ---- -title: default -slug: Web/JavaScript/Reference/Statements/default -tags: - - JavaScript - - Keyword - - Reference -translation_of: Web/JavaScript/Reference/Statements/switch -translation_of_original: Web/JavaScript/Reference/Statements/default ---- -
{{jsSidebar("Statements")}}
- -

default 키워드는 {{jsxref("Statements/switch", "switch")}} 구문과 {{jsxref("Statements/export", "export")}} 구문에서 사용할 수 있습니다.

- -
{{EmbedInteractiveExample("pages/js/statement-default.html")}}
- - - -

구문

- -

{{jsxref("Statements/switch", "switch")}} 구문 내에서는 다음과 같이 사용합니다.

- -
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;]
-}
- -

{{jsxref("Statements/export", "export")}} 구문 내에서는 다음과 같이 사용합니다.

- -
export default nameN
- -

설명

- -

세부사항을 보려면,

- -
    -
  • {{jsxref("Statements/switch", "switch")}} 구문,
    • -
  • {{jsxref("Statements/export", "export")}} 구문 페이지를 확인하세요.
    • -
- -

예제

- -

switch에서 default 사용

- -

아래 예제에서 expr 이 "오렌지" 또는 "사과"일 때, 프로그램은 값을 "오렌지" 또는 "사과"와 일치시키고 해당 명령문을 실행합니다. 기본(default) 키워드는 다른 경우에 도움이 되며 연관된 명령문을 실행합니다.

- -
switch (expr) {
-  case '오렌지':
-    console.log('오렌지는 1000원입니다.');
-    break;
-  case '사과':
-    console.log('사과는 500원입니다.');
-    break;
-  default:
-    console.log('죄송합니다. ' + expr + '의 재고가 다 떨어졌습니다.');
-}
- -

export에서 default 사용

- -

단일 값을 내보내거나 모듈의 기본 값이 필요한 경우, 기본 내보내기를 사용할 수 있습니다.

- -
// module "my-module.js"
-let cube = function cube(x) {
-  return x * x * x;
-};
-export default cube;
- -

다른 스크립트에서 가져오는 건 간단합니다.

- -
// 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
-
- -

명세

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}{{Spec2('ES6')}}
{{SpecName('ES6', '#sec-exports', 'Exports')}}{{Spec2('ES6')}}
{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}{{Spec2('ESDraft')}}
{{SpecName('ESDraft', '#sec-exports', 'Exports')}}{{Spec2('ESDraft')}}
- -

브라우저 호환성

- - - -

{{Compat("javascript.statements.default")}}

- -

같이 보기

- -
    -
  • {{jsxref("Statements/export", "export")}}
    • -
  • {{jsxref("Statements/switch", "switch")}}
    • -
diff --git a/files/ko/web/javascript/shells/index.html b/files/ko/web/javascript/shells/index.html new file mode 100644 index 0000000000..718fa8bdc2 --- /dev/null +++ b/files/ko/web/javascript/shells/index.html @@ -0,0 +1,40 @@ +--- +title: JavaScript 쉘 +slug: Web/JavaScript/쉘 +translation_of: Web/JavaScript/Shells +--- +
{{JsSidebar}}
+ +

여러분은 JavaScript 쉘을 통해 웹페이지 새로고침하지 않고 빠르게 JavaScript 의 코드를 테스트해볼 수 있습니다. 코드를 개발하고 디버깅하는데 매우 유용한 도구입니다.

+ +

독립적으로 사용할 수 있는 JavaScript 쉘

+ +

아래의 Javascript 쉘은 펄과 파이썬과 같이 독립적인 환경을 제공합니다.

+ +
    +
  • Node.js - Node.js는 빠르고 확장 가능한 네트워크 어플리케이션을 쉽게 만들 수 있는 플랫폼입니다.
    • +
  • JSDB - Windows, Mac, Linux 환경에 맞는 컴파일된 바이너리를 제공하는 독립적인 독립적인 Javascript 쉘입니다.
    • +
  • JavaLikeScript - 네이티브와 JavaScript 라이브러리 모두를 제공하는 독립적이고 확장 가능한 JavaScript 쉘입니다.
    • +
  • GLUEscript - 크로스-플랫폼 JavaScript 어플리케이션을 제작하기 위한 독립적인 JavaScript 쉘입니다. GUI 앱을 위한 wxWidgets(구 wxJavaScript)를 사용할 수 있습니다.
    • +
  • jspl - Perl의 영향을 받은 독립적인 JavaScript 쉘입니다. JavaScript에서 직접 perl 모듈을 사용할 수 있습니다: 데이터베이스 통합을 위한 DBI, GUI 앱을 위한 GTK2, 시스템 프로그래밍을 위한 POSIX, 기타 등등. 현재로서는 JavaScript 프로그래머를 위한 최고의 CPAN입니다.
    • +
  • ShellJS - Node.js를 위한 포터블 Unix 쉘 명령도구입니다.
    • +
+ +

JavaScript 쉘 리스트

+ +

아래는 Mozilla에서 사용할 수 있는 JavaScript Shell입니다.

+ +
    +
  • Firefox는 Scratchpad라 불리는 자바스크립트 내장 콘솔을 가지고있습니다.(version6 이후)
    • +
  • JavaScript Shell (js) - JavaScript를 위한 command line인터프리터입니다.
    • +
  • XPConnect인 xpcshell - Mozilla개발자는 위한 유용한 쉘 입니다. (가끔 필요할거에요.)
    • +
  • Babel REPL - 최신 자바스크립트를 시험해 볼 수 있는 브라우저 기반 REPL입니다.
    • +
  • ES6Console.com - 브라우저에서 ECMAScript 2015 코드를 테스트 해보기위한 open-source JavaScript 콘솔 입니다.
    • +
  • jsconsole.com -- 웹에서 빠른속도록 JavaScript 코드를 테스트 해 볼 수 있는 open-source JavaScript 콘솔 입니다.
    • +
  • JavaScript Shell (web page) - Extension Developer's Extension의 일부 기능으로 사용 가능합니다.
    • +
  • Jash: JavaScript Shell - 웹에서 커맨드라인접속이 가능한 DHTML 기반 쉘 입니다.
    • +
  • MozRepl - Firefox 및 기타 Mozilla 응용 프로그램에 연결하고 코드를 실행하는 중에 코드내용을 다루거나 확인 할 수 있습니다.
    • +
  • Execute JS - (더이상 지원되지않음) - 확장 된 JavaScript 콘솔을 제공하는 Firefox 확장 기능입니다. 임의의 JavaScript 코드 및 수정 기능을 편안하게 입력하고 실행할 수 있습니다.
    • +
  • xqjs - Firefox를 위한 간단한 콘솔
    • +
  • Firebug - 콘솔을 포함한 Firefox 개발자도구입니다.
    • +
diff --git "a/files/ko/web/javascript/\354\211\230/index.html" "b/files/ko/web/javascript/\354\211\230/index.html" deleted file mode 100644 index 718fa8bdc2..0000000000 --- "a/files/ko/web/javascript/\354\211\230/index.html" +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: JavaScript 쉘 -slug: Web/JavaScript/쉘 -translation_of: Web/JavaScript/Shells ---- -
{{JsSidebar}}
- -

여러분은 JavaScript 쉘을 통해 웹페이지 새로고침하지 않고 빠르게 JavaScript 의 코드를 테스트해볼 수 있습니다. 코드를 개발하고 디버깅하는데 매우 유용한 도구입니다.

- -

독립적으로 사용할 수 있는 JavaScript 쉘

- -

아래의 Javascript 쉘은 펄과 파이썬과 같이 독립적인 환경을 제공합니다.

- -
    -
  • Node.js - Node.js는 빠르고 확장 가능한 네트워크 어플리케이션을 쉽게 만들 수 있는 플랫폼입니다.
    • -
  • JSDB - Windows, Mac, Linux 환경에 맞는 컴파일된 바이너리를 제공하는 독립적인 독립적인 Javascript 쉘입니다.
    • -
  • JavaLikeScript - 네이티브와 JavaScript 라이브러리 모두를 제공하는 독립적이고 확장 가능한 JavaScript 쉘입니다.
    • -
  • GLUEscript - 크로스-플랫폼 JavaScript 어플리케이션을 제작하기 위한 독립적인 JavaScript 쉘입니다. GUI 앱을 위한 wxWidgets(구 wxJavaScript)를 사용할 수 있습니다.
    • -
  • jspl - Perl의 영향을 받은 독립적인 JavaScript 쉘입니다. JavaScript에서 직접 perl 모듈을 사용할 수 있습니다: 데이터베이스 통합을 위한 DBI, GUI 앱을 위한 GTK2, 시스템 프로그래밍을 위한 POSIX, 기타 등등. 현재로서는 JavaScript 프로그래머를 위한 최고의 CPAN입니다.
    • -
  • ShellJS - Node.js를 위한 포터블 Unix 쉘 명령도구입니다.
    • -
- -

JavaScript 쉘 리스트

- -

아래는 Mozilla에서 사용할 수 있는 JavaScript Shell입니다.

- -
    -
  • Firefox는 Scratchpad라 불리는 자바스크립트 내장 콘솔을 가지고있습니다.(version6 이후)
    • -
  • JavaScript Shell (js) - JavaScript를 위한 command line인터프리터입니다.
    • -
  • XPConnect인 xpcshell - Mozilla개발자는 위한 유용한 쉘 입니다. (가끔 필요할거에요.)
    • -
  • Babel REPL - 최신 자바스크립트를 시험해 볼 수 있는 브라우저 기반 REPL입니다.
    • -
  • ES6Console.com - 브라우저에서 ECMAScript 2015 코드를 테스트 해보기위한 open-source JavaScript 콘솔 입니다.
    • -
  • jsconsole.com -- 웹에서 빠른속도록 JavaScript 코드를 테스트 해 볼 수 있는 open-source JavaScript 콘솔 입니다.
    • -
  • JavaScript Shell (web page) - Extension Developer's Extension의 일부 기능으로 사용 가능합니다.
    • -
  • Jash: JavaScript Shell - 웹에서 커맨드라인접속이 가능한 DHTML 기반 쉘 입니다.
    • -
  • MozRepl - Firefox 및 기타 Mozilla 응용 프로그램에 연결하고 코드를 실행하는 중에 코드내용을 다루거나 확인 할 수 있습니다.
    • -
  • Execute JS - (더이상 지원되지않음) - 확장 된 JavaScript 콘솔을 제공하는 Firefox 확장 기능입니다. 임의의 JavaScript 코드 및 수정 기능을 편안하게 입력하고 실행할 수 있습니다.
    • -
  • xqjs - Firefox를 위한 간단한 콘솔
    • -
  • Firebug - 콘솔을 포함한 Firefox 개발자도구입니다.
    • -
diff --git "a/files/ko/web/javascript/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" "b/files/ko/web/javascript/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" deleted file mode 100644 index 4eeb42cae2..0000000000 --- "a/files/ko/web/javascript/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,328 +0,0 @@ ---- -title: 시작하기 (자바스크립트 튜토리얼) -slug: Web/JavaScript/시작하기 -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics -translation_of_original: Web/JavaScript/Getting_Started ---- -

왜 자바스크립트인가?

-

자바스크립트는 종종 오해할 수 있는 강력하고 복잡한 컴퓨터 언어이다. 사용자가 쉽게 데이터를 입력하고 결과를 볼 수 있게 어플리케이션을 빠르게 개발 할 수 있다.

-

 웹브라우저를 중심으로 또한 ECMAScript로 알려진 자바스크립트의 주요 장점은 이와 같이 브라우저를 지원하는 모든 플랫폼에 동일한 결과를 만들 수 있다. 이 페이지의 예제는 구글 맵스처럼 맥 OS와 윈도우, 리눅스에서 실행한다. 수많은 자바스크립트 라이브러리의 최근 성장과 함께 AJax 어플리케이션을 개발하거나 이벤트 처리하기, 에니메이션 만들기, DOM 엘리먼트 선택하기, 도큐먼트 탐색하기가 이제 더욱 쉬워졌다. 다양한 소유권의 이익에 의해 추진된 다른 기술의 과대 광고와는 달리 자바스크립트는 모두 무료이면서 보편적으로 채택된 클라이언트 사이드 프로그래밍 언어이면서 정말이지 유일한 크로스 플래폼이다.

-

당신이 이미 알아야 하는 것

-

자바스크립트는 프로그래밍을 같이 시작하기 위해 매우 쉬운 언어이다. 시작하기 위해서  당신이 필요한 모든 것은 텍스트 에디터와  웹브라우저이다.  

-

이 문서의 범위를 벗어나는 자바스크립트와 함께 개발되고 통합 할 수 있는 다른 기술은 많이 있다. 첫날부터 구글맵스과 같이 완전한 어플리케이션을 만들 것이라고 기대하지 마라!

-

시작하기

-

자바스크립트로 시작하기는 매우 쉽다. 당신은 복잡한 개발 프로그램 설치가 필요가 없다. 컴파일러를 사용하거나 프로그램 만들기, 쉘을 어떻게 사용하는지 알 필요가 없다. 자바스크립트는 당신의 웹 브라우저에서 해석 된다. 당신이 해야 할 모든 일은 텍스트 파일에 당신의 프로그램을 저장하고 당신의 웹브라우저를 연다. 단지 그 것이다!

-

자바스크립트는 입문 컴퓨터 언어로서 최고의 프로그래밍 언어이다. 새로운 학생에게  즉시 피드백 할 수 있게 하고 그들이 아마도 그들의 실생활에 유용한 것을 발견할 수 있는 도구들에 관한 것을 그들에게 가르친다. 이것은 전용 소프트웨어 개발자를 위해 정말 유용한 C, C++, JAVA 와는 뚜렷하게  대조적이다. 

-

브라우저 호환성 이슈들

-

다른 브라우저에서 사용이 가능한 어떤 기능 중에는 차이가 있다. Mozilla, Chrome, Microsoft IE, Apple Safari, Opera에서 가동하는 것에 따라 변동될 수 있다. 이런 변동사항을 문서화 하려고 한다.  사용 가능한 다양한 크로스 플랫폼 자바스크립트 API 사용하여 이런 이슈들을 완하시킬 수 있다. 이런 API는 공통 기능으로 제공하고 이 브라우저의  변동된 것을 숨긴다. 

-

예제를 시도하는 방법

-

아래의 예제들은  몇가지 샘플 코드를 가지고 있다. 이 예제들을 시도하는 방법은 여러가지가 있다. 만약 당신이 이미 당신의 웹사이트를 가지고 있다면 당신은 당신의 웹사이트에 새로운 웹 페이지로써 이 예제들을 저장할 수 있어야 한다.

-

만약 당신이 당신의 웹사이트를 가지고 있지 않다면 당신의 컴퓨터에 파일로써 이 예제들을 저장할 수 있고 당신이 현재 사용하고 있는 웹브라우저를 통해 예제들을 열 수 있다. 자바스크립트는 이런 이유로 시작하려는 프로그래머가 사용하기 매운 쉬운 언어이다. 당신은 컴파일러 또는 개발 환경이 필요하지 않다. 그리고 당신과 당신의 브라우저가 시작하기 위해서 필요한 모든 것이다!

-

예제 : 마우스 클릭 잡기

-

이벤트 핸들링(이벤트 타입들, 핸들러 등록, 전파 등)의 특성은 이 간단한 예제들을 완전히 적용하기에는 너무 광범위하다. 그런데 이 예제는 자바스크립트 이벤트 시스템에 대한 조금의 탐구도 없이 마우스 클릭을 잡기를 설명할 수 없다. 이 예제는 자바스크립트 이벤트에 관해 전체 자세한 내용을 가볍게 스쳐 지나 갈 것이고 만약 당신이 여기 설명된 기본 기능의 범위를 넘어서고 싶다면 자바스크립트 이벤트 시스템에 관해 더 자세히 읽어야 함을 명심하라.

-

'마우스'이벤트들은 사용자 동작에 반응한 웹브라우저에 의해 발생된 전체 이벤트의  집합이다.다음은 사용자의 마우스 동작에 대한 응답으로 방출되는 이벤트의 목록이다.

-
    -
  • Click - 사용자가 마우스를 클릭했을 때 발생
    • -
  • DblClick - 사용자가 마우스를 더블 클릭했을 때 발생
    • -
  • MouseDown -  사용자가 마우스 버튼을 눌렀을 때 발생(클릭의 전반부)
    • -
  • MouseUp - 사용자가 마우스 버튼을 해제했을 때 발생(클릭의 후반후)
    • -
  • MouseOut - 마우스 포인터가 객체의 그래픽 범위를 떠나려고 할때 발생
    • -
  • MouseOver -  마우스 포인터가 객체의 그래픽 범위를 진입하려고 할때 발생
    • -
  • MouseMove - 마우스 포인터가 객체의 그래픽 범위 안에서 마우스 포인터를 움직이려 할때 발생
    • -
  • ContextMenu - 사용자가 오른쪽 마우스 버튼을 클릭했을 때 발생
    • -
-

인라인 이벤트 핸들러, HTML의 최신버전에서 주의할 것은 다시 말하면 하나가 태그 애트리뷰트들로써 추가 되었다는 것은 모두 소문자 이고 스크립트의 이벤트 핸들러가 항상 모든 소문자이어야 하는 것을 예상된다.

-

이벤트 핸들러를 등록하려는 이러한 이벤트들을 캡처하기 위해 가장 간단한 방법은 HTML을 사용하여 당신의 엘리먼트의 애트리뷰트들로서 개별적인 이벤트들을 지정하는 것이다.

-

예제:

-
  <span onclick="alert('Hello World!');">Click Here</span>
-

당신이 실행하기 원하는 자바스크립트 코드를 애트리뷰트 값으로서 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :

-
<script>
-  function clickHandler() {
-     alert("Hello, World!");
-  }
-</script>
-<span onclick="clickHandler();">Click Here</span>
-

또한 발생된 이벤트 객체는 캡처하거나 참조할 수 있으며 객체가 이벤트를 받거나 이벤트 타입 그리고 마우스가 클릭됐을 때 그러한 이벤트에 관한 특성을 접근하는 무언가 개발하는 것을  제공할 수 있다. 인라인 예제를 다시 사용 하라:

-
<script>
-  function clickHandler(event) {
-    var eType = event.type;
-    /* 다음은 호환성을 위한 것이다. */
-    /* Moz는 이벤트 객체의 target 프로퍼티로 채운다. */
-    /* IE는 srcElement 프로퍼티로 채운다.*/
-    var eTarget = event.target || event.srcElement;
-
-    alert( "Captured Event (type=" + eType + ", target=" + eTarget );
-  }
-</script>
-<span onclick="clickHandler(event);">Click Here</span>
-

당신의 HTML안에 이벤트를 수신 등록 이외에 당신은 당신의 자바스크립트에 의해 생성된 어떠한 HTML엘리먼트 객체의 똑같은 이름으로 애트리뷰트들을 마찬가지로 설정할 수 있다. 아래의 예는 span 객체를 인스터트화하고 페이지의 body에  추가하고 mouse-over, mouse-out, mouse-down, mouse-up 이벤트들을 수신하기위해 span 객체를 등록한다. 

-
<body></body>
-<script>
-  function mouseeventHandler(event) {
-    /*다음은 호환성을 위한 것이다. */
-    /* IE는 기본적으로 이벤트 객체를 전달하지 않는다. */
-    if (!event) event = window.event;
-
-    /* 미리 이벤트 타입과 타켓 얻기 */
-    var eType = event.type;
-    var eTarget = event.target || event.srcElement;
-    alert(eType +' event on element with id: '+ eTarget.id);
-  }
-
- function onloadHandler() {
-   /*  페이지의 body 엘리먼트를 참조하여 얻기 */
-   var body = document.body;
-   /* 클릭되기 위한 span 엘리먼트 생성하기 */
-   var span = document.createElement('span');
-   span.id = 'ExampleSpan';
-   span.appendChild(document.createTextNode ('Click Here!'));
-
-   /* 특정 마우스 이벤트를 받기 위해 spna 객체 등록하기 - 이벤트들의 소문자에 유의하라 그러나 당신이 그것을 치환하기 위한 이름의 선택은 자유다.
-   */
-   span.onmousedown = mouseeventHandler;
-   span.onmouseup = mouseeventHandler;
-   span.onmouseover = mouseeventHandler;
-   span.onmouseout = mouseeventHandler;
-
-   /* 페이지에 span 보여주기 */
-   body.appendChild(span);
-}
-
-window.onload = onloadHandler; // 우리가 핸들러를 치환한 이후에는 우리는 함수 이름 뒤에 ()을 붙여서는 안된다.
-</script>
-

예제: 키보드 이벤트 잡기

-

위의 예제인 "마우스 이벤트 잡기"와 유사하게 키보드 이벤트 잡기는 자바스크립트 이벤트 시스템 탐험에 의존한다. 키보드 이벤트들은 어떤 키든 키보드에서 사용될 때마다 발생한다.

-

키보드 동작에 반응하여 방출 가능한 키보드 이벤트 목록들은 마으스로 사용 가능한 것보다 상당히 작다. 

-
    -
  • KeyPress - 키보드를 누르거나 해제할때 발생
    • -
  • KeyDown - 키보드를  눌렀지만 아직 해제 않지 않았을때 발생
    • -
  • KeyUp - 키보드가 해제 되었을때 발생
    • -
  • TextInput (글을 썼던 시점에는 웹킷 브라우저에서만 가능) - 텍스트에 붙여넣기나 말하기를 하거나 또는 키보드로 입력했을 때 발생. 이 이벤트는 이 문서에 포함하지 않을 것이다.
    • -
-

keypress 이벤트는 키를 눌렀을 때의 Unicode값이 keycode나 charCode 프로퍼티에 둘다 저장되어 있다. 만약 키가  문자로 생성되어 눌러졌을때 (예를 들어 'a') charCode는 문자의 경우를 반영하여 문자의 코드를 설정한다.(즉, charCode은 Shift 키를 누르고 있는지 여부를 고려한다)그렇지 않으면, 누른 키의 코드가 keyCode에 저장된다.

-

키보드 이벤트들을 캡쳐하기 위한 가장 간단한 방법은 당신의 엘리먼트를 애트리뷰트들로써 개별적인 이벤트들을 지정한 HTML안에 이벤트 핸들러들을 다시 저장하는 것이다.

-

예:

-
  <input type="text" onkeypress="alert ('Hello World!');">
-
-

마우스 이벤트들과 마찬가지로 당신이 실행하기 원하는 자바스크립트 코드는 그때마다 처리할 수 있다. 또는 당신은 HTML 페이지안에 <script> 블록에 정의되어진 함수를 호출 할 수 있다 :

-
<script>
-  function keypressHandler() {
-    alert ("Hello, World!");
-  }
-</script>
-
-<input onkeypress="keypressHandler();" />
-
-

타겟을 참조하거나 이벤트를 캡쳐 하는 것은 (즉, 눌러진 실제 키) 마우스 이벤트를 비슷한 방법으로 이룰 수 있다.

-

 <script type="text/javascript">

-
  function keypressHandler(evt) {
-      var eType = evt.type; // 이벤트 타입으로써 "keypress"를 반환할 것이다.
-
-   /*  여기에 우리는 which 나 다른 keyCode로 반환되는 모질라 기반으로 된 브라우저를 크로스 브라우저 방법으로 사용할 필요가 있다. 조건 연산자 또는 삼항식이 좋은 방법이다.
-      var keyCode = evt.which?evt.which:evt.keyCode;
-      var eCode = 'keyCode is ' + keyCode;
-      var eChar = 'charCode is ' + .fromCharCode(keyCode); // 또는 evt.charCode
-      alert ("Captured Event (type=" + eType + ", key Unicode value=" + eCode + ", ASCII value=" + eChar + ")");
-   }
-</script>
-<input onkeypress="keypressHandler(event);" />
-

페이지로 부터 어떤 키 이벤트를  캡처하기 위해서는 문서 레벨에서 이벤트를 등록하거나 함수안에서 처리하여 마칠 수 있다. 

-
<script>
-  document.onkeypress = keypressHandler;
-  document.onkeydown = keypressHandler;
-  document.onkeyup = keypressHandler;
-</script>
-

여기에 키 이벤트 처리하기 보여주는 완벽한 예제가 있다.

-
<!DOCTYPE html>
-<html>
-<head>
-  <script>
-    var metaChar = false;
-    var exampleKey = 16;
-    function keyEvent(event) {
-      var key = event.keyCode || event.which; // alternative to ternary - if there is no keyCode, use which
-      var keychar = String.fromCharCode(key);
-      if (key == exampleKey) {
-        metaChar = true;
-      }
-      if (key != exampleKey) {
-         if (metaChar) {
-            alert("Combination of metaKey + " + keychar)
-            metaChar = false;
-         } else {
-           alert("Key pressed " + key);
-         }
-      }
-    }
-    function metaKeyUp(event) {
-      var key = event.keyCode || event.which;
-      if (key == exampleKey) { metaChar = false; }
-    }
-  </script>
-</head>
-<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)">
-    Try pressing any key!
-</body>
-</html>
-

브라우저 버그들과 이상한 점

-

키 이벤트를 통해서 사용 가능하게 만들어진 두개의 프로퍼티들은 keycode와 charCode이다. 단순한 용어로 keyCode는 사용자에 의해 눌러진 실제 키보드 키를 의미하는데 반하여 charCode는 키의 ASCII 값을 반환한다. 이 두 값들은 반드시 동일하지 않을 수 있다. 예를 들어 소문자 'a'와 대문자 'A'는 같은 keyCode를 가지고 있다. 왜냐하면 사용자는 같은 키를 누르기 때문이다. 하지만 다른 charCode를 가지는 것은 왜냐하면 결과 문자가 다르기 때문이다.

-

charCode가 해석되는 브라우저의 방법은 일관되게 적용되는 방법이 아니다. 예를 들어  Internet Explorer 와 Opera는 charCode를 지원하지 않는다. 그런데 그들은 keyCode안에 문자 정보를 준다. onkeypress만 아니라 onkeydown 와 onkeyup의 keyCode가  키 정보를 가지고 있다. Firefox 는 "which",  문자를 구별하기 위해 다른 단어를 사용한다. 

-

더 나아가 키 이벤트들을 다루는 것에 관해서는  Keyboard Events에 대한 Mozilla 문서를 참조하시오.

-

{{ draft() }}

-

예제: 이미지 주변에 드래그하기

-

다음 예제는 페이지 근처의 firefox의 이미지를 이동할 수 있다.

-
<!DOCTYPE html>
-<html>
-<head>
-<style>
-img { position: absolute; }
-</style>
-
-<script>
-window.onload = function() {
-
-  movMeId = document.getElementById("ImgMov");
-  movMeId.style.top = "80px";
-  movMeId.style.left = "80px";
-
-  document.onmousedown = coordinates;
-  document.onmouseup = mouseup;
-
-  function coordinates(e) {
-    if (e == null) { e = window.event;}
-
-    // e.srcElement은 IE에서 타겟 엘리먼트로 가지고 있고 반면 e.target은 firefox에서 타겟 엘리먼트로 가지고 있다.
-// 두 프로퍼티들은 이벤트가 일어난 HTML 엘리먼트를 반환한다.
-    var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
-
-    if (sender.id=="ImgMov") {
-      mouseover = true;
-      pleft = parseInt(movMeId.style.left);
-      ptop = parseInt(movMeId.style.top);
-      xcoor = e.clientX;
-      ycoor = e.clientY;
-      document.onmousemove = moveImage;
-      return false;
-    }
-    return false;
-  }
-
-  function moveImage(e) {
-    if (e == null) { e = window.event; }
-    movMeId.style.left = pleft+e.clientX-xcoor+"px";
-    movMeId.style.top = ptop+e.clientY-ycoor+"px";
-    return false;
-  }
-
-  function mouseup(e) {
-    document.onmousemove = null;
-  }
-}
-</script>
-</head>
-
-<body>
-  <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64">
-  <p>Drag and drop around the image in this page.</p>
-</body>
-
-</html>
-

예제: 크기 조정하기

-
-

이미지 크기 조정하는 예제(실제 이미지가 크기가 조정되는 것이 아니고,  이미지의 랜더링만 되는 것이다.)

- 
  <!DOCTYPE html>
-  <html>
-    <head>
-      <style>
-        #resizeImage {
-          margin-left: 100px;
-        }
-      </style>
-      <script>
-      window.onload = function() {
-
-        var resizeId = document.getElementById("resizeImage");
-        var resizeStartCoordsX,
-            resizeStartCoordsY,
-            resizeEndCoordsX,
-            resizeEndCoordsY;
-
-        var resizeEndCoords;
-        var resizing = false;
-
-        document.onmousedown = coordinatesMousedown;
-        document.onmouseup = coordinatesMouseup;
-
-        function coordinatesMousedown(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target;
-
-          if (element.id == "resizeImage") {
-            resizing = true;
-            resizeStartCoordsX = e.clientX;
-            resizeStartCoordsY = e.clientY;
-          }
-          return false;
-        }
-
-        function coordinatesMouseup(e) {
-          if (e == null) {
-            e = window.event;
-          }
-
-          if (resizing === true) {
-            var currentImageWidth = parseInt(resizeId.width);
-            var currentImageHeight = parseInt(resizeId.height);
-
-            resizeEndCoordsX = e.clientX;
-            resizeEndCoordsY = e.clientY;
-
-            resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px';
-            resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px';
-
-            resizing = false;
-          }
-          return false;
-        }
-      }
-      </script>
-    </head>
-
-    <body>
-      <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png"
-width="64" height="64">
-      <p>Click on the image and drag for resizing.</p>
-    </body>
-
-  </html>
-
-

예제: 라인 그리기

-
<!DOCTYPE html>
-<html>
-<head>
-<script>
-function linedraw(ax,ay,bx,by)
-{
-    if(ay>by)
-    {
-        bx=ax+bx;
-        ax=bx-ax;
-        bx=bx-ax;
-        by=ay+by;
-        ay=by-ay;
-        by=by-ay;
-    }
-    var calc=Math.atan((ay-by)/(bx-ax));
-    calc=calc*180/Math.PI;
-    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
-    document.body.innerHTML += "<div id='line' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
-}
-</script>
-</head>
-<body onload="linedraw(200,400,500,900);"> <!--당신의 좌표 교체하기 -->
-</body>
-</html>
-

 

diff --git "a/files/ko/web/javascript/\354\226\270\354\226\264_\353\246\254\354\206\214\354\212\244/index.html" "b/files/ko/web/javascript/\354\226\270\354\226\264_\353\246\254\354\206\214\354\212\244/index.html" deleted file mode 100644 index 5743a54e24..0000000000 --- "a/files/ko/web/javascript/\354\226\270\354\226\264_\353\246\254\354\206\214\354\212\244/index.html" +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: 자바스크립트 언어 자료 -slug: Web/JavaScript/언어_리소스 -tags: - - Advanced - - 자바스크립트 -translation_of: Web/JavaScript/Language_Resources ---- -
{{JsSidebar}}
- -

ECMAScript는 자바스크립트의 토대를 구성하는 스크립트 언어입니다. ECMAScript는 ECMA International 표준화 기구에 의해서 ECMA-262 및 ECMA-402 스펙에서 표준화되었습니다. 다음은 현재까지 승인됐거나 작업 중인 ECMAScript 표준입니다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
이름링크출시 날짜설명
현재판
ECMA-262 10th EditionWorking draft2019ECMAScript 2019 (제 10판), 명세 작업 중
ECMA-262 9th EditionPDF, HTML, 
- Working draft, repository		2018ECMAScript 2018 (제 9판)
ECMA-402 5th EditionWorking draft, repository2018ECMAScript 2018 국제화 API 표준
폐기(Obsolete)/역사판
ECMA-262 (ES 1)PDFJune 1997ECMAScript 표준 원본.
ECMA-262 (ES 2)PDFAugust 1998ECMAScript 표준 제2판; 또한 ISO 표준 16262.
ECMA-262 (ES 3)PDFDecember 1999ECMAScript 표준 제3판; JavaScript 1.5에 해당.
- errata 참조
ECMA-262 (ES 5)PDFDecember 2009ECMAScript 제5판
- ES5 errata 및 ECMAScript 5 support in Mozilla 참조
ECMA-357PDFJune 2004ECMAScript for XML (E4X).
- E4X errata 참조.
ECMA-357 Edition 2PDFDecember 2005ECMAScript for XML (E4X).
ECMA-262 (ES 5.1)PDF, HTMLJune 2011이 판은 국제화 표준 ISO/IEC 16262:2011 제3판과 완전히 정렬됨.
- ES5 errata 수정 포함, 새로운 기능은 없음.
ECMA-402 1.0PDF, HTMLDecember 2012ECMAScript 국제화 API 1.0.
ECMA-262 2015 (ES 6)PDF, HTMLJune 2015ECMAScript 2015 (제6판).
ECMA-402 2.0PDFJune 2015ECMAScript 국제화 API 2.0.
ECMA-262 2016 (ES 7)HTMLJune 2016ECMAScript 2016 (제7판).
ECMA-402 3.0HTMLJune 2016ECMAScript 국제화 API 3.0. 나중(올해 6월)에 승인될.
ECMA-262 2017 (ES 8)HTMLJune 2017ECMAScript 2017 (제8판).
ECMA-402 4th EditionHTMLJune 2017ECMAScript 국제화 API 4.0.
- -

ECMAScript의 역사에 대한 자세한 정보는 Wikipedia ECMAScript entry를 살펴보세요.

- -

여러분은 코드네임 "Harmony"로 불리우는 ECMAScript의 다음 개정에 참여하거나 그냥 진행상황을 확인할 수도 있습니다.  또한 ECMAScript 국제화 API 스펙도 공개 위키와 ecmascript.org 에 연결된 es-discuss mailing list에서도 확인할 수 있습니다.

- -

구현

- -
    -
  • SpiderMonkey - 파이어폭스 포함 여러 Mozilla 제품에 사용되는 자바스크립트 엔진;
    • -
  • Rhino - 자바로 작성된 자바스크립트 엔진;
    • -
  • Tamarin - (어도비® 플래쉬® 재생기에서 사용되는) 액션스크립트 가상머신;
    • -
  • Other implementations (위키피디아).
    • -
- -

관련 항목

- - diff --git a/files/ko/web/media/formats/codecs_parameter/index.html b/files/ko/web/media/formats/codecs_parameter/index.html new file mode 100644 index 0000000000..43cce1aa1f --- /dev/null +++ b/files/ko/web/media/formats/codecs_parameter/index.html @@ -0,0 +1,971 @@ +--- +title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기 +slug: Web/Media/Formats/코덱파라미터 +translation_of: Web/Media/Formats/codecs_parameter +--- +
{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
+ +

기본적으로, video/mp4, audio/mpeg 처럼 {{Glossary("MIME")}} 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 MPEG-4 비디오라고 해서 MIME 타입을 video/mp4만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.

+ +

때문에 MIME 타입에 추가로 미디어 콘텐츠를 기술하기 위해 codecs 파라미터가 추가되었습니다. 이를 통해 컨테이너 특화된 정보를 제공할 수 있게 되었습니다 이 정보에는 비디오 코덱의 프로파일, 오디오 트랙 타입 등을 추가할 수 있습니다.

+ +

이 가이드 문서는 단순히 컨테이너 타입 명시를 넘어 codecs 파라미터의 문법과 MIME 타입에 비디오/오디오 콘텐츠에 대한 상세 정보를 기술하는 방법에 대해 설명합니다.

+ +

일반 문법

+ +

기본적인 MIME 미디어 타입 표현은 미디어 타입(audio, video, 등)으로 시작하며, 슬래쉬 문자 (/) 후 미디어를 포함하고 있는 컨테이너 포맷이름으로 이어집니다:

+ +
+
audio/mpeg
+
MP3 같은 MPEG 파일 타입의 오디오 파일입니다.
+
video/ogg
+
Ogg 파일 타입의 비디오 파일입니다.
+
video/mp4
+
MPEG-4 파일 타입을 사용하는 비디오입니다.
+
video/quicktime
+
애플 QuickTime 포맷을 사용하는 비디오입니다. 다른 곳에서 서술되어 있듯이, 한때는 웹에서 널리 쓰여지던 형식이었지만 현재는 플러그인이 필요하여 더 이상 사용하지 않는 타입입니다.
+
+ +

위 MIME 타입은 아직 모호한 표현입니다. 각 파일 타입들은 많은 수의 코덱을 지원하며 코덱은 각기 프로파일, 레벨과 같은 설정 인자들을 가지고 있습니다. 그래서 codecs 파라미터를 추가하여 명시할 수 있습니다.

+ +

세미콜론 (;)을 붙이고 codecs= 으로 시작하는 문자열을 덧붙여 콘텐츠의 포맷을 서술할 수 있습니다. 일부 미디어 타입은 사용하는 코덱 이름만 명시 가능할 수 있고 다른 미디어 타입은 코덱에 관한 다양한 인자를 기술할 수 있는 경우도 있습니다. 콤마로 구분하여 여러 코덱을 기술할 수도 있습니다.

+ +
+
audio/ogg; codecs=vorbis
+
Vorbis 오디오 트랙을 포함하는 Ogg 컨테이너 파일입니다.
+
video/webm; codecs="vp8, vorbis"
+
VP8 비디오와 Vorbis 오디오를 포함하는 WebM 컨테이너 파일입니다.
+
video/mp4; codecs="avc1.4d002a"
+
AVC (H.264) 코덱에 Main Profile, Level 4.2을 가지는 MPEG-4 컨테이너 파일입니다.
+
+ +

코덱의 속성 중 하나라도 퍼센트-인코딩이 필요한 특수문자{{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}를 사용하는 경우 MIME 타입을 기술하는 문자열의 codecs 파라미터를 codecs* (애스터리크(*) 추가됨에 유의)로 변경해야 합니다. JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} function으로 파라미터 목록을 인코딩할 수 있습니다; 반대로 {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}를 통해 기인코딩된 파라미터 리스트를 디코딩할 수 있습니다.

+ +
+

codecs 파라미터를 사용한다면, 파일 콘텐츠가 사용한 모든 코덱을 목록에 명시해야합니다. 목록에 파일이 사용하고 있지 않은 코덱을 명시하는 것도 가능합니다.

+
+ +

컨테이너별 코덱 옵션

+ +

아래 컨테이너들은 codecs 파라미터에 확장 옵션을 지원합니다:

+ +
+
    +
  • {{anch("ISO-BMFF", "3GP")}}
    • +
  • {{anch("AV1")}}
    • +
  • {{anch("ISO-BMFF", "ISO BMFF")}}
    • +
  • {{anch("ISO-BMFF", "MPEG-4")}}
    • +
  • {{anch("ISO-BMFF", "QuickTime")}}
    • +
  • {{anch("WebM")}}
    • +
+
+ +

링크를 클릭하면 동일한 섹션으로 이동할텐데요; 위 미디어 타입들은 모두 ISO Base Media File Format (ISO BMFF)를 기반하고 있어, 동일한 문법을 공유하기 때문입니다.

+ +

AV1

+ +

AV1의 codecs 문법은AV1 Codec ISO Media File Format Binding 스펙 문서의, 섹션 5: Codecs Parameter String에 정의되어 있습니다.

+ +
av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
+ +

아래 표에서 코덱 파라미터 문자열 구성요소에 대해 자세히 설명하고 있습니다. 각 요소들은 고정된 개수의 문자로 되어 있으며;고정 길이보다 짧은 경우 앞에 0을 붙여서 맞춰야 합니다..

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AV1 코덱 파라미터 문자열 요소
요소내용
P +

한자리 숫자 프로파일 번호:

+ + + + + + + + + + + + + + + + + + + + + + + +
AV1 프로파일 번호
프로파일 번호설명
0"Main" 프로파일; YUV 4:2:0/모노크롬 크로마 서브샘플링 및 8/10 비트 색 깊이 지원.
1"High" 프로파일 4:4:4 크로마 서브샘플링 추가 지원.
2"Professional" 프로파일, 4:2:2 크로마 서브샘플링 및 12 비트 색 깊이 추가 지원
+
LL두자리 숫자 레벨 번호,  X.Y 형태의 레벨 포맷으로 변환 됨, X = 2 + (LL >> 2), Y = LL & 3. 자세한 내용은 AV1 스펙 문서의 Appendix A, section 3 참조.
T한자리 문자 티어 표시. Main 티어라면 (seq_tier equals 0), 문자는 M. High 티어는 (seq_tier is 1) H. High 티어는 4.0 이상 레벨에서만 가능합니다.
DD두자리 숫자 색 깊이. 8, 10, 12 중 하나여야 하며; 프로파일과 다른 속성에서 지원 가능한 값이여야 합니다.
M한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두 가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로 모노크롬 이미지를 가집니다. 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_concepts", "YUV")}}를 참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0 (모노크롬 아님)입니다.
CCC +

CCC 는 세자리 숫자로 크로마 서브샘플링을 표기합니다. 첫번째 숫자는 subsampling_x, 두 번째 숫자는 subsampling_y. 둘다 1인경우, 세번째 값은 chroma_sample_position; 아닌 경우 세번째 값은 항상 0입니다. M 값과 더불어 크로마 서브샘플링 포맷을 구성하는 요소입니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
크로마 서브샘플링 결정 방식
subsampling_xsubsampling_yMonochrome flagChroma subsampling format
000YUV 4:4:4
100YUV 4:2:2
110YUV 4:2:0
111YUV 4:0:0 (Monochrome)
+ +

CCC의 세번째 값은 크로마 샘플 위치(chroma sample position)로, 0은 위치를 알 수 없으며 디코딩 시 개별적으로 제공해야 함을 의미합니다; 1은 샘플이 (0, 0) 휘도 샘플과 동일한 수평선상에 있음을 의미합니다; 2는 샘플이 (0, 0) 휘도 샘플과 동일한 위치에 있음을 의미합니다.

+ +

기본 값은 110 (4:2:0 크로마 서브샘플링)입니다.

+
cp두자리 숫자 color_primaries 값은 미디어의 색 공간을 표시합니다. 예를 들어 HDR 비디오에서 사용하는 BT.2020/BT.2100 색 공간은 09입니다. 자세한 정보-그 외의 색 공간 값을 포함하여-는 AV1 스펙 문서의 Color config semantics section 를 참조하세요. 기본값은 01 (ITU-R BT.709)입니다.
tc두자리 숫자 transfer_characteristics 값. 이 값은 소스에서 디스플레이로 감마를 매핑하는 함수(기술적인 용어로 "opto-electrical transfer function"라 표현)를 정의합니다. 예를 들어 10-bit BT.2020는 14입니다. 기본 값은 01 (ITU-R BT.709)입니다.
mc두자리 숫자 matrix_coefficients 상수는 RGB 컬러 채널을 휘도/색차 신호로 변환 시 사용할 계수 행렬을 선택합니다. 예를 들어 BT.709의 표준 계수 값은 01로 표현합니다. 기본 값은 01 (ITU-R BT.709)입니다.
F한자리 숫자로 색상이 가능한 모든 범위를 표현해야 할지(1), 지정한 색 설정에 의해 적합하다고 여겨지는 범위로 제한하여 표현(studio swing representation이라 표현)해야 할지를 나타내는 값입니다. 기본 값은 0 (studio swing representation 적용)입니다.
+ +

M (모노크롬 플래그)이후의 요소는 모두 비필수입니다; 어느 곳에서부터나 생략할 수 있습니다 (하지만 임의의 중간 요소를 생략할 수는 없습니다). 기본 값은 위 표에 서술하였습니다. AV1 코덱 문자열 예시는 아래와 같습니다:

+ +
+
av01.2.15M.10.0.100.09.16.09.0
+
AV1 Professional 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이, 4:2:2 크로마 서브샘플링 ITU-R BT.2100 색 공간, 색 전환 YCbCr 색상 행렬. Studio swing representation 적용.
+
av01.0.15M.10
+
AV1 Main 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이. 나머지 요소는 기본 값 사용: 4:2:0 크로마 서브 샘플링, BT.709 색 공간, 색 전환, 계수 행렬 사용. Studio swing representation.
+
+ +

ISO Base Media File Format: MP4, QuickTime, and 3GP

+ +

모든 미디어 타입은 {{interwiki("wikipedia", "ISO Base Media File Format")}} (ISO BMFF)를 기반으로 하며 codecs 문법을 공유합니다. 이들 미디어 타입은 MPEG-4 (또 사실상 MPEG-4를 기반으로 하고 있으므로 QuickTime도 포함)과 3GP를 포함합니다. MIME 타입의 codecs 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ISO BMFF codecs 파라미터를 지원하는 기본 MIME 타입
MIME 타입설명
audio/3gpp3GP 오디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})
video/3gpp3GP 비디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})
audio/3gp23GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})
video/3gp23GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})
audio/mp4MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})
video/mp4MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})
application/mp4오디오/비디오가 아닌 MPEG-4 컨테이너 미디어
+ +

codecs 파라미티에는 간단하게 컨테이너 명(3gp, mp4, quicktime, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(.)으로 구분된 요소를 다수 가질 수 있습니다.

+ +

codecs 값의 문법은 코덱마다 다릅니다; 하지만 항상 4 글자 코덱 구분자와 온점(.)으로 시작하며 데이터 포맷을 기술하기 위핸 Object Type Indication (OTI) 형식의 문자열이 뒤따릅니다. 대부분의 코덱에서 OTI는 두자리 16진수로 되어 있지만 AVC (H.264)는 6자리 16진수로 구성되어 있습니다.

+ +

따라서 지원하는 코덱 문법은 아래와 유사합니다:

+ +
+
cccc[.pp]* (Generic ISO BMFF)
+
cccc 는 4 글자 코덱 ID이며  pp는 0~2자리 인코딩 된 문자입니다.
+
mp4a.oo[.A] (MPEG-4 audio)
+
oo 는 미디어 콘텐츠를 더 정확하게 기술하는 Object Type Indication 값이며 A 는 한자리 숫자오디오 OTI입니다. OTI로 가능한 값은 MP4 Registration Authority 웹사이트의 Object Types page 페이지에서 확인할 수 있습니다. 예를들어 MP4 파일의 Opus 오디오는 mp4a.ad로 기술합니다. 자세한 내용은 {{anch("MPEG-4 audio")}}를 참조하세요.
+
mp4v.oo[.V] (MPEG-4 video)
+
마찬가지로 oo 는 미디어 콘텐츠를 명시하는 OTI 값이며, V 는 한자리 숫자 비디오 OTI 값입니다.
+
avc1.oo[.PPCCLL] (AVC video)
+
+

oo 는 콘텐츠를 명시하는 OTI 값이며, while PPCCLL 는 6자리 16진수로써 프로파일 넘버 (PP), 제약 플래그 (CC), 레벨 (LL)을 의미합니다. PP로 가능한 값은 {{anch("AVC profiles")}}를 참조하세요.

+ +

제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 constraint_set0_flag)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 반드시 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.

+ +

레벨 값은 고정 소수점이므로 숫자 14 (10진법 20) 은 레벨 2.0을 의미하며 3D (10진법 61) 은 레벨 6.1을 의미합니다. 일반적으로 레벨 숫자가 높을 수록 스트림 대역폭이 높아 더 큰 크기의 비디오를 지원할 수 있습니다.

+
+
+ +

AVC 프로파일

+ +

아래의 AV 프로파일 넘버는 codecs 파라미터에서 사용하며 제약 요소 값은 CC로 사용할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
codecs  파라미터에서 AVC 프로파일과 제약 요건을 명세하기 위한 값
프로파일넘버(Hex)제약 (byte)
Constrained Baseline Profile (CBP)
+ CBP는 리소스가 제약점이 있거나 재생이 원활하지 못해 발생하는 이상 요소들을 최소화 해야 하는 경우 주요한 해결책입니다.		4240
Baseline Profile (BP)
+ CBP와 유사하나 데이터 손실 방지와 복구 능력을 향상시킨 프로파일입니다.  CBP가 도입된 이후에는 이전만큼 널리 사용하고 있지는 않습니다. CBP 스트림은 모두 BP 스트림으로 간주할 수도 있습니다.		4200
Extended Profile (XP)
+ 고효율 압축과 네트워크 전송시의 데이터 안정성, 스트림 스위칭을 고려한 프로파일입니다.		5800
Main Profile (MP)
+ MPEG-4 포맷으로 전송하는 디지털 표준 TV 방송에서 사용하는 프로파일입니다. 고선명 TV(HDV)에서는 사용하지 않습니다. 2004년 —HDTV에서 사용하기 위해— High Profile이 추가된 이후 중요도가 감소하였습니다.		4D00
High Profile (HiP)
+ 현재로써는 전파방송과 매체기반 HD 비디오에서 사용하는 주요 프로파일입니다. HD TV 방송과 블루레이 미디어에서 사용하고 있습니다.		6400
Progressive High Profile (PHiP)
+ 필드 코딩 지원을 제거한 High Profile입니다.		6408
Constrained High Profile
+ 양방향 예측 슬라이스("B-slices") 지원을 제거한 PHiP입니다.		640C
High 10 Profile (Hi10P)
+ 10 비트 컬러 모드 지원을 제거한 High Profile입니다.		6E00
High 4:2:2 Profile (Hi422P)
+ Hi10P에 4:2:2 크로마 서브샘플링과 최대 10비트 컬러 모드 지원을 추가한 프로파일입니다.		7A00
High 4:4:4 Predictive Profile (Hi444PP)
+ Hi422P 및 Hi444PP에 4:4:4 크로마 서브샘플링(색차 샘플링 소거 없음)을 추가 지원한 프로파일입니다. 또한 최대 14비트 컬러 샘플과 효율적인 무손실 지역 코딩을 추가하였습니다. 각 프레임을 3개의 분리된 컬러 평면(각 평면은 모노크롬 프레임형태로 저장됩니다)으로 인코딩할 수 있는 옵션입니다.		F400
High 10 Intra Profile
+ all-intra-frame에 High 10 제약이 걸린 프로파일입니다. 전문가 용 앱에 주로 쓰입니다.		6E10
High 4:2:2 Intra Profile
+ all-intra-frame에 Hi422를 적용한 프로파일입니다.		7A10
High 4:4:4 Intra Profile
+ all-intra-frame에 High 4:4:4 제약을 건 프로파일입니다.		F410
CAVLC 4:4:4 Intra Profile
+ all-intra-frame에 High 4:4:4 제약, CAVLC 엔트로피 코딩만 사용하는 프로파일입니다.		4400
Scalable Baseline Profile
+ 화상 회의, 감시 카메라 및 모바일 장치에서 쓰이는 프로파일로, {{interwiki("wikipedia", "SVC")}} Baseline Profile은 AVC의 Constrained Baseline profile에 기반하고 있습니다. 스트림의 베이스 레이어는 고품질로 제공되면서, 제약이 걸린 환경에서 대안이 될 수 있는 서브스트림을 다수 제공하는 방식입니다. 서브스트림은 해상도 감소, 낮은 프레임레이트, 압축률 저하 등을 조합하여 구성합니다.		5300
Scalable Constrained Baseline Profile
+ 실시간 양방향 대화형 어플리케이션에서 주요 사용하는 프로파일입니다. WebRTC에서 아직 정식으로 지원하지는 않지만,  SVC를 활성화하여 WebRTC AP 개발 모드에서 사용해 볼 수 있습니다.		5304
Scalable High Profile
+ 방송 및 스트리밍 어플리케이션에서 주로 사용합니다. 베이스(또는 최고 품질) 레이어에는 AVC High Profile이 반드시 포함되어야 합니다.		5600
Scalable Constrained High Profile
+ 실시간 통신을 위한 Scalable High Profile의 서브셋 프로파일입니다.		5604
Scalable High Intra Profile
+ 비디오 제작 어플리케이션을 위한 all-intra-frame 프로파일입니다.		5620
Stereo High Profile
+ 양안 렌더링을 통한 스테레오스코픽(stereoscopic) 비디오를 지원하는 프로파일입니다. 양안 영상이 아닌 경우 High profile과 동일합니다.		8000
Multiview High Profile
+ 시간 및 MVC inter-view 예측을 통한 2개 이상의 뷰를 지원하는 프로파일입니다. 필드 픽쳐 또는 매크로블록-어댑티브한 frame-field 코딩을 지원하지 않습니다.		7600
Multiview Depth High Profile
+ High Profile에 기반하며 메인 서브스트림이 반드시 붙어야 합니다. 나머지 서브스트림들은 Stereo High Profile과 매칭되어야 합니다.		8A00
+ +

MPEG-4 audio

+ +

codecs 목록의 값 항목이 mp4a로 시작한다면, 문법은 아래와 같아야 합니다:

+ +
mp4a.oo[.A]
+ +

oo 는 두자리 16진수 Object Type Indication으로 미디어에 사용된 코덱 클래스를 표시합니다. OTI 값은 MP4 Registration Authority에서 규정하고 있으며 list of the possible OTI values에서 가용한 값을 확인할 수 있습니다. 특수한 값인 40; 이는 미디어가 MPEG-4 audio(ISO/IEC 14496 Part 3)임을 나타냅니다. 조금 더 자세히 말하자면, 세번째 컴포넌트—Audio Object Type—은 OTI 40 을 MPEG-4의 특정 하위 타입으로 범위를 좁히기 위해 추가하였습니다.

+ +

Audio Object Type는 두자리 10진수로 이루어져 있습니다(codecs 파라미터의 다른 값은 대부분 16진수). 예를들어 MPEG-4 AAC-LC의 오디오 오브젝트 타입은 숫자 2이므로 AAC-LC의 전체 codecs 표현 값은 mp4a.40.2 입니다.

+ +

그러므로 오디오 오브젝트 타입이 17인 ER AAC LC의 전체 codecs 값은 mp4a.40.17 입니다. 한자리 숫자는 한자리로 표현하거나(폭넓게 호환되므로 최선) 앞에 0을 붙여 두자리로 표현할 수 있습니다. mp4a.40.02 처럼요.

+ +
+

Note: 원래 Audio Object Type은 한자리 숫자로 규정되었었습니다. 시간이 지나면서 표준을 확장하였고 현재는 한자리 또는 두자리 숫자입니다. 10 미만의 값 앞에 0 을 붙이는건 필수가 아닙니다. 오래된 MPEG-4 코덱 구현체들은 두자리 숫자를 지원하지 못할 수도 있습니다. 따라서 호환성을 높이기 위해선 한자리로 표현해야 합니다.

+
+ +

Audio Object Types는 ISO/IEC 14496-3 subpart 1, section 1.5.1에서 정의하고 있습니다. 아래 표는 Audio Object Type 기본 목록과 지원하는 프로필입니다. MPEG-4 audio type의 내부에 대해서 더 알고 싶다면 레퍼런스를 참조하세요.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-4 audio object types
IDAudio Object TypeProfile support
0NULL
1AAC MainMain
2AAC LC (Low Complexity)Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2
3AAC SSR (Scalable Sampling Rate)Main
4AAC LTP (Long Term Prediction)Main, Scalable, HQ
5SBR (Spectral Band Replication)HE-AAC, HE-AAC v2
6AAC ScalableMain, Scalable, HQ
7TwinVQ (Coding for ultra-low bit rates)Main, Scalable
8CELP (Code-Excited Linear Prediction)Main, Scalable, Speech, HQ, LD
9HVXC (Harmonic Vector Excitation Coding)Main, Scalable, Speech, LD
10 – 11Reserved
12TTSI (Text to Speech Interface)Main, Scalable, Speech, Synthetic, LD
13Main SyntheticMain, Synthetic
14Wavetable Synthesis
15General MIDI
16Algorithmic Synthesis and Audio Effects
17ER AAC LC (Error Resilient AAC Low-Complexity)HQ, Mobile Internetworking
18Reserved
19ER AAC LTP (Error Resilient AAC Long Term Prediction)HQ
20ER AAC Scalable (Error Resilient AAC Scalable)Mobile Internetworking
21ER TwinVQ (Error Resilient TwinVQ)Mobile Internetworking
22ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding)Mobile Internetworking
23ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communiation)LD, Mobile Internetworking
24ER CELP (Error Resilient Code-Excited Linear Prediction)HQ, LD
25ER HVXC (Error Resilient Harmonic Vector Excitation Coding)LD
26ER HILN (Error Resilient Harmonic and Individual Line plus Noise)
27ER Parametric (Error Resilient Parametric)
28SSC (Sinusoidal Coding)
29PS (Parametric Stereo)HE-AAC v2
30MPEG Surround
31Escape
32MPEG-1 Layer-1
33MPEG-1 Layer-2 (MP2)
34MPEG-1 Layer-3 (MP3)
35DST (Direct Stream Transfer)
36ALS (Audio Lossless)
37SLS (Scalable Lossless)
38SLS Non-core (Scalable Lossless Non-core)
39ER AAC ELD (Error Resilient AAC Enhanced Low Delay)
40SMR Simple (Symbolic Music Representation Simple)
41SMR Main (Symbolic Music Representation Main)
42Reserved
43SAOC (Spatial Audio Object Coding)[1]
44LD MPEG Surround (Low Delay MPEG Surround)[1]
45 and upReserved
+ +

[1] SAOC and LD MPEG Surround are defined in ISO/IEC 14496-3:2009/Amd.2:2010(E).

+ +

WebM

+ +

WebM codecs 파라미터의 기본 형은 4개의 WebM 코덱 중 하나 이상의 이름을 콤마로 구분합니다. 아래 표는 예시입니다.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM MIME codecs 파라미터 예시
MIME 타입설명
video/webm;codecs="vp8"VP8 코덱 WebM 비디오; 오디오 미정의.
video/webm;codecs="vp9"VP9 코덱 WebM 비디오.
audio/webm;codecs="vorbis"Vorbis 오디오 WebM 파일.
audio/webm;codecs="opus"Opus 오디오 WebM 파일.
video/webm;codecs="vp8,vorbis"VP8 비디오 코덱, Vorbis 오디오 코덱 포함된 WebM 파일.
video/webm;codecs="vp9,opus"A WebM container with VP9 video and Opus audio.
+ +

vp8.0, vp9.0 문자열도 가능하지만, 비추천합니다.

+ +

ISO Base Media File Format 문법

+ +

codecs 파라미터를 표준화하고 강력한 포맷으로 발전시키기 위해, WebM은 ISO Base Media File Format 에 정의된 문법에 따라 비디오 콘텐츠를 기술하기 시작했습니다. 본 문법은 VP Codec ISO Media File Format Binding의, Codecs Parameter String 섹션에 정의되어 있습니다. 오디오 코덱은 vorbis 또는 opus로 표시되어 있습니다.

+ +

codecs 파리미터는 사용한 코덱을 나타내는 4자리 문자로 시작하고 온점(.)으로 구분된 2자리 숫자가 반복됩니다.

+ +
cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]
+ +

처음부터 5개 요소는 필수이며; cp (color primaries) 부터는 옵션입니다.; 이후로는 어디서든 끊을 수 있습니다. 각 요소는 아래 표에 설명하고 있으며 예시가 첨부되어 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM codecs parameter components
ComponentDetails
cccc +

4자리 코드로 사용 가능한 코덱을 명시합니다. 가능한 값은 아래와 같습니다:

+ + + + + + + + + + + + + + + + + + + + + + + +
Web-M 지원 코덱 4자리 코드
Four-character codeCodec
vp08VP8
vp09VP9
vp10VP10
+
PP +

2자리 숫자 프로파일 코드. 필요하다면 두자리를 맞추기 위해 앞에 0을 추가합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM 프로파일 숫자
프로파일설명
00크로마 서브샘플링 4:2:0(수직/수평 서브샘플링)만 허용. 색상 컴포넌트 당 8비트만 허용.
01크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8비트만 허용.
02크로마 서브샘플링 4:2:0만 허용. 색상 컴포넌트 당 8, 10, 12비트 허용.
03크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8, 10, 12비트 허용
+
LL두 자리 숫자 레벨 코드. 레벨 넘버는 고정 소수점 표기로 첫번째 숫자가 1의 자리, 두번째 숫자가 소수점 미만 첫번째 자리를 의미합니다. 예를 들어 레벨 3은 30 레벨 6.1은 61.
DD휘도, 색상 컴포넌트의 비트 심도를 표기합니다. 가능한 값은 8, 10, 12입니다.
CC +

크로마 서브샘플링 포맷을 2자리 숫자로 표기합니다. 가능한 값은 아래 표에 있습니다; 자세한 내용은 {{SectionOnPage("en-US/docs/Web/Media/Formats/Video_concepts", "Chroma subsampling")}} 를 참조하세요.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM 크로마 서브샘플링 구분자
값크로마 서브샘플링 포맷
004:2:0 with the chroma samples sited interstitially between the pixels
014:2:0 chroma subsampling with the samples colocated with luma (0, 0)
024:2:2 chroma subsampling (4 out of each 4 horizontal pixels' luminance are used)
034:4:4 chroma subsampling (every pixel's luminance and chrominance are both retained)
04Reserved
+
cp +

ISO/IEC 23001-8:2016 표준 Section 8.1에 명시되어있는 색 공간을 두자리 숫자로 표현합니다. 본 요소와 이후 요소는 전부 비필수값입니다.

+ +

Color primaries 요소에 가능한 값은 아래와 같습니다.:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ISO/IEC Color primary identifiers
ValueDetails
00ITU과 ISO/IEC에 의해 예약됨
01고선명 화질(HD) TV 표준인 BT.709, sRGB, sYCC. BT.709; sRGB는 컴퓨터 모니터에서 쓰이는 가장 일반적인 색 공간입니다. Broadcast BT.709는 8비트 색 심도를 사용하여 16(Black)부터 235(White)까지 리갈 레인지를 표현합니다.
02알 수 없거나 application에서 활용하기 위해 사용합니다.
03ITU과 ISO/IEC에 의해 예약됨
04BT.470 System M, NTSC (미국 내 표준 화질 TV 표준)
05BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625 SECAM
06BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M. 7과 동일함.
70{{Glossary("SMPTE")}} 240M (historical). Functionally identical to 6과 동일함.
08일반 필름
09BT.2020; BT.2100. UHD (4K) High Dynamic Range (HDR) 영상에서 사용 매우 넓은 색 표현력과 10비트 12비트 색상 컴포넌트 지원.
10SMPTE ST 428 (D-Cinema Distribution Master: Image characteristics). DCDM을 위한 비압축 형식.
11SMPTE RP 431 (D-Cinema Quality: Reference projector and environment). 필름 표현의 지속적 경험을 위한 레퍼런스 프로젝터와 환경 조건에 대해 기술.
12SMPTE EG 432 (Digital Source Processing: Color Processing for D-Cinema). 디지털 영화를 위한 색신호 디코딩의 기술적 가이드라인.
13 – 21ITU과 ISO/IEC에 의해 예약됨
22EBU Tech 3213-E
23 – 255ITU과 ISO/IEC에 의해 예약됨
+
tc비디오의 transferCharacteristics 값을 2자리 숫자로 표현. This value is from Section 8.2 of ISO/IEC 23001-8:2016 Section 8.2에 기술되어 있으며 디코딩된 색상을 렌더링 타겟에 맞출 때 transfer characteristics 을 정의합니다.
mcmatrixCoefficients 속성 값을 2자리 숫자로 표현 ISO/IEC 23001-8:2016 스펙 Section 8.3 표에서 기술. 이 값은 native red, blue, green 색상을 휘도, 색차 신호에 매핑하는데 사용합니다. 이 계수들이 방정식에서 어떻게 사용되는지 같은 섹션에서 확인할 수 있습니다.
FF색상 컴포넌트의 검정 수준과 색상 범위를 리갈 레인지로 제한할지 여부를 표시합니다. 예를들어 8비트 색상의 경우 리갈 레인지는 16~235입니다. 값이 00 인 경우 강제로 제한하며,  01 인 경우 결과물의 색상이 컬러 시스템의 범위를 벗어나더라도 각 컴포넌트 별로 가능한 풀 레인지 값을 허용합니다.
+ +

WebM media type 예시

+ +
+
video/webm;codecs="vp08.00.41.08,vorbis"
+
VP8 비디오, 프로파일 0 레벨 4.1, 8-bit YUV 4:2:0 크로마 서브샘플링, BT.709 색 공간, 변환 함수, 행렬 계수, 휘도 색차 값은 ("studio") 리갈 레인지로 인코딩 됨. 오디오는 Vorbis.
+
video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"
+
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 포맷.
+
+ +

codecs 파라미터 사용하기

+ +

codecs 파라미터를 여러 상황에서 사용할 수 있습니다. 먼저 {{HTMLElement("audio")}} , {{HTMLElement("video")}} 엘레먼트 생성 시 {{HTMLElement("source")}} 엘레먼트에 사용하여 브라우저로 하여금 사용할 미디어 포맷에 대한 옵션을 제공하는거죠..

+ +

{{domxref("MediaSource.isTypeSupported()")}} 메소드에 MIME 타입을 명시적으로 전달하는데 사용할 수도 있습니다.; 이 메소드는 현재 장치에서 주어진 미디어 포맷을 재생할 수 있는지 여부를 불리언 값으로 반환합니다.

+ +

더 보기

+ + diff --git a/files/ko/web/media/formats/containers/index.html b/files/ko/web/media/formats/containers/index.html new file mode 100644 index 0000000000..d4e45c294a --- /dev/null +++ b/files/ko/web/media/formats/containers/index.html @@ -0,0 +1,1279 @@ +--- +title: 미디어 컨테이너 포맷 (파일 타입) +slug: Web/Media/Formats/컨테이너 +translation_of: Web/Media/Formats/Containers +--- +

오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.

+ +

WebRTC 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는{{domxref("MediaStreamTrack")}} 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 Codecs used by WebRTC 문서를 참고하세요.

+ +

일반적인 컨테이너 포맷

+ +

미디어 컨테이너 포맷에는 여러 종류가 있지만 여러분들은 보통 아래 나열된 목록의 포맷을 주로 만나게 될 겁니다. 일부는 오디오만 지원하는 것도 있고 오디오와 비디오 모두를 지원하는 포맷도 있죠. MIME 타입과 확장자도 나열되어 있습니다. 웹상에서 가장 많이 쓰이는 컨테이너 포맷은 아마도 MPEG-4 (MP4), Quicktime Movie (MOV), Wavefile Audio File Format (WAV)일겁니다. 또한 MP3, Ogg, WebM, AVI 등의 포맷도 볼 수 있지요. 하지만 모든 브라우저가 이 다양한 포맷들을 지원하는 것은 아닙니다. 사용하기 편하고 다른 조합과의 구분을 위해 특정한 컨테이너와 코덱의 조합은 독자적인 MIME type과 확장자를 가지기도 합니다. 예를들어 Opus 오디오 트랙만을 가진 Ogg파일은 가끔 Opus 파일이라 불리며 .opus 확장자를 가지는 경우도 있습니다. 하지만 실제로는 단순한 Ogg 파일일 뿐이죠.

+ +

반대 케이스로 특정 코덱이 특정 컨테이너에 담긴 형태가 매우 보편적일 경우 독자적인 형식으로 취급하는 경우도 있습니다. MP3 오디오 파일이 대표적인 경우로, MPEG-1 컨테이너에 MPEG-1 Audio Layer III 코덱으로 인코딩 된 오디오 트랙 하나만이 담긴 케이스입니다. 컨테이너는 일반적인 MPEG지만 이 형식은 audio/mp3 MIME 타입과 .mp3 확장자를 사용합니다.

+ +

컨테이너 포맷(파일 타입) 인덱스

+ +

특정 컨테이너 포맷에 대해 더 알아보려면 아래 목록에서 찾아 클릭하세요. 컨테이너 사용법과 지원하는 코덱, 지원하는 브라우저 등을 알 수 있습니다.

+ +
+
    +
  • {{anch("3GP")}}
    • +
  • {{anch("ADTS")}}
    • +
  • {{anch("FLAC")}}
    • +
  • {{anch("MPEG", "MPEG / MPEG-2")}}
    • +
  • {{anch("MP4", "MPEG-4 (MP4)")}}
    • +
  • {{anch("Ogg")}}
    • +
  • {{anch("QuickTime")}}
    • +
  • {{anch("WAVE")}}
    • +
  • {{anch("WebM")}}
    • +
+
+ +

3GP

+ +

3GP 또는 3GPP 컨테이너는 셀룰러 네트워크를 통해 전송하고 모바일 장치에서 사용하기 위해 고안되었습니다. 원래 3G 모바일 폰을 위해 디자인하였지만 현대의 모바일 폰과 네트워크에서도 사용하고 있습니다. 하지만 네트워크 처리량이 늘어나면서 3GP 포맷의 필요성은 점차 줄어들고 있죠. 그러나 여전히 느린 네트워크나 저사양 폰에서는 유용한 컨테이너이기도 합니다.

+ +

이 컨테이너는 ISO Base Media File Format과 MPEG-4 기반이지만 저대역폭 케이스에 최적화되어 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + +
Base 3GP media MIME types
AudioVideo
audio/3gppvideo/3gpp
audio/3gpp2video/3gpp2
audio/3gp2video/3gp2
+ +

위는 3GP 컨테이너의 기본 MIME 타입입니다; 사용하는 코덱에 따라 다른 타입을 사용할 수도 있습니다; 또한 MIME 타입 문자열에 codecs 파라미터를 추가하여 어떠한 오디오/비디오 코덱을 사용했는지 표시할 수 있으며 profile, level, 코덱 설정 값도 추가하여 전달할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
3GP가 지원하는 비디오 코덱.
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)Yes1,2
H.263Yes1
MPEG-4 Part 2 (MP4v-es)Yes1
VP8Yes1
+ +

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

+ +

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
3GP가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AMR-NBYes1
AMR-WBYes1
AMR-WB+Yes1
AAC-LCYes1,2
HE-AAC v1Yes1,2
HE-AAC v2Yes1,2
MP3Yes1
+ +

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

+ +

[2] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

ADTS

+ +

Audio Data Transport Stream (ADTS) 는 인터넷 라디오 같은 오디오 스트림을 사용하기 위해 MPEG-4 Part 3로 규정된 컨테이너 포맷입니다. 근본적으로 ACC 오디오 데이터에서 스트림만 깐 것과 거의 동일하며 최소한의 헤더만 담긴 ADTS 프레임으로 구성되어 있습니다.

+ + + + + + + + + + + + + + + + +
ADTS media MIME types
Audio
audio/aac[1]
audio/mpeg[1]
+ +

[1] The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the audio/aac 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 audio/mpeg.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ADTS가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACYes1
MP3Yes
+ +

[1] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

FLAC

+ +

Free Lossless Audio Codec (FLAC)은 무손실 오디오 코덱입니다; 이 코덱을 담을 수 있는 컨테이너 역시 FLAC이라 부릅니다. 이 포맷은 어느 특허에도 묶여있지 않아 자유롭게 사용할 수 있습니다. FLAC 파일은 FLAC 오디오 데이터만 담을 수 있습니다.

+ + + + + + + + + + + + + +
FLAC media MIME type
Audio
audio/flac
+ + + + + + + + + + + + + + + + + + + + + + + + +
FLAC이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
FLACYes
+ +

MPEG/MPEG-2

+ +

{{interwiki("wikipedia", "MPEG-1")}}과 {{interwiki("wikipedia", "MPEG-2")}}은 근본적으로 동일합니다. the Moving Picture Experts Group (MPEG)에서 만들었으며 DVD 등의 물리적 매체에서 널리 쓰이고 있습니다.

+ +

인터넷에서 아마 가장 많이 사용되는 MPEG 파일 포맷은 {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} 일 겁니다; MP3 파일은 전 세계의 디지털 오디오 장치에서 널리 재생되고 있습니다. 반대로 MPEG-1, MPEG-2는 웹에서 별로 사용하고 있지 않죠.

+ +

MPEG-1과 MPEG-2 간의 차이점은 컨테이너 포맷이 아니라 미디어 데이터 포맷에 있습니다. MPEG-1은 1992년 소개되었으며; MPEG-2는 1996년에 소개되었습니다.

+ + + + + + + + + + + + + + + +
MPEG-1과 MPEG-2 media MIME types
AudioVideo
audio/mpegvideo/mpeg
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-1과 MPEG-2가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
MPEG-1 Part 2No
MPEG-2 Part 2No
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-1과 MPEG-2가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
MPEG-1 Audio Layer INo
MPEG-1 Audio Layer IINo
MPEG-1 Audio Layer III (MP3)Yes
+ +

MPEG-4 (MP4)

+ +

{{interwiki("wikipedia", "MPEG-4")}} (MP4) 는 최신 MPEG 파일 포맷입니다. 파트 1과 14 스펙에서 정의된 두 가지 버전의 포맷이 있습니다. MP4는 오늘날 유명한 컨테이너 포맷으로 많이 쓰이는 코덱을 지원하며 널리 사용되고 있습니다.

+ +

최초의 MPEG-4 Part 1 포맷은 1999년 발표되었습니다; Part 14에서 정의된 버전 2 포맷은 2003년 추가되었습니다. MP4 파일 포맷은 Apple이 개발한 {{interwiki("wikipedia", "QuickTime file format")}}에서 파생된 {{interwiki("wikipedia", "ISO base media file format")}}에서 다시 파생되었습니다.

+ +

MPEG-4 미디어 타입을 표기할 때 (audio/mp4 or video/mp4), MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

+ + + + + + + + + + + + + + + +
기본 MPEG-4 media MIME 타입
AudioVideo
audio/mp4video/mp4
+ +

위는 MPEG-4 미디어 컨테이너의 기본 타입입니다; 어떤 코덱을 쓰느냐에 따라 MIME 타입도 달라질 수 있습니다. 또한 MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-4가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)Yes1
AV1Yes1
H.263No
MPEG-4 Part 2 VisualNo
VP9Yes
+ +

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

[2] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference media.av1.enabled to true.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MPEG-4가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACYes1
FLACYes
MPEG-1 Audio Layer III (MP3)Yes
OpusYes
+ +

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ +

Ogg

+ +

{{interwiki("wikipedia", "Ogg")}}는 Xiph.org Foundation이 운영하는 자유 오픈 컨테이너 포맷입니다. Theora, Vorbis, and Opus등의 Ogg 프레임워크는 특허에 얽매이지 않게 정의되었습니다. 재단 웹사이트에서 Xiph.org documents about the Ogg format를 확인할 수 있습니다.

+ + + + + + + + + + + + + + + +
기본 Ogg media MIME types
AudioVideo
audio/oggvideo/ogg
+ +

MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 트랙의 미디어 포맷에 대한 추가 정보도 기입할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ogg가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
TheoraYes
VP8Yes
VP9Yes
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ogg가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
FLACYes
OpusYes
VorbisYes
+ +

QuickTime

+ +

QuickTime 파일 포맷(QTFF, QT, MOV) 는 동일한 이름의 미디어 프레임워크에서 사용하기 위해 애플이 개발했습니다. 확장자 .mov는 최초 영화에서 쓰이기 위해  개발되었다는 의미에서 지어졌으며 보통 "QuickTime movie" 포맷이라 불립니다. QTFF가 MPEG-4 파일 포맷에 기반하였지만 두 포맷에는 분명한 차이점이 있으며 상호 호환되지 않습니다.

+ +

QuickTime 파일은 오디오, 비디오 텍스트 트랙 등 시간축을 가지는 다수의 데이터 타입을 지원합니다. QuickTime 파일은 원래 macOS에서 사용하기 위해 개발되었지만 수 년이 지나면서 윈도우즈 환경에서는 QuickTime for Windows를 통해 사용할 수 있게 되었습니다. 그러나 2016년 초부터 애플은 더 이상 QuickTime for Windows를 유지 보수하지 않으며 알려진 보안 취약점으로 인해 사용해선 안됩니다. 하지만 Windows Media Player 가 현재 QuickTime version 2.0 및 이전 버전을 지원하며; 이후 버전의 QuickTime은 서드파티 플러그인을 통해 지원합니다.

+ +

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 등 수 많은 비디오 포맷을 읽고 쓸 수 있습니다.

+ +

추가적인 코덱을 지원하기 위해 QuickTime에 다수의 서드파티 컴포넌트를 설치할 수도 있습니다.

+ +

QuickTime은 처음부터 지금까지 근본적으로 애플 디바이스에서 사용하기 위해 만들어졌기 때문에 인터넷 환경에서 널리 쓰이고 있지는 않습니다. 애플 스스로도 현재는 MP4 비디오를 사용하고 있구요. 게다가 QuickTime 프레임워크마저 deprecated되면서 macOS 10.15 Catalina부터는 사용이 불가능해졌습니다.

+ + + + + + + + + + + + + +
Base QuickTime media MIME type
Video
video/quicktime
+ +

video/quicktime 은 QuickTime 미디어 컨테이너의 기본 MIME 타입입니다. QuickTime (Mac OS의 미디어 프레임워크)이 다양한 컨테이너와 코덱을 지원하므로 다른 많은 MIME 타입 역시 지원합니다.

+ +

MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuickTime이 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)No
CinepakNo
Component VideoNo
DVNo
H.261No
H.263No
MPEG-2No
MPEG-4 Part 2 VisualNo
Motion JPEGNo
Sorenson Video 2No
Sorenson Video 3No
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
QuickTime이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACNo
ALaw 2:1No
Apple Lossless (ALAC)No
HE-AACNo
MPEG-1 Audio Layer III (MP3)No
Microsoft ADPCMNo
µ-Law 2:1 (u-Law)No
+ +

WAVE (WAV)

+ +

Waveform Audio File Format (WAVE)는 보통 줄여서 WAV라 불리며 .wav 확장자를 갖습니다. 오디오 비트스트림 데이터를 담기 위해 Microsoft와 IBM이 개발했습니다. 대부분의 WAV 파일은 linear PCM 포맷의 오디오 데이터를 담고 있습니다.

+ +

이 파일 포맷은 Resource Interchange File Format (RIFF)에서 파생되었으며 애플의 AIFF 같은 다른 파생 형식와 유사합니다..

+ +

WAVE 포맷은 1991년 처음 발표되었습니다.

+ + + + + + + + + + + + + + + + + + + + + + +
WAVE media MIME types
Audio
audio/wave
audio/wav
audio/x-wav
audio/x-pn-wav
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WAVE가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
ADPCM (Adaptive Differential Pulse Code Modulation)No
GSM 06.10No
LPCM (Linear Pulse Code Modulation)Yes
MPEG-1 Audio Layer III (MP3)No
µ-Law (u-Law)No
+ +

WebM

+ +

{{interwiki("wikipedia", "WebM")}} (Web Media)는 {{interwiki("wikipedia", "Matroska")}}에 기반하여 현대 웹 환경에서 사용하기 위해 디자인되었습니다. 특정 제품들은 WebM 컨테이너에 다른 코덱을 사용하기도 하지만 기본적으로는 무료 오픈 코덱을 사용하여 완전한 자유-오픈 기술을 지향하고 있습니다.

+ +

WebM은 2010년 처음 소개되었습니다..

+ + + + + + + + + + + + + + + +
WebM media MIME types
AudioVideo
audio/webmvideo/webm
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM이 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AV1Yes1
AVC (H.264)Yes2
VP8Yes
VP:9Yes
+ +

[1] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference media.av1.enabled to true.

+ +

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WebM이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
OpusYes
VorbisYes
+ +

알맞은 컨테이너 선택하기

+ +

여러분의 미디어 데이터에 알맞은 컨테이너를 선택하고 사용하기 위해서 몇 가지 고려해야 할 점들이 있습니다. 상대적으로 어떤 점이 더 중요한지는 요구사항이나 라이선스, 호환성, 타겟 고객 등에 따라 달라질 수 있습니다.

+ +

가이드라인

+ +

최선책 역시 미디어 데이터로 무엇을 하느냐에 달렸습니다. 미디어를 녹화/편집하는 것은 재생과 전혀 다른 이야기입니다. 최소한 노이즈 축적이라도 방지하려고 무손실 압축을 사용하면 매번 재 압축할 때 마다 압축 데이터가 누적되므로 미디어 데이터를 처리할때는 압축하지 않은 데이터를 사용하는게 퍼포먼스가 좋습니다.

+ +
    +
  • 저사양 단말 또는 저속 네트워크를 사용하는 고객을 대상으로 하고 있다면 3GP 컨테이너와 적절한 압축 코덱을 고려해 볼 수 있습니다.
    • +
  • 인코딩시 필수 사항이 있다면 컨테이너 선택 시 적절한 코덱을 지원하는 지 확인해야 합니다.
    • +
  • 미디어가 상용이 아니며 오픈 포맷일 경우 FLAC(오디오), WebM(비디오) 등의 오픈 컨테이너 포맷을 고려해 보세요.
    • +
  • 어떠한 이유로 미디어를 한가지 포맷으로 제공해야 한다면 많은 디바이스와 브라우저에 널리 쓰여지는 MP3(오디오), MP4(비디오, 오디오)등의 포맷을 선택하세요.
    • +
  • 미디어가 오디오만 있다면 오디오 전용 컨테이너를 사용하는게 합당합니다. 현재는 특허가 모두 만료되어 널리 쓰여지는 MP3가 좋은 선택입니다. WAVE도 좋지만 비압축이므로 대용량 오디오 샘플의 경우에는 사용을 주의하세요. 모든 타겟 브라우저가 지원한다면 무손실 압축을 지원하는 FLAC이 최선입니다.
    • +
+ +

슬픈 일이지만 주요 무손실 압축 포맷 (FLAC, ALAC) 모두 폭넓게 지원되고 있지 않습니다. 둘 중에 FLAC이 그나마 낫지만 macOS에서는 추가적인 소프트웨어 설치 없이는 지원을 안합니다. iOS에서는 아예 불가능하구요. 무손실 오디오를 플랫폼에 무관하게 제공하려면 FLAC과 ALAC 둘 다 지원해야 합니다.

+ +

컨테이너 선택 가이드

+ +

아래의 테이블은 다양한 시나리오에서 사용할 컨테이너에 대한 권고안입니다. 이는 추천일 뿐이며 컨테이너 포맷을 선택할 때에는 여러분의 제품이나 기관의 상황을 고려하여 선택하세요.

+ +

오디오 전용 파일

+ + + + + + + + + + + + + + + + + + + + + + +
만약에...추천 컨테이너 포맷
일반 재생 목적으로 압축 파일 사용MP3 (MPEG-1 Audio Layer III)
무손실 압축 파일FLAC with ALAC fallback
무압축 파일WAV
+ +

이제는 MP3 특허가 모두 만료되었으므로 오디오 파일 선택은 별로 어려운 문제가 아닙니다. 폭넓게 쓰이는 MP3를 사용하면서 특허료를 내야 하느냐에 대한 고민을 할 필요가 없죠.

+ +

비디오 파일

+ + + + + + + + + + + + + + + + + + + + + + + + +
만약에...추천 컨테이너 포맷
가능한 오픈 포맷을 사용한 일반 비디오WebM (MP4 호환 추가)
일반 비디오MP4 (WebM, Ogg 호환 추가)
저속 네트워크상의 고효율 압축3GP (MP4 호환 추가)
구형 단말/브라우저 지원QuickTime (AVI, MPEG-2 호환 추가)
+ +

몇 가지 가정 하의 권고입니다. 최종 결정 전에 여러가지를 따져보아야 하며 인코딩 해야 할 미디어가 많은 경우 특히나 심사숙고해야 합니다.

+ +

다양한 컨테이너간 호환성 극대화

+ +

호환성을 높이려면 한가지 버전 이상의 미디어 파일 제공을 고려해 볼 수 있습니다. {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 추가하여 구현할 수 있죠. 예를 들어 Ogg, WebM 비디오를 우선하되 호환성을 위해 MP4 포맷을 추가할 수 있습니다. 레트로하게 QuickTime이나 AVI 호환을 추가하는 것도 좋은 방법입니다.

+ +

구현하려면 우선 {{htmlattrxref("src", "video")}} 어트리뷰트 없이 <video> (또는 <audio>) 엘리먼트를 생성합니다. 그 후 <video> 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 제공하려는 미디어 포맷별로 추가합니다. 이 방식은 대역폭 상황에 따라 소스를 선택하는 방식으로도 사용할 수 있지만 여기서는 포맷 옵션을 제공하기로 하죠.

+ +

아래 예제에서는 두 포맷 타입의 비디오를 제공합니다: WebM and MP4.

+ +
{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
+ + + +

첫번째 비디오는 WebM 포맷입니다({{htmlattrxref("type", "video")}} 어트리뷰트가 video/webm). {{Glossary("user agent")}}는 재생이 불가능 한 경우 type 이 video/mp4 인 다음 옵션으로넘어갑니다. 둘 다 재생이 불가능 할 경우 "This browser does not support the HTML5 video element." 문구가 표시됩니다.

+ +

스펙

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationComment
ETSI 3GPP3GP 컨테이너 포맷 정의
ISO/IEC 14496-3 (MPEG-4 Part 3 Audio)ADTS 포함 한 MP4 오디오 정의
FLAC FormatFLAC 포맷 규정
ISO/IEC 11172-1 (MPEG-1 Part 1 Systems)MPEG-1 컨테이너 포맷 정의
ISO/IEC 13818-1 (MPEG-2 Part 1 Systems)MPEG-2 컨테이너 포맷 정의
ISO/IEC 14496-14 (MPEG-4 Part 14: MP4 file format)MPEG-4 (MP4) version 2 컨테이너 포맷 정의
ISO/IEC 14496-1 (MPEG-4 Part 1 Systems)오리지널 MPEG-4 (MP4) 컨테이너 포맷 정의
{{RFC(3533)}}Ogg 컨테이너 포맷 정의
{{RFC(5334)}}Ogg 미디어 타입 및 확장자 정의
QuickTime File Format SpecificationQuickTime movie (MOV) 포맷 정의
Multimedia Programming Interface and Data Specifications 1.0공식 WAVE 스펙에 가까운 문서
Resource Interchange File Format (used by WAV)RIFF 포맷 정의; WAVE는 RIFF의 한 형태
WebM Container GuidelinesWebM 용 Matroska 적용 가이드
Matroska SpecificationsWebM 기반 Matroska 컨테이너 포맷 스펙
WebM Byte Stream FormatMedia Source Extensions를 통한 WebM 바이트 스트림 포맷
+ +

브라우저 호환성

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
컨테이너 포맷 이름오디오비디오
MIME typeExtension(s)Browser supportMIME typeExtension(s)Browser support
3GPaudio/3gpp.3gpFirefoxvideo/3gpp.3gpFirefox
ADTS (Audio Data Transport Stream)audio/aac.aacFirefox———
FLACaudio/flac.flacFirefox———
MPEG-1 / MPEG-2 (MPG or MPEG)audio/mpeg.mpg
+ .mpeg		Firefoxvideo/mpeg.mpg
+ .mpeg		Firefox
audio/mp3.mp3Firefox
MPEG-4 (MP4)audio/mp4.mp4
+ .m4a		Firefoxvideo/mp4.mp4
+ .m4v
+ .m4p		Firefox
Oggaudio/ogg.oga
+ .ogg		Firefoxvideo/ogg.ogv
+ .ogg		Firefox
QuickTime Movie (MOV)———video/quicktime.mov
WAV (Waveform Audiofile)audio/wav.wavFirefox———
WebMaudio/webm.webmFirefoxvideo/webm.webmFirefox
+ +

더 보기

+ + diff --git a/files/ko/web/media/formats/video_codecs/index.html b/files/ko/web/media/formats/video_codecs/index.html new file mode 100644 index 0000000000..5cccc89329 --- /dev/null +++ b/files/ko/web/media/formats/video_codecs/index.html @@ -0,0 +1,1646 @@ +--- +title: 웹 비디오 코덱 가이드 +slug: Web/Media/Formats/비디오코덱 +translation_of: Web/Media/Formats/Video_codecs +--- +

압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:

+ +
    +
  • HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.
    • +
  • 보통 초당 30프레임이므로 HD 비디오 1초는 248,832,000바이트 (~249 MB)를 잡아 먹습니다.
    • +
  • HD 1분은 1.39 GB가 필요합니다.
    • +
  • 일반적인 30분짜리 비디오 컨퍼런스의 경우 47.1 GB가 필요하며, 2시간짜리 영화는 무려 166 GB입니다.
    • +
+ +

비압축된 비디오 데이터는 스토리지 공간이 많이 필요할 뿐만 아니라 네트워크로 전송할 경우에도 어마어마한 대역폭이 필요합니다. 오디오와 오버헤드를 제외하고도 초당 249 MB가 필요하죠. 여기서 비디오 코덱이 등장합니다. 오디오 코덱이 사운드 데이터를 처리하듯이 비디오 코덱도 비디오 데이터를 압축하고 적절한 포맷으로 인코딩하여, 이후에 디코딩하여 재생 또는 편집할 수 있도록 합니다.

+ +

대부분의 비디오 코덱은 손실 압축입니다. 디코딩해도 원본과 완전히 동일하지 않죠. 디테일한 부분이 사라질 수 있는데; 얼마나 사라지는지는 코덱와 설정에 달렸습니다만 압축율을 높일수록 디테일과 정확도는 감소합니다. 무손실 코덱도 있긴 합니다만, 보통 기록 보존 및 로컬 재생에만 염두에 두고 있는 경우가 많습니다.

+ +

이 문서는 웹에서 흔히 볼 수 있는 비디오 코덱을 소개하고 각각의 기능과 호환성, 사용성에 대해 설명하고 여러분에게 필요한 적절한 코덱을 찾는 법을 안내합니다.

+ +

일반 코덱

+ +

웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
코덱 이름 (축약어)전체 코덱 이름지원하는 컨테이너
AV1AOMedia Video 1MP4, WebM
AVC (H.264)Advanced Video Coding3GP, MP4, WebM
H.263H.263 Video3GP
HEVC (H.265)High Efficiency Video CodingMP4
{{anch("MP4V-ES")}}MPEG-4 Video Elemental Stream3GP, MP4
{{anch("MPEG-1")}}MPEG-1 Part 2 VisualMPEG, QuickTime
{{anch("MPEG-2")}}MPEG-2 Part 2 VisualMP4, MPEG, QuickTime
TheoraTheoraOgg
VP8Video Processor 83GP, Ogg, WebM
VP9Video Processor 9MP4, Ogg, WebM
+ +

인코딩 관여 요소

+ +

어떤 인코더를 사용하든지간에 인코딩된 비디오의 크기와 퀄리티를 결정하는 두 개의 기본적인 요소 그룹이 있습니다: 하나는 소스 비디오의 포맷와 콘텐츠이며 나머지는 인코딩 시 코덱의 특징 및 설정입니다.

+ +

요약하자면 이겁니다:인코딩 된 비디오가 원본에 가까울수록, 압축율은 적고 비디오 파일 크기는 커집니다. 그러므로 사이즈와 퀄리티는 항상 트레이드 오프가 있습니다. 특별한 경우에는 퀄리티 손실을 크게 감수하고서라도 사이즈를  많이 줄여야 할 필요가 있을 수도 있으며;반대로 고용량의 파일을 생성하더라도 퀄리티를 최대한 유지해야 하는 경우도 있습니다.

+ +

인코딩 된 비디오에 영향을 끼치는 소스 포맷

+ +

소스 비디오의 형식이 출력에 영향을 미치는 정도는 코덱과 작동 방식에 따라 다릅니다. 코덱이 미디어를 내장 픽셀 포맷으로 변환하거나 심플 픽셀 이외의 방식으로 이미지를 표현하는 경우에는 원본 포맷에 따른 차이는 거의 없습니다. 하지만 프레임 레이트나 해상도는 반드시 출력 미디어 크기에 영향을 미치게 되죠.

+ +

또한 모든 코덱은 각각 장단점이 있습니다. 어떤 코덱은 특정한 형태와 패턴에 약하거나 엣지 선명도가 약하거나, 암부의 디테일이 떨어지거나 등의 여러가지 문제가 있을 수 있죠. 모든 건 기저의 알고리즘과 수학 공식에 달렸습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
인코딩 된 비디오의 품질과 크기에 영향을 줄 수 있는 비디오 포맷과 콘텐츠
기능품질에 영향크기에 영향
Color depth (bit depth)색 깊이가 높을수록 비디오의 색상 정확도가 높아집니다. Additionally, 이미지의 강렬한 부분 (빛이나 순수한 빨강  [rgba(255, 0, 0, 1)] 등 매우 원색적인 색상), 컴포넌트당 10bit (10-bit color) 이하의 색 깊이에서는 그라데이션 부분이 마치 계단처럼 색상이 분리되는 현상인 컬러 밴딩이 발생할 수 밖에 없습니다.코덱에 따라 다르지만 색 깊이가 높을 수록 압축된 파일 사이즈가 커지게 됩니다. 압축 데이터의 내장 스토리지 포맷에 따라 결정됩니다.
프레임 레이트이미지 상에 보여지는 움직임이 얼마나 부드러운지에 크게 영향을 끼칩니다. 프레임 레이트가 높을 수록 움직임이 더 부드럽고 현실에 가까워 집니다. 계속 높이다보면 압축의 의미가 없어지는 지점에 도달하게 되죠. 아래의 {{anch("Frame rate")}} 절을 참조하세요.인코딩 도중 프레임 레이트를 감소시키지 않는 다면 높을 수록 압축된 결과물이 커집니다.
움직임(Motion)비디오 압축은 일반적으로 프레임을 비교하면서 수행합니다. 두 프레임이 어디가 다른지 찾아낸 후 이전 프레임에서 다음 프레임을 예측하기 위핸 최소한의 정보만을 기록하는 방식입니다. 연속된 프레임이 다른 것들과 다를 수록 차이점도 많아지고 the less effective the compression is at avoiding the introduction of artifacts into the compressed video.움직임이 복잡할 수록 프레임간의 차이점이 많아 지므로 인터프레임이 커지게 됩니다. 이를 비롯한 여러가지 이유로 인해 일반적으로 움직임이 많은 영상일수록 사이즈가 큽니다.
잡음(Noise)픽쳐 노이즈(필름 그레인 효과, 먼지 등 이미지의 불규칙한 점들)는 픽셀간 변화폭을 늘립니다. 증가된 변화폭은 압축을 어렵게 하고 동일한 압축 레벨일 때 디테일을 떨어뜨리는 원흉이 되죠.이미지에 -노이즈 같이- 변화폭이 큰 부분이 많을수록 압축 알고리즘이 비슷한 수준으로 이미지를 압축하기 어렵습니다. 노이즈로 인한 변화폭을 무시하도록 인코더를 세팅하지 않는 한 노이즈가 많을 수록 압축된 비디오 파일 크기도 커질겁니다.
해상도(width, height)압축하는 과정에 특이사항이 발생하지 않는 한 동일한 크기의 스크린에 더 높은 해상도의 비디오가 출력될 수록 원본에 가까운 영상을 볼 수 있습니다.해상도가 높을수록 비디오 크기도 커집니다. 최종 사이즈에 결정적인 요소죠.
+ +

위 요소들이 인코딩 된 비디오에 미치는 정도는 선택한 인코더와 설정 등 정확한 상황에 따라 굉장히 다양합니다. 인코딩 중에 코덱의 일반 옵션에 더해서 프레임 레이트를 줄이거나 노이즈 제거, 비디오 해상도를 줄이는 등 인코더 설정을 추가할 수 있습니다.

+ +

인코딩 결과물에 영향을 끼치는 코덱 설정

+ +

비디오 인코딩에 쓰이는 알고리즘은 보통 여러가지의 기술들로 구성되어 있습니다. 일반적으로 최종 결과물의 크기를 줄이기 위한 설정 옵션은 비디오 퀄리티 하락이나 특정 이슈를 발생시킵니다. 최종 결과물이 매우 커지지만 오리지널 소스를 완벽하게 재생하기 위해 무손실 인코딩을 택할 수도 있습니다.

+ +

또한 각 인코더는 결과물의 품질과 크기에 영향을 끼치는 다양한 바리에이션을 가지고 있기도 합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
품질과 크기에 영향을 미치는 비디오 인코더 설정
기능품질에 영향크기에 영향
무손실 압축품질 손실 없음손실 압축에 비해 무손실 압축은 전체 비디오 크기를 많이 줄일 수 없습니다; 결과물 파일은 일반적으로 사용하기엔 여전히 매우 거대합니다.
+

손실 압축

+ 		특정 코덱과 압축을 어떻게 하느냐에 따라 퀄리티 저하에 영향을 끼치는 인자나 기타 요소가 어느 정도 발생하게 됩니다.원본 비디오와 많이 달라져도 된다면 높은 압축률을 달성하는 것은 어렵지 않습니다.
품질 세팅품질 설정을 높게 세팅할수록 인코딩 된 비디오도 원본에 가깝게 보일겁니다.보통은 높은 품질로 설정할 수록 인코딩 된 비디오 파일도 커집니다;그 정도는 코덱에 따라 다르겠지만요.
비트레이트품질을 높이면 보통 비트레이트도 높아집니다.비트레이트가 높으면 결과물 파일도 커지죠.
+ +

인코딩 시 설정 가능한 항목과 값은 코덱마다 다를 뿐만 아니라 사용하는 인코더 소프트웨어에 따라서도 다양합니다. 여러분이 사용하는 인코더 소프트웨어의 가이드 문서에 인코딩 시 영향을 끼치는 옵션에 대해 설명하고 있을겁니다.

+ +

압축 아티팩트

+ +

아티팩트는 는 손실 압축에서 발생할 수 있는 부작용으로 시각적인 데이터의 손실 또는 변경입니다. 비디오 출력 방식 때문에 아티팩트가 한 번 발생하면 생각보다 오래 남습니다. 비디오의 각 프레임은 현재 보여지는 프레임에서 변경된 부분만 적용하는 방식으로 표현됩니다. 이 말은 즉 에러나 아티팩트는 시간이 지날수록 복잡해지고 이미지상의 결함이나 이상한 점, 깨진 부분 등이 한동안 지속된다는 걸 의미하죠.

+ +

이 문제도 해결하고 또 비디오 데이터의 탐색 시간을 개선하기 위해 주기적으로 키 프레임(인트라-프레임 또는 i-프레임)을 비디오 파일에 삽입합니다. 키 프레임은 통짜 프레임으로 현재 보이는 이미지 손상이나 아티팩트를 수정하기 위해 존재합니다.

+ +

위신호(Aliasing)

+ +

위신호는 인코딩 된 데이터가 압축하기 전과 다르게 보이는 현상 전반에 대한 일반 용어입니다. 여러가지 종류의 위신호가 있으며;흔히 보이는 것들은 아래와 같습니다:

+ + + + + + + + + + + + + + + + +
+

모아레 현상(Moiré patterns)

+ +

{{interwiki("모아레 현상-Moiré pattern")}}는 소스 이미지의 패턴과 인코더의 동작 방식이 공간적으로 약간 정렬되어 있지 않을 때 발생하는 대규모 공간 간섭 패턴입니다. 인코딩 시 발생한 아티팩트를 디코딩 하면 소스 이미지에 이상한 회오리 무늬가 생깁니다.

+
+

계단 현상

+ +

계단 현상은 공간적 아티팩트의 하나로 부드러워야 할 대각선이나 곡선 경계면이 마치 계단처럼 들쭉날쭉하게 보이는 현상을 의미합니다. "안티-앨리어싱"필터를 사용하면 줄일 수 있습니다.

+
+

마차 바퀴 현상

+ +

마차 바퀴 현상 (또는 {{interwiki("wikipedia", "스트로보 효과")}})은 필름에서 흔히 볼 수 있는 시각적 효과로 프레임 레이트와 압축 알고리즘에 의해 회전하는 바퀴가 느리거나 빠르게 혹은 아예 반대 방향으로 보이는 것을 의미합니다. 이는 철도 노선의 침목이나 도로변의 기둥 등 일정한 패턴으로 움직이는 것이라면 어디서든 볼 수 있습니다. 이는 시간적 위신호 이슈로;압축 또는 인코딩 시 샘플링 레이트가 회선 속도에 간섭하여 발생합니다.

+
+ +

컬러 엣징(Color edging)

+ +

컬러 엣징은 시각적 아티팩트 중 하나로 화면상의 색상을 가진 오브젝트들의 경계면에 잘못된 색상이 나타나는 현상입니다. 나타나는 색상은 프레임의 콘텐츠간에 아무 연관도 없습니다.

+ +

선명도 손실

+ +

비디오 인코딩 중 일부 데이터를 제거하면 필연적으로 디테일 손실이 발생합니다. 충분히 압축하고 나면 일부 또는 전체 이미지에 약간 불분명하거나 흐릿한 부분이 보일 수 있습니다.

+ +

선명도가 떨어지면 이미지 상의 글자를 읽기 어렵습니다. 특히나 작은 글씨들은 디테일에 민감한 콘텐츠로 작은 변화로도 매우 읽기 어려워집니다.

+ +

링잉 효과(Ringing)

+ +

손실 압축 알고리즘은 링잉 효과 {{interwiki("wikipedia", "ringing artifacts", "ringing")}}를 일으킬 수 있습니다. 링잉 효과는 압축 알고리즘에 의해 오브젝트의 경계면에 픽셀이 오염되는 현상을 의미합니다. 압축 알고리즘이 오브젝트와 배경의 경계면이 포함된 블럭을 사용했을 때 발생할 수 있습니다. 보통 압축율이 높을 때 주로 발생합니다.

+ +

Example of the ringing effect

+ +

위 별 모양의 경계 부분에 파랑 및 분홍 부분을 보세요 (계단 현상 등 다른 압축 아티팩트도 나타남). 저 부분이 링잉 효과입니다. 링잉은 어떤 면에서는 {{anch("Mosquito noise", "mosquito noise")}}와 비슷합니다, 다만 모기 효과는 일렁거리거나 움직이는데 반해 링잉 효과는 정지한 채로 변하지 않습니다.

+ +

링잉 효과 역시 이미지 상의 글자를 읽기 어렵게 하는 아티팩트입니다.

+ +

포스터라이징(Posterizing)

+ +

포스터리제이션은 압축된 결과물이 그라디언트 부분에서 색상 디테일을 잃는 현상을 의미합니다. 그라디언트 영역이 부드럽게 색상이 변하지 않고 원본과 비슷한 색상의 블록 형태로 얼룩이 묻은 듯한 이미지로 표현 됩니다.

+ +

+ +

위 이미지상 흰머리 수리의  깃털 부분의 색상이 블록처럼 보이는 것을 보세요(배경의 흰색 올빼미도요). 포스터리제이션 효과로 인해 깃털의 디테일을 상당 부분 잃었습니다.

+ +

컨투어링(Contouring)

+ +

컨투어링 또는 컬러 밴딩은 포스터리제이션의 특별한 형태로 이미지에서 색상 블록이 줄무늬 형태로 나타나는 현상을 의미합니다. 이는 비디오 인코딩 시 양자화 설정이 제대로 이뤄지지 않은 경우 발생할 수 있습니다.  결과적으로 부드럽게 변해야 할 그라디언트 부분에 "층"이 생긴 것처럼 줄무늬가 보입니다.

+ +

Example of an image whose compression has introduced contouring

+ +

위 이미지를 보시면 하늘에서 지평선으로 부드럽게 변해야 하는데 파란색이 층층이 져 있는 것을 볼 수 있습니다. 이 것이 컨투어링 효과입니다.

+ +

모스키토 노이즈(Mosquito noise)

+ +

모스키토 노이즈는 시간적 아티팩트 중 하나로 배경과 물체의 경계면의 차이가 큰 부분에서 노이즈나 edge busyness가 흐릿하게 일렁거리는 현상을 의미합니다. 시각적으로는  {{anch("Ringing", "ringing")}} 효과와 유사합니다.

+ +

+ +

위 이미지상 다리 여러군데의 주변 하늘에서 모스키토 노이즈를 볼 수 있습니다. 우측 상단에 모스키토 노이즈가 발생한 부분을 확대해 놓았습니다.

+ +

모스키토 노이즈는 MPEG 비디오에서 흔히 발견할 수 있지만 이산 코사인 변환(DCT)를 사용한 로직이라면 어디든지 발생할 수 있습니다;JPEG 정지 화상에서도요.

+ +

움직임 보상 블록 경계면 아티팩트

+ +

일반적인 비디오 압축은 두 프레임을 비교한 뒤 프레임간 차이점을 마지막 프레임까지 저장하는 방식으로 진행됩니다. 고정된 카메라에 촬영되는 물체들도 정지해 있다면 이 압축 방식은 매우 잘 동작하겠지만 프레임마다 움직임이 커지면 압축률을 높이기가 쉽지 않습니다.

+ +

{{interwiki("wikipedia", "움직임 보상")}}은 물체가 각각의 방향으로 얼마만큼 많은 픽셀이 이동했는지 움직임(카메라 자체의 이동 또는 프레임 상의 물체의 이동)을 추적하는 기술입니다.  그리고 단순 움직임 만으로는 설명할 수 없는 픽셀의 추가 정보와 함께 움직임을 저장합니다. 요약하자면 인코더가 움직이는 물체를 찾아낸 후 원본과 동일해 보이지만 새로운 위치로 이동한 인터널 프레임을 생성하는 방식입니다. 이론적으로는 새로운 프레임이 나타난 것과 거의 동일합니다. 새 프레임에 남아있는 다른 차이점이 발견된다면 물체의 움직임과 픽셀 차이점을 저장하여 작업을 마무리 합니다. 이렇게 움직임과 픽셀 차이점이 기록된 물체를 residual frame이라 부릅니다.

+ + + + + + + + + + + + + + + + + + + + + + + + +
원본 프레임인터-프레임 차이점움직임 보상 이후 차이점
Original frame of videoDifferences between the frames after shifting two pixels right
시청자에게 보이는 최초 전체 프레임이건 첫번째 프레임과 두번째 프레임간의 차이점만 나타낸 화면입니다. 나머지는 모두 검정이죠. 가까이서 보면 이 움직임들은 단지 카메라가 수평으로 이동했기 때문에 발생한 것을 알 수 있습니다. 움직임 보상을 써먹기에 아주 좋은 후보죠.차이점을 가지는 픽셀 수를 최소화 하기 위해 첫번째 프레임에서 카메라가 오른쪽으로 2픽셀 이동하였다고 가정한 뒤 픽셀 차이점을 계산합니다. 이는 카메라의 움직임을 추적하여 두 프레임간 겹치는 부분이 더 많아지게 합니다.
Images from Wikipedia
+ +

움직임 보상에는 두 가지 형태가 있습니다: 전역 움직임 보상 과 블록 움직임 보상입니다. 전역 움직임 보상은 달리, 트래킹, 선회, 기울이기 및 회전 등의 카메라 변화를 감지합니다. 블록 움직임 보상은 추적 대상이 될만한 움직임의 작은 부분들을 찾아 처리합니다. 블록들은 보통 고정된 크기를 가지고 격자 형태로 배열되어 있지만 다양한 크기의 블록 및 블록이 겹치는 경우도 처리할 수 있도록 여러 형태의 움직임 보상을 지원합니다.

+ +

하지만 움직임 보상에서도 아티팩트가 발생할 수 있습니다. 링잉 효과 등의 현상이 발생할 만큼 선명한 경계면에서 주로 발생합니다. 이는 residual frame을 코딩하는 도중 수학 계산의 결과물로 인해 발생하는 것으로 다음 키프레임에 의해 수정되기 전에 쉽게 발견할 수 있습니다.

+ +

프레임 크기 감소

+ +

특정 상황에서는 비디오 면적을 감소시키는 것이 비디오 파일 최종 사이즈를 줄이는데 도움이 되기도 합니다. 재생 도중 당장의 크기나 부드러움이 줄어드는 건 안 좋은 게 사실이지만 세심하게 조절하면 최종 결과물은 더 좋아질 수 있습니다. 1080p 비디오를 인코딩 전 720p 비디오로 축소한다면 화질을 더 높게 유지한 채로 크기를 훨씬 줄일 수 있습니다; 재생 할 때 스케일업 하더라도 필요한 파일 크기에 맞추어 품질을 조정한 채 전체 크기로 인코딩한 경우보다 화질이 좋습니다.

+ +

프레임 레이트 감소

+ +

비슷하게 전체 비디오에서 프레임을 제거하고 프레임 레이트를 감소시킬 수도 있습니다. 두 가지 장점이 있는데: 전체 비디오를 작게 만들고 움직임 보상 처리가 더 쉬워집니다. 예를 들어 2 픽셀이 차이나는 두 인터 프레임 간의 움직임 차이점을 계산하는 대신에, 프레임을 스킵하여 두 프레임 간 4 픽셀 차이점을 계산하도록 할 수 있습니다. 이러면 전체 카메라 이동을 더 적은 residual frame으로 표현할 수 있습니다.

+ +

사람 눈의 움직이는 것처럼 인식되는 최소한의 프레임 레이트는 약 12입니다. 그보다 적으면 비디오가 아니라 연속된 정지 화상으로 보입니다. 영화 필름은 보통 초당 24 프레임이며 표준 화질 TV(SDTV)는 대략 30 fps(약간 적지만 비슷합니다, 29.97), 고화질 TV(HDTV)는 24-60fps입니다. 24fps이상이면 일반적으로 충분히 부드러워 보입니다;여러분의 필요에 따라 다르지만 30/60fps가 이상적인 목표치죠.

+ +

결론적으로 어떤걸 희생할 지 정하는 것은 여러분의 디자인 팀에 달렸습니다.

+ +

코덱 세부사항

+ +

AV1

+ +

AOMedia Video 1 (AV1) 코덱은 Alliance for Open Media 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. {{anch("VP9")}}, {{anch("HEVC", "H.265/HEVC")}} 보다 압축율이 높으며, AVC보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 WebRTC에서 사용하기 위해 설계하였습니다.

+ +

AV1은 현재 세 프로파일을 제공하며:main, high, professional 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 레벨 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.

+ +

예를들어 AV1 level 2.0의 최대 프레임 크기는 가로 2048 세로 1152 픽셀이지만 프레임 당 최대 픽셀 개수는 147,456(<= 2048x1152 = 2,359,296)이므로 실제 2048x1152 크기의 프레임을 사용할 수는 없습니다. 하지만 인지해야 할 점은 적어도 파이어폭스와 크롬의 소프트웨어 디코더는 현 시점에서 사실상 레벨은 무시하고 주어진 설정에 맞추어 비디오를 디코딩하는데 최선을 다합니다. 하지만 향후 호한성을 위해 여러분은 선택한 레벨에 맞추어 유지해야 합니다.

+ +

현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.

+ +

위와 같은 이유로 당분간 최우선 비디오 코덱으로 AV1를 사용하기에는 이르지만 미래에는 반드시 선택을 고려해야 합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트비디오 레벨에 따라 다름;이론적으로 level 6.3에서 최대 800Mbps[2]
지원 프레임 레이트레벨에 따라 다름;예를 들어 level 2.0은 최대 30fps, level 6.3은 최대 120fps
압축손실 DCT 기반 알고리즘
지원 프레임 크기8 x 8 픽셀 에서 65,535 x 65535 픽셀 사이 값
지원 컬러 모드 + + + + + + + + + + + + + + + + + + + + + + + + + +
프로필색 깊이크로마 서브샘플링
Main8 or 104:0:0 (그레이스케일) or 4:2:0
High8 or 104:0:0 (그레이스케일), 4:2:0, or 4:4:4
Professional8, 10, or 124:0:0 (그레이스케일), 4:2:0, 4:2:2, or 4:4:4
+
HDR 지원예
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
AV1 지원707567No57No
+
지원 컨테이너ISOBMFF[1], MPEG-TS, MP4, WebM
{{Glossary("RTP")}} / WebRTC 호환성예
유지 보수 기관Alliance for Open Media
스펙https://aomediacodec.github.io/av1-spec/av1-spec.pdf
라이선스로열티 프리, 공개 포맷
+ +

[1] {{interwiki("wikipedia", "ISO Base Media File Format")}}

+ +

[2] See the AV1 specification's tables of levels, which describe the maximum resolutions and rates at each level.

+ +

AVC (H.264)

+ +

MPEG-4 스펙 집합 중 Advanced Video Coding (AVC) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠.

+ +

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 크로마 서브샘플링을 지원합니다.

+ +

AVC에 동일한 장면의 여러 시점을 지원하는 기능도 있습니다.(Multiview Video Coding), 이는 양안 영상 등을 가능하게끔 합니다.

+ +

AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.

+ +

웹이 아닌 환경에서 WebRTC를 구현한 브라우저(JavaScript API가 없는 제품이라도)는 WebRTC 콜을 위해 AVC를 지원해야합니다. 웹 브라우저는 꼭 그럴필요는 없지만 몇몇은 지원하고 있습니다.

+ +

많은 플랫폼이 웹브라우저의 HTML 콘텐츠 형태로 AVC의 하드웨어 인코딩/디코딩을 지원하고 있습니다. 하지만 AVC를 프로젝트에서 사용하기 전에 라이선스 요구사항을 꼭 읽어보세요!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트레벨에 따라 다름
지원 프레임레이트레벨에 따라 다름; 300 fps까지 가능
압축손실 DCT 기반 알고리즘, 이미지안에 무손실 매크로 블록 생성 가능
지원 프레임 크기최대 8,192 x 4,320 픽셀
지원 컬러 모드 +

일반적이고 유효한 프로필:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
프로필색 깊이크로마 서브샘플링
Constrained Baseline (CBP)84:2:0
Baseline (BP)84:2:0
Extended (XP)84:2:0
Main (MP)84:2:0
High (HiP)84:0:0 (그레이스케일) and 4:2:0
Progressive High (ProHiP)84:0:0 (그레이스케일) and 4:2:0
High 10 (Hi10P)8 to 104:0:0 (그레이스케일) and 4:2:0
High 4:2:2 (Hi422P)8 to 104:0:0 (그레이스케일), 4:2:0, and 4:2:2
High 4:4:4 Predictive8 to 144:0:0 (그레이스케일), 4:2:0, 4:2:2, and 4:4:4
+
HDR 지원예; {{interwiki("wikipedia", "Hybrid Log-Gamma")}} 또는 Advanced HDR/SL-HDR; 모두  ATSC의 파트
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
AVC/H.265 지원41235[1]9253.2
+
지원 컨테이너3GP, MP4, WebM
{{Glossary("RTP")}} / WebRTC 호환예
유지 보수 기관MPEG / ITU
스펙https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding
+ https://www.itu.int/rec/T-REC-H.264
라이선스상용 특허 다수. 상용 사용 시 라이선스 필요. 여러 특허 풀에 영향 가능
+ +

[1] 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.

+ +

H.263

+ +

ITU의 H.263 코덱은 저대역폭 환경에서 쓰기 위해 설계하였습니다. 특히 PSTN (Public Switched Telephone Networks), {{Glossary("RTSP")}}, SIP (IP-based videoconferencing) 시스템에서의 영상 회의에 초점을 맞추었습니다. 저대역폭 네트워크 환경에 최적화되었음에도 CPU에 영향이 크며 저사양 컴퓨터에서 원할하게 동작하지 않습니다. 데이터 포맷은 MPEG-4 Part2와 유사합니다.

+ +

H.263은 웹에서 널리 쓰인 적이 없습니다. H.263의 변형 포맷이 Flash 비디오나 Sorenson 코덱 같은 상용 소프트웨어에서 사용된 적은 있습니다.  하지만 주요 브라우저 중 H.263를 기본으로 지원하는 제품은 없습니다. 특정 플러그인이 H.263을 지원하고는 있습니다.

+ +

대부분의 코덱과 다르게 H.263은 인코딩 된 비디오의 프레임별 최대 비트레이트(BPPmaxKb)의 기본값을 정의하고 있습니다. 인코딩시에 BPPmaxKb값을 지정하면 각 프레임은 해당 수치를 넘어설 수 없습니다. 최종 프레임은 이 값과 프레임 레이트, 압축, 선택한 해상도와 블록 포맷에 따라 결정됩니다.

+ +

H.263은 H.264로 대체되었으며 가능한한 이전의 미디어 포맷은 사용하지 않아야 합니다. H.263이 최선일 정도로 오래된 장치를 지원해야 하는 프로젝트일 경우에만 H.263을 지원할테죠.

+ +

H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수 많은 기관들이 소유하고 있는 특허에 기반한 상용 포맷입니다. H.263을 사용하려면 필요한 라이선스를 반드시 취득해야합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트무제한, 단 보통 64kbps 미만
지원 프레임 레이트자유
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 1408 x 1152 픽셀[2]
지원 컬러 모드YCbCr; 각 픽쳐 포맷 (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF)은 프레임 크기를 픽셀 및 휘도와 색차 샘플의 라인수로 정의하고 있음
HDR 지원아니오
가변 비트레이트 (VFR) 지원아니오
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
H.263 supportNoNoNo[1]NoNoNo
+
컨테이너 지원3GP, MP4, QuickTime
{{Glossary("RTP")}} / WebRTC 호환아니오
유지 보수 기관ITU
스펙https://www.itu.int/rec/T-REC-H.263/
라이선스상용;적절한 라이선스가 필요함. 특허 풀이 여러 곳일 수 있음.
+ +

[1] 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.

+ +

[2] Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.

+ +

HEVC (H.265)

+ +

High Efficiency Video Coding (HVEC) 코덱은 ITU의 H.265 및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 {{anch("AVC")}}와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.

+ +

예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.

+ +

메인 프로파일이 컴포넌트당 8비트 컬러와 4:2:0 크로마 서브샘플링을 지원하는 점은 흥미로운 부분입니다. 또한 4:4:4 비디오는 특별 취급합니다. 휘도 샘플(이미지 픽셀을 그레이스케일로 표현)과 Cb Cr 샘플(회색을 색상으로 어떻게 변경할지 표시)을 가지는 대신, 세 채널은 3개의 모노크롬 이미지로 취급하며 렌더링시에 풀컬러 이미지를 만들어 내도록 결합합니다.

+ +

HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. MPEG LA하에 라이선스가 관리되고 있으며; 컨텐츠 제작자나 제공자가 아닌 개발자에 청구됩니다. 여러분의 앱/웹사이트에서 HEVC 사용 여부를 결정하기 전에 최신 라이선스와 요구 사항을 점검하는 걸 잊지마세요!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 800,000 Kbps
지원 프레임 레이트레벨마다 다름; 최대 300 FPS 가능
압축손실 DCT 기반 알고리즘
지원 프레임 크기128 x 96 에서 8,192 x 4,320 픽셀; 프로파일과 레벨마다 다름
지원 컬러 모드 +

아래 표는 주요 프로파일에 한해서입니다. 여기에 포함하지 않는 프로파일도 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
프로파일색 깊이크로마 서브샘플링
Main84:2:0
Main 108 to 104:2:0
Main 128 to 124:0:0 and 4:2:0
Main 4:2:2 108 to 104:0:0, 4:2:0, and 4:2:2
Main 4:2:2 128 to 124:0:0, 4:2:0, and 4:2:2
Main 4:4:484:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 108 to 104:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 128 to 124:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 16 Intra8 to 164:0:0, 4:2:0, 4:2:2, and 4:4:4
+
HDR 지원예
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
HEVC / H.265 supportNo18[1]No[2]11[1]No11
+
지원 컨테이너MP4
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관ITU / MPEG
스펙http://www.itu.int/rec/T-REC-H.265
+ https://www.iso.org/standard/69668.html
라이선스상용;라이선스 요구사항에서 컴플라이언스 확인 다수의 특허 풀이 적용될 수 있음에 유의
+ +

[1] Internet Explorer and Edge only supports HEVC on devices with a hardware codec.

+ +

[2] Mozilla will not support HEVC while it is encumbered by patents.

+ +

MP4V-ES

+ +

MPEG-4 Video Elemental Stream (MP4V-ES) 포맷은 MPEG-4 Part 2 시각 표준 중 하나입니다. 일반적으로 MPEG-4 part 2 비디오는 더 이상 사용하지 않는데 다른 코덱에 비해 특장점이 없어 모바일에서도 쓰임새가 없습니다.  MP4V 는 MPEG-4 컨테이너의 H.263 인코딩과 본질적으로 동일합니다.

+ +

원래 목적은 {{Glossary("RTP")}} 세션에서 MPEG-4 오디오 및 비디오 스트림을 사용하기 위해서였습니다. 하지만 3GP를 통한 모바일 통신에서도 쓰이고 있습니다.

+ +

지원하는 주요 브라우저가 없으며 사실상 폐기된 포맷이라 왠만하면 사용할 일이 없을겁니다. 이 컨테이너 파일의 확장자는.mp4v지만 .mp4로 잘못 표기된 경우도 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트5 Kbps 에서 1 Gbps 이상
지원 프레임 레이트명시적 제한 없음; 데이터 전송율에 의해 제한
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 4,096 x 4,096 픽셀
지원 컬러 모드YCrCb 크로마 서브샘플링(4:2:0, 4:2:2, and 4:4:4); 컴포넌트당 12bits 색 깊이
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원Yes
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MP4V-ES supportNo[2]NoYes[1]NoNoNo
+
지원 컨테이너3GP, MP4
{{Glossary("RTP")}} / WebRTC 호환아니오
Supporting/Maintaining 유지/보수 기관MPEG
스펙{{RFC(6416)}}
라이선스상용; MPEG LA and/or AT&T에서 필수 라이선스 취득 필요
+ +

[1] Firefox supports MP4V-ES in 3GP containers only.

+ +

[2] Chrome does not support MP4V-ES; however, Chrome OS does.

+ +

MPEG-1 Part 2 Video

+ +

MPEG-1 Part 2 Video는 1990년대 초에 베일을 벗었습니다. 이후 MPEG 비디오 표준과는 다르게 MPEG-1은 {{Glossary("ITU", "ITU's")}}의 개입 없이 순수히 MPEG가 만들었습니다.

+ +

모든 MPEG-2 디코더는 MPEG-1 비디오를 재생할 수 있기 때문에 다양한 소프트웨어와 하드웨어 장치에서 호환 가능합니다. MPEG-1 비디오 특허는 모두 만료되었으며, 라이선스에 대한 걱정에서 자유롭습니다. 하지만 소수의 브라우저만이 플러그인 없이 MPEG-1을 지원하며 플러그인은 deprecated된 경우가 많으므로 일반적으로는 더 이상 사용할 수 없습니다. 때문에 웹사이트/어플리케이션에서 MPEG-1는 좋은 선택이 아닙니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 1.5 Mbps
지원 프레임 레이트23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 4,095 x 4,095 픽셀
지원 컬러 모드Y'CbCr 4:2:0 크로마 서브샘플링 with up to 12 bits per component
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원아니오
브라우저 호환 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MPEG-1 supportNoNoNoNoNoYes
+
지원 컨테이너MPEG
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관MPEG
스펙https://www.iso.org/standard/22411.html
라이선스Proprietary; however, all patents have expired, so MPEG-1 may be used freely
+ +

MPEG-2 Part 2 Video

+ +

MPEG-2 Part 2 {{Glossary("ITU")}}가 설계한 H.262를 참조하여 MPEG-2 스펙에서 정의한 비디오 포맷이며입니다. MPEg-1 비디오와 매우 유사하며 사실 MPEG-2 플레이어는 높은 비트레이트 및 특수 인코딩 옵션 지원을 위한 확장 스펙이 아닌 한 특별한 작업 없이 MPEG-1 비디오를 재생할 수 있습니다.

+ +

MPEG-2의 목적은 표준 TV로 압축하는 것이므로 인터레이스 비디오도 지원합니다. 표준 비디오 결과물의 압축 비율과 품질은 DVD 비디오 미디어의 요구사항도 충족하여 메인 비디오 코덱으로 MPEG-2가 선정되기에 충분하였습니다.

+ +

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 비트레이트로 지원합니다.

+ +

그러나 소수의 브라우저만 MPEG-2를 네이티브로 지원하며 플러그인은 대부분 deprecated 되어 더 이상 사용 가능하지 않습니다. 때문에 웹 사이트나 웹앱에서 MPEG-2는 좋은 선택이 아닙니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 100 Mbps; 레벨과 프로파일에 따라 다름
지원 프레임 레이트 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
축약어레벨 이름지원 프레임 레이트
LLLow Level23.9, 24, 25, 29.97, 30
MLMain Level23.976, 24, 25, 29.97, 30
H-14High 144023.976, 24, 26, 29.97, 30, 50, 59.94, 60
HLHigh Level23.976, 24, 26, 29.97, 30, 50, 59.94, 60
+
압축손실 DCT 기반 알고리즘
지원 프레임 크기 + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
축약어레벨 이름최대 프레임 크기
LLLow Level352 x 288 pixels
MLMain Level720 x 576 pixels
H-14High 14401440 x 1152 pixels
HLHigh Level1920 x 1152 pixels
+
지원 컬러 모드대다수 프로파일에서 Y'CbCr 4:2:0 크로마 서브샘플링; "High", "4:2:2" 프로파일에서 4:2:2 크로마 서브샘플링 지원.
HDR 지원아니오
가변 프레임 레이트(VFR) 지원아니오
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MPEG-2 supportNoNoNoNoNoYes
+
지원 컨테이너MPEG, MPEG-TS (MPEG Transport Stream), MP4, QuickTime
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관MPEG / ITU
스펙https://www.itu.int/rec/T-REC-H.262
+ https://www.iso.org/standard/61152.html
라이선스상용; 2019년 4월 1일자로 말레이지아와 필리핀을 제외한 모든 지역에서 모든 특허 만료됨, 두 국가 외에서는 자유롭게 사용 가능. MPEG LA에 의해 특허 관리
+ +

Theora

+ +

Xiph.org가 {{interwiki("wikipedia", "Theora")}}는 로열티와 라이선스 없이 사용 가능한 오픈소스 자유 비디오 코덱입니다. Theora의 품질과 압축율은 MPEG-4 Part 2 Visual과 AVC에 견줄만하며, 비디오 인코딩 시 반드시 최고를 고수해야 하는 경우가 아니라면 매우 좋은 선택이 될 수 있습니다. 하지만 라이선스-프리로 특허 문제가 없으며 상대적으로 저사양 CPU에서도 충분히 돌아가는 스펙 덕분에 최근 많은 소프트웨어와 웹프로젝트에서 선택하고 있습니다. 현재로써는 Theroa를 위한 하드웨어 디코더가 없기 때문에 저사양 CPU에서도 원할하다는 점은 아주 중요합니다.

+ +

Theora는 원래 On2 Technologies의 VC3 코덱을 베이스로 하고 있습니다. VC3 코덱과 사양은 Xiph.org 관리 하에 LGPL 라이선스로 등재되어 있으며 이후 Theora 표준으로 인입하였습니다.

+ +

Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬러 밴딩을 피하기 위해 10 이상의 컬러 모드를 선택하는 옵션이 없다는 겁니다. 따지자면 현 시점에서 8 bit 컬러가 대부분이기 때문에 큰 문제는 되지 않습니다. 단지 불편할 뿐이죠. 또 Theora는 Ogg 컨테이너에서만 사용할 수 있습니다. 가장 큰 문제는 Safari에서 사용할 수 없다는 것입니다. macOs 뿐만 아니라 수억대의 iPhone과 iPad에서도 사용할 수 없다는 걸 의미합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트최대 2 Gbps
지원 프레임 레이트임의의 0 이상 값 지원. 유리수 프레임 레이트를 지원하기 위해 32-bit 분자와 분모로 구성되어 있음
압축손실 DCT-기반 알고리즘
지원 프레임 크기최대 1,048,560 x 1,048,560 픽셀 이하 어떠한 가로, 세로 조합이라도 가능
지원 컬러 모드Y'CbCr 4:2:0, 4:2:2, 4:4:4 크로마 서브샘플링, 8 bit 컬러
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원예[1]
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
Theora support3Yes[2]3.5No10.5No
+
지원 컨테이너Ogg
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관Xiph.org
스펙https://www.theora.org/doc/
라이선스오픈 프리-로열티
+ +

[1] 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.

+ +

[2] Edge supports Theora with the optional Web Media Extensions add-on.

+ +

VP8

+ +

Video Processor 8 (VP8) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 {{anch("AVC")}}에 견줄만 합니다.

+ +

브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.

+ +

HTML 콘텐츠로써 특히 WebM 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 반드시 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트level별 제한이 없는 한 무제한 임의의 값
지원 프레임 레이트임의 값
압축손실 DCT-기반 일고리즘
지원 프레임 크기최대 16,384 x 16,384 픽셀
지원 컬러 모드Y'CbCr 4:2:0 크로마 서브샘플링, 8 bit 색 깊이
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원예
지원 브라우저 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
VP8 support2514[1]491612.1[2]
+
지원 컨테이너3GP, Ogg, WebM
{{Glossary("RTP")}} / WebRTC 호환예; VP8은 WebRTC의 필수 코덱 중 하나
유지/보수 기관Google
스펙{{RFC(6386)}}
라이선스라이선스 및 로열티로부터 자유로운 오픈 소스
+ +

[1] Edge support for VP8 requires the use of Media Source Extensions.

+ +

[2] Safari only supports VP8 in WebRTC connections.

+ +

VP9

+ +

Video Processor 9 (VP9)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.

+ +

VP9의 main profile은 4:2:0 크로마 서브 샘플링에서 8-bit 색 깊이 모드만을 지원합니다. 하지만 더 깊은 색상 모드와 전체 범위의 크로마 서브샘플링을 지원하는 프로파일도 가지고 있습니다. HDR 기능도 있으며 프레임 레이트, 영상 비율, 프레임 사이즈를 자유롭게 선택할 수 있는 오셥도 제공합니다.

+ +

VP9는 광범위한 브라우저가 지원하고 있으며 하드웨어 구현체로 상당히 퍼져있습니다. VP9는 WebM에서만 사용할 수 있는 두 코덱 중 하나입니다(나머지 하나는 {{anch("VP8")}}). 하지만 Safari는 WebM 및 VP9 모두 지원하지 않으므로 VP9를 사용할 경우 iPhone, iPad, Mac에서 AVC나 HEVCS등 다른 포맷을 대체할 수 있도록 만들어야 합니다.

+ +

Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사용자에게 AVC/HEVC 대체 포맷 제공이 가능하다면 VP9은 좋은 선택입니다. 상용 코덱 대신에 오픈 코덱을 쓰기로 결정했다면 더할 나위 없죠. 호환 포맷을 제공할 수 없지만 Safari 사용자도 잃을 수 없다면 WebM에 VP9는 차선책이 좋을 겁니다. 아니라면 다른 코덱을 고려해 보셔야겠죠.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지원 비트레이트level 제한이 없는 한 무제한 임의의 값
지원 프레임 레이트임의 값
압축손실 DCT-기반 알고리즘
지원 프레임 크기최대 65,536 x 65,536 픽셀
지원 컬러 모드 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Profile색 깊이크로마 서브샘플링
Profile 084:2:0
Profile 184:2:0, 4:2:2, and 4:4:4
Profile 210 to 124:2:0
Profile 310 to 124:2:0, 4:2:2, and f:4:4
+ +

지원 색 공간: {{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")}}.

+
HDR 지원예; HDR10+, HLG, PQ
가변 프레임 레이트 (VFR) 지원Yes
브라우저 호환성 + + + + + + + + + + + + + + + + + + + + + +
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
VP9 지원291428No10.6No
+
지원 컨테이너MP4, Ogg, WebM
{{Glossary("RTP")}} / WebRTC 호환예
유지/보수 기관Google
스펙https://www.webmproject.org/vp9/
라이선스라이선스 및 로열티-프리 오픈 소스requirements
+ +

코덱 선택하기

+ +

어떤 코덱을 사용할지는 스스로 꼬리에 꼬리를 무는 질문을 던진 끝에 답을 얻을 수 있습니다.:

+ +
    +
  • 오픈 포맷을 사용할건가요? 상용 코덱도 염두에 두고 있나요?
    • +
  • 한 비디오를 여러 포맷으로 생산할 여력이 되나요? fallback 옵션을 제공할 수 있다면 의사 결정 과정을 단순화 할 수 있습니다.
    • +
  • 호환성을 포기할 수 있는 브라우저가 있나요?
    • +
  • 보장하는 커버리지 상 가장 오래된 브라우저는 어떤 것인가요? 예를 들어 지난 5년간 출시된 모든 브라우저를 지원할지, 1년 사이의 브라우저만을 지원할지?
    • +
+ +

아래 섹션에서는 특정 유즈케이스에서 추천할만한 코덱을 명시합니다. 각 유즈케이스마다 최대 두 개의 추천 코덱을 볼 수 있습니다. 특정 유즈케이스에 베스트인 코덱이 상용이거나 로열티 지불이 필요하다면 생각해 볼 두 가지 옵션이 있습니다: 로열티 프리 오픈 코덱을 선택하거나, 상용 라이선스를 따르거나.

+ +

각 비디오당 하나의 포맷만 제공할 수 있다면 필요한 요구사항을 최대한 만족하는 최적의 포맷을 선택해야 합니다. 첫 번째 추천 코덱은 품질과 퍼포먼스, 호환성을 최대한 고려한 것이며 두번째는 품질과 퀄리티, 크기를 조금 희생하더라도 최대한의 호환성을 가지는 옵션입니다.

+ +

Recommendations for everyday videos

+ +

우선 블로그나 정보형 사이트, 소규모 기업 웹사이트 등 상품을 설명하기 위한 비디오(비디오 자체가 상품은 아닌)를 위한 옵션을 알아봅시다.

+ +
    +
  1. +

    WebM 컨테이너에 비디오는 {{anch("VP8")}}, 오디오는 Opus 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.

    + + 
    <video controls src="filename.webm"></video>
+
    +
    2. +
  2. +

    MP4 컨테이너에 비디오 코덱은 {{anch("AVC")}} (H.264) 오디오 코덱은 AAC 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.

    + + 
    <video controls>
+  <source type="video/webm"
+          src="filename.webm">
+  <source type="video/mp4"
+          src="filename.mp4">
+</video>
+
    +
    3. +
+ +
+

Note: {{HTMLElement("<video>")}} 엘리먼트는 자식으로 {{HTMLElement("source")}} 엘리먼트 유무에 상관 없이 </video> 닫기 태그가 필요하다는 것을 잊지 마세요.

+
+ +

고품질 비디오 제공을 위한 추천

+ +

여러분의 목표가 최대한 높은 품질의 비디오를 재생하는 것이라면 가능한한 다양한 포맷으로 제공할 수 있는 방법을 모색해야합니다. 최신의 코덱일수록 고품질 비디오를 지원하지만 반대로 브라우저 호환성은 떨어집니다.

+ +
    +
  1. +

    WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.

    + + 
    <video controls src="filename.webm"></video>
+
    +
    2. +
  2. +

    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을 사용합니다.

    + + 
    <video controls>
+  <source type="video/webm"
+          src="filename.webm">
+  <source type="video/mp4"
+          src="filename.mp4">
+</video>
+
    +
    3. +
+ +

비디오 보존, 편집, 믹싱을 위한 추천

+ +

웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.

+ +

손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 "fast" 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.

+ +

외부에 비디오 보존

+ +

여러분의 웹 사이트나 앱 외부 영역에 보존 목적의 비디오라면 무압축 원본 비디오 데이터를 압축하는 유틸리티를 사용하세요. 예를들어 x264 유틸리티는 매우 높은 비트레이트로 {{anch("AVC")}} 인코딩을 할 수 있습니다:

+ +
x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
+ +

다른 코덱들도 충분한 여유가 있다면 더 나은 최고-품질 압축을 보여줄지도 모릅니다, 단지 그 인코더들은 엄청 느려서 위 압축으로 얻어지는 거의 무손실 비디오가 전체적으로 비슷한 품질을 보여주면서도 상당히 빠를겁니다.

+ +

비디오 녹화

+ +

무손실에 가까운 비디오를 보여줘야 한다는 제약이 있다면, {{anch("AVC")}} 또는 {{anch("AV1")}}를 고려해 볼 필요가 있습니다. 예를들어 비디오를 녹화하기 위해 MediaStream Recording API를 사용한다면, {{domxref("MediaRecorder")}} 객체를 생성하는 코드는 아래와 같습니다:

+ +
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);
+ +

위 예제에서 MediaRecorder를 생성하여 BT.2100 HDR, 12-bit color 4:4:4 크로마 서브샘플링 설정으로 {{anch("AV1")}} 비디오 레코딩을, FLAC으로 무손실 오디오를 레코딩 하고 있습니다. 결과물 파일은 비디오 오디오 트랙 합쳐 800Mbps를 넘지 않을 겁니다. 하드웨어 성능이나 요구사항, 사용하고자 하는 코덱에 따라 설정 값을 변경할 수 있습니다. 위의 비트 레이트 값은 네트워크 실사용 케이스에선 비현실적인 값이며 로컬 장치에서만 가능하겠죠.

+ +

codecs 파라미터 값을 '.' 기준으로 나눠서 의미를 분석해 봅시다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
값설명
av014문자 코드 (4CC-4 Character Code) {{anch("AV1")}} 코덱을 의미합니다.
2프로파일. 2는 Professional profile. 1은 High profile, 0은 Main profile.
19H레벨과 티어. AV 스펙의 A.3의 표에서 설명, Level 6.3의 High tier를 의미합니다
12색 깊이. 컴포넌트당 12bit를 의미. 8, 10도 가능하나 AV1에서 표현할 수 있는 가장 정확한 색 깊이 값이 12입니다.
0모노크롬 모드 플래그. 1로 지정하면 색차 성분은 녹화되지 않으며 휘도 성분만 축적되어 그레이스케일 이미ㅣ지로 표현됩니다. 색상을 사용할 것이므로 0으로 지정하였습니다.
000크로마 서브샘플링 모드. AV1 스펙의 section 6.4.2에 설명. 모노크롬 모드 값이 0일 때 000 값은 4:4:4 크로마 서브샘플링 또는 색상 손실이 없어야 함을 나태냅니다.
09사용할 색 공간. AV1 스펙의 section 6.4.2에서 설명 9는 HDR을 위한 BT.2020 색역을 의미합니다.
16전송시 사용할 색 공간. 마찬가지로 section 6.4.2에서 설명; 16은 BT.2100 PQ 컬러로 전송하겠다는 의미입니다.
09section 6.4.2 에서 설명하는 계수 행렬. 9 값은 유동 휘도 값의 BT.2020 색역을 사용하겠다는 의미입니다. BT.2010 YbCbCr와 동일한 의미입니다.
1"full range" 비디오 플래그. 1은 전체 컬러 영역을 녹화하겠다는 의미입니다.
+ +

선택하고자 하는 코덱 문서에 codecs 파라미터 값이 받아들이는 설정이 설명되어 있습니다.

+ +

더 보기

+ + diff --git "a/files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" "b/files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" deleted file mode 100644 index 5cccc89329..0000000000 --- "a/files/ko/web/media/formats/\353\271\204\353\224\224\354\230\244\354\275\224\353\215\261/index.html" +++ /dev/null @@ -1,1646 +0,0 @@ ---- -title: 웹 비디오 코덱 가이드 -slug: Web/Media/Formats/비디오코덱 -translation_of: Web/Media/Formats/Video_codecs ---- -

압축되지 않은 비디오 데이터는 그 크기가 엄청나기 때문에, 저장하거나 네트워크를 통해 전송하기 위해서는 아주 작게 압축해야 합니다. 압축되지 않은 비디오를 저장하는 과정을 상상해 봅시다:

- -
    -
  • HD(1920x1080) 풀 컬러(픽셀 당 4바이트) 비디오의 한 프레임은 8,294,400 입니다.
    • -
  • 보통 초당 30프레임이므로 HD 비디오 1초는 248,832,000바이트 (~249 MB)를 잡아 먹습니다.
    • -
  • HD 1분은 1.39 GB가 필요합니다.
    • -
  • 일반적인 30분짜리 비디오 컨퍼런스의 경우 47.1 GB가 필요하며, 2시간짜리 영화는 무려 166 GB입니다.
    • -
- -

비압축된 비디오 데이터는 스토리지 공간이 많이 필요할 뿐만 아니라 네트워크로 전송할 경우에도 어마어마한 대역폭이 필요합니다. 오디오와 오버헤드를 제외하고도 초당 249 MB가 필요하죠. 여기서 비디오 코덱이 등장합니다. 오디오 코덱이 사운드 데이터를 처리하듯이 비디오 코덱도 비디오 데이터를 압축하고 적절한 포맷으로 인코딩하여, 이후에 디코딩하여 재생 또는 편집할 수 있도록 합니다.

- -

대부분의 비디오 코덱은 손실 압축입니다. 디코딩해도 원본과 완전히 동일하지 않죠. 디테일한 부분이 사라질 수 있는데; 얼마나 사라지는지는 코덱와 설정에 달렸습니다만 압축율을 높일수록 디테일과 정확도는 감소합니다. 무손실 코덱도 있긴 합니다만, 보통 기록 보존 및 로컬 재생에만 염두에 두고 있는 경우가 많습니다.

- -

이 문서는 웹에서 흔히 볼 수 있는 비디오 코덱을 소개하고 각각의 기능과 호환성, 사용성에 대해 설명하고 여러분에게 필요한 적절한 코덱을 찾는 법을 안내합니다.

- -

일반 코덱

- -

웹에서 널리 쓰이는 비디오 코덱은 아래와 같습니다. 각 코덱마다 해당 코덱을 지원하는 컨테이너(파일 타입)도 나열되어 있습니다. 각 코덱의 링크를 클릭하면 해당 코덱에 대해 세부정보, 기능, 호환성 등 필요한 내용이 추가된 하단 섹션으로 이동합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
코덱 이름 (축약어)전체 코덱 이름지원하는 컨테이너
AV1AOMedia Video 1MP4, WebM
AVC (H.264)Advanced Video Coding3GP, MP4, WebM
H.263H.263 Video3GP
HEVC (H.265)High Efficiency Video CodingMP4
{{anch("MP4V-ES")}}MPEG-4 Video Elemental Stream3GP, MP4
{{anch("MPEG-1")}}MPEG-1 Part 2 VisualMPEG, QuickTime
{{anch("MPEG-2")}}MPEG-2 Part 2 VisualMP4, MPEG, QuickTime
TheoraTheoraOgg
VP8Video Processor 83GP, Ogg, WebM
VP9Video Processor 9MP4, Ogg, WebM
- -

인코딩 관여 요소

- -

어떤 인코더를 사용하든지간에 인코딩된 비디오의 크기와 퀄리티를 결정하는 두 개의 기본적인 요소 그룹이 있습니다: 하나는 소스 비디오의 포맷와 콘텐츠이며 나머지는 인코딩 시 코덱의 특징 및 설정입니다.

- -

요약하자면 이겁니다:인코딩 된 비디오가 원본에 가까울수록, 압축율은 적고 비디오 파일 크기는 커집니다. 그러므로 사이즈와 퀄리티는 항상 트레이드 오프가 있습니다. 특별한 경우에는 퀄리티 손실을 크게 감수하고서라도 사이즈를  많이 줄여야 할 필요가 있을 수도 있으며;반대로 고용량의 파일을 생성하더라도 퀄리티를 최대한 유지해야 하는 경우도 있습니다.

- -

인코딩 된 비디오에 영향을 끼치는 소스 포맷

- -

소스 비디오의 형식이 출력에 영향을 미치는 정도는 코덱과 작동 방식에 따라 다릅니다. 코덱이 미디어를 내장 픽셀 포맷으로 변환하거나 심플 픽셀 이외의 방식으로 이미지를 표현하는 경우에는 원본 포맷에 따른 차이는 거의 없습니다. 하지만 프레임 레이트나 해상도는 반드시 출력 미디어 크기에 영향을 미치게 되죠.

- -

또한 모든 코덱은 각각 장단점이 있습니다. 어떤 코덱은 특정한 형태와 패턴에 약하거나 엣지 선명도가 약하거나, 암부의 디테일이 떨어지거나 등의 여러가지 문제가 있을 수 있죠. 모든 건 기저의 알고리즘과 수학 공식에 달렸습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
인코딩 된 비디오의 품질과 크기에 영향을 줄 수 있는 비디오 포맷과 콘텐츠
기능품질에 영향크기에 영향
Color depth (bit depth)색 깊이가 높을수록 비디오의 색상 정확도가 높아집니다. Additionally, 이미지의 강렬한 부분 (빛이나 순수한 빨강  [rgba(255, 0, 0, 1)] 등 매우 원색적인 색상), 컴포넌트당 10bit (10-bit color) 이하의 색 깊이에서는 그라데이션 부분이 마치 계단처럼 색상이 분리되는 현상인 컬러 밴딩이 발생할 수 밖에 없습니다.코덱에 따라 다르지만 색 깊이가 높을 수록 압축된 파일 사이즈가 커지게 됩니다. 압축 데이터의 내장 스토리지 포맷에 따라 결정됩니다.
프레임 레이트이미지 상에 보여지는 움직임이 얼마나 부드러운지에 크게 영향을 끼칩니다. 프레임 레이트가 높을 수록 움직임이 더 부드럽고 현실에 가까워 집니다. 계속 높이다보면 압축의 의미가 없어지는 지점에 도달하게 되죠. 아래의 {{anch("Frame rate")}} 절을 참조하세요.인코딩 도중 프레임 레이트를 감소시키지 않는 다면 높을 수록 압축된 결과물이 커집니다.
움직임(Motion)비디오 압축은 일반적으로 프레임을 비교하면서 수행합니다. 두 프레임이 어디가 다른지 찾아낸 후 이전 프레임에서 다음 프레임을 예측하기 위핸 최소한의 정보만을 기록하는 방식입니다. 연속된 프레임이 다른 것들과 다를 수록 차이점도 많아지고 the less effective the compression is at avoiding the introduction of artifacts into the compressed video.움직임이 복잡할 수록 프레임간의 차이점이 많아 지므로 인터프레임이 커지게 됩니다. 이를 비롯한 여러가지 이유로 인해 일반적으로 움직임이 많은 영상일수록 사이즈가 큽니다.
잡음(Noise)픽쳐 노이즈(필름 그레인 효과, 먼지 등 이미지의 불규칙한 점들)는 픽셀간 변화폭을 늘립니다. 증가된 변화폭은 압축을 어렵게 하고 동일한 압축 레벨일 때 디테일을 떨어뜨리는 원흉이 되죠.이미지에 -노이즈 같이- 변화폭이 큰 부분이 많을수록 압축 알고리즘이 비슷한 수준으로 이미지를 압축하기 어렵습니다. 노이즈로 인한 변화폭을 무시하도록 인코더를 세팅하지 않는 한 노이즈가 많을 수록 압축된 비디오 파일 크기도 커질겁니다.
해상도(width, height)압축하는 과정에 특이사항이 발생하지 않는 한 동일한 크기의 스크린에 더 높은 해상도의 비디오가 출력될 수록 원본에 가까운 영상을 볼 수 있습니다.해상도가 높을수록 비디오 크기도 커집니다. 최종 사이즈에 결정적인 요소죠.
- -

위 요소들이 인코딩 된 비디오에 미치는 정도는 선택한 인코더와 설정 등 정확한 상황에 따라 굉장히 다양합니다. 인코딩 중에 코덱의 일반 옵션에 더해서 프레임 레이트를 줄이거나 노이즈 제거, 비디오 해상도를 줄이는 등 인코더 설정을 추가할 수 있습니다.

- -

인코딩 결과물에 영향을 끼치는 코덱 설정

- -

비디오 인코딩에 쓰이는 알고리즘은 보통 여러가지의 기술들로 구성되어 있습니다. 일반적으로 최종 결과물의 크기를 줄이기 위한 설정 옵션은 비디오 퀄리티 하락이나 특정 이슈를 발생시킵니다. 최종 결과물이 매우 커지지만 오리지널 소스를 완벽하게 재생하기 위해 무손실 인코딩을 택할 수도 있습니다.

- -

또한 각 인코더는 결과물의 품질과 크기에 영향을 끼치는 다양한 바리에이션을 가지고 있기도 합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
품질과 크기에 영향을 미치는 비디오 인코더 설정
기능품질에 영향크기에 영향
무손실 압축품질 손실 없음손실 압축에 비해 무손실 압축은 전체 비디오 크기를 많이 줄일 수 없습니다; 결과물 파일은 일반적으로 사용하기엔 여전히 매우 거대합니다.
-

손실 압축

- 		특정 코덱과 압축을 어떻게 하느냐에 따라 퀄리티 저하에 영향을 끼치는 인자나 기타 요소가 어느 정도 발생하게 됩니다.원본 비디오와 많이 달라져도 된다면 높은 압축률을 달성하는 것은 어렵지 않습니다.
품질 세팅품질 설정을 높게 세팅할수록 인코딩 된 비디오도 원본에 가깝게 보일겁니다.보통은 높은 품질로 설정할 수록 인코딩 된 비디오 파일도 커집니다;그 정도는 코덱에 따라 다르겠지만요.
비트레이트품질을 높이면 보통 비트레이트도 높아집니다.비트레이트가 높으면 결과물 파일도 커지죠.
- -

인코딩 시 설정 가능한 항목과 값은 코덱마다 다를 뿐만 아니라 사용하는 인코더 소프트웨어에 따라서도 다양합니다. 여러분이 사용하는 인코더 소프트웨어의 가이드 문서에 인코딩 시 영향을 끼치는 옵션에 대해 설명하고 있을겁니다.

- -

압축 아티팩트

- -

아티팩트는 는 손실 압축에서 발생할 수 있는 부작용으로 시각적인 데이터의 손실 또는 변경입니다. 비디오 출력 방식 때문에 아티팩트가 한 번 발생하면 생각보다 오래 남습니다. 비디오의 각 프레임은 현재 보여지는 프레임에서 변경된 부분만 적용하는 방식으로 표현됩니다. 이 말은 즉 에러나 아티팩트는 시간이 지날수록 복잡해지고 이미지상의 결함이나 이상한 점, 깨진 부분 등이 한동안 지속된다는 걸 의미하죠.

- -

이 문제도 해결하고 또 비디오 데이터의 탐색 시간을 개선하기 위해 주기적으로 키 프레임(인트라-프레임 또는 i-프레임)을 비디오 파일에 삽입합니다. 키 프레임은 통짜 프레임으로 현재 보이는 이미지 손상이나 아티팩트를 수정하기 위해 존재합니다.

- -

위신호(Aliasing)

- -

위신호는 인코딩 된 데이터가 압축하기 전과 다르게 보이는 현상 전반에 대한 일반 용어입니다. 여러가지 종류의 위신호가 있으며;흔히 보이는 것들은 아래와 같습니다:

- - - - - - - - - - - - - - - - -
-

모아레 현상(Moiré patterns)

- -

{{interwiki("모아레 현상-Moiré pattern")}}는 소스 이미지의 패턴과 인코더의 동작 방식이 공간적으로 약간 정렬되어 있지 않을 때 발생하는 대규모 공간 간섭 패턴입니다. 인코딩 시 발생한 아티팩트를 디코딩 하면 소스 이미지에 이상한 회오리 무늬가 생깁니다.

-
-

계단 현상

- -

계단 현상은 공간적 아티팩트의 하나로 부드러워야 할 대각선이나 곡선 경계면이 마치 계단처럼 들쭉날쭉하게 보이는 현상을 의미합니다. "안티-앨리어싱"필터를 사용하면 줄일 수 있습니다.

-
-

마차 바퀴 현상

- -

마차 바퀴 현상 (또는 {{interwiki("wikipedia", "스트로보 효과")}})은 필름에서 흔히 볼 수 있는 시각적 효과로 프레임 레이트와 압축 알고리즘에 의해 회전하는 바퀴가 느리거나 빠르게 혹은 아예 반대 방향으로 보이는 것을 의미합니다. 이는 철도 노선의 침목이나 도로변의 기둥 등 일정한 패턴으로 움직이는 것이라면 어디서든 볼 수 있습니다. 이는 시간적 위신호 이슈로;압축 또는 인코딩 시 샘플링 레이트가 회선 속도에 간섭하여 발생합니다.

-
- -

컬러 엣징(Color edging)

- -

컬러 엣징은 시각적 아티팩트 중 하나로 화면상의 색상을 가진 오브젝트들의 경계면에 잘못된 색상이 나타나는 현상입니다. 나타나는 색상은 프레임의 콘텐츠간에 아무 연관도 없습니다.

- -

선명도 손실

- -

비디오 인코딩 중 일부 데이터를 제거하면 필연적으로 디테일 손실이 발생합니다. 충분히 압축하고 나면 일부 또는 전체 이미지에 약간 불분명하거나 흐릿한 부분이 보일 수 있습니다.

- -

선명도가 떨어지면 이미지 상의 글자를 읽기 어렵습니다. 특히나 작은 글씨들은 디테일에 민감한 콘텐츠로 작은 변화로도 매우 읽기 어려워집니다.

- -

링잉 효과(Ringing)

- -

손실 압축 알고리즘은 링잉 효과 {{interwiki("wikipedia", "ringing artifacts", "ringing")}}를 일으킬 수 있습니다. 링잉 효과는 압축 알고리즘에 의해 오브젝트의 경계면에 픽셀이 오염되는 현상을 의미합니다. 압축 알고리즘이 오브젝트와 배경의 경계면이 포함된 블럭을 사용했을 때 발생할 수 있습니다. 보통 압축율이 높을 때 주로 발생합니다.

- -

Example of the ringing effect

- -

위 별 모양의 경계 부분에 파랑 및 분홍 부분을 보세요 (계단 현상 등 다른 압축 아티팩트도 나타남). 저 부분이 링잉 효과입니다. 링잉은 어떤 면에서는 {{anch("Mosquito noise", "mosquito noise")}}와 비슷합니다, 다만 모기 효과는 일렁거리거나 움직이는데 반해 링잉 효과는 정지한 채로 변하지 않습니다.

- -

링잉 효과 역시 이미지 상의 글자를 읽기 어렵게 하는 아티팩트입니다.

- -

포스터라이징(Posterizing)

- -

포스터리제이션은 압축된 결과물이 그라디언트 부분에서 색상 디테일을 잃는 현상을 의미합니다. 그라디언트 영역이 부드럽게 색상이 변하지 않고 원본과 비슷한 색상의 블록 형태로 얼룩이 묻은 듯한 이미지로 표현 됩니다.

- -

- -

위 이미지상 흰머리 수리의  깃털 부분의 색상이 블록처럼 보이는 것을 보세요(배경의 흰색 올빼미도요). 포스터리제이션 효과로 인해 깃털의 디테일을 상당 부분 잃었습니다.

- -

컨투어링(Contouring)

- -

컨투어링 또는 컬러 밴딩은 포스터리제이션의 특별한 형태로 이미지에서 색상 블록이 줄무늬 형태로 나타나는 현상을 의미합니다. 이는 비디오 인코딩 시 양자화 설정이 제대로 이뤄지지 않은 경우 발생할 수 있습니다.  결과적으로 부드럽게 변해야 할 그라디언트 부분에 "층"이 생긴 것처럼 줄무늬가 보입니다.

- -

Example of an image whose compression has introduced contouring

- -

위 이미지를 보시면 하늘에서 지평선으로 부드럽게 변해야 하는데 파란색이 층층이 져 있는 것을 볼 수 있습니다. 이 것이 컨투어링 효과입니다.

- -

모스키토 노이즈(Mosquito noise)

- -

모스키토 노이즈는 시간적 아티팩트 중 하나로 배경과 물체의 경계면의 차이가 큰 부분에서 노이즈나 edge busyness가 흐릿하게 일렁거리는 현상을 의미합니다. 시각적으로는  {{anch("Ringing", "ringing")}} 효과와 유사합니다.

- -

- -

위 이미지상 다리 여러군데의 주변 하늘에서 모스키토 노이즈를 볼 수 있습니다. 우측 상단에 모스키토 노이즈가 발생한 부분을 확대해 놓았습니다.

- -

모스키토 노이즈는 MPEG 비디오에서 흔히 발견할 수 있지만 이산 코사인 변환(DCT)를 사용한 로직이라면 어디든지 발생할 수 있습니다;JPEG 정지 화상에서도요.

- -

움직임 보상 블록 경계면 아티팩트

- -

일반적인 비디오 압축은 두 프레임을 비교한 뒤 프레임간 차이점을 마지막 프레임까지 저장하는 방식으로 진행됩니다. 고정된 카메라에 촬영되는 물체들도 정지해 있다면 이 압축 방식은 매우 잘 동작하겠지만 프레임마다 움직임이 커지면 압축률을 높이기가 쉽지 않습니다.

- -

{{interwiki("wikipedia", "움직임 보상")}}은 물체가 각각의 방향으로 얼마만큼 많은 픽셀이 이동했는지 움직임(카메라 자체의 이동 또는 프레임 상의 물체의 이동)을 추적하는 기술입니다.  그리고 단순 움직임 만으로는 설명할 수 없는 픽셀의 추가 정보와 함께 움직임을 저장합니다. 요약하자면 인코더가 움직이는 물체를 찾아낸 후 원본과 동일해 보이지만 새로운 위치로 이동한 인터널 프레임을 생성하는 방식입니다. 이론적으로는 새로운 프레임이 나타난 것과 거의 동일합니다. 새 프레임에 남아있는 다른 차이점이 발견된다면 물체의 움직임과 픽셀 차이점을 저장하여 작업을 마무리 합니다. 이렇게 움직임과 픽셀 차이점이 기록된 물체를 residual frame이라 부릅니다.

- - - - - - - - - - - - - - - - - - - - - - - - -
원본 프레임인터-프레임 차이점움직임 보상 이후 차이점
Original frame of videoDifferences between the frames after shifting two pixels right
시청자에게 보이는 최초 전체 프레임이건 첫번째 프레임과 두번째 프레임간의 차이점만 나타낸 화면입니다. 나머지는 모두 검정이죠. 가까이서 보면 이 움직임들은 단지 카메라가 수평으로 이동했기 때문에 발생한 것을 알 수 있습니다. 움직임 보상을 써먹기에 아주 좋은 후보죠.차이점을 가지는 픽셀 수를 최소화 하기 위해 첫번째 프레임에서 카메라가 오른쪽으로 2픽셀 이동하였다고 가정한 뒤 픽셀 차이점을 계산합니다. 이는 카메라의 움직임을 추적하여 두 프레임간 겹치는 부분이 더 많아지게 합니다.
Images from Wikipedia
- -

움직임 보상에는 두 가지 형태가 있습니다: 전역 움직임 보상 과 블록 움직임 보상입니다. 전역 움직임 보상은 달리, 트래킹, 선회, 기울이기 및 회전 등의 카메라 변화를 감지합니다. 블록 움직임 보상은 추적 대상이 될만한 움직임의 작은 부분들을 찾아 처리합니다. 블록들은 보통 고정된 크기를 가지고 격자 형태로 배열되어 있지만 다양한 크기의 블록 및 블록이 겹치는 경우도 처리할 수 있도록 여러 형태의 움직임 보상을 지원합니다.

- -

하지만 움직임 보상에서도 아티팩트가 발생할 수 있습니다. 링잉 효과 등의 현상이 발생할 만큼 선명한 경계면에서 주로 발생합니다. 이는 residual frame을 코딩하는 도중 수학 계산의 결과물로 인해 발생하는 것으로 다음 키프레임에 의해 수정되기 전에 쉽게 발견할 수 있습니다.

- -

프레임 크기 감소

- -

특정 상황에서는 비디오 면적을 감소시키는 것이 비디오 파일 최종 사이즈를 줄이는데 도움이 되기도 합니다. 재생 도중 당장의 크기나 부드러움이 줄어드는 건 안 좋은 게 사실이지만 세심하게 조절하면 최종 결과물은 더 좋아질 수 있습니다. 1080p 비디오를 인코딩 전 720p 비디오로 축소한다면 화질을 더 높게 유지한 채로 크기를 훨씬 줄일 수 있습니다; 재생 할 때 스케일업 하더라도 필요한 파일 크기에 맞추어 품질을 조정한 채 전체 크기로 인코딩한 경우보다 화질이 좋습니다.

- -

프레임 레이트 감소

- -

비슷하게 전체 비디오에서 프레임을 제거하고 프레임 레이트를 감소시킬 수도 있습니다. 두 가지 장점이 있는데: 전체 비디오를 작게 만들고 움직임 보상 처리가 더 쉬워집니다. 예를 들어 2 픽셀이 차이나는 두 인터 프레임 간의 움직임 차이점을 계산하는 대신에, 프레임을 스킵하여 두 프레임 간 4 픽셀 차이점을 계산하도록 할 수 있습니다. 이러면 전체 카메라 이동을 더 적은 residual frame으로 표현할 수 있습니다.

- -

사람 눈의 움직이는 것처럼 인식되는 최소한의 프레임 레이트는 약 12입니다. 그보다 적으면 비디오가 아니라 연속된 정지 화상으로 보입니다. 영화 필름은 보통 초당 24 프레임이며 표준 화질 TV(SDTV)는 대략 30 fps(약간 적지만 비슷합니다, 29.97), 고화질 TV(HDTV)는 24-60fps입니다. 24fps이상이면 일반적으로 충분히 부드러워 보입니다;여러분의 필요에 따라 다르지만 30/60fps가 이상적인 목표치죠.

- -

결론적으로 어떤걸 희생할 지 정하는 것은 여러분의 디자인 팀에 달렸습니다.

- -

코덱 세부사항

- -

AV1

- -

AOMedia Video 1 (AV1) 코덱은 Alliance for Open Media 기관이 인터넷 비디오를 위해 개발한 오픈 포맷입니다. {{anch("VP9")}}, {{anch("HEVC", "H.265/HEVC")}} 보다 압축율이 높으며, AVC보다 50% 이상 압축율이 높습니다. AV1은 완전한 로열티 프리이며 {{HTMLElement("video")}} 엘리먼트와 WebRTC에서 사용하기 위해 설계하였습니다.

- -

AV1은 현재 세 프로파일을 제공하며:main, high, professional 다양한 색 깊이와 크로마 서브샘플링을 지원합니다. 또한 레벨 역시 정의하여 각 레벨은 비디오 속성의 범위를 제한하고 있습니다. 비디오 속성에는 프레임 면적, 픽셀간 이미지 영역, 출력 및 디코딩 속도, 평균/최대 비트 레이트, 인코딩/디코딩 시 사용하는 타일 개수와 항목 등이 있습니다.

- -

예를들어 AV1 level 2.0의 최대 프레임 크기는 가로 2048 세로 1152 픽셀이지만 프레임 당 최대 픽셀 개수는 147,456(<= 2048x1152 = 2,359,296)이므로 실제 2048x1152 크기의 프레임을 사용할 수는 없습니다. 하지만 인지해야 할 점은 적어도 파이어폭스와 크롬의 소프트웨어 디코더는 현 시점에서 사실상 레벨은 무시하고 주어진 설정에 맞추어 비디오를 디코딩하는데 최선을 다합니다. 하지만 향후 호한성을 위해 여러분은 선택한 레벨에 맞추어 유지해야 합니다.

- -

현시점의 AV1의 주요 문제점은 새로운 포맷이며 브라우저에 연동이 아직 진행중에 있다는 것입니다. 또한 인/디코더도 최적화해야 하며 하드웨어 인/디코더는 제품화되지 않아 아직 개발중입니다. 이러한 문제점들이 소프트웨어적으로 해결되기 전까지는 비디오 인코딩을 AV1 포맷으로 전환하는데 시간이 소요될 것입니다.

- -

위와 같은 이유로 당분간 최우선 비디오 코덱으로 AV1를 사용하기에는 이르지만 미래에는 반드시 선택을 고려해야 합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트비디오 레벨에 따라 다름;이론적으로 level 6.3에서 최대 800Mbps[2]
지원 프레임 레이트레벨에 따라 다름;예를 들어 level 2.0은 최대 30fps, level 6.3은 최대 120fps
압축손실 DCT 기반 알고리즘
지원 프레임 크기8 x 8 픽셀 에서 65,535 x 65535 픽셀 사이 값
지원 컬러 모드 - - - - - - - - - - - - - - - - - - - - - - - - - -
프로필색 깊이크로마 서브샘플링
Main8 or 104:0:0 (그레이스케일) or 4:2:0
High8 or 104:0:0 (그레이스케일), 4:2:0, or 4:4:4
Professional8, 10, or 124:0:0 (그레이스케일), 4:2:0, 4:2:2, or 4:4:4
-
HDR 지원예
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
AV1 지원707567No57No
-
지원 컨테이너ISOBMFF[1], MPEG-TS, MP4, WebM
{{Glossary("RTP")}} / WebRTC 호환성예
유지 보수 기관Alliance for Open Media
스펙https://aomediacodec.github.io/av1-spec/av1-spec.pdf
라이선스로열티 프리, 공개 포맷
- -

[1] {{interwiki("wikipedia", "ISO Base Media File Format")}}

- -

[2] See the AV1 specification's tables of levels, which describe the maximum resolutions and rates at each level.

- -

AVC (H.264)

- -

MPEG-4 스펙 집합 중 Advanced Video Coding (AVC) 표준은 ITU H.264 스펙 및 MPEG-4 Part 10 스펙과 동일한 것입니다. TV 방송, 영상회의, 블루레이 디스크 미디어를 포함한 모든 종류의 미디어에 사용되는 움직임 보상에 기반한 코덱이죠.

- -

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 크로마 서브샘플링을 지원합니다.

- -

AVC에 동일한 장면의 여러 시점을 지원하는 기능도 있습니다.(Multiview Video Coding), 이는 양안 영상 등을 가능하게끔 합니다.

- -

AVC는 유료 포맷이지만 무수한 특허들이 개입한 여러 단체에 소유권이 나뉘어져있습니다. 상용 목적일때는 AVC 미디어 라이선스가 필요하지만 인터넷 환경에서 최종 사용자에게 비디오가 무료로 스트리밍하는 경우에는 MPEG LA 특허권자가 라이선스를 요구하지 않습니다.

- -

웹이 아닌 환경에서 WebRTC를 구현한 브라우저(JavaScript API가 없는 제품이라도)는 WebRTC 콜을 위해 AVC를 지원해야합니다. 웹 브라우저는 꼭 그럴필요는 없지만 몇몇은 지원하고 있습니다.

- -

많은 플랫폼이 웹브라우저의 HTML 콘텐츠 형태로 AVC의 하드웨어 인코딩/디코딩을 지원하고 있습니다. 하지만 AVC를 프로젝트에서 사용하기 전에 라이선스 요구사항을 꼭 읽어보세요!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트레벨에 따라 다름
지원 프레임레이트레벨에 따라 다름; 300 fps까지 가능
압축손실 DCT 기반 알고리즘, 이미지안에 무손실 매크로 블록 생성 가능
지원 프레임 크기최대 8,192 x 4,320 픽셀
지원 컬러 모드 -

일반적이고 유효한 프로필:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
프로필색 깊이크로마 서브샘플링
Constrained Baseline (CBP)84:2:0
Baseline (BP)84:2:0
Extended (XP)84:2:0
Main (MP)84:2:0
High (HiP)84:0:0 (그레이스케일) and 4:2:0
Progressive High (ProHiP)84:0:0 (그레이스케일) and 4:2:0
High 10 (Hi10P)8 to 104:0:0 (그레이스케일) and 4:2:0
High 4:2:2 (Hi422P)8 to 104:0:0 (그레이스케일), 4:2:0, and 4:2:2
High 4:4:4 Predictive8 to 144:0:0 (그레이스케일), 4:2:0, 4:2:2, and 4:4:4
-
HDR 지원예; {{interwiki("wikipedia", "Hybrid Log-Gamma")}} 또는 Advanced HDR/SL-HDR; 모두  ATSC의 파트
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
AVC/H.265 지원41235[1]9253.2
-
지원 컨테이너3GP, MP4, WebM
{{Glossary("RTP")}} / WebRTC 호환예
유지 보수 기관MPEG / ITU
스펙https://mpeg.chiariglione.org/standards/mpeg-4/advanced-video-coding
- https://www.itu.int/rec/T-REC-H.264
라이선스상용 특허 다수. 상용 사용 시 라이선스 필요. 여러 특허 풀에 영향 가능
- -

[1] 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.

- -

H.263

- -

ITU의 H.263 코덱은 저대역폭 환경에서 쓰기 위해 설계하였습니다. 특히 PSTN (Public Switched Telephone Networks), {{Glossary("RTSP")}}, SIP (IP-based videoconferencing) 시스템에서의 영상 회의에 초점을 맞추었습니다. 저대역폭 네트워크 환경에 최적화되었음에도 CPU에 영향이 크며 저사양 컴퓨터에서 원할하게 동작하지 않습니다. 데이터 포맷은 MPEG-4 Part2와 유사합니다.

- -

H.263은 웹에서 널리 쓰인 적이 없습니다. H.263의 변형 포맷이 Flash 비디오나 Sorenson 코덱 같은 상용 소프트웨어에서 사용된 적은 있습니다.  하지만 주요 브라우저 중 H.263를 기본으로 지원하는 제품은 없습니다. 특정 플러그인이 H.263을 지원하고는 있습니다.

- -

대부분의 코덱과 다르게 H.263은 인코딩 된 비디오의 프레임별 최대 비트레이트(BPPmaxKb)의 기본값을 정의하고 있습니다. 인코딩시에 BPPmaxKb값을 지정하면 각 프레임은 해당 수치를 넘어설 수 없습니다. 최종 프레임은 이 값과 프레임 레이트, 압축, 선택한 해상도와 블록 포맷에 따라 결정됩니다.

- -

H.263은 H.264로 대체되었으며 가능한한 이전의 미디어 포맷은 사용하지 않아야 합니다. H.263이 최선일 정도로 오래된 장치를 지원해야 하는 프로젝트일 경우에만 H.263을 지원할테죠.

- -

H.263는 Telenor, Fujitsu, Motorola, Samsung, Hitachi, Polycom, Qualcomm 등 수 많은 기관들이 소유하고 있는 특허에 기반한 상용 포맷입니다. H.263을 사용하려면 필요한 라이선스를 반드시 취득해야합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트무제한, 단 보통 64kbps 미만
지원 프레임 레이트자유
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 1408 x 1152 픽셀[2]
지원 컬러 모드YCbCr; 각 픽쳐 포맷 (sub-QCIF, QCIF, CIF, 4CIF, or 16CIF)은 프레임 크기를 픽셀 및 휘도와 색차 샘플의 라인수로 정의하고 있음
HDR 지원아니오
가변 비트레이트 (VFR) 지원아니오
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
H.263 supportNoNoNo[1]NoNoNo
-
컨테이너 지원3GP, MP4, QuickTime
{{Glossary("RTP")}} / WebRTC 호환아니오
유지 보수 기관ITU
스펙https://www.itu.int/rec/T-REC-H.263/
라이선스상용;적절한 라이선스가 필요함. 특허 풀이 여러 곳일 수 있음.
- -

[1] 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.

- -

[2] Version 1 of H.263 specifies a set of picture sizes which are supported. Later versions may support additional resolutions.

- -

HEVC (H.265)

- -

High Efficiency Video Coding (HVEC) 코덱은 ITU의 H.265 및 MPEG-H Part 2 (MPEG-4 후속 작업으로 개발 진행 중). HEVC는 현대 프로세서의 특정점을 십분 활용하여 소프트웨어가 (8K 비디오를 포함한) 초고해상도 비디오 인코딩/디코딩을 효율적으로 할 수 있도록 설계하였습니다. 이론적으로 HEVC는 {{anch("AVC")}}와 유사한 품질을 유지하면서 절반 크기로 압축할 수 있습니다.

- -

예를들어 각 코딩 트리 유닛(CTU, 이전 세대 코덱의 매크로블록과 유사) 샘플의 휘도 값 트리와 색차 값 트리, 필요한 문법 요소로 구성되어 있습니다. 이는 멀티 코어 환경을 쉽게 활용할 수 있게 합니다.

- -

메인 프로파일이 컴포넌트당 8비트 컬러와 4:2:0 크로마 서브샘플링을 지원하는 점은 흥미로운 부분입니다. 또한 4:4:4 비디오는 특별 취급합니다. 휘도 샘플(이미지 픽셀을 그레이스케일로 표현)과 Cb Cr 샘플(회색을 색상으로 어떻게 변경할지 표시)을 가지는 대신, 세 채널은 3개의 모노크롬 이미지로 취급하며 렌더링시에 풀컬러 이미지를 만들어 내도록 결합합니다.

- -

HEVC는 상용 포맷이며 여러 특허로 보호받고 있습니다. MPEG LA하에 라이선스가 관리되고 있으며; 컨텐츠 제작자나 제공자가 아닌 개발자에 청구됩니다. 여러분의 앱/웹사이트에서 HEVC 사용 여부를 결정하기 전에 최신 라이선스와 요구 사항을 점검하는 걸 잊지마세요!

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트최대 800,000 Kbps
지원 프레임 레이트레벨마다 다름; 최대 300 FPS 가능
압축손실 DCT 기반 알고리즘
지원 프레임 크기128 x 96 에서 8,192 x 4,320 픽셀; 프로파일과 레벨마다 다름
지원 컬러 모드 -

아래 표는 주요 프로파일에 한해서입니다. 여기에 포함하지 않는 프로파일도 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
프로파일색 깊이크로마 서브샘플링
Main84:2:0
Main 108 to 104:2:0
Main 128 to 124:0:0 and 4:2:0
Main 4:2:2 108 to 104:0:0, 4:2:0, and 4:2:2
Main 4:2:2 128 to 124:0:0, 4:2:0, and 4:2:2
Main 4:4:484:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 108 to 104:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 128 to 124:0:0, 4:2:0, 4:2:2, and 4:4:4
Main 4:4:4 16 Intra8 to 164:0:0, 4:2:0, 4:2:2, and 4:4:4
-
HDR 지원예
가변 프레임 레이트 (VFR) 지원예
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
HEVC / H.265 supportNo18[1]No[2]11[1]No11
-
지원 컨테이너MP4
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관ITU / MPEG
스펙http://www.itu.int/rec/T-REC-H.265
- https://www.iso.org/standard/69668.html
라이선스상용;라이선스 요구사항에서 컴플라이언스 확인 다수의 특허 풀이 적용될 수 있음에 유의
- -

[1] Internet Explorer and Edge only supports HEVC on devices with a hardware codec.

- -

[2] Mozilla will not support HEVC while it is encumbered by patents.

- -

MP4V-ES

- -

MPEG-4 Video Elemental Stream (MP4V-ES) 포맷은 MPEG-4 Part 2 시각 표준 중 하나입니다. 일반적으로 MPEG-4 part 2 비디오는 더 이상 사용하지 않는데 다른 코덱에 비해 특장점이 없어 모바일에서도 쓰임새가 없습니다.  MP4V 는 MPEG-4 컨테이너의 H.263 인코딩과 본질적으로 동일합니다.

- -

원래 목적은 {{Glossary("RTP")}} 세션에서 MPEG-4 오디오 및 비디오 스트림을 사용하기 위해서였습니다. 하지만 3GP를 통한 모바일 통신에서도 쓰이고 있습니다.

- -

지원하는 주요 브라우저가 없으며 사실상 폐기된 포맷이라 왠만하면 사용할 일이 없을겁니다. 이 컨테이너 파일의 확장자는.mp4v지만 .mp4로 잘못 표기된 경우도 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트5 Kbps 에서 1 Gbps 이상
지원 프레임 레이트명시적 제한 없음; 데이터 전송율에 의해 제한
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 4,096 x 4,096 픽셀
지원 컬러 모드YCrCb 크로마 서브샘플링(4:2:0, 4:2:2, and 4:4:4); 컴포넌트당 12bits 색 깊이
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원Yes
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MP4V-ES supportNo[2]NoYes[1]NoNoNo
-
지원 컨테이너3GP, MP4
{{Glossary("RTP")}} / WebRTC 호환아니오
Supporting/Maintaining 유지/보수 기관MPEG
스펙{{RFC(6416)}}
라이선스상용; MPEG LA and/or AT&T에서 필수 라이선스 취득 필요
- -

[1] Firefox supports MP4V-ES in 3GP containers only.

- -

[2] Chrome does not support MP4V-ES; however, Chrome OS does.

- -

MPEG-1 Part 2 Video

- -

MPEG-1 Part 2 Video는 1990년대 초에 베일을 벗었습니다. 이후 MPEG 비디오 표준과는 다르게 MPEG-1은 {{Glossary("ITU", "ITU's")}}의 개입 없이 순수히 MPEG가 만들었습니다.

- -

모든 MPEG-2 디코더는 MPEG-1 비디오를 재생할 수 있기 때문에 다양한 소프트웨어와 하드웨어 장치에서 호환 가능합니다. MPEG-1 비디오 특허는 모두 만료되었으며, 라이선스에 대한 걱정에서 자유롭습니다. 하지만 소수의 브라우저만이 플러그인 없이 MPEG-1을 지원하며 플러그인은 deprecated된 경우가 많으므로 일반적으로는 더 이상 사용할 수 없습니다. 때문에 웹사이트/어플리케이션에서 MPEG-1는 좋은 선택이 아닙니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트최대 1.5 Mbps
지원 프레임 레이트23.976 FPS, 24 FPS, 25 FPS, 29.97 FPS, 30 FPS, 50 FPS, 59.94 FPS, 60 FPS
압축손실 DCT 기반 알고리즘
지원 프레임 크기최대 4,095 x 4,095 픽셀
지원 컬러 모드Y'CbCr 4:2:0 크로마 서브샘플링 with up to 12 bits per component
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원아니오
브라우저 호환 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MPEG-1 supportNoNoNoNoNoYes
-
지원 컨테이너MPEG
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관MPEG
스펙https://www.iso.org/standard/22411.html
라이선스Proprietary; however, all patents have expired, so MPEG-1 may be used freely
- -

MPEG-2 Part 2 Video

- -

MPEG-2 Part 2 {{Glossary("ITU")}}가 설계한 H.262를 참조하여 MPEG-2 스펙에서 정의한 비디오 포맷이며입니다. MPEg-1 비디오와 매우 유사하며 사실 MPEG-2 플레이어는 높은 비트레이트 및 특수 인코딩 옵션 지원을 위한 확장 스펙이 아닌 한 특별한 작업 없이 MPEG-1 비디오를 재생할 수 있습니다.

- -

MPEG-2의 목적은 표준 TV로 압축하는 것이므로 인터레이스 비디오도 지원합니다. 표준 비디오 결과물의 압축 비율과 품질은 DVD 비디오 미디어의 요구사항도 충족하여 메인 비디오 코덱으로 MPEG-2가 선정되기에 충분하였습니다.

- -

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 비트레이트로 지원합니다.

- -

그러나 소수의 브라우저만 MPEG-2를 네이티브로 지원하며 플러그인은 대부분 deprecated 되어 더 이상 사용 가능하지 않습니다. 때문에 웹 사이트나 웹앱에서 MPEG-2는 좋은 선택이 아닙니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트최대 100 Mbps; 레벨과 프로파일에 따라 다름
지원 프레임 레이트 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
축약어레벨 이름지원 프레임 레이트
LLLow Level23.9, 24, 25, 29.97, 30
MLMain Level23.976, 24, 25, 29.97, 30
H-14High 144023.976, 24, 26, 29.97, 30, 50, 59.94, 60
HLHigh Level23.976, 24, 26, 29.97, 30, 50, 59.94, 60
-
압축손실 DCT 기반 알고리즘
지원 프레임 크기 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
축약어레벨 이름최대 프레임 크기
LLLow Level352 x 288 pixels
MLMain Level720 x 576 pixels
H-14High 14401440 x 1152 pixels
HLHigh Level1920 x 1152 pixels
-
지원 컬러 모드대다수 프로파일에서 Y'CbCr 4:2:0 크로마 서브샘플링; "High", "4:2:2" 프로파일에서 4:2:2 크로마 서브샘플링 지원.
HDR 지원아니오
가변 프레임 레이트(VFR) 지원아니오
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
MPEG-2 supportNoNoNoNoNoYes
-
지원 컨테이너MPEG, MPEG-TS (MPEG Transport Stream), MP4, QuickTime
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관MPEG / ITU
스펙https://www.itu.int/rec/T-REC-H.262
- https://www.iso.org/standard/61152.html
라이선스상용; 2019년 4월 1일자로 말레이지아와 필리핀을 제외한 모든 지역에서 모든 특허 만료됨, 두 국가 외에서는 자유롭게 사용 가능. MPEG LA에 의해 특허 관리
- -

Theora

- -

Xiph.org가 {{interwiki("wikipedia", "Theora")}}는 로열티와 라이선스 없이 사용 가능한 오픈소스 자유 비디오 코덱입니다. Theora의 품질과 압축율은 MPEG-4 Part 2 Visual과 AVC에 견줄만하며, 비디오 인코딩 시 반드시 최고를 고수해야 하는 경우가 아니라면 매우 좋은 선택이 될 수 있습니다. 하지만 라이선스-프리로 특허 문제가 없으며 상대적으로 저사양 CPU에서도 충분히 돌아가는 스펙 덕분에 최근 많은 소프트웨어와 웹프로젝트에서 선택하고 있습니다. 현재로써는 Theroa를 위한 하드웨어 디코더가 없기 때문에 저사양 CPU에서도 원할하다는 점은 아주 중요합니다.

- -

Theora는 원래 On2 Technologies의 VC3 코덱을 베이스로 하고 있습니다. VC3 코덱과 사양은 Xiph.org 관리 하에 LGPL 라이선스로 등재되어 있으며 이후 Theora 표준으로 인입하였습니다.

- -

Theora의 단점 중 하나는 오직 8 bit 컬러 모드만을 지원하여 컬러 밴딩을 피하기 위해 10 이상의 컬러 모드를 선택하는 옵션이 없다는 겁니다. 따지자면 현 시점에서 8 bit 컬러가 대부분이기 때문에 큰 문제는 되지 않습니다. 단지 불편할 뿐이죠. 또 Theora는 Ogg 컨테이너에서만 사용할 수 있습니다. 가장 큰 문제는 Safari에서 사용할 수 없다는 것입니다. macOs 뿐만 아니라 수억대의 iPhone과 iPad에서도 사용할 수 없다는 걸 의미합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트최대 2 Gbps
지원 프레임 레이트임의의 0 이상 값 지원. 유리수 프레임 레이트를 지원하기 위해 32-bit 분자와 분모로 구성되어 있음
압축손실 DCT-기반 알고리즘
지원 프레임 크기최대 1,048,560 x 1,048,560 픽셀 이하 어떠한 가로, 세로 조합이라도 가능
지원 컬러 모드Y'CbCr 4:2:0, 4:2:2, 4:4:4 크로마 서브샘플링, 8 bit 컬러
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원예[1]
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
Theora support3Yes[2]3.5No10.5No
-
지원 컨테이너Ogg
{{Glossary("RTP")}} / WebRTC 호환아니오
유지/보수 기관Xiph.org
스펙https://www.theora.org/doc/
라이선스오픈 프리-로열티
- -

[1] 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.

- -

[2] Edge supports Theora with the optional Web Media Extensions add-on.

- -

VP8

- -

Video Processor 8 (VP8) 코덱은 최초 On2 Technologies가 개발했습니다. Google은 On2 인수 후, VP8 관련된 특허와 무관하게 완전한 오픈 로열티-프리 라이선스로 출시했습니다. 압축률과 품질의 면에서 VP8은 {{anch("AVC")}}에 견줄만 합니다.

- -

브라우저가 지원한다면 V8에서 알파 채널을 쓸 수 있으며 비디오 뒤의 백그라운드 이미지를 알파 채널 픽셀과 겹쳐 볼 수도 있습니다.

- -

HTML 콘텐츠로써 특히 WebM 파일에 포함된 VP8을 지원하는 좋은 브라우저가 많습니다. 이는 VP8이 여러분의 콘텐츠로 좋은 선택이 될 수 있으며 가능하다면 더 좋은 VP9를 선택할 수도 있습니다. 웹브라우저는 WebRTC를 위해 VP8을 반드시 지원해야 합니다. 하지만 HTML Audio video 엘리먼츠에는 꼭 VP8을 지원할 필요는 없습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트level별 제한이 없는 한 무제한 임의의 값
지원 프레임 레이트임의 값
압축손실 DCT-기반 일고리즘
지원 프레임 크기최대 16,384 x 16,384 픽셀
지원 컬러 모드Y'CbCr 4:2:0 크로마 서브샘플링, 8 bit 색 깊이
HDR 지원아니오
가변 프레임 레이트 (VFR) 지원예
지원 브라우저 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
VP8 support2514[1]491612.1[2]
-
지원 컨테이너3GP, Ogg, WebM
{{Glossary("RTP")}} / WebRTC 호환예; VP8은 WebRTC의 필수 코덱 중 하나
유지/보수 기관Google
스펙{{RFC(6386)}}
라이선스라이선스 및 로열티로부터 자유로운 오픈 소스
- -

[1] Edge support for VP8 requires the use of Media Source Extensions.

- -

[2] Safari only supports VP8 in WebRTC connections.

- -

VP9

- -

Video Processor 9 (VP9)는 구글이 VP8 표준의 후속으로 개발하였습니다. VP8과 마찬가지로 VP9는 완전한 로열티-프리 오픈 소스입니다. 인코딩/디코딩 퍼포먼스는 AVC에 비해 더 높은 품질을 유지하면서도 약간 더 빠릅니다. VP9로 인코딩한 비디오의 품질은 비슷한 수준의 비트레이트에서 HEVC에 견줄만합니다.

- -

VP9의 main profile은 4:2:0 크로마 서브 샘플링에서 8-bit 색 깊이 모드만을 지원합니다. 하지만 더 깊은 색상 모드와 전체 범위의 크로마 서브샘플링을 지원하는 프로파일도 가지고 있습니다. HDR 기능도 있으며 프레임 레이트, 영상 비율, 프레임 사이즈를 자유롭게 선택할 수 있는 오셥도 제공합니다.

- -

VP9는 광범위한 브라우저가 지원하고 있으며 하드웨어 구현체로 상당히 퍼져있습니다. VP9는 WebM에서만 사용할 수 있는 두 코덱 중 하나입니다(나머지 하나는 {{anch("VP8")}}). 하지만 Safari는 WebM 및 VP9 모두 지원하지 않으므로 VP9를 사용할 경우 iPhone, iPad, Mac에서 AVC나 HEVCS등 다른 포맷을 대체할 수 있도록 만들어야 합니다.

- -

Safari 지원이 빠져있지만 WebM 컨테이너를 쓸 수 있고 Safari 사용자에게 AVC/HEVC 대체 포맷 제공이 가능하다면 VP9은 좋은 선택입니다. 상용 코덱 대신에 오픈 코덱을 쓰기로 결정했다면 더할 나위 없죠. 호환 포맷을 제공할 수 없지만 Safari 사용자도 잃을 수 없다면 WebM에 VP9는 차선책이 좋을 겁니다. 아니라면 다른 코덱을 고려해 보셔야겠죠.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
지원 비트레이트level 제한이 없는 한 무제한 임의의 값
지원 프레임 레이트임의 값
압축손실 DCT-기반 알고리즘
지원 프레임 크기최대 65,536 x 65,536 픽셀
지원 컬러 모드 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Profile색 깊이크로마 서브샘플링
Profile 084:2:0
Profile 184:2:0, 4:2:2, and 4:4:4
Profile 210 to 124:2:0
Profile 310 to 124:2:0, 4:2:2, and f:4:4
- -

지원 색 공간: {{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")}}.

-
HDR 지원예; HDR10+, HLG, PQ
가변 프레임 레이트 (VFR) 지원Yes
브라우저 호환성 - - - - - - - - - - - - - - - - - - - - - -
기능ChromeEdgeFirefoxInternet ExplorerOperaSafari
VP9 지원291428No10.6No
-
지원 컨테이너MP4, Ogg, WebM
{{Glossary("RTP")}} / WebRTC 호환예
유지/보수 기관Google
스펙https://www.webmproject.org/vp9/
라이선스라이선스 및 로열티-프리 오픈 소스requirements
- -

코덱 선택하기

- -

어떤 코덱을 사용할지는 스스로 꼬리에 꼬리를 무는 질문을 던진 끝에 답을 얻을 수 있습니다.:

- -
    -
  • 오픈 포맷을 사용할건가요? 상용 코덱도 염두에 두고 있나요?
    • -
  • 한 비디오를 여러 포맷으로 생산할 여력이 되나요? fallback 옵션을 제공할 수 있다면 의사 결정 과정을 단순화 할 수 있습니다.
    • -
  • 호환성을 포기할 수 있는 브라우저가 있나요?
    • -
  • 보장하는 커버리지 상 가장 오래된 브라우저는 어떤 것인가요? 예를 들어 지난 5년간 출시된 모든 브라우저를 지원할지, 1년 사이의 브라우저만을 지원할지?
    • -
- -

아래 섹션에서는 특정 유즈케이스에서 추천할만한 코덱을 명시합니다. 각 유즈케이스마다 최대 두 개의 추천 코덱을 볼 수 있습니다. 특정 유즈케이스에 베스트인 코덱이 상용이거나 로열티 지불이 필요하다면 생각해 볼 두 가지 옵션이 있습니다: 로열티 프리 오픈 코덱을 선택하거나, 상용 라이선스를 따르거나.

- -

각 비디오당 하나의 포맷만 제공할 수 있다면 필요한 요구사항을 최대한 만족하는 최적의 포맷을 선택해야 합니다. 첫 번째 추천 코덱은 품질과 퍼포먼스, 호환성을 최대한 고려한 것이며 두번째는 품질과 퀄리티, 크기를 조금 희생하더라도 최대한의 호환성을 가지는 옵션입니다.

- -

Recommendations for everyday videos

- -

우선 블로그나 정보형 사이트, 소규모 기업 웹사이트 등 상품을 설명하기 위한 비디오(비디오 자체가 상품은 아닌)를 위한 옵션을 알아봅시다.

- -
    -
  1. -

    WebM 컨테이너에 비디오는 {{anch("VP8")}}, 오디오는 Opus 코덱을 사용합니다. 이들은 로열티-프리 오픈 포맷이지만 최근 브라우저에서만 폭넓게 지원하는 경향이 있어 폴백 지원이 필수적입니다.

    - - 
    <video controls src="filename.webm"></video>
-
    -
    2. -
  2. -

    MP4 컨테이너에 비디오 코덱은 {{anch("AVC")}} (H.264) 오디오 코덱은 AAC 를 사용합니다. MP4 컨테이너에 AVC, AAC 조합은 모든 주요 브라우저에서 폭넓게 지원하는 조합이며 대부분의 유즈케이스에서 좋은 품질을 보여주기 때문입니다. 하지만 라이선스 요구사항에 대해 컴플라이언스 이슈는 없는 지 확인이 필요하죠.

    - - 
    <video controls>
-  <source type="video/webm"
-          src="filename.webm">
-  <source type="video/mp4"
-          src="filename.mp4">
-</video>
-
    -
    3. -
- -
-

Note: {{HTMLElement("<video>")}} 엘리먼트는 자식으로 {{HTMLElement("source")}} 엘리먼트 유무에 상관 없이 </video> 닫기 태그가 필요하다는 것을 잊지 마세요.

-
- -

고품질 비디오 제공을 위한 추천

- -

여러분의 목표가 최대한 높은 품질의 비디오를 재생하는 것이라면 가능한한 다양한 포맷으로 제공할 수 있는 방법을 모색해야합니다. 최신의 코덱일수록 고품질 비디오를 지원하지만 반대로 브라우저 호환성은 떨어집니다.

- -
    -
  1. -

    WebM 컨테이너에 비디오 코덱은 AV1, 오디오 코덱은 Opus. AV1 인코딩 시 6.3 High level 같은 높은 전문 프로파일을 사용할 수 있다면 훌륭한 품질의 비디오를 4K/8K 해상도로 제공할 수 있습니다. 오디오 인코딩 시 Opus Fullband 프로파일로 48 kHz 샘플링 레이트를 사용한다면 사람이 들을 수 있는 거의 모든 주파수를 캡쳐할 수 있죠.

    - - 
    <video controls src="filename.webm"></video>
-
    -
    2. -
  2. -

    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을 사용합니다.

    - - 
    <video controls>
-  <source type="video/webm"
-          src="filename.webm">
-  <source type="video/mp4"
-          src="filename.mp4">
-</video>
-
    -
    3. -
- -

비디오 보존, 편집, 믹싱을 위한 추천

- -

웹 브라우저에서 사용 가능한 무손실-아니면 거의 무손실-비디오 코덱은 현재 없습니다. 이유는 간단한데:비디오는 거대합니다. 무손실 압축은 손실 압축에 비해 비효율적입니다. 예를 들어 4:2:0 크로마 서브샘플링의 무압축 1080p 비디오(1920*1080 픽셀)는 최소 비트레이트가 1.5Gbps가 넘죠. FFV1(브라우저 미지원) 같은 무손실 압축 코덱을 사용하면 콘텐츠에 따라 다르지만 600 Mbps 근처로 줄일 수 있습니다. 하지만 네트워크로 보내이겐 여전히 엄청난 크기이며 현실적으로 불가능한 사이즈입니다.

- -

손실 코덱이 무손실 모드를 가지고 있다 하여도 별 반 다르지 않는데;현재 웹 브라우저에서 무손실 모드를 구현하고 있지 않기 때문입니다. 최선은 손실 압축을 사용하는 코덱 중 최대한 고품질 코덱을 선택한 뒤 최소한의 압축만 수행하도록 설정하는 것입니다. 한가지 방법은 코덱을 설정하기를 "fast" 압축을 선택하는 것입니다. 일반적으로 이는 압축을 최소화합니다.

- -

외부에 비디오 보존

- -

여러분의 웹 사이트나 앱 외부 영역에 보존 목적의 비디오라면 무압축 원본 비디오 데이터를 압축하는 유틸리티를 사용하세요. 예를들어 x264 유틸리티는 매우 높은 비트레이트로 {{anch("AVC")}} 인코딩을 할 수 있습니다:

- -
x264 --crf 18 -preset ultrafast --output outfilename.mp4 infile
- -

다른 코덱들도 충분한 여유가 있다면 더 나은 최고-품질 압축을 보여줄지도 모릅니다, 단지 그 인코더들은 엄청 느려서 위 압축으로 얻어지는 거의 무손실 비디오가 전체적으로 비슷한 품질을 보여주면서도 상당히 빠를겁니다.

- -

비디오 녹화

- -

무손실에 가까운 비디오를 보여줘야 한다는 제약이 있다면, {{anch("AVC")}} 또는 {{anch("AV1")}}를 고려해 볼 필요가 있습니다. 예를들어 비디오를 녹화하기 위해 MediaStream Recording API를 사용한다면, {{domxref("MediaRecorder")}} 객체를 생성하는 코드는 아래와 같습니다:

- -
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);
- -

위 예제에서 MediaRecorder를 생성하여 BT.2100 HDR, 12-bit color 4:4:4 크로마 서브샘플링 설정으로 {{anch("AV1")}} 비디오 레코딩을, FLAC으로 무손실 오디오를 레코딩 하고 있습니다. 결과물 파일은 비디오 오디오 트랙 합쳐 800Mbps를 넘지 않을 겁니다. 하드웨어 성능이나 요구사항, 사용하고자 하는 코덱에 따라 설정 값을 변경할 수 있습니다. 위의 비트 레이트 값은 네트워크 실사용 케이스에선 비현실적인 값이며 로컬 장치에서만 가능하겠죠.

- -

codecs 파라미터 값을 '.' 기준으로 나눠서 의미를 분석해 봅시다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
값설명
av014문자 코드 (4CC-4 Character Code) {{anch("AV1")}} 코덱을 의미합니다.
2프로파일. 2는 Professional profile. 1은 High profile, 0은 Main profile.
19H레벨과 티어. AV 스펙의 A.3의 표에서 설명, Level 6.3의 High tier를 의미합니다
12색 깊이. 컴포넌트당 12bit를 의미. 8, 10도 가능하나 AV1에서 표현할 수 있는 가장 정확한 색 깊이 값이 12입니다.
0모노크롬 모드 플래그. 1로 지정하면 색차 성분은 녹화되지 않으며 휘도 성분만 축적되어 그레이스케일 이미ㅣ지로 표현됩니다. 색상을 사용할 것이므로 0으로 지정하였습니다.
000크로마 서브샘플링 모드. AV1 스펙의 section 6.4.2에 설명. 모노크롬 모드 값이 0일 때 000 값은 4:4:4 크로마 서브샘플링 또는 색상 손실이 없어야 함을 나태냅니다.
09사용할 색 공간. AV1 스펙의 section 6.4.2에서 설명 9는 HDR을 위한 BT.2020 색역을 의미합니다.
16전송시 사용할 색 공간. 마찬가지로 section 6.4.2에서 설명; 16은 BT.2100 PQ 컬러로 전송하겠다는 의미입니다.
09section 6.4.2 에서 설명하는 계수 행렬. 9 값은 유동 휘도 값의 BT.2020 색역을 사용하겠다는 의미입니다. BT.2010 YbCbCr와 동일한 의미입니다.
1"full range" 비디오 플래그. 1은 전체 컬러 영역을 녹화하겠다는 의미입니다.
- -

선택하고자 하는 코덱 문서에 codecs 파라미터 값이 받아들이는 설정이 설명되어 있습니다.

- -

더 보기

- - diff --git "a/files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" "b/files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" deleted file mode 100644 index d4e45c294a..0000000000 --- "a/files/ko/web/media/formats/\354\273\250\355\205\214\354\235\264\353\204\210/index.html" +++ /dev/null @@ -1,1279 +0,0 @@ ---- -title: 미디어 컨테이너 포맷 (파일 타입) -slug: Web/Media/Formats/컨테이너 -translation_of: Web/Media/Formats/Containers ---- -

오디오와 비디오 파일 포맷은 두 파트에서 정의할 수 있습니다.(오디오 비디오가 한 파일에 있으면 물론 3 파트지요): 오디오/비디오 코덱와 미디어 컨테이너 포맷(도는 파일 타입)입니다. 이 가이드 문서는 웹에서 널리 쓰이는 컨테이너 포맷에 대해 알아보고 기본적인 스펙와 장단점 그리고 적절한 사용법을 설명하고 있습니다.

- -

WebRTC 는 컨테이너를 사용하지 않습니다. 대신에 각 트랙을 나타내는{{domxref("MediaStreamTrack")}} 객체를 통해 인코딩 된 오디오/비디오 트랙을 한 곳에서 다른 곳으로 직접 스트리밍합니다. WebRTC에서 일반적으로 사용하는 코덱이나 브라우저 호환성을 알아보려면 Codecs used by WebRTC 문서를 참고하세요.

- -

일반적인 컨테이너 포맷

- -

미디어 컨테이너 포맷에는 여러 종류가 있지만 여러분들은 보통 아래 나열된 목록의 포맷을 주로 만나게 될 겁니다. 일부는 오디오만 지원하는 것도 있고 오디오와 비디오 모두를 지원하는 포맷도 있죠. MIME 타입과 확장자도 나열되어 있습니다. 웹상에서 가장 많이 쓰이는 컨테이너 포맷은 아마도 MPEG-4 (MP4), Quicktime Movie (MOV), Wavefile Audio File Format (WAV)일겁니다. 또한 MP3, Ogg, WebM, AVI 등의 포맷도 볼 수 있지요. 하지만 모든 브라우저가 이 다양한 포맷들을 지원하는 것은 아닙니다. 사용하기 편하고 다른 조합과의 구분을 위해 특정한 컨테이너와 코덱의 조합은 독자적인 MIME type과 확장자를 가지기도 합니다. 예를들어 Opus 오디오 트랙만을 가진 Ogg파일은 가끔 Opus 파일이라 불리며 .opus 확장자를 가지는 경우도 있습니다. 하지만 실제로는 단순한 Ogg 파일일 뿐이죠.

- -

반대 케이스로 특정 코덱이 특정 컨테이너에 담긴 형태가 매우 보편적일 경우 독자적인 형식으로 취급하는 경우도 있습니다. MP3 오디오 파일이 대표적인 경우로, MPEG-1 컨테이너에 MPEG-1 Audio Layer III 코덱으로 인코딩 된 오디오 트랙 하나만이 담긴 케이스입니다. 컨테이너는 일반적인 MPEG지만 이 형식은 audio/mp3 MIME 타입과 .mp3 확장자를 사용합니다.

- -

컨테이너 포맷(파일 타입) 인덱스

- -

특정 컨테이너 포맷에 대해 더 알아보려면 아래 목록에서 찾아 클릭하세요. 컨테이너 사용법과 지원하는 코덱, 지원하는 브라우저 등을 알 수 있습니다.

- -
-
    -
  • {{anch("3GP")}}
    • -
  • {{anch("ADTS")}}
    • -
  • {{anch("FLAC")}}
    • -
  • {{anch("MPEG", "MPEG / MPEG-2")}}
    • -
  • {{anch("MP4", "MPEG-4 (MP4)")}}
    • -
  • {{anch("Ogg")}}
    • -
  • {{anch("QuickTime")}}
    • -
  • {{anch("WAVE")}}
    • -
  • {{anch("WebM")}}
    • -
-
- -

3GP

- -

3GP 또는 3GPP 컨테이너는 셀룰러 네트워크를 통해 전송하고 모바일 장치에서 사용하기 위해 고안되었습니다. 원래 3G 모바일 폰을 위해 디자인하였지만 현대의 모바일 폰과 네트워크에서도 사용하고 있습니다. 하지만 네트워크 처리량이 늘어나면서 3GP 포맷의 필요성은 점차 줄어들고 있죠. 그러나 여전히 느린 네트워크나 저사양 폰에서는 유용한 컨테이너이기도 합니다.

- -

이 컨테이너는 ISO Base Media File Format과 MPEG-4 기반이지만 저대역폭 케이스에 최적화되어 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - -
Base 3GP media MIME types
AudioVideo
audio/3gppvideo/3gpp
audio/3gpp2video/3gpp2
audio/3gp2video/3gp2
- -

위는 3GP 컨테이너의 기본 MIME 타입입니다; 사용하는 코덱에 따라 다른 타입을 사용할 수도 있습니다; 또한 MIME 타입 문자열에 codecs 파라미터를 추가하여 어떠한 오디오/비디오 코덱을 사용했는지 표시할 수 있으며 profile, level, 코덱 설정 값도 추가하여 전달할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
3GP가 지원하는 비디오 코덱.
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)Yes1,2
H.263Yes1
MPEG-4 Part 2 (MP4v-es)Yes1
VP8Yes1
- -

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

- -

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
3GP가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AMR-NBYes1
AMR-WBYes1
AMR-WB+Yes1
AAC-LCYes1,2
HE-AAC v1Yes1,2
HE-AAC v2Yes1,2
MP3Yes1
- -

[1] FIrefox only supports 3GP on OpenMAX-based devices, which currently means the Boot to Gecko (B2G) platform.

- -

[2] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

- -

ADTS

- -

Audio Data Transport Stream (ADTS) 는 인터넷 라디오 같은 오디오 스트림을 사용하기 위해 MPEG-4 Part 3로 규정된 컨테이너 포맷입니다. 근본적으로 ACC 오디오 데이터에서 스트림만 깐 것과 거의 동일하며 최소한의 헤더만 담긴 ADTS 프레임으로 구성되어 있습니다.

- - - - - - - - - - - - - - - - -
ADTS media MIME types
Audio
audio/aac[1]
audio/mpeg[1]
- -

[1] The MIME type used for ADTS depends on what kind of audio frames are contained within. If ADTS frames are used, the audio/aac 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 audio/mpeg.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ADTS가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACYes1
MP3Yes
- -

[1] Firefox support for AAC relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

- -

FLAC

- -

Free Lossless Audio Codec (FLAC)은 무손실 오디오 코덱입니다; 이 코덱을 담을 수 있는 컨테이너 역시 FLAC이라 부릅니다. 이 포맷은 어느 특허에도 묶여있지 않아 자유롭게 사용할 수 있습니다. FLAC 파일은 FLAC 오디오 데이터만 담을 수 있습니다.

- - - - - - - - - - - - - -
FLAC media MIME type
Audio
audio/flac
- - - - - - - - - - - - - - - - - - - - - - - - -
FLAC이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
FLACYes
- -

MPEG/MPEG-2

- -

{{interwiki("wikipedia", "MPEG-1")}}과 {{interwiki("wikipedia", "MPEG-2")}}은 근본적으로 동일합니다. the Moving Picture Experts Group (MPEG)에서 만들었으며 DVD 등의 물리적 매체에서 널리 쓰이고 있습니다.

- -

인터넷에서 아마 가장 많이 사용되는 MPEG 파일 포맷은 {{interwiki("wikipedia", "MPEG-1", "Layer_III/MP3", "MPEG-1 Audio Layer 3")}} 일 겁니다; MP3 파일은 전 세계의 디지털 오디오 장치에서 널리 재생되고 있습니다. 반대로 MPEG-1, MPEG-2는 웹에서 별로 사용하고 있지 않죠.

- -

MPEG-1과 MPEG-2 간의 차이점은 컨테이너 포맷이 아니라 미디어 데이터 포맷에 있습니다. MPEG-1은 1992년 소개되었으며; MPEG-2는 1996년에 소개되었습니다.

- - - - - - - - - - - - - - - -
MPEG-1과 MPEG-2 media MIME types
AudioVideo
audio/mpegvideo/mpeg
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MPEG-1과 MPEG-2가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
MPEG-1 Part 2No
MPEG-2 Part 2No
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MPEG-1과 MPEG-2가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
MPEG-1 Audio Layer INo
MPEG-1 Audio Layer IINo
MPEG-1 Audio Layer III (MP3)Yes
- -

MPEG-4 (MP4)

- -

{{interwiki("wikipedia", "MPEG-4")}} (MP4) 는 최신 MPEG 파일 포맷입니다. 파트 1과 14 스펙에서 정의된 두 가지 버전의 포맷이 있습니다. MP4는 오늘날 유명한 컨테이너 포맷으로 많이 쓰이는 코덱을 지원하며 널리 사용되고 있습니다.

- -

최초의 MPEG-4 Part 1 포맷은 1999년 발표되었습니다; Part 14에서 정의된 버전 2 포맷은 2003년 추가되었습니다. MP4 파일 포맷은 Apple이 개발한 {{interwiki("wikipedia", "QuickTime file format")}}에서 파생된 {{interwiki("wikipedia", "ISO base media file format")}}에서 다시 파생되었습니다.

- -

MPEG-4 미디어 타입을 표기할 때 (audio/mp4 or video/mp4), MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

- - - - - - - - - - - - - - - -
기본 MPEG-4 media MIME 타입
AudioVideo
audio/mp4video/mp4
- -

위는 MPEG-4 미디어 컨테이너의 기본 타입입니다; 어떤 코덱을 쓰느냐에 따라 MIME 타입도 달라질 수 있습니다. 또한 MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MPEG-4가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)Yes1
AV1Yes1
H.263No
MPEG-4 Part 2 VisualNo
VP9Yes
- -

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

- -

[2] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference media.av1.enabled to true.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MPEG-4가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACYes1
FLACYes
MPEG-1 Audio Layer III (MP3)Yes
OpusYes
- -

[1] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

- -

Ogg

- -

{{interwiki("wikipedia", "Ogg")}}는 Xiph.org Foundation이 운영하는 자유 오픈 컨테이너 포맷입니다. Theora, Vorbis, and Opus등의 Ogg 프레임워크는 특허에 얽매이지 않게 정의되었습니다. 재단 웹사이트에서 Xiph.org documents about the Ogg format를 확인할 수 있습니다.

- - - - - - - - - - - - - - - -
기본 Ogg media MIME types
AudioVideo
audio/oggvideo/ogg
- -

MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 트랙의 미디어 포맷에 대한 추가 정보도 기입할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ogg가 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
TheoraYes
VP8Yes
VP9Yes
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ogg가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
FLACYes
OpusYes
VorbisYes
- -

QuickTime

- -

QuickTime 파일 포맷(QTFF, QT, MOV) 는 동일한 이름의 미디어 프레임워크에서 사용하기 위해 애플이 개발했습니다. 확장자 .mov는 최초 영화에서 쓰이기 위해  개발되었다는 의미에서 지어졌으며 보통 "QuickTime movie" 포맷이라 불립니다. QTFF가 MPEG-4 파일 포맷에 기반하였지만 두 포맷에는 분명한 차이점이 있으며 상호 호환되지 않습니다.

- -

QuickTime 파일은 오디오, 비디오 텍스트 트랙 등 시간축을 가지는 다수의 데이터 타입을 지원합니다. QuickTime 파일은 원래 macOS에서 사용하기 위해 개발되었지만 수 년이 지나면서 윈도우즈 환경에서는 QuickTime for Windows를 통해 사용할 수 있게 되었습니다. 그러나 2016년 초부터 애플은 더 이상 QuickTime for Windows를 유지 보수하지 않으며 알려진 보안 취약점으로 인해 사용해선 안됩니다. 하지만 Windows Media Player 가 현재 QuickTime version 2.0 및 이전 버전을 지원하며; 이후 버전의 QuickTime은 서드파티 플러그인을 통해 지원합니다.

- -

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 등 수 많은 비디오 포맷을 읽고 쓸 수 있습니다.

- -

추가적인 코덱을 지원하기 위해 QuickTime에 다수의 서드파티 컴포넌트를 설치할 수도 있습니다.

- -

QuickTime은 처음부터 지금까지 근본적으로 애플 디바이스에서 사용하기 위해 만들어졌기 때문에 인터넷 환경에서 널리 쓰이고 있지는 않습니다. 애플 스스로도 현재는 MP4 비디오를 사용하고 있구요. 게다가 QuickTime 프레임워크마저 deprecated되면서 macOS 10.15 Catalina부터는 사용이 불가능해졌습니다.

- - - - - - - - - - - - - -
Base QuickTime media MIME type
Video
video/quicktime
- -

video/quicktime 은 QuickTime 미디어 컨테이너의 기본 MIME 타입입니다. QuickTime (Mac OS의 미디어 프레임워크)이 다양한 컨테이너와 코덱을 지원하므로 다른 많은 MIME 타입 역시 지원합니다.

- -

MIME 타입에 codecs 파라미터를 추가하여 사용하는 오디오/비디오 코덱을 명시할 수 있으며 추가적으로 profile, level, 코덱 설정 등을 명기할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
QuickTime이 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AVC (H.264)No
CinepakNo
Component VideoNo
DVNo
H.261No
H.263No
MPEG-2No
MPEG-4 Part 2 VisualNo
Motion JPEGNo
Sorenson Video 2No
Sorenson Video 3No
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
QuickTime이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AACNo
ALaw 2:1No
Apple Lossless (ALAC)No
HE-AACNo
MPEG-1 Audio Layer III (MP3)No
Microsoft ADPCMNo
µ-Law 2:1 (u-Law)No
- -

WAVE (WAV)

- -

Waveform Audio File Format (WAVE)는 보통 줄여서 WAV라 불리며 .wav 확장자를 갖습니다. 오디오 비트스트림 데이터를 담기 위해 Microsoft와 IBM이 개발했습니다. 대부분의 WAV 파일은 linear PCM 포맷의 오디오 데이터를 담고 있습니다.

- -

이 파일 포맷은 Resource Interchange File Format (RIFF)에서 파생되었으며 애플의 AIFF 같은 다른 파생 형식와 유사합니다..

- -

WAVE 포맷은 1991년 처음 발표되었습니다.

- - - - - - - - - - - - - - - - - - - - - - -
WAVE media MIME types
Audio
audio/wave
audio/wav
audio/x-wav
audio/x-pn-wav
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WAVE가 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
ADPCM (Adaptive Differential Pulse Code Modulation)No
GSM 06.10No
LPCM (Linear Pulse Code Modulation)Yes
MPEG-1 Audio Layer III (MP3)No
µ-Law (u-Law)No
- -

WebM

- -

{{interwiki("wikipedia", "WebM")}} (Web Media)는 {{interwiki("wikipedia", "Matroska")}}에 기반하여 현대 웹 환경에서 사용하기 위해 디자인되었습니다. 특정 제품들은 WebM 컨테이너에 다른 코덱을 사용하기도 하지만 기본적으로는 무료 오픈 코덱을 사용하여 완전한 자유-오픈 기술을 지향하고 있습니다.

- -

WebM은 2010년 처음 소개되었습니다..

- - - - - - - - - - - - - - - -
WebM media MIME types
AudioVideo
audio/webmvideo/webm
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WebM이 지원하는 비디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
AV1Yes1
AVC (H.264)Yes2
VP8Yes
VP:9Yes
- -

[1] Firefox support for AV1 is currently disabled by default; it can be enabled by setting the preference media.av1.enabled to true.

- -

[2] Firefox support for H.264 relies upon the operating system's media infrastructure, so it is available as long as the OS supports it.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WebM이 지원하는 오디오 코덱
CodecBrowser support
ChromeEdgeFirefoxSafari
OpusYes
VorbisYes
- -

알맞은 컨테이너 선택하기

- -

여러분의 미디어 데이터에 알맞은 컨테이너를 선택하고 사용하기 위해서 몇 가지 고려해야 할 점들이 있습니다. 상대적으로 어떤 점이 더 중요한지는 요구사항이나 라이선스, 호환성, 타겟 고객 등에 따라 달라질 수 있습니다.

- -

가이드라인

- -

최선책 역시 미디어 데이터로 무엇을 하느냐에 달렸습니다. 미디어를 녹화/편집하는 것은 재생과 전혀 다른 이야기입니다. 최소한 노이즈 축적이라도 방지하려고 무손실 압축을 사용하면 매번 재 압축할 때 마다 압축 데이터가 누적되므로 미디어 데이터를 처리할때는 압축하지 않은 데이터를 사용하는게 퍼포먼스가 좋습니다.

- -
    -
  • 저사양 단말 또는 저속 네트워크를 사용하는 고객을 대상으로 하고 있다면 3GP 컨테이너와 적절한 압축 코덱을 고려해 볼 수 있습니다.
    • -
  • 인코딩시 필수 사항이 있다면 컨테이너 선택 시 적절한 코덱을 지원하는 지 확인해야 합니다.
    • -
  • 미디어가 상용이 아니며 오픈 포맷일 경우 FLAC(오디오), WebM(비디오) 등의 오픈 컨테이너 포맷을 고려해 보세요.
    • -
  • 어떠한 이유로 미디어를 한가지 포맷으로 제공해야 한다면 많은 디바이스와 브라우저에 널리 쓰여지는 MP3(오디오), MP4(비디오, 오디오)등의 포맷을 선택하세요.
    • -
  • 미디어가 오디오만 있다면 오디오 전용 컨테이너를 사용하는게 합당합니다. 현재는 특허가 모두 만료되어 널리 쓰여지는 MP3가 좋은 선택입니다. WAVE도 좋지만 비압축이므로 대용량 오디오 샘플의 경우에는 사용을 주의하세요. 모든 타겟 브라우저가 지원한다면 무손실 압축을 지원하는 FLAC이 최선입니다.
    • -
- -

슬픈 일이지만 주요 무손실 압축 포맷 (FLAC, ALAC) 모두 폭넓게 지원되고 있지 않습니다. 둘 중에 FLAC이 그나마 낫지만 macOS에서는 추가적인 소프트웨어 설치 없이는 지원을 안합니다. iOS에서는 아예 불가능하구요. 무손실 오디오를 플랫폼에 무관하게 제공하려면 FLAC과 ALAC 둘 다 지원해야 합니다.

- -

컨테이너 선택 가이드

- -

아래의 테이블은 다양한 시나리오에서 사용할 컨테이너에 대한 권고안입니다. 이는 추천일 뿐이며 컨테이너 포맷을 선택할 때에는 여러분의 제품이나 기관의 상황을 고려하여 선택하세요.

- -

오디오 전용 파일

- - - - - - - - - - - - - - - - - - - - - - -
만약에...추천 컨테이너 포맷
일반 재생 목적으로 압축 파일 사용MP3 (MPEG-1 Audio Layer III)
무손실 압축 파일FLAC with ALAC fallback
무압축 파일WAV
- -

이제는 MP3 특허가 모두 만료되었으므로 오디오 파일 선택은 별로 어려운 문제가 아닙니다. 폭넓게 쓰이는 MP3를 사용하면서 특허료를 내야 하느냐에 대한 고민을 할 필요가 없죠.

- -

비디오 파일

- - - - - - - - - - - - - - - - - - - - - - - - -
만약에...추천 컨테이너 포맷
가능한 오픈 포맷을 사용한 일반 비디오WebM (MP4 호환 추가)
일반 비디오MP4 (WebM, Ogg 호환 추가)
저속 네트워크상의 고효율 압축3GP (MP4 호환 추가)
구형 단말/브라우저 지원QuickTime (AVI, MPEG-2 호환 추가)
- -

몇 가지 가정 하의 권고입니다. 최종 결정 전에 여러가지를 따져보아야 하며 인코딩 해야 할 미디어가 많은 경우 특히나 심사숙고해야 합니다.

- -

다양한 컨테이너간 호환성 극대화

- -

호환성을 높이려면 한가지 버전 이상의 미디어 파일 제공을 고려해 볼 수 있습니다. {{HTMLElement("audio")}}, {{HTMLElement("video")}} 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 추가하여 구현할 수 있죠. 예를 들어 Ogg, WebM 비디오를 우선하되 호환성을 위해 MP4 포맷을 추가할 수 있습니다. 레트로하게 QuickTime이나 AVI 호환을 추가하는 것도 좋은 방법입니다.

- -

구현하려면 우선 {{htmlattrxref("src", "video")}} 어트리뷰트 없이 <video> (또는 <audio>) 엘리먼트를 생성합니다. 그 후 <video> 엘리먼트 아래에 {{HTMLElement("source")}} 엘리먼트를 제공하려는 미디어 포맷별로 추가합니다. 이 방식은 대역폭 상황에 따라 소스를 선택하는 방식으로도 사용할 수 있지만 여기서는 포맷 옵션을 제공하기로 하죠.

- -

아래 예제에서는 두 포맷 타입의 비디오를 제공합니다: WebM and MP4.

- -
{{EmbedInteractiveExample("pages/tabbed/source.html", "tabbed-standard")}}
- - - -

첫번째 비디오는 WebM 포맷입니다({{htmlattrxref("type", "video")}} 어트리뷰트가 video/webm). {{Glossary("user agent")}}는 재생이 불가능 한 경우 type 이 video/mp4 인 다음 옵션으로넘어갑니다. 둘 다 재생이 불가능 할 경우 "This browser does not support the HTML5 video element." 문구가 표시됩니다.

- -

스펙

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationComment
ETSI 3GPP3GP 컨테이너 포맷 정의
ISO/IEC 14496-3 (MPEG-4 Part 3 Audio)ADTS 포함 한 MP4 오디오 정의
FLAC FormatFLAC 포맷 규정
ISO/IEC 11172-1 (MPEG-1 Part 1 Systems)MPEG-1 컨테이너 포맷 정의
ISO/IEC 13818-1 (MPEG-2 Part 1 Systems)MPEG-2 컨테이너 포맷 정의
ISO/IEC 14496-14 (MPEG-4 Part 14: MP4 file format)MPEG-4 (MP4) version 2 컨테이너 포맷 정의
ISO/IEC 14496-1 (MPEG-4 Part 1 Systems)오리지널 MPEG-4 (MP4) 컨테이너 포맷 정의
{{RFC(3533)}}Ogg 컨테이너 포맷 정의
{{RFC(5334)}}Ogg 미디어 타입 및 확장자 정의
QuickTime File Format SpecificationQuickTime movie (MOV) 포맷 정의
Multimedia Programming Interface and Data Specifications 1.0공식 WAVE 스펙에 가까운 문서
Resource Interchange File Format (used by WAV)RIFF 포맷 정의; WAVE는 RIFF의 한 형태
WebM Container GuidelinesWebM 용 Matroska 적용 가이드
Matroska SpecificationsWebM 기반 Matroska 컨테이너 포맷 스펙
WebM Byte Stream FormatMedia Source Extensions를 통한 WebM 바이트 스트림 포맷
- -

브라우저 호환성

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
컨테이너 포맷 이름오디오비디오
MIME typeExtension(s)Browser supportMIME typeExtension(s)Browser support
3GPaudio/3gpp.3gpFirefoxvideo/3gpp.3gpFirefox
ADTS (Audio Data Transport Stream)audio/aac.aacFirefox———
FLACaudio/flac.flacFirefox———
MPEG-1 / MPEG-2 (MPG or MPEG)audio/mpeg.mpg
- .mpeg		Firefoxvideo/mpeg.mpg
- .mpeg		Firefox
audio/mp3.mp3Firefox
MPEG-4 (MP4)audio/mp4.mp4
- .m4a		Firefoxvideo/mp4.mp4
- .m4v
- .m4p		Firefox
Oggaudio/ogg.oga
- .ogg		Firefoxvideo/ogg.ogv
- .ogg		Firefox
QuickTime Movie (MOV)———video/quicktime.mov
WAV (Waveform Audiofile)audio/wav.wavFirefox———
WebMaudio/webm.webmFirefoxvideo/webm.webmFirefox
- -

더 보기

- - diff --git "a/files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" "b/files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" deleted file mode 100644 index 43cce1aa1f..0000000000 --- "a/files/ko/web/media/formats/\354\275\224\353\215\261\355\214\214\353\235\274\353\257\270\355\204\260/index.html" +++ /dev/null @@ -1,971 +0,0 @@ ---- -title: 일반 미디어 타입에서 "codecs" 파라미터 사용하기 -slug: Web/Media/Formats/코덱파라미터 -translation_of: Web/Media/Formats/codecs_parameter ---- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}
- -

기본적으로, video/mp4, audio/mpeg 처럼 {{Glossary("MIME")}} 타입을 통해 미디어 파일 포맷을 명시할 수 있습니다. 하지만 많은 미디어 타입들이-특히 비디오 트랙을 지원하는 경우-가지고 있는 데이터 포맷에 대해 더 상세하고 정확하게 명시할 수 있습니다. 예를들어 MPEG-4 비디오라고 해서 MIME 타입을 video/mp4만 명시한다면 정확히 어떤 미디어를 가지고 있는 지 아무 정보도 알 수 없습니다.

- -

때문에 MIME 타입에 추가로 미디어 콘텐츠를 기술하기 위해 codecs 파라미터가 추가되었습니다. 이를 통해 컨테이너 특화된 정보를 제공할 수 있게 되었습니다 이 정보에는 비디오 코덱의 프로파일, 오디오 트랙 타입 등을 추가할 수 있습니다.

- -

이 가이드 문서는 단순히 컨테이너 타입 명시를 넘어 codecs 파라미터의 문법과 MIME 타입에 비디오/오디오 콘텐츠에 대한 상세 정보를 기술하는 방법에 대해 설명합니다.

- -

일반 문법

- -

기본적인 MIME 미디어 타입 표현은 미디어 타입(audio, video, 등)으로 시작하며, 슬래쉬 문자 (/) 후 미디어를 포함하고 있는 컨테이너 포맷이름으로 이어집니다:

- -
-
audio/mpeg
-
MP3 같은 MPEG 파일 타입의 오디오 파일입니다.
-
video/ogg
-
Ogg 파일 타입의 비디오 파일입니다.
-
video/mp4
-
MPEG-4 파일 타입을 사용하는 비디오입니다.
-
video/quicktime
-
애플 QuickTime 포맷을 사용하는 비디오입니다. 다른 곳에서 서술되어 있듯이, 한때는 웹에서 널리 쓰여지던 형식이었지만 현재는 플러그인이 필요하여 더 이상 사용하지 않는 타입입니다.
-
- -

위 MIME 타입은 아직 모호한 표현입니다. 각 파일 타입들은 많은 수의 코덱을 지원하며 코덱은 각기 프로파일, 레벨과 같은 설정 인자들을 가지고 있습니다. 그래서 codecs 파라미터를 추가하여 명시할 수 있습니다.

- -

세미콜론 (;)을 붙이고 codecs= 으로 시작하는 문자열을 덧붙여 콘텐츠의 포맷을 서술할 수 있습니다. 일부 미디어 타입은 사용하는 코덱 이름만 명시 가능할 수 있고 다른 미디어 타입은 코덱에 관한 다양한 인자를 기술할 수 있는 경우도 있습니다. 콤마로 구분하여 여러 코덱을 기술할 수도 있습니다.

- -
-
audio/ogg; codecs=vorbis
-
Vorbis 오디오 트랙을 포함하는 Ogg 컨테이너 파일입니다.
-
video/webm; codecs="vp8, vorbis"
-
VP8 비디오와 Vorbis 오디오를 포함하는 WebM 컨테이너 파일입니다.
-
video/mp4; codecs="avc1.4d002a"
-
AVC (H.264) 코덱에 Main Profile, Level 4.2을 가지는 MPEG-4 컨테이너 파일입니다.
-
- -

코덱의 속성 중 하나라도 퍼센트-인코딩이 필요한 특수문자{{RFC(2231, "MIME Parameter Value and Encoded Word Extensions", 4)}}를 사용하는 경우 MIME 타입을 기술하는 문자열의 codecs 파라미터를 codecs* (애스터리크(*) 추가됨에 유의)로 변경해야 합니다. JavaScript {{jsxref("Global_Objects/encodeURI", "encodeURI()")}} function으로 파라미터 목록을 인코딩할 수 있습니다; 반대로 {{jsxref("Global_Objects/decodeURI", "decodeURI()")}}를 통해 기인코딩된 파라미터 리스트를 디코딩할 수 있습니다.

- -
-

codecs 파라미터를 사용한다면, 파일 콘텐츠가 사용한 모든 코덱을 목록에 명시해야합니다. 목록에 파일이 사용하고 있지 않은 코덱을 명시하는 것도 가능합니다.

-
- -

컨테이너별 코덱 옵션

- -

아래 컨테이너들은 codecs 파라미터에 확장 옵션을 지원합니다:

- -
-
    -
  • {{anch("ISO-BMFF", "3GP")}}
    • -
  • {{anch("AV1")}}
    • -
  • {{anch("ISO-BMFF", "ISO BMFF")}}
    • -
  • {{anch("ISO-BMFF", "MPEG-4")}}
    • -
  • {{anch("ISO-BMFF", "QuickTime")}}
    • -
  • {{anch("WebM")}}
    • -
-
- -

링크를 클릭하면 동일한 섹션으로 이동할텐데요; 위 미디어 타입들은 모두 ISO Base Media File Format (ISO BMFF)를 기반하고 있어, 동일한 문법을 공유하기 때문입니다.

- -

AV1

- -

AV1의 codecs 문법은AV1 Codec ISO Media File Format Binding 스펙 문서의, 섹션 5: Codecs Parameter String에 정의되어 있습니다.

- -
av01.P.LLT.DD[.M[.CCC[.cp[.tc[.mc[.F]]]]]]
- -

아래 표에서 코덱 파라미터 문자열 구성요소에 대해 자세히 설명하고 있습니다. 각 요소들은 고정된 개수의 문자로 되어 있으며;고정 길이보다 짧은 경우 앞에 0을 붙여서 맞춰야 합니다..

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AV1 코덱 파라미터 문자열 요소
요소내용
P -

한자리 숫자 프로파일 번호:

- - - - - - - - - - - - - - - - - - - - - - - -
AV1 프로파일 번호
프로파일 번호설명
0"Main" 프로파일; YUV 4:2:0/모노크롬 크로마 서브샘플링 및 8/10 비트 색 깊이 지원.
1"High" 프로파일 4:4:4 크로마 서브샘플링 추가 지원.
2"Professional" 프로파일, 4:2:2 크로마 서브샘플링 및 12 비트 색 깊이 추가 지원
-
LL두자리 숫자 레벨 번호,  X.Y 형태의 레벨 포맷으로 변환 됨, X = 2 + (LL >> 2), Y = LL & 3. 자세한 내용은 AV1 스펙 문서의 Appendix A, section 3 참조.
T한자리 문자 티어 표시. Main 티어라면 (seq_tier equals 0), 문자는 M. High 티어는 (seq_tier is 1) H. High 티어는 4.0 이상 레벨에서만 가능합니다.
DD두자리 숫자 색 깊이. 8, 10, 12 중 하나여야 하며; 프로파일과 다른 속성에서 지원 가능한 값이여야 합니다.
M한자리 숫자 모노크롬 플래그; 0인 경우 비디오는 U, V, Y 성분을 모두 가지고 있습니다. 아닌 경우 전체 비디오 데이터는 Y(휘도) 성분 뿐으로 모노크롬 이미지를 가집니다. 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_concepts", "YUV")}}를 참조하여 YUV 컬러 시스템이 어떻게 동작하는지 알아보세요. 기본 값은 0 (모노크롬 아님)입니다.
CCC -

CCC 는 세자리 숫자로 크로마 서브샘플링을 표기합니다. 첫번째 숫자는 subsampling_x, 두 번째 숫자는 subsampling_y. 둘다 1인경우, 세번째 값은 chroma_sample_position; 아닌 경우 세번째 값은 항상 0입니다. M 값과 더불어 크로마 서브샘플링 포맷을 구성하는 요소입니다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
크로마 서브샘플링 결정 방식
subsampling_xsubsampling_yMonochrome flagChroma subsampling format
000YUV 4:4:4
100YUV 4:2:2
110YUV 4:2:0
111YUV 4:0:0 (Monochrome)
- -

CCC의 세번째 값은 크로마 샘플 위치(chroma sample position)로, 0은 위치를 알 수 없으며 디코딩 시 개별적으로 제공해야 함을 의미합니다; 1은 샘플이 (0, 0) 휘도 샘플과 동일한 수평선상에 있음을 의미합니다; 2는 샘플이 (0, 0) 휘도 샘플과 동일한 위치에 있음을 의미합니다.

- -

기본 값은 110 (4:2:0 크로마 서브샘플링)입니다.

-
cp두자리 숫자 color_primaries 값은 미디어의 색 공간을 표시합니다. 예를 들어 HDR 비디오에서 사용하는 BT.2020/BT.2100 색 공간은 09입니다. 자세한 정보-그 외의 색 공간 값을 포함하여-는 AV1 스펙 문서의 Color config semantics section 를 참조하세요. 기본값은 01 (ITU-R BT.709)입니다.
tc두자리 숫자 transfer_characteristics 값. 이 값은 소스에서 디스플레이로 감마를 매핑하는 함수(기술적인 용어로 "opto-electrical transfer function"라 표현)를 정의합니다. 예를 들어 10-bit BT.2020는 14입니다. 기본 값은 01 (ITU-R BT.709)입니다.
mc두자리 숫자 matrix_coefficients 상수는 RGB 컬러 채널을 휘도/색차 신호로 변환 시 사용할 계수 행렬을 선택합니다. 예를 들어 BT.709의 표준 계수 값은 01로 표현합니다. 기본 값은 01 (ITU-R BT.709)입니다.
F한자리 숫자로 색상이 가능한 모든 범위를 표현해야 할지(1), 지정한 색 설정에 의해 적합하다고 여겨지는 범위로 제한하여 표현(studio swing representation이라 표현)해야 할지를 나타내는 값입니다. 기본 값은 0 (studio swing representation 적용)입니다.
- -

M (모노크롬 플래그)이후의 요소는 모두 비필수입니다; 어느 곳에서부터나 생략할 수 있습니다 (하지만 임의의 중간 요소를 생략할 수는 없습니다). 기본 값은 위 표에 서술하였습니다. AV1 코덱 문자열 예시는 아래와 같습니다:

- -
-
av01.2.15M.10.0.100.09.16.09.0
-
AV1 Professional 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이, 4:2:2 크로마 서브샘플링 ITU-R BT.2100 색 공간, 색 전환 YCbCr 색상 행렬. Studio swing representation 적용.
-
av01.0.15M.10
-
AV1 Main 프로파일, 레벨 5.3, Main 티어, 10 비트 색 깊이. 나머지 요소는 기본 값 사용: 4:2:0 크로마 서브 샘플링, BT.709 색 공간, 색 전환, 계수 행렬 사용. Studio swing representation.
-
- -

ISO Base Media File Format: MP4, QuickTime, and 3GP

- -

모든 미디어 타입은 {{interwiki("wikipedia", "ISO Base Media File Format")}} (ISO BMFF)를 기반으로 하며 codecs 문법을 공유합니다. 이들 미디어 타입은 MPEG-4 (또 사실상 MPEG-4를 기반으로 하고 있으므로 QuickTime도 포함)과 3GP를 포함합니다. MIME 타입의 codecs 파라미터를 통해 아래와 같이 비디오/오디오 트랙 둘 다 기술할 수 있습니다.:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ISO BMFF codecs 파라미터를 지원하는 기본 MIME 타입
MIME 타입설명
audio/3gpp3GP 오디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})
video/3gpp3GP 비디오 ({{RFC(3839, "MIME Type Registrations for 3rd generation Partnership Project (3GP) Multimedia files")}})
audio/3gp23GP2 오디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})
video/3gp23GP2 비디오 ({{RFC(4393, "MIME Type Registrations for 3GPP2 Multimedia files")}})
audio/mp4MP4 오디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})
video/mp4MP4 비디오 ({{RFC(4337, "MIME Type Registration for MPEG-4")}})
application/mp4오디오/비디오가 아닌 MPEG-4 컨테이너 미디어
- -

codecs 파라미티에는 간단하게 컨테이너 명(3gp, mp4, quicktime, etc.)만 기술할 수도 있으며 컨테이너 명에 코덱 이름 및 설정 값을 함께 기술할 수도 있습니다. 각 코덱 등은 온점(.)으로 구분된 요소를 다수 가질 수 있습니다.

- -

codecs 값의 문법은 코덱마다 다릅니다; 하지만 항상 4 글자 코덱 구분자와 온점(.)으로 시작하며 데이터 포맷을 기술하기 위핸 Object Type Indication (OTI) 형식의 문자열이 뒤따릅니다. 대부분의 코덱에서 OTI는 두자리 16진수로 되어 있지만 AVC (H.264)는 6자리 16진수로 구성되어 있습니다.

- -

따라서 지원하는 코덱 문법은 아래와 유사합니다:

- -
-
cccc[.pp]* (Generic ISO BMFF)
-
cccc 는 4 글자 코덱 ID이며  pp는 0~2자리 인코딩 된 문자입니다.
-
mp4a.oo[.A] (MPEG-4 audio)
-
oo 는 미디어 콘텐츠를 더 정확하게 기술하는 Object Type Indication 값이며 A 는 한자리 숫자오디오 OTI입니다. OTI로 가능한 값은 MP4 Registration Authority 웹사이트의 Object Types page 페이지에서 확인할 수 있습니다. 예를들어 MP4 파일의 Opus 오디오는 mp4a.ad로 기술합니다. 자세한 내용은 {{anch("MPEG-4 audio")}}를 참조하세요.
-
mp4v.oo[.V] (MPEG-4 video)
-
마찬가지로 oo 는 미디어 콘텐츠를 명시하는 OTI 값이며, V 는 한자리 숫자 비디오 OTI 값입니다.
-
avc1.oo[.PPCCLL] (AVC video)
-
-

oo 는 콘텐츠를 명시하는 OTI 값이며, while PPCCLL 는 6자리 16진수로써 프로파일 넘버 (PP), 제약 플래그 (CC), 레벨 (LL)을 의미합니다. PP로 가능한 값은 {{anch("AVC profiles")}}를 참조하세요.

- -

제약 플래그는 1 비트 불리언 값이며, MSB는 flag 0(또는 일부에선 constraint_set0_flag)로 취급합니다. 그리고 이어지는 비트는 하나씩 번호가 높게 매겨집니다. 현재로썬 0부터 2번째 비트까지만 사용하며;나머지 5개의 비트는 반드시 0이어야합니다. 각 플래그의 의미는 사용하는 프로파일에 따라 달라집니다.

- -

레벨 값은 고정 소수점이므로 숫자 14 (10진법 20) 은 레벨 2.0을 의미하며 3D (10진법 61) 은 레벨 6.1을 의미합니다. 일반적으로 레벨 숫자가 높을 수록 스트림 대역폭이 높아 더 큰 크기의 비디오를 지원할 수 있습니다.

-
-
- -

AVC 프로파일

- -

아래의 AV 프로파일 넘버는 codecs 파라미터에서 사용하며 제약 요소 값은 CC로 사용할 수 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
codecs  파라미터에서 AVC 프로파일과 제약 요건을 명세하기 위한 값
프로파일넘버(Hex)제약 (byte)
Constrained Baseline Profile (CBP)
- CBP는 리소스가 제약점이 있거나 재생이 원활하지 못해 발생하는 이상 요소들을 최소화 해야 하는 경우 주요한 해결책입니다.		4240
Baseline Profile (BP)
- CBP와 유사하나 데이터 손실 방지와 복구 능력을 향상시킨 프로파일입니다.  CBP가 도입된 이후에는 이전만큼 널리 사용하고 있지는 않습니다. CBP 스트림은 모두 BP 스트림으로 간주할 수도 있습니다.		4200
Extended Profile (XP)
- 고효율 압축과 네트워크 전송시의 데이터 안정성, 스트림 스위칭을 고려한 프로파일입니다.		5800
Main Profile (MP)
- MPEG-4 포맷으로 전송하는 디지털 표준 TV 방송에서 사용하는 프로파일입니다. 고선명 TV(HDV)에서는 사용하지 않습니다. 2004년 —HDTV에서 사용하기 위해— High Profile이 추가된 이후 중요도가 감소하였습니다.		4D00
High Profile (HiP)
- 현재로써는 전파방송과 매체기반 HD 비디오에서 사용하는 주요 프로파일입니다. HD TV 방송과 블루레이 미디어에서 사용하고 있습니다.		6400
Progressive High Profile (PHiP)
- 필드 코딩 지원을 제거한 High Profile입니다.		6408
Constrained High Profile
- 양방향 예측 슬라이스("B-slices") 지원을 제거한 PHiP입니다.		640C
High 10 Profile (Hi10P)
- 10 비트 컬러 모드 지원을 제거한 High Profile입니다.		6E00
High 4:2:2 Profile (Hi422P)
- Hi10P에 4:2:2 크로마 서브샘플링과 최대 10비트 컬러 모드 지원을 추가한 프로파일입니다.		7A00
High 4:4:4 Predictive Profile (Hi444PP)
- Hi422P 및 Hi444PP에 4:4:4 크로마 서브샘플링(색차 샘플링 소거 없음)을 추가 지원한 프로파일입니다. 또한 최대 14비트 컬러 샘플과 효율적인 무손실 지역 코딩을 추가하였습니다. 각 프레임을 3개의 분리된 컬러 평면(각 평면은 모노크롬 프레임형태로 저장됩니다)으로 인코딩할 수 있는 옵션입니다.		F400
High 10 Intra Profile
- all-intra-frame에 High 10 제약이 걸린 프로파일입니다. 전문가 용 앱에 주로 쓰입니다.		6E10
High 4:2:2 Intra Profile
- all-intra-frame에 Hi422를 적용한 프로파일입니다.		7A10
High 4:4:4 Intra Profile
- all-intra-frame에 High 4:4:4 제약을 건 프로파일입니다.		F410
CAVLC 4:4:4 Intra Profile
- all-intra-frame에 High 4:4:4 제약, CAVLC 엔트로피 코딩만 사용하는 프로파일입니다.		4400
Scalable Baseline Profile
- 화상 회의, 감시 카메라 및 모바일 장치에서 쓰이는 프로파일로, {{interwiki("wikipedia", "SVC")}} Baseline Profile은 AVC의 Constrained Baseline profile에 기반하고 있습니다. 스트림의 베이스 레이어는 고품질로 제공되면서, 제약이 걸린 환경에서 대안이 될 수 있는 서브스트림을 다수 제공하는 방식입니다. 서브스트림은 해상도 감소, 낮은 프레임레이트, 압축률 저하 등을 조합하여 구성합니다.		5300
Scalable Constrained Baseline Profile
- 실시간 양방향 대화형 어플리케이션에서 주요 사용하는 프로파일입니다. WebRTC에서 아직 정식으로 지원하지는 않지만,  SVC를 활성화하여 WebRTC AP 개발 모드에서 사용해 볼 수 있습니다.		5304
Scalable High Profile
- 방송 및 스트리밍 어플리케이션에서 주로 사용합니다. 베이스(또는 최고 품질) 레이어에는 AVC High Profile이 반드시 포함되어야 합니다.		5600
Scalable Constrained High Profile
- 실시간 통신을 위한 Scalable High Profile의 서브셋 프로파일입니다.		5604
Scalable High Intra Profile
- 비디오 제작 어플리케이션을 위한 all-intra-frame 프로파일입니다.		5620
Stereo High Profile
- 양안 렌더링을 통한 스테레오스코픽(stereoscopic) 비디오를 지원하는 프로파일입니다. 양안 영상이 아닌 경우 High profile과 동일합니다.		8000
Multiview High Profile
- 시간 및 MVC inter-view 예측을 통한 2개 이상의 뷰를 지원하는 프로파일입니다. 필드 픽쳐 또는 매크로블록-어댑티브한 frame-field 코딩을 지원하지 않습니다.		7600
Multiview Depth High Profile
- High Profile에 기반하며 메인 서브스트림이 반드시 붙어야 합니다. 나머지 서브스트림들은 Stereo High Profile과 매칭되어야 합니다.		8A00
- -

MPEG-4 audio

- -

codecs 목록의 값 항목이 mp4a로 시작한다면, 문법은 아래와 같아야 합니다:

- -
mp4a.oo[.A]
- -

oo 는 두자리 16진수 Object Type Indication으로 미디어에 사용된 코덱 클래스를 표시합니다. OTI 값은 MP4 Registration Authority에서 규정하고 있으며 list of the possible OTI values에서 가용한 값을 확인할 수 있습니다. 특수한 값인 40; 이는 미디어가 MPEG-4 audio(ISO/IEC 14496 Part 3)임을 나타냅니다. 조금 더 자세히 말하자면, 세번째 컴포넌트—Audio Object Type—은 OTI 40 을 MPEG-4의 특정 하위 타입으로 범위를 좁히기 위해 추가하였습니다.

- -

Audio Object Type는 두자리 10진수로 이루어져 있습니다(codecs 파라미터의 다른 값은 대부분 16진수). 예를들어 MPEG-4 AAC-LC의 오디오 오브젝트 타입은 숫자 2이므로 AAC-LC의 전체 codecs 표현 값은 mp4a.40.2 입니다.

- -

그러므로 오디오 오브젝트 타입이 17인 ER AAC LC의 전체 codecs 값은 mp4a.40.17 입니다. 한자리 숫자는 한자리로 표현하거나(폭넓게 호환되므로 최선) 앞에 0을 붙여 두자리로 표현할 수 있습니다. mp4a.40.02 처럼요.

- -
-

Note: 원래 Audio Object Type은 한자리 숫자로 규정되었었습니다. 시간이 지나면서 표준을 확장하였고 현재는 한자리 또는 두자리 숫자입니다. 10 미만의 값 앞에 0 을 붙이는건 필수가 아닙니다. 오래된 MPEG-4 코덱 구현체들은 두자리 숫자를 지원하지 못할 수도 있습니다. 따라서 호환성을 높이기 위해선 한자리로 표현해야 합니다.

-
- -

Audio Object Types는 ISO/IEC 14496-3 subpart 1, section 1.5.1에서 정의하고 있습니다. 아래 표는 Audio Object Type 기본 목록과 지원하는 프로필입니다. MPEG-4 audio type의 내부에 대해서 더 알고 싶다면 레퍼런스를 참조하세요.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
MPEG-4 audio object types
IDAudio Object TypeProfile support
0NULL
1AAC MainMain
2AAC LC (Low Complexity)Main, Scalable, HQ, LD v2, AAC, HE-AAC, HE-AAC v2
3AAC SSR (Scalable Sampling Rate)Main
4AAC LTP (Long Term Prediction)Main, Scalable, HQ
5SBR (Spectral Band Replication)HE-AAC, HE-AAC v2
6AAC ScalableMain, Scalable, HQ
7TwinVQ (Coding for ultra-low bit rates)Main, Scalable
8CELP (Code-Excited Linear Prediction)Main, Scalable, Speech, HQ, LD
9HVXC (Harmonic Vector Excitation Coding)Main, Scalable, Speech, LD
10 – 11Reserved
12TTSI (Text to Speech Interface)Main, Scalable, Speech, Synthetic, LD
13Main SyntheticMain, Synthetic
14Wavetable Synthesis
15General MIDI
16Algorithmic Synthesis and Audio Effects
17ER AAC LC (Error Resilient AAC Low-Complexity)HQ, Mobile Internetworking
18Reserved
19ER AAC LTP (Error Resilient AAC Long Term Prediction)HQ
20ER AAC Scalable (Error Resilient AAC Scalable)Mobile Internetworking
21ER TwinVQ (Error Resilient TwinVQ)Mobile Internetworking
22ER BSAC (Error Reslient Bit-Sliced Arithmetic Coding)Mobile Internetworking
23ER AAC LD (Error Resilient AAC Low-Delay; used for two-way communiation)LD, Mobile Internetworking
24ER CELP (Error Resilient Code-Excited Linear Prediction)HQ, LD
25ER HVXC (Error Resilient Harmonic Vector Excitation Coding)LD
26ER HILN (Error Resilient Harmonic and Individual Line plus Noise)
27ER Parametric (Error Resilient Parametric)
28SSC (Sinusoidal Coding)
29PS (Parametric Stereo)HE-AAC v2
30MPEG Surround
31Escape
32MPEG-1 Layer-1
33MPEG-1 Layer-2 (MP2)
34MPEG-1 Layer-3 (MP3)
35DST (Direct Stream Transfer)
36ALS (Audio Lossless)
37SLS (Scalable Lossless)
38SLS Non-core (Scalable Lossless Non-core)
39ER AAC ELD (Error Resilient AAC Enhanced Low Delay)
40SMR Simple (Symbolic Music Representation Simple)
41SMR Main (Symbolic Music Representation Main)
42Reserved
43SAOC (Spatial Audio Object Coding)[1]
44LD MPEG Surround (Low Delay MPEG Surround)[1]
45 and upReserved
- -

[1] SAOC and LD MPEG Surround are defined in ISO/IEC 14496-3:2009/Amd.2:2010(E).

- -

WebM

- -

WebM codecs 파라미터의 기본 형은 4개의 WebM 코덱 중 하나 이상의 이름을 콤마로 구분합니다. 아래 표는 예시입니다.:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WebM MIME codecs 파라미터 예시
MIME 타입설명
video/webm;codecs="vp8"VP8 코덱 WebM 비디오; 오디오 미정의.
video/webm;codecs="vp9"VP9 코덱 WebM 비디오.
audio/webm;codecs="vorbis"Vorbis 오디오 WebM 파일.
audio/webm;codecs="opus"Opus 오디오 WebM 파일.
video/webm;codecs="vp8,vorbis"VP8 비디오 코덱, Vorbis 오디오 코덱 포함된 WebM 파일.
video/webm;codecs="vp9,opus"A WebM container with VP9 video and Opus audio.
- -

vp8.0, vp9.0 문자열도 가능하지만, 비추천합니다.

- -

ISO Base Media File Format 문법

- -

codecs 파라미터를 표준화하고 강력한 포맷으로 발전시키기 위해, WebM은 ISO Base Media File Format 에 정의된 문법에 따라 비디오 콘텐츠를 기술하기 시작했습니다. 본 문법은 VP Codec ISO Media File Format Binding의, Codecs Parameter String 섹션에 정의되어 있습니다. 오디오 코덱은 vorbis 또는 opus로 표시되어 있습니다.

- -

codecs 파리미터는 사용한 코덱을 나타내는 4자리 문자로 시작하고 온점(.)으로 구분된 2자리 숫자가 반복됩니다.

- -
cccc.PP.LL.DD.CC[.cp[.tc[.mc[.FF]]]]
- -

처음부터 5개 요소는 필수이며; cp (color primaries) 부터는 옵션입니다.; 이후로는 어디서든 끊을 수 있습니다. 각 요소는 아래 표에 설명하고 있으며 예시가 첨부되어 있습니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WebM codecs parameter components
ComponentDetails
cccc -

4자리 코드로 사용 가능한 코덱을 명시합니다. 가능한 값은 아래와 같습니다:

- - - - - - - - - - - - - - - - - - - - - - - -
Web-M 지원 코덱 4자리 코드
Four-character codeCodec
vp08VP8
vp09VP9
vp10VP10
-
PP -

2자리 숫자 프로파일 코드. 필요하다면 두자리를 맞추기 위해 앞에 0을 추가합니다.

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
WebM 프로파일 숫자
프로파일설명
00크로마 서브샘플링 4:2:0(수직/수평 서브샘플링)만 허용. 색상 컴포넌트 당 8비트만 허용.
01크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8비트만 허용.
02크로마 서브샘플링 4:2:0만 허용. 색상 컴포넌트 당 8, 10, 12비트 허용.
03크로마 서브샘플링 전체 허용. 색상 컴포넌트 당 8, 10, 12비트 허용
-
LL두 자리 숫자 레벨 코드. 레벨 넘버는 고정 소수점 표기로 첫번째 숫자가 1의 자리, 두번째 숫자가 소수점 미만 첫번째 자리를 의미합니다. 예를 들어 레벨 3은 30 레벨 6.1은 61.
DD휘도, 색상 컴포넌트의 비트 심도를 표기합니다. 가능한 값은 8, 10, 12입니다.
CC -

크로마 서브샘플링 포맷을 2자리 숫자로 표기합니다. 가능한 값은 아래 표에 있습니다; 자세한 내용은 {{SectionOnPage("en-US/docs/Web/Media/Formats/Video_concepts", "Chroma subsampling")}} 를 참조하세요.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
WebM 크로마 서브샘플링 구분자
값크로마 서브샘플링 포맷
004:2:0 with the chroma samples sited interstitially between the pixels
014:2:0 chroma subsampling with the samples colocated with luma (0, 0)
024:2:2 chroma subsampling (4 out of each 4 horizontal pixels' luminance are used)
034:4:4 chroma subsampling (every pixel's luminance and chrominance are both retained)
04Reserved
-
cp -

ISO/IEC 23001-8:2016 표준 Section 8.1에 명시되어있는 색 공간을 두자리 숫자로 표현합니다. 본 요소와 이후 요소는 전부 비필수값입니다.

- -

Color primaries 요소에 가능한 값은 아래와 같습니다.:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ISO/IEC Color primary identifiers
ValueDetails
00ITU과 ISO/IEC에 의해 예약됨
01고선명 화질(HD) TV 표준인 BT.709, sRGB, sYCC. BT.709; sRGB는 컴퓨터 모니터에서 쓰이는 가장 일반적인 색 공간입니다. Broadcast BT.709는 8비트 색 심도를 사용하여 16(Black)부터 235(White)까지 리갈 레인지를 표현합니다.
02알 수 없거나 application에서 활용하기 위해 사용합니다.
03ITU과 ISO/IEC에 의해 예약됨
04BT.470 System M, NTSC (미국 내 표준 화질 TV 표준)
05BT.470 System B, G; BT.601; BT.1358 625; BT.1700 625 PAL and 625 SECAM
06BT.601 525; BT.1358 525 or 625; BT.1700 NTSC; SMPTE 170M. 7과 동일함.
70{{Glossary("SMPTE")}} 240M (historical). Functionally identical to 6과 동일함.
08일반 필름
09BT.2020; BT.2100. UHD (4K) High Dynamic Range (HDR) 영상에서 사용 매우 넓은 색 표현력과 10비트 12비트 색상 컴포넌트 지원.
10SMPTE ST 428 (D-Cinema Distribution Master: Image characteristics). DCDM을 위한 비압축 형식.
11SMPTE RP 431 (D-Cinema Quality: Reference projector and environment). 필름 표현의 지속적 경험을 위한 레퍼런스 프로젝터와 환경 조건에 대해 기술.
12SMPTE EG 432 (Digital Source Processing: Color Processing for D-Cinema). 디지털 영화를 위한 색신호 디코딩의 기술적 가이드라인.
13 – 21ITU과 ISO/IEC에 의해 예약됨
22EBU Tech 3213-E
23 – 255ITU과 ISO/IEC에 의해 예약됨
-
tc비디오의 transferCharacteristics 값을 2자리 숫자로 표현. This value is from Section 8.2 of ISO/IEC 23001-8:2016 Section 8.2에 기술되어 있으며 디코딩된 색상을 렌더링 타겟에 맞출 때 transfer characteristics 을 정의합니다.
mcmatrixCoefficients 속성 값을 2자리 숫자로 표현 ISO/IEC 23001-8:2016 스펙 Section 8.3 표에서 기술. 이 값은 native red, blue, green 색상을 휘도, 색차 신호에 매핑하는데 사용합니다. 이 계수들이 방정식에서 어떻게 사용되는지 같은 섹션에서 확인할 수 있습니다.
FF색상 컴포넌트의 검정 수준과 색상 범위를 리갈 레인지로 제한할지 여부를 표시합니다. 예를들어 8비트 색상의 경우 리갈 레인지는 16~235입니다. 값이 00 인 경우 강제로 제한하며,  01 인 경우 결과물의 색상이 컬러 시스템의 범위를 벗어나더라도 각 컴포넌트 별로 가능한 풀 레인지 값을 허용합니다.
- -

WebM media type 예시

- -
-
video/webm;codecs="vp08.00.41.08,vorbis"
-
VP8 비디오, 프로파일 0 레벨 4.1, 8-bit YUV 4:2:0 크로마 서브샘플링, BT.709 색 공간, 변환 함수, 행렬 계수, 휘도 색차 값은 ("studio") 리갈 레인지로 인코딩 됨. 오디오는 Vorbis.
-
video/webm;codecs="vp09.02.10.10.01.09.16.09.01,opus"
-
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 포맷.
-
- -

codecs 파라미터 사용하기

- -

codecs 파라미터를 여러 상황에서 사용할 수 있습니다. 먼저 {{HTMLElement("audio")}} , {{HTMLElement("video")}} 엘레먼트 생성 시 {{HTMLElement("source")}} 엘레먼트에 사용하여 브라우저로 하여금 사용할 미디어 포맷에 대한 옵션을 제공하는거죠..

- -

{{domxref("MediaSource.isTypeSupported()")}} 메소드에 MIME 타입을 명시적으로 전달하는데 사용할 수도 있습니다.; 이 메소드는 현재 장치에서 주어진 미디어 포맷을 재생할 수 있는지 여부를 불리언 값으로 반환합니다.

- -

더 보기

- - diff --git a/files/ko/web/performance/critical_rendering_path/index.html b/files/ko/web/performance/critical_rendering_path/index.html new file mode 100644 index 0000000000..0dd28ed81c --- /dev/null +++ b/files/ko/web/performance/critical_rendering_path/index.html @@ -0,0 +1,60 @@ +--- +title: 중요 렌더링 경로 +slug: Web/Performance/중요_렌더링_경로 +translation_of: Web/Performance/Critical_rendering_path +--- +

{{draft}}

+ +

중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

+ +

도큐먼트 오브젝트 모델은 HTML을 분석함으로써 만들어집니다. HTML은 Javascript를 요청할 수 있으며, 이 경우 DOM 이 변경될 수 있습니다. HTML은 차례대로 CSS 오브젝트 모델을 만들기 위한 스타일에 대한 요청을 만들거나 포함합니다. 브라우저 엔진은 이 두가지를 결합하여 렌더 트리를 생성하며 레이아웃은 페이지의 모든 것에 대한 크기와 위치를 결정합니다. 일단 레이아웃이 결정되면 화면에 픽셀을 그립니다.

+ +

중요 렌더링 경로 최적화는 첫번째 렌더링의 시간을 개선시킵니다. 중요 렌더링 경로를 이해하고, 최적화 하는 것은 뛰어난 사용자 상호작용을 보장하며 버벅거림을 피할 수 있도록 하고, 1초당 60 프레임에 리플로우와 리페인트가 발생할 수 있도록 하는데 중요합니다.

+ +

CRP 이해하기

+ +

웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃 그리고 화면에 픽셀 그리기를 포함합니다.

+ +

웹 페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작됩니다. 서버는 응답 헤더 또는 데이터로 HTML을 반환합니다. 그리고 나서 브라우저는 HTML을 분석하고 수신된 바이츠를 DOM 트리로 변환하기 시작합니다. 브라우저는 스타일시트, 스크립트 또는 포함된 이미지 참조인 외부 자원에 대한 링크를 찾을때마다 요청을 시작합니다. 불러온 에셋을 다룰 때까지 나머지 HTML을 분석하는 작업하는 일부 요청은 중단되며 차단됩니다. 브라우저는 CSS 오브젝트 모델을 구축하는 작업이 끝날때까지 요청을 만들고 DOM을 생성하는 HTML을 계속해서 분석합니다. DOM과 CSSOM이 완료되면 브라우저는 렌더 트리를 생성하고 보여지는 컨텐츠를 위해 스타일을 계산합니다. 렌더트리가 완료된 후 모든 렌더 트리 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어집니다. 일단 완료되면 레이지는 렌더링되거나 또는 화면에 '그려집니다(painted)'.

+ +

Document Object Model

+ +

DOM 구성은 점진적으로 증가합니다. HTML 응답은 토큰으로, 토큰은 노드로, 노드는 DOM 트리로 변환됩니다.1개의 DOM 노드는 시작태그 토큰으로 시작해서 끝태그 토큰으로 끝납니다. 노드들은 HTML 요소에 대한 모두 연관성 있는 정보를 포함하고 있습니다. 그 정보는 토큰을 통해 설명됩니다. 노드들은 토큰의 위계서열을 기반으로 DOM 트리안에 연결됩니다. 만약 또 다른 시작태그와 끝태그의 묶음이 한 세트의 시작태그와 끝태그 사이에 있다면, 여러분은 DOM 트리의 위계서열을 정의하는 방법으로 노드 안에 노드를 가지게 됩니다.

+ +

많은 수의 노드는 중요 렌더링 경로에서 다음의 이벤트를 더 오래 발생시킬 것입니다. 측정하세요! 몇 개의 추가 노드는 차이를 만들지 않지만 전염은 버벅거림을 유발할 수 있습니다.

+ +

CSS Object Model

+ +

DOM은 페이지의 모든 컨텐츠를 포함하고, CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함합니다. CSSOM은 DOM과 유사하지만 다릅니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM은 그렇지 않습니다. CSS는 렌더링을 막습니다: 브라우저는 모든 CSS를 처리하고 수신할때까지 페이지 렌더링을 막습니다. CSS는 규칙을 덮어쓸수 있기 때문에 렌더링을 막습니다. 그러므로 CSSOM이 완료될때까지 콘텐츠를 렌더링 할 수 없습니다.

+ +

CSS는 유효한 토크들은 인식하기 위해 스스로 규칙 세트를 가지고 있습니다. CSS의 C가 'Cascade(종속 또는 폭포)'라는 의미를 기억해두세요. CSS 규칙은 아래로 종속됩니다. 분석기는 토큰을 노드로 변환할때, 하위 노드가 스타일을 상속합니다. 연속적인 규칙들이 이전의 규칙들에 덮어쓰여질 수 있기 때문에, 증감 처리 기술은 HTML 처럼 CSS에 적용되지는 않습니다. CSS 개체 모델은 CSS를 분석할 때 빌드되지만 나중에 분석되 덮어쓸 스타일들은 화면에 렌더링 할 수 없기 때문에 완전히 분석될 때까지 렌더 트리를 생성하는데 사용할 수 없습니다.

+ +

선택자 성능 측면에서, 덜 구체적인 선택자는 더 구체적인 선택자보다 더 빠릅니다. 예를 들어, 브라우저가 .foo 찾을때, .foo {} 는 .bar .foo {} 보다 빠릅니다. 왜냐하면 두번째 시나리오에서, .foo 가 부모 객체인 .bar 를 가지고 있는지 확인하기 위해 DOM을 거슬러 올라가기 때문입니다. 더 구체적인 태그는 브라우저에게 더 많은 작업을 요구하지만 이러한 패널티는 최적화 할 가치가 없습니다.

+ +

만약 CSS 분석 시간을 측정한다면, 브라우저들이 정말 빠르다는 것에 놀랄 것입니다. 규칙이 구체적일수록 DOM 트리 안에서 더 많은 노드들은 지나야 하기 때문에 더 높은 비용이 듭니다. 그러나 추가적인 비용은 일반적으로 최소입니다. 첫번째는 측정입니다. 필요할때 최적화하세요. 특정 짓는 것은 쉬운 일이 아닙니다. CSS 측면에서, 선택자 성능 최적화와 개선은 오직 microsecond 밖에 되지 않될 것입니다. 축소화와 미디어 쿼리를 사용함으로써 지연된 CSS를 논-블로킹 요청으로 분리하는 것과 같은 CSS 최적화를 위한 다른 방법이 있습니다.

+ +

Render Tree

+ +

렌터 트리는 콘텐츠와 스타일 둘다 캡쳐합니다. DOM과 CSSOM 트리는 렌더 트리에 결합됩니다. 렌더 트리를 구성하기 위해 브라우저는 DOM 트리의 root에서 시작해 모든 노드는 확인하면서 어떤 CSS 규칙들을 첨부할지 결정합니다.

+ +

렌더 트리는 오직 보여지는 콘텐츠만은 캡쳐합니다. (일반적으로) 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 렌더트리 안에 포함되지 않습니다. 만약 요소에 display: none 이 적용되어 있다면, 해당 요소 또는 하위 요소는 포함되지 않습니다.

+ +

Layout

+ +

일단 렌더 트리가 생성되고 나면, 레이아웃은 가능해지며 화면의 크기에 의존합니다. 레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정합니다.

+ +

요소의 너비는 무엇일까요? 정의에 따르면, 블럭 수준의 요소들은 그 부모 너비의 기본 너비값의 100% 입니다. 50%의 너비를 갖는 요소는 부모 요소의 절반일 것입니다. 비록 그렇게 정의되어 있지 않더라고, body 는 뷰포트 너비의 100%를 의미하는 너비 입니다. 디바이스의 너비는 레이아웃에 영향을 미칩니다.

+ +

뷰포트 메타 태그는 레이아웃에 영향을 미치는 뷰포트 레이아웃의 너비로 정의합니다. 이 태그 없다면, 브라우저는 뷰포트 기본값을 사용합니다. 브라우저의 full screen 기본값은 일반적으로 960px 입니다. 기본적으로 브라우저의 full screen에서, 스마트폰의 브라우저와 같은 너비는 <meta name="Viewport" content="width=device-witdh"> 로 세팅함으로써 기본 뷰포트 너비 대신에 디바이스의 너비를 사용합니다. 디바이스 너비는 사용자가 디비이스를 가로(landscapre) 또는 세로(portrait) 모드 사이로 돌릴때마다 바뀝니다. 레이아웃은 디바이스가 회전하거나 브라우저의 사이즈가 조정될 때마다 발생합니다.

+ +

레이아웃 성능은 DOM의 영향을 받습니다. 노드의 수가 많을수록 레이아웃은 더 길어지며 스크롤링 또는 다른 애니메이션들이 필요하다면 레이아웃에 쟁크(jank)를 일으키는 병목현상이 발생할 수 있습니다. 로딩 또는 방향 전환에 20ms 정도 밀릴 수 있지만 애니메이션 또는 스크롤에 쟁크(jank) 유발할 수 있습니다. 노드에 박스 모델 업데이트, 콘텐츠 대체 그리고 노드 추가와 같은 수정은 언제든지 렌더 트리를 수정할 수 있으며 레이아웃을 형성합니다.

+ +

레이아웃 이벤트의 반복과 형성시간을 줄이기 위해서 일괄 업데이트 해야하고, 박스 모델 속성을 애니메이션화 하지 말아야 합니다.

+ +

Paint

+ +

마자믹 단계는 화면에 픽셀을 그리는 것입니다. 일단 렌더 트리가 생성되고 레이아웃나 나타나기 시작하면, 화면에 픽셀을 그릴수 있습니다. 로드시, 전체 화면을 그립니다. 그 후에는 브라우저가 필요한 최소 영역만을 다시 그리도록 최적화되어 있기 때문에 영향을 받는 영역만을 화면에 다시 그립니다. 그리는 시간은 렌터 트리에 적용되는 업데이트의 종류가 무엇있냐에 따라 달라집니다. 페인팅인 매우 빠르게 진행되는 과정이기 때문에 성능 향상에 집중해야 하는 가장 큰 영향있는 부분이 아닐 수 있지만, 애니메이션 프레임 소요시간을 측정할때, 레이아웃과 리페인트 시간을 모두 고려하는 것이 중요합니다. 각 노드에 적용된 스타일은 페인트 시간을 증가시키지만 페인트 시간을 0.001ms 증가시키는 스타일을 제거하는 것은 여러분의 최적화 비용이 매우 커지는 것을 막지 못할 수 있습니다. 첫째는 측정하는 것을 기억하고, 최적화 우선순위를 정해야할지 말지를 결정해야 합니다.

+ +

Optimizing for CRP

+ +

자원 로드 순서를 관리하고, 파일 사이즈를 줄이며 어떤 자원을 먼저 로드할지 정함으로써 페이지 로드 속도를 개선하세요. 성능 팁으로는 1) 자원 다운로드를 연기함으로써 중요 자원들의 수를 최소화하기 , 2) 각 요청에 대한 파일 사이즈에 따라 필수적인 요청 횟수 최적하하기, 3) 다운받을 중요 에셋의 우선순위를 정함으로써 중요 자원 불러오는 순서 최적화하고, 중요 경로 길이 최소화하기

diff --git a/files/ko/web/performance/how_browsers_work/index.html b/files/ko/web/performance/how_browsers_work/index.html new file mode 100644 index 0000000000..473e30980d --- /dev/null +++ b/files/ko/web/performance/how_browsers_work/index.html @@ -0,0 +1,204 @@ +--- +title: '웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가' +slug: Web/Performance/브라우저는_어떻게_동작하는가 +translation_of: Web/Performance/How_browsers_work +--- +

Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.

+ +

To understand how to improve performance and perceived performance, it helps to understand how the browser works.

+ +

개요

+ +

Fast sites provide better user experiences. Users want and expect web experiences with content that is fast to load and smooth to interact with.

+ +

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.

+ +

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.

+ +

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.

+ +

여정

+ +

Navigation 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.

+ +

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.

+ +

DNS Lookup

+ +

The first step of navigating to a web page is finding where the assets for that page are located. If you navigate to https://example.com, the HTML page is located on the server with IP address of 93.184.216.34. If you’ve never visited this site, a DNS lookup must happen.

+ +

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.

+ +

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.

+ +

Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet

+ +

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.

+ +

TCP Handshake

+ +

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')}}.

+ +

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.

+ +

TLS Negotiation

+ +

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.

+ +

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.

+ +

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.

+ +

After the 8 round trips, the browser is finally able to make the request.

+ +

응답

+ +

Once we have an established connection to a web server, the browser sends an initial HTTP GET request 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.

+ +
<!doctype HTML>
+<html>
+ <head>
+  <meta charset="UTF-8"/>
+  <title>My simple page</title>
+  <link rel="stylesheet" src="styles.css"/>
+  <script src="myscript.js"></script>
+</head>
+<body>
+  <h1 class="heading">My Page</h1>
+  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
+  <div>
+    <img src="myimage.jpg" alt="image description"/>
+  </div>
+  <script src="anotherscript.js"></script>
+</body>
+</html>
+ +

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.

+ +

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.

+ +

TCP Slow Start / 14kb rule

+ +

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.

+ +

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.

+ +

TCP slow start

+ +

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.

+ +

Congestion control

+ +

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.

+ +

파싱

+ +

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.

+ +

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.

+ +

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.

+ +

Building the DOM tree

+ +

We describe five steps in the critical rendering path.

+ +

The first step is processing the HTML markup and building the DOM tree. HTML parsing involves tokenization 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.

+ +

The DOM tree describes the content of the document. The <html> 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.

+ +

The DOM tree for our sample code, showing all the nodes, including text nodes.

+ +

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 <script> tags—particularly those without an async or defer 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.

+ +

Preload scanner

+ +

While the browser builds the DOM tree, this process occupies the main thread. As this happens, the preload scanner 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.

+ +
<link rel="stylesheet" src="styles.css"/>
+<script src="myscript.js" async></script>
+<img src="myimage.jpg" alt="image description"/>
+<script src="anotherscript.js" async></script>
+
+ +

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 async attribute, or the defer attribute if JavaScript parsing and execution order is not important.

+ +

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.

+ +

Building the CSSOM

+ +

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. The DOM and CSSOM are both trees. They are independent data structures. 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.

+ +

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.

+ +

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.

+ +

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.

+ +

Other Processes

+ +

JavaScript Compilation

+ +

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.

+ +

Building the Accessibility Tree

+ +

The browser also builds an accessibility 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.

+ +

Until the AOM is built, the content is not accessible to screen readers.

+ +

렌더

+ +

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.

+ +

Style

+ +

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.

+ +

Tags that aren't going to be displayed, like the <head> and its children and any nodes with display: none, such as the script { display: none; } 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 visibility: hidden 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 script node in our code example above will not be included in the render tree.

+ +

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 CSS cascade, what the computed styles are for each node.

+ +

Layout

+ +

The fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node. Layout 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. Reflow is any subsequent size and position determination of any part of the page or the entire document.

+ +

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.

+ +

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.

+ +

The first time the size and position of nodes are determined is called layout. Subsequent recalculations of node size and locations are called reflows.  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.

+ +

Paint

+ +

The last step in the critical rendering path is painting the individual nodes to the screen, the first occurence of which is called the first meaningful paint. 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.

+ +

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.

+ +

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 <video> and <canvas>, and any element which has the CSS properties of opacity, a 3D transform, will-change, 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.

+ +

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.

+ +

Compositing

+ +

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.

+ +

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.

+ +

상호운용성

+ +

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 onload event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions.

+ +

{{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.

+ +

In our example, maybe the image loaded quickly, but perhaps the anotherscript.js 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:

+ +

The main thread is occupied by the downloading, parsing and execution of a javascript file - over a fast connection

+ +

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.

+ +

같이 보기

+ + diff --git "a/files/ko/web/performance/\353\270\214\353\235\274\354\232\260\354\240\200\353\212\224_\354\226\264\353\226\273\352\262\214_\353\217\231\354\236\221\355\225\230\353\212\224\352\260\200/index.html" "b/files/ko/web/performance/\353\270\214\353\235\274\354\232\260\354\240\200\353\212\224_\354\226\264\353\226\273\352\262\214_\353\217\231\354\236\221\355\225\230\353\212\224\352\260\200/index.html" deleted file mode 100644 index 473e30980d..0000000000 --- "a/files/ko/web/performance/\353\270\214\353\235\274\354\232\260\354\240\200\353\212\224_\354\226\264\353\226\273\352\262\214_\353\217\231\354\236\221\355\225\230\353\212\224\352\260\200/index.html" +++ /dev/null @@ -1,204 +0,0 @@ ---- -title: '웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가' -slug: Web/Performance/브라우저는_어떻게_동작하는가 -translation_of: Web/Performance/How_browsers_work ---- -

Users want web experiences with content that is fast to load and smooth to interact with. Therefore, a developer should strive to achieve these two goals.

- -

To understand how to improve performance and perceived performance, it helps to understand how the browser works.

- -

개요

- -

Fast sites provide better user experiences. Users want and expect web experiences with content that is fast to load and smooth to interact with.

- -

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.

- -

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.

- -

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.

- -

여정

- -

Navigation 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.

- -

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.

- -

DNS Lookup

- -

The first step of navigating to a web page is finding where the assets for that page are located. If you navigate to https://example.com, the HTML page is located on the server with IP address of 93.184.216.34. If you’ve never visited this site, a DNS lookup must happen.

- -

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.

- -

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.

- -

Mobile requests go first to the cell tower, then to a central phone company computer before being sent to the internet

- -

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.

- -

TCP Handshake

- -

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')}}.

- -

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.

- -

TLS Negotiation

- -

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.

- -

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.

- -

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.

- -

After the 8 round trips, the browser is finally able to make the request.

- -

응답

- -

Once we have an established connection to a web server, the browser sends an initial HTTP GET request 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.

- -
<!doctype HTML>
-<html>
- <head>
-  <meta charset="UTF-8"/>
-  <title>My simple page</title>
-  <link rel="stylesheet" src="styles.css"/>
-  <script src="myscript.js"></script>
-</head>
-<body>
-  <h1 class="heading">My Page</h1>
-  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
-  <div>
-    <img src="myimage.jpg" alt="image description"/>
-  </div>
-  <script src="anotherscript.js"></script>
-</body>
-</html>
- -

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.

- -

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.

- -

TCP Slow Start / 14kb rule

- -

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.

- -

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.

- -

TCP slow start

- -

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.

- -

Congestion control

- -

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.

- -

파싱

- -

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.

- -

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.

- -

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.

- -

Building the DOM tree

- -

We describe five steps in the critical rendering path.

- -

The first step is processing the HTML markup and building the DOM tree. HTML parsing involves tokenization 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.

- -

The DOM tree describes the content of the document. The <html> 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.

- -

The DOM tree for our sample code, showing all the nodes, including text nodes.

- -

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 <script> tags—particularly those without an async or defer 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.

- -

Preload scanner

- -

While the browser builds the DOM tree, this process occupies the main thread. As this happens, the preload scanner 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.

- -
<link rel="stylesheet" src="styles.css"/>
-<script src="myscript.js" async></script>
-<img src="myimage.jpg" alt="image description"/>
-<script src="anotherscript.js" async></script>
-
- -

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 async attribute, or the defer attribute if JavaScript parsing and execution order is not important.

- -

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.

- -

Building the CSSOM

- -

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. The DOM and CSSOM are both trees. They are independent data structures. 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.

- -

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.

- -

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.

- -

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.

- -

Other Processes

- -

JavaScript Compilation

- -

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.

- -

Building the Accessibility Tree

- -

The browser also builds an accessibility 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.

- -

Until the AOM is built, the content is not accessible to screen readers.

- -

렌더

- -

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.

- -

Style

- -

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.

- -

Tags that aren't going to be displayed, like the <head> and its children and any nodes with display: none, such as the script { display: none; } 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 visibility: hidden 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 script node in our code example above will not be included in the render tree.

- -

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 CSS cascade, what the computed styles are for each node.

- -

Layout

- -

The fourth step in the critical rending path is running layout on the render tree to compute the geometry of each node. Layout 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. Reflow is any subsequent size and position determination of any part of the page or the entire document.

- -

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.

- -

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.

- -

The first time the size and position of nodes are determined is called layout. Subsequent recalculations of node size and locations are called reflows.  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.

- -

Paint

- -

The last step in the critical rendering path is painting the individual nodes to the screen, the first occurence of which is called the first meaningful paint. 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.

- -

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.

- -

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 <video> and <canvas>, and any element which has the CSS properties of opacity, a 3D transform, will-change, 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.

- -

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.

- -

Compositing

- -

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.

- -

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.

- -

상호운용성

- -

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 onload event fires, the main thread might be busy, and not available for scrolling, touch, and other interactions.

- -

{{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.

- -

In our example, maybe the image loaded quickly, but perhaps the anotherscript.js 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:

- -

The main thread is occupied by the downloading, parsing and execution of a javascript file - over a fast connection

- -

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.

- -

같이 보기

- - diff --git "a/files/ko/web/performance/\354\244\221\354\232\224_\353\240\214\353\215\224\353\247\201_\352\262\275\353\241\234/index.html" "b/files/ko/web/performance/\354\244\221\354\232\224_\353\240\214\353\215\224\353\247\201_\352\262\275\353\241\234/index.html" deleted file mode 100644 index 0dd28ed81c..0000000000 --- "a/files/ko/web/performance/\354\244\221\354\232\224_\353\240\214\353\215\224\353\247\201_\352\262\275\353\241\234/index.html" +++ /dev/null @@ -1,60 +0,0 @@ ---- -title: 중요 렌더링 경로 -slug: Web/Performance/중요_렌더링_경로 -translation_of: Web/Performance/Critical_rendering_path ---- -

{{draft}}

- -

중요 렌더링 경로 (Critical Rendering Path)는 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킵니다. 중요 렌더링 경로는 Document Object Model (DOM), CSS Object Model (CSSOM), 렌더 트리 그리고 레이아웃을 포함합니다.

- -

도큐먼트 오브젝트 모델은 HTML을 분석함으로써 만들어집니다. HTML은 Javascript를 요청할 수 있으며, 이 경우 DOM 이 변경될 수 있습니다. HTML은 차례대로 CSS 오브젝트 모델을 만들기 위한 스타일에 대한 요청을 만들거나 포함합니다. 브라우저 엔진은 이 두가지를 결합하여 렌더 트리를 생성하며 레이아웃은 페이지의 모든 것에 대한 크기와 위치를 결정합니다. 일단 레이아웃이 결정되면 화면에 픽셀을 그립니다.

- -

중요 렌더링 경로 최적화는 첫번째 렌더링의 시간을 개선시킵니다. 중요 렌더링 경로를 이해하고, 최적화 하는 것은 뛰어난 사용자 상호작용을 보장하며 버벅거림을 피할 수 있도록 하고, 1초당 60 프레임에 리플로우와 리페인트가 발생할 수 있도록 하는데 중요합니다.

- -

CRP 이해하기

- -

웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃 그리고 화면에 픽셀 그리기를 포함합니다.

- -

웹 페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작됩니다. 서버는 응답 헤더 또는 데이터로 HTML을 반환합니다. 그리고 나서 브라우저는 HTML을 분석하고 수신된 바이츠를 DOM 트리로 변환하기 시작합니다. 브라우저는 스타일시트, 스크립트 또는 포함된 이미지 참조인 외부 자원에 대한 링크를 찾을때마다 요청을 시작합니다. 불러온 에셋을 다룰 때까지 나머지 HTML을 분석하는 작업하는 일부 요청은 중단되며 차단됩니다. 브라우저는 CSS 오브젝트 모델을 구축하는 작업이 끝날때까지 요청을 만들고 DOM을 생성하는 HTML을 계속해서 분석합니다. DOM과 CSSOM이 완료되면 브라우저는 렌더 트리를 생성하고 보여지는 컨텐츠를 위해 스타일을 계산합니다. 렌더트리가 완료된 후 모든 렌더 트리 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어집니다. 일단 완료되면 레이지는 렌더링되거나 또는 화면에 '그려집니다(painted)'.

- -

Document Object Model

- -

DOM 구성은 점진적으로 증가합니다. HTML 응답은 토큰으로, 토큰은 노드로, 노드는 DOM 트리로 변환됩니다.1개의 DOM 노드는 시작태그 토큰으로 시작해서 끝태그 토큰으로 끝납니다. 노드들은 HTML 요소에 대한 모두 연관성 있는 정보를 포함하고 있습니다. 그 정보는 토큰을 통해 설명됩니다. 노드들은 토큰의 위계서열을 기반으로 DOM 트리안에 연결됩니다. 만약 또 다른 시작태그와 끝태그의 묶음이 한 세트의 시작태그와 끝태그 사이에 있다면, 여러분은 DOM 트리의 위계서열을 정의하는 방법으로 노드 안에 노드를 가지게 됩니다.

- -

많은 수의 노드는 중요 렌더링 경로에서 다음의 이벤트를 더 오래 발생시킬 것입니다. 측정하세요! 몇 개의 추가 노드는 차이를 만들지 않지만 전염은 버벅거림을 유발할 수 있습니다.

- -

CSS Object Model

- -

DOM은 페이지의 모든 컨텐츠를 포함하고, CSSOM은 DOM을 스타일링 하기 위한 페이지의 모든 스타일 정보를 포함합니다. CSSOM은 DOM과 유사하지만 다릅니다. DOM의 구조는 점진적으로 증가하는 반면에 CSSOM은 그렇지 않습니다. CSS는 렌더링을 막습니다: 브라우저는 모든 CSS를 처리하고 수신할때까지 페이지 렌더링을 막습니다. CSS는 규칙을 덮어쓸수 있기 때문에 렌더링을 막습니다. 그러므로 CSSOM이 완료될때까지 콘텐츠를 렌더링 할 수 없습니다.

- -

CSS는 유효한 토크들은 인식하기 위해 스스로 규칙 세트를 가지고 있습니다. CSS의 C가 'Cascade(종속 또는 폭포)'라는 의미를 기억해두세요. CSS 규칙은 아래로 종속됩니다. 분석기는 토큰을 노드로 변환할때, 하위 노드가 스타일을 상속합니다. 연속적인 규칙들이 이전의 규칙들에 덮어쓰여질 수 있기 때문에, 증감 처리 기술은 HTML 처럼 CSS에 적용되지는 않습니다. CSS 개체 모델은 CSS를 분석할 때 빌드되지만 나중에 분석되 덮어쓸 스타일들은 화면에 렌더링 할 수 없기 때문에 완전히 분석될 때까지 렌더 트리를 생성하는데 사용할 수 없습니다.

- -

선택자 성능 측면에서, 덜 구체적인 선택자는 더 구체적인 선택자보다 더 빠릅니다. 예를 들어, 브라우저가 .foo 찾을때, .foo {} 는 .bar .foo {} 보다 빠릅니다. 왜냐하면 두번째 시나리오에서, .foo 가 부모 객체인 .bar 를 가지고 있는지 확인하기 위해 DOM을 거슬러 올라가기 때문입니다. 더 구체적인 태그는 브라우저에게 더 많은 작업을 요구하지만 이러한 패널티는 최적화 할 가치가 없습니다.

- -

만약 CSS 분석 시간을 측정한다면, 브라우저들이 정말 빠르다는 것에 놀랄 것입니다. 규칙이 구체적일수록 DOM 트리 안에서 더 많은 노드들은 지나야 하기 때문에 더 높은 비용이 듭니다. 그러나 추가적인 비용은 일반적으로 최소입니다. 첫번째는 측정입니다. 필요할때 최적화하세요. 특정 짓는 것은 쉬운 일이 아닙니다. CSS 측면에서, 선택자 성능 최적화와 개선은 오직 microsecond 밖에 되지 않될 것입니다. 축소화와 미디어 쿼리를 사용함으로써 지연된 CSS를 논-블로킹 요청으로 분리하는 것과 같은 CSS 최적화를 위한 다른 방법이 있습니다.

- -

Render Tree

- -

렌터 트리는 콘텐츠와 스타일 둘다 캡쳐합니다. DOM과 CSSOM 트리는 렌더 트리에 결합됩니다. 렌더 트리를 구성하기 위해 브라우저는 DOM 트리의 root에서 시작해 모든 노드는 확인하면서 어떤 CSS 규칙들을 첨부할지 결정합니다.

- -

렌더 트리는 오직 보여지는 콘텐츠만은 캡쳐합니다. (일반적으로) 헤드 섹션은 보여지는 정보를 포함하고 있지 않으므로 렌더트리 안에 포함되지 않습니다. 만약 요소에 display: none 이 적용되어 있다면, 해당 요소 또는 하위 요소는 포함되지 않습니다.

- -

Layout

- -

일단 렌더 트리가 생성되고 나면, 레이아웃은 가능해지며 화면의 크기에 의존합니다. 레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정합니다.

- -

요소의 너비는 무엇일까요? 정의에 따르면, 블럭 수준의 요소들은 그 부모 너비의 기본 너비값의 100% 입니다. 50%의 너비를 갖는 요소는 부모 요소의 절반일 것입니다. 비록 그렇게 정의되어 있지 않더라고, body 는 뷰포트 너비의 100%를 의미하는 너비 입니다. 디바이스의 너비는 레이아웃에 영향을 미칩니다.

- -

뷰포트 메타 태그는 레이아웃에 영향을 미치는 뷰포트 레이아웃의 너비로 정의합니다. 이 태그 없다면, 브라우저는 뷰포트 기본값을 사용합니다. 브라우저의 full screen 기본값은 일반적으로 960px 입니다. 기본적으로 브라우저의 full screen에서, 스마트폰의 브라우저와 같은 너비는 <meta name="Viewport" content="width=device-witdh"> 로 세팅함으로써 기본 뷰포트 너비 대신에 디바이스의 너비를 사용합니다. 디바이스 너비는 사용자가 디비이스를 가로(landscapre) 또는 세로(portrait) 모드 사이로 돌릴때마다 바뀝니다. 레이아웃은 디바이스가 회전하거나 브라우저의 사이즈가 조정될 때마다 발생합니다.

- -

레이아웃 성능은 DOM의 영향을 받습니다. 노드의 수가 많을수록 레이아웃은 더 길어지며 스크롤링 또는 다른 애니메이션들이 필요하다면 레이아웃에 쟁크(jank)를 일으키는 병목현상이 발생할 수 있습니다. 로딩 또는 방향 전환에 20ms 정도 밀릴 수 있지만 애니메이션 또는 스크롤에 쟁크(jank) 유발할 수 있습니다. 노드에 박스 모델 업데이트, 콘텐츠 대체 그리고 노드 추가와 같은 수정은 언제든지 렌더 트리를 수정할 수 있으며 레이아웃을 형성합니다.

- -

레이아웃 이벤트의 반복과 형성시간을 줄이기 위해서 일괄 업데이트 해야하고, 박스 모델 속성을 애니메이션화 하지 말아야 합니다.

- -

Paint

- -

마자믹 단계는 화면에 픽셀을 그리는 것입니다. 일단 렌더 트리가 생성되고 레이아웃나 나타나기 시작하면, 화면에 픽셀을 그릴수 있습니다. 로드시, 전체 화면을 그립니다. 그 후에는 브라우저가 필요한 최소 영역만을 다시 그리도록 최적화되어 있기 때문에 영향을 받는 영역만을 화면에 다시 그립니다. 그리는 시간은 렌터 트리에 적용되는 업데이트의 종류가 무엇있냐에 따라 달라집니다. 페인팅인 매우 빠르게 진행되는 과정이기 때문에 성능 향상에 집중해야 하는 가장 큰 영향있는 부분이 아닐 수 있지만, 애니메이션 프레임 소요시간을 측정할때, 레이아웃과 리페인트 시간을 모두 고려하는 것이 중요합니다. 각 노드에 적용된 스타일은 페인트 시간을 증가시키지만 페인트 시간을 0.001ms 증가시키는 스타일을 제거하는 것은 여러분의 최적화 비용이 매우 커지는 것을 막지 못할 수 있습니다. 첫째는 측정하는 것을 기억하고, 최적화 우선순위를 정해야할지 말지를 결정해야 합니다.

- -

Optimizing for CRP

- -

자원 로드 순서를 관리하고, 파일 사이즈를 줄이며 어떤 자원을 먼저 로드할지 정함으로써 페이지 로드 속도를 개선하세요. 성능 팁으로는 1) 자원 다운로드를 연기함으로써 중요 자원들의 수를 최소화하기 , 2) 각 요청에 대한 파일 사이즈에 따라 필수적인 요청 횟수 최적하하기, 3) 다운받을 중요 에셋의 우선순위를 정함으로써 중요 자원 불러오는 순서 최적화하고, 중요 경로 길이 최소화하기

diff --git a/files/ko/web/progressive_web_apps/introduction/index.html b/files/ko/web/progressive_web_apps/introduction/index.html new file mode 100644 index 0000000000..e253c96ce9 --- /dev/null +++ b/files/ko/web/progressive_web_apps/introduction/index.html @@ -0,0 +1,92 @@ +--- +title: 프로그레시브 웹 앱 소개 +slug: Web/Progressive_web_apps/소개 +tags: + - PWA + - js13kGames + - 소개 + - 프로그레시브 + - 프로그레시브 웹 앱 +translation_of: Web/Progressive_web_apps/Introduction +--- +
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
+ +

이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.

+ +

프로그레시브 웹 앱이 무엇인가요?

+ +

PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

+ +

예를 들어, 웹 앱은 발견이 쉽습니다 — 어플리케이션을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다.

+ +

반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있습니다.

+ +

PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다.

+ +

완전히 새로운 개념은 아닙니다 — 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 재검토되었습니다. 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있습니다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었습니다.

+ +

하지만, PWA는 웹을 훌륭하게 만드는 이미 존재하는 어떤 기능도 제거하지 않은 상태로 이 모든 것 그리고 그 이상을 제공합니다.

+ +

앱을 PWA로 만드는 것은 무엇인가요?

+ +

위에서 암시했듯이, PWA는 하나의 기술로 생성된 것이 아닙니다. 이는 일부 특정 패턴, API 및 다른 기능들을 포함하는 웹 앱을 구축하는 하나의 새로운 철학을 나타냅니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등.

+ +

게다가, 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (Lighthouse가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.

+ +

다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙입니다.

+ +
    +
  • 발견 가능, 따라서 컨텐츠를 검색 엔진을 통해 찾을 수 있습니다.
    • +
  • 설치 가능, 따라서 기기의 홈 화면에서 사용할 수 있습니다.
    • +
  • 연결 가능, 따라서 간단하게 URL을 전송해 공유할 수 있습니다.
    • +
  • 네트워크 독립적, 따라서 오프라인이나 불안한 네트워크 연결에서 동작합니다.
    • +
  • 점진적, 따라서 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있습니다.
    • +
  • 재 참여 가능(Re-engageable), 따라서 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있습니다.
    • +
  • 반응형, 따라서 모든 기기의 화면이나 브라우저에서 사용할 수 있습니다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
    • +
  • 안전, 따라서 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전합니다.
    • +
+ +

이 모든 것들을 할만한 가치가 있나요?

+ +

물론입니다! 비교적 적은 노력으로 PWA 핵심 기능들을 구현할 수 있으며, 그 이점은 거대합니다. 예를 들면:

+ +
    +
  • Service Workers 를 사용한 캐싱 덕분에 앱을 설치한 후에 로딩 시간이 줄어들어 소중한 데이터와 시간을 절약.
    • +
  • 앱 업데이트가 있을 때 변경된 컨텐츠만 업데이트 할 수 있음. 반면, 네이티브 앱의 경우, 아주 작은 수정에도 사용자가 어플리케이션 전체를 다시 다운로드하도록 강제함.
    • +
  • 네이티브 플랫폼에 보다 통합된 외관과 느낌 — 홈 화면의 앱 아이콘, 전체 화면으로 실행되는 앱, 등.
    • +
  • 시스템 알림 및 푸시 메시지를 통한 사용자의 재 참여. 참여율이 높은 사용자와 더 나은 전환율을 이끌어 냄.
    • +
+ +

PWA 라우트를 시도하고 네이티브 앱 보다 더 향상된 웹 사이트 경험을 선택하여 측정 가능한 의미있는 이득을 본 회사들의 성공 스토리가 많습니다. PWA Stats 웹 사이트는 이러한 이점을 나타내는 많은 사례 연구들을 공유합니다.

+ +

가장 잘 알려진 성공 스토리는 아마 Flipkart Lite 일 것입니다 — 2015년에 프로그레시브 웹 앱으로 사이트를 재구축해 전환율을 70% 상승시킨 인도의 가장 큰 전자 상거래 사이트입니다. AliExpress PWA 역시 새로운 사용자에 대한 전환율을 104% 상승시키는 것으로 웹이나 네이티브 앱보다 훨씬 더 나은 결과를 보였습니다. 이윤 증가 및 PWA로 전환을 위해 상대적으로 적은 양의 작업을 놓고 봤을 때, 이점은 분명합니다.

+ +

더 많은 예제는 pwa.rocks 의 목록에서 확인하시기 바랍니다. hnpwa.com 페이지는 특별히 언급할 가치가 있습니다 — 여기에는 일반적인 TodoMVC 앱 대신 다양한 프론트엔드 프레임워크의 사용을 볼 수 있는 Hacker News 웹사이트의 구현 예제가 나열되어 있습니다.

+ +

심지어 PWABuilder 웹사이트를 사용해 PWA를 온라인에서 생성할수도 있습니다.

+ +

Service worker와 푸시에 관련된 정보는 최신 사이트에서 service worker를 사용하는 예제를 모아둔 Service Worker Cookbook을 확인하시기 바랍니다.

+ +

PWA 접근은 시도해볼만한 가치가 있으며, 여러분의 앱에서 동작하는지 스스로 확인해보시기 바랍니다.

+ +

브라우저 호환성

+ +

앞서 언급했듯이, PWA는 하나의 API에 의존하지 않고, 가능한 최고의 웹 경험을 전달하기 위한 목표를 달성하기 위해 다양한 기술들을 사용합니다.

+ +

PWA를 위해 요구되는 핵심 요소는 service worker 지원입니다. 고맙게도 service worker는 현재 데스크탑 및 모바일의 모든 주요 브라우저에서 지원됩니다.

+ +

웹 앱 Manifest, 푸시, 알림, 홈 화면에 추가 기능과 같은 다른 기능들도 널리 지원되고 있습니다. 현재 Safari에서는 웹 앱 Manifest 및 홈 화면에 추가에 지원이 제한적이며 웹 푸시 알림은 지원하지 않습니다. 반면, 다른 주요 브라우저에서는 이 모든 기능들을 지원합니다.

+ +

이러한 API의 일부는 실험중이며 문서도 여전히 완성되지 않았지만, Flipkart 와 AliExpress와 같은 성공 스토리를 보면 여러분의 웹 앱에 PWA 기능의 일부를 시도하고 구현하는 것에 대해 이미 납득이 되었을것입니다.

+ +

무엇보다도 여러분은 프로그레시브 향상 규칙을 따라야 합니다 — 이러한 향상을 제공하는 기술들은 지원이 되는 경우에만 사용하고, 그렇지 않은 경우에도 여전히 기본 기능을 제공하시기 바랍니다. 이 방법으로 모든 사용자가 앱을 사용할 수 있지만, 최신 브라우저를 사용하는 사용자는 PWA 기능으로부터 더 많은 이점을 얻을 수 있습니다.

+ +

예시 어플리케이션

+ +

이 문서 시리즈에서는 js13kGames 2017 대회의 A-Frame 카테고리에 제출된 게임에 대한 정보를 나열하는 아주 간단한 웹사이트의 소스코드를 살펴볼 것입니다. 여러분은 웹 사이트의 실제 컨텐츠가 무엇인지에 대해서는 생각할 필요가 없습니다 — 중요한 점은 여러분의 프로젝트에 PWA 기능을 어떻게 사용하는지를 배우는 것입니다.

+ +

온라인 버전은 mdn.github.io/pwa-examples/js13kpwa (소스 코드도 확인하세요)에서 확인하실 수 있으며, 다음 몇 가지 문서에서 자세히 설명할 것입니다.

+ +

이제, 우리의 예제 앱의 구조에 대해 살펴볼 이 시리즈의 두 번째 파트로 이동합시다.

+ +

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

diff --git a/files/ko/web/progressive_web_apps/responsive/media_types/index.html b/files/ko/web/progressive_web_apps/responsive/media_types/index.html new file mode 100644 index 0000000000..2c9fceaca0 --- /dev/null +++ b/files/ko/web/progressive_web_apps/responsive/media_types/index.html @@ -0,0 +1,346 @@ +--- +title: 미디어 +slug: Web/CSS/시작하기/미디어 +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +

{{ CSSTutorialTOC() }}

+
+ 중요: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/21)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.
+

{{ previousPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}CSS 시작하기 안내서의 14번쨰 장. 지금까지 이번 안내서에서는 많은 부분을 Document를 어떻게 보여 줄것인지 결정하는 CSS의 속성과 변수에 관해 소개 했다. 이번에는 Stylesheet의 구조와 목적에 대해 다시 살펴 보자.

+

정보 : 미디어

+

CSS의 목적은 Document가 사용자에게 어떻게 보여질 것인가를 설정하는 것이다. 전시되는 형태는 하나 이상의 형식이 있다.

+

예를 들면, 아마도 이 페이지도 화면 표시 장치를 통해 보여질 것이다. 그러나 큰 화면용으로 프로젝터나 프린트해서 보는 경우도 있을 것이다. 이런 다양한 미디어의 경우 그 고유의 문자셋같은 특징이 있을 것이다. CSS는 document를 각각의 미디어에 표시하기 위한 다양한 방법을 제공한다.

+

미디어의 특정 타입을 정하는 규칙을 추가 하려면 {{ CSSXref("@media") }} 다음에 미디어 타입 넣고, 그 다음에 대괄호({})로 해당 규칙을 추가 하라.

+
+
+ 예제
+

웹사이트에 있는 document는 그 사이트 전체를 살펴볼수 있도록 조절 할 수 있는 영역을 제공한다.

+

마크업 언어에서는, 조정영역의 부모 element의 id가 nav-area이다. ({{ HTMLVersionInline(5) }}에서는 id 속성이 포함된 {{ HTMLElement("div") }}대신에 {{ HTMLElement("nav") }} element로 사용 할 수 있다.)

+

Document가 프린트 될 경우는 이 조정 영역이 필요 없으므로 stylesheet에서는 완전히 이 영역을 제거한다.

+ 
@media print {
+  #nav-area {display: none;}
+  }
+
+
+

일반적인 미디어 타입은 아래와 같다.

+ + + + + + + + + + + + + + + + + + + +
screen컬러 컴퓨터 표시 장치
print출력 장치
projection프로젝트 출력 장치
all그외 모든 미디어 장치(기본 설정)
+
+
+ 좀더 자세히
+

한 무리의 규칙들의 미디어 타입을 설정하는데는 다른 방법들도 있다.

+

Stylesheet가 document로 연결되어 있을때 document의 마크업 언어는 미디어 타입을 설정하는 것을 허용한다. 예를 들면, HTML내의 LINK 태그에서 media속성으로 옵션항목으로 미디어 타입을 설정 할 수 있다.

+

CSS에서 stylesheet의 앞부분에 {{ CSSXref("@import") }}로 URL로 부터 다른 stylesheet를 불러 올 수 있다. 추가적으로 미디어 타입도 사용 가능하다.

+

이와 같은 규직으로, 미디어 타입별로 다른 파일에 분리하여 관리 가능하다. 이렇게 함으로써 stylesheet를 구조화하는데 유용하게 사용한다.

+

좀더 자세한 미디어 타입에 대해서는 CSS의 사양서중 Media를 참고하라.

+

{{ cssxref("display") }}속성에 대해서 좀더 자세한 사항은 이 안내서 나중에 소개될 XML data를 참고하라.

+
+

출력

+

CSS에는 인쇄 매체나 프린터 출력을 위한 특별 지원을 한다

+

{{ cssxref("@page") }} 규칙을 통해 여백을 설정할 수 있다. 양면출력을 위해서는 @page:left와 @page:right로 각각의 여백을 개별로 설정 할 수 있다.

+

출력 매체를 위해 사용되는 단위는 인치 (in), 포인트(pt = 1/72 inch), 센티미터(cm)와 밀리미터(mm)등을 사용 할 수 있다. 글자 크기 설정과 맞추기 위해 사용하는 ems(em)과 퍼센트(%)도 사용하기에 적절하다.

+

Document의 내용중 페이지 분할을 위해서는 { cssxref("page-break-before") }}나 {{ cssxref("page-break-after") }}, {{ cssxref("page-break-inside") }}속성을 사용할 수 있다.

+
+
+ 예제
+

아래 예제는 페이지 여백 4방향 모두를 1인치로 설정한다.

+ 
@page {margin: 1in;}
+
+

 

+

아래 규칙은 모든 H1 element는 새 페이지에서 시작하도록 한다.

+ 
h1 {page-break-before: always;}
+
+
+
+
+ 좀더 자세히
+

CSS의 출판 매체 지원에 대한 사항은 CSS사양서의 Paged media를 확인 하라.

+

CSS의 다른 특징처럼 프린트 출력도 브라우저의 설정에 따라 다르다. 예를 들어 모질라 브라주저는 프린트 출력시 기본 바깥 여백과 머릿말, 꼬릿말이 지원된다. 사용자가 어떤 브라우저를 사용하는지, 그 브라우저의 설정값 또한 알수 없기 때문에 해당 페이지 출력물 결과를 알수 없다.

+
+

사용자 인터페이스

+

CSS는 컴퓨터 모니터같은 표시장치를 위한 특별한 사용자 인터페이스를 지원한다. 이 속성으로 Document를 동적으로 사용자가 사용자 인터페이스로 동작 할 수 있도록 변경한다.

+

사용자 인터페이스 장치에 대한 특별한 미디어 타입은 없다.

+

단지 5가지 설렉터가 있을 뿐이다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
설렉터선택
E{{ cssxref(":hover") }}포인터가 E로 명시된 element위에 놓일 경우
E{{ cssxref(":focus") }}키보드 포커스를 가진 E element
E{{ cssxref(":active") }}사용자 현재 동작에 개임된 E element
E{{ cssxref(":link") }}최근에 방문하지 않은 URL을 가진 Hyperlink인 E element
E{{ cssxref(":visited") }}최근에 방문한 URL을 가진 Hyperlink인 E element
+
+

주의: :visited 설렉터에서 획득한 정보는 {{ gecko("2.0") }}에만 해당된다. 좀더 자세한 사항은 Privacy and the :visited selector을 보라.

+
+

{{ cssxref("cursor") }}속성은 포인터의 모양을 설정한다. 몇몇 일반적인 모양은 다음과 같다. 브라우저에서 마우스를 아래 리스트에 각각 아이템으로 옮기면 그 모양을 확인 할 수 있다.

+ + + + + + + + + + + + + + + + + + + + + + + +
설렉터선택
pointer링크임을 나타낼때
wait프로그램이 실행중이라 입력을 받지 못하는 상태일때
progress프로그램이 작업을 수행하고 있지만 입력을 받을 수 있는 상태
default기본 상태(보통 화살표 모양)
+

{{ cssxref("outline") }}속성은 키보드 포커스를 가리키는 외곽선을 생성할때 사용한다. 그 값은 사용자가 방향을 설정할 수 없다는 것을 제외하고는 {{ cssxref("border") }}속성과 유사하다.

+

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 disabled attribute or the readonly attribute. Selectors can specify these attributes like any other attributes, by using square brackets: {{ mediawiki.external('disabled') }} or {{ mediawiki.external('readonly') }}.

+
+
+ Example
+

These rules specify styles for a button that changes dynamically as the user interacts with it:

+ 
.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;
+  }
+
+

 

+

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:

+ + + + + + +
+ + + + + + + + + + + + + + + + +
Click MeClick MeClick Me
 
disablednormalactive
+
+

 

+

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.

+
+
+
+ More details
+

For more information about user interfaces in CSS, see User interface in the CSS Specification.

+

There is an example of Mozilla's markup language for user interfaces, XUL, in Part II of this tutorial.

+
+

Action: Printing a document

+
    +
  1. Make a new HTML document, doc4.html. Copy and paste the content from here: + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <title>Print sample</title>
+    <link rel="stylesheet" href="style4.css">
+  </head>
+  <body>
+    <h1>Section A</h11>
+    <p>This is the first section...</p>
+    <h1>Section B</h1>
+    <p>This is the second section...</p>
+    <div id="print-head">
+      Heading for paged media
+    </div>
+    <div id="print-foot">
+      Page:
+    </div>
+</body>
+</html>
+
    +
    2. +
  2. Make a new stylesheet, style4.css. Copy and paste the content from here: + 
    /*** 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 */
+
    +
    3. +
  3. View this document in your browser; it uses your browser's default style.
    4. +
  4. 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. + + + + + + + +
    + + + + + + +
    + + + + + + +
    +
    + Heading for paged media
    +
    + Section A
    +
    + This is the first section...
    +
    + Page: 1
    +
    +
    +     		+ + + + + + +
    + + + + + + +
    +
    + Heading for paged media
    +
    + Section B
    +
    + This is the second section...
    +
    + Page: 2
    +
    +
    +
    +
    5. +
+ + + + + + + +
+ Challenges
Move the print-specific style rules to a separate CSS file. +

Read the {{ CSSXref("@import") }} reference page to find details of how to import the new print-specific CSS file into your style4.css stylesheet.

+

Make the headings turn blue when the mouse pointer is over them.

+
+

 See solutions to these challenges.

+

What next?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

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: JavaScript

diff --git "a/files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" "b/files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" deleted file mode 100644 index e253c96ce9..0000000000 --- "a/files/ko/web/progressive_web_apps/\354\206\214\352\260\234/index.html" +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: 프로그레시브 웹 앱 소개 -slug: Web/Progressive_web_apps/소개 -tags: - - PWA - - js13kGames - - 소개 - - 프로그레시브 - - 프로그레시브 웹 앱 -translation_of: Web/Progressive_web_apps/Introduction ---- -
{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}
- -

이 문서는 프로그레시브 웹 앱(PWA)의 소개입니다. PWA가 무엇이고 일반 웹 앱에 어떤 이점을 가져다주는지 설명합니다.

- -

프로그레시브 웹 앱이 무엇인가요?

- -

PWA는 웹과 네이티브 앱의 기능 모두의 이점을 갖도록 수 많은 특정 기술과 표준 패턴을 사용해 개발된 웹 앱입니다.

- -

예를 들어, 웹 앱은 발견이 쉽습니다 — 어플리케이션을 설치하는 것보다 웹사이트에 방문하는 것이 훨씬 쉽고 빠르며, 링크로 웹 앱을 공유할수도 있습니다.

- -

반면에, 네이티브 앱은 운영체제와 보다 잘 통합되므로 더 부드러운 사용자 경험을 제공할 수 있습니다. 네이티브 앱은 설치할 수 있으므로 오프라인에서 동작하며, 사용자는 홈 화면의 아이콘을 탭하여 브라우저를 사용하여 이동하는 것보다 선호하는 앱에 더 쉽게 접근할 수 있습니다.

- -

PWA는 이들과 동일한 이점을 즐길 수 있는 웹 앱을 생성하는 능력을 제공합니다.

- -

완전히 새로운 개념은 아닙니다 — 이런 아이디어는 과거에 다양한 접근 방법으로 웹 플랫폼상에서 여러번 재검토되었습니다. 점진적인 향상과 반응형 디자인은 이미 우리가 모바일 친화적인 웹사이트를 구축할 수 있게 해주고 있습니다. 오프라인에서 동작하는 것과 앱을 설치하는 것은 몇 년 전 Firefox OS 생태계에서 이미 가능했었습니다.

- -

하지만, PWA는 웹을 훌륭하게 만드는 이미 존재하는 어떤 기능도 제거하지 않은 상태로 이 모든 것 그리고 그 이상을 제공합니다.

- -

앱을 PWA로 만드는 것은 무엇인가요?

- -

위에서 암시했듯이, PWA는 하나의 기술로 생성된 것이 아닙니다. 이는 일부 특정 패턴, API 및 다른 기능들을 포함하는 웹 앱을 구축하는 하나의 새로운 철학을 나타냅니다. 첫눈에 웹 앱이 PWA인이 아닌지 구분하기는 쉽지 않습니다. 앱이 특정 요구 사항을 만족하거나 다음 기능들이 구현되었을 때 PWA라고 볼 수 있습니다: 오프라인에서 동작, 설치가 가능, 쉬운 동기화, 푸시 알림, 등.

- -

게다가, 앱의 완성도를 퍼센트로 측정하는 도구들도 있습니다. (Lighthouse가 현재 가장 유명합니다.) 다양한 기술적 이점을 구현함으로써, 앱을 더 점진적이게 만들 수 있고, 더 높은 Lighthouse 점수를 받을 수 있습니다. 하지만 이는 대략적인 지표일뿐입니다.

- -

다음은 웹 앱을 PWA로 식별되기 위해 확인해야 하는 몇 가지 핵심 원칙입니다.

- -
    -
  • 발견 가능, 따라서 컨텐츠를 검색 엔진을 통해 찾을 수 있습니다.
    • -
  • 설치 가능, 따라서 기기의 홈 화면에서 사용할 수 있습니다.
    • -
  • 연결 가능, 따라서 간단하게 URL을 전송해 공유할 수 있습니다.
    • -
  • 네트워크 독립적, 따라서 오프라인이나 불안한 네트워크 연결에서 동작합니다.
    • -
  • 점진적, 따라서 최신 브라우저의 모든 기능은 사용할 수 없지만 이전 브라우저의 기본 기능은 여전히 사용할 수 있습니다.
    • -
  • 재 참여 가능(Re-engageable), 따라서 새 컨텐츠가 사용 가능할 때마다 알림을 보낼 수 있습니다.
    • -
  • 반응형, 따라서 모든 기기의 화면이나 브라우저에서 사용할 수 있습니다 — 모바일 폰, 태블릿, 노트북, TV, 냉장고, 등.
    • -
  • 안전, 따라서 여러분과 앱 사이의 연결이 여러분의 민감한 데이터에 접근하려는 모든 제3자로부터 안전합니다.
    • -
- -

이 모든 것들을 할만한 가치가 있나요?

- -

물론입니다! 비교적 적은 노력으로 PWA 핵심 기능들을 구현할 수 있으며, 그 이점은 거대합니다. 예를 들면:

- -
    -
  • Service Workers 를 사용한 캐싱 덕분에 앱을 설치한 후에 로딩 시간이 줄어들어 소중한 데이터와 시간을 절약.
    • -
  • 앱 업데이트가 있을 때 변경된 컨텐츠만 업데이트 할 수 있음. 반면, 네이티브 앱의 경우, 아주 작은 수정에도 사용자가 어플리케이션 전체를 다시 다운로드하도록 강제함.
    • -
  • 네이티브 플랫폼에 보다 통합된 외관과 느낌 — 홈 화면의 앱 아이콘, 전체 화면으로 실행되는 앱, 등.
    • -
  • 시스템 알림 및 푸시 메시지를 통한 사용자의 재 참여. 참여율이 높은 사용자와 더 나은 전환율을 이끌어 냄.
    • -
- -

PWA 라우트를 시도하고 네이티브 앱 보다 더 향상된 웹 사이트 경험을 선택하여 측정 가능한 의미있는 이득을 본 회사들의 성공 스토리가 많습니다. PWA Stats 웹 사이트는 이러한 이점을 나타내는 많은 사례 연구들을 공유합니다.

- -

가장 잘 알려진 성공 스토리는 아마 Flipkart Lite 일 것입니다 — 2015년에 프로그레시브 웹 앱으로 사이트를 재구축해 전환율을 70% 상승시킨 인도의 가장 큰 전자 상거래 사이트입니다. AliExpress PWA 역시 새로운 사용자에 대한 전환율을 104% 상승시키는 것으로 웹이나 네이티브 앱보다 훨씬 더 나은 결과를 보였습니다. 이윤 증가 및 PWA로 전환을 위해 상대적으로 적은 양의 작업을 놓고 봤을 때, 이점은 분명합니다.

- -

더 많은 예제는 pwa.rocks 의 목록에서 확인하시기 바랍니다. hnpwa.com 페이지는 특별히 언급할 가치가 있습니다 — 여기에는 일반적인 TodoMVC 앱 대신 다양한 프론트엔드 프레임워크의 사용을 볼 수 있는 Hacker News 웹사이트의 구현 예제가 나열되어 있습니다.

- -

심지어 PWABuilder 웹사이트를 사용해 PWA를 온라인에서 생성할수도 있습니다.

- -

Service worker와 푸시에 관련된 정보는 최신 사이트에서 service worker를 사용하는 예제를 모아둔 Service Worker Cookbook을 확인하시기 바랍니다.

- -

PWA 접근은 시도해볼만한 가치가 있으며, 여러분의 앱에서 동작하는지 스스로 확인해보시기 바랍니다.

- -

브라우저 호환성

- -

앞서 언급했듯이, PWA는 하나의 API에 의존하지 않고, 가능한 최고의 웹 경험을 전달하기 위한 목표를 달성하기 위해 다양한 기술들을 사용합니다.

- -

PWA를 위해 요구되는 핵심 요소는 service worker 지원입니다. 고맙게도 service worker는 현재 데스크탑 및 모바일의 모든 주요 브라우저에서 지원됩니다.

- -

웹 앱 Manifest, 푸시, 알림, 홈 화면에 추가 기능과 같은 다른 기능들도 널리 지원되고 있습니다. 현재 Safari에서는 웹 앱 Manifest 및 홈 화면에 추가에 지원이 제한적이며 웹 푸시 알림은 지원하지 않습니다. 반면, 다른 주요 브라우저에서는 이 모든 기능들을 지원합니다.

- -

이러한 API의 일부는 실험중이며 문서도 여전히 완성되지 않았지만, Flipkart 와 AliExpress와 같은 성공 스토리를 보면 여러분의 웹 앱에 PWA 기능의 일부를 시도하고 구현하는 것에 대해 이미 납득이 되었을것입니다.

- -

무엇보다도 여러분은 프로그레시브 향상 규칙을 따라야 합니다 — 이러한 향상을 제공하는 기술들은 지원이 되는 경우에만 사용하고, 그렇지 않은 경우에도 여전히 기본 기능을 제공하시기 바랍니다. 이 방법으로 모든 사용자가 앱을 사용할 수 있지만, 최신 브라우저를 사용하는 사용자는 PWA 기능으로부터 더 많은 이점을 얻을 수 있습니다.

- -

예시 어플리케이션

- -

이 문서 시리즈에서는 js13kGames 2017 대회의 A-Frame 카테고리에 제출된 게임에 대한 정보를 나열하는 아주 간단한 웹사이트의 소스코드를 살펴볼 것입니다. 여러분은 웹 사이트의 실제 컨텐츠가 무엇인지에 대해서는 생각할 필요가 없습니다 — 중요한 점은 여러분의 프로젝트에 PWA 기능을 어떻게 사용하는지를 배우는 것입니다.

- -

온라인 버전은 mdn.github.io/pwa-examples/js13kpwa (소스 코드도 확인하세요)에서 확인하실 수 있으며, 다음 몇 가지 문서에서 자세히 설명할 것입니다.

- -

이제, 우리의 예제 앱의 구조에 대해 살펴볼 이 시리즈의 두 번째 파트로 이동합시다.

- -

{{NextMenu("Web/Apps/Progressive/App_structure", "Web/Apps/Progressive")}}

diff --git a/files/ko/web/reference/api/index.html b/files/ko/web/reference/api/index.html new file mode 100644 index 0000000000..363fa9d3e9 --- /dev/null +++ b/files/ko/web/reference/api/index.html @@ -0,0 +1,65 @@ +--- +title: Web API 설명집 +slug: Web/참조/API +tags: + - API + - 대문 + - 웹 + - 편람 +translation_of: Web/Reference/API +--- +

여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.

+ +

모든 API에 대한 각각의 인터페이스는 색인에 열거돼 있습니다.

+ +

또한 이벤트 레퍼런스에 이용가능한 모든 이벤트 목록도 있습니다.

+ +
+
+
+
문서 객체 모델(Document Object Model)
+
DOM은 문서를 조회하거나 수정할 수 있는 API입니다. 문서의 {{domxref("Node")}} 및 {{domxref("Element")}}를 조작할 수 있습니다. HTML, XML, SVG는 DOM을 확장함으로써 각각의 실제적인 요소(element)를 조작합니다.
+
디바이스 API
+
본 API는 웹 페이지 및 애플리케이션에서 사용할 수 있는 다양한 하드웨어 기능을 조작합니다. 예: 주변 조명 센서 API, 배터리 상태 API, 지리적 위치 API, 포인터 잠금 API, 근접 API, 디바이스 방향성 API, 화면 방향성 API, 진동 API.
+
커뮤니케이션 API
+
본 API는 웹 페이지 및 애플리케이션에서 다른 페이지나 기기와 통신할 수 있습니다. 예: 네트워크 정보 API, 웹 알림, 단순 푸시 API.
+
데이터 관리 API
+
본 API는 사용자 데이터를 보관하고 관리할 수 있습니다. 예: FileHandle API, IndexedDB.
+
+ +

이러한 API는 어떠한 웹 사이트나 앱에서도 사용할 수 있지만 한정 권한 및 공인 애플리케이션에서는 더 강력한 Mozilla API 셋을 사용하실 수 있습니다.

+ +
+
한정 권한 API
+
한정 권한 애플리케이션은 설치 방식 앱으로서 사용자가 특정 권리를 허용한 것입니다. 한정 권한 API로는 TCP 소켓 API, 주소록 API, 디바이스 스토리지 API, 브라우저 API 등이 있습니다.
+
공인 API
+
공인된 애플리케이션은 파이어폭스 OS와 같은 운영체제에 중요한 조작을 수행하는 저층(low-level) 애플리케이션입니다. 한정 권한이 낮은 애플리케이션은 Web Activities를 사용하여 이러한 애플리케이션과 소통합니다. 공인 API로는 블루투스 API, 모바일 연결 API, 네트워크 상태 API, 전화 기능,WebSMS, 와이파이 정보 API, 카메라 API, 전원 관리 API, 설정 API, 대기 API,사용 권한 API, 시간/시계 API 등이 있습니다.
+
+
+ +
+

커뮤니티

+ +

저희 메일링 리스트나 뉴스그룹를 통해 Web API 커뮤니티에 참여하세요.

+ + + +

IRC에서 #webapi 채널의 실시간 토론도 꼭 참여하세요.

+ + + +

다음 주제도 확인해보세요.

+ + +
+
+ +

 

diff --git a/files/ko/web/reference/index.html b/files/ko/web/reference/index.html new file mode 100644 index 0000000000..f8d1a1dc35 --- /dev/null +++ b/files/ko/web/reference/index.html @@ -0,0 +1,30 @@ +--- +title: 웹 기술 문서 목록 +slug: Web/참조 +tags: + - Landing + - Reference + - Web +translation_of: Web/Reference +--- +

{{draft()}}
+ 오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.
+ 아래에서 각각의 참조 자료에 대한 링크를 찾아볼 수 있습니다.

+ +

웹 기술들

+ +

여러분에게 웹과 함께 시작하기를 추천하지만, 필수는 아닙니다.

+ +
+
HTML — Structuring the web
+
하이퍼텍스트 마크업언어(HyperText Markup Language)는 의미론적으로 웹 페이지의 콘텐츠(마크업)를 잘 구조화된 형식으로 의미론적으로 정의하고 표현하는데 사용됩니다. HTML은 HTML 요소(HTML elements)라고 불리는 불록으로 구성된 구조화된 문서를 작성하는 방법을 제공합니다. HTML요소는 태그로 구분되며, 꺽쇠괄호(<>)를 사용하여 표현합니다. 일부는 페이지에 직접 내용을 소개하고, 다른 일부는 문서 텍스트에 대한 정보를 제공하고, 다른 태그는 하위 요소로 포함할 수 있습니다. 분명히, 브라우저는 페이지 내용을 해석하는데 사용하기 때문에, 그대로 문서에 보여주지 않습니다.
+
+ HTML 소개| HTML 배우기 | HTML5 | 개발자 가이드 | HTML 요소 레퍼런스 | HTML 참조
+
CSS — Styling the web
+
Cascading Style Sheets 는 웹 컨텐츠의 모양을 꾸미는데 사용합니다.
+
+ CSS 소개 | CSS 시작하기 | CSS 배우기 | CSS3 | 개발자 가이드 | 일반적인 CSS 질문들 | CSS 참조
+
JavaScript — Dynamic client-side scripting
+
JavaScript 프로그래밍 언어는 사용자와의 대화식 이용 및 그외 동적 기능을 웹 사이트에 추가하는데 사용됩니다.
+
자바스크립트 배우기 | 개발자 가이드 | 자바스크립트 참조
+
diff --git "a/files/ko/web/security/\354\240\225\353\263\264_\353\263\264\354\225\210_\352\270\260\353\263\270/index.html" "b/files/ko/web/security/\354\240\225\353\263\264_\353\263\264\354\225\210_\352\270\260\353\263\270/index.html" deleted file mode 100644 index 48eeaed961..0000000000 --- "a/files/ko/web/security/\354\240\225\353\263\264_\353\263\264\354\225\210_\352\270\260\353\263\270/index.html" +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Information Security Basics -slug: Web/Security/정보_보안_기본 -translation_of: Web/Security/Information_Security_Basics ---- -

 정보 보안에 대한 기본적인 이해는 불안전하거나 취약점으로 인해 생긴 약점이 악의적인 이유로 악용되지 않게 당신을 도와줄 것입니다. 이 기사는 당신이 알아야 할 것을 배우는데 도움을 줄 것 입니다. 이 정보를 이용하면, 웹 개발주기 및 콘텐츠 배포를 넘어 보안의 역할과 중요성을 알게될 것입니다.

- -
-
신뢰성, 무결성, 가용성
-
보안을 이해하기 위해 필수적이고 기본적인 보안의 목적에 대해 설명합니다. 
-
취약점
-
취약점의 주요 카테고리를 정의하고, 모든 소프트웨어에 있는 취약점에 대해서 논의합니다. 
-
위협
-
주요한 위협의 개념에 대해 간단히 소개합니다.
-
보안 제어
-
보안 제어의 주요 카테고리를 정의하고, 잠재적인 단점에 대해서 논의합니다. 
-
TCP/IP 보안
-
SSL에 대한 보안 고려 사항에 초점을 맞춘 TCP / IP 모델의 개요.
-
- -

참고

- - diff --git a/files/ko/web/svg/element/rect/index.html b/files/ko/web/svg/element/rect/index.html new file mode 100644 index 0000000000..90a3d08d24 --- /dev/null +++ b/files/ko/web/svg/element/rect/index.html @@ -0,0 +1,95 @@ +--- +title: +slug: Web/SVG/Element/사각형 +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

<rect> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다. 또한 모서리가 둥근 사각형을 만들 수 있다.

+ +
+ + +
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simple rect element -->
+  <rect x="0" y="0" width="100" height="100" />
+
+  <!-- Rounded corner rect element -->
+  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
+</svg>
+ +

{{EmbedLiveSample('Example', 100, '100%')}}

+
+ +

컨택스트 사용해보기

+ + + + + + + + + + + + + + + + +
카테고리기본 도형 요소, 그래픽 요소, 모형 요소
허용 된 콘텐츠Any number of the following elements, in any order:
+ Animation elements »
+ Descriptive elements »
규범 문서SVG 1.1 (2nd Edition)
+ +

Example

+ +

간단한 rect 사용하기

+ +

» rect-1.svg

+ +

라운드 코너와 rect 사용하기

+ +

» rect-2.svg

+ +

속성

+ +

전역 속성

+ + + +

지정 속성

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("rx") }}
    • +
  • {{ SVGAttr("ry") }}
    • +
+ +

DOM Interface

+ +

This element implements the SVGRectElement interface.

+ +

Browser compatibility

+ +

{{Compat("svg.elements.rect")}}

+ +

See also

+ +
    +
  • {{ SVGElement("path") }}
    • +
diff --git "a/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" "b/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" deleted file mode 100644 index 90a3d08d24..0000000000 --- "a/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: -slug: Web/SVG/Element/사각형 -translation_of: Web/SVG/Element/rect ---- -
{{SVGRef}}
- -

<rect> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다. 또한 모서리가 둥근 사각형을 만들 수 있다.

- -
- - -
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
-  <!-- Simple rect element -->
-  <rect x="0" y="0" width="100" height="100" />
-
-  <!-- Rounded corner rect element -->
-  <rect x="120" y="0" width="100" height="100" rx="15" ry="15" />
-</svg>
- -

{{EmbedLiveSample('Example', 100, '100%')}}

-
- -

컨택스트 사용해보기

- - - - - - - - - - - - - - - - -
카테고리기본 도형 요소, 그래픽 요소, 모형 요소
허용 된 콘텐츠Any number of the following elements, in any order:
- Animation elements »
- Descriptive elements »
규범 문서SVG 1.1 (2nd Edition)
- -

Example

- -

간단한 rect 사용하기

- -

» rect-1.svg

- -

라운드 코너와 rect 사용하기

- -

» rect-2.svg

- -

속성

- -

전역 속성

- - - -

지정 속성

- -
    -
  • {{ SVGAttr("x") }}
    • -
  • {{ SVGAttr("y") }}
    • -
  • {{ SVGAttr("width") }}
    • -
  • {{ SVGAttr("height") }}
    • -
  • {{ SVGAttr("rx") }}
    • -
  • {{ SVGAttr("ry") }}
    • -
- -

DOM Interface

- -

This element implements the SVGRectElement interface.

- -

Browser compatibility

- -

{{Compat("svg.elements.rect")}}

- -

See also

- -
    -
  • {{ SVGElement("path") }}
    • -
diff --git a/files/ko/web/svg/svg_1.1_support_in_firefox/index.html b/files/ko/web/svg/svg_1.1_support_in_firefox/index.html new file mode 100644 index 0000000000..f8c31a2a8c --- /dev/null +++ b/files/ko/web/svg/svg_1.1_support_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 +--- +

Firefox 2는 더욱 폭넓은 Scalable Vector Graphics (SVG) 기능 구현을 위해서 계속해서 향상시켜 나가고 있습니다. 많은 스펙과 버그 수정들이 포함되었지만 Firefox 1.5이후 새로이 추가된 유일한 특징이 바로 <textPath>입니다. -- 아래 참조.

+

Firefox SVG는 SVG 1.1의 부분집합이지만 그렇다고 공식 프로필(Tiny, Basic, Full)들중 어느 것도 아닙니다. 각 내용들과 그것들이 Firefox 2에서 구현되었는지 아닌지에 대한 전체 내용은 문서의 마지막에서 찾을 수 있습니다. 문서의 나머지 부분은 우리의 구현상 제약사항들에 대한 정보를 제공할 것입니다.

+

우리들의 구현의 특이한 점들이 컨텐츠를 개발함에 있어서 번거로울 수도 있다는 것을 알고 있습니다. 하지만 커다란 스펙의 완전한 구현이 될 때까지 여러분의 인내를 부탁드립니다.

+

이 문서를 읽을때 이들 구현들의 세부사항들이 언제 바뀔지 궁금해할지도 모릅니다. 불행히도 현재 로드맵에 따르면 Gecko의 다음 버전에 기반한 Firefox의 공식 출시일이 꽤 나중이 되겠지만 2007년 1/4분기라고 나와있습니다. 그러나 새로운 기능을 시험해보고 싶다면 현재 개발중인 nightly builds를 사용해볼 수 있습니다.

+

성능

+

Firefox가 출시하는 모든 플랫폼은 같은 렌더링 백엔드 cairo를 사용합니다. 그래서 이들 간에 성능에 관한 특징은 일반적으로 유사할 것입니다. Linux에서의 성능은 예측하기가 가장 힘든데 이는 다양한 X서버마다 RENDER 확장의 구현이 다양하기 때문입니다.

+

Windows에서 SVG 렌더링은 다른 플랫폼상에서 보다도 상당히 빠릅니다.

+

좌표 범위

+

당신의 컨텐츠가 상당히 넓은 범위의 좌표를 가지는 구조를 가지고 있다면 cairo가 내부적으로 계산할 때 수를 16.16비트의 고정 소수점 표현 방식을 사용하기 때문에 발생할 수 있는 문제점들에 대해서 주의 깊게 고려해야 합니다. Cairo는 rasterization하기 전에 primitives들에 대한 클리핑을 하지 않기 때문에 변환과정 후 최종적으로 -32678에서 32677의 범위를 벗어나는 좌표들에 대해서는 렌더링 오류나 아주 느린 성능을 보여주기도 합니다.

+

Windows 98에서의 Text

+

안타깝게도 윈도우즈에서 cairo를 렌더링 엔진으로 사용한다면 Windows 98에서 텍스트 렌더링이 되지않는 버그가 있다. 사실, 그것보다 더 심각한 문제가 있다 : SVG 컨텐츠를 렌더링하는 도중에 텍스트를 만나면 모든 그리기 기능이 정지되어버리는 것이다.

+

폰트 선택

+

CSS에 익숙하다면 특정 폰트에서 들어있지 않은 기호들의 경우 폰트 속성에서 예비 폰트들을 지정할수 있다는 것을 알고 있을 것입니다. 현재 SVG 렌더링 백엔드는 단지 지정된 첫번째 폰트를 사용하도록 시도하며 만약 그 폰트가 없다면 플랫폼의 폰트를 사용하게 됩니다. 예비 폰트는 사용되지 않습니다; 그래서 예를 들면 font-family="Arial,LucidaSansUnicode" 이 코드는 Arial 폰트를 사용할 수 없는 경우 LucidaSansUnicode가 사용되게끔 하는 것은 아닙니다.

+

인쇄

+

아쉽지만 현재 인쇄는 SVG의 벡터 속성을 이용해서 매우 선명하게 출력해내도록 하는 부분은 완료되지 않았습니다. 하지만 화면 해상도정도로 그려져서 그 이미지처럼 출력됩니다.

+

Windows상에서 출력했을 때 폰트의 크기는 SVG에서 지정된 것보다도 훨씬 크게 출력됩니다.

+

그룹 opacity

+

그룹 opacity 속성인 opacity는 SVG 컨테이너 객체들을 부분적으로는 투명한 레이어로 다루어질 수 있도록 해주며, fill-opacity나 stroke-opacity들과는 독립적인 속성입니다. 현재 opacity의 구현은 꽤 느려서, 참으면서 사용을 해야할 겁니다. fill-opacity와 stroke-opacity는 훨씬 빠르며 컨텐츠에 따라서 같은 결과를 만들어 낼 수도 있습니다.

+

그룹 opacity는 현재 <g>에만 구현되어 있으며 <text>나 <svg>는 구현되어 있지 않습니다.

+

폰트 기울이기

+

Microsoft Windows나 Mac OSX 플랫폼상에서는 문장의 기울였을때 내부의 채워짐이 정확히 일치하지 않습니다. 이 오차는 보통 매우 작은데 약간 더 기울이거나 함으로써 해결할 수 있습니다. 이 오차에 대한 예입니다:

+

그림:그림-text-fill-stroke.png

+

<image>

+

<image>는 Firefox 1.5의 SVG 이미지들에는 지원되지 않습니다; 대신에 Firefox에서 사용되는 유일한 raster 이미지 포맷입니다.

+

<image>의 모든 인스터스들은 사용되는 이미지와는 별도의 복사본을 가지는데 이는 만약 컨텐츠내에 아이콘과 같은 이미지에 대해 다수의 복사본을 사용한다면 새겨두어야 할 부분입니다. 안타깝게도 이 경우에 <image>의 <use>는 또 다른 다른 복사본으로 간주합니다.

+

덧붙여, Firefox 1.5에서는 SVG에서 다수의 raster 이미지를 사용하면 성능히 심각하게 떨어질 수 있습니다.

+

Events

+

We support the SVG event attributes with the exception of onfocusin, onfocusout, and onactivate.

+

Our onload handling is currently somewhat nonstandard, but hopefully not in a way that hurts its use. While the code specified by the onload attribute is called for each element, an SVGLoad event is only fired for the root <svg> 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 onload code. Such methods are getBBox, getScreenCTM, etc.

+

We do not support the Adobe specific key events (onkeydown, onkeyup).

+

Interoperability

+

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 SVG Authoring Guidelines explains the common problems.

+

SVG usage situations

+

Firefox 1.5 handles SVG as entire documents or when referenced by embed, object, or iframe. It cannot currently be used as source for an HTML or XHTML img element or for CSS properties that take an image reference.

+

Animation

+

Firefox 1.5 does not implement declarative animation, but does support dynamic scripting. Doug Shepers has used this to create SmilScript, a small Javascript library that implements a subset of SVG's declarative animation.

+

Bugs fixed in Firefox 2

+

Firefox 2 fixes some bugs in its SVG implementation. This section provides a quick overview of the most interesting ones.

+
    +
  • A problem filling and stroking text in which the drawing position isn't reset correctly between the two operations has been fixed (bug 333615).
    • +
+
    +
  • Radial gradients now properly clamp the fx and fy attributes to ensure that they're within the circumference of a circle (bug 330682).
    • +
+
    +
  • Text spans' and text elements' lengths can now be computed using their getComputedTextLength() methods, which improves compatibility with certain web sites (bugs 311031 and 264380).
    • +
+
    +
  • <tspan> elements now properly support the dx and dy attributes, and work if the x and y attributes aren't specified (bug 311063).
    • +
+
    +
  • Improved invalidation logic on redraws, which prevents dropped pixels in certain cases (bug 312269).
    • +
+
    +
  • Fixed a bug that prevented events from being handled properly for objects exposed by the clip path of another object (bug 315861).
    • +
+
    +
  • Fixed a bug that would crash if a <path> element had a d attribute with an empty string (bug 318379).
    • +
+
    +
  • The overflow attribute now works for the marker element, using the syntax overflow="visible", which did not previously work correctly (bug 320623).
    • +
+
    +
  • You can now access the <style> attribute of marker elements without throwing an exception (bug 323589).
    • +
+
    +
  • You can now use percent values for the radius of a radial gradient (bug 323669).
    • +
+
    +
  • The documentElement.createSVGAngle() method is now implemented (bug 327437).
    • +
+
    +
  • Making a <stop> element a child of another <stop> element no longer asserts (bug 328137).
    • +
+
    +
  • Changes to the height and width of markers, as well as to the orientation of the marker, now work (bug 325728).
    • +
+
    +
  • Font sizes when printing on Windows are no longer much larger than specified for SVG (bug 314707).
    • +
+

Element implementation status

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ElementNotes
Structure Module
svg +
    +
  • Implemented.
    • +
  • currentScale and currentTranslate DOM attributes are implemented, but there is no pan and zoom user interface.
    • +
  • SVGSVGElement +
      +
    • Unimplemented attributes: contentScriptType, contentStyleType, viewport, useCurrentView, currentView
      • +
    • Unimplemented bindings: pauseAnimations, unpauseAnimations, animationsPaused, getCurrentTime, setCurrentTime, getIntersectionList, getEnclosureList, checkIntersection, checkEnclosure, deselectAll, createSVGAngle, getElementById
      • +
    +
    • +
+
g +
    +
  • Implemented.
    • +
+
defs +
    +
  • Implemented.
    • +
+
desc +
    +
  • Implemented.
    • +
  • Only stored in the DOM, no user interface.</td>
    • +
+
title +
    +
  • Implemented.
    • +
+
metadata +
    +
  • Implemented.
    • +
  • Only stored in the DOM, no user interface.</td>
    • +
+
symbol +
    +
  • Implemented.
    • +
+
use +
    +
  • Implemented.
    • +
  • Only works for internal document references (bug 269482).
    • +
  • Doesn't completely follow <svg:use> cascading rules (bug 265894).
    • +
  • Doesn't deliver events to a SVGElementInstance tree (bug 265895).
    • +
+
Conditional Processing Module
switch +
    +
  • Implemented.
    • +
+
Image Module
image +
    +
  • Implemented.
    • +
  • Only works for raster images (bug 272288).
    • +
+
Style Module
style +
    +
  • Implemented.
    • +
+
Shape Module
path +
    +
  • Implemented.
    • +
  • SVGPathElement Interface +
      +
    • Unimplemented attributes: pathLength, normalizedPathSegList, animatedPathSegList, animatedNormalizedPathSegList
      • +
    • Unimplemented bindings: getTotalLength, getPointAtLength, getPathSegAtLength
      • +
    +
    • +
  • SVGPathSegList Interface +
      +
    • Unimplemented bindings: replaceItem()
      • +
    +
    • +
+
rect +
    +
  • Implemented.
    • +
+
circle +
    +
  • Implemented.
    • +
+
line +
    +
  • Implemented.
    • +
+
ellipse +
    +
  • Implemented.
    • +
+
polyline +
    +
  • Implemented.
    • +
+
polygon +
    +
  • Implemented.
    • +
+
Text Module
text +
    +
  • Implemented.
    • +
  • SVGTextElement +
      +
    • Unimplemented attributes: rotate, textLength, lengthAdjust
      • +
    • Unimplemented bindings: getNumberOfChars, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    • Bindings not functional at onload time: getExtentOfChar
      • +
    +
    • +
+
tspan +
    +
  • Implemented.
    • +
  • SVGTSpanElement +
      +
    • Unimplemented attributes: rotate, textLength, lengthAdjust
      • +
    • Unimplemented bindings: getNumberOfChars, getComputedTextLength, getSubStringLength, getStartPositionOfChar, getEndPositionOfChar, getExtentOfChar, getRotationOfChar, getCharNumAtPosition, selectSubString
      • +
    +
    • +
+
tref +
    +
  • Not implemented.
    • +
+
textPath +
    +
  • Implemented in Firefox 2.
    • +
  • Unimplemented attributes: method, spacing, textLength, lengthAdjust
    • +
+
altGlyph +
    +
  • Not implemented.
    • +
+
altGlyphDef +
    +
  • Not implemented.
    • +
+
altGlyphItem +
    +
  • Not implemented.
    • +
+
glyphRef +
    +
  • Not implemented.
    • +
+
Marker Module
marker +
    +
  • Implemented.
    • +
+
Color Profile Module
color-profile +
    +
  • Not implemented.
    • +
+
Gradient Module
linearGradient +
    +
  • Implemented.
    • +
+
radialGradient +
    +
  • Implemented.
    • +
+
stop +
    +
  • Implemented.
    • +
+
Pattern Module
pattern +
    +
  • Not implemented.
    • +
+
Clip Module
clipPath +
    +
  • Implemented.
    • +
  • Won't handle clip paths with have elements with different clip-rule properties or that reference other clipPaths. (bug 267224).
    • +
+
Mask Module
mask +
    +
  • Not implemented.
    • +
+
Filter Module
filter +
    +
  • Not implemented.
    • +
+
feBlend +
    +
  • Not implemented.
    • +
+
feColorMatrix +
    +
  • Not implemented.
    • +
+
feComponentTransfer +
    +
  • Not implemented.
    • +
+
feComposite +
    +
  • Not implemented.
    • +
+
feConvolveMatrix +
    +
  • Not implemented.
    • +
+
feDiffuseLighting +
    +
  • Not implemented.
    • +
+
feDisplacementMap +
    +
  • Not implemented.
    • +
+
feFlood +
    +
  • Not implemented.
    • +
+
feGaussianBlur +
    +
  • Not implemented.
    • +
+
feImage +
    +
  • Not implemented.
    • +
+
feMerge +
    +
  • Not implemented.
    • +
+
feMergeNode +
    +
  • Not implemented.
    • +
+
feMorphology +
    +
  • Not implemented.
    • +
+
feOffset +
    +
  • Not implemented.
    • +
+
feSpecularLighting +
    +
  • Not implemented.
    • +
+
feTile +
    +
  • Not implemented.
    • +
+
feTurbulence +
    +
  • Not implemented.
    • +
+
feDistantLight +
    +
  • Not implemented.
    • +
+
fePointLight +
    +
  • Not implemented.
    • +
+
feSpotLight +
    +
  • Not implemented.
    • +
+
feFuncR +
    +
  • Not implemented.
    • +
+
feFuncG +
    +
  • Not implemented.
    • +
+
feFuncB +
    +
  • Not implemented.
    • +
+
feFuncA +
    +
  • Not implemented.
    • +
+
Cursor Module
cursor +
    +
  • Not implemented.
    • +
+
Hyperlinking Module
a +
    +
  • Implemented as an XBL binding - object is not of type SVGAElement.
    • +
  • Only xlink:href, xlink:show, and xlink:target (as of Firefox 2) attributes implemented.
    • +
+
View Module
view +
    +
  • Not implemented.
    • +
+
Scripting Module
script +
    +
  • Implemented.
    • +
+
Animation Module
animate +
    +
  • Not implemented.
    • +
+
set +
    +
  • Not implemented.
    • +
+
animateMotion +
    +
  • Not implemented.
    • +
+
animateTransform +
    +
  • Not implemented.
    • +
+
animateColor +
    +
  • Not implemented.
    • +
+
mpath +
    +
  • Not implemented.
    • +
+
Font Module
font +
    +
  • Not implemented.
    • +
+
font-face +
    +
  • Not implemented.
    • +
+
glyph +
    +
  • Not implemented.
    • +
+
missing-glyph +
    +
  • Not implemented.
    • +
+
hkern +
    +
  • Not implemented.
    • +
+
vkern +
    +
  • Not implemented.
    • +
+
font-face-src +
    +
  • Not implemented.
    • +
+
font-face-uri +
    +
  • Not implemented.
    • +
+
font-face-format +
    +
  • Not implemented.
    • +
+
font-face-name +
    +
  • Not implemented.
    • +
+
definition-src +
    +
  • Not implemented.
    • +
+
Extensibility Module
foreignObject +
    +
  • Implemented, but not built.
    • +
+
+

{{ languages( { "fr": "fr/SVG_dans_Firefox_1.5", "ja": "ja/SVG_in_Firefox_1.5", "pl": "pl/SVG_w_Firefoksie" } ) }}

diff --git a/files/ko/web/svg/tutorial/basic_shapes/index.html b/files/ko/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..8169e4c890 --- /dev/null +++ b/files/ko/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,141 @@ +--- +title: 기본 도형 +slug: Web/SVG/Tutorial/기본_도형 +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

+ +

SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.

+ +

기본적인 도형들

+ +

도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
+  <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"/>
+
+  <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"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+ +
Note: stroke, stroke-width 그리고 fill 속성들은 튜토리얼 뒤쪽에서 설명한다.
+ +

Rectangles 사각형

+ +

rect 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와  ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.

+ +
<rect x="10" y="10" width="30" height="30"/>
+<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+ +
+
x
+
사각형의 좌측 상단의 x 값을 의미한다.
+
y
+
사각형의 좌측 상단의 y 값을 의미한다.
+
width
+
사각형의 폭을 나타낸다.
+
height
+
사각형의 높이를 나타낸다. 
+
rx
+
사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.
+
ry
+
사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.
+
+ +

Circle 원

+ +

당신이 추측한 것 처럼, circle 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.

+ +
<circle cx="25" cy="75" r="20"/>
+ +
+
r
+
원의 반지름을 의미한다.
+
cx
+
원의 중심 중 x 값을 의미한다.
+
cy
+
원의 중심 중 y 값을 의미한다.
+
+ +

Ellipse 타원

+ +

Ellipses은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.

+ +
<ellipse cx="75" cy="75" rx="20" ry="5"/>
+ +
+
rx
+
타원의 x 방향으로의 반지름의 길이를 의미한다.
+
ry
+
타원의 y 방향으로의 반지름의 길이를 의미한다.
+
cx
+
타원의 중심 중 x 값을 의미한다.
+
cy
+
타원의 중심 중 y 값을 의미한다.
+
+ +

Line 선

+ +

Lines은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.

+ +
<line x1="10" x2="50" y1="110" y2="150"/>
+ +
+
x1
+
점 1의 x 값이다.
+
y1
+
점 1의 y 값이다.
+
x2 
+
점 2의 x 값이다.
+
y2
+
점 2의 y 값이다.
+
+ +

Polyline

+ +

Polylines은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.

+ +
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+ +
+
points
+
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.
+
+ +

Polygon 다각형

+ +

Polygons은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.

+ +
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+ +
+
points
+
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.
+
+ +

Path

+ +

Path 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 the next section 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.

+ +
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+ +
+
d
+
A list of points and other information about how to draw the path. See the Paths section for more information.
+
+ +
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git a/files/ko/web/svg/tutorial/getting_started/index.html b/files/ko/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..8a0b5c82b7 --- /dev/null +++ b/files/ko/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,94 @@ +--- +title: 시작하기 +slug: Web/SVG/Tutorial/시작하기 +tags: + - SVG + - 'SVG:Tutorial' + - 초보자 + - 튜토리얼 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

간단한 예제

+ +

다음의 코드와 같이 간단한 예제로 시작해보겠습니다.

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : 링크)

+ +

svgdemo1.png

+ +

화면이 그려지는 과정은 다음과 같습니다.

+ +
    +
  1. SVG 루트 요소(Element)부터 시작합니다. +
      +
    • DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.
      • +
    • 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.
      • +
    • XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은 네임 스페이스 충돌 과정 페이지를 참조하십시오.
      • +
    +
    2. +
  2. 전체 이미지 영역을 포함하는 사각형 <rect />을 그려 배경을 빨간색으로 설정합니다.
    3. +
  3. 빨간색 직사각형의 중앙에 반경 80px의 녹색 원 <circle />이 그려집니다
    4. +
  4. 텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.
    5. +
+ +

SVG 파일의 기본 속성

+ +
    +
  • 가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 위에서 부터 아래로 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.
    • +
  • 웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다: +
      +
    • HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.
      • +
    • HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.
      • +
    • SVG 파일은 object 요소로 참조 할 수 있습니다: + 
              <object data="image.svg" type="image/svg+xml" />
      +
      • +
    • 마찬가지로 iframe 요소로 사용할 수 있습니다: + 
              <iframe src="image.svg"></iframe>
      +
      • +
    • 이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.
      • +
    • 마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.
      • +
    + 이 주제에 대해 깊이있게 다루기 위해 이 문서를 참조하십시오.
    • +
  • SVG에서 크기와 단위를 처리하는 방법에 대해서는 다음 페이지에서 설명 할 것입니다.
    • +
+ +

SVG 파일 형식

+ +

SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.

+ +

일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).

+ +

웹서버 관련 한 마디

+ +

이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

+ +
Content-Type: image/svg+xml
+Vary: Accept-Encoding
+ +

gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+ +

네트워크 모니터 패널이나 web-sniffer.net과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 서버 구성 페이지를 참조하십시오.

+ +

SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.

+ +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

diff --git a/files/ko/web/svg/tutorial/positions/index.html b/files/ko/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..391765175c --- /dev/null +++ b/files/ko/web/svg/tutorial/positions/index.html @@ -0,0 +1,45 @@ +--- +title: 위치 +slug: Web/SVG/Tutorial/위치 +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

+ +

그리드

+ +

모든 요소(Element)에 대해 SVG는 캔버스를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).

+ +

예제:

+ +

아래 요소는

+ +
<rect x="0" y="0" width="100" height="100" />
+
+ +

왼쪽 상단에서 100px의 정사각형을 정의합니다.

+ +

"픽셀"이란?

+ +

기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.

+ +

별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.

+ +
<svg width="100" height="100">
+
+ +

위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.

+ +
<svg width="200" height="200" viewBox="0 0 100 100">
+
+ +

SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.

+ +

이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.

+ +

SVG 1.1 스펙에서는 다음과 같이 인용합니다:

+ +
+

[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)

+
+ +

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

diff --git a/files/ko/web/svg/tutorial/svg_and_css/index.html b/files/ko/web/svg/tutorial/svg_and_css/index.html new file mode 100644 index 0000000000..d8ca001fb2 --- /dev/null +++ b/files/ko/web/svg/tutorial/svg_and_css/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 +--- +

이 페이지는 그래픽을 만들기 위한 특별한 언어 SVG를 설명합니다.

+

SVG 기능이 있는 모질라 브라우저에서 작동하는 간단한 예제를 만듭니다.

+

정보: SVG

+

+ + SVG + (Scalable Vector Graphics, 스케일러블 벡터 그래픽)은 그래픽을 만들어내기 위한 XML-기반 언어입니다.

+

움직이지 않는 이미지(static image)를 위해 사용될 수 있으며, 또한 애니메이션 과 사용자 인터페이스를 위해서도 사용될 수 있습니다.

+

다른 XML-기반 언어들과 같이, SVG는 CSS 스타일 시트를 지원하여 그래픽에 사용되는 스타일을 그래픽의 내용물과 분리시킬 수 있게 합니다.

+

또한, 다른 문서 마크업 언어들과 함께 사용되는 스타일 시트들도 이미지가 요구되는 곳에 SVG 그래픽의 URL을 지정할 수 있습니다. 예를들면, HTML 문서와 함께 사용하는 스타일 시트에서 background 속성 값에 SVG값의 URL을 지정할 수 있습니다.

+ + + + + + + +
+ More details
이글을 쓰는 시점에서(2005년 중반), 모질라 브라우저의 몇몇 최근 빌드만이 SVG 지원을 내장하고 있었습니다. +

Adobe에서 제공되는 것 같은 플럭인(plugin)을 인스톨하면 다른 버전에서도 SVG 지원을 추가할 수 있습니다.

+

모질라에서의 SVG에 관한 더많은 정보를 원하시면, 이 위키안의 SVG 페이지를 보세요.

+
+

액션: SVG 예제

+

새로운 SVG 문서를 텍스트 파일 doc8.svg로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
<?xml version="1.0" standalone="no"?>
+
+<?xml-stylesheet type="text/css" href="style8.css"?>
+
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<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">
+
+<title>SVG demonstration</title>
+<desc>Mozilla CSS Getting Started - SVG demonstration</desc>
+
+<defs>
+  <g id="segment" class="segment">
+    <path class="segment-fill" d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
+    <path class="segment-edge" d="M0,-200 a40,40 0 0,0 -62,10"/>
+    </g>
+  <g id="quadrant">
+    <use xlink:href="#segment"/>
+    <use xlink:href="#segment" transform="rotate(18)"/>
+    <use xlink:href="#segment" transform="rotate(36)"/>
+    <use xlink:href="#segment" transform="rotate(54)"/>
+    <use xlink:href="#segment" transform="rotate(72)"/>
+    </g>
+  <g id="petals">
+    <use xlink:href="#quadrant"/>
+    <use xlink:href="#quadrant" transform="rotate(90)"/>
+    <use xlink:href="#quadrant" transform="rotate(180)"/>
+    <use xlink:href="#quadrant" transform="rotate(270)"/>
+    </g>
+  <radialGradient id="fade" cx="0" cy="0" r="200"
+      gradientUnits="userSpaceOnUse">
+    <stop id="fade-stop-1" offset="33%"/>
+    <stop id="fade-stop-2" offset="95%"/>
+    </radialGradient>
+  </defs>
+
+<text id="heading" x="-280" y="-270">
+  SVG demonstration</text>
+<text  id="caption" x="-280" y="-250">
+  Move your mouse pointer over the flower.</text>
+
+<g id="flower">
+  <circle id="overlay" cx="0" cy="0" r="200"
+    stroke="none" fill="url(#fade)"/>
+  <use id="outer-petals" xlink:href="#petals"/>
+  <use id="inner-petals" xlink:href="#petals"
+    transform="rotate(9) scale(0.33)"/>
+  </g>
+
+</svg>
+
+
+

새로운 CSS 문서를 텍스트 파일 style8.css로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
/*** 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 > .segment-fill {
+  fill: plum;
+  stroke: none;
+  }
+
+#outer-petals .segment:hover > .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 > .segment-fill {
+  fill: darkseagreen;
+  stroke: none;
+  }
+
+#inner-petals .segment:hover > .segment-edge {
+  stroke: green;
+  }
+
+
+

문서를 SVG 기능이 있는(SVG-enabled) 브라우저에서 여세요. 마우스 포인터(mouse pointer)를 그래픽위로 움직여 보세요.

+

이 위키페이지는 SVG를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 다음과 같이 보입니다:

+ + + + + + +
SVG demonstration
+

이 예제에서 주의할 점:

+
    +
  • SVG 문서는 전처럼 스타일 시트에 링크되어 있습니다.
    • +
  • SVG는 그 자신만의 CSS 스타일 시트와 값을 가지고 있습니다. 이들중 몇가지는 HTML을 위한 CSS의 속성과 비슷합니다.
    • +
+ + + + + + + +
+ Challenge
스타일 시트를 변경해서, 마우스 포인터가 안쪽 꽃잎들 중 한개 위에 오게 되면, 바깥 쪽 꽃잎이 작동하는 방식은 바뀌지 않은채 모든 안쪽꽃잎 색이 핑크(pink)색으로 변하게 하세요
+

그럼 다음은?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

이 예제에서 SVG 기능이 있는(SVG enabled) 브라우저는 이미 SVG 엘리먼트를 디스플레이하는 방법을 알고 있습니다. 스타일 시트는 단지 그 디스플레이를 특정 방식으로 수정할 뿐 입니다. 그러나 디스플레이하는 방식이 미리 지정되어 있지 않은 범용(general-purpose) XML 문서를 위해서 CSS를 사용할 수있습니다. 다음 페이지에서는 이를 실행해 봅니다: XML data

+

{{ languages( { "fr": "fr/CSS/Premiers_pas/Graphiques_SVG", "pl": "pl/CSS/Na_pocz\u0105tek/Grafika_SVG" } ) }}

diff --git "a/files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" "b/files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" deleted file mode 100644 index 8169e4c890..0000000000 --- "a/files/ko/web/svg/tutorial/\352\270\260\353\263\270_\353\217\204\355\230\225/index.html" +++ /dev/null @@ -1,141 +0,0 @@ ---- -title: 기본 도형 -slug: Web/SVG/Tutorial/기본_도형 -translation_of: Web/SVG/Tutorial/Basic_Shapes ---- -

{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}

- -

SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.

- -

기본적인 도형들

- -

도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:

- -

- -
<?xml version="1.0" standalone="no"?>
-<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
-
-  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
-
-  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
-  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
-
-  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
-  <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"/>
-
-  <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"/>
-
-  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
-</svg>
- -
Note: stroke, stroke-width 그리고 fill 속성들은 튜토리얼 뒤쪽에서 설명한다.
- -

Rectangles 사각형

- -

rect 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와  ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.

- -
<rect x="10" y="10" width="30" height="30"/>
-<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
- -
-
x
-
사각형의 좌측 상단의 x 값을 의미한다.
-
y
-
사각형의 좌측 상단의 y 값을 의미한다.
-
width
-
사각형의 폭을 나타낸다.
-
height
-
사각형의 높이를 나타낸다. 
-
rx
-
사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.
-
ry
-
사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.
-
- -

Circle 원

- -

당신이 추측한 것 처럼, circle 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.

- -
<circle cx="25" cy="75" r="20"/>
- -
-
r
-
원의 반지름을 의미한다.
-
cx
-
원의 중심 중 x 값을 의미한다.
-
cy
-
원의 중심 중 y 값을 의미한다.
-
- -

Ellipse 타원

- -

Ellipses은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.

- -
<ellipse cx="75" cy="75" rx="20" ry="5"/>
- -
-
rx
-
타원의 x 방향으로의 반지름의 길이를 의미한다.
-
ry
-
타원의 y 방향으로의 반지름의 길이를 의미한다.
-
cx
-
타원의 중심 중 x 값을 의미한다.
-
cy
-
타원의 중심 중 y 값을 의미한다.
-
- -

Line 선

- -

Lines은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.

- -
<line x1="10" x2="50" y1="110" y2="150"/>
- -
-
x1
-
점 1의 x 값이다.
-
y1
-
점 1의 y 값이다.
-
x2 
-
점 2의 x 값이다.
-
y2
-
점 2의 y 값이다.
-
- -

Polyline

- -

Polylines은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.

- -
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
- -
-
points
-
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.
-
- -

Polygon 다각형

- -

Polygons은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.

- -
<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
- -
-
points
-
포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.
-
- -

Path

- -

Path 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 the next section 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.

- -
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>
- -
-
d
-
A list of points and other information about how to draw the path. See the Paths section for more information.
-
- -
{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}
diff --git "a/files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" "b/files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" deleted file mode 100644 index 8a0b5c82b7..0000000000 --- "a/files/ko/web/svg/tutorial/\354\213\234\354\236\221\355\225\230\352\270\260/index.html" +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: 시작하기 -slug: Web/SVG/Tutorial/시작하기 -tags: - - SVG - - 'SVG:Tutorial' - - 초보자 - - 튜토리얼 -translation_of: Web/SVG/Tutorial/Getting_Started ---- -

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

- -

간단한 예제

- -

다음의 코드와 같이 간단한 예제로 시작해보겠습니다.

- -
<svg version="1.1"
-     baseProfile="full"
-     width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg">
-
-  <rect width="100%" height="100%" fill="red" />
-
-  <circle cx="150" cy="100" r="80" fill="green" />
-
-  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
-
-</svg>
-
- -

코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : 링크)

- -

svgdemo1.png

- -

화면이 그려지는 과정은 다음과 같습니다.

- -
    -
  1. SVG 루트 요소(Element)부터 시작합니다. -
      -
    • DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.
      • -
    • 다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.
      • -
    • XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은 네임 스페이스 충돌 과정 페이지를 참조하십시오.
      • -
    -
    2. -
  2. 전체 이미지 영역을 포함하는 사각형 <rect />을 그려 배경을 빨간색으로 설정합니다.
    3. -
  3. 빨간색 직사각형의 중앙에 반경 80px의 녹색 원 <circle />이 그려집니다
    4. -
  4. 텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.
    5. -
- -

SVG 파일의 기본 속성

- -
    -
  • 가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 위에서 부터 아래로 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.
    • -
  • 웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다: -
      -
    • HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.
      • -
    • HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.
      • -
    • SVG 파일은 object 요소로 참조 할 수 있습니다: - 
              <object data="image.svg" type="image/svg+xml" />
      -
      • -
    • 마찬가지로 iframe 요소로 사용할 수 있습니다: - 
              <iframe src="image.svg"></iframe>
      -
      • -
    • 이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.
      • -
    • 마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.
      • -
    - 이 주제에 대해 깊이있게 다루기 위해 이 문서를 참조하십시오.
    • -
  • SVG에서 크기와 단위를 처리하는 방법에 대해서는 다음 페이지에서 설명 할 것입니다.
    • -
- -

SVG 파일 형식

- -

SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.

- -

일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).

- -

웹서버 관련 한 마디

- -

이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

- -
Content-Type: image/svg+xml
-Vary: Accept-Encoding
- -

gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.

- -
Content-Type: image/svg+xml
-Content-Encoding: gzip
-Vary: Accept-Encoding
- -

네트워크 모니터 패널이나 web-sniffer.net과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 서버 구성 페이지를 참조하십시오.

- -

SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.

- -

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

diff --git "a/files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" "b/files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" deleted file mode 100644 index 391765175c..0000000000 --- "a/files/ko/web/svg/tutorial/\354\234\204\354\271\230/index.html" +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: 위치 -slug: Web/SVG/Tutorial/위치 -translation_of: Web/SVG/Tutorial/Positions ---- -

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

- -

그리드

- -

모든 요소(Element)에 대해 SVG는 캔버스를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의  양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).

- -

예제:

- -

아래 요소는

- -
<rect x="0" y="0" width="100" height="100" />
-
- -

왼쪽 상단에서 100px의 정사각형을 정의합니다.

- -

"픽셀"이란?

- -

기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.

- -

별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.

- -
<svg width="100" height="100">
-
- -

위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.

- -
<svg width="200" height="200" viewBox="0 0 100 100">
-
- -

SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.

- -

이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.

- -

SVG 1.1 스펙에서는 다음과 같이 인용합니다:

- -
-

[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)

-
- -

{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}

diff --git a/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/ko/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..e15574b588 --- /dev/null +++ b/files/ko/web/xpath/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 +--- +

이 문서는 JavaScript 안, 확장기능, 웹사이트에서 XPath를 사용하기 위한 인터페이스를 설명합니다. Mozilla는 DOM 3 XPath를 상당량 구현합니다. 이것은 XPath 식이 HTML과 XML 문서 모두에서 잘 돌아간다는 것을 뜻합니다.

+ +

XPath를 사용하는 주 인터페이스는 document 개체의 evaluate 함수입니다.

+ +

document.evaluate

+ +

이 메소드는 XML에 기반을 둔 문서(HTML 문서 포함)에 대해 XPath 식을 평가하고 단일 노드나 노드 집합일 수 있는 XPathResult 개체를 반환합니다. 이 메소드를 다루는 기존 문서는 여기에 있지만 당장 우리 필요에 좀 부족하여, 더 이해가 빠른 설명을 아래에 제공합니다.

+ +
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
+
+ +

매개변수

+ +

evaluate 함수는 매개변수를 총 5개 취합니다.

+ +
    +
  • xpathExpression: 평가할 XPath 식을 포함하는 문자열
    • +
+ +
    +
  • contextNode: xpathExpression이 평가될 모든 자식 노드를 포함하는 문서의 노드. document 노드가 가장 흔히 쓰입니다.
    • +
+ +
    +
  • namespaceResolver: 그 접두사와 관련된 namespace URI를 나타내는 문자열을 반환하는 xpathExpression 내에 포함되는 모든 namespace 접두사를 넘겨주는 함수. 이는 XPath 식에 쓰(이)는 접두사와 문서에 쓰(이)는 아마도 다른 접두사 사이에 변환을 가능하게 합니다. 함수는 어느 한쪽일 수 있습니다. + +
      +
    • XPathEvaluator 개체의 createNSResolver 메소드를 써서 만듭니다. 항상 가상으로 이를 쓰면 좋습니다.
      • +
    • HTML 문서를 위해서나 namespace 접두사가 없을 때 쓸 수 있는 null. 만약 xpathExpression가 namespace 접두사를 포함하면 이는 NAMESPACE_ERR 코드를 내는 DOMException을 가져옴을 유의하세요.
      • +
    • 사용자 정의 맞춤(custom) 함수. 세부 내용은 부록의 사용자 정의 Namespace Resolver 쓰기 절을 보세요.
      • +
    +
    • +
+ +
    +
  • resultType: 평가 결과로 반환되기 바랐던 결과 형을 지정하는 상수. 가장 흔히 넘겨주는 상수는 가장 자연스러운 형으로 XPath 식의 결과를 반환하는 XPathResult.ANY_TYPE입니다. 부록에 쓸 수 있는 상수 목록 전체를 포함하는 절이 있습니다. 아래 반환형 지정 절에서 설명합니다.
    • +
+ +
    +
  • result: 결과를 반환하는 데 재사용하는 기존 XPathResult 개체나 새 XPathResult 개체를 만드는 데 쓸 수 있는 null 가운데 하나.
    • +
+ +

반환값

+ +

resultType 매개변수에서 지정한 형의 XPathResult 개체인 xpathResult를 반환합니다. XPathResult 인터페이스는 여기에서 정의됩니다.

+ +

Default Namespace Resolver 구현

+ +

우리는 document 개체의 createNSResolver 메소드를 써서 namespace resolver를 만듭니다.

+ +
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
+
+ +

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> 그리고 나서 document.evaluate 함수에 namespaceResolver 매개변수로 nsResolver 변수를 넘겨줍니다.

+ +

XPath는 null namespace의 단 하나 뿐인 요소와 일치하는 접두사 없는 QNames을 정의함을 유의하세요. XPath에는 기본 namespace를 얻는 방법이 없습니다. null이 아닌 namespace의 요소나 속성을 일치시키려면, 접두사 붙은 이름 검사를 쓰고 접두사를 namespace에 매핑하는 namespace resolver를 만들어야 합니다. 아래 사용자 정의 namespace resolver 만드는 법을 더 읽으세요.

+ +

반환형 지정

+ +

document.evaluate로부터 반환하는 변수 xpathResult는 개별 노드 (단순 형)나 노드 모음(collection) (node-set 형) 가운데 하나로 구성할 수 있습니다.

+ +

단순 형

+ +

resultType으로 바랐던 결과형을 어느 한쪽으로 지정할 때,

+ +
    +
  • NUMBER_TYPE - a double
    • +
  • STRING_TYPE - a string
    • +
  • BOOLEAN_TYPE - a boolean
    • +
+ +

우리는 XPathResult 개체의 다음 속성에 각각 접근하여 식의 반환값을 얻습니다.

+ +
    +
  • numberValue
    • +
  • stringValue
    • +
  • booleanValue
    • +
+ +
예
+ +

다음은 HTML 문서의 <p> 요소수를 얻기 위해 XPath 식 count(//p)을 씁니다.

+ +
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
+
+ +

비록 Javascript가 표시를 위해 숫자를 문자열로 변환하는 것을 허용하더라도, stringValue 속성(property)을 요청하면 XPath 인터페이스는 자동으로 숫자 결과로 변환하지 않습니다. 그래서 다음 코드는 작동하지 '<big>않</big>'습니다.

+ +
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
+
+alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
+
+ +

대신 NS_DOM_TYPE_ERROR 코드를 갖는 예외(exception)를 반환합니다.

+ +

Node-Set 형

+ +

XPathResult 개체는 주요한 3가지 서로 다른 형으로 반환될 node-set을 허용합니다.

+ + + +
반복자(훑개)
+ +

resultType 매개변수로 지정한 결과형이 어느 한쪽일 때,

+ +
    +
  • UNORDERED_NODE_ITERATOR_TYPE
    • +
  • ORDERED_NODE_ITERATOR_TYPE
    • +
+ +

반환되는 XPathResult 개체는 일치하는 노드(XPathResult의 iterateNext() 메소드를 써서 포함될 개별 노드에 접근함을 허용하는 반복자로 행동할)의 노드 집합입니다.

+ +

우리가 모든 일치하는 개별 노드에 반복하고 나면, iterateNext()는 null을 반환합니다.

+ +

그러나 주의하세요, 만약 반복 도중에 문서가 바뀌면 (문서 tree가 변경됨) 그것은 반복을 무효로 만들고(invalidate) XPathResult의 invalidIteratorState 속성을 true로 지정하고 NS_ERROR_DOM_INVALID_STATE_ERR 예외를 냅니다.

+ +
반복자 예
+ +
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 );
+}
+
+ +
Snapshots
+ +

resultType 매개변수로 지정한 결과형이 어느 한쪽일 때,

+ +
    +
  • UNORDERED_NODE_SNAPSHOT_TYPE
    • +
  • ORDERED_NODE_SNAPSHOT_TYPE
    • +
+ +

반환되는 XPathResult 개체는 일치하는 노드의 static node-set이고, 그것은 itemNumber가 검색(retrieve)되는 노드의 index인 XPathResult 개체의 snapshotItem(itemNumber) 메소드를 통해 각 노드에 접근을 허용합니다. 포함되는 노드의 총수는 snapshotLength 속성을 통해 입수할 수 있습니다.

+ +

Snapshot은 변환 문서로 바꾸지 않습니다. 그래서 반복자와는 달리 snapshot은 무효로 만들지는 않지만 현재 문서와 들어맞지 않을지도 모릅니다, 예를 들어 노드가 이동됐을지도 모르고, 더 이상 존재하지 않는 노드나 추가될 수 있는 새 노드를 포함할지도 모릅니다.

+ +
Snapshot 예
+ +
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
+
+for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
+{
+  dump( nodesSnapshot.snapshotItem(i).textContent );
+}
+
+ +
First Node
+ +

resultType 매개변수로 지정한 결과형이 어느 한쪽일 때,

+ +
    +
  • ANY_UNORDERED_NODE_TYPE
    • +
  • FIRST_ORDERED_NODE_TYPE
    • +
+ +

반환되는 XPathResult 개체는 XPath 식과 일치하는 오직 처음 발견한 노드입니다. 이는 XPathResult 개체의 singleNodeValue 속성을 통해 접근할 수 있습니다. 이는 노드 집합이 비면 null입니다.

+ +

순서 없는 subtype인 경우 반환되는 단일 노드가 문서 순으로 처음이 아닐지도 모르지만 순서 있는 subtype인 경우 문서 순으로 처음 일치하는 노드임을 보장함을 유의하세요.

+ +
First Node 예
+ +
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
+
+dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
+
+ +

ANY_TYPE 상수

+ +

resultType 매개변수에 결과형을 ANY_TYPE으로 지정할 때, 반환되는 XPathResult 개체는, 식 평가에서 자연스럽게 생긴 어떤 형입니다.

+ +

단순 형( NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE ) 가운데 하나일 수도 있습니다, <big>하지만</big>, 만약 반환되는 결과형이 node-set이면 <big>오직</big> UNORDERED_NODE_ITERATOR_TYPE입니다.

+ +

평가 뒤 형을 결정하기 위해서, 우리는 XPathResult 개체의 resultType 속성을 씁니다. 이 속성의 상수값은 부록에서 정의합니다. None Yet =====Any_Type 예===== <pre> </pre>

+ +

예

+ +

HTML 문서 안에서

+ +

다음 코드는 XPath 식이 평가될 HTML 문서 안에서나 문서에 연결(link)된 어떤 JavaScript 조각(fragment)에 놓을 셈입니다.

+ +

XPath를 써서 HTML의 모든 <h2> heading 요소를 뽑아내면(extract), xpathExpression 문자열은 간단히 '//h2'입니다. 어떤 점에서, //는 요소 트리 어디에서나 노드명 h2와 요소를 일치시키는 재귀 내림 연산자(Recursive Descent Operator)입니다. 이를 위한 자세한 코드입니다. link to introductory xpath doc

+ +
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
+
+ +

HTML이 namespace가 없기 때문에, 우리는 namespaceResolver 매개변수에 null을 넘겨줌을 유의하세요.

+ +

우리가 문서 전체에서 heading을 찾기를 바라기 때문에, 우리는 contextNode로 document 개체 자신을 씁니다.

+ +

이 식의 결과는 XPathResult 개체입니다. 우리가 반환되는 결과형을 알고 싶다면, 우리는 반환되는 개체의 resultType 속성을 평가할지도 모릅니다. 이 경우에는 그것은 값이 4인 UNORDERED_NODE_ITERATOR_TYPE로 평가합니다. 이는 XPath 식의 결과가 node-set일 때 기본 반환형입니다. 동시에 단일 노드로 접근을 제공하고 특정 순서로 노드를 반환할지도 모릅니다. 반환되는 개체에 접근하기 위해, 우리는 반환되는 개체의 iterateNext() 메소드를 씁니다.

+ +
var thisHeading = headings.iterateNext();
+
+var alertText = 'Level 2 headings in this document are:\n'
+
+while (thisHeading) {
+  alertText += thisHeading.textContent + '\n';
+  thisHeading = headings.iterateNext();
+}
+
+ +

우리가 한 노드를 반복하기만 하면, 우리는 그 노드의 모든 표준 DOM interfaces에 접근할 수 있습니다. 우리 식에서 반환된 모든 h2 요소를 반복한 뒤에, 더 이상의 iterateNext() 호출은 null을 반환합니다.

+ +

확장기능 안에서 XML 문서 평가

+ +

다음은 예로 chrome://yourextension/content/peopleDB.xml에 자리한 XML 문서를 씁니다.

+ +
<?xml version="1.0"?>
+<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
+  <person>
+	<name first="george" last="bush" />
+	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
+	<phoneNumber>202-456-1111</phoneNumber>
+  </person>
+  <person>
+	<name first="tony" last="blair" />
+	<address street="10 downing street" city="london" country="uk"/>
+	<phoneNumber>020 7925 0918</phoneNumber>
+  </person>
+</people>
+
+ +

확장기능 안에서 XML 문서의 컨텐트를 쓸 수 있게, 우리는 문서를 로드하는 동시에 변수 xmlDoc를 우리가 evaluate 메소드를 쓸 수 있는 XMLDocument 개체로 문서에 포함하는 XMLHttpRequest 개체를 만듭니다,

+ +

JavaScript는 확장기능 xul/js 문서에 씁니다.

+ +
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 );
+
+ +

부록

+ +

사용자 정의 Namespace Resolver 구현

+ +

이는 단지 설명을 위한 예입니다. 이 함수는 xpathExpression에서 namespace 접두사를 취할 필요가 있고 그 접두사와 들어맞는 URI를 반환합니다. 예를 들어, 다음 식은

+ +
'//xhtml:td/mathml:math'
+
+ +

(X)HTML 표 데이터 셀 요소의 자식인 모든 MathML 식을 선택합니다.

+ +

mathml: 접두사를 namespace URI 'http://www.w3.org/1998/Math/MathML'와 html:을 URI http://www.w3.org/1999/xhtml와 관련시키기 위해 우리는 함수 하나를 제공합니다.

+ +
function nsResolver(prefix) {
+  var ns = {
+    'xhtml' : 'http://www.w3.org/1999/xhtml',
+    'mathml': 'http://www.w3.org/1998/Math/MathML'
+  };
+  return ns[prefix] || null;
+}
+
+ +

그러면 document.evaluate 호출은 다음과 같습니다.

+ +
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
+
+ +

XPathResult 정의 상수

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
결과형 정의 상수값설명
ANY_TYPE0식 평가에서 자연스럽게 생긴 어떤 형을 포함하는 결과 집합. 만약 결과가 node-set이면 UNORDERED_NODE_ITERATOR_TYPE이 항상 결과형임을 주의하세요.
NUMBER_TYPE1single 숫자를 포함하는 결과. 이는 예를 들어, count() 함수를 쓰는 XPath 식에 쓸모가 있습니다.
STRING_TYPE2single 문자열을 포함하는 결과.
BOOLEAN_TYPE3single boolean 값을 포함하는 결과. 이는 예를 들어, not() 함수를 쓰는 XPath 식에 쓸모가 있습니다.
UNORDERED_NODE_ITERATOR_TYPE4식과 일치하는 모든 노드를 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.
ORDERED_NODE_ITERATOR_TYPE5식과 일치하는 모든 노드를 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.
UNORDERED_NODE_SNAPSHOT_TYPE6식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 노드는 반드시 문서에 나타나는 순서대로가 아닐지도 모릅니다.
ORDERED_NODE_SNAPSHOT_TYPE7식과 일치하는 모든 노드의 snapshot을 포함하는 결과 node-set. 결과 집합의 노드는 문서에 나타나는 순서대로입니다.
ANY_UNORDERED_NODE_TYPE8식과 일치하는 어떤 단일 노드를 포함하는 결과 node-set. 노드는 식과 일치하는 문서의 첫 노드일 필요는 없습니다.
FIRST_ORDERED_NODE_TYPE9식과 일치하는 문서의 첫 노드를 포함하는 결과 node-set.
+ +
+

원본 문서 정보

+ +
    +
  • 원본 문서 Mozilla XPath 입문서를 기반으로 함
    • +
  • 원본 소스 저자: James Graham.
    • +
  • 다른 기여자: James Thompson.
    • +
  • 맨 나중 업데이트: 2006-3-25.
    • +
+
+ +

{{ languages( { "en": "en/Introduction_to_using_XPath_in_JavaScript" } ) }}

diff --git a/files/ko/web/xslt/apply-imports/index.html b/files/ko/web/xslt/apply-imports/index.html deleted file mode 100644 index 9377bd2538..0000000000 --- a/files/ko/web/xslt/apply-imports/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: apply-imports -slug: Web/XSLT/apply-imports -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/apply-imports ---- -

{{ XsltRef() }}

-


- <xsl:apply-imports> 요소는 꽤 불가사의하고 보통은 복잡한 스타일시트에 쓰입니다. 가져오기(import) 우선순위는 가져온 스타일시트 안 템플릿 규칙보다 주 스타일시트의 안 템플릿 규칙이 더 높기를 요구합니다. 그러나, 때로는 처리기(processor)가 주 스타일시트 안 규칙보다 (우선순위가 낮은) 가져온 스타일시트의 템플릿 규칙을 쓰도록 강제할 수 있는 게 유용합니다.

-

문법

-
<xsl:apply-imports/>
-

필수 속성

-

없음.

-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남

-

정의

-

XSLT section 5.6, Overriding Template Rules

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/apply-templates/index.html b/files/ko/web/xslt/apply-templates/index.html deleted file mode 100644 index fdb8662849..0000000000 --- a/files/ko/web/xslt/apply-templates/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: apply-templates -slug: Web/XSLT/apply-templates -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/apply-templates ---- -

{{ XsltRef() }}

-

<xsl:apply-templates> 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.

-

문법

-
<xsl:apply-templates select=EXPRESSION mode=NAME>
-	<xsl:with-param> [optional]
-	<xsl:sort> [optional]
-</xsl:apply-templates>
-

필수 속성

-

없음.

-

선택 속성

-
-
- select
-
- 처리할 노드를 지정하는 XPath 식을 씁니다. 별표(*)는 전체 노드 집합을 선택합니다. 이 속성이 없으면, 현재 노드의 모든 자식 노드를 선택합니다.
-
- mode
-
- 같은 노드를 정의하는 다양한 처리 방법이 있다면, 그 방법들을 구별합니다.
-
-

타입

-

명령, 템플릿 안에 나타남

-

정의

-

XSLT section 5.4, Applying Template Rules

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/attribute-set/index.html b/files/ko/web/xslt/attribute-set/index.html deleted file mode 100644 index e4b34b6b21..0000000000 --- a/files/ko/web/xslt/attribute-set/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: attribute-set -slug: Web/XSLT/attribute-set -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/attribute-set ---- -

{{ XsltRef() }}

-

<xsl:attribute-set> 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.

-

문법

-
<xsl:attribute-set name=NAME use-attribute-sets=LIST-OF-NAMES>
-	<xsl:attribute>
-</xsl:attribute-set>
-

필수 속성

-
-
- name
-
- 속성 집합에 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.
-
-

선택 속성

-
-
- use-attribute-sets
-
- 다른 속성 집합으로부터 속성 집합을 빌드합니다. 기여한 집합의 이름은 공백 문자로 구분해야 하고 직접 혹은 간접으로 서로 임베드하지 않아야 합니다.
-
-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 7.1.4, Named Attribute Sets

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/attribute/index.html b/files/ko/web/xslt/attribute/index.html deleted file mode 100644 index 1c348584f7..0000000000 --- a/files/ko/web/xslt/attribute/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: attribute -slug: Web/XSLT/attribute -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/attribute ---- -

{{ XsltRef() }}

-

<xsl:attribute> 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.

-

문법

-
<xsl:attribute name=NAME namespace=URI>
-	TEMPLATE
-</xsl:attribute>
-

필수 속성

-
-
- name
-
- 출력 문서에 만들려는 속성에 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.
-
-

선택 속성

-
-
- namespace
-
- 출력 문서에 이 속성을 위한 이름공간(namespace) URI를 정의합니다. 이 요소와 관련된 이름공간 접두사를 설정할 수 없습니다.
-
-

타입

-

명령, 템플릿이나 <xsl:attribute-set> 요소 안에 나타남.

-

정의

-

XSLT section 7.1.3, Creating Attributes with xsl:attribute

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/call-template/index.html b/files/ko/web/xslt/call-template/index.html deleted file mode 100644 index c5aa8c1a53..0000000000 --- a/files/ko/web/xslt/call-template/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: call-template -slug: Web/XSLT/call-template -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/call-template ---- -

{{ XsltRef() }}

-

<xsl:call-template> 요소는 이름 붙인 템플릿을 호출합니다.

-

문법

-
<xsl:call-template name=NAME>
-	<xsl:with-param> [optional]
-</xsl:call-template>
-

필수 속성

-
-
- name
-
- 호출하고 싶은 템플릿의 이름을 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 6, Named Templates

-

Gecko 지원

-

지원함.

-

{{ languages( { "en": "en/XSLT/call-template" } ) }}

diff --git a/files/ko/web/xslt/choose/index.html b/files/ko/web/xslt/choose/index.html deleted file mode 100644 index ea615e7e15..0000000000 --- a/files/ko/web/xslt/choose/index.html +++ /dev/null @@ -1,24 +0,0 @@ ---- -title: choose -slug: Web/XSLT/choose -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/choose ---- -

{{ XsltRef() }}

-

<xsl:choose> 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.

-

문법

-
<xsl:choose>
-	<xsl:when>
-	<xsl:otherwise> [optional]
-</<xsl:choose>
-

필수 속성

-

없음.

-

선택 속성

-

없음.

-

타입

-

명령, 템플릿과 함께 나타남. 하나 이상의 <xsl:when> 요소를 포함하고 선택에 따라 마지막에 <xsl:otherwise> 요소를 포함합니다.

-

정의

-

XSLT section 9.2, Conditional Processing with xsl:choose

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/comment/index.html b/files/ko/web/xslt/comment/index.html deleted file mode 100644 index 56b12a9968..0000000000 --- a/files/ko/web/xslt/comment/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: comment -slug: Web/XSLT/comment -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/comment ---- -

{{ XsltRef() }}

-

<xsl:comment> 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.

-

문법

-
<xsl:comment>
-	TEMPLATE
-</xsl:comment>
-

필수 속성

-

없음.

-

선택 속성

-

없음.

-

타입

-

명령, 템플릿과 함께 나타남.

-

정의

-

XSLT section 7.4, Creating Comments

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/copy-of/index.html b/files/ko/web/xslt/copy-of/index.html deleted file mode 100644 index cfd00ae443..0000000000 --- a/files/ko/web/xslt/copy-of/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: copy-of -slug: Web/XSLT/copy-of -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/copy-of ---- -

{{ XsltRef() }}

-

<xsl:copy-of> 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.

-

문법

-
<xsl:copy-of select=EXPRESSION />
-

필수 속성

-
-
- select
-
- 복사할 대상을 지정하는 XPath 식을 씁니다.
-
-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 11.3, Using Values of Variables and Parameters with xsl:copy-of

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/copy/index.html b/files/ko/web/xslt/copy/index.html deleted file mode 100644 index 7d6e480167..0000000000 --- a/files/ko/web/xslt/copy/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: copy -slug: Web/XSLT/copy -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/copy ---- -

{{ XsltRef() }}

-

<xsl:copy> 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.

-

문법

-
<xsl:copy use-attribute-sets=LIST-OF-NAMES>
-	TEMPLATE
-</xsl:copy>
-

필수 속성

-

없음.

-

선택 속성

-
-
- use-attribute-sets
-
- 요소이면, 출력 노드에 적용해도 좋을 속성 집합을 나열합니다. 집합의 이름은 공백 문자로 구분해야 합니다.
-
-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 7.5, Copying

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/decimal-format/index.html b/files/ko/web/xslt/decimal-format/index.html deleted file mode 100644 index 83e51a2e90..0000000000 --- a/files/ko/web/xslt/decimal-format/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: decimal-format -slug: Web/XSLT/decimal-format -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/decimal-format ---- -

{{ XsltRef() }}

-

<xsl:decimal-format> 요소는 - - format-number( ) - 함수를 써서 숫자를 문자열로 바꿀 때 쓰는 기호와 문자를 정의합니다.

-

문법

-
<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 />
-

필수 속성

-

없음.

-

선택 속성

-
-
- name
-
- 이 형식에 이름을 지정합니다.
-
-
-
- decimal-separator
-
- 소숫점 문자를 지정합니다. 기본값은 (.)입니다.
-
-
-
- grouping-separator
-
- 그룹 구분 문자를 지정합니다. 기본값은 (,)입니다.
-
-
-
- infinity
-
- 무한대(infinity)를 나타내는데 쓰는 문자열을 지정합니다. 기본값은 "Infinity" 문자열입니다.
-
-
-
- minus-sign
-
- 빼기 기호 문자를 지정합니다. 기본값은 (-)입니다.
-
-
-
- NaN
-
- 값이 숫자가 아닐 때 쓰는 문자열을 지정합니다. 기본값은 "NaN" 문자열입니다.
-
-
-
- percent
-
- 백분율(percentage) 기호 문자를 지정합니다. 기본값은 (%)입니다.
-
-
-
- per-mille
-
- 천분율(per thousand) 문자를 지정합니다. 기본값은 (‰)입니다.
-
-
-
- zero-digit
-
- 숫자 0으로 쓸 문자를 지정합니다. 기본값은 (0)입니다.
-
-
-
- digit
-
- 형식 패턴에서 숫자(digit)를 나타내는데 쓰는 문자를 지정합니다. 기본값은 (#)입니다.
-
-
-
- pattern-separator
-
- 형식 패턴에서 양수와 음수 부분패턴을 구분하는 문자를 지정합니다. 기본값은 (;)입니다.
-
-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 12.3, Number Formatting

-

Gecko 지원

-

Mozilla 1.0과 Netscape 7.0 현재 지원함.

diff --git a/files/ko/web/xslt/element/apply-imports/index.html b/files/ko/web/xslt/element/apply-imports/index.html new file mode 100644 index 0000000000..9377bd2538 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+


+ <xsl:apply-imports> 요소는 꽤 불가사의하고 보통은 복잡한 스타일시트에 쓰입니다. 가져오기(import) 우선순위는 가져온 스타일시트 안 템플릿 규칙보다 주 스타일시트의 안 템플릿 규칙이 더 높기를 요구합니다. 그러나, 때로는 처리기(processor)가 주 스타일시트 안 규칙보다 (우선순위가 낮은) 가져온 스타일시트의 템플릿 규칙을 쓰도록 강제할 수 있는 게 유용합니다.

+

문법

+
<xsl:apply-imports/>
+

필수 속성

+

없음.

+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남

+

정의

+

XSLT section 5.6, Overriding Template Rules

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/apply-templates/index.html b/files/ko/web/xslt/element/apply-templates/index.html new file mode 100644 index 0000000000..fdb8662849 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:apply-templates> 요소는 입력 트리 안 노드 집합을 선택하고 그 집합에 알맞은 템플릿을 적용하도록 처리기에게 지시합니다.

+

문법

+
<xsl:apply-templates select=EXPRESSION mode=NAME>
+	<xsl:with-param> [optional]
+	<xsl:sort> [optional]
+</xsl:apply-templates>
+

필수 속성

+

없음.

+

선택 속성

+
+
+ select
+
+ 처리할 노드를 지정하는 XPath 식을 씁니다. 별표(*)는 전체 노드 집합을 선택합니다. 이 속성이 없으면, 현재 노드의 모든 자식 노드를 선택합니다.
+
+ mode
+
+ 같은 노드를 정의하는 다양한 처리 방법이 있다면, 그 방법들을 구별합니다.
+
+

타입

+

명령, 템플릿 안에 나타남

+

정의

+

XSLT section 5.4, Applying Template Rules

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/attribute-set/index.html b/files/ko/web/xslt/element/attribute-set/index.html new file mode 100644 index 0000000000..e4b34b6b21 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:attribute-set> 요소는 CSS 안에 이름 붙인 스타일과 비슷한 방식으로 이름 붙인 속성 집합을 만듭니다. 그러면, 출력 문서에 전체로서 적용할 수 있습니다.

+

문법

+
<xsl:attribute-set name=NAME use-attribute-sets=LIST-OF-NAMES>
+	<xsl:attribute>
+</xsl:attribute-set>
+

필수 속성

+
+
+ name
+
+ 속성 집합에 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.
+
+

선택 속성

+
+
+ use-attribute-sets
+
+ 다른 속성 집합으로부터 속성 집합을 빌드합니다. 기여한 집합의 이름은 공백 문자로 구분해야 하고 직접 혹은 간접으로 서로 임베드하지 않아야 합니다.
+
+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 7.1.4, Named Attribute Sets

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/attribute/index.html b/files/ko/web/xslt/element/attribute/index.html new file mode 100644 index 0000000000..1c348584f7 --- /dev/null +++ b/files/ko/web/xslt/element/attribute/index.html @@ -0,0 +1,33 @@ +--- +title: attribute +slug: Web/XSLT/attribute +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/attribute +--- +

{{ XsltRef() }}

+

<xsl:attribute> 요소는 스타일시트에서 접근할 수 있는 어떤 값을 써서 출력 문서에 속성을 만듭니다. 요소는 속성값을 자리 잡게 하는 출력 문서 요소 안에 정의한 것 가운데 처음이어야 합니다.

+

문법

+
<xsl:attribute name=NAME namespace=URI>
+	TEMPLATE
+</xsl:attribute>
+

필수 속성

+
+
+ name
+
+ 출력 문서에 만들려는 속성에 이름을 지정합니다. 이름은 유효한 QName이어야 합니다.
+
+

선택 속성

+
+
+ namespace
+
+ 출력 문서에 이 속성을 위한 이름공간(namespace) URI를 정의합니다. 이 요소와 관련된 이름공간 접두사를 설정할 수 없습니다.
+
+

타입

+

명령, 템플릿이나 <xsl:attribute-set> 요소 안에 나타남.

+

정의

+

XSLT section 7.1.3, Creating Attributes with xsl:attribute

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/call-template/index.html b/files/ko/web/xslt/element/call-template/index.html new file mode 100644 index 0000000000..c5aa8c1a53 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:call-template> 요소는 이름 붙인 템플릿을 호출합니다.

+

문법

+
<xsl:call-template name=NAME>
+	<xsl:with-param> [optional]
+</xsl:call-template>
+

필수 속성

+
+
+ name
+
+ 호출하고 싶은 템플릿의 이름을 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 6, Named Templates

+

Gecko 지원

+

지원함.

+

{{ languages( { "en": "en/XSLT/call-template" } ) }}

diff --git a/files/ko/web/xslt/element/choose/index.html b/files/ko/web/xslt/element/choose/index.html new file mode 100644 index 0000000000..ea615e7e15 --- /dev/null +++ b/files/ko/web/xslt/element/choose/index.html @@ -0,0 +1,24 @@ +--- +title: choose +slug: Web/XSLT/choose +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/choose +--- +

{{ XsltRef() }}

+

<xsl:choose> 요소는 많은 선택 가운데 하나를 정의합니다. 그리고 절차형 언어(procedural language)의 스위치 문처럼 동작합니다.

+

문법

+
<xsl:choose>
+	<xsl:when>
+	<xsl:otherwise> [optional]
+</<xsl:choose>
+

필수 속성

+

없음.

+

선택 속성

+

없음.

+

타입

+

명령, 템플릿과 함께 나타남. 하나 이상의 <xsl:when> 요소를 포함하고 선택에 따라 마지막에 <xsl:otherwise> 요소를 포함합니다.

+

정의

+

XSLT section 9.2, Conditional Processing with xsl:choose

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/comment/index.html b/files/ko/web/xslt/element/comment/index.html new file mode 100644 index 0000000000..56b12a9968 --- /dev/null +++ b/files/ko/web/xslt/element/comment/index.html @@ -0,0 +1,23 @@ +--- +title: comment +slug: Web/XSLT/comment +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/comment +--- +

{{ XsltRef() }}

+

<xsl:comment> 요소는 출력 문서에 주석을 작성합니다. 오직 텍스트만 포함해야 합니다.

+

문법

+
<xsl:comment>
+	TEMPLATE
+</xsl:comment>
+

필수 속성

+

없음.

+

선택 속성

+

없음.

+

타입

+

명령, 템플릿과 함께 나타남.

+

정의

+

XSLT section 7.4, Creating Comments

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/copy-of/index.html b/files/ko/web/xslt/element/copy-of/index.html new file mode 100644 index 0000000000..cfd00ae443 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:copy-of> 요소는 select 속성이 출력 문서에 무엇을 지정하든지 (자손 노드를 포함하여) 깊게 복사(deep copy)합니다.

+

문법

+
<xsl:copy-of select=EXPRESSION />
+

필수 속성

+
+
+ select
+
+ 복사할 대상을 지정하는 XPath 식을 씁니다.
+
+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 11.3, Using Values of Variables and Parameters with xsl:copy-of

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/copy/index.html b/files/ko/web/xslt/element/copy/index.html new file mode 100644 index 0000000000..7d6e480167 --- /dev/null +++ b/files/ko/web/xslt/element/copy/index.html @@ -0,0 +1,28 @@ +--- +title: copy +slug: Web/XSLT/copy +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/copy +--- +

{{ XsltRef() }}

+

<xsl:copy> 요소는 출력 문서에 현재 노드의 노드와 어떤 관련 이름공간 노드만을 얕게 복사(shallow copy) 전달합니다. 속성이나 자식은 복사하지 않습니다.

+

문법

+
<xsl:copy use-attribute-sets=LIST-OF-NAMES>
+	TEMPLATE
+</xsl:copy>
+

필수 속성

+

없음.

+

선택 속성

+
+
+ use-attribute-sets
+
+ 요소이면, 출력 노드에 적용해도 좋을 속성 집합을 나열합니다. 집합의 이름은 공백 문자로 구분해야 합니다.
+
+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 7.5, Copying

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/decimal-format/index.html b/files/ko/web/xslt/element/decimal-format/index.html new file mode 100644 index 0000000000..83e51a2e90 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:decimal-format> 요소는 + + format-number( ) + 함수를 써서 숫자를 문자열로 바꿀 때 쓰는 기호와 문자를 정의합니다.

+

문법

+
<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 />
+

필수 속성

+

없음.

+

선택 속성

+
+
+ name
+
+ 이 형식에 이름을 지정합니다.
+
+
+
+ decimal-separator
+
+ 소숫점 문자를 지정합니다. 기본값은 (.)입니다.
+
+
+
+ grouping-separator
+
+ 그룹 구분 문자를 지정합니다. 기본값은 (,)입니다.
+
+
+
+ infinity
+
+ 무한대(infinity)를 나타내는데 쓰는 문자열을 지정합니다. 기본값은 "Infinity" 문자열입니다.
+
+
+
+ minus-sign
+
+ 빼기 기호 문자를 지정합니다. 기본값은 (-)입니다.
+
+
+
+ NaN
+
+ 값이 숫자가 아닐 때 쓰는 문자열을 지정합니다. 기본값은 "NaN" 문자열입니다.
+
+
+
+ percent
+
+ 백분율(percentage) 기호 문자를 지정합니다. 기본값은 (%)입니다.
+
+
+
+ per-mille
+
+ 천분율(per thousand) 문자를 지정합니다. 기본값은 (‰)입니다.
+
+
+
+ zero-digit
+
+ 숫자 0으로 쓸 문자를 지정합니다. 기본값은 (0)입니다.
+
+
+
+ digit
+
+ 형식 패턴에서 숫자(digit)를 나타내는데 쓰는 문자를 지정합니다. 기본값은 (#)입니다.
+
+
+
+ pattern-separator
+
+ 형식 패턴에서 양수와 음수 부분패턴을 구분하는 문자를 지정합니다. 기본값은 (;)입니다.
+
+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 12.3, Number Formatting

+

Gecko 지원

+

Mozilla 1.0과 Netscape 7.0 현재 지원함.

diff --git a/files/ko/web/xslt/element/fallback/index.html b/files/ko/web/xslt/element/fallback/index.html new file mode 100644 index 0000000000..af407f4512 --- /dev/null +++ b/files/ko/web/xslt/element/fallback/index.html @@ -0,0 +1,23 @@ +--- +title: fallback +slug: Web/XSLT/fallback +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/fallback +--- +

{{ XsltRef() }}

+

<xsl:fallback> 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.

+

문법

+
<xsl:fallback>
+	TEMPLATE
+</xsl:fallback>
+

필수 속성

+

없음.

+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 15, Fallback

+

Gecko 지원

+

이번에 지원 안 함.

diff --git a/files/ko/web/xslt/element/for-each/index.html b/files/ko/web/xslt/element/for-each/index.html new file mode 100644 index 0000000000..6beb713190 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:for-each> 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 <xsl:sort> 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.

+

문법

+
<xsl:for-each select=EXPRESSION>
+	<xsl:sort> [optional]
+	TEMPLATE
+</xsl:for-each>
+

필수 속성

+
+
+ select
+
+ 처리할 노드를 선택하기 위해 XPath 식을 씁니다.
+
+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 8, Repetition

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/if/index.html b/files/ko/web/xslt/element/if/index.html new file mode 100644 index 0000000000..2c56b7d218 --- /dev/null +++ b/files/ko/web/xslt/element/if/index.html @@ -0,0 +1,28 @@ +--- +title: if +slug: Web/XSLT/if +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/if +--- +

{{ XsltRef() }}

+

<xsl:if> 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, <tt>if-then-else</tt> 문의 기능을 다하기 위해 <xsl:when>과 <xsl:otherwise> 자식이 하나씩 있는 <xsl:choose> 요소를 씁니다.

+

문법

+
<xsl:if test=EXPRESSION>
+	TEMPLATE
+</xsl:if>
+

필수 속성

+
+
+ test
+
+ Boolean 값으로 (필요하다면 boolean( )으로 정의한 규칙을 써서) 평가할 수 있는 XPath 식을 포함합니다. 값이 참이면 템플릿을 처리하고 거짓이면 아무 동작도 하지 않습니다.
+
+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 9.1, Conditional Processing with xsl:if

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/import/index.html b/files/ko/web/xslt/element/import/index.html new file mode 100644 index 0000000000..5a469656cb --- /dev/null +++ b/files/ko/web/xslt/element/import/index.html @@ -0,0 +1,26 @@ +--- +title: import +slug: Web/XSLT/import +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/import +--- +

{{ XsltRef() }}

+

<xsl:import> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 <xsl:include>와는 뚜렷이 다릅니다.

+

문법

+
<xsl:import href=URI  />
+

필수 속성

+
+
+ href
+
+ 가져올 스타일시트의 URI를 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

최상위, 가져오는 스타일시트 안 <xsl:stylesheet>나 <xsl:transform>의 자식 가운데 가장 앞에 나타나야 함.

+

정의

+

XSLT section 2.6.2, Stylesheet Import

+

Gecko 지원

+

Mozilla 1.0 현재 최상위 변수와 매개변수에 문제가 조금 있지만 대부분 지원함.

diff --git a/files/ko/web/xslt/element/include/index.html b/files/ko/web/xslt/element/include/index.html new file mode 100644 index 0000000000..965d03a15f --- /dev/null +++ b/files/ko/web/xslt/element/include/index.html @@ -0,0 +1,26 @@ +--- +title: include +slug: Web/XSLT/include +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/include +--- +

{{ XsltRef() }}

+

<xsl:include> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. <xsl:import>와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.

+

문법

+
<xsl:include href=URI />
+

필수 속성

+
+
+ href
+
+ 포함할 스타일시트의 URI를 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식으로 나타남.

+

정의

+

XSLT section 2.6.1, Stylesheet Inclusion

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/key/index.html b/files/ko/web/xslt/element/key/index.html new file mode 100644 index 0000000000..733196810d --- /dev/null +++ b/files/ko/web/xslt/element/key/index.html @@ -0,0 +1,35 @@ +--- +title: key +slug: Web/XSLT/key +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/key +--- +

{{ XsltRef() }}

+

<xsl:key> 요소는 key( ) 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.

+

문법

+
<xsl:key name=NAME match=EXPRESSION
+	use=EXPRESSION />
+

필수 속성

+
+
+ name
+
+ 이 키에 이름을 지정합니다. QName이어야 합니다.
+
+ match
+
+ 이 키를 적용할 수 있는 노드를 정의합니다.
+
+ use
+
+ 적용가능한 각 노드에 키값을 결정하는데 쓸 수 있는 XPath 식을 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 12.2, Keys

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/message/index.html b/files/ko/web/xslt/element/message/index.html new file mode 100644 index 0000000000..d533a2d3c7 --- /dev/null +++ b/files/ko/web/xslt/element/message/index.html @@ -0,0 +1,28 @@ +--- +title: message +slug: Web/XSLT/message +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/message +--- +

{{ XsltRef() }}

+

<xsl:message> 요소는 (NS에서 자바스크립트 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.

+

문법

+
<xsl:message terminate="yes" | "no" >
+	TEMPLATE
+</xsl:message>
+

필수 속성

+

없음.

+

선택 속성

+
+
+ terminate
+
+ "yes"로 설정하면, 실행을 끝마치는 게 좋겠다는 것을 나타냅니다. 기본값은 "no"이고 어느 경우에는 메시지가 출력하고 실행을 계속합니다.
+
+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 13, Messages

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/namespace-alias/index.html b/files/ko/web/xslt/element/namespace-alias/index.html new file mode 100644 index 0000000000..e085abc4e7 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:namespace-alias> 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 xsl:가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.

+

문법

+
<xsl:namespace-alias stylesheet-prefix=NAME result-prefix=NAME />
+

필수 속성

+
+
+ stylesheet-prefix
+
+ 임시 이름공간을 지정합니다.
+
+ result-prefix
+
+ 결과 트리에 사용하길 바라는 이름공간을 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 7.1.1, Literal Result Elements

+

Gecko 지원

+

이번에 지원 안 함.

diff --git a/files/ko/web/xslt/element/number/index.html b/files/ko/web/xslt/element/number/index.html new file mode 100644 index 0000000000..b822625a0e --- /dev/null +++ b/files/ko/web/xslt/element/number/index.html @@ -0,0 +1,173 @@ +--- +title: number +slug: Web/XSLT/number +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/number +--- +

{{ XsltRef() }}

+

<xsl:number> 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.

+

구문

+
<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  />
+

필수 속성

+

없음.

+

선택 속성

+
+
+ count
+
+ 소스 트리에서 연속으로 셀 대상을 지정합니다. XPath 식을 씁니다.
+
+
+
+ level
+
+ 일련번호를 만드는데 소스 트리의 수준을 어떻게 고려해야 하는 지를 정의합니다. 유효한 값은 single, multiple, any 세 가지. 기본값은 single입니다.
+
+
+
+
+
+ single
+
+ 목록의 항목대로 연속으로 형제 노드를 번호 매깁니다. 처리기는 count 속성과 일치하는 ancestor-or-self 축의 첫 번째 노드로 갑니다. 그리고 나서 역시 count 속성과 일치하는 앞선 형제(preceding siblings) 노드(있다면, 한 짝인 from 속성에 이르러 멈춤)를 모두 더하여 셉니다. 일치하지 않으면, sequence는 빈 목록입니다.
+
+
+
+
+
+
+
+ multiple
+
+ 노드의 계층 위치를 반영하는 복합 sequence로 노드를 셉니다. 예를 들어, 1.2.2.5 (포개진 형식은 format 속성(예, A.1.1)으로 지정할 수 있습니다). 처리기는 만약 있다면 from 속성에 이르러 멈추며 현재 노드와 현재 노드의 모든 ancestors를 조사합니다. 일치하지 않으면, sequence는 빈 목록입니다.
+
+
+
+
+
+
+
+ any (이번에 지원 안 함.)
+
+ 수준을 무시하고 연속으로 일치하는 모든 노드를 셉니다. ancestor, self, preceding 축을 모두 고려합니다. 처리기는 현재 노드에서 시작하여 from 속성과 일치할 때 멈추며 문서 역순으로 진행합니다. 발견한 count 속성과 일치하지 않으면, sequence는 빈 목록입니다. 이 수준은 이번에 지원하지 않습니다.
+
+
+
+
+
+ from
+
+ 번호 매기기를 시작하거나 다시 시작하면 좋을 곳을 지정합니다. 순서는 from 특성과 일치하는 노드의 첫 번째 자손(descendant)에서 시작합니다.
+
+
+
+ value
+
+ 숫자에 주어진 형식을 적용합니다. 이것이 사용자 제공 숫자(노드 sequence 숫자와는 반대로)를 표준 <xsl:number> 형식으로 구성하는 빠른 방법입니다.
+
+
+
+ format
+
+ 만드는 숫자의 형식을 정의합니다.
+
+
+
+
+
+ format="1"
+
+ <tt>1 2 3 . . .</tt> (이번에 지원하는 유일한 형식)
+
+
+
+
+
+
+
+ format="01"
+
+ <tt>01 02 03 . . . 09 10 11 . . .</tt>
+
+
+
+
+
+
+
+ format="a"
+
+ <tt>a b c . . .y z aa ab . . .</tt>
+
+
+
+
+
+
+
+ format="A"
+
+ <tt>A B C . . . Y Z AA AB . . .</tt>
+
+
+
+
+
+
+
+ format="i"
+
+ <tt>i ii iii iv v . . .</tt>
+
+
+
+
+
+
+
+ format="I"
+
+ <tt>I II III IV V . . .</tt>
+
+
+
+
+
+ lang (이번에는 지원 안 함)
+
+ 문자에 기반을 둔 번호 매기기 형식에 쓰면 좋을 언어의 알파벳을 지정합니다.
+
+
+
+ letter-value
+
+ 문자(letter)를 쓰는 번호 매김 열(sequence) 사이를 명확하게 합니다. 어떤 언어는 문자(letter)를 쓰는 하나 이상의 번호 매기기 시스템이 있습니다. 두 시스템이 같은 토큰으로 시작하면, 모호함이 생길 수 있습니다. 이 속성은 "alphabetic"나 "traditional" 값일 수 있습니다. 기본값은 "alphabetic"입니다.
+
+
+
+ grouping-separator
+
+ 어떤 문자를 그룹(예로 천 단위) 구분자로 쓰면 좋을지를 지정합니다. 기본값은 쉼표(,)입니다.
+
+
+
+ grouping-size
+
+ 숫자 그룹을 만드는 자릿수를 나타냅니다. 기본값은 "3"입니다.
+
+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 7.7, Numbering

+

Gecko 지원

+

부분 지원. 위 해설을 보세요.

diff --git a/files/ko/web/xslt/element/otherwise/index.html b/files/ko/web/xslt/element/otherwise/index.html new file mode 100644 index 0000000000..50249dc0b4 --- /dev/null +++ b/files/ko/web/xslt/element/otherwise/index.html @@ -0,0 +1,23 @@ +--- +title: otherwise +slug: Web/XSLT/otherwise +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/otherwise +--- +

{{ XsltRef() }}

+

<xsl:otherwise> 요소는 아무런 <xsl:when> 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 else나 default 경우와 비슷합니다.

+

문법

+
<xsl:otherwise>
+	TEMPLATE
+</xsl:otherwise>
+

필수 속성

+

없음.

+

선택 속성

+

없음.

+

타입

+

하위명령, 템플릿 안에서 <xsl:choose> 요소의 마지막 자식으로 나타나야 함.

+

정의

+

XSLT section 9.2, Conditional Processing with xsl:choose

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/output/index.html b/files/ko/web/xslt/element/output/index.html new file mode 100644 index 0000000000..97baf3f433 --- /dev/null +++ b/files/ko/web/xslt/element/output/index.html @@ -0,0 +1,90 @@ +--- +title: output +slug: Web/XSLT/output +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/output +--- +

{{ XsltRef() }}

+

<xsl:output> 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, method="text"는 기대한 대로 동작합니다.

+

문법

+
<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  />
+

필수 속성

+

없음.

+

선택 속성

+
+
+ method
+
+ 출력 형식을 지정합니다.
+
+
+
+ version
+
+ 출력 문서에 XML이나 HTML 선언의 version 속성값을 지정합니다. 이 속성은 method="html"나 method="xml"일 때만 씁니다.
+
+
+
+ encoding
+
+ 출력 문서에 encoding 속성값을 지정합니다.
+
+
+
+ omit-xml-declaration
+
+ 출력에 XML 선언을 포함할 지를 나타냅니다. 가능한 값은 "yes"나 "no"입니다.
+
+
+
+ standalone (지원 안 함.)
+
+ 있으면, standalone 선언이 출력 문서에 나타나면 좋을 지를 나타내고 그 값을 줍니다. 가능한 값은 "yes"나 "no"입니다.
+
+
+
+ doctype-public
+
+ 출력 문서에 DOCTYPE 선언의 PUBLIC 속성값을 지정합니다.
+
+
+
+ doctype-system
+
+ 출력 문서에 DOCTYPE 선언의 SYSTEM 속성값을 지정합니다.
+
+
+
+ cdata-section-elements
+
+ CDATA 절에 써도 좋을 요소의 텍스트 컨텐트를 나열합니다. 요소는 공백으로 구분해야 합니다.
+
+
+
+ indent (지원 안 함.)
+
+ 출력에 계층 구조를 나타내도록 하면 좋을 지를 지정합니다.
+
+
+
+ media-type (지원 안 함.)
+
+ 출력 문서의 MIME 타입을 지정합니다.
+
+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 16, Output

+

Gecko 지원

+

부분 지원. 위 해설을 보세요.

diff --git a/files/ko/web/xslt/element/param/index.html b/files/ko/web/xslt/element/param/index.html new file mode 100644 index 0000000000..e1bcf36e19 --- /dev/null +++ b/files/ko/web/xslt/element/param/index.html @@ -0,0 +1,33 @@ +--- +title: param +slug: Web/XSLT/param +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/param +--- +

{{ XsltRef() }}

+

<xsl:param> 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. <xsl:template> 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.

+

문법

+
<xsl:param name=NAME select=EXPRESSION>
+	TEMPLATE
+</xsl:param>
+

필수 속성

+
+
+ name
+
+ 파라미터에 이름을 붙입니다. 이름은 QName이어야 합니다.
+
+

선택 속성

+
+
+ select
+
+ none으로 지정하면 기본값을 제공하는 XPath 식을 씁니다.
+
+

타입

+

명령, 최상위 요소나 템플릿 안에 나타날 수 있음.

+

정의

+

XSLT section 11, Variables and Parameters

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/preserve-space/index.html b/files/ko/web/xslt/element/preserve-space/index.html new file mode 100644 index 0000000000..771ffe81d6 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:preserve-space> 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 <xsl:strip-space> 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.

+

문법

+
<xsl:preserve-space elements=LIST-OF-ELEMENT-NAMES  />
+

필수 속성

+
+
+ elements
+
+ 공백을 보존하면 좋을 요소를 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 3.4, Whitespace Stripping

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/processing-instruction/index.html b/files/ko/web/xslt/element/processing-instruction/index.html new file mode 100644 index 0000000000..ad1c6eaaf6 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:processing-instruction> 요소는 출력 문서에 처리 명령을 씁니다.

+

문법

+

<xsl:processing-instruction name=NAME> TEMPLATE </xsl:processing-instruction>

+

필수 속성

+
+
+ name
+
+ 처리 명령에 이름을 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 7.3, Creating Processing Instructions

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/sort/index.html b/files/ko/web/xslt/element/sort/index.html new file mode 100644 index 0000000000..22217ec61f --- /dev/null +++ b/files/ko/web/xslt/element/sort/index.html @@ -0,0 +1,55 @@ +--- +title: sort +slug: Web/XSLT/sort +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/sort +--- +

{{ XsltRef() }}

+

<xsl:sort> 요소는 <xsl:apply-templates>나 <xsl:for-each>가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.

+

문법

+
<xsl:sort
+	select=EXPRESSION
+	order="ascending" | "descending"
+	case-order="upper-first"| "lower-first"
+	lang=XML:LANG-CODE
+	data-type="html" | "xml" | "text" />
+

필수 속성

+

없음.

+

선택 속성

+
+
+ select
+
+ 정렬할 노드를 지정하는 XPath 식을 씁니다.
+
+
+
+ order
+
+ "ascending"나 "descending"으로 처리하면 좋을 노드를 지정합니다. 기본값은 "ascending"입니다.
+
+
+
+ case-order
+
+ 처음에 오는 게 대문자인지 소문자인지를 나타냅니다. 가능한 값은 "upper-first"와 "lower-first"입니다.
+
+
+
+ lang
+
+ 어떤 언어를 정렬에 쓸지를 지정합니다.
+
+
+
+ data-type
+
+ 어떤 항목을 알파벳순이나 숫자순으로 순서 매길지를 정의합니다. 가능한 값은 "text"와 기본값인 "text"가 있는 "number"입니다.
+
+

타입

+

하위명령, 항상 <xsl:for-each>의 자식으로 나타나고 고유(proper) 템플릿이나 <xsl:apply-templates> 앞에 나타나야 함.

+

정의

+

XSLT section 10, Sorting

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/strip-space/index.html b/files/ko/web/xslt/element/strip-space/index.html new file mode 100644 index 0000000000..7bbc485afd --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:strip-space> 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.

+

문법

+
<xsl:strip-space elements=LIST-OF-ELEMENT-NAMES  />
+

필수 속성

+
+
+ elements
+
+ 지우면 좋을 공백뿐인 텍스트 노드가 있는 소스의 요소 목록(빈칸으로 구분)을 지정합니다.
+
+

선택 속성

+

없음.

+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 3.4, Whitespace Stripping

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/stylesheet/index.html b/files/ko/web/xslt/element/stylesheet/index.html new file mode 100644 index 0000000000..0119cec645 --- /dev/null +++ b/files/ko/web/xslt/element/stylesheet/index.html @@ -0,0 +1,52 @@ +--- +title: stylesheet +slug: Web/XSLT/stylesheet +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/stylesheet +--- +

{{ XsltRef() }}

+

<xsl:stylesheet>(나 동등한 <xsl:transform>) 요소는 스타일시트의 최외곽 요소입니다.

+

이름공간 선언

+

pseudo 속성은 XSLT 스타일시트로 문서를 식별하기 위해 필요합니다. 대체로 이는 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"입니다.

+

문법

+
<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>
+		ENTIRE STYLESHEET
+</xsl:stylesheet>
+

필수 속성

+
+
+ version
+
+ 이 스타일시트에 필요한 XSLT의 버전을 지정합니다.
+
+

선택 속성

+
+
+ id (7.0 현재 오직 inline DTD가 명시하여 호출하는 경우만 지원함.)
+
+ 이 스타일시트에 id를 지정합니다. 이는 스타일시트를 다른 XML 문서에 포함할 때 가장 자주 씁니다.
+
+
+
+ extension-element-prefixes (지원 안 함.)
+
+ 이 문서의 확장 요소에 빈칸으로 구분한 이름공간 접두사를 지정합니다.
+
+
+
+ exclude-result-prefixes
+
+ 이 문서에 쓸 출력 문서에 보내지 않았으면 하는 이름공간을 지정합니다. 목록은 공백으로 구분합니다.
+
+

타입

+

필수 최외곽 스타일시트 요소.

+

정의

+

XSLT section 2.2, Stylesheet Element

+

Gecko 지원

+

조금 지원. 위 해설을 보세요.

diff --git a/files/ko/web/xslt/element/template/index.html b/files/ko/web/xslt/element/template/index.html new file mode 100644 index 0000000000..1ce4a66d2b --- /dev/null +++ b/files/ko/web/xslt/element/template/index.html @@ -0,0 +1,51 @@ +--- +title: template +slug: Web/XSLT/template +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/template +--- +

{{ XsltRef() }}

+

<xsl:template> 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.

+

문법

+
<xsl:template
+	match=PATTERN
+	name=NAME
+	mode=NAME
+	priority=NUMBER>
+	<xsl:param> [optional]
+	TEMPLATE
+</xsl:template>
+

필수 속성

+

없음.

+

선택 속성

+
+
+ match
+
+ 이 템플릿을 쓰면 좋을 요소를 결정하는 패턴을 지정합니다. name 속성이 없다면, 필수 속성입니다.
+
+
+
+ name
+
+ <xsl:call-template> 요소가 호출할 수 있는 이 템플릿에 이름을 지정합니다.
+
+
+
+ mode
+
+ 이 템플릿에 <xsl:apply-templates> 요소의 속성과 일치할 수 있는 특유한 모드를 지정합니다. 이는 같은 정보를 다양한 방식으로 처리하는데 유용합니다.
+
+
+
+ priority
+
+ 이 템플릿에 숫자로 된 우선권을 지정합니다. 이는 Infinity와 다른 아무 숫자일 수 있습니다. 처리기는 하나 이상의 템플릿이 같은 노드와 일치할 때 이 숫자를 씁니다.
+
+

타입

+

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

+

정의

+

XSLT section 5.3, Defining Template Rules

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/text/index.html b/files/ko/web/xslt/element/text/index.html new file mode 100644 index 0000000000..71bd6eceda --- /dev/null +++ b/files/ko/web/xslt/element/text/index.html @@ -0,0 +1,28 @@ +--- +title: text +slug: Web/XSLT/text +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/text +--- +

{{ XsltRef() }}

+

<xsl:text> 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. #PCDATA, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.

+

구문

+
<xsl:text disable-output-escaping="yes" | "no">
+	TEXT
+</xsl:text>
+

필수 속성

+

없음.

+

선택 속성

+
+
+ disable-output-escaping (Netscape은 변환 결과를 "output" 아래에 직렬하지 않습니다. 그래서 이 속성은 본래 문맥에서는 무의미합니다. HTML 엔티티를 출력하기 위해서는, 대신 숫자값을 쓰세요. 보기 &nbsp 대신 &#160)
+
+ 특수 문자를 출력에 쓸 때 해석할(escape) 지를 지정합니다. 가능한 값은 "yes"나 "no"입니다. 예를 들어, "yes"로 하면, <tt>></tt> 문자의 출력은 "&gt"가 아니라 >입니다.
+
+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 7.2, Creating Text

+

Gecko 지원

+

적힌 대로 지원함

diff --git a/files/ko/web/xslt/element/transform/index.html b/files/ko/web/xslt/element/transform/index.html new file mode 100644 index 0000000000..8071ebdad3 --- /dev/null +++ b/files/ko/web/xslt/element/transform/index.html @@ -0,0 +1,11 @@ +--- +title: transform +slug: Web/XSLT/transform +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/transform +--- +

{{ XsltRef() }}

+

<xsl:transform> 요소는 <xsl:stylesheet> 요소와 정확히 같습니다.

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/value-of/index.html b/files/ko/web/xslt/element/value-of/index.html new file mode 100644 index 0000000000..90f1777bed --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:value-of> 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.

+

구문

+
<xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  />
+

필수 속성

+
+
+ select
+
+ 평가하고 출력 트리에 쓸 XPath 식을 지정합니다.
+
+

선택 속성

+
+
+ disable-output-escaping (Netscape은 변환 결과를 "output" 아래에 직렬하지 않습니다. 그래서 이 속성은 본래 문맥에서는 무의미합니다. HTML 엔티티를 출력하기 위해서는, 대신 숫자값을 쓰세요. 보기 &nbsp 대신 &#160)
+
+ 특수 문자를 출력에 쓸 때 해석할(escape) 지를 지정합니다. 가능한 값은 "yes"나 "no"입니다. 예를 들어, "yes"로 하면, <tt>></tt> 문자의 출력은 "&gt"가 아니라 >입니다.
+
+

타입

+

명령, 템플릿 안에 나타남.

+

정의

+

XSLT section 7.6.1, Generating Text with xsl:value-of

+

Gecko 지원

+

위 경우를 빼고는 지원함.

diff --git a/files/ko/web/xslt/element/variable/index.html b/files/ko/web/xslt/element/variable/index.html new file mode 100644 index 0000000000..8568f70b20 --- /dev/null +++ b/files/ko/web/xslt/element/variable/index.html @@ -0,0 +1,33 @@ +--- +title: variable +slug: Web/XSLT/variable +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/variable +--- +

{{ XsltRef() }}

+

<xsl:variable> 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.

+

구문

+
<xsl:variable name=NAME select=EXPRESSION >
+	TEMPLATE
+</xsl:variable>
+

필수 속성

+
+
+ name
+
+ 변수에 이름을 줍니다.
+
+

선택 속성

+
+
+ select
+
+ 변수값을 XPath 식으로 정의합니다. 요소가 템플릿을 포함하면, 이 속성은 무시합니다.
+
+

타입

+

최상위 또는 명령. 최상위 요소로 나타나면, 변수의 범위는 전역이고 문서 전체에서 접근할 수 있습니다. 템플릿 안에 나타나면, 번수의 범위는 지역이고 나타난 템플릿 안에서만 접근할 수 있습니다.

+

정의

+

XSLT section 11, Variables and Parameters

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/when/index.html b/files/ko/web/xslt/element/when/index.html new file mode 100644 index 0000000000..4d5f52d9c3 --- /dev/null +++ b/files/ko/web/xslt/element/when/index.html @@ -0,0 +1,28 @@ +--- +title: when +slug: Web/XSLT/when +tags: + - XSLT_Reference +translation_of: Web/XSLT/Element/when +--- +

{{ XsltRef() }}

+

<xsl:when> 요소는 항상 case 문처럼 동작하는 <xsl:choose> 요소 안에 나타납니다.

+

문법

+
<xsl:when test=EXPRESSION>
+	TEMPLATE
+</xsl:when>
+

필수 속성

+
+
+ test
+
+ 평가할 boolean 식을 지정합니다. 참이면, 요소의 컨텐트는 처리하고 거짓이면, 무시합니다.
+
+

선택 속성

+

없음.

+

타입

+

하위명령, 항상 <xsl:choose> 요소 안에 나타남.

+

정의

+

XSLT section 9.2, Conditional Processing with xsl:choose

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/element/with-param/index.html b/files/ko/web/xslt/element/with-param/index.html new file mode 100644 index 0000000000..cd96049cc5 --- /dev/null +++ b/files/ko/web/xslt/element/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 +--- +

{{ XsltRef() }}

+

<xsl:with-param> 요소는 템플릿에 건네는 매개변수 값을 지정합니다.

+

문법

+
<xsl:with-param name=NAME select=EXPRESSION>
+	TEMPLATE
+</xsl:with-param>
+

필수 속성

+
+
+ name
+
+ 이 매개변수에 이름을 줍니다.
+
+

선택 속성

+
+
+ select
+
+ XPath 식을 거치는 매개변수 값을 정의합니다. 요소가 템플릿을 포함하면, 이 속성은 무시합니다.
+
+

타입

+

하위명령, 항상 <xsl:apply-templates>이나 code><xsl:call-template></code> 요소 안에 나타남.

+

정의

+

XSLT section 11.6, Passing Parameters to Templates

+

Gecko 지원

+

지원함.

diff --git a/files/ko/web/xslt/fallback/index.html b/files/ko/web/xslt/fallback/index.html deleted file mode 100644 index af407f4512..0000000000 --- a/files/ko/web/xslt/fallback/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: fallback -slug: Web/XSLT/fallback -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/fallback ---- -

{{ XsltRef() }}

-

<xsl:fallback> 요소는 주어진 확장(이나 결국에는 새 버전) 요소에서 지원하지 않으면 쓸 템플릿을 지정합니다.

-

문법

-
<xsl:fallback>
-	TEMPLATE
-</xsl:fallback>
-

필수 속성

-

없음.

-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 15, Fallback

-

Gecko 지원

-

이번에 지원 안 함.

diff --git a/files/ko/web/xslt/for-each/index.html b/files/ko/web/xslt/for-each/index.html deleted file mode 100644 index 6beb713190..0000000000 --- a/files/ko/web/xslt/for-each/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: for-each -slug: Web/XSLT/for-each -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/for-each ---- -

{{ XsltRef() }}

-

<xsl:for-each> 요소는 노드 집합을 선택하고 같은 방식으로 각 노드를 처리합니다. 노드 집합을 되풀이하(iterate)거나 현재 노드를 바꾸는데 자주 씁니다. 하나 이상의 <xsl:sort> 요소가 이 요소의 자식으로 나타나면, 처리에 앞서 정렬을 합니다. 그렇지 않으면, 노드는 문서 순으로 처리합니다.

-

문법

-
<xsl:for-each select=EXPRESSION>
-	<xsl:sort> [optional]
-	TEMPLATE
-</xsl:for-each>
-

필수 속성

-
-
- select
-
- 처리할 노드를 선택하기 위해 XPath 식을 씁니다.
-
-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 8, Repetition

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/if/index.html b/files/ko/web/xslt/if/index.html deleted file mode 100644 index 2c56b7d218..0000000000 --- a/files/ko/web/xslt/if/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: if -slug: Web/XSLT/if -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/if ---- -

{{ XsltRef() }}

-

<xsl:if> 요소는 test 속성과 템플릿을 포함합니다. test 속성을 참으로 평가하면, 템플릿을 처리합니다. 이것은 다른 언어의 if 문과 비슷합니다. 그러나, <tt>if-then-else</tt> 문의 기능을 다하기 위해 <xsl:when>과 <xsl:otherwise> 자식이 하나씩 있는 <xsl:choose> 요소를 씁니다.

-

문법

-
<xsl:if test=EXPRESSION>
-	TEMPLATE
-</xsl:if>
-

필수 속성

-
-
- test
-
- Boolean 값으로 (필요하다면 boolean( )으로 정의한 규칙을 써서) 평가할 수 있는 XPath 식을 포함합니다. 값이 참이면 템플릿을 처리하고 거짓이면 아무 동작도 하지 않습니다.
-
-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 9.1, Conditional Processing with xsl:if

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/import/index.html b/files/ko/web/xslt/import/index.html deleted file mode 100644 index 5a469656cb..0000000000 --- a/files/ko/web/xslt/import/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: import -slug: Web/XSLT/import -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/import ---- -

{{ XsltRef() }}

-

<xsl:import> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트로 가져오는 역할을 하는 최상위 요소입니다. 대체로, 가져올 스타일시트의 컨텐트는 가져오는 스타일시트의 컨텐트보다 가져오기 우선순위가 낮습니다. 이는 포함되는 스타일시트의 컨텐트가 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같은 <xsl:include>와는 뚜렷이 다릅니다.

-

문법

-
<xsl:import href=URI  />
-

필수 속성

-
-
- href
-
- 가져올 스타일시트의 URI를 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

최상위, 가져오는 스타일시트 안 <xsl:stylesheet>나 <xsl:transform>의 자식 가운데 가장 앞에 나타나야 함.

-

정의

-

XSLT section 2.6.2, Stylesheet Import

-

Gecko 지원

-

Mozilla 1.0 현재 최상위 변수와 매개변수에 문제가 조금 있지만 대부분 지원함.

diff --git a/files/ko/web/xslt/include/index.html b/files/ko/web/xslt/include/index.html deleted file mode 100644 index 965d03a15f..0000000000 --- a/files/ko/web/xslt/include/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: include -slug: Web/XSLT/include -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/include ---- -

{{ XsltRef() }}

-

<xsl:include> 요소는 한 스타일시트의 컨텐트를 다른 스타일시트에 합칩니다. <xsl:import>와는 달리, 포함되는 스타일시트의 컨텐트는 포함하는 스타일시트의 컨텐트와 우선순위가 정확히 같습니다.

-

문법

-
<xsl:include href=URI />
-

필수 속성

-
-
- href
-
- 포함할 스타일시트의 URI를 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식으로 나타남.

-

정의

-

XSLT section 2.6.1, Stylesheet Inclusion

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/key/index.html b/files/ko/web/xslt/key/index.html deleted file mode 100644 index 733196810d..0000000000 --- a/files/ko/web/xslt/key/index.html +++ /dev/null @@ -1,35 +0,0 @@ ---- -title: key -slug: Web/XSLT/key -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/key ---- -

{{ XsltRef() }}

-

<xsl:key> 요소는 key( ) 함수가 있는 스타일시트 어디서나 쓸 수 있는 이름 붙은 키를 선언합니다.

-

문법

-
<xsl:key name=NAME match=EXPRESSION
-	use=EXPRESSION />
-

필수 속성

-
-
- name
-
- 이 키에 이름을 지정합니다. QName이어야 합니다.
-
- match
-
- 이 키를 적용할 수 있는 노드를 정의합니다.
-
- use
-
- 적용가능한 각 노드에 키값을 결정하는데 쓸 수 있는 XPath 식을 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 12.2, Keys

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/message/index.html b/files/ko/web/xslt/message/index.html deleted file mode 100644 index d533a2d3c7..0000000000 --- a/files/ko/web/xslt/message/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: message -slug: Web/XSLT/message -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/message ---- -

{{ XsltRef() }}

-

<xsl:message> 요소는 (NS에서 자바스크립트 콘솔에) 메시지를 출력하고 선택에 따라 스타일시트 실행을 끝냅니다. 디버깅에 유용할 수 있습니다.

-

문법

-
<xsl:message terminate="yes" | "no" >
-	TEMPLATE
-</xsl:message>
-

필수 속성

-

없음.

-

선택 속성

-
-
- terminate
-
- "yes"로 설정하면, 실행을 끝마치는 게 좋겠다는 것을 나타냅니다. 기본값은 "no"이고 어느 경우에는 메시지가 출력하고 실행을 계속합니다.
-
-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 13, Messages

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/namespace-alias/index.html b/files/ko/web/xslt/namespace-alias/index.html deleted file mode 100644 index e085abc4e7..0000000000 --- a/files/ko/web/xslt/namespace-alias/index.html +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: namespace-alias -slug: Web/XSLT/namespace-alias -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/namespace-alias ---- -

{{ XsltRef() }}

-

<xsl:namespace-alias> 요소는 스타일시트 이름공간을 출력 트리의 다른 이름공간으로 매기는(map) 데 드물게 쓰는 방안(device)입니다. 이 요소의 가장 평범한 쓰임은 다른 스타일시트로부터 스타일시트를 만드는 것입니다. 보통 xsl:가 접두사로 붙은 (결과 트리에 단순히 복사해도 좋을) LRE(literal result element)를 처리기가 오해하는 것을 막기 위해, 결과 트리의 XSLT 이름공간에 적당하게 도로 다시 바꿀 임시 이름공간을 할당합니다.

-

문법

-
<xsl:namespace-alias stylesheet-prefix=NAME result-prefix=NAME />
-

필수 속성

-
-
- stylesheet-prefix
-
- 임시 이름공간을 지정합니다.
-
- result-prefix
-
- 결과 트리에 사용하길 바라는 이름공간을 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 7.1.1, Literal Result Elements

-

Gecko 지원

-

이번에 지원 안 함.

diff --git a/files/ko/web/xslt/number/index.html b/files/ko/web/xslt/number/index.html deleted file mode 100644 index b822625a0e..0000000000 --- a/files/ko/web/xslt/number/index.html +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: number -slug: Web/XSLT/number -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/number ---- -

{{ XsltRef() }}

-

<xsl:number> 요소는 숫자를 연속으로 셉니다. 또한 숫자를 빠르게 구성하는(format) 데도 쓸 수 있습니다.

-

구문

-
<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  />
-

필수 속성

-

없음.

-

선택 속성

-
-
- count
-
- 소스 트리에서 연속으로 셀 대상을 지정합니다. XPath 식을 씁니다.
-
-
-
- level
-
- 일련번호를 만드는데 소스 트리의 수준을 어떻게 고려해야 하는 지를 정의합니다. 유효한 값은 single, multiple, any 세 가지. 기본값은 single입니다.
-
-
-
-
-
- single
-
- 목록의 항목대로 연속으로 형제 노드를 번호 매깁니다. 처리기는 count 속성과 일치하는 ancestor-or-self 축의 첫 번째 노드로 갑니다. 그리고 나서 역시 count 속성과 일치하는 앞선 형제(preceding siblings) 노드(있다면, 한 짝인 from 속성에 이르러 멈춤)를 모두 더하여 셉니다. 일치하지 않으면, sequence는 빈 목록입니다.
-
-
-
-
-
-
-
- multiple
-
- 노드의 계층 위치를 반영하는 복합 sequence로 노드를 셉니다. 예를 들어, 1.2.2.5 (포개진 형식은 format 속성(예, A.1.1)으로 지정할 수 있습니다). 처리기는 만약 있다면 from 속성에 이르러 멈추며 현재 노드와 현재 노드의 모든 ancestors를 조사합니다. 일치하지 않으면, sequence는 빈 목록입니다.
-
-
-
-
-
-
-
- any (이번에 지원 안 함.)
-
- 수준을 무시하고 연속으로 일치하는 모든 노드를 셉니다. ancestor, self, preceding 축을 모두 고려합니다. 처리기는 현재 노드에서 시작하여 from 속성과 일치할 때 멈추며 문서 역순으로 진행합니다. 발견한 count 속성과 일치하지 않으면, sequence는 빈 목록입니다. 이 수준은 이번에 지원하지 않습니다.
-
-
-
-
-
- from
-
- 번호 매기기를 시작하거나 다시 시작하면 좋을 곳을 지정합니다. 순서는 from 특성과 일치하는 노드의 첫 번째 자손(descendant)에서 시작합니다.
-
-
-
- value
-
- 숫자에 주어진 형식을 적용합니다. 이것이 사용자 제공 숫자(노드 sequence 숫자와는 반대로)를 표준 <xsl:number> 형식으로 구성하는 빠른 방법입니다.
-
-
-
- format
-
- 만드는 숫자의 형식을 정의합니다.
-
-
-
-
-
- format="1"
-
- <tt>1 2 3 . . .</tt> (이번에 지원하는 유일한 형식)
-
-
-
-
-
-
-
- format="01"
-
- <tt>01 02 03 . . . 09 10 11 . . .</tt>
-
-
-
-
-
-
-
- format="a"
-
- <tt>a b c . . .y z aa ab . . .</tt>
-
-
-
-
-
-
-
- format="A"
-
- <tt>A B C . . . Y Z AA AB . . .</tt>
-
-
-
-
-
-
-
- format="i"
-
- <tt>i ii iii iv v . . .</tt>
-
-
-
-
-
-
-
- format="I"
-
- <tt>I II III IV V . . .</tt>
-
-
-
-
-
- lang (이번에는 지원 안 함)
-
- 문자에 기반을 둔 번호 매기기 형식에 쓰면 좋을 언어의 알파벳을 지정합니다.
-
-
-
- letter-value
-
- 문자(letter)를 쓰는 번호 매김 열(sequence) 사이를 명확하게 합니다. 어떤 언어는 문자(letter)를 쓰는 하나 이상의 번호 매기기 시스템이 있습니다. 두 시스템이 같은 토큰으로 시작하면, 모호함이 생길 수 있습니다. 이 속성은 "alphabetic"나 "traditional" 값일 수 있습니다. 기본값은 "alphabetic"입니다.
-
-
-
- grouping-separator
-
- 어떤 문자를 그룹(예로 천 단위) 구분자로 쓰면 좋을지를 지정합니다. 기본값은 쉼표(,)입니다.
-
-
-
- grouping-size
-
- 숫자 그룹을 만드는 자릿수를 나타냅니다. 기본값은 "3"입니다.
-
-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 7.7, Numbering

-

Gecko 지원

-

부분 지원. 위 해설을 보세요.

diff --git a/files/ko/web/xslt/otherwise/index.html b/files/ko/web/xslt/otherwise/index.html deleted file mode 100644 index 50249dc0b4..0000000000 --- a/files/ko/web/xslt/otherwise/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: otherwise -slug: Web/XSLT/otherwise -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/otherwise ---- -

{{ XsltRef() }}

-

<xsl:otherwise> 요소는 아무런 <xsl:when> 조건도 적용하지 않았을 때 취하면 좋을 동작을 정의하는 데 씁니다. 다른 프로그래밍 언어의 else나 default 경우와 비슷합니다.

-

문법

-
<xsl:otherwise>
-	TEMPLATE
-</xsl:otherwise>
-

필수 속성

-

없음.

-

선택 속성

-

없음.

-

타입

-

하위명령, 템플릿 안에서 <xsl:choose> 요소의 마지막 자식으로 나타나야 함.

-

정의

-

XSLT section 9.2, Conditional Processing with xsl:choose

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/output/index.html b/files/ko/web/xslt/output/index.html deleted file mode 100644 index 97baf3f433..0000000000 --- a/files/ko/web/xslt/output/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: output -slug: Web/XSLT/output -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/output ---- -

{{ XsltRef() }}

-

<xsl:output> 요소는 출력 문서의 특성을 조절합니다. method 속성이 있는 이 요소가 Netscape에서 정확하게 기능하도록 쓸 수 있어야 합니다. 7.0 현재, method="text"는 기대한 대로 동작합니다.

-

문법

-
<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  />
-

필수 속성

-

없음.

-

선택 속성

-
-
- method
-
- 출력 형식을 지정합니다.
-
-
-
- version
-
- 출력 문서에 XML이나 HTML 선언의 version 속성값을 지정합니다. 이 속성은 method="html"나 method="xml"일 때만 씁니다.
-
-
-
- encoding
-
- 출력 문서에 encoding 속성값을 지정합니다.
-
-
-
- omit-xml-declaration
-
- 출력에 XML 선언을 포함할 지를 나타냅니다. 가능한 값은 "yes"나 "no"입니다.
-
-
-
- standalone (지원 안 함.)
-
- 있으면, standalone 선언이 출력 문서에 나타나면 좋을 지를 나타내고 그 값을 줍니다. 가능한 값은 "yes"나 "no"입니다.
-
-
-
- doctype-public
-
- 출력 문서에 DOCTYPE 선언의 PUBLIC 속성값을 지정합니다.
-
-
-
- doctype-system
-
- 출력 문서에 DOCTYPE 선언의 SYSTEM 속성값을 지정합니다.
-
-
-
- cdata-section-elements
-
- CDATA 절에 써도 좋을 요소의 텍스트 컨텐트를 나열합니다. 요소는 공백으로 구분해야 합니다.
-
-
-
- indent (지원 안 함.)
-
- 출력에 계층 구조를 나타내도록 하면 좋을 지를 지정합니다.
-
-
-
- media-type (지원 안 함.)
-
- 출력 문서의 MIME 타입을 지정합니다.
-
-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 16, Output

-

Gecko 지원

-

부분 지원. 위 해설을 보세요.

diff --git a/files/ko/web/xslt/param/index.html b/files/ko/web/xslt/param/index.html deleted file mode 100644 index e1bcf36e19..0000000000 --- a/files/ko/web/xslt/param/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: param -slug: Web/XSLT/param -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/param ---- -

{{ XsltRef() }}

-

<xsl:param> 요소는 이름과 선택에 따라 기본값으로 매개변수를 설정합니다. 최상위 요소로 쓸 때, 매개변수는 전역입니다. <xsl:template> 요소 안에서 쓰면, 매개변수는 그 템플릿에 대해 지역입니다. 이 경우에 요소는 템플릿의 첫 자식 요소여야 합니다.

-

문법

-
<xsl:param name=NAME select=EXPRESSION>
-	TEMPLATE
-</xsl:param>
-

필수 속성

-
-
- name
-
- 파라미터에 이름을 붙입니다. 이름은 QName이어야 합니다.
-
-

선택 속성

-
-
- select
-
- none으로 지정하면 기본값을 제공하는 XPath 식을 씁니다.
-
-

타입

-

명령, 최상위 요소나 템플릿 안에 나타날 수 있음.

-

정의

-

XSLT section 11, Variables and Parameters

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/preserve-space/index.html b/files/ko/web/xslt/preserve-space/index.html deleted file mode 100644 index 771ffe81d6..0000000000 --- a/files/ko/web/xslt/preserve-space/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: preserve-space -slug: Web/XSLT/preserve-space -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/preserve-space ---- -

{{ XsltRef() }}

-

<xsl:preserve-space> 요소는 공백을 보존하면 좋을 소스 문서의 요소를 정의합니다. 하나 이상의 요소가 있으면, 공백 문자로 이름을 구분하세요. 공백 보존하기가 기본 설정이므로 이 요소는 오직 <xsl:strip-space> 요소와 거꾸로 동작하기 위해 쓸 필요가 있습니다.

-

문법

-
<xsl:preserve-space elements=LIST-OF-ELEMENT-NAMES  />
-

필수 속성

-
-
- elements
-
- 공백을 보존하면 좋을 요소를 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 3.4, Whitespace Stripping

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/processing-instruction/index.html b/files/ko/web/xslt/processing-instruction/index.html deleted file mode 100644 index ad1c6eaaf6..0000000000 --- a/files/ko/web/xslt/processing-instruction/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: processing-instruction -slug: Web/XSLT/processing-instruction -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/processing-instruction ---- -

{{ XsltRef() }}

-

<xsl:processing-instruction> 요소는 출력 문서에 처리 명령을 씁니다.

-

문법

-

<xsl:processing-instruction name=NAME> TEMPLATE </xsl:processing-instruction>

-

필수 속성

-
-
- name
-
- 처리 명령에 이름을 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 7.3, Creating Processing Instructions

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/sort/index.html b/files/ko/web/xslt/sort/index.html deleted file mode 100644 index 22217ec61f..0000000000 --- a/files/ko/web/xslt/sort/index.html +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: sort -slug: Web/XSLT/sort -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/sort ---- -

{{ XsltRef() }}

-

<xsl:sort> 요소는 <xsl:apply-templates>나 <xsl:for-each>가 선택한 노드에 정렬키를 정의하고 노드를 처리할 순서를 결정합니다.

-

문법

-
<xsl:sort
-	select=EXPRESSION
-	order="ascending" | "descending"
-	case-order="upper-first"| "lower-first"
-	lang=XML:LANG-CODE
-	data-type="html" | "xml" | "text" />
-

필수 속성

-

없음.

-

선택 속성

-
-
- select
-
- 정렬할 노드를 지정하는 XPath 식을 씁니다.
-
-
-
- order
-
- "ascending"나 "descending"으로 처리하면 좋을 노드를 지정합니다. 기본값은 "ascending"입니다.
-
-
-
- case-order
-
- 처음에 오는 게 대문자인지 소문자인지를 나타냅니다. 가능한 값은 "upper-first"와 "lower-first"입니다.
-
-
-
- lang
-
- 어떤 언어를 정렬에 쓸지를 지정합니다.
-
-
-
- data-type
-
- 어떤 항목을 알파벳순이나 숫자순으로 순서 매길지를 정의합니다. 가능한 값은 "text"와 기본값인 "text"가 있는 "number"입니다.
-
-

타입

-

하위명령, 항상 <xsl:for-each>의 자식으로 나타나고 고유(proper) 템플릿이나 <xsl:apply-templates> 앞에 나타나야 함.

-

정의

-

XSLT section 10, Sorting

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/strip-space/index.html b/files/ko/web/xslt/strip-space/index.html deleted file mode 100644 index 7bbc485afd..0000000000 --- a/files/ko/web/xslt/strip-space/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: strip-space -slug: Web/XSLT/strip-space -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/strip-space ---- -

{{ XsltRef() }}

-

<xsl:strip-space> 요소는 공백을 지웠으면 하는 소스 문서의 요소를 정의합니다.

-

문법

-
<xsl:strip-space elements=LIST-OF-ELEMENT-NAMES  />
-

필수 속성

-
-
- elements
-
- 지우면 좋을 공백뿐인 텍스트 노드가 있는 소스의 요소 목록(빈칸으로 구분)을 지정합니다.
-
-

선택 속성

-

없음.

-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 3.4, Whitespace Stripping

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/stylesheet/index.html b/files/ko/web/xslt/stylesheet/index.html deleted file mode 100644 index 0119cec645..0000000000 --- a/files/ko/web/xslt/stylesheet/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: stylesheet -slug: Web/XSLT/stylesheet -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/stylesheet ---- -

{{ XsltRef() }}

-

<xsl:stylesheet>(나 동등한 <xsl:transform>) 요소는 스타일시트의 최외곽 요소입니다.

-

이름공간 선언

-

pseudo 속성은 XSLT 스타일시트로 문서를 식별하기 위해 필요합니다. 대체로 이는 xmlns:xsl="http://www.w3.org/1999/XSL/Transform"입니다.

-

문법

-
<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>
-		ENTIRE STYLESHEET
-</xsl:stylesheet>
-

필수 속성

-
-
- version
-
- 이 스타일시트에 필요한 XSLT의 버전을 지정합니다.
-
-

선택 속성

-
-
- id (7.0 현재 오직 inline DTD가 명시하여 호출하는 경우만 지원함.)
-
- 이 스타일시트에 id를 지정합니다. 이는 스타일시트를 다른 XML 문서에 포함할 때 가장 자주 씁니다.
-
-
-
- extension-element-prefixes (지원 안 함.)
-
- 이 문서의 확장 요소에 빈칸으로 구분한 이름공간 접두사를 지정합니다.
-
-
-
- exclude-result-prefixes
-
- 이 문서에 쓸 출력 문서에 보내지 않았으면 하는 이름공간을 지정합니다. 목록은 공백으로 구분합니다.
-
-

타입

-

필수 최외곽 스타일시트 요소.

-

정의

-

XSLT section 2.2, Stylesheet Element

-

Gecko 지원

-

조금 지원. 위 해설을 보세요.

diff --git a/files/ko/web/xslt/template/index.html b/files/ko/web/xslt/template/index.html deleted file mode 100644 index 1ce4a66d2b..0000000000 --- a/files/ko/web/xslt/template/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: template -slug: Web/XSLT/template -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/template ---- -

{{ XsltRef() }}

-

<xsl:template> 요소는 출력 생성 템플릿을 정의합니다. 이 요소는 match 속성이나 name 속성 집합이 있어야 합니다.

-

문법

-
<xsl:template
-	match=PATTERN
-	name=NAME
-	mode=NAME
-	priority=NUMBER>
-	<xsl:param> [optional]
-	TEMPLATE
-</xsl:template>
-

필수 속성

-

없음.

-

선택 속성

-
-
- match
-
- 이 템플릿을 쓰면 좋을 요소를 결정하는 패턴을 지정합니다. name 속성이 없다면, 필수 속성입니다.
-
-
-
- name
-
- <xsl:call-template> 요소가 호출할 수 있는 이 템플릿에 이름을 지정합니다.
-
-
-
- mode
-
- 이 템플릿에 <xsl:apply-templates> 요소의 속성과 일치할 수 있는 특유한 모드를 지정합니다. 이는 같은 정보를 다양한 방식으로 처리하는데 유용합니다.
-
-
-
- priority
-
- 이 템플릿에 숫자로 된 우선권을 지정합니다. 이는 Infinity와 다른 아무 숫자일 수 있습니다. 처리기는 하나 이상의 템플릿이 같은 노드와 일치할 때 이 숫자를 씁니다.
-
-

타입

-

최상위, <xsl:stylesheet>나 <xsl:transform>의 자식이어야 함.

-

정의

-

XSLT section 5.3, Defining Template Rules

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/text/index.html b/files/ko/web/xslt/text/index.html deleted file mode 100644 index 71bd6eceda..0000000000 --- a/files/ko/web/xslt/text/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: text -slug: Web/XSLT/text -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/text ---- -

{{ XsltRef() }}

-

<xsl:text> 요소는 출력 트리에 리터럴(literal) 텍스트를 씁니다. #PCDATA, 리터럴 텍스트, 엔티티 참조를 포함할 지도 모릅니다.

-

구문

-
<xsl:text disable-output-escaping="yes" | "no">
-	TEXT
-</xsl:text>
-

필수 속성

-

없음.

-

선택 속성

-
-
- disable-output-escaping (Netscape은 변환 결과를 "output" 아래에 직렬하지 않습니다. 그래서 이 속성은 본래 문맥에서는 무의미합니다. HTML 엔티티를 출력하기 위해서는, 대신 숫자값을 쓰세요. 보기 &nbsp 대신 &#160)
-
- 특수 문자를 출력에 쓸 때 해석할(escape) 지를 지정합니다. 가능한 값은 "yes"나 "no"입니다. 예를 들어, "yes"로 하면, <tt>></tt> 문자의 출력은 "&gt"가 아니라 >입니다.
-
-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 7.2, Creating Text

-

Gecko 지원

-

적힌 대로 지원함

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 deleted file mode 100644 index c3ee407348..0000000000 --- a/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -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 ---- -
    -
  1. 개요
    2. -
  2. The XSLT/JavaScript Interface in Gecko:JavaScript/XSLT Bindings
    3. -
  3. The XSLT/JavaScript Interface in Gecko:Basic Example
    4. -
  4. The XSLT/JavaScript Interface in Gecko:Setting Parameters
    5. -
  5. The XSLT/JavaScript Interface in Gecko:Advanced Example
    6. -
  6. The XSLT/JavaScript Interface in Gecko:Interface List
    7. -
  7. The XSLT/JavaScript Interface in Gecko:Resources
    8. -
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 deleted file mode 100644 index dd74a5998d..0000000000 --- a/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/introduction/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Introduction -slug: Web/XSLT/The_XSLT_JavaScript_Interface_in_Gecko/Introduction -translation_of: Web/XSLT/XSLT_JS_interface_in_Gecko/Introduction ---- -

개요

-

XSLT를 지원하는 현대의 브라우저를 가지고, 개발자는 XSLT가 제공하는 힘에 접근하기 위해 자바스크립트를 지금 사용할 수 있다. 자바스크립트는 웹 프로그램이 XML자료를 로드하고, XSLT를 통해 표현가능한 형태로 처리하고 존재하는 문서안에 넣는 것을 가능하게 한다. XML자료는 아무런 표현자료 없이 오직 날 정보만을 포함하므로, 다이얼업에서도 빠르게 로드할 수 있다.

-

XSLT는 저자가 직접 문서구조를 다루는 것을 허용한다. 예로, XSLT는 요소의 재배열과 정렬을 수행한다. 또 결과 문서구조의 좀더 세분된 제어를 제공한다.

-

Mozilla 1.2현재 Gecko는 자바스크립트가 XSLT 프로세서를 만드는 것을 가능하게 한다. 이 글은 Gecko에서 XSLT/JavaScript binding을 다룬다. 이들은 Netscape 7.0x에서는 가능하지 않지만 Netscape 7.1에서는 가능하다.

-

{{ languages( { "en": "en/The_XSLT//JavaScript_Interface_in_Gecko/Introduction" } ) }}

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 deleted file mode 100644 index fb2f456e70..0000000000 --- a/files/ko/web/xslt/the_xslt_javascript_interface_in_gecko/setting_parameters/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -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 ---- -

Parameter 설정

-

이미 코딩된 .xsl과 .xml 파일을 이용하여 변환을 실행하는 것은 꽤 쓸모있는데, .xml파일을 JavaScript로부터 설정하는 것은 좀 더 쓸모있다.예로, JavaScript와 XSLT는 XML데이터를 정렬하여 표시하는 데 쓸 수 있다. 정렬은 오름차순과 내림차순을 바꿀 수 있어야 할 것이다. XSLT는 xsl:param 요소를 제공하는데, 그것은 xsl:stylesheet 요소의 자식이다. XSLTProcessor()는 이 파라메터와 상호작용하기 위해 3가지 JavaScript 메소드를 제공한다: setParameter, getParameter, removeParameter.

-


- 그들 모두 첫번째 아규먼트로 xsl:param 의 namespace URI를 얻는다. (보통 그 param은 기본 namespace로 떨어져, null에 전달되어 충분하다) xsl:param의 local name이 두번째 아규먼트다. setParameter는 세번쩨 아규먼트를 필요로 한다 - 즉 파라미터가 맞추어질 값.

-

그림 7 : Parameters

-
XSLT:
-<xsl:param name="myOrder" />
-
-JavaScript:
-
-var sortVal = xsltProcessor.getParameter(null, "myOrder");
-
-if (sortVal == "" || sortVal == "descending")
-  xsltProcessor.setParameter(null, "myOrder", "ascending");
-else
-  xsltProcessor.setParameter(null, "myOrder", "descending");
-
-

{{ languages( { "en": "en/The_XSLT//JavaScript_Interface_in_Gecko/Setting_Parameters" } ) }}

diff --git a/files/ko/web/xslt/transform/index.html b/files/ko/web/xslt/transform/index.html deleted file mode 100644 index 8071ebdad3..0000000000 --- a/files/ko/web/xslt/transform/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: transform -slug: Web/XSLT/transform -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/transform ---- -

{{ XsltRef() }}

-

<xsl:transform> 요소는 <xsl:stylesheet> 요소와 정확히 같습니다.

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/value-of/index.html b/files/ko/web/xslt/value-of/index.html deleted file mode 100644 index 90f1777bed..0000000000 --- a/files/ko/web/xslt/value-of/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: value-of -slug: Web/XSLT/value-of -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/value-of ---- -

{{ XsltRef() }}

-

<xsl:value-of> 요소는 XPath 식을 평가하여 그것을 문자열로 바꾸고 문자열을 결과 트리에 씁니다.

-

구문

-
<xsl:value-of select=EXPRESSION disable-output-escaping="yes" | "no"  />
-

필수 속성

-
-
- select
-
- 평가하고 출력 트리에 쓸 XPath 식을 지정합니다.
-
-

선택 속성

-
-
- disable-output-escaping (Netscape은 변환 결과를 "output" 아래에 직렬하지 않습니다. 그래서 이 속성은 본래 문맥에서는 무의미합니다. HTML 엔티티를 출력하기 위해서는, 대신 숫자값을 쓰세요. 보기 &nbsp 대신 &#160)
-
- 특수 문자를 출력에 쓸 때 해석할(escape) 지를 지정합니다. 가능한 값은 "yes"나 "no"입니다. 예를 들어, "yes"로 하면, <tt>></tt> 문자의 출력은 "&gt"가 아니라 >입니다.
-
-

타입

-

명령, 템플릿 안에 나타남.

-

정의

-

XSLT section 7.6.1, Generating Text with xsl:value-of

-

Gecko 지원

-

위 경우를 빼고는 지원함.

diff --git a/files/ko/web/xslt/variable/index.html b/files/ko/web/xslt/variable/index.html deleted file mode 100644 index 8568f70b20..0000000000 --- a/files/ko/web/xslt/variable/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: variable -slug: Web/XSLT/variable -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/variable ---- -

{{ XsltRef() }}

-

<xsl:variable> 요소는 스타일시트에 전역 변수나 지역 변수를 선언하고 그 변수에 값을 줍니다. XSLT가 부작용(side-effect)을 허용하지 않기 때문에, 변수값을 한 번 주면 그 변수는 범위(scope)를 벗어날 때까지 같은 값입니다.

-

구문

-
<xsl:variable name=NAME select=EXPRESSION >
-	TEMPLATE
-</xsl:variable>
-

필수 속성

-
-
- name
-
- 변수에 이름을 줍니다.
-
-

선택 속성

-
-
- select
-
- 변수값을 XPath 식으로 정의합니다. 요소가 템플릿을 포함하면, 이 속성은 무시합니다.
-
-

타입

-

최상위 또는 명령. 최상위 요소로 나타나면, 변수의 범위는 전역이고 문서 전체에서 접근할 수 있습니다. 템플릿 안에 나타나면, 번수의 범위는 지역이고 나타난 템플릿 안에서만 접근할 수 있습니다.

-

정의

-

XSLT section 11, Variables and Parameters

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/when/index.html b/files/ko/web/xslt/when/index.html deleted file mode 100644 index 4d5f52d9c3..0000000000 --- a/files/ko/web/xslt/when/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: when -slug: Web/XSLT/when -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/when ---- -

{{ XsltRef() }}

-

<xsl:when> 요소는 항상 case 문처럼 동작하는 <xsl:choose> 요소 안에 나타납니다.

-

문법

-
<xsl:when test=EXPRESSION>
-	TEMPLATE
-</xsl:when>
-

필수 속성

-
-
- test
-
- 평가할 boolean 식을 지정합니다. 참이면, 요소의 컨텐트는 처리하고 거짓이면, 무시합니다.
-
-

선택 속성

-

없음.

-

타입

-

하위명령, 항상 <xsl:choose> 요소 안에 나타남.

-

정의

-

XSLT section 9.2, Conditional Processing with xsl:choose

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/with-param/index.html b/files/ko/web/xslt/with-param/index.html deleted file mode 100644 index cd96049cc5..0000000000 --- a/files/ko/web/xslt/with-param/index.html +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: with-param -slug: Web/XSLT/with-param -tags: - - XSLT_Reference -translation_of: Web/XSLT/Element/with-param ---- -

{{ XsltRef() }}

-

<xsl:with-param> 요소는 템플릿에 건네는 매개변수 값을 지정합니다.

-

문법

-
<xsl:with-param name=NAME select=EXPRESSION>
-	TEMPLATE
-</xsl:with-param>
-

필수 속성

-
-
- name
-
- 이 매개변수에 이름을 줍니다.
-
-

선택 속성

-
-
- select
-
- XPath 식을 거치는 매개변수 값을 정의합니다. 요소가 템플릿을 포함하면, 이 속성은 무시합니다.
-
-

타입

-

하위명령, 항상 <xsl:apply-templates>이나 code><xsl:call-template></code> 요소 안에 나타남.

-

정의

-

XSLT section 11.6, Passing Parameters to Templates

-

Gecko 지원

-

지원함.

diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/index.html new file mode 100644 index 0000000000..c3ee407348 --- /dev/null +++ b/files/ko/web/xslt/xslt_js_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 +--- +
    +
  1. 개요
    2. +
  2. The XSLT/JavaScript Interface in Gecko:JavaScript/XSLT Bindings
    3. +
  3. The XSLT/JavaScript Interface in Gecko:Basic Example
    4. +
  4. The XSLT/JavaScript Interface in Gecko:Setting Parameters
    5. +
  5. The XSLT/JavaScript Interface in Gecko:Advanced Example
    6. +
  6. The XSLT/JavaScript Interface in Gecko:Interface List
    7. +
  7. The XSLT/JavaScript Interface in Gecko:Resources
    8. +
diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/introduction/index.html new file mode 100644 index 0000000000..dd74a5998d --- /dev/null +++ b/files/ko/web/xslt/xslt_js_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 +--- +

개요

+

XSLT를 지원하는 현대의 브라우저를 가지고, 개발자는 XSLT가 제공하는 힘에 접근하기 위해 자바스크립트를 지금 사용할 수 있다. 자바스크립트는 웹 프로그램이 XML자료를 로드하고, XSLT를 통해 표현가능한 형태로 처리하고 존재하는 문서안에 넣는 것을 가능하게 한다. XML자료는 아무런 표현자료 없이 오직 날 정보만을 포함하므로, 다이얼업에서도 빠르게 로드할 수 있다.

+

XSLT는 저자가 직접 문서구조를 다루는 것을 허용한다. 예로, XSLT는 요소의 재배열과 정렬을 수행한다. 또 결과 문서구조의 좀더 세분된 제어를 제공한다.

+

Mozilla 1.2현재 Gecko는 자바스크립트가 XSLT 프로세서를 만드는 것을 가능하게 한다. 이 글은 Gecko에서 XSLT/JavaScript binding을 다룬다. 이들은 Netscape 7.0x에서는 가능하지 않지만 Netscape 7.1에서는 가능하다.

+

{{ languages( { "en": "en/The_XSLT//JavaScript_Interface_in_Gecko/Introduction" } ) }}

diff --git a/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html b/files/ko/web/xslt/xslt_js_interface_in_gecko/setting_parameters/index.html new file mode 100644 index 0000000000..fb2f456e70 --- /dev/null +++ b/files/ko/web/xslt/xslt_js_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 +--- +

Parameter 설정

+

이미 코딩된 .xsl과 .xml 파일을 이용하여 변환을 실행하는 것은 꽤 쓸모있는데, .xml파일을 JavaScript로부터 설정하는 것은 좀 더 쓸모있다.예로, JavaScript와 XSLT는 XML데이터를 정렬하여 표시하는 데 쓸 수 있다. 정렬은 오름차순과 내림차순을 바꿀 수 있어야 할 것이다. XSLT는 xsl:param 요소를 제공하는데, 그것은 xsl:stylesheet 요소의 자식이다. XSLTProcessor()는 이 파라메터와 상호작용하기 위해 3가지 JavaScript 메소드를 제공한다: setParameter, getParameter, removeParameter.

+


+ 그들 모두 첫번째 아규먼트로 xsl:param 의 namespace URI를 얻는다. (보통 그 param은 기본 namespace로 떨어져, null에 전달되어 충분하다) xsl:param의 local name이 두번째 아규먼트다. setParameter는 세번쩨 아규먼트를 필요로 한다 - 즉 파라미터가 맞추어질 값.

+

그림 7 : Parameters

+
XSLT:
+<xsl:param name="myOrder" />
+
+JavaScript:
+
+var sortVal = xsltProcessor.getParameter(null, "myOrder");
+
+if (sortVal == "" || sortVal == "descending")
+  xsltProcessor.setParameter(null, "myOrder", "ascending");
+else
+  xsltProcessor.setParameter(null, "myOrder", "descending");
+
+

{{ languages( { "en": "en/The_XSLT//JavaScript_Interface_in_Gecko/Setting_Parameters" } ) }}

diff --git "a/files/ko/web/\354\260\270\354\241\260/api/index.html" "b/files/ko/web/\354\260\270\354\241\260/api/index.html" deleted file mode 100644 index 363fa9d3e9..0000000000 --- "a/files/ko/web/\354\260\270\354\241\260/api/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Web API 설명집 -slug: Web/참조/API -tags: - - API - - 대문 - - 웹 - - 편람 -translation_of: Web/Reference/API ---- -

여러분이 알고 있는 웹에는 여러 유용한 작업을 수행할 수 있는 다양한 API가 제공됩니다. 이러한 API는 자바스크립트(JavaScript) 코드를 사용하여 접근할 수 있으며 {{domxref("window")}}나 {{domxref("element")}}에 대한 간단한 작업에서부터 WebGL이나 Web Audio와 같은 API를 사용해 복잡한 그래픽 및 오디오 효과를 만들어내는 것까지 가능합니다.

- -

모든 API에 대한 각각의 인터페이스는 색인에 열거돼 있습니다.

- -

또한 이벤트 레퍼런스에 이용가능한 모든 이벤트 목록도 있습니다.

- -
-
-
-
문서 객체 모델(Document Object Model)
-
DOM은 문서를 조회하거나 수정할 수 있는 API입니다. 문서의 {{domxref("Node")}} 및 {{domxref("Element")}}를 조작할 수 있습니다. HTML, XML, SVG는 DOM을 확장함으로써 각각의 실제적인 요소(element)를 조작합니다.
-
디바이스 API
-
본 API는 웹 페이지 및 애플리케이션에서 사용할 수 있는 다양한 하드웨어 기능을 조작합니다. 예: 주변 조명 센서 API, 배터리 상태 API, 지리적 위치 API, 포인터 잠금 API, 근접 API, 디바이스 방향성 API, 화면 방향성 API, 진동 API.
-
커뮤니케이션 API
-
본 API는 웹 페이지 및 애플리케이션에서 다른 페이지나 기기와 통신할 수 있습니다. 예: 네트워크 정보 API, 웹 알림, 단순 푸시 API.
-
데이터 관리 API
-
본 API는 사용자 데이터를 보관하고 관리할 수 있습니다. 예: FileHandle API, IndexedDB.
-
- -

이러한 API는 어떠한 웹 사이트나 앱에서도 사용할 수 있지만 한정 권한 및 공인 애플리케이션에서는 더 강력한 Mozilla API 셋을 사용하실 수 있습니다.

- -
-
한정 권한 API
-
한정 권한 애플리케이션은 설치 방식 앱으로서 사용자가 특정 권리를 허용한 것입니다. 한정 권한 API로는 TCP 소켓 API, 주소록 API, 디바이스 스토리지 API, 브라우저 API 등이 있습니다.
-
공인 API
-
공인된 애플리케이션은 파이어폭스 OS와 같은 운영체제에 중요한 조작을 수행하는 저층(low-level) 애플리케이션입니다. 한정 권한이 낮은 애플리케이션은 Web Activities를 사용하여 이러한 애플리케이션과 소통합니다. 공인 API로는 블루투스 API, 모바일 연결 API, 네트워크 상태 API, 전화 기능,WebSMS, 와이파이 정보 API, 카메라 API, 전원 관리 API, 설정 API, 대기 API,사용 권한 API, 시간/시계 API 등이 있습니다.
-
-
- -
-

커뮤니티

- -

저희 메일링 리스트나 뉴스그룹를 통해 Web API 커뮤니티에 참여하세요.

- - - -

IRC에서 #webapi 채널의 실시간 토론도 꼭 참여하세요.

- - - -

다음 주제도 확인해보세요.

- - -
-
- -

 

diff --git "a/files/ko/web/\354\260\270\354\241\260/index.html" "b/files/ko/web/\354\260\270\354\241\260/index.html" deleted file mode 100644 index f8d1a1dc35..0000000000 --- "a/files/ko/web/\354\260\270\354\241\260/index.html" +++ /dev/null @@ -1,30 +0,0 @@ ---- -title: 웹 기술 문서 목록 -slug: Web/참조 -tags: - - Landing - - Reference - - Web -translation_of: Web/Reference ---- -

{{draft()}}
- 오픈 웹은 많은 기술을 사용하여 구축됩니다. 이 기술들을 사용하기 위해서는 적절한 지식이 필요합니다.
- 아래에서 각각의 참조 자료에 대한 링크를 찾아볼 수 있습니다.

- -

웹 기술들

- -

여러분에게 웹과 함께 시작하기를 추천하지만, 필수는 아닙니다.

- -
-
HTML — Structuring the web
-
하이퍼텍스트 마크업언어(HyperText Markup Language)는 의미론적으로 웹 페이지의 콘텐츠(마크업)를 잘 구조화된 형식으로 의미론적으로 정의하고 표현하는데 사용됩니다. HTML은 HTML 요소(HTML elements)라고 불리는 불록으로 구성된 구조화된 문서를 작성하는 방법을 제공합니다. HTML요소는 태그로 구분되며, 꺽쇠괄호(<>)를 사용하여 표현합니다. 일부는 페이지에 직접 내용을 소개하고, 다른 일부는 문서 텍스트에 대한 정보를 제공하고, 다른 태그는 하위 요소로 포함할 수 있습니다. 분명히, 브라우저는 페이지 내용을 해석하는데 사용하기 때문에, 그대로 문서에 보여주지 않습니다.
-
- HTML 소개| HTML 배우기 | HTML5 | 개발자 가이드 | HTML 요소 레퍼런스 | HTML 참조
-
CSS — Styling the web
-
Cascading Style Sheets 는 웹 컨텐츠의 모양을 꾸미는데 사용합니다.
-
- CSS 소개 | CSS 시작하기 | CSS 배우기 | CSS3 | 개발자 가이드 | 일반적인 CSS 질문들 | CSS 참조
-
JavaScript — Dynamic client-side scripting
-
JavaScript 프로그래밍 언어는 사용자와의 대화식 이용 및 그외 동적 기능을 웹 사이트에 추가하는데 사용됩니다.
-
자바스크립트 배우기 | 개발자 가이드 | 자바스크립트 참조
-
diff --git a/files/ko/web_development/index.html b/files/ko/web_development/index.html deleted file mode 100644 index 6dc2104009..0000000000 --- a/files/ko/web_development/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Web Development -slug: Web_Development -tags: - - Web Development -translation_of: Web/Guide -translation_of_original: Web_Development ---- -
- 웹 개발은 웹 사이트 그리고 웹 응용프로그램 개발을 (양자를 포괄적으로) 포함하고 있습니다.
- - - - - - - -
-

문서

-
-
- Migrate apps from Internet Explorer to Mozilla
-
- Doron Rosenberg가 가지고 계신 웹 응용프로그램이 IE와 Mozilla에서 동작하는지 확인하는 법을 알려줍니다.
-
-
-
- Using URL values for the cursor property
-
- Gecko 1.8 (Firefox 1.5, SeaMonkey 1.0)는 마우스 커서를 마음대로 지정할 수 있게 하는 CSS2 cursor property를 위한 URL 값을 지원합니다.
-
-

 

-
-
- Using Firefox 1.5 caching
-
- Firefox 1.5는 메모리에 JavaScript상태 값을 포함한 웹 페이지 전체를 캐시합니다. 방문한 페이지 사이에 "뒤로", "앞으로"의 이동은 페이지를 중복해서 불러올 필요가 없을 뿐더러 JavaScript상태 값을 보존합니다. 이러한 특징들은 웹 서핑을 매우 빠르게 해줍니다.
-
-


- 모두 보기...

- 		-

커뮤니티

-
    -
  • Mozilla 포럼 보기...
    • -
-

{{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}

- -

도구

- -

모두 보기...

-

관련 주제

-
-
- AJAX, CSS, HTML, JavaScript, Web Standards, XHTML, XML
-
-
-

Categories

-

Interwiki Language Links

-

 

-

{{ languages( { "en": "en/Web_Development" } ) }}

diff --git a/files/ko/webapi/battery_status/index.html b/files/ko/webapi/battery_status/index.html deleted file mode 100644 index 12347b0f20..0000000000 --- a/files/ko/webapi/battery_status/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: Battery Status API -slug: WebAPI/Battery_Status -tags: - - API - - Apps - - Battery API - - Battery Status API - - Obsolete - - 가이드 - - 개요 - - 모바일 - - 배터리 - - 어플리케이션 -translation_of: Web/API/Battery_Status_API ---- -
{{DefaultAPISidebar("Battery API")}}{{Obsolete_Header}}
- -

Battery API 만큼이나 자주 언급되는 Battery Status API는 시스템의 배터리 충전 상태에 대한 정보를 제공하고, 배터리 상태에 따라 발생하는 이벤트를 다룰 수 있도록 해 줍니다. 배터리가 얼마남지 않은 상황에서, 앱에서 배터리의 소모를 줄인다거나 배터리가 방전되기 전에 데이터를 저장하거나 하는 것들이 가능합니다.

- -

Battery Status API 는 {{domxref("window.navigator.battery")}} 를 제공 합니다. 이는 {{domxref("BatteryManager")}} 객체이며 배터리 상태를 감시하고 전달받아 처리할 수 있는 이벤트를 가지고 있습니다.

- -

예제

- -

아래 예제에서는 배터리가 충전중인 상태 (전원 케이블을 연결하여 충전 중인지) 와 배터리 수준의 변화를 감시합니다. 각각 {{event("chargingchange")}} 와 {{event("levelchange")}} 이벤트가 발생하면 완료 됩니다.

- -
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
-
-function updateBatteryStatus() {
-  console.log("Battery status: " + battery.level * 100 + " %");
-
-  if (battery.charging) {
-    console.log("Battery is charging");
-  }
-}
-
-battery.addEventListener("chargingchange", updateBatteryStatus);
-battery.addEventListener("levelchange", updateBatteryStatus);
-updateBatteryStatus();
-
- -

명세서의 예제도 확인해보세요.

- -

사양

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("Battery API")}}{{Spec2("Battery API")}}Initial definition.
- -

브라우저 호환성

- - - -

{{Compat("api.BatteryManager")}}

- -

더보기

- - diff --git a/files/ko/webapi/detecting_device_orientation/index.html b/files/ko/webapi/detecting_device_orientation/index.html deleted file mode 100644 index 664842f66d..0000000000 --- a/files/ko/webapi/detecting_device_orientation/index.html +++ /dev/null @@ -1,273 +0,0 @@ ---- -title: 기기 방향 감지하기 -slug: WebAPI/Detecting_device_orientation -translation_of: Web/API/Detecting_device_orientation ---- -
{{SeeCompatTable}}
- -

요약

- -

웹을 이용 가능한 기기들은 자신들의 방향을 알 수 있게 되었다. 즉, 중력과의 관계에서 자신의 방향의 변화를 나타내는 데이터를 알 수 있다는 뜻이다. 특히, 휴대 전화와 같이 손에 쥐고 쓸 수 있는 기기들은 이 정보를 화면을 수직으로 유지하기 위해 자동으로 회전시키는데 사용할 수 있고, 기기가 회전되어서 폭이 높이보다 길 때는 와이드 스크린으로 표시할 수 있게 된다.

- -

방향 정보를 다루는 두 가지 방법의 JavaScript 이벤트가 있다. 첫 번째는 {{domxref("DeviceOrientationEvent")}}로 가속도계가 기기의 방향의 변화를 감지했을 때 발생한다.  이 방향 이벤트들에 의해 보고되는 데이터를 받아서 처리함으로써, 사용자들이 기기를 움직이여서 생기는 방향과 높이의 변화를 상호 작용적으로 응답할 수 있게 된다.

- -

두 번째 이벤트는 {{domxref("DeviceMotionEvent")}}로 가속도에 변화가 일어났을 때 발생한다. 이 이벤트는 {{domxref("DeviceOrientationEvent")}}와는 방향이 아닌 가속도를 감지하고 있다는 점에서 다르다. 일반적으로{{domxref("DeviceMotionEvent")}}를 감지할 수 있는 센서들은 저장 장치들을 충격으로부터 보호하기 위해 노트북에서 사용되는 센서들을 포함한다. {{domxref("DeviceOrientationEvent")}}는 모바일 기기에서 주로 더 많이 나타난다.

- -

방향 이벤트 처리하기

- -

방향의 변화를 받기 위해 여러분이 해야하는 것은 {{ event("deviceorientation") }} 이벤트에 리스너를 등록하는 것 뿐이다:

- -
window.addEventListener("deviceorientation", handleOrientation, true);
-
- -

이벤트 리스너를 등록한 후에는 (여기에서는 JavaScript 함수 handleOrientation()), 리스너 함수가 업데이트 된 방향 데이터와 함께 주기적으로 호출된다.

- -

방향 이벤트는 다음 네 개의 값을 가진다:

- -
    -
  • {{ domxref("DeviceOrientationEvent.absolute") }}
    • -
  • {{ domxref("DeviceOrientationEvent.alpha") }}
    • -
  • {{ domxref("DeviceOrientationEvent.beta") }}
    • -
  • {{ domxref("DeviceOrientationEvent.gamma") }}
    • -
- -

이벤트 핸들러 함수는 보통 다음과 같다:

- -
function handleOrientation(event) {
-  var absolute = event.absolute;
-  var alpha    = event.alpha;
-  var beta     = event.beta;
-  var gamma    = event.gamma;
-
-  // Do stuff with the new orientation data
-}
-
- -

방향 값 설명

- -

각 축으로부터 보고된 값은 표준 좌표계 축을 중심으로 회전한 양을 가리킨다. 더 자세한 내용은 Orientation and motion data explained 문서에 나와있으며, 다음은 이를 간략하게 요약한 것이다.

- -
    -
  • {{ domxref("DeviceOrientationEvent.alpha") }} 값은 0도부터 360도까지 범위의 z축을 중심으로 한 기기의 움직임을 나타낸다.
    • -
  • {{ domxref("DeviceOrientationEvent.beta") }} 값은 -180도부터 180도까지 범위의 x축을 줌심으로 한 기기의 움직임을 나타낸다. 이는 기기의 앞뒤 움직임을 나타낸다.
    • -
  • {{ domxref("DeviceOrientationEvent.gamma") }} 값은 -90도부터 90도까지 범위의 y축을 중심으로 한 기기의 움직임을 나타낸다. 이는 기기의 좌우 움직임을 나타낸다.
    • -
- -

방향 예제

- -

이 예제는 {{event("deviceorientation")}} 이벤트를 지원하고 방향을 감지할 수 있는 기기에서 실행중인 모든 브라우저에서 작동한다.

- -

자 그럼, 정원에 공이 하나 있다고 상상해보자:

- -
<div class="garden">
-  <div class="ball"></div>
-</div>
-
-<pre class="output"></pre>
-
- -

이 정원은 가로 세로 200 픽셀이고(그렇다, 작은 정원이다), 정 중앙에 공이 있다:

- -
.garden {
-  position: relative;
-  width : 200px;
-  height: 200px;
-  border: 5px solid #CCC;
-  border-radius: 10px;
-}
-
-.ball {
-  position: absolute;
-  top   : 90px;
-  left  : 90px;
-  width : 20px;
-  height: 20px;
-  background: green;
-  border-radius: 100%;
-}
-
- -

이제, 우리가 기기를 움직이면 공도 따라서 움직일 것이다:

- -
var ball   = document.querySelector('.ball');
-var garden = document.querySelector('.garden');
-var output = document.querySelector('.output');
-
-var maxX = garden.clientWidth  - ball.clientWidth;
-var maxY = garden.clientHeight - ball.clientHeight;
-
-function handleOrientation(event) {
-  var x = event.beta;  // In degree in the range [-180,180]
-  var y = event.gamma; // In degree in the range [-90,90]
-
-  output.innerHTML  = "beta : " + x + "\n";
-  output.innerHTML += "gamma: " + y + "\n";
-
-  // Because we don't want to have the device upside down
-  // We constrain the x value to the range [-90,90]
-  if (x >  90) { x =  90};
-  if (x < -90) { x = -90};
-
-  // To make computation easier we shift the range of
-  // x and y to [0,180]
-  x += 90;
-  y += 90;
-
-  // 10 is half the size of the ball
-  // It center the positionning point to the center of the ball
-  ball.style.top  = (maxX*x/180 - 10) + "px";
-  ball.style.left = (maxY*y/180 - 10) + "px";
-}
-
-window.addEventListener('deviceorientation', handleOrientation);
-
- -

여기 실제로 실행해 볼 수 있는 예제이다:

- -
{{ EmbedLiveSample('Orientation_example', '230', '260') }}
- -
-

경고: Chrome과 Firefox는 동일한 방식으로 각을 다루지 않습니다. 그래서 어떤 축의 방향은 반대가 됩니다.

-
- -

모션 이벤트 처리하기

- -

모션 이벤트는 이벤트 이름이 {{ event("devicemotion") }}으로 다르다는 점을 제외하면, 방향 이벤트를 처리하는 방법과 동일하다.

- -
window.addEventListener("devicemotion", handleMotion, true);
- -

HandleMotion 함수의 파라미터로 넘겨진 {{ domxref("DeviceMotionEvent") }} 객체에 실제로 변화된 정보들이 담겨져 있다.

- -

모션 이벤트는 다음 네 가지 속성을 가진다:

- -
    -
  • {{ domxref("DeviceMotionEvent.acceleration") }}
    • -
  • {{ domxref("DeviceMotionEvent.accelerationIncludingGravity") }}
    • -
  • {{ domxref("DeviceMotionEvent.rotationRate") }}
    • -
  • {{ domxref("DeviceMotionEvent.interval") }}
    • -
- -

모션 값 설명

- -

{{ domxref("DeviceMotionEvent") }} 객체는 웹 개발자들에게 기기의 위치와 방향의 변화 속도에 관한 정보를 제공한다. 세 개의 축에 따라 변화한 정보가 제공된다 (자세한 내용은 Orientation and motion data explained 문서를 참조).

- -

{{domxref("DeviceMotionEvent.acceleration","acceleration")}}과 {{domxref("DeviceMotionEvent.accelerationIncludingGravity","accelerationIncludingGravity")}}에서, 각 축은 다음에 해당된다:

- -
    -
  • x: 서쪽에서 동쪽으로 나타나는 축을 의미한다
    • -
  • y: 남쪽에서 북쪽으로 나타나는 축을 의미한다
    • -
  • z: 땅에서 수직으로 나타나는 축을 의미한다
    • -
- -

{{domxref("DeviceMotionEvent.rotationRate","rotationRate")}}에서, 조금은 다르게, 각 값들은 다음에 해당된다:

- -
    -
  • alpha: 화면(또는 데스크탑의 키보드)에 수직인 축을 따른 회전율을 의미한다
    • -
  • beta: 화면(또는 데스크탑의 키보드)의 평면의 왼쪽에서 오른쪽으로 나타나는 축을 따른 회전율을 의미한다
    • -
  • gamma: 화면(또는 데스크탑의 키보드)의 평면의 아래에서 위쪽으로 나타나는 축을 따른 회전율을 의미한다
    • -
- -

마지막으로, {{domxref("DeviceMotionEvent.interval","interval")}}은 기기에서 데이터를 얻을 수 있는 시간 간격(단위는 밀리초)을 의미한다.

- -

스펙

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
- -

브라우저 호환성

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
{{domxref("DeviceOrientationEvent")}}7.03.6[1]
- 6		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
{{domxref("DeviceOrientationEvent")}}3.03.6[1]
- 6		{{ CompatNo() }}{{ CompatNo() }}4.2
{{domxref("DeviceMotionEvent")}}{{ CompatVersionUnknown() }}6{{ CompatUnknown() }}{{ CompatUnknown() }}4.2
-
- -

Gecko 구현 참고 사항

- -
    -
  1. Firefox 3.6, 4, 5는 표준인 {{domxref("DeviceOrientationEvent")}} 이벤트가 아닌 mozOrientation 을 지원한다
    2. -
- -

참고 자료

- - diff --git a/files/ko/webapi/index.html b/files/ko/webapi/index.html deleted file mode 100644 index 07c0c99acb..0000000000 --- a/files/ko/webapi/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: WebAPI -slug: WebAPI -tags: - - Apps - - DOM - - Firefox OS - - Mobile - - NeedsTranslation - - TopicStub -translation_of: Web/API -translation_of_original: WebAPI ---- -

WebAPI는 웹 앱과 웹 콘텐츠가 기기의 하드웨어에 접근(배터리 상태나 기기의 진동 하드웨어 등)하고 기기의 데이터 저장소에 접근(달력이나 주소록 목록 등)할 수 있도록 해주는 기기 호환과 접근 API의 모음을 나타내는 단어입니다. 이러한 API를 추가함으로써 오늘날 웹이 할 수 있는 일과 과거에 특정 플랫폼에서만 가능했던 일들이 확장되기를 희망합니다.

- -
-

Note: 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 WebAPI doc status page, where we're tracking work on WebAPI docs.

-
- -
-
-

Communication APIs

- -
-
Network Information API
-
현재 네트워크 연결에 대한 연결 속도와 같은 기본 정보를 알려줍니다.
-
- -
-
Bluetooth
-
WebBluetooth API는 기기의 Bluetooth에 로우레벨 접근을 할 수 있게 해 줍니다.
-
Mobile Connection API {{NonStandardBadge}}
-
Exposes information about the device's cellular connectivity, such as signal strength, operator information, and so forth.
-
Network Stats API
-
Monitors data usage and exposes this data to privileged applications.
-
Telephony {{NonStandardBadge}}
-
Lets apps place and answer phone calls and use the built-in telephony user interface.
-
WebSMS {{NonStandardBadge}}
-
앱들이 SMS 문자 메시지를 주고 받게 하고, 장치에 저장된 메시지들을 접근하고 관리 하도록 해줍니다.
-
WiFi Information API {{NonStandardBadge}}
-
A privileged API which provides information about signal strength, the name of the current network, available WiFi networks, and so forth.
-
- -

Hardware access APIs

- -
-
Ambient Light Sensor API
-
광센서에 접근할 수 있게 해서 앱이 기기 주변의 밝기를 감지할 수 있게 해 줍니다.
-
Battery Status API
-
배터리의 충전 정보 및 현재 기기가 충전 중인지 여부에 대한 정보를 제공 합니다.
-
Geolocation API
-
Provides information about the device's physical location.
-
Pointer Lock API
-
Lets apps lock access to the mouse and gain access to movement deltas rather than absolute coordinates; this is great for gaming.
-
Proximity API
-
Lets you detect proximity of the device to a nearby object, such as the user's face.
-
Device Orientation API
-
기기의 방향 변화를 감지하여 알려줍니다.
-
Screen Orientation API
-
화면의 방향 변화를 감지하여 알려줍니다. 앱이 어떤 방향을 선호하는지 지정하는데에도 사용 할 수 있습니다.
-
Vibration API
-
Lets apps control the device's vibration hardware for things such as haptic feedback in games. This is not intended for things such as notification vibrations. See the Alarm API for that.
-
Camera API {{NonStandardBadge}}
-
Allows apps to take photographs and/or record video using the device's built-in camera.
-
Power Management API {{NonStandardBadge}}
-
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.
-
- -

View All...

-
- -
-

Data management APIs

- -
-
- -
-
FileHandle API
-
Provides support for writable files with locking support.
-
IndexedDB
-
고성능 검색을 지원하는 클라이언트측의 구조화된 데이터 저장소입니다.
-
- -
-
Settings API {{NonStandardBadge}}
-
Lets apps examine and change system-wide configuration options that are permanently stored on the device.
-
- -

Other APIs

- -
-
Alarm API
-
Lets apps schedule notifications. Also provides support for automatically launching an app at a specific time.
-
Simple Push API
-
Lets the platform send notification messages to specific applications.
-
Web Notifications
-
Lets applications send notifications displayed at the system level.
-
Apps API {{NonStandardBadge}}
-
The Open WebApps API provides support for installing and managing Web apps. In addition, support is provided to let apps determine payment information.
-
Web Activities {{NonStandardBadge}}
-
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.
-
WebPayment API {{NonStandardBadge}}
-
Lets Web content initiate payments and refunds for virtual goods.
-
Browser API {{NonStandardBadge}}
-
Provides support for building a Web browser completely using Web technologies (in essence, a browser within a browser).
-
- -
-
Idle API
-
Lets apps receive notifications when the user is not actively using the device.
-
Permissions API {{NonStandardBadge}}
-
Manages app permissions in a centralized location. Used by the Settings app.
-
Time/Clock API {{NonStandardBadge}}
-
현재 시각을 설정할 수 있게 해 줍니다. 시간대는 Settings API를 이용해서 설정할 수 있습니다.
-
- -

WebAPI community

- -

If you need help with these APIs, there are several ways you can talk to other developers making use of them.

- -
    -
  • Consult the WebAPI forum: {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}
    • -
  • Visit the WebAPI IRC channel: #webapi
    • -
- -

Don't forget about the netiquette...

- - - - -
-
- -

 

diff --git a/files/ko/webapi/managing_screen_orientation/index.html b/files/ko/webapi/managing_screen_orientation/index.html deleted file mode 100644 index 934384d0bf..0000000000 --- a/files/ko/webapi/managing_screen_orientation/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Managing screen orientation -slug: WebAPI/Managing_screen_orientation -translation_of: Web/API/CSS_Object_Model/Managing_screen_orientation ---- -

{{SeeCompatTable}}

-

Summary

-

Screen orientation 은 device orientation 과는 조금 다르다. 비록 장치가 방향을 감지 못하더라도 화면은 언제나 방향을 가지고 있다. 그리고 만약 장치가 방향을 알 수 있더라도 웹 어플리케이션의 인터페이스를 유지하거나 적응하기 위해 화면의 방향을 조정하는 능력을 갖는게 좋다.

-

화면의 방향을 다루기 위한 여러 방법이 있는데, CSS 와 JavaScript 이다. 첫 번째는 orientation media query 이다. 이것은 내용이 CSS를 사용해서 레이아웃을 조정하게 하는데,  브라우저 창이 가로 모드 (너비가 높이보다 큼) 또는 세로모드 (높이가 너비보다 큼) 여부에 달려 있다.

-

두번째 방법은 JavaScript Screen orientation API 인데 이것은 화면의 현재 방향을 구하고 잠그는데 사용할 수 있다.

-

Adjusting layout based on the orientation

-

방향 변환에서 가장 흔한 케이스 중 하나는 장치의 방향에 따라 내용의 레이아웃을 조정 하는 것이다. 예를 들자면, 당신은 버튼바를 장치 화면의 가장 긴 크기로 펼치고 싶어 할 수 있는데, media query를 이용해서 쉽고 자동으로 할 수 있다.

-

다음의 HTML code 예제를 보자

-
<ul id="toolbar">
-  <li>A</li>
-  <li>B</li>
-  <li>C</li>
-</ul>
-
-<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>
-
-

CSS 는 화면 방향에 따라 특정 스타일을 을 다루기 위해 orientation media query 에 의존한다

-
/* First let's define some common styles */
-
-html, body {
-  width : 100%;
-  height: 100%;
-}
-
-body {
-  border: 1px solid black;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-p {
-  font   : 1em sans-serif;
-  margin : 0;
-  padding: .5em;
-}
-
-ul {
-  list-style: none;
-
-  font   : 1em monospace;
-  margin : 0;
-  padding: .5em;
-
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-
-  background: black;
-}
-
-li {
-  display: inline-block;
-  margin : 0;
-  padding: 0.5em;
-  background: white;
-}
-
-

Once we have some common styles we can start defining a special case for the orientation

-
/* For portrait, we want the tool bar on top */
-
-@media screen and (orientation: portrait) {
-  #toolbar {
-    width: 100%;
-  }
-}
-
-/* For landscape, we want the tool bar stick on the left */
-
-@media screen and (orientation: landscape) {
-  #toolbar {
-    position: fixed;
-    width: 2.65em;
-    height: 100%;
-  }
-
-  p {
-    margin-left: 2em;
-  }
-
-  li + li {
-    margin-top: .5em;
-  }
-}
-
-

실행 결과를 보자

- - - - - - - - - - - - - -
PortraitLandscape
{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 180, 350) }}{{ EmbedLiveSample('Adjusting_layout_based_on_the_orientation', 350, 180) }}
-
-

Note: orientation media query 는 실제로 브라우저 창 (또는 iframe) 의 방향에 따라 적용한다. 장치의 방향이 아니다.

-
-

Locking the screen orientation

-
-

Warning: 이 API 는 실험적이며 현재 Firefox OS 와 Firefox for Android 에서 moz 접두사를 이용하여 사용할 수 있다.

-
-

몇몇 장치들은 (주로 모바일 장치) 사용자가 언제나 화면을 읽을 수 있게 장치의 방향에 따라 동적으로 화면의 방향을 변화시킬 수 있다. 만약 이러한 행위가 텍스트 컨텐츠에 적합하다면, 이러한 변화 때문에 고통 받을 수 있는 켄텐츠도 있다. 예를 들어, 장치의 방향에 따른 게임들은 이러한 방향전환 때문에 혼란스러울 수 있다.

-

Screen Orientation API 는 정확히 그러한 변화를 방지하기 위해 만들어졌다.

-

Listening orientation change

-

{{event("orientationchange")}} 이벤트는 장치가 화면의 방향을 변환할 때와 방향이  {{domxref("window.screen.orientation","screen.orientation")}} 속성과 함께 읽혀질 때 마다 불려 진다.  

-
screen.addEventListener("orientationchange", function () {
-  console.log("The orientation of the screen is: " + screen.orientation);
-});
-
-

Preventing orientation change

-

모든 웹 어플리케이션은 필요에 따라 스크린을 잠굴 수 있다. 화면은 {{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 함수를 사용하여 잠그고 {{domxref("window.screen.unlockOrientation","screen.unlockOrientation()")}}. 함수로 잠금 해제 한다.

-

{{domxref("window.screen.lockOrientation","screen.lockOrientation()")}} 는 적용 할 잠금의 종류를 정의하는 문자열  (또는 일련의 문자열) 을 수용한다. 수용하는 값들: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape (각각의 값들에 대해 좀 더 알려면  {{domxref("window.screen.lockOrientation","lockOrientation")}}  를 보라).

-
screen.lockOrientation('landscape');
-
-

Note: 화면 잠금은 웹 어플리케이션에 따라 다르다. 어플레케이션 A이 가로모드로 잠겨 있고 어플레케이션 B가 세로모드로 잠겨 있을 때, 어플리케이션을 A 에서 B 로 또는 B 에서 A 로 전환하면 {{event("orientationchange")}} 를 호출하지 않는다. 왜냐하면 각 어플리케이션은 각자의 방향을 유지 하기 때문이다.

-

그러나, 만약 잠금요구를 만족하기 위해 방향이 바뀌어야한다면 화면잠금은 {{event("orientationchange")}} 이벤트를 호출 할 수 있다.

-
-

See also

- diff --git a/files/ko/webapi/network_information/index.html b/files/ko/webapi/network_information/index.html deleted file mode 100644 index 9526bd2d5f..0000000000 --- a/files/ko/webapi/network_information/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Network Information API -slug: WebAPI/Network_Information -translation_of: Web/API/Network_Information_API ---- -

{{ SeeCompatTable() }}

-

네트워크 정보 API는 사용자 기기의 현재 대역폭이나 과금이 되는 연결인지와 같은 시스템의 연결 정보를 알려줍니다. 이를 이용해서 사용자에게 높은 용량의 콘텐츠를 제공할지 낮은 용량의 콘텐츠를 제공할지 사용자의 연결 상태에 따라서 제공할 수 있습니다. 전체 API는 DOM에 추가된 단일한 객체로 구성되어 있습니다: {{domxref("window.navigator.connection")}}.

-

연결상태 변경 감지

-

이 예제는 사용자의 연결상태 변화를 감시합니다. 사용자가 비싼 망에서 싼 망으로 이동할 때 사용자가 추가적인 비용을 지불하지 않게 하기 위해서 전송량을 감소시키는 등과 같은 행동을 할 수 있게 앱이 경고를 하는 일과 비슷합니다.

-
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
-
-function updateConnectionStatus() {
-  alert("Connection bandwidth: " + connection.bandwidth + " MB/s");
-  if (connection.metered) {
-    alert("The connection is metered!");
-  }
-}
-
-connection.addEventListener("change", updateConnectionStatus);
-updateConnectionStatus();
-
-

명세

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Network Information', '', 'Network Information API') }}{{ Spec2('Network Information') }}Initial specification
-

브라우저 호환성

-

{{Page('/en-US/docs/Web/API/window.navigator.connection','Browser compatibility')}}

-

관련 내용

-
    -
  • {{ spec("http://dvcs.w3.org/hg/dap/raw-file/tip/network-api/Overview.html", "Network Information API Specification", "ED") }}
    • -
  • Online and offline events
    • -
  • {{domxref("window.navigator.connection")}}
    • -
diff --git a/files/ko/webapi/proximity/index.html b/files/ko/webapi/proximity/index.html deleted file mode 100644 index ad1687ddd2..0000000000 --- a/files/ko/webapi/proximity/index.html +++ /dev/null @@ -1,119 +0,0 @@ ---- -title: Proximity -slug: WebAPI/Proximity -translation_of: Web/API/Proximity_Events ---- -

{{ SeeCompatTable }}

-

Summary

-

근접 이벤트는 사용자가 디바이스에 가까이 갔을때를 알 수 있는 간단한 벙법이다.

-

예를 들어,  사용자가 전화가 걸려왔을 때 디바이스에 귀를 가까이 하면, 근접 이벤트들은 스마트폰의 화면이 꺼지게 하여 이러한 변화에 대응할 수 있게 해준다.

-
-

Note: 당연히 이 API는 근접 센서를 가진 장치를 필요로 하며, 이 근접 센서는 대게 모바일 다비이스들에서만 이용 가능하다. 근접 센서가 없는 장치들에서는 근접 이벤트들을 지원할 수는 있을 지 몰라도 해당 이벤트들은 절대 발생하지 않을 것이다.

-
-

Proximity Events

-

다비이스 근접 센서가 장치와 대상 사이의 변화를 감지했을 때, 센서는 그  변화를 브라우저에게 알린다. 브라우저는 그 알림을 받으면 그 변화에 대해 {{domxref("DeviceProximityEvent")}} 이벤트를 발생시킨다. 그리고 더 대략적인 변화(more rough change)를 알리기 위해  {{domxref("UserProximityEvent")}} 이벤트를 발생시킨다.

-

window object 레벨에서  {{domxref("EventTarget.addEventListener","addEventListener")}} 메소드 ({{event("deviceproximity")}} 또는 {{event("userproximity")}} 이벤트명) 를 이용하여 근접 이벤트를 전달받을 수 있다. 또한 {{domxref("window.ondeviceproximity")}} 또는 {{domxref("window.onuserproximity")}} 프로퍼티에 이벤트 핸들러를 붙이는 방법으로도 이벤트를 전달받을 수 있다.

-

일단 이벤트가 전달되면, 그 이벤트 오브젝트는 다음과 같은 여러 종류의 정보에 접근할 수 있게 해준다:

-
    -
  •  {{domxref("DeviceProximityEvent")}} 이벤트는 {{domxref("DeviceProximityEvent.value","value")}} 프로퍼티를 통해 디바이스와 대상 사이의 거리에 정확히 매치되는 값을 제공한다. 또한 이 이벤트는 장치가 감지할 수 있는 가장 가까운 거리, 가장 먼거리에 대한 정보를 {{domxref("DeviceProximityEvent.min","min")}} 와  {{domxref("DeviceProximityEvent.max","max")}} 프로퍼티 값을 통해 제공한다.
    • -
  • {{domxref("UserProximityEvent")}} 이벤트는 거리에 대한 대략적인 추정치를 boolean 형태로 제공한다. 대상과 디바이스가 가까운면   {{domxref("UserProximityEvent.near")}} 프로퍼티 값은 true 가 되고, 대상과의 거리가 멀다면 그 값은 false가 된다.
    • -
-

Example

-
window.addEventListener('userproximity', function(event) {
-  if (event.near) {
-    // let's power off the screen
-    navigator.mozPower.screenEnabled = false;
-  } else {
-    // Otherwise, let's power on the screen
-    navigator.mozPower.screenEnabled = true;
-  }
-});
-

Specifications

- - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('Proximity Events', '', 'Proximity Events') }}{{ Spec2('Proximity Events') }}Initial specification
-

Browser compatibility

-

{{ CompatibilityTable() }}

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{domxref("DeviceProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{ CompatGeckoMobile("15.0") }}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
{{domxref("UserProximityEvent")}}{{CompatNo()}}{{CompatNo()}}{{CompatVersionUnknown()}}{{CompatNo()}}{{CompatNo()}}{{CompatNo()}}
-
-

See also

-
    -
  • {{domxref("DeviceProximityEvent")}}
    • -
  • {{domxref("UserProximityEvent")}}
    • -
  • {{event("deviceproximity")}}
    • -
  • {{event("userproximity")}}
    • -
diff --git a/files/ko/webapi/using_geolocation/index.html b/files/ko/webapi/using_geolocation/index.html deleted file mode 100644 index e5f9913376..0000000000 --- a/files/ko/webapi/using_geolocation/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Geolocation API 사용하기 -slug: WebAPI/Using_geolocation -tags: - - Geolocation API - - Guide - - Intermediate -translation_of: Web/API/Geolocation_API/Using_the_Geolocation_API ---- -

{{securecontext_header}}{{APIRef("Geolocation API")}}
- Geolocation API는 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있습니다. 이 안내서는 Geolocation API의 기초적 사용법을 설명합니다.

- -

geolocation 객체

- -

Geolocation API는 {{domxref("navigator.geolocation")}} 객체를 통해 사용할 수 있습니다.

- -

geolocation 객체가 존재하는 경우 위치 정보 서비스를 지원하는 것입니다. 존재 여부는 다음과 같이 알아낼 수 있습니다.

- -
if('geolocation' in navigator) {
-  /* 위치정보 사용 가능 */
-} else {
-  /* 위치정보 사용 불가능 */
-}
-
- -

현재 위치 가져오기

- -

{{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}} 메서드를 호출해서 사용자의 현재 위치를 얻을 수 있습니다. getCurrentPosition()은 사용자의 위치를 탐지하는 비동기 요청을 초기화하고, 위치 관련 하드웨어에 최신 정보를 요청합니다. 위치를 알아낸 후에는 지정한 콜백 함수를 호출합니다. 선택적으로, 이 과정 중 오류가 발생하면 호출할 오류 콜백을 두 번째 매개변수로 지정할 수도 있습니다. 세 번째 매개변수 역시 선택 항목이며, 위치 정보의 최대 수명, 요청의 최대 대기시간, 고정밀 위치정보 여부 등의 옵션을 담은 객체입니다.

- -
-

참고: {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}의 기본값에서는 최대한 빠르게 낮은 정밀도의 응답을 반환합니다. 정확하지 않더라도 빠른 정보가 필요한 상황에서 유용합니다. 예를 들어, GPS 기능을 가진 장비는 보정 과정에 수 분이 걸릴 수도 있으므로 IP 위치와 WiFi 등 정확하지 않은 출처에 기반한 위치 정보를 반환할 수 있습니다.

-
- -
navigator.geolocation.getCurrentPosition((position) => {
-  doSomething(position.coords.latitude, position.coords.longitude);
-});
- -

위의 예제는 사용자 위치가 확인되면 doSomething() 함수를 실행합니다.

- -

현재 위치 추적하기

- -

장치가 이동했거나 더 정확한 정보를 사용할 수 있어서 위치 정보가 바뀐 경우 호출할 콜백 함수를 {{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드로 설정할 수 있으며, {{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 같은 매개변수를 받습니다. 콜백은 계속해서 호출될 수 있으므로, 브라우저가 사용자의 이동 시, 또는 고정밀 위치 기술을 사용할 수 있는 시점에 새로운 위치 정보를 제공할 수 있습니다. getCurrentPosition()과 마찬가지로 선택 사항인 오류 콜백 역시 여러 번 호출할 수 있습니다.

- -
-

참고: {{domxref("Geolocation.getCurrentPosition", "getCurrentPosition()")}}을 먼저 호출하지 않고도 {{domxref("Geolocation.watchPosition", "watchPosition()")}}을 사용할 수 있습니다.

-
- -
const watchID = navigator.geolocation.watchPosition((position) => {
-  doSomething(position.coords.latitude, position.coords.longitude);
-});
- -

{{domxref("Geolocation.watchPosition","watchPosition()")}} 메서드는 위치 추적 요청의 고유 식별자를 나타내는 숫자값을 반환합니다. 해당 식별자를 {{domxref("Geolocation.clearWatch","clearWatch()")}} 메서드에 전달해서 추적을 종료할 수 있습니다.

- -
navigator.geolocation.clearWatch(watchID);
-
- -

응답 미세 조정

- -

{{domxref("Geolocation.getCurrentPosition","getCurrentPosition()")}}과 {{domxref("Geolocation.watchPosition","watchPosition()")}} 둘 다 성공 콜백, 실패 콜백 외에도 PositionOptions 객체를 받을 수 있습니다.

- -

PositionsOptions 객체를 사용하면 고정밀도 활성화 여부, 위치 정보의 캐시 수명(수명이 끝나기 전까지는 이전에 반환한 위치 정보를 저장해뒀다가, 같은 요청을 또 받을 경우 그대로 반환합니다), 그리고 위치 정보 요청의 응답을 대기할 최대 대기시간을 지정할 수 있습니다.

- -

옵션 객체를 사용한 {{domxref("Geolocation.watchPosition","watchPosition")}}의 호출 예시는 다음과 같습니다.

- -
function success(position) {
-  doSomething(position.coords.latitude, position.coords.longitude);
-}
-
-function error() {
-  alert('Sorry, no position available.');
-}
-
-const options = {
-  enableHighAccuracy: true,
-  maximumAge: 30000,
-  timeout: 27000
-};
-
-const watchID = navigator.geolocation.watchPosition(success, error, options);
- -

위치 표현

- -

사용자의 위치는 {{domxref("GeolocationPosition")}} 객체를 담은 {{domxref("GeolocationCoordinates")}} 객체를 사용하여 표현합니다.

- -

GeolocationPosition은 단 두 가지만 가집니다. 하나는 GeolocationCoordinates 인스턴스를 가진 coords 속성이고, 다른 하나는 위치 정보의 기록 시점을 나타내는 {{domxref("DOMTimeStamp")}} 인스턴스입니다.

- -

GeolocationCoordinates 인스턴스는 다수의 속성을 갖지만, 그 중 가장 많이 쓰게 될 항목은 지도의 지점을 가리킬 때 사용할 latitude와 longitude입니다. 따라서 대부분의 Geolocation 성공 콜백은 아래와 같이 꽤 간단한 형태입니다.

- -
function success(position) {
-  const latitude  = position.coords.latitude;
-  const longitude = position.coords.longitude;
-
-  // Do something with your latitude and longitude
-}
- -

그러나 GeolocationCoordinates 객체에서 고도, 속도, 장치의 방향, 위경도와 고도의 정확도 등 다른 다양한 정보도 가져올 수 있습니다.

- -

오류 처리

- -

getCurrentPosition() 또는 watchPosition()에 오류 콜백을 제공한 경우, 콜백은 첫 번째 매개변수로 GeolocationPositionError 객체를 받습니다. 해당 객체는 오류의 유형을 나타내는 code 속성과, 사람이 읽을 수 있는 형태로 오류 코드의 뜻을 설명한 message 속성을 갖습니다.

- -

다음 형태로 사용할 수 있습니다.

- -
function errorCallback(error) {
-  alert(`ERROR(${error.code}): ${error.message}`);
-};
- -

예제

- -

다음 예제는 Geolocation API를 사용해 사용자의 위경도를 가져옵니다. 성공한 경우, 사용자의 위치를 가리키는 openstreetmap.org 링크를 생성해 하이퍼링크에 할당합니다.

- - - -

HTML

- -
<button id = "find-me">Show my location</button><br/>
-<p id = "status"></p>
-<a id = "map-link" target="_blank"></a>
- -

JavaScript

- -
function geoFindMe() {
-
-  const status = document.querySelector('#status');
-  const mapLink = document.querySelector('#map-link');
-
-  mapLink.href = '';
-  mapLink.textContent = '';
-
-  function success(position) {
-    const latitude  = position.coords.latitude;
-    const longitude = position.coords.longitude;
-
-    status.textContent = '';
-    mapLink.href = `https://www.openstreetmap.org/#map=18/${latitude}/${longitude}`;
-    mapLink.textContent = `Latitude: ${latitude} °, Longitude: ${longitude} °`;
-  }
-
-  function error() {
-    status.textContent = 'Unable to retrieve your location';
-  }
-
-  if(!navigator.geolocation) {
-    status.textContent = 'Geolocation is not supported by your browser';
-  } else {
-    status.textContent = 'Locating…';
-    navigator.geolocation.getCurrentPosition(success, error);
-  }
-
-}
-
-document.querySelector('#find-me').addEventListener('click', geoFindMe);
- -

결과

- -

{{EmbedLiveSample('예제', 350, 150)}}

diff --git a/files/ko/webapi/using_light_events/index.html b/files/ko/webapi/using_light_events/index.html deleted file mode 100644 index b033d4f80d..0000000000 --- a/files/ko/webapi/using_light_events/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: Using Light Events -slug: WebAPI/Using_Light_Events -tags: - - Ambient Light -translation_of: Web/API/Ambient_Light_Events ---- -
{{DefaultAPISidebar("Ambient Light Events")}}{{SeeCompatTable}}
- -

주변의 빛을 감지하는 이벤트를 활용해서 웹페이지나 어플리케이션이 주변 빛의 세기를 감지할 수 있습니다. 사용자 인터페이스의 색상 대비나 사진의 노출을 변경하는 용도로 사용할 수 있습니다.

- -

빛 이벤트

- -

기기의 빛 센서가 빛의 변화를 감지하면 브라우저에 변화를 전달합니다. 브라우저가 이러한 알림을 받으면 정확한 빛의 세기를 알려주는 {{domxref("DeviceLightEvent")}} 이벤트를 발생시킵니다.

- -

이 이벤트는 {{domxref("EventTarget.addEventListener","addEventListener")}} 메서드 ({{event("devicelight")}} 이벤트 이름 사용)를 사용하거나 {{domxref("window.ondevicelight")}} 속성에 이벤트 핸들러를 사용함으로서 window 객체 수준에서 캡춰됩니다.

- -

캡춰가 되면 이벤트 객체의 {{domxref("DeviceLightEvent.value")}} 속성을 통해서 럭스(lux) 단위의 빛의 세기를 사용할 수 있습니다.

- -

예제

- -
window.addEventListener('devicelight', function(event) {
-  var html = document.getElementsByTagName('html')[0];
-
-  if (event.value < 50) {
-    html.classList.add('darklight');
-    html.classList.remove('brightlight');
-  } else {
-    html.classList.add('brightlight');
-    html.classList.remove('darklight');
-  }
-});
- -

명세

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{ SpecName('AmbientLight', '', 'Ambient Light Events') }}{{ Spec2('AmbientLight') }}Initial specification
- -

브라우저 호환성

- - - -

{{Compat("api.DeviceLightEvent")}}

- -

같이 보기

- -
    -
  • {{domxref("DeviceLightEvent")}}
    • -
  • {{event("devicelight")}}
    • -
diff --git a/files/ko/webapi/using_web_notifications/index.html b/files/ko/webapi/using_web_notifications/index.html deleted file mode 100644 index 351361d2af..0000000000 --- a/files/ko/webapi/using_web_notifications/index.html +++ /dev/null @@ -1,265 +0,0 @@ ---- -title: 알림 API 사용하기 -slug: WebAPI/Using_Web_Notifications -translation_of: Web/API/Notifications_API/Using_the_Notifications_API ---- -

{{APIRef("Web Notifications")}}{{AvailableInWorkers}}{{securecontext_header}}

- -

웹 페이지나 앱에서 알림(Notifications) API를 사용하면 페이지 외부에 표시되는 알림을 보낼 수 있습니다. 이것은 시스템 레벨에서 처리되는 것으로 애플리케이션이 유휴 상태거나 백그라운드에 있더라도 웹 앱이 사용자에게 정보를 보낼 수 있습니다. 이 글에서는 여러분의 앱에서 이 API를 사용하기 위한 기초를 알아봅니다.

- -

일반적으로 시스템 알림은 운영 체계의 표준 알림 메커니즘을 말합니다. 예를 들어 일반적인 데스크톱 시스템이나 모바일 장치의 브로드캐스트 알림을 생각해봅시다.

- -

- -

물론 시스템 알림 시스템은 플랫폼 및 브라우저에 따라 다양하지만 괜찮습니다. 알림 API는 범용적으로 작성돼서 대부분의 시스템 알림 시스템과 호환됩니다.

- -

예시

- -

웹 알림의 대표적인 사용 사례는 웹 기반 메일이나 IRC 애플리케이션입니다. 새 메시지가 도착하면 사용자가 다른 애플리케이션으로 다른 일을 하더라도 사용자에게 알릴 필요가 있습니다. 요즘은 Slack 등 이러한 사례를 많이 찾아볼 수 있습니다.

- -

우리는 웹 알림을 사용하는 방법을 좀더 잘 알 수 있도록 실제적인 예시 — 할 일 목록 앱 —를 작성했습니다. 데이터는 로컬에서 IndexedDB로 저장하고 사용자 알림은 할 일 기한이 됐을 때 시스템 알림을 사용합니다. 할 일 목록 코드를 다운로드하거나, 앱의 라이브 실행을 보세요.

- -

권한 요청하기

- -

앱이 알림을 보내려면 먼저 사용자가 애플리케이션에 해당 권한을 허용해줘야 합니다. 이는 API가 웹페이지 외부와 상호작용할 때 통상적인  요구 사항입니다. 최소 한번은 사용자가 해당 애플리케이션이 알림을 표시할 수 있는 권한을 허용해줄 필요가 있으며 이로써 사용자는 어떤 앱/사이트가 알림을 보일 수 있는지 제어할 수 있습니다.

- -

과거에 푸시 알림에 대한 악용 때문에 웹 브라우저와 개발자는 그런 문제를 완화할 수 있는 전략을 구현하게 되었습니다. 알림을 발생시키려면 사용자 제스처(예: 단추 클릭)에 대한 응답으로만 가능합니다. 이것은 모범적인 방식일 뿐 아니라 — 사용자에게 미동의 알림으로 스팸을 보내면 안됩니다 — 실제로도 전향적인 브라우저는 사용자 제스처에 대한 응답으로 촉발되지 않은 알림은 명시적으로 불허합니다. 파이어폭스는 이미 72 버전부터 이렇게 하고 있으며 사파리도 하고 있습니다.

- -

또한 크롬과 파이어폭스에서는 사이트가 보안 콘텍스트(즉, HTTPS)가 아니면 알림을 아예 요청할 수 없으며 크로스 오리진 {{htmlelement("iframe")}}으로부터의 알림 권한은 요청할 수 없게 되었습니다. 

- -

현재 권한 상태 확인하기

- -

권한을 이미 가지고 있는지 확인하려면 {{domxref("Notification.permission")}} 읽기 전용 속성의 값을 확인하면 됩니다. 다음 세 가지 값이 있을 수 있습니다.

- -
-
default
-
사용자에게 아직 권한을 요구하지 않았으며 따라서 알림을 표시하지 않습니다.
-
granted
-
사용자에게 알림 표시 권한을 요구했으며 사용자는 권한을 허용했습니다.
-
denied
-
사용자가 명시적으로 알림 표시 권한을 거부했습니다.
-
- -

권한 획득하기

- -

아직 알림 표시 권한이 허용되지 않았다면 애플리케이션은 {{domxref("Notification.requestPermission()")}} 메서드를 사용하여 사용자에게 권한을 요청할 필요가 있습니다. 간단하게는 아래와 같이 넣습니다.

- -
Notification.requestPermission().then(function(result) {
-  console.log(result);
-});
- -

여기서는 프로미스 방식의 메서드 버전을 사용합니다. 과거 버전을 지원하려면 아래와 같이 과거의 콜백 버전을 사용해야 할 수 있습니다.

- -
Notification.requestPermission();
- -

콜백 버전은 콜백 함수를 옵셔널하게 받을 수 있으며 사용자가 표시 권한 요청에 응답한 후에 호출됩니다.

- -

예시

- -

우리가 만드는 할 일 데모에서는 "알림 허용" 단추를 둬서 누르면 앱의 알림 권한을 요청합니다.

- -
<button id="enable">알림 허용</button>
- -

누르면 다음 askNotificationPermission() 함수를 호출합니다.

- -
function askNotificationPermission() {
-  // 권한을 실제로 요구하는 함수
-  function handlePermission(permission) {
-    // 사용자의 응답에 관계 없이 크롬이 정보를 저장할 수 있도록 함
-    if(!('permission' in Notification)) {
-      Notification.permission = permission;
-    }
-
-    // 사용자 응답에 따라 단추를 보이거나 숨기도록 설정
-    if(Notification.permission === 'denied' || Notification.permission === 'default') {
-      notificationBtn.style.display = 'block';
-    } else {
-      notificationBtn.style.display = 'none';
-    }
-  }
-
-  // 브라우저가 알림을 지원하는지 확인
-  if (!('Notification' in window)) {
-    console.log("이 브라우저는 알림을 지원하지 않습니다.");
-  } else {
-    if(checkNotificationPromise()) {
-      Notification.requestPermission()
-      .then((permission) => {
-        handlePermission(permission);
-      })
-    } else {
-      Notification.requestPermission(function(permission) {
-        handlePermission(permission);
-      });
-    }
-  }
-}
- -

두 번째 메인 블록을 먼저 보면 알림이 지원되는지 확인하는 것을 알 수 있습니다. 지원하는 경우 그에 따라 Notification.requestPermission()의 프로미스 기반 버전이 지원되는지 보는 확인을 실행합니다. 맞다면 프로미스 기반 버전을 실행하고(사파리 외에는 전부 지원됨) 아니라면 과거의 콜백 기반 버전을 실행합니다(사파리에서 지원).

- -

코드 중복을 피하기 위해 뒷 처리 수행 코드를 handlePermission() 함수에 넣었는데 이 함수가 코드에서 첫 번째 메인 블록입니다. 그 안에서는 Notification.permission 값을 명시적으로 설정하고(크롬의 일부 과거 버전에서는 이게 자동으로 안됩니다) 사용자가 권한 대화창에서 선택한 결과에 따라 단추를 보이거나 숨깁니다. 권한이 이미 허용됐는지 보여주려는 것은 아니고 사용자가 권한을 거부한 경우 나중에 다시 선택할 수 있도록 해주는 것입니다.

- -

참고: 크롬 37 버전 전에는 load 이벤트 핸들러에서 {{domxref("Notification.requestPermission()")}}을 호출할 수 없었습니다(이슈 274284 참고).

- -

requestPermission() 프로미스 기능 알아내기

- -

위에서 우리는 브라우저가 Notification.requestPermission()의 프로미스 버전을 지원하는지 확인해야 한다고 했습니다. 아래와 같이 했습니다.

- -
function checkNotificationPromise() {
-    try {
-      Notification.requestPermission().then();
-    } catch(e) {
-      return false;
-    }
-
-    return true;
-  }
- -

기본적으로 requestPermission()에 .then() 메서드가 있는지 알아보는 것입니다. 맞다면 계속 진행하고 true를 반환합니다. 실패라면 catch() {} 블록에서 false를 반환합니다.

- -

알림 만들기 

- -

알림 만들기는 쉬워서 {{domxref("Notification")}} 생성자만 사용하면 됩니다. 이 생성자는 알림에 표시할 제목과 {{domxref("Notification.icon","icon")}}이나 텍스트 {{domxref("Notification.body","body")}} 같은 알림 조작 옵션 몇 가지를 받도록 돼 있습니다.

- -

예를 들어 할일 목록 예시에서 아래 코드로 필요시 알림을 만듭니다(createNotification() 함수에서 찾을 수 있음).

- -
var img = '/to-do-notifications/img/icon-128.png';
-var text = '아! "' + title + '" 작업 기한이 만료됐습니다.';
-var notification = new Notification('할 일 목록', { body: text, icon: img });
-
- -

알림 닫기

- -

파이어폭스와 사파리는 알림을 자동으로 금방(약 4초) 닫습니다. 이것은 운영 체계 수준에서도 발생합니다. 그런데 크롬 같은 다른 브라우저는 그렇지 않습니다. 모든 브라우저에서 알림이 닫히게 하려면 {{domxref("WindowTimers.setTimeout","setTimeout()")}} 함수에서 {{domxref("Notification.close")}} 함수를 호출하여 알림을 4초 후에 닫으면 됩니다. bind()를 사용하여 close() 호출이 알림에 연동되게 하는 것도 해줘야 합니다.

- -
setTimeout(notification.close.bind(notification), 4000);
- -
-

참고: "close" 이벤트를 받았을 때 알림을 닫은 것이 사용자인지는 보장할 수 없습니다. 이것은 규격과도 일치합니다. 규격에서는 "알림이 닫힐 때 그것이 기반 알림 플랫폼에 의한 것이든지 사용자에 의한 것이든지 닫기 절차가 실행돼야 한다."고 기술하고 있습니다.

-
- -

알림 이벤트

- -

{{domxref("Notification")}} 인스턴스에 촉발되는 이벤트는 다음 네 가지입니다.

- -
-
click
-
사용자가 알림을 클릭하면 촉발됩니다.
-
close
-
알림이 닫힌 후 촉발됩니다.
-
error
-
알림에 문제가 있을 경우 촉발되며 대개 어떤 이유에 의해 알림을 표시할 수 없는 경우입니다.
-
show
-
알림이 사용자에게 표시되면 촉발됩니다.
-
- -

이 이벤트들은 {{domxref("Notification.onclick","onclick")}}, {{domxref("Notification.onclose","onclose")}}, {{domxref("Notification.onerror","onerror")}}, {{domxref("Notification.onshow","onshow")}} 핸들러로 추적할 수 있습니다. {{domxref("Notification")}}이 {{domxref("EventTarget")}}을 상속하기 때문에 {{domxref("EventTarget.addEventListener","addEventListener()")}} 메서드를 사용할 수 있습니다.

- -

기존 알림 대체하기

- -

사용자가 잠깐 사이에 알림을 많이 받는 것은 바람직하지 않습니다. 예를 들어 메신저 애플리케이션이 모든 수신 메시지를 사용자에게 알리는데 그게 아주 많다면요? 사용자가 알림 때문에 대량 스팸을 받지 않도록 알림 대기열(큐)을 수정해서 걸려 있는 알림 하나나 여럿을 새로운 알림 하나로 대체할 수 있습니다.

- -

이를 위해 새 알림에 태그를 붙일 수 있습니다. 알림에 이미 같은 태그가 있고 표시되지 않았다면 새 알림으로 이전 알림을 대체하는 것입니다. 같은 태그의 알림이 이미 표시됐다면 이전 알림을 닫고 새 알림을 표시합니다.

- -

태그 예시

- -

다음과 같은 간단한 HTML을 봅시다.

- -
<button>알림 실행!</button>
- -

다수의 알림을 아래 방법으로 처리할 수 있습니다.

- -
window.addEventListener('load', function () {
-  // 처음에는 알림 권한이 있는지 확인함
-  // 없으면 권한 요구
-  if (Notification && Notification.permission !== "granted") {
-    Notification.requestPermission(function (status) {
-      if (Notification.permission !== status) {
-        Notification.permission = status;
-      }
-    });
-  }
-
-  var button = document.getElementsByTagName('button')[0];
-
-  button.addEventListener('click', function () {
-    // 사용자가 알림을 받는 데 동의한 경우
-    // 알림 10개를 보내본다
-    if (Notification && Notification.permission === "granted") {
-      var i = 0;
-      // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
-      var interval = window.setInterval(function () {
-        // 태그 덕분에 "안녕! 9" 알림만 보여야 함
-        var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
-        if (i++ == 9) {
-          window.clearInterval(interval);
-        }
-      }, 200);
-    }
-
-    // 사용자가 알림을 받을지 말지 답하지 않은 경우
-    // 참고: 크롬 때문에 권한 속성이 설정됐는지 알 수 없으므로
-    // "기본" 값을 확인하는 것은 안전하지 않음
-    else if (Notification && Notification.permission !== "denied") {
-      Notification.requestPermission(function (status) {
-        // 사용자가 ok한 경우
-        if (status === "granted") {
-          var i = 0;
-          // 어떤 브라우저(파이어폭스 등)는 일정 시간 동안 알림이 너무 많은 경우 차단하기 때문에 인터벌 사용.
-          var interval = window.setInterval(function () {
-            // 태그 덕분에 "안녕! 9" 알림만 보여야 함
-            var n = new Notification("안녕! " + i, {tag: '알림너무많음'});
-            if (i++ == 9) {
-              window.clearInterval(interval);
-            }
-          }, 200);
-        }
-
-        // 그 외의 경우 일반적인 모달 alert로 폴백
-        else {
-          alert("안녕!");
-        }
-      });
-    }
-
-    // 사용자가 알림을 거부한 경우
-    else {
-      // 일반적인 모달 alert로 폴백
-      alert("안녕!");
-    }
-  });
-});
- -

라이브 결과는 아래에서 보세요.

- -

{{ EmbedLiveSample('Tag_example', '100%', 30) }}

- -

규격

- - - - - - - - - - - - - - - - -
규격상태비고
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}현행 표준
- -

브라우저 호환성

- -

{{page("/en-US/Web/API/Notification","Browser compatibility")}}

- -

참고

- - diff --git a/files/ko/websockets/index.html b/files/ko/websockets/index.html deleted file mode 100644 index 8b6fd20b1a..0000000000 --- a/files/ko/websockets/index.html +++ /dev/null @@ -1,172 +0,0 @@ ---- -title: 웹 소켓 -slug: WebSockets -translation_of: Web/API/WebSockets_API ---- -

웹 소켓은 사용자의 브라우저와 서버 사이의 인터액티브 통신 세션을 설정할 수 있게 하는 고급 기술입니다. 개발자는 웹 소켓 API를 통해 서버로 메시지를 보내고 서버의 응답을 위해 서버를 폴링하지 않고도 이벤트 중심 응답을 받는 것이 가능합니다.

- -
-

인터페이스

- -
-
WebSocket
-
웹 소켓 서버로 연결하고 연결을 통해 데이터를 보내고 받는 기본 인터페이스
-
CloseEvent
-
연결이 종료 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
-
MessageEvent
-
서버로 부터 메시지가 수신 되었을 때 웹 소켓 객체에 의해 전달된 이벤트
-
-
- -
-

도구

- - - - - - -
- -

같이 보기

- - - -

브라우저 호환성

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기능ChromeFirefox (Gecko)Internet ExplorerOperaSafari
버전 76 지원 {{obsolete_inline}}6{{CompatGeckoDesktop("2.0")}}{{CompatNo}}11.00 (disabled)5.0.1
버전 7 지원 {{obsolete_inline}}{{CompatNo}}{{CompatGeckoDesktop("6.0")}}
- {{property_prefix("Moz")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
버전 10 지원 {{obsolete_inline}}14{{CompatGeckoDesktop("7.0")}}
- {{property_prefix("Moz")}}		HTML5 Labs{{CompatUnknown}}{{CompatUnknown}}
표준 - RFC 6455 지원16{{CompatGeckoDesktop("11.0")}}1012.106.0
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기능AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
버전 76 지원 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
버전 7 지원 {{obsolete_inline}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
버전 8 지원 (IETF draft 10) {{obsolete_inline}}{{CompatUnknown}}{{CompatGeckoMobile("7.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
표준 - RFC 6455 지원16 (Chrome){{CompatGeckoDesktop("11.0")}}{{CompatUnknown}}12.106.0
-
- -

Gecko

- -

파이어폭스는 발전하는 웹 소켓 규격을 지속적으로 지원하고 있습니다. 파이어폭스 6은 웹 소켓 프로토콜 버전 7을, 파이어폭스 7은 버전 8을 지원합니다. (IETF 초안 10) 파이어폭스 모바일은 7.0부터 웹 소켓을 지원합니다.

- -

Gecko 6.0

- -

Gecko 6.0 {{geckoRelease("6.0")}} 이전엔 WebSocket 객체가 존재하였으며, 일부 사이트가 WebSocket 서비스는 접두어가 붙지 않는 것이라고 생각하기도 했습니다. 이 객체는 MozWebSocket으로 개명되었습니다.

- -

Gecko 7.0

- -

Gecko 7.0 {{geckoRelease("7.0")}} 이후로 고급 환경 설정의 network.websocket.max-connections 항목을 통해 동시에 열릴 수 있는 웹 소켓 연결의 최대값을 지정할 수 있습니다. 기본값은 200입니다.

- -

Gecko 8.0

- -

Gecko 8.0 {{geckoRelease("8.0")}} 이후로 웹 소켓 규격 초안의 변경에 따라 웹 소켓의 deflate 스트림 확장이 비활성화 되었습니다. 이는 일부 사이트의 호환성 문제를 해결합니다.

- -

Gecko 11.0

- -

Gecko 11.0 이전에는 모든 메시지가 16 MB를 넘을 수 없었으나, 지금은 최대 2 GB까지 가능합니다. 그러나 (특히 모바일에서) 권장되는 방법은 아닙니다. 충분한 메모리를 가지지 못한 장치에서는 통신이 실패하게 될 것입니다.

- -

추가적으로 바이너리 데이터를 위한 ArrayBuffer 지원이 구현되었습니다.

- -

Gecko 11.0부터 웹 소켓 API는 더이상 접두사가 붙지 않습니다.

- -
주의: 파이어폭스 4, 5에서 웹 소켓이 비활성화 돼있었던 가장 주요한 이유는 프로토콜 설계의 보안성 문제 때문이었습니다. 이는 파이어폭스 6에서 상위 버전의 프로토콜을 구현함으로써 해결되었습니다.
- -
{{HTML5ArticleTOC}}
diff --git a/files/ko/websockets/writing_websocket_client_applications/index.html b/files/ko/websockets/writing_websocket_client_applications/index.html deleted file mode 100644 index e7826d8595..0000000000 --- a/files/ko/websockets/writing_websocket_client_applications/index.html +++ /dev/null @@ -1,191 +0,0 @@ ---- -title: WebSocket을 이용하여 클라이언트 애플리케이션 작성하기 -slug: WebSockets/Writing_WebSocket_client_applications -tags: - - 가이드 - - 네트워킹 - - 예제 - - 웹소켓 - - 웹소켓API - - 클라이언트 -translation_of: Web/API/WebSockets_API/Writing_WebSocket_client_applications ---- -

WebSocket은 ws 프로토콜을 기반으로 클라이언트와 서버 사이에 지속적인 완전 양방향 연결 스트림을 만들어 주는 기술입니다. 일반적인 웹소켓 클라이언트는 사용자의 브라우저일 것이지만, 그렇다고 해서 이 프로토콜이 플랫폼에 종속적이지는 않습니다.

- -
Note: 우리에게는 작동하는 chat/server 시스템 예제 코드 조각이 있습니다. 이는 우리의 인프라가 WebSocket 예제들을 제대로 호스팅할 수 있는 환경이 되면 공유할 것입니다.
- -

{{AvailableInWorkers}}

- -

WebSocket 객체 생성하기

- -

WebSocket 프로토콜을 사용하여 통신하기 위해서는 WebSocket객체를 생성해야 합니다. 이 객체는 자동으로 서버로의 연결을 열려고 할 것입니다.

- -

WebSocket 생성자는 하나의 필수 파라미터와 하나의 선택 파라미터를 받습니다.

- -
WebSocket WebSocket(
-  in DOMString url,
-  in optional DOMString protocols
-);
-
- -
-
url
-
연결할 URL으로, 이것은 WebSocket 서버가 응답할 URL이어야 합니다.
-
protocols {{ optional_inline() }}
-
하나의 프로토콜 문자열, 또는 프로토콜 문자열의 배열입니다. 이 문자열들은 서브 프로토콜을 지정하는데 사용되어, 하나의 서버가 여러 개의 WebSocket 서브 프로토콜을 구현할 수 있도록 해줍니다. 예를 들어, 하나의 서버가 처리하는 상호작용이 지정된 protocols에 따라 달라지도록 할 수 있습니다. 만약 프로토콜 문자열을 지정하지 않으면 빈 문자열을 넣은 것으로 간주됩니다.
-
- -

생성자는 예외를 발생시킬 수 있습니다:

- -
-
SECURITY_ERR
-
접속을 시도하고 있는 포트가 차단되었습니다.
-
- -
-
- -

연결 에러

- -

만약 연결 시도 중 에러가 발생하면, 먼저 "error"란 이름의 이벤트가 WebSocket 오브젝트로 전달되고, 그로 인해 onerror 핸들러가 실행됩니다. 그 후에 연결이 종료되는 이유를 가리키는 CloseEvent 이벤트가 WebSocket 오브젝트로 전달되고, 그로 인해 onclose 핸들러가 실행됩니다.

- -

Firefox 11부터는 보통 에러 메세지에 대한 설명이 Mozillia 플랫폼의 콘솔에 표시되며, CloseEvent로부터는 RFC 6455, Section 7.4에 정의되어 있는 연결 종료 코드를 받게 됩니다.

- -

예제

- -

이 간단한 예제는 새 웹소켓 오브젝트를 생성하여 ws://www.example.com/socketserver 서버에 접속하는것을 보여줍니다. 이 예제에서는 커스텀 프로토콜인 "protocolOne" 을 리퀘스트에 같이 지정합니다. (이 프로토콜을 지정하는 부분은 생략될 수 있습니다.)

- -
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne");
-
- -

반환된 exampleSocket 오브젝트의 exampleSocket.readyState 값은 CONNECTING 입니다. readyState 값은 연결이 수립되어 데이터가 전송 가능한 상태가 되면 OPEN 으로 변경됩니다.

- -

만약 여러개의 프로토콜을 유연하게 대응할 수 있는 구조를 가지고 있다면, 연결 시에 배열을 통해 프로토콜의 목록을 지정할 수 있습니다.

- -
var exampleSocket = new WebSocket("ws://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);
-
- -

연결이 수립되면(readyState 가 OPEN 이 되었을 때), exampleSocket.protocol 값을 조사하여 서버가 어떤 프로토콜을 선택했는지 알아낼 수 있습니다.

- -

위의 예제에서 ws 는 http 를 대체합니다. 비슷하게 wss 는 https 를 대체합니다. 웹소켓 연결은 HTTP 업그레이드 메카니즘에 의해 수행되기 때문에 HTTP 서버 주소 지정에 대한 프로토콜 업그레이드 요청은 암시적입니다.  (ws://www.example.com 또는 wss://www.example.com. 같이)

- -

서버에 데이터 전송하기

- -

한번 연결이 수립되면 이제부터는 서버로 데이터를 전송할 수 있습니다. 이것을 하기 위해서는 단순히 WebSocket 오브젝트의 send() 호출하여 보내고 싶은 메세지를 지정하기만 하면 됩니다.:

- -
exampleSocket.send("Here's some text that the server is urgently awaiting!");
-
- -

보낼 수 있는 데이터는 String , {{ domxref("Blob") }},  또는 ArrayBuffer 입니다.

- -
Note: 버전 11 아래의 파이어폭스는 String 데이터 전송만을 지원합니다.
- -

연결을 맺는것은 비동기 작업이고 실패하기 쉬운 작업이기 때문에, WebSocket 오브젝트를 생성하자마자  send() 로 데이터 전송을 시도하는것은 성공하지 않을 가능성이 있습니다. 우리는 연결이 수립된 이후에만 데이터를 전송하도록 하기 위해 onopen 핸들러를 정의하고, 이 위에서 작업합니다.

- -
exampleSocket.onopen = function (event) {
-  exampleSocket.send("Here's some text that the server is urgently awaiting!");
-};
-
- -

데이터 전송에 JSON 사용하기

- -

JSON 을 사용하면 서버에 복잡한 데이터를 편리하게 보낼 수 있습니다. 예를 들어, 채팅 프로그램이 서버와 JSON으로 캡슐화된 패킷 데이터를 주고받는 프로토콜을 구현한것을 상상해 볼 수 있습니다.:

- -
// Send text to all users through the server
-function sendText() {
-  // Construct a msg object containing the data the server needs to process the message from the chat client.
-  var msg = {
-    type: "message",
-    text: document.getElementById("text").value,
-    id:   clientID,
-    date: Date.now()
-  };
-
-  // Send the msg object as a JSON-formatted string.
-  exampleSocket.send(JSON.stringify(msg));
-
-  // Blank the text input element, ready to receive the next line of text from the user.
-  document.getElementById("text").value = "";
-}
-
- -

서버로부터 데이터 수신하기

- -

WebSockets는 event-driven API 입니다; 메세지가 수신되면 "message" 이벤트가 onmessage 함수로 전달되게 됩니다. 아래와 같은 코드를 작성하여 수신되는 데이터를 받아볼 수 있습니다.:

- -
exampleSocket.onmessage = function (event) {
-  console.log(event.data);
-}
-
- -

JSON 오브젝트를 받아서 처리하기

- -

상단의 {{ anch("데이터 전송에 JSON 사용하기") }} 에서 작업한 코드와 연관되는 클라이언트를 생각해 봅시다. 클라이언트에서 받을 수 있는 패킷들의 목록은 다음과 같을 것 입니다.:

- -
    -
  • 로그인 핸드쉐이크
    • -
  • 메세지 텍스트
    • -
  • 유저 목록 업데이트
    • -
- -

위의 메세지들을 받아서 처리하는 코드는 아래와 같을 것 입니다.:

- -
exampleSocket.onmessage = function(event) {
-  var f = document.getElementById("chatbox").contentDocument;
-  var text = "";
-  var msg = JSON.parse(event.data);
-  var time = new Date(msg.date);
-  var timeStr = time.toLocaleTimeString();
-
-  switch(msg.type) {
-    case "id":
-      clientID = msg.id;
-      setUsername();
-      break;
-    case "username":
-      text = "<b>User <em>" + msg.name + "</em> signed in at " + timeStr + "</b><br>";
-      break;
-    case "message":
-      text = "(" + timeStr + ") <b>" + msg.name + "</b>: " + msg.text + "<br>";
-      break;
-    case "rejectusername":
-      text = "<b>Your username has been set to <em>" + msg.name + "</em> because the name you chose is in use.</b><br>"
-      break;
-    case "userlist":
-      var ul = "";
-      for (i=0; i < msg.users.length; i++) {
-        ul += msg.users[i] + "<br>";
-      }
-      document.getElementById("userlistbox").innerHTML = ul;
-      break;
-  }
-
-  if (text.length) {
-    f.write(text);
-    document.getElementById("chatbox").contentWindow.scrollByPages(1);
-  }
-};
-
- -

여기서 우리는 JSON.parse() 를 통해 JSON 오브젝트를 자바스크립트 오브젝트로 변환합니다. 그 다음 콘텐츠에 따라 분기하고 처리하는 로직을 가집니다.

- -

Text data format

- -

웹소켓을 통해 전달되는 텍스트들은 UTF-8 포멧을 가집니다.

- -

Gecko 9.0 {{ geckoRelease("9.0") }} 먼저 버전들은 유효한 UTF-8 텍스트가 아닌 문자가 들어올 경우 연결이 종료되었습니다. 지금은 이 값들을 정상적으로 허용합니다.

- -

연결을 종료하기

- -

웹 소켓 사용을 마쳤다면 close() 메소드를 호출해 연결을 종료합니다.:

- -
exampleSocket.close();
-
- -

연결을 닫아버리기 전에 bufferedAmount 어트리뷰트를 조사하여 아직 네트워크에 전달되지 않은 데이터가 있는지 검사하는것도 좋은 방법입니다.

- -

보안에 대한 고려 사항

- -

웹소켓은 혼합된 연결 환경에서 이용되어서는안됩니다. 예를들어 HTTPS를 이용해 로드된 페이지에서 non-secure 웹소켓 연결을 수립하는것(또는 반대) 처럼 말입니다. 몇몇 브라우저들은 이를 강제로 금지하고 있습니다. 파이어폭스 버전 8이상도 이를 금지합니다.

- -

{{ languages ( {"zh-tw": "zh_tw/WebSockets/Writing_WebSocket_client_applications"} ) }}

diff --git a/files/ko/websockets/writing_websocket_servers/index.html b/files/ko/websockets/writing_websocket_servers/index.html deleted file mode 100644 index 24c3cbe6c0..0000000000 --- a/files/ko/websockets/writing_websocket_servers/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: 웹소켓 서버 작성하기 -slug: WebSockets/Writing_WebSocket_servers -translation_of: Web/API/WebSockets_API/Writing_WebSocket_servers ---- -

{{gecko_minversion_header("2")}}

- -

개요

- -

웹 소켓 서버는 특정한 프로토콜을 따르는 서버의 임의 포트를 리스닝하고 있는 TCP 어플리케이션입니다. 사용자 서버를 만드는 작업은 두려운 일일수도 있습니다. 하지만, 당신이 선택한 플랫폼상에서 간단한 웹 소켓 서버를 구현하는것은 쉬울것입니다.  

- -

웹 소켓 서버는 C(++), Python, PHP, server-side JavaScript등과 같은 Berkeley sockets을 지원하는 어떠한 server-side 프로그래밍 언어로도 개발될 수 있습니다. 이것은 어느 특정한 언어의 자습서는 아니지만, 당신 자신의 서버를 개발하는것을 용이하게 하는 지침으로써의 역할을 합니다.

- -

당신은 HTTP가 작동하는 방식과 중간정도의 개발 경험이 있어야만 합니다. 개발언어에서 제공하는 TCP 소켓에 대한 지식이 요구될 수도 있습니다. 이 지침의 범위는 당신이 웹 소켓서버를 개발하기위해 필요한 최소한의 지식에 대해 소개하는것입니다.

- -
-

최신의 공식 웹 소켓 문서인 RFC 6455를 읽으세요. 1과 4-7 섹션이 특별히 서버개발자에게 흥미로운 부분입니다. 10 섹션에서는 보안에 대해 논의하며, 당신의 서버를 공개하기전 해당 부분을 반드시 정독하여 읽어보셔야만합니다.

-
- -

이 페이지에서 웹 소켓 서버는 매우 약간만 설명되어 있습니다. 웹 소켓 서버는 종종 다른 특정한 이유로 인해 분리되거나 전문화됩니다. 따라서 웹 소켓과의 핸드 쉐이크를 감지하거나 미리 처리하거나 또는 클라이언트들을 실제 웹 소켓 서버에 보내기위해 일반적으로 HTTP 서버와 같은 reverse proxy를 사용합니다. 이는 쿠키나 인증을 처리하기 위해 당신의 서버 코드를 잔뜩 작성하지 않아도 된다는 것을 의미합니다.

- -

Step 1: The WebSocket Handshake

- -

먼저 서버는 표준 TCP 소켓을 사용하여 연결하려는 소켓을 위해 반드시 듣고 있어야 합니다. 당신의 플랫폼에 따라 서버는 이미 준비가 되어있을수도 있습니다. 예를들어, 당신의 서버가 example.com에 port가 8000인 채로 듣고 있다고 가정해봅시다. 

- -
-

경고: 서버에서 아무 포트나 선택하여 연결할 수 있지만, 80 또는 443 포트가 아닌 다른 연결은 방화벽/프록시에 의해 문제를 일으킬 수 있습니다. TLS/SSL 보안 연결인 443 포트와의 연결이 가장 쉬울 것입니다. 현재 대부분의 브라우저(특히 Firefox 8+)는 안전한 페이지라 할지라도 보안 연결이 아닌 웹소켓 연결은 허용되지 않습니다.

-
- -

웹소켓의 핸드셰이크 과정은 HTTP를 바탕으로 이루어집니다. 자세한 연결 과정은 다루지 않으나, 각 요청자는 연결 과정이 제대로 이루어질때까지 요청을 보류합니다. 서버는 클라이언트가 요청하는 모든 것을 주의깊게 이해해야 하고, 그렇지 않을 경우 보안 이슈가 일어날 수 있습니다.

- -

클라이언트 핸드쉐이크 요청

- -

당신이 웹 소켓 서버를 개발 중이라도, 클라이언트는 여전히 웹 소켓 핸드쉐이킹 과정을 시작합니다. 따라서, 당신은 클라이언트의 요청을 이해하기 위한 방법을 이해해야합니다. 클라이언트는 아래와 같아 보이는 매우 표준적인 HTTP 요청을 보낼것입니다.(HTTP 버전은 반드시 1.1. 혹은 그 이상이어하며, 반드시 GET방식이어야합니다.)

- -
GET /chat HTTP/1.1
-Host: example.com:8000
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
-Sec-WebSocket-Version: 13
-
-
- -

이외에도 클라이언트는 여러 메세지나 서브프로토콜을 추가해 보낼 수도 있습니다. User-Agent, Referer, Cookie와 같은 공통 헤더나, 인증 헤더도 말이죠. 자세한 사항은 다음을 참조하세요. 원하는 대로 요청에 무엇이든지 첨부하여 보낼 수 있으며 웹소켓과 관련이 없을 경우 무시합니다. 통상적으로, 리버스 프록시가 이미 그런 기능을 담당하고 있을 겁니다.

- -

잘못된 값을 가지거나 형식이 잘못된 헤더의 경우, 서버는 "400 Bad Request" 응답을 보내 즉시 소켓을 종료시켜야 합니다. HTTP 응답 바디에 핸드셰이크에 실패한 이유가 명시되어 있지만, 브라우저 상에서 명시적으로 나타내진 않습니다. 서버가 웹소켓의 버전 인식을 실패할 경우, 인식 가능한 버전을 명시해 Sec-WebSocket-Version 요청을 보내야 합니다. (최신 가이드 v13에서 설명되어 있습니다) 이제, 가장 흥미로운 헤더인 Sec-WebSocket-Key을 살펴봅니다.

- -
-

팁: 모든 브라우저는 Origin header를 보냅니다. 이 헤더는 보안을 위해 활용되며, (checking for same origin, whitelisting/ blacklisting, etc.) 활용하고 싶지 않다면 403 Forbidden을 보냅니다. 하지만 non-browser 에이전트가 위조된 Origin을 보낼수도 있다는 것을 명심해야 합니다. 따라서 대부분의 애플리케이션은 이 헤더가 없는 요청을 거부합니다.

-
- -
-

Tip: The request-uri (/chat here) has no defined meaning in the spec. So many people cleverly use it to let one server handle multiple WebSocket applications. For example, example.com/chat could invoke a multiuser chat app, while /game on the same server might invoke a multiplayer game.

-
- -
-

Note: Regular HTTP status codes can only be used before the handshake. After the handshake succeeds, you have to use a different set of codes (defined in section 7.4 of the spec).

-
- -

서버가 보내는 핸드쉐이크 응답

- -

위와 같은 요청을 받으면 서버 역시도 HTTP 구조의 응답을 보내주어야 합니다. 자세한 내용은 아래와 같습니다.(각각의 헤더 끝에는 \r\n을 그리고 가장 마지막에는 한번 더 \r\n을 넣는걸 잊지 마세요.)

- -
HTTP/1.1 101 Switching Protocols
-Upgrade: websocket
-Connection: Upgrade
-Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
-
-
- -

Additionally, the server can decide on extension/subprotocol requests here; see Miscellaneous for details. The Sec-WebSocket-Accept part is interesting. The server must derive it from the Sec-WebSocket-Key that the client sent. To get it, concatenate the client's Sec-WebSocket-Key and "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" together (it's a "magic string"), take the SHA-1 hash of the result, and return the base64 encoding of the hash.

- -
-

FYI: This seemingly overcomplicated process exists so that it's obvious to the client whether or not the server supports WebSockets. This is important because security issues might arise if the server accepts a WebSockets connection but interprets the data as a HTTP request.

-
- -

So if the Key was "dGhlIHNhbXBsZSBub25jZQ==", the Accept will be "s3pPLMBiTxaQ9kYGzzhZRbK+xOo=". Once the server sends these headers, the handshake is complete and you can start swapping data!

- -
-

The server can send other headers like Set-Cookie, or ask for authentication or redirects via other status codes, before sending the reply handshake.

-
- -

클라이언트 추적

- -

웹소켓 프로토콜과 직접적인 연관은 없지만, 이 항목에서 언급할만한 의미가 있습니다. 웹소켓 서버는 이미 연결된 클라이언트들의 반복적인 연결(hand shaking)을 막기위해 클라이언트의 소켓 상태를 추적해야합니다. 같은 IP 주소를 가지는 클라이언트는 여러번 연결을 시도 할 수 있습니다.(하지만, 서버는 Denial-of-Service attacks 을 위해 너무 많은 연결 요청을 거부할 수 있습니다).

- -

Step 2: 데이터 프레임 교환

- -

Either the client or the server can choose to send a message at any time — that's the magic of WebSockets. However, extracting information from these so-called "frames" of data is a not-so-magical experience. Although all frames follow the same specific format, data going from the client to the server is masked using XOR encryption (with a 32-bit key). Section 5 of the specification describes this in detail.

- -

데이터 프레임 포멧

- -

모든 데이터 프레임 (서버->클라이언트 / 클라이언트 -> 서버) 은 아래의 구조를 따릅니다:

- -
 0               1               2               3
- 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7 0 1 2 3 4 5 6 7
-+-+-+-+-+-------+-+-------------+-------------------------------+
-|F|R|R|R| opcode|M| Payload len |    Extended payload length    |
-|I|S|S|S|  (4)  |A|     (7)     |             (16/64)           |
-|N|V|V|V|       |S|             |   (if payload len==126/127)   |
-| |1|2|3|       |K|             |                               |
-+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +
- 4               5               6               7
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|     Extended payload length continued, if payload len == 127  |
-+ - - - - - - - - - - - - - - - +-------------------------------+
- 8               9               10              11
-+ - - - - - - - - - - - - - - - +-------------------------------+
-|                               |Masking-key, if MASK set to 1  |
-+-------------------------------+-------------------------------+
- 12              13              14              15
-+-------------------------------+-------------------------------+
-| Masking-key (continued)       |          Payload Data         |
-+-------------------------------- - - - - - - - - - - - - - - - +
-:                     Payload Data continued ...                :
-+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
-|                     Payload Data continued ...                |
-+---------------------------------------------------------------+
- -

RSV1-3 는 사용되지 않습니다. 이 필드들은 확장 프로토콜 또는 미래를 위해 예약되었습니다.

- -

MASK 비트는 메세지가 인코딩되어있는지의 여부를 나타냅니다.클라이언트가 서버로 보내는 메세지는 항상 마스킹되어야합니다. 따라서 서버는 클라이언트로부터 받은 이 필드가 항상 1임을 기대할 수 있습니다. (만약 클라이언트가 마스킹되지 않은 메세지를 보낸다면 서버는 연결을 종료해야 합니다. 참고 : section 5.1 of the spec ).
- 서버가 클라이언트에게 보내는 메세지는 MASK 필드가 항상 0이고 데이터는 마스킹되지 않은 상태여야 합니다. 마스킹이 어떻게 이루어지는지 / 마스킹된 메세지를 어떻게 디코딩하는지는 나중에 설명합니다.
- (주의: wss 연결이라고 하더라도 클라이언트가 보내는 패킷은 항상 마스킹되어야 합니다.)

- -

opcode 필드는 뒤따라오는 payload 데이터가 어떠한 포멧인지를 나타냅니다. 0x0은 continuation, 0x1은 텍스트(항상 UTF-8), 0x2는 바이너리 데이터 / 나머지 값은 "컨트롤 코드"에 사용됩니다. (컨트롤 코드에 대해서는 나중에 다루게 됩니다.) 현재 버전의 웹소켓 프로토콜에서는 0x3 / 0x7 / 0xB~0xF는 아무런 의미도 지니고있지 않습니다.

- -

FIN 비트는 이 메세지가 마지막임을 나타냅니다. 만약 FIN 비트가 0이라면 서버는 뒤에 더 따라오게 될 메세지들까지 수신해야 합니다. FIN 비트가 1일 경우에는 전체 메세지가 수신되었으므로 이를 처리합니다. 이 부분에 대해서는 뒤에 다시 설명합니다.

- -

Payload 길이 알아내기

- -

수신한 프레임으로부터 payload 데이터를 읽기 위해서는 payload length 필드를 읽어야 합니다. 불행히도 이는 약간 복잡한 작업을 거치는데 아래 순서대로 처리해 주세요.

- -
    -
  1. 9번째부터 15번재까지의 비트를 읽습니다. 이를 unsigned integer로 취급한 다음 값이 125거나 이보다 작을 경우 이 자체가 payload length 입니다. 이 경우에는 2, 3 과정은 필요 없습니다. 하지만 126이면 2번으로, 127일 경우 3번으로 가주세요
    2. -
  2. 다음 16비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다.
    3. -
  3. 다음 64비트를 읽습니다. 이를 unsigned integer로 처리하고 payload length 값으로 사용합니다. (최상위 비트는 항상 0이어야 합니다.)
    4. -
- -

마스킹된 Payload 데이터 디코딩하기

- -

MASK 비트가 설정되어 있디만 32비트 사이즈의 Masking-Key 필드 또한 존재하게 됩니다. 
- 아래 의사코드는 Payload 데이터를 ENCODED / Masking-Key 필드를 MASK 라고 가정하고 데이터를 디코딩하는 방법을 보여줍니다. ENCODED값을 0부터 순회하면서 MASK의 i % 4에 해당하는 1바이트와 XOR 연산을 수행합니다.

- -

If the MASK bit was set (and it should be, for client-to-server messages), read the next 4 octets (32 bits); this is the masking key. Once the payload length and masking key is decoded, you can go ahead and read that number of bytes from the socket. Let's call the data ENCODED, and the key MASK. To get DECODED, loop through the octets (bytes a.k.a. characters for text data) of ENCODED and XOR the octet with the (i modulo 4)th octet of MASK. In pseudo-code (that happens to be valid JavaScript):

- -
var DECODED = "";
-for (var i = 0; i < ENCODED.length; i++) {
-    DECODED[i] = ENCODED[i] ^ MASK[i % 4];
-}
- -

이제 DECODED 데이터를 가지고 프로토콜에 맞게 활용하면 됩니다.

- -

Message Fragmentation

- -

The FIN and opcode fields work together to send a message split up into separate frames.  This is called message fragmentation. Fragmentation is only available on opcodes 0x0 to 0x2.

- -

Recall that the opcode tells what a frame is meant to do. If it's 0x1, the payload is text. If it's 0x2, the payload is binary data. However, if it's 0x0, the frame is a continuation frame. This means the server should concatenate the frame's payload to the last frame it received from that client. Here is a rough sketch, in which a server reacts to a client sending text messages. The first message is sent in a single frame, while the second message is sent across three frames. FIN and opcode details are shown only for the client:

- -
Client: FIN=1, opcode=0x1, msg="hello"
-Server: (process complete message immediately) Hi.
-Client: FIN=0, opcode=0x1, msg="and a"
-Server: (listening, new message containing text started)
-Client: FIN=0, opcode=0x0, msg="happy new"
-Server: (listening, payload concatenated to previous message)
-Client: FIN=1, opcode=0x0, msg="year!"
-Server: (process complete message) Happy new year to you too!
- -

Notice the first frame contains an entire message (has FIN=1 and opcode!=0x0), so the server can process or respond as it sees fit. The second frame sent by the client has a text payload (opcode=0x1), but the entire message has not arrived yet (FIN=0). All remaining parts of that message are sent with continuation frames (opcode=0x0), and the final frame of the message is marked by FIN=1. Section 5.4 of the spec describes message fragmentation.

- -

Pings and Pongs: The Heartbeat of WebSockets

- -

핸드쉐이크가 끝난 시점부터 서버 혹은 클라이언트는 언제든지 ping 패킷을 보낼 수 있습니다. 만약 ping 패킷이 수신되면 수신자는 가능한 빨리 응답으로 pong 패킷을 보내야 합니다. (ping에서 전달된 payload와 동일한 payload를 붙여서 pong을 보냅니다. 이 경우 최대 payload length는 125입니다.) 서버는 주기적으로 ping을 보내 클라이언트가 아직 살아있는 상태인지 체크할 수 있습니다.

- -

A ping or pong is just a regular frame, but it's a control frame. Pings have an opcode of 0x9, and pongs have an opcode of 0xA. When you get a ping, send back a pong with the exact same Payload Data as the ping (for pings and pongs, the max payload length is 125). You might also get a pong without ever sending a ping; ignore this if it happens.

- -
-

If you have gotten more than one ping before you get the chance to send a pong, you only send one pong.

-
- -

Step 4: Closing the connection

- -

To close a connection either the client or server can send a control frame with data containing a specified control sequence to begin the closing handshake (detailed in Section 5.5.1). Upon receiving such a frame, the other peer sends a Close frame in response. The first peer then closes the connection. Any further data received after closing of connection is then discarded. 

- -

Miscellaneous

- -
-

WebSocket codes, extensions, subprotocols, etc. are registered at the IANA WebSocket Protocol Registry.

-
- -

WebSocket extensions and subprotocols are negotiated via headers during the handshake. Sometimes extensions and subprotocols seem too similar to be different things, but there is a clear distinction. Extensions control the WebSocket frame and modify the payload, while subprotocols structure the WebSocket payload and never modify anything. Extensions are optional and generalized (like compression); subprotocols are mandatory and localized (like ones for chat and for MMORPG games).

- -

Extensions

- -
-

This section needs expansion. Please edit if you are equipped to do so.

-
- -

Think of an extension as compressing a file before e-mailing it to someone. Whatever you do, you're sending the same data in different forms. The recipient will eventually be able to get the same data as your local copy, but it is sent differently. That's what an extension does. WebSockets defines a protocol and a simple way to send data, but an extension such as compression could allow sending the same data but in a shorter format.

- -
-

Extensions are explained in sections 5.8, 9, 11.3.2, and 11.4 of the spec.

-
- -

TODO

- -

서브프로토콜

- -

Think of a subprotocol as a custom XML schema or doctype declaration. You're still using XML and its syntax, but you're additionally restricted by a structure you agreed on. WebSocket subprotocols are just like that. They do not introduce anything fancy, they just establish structure. Like a doctype or schema, both parties must agree on the subprotocol; unlike a doctype or schema, the subprotocol is implemented on the server and cannot be externally refered to by the client.

- -
-

Subprotocols are explained in sections 1.9, 4.2, 11.3.4, and 11.5 of the spec.

-
- -

클라이언트는 핸드쉐이크 요청 시에 특정한 서브프로콜의 목록을 같이 보낼 수 있습니다. Sec-WebSocket-Protocol 헤더에 사용하기를 원하는 서브프로토콜의 목록을 같이 보냅니다.

- -
GET /chat HTTP/1.1
-...
-Sec-WebSocket-Protocol: soap, wamp
-
-
- -

또는 아래와 같이 보낼 수도 있습니다.:

- -
...
-Sec-WebSocket-Protocol: soap
-Sec-WebSocket-Protocol: wamp
-
-
- -

클라이언트로부터 서브프로토콜 요청을 받으면, 서버는 그 중에서 자신이 지원할 수 있는 서브프로토콜을 하나 골라야 합니다. 만약 클라이언트가 보낸 목록 중, 여러개를 지원할 수 있다면 지원하는 목록 중 가장 첫번째 서브프로토콜을 보내주세요. 

- -

Imagine our server can use both soap and wamp. Then, in the response handshake, it'll send:

- -
Sec-WebSocket-Protocol: soap
-
-
- -
-

서버는 반드시 하나의 Sec-Websocket-Protocol 헤더만을 송신해야 합니다.
- 만약 서버가 어떠한 서브프로토콜도 지원하고 싶지 않다면 Sec-Websocket-Protocol 헤더를 빼고 보내주세요. 빈 값을 넣어서 보내도 안됩니다.
- 서버가 아무 서브프로토콜을 지원하지 않겠다고 한다면 클라이언트는 연결을 닫아버릴수도 있습니다.

-
- -

If you want your server to obey certain subprotocols, then naturally you'll need extra code on the server. Let's imagine we're using a subprotocol json. In this subprotocol, all data is passed as JSON. If the client solicits this protocol and the server wants to use it, the server will need to have a JSON parser. Practically speaking, this will be part of a library, but the server will need to pass the data around.

- -
-

Tip: To avoid name conflict, it's recommended to make your subprotocol name part of a domain string. If you are building a custom chat app that uses a proprietary format exclusive to Example Inc., then you might use this: Sec-WebSocket-Protocol: chat.example.com. For different versions, a widely-used method is to add a / followed by the version number, like chat.example.com/2.0. Note that this isn't required, it's just an optional convention, and you can use any string you wish.

-
- -

같이 보기

- - diff --git a/files/ko/windows_and_menus_in_xulrunner/index.html b/files/ko/windows_and_menus_in_xulrunner/index.html deleted file mode 100644 index 53fc6eea99..0000000000 --- a/files/ko/windows_and_menus_in_xulrunner/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: Windows and menus in XULRunner -slug: Windows_and_menus_in_XULRunner -tags: - - XUL - - XULRunner ---- -

-{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} -

XULRunner을 이용하여 간단한 데스크톱 애플리케이션을 만드는 방법을 알아보겠습니다. 앞 장에서 우리는 XULRunner를 설치하고 기본적인 테스트 프로그램을 만들어 보았습니다. 이번에는 사용자 인터페이스를 갖는 프로그램을 만들어 보겠습니다. -

-
  • 윈도우와 대화창 -
  • 메뉴와 툴바 -
  • 운영체제 기본 대화창 -
  • 콘트롤 및 위젯 -
-

윈도우

-

각 윈도우나 대화창은 각 XUL 파일로 만듭니다. XUL 파일 상위에는 우리가 사용할 CSS와 DTD를 선언하게 됩니다. <window>는 기본 창을 만드는 요소 입니다. 콘트롤에 대한 제목과 캡션, 창의 가로 및 세로폭을 정하는 속성을 가지고 있습니다. 아마 대부분은 아시겠지만 XUL 파일 하나 당 하나의 <window> 요소를 가집니다. 예를 들어, -

-
<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?>
-
-<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">
-
-<window id="main"
-    title="&title;"
-    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script src="main.js"/>
-...
-</window>
-
-

이제 CSS와 DTD에 대해 알아보겠습니다. CSS는 HTML에서 사용하는 방법과 같이 각 요소에 대한 디자인 및 형식을 지정해 줍니다. DTD는 XUL파일에서 언어별 지역화를 위해 바로 저장할 수 없는 제목이나 라벨 같은 문자열을 참조하는 방식으로 사용합니다. 메시지를 변경하거나 지역화 작업에 용이 합니다. 예제에서 창 title을 표시하는 방법을 참고하세요. 또한, <script> 요소를 이용하여 XUL 파일내의 동작을 제어해 줍니다. CSS, DTD, 자바스크립트를 XUL 파일에 기본적으로 삽입하는 것은 가장 기본적인 코드입니다. -

XUL 애플리케이션을 실행하려면 XULRunner가 윈도우 기본 아이콘을 제공 합니다만 원하는 아이콘으로 바꾸려면 윈도우 아이콘을 참고해서 바꿀 수 있습니다. -

-

메뉴와 툴바

-

대부분 데스크톱 애플리케이션은 자체 폼 도구를 가지고 있어서 메뉴나 툴바 구조를 추가하고 변경하는 데 매우 어렵습니다. 하지만 XUL에서는 쉽게 요소만 추가하면 만들어 낼 수 있습니다. -

아래는 XUL 메뉴와 툴바를 만드는 아주 간단한 예제 코드입니다. -

-
<?xml version="1.0"?>
-<?xml-stylesheet href="chrome://basicapp/skin/main.css" type="text/css"?>
-
-<!DOCTYPE window SYSTEM "chrome://basicapp/locale/main.dtd">
-
-<window id="main"
-    title="&title;"
-    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
-  <script src="main.js"/>
-  <toolbox>
-    <menubar id="menubar">
-      <menu id="file-menu" label="&file;">
-        <menupopup id="file-popup">
-          <menuitem label="&file.new'" oncommand="doFileNew();"/>
-          <menuitem label="&file.open;" oncommand="doFileOpen();"/>
-          <menuitem label="&file.save;" oncommand="doFileSave();"/>
-          <menuseparator/>
-          <menuitem label="&file.exit;" oncommand="doFileExit();"/>
-        </menupopup>
-      </menu>
-      <menu id="edit-menu" label="&edit;">
-        <menupopup id="edit-popup">
-          <menuitem label="&edit.undo;" oncommand="doEditUndo();"/>
-          <menuitem label="&edit.redo;" oncommand="doEditRedo();"/>
-        </menupopup>
-      </menu>
-    </menubar>
-    <toolbar id="main-toolbar">
-      <toolbarbutton id="open" label="&file.open;" oncommand="doFileOpen();"/>
-      <toolbarbutton id="save" label="&file.save;" oncommand="doFileSave();"/>
-    </toolbar>
-  </toolbox>
-...
-</window>
-
-

각 메뉴와 툴바의 라벨을 표시하기 위해 엔티티-참조를 사용했고, oncommand 이벤트는 HTML에서 onclick를 쓰는 것 처럼 자바 스크립트를 참조합니다. XUL에서는 <var>open</var>나 <var>save</var> 같은 메뉴와 툴바의 이벤트 핸들러와 명령 수행을 위한 방식을 가지고 있습니다. -

-
<commandset>
-  <command id="cmd_open" label="&file.open;" oncommand="doFileOpen();"/>
-  <command id="cmd_save" label="&file.save;" oncommand="doFileSave();"/>
-</commandset>
-...
-<menuitem  command="cmd_open"/>
-<menuitem command="cmd_save"/>
-...
-<toolbarbutton id="open" command="cmd_open"/>
-<toolbarbutton id="save" command="cmd_save"/>
-...
-
-

또한, CSS 파일로 툴바 버튼에 그림을 추가할 수 있습니다. XUL 파일내에 아이콘 파일이 있으면 CSS로 다음과 같이 표시할 수 있습니다. -


-

-
/* 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;
-}
-
-

물론 PNG 파일을 애플리케이션에 포함해서 배포해야 합니다. -

지금까지 아주 간단한 XUL 사용자 인터페이스를 살펴 보았습니다. 다음 장에서는 XUL Runner에서 UI를 생성하는 과정을 계속 살펴 보겠습니다. -

-

참고 문서

- -

{{ PreviousNext("Getting started with XULRunner", "Dialogs in XULRunner") }} -

-
-

원본 문서

-
  • 저자: Mark Finkle -
  • 최종 수정일: October 2, 2006 -
-
-
-
-{{ languages( { "ja": "ja/Windows_and_menus_in_XULRunner" } ) }} diff --git a/files/ko/xhtml/index.html b/files/ko/xhtml/index.html deleted file mode 100644 index dfab34e19d..0000000000 --- a/files/ko/xhtml/index.html +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: XHTML -slug: XHTML -tags: - - XHTML -translation_of: Glossary/XHTML ---- -

HTML은 HTML 또는 XHTML이라는 XML문법으로 브라우저를 통해 네트워크에 접속할 수 있습니다.

- -

HTML5 와 HTML/XHTML

- -

HTML5 표준은 두가지 문법을 정의합니다. MIME 타입(HTTP Content-Type 헤더로 전송되는)을 참조하여 어떤 문법을 사용할지 선택합니다. : XHTML의 MIME 타입은 application/xhtml+xml이며  이외는 text/html.

- -

아래 예제는 HTML 문서와 XHTML문서의 사용된 헤더내용을 보여줍니다.

- -

HTML 문서

- -
HTTP/1.1 200 OK
-Content-Type: text/html
-
-<!DOCTYPE html>
-<html lang=en>
-  <head>
-    <meta charset=utf-8>
-    <title>HTML</title>
-  </head>
-  <body>
-    <p>I am a HTML document</p>
-  </body>
-</html>
- -

XHTML 문서

- -
HTTP/1.1 200 OK Content-Type: application/xhtml+xml <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <title>XHTML</title> </head> <body> <p>I am a XHTML document</p> </body> </html>
- -

MIME type vs DOCTYPE

- -

HTML5 이전에는 HTML 4.01 과 XHTML 1.0  두개의 표준이 두개의 문법으로 분리되어 정의되었습니다. XHTML1 표준에는, XHTML을 사용하기 위해서는 특별한 DOCTYPE을 정의해야 한다고 명시되어있습니다. 하지만 브라우저들은 이 표준을 구현하지 않았고 반대로 HTML5 표준에서 다음과 같이 결정되었습니다. "content-type을 text/html로  전송한다면 XHTML을 사용하지 않는 것이다."

- -

대신, 적절한 MIME 타입은 Content-Type HTTP 헤더에 정의 되어 있어야 합니다. 만약 <meta http-equiv=…> 같은  메타테그에 MIME 타입을 넣었다면 그것은 무시되고 text/html로 간주됩니다..

- -

페이지를  text/html로 서비스 하지만 XHTML로 문서를 작성했다면 아래 글에서 설명하는 많은 문제점들이 발생할 것 입니다. :

- - - -

지원

- -

대부분의 브라우저들은 현재 XHTML를 지원합니다, Firefox, Chrome, Safari, Opera, 그리고 Internet Explorer (IE 9 이후). (Internet Explorer 8 과 그 이전 버전은 표준의 XHTML MIME타입을 선언한 XHTML문서를 알려지지않은 파일타입으로 간주하여 다운로드 다이얼로그를 표시합니다.)

- -

또 많이 사용하는 {{Glossary("JavaScript")}} 라이브러리와 개발자도구들은 XHTML을 제한적으로 지원하건나 지원하지 않으니 주의하십시오.

- -

HTML과의 차이점

- -

Properly Using CSS and JavaScript in XHTML Documents 글의 일부문에서 HTML과 XHTML의차이점을 설명하고 있습니다.

- -

도구

- - - -

바깥 고리

- - - -

View All...

diff --git a/files/ko/xslt_in_gecko/basic_example/index.html b/files/ko/xslt_in_gecko/basic_example/index.html deleted file mode 100644 index cb96c52c55..0000000000 --- a/files/ko/xslt_in_gecko/basic_example/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Basic Example -slug: XSLT_in_Gecko/Basic_Example -translation_of: Web/API/XSLTProcessor/Basic_Example ---- -

기본 예

-

이 첫 예는 브라우저에서 XSLT 변환 설정의 기본을 보여준다. 이 예는 Article에 대한 정보(Title, Author 목록과 Body 글)를 포함한 XML 문서를 얻어 그것을 사람이 읽을 수 있는 형식으로 나타낸다. -

그림1은 기본 XSLT예의 소스를 보여준다. XML문서(example.xml)은 글의 정보를 포함한다. ?xml-stylesheet? 처리명령을 써서, 그것의 href 속성을 통해 XSLT 스타일쉬트(example.xsl)에 연결한다. -

XSLT 스타일쉬트는 xsl:stylesheet 요소로 시작하는데, 이것은 최종 출력을 생성하는데 쓰이는 모든 템플리트를 포함한다. 그림1의 예는 템플리트 2개를 가진다 - 하나는 root 노드에 하나는 Author 노드에 대응한다. root 노드에 대응하는 템플리트는 글의 제목을 출력하고 Authors 노드의 자식노드인 Author 노드에 대응하는 모든 템플리트를 처리하기 위해 말한다. -

그림1 : 간단한 XSLT예 -

XML 문서 (example.xml) : -

-
  <?xml version="1.0"?>
-  <?xml-stylesheet type="text/xsl" href="example.xsl"?>
-  <Article>
-    <Title>My Article</Title>
-    <Authors>
-      <Author>Mr. Foo</Author>
-      <Author>Mr. Bar</Author>
-    </Authors>
-    <Body>This is my article text.</Body>
-  </Article>
-
-

XSL 스타일쉬트 (example.xsl) : -

-
  <?xml version="1.0"?>
-  <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-
-    <xsl:output method="text"/>
-
-    <xsl:template match="/">
-      Article - <xsl:value-of select="/Article/Title"/>
-      Authors: <xsl:apply-templates select="/Article/Authors/Author"/>
-    </xsl:template>
-
-    <xsl:template match="Author">
-      - <xsl:value-of select="." />
-    </xsl:template>
-
-  </xsl:stylesheet>
-
-

브라우저 출력: -

-
  Article - My Article
-  Authors:
-  - Mr. Foo
-  - Mr. Bar
-
-{{ languages( { "en": "en/XSLT_in_Gecko/Basic_Example" } ) }} diff --git a/files/ko/xslt_in_gecko/browser_differences/index.html b/files/ko/xslt_in_gecko/browser_differences/index.html deleted file mode 100644 index 0d22a5b825..0000000000 --- a/files/ko/xslt_in_gecko/browser_differences/index.html +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Browser Differences -slug: XSLT_in_Gecko/Browser_Differences -translation_of: Web/API/XSLTProcessor/Browser_Differences ---- -

브라우저 차이

-

Netscape 7.x (모든 플랫폼)과 Internet Explorer 6(윈도즈)는 W3C XSLT 1.0 표준( http://www.w3.org/TR/xslt )을 지원합니다. IE 5.0과 5.5 (둘 다 윈도즈)는 XSLT의 초안만 지원하므로 XSLT 1.0 스타일쉬트와는 호환하지 않습니다. Netscape 6.x는 XSLT 1.0을 부분적으로만 지원합니다. -

{{ languages( { "en": "en/XSLT_in_Gecko/Browser_Differences" } ) }} diff --git a/files/ko/xslt_in_gecko/generating_html/index.html b/files/ko/xslt_in_gecko/generating_html/index.html deleted file mode 100644 index 5bb284bdb8..0000000000 --- a/files/ko/xslt_in_gecko/generating_html/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: Generating HTML -slug: XSLT_in_Gecko/Generating_HTML -translation_of: Web/API/XSLTProcessor/Generating_HTML ---- -

HTML 생성하기

-

브라우저에서 XSLT의 공통 응용은 XML을 클라이언트의 안에 변환해 넣는 것이다. 두번째 예는 입력문서(example2.xml)를 변환하는데, 이것은 또 글의 정보를 포함하고 HTML문서 안에 들어간다. -

Article의 <body> 요소는 지금 HTML의 요소 (<b> 와 <u> 태그, 그림 2)를 포함한다. XML 문서는 HTML요소와 XML 요소 모두 포함하지만, 단 하나의 namespace 즉 XML 요소만 필요하다. HTML namespace가 없으므로, 그리고 XHTML namespace를 사용하여 XSL에서 an XML document를 생성하고 그것은 HTML문서와 같은 양상은 아닐 것이고, XSL Stylesheet 의xsl:output는 결과문서는 HTML처럼 다루어질 것을 보장한다 . XML 요소에 대해, 우리 자신의 namespace http://devedge.netscape.com/2002/de 는 필요하고, 그것은 접두어 myNS (xmlns:myNS="http://devedge.netscape.com/2002/de)에 주어진다. -

그림 2 XML 파일 (example2.xml) -XML Document (example2.xml): -

-
<?xml version="1.0"?>
-<?xml-stylesheet type="text/xsl" href="example2.xsl"?>
-<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de">
-<myNS:Title>My Article</myNS:Title>
-<myNS:Authors>
-<myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
-<myNS:Author>Mr. Bar</myNS:Author>
-</myNS:Authors>
-<myNS:Body>
-The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
-</myNS:Body>
-</myNS:Article>
-
-

The XSL Stylesheet used will need to have two namespaces - one for the XSLT elements and one for our own XML elements used in the XML document. The output of the XSL Stylesheet is set to HTML by using the xsl:output element. By setting the output to be HTML and not having a namespace on the resulting elements (colored in blue), those elements will be treated as HTML elements. -

그림 3 : 두 namespaces를 가진 XSL Stylesheet (example2.xsl) -XSL Stylesheet (example2.xsl): -

-
<?xml version="1.0"?>
-<xsl:stylesheet version="1.0"
-xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-xmlns:myNS="http://devedge.netscape.com/2002/de">
-
-<xsl:output method="html"/>
-...
-</xsl:stylesheet version="1.0">
-
-

A template matching the root node of the XML document is created and used to create the basic structure of the HTML page. -

Figure 4 : Creating the basic HTML document -XSL Stylesheet (example2.xsl): -

-
...
-<xsl:template match="/">
-<html>
-
-<head>
-
-<title>
-<xsl:value-of select="/myNS:Article/myNS:Title"/>
-</title>
-
-<style type="text/css">
-.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-</style>
-
-</head>
-
-<body>
-<p class="myBox">
-<span class="title">
-<xsl:value-of select="/myNS:Article/myNS:Title"/>
-</span> </br>
-
-Authors: <br />
-<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
-</p>
-
-<p class="myBox">
-<xsl:apply-templates select="//myNS:Body"/>
-</p>
-
-</body>
-
-</html>
-</xsl:template>
-...
-
-

Three more xsl:template's are needed to complete the example. The first xsl:template is used for the author nodes, while the second one processes the body node. The third template has a general matching rule which will match any node and any attribute. It is needed in order to preserve the html elements in the XML document, since it matches all of them and copies them out into the HTML document the transformation creates. -

그림 5 : 최종 3개 템플리트 -XSL Stylesheet(example2.xsl): -

-
...
-<xsl:template match="myNS:Author">
--- <xsl:value-of select="." />
-
-<xsl:if test="@company">
-:: <b> <xsl:value-of select="@company" /> </b>
-</xsl:if>
-
-<br />
-</xsl:template>
-
-<xsl:template match="myNS:Body">
-<xsl:copy>
-<xsl:apply-templates select="@*|node()"/>
-</xsl:copy>
-</xsl:template>
-
-<xsl:template match="@*|node()">
-<xsl:copy>
-<xsl:apply-templates select="@*|node()"/>
-</xsl:copy>
-</xsl:template>
-...
-
-

The final XSLT stylesheet looks as follows: -

그림 6 : 최종 XSLT Stylesheetview example | view source -XSL Stylesheet: -

-
<?xml version="1.0"?>
-<xsl:stylesheet version="1.0"
-xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
-xmlns:myNS="http://devedge.netscape.com/2002/de">
-
-<xsl:output method="html" />
-
-<xsl:template match="/">
-<html>
-
-<head>
-
-<title>
-<xsl:value-of select="/myNS:Article/myNS:Title"/>
-</title>
-
-<style type="text/css">
-.myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
-</style>
-
-</head>
-
-<body>
-<p class="myBox">
-<span class="title">
-<xsl:value-of select="/myNS:Article/myNS:Title"/>
-</span> <br />
-
-Authors: <br />
-<xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
-</p>
-
-<p class="myBox">
-<xsl:apply-templates select="//myNS:Body"/>
-</p>
-
-</body>
-
-</html>
-</xsl:template>
-
-<xsl:template match="myNS:Author">
--- <xsl:value-of select="." />
-
-<xsl:if test="@company">
-:: <b> <xsl:value-of select="@company" /> </b>
-</xsl:if>
-
-<br />
-</xsl:template>
-
-<xsl:template match="myNS:Body">
-<xsl:copy>
-<xsl:apply-templates select="@*|node()"/>
-</xsl:copy>
-</xsl:template>
-
-<xsl:template match="@*|node()">
-<xsl:copy>
-<xsl:apply-templates select="@*|node()"/>
-</xsl:copy>
-</xsl:template>
-</xsl:stylesheet>
-
-{{ languages( { "en": "en/XSLT_in_Gecko/Generating_HTML" } ) }} diff --git a/files/ko/xslt_in_gecko/index.html b/files/ko/xslt_in_gecko/index.html deleted file mode 100644 index 84d5198c58..0000000000 --- a/files/ko/xslt_in_gecko/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -title: XSLT in Gecko -slug: XSLT_in_Gecko -tags: - - XSLT -translation_of: Web/API/XSLTProcessor -translation_of_original: XSLT_in_Gecko ---- -
  1. 개요 -
  2. 기본 예제 -
  3. HTML 생성 -
  4. 브라우저 차이 -
  5. 자원 -
-{{ languages( { "en": "en/XSLT_in_Gecko" } ) }} diff --git a/files/ko/xslt_in_gecko/introduction/index.html b/files/ko/xslt_in_gecko/introduction/index.html deleted file mode 100644 index bfb103b98f..0000000000 --- a/files/ko/xslt_in_gecko/introduction/index.html +++ /dev/null @@ -1,13 +0,0 @@ ---- -title: Introduction -slug: XSLT_in_Gecko/Introduction -translation_of: Web/API/XSLTProcessor/Introduction ---- -

개요

-

W3표준 안에서 주목할만한 하나의 흐름은 스타일로부터 내용을 분리하려는 노력이다. -

이것은 같은 스타일이 여러 내용에서 재사용되는 것을 허용할 뿐 아니라 유지보수를 쉽게 하고 (하나의 파일만 바꾸어서) 내용의 외관을 빠르게 바꾸는 방법을 허용한다. -

CSS (Cascade Style Sheets)는 W3C에서 제안된 첫번째 방법이다. CSS는 스타일규칙을 웹문서에 적용하는 간단한 방법이다. 이 스타일규칙은 어떻게 문서(내용)가 놓일지 정의한다. 그러나, 여러 제한이 있다. 프로그램 구조와 복잡한 레이아웃 모델을 만드는 가능성의 부족. CSS는 요소의 위치 변화제공에 제한된다. -

XSL (Extensible Stylesheet Language)변환은 두 부분으로 구성된다. XML트리를 다른 마크업 트리로 변환하는 XSL요소, 트리를 위한 선택언어 XPath. -XSLT는 XML문서를 얻어서 XSL스타일쉬트안의 규칙에 기반한 새 문서를 생성한다. 이것은 XSLT가 원 XML문서로부터 요소를 추가, 제거, 재구성하는 것을 허용하고 따라서 결과문서구조의 좀더 세분된 제어를 허용한다. -

XSLT의 변환은 template로 구성된 규칙에 기반한다. 각 template은 입력 XML문서의 조각에 대응하고 대응하는 부분을 새 결과문서에 적용한다. -

{{ languages( { "en": "en/XSLT_in_Gecko/Introduction" } ) }} diff --git a/files/ko/xslt_in_gecko/resources/index.html b/files/ko/xslt_in_gecko/resources/index.html deleted file mode 100644 index bcdb54116f..0000000000 --- a/files/ko/xslt_in_gecko/resources/index.html +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Resources -slug: XSLT_in_Gecko/Resources -translation_of: Web/API/XSLTProcessor/Resources ---- -

자원

- diff --git "a/files/ko/\352\260\234\353\260\234\354\236\220\353\245\274_\354\234\204\355\225\234_firefox_3.6/index.html" "b/files/ko/\352\260\234\353\260\234\354\236\220\353\245\274_\354\234\204\355\225\234_firefox_3.6/index.html" deleted file mode 100644 index d6b5b7521f..0000000000 --- "a/files/ko/\352\260\234\353\260\234\354\236\220\353\245\274_\354\234\204\355\225\234_firefox_3.6/index.html" +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: 개발자를 위한 Firefox 3.6 -slug: 개발자를_위한_Firefox_3.6 -translation_of: Mozilla/Firefox/Releases/3.6 ---- -

Firefox 3.6은 새로운 웹표준, 향상된 퍼포먼스, 그리고 전체적으로 개선된 사용자와 개발자 경험을 제공합니다. 이 페이지에서는 Firefox 3.6의 새로운 기능을 다루는 링크를 제공합니다.

- -

웹사이트와 어플리케이션 개발자를 위하여

- -

CSS

- -
-
Using gradients
-
Firefox 3.6 adds support for the proposed -moz-linear-gradient and -moz-radial-gradient properties  for background.
-
Multiple backgrounds
-
The background property (as well as background-color, background-image, background-position, background-repeat, and background-attachment) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.
-
Mozilla-specific media features
-
Media features have been added for Mozilla-specific system metrics, so that media queries can be used to more safely check on the availability of features such as touch support.
-
Scaling background images
-
The background-size property from the CSS 3 Backgrounds and Borders draft is now supported under the name -moz-background-size.
-
WOFF font support
-
@font-face now supports the WOFF downloadable font file format.
-
Pointer events
-
The pointer-events property lets content specify whether or not an element may be the target of mouse pointer events.
-
- -

다방면의 CSS 변화

- - - -

HTML

- -
-
Using files from web applications
-
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 input type="file" HTML element's new multiple attribute.
-
HTML5 비디오가 poster frames을 제공합니다
-
The poster 속성은 is now supported for the video element, allowing content to specify a poster frame to be displayed until the video begins to play.
-
Checkboxes and radio buttons support the indeterminate property
-
HTML input elements of types checkbox and radio now support the indeterminate property, which allows a third, "indeterminate" state.
-
Canvas image smoothing can be controlled
-
The new mozImageSmoothingEnabled property can be used to turn on and off image smoothing when scaling in canvas elements.
-
Asynchronous script execution
-
By setting the async attribute on a script element, the script will not block loading or display of the rest of the page. Instead the script executes as soon as it is downloaded.
-
- -

JavaScript

- -

Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the ECMAScript 5 standard:

- -
    -
  • Date.parse() can now parse ISO 8601 dates like YYYY-MM-DD.
    • -
  • -

    The prototype property of function instances is no longer enumerable.

    -
    • -
- -

DOM

- -
-
Web workers can now self-terminate
-
Workers now support the nsIWorkerScope.close() method, which allows them to terminate themselves.
-
Drag and drop now supports files
-
The DataTransfer object provided to drag listeners now includes a list of files that were dragged.
-
Detecting device orientation
-
Content can now detect the orientation of the device if it has a supported accelerometer, using the MozOrientation event; see window.onmozorientation for details. Firefox 3.6 supports the accelerometer in Mac laptops.
-
Detecting document width and height changes
-
The new MozScrollAreaChanged event is dispatched whenever the document's scrollWidth and/or scrollHeight properties change.
-
- -

Miscellaneous DOM changes

- -
    -
  • The getBoxObjectFor() method has been removed, as it was non-standard and exposed even more non-standard stuff to the web. See bug 340571. Also affects MooTools which uses this call for Gecko detection; this has been fixed in the latest version of MooTools, so be sure to update.
    • -
  • The new mozInnerScreenX and mozInnerScreenY properties on DOM windows have been added; these return the screen coordinates of the top-left corner of the window's viewport.
    • -
  • The new mozScreenPixelsPerCSSPixel 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.
    • -
  • When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new hashchange event is sent to the page. See window.onhashchange for more information. bug 385434
    • -
  • The attribute document.readyState is now supported. bug 347174
    • -
  • Support for HTML5's element.classList to allow easier handling of the class attribute. bug 501257
    • -
  • localName and namespaceURI in HTML documents now behave like they do in XHTML documents: localName returns in lower case and namespaceURI for HTML elements is "http://www.w3.org/1999/xhtml".
    • -
  • element.getElementsByTagNameNS no longer lowercases its argument, so upper-case ASCII letters in the argument make matches against HTML elements fail.  The same is true for document.getElementsByTagNameNS.
    • -
  • Support has been added for addresses in geolocation via the nsIDOMGeoPositionAddress interface and a new field added to nsIDOMGeoPosition.
    • -
  • The window.getComputedStyle function now returns quotes within url() values.
    • -
- -

XPath

- -
-
The choose() XPath method is now supported
-
The choose() method is now supported by our implementation of XPath.
-
- -

XUL 과 add-on 개발자를 위하여

- -

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.6, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read Updating plug-ins for Firefox 3.6.

- -

New features

- -
-
Detecting device orientation
-
Content can now detect the orientation of the device if it has a supported accelerometer, using the MozOrientation event; see window.onmozorientation for details. Firefox 3.6 supports the accelerometer in Mac laptops.
-
Monitoring HTTP activity
-
You can now monitor HTTP transactions to observe requests and responses in real time.
-
Working with the Windows taskbar
-
It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. This has been disabled by default in Firefox 3.6.
-
- -

Places

- - - -

Storage

- -
-
Locale-aware collation of data is now supported by the Storage API
-
Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.
-
Properties on a statement can now be enumerated
-
You can now use a for..in enumeration to enumerate all the properties on a statement.
-
mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.
-
See bug 528166 for details.
-
Asynchronously bind multiple sets of parameters and execute a statement.
-
See bug 490085 for details. Documentation coming soon.
-
- -

Preferences

- - - -

태마

- -

See Updating themes for Firefox 3.6 for a list of changes related to themes.

- -
-
Lightweight themes
-
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 Personas theme architecture into Firefox.
-
- -

Miscellaneous

- -
    -
  • 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 repackage their components as XPI packages so they can be installed as standard add-ons.
    • -
  • contents.rdf is no longer supported for registering chrome in extensions. You must now use the chrome.manifest file instead. See bug 492008.
    • -
  • Added support for hiding the menu bar automatically. See bug 477256.
    • -
  • Added support for the container-live-role attribute to objects. See bug 391829.
    • -
  • The tabs-closebutton binding has been removed. See bug 500971.
    • -
  • Added support to nsISound for playing sounds based on events that have occurred. See bug 502799.
    • -
  • The syntax for the nsITreeView methods nsITreeView.canDrop() and nsITreeView.drop() has changed to support the new drag & drop API introduced in Gecko 1.9. See bug 455590.
    • -
  • Added support to snap the mouse cursor to the default button of dialog or wizard on Windows, see bug 76053. This is processed automatically by dialog and wizard element. But if a XUL application creates a window using the window element and it has a default button, it needs to call nsIDOMChromeWindow.notifyDefaultButtonLoaded() during the window's onload event handler.
    • -
  • The nsILocalFileMac interface has had two methods removed: setFileTypeAndCreatorFromMIMEType() and setFileTypeAndCreatorFromExtension().
    • -
  • The new NetUtils.jsm code module provides an easy-to-use method for asynchronously copying data from an input stream to an output stream.
    • -
  • The new openLocationLastURL.jsm 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.
    • -
  • On Windows, the nsIScreen 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.
    • -
  • Menu bars can now be hidden on Windows, using the new autohide attribute on the toolbar XUL element.
    • -
  • The loadOneTab and addTab methods now accept a new relatedToCurrent parameter and, in addition, allow the parameters to be specified by name, since nearly all of the parameters are optional.
    • -
  • The "hidden" 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.
    • -
  • The @mozilla.org/webshell;1 component no longer exists; you need to use @mozilla.org/docshell;1 instead.
    • -
  • 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 nsIUpdateTimerManager.registerTimer() for details.
    • -
  • The NPN_GetValue() function no longer provides access to XPCOM through the variable values NPNVserviceManager, NPNVDOMelement, and NPNVDOMWindow. This is part of the work toward making plugins run in separate processes in a future version of Gecko.
    • -
- -

Firefox/Gecko 개발자

- -

Certain changes are only really interesting if you work on the internals of Firefox itself.

- -

인터페이스 융합

- -

다음과 같은 인터페이스들은 결합되었습니다:

- -
    -
  • nsIPluginTagInfo2 has been merged into nsIPluginTagInfo.
    • -
  • nsIPluginInstanceInternal, nsIPPluginInstancePeer, nsIPluginInstancePeer1, nsIPluginInstancePeer2, and nsIPluginInstancePeer3 have all been merged into nsIPluginInstance.
    • -
  • nsIWindowlessPlugInstPeer has been merged into nsIPluginInstance.
    • -
  • nsIPluginManager and nsIPluginManager2 have been merged into nsIPluginHost.
    • -
- -

인터페이스 제거

- -

The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:

- -
    -
  • nsIFullScreen
    • -
  • nsIDOMSVGListener
    • -
  • nsIDOMSVGZoomListener
    • -
  • nsIInternetConfigService
    • -
  • nsIDKey
    • -
  • nsIEventHandler
    • -
  • nsIJRILiveConnectPIPeer
    • -
  • nsIJRILiveConnectPlugin
    • -
  • nsIScriptablePlugin
    • -
  • nsIClassicPluginFactory
    • -
  • nsIFileUtilities
    • -
- -

인터페이스 이동

- -

The following interfaces have been relocated from their previous IDL files into new ones:

- -
    -
  • nsIDOMNSCSS2Properties is now located in its own IDL file (dom/interfaces/css/nsIDOMCSS2Properties.idl).
    • -
  • nsIUpdateTimerManager is now located in its own IDL file.
    • -
- -

A large number of interfaces have been moved. See Interfaces moved in Firefox 3.6 for a complete list.

- -

그 외 인터페이스 변화

- -

The following assorted changes have been made:

- -
    -
  • The nsIPlugin interface now inherits from nsISupports instead of nsIFactory.
    • -
  • The nsIPluginHost interface now inherits from nsISupports instead of nsIFactory.
    • -
  • The nsIFrame interface now inherits from nsQueryFrame instead of nsISupports.
    • -
  • The nsIDeviceContext method getPaletteInfo() has been removed, as it was never implemented.
    • -
  • The nsIScriptContext method reportPendingException() has been removed, since it was no longer being used.
    • -
- -

Changes in accessibility code

- - - -

같이 보기

- - diff --git "a/files/ko/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" "b/files/ko/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" deleted file mode 100644 index 617dea4228..0000000000 --- "a/files/ko/\354\247\200\354\227\255\354\235\230_\354\275\224\353\223\234\353\245\274_\354\224\201\353\213\210\353\213\244/index.html" +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: 지역의 코드를 씁니다. -slug: 지역의_코드를_씁니다. ---- -

이 페이지는 연결되어 있지 않습니다.. 풍부한 MDC에 기여합니다.

diff --git "a/files/ko/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" "b/files/ko/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" deleted file mode 100644 index 19bfdf3f81..0000000000 --- "a/files/ko/\355\231\225\354\236\245\352\270\260\353\212\245_\352\260\234\353\260\234_\355\231\230\352\262\275_\352\265\254\354\266\225/index.html" +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 확장기능 개발 환경 구축 -slug: 확장기능_개발_환경_구축 ---- -

이 글에는 확장기능 개발을 위한 Mozilla 응용프로그램 설정 방법을 제공합니다. 특별한 지정하지 않는 한 이 방법들은 Firefox와 Thunderbird 뿐만 아니라 SeaMonkey 버전 2.0 이상에서도 적용가능합니다.

-

개요

-
    -
  • Firefox의 개발세션을 실행하기 위한 개발용 사용자 프로필을 생성합니다. 그리고 about:config 에서 특정한 개발용 환경설정을 합니다.
    • -
  • 개발용 프로필에 몇가지 Firefox 개발용 확장기능을 설치합니다.
    • -
  • 당신의 프로필의 extensions 폴더안의 파일들을 수정하고 개발용 프로필과 응용프로그램을 재시작합니다.
    • -
-

개발용 프로필

-

개발 단계에서 성능저하를 방지하려면 환경 설정 및 확장과 관련된 개인 데이터의 손실을 피하기 위해 개발 작업을 위한 별도의 프로필을 사용 할 수 있습니다.

-

별도의 프로필과 -no-remote 매개 변수와 함께 응용 프로그램을 구동하여 같은 시간에 Thunderbird 또는 Firefox 의 두 개의 인스턴스를 실행 할 수 있습니다.

-

우분투:

-
/usr/bin/firefox -no-remote -P dev
-

다른 리눅스 배포판:

-
/usr/local/bin/firefox -no-remote -P dev
-
-

맥킨토시:

-
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
-
-

윈도우즈:

-
시작 -> 실행 "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
-
-

Firefox 대신에 Thunderbird 또는 SeaMonkey를 시작 하려면 , 위의 예제에서 "firefox" 대신 "thunderbird" 또는 "seamonkey" 으로 대체합니다.

-

프로필 지정이 존재 하지 않는 경우 (또는 프로필을 지정 안하는 경우), Thunderbird 또는 Firefox 프로필 관리자가 표시됩니다. 기본 프로필로 실행 하기위해 프로필을 "default"로 지정합니다. (또는 "-P 를 생략합니다.).

-

(There is a thread in the Mozillazine forums that explains how to use both stable and development versions of Firefox to check extension compatibility. See Installing Firefox 3 or Minefield while keeping Firefox 2.)

-

개발용 설정

-

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 "about:config".

-

Not all preferences are defined by default, and are therefore not listed in about:config by default. You will have to create new (boolean) entries for them.

-
    -
  • javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console.
    • -
  • nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
    • -
  • browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See {{ Domxref("window.dump") }} for more info. You can also use {{ Interface("nsIConsoleService") }} from a privileged script.
    • -
  • javascript.options.strict = true. 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 Console2.
    • -
  • extensions.logging.enabled = true. This will send more detailed information about installation and update problems to the Error Console. (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.)
    • -
  • You might also want to set dom.report_all_js_exceptions = true. See Exception logging in JavaScript for details.
    • -
-

Accessing Firefox development preferences

-

To change preference settings in Firefox or SeaMonkey, type about:config in the Location Bar. Alternatively, use the Extension Developer's Extension, which provides a menu interface for Firefox settings.

-

Accessing Thunderbird development preferences

-

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.

-

개발에 도움되는 확장 기능

-

이 확장 기능들이 당신이 개발을 할때 도움을 줄 수 있습니다.

- -

 

-

Firefox extension proxy file

-

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.

-
    -
  1. Get the extension ID from the extension's install.rdf file.
    2. -
  2. 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}"). (How to find your profile directory) Alternatively, rather than using a GUID, create a unique ID using the format "name@youremail" (for example chromebug@mydomain.com).
    3. -
  3. The contents of this file should be the path to the directory that contains your install.rdf file. (eg. "/full/path/to/yourExtension/". Windows users should use the drive name (CAPS) and backslashes instead of frontslashes (for example "C:\full\path\to\yourExtension\" or "C:\sam\workspace\toolbar\helloWorldtoolbar\").Remember to include the closing slash and remove any trailing whitespace. -
      -
    • 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 extensions.cache, extensions.ini, extensions.rdf, compreg.dat, and xpti.dat 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.)
      • -
    -
    4. -
  4. Place the file in the extensions folder of your profile and restart the application.
    5. -
-

Using directories rather than JARs

-

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

-
content	myExtension	jar:chrome/myExtension.jar!/content/
-
-

use

-
content	myExtension	chrome/content/
-
-- cgit v1.2.3-54-g00ecf