From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/css/-moz-image-region/index.html | 54 + files/ko/web/css/-webkit-line-clamp/index.html | 111 + .../web/css/-webkit-overflow-scrolling/index.html | 86 + files/ko/web/css/@charset/index.html | 78 + .../ko/web/css/@font-face/font-display/index.html | 101 + files/ko/web/css/@font-face/index.html | 216 ++ files/ko/web/css/@import/index.html | 83 + files/ko/web/css/@keyframes/index.html | 152 + files/ko/web/css/@media/index.html | 153 + .../web/css/@media/prefers-color-scheme/index.html | 89 + files/ko/web/css/@namespace/index.html | 78 + files/ko/web/css/@page/index.html | 96 + files/ko/web/css/@supports/index.html | 193 ++ files/ko/web/css/@viewport/height/index.html | 75 + files/ko/web/css/@viewport/index.html | 120 + files/ko/web/css/@viewport/viewport-fit/index.html | 72 + files/ko/web/css/@viewport/zoom/index.html | 70 + files/ko/web/css/_colon_active/index.html | 127 + files/ko/web/css/_colon_checked/index.html | 193 ++ files/ko/web/css/_colon_default/index.html | 101 + files/ko/web/css/_colon_defined/index.html | 118 + files/ko/web/css/_colon_disabled/index.html | 129 + files/ko/web/css/_colon_enabled/index.html | 100 + files/ko/web/css/_colon_first-child/index.html | 134 + files/ko/web/css/_colon_first-of-type/index.html | 115 + files/ko/web/css/_colon_first/index.html | 97 + files/ko/web/css/_colon_focus-within/index.html | 96 + files/ko/web/css/_colon_focus/index.html | 116 + files/ko/web/css/_colon_fullscreen/index.html | 94 + files/ko/web/css/_colon_hover/index.html | 97 + files/ko/web/css/_colon_link/index.html | 105 + files/ko/web/css/_colon_not/index.html | 71 + files/ko/web/css/_colon_nth-child/index.html | 196 ++ files/ko/web/css/_colon_root/index.html | 78 + files/ko/web/css/_colon_visited/index.html | 121 + files/ko/web/css/_doublecolon_after/index.html | 179 ++ files/ko/web/css/_doublecolon_before/index.html | 237 ++ .../ko/web/css/_doublecolon_placeholder/index.html | 147 + files/ko/web/css/actual_value/index.html | 47 + files/ko/web/css/align-content/index.html | 297 ++ files/ko/web/css/all/index.html | 171 ++ .../css/all_about_the_containing_block/index.html | 263 ++ .../ko/web/css/alternative_style_sheets/index.html | 24 + files/ko/web/css/angle-percentage/index.html | 52 + files/ko/web/css/angle/index.html | 115 + files/ko/web/css/animation-delay/index.html | 85 + files/ko/web/css/animation-direction/index.html | 191 ++ files/ko/web/css/animation-duration/index.html | 140 + files/ko/web/css/animation-fill-mode/index.html | 241 ++ files/ko/web/css/animation/index.html | 349 +++ files/ko/web/css/at-rule/index.html | 76 + files/ko/web/css/attribute_selectors/index.html | 228 ++ files/ko/web/css/backdrop-filter/index.html | 146 + files/ko/web/css/backface-visibility/index.html | 217 ++ files/ko/web/css/background-attachment/index.html | 153 + files/ko/web/css/background-clip/index.html | 129 + files/ko/web/css/background-color/index.html | 169 + files/ko/web/css/background-image/index.html | 152 + files/ko/web/css/background-origin/index.html | 113 + files/ko/web/css/background-repeat/index.html | 233 ++ files/ko/web/css/background-size/index.html | 196 ++ files/ko/web/css/background/index.html | 178 ++ files/ko/web/css/basic-shape/index.html | 179 ++ files/ko/web/css/blend-mode/index.html | 404 +++ files/ko/web/css/border-bottom-color/index.html | 114 + files/ko/web/css/border-bottom-style/index.html | 134 + files/ko/web/css/border-bottom-width/index.html | 150 + files/ko/web/css/border-bottom/index.html | 109 + files/ko/web/css/border-collapse/index.html | 148 + files/ko/web/css/border-color/index.html | 184 ++ files/ko/web/css/border-image-outset/index.html | 113 + files/ko/web/css/border-image-repeat/index.html | 125 + files/ko/web/css/border-image-slice/index.html | 107 + files/ko/web/css/border-image-source/index.html | 78 + files/ko/web/css/border-image-width/index.html | 128 + files/ko/web/css/border-image/index.html | 168 + files/ko/web/css/border-left-color/index.html | 114 + files/ko/web/css/border-left-style/index.html | 134 + files/ko/web/css/border-left-width/index.html | 150 + files/ko/web/css/border-left/index.html | 109 + files/ko/web/css/border-radius/index.html | 228 ++ files/ko/web/css/border-right-color/index.html | 114 + files/ko/web/css/border-right-style/index.html | 134 + files/ko/web/css/border-right-width/index.html | 150 + files/ko/web/css/border-right/index.html | 109 + files/ko/web/css/border-spacing/index.html | 131 + files/ko/web/css/border-style/index.html | 241 ++ files/ko/web/css/border-top-color/index.html | 114 + files/ko/web/css/border-top-style/index.html | 134 + files/ko/web/css/border-top-width/index.html | 148 + files/ko/web/css/border-top/index.html | 109 + files/ko/web/css/border-width/index.html | 194 ++ files/ko/web/css/border/index.html | 151 + files/ko/web/css/box-shadow/index.html | 126 + files/ko/web/css/box-sizing/index.html | 119 + files/ko/web/css/calc()/index.html | 160 + files/ko/web/css/cascade/index.html | 229 ++ files/ko/web/css/child_combinator/index.html | 92 + files/ko/web/css/class_selectors/index.html | 107 + files/ko/web/css/clear/index.html | 231 ++ files/ko/web/css/clip-path/index.html | 614 ++++ files/ko/web/css/color/index.html | 163 + files/ko/web/css/color_value/index.html | 1374 +++++++++ files/ko/web/css/comments/index.html | 54 + files/ko/web/css/common_css_questions/index.html | 199 ++ files/ko/web/css/computed_value/index.html | 55 + files/ko/web/css/contain/index.html | 206 ++ files/ko/web/css/content/index.html | 297 ++ .../ko/web/css/css_animated_properties/index.html | 14 + files/ko/web/css/css_animations/index.html | 87 + .../css_animations/using_css_animations/index.html | 330 ++ .../border-image_generator/index.html | 2627 ++++++++++++++++ .../border-radius_generator/index.html | 1601 ++++++++++ .../box-shadow_generator/index.html | 2881 +++++++++++++++++ .../using_css_multiple_backgrounds/index.html | 55 + .../web/css/css_backgrounds_and_borders/index.html | 113 + .../scaling_background_images/index.html | 137 + .../using_multiple_backgrounds/index.html | 59 + .../ko/web/css/css_basic_user_interface/index.html | 75 + files/ko/web/css/css_box_model/index.html | 113 + .../introduction_to_the_css_box_model/index.html | 70 + .../mastering_margin_collapsing/index.html | 82 + files/ko/web/css/css_charsets/index.html | 44 + files/ko/web/css/css_color/index.html | 110 + .../css/css_colors/color_picker_tool/index.html | 3238 ++++++++++++++++++++ files/ko/web/css/css_columns/index.html | 89 + files/ko/web/css/css_conditional_rules/index.html | 44 + files/ko/web/css/css_containment/index.html | 123 + files/ko/web/css/css_device_adaptation/index.html | 42 + .../aligning_items_in_a_flex_container/index.html | 211 ++ .../index.html" | 236 ++ .../ko/web/css/css_flexible_box_layout/index.html | 108 + .../index.html" | 141 + files/ko/web/css/css_flow_layout/index.html | 46 + .../intro_to_formatting_contexts/index.html | 92 + .../index.html" | 72 + .../index.html" | 122 + .../index.html" | 92 + .../index.html" | 73 + files/ko/web/css/css_fonts/index.html | 102 + files/ko/web/css/css_generated_content/index.html | 43 + .../basic_concepts_of_grid_layout/index.html | 765 +++++ .../css_grid_layout/grid_template_areas/index.html | 533 ++++ files/ko/web/css/css_grid_layout/index.html | 253 ++ .../layout_using_named_grid_lines/index.html | 497 +++ .../line-based_placement_with_css_grid/index.html | 649 ++++ .../relationship_of_grid_layout/index.html | 625 ++++ .../implementing_image_sprites_in_css/index.html | 56 + files/ko/web/css/css_images/index.html | 107 + .../css/css_images/using_css_gradients/index.html | 750 +++++ files/ko/web/css/css_lists_and_counters/index.html | 57 + .../using_css_counters/index.html | 148 + files/ko/web/css/css_logical_properties/index.html | 136 + files/ko/web/css/css_masks/index.html | 68 + files/ko/web/css/css_miscellaneous/index.html | 43 + files/ko/web/css/css_namespaces/index.html | 42 + files/ko/web/css/css_pages/index.html | 73 + files/ko/web/css/css_positioning/index.html | 61 + .../adding_z-index/index.html | 157 + .../understanding_z_index/index.html | 32 + .../stacking_and_float/index.html | 146 + .../stacking_context_example_1/index.html | 120 + .../stacking_context_example_2/index.html | 123 + .../stacking_context_example_3/index.html | 167 + .../stacking_without_z-index/index.html | 145 + .../the_stacking_context/index.html | 240 ++ files/ko/web/css/css_ruby/index.html | 45 + files/ko/web/css/css_scroll_snap_points/index.html | 50 + files/ko/web/css/css_selectors/index.html | 133 + files/ko/web/css/css_shapes/index.html | 80 + files/ko/web/css/css_table/index.html | 48 + files/ko/web/css/css_text/index.html | 71 + files/ko/web/css/css_text_decoration/index.html | 69 + files/ko/web/css/css_transforms/index.html | 66 + .../css_transforms/using_css_transforms/index.html | 80 + files/ko/web/css/css_transitions/index.html | 59 + .../using_css_transitions/index.html | 1058 +++++++ files/ko/web/css/css_types/index.html | 100 + files/ko/web/css/css_variables/index.html | 37 + files/ko/web/css/css_writing_modes/index.html | 57 + .../index.html" | 497 +++ files/ko/web/css/cursor/index.html | 315 ++ .../index.html | 70 + files/ko/web/css/descendant_combinator/index.html | 108 + files/ko/web/css/display-internal/index.html | 131 + files/ko/web/css/display/index.html | 234 ++ files/ko/web/css/filter-function/blur()/index.html | 40 + .../css/filter-function/brightness()/index.html | 41 + .../web/css/filter-function/contrast()/index.html | 41 + files/ko/web/css/filter-function/index.html | 210 ++ files/ko/web/css/filter/index.html | 1138 +++++++ files/ko/web/css/filter_effects/index.html | 70 + files/ko/web/css/flex-basis/index.html | 209 ++ files/ko/web/css/flex-direction/index.html | 155 + files/ko/web/css/flex-flow/index.html | 91 + files/ko/web/css/flex-grow/index.html | 123 + files/ko/web/css/flex-shrink/index.html | 123 + files/ko/web/css/flex-wrap/index.html | 159 + files/ko/web/css/flex/index.html | 267 ++ files/ko/web/css/float/index.html | 215 ++ files/ko/web/css/font-family/index.html | 177 ++ files/ko/web/css/font-feature-settings/index.html | 128 + files/ko/web/css/font-size/index.html | 220 ++ files/ko/web/css/font-synthesis/index.html | 111 + files/ko/web/css/font-weight/index.html | 283 ++ files/ko/web/css/font/index.html | 345 +++ files/ko/web/css/frequency/index.html | 75 + files/ko/web/css/gap/index.html | 220 ++ .../web/css/general_sibling_combinator/index.html | 80 + .../web/css/getting_started/javascript/index.html | 144 + .../css/getting_started/svg_graphics/index.html | 195 ++ .../css/getting_started/xbl_bindings/index.html | 198 ++ .../ko/web/css/getting_started/xml_data/index.html | 186 ++ .../getting_started/xul_user_interfaces/index.html | 315 ++ files/ko/web/css/gradient/index.html | 160 + files/ko/web/css/grid-area/index.html | 206 ++ files/ko/web/css/grid/index.html | 192 ++ files/ko/web/css/height/index.html | 175 ++ files/ko/web/css/hyphens/index.html | 159 + files/ko/web/css/id_selectors/index.html | 85 + files/ko/web/css/image-rendering/index.html | 120 + files/ko/web/css/image/index.html | 175 ++ files/ko/web/css/index.html | 96 + files/ko/web/css/index/index.html | 10 + files/ko/web/css/inherit/index.html | 77 + files/ko/web/css/inheritance/index.html | 54 + files/ko/web/css/initial/index.html | 78 + files/ko/web/css/initial_value/index.html | 51 + files/ko/web/css/integer/index.html | 93 + files/ko/web/css/isolation/index.html | 114 + files/ko/web/css/layout_mode/index.html | 32 + files/ko/web/css/length-percentage/index.html | 55 + files/ko/web/css/length/index.html | 252 ++ files/ko/web/css/letter-spacing/index.html | 135 + files/ko/web/css/line-break/index.html | 112 + files/ko/web/css/linear-gradient()/index.html | 204 ++ files/ko/web/css/margin-bottom/index.html | 100 + files/ko/web/css/margin-left/index.html | 160 + files/ko/web/css/margin-right/index.html | 159 + files/ko/web/css/margin-top/index.html | 100 + files/ko/web/css/margin/index.html | 176 ++ files/ko/web/css/mask/index.html | 117 + files/ko/web/css/max-height/index.html | 127 + files/ko/web/css/max-width/index.html | 173 ++ files/ko/web/css/media_queries/index.html | 103 + .../index.html | 93 + files/ko/web/css/min-height/index.html | 123 + files/ko/web/css/min-width/index.html | 122 + files/ko/web/css/mix-blend-mode/index.html | 651 ++++ files/ko/web/css/number/index.html | 85 + files/ko/web/css/object-fit/index.html | 170 + files/ko/web/css/object-position/index.html | 123 + files/ko/web/css/opacity/index.html | 144 + files/ko/web/css/order/index.html | 110 + files/ko/web/css/outline-style/index.html | 256 ++ files/ko/web/css/outline-width/index.html | 141 + files/ko/web/css/outline/index.html | 158 + files/ko/web/css/overflow-wrap/index.html | 118 + files/ko/web/css/overflow/index.html | 146 + files/ko/web/css/padding-bottom/index.html | 111 + files/ko/web/css/padding-left/index.html | 109 + files/ko/web/css/padding-right/index.html | 109 + files/ko/web/css/padding-top/index.html | 111 + files/ko/web/css/padding/index.html | 158 + files/ko/web/css/paged_media/index.html | 19 + files/ko/web/css/paint-order/index.html | 110 + files/ko/web/css/percentage/index.html | 86 + files/ko/web/css/pointer-events/index.html | 168 + files/ko/web/css/position/index.html | 316 ++ files/ko/web/css/position_value/index.html | 135 + files/ko/web/css/pseudo-classes/index.html | 166 + files/ko/web/css/pseudo-elements/index.html | 124 + files/ko/web/css/reference/index.html | 190 ++ .../web/css/reference/property_template/index.html | 131 + files/ko/web/css/replaced_element/index.html | 65 + files/ko/web/css/resolved_value/index.html | 39 + files/ko/web/css/revert/index.html | 137 + files/ko/web/css/selector_list/index.html | 101 + files/ko/web/css/shorthand_properties/index.html | 156 + files/ko/web/css/specificity/index.html | 331 ++ files/ko/web/css/specified_value/index.html | 67 + files/ko/web/css/syntax/index.html | 79 + files/ko/web/css/tab-size/index.html | 121 + files/ko/web/css/text-align/index.html | 234 ++ files/ko/web/css/text-decoration/index.html | 133 + files/ko/web/css/text-shadow/index.html | 126 + files/ko/web/css/time/index.html | 88 + files/ko/web/css/transform-function/index.html | 158 + .../web/css/transform-function/matrix()/index.html | 89 + .../web/css/transform-function/scalex()/index.html | 101 + files/ko/web/css/transform/index.html | 151 + files/ko/web/css/transition-delay/index.html | 395 +++ files/ko/web/css/transition/index.html | 150 + files/ko/web/css/type_selectors/index.html | 86 + files/ko/web/css/universal_selectors/index.html | 105 + files/ko/web/css/unset/index.html | 120 + files/ko/web/css/url/index.html | 79 + files/ko/web/css/used_value/index.html | 127 + files/ko/web/css/user-select/index.html | 123 + .../web/css/using_css_custom_properties/index.html | 262 ++ .../ko/web/css/value_definition_syntax/index.html | 436 +++ files/ko/web/css/var()/index.html | 99 + files/ko/web/css/vertical-align/index.html | 246 ++ files/ko/web/css/visibility/index.html | 176 ++ files/ko/web/css/white-space/index.html | 242 ++ files/ko/web/css/width/index.html | 200 ++ files/ko/web/css/will-change/index.html | 171 ++ files/ko/web/css/word-break/index.html | 141 + files/ko/web/css/word-spacing/index.html | 127 + files/ko/web/css/z-index/index.html | 138 + .../index.html" | 244 ++ .../index.html" | 346 +++ .../\353\260\260\354\271\230/index.html" | 369 +++ .../\354\203\201\354\236\220/index.html" | 330 ++ .../index.html" | 126 + .../index.html" | 474 +++ .../index.html" | 149 + .../index.html" | 83 + 318 files changed, 61259 insertions(+) create mode 100644 files/ko/web/css/-moz-image-region/index.html create mode 100644 files/ko/web/css/-webkit-line-clamp/index.html create mode 100644 files/ko/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/ko/web/css/@charset/index.html create mode 100644 files/ko/web/css/@font-face/font-display/index.html create mode 100644 files/ko/web/css/@font-face/index.html create mode 100644 files/ko/web/css/@import/index.html create mode 100644 files/ko/web/css/@keyframes/index.html create mode 100644 files/ko/web/css/@media/index.html create mode 100644 files/ko/web/css/@media/prefers-color-scheme/index.html create mode 100644 files/ko/web/css/@namespace/index.html create mode 100644 files/ko/web/css/@page/index.html create mode 100644 files/ko/web/css/@supports/index.html create mode 100644 files/ko/web/css/@viewport/height/index.html create mode 100644 files/ko/web/css/@viewport/index.html create mode 100644 files/ko/web/css/@viewport/viewport-fit/index.html create mode 100644 files/ko/web/css/@viewport/zoom/index.html create mode 100644 files/ko/web/css/_colon_active/index.html create mode 100644 files/ko/web/css/_colon_checked/index.html create mode 100644 files/ko/web/css/_colon_default/index.html create mode 100644 files/ko/web/css/_colon_defined/index.html create mode 100644 files/ko/web/css/_colon_disabled/index.html create mode 100644 files/ko/web/css/_colon_enabled/index.html create mode 100644 files/ko/web/css/_colon_first-child/index.html create mode 100644 files/ko/web/css/_colon_first-of-type/index.html create mode 100644 files/ko/web/css/_colon_first/index.html create mode 100644 files/ko/web/css/_colon_focus-within/index.html create mode 100644 files/ko/web/css/_colon_focus/index.html create mode 100644 files/ko/web/css/_colon_fullscreen/index.html create mode 100644 files/ko/web/css/_colon_hover/index.html create mode 100644 files/ko/web/css/_colon_link/index.html create mode 100644 files/ko/web/css/_colon_not/index.html create mode 100644 files/ko/web/css/_colon_nth-child/index.html create mode 100644 files/ko/web/css/_colon_root/index.html create mode 100644 files/ko/web/css/_colon_visited/index.html create mode 100644 files/ko/web/css/_doublecolon_after/index.html create mode 100644 files/ko/web/css/_doublecolon_before/index.html create mode 100644 files/ko/web/css/_doublecolon_placeholder/index.html create mode 100644 files/ko/web/css/actual_value/index.html create mode 100644 files/ko/web/css/align-content/index.html create mode 100644 files/ko/web/css/all/index.html create mode 100644 files/ko/web/css/all_about_the_containing_block/index.html create mode 100644 files/ko/web/css/alternative_style_sheets/index.html create mode 100644 files/ko/web/css/angle-percentage/index.html create mode 100644 files/ko/web/css/angle/index.html create mode 100644 files/ko/web/css/animation-delay/index.html create mode 100644 files/ko/web/css/animation-direction/index.html create mode 100644 files/ko/web/css/animation-duration/index.html create mode 100644 files/ko/web/css/animation-fill-mode/index.html create mode 100644 files/ko/web/css/animation/index.html create mode 100644 files/ko/web/css/at-rule/index.html create mode 100644 files/ko/web/css/attribute_selectors/index.html create mode 100644 files/ko/web/css/backdrop-filter/index.html create mode 100644 files/ko/web/css/backface-visibility/index.html create mode 100644 files/ko/web/css/background-attachment/index.html create mode 100644 files/ko/web/css/background-clip/index.html create mode 100644 files/ko/web/css/background-color/index.html create mode 100644 files/ko/web/css/background-image/index.html create mode 100644 files/ko/web/css/background-origin/index.html create mode 100644 files/ko/web/css/background-repeat/index.html create mode 100644 files/ko/web/css/background-size/index.html create mode 100644 files/ko/web/css/background/index.html create mode 100644 files/ko/web/css/basic-shape/index.html create mode 100644 files/ko/web/css/blend-mode/index.html create mode 100644 files/ko/web/css/border-bottom-color/index.html create mode 100644 files/ko/web/css/border-bottom-style/index.html create mode 100644 files/ko/web/css/border-bottom-width/index.html create mode 100644 files/ko/web/css/border-bottom/index.html create mode 100644 files/ko/web/css/border-collapse/index.html create mode 100644 files/ko/web/css/border-color/index.html create mode 100644 files/ko/web/css/border-image-outset/index.html create mode 100644 files/ko/web/css/border-image-repeat/index.html create mode 100644 files/ko/web/css/border-image-slice/index.html create mode 100644 files/ko/web/css/border-image-source/index.html create mode 100644 files/ko/web/css/border-image-width/index.html create mode 100644 files/ko/web/css/border-image/index.html create mode 100644 files/ko/web/css/border-left-color/index.html create mode 100644 files/ko/web/css/border-left-style/index.html create mode 100644 files/ko/web/css/border-left-width/index.html create mode 100644 files/ko/web/css/border-left/index.html create mode 100644 files/ko/web/css/border-radius/index.html create mode 100644 files/ko/web/css/border-right-color/index.html create mode 100644 files/ko/web/css/border-right-style/index.html create mode 100644 files/ko/web/css/border-right-width/index.html create mode 100644 files/ko/web/css/border-right/index.html create mode 100644 files/ko/web/css/border-spacing/index.html create mode 100644 files/ko/web/css/border-style/index.html create mode 100644 files/ko/web/css/border-top-color/index.html create mode 100644 files/ko/web/css/border-top-style/index.html create mode 100644 files/ko/web/css/border-top-width/index.html create mode 100644 files/ko/web/css/border-top/index.html create mode 100644 files/ko/web/css/border-width/index.html create mode 100644 files/ko/web/css/border/index.html create mode 100644 files/ko/web/css/box-shadow/index.html create mode 100644 files/ko/web/css/box-sizing/index.html create mode 100644 files/ko/web/css/calc()/index.html create mode 100644 files/ko/web/css/cascade/index.html create mode 100644 files/ko/web/css/child_combinator/index.html create mode 100644 files/ko/web/css/class_selectors/index.html create mode 100644 files/ko/web/css/clear/index.html create mode 100644 files/ko/web/css/clip-path/index.html create mode 100644 files/ko/web/css/color/index.html create mode 100644 files/ko/web/css/color_value/index.html create mode 100644 files/ko/web/css/comments/index.html create mode 100644 files/ko/web/css/common_css_questions/index.html create mode 100644 files/ko/web/css/computed_value/index.html create mode 100644 files/ko/web/css/contain/index.html create mode 100644 files/ko/web/css/content/index.html create mode 100644 files/ko/web/css/css_animated_properties/index.html create mode 100644 files/ko/web/css/css_animations/index.html create mode 100644 files/ko/web/css/css_animations/using_css_animations/index.html create mode 100644 files/ko/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/ko/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html create 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/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html create mode 100644 files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html create mode 100644 files/ko/web/css/css_basic_user_interface/index.html create mode 100644 files/ko/web/css/css_box_model/index.html create mode 100644 files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html create mode 100644 files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html create mode 100644 files/ko/web/css/css_charsets/index.html create mode 100644 files/ko/web/css/css_color/index.html create mode 100644 files/ko/web/css/css_colors/color_picker_tool/index.html create mode 100644 files/ko/web/css/css_columns/index.html create mode 100644 files/ko/web/css/css_conditional_rules/index.html create mode 100644 files/ko/web/css/css_containment/index.html create mode 100644 files/ko/web/css/css_device_adaptation/index.html create mode 100644 files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create 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/index.html create 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/index.html create mode 100644 files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html create 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" create 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" create 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" create 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_fonts/index.html create mode 100644 files/ko/web/css/css_generated_content/index.html create mode 100644 files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html create mode 100644 files/ko/web/css/css_grid_layout/grid_template_areas/index.html create mode 100644 files/ko/web/css/css_grid_layout/index.html create mode 100644 files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html create mode 100644 files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html create mode 100644 files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html create mode 100644 files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/ko/web/css/css_images/index.html create mode 100644 files/ko/web/css/css_images/using_css_gradients/index.html create mode 100644 files/ko/web/css/css_lists_and_counters/index.html create mode 100644 files/ko/web/css/css_lists_and_counters/using_css_counters/index.html create mode 100644 files/ko/web/css/css_logical_properties/index.html create mode 100644 files/ko/web/css/css_masks/index.html create mode 100644 files/ko/web/css/css_miscellaneous/index.html create mode 100644 files/ko/web/css/css_namespaces/index.html create mode 100644 files/ko/web/css/css_pages/index.html create mode 100644 files/ko/web/css/css_positioning/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html create mode 100644 files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/ko/web/css/css_ruby/index.html create mode 100644 files/ko/web/css/css_scroll_snap_points/index.html create mode 100644 files/ko/web/css/css_selectors/index.html create mode 100644 files/ko/web/css/css_shapes/index.html create mode 100644 files/ko/web/css/css_table/index.html create mode 100644 files/ko/web/css/css_text/index.html create mode 100644 files/ko/web/css/css_text_decoration/index.html create mode 100644 files/ko/web/css/css_transforms/index.html create mode 100644 files/ko/web/css/css_transforms/using_css_transforms/index.html create mode 100644 files/ko/web/css/css_transitions/index.html create mode 100644 files/ko/web/css/css_transitions/using_css_transitions/index.html create mode 100644 files/ko/web/css/css_types/index.html create mode 100644 files/ko/web/css/css_variables/index.html create mode 100644 files/ko/web/css/css_writing_modes/index.html create mode 100644 "files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/index.html" create mode 100644 files/ko/web/css/cursor/index.html create mode 100644 files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html create mode 100644 files/ko/web/css/descendant_combinator/index.html create mode 100644 files/ko/web/css/display-internal/index.html create mode 100644 files/ko/web/css/display/index.html create mode 100644 files/ko/web/css/filter-function/blur()/index.html create mode 100644 files/ko/web/css/filter-function/brightness()/index.html create mode 100644 files/ko/web/css/filter-function/contrast()/index.html create mode 100644 files/ko/web/css/filter-function/index.html create mode 100644 files/ko/web/css/filter/index.html create mode 100644 files/ko/web/css/filter_effects/index.html create mode 100644 files/ko/web/css/flex-basis/index.html create mode 100644 files/ko/web/css/flex-direction/index.html create mode 100644 files/ko/web/css/flex-flow/index.html create mode 100644 files/ko/web/css/flex-grow/index.html create mode 100644 files/ko/web/css/flex-shrink/index.html create mode 100644 files/ko/web/css/flex-wrap/index.html create mode 100644 files/ko/web/css/flex/index.html create mode 100644 files/ko/web/css/float/index.html create mode 100644 files/ko/web/css/font-family/index.html create mode 100644 files/ko/web/css/font-feature-settings/index.html create mode 100644 files/ko/web/css/font-size/index.html create mode 100644 files/ko/web/css/font-synthesis/index.html create mode 100644 files/ko/web/css/font-weight/index.html create mode 100644 files/ko/web/css/font/index.html create mode 100644 files/ko/web/css/frequency/index.html create mode 100644 files/ko/web/css/gap/index.html create mode 100644 files/ko/web/css/general_sibling_combinator/index.html create mode 100644 files/ko/web/css/getting_started/javascript/index.html create mode 100644 files/ko/web/css/getting_started/svg_graphics/index.html create mode 100644 files/ko/web/css/getting_started/xbl_bindings/index.html create mode 100644 files/ko/web/css/getting_started/xml_data/index.html create mode 100644 files/ko/web/css/getting_started/xul_user_interfaces/index.html create mode 100644 files/ko/web/css/gradient/index.html create mode 100644 files/ko/web/css/grid-area/index.html create mode 100644 files/ko/web/css/grid/index.html create mode 100644 files/ko/web/css/height/index.html create mode 100644 files/ko/web/css/hyphens/index.html create mode 100644 files/ko/web/css/id_selectors/index.html create mode 100644 files/ko/web/css/image-rendering/index.html create mode 100644 files/ko/web/css/image/index.html create mode 100644 files/ko/web/css/index.html create mode 100644 files/ko/web/css/index/index.html create mode 100644 files/ko/web/css/inherit/index.html create mode 100644 files/ko/web/css/inheritance/index.html create mode 100644 files/ko/web/css/initial/index.html create mode 100644 files/ko/web/css/initial_value/index.html create mode 100644 files/ko/web/css/integer/index.html create mode 100644 files/ko/web/css/isolation/index.html create mode 100644 files/ko/web/css/layout_mode/index.html create mode 100644 files/ko/web/css/length-percentage/index.html create mode 100644 files/ko/web/css/length/index.html create mode 100644 files/ko/web/css/letter-spacing/index.html create mode 100644 files/ko/web/css/line-break/index.html create mode 100644 files/ko/web/css/linear-gradient()/index.html create mode 100644 files/ko/web/css/margin-bottom/index.html create mode 100644 files/ko/web/css/margin-left/index.html create mode 100644 files/ko/web/css/margin-right/index.html create mode 100644 files/ko/web/css/margin-top/index.html create mode 100644 files/ko/web/css/margin/index.html create mode 100644 files/ko/web/css/mask/index.html create mode 100644 files/ko/web/css/max-height/index.html create mode 100644 files/ko/web/css/max-width/index.html create mode 100644 files/ko/web/css/media_queries/index.html create mode 100644 files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html create mode 100644 files/ko/web/css/min-height/index.html create mode 100644 files/ko/web/css/min-width/index.html create mode 100644 files/ko/web/css/mix-blend-mode/index.html create mode 100644 files/ko/web/css/number/index.html create mode 100644 files/ko/web/css/object-fit/index.html create mode 100644 files/ko/web/css/object-position/index.html create mode 100644 files/ko/web/css/opacity/index.html create mode 100644 files/ko/web/css/order/index.html create mode 100644 files/ko/web/css/outline-style/index.html create mode 100644 files/ko/web/css/outline-width/index.html create mode 100644 files/ko/web/css/outline/index.html create mode 100644 files/ko/web/css/overflow-wrap/index.html create mode 100644 files/ko/web/css/overflow/index.html create mode 100644 files/ko/web/css/padding-bottom/index.html create mode 100644 files/ko/web/css/padding-left/index.html create mode 100644 files/ko/web/css/padding-right/index.html create mode 100644 files/ko/web/css/padding-top/index.html create mode 100644 files/ko/web/css/padding/index.html create mode 100644 files/ko/web/css/paged_media/index.html create mode 100644 files/ko/web/css/paint-order/index.html create mode 100644 files/ko/web/css/percentage/index.html create mode 100644 files/ko/web/css/pointer-events/index.html create mode 100644 files/ko/web/css/position/index.html create mode 100644 files/ko/web/css/position_value/index.html create mode 100644 files/ko/web/css/pseudo-classes/index.html create mode 100644 files/ko/web/css/pseudo-elements/index.html create mode 100644 files/ko/web/css/reference/index.html create mode 100644 files/ko/web/css/reference/property_template/index.html create mode 100644 files/ko/web/css/replaced_element/index.html create mode 100644 files/ko/web/css/resolved_value/index.html create mode 100644 files/ko/web/css/revert/index.html create mode 100644 files/ko/web/css/selector_list/index.html create mode 100644 files/ko/web/css/shorthand_properties/index.html create mode 100644 files/ko/web/css/specificity/index.html create mode 100644 files/ko/web/css/specified_value/index.html create mode 100644 files/ko/web/css/syntax/index.html create mode 100644 files/ko/web/css/tab-size/index.html create mode 100644 files/ko/web/css/text-align/index.html create mode 100644 files/ko/web/css/text-decoration/index.html create mode 100644 files/ko/web/css/text-shadow/index.html create mode 100644 files/ko/web/css/time/index.html create mode 100644 files/ko/web/css/transform-function/index.html create mode 100644 files/ko/web/css/transform-function/matrix()/index.html create mode 100644 files/ko/web/css/transform-function/scalex()/index.html create mode 100644 files/ko/web/css/transform/index.html create mode 100644 files/ko/web/css/transition-delay/index.html create mode 100644 files/ko/web/css/transition/index.html create mode 100644 files/ko/web/css/type_selectors/index.html create mode 100644 files/ko/web/css/universal_selectors/index.html create mode 100644 files/ko/web/css/unset/index.html create mode 100644 files/ko/web/css/url/index.html create mode 100644 files/ko/web/css/used_value/index.html create mode 100644 files/ko/web/css/user-select/index.html create mode 100644 files/ko/web/css/using_css_custom_properties/index.html create mode 100644 files/ko/web/css/value_definition_syntax/index.html create mode 100644 files/ko/web/css/var()/index.html create mode 100644 files/ko/web/css/vertical-align/index.html create mode 100644 files/ko/web/css/visibility/index.html create mode 100644 files/ko/web/css/white-space/index.html create mode 100644 files/ko/web/css/width/index.html create mode 100644 files/ko/web/css/will-change/index.html create mode 100644 files/ko/web/css/word-break/index.html create mode 100644 files/ko/web/css/word-spacing/index.html create mode 100644 files/ko/web/css/z-index/index.html create 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" create 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" create 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" create 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" create 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" create 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" create 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" create 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" (limited to 'files/ko/web/css') diff --git a/files/ko/web/css/-moz-image-region/index.html b/files/ko/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..1bc12db1e6 --- /dev/null +++ b/files/ko/web/css/-moz-image-region/index.html @@ -0,0 +1,54 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - CSS Property + - 'CSS:Mozilla Extensions' + - Non-standard +translation_of: Web/CSS/-moz-image-region +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

XUL 요소와 가상요소들에 대하여 {{ Cssxref("list-style-image") }}  속성을 사용할때 이 속성은 전체이미지에서 사용되는 부분의 령역을 지정합니다.  이것은 요소들이 성능을 향상시키기 위해 같은 이미지의 서로다른 부분을 사용할수 있게 합니다.

+ +
/* Keyword value */
+-moz-image-region: auto;
+
+/* <shape> value */
+-moz-image-region: rect(0, 8px, 4px, 4px);
+
+/* Global values */
+-moz-image-region: inherit;
+-moz-image-region: initial;
+-moz-image-region: unset;
+ +

 

+ +

문법은 {{ Cssxref("clip") }}속성과 류사합니다. 4개의 값은 모두 이미지의 외쪽 웃모서리로부터 상대적입니다.

+ +

{{cssinfo}}

+ +

구문

+ +
-moz-image-region: rect(top, right, bottom, left);
+ +

형식 구문

+ +
{{CSSSyntax}}
+ +

예제

+ +
#example-button {
+  /* display only the 4x4 area from the top left of this image */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* use the 4x4 area to the right of the first for the hovered button */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
+ +

브라우저 호환성

+ +

{{Compat("css.properties.-moz-image-region")}}

diff --git a/files/ko/web/css/-webkit-line-clamp/index.html b/files/ko/web/css/-webkit-line-clamp/index.html new file mode 100644 index 0000000000..1c08a3f70b --- /dev/null +++ b/files/ko/web/css/-webkit-line-clamp/index.html @@ -0,0 +1,111 @@ +--- +title: '-webkit-line-clamp' +slug: Web/CSS/-webkit-line-clamp +tags: + - CSS + - CSS Property + - Non-standard + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/-webkit-line-clamp +--- +
{{CSSRef}}
+ +

-webkit-line-clamp CSS 속성은 {{Glossary("block container", "블록 컨테이너")}}의 콘텐츠를 지정한 줄 수만큼으로 제한합니다.

+ +

{{cssxref("display")}} 속성을 -webkit-box 또는 -webkit-inline-box로, 그리고 {{cssxref("-webkit-box-orient")}} 속성을 vertical로 설정한 경우에만 동작합니다.

+ +

-webkit-line-clamp만 사용하는 경우, 말줄임표는 노출되나 넘친 콘텐츠가 숨겨지지 않으므로 대개 {{cssxref("overflow")}} 속성 또한 hidden으로 설정해야 합니다.

+ +

앵커 요소에 적용한 경우 텍스트의 끝이 아니라 중앙에서 잘리는 경우도 있습니다.

+ +
+

참고:-webkit-line-clamp는 원래 WebKit이 구현했었으며 몇몇 문제점을 가지고 있으나 레거시 지원을 위해 표준화를 거쳤습니다. CSS Overflow Module Level 3 명세의 {{cssxref("line-clamp")}}가 -webkit-line-clamp를 대체하기 위해 정의된 속성입니다.

+
+ +

구문

+ +
/* 키워드 값 */
+-webkit-line-clamp: none;
+
+/* <integer> 값 */
+-webkit-line-clamp: 3;
+-webkit-line-clamp: 10;
+
+/* 전역 값 */
+-webkit-line-clamp: inherit;
+-webkit-line-clamp: initial;
+-webkit-line-clamp: unset;
+
+ +
+
none
+
콘텐츠를 자르지 않습니다.
+
{{cssxref("integer")}}
+
몇 줄 뒤에 콘텐츠를 자를지 지정합니다. 0보다 커야 합니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

문단 자르기

+ +

HTML

+ +
<p>
+  In this example the <code>-webkit-line-clamp</code> property is set to <code>3</code>, which means the text is clamped after three lines.
+  An ellipsis will be shown at the point where the text is clamped.
+</p>
+ +

CSS

+ +
p {
+  width: 300px;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", "100")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Overflow", "#propdef--webkit-line-clamp", "-webkit-line-clamp")}}{{Spec2("CSS3 Overflow")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.-webkit-line-clamp")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/-webkit-overflow-scrolling/index.html b/files/ko/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..ef195eed02 --- /dev/null +++ b/files/ko/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,86 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS Property + - Non-standard + - Reference +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}} {{Non-standard_header}}
+ +

CSS -webkit-overflow-scrolling 속성은 터치 단말기에서 주어진 요소의 모멘텀 기반 스크롤 활성화 여부를 결정합니다.

+ +

{{cssinfo}}

+ +

값

+ +
+
auto
+
"일반적"인 스크롤을 사용합니다. 즉 손가락을 터치 화면에서 떼는 순간 스크롤이 멈춥니다.
+
touch
+
모멘텀 기반 스크롤을 사용합니다. 스크롤 제스쳐가 끝나고 손가락을 터치 화면에서 떼어도 잠시 스크롤이 지속됩니다. 지속 속도와 시간은 스크롤 제스쳐의 세기에 따라 달라집니다. 또한 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<div class="scroll-touch">
+  <p>
+    This paragraph has momentum scrolling
+  </p>
+</div>
+<div class="scroll-auto">
+  <p>
+    This paragraph does not.
+  </p>
+</div>
+ +

CSS

+ +
div {
+  width: 100%;
+  overflow: auto;
+}
+
+p {
+  width: 200%;
+  background: #f5f9fa;
+  border: 2px solid #eaf2f4;
+  padding: 10px;
+}
+
+.scroll-touch {
+  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
+}
+
+.scroll-auto {
+  -webkit-overflow-scrolling: auto; /* Stops scrolling immediately */
+}
+
+ +

결과

+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ +

명세에 속하지 않습니다. Apple의 Safari CSS Reference에 설명이 있습니다.

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.-webkit-overflow-scrolling")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/@charset/index.html b/files/ko/web/css/@charset/index.html new file mode 100644 index 0000000000..6cdeb08fb5 --- /dev/null +++ b/files/ko/web/css/@charset/index.html @@ -0,0 +1,78 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@charset +--- +
{{ CSSRef }}
+ +

@charset CSS at-규칙은 스타일 시트에 쓰이는 문자 인코딩을 지정합니다. 스타일 시트의 첫 번째 요소여야 하며 어떤 문자가 선행되지 않아야 합니다; 중첩된 문이 아니기에, 조건부 그룹 at-규칙 내에 사용될 수 없습니다. 여러 @charset at-규칙이 정의된 경우, 첫 번째 것만 사용되고 HTML 요소의 style attribute 또는 HTML 페이지의 문자 집합과 관련 있는 {{ HTMLElement("style") }} 요소 내에서 사용될 수 없습니다.

+ +
@charset "utf-8";
+
+ +

이 at-규칙은 {{ cssxref("content") }}처럼 일부 CSS 속성(property)에서 비 ASCII 문자를 사용할 때 유용합니다.

+ +

스타일 시트의 문자 인코딩을 정의하는 여러 방법이 있기에, 브라우저는 다음과 같은 순서로 다음 방법을 시도합니다( 그리고 하나가 결과를 산출하자 마자 곧 멈춥니다):

+ +
    +
  1. 파일의 시작 부분에 놓이는 Unicode byte-order 문자값.
    2. +
  2. Content-Type: HTTP 헤더의 charset attribute 또는 스타일 시트를 제공하는 데 쓰이는 프로토콜 등가물에 주어진 값.
    3. +
  3. @charset CSS at-규칙.
    4. +
  4. 참조하는 문서에 의해 정의된 문자 인코딩 사용: {{ HTMLElement("link") }} 요소의 charset attribute. 이 메서드는 HTML5에서 폐기(obsolete)되어 사용해서는 안됩니다.
    5. +
  5. 문서가 UTF-8이라고 가정
    6. +
+ +

구문

+ +
@charset "UTF-8";
+@charset 'iso-8859-15';
+
+ +

where:

+ +
+
charset
+
사용되는 문자 인코딩을 나타내는 {{cssxref("<string>")}}입니다. IANA-registry에 정의된 웹 안전 문자 인코딩의 이름이어야 합니다. 여러 이름이 인코딩과 관련된 경우, preferred로 표시된 것만 사용되어야 합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +
@charset "UTF-8";       /* 스타일 시트의 인코딩을 Unicode UTF-8로 설정 */
+@charset 'iso-8859-15'; /* 스타일 시트의 인코딩을 Latin-9 (서유럽어, euro sign 있는) 로 설정 */
+ @charset "UTF-8";      /* 무효한, at-규칙 앞에 문자(공백)가 있음 */
+@charset UTF-8;         /* 무효한, ' 또는 " 없는 문자집합 CSS {{cssxref("<string>")}}이 아님 */
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS2.1', 'syndata.html#x57', '@charset') }}{{ Spec2('CSS2.1') }}초기 정의
+ +

브라우저 호환성

+ +

{{Compat("css.at-rules.charset")}}

diff --git a/files/ko/web/css/@font-face/font-display/index.html b/files/ko/web/css/@font-face/font-display/index.html new file mode 100644 index 0000000000..20d334f95c --- /dev/null +++ b/files/ko/web/css/@font-face/font-display/index.html @@ -0,0 +1,101 @@ +--- +title: font-display +slug: Web/CSS/@font-face/font-display +translation_of: Web/CSS/@font-face/font-display +--- +
{{CSSRef}}
+ +

font-display 설명자(descriptor)는 font face가 표시되는 방법을 결정합니다. 이는 다운로드 여부와 사용 시기에 따라 다릅니다.

+ +

The font display timeline

+ +

font display 시각표는 유저 에이전트가 지정된 다운로드 폰트를 사용하려는 순간 시작하는 타이머를 기반으로 합니다. 시각표는 아래의 세 가지 기간(period)으로 나뉘어져 font face를 사용하는 모든 요소(element)의 렌더링 동작을 나타냅니다.

+ +
+
폰트 차단 기간
+
font face가 로드되지 않은 경우 font face를 사용하려는 요소는 보이지 않는 대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.
+
폰트 교체 기간
+
font face가 로드되지 않은 경우 font face를 사용하려는 요소는 (텍스트가 표시되는)대체 폰트를 렌더링 합니다. 이 기간 동안 font face가 성공적으로 로드되면 요청된 폰트로 다시 렌더링 됩니다.
+
폰트 실패 기간
+
font face가 로드되지 않은 경우 유저 에이전트는 로드 실패로 취급하고 정상적인 대체 폰트를 렌더링 합니다.
+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Keyword values */
+font-display: auto;
+font-display: block;
+font-display: swap;
+font-display: fallback;
+font-display: optional;
+ +

Values

+ +
+
auto
+
font display 전략은 유저 에이전트에 의해 정의됩니다.
+
block
+
font face에 짧은 차단 기간과 무한대의 교체 기간을 부여합니다.
+
swap
+
font face에 매우 작은 차단 기간과 무한대의 교체 기간을 부여합니다.
+
fallback
+
font face에 매우 작은 차단 기간과 짧은 교체 기간을 부여합니다.
+
optional
+
font face에 매우 작은 차단 기간과 교체 기간을 부여합니다.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@font-face {
+  font-family: ExampleFont;
+  src: url(/path/to/fonts/examplefont.woff) format('woff'),
+       url(/path/to/fonts/examplefont.eot) format('eot');
+  font-weight: 400;
+  font-style: normal;
+  font-display: fallback;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#font-display-desc', 'font-display')}}{{Spec2('CSS4 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.font-face.font-display")}}

+ +

See also

+ + diff --git a/files/ko/web/css/@font-face/index.html b/files/ko/web/css/@font-face/index.html new file mode 100644 index 0000000000..9ba2e223e6 --- /dev/null +++ b/files/ko/web/css/@font-face/index.html @@ -0,0 +1,216 @@ +--- +title: '@font-face' +slug: Web/CSS/@font-face +translation_of: Web/CSS/@font-face +--- +

{{CSSRef}}

+ +

요약(Summary)

+ +

CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치된 폰트만을 사용해야했던 제약이 없어지게되었다. @font-face at-rule 은 CSS의 top-level에서 뿐 아니라, CSS conditional-group at-rule 안에서도 사용될 수도 있다. 

+ +

{{ seeCompatTable() }}

+ +

문법(Syntax)

+ +
@font-face {
+  font-family: <a-remote-font-name>;
+  src: <source> [,<source>]*;
+  [font-weight: <weight>];
+  [font-style: <style>];
+}
+
+ +

속성값(Values)

+ +
+
<a-remote-font-name> 
+
font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
+
<source> 
+
원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
+
<weight> 
+
폰트의 굵기(font weight) 값.
+
<style> 
+
폰트 스타일(font style) 값.
+
+ +

사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다. 만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.

+ +

예제(Examples)

+ +

아래는 다운로드하여 사용가능한 폰트를 설정하는 간단한 예제이며, document의 전체 body 영역에 폰트가 적용된다.

+ +

View live sample

+ +
<html>
+<head>
+  <title>Web Font Sample</title>
+  <style type="text/css" media="screen, print">
+    @font-face {
+      font-family: "Bitstream Vera Serif Bold";
+      src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
+    }
+
+    body { font-family: "Bitstream Vera Serif Bold", serif }
+  </style>
+</head>
+<body>
+  This is Bitstream Vera Serif Bold.
+</body>
+</html>
+
+ +

아래 예제에서는 로컬에 설치된 "Helvetica Neue Bold" 폰트가 사용된다. 만약 해당 폰트가 설치되어 있지 않다면(다른 2개의 폰트를 적용하기 위한 시도를 하고), 다운로드 가능한 "MgOpenModernaBold.ttf" 폰트가 대신 사용된다.

+ +
@font-face {
+  font-family: MyHelvetica;
+  src: local("Helvetica Neue Bold"),
+  local("HelveticaNeue-Bold"),
+  url(MgOpenModernaBold.ttf);
+  font-weight: bold;
+}
+
+ +

주의사항(Notes)

+ + + +

명세(Specifications)

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('WOFF1.0', '', 'WOFF font format') }}{{ Spec2('WOFF1.0') }}Font format specification
{{ SpecName('CSS3 Fonts', '#font-face-rule', '@font-face') }}{{ Spec2('CSS3 Fonts') }} 
+ +

브라우저 호환성(Browser compatibility)

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop("1.9.1") }}4.04.010.03.1
WOFF{{ CompatGeckoDesktop("1.9.1") }}6.09.011.105.1
SVG Font{{ CompatNo() }}
+ {{ unimplemented_inline(119490) }}		yes{{ CompatNo() }}yesyes
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MiniOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile("1.9.1") }}{{ CompatUnknown() }}{{ CompatNo() }}10.0{{ CompatVersionUnknown() }}
WOFF{{ CompatNo() }}{{ CompatGeckoMobile("5.0") }}{{ CompatUnknown() }}{{ CompatNo() }}11.0{{ CompatNo() }}
SVG fonts{{ CompatNo() }}{{ CompatNo() }}
+ {{ unimplemented_inline(119490) }}		{{ CompatUnknown() }}{{ CompatNo() }}10.0{{ CompatVersionUnknown() }}
+
+ +

주의사항(Notes)

+ + + +

참고자료(See also)

+ +
+
+ + diff --git a/files/ko/web/css/@import/index.html b/files/ko/web/css/@import/index.html new file mode 100644 index 0000000000..a4648971ae --- /dev/null +++ b/files/ko/web/css/@import/index.html @@ -0,0 +1,83 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - At-rule + - CSS + - Reference +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

@import CSS @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰입니다. 이 규칙은 {{cssxref("@charset")}} 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 합니다. @import는 중첩 명령문이 아니기 때문에 조건부 그룹 @규칙 내에 사용할 수 없습니다.

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") speech;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

사용자 에이전트는 지원되지 않는 미디어 유형에 대한 자원 검색을 피할 수 있도록, 제작자는 미디어에 의존한 @import 규칙을 지정할 수 있습니다. 이러한 조건부 import는 URI 뒤에 쉼표로 구분된 미디어 질의를 지정합니다. 미디어 질의가 없으면, import는 무조건(unconditional)입니다. 미디어에 all을 지정하면 같은 효과가 있습니다.

+ +

구문

+ +
@import url;
+@import url list-of-media-queries;
+
+ +

where:

+ +
+
url
+
import할 자원의 위치를 나타내는 {{cssxref("<string>")}} 또는 {{cssxref("<uri>")}}입니다. URL은 절대 또는 상대일 수 있습니다. URL은 실제로 파일에 지정할 필요는 없음을 주의하세요; 그냥 패키지 명 및 일부를 지정할 수 있으며 적절한 파일이 자동으로 선택됩니다(가령 chrome://communicator/skin/). 자세한 내용은 여기를 참조.
+
list-of-media-queries
+
링크된 URL 내에 정의된 CSS 규칙의 적용을 조절하는 쉼표 구분된 미디어 질의 목록입니다. 브라우저가 이러한 질의를 지원하지 않으면, 링크된 자원을 로드하지 않습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Cascade', '#at-ruledef-import', '@import')}}{{Spec2('CSS3 Cascade')}} 
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Extended the syntax to support any media query and not only simple media types.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Added support for {{cssxref("<string>")}} to denote the url of a stylesheet,
+ and requirement to insert the @import rule at the beginning of the CSS document.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.import")}}

diff --git a/files/ko/web/css/@keyframes/index.html b/files/ko/web/css/@keyframes/index.html new file mode 100644 index 0000000000..dbdfd67d92 --- /dev/null +++ b/files/ko/web/css/@keyframes/index.html @@ -0,0 +1,152 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +tags: + - Animations + - At-rule + - CSS + - Reference +translation_of: Web/CSS/@keyframes +--- +
{{CSSRef}}
+ +

@keyframes @규칙은 개발자가 애니메이션 중간중간의 특정 지점들을 거칠 수 있는 키프레임들을 설정함으로써 CSS 애니메이션 과정의 중간 절차를 제어할 수 있게 합니다. 이 룰은 브라우저가 자동으로 애니메이션을 처리하는 것 보다 더 세밀하게 중간 동작들을 제어할 수 있습니다.

+ +

 

+ +
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+ +

@keyframes @규칙은 CSS 오브젝트 모델 인터페이스인 {{domxref("CSSKeyframesRule")}}를 통해서 접근합니다.

+ +

키프레임을 사용하려면 @keyframes 룰을 애니메이션과 키프레임 리스트를 매칭시킬 {{ cssxref("animation-name") }} 속성에서 사용할 이름과 함께 생성합니다. 각 @keyframes 룰은 키프레임 선택자의 스타일 리스트를 포함하고 있고, 각 리스트는 각 키프레임이 생성되고 키프레임의 스타일 정보를 포함하고 있는 지점에서 사용할 %로 구성됩니다.

+ +

키프레임은 순서대로 나열 가능합니다. 지정된 %의 순서대로 처리됩니다.

+ +

유효한 키프레임 리스트

+ +

키 프레임 리스트가 유효하려면 최소한 0% 와 100% 같은 시간에 대한 규칙은 포함해야 합니다 (%가 의미하는 것은 애니메이션의 시작과 끝 상태를 의미). 만약 이 타임 오프셋이 정해져 있지 않으면, 키 프레임 선언이 무효합니다; 파서가 인식하지 않거나 애니메이션에서 사용되지 않습니다.

+ +

만약 키 프레임 룰에 애니메이션이 되지 않는 속성을 포함하면 이 속성은 무시가 됩니다. 애니메이션을 지원하는 속성들은 여전히 애니메이션이 됩니다.

+ +

중복 해상도

+ +

만약 한개의 이름에 대해서 여러개의 키프레임 셋이 존재하면, 파서가 마지막으로 마주치는 키프레임 셋만 유효합니다. @keyframes 룰은 연속되지 않기 때문에 한개의 룰 셋 이상을 적용하지 않습니다.

+ +

키 프레임 밖에 속성이 지정된 경우

+ +

어떤 키 프레임에도 정의되지 않는 속성들은 애니메이션과는 완전 별도로 삽입되지 않는 경우를 제외하고는 삽입됩니다. 예를 들어,

+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +

여기 {{ cssxref("top") }} 속성은 0%, 30%, 100% 키 프레임을 이용하여 애니메이션 됩니다. {{ cssxref("left") }} 속성은 0%, 68%, 100% 키 프레임을 사용합니다.

+ +

0% 와 100% 키 프레임 모두에 정의된 속성들만 애니메이션 동작을 합니다. 이 둘 중 아무것도 포함되지 않은 속성은 애니메이션 연속을 지속하기 위한 시작 값으로 사용됩니다.

+ +

키 프레임이 여러번 정의 된 경우

+ +

스펙에서는 모든 속성이 각 키 프레임이 지정된 게 아니라 키 프레임이 여러번 정의 된 경우에는 가장 최근의 키프레임에 선언된 값들만 유효하다고 나와 있습니다. 예를 들어,

+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +

이 예제를 보면 50% 키프레임에서 top: 10px 이고 다른 값들은 모두 무시됩니다.

+ +

{{ non-standard_inline }} {{ fx_minversion_inline("14") }} 키 프레임 효과 연속은 파이어폭스 14부터 지원됩니다. 이 의미는 위 예제의 경우 50% 키 프레임에서 왼쪽 : 20px 값이 고려된다는 의미입니다. 이러한 기능이 스펙에는 아직 정의가 되어있진 않지만, 현재 도입에 대한 토론이 진행 중입니다.

+ +

키프레임에서 !important

+ +

키프레임에서 !important 속성을 이용한 정의는 모두 무시됩니다.

+ +
@keyframes important1 {
+   from { margin-top: 50px; }
+   50%   { margin-top: 150px !important; } /* ignored */
+   to     { margin-top: 100px; }
+}
+
+@keyframes important2 {
+  from { margin-top: 50px;
+                 margin-bottom: 100px; }
+   to     { margin-top: 150px !important; /* ignored */
+                 margin-bottom: 50px; }
+}
+
+ +

Syntax

+ +

Values

+ +
+
<identifier>
+
A name identifying the keyframe list. This must match the identifier production in CSS syntax.
+
from
+
A starting offset of 0%.
+
to
+
An ending offset of 100%.
+
{{cssxref("<percentage>")}}
+
A percentage of the time through the animation sequence at which the specified keyframe should occur.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

See CSS animations for examples.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser compatibility

+ +

{{Compat("css.at-rules.keyframes")}}

+ +

Notes

+ +
    +
  1. @keyframes not supported in an inline or scoped stylesheet in Firefox ({{bug(830056)}}).
    2. +
+ +

See also

+ + diff --git a/files/ko/web/css/@media/index.html b/files/ko/web/css/@media/index.html new file mode 100644 index 0000000000..6c06996035 --- /dev/null +++ b/files/ko/web/css/@media/index.html @@ -0,0 +1,153 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - '@media' + - At-rule + - CSS + - Reference + - 미디어 쿼리 +translation_of: Web/CSS/@media +--- +
{{CSSRef}}
+ +

@media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

+ +
+

참고: JavaScript에서는 @media를 {{domxref("CSSMediaRule")}} CSS 객체 모델 인터페이스로 접근할 수 있습니다.

+
+ +

구문

+ +

@media @규칙은 최상위 코드나, 아무 조건부 그룹 @규칙 안에 중첩해 작성할 수 있습니다.

+ +
/* 최상위 코드 레벨 */
+@media screen and (min-width: 900px) {
+  article {
+    padding: 1rem 3rem;
+  }
+}
+
+/* 다른 조건부 @규칙 내에 중첩 */
+@supports (display: flex) {
+  @media screen and (min-width: 900px) {
+    article {
+      display: flex;
+    }
+  }
+}
+
+ +

미디어 쿼리 구문에 관한 내용은 미디어 쿼리 사용하기 문서를 참고하세요.

+ +

접근성 고려사항

+ +

글씨 크기를 조절한 사용자를 위해서, 미디어 쿼리의 {{cssxref("<length>")}} 자리에는 em을 사용하는게 좋습니다.

+ +

em과 px 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 em이 더 자연스럽게 동작합니다.

+ +

Level 4 미디어 쿼리를 통한 사용자 경험 향상도 고려해보세요. 예컨대 prefers-reduced-motion 쿼리를 사용하면 사용자가 시스템에 애니메이션을 최소로 줄여달라고 요청했는지 알 수 있습니다.

+ +

보안

+ +

미디어 쿼리는 사용자의 장치와 더 나아가 기능과 디자인에 대한 통찰을 제공하므로, "핑거프린팅"을 통해 장치 고유 식별자로 활용하거나, 그보단 덜 해도 사용자가 원하지 않을 수준의 분류를 하기 위해 오용할 가능성이 있습니다.

+ +

그러므로 브라우저는 기기의 특정을 방지하기 위해 일부 반환 값을 모호하게 할 수 있습니다. 또한 사용자에게 추가 설정을 제공할 수도 있는데, 예를 들어 Firefox의 "핑거프린터 차단" 기능을 활성화하면 많은 수의 미디어 쿼리는 실제 장치 상태 대신 기본 값을 보고하게 됩니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

출력과 화면 미디어 타입 판별

+ +
@media print {
+  body { font-size: 10pt; }
+}
+
+@media screen {
+  body { font-size: 13px; }
+}
+
+@media screen, print {
+  body { line-height: 1.2; }
+}
+
+@media only screen
+  and (min-width: 320px)
+  and (max-width: 480px)
+  and (resolution: 150dpi) {
+    body { line-height: 1.4; }
+}
+ +

Media Queries Level 4부터는 새로운 범위 표현 구문을 사용해 더 간결한 미디어 쿼리를 작성할 수 있습니다.

+ +
@media (height > 600px) {
+    body { line-height: 1.4; }
+}
+
+@media (400px <= width <= 700px) {
+    body { line-height: 1.4; }
+}
+ +

더 많은 예제는 미디어 쿼리 사용하기를 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationCommentFeedback
{{SpecName('CSS5 Media Queries', '#at-media5', '@media')}}Reinstates light-level, inverted-colors and Custom Media Queries, which were removed from Level 4.
+ Adds prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, and prefers-color-scheme media features.		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}Defines the basic syntax of the @media rule.CSS Working Group drafts GitHub issues
{{SpecName('CSS4 Media Queries', '#media', '@media')}} +

Adds scripting, pointer, hover, update, overflow-block, and overflow-inline media features.
+ Deprecates all media types except for screen, print, speech, and all.
+ Makes the syntax more flexible by adding, among other things, the or keyword.

+ 		CSS Working Group drafts GitHub issues
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.media")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/@media/prefers-color-scheme/index.html b/files/ko/web/css/@media/prefers-color-scheme/index.html new file mode 100644 index 0000000000..1ce1a10a2b --- /dev/null +++ b/files/ko/web/css/@media/prefers-color-scheme/index.html @@ -0,0 +1,89 @@ +--- +title: prefers-color-scheme +slug: Web/CSS/@media/prefers-color-scheme +tags: + - '@media' + - CSS + - Reference + - Web + - prefers-color-scheme +translation_of: Web/CSS/@media/prefers-color-scheme +--- +

prefers-color-scheme CSS 미디어 특성은 사용자의 시스템이 라이트 테마나 다크 테마를 사용하는지 탐지하는 데에 사용됩니다.

+ +

구문

+ +
+
no-preference
+
사용자가 시스템에 선호하는 테마를 알리지 않았음을 나타냅니다. 이 키워드는 boolean context에서 false로 판정됩니다.
+
light
+
사용자가 시스템에 라이트 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.
+
dark
+
사용자가 시스템에 다크 테마를 사용하는 것을 선호한다고 알렸음을 나타냅니다.
+
+ +

예제

+ +

이 예제는 검은 배경에 흰 텍스트를 가진 요소를 라이트 테마를 사용하는 사용자가 볼 경우 색을 반대로 해서 나타냅니다.

+ +

HTML

+ +
<div class="themed">Theme</div>
+
+ +

CSS

+ +
.themed {
+  display: block;
+  width: 10em;
+  height: 10em;
+  background: black;
+  color: white;
+}
+
+@media (prefers-color-scheme: light) {
+  .themed {
+    background: white;
+    color: black;
+  }
+}
+
+ +

Result

+ +

{{EmbedLiveSample("예제")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
+

{{SpecName('CSS5 Media Queries', '#descdef-media-prefers-color-scheme', 'prefers-color-scheme')}}

+ 		{{Spec2('CSS5 Media Queries')}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("css.at-rules.media.prefers-color-scheme")}}

+ +

같이 보기

+ + + +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/ko/web/css/@namespace/index.html b/files/ko/web/css/@namespace/index.html new file mode 100644 index 0000000000..d4059df78e --- /dev/null +++ b/files/ko/web/css/@namespace/index.html @@ -0,0 +1,78 @@ +--- +title: '@namespace' +slug: Web/CSS/@namespace +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@namespace +--- +
{{CSSRef}}
+ +

@namespace는 CSS 스타일 시트에서 사용되는 XML 네임스페이스를 정의하는 at-규칙입니다. 정의된 네임스페이스는 오직 그 네임스페이스 내의 요소를 선택만 하기 위해 universal, type 및 attribute 선택자를 제한하는 데 사용될 수 있습니다. @namespace 규칙은 보통 여러 네임스페이스(인라인 SVG 또는 MathML 있는 HTML5 또는 다양한 어휘를 섞는 XML 등)를 포함하는 문서를 처리하는 경우에만 유용합니다.

+ +

어떤 @namespace 규칙이든 모든 @charset 및 @import 규칙의 다음에 오고 스타일시트에서 모든 다른 at-규칙 및 스타일 선언보다 앞서야 합니다.

+ +

@namespace는 스타일 시트를 위한 기본 네임스페이스를 정의하는 데 사용될 수 있습니다. 기본 네임스페이스가 정의된 경우, 모든 universal 및 type 선택자 (attribute 선택자는 아님, 아래 주의 참조) 는 그 네임스페이스 내 요소에만 적용됩니다.

+ +

@namespace 규칙은 또한 네임스페이스 접두어(namespace prefix)를 정의하는 데도 사용될 수 있습니다. universal, type 또는 attribute 선택자가 네임스페이스 접두어로 시작되는 경우, 그때 그 선택자는 요소 또는 attribute의 네임스페이스 및 이름이 일치하는 경우에만 일치합니다.

+ +

외부 요소로 알려진 HTML5에서는, 자동으로 네임스페이스가 할당됩니다. 이는 HTML 요소는 마치 XHTML 네임스페이스 (http://www.w3.org/1999/xhtml) 에 있는 것처럼 행동하고, 문서 어디에든 xmlns attribute가 없을지라도, <svg> 및 <math> 요소는 그들의 적절한 네임스페이스 (http://www.w3.org/2000/svg 및 http://www.w3.org/1998/Math/MathML) 가 할당됨을 뜻합니다.

+ +
+

주의: XML에서, 접두어가 직접 attribute (가령, xlink:href)에 정의되지 않는 한, 그 attribute은 네임스페이스가 없습니다. 다시 말해서, attribute은 그들이 붙은 요소의 네임스페이스를 상속받지 않습니다. 이 행동(behaviour)를 일치시키기 위해, CSS에서 기본 네임스페이스는 attribute 선택자에 적용되지 않습니다.

+
+ +

구문

+ +
/* 기본 네임스페이스 */
+@namespace url(XML-namespace-URL);
+@namespace "XML-namespace-URL";
+
+/* 접두어 붙은 네임스페이스 */
+@namespace prefix url(XML-namespace-URL);
+@namespace prefix "XML-namespace-URL";
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
@namespace url(http://www.w3.org/1999/xhtml);
+@namespace svg url(http://www.w3.org/2000/svg);
+
+/* 이는 모든 XHTML <a> 요소와 일치합니다, XHTML이 접두어 붙지 않은 기본 네임스페이스이기에 */
+a {}
+
+/* 이는 모든 SVG <a> 요소와 일치합니다 */
+svg|a {}
+
+/* 이는 XHTML 및 SVG <a> 요소 둘 다와 일치합니다 */
+*|a {}
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Namespaces', '#declaration', '@namespace')}}{{Spec2('CSS3 Namespaces')}}초기 정의
+ +

브라우저 호환성

+ +

{{Compat("css.at-rules.namespace")}}

diff --git a/files/ko/web/css/@page/index.html b/files/ko/web/css/@page/index.html new file mode 100644 index 0000000000..dd9d2e2ac0 --- /dev/null +++ b/files/ko/web/css/@page/index.html @@ -0,0 +1,96 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

@page CSS @규칙은 문서를 인쇄할 때 일부 CSS 속성을 수정하는 데 쓰입니다. @page로 모든 CSS 속성을 바꿀 수는 없습니다. 문서의 margin, orphan, widow(앞단에서 넘어온 짤막한 행) 및 page break만 바꿀 수 있습니다. 다른 CSS 속성을 바꾸려는 시도는 무시됩니다.

+ +
@page {
+  margin: 1cm;
+}
+
+@page :first {
+  margin: 2cm;
+}
+
+ +

@page @규칙은 CSS 객체 모델 인터페이스 {{domxref("CSSPageRule")}}를 통해 액세스될 수 있습니다.

+ +
주의: W3C은 viewport 관련 {{cssxref("<length>")}} 단위, vh, vw, vmin 및 vmax 처리법을 논의 중입니다. 그 동안에 @page @규칙 내에서 사용하지 마세요.
+ +

구문

+ +

서술자

+ +
+
size
+
페이지 박스 내 포함 블록의 대상(target) 크기 및 방향을 지정합니다. 한 페이지 박스가 한 페이지 시트에 렌더링 되는 일반적인 경우에, 또한 대상(destination) 페이지 시트의 크기를 나타냅니다.
+
+ +
+
marks
+
문서에 crop 및/또는 registration 마크를 추가합니다.
+
+ +
+
bleed
+
페이지 렌더링이 잘리는(clip) 페이지 박스 너머 범위를 지정합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

예제를 위한 @page의 다양한 가상 클래스 참조해 주세요.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS Logical Properties', '#logical-page', ':recto and :verso')}}{{Spec2('CSS Logical Properties')}}:recto 및 :verso 페이지 선택자 추가
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}{{SpecName('CSS2.1')}}에서 변화 없음, 더 많은 CSS at-규칙이 @page 내에 사용될 수 있지만.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}초기 정의
+ +

브라우저 호환성

+ +

{{Compat("css.at-rules.page")}}

diff --git a/files/ko/web/css/@supports/index.html b/files/ko/web/css/@supports/index.html new file mode 100644 index 0000000000..e2d9c44ec3 --- /dev/null +++ b/files/ko/web/css/@supports/index.html @@ -0,0 +1,193 @@ +--- +title: '@supports' +slug: Web/CSS/@supports +tags: + - At-rule + - CSS + - Layout + - Reference + - Web +translation_of: Web/CSS/@supports +--- +
{{CSSRef}}
+ +

@supports CSS @규칙은 주어진 하나 이상의 CSS 기능을 브라우저가 지원하는지에 따라 다른 스타일 선언을 할 수 있는 방법을 제공합니다. 이를 기능 쿼리(feature query)라고 부릅니다. @supports는 스타일의 최상위 단계, 또는 다른 조건부 그룹 규칙에 중첩해 위치할 수 있습니다.

+ +
@supports (display: grid) {
+  div {
+    display: grid;
+  }
+}
+ +
@supports not (display: grid) {
+  div {
+    float: right;
+  }
+}
+ +

JavaScript에서, @supports는 CSS 객체 모델 인터페이스 {{DOMxRef("CSSSupportsRule")}}로 접근할 수 있습니다.

+ +

구문

+ +

@supports @규칙은 하나의 선언 블록을 특정 기능의 브라우저 지원 조건과 연결할 수 있습니다. 지원 조건은 하나 이상의 키-값 쌍을 논리곱(and), 논리합(or), 부정(not)으로 연결해 구성합니다. 괄호로 묶어 우선순위를 지정할 수도 있습니다.

+ +

선언 구문

+ +

가장 기본적인 지원 조건은 단순한 선언(속성 이름과 그 값)입니다. 선언은 괄호로 묶여야 합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 5% 5%가 유효하다고 여길 때 통과합니다.

+ +
@supports (transform-origin: 5% 5%) {}
+ +

함수 구문

+ +

두 번째 기본적인 지원 조건은 지원 함수로, 모든 브라우저가 함수 구문을 지원하지만 지원 함수 자체는 아직 표준화 중입니다.

+ +

selector() {{experimental_inline}}

+ +

브라우저가 주어진 선택자를 지원하는지 판별합니다. 다음 예제는 브라우저가 자식 결합자를 지원할 때 통과합니다.

+ +
@supports selector(A > B) {}
+
+ +

not 연산자

+ +

not 연산자를 어떤 표현식 앞에 붙이면 그 반대 결과를 낳는 새로운 표현식을 생성합니다. 다음 예제는 브라우저가 {{cssxref("transform-origin")}} 속성의 값으로 10em 10em 10em이 유효하지 않다고 여길 때 통과합니다.

+ +
@supports not (transform-origin: 10em 10em 10em) {}
+ +

다른 연산자와 마찬가지로, 선언의 복잡도와 관계 없이 not 연산자를 적용할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

+ +
@supports not (not (transform-origin: 2px)) {}
+@supports (display: grid) and (not (display: inline-grid)) {}
+ +
+

참고: 최상위 not 연산자는 괄호로 감싸지 않아도 괜찮습니다. and, or 등 다른 연산자와 함께 사용할 때는 괄호가 필요합니다.

+
+ +

and 연산자

+ +

and 연산자는 두 표현식의 논리곱으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식이 모두 참일 때만 참을 반환합니다. 다음 예제는 두 개의 구성 표현식이 동시에 참이어야만 통과합니다.

+ +
@supports (display: table-cell) and (display: list-item) {}
+ +

다수의 논리곱은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

+ +
@supports (display: table-cell) and (display: list-item) and (display:run-in) {}
+@supports (display: table-cell) and ((display: list-item) and (display:run-in)) {}
+ +

or 연산자

+ +

or 연산자는 두 표현식의 논리합으로부터 새로운 표현식을 생성합니다. 새로운 표현식은 두 구성 표현식 중 어느 한 쪽이라도 참이면 참을 반환합니다. 다음 예제는 두 개의 구성 표현식 중 하나라도 참이면 통과합니다.

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}
+
+ +

다수의 논리합은 괄호 없이 병치할 수 있습니다. 다음 두 예시는 모두 유효한 구문입니다.

+ +
@supports (transform-style: preserve) or (-moz-transform-style: preserve) or
+          (-o-transform-style: preserve) or (-webkit-transform-style: preserve) {}
+
+@supports (transform-style: preserve-3d) or ((-moz-transform-style: preserve-3d) or
+          ((-o-transform-style: preserve-3d) or (-webkit-transform-style: preserve-3d))) {}
+ +
+

참고: and와 or 연산자를 같이 사용할 때는 괄호를 사용해 연산자 적용 순서를 정의해야 합니다. 그렇지 않으면 조건이 유효하지 않으므로 @-규칙 전체를 무시합니다.

+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

주어진 CSS 속성의 지원 여부 판별

+ +
@supports (animation-name: test) {
+    … /* 애니메이션 속성을 접두사 없이 사용할 수 있을 때 CSS 적용 */
+    @keyframes { /* 다른 @-규칙을 중첩 가능 */
+      …
+    }
+}
+
+ +

주어진 CSS 속성 및 접두사 버전의 지원 여부 판별

+ +
@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
+            (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
+    … /* 접두사가 붙더라도 3D 변형을 지원하면 CSS 적용 */
+}
+
+ +

특정 CSS 속성의 미지원 여부 판별

+ +
@supports not ((text-align-last: justify) or (-moz-text-align-last: justify) ){
+    … /* text-align-last: justify를 대체할 CSS */
+}
+ +

사용자 정의 속성 지원 여부 판별

+ +
@supports (--foo: green) {
+  body {
+    color: var(--varName);
+  }
+}
+ +

선택자 지원 여부 판별 (예: {{CSSxRef(":is", ":is()")}})

+ +

{{SeeCompatTable}}

+ +
/* :is()를 지원하지 않는 브라우저에서는 무시함 */
+:is(ul, ol) > li {
+  … /* :is() 선택자를 지원할 때 적용할 CSS */
+}
+
+@supports not selector(:is(a, b)) {
+  /* :is()를 지원하지 않을 때 대체할 CSS */
+  ul > li,
+  ol > li {
+    … /* :is()를 지원하지 않을 때 적용할 CSS */
+  }
+}
+
+@supports selector(:nth-child(1n of a, b)) {
+  /* @supports로 먼저 묶지 않으면 :nth-child()의 of 구문을
+     지원하지 않는 브라우저에서 스타일을 잘못 적용할 수 있음 */
+  :is(:nth-child(1n of ul, ol) a,
+  details > summary) {
+    … /* :is() 선택자와 :nth-child()의 of 구문을 지원할 때 적용할 CSS */
+  }
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Conditional 4", "#at-supports", "@supports")}}{{Spec2("CSS Conditional 4")}}Adds the selector()function.
{{SpecName("CSS3 Conditional", "#at-supports", "@supports")}}{{Spec2("CSS3 Conditional")}}Initial definition.
+ +

브라우저 호환성

+ +

{{Compat("css.at-rules.supports")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/@viewport/height/index.html b/files/ko/web/css/@viewport/height/index.html new file mode 100644 index 0000000000..4a97de7c7f --- /dev/null +++ b/files/ko/web/css/@viewport/height/index.html @@ -0,0 +1,75 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - CSS Descriptor + - Reference +translation_of: Web/CSS/@viewport +--- +
{{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/index.html b/files/ko/web/css/@viewport/index.html new file mode 100644 index 0000000000..e77278c61e --- /dev/null +++ b/files/ko/web/css/@viewport/index.html @@ -0,0 +1,120 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +tags: + - Adaptation + - At-rule + - CSS + - Device + - NeedsContent + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/CSS/@viewport +--- +
{{SeeCompatTable}}{{CSSRef}}
+ +

The @viewport CSS at-rule lets you configure the {{glossary("viewport")}} through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).

+ +

Lengths specified as percentages are calculated relative to the initial viewport, which is the viewport before any user agent or authored styles have had an opportunity to adjust the viewport. This is typically based on the size of the window on desktop browsers that aren't in full screen mode.

+ +

On mobile devices (or desktop devices that are in full screen mode), the initial viewport is usually the portion of a device's screen that is available for application use. This may be either the full screen or the full screen area minus areas controlled by the operating system (such as a taskbar) or the application-available screen area (either the full screen or the screen minus any areas owned by the operating system or other applications).

+ +
@viewport {
+  width: device-width;
+}
+ +

Syntax

+ +

The at-rule contains a set of nested {{glossary("descriptor (CSS)", "descriptor")}}s in a CSS block that is delimited by curly braces.

+ +

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

+ +

Descriptors

+ +

Browser support for @viewport is weak at this time, with support being largely available in Internet Explorer and Edge. Even in those browsers, only a small number of descriptors are available. Browsers will ignore @viewport if they don't support it, and will ignore any descriptors that they don't recognize.

+ +
+
min-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
max-width
+
Used in the determination of the width of the viewport when the document is first displayed.
+
width
+
A shorthand descriptor for setting both min-width and max-width.
+
min-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
max-height
+
Used in the determination of the height of the viewport when the document is first displayed.
+
height
+
A shorthand descriptor for setting both min-height and max-height.
+
zoom
+
Sets the initial zoom factor.
+
min-zoom
+
Sets the minimum zoom factor.
+
max-zoom
+
Sets the maximum zoom factor.
+
user-zoom
+
Controls whether or not the user should be able to change the zoom factor.
+
orientation
+
Controls the document's orientation.
+
{{cssxref("@viewport/viewport-fit", "viewport-fit")}}
+
Controls the display of the document on non-rectangular displays.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+
+@viewport {
+  orientation: landscape;
+}
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Round Display", "#extending-viewport-rule", "@viewport")}}{{Spec2("CSS Round Display")}}Defined the {{cssxref("@viewport/viewport-fit", "viewport-fit")}} descriptor.
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.at-rules.viewport")}}

+ +

See also

+ + diff --git a/files/ko/web/css/@viewport/viewport-fit/index.html b/files/ko/web/css/@viewport/viewport-fit/index.html new file mode 100644 index 0000000000..e29d893382 --- /dev/null +++ b/files/ko/web/css/@viewport/viewport-fit/index.html @@ -0,0 +1,72 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +translation_of: Web/CSS/@viewport +--- +
{{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/web/css/@viewport/zoom/index.html b/files/ko/web/css/@viewport/zoom/index.html new file mode 100644 index 0000000000..137b2eb6a9 --- /dev/null +++ b/files/ko/web/css/@viewport/zoom/index.html @@ -0,0 +1,70 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - CSS Descriptor + - Graphics + - Layout + - NeedsExample + - Reference +translation_of: Web/CSS/@viewport +--- +
{{ 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/_colon_active/index.html b/files/ko/web/css/_colon_active/index.html new file mode 100644 index 0000000000..eb3ccff192 --- /dev/null +++ b/files/ko/web/css/_colon_active/index.html @@ -0,0 +1,127 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

:active CSS 의사 클래스는 사용자가 활성화한 요소(버튼 등)를 나타냅니다. 마우스를 사용하는 경우, "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미합니다.

+ +
/* 활성화된 모든 <a> 태그를 선택 */
+a:active {
+  color: red;
+}
+ +

:active 의사 클래스는 대개 {{HTMLElement("a")}}, {{HTMLElement("button")}}과 함께 사용합니다. 다른 흔한 대상으로는 활성화된 요소를 포함한 다른 요소와, 연결된 {{HTMLElement("label")}}로 선택한 입력 폼 요소 등이 있습니다.

+ +

:active 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":visited")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치하세요.

+ +
참고: CSS3 명세에 따르면, 다수의 버튼을 가진 마우스라도 :active 의사 클래스는 주 버튼에만 적용돼야 합니다. 오른손잡이 마우스 기준, 주 버튼은 보통 맨 왼쪽 버튼입니다.
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

활성화 링크

+ +

HTML

+ +
<p>링크를 포함하는 문단입니다.
+  <a href="#">이 링크는 클릭하는 동안 색이 빨갛게 됩니다.</a>
+  이 문단은 클릭하는 동안 배경색이 회색이 됩니다.
+</p>
+ +

CSS

+ +
a:link { color: blue; }          /* 방문하지 않은 링크 */
+a:visited { color: purple; }     /* 방문한 링크 */
+a:hover { background: yellow; }  /* 마우스를 올린 링크 */
+a:active { color: red; }         /* 활성화한 링크 */
+
+p:active { background: #eee; }   /* 활성화한 문단 */
+ +

결과

+ +

{{EmbedLiveSample('활성화_링크')}}

+ +

활성화 폼 요소

+ +

HTML

+ +
<form>
+  <label for="my-button">내 버튼: </label>
+  <button id="my-button" type="button">제 라벨이나 저를 클릭해보세요!</button>
+</form>
+ +

CSS

+ +
form :active {
+  color: red;
+}
+
+form button {
+  background: white;
+}
+ +

결과

+ +

{{EmbedLiveSample('활성화_폼_요소')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-active', ':active')}}{{Spec2('HTML WHATWG')}}
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.active")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_checked/index.html b/files/ko/web/css/_colon_checked/index.html new file mode 100644 index 0000000000..337f93d1cd --- /dev/null +++ b/files/ko/web/css/_colon_checked/index.html @@ -0,0 +1,193 @@ +--- +title: ':checked' +slug: 'Web/CSS/:checked' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:checked' +--- +
{{CSSRef}}
+ +

:checked CSS 의사 클래스 선택자는 선택했거나 on 상태인 라디오(<input type="radio">), 체크박스(<input type="checkbox">), 옵션({{HTMLElement("option")}} 요소를 나타냅니다.

+ +
/* Matches any checked/selected radio, checkbox, or option */
+:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +

사용자가 요소를 체크했거나 선택한 경우 활성화되고, 체크나 선택을 해제하는 경우 비활성화됩니다.

+ +
+

참고: 많은 경우 브라우저는 <option> 요소를 대체 요소로 취급하므로, :checked 의사 클래스를 사용한 스타일을 적용할 수 있는 범위도 브라우저마다 다릅니다.

+
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본 예제

+ +

HTML

+ +
<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Yes</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="no">No</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Check me!</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Apples</option>
+  <option value="opt2">Grapes</option>
+  <option value="opt3">Pears</option>
+</select>
+
+ +

CSS

+ +
div,
+select {
+  margin: 8px;
+}
+
+/* Labels for checked inputs */
+input:checked + label {
+  color: red;
+}
+
+/* Radio element, when checked */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Checkbox element, when checked */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Option elements, when selected */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("기본_예제")}}

+ +

숨겨진 체크박스를 사용해 요소 켜고 끄기

+ +

다음 예제 코드는 :checked 의사 클래스와 체크박스를 사용해, JavaScript 없이도 사용자가 켜거나 끌 수 있는 콘텐츠를 구현합니다.

+ +

HTML

+ +
<input type="checkbox" id="expand-toggle" />
+
+<table>
+  <thead>
+    <tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
+  </thead>
+  <tbody>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+    <tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
+  </tbody>
+</table>
+
+<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
+
+ +

CSS

+ +
/* Hide the toggle checkbox */
+#expand-toggle {
+  display: none;
+}
+
+/* Hide expandable content by default */
+.expandable {
+  visibility: collapse;
+  background: #ddd;
+}
+
+/* Style the button */
+#expand-btn {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 5px 11px;
+  background-color: #ff7;
+  border: 1px solid;
+  border-radius: 3px;
+}
+
+/* Show hidden content when the checkbox is checked */
+#expand-toggle:checked ~ * .expandable {
+  visibility: visible;
+}
+
+/* Style the button when the checkbox is checked */
+#expand-toggle:checked ~ #expand-btn {
+  background-color: #ccc;
+}
+ +

결과

+ +

{{EmbedLiveSample("숨겨진_체크박스를_사용해_요소_켜고_끄기", "auto", 220)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', '#selector-checked', ':checked') }}{{ Spec2('HTML WHATWG') }}No change.
{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}{{ Spec2('HTML5 W3C') }}Defines the semantic regarding HTML.
{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}{{ Spec2('CSS3 Selectors') }}Defines the pseudo-class, but not the associated semantic
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.checked")}}

+
diff --git a/files/ko/web/css/_colon_default/index.html b/files/ko/web/css/_colon_default/index.html new file mode 100644 index 0000000000..06e0558495 --- /dev/null +++ b/files/ko/web/css/_colon_default/index.html @@ -0,0 +1,101 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

CSS :default 의사 클래스는 연관 요소 내에서의 기본값인 요소를 선택합니다.

+ +

이 선택자는 HTML Standard §4.16.3 Pseudo-classes에 정의되어 있듯 {{htmlelement("button")}}, <input type="checkbox">, <input type="radio">, {{htmlelement("option")}} 요소를 아래와 같은 경우에 선택합니다.

+ + + +

구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

HTML

+ +
<fieldset>
+  <legend>Favorite season</legend>
+
+  <input type="radio" name="season" id="spring">
+  <label for="spring">Spring</label>
+
+  <input type="radio" name="season" id="summer" checked>
+  <label for="summer">Summer</label>
+
+  <input type="radio" name="season" id="fall">
+  <label for="fall">Fall</label>
+
+  <input type="radio" name="season" id="winter">
+  <label for="winter">Winter</label>
+</fieldset>
+
+ +

CSS

+ +
input:default {
+  box-shadow: 0 0 2px 1px coral;
+}
+
+input:default + label {
+  color: coral;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("예제")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Defines associated HTML semantics and constraint validation.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}No change.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.default")}}

+
diff --git a/files/ko/web/css/_colon_defined/index.html b/files/ko/web/css/_colon_defined/index.html new file mode 100644 index 0000000000..89487adbb9 --- /dev/null +++ b/files/ko/web/css/_colon_defined/index.html @@ -0,0 +1,118 @@ +--- +title: ':defined' +slug: 'Web/CSS/:defined' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:defined' +--- +
{{CSSRef}}
+ +

CSS :defined 의사 클래스는 정의된 요소를 선택합니다. 정의된 요소란 브라우저에 내장된 표준 요소와, 성공적으로 정의({{domxref("CustomElementRegistry.define()")}} 메서드 등)한 사용자 지정 요소를 의미합니다.

+ +
/* Selects any defined element */
+:defined {
+  font-style: italic;
+}
+
+/* Selects any instance of a specific custom element */
+simple-custom:defined {
+  display: block;
+}
+
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

정의되기 전까지 요소 숨기기

+ +

다음 코드는 저희의 defined-pseudo-class 데모에서 발췌한 것입니다. (동작 모습 보기)

+ +

이 데모에서는 아주 간단한 사용자 지정 요소를 정의합니다.

+ +
customElements.define('simple-custom',
+  class extends HTMLElement {
+    constructor() {
+      super();
+
+      let divElem = document.createElement('div');
+      divElem.textContent = this.getAttribute('text');
+
+      let shadowRoot = this.attachShadow({mode: 'open'})
+        .appendChild(divElem);
+  }
+})
+ +

그 후, 위의 요소를 표준 <p>와 함께 문서에 넣습니다.

+ +
<simple-custom text="Custom element example text"></simple-custom>
+
+<p>Standard paragraph example text</p>
+ +

CSS에는 다음의 스타일을 작성합니다.

+ +
// Give the two elements distinctive backgrounds
+p {
+  background: yellow;
+}
+
+simple-custom {
+  background: cyan;
+}
+
+// Both the custom and the built-in element are given italic text
+:defined {
+  font-style: italic;
+}
+ +

그리고 아래의 두 규칙을 통해, 정의되지 않은 사용자 지정 요소는 숨기고, 정의가 성공적으로 된 경우에는 블록 레벨 요소로 표시합니다.

+ +
simple-custom:not(:defined) {
+  display: none;
+}
+
+simple-custom:defined {
+  display: block;
+}
+ +

위의 데모는 페이지에 불러올 때 꽤 시간이 걸릴 수 있는 복잡한 사용자 지정 요소 스타일링에 유용하게 쓸 수 있습니다. 로딩이 아직 진행 중일 때, 스타일을 입히지 않은는 못생긴 요소가 페이지에 노출되는 것을 막을 수 있으니까요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'semantics-other.html#selector-defined', ':defined') }}{{ Spec2('HTML WHATWG') }}
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.defined")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_disabled/index.html b/files/ko/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..5a65d93de2 --- /dev/null +++ b/files/ko/web/css/_colon_disabled/index.html @@ -0,0 +1,129 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

CSS :disabled 의사 클래스는 모든 비활성 요소를 나타냅니다. 비활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 없는 요소를 말합니다. 반대 상태인 활성 요소도 존재합니다.

+ +
/* 모든 비활성 <input> 선택 */
+input:disabled {
+  background: #ccc;
+}
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

다음 예제는 사용자가 청구 주소 입력 칸을 켜거나 끌 수 있는 기능을 JavaScript {{event("change")}} 이벤트를 통해 구현한 기본적인 배송 양식입니다.

+ +

HTML

+ +
<form action="#">
+  <fieldset id="shipping">
+    <legend>배송지</legend>
+    <input type="text" placeholder="이름">
+    <input type="text" placeholder="주소">
+    <input type="text" placeholder="우편번호">
+  </fieldset>
+  <br>
+  <fieldset id="billing">
+    <legend>청구지</legend>
+    <label for="billing-checkbox">배송지와 동일:</label>
+    <input type="checkbox" id="billing-checkbox" checked>
+    <br>
+    <input type="text" placeholder="이름" disabled>
+    <input type="text" placeholder="주소" disabled>
+    <input type="text" placeholder="우편번호" disabled>
+  </fieldset>
+</form>
+
+ +

CSS

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

JavaScript

+ +
// 페이지 로딩이 끝날 때까지 기다림
+document.addEventListener('DOMContentLoaded', function () {
+  // `change` 이벤츠 수신기를 체크박스에 부착
+  document.getElementById('billing-checkbox').onchange = toggleBilling;
+}, false);
+
+function toggleBilling() {
+  // 청구지 텍스트 입력 칸을 모두 선택
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+
+  // 하나씩 토글
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

결과

+ +

{{EmbedLiveSample('예제', 300, 250)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Defines the semantics of HTML and forms.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Defines the pseudo-class, but not the associated semantics.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.disabled")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_enabled/index.html b/files/ko/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..edd9c70c2f --- /dev/null +++ b/files/ko/web/css/_colon_enabled/index.html @@ -0,0 +1,100 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

CSS :enabled 의사 클래스는 모든 활성 요소를 나타냅니다. 활성 요소란 활성(선택, 클릭, 입력 등등)하거나 포커스를 받을 수 있는 요소를 말합니다. 반대 상태인 비활성 요소도 존재합니다.

+ +
/* 모든 활성 <input> 선택 */
+input:enabled {
+  color: blue;
+}
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

다음 예제는 모든 활성 텍스트 및 버튼 {{htmlElement("input")}}의 글자 색을 초록색으로 만들고, 비활성 상태는 회색으로 만듭니다. 이런 구분을 통해 사용자는 상호작용 가능한 요소를 쉽게 구별할 수 있습니다.

+ +

HTML

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label>
+  <input type="text" id="FirstField" value="Lorem"><br>
+
+  <label for="SecondField">Second field (disabled):</label>
+  <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br>
+
+  <input type="button" value="Submit">
+</form>
+ +

CSS

+ +
input:enabled {
+  color: #2b2;
+}
+
+input:disabled {
+  color: #aaa;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("예제", 550, 95)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}No change.
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Defines the semantics for HTML and forms.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Defines the pseudo-class, but not the associated semantics.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.enabled")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_first-child/index.html b/files/ko/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..9d229f4dd5 --- /dev/null +++ b/files/ko/web/css/_colon_first-child/index.html @@ -0,0 +1,134 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

CSS :first-child 의사 클래스는 형제 요소 중 제일 첫 요소를 나타냅니다.

+ +
/* Selects any <p> that is the first element
+   among its siblings */
+p:first-child {
+  color: lime;
+}
+ +
+

참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

+
+ +

구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

기본 예제

+ +

HTML

+ +
<div>
+  <p>This text is selected!</p>
+  <p>This text isn't selected.</p>
+</div>
+
+<div>
+  <h2>This text isn't selected: it's not a `p`.</h2>
+  <p>This text isn't selected.</p>
+</div>
+
+ +

CSS

+ +
p:first-child {
+  color: lime;
+  background-color: black;
+  padding: 5px;
+}
+
+ +

결과

+ +

{{EmbedLiveSample('기본_예제', 500, 200)}}

+ +

목록 스타일링

+ +

HTML

+ +
<ul>
+  <li>Item 1</li>
+  <li>Item 2</li>
+  <li>Item 3
+    <ul>
+      <li>Item 3.1</li>
+      <li>Item 3.2</li>
+      <li>Item 3.3</li>
+    </ul>
+  </li>
+</ul>
+ +

CSS

+ +
ul li {
+  color: blue;
+}
+
+ul li:first-child {
+  color: red;
+  font-weight: bold;
+}
+ +

결과

+ +

{{EmbedLiveSample('목록_스타일링')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}No change.
{{SpecName('CSS2.1', 'selector.html#first-child', ':first-child')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.first-child")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_first-of-type/index.html b/files/ko/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..d1ac0c65fc --- /dev/null +++ b/files/ko/web/css/_colon_first-of-type/index.html @@ -0,0 +1,115 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +
{{CSSRef}}
+ +

CSS :first-of-type 의사 클래스는 형제 요소 중 자신의 유형과 일치하는 제일 첫 요소를 나타냅니다.

+ +
/* Selects any <p> that is the first element
+   of its type among its siblings */
+p:first-of-type {
+  color: red;
+}
+ +
+

참고: 초기 정의에서는 부모가 있는 요소만 선택할 수 있었습니다. Selectors Level 4부터는 이 제한이 사라졌습니다.

+
+ +

구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

첫 문단 스타일링

+ +

HTML

+ +
<h2>Heading</h2>
+<p>Paragraph 1</p>
+<p>Paragraph 2</p>
+ +

CSS

+ +
p:first-of-type {
+  color: red;
+  font-style: italic;
+}
+ +

결과

+ +

{{EmbedLiveSample('첫_문단_스타일링')}}

+ +

중첩 요소

+ +

아래 코드는 중첩 요소를 선택하는 방법을 보입니다. 기본 선택자를 지정하지 않은 경우 전체 선택자(*)가 암시된다는 점도 볼 수 있습니다.

+ +

HTML

+ +
<article>
+  <div>This `div` is first!</div>
+  <div>This <span>nested `span` is first</span>!</div>
+  <div>This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div>
+  <div>This <span>nested `span` gets styled</span>!</div>
+  <b>This `b` qualifies!</b>
+  <div>This is the final `div`.</div>
+</article>
+
+ +

CSS

+ +
article :first-of-type {
+  background-color: pink;
+}
+ +

결과

+ +

{{EmbedLiveSample('중첩_요소', 500)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.first-of-type")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_first/index.html b/files/ko/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2058627f4b --- /dev/null +++ b/files/ko/web/css/_colon_first/index.html @@ -0,0 +1,97 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

CSS :first 의사 클래스는 {{cssxref("@page")}} @-규칙과 함께 사용되며, 출력 시의 첫 페이지를 나타냅니다.

+ +
/* Selects the first page when printing */
+@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+ +
참고: :first 의사 클래스 안에서는 CSS  속성의 사용이 제한됩니다. 바깥 여백, {{cssxref("orphans")}}, {{cssxref("widows")}}와 페이지 넘김만 바꿀 수 있으며, 여백 지정 시 절대길이 단위만 사용할 수 있습니다. 다른 모든 속성은 무시합니다.
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<p>First Page.</p>
+<p>Second Page.</p>
+<button>출력!</button>
+
+ +

CSS

+ +
@page :first {
+  margin-left: 50%;
+  margin-top: 50%;
+}
+
+p {
+  page-break-after: always;
+}
+
+ +

JavaScript

+ +
document.querySelector("button").addEventListener('click', () => {
+  window.print();
+});
+
+ +

결과

+ +

"출력!" 버튼을 눌러 페이지 출력 화면을 확인해보세요. 첫 번째 페이지의 콘텐츠는 중앙 어딘가에 위치하고, 두 번째 페이지의 콘텐츠는 기본 위치에 존재해야 합니다.

+ +

{{ EmbedLiveSample('예제', '80%', '150px') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}No change
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.first")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_focus-within/index.html b/files/ko/web/css/_colon_focus-within/index.html new file mode 100644 index 0000000000..7a25dc5b94 --- /dev/null +++ b/files/ko/web/css/_colon_focus-within/index.html @@ -0,0 +1,96 @@ +--- +title: ':focus-within' +slug: 'Web/CSS/:focus-within' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus-within' +--- +
{{CSSRef}}
+ +

CSS :focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 {{CSSxRef(":focus")}} 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)

+ +
/* Selects a <div> when one of its descendants is focused */
+div:focus-within {
+  background: cyan;
+}
+ +

흔히 쓸 수 있는 예시로서, {{HTMLElement("form")}}의 {{HTMLElement("input")}} 필드 중 하나가 포커스된 경우 전체 <form>을 강조해야 할 때 유용하게 사용할 수 있습니다.

+ +

구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

다음 예제에서는 두 텍스트 입력 칸 중 하나라도 포커스를 받은 경우 양식을 강조합니다.

+ +

HTML

+ +
<p>아래 양식의 값을 채워주세요.</p>
+
+<form>
+  <label for="given_name">이름:</label>
+  <input id="given_name" type="text">
+  <br>
+  <label for="family_name">성:</label>
+  <input id="family_name" type="text">
+</form>
+ +

CSS

+ +
form {
+  border: 1px solid;
+  color: gray;
+  padding: 4px;
+}
+
+form:focus-within {
+  background: #ff8;
+  color: black;
+}
+
+input {
+  margin: 4px;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("예제", 500, 150)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#the-focus-within-pseudo", ":focus-within")}}{{Spec2("CSS4 Selectors")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.focus-within")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_focus/index.html b/files/ko/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..3a3e853e44 --- /dev/null +++ b/files/ko/web/css/_colon_focus/index.html @@ -0,0 +1,116 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

CSS :focus 의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.

+ +
/* Selects any <input> when focused */
+input:focus {
+  color: red;
+}
+ +
+

참고: :focus는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 {{CSSxRef(":focus-within")}}을 사용하세요.

+
+ +

구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

HTML

+ +
<input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다."><br>
+<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다.">
+ +

CSS

+ +
.red-input:focus {
+  background: yellow;
+  color: red;
+}
+
+.blue-input:focus {
+  background: yellow;
+  color: blue;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제")}}

+ +

접근성 고려사항

+ +

낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.

+ + + +

:focus { outline: none; }

+ +

절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 WCAG 2.1 SC 1.4.11 Non-Text Contrast 기준을 통과해야 합니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "scripting.html#selector-focus", ":focus")}}{{Spec2("HTML WHATWG")}}Defines HTML-specific semantics.
{{SpecName("CSS4 Selectors", "#focus-pseudo", ":focus")}}{{Spec2("CSS4 Selectors")}}No change.
{{SpecName("CSS3 Selectors", "#the-user-action-pseudo-classes-hover-act", ":focus")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#dynamic-pseudo-classes", ":focus")}}{{Spec2("CSS2.1")}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.focus")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_fullscreen/index.html b/files/ko/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..70e0c0308c --- /dev/null +++ b/files/ko/web/css/_colon_fullscreen/index.html @@ -0,0 +1,94 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - Fullscreen API + - Pseudo-class + - Reference + - Selector + - 전체화면 +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

CSS :fullscreen 의사 클래스는 전체 화면 모드에 진입한 모든 요소와 일치합니다. 다수의 요소가 전체 화면 중이라면 그 요소 모두 선택합니다.

+ +

구문

+ +
{{csssyntax}}
+ +

사용 참고

+ +

:fullscreen 의사 클래스는 요소가 전체 화면과 일반적인 모습을 넘나들 때마다 크기, 스타일, 레이아웃 등을 조정하도록 스타일시트를 설정할 수 있습니다.

+ +

예제

+ +

이번 예제에서는 문서의 전체 화면 여부에 따라 버튼의 색을 변경합니다. 스타일 변경은 JavaScript 없이 CSS에서만 처리합니다.

+ +

HTML

+ +

페이지의 HTML 구조는 다음과 같습니다.

+ +
<h1>MDN Web Docs Demo: :fullscreen pseudo-class</h1>
+
+<p>This demo uses the <code>:fullscreen</code> pseudo-class to automatically
+  change the style of a button used to toggle full-screen mode on and off,
+  entirely using CSS.</p>
+
+<button id="fs-toggle">Toggle Fullscreen</button>
+ +

ID가 "fs-toggle"인 {{htmlelement("button")}}은 문서가 전체 화면이면 흐릿한 빨강, 그렇지 않으면 흐릿한 초록으로 색이 바뀝니다.

+ +

CSS

+ +

스타일 마법은 CSS에서 일어납니다. 두 가지 규칙을 사용할 것으로, 첫 번째는 전체 화면이 아닐 때 전체 화면 버튼의 배경색을 설정합니다. 중요한 것은 :not(:fullscreen)으로, :fullscreen 의사 클래스와 일치하지 않는 요소를 선택합니다.

+ +
#fs-toggle:not(:fullscreen) {
+  background-color: #afa;
+}
+
+ +

문서가 전체 화면에 들어간 경우, 대신 아래의 CSS를 적용하여 버튼 배경을 흐릿한 빨강으로 바꿉니다.

+ +
#fs-toggle:fullscreen {
+  background-color: #faa;
+}
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.fullscreen")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_hover/index.html b/files/ko/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..27a26aefe2 --- /dev/null +++ b/files/ko/web/css/_colon_hover/index.html @@ -0,0 +1,97 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:hover' +--- +
{{ CSSRef }}
+ +

:hover CSS 의사 클래스는 사용자가 포인팅 장치를 사용해 상호작용 중인 요소를 선택합니다. 보통 사용자의 커서(마우스 포인터)가 요소 위에 올라가 있으면 선택됩니다.

+ +
/* "호버링" 중인 <a> 요소 선택 */
+a:hover {
+  color: orange;
+}
+ +

:hover 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":visited")}}, {{cssxref(":active")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :hover 규칙을 :link와 :visited 뒤, :active 앞에 배치하세요.

+ +
참고: :hover 의사 클래스는 터치스크린에서 문제가 많습니다. 브라우저에 따라서 :hover를 절대 활성화하지 않을 수도 있지만, 요소를 터치한 직후에만, 아니면 터치한 이후 다른 요소를 다시 터치하기 전까지 계속 활성화할 수도 있습니다. 웹 개발자는 호버링이 제한적이거나 아예 불가능한 장치에서도 콘텐츠에 접근할 수 있도록 개발해야 합니다.
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<a href="#">이 링크를 가리켜보세요.</a>
+ +

CSS

+ +
a {
+  background-color: powderblue;
+  transition: background-color .5s;
+}
+
+a:hover {
+  background-color: gold;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationCommentFeedback
{{ SpecName('HTML WHATWG', 'scripting.html#selector-hover', ':hover') }} WHATWG HTML GitHub issues
{{ SpecName('CSS4 Selectors', '#the-hover-pseudo', ':hover') }}Allows :hover to be applied to any pseudo-element.CSS Working Group drafts GitHub issues
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}  
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}Initial definition. 
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.hover")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_link/index.html b/files/ko/web/css/_colon_link/index.html new file mode 100644 index 0000000000..f17f896eab --- /dev/null +++ b/files/ko/web/css/_colon_link/index.html @@ -0,0 +1,105 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:link' +--- +
{{ CSSRef }}
+ +

:link CSS 의사 클래스는 아직 방문하지 않은 요소를 나타냅니다. href 속성을 가진 {{HTMLElement("a")}}, {{HTMLElement("area")}}, {{HTMLElement("link")}} 중 방문하지 않은 모든 요소를 선택합니다.

+ +
/* 아직 방문하지 않은 <a> 요소를 선택 */
+a:link {
+  color: red;
+}
+ +

:link 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":active")}}, {{cssxref(":hover")}}, {{cssxref(":visited")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :active 규칙을 다른 모든 링크 규칙들보다 앞에 배치하세요.

+ +
+

참고: 방문 여부에 상관하지 않고 요소를 선택하려면 {{cssxref(":any-link")}}를 사용하세요.

+
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

대부분의 브라우저는 방문한 링크에 기본값으로 특별한 {{cssxref("color")}} 값을 지정합니다. 따라서 다음 예제의 링크를 방문한 적이 없을 때만 글자 색이 적용된 모습을 볼 수 있고, 방문한 적이 있으면 브라우저 기록을 지워서 확인할 수 있습니다. 그러나 방문한 링크의 배경색은 보통 브라우저가 지정하지 않으므로 {{cssxref("background-color")}}는 계속 확인할 수 있습니다.

+ +

HTML

+ +
<a href="#ordinary-target">평범한 링크입니다.</a><br>
+<a href="">이 링크는 이미 방문했습니다.</a><br>
+<a>플레이스홀더 링크 (스타일 적용 안됨)</a>
+
+ +

CSS

+ +
a:link {
+  background-color: gold;
+  color: green;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("예제")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}No change.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Lift the restriction to only apply it for {{ HTMLElement("a") }} element.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.link")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_not/index.html b/files/ko/web/css/_colon_not/index.html new file mode 100644 index 0000000000..f471cce411 --- /dev/null +++ b/files/ko/web/css/_colon_not/index.html @@ -0,0 +1,71 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - Layout + - Pseudo-class + - Reference +translation_of: 'Web/CSS/:not' +--- +
{{ CSSRef() }}
+ +

부정(negation) CSS 가상 클래스 :not(X)는 인수로 간단한 선택자(selector) X를 취하는 기능 표기법입니다. 인수로 표시되지 않은 요소와 일치합니다. X는 다른 부정 선택자를 포함해서는 안 됩니다.

+ +
주의: + + +
+ +

구문

+ +
:not(selector) { style properties }
+ +

예제

+ +
p:not(.classy) { color: red; }
+body :not(p) { color: green; }
+ +

위의 CSS 및 아래 HTML이 주어진다면...

+ +
<p>Some text.</p>
+<p class="classy">Some other text.</p>
+<span>One more text<span>
+
+ +

이 같은 출력을 얻습니다:

+ +

{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS4 Selectors', '#negation', ':not()') }}{{ Spec2('CSS4 Selectors') }}인수로 일부 비 간단 선택자를 허용토록 확장.
{{ SpecName('CSS3 Selectors', '#negation', ':not()') }}{{ Spec2('CSS3 Selectors') }}초기 정의.
+ +

브라우저 호환성

+ +

{{Compat("css.selectors.not")}}

diff --git a/files/ko/web/css/_colon_nth-child/index.html b/files/ko/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..2368a66641 --- /dev/null +++ b/files/ko/web/css/_colon_nth-child/index.html @@ -0,0 +1,196 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

CSS :nth-child() 의사 클래스는 형제 사이에서의 순서에 따라 요소를 선택합니다.

+ +
/* 목록의 두 번째 <li> 선택 */
+li:nth-child(2) {
+  color: lime;
+}
+
+/* 임의의 그룹에서 네 번째에 위치하는 모든 요소 선택 */
+:nth-child(4n) {
+  color: lime;
+}
+
+ +

구문

+ +

nth-child 의사 클래스는 형제의 목록에서, 선택하려는 요소의 인덱스 패턴을 나타내는 하나의 매개변수를 사용해 지정합니다. 인덱스는 1부터 시작합니다.

+ +

키워드 값

+ +
+
odd
+
형제 요소에서 홀수번째(1, 3, 5, ...)인 요소를 나타냅니다.
+
even
+
형제 요소에서 짝수번째(2, 4, 6, ...)인 요소를 나타냅니다.
+
+ +

함수형 표기법

+ +
+
<An+B>
+
사용자 지정 패턴을 만족한 인덱스를 가지는 요소를 나타냅니다. An+B의 형태로 나타내며,
+     A는 정수 인덱스 증감량,
+     B는 정수 오프셋,
+     n은 0부터 시작하는 모든 양의 정수를 나타냅니다.
+
목록의 An+B번째 요소라고 해석할 수 있습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

선택자

+ +
+
tr:nth-child(odd) 또는 tr:nth-child(2n+1)
+
HTML 표의 홀수번째 행을 나타냅니다.
+
tr:nth-child(even) 또는 tr:nth-child(2n)
+
HTML 표의 짝수번째 행을 나타냅니다.
+
:nth-child(7)
+
임의의 7번째 요소를 나타냅니다.
+
:nth-child(5n)
+
5 [=5×1], 10 [=5×2], 15 [=5×3], ... 번째의 요소를 나타냅니다. 패턴 공식을 만족하는 첫 번째 값은 0 [=5x0]으로서 아무 요소도 선택하지 않는데, 요소의 인덱스는 1부터 시작하지만 n은 0부터 증가하기 때문입니다. 다소 의아할 수 있으나, 바로 아래 예제처럼 공식의 B 부분이 >0인 경우 보다 납득하기 쉬워집니다.
+
:nth-child(n+7)
+
7번째와 그 이후의 모든 요소, 즉 7 [=0+7], 8 [=1+7], 9 [=2+7], ... 를 나타냅니다.
+
:nth-child(3n+4)
+
4 [=(3×0)+4], 7 [=(3×1)+4], 10 [=(3×2)+4], 13 [=(3×3)+4], ... 번째의 요소를 나타냅니다.
+
:nth-child(-n+3)
+
앞에서 세 개의 요소를 나타냅니다. [=-0+3, -1+3, -2+3]
+
p:nth-child(n)
+
형제 그룹 내의 모든 <p> 요소를 나타냅니다. 단순한 p 선택자와 동일하지만 더 높은 명시도를 가집니다.
+
p:nth-child(1) 또는 p:nth-child(0n+1)
+
형제 그룹 내의 모든 첫 번째 <p> 요소를 나타냅니다. {{cssxref(":first-child")}} 선택자와 동일하며 같은 명시도를 가집니다.
+
p:nth-child(n+8):nth-child(-n+15)
+
형제 그룹 내에서 8번째부터 15번째 까지의 <p> 요소를 나타냅니다.
+
+ +

자세한 예제

+ +

HTML

+ +
<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 3, 5, and 7 are selected.</p>
+<div class="first">
+  <span>Span 1!</span>
+  <span>Span 2</span>
+  <span>Span 3!</span>
+  <span>Span 4</span>
+  <span>Span 5!</span>
+  <span>Span 6</span>
+  <span>Span 7!</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-child(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 5, and 7 are selected.<br>
+   3 is used in the counting because it is a child, but it isn't
+   selected because it isn't a <code>&lt;span&gt;</code>.</p>
+<div class="second">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+</div>
+
+<br>
+
+<h3><code>span:nth-of-type(2n+1)</code>, WITH an
+   <code>&lt;em&gt;</code> among the child elements.</h3>
+<p>Children 1, 4, 6, and 8 are selected.<br>
+   3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,
+   not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
+   children of that type. The <code>&lt;em&gt;</code> is completely skipped
+   over and ignored.</p>
+<div class="third">
+  <span>Span!</span>
+  <span>Span</span>
+  <em>This is an `em`.</em>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+  <span>Span</span>
+  <span>Span!</span>
+</div>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+}
+
+span,
+div em {
+  padding: 5px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

결과

+ +
{{EmbedLiveSample('자세한_예제', 550, 550)}}
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Adds of <selector> syntax and specifies that matching elements are not required to have a parent.
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.nth-child")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_root/index.html b/files/ko/web/css/_colon_root/index.html new file mode 100644 index 0000000000..5fb9ed0fd6 --- /dev/null +++ b/files/ko/web/css/_colon_root/index.html @@ -0,0 +1,78 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Selector + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

CSS :root 의사 클래스는 문서 트리의 루트 요소를 선택합니다 HTML의 루트 요소는 {{htmlelement("html")}} 요소이므로, :root의 명시도가 더 낮다는 점을 제외하면 html 선택자와 똑같습니다.

+ +
/* 문서의 루트 요소 선택
+   HTML에서는 <html> */
+:root {
+  background: yellow;
+}
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

전역 CSS 변수 선언하기

+ +

:root는 전역 CSS 변수 선언에 유용하게 사용할 수 있습니다.

+ +
:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}No change.
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.root")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_colon_visited/index.html b/files/ko/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..1c1f962b37 --- /dev/null +++ b/files/ko/web/css/_colon_visited/index.html @@ -0,0 +1,121 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - Layout + - Pseudo-class + - Reference + - Web +translation_of: 'Web/CSS/:visited' +--- +
{{ CSSRef }}
+ +

:visited CSS 의사 클래스는 사용자가 방문한 적이 있는 링크를 나타냅니다. :visited가 바꿀 수 있는 스타일은 개인정보 보호를 위해 매우 제한적입니다.

+ +
/* 방문한 적이 있는 <a> 선택 */
+a:visited {
+  color: green;
+}
+
+ +

:visited 의사 클래스로 정의한 스타일은 자신보다 뒤에 위치하고 동등한 명시성을 가진 다른 링크 의사 클래스({{cssxref(":link")}}, {{cssxref(":hover")}}, {{cssxref(":active")}})가 덮어씁니다. 링크를 적절히 디자인하려면 LVHA-순서(:link — :visited — :hover — :active)를 따라, :visited 규칙을 :link 뒤, :hover와 :active 앞에 배치하세요.

+ +

스타일 제한

+ +

브라우저는 개인정보 보호를 위해 :visited에서 사용할 수 있는 스타일을 엄격히 제한하고 있습니다.

+ + + +
+

참고: 스타일 제한에 관한 더 많은 정보와 이유에 대해서는 개인정보와 :visited 선택자 문서를 참고하세요.

+
+ +

구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본적으로 색이 없거나 투명한 속성은 :visited로 수정할 수 없습니다. :visited가 수정 가능한 속성 중 브라우저가 기본값을 지정하는건 보통 color와 column-rule-color 뿐입니다. 따라서 다른 속성을 수정하고 싶다면 기본값을 직접 지정해야 합니다.

+ +

HTML

+ +
<a href="#test-visited-link">링크를 아직 방문하지 않으셨나요?</a><br>
+<a href="">이미 방문했습니다.</a>
+ +

CSS

+ +
a {
+  /* 특정 속성에 투명하지 않은 기본값을 지정해
+     :visited 상태로 바꿀 수 있도록 설정 */
+  background-color: white;
+  border: 1px solid white;
+}
+
+a:visited {
+  background-color: yellow;
+  border-color: hotpink;
+  color: hotpink;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('HTML WHATWG', 'scripting.html#selector-visited', ':visited') }}{{ Spec2('HTML WHATWG') }} 
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}No change.
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}No change.
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Lifts the restriction to only apply :visited to the {{ HTMLElement("a") }} element. Lets browsers restrict its behavior for privacy reasons.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.visited")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_doublecolon_after/index.html b/files/ko/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..30f44876f7 --- /dev/null +++ b/files/ko/web/css/_doublecolon_after/index.html @@ -0,0 +1,179 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

CSS에서, ::after는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 {{cssxref("content")}} 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

+ +
/* 링크 뒤에 화살표 추가 */
+a::after {
+  content: "→";
+}
+ +
+

참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, {{HTMLElement("img")}}나 {{HTMLElement("br")}} 등 대체 요소에 적용할 수 없습니다.

+
+ +

구문

+ +
{{csssyntax}}
+ +
+

참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::after 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :after도 허용합니다.

+
+ +

예제

+ +

간단한 사용법

+ +

평범한 문단과 흥미진진한 문단을 위해 클래스 두 개를 만들고, 문단 마지막에 의사 요소를 추가해보겠습니다.

+ +

HTML

+ +
<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
+<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
+<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>
+ +

CSS

+ +
.exciting-text::after {
+  content: " <- 흥미진진!";
+  color: green;
+}
+
+.boring-text::after {
+  content: " <- 먼지풀풀";
+  color: red;
+}
+ +

결과

+ +

{{EmbedLiveSample('간단한_사용법', 500, 150)}}

+ +

장식 예제

+ +

{{cssxref("content")}} 속성을 활용해 자유롭게 텍스트나 이미지를 추가할 수 있습니다.

+ +

HTML

+ +
<span class="ribbon">마지막의 주황색 상자를 바라보세요.</span>
+ +

CSS

+ +
.ribbon {
+ background-color: #5BC8F7;
+}
+
+.ribbon::after {
+ content: "멋진 주황색 상자입니다.";
+ background-color: #FFBA10;
+ border-color: black;
+ border-style: dotted;
+}
+ +

결과

+ +

{{ EmbedLiveSample('장식_예제', 550, 40) }}

+ +

툴팁

+ +

다음 예제는 ::after와 함께 CSS {{cssxref("attr", "attr()")}} 표현식, data-descr 사용자 설정 데이터 속성을 사용해 툴팁을 구현합니다. JavaScript 없이요!

+ +

tabindex="0"을 추가해 각 span에 포커스가 갈 수 있도록 지정한 후, CSS :focus 선택자를 추가하여 키보드 사용자도 지원할 수 있습니다. 예제를 통해 ::before와 ::after가 얼마나 유연한지 확인할 수 있지만, 가장 접근성이 뛰어난 구현을 위해서라면 요약과 세부 요소처럼 의미를 담은 요소를 활용하는 편이 좋습니다.

+ +

HTML

+ +
<p>이 예제는
+  <span tabindex="0" data-descr="단어와 문장 부호의 집합">텍스트</span>와 함께 약간의
+  <span tabindex="0" data-descr="호버 시 보여지는 작은 팝업">툴팁</span>을 포함합니다.
+</p>
+
+ +

CSS

+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after,
+span[data-descr]:focus::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

결과

+ +

{{EmbedLiveSample('툴팁', 450, 120)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{ Spec2('CSS4 Pseudo-Elements')}}No significant changes to the previous specification.
{{ Specname("CSS3 Transitions", "#animatable-properties", "") }}{{ Spec2("CSS3 Transitions")}}Allows transitions on properties defined on pseudo-elements.
{{ Specname("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations")}}Allows animations on properties defined on pseudo-elements.
{{ SpecName('CSS3 Selectors', '#gen-content', '::after') }}{{ Spec2('CSS3 Selectors') }}Introduces the two-colon syntax.
{{ SpecName('CSS2.1', 'generate.html#before-after-content', '::after') }}{{ Spec2('CSS2.1') }}Initial definition, using the one-colon syntax
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.after")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/_doublecolon_before/index.html b/files/ko/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..211107af88 --- /dev/null +++ b/files/ko/web/css/_doublecolon_before/index.html @@ -0,0 +1,237 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - Layout + - Pseudo-element + - Reference + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

CSS에서, ::before는 선택한 요소의 첫 자식으로 의사 요소를 하나 생성합니다. 보통 {{cssxref("content")}} 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

+ +
/* 링크 앞에 하트 추가 */
+a::after {
+  content: "♥";
+}
+ +
+

참고: ::before와 ::after로 생성한 의사 요소는 원본 요소의 서식 박스에 포함되므로, {{HTMLElement("img")}}나 {{HTMLElement("br")}} 등 대체 요소에 적용할 수 없습니다.

+
+ +

구문

+ +
{{csssyntax}}
+ +
+

참고: 의사 클래스와 의사 요소를 구분하기 위해 CSS3부터::before 구문을 도입했습니다. 그러나 브라우저는 CSS2 구문인 :before도 허용합니다.

+
+ +

예제

+ +

인용 표시 추가

+ +

One simple example of using ::before pseudo-elements is to provide quotation marks. Here we use both ::before and {{Cssxref("::after")}} to insert quotation characters.

+ +

HTML

+ +
<q>Some quotes,</q> he said, <q>are better than none.</q>
+ +

CSS

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Result

+ +

{{EmbedLiveSample('인용_표시_추가', '500', '50', '')}}

+ +

장식 예제

+ +

We can style text or images in the {{cssxref("content")}} property almost any way we want.

+ +

HTML

+ +
<span class="ribbon">Notice where the orange box is.</span>
+ +

CSS

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Look at this orange box.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Result

+ +

{{EmbedLiveSample('장식_예제', 450, 60)}}

+ +

할 일 목록

+ +

In this example we will create a simple to-do list using pseudo-elements. This method can often be used to add small touches to the UI and improve user experience.

+ +

HTML

+ +
<ul>
+  <li>Buy milk</li>
+  <li>Take the dog for a walk</li>
+  <li>Exercise</li>
+  <li>Write code</li>
+  <li>Play music</li>
+  <li>Relax</li>
+</ul>
+
+ +

CSS

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if (ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Here is the above code example running live. Note that there are no icons used, and the check-mark is actually the ::before that has been styled in CSS. Go ahead and get some stuff done.

+ +

Result

+ +

{{EmbedLiveSample('할_일_목록', 400, 300)}}

+ +

특수문자

+ +

As this is CSS; not HTML, you can not use markup entities in content values. If you need to use a special character, and can not enter it literally into your CSS content string, use a unicodeescape sequence, consistingof a backslash followed by the hexadecimal unicode value.

+ +

HTML

+ +
<ol>
+  <li>Crack Eggs into bowl</li>
+  <li>Add Milk</li>
+  <li>Add Flour</li>
+  <li aria-current='step'>Mix thoroughly into a smooth batter</li>
+  <li>Pour a ladleful of batter onto a hot, greased, flat frying pan</li>
+  <li>Fry until the top of the pancake loses its gloss</li>
+  <li>Flip it over and fry for a couple more minutes</li>
+  <li>serve with your favorite topping</li>
+</ol>
+
+ +

CSS

+ +

+li {
+  padding:0.5em;
+}
+
+li[aria-current='step'] {
+  font-weight:bold;
+}
+
+li[aria-current='step']::after {
+  content: " \21E6"; /* Hexadecimal for Unicode Leftwards white arrow*/
+  display: inline;
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample('특수문자', 400, 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}No significant changes to the previous specification.
{{Specname("CSS3 Transitions", "#animatable-properties", "")}}{{Spec2("CSS3 Transitions")}}Allows transitions on properties defined on pseudo-elements.
{{Specname("CSS3 Animations", "", "")}}{{Spec2("CSS3 Animations")}}Allows animations on properties defined on pseudo-elements.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Introduces the two-colon syntax.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Initial definition, using the one-colon syntax
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.selectors.before")}}

+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/_doublecolon_placeholder/index.html b/files/ko/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..0a6c4a093f --- /dev/null +++ b/files/ko/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,147 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}
+ +

The ::placeholder CSS pseudo-element represents the placeholder text in an {{HTMLElement("input")}} or {{HTMLElement("textarea")}} element.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using ::placeholder in its selector.

+ +
+

Note: In most browsers, the appearance of placeholder text is a translucent or light gray color by default.

+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Accessibility concerns

+ +

Color contrast

+ +

Contrast Ratio

+ +

Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.

+ +

It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.

+ +

Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

+ + + +

Usability

+ +

Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

+ +

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the {{HTMLElement("input")}} with its hint.

+ +

With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Windows High Contrast Mode

+ +

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

+ + + +

Labels

+ +

Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.

+ + + +

Examples

+ +

Red text

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Result

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

Green text

+ +

HTML

+ +
<input placeholder="Type something here...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

Result

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

See also

+ + diff --git a/files/ko/web/css/actual_value/index.html b/files/ko/web/css/actual_value/index.html new file mode 100644 index 0000000000..9b9bf9ce2f --- /dev/null +++ b/files/ko/web/css/actual_value/index.html @@ -0,0 +1,47 @@ +--- +title: 실제값 +slug: Web/CSS/actual_value +tags: + - CSS + - Reference +translation_of: Web/CSS/actual_value +--- +
{{CSSRef}}
+ +

CSS 속성의 실제값은 모든 근사치(approximation)가 적용된 뒤의 사용값입니다. 예를 들어, 사용자 에이전트는 오직 정수 픽셀값으로 테두리(border)를 렌더링할 수도 있고 테두리의 계산된 폭(width)에 근접하도록 강제할 지도 모릅니다.

+ +

Calculating a property's actual value

+ +

The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value:

+ +
    +
  1. First, the specified value is determined based on the result of cascading, inheritance, or using the initial value.
    2. +
  2. Next, the computed value is calculated according to the specification (for example, a span with position: absolute will have its computed display changed to block).
    3. +
  3. Then, layout is calculated, resulting in the used value.
    4. +
  4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value.
    5. +
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}초기 정의.
+ +

같이 보기

+ + diff --git a/files/ko/web/css/align-content/index.html b/files/ko/web/css/align-content/index.html new file mode 100644 index 0000000000..43c4ece03e --- /dev/null +++ b/files/ko/web/css/align-content/index.html @@ -0,0 +1,297 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS Box Alignment + - CSS Property + - Reference +translation_of: Web/CSS/align-content +--- +

CSS align-content 속성은 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스박스의 교차축, 그리드의 블록 축을 따라 배치하는 방식을 결정합니다.

+ +

아래의 대화형 예제는 그리드 레이아웃을 사용해 이 속성의 값을 시연합니다.

+ +
{{EmbedInteractiveExample("pages/css/align-content.html")}}
+ + + +

이 속성은 한 줄로만 이루어진 플렉스 컨테이너에는 아무 효과도 없습니다. (flex-wrap: nowrap 등)

+ +

구문

+ +
/* Basic positional alignment */
+/* align-content does not take left and right values */
+align-content: center;     /* Pack items around the center */
+align-content: start;      /* Pack items from the start */
+align-content: end;        /* Pack items from the end */
+align-content: flex-start; /* Pack flex items from the start */
+align-content: flex-end;   /* Pack flex items from the end */
+
+/* Normal alignment */
+align-content: normal;
+
+/* Baseline alignment */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Distributed alignment */
+align-content: space-between; /* Distribute items evenly
+                                 The first item is flush with the start,
+                                 the last is flush with the end */
+align-content: space-around;  /* Distribute items evenly
+                                 Items have a half-size space
+                                 on either end */
+align-content: space-evenly;  /* Distribute items evenly
+                                 Items have equal space around them */
+align-content: stretch;       /* Distribute items evenly
+                                 Stretch 'auto'-sized items to fit
+                                 the container */
+
+/* Overflow alignment */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Global values */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

값

+ +
+
start
+
플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 시작 모서리에 배치합니다.
+
end
+
플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 끝 모서리에 배치합니다.
+
flex-start
+
플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 시작점에 따라 정렬 컨테이너 모서리에 배치합니다.
+ 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 start로 취급합니다.
+
flex-end
+
플렉스 항목을 한 덩어리로 뭉치고, 플렉스 컨테이너의 교차 끝점에 따라 정렬 컨테이너 모서리에 배치합니다.
+ 플렉스 레이아웃 항목에만 적용됩니다. 플렉스 컨테이너의 자식이 아닌 항목에 대해서는 end로 취급합니다.
+
center
+
플렉스/그리드 항목을 한 덩어리로 뭉쳐서 정렬 컨테이너 교차축의 중앙에 배치합니다.
+
normal
+
align-content를 지정하지 않았을 때처럼, 플렉스/그리드 항목을 한 덩어리로 뭉쳐서 기본 위치에 배치합니다.
+
baseline
+ first baseline
+ last baseline
+
the baseline is the line upon which most letters "sit" and below which descenders extend.
+
Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ first baseline의 대체 정렬은 start이며 last baseline의 대체 정렬은 end입니다.
+
space-between
+
정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목은 정렬 컨테이너 교차축의 시작점에, 마지막 항목은 정렬 컨테이너 교차축의 종료점에 붙입니다.
+
space-around
+
정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리가 동일해집니다. 첫 항목 이전 여백과 마지막 항목 이후 여백은 각 항목간 거리의 절반이 됩니다.
+
space-evenly
+
정렬 컨테이너의 교차축을 따라 항목을 고르게 배치합니다. 이웃한 항목간의 거리, 첫 항목 이전 여백, 마지막 항목 이후 여백이 모두 같아집니다.
+
stretch
+
모든 항목의 교차축 방향 크기의 합이 정렬 컨테이너보다 작은 경우, 모든 auto 크기의 항목이 동일(비례하지 않음)하게 커져서 정렬 컨테이너의 교차축 방향을 가득 채웁니다. 단, 항목에 지정한 {{cssxref("max-height")}}/{{cssxref("max-width")}} 등의 크기 제한은 준수합니다.
+
safe
+
정렬 키워드와 함께 사용합니다. 주어진 키워드로 인해 항목이 정렬 컨테이너 밖으로 오버플로하게 되어 데이터가 유실될 수 있으면 항목 정렬에 start를 대신 사용합니다.
+
unsafe
+
정렬 키워드와 함께 사용합니다. 컨테이너와 항목의 상대적 크기 및 오버플로로 인한 데이터 유실에 상관하지 않고 주어진 정렬을 준수합니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

CSS

+ +
#container {
+  height:200px;
+  width: 240px;
+  align-content: center; /* Can be changed in the live sample */
+  background-color: #8c8c8c;
+}
+
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+  box-sizing: border-box;
+  border: 2px solid #8c8c8c;
+  width: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#item1 {
+  background-color: #8cffa0;
+  min-height: 30px;
+}
+
+#item2 {
+  background-color: #a0c8ff;
+  min-height: 50px;
+}
+
+#item3 {
+  background-color: #ffa08c;
+  min-height: 40px;
+}
+
+#item4 {
+  background-color: #ffff8c;
+  min-height: 60px;
+}
+
+#item5 {
+  background-color: #ff8cff;
+  min-height: 70px;
+}
+
+#item6 {
+  background-color: #8cffff;
+  min-height: 50px;
+  font-size: 30px;
+}
+
+select {
+  font-size: 16px;
+}
+
+.row {
+  margin-top: 10px;
+}
+
+ +

HTML

+ +
<div id="container" class="flex">
+  <div id="item1">1</div>
+  <div id="item2">2</div>
+  <div id="item3">3</div>
+  <div id="item4">4</div>
+  <div id="item5">5</div>
+  <div id="item6">6</div>
+</div>
+
+<div class="row">
+  <label for="display">display: </label>
+  <select id="display">
+    <option value="flex">flex</option>
+    <option value="grid">grid</option>
+  </select>
+</div>
+
+<div class="row">
+  <label for="values">align-content: </label>
+  <select id="values">
+    <option value="normal">normal</option>
+    <option value="stretch">stretch</option>
+    <option value="flex-start">flex-start</option>
+    <option value="flex-end">flex-end</option>
+    <option value="center" selected>center</option>
+    <option value="space-between">space-between</option>
+    <option value="space-around">space-around</option>
+    <option value="space-evenly">space-evenly</option>
+
+    <option value="start">start</option>
+    <option value="end">end</option>
+    <option value="left">left</option>
+    <option value="right">right</option>
+
+    <option value="baseline">baseline</option>
+    <option value="first baseline">first baseline</option>
+    <option value="last baseline">last baseline</option>
+
+    <option value="safe center">safe center</option>
+    <option value="unsafe center">unsafe center</option>
+    <option value="safe right">safe right</option>
+    <option value="unsafe right">unsafe right</option>
+    <option value="safe end">safe end</option>
+    <option value="unsafe end">unsafe end</option>
+    <option value="safe flex-end">safe flex-end</option>
+    <option value="unsafe flex-end">unsafe flex-end</option>
+  </select>
+</div>
+
+ + + +

결과

+ +

{{EmbedLiveSample("예제", 260, 290)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-align-content", "align-content")}}{{Spec2("CSS3 Box Alignment")}}Adds the [ first | last ]? baseline, start, end, left, right, unsafe | safe values.
{{SpecName("CSS3 Flexbox", "#align-content", "align-content")}}{{Spec2("CSS3 Flexbox")}}Initial definition
+ +

브라우저 호환성

+ +
+ + +

플렉스 레이아웃 지원

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

그리드 레이아웃 지원

+ +

{{Compat("css.properties.align-content.grid_context")}}

+
+ +

같이 보기

+ + + +
{{CSSRef}}
diff --git a/files/ko/web/css/all/index.html b/files/ko/web/css/all/index.html new file mode 100644 index 0000000000..baa5d4e4f0 --- /dev/null +++ b/files/ko/web/css/all/index.html @@ -0,0 +1,171 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - CSS Cascade + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/all +--- +
{{CSSRef}}
+ +

CSS all 단축 속성은 요소의 {{cssxref("unicode-bidi")}}, {{cssxref("direction")}}, CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. 초깃값, 상속값, 아니면 다른 스타일시트 출처의 값으로 설정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/all.html")}}
+ + + +

구문

+ +
/* 전역 값 */
+all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+
+ +

all 속성은 CSS 전역 키워드 값 중 하나를 사용해 지정합니다. 그러나 어느것도 {{cssxref("unicode-bidi")}}와 {{cssxref("direction")}} 속성에는 영향을 주지 않는 점을 주의하세요.

+ +

값

+ +
+
{{cssxref("initial")}}
+
요소의 모든 속성을 초깃값으로 변경합니다.
+
{{cssxref("inherit")}}
+
요소의 모든 속성을 상속값으로 변경합니다.
+
{{cssxref("unset")}}
+
요소의 모든 속성을, 속성이 값을 상속하는 경우 상속값으로, 아니면 초깃값으로 변경합니다.
+
{{cssxref("revert")}}
+
선언이 속한 스타일시트의 출처에 따라 다른 동작을 합니다. +
+
사용자 에이전트 출처
+
unset과 동일합니다.
+
사용자 출처
+
종속을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자와 사용자 단계의 규칙이 없었던 것처럼 계산되도록 합니다.
+
저작자 출처
+
종속을 사용자 에이전트 단계까지 되돌려서, 지정값이 마치 저작자 단계의 규칙이 없었던 것처럼 계산되도록 합니다. revert만 고려했을 때, 저작자 출처는 재정의(Override) 및 애니메이션(Animation) 출처를 포함합니다.
+
+
+
+ +

형식 정의

+ +

{{CSSInfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<blockquote id="quote">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+</blockquote>
+Phasellus eget velit sagittis.
+ +

CSS

+ +
body {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

결과

+ +
+

all 속성 없음

+ + + + +{{EmbedLiveSample("ex0", "200", "125")}} + +

The {{HTMLElement("blockquote")}}가 브라우저 기본 스타일과 함께, 지정한 배경 및 텍스트 색상을 사용합니다. 또한 블록 요소로 동작하여 뒤의 텍스트가 아래에 위치합니다.

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("ex1", "200", "125")}} + +

{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 transparent(초깃값)입니다. 그러나 {{cssxref("font-size")}}는 여전히 small(상속값)이고 {{cssxref("color")}}도 blue(상속값)입니다.

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("ex2", "200", "125")}} + +

{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 이제 인라인 요소(초깃값)이며, {{cssxref("background-color")}}가 transparent(초깃값)이고, {{cssxref("font-size")}}는 normal(초깃값), {{cssxref("color")}}는 black(초깃값)입니다.

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("ex3", "200", "125")}} + +

{{HTMLElement("blockquote")}}가 브라우저 기본 스타일을 사용하지 않습니다. 블록 요소(부모 {{HTMLElement("body")}}에서 상속)이고, {{cssxref("background-color")}}은 #F0F0F0(상속값), {{cssxref("font-size")}}는 small(상속값), {{cssxref("color")}}는 blue(상속값)입니다.

+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS4 Cascade') }}Added the revert value.
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.all")}}

+ +

같이 보기

+ +

CSS 전역 키워드 값: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}

diff --git a/files/ko/web/css/all_about_the_containing_block/index.html b/files/ko/web/css/all_about_the_containing_block/index.html new file mode 100644 index 0000000000..35c6bf56cb --- /dev/null +++ b/files/ko/web/css/all_about_the_containing_block/index.html @@ -0,0 +1,263 @@ +--- +title: 컨테이닝 블록의 모든 것 +slug: Web/CSS/All_About_The_Containing_Block +tags: + - CSS + - Guide + - Layout + - Position +translation_of: Web/CSS/Containing_block +--- +
{{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')}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/alternative_style_sheets/index.html b/files/ko/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..918ce3dd36 --- /dev/null +++ b/files/ko/web/css/alternative_style_sheets/index.html @@ -0,0 +1,24 @@ +--- +title: Alternative style sheets +slug: Web/CSS/Alternative_style_sheets +translation_of: Web/CSS/Alternative_style_sheets +--- +

Firefox는 + + 대체 스타일시트 + 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 보기>페이지 스타일 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.

+

<tt>link</tt> 요소를 사용하여 웹 페이지에 대체 스타일시트를 제공할 수 있습니다.

+

예제:

+
 <link href="default.css" rel="stylesheet" type="text/css" title="Default Style">
+ <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy">
+ <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic">
+
+

위의 세 가지 스타일 시트를 제공하면, 페이지 스타일 메뉴에 "Default Style", "Fancy", "Basic" 스타일 목록이 출력됩니다. 사용자가 특정 스타일을 선택하면 페이지는 해당 스타일로 바로 다시 렌더링 됩니다.

+

link 또는 style 요소에 title 속성이 포함되어 있을 경우 해당 제목(title)은 사용자에게로 노출되어 사용자가 선택할 수 있게 됩니다. 동일한 제목을 가진 스타일시트가 여럿 존재할 경우 해당 스타일시트들은 모두 적용되며, title 속성이 없는 스타일시트는 항상 적용됩니다.

+

기본 스타일시트에는 rel="stylesheet" 속성을 사용하고 대체 스타일시트에는 rel="alternate stylesheet"를 사용하세요. 이를 통해 Firefox는 어떤 스타일시트 제목을 처음 선택해야 할지 알 수 있으며, 대체 스타일시트를 지원하지 않는 브라우저에게 기본 스타일시트가 무엇인지를 알려줍니다.

+

실제 예제

+

실제로 동작하는 예제는 여기에서 볼 수 있습니다.

+

명세

+ diff --git a/files/ko/web/css/angle-percentage/index.html b/files/ko/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..a341698026 --- /dev/null +++ b/files/ko/web/css/angle-percentage/index.html @@ -0,0 +1,52 @@ +--- +title: +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Data Type + - Data Type + - Reference + - 자료형 +translation_of: Web/CSS/angle-percentage +--- +
{{CSSRef}}
+ +

CSS <angle-percentage> 자료형은 {{cssxref("<angle>")}}과 {{cssxref("<percentage>")}} 모두 가능한 값을 나타냅니다.

+ +

구문

+ +

{{cssxref("<angle>")}}과 {{cssxref("<percentage>")}} 문서에서 각 자료형의 구문을 살펴보세요.

+ +

calc()에서 사용하기

+ +

<angle-percentage>를 사용할 수 있는 곳이라면 백분율이 각도로 계산되므로, 이 자료형도 {{cssxref("calc()")}}표현식에서 사용할 수 있습니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}Defines <angle-percentage>. Adds calc()
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.angle-percentage")}}

diff --git a/files/ko/web/css/angle/index.html b/files/ko/web/css/angle/index.html new file mode 100644 index 0000000000..8125920a36 --- /dev/null +++ b/files/ko/web/css/angle/index.html @@ -0,0 +1,115 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - Data Type + - Layout + - Reference + - Web + - 자료형 +translation_of: Web/CSS/angle +--- +
{{CSSRef}}
+ +

CSS <angle> 자료형은 각도의 값을 도, 그레이드, 라디안 또는 회전수로 표현합니다. {{cssxref("<gradient>")}}나 일부 {{cssxref("transform")}} 함수에서 사용합니다..

+ +
{{EmbedInteractiveExample("pages/css/type-angle.html")}}
+ + + +

구문

+ +

<angle> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위처럼 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 0 뒤에는 단위를 붙이지 않아도 됩니다.

+ +

선택적으로 +, - 부호를 표시할 수 있습니다. 양의 부호는 시계방향 회전을, 음의 부호는 시계 반대방향 회전을 나타냅니다. 정적 속성에선 하나의 각도를 다른 각도로 표현할 수 있습니다. 예컨대 90deg는 -270deg, 1turn은 4turn과 동일합니다. 그러나 동적 속성, 즉 {{cssxref("animation")}}이나 {{cssxref("transition")}}에서는 결과가 달라집니다.

+ +

단위

+ +
+
deg
+
각도를 도 단위로 나타냅니다. 1회전은 360deg입니다. 예: 0deg, 90deg, 14.23deg
+
grad
+
각도를 그레이드로 나타냅니다. 1회전은 400grad입니다. 예: 0grad, 100grad, 38.8grad
+
rad
+
각도를 라디안으로 나타냅니다. 1회전은 2π 라디안으로 약 6.2832rad입니다. 1rad는 180/πdeg입니다. 예: 0rad, 1.0708rad, 6.2832rad
+
turn
+
각도를 회전의 수로 나타냅니다. 1회전은 1turn입니다. 예: 0turn, 0.25turn, 1.2turn
+
+ +

예제

+ +

시계 방향 우측 90도

+ + + + + + + + +
Angle90.png90deg = 100grad = 0.25turn ≈ 1.5708rad
+ +

반대로 회전

+ + + + + + + + +
Angle180.png180deg = 200grad = 0.5turn ≈ 3.1416rad
+ +

시계 반대 방향 우측 90도

+ + + + + + + + +
AngleMinus90.png-90deg = -100grad = -0.25turn ≈ -1.5708rad
+ +

회전 없음

+ + + + + + + + +
Angle0.png0 = 0deg = 0grad = 0turn = 0rad
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Values', '#angles', '<angle>') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.angle")}}

diff --git a/files/ko/web/css/animation-delay/index.html b/files/ko/web/css/animation-delay/index.html new file mode 100644 index 0000000000..54f5d965e2 --- /dev/null +++ b/files/ko/web/css/animation-delay/index.html @@ -0,0 +1,85 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Property + - CSS animation + - Reference +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

animation-delay CSS 속성은 애니메이션이 시작할 시점을 지정합니다. 시작 즉시, 잠시 후에, 또는 애니메이션이 일부 진행한 시점부터 시작할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/animation-delay.html")}}
+ + + +

{{cssxref("animation")}} 단축 속성을 사용해 애니메이션 관련 속성을 편리하게 같이 지정할 수 있습니다.

+ +

구문

+ +
/* Single animation */
+animation-delay: 3s;
+animation-delay: 0s;
+animation-delay: -1500ms;
+
+/* Multiple animations */
+animation-delay: 2.1s, 480ms;
+ +

값

+ +
+
{{cssxref("<time>")}}
+
애니메이션이 시작될 요소가 적용되는 순간부터의 시간 오프셋입니다. 이 값은 초 또는 밀리 초 (ms)로 지정할 수 있습니다. 이 값은 필수입니다.
+
양수 값은 지정된 시간이 경과 한 후 애니메이션이 시작되어야 함을 나타냅니다. 기본값인 0의 값은 애니메이션이 적용되는 즉시 시작해야 함을 나타냅니다.
+
+

음수 값을 지정하면 애니메이션이 즉시 시작되지만 애니메이션 주기의 도중에 시작됩니다. 예를 들어 애니메이션 지연 시간으로 -1s를 지정하면 애니메이션이 즉시 시작되지만 애니메이션 시퀀스의 1초부터 시작됩니다. 만약 animation-delay에 음수 값을 지정했지만 시작값이 절대값이면 시작값은 애니메이션이 요소에 적용된 시점부터 가져옵니다.

+
+
+ +
+

참고: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.

+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

CSS 애니메이션 사용하기를 보세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +
{{Compat("css.properties.animation-delay")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/animation-direction/index.html b/files/ko/web/css/animation-direction/index.html new file mode 100644 index 0000000000..7c5c8b56db --- /dev/null +++ b/files/ko/web/css/animation-direction/index.html @@ -0,0 +1,191 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS 속성 + - CSS 애니메이션 +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

animation-direction CSS 속성은 애니메이션이 앞으로, 뒤로 또는 앞뒤로 번갈아 재생되어야하는지 여부를 지정합니다.

+ +
/* Single animation */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Multiple animations */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Global values */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

축약 속성 {{cssxref ( "animation")}}을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

+ +

{{cssinfo}}

+ +

문법(Syntax)

+ +

값(Values)

+ +
+
normal
+
 애니메이션은 매 사이클마다 정방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 시작 상태로 재설정되고 다시 시작됩니다. 이것은 기본값입니다.
+
reverse
+
애니메이션은 매 사이클마다 역방향으로 재생됩니다. 즉, 순환 할 때마다 애니메이션이 종료 상태로 재설정되고 다시 시작됩니다. 애니메이션 단계가 거꾸로 수행되고 타이밍 기능 또한 반대로됩니다. 예를 들어, ease-in 타이밍 기능은  ease-out형태로 변경됩니다.
+
alternate
+
애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 정방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
+
alternate-reverse
+
애니메이션은 매 사이클마다 각 주기의 방향을 뒤집으며, 첫 번째 반복은 역방향으로 진행됩니다. 사이클이 짝수인지 홀수인지를 결정하는 카운트가 하나에서 시작됩니다.
+
+ +
+

노트: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.

+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

예제(Examples)

+ +

CSS animations를 보십시오.

+ +

명세(Specifications)

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

브라우저 호환성(Browser compatibility)

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}[1]		1012{{property_prefix("-o")}}
+ 12.50		4.0{{property_prefix("-webkit")}}
reverse19{{CompatVersionUnknown}}{{CompatGeckoDesktop("16.0")}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
alternate-reverse19{{CompatVersionUnknown}}{{CompatGeckoDesktop("16.0")}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoMobile("16.0")}}[1]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}
reverse{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
alternate-reverse{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+
+ +

[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.

+ +

같이 보기(See also)

+ + diff --git a/files/ko/web/css/animation-duration/index.html b/files/ko/web/css/animation-duration/index.html new file mode 100644 index 0000000000..83e46427df --- /dev/null +++ b/files/ko/web/css/animation-duration/index.html @@ -0,0 +1,140 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS 애니메이션 +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}} {{SeeCompatTable}}
+ +

animation-duration CSS 속성은 애니메이션이 한 사이클을 완료하는 데 걸리는 시간을 지정합니다.

+ +
/* Single animation */
+animation-duration: 6s;
+animation-duration: 120ms;
+
+/* Multiple animations */
+animation-duration: 1.64s, 15.22s;
+animation-duration: 10s, 35s, 230ms;
+
+ +

축약 속성 {{ cssxref("animation") }}를 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

+ +

{{cssinfo}}

+ +

문법(Syntax)

+ +

Values

+ +
+
{{cssxref("<time>")}}
+
애니메이션이 한 사이클을 완료하는 데 걸리는 지속 시간입니다. 이것은 초(s) 또는 밀리 초 (ms)로 지정 될 수 있습니다. 값은 양수 또는 0이어야하며 단위는 필수입니다. 기본값인 0의 값은 애니메이션이 작동하지 않아야 함을 나타냅니다.
+
+ +
+

Note: 음수 값은 유효하지 않으므로 선언이 무시됩니다. 접두사가 붙은 구현은 그것들을 0과 동일하게 간주 할 수 있습니다.

+
+ +
+

Note: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 {{cssxref ( "animation-name")}} 속성에 지정된 애니메이션에 얼마나 많은 값이 있는지에 따라 다른 방식으로 지정됩니다. 자세한 내용은 Setting multiple animation property values를 참조하십시오.

+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

예제(Examples)

+ +

CSS 애니메이션 예제를 참조하십시오. 

+ +

명세(Specifications)

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

브라우저 호환성(Browser compatibility)

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support3.0{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}[1]		1012{{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support2.0{{property_prefix("-webkit")}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoMobile("5.0")}}{{property_prefix("-moz")}}
+ {{ CompatGeckoMobile("16.0")}}[1]		{{CompatNo}}{{CompatNo}}4.2{{property_prefix("-webkit")}}{{CompatChrome(43.0)}}
+
+ +

[1] Gecko 44.0 {{geckoRelease("44.0")}}은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두어로 사용 된 속성 버전에 대한 지원을 추가하고 기본을 false로 설정합니다. Gecko 49.0 {{geckoRelease("49.0")}}이후 기본 설정은 true로 기본 설정됩니다.

+ +

같이 보기(See also)

+ + diff --git a/files/ko/web/css/animation-fill-mode/index.html b/files/ko/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..f1920b92d2 --- /dev/null +++ b/files/ko/web/css/animation-fill-mode/index.html @@ -0,0 +1,241 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS 속성 + - CSS 애니메이션 +translation_of: Web/CSS/animation-fill-mode +--- +
{{CSSRef}}
+ +

animation-fill-mode CSS 속성은 CSS 애니메이션이 실행 전과 후에 대상에 스타일을 적용하는 방법을 지정합니다.

+ +
/* Single animation */
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Multiple animations */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+
+ +

축약 속성 animation을 사용하여 모든 애니메이션 속성을 한꺼번에 설정하는 것이 편리합니다.

+ +

{{cssinfo}}

+ +

문법(Syntax)

+ +

값(Values)

+ +
+
none
+
애니메이션은 실행되지 않을 때 대상에 스타일을 적용하지 않습니다. 요소는 대신 적용된 다른 CSS 규칙을 사용하여 표시됩니다. 이것은 기본값입니다.
+
forwards
+
대상은 실행 된 애니메이션의 마지막 keyframe에 의해 설정된 계산 된 값을 유지합니다. 마지막 키 프레임은 {{cssxref("animation-direction")}}및 {{cssxref("animation-iteration-count")}}의 값에 따라 다릅니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countlast keyframe encountered
normaleven or odd100% or to
reverseeven or odd0% or from
alternateeven0% or from
alternateodd100% or to
alternate-reverseeven100% or to
alternate-reverseodd0% or from
+
+
backwards
+
애니메이션은 대상에 적용되는 즉시 첫 번째 관련 keyframe 에 정의 된 값을 적용하고  {{cssxref("animation-delay")}} 기간 동안 이 값을 유지합니다. 첫 번째 관련 키프레임은 {{cssxref("animation-direction")}}의 값에 따라 다릅니다. + + + + + + + + + + + + + + + + + +
animation-directionfirst relevant keyframe
normal or alternate0% or from
reverse or alternate-reverse100% or to
+
+
both
+
애니메이션은 앞뒤 양쪽 모두의 규칙을 따르므로 애니메이션 속성이 양방향으로 확장됩니다.
+
+ +
+

노트: animation- * 속성에 여러 개의 쉼표로 구분 된 값을 지정하면 animation-name 속성에 지정된 애니메이션에 할당되는 값의 수에 따라 다른 방식으로 지정됩니다. 자세한 내용은 여러 애니메이션 속성 값 설정을 참조하십시오.

+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

예제(Examples)

+ +

다음 예제에서 animation-fill-mode의 효과를 볼 수 있습니다. 무한 시간 동안 실행되는 애니메이션의 경우 원래 상태 (기본값)로 되돌리기보다는 최종 상태로 유지하는 방법을 보여줍니다.

+ +

HTML

+ +
<p>회색 박스 위에 마우스를 올려보세요!</p>
+<div class="demo">
+  <div class="grows">이 글씨는 커집니다.</div>
+  <div class="growsandstays">이 글씨는 커지며, 커진 상태를 유지합니다.</div>
+</div>
+ +

CSS

+ +
.demo {
+  border-top: 100px solid #ccc;
+  height: 300px;
+}
+
+@keyframes grow {
+  0% { font-size: 0; }
+  100% { font-size: 40px; }
+}
+
+.demo:hover .grows {
+  animation-name: grow;
+  animation-duration: 3s;
+}
+
+.demo:hover .growsandstays {
+  animation-name: grow;
+  animation-duration: 3s;
+  animation-fill-mode: forwards;
+}
+ +

{{EmbedLiveSample('Example',700,300)}}

+ +

자세한 예제는 CSS animations를 보십시오.

+ +

명세(Specifications)

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

브라우저 호환성(Browser compatibility)

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatChrome(43.0)}}		{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatGeckoDesktop("5.0")}}{{property_prefix("-moz")}}
+ {{CompatGeckoDesktop("16.0")}}[1]		1012{{property_prefix("-o")}}
+ 12.10		4.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Gecko 44.0 {{geckoRelease("44.0")}} 은 layout.css.prefixes.webkit 환경 설정 뒤에 웹 호환성 이유로 인해 -webkit- 접두사가 붙은 속성 버전에 대한 지원을 추가했으며, 기본값은 false입니다. Gecko 49.0 {{geckoRelease("49.0")}} 이후 기본 설정은 true로 기본 설정됩니다.

+ +

같이 보기(See also)

+ + diff --git a/files/ko/web/css/animation/index.html b/files/ko/web/css/animation/index.html new file mode 100644 index 0000000000..0ae99bb71b --- /dev/null +++ b/files/ko/web/css/animation/index.html @@ -0,0 +1,349 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animations + - CSS Property + - Reference +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

animation CSS 속성은 다수의 스타일을 전환하는 애니메이션을 적용합니다. {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-play-state")}}의 단축 속성입니다.

+ +
{{EmbedInteractiveExample("pages/css/animation.html")}}
+ + + +
/* @keyframes duration | timing-function | delay |
+iteration-count | direction | fill-mode | play-state | name */
+animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+animation: 3s slidein;
+
+ + + +

{{EmbedLiveSample("animation", "100%", 260, "", "", "example-outcome-frame")}}

+ +

애니메이션 가능한 속성을 확인해보세요. CSS 트랜지션에도 적용된다는 점을 참고하세요.

+ +

{{cssinfo}}

+ +

구문

+ +

The animation property is specified as one or more single animations, separated by commas.

+ +

Each individual animation is specified as:

+ +
    +
  • zero or one occurrences of the following values: +
      +
    • {{cssxref("<single-transition-timing-function>")}}
      • +
    • {{cssxref("animation", "<single-animation-iteration-count>", "#<single-animation-iteration-count>")}}
      • +
    • {{cssxref("animation", "<single-animation-direction>", "#<single-animation-direction>")}}
      • +
    • {{cssxref("animation", "<single-animation-fill-mode>", "#<single-animation-fill-mode>")}}
      • +
    • {{cssxref("animation", "<single-animation-play-state>", "#<single-animation-play-state>")}}
      • +
    +
    • +
  • an optional name for the animation, which may be none, a {{cssxref("<custom-ident>")}}, or a {{cssxref("<string>")}}
    • +
  • zero, one, or two {{cssxref("<time>")}} values
    • +
+ +

The order of values within each animation definition is important: the first value that can be parsed as a {{cssxref("<time>")}} is assigned to the {{cssxref("animation-duration")}}, and the second one is assigned to {{cssxref("animation-delay")}}.

+ +

The order within each animation definition is also important for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsed, keywords that are valid for properties other than {{cssxref("animation-name")}}, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.

+ +

값

+ +
+
<single-animation-iteration-count>
+
The number of times the animation is played. The value must be one of those available in {{cssxref("animation-iteration-count")}}.
+
<single-animation-direction>
+
The direction in which the animation is played. The value must be one of those available in {{cssxref("animation-direction")}}.
+
<single-animation-fill-mode>
+
Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available in {{cssxref("animation-fill-mode")}}.
+
<single-animation-play-state>
+
Determines whether the animation is playing or not. The value must be one of those available in {{cssxref("animation-play-state")}}.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

Cylon Eye

+ +
<div class="view_port">
+  <div class="polling_message">
+    Listening for dispatches
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: linear-gradient(to right,
+      rgba(0, 0, 0, .9) 25%,
+      rgba(0, 0, 0, .1) 50%,
+      rgba(0, 0, 0, .9) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: 4s linear 0s infinite alternate move_eye;
+          animation: 4s linear 0s infinite alternate move_eye;
+}
+
+@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+        @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; }  }
+
+ +

{{EmbedLiveSample('Cylon_Eye')}}

+ +

See Using CSS animations for additional examples.

+ +

접근성 고려사항

+ +

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

+ +

Consider providing a mechanism for pausing or disabling animation, as well as using the Reduced Motion Media Query to create a complimentary experience for users who have expressed a preference for no animated experiences.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.animation")}}

+ +

Quantum CSS notes

+ +
    +
  • Gecko has a bug whereby when you animate an offscreen element onscreen but specify a delay, Gecko does not repaint on some platforms, e.g. Windows ({{bug(1383239)}}). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57).
    • +
  • Another Gecko bug means that {{htmlelement("details")}} elements can't be made open by default using the open attribute if they have an animation active on them ({{bug(1382124)}}). Quantum CSS fixes this.
    • +
  • A further bug means that animations using em units are not affected by changes to the {{cssxref("font-size")}} on the animated element's parent, whereas they should be ({{bug(1254424)}}). Quantum CSS fixes this.
    • +
+ +

같이 보기

+ + diff --git a/files/ko/web/css/at-rule/index.html b/files/ko/web/css/at-rule/index.html new file mode 100644 index 0000000000..2991e685b0 --- /dev/null +++ b/files/ko/web/css/at-rule/index.html @@ -0,0 +1,76 @@ +--- +title: '@-규칙' +slug: Web/CSS/At-rule +tags: + - At-rule + - CSS + - CSS Reference +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

@-규칙은 식별자(identifier)가 뒤따르는 at 기호('@' (U+0040 COMMERCIAL AT))로 시작하는 CSS 문이며 다음 세미콜론(';' (U+003B SEMICOLON)) 또는 다음 CSS 블록 중 먼저 오는 쪽까지 모든 것을 포함합니다.

+ +
/* General structure */
+@IDENTIFIER (RULE);
+
+/* Example: tells browser to use UTF-8 character set */
+@charset "utf-8";
+ +

다음과 같이 식별자가 지정된 각각 다른 구문인 여러 at-규칙이 있습니다:

+ +
    +
  • {{cssxref("@charset")}} — 스타일 시트에 의해 사용되는 문자 집합을 정의함.
    • +
  • {{cssxref("@import")}} — CSS 엔진에게 외부 스타일 시트를 포함하도록 알림.
    • +
  • {{cssxref("@namespace")}} — CSS 엔진에게 모든 콘텐츠가 XML 네임스페이스로 시작하(prefix가 붙)는 것이 고려되어야 함을 알림.
    • +
  • 중첩 @-규칙 — 중첩 문의 부분 집합으로, 조건부 그룹 규칙 속뿐만 아니라 스타일 시트의 문으로 사용될 수 있습니다: +
      +
    • {{cssxref("@media")}} — 장치가 미디어 질의(media query)를 사용하여 정의된 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.
      • +
    • {{cssxref("@supports")}} — 브라우저가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙.
      • +
    • {{cssxref("@document")}} {{experimental_inline}} — 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용하는 조건부 그룹 규칙. (CSS Spec 레벨 4로 연기됨)
      • +
    • {{cssxref("@page")}} — 문서를 출력할 때 적용되는 레이아웃 변화의 양상(aspect)을 설명.
      • +
    • {{cssxref("@font-face")}} — 다운로드되는 외부 글꼴의 양상을 설명.
      • +
    • {{cssxref("@keyframes")}} — CSS 애니메이션 sequence 내 중간 단계의 양상을 설명.
      • +
    • {{cssxref("@viewport")}} {{experimental_inline}} — 작은 화면 장치를 위한 viewport의 양상을 설명. (현재 Working Draft 단계임)
      • +
    • {{cssxref("@counter-style")}} — 미리 정의된 스타일 집합의 일부가 아닌 특정 카운터 스타일을 정의. (Candidate Recommendation 단계이지만, 작성 중인 현재 Gecko에서만 구현됨)
      • +
    • {{cssxref("@font-feature-values")}} (@swash, @ornaments, @annotation, @stylistic, @styleset 및 @character-variant와 함께)
      + — OpenType에서 다르게 활성화된 기능에 대해 {{cssxref("font-variant-alternates")}}에서 일반 이름을 정의. (Candidate Recommendation 단계이지만, 작성 중인 현재 Gekko에서만 구현됨)
      • +
    +
    • +
+ +

조건부 그룹 규칙

+ +

속성값과 마찬가지로, 각각의 @-규칙은 다른 구문이 있습니다. 그럼에도 불구하고, 그 중 몇몇은 조건부 그룹 규칙(conditional group rules)으로 불리는 특별한 범주로 분류될 수 있습니다. 이들 문은 공통 구문을 공유하고 그 각각은 중첩 문(규칙 집합(ruleset) 또는 중첩 @-규칙 중 하나)을 포함할 수 있습니다. 게다가, 그들은 모두 일반 semantic 의미를 전달합니다. 그들은 모두 어떤 유형의 조건을 링크합니다, 언제라도 참 또는 거짓 중 하나로 평가하는. 조건을 참으로 평가하면, 그룹 내 모든 문이 적용됩니다.

+ +

조건부 그룹 규칙은 CSS 조건부 규칙 모듈 레벨 3에서 정의되고 다음과 같습니다:

+ +
    +
  • {{cssxref("@media")}},
    • +
  • {{cssxref("@supports")}},
    • +
  • {{cssxref("@document")}}. (CSS Spec 레벨 4로 연기됨)
    • +
+ +

각 조건부 그룹은 또한 중첩 문을 포함할 수 있기에, 불특정한 양의 중첩이 있을 수 있습니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}초기 정의
{{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}{{Spec2('Compat')}}@-webkit-keyframes 표준화.
diff --git a/files/ko/web/css/attribute_selectors/index.html b/files/ko/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..4e9cecff26 --- /dev/null +++ b/files/ko/web/css/attribute_selectors/index.html @@ -0,0 +1,228 @@ +--- +title: 특성 선택자 +slug: Web/CSS/Attribute_selectors +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택합니다.

+ +
/* <a> elements with a title attribute */
+a[title] {
+  color: purple;
+}
+
+/* <a> elements with an href matching "https://example.org" */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* <a> elements with an href containing "example" */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* <a> elements with an href ending ".org" */
+a[href$=".org"] {
+  font-style: italic;
+}
+
+/* <a> elements whose class attribute contains the word "logo" */
+a[class~="logo"] {
+  padding: 2px;
+}
+ +

구문

+ +
+
[attr]
+
attr이라는 이름의 특성을 가진 요소를 선택합니다.
+
[attr=value]
+
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다.
+
[attr~=value]
+
attr이라는 이름의 특성값이 정확히 value인 요소를 선택합니다. attr 특성은 공백으로 구분한 여러 개의 값을 가지고 있을 수 있습니다.
+
[attr|=value]
+
attr이라는 특성값을 가지고 있으며, 그 특성값이 정확히 value이거나 value로 시작하면서 -(U+002D) 문자가 곧바로 뒤에 따라 붙으면 이 요소를 선택합니다. 보통 언어 서브코드(en-US, ko-KR 등)가 일치하는지 확인할 때 사용합니다.
+
[attr^=value]
+
attr이라는 특성값을 가지고 있으며, 접두사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
+
[attr$=value]
+
attr이라는 특성값을 가지고 있으며, 접미사로 value가 값에 포함되어 있으면 이 요소를 선택합니다.
+
[attr*=value]
+
attr이라는 특성값을 가지고 있으며, 값 안에 value라는 문자열이 적어도 하나 이상 존재한다면 이 요소를 선택합니다.
+
[attr operator value i]
+
괄호를 닫기 전에 i 혹은 I를 붙여주면 값의 대소문자를 구분하지 않습니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
+
[attr operator value s] {{experimental_inline}}
+
괄호를 닫기 전에 s 혹은 S를 붙여주면 값의 대소문자를 구분합니다. (ASCII 범위 내에 존재하는 문자에 한해서 적용됩니다)
+
+ +

예제

+ +

링크

+ +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links with "cAsE" anywhere in the URL,
+with matching capitalization */
+a[href*="cAsE" s] {
+  color: pink;
+}
+
+/* Links that end in ".org" */
+a[href$=".org"] {
+  color: red;
+}
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

결과

+ +

{{EmbedLiveSample("링크")}}

+ +

언어

+ +

CSS

+ +
/* All divs with a `lang` attribute are bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* All divs in US English are blue. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* All divs in Portuguese are green. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* All divs in Chinese are red, whether
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* All divs with a Traditional Chinese
+   `data-lang` are purple. */
+/* Note: You could also use hyphenated attributes
+   without double quotes */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">世界您好！</div>
+ +

결과

+ +

{{EmbedLiveSample("언어")}}

+ +

HTML 정렬 목록

+ +

{{htmlattrxref("type", "input")}} 특성은 주로 {{htmlelement("input")}} 요소에 사용하므로, HTML 명세는 type의 대소문자를 구분하지 않고 선택하도록 요구하고 있습니다. 그러므로 {{htmlelement("ol")}}의 {{htmlattrxref("type", "ol")}}을 특성 선택자로 선택할 땐 {{anch("case-sensitive", "대소문자 구분")}} 수정자를 지정하지 않으면 동작하지 않습니다.

+ +

CSS

+ +
/* List types require the case sensitive flag due to a quirk in how HTML treats the type attribute. */
+ol[type="a"] {
+  list-style-type: lower-alpha;
+  background: red;
+}
+
+ol[type="a" s] {
+  list-style-type: lower-alpha;
+  background: lime;
+}
+
+ol[type="A" s] {
+  list-style-type: upper-alpha;
+  background: lime;
+}
+ +

HTML

+ +
<ol type="A">
+  <li>Example list</li>
+</ol>
+ +

결과

+ +

{{EmbedLiveSample("HTML_정렬_목록")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}특성값 내에 존재하는 ASCII 문자의 대소문자를 구분하지 않는 수식자(modifier)를 추가하였습니다.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}초기 정의.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

같이 보기

+ +
    +
  • CSS {{cssxref("attr")}} 함수
    • +
diff --git a/files/ko/web/css/backdrop-filter/index.html b/files/ko/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..62921e2fcc --- /dev/null +++ b/files/ko/web/css/backdrop-filter/index.html @@ -0,0 +1,146 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS Property + - Graphics + - Layout + - Reference + - SVG + - SVG Filter + - Web + - 'recipe:css-property' +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}
+ +

CSS backdrop-filter는 요소 뒤 영역에 흐림이나 색상 시프트 등 그래픽 효과를 적용할 수 있는 속성입니다. 요소 "뒤"에 적용하기 때문에, 효과를 확인하려면 요소나 요소의 배경을 적어도 반투명하게는 설정해야 합니다.

+ +
/* 키워드 값 */
+backdrop-filter: none;
+
+/* SVG 필터를 가리키는 URL */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* <filter-function> 값 */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* 다중 필터 */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* 전역 값 */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

구문

+ +

값

+ +
+
none
+
뒤에 아무런 필터도 적용하지 않습니다.
+
<filter-function-list>
+
뒤에 적용할 {{cssxref("<filter-function>")}} 또는 SVG필터의 공백 구분 목록입니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

CSS

+ +
.box {
+  background-color: rgba(255, 255, 255, 0.3);
+  border-radius: 5px;
+  font-family: sans-serif;
+  text-align: center;
+  line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  max-width: 50%;
+  max-height: 50%;
+  padding: 20px 40px;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+body {
+  background-image: url(https://picsum.photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172));
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.container {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+ +

HTML

+ +
<div class="container">
+  <div class="box">
+    <p>backdrop-filter: blur(10px)</p>
+  </div>
+</div>
+
+ +

결과

+ +

{{EmbedLiveSample("예제", 600, 400)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.backdrop-filter")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("filter")}}
    • +
diff --git a/files/ko/web/css/backface-visibility/index.html b/files/ko/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..49c365e5f9 --- /dev/null +++ b/files/ko/web/css/backface-visibility/index.html @@ -0,0 +1,217 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Property + - CSS Transforms + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}
+ +

CSS backface-visibility 속성은 요소의 뒷면이 사용자를 향할 때 보여야 하는지 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
+ + + +

요소의 뒷면은 앞면의 거울상입니다. 2D 상태에서는 볼 수 없지만 변형을 통해 3D 공간에서 회전되면 노출될 수 있습니다. (2D 변형에는 원근이 없으므로 효과가 없습니다.)

+ +

구문

+ +
/* 키워드 값 */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* 전역 값 */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+ +

backface-visibility 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

+ +

값

+ +
+
visible
+
뒷면이 사용자를 향하면 보입니다.
+
hidden
+
뒷면이 사용자를 향해도 보이지 않습니다. 요소가 뒤를 향하면 사용자로부터 숨기는 것과 같습니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

육면체의 뒷면 비교

+ +

아래 예제는 투명한 뒷면의 육면체와 불투명한 뒷면의 육면체를 하나씩 보입니다.

+ +

HTML

+ +
<table>
+  <tr>
+    <th><code>backface-visibility: visible;</code></th>
+    <th><code>backface-visibility: hidden;</code></th>
+  </tr>
+  <tr>
+    <td>
+      <div class="container">
+        <div class="cube showbf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        Since all faces are partially transparent,
+        the back faces (2, 4, 5) are visible
+        through the front faces (1, 3, 6).
+      </p>
+    </td>
+    <td>
+      <div class="container">
+        <div class="cube hidebf">
+          <div class="face front">1</div>
+          <div class="face back">2</div>
+          <div class="face right">3</div>
+          <div class="face left">4</div>
+          <div class="face top">5</div>
+          <div class="face bottom">6</div>
+        </div>
+      </div>
+      <p>
+        The three back faces (2, 4, 5) are
+        hidden.
+      </p>
+    </td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Classes that will show or hide the
+   three back faces of the "cube" */
+.showbf div {
+  backface-visibility: visible;
+}
+
+.hidebf div {
+  backface-visibility: hidden;
+}
+
+/* Define the container div, the cube div, and a generic face */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Make the table a little nicer */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

결과

+ +

{{EmbedLiveSample('육면체의_뒷면_비교', '100%', 360)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}{{Spec2('CSS Transforms 2')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.backface-visibility")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/background-attachment/index.html b/files/ko/web/css/background-attachment/index.html new file mode 100644 index 0000000000..a72fce431f --- /dev/null +++ b/files/ko/web/css/background-attachment/index.html @@ -0,0 +1,153 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

CSS background-attachment 속성은 배경 이미지를 {{glossary("viewport", "뷰포트")}} 내에서 고정할지, 아니면 자신의 컨테이닝 블록과 함께 스크롤할지 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* 전역 값 */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

background-attachment 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

+ +

값

+ +
+
fixed
+
배경을 뷰포트에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 이 값은 {{cssxref("background-clip", "background-clip: text", "#text")}}와 호환되지 않습니다.
+
local
+
배경을 요소 콘텐츠에 대해 고정합니다. 요소에 스크롤이 존재하면 배경은 콘텐츠와 함께 스크롤됩니다. 배경 페인트 영역과 배경 위치 영역은 테두리 틀이 아닌 스크롤 가능 영역을 기준점으로 삼습니다.
+
scroll
+
배경을 요소 자체에 대해 고정합니다. 요소에 스크롤이 존재해도 배경은 함께 스크롤되지 않습니다. 즉 요소의 테두리에 배경 이미지를 부착한 것과 같은 효과입니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

간단한 예제

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("간단한_예제")}}

+ +

다중 배경 이미지

+ +

background-attachment는 다중 배경 이미지를 지원합니다. 각 배경에 대해 <attachment>를 지정하려면 쉼표로 구분하여 다수의 값을 제공하세요. 주어진 순서대로 배경에 적용합니다.

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

결과

+ +

{{EmbedLiveSample("다중_배경_이미지")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}The shorthand property has been extended to support multiple backgrounds and the local value.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}No significant change.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background-attachment")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/background-clip/index.html b/files/ko/web/css/background-clip/index.html new file mode 100644 index 0000000000..07d3676b80 --- /dev/null +++ b/files/ko/web/css/background-clip/index.html @@ -0,0 +1,129 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-clip +--- +
{{CSSRef}}
+ +

CSS background-clip 속성은 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어디까지 차지할 지 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/background-clip.html")}}
+ + + +

요소가 {{cssxref("background-image")}} 또는 {{cssxref("background-color")}}를 가지지 않으면, background-clip은 ({{cssxref("border-style")}} 또는 {{cssxref("border-image")}} 등으로 인해) 테두리에 투명하거나 반투명한 부분이 존재하는 경우에만 시각적 차이가 발생합니다. 그렇지 않은 경우 테두리가 차이점을 가립니다.

+ +

구문

+ +
/* 키워드 값 */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* 전역 값 */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+
+ +

값

+ +
+
border-box
+
배경이 테두리의 바깥 경계까지 차지합니다. (Z축 순서 상 테두리 아래 위치)
+
padding-box
+
배경이 안쪽 여백의 바깥 경계까지 차지합니다. 테두리 밑에는 배경을 그리지 않습니다.
+
content-box
+
배경을 콘텐츠 상자에 맞춰 그립니다.
+
text {{experimental_inline}}
+
배경을 전경 텍스트 위에만 그립니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<p class="border-box">The background extends behind the border.</p>
+<p class="padding-box">The background extends to the inside edge of the border.</p>
+<p class="content-box">The background extends only to the edge of the content box.</p>
+<p class="text">The background is clipped to the foreground text.</p>
+
+ +

CSS

+ +
p {
+  border: .8em darkviolet;
+  border-style: dotted double;
+  margin: 1em 0;
+  padding: 1.4em;
+  background: linear-gradient(60deg, red, yellow, red, yellow, red);
+  font: 900 1.2em sans-serif;
+  text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: rgba(0,0,0,.2);
+}
+ +

결과

+ +

{{EmbedLiveSample('예제', 600, 580)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
{{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}{{Spec2('CSS4 Backgrounds')}}Add text value.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background-clip")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("clip-path")}} 속성은 배경 뿐 아니라 하나의 요소 전체에서 표시할 부분을 지정하는 클리핑 영역을 생성합니다.
    • +
  • 배경 속성: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}
    • +
  • CSS 기본 박스 모델 입문
    • +
diff --git a/files/ko/web/css/background-color/index.html b/files/ko/web/css/background-color/index.html new file mode 100644 index 0000000000..d0e7402d56 --- /dev/null +++ b/files/ko/web/css/background-color/index.html @@ -0,0 +1,169 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Background + - CSS Property + - Graphics + - HTML Colors + - HTML Styles + - Layout + - Reference + - Styles + - Styling HTML +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

CSS background-color 속성은 요소의 배경 색을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/background-color.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+background-color: red;
+background-color: indigo;
+
+/* 16진수 값 */
+background-color: #bbff00;    /* 완전 불투명 */
+background-color: #bf0;       /* 완전 불투명 단축 */
+background-color: #11ffee00;  /* 완전 투명 */
+background-color: #1fe0;      /* 완전 투명 단축 */
+background-color: #11ffeeff;  /* 완전 불투명 */
+background-color: #1fef;      /* 완전 불투명 단축 */
+
+/* RGB 값 */
+background-color: rgb(255, 255, 128);        /* 완전 불투명 */
+background-color: rgba(117, 190, 218, 0.5);  /* 50% 불투명도 */
+
+/* HSL 값 */
+background-color: hsl(50, 33%, 25%);         /* 완전 불투명 */
+background-color: hsla(50, 33%, 25%, 0.75);  /* 75% 불투명도 */
+
+/* 특별 키워드 값 */
+background-color: currentcolor;
+background-color: transparent;
+
+/* 전역 값 */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+ +

background-color 속성은 하나의 {{cssxref("<color>")}} 값을 사용해 지정합니다.

+ +

값

+ +
+
{{cssxref("color")}}
+
요소의 배경으로 사용할 단일 색상입니다. {{cssxref("background-image")}} 뒤에 렌더링 되므로, 이미지가 투명한 부분을 가지고 있으면 그 곳을 통해 볼 수 있습니다.
+
+ +

접근성 고려사항

+ +

낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

+ +

색상 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

+ + + +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("예제","200","150")}}

+ +
    +
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세주석피드백
{{ SpecName('CSS3 Backgrounds', '#background-color', 'background-color') }}Though technically removing the transparent keyword, this doesn't change anything as it has been incorporated as a true {{cssxref("<color>")}}Backgrounds Level 3 GitHub issues
{{ SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color') }}No change.
{{ SpecName('CSS1', '#background-color', 'background-color') }}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background-color")}}

+ +

더 보기

+ +
    +
  • 한 번에 여러 배경 사용하기
    • +
  • {{cssxref("<color>")}} 자료형
    • +
  • 색상 관련 다른 속성: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • CSS로 HTML 요소에 색입히기
    • +
diff --git a/files/ko/web/css/background-image/index.html b/files/ko/web/css/background-image/index.html new file mode 100644 index 0000000000..0fce6c9b93 --- /dev/null +++ b/files/ko/web/css/background-image/index.html @@ -0,0 +1,152 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-image +--- +
{{CSSRef}}
+ +

CSS background-image 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/background-image.html")}}
+ + + +

여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다.

+ +

테두리는 배경 이미지 위에, {{cssxref("background-color")}}는 밑에 그려집니다. 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 {{cssxref("background-clip")}}과 {{cssxref("background-origin")}} CSS 속성이 정의합니다.

+ +

브라우저는 값에 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 none 키워드를 사용한 것처럼 처리합니다.

+ +
참고: 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 {{cssxref("background-color")}}는 지정해야 합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문입니다,
+ +

구문

+ +

각각의 배경 이미지는 {{anch("none")}} 키워드나 {{cssxref("<image>")}} 값으로 지정할 수 있습니다.

+ +

여러 개의 배경 이미지를 지정하려면 쉼표로 구분한 다수의 값을 지정하세요.

+ +
background-image:
+  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
+  url('https://mdn.mozillademos.org/files/7693/catfront.png');
+ +

값

+ +
+
none
+
배경 이미지의 부재를 나타내는 키워드입니다.
+
{{cssxref("<image>")}}
+
배경으로 사용할 이미지입니다. 여러 개의 배경 이미지를 사용할 땐 쉼표로 구분한 다수의 값을 지정하세요.
+
+ +

접근성 고려사항

+ +

브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.

+ + + +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

배경 이미지 레이어링

+ +

별 모양 이미지는 배경이 투명하고, 고양이 이미지 위에 위치합니다.

+ +

HTML

+ +
<div>
+  <p class="catsandstars">
+    This paragraph is full of cats<br />and stars.
+  </p>
+  <p>This paragraph is not.</p>
+  <p class="catsandstars">
+    Here are more cats for you.<br />Look at them!
+  </p>
+  <p>And no more.</p>
+</div>
+ +

CSS

+ +
p {
+  font-size: 1.5em;
+  color: #FE7F88;
+  background-image: none;
+  background-color: transparent;
+}
+
+div {
+  background-image:
+      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+.catsandstars {
+  background-image:
+      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+      url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+ +

결과

+ +

{{EmbedLiveSample('배경_이미지_레이어링')}}

+ +
    +
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태주석
{{ SpecName('CSS3 Backgrounds', '#background-image', 'background-image') }}{{ Spec2('CSS3 Backgrounds') }}From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{cssxref("<image>")}} CSS data type.
{{ SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image') }}{{ Spec2('CSS2.1') }}From CSS1, the way images with and without intrinsic dimensions are handled is now described.
{{ SpecName('CSS1', '#background-image', 'background-image') }}{{ Spec2('CSS1') }}
+ +

브라우저 호환성

+ + + +
{{Compat("css.properties.background-image")}}
+ +

같이 보기

+ +
    +
  • CSS로 이미지 스프라이트 구현하기
    • +
  • {{HTMLElement("img")}}
    • +
  • 이미지 관련 자료형: {{cssxref("<image>")}}, {{cssxref("<gradient>")}}
    • +
  • 이미지 관련 함수: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}
    • +
diff --git a/files/ko/web/css/background-origin/index.html b/files/ko/web/css/background-origin/index.html new file mode 100644 index 0000000000..4a92509f69 --- /dev/null +++ b/files/ko/web/css/background-origin/index.html @@ -0,0 +1,113 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-origin +--- +
{{CSSRef}}
+ +

CSS background-origin 속성은 배경의 원점을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/background-origin.html")}}
+ + + +

{{cssxref("background-attachment")}}가 fixed인 경우 background-origin은 무시됩니다.

+ +

구문

+ +
/* 키워드 값 */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* 전역 값 */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+
+ +

background-origin 속성은 다음 목록의 키워드 중 하나를 선택해 지정할 수 있습니다.

+ +

값

+ +
+
border-box
+
배경을 테두리 박스에 상대적으로 배치합니다.
+
padding-box
+
배경을 안쪽 여백 박스에 상대적으로 배치합니다.
+
content-box
+
배경을 콘텐츠 박스에 상대적으로 배치합니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

배경 원점 설정하기

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  background: url('image.jpg');
+  background-position: center left;
+  background-origin: content-box;
+}
+
+ +
#example2 {
+  border: 4px solid black;
+  padding: 10px;
+  background: url('image.gif');
+  background-repeat: no-repeat;
+  background-origin: border-box;
+}
+
+ +
div {
+  background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
+  background-position: top right, 0px 0px;
+  background-origin: content-box, padding-box;
+}
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-origin', 'background-origin')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background-origin")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("background-clip")}}
    • +
diff --git a/files/ko/web/css/background-repeat/index.html b/files/ko/web/css/background-repeat/index.html new file mode 100644 index 0000000000..5183ad67d6 --- /dev/null +++ b/files/ko/web/css/background-repeat/index.html @@ -0,0 +1,233 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/background-repeat +--- +
{{CSSRef}}
+ +

CSS background-repeat 속성은 배경 이미지의 반복 방법을 지정합니다. 가로축 및 세로축을 따라 반복할 수 있고, 아예 반복하지 않을 수도 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
+ + + +

반복한 이미지는 기본값에선 요소 크기에 따라 잘릴 수 있지만, 잘리지 않도록 배경 이미지 크기를 조절하거나(round) 끝에서 끝까지 고르게 분배(space)할 수 있습니다.

+ +

구문

+ +
/* 키워드 값 */
+background-repeat: repeat-x;
+background-repeat: repeat-y;
+background-repeat: repeat;
+background-repeat: space;
+background-repeat: round;
+background-repeat: no-repeat;
+
+/* 2개 값 구문: 가로 | 세로 */
+background-repeat: repeat space;
+background-repeat: repeat repeat;
+background-repeat: round space;
+background-repeat: no-repeat round;
+
+/* 전역 값 */
+background-repeat: inherit;
+background-repeat: initial;
+background-repeat: unset;
+
+ +

값

+ +
+
<repeat-style>
+
한 개 값 구문은 두 개 값 구문의 단축 형태입니다.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
한 개 값두 개 값
repeat-xrepeat no-repeat
repeat-yno-repeat repeat
repeatrepeat repeat
spacespace space
roundround round
no-repeatno-repeat no-repeat
+ 두 개 값 구문의 앞쪽은 가로 반복 방법을, 뒤쪽은 세로 반복 방법을 설정합니다. 각 방법의 동작 방식은 아래 표와 같습니다.
+
+ + + + + + + + + + + + + + + + + + + +
repeat요소의 배경 영역을 채울 때까지 이미지를 반복합니다. 마지막 반복 이미지가 넘칠 경우 잘라냅니다.
space요소가 잘리지 않을 만큼 이미지를 반복합니다. 제일 처음과 마지막 반복 이미지는 요소의 양쪽 끝에 고정되고, 각 이미지 사이에 남은 여백을 고르게 분배합니다. 잘리지 않고 배치할 수 있는 이미지가 단 한 장인 경우가 아니라면 {{cssxref("background-position")}} 속성은 무시합니다. space를 사용했는데 이미지가 잘리는 경우는 그 크기가 너무 커서 한 장 조차 넣을 수 없는 경우뿐입니다.
round가용 영역이 늘어나면 반복 이미지도 늘어나 여백을 남기지 않습니다. 이미지를 하나 더 추가할 공간이 생기면 (남은 공간 >= 이미지 너비의 절반) 비로소 반복 횟수를 하나 추가합니다. 이 때, 원래 존재하던 이미지는 모두 줄어들어 새로운 이미지를 위한 공간을 확보합니다. 예시: 원래 너비가 260px이고, 세 번 반복된 이미지는 각자 300px 너비가 될 때까지 늘어날 수 있습니다. 그 후에는 이미지를 추가하고, 각자 225px로 줄어듭니다.
no-repeat이미지를 반복하지 않습니다. 따라서 배경 이미지 영역이 다 차지 않을 수 있습니다. 반복하지 않은 이미지의 위치는 {{cssxref("background-position")}} CSS속성이 설정합니다.
+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

HTML

+ +
<ol>
+  <li>no-repeat
+    <div class="one"></div>
+  </li>
+  <li>repeat
+    <div class="two"></div>
+  </li>
+  <li>repeat-x
+    <div class="three"></div>
+  </li>
+  <li>repeat-y
+    <div class="four"></div>
+  </li>
+  <li>space
+    <div class="five"></div>
+  </li>
+  <li>round
+    <div class="six"></div>
+  </li>
+  <li>repeat-x, repeat-y (multiple images)
+    <div class="seven"></div>
+  </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+ol,
+li {
+  margin: 0;
+  padding: 0;
+}
+li {
+  margin-bottom: 12px;
+}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 160px;
+    height: 70px;
+}
+
+/* Background repeats */
+.one {
+  background-repeat: no-repeat;
+}
+.two {
+  background-repeat: repeat;
+}
+.three {
+  background-repeat: repeat-x;
+}
+.four {
+  background-repeat: repeat-y;
+}
+.five {
+  background-repeat: space;
+}
+.six {
+  background-repeat: round;
+}
+
+/* Multiple images */
+.seven {
+  background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                     url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+  background-repeat: repeat-x,
+                     repeat-y;
+  height: 144px;
+}
+ +

결과

+ +

{{EmbedLiveSample('예제', 240, 560)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-repeat', 'background-repeat')}}{{Spec2('CSS3 Backgrounds')}}Adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level elements by precisely defining the background painting area.
{{SpecName('CSS2.1', 'colors.html#propdef-background-repeat', 'background-repeat')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#background-repeat', 'background-repeat')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background-repeat")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/background-size/index.html b/files/ko/web/css/background-size/index.html new file mode 100644 index 0000000000..db02fe7030 --- /dev/null +++ b/files/ko/web/css/background-size/index.html @@ -0,0 +1,196 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Background + - CSS Property + - Reference +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +
CSS background-size 속성은 요소 배경 이미지의 크기를 설정합니다. 그대로 두거나, 늘리고 줄이거나, 공간에 맞출 수 있습니다.
+ +
+ +
{{EmbedInteractiveExample("pages/css/background-size.html")}}
+ + + +

배경 이미지로 덮이지 않은 공간은 {{cssxref("background-color")}} 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다.

+ +

구문

+ +
/* 키워드 값 */
+background-size: cover;
+background-size: contain;
+
+/* 단일 값 구문 */
+/* 이미지 너비 (높이는 'auto'가 됨) */
+background-size: 50%;
+background-size: 3.2em;
+background-size: 12px;
+background-size: auto;
+
+/* 두 개 값 구문 */
+/* 첫 번째 값: 이미지 너비, 두 번째 값: 이미지 높이 */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* 다중 배경 */
+background-size: auto, auto; /* `auto auto`와 혼동하지 말 것 */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* 전역 값 */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

 background-size 속성은 다음 방법 중 하나로 지정할 수 있습니다. 

+ +
    +
  • contain 또는 cover 키워드 값 사용.
    • +
  • 너비 값만 사용. 높이는 자동으로 {{anch("auto")}}가 됩니다.
    • +
  • 너비와 높이 값을 모두 사용. 첫 번째 값은 너비로, 두 번째 값은 높이를 설정합니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, {{anch("auto")}}를 사용할 수 있습니다.
    • +
+ +

여러 배경 이미지의 사이즈를 지정하려면 각각의 값을 쉼표로 구분하세요.

+ +

값

+ +
+
contain
+
이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정.
+
cover
+
이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정. 이미지의 가로세로비가 요소와 다르다면 이미지를 세로 또는 가로방향으로 잘라내어 빈 공간이 생기지 않도록 설정합니다.
+
auto
+
배경 이미지의 원본 크기를 유지.
+
{{cssxref("<length>")}}
+
원본 크기의 너비/높이를 주어진 값으로 늘리거나 줄임. 음수는 유효하지 않습니다.
+
{{cssxref("<percentage>")}}
+
Stretches the image in the corresponding dimension to the specified percentage of the background positioning area. The background positioning area is determined by the value of {{cssxref("background-origin")}} (by default, the padding box). However, if the background's {{cssxref("background-attachment")}} value is fixed, the positioning area is instead the entire {{glossary("viewport")}}. Negative values are not allowed.
+
+ +

원본 크기와 비율

+ +

The computation of values depends on the image's intrinsic dimensions (width and height) and intrinsic proportions (width-to-height ratio). These attributes are as follows:

+ +
    +
  • A bitmap image (such as JPG) always has intrinsic dimensions and proportions.
    • +
  • A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.
    • +
  • CSS {{cssxref("<gradient>")}}s have no intrinsic dimensions or intrinsic proportions.
    • +
  • Background images created with the {{cssxref("element()")}} function use the intrinsic dimensions and proportions of the generating element.
    • +
+ +
+

Note: The behavior of <gradient>s changed in Gecko 8.0 {{geckoRelease("8.0")}}. Before this, they were treated as images with no intrinsic dimensions, but with intrinsic proportions identical to that of the background positioning area.

+
+ +
+

Note: In Gecko, background images created using the {{cssxref("element()")}} function are currently treated as images with the dimensions of the element, or of the background positioning area if the element is SVG, with the corresponding intrinsic proportion. This is non-standard behavior.

+
+ +

Based on the intrinsic dimensions and proportions, the rendered size of the background image is computed as follows:

+ +
+
If both components of background-size are specified and are not auto:
+
The background image is rendered at the specified size.
+
If the background-size is contain or cover:
+
While preserving its intrinsic proportions, the image is rendered at the largest size contained within, or covering, the background positioning area. If the image has no intrinsic proportions, then it's rendered at the size of the background positioning area.
+
If the background-size is auto or auto auto:
+
+
    +
  • If the image has both horizontal and vertical intrinsic dimensions, it's rendered at that size.
    • +
  • If the image has no intrinsic dimensions and has no intrinsic proportions, it's rendered at the size of the background positioning area.
    • +
  • If the image has no intrinsic dimensions but has intrinsic proportions, it's rendered as if contain had been specified instead.
    • +
  • If the image has only one intrinsic dimension and has intrinsic proportions, it's rendered at the size corresponding to that one dimension. The other dimension is computed using the specified dimension and the intrinsic proportions.
    • +
  • If the image has only one intrinsic dimension but has no intrinsic proportions, it's rendered using the specified dimension and the other dimension of the background positioning area.
    • +
+
+
+
Note: SVG images have a preserveAspectRatio attribute that defaults to the equivalent of contain. In Firefox 43, as opposed to Chrome 52, an explicit background-size causes preserveAspectRatio to be ignored.
+
+
If the background-size has one auto component and one non-auto component:
+
+
    +
  • If the image has intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the specified dimension and the intrinsic proportions.
    • +
  • If the image has no intrinsic proportions, it's stretched to the specified dimension. The unspecified dimension is computed using the image's corresponding intrinsic dimension, if there is one. If there is no such intrinsic dimension, it becomes the corresponding dimension of the background positioning area.
    • +
+
+
+ +
+

Note: Background sizing for vector images that lack intrinsic dimensions or proportions is not yet fully implemented in all browsers. Be careful about relying on the behavior described above, and test in multiple browsers to be sure the results are acceptable.

+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

Please see Scaling background images for examples.

+ +

참고

+ +

If you use a <gradient> as the background and specify a background-size to go with it, it's best not to specify a size that uses a single auto component, or is specified using only a width value (for example, background-size: 50%). Rendering of <gradient>s in such cases changed in Firefox 8, and at present is generally inconsistent across browsers, which do not all implement rendering in full accordance with the CSS3 background-size specification and with the CSS3 Image Values gradient specification.

+ +
.gradient-example {
+  width: 50px;
+  height: 100px;
+  background-image: linear-gradient(blue, red);
+
+  /* Not safe to use */
+  background-size: 25px;
+  background-size: 50%;
+  background-size: auto 50px;
+  background-size: auto 50%;
+
+  /* Safe to use */
+  background-size: 25px 50px;
+  background-size: 50% 50%;
+}
+
+ +

Note that it's particularly not recommended to use a pixel dimension and an auto dimension with a <gradient>, because it's impossible to replicate rendering in versions of Firefox prior to 8, and in browsers not implementing Firefox 8's rendering, without knowing the exact size of the element whose background is being specified.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background-size")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/background/index.html b/files/ko/web/css/background/index.html new file mode 100644 index 0000000000..1fd697b1d8 --- /dev/null +++ b/files/ko/web/css/background/index.html @@ -0,0 +1,178 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/background +--- +
{{CSSRef("CSS Background")}}
+ +

CSS background 단축 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

구성 속성

+ +

background는 단축 속성으로서 다음의 하위 속성을 포함합니다.

+ +
    +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
+ +

구문

+ +
/* <background-color> 사용 */
+background: green;
+
+/* <bg-image>와 <repeat-style> 사용 */
+background: url("test.jpg") repeat-y;
+
+/* <box>와 <background-color> 사용 */
+background: border-box red;
+
+/* 단일 이미지, 중앙 배치 및 크기 조절 */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

background 속성을 쉼표로 구분해서 배경 레이어를 여러 개 지정할 수 있습니다.

+ +

각 레이어의 구문은 다음과 같습니다.

+ +
    +
  • 각 레이어는 다음 값을 가지거나 가지지 않을 수 있습니다. + +
    • +
  • <bg-size> 값은 <position> 바로 뒤에만 위치할 수 있으며 '/' 문자로 구분해야 합니다. 예를 들면 "center/80%" 처럼 사용합니다.
    • +
  • <box> 값은 2개까지 가지거나 가지지 않을 수 있습니다. 1개 가진다면 {{cssxref("background-origin")}}과 {{cssxref("background-clip")}}을 모두 설정합니다. 2개 가진다면 처음 값은 {{cssxref("background-origin")}}, 두 번째 값은 {{cssxref("background-clip")}}을 설정합니다.
    • +
  • <background-color> 값은 마지막 레이어만 가질 수 있습니다.
    • +
+ +

값

+ +
+
<attachment>
+
{{cssxref("background-attachment")}}
+
<box>
+
{{cssxref("background-clip")}}, {{cssxref("background-origin")}}
+
<background-color>
+
{{cssxref("background-color")}}
+
<bg-image>
+
{{Cssxref("background-image")}}
+
<position>
+
{{cssxref("background-position")}}
+
<repeat-style>
+
{{cssxref("background-repeat")}}
+
<bg-size>
+
{{cssxref("background-size")}}
+
+ +

접근성 고려사항

+ +

브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.

+ + + +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

색상 키워드와 이미지를 사용한 배경

+ +

HTML

+ +
<p class="topbanner">
+  작은 별<br/>
+  반짝 반짝<br/>
+  작은 별
+</p>
+<p class="warning">문단 하나<p>
+ +

CSS

+ +
.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+ +

결과

+ +

{{EmbedLiveSample("색상_키워드와_이미지를_사용한_배경")}}

+ +
    +
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}The shorthand property has been extended to support multiple backgrounds and the new {{cssxref("background-size")}}, {{cssxref("background-origin")}} and {{cssxref("background-clip")}} properties.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}No significant changes
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.background")}}

+ +

같이 보기

+ + + +

Categoria

diff --git a/files/ko/web/css/basic-shape/index.html b/files/ko/web/css/basic-shape/index.html new file mode 100644 index 0000000000..1697320804 --- /dev/null +++ b/files/ko/web/css/basic-shape/index.html @@ -0,0 +1,179 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS Date Type + - CSS Shapes + - Reference +translation_of: Web/CSS/basic-shape +--- +
{{CSSRef}}
+ +

<basic-shape> CSS 자료형은 {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, {{cssxref("offset-path")}} 속성이 사용할 형태를 정의합니다.

+ +
{{EmbedInteractiveExample("pages/css/type-basic-shape.html")}}
+ + + +

구문

+ +

<basic-shape> 자료형은 아래의 기본 형태 함수 중 하나를 사용해 정의합니다.

+ +

형태를 생성할 때, 형태의 기준 상자는 <basic-shape> 값을 사용하는 속성이 결정합니다. 형태의 좌표계는 기준 상자의 좌상단을 원점으로 하고, X축은 오른쪽, Y축은 아래쪽으로 나가게 됩니다. 백분율료 표현한 모든 길이는 기준 상자의 크기를 사용해 계산합니다.

+ +

형태 함수

+ +

다음의 형태를 지원합니다. 모든 <basic-shape> 값은 함수형 표기법을 사용하고, 여기서는 값 정의 구문을 통해 정의합니다.

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

인셋(inset) 사각형을 정의합니다.

+ +

매개변수 네 개를 모두 제공했을 땐 기준 상자의 상, 우, 하, 좌측 모서리에서 각각의 값만큼 안쪽으로 이동하여 인셋 사각형의 모서리를 구성합니다. 매개변수는 여백 단축 속성의 구분을 따르므로 네 모서리를 한 개, 두 개 등의 값만으로 정의할 수 있습니다.

+ +

선택적 {{cssxref("border-radius", "<border-radius>")}} 매개변수를 border-radius 단축 속성 구문을 사용해 지정하면 인셋 사각형의 모서리를 둥글게 만들 수 있습니다.

+ +

좌우 인셋 각각 75%처럼, 한 축의 인셋 쌍 값의 합이 요소가 차지하는 크기보다 큰 경우 면적 없는 형태를 정의합니다.

+ + +
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

<shape-radius> 매개변수는 원의 반지름 r을 지정합니다. 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비와 높이를 공식 sqrt(width^2+height^2)/sqrt(2)에 대입한 결과가 최종 값이 됩니다.

+ +

{{cssxref("<position>")}} 매개변수는 원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

<shape-radius> 매개변수는 타원의 X축, Y축 반지름인 rx와 ry를 순서대로 지정합니다. 두 값 모두 음수는 유효하지 않습니다. 백분율 값을 사용하면 기준 상자의 너비(rx)와 높이(ry)를 사용해 계산합니다.

+ +

{{cssxref("<position>")}} 매개변수는 타원의 중심을 지정합니다. 생략할 경우 중앙을 기본값으로 사용합니다.

+
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

<fill-rule> represents the filling rule used to determine the interior of the polygon. Possible values are nonzero and evenodd. Default value when omitted is nonzero.

+ +

Each pair argument in the list represents xi and yi - the x and y axis coordinates of the ith vertex of the polygon.

+
+
path()
+
+ 
path( [<fill-rule>,]? <string>)
+ +

The optional <fill-rule> represents the filling rule used to determine the interior of the path. Possible values are nonzero and evenodd. Default value when omitted is nonzero.

+ +

The required <string> is an SVG Path string encompassed in quotes

+
+
+ +

The arguments not defined above are defined as follows:

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

Defines a radius for a circle or ellipse. If omitted it defaults to closest-side.

+ +

closest-side uses the length from the center of the shape to the closest side of the reference box. For circles, this is the closest side in any dimension. For ellipses, this is the closest side in the radius dimension.

+ +

farthest-side uses the length from the center of the shape to the farthest side of the reference box. For circles, this is the farthest side in any dimension. For ellipses, this is the farthest side in the radius dimension.

+ +

기본 형태의 계산값

+ +

The values in a <basic-shape> function are computed as specified, with these exceptions:

+ +
    +
  • Omitted values are included and compute to their defaults.
    • +
  • A {{cssxref("<position>")}} value in circle() or ellipse() is computed as a pair of offsets (horizontal then vertical) from the top left origin, each given as a combination of an absolute length and a percentage.
    • +
  • A <border-radius> value in inset() is computed as an expanded list of all eight {{cssxref("length")}} or percentage values.
    • +
+ +

기본 형태의 보간법

+ +

When animating between one <basic-shape> and another, the rules below are applied. The values in the shape functions interpolate as a simple list. The list values interpolate as {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, or {{cssxref("calc()")}} where possible. If list values are not one of those types but are identical, those values do interpolate.

+ +
    +
  • Both shapes must use the same reference box.
    • +
  • If both shapes are the same type, that type is ellipse() or circle(), and none of the radii use the closest-side or farthest-side keywords, interpolate between each value in the shape functions.
    • +
  • If both shapes are of type inset(), interpolate between each value in the shape functions.
    • +
  • If both shapes are of type polygon(), both polygons have the same number of vertices, and use the same <fill-rule>, interpolate between each value in the shape functions.
    • +
  • If both shapes are of type path(), both paths strings have the same number and types of path data commands in the same order, interpolate each path data command as real numbers.
    • +
  • In all other cases no interpolation occurs.
    • +
+ +

예제

+ +

Animated polygon

+ +

In this example, we use the @keyframes at-rule to animate a clip path between two polygons. Note that both polygons have the same number of vertices, which is necessary for this type of animation to work.

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}
+ +

결과

+ +

{{EmbedLiveSample('Animated_polygon','340', '340')}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.basic-shape")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/blend-mode/index.html b/files/ko/web/css/blend-mode/index.html new file mode 100644 index 0000000000..f5570e1ce3 --- /dev/null +++ b/files/ko/web/css/blend-mode/index.html @@ -0,0 +1,404 @@ +--- +title: +slug: Web/CSS/blend-mode +tags: + - CSS + - CSS Data Type + - Reference + - 블렌드 모드 + - 혼합 모드 +translation_of: Web/CSS/blend-mode +--- +
{{CSSRef}}
+ +

CSS <blend-mode> 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의합니다. {{cssxref("background-blend-mode")}}와 {{cssxref("mix-blend-mode")}} 속성에서 사용합니다.

+ +

최종 색상은 혼합 모드를 적용한 레이어 각각의 픽셀 하나씩에 대해 전경색과 배경색을 취한 후 모드에 따라 계산을 수행하여 나온 새로운 값입니다.

+ +

구문

+ +

<blend-mode> 자료형은 다음 키워드 값 중 하나를 선택해 지정합니다.

+ +

값

+ +
+
normal
+
+

배경색에 상관하지 않고 최상단 색을 사용합니다.
+ 두 장의 불투명한 종이를 겹친 것과 같습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('normal_example', "300", "300") }}

+
+
multiply
+
+

최종 색은 전경과 배경색을 곱한 값입니다.
+ 검은 레이어는 최종 레이어를 검은 색으로 만들고, 하얀 레이어는 아무런 변화도 주지 않습니다.
+ 투명한 필름에 프린트한 이미지를 서로 겹친 것과 같습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('multiply_example', "300", "300") }}

+
+
screen
+
+

최종 색은 전경과 배경색을 각각 반전한 후 서로 곱해 나온 값을 다시 반전한 값입니다.
+ 검은 레이어는 아무런 변화도 주지 않고, 하얀 레이어는 최종 레이어를 하얗게 만듭니다.
+ 프로젝터 두 대로 이미지를 겹친 것과 같습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('screen_example', "300", "300") }}

+
+
overlay
+
배경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용합니다.
+ hard-light와 같지만 배경과 전경을 뒤집은 것입니다. +
+ +
+ +

{{ EmbedLiveSample('overlay_example', "300", "300") }}

+
+
darken
+
+

최종 색은 각각의 색상 채널에 대해 제일 어두운 값을 취한 결과입니다.

+ +
+ +
+ +

{{ EmbedLiveSample('darken_example', "300", "300") }}

+
+
lighten
+
+

최종 색은 각각의 색상 채널에 대해 제일 밝은 값을 취한 결과입니다.

+ +
+ +
+ +

{{ EmbedLiveSample('lighten_example', "300", "300") }}

+
+
color-dodge
+
+

최종 색은 배경색을 전경색의 역으로 나눈 결과입니다.
+ 검은 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 제일 밝은 색이 됩니다.
+ screen과 유사하지만, 전경색의 밝기가 배경색과 동일하기만 해도 최대의 밝기를 가진 색을 반환합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('color-dodge_example', "300", "300") }}

+
+
color-burn
+
+

최종 색은 배경색을 반전한 후 전경색으로 나누고, 다시 반전한 결과입니다.
+ 하얀 전경색은 아무런 변화도 주지 않습니다. 전경색이 배경색의 역인 경우 결과는 검은색입니다.
+ multiply와 유사하지만, 전경색의 밝기가 배경색의 역과 동일하기만 해도 검은색을 반환합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('color-burn_example', "300", "300") }}

+
+
hard-light
+
+

전경색이 더 어두운 경우 multiply, 더 밝은 경우 screen을 적용합니다.
+ overlay와 같지만 배경과 전경을 뒤집은 것입니다.
+ 배경색에 스포트라이트를 "강렬하게" 비춘 효과와 유사합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('hard-light_example', "300", "300") }}

+
+
soft-light
+
+

hard-light와 유사하지만 더 부드럽습니다.
+ hard-light와 비슷하게 동작합니다.
+ 배경색에 스포트라이트를 산란시켜 비춘 효과와 유사합니다.

+ +
+ +
+ +

{{ EmbedLiveSample('soft-light_example', "300", "300") }}

+
+
difference
+
+

최종 색은 두 색상 중 더 어두운 색을 밝은 색에서 뺀 결과입니다.
+ 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.

+ +
+ +
+ +

{{ EmbedLiveSample('difference_example', "300", "300") }}

+
+
exclusion
+
+

difference와 유사하지만 더 적은 대비를 가진 색을 반환합니다.
+ difference와 마찬가지로 검은 레이어는 아무런 변화도 주지 않고, 흰 레이어로는 다른 레이어의 색을 반전한 효과를 냅니다.

+ +
+ +
+ +

{{ EmbedLiveSample('exclusion_example', "300", "300") }}

+
+
hue
+
+

최종 색은 전경색의 색조를 가지며 배경색의 채도와 밝기를 가집니다.

+ +
+ +
+ +

{{ EmbedLiveSample('hue_example', "300", "300") }}

+
+
saturation
+
+

최종 색은 전경색의 채도를 가지며 배경색의 색조와 밝기를 가집니다.
+ 색조 없는 순수한 회색 배경으로는 아무런 효과도 없습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('saturation_example', "300", "300") }}

+
+
color
+
+

최종 색은 전경색의 색조와 채도를 가지며 배경색의 밝기를 가집니다.
+ 회색조를 유지하므로 전경을 색칠할 때 사용할 수 있습니다.

+ +
+ +
+ +

{{ EmbedLiveSample('color_example', "300", "300") }}

+
+
luminosity
+
+

최종 색은 전경색의 밝기를 가지며 배경색의 색조와 채도를 가집니다.
+ color와 동일하지만 배경과 전경을 뒤집은 것입니다.

+ +
+ +
+ +

{{ EmbedLiveSample('luminosity_example', "300", "300") }}

+
+
+ +

혼합 모드의 보간

+ +

혼합 모드는 보간 대상이 아니며 모든 변경점은 즉시 발생합니다.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}{{ Spec2('Compositing') }}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.blend-mode")}}

+ +

같이 보기

+ +
    +
  • <blend-mode>를 사용하는 속성: {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}}
    • +
+ +

각각의 혼합 모드에 대한 설명을 다루는 외부 웹 페이지:

+ + diff --git a/files/ko/web/css/border-bottom-color/index.html b/files/ko/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..eddf531cdc --- /dev/null +++ b/files/ko/web/css/border-bottom-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-bottom-color +--- +
{{CSSRef}}
+ +

border-bottom-color CSS 속성은 요소의 아래쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-bottom")}} 단축 속성으로도 지정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-color.html")}}
+ + + +

구문

+ +
/* <color> 값 */
+border-bottom-color: red;
+border-bottom-color: #ffbb00;
+border-bottom-color: rgb(255, 0, 0);
+border-bottom-color: hsla(100%, 50%, 25%, 0.75);
+border-bottom-color: currentColor;
+border-bottom-color: transparent;
+
+/* 전역 값 */
+border-bottom-color: inherit;
+border-bottom-color: initial;
+border-bottom-color: unset;
+
+ +

border-bottom-color 속성은 하나의 값을 사용해 지정합니다.

+ +

값

+ +
+
{{cssxref("<color>")}}
+
아래쪽 테두리의 색상.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리를 가진 간단한 상자

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-bottom-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

결과

+ +

{{EmbedLiveSample('테두리를_가진_간단한_상자')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom-color', 'border-bottom-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-bottom-color")}}

+ +

같이 보기

+ +
    +
  • 테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}.
    • +
  • 다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-left-color")}}.
    • +
  • 아래쪽 테두리 관련 CSS 속성: {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-width")}}.
    • +
diff --git a/files/ko/web/css/border-bottom-style/index.html b/files/ko/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..7cbdb4d17a --- /dev/null +++ b/files/ko/web/css/border-bottom-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-bottom-style +--- +
{{CSSRef}}
+ +

border-bottom-style CSS 속성은 요소 테두리의 아래쪽 스타일을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-style.html")}}
+ + + +
참고: 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.
+ +

구문

+ +
/* 키워드 값 */
+border-bottom-style: none;
+border-bottom-style: hidden;
+border-bottom-style: dotted;
+border-bottom-style: dashed;
+border-bottom-style: solid;
+border-bottom-style: double;
+border-bottom-style: groove;
+border-bottom-style: ridge;
+border-bottom-style: inset;
+border-bottom-style: outset;
+
+/* 전역 값 */
+border-bottom-style: inherit;
+border-bottom-style: initial;
+border-bottom-style: unset;
+
+ +

border-bottom-style 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-bottom-style example classes */
+.b1 {border-bottom-style: none;}
+.b2 {border-bottom-style: hidden;}
+.b3 {border-bottom-style: dotted;}
+.b4 {border-bottom-style: dashed;}
+.b5 {border-bottom-style: solid;}
+.b6 {border-bottom-style: double;}
+.b7 {border-bottom-style: groove;}
+.b8 {border-bottom-style: ridge;}
+.b9 {border-bottom-style: inset;}
+.b10 {border-bottom-style: outset;}
+ +

결과

+ +

{{EmbedLiveSample('예제', 300, 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-bottom-style')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-bottom-style")}}

+ +

같이 보기

+ +
    +
  • 테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.
    • +
  • 아래쪽 테두리 관련 CSS 속성: {{cssxref("border-bottom")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-bottom-width")}}.
    • +
diff --git a/files/ko/web/css/border-bottom-width/index.html b/files/ko/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..eaf386b9a1 --- /dev/null +++ b/files/ko/web/css/border-bottom-width/index.html @@ -0,0 +1,150 @@ +--- +title: border-bottom-width +slug: Web/CSS/border-bottom-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-bottom-width +--- +
{{CSSRef}}
+ +

CSS border-bottom-width 속성은 요소의 아래 테두리 너비를 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom-width.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+border-bottom-width: thin;
+border-bottom-width: medium;
+border-bottom-width: thick;
+
+/* <length> 값 */
+border-bottom-width: 10em;
+border-bottom-width: 3vmax;
+border-bottom-width: 6px;
+
+/* 전역 값 */
+border-bottom-width: inherit;
+border-bottom-width: initial;
+border-bottom-width: unset;
+
+ +

값

+ +
+
<line-width>
+
테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + + + + + + + + + + + + + + + + + + +
thin +
+ 		얇은 테두리
medium +
+ 		중간 테두리
thick +
+ 		굵은 테두리
+ +
+

참고: 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.

+
+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

아래 테두리의 너비 비교

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-bottom-width: thick;
+}
+div:nth-child(2) {
+  border-bottom-width: 2em;
+}
+ +

결과

+ +

{{EmbedLiveSample('아래_테두리의_너비_비교', '100%')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#border-left-width', 'border-bottom-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-bottom-width")}}

+ +

같이 보기

+ +
    +
  • 테두리 너비 관련 CSS 속성: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.
    • +
  • 아래 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}}, and {{Cssxref("border-bottom-color")}}.
    • +
diff --git a/files/ko/web/css/border-bottom/index.html b/files/ko/web/css/border-bottom/index.html new file mode 100644 index 0000000000..fc203bb67b --- /dev/null +++ b/files/ko/web/css/border-bottom/index.html @@ -0,0 +1,109 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-bottom +--- +
{{CSSRef}}
+ +

border-bottom CSS 단축 속성은 요소의 아래쪽 테두리를 설정합니다. {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-bottom-color")}}의 값을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+ + + +

다른 단축 속성과 마찬가지로, border-bottom는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

+ +
border-bottom-style: dotted;
+border-bottom: thick green;
+
+ +
border-bottom-style: dotted;
+border-bottom: none thick green;
+
+ +

따라서 border-bottom보다 먼저 지정한 {{cssxref("border-bottom-style")}}의 값은 무시됩니다. {{cssxref("border-bottom-style")}}의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

+ +

구문

+ +
border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed green;
+
+ +

border-bottom은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

+ +

값

+ +
+
<br-width>
+
{{cssxref("border-bottom-width")}}.
+
<br-style>
+
{{cssxref("border-bottom-style")}}.
+
{{cssxref("<color>")}}
+
{{cssxref("border-bottom-color")}}.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
<div>
+  아래쪽 테두리를 가진 요소입니다.
+</div>
+ +
div {
+  border-bottom: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-bottom', 'border-bottom')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-bottom")}}

diff --git a/files/ko/web/css/border-collapse/index.html b/files/ko/web/css/border-collapse/index.html new file mode 100644 index 0000000000..8f024cf916 --- /dev/null +++ b/files/ko/web/css/border-collapse/index.html @@ -0,0 +1,148 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Borders + - CSS Property + - CSS Tables + - Reference +translation_of: Web/CSS/border-collapse +--- +
{{CSSRef}}
+ +

border-collapse CSS 속성은 표 테두리(border)가 분리(separated) 또는 상쇄(collapsed)될 지를 결정합니다. 분리 모델에서는, 인접한 셀은 각각 자신의 고유(distinct) 테두리가 있습니다. 상쇄 모델에서는, 인접한 표 셀은 테두리를 공유합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+ + + +

분리(separated) 모델은 HTML 표 테두리 전통 모델입니다. 인접 셀은 각각 자신의 고유 테두리가 있습니다. 그 사이의 간격은 {{ Cssxref("border-spacing") }} 속성에 의해 주어집니다.

+ +

상쇄(collapsed) 테두리 모델에서는, 인접 표 셀은 테두리를 공유합니다. 그 모델에서는, inset의 {{ Cssxref("border-style") }} 값은 groove처럼, outset은 ridge처럼 행동합니다.

+ +

구문

+ +
/* Keyword values */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Global values */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+ +

값

+ +
+
separate
+
분리된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다. 기본값입니다.
+
collapse
+
상쇄된 테두리 표 렌더링 모델의 사용을 요청하는 키워드입니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

브라우저 엔진의 다색 표

+ +

HTML

+ +
<table class="separate">
+    <caption><code>border-collapse: separate</code></caption>
+    <tbody>
+        <tr><th>Browser</th> <th>Layout Engine</th>
+        </tr>
+        <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
+        </tr>
+        <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
+        </tr>
+        <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
+        </tr>
+        <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
+        </tr>
+        <tr><td class="op">Opera</td> <td class="bk">Blink</td>
+        </tr>
+    </tbody>
+</table>
+<table class="collapse">
+    <caption><code>border-collapse: collapse</code></caption>
+    <tbody>
+        <tr><th>Browser</th> <th>Layout Engine</th>
+        </tr>
+        <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td>
+        </tr>
+        <tr><td class="ie">Internet Explorer</td> <td class="tr">Trident</td>
+        </tr>
+        <tr><td class="sa">Safari</td> <td class="wk">Webkit</td>
+        </tr>
+        <tr><td class="ch">Chrome</td> <td class="bk">Blink</td>
+        </tr>
+        <tr><td class="op">Opera</td> <td class="bk">Blink</td>
+        </tr>
+    </tbody>
+</table>
+ +

CSS

+ +
.collapse {
+    border-collapse: collapse;
+}
+.separate {
+    border-collapse: separate;
+}
+table {
+    display: inline-table;
+    margin: 1em;
+    border: dashed 6px;
+    border-width: 6px;
+}
+table th, table td {
+    border: solid 3px;
+}
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ie { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

결과

+ +

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}초기 정의
+ +

브라우저 호환성

+ +

{{Compat("css.properties.border-collapse")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("border-spacing")}}, {{cssxref("border-style")}}
    • +
  • The border-collapse property alters the appearance of the {{htmlelement("table")}} HTML element.
    • +
diff --git a/files/ko/web/css/border-color/index.html b/files/ko/web/css/border-color/index.html new file mode 100644 index 0000000000..4d5ab51a4c --- /dev/null +++ b/files/ko/web/css/border-color/index.html @@ -0,0 +1,184 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-color +--- +
{{CSSRef}}
+ +

border-color CSS 단축 속성은 모든 면의 테두리 색상을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-color.html")}}
+ + + +

각 면 테두리의 색상은 {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}를 사용해 정할 수 있습니다. 아니면 쓰기 방향에 따라 달라지는 속성인 {{cssxref("border-block-start-color")}}, {{cssxref("border-block-end-color")}}, {{cssxref("border-inline-start-color")}}, {{cssxref("border-inline-end-color")}}을 사용할 수도 있습니다.

+ +

테두리 색상에 대해 더 알아보려면 CSS로 HTML 요소에 색 입히기 문서를 참고하세요.

+ +

구문

+ +
/* <color> 값 */
+border-color: red;
+
+/* 세로방향 | 가로방향 */
+border-color: red #f015ca;
+
+/* 위 | 가로방향 | 아래 */
+border-color: red rgb(240,30,50,.7) green;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-color: red yellow green blue;
+
+/* 전역 값 */
+border-color: inherit;
+border-color: initial;
+border-color: unset;
+
+ +

border-color 속성은 한 개에서 네 개의 값을 사용해서 지정할 수 있습니다.

+ +
    +
  • 한 개의 값을 사용하면 모든 네 면에 동일한 색상을 적용합니다.
    • +
  • 두 개의 값을 사용하면 첫 번째 값이 위아래, 두 번째 값이 좌우의 색상을 맡습니다.
    • +
  • 세 개의 값을 사용하면 첫 번째 값이 위, 두 번째 값이 좌우, 세 번째 값이 아래의 색상을 맡습니다.
    • +
  • 네 개의 값을 사용하면 각각 순서대로 위, 오른쪽, 아래, 왼쪽(시계방향) 순서로 색상을 적용합니다.
    • +
+ +

값

+ +
+
{{cssxref("<color>")}}
+
테두리의 색상.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

border-color의 모든 사용법

+ +

HTML

+ +
<div id="justone">
+  <p><code>border-color: red;</code>는 아래와 같습니다.</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: red;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="horzvert">
+  <p><code>border-color: gold red;</code>는 아래와 같습니다.</p>
+  <ul><li><code>border-top-color: gold;</code></li>
+    <li><code>border-right-color: red;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: red;</code></li>
+  </ul>
+</div>
+<div id="topvertbott">
+  <p><code>border-color: red cyan gold;</code>는 아래와 같습니다.</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: gold;</code></li>
+    <li><code>border-left-color: cyan;</code></li>
+  </ul>
+</div>
+<div id="trbl">
+  <p><code>border-color: red cyan black gold;</code>는 아래와 같습니다.</p>
+  <ul><li><code>border-top-color: red;</code></li>
+    <li><code>border-right-color: cyan;</code></li>
+    <li><code>border-bottom-color: black;</code></li>
+    <li><code>border-left-color: gold;</code></li>
+  </ul>
+</div>
+
+ +

CSS

+ +
#justone {
+  border-color: red;
+}
+
+#horzvert {
+  border-color: gold red;
+}
+
+#topvertbott {
+  border-color: red cyan gold;
+}
+
+#trbl {
+  border-color: red cyan black gold;
+}
+
+/* Set width and style for all divs */
+div {
+  border: solid 0.3em;
+  width: auto;
+  margin: 0.5em;
+  padding: 0.5em;
+}
+
+ul {
+  margin: 0;
+  list-style: none;
+}
+
+ +

결과

+ +

{{EmbedLiveSample('border-color의_모든_사용법', 600, 300)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-color', 'border-color')}}{{Spec2('CSS3 Backgrounds')}}The transparent keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.
{{SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color')}}{{Spec2('CSS2.1')}}The property is now a shorthand property.
{{SpecName('CSS1', '#border-color', 'border-color')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-color")}}

+ +

같이 보기

+ +
    +
  • 테두리 색상 관련 CSS 속성: {{Cssxref("border")}}, {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}
    • +
  • 다른 테두리 관련 CSS 속성: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}
    • +
  • {{cssxref("<color>")}} 자료형
    • +
  • 다른 색상 관련 속성: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}
    • +
  • CSS로 HTML 요소에 색 입히기
    • +
diff --git a/files/ko/web/css/border-image-outset/index.html b/files/ko/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..ee670a5ba8 --- /dev/null +++ b/files/ko/web/css/border-image-outset/index.html @@ -0,0 +1,113 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef}}
+ +

border-image-outset CSS 속성은 요소의 테두리 상자와 테두리 이미지의 거리를 설정합니다.

+ +

border-image-outset으로 인해 요소 바깥에 그려지는 테두리로는 스크롤이 생기지 않으며 마우스 이벤트를 잡아낼 수도 없습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image-outset.html")}}
+ + + +

구문

+ +
/* <length> 값 */
+border-image-outset: 1rem;
+
+/* <number> 값 */
+border-image-outset: 1.5;
+
+/* 세로방향 | 가로방향 */
+border-image-outset: 1 1.2;
+
+/* 위 | 가로방향 | 아래 */
+border-image-outset: 30px 2 45px;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-outset: 7px 12px 14px 5px;
+
+/* 전역 값 */
+border-image-outset: inherit;
+border-image-outset: initial;
+border-image-outset: unset;
+
+ +

border-image-outset 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}나 {{cssxref("<number>")}}입니다. 음수는 유효하지 않습니다.

+ +
    +
  • 한 개의 값은 모든 네 면의 거리를 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 거리를 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 거리를 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 거리를 지정합니다. (시계방향)
    • +
+ +

값

+ +
+
{{cssxref("<length>")}}
+
테두리 거리의 크기로 고정값 사용.
+
{{cssxref("<number>")}}
+
테두리 거리의 크기로 {{cssxref("border-width")}}의 배수 사용.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<div id="outset">밖으로 나간 테두리를 가지고 있어요!</div>
+
+ +

CSS

+ +
#outset {
+  width: 10rem;
+  background: #cef;
+  border: 1.4rem solid;
+  border-image: radial-gradient(#ff2, #55f) 40;
+  border-image-outset: 1.5;  /* = 1.5 * 1.4rem = 2.1rem */
+  margin: 2.1rem;
+}
+ +

결과

+ +

{{EmbedLiveSample("예제", "auto", 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image-outset")}}

diff --git a/files/ko/web/css/border-image-repeat/index.html b/files/ko/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..ddca0a7c73 --- /dev/null +++ b/files/ko/web/css/border-image-repeat/index.html @@ -0,0 +1,125 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

border-image-repeat CSS 속성은 원본 이미지의 모서리 영역을 요소의 테두리 이미지 크기에 맞춰 조절할 때 사용할 방법을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image-repeat.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+border-image-repeat: stretch;
+border-image-repeat: repeat;
+border-image-repeat: round;
+border-image-repeat: space;
+
+/* 세로방향 | 가로방향 */
+border-image-repeat: round stretch;
+
+/* 전역 값 */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

border-image-repeat 속성은 한 개 또는 두 개의 값을 사용해 지정할 수 있습니다.

+ +
    +
  • 한 개의 값을 지정하면 모든 네 면이 같은 방식을 사용합니다.
    • +
  • 두 개의 값을 지정하면, 첫 번째 값은 위와 아래, 두 번째 값은 왼쪽과 오른쪽 면의 방식을 지정합니다.
    • +
+ +

값

+ +
+
stretch
+
원본 이미지의 모서리 영역을 늘리거나 줄여 간격을 채웁니다.
+
repeat
+
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 마지막 이미지는 잘릴 수 있습니다.
+
round
+
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 늘어나거나 줄어들 수 있습니다.
+
space
+
원본 이미지의 모서리 영역을 타일처럼 반복해 간격을 채웁니다. 크기가 맞지 않으면 각 타일에 균등하게 공백을 배치합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

CSS

+ +
#bordered {
+  width: 12rem;
+  margin-bottom: 1rem;
+  padding: 1rem;
+  border: 40px solid;
+  border-image: url("https://mdn.mozillademos.org/files/4127/border.png") 27;
+  border-image-repeat: stretch;  /* 라이브 샘플에서 바꿀 수 있습니다 */
+}
+
+ + + +

{{EmbedLiveSample("예제", "auto", 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image-repeat")}}

diff --git a/files/ko/web/css/border-image-slice/index.html b/files/ko/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..7dfb26229b --- /dev/null +++ b/files/ko/web/css/border-image-slice/index.html @@ -0,0 +1,107 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

border-image-slice CSS 속성은 {{cssxref("border-image-source")}}로 설정한 이미지를 여러 개의 영역으로 나눕니다. 이렇게 나눠진 영역이 요소의 테두리 이미지를 이룹니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image-slice.html")}}
+ + + +

이미지는 네 개의 꼭지점, 네 개의 모서리, 한 개의 중앙 총 9개의 영역으로 나눠집니다. 상하좌우 각각의 모서리에서 주어진 거리만큼 떨어진 네 개의 분할선이 영역의 크기를 결정합니다.

+ +

The nine regions defined by the border-image or border-image-slice properties

+ +

위의 도표로 구역이 어떻게 나뉘는지 확인할 수 있습니다.

+ + + +

{{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} 속성이 최종 테두리 이미지에서 각 영역의 사용 방법을 지정합니다.

+ +

구문

+ +
/* 모든 방향 */
+border-image-slice: 30%;
+
+/* 세로방향 | 가로방향 */
+border-image-slice: 10% 30%;
+
+/* 위 | 가로방향 | 아래 */
+border-image-slice: 30 30% 45;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-slice: 7 12 14 5;
+
+/* `fill` 키워드 */
+border-image-slice: 10% fill 7 12;
+
+/* 전역 값 */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

border-image-slice 속성은 한 개에서 네 개의 <number> 또는 <percentage> 값을 사용해 지정할 수 있습니다. 각각의 숫자는 네 방향 분할선의 위치를 나타냅니다. 음수 값은 유효하지 않고, 최대 크기보다 큰 값은 100%로 잘립니다.

+ +
    +
  • 한 개의 값을 지정하면, 모든 분할선의 위치가 각각의 기준 모서리에서 동일한 거리만큼 떨어진 곳으로 설정됩니다.
    • +
  • 두 개의 값을 지정하면, 첫 번째 값은 위와 아래 분할선, 두 번째 값은 왼쪽과 오른쪽 분할선의 위치를 설정합니다.
    • +
  • 세 개의 값을 지정하면, 첫 번째 값은 위, 두 번째 값은 왼쪽과 오른쪽, 세 번째 값은 아래 분할선의 위치를 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 분할선의 거리를 순서대로 지정합니다. (시계방향)
    • +
+ +

선택적으로 아무데나 fill 키워드를 추가할 수 있습니다.

+ +

값

+ +
+
{{cssxref("<number>")}}
+
모서리에서 분할선까지의 픽셀 거리(래스터 이미지), 또는 좌표 거리(벡터 이미지). 벡터 이미지에서 숫자는 원본 이미지가 아닌 요소의 크기에 상대적이므로 보통 백분율을 선호합니다.
+
{{cssxref("<percentage>")}}
+
모서리에서 분할선까지의 백분율 거리. 가로축은 원본 이미지의 너비에, 세로축은 이미지의 높이에 상대적입니다.
+
fill
+
중앙 영역을 보존하여 배경 이미지처럼 사용. 실제 {{cssxref("background")}} 속성보다 위에 그려집니다. 중앙 영역 이미지는 위와 왼쪽 모서리 영역의 크기에 맞도록 늘어납니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Initial defintion
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image-slice")}}

diff --git a/files/ko/web/css/border-image-source/index.html b/files/ko/web/css/border-image-source/index.html new file mode 100644 index 0000000000..8d35053b26 --- /dev/null +++ b/files/ko/web/css/border-image-source/index.html @@ -0,0 +1,78 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef}}
+ +

border-image-source CSS 속성은 요소의 테두리 이미지로 사용할 원본 이미지를 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image-source.html")}}
+ + + +

{{cssxref("border-image-slice")}} 속성으로 나뉜 구역을 사용해 최종 테두리 이미지를 생성합니다.

+ +

구문

+ +
/* 키워드 값 */
+border-image-source: none;
+
+/* <image> 값 */
+border-image-source: url(image.jpg);
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* 전역 값 */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

값

+ +
+
none
+
테두리 이미지를 사용하지 않습니다. {{cssxref("border-style")}}이 대신 표시됩니다.
+
{{cssxref("<image>")}}
+
테두리에 사용할 이미지 참조입니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

{{cssxref("border-image")}}에서 확인할 수 있습니다.

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image-source")}}

diff --git a/files/ko/web/css/border-image-width/index.html b/files/ko/web/css/border-image-width/index.html new file mode 100644 index 0000000000..a99e3d4bb8 --- /dev/null +++ b/files/ko/web/css/border-image-width/index.html @@ -0,0 +1,128 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

border-image-width CSS 속성은 요소 테두리 이미지의 너비를 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image-width.html")}}
+ + + +

속성의 값이 {{cssxref("border-width")}}보다 크다면 테두리 이미지는 안쪽 여백(과 콘텐츠) 영역을 침범하여 그려집니다.

+ +

구문

+ +
/* 키워드 값 */
+border-image-width: auto;
+
+/* <length> 값 */
+border-image-width: 1rem;
+
+/* <percentage> 값 */
+border-image-width: 25%;
+
+/* <number> 값 */
+border-image-width: 3;
+
+/* 세로방향 | 가로방향 */
+border-image-width: 2em 3em;
+
+/* 위 | 가로방향 | 아래 */
+border-image-width: 5% 15% 10%;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-image-width: 5% 2em 10% auto;
+
+/* 전역 값 */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

border-image-width 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 음수는 유효하지 않습니다.

+ +
    +
  • 한 개의 값은 모든 네 면의 테두리 너비를 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 너비를 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 너비를 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 너비를 지정합니다. (시계방향)
    • +
+ +

값

+ +
+
<length-percentage>
+
{{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}로 지정한 테두리 너비. 백분율 값은 왼쪽과 오른쪽 테두리에 대해선 테두리 이미지 영역의 너비, 위쪽과 아래쪽에 대해선 테두리 이미지 영역의 높이를 사용해 계산합니다.
+
<number>
+
테두리 너비로 {{cssxref("border-width")}}의 배수 사용
+
auto
+
방향과 일치하는 {{cssxref("border-image-slice")}}가 가진 원래 너비 또는 높이 사용. 이미지가 원래 크기를 가지고 있지 않으면 방향과 일치하는 border-width 크기를 사용합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

다음 예제는 아래의 가로 90픽셀, 세로 90픽셀 이미지를 사용해 테두리 이미지를 생성합니다.

+ +

+ +

원본 이미지의 각 원은 가로 30픽셀, 세로 30픽셀입니다.

+ +

HTML

+ +
<p>밤을 쉬이 봄이 무성할 릴케 듯합니다. 토끼, 써 이런 하나에 듯합니다. 이네들은 나는 패, 듯합니다.
+   나는 보고, 딴은 토끼, 이런 멀리 듯합니다. 청춘이 가을로 둘 버리었습니다. 걱정도 밤이 나는 애기
+   오는 언덕 경, 계십니다. 멀리 까닭이요, 나는 별빛이 듯합니다. 소녀들의 벌레는 걱정도 까닭이요,
+   북간도에 쓸쓸함과 오면 것은 어머님, 까닭입니다.</p>
+
+ +

CSS

+ +
p {
+  border: 20px solid;
+  border-image: url("https://mdn.mozillademos.org/files/10470/border.png") 30 round;
+  border-image-width: 16px;
+  padding: 40px;
+}
+ +

결과

+ +

{{EmbedLiveSample('예제', 200, 240)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image-width")}}

diff --git a/files/ko/web/css/border-image/index.html b/files/ko/web/css/border-image/index.html new file mode 100644 index 0000000000..e907da9062 --- /dev/null +++ b/files/ko/web/css/border-image/index.html @@ -0,0 +1,168 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-image +--- +
{{CSSRef}}
+ +

border-image CSS 속성은 요소의 주위에 이미지를 그립니다. 일반 테두리를 대체합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-image.html")}}
+ + + +

border-image는 {{cssxref("border-image-source")}}, {{cssxref("border-image-slice")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}}, {{cssxref("border-image-repeat")}}의 단축 속성입니다. 다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정됩니다.

+ +
+

참고: 테두리 이미지를 불러오는데 실패할 경우에 대비해 {{cssxref("border-style")}} 속성을 설정해야 합니다. 사실 명세에 따르면 필수로 지정해야 하지만 모든 브라우저가 그렇게 구현하지는 않았습니다.

+
+ +

구문

+ +
/* 이미지 | 슬라이스 */
+border-image: linear-gradient(red, blue) 27;
+
+/* 이미지 | 슬라이스 | 반복 */
+border-image: url("/images/border.png") 27 space;
+
+/* 이미지 | 슬라이스 | 너비 */
+border-image: linear-gradient(red, blue) 27 / 35px;
+
+/* 이미지 | 슬라이스 | 너비 | 거리 | 반복 */
+border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;
+
+ +

border-image 속성은 아래 나열한 값 중 한 개에서 다섯 개 사이를 사용해 지정할 수 있습니다.

+ +
+

참고: 만약 {{cssxref("border-image-source")}}의 계산값이 none이거나 이미지를 그릴 수 없다면 {{cssxref("border-style")}}이 대신 보여집니다.

+
+ +

값

+ +
+
<'border-image-source'>
+
원본 이미지. {{cssxref("border-image-source")}}를 참고하세요.
+
<'border-image-slice'>
+
이미지를 구역별로 나눌 때 사용할 슬라이스 크기. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-slice")}}를 참고하세요.
+
<'border-image-width'>
+
테두리 이미지 너비. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-width")}}를 참고하세요.
+
<'border-image-outset'>
+
테두리 이미지와 요소 외곽의 거리. 네 개 값까지 지정할 수 있습니다. {{cssxref("border-image-outset")}}을 참고하세요.
+
<'border-image-repeat'>
+
원본 이미지의 모서리 구역을 테두리의 크기에 맞출 때의 조정 방법. 두 개 값까지 지정할 수 있습니다. {{cssxref("border-image-repeat")}}을 참고하세요.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

비트맵

+ +

이번 예제는 요소의 테두리에 마름모 패턴을 적용합니다. 테두리 이미지의 원본은 가로 81픽셀, 세로 81픽셀의 ".png" 파일로, 8개의 마름모가 사각형의 테두리를 이루고 있습니다.

+ +

an example borderimage

+ +

HTML

+ +
<div id="bitmap">This element is surrounded by a bitmap-based border image!</div>
+
+ +

CSS

+ +

마름모 하나의 크기에 맞추기 위해, 81을 3으로 나눈 27을 슬라이스 크기로 사용하여 원본 이미지를 모서리와 테두리 구역으로 나눕니다. 테두리 이미지의 중앙을 요소 테두리의 가운데로 맞추기 위해 거리도 각 너비의 절반으로 설정합니다. 마지막으로 반복 값에 round를 지정해 모서리가 끊기거나 잘리지 않도록 설정합니다.

+ +
#bitmap {
+  width: 200px;
+  background-color: #ffa;
+  border: 36px solid orange;
+  margin: 30px;
+  padding: 10px;
+
+  border-image:
+      url("https://mdn.mozillademos.org/files/4127/border.png")  /* 원본 이미지 */
+      27 /                    /* 슬라이스 */
+      36px 28px 18px 8px /    /* 너비 */
+      18px 14px 9px 4px       /* 거리 */
+      round;                  /* 반복 */
+}
+
+ +

결과

+ +

{{EmbedLiveSample('비트맵', '100%', 200)}}

+ +

그레이디언트

+ +

HTML

+ +
<div id="gradient">그레이디언트 기반 테두리 이미지에 둘러 쌓인 요소에요!</div>
+
+ +

CSS

+ +
#gradient {
+  width: 200px;
+  border: 30px solid;
+  border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60;
+  padding: 20px;
+}
+
+ +

결과

+ +

{{EmbedLiveSample('그레이디언트')}}

+ +

접근성 고려사항

+ +

보조 기술은 테두리 이미지를 읽을 수 없습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-image")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("border")}}
    • +
  • {{cssxref("outline")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("url()")}} 함수
    • +
  • 그레이디언트 함수: {{CSSxRef("conic-gradient")}}, {{CSSxRef("linear-gradient")}}, {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}
    • +
diff --git a/files/ko/web/css/border-left-color/index.html b/files/ko/web/css/border-left-color/index.html new file mode 100644 index 0000000000..be69191773 --- /dev/null +++ b/files/ko/web/css/border-left-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-left-color +--- +
{{CSSRef}}
+ +

border-left-color CSS 속성은 요소의 왼쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-left")}} 단축 속성으로도 지정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-left-color.html")}}
+ + + +

구문

+ +
/* <color> 값 */
+border-left-color: red;
+border-left-color: #ffbb00;
+border-left-color: rgb(255, 0, 0);
+border-left-color: hsla(100%, 50%, 25%, 0.75);
+border-left-color: currentColor;
+border-left-color: transparent;
+
+/* 전역 값 */
+border-left-color: inherit;
+border-left-color: initial;
+border-left-color: unset;
+
+ +

border-left-color 속성은 하나의 값을 사용해 지정합니다.

+ +

값

+ +
+
{{cssxref("<color>")}}
+
왼쪽 테두리의 색상.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리를 가진 간단한 상자

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-left-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

결과

+ +

{{EmbedLiveSample('테두리를_가진_간단한_상자')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-left-color', 'border-left-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#propdef-border-left-color', 'border-left-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-left-color")}}

+ +

같이 보기

+ +
    +
  • 테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-left")}}, {{cssxref("border-color")}}.
    • +
  • 다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}.
    • +
  • 왼쪽 테두리 관련 CSS 속성: {{cssxref("border-left-style")}}, {{cssxref("border-left-width")}}.
    • +
diff --git a/files/ko/web/css/border-left-style/index.html b/files/ko/web/css/border-left-style/index.html new file mode 100644 index 0000000000..18bc232483 --- /dev/null +++ b/files/ko/web/css/border-left-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-left-style +--- +
{{CSSRef}}
+ +

border-left-style CSS 속성은 요소 테두리의 왼쪽 스타일을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-left-style.html")}}
+ + + +
참고: 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.
+ +

구문

+ +
/* 키워드 값 */
+border-left-style: none;
+border-left-style: hidden;
+border-left-style: dotted;
+border-left-style: dashed;
+border-left-style: solid;
+border-left-style: double;
+border-left-style: groove;
+border-left-style: ridge;
+border-left-style: inset;
+border-left-style: outset;
+
+/* 전역 값 */
+border-left-style: inherit;
+border-left-style: initial;
+border-left-style: unset;
+
+ +

border-left-style 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-left-style example classes */
+.b1 {border-left-style: none;}
+.b2 {border-left-style: hidden;}
+.b3 {border-left-style: dotted;}
+.b4 {border-left-style: dashed;}
+.b5 {border-left-style: solid;}
+.b6 {border-left-style: double;}
+.b7 {border-left-style: groove;}
+.b8 {border-left-style: ridge;}
+.b9 {border-left-style: inset;}
+.b10 {border-left-style: outset;}
+ +

결과

+ +

{{EmbedLiveSample('예제', 300, 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-left-style')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-left-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-left-style")}}

+ +

같이 보기

+ +
    +
  • 테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-style")}}.
    • +
  • 왼쪽 테두리 관련 CSS 속성: {{cssxref("border-left")}}, {{cssxref("border-left-color")}}, {{cssxref("border-left-width")}}.
    • +
diff --git a/files/ko/web/css/border-left-width/index.html b/files/ko/web/css/border-left-width/index.html new file mode 100644 index 0000000000..78687a842a --- /dev/null +++ b/files/ko/web/css/border-left-width/index.html @@ -0,0 +1,150 @@ +--- +title: border-left-width +slug: Web/CSS/border-left-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-left-width +--- +
{{CSSRef}}
+ +

CSS border-left-width 속성은 요소의 왼쪽 테두리 너비를 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-left-width.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+border-left-width: thin;
+border-left-width: medium;
+border-left-width: thick;
+
+/* <length> 값 */
+border-left-width: 10em;
+border-left-width: 3vmax;
+border-left-width: 6px;
+
+/* 전역 값 */
+border-left-width: inherit;
+border-left-width: initial;
+border-left-width: unset;
+
+ +

값

+ +
+
<line-width>
+
테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + + + + + + + + + + + + + + + + + + +
thin +
+ 		얇은 테두리
medium +
+ 		중간 테두리
thick +
+ 		굵은 테두리
+ +
+

참고: 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.

+
+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리의 너비 비교

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-left-width: thick;
+}
+div:nth-child(2) {
+  border-left-width: 2em;
+}
+ +

결과

+ +

{{EmbedLiveSample('테두리의_너비_비교', '100%')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-left-width')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-left-width')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#border-left-width', 'border-left-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-left-width")}}

+ +

같이 보기

+ +
    +
  • 테두리 너비 관련 CSS 속성: {{Cssxref("border-top-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.
    • +
  • 왼쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-left")}}, {{Cssxref("border-left-style")}}, and {{Cssxref("border-left-color")}}.
    • +
diff --git a/files/ko/web/css/border-left/index.html b/files/ko/web/css/border-left/index.html new file mode 100644 index 0000000000..cf9b0547df --- /dev/null +++ b/files/ko/web/css/border-left/index.html @@ -0,0 +1,109 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-left +--- +
{{CSSRef}}
+ +

border-left CSS 단축 속성은 요소의 왼쪽 테두리를 설정합니다. {{cssxref("border-left-width")}}, {{cssxref("border-left-style")}}, {{cssxref("border-left-color")}}의 값을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-left.html")}}
+ + + +

다른 단축 속성과 마찬가지로, border-left는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

+ +
border-left-style: dotted;
+border-left: thick green;
+
+ +
border-left-style: dotted;
+border-left: none thick green;
+
+ +

따라서 border-left보다 먼저 지정한 {{cssxref("border-left-style")}}의 값은 무시됩니다. {{cssxref("border-left-style")}}의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

+ +

구문

+ +
border-left: 1px;
+border-left: 2px dotted;
+border-left: medium dashed green;
+
+ +

border-left은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

+ +

값

+ +
+
<br-width>
+
{{cssxref("border-left-width")}}.
+
<br-style>
+
{{cssxref("border-left-style")}}.
+
{{cssxref("<color>")}}
+
{{cssxref("border-left-color")}}.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
<div>
+  왼쪽 테두리를 가진 요소입니다.
+</div>
+ +
div {
+  border-left: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-left', 'border-left')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-left-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-left', 'border-left')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-left', 'border-left')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-left")}}

diff --git a/files/ko/web/css/border-radius/index.html b/files/ko/web/css/border-radius/index.html new file mode 100644 index 0000000000..3c9c812d36 --- /dev/null +++ b/files/ko/web/css/border-radius/index.html @@ -0,0 +1,228 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-radius +--- +
{{CSSRef}}
+ +

CSS border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만듭니다. 하나의 값을 사용해 원형 꼭짓점을, 두 개의 값을 사용해 타원형 꼭짓점을 적용할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+ + + +

꼭짓점 반경은 요소의 테두리 존재 여부와는 별개로 전체 {{Cssxref("background")}}에 적용됩니다. 원형 꼭짓점으로 인해 배경이 잘리는 지점은 {{cssxref("background-clip")}} 속성이 지정합니다.

+ +

{{cssxref("border-collapse")}}의 값이 collapse인 표 요소는 border-radius 속성의 영향을 받지 않습니다.

+ +
참고: 다른 단축 속성과 마찬가지로, 각각의 하위 속성이 부모를 상속하도록 할 수는 없습니다. 즉, border-radius: 0 0 inherit inherit처럼 일부만 재정의할 수 없습니다. 대신, 원래의 본디속성을 하나씩 사용하세요.
+ +

구성 속성

+ +

border-radius는 다음 CSS 속성의 단축 속성입니다.

+ +
    +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
+ +

구문

+ +
/* The syntax of the first radius allows one to four values */
+/* Radius is set for all 4 sides */
+border-radius: 10px;
+
+/* top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5%;
+
+/* top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 2px 4px 2px;
+
+/* top-left | top-right | bottom-right | bottom-left */
+border-radius: 1px 0 3px 4px;
+
+/* The syntax of the second radius allows one to four values */
+/* (first radius values) / radius */
+border-radius: 10px 5% / 20px;
+
+/* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5% / 20px 30px;
+
+/* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (first radius values) / top-left | top-right | bottom-right | bottom-left */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Global values */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+ +

border-radius 속성은 다음 방법으로 지정할 수 있습니다.

+ +
    +
  • 한 개에서 네 개의 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}} 값은 꼭짓점의 단일 반지름을 설정합니다.
    • +
  • 선택적으로 "/" 이후에 한 개에서 네 개의 <length> 또는 <percentage> 값을 사용해 추가 반지름을 설정해서 타원형 꼭짓점을 만들 수 있습니다.
    • +
+ +

값

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
radiusall-corner.png테두리의 각 꼭짓점 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 한 개 값 구문에서만 사용합니다.
top-left-and-bottom-righttop-left-bottom-right.png왼쪽 위와 오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 두 개 값 구문에서만 사용합니다.
top-right-and-bottom-lefttop-right-bottom-left.png오른쪽 위와 왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 두 개 또는 세 개 값 구문에서만 사용합니다.
top-lefttop-left.png왼쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 세 개 또는 네 개 값 구문에서만 사용합니다.
top-righttop-right.png오른쪽 위 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.
bottom-rightbottom-rigth.png오른쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.
bottom-leftbottom-left.png왼쪽 아래 꼭짓점의 반지름을 나타내는 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}. 네 개 값 구문에서만 사용합니다.
+ +
+
{{cssxref("<length>")}}
+
길이 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 음의 값은 유효하지 않습니다.
+
{{cssxref("<percentage>")}}
+
백분율 값을 사용해 원의 반지름 또는 타원의 짧은반지름과 긴반지름을 지정합니다. 가로축 값은 요소 박스의 너비에 대한 백분율이고, 세로축 값은 박스의 높이에 대한 백분율입니다. 음의 값은 유효하지 않습니다.
+
+ +

예를 들어...

+ +
border-radius: 1em/5em;
+
+/* 아래와 같음 */
+border-top-left-radius:     1em 5em;
+border-top-right-radius:    1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius:  1em 5em;
+
+ +
border-radius: 4px 3px 6px / 2px 4px;
+
+/* 아래와 같음 */
+border-top-left-radius:     4px 2px;
+border-top-right-radius:    3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius:  3px 4px;
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +
  border: solid 10px;
+  /* 테두리가 'D'형태가 됨 */
+  border-radius: 10px 40px 40px 10px;
+
+ +
  border: groove 1em red;
+  border-radius: 2em;
+
+ +
  background: gold;
+  border: ridge gold;
+  border-radius: 13em/3em;
+
+ +
  border: none;
+  border-radius: 40px 10px;
+
+ +
  border: none;
+  border-radius: 50%;
+
+ +
  border: dotted;
+  border-width: 10px 4px;
+  border-radius: 10px 40px;
+
+ +
  border: dashed;
+  border-width: 2px 4px;
+  border-radius: 40px;
+
+ +

라이브 샘플

+ +
    +
  1. http://jsfiddle.net/Tripad/qnGKj/2/
    2. +
  2. http://jsfiddle.net/Tripad/qnGKj/3/
    3. +
  3. http://jsfiddle.net/Tripad/qnGKj/4/
    4. +
  4. http://jsfiddle.net/Tripad/qnGKj/5/
    5. +
  5. http://jsfiddle.net/Tripad/qnGKj/6/
    6. +
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}{{ Spec2('CSS3 Backgrounds') }}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-radius")}}

+ +

같이 보기

+ +
    +
  • 꼭짓점 반경 관련 CSS 속성: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}
    • +
diff --git a/files/ko/web/css/border-right-color/index.html b/files/ko/web/css/border-right-color/index.html new file mode 100644 index 0000000000..c6292d566b --- /dev/null +++ b/files/ko/web/css/border-right-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-right-color +--- +
{{CSSRef}}
+ +

border-right-color CSS 속성은 요소의 오른쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-right")}} 단축 속성으로도 지정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-right-color.html")}}
+ + + +

구문

+ +
/* <color> 값 */
+border-right-color: red;
+border-right-color: #ffbb00;
+border-right-color: rgb(255, 0, 0);
+border-right-color: hsla(100%, 50%, 25%, 0.75);
+border-right-color: currentColor;
+border-right-color: transparent;
+
+/* 전역 값 */
+border-right-color: inherit;
+border-right-color: initial;
+border-right-color: unset;
+
+ +

border-right-color 속성은 하나의 값을 사용해 지정합니다.

+ +

값

+ +
+
{{cssxref("<color>")}}
+
오른쪽 테두리의 색상.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리를 가진 간단한 상자

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-right-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

결과

+ +

{{EmbedLiveSample('테두리를_가진_간단한_상자')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-right-color', 'border-right-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#propdef-border-right-color', 'border-right-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-right-color")}}

+ +

같이 보기

+ +
    +
  • 테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-right")}}, {{cssxref("border-color")}}.
    • +
  • 다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-top-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}.
    • +
  • 오른쪽 테두리 관련 CSS 속성: {{cssxref("border-right-style")}}, {{cssxref("border-right-width")}}.
    • +
diff --git a/files/ko/web/css/border-right-style/index.html b/files/ko/web/css/border-right-style/index.html new file mode 100644 index 0000000000..291595d8d1 --- /dev/null +++ b/files/ko/web/css/border-right-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-right-style +--- +
{{CSSRef}}
+ +

border-right-style CSS 속성은 요소 테두리의 오른쪽 스타일을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-right-style.html")}}
+ + + +
참고: 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.
+ +

구문

+ +
/* 키워드 값 */
+border-right-style: none;
+border-right-style: hidden;
+border-right-style: dotted;
+border-right-style: dashed;
+border-right-style: solid;
+border-right-style: double;
+border-right-style: groove;
+border-right-style: ridge;
+border-right-style: inset;
+border-right-style: outset;
+
+/* 전역 값 */
+border-right-style: inherit;
+border-right-style: initial;
+border-right-style: unset;
+
+ +

border-right-style 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-right-style example classes */
+.b1 {border-right-style: none;}
+.b2 {border-right-style: hidden;}
+.b3 {border-right-style: dotted;}
+.b4 {border-right-style: dashed;}
+.b5 {border-right-style: solid;}
+.b6 {border-right-style: double;}
+.b7 {border-right-style: groove;}
+.b8 {border-right-style: ridge;}
+.b9 {border-right-style: inset;}
+.b10 {border-right-style: outset;}
+ +

결과

+ +

{{EmbedLiveSample('예제', 300, 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-right-style')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-right-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-right-style")}}

+ +

같이 보기

+ +
    +
  • 테두리 스타일 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.
    • +
  • 오른쪽 테두리 관련 CSS 속성: {{cssxref("border-right")}}, {{cssxref("border-right-color")}}, {{cssxref("border-right-width")}}.
    • +
diff --git a/files/ko/web/css/border-right-width/index.html b/files/ko/web/css/border-right-width/index.html new file mode 100644 index 0000000000..60c3a4e564 --- /dev/null +++ b/files/ko/web/css/border-right-width/index.html @@ -0,0 +1,150 @@ +--- +title: border-right-width +slug: Web/CSS/border-right-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-right-width +--- +
{{CSSRef}}
+ +

CSS border-right-width 속성은 요소의 오른쪽 테두리 너비를 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-right-width.html")}}
+ + + +

구문

+ +
/* 키워드 값*/
+border-right-width: thin;
+border-right-width: medium;
+border-right-width: thick;
+
+/* <length> 값 */
+border-right-width: 10em;
+border-right-width: 3vmax;
+border-right-width: 6px;
+
+/* 전역 값 */
+border-right-width: inherit;
+border-right-width: initial;
+border-right-width: unset;
+
+ +

값

+ +
+
<line-width>
+
테두리의 너비입니다.0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + + + + + + + + + + + + + + + + + + +
thin +
+ 		얇은 테두리
medium +
+ 		중간 테두리
thick +
+ 		굵은 테두리
+ +
+

참고: 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.

+
+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리의 너비 비교

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-right-width: thick;
+}
+div:nth-child(2) {
+  border-right-width: 2em;
+}
+ +

결과

+ +

{{EmbedLiveSample('테두리의_너비_비교', '100%')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-right-width')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-right-width')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#border-left-width', 'border-right-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-right-width")}}

+ +

같이 보기

+ +
    +
  • 테두리 너비 관련 CSS 속성: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-top-width")}}, and {{Cssxref("border-width")}}.
    • +
  • 오른쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-right")}}, {{Cssxref("border-right-style")}}, and {{Cssxref("border-right-color")}}.
    • +
diff --git a/files/ko/web/css/border-right/index.html b/files/ko/web/css/border-right/index.html new file mode 100644 index 0000000000..557dbeba89 --- /dev/null +++ b/files/ko/web/css/border-right/index.html @@ -0,0 +1,109 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-right +--- +
{{CSSRef}}
+ +

border-right CSS 단축 속성은 요소의 오른쪽 테두리를 설정합니다. {{cssxref("border-right-width")}}, {{cssxref("border-right-style")}}, {{cssxref("border-right-color")}}의 값을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-right.html")}}
+ + + +

다른 단축 속성과 마찬가지로, border-right는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

+ +
border-right-style: dotted;
+border-right: thick green;
+
+ +
border-right-style: dotted;
+border-right: none thick green;
+
+ +

따라서 border-right보다 먼저 지정한 {{cssxref("border-right-style")}}의 값은 무시됩니다. {{cssxref("border-right-style")}}의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

+ +

구문

+ +
border-right: 1px;
+border-right: 2px dotted;
+border-right: medium dashed green;
+
+ +

border-right은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

+ +

값

+ +
+
<br-width>
+
{{cssxref("border-right-width")}}.
+
<br-style>
+
{{cssxref("border-right-style")}}.
+
{{cssxref("<color>")}}
+
{{cssxref("border-right-color")}}.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
<div>
+  오른쪽 테두리를 가진 요소입니다.
+</div>
+ +
div {
+  border-right: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-right', 'border-right')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-right-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-right', 'border-right')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-right', 'border-right')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-right")}}

diff --git a/files/ko/web/css/border-spacing/index.html b/files/ko/web/css/border-spacing/index.html new file mode 100644 index 0000000000..23e0e42018 --- /dev/null +++ b/files/ko/web/css/border-spacing/index.html @@ -0,0 +1,131 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS Property + - CSS Tables + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

CSS border-spacing 속성은 인접한 표 칸의 테두리 간격을 지정합니다. {{cssxref("border-collapse")}}가 separate여야 적용됩니다.

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

border-spacing 값은 표 전체의 테두리에도 적용되므로, 표 테두리와 첫 번째 및 마지막 행/열에 속하는 칸 사이 거리는 (가로/세로) border-spacing 값과 표에 적용한 (상/우/하/좌) {{cssxref("padding")}} 값의 합이 됩니다.

+ +
+

참고: border-spacing 속성은 {{htmlelement("table")}}에서 이제 사용하지 않는 cellspacing 특성에 대응하지만, 추가로 두 번째 값을 지정해 가로와 세로 값을 각각 설정할 수 있다는 차이점이 있습니다.

+
+ +

구문

+ +
/* <length> */
+border-spacing: 2px;
+
+/* 가로 <length> | 세로 <length> */
+border-spacing: 1cm 2em;
+
+/* 전역 값 */
+border-spacing: inherit;
+border-spacing: initial;
+border-spacing: unset;
+ +

border-spacing 값은 하나 또는 두 개의 값을 사용해 지정합니다.

+ +
    +
  • 한 개의 <length> 값을 지정하면 칸 사이의 가로와 세로 두 간격 모두 설정합니다.
    • +
  • 두 개의 <length> 값을 지정하면, 첫 번째 값은 칸 사이의 가로 간격(각 열의 간격), 두 번째 값은 칸 사이의 세로 간격(각 행의 간격)을 설정합니다.
    • +
+ +

값

+ +
+
{{cssxref("<length>")}}
+
간격의 크기로 지정할 길이입니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

칸 간격과 안쪽 여백

+ +

다음 예제는 칸 사이에 세로 간격 0.5em과 가로 간격 1em을 배치합니다. 표의 테두리를 따라가면서, padding 값이 border-spacing과 어떻게 작용하는지 살펴보세요.

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+ +

CSS

+ +
table {
+  border-spacing: 1em 0.5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+ +

결과

+ +

{{ EmbedLiveSample('예제', 400, 200) }}

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}초기 정의
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.border-spacing")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("border-collapse")}}, {{cssxref("border-style")}}
    • +
  • border-spacing 속성은 {{htmlelement("table")}} HTML 요소의 외관을 수정합니다.
    • +
diff --git a/files/ko/web/css/border-style/index.html b/files/ko/web/css/border-style/index.html new file mode 100644 index 0000000000..70bf9b180d --- /dev/null +++ b/files/ko/web/css/border-style/index.html @@ -0,0 +1,241 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

border-style CSS 단축 속성은 요소 테두리 네 면의 스타일을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-style.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+border-style: none;
+border-style: hidden;
+border-style: dotted;
+border-style: dashed;
+border-style: solid;
+border-style: double;
+border-style: groove;
+border-style: ridge;
+border-style: inset;
+border-style: outset;
+
+/* 세로방향 | 가로방향 */
+border-style: dotted solid;
+
+/* 위 | 가로방향 | 아래 */
+border-style: hidden double dashed;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-style: none solid dotted dashed;
+
+/* 전역 값 */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

border-style 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.

+ +
    +
  • 한 개의 값은 모든 네 면의 테두리 스타일을 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 스타일을 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 스타일을 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 스타일을 지정합니다. (시계방향)
    • +
+ +

각각의 값은 아래 목록 중 하나로 지정합니다.

+ +

값

+ +
+
<line-style>
+
테두리의 스타일을 설명합니다. 다음 표의 값을 사용할 수 있습니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
 
+ 		hidden 키워드와 마찬가지로 테두리를 표시하지 않습니다. {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 0이 됩니다. 표에서, 칸의 테두리 상쇄 시 none은 제일 낮은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가진다면 테두리를 그립니다.
hidden +
 
+ 		none 키워드와 마찬가지로 테두리를 표시하지 않습니다. Unless a {{cssxref("background-image")}}를 지정하지 않았으면 해당 면의 {{cssxref("border-width")}} 계산값은 지정값을 무시하고 0이 됩니다. 표에서, 칸의 테두리 상쇄 시 hidden은 제일 높은 우선순위를 가집니다. 따라서 주변 칸이 테두리를 가지더라도 그리지 않습니다.
dotted +
 
+ 		테두리를 둥근 점 여러개로 그립니다. 점 간격은 명세에서 지정하지 않으며 구현마다 다릅니다. 점의 반지름은 해당 면 {{cssxref("border-width")}}의 절반입니다.
dashed +
 
+ 		테두리를 직사각형 여러개로 그립니다. 사각형의 크기와 길이는 명세에서 지정하지 않으며 구현마다 다릅니다.
solid +
 
+ 		테두리를 하나의 직선으로 그립니다.
double +
 
+ 		테두리를 두 개의 평행한 직선으로 그립니다.
groove +
 
+ 		테두리가 파인 것처럼 그립니다.ridge의 반대입니다.
ridge +
 
+ 		테두리가 튀어나온 것처럼 그립니다. groove의 반대입니다.
inset +
 
+ 		요소가 파인 것처럼 테두리를 그립니다.outset의 반대입니다. {{cssxref("border-collapse")}}가 collapsed인 칸에서는 groove와 동일합니다.
outset +
 
+ 		+

요소가 튀어나온 것처럼 그립니다. inset의 반대입니다. {{cssxref("border-collapse")}}가 collapsed인 칸에서는 ridge와 동일합니다.

+
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

속성 값의 예시 표

+ +

가능한 모든 값을 나열한 표입니다.

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* 테이블 스타일 */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+tr, td {
+  padding: 2px;
+}
+
+/* border-style 예제 클래스 */
+.b1 {border-style:none;}
+.b2 {border-style:hidden;}
+.b3 {border-style:dotted;}
+.b4 {border-style:dashed;}
+.b5 {border-style:solid;}
+.b6 {border-style:double;}
+.b7 {border-style:groove;}
+.b8 {border-style:ridge;}
+.b9 {border-style:inset;}
+.b10 {border-style:outset;}
+ +

결과

+ +

{{EmbedLiveSample('속성_값의_예시_표', 300, 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}No change.
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}Adds hidden keyword value.
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-style")}}

+ +

같이 보기

+ +
    +
  • 테두리 관련 CSS 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-width")}}, {{Cssxref("border-color")}}, {{Cssxref("border-radius")}}
    • +
diff --git a/files/ko/web/css/border-top-color/index.html b/files/ko/web/css/border-top-color/index.html new file mode 100644 index 0000000000..9212f447e2 --- /dev/null +++ b/files/ko/web/css/border-top-color/index.html @@ -0,0 +1,114 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-top-color +--- +
{{CSSRef}}
+ +

border-top-color CSS 속성은 요소의 위쪽 테두리 색상을 지정합니다. {{cssxref("border-color")}} 또는 {{cssxref("border-top")}} 단축 속성으로도 지정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/border-top-color.html")}}
+ + + +

구문

+ +
/* <color> 값 */
+border-top-color: red;
+border-top-color: #ffbb00;
+border-top-color: rgb(255, 0, 0);
+border-top-color: hsla(100%, 50%, 25%, 0.75);
+border-top-color: currentColor;
+border-top-color: transparent;
+
+/* 전역 값 */
+border-top-color: inherit;
+border-top-color: initial;
+border-top-color: unset;
+
+ +

border-top-color 속성은 하나의 값을 사용해 지정합니다.

+ +

값

+ +
+
{{cssxref("<color>")}}
+
위쪽 테두리의 색상.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리를 가진 간단한 상자

+ +

HTML

+ +
<div class="mybox">
+  <p>This is a box with a border around it.
+     Note which side of the box is
+     <span class="redtext">red</span>.</p>
+</div>
+ +

CSS

+ +
.mybox {
+  border: solid 0.3em gold;
+  border-top-color: red;
+    width: auto;
+}
+
+.redtext {
+  color: red;
+}
+ +

결과

+ +

{{EmbedLiveSample('테두리를_가진_간단한_상자')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-top-color', 'border-top-color')}}{{Spec2('CSS3 Backgrounds')}}No significant changes, though the transparent keyword, now included in {{cssxref("<color>")}} which has been extended, has been formally removed.
{{SpecName('CSS2.1', 'box.html#propdef-border-top-color', 'border-top-color')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-top-color")}}

+ +

같이 보기

+ +
    +
  • 테두리 관련 CSS 단축 속성: {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-color")}}.
    • +
  • 다른 방향 테두리의 색상 관련 CSS 단축 속성: {{cssxref("border-right-color")}}, {{cssxref("border-bottom-color")}}, {{cssxref("border-left-color")}}.
    • +
  • 위쪽 테두리 관련 CSS 속성: {{cssxref("border-top-style")}}, {{cssxref("border-top-width")}}.
    • +
diff --git a/files/ko/web/css/border-top-style/index.html b/files/ko/web/css/border-top-style/index.html new file mode 100644 index 0000000000..38262fffc3 --- /dev/null +++ b/files/ko/web/css/border-top-style/index.html @@ -0,0 +1,134 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS Borders + - CSS Property + - Reference +translation_of: Web/CSS/border-top-style +--- +
{{CSSRef}}
+ +

border-top-style CSS 속성은 요소 테두리의 위쪽 스타일을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-top-style.html")}}
+ + + +
참고: 명세는 서로 다른 스타일의 테두리가 꼭지점에서 만날 때 어떻게 그려야 할지는 정의하고 있지 않습니다.
+ +

구문

+ +
/* 키워드 값 */
+border-top-style: none;
+border-top-style: hidden;
+border-top-style: dotted;
+border-top-style: dashed;
+border-top-style: solid;
+border-top-style: double;
+border-top-style: groove;
+border-top-style: ridge;
+border-top-style: inset;
+border-top-style: outset;
+
+/* 전역 값 */
+border-top-style: inherit;
+border-top-style: initial;
+border-top-style: unset;
+
+ +

border-top-style 속성은 {{cssxref("border-style")}} 속성에 사용할 수 있는 키워드 중 하나를 사용해 지정할 수 있습니다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS

+ +
/* Define look of the table */
+table {
+  border-width: 2px;
+  background-color: #52E385;
+}
+tr, td {
+  padding: 3px;
+}
+
+/* border-top-style example classes */
+.b1 {border-top-style: none;}
+.b2 {border-top-style: hidden;}
+.b3 {border-top-style: dotted;}
+.b4 {border-top-style: dashed;}
+.b5 {border-top-style: solid;}
+.b6 {border-top-style: double;}
+.b7 {border-top-style: groove;}
+.b8 {border-top-style: ridge;}
+.b9 {border-top-style: inset;}
+.b10 {border-top-style: outset;}
+ +

결과

+ +

{{EmbedLiveSample('예제', 300, 200)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-style', 'border-top-style')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-style-properties', 'border-top-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-top-style")}}

+ +

같이 보기

+ +
    +
  • 테두리 스타일 관련 CSS 속성: {{cssxref("border-right-style")}}, {{cssxref("border-bottom-style")}}, {{cssxref("border-left-style")}}, {{cssxref("border-style")}}.
    • +
  • 위쪽 테두리 관련 CSS 속성: {{cssxref("border-top")}}, {{cssxref("border-top-color")}}, {{cssxref("border-top-width")}}.
    • +
diff --git a/files/ko/web/css/border-top-width/index.html b/files/ko/web/css/border-top-width/index.html new file mode 100644 index 0000000000..caa05e40cc --- /dev/null +++ b/files/ko/web/css/border-top-width/index.html @@ -0,0 +1,148 @@ +--- +title: border-top-width +slug: Web/CSS/border-top-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/border-top-width +--- +
{{CSSRef}}
+ +

CSS border-top-width 속성은 요소의 위쪽 테두리 너비를 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-top-width.html")}}
+ + + +

구문

+ +
/* 키워드 값*/
+border-top-width: thin;
+border-top-width: medium;
+border-top-width: thick;
+
+/* <length> 값 */
+border-top-width: 10em;
+border-top-width: 3vmax;
+border-top-width: 6px;
+
+/* 전역 값 */
+border-top-width: inherit;
+border-top-width: initial;
+border-top-width: unset;
+
+ +

값

+ +
+
<line-width>
+
테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + + + + + + + + + + + + + + + + + + +
thin +
+ 		얇은 테두리
medium +
+ 		중간 테두리
thick +
+ 		넓은 테두리
+ +
+

참고: 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.

+
+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<div>Element 1</div>
+<div>Element 2</div>
+ +

CSS

+ +
div {
+  border: 1px solid red;
+  margin: 1em 0;
+}
+
+div:nth-child(1) {
+  border-top-width: thick;
+}
+div:nth-child(2) {
+  border-top-width: 2em;
+}
+ +

결과

+ +

{{EmbedLiveSample('예제', '100%')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-top-width')}}{{Spec2('CSS3 Backgrounds')}}No significant change.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-top-width')}}{{Spec2('CSS2.1')}}No significant change.
{{SpecName('CSS1', '#border-left-width', 'border-top-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-top-width")}}

+ +

같이 보기

+ +
    +
  • 테두리 너비 관련 CSS 속성: {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-bottom-width")}}, and {{Cssxref("border-width")}}.
    • +
  • 위쪽 테두리 관련 CSS 속성: {{Cssxref("border")}}, {{Cssxref("border-top")}}, {{Cssxref("border-top-style")}}, and {{Cssxref("border-top-color")}}.
    • +
diff --git a/files/ko/web/css/border-top/index.html b/files/ko/web/css/border-top/index.html new file mode 100644 index 0000000000..53b254c317 --- /dev/null +++ b/files/ko/web/css/border-top/index.html @@ -0,0 +1,109 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 테두리 +translation_of: Web/CSS/border-top +--- +
{{CSSRef}}
+ +

border-top CSS 단축 속성은 요소의 위쪽 테두리를 설정합니다. {{cssxref("border-top-width")}}, {{cssxref("border-top-style")}}, {{cssxref("border-top-color")}}의 값을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-top.html")}}
+ + + +

다른 단축 속성과 마찬가지로, border-top는 자신이 포함한 모든 값을 지정하며 사용자가 명시하지 않은 속성도 기본값으로 설정합니다. 즉, 아래 두 코드는 사실 동일합니다.

+ +
border-top-style: dotted;
+border-top: thick green;
+
+ +
border-top-style: dotted;
+border-top: none thick green;
+
+ +

따라서 border-top보다 먼저 지정한 {{cssxref("border-top-style")}}의 값은 무시됩니다. {{cssxref("border-top-style")}}의 기본값은 none이므로, border-style을 명시하지 않으면 테두리를 만들지 않습니다.

+ +

구문

+ +
border-top: 1px;
+border-top: 2px dotted;
+border-top: medium dashed green;
+
+ +

border-top은 한 개에서 세 개의 값을 사용해 지정할 수 있고, 순서는 상관하지 않습니다.

+ +

값

+ +
+
<br-width>
+
{{cssxref("border-top-width")}}.
+
<br-style>
+
{{cssxref("border-top-style")}}.
+
{{cssxref("<color>")}}
+
{{cssxref("border-top-color")}}.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
<div>
+  위쪽 테두리를 가진 요소입니다.
+</div>
+ +
div {
+  border-top: 4px dashed blue;
+  background-color: gold;
+  height: 100px;
+  width: 100px;
+  font-weight: bold;
+  text-align: center;
+}
+
+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#border-top', 'border-top')}}{{Spec2('CSS3 Backgrounds')}}No direct changes, though the modification of values for the {{cssxref("border-top-color")}} do apply to it.
{{SpecName('CSS2.1', 'box.html#propdef-border-top', 'border-top')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#border-top', 'border-top')}}{{Spec2('CSS1')}}Initial definition
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-top")}}

diff --git a/files/ko/web/css/border-width/index.html b/files/ko/web/css/border-width/index.html new file mode 100644 index 0000000000..f41c188740 --- /dev/null +++ b/files/ko/web/css/border-width/index.html @@ -0,0 +1,194 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS Borders + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border-width +--- +
{{CSSRef}}
+ +

CSS border-width 단축 속성은 요소 네 면 테두리의 너비를 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border-width.html")}}
+ + + +

구성 속성

+ +

border-width는 단축 속성으로서 다음의 하위 속성을 포함합니다.

+ +
    +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
+ +

구문

+ +
/* 키워드 값 */
+border-width: thin;
+border-width: medium;
+border-width: thick;
+
+/* <length> 값 */
+border-width: 4px;
+border-width: 1.2rem;
+
+/* 세로방향 | 가로방향 */
+border-width: 2px 1.5em;
+
+/* 위 | 가로방향 | 아래 */
+border-width: 1px 2em 1.5cm;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+border-width: 1px 2em 0 4rem;
+
+/* 전역 키워드 */
+border-width: inherit;
+border-width: initial;
+border-width: unset;
+
+ +

border-width 속성은 한 개에서 네 개의 값을 사용해 지정할 수 있습니다.

+ +
    +
  • 한 개의 값은 네 면 모두의 테두리 너비를 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 테두리 너비를 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 테두리 너비를 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 테두리 너비를 지정합니다. (시계방향)
    • +
+ +

값

+ +
+
<line-width>
+
테두리의 너비입니다. 0 이상의 {{cssxref("<length>")}} 또는 키워드를 사용할 수 있습니다. 키워드는 다음 세 가지 중 하나여야 합니다. + + + + + + + + + + + + + + + + + + +
thin +
+ 		얇은 테두리
medium +
+ 		중간 테두리
thick +
+ 		굵은 테두리
+ +
+

참고: 각 키워드의 굵기를 정의한 명세는 없기 때문에 결과는 구현별로 상이할 수 있습니다. 다만 굵기는 언제나 thin ≤ medium ≤ thick이고, 하나의 문서 내에서 동일합니다.

+
+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

서로 다른 값의 조합

+ +

HTML

+ +
<p id="sval">
+    한 개의 값: 모든 네 면이 6px 테두리</p>
+<p id="bival">
+    두 개의 다른 값: 위아래에 2px 테두리, 좌우에 10px 테두리</p>
+<p id="treval">
+    세 개의 다른 값: 위에 0.3em, 아래에 9px, 좌우에 0</p>
+<p id="fourval">
+    네 개의 다른 값: "얇은" 위, "중간" 오른쪽, "두꺼운" 아래, 왼쪽 1em</p>
+ +

CSS

+ +
#sval {
+  border: ridge #ccc;
+  border-width: 6px;
+}
+#bival {
+  border: solid red;
+  border-width: 2px 10px;
+}
+#treval {
+  border: dotted orange;
+  border-width: 0.3em 0 9px;
+}
+#fourval {
+  border: solid lightgreen;
+  border-width: thin medium thick 1em;
+}
+p {
+  width: auto;
+  margin: 0.25em;
+  padding: 0.25em;
+}
+ +

결과

+ +

{{ EmbedLiveSample('서로_다른_값의_조합', 320, 320) }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}{{Spec2('CSS3 Backgrounds')}}No direct change; the {{cssxref("<length>")}} CSS data type extension has an effect on this property.
{{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}{{Spec2('CSS2.1')}}Added the constraint that values' meaning must be constant inside a document.
{{SpecName('CSS1', '#border-width', 'border-width')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border-width")}}

+ +

같이 보기

+ +
    +
  • 테두리 관련 단축 속성: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
    • +
  • 테두리 너비 속성: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}
    • +
diff --git a/files/ko/web/css/border/index.html b/files/ko/web/css/border/index.html new file mode 100644 index 0000000000..405ccfb05c --- /dev/null +++ b/files/ko/web/css/border/index.html @@ -0,0 +1,151 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Borders + - CSS Property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

CSS border 단축 속성은 요소의 테두리를 설정합니다. {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}의 값을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/border.html")}}
+ + + +

구성 속성

+ +

border는 단축 속성으로서 다음의 하위 속성을 포함합니다.

+ +
    +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-width")}}
    • +
+ +

구문

+ +
/* 스타일 */
+border: solid;
+
+/* 너비 | 스타일 */
+border: 2px dotted;
+
+/* 스타일 | 색 */
+border: outset #f33;
+
+/* 너비 | 스타일 | 색 */
+border: medium dashed green;
+
+/* 전역 값 */
+border: inherit;
+border: initial;
+border: unset;
+
+ +

border 속성은 다음의 값 중 한 개에서 세 개를 선택해서 지정할 수 있습니다. 순서는 영향을 주지 않습니다.

+ +
+

참고: 스타일을 지정하지 않으면 기본값인 none이 사용돼 테두리가 보이지 않습니다.

+
+ +

값

+ +
+
<line-width>
+
테두리의 굵기로 기본값은 medium입니다. {{Cssxref("border-width")}}를 참고하세요.
+
<line-style>
+
테두리의 스타일로 기본값은 none입니다. {{Cssxref("border-style")}}을 참고하세요.
+
{{cssxref("<color>")}}
+
테두리의 색상으로 기본값은 currentcolor입니다. {{Cssxref("border-color")}}를 참고하세요.
+
+ +

설명

+ +

다른 단축 속성과 마찬가지로, 생략한 속성은 초깃값으로 설정됩니다. 한 가지 중요한 점은, border를 사용해서는 {{cssxref("border-image")}}에 원하는 값을 지정할 수는 없고 대신 초깃값인 none이 자동으로 설정됩니다.

+ +

border 단축 속성은 요소의 테두리를 모두 동일하게 설정하고 싶을 때 특히 유용합니다. 그러나 서로의 테두리를 다르게 하고 싶다면 네 면을 각각 설정할 수 있는 본디 속성 {{Cssxref("border-width")}}, {{Cssxref("border-style")}},{{Cssxref("border-color")}}를 사용하면 됩니다. 아니면 한 면의 테두리를 절대 기준({{Cssxref("border-top")}} 등)이나 상대 기준({{Cssxref("border-block-start")}} 등) 속성을 사용해서 따로 정해줄 수도 있습니다.

+ +

테두리 vs외곽선

+ +

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.

+ +
    +
  • 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
    • +
  • 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.
    • +
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

튀어나오는 듯한 분홍색 테두리 추가하기

+ +

HTML

+ +
<div>테두리와 외곽선에 더해 그림자까지, 정말 멋지지 않나요?</div>
+
+ +

CSS

+ +
div {
+  border: 0.5rem outset pink;
+  outline: 0.5rem solid khaki;
+  box-shadow: 0 0 0 2rem skyblue;
+  border-radius: 12px;
+  font: bold 1rem sans-serif;
+  margin: 2rem;
+  padding: 1rem;
+  outline-offset: 0.5rem;
+}
+ +

결과

+ +

{{EmbedLiveSample('튀어나오는_듯한_분홍색_테두리_추가하기')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}Removes specific support for transparent, as it is now a valid {{cssxref("<color>")}}; this has no practical impact.
+ Though it cannot be set to a custom value using the shorthand, border now resets {{cssxref("border-image")}} to its initial value (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Accepts the inherit keyword. Also accepts transparent as a valid color.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.border")}}

diff --git a/files/ko/web/css/box-shadow/index.html b/files/ko/web/css/box-shadow/index.html new file mode 100644 index 0000000000..a040af6e5e --- /dev/null +++ b/files/ko/web/css/box-shadow/index.html @@ -0,0 +1,126 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Property + - CSS Styles + - Reference +translation_of: Web/CSS/box-shadow +--- +
{{ CSSRef }}
+ +

box-shadow CSS 속성은 요소의 테두리를 감싼 그림자 효과를 추가합니다. 쉼표로 구문해서 여러 그림자 효과를 입힐 수 있습니다. 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.

+ +

{{EmbedInteractiveExample("pages/css/box-shadow.html")}}

+ +

box-shadow 속성은 거의 모든 요소의 테두리에서 그림자를 드리울 수 있도록 도와줍니다. {{cssxref("border-radius")}}가 요소에 함께 적용됐다면 박스 그림자의 모서리도 똑같이 둥근 모서리를 갖게 됩니다. 여러 그림자의 z축 순서는 {{cssxref("text-shadow")}}와 동일하게 처음 그림자일수록 위로 올라옵니다.

+ +

박스 그림자 생성기는 상호작용형 도구로, 쉽게 box-shadow의 값을 생성할 수 있습니다.

+ +

구문

+ +
/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Any number of shadows, separated by commas */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+/* Global keywords */
+box-shadow: inherit;
+box-shadow: initial;
+box-shadow: unset;
+
+ +

하나의 box-shadow는 다음 구성요소로 지정할 수 있습니다.

+ +
    +
  • 두 개에서 네 개의 {{cssxref("<length>")}} 값. +
      +
    • 두 개의 값을 사용하면 <offset-x><offset-y>로 분석합니다.
      • +
    • 세 번째 값이 주어지면 <blur-radius>로 분석합니다.
      • +
    • 네 번째 값이 주어지면 <spread-radius>로 분석합니다.
      • +
    +
    • +
  • 선택사항으로 inset 키워드.
    • +
  • 선택사항으로 {{cssxref("<color>")}} 값.
    • +
+ +

값

+ +
+
inset
+
값을 지정하지 않으면(기본값) 요소가 공중에 떠있는 것처럼 밖에 드리우는 그림자가 됩니다.
+ inset 키워드가 존재하면 요소가 움푹 들어간 것처럼 그림자가 요소의 테두리 안, 배경색 위, 내부 콘텐츠 밑에 그려집니다.
+
<offset-x> <offset-y>
+
그림자의 위치를 설정하는 두 개의 {{cssxref("<length>")}} 값입니다. <offset-x>는 수평 거리를 의미하며 음수 값은 그림자를 요소의 왼쪽에 표시합니다. <offset-y>는 수직 거리를 의미하며 음수 값은 그림자를 요소의 위쪽에 표시합니다. 가능한 단위는 {{cssxref("<length>")}}를 참고하세요.
+ 두 값이 모두 0이면 그림자가 요소 바로 뒤쪽에 위치하며, <blur-radius> 또는 <spread-radius>가 존재하면 흐려지는 효과를 볼 수 있습니다.
+
<blur-radius>
+
세 번째 {{cssxref("<length>")}} 값입니다. 크면 클 수록 그림자 테두리가 흐려지므로 크기는 더 커지고 색은 더 밝아집니다. 음수 값은 사용할 수 없습니다. 값을 설정하지 않으면 0이 되어 테두리가 선명해집니다. 명세는 흐림 효과의 지름을 어떻게 계산해야 하는지 정확한 알고리즘은 명시하지 않았지만 대신 다음과 같이 설명하고 있습니다.
+
+

…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.

+
+
<spread-radius>
+
네 번째 {{cssxref("<length>")}} 값입니다. 양수 값은 그림자가 더 커지고 확산하며, 음수 값은 그림자가 줄어듭니다. 기본값은 0(그림자와 요소 크기 동일)입니다. 
+
<color>
+
가능한 키워드와 표기법은 {{cssxref("<color>")}}를 참고하세요.
+ 기본값은 브라우저에 따라 다릅니다. 보통 {{cssxref("color")}} 속성의 값을 사용하지만, Safari는 투명한 그림자가 기본값입니다.
+
+ +

보간

+ +

Each shadow in the list (treating none as a 0-length list) is interpolated via the color (as color) component, and x, y, blur, and (when appropriate) spread (as length) components. For each shadow, if both input shadows are or are not inset, then the interpolated shadow must match the input shadows in that regard. If any pair of input shadows has one inset and the other not inset, the entire shadow list is uninterpolable. If the lists of shadows have different lengths, then the shorter list is padded at the end with shadows whose color is transparent, all lengths are 0, and whose inset (or not) matches the longer list.

+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ + + +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow') }}{{ Spec2('CSS3 Backgrounds') }} 
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +

{{Compat("css.properties.box-shadow")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("<color>")}} 자료형
    • +
  • Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • Applying color to HTML elements using CSS
    • +
diff --git a/files/ko/web/css/box-sizing/index.html b/files/ko/web/css/box-sizing/index.html new file mode 100644 index 0000000000..7241c0f65b --- /dev/null +++ b/files/ko/web/css/box-sizing/index.html @@ -0,0 +1,119 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/box-sizing +--- +
{{CSSRef}}
+ +

box-sizing CSS 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다. 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.

+ +

box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.

+ +
    +
  • content-box는 기본 CSS 박스 크기 결정법을 사용합니다. 요소의 너비를 100 픽셀로 설정하면 콘텐츠 영역이 100 픽셀 너비를 가지고, 테두리와 안쪽 여백은 이에 더해집니다.
    • +
  • border-box는 테두리와 안쪽 여백의 크기도 요소의 크기로 고려합니다. 너비를 100 픽셀로 설정하고 테두리와 안쪽 여백을 추가하면, 콘텐츠 영역이 줄어들어 총 너비 100 픽셀을 유지합니다. 대부분의 경우 이 편이 크기를 조절할 때 쉽습니다.
    • +
+ +

구문

+ +

box-sizing 속성은 다음 키워드 중 하나로 지정할 수 있습니다.

+ +

값

+ +
+
content-box
+
CSS 표준이 정의한 초기 기본값. {{Cssxref("width")}}와 {{Cssxref("height")}} 속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다. 즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 370px입니다.
+
요소의 크기는 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.
+
border-box
+
{{Cssxref("width")}} 와 {{Cssxref("height")}} 속성이 안쪽 여백과 테두리는 포함하고, 바깥 여백은 포함하지 않습니다. 안쪽 여백과 테두리가 요소 상자 안에 위치함을 유의하세요. 즉 .box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는 350px입니다. 콘텐츠 영역의 크기는 음수일 수 없으므로 border-box를 사용해 요소를 사라지게 할 수는 없습니다.
+
요소의 크기는 너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비, 높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이로 계산합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

다음 예제는 두 개의 동일한 요소의 크기가 서로 다른 box-sizing 값으로 어떻게 달라지는지 보입니다.

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

결과

+ +

{{EmbedLiveSample('예제', 'auto', 300)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}} 
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.box-sizing")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/calc()/index.html b/files/ko/web/css/calc()/index.html new file mode 100644 index 0000000000..7a155befb3 --- /dev/null +++ b/files/ko/web/css/calc()/index.html @@ -0,0 +1,160 @@ +--- +title: calc() +slug: Web/CSS/calc() +tags: + - CSS + - CSS Function + - Layout + - Reference + - Web +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<percentage>")}}, {{cssxref("<number>")}}, 또는 {{cssxref("<integer>")}}를 받는 속성의 값으로 사용할 수 있습니다.

+ +

구문

+ +
/* property: calc(expression) */
+width: calc(100% - 80px);
+
+ +

calc() 함수는 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다.

+ +
+
+
+
덧셈.
+
-
+
뺄셈.
+
*
+
곱셈. 하나 이상의 피연산자가 {{cssxref("<number>")}}여야 합니다.
+
/
+
나눗셈. 오른쪽 피연산자는 {{cssxref("<number>")}}여야 합니다.
+
+ +

피연산자로는 {{cssxref("<length>")}} 구문의 아무 값이나 사용할 수 있고, 원한다면 서로 다른 단위끼리도 계산할 수 있습니다. 괄호를 사용해서 연산 순서를 바꿀 수도 있습니다.

+ +

참고

+ +
    +
  • 0으로 나누면 HTML 구문분석기에서 오류가 발생합니다.
    • +
  • +와 - 연산자는 좌우에 공백이 있어야 합니다. calc(50% -8px)은 백분율 값과 음수 길로 해석하여 유효하지 않지만, calc(50% - 8px)은 백분율과 길이의 뺄셈으로 해석합니다. 마찬가지로, calc(8px + -50%)는 길이와 음의 백분율간의 덧셈으로 처리합니다.
    • +
  • *와 / 연산자는 좌우 공백을 요구하지 않지만, 그래도 추가하는 편이 일관성을 유지하기에 좋습니다.
    • +
  • 표의 행, 열, 행/열 그룹, 자동이나 고정 레이아웃 칸에서 백분율을 포함한 수학식을 너비나 높이로 사용하면 auto 키워드를 사용한 것과 동일하게 처리합니다.
    • +
  • calc() 함수를 중첩해서 사용하면 내부의 calc()는 단순한 괄호로 간주합니다.
    • +
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

요소를 화면에 여백과 함께 배치하기

+ +

calc()를 이용하면 고정된 너비의 여백을 가진 요소를 쉽게 배치할 수 있습니다. 다음 예제에서는 화면을 가로지르면서 창의 좌우 모서리와 간격이 40픽셀인 배너를 생성합니다.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: calc(100% - 80px);
+  border: solid black 1px;
+  box-shadow: 1px 2px;
+  background-color: yellow;
+  padding: 6px;
+  text-align: center;
+  box-sizing: border-box;
+}
+ +
<div class="banner">이건 현수막입니다!</div>
+ +

{{EmbedLiveSample('요소를_화면에_여백과_함께_배치하기', 'auto', '60')}}

+ +

입력 양식 요소를 컨테이너 크기에 자동으로 맞추기

+ +

calc()의 다른 용도는 입력 양식의 필드가 적절한 여백을 갖추면서도 컨테이너 모서리 바깥으로 빠져나가지 않도록 설정하는 것입니다.

+ +

다음 CSS 코드를 살펴보세요.

+ +
input {
+  padding: 2px;
+  display: block;
+  width: calc(100% - 1em);
+}
+
+#formbox {
+  width: calc(100% / 6);
+  border: 1px solid black;
+  padding: 4px;
+}
+ +

위 코드에서, 폼 스스로는 창에서 사용 가능한 공간의 1/6을 차지합니다. 그 후, 입력 필드가 적절한 크기를 가질 수 컨테이너 너비에서 1em 뺀 만큼을 calc()로 지정했습니다. 이제 HTML에 CSS를 적용해보겠습니다.

+ +
<form>
+  <div id="formBox">
+    <label>뭔가 입력해 보세요.</label>
+    <input type="text">
+  </div>
+</form>
+
+ +

{{EmbedLiveSample('입력_양식_요소를_컨테이너_크기에_자동으로_맞추기', '100%', '80')}}

+ +

CSS 변수와 중첩 calc()

+ +

CSS 변수도 calc()와 같이 사용할 수 있습니다. 다음 코드를 살펴보세요.

+ +
.foo {
+  --widthA: 100px;
+  --widthB: calc(var(--widthA) / 2);
+  --widthC: calc(var(--widthB) / 2);
+  width: var(--widthC);
+}
+ +

모든 변수를 펼치면 widthC의 값은 calc( calc( 100px / 2) / 2)가 됩니다. 그 후 .foo의 너비 속성으로 지정될 때, 모든 중첩 calc()는 깊이에 관계 없이 단순한 괄호로 바뀌므로 width 속성의 값은 calc( ( 100px / 2) / 2), 즉 25px이 됩니다. 요약하자면 calc() 안의 calc()는 그냥 괄호와 같습니다.

+ +

접근성 고려사항

+ +

calc()를 사용해 글씨 크기를 조절할땐 아래 코드처럼 피연산자 중 하나로 꼭 상대길이 단위를 사용해주세요.

+ +
h1 {
+  font-size: calc(1.5rem + 3vw);
+}
+ +

이제 페이지를 확대해도 글씨 크기의 비율이 적절히 유지됩니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}최초로 정의됨.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.calc")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/cascade/index.html b/files/ko/web/css/cascade/index.html new file mode 100644 index 0000000000..e7d073cddb --- /dev/null +++ b/files/ko/web/css/cascade/index.html @@ -0,0 +1,229 @@ +--- +title: 종속 +slug: Web/CSS/Cascade +tags: + - CSS + - Guide + - Introduction + - Layout + - Reference +translation_of: Web/CSS/Cascade +--- +
{{CSSRef}}
+ +

종속(Cascade)이란 서로 다른 원점에서 가져온 속성 여럿을 조합해 최종 결과를 도출하는 알고리즘입니다. Cascading Style Sheets라는 이름에서도 알 수 있듯 종속은 CSS의 중심입니다. 이 글은 종속이 무엇인지, 선언한 {{Glossary("CSS")}} 정의가 어떤 순서로 종속되는지, 그리고 여러분, 즉 웹 개발자에게 어떤 영향을 주는지 설명합니다.

+ +

Which CSS entities participate in the cascade

+ +

Only CSS declarations, that is property/value pairs, participate in the cascade. This means that at-rules containing entities other than declarations, such as a {{ cssxref("@font-face")}} rule containing descriptors, don't participate in the cascade. In these cases, only the at-rule as a whole participates in the cascade: here, the @font-face identified by its font-family descriptor. If several @font-face rules with the same descriptor are defined, only the most appropriate @font-face, as a whole, is considered.

+ +

While the declarations contained in most at-rules — such as those in {{cssxref("@media")}}, {{cssxref("@document")}}, or {{cssxref("@supports")}} — participate in the cascade, declarations contained in {{cssxref("@keyframes")}} don't. As with @font-face, only the at-rule as a whole is selected via the cascade algorithm.

+ +

Finally, note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.

+ +

Origin of CSS declarations

+ +

The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the {{anch("User-agent stylesheets")}}, the {{anch("Author stylesheets")}}, and the {{anch("User stylesheets")}}.

+ +

Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.

+ +

User-agent stylesheets

+ +

The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.

+ +

Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.

+ +

Author stylesheets

+ +

Author stylesheets are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.

+ +

User stylesheets

+ +

The user (or reader) of the web site can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes.

+ +

Override stylesheets {{Obsolete_Inline}}

+ +

This feature was never implemented outside of Gecko, where it was only ever used for the non-standard XBL stylesheets.

+ +

Cascading order

+ +

The cascading algorithm determines how to find the value to apply for each property for each document element.

+ +
    +
  1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
    2. +
  2. Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
     OriginImportance
    1CSS Transitionssee below
    2user agentnormal
    3usernormal
     override {{Obsolete_Inline}}normal
    4authornormal
    5CSS Animationssee below
     override {{Obsolete_Inline}}!important
    6author!important
    7user!important
    8user agent!important
    +
    3. +
  3. In case of equality, the specificity of a value is considered to choose one or the other.
    4. +
+ +

Resetting styles

+ +

After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.

+ +

all lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.

+ +

CSS animations and the cascade

+ +

CSS animations, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.

+ +

When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.

+ +

Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.

+ +

Example

+ +

Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:

+ +

User-agent CSS:

+ +
li { margin-left: 10px }
+ +

Author CSS 1:

+ +
li { margin-left: 0 } /* This is a reset */
+ +

Author CSS 2:

+ +
@media screen {
+  li { margin-left: 3px }
+}
+
+@media print {
+  li { margin-left: 1px }
+}
+
+ +

User CSS:

+ +
.specific { margin-left: 1em }
+ +

HTML:

+ +
<ul>
+  <li class="specific">1<sup>st</sup></li>
+  <li>2<sup>nd</sup></li>
+</ul>
+
+ +

In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.

+ +

So three declarations are in competition:

+ +
margin-left: 0
+ +
margin-left: 3px
+ +
margin-left: 1px
+ +

The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:

+ +
margin-left: 3px
+ +

Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Cascade")}}{{Spec2("CSS4 Cascade")}}Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.
{{SpecName("CSS3 Cascade")}}{{Spec2("CSS3 Cascade")}}Removed the override cascade origin, as it was never used in a W3C standard.
{{SpecName("CSS2.1", "cascade.html", "the cascade")}}{{Spec2("CSS2.1")}} 
{{SpecName("DOM2 Style","css.html#CSS-OverrideAndComputed","override cascade origin")}}{{Spec2("DOM2 Style")}}Defined the override cascade origin, but didn't elaborate further.
{{SpecName("CSS1", "#the-cascade", "the cascade")}}{{Spec2("CSS1")}}Initial definition.
+ +

See also

+ + diff --git a/files/ko/web/css/child_combinator/index.html b/files/ko/web/css/child_combinator/index.html new file mode 100644 index 0000000000..dceec68d92 --- /dev/null +++ b/files/ko/web/css/child_combinator/index.html @@ -0,0 +1,92 @@ +--- +title: 자식 결합자 +slug: Web/CSS/Child_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Child_combinator +--- +
{{CSSRef("Selectors")}}
+ +

자식 결합자(>)는 두 개의 CSS 선택자 사이에 위치하여 뒤쪽 선택자의 요소가 앞쪽 선택자 요소의 바로 밑에 위치할 경우에만 선택합니다.

+ +
/* List items that are children of the "my-things" list */
+ul.my-things > li {
+  margin: 2em;
+}
+ +

뒤쪽 선택자의 요소는 앞쪽 선택자 요소의 바로 아래에 위치해야 하므로, DOM 트리의 깊이에 상관하지 않고 아래의 모든 요소를 선택하는 자손 결합자보다 더 엄격합니다.

+ +

구문

+ +
selector1 > selector2 { style properties }
+
+ +

예제

+ +

CSS

+ +
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+
+ +

HTML

+ +
<div>
+  <span>Span #1, in the div.
+    <span>Span #2, in the span that's in the div.</span>
+  </span>
+</div>
+<span>Span #3, not in the div at all.</span>
+
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", 100)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#child-combinators", "child combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#child-combinators", "child combinators")}}{{Spec2("CSS3 Selectors")}}No change.
{{SpecName("CSS2.1", "selector.html#child-selectors", "child selectors")}}{{Spec2("CSS2.1")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.child")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/class_selectors/index.html b/files/ko/web/css/class_selectors/index.html new file mode 100644 index 0000000000..70c84faa98 --- /dev/null +++ b/files/ko/web/css/class_selectors/index.html @@ -0,0 +1,107 @@ +--- +title: 클래스 선택자 +slug: Web/CSS/Class_selectors +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Class_selectors +--- +
{{CSSRef}}
+ +

CSS 클래스 선택자는 요소의 {{htmlattrxref("class")}} 특성에 기반해 요소를 선택합니다.

+ +
/* All elements with class="spacious" */
+.spacious {
+  margin: 2em;
+}
+
+/* All <li> elements with class="spacious" */
+li.spacious {
+  margin: 2em;
+}
+
+/* All <li> elements with a class list that includes both "spacious" and "elegant" */
+/* For example, class="elegant retro spacious" */
+li.spacious.elegant {
+  margin: 2em;
+}
+
+ +

구문

+ +
.class_name { style properties }
+ +

위의 구문은 특성 선택자를 사용한 다음 구문과 동일합니다.

+ +
[class~=class_name] { style properties }
+ +

예제

+ +

CSS

+ +
.red {
+  color: #f33;
+}
+
+.yellow-bg {
+  background: #ffa;
+}
+
+.fancy {
+  font-weight: bold;
+  text-shadow: 4px 4px 3px #77f;
+}
+
+ +

HTML

+ +
<p class="red">빨간 글자색의 문단입니다.</p>
+<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p>
+<p class="red fancy">빨간 글자색과 "멋진" 스타일을 가진 문단입니다.</p>
+<p>이건 그냥 문단이에요.</p>
+
+ +

결과

+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.class")}}

diff --git a/files/ko/web/css/clear/index.html b/files/ko/web/css/clear/index.html new file mode 100644 index 0000000000..f4ed21f1e9 --- /dev/null +++ b/files/ko/web/css/clear/index.html @@ -0,0 +1,231 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다.

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

비부동 블록에 적용되는 경우, 모든 관련 부동체(floats)의 마진 경계 아래로까지 요소의 보더 경계를 아래로 내립니다. 이 움직임(이 일어나는 경우)은 마진 상쇄가 일어나지 않도록 합니다.

+ +

부동 요소에 적용되는 경우, 모든 관련 부동체의 마진 경계 아래로 요소의 마진 경계를 옮깁니다. 이는 나중(later) 부동체의 위치에 영향을 줍니다, 나중 부동체가 앞선(earlier) 부동체보다 높게 위치될 수 없기에.

+ +

해제(cleared)와 관련된 부동체는 같은 블록 형성 문맥 내 앞선 부동체입니다.

+ +
+

주의: 요소가 그 안에 모든 부동 요소를 포함하고 싶은 경우, 컨테이너도 부동하거나 컨테이너의 {{cssxref("::after")}} 대체 가상 요소에 clear를 쓸 수 있습니다.

+ +
#container::after {
+   content: "";
+   display: block;
+   clear: both;
+}
+
+
+ +

구문

+ +
/* 키워드 값 */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* 전역 값 */
+clear: inherit;
+clear: initial;
+clear: unset;
+ +

값

+ +
+
none
+
요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드입니다.
+
left
+
요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
+
right
+
요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
+
both
+
요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
+
inline-start
+
요소가 포함 블록의 시작 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 left 부동체 및 rtl 스크립트의 right 부동체.
+
inline-end
+
요소가 포함 블록의 끝 쪽 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다, 즉 ltr 스크립트의 right 부동체 및 rtl 스크립트의 left 부동체.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

clear: left

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+ +

CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.left {
+    border: 1px solid black;
+    clear: left;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width: 20%;
+}
+.red {
+    float: left;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+
+ +

{{ EmbedLiveSample('clear:_left','100%','250') }}

+ +

clear: right

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+ +

CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.right {
+    border: 1px solid black;
+    clear: right;
+}
+.black {
+    float: right;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 50%;
+}
+ +

{{ EmbedLiveSample('clear:_right','100%','250') }}

+ +

clear: both

+ +

HTML

+ +
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+ +

CSS

+ +
.wrapper{
+    border:1px solid black;
+    padding:10px;
+}
+.both {
+    border: 1px solid black;
+    clear: both;
+}
+.black {
+    float: left;
+    margin: 0;
+    background-color: black;
+    color: #fff;
+    width:20%;
+}
+.red {
+    float: right;
+    margin: 0;
+    background-color: red;
+    width:20%;
+}
+p {
+    width: 45%;
+}
+ +

{{ EmbedLiveSample('clear:_both','100%','300') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}inline-start 및 inline-end 값 추가
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}중요한 변화 없음, 세부사항은 명확해졌지만.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}초기 정의
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +
{{Compat("css.properties.clear")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/clip-path/index.html b/files/ko/web/css/clip-path/index.html new file mode 100644 index 0000000000..588fb46724 --- /dev/null +++ b/files/ko/web/css/clip-path/index.html @@ -0,0 +1,614 @@ +--- +title: clip-path +slug: Web/CSS/clip-path +tags: + - CSS + - CSS Masking + - CSS Property + - Experimental + - Reference + - Web +translation_of: Web/CSS/clip-path +--- +
{{CSSRef}}
+ +

clip-path CSS 속성은 요소의 클리핑 범위를 지정합니다. 클리핑 범위 안의 부분은 보여지고, 바깥은 숨겨집니다.

+ +
{{EmbedInteractiveExample("pages/css/clip-path.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+clip-path: none;
+
+/* <clip-source> 값 */
+clip-path: url(resources.svg#c1);
+
+/* <geometry-box> 값 */
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* <basic-shape> 값 */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');
+
+/* 박스와 도형 값 조합 */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* 전역 값 */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+
+ +

clip-path 속성은 아래의 값을 하나 이상 조합해 지정할 수 있습니다.

+ +

값

+ +
+
<clip-source>
+
SVG {{SVGElement("clipPath")}} 요소를 가리키는 {{cssxref("<url>")}}.
+
{{cssxref("<basic-shape>")}}
+
<geometry-box> 값으로 크기와 위치가 정해지는 도형. <geometry-box>를 지정하지 않는다면 border-box를 참조 박스로 사용합니다.
+
<geometry-box>
+
<basic-shape>와 함께 지정하면, <basic-shape>의 참조 박스를 정의합니다. 단독으로 지정한 경우, 값으로 주어진 상자와 그 상자의 모서리 형태({{cssxref("border-radius")}} 등)를 클리핑 패스로 적용합니다. 가능한 값은 다음과 같습니다.
+
+
+
margin-box
+
바깥 여백 상자를 참조로 사용합니다.
+
border-box
+
테두리 상자를 참조로 사용합니다.
+
padding-box
+
안쪽 여백 상자를 참조로 사용합니다.
+
content-box
+
콘텐츠 상자를 참조로 사용합니다.
+
fill-box
+
객체의 바운딩 상자를 참조로 사용합니다.
+
stroke-box
+
테두리 바운딩 상자를 참조로 사용합니다.
+
view-box
+
가장 가까운 SVG 뷰포트를 참조 상자로 사용합니다. SVG 뷰포트를 생성한 요소가 {{SVGAttr("viewBox")}} 속성을 가진 경우, 참조 상자의 위치는 viewBox 속성이 정의하는 좌표계의 원점에 위치하고, 크기는 viewBox 속성의 너비와 높이 값과 동일합니다.
+
+
+
none
+
클리핑 패스를 생성하지 않습니다.
+
+ +
+

참고: {{cssxref("opacity")}}가 1이 아닌 값일 때와 마찬가지로, none 외의 계산값은 새로운 쌓임 맥락을 생성합니다.

+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML과 SVG의 차이점

+ + + +

{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}

+ +

완전한 예제

+ +

HTML

+ +
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
+    alt="MDN logo">
+<svg height="0" width="0">
+  <defs>
+    <clipPath id="cross">
+      <rect y="110" x="137" width="90" height="90"/>
+      <rect x="0" y="110" width="90" height="90"/>
+      <rect x="137" y="0" width="90" height="90"/>
+      <rect x="0" y="0" width="90" height="90"/>
+    </clipPath>
+  </defs>
+</svg>
+
+<select id="clipPath">
+  <option value="none">none</option>
+  <option value="circle(100px at 110px 100px)">circle</option>
+  <option value="url(#cross)" selected>cross</option>
+  <option value="inset(20px round 20px)">inset</option>
+  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">path</option>
+</select>
+
+ +

CSS

+ +
#clipped {
+  margin-bottom: 20px;
+  clip-path: url(#cross);
+}
+
+ + + +

결과

+ +

{{EmbedLiveSample("완전한_예제", 230, 250)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Extends its application to HTML elements. The clip-path property replaces the deprecated {{cssxref("clip")}} property.
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Initial definition (applies to SVG elements only).
{{SpecName("CSS Shapes 2", "#supported-basic-shapes", 'path')}}{{Spec2('CSS Shapes 2')}}Defines path().
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.clip-path")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/color/index.html b/files/ko/web/css/color/index.html new file mode 100644 index 0000000000..7fe1cd0ba9 --- /dev/null +++ b/files/ko/web/css/color/index.html @@ -0,0 +1,163 @@ +--- +title: color +slug: Web/CSS/color +tags: + - CSS + - CSS Colors + - CSS Property + - CSS Text + - Layout + - Reference + - Web + - 색 +translation_of: Web/CSS/color +--- +
{{CSSRef}}
+ +

color CSS 속성은 요소의 글씨 및 글씨 장식의 전경색과 {{cssxref("currentcolor")}}의 값을 설정합니다. currentcolor는 다른 속성에서 사용할 수 있는 간접적인 값이며, {{cssxref("border-color")}} 등 일부 속성의 기본값입니다.

+ +
{{EmbedInteractiveExample("pages/css/color.html")}}
+ + + +

HTML에서 색을 사용하는 법은 CSS로 HTML 요소에 색입히기 문서에서 정리한 내용으로 읽을 수 있습니다.

+ +

구문

+ +
/* 키워드 값 */
+color: currentcolor;
+
+/* <named-color> 값 */
+color: red;
+color: orange;
+color: tan;
+color: rebeccapurple;
+
+/* <hex-color> 값 */
+color: #090;
+color: #009900;
+color: #090a;
+color: #009900aa;
+
+/* <rgb()> 값 */
+color: rgb(34, 12, 64, 0.6);
+color: rgba(34, 12, 64, 0.6);
+color: rgb(34 12 64 / 0.6);
+color: rgba(34 12 64 / 0.3);
+color: rgb(34.0 12 64 / 60%);
+color: rgba(34.6 12 64 / 30%);
+
+/* <hsl()> 값 */
+color: hsl(30, 100%, 50%, 0.6);
+color: hsla(30, 100%, 50%, 0.6);
+color: hsl(30 100% 50% / 0.6);
+color: hsla(30 100% 50% / 0.6);
+color: hsl(30.0 100% 50% / 60%);
+color: hsla(30.2 100% 50% / 60%);
+
+/* 전역 값 */
+color: inherit;
+color: initial;
+color: unset;
+
+ +

color 속성은 하나의 {{cssxref("<color>")}} 값을 사용해 지정합니다.

+ +

값이 단일 색상이어야 함에 주의하세요. {{cssxref("<gradient>")}}는 사실 {{cssxref("<image>")}} 자료형이기 때문에 사용할 수 없습니다.

+ +

값

+ +
+
{{cssxref("<color>")}}
+
요소의 글씨와 장식 부분의 색.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

아래 예제 모두 글씨를 빨갛게 만듭니다.

+ +
p { color: red; }
+p { color: #f00; }
+p { color: #ff0000; }
+p { color: rgb(255,0,0); }
+p { color: rgb(100%, 0%, 0%); }
+p { color: hsl(0, 100%, 50%); }
+
+/* 50% 투명 */
+p { color: rgba(255, 0, 0, 0.5); }
+p { color: hsla(0, 100%, 50%, 0.5); }
+
+ +

접근성 고려사항

+ +

낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

+ +

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Colors', '#the-color-property', 'color')}}{{Spec2('CSS4 Colors')}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
+ Adds color keyword rebeccapurple.
+ Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
+ Adds hwb(), device-cmyk(), and color() functions.
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}Defines color as animatable.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Adds the orange color and the system colors.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Initial definition.
+ +
{{cssinfo}}
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.color")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("<color>")}} 자료형
    • +
  • 다른 색상 관련 속성: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}}, {{cssxref("color-adjust")}}
    • +
  • CSS로 HTML 요소에 색입히기
    • +
diff --git a/files/ko/web/css/color_value/index.html b/files/ko/web/css/color_value/index.html new file mode 100644 index 0000000000..c176ddc056 --- /dev/null +++ b/files/ko/web/css/color_value/index.html @@ -0,0 +1,1374 @@ +--- +title: +slug: Web/CSS/color_value +tags: + - CSS + - CSS Date Type + - Layout + - Reference + - Web +translation_of: Web/CSS/color_value +--- +
{{CSSRef}}
+ +

CSS <color> 자료형은 sRGB 색 공간의 한 색을 표현하며, 추가로 알파 채널 투명도 값도 가질 수 있어 자신이 가리키는 색상과 배경이 어떻게 합성되어야 하는지 지정할 수 있습니다.

+ +

<color>는 다음 방법으로 정의할 수 있습니다.

+ +
    +
  • 키워드 사용 (blue, transparent 등)
    • +
  • RGB 3차원 좌표계 사용 (# + 16진수 표기법 또는 rgb(), rgba()의 함수형 표기법)
    • +
  • HSL 실린더형 좌표계 사용 (hsl(), hsla()의 함수형 표기법)
    • +
+ +
+

참고: 이 글은 <color> 자료형에 대해 상세히 기술합니다. HTML에서 실제로 색을 쓰는 법이 더 알고 싶으시면 CSS로 HTML 요소에 색 입히기를 참고하세요.

+
+ +

구문

+ +

<color> 자료형은 아래 나열된 선택지 중 하나를 사용해 지정합니다.

+ +
+

참고: <color> 값은 정확하게 정의할 수 있지만 실제로 화면에 표시될 때는 기기별로 차이가 있을 수도 있습니다. 대부분의 화면 색이 제대로 조정되지 않았으며 일부 브라우저는 기기의 색상 프로필을 지원하지 않기 때문입니다.

+
+ +

색상 키워드

+ +

색상 키워드는 대소문자를 구분하지 않는 식별자로, red, blue, black, lightseagreen처럼 특정 색을 나타냅니다. 이름이 표현하는 색을 그럭저럭 가리키고 있긴 하지만 모든 키워드의 본질은 인위적이며 어떤 특정한 규칙을 따르거나 하지 않습니다.

+ +

색상 키워드를 사용할 땐 몇 가지 고려할 점이 있습니다.

+ +
    +
  • HTML은 CSS1에서 찾을 수 있는 16가지 기본 색상만 인식합니다. 알 수 없는 값은 특정 알고리즘을 사용해 변환하는데 그 결과는 대개 완전히 다른 색입니다. 나머지 색상 키워드는 CSS와 SVG에서만 사용해야 합니다.
    • +
  • HTML과 달리 CSS는 알 수 없는 키워드를 완전히 무시합니다.
    • +
  • 모든 색상 키워드는 투명도 없는 단일 색상을 표현합니다.
    • +
  • 어떤 키워드는 다른 키워드의 다른 이름입니다. +
      +
    • aqua / cyan
      • +
    • fuchsia / magenta
      • +
    • darkgray / darkgrey
      • +
    • darkslategray / darkslategrey
      • +
    • dimgray / dimgrey
      • +
    • lightgray / lightgrey
      • +
    • lightslategray / lightslategrey
      • +
    • gray / grey
      • +
    • slategray / slategrey
      • +
    +
    • +
  • 많은 키워드를 X11에서 가져오긴 했지만, 제조사들이 X11 색상을 특정 하드웨어에 맞춰 조절한 경우도 있었기에 RGB값은 차이가 존재할 수 있습니다.
    • +
+ +
+

참고: CSS의 진화와 함께 색상 키워드도 많은 변화를 겪었습니다.

+ +
    +
  • CSS Level 1은 16개의 기본 색상만 지니고 있었습니다. VGA 그래픽 카드가 표현할 수 있는 색에서 가져온 것이기에 VGA 색상이라고 칭했습니다.
    • +
  • CSS Level 2에서는 orange 키워드를 추가했습니다.
    • +
  • 초기 브라우저들은 명세에 없음에도 불구하고 주로 X11 색상표에서 가져온 다양한 색상을 지원했습니다. 그러나 SVG 1.0과 CSS Colors Level 3 이전까지 그 목록이 정식으로 정해진 적은 없었습니다. 추가한 색상 키워드는 확장 색상 키워드, X11 색상, 또는 SVG 색상이라고 부릅니다.
    • +
  • CSS Colors Level 4에선 웹 개척자 에릭 메이어를 기리기 위해 rebeccapurple 키워드를 추가했습니다.
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세키워드RGB 16진수값미리보기
{{SpecName("CSS1")}}black#000000
silver#c0c0c0
gray#808080
white#ffffff
maroon#800000
red#ff0000
purple#800080
fuchsia#ff00ff
green#008000
lime#00ff00
olive#808000
yellow#ffff00
navy#000080
blue#0000ff
teal#008080
aqua#00ffff
{{SpecName("CSS2.1")}}orange#ffa500
{{SpecName("CSS3 Colors")}}aliceblue#f0f8ff
antiquewhite#faebd7
aquamarine#7fffd4
azure#f0ffff
beige#f5f5dc
bisque#ffe4c4
blanchedalmond#ffebcd
blueviolet#8a2be2
brown#a52a2a
burlywood#deb887
cadetblue#5f9ea0
chartreuse#7fff00
chocolate#d2691e
coral#ff7f50
cornflowerblue#6495ed
cornsilk#fff8dc
crimson#dc143c
cyan
+ (aqua의 다른 이름)		#00ffff
darkblue#00008b
darkcyan#008b8b
darkgoldenrod#b8860b
darkgray#a9a9a9
darkgreen#006400
darkgrey#a9a9a9
darkkhaki#bdb76b
darkmagenta#8b008b
darkolivegreen#556b2f
darkorange#ff8c00
darkorchid#9932cc
darkred#8b0000
darksalmon#e9967a
darkseagreen#8fbc8f
darkslateblue#483d8b
darkslategray#2f4f4f
darkslategrey#2f4f4f
darkturquoise#00ced1
darkviolet#9400d3
deeppink#ff1493
deepskyblue#00bfff
dimgray#696969
dimgrey#696969
dodgerblue#1e90ff
firebrick#b22222
floralwhite#fffaf0
forestgreen#228b22
gainsboro#dcdcdc
ghostwhite#f8f8ff
gold#ffd700
goldenrod#daa520
greenyellow#adff2f
grey#808080
honeydew#f0fff0
hotpink#ff69b4
indianred#cd5c5c
indigo#4b0082
ivory#fffff0
khaki#f0e68c
lavender#e6e6fa
lavenderblush#fff0f5
lawngreen#7cfc00
lemonchiffon#fffacd
lightblue#add8e6
lightcoral#f08080
lightcyan#e0ffff
lightgoldenrodyellow#fafad2
lightgray#d3d3d3
lightgreen#90ee90
lightgrey#d3d3d3
lightpink#ffb6c1
lightsalmon#ffa07a
lightseagreen#20b2aa
lightskyblue#87cefa
lightslategray#778899
lightslategrey#778899
lightsteelblue#b0c4de
lightyellow#ffffe0
limegreen#32cd32
linen#faf0e6
magenta
+ (fuchsia의 다른 이름)		#ff00ff
mediumaquamarine#66cdaa
mediumblue#0000cd
mediumorchid#ba55d3
mediumpurple#9370db
mediumseagreen#3cb371
mediumslateblue#7b68ee
mediumspringgreen#00fa9a
mediumturquoise#48d1cc
mediumvioletred#c71585
midnightblue#191970
mintcream#f5fffa
mistyrose#ffe4e1
moccasin#ffe4b5
navajowhite#ffdead
oldlace#fdf5e6
olivedrab#6b8e23
orangered#ff4500
orchid#da70d6
palegoldenrod#eee8aa
palegreen#98fb98
paleturquoise#afeeee
palevioletred#db7093
papayawhip#ffefd5
peachpuff#ffdab9
peru#cd853f
pink#ffc0cb
plum#dda0dd
powderblue#b0e0e6
rosybrown#bc8f8f
royalblue#4169e1
saddlebrown#8b4513
salmon#fa8072
sandybrown#f4a460
seagreen#2e8b57
seashell#fff5ee
sienna#a0522d
skyblue#87ceeb
slateblue#6a5acd
slategray#708090
slategrey#708090
snow#fffafa
springgreen#00ff7f
steelblue#4682b4
tan#d2b48c
thistle#d8bfd8
tomato#ff6347
turquoise#40e0d0
violet#ee82ee
wheat#f5deb3
whitesmoke#f5f5f5
yellowgreen#9acd32
{{SpecName("CSS4 Colors")}}rebeccapurple#663399
+ +

transparent 키워드

+ +

transparent 키워드는 완전히 투명한 색으로, "색"을 입힌 항목의 뒷편이 모두 보입니다. 기술적으로 transparent는 rgba(0,0,0,0)의 짧은 이름입니다.

+ +
+

호환성 참고: {{cssxref("gradient")}} 등 특정 상황에서 의도하지 않은 결과를 피하기 위해, 현재 CSS 명세에선 transparent를 투명도를 미리 곱한 색 공간에서 계산하도록 명시하고 있습니다. 그러나 오래된 브라우저에서는 투명도 0의 검정으로 취급할 수 있음에 주의하세요.

+
+ +
+

역사 참고: transparent는 CSS Level 2 (Revision 1) 전까지 실제 색상이 아니었습니다. 대신 {{cssxref("background")}}와 {{cssxref("border")}}의 <color> 자리에 사용하는 특별한 키워드로, 상속받은 단색을 덮어 쓸 수 있도록 추가됐었습니다. CSS Colors Level 3에서 알파 채널이 추가되면서 transparent도 실제 색상으로 재정의되었습니다. 덕분에 <color> 값 어디에나 사용할 수 있습니다.

+
+ +

currentColor 키워드

+ +

currentColor 키워드는 요소의 {{Cssxref("color")}} 속성값을 나타냅니다. 이를 통해 다른 속성이 color 속성값을 따라가도록 설정할 수 있습니다.

+ +

color 속성의 값으로 currentColor 키워드를 사용하면, 값을 상속받은 color 속성에서 대신 가져옵니다.

+ +

currentColor 예제

+ +
<div style="color: blue; border: 1px dashed currentColor;">
+  이 글의 색은 파랑입니다.
+  <div style="background: currentColor; height:9px;"></div>
+  이 블록은 파란 테두리로 둘러쌓여 있습니다.
+</div>
+ +

{{EmbedLiveSample("currentColor_예제")}}

+ +

RGB 색상

+ +

RGB 색상 모델은 빨강, 초록, 파랑을 통해 특정 색을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

+ +

구문

+ +

RGB 색상은 # 뒤의 16진수 표기법이나 함수형 표기법(rgb(), rgba())으로 표현할 수 있습니다.

+ +
+

참고: CSS Colors Level 4부터 rgba()는 rgb()의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

+
+ +
+
16진수 표기법: #RRGGBB[AA]
+
R(빨강), G(초록), B(파랑), A(알파)는 16진수 문자(0-9, A-F)입니다. A는 선택사항입니다. 예를 들어 #ff0000은 #ff0000ff와 같습니다.
+
16진수 표기법: #RGB[A]
+
R(빨강), G(초록), B(파랑), A(알파)는 16진수 문자(0-9, A-F)입니다. A는 선택사항입니다. 세 글자 표기법(#RGB)은 여섯 글자 표기법(#RRGGBB)의 단축 표현입니다. 예를 들어 #f09는 #ff0099와 같습니다. 비슷하게 네 글자 표기법(#RGBA)은 여덟 글자 표기법(#RRGGBBAA)의 단축 표기법이다. 예를 들어 #0f38은 #00ff3388과 같습니다.
+
함수형 표기법: rgb(R, G, B[, A]) 또는 rgba(R, G, B, A)
+
R(빨강), G(초록), B(파랑)은 {{cssxref("<integer>")}}나 {{cssxref("<percentage>")}}이며 숫자 255가 100%와 동일합니다. A(알파)는 0과 1 사이의 {{cssxref("<number>")}}거나 {{cssxref("<percentage>")}}이며 숫자 1이 100%(불투명)와 동일합니다.
+
함수형 표기법: rgb(R G B[ A]) 또는 rgba(R G B A)
+
CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.
+
+ +

예제

+ +
다양한 RGB 구문
+ +

다음 예제는 한 가지 색상을 만들 때 쓸 수 있는 다양한 RGB 색상 구문을 보입니다.

+ +
/* 아래 모든 구문은 불투명한 핫핑크를 표현합니다. */
+
+/* 16진수 구문 */
+#f09
+#F09
+#ff0099
+#FF0099
+
+/* 함수형 구문 */
+rgb(255,0,153)
+rgb(255, 0, 153)
+rgb(255, 0, 153.0) /* 오류! 소수점 금지 */
+rgb(100%,0%,60%)
+rgb(100%, 0%, 60%)
+rgb(100%, 0, 60%) /* 오류! 정수와 백분율 혼용 금지 */
+rgb(255 0 153)
+
+/* 16진수와 알파 값 */
+#f09f
+#F09F
+#ff0099ff
+#FF0099FF
+
+/* 함수형 구문과 알파 값 */
+rgb(255, 0, 153, 1)
+rgb(255, 0, 153, 100%)
+
+/* 공백 구분 구문 */
+rgb(255 0 153 / 1)
+rgb(255 0 153 / 100%)
+
+/* 정숫값을 사용한 함수형 구문 */
+rgb(255, 0, 153.6, 1)
+rgb(1e2, .5e1, .5e0, +.25e2%)
+
+ +
다양한 RGB 투명도 구문
+ +
/* 16진수 구문 */
+#3a30                    /*   0% opaque green */ 
+#3A3F                    /* full opaque green */ 
+#33aa3300                /*   0% opaque green */ 
+#33AA3388                /*  50% opaque green */ 
+
+/* 함수형 구문 */
+rgba(51, 170, 51, .1)    /*  10% opaque green */ 
+rgba(51, 170, 51, .4)    /*  40% opaque green */ 
+rgba(51, 170, 51, .7)    /*  70% opaque green */ 
+rgba(51, 170, 51,  1)    /* full opaque green */ 
+
+/* 공백 구분 구문 */
+rgba(51 170 51 / 0.4)    /*  40% opaque green */ 
+rgba(51 170 51 / 40%)    /*  40% opaque green */
+
+/* 정숫값을 사용한 함수형 구문 */
+rgba(255, 0, 153.6, 1)
+rgba(1e2, .5e1, .5e0, +.25e2%)
+
+ +

HSL 색상

+ +

HSL 색상 모델은 색상, 채도, 명도를 통해 특정 색상을 표현합니다. 선택사항으로 색의 투명도를 알파 채널로 표현할 수 있습니다.

+ +

많은 디자이너들은 색상, 채도, 명도를 따로 조절할 수 있는 HSL이 RGB보다 더 직관적임을 발견합니다. 또한 HSL을 사용하면 짝이 맞는 색(예컨대 한 가지 색의 여러 밝기) 여러 종류를 더 쉽게 만들 수 있습니다.

+ +

구문

+ +

HSL 색상은 함수형 hsl()과 hsla() 표기법을 사용합니다.

+ +
+

참고: CSS Colors Level 4부터 hsla()는 hsl()의 다른 이름입니다. Level 4 표준을 구현한 브라우저에서는 같은 매개변수를 받고 동일하게 행동합니다.

+
+ +
+
함수형 표기법: hsl(H, S, L[, A]) 또는 hsla(H, S, L, A)
+
H(색상)은 색상원에서의 {{cssxref("<angle>")}}로 {{SpecName("CSS4 Colors","#the-hsl-notation")}} 기준 deg, rad, grad, turn을 사용할 수 있습니다. 단위 없이 {{cssxref("<number>")}}로 표현할 경우 {{SpecName("CSS3 Colors", "#hsl-color")}}에 명시된 것과 같이 각도로 해석합니다. 정의에 따르면 빨강=0deg=360deg이며 다른 색은 (초록=120deg, 파랑=240deg 등) 원을 따라 분포하고 있습니다. <angle>이라면 암묵적으로 원의 주위를 한 바퀴 돕니다. 예컨대 -120deg=240deg, 480deg=120deg, -1turn=1turn 입니다.
+
S(채도)와 L(명도)는 {{cssxref("<percentage>")}}입니다. 100% 채도는 제일 진한 색이며 0%는 회색입니다. 100% 명도는 흰색, 0% 명도는 검은색, 50% 명도는 "보통" 색입니다.
+
A(알파)는 0과 1 사이의 {{cssxref("<number>")}}거나 {{cssxref("<percentage>")}}이며 숫자 1이 100%(불투명)와 동일합니다.
+
함수형 표기법: hsl(H S L[ A]) 또는 hsla(H S L A)
+
CSS Colors Level 4부터 공백으로 구분한 값을 함수형 표기법과 사용할 수 있습니다.
+
+ +

예제

+ +
다양한 HSL 구문
+ +
/* 아래 모든 구문은 라벤더를 표현합니다. */
+hsl(270,60%,70%)
+hsl(270, 60%, 70%)
+hsl(270 60% 70%)
+hsl(270deg, 60%, 70%)
+hsl(4.71239rad, 60%, 70%)
+hsl(.75turn, 60%, 70%)
+
+/* 아래 모든 구문은 85% 투명한 라벤더를 표현합니다. */
+hsl(270, 60%, 50%, .15)
+hsl(270, 60%, 50%, 15%)
+hsl(270 60% 50% / .15)
+hsl(270 60% 50% / 15%)
+
+ +
제일 진한 색상
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
표현설명미리보기
hsl(0, 100%, 50%)red
hsl(30, 100%, 50%)orange
hsl(60, 100%, 50%)yellow
hsl(90, 100%, 50%)lime green
hsl(120, 100%, 50%)green
hsl(150, 100%, 50%)blue-green
hsl(180, 100%, 50%)cyan
hsl(210, 100%, 50%)sky blue
hsl(240, 100%, 50%)blue
hsl(270, 100%, 50%)purple
hsl(300, 100%, 50%)magenta
hsl(330, 100%, 50%)pink
hsl(360, 100%, 50%)red
+ +
밝고 어두운 초록
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NotationDescriptionLive
hsl(120, 100%, 0%)black
hsl(120, 100%, 20%)
hsl(120, 100%, 40%)
hsl(120, 100%, 60%)
hsl(120, 100%, 80%)
hsl(120, 100%, 100%)white
+ +
진하고 옅은 초록
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NotationDescriptionLive
hsl(120, 100%, 50%)green
hsl(120, 80%, 50%)
hsl(120, 60%, 50%)
hsl(120, 40%, 50%)
hsl(120, 20%, 50%)
hsl(120, 0%, 50%)gray
+ +
다양한 HSL 투명도 구문
+ +
hsla(240, 100%, 50%, .05)     /*   5% opaque blue */ 
+hsla(240, 100%, 50%, .4)      /*  40% opaque blue */ 
+hsla(240, 100%, 50%, .7)      /*  70% opaque blue */ 
+hsla(240, 100%, 50%, 1)       /* full opaque blue */ 
+
+/* Whitespace syntax */
+hsla(240 100% 50% / .05)      /*   5% opaque blue */ 
+
+/* Percentage value for alpha */
+hsla(240 100% 50% / 5%)       /*   5% opaque blue */ 
+
+ +

시스템 색상

+ +

모든 시스템에서 모든 시스템 색상을 지원하는건 아닙니다. 공개 웹 페이지에서 사용하는건 좋지 않습니다.

+ +
+
ActiveBorder
+
Active window border.
+
ActiveCaption
+
Active window caption. Should be used with CaptionText as foreground color.
+
AppWorkspace
+
Background color of multiple document interface.
+
Background
+
Desktop background.
+
ButtonFace
+
Face background color for 3-D elements that appear 3-D due to one layer of surrounding border. Should be used with the ButtonText foreground color.
+
ButtonHighlight
+
The color of the border facing the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
+
ButtonShadow
+
The color of the border away from the light source for 3-D elements that appear 3-D due to that layer of surrounding border.
+
ButtonText
+
Text on push buttons. Should be used with the ButtonFace or ThreeDFace background color.
+
CaptionText
+
Text in caption, size box, and scrollbar arrow box. Should be used with the ActiveCaption background color.
+
GrayText
+
Grayed (disabled) text.
+
Highlight
+
Item(s) selected in a control. Should be used with the HighlightText foreground color.
+
HighlightText
+
Text of item(s) selected in a control. Should be used with the Highlight background color.
+
InactiveBorder
+
Inactive window border.
+
InactiveCaption
+
Inactive window caption. Should be used with the InactiveCaptionText foreground color.
+
InactiveCaptionText
+
Color of text in an inactive caption. Should be used with the InactiveCaption background color.
+
InfoBackground
+
Background color for tooltip controls. Should be used with the InfoText foreground color.
+
InfoText
+
Text color for tooltip controls. Should be used with the InfoBackground background color.
+
Menu
+
Menu background. Should be used with the MenuText or -moz-MenuBarText foreground color.
+
MenuText
+
Text in menus. Should be used with the Menu background color.
+
Scrollbar
+
Background color of scroll bars.
+
ThreeDDarkShadow
+
The color of the darker (generally outer) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
ThreeDFace
+
The face background color for 3-D elements that appear 3-D due to two concentric layers of surrounding border. Should be used with the ButtonText foreground color.
+
ThreeDHighlight
+
The color of the lighter (generally outer) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
ThreeDLightShadow
+
The color of the darker (generally inner) of the two borders facing the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
ThreeDShadow
+
The color of the lighter (generally inner) of the two borders away from the light source for 3-D elements that appear 3-D due to two concentric layers of surrounding border.
+
Window
+
Window background. Should be used with the WindowText foreground color.
+
WindowFrame
+
Window frame.
+
WindowText
+
Text in windows. Should be used with the Window background color.
+
+ +

Mozilla 시스템 색상 확장

+ +
+
-moz-ButtonDefault
+
The border color that goes around buttons that represent the default action for a dialog box.
+
-moz-ButtonHoverFace
+
The background color of a button that the mouse pointer is over (which would be ThreeDFace or ButtonFace when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverText foreground color.
+
-moz-ButtonHoverText
+
The text color of a button that the mouse pointer is over (which would be ButtonText when the mouse pointer is not over it). Should be used with the -moz-ButtonHoverFace background color.
+
-moz-CellHighlight
+
Background color for selected item in a tree widget. Should be used with the -moz-CellHighlightText foreground color. See also -moz-html-CellHighlight.
+
-moz-CellHighlightText
+
Text color for a selected item in a tree. Should be used with the -moz-CellHighlight background color. See also -moz-html-CellHighlightText.
+
-moz-Combobox
+
{{Gecko_minversion_inline("1.9.2")}} Background color for combo-boxes. Should be used with the -moz-ComboboxText foreground color. In versions prior to 1.9.2, use -moz-Field instead.
+
-moz-ComboboxText
+
{{Gecko_minversion_inline("1.9.2")}} Text color for combo-boxes. Should be used with the -moz-Combobox background color. In versions prior to 1.9.2, use -moz-FieldText instead.
+
-moz-Dialog
+
Background color for dialog boxes. Should be used with the -moz-DialogText foreground color.
+
-moz-DialogText
+
Text color for dialog boxes. Should be used with the -moz-Dialog background color.
+
-moz-dragtargetzone
+
-moz-EvenTreeRow
+
{{gecko_minversion_inline("1.9")}} Background color for even-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-OddTreeRow.
+
-moz-Field
+
Text field background color. Should be used with the -moz-FieldText foreground color.
+
-moz-FieldText
+
Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color.
+
-moz-html-CellHighlight
+
{{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight.
+
-moz-html-CellHighlightText
+
{{gecko_minversion_inline("1.9")}} Text color for highlighted items in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlight background color. Prior to Gecko 1.9, use -moz-CellHighlightText.
+
-moz-mac-accentdarkestshadow
+
-moz-mac-accentdarkshadow
+
-moz-mac-accentface
+
-moz-mac-accentlightesthighlight
+
-moz-mac-accentlightshadow
+
-moz-mac-accentregularhighlight
+
-moz-mac-accentregularshadow
+
-moz-mac-chrome-active
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-chrome-inactive
+
{{Gecko_minversion_inline("1.9.1")}}
+
-moz-mac-focusring
+
-moz-mac-menuselect
+
-moz-mac-menushadow
+
-moz-mac-menutextselect
+
-moz-MenuHover
+
Background color for hovered menu items. Often similar to Highlight. Should be used with the -moz-MenuHoverText or -moz-MenuBarHoverText foreground color.
+
-moz-MenuHoverText
+
Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color.
+
-moz-MenuBarText
+
{{Gecko_minversion_inline("1.9.2")}} Text color in menu bars. Often similar to MenuText. Should be used on top of Menu background.
+
-moz-MenuBarHoverText
+
Color for hovered text in menu bars. Often similar to -moz-MenuHoverText. Should be used on top of -moz-MenuHover background.
+
-moz-nativehyperlinktext
+
{{Gecko_minversion_inline("1.9.1")}} Default platform hyperlink color.
+
-moz-OddTreeRow
+
{{gecko_minversion_inline("1.9")}} Background color for odd-numbered rows in a tree. Should be used with the -moz-FieldText foreground color. In Gecko versions prior to 1.9, use -moz-Field. See also -moz-EvenTreeRow.
+
-moz-win-communicationstext
+
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox;.
+
-moz-win-mediatext
+
{{gecko_minversion_inline("1.9")}} Should be used for text in objects with {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox.
+
-moz-win-accentcolor
+
{{gecko_minversion_inline("56")}}
+ Used to access the Windows 10 custom accent color that you can set on the start menu, taskbar, title bars, etc.
+
-moz-win-accentcolortext
+
{{gecko_minversion_inline("56")}}
+ Used to access the color of text placed over the Windows 10 custom accent color in the start menu, taskbar, title bars, etc.
+
+ +

Mozilla 색상 설정 확장

+ +
+
-moz-activehyperlinktext
+
User's preference for text color of active links. Should be used with the default document background color.
+
-moz-default-background-color
+
{{Gecko_minversion_inline("5.0")}} User's preference for the document background color.
+
-moz-default-color
+
{{Gecko_minversion_inline("5.0")}} User's preference for the text color.
+
-moz-hyperlinktext
+
User's preference for the text color of unvisited links. Should be used with the default document background color.
+
-moz-visitedhyperlinktext
+
User's preference for the text color of visited links. Should be used with the default document background color.
+
+ +

보간

+ +

애니메이션과 그레이디언트는 <color> 값의 빨강, 초록, 파랑 각 구성 성분을 부동소수점 실수를 사용해 보간합니다. 보간 중 예상하지 못한 무채색이 등장하는걸 방지하기 위해 계산은 알파 채널을 미리 곱한 sRGBA 색 공간에서 수행합니다. 애니메이션에서 보간의 속도는 타이밍 함수가 결정합니다.

+ +

접근성 고려사항

+ +

색을 구별하기 어려운 사람도 있으므로, WCAG 2.0 권고안은 특정 메시지, 행동, 또는 결과를 나타내는 방법으로 오직 색만 사용하는걸 강력히 반대하고 있습니다. 색과 색상 대비를 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Colors', '#changes-from-3')}}{{Spec2('CSS4 Colors')}}Adds rebeccapurple, four- (#RGBA) and eight-digit (#RRGGBBAA) hexadecimal notations, rgba() and hsla() as aliases of rgb() and hsl() (both with identical parameter syntax), space-separated function parameters as an alternative to commas, percentages for alpha values, and angles for the hue component in hsl() colors.
{{SpecName('CSS3 Colors', '#colorunits', '<color>')}}{{Spec2('CSS3 Colors')}}Deprecates system colors. Adds SVG colors and rgba(), hsl(), and hsla() functional notations.
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}{{Spec2('CSS2.1')}}Adds the orange keyword and system colors.
{{SpecName('CSS1', '#color-units', '<color>')}}{{Spec2('CSS1')}}Initial definition. Includes 16 basic color keywords.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.color")}}

+ +

같이 보기

+ +
    +
  • {{Cssxref("opacity")}} 속성으로 요소 자체의 투명도를 바꿀 수 있습니다.
    • +
  • <color>를 지정할 수 있는 흔히 쓰이는 속성: {{Cssxref("color")}}, {{Cssxref("background-color")}}, {{Cssxref("border-color")}}, {{Cssxref("box-shadow")}}, {{Cssxref("outline-color")}}, {{Cssxref("text-shadow")}}
    • +
  • CSS로 HTML 요소에 색 입히기
    • +
diff --git a/files/ko/web/css/comments/index.html b/files/ko/web/css/comments/index.html new file mode 100644 index 0000000000..e101681e9c --- /dev/null +++ b/files/ko/web/css/comments/index.html @@ -0,0 +1,54 @@ +--- +title: Comments +slug: Web/CSS/Comments +tags: + - CSS + - Reference +translation_of: Web/CSS/Comments +--- +
{{CSSRef}}
+ +

CSS 주석은 코드에 설명을 넣거나, 브라우저가 스타일 시트의 특정 부분을 읽지 못하도록 방지할 때 사용합니다. 주석은 문서의 레이아웃에 영향을 주지 않습니다.

+ +

구문

+ +

주석은 스타일 시트에서 공백이 위치할 수 있는 곳 어디에나 넣을 수 있습니다. 한 줄로도, 여러 줄로도 사용할 수 있습니다.

+ +
/* Comment */
+ +

예제

+ +
/* 한 줄 주석 */
+
+/*
+여러
+줄을
+차지하는
+주석
+*/
+
+/* 아래와 같이 사용하면
+   스타일을 숨길 수 있음 */
+/*
+span {
+  color: blue;
+  font-size: 1.5em;
+}
+*/
+
+ +

참고

+ +

한 줄과 여러 줄 주석 모두 /* */ 구문을 사용하며 다른 방법은 없습니다. 그러나 {{htmlelement("style")}} 요소를 사용하는 경우 <!-- -->를 이용해 구형 브라우저에게서 CSS를 숨길 수 있지만, 추천하는 방법은 아닙니다. /* */ 주석 구문을 사용하는 대부분의 언어와 마찬가지로 주석을 중첩할 수는 없습니다. 즉 /*을 뒤따르는 첫 번째 */이 주석을 끝냅니다.

+ +

명세

+ + + +

같이 보기

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ko/web/css/common_css_questions/index.html b/files/ko/web/css/common_css_questions/index.html new file mode 100644 index 0000000000..604448f6c3 --- /dev/null +++ b/files/ko/web/css/common_css_questions/index.html @@ -0,0 +1,199 @@ +--- +title: 공통된 CSS 질문들 +slug: Web/CSS/Common_CSS_Questions +translation_of: Learn/CSS/Howto/CSS_FAQ +--- +

왜 유효한 내 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/computed_value/index.html b/files/ko/web/css/computed_value/index.html new file mode 100644 index 0000000000..feb106bf43 --- /dev/null +++ b/files/ko/web/css/computed_value/index.html @@ -0,0 +1,55 @@ +--- +title: 계산값 +slug: Web/CSS/computed_value +tags: + - CSS + - Reference +translation_of: Web/CSS/computed_value +--- +
{{cssref}}
+ +

CSS 속성의 계산값은 상속 과정에서 부모가 자식에게 물려주는 값을 말합니다. 계산값은 지정값으로부터 다음 방법을 통해 구합니다.

+ +
    +
  • 특수값인 {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("unset")}}, {{cssxref("revert")}}를 처리하여.
    • +
  • 각 속성 정의 표의 "Computed value" 항목이 가리키는 연산을 수행하여.
    • +
+ +

계산값을 구하기 위한 연산은 보통 상댓값(em 단위나 백분율 등)을 절댓값으로 변환하는 작업을 수반합니다. 예컨대 요소가 font-size: 1px과 padding-top: 2em을 가진다면, padding-top의 계산값은 글씨 크기의 두 배인 32px입니다.

+ +

그러나, width, margin-right, text-index, top과 같이, 백분율의 값을 알아내려면 레이아웃부터 계산해야 하는 속성의 백분율 지정값은 백분율 계산값이 됩니다. 추가로, line-height 속성의 단위 없는 값도 그대로 계산값이 됩니다. 이렇게 남겨진 상대적 계산값은 사용값을 구할 때 절댓값이 됩니다.

+ +
+

참고:{{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API는 결정값을 반환합니다. 결정값은 속성에 따라 계산값일 수도, 사용값일 수도 있습니다.

+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS2.1", "cascade.html#computed-value", "computed value")}}{{Spec2("CSS2.1")}}Initial definition.
{{SpecName("CSS2.2", "cascade.html#computed-value", "computed-value")}}{{Spec2("CSS2.2")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/contain/index.html b/files/ko/web/css/contain/index.html new file mode 100644 index 0000000000..64eb9eba4a --- /dev/null +++ b/files/ko/web/css/contain/index.html @@ -0,0 +1,206 @@ +--- +title: contain +slug: Web/CSS/contain +tags: + - CSS + - CSS Containment + - CSS Property + - Reference + - Web + - 'recipe:css-property' +translation_of: Web/CSS/contain +--- +
{{CSSRef}}
+ +

CSS contain 속성은 특정 요소와 콘텐츠가 문서 트리의 다른 부위와 독립되어있음을 나타낼 때 사용합니다. 브라우저는 이 정보를 사용해 레이아웃, 스타일, 페인트, 크기, 또는 그 조합의 계산을 전체 페이지 DOM 대신 일부에서만 수행할 수 있으므로 뚜렷한 성능 상 이점을 얻을 수 있습니다.

+ +

contain 속성은 위젯 내부 콘텐츠가 외부에 부작용을 끼치는 것을 방지할 수 있으므로 서로 독립된 많은 양의 위젯이 존재하는 페이지에서 유용합니다.

+ +
+

참고: paint, strict, content 값을 설정할 경우 다음을 생성합니다.

+ +
    +
  1. 새로운 컨테이닝 블록 ({{cssxref("position")}} 속성이 absolute 또는 fixed인 자손을 위함).
    2. +
  2. 새로운 쌓임 맥락.
    3. +
  3. 새로운 블록 서식 맥락.
    4. +
+
+ +

구문

+ +
/* 키워드 값 */
+contain: none;
+contain: strict;
+contain: content;
+contain: size;
+contain: layout;
+contain: style;
+contain: paint;
+
+/* 다중 값 */
+contain: size paint;
+contain: size layout paint;
+
+/* 전역 값 */
+contain: inherit;
+contain: initial;
+contain: unset;
+ +

contain 속성은 다음 방법 중 하나를 사용해 지정합니다.

+ +
    +
  • none, strict, content 키워드 중 하나를 사용.
    • +
  • size, layout, style, paint 키워드를 임의 순서로 하나 이상 사용.
    • +
+ +

값

+ +
+
none
+
아무것도 격리하지 않고 요소를 평범하게 렌더링합니다.
+
strict
+
style을 제외한 모든 격리 규칙을 적용합니다. contain: size layout paint와 같습니다.
+
content
+
size와 style을 제외한 모든 격리 규칙을 적용합니다. contain: layout paint와 같습니다.
+
size
+
요소의 크기를 계산할 때 자손의 크기는 고려하지 않아도 됨을 나타냅니다.
+
layout
+
요소 외부의 어느 것도 내부 레이아웃에 영향을 주지 않고, 그 반대도 성립함을 나타냅니다.
+
style
+
요소 자신과 자손 외에도 영향을 주는 속성이라도 그 영향 범위가 자신을 벗어나지 않음을 나타냅니다. 이 값은 명세에서 "제외 고려" 대상이므로 모든 브라우저가 지원하지 않을 수도 있음을 참고하세요.
+
paint
+
요소의 자손이 자신의 범위 바깥에 그려지지 않음을 나타냅니다. 이 값을 지정한 요소의 경우, 요소가 화면 밖에 위치할 경우 당연히 그 안의 자손도 화면 안에 들어오지 않을 것이므로 브라우저는 그 안의 요소를 고려하지 않아도 됩니다. 그러나 만약 자손이 범위 밖으로 넘칠 경우에는 요소의 테두리 상자에서 잘라냅니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

간단한 레이아웃

+ +

다음 마크업은 각각의 콘텐츠를 가진 여러 개의 글을 가정합니다.

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ +

각 <article>과 <img>엔 테두리를 부여하고, 이미지는 모두 좌측으로 플로팅합니다.

+ +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+}
+ +

{{EmbedLiveSample('간단한_레이아웃', '100%', '300')}}

+ +

플로팅 간섭

+ +

첫 번째 글의 마지막에 다른 이미지를 넣게 되면 많은 양의 DOM 트리가 다시 레이아웃이나 페인트 과정을 거쳐야 하며, 두 번째 글의 레이아웃에도 간섭하게 됩니다.

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+  <img src="i-just-showed-up.jpg" alt="social">
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <img src="graphic.jpg" alt="photo">
+  <p>More content here.</p>
+</article>
+ + + +

아래의 라이브 샘플에서, 플로팅 작동 방식으로 인해 첫 번째 이미지가 두 번째 글 안으로 들어가버린 모습을 볼 수 있습니다.

+ +

{{EmbedLiveSample('플로팅_간섭', '100%', '300')}}

+ +

contain으로 수정하기

+ +

각각의 article에 contain: content를 지정해주면, 새로운 요소를 추가할 때 그 하위 트리만 계산하고 바깥은 고려하지 않아도 된다는 것을 브라우저가 인식합니다.

+ + + +
img {
+  float: left;
+  border: 3px solid black;
+}
+
+article {
+  border: 1px solid black;
+  contain: content;
+}
+ +

또한 첫 번째 이미지가 플로팅으로 인해 아래로 넘어가지 않고, 컨테이너 요소의 범위 안에 머무르는 것도 확인할 수 있습니다.

+ +

{{EmbedLiveSample('contain으로_수정하기', '100%', '330')}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Containment', '#contain-property', 'contain')}}{{Spec2('CSS Containment')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.contain")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/content/index.html b/files/ko/web/css/content/index.html new file mode 100644 index 0000000000..c06271b05d --- /dev/null +++ b/files/ko/web/css/content/index.html @@ -0,0 +1,297 @@ +--- +title: content +slug: Web/CSS/content +tags: + - CSS + - CSS Counter + - CSS Property + - Reference +translation_of: Web/CSS/content +--- +
{{CSSRef}}
+ +

CSS content 속성은 생성한 값으로 요소를 대체합니다. content 속성으로 추가한 요소는 "익명 대체 요소"입니다.

+ +
/* 다른 값과 조합할 수 없는 키워드 */
+content: normal;
+content: none;
+
+/* <image> 값 */
+content: url("http://www.example.com/test.png");
+content: linear-gradient(#e66465, #9198e5);
+
+/* 생성한 값의 대체 텍스트, Level 3 명세에서 추가 */
+content: url("http://www.example.com/test.png") / "This is the alt text";
+
+/* 앞선 값은 모두 ::before와 ::after에만 적용 가능 */
+
+/* <string> 값 */
+content: "prefix";
+
+/* <counter> 값 */
+content: counter(chapter_counter);
+content: counters(section_counter, ".");
+
+/* HTML 속성값으로 연결하는 attr() */
+content: attr(value string);
+
+/* 언어와 요소 위치 기반 키워드 */
+content: open-quote;
+content: close-quote;
+content: no-open-quote;
+content: no-close-quote;
+
+/* normal과 none을 제외하면 여러 키워드를 함께 사용할 수 있음 */
+content: open-quote chapter_counter;
+
+/* 전역 값 */
+content: inherit;
+content: initial;
+content: unset;
+
+ +

{{cssinfo}}

+ +

구문

+ +

값

+ +
+
none
+
의사 요소를 생성하지 않음.
+
normal
+
::before와 ::after 의사 요소인 경우 none.
+
{{cssxref("<string>")}}
+
요소의 "대체 텍스트". 모든 숫자와 문자가 가능합니다. 단, 라틴계 문자가 아닌 경우 유니코드 이스케이프 시퀀스를 사용해 인코딩해야 합니다. 예를 들어, \000A9는 저작권 기호입니다.
+
{{cssxref("<image>")}}
+
{{cssxref("<url>")}}이나 {{cssxref("<gradient>")}} 자료형을 사용한 {{cssxref("<image>")}}, 또는 {{cssxref("element")}} 함수를 사용해 가리킨, 보여줄 웹페이지의 일부.
+
{{cssxref("<counter>")}}
+
보통 숫자인 CSS 카운터 값.{{cssxref("counter")}}나 {{cssxref("counters")}} 함수를 사용해 지정할 수 있습니다.
+
+

{{cssxref("counter")}} 함수는 'counter(name)'과 'counter(name, style)'의 두 형태를 가지고 있습니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 가장 안쪽 카운터의 값입니다. 지정한 스타일(기본 decimal)에 맞춰 서식을 적용합니다.

+ +

{{cssxref("counters")}} 함수 역시 'counters(name, string)'과 'counters(name, string, style)'의 두 형태를 가집니다. 생성하는 값은 주어진 의사 요소의 현재 범위에서, 해당하는 이름을 가진 카운터 값의 목록으로 바깥쪽부터 시작하며 주어진 문자열을 사용해 구분합니다. 지정한 스타일(기본 decimal)에 맞춰 서식을 적용합니다..

+
+
attr(x)
+
문자열로 변환한, 요소 속성 x의 값. x 속성이 존재하지 않으면 빈 문자열을 반환합니다. 속성명의 대소문자 구분 여부는 문서 언어에 따릅니다.
+
open-quote | close-quote
+
{{cssxref("quotes")}} 속성에서 가져온 적절한 문자열을 사용해 대체.
+
no-open-quote | no-close-quote
+
콘텐츠는 추가하지 않고, 대신 따옴표의 중첩 단계를 증감.
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

예제

+ +

헤딩과 따옴표

+ +

다음 예제는 인용구 주변에 따옴표를 추가하고, 헤딩 앞에 단어 "Chapter"를 추가합니다.

+ +

HTML

+ +
<h1>5</h1>
+<p>According to Sir Tim Berners-Lee,
+  <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">I was
+    lucky enough to invent the Web at the time when the Internet
+    already existed - and had for a decade and a half.</q>
+  We must understand that there is nothing fundamentally wrong
+  with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p>According to the Mozilla Manifesto,
+  <q cite="http://www.mozilla.org/en-US/about/manifesto/">Individuals
+    must have the ability to shape the Internet and
+    their own experiences on the Internet.</q>
+  Therefore, we can infer that contributing to the open web
+  can protect our own individual experiences on it.
+</p>
+ +

CSS

+ +
q {
+  color: blue;
+}
+
+q::before {
+  content: open-quote;
+}
+
+q::after {
+  content: close-quote;
+}
+
+h1::before  {
+  content: "Chapter ";  /* The trailing space creates separation
+                           between the added content and the
+                           rest of the content */
+}
+ +

결과

+ +

{{EmbedLiveSample('헤딩과_따옴표', '100%', 200)}}

+ +

이미지와 텍스트

+ +

다음 예제는 링크 앞에 이미지를 추가합니다. 이미지를 가져오지 못한 경우 텍스트를 대신 추가합니다.

+ +

HTML

+ +
<a href="http://www.mozilla.org/en-US/">Mozilla Home Page</a>
+ +

CSS

+ +
a::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") " MOZILLA: ";
+  font: x-small Arial, sans-serif;
+  color: gray;
+}
+ +

결과

+ +

{{EmbedLiveSample('이미지와_텍스트', '100%', 60)}}

+ +

클래스 사용

+ +

다음 예제는 목록의 특별한 항목 뒤에 추가 텍스트를 삽입합니다.

+ +

HTML

+ +
<h2>Paperback Best Sellers</h2>
+<ol>
+  <li>Political Thriller</li>
+  <li class="new-entry">Halloween Stories</li>
+  <li>My Biography</li>
+  <li class="new-entry">Vampire Romance</li>
+</ol>
+ +

CSS

+ +
.new-entry::after {
+  content: " New!";  /* The leading space creates separation
+                        between the added content and the
+                        rest of the content */
+  color: red;
+}
+ +

결과

+ +

{{EmbedLiveSample('클래스_사용', '100%', 160)}}

+ +

이미지와 요소 속성

+ +

다음 예제는 링크 앞에 이미지를 추가하고, 뒤에 id 속성의 값을 붙입니다.

+ +

HTML

+ +
<ul>
+  <li><a id="moz" href="http://www.mozilla.org/">
+    Mozilla Home Page</a></li>
+  <li><a id="mdn" href="https://developer.mozilla.org/">
+    Mozilla Developer Network</a></li>
+</ul>
+ +

CSS

+ +
a {
+  text-decoration: none;
+  border-bottom: 3px dotted navy;
+}
+
+a::after {
+  content: " (" attr(id) ")";
+}
+
+#moz::before {
+  content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") ;
+}
+
+#mdn::before {
+  content: url("https://mdn.mozillademos.org/files/7691/mdn-favicon16.png") ;
+}
+
+li {
+  margin: 1em;
+}
+
+ +

결과

+ +

{{EmbedLiveSample('이미지와_요소_속성', '100%', 160)}}

+ +

요소 대체

+ +

다음 예제는 요소의 콘텐츠를 이미지로 대체합니다. {{cssxref("<url>")}} 또는 {{cssxref("<image>")}} 사용하면 콘텐츠를 대체합니다. 요소를 대체했으므로 ::before나 ::after는 생성하지 않습니다.

+ +

HTML

+ +
<div id="replaced">Mozilla</div>
+
+ +

CSS

+ +
#replaced {
+  content: url("https://mdn.mozillademos.org/files/12668/MDN.svg");
+}
+
+#replaced::after { /* will not show if element replacement is supported */
+  content: " (" attr(id) ")";
+}
+ +

결과

+ +

{{EmbedLiveSample('요소_대체', '100%', 200)}}

+ +

접근성 고려사항

+ +

CSS로 생성한 콘텐츠는 DOM이 포함하지 않고, 접근성 트리에도 들어가지 않습니다. 따라서 특정 접근성 기술/브라우저 조합이 내용을 표현하지 않을 수 있습니다. 콘텐츠가 포함한 정보가 페이지의 목적을 이해하는 것에 중요하다면 주 문서로 포함하는 것이 좋습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Content", "#content-property", "content")}}{{Spec2("CSS3 Content")}}
{{SpecName("CSS2.1", "generate.html#content", "content")}}{{Spec2("CSS2.1")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.content")}}

+ +

같이 보기

+ +
    +
  • {{Cssxref("::after")}}
    • +
  • {{Cssxref("::before")}}
    • +
  • {{Cssxref("::marker")}}
    • +
  • {{Cssxref("quotes")}}
    • +
  • {{cssxref("url()")}} 함수
    • +
diff --git a/files/ko/web/css/css_animated_properties/index.html b/files/ko/web/css/css_animated_properties/index.html new file mode 100644 index 0000000000..4f492a157d --- /dev/null +++ b/files/ko/web/css/css_animated_properties/index.html @@ -0,0 +1,14 @@ +--- +title: CSS animated properties +slug: Web/CSS/CSS_animated_properties +tags: + - CSS +translation_of: Web/CSS/CSS_animated_properties +--- +

{{CSSRef}}

+ +

일부 CSS 속성은 애니메이션될 수 있습니다, 즉 그 값을 바꿀 때 CSS animation 또는 CSS transition이 사용된 경우 부드러운 방식으로 바꿀 수 있습니다.

+ +

다음은 애니메이션 가능한 속성 목록입니다:

+ +

{{CSSAnimatedProperties}}

diff --git a/files/ko/web/css/css_animations/index.html b/files/ko/web/css/css_animations/index.html new file mode 100644 index 0000000000..5740301594 --- /dev/null +++ b/files/ko/web/css/css_animations/index.html @@ -0,0 +1,87 @@ +--- +title: CSS Animations +slug: Web/CSS/CSS_Animations +tags: + - CSS + - CSS Animations + - Overview + - Reference +translation_of: Web/CSS/CSS_Animations +--- +
{{CSSRef}}
+ +

CSS Animations is a module of CSS that lets you animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes.

+ +

Reference

+ +

CSS Properties

+ +
+
    +
  • {{cssxref("animation")}}
    • +
  • {{cssxref("animation-delay")}}
    • +
  • {{cssxref("animation-direction")}}
    • +
  • {{cssxref("animation-duration")}}
    • +
  • {{cssxref("animation-fill-mode")}}
    • +
  • {{cssxref("animation-iteration-count")}}
    • +
  • {{cssxref("animation-name")}}
    • +
  • {{cssxref("animation-play-state")}}
    • +
  • {{cssxref("animation-timing-function")}}
    • +
+
+ +

CSS At-rules

+ +
+
    +
  • {{cssxref("@keyframes")}}
    • +
+
+ +

Guides

+ +
+
Detecting CSS animation support
+
Describes a technique for detecting if a browser supports CSS animations.
+
Using CSS animations
+
Step-by-step tutorial about how to create animations using CSS. This article describes each relevant CSS property and at-rule and explains how they interact with each other.
+
CSS animations tips and tricks
+
Tips and tricks to help you get the most out of CSS animations. Currently offers a technique for replaying an animation which has already run through to completion, which the API doesn't support inherently.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.
+ +

Browser compatibility

+ +
+

animation property

+ +
+ + +

{{Compat("css.properties.animation")}}

+
+
+ +

See also

+ +
    +
  • Related to CSS Animations, CSS Transitions can trigger animations based on user actions.
    • +
diff --git a/files/ko/web/css/css_animations/using_css_animations/index.html b/files/ko/web/css/css_animations/using_css_animations/index.html new file mode 100644 index 0000000000..416e3fc515 --- /dev/null +++ b/files/ko/web/css/css_animations/using_css_animations/index.html @@ -0,0 +1,330 @@ +--- +title: CSS 애니메이션 사용하기 +slug: Web/CSS/CSS_Animations/Using_CSS_animations +tags: + - Advanced + - CSS + - CSS Animations + - Example + - Experimental + - Guide +translation_of: Web/CSS/CSS_Animations/Using_CSS_animations +--- +

{{SeeCompatTable}}{{CSSRef}}

+ +

CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다.

+ +

CSS 애니메이션은 기존에 사용되던 스크립트를 이용한 애니메이션 보다 다음 세 가지 이유에서 이점을 가집니다.

+ +
    +
  1. 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있습니다.
    2. +
  2. 자바스크립트를 이용한 애니메이션은 잘 만들어졌더라도 성능이 좋지 못할때가 있습니다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링됩니다.
    3. +
  3. 브라우저는 애니메이션의 성능을 효율적으로 최적화할 수 있습니다. 예를 들어 현재 안보이는 엘리먼트에 대한 애니메이션은 업데이트 주기를 줄여 부하를 최소화할 수 있습니다.
    4. +
+ +

애니메이션 적용하기

+ +

CSS 애니메이션을 만드려면 {{ cssxref("animation") }} 속성과 이 속성의 하위 속성을 지정합니다. 애니메이션의 총 시간과 반복 여부등을 지정할 수 있습니다. 이 속성은 애니메이션의 중간상태를 기술하지 않는다는걸 명심하세요. 애니메이션의 중간 상태는 아래에서 다룰 {{ cssxref("@keyframes") }}  규칙을 이용하여 기술합니다. 

+ +

{{ cssxref("animation") }} 속성의 하위 속성은 다음과 같습니다.

+ +
+
{{ cssxref("animation-delay") }}
+
엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다.
+
{{ cssxref("animation-direction") }}
+
애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정합니다.
+
{{ cssxref("animation-duration") }}
+
한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정합니다.
+
{{ cssxref("animation-iteration-count") }}
+
애니메이션이 몇 번 반복될지 지정합니다. infinite로 지정하여 무한히 반복할 수 있습니다.
+
{{ cssxref("animation-name") }}
+
이 애니메이션의 중간 상태를 지정합니다. 중간 상태는  {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다.
+
{{ cssxref("animation-play-state") }}
+
애니메이션을 멈추거나 다시 시작할 수 있습니다.
+
{{ cssxref("animation-timing-function") }}
+
중간 상태들의 전환을 어떤 시간간격으로 진행할지 지정합니다.
+
{{ cssxref("animation-fill-mode") }}
+
애니메이션이 시작되기 전이나 끝나고 난 후 어떤 값이 적용될지 지정합니다.
+
+ +

키프레임을 이용하여 애니메이션의 중간상태 기술하기

+ +

애니메이션의 중간 상태를 기술해 봅시다. {{ cssxref("@keyframes") }} 규칙을 이용해서 두개 이상의 중간 상태를 기술합니다. 각 중간 상태는 특정 시점에 엘리먼트가 어떻게 보일지 나타냅니다. 

+ +

CSS 스타일을 이용해 중간 상태에 어떻게 보일지 정의했다면 이 중간 상태가 전체 애니메이션에서 언제 등장할 지 {{ cssxref("percentage") }} 를 이용해 지정합니다. 0%는 애니메이션이 시작된 시점을 의미하고 100%는 애니메이션이 끝나는 시점을 의미합니다. 최소한 이 두 시점은 기술되어야 브라우저가 언제 애니메이션이 시작되고 끝나는지 알 수 있습니다. 0%와 100% 대신 from 과 to로 사용할 수도 있습니다.

+ +

시작 시점과 종료 시점 사이의 특정 시점에도 중간 상태를 지정할 수 있습니다.

+ +

예제

+ +
노트: 다음 예제들은 애니메이션 CSS 속성에 접두어가 사용되지 않았습니다(역자: -webkit-, -moz- 등). 오래된 브라우저는 접두어가 필요합니다. 
+ +

텍스트가 브라우저를 가로질러 움직이게 하기

+ +

다음 단순한 예제에서 {{ HTMLElement("p") }} 엘리먼트가 브라우저 윈도우 오른쪽에서 왼쪽으로 가로질러 움직이는걸 볼 수 있습니다.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+
+ +

{{ HTMLElement("p") }} 엘리먼트에 지정한 CSS 규칙에서 {{ cssxref("animation-duration") }} 속성을 통해 애니메이션의 총 길이는 3초로 지정했습니다. 또 애니메이션의 중간 상태들을 {{ cssxref("@keyframes") }} 규칙을 사용하여 기술하고 이것들에게 slidein라는 이름을 붙였습니다.  그리고 p 엘리먼트에 slidein이라는 애니메이션을 지정했습니다.

+ +

CSS 애니메이션을 지원하지 않는 브라우저를 위하여 {{ HTMLElement("p") }} 에 특정 스타일을 지정하고 싶다면 그러셔도 됩니다. 여기서도 그렇게 할 수 있으나 이 예제에서는 애니메이션 효과만을 보기위해 지정하지 않았습니다. 

+ +

애니메이션의 중간 상태는 {{ cssxref("@keyframes") }} 규칙을 이용하여 기술합니다. 이 경우에서는 두개의 중간 상태를 기술했습니다. 첫 번째 중간 상태는 애니메이션이 시작되고 나서 0% 시점에 (from키워드를 사용해도 됩니다) 왼쪽 마진을 100%로 지정하는 것입니다. 왼쪽 마진을 100%로 지정했으므로 애니메이션이 시작된 시점에 브라우저 윈도우 오른쪽 모서리에 엘리먼트가 그려집니다.

+ +

두번째 중간 상태는 애니메이션이 시작되고나서 100% (to키워드를 사용해도 됩니다)시점에 왼쪽 마진을 0%으로 지정하는 것입니다. 따라서 애니메이션 마지막에는 엘리먼트가 브라우저 윈도우의 왼쪽 모서리에 그려집니다.

+ + +
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+
+ +

{{EmbedLiveSample("텍스트가_브라우저를_가로질러_움직이게_하기","100%","250")}}

+ +

중간 상태 추가하기

+ +

이전 예제의 애니메이션에서 중간 상태를 추가해 봅시다. 왼쪽에서 오른쪽으로 엘리먼트가 움직일 때 글자 크기가 커지다가 다시 원래대로 줄어들게 해봅시다. 다음과 같은 중간 상태를 추가하면 됩니다.

+ +
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+
+ + + + +

애니메이션의 75% 시점에서 엘리먼트의 왼쪽 마진을 25%, 너비를 150%, 글자 크기를 300%로 지정하라는 의미입니다.

+ +

{{EmbedLiveSample("중간_상태_추가하기","100%","250")}}

+ +

애니메이션 반복하기

+ +

애니메이션을 반복하고 싶다면 {{ cssxref("animation-iteration-count") }} 속성을 사용하면 됩니다. 이 속성으로 애니메이션이 몇 번 반복될지 지정할 수 있습니다. 이 예제에서는 infinite 라는 값을 지정하여 무한히 반복되게 해 봅시다.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+
+ + + + + +

{{EmbedLiveSample("애니메이션_반복하기","100%","250")}}

+ +

앞뒤로 움직이기

+ +

앞에서 애니메이션이 반복되는걸 보셨을 겁니다. 그런데 애니메이션이 끝나고 갑자기 오른쪽 모서리로 돌아가는게 어색합니다. 애니메이션이 끝났을 때 반대방향으로 이동하도록 만들어 봅시다. {{ cssxref("animation-direction") }} 속성을 alternate로 지정하면 됩니다.

+ +
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+ + + + + +

{{EmbedLiveSample("앞뒤로_움직이기","100%","250")}}

+ +

애니메이션 이벤트 사용하기

+ +

애니메이션 이벤트를 이용하여 애니메이션을 조종할 수 있습니다. {{ domxref("event/AnimationEvent", "AnimationEvent") }} 로 나타내어지는 애니메이션 이벤트를 사용하여 애니메이션의 시작, 끝, 새로운 반복의 시작등을 감지할 수 있습니다. 이벤트가 발생할 때마다 이벤트의 종류와 어떤 애니메이션에서 발생한 것인지 알 수도 있습니다.

+ +

위의 움직이는 글자 예제를 수정하여 애니메이션 이벤트를 어떻게 사용하는지 알아봅시다. 

+ +
.slidein {
+  -moz-animation-duration: 3s;
+  -webkit-animation-duration: 3s;
+  animation-duration: 3s;
+  -moz-animation-name: slidein;
+  -webkit-animation-name: slidein;
+  animation-name: slidein;
+  -moz-animation-iteration-count: 3;
+  -webkit-animation-iteration-count: 3;
+  animation-iteration-count: 3;
+  -moz-animation-direction: alternate;
+  -webkit-animation-direction: alternate;
+  animation-direction: alternate;
+}
+
+@-moz-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}
+
+@-webkit-keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+   margin-left:0%;
+   width:100%;
+ }
+}
+

애니메이션 이벤트 리스너 추가하기

+ +

자바스크립트 코드를 사용하여 위에서 언급한 세개의 이벤트를 감지해 봅시다. setup() 함수는 애니메이션 이벤트 리스너를 추가하는 함수입니다. 문서가 로드되었을 때 이 함수를 실행할 것입니다.

+ +
function setup() {
+  var e = document.getElementById("watchme");
+  e.addEventListener("animationstart", listener, false);
+  e.addEventListener("animationend", listener, false);
+  e.addEventListener("animationiteration", listener, false);
+
+  var e = document.getElementById("watchme");
+  e.className = "slidein";
+}
+
+ +

어떻게 동작하는지 더 자세히 알고싶으면 {{ domxref("element.addEventListener()") }} 문서를 참고하세요. setup() 함수의 마지막 줄에서 엘리먼트의 class 를 "slidein"으로 지정하는 순간 애니메이션이 시작됩니다.

+ +

왜 이렇게 했을까요? 왜냐하면 animationstart 이벤트는 애니메이션이 시작되자마자 발생하므로 우리 코드에서는 이를 감지할 수 없습니다. 애니메이션이 시작될 때는 위의 코드가 실행되기 전이라 이벤트 리스너가 아직 추가되지 않았기 때문이지요. 따라서 이벤트 리스너를 먼저 추가하고 엘리먼트에 class를 지정하여 애니메이션을 시작했습니다.

+ +

이벤트 받기

+ +

각 이벤트가 발생할 때마다 listener() 함수로 넘겨집니다. 이 함수의 코드는 아래와 같습니다.

+ +
function listener(e) {
+  var l = document.createElement("li");
+  switch(e.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + e.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+
+ +

이 코드 역시 굉장히 단순합니다. {{ domxref("event.type") }} 을 보고 어떤 이벤트가 발생했는지 확인합니다. 그리고 {{ HTMLElement("ul") }} (순서 없는 리스트)에 그 이벤트의 로그를 나타내는 엘리먼트를 추가합니다.

+ +

결과는 다음과 같습니다.

+ +
    +
  • Started: elapsed time is 0
    • +
  • New loop started at time 3.01200008392334
    • +
  • New loop started at time 6.00600004196167
    • +
  • Ended: elapsed time is 9.234000205993652
    • +
+ +

이벤트가 발생한 시각이 위에서 지정한 애니메이션 시간과 굉장히 가깝지만 정확히 같지는 않다는걸 기억하세요. 또 애니메이션의 반복이 끝나는 순간에는  animationiteration 이벤트가 발생하지 않고 animationend 이벤트가 발생했다는걸 기억하세요.

+ +

HTML 코드 

+ +

완벽을 위해 예제에서 사용한 HTML 코드도 첨부합니다. 여기에는 페이지 내용뿐만 아니라 이벤트 로깅을 위한 ul 엘리먼트도 있습니다. 

+ +
<body onload="setup()">
+  <h1 id="watchme">Watch me move</h1>
+  <p>This example shows how to use CSS animations to make <code>h1</code> elements
+  move across the page.</p>
+  <p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
+  <ul id="output">
+  </ul>
+</body>
+
+ +

{{EmbedLiveSample('애니메이션_이벤트_사용하기', '600', '300')}}

+ +

더 보기

+ + diff --git a/files/ko/web/css/css_background_and_borders/border-image_generator/index.html b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html new file mode 100644 index 0000000000..01ae23c400 --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/border-image_generator/index.html @@ -0,0 +1,2627 @@ +--- +title: Border-image 생성기 +slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +--- +

이 도구를 사용해 CSS3 {{cssxref("border-image")}} 값을 생성할 수 있습니다.

+ +
+

Border Image Generator

+ +

HTML Content

+ +
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+
+ +
{{ EmbedLiveSample('Border_Image_Generator', '100%', '1270px') }}
diff --git a/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html new file mode 100644 index 0000000000..a5db192618 --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/border-radius_generator/index.html @@ -0,0 +1,1601 @@ +--- +title: Border-radius 생성기 +slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +tags: + - CSS + - CSS Borders + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +--- +

이 도구를 사용해 CSS3 {{cssxref("border-radius")}} 값을 생성할 수 있습니다.

+ +
+

border-radius

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{ EmbedLiveSample('border-radius-generator', 700, 900) }}
diff --git a/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html new file mode 100644 index 0000000000..00b22833fb --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/box-shadow_generator/index.html @@ -0,0 +1,2881 @@ +--- +title: Box-shadow 생성기 +slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +tags: + - CSS + - Tools +translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +--- +

이 도구를 사용해 CSS {{cssxref("box-shadow")}} 효과를 생성할 수 있습니다.

+ +
+

box-shadow generator

+ +

HTML Content

+ +
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Shadow properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Class element properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    CSS Code </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+ +

CSS Content

+ +
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+
+ +

JavaScript Content

+ +

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+
+
+ +
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}
diff --git a/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html new file mode 100644 index 0000000000..73d1758964 --- /dev/null +++ b/files/ko/web/css/css_background_and_borders/using_css_multiple_backgrounds/index.html @@ -0,0 +1,55 @@ +--- +title: 여러개의 배경 지정하기 +slug: Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +

{{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/index.html b/files/ko/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..4fc6295885 --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,113 @@ +--- +title: CSS 배경 및 테두리 +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +
{{CSSRef}}
+ +

CSS Backgrounds and Borders 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다. (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("background")}}
    • +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-position-x")}}
    • +
  • {{cssxref("background-position-y")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
  • {{cssxref("border")}}
    • +
  • {{cssxref("border-bottom")}}
    • +
  • {{cssxref("border-bottom-color")}}
    • +
  • {{cssxref("border-bottom-left-radius")}}
    • +
  • {{cssxref("border-bottom-right-radius")}}
    • +
  • {{cssxref("border-bottom-style")}}
    • +
  • {{cssxref("border-bottom-width")}}
    • +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-color")}}
    • +
  • {{cssxref("border-image")}}
    • +
  • {{cssxref("border-image-outset")}}
    • +
  • {{cssxref("border-image-repeat")}}
    • +
  • {{cssxref("border-image-slice")}}
    • +
  • {{cssxref("border-image-source")}}
    • +
  • {{cssxref("border-image-width")}}
    • +
  • {{cssxref("border-left")}}
    • +
  • {{cssxref("border-left-color")}}
    • +
  • {{cssxref("border-left-style")}}
    • +
  • {{cssxref("border-left-width")}}
    • +
  • {{cssxref("border-radius")}}
    • +
  • {{cssxref("border-right")}}
    • +
  • {{cssxref("border-right-color")}}
    • +
  • {{cssxref("border-right-style")}}
    • +
  • {{cssxref("border-right-width")}}
    • +
  • {{cssxref("border-style")}}
    • +
  • {{cssxref("border-top")}}
    • +
  • {{cssxref("border-top-color")}}
    • +
  • {{cssxref("border-top-left-radius")}}
    • +
  • {{cssxref("border-top-right-radius")}}
    • +
  • {{cssxref("border-top-style")}}
    • +
  • {{cssxref("border-top-width")}}
    • +
  • {{cssxref("border-width")}}
    • +
  • {{cssxref("box-shadow")}}
    • +
+
+ +

도구

+ +
+
다수의 배경 사용하기
+
하나의 요소에 여러 배경을 적용하는 법을 배웁니다.
+
배경 이미지 크기 조정하기
+
배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.
+
CSS로 HTML 요소에 색 입히기
+
HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.
+
Border-image 생성기
+
테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.
+
Border-radius 생성기
+
둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.
+
Box-shadow 생성기
+
요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }}
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}}
diff --git a/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html new file mode 100644 index 0000000000..f3f0d6529b --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html @@ -0,0 +1,137 @@ +--- +title: 배경 이미지 크기 조정하기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate + - Reference + - Web +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +
{{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/using_multiple_backgrounds/index.html b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..1e0e3deeca --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,59 @@ +--- +title: 한 번에 여러 배경 사용하기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +
{{CSSRef}}
+ +

여러 개의 배경을 한 번에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다. 마지막 배경에만 배경색을 적용할 수 있습니다.

+ +

여러 배경을 적용하는 건 쉽습니다.

+ +
.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") }}에는 목록을 값으로 지정할 수 있습니다.

+ +

예제

+ +

다음 예제는 Firefox 로고, 거품, 선형 그레이디언트 총 세 개의 배경을 사용합니다.

+ +

HTML

+ +
<div class="multi-bg-example"></div>
+ +

CSS

+ +
.multi-bg-example {
+  width: 100%;
+  height: 400px;
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+      url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+      linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
+  background-repeat: no-repeat,
+      no-repeat,
+      no-repeat;
+  background-position: bottom right,
+      left,
+      right;
+}
+ +

결과

+ +

{{EmbedLiveSample('예제','600','400')}}

+ +

결과에서 볼 수 있듯, {{cssxref("background-image")}}에서 첫 번째로 지정한 Firefox 로고가 맨 위, 그 다음이 거품 그림이고 선형 그레이디언트는 모든 '이미지' 밑에 위치합니다. 하위 속성({{ cssxref("background-repeat") }}, {{ cssxref("background-position") }})의 각 값도 순서에 맞는 배경에 적용됩니다. 따라서 background-repeat의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.

+ +

같이 보기

+ + diff --git a/files/ko/web/css/css_basic_user_interface/index.html b/files/ko/web/css/css_basic_user_interface/index.html new file mode 100644 index 0000000000..4baba659db --- /dev/null +++ b/files/ko/web/css/css_basic_user_interface/index.html @@ -0,0 +1,75 @@ +--- +title: CSS Basic User Interface +slug: Web/CSS/CSS_Basic_User_Interface +tags: + - CSS + - CSS Basic User Interface + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Basic_User_Interface +--- +
{{CSSRef}}
+ +

CSS Basic User Interface는 사용자 인터페이스와 연관된 렌더링 및 기능의 동작 방식을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("box-sizing")}}
    • +
  • {{CSSxRef("cursor")}}
    • +
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • +
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("outline")}}
    • +
  • {{CSSxRef("outline-width")}}
    • +
  • {{CSSxRef("outline-style")}}
    • +
  • {{CSSxRef("outline-color")}}
    • +
  • {{CSSxRef("outline-offset")}}
    • +
  • {{CSSxRef("resize")}}
    • +
  • {{CSSxRef("text-overflow")}}
    • +
  • {{CSSxRef("user-select")}}
    • +
+
+ +

안내서

+ +
+
cursor 속성값에 URL 사용하기
+
URL을 {{cssxref("cursor")}} 속성에 사용해 사용자 지정 커서를 생성하는 방법을 설명합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}}
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Initial definition.
diff --git a/files/ko/web/css/css_box_model/index.html b/files/ko/web/css/css_box_model/index.html new file mode 100644 index 0000000000..aac36b356a --- /dev/null +++ b/files/ko/web/css/css_box_model/index.html @@ -0,0 +1,113 @@ +--- +title: CSS Basic Box Model +slug: Web/CSS/CSS_Box_Model +tags: + - CSS + - CSS Box Model + - Overview + - Reference +translation_of: Web/CSS/CSS_Box_Model +--- +
{{CSSRef}}
+ +

CSS Basic Box Model은 각 요소에 대해 시각적 서식 모델에 따라 생성하고 배치하는 사각형 박스(안팎 여백 포함)를 위한 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +

박스 내 콘텐츠 흐름을 제어하는 속성

+ +
+
    +
  • {{cssxref("overflow")}}
    • +
  • {{cssxref("overflow-x")}}
    • +
  • {{cssxref("overflow-y")}}
    • +
+
+ +

박스 크기를 제어하는 속성

+ +
+
    +
  • {{cssxref("height")}}
    • +
  • {{cssxref("width")}}
    • +
  • {{cssxref("max-height")}}
    • +
  • {{cssxref("max-width")}}
    • +
  • {{cssxref("min-height")}}
    • +
  • {{cssxref("min-width")}}
    • +
+
+ +

박스의 바깥 여백을 제어하는 속성

+ +
+
    +
  • {{cssxref("margin")}}
    • +
  • {{cssxref("margin-bottom")}}
    • +
  • {{cssxref("margin-left")}}
    • +
  • {{cssxref("margin-right")}}
    • +
  • {{cssxref("margin-top")}}
    • +
  • {{cssxref("margin-trim")}} {{Experimental_Inline}}
    • +
+
+ +

박스의 안쪽 여백을 제어하는 속성

+ +
+
    +
  • {{cssxref("padding")}}
    • +
  • {{cssxref("padding-bottom")}}
    • +
  • {{cssxref("padding-left")}}
    • +
  • {{cssxref("padding-right")}}
    • +
  • {{cssxref("padding-top")}}
    • +
+
+ +

기타 속성

+ +
+
    +
  • {{cssxref("visibility")}}
    • +
+
+ +

안내서

+ +
+
CSS 박스 모델 입문
+
CSS의 기초 개념 중 하나인 박스 모델을 설명합니다. 박스 모델은 CSS가 요소와 요소의 콘텐츠, 안쪽 여백, 테두리, 바깥 여백 영역을 배치하는 법을 정의합니다.
+
여백 상쇄 정복
+
어떤 경우, 두 개의 인접한 바깥 여백은 하나로 상쇄됩니다. 이 글은 상쇄가 언제 어떻게 일어나고 이를 어떻게 제어하는지 설명합니다.
+
시각적 서식 모델
+
시각적 서식 모델을 설명합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}}margin-trim 추가.
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}초기 정의
diff --git a/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html b/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html new file mode 100644 index 0000000000..dd7718f701 --- /dev/null +++ b/files/ko/web/css/css_box_model/introduction_to_the_css_box_model/index.html @@ -0,0 +1,70 @@ +--- +title: CSS 기본 박스 모델 입문 +slug: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +tags: + - CSS + - CSS Box Model + - Guide + - Layout +translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +--- +
{{CSSRef}}
+ +

문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정합니다.

+ +

하나의 박스는 네 부분(영역)으로 이루어집니다. 각 영역을 콘텐츠 영역, 안쪽 여백(패딩) 영역, 테두리 영역, 그리고 바깥 여백(마진) 영역이라고 부릅니다.

+ +

CSS Box model

+ +

콘텐츠 영역(content area)은 콘텐츠 경계(content edge)가 감싼 영역으로, 글이나 이미지, 비디오 등 요소의 실제 내용을 포함합니다. 콘텐츠 영역의 크기는 콘텐츠 너비(콘텐츠 박스 너비)와 콘텐츠 높이(콘텐츠 박스 높이)입니다. 배경색과 배경 이미지를 가지고 있기도 합니다.

+ +

{{cssxref("box-sizing")}} 속성의 값이 기본값인 content-box이며 요소가 블록 레벨 요소인 경우, 콘텐츠 영역의 크기를 {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, {{cssxref("max-height")}} 속성을 사용해 사용해 명시적으로 설정할 수 있습니다.

+ +

안쪽 여백 영역(패딩 영역, padding area)은 안쪽 여백 경계(padding edge)가 감싼 영역으로, 콘텐츠 영역을 요소의 안쪽 여백까지 포함하는 크기로 확장합니다. 영역의 크기는 안쪽 여백 박스 너비와 안쪽 여백 박스 높이입니다.

+ +

안쪽 여백의 두께는 {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}와 단축 속성인 {{cssxref("padding")}}이 결정합니다.

+ +

테두리 영역(border area)은 테두리 경계(border edge)가 감싼 영역으로, 안쪽 여백 영역을 요소의 테두리까지 포함하는 크기로 확장합니다. 영역의 크기는 테두리 박스 너비와 테두리 박스 높이입니다.

+ +

테두리의 두께는 {{cssxref("border-width")}}와 단축 속성인 {{cssxref("border")}}가 결정합니다. {{cssxref("box-sizing")}} 속성의 값이 border-box라면 테두리 영역의 크기를 {{cssxref("width")}}, {{cssxref("min-width")}}, {{cssxref("max-width")}}, {{ cssxref("height") }}, {{cssxref("min-height")}}, {{cssxref("max-height")}} 속성을 사용해 명시적으로 설정할 수 있습니다. 박스의 배경({{cssxref("background-color")}} 또는 {{cssxref("background-image")}})은 테두리의 바깥 경계까지 늘어나고, 그릴 땐 테두리에 가려집니다. 이 동작 방식은 {{cssxref("background-clip")}} 속성으로 바꿀 수 있습니다.

+ +

바깥 여백 영역(마진 영역, margin area)은 바깥 여백 경계(margin edge)가 감싼 영역으로, 테두리 요소를 확장해 요소와 인근 요소 사이의 빈 공간까지 포함하도록 만듭니다. 영역의 크기는 바깥 여백 박스 너비와 바깥 여백 박스 높이입니다.

+ +

바깥 여백 영역의 크기는 {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}와 단축 속성인 {{cssxref("margin")}}이 결정합니다. 여백 상쇄가 발생할 때는 요소 간에 바깥 여백이 공유되므로 여백 영역이 명확하게 결정되지 않습니다.

+ +

끝으로, 비대체 인라인 요소가 차지하는 공간의 크기(줄 높이에 기여하는 양)는, 요소 주위에 테두리와 안쪽 여백이 표시되더라도 {{cssxref("line-height")}} 속성으로 결정한다는 점을 주의하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#intro')}}{{Spec2('CSS3 Box')}}
{{ SpecName("CSS2.1","box.html#box-dimensions")}}{{Spec2('CSS2.1')}}Though more precisely worded, there is no practical change.
{{ SpecName("CSS1","#formatting-model")}}{{Spec2('CSS1')}}Initial definition.
+ +

같이 보기

+ +
    +
  • {{css_key_concepts}}
    • +
diff --git a/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html new file mode 100644 index 0000000000..1dd8b04888 --- /dev/null +++ b/files/ko/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -0,0 +1,82 @@ +--- +title: 여백 상쇄 정복 +slug: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +tags: + - CSS + - CSS Box Model + - Guide + - Reference +translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +--- +
{{CSSRef}}
+ +

여러 블록의 위쪽 및 아래쪽 바깥 여백(마진)은 경우에 따라 제일 큰 여백의 크기를 가진 단일 여백으로 결합(상쇄)되곤 합니다. 이런 동작을 여백 상쇄라고 부릅니다. 단, 플로팅 요소와 절대 위치를 지정한 요소의 여백은 절대 상쇄되지 않습니다.

+ +

여백 상쇄는 다음과 같은 세 가지 기본 상황에 발생합니다.

+ +
+
인접 형제
+
인접 형제 요소간의 바깥 여백은 서로 상쇄됩니다. (단, 뒤쪽 형제가 플로팅을 해제해야 하는 경우는 예외)
+
부모와 자손을 분리하는 콘텐츠 없음
+
부모 블록에 테두리, 안쪽 여백, 인라인 부분이 없고 블록 서식 맥락이 생성되지 않았으며 부모의 {{cssxref("margin-top")}}을 자손의 margin-top과 분리할 권한이 없는 경우, 또는, 부모 블록에 테두리, 안쪽 여백, 인라인 콘텐츠가 없으며 부모의 {{cssxref("margin-bottom")}}과 자손의 margin-bottom을 분리할 {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}가 존재하지 않는 경우 부모와 자손의 여백이 상쇄됩니다. 상쇄된 여백은 부모 블록 바깥에 위치합니다.
+
빈 블록
+
테두리, 안쪽 여백, 인라인 콘텐츠, {{cssxref("height")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}가 없으면 블록의 {{cssxref("margin-top")}}과 {{cssxref("margin-bottom")}}이 서로 상쇄됩니다.
+
+ +

다음은 참고할만한 사항입니다.

+ +
    +
  • (세 개 이상의 여백 사이의) 더 복잡한 여백 상쇄는 위의 기본 상황이 서로 결합되어 발생합니다.
    • +
  • 위의 규칙은 바깥 여백이 0이어도 적용되므로, 두 번째 규칙을 만족하는 경우 부모의 바깥 여백이 0이건 아니건 자손의 바깥 여백은 부모 밖으로 나오게 됩니다.
    • +
  • 음수 값을 가진 바깥 여백을 포함할 경우, 상쇄된 여백의 크기는 제일 큰 양수 여백과 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 합이 됩니다.
    • +
  • 모든 바깥 여백이 음수 값을 가질 경우, 상쇄된 여백의 크기는 제일 작은(음의 방향으로, 절댓값이 제일 큰) 여백의 크기가 됩니다. 인접 요소와 중첩 요소 모두에 적용됩니다.
    • +
+ +

예제

+ +

HTML

+ +
<p>The bottom margin of this paragraph is collapsed …</p>
+<p>… with the top margin of this paragraph, yielding a margin of <code>1.2rem</code> in between.</p>
+
+<div>This parent element contains two paragraphs!
+  <p>This paragraph has a <code>.4rem</code> margin between it and the text above.</p>
+  <p>My bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p>
+</div>
+
+<p>I am <code>2rem</code> below the element above.</p>
+ +

CSS

+ +
div {
+  margin: 2rem 0;
+  background: lavender;
+}
+
+p {
+  margin: .4rem 0 1.2rem 0;
+  background: yellow;
+}
+ +

결과

+ +

{{EmbedLiveSample('예제', 'auto', 350)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}초기 정의
diff --git a/files/ko/web/css/css_charsets/index.html b/files/ko/web/css/css_charsets/index.html new file mode 100644 index 0000000000..484285591d --- /dev/null +++ b/files/ko/web/css/css_charsets/index.html @@ -0,0 +1,44 @@ +--- +title: CSS Charsets +slug: Web/CSS/CSS_Charsets +tags: + - CSS + - CSS Charsets + - Overview + - Reference +translation_of: Web/CSS/CSS_Charsets +--- +
{{CSSRef}}
+ +

CSS Charsets는 스타일 시트에서 사용하는 문자 집합을 정의할 수 있는 CSS 모듈입니다.

+ +

참고서

+ +

@규칙

+ +
+
    +
  • {{cssxref("@charset")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}초기 정의
+ +
 
diff --git a/files/ko/web/css/css_color/index.html b/files/ko/web/css/css_color/index.html new file mode 100644 index 0000000000..06d7418de0 --- /dev/null +++ b/files/ko/web/css/css_color/index.html @@ -0,0 +1,110 @@ +--- +title: CSS Color +slug: Web/CSS/CSS_Color +tags: + - CSS + - CSS Colors + - HTML Colors + - Overview + - Reference +translation_of: Web/CSS/CSS_Color +--- +
{{CSSRef}}
+ +

CSS 색상은 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 CSS 모듈입니다. {{cssxref("<color>")}} 값을 취하는 모든 CSS 속성이 이 모듈에 속하는건 아니지만 의존성은 가지고 있습니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("color")}}
    • +
  • {{cssxref("color-adjust")}}
    • +
  • {{cssxref("opacity")}}
    • +
+
+ +

자료형

+ +
+
    +
  • {{cssxref("<color>")}}
    • +
+
+ +

안내서

+ +
+
CSS를 사용하여 HTML 요소에 색상 적용하기
+
CSS를 사용하여 다양한 유형의 콘텐츠에 색상을 적용하는 방법에 대한 안내서입니다. 모든 색상 관련 CSS 속성이 적용됩니다.​
+
+ +

도구

+ +
+
색상 선택 도구
+
이 도구를 사용하면 맞춤 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ +

color 속성

+ +
+ + +

{{Compat("css.properties.color")}}

+ +

color-adjust 속성

+ +
+ + +

{{Compat("css.properties.color-adjust")}}

+ +

opacity 속성

+ +
+ + +

{{Compat("css.properties.opacity")}}

+
+
+
+ +

같이 보기

+ +
    +
  • 다른 사양의 일부 색상 관련 속성 : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, and {{cssxref("column-rule-color")}}
    • +
  • CSS에서는 그레이디언트가 색상이 아니라 이미지입니다.
    • +
diff --git a/files/ko/web/css/css_colors/color_picker_tool/index.html b/files/ko/web/css/css_colors/color_picker_tool/index.html new file mode 100644 index 0000000000..f5437c05b5 --- /dev/null +++ b/files/ko/web/css/css_colors/color_picker_tool/index.html @@ -0,0 +1,3238 @@ +--- +title: Color picker tool +slug: Web/CSS/CSS_Colors/Color_picker_tool +translation_of: Web/CSS/CSS_Colors/Color_picker_tool +--- +
+

ColorPicker tool

+ +

HTML

+ +
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+
+ +

CSS

+ +
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+
+ +

JavaScript Content

+ +
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+
+ +

{{CSSRef}}

+ +

이 도구를 사용하면 웹용 사용자 정의 색상을 쉽게 만들고 조정하고 실험 할 수 있습니다. 또한 HEXA 색상, RGB (빨강 / 녹색 / 파랑) 및 HSL (색조 / 채도 / 밝기)를 비롯하여 CSS 에서 지원하는 다양한 색상 형식 간에 쉽게 변환 할 수 있습니다 . RGB (rgba) 및 HSL (hsla) 형식에서도 알파 채널을 제어 할 수 있습니다.

+ +

색상을 정의하는 매개 변수를 조정하면 세 가지 표준 웹 CSS 형식으로 모두 표시됩니다. 또한 현재 선택한 색상을 기반으로 HSL 및 HSV 용 팔레트와 알파가 생성됩니다. "스포이드"스타일 색상 선택 도구 상자는 HSL 또는 HSV 형식으로 전환 할 수 있습니다. 도구의 바닥에있는 상자로 색상을 드래그하고 서로 위로 움직여 색상을 비교할 수 있습니다. 상대 Z 색인 값을 조정하여 서로를 앞뒤로 이동하십시오.

+ +

이 도구는 HTML 에 적용 할 완벽한 CSS 색상을 식별하는 데 도움을줍니다 .

+ +

 

+ +

 

+ +

{{EmbedLiveSample ( 'ColorPicker_Tool', '100 %', '900')}}

+ +

위에서 작성한 생성 된 색상은 달리 명시하지 않는 한 CSS 및 HTML에서 색상이 사용되는 모든 위치에서 사용할 수 있습니다.

+ +

 

+ +

 

+ +

See also

+ +

For more on using color, see:

+ + diff --git a/files/ko/web/css/css_columns/index.html b/files/ko/web/css/css_columns/index.html new file mode 100644 index 0000000000..efe31f5761 --- /dev/null +++ b/files/ko/web/css/css_columns/index.html @@ -0,0 +1,89 @@ +--- +title: CSS Multi-column Layout +slug: Web/CSS/CSS_Columns +tags: + - CSS + - CSS Multi-column Layout + - Layout + - Overview + - Reference +translation_of: Web/CSS/CSS_Columns +--- +
{{CSSRef}}
+ +

CSS Multi-column Layout은 다단 레이아웃을 정의하는 CSS 모듈입니다. 레이아웃에서 단의 숫자와 콘텐츠가 하나의 단에서 다른 단으로 흐르는 방식, 단 사이의 간격, 구분선과 구분선의 모양 등의 지원을 포함하고 있습니다.

+ +

참고

+ +

CSS 속성

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("column-count")}}
    • +
  • {{cssxref("column-fill")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("column-rule")}}
    • +
  • {{cssxref("column-rule-color")}}
    • +
  • {{cssxref("column-rule-style")}}
    • +
  • {{cssxref("column-rule-width")}}
    • +
  • {{cssxref("column-span")}}
    • +
  • {{cssxref("column-width")}}
    • +
  • {{cssxref("columns")}}
    • +
+
+ +

관련 CSS Fragmentation 속성

+ +
+
    +
  • {{cssxref("break-after")}}
    • +
  • {{cssxref("break-before")}}
    • +
  • {{cssxref("break-inside")}}
    • +
  • {{cssxref("orphans")}}
    • +
  • {{cssxref("widows")}}
    • +
+
+ +

안내서

+ +
+
다단 레이아웃 기초 개념
+
다단 레이아웃 명세를 훑어봅니다.
+
단 꾸미기
+
구분선과 단 사이 간격을 조절합니다.
+
폭과 균형
+
요소가 모든 단에 걸쳐있도록 만들고, 한 단이 채워지는 방식을 조정합니다.
+
다단에서 오버플로 다루기
+
어떤 요소가 자신의 단을 넘쳤을 때 일어나는 일과, 컨테이너 너비에 맞추기에는 너무 많은 단이 들어있을 때 발생하는 일을 배웁니다.
+
다단에서 콘텐츠 끊기
+
CSS Fragmentation 명세의 소개와 함께 단 콘텐츠를 끊는 법을 배웁니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}초기 정의
+ +

같이 보기

+ + diff --git a/files/ko/web/css/css_conditional_rules/index.html b/files/ko/web/css/css_conditional_rules/index.html new file mode 100644 index 0000000000..22576d5256 --- /dev/null +++ b/files/ko/web/css/css_conditional_rules/index.html @@ -0,0 +1,44 @@ +--- +title: CSS Conditional Rules +slug: Web/CSS/CSS_Conditional_Rules +tags: + - CSS + - CSS Conditional Rules + - Overview + - Reference +translation_of: Web/CSS/CSS_Conditional_Rules +--- +
{{CSSRef}}
+ +

CSS Conditional Rules는 프로세서 또는 스타일 시트에 적용되는 문서의 기능에만 기반을 두는 규칙 집합을 정의할 수 있는 CSS 모듈입니다.

+ +

참고서

+ +

@규칙

+ +
+
    +
  • {{cssxref("@document")}}
    • +
  • {{cssxref("@media")}}
    • +
  • {{cssxref("@supports")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}초기 정의
diff --git a/files/ko/web/css/css_containment/index.html b/files/ko/web/css/css_containment/index.html new file mode 100644 index 0000000000..bbfe8f3e7c --- /dev/null +++ b/files/ko/web/css/css_containment/index.html @@ -0,0 +1,123 @@ +--- +title: CSS Containment +slug: Web/CSS/CSS_Containment +translation_of: Web/CSS/CSS_Containment +--- +

{{CSSRef}}
+ CSS Containment 사양의 목표는 개발자가 페이지의 하위 트리(subtree)를 페이지의 나머지 부분과 분리할 수 있도록 하여 웹 페이지의 성능을 향상시키는 것입니다. 브라우저가 페이지의 일부가 독립적임을 인식하면 렌더링을 최적화 하고 성능을 개선 할 수 있습니다. 사양은 단일 CSS 속성(property) {{cssxref("contain")}}을 정의합니다. 이 문서는 사양의 기본 목표를 설명합니다.

+ +

기본 예제

+ +

많은 웹 페이지에는 서로 독립적인 여러 섹션이 포함되어 있습니다. 예를들면 아래 마크업에서와 같이 아티클, 헤드라인, 콘텐츠 로 이루어진 목록입니다.

+ +
<h1>My blog</h1>
+<article>
+  <h2>Heading of a nice article</h2>
+  <p>Content here.</p>
+</article>
+<article>
+  <h2>Another heading of another article</h2>
+  <p>More content here.</p>
+</article>
+ +

각 아티클에는 CSS에서 {{cssxref("contain")}} 속성의 값으로 content 가 적용되어 있습니다.

+ +
article {
+  contain: content;
+}
+ +

각 아티클은 페이지의 다른 아티클과 독립적이므로 브라우저에 이러한 사실을 알리기 위해 contain: content가 포함되어 있습니다. 그러면 브라우저는 이 정보를 사용하여 컨텐츠를 렌더링하는 방법을 결정할 수 있습니다. 예를들어 볼 수 있는 영역 밖에있는 아티클은 렌더링하지 않을 수 있습니다. 

+ +

각 <article> 에 contain 속성의 값을 content 로 제공하면, 새 요소(element)가 삽입될 때 브라우저는 containing 요소들의 하위 트리 외부 영역을 relayout(reflow)하거나 repaint 할 필요가 없음을 인식합니다. <article> 이 내용에 따라 크기가 달라지도록 스타일을 지정하더라도(예: height: auto), 브라우저는 크기 변경을 고려해야 할 수 있습니다.

+ +

우리는 contain 속성을 통해 각 아티클이 독립적이라고 말했습니다.

+ +

content 값은 contain: layout paint의 약어입니다. 브라주어에 요소의 내부 레이아웃이 페이지의 나머지 부분과 완전히 분리되어 있으며, 요소에 대한 모든 것이 경계 내부에 그려져 있음을 알려줍니다. overflow되어 보이는 것이 없습니다.

+ +

이 정보는 페이지를 작성하는 웹 개발자에게 일반적으로 알려져 있으며, 사실 매우 분명합니다. 그러나 브라우저는 귀하의 의도를 추측할 수 없고, 아티클이 완전히 독립적일 것이라고 가정할 수 없습니다. 따라서 이 속성은 브라우저에게 이 사실을 설명하고, 그 정보를 기반으로 성능 최적화를 수행할 수 있는 좋은 방법을 제공합니다.

+ +

주요 개념 및 용어

+ +

이 사양은 오로지 {{cssxref("contain")}} 이라는 하나의 속성(property)만 정의합니다. 이 속성의 값은 해당 요소에 적용 할 포함 유형을 나타냅니다.

+ +

Layout containment

+ +
article {
+  contain: layout;
+}
+ +

Layout 은 일반적으로 전체 문서로 범위가 지정됩니다. 즉, 하나의 요소를 이동하면 전체 문서를 다른 곳으로 이동할 수 있는 것처럼 처리해야 합니다. 그러나 contain: layout 을 사용하면 브라우저에 이 요소만 확인하면 된다고 알려줄 수 있습니다. 요소 내부의 모든 항목은 해당 요소로 범위가 지정되고, 페이지의 나머지 부분에는 영향을 주지 않습니다. 그리고 containing box는 독립적인 formatting context를 설정합니다.

+ +

추가사항

+ +
    +
  • float 레이아웃은 독립적으로 수행됩니다.
    • +
  • Margin 이 layout containment 경계를 가로질러 병합(collapse)되지 않습니다.
    • +
  • layout 컨테이너는 position: absolute/fixed 의 하위 항목에 대한 containing block이 됩니다.
    • +
  • containing box는 stacking context를 생성합니다. 따라서 {{cssxref("z-index")}} 를 사용할 수 있습니다.
    • +
+ +

Paint containment

+ +
article {
+  contain: paint;
+}
+ +

Paint containment 는 기본적으로 박스를 주요 박스(principal box)의 패딩 경계에 클립(clip - 맞춰서 채우기)합니다. overflow되어 보이는 것이 없습니다. paint containment 도 layout containment 와 마찬가지입니다. (위 참조).

+ +

또다른 장점은 containing box가 화면 밖에 있으면, 브라우저가 contained 요소를 paint 할 필요가 없다는 것입니다. 이 때 요소가 box에 포함되어 있으므로 화면에 표시되지 않아야 합니다.

+ +

Size containment

+ +
article {
+  contain: size;
+}
+ +

Size containment 는 자체적으로 사용될 때 성능 최적화 방법을 많이 제공하지 않습니다. 그러나 이는 요소의 자식 크기가 요소 자체의 크기에 영향을 줄 수 없음을 의미합니다. 요소의 크기는 자식이 존재하지 않는 것처럼 계산됩니다.

+ +

contain: size 를 적용하면, 이를 적용한 요소의 크기도 지정해야 합니다. 수동으로 크기를 지정하지 않으면, 대부분의 경우 크기가 0이 됩니다.

+ +

Style containment

+ +
article {
+  contain: style;
+}
+ +

style containment 는 이름에도 불구하고 Shadow DOM에서 얻을 수 있는 범위(scope) 스타일을 제공하지 않습니다. 주요 사용 사례는, 요소에서 CSS Counter 가 변경되어 나머지 트리에 영향을 미칠 수 있는 상황을 방지하는 것입니다.

+ +

contain: style 을 사용하면 {{cssxref("counter-increment")}} 와 {{cssxref("counter-set")}} 속성이 해당 하위 트리로만 범위가 지정된 새 카운터를 만들 수 있습니다.

+ +
+

주의: style containment 는 사양에서 "at-risk" 이며, 모든 곳에서 지원하지 않을 수 있습니다(현재 파이어폭스는 지원하지 않음).

+
+ +

Special values

+ +

contain 에는 두 가지 특수한 값이 있습니다.

+ +
    +
  • content
    • +
  • strict
    • +
+ +

위의 예에서 첫 번째를 만났습니다. contain: content 는 layout 과 paint containment를 모두 활성화합니다. 사양에서는 이 값을 "광범위하게 적용하기에 합리적으로 안전" 하다고 설명합니다. size containment 를 적용하지 않으므로 자식의 크기에 의존하고, 때문에 박스 크기가 0이 될 위험이 없습니다.

+ +

가능한 많은 containment 를 얻으려면 contain: strict 를 사용할 수 있습니다. 이는 contain: size layout paint 와 같습니다. 또는 style containment 를 지원하는 브라우저에서는 다음과 같이 사용할 수 있습니다.

+ +
contain: strict;
+contain: strict style;
+ +

Reference

+ +

CSS Properties

+ +
    +
  • {{cssxref("contain")}}
    • +
+ +

External resources

+ + diff --git a/files/ko/web/css/css_device_adaptation/index.html b/files/ko/web/css/css_device_adaptation/index.html new file mode 100644 index 0000000000..bd55f655bc --- /dev/null +++ b/files/ko/web/css/css_device_adaptation/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Device Adaptation +slug: Web/CSS/CSS_Device_Adaptation +tags: + - CSS + - CSS Device Adaptation + - Overview + - Reference +translation_of: Web/CSS/CSS_Device_Adaptation +--- +
{{CSSRef}}
+ +

CSS Device Adapation은 뷰포트의 크기, 줌 배율(factor) 및 방향을 정의할 수 있는 CSS 모듈입니다.

+ +

참고서

+ +

@규칙

+ +
+
    +
  • {{cssxref("@viewport")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}초기 정의
diff --git a/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html new file mode 100644 index 0000000000..677cf2fdaf --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -0,0 +1,211 @@ +--- +title: Aligning Items in a Flex Container +slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container +--- +

{{CSSRef}}

+ +

flexbox가 웹 개발자들의 관심 받게된 이유 중 하나는 웹 최초로 최초로 적절한 정렬 기능을 제공했기 때문입니다. flexbox의 수직 정렬 기능을 이용하여 우리는 드디어 쉽게 박스(역주: 여기서 박스는 flex 컨테이너를 의미합니다)  내부를 중앙 정렬 할 수 있게 되었습니다. 이 가이드에서 우리는 flexbox의 정렬 및 끝 마추기 기능에 대해 자세히 살펴볼 것입니다.

+ +

박스 내부를 중앙 정렬 하기 위해 박스에 align-items 속성을 지정하면 교차 축에 대해 flex 항목을 정렬할 수 있습니다. 아래 경우, 교차 축은 수직 축입니다. justify-content 속성을 지정하면 flex 항목을 주축에 대해 정렬 할 수 있습니다. 아래 경우, 주축은 수평 방향입니다.

+ +

A containing element with another box centered inside it.

+ + + +

아래 예제의 코드를 살펴보세요. flex 컨테이너(역주: .box로 지정된 div 태그)나 flex 항목(역주:  .box div로 지정된 div 태그)의 크기를 조절해도 flex 컨테이너 내부는 중앙 정렬됨을 보실 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+ +

정렬 제어용 속성 목록

+ +

이 글에서 살펴볼 속성들은 다음과 같습니다.

+ +
    +
  • {{cssxref("justify-content")}} — 주축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
    • +
  • {{cssxref("align-items")}} — 교차축에 대해 flex 항목들을 정렬하는 방식을 제어. flex 컨테이너에 지정하는 속성.
    • +
  • {{cssxref("align-self")}} — 개별 flex 항목을 교차 축에 대해 정렬 하는 방식을 제어. flex 항목에 지정하는 속성.
    • +
  • {{cssxref("align-content")}} — described in the spec as for “packing flex lines”; controls space between flex lines on the cross axis.
    • +
+ +

또한, 이글에서 flexbox기반 정렬에서 margin 속성 값이 어떨게 쓰이는지 살펴볼 것입니다.

+ +
+

Note: The alignment properties in Flexbox have been placed into their own specification — CSS Box Alignment Level 3. It is expected that this spec will ultimately supersede the properties as defined in Flexbox Level One.

+
+ +

교차축

+ +

align-items와 align-self 속성들은 flex 항목들을 교차축으로 정렬하는 것을 제어합니다. 만약, flex-direction이 row로 설정되어있다면 열 (column) 아래로 정렬을 하게되고, flex-direction이 column으로 설정되어있다면 행 (row)을 따라 정렬됩니다. 

+ +

가장 간단한 flex예시는 교차축을 이용합니다. display: flex를 컨테이너에 추가하게되면, 모든 자식 항목들이 열 (row), 즉 가로 방향으로 정렬이 되는 flex 항목이 됩니다. 이 경우 가장 큰 y축의 크기, 즉 높이가 가장 큰 자식 항목이 교차축의 높이를 정의하게 되고, 나머지 자식 항목들은 이 높이에 맞추어 높이가 늘어나게 됩니다. 만약 flex 컨테이너의 높이가 지정이 되어있다면, 자식 항목 내용에 상관없이 지정된 높이 만큼 모든 자식 항목들이 늘어나게됩니다. 

+ +

Three items, one with additional text causing it to be taller than the others.

+ +

Three items stretched to 200 pixels tall

+ +

모든 항목들이 같은 높이를 갖게되는 이유는 교차축을 중심으로 정렬을 제어하는 속성인 align-items에 지정된 초기값이 stretch로 설정이 되어있기 때문입니다. 

+ +

이외에도 다른 값을 지정해서 항목들이 정렬되는 방식을 다르게 정의 할 수 있습니다:

+ +
    +
  • align-items: flex-start
    • +
  • align-items: flex-end
    • +
  • align-items: center
    • +
  • align-items: stretch
    • +
  • align-items: baseline
    • +
+ +

아래의 예시를 보면, align-items값이 stretch로 지정이 되어있습니다. 여기에 다른 값들을 넣어서 항목들이 flex 컨테이너 안에서 어떻게 정렬이 되는지 확인해보세요.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+ +

align-self로 항목 한 개를 정렬하기

+ +

The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container.

+ +

In this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-items: stretch; another item has been selected using its class of selected and given align-self: center. You can change the value of align-items or change the values of align-self on the individual items to see how this works.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} 

+ +

Changing the main axis

+ +

So far we have looked at the behaviour when our flex-direction is row, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+ +

If we change our flex-direction to column, align-items and align-self will align the items to the left and right.

+ +

Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+ +

You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+ +

Aligning content on the cross axis — the align-content property

+ +

So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines.

+ +

For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

+ +

The align-content property takes the following values:

+ +
    +
  • align-content: flex-start
    • +
  • align-content: flex-end
    • +
  • align-content: center
    • +
  • align-content: space-between
    • +
  • align-content: space-around
    • +
  • align-content: stretch
    • +
  • align-content: space-evenly (not defined in the Flexbox specification)
    • +
+ +

In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between, which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.

+ +

Try out the other values to see how the align-content property works.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+ +

Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+ +
+

Note: the value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

+
+ +

See the documentation for justify-content on MDN for more details on all of these values and browser support.

+ +

Aligning content on the main axis

+ +

Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — justify-content. This is because we are only dealing with items as a group on the main axis. With justify-content we control what happens with available space, should there be more space than is needed to display the items.

+ +

In our initial example with display: flex on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of justify-content being flex-start. Any available space is placed at the end of the items.

+ +

Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+ +

The justify-content property accepts the same values as align-content.

+ +
    +
  • justify-content: flex-start
    • +
  • justify-content: flex-end
    • +
  • justify-content: center
    • +
  • justify-content: space-between
    • +
  • justify-content: space-around
    • +
  • justify-content: stretch
    • +
  • justify-content: space-evenly (not defined in the Flexbox specification)
    • +
+ +

In the example below, the value of justify-content is space-between. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+ +

If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+ +

Alignment and Writing Modes

+ +

Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

+ +

Three items lined up on the left

+ +

However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

+ +

Three items lined up from the right

+ +

The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+ +

Alignment and flex-direction

+ +

The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

+ +

In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+ +

While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. flex-start will be where the start of a sentence of text would begin.

+ +

Diagram showing start on the left and end on the right.

+ +

You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

+ +

Diagram showing start at the top and end at the bottom.

+ +

If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. flex-start will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

+ +

Diagram showing start on the right and end on the left.

+ +

Diagram showing end at the top and start at the bottom

+ +

Using auto margins for main axis alignment

+ +

We don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

+ +

A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

+ +

Five items, in two groups. Three on the left and two on the right.

+ +

Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

+ +

In this live example, I have flex items arranged simply into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+ +

Future alignment features for Flexbox

+ +

At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the space-evenly value for align-content and justify-content properties.

+ +

The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.

+ +

My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article Box Alignment in Grid Layout, and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

+ +

See Also

+ + 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" new file mode 100644 index 0000000000..1966114608 --- /dev/null +++ "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" @@ -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/index.html b/files/ko/web/css/css_flexible_box_layout/index.html new file mode 100644 index 0000000000..d098a530b4 --- /dev/null +++ b/files/ko/web/css/css_flexible_box_layout/index.html @@ -0,0 +1,108 @@ +--- +title: CSS Flexible Box Layout +slug: Web/CSS/CSS_Flexible_Box_Layout +tags: + - CSS + - CSS Flexible Boxes + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Flexible_Box_Layout +--- +
{{CSSRef}}
+ +

CSS Flexible Box Layout은 사용자 인터페이스 디자인과 단방향 레이아웃에 최적화된 CSS 모듈입니다. 플렉스 레이아웃 모델에서는, 플렉스 컨테이너의 자식을 어떤 방향으로도 배치할 수 있으며, 자식의 크기도 유연하게("플렉시블") 빈 공간을 채우거나, 컨테이너를 넘어가지 않도록 줄어듭니다. 자식 간의 수평 및 수직 정렬 또한 쉽게 조작할 수 있습니다.

+ +

기본 예제

+ +

다음 예제의 컨테이너는 display: flex를 적용한 상태입니다. 따라서 컨테이너의 세 자식은 플렉스 항목이 됩니다. justify-content의 값은 space-between으로, 각 아이템을 주축(가로축)에 균일한 간격으로 배치합니다. 그래서 같은 양의 공간이 자식 사이에 균일하게 생기며 왼쪽과 오른쪽 아이템이 플렉스 컨테이너의 양 모서리에 붙어서 배치됩니다. 또한 align-items의 기본값인 stretch로 인해, 각 항목의 높이가 플렉스 컨테이너의 높이까지 늘어나서 세 자식 모두 제일 높이가 큰 항목과 같은 높이가 되는 것도 확인할 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}

+ +

참고서

+ +

CSS 속성

+ +
+
    +
  • {{cssxref("flex")}}
    • +
  • {{cssxref("flex-basis")}}
    • +
  • {{cssxref("flex-direction")}}
    • +
  • {{cssxref("flex-flow")}}
    • +
  • {{cssxref("flex-grow")}}
    • +
  • {{cssxref("flex-shrink")}}
    • +
  • {{cssxref("flex-wrap")}}
    • +
  • {{cssxref("order")}}
    • +
+
+ +

정렬 속성

+ +

align-content, align-self, align-items, justify-content 속성은 플렉스박스 명세에서 처음 나왔지만, 지금은 박스 정렬 명세가 정의하며 플렉스박스 명세는 박스 정렬 명세를 참조하고 있습니다. 추가 정렬 속성도 박스 정렬 명세가 가지고 있습니다.

+ +
+
    +
  • {{cssxref("justify-content")}}
    • +
  • {{cssxref("align-content")}}
    • +
  • {{cssxref("align-items")}}
    • +
  • {{cssxref("align-self")}}
    • +
  • {{cssxref("place-content")}}
    • +
  • {{cssxref("place-items")}}
    • +
  • {{cssxref("row-gap")}}
    • +
  • {{cssxref("column-gap")}}
    • +
  • {{cssxref("gap")}}
    • +
+
+ +

용어

+ +
+
    +
  • {{Glossary("Flexbox", "플렉스박스")}}
    • +
  • {{Glossary("Flex Container", "플렉스 컨테이너")}}
    • +
  • {{Glossary("Flex Item", "플렉스 항목")}}
    • +
  • {{Glossary("Main Axis", "주축")}}
    • +
  • {{Glossary("Cross Axis", "교차축")}}
    • +
  • {{Glossary("Flex", "플렉스")}}
    • +
+
+ +

안내서

+ +
+
플렉스박스의 기본 개념
+
플렉스박스의 기능 개요입니다.
+
다른 레이아웃과 플렉스박스의 관계
+
플렉스박스와 다른 레이아웃 방법, 그리고 다른 CSS 명세가 가진 관계를 설명합니다.
+
플렉스 컨테이너의 아이템 정렬하기
+
박스 정렬 속성이 플렉스박스에서 동작하는 방식을 설명합니다.
+
플렉스 아이템 배치하기
+
아이템의 순서와 방향을 바꾸는 여러 방법과, 이 때 발생할 수 있는 여러 문제를 다룹니다.
+
플렉스 아이템의 주요 축 비율 조절하기
+
flex-grow, flex-shrink, flex-basis 속성을 설명합니다.
+
플렉스 아이템 줄바꿈 마스터하기
+
여러 줄로 이뤄진 플렉스 컨테이너를 만드는 방법과, 컨테이너 아이템의 표시 방법 설정을 설명합니다.
+
플렉스박스의 일반적인 용례
+
일반적인 플렉스박스 디자인 패턴입니다.
+
플렉스박스의 하위 호환성
+
플렉스박스의 브라우저 상태, 상호 호환성 이슈와 함께 구형 브라우저와 이전 명세를 지원하는 방법을 설명합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}초기 정의.
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" new file mode 100644 index 0000000000..a9f75246aa --- /dev/null +++ "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" @@ -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_flow_layout/index.html b/files/ko/web/css/css_flow_layout/index.html new file mode 100644 index 0000000000..32928121ff --- /dev/null +++ b/files/ko/web/css/css_flow_layout/index.html @@ -0,0 +1,46 @@ +--- +title: CSS Flow Layout +slug: Web/CSS/CSS_Flow_Layout +tags: + - CSS 흐름 레이아웃 + - 흐름 +translation_of: Web/CSS/CSS_Flow_Layout +--- +
{{CSSRef}}
+ +

일반적인 흐름 Normal Flow, 또는 흐름 레이아웃 Flow Layout 은 그 레이아웃 변화가 있기 전까지 페이지 안의 블록 요소와 인라인 요소가 보여지는 방식 입니다. 흐름이란 본질적으로 레이아웃 아래 서로 같이 동작하고 서로에게 서로가 알려지는 것들의 집합 입니다. 만약에 어느 하나가 흐름에서 벗어나면 그것은 독립적으로 동작하게 됩니다.

+ +

일반적인 흐름에서, 인라인 요소들은 한줄러 늘어서 보여지게 되는데, 이는 문서의 Writing Mode 에 따라 문장 안의 단어들이 보여지는 방향을 따르게 됩니다. 블록 요소들은 문서의 Writing Mode 에서의 단락이 하나씩 나눠져 보여지듯이 나타납니다. 그래서 영어에서는, 인라인 요소들은 왼쪽에서 시작하여 하나씩 보여지고, 블록 요소들은 맨 위에서부터 페이지를 따라 아래로 보여집니다.

+ +

기본적인 예

+ +

아래의 예는 블록과 인라인 레벨 박스들을 설명합니다. 초록 테두리를 갖은 두개의 paragraph 요소들은 블록 레벨에 있어서 하나씩 위에서 아래로 나타납니다.

+ +

첫번째 문장은 파란 바탕을 갖은 span 요소를 포함하고 있습니다. 이 요소는 인라인 레벨에 있으며 따라서 문장 내에 이어져 나타납니다.

+ +

{{EmbedGHLiveSample("css-examples/layout/normal-flow.html", '100%', 720)}}

+ +

Guides

+ + + +

Reference

+ +

Glossary Entries

+ +
    +
  • {{Glossary("Block/CSS", "Block (CSS)")}}
    • +
+ + diff --git a/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html new file mode 100644 index 0000000000..3a91f6ba92 --- /dev/null +++ b/files/ko/web/css/css_flow_layout/intro_to_formatting_contexts/index.html @@ -0,0 +1,92 @@ +--- +title: 서식 상황 입문서 +slug: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +tags: + - BFC + - 대열 + - 블록 서식 상황 + - 서식 상황 + - 씨에스에스 + - 안내서 + - 조판 + - 중급 +translation_of: Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts +--- +
{{CSSRef}}
+ +

이 문서는 서식 상황의 개념을 소개합니다. 서식 상황에는 블록 서식 상황과 인라인 서식 상황, 가변 서식 상황을 포함한 여러 유형이 있습니다. 그들이 어떻게 동작하고 어떻게 그러한 동작을 활용할 수 있는지에 대한 기본 사항도 소개합니다.

+ +

페이지의 모든 것은 서식 상황(formatting context)의 일부이거나 특정 방식으로 콘텐츠를 배치하도록 정의된 영역입니다. 블록 서식 상황(block formatting context)은 블록 조판 규칙에 따라 자식 요소를 배치하고, 가변 서식 상황(flex formatting context)은 자식을 {{Glossary("flex item", "flex items")}}로 취급해 배치합니다. 각 서식 상황은 해당 상황에 속했을 때 조판이 어떻게 동작하는지에 대한 특정 규칙을 가지고 있습니다.

+ +

블록 서식 상황

+ +

문서의 최외각 요소는 우선 블록 조판 규칙을 수립합니다. 이를 일컬어 초기 블록 서식 상황(initial block formatting context)이라고 합니다. 이는 <html> 요소 블록 내부의 모든 요소는 블록 및 인라인 조판 규칙을 따르는 일반 대열에 따라 배치됨을 의미합니다. 블록 서식 상황(BFC)에 참여하는 요소는 씨에스에스 상자 모델에 의해 윤곽이 제시된 규칙을 사용합니다. 이 모델은 요소의 여백, 테두리 및 패딩이 동일한 서식 상황에서 서로 다른 블록과 상호 작용하는 방법을 정의합니다.

+ +

새로운 블록 서식 상황 생성하기

+ +

단지 {{HTMLElement("html")}} 요소만이 블록 서식 상황을 생성할 능력을 갖춘 것은 아닙니다. 기본값으로 블록 조판인 모든 요소는 역시 자기 자손 요소에 대한 블록 서식 상황을 생성합니다. 또한 기본값으로 주어지지 않아도 블록 서식 상황을 생성하도록 할 수 있는 씨에스에스 속성이 있습니다. 동 속성이 유용한 까닭은 새로운 블록 서식 상황이 자체적으로 주 조판 내부의 소형 조판이 된다는 점에서 최외곽 문서와 매우 유사하게 작동하기 때문입니다. 블록 서식 상황은 그 내부에 모든 요소를 포함하고, {{cssxref("float")}} 및 {{cssxref("clear")}}는 동일한 서식 상황에 속한 항목에만 적용되며, 여백 축소는 동일한 서식 상황 요소 사이에만 이뤄집니다.

+ +

우리 문서의 뿌리 요소인 ({{HTMLElement("html")}}) 이 외에도 새로운 블록 서식 상황은 다음과 같은 경우에 생성됩니다.

+ +
    +
  • {{cssxref("float")}}를 사용으로 요소가 부동체가 되는 경우
    • +
  • 절대 위치잡기한 요소, 여기에는 {{cssxref("position", "position: fixed", "#fixed")}} 혹은 {{cssxref("position", "position: sticky", "#sticky")}}가 포함됩니다.
    • +
  • {{cssxref("display", "display: inline-block", "#inline-block")}}이 적용된 요소
    • +
  • display: table-cell이 적용된 테이블 셀 또는 요소, 여기에는 display: table-* 속성 무리를 사용한 익명 테이블 셀도 포함됩니다.
    • +
  • display: table-caption이 적용된 테이블 캡션이나 요소
    • +
  • visible이외의 대열이탈 값을 갖는 블록 요소
    • +
  • display: flow-root 혹은 display: flow-root list-item 가 적용된 요소
    • +
  • {{cssxref("contain", "contain: layout", "#layout")}}, content, 또는 strict가 적용된 요소
    • +
  • {{Glossary("flex item", "flex items")}}
    • +
  • 격자 항목
    • +
  • 다단 컨테이너
    • +
  • {{cssxref("column-span")}}이 all로 설정된 요소
    • +
+ +

블록 서식 상황(BFC)을 생성하는 효과를 확인하기 위해 이들 중 몇 가지를 살펴봅시다.

+ +

아래 예제에서, 우리는 테두리가 적용된 <div> 내부에 부동체 요소 하나를 가지고 있습니다. 해당 div의 콘텐츠는 부동체 요소와 나란히 부동해왔습니다. 동 부동체의 콘텐츠가 자기 옆에 있는 콘텐츠보다 키가 크기 때문에 하위 <div>의 테두리는 이제 부동체에 전체에 걸쳐 진행하고 있습니다. 대열 요소와 탈대열 요소에 관한 안내서에서 설명했듯이, 동 부동체는 대열에서 제외되어 <div> 요소의 배경과 테두리는 콘텐츠만 포함하지 부동체는 포함하지 않습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/float.html", '100%', 720)}}

+ +

새로운 블록 서식 상황(BFC)을 생성하면 동 부동체를 포함할 겁니다. 그러려면 전형적인 방법은 overflow: auto를 설정하거나, 초깃값인 overflow: visible 이외의 다른 값을 설정하는 식이었습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-overflow.html", '100%', 720)}}

+ +

overflow: auto를 지정하여 동 부동체를 포함하는 새로운 블록 서식 상황(BFC)을 생성했습니다. 우리의 div가 이제는 우리 조판 내부에 소형 조판이 되었습니다. 모든 자식 요소는 소형 조판 내부에 포함되게 됩니다.

+ +

대열이탈(overflow)을 사용하여 새로운 블록 서식 상황(BFC)을 생성하는 것이 문제가 되는 것은 대열이탈(overflow) 속성이 대열이탈 콘텐츠를 어떻게 다루고 싶은지 브라우저에 알려주기 위한 것입니다. 이 속성을 순수하게 블록 서식 상황을 생성할 목적으로 사용할 경우 원치 않는 스크롤 막대 또는 잘려 나간 그림자를 생기는 경우도 있습니다. 또한, 그 경우는 후진 개발자가 왔을 때 판독의 여지가 많지 않을 수 있습니다. 왜냐면 대열이탈을 무슨 목적으로 사용했는지 이유가 분명하지 않을 수 있기 때문입니다. 다음과 같이 하면 코드를 설명하는 데 좋은 아이디어가 될 것입니다.

+ +

display: flow-root을 사용하며 명시적으로 블록 서식 상황을 생성하기

+ +

display: flow-root (또는 display: flow-root list-item))를 컨테이너 블록상에 사용하면 잠재적인 문제가 될 수 있는 여타 부작용 없이 새로운 블록 서식 상황(BFC)을 생성합니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/bfc-flow-root.html", '100%', 720)}}

+ +

{{HTMLElement("div")}}에 요소상에 display: flow-root을 적용하면, 컨테이너 내부의 모든 요소는 해당 컨테이너의 블록 서식 상황에 참여하게 되며, 부동체 무리는 동 요소 밑으로 돌출하지 않게 됩니다.

+ +

대열뿌리(flow-root)라는 키워드 명명은 (마치 {{HTMLElement("html")}}의 경우처럼) 본질적으로 새로운 뿌리 요소와 같은 기능하는 어떤 것을 생성한다는 사실을 말해줍니다. 새로운 상황이 어떻게 생성되었으며 어떻게 해당 대열 조판이 기능하는지를 고려하면 그렇습니다.

+ +

인라인 서식 상황

+ +

인라인 서식 상황은 다른 서식 상황 내부에 존재하며 하나의 단락 상황처럼 생각될 수 있습니다. 단락은 텍스트상에 사용되는 {{HTMLElement("strong")}}, {{HTMLElement("a")}} 또는 {{HTMLElement("span")}} 등이 내부적으로 사용되는 인라인 서식 상황을 생성합니다.

+ +

상자 모델은 인라인 서식 상황에 참여하는 항목에 100% 적용되지 않습니다. 가로쓰기 모드 라인에서 수평 패딩, 테두리 및 여백이 요소에 적용되고 텍스트를 왼쪽과 오른쪽으로 밀어냅니다. 그러나, 해당 요소 위와 아래에 여백은 적용되지 않습니다. 수직 패딩 및 테두리는 적용되지만 인라인 서식 상황에서 라인 상자가 패딩 및 테두리에 의해 밀려나지 않음으로 위와 아래에 내용이 겹칠 수 있습니다.

+ +

{{EmbedGHLiveSample("css-examples/flow/formatting-contexts/inline.html", '100%', 720)}}

+ +

기타 서식 상황

+ +

이 안내서는 대열 조판을 다루므로 여타 가능한 서식 상황을 참조하지 않습니다. 따라서 어떤 유형의 서식 상황을 만드는 것이 서식 상황 속에 포함된 요소 무리가 작동하는 방식을 변화시킬 것인지 파악하는 것이 유용합니다. 이런 동작은 항상 에이치티엠엘 규격에 기술되어 있고, 또한 이곳 모질라 개발자 네트워크(MDN)에도 기술되어 있습니다.

+ +

요약정리

+ +

이번 안내서에서는 블록 및 인라인 서식 상황과 블록 서식 상황(BFC)을 생성하는 중요한 주제를 자세히 살펴보았습니다. 다음 안내서에서는 어떻게 일반 대열과 서로 다른 쓰기 모드가 상호 작용하는지에 대해 알아보겠습니다.

+ +

참조 항목

+ + 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" new file mode 100644 index 0000000000..2b05d99f39 --- /dev/null +++ "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" @@ -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/\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" new file mode 100644 index 0000000000..cc7753cb70 --- /dev/null +++ "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" @@ -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/\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" new file mode 100644 index 0000000000..4d35855ee5 --- /dev/null +++ "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" @@ -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/\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" new file mode 100644 index 0000000000..697bdfacde --- /dev/null +++ "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" @@ -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_fonts/index.html b/files/ko/web/css/css_fonts/index.html new file mode 100644 index 0000000000..eef480caa7 --- /dev/null +++ b/files/ko/web/css/css_fonts/index.html @@ -0,0 +1,102 @@ +--- +title: CSS Fonts +slug: Web/CSS/CSS_Fonts +tags: + - CSS + - CSS Fonts + - Overview + - Reference +translation_of: Web/CSS/CSS_Fonts +--- +
{{CSSRef}}
+ +

CSS Fonts는 글꼴 관련 속성 및 글꼴 자원이 로드되는 법을 정의하는 CSS 모듈입니다. 이는 글꼴의 스타일을 정의할 수 있습니다, 글꼴 패밀리, 크기 또는 굵기 및 한 문자에 여러 자체(glyph)가 있는 글꼴에 사용되는 이형(variant) 자체와 같은 줄높이도 정의할 수 있습니다.

+ +

참고

+ +

속성

+ +
+
    +
  • {{cssxref("font")}}
    • +
  • {{cssxref("font-family")}}
    • +
  • {{cssxref("font-feature-settings")}}
    • +
  • {{cssxref("font-kerning")}}
    • +
  • {{cssxref("font-language-override")}}
    • +
  • {{cssxref("font-size")}}
    • +
  • {{cssxref("font-size-adjust")}}
    • +
  • {{cssxref("font-stretch")}}
    • +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-synthesis")}}
    • +
  • {{cssxref("font-variant")}}
    • +
  • {{cssxref("font-variant-alternates")}}
    • +
  • {{cssxref("font-variant-caps")}}
    • +
  • {{cssxref("font-variant-east-asian")}}
    • +
  • {{cssxref("font-variant-ligatures")}}
    • +
  • {{cssxref("font-variant-numeric")}}
    • +
  • {{cssxref("font-variant-position")}}
    • +
  • {{cssxref("font-weight")}}
    • +
  • {{cssxref("line-height")}}
    • +
+
+ +

@규칙

+ +
+
{{cssxref("@font-face")}}
+
+
+
    +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
+
+
+
{{cssxref("@font-feature-values")}}
+
+ +

안내서

+ +
+
Fundamental text and font styling
+
In this beginner's learning article we go through all the basic fundamentals of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.
+
OpenType font features guide
+
Font features or variants refer to different glyphs or character styles contained within an OpenType font. These include things like ligatures (special glyphs that combine characters like 'fi' or 'ffl'), kerning (adjustments to the spacing between specific letterform pairings), fractions, numeral styles, and a number of others. These are all referred to as OpenType Features, and are made available to use on the web via specific properties and a low-level control property — {{cssxref("font-feature-settings")}}. This article provides you with all you need to know about using OpenType font features in CSS.
+
Variable fonts guide
+
Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}초기 정의
diff --git a/files/ko/web/css/css_generated_content/index.html b/files/ko/web/css/css_generated_content/index.html new file mode 100644 index 0000000000..6d1acc3c8e --- /dev/null +++ b/files/ko/web/css/css_generated_content/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Generated Content +slug: Web/CSS/CSS_Generated_Content +tags: + - CSS + - CSS Generated Content + - Overview + - Reference +translation_of: Web/CSS/CSS_Generated_Content +--- +
{{CSSRef}}
+ +

CSS Generated Content는 요소에 콘텐츠를 추가하는 법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("content")}}
    • +
  • {{cssxref("quotes")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}초기 정의
diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html new file mode 100644 index 0000000000..ce1ce28415 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -0,0 +1,765 @@ +--- +title: Basic concepts of grid layout +slug: Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout +tags: + - CSS + - CSS 그리드 + - 가이드 + - 레이아웃 +--- +

CSS 그리드 레이아웃(Grid Layout)은 CSS에 2차원의 그리드 시스템을 도입했습니다. 그리드는 주요 페이지 영역을 설계하거나 작은 사용자 인터페이스 요소를 배치하는 데 사용할 수 있습니다. 이 문서에서는 CSS 그리드 레이아웃 및 CSS 그리드 레이아웃 레벨 1 명세서에 포함된 새로운 기술 용어를 소개합니다. 이번 개요에 소개된 기능은 나머지 안내 문서에서 자세히 설명합니다.

+ +

그리드가 무엇인가요?

+ +

그리드는 수평선과 수직선이 교차해서 이루어진 집합체입니다 - 하나의 집합체는 세로 열을 그리고 다른 하나는 가로 행을 정의합니다. 각 요소는 이러한 열과 행으로 된 라인을 따라 생성된 그리드에 배치할 수 있습니다. CSS 그리드 레이아웃에는 다음과 같은 기능이 있습니다:

+ +

고정되거나 혹은 유연한 트랙 크기

+ +

예를 들면, 픽셀 단위를 써서 트랙 크기가 고정된 그리드를 만들 수 있습니다. 이렇게 하면, 원하시는 레이아웃에 꼭 맞도록 픽셀 크기를 지정해서 그리드를 설정하실 수 있습니다. 또한, 퍼센트 혹은 이런 목적에 적합하도록 설계된 새로운 fr 단위의 가변 크기를 지정해서, 좀 더 유연한 성질의 그리드를 만들 수도 있습니다.

+ +

아이템 배치

+ +

아이템은 라인 번호, 이름 또는 그리드 영역을 지정해서 그리드의 정확한 위치에 배치할 수 있습니다. 그리드는 또 명확하게 위치가 지정되지 않은 아이템을 알아서 적절히 배치하는 알고리즘도 가지고 있습니다.

+ +

콘텐츠를 담기 위한 추가 트랙의 생성

+ +

그리드 레이아웃으로 그리드를 명시적으로 정의할 수 있지만, 지정된 그리드 밖에 따로 추가되는 콘텐츠에 대응하여 필요에 따라 행과 열을 추가할 수 있도록 표준 문서에서 기술하고 있습니다. 일 예로 “컨테이너에 들어갈 수 있는 만큼의 세로 열”을 추가하는 기능이 포함되었습니다.

+ +

정렬 제어

+ +

그리드에는 정렬 기능이 있어서 그리드 영역에 아이템을 배치한 후 어떻게 정렬할지, 그리고 전체 그리드가 정렬되는 방식을 제어할 수 있습니다.

+ +

겹치는 콘텐츠 제어

+ +

그리드 셀에 하나 이상의 아이템을 배치하거나 그리드 영역을 부분적으로 서로 겹치게 할 수 있습니다. 이렇게 생긴 중첩의 우선순위는 나중에 {{cssxref("z-index")}} 프로퍼티로 제어할 수 있습니다.

+ +

그리드는 아주 강력한 기능을 담은 표준이라서 플랙스박스(flexbox)와 같은 CSS의 다른 부분과 결합하면, 이전에는 CSS에서 불가능했던 레이아웃을 만들 수 있도록 도와줍니다. 이 모든 것은 그리드 컨테이너에서 그리드를 생성하는 것부터 시작합니다.

+ +

그리드 컨테이너

+ +

그리드 컨테이너는 요소에 display: grid 또는 display: inline-grid를 선언하여 만듭니다. 이렇게 하면 해당 요소 바로 밑에 있는 모든 자식 요소는 그리드 아이템이 됩니다.

+ +

다음 예제에는 클래스로 wrapper라는 이름을 가진 div이 있고, 안에는 다섯 개의 자식 요소가 있습니다.

+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

이제 .wrapper 요소를 그리드 컨테이너로 지정합니다.

+ +
.wrapper {
+  display: grid;
+}
+
+ + + +

{{ EmbedLiveSample('그리드_컨테이너', '200', '330') }}

+ +

바로 밑에 있는 모든 자식 요소는 이제 그리드 아이템이 됩니다. 이렇게 하면 웹 브라우저에서 보이는 모습이 그리드로 전환하기 전과 별 차이가 없는데, 이는 그리드가 우선 아이템을 단일 열 형태의 구조를 가진 그리드를 생성하였기 때문입니다. 이 시점에서 Firefox Developer Edition에서 작업하는 것이 유용하실 텐데, 여기엔 개발자 도구의 일부로 Grid Inspector 기능을 제공합니다. Firefox에서 이 예제의 그리드를 검사해보면, grid 값 바로 옆에 작은 아이콘이 보이실 겁니다. 이 아이콘을 클릭하면 해당 요소의 그리드가 브라우저 창 위에 중첩되어 표시됩니다.

+ +

그리드를 살펴보기 위해 개발자 도구에 있는 그리드 하이라이터를 사용하는 모습

+ +

CSS 그리드 레이아웃을 배우면서 작업하실 때 이 도구를 사용하면 그리드에서 발생하는 상황을 시각적으로 더 잘 파악하실 수 있습니다.

+ +

이제 이것을 전형적인 그리드 형태의 모양으로 만들어 주려면 세로 방향의 트랙을 더 추가하면 됩니다.

+ +

그리드 트랙

+ +

그리드의 행과 열은 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}} 프로퍼티로 정의합니다. 이렇게 하면, 그리드 트랙도 함께 정의됩니다. 그리드 트랙은 그리드에 그려진 두 라인 사이의 공간을 나타냅니다. 아래 그림에서는 그리드의 첫 번째 가로 행에 놓여있는 트랙이 돋보이게 표시된 것을 확인하실 수 있습니다.

+ +

+ +

앞의 예제에서 grid-template-columns 프로퍼티를 추가하고 세로 열에 놓이게 될 트랙의 크기를 정의해 줍니다.

+ +

이제 200픽셀의 너비를 가진 세로 열 방향의 트랙 세 개를 생성합니다. 자식 아이템들은 이제 그리드에 있는 각자의 그리드 셀 위에 배치됩니다.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 200px 200px 200px;
+}
+
+ + + +

{{ EmbedLiveSample('grid_first', '610', '140') }}

+
+ +

fr 단위

+ +

트랙은 모든 종류의 길이 단위를 써서 정의할 수 있습니다. 또한, 그리드에는 유연한 크기의 그리드 트랙을 생성하는 데 사용할 수 있는 단위를 추가로 소개하고 있습니다. 새로 소개된 fr 단위는 그리드 컨테이너에 남아 있는 사용 가능한 공간의 일정 비율을 나타냅니다. 다음에 정의된 그리드에서는 남아 있는 공간에 따라 확장 및 축소되는 같은 너비의 트랙 3개를 생성합니다.

+ +
+
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ + + +

{{ EmbedLiveSample('fr_unit_ls', '220', '140') }}

+
+ +

다음 예제에서는 2fr 크기의 트랙 하나와 1fr 트랙 두 개를 지정하였습니다. 사용 가능한 공간은 4개로 나뉘면서, 공간 두 개는 첫 번째 트랙에 제공하고 나머지 공간 한 부분씩을 다음 두 트랙에 각각 제공합니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+}
+
+ +

이번 마지막 예에서는 고정된 크기의 트랙과 비율 단위로 지정한 트랙이 섞여 있습니다. 첫 번째 트랙은 500픽셀의 공간을 차지하므로 이 고정 너비는 사용 가능한 공간에서 제외됩니다. 나머지 공간은 3개의 부분으로 나뉘며 2개의 유연한 트랙에 비율에 맞게 할당됩니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 500px 1fr 2fr;
+}
+
+ +

repeat() 표기법으로 트랙 나열

+ +

많은 트랙을 포함하는 커다란 그리드는 repeat() 표기법을 사용하여 트랙의 전체 또는 일부분을 반복해서 나열해 줄 수 있습니다. 예를 들어 다음과 같이 정의된 그리드의 경우:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+ +

다음과 같이 작성할 수도 있습니다:

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

반복 표기법은 트랙의 목록 중 일부분에만 사용할 수도 있습니다. 아래 예제에서는 처음엔 20픽셀 크기의 트랙을 생성하고 다음에 1fr 크기의 트랙을 6번 반복해서 채운 후 마지막에 20픽셀 트랙을 붙여서 그리드를 완성합니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: 20px repeat(6, 1fr) 20px;
+}
+
+ +

반복 표기법은 트랙의 목록도 함께 나열해서 지정할 수 있는데, 이렇게 하면 트랙의 반복 패턴을 생성해서 사용하게 됩니다. 다음 예제는 그리드가 10개의 트랙으로 구성되어 있으며, 1fr 크기의 트랙 다음에 2fr 크기 트랙이 위치하고, 이 형태가 5회 반복됩니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr 2fr);
+}
+
+ +

잠재적 그리고 명시적 그리드

+ +

지금까지는 그리드 예제를 만들 때마다 {{cssxref("grid-template-columns")}} 프로퍼티를 써서 세로 열의 트랙을 정의해 주었습니다만, 가로 행은 그리드가 콘텐츠에 맞게 알아서 새로운 행을 만들도록 했습니다. 이렇게 만들어진 행은 잠재적 그리드 안에서 생성됩니다. 명시적 그리드는 {{cssxref("grid-template-columns")}} 및 {{cssxref("grid-template-rows")}}로 직접 정의한 행과 열로 이루어진 그리드를 말합니다. 만약에 이렇게 정의된 그리드 밖에 무언가를 배치할 땐, 늘어난 콘텐츠 양 때문에 더 많은 그리드 트랙이 필요하고, 그리드는 잠재적 그리드에 새로운 행과 열을 만들게 됩니다. 이렇게 해서 생긴 트랙은 기본적으로 크기가 자동으로 정해지는데, 트랙 내부의 내용물에 따라 크기가 조정됩니다.

+ +

물론 잠재적 그리드에서 생성된 트랙의 크기는 {{cssxref("grid-auto-rows")}} 및 {{cssxref("grid-auto-columns")}} 프로퍼티를 써서 지정해줄 수도 있습니다.

+ +

아래 예제에서는 잠재적 그리드에서 생성된 트랙의 높이가 반드시 200픽셀이 되도록 grid-auto-rows를 사용하여 하였습니다.

+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 200px;
+}
+
+ + + +

{{ EmbedLiveSample('잠재적_그리고_명시적_그리드', '230', '420') }}

+ +

트랙 크기 조정과 minmax()

+ +

명시적 그리드를 설정하거나 자동으로 생성된 행이나 열의 크기를 정의할 때, 트랙의 최소 크기를 정해도 나중에 추가되는 콘텐츠에 맞게 늘어나도록 하고 싶을 때가 있을 겁니다. 예를 들면, 가로 행의 높이가 100픽셀 밑으로 줄어드는 것은 막고 싶지만, 콘텐츠가 300픽셀 높이까지 늘어나면 그에 따라 행의 높이도 같이 늘어나길 원할 때가 있습니다.

+ +

이런 경우를 고려해서 그리드는 {{cssxref("minmax", "minmax()")}} 함수를 제공하고 있습니다. 다음 예제에서는 {{cssxref("grid-auto-rows")}} 값에 minmax() 를 사용하였습니다. 자동으로 생성된 행의 높이는 최소 100픽셀이고 최댓값은 auto입니다. auto를 지정하면 크기는 콘텐츠의 크기를 살피게 되는데, 가로 행에 있는 가장 높은 셀의 크기만큼 자동으로 늘어나서 부족한 공간을 메꿔줍니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+
+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two
+    <p>I have some more content in.</p>
+    <p>This makes me taller than 100 pixels.</p>
+  </div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +

{{ EmbedLiveSample('트랙_크기_조정과_minmax()', '240', '470') }}

+ +

그리드 라인

+ +

그리드를 정의할 때 라인이 아닌 그리드 트랙을 정의한다는 점을 명심해야 합니다. 그러면 그리드는 아이템을 배치할 때 쓸 수 있게 번호가 매겨진 라인을 자동으로 제공합니다. 아래 그림처럼, 그리드가 세 개의 세로 열(Column)과 두 개의 가로 행(Row)으로 이루어져 있다면, 네 개의 Grid Line이 Column으로 자리 잡게 됩니다.

+ +

번호가 매겨진 그리드 라인을 보여주는 다이어그램.

+ +

라인은 문서의 작성 모드에 따라 번호가 매겨집니다. 왼쪽에서 오른쪽으로 쓰는 언어에서는 라인 1이 그리드의 왼쪽에 있습니다. 반대로 오른쪽에서 왼쪽으로 쓰는 언어에서는 그리드의 오른쪽에 있게 됩니다. 또한, 라인에 이름도 지정할 수 있으며, 자세한 방법은 이 시리즈의 후반부에서 살펴보겠습니다.

+ +

라인을 이용한 아이템 배치

+ +

라인에 기반을 둔 배치 방법에 대해서는 다음에 더 자세히 탐구해 볼 예정입니다. 이번 예제에서는 아주 간단한 방법을 알아보겠습니다. 아이템을 배치할 때 트랙이 아닌 라인의 관점에서 정의해 보겠습니다.

+ +

아래 예제에선 처음 두 개의 아이템을 세 개의 열 방향 트랙으로 구성된 그리드 위에 {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row-start")}} 그리고 {{cssxref("grid-row-end")}} 프로퍼티를 써서 배치합니다. 왼쪽에서 오른쪽으로 작업하면서, 첫 번째 아이템은 세로 열 방향의 1번 라인에 배치되고 세로 열 방향 4번 라인까지 확장됩니다. 이 경우에는 그리드의 맨 오른쪽 라인까지 해당합니다. 그리고 가로 방향의 라인을 기준으로 1번 라인부터 시작해서 행 3번 라인까지 차지하면서 결국, 두 개의 가로 행 트랙을 가로질러 걸치게 됩니다.

+ +

두 번째 아이템은 그리드 세로 열의 1번 라인에서 시작해서 트랙 하나에 걸쳐 있습니다. 여기엔 기본값을 사용해서 마지막 라인은 지정할 필요가 없습니다. 가로 행 방향 라인을 기준으로 3번의 라인부터 5번 라인까지 두 개의 가로 행 트랙에 걸쳐 있습니다. 나머지 아이템은 그리드 빈 자라에 자동으로 배치됩니다.

+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+  <div class="box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 3;
+  grid-row-end: 5;
+}
+
+ + + +

{{ EmbedLiveSample('라인을_이용한_아이템_배치', '230', '420') }}

+ +

파이어폭스 개발자 도구에 있는 Grid Inspector를 사용하면 아이템이 그리드 라인에 어떻게 배치되어 있는지 이해하기 훨씬 쉽다는 점도 잊지 마십시오.

+ +

그리드 셀

+ +

그리드 셀은 그리드에 있는 가장 작은 구성원입니다. 개념상 테이블에 있는 셀과 비슷합니다. 앞의 예제에서 보셨듯이, 부모 요소에 그리드를 정의하면 자식 아이템은 지정된 그리드 셀에 각자 하나씩 나열되어 배치됩니다. 아래 그림에서는 그리드의 첫 번째 셀을 강조 표시했습니다.

+ +

강조 표시된 그리드의 첫 번째 셀

+ +

그리드 영역

+ +

아이템은 행 또는 열 방향 어느 쪽으로든 하나 이상의 셀에 걸쳐있을 수 있으며 이렇게 해서 그리드 영역을 만듭니다. 그리드 영역은 직사각형이어야 하며, 예를 들어 L 자 형태의 영역을 생성할 수 없습니다. 아래 강조 표시된 그리드 영역은 2개의 행과 2개의 열 트랙에 걸쳐 있습니다.

+ +

그리드 영역의 예

+ +

경계 여백

+ +

그리드 셀 사이의 경계 여백 혹은 간격은 {{cssxref("grid-column-gap")}} 및 {{cssxref("grid-row-gap")}} 프로퍼티를 지정해서 생성할 수 있으며, 짧게 {{cssxref("grid-gap")}}으로 지정할 수도 있습니다. 아래의 예제에서는 세로 열 사이의 간격은 10픽셀이고 가로 행 사이의 간격은 1em입니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-column-gap: 10px;
+  grid-row-gap: 1em;
+}
+
+ +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ + + +

{{ EmbedLiveSample('경계_여백') }}

+ +

간격이 차지하는 공간은 길이가 유연한 fr 단위로 지정한 트랙에 할당하기 전에 우선 고려되어 배분됩니다. 그래서 일반 그리드 트랙처럼 간격은 크기 조정의 목적으로 활용될 수 있으나, 이 공간에는 아무것도 배치할 수 없습니다. 라인 기반 위치 지정 측면에선 간격은 그저 굵은 선처럼 작용합니다.

+ +

중첩 그리드

+ +

그리드 아이템은 자기 자신이 그리드 컨테이너가 될 수도 있습니다. 다음 예제는 이전에 생성했던 3개의 세로 열로 구성된 그리드가 있으며, 여기에 따로 위치가 지정된 두 개의 아이템을 배치해 놓은 모습입니다. 이번 경우엔 첫 번째 아이템이 몇 개의 하위 아이템을 포함하고 있습니다. 이 아이템들은 그리드 바로 밑에 있는 요소가 아니므로 그리드 레이아웃에 관여하지 않고 정상적인 문서 흐름에 따라 표시됩니다.

+ +
+
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +

문서 흐름에 따라 표시된 중첩 그리드

+ +

만약에 box1에 display: grid를 설정하면, 여기에 트랙을 정의할 수 있게 되면서 또 하나의 그리드를 생성하게 됩니다. 이렇게 해서 그 밑의 아이템들은 새 그리드 정의에 따라 배치됩니다.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ + +
+ +

{{ EmbedLiveSample('중첩_그리드', '600', '340') }}

+ +

이 경우 중첩된 그리드는 상위 부모 요소의 그리드와 아무런 관계가 없습니다. 예제에서 볼 수 있듯이 부모 요소의 {{cssxref("grid-gap")}}을 그대로 물려받지 않았고, 중첩된 그리드의 라인은 부모 요소의 그리드 라인과도 일렬로 정렬되지 않은 것을 확인하실 수 있습니다.

+ +

서브 그리드

+ +

레벨 1 그리드 표준에는 서브 그리드(subgrid)라는 기능이 있어서 부모 요소에 있는 그리드 트랙의 정의를 중첩된 그리드에도 적용해서 생성할 수 있도록 하였습니다.

+ +
+

서브 그리드는 아직 모든 브라우저에서 구현되지 않았고 나중에 표준이 변경될 수도 있습니다.

+
+ +

최근 작성된 표준에 따르면, 위 중첩 그리드 예시에 썼던 display: grid 대신 display: subgrid를 써주고 트랙의 정의는 제거합니다. 이렇게 하면 중첩된 그리드는 부모 요소의 그리드 트랙을 그대로 참고해서 아이템을 배치하게 됩니다.

+ +

중첩된 그리드는 행과 열 모두에 걸쳐 있음을 유의해야 합니다. 서브 그리드를 작업할 때는 잠재적 그리드의 개념을 적용할 수 없습니다. 즉, 부모 요소의 그리드에 모든 하위 아이템들을 담을 만큼의 충분한 행과 열의 트랙이 있는지 꼭 확인해야 합니다.

+ +
.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  display: subgrid;
+}
+
+ +

z-index를 이용한 아이템 중첩도 조정

+ +

그리드 아이템은 서로 같은 셀을 차지할 수 있습니다. 앞서 라인 번호로 아이템의 위치를 지정했던 예제로 돌아가서, 여기에 다음과 같이 두 아이템이 서로 자리가 겹치도록 수정합니다.

+ +
+
<div class="wrapper">
+  <div class="box box1">One</div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+
+ + +
+ +

{{ EmbedLiveSample('l_ex', '230', '420') }}

+ +

box2 아이템은 이제 box1과 겹치게 되고, 소스 순서에서 나중에 위치하므로 맨 위에 표시됩니다.

+ +

중첩의 순서 조정

+ +

위치를 따로 지정한 아이템과 마찬가지로, 아이템이 위아래로 중첩되는 순서는 z-index 프로퍼티를 써서 제어할 수 있습니다. 만약에 box2에 box1 보다 더 낮은 z-index를 지정하면 box1 아래로 중첩되어 표시됩니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 100px;
+}
+
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  z-index: 2;
+}
+
+.box2 {
+  grid-column-start: 1;
+  grid-row-start: 2;
+  grid-row-end: 4;
+  z-index: 1;
+}
+
+ + + +

{{ EmbedLiveSample('중첩의_순서_조정', '230', '420') }}

+ +

다음 단계

+ +

이 글에서는 Grid 레이아웃 표준 문서에 나와 있는 내용을 아주 간단히 살펴보았습니다. 코드 예제를 좀 더 연구해 보시고, 안내서의 다음 부분으로 넘어가서 CSS 그리드 레이아웃의 세부 사항을 조금 더 심도 있게 살펴보시기 바랍니다.

+ + diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html new file mode 100644 index 0000000000..10bfeb4262 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html @@ -0,0 +1,533 @@ +--- +title: Grid template areas +slug: Web/CSS/CSS_Grid_Layout/Grid_template_areas +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas +--- +

이전 가이드에서 우리는 그리드 라인에 대해서 살펴보았으며, 이 라인을 기준으로 어떻게 아이템들을 배치하는지 알아보았습니다. CSS 그리드 레이아웃으로 작업할 땐 거기엔 항상 라인이 있을 것이고, 이것은 아이템들을 그리드에 배치할 때 사용할 수 있는 아주 직관적인 방법이 될 수 있습니다. 그렇지만, 아이템을 그리드에 배치할 때 사용할 수 있는 또 다른 방법이 있는데, 이것은 독자적으로 혹은 라인 기준 배치 방법과 함께 혼용해서 사용할 수 있습니다. 이 방법은 이름이 지명된 템플릿 영역을 사용하여 아이템을 배치하는 작업과 연관돼 있으며, 이 방법이 정확히 어떻게 작동하는지 알아보겠습니다. 이것이 때때로 왜 그리드 레이아웃의 ascii-art 방식이라고 일컬어지는지 쉽게 눈치채실 수 있을 겁니다!

+ +

그리드 영역의 이름 짓기

+ +

여러분은 이미 {{cssxref("grid-area")}} 프로퍼티와 마주친 적이 있을 겁니다. 이 프로퍼티는 그리드 영역의 위치를 잡는데 사용되는 모두 네 개의 라인 값을 취합니다.

+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+
+ +

이렇게 모두 네 개의 라인을 정의하는 작업은, 영역을 둘러싸는 라인을 지정해서 해당 영역이 차지하게 될 자리를 정의해 주는 것이라 할 수 있습니다.

+ +

라인으로 정의된 그리드 영역

+ +

이와 더불어서, 각 영역에 이름을 붙여서 정의할 수도 있으며, 각 영역의 위치는 {{cssxref("grid-template-areas")}} 프로퍼티의 값을 지정해서 정의할 수 있습니다. 영역의 이름은 원하시는 것 아무거나 선택해서 사용하실 수 있습니다. 예를 들어, 아래에 보이는 레이아웃을 만들고자 할 때, 다음과 같이 네 개의 주요 영역으로 구분할 수 있습니다.

+ +
    +
  • a header
    • +
  • a footer
    • +
  • a sidebar
    • +
  • the main content
    • +
+ +

단순하게 헤더와 푸터가 있는 두 개의 열로 구성된 레이아웃을 보여주는 그림

+ +

여기서 각 영역의 이름은 {{cssxref("grid-area")}} 프로퍼티로 지정할 수 있습니다. 이것은 아직 아무런 레이아웃도 생성하지 않지만, 이렇게 해서 레이아웃에 사용될 영역의 이름을 갖게 됩니다.

+ +
+
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ +

이제 영역의 이름들을 정의하였으니 다음엔 원하는 레이아웃을 생성할 차례입니다. 이번엔, 아이템에 직접 지정된 라인 번호를 써서 아이템을 배치하는 대신에, 전체 레이아웃을 그리드 컨테이너에서 정의해 줍니다.

+ +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+ + + +

 

+ +
<div class="wrapper">
+    <div class="header">Header</div>
+    <div class="sidebar">Sidebar</div>
+    <div class="content">Content</div>
+    <div class="footer">Footer</div>
+</div>
+ +

{{ EmbedLiveSample('Grid_Area_1', '300', '330') }}

+
+ +

이 방법을 쓰면 각각의 그리드 아이템들에 아무것도 지정해 줄 필요가 없으며, 그리드 컨테이너에서 모든 작업이 이루어집니다. 보셨다시피, 레이아웃은 {{cssxref("grid-template-areas")}} 프로퍼티의 값으로 기술됩니다.

+ +

그리드 셀 비워두기

+ +

먼젓번 예제에서는, 그리드의 모든 곳이 빈 곳 없이 영역들로 채워져 있습니다. 하지만, 다음에 소개될 레이아웃 방법을 써서 특정 그리드 셀이 공간으로 채워지도록 만들 수도 있습니다. 셀을 공간으로 남겨두려면 마침표 글자(.)를 사용하시면 됩니다. 예제 중 footer 부분을 main으로 표시된 콘텐츠 바로 아래에만 표시되도록 하려면, sidebar 밑에 있는 세 개의 셀을 비워두면 됩니다.

+ +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      ".  .  .  ft   ft   ft   ft   ft   ft";
+}
+
+ +
<div class="wrapper">
+    <div class="header">Header</div>
+    <div class="sidebar">Sidebar</div>
+    <div class="content">Content</div>
+    <div class="footer">Footer</div>
+</div>
+ +

{{ EmbedLiveSample('그리드_셀_비워두기', '300', '330') }}

+ +

위 예제에서 레이아웃 정의 부분을 더 깔끔하게 보이도록 하려면 여러 개의 . 글자를 사용할 수도 있습니다. 여기서 마침표 사이가 하얀 공간으로 서로 띄워져 있지 않은 한 오직 하나의 셀로 계산됩니다. 아주 복잡한 레이아웃의 경우, 행과 열이 깔끔하게 정렬돼 있다면 훨씬 이해하기 쉬운 장점이 있을 겁니다. 이렇게 하면, CSS를 작업하면서 실제 레이아웃이 어떤 모습으로 보일지 쉽게 눈으로 확인하실 수도 있다는 뜻입니다.

+ +

다중 셀에 걸쳐 확장하기

+ +

앞선 예제에선 영역들이 다중 셀에 걸쳐서 확장되었는데, 이것은 그리드 영역의 이름을 빈 여백을 사이에 두고 여러 번 반복해서 이루었습니다. 여기서 grid-template-areas 값으로 지정한 부분은 깔끔하게 위아래로 줄이 맞아 떨어지도록 여분의 공백을 추가할 수도 있습니다. 위 예제에선, main 부분과 정렬되도록 hd와 ft 영역 이름에 공백이 추가된 것을 확인하실 수 있습니다.

+ +

영역 이름을 연달아 늘어놓아서 만들어진 영역은 직사각형이어야 하며, 이 시점에서 L 모양의 영역을 만들 수는 없습니다. 표준 명세서에선 아마도 다음번 레벨에서 이 기능이 추가될 수도 있음을 명시하고 있습니다. 그렇지만, 영역을 열 방향과 마찬가지로 행 방향으로도 쉽게 확장할 수 있습니다. 예를 들어, 사이드바 영역에 있는 비어있는 셀을 뜻하는 . 대신에 그 자리를 sd로 대치해서 footer 밑부분까지 확장하도록 정의해 줄 수 있습니다.

+ +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+ + + +
.wrapper {
+    display: grid;
+    grid-template-columns: repeat(9, 1fr);
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-areas:
+      "hd hd hd hd   hd   hd   hd   hd   hd"
+      "sd sd sd main main main main main main"
+      "sd sd sd  ft  ft   ft   ft   ft   ft";
+}
+
+ + + +

{{ EmbedLiveSample('다중_셀에_걸쳐_확장하기', '300', '330') }}

+ +

{{cssxref("grid-template-areas")}} 값은 그리드 전체를 나타내야 하며, 그렇지 않으면 틀린 것으로 간주하여 결국 프로퍼티는 무시됩니다. 이 얘기는 각 줄의 셀 숫자가 모두 같아야 한다는 뜻이며, 비어있는 경우는 마침표 문자를 써서 셀이 비어있음을 표시해 주어야 합니다. 또한, 영역이 직사각형이 아니라면 유효하지 않은 그리드를 생성하게 됩니다.

+ +

미디어 큐어리(media queries)를 이용한 그리드 재정의

+ +

이제는 레이아웃이 CSS의 한 부분으로 들어오면서, 서로 다른 브레이크포인트에 대응해서 변하게 만드는 것이 훨씬 쉬워졌습니다. 이 작업은 그리드를 재정의하거나, 그리드에 있는 아이템의 위치를 바꿔줄 수도 있으며, 혹은 한꺼번에 두 가지 모두를 진행할 수도 있습니다.

+ +

이 작업을 할 때 주의할 점은, 미디어 큐어리 밖에서 영역의 이름을 정의해야 한다는 것입니다. 이렇게 해야 가령 콘텐츠 영역의 경우, 그리드 위 어느 곳에 배치되든 상관없이 항상 해당 영역을 main으로 지칭할 수 있게 됩니다.

+ +

위 예제에 있는 레이아웃을 가지고, 만약 너비가 좁을 때는 아주 단순한 레이아웃을 형성하도록 단일 열 형태의 그리드를 정의해서 아이템들이 서로 중첩되도록 하였습니다.

+ + + +
.header {
+    grid-area: hd;
+}
+.footer {
+    grid-area: ft;
+}
+.content {
+    grid-area: main;
+}
+.sidebar {
+    grid-area: sd;
+}
+
+.wrapper {
+    display: grid;
+    grid-auto-rows: minmax(100px, auto);
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "hd"
+      "main"
+      "sd"
+      "ft";
+}
+
+ +

그러고 나서, 미디어 큐어리 안에서 남아있는 공간이 넓다면 두 개의 열로 된 레이아웃을 구성하도록 다시 정의해 주었으며, 공간이 더 넓으면 세 개의 열로 된 형태의 레이아웃 띠도록 하였습니다. 넓은 형태의 레이아웃의 경우, 아홉 개의 열 트랙 그리드는 그대로 놔두었으며, grid-template-areas를 써서 아이템들이 어디에 배치될지를 다시 정의해 준 점을 주목해 주십시오.

+ +
@media (min-width: 500px) {
+    .wrapper {
+        grid-template-columns: repeat(9, 1fr);
+        grid-template-areas:
+          "hd hd hd hd   hd   hd   hd   hd   hd"
+          "sd sd sd main main main main main main"
+          "sd sd sd  ft  ft   ft   ft   ft   ft";
+    }
+}
+@media (min-width: 700px) {
+    .wrapper {
+        grid-template-areas:
+          "hd hd hd   hd   hd   hd   hd   hd hd"
+          "sd sd main main main main main ft ft";
+    }
+}
+
+ + + +

{{ EmbedLiveSample('미디어_큐어리(media_queries)를_이용한_그리드_재정의', '550', '330') }}

+ +

UI 요소를 위한 grid-tempate-areas 사용

+ +

온라인에서 찾을 수 있는 많은 그리드 예제들을 보면 주로 주요 페이지 레이아웃에만 그리드를 사용한다고 느끼실 수 있습니다만, 그리드는 큰 요소만큼이나 작은 요소에서도 유용하게 사용될 수 있습니다. 특히나 {{cssxref("grid-template-areas")}}를 쓰면 요소가 어떻게 보일지 코드를 보면 쉽게 이해할 수 있어서 아주 유용합니다.

+ +

아주 간단한 예로 “미디어 오브젝트”를 만들어 보겠습니다. 이 컴포넌트의 한쪽은 그림이나 다른 미디어를 위한 공간이 차지하고 다른 쪽은 주 내용이 위치하게 됩니다. 그림은 박스의 오른쪽 혹은 왼쪽에 표시될 수 있습니다.

+ +

미디어 오브젝트 디자인의 한 예를 보여주는 그림

+ +

여기서 그리드는 두 개의 열 트랙으로 구성되어 있으며, 그림이 들어가는 공간의 열 트랙의 크기는 1fr이며 글자 내용이 들어가는 공간의 크기는 3fr입니다. 만약에 고정된 너비의 그림 영역을 원하시면, 그림이 들어가는 열의 너비는 픽셀값으로 설정하고, 글자 영역에는 1fr을 지정하실 수 있습니다. 그러면 1fr 크기의 단일 열 트랙이 남은 공간을 모두 차지하게 됩니다.

+ +

그림이 위치하는 영역의 그리드 이름으로 img를 지정하고 글자 영역은 content라 부르기로 하고, grid-template-areas 프로퍼티를 써서 다음과 같이 배치하게 됩니다.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+
+ +
<div class="media">
+    <div class="image"></div>
+    <div class="text">This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    </div>
+</div>
+ +

{{ EmbedLiveSample('Media_1', '300', '200') }}

+
+ +

박스의 반대편에 그림 표시하기

+ +

반대로 그림이 박스의 맞은편에 표시되기를 원하실 때도 있을 겁니다. 이렇게 하려면, 1fr 크기의 트랙을 마지막에 위치하도록 하고, 단순하게 {{cssxref("grid-template-areas")}}의 값을 뒤집어서 그리드를 다시 정의해주면 됩니다.

+ +
+
* {box-sizing: border-box;}
+
+.media {
+    border: 2px solid #f76707;
+    border-radius: 5px;
+    background-color: #fff4e6;
+    max-width: 400px;
+}
+.media {
+    display: grid;
+    grid-template-columns: 1fr 3fr;
+    grid-template-areas: "img content";
+    margin-bottom: 1em;
+}
+
+.media.flipped {
+    grid-template-columns: 3fr 1fr;
+    grid-template-areas: "content img";
+}
+
+.media .image {
+    grid-area: img;
+    background-color: #ffd8a8;
+}
+
+.media .text {
+    grid-area: content;
+    padding: 10px;
+
+}
+
+ +
<div class="media flipped">
+    <div class="image"></div>
+    <div class="text">This is a media object example.
+      We can use grid-template-areas to switch around the image and text part of the media object.
+    </div>
+</div>
+ +

{{ EmbedLiveSample('Media_2', '300', '200') }}

+
+ +

그리드 정의 단축용법

+ +

지금까지 그리드 위에 아이템을 배치하는 여러 가지 방법과 또 그리드를 정의하는 다양한 프로퍼티들을 살펴보았습니다. 이번에는 그리드를 정의하는 데 사용할 수 있는 몇 가지 단축용법을 살펴보고 또 이 모든 것을 CSS 한 줄로 정의하는 법을 알아볼 차례입니다.

+ +

이것은 분명 다른 개발자나 심지어 미래의 나 자신도 금방 이해하기 어려울 수도 있습니다. 하지만, 표준 명세서에 기술된 용법 중 하나로서, 개별적으로 사용하진 않더라도, 공개된 예제나 다른 개발자가 사용하는 것을 목격할 수 있을 겁니다.

+ +

단축용법을 쓰기 전에 꼭 명심해야 할 것은 단축용법은 단번에 많은 프로퍼티의 설정이 가능할 뿐만 아니라, 정의하지 않은, 혹은 정의할 수 없는 것들도 그들의 초깃값으로 재설정되도록 작용한다는 점입니다. 그러므로 단축용법을 사용할 땐 다른 곳에서 적용했던 것들이 재설정될 수도 있다는 점을 주의하십시오.

+ +

그리드 컨테이너에서 사용할 수 있는 단축용법에는 두 가지가 있는데, 하나는 명시적 그리드 단축용법으로 grid-template이 있고, 나머지는 그리드 정의 단축용법으로 grid가 있습니다.

+ +

grid-template

+ +

{{cssxref("grid-template")}} 프로퍼티는 다음과 같은 프로퍼티들을 설정합니다:

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
+ +

이 프로퍼티는, 잠재적으로 생성되는 열과 행 트랙에 영향을 끼치는 것이 아닌, 명시적 그리드를 정의할 때 조정할 수 있는 것들을 설정하는 것이어서 명시적 그리드 단축용법이라 불립니다.

+ +

다음에 있는 코드는 {{cssxref("grid-template")}}를 써서 이 가이드 앞부분에서 만들었던 레이아웃과 똑같은 레이아웃을 만들었습니다.

+ +
.wrapper {
+    display: grid;
+    grid-template:
+      "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+      "sd sd sd main main main main main main" minmax(100px, auto)
+      "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+             / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

첫 번째 값은 grid-template-areas 값에 해당합니다. 하지만 각 행의 마지막에 해당 행의 크기도 함께 선언해 주었습니다. 여기에 있는 minmax(100px, auto)가 이 역할을 합니다.

+ +

그리고 grid-template-areas 뒤에 옆으로 누운 슬래시(/)가 있고, 바로 그 뒤에 세로 행 트랙들을 위한 명시적 트랙 목록이 정의되어 있습니다.

+ +

grid

+ +

{{cssxref("grid")}} 단축용법은 한 발 더 나가 잠재적 그리드를 정의하는 데 사용되는 프로퍼티들도 같이 설정합니다. 그래서 여기서 설정하는 프로퍼티들은 다음과 같습니다:

+ +
    +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
+ +

이 프로퍼티는 또 {{cssxref("grid-gap")}} 프로퍼티를 0으로 재설정합니다만, 이 단축용법에서는 이 간격을 지정해줄 수는 없습니다.

+ +

이 용법은 {{cssxref("grid-template")}} 단축용법과 똑같은 방법으로 사용할 수 있습니다만, 이렇게 하면 설정했던 다른 프로퍼티 값들을 재설정하게 된다는 점을 주의하셔야 합니다.

+ +
.wrapper {
+    display: grid;
+    grid: "hd hd hd hd   hd   hd   hd   hd   hd" minmax(100px, auto)
+    "sd sd sd main main main main main main" minmax(100px, auto)
+    "ft ft ft ft   ft   ft   ft   ft   ft" minmax(100px, auto)
+    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
+}
+
+ +

이 단축용법이 제공하는 다른 기능은 나중에 자동 배치와 grid-auto-flow 프로퍼티를 알아보는 가이드에서 다시 살펴보겠습니다.

+ +

만약 지금까지의 초반 가이드들을 쭉 훑어보셨다면, 이제 라인을 기준으로 한 배치나 이름이 지명된 영역을 사용해서 그리드 레이아웃을 만드실 수 있는 위치까지 도달하셨습니다. 다음엔 충분한 시간을 가지고 그리드를 사용해서 몇몇 일반적인 레이아웃 패턴을 만들어 보시도록 하십시오. 앞으로 더 배워야 할 많은 새로운 기술 용어들이 있지만, 이들의 문법은 비교적 이해하기 쉬울 겁니다. 여러 예제를 다루시면서, 지금까지 다루지 않았던 것들에 대한 여러 의문점과 복잡한 사용 사례들을 마주칠 수 있을 겁니다. 이번 가이드의 나머지 부분에서는 표준 명세서에 있는 좀 더 자세한 사항들을 알아 볼 예정입니다. 그래서 앞으로 소개될 기술을 가지고 좀 더 복잡한 고급 레이아웃을 만들 수 있게 되시길 바랍니다.

+ + diff --git a/files/ko/web/css/css_grid_layout/index.html b/files/ko/web/css/css_grid_layout/index.html new file mode 100644 index 0000000000..f3d2b42199 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/index.html @@ -0,0 +1,253 @@ +--- +title: CSS 그리드 레이아웃 +slug: Web/CSS/CSS_Grid_Layout +tags: + - CSS + - Grid Layout + - Grids + - 개요 + - 그리드 + - 그리드 레이아웃 + - 레이아웃 + - 참고 +translation_of: Web/CSS/CSS_Grid_Layout +--- +

CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 콘트롤 간의 관계를 정의하는 데 아주 탁월합니다.

+ +

테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다.

+ +

기본 예제

+ +

아래 예제는 3개의 세로 열 트랙으로 이루어졌으며, 저절로 채워지며 생성되는 가로 행 트랙은 높이가 최소 100픽셀 이상, 콘텐츠 최대치까지 자동으로 늘어나는 구조의 그리드를 보여줍니다. 각 아이템은 그리드 라인을 기준으로 배치되었습니다.

+ +
+ + +

HTML

+ +
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>
+ +

CSS

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+
+ +

{{ EmbedLiveSample('example', '500', '440') }}

+
+ +

참고

+ +

CSS 프로퍼티

+ +
+
    +
  • {{cssxref("grid-template-columns")}}
    • +
  • {{cssxref("grid-template-rows")}}
    • +
  • {{cssxref("grid-template-areas")}}
    • +
  • {{cssxref("grid-template")}}
    • +
  • {{cssxref("grid-auto-columns")}}
    • +
  • {{cssxref("grid-auto-rows")}}
    • +
  • {{cssxref("grid-auto-flow")}}
    • +
  • {{cssxref("grid")}}
    • +
  • {{cssxref("grid-row-start")}}
    • +
  • {{cssxref("grid-column-start")}}
    • +
  • {{cssxref("grid-row-end")}}
    • +
  • {{cssxref("grid-column-end")}}
    • +
  • {{cssxref("grid-row")}}
    • +
  • {{cssxref("grid-column")}}
    • +
  • {{cssxref("grid-area")}}
    • +
  • {{cssxref("grid-row-gap")}}
    • +
  • {{cssxref("grid-column-gap")}}
    • +
  • {{cssxref("grid-gap")}}
    • +
+
+ +

CSS 함수

+ +
+
    +
  • {{cssxref("repeat", "repeat()")}}
    • +
  • {{cssxref("minmax", "minmax()")}}
    • +
  • {{cssxref("fit-content", "fit-content()")}}
    • +
+
+ +

CSS 데이터 타입

+ +
+
    +
  • {{cssxref("<flex>")}}
    • +
+
+ +

용어집 목록

+ +
+ +
+ +

가이드

+ +
+ +
+ +

외부 문서

+ + + +

표준 문서

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.
+ + diff --git a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html new file mode 100644 index 0000000000..bc0957fb2e --- /dev/null +++ b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -0,0 +1,497 @@ +--- +title: Layout using named grid lines +slug: Web/CSS/CSS_Grid_Layout/Layout_using_named_grid_lines +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines +--- +

이전 가이드에선 그리드 트랙을 정의하면 생성되는 라인을 사용해서 아이템을 배치하는 법을 살펴보았으며, 또한 이름이 명명된 템플릿 영역을 가지고 어떻게 아이템들을 배치하는지도 알아보았습니다. 이번 가이드에선 이름이 주어진 라인을 쓰는 상황에서 이 두 가지 방법이 서로 어떻게 작용하는지 알아보겠습니다. 라인에 이름을 지어 주는 것이 매우 유용할 때도 있지만, 이름과 트랙 크기가 혼합돼서 사용되는 그리드 용법을 보고 있으면 매우 헷갈릴 수도 있습니다. 하지만 몇 가지 예제를 가지고 작업해 보시면 점점 명확해지면서 나중엔 작업하기도 훨씬 수월해지실 겁니다.

+ +

그리드를 정의할 때 라인의 이름 짓는 법

+ +

grid-template-rows 그리고 grid-template-columns 프로퍼티로 그리드를 정의할 때 그리드에 있는 모든 라인 혹은 일부 라인들에 이름을 지어 줄 수 있습니다. 본보기로 라인을 기준으로 아이템을 배치하는 방법을 설명한 가이드에서 만들었던 간단한 레이아웃을 예로 들어 보겠습니다. 이번엔 이름이 주어진 라인을 써서 그리드를 만들 겁니다.

+ +
+ + +

그리드를 정의할 때, 그리드 라인의 이름은 대괄호 안에 적어줍니다. 여기서 라인 이름은 원하시는 것 아무거나 다 괜찮습니다. 여기선 컨테이너를 감싸는 행과 열 방향의 시작과 끝 라인 모두의 이름을 정의해 주었습니다. 그리드에 있는 모든 라인의 이름을 다 붙여줄 필요는 없습니다만, 그리드 가운데에 있는 블록의 행과 열 방향의 라인 이름을 content-start 그리고 content-end라는 이름을 정의해 주었습니다. 이런 식으로 레이아웃의 몇몇 주요 라인들에만 이름을 붙여주시면 됩니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+
+ +

이렇게 라인들에 이름을 짓고 나면, 라인 번호 대신에 이름을 써서 아이템을 배치할 수 있게 됩니다.

+ +
.box1 {
+  grid-column-start: main-start;
+  grid-row-start: main-start;
+  grid-row-end: main-end;
+}
+
+.box2 {
+  grid-column-start: content-end;
+  grid-row-start: main-start;
+  grid-row-end: content-end;
+}
+
+.box3 {
+  grid-column-start: content-start;
+  grid-row-start: main-start;
+}
+
+.box4 {
+  grid-column-start: content-start;
+  grid-column-end: main-end;
+  grid-row-start: content-end;
+}
+
+ +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+  <div class="box4">Four</div>
+</div>
+
+ +

{{ EmbedLiveSample('example_named_lines', '500', '330') }}

+
+ +

라인을 기준으로 배치할 때 적용할 수 있는 다른 모든 사항은 여기서도 똑같은 방식으로 작동하며 이름이 주어진 라인과 라인 번호를 섞어서 사용하실 수도 있습니다. 이름이 주어진 라인의 사용은 그리드를 재정의하는 반응형 디자인을 만들고자 할 때, 미디어 쿼리에서 라인 번호를 바꿔가면서 일일이 콘텐츠의 위치를 다시 정의해 줄 필요가 없다는 장점이 있습니다. 다만, 그리드를 정의할 때 라인의 이름은 항상 같은 것을 사용하도록 주의해야 합니다.

+ +

라인에 여러 개의 이름 지어주기

+ +

라인의 이름을 정할 때 하나 이상의 이름을 붙여주고 싶을 때가 있는데, 예를 들어 sidebar-end 그리고 main-start를 함께 표기하고자 할 때가 있습니다. 이럴 땐 [sidebar-end main-start]처럼 대괄호 안에서 공백을 사이에 두고 이름을 추가해 주면 됩니다. 그러면 해당 라인은 둘 중 아무 이름을 써도 같은 것을 가리키게 됩니다.

+ +

이름이 주어진 라인으로 만들어지는 잠재적 그리드 영역

+ +

라인의 이름을 지어줄 때는 원하시는 이름 아무거나 붙여주셔도 된다고 말씀드린 바 있습니다. 여기에 붙이는 이름은 custom ident로서, 저자가 정의해 준 이름이 됩니다. 이름을 지을 때 명세서에 나타날 수 있는 단어는 피하시는 게 좋으며 span과 같이 혼동을 줄 수 있는 것도 사용하지 말아야 합니다. 그리고 이름에 따옴표가 포함되면 안 됩니다.

+ +

이름은 아무거나 선택하실 수 있지만, 위 예제에 나와 있는 것처럼 만약에 영역 주변에 있는 라인의 이름 끝에 -start 혹은 -end를 붙이면, 그리드는 전체 이름 중 꼬리 부분을 뗀 주요 이름만으로 명명된 영역을 생성하게 됩니다. 위 예제에선, 열과 행의 라인 모두 content-start와 content-end라는 이름이 주어져 있습니다. 이 말은 content라는 이름의 영역이 자동으로 만들어 지면서, 원하시면 어떠한 요소든 해당 영역에 이 이름을 써서 배치할 수 있게 된다는 뜻입니다.

+ +
+ + +

다음 예제에선 위에서와 똑 같은 그리드를 정의해 주었지만, 이번엔 content라는 이름을 가진 영역에 하나의 아이템을 배치하였습니다.

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
+  grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [main-end];
+}
+.thing {
+  grid-area: content;
+}
+
+ +
<div class="wrapper">
+  <div class="thing">I am placed in an area named content.</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_areas_from_lines', '500', '330') }}

+
+ +

여기선 라인의 이름을 지어 주면서 해당 라인이 감싸는 영역이 자동으로 만들어졌기 때문에, grid-template-areas를 써서 영역의 위치를 일일이 정의해 줄 필요가 없습니다.

+ +

이름이 주어진 영역으로 만들어지는 잠재적 그리드 라인

+ +

지금까지 라인에 이름을 지어 주면 어떻게 해당 이름으로 된 영역도 함께 만들어지는지 살펴보았으며, 이는 역으로도 작용합니다. 이름이 주어진 템플릿 영역은 그에 어울리는 이름이 붙여진 라인을 생성하면서, 이를 이용해서 아이템을 배치할 수 있게 됩니다. 이전 그리드 템플릿 영역에 관한 가이드에서 만들었던 레이아웃을 그대로 가져와서, 여기에 영역을 지정해서 만들어진 라인을 써서 레이아웃에  적용해 본다면 이것이 어떻게 작동하는지 쉽게 이해하실 수 있을 겁니다.

+ +

다음 예제에선 overlay라는 이름의 클래스를 지정한 추가 div 요소를 더하였습니다. grid-area 프로퍼티를 써서 이름이 주어진 영역을 생성하였고, grid-template-areas 프로퍼티에서 레이아웃을 정의해 주었습니다. 영역의 이름은 다음과 같습니다:

+ +
    +
  • hd
    • +
  • ft
    • +
  • main
    • +
  • sd
    • +
+ +

이렇게 해서 만들어진 열과 행 라인의 이름은 다음과 같습니다:

+ +
    +
  • hd-start
    • +
  • hd-end
    • +
  • sd-start
    • +
  • sd-end
    • +
  • main-start
    • +
  • main-end
    • +
  • ft-start
    • +
  • ft-end
    • +
+ +

이름이 주어진 라인의 모습은 아래 그림에서 확인할 수 있는데, 몇몇 라인들은 두 개의 이름을 가지고 있는 것을 확인하실 수 있습니다. 예를 들면, sd-end와 main-start는 같은 열 방향의 라인을 가리키고 있습니다.

+ +

An image showing the implicit line names created by our grid areas.

+ +

여기서 잠재적으로 이름이 주어진 라인을 써서 overlay 요소를 배치하는 방법은 이름을 직접 지정한 라인을 써서 아이템을 배치하는 방법과 똑같습니다.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+  grid-template-areas:
+    "hd hd hd hd   hd   hd   hd   hd   hd"
+    "sd sd sd main main main main main main"
+    "ft ft ft ft   ft   ft   ft   ft   ft";
+}
+
+.header {
+  grid-area: hd;
+}
+
+.footer {
+  grid-area: ft;
+}
+
+.content {
+  grid-area: main;
+}
+
+.sidebar {
+  grid-area: sd;
+}
+
+.wrapper > div.overlay {
+  z-index: 10;
+  grid-column: main-start / main-end;
+  grid-row: hd-start / ft-end;
+  border: 4px solid rgb(92,148,13);
+  background-color: rgba(92,148,13,.4);
+  color: rgb(92,148,13);
+  font-size: 150%;
+}
+
+ +
<div class="wrapper">
+  <div class="header">Header</div>
+  <div class="sidebar">Sidebar</div>
+  <div class="content">Content</div>
+  <div class="footer">Footer</div>
+  <div class="overlay">Overlay</div>
+</div>
+
+ +

{{ EmbedLiveSample('implicit_lines_from_area', '500', '330') }}

+
+ +

이름이 주어진 영역으로부터 라인이 생성되고 또 라인에 이름을 정해주면 거기에 맞는 영역이 만들어지면서, 이를 이용해 아이템을 배치할 수 있다는 점을 고려한다면, 그리드 레이아웃을 만들기 시작할 때 미리 계획해서 이름을 정하는 데 약간의 시간을 할애할 가치가 있음을 알 수 있습니다. 이름을 선택할 때 자신과 자기 팀원들 모두가 쉽게 이해할 수 있는 것으로 정한다면 모두에게 여러분이 만든 레이아웃을 쉽게 이용하는 데 도움을 줄 수 있을 것입니다.

+ +

repeat()을 써서 같은 이름을 가진 여러 개의 라인 만들기

+ +

만약에 그리드에 있는 모든 라인에 독자적인 이름을 지어 주길 원하신다면, 트랙을 정의할 때 반복 용법을 사용하는 대신 대괄호 안에다 이름을 일일이 추가해줘야 해서 약간 장황하게 트랙의 정의를 작성하셔야 합니다. 반복 용법을 사용하게 되면 여러 라인이 같은 이름을 갖게 되는데, 이 또한 매우 유용할 수도 있습니다.

+ +

다음 예제에서는 같은 너비를 가진 열두 개의 열로 구성된 그리드를 생성합니다. 여기선 1fr 너비의 열 트랙을 정의하기 전에 [col-start]라는 라인 이름을 함께 정의해 주었습니다. 이렇게 하면 1fr 너비의 세로 열 전면에 똑같이 col-start라는 이름이 주어진 12개의 열 방향의 라인으로 구성된 그리드를 만들게 됩니다.

+ +
+ + +

 

+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+ +

이렇게 그리드를 생성하고 나면 여기에다 아이템을 배치할 수 있게 됩니다. 여러 개의 라인 이름을 col-start라는 이름으로 지어 주었기 때문에 col-start 라인을 기준 시작 지점으로 아이템을 배치하게 되면 그리드는 첫 번째에 있는 col-start라는 이름의 라인을 사용하게 되는데, 여기선 맨 왼쪽에 있는 라인이 여기에 해당합니다. 또 다른 라인을 가리키려면 이름과 함께 해당 라인의 번호를 더해주면 됩니다. 아이템을 col-start라는 이름의 첫 번째 라인으로부터 다섯 번째 라인까지 걸치도록 배치하려면 다음과 같이 정의해 줍니다:

+ +
.item1 {
+  grid-column: col-start / col-start 5
+}
+
+ +

또한, 여기선 span 키워드를 쓰실 수도 있습니다. 다음 아이템은 col-start 이름을 가진 일곱 번째 라인부터 세 개의 라인에 걸치도록 배치하였습니다.

+ +
.item2 {
+  grid-column: col-start 7 / span 3;
+}
+
+ +

 

+ +
<div class="wrapper">
+  <div class="item1">I am placed from col-start line 1 to col-start 5</div>
+  <div class="item2">I am placed from col-start line 7 spanning 3 lines</div>
+</div>
+ +

{{ EmbedLiveSample('multiple_lines_same_name', '500', '330') }}

+
+ +

이 레이아웃을 Firefox Grid Highlighter에서 살펴보면 세로 열 라인이 어떻게 구성되어 있는지 그리고 또 아이템들이 이 라인들에 따라 어떻게 배치되었는지 확인하실 수 있습니다.

+ +

The 12 column grid with items placed. The Grid Highlighter shows the position of the lines.

+ +

반복 용법은 또한 트랙의 목록을 나열해서 사용할 수 있으며, 오직 하나의 트랙 크기만 반복하도록 쓰실 필요는 없습니다. 아래의 코드는 여덟 개의 트랙으로 구성된 그리드를 만드는데, 상대적으로 더 좁은 1fr 너비의 col1-start라는 라인 이름이 지정된 세로 열 트랙 다음으로 3fr 너비의 col2-start라는 라인 이름이 지정된 세로 열 트랙으로 구성되어 있습니다.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
+}
+
+ +

만약에 반복 용법에 사용된 두 개의 라인이 서로 겹치게 된다면 그 둘은 나중에 하나로 합쳐지는데, 이는 반복 용법을 쓰지 않고 트랙을 정의할 때 하나의 라인에 여러 개의 이름을 지정해 주는 것과 똑같은 결과를 만들어 냅니다. 다음 정의에선 1fr 너비의 트랙 네 개를 생성하는데, 각 트랙은 서로 시작과 마지막을 지점에 있는 라인을 갖게 됩니다.

+ +
.wrapper {
+  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
+}
+
+ +

반복 표기법을 쓰지 않고 이번에 정의한 것과 같도록 작성해 준다면 다음과 같이 써줄 수 있습니다.

+ +
.wrapper {
+  grid-template-columns: [col-start] 1fr [col-end col-start] 1fr [col-end col-start] 1fr  [col-end col-start] 1fr [col-end];
+}
+
+ +

트랙 목록을 사용했다면 span 키워드를 써서, 단지 몇 개의 라인들을 걸치게 할지 정해줄 뿐만 아니라, 특정 이름의 라인 몇 개를 걸쳐서 자리를 잡게 할지도 정해 줄 수 있습니다.

+ +
+ + +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(6, [col1-start] 1fr [col2-start] 3fr);
+}
+
+.item1 {
+  grid-column: col1-start / col2-start 2
+}
+
+.item2 {
+  grid-row: 2;
+  grid-column: col1-start 2 / span 2 col1-start;
+}
+
+ +
<div class="wrapper">
+  <div class="item1">I am placed from col1-start line 1 to col2-start line 2</div>
+  <div class="item2">I am placed from col1-start line 2 spanning 2 lines named col1-start</div>
+</div>
+
+ +

{{ EmbedLiveSample('span_line_number', '500', '330') }}

+
+ +

최근 세 개의 가이드를 통해서 여러분은 그리드를 이용해 아이템을 배치하는 방법이 아주 다양하다는 것을 발견하셨을 겁니다. 처음엔 이것이 너무 복잡하다고 느끼실 수도 있겠지만, 이 모든 것을 다 이해하고 사용하실 필요는 없다는 점을 기억하시기 바랍니다. 실상황에서 간단하고 명확한 레이아웃을 구현할 경우에는 이름이 지명된 템플릿 영역을 쓰는 것이 적당할 것입니다. 이것은 레이아웃이 어떤 모습을 보여줄지 시각적으로 좋은 묘사를 제공하며, 또한 그리드에 있는 아이템을 이리저리 쉽게 옮길 수도 있습니다.

+ +

또한, 예를 들어 만약에 다중 칼럼에 꼭 들어맞는 레이아웃을 가지고 작업할 때는 이 가이드 마지막 부분에서 설명한 이름이 지정된 라인들을 사용했던 그리드가 제격입니다. 만약에 Foundation 혹은 Boostrap과 같은 프레임워크에서 채용한 그리드 시스템을 고려하신다면, 이들은 12개의 세로 열 그리드를 기준으로 하고 있습니다. 프레임워크에서는 세로 열을 모두 합쳐 최대 100%를 차지하도록 하는 모든 계산이 코드 속에 포함되어 있습니다. 하지만, 그리드 레이아웃에서 이 그리드 "프레임워크"를 구현하는데 필요한 코드는 아래처럼 아주 간단하게 작성할 수 있습니다:

+ +
+
.wrapper {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+}
+
+ +

그러면 페이지 레이아웃에 이 프레임워크를 그대로 가져다 쓰실 수 있습니다. 예를 들어, 헤더와 푸터가 있는 세 개의 세로 열 레이아웃을 구현한다면 아래와 같은 마크업을 작성할 수 있습니다.

+ + + +
<div class="wrapper">
+  <header class="main-header">I am the header</header>
+  <aside class="side1">I am sidebar 1</aside>
+  <article class="content">I am the main article</article>
+  <aside class="side2">I am sidebar 2</aside>
+  <footer class="main-footer">I am the footer</footer>
+</div>
+
+ +

그러면 이것을 이번에 작성한 그리드 레이아웃 프레임워크를 써서 다음과 같이 배치할 수 있습니다.

+ +
.main-header,
+.main-footer  {
+  grid-column: col-start / span 12;
+}
+
+.side1 {
+  grid-column: col-start / span 3;
+  grid-row: 2;
+}
+
+.content {
+  grid-column: col-start 4 / span 6;
+  grid-row: 2;
+}
+
+.side2 {
+  grid-column: col-start 10 / span 3;
+  grid-row: 2;
+}
+
+ +

{{ EmbedLiveSample('three_column', '500', '330') }}

+ +

다시 한번 말씀드리지만, Firefox Grid Highlighter는 지금까지 우리가 배치했던 아이템들이 그리드 위에 어떻게 놓였는지 확인할 때 아주 유용하답니다.

+ +

The layout with the grid highlighted.

+
+ +

필요한 건 이게 전부 다입니다. 복잡한 계산 작업도 필요하지 않고, 그리드가 1fr 크기의 세로 열 트랙에 공간을 할당하기 전에, 자동으로 10픽셀 크기의 경계 여백 트랙이 차지하는 공간을 알아서 제거해 줍니다. 차차 여러분만의 레이아웃을 만들다 보면, 용법에 점점 더 익숙해 지면서 자기에게 맞는 작업 방식을 터득하게 되고, 나중에 만들고자 하는 프로젝트의 유형에 따라 적당한 것을 고를 수 있는 요령이 생기게 되실 겁니다. 우선은 지금까지 소개된 여러 방법들을 가지고 몇몇 자주 쓰이는 레이아웃의 형태들을 만들어 보신다면, 아마도 곧 가장 효율적인 자기만의 작업 방식을 찾으실 수 있을 겁니다. 그러면, 다음 가이드에선 배치 관련 프로퍼티를 전혀 쓰지 않고도 아이템들이 그리드 위에 알아서 배치되도록 만드는 방법을 알아보겠습니다.

+ + diff --git a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html new file mode 100644 index 0000000000..91b32582b4 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -0,0 +1,649 @@ +--- +title: Line-based placement with CSS Grid +slug: Web/CSS/CSS_Grid_Layout/Line-based_placement_with_CSS_grid +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid +--- +

그리드 레이아웃의 기본 개념을 다룬 문서에서 라인 번호를 사용하여 그리드에 아이템을 배치하는 방법을 잠깐 살펴본 적이 있습니다. 이번 문서에서는 이 기본적 기능이 어떻게 작동하는지를 자세히 살펴보겠습니다.

+ +

그리드를 연구할 때는 번호가 매겨진 라인부터 시작하는 것이 가장 논리적일 겁니다. 왜냐하면, 그리드 레이아웃을 쓸 때마다 거기엔 항상 번호가 매겨진 라인이 있기 때문입니다. 행과 열의 각 라인에는 번호가 매겨져 있으며, 라인에 번호를 매길 때는 1번부터 시작합니다. 그리드 라인은 문서의 작성 모드를 기준으로 번호가 매겨진다는 것을 명심하십시오. 영어와 같이 왼쪽에서 오른쪽으로 읽히는 언어로 쓰인 문서에서는 1번 라인이 그리드의 맨 왼쪽에 위치합니다. 반대로 오른쪽에서 왼쪽으로 읽히는 언어의 문서에서는 1번 라인이 그리드의 맨 오른쪽에 위치하게 됩니다. 문서 작성 모드와 그리드 사이의 상호 작용에 대해서는 나중에 자세히 알아보겠습니다.

+ +

간단한 예제

+ +

아주 간단한 예로, 세 개의 세로 열 트랙과 세 개의 가로 행 트랙으로 구성된 그리드의 예를 들어보겠습니다. 여기엔 각 방향으로 4개의 라인이 있습니다.

+ +

그리드 컨테이너 안에는 네 개의 자식 요소가 있습니다. 이것들을 아무런 조건 없이 그대로 그리드 위에 위치시키면, 자동 배치 규칙에 따라 각 아이템은 처음에 있는 네 개의 셀 위에 놓이게 됩니다. 여기서 Firefox의 Grid Highlighter를 사용하면 그리드의 열과 행이 어떻게 정의되어 있는지 확인하실 수 있습니다.

+ +

Our Grid highlighted in DevTools

+ + + +
.wrapper {
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   grid-template-rows: repeat(3, 100px);
+}
+
+ +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +

{{ EmbedLiveSample('간단한_예제', '300', '330') }}

+ +

라인 번호로 아이템 배치하기

+ +

아이템들을 그리드 위 어느 곳에 자리 잡게 할지 조정할 때는 라인을 기준으로 배치할 수 있습니다. 우선 아래 예제에서는 첫 번째 아이템을 그리드의 맨 왼쪽부터 시작해서 하나의 열 트랙에 자리하도록 하였습니다. 또한, 그리드 상단에 있는 첫 번째 행부터 시작해서 네 번째 행까지 확장하도록 하였습니다.

+ +
+
.box1 {
+   grid-column-start: 1;
+   grid-column-end: 2;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+
+ +

몇몇 아이템의 위치를 지정해주면, 그리드에 있는 나머지 다른 아이템들은 자동 배치 규칙에 따라 연달아 놓이게 됩니다. 이 규칙은 나중에 가이드에서 어떻게 작동하는지 자세히 살펴볼 예정입니다만, 그리드와 작업하시면 자리를 지정하지 않은 아이템은 그리드의 비어있는 셀에 자동 배치되는 것을 자주 목격하실 수 있습니다.

+ +

각 아이템을 개별적으로 지정해서 행과 열 트랙에 걸쳐 네 개의 아이템들을 모두 배치할 수 있습니다. 원하시면 여기에 몇몇 셀들을 그냥 비워 둘 수도 있습니다. 그리드 레이아웃의 장점 중 하나는, 비어 있는 공간으로 다른 요소가 떠올라 채워지는 것을 막기 위해 마진을 써서 밀어낼 필요가 없어서, 흰 여백이 들어간 디자인을 쉽게 구현할 수 있다는 점입니다.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box2 {
+   grid-column-start: 3;
+   grid-column-end: 4;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-column-end: 3;
+   grid-row-start: 1;
+   grid-row-end: 2;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+   grid-row-end: 4;
+}
+
+ +

{{ EmbedLiveSample('Line_Number', '300', '330') }}

+
+ +
+

grid-column과 grid-row 단축용법

+ +

앞의 예제에선 각 아이템을 배치하기 위해 상당히 많은 코드가 작성되었습니다. 그래서 여기엔 분명 {{glossary("shorthand properties", "단축용법")}}이 있을 거란 예상을 충분히 할 수 있습니다. 실제 {{cssxref("grid-column-start")}}와 {{cssxref("grid-column-end")}} 프로퍼티는 {{cssxref("grid-column")}}으로 합칠 수 있으며, {{cssxref("grid-row-start")}}와 {{cssxref("grid-row-end")}}는 {{cssxref("grid-row")}} 프로퍼티로 정의할 수 있습니다.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 / 2;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 / 4;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 / 3;
+   grid-row: 1 /  2;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 / 4;
+}
+
+ +

{{ EmbedLiveSample('Grid_Shorthands', '300', '330') }}

+
+ +

기본 폭(spans)

+ +

위 예제에선, 프로퍼티의 사용법을 설명하려고 모든 행과 열의 마지막 라인을 지정하였습니다. 하지만, 아이템이 오직 하나의 트랙만 차지한다면 grid-column-end와 grid-row-end 값은 생략할 수 있습니다. 그리드는 기본적으로 하나의 트랙에 걸치게 돼 있습니다. 이 말은 처음의 장황했던 예제가 다음처럼 단축될 수도 있습니다:

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column-start: 1;
+   grid-row-start: 1;
+   grid-row-end: 4;
+}
+.box2 {
+   grid-column-start: 3;
+   grid-row-start: 1;
+   grid-row-end: 3;
+}
+.box3 {
+   grid-column-start: 2;
+   grid-row-start: 1;
+}
+.box4 {
+   grid-column-start: 2;
+   grid-column-end: 4;
+   grid-row-start: 3;
+}
+
+ +

{{ EmbedLiveSample('End_Lines', '300', '330') }}

+
+ +

또한, 단축용법을 사용했던 예제 중 오직 하나의 트랙에 걸쳐 있는 아이템의 경우에는 뒤로 누운 슬래쉬와 두 번째 값을 생략하고 다음처럼 정의할 수 있습니다.

+ +
+ + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+
+ +

{{ EmbedLiveSample('New_Shorthand', '300', '330') }}

+
+ +

grid-area 프로퍼티

+ +

우리는 여기서 한 발 더 나가 각 영역을 단 하나의 프로퍼티인 {{cssxref("grid-area")}}로 정의할 수도 있습니다. grid-area 값의 순서는 다음과 같습니다.

+ +
    +
  • grid-row-start
    • +
  • grid-column-start
    • +
  • grid-row-end
    • +
  • grid-column-end
    • +
+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-area: 1 / 1 / 4 / 2;
+}
+.box2 {
+   grid-area: 1 / 3 / 3 / 4;
+}
+.box3 {
+   grid-area: 1 / 2 / 2 / 3;
+}
+.box4 {
+   grid-area: 3 / 2 / 4 / 4;
+}
+
+ +

{{ EmbedLiveSample('grid-area_프로퍼티', '300', '330') }}

+ +

grid-area 값의 순서는 약간 이상하게 보일 수도 있는데, 예를 들어 마진과 패딩을 단축용법을 써서 지정할 때의 순서와 완전 정반대입니다. 하지만, 그리드가 CSS 문서 작성 모드(CSS Writing Modes) 표준 명세서에 정의된 문서 흐름과 관련된 방향을 채용해서 사용한다는 것을 알게 되면 이해하기 쉽습니다. 차후에 그리드가 문서 작성 모드에 따라 어떻게 작용하는지 알아볼 예정입니다만, 개념상 다음과 같이 문서 흐름과 관련된 네 가지 방향이 있습니다:

+ +
    +
  • block-start
    • +
  • block-end
    • +
  • inline-start
    • +
  • inline-end
    • +
+ +

예를 들자면, 영문으로 쓰인 문서는 왼쪽에서 오른쪽으로 읽습니다. 이 경우 block-start는 그리드 컨테이너의 맨 위쪽에 있는 가로 행 라인이 차지하고, block-end는 컨테이너의 매 마지막 행에 있는 라인에 해당합니다. inline-start는 항상 현재의 문서 작성 모드에 따라 텍스트가 써지는 시작 지점이기 때문에 맨 왼쪽에 있는 세로 열 라인이 여기에 해당하고, inline-end는 그리드의 오른쪽 마지막 끝에 있는 세로 열 라인이 됩니다.

+ +

grid-area 프로퍼티를 써서 그리드 영역을 지정할 땐, 우선 시작 라인인 block-start와 inline-start를 먼저 정의하고, 나중에 마지막 라인으로 block-end와 inline-end를 정의합니다. 이것은 보통 우리가 top, right, bottom 그리고 left 순서의 물리적 프로퍼티를 사용하는 데 익숙하다는 점을 생각하면 이상하게 보일 수도 있지만, 웹사이트의 문서 작성 모드가 여러 방향일 수 있다는 점을 고려하면 이해가 쉬우실 겁니다.

+ +

거꾸로 세기

+ +

우리는 또한 그리드의 블록(block)과 인라인(inline) 지점의 끝에서부터 거꾸로 셀 수도 있는데, 영문 문서의 경우 이것은 맨 오른쪽 세로 열 라인과 마지막 가로 행 라인이 여기에 해당합니다. 이 라인들은 -1로 지칭할 수 있으며, 여기서 거꾸로 셀 수도 있습니다. 그래서 끝에서 두 번째 라인은 -2가 됩니다. 한 가지 주의할 점은, 여기서 말하는 마지막 라인은 명시적으로 grid-template-columns와 grid-template-rows로 정의한 그리드에 있는 마지막 라인을 가리키며, 이 바깥에 있는 잠재적 그리드에 추가된 행이나 열을 고려하지는 않습니다.

+ +

다음 예제에는 아이템을 배치할 때 그리드의 오른쪽과 아래에서부터 작업을 시작해서 이전에 작성했던 레이아웃을 거꾸로 뒤집어 보았습니다.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column-start: -1;
+   grid-column-end: -2;
+   grid-row-start: -1;
+   grid-row-end: -4;
+}
+.box2 {
+   grid-column-start: -3;
+   grid-column-end: -4;
+   grid-row-start: -1;
+   grid-row-end: -3;
+}
+.box3 {
+   grid-column-start: -2;
+   grid-column-end: -3;
+   grid-row-start: -1;
+   grid-row-end: -2;
+}
+.box4 {
+   grid-column-start: -2;
+   grid-column-end: -4;
+   grid-row-start: -3;
+   grid-row-end: -4;
+}
+
+ +

{{ EmbedLiveSample('거꾸로_세기', '300', '330') }}

+ +

그리드 전체에 걸치도록 아이템 늘리기

+ +

아이템을 그리드 전체에 걸치도록 늘리려 할 때 유용한 방법으로 다음과 같이 그리드의 시작과 끝의 라인을 지정해줄 수 있습니다:

+ +
.item {
+  grid-column: 1 / -1;
+}
+
+ +

경계 여백 혹은 간격

+ +

CSS 그리드 표준 명세서에는 {{cssxref("grid-column-gap")}}과 {{cssxref("grid-row-gap")}} 프로퍼티를 써서 열과 행 트랙 사이에 경계 여백을 정의해 줄 수 있는 기능이 포함되어 있습니다. 이것은 다중 칼럼 레이아웃에 있는 {{cssxref("column-gap")}} 프로퍼티와 비슷하게 작용해서 트랙 사이의 간격을 지정합니다.

+ +

간격은 오직 그리드의 트랙 사이에서만 위치하고, 컨테이너의 위나 아래 혹은 왼쪽과 오른쪽에 공간을 추가하지 않습니다. 이전 예제에 있는 그리드 컨테이너에 여기에 소개한 프로퍼티를 사용하여 간격을 추가한 모습을 아래에서 확인하실 수 있습니다.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+   grid-column: 1 ;
+   grid-row: 1 / 4;
+}
+.box2 {
+   grid-column: 3 ;
+   grid-row: 1 / 3;
+}
+.box3 {
+   grid-column: 2 ;
+   grid-row: 1 ;
+}
+.box4 {
+   grid-column: 2 / 4;
+   grid-row: 3 ;
+}
+.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-column-gap: 20px;
+     grid-row-gap: 1em;
+}
+
+ +

{{ EmbedLiveSample('경계_여백_혹은_간격', '300', '350') }}

+ +

그리드 간격의 단축용법

+ +

앞서 소개한 두 개의 프로퍼티 또한 단축용법인 {{cssxref("grid-gap")}}으로 표현해 줄 수 있습니다. 만약에 grid-gap 값으로 하나만 지정하면, 열과 행 간격 모두에 같이 적용됩니다. 그리고 두 개의 값을 지정하면, 처음 것은 grid-row-gap에 사용되고 두 번째 것은 grid-column-gap에 사용됩니다.

+ +
.wrapper {
+     display: grid;
+     grid-template-columns: repeat(3, 1fr);
+     grid-template-rows: repeat(3, 100px);
+     grid-gap: 1em 20px;
+}
+
+ +

라인을 기준으로 한 아이템 배치 관점에서 보면, 이 간격은 마치 라인에 너비를 더한 것처럼 작용합니다. 특정 라인을 시작으로 배치되는 아이템은 간격 다음에 있는 지점에서부터 놓이게 되며, 간격을 차지하거나 그 안에 배치될 수 없습니다. 만약에 경계 여백이 일반 트랙처럼 작용하길 원하시면, 대신에 해당 목적의 트랙을 따로 지정해서 사용하길 바랍니다.

+ +

span 키워드 사용법

+ +

번호를 붙여서 시작과 마지막 라인을 지정하는 법과 더불어, 시작 라인을 지정한 후 원하는 만큼의 영역을 가로질러 확장하는 트랙의 수를 지정해서 사용하실 수도 있습니다.

+ + + +
<div class="wrapper">
+   <div class="box1">One</div>
+   <div class="box2">Two</div>
+   <div class="box3">Three</div>
+   <div class="box4">Four</div>
+</div>
+
+ +
.box1 {
+  grid-column: 1;
+  grid-row: 1 / span 3;
+}
+.box2 {
+   grid-column: 3;
+   grid-row: 1 / span 2;
+}
+.box3 {
+   grid-column: 2;
+   grid-row: 1;
+}
+.box4 {
+   grid-column: 2 / span 2;
+   grid-row: 3;
+}
+
+ +

{{ EmbedLiveSample('span_키워드_사용법', '300', '330') }}

+ +

또한, grid-row-start/grid-row-end 그리고 grid-column-start/grid-column-end 값에도 span 키워드가 쓰일 수 있습니다. 다음의 두 예제에서는 서로 같은 그리드 영역을 만듭니다. 첫 번째 예제에서는 가로 열의 시작 라인을 지정한 후에, 마지막 라인은 3개의 라인을 가로질러 위치하도록 설정하였습니다. 그래서 영역은 1번 라인부터 시작해서 3개의 라인을 가로질러 4번 라인까지 차지하게 됩니다.

+ +
.box1 {
+    grid-column-start: 1;
+    grid-row-start: 1;
+    grid-row-end: span 3;
+}
+
+ +

두 번째 예제에선, 아이템이 끝나는 지점에 있는 마지막 라인을 지정한 다음 시작 라인을 span 3으로 설정하였습니다. 이 얘기는 아이템이 지정한 마지막 가로 열 라인으로부터 위쪽으로 확장해야 한다는 뜻입니다. 이렇게 하면, 영역은 4번 라인부터 시작해서 3개의 라인을 가로질러 1번 라인까지 차지하게 됩니다.

+ +
.box1 {
+    grid-column-start: 1;
+    grid-row-start: span 3;
+    grid-row-end: 4;
+}
+
+ +

그리드 라인을 기준으로 아이템을 배치하는 법에 익숙해지시려면, 다양한 수의 열로 이뤄진 그리드에 아이템들을 배치하시면서 몇 가지 일반적 레이아웃을 만들어보는 여러 시도를 해보시기 바랍니다. 여기서 주의할 점은 모든 아이템의 위치를 일일이 지정하지 않았다면, 나머지 아이템들은 자동 배치 규칙에 따라 배치된다는 것을 명심하시기 바랍니다. 이런 레이아웃이 원하시는 것일 수도 있지만, 만약에 의도치 않은 곳에 아이템이 표시된다면, 해당 아이템의 위치를 지정해 주었는지 꼭 확인해 보십시오.

+ +

또한, 그리드에 배치된 아이템들은 원하시면 명확히 지정해서 서로 자리가 겹치게 할 수도 있다는 것을 잊지 마십시오. 이렇게 하면 특이하고 멋진 효과를 만들어 낼 수도 있습니다만, 만약에 시작 혹은 마지막 라인을 잘못 지정해 놓았다면, 의도치 않은 곳에서 서로 겹쳐 버리는 결과를 가져올 수도 있습니다. Firefox Grid Highlighter는 배우시면서 매우 유용하게 사용될 수 있는데, 특히나 그리드가 상당히 복잡한 경우에는 더 그렇습니다.

+ + diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html new file mode 100644 index 0000000000..8483386140 --- /dev/null +++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -0,0 +1,625 @@ +--- +title: Relationship of grid layout to other layout methods +slug: Web/CSS/CSS_Grid_Layout/Relationship_of_grid_layout +tags: + - CSS + - CSS Grids + - Guide +translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout +--- +

CSS 그리드 레이아웃은 레이아웃 작업을 위한 전체 시스템 중의 일부로서, 다른 CSS 기술과 함께 어우러져 작동하도록 설계되었습니다. 이번 가이드에서는 이미 사용하고 계신 다른 기술과 그리드가 어떻게 잘 어울리는지 설명해 드리겠습니다.

+ +

그리드와 플랙스박스

+ +

CSS 그리드 레이아웃과 CSS 플랙스박스(Flexbox) 레이아웃의 기본 차이점이라면, 플랙스박스는 한 줄로 된 행 혹은 열 방향의 레이아웃과 같이 일차원의 레이아웃을 염두에 두고 설계되었다는 점입니다. 하지만, 그리드는 행과 열 모두를 염두에 둔 2차원적 레이아웃을 고려해서 설계되었습니다. 그러나 두 기술은 몇 가지 공통된 면모를 공유하고 있어서, 이미 플랙스박스 사용법을 익히셨다면 그리드를 이해하는 데도 도움이 될 만한 둘 사이의 유사점을 목격하실 수도 있습니다.

+ +

1차원적 대비 2차원적 레이아웃

+ +

간단한 예를 들면, 1차원 및 2차원 레이아웃의 차이점은 확연해집니다.

+ +

첫 번째 예제에서는 플랙스박스를 써서 일련의 네모난 상자들을 배치하였습니다. 컨테이너 안에는 다섯 개의 자식 아이템이 있고, 플랙스 기준값 200픽셀을 기반으로 아이템이 늘어나거나 줄어들도록 flex 프로퍼티 값을 지정하였습니다.

+ +

또한, {{cssxref("flex-wrap")}} 프로퍼티 값으로 wrap을 지정해서, 만약 컨테이너 안에 있는 공간이 플랙스 기준값 너비의 아이템들을 모두 나열하지 못할 만큼 좁아진다면, 다음 행으로 줄 바꿈 하도록 하였습니다.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+}
+.wrapper > div {
+  flex: 1 1 200px;
+}
+
+
+ +

{{ EmbedLiveSample('onedtwod', '500', '230') }}

+ +

위의 그림에서 보시다시피, 두 개의 아이템이 다음 행으로 줄 바꿈 한 것을 확인하실 수 있습니다. 이 아이템들은 남은 공간을 공유하며 아래 위치한 아이템들은 위에 있는 것들과는 일렬로 정렬되지 않았습니다. 이는 플랙스 아이템이 다음 열로 감길 때, 새로운 각각의 행 (또는 세로 열 기준으로 작업할 경우 각각의 열)이 새로운 플랙스 컨테이너가 되기 때문입니다. 그래서 공간의 분배는 가로 행을 기준으로 이루어집니다.

+ +

여기서 자주 던지는 질문으로, 그러면 이런 아이템을 어떻게 하면 일렬로 정렬할 수 있을까입니다. 이럴 땐 2차원적 레이아웃 방법을 고려해 볼 수 있습니다. 아이템을 정렬할 때 행과 열을 기준으로 제어하고 싶다면, 이런 경우엔 그리드가 제격입니다.

+ +

CSS 그리드를 이용한 동일 레이아웃 구현

+ +

다음 예제에선 그리드를 써서 똑같은 레이아웃을 만들어 보았습니다. 이번엔 1fr 크기로 된 세 개의 세로 열 트랙으로 이루어져 있습니다. 아이템 자체에는 아무것도 설정할 필요가 없고, 아이템들은 생성된 그리드의 각 셀에 하나씩 배치됩니다. 보시다시피 아이템들은 행과 열에 줄지어서 그리드 위에 정확히 맞추어져 있습니다. 아이템이 다섯 개인 경우, 2번째 행의 끝부분은 빈 곳으로 남게 됩니다.

+ +
+ + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+  <div>Four</div>
+  <div>Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+ +

{{ EmbedLiveSample('Two_Dimensional_With_Grid', '300', '170') }}

+
+ +

그리드와 플랙스박스 둘 사이의 선택을 고민할 때 자신에게 던질 수 있는 간단한 질문으로:

+ +
    +
  • 레이아웃을 조정할 때 오직 가로 행 혹은 세로 열 만이 고려 대상이라면 – 플랙스박스를 사용하십시오
    • +
  • 레아아웃을 조정할 때 가로 행과 세로 열 모두를 염두에 두어야 한다면 – 그리드를 사용하십시오
    • +
+ +

콘텐츠 중심 혹은 레이아웃 먼저?

+ +

1차원 대비 2차원의 차이점 외에도, 레이아웃을 할 때 플랙스박스와 그리드 중에서 어떤 것을 써야 할지를 결정하는 또 다른 요인이 있습니다. 플랙스박스는 좀 더 콘텐츠에 초점이 맞춰져 있습니다. 플랙스박스의 이상적인 사용 사례는 여러 아이템을 컨테이너에 고르게 배치하려는 경우입니다. 여기서 콘텐츠의 크기가 각 아이템이 차지하는 공간을 결정합니다. 아이템이 새로운 줄로 줄 바꿈 되면, 아이템의 크기와 해당 줄의 사용 가능한 공간에 따라 간격이 조정됩니다.

+ +

그리드는 레이아웃을 먼저 고려하게 됩니다. CSS 그리드 레이아웃을 사용할 때는 우선 레이아웃을 작성한 다음 그 위에 아이템을 배치하거나, 자동 배치 규칙을 통해 견고하게 짜인 그리드 위에 놓인 그리드 셀에 아이템을 배치하게 됩니다. 콘텐츠의 크기에 따라 조절되는 트랙을 만들 수도 있지만, 이렇게 하면 전체 트랙을 변경하게 됩니다.

+ +

플랙스박스를 사용하면서 그 특유의 유연성 때문에 제약을 느낀다면, CSS 그리드 레이아웃을 고려해 보시는 것도 좋을 겁니다. 예를 들어 윗줄에 있는 다른 아이템과 일렬로 정렬되게 하려고 굳이 플랙스 아이템에 퍼센트 너비를 지정해야 할 때가 있는데, 이 경우 그리드가 더 나은 선택이 될 수 있습니다.

+ +

박스 정렬

+ +

플랙스박스의 기능 중 많은 사람이 가장 흥미롭게 여겼던 것은 처음으로 적절한 정렬 제어 기능을 제공한다는 것입니다. 그래서 이젠 박스를 페이지의 중앙에 손쉽게 배치할 수도 있게 되었습니다. 플렉스 아이템은 플렉스 컨테이너의 높이만큼 늘어날 수도 있어서, 같은 높이의 칼럼 레이아웃을 구현할 수도 있습니다. 이것은 개발자가 아주 오랫동안 원했던 것이어서, 그동안 최소한 시각적 효과라도 흉내 내기 위해 온갖 종류의 꼼수를 고안해 내기도 했었습니다.

+ +

플랙스박스 표준 명세서에 있는 정렬 프로퍼티는 박스 정렬 레벨(Box Alignment Level) 3의 새로운 표준에 추가되었습니다. 이 말은 그리드 레이아웃을 비롯한 다른 표준에서도 사용할 수 있다는 뜻입니다. 그래서 미래에는 다른 레이아웃 방법에도 똑같이 적용될 수 있습니다.

+ +

이 가이드 시리즈의 후반부에서 박스 정렬에 관해 자세히 알아볼 것이며 또한, 그리드 레이아웃에서 어떻게 작동하는지도 살펴보겠습니다. 하지만 여기서는 플랙스박스와 그리드를 비교하는 간단한 예제를 살펴보겠습니다.

+ +

플랙스박스를 사용하는 첫 번째 예제에는 컨테이너 안에 세 개의 아이템이 있습니다. 감싸고 있는 요소에 {{cssxref("min-height")}}를 지정해서, 플랙스 컨테이너의 높이를 정의해 줍니다. 플렉스 컨테이너의 {{cssxref("align-items")}} 값을 flex-end로 설정하여 아이템이 플랙스 컨테이너의 끝에 정렬되도록 했습니다. 또한, box1에 {{cssxref("align-self")}} 프로퍼티를 설정하여 기본값을 덮어씌우면서 컨테이너의 높이 만큼 늘어나게 하였고, box2에는 플랙스 컨테이너의 시작 지점에 정렬되도록 하였습니다.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: flex;
+  align-items: flex-end;
+  min-height: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: flex-start;
+}
+
+ +

{{ EmbedLiveSample('박스_정렬', '300', '230') }}

+ +

CSS 그리드에서의 정렬

+ +

다음 두 번째 예제에서는 그리드를 써서 앞에서와 똑같은 레이아웃을 구현했습니다. 이번에는 그리드 레이아웃에 적용할 때 쓰는 박스 정렬 프로퍼티를 사용하였습니다. 그래서 flex-start와 flex-end가 아닌 start와 end를 써서 정렬합니다. 그리드 레이아웃의 경우 해당 그리드 영역을 기준으로 내부에 있는 아이템들을 정렬합니다. 이번 경우에는 단일 그리드 셀로 되어 있지만, 그리드 영역이 여러 그리드 셀로 구성되어 있을 수도 있습니다.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3,1fr);
+  align-items: end;
+  grid-auto-rows: 200px;
+}
+.box1 {
+  align-self: stretch;
+}
+.box2 {
+  align-self: start;
+}
+
+ +

{{ EmbedLiveSample('CSS_그리드에서의_정렬', '200', '310') }}

+ +

fr 단위와 flex-basis

+ +

우리는 이미 fr 단위가 어떻게 그리드 컨테이너 속 사용 가능한 공간을 비율에 따라 그리드 트랙에 할당하는지 보았습니다. fr 단위가 {{cssxref("minmax", "minmax()")}} 함수와 결합하면 플랙스박스의 flex 프로퍼티와 매우 유사한 동작을 구현할 수 있으며, 동시에 2차원 레이아웃을 구성할 수도 있습니다.

+ +

이전의 1차원과 2차원 레이아웃의 차이점을 보여주는 예제를 살펴보면, 두 레이아웃이 반응하는 방식에 차이가 있다는 점을 아실 수 있습니다. 플랙스 레이아웃의 경우, 브라우저 창을 더 넓거나 좁게 드래그하면, 플랙스 박스는 사용 가능한 공간에 따라 각 행에 나열되는 아이템의 수를 적절하게 조정합니다. 공간이 많다면 5개의 아이템 모두가 한 행에 들어갈 수 있을 것이며, 컨테이너 너비가 매우 좁다면 단지 하나의 아이템이 들어갈 만한 공간이 남을 수도 있을 겁니다.

+ +

반면에, 그리드 버전에는 항상 세 개의 열 트랙이 있게 됩니다. 트랙 자체가 넓어지거나 줄어들 수 있지만, 그리드를 정의할 때 세 개를 지정했으면 무조건 세 개의 트랙이 있게 됩니다.

+ +

자동으로 채워지는 그리드 트랙

+ +

트랙의 목록을 생성할 때 반복 표기법과 auto-fill 및 auto-fit 프로퍼티를 사용하면 지정한 행과 열에 맞추면서도 플랙스박스와 유사한 효과를 내도록 콘텐츠를 정렬할 수도 있습니다.

+ +

다음 예제에서는 반복 표기법을 지정할 때 정수 대신 auto-fill 키워드를 사용하였고 기준 크기가 200픽셀이 되도록 트랙 목록을 설정했습니다. 즉, 그리드는 컨테이너에 200픽셀 너비의 세로 열 트랙을 채울 수 있을 만큼의 개수를 생성하게 됩니다.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, 200px);
+}
+
+ +

{{ EmbedLiveSample('자동으로_채워지는_그리드_트랙', '500', '170') }}

+ +

변동 가능한 트랙의 수

+ +

이것은 플랙스박스와 완전히 똑같지는 않습니다. 플랙스박스 예제에서는 아이템이 다음 줄로 행 바꿈 하기 전에는 기본값인 200픽셀보다 더 넓었습니다. 그리드에서는 auto-fill과 {{cssxref("minmax", "minmax()")}} 함수를 결합해서 비슷한 결과를 얻을 수 있습니다. 다음 예제에선 minmax를 써서 자동으로 채워지는 트랙을 만들었습니다. 트랙은 최소 200픽셀부터 시작해서 최대 1fr까지 늘어날 수 있도록 설정하였습니다. 브라우저는 우선 200픽셀 크기의 아이템을 (그리드 간격도 함께 고려해서) 컨테이너에 몇 개로 채울 수 있을지 계산을 하고 나서, 남아있는 공간을 최대치 1fr 기준으로 아이템들끼리 공유하면서 서로 늘어나도록 합니다.

+ + + +
<div class="wrapper">
+  <div>One</div>
+  <div>Two</div>
+  <div>Three</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+}
+
+ +

{{ EmbedLiveSample('변동_가능한_트랙의_수', '500', '170') }}

+ +

이렇게 해서, 크기와 개수가 변동적인 트랙들로 구성된 그리드를 만들 수 있게 되었으며, 동시에 아이템들을 일정한 행과 열로 정렬할 수도 있음을 확인하였습니다.

+ +

그리드와 단독으로 위치를 지정한 요소

+ +

그리드는 단독으로 위치 지정된 요소와 상호 작용하면서, 그리드 또는 그리드 영역 내에 아이템을 배치할 때 유용하게 사용될 수 있습니다. 표준 명세서에는 그리드 컨테이너가 요소를 감싸는 컨테이닝 블록(containing block)으로서, 그리드 컨테이너가 단독으로 위치를 지정한 아이템의 부모 요소일 때 동작하는 방식을 정의하고 있습니다.

+ +

컨테이닝 블록으로서의 그리드 컨테이너

+ +

그리드 컨테이너를 컨테이닝 블록으로 만들려면, 다른 단독으로 위치를 지정한 아이템을 감싸고 있는 요소를 컨테이닝 블록을 만들 때와 마찬가지로, 컨테이너에 position 프로퍼티로 relative 값을 추가해야 합니다. 이렇게 하면, 그리드 아이템에 position: absolute를 지정할 경우 그리드 컨테이너가 컨테이닝 블록이 되며, 또 해당 아이템에 그리드 위칫값이 추가로 지정되었을 때는, 배치된 그리드 영역이 컨테이닝 블록으로 작용합니다.

+ +

아래 예제에서는 네 개의 하위 아이템을 감싸는 wrapper 클래스의 블록이 있습니다. 3번 아이템은 단독으로 위치가 지정되었으며 라인을 기반으로 그리드에 배치되었습니다. 그리드 컨테이너에 position: relative를 지정해서 이 아이템이 위치를 잡을 때 참고하는 기준 요소가 됩니다.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">
+   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+  position: relative;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: absolute;
+  top: 40px;
+  left: 40px;
+}
+
+ +

{{ EmbedLiveSample('컨테이닝_블록으로서의_그리드_컨테이너', '500', '330') }}

+ +

여기서 아이템이 그리드의 세로 열 2번 라인부터 4번 라인까지, 그리고 가로 행 1번 라인을 시작으로 그리드 영역을 차지하고 있는 것을 확인하실 수 있습니다. 하지만, 단독으로 위치를 지정한 일반 아이템의 경우와 마찬가지로 문서 흐름에서 제외되면서, 자동 배치 규칙에 따라 해당 공간에 다른 아이템들을 배치하게 됩니다. 또한, 이로 인해 아이템이 추가 행을 생성하지 않게 되면서 가로 행 3번 라인까지 확장하지 않게 되었습니다.

+ +

만약에 .box3의 규칙 중에 position: absolute를 없애버리면, 위치를 지정하지 않았을 경우 표시될 원래의 자리로 돌아가는 것을 확인하실 수 있습니다.

+ +

부모 요소로서의 그리드 컨테이너

+ +

만약에 단독으로 위치를 지정한 자식 요소가 그리드 컨테이너에 속해 있지만, 해당 컨테이너가 위치를 참고하는 새로운 기준 요소로 정의되지 않았다면, 앞의 예제에서처럼 일반 배치 흐름에서 배제됩니다. 위치의 기준이 되는 요소는, 다른 레이아웃 방법에 공통으로 적용되는 것과 마찬가지로, 새로운 위치 기준 요소로 정의된 요소가 맡게 됩니다. 이번 경우에 만약 위에 있는 감싸는 요소에서 position: relative를 삭제한다면, 위치의 기준이 되는 것은 아래의 그림에서 보여주듯이 최상위 도큐먼트 오브젝트에 해당하는 기본 뷰포트(viewport)가 맡게 됩니다.

+ +

부모 요소로서의 그리드 컨테이너 모습을 담은 그림

+ +

여기도 마찬가지로 해당 아이템은, 다른 아이템들의 크기 조정과 자동 배치와 관련해서, 더는 그리드 레이아웃에 관여하지 않게 됩니다.

+ +

부모 요소가 그리드 영역일 때

+ +

만약에 단독으로 위치를 지정한 아이템이 그리드 영역 안에 자리 잡고 있다면, 해당 영역을 위치의 기준이 되는 요소로 정의할 수 있습니다. 아래 예제에서는 전과 같은 그리드가 정의되어 있습니다만, 이번엔 그리드의 .box3 안에 또 하나의 아이템을 중첩해 놓았습니다.

+ +

.box3의 position 값으로 relative를 지정했으며 그 밑에 있는 아이템에는 원래의 위치에서 벗어난 값을 따로 지정하였습니다. 이 경우 위치의 기준이 되는 요소는 그리드 영역이 됩니다.

+ + + +
<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three
+    <div class="abspos">
+     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
+    </div>
+  </div>
+  <div class="box4">Four</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(4,1fr);
+  grid-auto-rows: 200px;
+  grid-gap: 20px;
+}
+.box3 {
+  grid-column-start: 2;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 3;
+  position: relative;
+}
+.abspos {
+  position: absolute;
+  top: 40px;
+  left: 40px;
+  background-color: rgba(255,255,255,.5);
+  border: 1px solid rgba(0,0,0,0.5);
+  color: #000;
+  padding: 10px;
+}
+
+ +

{{ EmbedLiveSample('부모_요소가_그리드_영역일_때', '500', '420') }}

+ +

그리드와 display: contents

+ +

마지막으로 눈여겨볼 또 하나의 레이아웃 표준과 관련된 상호 작용으로 CSS 그리드 레이아웃과 display: contents 사이의 상호 작용이 있습니다. display 프로퍼티의contents 값은 Display 표준 명세서에 새로 정의된 것으로 다음과 같이 설명되어 있습니다:

+ +
+

“요소 자신은 어떠한 박스도 생성하지 않지만, 대신 포함하고 있는 하위 자식 요소와 가상 요소(pseudo-elements)가 평소처럼 박스를 생성하게 됩니다. 그래서 박스 생성과 레이아웃을 구현할 때, 문서의 계층 구조상 해당 요소가 아래 자식 요소와 가상 요소로 대체된 것처럼 다루어집니다.”

+
+ +

만약에 아이템에 display: contents를 지정하면 보통 해당 요소가 만드는 박스는 사라지고, 자식 요소의 박스가 한 단계 상승한 것처럼 그 자리를 차지하게 됩니다. 이 얘기는 그리드 아이템의 자식 요소가 그리드 아이템이 될 수도 있다는 뜻입니다. 이상하게 들리시죠? 다음에 간단한 예를 들어보겠습니다. 아래 마크업에는 그리드가 있고, 이 그리드에 있는 첫 번째 아이템이 세 개의 열 트랙 모두를 가로지르도록 설정하였습니다. 또한, 이 아이템은 세 개의 중첩된 아이템들을 포함하고 있습니다. 이 아이템들은 컨테이너 바로 밑에 있는 자식 요소가 아니므로, 그리드 레이아웃의 일원으로 참여하지 않으면서 보통의 일반 블록 레이아웃으로 표시됩니다.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+}
+
+
+ +

{{ EmbedLiveSample('Display_Contents_Before', '400', '420') }}

+
+ +

이제 .box1에 display: contents규칙을 추가하면, 해당 아이템이 차지하고 있는 박스가 사라지면서 하위 아이템들이 그리드 아이템 자격을 얻게 되어 자동 배치 규칙에 따라 알아서 배치됩니다.

+ +
+ + +
<div class="wrapper">
+  <div class="box box1">
+    <div class="nested">a</div>
+    <div class="nested">b</div>
+    <div class="nested">c</div>
+  </div>
+  <div class="box box2">Two</div>
+  <div class="box box3">Three</div>
+  <div class="box box4">Four</div>
+  <div class="box box5">Five</div>
+</div>
+
+ +
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: minmax(100px, auto);
+}
+.box1 {
+  grid-column-start: 1;
+  grid-column-end: 4;
+  display: contents;
+}
+
+ +

{{ EmbedLiveSample('Display_Contents_After', '400', '330') }}

+
+ +

이것은 중첩된 아이템을 그리드의 일부분인 것처럼 작용하게 하는 방법으로 사용될 수 있으며, 또한 서브 그리드가 구현된다면 해결될 수 있는 문제를 피해 가는 방법이 될 수도 있습니다. 물론, 플랙스박스에서도 비슷하게 display: contents를 이용해서 중첩된 아이템이 플랙스 아이템처럼 작용하도록 만들 수도 있습니다.

+ +

이번 가이드에서 보셨듯이 CSS 그리드 레이아웃은 단지 여러분이 구현해 볼 수 있는 여러 기술 중 한 부분일 뿐입니다. 원하시는 다양한 효과를 얻기 위해서 다른 레이아웃 기술끼리 서로 혼합해서 사용하는 것을 두려워하지 마십시오.

+ + diff --git a/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html new file mode 100644 index 0000000000..a2ace369cf --- /dev/null +++ b/files/ko/web/css/css_images/implementing_image_sprites_in_css/index.html @@ -0,0 +1,56 @@ +--- +title: CSS로 이미지 스프라이트 구현하기 +slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +tags: + - Advanced + - CSS + - CSS Image + - Graphics + - Guide + - Sprites + - Web + - 스프라이트 +translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS +--- +
{{CSSRef}}
+ +

이미지 스프라이트는 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용합니다. 이미지 각각을 별도의 파일로 추가하는 대신, 이미지를 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적입니다.

+ +
+

참고: HTTP/2를 사용할 땐 오히려 작은 요청을 여러 번 날리는 게 네트워크 사용량에 더 좋을 수도 있습니다.

+
+ +

구현

+ +

toolbtn 클래스가 부여된 모든 아이템에 어떤 이미지가 부여된다고 가정해 봅시다.

+ +
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}
+ +

배경 이미지의 위치는 속성에 지정된 {{cssxref("url()")}} 값 다음에 x, y 2개 값으로 지정할 수도 있고, {{cssxref("background-position")}} 속성으로 지정할 수 있습니다.

+ +
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}
+ +

이 CSS 는 ID 가 'btn1' 인 엘리먼트를 왼쪽으로 20 pixel 이동시키고 ID 가 'btn2' 인 엘리먼트를 왼쪽으로 40 pixel 이동시킬 것입니다 (앞서 보인 이미지 룰에 의해 두 엘리먼트에 toolbtn 클래스가 부여됐다고 가정합시다).

+ +

비슷하게, 마우스 호버 상태를 만들 수도 있습니다.

+ +
#btn:hover {
+  background-position: <pixels shifted right>px <pixels shifted down>px;
+}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/css_images/index.html b/files/ko/web/css/css_images/index.html new file mode 100644 index 0000000000..99c37da296 --- /dev/null +++ b/files/ko/web/css/css_images/index.html @@ -0,0 +1,107 @@ +--- +title: CSS Images +slug: Web/CSS/CSS_Images +tags: + - CSS + - CSS Images + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Images +--- +
{{CSSRef}}
+ +

CSS Images는 사용할 수 있는 이미지의 유형({{cssxref("<image>")}} 자료형, 포함하는 URL, 그레이디언트 및 그 외의 다른 유형 이미지), 이미지의 크기 조정 방법, 그리고 이미지 및 다른 대체 콘텐츠가 각기 다른 레이아웃 모델과 상호작용하는 법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{CSSxRef("image-orientation")}}
    • +
  • {{CSSxRef("image-rendering")}}
    • +
  • {{CSSxRef("image-resolution")}}
    • +
  • {{CSSxRef("object-fit")}}
    • +
  • {{CSSxRef("object-position")}}
    • +
+
+ +

함수

+ +
+
    +
  • {{CSSxRef("linear-gradient", "linear-gradient()")}}
    • +
  • {{CSSxRef("radial-gradient", "radial-gradient()")}}
    • +
  • {{CSSxRef("repeating-linear-gradient", "repeating-linear-gradient()")}}
    • +
  • {{CSSxRef("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
  • {{CSSxRef("conic-gradient")}}
    • +
  • {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}
    • +
  • {{CSSxRef("url", "url()")}}
    • +
  • {{CSSxRef("element", "element()")}}
    • +
  • {{CSSxRef("_image", "image()")}}
    • +
  • {{CSSxRef("cross-fade", "cross-fade()")}}
    • +
+
+ +

자료형

+ +
+
    +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<uri>")}}
    • +
+
+ +

안내서

+ +
+
CSS 그레이디언트 사용하기
+
CSS 이미지의 특정 유형인 "그레이디언트"를 소개하고, 그 사용법을 보입니다.
+
CSS에서 이미지 스프라이트 구현하기
+
다수의 이미지를 하나의 문서로 합쳐서 다운로드 요청을 절약하고 페이지 속도를 향상하는 방법을 소개합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}}
{{SpecName('Compat', '#css-%3Cimage%3E-type', 'CSS Gradients')}}{{Spec2('Compat')}}-webkit 접두어 달린 그러데이션 값 함수 표준화
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}}
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}초기 정의
diff --git a/files/ko/web/css/css_images/using_css_gradients/index.html b/files/ko/web/css/css_images/using_css_gradients/index.html new file mode 100644 index 0000000000..061ef36536 --- /dev/null +++ b/files/ko/web/css/css_images/using_css_gradients/index.html @@ -0,0 +1,750 @@ +--- +title: CSS 그레이디언트 사용하기 +slug: Web/CSS/CSS_Images/Using_CSS_gradients +tags: + - Advanced + - CSS + - CSS Images + - Example + - Gradients + - Guide + - Web +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +
{{CSSRef}}
+ +

CSS 그레이디언트는 {{cssxref("<image>")}} 자료형의 특별한 종류인 {{cssxref("<gradient>")}}로 나타내며 두 개 이상의 색 간의 점진적 전환을 표현합니다. 그레이디언트에는 선형({{cssxref("linear-gradient")}} 함수), 방사형({{cssxref("radial-gradient")}} 함수), 각진 원형({{cssxref("conic-gradient")}} 함수) 세 종류가 있으며, 각각의 변형본으로 계속해서 반복하는 {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}} 함수도 있습니다.

+ +

그레이디언트는 배경처럼 <image>를 사용하는 곳에는 어디에나 적용할 수 있습니다. 그레이디언트는 동적으로 생성하므로, 비슷한 효과를 보기 위해 래스터 이미지를 사용하는 방식을 사용하지 않아도 됩니다. 또한 브라우저가 직접 생성하므로 확대했을 때 래스터 이미지보다 좋은 품질을 보이며 크기 조절도 즉시 가능합니다.

+ +

우선 선형 그레이디언트의 소개로 시작하여, 모든 유형의 그레이디언트에서 통용되는 기능을 선형으로 설명하고, 그 후에 방사형과 각진 원형, 마지막으로 반복 그레이디언트에 대해 알아보겠습니다.

+ +

선형 그레이디언트 사용하기

+ +

선형 그레이디언트는 직선으로 진행하는 색상 무늬를 생성합니다.

+ +
+

기본 선형 그레이디언트

+ +

가장 기본적인 그레이디언트 종류를 생성하기 위해서는 두 가지의 색만 지정하면 됩니다. 각각의 색을 "색상 정지점"이라고 부릅니다. 최소 두 가지가 필요하지만, 제한 없이 원하는 만큼 추가할 수 있습니다.

+ + + +
.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('기본_선형_그레이디언트', 120, 120) }}

+
+ +
+

방향 전환

+ +

기본적으로, 선형 그레이디언트는 위에서 아래로 진행합니다. 그러나 방향을 지정함으로써 그레이디언트를 회전할 수 있습니다.

+ + + +
.horizontal-gradient {
+  background: linear-gradient(to right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('방향_전환', 120, 120) }}

+
+ +
+

대각선 그레이디언트

+ +

그레이디언트가 한쪽 모서리에서 다른 쪽 모서리를 잇는 대각선 방향으로 진행하도록 할 수도 있습니다.

+ + + +
.diagonal-gradient {
+  background: linear-gradient(to bottom right, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('대각선_그레이디언트', 200, 100) }}

+
+ +
+

각도 사용

+ +

더 정밀하게 방향을 지정하고 싶다면 특정 각도를 지정할 수 있습니다.

+ + + +
.angled-gradient {
+  background: linear-gradient(70deg, blue, pink);
+}
+
+ +

{{ EmbedLiveSample('각도_사용', 120, 120) }}

+ +

각도를 사용할 때 0deg 는 아래쪽에서 위쪽으로 진행하는 선형 그레이디언트를, 90deg 는 왼쪽에서 오른쪽으로, 등등 시계 방향으로 회전합니다. 음의 각도는 시계 반대 방향으로 회전합니다.

+ +

linear_redangles.png

+
+ +

색상 선언 & 효과 생성

+ +

All CSS gradient types are a range of position-dependent colors. The colors produced by CSS gradients can vary continuously with position, producing smooth color transitions. It is also possible to create bands of solid colors, and hard transitions between two colors. The following are valid for all gradient functions:

+ +
+

두 개보다 많은 색 사용하기

+ +

You don't have to limit yourself to two colors—you may use as many as you like! By default, colors are evenly spaced along the gradient.

+ + + +
.auto-spaced-linear-gradient {
+  background: linear-gradient(red, yellow, blue, orange);
+}
+
+ +

{{ EmbedLiveSample('두_개보다_많은_색_사용하기', 120, 120) }}

+
+ +
+

Positioning color stops

+ +

You don't have to leave your color stops at their default positions. To fine-tune their locations, you can give each one zero, one, or two percentage or, for radial and linear gradients, absolute length values. If you specify the location as a percentage, 0% represents the starting point, while 100% represents the ending point; however, you can use values outside that range if necessary to get the effect you want. If you leave a location unspecified, the position of that particular color stop will be automatically calculated for you, with the first color stop being at 0% and the last color stop being at 100%, and any other color stops being half way between their adjacent color stops.

+ + + +
.multicolor-linear {
+   background: linear-gradient(to left, lime 28px, red 77%, cyan);
+}
+
+ +

{{ EmbedLiveSample('Positioning_color_stops', 120, 120) }}

+
+ +
+

Creating hard lines

+ +

To create a hard line between two colors, creating a stripe instead of a gradual transition, adjacent color stops can be set to the same location. In this example, the colors share a color stop at the 50% mark, halfway through the gradient:

+ + + +
.striped {
+   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
+}
+ +

{{ EmbedLiveSample('Creating_hard_lines', 120, 120) }}

+
+ +
+

Gradient hints

+ +

By default, the gradient transitions evenly from one color to the next. You can include a color-hint to move the midpoint of the transition value to a certain point along the gradient. In this example, we've moved the midpoint of the transition from the 50% mark to the 10% mark.

+ + + +
.color-hint {
+  background: linear-gradient(blue, 10%, pink);
+}
+.simple-linear {
+  background: linear-gradient(blue, pink);
+}
+ +

{{ EmbedLiveSample('Gradient_hints', 120, 120) }}

+
+ +
+

Creating color bands & stripes

+ +

To include a solid, non-transitioning color area within a gradient, include two positions for the color stop. Color stops can have two positions, which is equivalent to two consecutive color stops with the same color at different positions. The color will reach full saturation at the first color stop, maintain that saturation through to the second color stop, and transition to the adjacent color stop's color through the adjacent color stop's first position.

+ + + +
.multiposition-stops {
+   background: linear-gradient(to left,
+       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
+   background: linear-gradient(to left,
+       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
+}
+.multiposition-stop2 {
+   background: linear-gradient(to left,
+      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
+   background: linear-gradient(to left,
+      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
+}
+
+ +

{{ EmbedLiveSample('Creating_color_bands_stripes', 120, 120) }}

+ +

In the first example above, the lime goes from the 0% mark, which is implied, to the 20% mark, transitions from lime to red over the next 10% of the width of the gradient, reach solid red at the 30% mark, and staying solid red up until 45% through the gradient, where it fades to cyan, being fully cyan for 15% of the gradient, and so on.

+ +

In the second example, the second color stop for each color is at the same location as the first color stop for the adjacent color, creating a striped effect.

+ +

In both examples, the gradient is written twice: the first is the CSS Images Level 3 method of repeating the color for each stop and the second example is the CSS Images Level 4 multiple color stop method of including two color-stop-lengths in a linear-color-stop declaration.

+
+ +
+

Controlling the progression of a gradient

+ +

By default, a gradient evenly progresses between the colors of two adjacent color stops, with the midpoint between those two color stops being the midpoint color value. You can control the interpolation, or progression, between two color stops by including a color hint location. In this example, the color reaches the midpoint between lime and cyan 20% of the way through the gradient rather than 50% of the way through. The second example does not contain the hint to hilight the difference the color hint can make:

+ + + +
.colorhint-gradient {
+  background: linear-gradient(to top, black, 20%, cyan);
+}
+.regular-progression {
+  background: linear-gradient(to top, black, cyan);
+}
+
+ +

{{ EmbedLiveSample('Controlling_the_progression_of_a_gradient', 120, 120) }}

+
+ +

Overlaying gradients

+ +

Gradients support transparency, so you can stack multiple backgrounds to achieve some pretty fancy effects. The backgrounds are stacked from top to bottom, with the first specified being on top.

+ + + +
.layered-image {
+  background: linear-gradient(to right, transparent, mistyrose),
+      url("https://mdn.mozillademos.org/files/15525/critters.png");
+}
+
+ +

{{ EmbedLiveSample('Overlaying_gradients', 300, 150) }}

+ +

Stacked gradients

+ +

You can even stack gradients with other gradients. As long as the top gradients aren't entirely opaque, the gradients below will still be visible.

+ + + +
.stacked-linear {
+  background:
+      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
+      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
+      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
+}
+
+ +

{{ EmbedLiveSample('Stacked_gradients', 200, 200) }}

+ +

Using radial gradients

+ +

Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.

+ +

A basic radial gradient

+ +

As with linear gradients, all you need to create a radial gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, and the gradient is elliptical matching the aspect ratio of it's box:

+ + + +
.simple-radial {
+  background: radial-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('A_basic_radial_gradient', 120, 120) }}

+ +

Positioning radial color stops

+ +

Again like linear gradients, you can position each radial color stop with a percentage or absolute length.

+ + + +
.radial-gradient {
+  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_radial_color_stops', 120, 120) }}

+ +

Positioning the center of the gradient

+ +

You can position the center of the gradient with keyterms, percentage, or absolute lengths, length and percentage values repeating if only one is present, otherwise in the order of position from the left and position from the top.

+ + + +
.radial-gradient {
+  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_the_center_of_the_gradient', 120, 120) }}

+ +

Sizing radial gradients

+ +

Unlike linear gradients, you can specify the size of radial gradients. Possible values include closest-corner, closest-side, farthest-corner, and farthest-side, with farthest-corner being the default.

+ +

Example: closest-side for ellipses

+ +

This example uses the closest-side size value, which means the size is set by the distance from the starting point (the center) to the closest side of the enclosing box.

+ + + +
.radial-ellipse-side {
+  background: radial-gradient(ellipse closest-side,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_closest-side_for_ellipses', 240, 100) }}

+ +

Example: farthest-corner for ellipses

+ +

This example is similar to the previous one, except that its size is specified as farthest-corner, which sets the size of the gradient by the distance from the starting point to the farthest corner of the enclosing box from the starting point.

+ + + +
.radial-ellipse-far {
+  background: radial-gradient(ellipse farthest-corner at 90% 90%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_farthest-corner_for_ellipses', 240, 100) }}

+ +

Example: closest-side for circles

+ +

This example uses closest-side, which makes the circle's size to be the distance between the starting point (the center) and the closest side. The circle's radius is the distance between the center of the gradient and the closest edge, which due to the positioning of the 25% from the top and 25% from the bottom, is closest to the bottom, since the height in this case is narrower than the width.

+ + + +
.radial-circle-close {
+  background: radial-gradient(circle closest-side at 25% 75%,
+      red, yellow 10%, #1e90ff 50%, beige);
+}
+
+ +

{{ EmbedLiveSample('Example_closest-side_for_circles', 240, 120) }}

+ +

Stacked radial gradients

+ +

Just like linear gradients, you can also stack radial gradients. The first specified is on top, the last on the bottom.

+ + + +
.stacked-radial {
+  background:
+      radial-gradient(circle at 50% 0,
+        rgba(255,0,0,.5),
+        rgba(255,0,0,0) 70.71%),
+      radial-gradient(circle at 6.7% 75%,
+        rgba(0,0,255,.5),
+        rgba(0,0,255,0) 70.71%),
+      radial-gradient(circle at 93.3% 75%,
+        rgba(0,255,0,.5),
+        rgba(0,255,0,0) 70.71%) beige;
+  border-radius: 50%;
+}
+
+ +

{{ EmbedLiveSample('Stacked_radial_gradients', 200, 200) }}

+ +

Using conic gradients

+ +

The conic-gradient() CSS function creates an image consisting of a gradient with color transitions rotated around a center point (rather than radiating from the center). Example conic gradients include pie charts and color wheels, but they can also be used for creating checker boards and other intersting effects.

+ +

The conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid.

+ +

In a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. With conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. Similar to radial gradients, you can position the center of the gradient. Similar to linear gradients, you can change the gradient angle.

+ +
+

A basic conic gradient

+ +

As with linear and radial gradients, all you need to create a conic gradient are two colors. By default, the center of the gradient is at the 50% 50% mark, with the start of the gradient facing up:

+ + + +
.simple-conic {
+  background: conic-gradient(red, blue);
+}
+
+ +

{{ EmbedLiveSample('A_basic_conic_gradient', 120, 120) }}

+
+ +
+

Positioning the conic center

+ +

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

+ + + +
.conic-gradient {
+  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
+}
+
+ +

{{ EmbedLiveSample('Positioning_the_conic_center', 120, 120) }}

+
+ +
+

Changing the angle

+ +

Like radial gradients, you can position the center of the conic gradient with keyterms, percentage, or absolute lengths, with the keyword "at"

+ + + +
.conic-gradient {
+  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
+}
+
+ +

{{ EmbedLiveSample('Changing_the_angle', 120, 120) }}

+
+ +

Using repeating gradients

+ +

The {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, and {{cssxref("conic-gradient")}} functions don't support automatically repeated color stops. However, the {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, and {{cssxref("repeating-conic-gradient")}} functions are available to offer this functionality.

+ +

The size of the gradient line or arc that repeats is the length between the first color stop value and the last color stop length value. If the first color stop just has a color and no color stop length, the value defaults to 0. If the last color stop has just a color and no color stop length, the value defaults to 100%. If neither is declared, the gradient line is 100% meaning the linear and conic gradients will not repeat and the radial gradient will only repeat if the radius of the gradient is smaller than the length between the center of the gradient and the farthest corner. If the first color stop is declared, and the value is greater than 0, the gradient will repeat, as the size of the line or arc is the difference between the first color stop and last color stop is less than 100% or 360 degrees.

+ +
+

Repeating linear gradients

+ +

This example uses {{cssxref("repeating-linear-gradient")}} to create a gradient that progresses repeatedly in a straight line. The colors get cycled over again as the gradient repeats. In this case the gradient line is 10px long.

+ + + +
.repeating-linear {
+  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
+}
+
+ +

{{ EmbedLiveSample('Repeating_linear_gradients', 120, 120) }}

+
+ +
+

Multiple repeating linear gradients

+ +

Similar to regular linear and radial gradients, you can include multiple gradients, one on top of the other. This only makes sense if the gradients are partially transparent allowing subsequent gradients to show through the transparent areas, or if you include different background-sizes, optionally with different background-position property values, for each gradient image. We are using transparency.

+ +

In this case the gradient lines are 300px, 230px, and 300px long.

+ + + +
.multi-repeating-linear {
+  background:
+      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0.5) 40px,
+        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
+        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
+        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
+        rgba(255, 0, 0, 0.5) 300px),
+      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
+        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
+        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
+        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
+        rgba(255, 0, 0, 0.5) 230px),
+      repeating-linear-gradient(23deg, red 50px, orange 100px,
+        yellow 150px, green 200px, blue 250px,
+        indigo 300px, violet 350px, red 370px);
+}
+
+ +

{{ EmbedLiveSample('Multiple_repeating_linear_gradients', 600, 400) }}

+
+ +

Plaid gradient

+ +

To create plaid we include several overlapping gradients with transparency. In the first background declaration we listed every color stop separately. The second background property declaration using the multiple position color stop syntax:

+ + + +
.plaid-gradient {
+  background:
+      repeating-linear-gradient(90deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(0deg, transparent, transparent 50px,
+        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
+        transparent 56px, transparent 63px,
+        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
+        transparent 69px, transparent 116px,
+        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
+      repeating-linear-gradient(-45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
+      repeating-linear-gradient(45deg, transparent, transparent 5px,
+        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px);
+
+  background:
+      repeating-linear-gradient(90deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(0deg, transparent 0 50px,
+        rgba(255, 127, 0, 0.25) 50px 56px,
+        transparent 56px 63px,
+        rgba(255, 127, 0, 0.25) 63px 69px,
+        transparent 69px 116px,
+        rgba(255, 206, 0, 0.25) 116px 166px),
+      repeating-linear-gradient(-45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px),
+      repeating-linear-gradient(45deg, transparent 0 5px,
+        rgba(143, 77, 63, 0.25) 5px 10px);
+}
+
+ +

{{ EmbedLiveSample('Plaid_gradient', 200, 200) }}

+ +

Repeating radial gradients

+ +

This example uses {{cssxref("repeating-radial-gradient")}} to create a gradient that radiates repeatedly from a central point. The colors get cycled over and over as the gradient repeats.

+ + + +
.repeating-radial {
+  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
+}
+
+ +

{{ EmbedLiveSample('Repeating_radial_gradients', 120, 120) }}

+ +

Multiple repeating radial gradients

+ + + +
.multi-target {
+  background:
+      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
+        rgba(255,255,255,0.5) 30px) top left no-repeat,
+      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
+        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
+        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
+  background-size: 200px 200px, 150px 150px;
+}
+
+ +

{{ EmbedLiveSample('Multiple_repeating_radial_gradients', 250, 150) }}

+ +

같이 보기

+ +
    +
  • Gradient functions: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("conic-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("repeating-conic-gradient")}}
    • +
  • Gradient-related CSS data types: {{cssxref("<gradient>")}}, {{cssxref("<image>")}}
    • +
  • Gradient-related CSS properties: {{cssxref("background")}}, {{cssxref("background-image")}}
    • +
  • CSS Gradients Patterns Gallery, by Lea Verou
    • +
  • CSS3 Gradients Library, by Estelle Weyl
    • +
  • Gradient CSS Generator
    • +
diff --git a/files/ko/web/css/css_lists_and_counters/index.html b/files/ko/web/css/css_lists_and_counters/index.html new file mode 100644 index 0000000000..7d3ecd8e4f --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Lists and Counters +slug: Web/CSS/CSS_Lists_and_Counters +tags: + - CSS + - CSS Lists + - Overview + - Reference +translation_of: Web/CSS/CSS_Lists_and_Counters +--- +
{{CSSRef}}
+ +

CSS Lists는 리스트 배치 방법, 리스트 마커를 스타일 할 수 있는 법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("list-style-image")}}
    • +
  • {{cssxref("list-style-type")}}
    • +
  • {{cssxref("list-style-position")}}
    • +
  • {{cssxref("list-style")}}
    • +
+
+ +

안내서

+ +
+
일관된 리스트 들여쓰기
+
서로 다른 브라우저 사이에 일관된 들여쓰기를 이루는 법을 설명합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}} 
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}초기 정의
diff --git a/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html new file mode 100644 index 0000000000..4557bc725c --- /dev/null +++ b/files/ko/web/css/css_lists_and_counters/using_css_counters/index.html @@ -0,0 +1,148 @@ +--- +title: CSS 카운터 사용하기 +slug: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +tags: + - CSS + - CSS Counter Styles + - Guide + - Layout + - Reference + - Web + - 번호 + - 카운터 +translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +--- +
{{CSSRef}}
+ +

CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.

+ +

Counters 사용하기

+ +

카운터 값 조작하기

+ +

CSS counter를 사용하려면 먼저 {{cssxref("counter-reset")}} 속성(초깃값  0)을 사용하여 초기화 해야합니다. 동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다. 초기화 된 counter의 값은 {{cssxref("counter-increment")}}에 따라 증가하거나 감소합니다. counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

+ +

카운터 표시하기

+ +

Counter의 값은 {{cssxref("content")}} 속성에서 {{cssxref("counter()")}}나 {{cssxref("counters()")}} 함수를 사용하여 표시할 수 있습니다.

+ +

counter() 함수는 'counter(name)'와 'counter(name, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수decimal)으로 뿌려집니다.

+ +

counters() 함수도 'counters(name, string)'나 'counters(name, string, style)' 두 가지 형태로 사용할 수 있습니다. 생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다. counters는 지정된 스타일(기본값은 십진수decimal)로 렌더링 됩니다.

+ +

기본 예제

+ +

여기서는 제목 앞에 숫자를 붙여봅니다.

+ +

CSS

+ +
body {
+  counter-reset: section;                     /* counter 이름을 'section'으로 지정합니다.
+                                                 초깃값은 0입니다. */
+}
+
+h3::before {
+  counter-increment: section;                 /* section의 카운터 값을 1씩 증가시킵니다. */
+  content: counter(section);                  /* section의 카운터 값을 표시합니다. */
+}
+
+ +

HTML

+ +
<h3>Introduction</h3>
+<h3>Body</h3>
+<h3>Conclusion</h3>
+ +

결과

+ +

{{EmbedLiveSample("Basic_example", "100%", 150)}}

+ +

중첩 카운터

+ +

CSS 카운터는 자식 요소 안에서 새 인스턴스를 자동으로 만들어주어 목차를 만드는데 유용합니다. {{cssxref("counters()")}} 함수를 사용해 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정할 수 있습니다.

+ +

중첩 카운터 예제

+ +

CSS

+ +
ol {
+  counter-reset: section;                /* ol 요소마다
+                                            이름이 section인
+                                            새 인스턴스를 생성합니다. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* 해당 인스턴스 안에서
+                                            section 카운터 값 증가 */
+  content: counters(section, ".") " ";   /* section 카운터 값을
+                                            마침표(.)로 구분해 결합하여
+                                            표시합니다. */
+}
+
+ +

HTML

+ +
<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item               <!-- 2     -->
+    <ol>
+      <li>item</li>      <!-- 2.1   -->
+      <li>item</li>      <!-- 2.2   -->
+      <li>item           <!-- 2.3   -->
+        <ol>
+          <li>item</li>  <!-- 2.3.1 -->
+          <li>item</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>item</li>  <!-- 2.4.1 -->
+          <li>item</li>  <!-- 2.4.2 -->
+          <li>item</li>  <!-- 2.4.3 -->
+        </ol>
+      </li>
+      <li>item</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>item</li>          <!-- 3     -->
+  <li>item</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>item</li>          <!-- 1     -->
+  <li>item</li>          <!-- 2     -->
+</ol>
+ +

결과

+ +

{{EmbedLiveSample("Example_of_a_nested_counter", "100%", 350)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Lists", "#auto-numbering", "CSS Counters")}}{{Spec2("CSS3 Lists")}}No change
{{SpecName("CSS2.1", "generate.html#counters", "CSS Counters")}}{{Spec2("CSS2.1")}}Initial definition
+ +

See also

+ +
    +
  • {{cssxref("counter-reset")}}
    • +
  • {{cssxref("counter-increment")}}
    • +
  • {{cssxref("@counter-style")}}
    • +
diff --git a/files/ko/web/css/css_logical_properties/index.html b/files/ko/web/css/css_logical_properties/index.html new file mode 100644 index 0000000000..e46148c67f --- /dev/null +++ b/files/ko/web/css/css_logical_properties/index.html @@ -0,0 +1,136 @@ +--- +title: CSS Logical Properties and Values +slug: Web/CSS/CSS_Logical_Properties +tags: + - CSS + - CSS Logical Properties + - Overview + - Reference +translation_of: Web/CSS/CSS_Logical_Properties +--- +
{{CSSRef}}
+ +

CSS Logical Properties and Values는 레이아웃을 제어하는 물리 속성에 논리 맵핑을 정의하는 CSS 모듈입니다.

+ +

블록과 인라인

+ +

Logical properties and values use the abstract terms block and inline to describe the direction in which they flow. The physical meaning of these terms depends on the writing mode.

+ +
+
블록 치수
+
The dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. For standard English text, it is the vertical dimension.
+
인라인 치수
+
The dimension parallel to the flow of text within a line, i.e., the horizontal dimension in horizontal writing modes, and the vertical dimension in vertical writing modes. For standard English text, it is the horizontal dimension.
+
+ +

참고서

+ +

크기 속성

+ +
+
    +
  • {{CSSxRef("block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("max-inline-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
    • +
+
+ +

안팎 여백, 테두리 속성

+ +
+
    +
  • {{CSSxRef("border-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-color")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("border-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-end-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-color")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-start-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-style")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-inline-width")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("border-style")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("border-width")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("margin")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("margin-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding")}} (logical {{Experimental_Inline}} keyword)
    • +
  • {{CSSxRef("padding-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

플로트와 위치 속성

+ +
+
    +
  • {{CSSxRef("clear")}} (inline-end {{Experimental_Inline}} and inline-start {{Experimental_Inline}} keywords)
    • +
  • {{CSSxRef("float")}} (inline-end {{Experimental_Inline}} and inline-start {{Experimental_Inline}} keywords)
    • +
  • {{CSSxRef("inset")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-block-start")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
    • +
+
+ +

기타 속성

+ +
+
    +
  • {{CSSxRef("caption-side")}} (inline-end {{Experimental_Inline}} and inline-start {{Experimental_Inline}} keywords)
    • +
  • {{CSSxRef("resize")}} {{Experimental_Inline}} (block {{Experimental_Inline}} and inline {{Experimental_Inline}} keywords)
    • +
  • {{CSSxRef("text-align")}} (end {{Experimental_Inline}} and start {{Experimental_Inline}} keywords)
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}초기 정의
diff --git a/files/ko/web/css/css_masks/index.html b/files/ko/web/css/css_masks/index.html new file mode 100644 index 0000000000..5a48e0af6e --- /dev/null +++ b/files/ko/web/css/css_masks/index.html @@ -0,0 +1,68 @@ +--- +title: CSS Masking +slug: Web/CSS/CSS_Masks +tags: + - CSS + - CSS Masking + - Overview + - Reference +translation_of: Web/CSS/CSS_Masking +--- +
{{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_miscellaneous/index.html b/files/ko/web/css/css_miscellaneous/index.html new file mode 100644 index 0000000000..fbd9a1fbc9 --- /dev/null +++ b/files/ko/web/css/css_miscellaneous/index.html @@ -0,0 +1,43 @@ +--- +title: CSS Miscellaneous +slug: Web/CSS/CSS_Miscellaneous +tags: + - CSS + - Overview + - Reference +translation_of: Web/CSS/CSS_Miscellaneous +--- +
{{CSSRef}}
+ +

이 페이지는 한참 실험 중이거나 다른 어떤 부류와도 맞지 않은 CSS 속성을 포함합니다.

+ +

참고

+ +

속성

+ +
+
    +
  • {{cssxref("all")}}
    • +
  • {{cssxref("clip")}}
    • +
  • {{cssxref("clip-path")}}
    • +
  • {{cssxref("display")}}
    • +
  • {{cssxref("ime-mode")}}
    • +
  • {{cssxref("initial-letter")}}
    • +
  • {{cssxref("initial-letter-align")}}
    • +
  • {{cssxref("mask-type")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
  • {{cssxref("will-change")}}
    • +
+
+ +

안내서

+ +

없음.

+ +

스펙

+ +

이 속성은 서로 거의 관련이 없습니다. 스펙은 개별 페이지를 참조하세요.

+ +

브라우저 호환성

+ +

이 속성은 서로 거의 관련이 없습니다. 브라우저 내 가용성은 개별 페이지를 참조하세요.

diff --git a/files/ko/web/css/css_namespaces/index.html b/files/ko/web/css/css_namespaces/index.html new file mode 100644 index 0000000000..d3082bdb8b --- /dev/null +++ b/files/ko/web/css/css_namespaces/index.html @@ -0,0 +1,42 @@ +--- +title: CSS Namespaces +slug: Web/CSS/CSS_Namespaces +tags: + - CSS + - CSS Namespaces + - Overview + - Reference +translation_of: Web/CSS/CSS_Namespaces +--- +
{{CSSRef}}
+ +

CSS Namespaces는 CSS에서 XML 네임스페이스를 지정할 수 있는 CSS 모듈입니다.

+ +

참고서

+ +

@규칙

+ +
+
    +
  • {{cssxref("@namespace")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}초기 정의
diff --git a/files/ko/web/css/css_pages/index.html b/files/ko/web/css/css_pages/index.html new file mode 100644 index 0000000000..72f7f39dd3 --- /dev/null +++ b/files/ko/web/css/css_pages/index.html @@ -0,0 +1,73 @@ +--- +title: CSS Paged Media +slug: Web/CSS/CSS_Pages +tags: + - CSS + - CSS Paged Media + - CSS Reference + - Overview +translation_of: Web/CSS/CSS_Pages +--- +
{{CSSRef}}
+ +

CSS Paged Media는 페이지 전환을 처리하는 방법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

CSS 속성

+ +
+
    +
  • {{cssxref("page-break-after")}}
    • +
  • {{cssxref("page-break-before")}}
    • +
  • {{cssxref("page-break-inside")}}
    • +
+
+ +

@규칙

+ +
+
    +
  • {{cssxref('@page')}}
    • +
+
+ +

의사 클래스

+ +
+
    +
  • {{cssxref(':blank')}}
    • +
  • {{cssxref(':first')}}
    • +
  • {{cssxref(':left')}}
    • +
  • {{cssxref(':right')}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Paged Media')}}{{Spec2('CSS3 Paged Media')}} 
{{SpecName('CSS3 Fragmentation')}}{{Spec2('CSS3 Fragmentation')}} 
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}} 
diff --git a/files/ko/web/css/css_positioning/index.html b/files/ko/web/css/css_positioning/index.html new file mode 100644 index 0000000000..bd2a5f4f33 --- /dev/null +++ b/files/ko/web/css/css_positioning/index.html @@ -0,0 +1,61 @@ +--- +title: CSS Positioning +slug: Web/CSS/CSS_Positioning +tags: + - CSS + - CSS Positioning + - Overview + - Reference +translation_of: Web/CSS/CSS_Positioning +--- +
{{CSSRef}}
+ +

CSS Positioning은 요소를 페이지에 배치하는 방법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

CSS 속성

+ +
+
    +
  • {{cssxref("bottom")}}
    • +
  • {{cssxref("clear")}}
    • +
  • {{cssxref("float")}}
    • +
  • {{cssxref("left")}}
    • +
  • {{cssxref("position")}}
    • +
  • {{cssxref("right")}}
    • +
  • {{cssxref("top")}}
    • +
  • {{cssxref("z-index")}}
    • +
+
+ +

안내서

+ +
+
CSS z-index 이해하기
+
쌓임 문맥의 개념을 소개하고 몇 가지 예와 함께 z축 순서의 동작을 설명합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
스펙상태설명
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }} 
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }} 
diff --git a/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html new file mode 100644 index 0000000000..9621937b5f --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -0,0 +1,157 @@ +--- +title: z-index 적용 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +--- +

« CSS « CSS z-index 이해하기

+

{{ cssxref("z-index") }} 적용

+

처음 예제에서(z-index가 없는 경우의 쌓임) 엘리먼트들이 기본적으로 어떻게 쌓이는지 설명했다. 만약 다른 쌓임 순서를 적용하고 싶다면 먼저 엘리먼트에 {{ cssxref("position") }} 속성을 지정하고 {{ cssxref("z-index") }} 속성을 지정해야한다. 

+

z-index 속성은 하나의 정수 값을 가질 수 있다(양수, 음수 모두 가능하다). 이 값은 해당 엘리먼트의 z축 상의 위치를 나타낸다. 만약 당신이 z축에 익숙하지 않다면 여러 레이어가 쌓여있는 페이지를 상상해보라. 각 레이어는 번호가 붙어있고 높은 번호를 가진 레이어는 낮은 번호를 가진 레이어 위에 렌더링된다. 

+

다시한번 경고! z-index는 position 속성이 설정된 엘리먼트에 대해서만 의미를 갖는다.

+
    +
  • 가장 아래(사용자로부터 가장 멀다)
    • +
  • ...
    • +
  • Layer -3
    • +
  • Layer -2
    • +
  • Layer -1
    • +
  • Layer 0 기본 렌더링 레이어
    • +
  • Layer 1
    • +
  • Layer 2
    • +
  • Layer 3
    • +
  • ...
    • +
  • 가장 위(사용자로부터 가장 가깝다)
    • +
+
+

노트:

+
    +
  • z-index 속성을 지정하지 않으면 엘리먼트는 기본 렌더링 레이어(레이어 0)에 렌더링된다. 
    • +
  • 만약 몇개의 엘리먼트들이 같은 z-index 속성 값을 가지면 (엘리먼트들이 같은 레이어에 위치한다) z-index가 없는 경우의 쌓임 쌓임 규칙을 적용한다.
    • +
+
+

다음 예제에서는 레이어들의 쌓임 순서가 z-index를 이용하여 바뀌어있다. DIV#5는 position 속성이 지정되지 않았으므로 z-index 속성 값은 쌓임 순서를 결정하는데에 아무 영향을 미치지 않는다. 

+

Example of stacking rules modified using z-index

+

Example source code

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div {
+   opacity: 0.7;
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#normdiv {
+   z-index: 8;
+   height: 70px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv1 {
+   z-index: 3;
+   height: 100px;
+   position: relative;
+   top: 30px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv2 {
+   z-index: 2;
+   height: 100px;
+   position: relative;
+   top: 15px;
+   left: 20px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#absdiv1 {
+   z-index: 5;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   left: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#absdiv2 {
+   z-index: 1;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   right: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+</style></head>
+
+<body>
+
+<br /><br />
+
+<div id="absdiv1">
+   <br /><span class="bold">DIV #1</span>
+   <br />position: absolute;
+   <br />z-index: 5;
+</div>
+
+<div id="reldiv1">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: relative;
+   <br />z-index: 3;
+</div>
+
+<div id="reldiv2">
+   <br /><span class="bold">DIV #3</span>
+   <br />position: relative;
+   <br />z-index: 2;
+</div>
+
+<div id="absdiv2">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+</div>
+
+<div id="normdiv">
+   <br /><span class="bold">DIV #5</span>
+   <br />no positioning
+   <br />z-index: 8;
+</div>
+
+</body></html>
+
+

See also

+ +
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Ajout_de_z-index" } ) }}

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/index.html new file mode 100644 index 0000000000..2887faf021 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/index.html @@ -0,0 +1,32 @@ +--- +title: CSS z-index 이해하기 +slug: Web/CSS/CSS_Positioning/Understanding_z_index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index +--- +

우리들은 HTML 페이지를 2차원 평면으로 생각한다. 왜냐하면 여러 텍스트, 이미지와 다른 엘리먼트들이 서로 겹치지 않고 배열되기 때문이다. 하나의 렌더링 흐름만이 존재하며 모든 엘리먼트들은 다른 엘리먼트들이 어떤 공간을 차지하고 있는지 알고 있다. 

+
+

In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+
+

(from CSS 2.1 Section 9.9.1 - Layered presentation)

+

위에 소개된 CSS 스타일 규칙을 보면 기본 렌더링 레이어(layer 0) 이외의 추가적인 레이어를 생성하고 여기에 박스를 위치시킬수 있다는 것을 알 수 있다. 레이어의 Z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 화면을 보고있는 사용자에게 가까운 것을 의미한다. Z축 위치는 {{ cssxref("z-index") }} 속성 값을 설정함으로써 바꿀 수 있다.

+

엘리먼트의 Z축 위치를 결정하는 것은 굉장히 간단해 보인다. {{ cssxref("z-index") }} 라는 하나의 프로퍼티를 사용하고 이 프로퍼티는 하나의 정수 값을 가진다.  그러나 {{ cssxref("z-index") }} 속성이 복잡한 HTML 계층적 엘리먼트들에 지정되었을 때에는 동작을 이해하기 힘들고 심지어 예측하지 못할 때도 있다. 이것은 엘리먼트들의 쌓임 순서를 결정하는 규칙(이하 쌓임 규칙)이 복잡하기 때문이다. 오로지 이 규칙만을 설명하기 위한 CSS 명세 섹션이 있을 정도다. (CSS-2.1 Appendix E)

+

이 문서에서는 몇가지 간단한 예를 들어 쌓임 규칙에 대해 설명하려고 한다. 

+
    +
  1. z-index가 없는 경우의 쌓임 : 기본 쌓임 규칙
    2. +
  2. floating 엘리먼트의 쌓임 : floating 엘리먼트들은 어떻게 다루어지는가
    3. +
  3. z-index 적용 : 기본 쌓임 순서를 변경하기 위해 z-index 사용하기
    4. +
  4. 쌓임 맥락(stacking context) 이야기 : 쌓임 맥락(stacking context) 이야기 
    5. +
  5. 쌓임 맥락 예제1 : 2레벨 HTML 계층구조, 마지막 레벨에서 z-index가 지정된 경우
    6. +
  6. 쌓임 맥락 예제2 : 2레벨 HTML 계층구조, 모든 레벨에서 z-index가 지정된 경우
    7. +
  7. 쌓임 맥락 예제3 : 3레벨 HTML 계층구조, 두번째 레벨에서 z-index가 지정된 경우
    8. +
+

저자의 말: 검토를 해준 Wladimir Palant씨와 Rod Whiteley씨에게 감사의 말을 전합니다.

+
+

원본 문서 정보

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index" } ) }} 

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html new file mode 100644 index 0000000000..4430c5cdf3 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_and_float/index.html @@ -0,0 +1,146 @@ +--- +title: floating 엘리먼트의 쌓임 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +--- +

« CSS « CSS z-index 이해하기

+

floating 엘리먼트의 쌓임

+

floating 엘리먼트들의 쌓임 순서는 약간 다르다. floating 엘리먼트들은 position이 지정된 블록과 지정되지 않은 블록 사이에 쌓인다. 

+
    +
  1. 뿌리 엘리먼트의 배경과 테두리
    2. +
  2. 자식 엘리먼트들은 HTML에서 등장하는 순서대로
    3. +
  3. floating 엘리먼트
    4. +
  4. position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 
    5. +
+

사실 다음 예제에서 보는 것처럼 position이 지정되지 않은 엘리먼트(DIV #4)의 배경과 테두리는 floating 엘리먼트들에 의해 영향을 받지 않는다. 반면 컨텐츠는 영향을 받는다. 이것은 CSS 표준 float 명세에 따른 것이다. 

+

위의 규칙 리스트를 수정하여 이 명세를 포함시켜보자. 

+
    +
  1. 뿌리 엘리먼트의 배경과 테두리
    2. +
  2. 자식 엘리먼트들은 HTML에서 등장하는 순서대로 
    3. +
  3. floating 엘리먼트
    4. +
  4. inline 자식 엘리먼트는 보통의 흐름대로
    5. +
  5. position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 
    6. +
+
+ 노트: 아래 예제에서 position이 지정되지 않은 엘리먼트 이외에는 모든 엘리먼트가 쌓임 순서를 보여주기 위해 반투명하게 설정되었다. 만약 position이 지정되지 않은 엘리먼트 (DIV #4)의 투명도를 낮추면 이상한 일이 일어난다. 배경과 테두리가 (원래에는 floating 엘리먼트 아래에 있어야 함에도 불구하고) floating 엘리먼트와 position이 지정된 엘리먼트 사이에 보이는 것이다. 이것이 명세의 일부인지 아니면 버그인지 확실하지 않다. 투명도를 적용하는것이 새로운 쌓임 맥락(stacking context)를 만드는 것일까?
+

Example of stacking rules with floating boxes

+

Example source code

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div {
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#absdiv1 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 10px;
+   right: 140px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#normdiv {
+   /*opacity: 0.7;*/
+   height: 100px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 10px 0px 10px;
+   text-align: left;
+}
+
+#flodiv1 {
+   opacity: 0.7;
+   margin: 0px 10px 0px 20px;
+   float: left;
+   width: 150px;
+   height: 200px;
+   border: 1px dashed #009900;
+   background-color: #ccffcc;
+   text-align: center;
+}
+
+#flodiv2 {
+   opacity: 0.7;
+   margin: 0px 20px 0px 10px;
+   float: right;
+   width: 150px;
+   height: 200px;
+   border: 1px dashed #009900;
+   background-color: #ccffcc;
+   text-align: center;
+}
+
+#absdiv2 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 100px;
+   top: 130px;
+   left: 100px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+</style></head>
+
+<body>
+
+<br /><br />
+
+<div id="absdiv1">
+<br /><span class="bold">DIV #1</span>
+<br />position: absolute;
+</div>
+
+<div id="flodiv1">
+<br /><span class="bold">DIV #2</span>
+<br />float: left;
+</div>
+
+<div id="flodiv2">
+<br /><span class="bold">DIV #3</span>
+<br />float: right;
+</div>
+
+<br />
+
+<div id="normdiv">
+<br /><span class="bold">DIV #4</span>
+<br />no positioning
+</div>
+
+<div id="absdiv2">
+<br /><span class="bold">DIV #5</span>
+<br />position: absolute;
+</div>
+
+</body></html>
+
+

See also

+ +
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_et_float" } ) }}

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html new file mode 100644 index 0000000000..9444e2bb5e --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.html @@ -0,0 +1,120 @@ +--- +title: 쌓임 맥락 예제1 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +--- +

« CSS « CSS z-index 이해하기

+

쌓임 맥락 예제1

+

기본 예제부터 시작하자. 쌓임 맥락의 뿌리에는 두개의 DIV #1과 DIV #3가 있다. 두 DIV는 모두 position 속성 값이 relative로 지정되었지만 z-index 속성 값은 지정되지 않았다. DIV #1 안에는 position 속성 값이 absolute로 지정된 DIV #2가 있고 DIV #3 안에도 position 속성 값이 absolute가 지정된 DIV #4가 있다. DIV #2와ㅏ DIV #4 모두 z-index 속성 값은 지정되지 않았다. 

+

유일한 쌓임 맥락은 뿌리 엘리먼트다. z-index가 없는 엘리먼트들은 HTML 문서에서 등장 순서대로 쌓인다. 

+

Stacking context example 1

+

DIV #2의 z-index 속성 값을 0또는 auto가 아닌 양의 정수로 지정하면 다른 DIV들 보다 위에 렌더링된다. 

+

Stacking context example 1

+

DIV #4의 z-index 속성 값을 DIV #2의 z-index 속성 값보다 큰 값으로 지정하면 DIV #4는 DIV #2보다 위에 렌더링된다. 

+

Stacking context example 1

+

마지막 예제에서 DIV #2와 DIV #4는 형제가 아니다. 왜냐하면 둘의 부모가 다르기 때문이다. 그럼에도 불구하고 DIV #2와 DIV #4의 쌓임 순서를 z-index 속성 값을 지정함으로써 바꿀 수 있었다. 왜냐하면 DIV #1과 DIV #3은 z-index 속성 값이 지정되지 않았고 따라서 쌓임 맥락을 만들지 않았기 때문이다. 따라서 DIV #2와 DIV #4는 둘 다 뿌리 엘리먼트의 쌓임 맥락에 속해있고, z-index 속성 값을 변경하여 쌓임 순서를 바꿀 수 있다. 

+

쌓임 맥락의 용어로 설명하자면 DIV #1과 DIV #3은 뿌리 엘리먼트에 동화되었다. 이 예제의 DIV들은 다음과 같은 쌓임 맥락 계층 구조를 이룬다. 

+
    +
  • 뿌리 쌓임 맥락 +
      +
    • DIV #2 (z-index 1)
      • +
    • DIV #4 (z-index 2)
      • +
    +
    • +
+
+ Note: DIV #1과 DIV #3은 투명하지 않다. 투명도를 1보다 적은 값으로 지정하게 되면 내부적으로 쌓임 맥락을 만든다는걸 기억하자. 이건 마치 z-index 값을 설정한 것과 비슷하다. 이 예제는 부모 엘리먼트들이 쌓임 맥락을 형성하지 않을 때 어떤 일이 일어나는지 보여준다. 
+

예제 소스 코드

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   z-index: 1;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   z-index: 2;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+<br />
+
+<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 1;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+</body></html>
+
+

See also

+ +
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_1" } ) }}

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html new file mode 100644 index 0000000000..cf794c3428 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.html @@ -0,0 +1,123 @@ +--- +title: 쌓임 맥락 예제2 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +--- +

« CSS « CSS z-index 이해하기

+

쌓임 맥락 예제2

+

굉장히 간단하지만 쌓임 맥락을 이해하는데 도움이 되는 예제를 하나 소개하려 한다. 이전 예제에서 본 4개의 DIV가 있다. 이번에는 두 레벨의 DIV 모두 z-index 속성 값을 지정했다. 

+

Stacking context example 2

+

z-index 속성 값이 2인 DIV #2는 z-index 속성 값이 1인 DIV #3 위에 있다. 왜냐하면 DIV #2와 DIV #3은 같은 쌓임 맥락(루트 엘리먼트)에 속하고 DIV #2의 z-index 값이 더 크기 때문이다. 

+

이상한 점은 z-index 속성 값이 2인 DIV #2가 z-index 속성 값이 10인 DIV #4보다 위에 있다는 점이다. 이것은 이 두 DIV가 같은 쌓임 맥락에 속해있지 않기 때문이다. DIV #4는 DIV #3이 만든 쌓임 맥락에 속해있고 DIV #3과 DIV #3의 모든 자식 엘리먼트는 DIV #2보다 아래에 있다. 

+

이 상황을 더 잘 이해하기 위해서 쌓임 맥락 계층을 그려보자. 

+
    +
  • 루트 엘리먼트 쌓임 맥락 +
      +
    • DIV #2 (z-index 2)
      • +
    • DIV #3 (z-index 1) +
        +
      • DIV #4 (z-index 10)
        • +
      +
      • +
    +
    • +
+
+ Note: 일반적인 HTML 계층 구조가 쌓임 맥락 계층 구조와 다르다는걸 상기하자. 쌓임 맥락을 만들지 않는 엘리먼트들은 쌓임 맥락 계층 구조에서 사라진다. 
+

예제 소스 코드

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+#div2 { z-index: 2; }
+#div3 { z-index: 1; }
+#div4 { z-index: 10; }
+
+#div1,#div3 {
+   height: 80px;
+   position: relative;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#div2 {
+   opacity: 0.8;
+   position: absolute;
+   width: 150px;
+   height: 200px;
+   top: 20px;
+   left: 170px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#div4 {
+   opacity: 0.8;
+   position: absolute;
+   width: 200px;
+   height: 70px;
+   top: 65px;
+   left: 50px;
+   border: 1px dashed #000099;
+   background-color: #ddddff;
+   text-align: left;
+   padding-left: 10px;
+}
+
+
+</style></head>
+
+<body>
+
+<br />
+
+<div id="div1">
+<br /><span class="bold">DIV #1</span>
+<br />position: relative;
+   <div id="div2">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: absolute;
+   <br />z-index: 2;
+   </div>
+</div>
+
+<br />
+
+<div id="div3">
+<br /><span class="bold">DIV #3</span>
+<br />position: relative;
+<br />z-index: 1;
+   <div id="div4">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+   <br />z-index: 10;
+   </div>
+</div>
+
+</body></html>
+
+

See also

+ +
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_2" } ) }}

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html new file mode 100644 index 0000000000..d632745924 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.html @@ -0,0 +1,167 @@ +--- +title: 쌓임 맥락 예제3 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +--- +

« CSS « CSS z-index 이해하기

+

쌓임 맥락 예제3

+

마지막 예제는 멀티 레벨 HTML 계층 구조에서 z-index 속성 값을 지정할때 생기는 문제에 대해 다룰 것이다. 

+

몇개의 position 속성 값이 지정된 3-레벨 계층 메뉴를 생각하자. 두번째 레벨과 세번째 레벨의 메뉴는 그들의 부모에 마우스를 갖다 대거나 클릭했을 때 보인다. 이 메뉴를 클래스 선택자를 통해 스타일링 해보자. 

+

만약 세 메뉴가 부분적으로 겹친다면 쌓임을 해결하는 것이 문제가 된다. 

+

Stacking context example 3

+

첫번째 레벨 메뉴는 position 속성 값만이 relative로 지정되어있다. 따라서 이는 쌓임 맥락을 형성하지 않는다. (역자: z-index 속성 값을 지정하지 않았다.) 

+

두번째 레벨 메뉴는 position 속성 값이 absolute로 지정되었다. 두번째 레벨 메뉴를 모든 첫번째 레벨 메뉴보다 위에 두기 위해서 z-index 속성 값이 사용되었다. 따라서 모든 두번째 레벨 메뉴에 쌓임 맥락이 생성되고 세번째 레벨 메뉴는 부모의 쌓임 맥락에 속하게 된다. 

+

따라서 세번째 레벨 메뉴는 그 부모의 다음 두번째 레벨 메뉴 아래에 놓이게 된다. 왜냐하면 모든 두번째 레벨 메뉴는 같은 z-index 속성 값을 가지고 기본 쌓임 규칙을 적용받기 때문이다. (역자: 같은 z-index 속성 값을 가지는 형제 엘리먼트들은 HTML 문서상에서 나중에 등장한 것이 위에 쌓인다.)

+

이 상황을 더 잘 이해하기 위해 쌓임 맥락 계층 구조를 그려보자.

+
    +
  • 뿌리 엘리먼트 쌓임 맥락 +
      +
    • LEVEL #1 +
        +
      • LEVEL #2 (z-index: 1) +
          +
        • LEVEL #3
          • +
        • ...
          • +
        • LEVEL #3
          • +
        +
        • +
      • LEVEL #2 (z-index: 1)
        • +
      • ...
        • +
      • LEVEL #2 (z-index: 1)
        • +
      +
      • +
    • LEVEL #1
      • +
    • ...
      • +
    • LEVEL #1
      • +
    +
    • +
+

이 문제를 해결하는 방법에는 1) 서로 다른 메뉴를 겹치지 않게 배치하기, 2) 클래스 선택자 뿐만 아니라 id 선택자를 이용하여 각각의 엘리먼트에 z-index 속성 값을 지정하기, 3) HTML 구조를 단순화하여 멀티 레벨 메뉴를 사용하지 않기 등이 있다. 

+
+ 노트: 소스 코드에는 두번째 레벨 메뉴와 세번째 레벨 메뉴들이 position 속성이 absolute로 지정된 컨테이너에 싸여있는 것을 볼 수 있다. 이는 여러개의 엘리먼트들의 위치를 한꺼번에 지정하는데 유용하다. 
+

예제 소스 코드

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div { font: 12px Arial; }
+
+span.bold { font-weight: bold; }
+
+div.lev1 {
+   width: 250px;
+   height: 70px;
+   position: relative;
+   border: 2px outset #669966;
+   background-color: #ccffcc;
+   padding-left: 5px;
+}
+
+#container1 {
+   z-index: 1;
+   position: absolute;
+   top: 30px;
+   left: 75px;
+}
+
+div.lev2 {
+   opacity: 0.9;
+   width: 200px;
+   height: 60px;
+   position: relative;
+   border: 2px outset #990000;
+   background-color: #ffdddd;
+   padding-left: 5px;
+}
+
+#container2 {
+   z-index: 1;
+   position: absolute;
+   top: 20px;
+   left: 110px;
+}
+
+div.lev3 {
+   z-index: 10;
+   width: 100px;
+   position: relative;
+   border: 2px outset #000099;
+   background-color: #ddddff;
+   padding-left: 5px;
+}
+
+</style></head>
+
+<body>
+
+<br />
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+
+   <div id="container1">
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+
+         <div id="container2">
+
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+            <div class="lev3"><span class="bold">LEVEL #3</span></div>
+
+         </div>
+
+      </div>
+
+      <div class="lev2">
+      <br /><span class="bold">LEVEL #2</span>
+      <br />z-index: 1;
+      </div>
+
+   </div>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+<div class="lev1">
+<span class="bold">LEVEL #1</span>
+</div>
+
+</body></html>
+
+

See also

+ +

 

+
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Exemple_d'empilement_3" } ) }}

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html new file mode 100644 index 0000000000..04e826dc17 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -0,0 +1,145 @@ +--- +title: z-index가 없는 경우의 쌓임 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +--- +

« CSS « CSS z-index 이해하기

+

z-index가 없는 경우의 쌓임

+

만약 모든 엘리먼트들에 z-index가 지정되지 않았을 경우에는 엘리먼트들이 다음 순서로 아래에서부터 위로 쌓인다.

+
    +
  1. 뿌리 엘리먼트의 배경과 테두리
    2. +
  2. 자식 엘리먼트들은 HTML에서 등장하는 순서대로 
    3. +
  3. position이 지정된 자식 엘리먼트들은 HTML에서 등장하는 순서대로 
    4. +
+

다음 예제에는 위의 쌓임 규칙을 설명하기 위한 적당한 크기의 엘리먼트들이 준비되어있다. 

+
+

노트:

+
    +
  • 주어진 동일한 엘리먼트들의 그룹은 모두 z-index가 설정되지 않았다. DIV #1 부터 DIV #4 까지는 position 속성이 설정되었다. 엘리먼트의 position속성 값과는 상관 없이 HTML 계층 구조대로 쌓임을 알 수 있다. 
    • +
  • +

    position 속성이 지정되지 않은 블록(DIV #5)은 항상 position이 지정된 엘리먼트 이전에 렌더링 된다. 따라서 position이 지정된 엘리먼트 아래에 보인다. 설령 HTML 문서상에서 먼저 나오더라도 position이 지정되지 않은 엘리먼트는 지정된 엘리먼트보다 아래에 보인다. 

    +
    • +
+
+

understanding_zindex_01.png

+

 

+

예제

+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head><style type="text/css">
+
+div {
+   font: 12px Arial;
+}
+
+span.bold { font-weight: bold; }
+
+#normdiv {
+   height: 70px;
+   border: 1px dashed #999966;
+   background-color: #ffffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv1 {
+   opacity: 0.7;
+   height: 100px;
+   position: relative;
+   top: 30px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#reldiv2 {
+   opacity: 0.7;
+   height: 100px;
+   position: relative;
+   top: 15px;
+   left: 20px;
+   border: 1px dashed #669966;
+   background-color: #ccffcc;
+   margin: 0px 50px 0px 50px;
+   text-align: center;
+}
+
+#absdiv1 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   left: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+#absdiv2 {
+   opacity: 0.7;
+   position: absolute;
+   width: 150px;
+   height: 350px;
+   top: 10px;
+   right: 10px;
+   border: 1px dashed #990000;
+   background-color: #ffdddd;
+   text-align: center;
+}
+
+</style></head>
+
+<body>
+
+<br /><br />
+
+<div id="absdiv1">
+   <br /><span class="bold">DIV #1</span>
+   <br />position: absolute;
+</div>
+
+<div id="reldiv1">
+   <br /><span class="bold">DIV #2</span>
+   <br />position: relative;
+</div>
+
+<div id="reldiv2">
+   <br /><span class="bold">DIV #3</span>
+   <br />position: relative;
+</div>
+
+<div id="absdiv2">
+   <br /><span class="bold">DIV #4</span>
+   <br />position: absolute;
+</div>
+
+<div id="normdiv">
+   <br /><span class="bold">DIV #5</span>
+   <br />no positioning
+</div>
+
+</body></html>
+
+
+

See also

+ +

 

+
+

Original Document Information

+ +
+

{{ languages( { "fr": "fr/CSS/Comprendre_z-index/Empilement_sans_z-index" } ) }}

diff --git a/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html new file mode 100644 index 0000000000..0e55368fa2 --- /dev/null +++ b/files/ko/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -0,0 +1,240 @@ +--- +title: 쌓임 맥락 +slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +tags: + - Advanced + - CSS + - Guide + - Reference + - z-index +translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +--- +
{{cssref}}
+ +

쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 자신의 속성에 따른 우선순위를 사용해 3차원 공간을 차지합니다.

+ +

쌓임 맥락

+ +

이전 글 z-index 사용하기에서 보았듯, 특정 요소의 렌더링 순서는 자신의 z-index 속성 값에 영향을 받습니다. 이는 그 요소들이 가진 특별한 속성으로 인해 쌓임 맥락이 생성되기 때문입니다.

+ +

쌓임 맥락은, 문서 어디에서나, 다음 조건을 만족하는 요소가 생성합니다.

+ +
    +
  • 문서의 루트 요소. (<html>)
    • +
  • {{cssxref("position")}}이 absolute 또는 relative이고, {{cssxref("z-index")}}가 auto가 아닌 요소.
    • +
  • {{cssxref("position")}}이 fixed 또는 sticky인 요소. (sticky는 모든 모바일 브라우저에서는 해당하지만 구형 데스크톱 브라우저에서는 해당하지 않음)
    • +
  • 플렉스({{cssxref("flexbox")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 auto가 아닌 요소.
    • +
  • 그리드({{cssxref("grid")}}) 컨테이너의 자식 중 {{cssxref("z-index")}}가 auto가 아닌 요소.
    • +
  • {{cssxref("opacity")}}가 1보다 작은 요소. (불투명도 명세 참고)
    • +
  • {{cssxref("mix-blend-mode")}}가 normal이 아닌 요소.
    • +
  • 다음 속성 중 하나라도 none이 아닌 값을 가진 요소. +
      +
    • {{cssxref("transform")}}
      • +
    • {{cssxref("filter")}}
      • +
    • {{cssxref("perspective")}}
      • +
    • {{cssxref("clip-path")}}
      • +
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • +
    +
    • +
  • {{cssxref("isolation")}}이 isolate인 요소.
    • +
  • {{cssxref("-webkit-overflow-scrolling")}}이 touch인 요소.
    • +
  • {{cssxref("will-change")}}의 값으로, 초깃값이 아닐 때 새로운 쌓임 맥락을 생성하는 속성을 지정한 요소.
    • +
  • {{cssxref("contain")}}이 layout, paint, 또는 둘 중 하나를 포함하는 값(strict, content 등)인 요소.
    • +
+ +

쌓임 맥락 안의 자식 요소는 이전에 설명했던 규칙을 동일하게 사용해 쌓입니다. 중요한 것은, 자식의 z-index 값은 부모에게만 의미가 있다는 점입니다. 하나의 쌓임 맥락은 부모 쌓임 맥락 안에서 통째로 하나의 단위로 간주됩니다.

+ +

요약하면,

+ +
    +
  • 쌓임 맥락이 다른 쌓임 맥락을 포함할 수 있고, 함께 계층 구조를 이룹니다.
    • +
  • 쌓임 맥락은 형제 쌓임 맥락과 완전히 분리됩니다. 쌓임을 처리할 땐 자손 요소만 고려합니다.
    • +
  • 각각의 쌓임 맥락은 독립적입니다. 어느 요소의 콘텐츠를 쌓은 후에는 그 요소를 통째 부모 쌓임 맥락 안에 배치합니다.
    • +
+ +
참고: 모든 요소가 쌓임 맥락을 생성하는 건 아니므로, 쌓임 맥락의 계층 구조는 HTML 요소 계층 구조의 부분집합입니다. 자신의 쌓임 맥락을 만들지 않은 요소는 '부모 쌓임 맥락에 의해 동화된다'라고 표현할 수 있겠습니다.
+ +

예시

+ +

Example of stacking rules modified using z-index

+ +

위의 예시에서, 모든 요소는 각자의 포지션과 z-index로 인해 자신의 쌓임 맥락을 형성합니다. 쌓임 맥락의 계층 구조는 다음과 같습니다.

+ +
    +
  • 루트 +
      +
    • DIV #1
      • +
    • DIV #2
      • +
    • DIV #3 +
        +
      • DIV #4
        • +
      • DIV #5
        • +
      • DIV #6
        • +
      +
      • +
    +
    • +
+ +

DIV #4, DIV #5, DIV #6은 DIV #3의 자식이므로, DIV #3 내부에서만 셋의 쌓임을 처리했다는 것을 이해하는게 중요합니다. DIV #3 내부의 요소의 쌓기와 렌더링이 끝난 후에는, 전체 DIV #3을 루트 요소의 쌓임 맥락 하에서 형제 DIV와 쌓습니다.

+ +
+

참고:

+ +
    +
  • DIV #4는 DIV #1보다 z-index 속성 값이 더 크지만 DIV #1보다 아래에 렌더링 되었다. 왜냐하면 DIV #1의 z-index 속성 값인 5는 뿌리 엘리먼트의 쌓임 맥락 안에서 유효하나 DIV #4의 z-index 속성 값인 6은 DIV #3의 쌓임 맥락 안에서만 유효하기 때문이다. DIV #4는 자신이 속하는 DIV #3의 z-index 속성 값이 4이므로 DIV #1 아래에 쌓였다.
    • +
  • 같은 이유로 DIV #2는 DIV #5 아래에 렌더링 되었다. DIV #5는 DIV #2보다 z-index 값이 작지만 뿌리 엘리먼트의 쌓임 맥락안에서 유효한 DIV #5가 속한 DIV #3의 z-index 값이 DIV #2의 z-index 값 보다 더 크기 때문이다.
    • +
  • DIV #3의 z-index 속성 값인 4는 DIV #4, DIV #5, DIV #6의 z-index 속성값과 독립적이다. 왜냐하면 다른 쌓임 맥락에 속해있기 때문이다.
    • +
  • 렌더링 순서를 이해하는 쉬운 방법은 z-index를 "버전 번호" 처럼 생각하는 것이다. 자식 엘리먼트는 부모 엘리먼트 버전 번호의 마이너 버전이다. 이 방법은 왜 z-index가 1인 DIV #5가 z-index가 2인 DIV #2 위에 쌓였는지, z-index가 6인 DIV #4가 z-index가 5인 DIV #1 아래에 쌓였는지 이해하게 해준다. 우리 예제에서는 +
      +
    • 뿌리 엘리먼트 +
        +
      • DIV #2 - z-index가 2
        • +
      • DIV #3 - z-index가 4 +
          +
        • DIV #5 - z-index가 1인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.1이다.
          • +
        • DIV #6 - z-index가 3인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.3이다.
          • +
        • DIV #4 - z-index가 6인데 z-index가 4인 엘리먼트 아래에서 쌓였으므로 렌더링 순서는 4.6이다.
          • +
        +
        • +
      • DIV #1 - z-index가 5
        • +
      +
      • +
    +
    • +
+
+ +

예제

+ +

HTML

+ +
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+ +

CSS

+ +
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}
+ +

결과

+ +

{{ EmbedLiveSample('예제', '100%', '396') }}

+ +

같이 보기

+ + + +
+

Original Document Information

+ + +
diff --git a/files/ko/web/css/css_ruby/index.html b/files/ko/web/css/css_ruby/index.html new file mode 100644 index 0000000000..e7266af671 --- /dev/null +++ b/files/ko/web/css/css_ruby/index.html @@ -0,0 +1,45 @@ +--- +title: CSS Ruby +slug: Web/CSS/CSS_Ruby +tags: + - CSS + - CSS Ruby + - Overview + - Reference +translation_of: Web/CSS/CSS_Ruby +--- +
{{CSSRef}}
+ +

CSS Ruby는 행간 주석의 형태로 기본 텍스트와 함께 작게 실행되는 텍스트인 ruby 주석 표시와 관련된 렌더링 모델 및 서식 컨트롤을 제공하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("ruby-align")}}
    • +
  • {{cssxref("ruby-position")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}초기 정의
+ +
 
diff --git a/files/ko/web/css/css_scroll_snap_points/index.html b/files/ko/web/css/css_scroll_snap_points/index.html new file mode 100644 index 0000000000..1603df3f02 --- /dev/null +++ b/files/ko/web/css/css_scroll_snap_points/index.html @@ -0,0 +1,50 @@ +--- +title: CSS Scroll Snap Points +slug: Web/CSS/CSS_Scroll_Snap_Points +tags: + - CSS + - CSS Scroll Snap + - Overview + - Reference +translation_of: Web/CSS/CSS_Scroll_Snap_Points +--- +

{{CSSRef}}{{deprecated_header}}

+ +

CSS Scroll Snap Points는 물리보다는 논리상 방향과 차원 맵핑을 통해 레이아웃을 제어하는 능력을 제공하는 속성 및 값을 정의하는 CSS 모듈입니다.

+ +
+

참고: 같은 기능을 정의하는 최신 명세는 CSS Scroll Snap입니다.

+
+ +

참고

+ +

CSS 속성

+ +
+
    +
  • {{cssxref("scroll-snap-coordinate")}}
    • +
  • {{cssxref("scroll-snap-destination")}}
    • +
  • {{cssxref("scroll-snap-points-x")}}
    • +
  • {{cssxref("scroll-snap-points-y")}}
    • +
  • {{cssxref("scroll-snap-type")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS Scroll Snap Points", "#propdef-scroll-snap-points-y", "scroll-snap-points-y")}}{{Spec2("CSS Scroll Snap Points")}}초기 정의
diff --git a/files/ko/web/css/css_selectors/index.html b/files/ko/web/css/css_selectors/index.html new file mode 100644 index 0000000000..eb5af87d66 --- /dev/null +++ b/files/ko/web/css/css_selectors/index.html @@ -0,0 +1,133 @@ +--- +title: CSS 선택자 +slug: Web/CSS/CSS_Selectors +tags: + - CSS + - Guide + - Overview + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/CSS_Selectors +--- +
{{CSSRef("Selectors")}}
+ +

CSS 선택자는 CSS 규칙을 적용할 요소를 정의합니다.

+ +
+

참고: 부모, 부모의 형제, 부모 형제의 자식을 선택할 수 있는 선택자는 존재하지 않습니다.

+
+ +

기본 선택자

+ +
+
전체 선택자
+
모든 요소를 선택합니다. 추가로 네임스페이스 제한을 둘 수 있습니다.
+ 구문: * ns|* *|*
+ 예제: *은 문서 내의 모든 요소와 일치합니다.
+
유형 선택자
+
주어진 노드 이름을 가진 모든 요소를 선택합니다.
+ 구문: elementname
+ 예제: input은 모든 {{HTMLElement("input")}} 요소와 일치합니다.
+
클래스 선택자
+
주어진 class 특성을 가진 모든 요소를 선택합니다.
+ 구문: .classname
+ 예제: .index는 "index" 클래스를 가진 모든 요소와 일치합니다.
+
ID 선택자
+
id 특성에 따라 요소를 선택합니다. 문서 내에는 주어진 ID를 가진 요소가 하나만 존재해야 합니다.
+ 구문: #idname
+ 예제: #toc는 "toc" ID를 가진 요소와 일치합니다.
+
특성 선택자
+
주어진 특성을 가진 모든 요소를 선택합니다.
+ 구문: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ 예제: [autoplay]는 autoplay 특성을 설정한 모든 요소와 일치합니다. 특성의 값은 고려하지 않습니다.
+
+ +

그룹 선택자

+ +
+
선택자 목록
+
,는 선택자 그룹을 생성하는 방법으로, 모든 일치하는 노드를 선택합니다.
+ 구문: A, B
+ 예제: div, span은 모든 {{HTMLElement("span")}}과 {{HTMLElement("div")}} 요소와 일치합니다.
+
+ +

결합자

+ +
+
자손 결합자
+
  (공백) 결합자는 첫 번째 요소의 자손인 노드를 선택합니다.
+ 구문: A B
+ 예제: div span은 {{HTMLElement("div")}} 요소 안에 위치하는 모든 {{HTMLElement("span")}} 요소와 일치합니다.
+
자식 결합자
+
> 결합자는 첫 번째 요소의 바로 아래 자식인 노드를 선택합니다.
+ 구문: A > B
+ 예제: ul > li는 {{HTMLElement("ul")}} 요소 바로 아래에 위치하는 모든 {{HTMLElement("li")}} 요소와 일치합니다.
+
일반 형제 결합자
+
~ 결합자는 형제, 즉 첫 번째 요소를 뒤따르면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
+ 구문: A ~ B
+ 예제: p ~ span은 {{HTMLElement("p")}} 요소를 뒤따르는 모든 {{HTMLElement("span")}} 요소와 일치합니다.
+
인접 형제 결합자
+
+ 결합자는 인접 형제, 즉 첫 번째 요소의 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소를 선택합니다.
+ 구문: A + B
+ 예제: h2 + p는 {{HTMLElement("h2")}} 바로 뒤에 위치하는 {{HTMLElement("p")}} 요소와 일치합니다.
+
열 결합자 {{Experimental_Inline}}
+
|| 결합자는 같은 열에 속하는 노드를 선택합니다.
+ 구문: A || B
+ 예제: col || td는 {{HTMLElement("col")}}의 범위에 속하는 모든 {{HTMLElement("td")}} 요소와 일치합니다.
+
+ +

의사 클래스/요소

+ +
+
의사 클래스
+
의사 :은 문서 트리가 포함하지 않는 상태 정보에 기반해 요소를 선택할 수 있습니다.
+ 예제: a:visited는 사용자가 방문한 모든 {{HTMLElement("a")}} 요소와 일치합니다.
+
의사 요소
+
의사 ::는 HTML이 포함하지 않는 개체를 선택합니다.
+ 예제: p::first-line은 모든 {{HTMLElement("p")}} 요소의 첫 번째 줄과 일치합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Added the || column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes, modifier for ASCII case-sensitive and case-insensitive attribute value selection.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Added the ~ general sibling combinator and tree-structural pseudo-classes.
+ Made pseudo-elements use a :: double-colon prefix. Additional attribute selectors
{{SpecName("CSS2.1", "selector.html")}}{{Spec2("CSS2.1")}}Added the > child and + adjacent sibling combinators.
+ Added the universal and attribute selectors.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
+ +

의사 클래스와 의사 요소의 명세 표에서 각각의 상세 정보를 볼 수 있습니다.

+ +

같이 보기

+ + diff --git a/files/ko/web/css/css_shapes/index.html b/files/ko/web/css/css_shapes/index.html new file mode 100644 index 0000000000..f814002c56 --- /dev/null +++ b/files/ko/web/css/css_shapes/index.html @@ -0,0 +1,80 @@ +--- +title: CSS Shapes +slug: Web/CSS/CSS_Shapes +tags: + - CSS + - CSS Shapes + - Overview + - Reference +translation_of: Web/CSS/CSS_Shapes +--- +
{{CSSRef}}
+ +

CSS Shapes는 CSS에서 사용하기 위한 기하학적 도형을 설명한다. 레벌1 명세에 의하면 떠있는 요소에 CSS Shapes를 적용할 수 있다. 명세의 정의에 의하면 떠있는 요소의 모양을 정의 하거나  요소 상자의 사각형을 따르는 대신 테두리 선을 따라 감싸지도록 하는 방법 등  다양한 방법을 정의하고 있다. 

+ +

기본 예제

+ +

아래 예제는 왼쪽에 떠있는 이미지에 shape-outside속성에 circle(50%) 값이 적용된 모습을 볼수 있다. 이런식으로 원모양을 만들면 도옇의 둘래를 따라 주변 텍스트가 흘러내리는것을 볼수 있다. 둘러싼 텍스트가 도형의 모양을 따라 길이가 변하게 되었다. 

+ +

{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}}

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("shape-outside")}}
    • +
  • {{cssxref("shape-margin")}}
    • +
  • {{cssxref("shape-image-threshold")}}
    • +
+
+ +

자료형

+ +
+
    +
  • {{cssxref("<basic-shape>")}}
    • +
+
+ +

안내서

+ + + +

외부 자료

+ + + +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}초기 정의
diff --git a/files/ko/web/css/css_table/index.html b/files/ko/web/css/css_table/index.html new file mode 100644 index 0000000000..ad712ec39e --- /dev/null +++ b/files/ko/web/css/css_table/index.html @@ -0,0 +1,48 @@ +--- +title: CSS Table +slug: Web/CSS/CSS_Table +tags: + - CSS + - CSS Table + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Table +--- +
{{CSSRef}}
+ +

CSS Table은 표 데이터의 배치법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("border-collapse")}}
    • +
  • {{cssxref("border-spacing")}}
    • +
  • {{cssxref("caption-side")}}
    • +
  • {{cssxref("empty-cells")}}
    • +
  • {{cssxref("table-layout")}}
    • +
  • {{cssxref("vertical-align")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}초기 정의
diff --git a/files/ko/web/css/css_text/index.html b/files/ko/web/css/css_text/index.html new file mode 100644 index 0000000000..9edc21d716 --- /dev/null +++ b/files/ko/web/css/css_text/index.html @@ -0,0 +1,71 @@ +--- +title: CSS Text +slug: Web/CSS/CSS_Text +tags: + - CSS + - CSS Text + - Guide + - Overview +translation_of: Web/CSS/CSS_Text +--- +
{{CSSRef}}
+ +

CSS Text는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("hanging-punctuation")}}
    • +
  • {{cssxref("hyphens")}}
    • +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("line-break")}}
    • +
  • {{cssxref("overflow-wrap")}}
    • +
  • {{cssxref("tab-size")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-align-last")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-justify")}}
    • +
  • {{cssxref("text-size-adjust")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-break")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}텍스트 방향성에 독립된 일부 속성 갱신.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}초기 정의
diff --git a/files/ko/web/css/css_text_decoration/index.html b/files/ko/web/css/css_text_decoration/index.html new file mode 100644 index 0000000000..e01c36d116 --- /dev/null +++ b/files/ko/web/css/css_text_decoration/index.html @@ -0,0 +1,69 @@ +--- +title: CSS Text Decoration +slug: Web/CSS/CSS_Text_Decoration +tags: + - CSS + - CSS Text Decoration + - Overview + - Reference +translation_of: Web/CSS/CSS_Text_Decoration +--- +
{{CSSRef}}
+ +

CSS Text Decoration은 밑줄, 텍스트 그림자 및 강조 표시 등 텍스트 장식에 관련된 기능을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("letter-spacing")}}
    • +
  • {{cssxref("text-align")}}
    • +
  • {{cssxref("text-decoration")}}
    • +
  • {{cssxref("text-decoration-color")}}
    • +
  • {{cssxref("text-decoration-line")}}
    • +
  • {{cssxref("text-decoration-style")}}
    • +
  • {{cssxref("text-emphasis")}}
    • +
  • {{cssxref("text-emphasis-color")}}
    • +
  • {{cssxref("text-emphasis-position")}}
    • +
  • {{cssxref("text-emphasis-style")}}
    • +
  • {{cssxref("text-indent")}}
    • +
  • {{cssxref("text-rendering")}}
    • +
  • {{cssxref("text-shadow")}}
    • +
  • {{cssxref("text-transform")}}
    • +
  • {{cssxref("white-space")}}
    • +
  • {{cssxref("word-spacing")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}초기 정의
+ +
 
diff --git a/files/ko/web/css/css_transforms/index.html b/files/ko/web/css/css_transforms/index.html new file mode 100644 index 0000000000..f4cffad3b6 --- /dev/null +++ b/files/ko/web/css/css_transforms/index.html @@ -0,0 +1,66 @@ +--- +title: CSS Transforms +slug: Web/CSS/CSS_Transforms +tags: + - CSS + - CSS Transforms + - Overview + - Reference +translation_of: Web/CSS/CSS_Transforms +--- +
{{CSSRef}}
+ +

CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+ +

Reference

+ +

Properties

+ +
+
    +
  • {{cssxref("backface-visibility")}}
    • +
  • {{cssxref("perspective")}}
    • +
  • {{cssxref("perspective-origin")}}
    • +
  • {{cssxref("rotate")}}
    • +
  • {{cssxref("scale")}}
    • +
  • {{cssxref("transform")}}
    • +
  • {{cssxref("transform-box")}}
    • +
  • {{cssxref("transform-origin")}}
    • +
  • {{cssxref("transform-style")}}
    • +
  • {{cssxref("translate")}}
    • +
+
+ +

Data types

+ +
+
    +
  • {{cssxref("<transform-function>")}}
    • +
+
+ +

Guides

+ +
+
Using CSS transforms
+
Step-by-step tutorial about how to transform elements styled with CSS.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.
diff --git a/files/ko/web/css/css_transforms/using_css_transforms/index.html b/files/ko/web/css/css_transforms/using_css_transforms/index.html new file mode 100644 index 0000000000..1c29e3b1e3 --- /dev/null +++ b/files/ko/web/css/css_transforms/using_css_transforms/index.html @@ -0,0 +1,80 @@ +--- +title: CSS 변형 사용하기 +slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +tags: + - 3D + - Advanced + - CSS + - CSS Transforms + - Graphics + - Guide +translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms +--- +
{{CSSRef}}
+ +

CSS 변형(transform)은 좌표공간을 변형함으로써 일반적인 문서 흐름을 방해하지 않고 콘텐츠의 형태와 위치를 바꿉니다. 본 가이드는 변형 사용법의 기초를 제시합니다.

+ +

CSS 변형은 HTML 요소에 선형 아핀 변형(affine linear transformation)을 적용하는 여러 개의 CSS 속성을 조합해 구현합니다. 변형은 평면과 3D 공간에서의 회전, 확대, 이동, 비틀기를 포함합니다.

+ +
+

박스 모델에 따라 배치된 요소만 transform을 적용할 수 있습니다. 한 가지 예를 들자면, display: block속성을 가진 요소는 박스 모델을 따릅니다. 

+
+ +

CSS 변형 속성

+ +

CSS 변형을 정의할 때 중요한 두 가지 속성은 {{cssxref("transform")}}과 {{cssxref("transform-origin")}}입니다.

+ +
+
{{cssxref("transform-origin")}}
+
원점의 위치를 지정합니다. 기본값은 요소의 중심이며 변경할 수 있습니다. 회전, 확대, 비틀기 등 하나의 점을 기준으로 하는 변형에서 사용합니다.
+
{{cssxref("transform")}}
+
요소에 적용할 변형을 지정합니다. 여러 개의 변형 목록을 공백으로 구분하여 대입하면 순차적으로 합성한 결과물을 적용합니다. 합성은 오른쪽부터 왼쪽으로 진행합니다.
+
+ +

예제

+ +

다음 이미지는 변형하지 않은 MDN 로고입니다.

+ +

MDN Logo

+ +

회전

+ +

MDN 로고를 90도 회전합니다.

+ +
<img style="transform: rotate(90deg);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+ +

{{EmbedLiveSample('회전', 'auto', 240) }}

+ +

비틀고 옮기기

+ +

MDN 로고를 10도 비틀고 X축으로 150픽셀 옮깁니다.

+ +
<img style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;"
+     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">
+ +

{{EmbedLiveSample('비틀고_옮기기') }}

+ +

3D 전용 CSS 속성

+ +

3D 공간에서의 CSS 변환은 좀 더 복잡합니다. 우선 원근감을 부여해 3D 공간을 설정한 후에, 2D 요소가 그 안에서 어떻게 행동할지 설정해야 합니다..

+ +

원근

+ +

처음으로 정할 항목은 {{cssxref("perspective")}}입니다. 우리가 입체라고 느낄 수 있는 건 원근감 덕분입니다. 요소가 관찰자에서 멀어질 수록 더 작게 보입니다.

+ +

{{page("/ko/docs/Web/CSS/perspective", "Setting perspective", 0, 0, 3)}}

+ +

다음으로는 {{cssxref("perspective-origin")}} 속성으로 관찰자의 위치를 정해야 합니다. 기본값은 중앙으로, 언제나 충분한 위치는 아닙니다.

+ +

{{page("/ko/docs/Web/CSS/perspective-origin", "Changing the perspective origin", 0, 0, 3)}}

+ +

모든 과정을 마쳤다면 3D 공간의 요소를 작업할 수 있습니다.

+ +

더 보기

+ + diff --git a/files/ko/web/css/css_transitions/index.html b/files/ko/web/css/css_transitions/index.html new file mode 100644 index 0000000000..e32bb60c42 --- /dev/null +++ b/files/ko/web/css/css_transitions/index.html @@ -0,0 +1,59 @@ +--- +title: CSS Transitions +slug: Web/CSS/CSS_Transitions +tags: + - CSS + - CSS Transitions + - Overview + - Reference +translation_of: Web/CSS/CSS_Transitions +--- +
{{CSSRef}}
+ +

CSS Transitions는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("transition")}}
    • +
  • {{cssxref("transition-delay")}}
    • +
  • {{cssxref("transition-duration")}}
    • +
  • {{cssxref("transition-property")}}
    • +
  • {{cssxref("transition-timing-function")}}
    • +
+
+ +

안내서

+ +
+
CSS 트랜지션 사용하기
+
CSS 트랜지션을 사용하는 법이 단계별로 적혀있습니다. 각각의 CSS 트랜지션 속성의 설명과, 서로 합치면 어떻게 동작하는지 설명합니다.
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Initial definition.
+ +

같이 보기

+ +
    +
  • CSS Animations를 사용하면 값의 전환을 CSS Transitions보다 더 세밀하게 조절할 수 있습니다.
    • +
diff --git a/files/ko/web/css/css_transitions/using_css_transitions/index.html b/files/ko/web/css/css_transitions/using_css_transitions/index.html new file mode 100644 index 0000000000..c81a169965 --- /dev/null +++ b/files/ko/web/css/css_transitions/using_css_transitions/index.html @@ -0,0 +1,1058 @@ +--- +title: CSS 트랜지션 사용하기 +slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +tags: + - Advanced + - CSS + - CSS Transitions + - Guide +translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions +--- +
{{CSSRef}}
+ +

CSS 트랜지션은 CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공합니다. 속성 변경이 즉시 영향을 미치게 하는 대신, 그 속성의 변화가 일정 기간에 걸쳐 일어나도록 할 수 있습니다. 예를 들어, 여러분이 어떤 요소의 색상을 흰색에서 검은색으로 변경한다면, 변화는 대개 즉시 일어납니다. CSS 트랜지션을 이용하면, 모두 커스터마이즈 가능한 어떤 가속도 곡선을 따르는 시간 주기마다 변화가 일어납니다.

+ +

두 상태 사이의 트랜지션을 포함하는 애니메이션을 종종 암묵적 트랜지션이라고 부르는데, 이는 시작과 종료 상태 사이의 상태를 브라우저가 암묵적으로 정의하기 때문입니다.

+ +

A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.

+ +

CSS transitions는 여러분이 (명시적으로 목록을 작성해서) 어떤 속성을 움직이게 할지, (딜레이를 설정해서) 언제 애니메이션이 시작할지, (지속 시간을 설정해서) 트랜지션을 얼마나 지속할지, 그리고 (예를 들면, 선형이거나 초기 빠름, 종료 느림과 같은 타이밍 함수를 정의해서) 어떻게 트랜지션을 실행하는지 결정하게 합니다.

+ +

애니메이션 가능한 CSS 속성은?

+ +

웹 작성자는 어떤 속성을 어떤 방식으로 움직일지를 정의할 수 있습니다. 이것은 복잡한 트랜지션을 생성할 수 있게 합니다. 어떤 속성은 움직이게 하는 것이 말이 되지 않으므로, 애니메이션 가능한 속성의 집합은 유한한 집합으로 제한됩니다.

+ +
노트: 애니메이션 가능한 속성의 집합은 변할 수 있습니다. 개발자는 주의해서 진행해야 합니다.
+ +

또한, 종종 auto 값은 매우 복잡한 경우입니다. 스펙은 그러한 어떤 값에서 시작하고 끝나도록 움직이도록 요구하지 않습니다. Gecko 기반의 유저 에이전트처럼 몇몇은 이 요구사항을 구현했고, WebKit 기반의 유저 에이전트 같은 다른 것들은 덜 엄격합니다. 애니메이션에 auto를 사용하면 이는 브라우저와 버전에 따라 예상하지 못한 결과를 초래할 수 있으며 피해야 합니다.

+ +

다수의 애니메이션이 적용된 속성 예제

+ +

HTML 내용

+ +
<body>
+    <p>아래 박스는 width, height, background-color, transform을 위한 트랜지션을 결합합니다. 박스 위에 마우스를 올려 속성들의 애니메이션을 보세요.</p>
+    <div class="box"></div>
+</body>
+ +

CSS 내용

+ +
.box {
+    border-style: solid;
+    border-width: 1px;
+    display: block;
+    width: 100px;
+    height: 100px;
+    background-color: #0000FF;
+    -webkit-transition:width 2s, height 2s, background-color 2s, -webkit-transform 2s;
+    transition:width 2s, height 2s, background-color 2s, transform 2s;
+}
+.box:hover {
+    background-color: #FFCCCC;
+    width:200px;
+    height:200px;
+    -webkit-transform:rotate(180deg);
+    transform:rotate(180deg);
+}
+
+
+ +

{{ EmbedLiveSample('%EB%8B%A4%EC%88%98%EC%9D%98_%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98%EC%9D%B4_%EC%A0%81%EC%9A%A9%EB%90%9C_%EC%86%8D%EC%84%B1_%EC%98%88%EC%A0%9C', '600', '300', '', 'Web/Guide/CSS/Using_CSS_transitions') }}

+ +

트랜지션 정의에 사용한 CSS 속성

+ +

CSS 트랜지션은 단축(shorthand) 속성 {{cssxref("transition")}}을 사용하여 제어합니다. 이것은 트랜지션을 설정하는 가장 좋은 방법입니다. 파라미터 목록의 길이가 싱크가 맞지 않는 것을 피하기가 더 쉬워지기 때문입니다. 싱크가 맞지 않으면 CSS를 디버그하는데 많은 시간을 들여야 해서 크게 좌절할 수 있습니다.

+ +

여러분은 아래의 서브 속성으로 트랜지션의 개별 컴포넌트를 제어할 수 있습니다:

+ +

(이 트랜지션은 단지 예제를 목적으로 계속해서 루프를 돕니다. 그리고 CSS transition들은 시작에서 종료까지 어떤 속성의 변화만을 시각화합니다. 그 루프를 시각화하려면 CSS animation 속성을 살펴보세요.)

+ +
+
{{ cssxref("transition-property") }}
+
트랜지션을 적용해야 하는 CSS 속성의 이름 혹은 이름들을 명시합니다. 여기에 나열한 속성만 트랜지션하는 동안 움직입니다. 또한, 다른 모든 속성에 대한 변화는 보통 때와 같이 즉시 일어납니다.
+
{{ cssxref("transition-duration") }}
+
트랜지션이 일어나는 지속 시간을 명시합니다. 트랜지션 동안 모든 속성에 적용하는 단일 지속 시간을 명시하거나, 다른 주기로 각 속성이 트랜지션하게 하는 여러 지속 시간을 명시할 수 있습니다. +
+
+

transition-duration: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:0.5s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transformv color;
+    transition-duration:0.5s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_0_5s",275,150)}}
+
+ +
+

transition-duration: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
+    -webkit-transition-duration:1s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:1s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_1s",275,150)}}
+
+ +
+

transition-duration: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:2s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_2s",275,150)}}
+
+ +
+

transition-duration: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    transform: rotate(270deg);
+    -webkit-transform: rotate(270deg);
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
+    -webkit-transition-duration:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top transform -webkit-transform color;
+    transition-duration:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("duration_4s",275,150)}}
+
+
+
+
{{ cssxref("transition-timing-function") }}
+
속성의 중간값을 계산하는 방법을 정의하는 함수를 명시합니다. Timing functions는 트랜지션의 중간값을 계산하는 방법을 결정합니다. 대부분의 타이밍 함수는 큐빅 베이지어(cubic bezier)를 정의하는 네 점에 의해 정의되므로 상응하는 함수의 그래프로 제공해서 명시할 수 있습니다. Easing Functions Cheat Sheet에서 이징(easing, 역자주: 시간에 따른 파라미터 값의 변화율을 명시하는 함수)을 선택할 수도 있습니다. +
+
+

transition-timing-function: ease

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: ease;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: ease;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_ease",275,150)}}
+
+ +
+

transition-timing-function: linear

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_linear",275,150)}}
+
+ +
+

transition-timing-function: step-end

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: step-end;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: step-end;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_stepend",275,150)}}
+
+ +
+

transition-timing-function: steps(4, end)

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-timing-function: steps(4, end);
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-timing-function: steps(4, end);
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("ttf_step4end",275,150)}}
+
+
+
+
{{ cssxref("transition-delay") }}
+
속성이 변한 시점과 트랜지션이 실제로 시작하는 사이에 기다리는 시간을 정의합니다. +
+
+

transition-delay: 0.5s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:0.5s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:0.5s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_0_5s",275,150)}}
+
+ +
+

transition-delay: 1s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+     -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:1s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:1s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_1s",275,150)}}
+
+ +
+

transition-delay: 2s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:2s;
+    -webkit-transition-timing-function: linear;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:2s;
+    transition-timing-function: linear;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_2s",275,150)}}
+
+ +
+

transition-delay: 4s

+ +
+ 
 <div class="parent">
+  <div class="box">Lorem</div>
+</div>
+
+ + 
.parent { width: 250px; height:125px;}
+.box {
+    width: 100px;
+    height: 100px;
+    background-color: red;
+    font-size: 20px;
+    left: 0px;
+    top: 0px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+.box1{
+    width: 50px;
+    height: 50px;
+    background-color: blue;
+    color: yellow;
+    font-size: 18px;
+    left: 150px;
+    top:25px;
+    position:absolute;
+    -webkit-transition-property: width height background-color font-size left top color;
+    -webkit-transition-duration:2s;
+    -webkit-transition-delay:4s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-property: width height background-color font-size left top color;
+    transition-duration:2s;
+    transition-delay:4s;
+    transition-timing-function: ease-in-out;
+}
+
+ + 
function updateTransition() {
+  var el = document.querySelector("div.box");
+
+  if (el) {
+    el.className = "box1";
+  } else {
+    el = document.querySelector("div.box1");
+    el.className = "box";
+  }
+
+  return el;
+}
+
+var intervalID = window.setInterval(updateTransition, 7000);
+
+
+ +
{{EmbedLiveSample("delay_4s",275,150)}}
+
+
+
+
+ +

다음과 같이 단축 CSS 문법을 사용합니다.

+ +
div {
+    transition: <property> <duration> <timing-function> <delay>;
+}
+ +

트랜지션 완료 감지하기

+ +

트랜지션을 완료하면 발생하는 단일 이벤트가 있습니다. 모든 표준을 따르는 브라우저에서 그 이벤트는 transitionend이며, WebKit에서는 webkitTransitionEnd입니다. 자세한 내용은 맨 아래의 호환성 테이블을 참고하세요. transitionend 이벤트는 두 속성을 제공합니다.

+ +
+
propertyName
+
트랜지션을 완료한 CSS 속성의 이름을 나타내는 문자열
+
elapsedTime
+
이벤트가 발생한 시점에 해당 트랜지션이 진행된 시간을 초로 나타내는 실수. 이 값은 {{ cssxref("transition-delay") }} 값에 영향을 받지 않습니다.
+
+ +

평소대로 {{ domxref("element.addEventListener()") }} 메소드를 사용하여 이 이벤트를 모니터링할 수 있습니다.

+ +
el.addEventListener("transitionend", updateTransition, true);
+
+ +
노트: 트랜지션을 중단하면 transitionend 이벤트는 발생하지 않습니다. 트랜지션을 완료하기 전에 애니메이션하고 있는 속성의 값이 바뀌기 때문입니다.
+ +

속성값 목록이 다른 개수를 가진 경우

+ +

어떤 속성의 값 목록이 다른 것보다 짧다면, 일치되도록 그 값을 반복합니다. 예를 들면,

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s;
+}
+
+ +

위는 아래와 같이 처리합니다.

+ +
div {
+  transition-property: opacity, left, top, height;
+  transition-duration: 3s, 5s, 3s, 5s;
+}
+ +

비슷하게, 어떤 속성의 값 목록이 {{ cssxref("transition-property") }} 목록보다 길다면, 그것은 끝을 잘라냅니다. 그래서, 아래의 CSS가 있다면,

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s, 2s, 1s;
+}
+ +

위를 아래와 같이 해석합니다.

+ +
div {
+  transition-property: opacity, left;
+  transition-duration: 3s, 5s;
+}
+ +

간단한 예제

+ +

이 예제는 사용자가 마우스를 해당 요소 위에 올려놓고 애니메이션 효과가 시작할 때까지 2초의 딜레이가 있는 4초짜리 폰트 크기 트랜지션을 수행합니다.

+ +
#delay1 {
+  position: relative;
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 14px;
+}
+
+#delay1:hover {
+  transition-property: font-size;
+  transition-duration: 4s;
+  transition-delay: 2s;
+  font-size: 36px;
+}
+
+ +

메뉴 하이라이팅에 트랜지션 사용

+ +

CSS의 흔한 사용은 사용자가 마우스 커서를 메뉴 위에 올려놓을 때 그 메뉴 아이템을 하이라이팅하는 것입니다. 트랜지션을 사용하여 효과를 훨씬 더 매력적으로 만들 수 있습니다.

+ +

코드 스니핏(snippets, 역자주: 재활용이 가능한 소스 조각)을 보기 전에, (여러분의 브라우저가 트랜지션을 지원한다고 가정하면) 라이브 데모를 보고 싶을지도 모르겠습니다. 그것이 사용한 CSS를 직접 볼 수도 있습니다.

+ +

우선 HTML을 사용하여 메뉴를 설정합니다.

+ +
<div class="sidebar">
+  <p><a class="menuButton" href="home">Home</a></p>
+  <p><a class="menuButton" href="about">About</a></p>
+  <p><a class="menuButton" href="contact">Contact Us</a></p>
+  <p><a class="menuButton" href="links">Links</a></p>
+</div>
+
+ +

그리고 우리 메뉴의 모습과 느낌(look and feel)을 CSS로 만듭니다. 관련 부분이 여기 있습니다.

+ +
.menuButton {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  text-align: left;
+  background-color: grey;
+  left: 5px;
+  top: 5px;
+  height: 26px;
+  color: white;
+  border-color: black;
+  font-family: sans-serif;
+  font-size: 20px;
+  text-decoration: none;
+  box-shadow: 2px 2px 1px black;
+  padding: 2px 4px;
+  border: solid 1px black;
+}
+
+.menuButton:hover {
+  position: relative;
+  transition-property: background-color, color;
+  transition-duration: 1s;
+  transition-timing-function: ease-out;
+  background-color:white;
+  color:black;
+  box-shadow: 2px 2px 1px black;
+}
+
+ +

이 CSS는 그 요소가 {{ cssxref(":hover") }} 상태일 때 배경과 텍스트 색상 모두를 변경하면서 메뉴의 모습을 설정합니다.

+ +

그 효과를 장황하게 설명하는 대신, 브라우저가 트랜지션을 지원한다면, 라이브 샘플을 살펴보세요.

+ +

트랜지션을 이용하여 JavaScript 기능 부드럽게 하기

+ +

트랜지션은 JavaScript 기능에 아무것도 하지 않고 훨씬 더 부드럽게 보이도록 하는 훌륭한 도구입니다. 아래 예제를 보세요.

+ +
<p>Click anywhere to move the ball</p>
+<div id="foo"></div>
+
+ +

JavaScript를 사용하여 공을 어떤 위치로 움직이는 효과가 일어나게 할 수 있습니다.

+ +
var f = document.getElementById('foo');
+document.addEventListener('click', function(ev){
+    f.style.left = (ev.clientX-25)+'px';
+    f.style.top = (ev.clientY-25)+'px';
+},false);
+
+ +

추가 노력 없이 CSS로 이것을 부드럽게 할 수 있습니다. 단순히 그 요소에 트랜지션을 추가하면 어떠한 변화도 부드럽게 일어날 것입니다.

+ +
p {
+  padding-left: 60px;
+}
+
+#foo {
+  border-radius: 50px;
+  width: 50px;
+  height: 50px;
+  background: #c00;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition:  all 1s;
+}
+
+ +

여기에서 확인할 수 있습니다. http://jsfiddle.net/RwtHn/5/

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Transitions', '', '') }}{{ Spec2('CSS3 Transitions') }}Initial specification.
+ +

같이 보기

+ +
 
+ + diff --git a/files/ko/web/css/css_types/index.html b/files/ko/web/css/css_types/index.html new file mode 100644 index 0000000000..a819349900 --- /dev/null +++ b/files/ko/web/css/css_types/index.html @@ -0,0 +1,100 @@ +--- +title: CSS 자료형 +slug: Web/CSS/CSS_Types +tags: + - CSS + - CSS Data Type + - Overview + - Reference + - 자료형 +translation_of: Web/CSS/CSS_Types +--- +
{{cssref}}
+ +

CSS 자료형은 CSS 속성과 함수가 받아들이는, 키워드와 단위를 포함한 일반적인 값을 정의합니다. 자료형은 Component value type의 특별한 종류입니다.

+ +

형식 구문에서 자료형을 나타낼 땐 부등호 "<"와 ">"로 감싸서 표기합니다.

+ +

참고서

+ +
+
    +
  • {{cssxref("<angle>")}}
    • +
  • {{cssxref("<angle-percentage>")}}
    • +
  • {{cssxref("<angular-color-hint>")}}
    • +
  • {{cssxref("<angular-color-stop>")}}
    • +
  • {{cssxref("<attr-fallback>")}}
    • +
  • {{cssxref("<attr-name>")}}
    • +
  • {{cssxref("<basic-shape>")}}
    • +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("<calc-product>")}}
    • +
  • {{cssxref("<calc-sum>")}}
    • +
  • {{cssxref("<calc-value>")}}
    • +
  • {{cssxref("<color>")}}
    • +
  • {{cssxref("<color-stop>")}}
    • +
  • {{cssxref("<color-stop-angle>")}}
    • +
  • {{cssxref("<counter-style>")}}
    • +
  • {{cssxref("<custom-ident>")}}
    • +
  • {{cssxref("<dimension>")}}
    • +
  • {{cssxref("<filter-function>")}}
    • +
  • {{cssxref("<flex>")}}
    • +
  • {{cssxref("<frequency>")}}
    • +
  • {{cssxref("<frequency-percentage>")}}
    • +
  • {{cssxref("<gradient>")}}
    • +
  • {{cssxref("<ident>")}}
    • +
  • {{cssxref("<image>")}}
    • +
  • {{cssxref("<integer>")}}
    • +
  • {{cssxref("<length>")}}
    • +
  • {{cssxref("<length-percentage>")}}
    • +
  • {{cssxref("<number>")}}
    • +
  • {{cssxref("<number-percentage>")}}
    • +
  • {{cssxref("<percentage>")}}
    • +
  • {{cssxref("<position>")}}
    • +
  • {{cssxref("<quote>")}}
    • +
  • {{cssxref("<ratio>")}}
    • +
  • {{cssxref("<resolution>")}}
    • +
  • {{cssxref("<shape-box>")}}
    • +
  • {{cssxref("<shape-radius>")}}
    • +
  • {{cssxref("<string>")}}
    • +
  • {{cssxref("<time>")}}
    • +
  • {{cssxref("<time-percentage>")}}
    • +
  • {{cssxref("<timing-function>")}}
    • +
  • {{cssxref("<toggle-value>")}}
    • +
  • {{cssxref("<transform-function>")}}
    • +
  • {{cssxref("<type-or-unit>")}}
    • +
  • {{cssxref("<url>")}}
    • +
  • {{cssxref("<url-modifier>")}}
    • +
  • {{cssxref("<zero>")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS4 Values') }}{{ Spec2('CSS4 Values') }}
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Initial definition.
+ +

같이 보기

+ + diff --git a/files/ko/web/css/css_variables/index.html b/files/ko/web/css/css_variables/index.html new file mode 100644 index 0000000000..56efa433e7 --- /dev/null +++ b/files/ko/web/css/css_variables/index.html @@ -0,0 +1,37 @@ +--- +title: CSS Custom Properties for Cascading Variables +slug: Web/CSS/CSS_Variables +translation_of: Web/CSS/CSS_Variables +--- +
{{cssref}}
+ +

CSS Custom Properties for Cascading Variables

+ +

캐스케이딩 변수를 위한 CSS 사용자지정 속성은, 반복적으로 사용가능한 사용자지정 속성을 만들 수 있게 해주는 모듈입니다.

+ +

CSS 속성

+ +
+
    +
  • {{cssxref("--*")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Variables")}}{{Spec2("CSS3 Variables")}}Initial definition
diff --git a/files/ko/web/css/css_writing_modes/index.html b/files/ko/web/css/css_writing_modes/index.html new file mode 100644 index 0000000000..a69bc088cc --- /dev/null +++ b/files/ko/web/css/css_writing_modes/index.html @@ -0,0 +1,57 @@ +--- +title: CSS Writing Modes +slug: Web/CSS/CSS_Writing_Modes +tags: + - CSS + - CSS Writing Modes + - Overview + - Reference +translation_of: Web/CSS/CSS_Writing_Modes +--- +
{{CSSRef}}
+ +

CSS Writing Modes는 다양한 국제 쓰기 모드를 정의하는 CSS 모듈입니다, 좌에서 우(가령 Latin 및 Indic 스크립트에 사용됨), 우에서 좌(가령 Hebrew 또는 Arabic 스크립티에 사용됨), 양방향(좌에서 우 및 우에서 좌 스크립트를 섞을 때 사용됨) 및 세로(가령 일부 Asian 스크립트에 사용됨) 등.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("direction")}}
    • +
  • {{cssxref("glyph-orientation-horizontal")}}
    • +
  • {{cssxref("text-combine-upright")}}
    • +
  • {{cssxref("text-orientation")}}
    • +
  • {{cssxref("unicode-bidi")}}
    • +
  • {{cssxref("writing-mode")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{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" new file mode 100644 index 0000000000..94d8ceabd6 --- /dev/null +++ "b/files/ko/web/css/css_\353\213\250\354\234\204\354\231\200_\352\260\222/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/cursor/index.html b/files/ko/web/css/cursor/index.html new file mode 100644 index 0000000000..113920f9ee --- /dev/null +++ b/files/ko/web/css/cursor/index.html @@ -0,0 +1,315 @@ +--- +title: cursor +slug: Web/CSS/cursor +tags: + - CSS + - CSS Property + - Reference + - Web +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}
+ +

CSS cursor 속성은 요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/cursor.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+cursor: pointer;
+cursor: auto;
+
+/* URL, 대체용 키워드 */
+cursor: url(hand.cur), pointer;
+
+/* URL과 좌표 및 대체 키워드
+crsor: url(cursor1.png) 4 12, auto;
+cursor: url(cursor2.png) 2 2, pointer;
+
+/* 전역 값 */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+
+ +

cursor 속성은 쉼표로 구분한 0개 이상의 {{anch("<url>")}}과, 필수로 지정해야 하는 키워드 값으로 이루어집니다. 각각의 <url>은 이미지 파일을 가리켜야 합니다. 브라우저는 첫 번째 이미지를 불러오려 시도하고, 실패했을 땐 다음 이미지를, 모두 실패하거나 지정한 이미지가 처음부터 없었다면 키워드 값을 사용합니다.

+ +

<url>은 공백으로 구분한 숫자 쌍을 받을 수 있습니다. 두 숫자는 이미지의 좌상단 모서리를 기준으로, 커서가 상호작용하는 부분의 x, y 좌표를 나타냅니다.

+ +

아래 예제는 <url> 값으로 이미지 두 개를 지정했고, 두 번째 이미지는 <x><y> 좌표도 설정했으며 모두 불러올 수 없으면 progress 키워드를 사용합니다.

+ +
cursor: url(one.svg), url(two.svg) 5 5, progress;
+ +

값

+ +
+
<url>
+
이미지 파일을 가리키는 url(…), 또는 쉼표로 구분한 url(…), url(…), … 목록. 일부 커서 이미지를 사용할 수 없을 때를 대비해 여러 이미지를 지정할 수 있습니다. 이미지를 사용할 경우 URL이 아닌 값(하나 이상의 키워드 값)을 목록의 맨 뒤에 붙여야 합니다. cursor 속성값으로 URL 사용하기를 참고하세요.
+
<x> <y> {{experimental_inline}}
+
xy 좌표. 32 미만의 {{cssxref("<number>")}}여야 합니다.
+
키워드 값
+
+

행 위로 마우스를 올리면 현재 브라우저에서 보이는 모습을 확인할 수 있습니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
카테고리CSS 값예제설명
일반auto사용자 에이전트가 현재 맥락에 맞춰 표시할 커서를 결정. 예를 들어 글씨 위에서는 text를 사용합니다.
defaultdefault.gif플랫폼에 따라 다른 기본 커서. 보통 화살표입니다.
none커서 없음.
링크와 상태context-menucontext-menu.png콘텍스트 메뉴 사용 가능.
helphelp.gif도움말 사용 가능.
pointerpointer.gif링크를 나타내는 포인터. 보통 한 쪽을 가리키는 손입니다.
progressprogress.gif프로그램이 백그라운드에서 작업 중이지만, 사용자가 인터페이스와 상호작용할 수 있음. (wait과 반대)
waitwait.gif프로그램이 작업 중이고, 사용자가 인터페이스와 상호작용할 수 없음. (progress와 반대) 간혹 모래시계나 시계모양 그림을 사용합니다.
선택cellcell.gif표의 칸이나 여러 칸을 선택할 수 있음.
crosshaircrosshair.gif십자 커서. 종종 비트맵 선택에 사용합니다.
texttext.gif글씨 선택 가능. 보통 I빔 모양입니다.
vertical-textvertical-text.gif세로쓰기 글씨 선택 가능. 보통 옆으로 누운 I빔 모양입니다.
드래그 앤 드롭aliasalias.gif별칭이나 바로가기를 만드는 중.
copycopy.gif복사하는 중.
movemove.gif움직이는 중.
no-dropno-drop.gif현재 위치에 놓을 수 없음.
+ {{bug("275173")}}: Windows와 Mac OS X에서 no-drop은 not-allowed와 같습니다.
not-allowednot-allowed.gif요청한 행동을 수행할 수 없음.
grabgrab.gif잡을 수 있음. (잡아서 이동)
grabbinggrabbing.gif잡고 있음. (잡아서 이동)
크기 조절과 스크롤all-scrollall-scroll.gif모든 방향으로 이동 가능. (패닝)
+ {{bug("275174")}}: Windows에서 all-scroll은 move와 같습니다.
col-resizecol-resize.gif항목/행의 크기를 좌우로 조절할 수 있음. 종종 좌우 화살표의 가운데를 세로로 분리한 모양을 사용합니다.
row-resizerow-resize.gif항목/열의 크기를 상하로 조절할 수 있음. 종종 상하 화살표의 가운데를 가로로 분리한 모양을 사용합니다.
n-resizeExample of a resize towards the top cursor움직일 수 있는 모서리. 예를 들어, se-resize 커서는 움직임이 사각형의 동남쪽에서 시작할 때 사용합니다. 어떤 환경에선 동일한 방향의 양방향 화살표를 대신 보여줍니다. 즉 n-resize와 s-resize는 ns-resize와 같습니다.
e-resizeExample of a resize towards the right cursor
s-resizeExample of a resize towards the bottom cursor
w-resizeExample of a resize towards the left cursor
ne-resizeExample of a resize towards the top-right corner cursor
nw-resizeExample of a resize towards the top-left corner cursor
se-resizeExample of a resize towards the bottom-right corner cursor
sw-resizeExample of a resize towards the bottom-left corner cursor
ew-resize3-resize.gif양방향 크기 조절 커서.
ns-resize6-resize.gif
nesw-resize1-resize.gif
nwse-resize4-resize.gif
확대와 축소zoom-inzoom-in.gif +

확대/축소할 수 있음.

+
zoom-outzoom-out.gif
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+
+ +

사용 일람

+ +

비록 명세에 cursor의 크기 제한은 정해져있지 않지만, 각각의 {{Glossary("user agent", "사용자 에이전트")}}가 별도로 최대 크기를 규정할 수도 있습니다. 이 때, 크기를 넘어가는 이미지를 사용할 경우, 보통 사용자 에이전트는 해당 이미지를 완전히 무시합니다.

+ +

{{anch("브라우저 호환성")}} 항목에서 커서 크기 제한을 찾아보세요.

+ +

예제

+ +
.foo {
+  cursor: crosshair;
+}
+
+.bar {
+  cursor: zoom-in;
+}
+
+/* URL을 쓸 땐 키워드 값 필수 */
+.baz {
+  cursor: url("hyper.cur"), auto;
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Addition of several keywords and the positioning syntax for url().
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +
{{Compat("css.properties.cursor")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html new file mode 100644 index 0000000000..416718c17f --- /dev/null +++ b/files/ko/web/css/cursor/using_url_values_for_the_cursor_property/index.html @@ -0,0 +1,70 @@ +--- +title: cursor 속성값에 URL 사용 +slug: Web/CSS/cursor/Using_URL_values_for_the_cursor_property +tags: + - CSS + - CSS_2.1 + - Cross-browser_Development + - Web Development +translation_of: Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property +--- +

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/descendant_combinator/index.html b/files/ko/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..2d351f2c8e --- /dev/null +++ b/files/ko/web/css/descendant_combinator/index.html @@ -0,0 +1,108 @@ +--- +title: 자손 결합자 +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

보통 한 칸의 공백 문자로 표현하는 자손 결합자( )는 두 개의 선택자를 조합하여, 뒤쪽 선택자 요소의 조상(부모, 부모의 부모, 부모의 부모의 부모...)에 앞쪽 선택자 요소가 존재할 경우 선택합니다. 자손 결합자를 활용하는 선택자를 자손 선택자라고 부릅니다.

+ +
/* List items that are descendants of the "my-things" list */
+ul.my-things li {
+  margin: 2em;
+}
+ +

기술적으로, 자손 결합자는 하나 이상의 {{Glossary("CSS")}} 공백 문자이므로 스페이스 외에도 캐리지 리턴, 폼 피드, 새 줄, 탭 문자도 해당합니다. 또한 결합자를 구성하는 공백 문자는 CSS 주석을 임의의 개수만큼 포함할 수 있습니다.

+ +

구문

+ +
selector1 selector2 {
+  /* property declarations */
+}
+ +

예제

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

HTML

+ +
<ul>
+  <li>
+    <div>Item 1</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+  <li>
+    <div>Item 2</div>
+    <ul>
+      <li>Subitem A</li>
+      <li>Subitem B</li>
+    </ul>
+  </li>
+</ul>
+
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", 160)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}{{Spec2("CSS1")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/display-internal/index.html b/files/ko/web/css/display-internal/index.html new file mode 100644 index 0000000000..8aea8a152b --- /dev/null +++ b/files/ko/web/css/display-internal/index.html @@ -0,0 +1,131 @@ +--- +title: +slug: Web/CSS/display-internal +tags: + - CSS + - CSS 데이터 타입 + - CSS 디스플레이 + - display-internal + - 자료형 + - 참조 +translation_of: Web/CSS/display-internal +--- +
{{CSSRef}}
+ +

table과 ruby 같은 몇몇 레이아웃 모델은 복잡한 내부 구조를 가지고 있으며, 자식이나 자손들로 채울 수 있는 다양한 역할을 가지고 있습니다. 이 페이지는 이러한 "내재적인" 디스플레이 값을 정의하며, 이들은 특정 레이아웃 모드 안에서만 의미를 가집니다.

+ +

문법

+ +

유효한 <display-internal> 값들:

+ +
+
table-row-group
+
이 요소는 {{HTMLElement("tbody")}} HTML 요소처럼 동작합니다.
+
table-header-group
+
이 요소는 {{HTMLElement("thead")}} HTML 요소처럼 동작합니다.
+
table-footer-group
+
이 요소는 {{HTMLElement("tfoot")}} HTML 요소처럼 동작합니다.
+
table-row
+
이 요소는 {{HTMLElement("tr")}} HTML 요소처럼 동작합니다.
+
table-cell
+
이 요소는 {{HTMLElement("td")}} HTML 요소처럼 동작합니다.
+
table-column-group
+
이 요소는 {{HTMLElement("colgroup")}} HTML 요소처럼 동작합니다.
+
table-column
+
이 요소는 {{HTMLElement("col")}} HTML 요소처럼 동작합니다.
+
table-caption
+
이 요소는 {{HTMLElement("caption")}} HTML 요소처럼 동작합니다.
+
ruby-base {{Experimental_Inline}}
+
이 요소는 {{HTMLElement("rb")}} HTML 요소처럼 동작합니다.
+
ruby-text {{Experimental_Inline}}
+
이 요소는 {{HTMLElement("rt")}} HTML 요소처럼 동작합니다.
+
ruby-base-container {{Experimental_Inline}}
+
이 요소는 익명의 박스로 만들어지는 {{HTMLElement("rbc")}} HTML 요소처럼 동작합니다.
+
ruby-text-container {{Experimental_Inline}}
+
이 요소는 {{HTMLElement("rtc")}} HTML 요소처럼 동작합니다.
+
+ +

예제

+ +

CSS 테이블의 예시

+ +

다음 예시에서는 CSS 테이블 레이아웃을 이용해 간단한 폼을 배치합니다.

+ +

HTML

+ +
<main>
+  <div>
+    <label for="name">Name</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Age</label>
+    <input type="text" id="age" name="age">
+  </div>
+</main>
+ +

CSS

+ +
main {
+  display: table;
+}
+
+div {
+  display: table-row;
+}
+
+label, input {
+  display: table-cell;
+  margin: 5px;
+}
+ +

결과

+ +

{{EmbedLiveSample('CSS_tables_example', '100%', 100)}}

+ +

사양

+ + + + + + + + + + + + + + +
사양상태
{{SpecName('CSS3 Display', '#typedef-display-internal', 'display-internal')}}{{Spec2('CSS3 Display')}}
+ +

브라우저 호환성

+ + + +

Table 관련 값의 지원

+ +

table, table-cell, table-column, table-column-group, table-footer-group, table-header-group, table-row, table-row-group

+ +

{{Compat("css.properties.display.table_values", 10)}}

+ +

Ruby 관련 값의 지원

+ +

ruby, ruby-base, ruby-base-container, ruby-text, ruby-text-container

+ +

{{Compat("css.properties.display.ruby_values", 10)}}

+ +

같이 보기

+ +
    +
  • {{CSSxRef("display")}} +
      +
    • {{CSSxRef("<display-outside>")}}
      • +
    • {{CSSxRef("<display-inside>")}}
      • +
    • {{CSSxRef("<display-listitem>")}}
      • +
    • {{CSSxRef("<display-box>")}}
      • +
    • {{CSSxRef("<display-legacy>")}}
      • +
    +
    • +
diff --git a/files/ko/web/css/display/index.html b/files/ko/web/css/display/index.html new file mode 100644 index 0000000000..559a1bf4a2 --- /dev/null +++ b/files/ko/web/css/display/index.html @@ -0,0 +1,234 @@ +--- +title: display +slug: Web/CSS/display +tags: + - CSS + - CSS Display + - CSS Property + - Reference + - display +translation_of: Web/CSS/display +--- +
{{CSSRef}}
+ +

display CSS 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.

+ +

display 속성은, 형식적으로는 요소의 내부와 외부 디스플레이 유형을 설정합니다. 외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타내고, 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정합니다. display의 일부 값은 자신만의 명세를 가지고 있습니다. 이 문서의 끝에서 찾을 수 있는 명세표를 참고하세요.

+ +

구문

+ +

display 속성은 키워드 값을 사용해 지정합니다. 키워드는 6개의 카테고리로 분류할 수 있습니다.

+ +
.container {
+  display: <display-keyword>;
+}
+
+ +

바깥쪽

+ +
+
{{CSSxRef("<display-outside>")}}
+
요소의 외부 디스플레이 유형을 설정하는 키워드입니다. 외부 디스플레이 유형은 플로우 레이아웃에서 요소 자신의 역할과 마찬가지입니다.
+
+ +

{{page("/ko/docs/Web/CSS/display-outside", "Syntax")}}

+ +

안쪽

+ +
+
{{CSSxRef("<display-inside>")}}
+
요소의 내부 디스플레이 유형을 설정하는 키워드입니다. 내부 디스플레이 유형은 대체 요소가 아닌 요소의 콘텐츠 서식과 배치 방법을 나타냅니다.
+
+ +

{{page("/ko/docs/Web/CSS/display-inside", "Syntax")}}

+ +

리스트 아이템

+ +
+
{{cssxref("<display-listitem>")}}
+
요소가 콘텐츠 블록 박스를 생성하고, 리스트 아이템 인라인 박스를 분리합니다.
+
+ +

{{page("/ko/docs/Web/CSS/display-listitem", "Syntax")}}

+ +

내부적

+ +
+
{{cssxref("<display-internal>")}}
+
table, ruby 등 일부 레이아웃 모델은 복잡한 내부 구조를 가지며, 자식과 자손이 채워넣을 여러가지 역할을 지닙니다. 이 항목은 그런 특정 레이아웃 모드에서만 의미를 갖는 "내부적"인 값을 정의합니다.
+
+ +

{{page("/ko/docs/Web/CSS/display-internal", "Syntax")}}

+ +

박스

+ +
+
{{CSSxRef("<display-box>")}}
+
요소의 디스플레이 박스를 생성해야 하는지 지정합니다.
+
+ +

{{page("/ko/docs/Web/CSS/display-box", "Syntax")}}

+ +

레거시

+ +
+
{{CSSxRef("<display-legacy>")}}
+
CSS 2는 display 속성에 단일 키워드만 사용했으므로, 같은 레이아웃 모드를 위해 블록 레벨과 인라인 레벨 키워드를 각각 필요로 했습니다.
+
+ +

{{page("/ko/docs/Web/CSS/display-legacy", "Syntax")}}

+ +

The Level 3 specification details two values for the display property — enabling the specification of the outer and inner display type explicitly — but this is not yet well-supported by browsers.

+ +

The display-legacy methods allow the same results with single keyword values, and should be favoured by developers until the two keyword values are better supported. For example, using two values you might specify an inline flex container as follows:

+ +
.container {
+  display: inline flex;
+}
+ +

This can currently be specified using a single value.

+ +
.container {
+  display: inline-flex;
+}
+
+ +

전역

+ +
display: inherit;
+display: initial;
+display: unset;
+
+ +

안내서 및 예제

+ +

The individual pages for the different types of value that display can have set on it feature multiple examples of those values in action — see the {{anch("Syntax")}} section. In addition, see the following material, which covers the various values of display in depth.

+ +

CSS Flow Layout (display: block, display: inline)

+ + + +

display: flex

+ + + +

display: grid

+ + + +

접근성 고려사항

+ +

display: none

+ +

Using a display value of none on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

+ +

If you want to visually hide the element, a more accessible alternative is to use a combination of properties to remove it visually from the screen but keep it parseable by assistive technology such as screen readers.

+ +

display: contents

+ +

Current implementations in most browsers will remove from the accessibility tree any element with a display value of contents (but descendants will remain). This will cause the element itself to no longer be announced by screen reading technology. This is incorrect behavior according to the CSS specification.

+ + + +

Tables

+ +

Changing the display value of a {{HTMLElement("table")}} element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Display', '#the-display-properties', 'display')}}{{Spec2('CSS3 Display')}}Added run-in, flow, flow-root, contents, and multi-keyword values.
{{SpecName('CSS3 Ruby', '#ruby-display', 'display')}}{{Spec2('CSS3 Ruby')}}Added ruby, ruby-base, ruby-text, ruby-base-container, and ruby-text-container.
{{SpecName('CSS3 Grid', '#grid-containers', 'display')}}{{Spec2('CSS3 Grid')}}Added the grid box model values.
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Added the flexible box model values.
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Added the table model values and inline-block.
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}Initial definition. Basic values: none, block, inline, and list-item.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.display", 10)}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/filter-function/blur()/index.html b/files/ko/web/css/filter-function/blur()/index.html new file mode 100644 index 0000000000..e995c42c68 --- /dev/null +++ b/files/ko/web/css/filter-function/blur()/index.html @@ -0,0 +1,40 @@ +--- +title: blur() +slug: Web/CSS/filter-function/blur() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/blur() +--- +
{{cssref}}
+ +

blur() CSS 함수는 주어진 이미지에 가우시안 블러를 적용합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-blur.html")}}
+ + + +

구문

+ +
blur(radius)
+ +

매개변수

+ +
+
radius
+
{{cssxref("<length>")}}로 지정한 블러 효과의 지름. 가우시안 함수의 표준 편차, 즉 화면에 보이는 픽셀의 색상이 어느 범위까지 섞일지를 지정합니다. 따라서 큰 값은 이미지를 더 흐리게 만듭니다. 0은 주어진 입력 결과를 그대로 반환합니다. 보간 시, 누락 값은 0입니다.
+
+ +

예제

+ +
blur(0)        /* 변화 없음 */
+blur(8px)      /* 8px 블러 */
+blur(1.17rem)  /* 1.17rem 블러 */
+ +

같이 보기

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/ko/web/css/filter-function/brightness()/index.html b/files/ko/web/css/filter-function/brightness()/index.html new file mode 100644 index 0000000000..1fe4b03327 --- /dev/null +++ b/files/ko/web/css/filter-function/brightness()/index.html @@ -0,0 +1,41 @@ +--- +title: brightness() +slug: Web/CSS/filter-function/brightness() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/brightness() +--- +
{{cssref}}
+ +

brightness() CSS 함수는 주어진 이미지에 선형 계수를 적용해 더 밝거나 어둡게 만듭니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-brightness.html")}}
+ + + +

구문

+ +
brightness(amount)
+ +

매개변수

+ +
+
amount
+
{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 밝기. 100% 미만의 값은 이미지를 어둡게 만들고, 100%를 초과하는 값은 밝게 합니다. 0%는 이미지를 완전한 검은색으로 바꾸고 100%는 주어진 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
+
+ +

예제

+ +
brightness(0%)   /* 완전한 검정 */
+brightness(0.4)  /* 40% 밝기 */
+brightness(1)    /* 변화 없음 */
+brightness(200%) /* 두 배 밝기 */
+ +

같이 보기

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/ko/web/css/filter-function/contrast()/index.html b/files/ko/web/css/filter-function/contrast()/index.html new file mode 100644 index 0000000000..19828a4bbb --- /dev/null +++ b/files/ko/web/css/filter-function/contrast()/index.html @@ -0,0 +1,41 @@ +--- +title: contrast() +slug: Web/CSS/filter-function/contrast() +tags: + - CSS + - CSS Function + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function/contrast() +--- +
{{cssref}}
+ +

contrast() CSS 함수는 주어진 이미지의 대비를 조절합니다. 반환 값은 {{cssxref("<filter-function>")}}입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-contrast.html")}}
+ + + +

구문

+ +
contrast(amount)
+ +

매개변수

+ +
+
amount
+
{{cssxref("<number>")}} 또는 {{cssxref("<percentage>")}}로 지정한, 결과물의 대비. 100% 미만의 값은 이미지의 대비를 낮추고, 100%를 초과하는 값은 높입니다. 0%는 이미지를 완전히 회색으로 바꾸고 100%는 입력 이미지를 그대로 반환합니다. 보간 시, 누락 값은 1입니다.
+
+ +

예제

+ +
contrast(0)     /* 완전히 회색 */
+contrast(65%)   /* 대비 65% */
+contrast(1)     /* 변화 없음 */
+contrast(200%)  /* 대비 두 배 */
+ +

같이 보기

+ +
    +
  • {{cssxref("<filter-function>")}}
    • +
diff --git a/files/ko/web/css/filter-function/index.html b/files/ko/web/css/filter-function/index.html new file mode 100644 index 0000000000..ee62fc49f6 --- /dev/null +++ b/files/ko/web/css/filter-function/index.html @@ -0,0 +1,210 @@ +--- +title: +slug: Web/CSS/filter-function +tags: + - CSS + - CSS Data Type + - Filter Effects + - Reference +translation_of: Web/CSS/filter-function +--- +
{{cssref}}
+ +

CSS <filter-function> 자료형은 입력 이미지의 모습을 변형할 수 있는 그래픽 효과를 나타냅니다. {{cssxref("filter")}}와 {{cssxref("backdrop-filter")}} 속성에서 사용합니다.

+ +

구문

+ +

<filter-function> 자료형은 다음 목록의 필터 중 하나를 사용해 지정할 수 있습니다. 각 함수는 매개변수를 받아야 하며, 유효하지 않은 값을 전달하면 필터를 적용하지 않습니다.

+ +
+
{{cssxref("filter-function/blur", "blur()")}}
+
이미지를 흐리게 만듭니다.
+
{{cssxref("filter-function/brightness", "brightness()")}}
+
이미지의 밝기를 조절합니다.
+
{{cssxref("filter-function/contrast", "contrast()")}}
+
이미지의 대비를 조절합니다.
+
{{cssxref("filter-function/drop-shadow", "drop-shadow()")}}
+
이미지의 뒤에 그림자를 적용합니다.
+
{{cssxref("filter-function/grayscale", "grayscale()")}}
+
이미지를 흑백으로 변환합니다.
+
{{cssxref("filter-function/hue-rotate", "hue-rotate()")}}
+
이미지의 전체 색조를 조절합니다.
+
{{cssxref("filter-function/invert", "invert()")}}
+
이미지의 색을 반전합니다.
+
{{cssxref("filter-function/opacity", "opacity()")}}
+
이미지의 투명도를 조절합니다.
+
{{cssxref("filter-function/saturate", "saturate()")}}
+
이미지의 채도를 조절합니다.
+
{{cssxref("filter-function/sepia", "sepia()")}}
+
이미지에 세피아 톤을 적용합니다.
+
+ +

예제

+ +

필터 함수 비교

+ +

이 예제는 간단한 그래픽과 함께 여러 가지 필터를 선택할 수 있는 선택 메뉴와, 필터의 값을 조절할 수 있는 슬라이더를 제공합니다. 컨트롤을 조절하면 필터가 실시간으로 변화하므로 각 필터의 효과를 편리하게 알아볼 수 있습니다.

+ +

HTML

+ +
<div></div>
+<ul>
+  <li>
+    <label for="filter-select">필터 함수 선택:</label>
+    <select id="filter-select">
+      <option selected>blur</option>
+      <option>brightness</option>
+      <option>contrast</option>
+      <option>drop-shadow</option>
+      <option>grayscale</option>
+      <option>hue-rotate</option>
+      <option>invert</option>
+      <option>opacity</option>
+      <option>saturate</option>
+      <option>sepia</option>
+    </select>
+  </li>
+  <li>
+    <input type="range"><output></output>
+  </li>
+  <li>
+    <p>Current value: <code></code></p>
+  </li>
+</ul>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png) no-repeat center;
+}
+
+li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+input {
+  width: 60%
+}
+
+output {
+  width: 5%;
+  text-align: center;
+}
+
+select {
+  width: 40%;
+  margin-left: 2px;
+}
+ +

JavaScript

+ +
const selectElem = document.querySelector('select');
+const divElem = document.querySelector('div');
+const slider = document.querySelector('input');
+const output = document.querySelector('output');
+const curValue = document.querySelector('p code');
+
+selectElem.addEventListener('change', () => {
+  setSlider(selectElem.value);
+  setDiv(selectElem.value);
+});
+
+slider.addEventListener('input', () => {
+  setDiv(selectElem.value);
+});
+
+function setSlider(filter) {
+  if(filter === 'blur') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 30;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'px');
+  } else if(filter === 'brightness' || filter === 'contrast' || filter === 'saturate') {
+    slider.value = 1;
+    slider.min = 0;
+    slider.max = 4;
+    slider.step = 0.05;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'drop-shadow') {
+    slider.value = 0;
+    slider.min = -20;
+    slider.max = 40;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'px');
+  } else if(filter === 'opacity') {
+    slider.value = 1;
+    slider.min = 0;
+    slider.max = 1;
+    slider.step = 0.01;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'grayscale' || filter === 'invert' || filter === 'sepia') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 1;
+    slider.step = 0.01;
+    slider.setAttribute('data-unit', '');
+  } else if(filter === 'hue-rotate') {
+    slider.value = 0;
+    slider.min = 0;
+    slider.max = 360;
+    slider.step = 1;
+    slider.setAttribute('data-unit', 'deg');
+  }
+}
+
+function setDiv(filter) {
+  if(filter === 'drop-shadow') {
+    divElem.style.filter = `${selectElem.value}(${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(slider.value)}${slider.getAttribute('data-unit')} ${Math.round(Math.abs(slider.value/2))}${slider.getAttribute('data-unit')})`;
+  } else {
+    divElem.style.filter = `${selectElem.value}(${slider.value}${slider.getAttribute('data-unit')}`;
+  }
+
+  updateOutput();
+  updateCurValue();
+}
+
+function updateOutput() {
+  output.textContent = slider.value;
+}
+
+function updateCurValue() {
+  curValue.textContent = `필터: ${divElem.style.filter}`;
+}
+
+setSlider(selectElem.value);
+setDiv(selectElem.value);
+ +

결과

+ +

{{EmbedLiveSample('필터_함수_비교', '100%', 500)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComments
{{ SpecName('Filters 1.0', '#typedef-filter-function', '<filter-function>') }}{{ Spec2('Filters 1.0') }}Initial definition.
+ +

같이 보기

+ +
    +
  • 자료형을 사용하는 속성: {{cssxref("filter")}}, {{cssxref("backdrop-filter")}}
    • +
diff --git a/files/ko/web/css/filter/index.html b/files/ko/web/css/filter/index.html new file mode 100644 index 0000000000..8020311f12 --- /dev/null +++ b/files/ko/web/css/filter/index.html @@ -0,0 +1,1138 @@ +--- +title: filter +slug: Web/CSS/filter +tags: + - CSS + - CSS Property + - Reference + - SVG + - SVG Filter + - 'recipe:css-property' +translation_of: Web/CSS/filter +--- +
{{CSSRef}}
+ +

CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.

+ +

CSS 표준은 미리 정의된 효과를 내는 몇 가지 함수를 포함하고 있습니다. SVG 필터 요소를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/filter.html")}}
+ + + +

구문

+ +
/* SVG 필터를 가리키는 URL */
+filter: url("filters.svg#filter-id");
+
+/* <filter-function> 값 */
+filter: blur(5px);
+filter: brightness(0.4);
+filter: contrast(200%);
+filter: drop-shadow(16px 16px 20px blue);
+filter: grayscale(50%);
+filter: hue-rotate(90deg);
+filter: invert(75%);
+filter: opacity(25%);
+filter: saturate(30%);
+filter: sepia(60%);
+
+/* 다중 값 */
+filter: contrast(175%) brightness(3%);
+
+/* 필터 없음 */
+filter: none;
+
+/* 전역 값 */
+filter: inherit;
+filter: initial;
+filter: unset;
+ +

함수를 사용하려면 다음 구문을 사용하세요.

+ +
filter: <filter-function> [<filter-function>]* | none
+
+ +

SVG {{SVGElement("filter")}} 요소에 대한 참조를 사용하려면 다음 구문을 사용하세요.

+ +
filter: url(svg-url#element-id)
+
+ +

보간

+ +

보간의 처음과 끝 필터의 함수 목록 길이가 같고, 그 안에 {{cssxref("<url>")}} 값이 없으면, 각 필터 함수는 스스로의 특정 규칙을 따라 보간됩니다. 함수의 길이가 서로 다를 때는 긴 필터 목록에만 존재하는 필터를 짧은 필터 목록에 추가하며, 이 때 추가된 필터의 값으로는 누락 값(누락 시의 기본값)을 사용합니다. 이후 각 필터 함수는 서로 동일한 길이일 때와 같은 방식으로 보간합니다. 만약 한쪽의 필터가 none일 경우 다른 쪽 필터 목록을 모두 가져오고, 각각에 누락 값을 대입한 후 보간합니다. 이 외의 경우에는 이산적 보간을 사용합니다.

+ +

함수

+ +

filter 속성은 none 또는 아래의 함수를 하나 이상 사용해 지정할 수 있습니다. 어떤 함수의 매개변수가 유효하지 않다면, 그 함수는 none을 반환합니다. 따로 명시하지 않으면 백분율 값(34% 등)을 받는 함수는 그 백분율의 소수 표기(0.34 등)도 받을 수 있습니다.

+ +

SVG 필터

+ +

url()

+ +

SVG 필터를 가리키는 URI를 받습니다. 외부 XML 파일에 포함된 필터도 가능합니다.

+ +
filter: url(resources.svg#c1)
+ +

필터 함수

+ +

blur()

+ +

{{cssxref("filter-function/blur", "blur()")}} 함수는 주어진 이미지에 가우시안 블러를 적용합니다. radius 값은 정규 분포의 표준 편차, 즉 화면에서 혼합할 픽셀의 수를 지정하므로 값이 클수록 이미지가 흐려집니다. 보간 시 누락값은 0입니다. 매개변수는 CSS 길이로 명시되어 있지만 백분율 값은 받지 않습니다.

+ +
filter: blur(5px)
+
+ + + +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>
+ +

{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}

+ +

brightness()

+ +

{{cssxref("filter-function/brightness", "brightness()")}} 함수는 주어진 이미지에 선형 배수를 적용하여 이미지를 밝거나 어둡게 표시합니다. 0%일 경우 완전히 검은색 이미지가 되고, 100%일 경우 이미지가 그대로 유지되며, 이외의 값은 효과의 선형 배수로 작용합니다. 100%보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성됩니다. 보간 시 누락값은 1입니다.

+ +
filter: brightness(0.5)
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="brightness">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]"/>
+      <feFuncG type="linear" slope="[amount]"/>
+      <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}

+ +

contrast()

+ +

{{cssxref("filter-function/constrast", "constrast()")}} 함수는 주어진 이미지의 대비를 조정합니다. 0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다. 100%보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성됩니다. 보간 시 누락값은 1입니다.

+ +
filter: contrast(200%)
+
+ +
<svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}

+ +

drop-shadow()

+ +

{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 함수는 주어진 이미지에 그림자 효과를 적용합니다. 이때 추가하는 그림자는, 주어진 이미지의 알파 마스크에 특정한 색상과 오프셋, 흐림 효과를 적용하고 이미지 밑에 합성한 것입니다. 이 함수는 inset 키워드를 제외하고 (CSS3 Backgrounds에 정의된) <shadow> 자료형의 매개변수를 그대로 받을 수 있습니다. drop-shadow()는 보다 확립된 {{cssxref("box-shadow")}} 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다. <shadow> 값의 매개변수는 다음과 같습니다.

+ +
+
<offset-x> <offset-y> (필수)
+
그림자 오프셋을 설정하는 두 {{cssxref("<length>")}} 값입니다. <offset-x>는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치됩니다. <offset-y>는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치됩니다. 가능한 단위는 {{cssxref("<length>")}}를 참조하세요.
+ 두 값이 모두 0이면 그림자가 요소 바로 밑에 배치되며, <blur-radius>나 <spread-radius>를 설정한 경우 흐림 효과를 표시할 수 있습니다.
+
<blur-radius> (선택)
+
세 번째 {{cssxref("<length>")}} 값입니다. 클수록 흐려지는 반경이 커지고 그림자가 옅어집니다. 음수 값은 사용할 수 없습니다. 값을 지정하지 않으면 0으로 취급하여 그림자 가장자리가 날카로워집니다.
+
<color> (선택)
+
가능한 키워드 및 표기법은 {{cssxref("<color>")}}를 참조하세요. 값을 지정하지 않았을 때의 색상은 브라우저에 따라 다릅니다. 보통 {{cssxref("<color>")}} 속성의 값을 사용하지만, 현재 사파리는 투명한 그림자를 그리는 것을 주의하세요.
+
+ +
filter: drop-shadow(16px 16px 10px black)
+ +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+ + + +

{{EmbedLiveSample('shadow_example','100%','300px','','','no-codepen')}}

+ +

grayscale()

+ +

{{cssxref("filter-function/grayscale", "grayscale()")}} 함수는 주어진 이미지를 흑백으로 변환합니다. amount 값은 흑백으로 전환하는 비율을 지정합니다. 100%일 경우 완전히 흑백 이미지가 되고, 0%일 경우 이미지가 그대로 유지되며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 0입니다.

+ +
filter: grayscale(100%)
+ + + +

{{EmbedLiveSample('grayscale_example','100%','209px','','','no-codepen')}}

+ +

hue-rotate()

+ +

{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 함수는 주어진 이미지에 색조 회전을 적용합니다. angle 값은 입력 샘플을 조절할 색상환 각도입니다. 0deg일 경우 이미지가 그대로 유지됩니다. 보간 시 누락 값은 0입니다. 최댓값이 존재하지는 않지만, 360deg 이상의 값은 0deg와 360deg 사이를 순환합니다.

+ +
filter: hue-rotate(90deg)
+ + + +
<svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgHueRotate" >
+    <feColorMatrix type="hueRotate" values="[angle]" />
+  <filter />
+</svg>
+ +

{{EmbedLiveSample('huerotate_example','100%','221px','','','no-codepen')}}

+ +

invert()

+ +

{{cssxref("filter-function/invert", "invert()")}} 함수는 주어진 이미지의 색을 반전합니다. amount 값이 변형 정도를 지정합니다. 100%일 경우 색을 정반대로 바꾸고, 0%일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 0입니다.

+ +
filter: invert(100%)
+ + + +

{{EmbedLiveSample('invert_example','100%','407px','','','no-codepen')}}

+ +

opacity()

+ +

{{cssxref("filter-function/opacity", "opacity()")}} 함수는 주어진 이미지의 불투명도를 설정합니다. amount 값이 변형 정도를 지정합니다. 0%일 경우 완전히 투명해지고, 100%일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 즉 주어진 이미지 샘플을 amount와 곱하는 것과 같습니다. 보간 시 누락 값은 1입니다. 이 함수는 보다 확립된 {{cssxref("opacity")}} 속성과 비슷하지만, 일부 브라우저에서는 필터를 사용했을 때 성능 향상을 위해 하드웨어 가속을 사용한다는 차이점이 있습니다.

+ +
filter: opacity(50%)
+ + + +

{{EmbedLiveSample('opacity_example','100%','210px','','','no-codepen')}}

+ +

saturate()

+ +

{{cssxref("filter-function/saturate", "saturate()")}} 함수는 주어진 이미지의 채도를 변경합니다. amount 값이 변형 정도를 지정합니다. 0%일 경우 완전히 무채색이 되고, 100%일 경우 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 100%보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성합니다. 보간 시 누락 값은 1입니다.

+ +
filter: saturate(200%)
+ + + +

{{EmbedLiveSample('saturate_example','100%','332px','','','no-codepen')}}

+ +

sepia()

+ +

{{cssxref("filter-function/sepia", "sepia()")}} 함수는 주어진 이미지를 세피아로 변환합니다. amount 값이 변형 정도를 지정합니다. 100%일 경우 완전히 세피아가 되고, 0%에서는 이미지를 그대로 유지하며, 그 사이의 값은 효과의 선형 배수로 작용합니다. 보간 시 누락 값은 0입니다.

+ +
filter: sepia(100%)
+ + + +

{{EmbedLiveSample('sepia_example','100%','229px','','','no-codepen')}}

+ +

함수 조합

+ +

원하는 만큼 함수를 조합해서 그려지는 모습을 바꿀 수 있습니다. 다음 에제는 이미지의 대비와 밝기를 동시에 높입니다.

+ +
filter: contrast(175%) brightness(103%)
+ + + +

{{EmbedLiveSample('combination_example','100%','209px','','','no-codepen')}}

+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

필터 함수 적용하기

+ +

미리 정의된 함수는 다음 예제처럼 사용할 수 있습니다. 각 함수 문서에서 더 자세한 내용을 살펴보세요.

+ +
.mydiv {
+  filter: grayscale(50%);
+}
+
+/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */
+img {
+  filter: grayscale(0.5) blur(10px);
+}
+ +

SVG 필터 적용하기

+ +

URL 함수와 SVG 리소스를 사용하는 방법은 다음과 같습니다.

+ +
.target {
+  filter: url(#c1);
+}
+
+.mydiv {
+  filter: url(commonfilters.xml#large-blur);
+}
+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태비고
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}초기 정의
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.filter")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/filter_effects/index.html b/files/ko/web/css/filter_effects/index.html new file mode 100644 index 0000000000..dfd022f08e --- /dev/null +++ b/files/ko/web/css/filter_effects/index.html @@ -0,0 +1,70 @@ +--- +title: Filter Effects +slug: Web/CSS/Filter_Effects +tags: + - CSS + - Filter Effects + - Guide + - Overview + - Reference +translation_of: Web/CSS/Filter_Effects +--- +
{{CSSRef}}
+ +

Filter Effects는 요소의 렌더링을 문서에 표시하기 전에 전처리하는 방법을 정의하는 CSS 모듈입니다.

+ +

참고서

+ +

속성

+ +
+
    +
  • {{cssxref("backdrop-filter")}}
    • +
  • {{cssxref("filter")}}
    • +
+
+ +

자료형

+ +
+
    +
  • {{cssxref("<filter-function>")}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Initial definition.
+ +

브라우저 호환성

+ +

backdrop-filter 속성

+ +
+ + +

{{Compat("css.properties.backdrop-filter")}}

+ +

filter 속성

+ +
+ + +

{{Compat("css.properties.filter")}}

+
+
diff --git a/files/ko/web/css/flex-basis/index.html b/files/ko/web/css/flex-basis/index.html new file mode 100644 index 0000000000..6e162086ad --- /dev/null +++ b/files/ko/web/css/flex-basis/index.html @@ -0,0 +1,209 @@ +--- +title: flex-basis +slug: Web/CSS/flex-basis +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-basis +--- +
{{CSSRef}}
+ +

flex-basis CSS 속성은 플렉스 아이템의 초기 크기를 지정합니다. {{cssxref("box-sizing")}}을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경합니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-basis.html")}}
+ + + +
+

참고: auto 값을 가지지 않은 flex-basis와 {{cssxref("width")}}({{cssxref("flex-direction")}}: column인 경우 {{cssxref("height")}}) 값을 동시에 적용한 경우 flex-basis가 우선합니다.

+
+ +

구문

+ +
/* <'width'> 지정 */
+flex-basis: 10em;
+flex-basis: 3px;
+flex-basis: auto;
+
+/* 원본 크기 키워드 */
+flex-basis: fill;
+flex-basis: max-content;
+flex-basis: min-content;
+flex-basis: fit-content;
+
+/* 플렉스 아이템 내용 크기에 따라 조절 */
+flex-basis: content;
+
+/* 전역 값 */
+flex-basis: inherit;
+flex-basis: initial;
+flex-basis: unset;
+
+ +

flex-basis 속성값은 content 키워드를 사용하거나, <'width'>를 나타내는 단위를 사용합니다.

+ +

값

+ +
+
<'width'>
+
{{cssxref("<length>")}}, 플렉스 컨테이너의 크기에 상대적인 {{cssxref("<percentage>")}}, auto 키워드 중 하나. 음수 값은 유효하지 않습니다.
+
content
+
플렉스 아이템의 콘텐츠 크기에 따라 자동으로 크기가 변합니다.
+
+
참고: content 키워드는 Flexible Box Layout의 첫 배포에 포함되지 않아, 일부 오래 된 구현체에서는 지원하지 않을 수 있습니다. flex-basis와 주 크기({{cssxref("width")}}, {{cssxref("height")}}) 속성을 동시에 auto로 설정하면 동일한 효과를 볼 수 있습니다.
+ +
+

역사:

+ +
    +
  • 원래 flex-basis: auto의 뜻은 자신의 width 또는 height 속성의 값을 사용하라는 것이었습니다.
    • +
  • 그 후 flex-basis: auto는 자동 크기조절로 바뀌고, 기존의 auto는 main-size로 바뀌었습니다. bug 1032922에서 구현 기록을 볼 수 있습니다.
    • +
  • 그러나 위의 변경점은 bug 1093316에서 되돌려져 auto 가 다시 width / height 속성을 가리키게 됐고, 대신 새로운 content 키워드가 자동 크기조절을 맡게 됐습니다. ({{bug("1105111")}}에서 볼 수 있습니다)
    • +
+
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<ul class="container">
+  <li class="flex flex1">1: flex-basis test</li>
+  <li class="flex flex2">2: flex-basis test</li>
+  <li class="flex flex3">3: flex-basis test</li>
+  <li class="flex flex4">4: flex-basis test</li>
+  <li class="flex flex5">5: flex-basis test</li>
+</ul>
+
+<ul class="container">
+  <li class="flex flex6">6: flex-basis test</li>
+</ul>
+
+ +

CSS

+ +
.container {
+  font-family: arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex {
+  background: #6AB6D8;
+  padding: 10px;
+  margin-bottom: 50px;
+  border: 3px solid #2E86BB;
+  color: white;
+  font-size: 20px;
+  text-align: center;
+  position: relative;
+}
+
+.flex:after {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 100%;
+  margin-top: 10px;
+  width: 100%;
+  color: #333;
+  font-size: 18px;
+}
+
+.flex1 {
+  flex-basis: auto;
+}
+
+.flex1:after {
+  content: 'auto';
+}
+
+.flex2 {
+  flex-basis: max-content;
+}
+
+.flex2:after {
+  content: 'max-content';
+}
+
+.flex3 {
+  flex-basis: min-content;
+}
+
+.flex3:after {
+  content: 'min-content';
+}
+
+.flex4 {
+  flex-basis: fit-content;
+}
+
+.flex4:after {
+  content: 'fit-content';
+}
+
+.flex5 {
+   flex-basis: content;
+}
+
+.flex5:after {
+  content: 'content';
+}
+
+.flex6 {
+  flex-basis: fill;
+}
+
+.flex6:after {
+  content: 'fill';
+}
+
+ +

결과

+ +

{{EmbedLiveSample('예제', '860', '360', '')}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#propdef-flex-basis', 'flex-basis')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.flex-basis")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/flex-direction/index.html b/files/ko/web/css/flex-direction/index.html new file mode 100644 index 0000000000..9d3ae04a49 --- /dev/null +++ b/files/ko/web/css/flex-direction/index.html @@ -0,0 +1,155 @@ +--- +title: flex-direction +slug: Web/CSS/flex-direction +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-direction +--- +
{{CSSRef}}
+ +

flex-direction CSS 속성은 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-direction.html")}}
+ + + +

row와 row-reverse의 경우 플렉스 컨테이너의 방향성에 영향을 받음을 참고하세요. 컨테이너의 dir 값이 ltr이라면 row는 왼쪽부터 시작하는 가로축을, row-reverse는 오른쪽부터 시작하는 가로축을 나타냅니다. 그러나 dir 값이 rtl이라면 row가 오른쪽부터 시작하는 가로축을, row-reverse가 왼쪽부터 시작하는 가로축을 나타냅니다.

+ +

구문

+ +
/* 한 줄의 글을 작성하는 방향대로 */
+flex-direction: row;
+
+/* <row>처럼, 대신 역방향 */
+flex-direction: row-reverse;
+
+/* 글 여러 줄이 쌓이는 방향대로 */
+flex-direction: column;
+
+/* <column>처럼, 대신 역방향 */
+flex-direction: column-reverse;
+
+/* 전역 값 */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

값

+ +
+
row
+
플렉스 컨테이너의 주축이 글의 작성 방향과 동일합니다. 주축의 시작점과 끝점이 콘텐츠 방향과 동일합니다.
+
row-reverse
+
row와 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.
+
column
+
플렉스 컨테이너의 주축이 블록 축과 동일합니다. 주축의 시작점과 끝점이, 글 작성 모드의 이전 지점 및 이후 지점과 동일합니다.
+
column-reverse
+
column과 동일하게 동작하지만 시작점과 끝점이 반대에 위치합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<h4>This is a Column-Reverse</h4>
+<div id="content">
+    <div class="box" style="background-color:red;">A</div>
+    <div class="box" style="background-color:lightblue;">B</div>
+    <div class="box" style="background-color:yellow;">C</div>
+</div>
+<h4>This is a Row-Reverse</h4>
+<div id="content1">
+    <div class="box1" style="background-color:red;">A</div>
+    <div class="box1" style="background-color:lightblue;">B</div>
+    <div class="box1" style="background-color:yellow;">C</div>
+</div>
+
+ +

CSS

+ +
#content {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: column-reverse;
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+.box {
+  width: 50px;
+  height: 50px;
+}
+
+#content1 {
+  width: 200px;
+  height: 200px;
+  border: 1px solid #c3c3c3;
+  display: -webkit-flex;
+  -webkit-flex-direction: row-reverse;
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+.box1 {
+  width: 50px;
+  height: 50px;
+}
+ +

결과

+ +

{{ EmbedLiveSample('예제', '', '300') }}

+ +

접근성 고려사항

+ +

flex-direction 속성에 row-reverse 또는 column-reverse 값을 사용하면 DOM 구조와 그 시각적 표현에 차이가 생깁니다. 이는 낮은 시력으로 스크린 리더 등 접근성 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적(CSS) 순서가 중요하다고 해도, 스크린 리더 사용자는 그 순서가 어떻게 되는지 알 수 없습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-direction', 'flex-direction')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.flex-direction")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/flex-flow/index.html b/files/ko/web/css/flex-flow/index.html new file mode 100644 index 0000000000..33d68c5188 --- /dev/null +++ b/files/ko/web/css/flex-flow/index.html @@ -0,0 +1,91 @@ +--- +title: flex-flow +slug: Web/CSS/flex-flow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-flow +--- +
{{CSSRef}}
+ +

flex-flow CSS 속성은 {{cssxref("flex-direction")}}, {{cssxref("flex-wrap")}} 속성의 단축 속성입니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-flow.html")}}
+ + + +

구문

+ +
/* flex-flow: <'flex-direction'> */
+flex-flow: row;
+flex-flow: row-reverse;
+flex-flow: column;
+flex-flow: column-reverse;
+
+/* flex-flow: <'flex-wrap'> */
+flex-flow: nowrap;
+flex-flow: wrap;
+flex-flow: wrap-reverse;
+
+/* flex-flow: <'flex-direction'>과 <'flex-wrap'> */
+flex-flow: row nowrap;
+flex-flow: column wrap;
+flex-flow: column-reverse wrap-reverse;
+
+/* 전역 값 */
+flex-flow: inherit;
+flex-flow: initial;
+flex-flow: unset;
+
+ +

값

+ +

자세한 내용은 {{cssxref("flex-direction")}}과 {{cssxref("flex-wrap")}} 속성을 참고하세요.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox','#flex-flow-property','flex-flow') }}{{ Spec2('CSS3 Flexbox') }}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.flex-flow")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/flex-grow/index.html b/files/ko/web/css/flex-grow/index.html new file mode 100644 index 0000000000..544fe486cc --- /dev/null +++ b/files/ko/web/css/flex-grow/index.html @@ -0,0 +1,123 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - NeedsContent + - Reference +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

flex-grow CSS property 는 flex-item 요소가, flex-container 요소 내부에서 할당 가능한 공간의 정도를 선언합니다. 만약 형제 요소로 렌더링 된 모든 flex-item 요소들이 동일한 flex-grow 값을 갖는다면, flex-container 내부에서 동일한 공간을 할당받습니다. 하지만 flex-grow 값으로 다른 소수값을 지정한다면, 그에 따라 다른 공간값을 나누어 할당받게 됩니다.

+ +

보통 flex-grow를 사용할땐, {{ Cssxref("flex-shrink") }}, {{ Cssxref("flex-basis") }} 속성을 함께 사용합니다. 그리고 일반적으로는 모든 값이 설정되었음을 보장하기 위하여 {{ Cssxref("flex") }} 속성을 이용해 축약형으로 사용합니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

Syntax

+ +
/* <number> values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Global values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

flex-grow 속성에 대한 값은 <number> 단독으로 표현합니다.

+ +

Values

+ +
+
<number>
+
관련 링크를 참고하세요. {{cssxref("<number>")}}. 단, 음수값은 허용되지 않습니다.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+
+  justify-content: space-around;
+  flex-flow: row wrap;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

Result

+ +

{{EmbedLiveSample('Example', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox','#flex-grow-property','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-grow")}}

+ +

See also

+ + diff --git a/files/ko/web/css/flex-shrink/index.html b/files/ko/web/css/flex-shrink/index.html new file mode 100644 index 0000000000..14a6f5427f --- /dev/null +++ b/files/ko/web/css/flex-shrink/index.html @@ -0,0 +1,123 @@ +--- +title: flex-shrink +slug: Web/CSS/flex-shrink +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - NeedsContent + - Reference +translation_of: Web/CSS/flex-shrink +--- +
{{CSSRef}}
+ +

flex-shrink CSS property는 flex-item 요소의 flex-shrink 값을 설정하는 속성입니다. 만약 flex-item 요소의 크기가 flex-container 요소의 크기보다 클 때 flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라 flex-container 요소 내부에서 flex-item 요소의 크기가 축소됩니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-shrink.html")}}
+ + + +

Syntax

+ +
/* <number> values */
+flex-shrink: 2;
+flex-shrink: 0.6;
+
+/* Global values */
+flex-shrink: inherit;
+flex-shrink: initial;
+flex-shrink: unset;
+
+ +

The flex-shrink property is specified as a single <number>.

+ +

Values

+ +
+
<number>
+
관련 링크를 참고하세요{{cssxref("<number>")}}. 단, 음수값은 허용되지 않습니다.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+
+ +

Example

+ +

HTML

+ +
+
<p>The width of content is 500px; the flex-basis of the flex items is 120px.</p>
+<p>A, B, C have flex-shrink:1 set. D and E have flex-shrink:2 set</p>
+<p>The width of D and E is less than the others.</p>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+</div>
+
+ +

CSS

+ +
#content {
+  display: flex;
+  width: 500px;
+}
+
+#content div {
+  flex-basis: 120px;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box {
+  flex-shrink: 1;
+}
+
+.box1 {
+  flex-shrink: 2;
+}
+
+
+ +

Result

+ +

{{ EmbedLiveSample('Example', 500, 300) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-shrink")}}

+ +

See also

+ + + +

diff --git a/files/ko/web/css/flex-wrap/index.html b/files/ko/web/css/flex-wrap/index.html new file mode 100644 index 0000000000..7ee27b4386 --- /dev/null +++ b/files/ko/web/css/flex-wrap/index.html @@ -0,0 +1,159 @@ +--- +title: flex-wrap +slug: Web/CSS/flex-wrap +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex-wrap +--- +
{{ CSSRef}}
+ +

CSS flex-wrap property는 flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다. 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/flex-wrap.html")}}
+ + + +

여기를 참고하면 관련된 더욱 자세한 정보를 얻을 수 있습니다. Using CSS flexible boxes

+ +

Syntax

+ +
flex-wrap: nowrap; /* Default value */
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

flex-wrap 속성의 값으로, 다음 목록 중 하나의 키워드를 선택할 수 있습니다.

+ +

Values

+ +

아래는 사용 가능한 속성값들입니다:

+ +
+
nowrap
+
기본 설정값으로, flex-container 부모요소 영역을 벗어나더라도 flex-item 요소들을 한 줄에 배치합니다. 시작점은 {{cssxref("flex-direction")}} 에 의해 결정된 방향으로 적용됩니다.
+
wrap
+
flex-item 요소들이 내부 로직에 의해 분할되어 여러 행에 걸쳐서 배치됩니다. nowrap 속성과 마찬가지로 요소가 배치되는 시작점은 {{cssxref("flex-direction")}} 에 의해 결정됩니다. 일반적으로 위에서 아래로 쌓이는 순서입니다.
+
wrap-reverse
+
wrap 속성값과 동일하지만, 요소가 나열되는 시작점과 끝점의 기준이 반대로 배치됩니다.
+
+

Formal syntax

+
+
+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Results

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.flex-wrap")}}

+ +

See also

+ + diff --git a/files/ko/web/css/flex/index.html b/files/ko/web/css/flex/index.html new file mode 100644 index 0000000000..d7bd9f9d3d --- /dev/null +++ b/files/ko/web/css/flex/index.html @@ -0,0 +1,267 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 {{cssxref("flex-grow")}}, {{cssxref("flex-shrink")}}, {{cssxref("flex-basis")}}의 단축 속성입니다.

+ +
{{EmbedInteractiveExample("pages/css/flex.html")}}
+ + + +

대부분의 경우, flex의 값에는 auto, initial, none이나 단위 없는 양의 수를 사용해야 합니다. 각 값의 적용 효과를 보려면 아래 플렉스 컨테이너의 크기를 조절해보세요.

+ +
+ + + + +

{{EmbedLiveSample("flex", 1200, 370, "", "", "example-outcome-frame")}}

+ +

기본적으로 플렉스 아이템은 콘텐츠의 최소 너비 미만으로 줄어들지 않습니다. {{cssxref("min-width")}}나 {{cssxref("min-height")}} 값을 지정해 바꿀 수 있습니다.

+
+ +

구문

+ +
/* Keyword values */
+flex: auto;
+flex: initial;
+flex: none;
+
+/* One value, unitless number: flex-grow */
+flex: 2;
+
+/* One value, length or percentage: flex-basis */
+flex: 10em;
+flex: 30%;
+
+/* Two values: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Two values: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Three values: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Global values */
+flex: inherit;
+flex: initial;
+flex: unset;
+ +

flex 속성은 한 개에서 세 개의 값을 사용해 지정할 수 있습니다.

+ +
    +
  • 값이 한 개일 때, 그 값은 다음 중 하나여야 합니다. + +
      +
    • {{cssxref("<number>")}}를 지정하면 <flex-grow>입니다.
      • +
    • {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}를 지정하면 <flex-basis>입니다.
      • +
    • none, auto, initial 중 하나를 지정할 수 있습니다.
      • +
    +
    • +
  • 값이 두 개일때, 첫 번째 값은 {{cssxref("<number>")}}여야 하며 <flex-grow>가 됩니다. 두 번째 값은 다음 중 하나여야 합니다. +
      +
    • {{cssxref("<number>")}}를 지정하면 <flex-shrink>입니다.
      • +
    • {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 또는 auto를 지정하면 <flex-basis>입니다.
      • +
    +
    • +
  • 값이 세 개일 때는 다음 순서를 따라야 합니다. +
      +
    1. <flex-grow>에 사용할 {{cssxref("<number>")}}
      2. +
    2. <flex-shrink>에 사용할 {{cssxref("<number>")}}
      3. +
    3. <flex-basis>에 사용할 {{cssxref("<length>")}}, {{cssxref("<percentage>")}}, 또는 auto
      4. +
    +
    • +
+ +

값

+ +
+
initial
+
아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수는 있지만, 남은 공간을 채우려 늘어나지는 않습니다. flex: 0 1 auto와 동일합니다.
+
auto
+
아이템 크기가 각각의 width와 height 속성에 따라 정해집니다. 플렉스 컨테이너의 크기를 넘지 않기 위해 최소 크기로 줄어들 수 있으며, 남은 공간을 채우기 위해 늘어날 수도 있습니다. flex: 1 1 auto와 동일합니다.
+
none
+
아이템 크기가 각각의 width와 height 속성에 따라 정해지며, 컨테이너의 크기에 관계 없이 변하지 않습니다. flex: 0 0 auto와 동일합니다.
+
<'flex-grow'>
+
플렉스 아이템의 {{cssxref("flex-grow")}}를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 0입니다.
+
<'flex-shrink'>
+
플렉스 아이템의 {{cssxref("flex-shrink")}}를 지정합니다. 음수 값은 유효하지 않습니다. 생략 시 기본값은 1입니다.
+
<'flex-basis'>
+
플렉스 아이템의 {{cssxref("flex-basis")}}를 지정합니다. 0을 지정하려면 <flex-grow> 또는 <flex-shrink>로 읽히지 않도록 단위를 붙여야 합니다. 생략 시 기본값은 auto입니다.
+
+ +
+

한 개 또는 두 개의 단위 없는 숫자 값을 사용할 때, <flex-basis>의 값은 auto가 아니라 0이 됩니다. 더 자세한 정보는 플렉시블 박스 레이아웃 모듈 초안에서 확인할 수 있습니다.

+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
#flex-container {
+  display: flex;
+  flex-direction: row;
+}
+
+#flex-container > .flex-item {
+  flex: auto;
+}
+
+#flex-container > .raw-item {
+  width: 5rem;
+}
+
+ +
<div id="flex-container">
+  <div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
+  <div class="raw-item" id="raw">Raw box</div>
+</div>
+
+ + + +

결과

+ +

{{EmbedLiveSample('예제','100%','60')}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.flex")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/float/index.html b/files/ko/web/css/float/index.html new file mode 100644 index 0000000000..149f9e39a5 --- /dev/null +++ b/files/ko/web/css/float/index.html @@ -0,0 +1,215 @@ +--- +title: float +slug: Web/CSS/float +tags: + - CSS + - CSS Positioning + - CSS Property + - Reference +translation_of: Web/CSS/float +--- +
{{CSSRef}}
+ +

CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/float.html")}}
+ + + +

부동(floating) 요소 는 float 의 계산값(computed value)이 none이 아닌 요소입니다.

+ +

{{cssinfo}}

+ +

float 은 블록 레이아웃의 사용을 뜻하기 때문에, 일부 경우에 {{cssxref("display")}} 값의 계산값을 수정합니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
지정값(Specified value)계산값
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
flexflex, 다만 float 은 이러한 요소에 효과가 없음
inline-flexinline-flex, 다만 float 은 이러한 요소에 효과가 없음
그외변화없음
+ +
주의: JavaScript에서 이 속성을 {{domxref("element.style")}} 객체의 멤버로서 참조한다면, 당신은 cssFloat으로 철자를 써야 합니다. 또한 Internet Explorer 8 이전 버전에서는 styleFloat으로 썼음을 주의하세요. 이는 DOM 멤버의 이름은 dash(-)로 구분된 CSS 이름의 카멜케이스(camel-case) 명이다는 규칙의 예외(이고 "class"는 "className"으로 <label>의 "for"는 "htmlFor"로 이스케이프할 필요와 같이 "float"이 JavaScript에서 예약어란 사실 때문)입니다.
+ +

구문

+ +
/* 키워드 값 */
+float: left;
+float: right;
+float: none;
+float: inline-start;
+float: inline-end;
+
+/* 전역 값 */
+float: inherit;
+float: initial;
+float: unset;
+
+ +

값

+ +
+
left
+
는 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.
+
right
+
는 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.
+
none
+
는 요소가 부동하지 않아야 함을 나타내는 키워드입니다.
+
inline-start
+
는 요소가 자신의 포함 블록의 시작쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr(left to right) 스크립트 상에서 왼쪽 그리고 rtl(right to left) 스크립트 상에서는 오른쪽.
+
inline-end
+
는 요소가 자신의 포함 블록의 끝쪽에 부동해야 함을 나타내는 키워드입니다. 즉, ltr 스크립트 상에서 오른쪽 그리고 rtl 스크립트 상에서는 왼쪽.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

CSS

+ +
div { border: solid red;  max-width: 70ex; }
+h4  { float: left;  margin: 0; }
+ +

HTML

+ +
<div>
+  <h4>HELLO!</h4>
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+</div>
+ +

{{EmbedLiveSample('예제')}}

+ +

float이 위치 지정되는 법

+ +

위에서 말한 바와 같이, 요소가 부동되면 문서의 보통 흐름에서 빠집니다. 부동된 요소는 포함 박스나 다른 부동된 요소의 가장자리(edge)에 닿을 때까지 좌나 우로 이동됩니다.

+ +

아래 이미지에는, 빨간 사각형이 세 개 있습니다. 둘은 좌에 부동되고 하나는 우에 부동됩니다. "왼쪽" 두 번째 빨간 사각형은 첫 번째 사각형 오른쪽에 놓임을 주의하세요. 추가 사각형은 그들이 포함 박스를 채울 때까지 계속해서 오른쪽으로 쌓입니다. 그 후엔 다음 줄로 넘어갑니다(wrap).

+ +

+ +

float 지우기

+ +

위 예제에서, 부동된 요소는 안에 텍스트가 부동된 블록보다 세로가 더 짧습니다. 그러나, 텍스트가 모든 부동 요소 하단 아래로 넘어갈 만큼 길지 않다면, 예상치 못한 결과를 볼 수 있습니다. 예를 들어, 위 단락(paragraph)이 오직 "Lorem ipsum dolor sit amet,"만 읽고 "Floats Example" 머릿글(heading)처럼 같은 스타일의 다른 머릿글이 이어졌다면, 두 번째 머릿글은 빨간 박스 사이에 보입니다. 아마도, 우리는 다음 머릿글이 완전히 왼쪽으로 정렬되기를 원합니다. 이를 달성하기 위해, 우리는 float을 지워야(clear) 합니다.

+ +

이 예제에서 float을 지우는 가장 간단한 방법은 우리가 왼쪽으로 정렬되는 지 확인하고 싶은 새 머릿글에 {{Cssxref("clear")}} 속성을 추가하는 것입니다:

+ +
h2.secondHeading { clear: both; }
+
+ +

그러나, 이 방법은 우리가 머릿글이 가로로 옆에 계속 보이기를 원하는 같은 블록 형식 문맥(block formatting context) 내에 다른 요소가 없을 때만 동작합니다. 우리 h2 좌우로 부동되는 사이드바(sidebar)인 형제(sibling)가 있다면, clear 사용은 강제로 머릿글이 두 사이드바 아래로 나타나게 하고 이는 아마 우리가 원하는 게 아닙니다.

+ +

그들 아래 요소의 float을 지우는 게 선택사항이 아니라면, 다른 방법(approach)은 부동 요소가 담긴 컨테이너의 블록 형식 문맥을 제한하는 겁니다. 다시 위 예제를 참조하면, 빨간 박스 셋은 모두 p 요소 내에 있는 걸로 보입니다. 우리는 박스를 포함하도록 늘어나지만, 그 하단 밖(밑)으로 사라지지 않게 hidden 혹은 auto 로 p의 {{Cssxref("overflow")}} 속성을 설정할 수 있습니다:

+ +
p.withRedBoxes { overflow: hidden; height: auto; }
+
+ +
주의: overflow 를 scroll 로 설정하면 부동된 모든 자식(child) 요소도 포함합니다. 하지만 스크롤바가 콘텐츠의 높이에 상관없이 보입니다. 그 컨테이너가 콘텐츠를 수용하기 위해 늘어야(grow) 함을 나타내는 기본(default)임에도 불구하고, 여기에서 우리는 height 를 auto 로 설정하고 있습니다.
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}inline-start 및 inline-end 값이 추가됨.
{{SpecName('CSS3 Box', '#float', 'float')}}{{Spec2('CSS3 Box')}}많은 새 값이, 아직 모두 분명히 정의되지 않음. 새 기능과 관련 없는 행동의 차이는 모두 의도치 않은 걸로 예상됩니다. 그러므로 보고해 주세요.
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}변화 없음
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}초기 정의
+ +

브라우저 호환성

+ +
{{Compat("css.properties.float")}}
+ +

같이 보기

+ + diff --git a/files/ko/web/css/font-family/index.html b/files/ko/web/css/font-family/index.html new file mode 100644 index 0000000000..2653a7e6fc --- /dev/null +++ b/files/ko/web/css/font-family/index.html @@ -0,0 +1,177 @@ +--- +title: font-family +slug: Web/CSS/font-family +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font-family +--- +
{{CSSRef}}
+ +

CSS font-family 속성은 선택된 요소에 우선 순위가 지정된 font family 이름과 generic family 이름을  지정할 수 있게 해줍니다. 

+ +

{{EmbedInteractiveExample("pages/css/font-family.html")}}

+ +

값은 콤마로 구분하여 대체가 될 수 있음을 나타냅니다. 브라우저는 폰트 목록에서 컴퓨터에 설치되어 있거나 {{cssxref("@font-face")}} 규칙을 이용하여 다운로드 받을 수 있는 폰트 중 가장 첫번째 폰트를 선택할 것입니다.

+ +

웹 제작자는 font-family 목록에 최소 한 개의 generic family를 추가해야 하는데, 시스템이나 {{cssxref("@font-face")}} 규칙을 이용 해 다운로드 받은 폰트 중에 특정 폰트가 있다는 것을 보장할 수 없기 때문입니다. generic family는 브라우저가 대체할 수 있는 폰트가 필요한 경우 선택할 수 있게 해줍니다. 

+ +

font-size를 설정하거나 다른 폰트 관련 속성들을 한꺼번에 지정하는 경우 {{cssxref("font")}}가 단축형으로 자주 사용됩니다.

+ +

구문

+ +
/* A font family name and a generic family name */
+font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+
+/* A generic family name only */
+font-family: serif;
+font-family: sans-serif;
+font-family: monospace;
+font-family: cursive;
+font-family: fantasy;
+font-family: system-ui;
+
+/* Global values */
+font-family: inherit;
+font-family: initial;
+font-family: unset;
+
+ +

The font-family property lists one or more font families, separated by commas. Each font family is specified as either a {{anch("family-name", "<family-name>")}} or a {{anch("generic-name", "<generic-name>")}} value.

+ +

The example below lists two font families, the first with a <family-name> and the second with a <generic-name>:

+ +
font-family: Gill Sans Extrabold, sans-serif;
+
+ +

값

+ +
+
<family-name>
+
The name of a font family. For example, "Times" and "Helvetica" are font families. Font family names containing whitespace should be quoted.
+
<generic-name>
+
+

Generic font families are a fallback mechanism, a means of preserving some of the style sheet author's intent when none of the specified fonts are available. Generic family names are keywords and must not be quoted. A generic font family should be the last item in the list of font family names. The following keywords are defined:

+ +
+
serif
+
Glyphs have finishing strokes, flared or tapering ends, or have actual serifed endings.
+ E.g. Lucida Bright, Lucida Fax, Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif.
+
sans-serif
+
Glyphs have stroke endings that are plain.
+ E.g. "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode", "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif.
+
monospace
+
All glyphs have the same fixed width.
+ E.g. "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace.
+
cursive
+
Glyphs in cursive fonts generally have either joining strokes or other cursive characteristics beyond those of italic typefaces. The glyphs are partially or completely connected, and the result looks more like handwritten pen or brush writing than printed letterwork.
+ E.g. "Brush Script MT", "Brush Script Std", "Lucida Calligraphy", "Lucida Handwriting", "Apple Chancery", cursive.
+
fantasy
+
Fantasy fonts are primarily decorative fonts that contain playful representations of characters.
+ E.g. Papyrus, Herculanum, Party LET, Curlz MT, Harrington, fantasy.
+
system-ui
+
Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.
+
+
+
+ +

유효한 폰트 패밀리 이름

+ +

Font family names must either be given quoted as strings, or unquoted as a sequence of one or more identifiers. This means that punctuation characters and digits at the start of each token must be escaped in unquoted font family names.

+ +

For example, the following declarations are valid:

+ +
font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;
+ +

The following declarations are invalid:

+ +
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

Some common font families

+ +
.serif {
+  font-family: Times, Times New Roman, Georgia, serif;
+}
+
+.sansserif {
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.monospace {
+  font-family: Lucida Console, Courier, monospace;
+}
+
+.cursive {
+  font-family: cursive;
+}
+
+.fantasy {
+  font-family: fantasy;
+}
+
+ + + +

{{ EmbedLiveSample('Some_common_font_families','600','120') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Fonts', '#generic-font-families', 'generic font families')}}{{Spec2('CSS4 Fonts')}}Adds new generic font families, specifically: system-ui, emoji, math, and fangsong.
{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}{{Spec2('CSS3 Fonts')}}No significant change
{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}{{Spec2('CSS2.1')}}No significant change
{{SpecName('CSS1', '#font-family', 'font-family')}}{{Spec2('CSS1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +

{{Compat("css.properties.font-family")}}

diff --git a/files/ko/web/css/font-feature-settings/index.html b/files/ko/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..ad3bcb430b --- /dev/null +++ b/files/ko/web/css/font-feature-settings/index.html @@ -0,0 +1,128 @@ +--- +title: font-feature-settings +slug: Web/CSS/font-feature-settings +translation_of: Web/CSS/font-feature-settings +--- +
{{CSSRef}}
+ +

font-feature-settings CSS 속성은 오픈타입 폰트의 다양한 오픈타입 피처를 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/font-feature-settings.html")}}
+ + + +

문법

+ +
/* 기본값 사용 */
+font-feature-settings: normal;
+
+/* 오픈타입 피처 태그에 대해 값 설정 */
+font-feature-settings: "smcp";
+font-feature-settings: "smcp" on;
+font-feature-settings: "swsh" 2;
+font-feature-settings: "smcp", "swsh" 2;
+
+/* 전역 값 사용 */
+font-feature-settings: inherit;
+font-feature-settings: initial;
+font-feature-settings: unset;
+ +

가능하다면 단축 속성인 {{cssxref("font-variant")}} 속성을 사용하거나, 각각의 피처와 연관된 {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}} 등을 사용하는 것이 font-feature-settings를 직접 사용하는 것에 비해 더 효율적이고, 예측 가능하게 동작하며 이해하기도 쉽습니다.

+ +

이는 font-feature-settings는 원래 작은 대문자(Small caps)와 같이 접근할 수 있는 다른 방법이 없는 오픈타입 피처를 제어하기 위해 만들어진 저수준의 기능이기 때문입니다.

+ +

값

+ +
+
normal
+
기본값을 이용하여 텍스트를 표시합니다.
+
<feature-tag-value>
+
텍스트를 렌더링할 때, 오픈타입 피처를 활성화하거나 비활성화하기 위해 피처 태그 목록을 렌더링 엔진에 전달합니다. 피처 태그는 4개의 ASCII 문자로 이루어진 {{cssxref("<string>")}}이어야 합니다. 만약 태그가 네 글자보다 짧거나, 유니코드 U+20 – U+7E 범위 바깥에 있는 문자를 포함한다면 속성 전체가 무효처리됩니다.
+ 값은 양의 정수 값을 가집니다. 각각 1, 0과 같은 의미를 가지는 키워드 on 과 off도 사용할 수 있습니다. 아무런 값이 설정되지 않았다면 기본값은 1입니다. stylistic alternates와 같이 Boolean 타입이 아닌 오픈타입 피처의 경우, 값은 선택되어야 하는 글리프(글자)를 의미합니다. Boolean 타입인 경우에는 스위치라고 생각하시면 됩니다.
+
+
+ +

Formal definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

예시

+ +

다양한 오픈타입 피처 활성화

+ +
/* 작은 대문자(small-caps) 대체 글리프를 사용합니다. */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* 대문자와 소문자를 모두 작은 대문자로 변환합니다.(문장부호도 영향을 받습니다.)*/
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* 영문 대문자 "O"와 구분하기 위해 대각선이 그려진 숫자 0을 사용합니다. */
+.nicezero { font-feature-settings: "zero"; }
+
+/* '역사적인' 형태를 사용하기 위해 'hist' 피처를 활성화합니다. */
+.hist { font-feature-settings: "hist"; }
+
+/* 표준합자(common ligatures)를 비활성화 합니다. 기본값은 활성 상태입니다. */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* 고정폭 숫자(tabular figures)를 사용합니다. */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* 자동 분수 입력을 활성화합니다. */
+.fractions { font-feature-settings: "frac"; }
+
+/* 가능한 swash 문자 중 두번째를 사용합니다. */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* 스타일 세트(stylistic set) 7번을 사용합니다. */
+.fancystyle {
+  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
+  font-feature-settings: "ss07";
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.properties.font-feature-settings")}}

+ +

See also

+ +
    +
  • {{cssxref("@font-face/font-display", "font-display")}}
    • +
  • {{cssxref("@font-face/font-family", "font-family")}}
    • +
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • +
  • {{cssxref("@font-face/font-style", "font-style")}}
    • +
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • +
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • +
  • {{cssxref("@font-face/font-variation-settings", "font-variation-settings")}}
    • +
  • {{cssxref("@font-face/src", "src")}}
    • +
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • +
  • OpenType Feature Tags list
    • +
  • Using the whole font
    + (Note: The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz.)
    • +
diff --git a/files/ko/web/css/font-size/index.html b/files/ko/web/css/font-size/index.html new file mode 100644 index 0000000000..9f2a57e17c --- /dev/null +++ b/files/ko/web/css/font-size/index.html @@ -0,0 +1,220 @@ +--- +title: font-size +slug: Web/CSS/font-size +translation_of: Web/CSS/font-size +--- +
{{CSSRef}}
+ +

font-size CSS 속성은 폰트의 크기(대문자 "M"의 크기)를 지정합니다. 폰트 크기를 바꾸면 em 과 ex {{cssxref("<length>")}} 단위로 계산된 다른 항목들의 크기를 바꿉니다.

+ +

{{EmbedInteractiveExample("pages/css/font-size.html")}}

+ +

구문

+ +
/* <absolute-size> 값 */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* <relative-size> 값 */
+font-size: larger;
+font-size: smaller;
+
+/* <length> 값 */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage> 값 */
+font-size: 80%;
+
+/* 전역 값 */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+
+ +

The font-size property is specified in one of the following ways:

+ +
    +
  • As one of the absolute-size or relative-size keywords
    • +
  • As a <length> or a <percentage>, relative to the parent element's font size
    • +
+ +

값

+ +
+
xx-small, x-small, small, medium, large, x-large, xx-large
+
키워드는 사용자의 기본 폰트(medium) 크기에 따라 정해집니다. <font size="1"> 부터 <font size="7"> 와 같은 HTML 과 유사하게 표현됩니다. 기본 유저 폰트 크기는 <font size="3">입니다.
+
larger, smaller
+
키워드에 따라 부모 엘리먼트의 폰트 크기에서 일정 비율로 늘이거나 줄입니다.
+
{{cssxref("<length>")}}
+
+
+

{{cssxref("<length>")}}는 항상 양수입니다. 만약 단위가 em 이나 ex 로 표현되어 있으면, 부모 엘리먼트의 크기에 상대적으로 정해집니다. 예를 들어, 0.5em 은 부모 엘리먼트 폰트 크기의 절반이 현재 엘리먼트의 폰트 크기입니다. 만약 단위가 rem으로 지정되어 있다면, 폰트 크기는 html (루트) 엘리먼트의 폰트 크기에 따라 상대적으로 정해집니다.

+
+
{{cssxref("<percentage>")}}
+
양수인 {{cssxref("<percentage>")}} 는, 부모 엘리먼트의 폰트 크기의 비율입니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

접근법

+ +

폰트 크기는 키워드나 pixel과 em처럼 수치 단위처럼 여러가지 방법으로 지정할 수 있습니다. 각 웹 페이지에 맞는 적합한 방법을 선택해야 합니다.

+ +

키워드

+ +

키워드는 웹의 폰트 크기를 정하는 좋은 방법입니다. 키워드로 엘리먼트의 폰트 크기를 정하면 웹 페이지의 모든 페이지의 폰트 크기가 상대적으로 지정되어 쉽게 전체 페이지의 폰트 크기를 늘이거나 줄일 수 있습니다.

+ +

픽셀

+ +

픽셀 단위의 정확함이 필요하면, 폰트 크기를 픽셀 단위로 (px) 설정하는 것이 좋은 선택입니다. px 값은 정적이고 운영체제 독립적이며 브라우저 독립적인 방법으로 브라우저에 글자들이 정확히 몇 픽셀 높이로 렌더링 되어야 하는지를 정할 수 있습니다다. 브라우저가 비슷한 효과를 내기 위해 각기 다른 방법을 사용하기 때문에 렌더링된 결과가 브라우저마다 아주 조금씩 달라질 수 있습니다.

+ +

폰트 크기 설정을 조합해서 쓸 수 있습니다다. 예를 들어, 부모 엘리먼트의 크기를 16px 로 정하고 자식 엘리먼트의 크기를 larger로 설정하면, 자식엘리먼트의 폰트 크기는 페이지에 있는 부모 엘리먼트보다 크게 보입니다.

+ +
참고: 폰트 크기를 픽셀로 정하는 것은 사용자가 폰트 크기를 브라우저를 이용해 바꿀 수 없기 때문에 접근성이 떨어집니다. (예를 들어 시각에 제약이 있는 사용자가 폰트 크기를 웹 디자이너가 설정한 크기보다 더 크게 설정하려고 할 수 있습니다.) 그러므로, 접근성 높은 페이지를 만들고자 한다면, 폰트 크기를 픽셀 단위로 설정하는 것을 지양해야 합니다.
+ +

em 값

+ +

폰트 크기를 설정하는 또 하나의 방법은 em 값으로 설정하는 것입니다. em 값은 동적입니다. font-size 속성을 정의할 때, em 은 부모 엘리먼트의 폰트 크기와 같습니다. 만약, 전체 페이지에서 폰트 크기를 정의하지 않으면 높은 가능성으로 브라우저 기본인 16px로 지정됩니다. 따라서 기본 값일때 1em = 16px 이고 2em = 32px 를 나타냅니다. 만약 body 엘리먼트의 font-size 를 20px로 정한 경우, 1em = 20px 이고 2em = 40px 입니다. 2 라는 값은 현재 크기의 배수를 나타냄을 주의해야 합니다.

+ +

em 표현을 pixel 값으로 표현해야 한다면 이 공식을 사용할 수 있습니다.

+ +
em = 구하고자 하는 엘리먼트의 pixel 값 / 부모 엘리먼트의 font-size pixel 값
+ +

예를 들어 페이지의 폰트 크기가 1em이고, 브라우저 기본 값이 1em = 16px로 정의되어 있다고 가정해보겠습니다. 만약 12px 폰트 크기로 지정하고 싶다면 0.75em(12/16 = 0.75) 로 정해야 합니다. 비슷하게, 10px로 정하고 싶다면 0.625em(10/16 = 0.625) 로 정합니다. 22px 은 1.375em 으로 표현합니다.

+ +

문서 전체의 폰트 크기를 정할때 많이 쓰이는 방법은 body 태그의 폰트 크기를 10px 과 같은 62.5% (기본값 16px의 62.5%) 나 0.625em 으로 정하는 것 입니다. 이제 다른 엘리먼트의 폰트 크기를 계산하기 쉬운 px 을 10으로 나눈 em 단위를 이용해서 설정할 수 있습니다. 이 경우 6px = 0.6em 로, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em 로 표현합니다.

+ +
body {
+  font-size: 62.5%; /* font-size 1em = 10px 브라우저의 기본 설정 */
+}
+span {
+  font-size: 1.6em; /* 1.6em = 16px */
+}
+ +

em 은 자동적으로 폰트의 크기를 적용해주기 때문에 CSS 에서 유용한 단위입니다.

+ +

중요하게 기억할 점은, em 값은 합성 값입니다. 위의 CSS 에 아래 HTML 을 적용해보겠습니다.

+ +
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+
+ +

그 결과는

+ +

{{EmbedLiveSample("Ems", 400, 40)}}

+ +

브라우저의 기본 font-size 가 16px 이라고 가정해보면, "outer" 는 16px 로 그려지고 , "inner" 는 25.6px로 그려집니다. 왜냐하면 span의 font-size 가 1.6 em 으로 부모의 font-size에 상대적인데,  그 부모의 font-size도 상대적으로 계산되기 때문입니다. 이러한 동작을 합성이라고 부릅니다.

+ +

rem

+ +

rem 값은 합성 문제를 회피하기 위해 고안되었습니다. rem 값은 부모 엘리먼트가 아니라 최상위 html 엘리먼트에 상대적입니다. 다르게 표현하면, rem 은 부모 크기에 의해 폰크 크기가 정해지지 않도록 하여 합성 문제를 제거합니다.

+ +

아래 CSS 는 이전 예제와 거의 동일합니다. 딱 하나 다른 점은 단위가 rem 으로 바뀌었습니다.

+ +
html {
+  font-size: 62.5%; /* font-size 1em = 10px on default browser settings */
+}
+span {
+  font-size: 1.6rem;
+}
+
+ +

이 CSS 를 같은 HTML 에 적용하면 이렇게 보입니다

+ +
<span>Outer <span>inner</span> outer</span>
+ +

{{EmbedLiveSample("Rems", 400, 40)}}

+ +

이 예제에서 "outer inner outer" 는 모두 16px 로 보입니다 (브라우저의 기본 폰트 설정이 16px 인 경우).

+ +

예제

+ +

예제 1

+ +
/* 문단 텍스트의 크기를 매우 크게 설정 */
+p { font-size: xx-large }
+
+/* h1 (제목 1)을 주변 텍스트보다 2.5배 큼 */
+h1 { font-size: 250% }
+
+/* span 태그 안의 텍스트를 16px 로 설정 */
+span { font-size: 16px; }
+
+ +

예제 2

+ +
.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+
+ +
<h1 class="small">Small H1</h1>
+<h1 class="larger">Larger H1</h1>
+<h1 class="point">24 point H1</h1>
+<h1 class="percent">200% H1</h1>
+ +

결과

+ +

{{EmbedLiveSample('예제_2','600','200')}}

+ +

참고

+ +

{{Cssxref("font-size")}} 속성의 em 과 ex 단위는 부모 엘리먼트의 폰트 크기에 상대적입니다(자기 엘리먼트의 폰트 크기에 상대적인 다른 속성과는 다르게). 이는 em 단위와 퍼센트 단위가 {{Cssxref("font-size")}} 에서 동일하게 동작함을 의미합니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}No change
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}Defines font-size as animatable.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +

{{Compat("css.properties.font-size")}}

diff --git a/files/ko/web/css/font-synthesis/index.html b/files/ko/web/css/font-synthesis/index.html new file mode 100644 index 0000000000..99810d8517 --- /dev/null +++ b/files/ko/web/css/font-synthesis/index.html @@ -0,0 +1,111 @@ +--- +title: font-synthesis +slug: Web/CSS/font-synthesis +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-synthesis +--- +
{{CSSRef}}
+ +

CSS font-synthesis 속성은 브라우저가 굵은 글꼴과 이탤릭 글꼴을 합성하는 것을 허용할지 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/font-synthesis.html")}}
+ + + +

구문

+ +

font-synthesis는 다음 방법 중 하나를 사용해 지정합니다.

+ +
    +
  • none 키워드.
    • +
  • weight 또는 style 키워드.
    • +
  • weight와 style 키워드.
    • +
+ +

값

+ +
+
none
+
굵은 글꼴과 이탤릭 글꼴의 합성을 금지합니다.
+
weight
+
필요한 경우 굵은 글꼴을 합성할 수 있습니다.
+
style
+
필요한 경우 이탤릭 글꼴을 합성할 수 있습니다.
+
+ +

설명

+ +

대부분의 표준 서양 글꼴은 이탤릭과 굵은 글꼴을 포함하고 있으나 상용 글꼴은 그렇지 않은 경우도 많습니다. 한국, 중국, 일본을 포함한 비 알파벳 문화권의 문자 체계는 보통 이런 변형을 포함하지 않으며 브라우저의 글꼴 합성으로 인해 가독성이 떨어질 수 있습니다. 이 두 가지 경우에 대해 font-synthesis를 사용해 기본 글꼴 합성을 끄는 것이 좋을 수도 있습니다.

+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

글꼴 합성 비활성화

+ +

HTML

+ +
<em class="syn">절 합성하세요! Synthesize!</em>
+<br/>
+<em class="no-syn">절 합성하지 마세요! Synthesize!</em>
+
+ +

CSS

+ +
em {
+  font-weight: bold;
+}
+.syn {
+  font-synthesis: style weight;
+}
+.no-syn {
+  font-synthesis: none;
+}
+
+ +

결과

+ +

{{ EmbedLiveSample('글꼴_합성_비활성화', '', '50') }}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#propdef-font-synthesis', 'font-synthesis')}}{{Spec2('CSS3 Fonts')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.font-synthesis")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("font-style")}}
    • +
  • {{cssxref("font-weight")}}
    • +
diff --git a/files/ko/web/css/font-weight/index.html b/files/ko/web/css/font-weight/index.html new file mode 100644 index 0000000000..bc3ff93c1c --- /dev/null +++ b/files/ko/web/css/font-weight/index.html @@ -0,0 +1,283 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

요약

+ +

font-weight CSS 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 normal 나 bold 일 때만 가능하다. 

+ +

{{cssinfo}}

+ +

구문

+ +
font-weight: normal;
+font-weight: bold;
+
+/* Relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

값

+ +
+
normal
+
보통 폰트 가중치. 400 과 같음.
+
bold
+
굵은 폰트 가중치. 700 과 같음.
+
lighter
+
(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.
+
bolder
+
(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.
+
100, 200, 300, 400, 500, 600, 700, 800, 900
+
normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.
+
+ +

대비책(Fallback)

+ +

만약 정확히 주어진 가중치를 사용할 수없다면, 실제로 렌더링 되는 가중치를 결정하기 위해 다음과 같은 경험적 접근이 적용된다:

+ +
    +
  • 만약 500 초과의 가중치가 주어지면, 가능한 굵은(darker) 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 얇은(lighter) 가중치 중 가장 가까운 것).
    • +
  • 만약 400 미만의 가중치가 주어지면, 가능한 얇은 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 굵은 가중치 중 가장 가까운 것).
    • +
  • 만약 가중치가 400 이 주어지면, 500 이 사용된다. 만약 500 이 불가능하면, 500 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.
    • +
  • 만약 가중치가 500 이 주어지면, 400 이 사용된다. 만약 400 이 불가능하면, 400 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.
    • +
+ +

이것은 normal 과 bold 만 지원하는 폰트일 경우, 100-500 은 normal, 600-900 은 bold 임을 의미한다.

+ +

상대적 가중치의 의미

+ +

lighter 나 bolder 가 주어진 경우, 요소의 절대적인 가중치를 계산하기 위해 다음 차트가 사용된다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
상속된 값bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

일반적인 가중치 이름 매핑

+ +

100~900 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:

+ +
+
100
+
Thin (Hairline)
+
200
+
Extra Light (Ultra Light)
+
300
+
Light
+
400
+
Normal
+
500
+
Medium
+
600
+
Semi Bold (Demi Bold)
+
700
+
Bold
+
800
+
Extra Bold (Ultra Bold)
+
900
+
Black (Heavy)
+
+ +

보간

+ +

font-weight 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

결과

+ +

{{EmbedLiveSample("Examples","400","300")}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}변경사항 없음
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}font-weight 이 animatable 로 정의됨
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}변경사항 없음
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}초기 정의
+ +

브라우저 호환성

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support2.0{{CompatGeckoDesktop(1.0)}}3.03.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile(1.0)}}6.06.03.1
+
diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html new file mode 100644 index 0000000000..209669ed77 --- /dev/null +++ b/files/ko/web/css/font/index.html @@ -0,0 +1,345 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font +--- +
{{CSSRef}}
+ +

font CSS 속성은 {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, {{cssxref("font-family")}}의 단축 속성입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/font.html")}}
+ + + +

다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. font 속성으로 설정할 수 없는 {{cssxref("font-stretch")}}, {{ cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}}의 값도 초기값으로 돌아갑니다.

+ +

구문

+ +

font 속성은 하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정할 수도 있고, 여러 글꼴 관련 속성의 단축 속성으로도 사용할 수 있습니다.

+ +

font를 시스템 폰트 키워드로 사용하려면 {{anch("caption")}}, {{anch("icon")}}, {{anch("menu")}}, {{anch("message-box")}}, {{anch("small-caption")}}, {{anch("status-bar")}} 중 하나를 사용해야 합니다.

+ +

font를 단축 속성으로 사용하려면,

+ +
    +
  • 다음 속성의 값을 포함해야 합니다. +
      +
    • {{cssxref("<font-size>")}}
      • +
    • {{cssxref("<font-family>")}}
      • +
    +
    • +
  • 다음 속성의 값을 포함할 수 있습니다. +
      +
    • {{cssxref("<font-style>")}}
      • +
    • {{cssxref("<font-variant>")}}
      • +
    • {{cssxref("<font-weight>")}}
      • +
    • {{cssxref("<line-height>")}}
      • +
    +
    • +
  • font-style, font-variant, font-weight는 font-size의 앞에 와야 합니다.
    • +
  • font-variant는 CSS 2.1에서 정의한 normal과 small-caps만 사용할 수 있습니다.
    • +
  • line-height는 font-size 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "16px/3"
    • +
  • font-family는 마지막 값이어야 합니다.
    • +
+ +

값

+ +
+
<'font-style'>
+
{{cssxref("font-style")}} 참고
+
<'font-variant'>
+
{{cssxref("font-variant")}} 참고
+
<'font-weight'>
+
{{cssxref("font-weight")}} 참고
+
<'font-stretch'>
+
{{cssxref("font-stretch")}} 참고
+
<'font-size'>
+
{{cssxref("font-size")}} 참고
+
<'line-height'>
+
{{cssxref("line-height")}} 참고
+
<'font-family'>
+
{{cssxref("font-family")}} 참고
+
+ +

시스템 폰트 키워드

+ +
+
caption
+
버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.
+
icon
+
아이콘 이름에 사용하는 시스템 폰트.
+ +
드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.
+
message-box
+
다이얼로그 창에 사용하는 폰트.
+
small-caption
+
소형 컨트롤에 사용하는 시스템 폰트.
+
status-bar
+
창의 상태표시줄에 사용하는 시스템 폰트.
+
추가 시스템 폰트 키워드
+
각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field를 가지고 있습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
/* 글씨 크기 12픽셀, 줄 높이 14픽셀, 글꼴 sans-serif */
+p { font: 12px/14px sans-serif }
+
+/* 글씨 크기 부모 또는 기본값(부모가 없을 경우)의 80%, 글꼴 sans-serif */
+p { font: 80% sans-serif }
+
+/* 글씨 굵기 굵게, 스타일 기울이기, 글씨 크기 크게, 글꼴 serif */
+p { font: bold italic large serif }
+
+/* 창의 상태표시줄과 같은 글꼴 사용 */
+p { font: status-bar }
+
+ + + + + + + + + + + + + +

{{ EmbedLiveSample('예제','100%', '380px')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fonts', '#font-prop', 'font')}}{{ Spec2('CSS3 Fonts')}}Added support for font-stretch values.
{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}{{ Spec2('CSS2.1')}}Added support for keywords.
{{ SpecName('CSS1', '#font', 'font')}}{{ Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.font")}}

diff --git a/files/ko/web/css/frequency/index.html b/files/ko/web/css/frequency/index.html new file mode 100644 index 0000000000..6b3d88b859 --- /dev/null +++ b/files/ko/web/css/frequency/index.html @@ -0,0 +1,75 @@ +--- +title: +slug: Web/CSS/frequency +tags: + - CSS + - CSS Data Type + - Reference + - Web +translation_of: Web/CSS/frequency +--- +
{{CSSRef}}
+ +

CSS <frequency> 자료형은 목소리의 높낮이 등 주파수를 나타냅니다. 현재 어떤 CSS 속성도 <frequency>를 사용하지 않습니다.

+ +

구문

+ +

<frequency> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성핳합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다.

+ +

단위

+ +
+
Hz
+
헤르츠로 주파수를 나타냅니다. 예시: 0Hz, 1500Hz, 10000Hz.
+
kHz
+
킬로헤르츠로 주파수를 나타냅니다. 예시: 0kHz, 1.5kHz, 10kHz.
+
+ +
+

참고: 0은 단위와 상관없이 언제나 같은 값을 나타내지만, 주파수에서는 단위를 생략할 수 없습니다. 즉 0은 유효한 주파수가 아니며 0Hz나 0kHz를 나타내지 않습니다. 단위 문자가 대소문자를 구분하지 않기는 하지만, SI에서 명시한 대로 "H"는 대문자로 표기하는 게 좋습니다.

+
+ +

예제

+ +

유효한 주파수

+ +
12Hz     양의 정수
+4.3Hz    실수
+14KhZ    단위가 대소문자를 구분하지 않지만, SI 표준에서 벗어난 표기는 비추천
++0Hz     0, 양의 부호와 단위
+-0kHz    0, 음의 부호와 단위
+ +

유효하지 않은 주파수

+ +
12.0     단위가 없으므로 <number>지만 <frequency>가 아님
+7 Hz     수와 단위 사이에 공백은 불허
+0        <length>는 단위 없는 0을 받을 수 있지만, <frequency>는 불가능
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#frequency', '<frequency>')}}{{Spec2('CSS3 Values')}}Initial definition.
+ +
+

참고: <frequency>는 CSS Level 2의, 지금은 사용하지 않는 청각적 미디어 특성에서 음성의 높낮이를 설정할 때 사용했습니다. 이후 CSS3에서 다시 추가됐지만, 지금으로써는 어떤 CSS 속성에서도 사용하지 않습니다.

+
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.frequency")}}

diff --git a/files/ko/web/css/gap/index.html b/files/ko/web/css/gap/index.html new file mode 100644 index 0000000000..7aca4dc713 --- /dev/null +++ b/files/ko/web/css/gap/index.html @@ -0,0 +1,220 @@ +--- +title: gap (grid-gap) +slug: Web/CSS/gap +tags: + - CSS + - CSS Flexible Boxes + - CSS Grid + - CSS Multi-column Layout + - CSS Property + - Reference +translation_of: Web/CSS/gap +--- +
{{CSSRef}}
+ +

CSS gap 속성은 행과 열 사이의 간격(거터)을 설정합니다. {{CSSxRef("row-gap")}}과 {{CSSxRef("column-gap")}}의 단축 속성입니다.

+ + + +
{{EmbedInteractiveExample("pages/css/grid-gap.html")}}
+ +
+

원래 CSS Grid Layout은 접두사를 붙인 grid-gap 속성을 정의했었으며, 현재 gap으로 대체하는 과정 중에 있습니다. 그러나 grid-gap만 구현하고 그리드 레이아웃용 gap은 구연하지 않은 브라우저를 지원하려면 위의 대화형 예제처럼 접두사 속성을 사용해야 합니다.

+
+ +

구문

+ +
/* 단일 <length> 값 */
+gap: 20px;
+gap: 1em;
+gap: 3vmin;
+gap: 0.5cm;
+
+/* 단일 <percentage> 값 */
+gap: 16%;
+gap: 100%;
+
+/* 이중 <length> 값 */
+gap: 20px 10px;
+gap: 1em 0.5em;
+gap: 3vmin 2vmax;
+gap: 0.5cm 2mm;
+
+/* 이중 또는 혼합 <percentage> 값 */
+gap: 16% 100%;
+gap: 21px 82%;
+
+/* calc() 값 */
+gap: calc(10% + 20px);
+gap: calc(20px + 10%) calc(10% - 5px);
+
+/* 전역 값 */
+gap: inherit;
+gap: initial;
+gap: unset;
+
+ +

gap은 <'row-gap'> 값을 사용해 지정하며, 선택적으로 <'column-gap'>을 추가할 수 있습니다. <'column-gap'>을 생략한 경우 <'row-gap'>과 동일한 값을 사용합니다.

+ +

<'row-gap'>과 <'column-gap'>은 각각 <length> 또는 <percentage>를 사용해 지정합니다.

+ +

값

+ +
+
{{CSSxRef("<length>")}}
+
그리드 선을 분할하는 간격의 너비.
+
{{CSSxRef("<percentage>")}}
+
그리드 선을 분할하는 간격의 너비. 요소 크기에 상대적입니다.
+
+ +

형식 구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

플렉스 레이아웃

+ +

HTML

+ +
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+ +

CSS

+ +
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  gap: 20px 5px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+
+}
+
+ +

결과

+ +

{{EmbedLiveSample("플렉스_레이아웃", "auto", "120px")}}

+ +

그리드 레이아웃

+ +

HTML

+ +
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS

+ + + +
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  gap: 20px 5px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("그리드_레이아웃", "auto", "120px")}}

+ +

다열 레이아웃

+ +

HTML

+ +
<p class="content-box">
+  This is some multi-column text with a 40px column
+  gap created with the CSS <code>gap</code> property.
+  Don't you think that's fun and exciting? I sure do!
+</p>
+
+ +

CSS

+ +
.content-box {
+  column-count: 3;
+  gap: 40px;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("다열_레이아웃", "auto", "120px")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Box Alignment", "#propdef-gap", "gap")}}{{Spec2("CSS3 Box Alignment")}}Initial definition
+ +

{{CSSInfo}}

+ +

브라우저 호환성

+ + + +

플렉스 레이아웃 지원

+ +

{{Compat("css.properties.gap.flex_context")}}

+ +

그리드 레이아웃 지원

+ +

{{Compat("css.properties.gap.grid_context")}}

+ +

다열 레이아웃 지원

+ +

{{Compat("css.properties.gap.multicol_context")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/general_sibling_combinator/index.html b/files/ko/web/css/general_sibling_combinator/index.html new file mode 100644 index 0000000000..7fb79bd5f0 --- /dev/null +++ b/files/ko/web/css/general_sibling_combinator/index.html @@ -0,0 +1,80 @@ +--- +title: 일반 형제 결합자 +slug: Web/CSS/General_sibling_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/General_sibling_combinator +--- +
{{CSSRef("Selectors")}}
+ +

일반 형제 결합자(~)는 두 개의 선택자 사이에 위치하여 뒤쪽 선택자의 요소와 앞쪽 선택자 요소의 부모 요소가 같고, 뒤쪽 선택자의 요소가 뒤에 위치할 때 선택합니다. 두 요소가 서로 붙어있을 필요는 없습니다.

+ +
/* 서로 형제인 문단 중 이미지 뒤쪽인 경우에만 선택 */
+img ~ p {
+  color: red;
+}
+ +

구문

+ +
former_element ~ target_element { style properties }
+
+ +

예제

+ +

CSS

+ +
p ~ span {
+  color: red;
+}
+ +

HTML

+ +
<span>이건 빨강이 아닙니다.</span>
+<p>여기 문단이 있습니다.</p>
+<code>그리고 코드도 있습니다.</code>
+<span>이제 빨강입니다!</span>
+<code>더 많은 코드가 있습니다.</code>
+<span>이것도 빨강입니다!</span>
+
+ +

결과

+ +

{{EmbedLiveSample("예제", "100%", 120)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#general-sibling-combinators", "subsequent-sibling combinator")}}{{Spec2("CSS4 Selectors")}}Renames it the "subsequent-sibling" combinator.
{{SpecName("CSS3 Selectors", "#general-sibling-combinators", "general sibling combinator")}}{{Spec2("CSS3 Selectors")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.general_sibling")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/getting_started/javascript/index.html b/files/ko/web/css/getting_started/javascript/index.html new file mode 100644 index 0000000000..2f9fd8f53b --- /dev/null +++ b/files/ko/web/css/getting_started/javascript/index.html @@ -0,0 +1,144 @@ +--- +title: JavaScript +slug: Web/CSS/Getting_Started/JavaScript +tags: + - 'CSS:Getting_Started' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +--- +

이 페이지는 입문서의 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 new file mode 100644 index 0000000000..d8ca001fb2 --- /dev/null +++ b/files/ko/web/css/getting_started/svg_graphics/index.html @@ -0,0 +1,195 @@ +--- +title: SVG graphics +slug: Web/CSS/Getting_Started/SVG_graphics +tags: + - 'CSS:Getting_Started' +translation_of: Web/SVG/Tutorial/SVG_and_CSS +--- +

이 페이지는 그래픽을 만들기 위한 특별한 언어 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/getting_started/xbl_bindings/index.html b/files/ko/web/css/getting_started/xbl_bindings/index.html new file mode 100644 index 0000000000..6799095812 --- /dev/null +++ b/files/ko/web/css/getting_started/xbl_bindings/index.html @@ -0,0 +1,198 @@ +--- +title: XBL bindings +slug: Web/CSS/Getting_Started/XBL_bindings +tags: + - 'CSS:Getting_Started' +translation_of: Archive/Beginner_tutorials/Using_XBL_from_stylesheets +--- +

이 페이지는 모질라에서 CSS를 사용하여 복잡한 애플리케이션의 구조를 향상시켜 코드와 자원(resources)을 보다 쉽게 재사용(recycle)할 수 있게 만드는 방법을 설명합니다.

+

이 테크닉을 간단한 예제에 적용시켜 봅니다.

+

정보: XBL 바인딩(bindings)

+

마크업 언어와 CSS에서 제공되는 구조(structure)는 각 부분이 독립적이고(self-contained) 재 사용되어야 하는 복잡한 애플리케이션에 이상적이라고는 할 수 없습니다. 스타일 시트들을 다른 파일들에 저장할 수 있고, 스크립트들도 다른 파일들에 저장 해 놓을 수 있으나, 문서에서 이들 파일들을 하나의 전체로서 링크해야만 합니다.

+

또 다른 구조적 제한사항은 내용물에 관한 것입니다. CSS를 사용하여 선택된 엘리먼트들에 내용물을 제공해 줄 수 있으나, 내용물은 텍스트와 이미지에 한정되어 있으며, 그 위치지정은(positioning) 선택된 엘리먼트의 앞 또는 뒤로 한정되어 있습니다.

+

모질라는 이러한 제한 사항들을 극복할 미케니즘을 제공합니다: + + XBL + (XML 바인딩 언어, XML Binding Language)가 바로 그것입니다. XBL을 사용해서 선택된 엘리먼트를 다음의 것들과 링크시킬 수 있습니다:

+
    +
  • 에리먼트의 스타일 시트
    • +
  • 엘리먼트의 내용물
    • +
  • 엘리먼트의 속성(property)과 메소드(method)
    • +
  • 엘리먼트의 이벤트 핸들러(event hadler)
    • +
+

문서 레벨에서 모든것을 링크시키는 것을 피할 수 있기 때문에, 유지와 재사용이 쉬운 독립적인 부분들을 만들어 낼 수 있습니다.

+ + + + + + + +
+ More details
XBL 바인딩에 대한 더 많은 정보를 원하시면, 이 위키의 XBL 페이지를 보세요.
+

액션: XBL 예제

+

새로운 HTML 문서 doc6.html를 만드세요. 아래의 내용물을 복사해서 붙여넣으세요.

+
+ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
+<HTML>
+
+<HEAD>
+<TITLE>Mozilla CSS Getting Started - XBL demonstration</TITLE>
+<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
+</HEAD>
+
+<BODY>
+<H1>XBL demonstration</H1>
+<DIV id="square">Click Me</DIV>
+</BODY>
+
+</HTML>
+
+
+

새로운 CSS 파일 style6.css을 만드세요. 이 스타일 시트는 문서 스타일을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.

+
+ 
/*** XBL demonstration ***/
+#square {
+  -moz-binding: url("square.xbl#square");
+  }
+
+
+

새로운 텍스트 파일 square.xbl을 만드세요. 이 스타일 시트는 XBL 바인딩(binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+

 

+
+ 
<?xml version="1.0"?>
+<!DOCTYPE bindings>
+<bindings xmlns="http://www.mozilla.org/xbl">
+
+<binding id="square">
+
+  <resources>
+    <stylesheet src="bind6.css"/>
+    </resources>
+
+  <content xmlns="http://www.w3.org/1999/xhtml">
+    <div anonid="square"/>
+    <button anonid="button" type="button">
+      <xbl:children/>
+      </button>
+    </content>
+
+  <implementation>
+
+    <field name="square"><![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "square")
+      ]]></field>
+
+    <field name="button"><![CDATA[
+      document.getAnonymousElementByAttribute(this, "anonid", "button")
+      ]]></field>
+
+    <method name="doDemo">
+      <body><![CDATA[
+        this.square.style.backgroundColor = "#cf4"
+        this.square.style.marginLeft = "20em"
+        this.button.setAttribute("disabled", "true")
+        setTimeout(this.clearDemo, 2000, this)
+        ]]></body>
+      </method>
+
+    <method name="clearDemo">
+      <parameter name="me"/>
+      <body><![CDATA[
+        me.square.style.backgroundColor = "transparent"
+        me.square.style.marginLeft = "0"
+        me.button.removeAttribute("disabled")
+        ]]></body>
+      </method>
+
+    </implementation>
+
+  <handlers>
+    <handler event="click" button="0"><![CDATA[
+     if (event.originalTarget == this.button) this.doDemo()
+     ]]></handler>
+    </handlers>
+
+  </binding>
+
+</bindings>
+
+
+

새로운 CSS 파일 bind6.css을 만드세요. 이 새 스타일 시트는 바인딩에대한 스타일(style for the binding)을 담고 있습니다. 아래의 내용물을 복사해서 붙여넣으세요.

+
+ 
/*** XBL demonstration ***/
+[anonid="square"] {
+  width: 20em;
+  height: 20em;
+  border: 2px inset gray;
+  }
+
+[anonid="button"] {
+  margin-top: 1em;
+  padding: .5em 2em;"
+  }
+
+
+

브라우저에서 문서을 열고 버튼을 누르세요.

+

이 위키페이지는 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다. 버튼을 누른 전과 후가 대략 다음과 같이 보입니다:

+ + + + + + + +
+ + + + + + +
+

XBL demonstration

+
+
+  
+
+
+ 		+ + + + + + +
+

XBL demonstration

+
+
+  
+
+
+
+

이 예제에서 주의할 점:

+
    +
  • HTML 문서는 전처럼 문서의 스타일 시트에 링크되어 있습니다. 그러나 어떤 자바스크립트 코드에도 링크되어 있지 않습니다.
    • +
  • 문서는 아무 버튼도 포함하고 있지 않습니다. 문서는 버튼 레이블(label)의 텍스트만을 포함하고 있습니다. 버튼은 바인딩(binding)에 의해서 더해집니다.
    • +
  • 문서 스타일 시트는 바인딩(binding)에 링크되어 있습니다.
    • +
  • 바인딩(binding)은 그 자신의 스타일에 링크되어 있고, 그 자신의 내용물과 자바스크립트 코드를 지원합니다. 따라서, 바인딩은 독립적으로(self-contained) 되어있습니다.
    • +
+ + + + + + + +
+ Challenges
XBL 파일을 수정해서 사각형(square)이 색이 바뀔 때 오른쪽으로 점핑하는 대신 폭이(width) 2배가 되도록 하세요. +

DOM Inspector tool을 사용하여 문서를 조사해서 추가된 내용물을 확인해 보세요.

+
+

그럼 다음은?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

이 문서에서, 사각형(square)과 버튼은 독립적인 HTML 문서내에서 작동하는 + + 위젯(widget) + 이 되었습니다. 모질라는 사용자 인터페이스를 만들어내는 데 특별한 마크업 언어를 가지고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: XUL user interfaces

+

{{ languages( { "fr": "fr/CSS/Premiers_pas/Liaisons_XBL", "pl": "pl/CSS/Na_pocz\u0105tek/Wi\u0105zania_XBL" } ) }}

diff --git a/files/ko/web/css/getting_started/xml_data/index.html b/files/ko/web/css/getting_started/xml_data/index.html new file mode 100644 index 0000000000..fc674a29e4 --- /dev/null +++ b/files/ko/web/css/getting_started/xml_data/index.html @@ -0,0 +1,186 @@ +--- +title: XML data +slug: Web/CSS/Getting_Started/XML_data +tags: + - 'CSS:Getting_Started' +translation_of: Archive/Beginner_tutorials/XML_data +--- +

이 페이지는 XML 데이터와 함께 CSS를 사용할 수 있는 방법에 대한 예제들을 담고 있습니다. +

샘플 XML 문서와 이 문서를 브라우저에 디스플레이할 때 사용할 수 있는 스타일 시트를 만듭니다. +

+

정보: XML 데이터

+

XML(확장 마크업 언어, eXtensible Markup Lanugage)는 모든 종류의 구조화 된 데이터를 위한 범용(general-purpose) 언어입니다. +

디폴트로, 모질라 브라우저는 XML을 XML파일의 원래 데이터와 매우 유사한 포맷으로 디스플레이합니다. +데이터의 구조를 정의하는 실제 택들을 볼 수 있습니다. +

CSS 스타일 시트를 XML 문서와 링크함으로써, 이를 디스플레이하는 다른 방식을 정의할 수 있습니다. +이를 위해, 스타일 시트는 XML 문서의 택들과 HTML에 의해 사용되는 디스플레이 유형들(types)에 매핑(map)시키는 규칙들을 사용합니다. +

+ + +
Example +
XML 문서의 데이터는 html:input 택들을 사용합니다. 문서의 INFO 엘리먼트들이 HTML 단락처럼 디스플레이 되기 원한다고 가정합시다. +

문서의 스타일 시트에 INFO엘리먼트가 어떻게 디스플레이 될 것인지 지정합니다: +

+
+
INFO {
+  display: block;
+  margin: 1em 0;
+  }
+
+
+
+

가장 흔한 display 속성 값은 다음과 같습니다: +

+ + + + +
blockHTML의 DIV처럼 나타남 (머리글, 문단 등) +
inlineHTML의 SPAN처럼 나타남 (문서의 강조) +
+

HTML에서와 같은 방식으로 폰트, 스페이싱(spacing) 그리고 다른 세부사항들을 지정하는 자기 자신의 스타일 규칙을 더하세요. +

+ + +
More details +
display의 다른 값들은 그 엘리먼트를 리스트 아이템 처럼 , 또는 표의 컴포넌트(component) 처럼 디스플레이 합니다. +

디스플레이 유형들(types)의 완전한 리스트를 원하시면, CSS 규약의 The display property을 보세요. +

CSS 만을 사용하면, 디스플레이의 구조가 문서의 구조와 똑 같을 것입니다. +다른 기술을 사용해서 디스플레이 구조를 수정할 수 있습니다 — 예를 들면, XBL로 내용물을 더할 수 있으며 자바스크립트로 DOM을 수정할 수 있습니다. +

모질라에서의 XML에 관해서 더 많은 정보를 원하시면, 이 위키의 XML 페이지를 보세요. +

+
+

액션: XML 예제

+

새로운 XML 문서를 텍스트 파일 doc9.xml로 만드세요. +아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: +

+
<?xml version="1.0"?>
+<!-- XML demonstration -->
+
+<?xml-stylesheet type="text/css" href="style9.css"?>
+
+<!DOCTYPE planet>
+<planet>
+
+<ocean>
+<name>Arctic</name>
+<area>13,000</area>
+<depth>1,200</depth>
+</ocean>
+
+<ocean>
+<name>Atlantic</name>
+<area>87,000</area>
+<depth>3,900</depth>
+</ocean>
+
+<ocean>
+<name>Pacific</name>
+<area>180,000</area>
+<depth>4,000</depth>
+</ocean>
+
+<ocean>
+<name>Indian</name>
+<area>75,000</area>
+<depth>3,900</depth>
+</ocean>
+
+<ocean>
+<name>Southern</name>
+<area>20,000</area>
+<depth>4,500</depth>
+</ocean>
+
+</planet>
+
+

새로운 CSS 문서를 텍스트 파일 style9.css로 만드세요. +아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요: +

+
/*** XML demonstration ***/
+
+planet:before {
+  display: block;
+  width: 8em;
+  font-weight: bold;
+  font-size: 200%;
+  content: "Oceans";
+  margin: -.75em 0px .25em -.25em;
+  padding: .1em .25em;
+  background-color: #cdf;
+  }
+
+planet {
+  display: block;
+  margin: 2em 1em;
+  border: 4px solid #cdf;
+  padding: 0px 1em;
+  background-color: white;
+  }
+
+ocean {
+  display: block;
+  margin-bottom: 1em;
+  }
+
+name {
+  display: block;
+  font-weight: bold;
+  font-size: 150%;
+  }
+
+area {
+  display: block;
+  }
+
+area:before {
+  content: "Area: ";
+  }
+
+area:after {
+  content: " million km\B2";
+  }
+
+depth {
+  display: block;
+  }
+
+depth:before {
+  content: "Mean depth: ";
+  }
+
+depth:after {
+  content: " m";
+  }
+
+

브라우저에서 문서를 여세요: +

+ + +
+

Oceans

+

Arctic
+Area: 13,000 million km²
+Mean depth: 1,200 m

+

Atlantic
+Area: 87,000 million km²
+Mean depth: 3,900 m

+

. . .

+
+
+

이 예제에서 주의할 점: +

+
  • 수퍼스크립트(superscript) 2 ("million km²" 에 있는)는 CSS파일에 \B2로 코딩되어있는 유니코드(Unicode) 문자입니다. +
  • 헤딩(heading) "Oceans"는 음수인 상단 마진(negative top margin)을 갖고 있어 보더의 상단에 디스플레이 되도록 위쪽으로 이동 됩니다. +
+ + +
Challenge +
스타일 시트를 변경해서 문서를 표로 디스플레이하게 하세요. +

(수정할 예문들을 원하시면, CSS 규약의 Tables 챕터를 보세요.)

+
+

그럼 다음은

+

이 페이지를 이해하기 어렵거나 다른 코멘트가 있다면 Discussion에 기여하세요. +

이 페이지는 입문서의 마지막 페이지입니다. +모질라에서의 CSS에 관한 더 많은 정보를 원하시면, 이 위키의 CSS 메인 페이지(main page)를 보세요. +

{{ languages( { "en": "en/CSS/Getting_Started/XML_data", "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML" } ) }} diff --git a/files/ko/web/css/getting_started/xul_user_interfaces/index.html b/files/ko/web/css/getting_started/xul_user_interfaces/index.html new file mode 100644 index 0000000000..cd08f23579 --- /dev/null +++ b/files/ko/web/css/getting_started/xul_user_interfaces/index.html @@ -0,0 +1,315 @@ +--- +title: XUL user interfaces +slug: Web/CSS/Getting_Started/XUL_user_interfaces +tags: + - 'CSS:Getting_Started' +translation_of: Archive/Beginner_tutorials/XUL_user_interfaces +--- +

이 페이지는 사용자 인터페이스를 만드는 모질라의 특별한 언어를 설명합니다.

+

모질라 브라우저에서 작동하는 간단한 예제를 만들어봅니다.

+

정보: 사용자 인터페이스

+

HTML가 사용자 인터페이스에 대한 지원를 하고 있으나, 하나의 독립적인 애플리케이션을 만드는데 필요한 모든 기능을 지원하고 있지는 못합니다.

+

모질라는 사용자 인터페이스를 만드는 특별한 언어를 제공함으로써 이런 제한사항을 극복하고 있습니다: 이 언어가 바로 + + XUL + 입니다. (XML 사용자-인터페이스 언어(XML User-interface Language)로서 보통 " + + 줄(zool) + "라고 읽습니다.)

+

XUL에는 많은 흔히사용되는 사용자 인터페이스가 내장되어 있습니다. 예를 들면, XUL은 대화창(dialogue), 위저드(wizard) 같은 특별한 윈도우들 뿐만아니라 상태 바(status bar), 메뉴, 툴 바(tool bar), 그리고 브라우저까지 제공합니다.

+

더 많은 특화된 기능들은 이 입문서에서 보아 온 다른 기술들(CSS 스타일, 자바스크립트 코드 그리고 XBL 바인딩)과 함께 XUL을 사용함으로써 만들어 낼 수 있습니다.

+

다른 XML-기반 언어들과 같이, XUL은 CSS 스타일 시트를 사용합니다.

+ + + + + + + +
+ More details
XUL 사용자 인터페이스에 관한 더 많은 정보를 원하시면, 이 위키의 XUL 페이지를 보세요.
+

액션: XUL 예제

+

새로운 XUL 문서를 텍스트 파일 doc7.xul로 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="style7.css"?>
+<!DOCTYPE window>
+
+<window
+  xmlns="http&58;//www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  title="CSS Getting Started - XUL demonstration"
+  onload="init();">
+
+<script type="application/x-javascript" src="script7.js"/>
+
+<label class="head-1" value="XUL demonstration"/>
+
+<vbox>
+
+  <groupbox class="demo-group">
+    <caption label="Day of week calculator"/>
+    <grid>
+      <columns>
+        <column/>
+        <column/>
+        </columns>
+      <rows>
+        <row>
+          <label class="text-prompt" value="Date:"
+            accesskey="D" control="date-text"/>
+          <textbox id="date-text" type="timed"
+            timeout="750" oncommand="refresh();"/>
+          </row>
+        <row>
+          <label value="Day:"/>
+          <hbox id="day-box">
+            <label class="day" value="Sunday" disabled="true"/>
+            <label class="day" value="Monday" disabled="true"/>
+            <label class="day" value="Tuesday" disabled="true"/>
+            <label class="day" value="Wednesday" disabled="true"/>
+            <label class="day" value="Thursday" disabled="true"/>
+            <label class="day" value="Friday" disabled="true"/>
+            <label class="day" value="Saturday" disabled="true"/>
+            </hbox>
+          </row>
+        </rows>
+      </grid>
+    <hbox class="buttons">
+      <button id="clear" label="Clear" accesskey="C"
+        oncommand="clearDate();"/>
+      <button id="today" label="Today" accesskey="T"
+        oncommand="setToday();"/>
+      </hbox>
+    </groupbox>
+
+  <statusbar>
+    <statusbarpanel id="status"/>
+    </statusbar>
+
+</vbox>
+
+</window>
+
+
+

새로운 CSS 파일 style7.css을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
/*** XUL demonstration ***/
+window {
+  -moz-box-align: start;
+  background-color: -moz-dialog;
+  font: -moz-dialog;
+  padding: 2em;
+  }
+
+.head-1 {
+  font-weight: bold;
+  font-size: 200%;
+  padding-left: 5px;
+  }
+
+
+/* the group box */
+.demo-group {
+  padding: 1em;
+  }
+
+.demo-group grid {
+  margin-bottom: 1em;
+  }
+
+.demo-group column {
+  margin-right: .5em;
+  }
+
+.demo-group row {
+  margin-bottom: .5em;
+  }
+
+.demo-group .buttons {
+  -moz-box-pack: end;
+  }
+
+
+/* the day-of-week labels */
+.day {
+  margin-left: 1em;
+  }
+
+.day[disabled] {
+  color: #777;
+  }
+
+.day:first-child {
+  margin-left: 4px;
+  }
+
+
+/* the left column labels */
+.text-prompt {
+  padding-top: .25em;
+  }
+
+
+/* the date input box */
+#date-text {
+  max-width: 8em;
+  }
+
+
+/* the status bar */
+statusbar {
+  width: 100%;
+  border: 1px inset -moz-dialog;
+  margin: 4px;
+  padding: 0px 4px;
+  }
+
+#status {
+  padding: 4px;
+  }
+
+#status[warning] {
+  color: red;
+  }
+
+
+

새로운 텍스트 파일 script7.js을 만드세요. 아래의 내용물을 복사해서 붙여넣되 스크롤해서 전체를 다 넣을 수 있도록 하세요:

+
+ 
// XUL demonstration
+
+var dateBox, dayBox, currentDay, status; // elements
+
+// called by window onLoad
+function init() {
+  dateBox = document.getElementById("date-text")
+  dayBox = document.getElementById("day-box")
+  status = document.getElementById("status")
+  setToday();
+  }
+
+// called by Clear button
+function clearDate() {
+  dateBox.value = ""
+  refresh()
+  }
+
+// called by Today button
+function setToday() {
+  var d = new Date()
+  dateBox.value = (d.getMonth() + 1)
+    + "/" + d.getDate()
+    + "/" + d.getFullYear()
+  refresh()
+  }
+
+// called by Date textbox
+function refresh() {
+  var d = dateBox.value
+  var theDate = null
+
+  showStatus(null)
+  if (d != "") {
+    try {
+      var a = d.split("/")
+      var theDate = new Date(a[2], a[0] - 1, a[1])
+      showStatus(theDate)
+      }
+    catch (ex) {}
+    }
+  setDay(theDate)
+  }
+
+// internal
+function setDay(aDate) {
+  if (currentDay) currentDay.setAttribute("disabled", "true")
+  if (aDate == null) currentDay = null
+  else {
+    var d = aDate.getDay()
+    currentDay = dayBox.firstChild
+    while (d-- > 0) currentDay = currentDay.nextSibling
+    currentDay.removeAttribute("disabled")
+    }
+  dateBox.focus();
+  }
+
+function showStatus(aDate) {
+  if (aDate == null) {
+    status.removeAttribute("warning")
+    status.setAttribute("label", "")
+    }
+  else if (aDate === false || isNaN(aDate.getTime())) {
+    status.setAttribute("warning", "true")
+    status.setAttribute("label", "Date is not valid")
+    }
+  else {
+    status.removeAttribute("warning")
+    status.setAttribute("label", aDate.toLocaleDateString())
+    }
+  }
+
+
+

정확히 의도하신대로 결과를 보고 싶으시면, 브라우저의 디폴트 씸(default theme)을 사용하세요. 다른 씸(theme)을 사용하고 계시면, 씸이 몇가지 사용자 인터페이스 스타일을 변경해서 예제가 좀 이상하게 보일 수 도 있습니다.

+

브라우저에서 문서를 열고 인터페이스를 사용하세요.

+

이 위키페이지는 XUL과 자바스크립트를 지원하지 않습니다. 따라서 예제가 어떻게 실행되는 지 보여드릴 수 없습니다.

+

다음과 같이 보입니다:

+ + + + + + +
+

XUL demonstration

+
+

Day of week calculator

+ + + + + + + + + + + + + + + +
Date:6/27/2005
Day:Sunday Monday Tuesday Wednesday Thurdsay Friday Saturday
  +
+

Clear Today

+
+
+
+
+

June 27, 2005

+
+
+

이 예제에서 주의할 점:

+
    +
  • XUL문서는 이전처럼 스타일 시트에 링크되어 있으며, 스크립트에도 링크되어 있습니다.
    • +
  • 스크립트는 이 예제에서 중요하지 않습니다.
    • +
  • 보게되는 대부분의 스타일은 브라우저의 씸(theme)에의해서 정해집니다.
    • +
+

문서의 스타일 시트를 잘 검토해서 그안의 모든 규칙들을 확실히 이해하도록 하세요. 이해하지 못하는 규칙이 있으면, 코멘트 아웃(comment out)한 다음 브라우저를 리프레쉬해서 문서에 나타나는 효과를 보도록 하세요.

+ + + + + + + +
+ Challenge
DOM 조사 도구(DOM Inspector tool)을 사용해서 Date textbox를 검사하세요. Date textbox는 XBL 바인딩으로 만들어진 다른 엘리먼트들로 이루어져 있습니다. +

html:input 엘리먼트의 + + 클래스 + 를 찾아내세요. 이 엘리먼트가 실질적으로 샤용자 입력을 받고 있습니다.

+

이 지식을 이용해서, 스타일 시트에 규칙을 하나 더해서 Date box가 키보드 포거스를 가지게 될때 배경색이 희미한 푸른색으로 되게 하세요.(그러나 키보드 포커스가 다른 데 있을 경우 힌색이 되게 하세요.)

+
+

그럼 다음은?

+

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

+

이 예제에서 대부분의 사용자 인터페이스에 공통적으로 사용되는 표준적인 사각형 도형들을 보았습니다. 모질라는 스타일을 지정하는 CSS스타일 시트를 이용하여 도형을 만들어내는 쓰는 특별한 그래픽 언어도 지원하고 있습니다. 다음 페이지에서는 이것을 실행해 봅니다: SVG graphics

+

{{ languages( { "fr": "fr/CSS/Premiers_pas/Interfaces_utilisateur_XUL", "pl": "pl/CSS/Na_pocz\u0105tek/XUL-owe_interfejsy_u\u017cytkownika" } ) }}

diff --git a/files/ko/web/css/gradient/index.html b/files/ko/web/css/gradient/index.html new file mode 100644 index 0000000000..aebfab76bf --- /dev/null +++ b/files/ko/web/css/gradient/index.html @@ -0,0 +1,160 @@ +--- +title: +slug: Web/CSS/gradient +tags: + - CSS + - CSS Data Type + - CSS Images + - Graphics + - Layout + - Reference + - 그라데이션 + - 그레이디언트 +translation_of: Web/CSS/gradient +--- +
{{CSSRef}}
+ +

<gradient> CSS 자료형은 {{cssxref("<image>")}}의 특별한 종류로 여러 색의 점진적인 변화를 나타냅니다.

+ +
{{EmbedInteractiveExample("pages/css/type-gradient.html")}}
+ + + +

CSS 그레이디언트는 원본 크기가 없습니다. 즉 실제 크기나 선호 크기가 없습니다. 그레이디언트의 크기는 적용하는 요소의 크기와 동일해집니다.

+ +

구문

+ +

그레이디언트 함수

+ +

<gradient> 자료형은 아래 나열한 함수 중 하나를 사용해 생성합니다.

+ +

선형 그레이디언트

+ +

가상의 선을 따라 여러 색 사이를 전이합니다. {{cssxref("linear-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.linear-gradient {
+  background: linear-gradient(to right,
+      red, orange, yellow, green, blue, indigo, violet);
+}
+ +

{{EmbedLiveSample('선형_그레이디언트', 240, 80)}}

+ +

원형 그레이디언트

+ +

중심점으로부터 바깥으로 여러 색 사이를 전이합니다. {{cssxref("radial-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.radial-gradient {
+  background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
+ +

{{EmbedLiveSample('원형_그레이디언트', 240, 80)}}

+ +

반복 그레이디언트

+ +

요소를 꽉 채울 때까지 그레이디언트를 필요한 만큼 반복합니다. {{cssxref("repeating-linear-gradient()")}}나 {{cssxref("repeating-radial-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.linear-repeat {
+  background: repeating-linear-gradient(to top left,
+      lightpink, lightpink 5px, white 5px, white 10px);
+}
+
+.radial-repeat {
+  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
+}
+ +

{{EmbedLiveSample('반복_그레이디언트', 220, 180)}}

+ +

원뿔 그레이디언트

+ +

원을 따라 여러 색 사이를 전이합니다. {{cssxref("conic-gradient", "conic-gradient()")}} 함수를 사용해 생성합니다.

+ + + +
.conic-gradient {
+  background: conic-gradient(lightpink, white, powderblue);
+}
+
+ +

{{EmbedLiveSample('원뿔_그레이디언트', 240, 80)}}

+ +

보간

+ +

색과 관련한 다른 보간과 마찬가지로, 그레이디언트도 색과 투명도가 동시에 변할 때 예상하지 못한 회색이 등장하는걸 방지하기 위해 알파 채널을 미리 곱한 색 공간을 사용해 계산합니다. 오래 된 브라우저에서 {{cssxref("<color>", "", "#transparent_키워드")}} 키워드를 사용할 땐 다르게 행동할 수 있음을 주의하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#gradients', '<gradient>')}}{{Spec2('CSS4 Images')}}Adds conic-gradient.
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.image.gradient")}}

+ +

같이 보기

+ +
    +
  • CSS 그레이디언트 사용하기
    • +
  • 그레이디언트 함수: {{cssxref("linear-gradient", "linear-gradient()")}}, {{cssxref("radial-gradient", "radial-gradient()")}}, {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • +
diff --git a/files/ko/web/css/grid-area/index.html b/files/ko/web/css/grid-area/index.html new file mode 100644 index 0000000000..9daba54c7b --- /dev/null +++ b/files/ko/web/css/grid-area/index.html @@ -0,0 +1,206 @@ +--- +title: grid-area +slug: Web/CSS/grid-area +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid-area +--- +

grid-area 속성은 {{cssxref("grid-row-start")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-row-end")}} and {{cssxref("grid-column-end")}} 값을 한번에 설정하는 shorthand property 입니다. 해당 속성값은 grid item의 크기와 위치를 결정합니다., specifying a grid item’s size and location within the {{glossary("grid rows", "grid row")}} by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its {{glossary("grid areas", "grid area")}}.

+ +
{{EmbedInteractiveExample("pages/css/grid-area.html")}}
+ + + +

If four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value.

+ +

When grid-column-end is omitted, if grid-column-start is a {{cssxref("<custom-ident>")}}, grid-column-end is set to that <custom-ident>; otherwise, it is set to auto.

+ +

When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is set to that <custom-ident>; otherwise, it is set to auto.

+ +

When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four longhands are set to that value. Otherwise, it is set to auto.

+ +

The grid-area property can also be set to a {{cssxref("<custom-ident>")}} which acts as a name for the area, which can then be placed using {{cssxref("grid-template-areas")}}.

+ +

Syntax

+ +
/* Keyword values */
+grid-area: auto;
+grid-area: auto / auto;
+grid-area: auto / auto / auto;
+grid-area: auto / auto / auto / auto;
+
+/* <custom-ident> values */
+grid-area: some-grid-area;
+grid-area: some-grid-area / another-grid-area;
+
+/* <integer> && <custom-ident>? values */
+grid-area: some-grid-area 4;
+grid-area: some-grid-area 4 / 2 another-grid-area;
+
+/* span && [ <integer> || <custom-ident> ] values */
+grid-area: span 3;
+grid-area: span 3 / span some-grid-area;
+grid-area: 2 span / another-grid-area span;
+
+/* Global values */
+grid-area: inherit;
+grid-area: initial;
+grid-area: unset;
+
+ +

Values

+ +
+
auto
+
Is a keyword indicating that the property contributes nothing to the grid item’s placement, indicating auto-placement or a default span of 1.
+
<custom-ident>
+
If there is a named line with the name '<custom-ident>-start'/'<custom-ident>-end', it contributes the first such line to the grid item’s placement. +

Note: Named grid areas automatically generate implicit named lines of this form, so specifying grid-area: foo; will choose the start/end edge of that named grid area (unless another line named foo-start/foo-end was explicitly specified before it).

+ +

Otherwise, this is treated as if the integer 1 had been specified along with the <custom-ident>.

+
+
<integer> && <custom-ident>?
+
Contributes the nth grid line to the grid item’s placement. If a negative integer is given, it instead counts in reverse, starting from the end edge of the explicit grid. +

If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines are assumed to have that name for the purpose of finding this position.

+ +

An {{cssxref("<integer>")}} value of 0 is invalid.

+
+
span && [ <integer> || <custom-ident> ]
+
Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid item’s grid area is n lines from the opposite edge. +

If a name is given as a {{cssxref("<custom-ident>")}}, only lines with that name are counted. If not enough lines with that name exist, all implicit grid lines on the side of the explicit grid corresponding to the search direction are assumed to have that name for the purpose of counting this span.

+ +

If the {{cssxref("<integer>")}} is omitted, it defaults to 1. Negative integers or 0 are invalid.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML content

+ +
<div id="grid">
+  <div id="item1"></div>
+  <div id="item2"></div>
+  <div id="item3"></div>
+</div>
+ +

CSS content

+ +
#grid {
+  display: grid;
+  height: 100px;
+  grid-template: repeat(4, 1fr) / 50px 100px;
+}
+
+#item1 {
+  background-color: lime;
+  grid-area: 2 / 2 / auto / span 3;
+}
+
+#item2 {
+  background-color: yellow;
+}
+
+#item3 {
+  background-color: blue;
+}
+
+ +

{{EmbedLiveSample("Example", "100%", "150px")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-area", "grid-area")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid-area")}}

+ +

See also

+ +
    +
  • Related CSS properties: {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-template-areas")}}
    • +
  • Grid Layout Guide: Grid template areas
    • +
  • Video tutorial: Grid Template Areas
    • +
+ + diff --git a/files/ko/web/css/grid/index.html b/files/ko/web/css/grid/index.html new file mode 100644 index 0000000000..7515db99be --- /dev/null +++ b/files/ko/web/css/grid/index.html @@ -0,0 +1,192 @@ +--- +title: grid +slug: Web/CSS/grid +tags: + - CSS + - CSS Grid + - CSS Property + - Reference +translation_of: Web/CSS/grid +--- +

grid CSS 속성은 shorthand property 입니다. 외재적인 속성인 ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}), 값과 내재적인 속성인 ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}), 값을 한번에 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/grid.html")}}
+ + + +
+

Note: You can only specify the explicit or the implicit grid properties in a single grid declaration. The sub-properties you don’t specify are set to their initial value, as normal for shorthands. Also, the gutter properties are NOT reset by this shorthand.

+
+ +

Syntax

+ +
/* <'grid-template'> values */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? values */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> values */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Global values */
+grid: inherit;
+grid: initial;
+grid: unset;
+
+ +

Values

+ +
+
<'grid-template'>
+
{{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-areas")}} 값을 내포하고 있는 {{cssxref("grid-template")}}의 값을 정의합니다.
+
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?
+
{{cssxref("grid-template-rows")}} (and the {{cssxref("grid-template-columns")}} property to none)은 auto-flow 값을 설정합니다. {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to auto)은 auto-repeat를 설정합니다. {{cssxref("grid-auto-flow")}} 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 dense 입니다. +

만약 grid 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.

+
+
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
+
{{cssxref("grid-template-columns")}} (and the {{cssxref("grid-template-rows")}} property to none)은 auto-flow 값을 설정합니다. {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to auto)은 열(row)에 대한 auto-repeat를 설정합니다. {{cssxref("grid-auto-flow")}} 또한 마찬가지로 auto-repeat에 영향을 줍니다. 만약 이 값이 생략되었다면 그 기본값은 dense 입니다. +

만약  grid 의 sub-properties가 있다면, 해당 값으로 초기화 됩니다.

+
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Example

+ +

HTML Content

+ +
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+ +

CSS Content

+ +
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", "100%", 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Initial definition
+ +

{{cssinfo}}

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.grid")}}

+ +

See also

+ + + + diff --git a/files/ko/web/css/height/index.html b/files/ko/web/css/height/index.html new file mode 100644 index 0000000000..8682d0c2c5 --- /dev/null +++ b/files/ko/web/css/height/index.html @@ -0,0 +1,175 @@ +--- +title: height +slug: Web/CSS/height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

height CSS 속성은 요소의 높이를 지정합니다. 기본값은 콘텐츠 영역의 높이지만, {{cssxref("box-sizing")}}이 border-box라면 테두리 영역의 높이를 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/height.html")}}
+ + + +

{{cssxref("min-height")}}와 {{cssxref("max-height")}} 속성은 height를 덮어씁니다.

+ +

구문

+ +
/* 키워드 */
+height: auto;
+
+/* <length> */
+height: 120px;
+height: 10em;
+
+/* <percentage> */
+height: 75%;
+
+/* 전역 값 */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
높이의 절대값.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 높이의 백분율.
+
border-box {{experimental_inline}}
+
앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 보더 박스에 적용.
+
content-box {{experimental_inline}}
+
앞선 {{cssxref("<length>")}} 또는 {{cssxref("<percentage>")}}가 요소의 콘텐츠 박스에 적용.
+
auto
+
브라우저가 요소의 너비를 계산하고 선택.
+
fill {{experimental_inline}}
+
글쓰기 방향에 따라 fill-available 인라인 크기 또는 fill-available 블록 크기를 사용.
+
max-content {{experimental_inline}}
+
본질적인 선호 높이.
+
min-content {{experimental_inline}}
+
본질적인 최소 높이.
+
available {{experimental_inline}}
+
컨테이닝 블록 너비에서 수평 여백, 테두리, 패딩을 제외한 값.
+
fit-content {{experimental_inline}}
+
다음 중 더 큰 값. +
    +
  • 본질적인 최소 너비
    • +
  • 본질적인 선호 너비와 사용 가능한 너비 중 작은 값
    • +
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<div id="taller">제 키는 50픽셀입니다.</div>
+<div id="shorter">제 키는 25픽셀입니다.</div>
+<div id="parent">
+  <div id="child">
+    제 키는 부모의 절반입니다.
+  </div>
+</div>
+
+ +

CSS

+ +
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 2px solid blue;
+}
+
+#taller {
+  height: 50px;
+}
+
+#shorter {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+
+ +

결과

+ +

{{EmbedLiveSample('예제', 'auto', 240)}}

+ +

접근성 고려사항

+ +

페이지를 확대하거나 글꼴 크기를 늘렸을 때 height 속성을 지정한 요소가 잘리거나 다른 내용을 가리지 않도록 확인하세요.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#width-and-height', 'height')}}{{Spec2('CSS3 Box')}}Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Initial definition.
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Adds new sizing keywords for width and height.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.height")}}

+ +

같이 보기

+ +
    +
  • box model, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • +
diff --git a/files/ko/web/css/hyphens/index.html b/files/ko/web/css/hyphens/index.html new file mode 100644 index 0000000000..82f963023f --- /dev/null +++ b/files/ko/web/css/hyphens/index.html @@ -0,0 +1,159 @@ +--- +title: hyphens +slug: Web/CSS/hyphens +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/hyphens +--- +
{{CSSRef}}
+ +

CSS hyphens 속성은 여러 줄에 걸치는 텍스트에서 단어에 붙임표를 추가하는 방식을 설정합니다. 붙임표를 아예 방지할 수도 있고, 수동으로 지정한 곳에서만 발생하도록 나타낼 수도 있으며, 브라우저가 자동으로 적절한 곳에 붙임표를 삽입하도록 허용할 수도 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/hyphens.html")}}
+ + + +

붙임표 규칙은 언어별로 다릅니다. HTML의 언어는 lang 특성으로 알아낼 수 있으며, 브라우저는 lang 특성과 해당 언어에 적합한 붙임표 규칙이 모두 사용 가능할 때에만 붙임표를 추가합니다. XML에서는 xml:lang 특성을 사용해야 합니다.

+ +
+

참고: 명세는 붙임표 규칙을 명시하지 않고 있으므로 동작 방식이 브라우저마다 다를 수 있습니다.

+
+ +

구문

+ +
/* 키워드 값 */
+hyphens: none;
+hyphens: manual;
+hyphens: auto;
+
+/* 전역 값 */
+hyphens: inherit;
+hyphens: initial;
+hyphens: unset;
+
+ +

hyphens 속성은 아래 목록 중 하나의 키워드를 사용해 지정할 수 있습니다.

+ +

값

+ +
+
none
+
단어 내의 문자가 줄 바꿈 위치를 나타내더라도 단어를 내에서 줄을 바꾸지 않습니다. 줄 바꿈은 공백 문자에서만 발생합니다.
+
manual
+
단어 내의 줄 바꿈 위치를 나타내는 문자에서는 줄을 바꿀 수 있습니다. 아래의 {{anch("줄 바꿈 위치 제안")}}에서 자세한 정보를 알아보세요.
+
auto
+
브라우저가 단어 내의 적합한 붙임표 위치를 자유롭게 골라서 줄을 바꿀 수 있습니다. 단, 줄 바꿈 위치를 제안(아래의 {{anch("줄 바꿈 위치 제안")}} 을 보세요)한 경우에는 해당 위치를 사용합니다.
+
+ +
+

참고: 적합한 붙임표 규칙을 선택할 수 있도록 언어를 제대로 명시해야 auto 값의 동작도 정확해집니다. HTML lang 특성을 사용해 해당 언어의 붙임표 규칙을 사용할 것을 확실하게 지정하세요.

+
+ +

줄 바꿈 위치 제안

+ +

아래의 두 가지 Unicode 문자를 사용해서 수동으로 줄 바꿈 위치를 제안할 수 있습니다.

+ +
+
U+2010 (HYPHEN)
+
붙임표, "하드" 하이픈 문자는 눈에 보이는 줄 바꿈 위치를 나타냅니다. 실제로 줄이 바뀌지는 않더라도 붙임표를 볼 수 있습니다.
+
U+00AD (SHY)
+
투명한 "소프트" 하이픈("soft" hyphen)입니다. 눈에 보이지 않으며, 브라우저가 붙임표를 사용해 단어를 끊을 위치로 선택합니다. HTML에서는 &shy;를 사용해 입력하세요.
+
+ +
+

HTML {{htmlelement("wbr")}} 요소로 인한 줄 바꿈으로는 붙임표가 추가되지 않습니다.

+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

붙임표 줄 바꿈 지정하기

+ +

다음 예제는 hyphens 속성에 사용할 수 있는 세 개 값을 시연합니다.

+ +

HTML

+ +
<dl>
+  <dt><code>none</code>: no hyphen; overflow if needed</dt>
+  <dd lang="en" class="none">An extreme&shy;ly long English word</dd>
+  <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt>
+  <dd lang="en" class="manual">An extreme&shy;ly long English word</dd>
+  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
+  <dd lang="en" class="auto">An extreme&shy;ly long English word</dd>
+</dl>
+
+ +

CSS

+ +
dd {
+  width: 55px;
+  border: 1px solid black;
+ }
+dd.none {
+  -webkit-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+dd.manual {
+  -webkit-hyphens: manual;
+  -ms-hyphens: manual;
+  hyphens: manual;
+}
+dd.auto {
+  -webkit-hyphens: auto;
+  -ms-hyphens: auto;
+  hyphens: auto;
+}
+
+ +

결과

+ +
+

{{EmbedLiveSample("붙임표_줄_바꿈_지정하기", "100%", 490)}}

+
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS3 Text", "#hyphens-property", "hyphens")}}{{Spec2("CSS3 Text")}}Initial definition
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.properties.hyphens")}}

+
+ +

같이 보기

+ +
    +
  • {{Cssxref("content")}}
    • +
  • {{cssxref("overflow-wrap")}} (이전 이름 word-wrap)
    • +
  • {{cssxref("word-break")}}
    • +
diff --git a/files/ko/web/css/id_selectors/index.html b/files/ko/web/css/id_selectors/index.html new file mode 100644 index 0000000000..10df449707 --- /dev/null +++ b/files/ko/web/css/id_selectors/index.html @@ -0,0 +1,85 @@ +--- +title: ID 선택자 +slug: Web/CSS/ID_selectors +tags: + - CSS + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/ID_selectors +--- +
{{CSSRef}}
+ +

CSS ID 선택자는 요소의 {{htmlattrxref("id")}} 특성 값을 비교하여, 완전히 동일한 id를 가진 요소를 선택합니다.

+ +
/* id="demo" 요소 선택 */
+#demo {
+  border: red 2px solid;
+}
+ +

구문

+ +
#id_value { style properties }
+ +

위의 구문은 특성 선택자를 사용한 다음 구문과 동일합니다.

+ +
[id=id_value] { style properties }
+ +

예제

+ +

CSS

+ +
#identified {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<div id="identified">특별한 ID를 가진 요소에요!</div>
+<div>이건 그냥 div에요.</div>
+
+ +

결과

+ +

{{EmbedLiveSample("Example", '100%', 50)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.id")}}

diff --git a/files/ko/web/css/image-rendering/index.html b/files/ko/web/css/image-rendering/index.html new file mode 100644 index 0000000000..85522966f0 --- /dev/null +++ b/files/ko/web/css/image-rendering/index.html @@ -0,0 +1,120 @@ +--- +title: image-rendering +slug: Web/CSS/image-rendering +tags: + - CSS + - CSS Images + - CSS Property + - Reference +translation_of: Web/CSS/image-rendering +--- +
{{CSSRef}}
+ +

image-rendering CSS 프로퍼티는 브라우저의 이미지 스케일링 방식에 대한 힌트를 제공합니다. 이 프로퍼티는 엘리먼트 자신에게 적용시킵니다. 스케일링(크기변경)이 안 된 이미지에게는 적용되지 않습니다.

+ +

예를들어, 100x100 픽셀의 이미지가 있는데 페이지에서 요구하는 이미지는 200x200픽셀 (혹은 50x50px)이라면, 이미지는 새로운 면적만큼의 특정 알고리즘으로 인해 확대(혹은 축소)됩니다. 스케일링은 사용자의 상호작용(줌기능) 으로 인해 일어날겁니다.

+ +

{{cssinfo}}

+ +

구문

+ +
/* 키워드 값 */
+image-rendering: auto;
+image-rendering: crisp-edges;
+image-rendering: pixelated;
+
+/* 전역 값 */
+image-rendering: inherit;
+image-rendering: initial;
+image-rendering: unset;
+
+ +

Values

+ +
+
auto
+
기본값입니다.
+ 이미지의 스케일링 알고리즘은 이미지를 최대치로 활용해서 나타냅니다. 특히, 스케일링 알고리즘은 이중선형보간법같은 알고리즘이 보기에 괜찮은 "부드러운"색상을 나타냅니다. 사진같은 종류의 것들을 위해 GEcko엔진 1.9버전(파이어폭스 3.0) 에서는 이중선형 리샘플링(고품질) 을 사용해왔습니다.
+
+ +
+
+ +
+
crisp-edges
+
이미지 스케일링 알고리즘은 반드시 색상대조와 이미지의 표준을 맞게 보존해야 합니다. 그리고 smooth 하지 못한 색상 혹은 이미지의 흐림효과 또한 알고리즘 공정에 있어야합니다. 이 속성은 픽셀아트같은 의도되어 만들어진 이미지들에게 필요합니다.
+
pixelated
+
이미지 스케일링을 크게 확대할 때는 "nearest neighbor" 혹은 비슷한 알고리즘을 반드시 사용해야 합니다. 그래서 이미지의 큰 픽셀로 구성해서 나타낼 수 있습니다. 이미지를 작게 축소할 때는 "auto" 속성과 같습니다.
+
+ +
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.
+ +

공식 문법

+ +
{{csssyntax}}
+ +

예제

+ +
/* applies to GIF and PNG images; avoids blurry edges */
+
+img[src$=".gif"], img[src$=".png"] {
+                   image-rendering: -moz-crisp-edges;         /* Firefox */
+                   image-rendering:   -o-crisp-edges;         /* Opera */
+                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+                   image-rendering: crisp-edges;
+                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+                 }
+
+
+ +
div {
+        background: url(chessboard.gif) no-repeat 50% 50%;
+        image-rendering: -moz-crisp-edges;         /* Firefox */
+        image-rendering:   -o-crisp-edges;         /* Opera */
+        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+        image-rendering: crisp-edges;
+        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+}
+ +

{{EmbedLiveSample('예제')}}

+ +

Live Examples

+ +

image-rendering: auto;

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

image-rendering: crisp-edges; (-webkit-optimize-contrast)

+ +

78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}}Initial definition
+ +
+

Note: Though initially close from the SVG image-rendering property, the values are quite different now.

+
+ +

브라우저 지원

+ +

{{Compat("css.properties.image-rendering")}}

diff --git a/files/ko/web/css/image/index.html b/files/ko/web/css/image/index.html new file mode 100644 index 0000000000..7d68b3fadc --- /dev/null +++ b/files/ko/web/css/image/index.html @@ -0,0 +1,175 @@ +--- +title: +slug: Web/CSS/image +tags: + - CSS + - CSS Data Type + - CSS Images + - Graphics + - Layout + - Reference + - Web +translation_of: Web/CSS/image +--- +
{{CSSRef}}
+ +

<image> CSS 자료형은 2차원 이미지를 나타냅니다. 이미지는 {{cssxref("<url>")}}로 참조하는 일반 이미지, {{cssxref("<gradient>")}} 또는 {{cssxref("element")}}를 사용해 동적으로 생성하는 이미지 두 종류가 있습니다. 다른 이미지 함수로는 {{cssxref("imagefunction", "image()")}}, {{cssxref("image-set")}}, {{cssxref("cross-fade")}} 등이 있습니다. 이미지는 {{CSSxRef("background-image")}}, {{CSSxRef("border-image")}}, {{CSSxRef("content")}}, {{CSSxRef("cursor")}}, {{CSSxRef("list-style-image")}} 등 많은 속성에 사용할 수 있습니다.

+ +

이미지 유형

+ +

CSS는 다음 이미지 종류를 처리할 수 있습니다.

+ +
    +
  • 본질적인 크기(원래 크기)를 가진 이미지. JPEG, PNG 등 래스터 포맷.
    • +
  • 여러 개의 본질적인 크기를 가진 이미지. 하나의 파일이 이미지의 여러 버전을 가지고 있는 경우. 일부 .ico 파일 등. 이 때, 본질적인 크기는 제일 크고 컨테이닝 박스와 가로세로 비율이 제일 비슷한 이미지를 따라갑니다.
    • +
  • 본질적인 크기는 없지만 본질적인 종횡비를 가진 이미지. SVG 등 벡터 포맷.
    • +
  • 본질적인 크기도, 종횡비도 없는 이미지. CSS 그레이디언트 등.
    • +
+ +

CSS는 객체의 구체적인 크기를 (1) 그 본질적인 크기, (2) {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("background-size")}} 등 CSS 속성으로 설정한 크기, (3) 아래 표에 나열한, 이미지를 설정한 속성에 따른 기본값을 통해 결정합니다.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
객체 유형 (CSS 속성)객체 크기의 기본값
{{CSSxRef("background-image")}}요소의 배경 위치 영역 크기
{{CSSxRef("list-style-image")}}1em 문자의 크기
{{CSSxRef("border-image-source")}}요소의 테두리 이미지 영역 크기
{{CSSxRef("cursor")}}브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈
{{CSSxRef("mask-image")}}?
{{CSSxRef("shape-outside")}}?
{{CSSxRef("mask-border-source")}}?
{{cssxref("@counter-style")}}의 {{CSSxRef("symbols")}}실험적 기능. 지원 시엔 브라우저가 정의한, 클라이언트 시스템의 일반적인 커서 사이즈
의사 요소의 {{CSSxRef("content")}} ({{CSSxRef("::after")}}/{{CSSxRef("::before")}})300px × 150px 사각형
+ +

구체적인 크기는 다음 알고리즘을 사용해 계산합니다.

+ +
    +
  • 너비와 높이 모두 지정한 크기가 있다면 그 값을 구체적인 크기로 사용합니다.
    • +
  • 너비 또는 높이만 지정한 크기가 있고, 본질적인 종횡비가 있다면 그 값으로 다른 크기를 계산해 사용하고, 지정한 크기가 본질적인 크기와 일치하면 다른 크기도 본질적인 크기를 사용하고, 모두 아니면 객체 크기의 기본값을 사용합니다.
    • +
  • 너비도 높이도 지정한 크기가 없다면, 객체 크기의 기본값을 넘지 않는 한도에서 이미지의 본질적인 종횡비를 사용해 구체적인 크기를 결정합니다. 본질적인 종횡비가 없으면 요소의 종횡비를 사용하며, 요소도 가지고 있지 않으면 객체 크기의 기본값에서 가져옵니다.
    • +
+ +
참고: 모든 브라우저가 모든 속성에 모든 유형의 이미지를 지원하는건 아닙니다. {{anch("브라우저 호환성")}} 항목을 참고하세요.
+ +

구문

+ +

<image> 자료형은 다음 중 하나로 나타낼 수 있습니다.

+ +
    +
  • {{CSSxRef("<url>")}} 자료형
    • +
  • {{CSSxRef("<gradient>")}} 자료형
    • +
  • {{CSSxRef("element")}} 함수로 정의한 웹페이지의 일부
    • +
  • {{CSSxRef("image()")}} 함수로 정의한 이미지, 이미지 조각, 단일 색
    • +
  • {{CSSxRef("cross-fade")}} 함수로 정의한 두 개 이상 이미지의 혼합
    • +
  • {{CSSxRef("image-set")}} 함수로 정의한 이미지 중 적절한 해상도
    • +
+ +

예제

+ +

유효한 이미지

+ +
url(test.jpg)               /* "test.jpg"가 실제로 이미지일 때 <url> */
+linear-gradient(blue, red)  /* <gradient> */
+element(#realid)            /* "realid"가 페이지에 존재하는 ID일 때
+                               element() 함수로 참조한 웹페이지의 일부 */
+image(ltr 'arrow.png#xywh=0,0,16,16', red)
+                            /* "arrow.png"가 지원되는 이미지일 때 <url>의 일부, 원본의 좌상단부터 16x16
+                               지원하지 않는 이미지일 때 빨강 단색
+                               RTL 언어에서는 이미지아 가로방향 반전됨 */
+cross-fade(20% url(twenty.png), url(eighty.png))
+                            /* 혼합 이미지, "twenty.png" 불투명도 20%
+                                         "eighty.png" 불투명도 80% */
+image-set('test.jpg' 1x, 'test-2x.jpg' 2x)
+                            /* 여러 해상도의 이미지 묶음 */
+ +

유효하지 않은 이미지

+ +
nourl.jpg            /* 이미지 파일은 url() 함수로 정의해야 함 */
+url(report.pdf)      /* url() 함수가 가리키는 파일은 이미지여야 함 */
+element(#fakeid)     /* 요소 ID가 페이지에 존재해야 함 */
+image(z.jpg#xy=0,0)  /* 이미지 조각은 xywh=#,#,#,# 형식으로 작성해야 함 */
+image-set('cat.jpg' 1x, 'dog.jpg' 1x) /* 각각의 이미지가 다른 해상도를 가져야 함 */
+
+ +

접근성 고려사항

+ +

브라우저는 배경 이미지에 대한 어떠한 정보도 보조 기술에 제공하지 않습니다. 스크린 리더 사용자에게 특히 큰 영향을 주는데, 스크린 리더가 배경 이미지의 존재를 표현하지 않으므로 사용자도 이미지에 대해 알 수 없기 때문입니다. 이미지가 문서의 목적을 이해하는 것에 중요한 정보를 포함하는 경우 문서에 구조적으로 포함하는 편이 좋습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Images", "#typedef-image", "<image>")}}{{Spec2("CSS4 Images")}}Adds {{CSSxRef("element()")}}, {{CSSxRef("image()")}}, {{CSSxRef("image-set")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient", "repeating-conic-gradient()")}}, and {{CSSxRef("image-resolution")}}.
{{SpecName("CSS3 Images", "#typedef-image", "<image>")}}{{Spec2("CSS3 Images")}}Initial definition. Before this, there was no explicitly defined <image> data type. Images could only be defined using the url() functional notation.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.image")}}

+ +

같이 보기

+ +
    +
  • {{CSSxRef("<gradient>")}}
    • +
  • {{CSSxRef("element")}}
    • +
  • {{CSSxRef("imagefunction", "image()")}}
    • +
  • {{CSSxRef("image-set")}}
    • +
  • {{CSSxRef("cross-fade")}}
    • +
diff --git a/files/ko/web/css/index.html b/files/ko/web/css/index.html new file mode 100644 index 0000000000..7c5210e812 --- /dev/null +++ b/files/ko/web/css/index.html @@ -0,0 +1,96 @@ +--- +title: 'CSS: Cascading Style Sheets' +slug: Web/CSS +tags: + - CSS + - Design + - Landing + - Layout + - Reference + - 'l10n:priority' + - 스타일시트 +translation_of: Web/CSS +--- +
{{CSSRef}}
+ +

Cascading Style Sheets(CSS)는 HTML이나 XML(SVG, XHTML 같은 XML 방언(dialect) 포함)로 작성된 문서의 표현을 기술하기 위해 쓰이는 스타일시트 언어입니다. CSS는 요소가 화면, 종이, 음성이나 다른 매체 상에 어떻게 렌더링되어야 하는지 기술합니다.

+ +

CSS는 오픈 웹의 핵심 언어 중 하나이며 W3C 명세에 따라 브라우저끼리 표준을 맞춥니다. 레벨 단위로 개발한 CSS1은 더 이상 사용하지 않고, 다음 레벨인 CSS2.1은 권고안이며, 레벨보다 작은 단위인 모듈로 나뉜 CSS3은 표준화 과정을 밟고 있습니다.

+ +
+
    +
  • CSS 소개 + +

    웹 개발을 처음 하신다면 CSS 기본 문서를 읽어 CSS가 무엇인지와 사용법을 배워보세요.

    +
    • +
  • CSS 자습서 +

    시작하는 완전한 초보자를 돕는 단계별 입문서. 필요한 기초를 모두 제공합니다.

    +
    • +
  • CSS 참고서 +

    숙련된 개발자를 위한 전체 CSS 참고서는 CSS의 모든 속성과 개념을 설명합니다.

    +
    • +
+ +
+
+

자습서

+ +
+
CSS 소개
+
선택자, 속성, 규칙 작성, HTML에 CSS 적용하기, 길이와 색 등 단위 지정하기, 종속과 상속, 박스 모델, 디버깅 등 CSS의 작동 원리와 기본을 배웁니다.
+
텍스트 꾸미기
+
글꼴, 굵기, 기울이기, 줄 간격과 글자 간격, 그림자 등 텍스트 스타일의 기초를 논합니다. 사용자 설정 글꼴 적용, 목록과 링크 꾸미기로 마무리합니다.
+
박스 꾸미기
+
웹 페이지 레이아웃의 기초 중 하나인 박스 스타일을 살펴봅니다. 박스 모델에 대해 복습하고, 마진, 테두리, 패딩, 배경색, 이미지, 그림자, 필터 등 박스 레이아웃을 조절하는 법을 배웁니다.
+
CSS 레이아웃
+
텍스트를 꾸미고 박스를 변형하는 등 CSS 기초를 살펴보았으니, 이제 화면이나 서로에게 상대적인 위치에 올바르게 배치하는 법을 배웁니다. 필요한 전제조건은 다루었으니 각기 다른 디스플레이 설정, 플로팅과 포지션을 사용하는 전통적인 레이아웃법 및 플렉스박스 등 새로운 방법 등 더 깊은 영역을 배웁니다.
+
+
+ +
+

참고서

+ + + +

쿡북

+ +

CSS 레이아웃 쿡북은 여러분의 웹 사이트에서도 구현해야 할 수 있는, 흔히 쓰이는 레이아웃 패턴을 모아놓은 문서입니다. 프로젝트의 시작 코드는 물론이고, 레이아웃 명세를 사용하는 각기 다른 방법과 개발자로서 고를 수 있는 선택지를 제공합니다.

+ +

CSS 개발 도구

+ + +
+
+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/index/index.html b/files/ko/web/css/index/index.html new file mode 100644 index 0000000000..953130cd26 --- /dev/null +++ b/files/ko/web/css/index/index.html @@ -0,0 +1,10 @@ +--- +title: CSS documentation index +slug: Web/CSS/Index +tags: + - CSS + - Index + - MDN Meta +translation_of: Web/CSS/Index +--- +

{{Index("/ko/docs/Web/CSS")}}

diff --git a/files/ko/web/css/inherit/index.html b/files/ko/web/css/inherit/index.html new file mode 100644 index 0000000000..71f7890cc3 --- /dev/null +++ b/files/ko/web/css/inherit/index.html @@ -0,0 +1,77 @@ +--- +title: inherit +slug: Web/CSS/inherit +tags: + - CSS + - CSS Cascade + - Layout + - Reference + - Web +translation_of: Web/CSS/inherit +--- +
{{CSSRef}}
+ +

CSS inherit 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 계산값을 받아 사용합니다. CSS {{cssxref("all")}} 단축 속성을 포함한 모든 속성에 사용할 수 있습니다.

+ +

상속되는 속성(inherited properties)의 경우, 이는 기본 동작(behavior)을 강화하고 오직 다른 규칙을 재정의(override)해야 합니다. 상속되지 않는 속성(non-inherited properties)은, 이는 보통 비교적 거의 의미가 없는 동작을 지정하고 당신은 대신 {{cssxref("initial")}} 혹은 {{cssxref("all")}} 속성에 {{cssxref("unset")}} 사용을 고려할 지도 모릅니다.

+ +

상속(Inheritance)은 심지어 부모 요소가 포함(containing) 블록이 아니더라도, 항상 문서 트리 내 부모 요소로부터입니다.

+ +

예제

+ +
 /* h2를 green으로 만듦 */
+ h2 { color: green; }
+
+ /* 부모 요소의 color를 사용하도록 sidebar 내의 h2를 홀로 남김 */
+ #sidebar h2 { color: inherit; }
+
+ +

이 예제에서 sidebar 내부의 h2 요소는 다른 색일지도 모릅니다. 예를 들어, 그 중 하나는 규칙과 일치하는 div의 자식이라면

+ +
 div#current { color: blue; }
+
+ +

파란색이 됩니다.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS4 Cascade', '#inherit', 'inherit') }}{{Spec2('CSS4 Cascade')}}Level 3에 변화 없음.
{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}{{ Spec2('CSS3 Values') }}{{ SpecName('CSS2.1') }}에서 두드러진 변화 없음
{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}{{ Spec2('CSS2.1') }}초기 정의
+ +

브라우저 호환성

+ +
{{Compat("css.types.global_keywords.inherit")}}
+ +

같이 보기

+ +
    +
  • 상속
    • +
  • {{cssxref("initial")}}을 사용해 속성의 초깃값을 사용하세요.
    • +
  • {{cssxref("unset")}}을 사용해 속성의 상속값 또는 초깃값을 사용하세요.
    • +
  • {{cssxref("revert")}}를 사용해 사용자 에이전트가 지정한 값(또는 사용자가 수정한 값)으로 속성을 되돌리세요.
    • +
  • {{cssxref("all")}} 속성을 사용하면 요소의 모든 속성을 한꺼번에 initial, inherit, revert, unset할 수 있습니다.
    • +
diff --git a/files/ko/web/css/inheritance/index.html b/files/ko/web/css/inheritance/index.html new file mode 100644 index 0000000000..db14ed6cd8 --- /dev/null +++ b/files/ko/web/css/inheritance/index.html @@ -0,0 +1,54 @@ +--- +title: 상속 +slug: Web/CSS/inheritance +tags: + - CSS + - Guide + - Inheritance + - Layout + - Web +translation_of: Web/CSS/inheritance +--- +
{{cssref}}
+ +

MDN 내 각 CSS 속성(property) 정의 페이지의 요약절은 그 속성이 기본(default)으로 상속되는지("Inherited: Yes") 혹은 상속되지 않는지("Inherited: no") 쓰여 있습니다. 이 상속 여부는 요소의 속성에 어떤 값이 지정되지 않을 때 일어나는 일을 제어합니다.

+ +

상속되는 속성

+ +

요소의 상속되는 속성에 값이 지정되지 않은 경우, 요소는 부모 요소의 해당 속성의 계산값을 얻습니다. 오직 문서의 루트 요소만 속성의 요약절에 주어진 초기값을 얻습니다.

+ +

상속되는 속성의 대표적인 예는 {{ Cssxref("color") }} 속성입니다. 주어진 스타일 규칙:

+ +
p { color: green }
+ +

과 마크업:

+ +
<p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

em 요소는  p 요소로부터 {{ Cssxref("color") }} 속성값을 상속했기 때문에, "emphasized text"는 녹색으로 보입니다. 속성의 초기값(페이지가 어떤 색을 지정하지 않았을 때 루트 요소에 사용된 색)을 얻지 않습니다.

+ +

상속되지 않는 속성

+ +

요소의 상속되지 않는 속성(Mozilla 코드에서는 가끔 reset 속성으로 불림)에 어떤 값이 지정되지 않는 경우, 요소는 그 속성의 초기값을 얻습니다(속성의 요약절에 지정된 대로).

+ +

상속되지 않는 속성의 대표적인 예는 {{ Cssxref("border") }} 속성입니다. 주어진 스타일 규칙:

+ +
 p { border: medium solid }
+ +

과 마크업:

+ +
  <p>This paragraph has <em>emphasized text</em> in it.</p>
+ +

"emphasized text"는 테두리가 없습니다({{ Cssxref("border-style") }}의 초기값이 none이기 때문에).

+ +

참고

+ +

{{ Cssxref("inherit") }} 키워드는 작성자가 명시적으로 상속을 지정할 수 있게 합니다. 상속되는 속성과 상속되지 않는 속성 모두에 작동합니다.

+ +

같이 보기

+ +
    +
  • CSS 참고서
    • +
  • {{ CSS_key_concepts() }}
    • +
  • {{ Cssxref("inherit") }}
    • +
diff --git a/files/ko/web/css/initial/index.html b/files/ko/web/css/initial/index.html new file mode 100644 index 0000000000..3205718d3d --- /dev/null +++ b/files/ko/web/css/initial/index.html @@ -0,0 +1,78 @@ +--- +title: initial +slug: Web/CSS/initial +tags: + - CSS + - CSS Cascade + - CSS Value + - Layout + - Reference + - Web + - 초기값 + - 초기화 + - 초깃값 +translation_of: Web/CSS/initial +--- +
{{CSSRef}}
+ +

CSS initial 키워드는 속성의 초깃값(기본값)을 요소에 적용합니다. 초깃값은 브라우저가 지정합니다. 모든 속성에서 사용할 수 있으며, {{cssxref("all")}}에 지정할 경우 모든 CSS 속성을 초깃값으로 재설정합니다.

+ +
+

참고: 상속 속성의 초깃값은 예상치 못한 값일 수도 있습니다. 따라서, {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}} 키워드의 사용을 대신 고려해보세요.

+
+ +

예제

+ +

HTML

+ +
<p>
+  <span>This text is red.</span>
+  <em>This text is in the initial color (typically black).</em>
+  <span>This is red again.</span>
+</p>
+ +

CSS

+ +
p {
+  color: red;
+}
+
+em {
+  color: initial;
+}
+ +

{{EmbedLiveSample('예제')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태설명
{{ SpecName('CSS4 Cascade', '#initial', 'initial') }}{{Spec2('CSS4 Cascade')}}Level 3에서 변화 없음.
{{ SpecName('CSS3 Cascade', '#initial', 'initial') }}{{Spec2('CSS3 Cascade')}}초기 정의.
+ +

브라우저 호환성

+ +
{{Compat("css.types.global_keywords.initial")}}
+ +

참조

+ +
    +
  • {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, {{cssxref("all")}}
    • +
diff --git a/files/ko/web/css/initial_value/index.html b/files/ko/web/css/initial_value/index.html new file mode 100644 index 0000000000..2a764918ed --- /dev/null +++ b/files/ko/web/css/initial_value/index.html @@ -0,0 +1,51 @@ +--- +title: 초깃값 +slug: Web/CSS/initial_value +tags: + - CSS + - Reference +translation_of: Web/CSS/initial_value +--- +
{{cssref}}
+ +

CSS 속성의 초깃값은 속성의 기본값으로, 속성 정의 표가 명시하고 있습니다. 초깃값의 사용처는 상속 여부에 따라 다릅니다.

+ + + +
+

참고: {{cssxref("initial")}} 키워드를 사용해 명시적으로 초깃값을 지정할 수 있습니다.

+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
CSS Cascade 4Formal definition.
{{SpecName("CSS2.1", "cascade.html#specified-value", "initial value")}}{{Spec2("CSS2.1")}}Implicit definition.
+ +

같이 보기

+ + diff --git a/files/ko/web/css/integer/index.html b/files/ko/web/css/integer/index.html new file mode 100644 index 0000000000..a6de2d4b1c --- /dev/null +++ b/files/ko/web/css/integer/index.html @@ -0,0 +1,93 @@ +--- +title: +slug: Web/CSS/integer +tags: + - CSS + - CSS Data Type + - Reference + - Web +translation_of: Web/CSS/integer +--- +
{{CSSRef}}
+ +

<integer> CSS 자료형은 {{cssxref("<number>")}}의 종류 중 하나로 소수점이 없는 완전한 수, 즉 정수를 표현합니다. 정수는 {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("z-index")}} 등 다양한 속성에서 사용할 수 있습니다.

+ +

구문

+ +

<integer> 자료형은 하나 이상의 0부터 9까지의 10진수 숫자로 구성하며, 선택적으로 +, -로 부호를 표시할 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.

+ +
참고: 공식적으로 정해진 <integer> 값의 범위는 없습니다. Opera 12.1은 최대 215-1, IE는 220-1, 그 외 브라우저는 더 큰 값도 지원합니다. CSS3 Values 논의 중 최소한의 범위를 설정하자는 말이 많아서 가장 최근인 2012년 4월 LC 단계에서는 [-227-1; 227-1]으로 결정했습니다. 224-1과 230-1처럼 다른 값도 제안됐습니다. 하지만 최신 명세는 범위를 지정하고 있지 않습니다.
+ +

보간

+ +

애니메이션에서 <integer> 자료형의 값은 이산적으로 1씩 변화합니다. 계산은 유동소수점 실수를 사용하며 최종 결과인 이산값은 버림 함수를 사용해 얻습니다. 보간의 속도는 애니메이션과 연결된 타이밍 함수가 결정합니다.

+ +

예제

+ +

유효한 정수

+ +
12          양의 정수 (부호 표시 없음)
++123        양의 정수 (+ 부호)
+-456        음의 정수
+0           0
++0          0, 양의 부호
+-0          0, 음의 부호
+
+ +

유효하지 않은 정수

+ +
12.0        정수를 표현하지만 <interger>가 아닌 <number>
+12.         소수점은 불허
++---12      하나의 +/-만 허용
+ten         글자는 불허
+_5          특수문자는 불허
+\35         유니코드 이스케이프 문자는 정수를 표현하더라도 불허 (\35: 5)
+\4E94       아라비아 숫자 외의 다른 표현은 이스케이프 후에도 불허 (\4E94: 일본어 五).
+3e4         과학적 표기법 불허
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#integers', '<integer>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}} 
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}Explicit definition.
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}Implicit definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.integer")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("<number>")}}
    • +
diff --git a/files/ko/web/css/isolation/index.html b/files/ko/web/css/isolation/index.html new file mode 100644 index 0000000000..ffeb6140f9 --- /dev/null +++ b/files/ko/web/css/isolation/index.html @@ -0,0 +1,114 @@ +--- +title: isolation +slug: Web/CSS/isolation +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/isolation +--- +
{{CSSRef}}
+ +

isolation CSS 속성은 요소가 새로운 {{glossary("stacking context", "쌓임 맥락")}}을 생성해야 하는지 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/isolation.html")}}
+ + + +

{{cssxref("mix-blend-mode")}}와 함께 사용했을 때 특히 유용합니다.

+ +

구문

+ +
/* 키워드 값 */
+isolation: auto;
+isolation: isolate;
+
+/* 전역 값 */
+isolation: inherit;
+isolation: initial;
+isolation: unset;
+
+ +

isolation 속성은 다음 키워드 값 중 하나를 사용해 지정합니다.

+ +

값

+ +
+
auto
+
요소에 적용한 속성 중 새로운 쌓임 맥락을 요구하는 속성이 있을 때만 쌓임 맥락을 생성합니다.
+
isolate
+
항상 새로운 쌓임 맥락을 생성합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
<div id="b" class="a">
+  <div id="d">
+    <div class="a c">auto</div>
+  </div>
+  <div id="e">
+    <div class="a c">isolate</div>
+  </div>
+</div>
+
+ +
.a {
+  background-color: rgb(0,255,0);
+}
+#b {
+  width: 200px;
+  height: 210px;
+}
+.c {
+  width: 100px;
+  height: 100px;
+  border: 1px solid black;
+  padding: 2px;
+  mix-blend-mode: difference;
+}
+#d {
+  isolation: auto;
+}
+#e {
+  isolation: isolate;
+}
+ +

{{ EmbedLiveSample('예제', 230, 230) }}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#isolation', 'Isolation') }}{{ Spec2('Compositing') }}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.isolation")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}, {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/ko/web/css/layout_mode/index.html b/files/ko/web/css/layout_mode/index.html new file mode 100644 index 0000000000..607a699b21 --- /dev/null +++ b/files/ko/web/css/layout_mode/index.html @@ -0,0 +1,32 @@ +--- +title: 레이아웃 모드 +slug: Web/CSS/Layout_mode +tags: + - CSS + - Guide + - Layout + - Reference +translation_of: Web/CSS/Layout_mode +--- +
{{cssref}}
+ +

CSS 레이아웃 모드, 줄여서 레이아웃은 형제(sibling) 및 조상(ancestor) 박스와 상호 작용하는 방식을 기반으로 박스의 위치와 크기를 결정하는 알고리즘입니다. 그 중 몇 가지입니다:

+ +
    +
  • 블록 레이아웃(block layout), 문서 배치를 위해 설계됨. 블록 레이아웃은 요소(element)를 float 하거나 여러 단(multiple columns)에 걸쳐 배치하는 기술 같은 문서 중심 기능을 포함합니다.
    • +
  • 인라인 레이아웃(inline layout), 텍스트 배치를 위해 설계됨.
    • +
  • 테이블 레이아웃(table layout), 표 배치를 위해 설계됨.
    • +
  • 위치지정 레이아웃(positioned layout), 다른 요소와 상호 작용이 많이 없는 요소의 위치지정을 위해 설계됨.
    • +
  • 신축 박스 레이아웃(flexible box layout), 부드럽게 크기조정이 될 수 있는 복잡한 페이지 배치를 위해 설계됨. {{experimental_inline}}
    • +
  • 그리드 레이아웃(grid layout), 고정된 격자(grid)에 상대적인 요소 배치를 위해 설계됨. {{experimental_inline}}
    • +
+ +
+

참고: CSS 속성(CSS properties) 모두가 모든 레이아웃 모드에 적용되지는 않습니다. 속성 대부분은 한 두 모드에 적용되고 속성이 다른 레이아웃 모드에 참여하는 요소에 설정되면 효과가 없습니다.

+
+ +

같이 보기

+ +
    +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ko/web/css/length-percentage/index.html b/files/ko/web/css/length-percentage/index.html new file mode 100644 index 0000000000..7ab06ee4ff --- /dev/null +++ b/files/ko/web/css/length-percentage/index.html @@ -0,0 +1,55 @@ +--- +title: +slug: Web/CSS/length-percentage +tags: + - CSS + - CSS Date Type + - Reference +translation_of: Web/CSS/length-percentage +--- +
{{CSSRef}}
+ +

<length-percentage> CSS 자료형은 {{Cssxref("<length>")}} 또는 {{Cssxref("<percentage>")}}인 값을 나타냅니다.

+ +

구문

+ +

{{Cssxref("<length>")}}와 {{Cssxref("<percentage>")}} 문서에서 각 자료형의 구문을 살펴보세요.

+ +

calc()에서 사용하기

+ +

<length-percentage>를 허용한다면 백분율이 길이로 이행한다는 뜻이므로 {{cssxref("calc", "calc()")}}와 함께 사용할 수 있습니다. 따라서 아래의 {{cssxref("width")}} 값 모두 유효합니다.

+ +
width: 200px
+width: 20%
+width: calc(100% - 200px)
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS4 Values')}} 
{{SpecName('CSS3 Values', '#mixed-percentages', '<length-percentage>')}}{{Spec2('CSS3 Values')}}Defines <length-percentage>. Adds calc()
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.length-percentage")}}

diff --git a/files/ko/web/css/length/index.html b/files/ko/web/css/length/index.html new file mode 100644 index 0000000000..e2e5b3925b --- /dev/null +++ b/files/ko/web/css/length/index.html @@ -0,0 +1,252 @@ +--- +title: +slug: Web/CSS/length +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web + - length +translation_of: Web/CSS/length +--- +
{{CSSRef}}
+ +

CSS <length> 자료형은 거리 값을 나타냅니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, {{Cssxref("text-shadow")}} 등 다양한 속성에 사용할 수 있습니다.

+ +
+

참고: {{cssxref("<percentage>")}} 값을 일부 속성의 <length> 값으로 사용할 수는 있지만 <percentage>와 <length> 는 다릅니다. {{cssxref("<length-percentage>")}}를 참고하세요.

+
+ +

구문

+ +

<length> 자료형은 {{cssxref("<number>")}} 다음에 아래 나열한 단위 중 하나를 붙여 구성합니다. 다른 CSS 단위와 마찬가지로 숫자와 단위 문자 사이에 공백은 존재하지 않습니다. 숫자 0 뒤에는 단위를 붙이지 않아도 됩니다.

+ +
+

참고: 일부 속성은 음의 <length>를 받지만 다른 속성은 그렇지 않습니다.

+
+ +

단위

+ +

상대길이 단위

+ +

상대길이는 어떤 다른 거리와의 상대적 비율을 표현합니다. 어떤 다른 거리란 단위에 따라 특정 문자, {{cssxref("line-height")}}, 아니면 {{glossary("viewport", "뷰포트")}}일 수 있습니다.

+ +
글꼴 상대 길이
+ +

글꼴 상대 길이는 <length> 값을 특정 문자나 현재 요소가 사용하는 글꼴의 특정 속성을 기준으로 설정합니다.

+ +
+

참고: 아래 단위들, 특히 em과 rem은 사용자가 글꼴 크기를 늘려도 페이지의 수직 흐름을 유지하는, 확대 가능한 레이아웃을 만들기 위해 많이 쓰입니다.

+
+ +
+
cap {{experimental_inline}}
+
요소 {{cssxref("font")}}의 "cap height"(영문 대문자의 평균 높이 값)를 나타냅니다.
+
ch
+
요소 {{cssxref("font")}}의 문자 "0"(영, 유니코드 U+0030)의 너비를 나타냅니다.
+
문자 "0"의 너비를 측정하는 것이 불가능하거나 실용적이지 않은 경우 너비 0.5em에 높이 1em이라고 가정해야 합니다.
+
em
+
요소 {{cssxref("font-size")}}의 계산값. 요소의 {{cssxref("font-size")}} 속성에 사용한다면 상속받는 font-size 값을 나타냅니다.
+
ex
+
요소 {{cssxref("font")}}의 {{interwiki("wikipedia", "x높이")}}를 나타냅니다. "x"문자를 가진 글꼴에서는 보통 소문자 높이와 같습니다. 많은 글꼴에서 1ex ≈ 0.5em입니다.
+
ic {{experimental_inline}}
+
"水" (한중일 한자 "물", U+6C34) 문자를 렌더링할 때 사용하는 글꼴에서의 너비를 나타냅니다.
+
lh {{experimental_inline}}
+
요소가 {{cssxref("line-height")}}를 가지고 있는 경우, line-height의 계산값을 절대 길이로 변환해 나타냅니다.
+
rem
+
루트 요소(보통 {{HTMLElement("html")}})의 {{cssxref("font-size")}}를 나타냅니다. 루트 요소의 font-size에 사용할 경우 최초값(보통 브라우저 기본값은 16px이나 사용자 설정으로 변할 수 있음)을 나타냅니다.
+
rlh {{experimental_inline}}
+
루트 요소(보통 {{HTMLElement("html")}})의 {{cssxref("line-height")}}를 절대 길이로 변환해 나타냅니다. 루트 요소의 {{cssxref("font-size")}}나 line-height에 사용할 경우 최초값을 나타냅니다.
+
+ +
뷰포트 백분율 길이
+ +

뷰포트 백분율 길이는 <length> 값을 {{glossary("viewport", "뷰포트")}}, 즉 문서에서 볼 수 있는 부분의 크기를 기준으로 설정합니다. 뷰포트 길이는 {{cssxref("@page")}} 선언 블록에서는 유효하지 않습니다.

+ +
+
vh
+
뷰포트의 초기 컨테이닝 블록 높이 1%와 같습니다.
+
vw
+
뷰포트의 초기 컨테이닝 블록 너비 1%와 같습니다.
+
vi {{experimental_inline}}
+
초기 컨테이닝 블록의 인라인 축 크기 1%와 같습니다.
+
vb {{experimental_inline}}
+
초기 컨테이닝 블록의 블록 축 크기 1%와 같습니다.
+
vmin
+
vw와 vh 중 작은 것과 같습니다.
+
vmax
+
vw와 vh 중 큰 것과 같습니다.
+
+ +

절대길이 단위

+ +

절대길이 단위는 프린트 등 출력 수단의 크기를 알 수 있을 때의 물리적 측정 거리를 나타냅니다. 구현은 어떤 단위를 물리적인 실제 거리에 맞춰 기준으로 삼고, 나머지 단위를 상대적으로 계산해 설정합니다. 기준 단위는 화면 등 저해상도 장치와 프린터 등 고해상도 장치에서 다릅니다.

+ +

저해상도 장치에서 px 단위는 물리적인 픽셀을 의미하며 나머지는 이에 상대적입니다. 따라서 1in은 96px로 정의하며 이는 72pt와 동일합니다. 그러나 인치(in), 센티미터(cm), 밀리미터(mm) 등 이렇게 정의하는 단위가 같은 이름을 가진 물리적인 측정 단위와 일치하지 않을 수 있다는 문제점이 있습니다.

+ +

고해상도 장치에서 인치(in), 센티미터(cm), 밀리미터(mm)가 기준이 되어 물리적 거리와 동일합니다. 그래서 px 단위도 이에 맞춰 1인치의 1/96로 정의합니다.

+ +
+

참고: 많은 사용자가 {{glossary("user agent", "사용자 에이전트")}}의 기본 글꼴 크기를 늘려 읽기 쉽도록 설정합니다. 절대길이는 사용자 설정을 따르지 않기 때문에 접근성 문제를 유발할 수 있습니다. 따라서 font-size를 설정할 땐 em, rem 등 상대길이를 선택하세요.

+
+ +
+
px
+
1 픽셀. 화면에서는 전통적으로 하나의 장치 픽셀(점)을 의미했지만, 프린터나 고해상도 화면에서는 1/96 in을 맞출 수 있도록 여러 개의 장치 픽셀을 의미합니다.
+
cm
+
1 센티미터, 1cm = 96px/2.54.
+
mm
+
1 밀리미터, 1mm = 1/10 cm.
+
Q {{experimental_inline}}
+
1/4 밀리미터, 1Q = 1/40 cm.
+
in
+
1 인치, 1in = 2.54cm = 96px.
+
pc
+
1 피카, 1pc = 12pt = 1/61in.
+
pt
+
One point. 1pt = 1/72nd of 1in.
+
+ +

보간

+ +

애니메이션에서 <length> 자료형의 값은 부동소수점 실수로 간주하며 보간은 계산값을 사용합니다. 보간 속도는 애니메이션에 연결된 타이밍 함수가 결정합니다.

+ +

예제

+ +

길이 단위 비교

+ +

아래 데모에서는 주어진 하나의 입력 칸에 300px, 50%, 30vw 등 <length> 값을 입력한 후 Return을 누르면 그 길이만큼의 막대를 생성합니다.

+ +

서로 다른 길이 단위를 입력하고 비교해보세요.

+ +

HTML

+ +
<div class="outer">
+  <div class="input-container">
+    <label>길이:</label>
+    <input type="text" id="length">
+  </div>
+  <div class="inner">
+
+  </div>
+</div>
+<div class="results">
+</div>
+ +

CSS

+ +
html {
+  font-family: sans-serif;
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+.outer {
+  width: 100%;
+  height: 50px;
+  background-color: #eee;
+  position: relative;
+}
+
+.inner {
+  height: 50px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+}
+
+.result {
+  height: 20px;
+  background-color: #999;
+  box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5),
+              inset -3px -3px 5px rgba(0,0,0,0.5);
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.result code {
+  position: absolute;
+  margin-left: 20px;
+}
+
+.results {
+  margin-top: 10px;
+}
+
+.input-container {
+  position: absolute;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  height: 50px;
+}
+
+label {
+  margin: 0 10px 0 20px;
+}
+ +

JavaScript

+ +
const inputDiv = document.querySelector('.inner');
+const inputElem = document.querySelector('input');
+const resultsDiv = document.querySelector('.results');
+
+inputElem.addEventListener('change', () => {
+  inputDiv.style.width = inputElem.value;
+
+  const result = document.createElement('div');
+  result.className = 'result';
+  result.style.width = inputElem.value;
+  result.innerHTML = `<code>너비: ${inputElem.value}</code>`;
+  resultsDiv.appendChild(result);
+
+  inputElem.value = '';
+  inputElem.focus();
+})
+ +

결과

+ +

{{EmbedLiveSample('길이_단위_비교','100%', 700)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#lengths', '<length>')}}{{Spec2('CSS4 Values')}}Adds the vi, vb, ic, lh, and rlh units.
{{SpecName('CSS3 Values', '#lengths', '<length>')}}{{Spec2('CSS3 Values')}}Adds the ch, rem, vw, vh, vmin, vmax, and Q units.
{{SpecName('CSS2.1', 'syndata.html#length-units', '<length>')}}{{Spec2('CSS2.1')}}Explicit definition of the em, pt, pc, and px units.
{{SpecName('CSS1', '#length-units', '<length>')}}{{Spec2('CSS1')}}Initial definition. Implicit definition of the em, pt, pc, and px units.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.length")}}

diff --git a/files/ko/web/css/letter-spacing/index.html b/files/ko/web/css/letter-spacing/index.html new file mode 100644 index 0000000000..4f7acc93f5 --- /dev/null +++ b/files/ko/web/css/letter-spacing/index.html @@ -0,0 +1,135 @@ +--- +title: letter-spacing +slug: Web/CSS/letter-spacing +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 글자 간격 +translation_of: Web/CSS/letter-spacing +--- +
{{CSSRef}}
+ +

letter-spacing CSS 속성은 글자 사이의 간격을 조절합니다.

+ +
{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+letter-spacing: normal;
+
+/* <length> 값 */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* 전역 값 */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+
+ +

값

+ +
+
normal
+
현재 글꼴의 기본 간격. 0과 달리, auto는 {{glossary("user agent", "사용자 에이전트")}}가 양쪽 정렬을 위해 간격을 임의로 조절할 수 있습니다.
+
{{cssxref("<length>")}}
+
기본 간격에 추가할 글자간 간격. 음수 값을 지정할 수 있지만 구현에 따라 한계가 있을 수 있습니다. 사용자 에이전트가 간격을 줄이거나 늘리지 않습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

HTML

+ +
<p class="normal">글자 간격</p>
+<p class="em-wide">글자 간격</p>
+<p class="em-wider">글자 간격</p>
+<p class="em-tight">글자 간격</p>
+<p class="px-wide">글자 간격</p>
+
+ +

CSS

+ +
.normal   { letter-spacing: normal; }
+.em-wide  { letter-spacing: 0.4em; }
+.em-wider { letter-spacing: 1em; }
+.em-tight { letter-spacing: -0.05em; }
+.px-wide  { letter-spacing: 6px; }
+
+ +

결과

+ +

{{ EmbedLiveSample('예제', 440, 185) }}

+ +

접근성 고려사항

+ +

letter-spacing 값의 절댓값이 너무 크면 스타일을 적용한 글을 읽기 힘들어집니다. 지나치게 큰 값으로는 글자 간격이 지나치게 넓어져 단어를 이루지 못하고 따로 따로 보입니다. 반대로 지나친 음숫값은 글자가 서로 겹쳐 알아볼 수 없습니다.

+ +

글꼴마다 문자의 너비가 다르므로 읽기에 용이한 간격은 상황에 따라 다릅니다. 모든 글꼴에 적합한 하나의 값은 존재하지 않습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}No change.
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}Defines letter-spacing as animatable.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}No change.
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Initial SVG definition.
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.letter-spacing")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("font-kerning")}}
    • +
diff --git a/files/ko/web/css/line-break/index.html b/files/ko/web/css/line-break/index.html new file mode 100644 index 0000000000..76fabd4316 --- /dev/null +++ b/files/ko/web/css/line-break/index.html @@ -0,0 +1,112 @@ +--- +title: line-break +slug: Web/CSS/line-break +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - i18n + - l10n + - 'recipe:css-property' +translation_of: Web/CSS/line-break +--- +
{{CSSRef}}
+ +

CSS line-break 속성은 한중일(CJK) 3개국어의 텍스트 줄을 어디서 바꿀지 지정합니다.

+ +
/* 키워드 값 */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+line-break: anywhere;
+
+/* 전역 값 */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+
+ +

구문

+ +

값

+ +
+
auto
+
기본 줄 바꿈 규칙을 사용합니다.
+
loose
+
가장 자유로운 줄 바꿈 규칙을 사용합니다. 보통 신문 등 짧은 줄에서 사용합니다.
+
normal
+
가장 흔한 줄 바꿈 규칙을 사용합니다.
+
strict
+
가장 엄격한 줄 바꿈 규칙을 사용합니다.
+
anywhere
+
+

모든 타이포그래피 글자 단위 주위에서 줄을 바꿀 수 있습니다. 줄 바꿈 위치는 모든 문장 부호, 공백, 단어 중간을 포함하며 GL, WJ, ZWJ 문자 클래스가 나타내는 줄 바꿈 제한 및 {{cssxref("word-break")}}가 요구하는 규칙 모두 무시할 수 있습니다. 붙임표는 사용하지 않습니다.

+
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

줄 바꿈 지정하기

+ +

줄 바꿈이 "々", "ぁ", "。"의 주위에서 어떻게 발생하는지 살펴보세요.

+ +

HTML

+ +
<div lang="ja">
+  <p class="wrapbox auto">auto:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox loose">loose:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox normal">normal:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox strict">strict:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+  <p class="wrapbox anywhere">anywhere:<br>そこは湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p>
+</div>
+
+ +

CSS

+ +
.wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; }
+.auto { line-break: auto; }
+.loose { line-break: loose; }
+.normal { line-break: normal; }
+.strict { line-break: strict; }
+.anywhere { line-break: anywhere; }
+
+ +

결과

+ +

{{ EmbedLiveSample('줄_바꿈_지정하기', 200, 400) }}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.line-break")}}

diff --git a/files/ko/web/css/linear-gradient()/index.html b/files/ko/web/css/linear-gradient()/index.html new file mode 100644 index 0000000000..74635f0434 --- /dev/null +++ b/files/ko/web/css/linear-gradient()/index.html @@ -0,0 +1,204 @@ +--- +title: linear-gradient +slug: Web/CSS/linear-gradient() +tags: + - CSS + - CSS Function + - CSS Images + - Graphics + - Layout + - Reference + - Web + - gradient + - 그라데이션 + - 그레이디언트 +translation_of: Web/CSS/linear-gradient() +--- +
{{CSSRef}}
+ +

CSS linear-gradient() 함수는 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성합니다. 함수의 결과는 {{cssxref("<image>")}}의 특별한 종류인 {{cssxref("<gradient>")}} 자료형입니다.

+ +
{{EmbedInteractiveExample("pages/css/function-linear-gradient.html")}}
+ + + +

구문

+ +
/* 45도로 기울어진 파랑 시작 빨강 종료 그레이디언트 */
+linear-gradient(45deg, blue, red);
+
+/* 우하단에서 좌상단으로, 파랑 시작 빨강 종료 그레이디언트 */
+linear-gradient(to left top, blue, red);
+
+/* 색상 정지점: 아래에서 위로,
+   파랑에서 시작해 길이의 40%에서 초록으로,
+   빨강 종료 그레이디언트 */
+linear-gradient(0deg, blue, green 40%, red);
+
+/* 색상 힌트: 왼쪽에서 오른쪽으로,
+   빨강에서 시작해 길이의 10% 지점에서 중간 색상으로,
+   나머지 90% 길이 동안 파랑으로 변하는 그레이디언트 */
+linear-gradient(.25turn, red, 10%, blue);
+
+/* 다중 위치 색상 정지점: 45도 기울어진,
+   좌하단 절반 빨강, 우상단 파랑 절반에
+   두 색이 만나는 지점을 정확히 나누는 그레이디언트 */
+linear-gradient(45deg, red 0 50%, blue 50% 100%);
+ +

값

+ +
+
<side-or-corner>
+
그레이디언트 축의 시작점. 지정할 경우, to 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있습니다. 하나는 수평 방향(left 또는 right)이고, 다른 하나는 수직 방향(top 또는 bottom)입니다. 방향 키워드의 순서는 상관하지 않으며, 기본값은 to bottom입니다.
+
to top, to bottom, to left, to right 값은 0deg, 180deg, 270deg, 90deg와 같습니다. 나머지 값은 각도로 변환됩니다.
+
{{cssxref("<angle>")}}
+
그레이디언트 축의 방향. 0deg는 to top과 같습니다. 0 이상의 값을 지정하면 축이 시계방향으로 돌아갑니다.
+
<linear-color-stop>
+
색상 정지점의 {{CSSxRef("<color>")}} 값과 하나 혹은 두 개의 선택적인 정지점 위치. (각각 그레이디언트 축 위의 {{cssxref("<percentage>")}} 또는 {{CSSxRef("<length>")}})
+
<color-hint>
+
color-hint는 두 인접한 색상 정지점 사이에서 그레이디언트가 진행하는 방식을 지정하는 보간 힌트입니다. 길이는 두 정지점 간의 길이에서 어느 지점에 그 중간 색에 도달해야 하는지 지정합니다. 생략할 경우 가운데에서 중간 색에 도달합니다.
+
+
+

참고: CSS 그레이디언트에서의 색상 정지점 렌더링은 SVG 그레이디언트에서의 색상 정지점과 동일한 규칙을 따라갑니다.

+
+
+
+ +

설명

+ +

다른 그레이디언트와 마찬가지로, 선형 그레이디언트는 본질 크기를 가지지 않습니다. 즉 기본 크기나 선호 크기, 선호 비율이 없으며, 실제 크기는 그레이디언트를 적용한 요소의 크기와 동일해집니다.

+ +

반복하여 컨테이너를 채우는 선형 그레이디언트가 필요하면 {{cssxref("repeating-linear-gradient")}} 함수를 사용하세요.

+ +

<gradient>는 <image>의 한 종류로서 <image>를 사용하는 곳에만 적용할 수 있습니다. 따라서 linear-gradient()는 {{cssxref("background-color")}}와 같은 {{cssxref("<color>")}} 자료형을 받는 속성에는 사용할 수 없습니다.

+ +

선형 그레이디언트의 구성

+ +

선형 그레이디언트는 하나의 축(그레이디언트 라인)과 두 개 이상의 색상 정지점으로 정의할 수 있습니다. 축 위의 점은 모두 고유한 색을 가집니다. linear-gradient() 함수는 부드러운 그레이디언트를 만들기 위해 축과 직교하는 무수한 선을 그리며, 각 수직선의 색은 축과 교차하는 점의 색과 일치합니다.

+ +

linear-gradient.png그레이디언트 축은 그레이디언트 이미지를 담은 직사각형의 중심점과 각도로 정의할 수 있습니다. 그레이디언트 색상은 시작점과 종료점, 그리고 그 사이의 다른 정지점 등 두 개 이상의 색상 정지점이 정의합니다.

+ +

시작점은 그레이디언트 축의 한 점으로, 첫 번째 색상이 시작하는 지점입니다. 종료점은 마지막 색상이 끝나는 지점입니다. 두 점은 직사각형에서 자신과 같은 사분면에 위치하는 꼭지점으로부터 시작하여 그레이디언트 축과 직교하는 지점으로 정의합니다. 종료점은 시작점의 대칭점으로 간단하게 알아둘 수도 있습니다. 이렇게 다소 복잡한 정의로 인해, 시작점과 가장 가까운 꼭지점이 시작점의 색을, 종료점과 가장 가까운 꼭지점이 종료점의 색을 갖는 특이한 효과를 확인할 수도 있습니다. 이 효과는 "매직 코너"라고 불리기도 합니다.

+ +

그레이디언트 만들기

+ +

그레이디언트 축에 색상 정지점을 더 추가하여, 다양한 색 사이로 전환하는, 고도로 맞춤화한 그레이디언트를 만들 수 있습니다. 색상 정지점의 위치는 {{cssxref("<length>")}}나 {{cssxref("<percentage>")}}를 사용해 명시적으로 지정할 수 있습니다. 따로 위치를 정하지 않으면 이전 정지점과 다음 정지점의 중간 지점에 위치합니다. 다음 두 그레이디언트는 동일합니다.

+ +
linear-gradient(red, orange, yellow, green, blue);
+linear-gradient(red 0%, orange 25%, yellow 50%, green 75%, blue 100%);
+ +

기본적으로 그레이디언트에서 색상 전환은 하나의 색상 정지점에서 다른 색상 정지점으로 부드럽게 일어나고, 가운데 지점은 두 색상의 사이값을 가집니다. 그러나 두 색의 사이에 색상 힌트를 넣어서 직접 색의 중간 지점을 정할 수도 있습니다. 다음 예제의 그레이디언트는 시작점에서 10% 지점까지 완전한 빨강이고, 90% 지점까지는 빨강에서 파랑으로 서서히 전환하며, 마지막 10%는 완전한 파랑입니다. 그러나 빨강과 파랑 사이 전환의 중간 지점은 50%가 아닌 30% 지점이 됩니다.

+ +
linear-gradient(red 10%, 30%, blue 90%);
+ +

두 개 이상의 색상 정지점을 같은 위치에 배치하면 부드럽게 전환하는 대신 이전 색과 다음 색이 경계선을 그리며 바로 바뀝니다.

+ +

색상 정지점의 순서는 오름차순이어야 합니다. 다음 정지점의 위치가 이전 정지점보다 앞이면, 이전 정지점의 위치를 재설정하고 색 전환도 경계선을 그리며 일어납니다. 다음 그레이디언트는 30% 지점에서 빨강에서 노랑으로 바뀌고, 65% 지점까지 파랑으로 전환합니다.

+ +
linear-gradient(red 40%, yellow 30%, blue 65%);
+
+ +

색상 정지점이 여러 위치를 가질 수도 있습니다. 색상을 선언할 때 인접한 두 정지점의 위치를 모두 포함할 수 있습니다. 다음 세 그레이디언트는 모두 같습니다.

+ +
linear-gradient(red 0%, orange 10%, orange 30%, yellow 50%, yellow 70%, green 90%, green 100%);
+linear-gradient(red, orange 10% 30%, yellow 50% 70%, green 90%);
+linear-gradient(red 0%, orange 10% 30%, yellow 50% 70%, green 90% 100%);
+ +

기본적으로, 0% 지점에 색을 할당하지 않으면 처음으로 선언한 색이 0%에 배치됩니다. 비슷하게 100% 지점에 색이 없는 경우 마지막 색이 100% 지점까지 도달합니다.

+ +

예제

+ +

45도 기울어진 그레이디언트

+ + + +
body {
+  background: linear-gradient(45deg, red, blue);
+}
+
+ +

{{EmbedLiveSample("45도_기울어진_그레이디언트", 120, 120)}}

+ +

축의 60% 지점에서 시작하는 그레이디언트

+ + + +
body {
+  background: linear-gradient(135deg, orange 60%, cyan);
+}
+ +

{{EmbedLiveSample("축의_60_지점에서_시작하는_그레이디언트", 120, 120)}}

+ +

다중 위치 색상 정지점을 가진 그레이디언트

+ +

이 예제는 다중 위치 색상 정지점을 사용하면서, 인접한 색상 정지점의 위치를 같게 하여 줄무늬 효과를 냅니다.

+ + + +
body {
+  background: linear-gradient(to right,
+     red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80%);
+}
+ +

{{EmbedLiveSample("다중_위치_색상_정지점을_가진_그레이디언트", 120, 120)}}

+ +

더 많은 예제

+ +

CSS 그레이디언트 사용하기 문서에서 더 많은 예제를 확인하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#color-stop-syntax', 'Gradient Color-Stops')}}{{Spec2('CSS4 Images')}}Adds interpolation hints.
{{SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

브라우저 호환성

+ + + +
{{Compat("css.types.image.gradient.linear-gradient")}}
+ +

같이 보기

+ +
    +
  • CSS 그레이디언트 사용하기
    • +
  • 다른 그레이디언트 함수: {{CSSxRef("repeating-linear-gradient")}}, {{CSSxRef("radial-gradient")}}, {{CSSxRef("repeating-radial-gradient")}}, {{CSSxRef("conic-gradient")}}, {{CSSxRef("repeating-conic-gradient")}}
    • +
  • {{CSSxRef("<image>")}}
    • +
  • {{cssxref("element()")}}
    • +
  • {{cssxref("_image","image()")}}
    • +
  • {{cssxref("image-set","image-set()")}}
    • +
  • {{cssxref("cross-fade")}}
    • +
diff --git a/files/ko/web/css/margin-bottom/index.html b/files/ko/web/css/margin-bottom/index.html new file mode 100644 index 0000000000..f374be0438 --- /dev/null +++ b/files/ko/web/css/margin-bottom/index.html @@ -0,0 +1,100 @@ +--- +title: margin-bottom +slug: Web/CSS/margin-bottom +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-bottom +--- +
{{CSSRef}}
+ +

margin-bottom CSS 속성은 요소의 아래쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

+ +
{{EmbedInteractiveExample("pages/css/margin-bottom.html")}}
+ + + +

{{HTMLElement("span")}}, {{HTMLElement("code")}} 등 비대체non-replaced 인라인 요소에는 효과가 없습니다.

+ +

구문

+ +
/* <length> 값 */
+margin-bottom: 10px;  /* 절대 길이 */
+margin-bottom: 1em;   /* 글씨 크기에 상대적 */
+margin-bottom: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-bottom: auto;
+
+/* 전역 값 */
+margin-bottom: inherit;
+margin-bottom: initial;
+margin-bottom: unset;
+ +

margin-bottom 속성은 키워드 auto, <length>, <percentage>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
바깥 여백 크기의 고정 값.
+
{{cssxref("<percentage>")}}
+
바깥 여백 크기와 블록 컨테이너 너비의 비율.
+
auto
+
브라우저가 적절한 값 선택. {{cssxref("margin")}}을 참고하세요.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { margin-bottom:   5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+#footer  { margin-bottom:  1em; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-bottom')}}{{Spec2('CSS3 Box')}}No significant change
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-bottom')}}{{Spec2('CSS3 Transitions')}}Defines margin-bottom as animatable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-bottom')}}{{Spec2('CSS2.1')}}Removes its effect on inline elements.
{{SpecName('CSS1', '#margin-bottom', 'margin-bottom')}}{{Spec2('CSS1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.margin-bottom")}}

diff --git a/files/ko/web/css/margin-left/index.html b/files/ko/web/css/margin-left/index.html new file mode 100644 index 0000000000..9e1d9b9953 --- /dev/null +++ b/files/ko/web/css/margin-left/index.html @@ -0,0 +1,160 @@ +--- +title: margin-left +slug: Web/CSS/margin-left +tags: + - CSS + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/margin-left +--- +
{{CSSRef}}
+ +

margin-left CSS 속성은 요소의 왼쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

+ +
{{EmbedInteractiveExample("pages/css/margin-left.html")}}
+ + + +

구문

+ +
/* <length> 값 */
+margin-left: 20px;  /* 절대 길이 */
+margin-left: 1em;   /* 글씨 크기에 상대적 */
+margin-left: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-left: auto;
+
+/* 전역 값 */
+margin-left: inherit;
+margin-left: initial;
+margin-left: unset;
+
+ +

margin-left 속성은 키워드 auto, <length>, <percentage>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
바깥 여백 크기의 고정 값.
+
{{cssxref("<percentage>")}}
+
바깥 여백 크기와 블록 컨테이너 너비의 비율.
+
auto
+
사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. margin-left와 margin-right의 값이 모두 auto라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} 값{{cssxref("float")}} 값{{cssxref("position")}} 값auto의 계산 값설명
inline, inline-block, inline-tableanystatic or relative0인라인 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent.블록 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft or rightstatic or relative0블록 레이아웃 모드 (플로팅 요소)
any table-*, except table-captionanyany0내부 table-* 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.
any, except flex, inline-flex, or table-*anyfixed or absolute0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.절대위치 레이아웃 모드
flex, inline-flexanyany0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.플렉스박스 레이아웃 모드
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-margin', 'margin-left') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-left') }}{{ Spec2('CSS3 Transitions') }}Defines margin-left as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-left')}}{{ Spec2('CSS3 Flexbox') }}Defines the behavior of margin-right on flex items.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-left') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin-left', 'margin-left') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.margin-left")}}

diff --git a/files/ko/web/css/margin-right/index.html b/files/ko/web/css/margin-right/index.html new file mode 100644 index 0000000000..8547ce5bcd --- /dev/null +++ b/files/ko/web/css/margin-right/index.html @@ -0,0 +1,159 @@ +--- +title: margin-right +slug: Web/CSS/margin-right +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-right +--- +
{{CSSRef}}
+ +

margin-right CSS 속성은 요소의 오른쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

+ +
{{EmbedInteractiveExample("pages/css/margin-right.html")}}
+ + + +

구문

+ +
/* <length> 값 */
+margin-right: 20px;  /* 절대 길이 */
+margin-right: 1em;   /* 글씨 크기에 상대적 */
+margin-right: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-right: auto;
+
+/* 전역 값 */
+margin-right: inherit;
+margin-right: initial;
+margin-right: unset;
+
+ +

margin-right 속성은 키워드 auto, <length>, <percentage>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
바깥 여백 크기의 고정 값.
+
{{cssxref("<percentage>")}}
+
바깥 여백 크기와 블록 컨테이너 너비의 비율.
+
auto
+
사용한 레이아웃 모드에 따라 가로축 미사용 공간 너비의 일부를 바깥 여백에 할당. margin-left와 margin-right의 값이 모두 auto라면 너비를 양 여백에 동일하게 배정합니다. 아래 표가 가능한 여러 경우를 보입니다. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{cssxref("display")}} 값{{cssxref("float")}} 값{{cssxref("position")}} 값auto의 계산 값설명
inline, inline-block, inline-tableanystatic or relative0인라인 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-captionanystatic or relative0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the element inside its parent.블록 레이아웃 모드
block, inline, inline-block, block, table, inline-table, list-item, table-captionleft or rightstatic or relative0블록 레이아웃 모드 (플로팅 요소)
any table-*, except table-captionanyany0내부 table-* 요소는 바깥 여백을 가지지 않습니다. 대신 {{ cssxref("border-spacing") }}을 사용하세요.
any, except flex, inline-flex, or table-*anyfixed or absolute0, except if both margin-left and margin-right are set to auto. In this case, it is set to the value centering the border area inside the available width, if fixed.절대위치 레이아웃 모드
flex, inline-flexanyany0, except if there is any positive horizontal free space. In this case, it is evenly distributed to all horizontal auto margins.플렉스박스 레이아웃 모드
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-margin', 'margin-right') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin-right') }}{{ Spec2('CSS3 Transitions') }}Defines margin-right as animatable.
{{SpecName('CSS3 Flexbox', '#item-margins', 'margin-right')}}{{ Spec2('CSS3 Flexbox') }}Defines the behavior of margin-right on flex items.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin-right') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin-right', 'margin-right') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.margin-right")}}

diff --git a/files/ko/web/css/margin-top/index.html b/files/ko/web/css/margin-top/index.html new file mode 100644 index 0000000000..008ab67ade --- /dev/null +++ b/files/ko/web/css/margin-top/index.html @@ -0,0 +1,100 @@ +--- +title: margin-top +slug: Web/CSS/margin-top +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin-top +--- +
{{CSSRef}}
+ +

margin-top CSS 속성은 요소의 위쪽에 바깥 여백 영역margin area을 설정합니다. 양수 값은 인접 요소와 거리를 넓히고, 음수 값은 더 좁힙니다.

+ +
{{EmbedInteractiveExample("pages/css/margin-top.html")}}
+ + + +

{{HTMLElement("span")}}, {{HTMLElement("code")}} 등 비대체non-replaced 인라인 요소에는 효과가 없습니다.

+ +

구문

+ +
/* <length> 값 */
+margin-top: 10px;  /* 절대 길이 */
+margin-top: 1em;   /* 글씨 크기에 상대적 */
+margin-top: 5%;    /* 가장 가까운 블록 컨테이너의 너비에 상대적 */
+
+/* 키워드 값 */
+margin-top: auto;
+
+/* 전역 값 */
+margin-top: inherit;
+margin-top: initial;
+margin-top: unset;
+ +

margin-top 속성은 키워드 auto, <length>, <percentage>를 사용해 설정할 수 있습니다. 값은 양수, 0, 음수가 가능합니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
바깥 여백 크기의 고정 값.
+
{{cssxref("<percentage>")}}
+
바깥 여백 크기와 블록 컨테이너 너비의 비율.
+
auto
+
브라우저가 적절한 값 선택. {{cssxref("margin")}}을 참고하세요.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { margin-top:   5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+#footer  { margin-top:  1em; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Box', '#the-margin', 'margin-top')}}{{Spec2('CSS3 Box')}}No significant change
{{SpecName('CSS3 Transitions', '#animatable-css', 'margin-top')}}{{Spec2('CSS3 Transitions')}}Defines margin-top as animatable.
{{SpecName('CSS2.1', 'box.html#margin-properties', 'margin-top')}}{{Spec2('CSS2.1')}}Removes its effect on inline elements.
{{SpecName('CSS1', '#margin-top', 'margin-top')}}{{Spec2('CSS1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.margin-top")}}

diff --git a/files/ko/web/css/margin/index.html b/files/ko/web/css/margin/index.html new file mode 100644 index 0000000000..a1048fb37e --- /dev/null +++ b/files/ko/web/css/margin/index.html @@ -0,0 +1,176 @@ +--- +title: margin +slug: Web/CSS/margin +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/margin +--- +
{{CSSRef}}
+ +

margin CSS 속성은 요소의 네 방향 바깥 여백 영역을 설정합니다. {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}}, {{cssxref("margin-left")}}의 단축 속성입니다.

+ +
{{EmbedInteractiveExample("pages/css/margin.html")}}
+ + + +

위와 아래 여백은 대체 요소가 아닌 {{HTMLElement("span")}}, {{HTMLElement("code")}} 등 인라인 요소에선 아무 효과도 없습니다.

+ +
+

참고: margin은 요소의 주위에 빈 공간을 추가합니다. 반면 {{cssxref("padding")}}은 요소의 내부에 빈 공간을 만듭니다.

+
+ +

구문

+ +
/* 네 면 모두 적용 */
+margin: 1em;
+margin: -3px;
+
+/* 세로방향 | 가로방향 */
+margin: 5% auto;
+
+/* 위 | 가로방향 | 아래 */
+margin: 1em auto 2em;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+margin: 2px 1em 0 auto;
+
+/* 전역 값 */
+margin: inherit;
+margin: initial;
+margin: unset;
+
+ +

margin 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 또는 키워드 {{anch("auto")}} 중 하나입니다. 음수 값은 요소와 이웃의 거리가 더 가까워지도록 합니다.

+ +
    +
  • 한 개의 값은 모든 네 면의 여백을 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)
    • +
+ +

값

+ +
+
{{cssxref("length")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("<percentage>")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
auto
+
브라우저가 적절한 여백 크기를 선택. 예를 들어 요소를 중앙 정렬하고 싶을 때 사용할 수 있습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

간단한 예제

+ +

HTML

+ +
<div class="center">이 요소는 중앙 정렬입니다.</div>
+<div class="outside">이 요소는 컨테이너 밖으로 빠져 나갔습니다.</div>
+ +

CSS

+ +
.center {
+  margin: auto;
+  background: lime;
+  width: 66%;
+}
+
+.outside {
+  margin: 3rem 0 0 -3rem;
+  background: cyan;
+  width: 66%;
+}
+ +

{{ EmbedLiveSample('간단한_예제') }}

+ +

더 많은 예제

+ +
margin: 5%;                 /* 모두 5% */
+
+margin: 10px;               /* 모두 10px */
+
+margin: 1.6em 20px;         /* 상하: 1.6em */
+                            /* 좌우: 20px  */
+
+margin: 10px 3% -1em;       /* 상: 10px */
+                            /* 좌우: 3% */
+                            /* 하: -1em */
+
+margin: 10px 3px 30px 5px;  /* 상: 10px */
+                            /* 우:  3px */
+                            /* 하: 30px */
+                            /* 좌:  5px */
+
+margin: 2em auto;           /* 상하: 2em */
+                            /* 수평 중앙정렬 */
+
+margin: auto;               /* 상하: 0 */
+                            /* 수평 중앙정렬 */
+ +

참고

+ +

수평 중앙정렬

+ +

현대 브라우저에서 어떤 요소를 중앙에 배치하려면 {{cssxref("display")}}: flex; {{cssxref("justify-content")}}: center;를 사용하면 됩니다.

+ +

하지만 플렉스 박스 레이아웃을 지원하지 않는 Internet Explorer 8-9 등 오래된 브라우저를 지원해야 하면 margin: 0 auto;를 대신 사용하세요.

+ +

여백 상쇄

+ +

두 개 요소의 위와 아래 여백은 종종 합쳐져 하나의 여백이 되고, 그 크기는 둘 중 더 큰 여백과 같아집니다. 더 자세한 정보는 여백 상쇄 정복을 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#margin', 'margin') }}{{ Spec2('CSS3 Box') }}No significant change
{{ SpecName('CSS3 Transitions', '#animatable-css', 'margin') }}{{ Spec2('CSS3 Transitions') }}Defines margin as animatable.
{{ SpecName('CSS2.1', 'box.html#margin-properties', 'margin') }}{{ Spec2('CSS2.1') }}Removes its effect on inline elements.
{{ SpecName('CSS1', '#margin', 'margin') }}{{ Spec2('CSS1') }}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +

{{Compat("css.properties.margin")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/mask/index.html b/files/ko/web/css/mask/index.html new file mode 100644 index 0000000000..ca23758e02 --- /dev/null +++ b/files/ko/web/css/mask/index.html @@ -0,0 +1,117 @@ +--- +title: mask +slug: Web/CSS/mask +tags: + - CSS + - CSS Property + - Layout + - Reference + - SVG + - Web +translation_of: Web/CSS/mask +--- +
{{CSSRef}}
+ +

mask CSS 속성은 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서 보여지지 않게 할 수 있는 기능을 가지고 있습니다. 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공합니다.

+ +
+

mask 는 {{cssxref("mask-border")}}를 초기값으로 재정의합니다. 그러므로 캐스캐이드 이전 단계에 어떠한 마스크 설정을 덮어씌우는 개별 속성아니 여타 다른 속성보다는 mask 를 사용하는 것을 추천합니다. This will ensure that mask-border has also been reset to allow the new styles to take effect.

+
+ +

{{cssinfo}}

+ +

구문

+ +
/* 키워드 값 */
+mask: none;
+
+/* 이미지 값 */
+mask: url(mask.png);                       /* 마스크로 사용되는 이미지 */
+mask: url(masks.svg#star);                 /* 마스크로 사용되는 SVG 그래픽 내 요소 */
+
+/* 조합형 값 */
+mask: url(masks.svg#star) luminance;       /* 밝기 조절용 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) 40px 20px;       /* 위로부터 40px, 아래부터 20px에 위치하는 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* 가로, 세로 각각 50px 사이즈의 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) repeat-x;        /* 수평으로 반복되는 마스크로 사용되는 SVG 그래픽 내 요소 */
+mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
+mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts */
+
+/* 글로벌 값 */
+mask: inherit;
+mask: initial;
+mask: unset;
+
+ +

값

+ +
+
<mask-reference>
+
마스크 이미지 파일 설정하기. {{cssxref("mask-image")}}를 확인하세요.
+
<masking-mode>
+
마스크 이미지의 마스킹 모드 설정하기. {{cssxref("mask-mode")}}를 확인하세요.
+
<position>
+
마스크 이미지의 위치 설정하기. {{cssxref("mask-position")}}를 확인하세요.
+
<bg-size>
+
마스크 이미지의 크기 설정하기. {{cssxref("mask-size")}}를 확인하세요.
+
<repeat-style>
+
마스크 이미지의 반복 설정하기. See {{cssxref("mask-repeat")}}를 확인하세요.
+
<geometry-box>
+
단 하나의 <geometry-box> 값만 주어진다면 {{cssxref("mask-origin")}}와(과)( {{cssxref("mask-clip")}} 모두 같은 값으로 설정하는 것을 의미합니다. 두개의<geometry-box> 값이 주어진다면 첫번째 값은 {{cssxref("mask-origin")}}을(를), 두번쨰 값은 {{cssxref("mask-clip")}}를 설정하는 것을 의미합니다.
+
<geometry-box> | no-clip
+
마스크 이미지에 영향을 받는 구역을 설정하기. {{cssxref("mask-clip")}}를 확인하세요.
+
<compositing-operator>
+
현재 마스크 레이어 위의 합성 설정하기. {{cssxref("mask-composite")}}를 확인하세요.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.target {
+  mask: url(#c1) luminance;
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1) 50px 30px/10px 10px repeat-x exclude;
+}
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Extends its usage to HTML elements.
+ Extends its syntax by making it a shorthand for the new mask-* properties defined in that specification.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Initial definition
+ +

브라우저 호환성

+ +

{{Compat("css.properties.mask")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/max-height/index.html b/files/ko/web/css/max-height/index.html new file mode 100644 index 0000000000..3c2dfc18de --- /dev/null +++ b/files/ko/web/css/max-height/index.html @@ -0,0 +1,127 @@ +--- +title: max-height +slug: Web/CSS/max-height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/max-height +--- +
{{CSSRef}}
+ +

max-height CSS 속성은 요소의 최대 높이를 설정합니다. max-height는 {{cssxref("height")}} 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

+ +
{{EmbedInteractiveExample("pages/css/max-height.html")}}
+ + + +

max-height가 {{cssxref("height")}}를 재설정하고, {{cssxref("min-height")}}가 max-height를 재설정합니다.

+ +

구문

+ +
/* <length> 값 */
+max-height: 3.5em;
+
+/* <percentage> 값 */
+max-height: 75%;
+
+/* 키워드 값 */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* 전역 값 */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
고정 길이로 나타낸 최대 높이.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 높이에 대한 백분율로 나타낸 최대 높이.
+
+ +

키워드 값

+ +
+
none
+
최대 높이를 정하지 않음.
+
max-content {{experimental_inline()}}
+
본질적인 선호 높이.
+
min-content {{experimental_inline()}}
+
본질적인 최소 높이.
+
fill-available {{experimental_inline()}}
+
컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
+
fit-content {{experimental_inline()}}
+
max-content와 동일.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
table { max-height: 75%; }
+
+form { max-height: none; }
+
+ +

접근성 참고사항

+ +

페이지의 확대 또는 글씨 크기를 키운 후에도 max-height를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-height') }}{{ Spec2('CSS3 Transitions') }}Defines max-height as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.max-height")}}

+ +

같이 보기

+ +
    +
  • 박스 모델 입문, {{cssxref("box-sizing")}}
    • +
  • {{cssxref("height")}}, {{cssxref("min-height")}}
    • +
diff --git a/files/ko/web/css/max-width/index.html b/files/ko/web/css/max-width/index.html new file mode 100644 index 0000000000..92f8727cbf --- /dev/null +++ b/files/ko/web/css/max-width/index.html @@ -0,0 +1,173 @@ +--- +title: max-width +slug: Web/CSS/max-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/max-width +--- +
{{CSSRef}}
+ +

max-width CSS 속성은 요소의 최대 너비를 설정합니다. max-width는 {{cssxref("width")}} 속성의 사용값이 자신의 값보다 커지는걸 방지합니다.

+ +
{{EmbedInteractiveExample("pages/css/max-width.html")}}
+ + + +

max-width가 {{cssxref("width")}}를 재설정하고, {{cssxref("min-height")}}가 max-width를 재설정합니다.

+ +

구문

+ +
/* <length> 값 */
+max-width: 3.5em;
+
+/* <percentage> 값 */
+max-width: 75%;
+
+/* 키워드 값 */
+max-width: none;
+max-width: max-content;
+max-width: min-content;
+max-width: fit-content;
+max-width: fill-available;
+
+/* 전역 값 */
+max-width: inherit;
+max-width: initial;
+max-width: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
고정 길이로 나타낸 최대 너비.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 너비에 대한 백분율로 나타낸 최대 너비.
+
+ +

키워드 값

+ +
+
none
+
최대 너비를 정하지 않음.
+
max-content {{experimental_inline()}}
+
본질적인 선호 높이.
+
min-content {{experimental_inline()}}
+
본질적인 최소 높이.
+
fill-available {{experimental_inline()}}
+
컨테이닝 블록의 높이에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
+
fit-content {{experimental_inline()}}
+
max-content와 동일.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

다음 예제에서, 자식(child) 요소의 너비는 150픽셀과 부모(parent) 요소의 너비 중 더 작은 값이 됩니다.

+ +
+
<div id="parent">
+  <div id="child">
+    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
+  </div>
+</div>
+
+ +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child {
+  background: gold;
+  width: 100%;
+  max-width: 150px;
+}
+
+
+ +

{{EmbedLiveSample("basic-max-width-demo", 350, 100)}}

+ +

fit-content 값을 사용하여 해당 요소의 내용이 필요로 하는 너비만 차지하도록 설정할 수 있습니다.

+ +
+ + +
#parent {
+  background: lightblue;
+  width: 300px;
+}
+
+#child  {
+  background: gold;
+  width: 100%;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+
+ +

{{EmbedLiveSample("fit-content-demo", 400, 100)}}

+ +

접근성 고려사항

+ +

페이지의 확대 또는 글씨 크기를 키운 후에도 max-width를 설정한 요소의 내용이 잘리거나, 다른 요소를 가리지 않도록 주의하세요.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Transitions', '#animatable-css', 'max-width') }}{{ Spec2('CSS3 Transitions') }}Defines max-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.max-width")}}

+ +

같이 보기

+ +
    +
  • 박스 모델 입문
    • +
  • {{cssxref("box-sizing")}}, {{cssxref("width")}}, {{ Cssxref("min-width") }}
    • +
diff --git a/files/ko/web/css/media_queries/index.html b/files/ko/web/css/media_queries/index.html new file mode 100644 index 0000000000..c3f4e87226 --- /dev/null +++ b/files/ko/web/css/media_queries/index.html @@ -0,0 +1,103 @@ +--- +title: 미디어 쿼리 +slug: Web/CSS/Media_Queries +tags: + - CSS + - CSS 미디어 쿼리 + - Media Queries + - Overview + - Reference + - 미디어 쿼리 + - 반응형 디자인 +translation_of: Web/CSS/Media_Queries +--- +
{{CSSRef}}
+ +

미디어 쿼리는 다양한 기기 특성과 파라메터의 존재 여부에 따라 사이트, 혹은 앱을 조정할 수 있습니다.

+ +

미디어 쿼리는 반응형 디자인의 핵심 구성 요소입니다. 예를 들어, 미디어 쿼리는 작은 기기에 맞춰 폰트 사이즈를 줄어들게 하거나, 세로 모드(portrait mode)일 때 단락의 패딩 값을 증가시킬 수도 있습니다. 혹은 터치 스크린에서 버튼 사이즈를 키울 수도 있습니다.

+ +

CSS에서는 {{cssxref("@media")}} @규칙을 사용해서 스타일 시트의 일부를 조건부로 적용합니다. 이 스타일 시트는 미디어 쿼리의 결과에 기반한 스타일 시트입니다. {{cssxref("@import")}}를 사용해서 조건부로 전체 스타일시트를 적용해보세요.

+ +

HTML에서의 미디어 쿼리

+ +

HTML에서 미디어 쿼리는 다양한 요소에 적용될 수 있습니다.:

+ +
    +
  • {{HTMLElement("link")}} 요소의 {{htmlattrxref("media", "link")}} 속성에서는, 링크된 리소스 (일반적으로 CSS)가 적용되어야하는 미디어를 정의합니다.
    • +
  • {{HTMLElement("source")}} 요소의 {{htmlattrxref("media", "source")}} 속성에서는, 해당 소스가 적용되어야하는 미디어를 정의합니다. (이건 {{HTMLElement("picture")}} 요소 안에서만 유효합니다.)
    • +
  • {{HTMLElement("style")}} 요소의 {{htmlattrxref("media", "style")}} 속성에서는, 스타일이 적용되어야하는 미디어를 정의합니다.
    • +
+ +

JavaScript에서의 미디어 쿼리

+ +

JavaScript에서는, {{domxref("Window.matchMedia()")}} 메소드로 미디어 쿼리를 테스트할 수 있습니다. {{domxref("MediaQueryList.addListener()")}} 메소드를 사용하면 쿼리가 변경될 때마다 사이트나 앱에서 알림을 받을 수도 있습니다. 이러한 기능을 사용하면, 사이트나 앱이 기기 구성, 방향 또는 상태의 변화에 따라 응답할 수도 있습니다.

+ +

Testing media queries에서 프로그래밍 방식으로 미디어 쿼리를 사용하는 방법에 대해 자세히 배워보세요.

+ +

참고서

+ +

@규칙

+ +
+
    +
  • {{cssxref("@import")}}
    • +
  • {{cssxref("@media")}}
    • +
+
+ +

안내서

+ +
+
미디어 쿼리 사용하기
+
미디어 쿼리 표현식을 구성하는데 사용되는 미디어 쿼리, 구문 및 연산자와 미디어 기능을 소개합니다.
+
프로그래밍 방식으로 미디어 쿼리 테스트하기
+
자바스크립트 코드에서 어떻게 미디어 쿼리를 사용해 디바이스의 상태를 확인하는지, 그리고 미디어 쿼리가 변경될 때(사용자가 화면을 회전시키거나 브라우저를 리사이즈 할 때와 같은 상황)마다 알림을 보내기 위해 어떻게 리스너를 설정하는지에 대해 설명합니다.
+
접근성을 위한 미디어 쿼리
+
미디어 쿼리를 사용해 사용자가 웹사이트를 더 잘 이해할 수 있게 만들어보세요.
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS5 Media Queries')}}{{Spec2('CSS5 Media Queries')}} 
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}} 
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}}Initial definition
+ +

같이 보기

+ +
    +
  • {{cssxref("@supports")}} 를 사용하면 브라우저가 지원하는 다양한 CSS 기술들에 대한 스타일을 적용할 수 있습니다.
    • +
diff --git a/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html new file mode 100644 index 0000000000..d48d431b7d --- /dev/null +++ b/files/ko/web/css/media_queries/using_media_queries_for_accessibility/index.html @@ -0,0 +1,93 @@ +--- +title: 접근성을 위한 미디어 쿼리 사용하기 +slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +tags: + - '@media' + - CSS + - 미디어 속성 + - 접근성 +translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +--- +

미디어쿼리(Media Queries)는 장애를 가진 사용자가 웹사이트를 더 쉽게 이해할 수 있도록 도울 수 있습니다.

+ +

애니메이션 동작 축소하기(Reduced Motion)

+ +

깜빡이거나 반짝이는 애니메이션은 주의력결핍 과잉행동증후군(注意力缺乏過剩行動症候群 : ADHD)와 같은 인식장애를 가진 사람들에게 문제가 될 수 있다. 이러한 종류의 애니메이션 동작들은 시력 장애, 간질이나 편두통과 암소시성 민감증을 유발할 수 있습니다.

+ +

또한, 이 애니메이션 동작을 줄이는.방법을 통해 배터리가 부족한 사람이나 보급형 스마트폰 및 컴퓨터를 사용하는 사람들에게 도음을 줄 수 있습니다.

+ +

문법

+ +
+
no-preference
+
사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않았을 경우에 적용될 스타일을 나타냅니다.
+
reduce
+
사용자가 디바이스에서 애니메이션 축소와 관련된 기능을 설정하였을 경우에 적용될 스타일을 나타냅니다.
+
+ +

예제

+ +

이 예시는 디바이스에서 애니메이션 축소와 관련된 기능을 설정하지 않으면 애니메이션 효과가 축소되지 않습니다.

+ +

HTML

+ +
<div class="animation">animated box</div>
+
+ +

CSS

+ +
.animation {
+  -webkit-animation: vibrate 0.3s linear infinite both;
+  animation: vibrate 0.3s linear infinite both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .animation {
+    animation: none;
+  }
+}
+
+ +

고대비 모드 (High Contrast Mode)

+ +
{{CSSRef}}{{Non-standard_header}}
+ +

-ms-high-contrast CSS media 속성은 애플리케이션이 고대비 모드로 표시되고 있는지의 여부에따라 어떤 색상으로 웹사이트를 표시할 지를 정의하는 Microsoft 확장기능입니다.

+ +

 이 미디어 속성은 저시력 사용자나 대비에 민감한 문제가 있는 사람뿐만 아니라 직사광선 아래에서 컴퓨터나 휴대폰을 사용하는 사람에게도 도움이 됩니다.

+ +

문법

+ +

-ms-high-contrast 미디어 속성(Media Feature)은 다음 값 중 하나를 지정하여 사용할 수 있습니다.

+ +

속성값

+ +
+
active
+
+

시스템이 색상과 관계없이 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.

+
+
black-on-white
+
+

시스템이 검은색-흰 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.

+
+
white-on-black
+
+

시스템이 흰 색-검은 색 고대비 모드로 변경되었을 때 후속 스타일링 규칙이 적용됨을 나타냅니다.

+
+
+ +

예제

+ +

다음 선언된 스타일들은 시스템과 애플리케이션에서 고대비 모드의 색상 변화에 따라 스타일을 일치시켜줍니다.

+ +
@media screen and (-ms-high-contrast: active) {
+  /* 모든 고대비 모드에 대한 스타일 규칙입니다 */
+}
+@media screen and (-ms-high-contrast: black-on-white) {
+  div { background-image: url('image-bw.png'); }
+}
+@media screen and (-ms-high-contrast: white-on-black) {
+  div { background-image: url('image-wb.png'); }
+}
+
diff --git a/files/ko/web/css/min-height/index.html b/files/ko/web/css/min-height/index.html new file mode 100644 index 0000000000..80c27230af --- /dev/null +++ b/files/ko/web/css/min-height/index.html @@ -0,0 +1,123 @@ +--- +title: min-height +slug: Web/CSS/min-height +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-height +--- +
{{CSSRef}}
+ +

max-height CSS 속성은 요소의 최소 높이를 설정합니다. min-height는 {{cssxref("height")}} 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다.

+ +
{{EmbedInteractiveExample("pages/css/min-height.html")}}
+ + + +

min-height가 {{cssxref("max-height")}} 또는 {{cssxref("height")}}보다 커지면 요소의 높이는 min-height의 값을 사용합니다.

+ +

구문

+ +
/* <length> 값 */
+min-height: 3.5em;
+
+/* <percentage> 값 */
+min-height: 10%;
+
+/* 키워드 값 */
+min-height: max-content;
+min-height: min-content;
+min-height: fit-content;
+min-height: fill-available;
+
+/* 전역 값 */
+min-height: inherit;
+min-height: initial;
+min-height: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
고정 길이로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 높이에 대한 백분율로 나타낸 최대 높이. 음수 값은 유효하지 않습니다.
+
+ +

키워드 값

+ +
+
auto
+
최소 높이를 정하지 않음.
+
+ +
+
max-content {{ experimental_inline() }}
+
본질적인 선호 높이.
+
min-content {{ experimental_inline() }}
+
본질적인 최소 높이.
+
fill-available {{ experimental_inline() }}
+
컨테이닝 블록의 높이에서 세로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
+
fit-content {{ experimental_inline() }}
+
CSS3 Box 모듈에 따라 min-content의 다른 이름. CSS3 Sizing 모듈은 더 복잡한 알고리즘을 정의하지만, 모든 브라우저에서 실험 기능으로도 구현하지 않습니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
table { min-height: 75%; }
+
+form { min-height: 0; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-height') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Flexbox', '#min-auto', 'min-height') }}{{ Spec2('CSS3 Flexbox') }}Adds the auto keyword and uses it as the initial value.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-height') }}{{ Spec2('CSS3 Transitions') }}Defines min-height as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-heights', 'min-height') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.min-height")}}

+ +

같이 보기

+ +
    +
  • 박스 모델 입문, {{cssxref("box-sizing")}}
    • +
  • {{ Cssxref("height") }}, {{ Cssxref("max-height") }}
    • +
diff --git a/files/ko/web/css/min-width/index.html b/files/ko/web/css/min-width/index.html new file mode 100644 index 0000000000..50bab2c8d9 --- /dev/null +++ b/files/ko/web/css/min-width/index.html @@ -0,0 +1,122 @@ +--- +title: min-width +slug: Web/CSS/min-width +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/min-width +--- +
{{CSSRef}}
+ +

min-width CSS 속성은 요소의 최소 너비를 설정합니다. min-width는 {{cssxref("width")}} 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다.

+ +
{{EmbedInteractiveExample("pages/css/min-width.html")}}
+ + + +

min-width가 {{cssxref("max-width")}} 또는 {{cssxref("width")}}보다 커지면 요소의 높이는 min-width의 값을 사용합니다.

+ +

구문

+ +
/* <length> 값 */
+min-width: 3.5em;
+
+/* <percentage> 값 */
+min-width: 10%;
+
+/* 키워드 값 */
+min-width: max-content;
+min-width: min-content;
+min-width: fit-content;
+min-width: fill-available;
+
+/* 전역 값 */
+min-width: inherit;
+min-width: initial;
+min-width: unset;
+
+ +

값

+ +
+
{{cssxref("<length>")}}
+
고정 길이로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.
+
{{cssxref("<percentage>")}}
+
컨테이닝 블록 너비에 대한 백분율로 나타낸 최대 너비. 음수 값은 유효하지 않습니다.
+
+ +

키워드 값

+ +
+
auto
+
최소 너비를 정하지 않음.
+
max-content {{ experimental_inline() }}
+
본질적인 선호 높이.
+
min-content {{ experimental_inline() }}
+
본질적인 최소 높이.
+
fill-available{{ experimental_inline() }}
+
컨테이닝 블록의 너비에서 가로축 안쪽 및 바깥 여백과 테두리의 공간을 제외한 높이. (일부 브라우저는 매우 오래 된 이름인 available로 구현함을 참고하세요.)
+
fit-content {{ experimental_inline() }}
+
min(max-content, max(min-content, fill-available))과 같음.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
table { min-width: 75%; }
+
+form { min-width: 0; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Sizing', '#width-height-keywords', 'min-width') }}{{ Spec2('CSS3 Sizing') }}Adds the max-content, min-content, fit-content, and fill-available keywords. (Both CSS3 Box and CSS3 Writing Modes drafts used to define these keywords, but are superseded by this spec.)
{{ SpecName('CSS3 Flexbox', '#min-size-auto', 'min-width') }}{{ Spec2('CSS3 Flexbox') }}Adds the auto keyword and uses it as the initial value.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'min-width') }}{{ Spec2('CSS3 Transitions') }}Defines min-width as animatable.
{{ SpecName('CSS2.1', 'visudet.html#min-max-widths', 'min-width') }}{{ Spec2('CSS2.1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.min-width")}}

+ +

같이 보기

+ +
    +
  • 박스 모델 입문, {{cssxref("box-sizing")}}
    • +
  • {{ Cssxref("width") }}, {{ Cssxref("max-width") }}
    • +
diff --git a/files/ko/web/css/mix-blend-mode/index.html b/files/ko/web/css/mix-blend-mode/index.html new file mode 100644 index 0000000000..069bb0122f --- /dev/null +++ b/files/ko/web/css/mix-blend-mode/index.html @@ -0,0 +1,651 @@ +--- +title: mix-blend-mode +slug: Web/CSS/mix-blend-mode +tags: + - CSS + - CSS Property + - Reference +translation_of: Web/CSS/mix-blend-mode +--- +
{{CSSRef}}
+ +

mix-blend-mode CSS 속성은 어느 요소의 콘텐츠가 자신의 배경 및 부모와 어떻게 혼합되어야 하는지 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/mix-blend-mode.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* 전역 값 */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+
+ +

값

+ +
+
{{cssxref("<blend-mode>")}}
+
적용할 혼합 모드.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ + + +
{{EmbedLiveSample("mix-blend-mode", "100%", 1600, "", "", "example-outcome-frame")}}
+ +

HTML 예제

+ +
<div class="isolate">
+  <div class="circle circle-1"></div>
+  <div class="circle circle-2"></div>
+  <div class="circle circle-3"></div>
+</div>
+ +
.circle {
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  mix-blend-mode: screen;
+  position: absolute;
+}
+
+.circle-1 {
+  background: red;
+}
+
+.circle-2 {
+  background: lightgreen;
+  left: 40px;
+}
+
+.circle-3 {
+  background: blue;
+  left: 20px;
+  top: 40px;
+}
+
+.isolate {
+  isolation: isolate; /* Without isolation, the background color will be taken into account */
+  position: relative;
+}
+ +

{{EmbedLiveSample("HTML_예제", "100%", "180")}}

+ +

SVG 예제

+ +

다음은 이전의 예제를 SVG로 구현한 것입니다.

+ +
<svg>
+  <g class="isolate">
+    <circle cx="40" cy="40" r="40" fill="red"/>
+    <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+    <circle cx="60" cy="80" r="40" fill="blue"/>
+  </g>
+</svg>
+ +
circle { mix-blend-mode: screen; }
+.isolate { isolation: isolate; } /* Without isolation, the background color will be taken into account */
+
+ +

{{EmbedLiveSample("SVG_예제", "100%", "180")}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.mix-blend-mode")}}

+ +

같이 보기

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("background-blend-mode")}}
    • +
diff --git a/files/ko/web/css/number/index.html b/files/ko/web/css/number/index.html new file mode 100644 index 0000000000..cc336a6ec2 --- /dev/null +++ b/files/ko/web/css/number/index.html @@ -0,0 +1,85 @@ +--- +title: +slug: Web/CSS/number +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/number +--- +
{{CSSRef}}
+ +

<number> CSS 자료형은 숫자, 즉 정수 또는 실수를 표현합니다.

+ +

구문

+ +

<number> 구문은 {{cssxref("<integer>")}} 구문을 확장합니다. 소수점 이하 값은 . 뒤로 한 개 이상의 10진수 숫자를 붙여 표현하며, 정수 뒤에 이어 붙일 수 있습니다. 따로 연관지어야 하는 단위는 없습니다.

+ +

보간

+ +

애니메이션에서 <number> 자료형의 값은 유동소수점 실수를 사용해 보간합니다. 보간의 속도는 애니메이션과 연결된 timing function이 결정합니다.

+ +

예제

+ +

유효한 숫자

+ +
12          <integer>는 <number>
+4.01        양의 실수
+-456.8      음의 실수
+0.0         0
++0.0        0, 양의 부호
+-0.0        0, 음의 부호
+.60         앞의 0 없는 소수점 이하 값
+10e3        과학적 표기법
+-3.4e-2     복잡한 과학적 표기법
+
+ +

유효하지 않은 숫자

+ +
12.         소수점 뒤에 최소 하나의 숫자가 존재해야 함
++-12.2      하나의 +/-만 허용
+12.1.1      하나의 소수점만 허용
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}No significant change.
{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Explicit definition.
{{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Implicit definition.
+ +

브라우저 호환성

+ +
+

{{Compat("css.types.number")}}

+
+ +

같이 보기

+ +
    +
  • {{cssxref("<integer>")}}
    • +
diff --git a/files/ko/web/css/object-fit/index.html b/files/ko/web/css/object-fit/index.html new file mode 100644 index 0000000000..3c44025c12 --- /dev/null +++ b/files/ko/web/css/object-fit/index.html @@ -0,0 +1,170 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS Images + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

CSS object-fit 속성은 {{HTMLElement("img")}}나 {{HTMLElement("video")}} 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

+ +

{{cssxref("object-position")}} 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

구문

+ +

object-fit 속성은 다음 목록 중 하나의 키워드를 사용해 지정합니다.

+ +

값

+ +
+
contain
+
대체 콘텐츠의 가로세로비를 유지하면서, 요소의 콘텐츠 박스 내부에 들어가도록 크기를 맞춤 조절합니다. 콘텐츠가 콘텐츠 박스 크기에 맞도록 하면서도 가로세로비를 유지하게 되므로, 서로의 가로세로비가 일치하지 않으면 객체가 "레터박스"처럼 됩니다.
+
cover
+
대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.
+
fill
+
요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.
+
none
+
대체 콘텐츠의 크기를 조절하지 않습니다.
+
scale-down
+
none과 contain 중 대체 콘텐츠의 크기가 더 작아지는 값을 선택합니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

이미지에 object-fit 지정

+ +

HTML

+ +
<section>
+  <h2>object-fit: fill</h2>
+  <img class="fill" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="fill narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: contain</h2>
+  <img class="contain" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="contain narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: cover</h2>
+  <img class="cover" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="cover narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: none</h2>
+  <img class="none" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="none narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <h2>object-fit: scale-down</h2>
+  <img class="scale-down" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+
+  <img class="scale-down narrow" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo">
+</section>
+ +

CSS

+ +
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 940px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.narrow {
+  width: 100px;
+  height: 150px;
+  margin-top: 10px;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+
+ +

결과

+ +

{{ EmbedLiveSample('이미지에_object-fit_지정', 500, 1100) }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.object-fit")}}

+ +

같이 보기

+ +
    +
  • 이미지 관련 다른 CSS 속성: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
  • {{cssxref("background-size")}}
    • +
diff --git a/files/ko/web/css/object-position/index.html b/files/ko/web/css/object-position/index.html new file mode 100644 index 0000000000..a53f4e988b --- /dev/null +++ b/files/ko/web/css/object-position/index.html @@ -0,0 +1,123 @@ +--- +title: object-position +slug: Web/CSS/object-position +tags: + - CSS + - CSS Property + - Layout + - Reference + - Replaced Elements + - 대체 요소 +translation_of: Web/CSS/object-position +--- +
{{CSSRef}}
+ +

CSS object-position 속성은 대체 요소의 콘텐츠 정렬 방식을 지정합니다. 대체 요소의 객체가 덮지 않은 부분은 요소의 배경이 보이게 됩니다.

+ +

대체 요소 객체의 고유 크기(수정을 가하지 않은 원래 크기)를 조정해 요소 박스에 맞추는 방법은 {{cssxref("object-fit")}} 속성으로 지정할 수 있습니다.

+ +
{{EmbedInteractiveExample("pages/css/object-position.html")}}
+ + + +

구문

+ +
/* <position> 값 */
+object-position: center top;
+object-position: 100px 50px;
+
+/* 전역 값 */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+
+ +

값

+ +
+
{{cssxref("<position>")}}
+
객체의 2D 위치를 지정하는 한 개에서 네 개의 값. 상대와 절대 오프셋을 사용할 수 있습니다.
+
+ +
+

참고: 콘텐츠가 대체 요소의 박스 바깥으로 나가도록 지정할 수도 있습니다.

+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

이미지 콘텐츠 위치 지정

+ +

HTML

+ +

두 개의 {{htmlelement("img")}} 요소가 MDN 로고를 가리키는 코드입니다.

+ +
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+
+ +

CSS

+ +

다음 CSS는 두 <img> 요소 모두에 적용할 스타일과 함께, 각각 별도로 적용할 object-position 속성도 지정하고 있습니다.

+ +
img {
+  width: 300px;
+  height: 250px;
+  border: 1px solid black;
+  background-color: silver;
+  margin-right: 1em;
+  object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+
+ +

첫 번째 이미지는 요소 박스의 왼쪽 경계로부터 10픽셀 떨어진 곳으로 배치됩니다. 두 번째 이미지는 요소 박스의 오른쪽 경계와 자신의 오른쪽 모서리를 서로 겹치고, 박스의 위쪽 경계로부터 박스 높이의 10% 떨어진 지점으로 배치됩니다.

+ +

결과

+ +

{{ EmbedLiveSample('이미지_콘텐츠_위치_지정', '100%','600px') }}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.object-position")}}

+ +

같이 보기

+ +
    +
  • 이미지 관련 다른 CSS 속성: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • +
diff --git a/files/ko/web/css/opacity/index.html b/files/ko/web/css/opacity/index.html new file mode 100644 index 0000000000..6132b0380a --- /dev/null +++ b/files/ko/web/css/opacity/index.html @@ -0,0 +1,144 @@ +--- +title: opacity +slug: Web/CSS/opacity +tags: + - CSS + - CSS Property + - Reference + - 색 +translation_of: Web/CSS/opacity +--- +
{{CSSRef}}
+ +

opacity CSS 속성은 요소의 불투명도를 설정합니다. 불투명도는 요소 뒤쪽 콘텐츠가 숨겨지는 정도로, 투명도의 반대입니다.

+ +
{{EmbedInteractiveExample("pages/css/opacity.html")}}
+ + + +

opacity는 요소의 내용을 포함해 모든 곳에 영향을 주지만 자식 요소가 상속하지는 않습니다. 따라서 요소와 자식의 투명도가 서로 다르더라도 배경에 대해서는 상대적으로 같은 투명도를 갖습니다.

+ +

opacity 값이 1이 아니면 요소를 새로운 쌓임 맥락에 배치합니다.

+ +

자식 요소는 불투명하게 유지하고 싶다면 {{cssxref("background")}} 속성을 대신 사용하세요.

+ +
background: rgba(0, 0, 0, 0.4);
+ +

구문

+ +

값

+ +
+
<alpha-value>
+
채널의 불투명도(알파 채널의 값)를 나타내는 0.0 이상 1.0 이하의 {{cssxref("number")}}, 또는 0% 이상 100% 이하의 {{cssxref("percentage")}}. 범위 밖의 숫자는 구문 상 유효하지만, 실제 적용 시에는 범위에 맞춰 나머지 값은 버려집니다. + + + + + + + + + + + + + + + + + + + +
값뜻
0요소가 완전히 투명해 보이지 않음.
0과 1 사이의 아무 <number>요소가 반투명해 뒤의 내용을 볼 수 있음.
1 (기본값)요소가 불투명함.
+
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본 예제

+ +
div { background-color: yellow; }
+.light {
+  opacity: 0.2; /* 배경 위로 겨우 볼 수 있음 */
+}
+.medium {
+  opacity: 0.5; /* 배경 위로 조금 더 잘 보임 */
+}
+.heavy {
+  opacity: 0.9; /* 배경 위로 뚜렷하게 보임 */
+}
+
+ +
<div class="light">겨우 보이는 글</div>
+<div class="medium">좀 더 잘 보이는 글</div>
+<div class="heavy">쉽게 보이는 글</div>
+
+ +

{{EmbedLiveSample('기본_예제', '640', '64')}}

+ +

:hover 시 다른 불투명도 적용

+ +
img.opacity {
+  opacity: 1;
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}
+ +
<img src="//developer.mozilla.org/static/img/opengraph-logo.png"
+  alt="MDN logo" width="128" height="146"
+  class="opacity">
+ +

{{EmbedLiveSample('hover_시_다른_불투명도_적용', '150', '175')}}

+ +

접근성 고려사항

+ +

글씨의 투명도를 조절했다면, 낮은 시력을 가진 사용자도 페이지의 콘텐츠를 읽을 수 있도록 글자 색과 배경색의 대비를 높게 유지하는 것이 중요합니다.

+ +

색 대비율은 배경색과 투명도를 적용한 글자 색의 밝기를 비교해서 얻어낼 수 있습니다. 현재 웹 콘텐츠 접근성 가이드라인(WCAG)을 만족하려면, 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1의 대비율이 필요합니다. 큰 텍스트란 18.66px 이상의 굵은 글씨 혹은 24px 이상의 텍스트로 정의하고 있습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Defines opacity as animatable.
{{SpecName('CSS3 Colors', '#opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.opacity", 2)}}

diff --git a/files/ko/web/css/order/index.html b/files/ko/web/css/order/index.html new file mode 100644 index 0000000000..8b25e38777 --- /dev/null +++ b/files/ko/web/css/order/index.html @@ -0,0 +1,110 @@ +--- +title: order +slug: Web/CSS/order +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - Reference +translation_of: Web/CSS/order +--- +
{{CSSRef}}
+ +

order CSS 속성은 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다. 컨테이너 아이템의 정렬 순서는 오름차순 order 값이고, 같은 값일 경우 소스 코드의 순서대로 정렬됩니다.

+ +
{{EmbedInteractiveExample("pages/css/order.html")}}
+ + + +

구문

+ +
/* <integer> 값 */
+order: 5;
+order: -5;
+
+/* 전역 값 */
+order: inherit;
+order: initial;
+order: unset;
+ +
+

참고: order 속성은 논리적인 순서나 탭 순서와는 전혀 상관 없이 화면에 보이는 순서에만 영향을 줍니다. 따라서 비시각적 매체에 적용해선 안됩니다.

+
+ +

값

+ +
+
{{cssxref("<integer>")}}
+
아이템의 순서.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
<header>...</header>
+<main>
+  <article>Article</article>
+  <nav>Nav</nav>
+  <aside>Aside</aside>
+</main>
+<footer>...</footer>
+ +

위와 같은 기본적인 HTML에서, 다음 CSS 코드는 콘텐츠 블록을 감싸는, 고전적인 양쪽 사이드바 레이아웃을 만듭니다. Flexible Box Layout 모듈이 자동으로 모든 블록의 높이를 동일하게 하며 가능한 가로축 공간을 모두 분배합니다.

+ +
main { display: flex;  text-align:center; }
+main > article { flex:1;        order: 2; }
+main > nav     { width: 200px;  order: 1; }
+main > aside   { width: 200px;  order: 3; }
+ +

결과

+ +

{{ EmbedLiveSample('Example') }}

+ +

접근성 고려사항

+ +

order 속성을 사용하면 실제 DOM 순서와 화면에 보여지는 콘텐츠의 순서가 서로 연결되지 않습니다. 이는 낮은 시각으로 스크린 리더 등 보조 기술을 사용해 이동하는 사용자의 경험에 부정적인 영향을 줄 수 있습니다. 시각적 순서(CSS)가 중요하더라도 스크린 리더 사용자는 제대로 된 읽기 순서를 알 수 없습니다.

+ + + +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#order-property', 'order')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.order")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/outline-style/index.html b/files/ko/web/css/outline-style/index.html new file mode 100644 index 0000000000..cc483e5010 --- /dev/null +++ b/files/ko/web/css/outline-style/index.html @@ -0,0 +1,256 @@ +--- +title: outline-style +slug: Web/CSS/outline-style +tags: + - CSS + - CSS Outline + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-style +--- +
{{CSSRef}}
+ +

CSS outline-style 속성은 요소 외곽선의 스타일을 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

+ +
{{EmbedInteractiveExample("pages/css/outline-style.html")}}
+ + + +

외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.

+ +

구문

+ +
/* 키워드 값 */
+outline-style: auto;
+outline-style: none;
+outline-style: dotted;
+outline-style: dashed;
+outline-style: solid;
+outline-style: double;
+outline-style: groove;
+outline-style: ridge;
+outline-style: inset;
+outline-style: outset;
+
+/* 전역 값 */
+outline-style: inherit;
+outline-style: initial;
+outline-style: unset;
+
+ +

outline-style 속성은 다음 값 중 하나를 사용해 지정합니다.

+ +

값

+ +
+
+

auto

+
+
사용자 에이전트가 사용자 지정 외곽선을 그릴 수 있도록 허용합니다.
+
+

none

+
+
외곽선을 제거합니다. {{cssxref("outline-width")}}가 0입니다.
+
+

dotted

+
+
외곽선을 점 여러 개로 그립니다.
+
+

dashed

+
+
외곽선을 짧은 선 여러 개로 그립니다.
+
+

solid

+
+
외곽선을 하나의 선으로 그립니다.
+
+

double

+
+
외곽선을 두 개의 선으로 그립니다. {{cssxref("outline-width")}}는 두 선과 그 사이의 간격을 합친 값입니다.
+
+

groove

+
+
외곽선을 마치 파낸 것처럼 그립니다.
+
+

ridge

+
+
groove의 반대입니다. 외곽선을 마치 튀어나온 것처럼 그립니다.
+
+

inset

+
+
요소가 페이지 안에 박힌 것처럼 외곽선을 그립니다.
+
+

outset

+
+
inset의 반대입니다. 요소가 페이지 밖으로 나온 것처럼 그립니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

외곽선 스타일을 auto로 설정하기

+ +

auto 값은 사용자 지정 스타일을 의미합니다. 일반적으로 플랫폼 기본 사용자 인터페이스 스타일이거나, CSS에서 나타낼 수 있는 것보다 더 풍부한 스타일 (예컨대 둥근 꼭짓점에 바깥쪽 픽셀은 반투명하여 빛나는 것처럼 보이는 외곽선)입니다.

+ +

HTML

+ +
<div>
+  <p class="auto">Outline Demo</p>
+</div>
+ +

CSS

+ +
.auto {
+  outline-style: auto; /* same result as "outline: auto" */
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_auto로_설정하기') }}

+ +

외곽선 스타일을 dashed, dotted로 설정하기

+ +

HTML

+ +
<div>
+  <div class="dotted">
+    <p class="dashed">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.dotted {
+  outline-style: dotted; /* same result as "outline: dotted" */
+}
+.dashed {
+  outline-style: dashed;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_dashed_dotted로_설정하기') }}

+ +

외곽선 스타일을 solid, double로 설정하기

+ +

HTML

+ +
<div>
+  <div class="solid">
+    <p class="double">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.solid {
+  outline-style: solid;
+}
+.double {
+  outline-style: double;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_solid_double로_설정하기') }}

+ +

외곽선 스타일을 groove, ridge로 설정하기

+ +

HTML

+ +
<div>
+  <div class="groove">
+    <p class="ridge">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.groove {
+  outline-style: groove;
+}
+.ridge {
+  outline-style: ridge;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_groove_ridge로_설정하기') }}

+ +

외곽선 스타일을 inset, outset으로 설정하기

+ +

HTML

+ +
<div>
+  <div class="inset">
+    <p class="outset">Outline Demo</p>
+  </div>
+</div>
+ +

CSS

+ +
.inset {
+  outline-style: inset;
+}
+.outset {
+  outline-style: outset;
+}
+
+/* To make the Demo clearer */
+* { outline-width: 10px; padding: 15px; }
+ +

결과

+ +

{{ EmbedLiveSample('외곽선_스타일을_inset_outset으로_설정하기') }}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-style', 'outline-style')}}{{Spec2('CSS3 Basic UI')}}Added auto value.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-style', 'outline-style')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.properties.outline-style")}}

+
diff --git a/files/ko/web/css/outline-width/index.html b/files/ko/web/css/outline-width/index.html new file mode 100644 index 0000000000..0c25d34eb1 --- /dev/null +++ b/files/ko/web/css/outline-width/index.html @@ -0,0 +1,141 @@ +--- +title: outline-width +slug: Web/CSS/outline-width +tags: + - CSS + - CSS Outline + - CSS Property + - Layout + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/outline-width +--- +
{{CSSRef}}
+ +

CSS outline-width 속성은 요소 외곽선의 두께를 설정합니다. 외곽선은 요소의 테두리 바깥에 그려지는 선입니다.

+ +
{{EmbedInteractiveExample("pages/css/outline-width.html")}}
+ + + +

외곽선 외형을 설정할 땐 {{cssxref("outline")}} 단축 속성을 사용하는게 편리한 상황이 많습니다.

+ +

구문

+ +
/* 키워드 값 */
+outline-width: thin;
+outline-width: medium;
+outline-width: thick;
+
+/* <length> 값 */
+outline-width: 1px;
+outline-width: 0.1em;
+
+/* 전역 값 */
+outline-width: inherit;
+
+ +

outline-width 속성은 다음 값 중 하나를 사용해 지정합니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
외곽선의 두께를 <length>로 설정합니다.
+
thin
+
사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 1px입니다.
+
medium
+
사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 3px입니다.
+
thick
+
사용자 에이전트마다 다릅니다. 데스크톱 브라우저에서는 보통 5px입니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

요소의 외곽선 두께 설정하기

+ +

HTML

+ +
<span id="thin">thin</span>
+<span id="medium">medium</span>
+<span id="thick">thick</span>
+<span id="twopixels">2px</span>
+<span id="oneex">1ex</span>
+<span id="em">1.2em</span>
+
+ +

CSS

+ +
span {
+  outline-style: solid;
+  display: inline-block;
+  margin: 20px;
+}
+
+#thin {
+  outline-width: thin;
+}
+
+#medium {
+  outline-width: medium;
+}
+
+#thick {
+  outline-width: thick;
+}
+
+#twopixels {
+  outline-width: 2px;
+}
+
+#oneex {
+  outline-width: 1ex;
+}
+
+#em {
+  outline-width: 1.2em;
+}
+
+
+ +

결과

+ +

{{EmbedLiveSample('요소의_외곽선_두께_설정하기', '100%', '80')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-width', 'outline-width')}}{{Spec2('CSS3 Basic UI')}}No change.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-width', 'outline-width')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.outline-width")}}

diff --git a/files/ko/web/css/outline/index.html b/files/ko/web/css/outline/index.html new file mode 100644 index 0000000000..4b578c289b --- /dev/null +++ b/files/ko/web/css/outline/index.html @@ -0,0 +1,158 @@ +--- +title: outline +slug: Web/CSS/outline +tags: + - CSS + - CSS Outline + - CSS Property + - Layout + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/outline +--- +
{{CSSRef}}
+ +

CSS outline 단축 속성은 모든 외곽선 속성을 한꺼번에 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/outline.html")}}
+ + + +

구성 속성

+ +

outline은 단축 속성으로서 다음의 하위 속성을 포함합니다.

+ +
    +
  • {{cssxref("outline-color")}}
    • +
  • {{cssxref("outline-style")}}
    • +
  • {{cssxref("outline-width")}}
    • +
+ +

구문

+ +
/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* 전역 값 */
+outline: inherit;
+outline: initial;
+outline: unset;
+
+ +

outline 속성은 아래의 값 중 한 개에서 세 개를 사용해 지정할 수 있으며 순서는 상관하지 않습니다.

+ +
+

참고: 많은 요소의 외곽선은 스타일을 지정하지 않을 경우 보이지 않습니다. 스타일 기본값이 none이기 때문인데, 주목할만한 예외는 {{htmlelement("input")}} 요소로 브라우저의 기본 스타일이 적용됩니다.

+
+ +

값

+ +
+
<'outline-color'>
+
외곽선의 색을 설정합니다. 누락 시 기본값은 currentcolor입니다. {{cssxref("outline-color")}}를 참고하세요.
+
<'outline-style'>
+
외곽선의 스타일을 설정합니다. 누락 시 기본값은 none입니다. {{cssxref("outline-style")}}을 참고하세요.
+
<'outline-width'>
+
외곽선의 두께를 설정합니다. 누락 시 기본값은 medium입니다. {{cssxref("outline-width")}}를 참고하세요.
+
+ +

설명

+ +

테두리와 외곽선은 매우 유사하지만, 다음의 두 가지 차이점이 존재합니다.

+ +
    +
  • 외곽선은 요소 콘텐츠의 밖에 그려지며 절대 공간을 차지하지 않습니다.
    • +
  • 명세에 따르면 외곽선은 직사각형일 필요가 없습니다. 보통 직사각형으로 그리기는 합니다.
    • +
+ +

다른 모든 단축 속성과 마찬가지로, 누락한 하위 속성의 값은 초깃값으로 설정됩니다.

+ +

접근성 고려사항

+ +

outline에 0 또는 none 값을 지정하면 브라우저의 기본 포커스 스타일이 사라집니다. 만약 어떤 요소가 상호작용 가능하다면 반드시 시각으로 포커스 여부를 나타낼 수 있어야 합니다. 기본 포커스 스타일을 제거한 경우 다른 뚜렷한 대안을 제공하세요.

+ + + +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

외곽선으로 포커스 스타일 설정

+ +

HTML

+ +
<a href="#">This link has a special focus style.</a>
+
+ +

CSS

+ +
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("외곽선으로_포커스_스타일_설정", "100%", 60)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}No change.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

브라우저 호환성

+ +
+ + +

{{Compat("css.properties.outline")}}

+
diff --git a/files/ko/web/css/overflow-wrap/index.html b/files/ko/web/css/overflow-wrap/index.html new file mode 100644 index 0000000000..b2241a5b61 --- /dev/null +++ b/files/ko/web/css/overflow-wrap/index.html @@ -0,0 +1,118 @@ +--- +title: overflow-wrap +slug: Web/CSS/overflow-wrap +tags: + - CSS + - CSS Property + - CSS Text + - Reference +translation_of: Web/CSS/overflow-wrap +--- +
{{CSSRef}}
+ +

overflow-wrap CSS 요소는 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용됩니다.

+ +
Note: {{cssxref("word-break")}}와는 달리, overflow-wrap은 모든 단어가 넘치지 않으면 자신의 줄 안에 놓여 있을 수 없을 때 줄 바꿈을 한 번만 할 것입니다.
+ +

이 속성은 처음에 마이크로소프트에서 표준이 아니고 접두어가 없는 word-wrap으로 나왔고, 대부분 브라우저에서 똑같은 이름으로 구현되었습니다. 요즘은 overflow-wrap으로 다시 지어지고, word-wrap은 동의어가 되었습니다.

+ +

구문

+ +
/* Keyword values */
+overflow-wrap: normal;
+overflow-wrap: break-word;
+
+/* Global values */
+overflow-wrap: inherit;
+overflow-wrap: initial;
+overflow-wrap: unset;
+
+ +

overflow-wrap 속성은 아래에 나열돼 있는 값들 중 단 하나로 정해집니다.

+ +

값

+ +
+
normal
+
줄이 오직 (두 단어 사이의 공백과 같이) 보통의 줄 바꿈 지점에서만 줄을 바꿉니다.
+
break-word
+
보통 안 바꿔지는 단어들을 한 줄에서 대신 줄을 바꿀 만한 지점이 없을 시 임의의 지점에서 줄을 바꿉니다.
+
+ +

기본적인 구문

+ +
{{csssyntax}}
+ +

예시

+ +

이 예시는 긴 단어를 넘길 때 overflow-wrap, word-break, 그리고 hyphens의 결과를 비교합니다.

+ +

HTML

+ +
<p class="normal">They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (normal)</p>
+<p class="overflow-wrap">They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (overflow-wrap)</p>
+<p class="word-break">They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (word-break)</p>
+<p class="hyphens">They say the fishing is excellent at
+  Lake Chargoggagoggmanchauggagoggchaubunagungamaugg,
+  though I've never been there myself. (hyphens)</p>
+ +

CSS

+ +
p {
+  width: 13em;
+  background: gold;
+}
+
+.overflow-wrap {
+  overflow-wrap: break-word;
+}
+
+.word-break {
+  word-break: break-all;
+}
+
+.hyphens {
+  hyphens: auto;
+}
+
+ +

Result

+ +

{{ EmbedLiveSample('Example', '100%', 260) }}

+ +

사양

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Text', '#propdef-overflow-wrap', 'overflow-wrap') }}{{ Spec2('CSS3 Text') }}Initial definition
+ +

브라우저 호환성

+ +

{{Compat("css.properties.overflow-wrap")}}

+ + + +

바로 보기

+ +
    +
  • {{cssxref("word-break")}}
    • +
diff --git a/files/ko/web/css/overflow/index.html b/files/ko/web/css/overflow/index.html new file mode 100644 index 0000000000..5e5e2296ae --- /dev/null +++ b/files/ko/web/css/overflow/index.html @@ -0,0 +1,146 @@ +--- +title: overflow +slug: Web/CSS/overflow +tags: + - CSS + - CSS Box Model + - CSS Property + - Layout + - Reference +translation_of: Web/CSS/overflow +--- +
{{CSSRef}}
+ +

overflow CSS 단축 속성은 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정합니다. {{cssxref("overflow-x")}}, {{cssxref("overflow-y")}}의 값을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/overflow.html")}}
+ + + +

적용 가능한 방법은 잘라내기, 스크롤바 노출, 넘친 콘텐츠 그대로 노출 등이 있습니다.

+ +

visible(기본값)이 아닌 다른 값으로 overflow 속성을 사용할 경우 새로운 블록 서식 문맥을 생성합니다. 이는 기술적인 요구사항으로, 만약 스크롤하는 요소와 float이 교차한다면, 각 스크롤 단계마다 내용물을 강제적으로 다시 감싸게 될 것입니다. 이는 결국 스크롤 속도를 느리게 할 것입니다.

+ +

overflow 속성이 효력을 갖기 위해선 반드시 블록 레벨 컨테이너의 높이(height 또는 max-height)를 설정하거나, white-space를 nowrap으로 설정해야 합니다.

+ +
+

참고: 하나의 축을 visible(기본값)로 하고, 다른 축에는 다른 값을 지정할 경우 visible이 auto처럼 동작합니다.

+
+ +
+

참고: JavaScript {{domxref("Element.scrollTop")}} 속성을 사용하면 요소의 overflow가 hidden일 때도 스크롤할 수 있습니다.

+
+ +

구문

+ +
/* 키워드 값 */
+overflow: visible;
+overflow: hidden;
+overflow: clip;
+overflow: scroll;
+overflow: auto;
+overflow: hidden visible;
+
+/* 전역 값 */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+
+ +

overflow 속성은 아래의 키워드 값을 하나 또는 두 개 사용해 지정합니다. 두 개를 사용한 경우 첫 번째 값은 overflow-x, 두 번째 값은 overflow-y를 지정합니다. 하나만 사용하면 지정한 값을 양 축 모두에 적용합니다.

+ +

값

+ +
+
visible
+
콘텐츠를 자르지 않으며 안쪽 여백 상자 밖에도 그릴 수 있습니다.
+
hidden
+
콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 스크롤바를 제공하지 않고, 스크롤할 방법(드래그, 마우스 휠 등)도 지원하지 않습니다. 코드를 사용해 스크롤할 수는 있으므로 ({{domxref("HTMLElement.offsetLeft", "offsetLeft")}} 속성 설정 등), 이 상태의 요소도 스크롤 컨테이너입니다.
+
clip {{experimental_inline}}
+
hidden과 마찬가지로, 콘텐츠를 안쪽 여백 상자에 맞춰 자릅니다. 그러나 clip은 코드를 사용한 스크롤링도 방지하므로 어떠한 스크롤도 불가능합니다. 이 상태의 요소는 스크롤 컨테이너가 아니며, 새로운 블록 서식 문맥도 생성하지 않습니다. 서식 문맥이 필요하다면 {{cssxref("display", "display:flow-root", "#flow-root")}}을 사용할 수 있습니다.
+
scroll
+
콘텐츠를 안쪽 여백 상자에 맞추기 위해 잘라냅니다. 브라우저는 콘텐츠를 실제로 잘라냈는지 여부를 따지지 않고 항상 스크롤바를 노출하므로 내용의 변화에 따라 스크롤바가 생기거나 사라지지 않습니다. 프린터는 여전히 넘친 콘텐츠를 출력할 수도 있습니다.
+
auto
+
{{glossary("user agent", "사용자 에이전트")}}가 결정합니다. 콘텐츠가 안쪽 여백 상자에 들어간다면 visible과 동일하게 보이나, 새로운 블록 서식 문맥을 생성합니다. 데스크톱 브라우저의 경우 콘텐츠가 넘칠 때 스크롤바를 노출합니다.
+
+ +
+
overlay {{deprecated_inline}}
+
auto와 동일하게 동작하지만, 스크롤바가 공간을 차지하는 대신 콘텐츠 위에 위치합니다. Webkit(Safari 등)과 Blink(Chrome 또는 Opera 등) 기반 브라우저만 지원합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: visible; /* content is not clipped */
+}
+
+ +

visible (default)
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: hidden; /* no scrollbars are provided */ }
+
+ +

overflow: hidden
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: scroll; /* always show scrollbars */ }
+
+ +

overflow: scroll
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +
p { overflow: auto; /* append scrollbars if necessary */ }
+
+ +

overflow: auto
+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}}
{{SpecName('CSS3 Box', '#overflow1', 'overflow')}}{{Spec2('CSS3 Box')}}No change
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Initial definition
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ +

{{Compat("css.properties.overflow")}}

+ +

같이 보기

+ +
    +
  • 관련 CSS 속성: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • +
diff --git a/files/ko/web/css/padding-bottom/index.html b/files/ko/web/css/padding-bottom/index.html new file mode 100644 index 0000000000..119bc4fd25 --- /dev/null +++ b/files/ko/web/css/padding-bottom/index.html @@ -0,0 +1,111 @@ +--- +title: padding-bottom +slug: Web/CSS/padding-bottom +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-bottom +--- +
{{CSSRef}}
+ +

padding-bottom CSS 속성은 요소의 아래쪽에 안쪽 여백 영역을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/padding-bottom.html")}}
+ + + +

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

+ +

The effect of the CSS padding-top property on the element box

+ +
+

참고: {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

+
+ +

구문

+ +
/* <length> 값 */
+padding-bottom: 0.5em;
+padding-bottom: 0;
+padding-bottom: 2cm;
+
+/* <percentage> 값 */
+padding-bottom: 10%;
+
+/* 전역 값 */
+padding-bottom: inherit;
+padding-bottom: initial;
+padding-bottom: unset;
+
+ +

padding-top 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("<percentage>")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-bottom') }}{{ Spec2('CSS3 Box') }}No change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-bottom') }}{{ Spec2('CSS3 Transitions') }}Defines padding-bottom as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-bottom') }}{{ Spec2('CSS2.1') }}No change.
{{ Specname('CSS1', '#padding-bottom', 'padding-bottom') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.padding-bottom")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/padding-left/index.html b/files/ko/web/css/padding-left/index.html new file mode 100644 index 0000000000..d866466b4c --- /dev/null +++ b/files/ko/web/css/padding-left/index.html @@ -0,0 +1,109 @@ +--- +title: padding-left +slug: Web/CSS/padding-left +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-left +--- +
{{CSSRef}}
+ +

padding-left CSS 속성은 요소의 왼쪽에 안쪽 여백 영역을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/padding-left.html")}}
+ + + +

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

+ +
+

참고: {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

+
+ +

구문

+ +
/* <length> 값 */
+padding-left: 0.5em;
+padding-left: 0;
+padding-left: 2cm;
+
+/* <percentage> 값 */
+padding-left: 10%;
+
+/* 전역 값 */
+padding-left: inherit;
+padding-left: initial;
+padding-left: unset;
+
+ +

padding-left 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("<percentage>")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-left') }}{{ Spec2('CSS3 Box') }}No change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-left') }}{{ Spec2('CSS3 Transitions') }}Defines padding-left as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-left') }}{{ Spec2('CSS2.1') }}No change.
{{ Specname('CSS1', '#padding-left', 'padding-left') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.padding-left")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/padding-right/index.html b/files/ko/web/css/padding-right/index.html new file mode 100644 index 0000000000..44c0a5be73 --- /dev/null +++ b/files/ko/web/css/padding-right/index.html @@ -0,0 +1,109 @@ +--- +title: padding-right +slug: Web/CSS/padding-right +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-right +--- +
{{CSSRef}}
+ +

padding-right CSS 속성은 요소의 오른쪽에 안쪽 여백 영역을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/padding-right.html")}}
+ + + +

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

+ +
+

참고: {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

+
+ +

구문

+ +
/* <length> 값 */
+padding-right: 0.5em;
+padding-right: 0;
+padding-right: 2cm;
+
+/* <percentage> 값 */
+padding-right: 10%;
+
+/* 전역 값 */
+padding-right: inherit;
+padding-right: initial;
+padding-right: unset;
+
+ +

padding-right 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("<percentage>")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-right') }}{{ Spec2('CSS3 Box') }}No change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-right') }}{{ Spec2('CSS3 Transitions') }}Defines padding-right as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-right') }}{{ Spec2('CSS2.1') }}No change.
{{ Specname('CSS1', '#padding-right', 'padding-right') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.padding-right")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/padding-top/index.html b/files/ko/web/css/padding-top/index.html new file mode 100644 index 0000000000..708dd59e5d --- /dev/null +++ b/files/ko/web/css/padding-top/index.html @@ -0,0 +1,111 @@ +--- +title: padding-top +slug: Web/CSS/padding-top +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding-top +--- +
{{CSSRef}}
+ +

padding-top CSS 속성은 요소의 위쪽에 안쪽 여백 영역을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/padding-top.html")}}
+ + + +

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

+ +

The effect of the CSS padding-top property on the element box

+ +
+

참고: {{cssxref("padding")}} 속성을 사용하면 하나의 선언으로 네 방향 여백을 모두 설정할 수 있습니다.

+
+ +

구문

+ +
/* <length> 값 */
+padding-top: 0.5em;
+padding-top: 0;
+padding-top: 2cm;
+
+/* <percentage> 값 */
+padding-top: 10%;
+
+/* 전역 값 */
+padding-top: inherit;
+padding-top: initial;
+padding-top: unset;
+
+ +

padding-top 속성의 값은 아래 목록 중 하나로 지정할 수 있습니다. 바깥 여백margin과 다르게, 음수 값은 사용할 수 없습니다.

+ +

값

+ +
+
{{cssxref("<length>")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("<percentage>")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding-top') }}{{ Spec2('CSS3 Box') }}No change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding-top') }}{{ Spec2('CSS3 Transitions') }}Defines padding-top as animatable.
{{ SpecName('CSS2.1', 'box.html#padding-properties', 'padding-top') }}{{ Spec2('CSS2.1') }}No change.
{{ Specname('CSS1', '#padding-top', 'padding-top') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.padding-top")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/padding/index.html b/files/ko/web/css/padding/index.html new file mode 100644 index 0000000000..e69023e569 --- /dev/null +++ b/files/ko/web/css/padding/index.html @@ -0,0 +1,158 @@ +--- +title: padding +slug: Web/CSS/padding +tags: + - CSS + - CSS Padding + - CSS Property + - Reference +translation_of: Web/CSS/padding +--- +
{{CSSRef}}
+ +

padding CSS 속성은 요소의 네 방향 안쪽 여백 영역을 설정합니다. {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}의 단축 속성입니다.

+ +
{{EmbedInteractiveExample("pages/css/padding.html")}}
+ + + +

요소의 안쪽 여백 영역은 콘텐츠와 테두리 사이의 공간입니다.

+ +
+

참고: padding은 요소의 내부에 빈 공간을 추가합니다. 반면 {{cssxref("margin")}}은 요소의 주위에 빈 공간을 만듭니다.

+
+ +

구문

+ +
/* 네 면 모두 적용 */
+padding: 1em;
+
+/* 세로방향 | 가로방향 */
+padding: 5% 10%;
+
+/* 위 | 가로방향 | 아래 */
+padding: 1em 2em 2em;
+
+/* 위 | 오른쪽 | 아래 | 왼쪽 */
+padding: 5px 1em 0 2em;
+
+/* 전역 값 */
+padding: inherit;
+padding: initial;
+padding: unset;
+
+ +

padding 속성은 한 개, 두 개, 세 개, 혹은 네 개의 값으로 지정할 수 있습니다. 각 값은 {{cssxref("<length>")}}, {{cssxref("<percentage>")}} 중 하나로, 음수 값은 유효하지 않습니다.

+ +
    +
  • 한 개의 값은 모든 네 면의 여백을 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)
    • +
+ +

값

+ +
+
{{cssxref("length")}}
+
여백의 크기로 고정값 사용.
+
{{cssxref("percentage")}}
+
여백의 크기로 컨테이닝 블록 너비의 백분율 사용.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

간단한 예제

+ +

HTML

+ +
<h4>평범한 안쪽 여백을 가진 요소.</h4>
+<h3>엄청난 안쪽 여백을 가진 요소!</h3>
+
+ +

CSS

+ +
h4 {
+  background-color: lime;
+  padding: 20px 50px;
+}
+
+h3 {
+  background-color: cyan;
+  padding: 110px 50px 50px 110px;
+}
+
+ +

{{EmbedLiveSample('간단한_예제', '100%', 300)}}

+ +

더 많은 예제

+ +
padding: 5%;                /* 모두 5% */
+
+padding: 10px;              /* 모두 10px */
+
+padding: 10px 20px;         /* 상하: 10px */
+                            /* 좌우: 20px */
+
+padding: 10px 3% 20px;      /* 상: 10px */
+                            /* 좌우: 3% */
+                            /* 하: 20px */
+
+padding: 1em 3px 30px 5px;  /* 상:  1em */
+                            /* 우:  3px */
+                            /* 하: 30px */
+                            /* 좌:  5px */
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}No change.
{{ SpecName('CSS3 Transitions', '#animatable-css', 'padding') }}{{ Spec2('CSS3 Transitions') }}Defines padding as animatable.
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding') }}{{ Spec2('CSS2.1') }}No change.
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.padding")}}

+ +

같이 보기

+ +
    +
  • CSS 기본 박스 모델 입문
    • +
  • {{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-bottom")}}, {{cssxref("padding-left")}}.
    • +
diff --git a/files/ko/web/css/paged_media/index.html b/files/ko/web/css/paged_media/index.html new file mode 100644 index 0000000000..fd998e8d03 --- /dev/null +++ b/files/ko/web/css/paged_media/index.html @@ -0,0 +1,19 @@ +--- +title: Paged Media +slug: Web/CSS/Paged_Media +tags: + - CSS + - CSS3 + - Page Breaks +translation_of: Web/CSS/Paged_Media +--- +

인쇄 미디어(paged media) 속성은 인쇄 콘텐츠의 프레젠테이션 또는 콘텐츠를 개별 페이지로 나누는 다른 미디어를 제어합니다. 페이지 나누기 설정, 인쇄 가능 영역 제어, 서로 다른 좌우 페이지 스타일 및 요소 내부 나누기 제어를 할 수 있습니다. 널리 지원되는 속성은 포함합니다

+ +
    +
  • {{ cssxref("page-break-before") }}
    • +
  • {{ cssxref("page-break-after") }}
    • +
  • {{ cssxref("page-break-inside") }}
    • +
  • {{ cssxref("orphans") }}
    • +
  • {{ cssxref("widows") }}
    • +
  • {{ cssxref("@page") }}
    • +
diff --git a/files/ko/web/css/paint-order/index.html b/files/ko/web/css/paint-order/index.html new file mode 100644 index 0000000000..00b7ff9311 --- /dev/null +++ b/files/ko/web/css/paint-order/index.html @@ -0,0 +1,110 @@ +--- +title: paint-order +slug: Web/CSS/paint-order +tags: + - CSS + - Reference + - SVG + - Web + - 'recipe:css-property' +translation_of: Web/CSS/paint-order +--- +
{{CSSRef}}
+ +

CSS paint-order 속성은 텍스트 및 모양의 채움 색과 테두리(마커 포함)를 그리는 순서를 지정합니다.

+ +

구문

+ +
/* 일반 */
+paint-order: normal;
+
+/* 단일 값 */
+paint-order: stroke; /* draw the stroke first, then fill and markers */
+paint-order: markers; /* draw the markers first, then fill and stroke */
+
+/* 다중 값 */
+paint-order: stroke fill; /* draw the stroke first, then the fill, then the markers */
+paint-order: markers stroke fill; /* draw markers, then stroke, then fill */
+
+ +

아무것도 지정하지 않았을 때의 기본값은 fill, stroke, markers입니다.

+ +

하나의 값만 지정하면 그 값을 제일 먼저 그린 후, 기본값의 순서에 따라 나머지를 그립니다. 두 개를 지정하면 나머지 하나를 맨 나중에 그립니다.

+ +
+

참고: 마커의 경우 marker-* 속성(marker-start 등)과 <marker> 요소를 사용하는 SVG 모양의 경우에만 올바릅니다. HTML 텍스트는 이에 해당하지 않으므로 stroke와 fill의 순서만 정할 수 있습니다.

+
+ +

값

+ +
+
normal
+
일반적인 그리기 순서를 사용합니다.
+
stroke,
+ fill,
+ markers
+
일부 항목 또는 모든 항목의 그리기 순서를 지정합니다.
+
+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

테두리와 채움 색 순서 바꾸기

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
+  <text x="10" y="75">stroke in front</text>
+  <text x="10" y="150" class="stroke-behind">stroke behind</text>
+</svg>
+ +

CSS

+ +
text {
+  font-family: sans-serif;
+  font-size: 50px;
+  font-weight: bold;
+  fill: black;
+  stroke: red;
+  stroke-width: 4px;
+}
+
+.stroke-behind {
+  paint-order: stroke fill;
+}
+ +

결과

+ +

{{EmbedLiveSample("테두리와_채움_색_순서_바꾸기", "100%", 165)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("SVG2", "painting.html#PaintOrder", "paint-order")}}{{Spec2("SVG2")}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.paint-order")}}

diff --git a/files/ko/web/css/percentage/index.html b/files/ko/web/css/percentage/index.html new file mode 100644 index 0000000000..a6bf20bfb6 --- /dev/null +++ b/files/ko/web/css/percentage/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: Web/CSS/percentage +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/percentage +--- +
{{CSSRef}}
+ +

<percentage> CSS 자료형은 백분율 값을 나타냅니다. 보통 부모 객체와의 상대적 크기를 지정할 때 사용합니다. {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("font-size")}} 처럼 다양한 속성에서 백분율을 쓸 수 있습니다.

+ +
참고: 계산된 값만 상속받을 수 있습니다. 따라서 부모 속성이 백분율 값을 사용하더라도 전달되는 값은 실제값(예컨대 너비의 {{cssxref("<length>")}} 값은 픽셀)이며 백분율 값은 접근할 수 없습니다.
+ +

구문

+ +

<percentage> 자료형은 {{cssxref("<number>")}}와 그 뒤의 백분율 기호(%)로 표기합니다. 선택적으로 하나의 + 또는 - 기호로 부호를 표기할 수 있지만, 음의 값은 어떤 속성에서도 유효하지 않습니다. 다른 CSS 단위와 마찬가지로 숫자와 기호 사이에 공백은 없습니다.

+ +

보간

+ +

애니메이션에서 <percentage> 자료형의 값은 유동소수점 실수를 사용해 보간됩니다. 보간의 속도는 애니메이션과 연결된 타이밍 함수가 결정합니다.

+ +

예제

+ +

width와 margin-left

+ +
<div style="background-color:blue;">
+  <div style="width:50%; margin-left:20%; background-color:lime;">
+    width: 50%, margin-left: 20%
+  </div>
+  <div style="width:30%; margin-left:60%; background-color:pink;">
+    width: 30%, margin-left: 60%
+  </div>
+</div>
+
+ +

{{EmbedLiveSample('width와_margin-left', '600', 140)}}

+ +

font-size

+ +
<div style="font-size:18px;">
+  <p>원본 텍스트 (18px)</p>
+  <p><span style="font-size:50%;">50%</span></p>
+  <p><span style="font-size:200%;">200%</span></p>
+</div>
+
+ +

{{EmbedLiveSample('font-size', 'auto', 160)}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#percentages', '<percentage>')}}{{Spec2('CSS3 Values')}}No significant change from CSS Level 2 (Revision 1).
{{SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>')}}{{Spec2('CSS2.1')}}No change from CSS Level 1.
{{SpecName('CSS1', '#percentage-units', '<percentage>')}}{{Spec2('CSS1')}}Initial definition.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.percentage")}}

diff --git a/files/ko/web/css/pointer-events/index.html b/files/ko/web/css/pointer-events/index.html new file mode 100644 index 0000000000..db74788d89 --- /dev/null +++ b/files/ko/web/css/pointer-events/index.html @@ -0,0 +1,168 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS + - CSS Property + - Reference + - SVG +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

pointer-events CSS 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는지 지정합니다.

+ +
{{EmbedInteractiveExample("pages/css/pointer-events.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG only */
+pointer-events: visibleFill;    /* SVG only */
+pointer-events: visibleStroke;  /* SVG only */
+pointer-events: visible;        /* SVG only */
+pointer-events: painted;        /* SVG only */
+pointer-events: fill;           /* SVG only */
+pointer-events: stroke;         /* SVG only */
+pointer-events: all;            /* SVG only */
+
+/* 전역 값 */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+
+ +

pointer-events 속성은 아래 목록의 값 중 하나를 선택해서 지정할 수 있습니다.

+ +

값

+ +
+
auto
+
요소가 pointer-events 속성을 지정하지 않은 것처럼 행동합니다. SVG 콘텐츠에서는 auto와 visiblePainted가 동일한 효과를 지닙니다.
+
+ +
+
none
+
요소가 포인터 이벤트의 대상이 되지 않습니다. 그러나 해당 요소의 자손이 다른 pointer-events 값을 지정한 경우, 그 자손은 대상이 될 수 있습니다. 이 때는 이벤트 캡처/버블 단계에서 none을 지정한 요소의 이벤트 처리기를 발동할 수 있습니다.
+
+ +

SVG 전용 (HTML에서 실험적 기능)

+ +
+
visiblePainted
+
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none.
+
visibleFill
+
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the interior (i.e., fill) of the element. The value of the fill property does not affect event processing.
+
visibleStroke
+
SVG only. The element can only be the target of a mouse event when the visibility property is set to visible and when the mouse cursor is over the perimeter (i.e., stroke) of the element. The value of the stroke property does not affect event processing.
+
visible
+
SVG only. The element can be the target of a mouse event when the visibility property is set to visible and the mouse cursor is over either the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill and stroke do not affect event processing.
+
painted
+
SVG only. The element can only be the target of a mouse event when the mouse cursor is over the interior (i.e., 'fill') of the element and the fill property is set to a value other than none, or when the mouse cursor is over the perimeter (i.e., 'stroke') of the element and the stroke property is set to a value other than none. The value of the visibility property does not affect event processing.
+
fill
+
SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) of the element. The values of the fill and visibility properties do not affect event processing.
+
stroke
+
SVG only. The element can only be the target of a mouse event when the pointer is over the perimeter (i.e., stroke) of the element. The values of the stroke and visibility properties do not affect event processing.
+
all
+
SVG only. The element can only be the target of a mouse event when the pointer is over the interior (i.e., fill) or the perimeter (i.e., stroke) of the element. The values of the fill, stroke and visibility properties do not affect event processing.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

설명

+ +

SVG 콘텐츠에 pointer-events를 지정하지 않은 경우, visiblePainted 값과 동일한 방법을 사용합니다.

+ +

none 값의 경우 요소가 포인터 이벤트의 대상이 아님을 가리키는 동시에, 이벤트가 요소를 "뚫고" 들어가 "아래" 요소를 대상으로 하도록 만듭니다.

+ +

다만, pointer-events를 사용해 요소가 포인터 이벤트의 대상이 되지 않도록 지정한다 하여도, 요소의 이벤트 수신기가 절대 발동하지 않거나, 아예 발동할 수 없는 상태가 되는 것은 아닙니다. 만약 자식 요소 중 하나의 pointer-events를 명시적으로 허용한 경우, 해당 자식을 대상으로 하는 이벤트는 평범하게 부모 트리를 타고 올라가며, 그 도중에 부모의 이벤트 수신기를 발동시게 됩니다. 물론, 부모 요소가 덮고 있지만 (포인터 이벤트를 허용한) 자식 요소 바깥의 영역은 클릭해도 부모와 자식 둘 다 감지하지 못합니다.

+ +

pointer-events: none을 지정한 요소여도 Tab 키를 사용한 순차적 키보드 내비게이션으로 인해 포커스를 획득할 수 있습니다.

+ +

We would like to provide finer grained control (than just auto and none) in HTML for which parts of an element will cause it to "catch" pointer events, and when. To help us in deciding how pointer-events should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of this wiki page (don't worry about keeping it tidy).

+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

기본 예제

+ +

다음 예제는 모든 이미지에서 포인터 이벤트(클릭, 드래그, 호버 등)를 비활성화합니다.

+ +
img {
+  pointer-events: none;
+}
+ +

링크 비활성화하기

+ +

다음 예제는 https://example.com으로 통하는 링크의 포인터 이벤트를 비활성화합니다.

+ +

HTML

+ +
<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://example.com">example.com</a></li>
+</ul>
+ +

CSS

+ +
a[href="http://example.com"] {
+  pointer-events: none;
+}
+ +

결과

+ +
{{EmbedLiveSample("링크_비활성화하기", "500", "100")}}
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.pointer-events")}}

+ +

같이 보기

+ +
    +
  • The SVG attribute {{SVGAttr("pointer-events")}}
    • +
  • The SVG attribute {{SVGAttr("visibility")}}
    • +
  • WebKit Specs PointerEventsProperty extended for use in (X)HTML content
    • +
  • {{cssxref("user-select")}} - controls whether the user can select text
    • +
diff --git a/files/ko/web/css/position/index.html b/files/ko/web/css/position/index.html new file mode 100644 index 0000000000..ce23867543 --- /dev/null +++ b/files/ko/web/css/position/index.html @@ -0,0 +1,316 @@ +--- +title: position +slug: Web/CSS/position +tags: + - CSS + - CSS Positioninng + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/position +--- +
{{CSSRef}}
+ +

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}} 속성이 요소를 배치할 최종 위치를 결정합니다.

+ +
{{EmbedInteractiveExample("pages/css/position.html")}}
+ + + +

구문

+ +

position 속성은 아래의 목록에서 하나의 키워드 값을 선택해 지정할 수 있습니다.

+ +

값

+ +
+
static
+
요소를 일반적인 문서 흐름에 따라 배치합니다. {{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, {{cssxref("z-index")}} 속성이 아무런 영향도 주지 않습니다. 기본값입니다.
+
relative
+
요소를 일반적인 문서 흐름에 따라 배치하고, 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다. 따라서 페이지 레이아웃에서 요소가 차지하는 공간은 static일 때와 같습니다.
+
{{cssxref("z-index")}}의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. table-*-group, table-row, table-column, table-cell, table-caption 요소에 적용했을 때의 작동 방식은 정의되지 않았습니다.
+
absolute
+
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다. 단, 조상 중 위치 지정 요소가 없다면 초기 컨테이닝 블록을 기준으로 삼습니다. 최종 위치는 top, right, bottom, left 값이 지정합니다.
+
{{cssxref("z-index")}}의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성합니다. 절대 위치 지정 요소의 바깥 여백은 서로 상쇄되지 않습니다.
+
fixed
+
요소를 일반적인 문서 흐름에서 제거하고, 페이지 레이아웃에 공간도 배정하지 않습니다. 대신 {{glossary("viewport", "뷰포트")}}의 초기 컨테이닝 블록을 기준으로 삼아 배치합니다. 단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none이 아니라면 (CSS Transforms 명세 참조) 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. (perspective와 filter의 경우 브라우저별로 결과가 다름에 유의) 최종 위치는 top, right, bottom, left 값이 지정합니다.
+
이 값은 항상 새로운 쌓임 맥락을 생성합니다. 문서를 인쇄할 때는 해당 요소가 모든 페이지의 같은 위치에 출력됩니다.
+
sticky
+
요소를 일반적인 문서 흐름에 따라 배치하고, 테이블 관련 요소를 포함해 가장 가까운, 스크롤 되는 조상과, 표 관련 요소를 포함한 컨테이닝 블록(가장 가까운 블록 레벨 조상) 을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다. 오프셋은 다른 요소에는 영향을 주지 않습니다.
+
이 값은 항상 새로운 쌓임 맥락을 생성합니다. 끈끈한 요소는 "스크롤 동작"(overflow가 hidden, scroll, auto 혹은 overlay)이 존재하는 가장 가까운 조상에 달라붙으며, 사실 그 조상은 스크롤 불가하며 실제로 스크롤 가능한 조상이 따로 존재할 경우 "끈끈한" 동작을 보이지 않는 점에 주의하세요. (W3C CSSWG의 Github 이슈 참조)
+
+ +

설명

+ +

배치 유형

+ +
    +
  • 위치 지정 요소란 position의 계산값이 relative, absolute, fixed, sticky 중 하나인 요소입니다. 즉, 값이 static이 아닌 모든 요소를 말합니다.
    • +
  • 상대 위치 지정 요소는position의 계산값이 relative인 요소입니다. {{cssxref("top")}}과 {{cssxref("bottom")}}은 원래 위치에서의 세로축 거리를, {{cssxref("left")}}와 {{cssxref("right")}}은 원래 위치에서의 가로축 거리를 지정합니다.
    • +
  • 절대 위치 지정 요소는position의 계산값이 absolute 또는 fixed인 요소입니다.{{cssxref("top")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}는 요소의 컨테이닝 블록(위치의 기준점이 되는 조상 요소) 모서리로부터의 거리를 지정합니다. 요소가 바깥 여백을 가진다면 거리에 더합니다. 절대 위치 지정 요소는 새로운 블록 서식 맥락을 생성합니다.
    • +
  • 끈끈한 위치 지정 요소는 position의 계산값이 sticky인 요소입니다. 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값({{cssxref("top")}} 등으로 지정)을 넘으면 마치 fixed처럼 화면에 고정합니다. 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됩니다.
    • +
+ +

대부분의 경우, {{cssxref("height")}}와 {{cssxref("width")}}가 auto로 지정된 절대 위치 지정 요소는 자신의 콘텐츠에 맞춰 크기가 바뀝니다. 반면 비대체 절대 위치 지정 요소는 {{Cssxref("top")}}과 {{Cssxref("bottom")}}을 지정하고 {{Cssxref("height")}}는 지정하지 않으면 (즉, auto로 두면) 사용 가능한 수직 공간을 가득 채웁니다. 마찬가지로 {{Cssxref("left")}}와 {{Cssxref("right")}}을 지정하고, {{Cssxref("width")}}는 auto로 두면 사용 가능한 수평 공간을 가득 채웁니다.

+ +

위에서 설명한 경우(공간을 꽉 채우는 경우)가 아니라면 다음 규칙을 따릅니다.

+ +
    +
  • top과 bottom을 지정한 경우(auto가 아닌 경우), top이 우선 적용됩니다.
    • +
  • left와 right를 지정한 경우, {{Cssxref("direction")}}이 ltr(영어, 한국어 등)이면 left를 우선 적용하고, {{Cssxref("direction")}}이 rtl(페르시아어, 아랍어, 히브리어 등)이면 right를 우선 적용합니다.
    • +
+ +

접근성 고려사항

+ +

화면을 확대해서 텍스트가 크게 보이게 했을 때 absolute나 fixed로 배치된 요소가 내용을 가리지 않도록 주의해야 합니다.

+ + + +

성능 및 접근성 문제

+ +

fixed나 sticky를 포함하는 스크롤 요소가 성능 및 접근성 문제를 유발할 수 있습니다. 브라우저는 사용자가 스크롤을 할 때마다 끈끈하거나 고정인 요소를 새로운 위치에 페인트 해야 하는데, 표시해야 되는 내용의 양, 브라우저 및 기기의 성능에 따라 60 fps를 유지하지 못해 일부 민감한 사용자에게는 접근성 문제가, 다른 모두에게는 사용자 경험 악화가 생깁니다. 이 문제의 해결책 중 하나는 {{cssxref("will-change", "will-change: transform")}}을 추가하여 요소를 자신만의 레이어에서 렌더링 하여 페인트 속도를 향상하고, 나아가 성능과 접근성을 높일 수 있습니다.

+ +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

상대 위치 지정

+ +

상대적으로 배치된 요소는 문서 내에서 정상적인(normal) 위치에서 주어진 오프셋만큼 떨어지지만, 다른 요소에는 영향을 주지 않습니다. 아래 예제에서는 다른 요소들이 "Two"가 원래 위치에 있는 것처럼 배치되는 것을 확인할 수 있습니다.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+
+ +

{{ EmbedLiveSample('상대_위치_지정', '600px', '200px') }}

+ +

절대 위치 지정

+ +

상대적으로 배치된 요소가 일반적인 문서 흐름에 따르는 것과 달리, 절대적으로 배치된 요소는 흐름에서 제거됩니다. 따라서 다른 요소는 그 요소가 존재하지 않는 것처럼 배치됩니다. 절대적으로 배치된 요소는 가장 가까운 위치 지정 조상(즉, static이 아닌 가장 가까운 조상)을 기준으로 배치됩니다. 그런 요소가 존재하지 않는다면, 초기 컨테이닝 블록이 기준이 됩니다.

+ +

HTML

+ +
<div class="box" id="one">One</div>
+<div class="box" id="two">Two</div>
+<div class="box" id="three">Three</div>
+<div class="box" id="four">Four</div>
+ +

CSS

+ +
.box {
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#two {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+  background: blue;
+}
+ +

{{ EmbedLiveSample('절대_위치_지정', '800px', '200px') }}

+ +

고정 위치 지정

+ +

고정 위치 지정은 절대 위치 지정과 비슷하지만, fixed는 요소의 컨테이닝 블록이 뷰포트의 초기 컨테이닝 블록이라는 점에서 다릅니다(transform, perspective, filter 속성이 none이 아닌 조상이 있다면 그 조상이 컨테이닝 블록이 됩니다. CSS Transforms Spec 참조). 따라서 스크롤에 관계 없이 화면의 특정 지점에 고정되는, "떠다니는"(floating) 요소를 생성할 수 있습니다. 아래 예제에서, "One" 상자는 페이지 위에서 80픽셀, 왼쪽에서 10픽셀 떨어진 위치에 고정됩니다. 스크롤을 하더라도, 뷰포트를 기준으로 같은 위치에 고정된 채로 유지됩니다.

+ +

HTML

+ +
<div class="outer">
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor eget pulvinar lobortis.
+    Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam ac dolor augue.
+    Pellentesque mi mi, laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
+    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut arcu aliquam purus viverra dictum vel sit amet mi.
+    Duis nisl mauris, aliquam sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem aliquam, congue porttitor tortor.
+    Sed tempor nisl a lorem consequat, id maximus erat aliquet. Sed sagittis porta libero sed condimentum.
+    Aliquam finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id ultrices ultrices, tempor et tellus.
+  </p>
+  <div class="box" id="one">One</div>
+</div>
+
+ +

CSS

+ +
.box {
+  width: 100px;
+  height: 100px;
+  background: red;
+  color: white;
+}
+
+#one {
+  position: fixed;
+  top: 80px;
+  left: 10px;
+  background: blue;
+}
+
+.outer {
+  width: 500px;
+  height: 300px;
+  overflow: scroll;
+  padding-left: 150px;
+}
+
+ +

{{ EmbedLiveSample('고정_위치_지정', '800px', '300px') }}

+ +

끈끈한 위치 지정

+ +

끈끈한 위치 지정은 상대와 고정 위치 지정을 합친 것으로 생각할 수 있습니다. 끈끈하게 배치된 요소는 상대적으로 배치된 요소로 취급하지만, 주어진 경계선을 지나면 고정 위치를 갖게 됩니다. 예를 들어,

+ +
#one { position: sticky; top: 10px; }
+ +

이때 id가 one인 요소는 그 위치가 위에서 10픽셀 떨어진 위치까지는 상대적으로 배치되지만, 그 경계를 넘어가면 위에서 10픽셀 떨어진 위치에 고정됩니다.

+ +

끈끈한 위치 지정은 흔히 사전순 리스트의 레이블에 사용할 수 있습니다. 예를 들어, "ㄴ" 레이블은 "ㄱ"으로 시작하는 목록이 화면 밖으로 나갈 때까지는 그 바로 밑에 표시되고, 그 다음에는 "ㄱ"을 따라 화면 밖으로 나가는 대신 화면 위에 고정시킬 수 있습니다. 그러다가 "ㄴ" 목록이 화면 바깥으로 나가면 그 자리에 "ㄷ" 레이블을 고정시킬 수 있습니다.

+ +

끈끈한 위치 지정이 의도한 대로 동작하게 하려면 top, right, bottom, left 중 적어도 하나의 임계값을 설정해야 합니다. 임계값을 설정하지 않으면 상대 위치 지정과 다를 바가 없습니다.

+ +

HTML

+ +
<dl>
+  <div>
+    <dt>A</dt>
+    <dd>Andrew W.K.</dd>
+    <dd>Apparat</dd>
+    <dd>Arcade Fire</dd>
+    <dd>At The Drive-In</dd>
+    <dd>Aziz Ansari</dd>
+  </div>
+  <div>
+    <dt>C</dt>
+    <dd>Chromeo</dd>
+    <dd>Common</dd>
+    <dd>Converge</dd>
+    <dd>Crystal Castles</dd>
+    <dd>Cursive</dd>
+  </div>
+  <div>
+    <dt>E</dt>
+    <dd>Explosions In The Sky</dd>
+  </div>
+  <div>
+    <dt>T</dt>
+    <dd>Ted Leo &amp; The Pharmacists</dd>
+    <dd>T-Pain</dd>
+    <dd>Thrice</dd>
+    <dd>TV On The Radio</dd>
+    <dd>Two Gallants</dd>
+  </div>
+</dl>
+
+ +

CSS

+ +
* {
+  box-sizing: border-box;
+}
+
+dl > div {
+  background: #FFF;
+  padding: 24px 0 0 0;
+}
+
+dt {
+  background: #B8C1C8;
+  border-bottom: 1px solid #989EA4;
+  border-top: 1px solid #717D85;
+  color: #FFF;
+  font: bold 18px/21px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 2px 0 0 12px;
+  position: -webkit-sticky;
+  position: sticky;
+  top: -1px;
+}
+
+dd {
+  font: bold 20px/45px Helvetica, Arial, sans-serif;
+  margin: 0;
+  padding: 0 0 0 12px;
+  white-space: nowrap;
+}
+
+dd + dd {
+  border-top: 1px solid #CCC;
+}
+
+ +

{{ EmbedLiveSample('끈끈한_위치_지정', '500px', '300px') }}

+ +
    +
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
명세상태비고
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS3 Positioning','#position-property','position')}}{{Spec2('CSS3 Positioning')}}sticky 속성 값 추가
+ +

브라우저 호환성

+ +
{{Compat("css.properties.position")}}
diff --git a/files/ko/web/css/position_value/index.html b/files/ko/web/css/position_value/index.html new file mode 100644 index 0000000000..7e03f38e2f --- /dev/null +++ b/files/ko/web/css/position_value/index.html @@ -0,0 +1,135 @@ +--- +title: +slug: Web/CSS/position_value +tags: + - CSS + - CSS Data Type + - Layout + - Reference + - Web +translation_of: Web/CSS/position_value +--- +
{{CSSRef}}
+ +

CSS <position> (또는 <bg-position>) 자료형은 요소 박스에 대한 상대 좌표를 나타내는 2차원 좌표입니다. {{cssxref("background-position")}}, {{cssxref("offset-anchor")}} 속성에서 사용합니다.

+ +
+

참고: <position> 값이 설명하는 최종 위치가 요소 박스 내에 위치해야 할 필요는 없습니다.

+
+ +

구문

+ +

<position> 자료형은 하나 혹은 두 개의 키워드와 함께 선택적인 오프셋을 사용해 지정합니다.

+ +

키워드에는 center, top, right, bottom, left가 있으며, 각각 요소 박스의 해당하는 방향 모서리 또는 마주보는 두 모서리의 가운데 지점을 의미합니다. 맥락에 따라, center는 좌우 모서리의 중간점일 수도 있고, 상하 모서리의 중간점일 수도 있습니다.

+ +

오프셋은 상대적인 {{cssxref("<percentage>")}} 값 또는 절대적인 {{cssxref("<length>")}} 값으로 지정할 수 있습니다. 양수는 오른쪽과 아래쪽 중 적합한 방향으로 이동하며, 음수는 그 반대입니다.

+ +

하나의 오프셋 값만 지정할 경우 x 좌표를 정의하는 것이며, 다른 축의 값은 기본값으로 center를 사용합니다.

+ +
/* 1-value syntax */
+keyword                  /* Either the horizontal or vertical position; the other axis defaults to center */
+value                    /* The position on the x-axis; the y-axis defaults to 50% */
+
+/* 2-value syntax */
+keyword keyword          /* A keyword for each direction (the order is irrelevant) */
+keyword value            /* A keyword for horizontal position, value for vertical position */
+value keyword            /* A value for horizontal position, keyword for vertical position */
+value value              /* A value for each direction (horizontal then vertical) */
+
+/* 4-value syntax */
+keyword value keyword value /* Each value is an offset from the keyword that preceeds it */
+
+ +

형식 구문

+ +
[
+ [ left | center | right ] || [ top | center | bottom ]
+|
+ [ left | center | right | <length> | <percentage> ]
+ [ top | center | bottom | <length> | <percentage> ]?
+|
+ [ [ left | right ] [ <length> | <percentage> ] ] &&
+ [ [ top | bottom ] [ <length> | <percentage> ] ]
+]
+
+ +
+

참고: {{cssxref("background-position")}} 속성은 세 값 구문도 허용하나, <position>을 사용하는 다른 속성에서는 허용하지 않습니다.

+
+ +

보간

+ +

애니메이션에서 점의 가로 값과 세로 값은 각각 따로 보간됩니다. 그러나 두 좌표 모두에 대한 보간 속도는 하나의 타이밍 함수가 결정하므로, 점은 직선을 따라 이동하게 됩니다.

+ +

예제

+ +

유효한 위치

+ +
center
+left
+center top
+
+right 8.5%
+bottom 12vmin right -6px
+
+10% 20%
+8rem 14px
+
+ +

유효하지 않은 위치

+ +
left right
+bottom top
+10px 15px 20px 15px
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Relists links to both definitions: if {{SpecName('CSS3 Backgrounds')}} is supported, its definition of <position> must also be used.
{{SpecName('CSS3 Backgrounds', '#typedef-bg-position', '<bg-position>')}}{{Spec2('CSS3 Backgrounds')}}Defines <position> explicitly and extends it to support offsets from any edge.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Allows combination of a keyword with a {{cssxref("<length>")}} or {{cssxref("<percentage>")}} value.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}Defines <position> anonymously as the value of {{cssxref("background-position")}}.
+ +

브라우저 호환성

+ + + +

{{Compat("css.types.position")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/pseudo-classes/index.html b/files/ko/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..6870bff41e --- /dev/null +++ b/files/ko/web/css/pseudo-classes/index.html @@ -0,0 +1,166 @@ +--- +title: 의사 클래스 +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Overview + - Pseudo-class + - Reference + - Selectors +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

CSS 의사 클래스(가상 클래스)는 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있습니다. 예를 들어 {{cssxref(":hover")}}를 사용하면 포인터를 올렸을 때에만 글씨 색을 바꾸고 싶을 때 사용할 수 있습니다.

+ +
/* Any button over which the user's pointer is hovering */
+button:hover {
+  color: blue;
+}
+ +

의사 클래스를 사용하면 문서 트리 콘텐츠와 관련된 경우 뿐만 아니라 탐색기 히스토리({{cssxref(":visited")}} 등), 콘텐츠의 상태(특정 폼 요소에 적용한 {{cssxref(":checked")}} 등), 마우스의 위치(커서가 마우스 위인지 아닌지 알 수 있는 {{cssxref(":hover")}} 등)처럼 외부 인자와 관련된 경우에도 스타일을 적용할 수 있습니다.

+ +
+

참고: 의사 요소는 의사 클래스와 달리 요소의 특정 부분에 스타일을 적용할 때 사용합니다.

+
+ +

구문

+ +
selector:pseudo-class {
+  property: value;
+}
+ +

일반적인 클래스와 같이 여러 개의 의사 클래스를 조합해 복잡한 선택자를 만들 수 있습니다.

+ +

표준 의사 클래스 색인

+ +
+
    +
  • {{CSSxRef(":active")}}
    • +
  • {{CSSxRef(":any-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":blank")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":checked")}}
    • +
  • {{CSSxRef(":current")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":default")}}
    • +
  • {{CSSxRef(":defined")}}
    • +
  • {{CSSxRef(":dir", ":dir()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":disabled")}}
    • +
  • {{CSSxRef(":drop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":empty")}}
    • +
  • {{CSSxRef(":enabled")}}
    • +
  • {{CSSxRef(":first")}}
    • +
  • {{CSSxRef(":first-child")}}
    • +
  • {{CSSxRef(":first-of-type")}}
    • +
  • {{CSSxRef(":fullscreen")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":future")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus")}}
    • +
  • {{CSSxRef(":focus-visible")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":focus-within")}}
    • +
  • {{CSSxRef(":has", ":has()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":host")}}
    • +
  • {{CSSxRef(":host()")}}
    • +
  • {{CSSxRef(":host-context()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":hover")}}
    • +
  • {{CSSxRef(":indeterminate")}}
    • +
  • {{CSSxRef(":in-range")}}
    • +
  • {{CSSxRef(":invalid")}}
    • +
  • {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":lang", ":lang()")}}
    • +
  • {{CSSxRef(":last-child")}}
    • +
  • {{CSSxRef(":last-of-type")}}
    • +
  • {{CSSxRef(":left")}}
    • +
  • {{CSSxRef(":link")}}
    • +
  • {{CSSxRef(":local-link")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":not", ":not()")}}
    • +
  • {{CSSxRef(":nth-child", ":nth-child()")}}
    • +
  • {{CSSxRef(":nth-col", ":nth-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-child", ":nth-last-child()")}}
    • +
  • {{CSSxRef(":nth-last-col", ":nth-last-col()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":nth-last-of-type", ":nth-last-of-type()")}}
    • +
  • {{CSSxRef(":nth-of-type", ":nth-of-type()")}}
    • +
  • {{CSSxRef(":only-child")}}
    • +
  • {{CSSxRef(":only-of-type")}}
    • +
  • {{CSSxRef(":optional")}}
    • +
  • {{CSSxRef(":out-of-range")}}
    • +
  • {{CSSxRef(":past")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":placeholder-shown")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":read-only")}}
    • +
  • {{CSSxRef(":read-write")}}
    • +
  • {{CSSxRef(":required")}}
    • +
  • {{CSSxRef(":right")}}
    • +
  • {{CSSxRef(":root")}}
    • +
  • {{CSSxRef(":scope")}}
    • +
  • {{CSSxRef(":state", ":state()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":target")}}
    • +
  • {{CSSxRef(":target-within")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":user-invalid")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef(":valid")}}
    • +
  • {{CSSxRef(":visited")}}
    • +
  • {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}
    • +
+
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Defined :fullscreen.
{{SpecName("HTML WHATWG", "#pseudo-classes")}}{{Spec2("HTML WHATWG")}}Defines when particular selectors match HTML elements.
{{SpecName("CSS4 Selectors")}}{{Spec2("CSS4 Selectors")}}Defined :any-link, :blank, :local-link, :scope, :drop, :current, :past, :future, :placeholder-shown, :user-invalid, :nth-col(), :nth-last-col(), :is() and :where().
+ Changed :empty to behave like {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.
+ No significant change for other pseudo-classes defined in {{SpecName("CSS3 Selectors")}} and {{SpecName("HTML5 W3C")}} (though semantic meaning not taken over).
{{SpecName("HTML5 W3C")}}{{Spec2("HTML5 W3C")}}Copies the relevant section from the canonical (WHATWG) HTML spec.
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}}Defined :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only and :read-write, but without the associated semantic meaning.
{{SpecName("CSS3 Selectors")}}{{Spec2("CSS3 Selectors")}}Defined :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty and :not().
+ Defined the syntax of :enabled, :disabled, :checked, and :indeterminate, but without the associated semantic meaning.
+ No significant change for pseudo-classes defined in {{SpecName('CSS2.1')}}.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}Defined :lang(), :first-child, :hover, and :focus.
+ No significant change for pseudo-classes defined in {{SpecName('CSS1')}}.
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined :link, :visited and :active, but without the associated semantic meaning.
+ +

같이 보기

+ + diff --git a/files/ko/web/css/pseudo-elements/index.html b/files/ko/web/css/pseudo-elements/index.html new file mode 100644 index 0000000000..b85c0a2904 --- /dev/null +++ b/files/ko/web/css/pseudo-elements/index.html @@ -0,0 +1,124 @@ +--- +title: 의사 요소 +slug: Web/CSS/Pseudo-elements +tags: + - CSS + - Overview + - Pseudo-element + - Reference + - Selectors +translation_of: Web/CSS/Pseudo-elements +--- +
{{CSSRef}}
+ +

CSS 의사 요소(가상 요소)는 선택자에 추가하는 키워드로, 선택한 요소의 일부분에만 스타일을 입힐 수 있습니다. 예를 들어 {{cssxref("::first-line")}}을 사용하면 문단 첫 줄의 글씨체만 바꿀 수 있습니다.

+ +
/* The first line of every <p> element. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+ +
+

참고: 의사 클래스는 의사 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용합니다.

+
+ +

구문

+ +
selector::pseudo-element {
+  property: value;
+}
+ +

하나의 선택자에 하나의 의사 요소만 사용할 수 있습니다. 반드시 단순 선택자 뒤에 위치해야 합니다.

+ +
+

참고: 규칙을 따라 단일 콜론(:) 대신 이중 콜론(::)을 사용하여 의사 클래스와 의사 요소를 구별해야 합니다. 그러나 과거 W3C 명세에선 이런 구별을 두지 않았으므로 대부분의 브라우저는 기존 의사 요소에 대해 두 구문 모두 지원합니다.

+
+ +

표준 의사 요소 색인

+ +
+
    +
  • {{CSSxRef("::after", "::after (:after)")}}
    • +
  • {{CSSxRef("::backdrop")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::before", "::before (:before)")}}
    • +
  • {{CSSxRef("::cue")}}
    • +
  • {{CSSxRef("::cue-region")}}
    • +
  • {{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}
    • +
  • {{CSSxRef("::first-line", "::first-line (:first-line)")}}
    • +
  • {{CSSxRef("::grammar-error")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::marker")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::part", "::part()")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::placeholder")}} {{Experimental_Inline}}
    • +
  • {{CSSxRef("::selection")}}
    • +
  • {{CSSxRef("::slotted", "::slotted()")}}
    • +
  • {{CSSxRef("::spelling-error")}} {{Experimental_Inline}}
    • +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
브라우저최하위 버전지원
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Defined pseudo-classes and pseudo-elements.
+ +

같이 보기

+ + diff --git a/files/ko/web/css/reference/index.html b/files/ko/web/css/reference/index.html new file mode 100644 index 0000000000..21ee49d424 --- /dev/null +++ b/files/ko/web/css/reference/index.html @@ -0,0 +1,190 @@ +--- +title: CSS 참고서 +slug: Web/CSS/Reference +tags: + - CSS + - Guide + - Overview + - Reference + - 'l10n:priority' +translation_of: Web/CSS/Reference +--- +
{{CSSRef}}
+ +

CSS 참고서를 이용해 알파벳 순서로 정리한 모든 표준 CSS 속성, 의사 클래스, 의사 요소, CSS 자료형과 @규칙을 찾아보세요. 또한 유형별로 정리한 CSS 선택자와 주요 CSS 개념도 찾아볼 수 있습니다. 추가로 간단한 DOM-CSS / CSSOM 참조도 들어 있습니다.

+ +

기본 규칙 구문

+ +

스타일 규칙 구문

+ +
style-rule ::=
+    selectors-list {
+      properties-list
+    }
+
+ +

... where :

+ +
selectors-list ::=
+    selector[:pseudo-class] [::pseudo-element]
+    [, selectors-list]
+
+properties-list ::=
+    [property : value] [; properties-list]
+
+ +

아래 선택자, 의사 클래스, 의사 요소 목록을 참고하세요. 각 value의 구문은 지정한 property가 정의하는 자료형에 따라 다릅니다.

+ +

스타일 규칙 예제

+ +
strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

CSS 선택자 구문을 설명하는 입문자 단계의 소개 부분은 이 자습서에서 찾아볼 수 있습니다. 규칙 정의에서 구문 오류가 하나라도 발생하면 규칙 전체가 유효하지 않다는 점을 명심하세요. 유효하지 않은 규칙은 브라우저가 무시합니다. CSS 규칙 정의는 모두 (ASCII) 텍스트에 기반하지만, DOM-CSS / CSSOM (규칙 관리 시스템)은 객체에 기반합니다.

+ +

@규칙 구문

+ +

@규칙 체계는 매우 다양하므로 필요한 구체적인 구문을 찾으려면 @규칙을 봐주세요.

+ +

키워드 색인

+ +
+

참고: 이 색인에 있는 속성 이름에는 CSS 표준 이름과 다른 JavaScript 이름이 들어가지 않습니다.

+
+ +
{{CSS_Ref}}
+ +

선택자

+ +

다음은 선택자 목록입니다. 선택자를 사용하면 DOM 요소의 다양한 기능에 기반한 조건을 통해 스타일을 입힐 수 있습니다.

+ +

기본 선택자

+ +

기본 선택자는 선택자의 기초를 이루며, 조합을 통해 더 복잡한 선택자를 생성합니다.

+ + + +

그룹 선택자

+ +
+
선택자 목록 A, B
+
A와 B 요소를 모두 선택합니다. 일치하는 여러가지 요소를 선택할 때 사용합니다.
+
+ +

결합자

+ +

결합자는 "A는 B의 자식", "A는 B와 인접 요소"처럼, 두 개 이상의 선택자끼리 관계를 형성합니다.

+ +
+
인접 형제 결합자 A + B
+
요소 A와 B가 같은 부모를 가지며 B가 A를 바로 뒤따라야 하도록 지정합니다.
+
일반 형제 결합자 A ~ B
+
요소 A와 B가 같은 부모를 가지며 B가 A를 뒤따라야 하도록 지정합니다. 그러나 B가 A의 바로 옆에 위치해야 할 필요는 없습니다.
+
자식 결합자 A > B
+
요소 B가 A의 바로 밑에 위치해야 하도록 지정합니다.
+
자손 결합자 A B
+
요소 B가 A의 밑에 위치해야 하도록 지정합니다. 그러나 B가 A의 바로 아래에 있을 필요는 없습니다.
+
열 결합자 A || B {{experimental_inline}}
+
요소 B가 표의 열 A 안에 위치해야 하도록 지정합니다. 여러 열에 걸친 요소는, 각각의 열 모두에 대해 안쪽에 위치한 것으로 간주합니다.
+
+ +

의사 클래스/요소

+ +
+
의사 클래스 :
+
요소의 특정 상태를 선택합니다.
+
의사 요소 ::
+
HTML이 포함하지 않은 객체를 나타냅니다.
+
+ +
+

같이 보기: Selectors Level 4 명세의 선택자 목록.

+
+ +

개념

+ +

구문과 의미

+ + + +

값

+ + + +

레이아웃

+ + + +

DOM-CSS / CSSOM

+ +

주요 객체 유형

+ +
    +
  • {{DOMxRef("DocumentOrShadowRoot.styleSheets")}}
    • +
  • {{DOMxRef("StyleSheetList", "styleSheets", "", 1)}}[i].{{DOMxRef("CSSRuleList", "cssRules", "", 1)}}
    • +
  • cssRules[i].{{DOMxRef("CSSRule.cssText", "cssText", "", 1)}} (selector & style)
    • +
  • cssRules[i].{{DOMxRef("CSSStyleRule.selectorText", "selectorText", "", 1)}}
    • +
  • {{DOMxRef("HTMLElement.style")}}
    • +
  • HTMLElement.style.{{DOMxRef("CSSStyleDeclaration.cssText", "cssText", "", 1)}} (just style)
    • +
  • {{DOMxRef("Element.className")}}
    • +
  • {{DOMxRef("Element.classList")}}
    • +
+ +

중요 메서드

+ +
    +
  • {{DOMxRef("CSSStyleSheet.insertRule()")}}
    • +
  • {{DOMxRef("CSSStyleSheet.deleteRule()")}}
    • +
+ +

같이 보기

+ + + +

외부 링크

+ + diff --git a/files/ko/web/css/reference/property_template/index.html b/files/ko/web/css/reference/property_template/index.html new file mode 100644 index 0000000000..9df3680b49 --- /dev/null +++ b/files/ko/web/css/reference/property_template/index.html @@ -0,0 +1,131 @@ +--- +title: Property Template +slug: Web/CSS/Reference/Property_Template +tags: + - CSS + - MDN Meta +translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template +--- +

{{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/replaced_element/index.html b/files/ko/web/css/replaced_element/index.html new file mode 100644 index 0000000000..8914554a01 --- /dev/null +++ b/files/ko/web/css/replaced_element/index.html @@ -0,0 +1,65 @@ +--- +title: 대체 요소 +slug: Web/CSS/Replaced_element +tags: + - CSS + - Guide + - Layout + - Reference +translation_of: Web/CSS/Replaced_element +--- +
{{CSSRef}}
+ +

CSS의 대체 요소(replaced element)란 자신의 표현 결과가 CSS의 범위를 벗어나는 요소로서, CSS 서식 모델과는 분리된 외부 객체인 요소입니다.

+ +

간단히 말해서, 대체 요소는 자신의 콘텐츠가 현재 문서 스타일의 영향을 받지 않는 요소라고 할 수 있습니다. CSS는 대체 요소의 위치에 영향을 줄 수 있지만 콘텐츠에는 미치지 못합니다. {{htmlelement("iframe")}} 등 일부 대체 요소는 자신만의 스타일 시트를 가질 수도 있지만, 부모 문서의 스타일을 상속하지는 않습니다.

+ +

CSS가 대체 요소에 영향을 줄 수 있는 다른 유일한 방법은, 일련의 속성을 통해 요소 박스에서 콘텐츠의 위치를 제어하는 것입니다. {{anch("콘텐츠 박스 내부의 객체 위치 제어")}} 항목을 참고하세요.

+ +

대체 요소

+ +

전형적인 대체 요소는 다음과 같습니다.

+ +
    +
  • {{HTMLElement("iframe")}}
    • +
  • {{HTMLElement("video")}}
    • +
  • {{HTMLElement("embed")}}
    • +
  • {{HTMLElement("img")}}
    • +
+ +

일부 요소는 특정한 경우에만 대체 요소로 취급합니다.

+ +
    +
  • {{HTMLElement("option")}}
    • +
  • {{HTMLElement("audio")}}
    • +
  • {{HTMLElement("canvas")}}
    • +
  • {{HTMLElement("object")}}
    • +
+ +

HTML 명세에 따르면 {{htmlelement("input")}} 또한 대체될 수 있습니다. <input> 유형이 "image"인 경우 {{htmlelement("img")}}와 유사한 대체 요소이기 때문입니다. 그러나 다른 유형의 <input>을 포함한 나머지 양식 컨트롤 요소는 비대체 요소라고 명시하고 있습니다. (명세는 양식 요소의 플랫폼별 기본 렌더링을 "위젯"(Widget)이라는 용어로 설명하고 있습니다.)

+ +

CSS {{cssxref("content")}} 속성을 사용해 추가한 객체도 대체 요소로, HTML 마크업에는 존재하지 않기 때문에 "익명" 대체 요소라고 합니다.

+ +

대체 요소와 CSS

+ +

CSS는 바깥 여백이나 일부 auto 값 계산 등 특정 상황에서 대체 요소를 특별히 취급합니다.

+ +

일부 대체 요소는 고유 크기 또는 정의된 기준선을 가질 수 있으며, {{cssxref("vertical-align")}} 등의 CSS 속성이 사용할 수 있습니다. 오직 대체 요소만이 고유 크기를 가질 수 있습니다.

+ +

콘텐츠 박스 내부의 객체 위치 제어

+ +

특정 CSS 속성을 사용하면 대체 요소 내의 객체가 요소의 박스 영역 어디에 배치되어야 하는지 지정할 수 있으며, {{SpecName("CSS3 Images")}}와 {{SpecName("CSS4 Images")}} 명세가 정의하고 있습니다.

+ +
+
{{cssxref("object-fit")}}
+
대체 요소의 콘텐츠 객체를 대체 요소의 박스에 어떻게 맞출지 지정합니다.
+
{{cssxref("object-position")}}
+
대체 요소의 콘텐츠 객체를 정렬하는 방법을 지정합니다.
+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/resolved_value/index.html b/files/ko/web/css/resolved_value/index.html new file mode 100644 index 0000000000..56f04e6495 --- /dev/null +++ b/files/ko/web/css/resolved_value/index.html @@ -0,0 +1,39 @@ +--- +title: 결정값 +slug: Web/CSS/resolved_value +tags: + - CSS + - Reference +translation_of: Web/CSS/resolved_value +--- +
{{cssref}}
+ +

CSS 속성의 결정값은 {{domxref("Window.getComputedStyle", "getComputedStyle()")}}이 반환하는 값입니다.

+ +

속성 대부분은 결정값이 계산값이지만, {{cssxref("width")}}와 {{cssxref("height")}}를 포함한 기존 속성은 사용값입니다. 속성 별 자세한 사항은 아래의 명세를 참고하세요.

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSSOM", "#resolved-values", "resolved value")}}{{Spec2("CSSOM")}}초기 정의
+ +

같이 보기

+ +
    +
  • {{domxref("window.getComputedStyle")}}
    • +
  • {{CSS_key_concepts}}
    • +
diff --git a/files/ko/web/css/revert/index.html b/files/ko/web/css/revert/index.html new file mode 100644 index 0000000000..9a9a1ce6f7 --- /dev/null +++ b/files/ko/web/css/revert/index.html @@ -0,0 +1,137 @@ +--- +title: revert +slug: Web/CSS/revert +tags: + - CSS + - CSS 속성 + - Cascade + - Style + - 'all:revert' + - revert + - revert style 속성 + - revert 속성 + - 스타일 +translation_of: Web/CSS/revert +--- +
{{CSSRef}}
+ +

revert 는 현재 엘리먼트에 선언 된 캐스캐이딩된 속성으로부터  {{Glossary("style origin")}} 으로 되돌립니다. 부모 속성 또는 user agent에 따라 default로 선언 된 속성으로 되돌리는 것입니다. 이 속성은 css 단축속성{{cssxref("all")}}을 포함한 어떤 프로퍼티에도 적용할 수 있습니다.

+ +
    +
  • 만약 그 사이트만의 css 속성이 지정되어있다면 revert 속성은 유저가 지정한 커스텀 스타일로 롤백합니다.  만약 하나만 존재한다면 user agent의 default 스타일로 돌아가는 것입니다.
    • +
  • 만약 사용자의 커스텀 스타일을 사용하거나 사용자에 의해서 스타일이 적용되어 있다면, revert 는 user agent의 default 스타일로 되돌립니다.
    • +
  • 만약 user agent default 스타일만 지정되어있다면, {{cssxref("unset")}}과 마찬가지의 의미입니다.
    • +
+ +

revert 키워드는 많은 경우에서 unset 과 같은 성질을 가집니다. 한가지 차이점은 user agent에 의한 스타일이냐 유저가 지정한 스타일이냐의 차이입니다.

+ +

Revert 는 자식 요소까지 변경하지는 않습니다. (하지만 자식 요소에 특별히 rule이 지정되어 있지 않다면 적용됩니다.). 그래서 만약에 모든 섹션에  color: green 속성을 지정하고  all: revert 를 사용하면 모든 섹션의 컬러값은 black으로 돌아갈 것입니다. 하지만 만약, 당신이 section 내의 모든 p에 red를 지정했다면 그것들은 red로 유지될 것입니다.

+ +
+

Revert는 단순히 값입니다. 그러므로 revert  또한 다른 specificity값으로 덮어 쓸 수 있습니다.

+
+ +
+

revert 는 {{cssxref("initial")}} 키워드와는 다른데,  initial value 는 프로퍼티 단위의 css 특성화입니다. user-agent의 스타일 시트도 default value로 되돌립니다..

+ +

예를 들어, {{cssxref("display")}} 속성에 대한 initial value 는 inline 입니다. 반면에  {{HTMLElement("div")}} 에 대한 {{cssxref("display")}}  user agent 속성은 block 이고,  {{HTMLElement("table")}} 에 대한 속성은  table 입니다.

+
+ +

예시

+ +

Revert vs unset

+ +

비록 revert 와 unset 은 비슷하지만 몇몇 엘리먼트와 몇몇 속성에서는 다릅니다.

+ +

그래서 아래 예시를 보면, 우리는 font-weight 를 커스텀으로 글로벌 스타일로 지정하였습니다. 그러나 revert와 unset을 시도해보면 다른 결과를 볼 수 있습니다. Unset text를 default로 설정된 normal로 유지합니다. Revert는 user-agent 상에 font-weight인 bold로 돌아갈 것입니다.

+ +
h3 {
+  font-weight: normal;
+  color: blue;
+}
+ +
<h3 style="font-weight: unset; color: unset;">This will still have font-weight: normal, but color: black</h3>
+<p>Just some text</p>
+<h3 style="font-weight: revert; color: revert;">This should have its original font-weight (bold) and color: black</h3>
+<p>Just some text</p>
+ +

{{EmbedLiveSample('Revert_vs_unset')}}

+ +

Revert all

+ +

모든 요소를 revert 하는 것은 당신이 많은 캐스캐이딩에 따른 수정이 있었을 때 default로 돌아가기에 매우 유용합니다. 그래서 font-weight를 리버트 하고 color를 리버트하는 것을 각각 하기보다는 한꺼번에 돌릴 수 있습니다.

+ +
h3 {
+  font-weight: normal;
+  color: blue;
+  border-bottom: 1px solid grey;
+}
+ +
<h3>This will have custom styles</h3>
+<p>Just some text</p>
+<h3 style="all: revert">This should be reverted to browser/user defaults</h3>
+<p>Just some text</p>
+ +

{{EmbedLiveSample('Revert_all')}}

+ +

부모요소에서의 Revert 

+ +

효율적으로 revert 하는 것은 당신이 선택한 속성에 대해서만 해당 속성을 제거하는 것입니다. 우리는 paragraph에 한해서는 red 속성을 지정하고 section에는 darkgreen 을 따로 각각 지정할 수 있습니다.

+ +
section { color: darkgreen }
+p { color: red }
+section.with-revert { color: revert }
+
+ +
<section>
+  <h3>따로 지정되지 않은 h3는 다크 그린</h3>
+  <p>paragraph의 텍스트는 빨강</p>
+  섹션 안의 요소니까 다크 그린.
+</section>
+<section class="with-revert">
+  <h3>revert로 따로 지정되어있지 않았던 h3는 검정</h3>
+  <p>특성화되어있는 paragraph는 그대로 빨강</p>
+  섹션 안의 요소가 revert 되면서 검정
+</section>
+ +

section 요소가 돌아갔음에도 paragraph는 여전히 빨강인 것에 주목하세요. 

+ +

{{EmbedLiveSample('Revert_on_a_parent')}}

+ +

특성

+ + + + + + + + + + + + + + + + +
특성상태비고
{{SpecName('CSS4 Cascade', '#default', 'revert')}}{{Spec2('CSS4 Cascade')}}Initial definition.
+ +

브라우저 호환성

+ +
+
+ + +

{{Compat("css.types.global_keywords.revert")}}

+
+
+ +

요약

+ +
    +
  • initial value를 지정할 때는 {{cssxref("initial")}} 를 사용하세요 .
    • +
  • 초기 속성을 없애거나, 부모 요소에 대한 상속 된 속성을 지정할 때는  {{cssxref("unset")}} 를 사용하세요.
    • +
  • 부모 속성을 지정할 때는 {{cssxref("inherit")}} 를 사용하세요.
    • +
  • {{cssxref("all")}} 속성은 unset, initial, revert, inherit 속성을 한꺼번에 지정할 것입니다.
    • +
diff --git a/files/ko/web/css/selector_list/index.html b/files/ko/web/css/selector_list/index.html new file mode 100644 index 0000000000..6d45de9430 --- /dev/null +++ b/files/ko/web/css/selector_list/index.html @@ -0,0 +1,101 @@ +--- +title: 선택자 목록 +slug: Web/CSS/Selector_list +tags: + - CSS + - Reference + - Selectors + - 선택자 +translation_of: Web/CSS/Selector_list +--- +
{{CSSRef}}
+ +

CSS 선택자 목록(,)은 일치하는 모든 요소를 선택합니다.

+ +
/* 모든 span과 div 요소 선택 */
+span,
+div {
+  border: red 2px solid;
+}
+ +

다수의 선택자를 쉼표 구분 목록에 넣어 스타일 시트 크기를 줄일 수 있습니다.

+ +

구문

+ +
element, element, element { style properties }
+ +

예제

+ +

한 줄 묶기

+ +

쉼표로 구분한 목록을 한 줄에 배치할 수 있습니다.

+ +
h1, h2, h3, h4, h5, h6 { font-family: helvetica; }
+
+ +

여러 줄 묶기

+ +

쉼표로 구분한 목록을 여러 줄에 배치할 수도 있습니다.

+ +
#main,
+.content,
+article {
+  font-size: 1.1em;
+}
+
+ +

선택자 목록 무효화

+ +

선택자 목록의 단점은, 다음의 두 경우가 서로 같지 않다는 점입니다.

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
h1, h2:maybe-unsupported, h3 { font-family: sans-serif }
+ +

왜냐하면 목록 내의 하나의 선택자라도 브라우저가 지원하지 않으면 전체 목록을 무효화하기 때문입니다.

+ +

대응 방법은 {{CSSxRef(":is", ":is()")}} 선택자를 사용하는 것을 통해, 유효하지 않은 선택자를 무시하는 것입니다. 그러나 :is()가 명시도를 계산하는 방법으로 인해, 모든 선택자가 동일한 명시도를 갖게 되는 부작용이 있습니다.

+ +
h1 { font-family: sans-serif }
+h2:maybe-unsupported { font-family: sans-serif }
+h3 { font-family: sans-serif }
+ +
:is(h1, h2:maybe-unsupported, h3) { font-family: sans-serif }
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}{{Spec2("CSS4 Selectors")}}Renamed to "selector list"
{{SpecName('CSS1', '#grouping', 'grouping')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.selectors.list")}}

+ +

같이 보기

+ +
    +
  • 선택자 목록 무효화라는 과거의 실수를 가지지 않는 {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}}, {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} 의사 클래스.
    • +
diff --git a/files/ko/web/css/shorthand_properties/index.html b/files/ko/web/css/shorthand_properties/index.html new file mode 100644 index 0000000000..26075c0be4 --- /dev/null +++ b/files/ko/web/css/shorthand_properties/index.html @@ -0,0 +1,156 @@ +--- +title: 단축 속성 +slug: Web/CSS/Shorthand_properties +tags: + - CSS + - Guide + - Layout + - Reference + - Web + - 단축 속성 +translation_of: Web/CSS/Shorthand_properties +--- +
{{cssref}}
+ +

단축 속성은 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성입니다. 단축 속성을 사용하면 간결한 (그리고 읽기도 좋은) 스타일 시트를 작성해 시간과 체력을 아낄 수 있습니다.

+ +

CSS 명세는 같은 주제를 가진 여러 공통 속성을 묶기 위해 단축 속성을 정의합니다. 가령 CSS {{cssxref("background")}} 속성은 {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, {{cssxref("background-position")}} 값을 정의할 수 있는 단축 속성입니다. 마찬가지로, 가장 흔히 쓰이는 글꼴 관련 속성은 {{cssxref("font")}} 단축 속성으로, 박스 주위의 바깥 여백은 {{cssxref("margin")}} 단축 속성으로 지정할 수 있습니다.

+ +

까다로운 예외상황

+ +

단축 속성은 사용하기 매우 편리하지만, 염두해야 할 예외상황이 몇 가지 있습니다.

+ +
    +
  1. 단축 속성에 지정하지 않은 값은 초깃값이 됩니다. 별거 아닌 듯 보일 수 있지만, 사실 이전에 정의한 값도 초깃값으로 재정의합니다. 따라서, + + 
    background-color: red;
+background: url(images/bg.gif) no-repeat top right;
+
    + 을 적한 요소의 배경 색은 red가 아니라, {{cssxref("background-color")}}의 기본값인 transparent가 됩니다. 두 번째 규칙이 우선하기 때문입니다.
    2. +
  2. 개별 속성값만 상속할 수 있습니다. 빠진 값에는 초깃값을 대입하므로, 어떤 속성의 값을 상속받고자 단축 속성의 해당 부분을 비우는 것은 불가능합니다. inherit 키워드 역시 속성 값으로 온전히 사용해야 하며 값의 일부(red inherit top right처럼)로는 사용할 수 없습니다. 따라서 어떤 속성을 상속하고 싶다면 inherit을 지정한 본디 속성(longhand property)을 추가할 수밖에 없습니다.
    3. +
  3. 단축 속성은 값의 순서를 되도록 제한하지 않습니다. 특히 각 값의 자료형이 서로 다르면 순서가 중요하지 않습니다. 하지만 일부 속성이 동일한 자료형의 값을 가질 수 있을 때는 잘 동작하지 않습니다. 이런 경우의 처리는 여러 범주로 나뉩니다: +
      +
    1. {{cssxref("border-style")}}, {{cssxref("margin")}}, {{cssxref("padding")}}처럼 박스의 모서리와 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 모서리를 가리키는 1~4 값 구문을 사용합니다: + + + + + + + + + + + + + + + + + + + +
      border1.png1개 값 구문: border-width: 1em — 유일한 값이 모든 변을 나타냅니다.
      border2.png2개 값 구문: border-width: 1em 2em — 첫 번째 값은 세로(상하)변을, 두 번째는 가로(좌우)변을 나타냅니다.
      border3.png3개 값 구문: border-width: 1em 2em 3em — 첫 번째 값은 상변을, 두 번째는 가로변, 세 번째는 하변을 나타냅니다.
      border4.png +

      4개 값 구문: border-width: 1em 2em 3em 4em — 네 값이 각각 상, 우, 하, 좌변을 나타냅니다. 상변에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다.

      +
      +
      2. +
    2. 비슷하게, {{cssxref("border-radius")}} 같은 박스의 꼭짓점과 관련된 속성을 다루는 단축 속성은 항상 같은 쪽의 꼭짓점을 가리키는 1-4-값 구문을 사용합니다: + + + + + + + + + + + + + + + + + + + +
      corner1.png1개 값 구문: border-radius: 1em — 유일한 값이 모든 귀를 나타냅니다.
      corner2.png2개 값 구문: border-radius: 1em 2em — 첫 번째 값은 좌상 및 우하귀, 두 번째는 우상 및 좌하귀를 나타냅니다.
      corner3.png3개 값 구문: border-radius: 1em 2em 3em — 첫 번째 값은 좌상귀, 두 번째는 우상 및 좌하귀, 세 번째 값은 우하귀를 나타냅니다.
      corner4.png +

      4개 값 구문: border-radius: 1em 2em 3em 4em — 네 값은 각각 좌상, 우상, 우하 및 좌하귀를 나타냅니다. 좌상귀에서 시작하여 시계 방향으로, 항상 같은 순서를 사용합니다.

      +
      +
      3. +
    +
    4. +
+ +

배경 속성

+ +

아래와 같은 속성을 가지는 배경은...

+ +
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: top right;
+ +

다음과 같이 선언 단 하나를 사용해서 단축할 수 있습니다.

+ +
background: #000 url(images/bg.gif) no-repeat top right;
+ +

(단축 형은 실제로 background-attachment: scroll 및 CSS3의 일부 부가 속성이 더해진 위 본디 속성과 같습니다.)

+ +

{{cssxref("background")}}에서 CSS3 속성을 포함한 더 자세한 정보를 확인할 수 있습니다.

+ +

글꼴 속성

+ +

아래와 같은 속성을 가지는 글꼴은...

+ +
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;
+ +

다음처럼 단축할 수 있습니다.

+ +
font: italic bold .8em/1.2 Arial, sans-serif;
+ +

이 단축 선언은 실제로 font-variant: normal 및 font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3)이 더해진 위 본디 속성과 같습니다.

+ +

테두리 속성

+ +

테두리의 너비, 색상, 스타일을 하나의 선언으로 단축할 수 있습니다. 즉 아래와 같은 CSS를...

+ +
border-width: 1px;
+border-style: solid;
+border-color: #000;
+ +

다음처럼 단축할 수 있습니다.

+ +
border: 1px solid #000;
+ +

여백 속성

+ +

바깥과 안쪽 여백의 단축 속성도 똑같이 동작합니다. 바깥 여백, margin 속성은 한 개, 두 개, 세 개, 네 개의 값을 사용해 지정합니다. 아래 CSS 선언은...

+ +
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;
+ +

다음의 네 값 구문 단축 속성을 사용한 선언과 같습니다. 방향이 시계 방향임을 기억하세요. 각 값은 위, 오른쪽, 아래, 왼쪽을 나타냅니다.

+ +
margin: 10px 5px 10px 5px;
+ +

바깥 여백의 한 개, 두 개, 세 개, 네 개 값 선언 규칙은 다음과 같습니다.

+ +
    +
  • 한 개의 값은 모든 네 면의 여백을 설정합니다.
    • +
  • 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.
    • +
  • 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.
    • +
  • 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)
    • +
+ +

같이 보기

+ +
    +
  • 단축 속성: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • +
diff --git a/files/ko/web/css/specificity/index.html b/files/ko/web/css/specificity/index.html new file mode 100644 index 0000000000..609f319daa --- /dev/null +++ b/files/ko/web/css/specificity/index.html @@ -0,0 +1,331 @@ +--- +title: 명시도 +slug: Web/CSS/Specificity +tags: + - CSS + - Example + - Guide + - Reference + - Web +translation_of: Web/CSS/Specificity +--- +
{{cssref}}
+ +

명시도란 브라우저가 어느 요소와 가장 연관된 속성을 찾는 수단으로, 이렇게 찾은 속성이 해당 요소에 적용됩니다. 명시도는 여러 종류의 CSS 선택자로 구성된 일치 규칙에 기반합니다.

+ +

어떻게 계산되는가?

+ +

명시도는 주어진 CSS 선언에 적용되는 가중치(weight)로, 일치하는 선택자 내 각 선택자 유형의 수에 의해 결정됩니다. 여러 선언이 명시도가 같은 경우, CSS에서 맨 끝에 오는 선언이 요소에 적용됩니다. 명시도는 같은 요소가 여러 선언의 대상이 되는 경우에만 적용합니다. CSS 규칙에 따라 직접 대상 요소는 요소가 부모로부터 상속받는 규칙보다 항상 우선합니다.

+ +
주의: 문서 트리 내 요소의 근접도(proximity, 가까움)는 명시도에 영향이 없습니다.
+ +

선택자 유형

+ +

아래 선택자는 유형별로 명시도를 증가시킵니다.

+ +
    +
  1. 유형 선택자(h1 등) 및 의사 요소(:before 등).
    2. +
  2. 클래스 선택자(.example 등), 속성 선택자([type="radio"] 등), 의사 클래스(:hover 등).
    3. +
  3. ID 선택자(#example 등).
    4. +
+ +

전역 선택자({{cssxref("Universal_selectors", "*")}}), 조합자({{CSSxRef("Adjacent_sibling_combinator", "+")}}, {{CSSxRef("Child_combinator", ">")}}, {{CSSxRef("General_sibling_combinator", "~")}}, ' ', {{CSSxRef("Column_combinator", "||")}}) 및 부정 의사 클래스(:not())는 명시도에 영향을 주지 않습니다. (:not() 내부에 선언한 선택자는 영향을 끼칩니다)

+ +

https://specifishity.com에서 자세한 정보를 확인할 수 있습니다.

+ +

요소에 추가한 인라인 스타일(style="font-weight: bold"처럼)은 항상 외부 스타일시트의 모든 스타일을 덮어쓰므로 가장 높은 명시도를 갖는 것으로 생각할 수 있습니다.

+ +

!important 예외

+ +

!important 규칙이 스타일 선언에 사용된 경우, 이 선언은 다른 선언보다 우선합니다. 엄밀히 말해 !important 자체는 명시도와 아무 관련이 없지만, 명시도에 직접 영향을 미칩니다. 그러나 !important 사용은 나쁜 습관이고 스타일시트 내 자연스러운 종속을 깨뜨려 디버깅을 더 어렵게 만들기에 피해야 합니다. !important 규칙으로 충돌하는 두 선언이 같은 요소에 적용된 경우, 더 큰 명시도를 갖는 선언이 적용됩니다.

+ +

몇몇 경험 법칙들:

+ +
    +
  • 항상 !important를 고려하기도 전에 명시도를 활용할 방법을 찾아보세요.
    • +
  • 외부 CSS(Bootstrap 또는 Normalize.css 같은 외부 라이브러리에서)를 재정의하는 페이지 전용 CSS에만 !important를 쓰세요.
    • +
  • 플러그인/매시업을 작성할 때 !important는 절대 쓰지 마세요.
    • +
  • 사이트 전반 CSS에는 !important를 절대 쓰지 마세요.
    • +
+ +

!important를 사용하는 대신에, 다음을 고려하세요:

+ +
    +
  1. CSS 종속cascading을 더 잘 활용하세요.
    2. +
  2. +

    더 명시된(명확한) 규칙을 쓰세요. 선택 중인 요소 앞에 하나 이상의 요소를 나타냄으로써 규칙은 더 명확해지고 더 높은 우선 순위를 얻습니다:

    + + 
    <div id="test">
+  <span>Text</span>
+</div>
+
    + + 
    div#test span { color: green; }
+div span { color: blue; }
+span { color: red; }
    + +

    순서와 무관하게 첫 번째 규칙이 가장 명확하므로 텍스트는 녹색이 됩니다. (또한, 역시 순서와 무관하게 파란색 규칙이 빨간색 규칙보다 우선합니다.)

    +
    3. +
  3. (2)의 말도 안 되는 특별한 경우로, 더 이상 명시할 요소가 없는 경우 간단한 선택자를 여러 번 써서 명시도를 높일 수 있습니다. + 
    #myId#myId span { color: yellow; }
+.myClass.myClass span { color: orange; }
    +
    4. +
+ +

!important를 사용하는 때

+ +
A) 인라인 스타일을 재정의할 때
+ +

사이트 전체의 시각적 요소를 설정하는 전역 CSS 파일은 각 요소에 직접 정의된 인라인 스타일에 덮어쓰일 수 있습니다. 인라인 스타일과 !important 모두 매우 나쁜 습관으로 취급되지만, 가끔씩은 !important로 인라인 스타일을 덮어써야 할 때가 있습니다.

+ +

이때는 전역 CSS 파일의 몇몇 스타일을 !important로 설정해서 요소에 직접 작성한 인라인 스타일을 덮어쓸 수 있습니다.

+ +
<div class="foo" style="color: red;">나는 무슨 색일까?</div>
+
+ +
.foo[style*="color: red"] {
+  color: firebrick !important;
+}
+
+ +

여러 자바스크립트 프레임워크와 라이브러리에서 인라인 스타일을 추가합니다. 이런 인라인 스타일을 덮어쓸 때 매우 구체적인 선택자와 함께 !important를 사용할 수 있습니다.

+ +
B) 명시도가 높은 규칙을 재정의할 때
+ +
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

어떻게 하면 awesome 문단이 #someElement 안에 있더라도 항상 빨갛게 만들 수 있을까요? !important를 사용하지 않으면 위쪽 규칙의 명시도가 높으므로 아래쪽 규칙보다 우선합니다.

+ +

!important를 덮어쓰는 방법

+ +

A) 태그, ID나 클래스를 추가함으로써 명시도가 더 높은 !important한 CSS 규칙을 만듭니다.

+ +
table td    { height: 50px !important; }
+.myTable td { height: 50px !important; }
+#myTable td { height: 50px !important; }
+
+ +

B) 혹은 기존의 선택자 아래에 똑같은 선택자를 하나 더 만듭니다(명시도가 같으면 나중에 정의된 규칙이 우선하므로).

+ +
td { height: 50px !important; }
+ +

C) 아니면 기존 규칙을 수정해서 아예 !important를 사용하지 않게 만드는 것이 더 좋은 방법입니다.

+ +
[id="someElement"] p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}
+ +

ID를 ID 선택자 대신 속성 선택자로 선택하면 클래스 1개와 같은 명시도가 됩니다. 두 선택자의 명시도가 같아졌으므로 나중에 오는 규칙이 우선합니다.

+ +

아래에서 자세한 정보를 확인하세요:

+ + + +

:is() 및 :not() 예외

+ +

모두 일치 의사 클래스 {{CSSxRef(":is", ":is()")}} {{Experimental_Inline}} 및 부정 의사 클래스 {{CSSxRef(":not", ":not()")}}은 명시도 계산에서 의사 클래스로 취급되지 않습니다. 그러나 이들 의사 클래스 안에 명시된 선택자는 선택자 유형의 수를 결정할 때 일반 선택자로 셉니다.

+ +

다음 CSS 조각과 HTML은...

+ +
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+
+ +
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+
+ +

...다음과 같이 화면에 표시됩니다.

+ +

{{EmbedLiveSample('is_및_not_예외','600','100')}}

+ +

:where() 예외 {{Experimental_Inline}}

+ +

{{SeeCompatTable}}

+ +

명시도 조정 가상 클래스 {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}}의 명시도는 항상 0입니다.

+ +

다음 CSS 조각과 HTML은...

+ +
div:where(.outer) p {
+  color: orange;
+}
+
+div p {
+  color: blueviolet;
+}
+
+ + + + + +
<div class="outer">
+  <p>This is in the outer div.</p>
+  <div class="inner">
+    <p>This text is in the inner div.</p>
+  </div>
+</div>
+
+ +

...다음과 같이 화면에 표시됩니다.

+ +

{{EmbedLiveSample('The_where_exception','600','100')}}

+ +

형태 기반 명시도

+ +

명시도는 선택자의 형태(form)를 기반으로 합니다. 아래에서 선택자 *[id="foo"]는 그 자체로는 ID를 선택하지만 선택자의 명시도를 계산할 때는 속성 선택자로 취급됩니다.

+ +

다음 스타일 선언과 마크업은...

+ +
*#foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+
+ +
<p id="foo">I am a sample text.</p>
+
+ +

...다음과 같이 표시됩니다.

+ +

{{EmbedLiveSample('형태_기반_명시도','600','100')}}

+ +

같은 요소와 일치하지만 ID 선택자는 더 높은 명시도를 갖기 때문입니다.

+ +

트리 근접도 무시

+ +

요소와 주어진 선택자로 참조된 다른 요소와의 근접도(proximity)는 명시도에 영향을 주지 않습니다.

+ +

다음 스타일 선언과 HTML은...

+ +
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+
+ +
<html>
+<body>
+  <h1>Here is a title!</h1>
+</body>
+</html>
+
+ +

...아래와 같이 렌더링됩니다.

+ +

{{EmbedLiveSample('트리_근접도_무시','600','100')}}

+ +

두 선언은 선택자 유형 갯수가 같지만 html h1 선택자가 나중에 선언되었기 때문입니다.

+ +

직접 일치 요소와 상속된 스타일

+ +

특정한 요소와 직접적으로 일치하는 스타일은 상속된 규칙의 명시도와 무관하게 항상 상속된 스타일보다 우선합니다.

+ +

다음 CSS와 HTML은...

+ +
#parent {
+  color: green;
+}
+h1 {
+  color: purple;
+}
+ +
<html>
+<body id="parent">
+  <h1>Here is a title!</h1>
+</body>
+</html>
+ +

...역시 아래와 같이 렌더링됩니다.

+ +

{{EmbedLiveSample('직접_일치_요소와_상속된_스타일','600','100')}}

+ +

h1 선택자는 특정한 요소와 직접 일치하지만 초록색 선택자는 그렇지 않고 부모로부터 상속되기 때문입니다.

+ +

명세

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("CSS4 Selectors", "#specificity-rules", "Calculating a selector's specificity")}}{{Spec2("CSS4 Selectors")}}명시도 조정 선택자 {{CSSxRef(":where", ":where()")}} 추가.
{{SpecName("CSS3 Selectors", "#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS3 Selectors")}}의사 요소 추가.
{{SpecName("CSS2.1", "cascade.html#specificity", "Calculating a selector's specificity")}}{{Spec2("CSS2.1")}}의사 클래스 추가.
{{SpecName("CSS1", "#cascading-order", "Cascading order")}}{{Spec2("CSS1")}}초기 정의.
+
+ +

같이 보기

+ + diff --git a/files/ko/web/css/specified_value/index.html b/files/ko/web/css/specified_value/index.html new file mode 100644 index 0000000000..fd7df79342 --- /dev/null +++ b/files/ko/web/css/specified_value/index.html @@ -0,0 +1,67 @@ +--- +title: 지정값 +slug: Web/CSS/specified_value +tags: + - CSS + - CSS Reference +translation_of: Web/CSS/specified_value +--- +
{{CSSRef}}
+ +

CSS 속성의 지정값은 세 가지 방법 중 하나로 설정됩니다.

+ +
    +
  1. 문서의 스타일시트가 속성값을 지정했다면 그러면 그 값이 사용됩니다. 예를 들어, {{cssxref("color")}} 속성이 green 으로 설정된 경우 대응하는 요소(element)의 텍스트 색은 녹색이 됩니다.
    2. +
  2. 문서의 스타일시트가 값을 지정하지 않은 경우 부모 요소로부터 상속됩니다(가능하다면). 예를 들어, {{HTMLElement("div")}} 내부에 단락({{HTMLElement("p")}})이 있고 {{HTMLElement("div")}}의 CSS font 속성값이 "Arial", {{HTMLElement("p")}}가 정의된 font 속성이 없다면 Arial font가 상속됩니다.
    3. +
  3. 위 중 어느 것도 이용할 수 없는 경우, CSS 스펙에 지정된 대로 요소의 초기값이 적용됩니다.
    4. +
+ +

예제

+ +

HTML

+ +
<p>My specified color is given explicitly in the CSS.</p>
+
+<div>The specified values of all my properties default to their
+    initial values, because none of them are given in the CSS.</div>
+
+<div class="fun">
+  <p>The specified value of my font family is not given explicitly
+      in the CSS, so it is inherited from my parent. However,
+      the border is not an inheriting property.</p>
+</div>
+ +

CSS

+ +
.fun {
+  border: 1px dotted pink;
+  font-family: fantasy;
+}
+
+p {
+  color: green;
+}
+
+ +

결과

+ +

{{EmbedLiveSample("예제", 500, 220)}}

+ +

명세

+ + + + + + + + + + + + + + + + +
명세상태설명
{{SpecName("CSS2.1", "cascade.html#specified-value", "cascaded value")}}{{Spec2("CSS2.1")}}초기 정의
diff --git a/files/ko/web/css/syntax/index.html b/files/ko/web/css/syntax/index.html new file mode 100644 index 0000000000..3f64118f7a --- /dev/null +++ b/files/ko/web/css/syntax/index.html @@ -0,0 +1,79 @@ +--- +title: 구문 +slug: Web/CSS/Syntax +tags: + - CSS + - Guide + - Reference + - Web +translation_of: Web/CSS/Syntax +--- +
{{cssref}}
+ +

종속형 스타일 시트(CSS) 언어의 기본 목표는 브라우저 엔진이 색상, 위치 지정 또는 장식과 같은 특정 기능을 사용하여 페이지에 요소를 그릴 수 있도록 하는 것입니다. 이러한 목표 달성을 위해 만들어진 CSS 구문을 이루고 있는 기본 구성 요소는 다음과 같습니다.

+ +
    +
  • 속성(property)은 {{glossary("identifier", "식별자")}}, 즉 사람이 읽을 수 있는 이름이며 어떠한 CSS 기능을 구현할 것인지 결정합니다.
    • +
  • 값(value)은 앞서 지정한 속성이 브라우저에 의해 어떤 식으로 나타나야 할지 기술합니다. 각 속성의 의미적 표현을 형식 문법으로 정의한 유효한 값 집합과 함께 브라우저 엔진이 구현합니다.
    • +
+ +

CSS 선언

+ +

CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. 속성과 값 쌍은 선언(declaration)이라 부르며, 모든 CSS 엔진은 적절하게 요소를 배열하고 스타일을 입히기 위해서 요소 하나하나마다 어떤 선언을 적용할지 계산합니다.

+ +

CSS에서는 속성과 값 모두 대소문자를 구분합니다. 속성-값 쌍은 콜론, ':' (U+003A COLON)으로 구분하며 속성과 값 앞, 사이, 뒤에 오는 공백은 무시합니다.

+ +

css syntax - declaration.png

+ +

CSS는 100가지 이상의 속성과 셀 수 없이 많은 값이 있습니다. 속성에 아무 값이나 넣는 것은 허용되지 않고, 대신 속성마다 유효한 값을 정의하고 있습니다. 주어진 속성에 대해 값이 유효하지 않은 경우, 그 선언은 부적합으로 간주하여 CSS 엔진이 완전히 무시합니다.

+ +

CSS 선언 블록

+ +

선언은 블록 단위로 이루어져 있습니다. 즉, 여는 중괄호, '{' (U+007B LEFT CURLY BRACKET) 및 닫는 중괄호, '}' (U+007D RIGHT CURLY BRACKET)로 구분된 구조 입니다. 어떤 경우엔 블록을 중첩할 수 있으므로 열고 닫는 중괄호가 서로 맞아야 합니다.

+ +

css syntax - block.png

+ +

이런 블록은 자연스럽게도 선언 블록이라고 부르며, 내부의 선언은 세미콜론, ';' (U+003B SEMICOLON)으로 구분합니다. 선언 블록은 아무런 선언도 들어가지 않은 빈 상태로도 존재할 수 있습니다. 선언 주위의 공백은 무시합니다. 마지막 선언에는 세미콜론을 생략해도 되지만, 다른 선언을 밑에다 덧붙여서 블록을 확장하면서 세미콜론 추가를 잊는 상황을 방지하기 위해 붙여주는 것이 좋은 스타일이라고 생각하는 경우가 자주 있기는 합니다.

+ +

CSS 선언 블록을 시각화하면 다음과 같습니다.css syntax - declarations block.png

+ +
참고: CSS 선언 블록의 콘텐츠, 즉 여닫는 중괄호 없이 세미콜론으로 분리한 선언 목록은 HTML {{htmlattrxref("style")}} 특성의 값으로 사용할 수 있습니다.
+ +

CSS 규칙집합

+ +

스타일 시트가 선언을 웹 페이지의 요소 하나씩에만 적용할 수 있다면 거의 쓸모가 없을 것입니다. 진짜 목표는 다양한 선언을 문서의 다양한 부분에 적용하는 것입니다.

+ +

CSS에서는 선언 블록에 조건을 붙여 해결할 수 있습니다. 각 (유효한) 선언 블록은 페이지의 일부 요소를 선택하는 조건인 선택자(selector)가 선행됩니다. 선택자-선언 블록 쌍은 규칙집합 또는 종종 간단히 규칙이라고 합니다.

+ +

css syntax - ruleset.png

+ +

페이지 요소는 여러 선택자로 그리고 결국 주어진 속성을 서로 다른 값으로 여러 번 포함하는 여러 규칙에 의해 일치될 수 있기에, CSS 표준은 어느 게 다른 것보다 우선하고 적용되어야 하는 지를 정의합니다: 이를 종속(cascade) 알고리즘이라고 합니다.

+ +
비록 선택자 그룹에 의해 특징지어진 규칙집합이 규칙집합을 각각 단일 선택자로 대체하는 일종의 단축(shorthand)일지라도, 이는 규칙집합 자체의 유효성에 적용되지는 않는다는 점에 유의하는 것이 중요합니다.
+
+이는 중요한 결과로 이어집니다: 단일 기본 선택자 하나가 무효한 경우, 무명(unknown) 가상 요소(pseudo-element) 또는 가상 클래스(pseudo-class)를 사용할 때처럼, 모든 선택자는 무효하고 따라서 전체 규칙은 무시됩니다(유효하지도 않기에).
+ +

CSS 문

+ +

규칙집합은 종종 큰 규칙집합 목록만으로 구성된 스타일 시트의 주요 구성 블록입니다. 하지만 문자 집합, import하려는 다른 외부 스타일 시트, 글꼴 모양 또는 목록 카운터 설명 및 더 많은 것처럼 웹 제작자가 스타일 시트에서 전하고 싶은 다른 정보가 있습니다. 이를 위해 다른 특정 종류의 문을 사용합니다.

+ +

문은 비 공백 문자로 시작하여 첫 번째 닫는 중괄호 또는 세미콜론 (문자열 외에, 이스케이프되지 않고 다른 {}, () 및 [] 쌍에 포함되지 않는) 으로 끝나는 구성 블록입니다.

+ +

css syntax - statements Venn diag.png

+ +

다음과 같은 다른 종류의 문이 있습니다:

+ +
    +
  • 본 것처럼, CSS 선언의 컬렉션과 선택자에 의해 기술된 조건을 연결짓는 규칙집합 (또는 규칙).
    • +
  • at 기호, '@' (U+0040 COMMERCIAL AT)로 시작하고 그런 다음 문의 끝, 즉 블록 밖 다음 세미콜론(;) 또는 다음 블록의 끝까지 계속 식별자가 뒤따르는 At-규칙. 식별자에 의해 정의된 각 유형의 at-규칙은, 물론 자체 내부 구문 및 의미(semantics)가 있을 수 있습니다. 그들은 메타 데이터 정보({{ cssxref("@charset") }} 또는 {{ cssxref("@import") }} 같은), 조건부 정보({{ cssxref("@media") }} 또는 {{ cssxref("@document") }} 같은) 또는 설명 정보({{ cssxref("@font-face") }} 같은)를 전달하는 데 사용됩니다.
    • +
+ +

규칙집합 또는 at-규칙이 아닌 모든 문은 유효하지 않고 무시됩니다.

+ +

또 다른 문 그룹, 중첩 문이 있습니다, 이들은 at-규칙, 조건부 그룹 규칙의 특정 부분집합에서 사용될 수 있는 문입니다. 이러한 문은 오직 특정 조건이 일치되면 적용합니다: @media at-규칙 콘텐츠는 브라우저가 돌아가는 장치가 표현된 조건과 일치하는 경우에만 적용됩니다. 반면 @document at-규칙 콘텐츠는 현재 페이지가 일부 조건과 일치하는 경우에만 적용됩니다, 등등. CSS1 및 CSS2.1에서는, 규칙집합만이 조건부 그룹 규칙 내에서 사용될 수 있습니다. 그것은 매우 제한됐고 이 제한은 CSS Conditionals 레벨 3에서 해제되었습니다. 현재, 여전히 실험 중이고 모든 브라우저에서 지원되지는 않지만, 조건부 그룹 규칙은 광범위한 콘텐츠, 규칙집합뿐만 아니라 전부는 아니지만 일부 at-규칙을 포함할 수 있습니다.

+ +

같이 보기

+ +
    +
  • {{ CSS_key_concepts()}}
    • +
diff --git a/files/ko/web/css/tab-size/index.html b/files/ko/web/css/tab-size/index.html new file mode 100644 index 0000000000..ad29994f53 --- /dev/null +++ b/files/ko/web/css/tab-size/index.html @@ -0,0 +1,121 @@ +--- +title: tab-size +slug: Web/CSS/tab-size +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/tab-size +--- +
{{CSSRef}}
+ +

CSS tab-size 속성은 탭 문자(U+0009)의 너비를 조절합니다.

+ +

구문

+ +
/* <integer> 값 */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> 값 */
+tab-size: 10px;
+tab-size: 2em;
+
+/* 전역 값 */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+
+ +

값

+ +
+
{{CSSxRef("<integer>")}}
+
공백 문자(U+0020)에 대한 탭 문자의 상대적인 너비. 0 이상의 정수여야 합니다.
+
{{CSSxRef("<length>")}}
+
탭 문자의 너비. 양의 값이어야 합니다.
+
+ +

형식 정의

+ +

{{CSSInfo}}

+ +

형식 구문

+ +
{{CSSSyntax}}
+ +

예제

+ +

글자 수로 정의

+ +
pre {
+  tab-size: 4; /* Set tab size to 4 characters wide */
+}
+
+ +

탭 제거

+ +
pre {
+  tab-size: 0; /* Remove indentation */
+}
+
+ +

기본 크기와 비교

+ +

다음 예제는 기본 탭 크기를 사용자 지정 탭 크기와 비교합니다. {{cssxref("white-space")}} 속성을 pre로 설정해서 탭 문자가 접히지 않도록 했습니다.

+ +

HTML

+ +
<p>no tab</p>
+<p>&#0009;default tab size of 8 characters wide</p>
+<p class="custom">&#0009;custom tab size of 3 characters wide</p>
+<p>&nbsp;&nbsp;&nbsp;3 spaces, equivalent to the custom tab size</p>
+
+ +

CSS

+ +
p {
+  white-space: pre;
+}
+
+.custom {
+  tab-size: 3;
+  -moz-tab-size: 3;
+}
+ +

결과

+ +

{{EmbedLiveSample('기본_크기와_비교')}}

+ +

명세

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Text', '#tab-size-property', 'tab-size')}}{{Spec2('CSS3 Text')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.tab-size")}}

+ +

같이 보기

+ + diff --git a/files/ko/web/css/text-align/index.html b/files/ko/web/css/text-align/index.html new file mode 100644 index 0000000000..630a0c0881 --- /dev/null +++ b/files/ko/web/css/text-align/index.html @@ -0,0 +1,234 @@ +--- +title: text-align +slug: Web/CSS/text-align +tags: + - CSS + - CSS Property + - CSS Text + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/text-align +--- +
{{CSSRef}}
+ +

CSS text-align 속성은 블록 요소나 표의 칸 상자의 가로 정렬을 설정합니다. 즉 {{cssxref("vertical-align")}}과 동일하나 세로가 아닌 가로 방향으로 동작합니다.

+ +
{{EmbedInteractiveExample("pages/css/text-align.html")}}
+ + + +

구문

+ +
/* 키워드 값 */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* 표 열의 문자 기반 정렬 */
+text-align: ".";
+text-align: "." center;
+
+/* 블록 정렬 값 (비표준 구문) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* 전역 값 */
+text-align: inherit;
+text-align: initial;
+text-align: unset;
+
+ +

text-align 속성은 다음 방법 중 하나를 사용해 지정합니다.

+ + + +

값

+ +
+
start {{experimental_inline}}
+
쓰기 방식이 좌횡서면 left와 같고, 우횡서면 right과 같습니다.
+
end {{experimental_inline}}
+
쓰기 방식이 좌횡서면 right과 같고, 우횡서면 left와 같습니다.
+
left
+
인라인 콘텐츠를 줄 상자의 왼쪽 모서리로 정렬합니다.
+ +
인라인 콘텐츠를 줄 상자의 오른쪽 모서리로 정렬합니다.
+
center
+
인라인 콘텐츠를 줄 상자의 가운데로 정렬합니다.
+
justify
+
인라인 콘텐츠를 양쪽 정렬합니다. 마지막 줄을 제외하고, 줄 상자의 왼쪽과 오른쪽 끝에 텍스트를 맞추기 위해 사이 공간을 띄웁니다.
+
justify-all {{experimental_inline}}
+
justify와 같지만 마지막 줄에도 적용합니다.
+
match-parent {{experimental_inline}}
+
inherit과 비슷하지만, start와 end 값을 부모의 {{cssxref("direction")}}에 맞춰 적절한 left와 right 값으로 치환합니다.
+
{{cssxref("<string>")}} {{experimental_inline}}
+
표 칸에 적용할 경우, 칸의 콘텐츠를 해당 문자에 맞춰 정렬합니다.
+
+ +

접근성 고려사항

+ +

양쪽 정렬 적용 시 생기는 불규칙한 여백은 난독증 등 인지력 저하를 겪고 있는 사용자에게 문제가 될 수 있습니다.

+ + + +

형식 정의

+ +

{{cssinfo}}

+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +

왼쪽 정렬

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: left;
+  border: solid;
+}
+ +

결과

+ +

{{EmbedLiveSample("왼쪽_정렬","100%","100%")}}

+ +

가운데 정렬

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: center;
+  border: solid;
+}
+ +

결과

+ +

{{EmbedLiveSample("가운데_정렬","100%","100%")}}

+ +

양쪽 정렬

+ +

HTML

+ +
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>
+ +

CSS

+ +
.example {
+  text-align: justify;
+  border: solid;
+}
+ +

결과

+ +

{{EmbedLiveSample("양쪽_정렬","100%","100%")}}

+ +

참고

+ +

인라인 콘텐츠를 가운데 정렬하지 않고 자신을 정렬하는 법은 {{cssxref("margin")}}을 auto로 설정하는 것입니다.

+ +
.something {
+  margin: auto;
+}
+
+ +
.something {
+  margin: 0 auto;
+}
+
+ +
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+ +
    +
+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}No changes
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}Added the <string> value.
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}Added the start, end, and match-parent values. Changed the unnamed initial value to start (which it was).
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}No changes
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Initial definition
+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.text-align")}}

+ +

같이 보기

+ +
    +
  • {{Cssxref("margin","margin: auto")}}, {{Cssxref("margin-left","margin-left: auto")}}, {{Cssxref("vertical-align")}}
    • +
diff --git a/files/ko/web/css/text-decoration/index.html b/files/ko/web/css/text-decoration/index.html new file mode 100644 index 0000000000..579bf26670 --- /dev/null +++ b/files/ko/web/css/text-decoration/index.html @@ -0,0 +1,133 @@ +--- +title: text-decoration +slug: Web/CSS/text-decoration +tags: + - CSS + - CSS Property + - CSS Text Decoration + - Reference +translation_of: Web/CSS/text-decoration +--- +
{{CSSRef}}
+ +

text-decoration CSS 단축 속성은 글씨의 장식(선) 색을 지정합니다. {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-style")}}, {{cssxref("text-decoration-thickness")}}속성 값을 설정합니다.

+ +
{{EmbedInteractiveExample("pages/css/text-decoration.html")}}
+ + + +

글씨 장식은 모든 하위 텍스트 요소에 적용됩니다. 따라서 자식 요소는 부모가 적용한 장식을 제거할 수 없습니다. 예를 들어 <p>이 문단에 <em>강조 표시</em>가 있어요.</p> 마크업에 p { text-decoration: underline; } 스타일을 적용하면 전체 문단에 밑줄이 쳐집니다. em { text-decoration: none; }을 추가하더라도 아무 변화도 일어나지 않습니다. 다만 em { text-decoration: overline; } 스타일은 "강조 표시"가 윗줄과 밑줄 모두 갖게 합니다.

+ +

구문

+ +

text-decoration 속성은 한 개 이상의 공백으로 구분한 값으로 지정할 수 있습니다. 각각의 값은 본디 속성에서 사용하는 값입니다.

+ +

값

+ +
+
{{cssxref("text-decoration-line")}}
+
underline, line-through 등 장식의 종류.
+
{{cssxref("text-decoration-color")}}
+
장식의 색.
+
{{cssxref("text-decoration-style")}}
+
solid, wavy, dashed 등 장식의 스타일.
+
{{cssxref("text-decoration-thickness")}}
+
요소를 꾸미는데 사용되는 선의 두께를 설정합니다.
+
+ +

형식 구문

+ +
{{csssyntax}}
+ +

예제

+ +
.under {
+  text-decoration: underline red;
+}
+
+.over {
+  text-decoration: wavy overline lime;
+}
+
+.line {
+  text-decoration: line-through;
+}
+
+.plain {
+  text-decoration: none;
+}
+
+.underover {
+  text-decoration: dashed underline overline;
+}
+
+.thick {
+  text-decoration: solid underline purple 4px;
+}
+
+.blink {
+  text-decoration: blink;
+}
+
+ +
<p class="under">밑줄을 가진 글씨입니다.</p>
+<p class="over">윗줄을 가진 글씨입니다.</p>
+<p class="line">취소선을 가진 글씨입니다.</p>
+<p>여기 링크는 기본값과 다르게 <a class="plain" href="#">밑줄이 없습니다</a>.
+    사용자는 보통 하이퍼링크를 구분할 때 밑줄 여부로 판단하므로
+    지우기 전에 조심해야 합니다.</p>
+<p class="underover">밑줄과 윗줄 모두 가진 글씨입니다.</p>
+<p class="thick">이 글씨는 아주 두꺼운 보라색 밑줄을 표시합니다. (브라우저가 지원하는 경우)</p>
+<p class="blink">이 글씨는 브라우저에 따라서 깜빡일 수 있어요.</p>
+
+ +

{{EmbedLiveSample('Examples','auto','320')}}

+ +

명세

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Text Decoration')}}{{Spec2('CSS4 Text Decoration')}}Adds {{cssxref("text-decoration-thickness")}}; note that this isn't yet officially part of the shorthand — this is as yet unspecified.
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}Transformed into a shorthand property. Added support for the value of {{cssxref('text-decoration-style')}}.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}No significant changes.
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Initial definition.
+ +

{{cssinfo}}

+ +

브라우저 호환성

+ + + +

{{Compat("css.properties.text-decoration")}}

+ +

같이 보기

+ +
    +
  • The individual text-decoration properties are {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}}, and {{cssxref("text-decoration-style")}}.
    • +
  • The {{cssxref("list-style")}} attribute controls the appearance of items in HTML {{HTMLElement("ol")}} and {{HTMLElement("ul")}} lists.
    • +
diff --git a/files/ko/web/css/text-shadow/index.html b/files/ko/web/css/text-shadow/index.html new file mode 100644 index 0000000000..17c04da65c --- /dev/null +++ b/files/ko/web/css/text-shadow/index.html @@ -0,0 +1,126 @@ +--- +title: text-shadow +slug: Web/CSS/text-shadow +tags: + - CSS + - Reference +translation_of: Web/CSS/text-shadow +--- +
{{CSSRef}}
+ +

text-shadow CSS 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 설명됩니다.

+ +

{{EmbedInteractiveExample("pages/css/text-shadow.html")}}

+ +

구문

+ +
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #fc0 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558abb;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y
+/* Use defaults for color and blur-radius */
+text-shadow: 5px 10px;
+
+/* Global values */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+ +

This property is specified as a comma-separated list of shadows.

+ +

Each shadow is specified as two or three <length> values, followed optionally by a <color> value. The first two <length> values are the <offset-x> and <offset-y> values. The third, optional, <length> value is the <blur-radius>. The<color> value is the shadow's color.

+ +

When more than one shadow is given, shadows are applied front-to-back, with the first-specified shadow on top.

+ +

This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first-letter")}} pseudo-elements.

+ +

값

+ +
+
{{cssxref("<color>")}}
+
선택값(생략가능). 위치값(offset)이전/이후에 설정이 가능하다. 색상(color)값이 설정되지 않으면, 브라우저 기본값(UA-chosen color)이 사용된다. {{ note("만약 다양한 브라우저에서 동일하게 표현하고 싶다면, 특정 색상(color)을 지정할 것.") }}
+
<offset-x> <offset-y>
+
Required. These {{cssxref("<length>")}} values specify the shadow's distance from the text. <offset-x> specifies the horizontal distance; a negative value places the shadow to the left of the text. <offset-y> specifies the vertical distance; a negative value places the shadow above the text. If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of <blur-radius>.
+
<blur-radius>
+
Optional. This is a {{cssxref("<length>")}} value. The higher the value, the bigger the blur; the shadow becomes wider and lighter. If not specified, it defaults to 0.
+
+

Formal syntax

+ + 
{{csssyntax}}
+
+ +

Examples

+ +

Simple shadow

+ + 
.red-text-shadow {
+  text-shadow: red 0 -2px;
+}
+ + 
<p class="red-text-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+ +

{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}

+ +

Multiple shadows

+ + 
.white-text-with-blue-shadow {
+  text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+  color: white;
+  font: 1.5em Georgia, serif;
+}
+ + 
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
+    natus error sit voluptatem accusantium doloremque laudantium,
+    totam rem aperiam, eaque ipsa quae ab illo inventore.</p>
+ +

{{EmbedLiveSample('Multiple_shadows', '660px', '170px')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Specifies text-shadow as animatable.
{{SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}The CSS property text-shadow was improperly defined in CSS2 and dropped in CSS2 (Level 1). The CSS Text Module Level 3 spec refined the syntax. Later it was moved to CSS Text Decoration Module Level 3.
+ +

{{cssinfo}}

+ +

Browser compatibility

+ +

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

+ +

{{Compat("css.properties.text-shadow")}}

+ +

Quantum CSS notes

+ Gecko has a bug whereby {{cssxref("transition")}}s will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified ({{bug(726550)}}). This has been fixed in Firefox's new parallel CSS engine (also known as Quantum CSS or Stylo, planned for release in Firefox 57). + +

See also

+ Text Shadow CSS Generator - An interactive text shadow CSS generator. {{cssxref("box-shadow")}} The {{cssxref("<color>")}} data type (for specifying the shadow color) Applying color to HTML elements using CSS
+
diff --git a/files/ko/web/css/time/index.html b/files/ko/web/css/time/index.html new file mode 100644 index 0000000000..2a95bb99ea --- /dev/null +++ b/files/ko/web/css/time/index.html @@ -0,0 +1,88 @@ +--- +title: