From 9609c0475501c0a01c25b2af5accf5a1100054fe Mon Sep 17 00:00:00 2001 From: g1nation Date: Tue, 23 Jun 2026 19:21:18 +0900 Subject: [PATCH] =?UTF-8?q?docs(10=5FWiki):=20W3Schools=20=EC=9C=84?= =?UTF-8?q?=ED=82=A4=ED=99=94=20=E2=80=94=20HTML/CSS/JavaScript(core)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) --- 10_Wiki/Topic_CSS/00_INDEX.md | 298 +++++++++++++++ 10_Wiki/Topic_CSS/CSS_2D_Transforms.md | 141 +++++++ 10_Wiki/Topic_CSS/CSS_2D_Transforms_Scale.md | 120 ++++++ 10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.md | 137 +++++++ 10_Wiki/Topic_CSS/CSS_3D_Transforms.md | 128 +++++++ 10_Wiki/Topic_CSS/CSS_Accessibility.md | 106 ++++++ 10_Wiki/Topic_CSS/CSS_Add_External.md | 122 +++++++ 10_Wiki/Topic_CSS/CSS_Add_Inline.md | 92 +++++ 10_Wiki/Topic_CSS/CSS_Add_Internal.md | 111 ++++++ 10_Wiki/Topic_CSS/CSS_Animations.md | 153 ++++++++ .../Topic_CSS/CSS_Animations_Properties.md | 213 +++++++++++ 10_Wiki/Topic_CSS/CSS_Animations_Timing.md | 137 +++++++ 10_Wiki/Topic_CSS/CSS_Attribute_Selectors.md | 115 ++++++ .../CSS_Attribute_Selectors_Advanced.md | 124 +++++++ .../Topic_CSS/CSS_Background_Attachment.md | 111 ++++++ 10_Wiki/Topic_CSS/CSS_Background_Clip.md | 147 ++++++++ 10_Wiki/Topic_CSS/CSS_Background_Color.md | 119 ++++++ 10_Wiki/Topic_CSS/CSS_Background_Image.md | 101 ++++++ 10_Wiki/Topic_CSS/CSS_Background_Origin.md | 129 +++++++ 10_Wiki/Topic_CSS/CSS_Background_Repeat.md | 124 +++++++ 10_Wiki/Topic_CSS/CSS_Background_Shorthand.md | 105 ++++++ 10_Wiki/Topic_CSS/CSS_Background_Size.md | 173 +++++++++ 10_Wiki/Topic_CSS/CSS_Border_Color.md | 115 ++++++ 10_Wiki/Topic_CSS/CSS_Border_Images.md | 144 ++++++++ 10_Wiki/Topic_CSS/CSS_Border_Shorthand.md | 107 ++++++ 10_Wiki/Topic_CSS/CSS_Border_Sides.md | 124 +++++++ 10_Wiki/Topic_CSS/CSS_Border_Style.md | 107 ++++++ 10_Wiki/Topic_CSS/CSS_Border_Width.md | 126 +++++++ 10_Wiki/Topic_CSS/CSS_Box_Model.md | 114 ++++++ 10_Wiki/Topic_CSS/CSS_Box_Shadow.md | 150 ++++++++ 10_Wiki/Topic_CSS/CSS_Box_Sizing.md | 136 +++++++ 10_Wiki/Topic_CSS/CSS_Buttons.md | 136 +++++++ 10_Wiki/Topic_CSS/CSS_Buttons_Groups.md | 133 +++++++ 10_Wiki/Topic_CSS/CSS_Buttons_Hover.md | 128 +++++++ 10_Wiki/Topic_CSS/CSS_Center_Align.md | 94 +++++ 10_Wiki/Topic_CSS/CSS_Clear_Clearfix.md | 134 +++++++ 10_Wiki/Topic_CSS/CSS_Color_Keywords.md | 148 ++++++++ 10_Wiki/Topic_CSS/CSS_Colors.md | 111 ++++++ 10_Wiki/Topic_CSS/CSS_Colors_CSS3.md | 115 ++++++ 10_Wiki/Topic_CSS/CSS_Combinators.md | 112 ++++++ 10_Wiki/Topic_CSS/CSS_Counters.md | 124 +++++++ 10_Wiki/Topic_CSS/CSS_Counters_Nested.md | 132 +++++++ 10_Wiki/Topic_CSS/CSS_Custom_Fonts.md | 130 +++++++ 10_Wiki/Topic_CSS/CSS_Display.md | 133 +++++++ 10_Wiki/Topic_CSS/CSS_Dropdowns.md | 170 +++++++++ 10_Wiki/Topic_CSS/CSS_Dropdowns_Advanced.md | 282 ++++++++++++++ 10_Wiki/Topic_CSS/CSS_Flexbox.md | 120 ++++++ 10_Wiki/Topic_CSS/CSS_Flexbox_Align.md | 147 ++++++++ 10_Wiki/Topic_CSS/CSS_Flexbox_Container.md | 154 ++++++++ 10_Wiki/Topic_CSS/CSS_Flexbox_Items.md | 158 ++++++++ 10_Wiki/Topic_CSS/CSS_Flexbox_Justify.md | 123 +++++++ 10_Wiki/Topic_CSS/CSS_Flexbox_Responsive.md | 128 +++++++ 10_Wiki/Topic_CSS/CSS_Float.md | 147 ++++++++ 10_Wiki/Topic_CSS/CSS_Float_Examples.md | 131 +++++++ 10_Wiki/Topic_CSS/CSS_Font_Fallbacks.md | 109 ++++++ 10_Wiki/Topic_CSS/CSS_Font_Family.md | 117 ++++++ 10_Wiki/Topic_CSS/CSS_Font_Google.md | 123 +++++++ 10_Wiki/Topic_CSS/CSS_Font_Pairings.md | 116 ++++++ 10_Wiki/Topic_CSS/CSS_Font_Shorthand.md | 114 ++++++ 10_Wiki/Topic_CSS/CSS_Font_Size.md | 162 +++++++++ 10_Wiki/Topic_CSS/CSS_Font_Style.md | 126 +++++++ 10_Wiki/Topic_CSS/CSS_Font_Web_Safe.md | 107 ++++++ 10_Wiki/Topic_CSS/CSS_Form_Elements.md | 127 +++++++ 10_Wiki/Topic_CSS/CSS_Form_Focus.md | 119 ++++++ 10_Wiki/Topic_CSS/CSS_Gradients_Conic.md | 177 +++++++++ 10_Wiki/Topic_CSS/CSS_Gradients_Linear.md | 160 ++++++++ 10_Wiki/Topic_CSS/CSS_Gradients_Radial.md | 138 +++++++ 10_Wiki/Topic_CSS/CSS_Grid.md | 117 ++++++ 10_Wiki/Topic_CSS/CSS_Grid_12Column.md | 164 +++++++++ 10_Wiki/Topic_CSS/CSS_Grid_Align.md | 217 +++++++++++ 10_Wiki/Topic_CSS/CSS_Grid_Container.md | 104 ++++++ 10_Wiki/Topic_CSS/CSS_Grid_Gaps.md | 116 ++++++ 10_Wiki/Topic_CSS/CSS_Grid_Item_Align.md | 109 ++++++ 10_Wiki/Topic_CSS/CSS_Grid_Item_Named.md | 151 ++++++++ 10_Wiki/Topic_CSS/CSS_Grid_Item_Order.md | 87 +++++ 10_Wiki/Topic_CSS/CSS_Grid_Items.md | 145 ++++++++ 10_Wiki/Topic_CSS/CSS_Grid_Tracks.md | 145 ++++++++ 10_Wiki/Topic_CSS/CSS_Grouping_Selectors.md | 112 ++++++ 10_Wiki/Topic_CSS/CSS_HEX.md | 112 ++++++ 10_Wiki/Topic_CSS/CSS_HSL.md | 123 +++++++ 10_Wiki/Topic_CSS/CSS_Height_Width.md | 101 ++++++ 10_Wiki/Topic_CSS/CSS_Horizontal_Align.md | 138 +++++++ 10_Wiki/Topic_CSS/CSS_Horizontal_Navbar.md | 223 ++++++++++++ 10_Wiki/Topic_CSS/CSS_Icons_Bootstrap.md | 97 +++++ 10_Wiki/Topic_CSS/CSS_Icons_Font_Awesome.md | 99 +++++ 10_Wiki/Topic_CSS/CSS_Icons_Google.md | 97 +++++ 10_Wiki/Topic_CSS/CSS_Image_Centering.md | 135 +++++++ 10_Wiki/Topic_CSS/CSS_Image_Effects.md | 75 ++++ 10_Wiki/Topic_CSS/CSS_Image_Filters.md | 121 ++++++ 10_Wiki/Topic_CSS/CSS_Image_Gallery.md | 253 +++++++++++++ 10_Wiki/Topic_CSS/CSS_Image_Hover.md | 93 +++++ 10_Wiki/Topic_CSS/CSS_Image_Modal.md | 257 +++++++++++++ 10_Wiki/Topic_CSS/CSS_Image_Shapes.md | 143 ++++++++ 10_Wiki/Topic_CSS/CSS_Image_Sprites.md | 177 +++++++++ 10_Wiki/Topic_CSS/CSS_Image_Styling.md | 139 +++++++ 10_Wiki/Topic_CSS/CSS_Important.md | 111 ++++++ 10_Wiki/Topic_CSS/CSS_Inheritance.md | 122 +++++++ 10_Wiki/Topic_CSS/CSS_Inline_Block.md | 126 +++++++ 10_Wiki/Topic_CSS/CSS_Introduction.md | 104 ++++++ 10_Wiki/Topic_CSS/CSS_Link_Buttons.md | 116 ++++++ 10_Wiki/Topic_CSS/CSS_Margin_Collapse.md | 88 +++++ 10_Wiki/Topic_CSS/CSS_Margins.md | 154 ++++++++ 10_Wiki/Topic_CSS/CSS_Masking_Gradients.md | 132 +++++++ 10_Wiki/Topic_CSS/CSS_Masking_PNG.md | 114 ++++++ 10_Wiki/Topic_CSS/CSS_Masking_SVG.md | 138 +++++++ 10_Wiki/Topic_CSS/CSS_Math_Functions.md | 123 +++++++ 10_Wiki/Topic_CSS/CSS_Max_Width.md | 105 ++++++ 10_Wiki/Topic_CSS/CSS_Media_Queries.md | 126 +++++++ .../Topic_CSS/CSS_Media_Queries_Examples.md | 208 +++++++++++ 10_Wiki/Topic_CSS/CSS_Min_Max.md | 115 ++++++ 10_Wiki/Topic_CSS/CSS_Multiple_Backgrounds.md | 117 ++++++ 10_Wiki/Topic_CSS/CSS_Multiple_Columns.md | 111 ++++++ .../Topic_CSS/CSS_Multiple_Columns_Rules.md | 140 +++++++ .../Topic_CSS/CSS_Multiple_Style_Sheets.md | 130 +++++++ 10_Wiki/Topic_CSS/CSS_Navbar.md | 110 ++++++ 10_Wiki/Topic_CSS/CSS_Object_Fit.md | 172 +++++++++ 10_Wiki/Topic_CSS/CSS_Object_Position.md | 114 ++++++ 10_Wiki/Topic_CSS/CSS_Opacity.md | 160 ++++++++ 10_Wiki/Topic_CSS/CSS_Optimization.md | 100 +++++ 10_Wiki/Topic_CSS/CSS_Outline_Color.md | 125 +++++++ 10_Wiki/Topic_CSS/CSS_Outline_Offset.md | 116 ++++++ 10_Wiki/Topic_CSS/CSS_Outline_Shorthand.md | 112 ++++++ 10_Wiki/Topic_CSS/CSS_Outline_Style.md | 99 +++++ 10_Wiki/Topic_CSS/CSS_Outline_Width.md | 105 ++++++ 10_Wiki/Topic_CSS/CSS_Overflow.md | 132 +++++++ 10_Wiki/Topic_CSS/CSS_Overflow_XY.md | 106 ++++++ 10_Wiki/Topic_CSS/CSS_Padding.md | 129 +++++++ 10_Wiki/Topic_CSS/CSS_Padding_Box_Sizing.md | 104 ++++++ 10_Wiki/Topic_CSS/CSS_Pagination.md | 143 ++++++++ 10_Wiki/Topic_CSS/CSS_Pagination_Styles.md | 126 +++++++ 10_Wiki/Topic_CSS/CSS_Position.md | 120 ++++++ .../Topic_CSS/CSS_Position_Fixed_Absolute.md | 135 +++++++ 10_Wiki/Topic_CSS/CSS_Position_Offsets.md | 89 +++++ 10_Wiki/Topic_CSS/CSS_Position_Sticky.md | 101 ++++++ 10_Wiki/Topic_CSS/CSS_Property_Rule.md | 205 +++++++++++ 10_Wiki/Topic_CSS/CSS_Pseudo_Classes.md | 101 ++++++ .../CSS_Pseudo_Classes_Interactive.md | 146 ++++++++ .../CSS_Pseudo_Classes_Structural.md | 136 +++++++ 10_Wiki/Topic_CSS/CSS_Pseudo_Elements.md | 101 ++++++ .../Topic_CSS/CSS_Pseudo_Elements_Content.md | 119 ++++++ 10_Wiki/Topic_CSS/CSS_Pseudo_Elements_Text.md | 120 ++++++ 10_Wiki/Topic_CSS/CSS_RGB.md | 119 ++++++ 10_Wiki/Topic_CSS/CSS_RWD_Grid_View.md | 216 +++++++++++ 10_Wiki/Topic_CSS/CSS_RWD_Images.md | 177 +++++++++ 10_Wiki/Topic_CSS/CSS_RWD_Intro.md | 79 ++++ 10_Wiki/Topic_CSS/CSS_RWD_Media_Queries.md | 153 ++++++++ 10_Wiki/Topic_CSS/CSS_RWD_Videos.md | 97 +++++ 10_Wiki/Topic_CSS/CSS_RWD_Viewport.md | 86 +++++ 10_Wiki/Topic_CSS/CSS_Rounded_Borders.md | 81 +++++ 10_Wiki/Topic_CSS/CSS_Rounded_Corners.md | 199 ++++++++++ 10_Wiki/Topic_CSS/CSS_Selectors.md | 163 +++++++++ 10_Wiki/Topic_CSS/CSS_Shadow_Text.md | 145 ++++++++ 10_Wiki/Topic_CSS/CSS_Specificity.md | 142 ++++++++ .../Topic_CSS/CSS_Specificity_Hierarchy.md | 97 +++++ 10_Wiki/Topic_CSS/CSS_Style_Forms.md | 90 +++++ 10_Wiki/Topic_CSS/CSS_Style_Inputs.md | 128 +++++++ 10_Wiki/Topic_CSS/CSS_Styling_Links.md | 147 ++++++++ 10_Wiki/Topic_CSS/CSS_Styling_Lists.md | 143 ++++++++ 10_Wiki/Topic_CSS/CSS_Supports_Rule.md | 172 +++++++++ 10_Wiki/Topic_CSS/CSS_Syntax.md | 96 +++++ 10_Wiki/Topic_CSS/CSS_Table_Alignment.md | 112 ++++++ 10_Wiki/Topic_CSS/CSS_Table_Borders.md | 126 +++++++ 10_Wiki/Topic_CSS/CSS_Table_Responsive.md | 90 +++++ 10_Wiki/Topic_CSS/CSS_Table_Size.md | 114 ++++++ 10_Wiki/Topic_CSS/CSS_Table_Styling.md | 109 ++++++ 10_Wiki/Topic_CSS/CSS_Text_Alignment.md | 156 ++++++++ 10_Wiki/Topic_CSS/CSS_Text_Color.md | 117 ++++++ 10_Wiki/Topic_CSS/CSS_Text_Decoration.md | 128 +++++++ .../Topic_CSS/CSS_Text_Decoration_Styles.md | 169 +++++++++ 10_Wiki/Topic_CSS/CSS_Text_Effects.md | 155 ++++++++ 10_Wiki/Topic_CSS/CSS_Text_Shadow.md | 137 +++++++ 10_Wiki/Topic_CSS/CSS_Text_Spacing.md | 132 +++++++ 10_Wiki/Topic_CSS/CSS_Text_Transformation.md | 102 ++++++ 10_Wiki/Topic_CSS/CSS_Tooltip_Arrows.md | 138 +++++++ 10_Wiki/Topic_CSS/CSS_Tooltips.md | 143 ++++++++ 10_Wiki/Topic_CSS/CSS_Transitions.md | 123 +++++++ 10_Wiki/Topic_CSS/CSS_Transitions_Timing.md | 153 ++++++++ 10_Wiki/Topic_CSS/CSS_Units.md | 111 ++++++ 10_Wiki/Topic_CSS/CSS_Units_Absolute.md | 96 +++++ 10_Wiki/Topic_CSS/CSS_Units_Relative.md | 136 +++++++ 10_Wiki/Topic_CSS/CSS_User_Interface.md | 147 ++++++++ 10_Wiki/Topic_CSS/CSS_Variables.md | 155 ++++++++ 10_Wiki/Topic_CSS/CSS_Variables_JavaScript.md | 105 ++++++ .../Topic_CSS/CSS_Variables_MediaQueries.md | 147 ++++++++ 10_Wiki/Topic_CSS/CSS_Variables_Overriding.md | 148 ++++++++ 10_Wiki/Topic_CSS/CSS_Vertical_Align.md | 111 ++++++ 10_Wiki/Topic_CSS/CSS_Vertical_Navbar.md | 153 ++++++++ 10_Wiki/Topic_CSS/CSS_Visibility_Hide.md | 132 +++++++ 10_Wiki/Topic_CSS/CSS_Website_Layout.md | 163 +++++++++ 10_Wiki/Topic_CSS/CSS_Z_Index.md | 115 ++++++ 10_Wiki/Topic_HTML/00_INDEX.md | 122 +++++++ 10_Wiki/Topic_HTML/HTML_Accessibility.md | 121 ++++++ 10_Wiki/Topic_HTML/HTML_Attributes.md | 169 +++++++++ 10_Wiki/Topic_HTML/HTML_Audio.md | 125 +++++++ 10_Wiki/Topic_HTML/HTML_Basic.md | 131 +++++++ 10_Wiki/Topic_HTML/HTML_Block_and_Inline.md | 119 ++++++ 10_Wiki/Topic_HTML/HTML_Buttons.md | 137 +++++++ 10_Wiki/Topic_HTML/HTML_CSS.md | 232 ++++++++++++ 10_Wiki/Topic_HTML/HTML_Canvas.md | 189 ++++++++++ 10_Wiki/Topic_HTML/HTML_Charsets.md | 130 +++++++ 10_Wiki/Topic_HTML/HTML_Classes.md | 205 +++++++++++ 10_Wiki/Topic_HTML/HTML_Colors.md | 138 +++++++ 10_Wiki/Topic_HTML/HTML_Comments.md | 124 +++++++ 10_Wiki/Topic_HTML/HTML_Computercode.md | 155 ++++++++ 10_Wiki/Topic_HTML/HTML_Div.md | 170 +++++++++ 10_Wiki/Topic_HTML/HTML_Drag_and_Drop.md | 132 +++++++ 10_Wiki/Topic_HTML/HTML_Editors.md | 110 ++++++ 10_Wiki/Topic_HTML/HTML_Elements.md | 148 ++++++++ 10_Wiki/Topic_HTML/HTML_Emojis.md | 146 ++++++++ 10_Wiki/Topic_HTML/HTML_Entities.md | 143 ++++++++ 10_Wiki/Topic_HTML/HTML_Favicon.md | 101 ++++++ 10_Wiki/Topic_HTML/HTML_File_Paths.md | 121 ++++++ 10_Wiki/Topic_HTML/HTML_Form_Attributes.md | 140 +++++++ 10_Wiki/Topic_HTML/HTML_Form_Elements.md | 203 +++++++++++ 10_Wiki/Topic_HTML/HTML_Formatting.md | 171 +++++++++ 10_Wiki/Topic_HTML/HTML_Forms.md | 162 +++++++++ 10_Wiki/Topic_HTML/HTML_Geolocation.md | 183 ++++++++++ 10_Wiki/Topic_HTML/HTML_Head.md | 201 ++++++++++ 10_Wiki/Topic_HTML/HTML_Headings.md | 110 ++++++ 10_Wiki/Topic_HTML/HTML_Id.md | 176 +++++++++ 10_Wiki/Topic_HTML/HTML_Iframes.md | 125 +++++++ 10_Wiki/Topic_HTML/HTML_Images.md | 212 +++++++++++ 10_Wiki/Topic_HTML/HTML_Input_Attributes.md | 177 +++++++++ .../Topic_HTML/HTML_Input_Form_Attributes.md | 152 ++++++++ 10_Wiki/Topic_HTML/HTML_Input_Types.md | 217 +++++++++++ 10_Wiki/Topic_HTML/HTML_Introduction.md | 158 ++++++++ 10_Wiki/Topic_HTML/HTML_JavaScript.md | 118 ++++++ 10_Wiki/Topic_HTML/HTML_Layout.md | 112 ++++++ 10_Wiki/Topic_HTML/HTML_Links.md | 154 ++++++++ 10_Wiki/Topic_HTML/HTML_Lists.md | 125 +++++++ 10_Wiki/Topic_HTML/HTML_Media.md | 102 ++++++ 10_Wiki/Topic_HTML/HTML_Page_Title.md | 100 +++++ 10_Wiki/Topic_HTML/HTML_Paragraphs.md | 121 ++++++ 10_Wiki/Topic_HTML/HTML_Plugins.md | 106 ++++++ 10_Wiki/Topic_HTML/HTML_Quotations.md | 146 ++++++++ 10_Wiki/Topic_HTML/HTML_Responsive.md | 230 ++++++++++++ 10_Wiki/Topic_HTML/HTML_SSE.md | 148 ++++++++ 10_Wiki/Topic_HTML/HTML_SVG.md | 150 ++++++++ 10_Wiki/Topic_HTML/HTML_Semantics.md | 293 +++++++++++++++ 10_Wiki/Topic_HTML/HTML_Style_Guide.md | 343 ++++++++++++++++++ 10_Wiki/Topic_HTML/HTML_Styles.md | 141 +++++++ 10_Wiki/Topic_HTML/HTML_Symbols.md | 133 +++++++ 10_Wiki/Topic_HTML/HTML_Tables.md | 169 +++++++++ 10_Wiki/Topic_HTML/HTML_URL_Encode.md | 122 +++++++ 10_Wiki/Topic_HTML/HTML_Video.md | 127 +++++++ 10_Wiki/Topic_HTML/HTML_Web_APIs.md | 98 +++++ 10_Wiki/Topic_HTML/HTML_Web_Storage.md | 180 +++++++++ 10_Wiki/Topic_HTML/HTML_Web_Workers.md | 174 +++++++++ 10_Wiki/Topic_HTML/HTML_YouTube.md | 118 ++++++ 10_Wiki/Topic_HTML/HTML_vs_XHTML.md | 144 ++++++++ 10_Wiki/Topic_JavaScript/00_INDEX.md | 224 ++++++++++++ .../Topic_JavaScript/JavaScript_Arithmetic.md | 192 ++++++++++ .../JavaScript_Array_Const.md | 179 +++++++++ .../JavaScript_Array_Iteration.md | 316 ++++++++++++++++ .../JavaScript_Array_Methods.md | 246 +++++++++++++ .../JavaScript_Array_Search.md | 163 +++++++++ .../Topic_JavaScript/JavaScript_Array_Sort.md | 209 +++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Arrays.md | 217 +++++++++++ .../JavaScript_Arrow_Function.md | 203 +++++++++++ .../Topic_JavaScript/JavaScript_Assignment.md | 161 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Async.md | 162 +++++++++ .../JavaScript_Async_Await.md | 250 +++++++++++++ .../JavaScript_Async_Callbacks.md | 232 ++++++++++++ .../JavaScript_Async_Debug.md | 196 ++++++++++ .../JavaScript_Async_Fetch.md | 235 ++++++++++++ .../JavaScript_Async_Timeouts.md | 122 +++++++ .../JavaScript_Asynchronous.md | 136 +++++++ 10_Wiki/Topic_JavaScript/JavaScript_BigInt.md | 212 +++++++++++ .../Topic_JavaScript/JavaScript_Bitwise.md | 162 +++++++++ .../Topic_JavaScript/JavaScript_Booleans.md | 217 +++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Break.md | 169 +++++++++ .../JavaScript_Class_Inheritance.md | 181 +++++++++ .../JavaScript_Class_Static.md | 112 ++++++ .../Topic_JavaScript/JavaScript_Classes.md | 165 +++++++++ .../JavaScript_Code_Blocks.md | 136 +++++++ .../Topic_JavaScript/JavaScript_Comments.md | 116 ++++++ .../JavaScript_Comparisons.md | 141 +++++++ .../JavaScript_Conditional_Operators.md | 84 +++++ 10_Wiki/Topic_JavaScript/JavaScript_Const.md | 194 ++++++++++ .../Topic_JavaScript/JavaScript_Continue.md | 134 +++++++ .../JavaScript_Control_Flow.md | 139 +++++++ .../JavaScript_DOM_Animations.md | 153 ++++++++ .../Topic_JavaScript/JavaScript_DOM_CSS.md | 122 +++++++ .../JavaScript_DOM_Elements.md | 127 +++++++ .../Topic_JavaScript/JavaScript_DOM_HTML.md | 115 ++++++ .../JavaScript_DOM_Methods.md | 119 ++++++ .../Topic_JavaScript/JavaScript_Data_Types.md | 169 +++++++++ .../JavaScript_Date_Formats.md | 140 +++++++ .../Topic_JavaScript/JavaScript_Date_Get.md | 247 +++++++++++++ .../JavaScript_Date_Methods.md | 144 ++++++++ .../Topic_JavaScript/JavaScript_Date_Set.md | 154 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Dates.md | 158 ++++++++ .../JavaScript_Destructuring.md | 211 +++++++++++ .../JavaScript_Error_Object.md | 105 ++++++ 10_Wiki/Topic_JavaScript/JavaScript_Errors.md | 161 ++++++++ .../JavaScript_Errors_Intro.md | 177 +++++++++ .../JavaScript_Errors_Silent.md | 140 +++++++ .../JavaScript_Event_Listener.md | 143 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Events.md | 140 +++++++ .../JavaScript_Function_Arguments.md | 218 +++++++++++ .../JavaScript_Function_Expressions.md | 184 ++++++++++ .../JavaScript_Function_Intro.md | 152 ++++++++ .../JavaScript_Function_Invocation.md | 197 ++++++++++ .../JavaScript_Function_Parameters.md | 136 +++++++ .../JavaScript_Function_Return.md | 171 +++++++++ .../Topic_JavaScript/JavaScript_Functions.md | 152 ++++++++ .../Topic_JavaScript/JavaScript_Generators.md | 111 ++++++ .../Topic_JavaScript/JavaScript_HTML_DOM.md | 90 +++++ .../Topic_JavaScript/JavaScript_Hoisting.md | 127 +++++++ 10_Wiki/Topic_JavaScript/JavaScript_If.md | 142 ++++++++ .../Topic_JavaScript/JavaScript_If_Else.md | 138 +++++++ .../JavaScript_Introduction.md | 120 ++++++ .../Topic_JavaScript/JavaScript_Iterables.md | 145 ++++++++ .../Topic_JavaScript/JavaScript_Iterators.md | 170 +++++++++ 10_Wiki/Topic_JavaScript/JavaScript_JSON.md | 157 ++++++++ .../JavaScript_JSON_Arrays.md | 138 +++++++ .../JavaScript_JSON_Data_Types.md | 123 +++++++ .../JavaScript_JSON_Objects.md | 128 +++++++ .../Topic_JavaScript/JavaScript_JSON_Parse.md | 132 +++++++ .../JavaScript_JSON_Stringify.md | 137 +++++++ .../JavaScript_JSON_Syntax.md | 142 ++++++++ .../JavaScript_JSON_vs_XML.md | 134 +++++++ 10_Wiki/Topic_JavaScript/JavaScript_Let.md | 179 +++++++++ .../Topic_JavaScript/JavaScript_Logical.md | 125 +++++++ .../Topic_JavaScript/JavaScript_Loop_For.md | 147 ++++++++ .../Topic_JavaScript/JavaScript_Loop_While.md | 149 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Loops.md | 162 +++++++++ .../JavaScript_Map_Methods.md | 228 ++++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Maps.md | 154 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Math.md | 148 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_NaN.md | 136 +++++++ .../JavaScript_Number_Methods.md | 238 ++++++++++++ .../JavaScript_Number_Properties.md | 155 ++++++++ .../Topic_JavaScript/JavaScript_Numbers.md | 270 ++++++++++++++ .../JavaScript_Object_Constructors.md | 161 ++++++++ .../JavaScript_Object_Data_Types.md | 114 ++++++ .../JavaScript_Object_Display.md | 184 ++++++++++ .../JavaScript_Object_Methods.md | 164 +++++++++ .../JavaScript_Object_Properties.md | 191 ++++++++++ .../JavaScript_Object_This.md | 136 +++++++ .../Topic_JavaScript/JavaScript_Objects.md | 212 +++++++++++ .../Topic_JavaScript/JavaScript_Operators.md | 190 ++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Output.md | 181 +++++++++ .../JavaScript_Primitive_Data.md | 165 +++++++++ .../Topic_JavaScript/JavaScript_Promise.md | 300 +++++++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Random.md | 141 +++++++ 10_Wiki/Topic_JavaScript/JavaScript_RegExp.md | 215 +++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Scope.md | 138 +++++++ .../Topic_JavaScript/JavaScript_Set_Logic.md | 145 ++++++++ .../JavaScript_Set_Methods.md | 231 ++++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Sets.md | 161 ++++++++ .../Topic_JavaScript/JavaScript_Statements.md | 138 +++++++ .../JavaScript_Strict_Mode.md | 184 ++++++++++ .../JavaScript_String_Methods.md | 211 +++++++++++ .../JavaScript_String_Search.md | 196 ++++++++++ .../JavaScript_String_Templates.md | 143 ++++++++ .../Topic_JavaScript/JavaScript_Strings.md | 151 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Switch.md | 208 +++++++++++ .../Topic_JavaScript/JavaScript_Symbols.md | 152 ++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Syntax.md | 163 +++++++++ .../Topic_JavaScript/JavaScript_Ternary.md | 112 ++++++ .../JavaScript_Type_Coercion.md | 113 ++++++ .../JavaScript_Type_Conversion.md | 250 +++++++++++++ 10_Wiki/Topic_JavaScript/JavaScript_Types.md | 214 +++++++++++ .../JavaScript_Var_Let_Const.md | 114 ++++++ .../Topic_JavaScript/JavaScript_Variables.md | 135 +++++++ .../Topic_JavaScript/JavaScript_Where_To.md | 151 ++++++++ .../JavaScript_toLocaleString.md | 177 +++++++++ .../Topic_JavaScript/JavaScript_toString.md | 119 ++++++ 10_Wiki/Topic_JavaScript/JavaScript_typeof.md | 168 +++++++++ .../Topic_JavaScript/JavaScript_undefined.md | 129 +++++++ .../.astra/growth/conflict-scan-state.json | 2 +- 10_Wiki/Topics/ASTRA 기능 인벤토리.md | 204 ++++++++++- .../Topic_Programming--Architecture.md | 27 ++ .../Digests/Topic_Programming--Conventions.md | 26 ++ .../Digests/Topic_Programming--Language.md | 29 ++ 10_Wiki/Topics/Digests/lessons.md | 31 ++ 10_Wiki/Topics/Digests/root.md | 29 ++ .../ep_2026-06-23__meet_d_meet_r_txt.json | 22 ++ 379 files changed, 54618 insertions(+), 6 deletions(-) create mode 100644 10_Wiki/Topic_CSS/00_INDEX.md create mode 100644 10_Wiki/Topic_CSS/CSS_2D_Transforms.md create mode 100644 10_Wiki/Topic_CSS/CSS_2D_Transforms_Scale.md create mode 100644 10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.md create mode 100644 10_Wiki/Topic_CSS/CSS_3D_Transforms.md create mode 100644 10_Wiki/Topic_CSS/CSS_Accessibility.md create mode 100644 10_Wiki/Topic_CSS/CSS_Add_External.md create mode 100644 10_Wiki/Topic_CSS/CSS_Add_Inline.md create mode 100644 10_Wiki/Topic_CSS/CSS_Add_Internal.md create mode 100644 10_Wiki/Topic_CSS/CSS_Animations.md create mode 100644 10_Wiki/Topic_CSS/CSS_Animations_Properties.md create mode 100644 10_Wiki/Topic_CSS/CSS_Animations_Timing.md create mode 100644 10_Wiki/Topic_CSS/CSS_Attribute_Selectors.md create mode 100644 10_Wiki/Topic_CSS/CSS_Attribute_Selectors_Advanced.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Attachment.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Clip.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Color.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Image.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Origin.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Repeat.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Shorthand.md create mode 100644 10_Wiki/Topic_CSS/CSS_Background_Size.md create mode 100644 10_Wiki/Topic_CSS/CSS_Border_Color.md create mode 100644 10_Wiki/Topic_CSS/CSS_Border_Images.md create mode 100644 10_Wiki/Topic_CSS/CSS_Border_Shorthand.md create mode 100644 10_Wiki/Topic_CSS/CSS_Border_Sides.md create mode 100644 10_Wiki/Topic_CSS/CSS_Border_Style.md create mode 100644 10_Wiki/Topic_CSS/CSS_Border_Width.md create mode 100644 10_Wiki/Topic_CSS/CSS_Box_Model.md create mode 100644 10_Wiki/Topic_CSS/CSS_Box_Shadow.md create mode 100644 10_Wiki/Topic_CSS/CSS_Box_Sizing.md create mode 100644 10_Wiki/Topic_CSS/CSS_Buttons.md create mode 100644 10_Wiki/Topic_CSS/CSS_Buttons_Groups.md create mode 100644 10_Wiki/Topic_CSS/CSS_Buttons_Hover.md create mode 100644 10_Wiki/Topic_CSS/CSS_Center_Align.md create mode 100644 10_Wiki/Topic_CSS/CSS_Clear_Clearfix.md create mode 100644 10_Wiki/Topic_CSS/CSS_Color_Keywords.md create mode 100644 10_Wiki/Topic_CSS/CSS_Colors.md create mode 100644 10_Wiki/Topic_CSS/CSS_Colors_CSS3.md create mode 100644 10_Wiki/Topic_CSS/CSS_Combinators.md create mode 100644 10_Wiki/Topic_CSS/CSS_Counters.md create mode 100644 10_Wiki/Topic_CSS/CSS_Counters_Nested.md create mode 100644 10_Wiki/Topic_CSS/CSS_Custom_Fonts.md create mode 100644 10_Wiki/Topic_CSS/CSS_Display.md create mode 100644 10_Wiki/Topic_CSS/CSS_Dropdowns.md create mode 100644 10_Wiki/Topic_CSS/CSS_Dropdowns_Advanced.md create mode 100644 10_Wiki/Topic_CSS/CSS_Flexbox.md create mode 100644 10_Wiki/Topic_CSS/CSS_Flexbox_Align.md create mode 100644 10_Wiki/Topic_CSS/CSS_Flexbox_Container.md create mode 100644 10_Wiki/Topic_CSS/CSS_Flexbox_Items.md create mode 100644 10_Wiki/Topic_CSS/CSS_Flexbox_Justify.md create mode 100644 10_Wiki/Topic_CSS/CSS_Flexbox_Responsive.md create mode 100644 10_Wiki/Topic_CSS/CSS_Float.md create mode 100644 10_Wiki/Topic_CSS/CSS_Float_Examples.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Fallbacks.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Family.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Google.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Pairings.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Shorthand.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Size.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Style.md create mode 100644 10_Wiki/Topic_CSS/CSS_Font_Web_Safe.md create mode 100644 10_Wiki/Topic_CSS/CSS_Form_Elements.md create mode 100644 10_Wiki/Topic_CSS/CSS_Form_Focus.md create mode 100644 10_Wiki/Topic_CSS/CSS_Gradients_Conic.md create mode 100644 10_Wiki/Topic_CSS/CSS_Gradients_Linear.md create mode 100644 10_Wiki/Topic_CSS/CSS_Gradients_Radial.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_12Column.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Align.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Container.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Gaps.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Item_Align.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Item_Named.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Item_Order.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Items.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grid_Tracks.md create mode 100644 10_Wiki/Topic_CSS/CSS_Grouping_Selectors.md create mode 100644 10_Wiki/Topic_CSS/CSS_HEX.md create mode 100644 10_Wiki/Topic_CSS/CSS_HSL.md create mode 100644 10_Wiki/Topic_CSS/CSS_Height_Width.md create mode 100644 10_Wiki/Topic_CSS/CSS_Horizontal_Align.md create mode 100644 10_Wiki/Topic_CSS/CSS_Horizontal_Navbar.md create mode 100644 10_Wiki/Topic_CSS/CSS_Icons_Bootstrap.md create mode 100644 10_Wiki/Topic_CSS/CSS_Icons_Font_Awesome.md create mode 100644 10_Wiki/Topic_CSS/CSS_Icons_Google.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Centering.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Effects.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Filters.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Gallery.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Hover.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Modal.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Shapes.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Sprites.md create mode 100644 10_Wiki/Topic_CSS/CSS_Image_Styling.md create mode 100644 10_Wiki/Topic_CSS/CSS_Important.md create mode 100644 10_Wiki/Topic_CSS/CSS_Inheritance.md create mode 100644 10_Wiki/Topic_CSS/CSS_Inline_Block.md create mode 100644 10_Wiki/Topic_CSS/CSS_Introduction.md create mode 100644 10_Wiki/Topic_CSS/CSS_Link_Buttons.md create mode 100644 10_Wiki/Topic_CSS/CSS_Margin_Collapse.md create mode 100644 10_Wiki/Topic_CSS/CSS_Margins.md create mode 100644 10_Wiki/Topic_CSS/CSS_Masking_Gradients.md create mode 100644 10_Wiki/Topic_CSS/CSS_Masking_PNG.md create mode 100644 10_Wiki/Topic_CSS/CSS_Masking_SVG.md create mode 100644 10_Wiki/Topic_CSS/CSS_Math_Functions.md create mode 100644 10_Wiki/Topic_CSS/CSS_Max_Width.md create mode 100644 10_Wiki/Topic_CSS/CSS_Media_Queries.md create mode 100644 10_Wiki/Topic_CSS/CSS_Media_Queries_Examples.md create mode 100644 10_Wiki/Topic_CSS/CSS_Min_Max.md create mode 100644 10_Wiki/Topic_CSS/CSS_Multiple_Backgrounds.md create mode 100644 10_Wiki/Topic_CSS/CSS_Multiple_Columns.md create mode 100644 10_Wiki/Topic_CSS/CSS_Multiple_Columns_Rules.md create mode 100644 10_Wiki/Topic_CSS/CSS_Multiple_Style_Sheets.md create mode 100644 10_Wiki/Topic_CSS/CSS_Navbar.md create mode 100644 10_Wiki/Topic_CSS/CSS_Object_Fit.md create mode 100644 10_Wiki/Topic_CSS/CSS_Object_Position.md create mode 100644 10_Wiki/Topic_CSS/CSS_Opacity.md create mode 100644 10_Wiki/Topic_CSS/CSS_Optimization.md create mode 100644 10_Wiki/Topic_CSS/CSS_Outline_Color.md create mode 100644 10_Wiki/Topic_CSS/CSS_Outline_Offset.md create mode 100644 10_Wiki/Topic_CSS/CSS_Outline_Shorthand.md create mode 100644 10_Wiki/Topic_CSS/CSS_Outline_Style.md create mode 100644 10_Wiki/Topic_CSS/CSS_Outline_Width.md create mode 100644 10_Wiki/Topic_CSS/CSS_Overflow.md create mode 100644 10_Wiki/Topic_CSS/CSS_Overflow_XY.md create mode 100644 10_Wiki/Topic_CSS/CSS_Padding.md create mode 100644 10_Wiki/Topic_CSS/CSS_Padding_Box_Sizing.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pagination.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pagination_Styles.md create mode 100644 10_Wiki/Topic_CSS/CSS_Position.md create mode 100644 10_Wiki/Topic_CSS/CSS_Position_Fixed_Absolute.md create mode 100644 10_Wiki/Topic_CSS/CSS_Position_Offsets.md create mode 100644 10_Wiki/Topic_CSS/CSS_Position_Sticky.md create mode 100644 10_Wiki/Topic_CSS/CSS_Property_Rule.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pseudo_Classes.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pseudo_Classes_Interactive.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pseudo_Classes_Structural.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pseudo_Elements.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pseudo_Elements_Content.md create mode 100644 10_Wiki/Topic_CSS/CSS_Pseudo_Elements_Text.md create mode 100644 10_Wiki/Topic_CSS/CSS_RGB.md create mode 100644 10_Wiki/Topic_CSS/CSS_RWD_Grid_View.md create mode 100644 10_Wiki/Topic_CSS/CSS_RWD_Images.md create mode 100644 10_Wiki/Topic_CSS/CSS_RWD_Intro.md create mode 100644 10_Wiki/Topic_CSS/CSS_RWD_Media_Queries.md create mode 100644 10_Wiki/Topic_CSS/CSS_RWD_Videos.md create mode 100644 10_Wiki/Topic_CSS/CSS_RWD_Viewport.md create mode 100644 10_Wiki/Topic_CSS/CSS_Rounded_Borders.md create mode 100644 10_Wiki/Topic_CSS/CSS_Rounded_Corners.md create mode 100644 10_Wiki/Topic_CSS/CSS_Selectors.md create mode 100644 10_Wiki/Topic_CSS/CSS_Shadow_Text.md create mode 100644 10_Wiki/Topic_CSS/CSS_Specificity.md create mode 100644 10_Wiki/Topic_CSS/CSS_Specificity_Hierarchy.md create mode 100644 10_Wiki/Topic_CSS/CSS_Style_Forms.md create mode 100644 10_Wiki/Topic_CSS/CSS_Style_Inputs.md create mode 100644 10_Wiki/Topic_CSS/CSS_Styling_Links.md create mode 100644 10_Wiki/Topic_CSS/CSS_Styling_Lists.md create mode 100644 10_Wiki/Topic_CSS/CSS_Supports_Rule.md create mode 100644 10_Wiki/Topic_CSS/CSS_Syntax.md create mode 100644 10_Wiki/Topic_CSS/CSS_Table_Alignment.md create mode 100644 10_Wiki/Topic_CSS/CSS_Table_Borders.md create mode 100644 10_Wiki/Topic_CSS/CSS_Table_Responsive.md create mode 100644 10_Wiki/Topic_CSS/CSS_Table_Size.md create mode 100644 10_Wiki/Topic_CSS/CSS_Table_Styling.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Alignment.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Color.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Decoration.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Decoration_Styles.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Effects.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Shadow.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Spacing.md create mode 100644 10_Wiki/Topic_CSS/CSS_Text_Transformation.md create mode 100644 10_Wiki/Topic_CSS/CSS_Tooltip_Arrows.md create mode 100644 10_Wiki/Topic_CSS/CSS_Tooltips.md create mode 100644 10_Wiki/Topic_CSS/CSS_Transitions.md create mode 100644 10_Wiki/Topic_CSS/CSS_Transitions_Timing.md create mode 100644 10_Wiki/Topic_CSS/CSS_Units.md create mode 100644 10_Wiki/Topic_CSS/CSS_Units_Absolute.md create mode 100644 10_Wiki/Topic_CSS/CSS_Units_Relative.md create mode 100644 10_Wiki/Topic_CSS/CSS_User_Interface.md create mode 100644 10_Wiki/Topic_CSS/CSS_Variables.md create mode 100644 10_Wiki/Topic_CSS/CSS_Variables_JavaScript.md create mode 100644 10_Wiki/Topic_CSS/CSS_Variables_MediaQueries.md create mode 100644 10_Wiki/Topic_CSS/CSS_Variables_Overriding.md create mode 100644 10_Wiki/Topic_CSS/CSS_Vertical_Align.md create mode 100644 10_Wiki/Topic_CSS/CSS_Vertical_Navbar.md create mode 100644 10_Wiki/Topic_CSS/CSS_Visibility_Hide.md create mode 100644 10_Wiki/Topic_CSS/CSS_Website_Layout.md create mode 100644 10_Wiki/Topic_CSS/CSS_Z_Index.md create mode 100644 10_Wiki/Topic_HTML/00_INDEX.md create mode 100644 10_Wiki/Topic_HTML/HTML_Accessibility.md create mode 100644 10_Wiki/Topic_HTML/HTML_Attributes.md create mode 100644 10_Wiki/Topic_HTML/HTML_Audio.md create mode 100644 10_Wiki/Topic_HTML/HTML_Basic.md create mode 100644 10_Wiki/Topic_HTML/HTML_Block_and_Inline.md create mode 100644 10_Wiki/Topic_HTML/HTML_Buttons.md create mode 100644 10_Wiki/Topic_HTML/HTML_CSS.md create mode 100644 10_Wiki/Topic_HTML/HTML_Canvas.md create mode 100644 10_Wiki/Topic_HTML/HTML_Charsets.md create mode 100644 10_Wiki/Topic_HTML/HTML_Classes.md create mode 100644 10_Wiki/Topic_HTML/HTML_Colors.md create mode 100644 10_Wiki/Topic_HTML/HTML_Comments.md create mode 100644 10_Wiki/Topic_HTML/HTML_Computercode.md create mode 100644 10_Wiki/Topic_HTML/HTML_Div.md create mode 100644 10_Wiki/Topic_HTML/HTML_Drag_and_Drop.md create mode 100644 10_Wiki/Topic_HTML/HTML_Editors.md create mode 100644 10_Wiki/Topic_HTML/HTML_Elements.md create mode 100644 10_Wiki/Topic_HTML/HTML_Emojis.md create mode 100644 10_Wiki/Topic_HTML/HTML_Entities.md create mode 100644 10_Wiki/Topic_HTML/HTML_Favicon.md create mode 100644 10_Wiki/Topic_HTML/HTML_File_Paths.md create mode 100644 10_Wiki/Topic_HTML/HTML_Form_Attributes.md create mode 100644 10_Wiki/Topic_HTML/HTML_Form_Elements.md create mode 100644 10_Wiki/Topic_HTML/HTML_Formatting.md create mode 100644 10_Wiki/Topic_HTML/HTML_Forms.md create mode 100644 10_Wiki/Topic_HTML/HTML_Geolocation.md create mode 100644 10_Wiki/Topic_HTML/HTML_Head.md create mode 100644 10_Wiki/Topic_HTML/HTML_Headings.md create mode 100644 10_Wiki/Topic_HTML/HTML_Id.md create mode 100644 10_Wiki/Topic_HTML/HTML_Iframes.md create mode 100644 10_Wiki/Topic_HTML/HTML_Images.md create mode 100644 10_Wiki/Topic_HTML/HTML_Input_Attributes.md create mode 100644 10_Wiki/Topic_HTML/HTML_Input_Form_Attributes.md create mode 100644 10_Wiki/Topic_HTML/HTML_Input_Types.md create mode 100644 10_Wiki/Topic_HTML/HTML_Introduction.md create mode 100644 10_Wiki/Topic_HTML/HTML_JavaScript.md create mode 100644 10_Wiki/Topic_HTML/HTML_Layout.md create mode 100644 10_Wiki/Topic_HTML/HTML_Links.md create mode 100644 10_Wiki/Topic_HTML/HTML_Lists.md create mode 100644 10_Wiki/Topic_HTML/HTML_Media.md create mode 100644 10_Wiki/Topic_HTML/HTML_Page_Title.md create mode 100644 10_Wiki/Topic_HTML/HTML_Paragraphs.md create mode 100644 10_Wiki/Topic_HTML/HTML_Plugins.md create mode 100644 10_Wiki/Topic_HTML/HTML_Quotations.md create mode 100644 10_Wiki/Topic_HTML/HTML_Responsive.md create mode 100644 10_Wiki/Topic_HTML/HTML_SSE.md create mode 100644 10_Wiki/Topic_HTML/HTML_SVG.md create mode 100644 10_Wiki/Topic_HTML/HTML_Semantics.md create mode 100644 10_Wiki/Topic_HTML/HTML_Style_Guide.md create mode 100644 10_Wiki/Topic_HTML/HTML_Styles.md create mode 100644 10_Wiki/Topic_HTML/HTML_Symbols.md create mode 100644 10_Wiki/Topic_HTML/HTML_Tables.md create mode 100644 10_Wiki/Topic_HTML/HTML_URL_Encode.md create mode 100644 10_Wiki/Topic_HTML/HTML_Video.md create mode 100644 10_Wiki/Topic_HTML/HTML_Web_APIs.md create mode 100644 10_Wiki/Topic_HTML/HTML_Web_Storage.md create mode 100644 10_Wiki/Topic_HTML/HTML_Web_Workers.md create mode 100644 10_Wiki/Topic_HTML/HTML_YouTube.md create mode 100644 10_Wiki/Topic_HTML/HTML_vs_XHTML.md create mode 100644 10_Wiki/Topic_JavaScript/00_INDEX.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Arithmetic.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Array_Const.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Array_Iteration.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Array_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Array_Search.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Array_Sort.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Arrays.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Arrow_Function.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Assignment.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Async.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Async_Await.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Async_Callbacks.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Async_Debug.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Async_Fetch.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Async_Timeouts.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Asynchronous.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_BigInt.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Bitwise.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Booleans.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Break.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Class_Inheritance.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Class_Static.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Classes.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Code_Blocks.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Comments.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Comparisons.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Conditional_Operators.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Const.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Continue.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Control_Flow.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_DOM_Animations.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_DOM_CSS.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_DOM_Elements.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_DOM_HTML.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_DOM_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Data_Types.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Date_Formats.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Date_Get.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Date_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Date_Set.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Dates.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Destructuring.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Error_Object.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Errors.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Errors_Intro.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Errors_Silent.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Event_Listener.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Events.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Function_Arguments.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Function_Expressions.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Function_Intro.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Function_Invocation.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Function_Parameters.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Function_Return.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Functions.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Generators.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_HTML_DOM.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Hoisting.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_If.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_If_Else.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Introduction.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Iterables.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Iterators.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_Arrays.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_Data_Types.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_Objects.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_Parse.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_Stringify.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_Syntax.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_JSON_vs_XML.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Let.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Logical.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Loop_For.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Loop_While.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Loops.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Map_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Maps.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Math.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_NaN.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Number_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Number_Properties.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Numbers.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Object_Constructors.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Object_Data_Types.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Object_Display.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Object_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Object_Properties.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Object_This.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Objects.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Operators.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Output.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Primitive_Data.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Promise.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Random.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_RegExp.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Scope.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Set_Logic.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Set_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Sets.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Statements.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Strict_Mode.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_String_Methods.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_String_Search.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_String_Templates.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Strings.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Switch.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Symbols.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Syntax.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Ternary.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Type_Coercion.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Type_Conversion.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Types.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Var_Let_Const.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Variables.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_Where_To.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_toLocaleString.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_toString.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_typeof.md create mode 100644 10_Wiki/Topic_JavaScript/JavaScript_undefined.md create mode 100644 10_Wiki/Topics/Digests/Topic_Programming--Architecture.md create mode 100644 10_Wiki/Topics/Digests/Topic_Programming--Conventions.md create mode 100644 10_Wiki/Topics/Digests/Topic_Programming--Language.md create mode 100644 10_Wiki/Topics/Digests/lessons.md create mode 100644 10_Wiki/Topics/Digests/root.md create mode 100644 10_Wiki/Topics/memory/episodes/ep_2026-06-23__meet_d_meet_r_txt.json diff --git a/10_Wiki/Topic_CSS/00_INDEX.md b/10_Wiki/Topic_CSS/00_INDEX.md new file mode 100644 index 00000000..d47125aa --- /dev/null +++ b/10_Wiki/Topic_CSS/00_INDEX.md @@ -0,0 +1,298 @@ +--- +id: css-tutorial-index +title: "CSS Tutorial" +category: "Frontend" +status: "draft" +verification_status: "conceptual" +canonical_id: "" +aliases: ["CSS Tutorial", "CSS MOC", "Topic_CSS index", "CSS 목차"] +duplicate_of: "" +source_trust_level: "B" +confidence_score: 0.90 +created_at: 2026-06-23 +updated_at: 2026-06-23 +review_reason: "" +merge_history: [] +tags: ["css", "web", "frontend", "w3schools", "moc", "index"] +raw_sources: ["https://www.w3schools.com/css/"] +applied_in: [] +github_commit: "" +--- + +# [[CSS Tutorial]] + +## 🎯 한 줄 통찰 (One-line insight) +Map of Content (MOC) for the W3Schools CSS Tutorial — the root that links every CSS knowledge page in this topic folder. [S1] + +## 🧠 핵심 개념 (Core concepts) +- This folder (`Topic_CSS`) wikifies the **W3Schools CSS Tutorial** (left-sidebar tutorial menu), one knowledge page per document, in P-Reinforce v3.1 format. [S1] +- Scope: **tutorial + "Learning by examples" pages only**. The CSS Reference tables and non-knowledge meta pages (Quiz, Exercises, Certificate, Bootcamp, Syllabus) are **excluded by design**. [S1] +- **Progress:** the **entire CSS Tutorial is complete (190 docs)** — main section + CSS Advanced + Flexbox + Grid + Responsive (RWD). +- Every page roots its Knowledge Graph back to this `[[CSS Tutorial]]` node. + +## 📖 세부 내용 (Details) + +### Intro & Syntax +- [[CSS Introduction]] +- [[CSS Syntax]] +- [[CSS Selectors]] +- [[CSS Grouping Selectors]] + +### How To Add CSS +- [[CSS Add External]] +- [[CSS Add Internal]] +- [[CSS Add Inline]] +- [[CSS Multiple Style Sheets]] + +### Colors +- [[CSS Colors]] +- [[CSS RGB Colors]] +- [[CSS HEX Colors]] +- [[CSS HSL Colors]] + +### Backgrounds +- [[CSS Background Color]] +- [[CSS Background Image]] +- [[CSS Background Repeat]] +- [[CSS Background Attachment]] +- [[CSS Background Shorthand]] + +### Borders +- [[CSS Border Style]] +- [[CSS Border Width]] +- [[CSS Border Color]] +- [[CSS Border Sides]] +- [[CSS Border Shorthand]] +- [[CSS Rounded Borders]] + +### Margins & Padding +- [[CSS Margins]] +- [[CSS Margin Collapse]] +- [[CSS Padding]] +- [[CSS Padding and Box Sizing]] + +### Dimensions & Box Model +- [[CSS Height and Width]] +- [[CSS Max-width and Min-width]] +- [[CSS Box Model]] +- [[CSS Max-width]] + +### Outline +- [[CSS Outline Style]] +- [[CSS Outline Width]] +- [[CSS Outline Color]] +- [[CSS Outline Shorthand]] +- [[CSS Outline Offset]] + +### Text +- [[CSS Text Color]] +- [[CSS Text Alignment]] +- [[CSS Text Decoration]] +- [[CSS Text Decoration Styles]] +- [[CSS Text Transformation]] +- [[CSS Text Spacing]] +- [[CSS Text Shadow]] + +### Fonts +- [[CSS Font Family]] +- [[CSS Web Safe Fonts]] +- [[CSS Font Fallbacks]] +- [[CSS Font Style]] +- [[CSS Font Size]] +- [[CSS Google Fonts]] +- [[CSS Font Pairings]] +- [[CSS Font Shorthand]] + +### Icons +- [[CSS Icons Font Awesome]] +- [[CSS Icons Bootstrap]] +- [[CSS Icons Google]] + +### Links & Lists +- [[CSS Styling Links]] +- [[CSS Link Buttons]] +- [[CSS Styling Lists]] + +### Tables +- [[CSS Table Borders]] +- [[CSS Table Size]] +- [[CSS Table Alignment]] +- [[CSS Table Style]] +- [[CSS Responsive Table]] + +### Display, Position & Layout +- [[CSS Display]] +- [[CSS Visibility and Hide]] +- [[CSS Position Static and Relative]] +- [[CSS Position Fixed and Absolute]] +- [[CSS Position Sticky]] +- [[CSS Position Offsets]] +- [[CSS Z-index]] +- [[CSS Overflow]] +- [[CSS Overflow X and Y]] +- [[CSS Float]] +- [[CSS Clear and Clearfix]] +- [[CSS Float Examples]] +- [[CSS Inline-block]] +- [[CSS Center Align]] +- [[CSS Horizontal Align]] +- [[CSS Vertical Align]] + +### Selectors (Advanced) & Pseudo +- [[CSS Combinators]] +- [[CSS Pseudo-classes]] +- [[CSS Interactive Pseudo-classes]] +- [[CSS Structural Pseudo-classes]] +- [[CSS Pseudo-elements]] +- [[CSS Text Pseudo-elements]] +- [[CSS Content Pseudo-elements]] +- [[CSS Attribute Selectors]] +- [[CSS Advanced Attribute Selectors]] + +### UI Components +- [[CSS Opacity]] +- [[CSS Navigation Bar]] +- [[CSS Vertical Navbar]] +- [[CSS Horizontal Navbar]] +- [[CSS Dropdowns]] +- [[CSS Advanced Dropdowns]] +- [[CSS Image Gallery]] +- [[CSS Image Sprites]] + +### Forms +- [[CSS Styling Forms]] +- [[CSS Styling Inputs]] +- [[CSS Input Focus and Icons]] +- [[CSS Other Form Elements]] + +### Counters, Units & Cascade +- [[CSS Counters]] +- [[CSS Nested Counters]] +- [[CSS Units]] +- [[CSS Absolute Units]] +- [[CSS Relative Units]] +- [[CSS Inheritance]] +- [[CSS Specificity]] +- [[CSS Specificity Hierarchy]] +- [[CSS !important]] + +### Functions, Performance & Layout +- [[CSS Math Functions]] +- [[CSS Optimization]] +- [[CSS Accessibility]] +- [[CSS Website Layout]] + +### CSS Advanced — Borders, Backgrounds & Colors +- [[CSS Rounded Corners]] +- [[CSS Border Images]] +- [[CSS Multiple Backgrounds]] +- [[CSS Background Size]] +- [[CSS Background Origin]] +- [[CSS Background Clip]] +- [[CSS Colors (CSS3)]] +- [[CSS Color Keywords]] + +### CSS Advanced — Gradients, Shadows & Effects +- [[CSS Linear Gradients]] +- [[CSS Radial Gradients]] +- [[CSS Conic Gradients]] +- [[CSS Text Shadow Effects]] +- [[CSS Box Shadow]] +- [[CSS Text Effects]] +- [[CSS Custom Fonts]] + +### CSS Advanced — Transforms, Transitions & Animations +- [[CSS 2D Transforms]] +- [[CSS 2D Transform Scale]] +- [[CSS 2D Transform Skew and Matrix]] +- [[CSS 3D Transforms]] +- [[CSS Transitions]] +- [[CSS Transition Timing]] +- [[CSS Animations]] +- [[CSS Animation Timing]] +- [[CSS Animation Properties]] + +### CSS Advanced — Images & UI +- [[CSS Tooltips]] +- [[CSS Tooltip Arrows]] +- [[CSS Image Styling]] +- [[CSS Image Effects]] +- [[CSS Image Hover Overlays]] +- [[CSS Image Modal]] +- [[CSS Image Centering]] +- [[CSS Image Filters]] +- [[CSS Image Shapes]] +- [[CSS object-fit]] +- [[CSS object-position]] +- [[CSS Masking with PNG]] +- [[CSS Masking with Gradients]] +- [[CSS Masking with SVG]] +- [[CSS Styling Buttons]] +- [[CSS Button Hover Effects]] +- [[CSS Button Groups]] +- [[CSS Pagination]] +- [[CSS Pagination Styles]] +- [[CSS Multiple Columns]] +- [[CSS Multiple Column Rules]] +- [[CSS User Interface]] + +### CSS Advanced — Variables, @property, Box Sizing & Media Queries +- [[CSS Variables var()]] +- [[CSS Overriding Variables]] +- [[CSS Variables and JavaScript]] +- [[CSS Variables in Media Queries]] +- [[CSS @property]] +- [[CSS Box Sizing]] +- [[CSS Media Queries]] +- [[CSS Media Queries Examples]] + +### CSS Flexbox +- [[CSS Flexbox Intro]] +- [[CSS Flexbox Container]] +- [[CSS Flexbox Justify Content]] +- [[CSS Flexbox Align Items]] +- [[CSS Flex Items]] +- [[CSS Flexbox Responsive]] + +### CSS Grid +- [[CSS Grid Intro]] +- [[CSS Grid Container]] +- [[CSS Grid Tracks]] +- [[CSS Grid Gaps]] +- [[CSS Grid Align]] +- [[CSS Grid Items]] +- [[CSS Grid Item Named]] +- [[CSS Grid Item Align]] +- [[CSS Grid Item Order]] +- [[CSS Grid 12-column Layout]] +- [[CSS @supports]] + +### CSS Responsive (RWD) +- [[CSS RWD Intro]] +- [[CSS RWD Viewport]] +- [[CSS RWD Grid View]] +- [[CSS RWD Media Queries]] +- [[CSS RWD Images]] +- [[CSS RWD Videos]] + +## 🛠️ 적용 사례 (Applied in summary) +190 knowledge documents generated for the complete CSS Tutorial (main section + Advanced + Flexbox + Grid + Responsive), all grounded in the corresponding W3Schools pages. + +## ✅ 검증 상태 및 신뢰도 +- **상태:** draft +- **검증 단계:** conceptual +- **출처 신뢰도:** B (W3Schools — widely used educational reference) +- **신뢰 점수:** 0.90 +- **중복 검사 결과:** 신규 생성 (New discovery) + +## 🔗 지식 그래프 (Knowledge Graph) +- **상위/루트:** [[10_Wiki]] +- **관련 개념:** [[CSS Introduction]], [[CSS Box Model]], [[CSS Selectors]], [[HTML Tutorial]] +- **참조 맥락:** Entry point for the W3Schools CSS knowledge set; sits alongside [[HTML Tutorial]]; future Topic_JavaScript / Topic_SQL folders will join them. + +## 📚 출처 (Sources) +- [S1] W3Schools — CSS Tutorial — https://www.w3schools.com/css/ + +## 📝 변경 이력 (Change history) +- 2026-06-23: Created CSS Tutorial MOC and linked the 112 main-section docs; Advanced/Flexbox/Grid/Responsive marked pending (Astra wiki-curation, P-Reinforce v3.1 format). +- 2026-06-23: Completed CSS Advanced + Flexbox + Grid + Responsive (77 docs) and linked all sections; CSS Tutorial now complete at 190 docs. diff --git a/10_Wiki/Topic_CSS/CSS_2D_Transforms.md b/10_Wiki/Topic_CSS/CSS_2D_Transforms.md new file mode 100644 index 00000000..83c3f49c --- /dev/null +++ b/10_Wiki/Topic_CSS/CSS_2D_Transforms.md @@ -0,0 +1,141 @@ +--- +id: css-2d-transforms +title: "CSS 2D Transforms" +category: "Frontend" +status: "draft" +verification_status: "conceptual" +canonical_id: "" +aliases: ["transform", "CSS 2D transforms", "translate", "rotate", "scale skew matrix"] +duplicate_of: "" +source_trust_level: "B" +confidence_score: 0.86 +created_at: 2026-06-23 +updated_at: 2026-06-23 +review_reason: "" +merge_history: [] +tags: ["css", "web", "frontend", "w3schools", "transforms", "transform", "2d-transforms"] +raw_sources: ["https://www.w3schools.com/css/css3_2dtransforms.asp"] +applied_in: [] +github_commit: "" +--- + +# [[CSS 2D Transforms]] + +## 🎯 한 줄 통찰 (One-line insight) +The CSS `transform` property applies 2D (or 3D) transformations to an element — letting you rotate, scale, move, and skew it — through methods such as `translate()`, `rotate()`, `scale()`, `skew()`, and `matrix()`. [S1] + +## 🧠 핵심 개념 (Core concepts) +- **`transform` applies a transformation** — the `transform` property applies a 2D or 3D transformation to an element, allowing you to rotate, scale, move, and skew it. [S1] +- **2D transform methods** — CSS supports `translate()`, `rotate()`, `scaleX()`, `scaleY()`, `scale()`, `skewX()`, `skewY()`, `skew()`, and `matrix()`. [S1] +- **`translate()` moves** — the `translate()` method moves an element from its current position according to the X-axis and Y-axis parameters given. [S1] +- **`rotate()` rotates** — the `rotate()` method rotates an element clockwise or counter-clockwise by a given degree; negative values rotate counter-clockwise. [S1] +- **`matrix()` combines methods** — `matrix()` defines a 2D transformation using a matrix of six values, combining all the 2D transform methods. [S1] + +## 🧩 추출된 패턴 (Extracted patterns) +- **Move pattern** — `transform: translate(x, y);`. [S1] +- **Rotate pattern** — `transform: rotate();` (negative degree = counter-clockwise). [S1] +- **Method-vocabulary pattern** — single-axis variants (`translateX/Y`, `scaleX/Y`, `skewX/Y`) and combined forms (`scale`, `skew`, `matrix`) cover the full 2D transform set. [S1] + +## 📖 세부 내용 (Details) +**Introduction** [S1] +The CSS `transform` property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, and skew elements. + +**Available 2D transform methods** [S1] +`translate()`, `rotate()`, `scaleX()`, `scaleY()`, `scale()`, `skewX()`, `skewY()`, `skew()`, `matrix()`. + +**The `translate()` Method** [S1] +The `translate()` method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the element 50px to the right and 100px down: +```css +div { + transform: translate(50px, 100px); +} +``` + +**The `rotate()` Method** [S1] +The `rotate()` method rotates an element clockwise or counter-clockwise according to a given degree. Rotate the element 20 degrees clockwise: +```css +div { + transform: rotate(20deg); +} +``` +Using negative values will rotate the element counter-clockwise: +```css +div { + transform: rotate(-20deg); +} +``` + +**The `scale()`, `skew()`, and `matrix()` Methods** +The W3Schools 2D Transforms page lists these methods and describes them in its reference table (below), but their dedicated worked code examples live on separate follow-up pages and are not present on this page. Code examples for `scale`, `skew`, and `matrix` on this page: Not found in source. + +**CSS Transform Properties table** [S1] + +| Property | Description | +|---|---| +| `transform` | Applies a 2D or 3D transformation to an element | +| `transform-origin` | Allows you to change the position on transformed elements | + +**2D Transform Methods/Functions table** [S1] + +| Function | Description | +|---|---| +| `matrix()` | Defines a 2D transformation, using a matrix of six values | +| `translate()` | Defines a 2D translation, moving the element along the X- and the Y-axis | +| `translateX()` | Defines a 2D translation, moving the element along the X-axis | +| `translateY()` | Defines a 2D translation, moving the element along the Y-axis | +| `scale()` | Defines a 2D scale transformation, scaling the element's width and height | +| `scaleX()` | Defines a 2D scale transformation, scaling the element's width | +| `scaleY()` | Defines a 2D scale transformation, scaling the element's height | +| `rotate()` | Defines a 2D rotation, the angle is specified in the parameter | +| `skew()` | Defines a 2D skew transformation along the X- and the Y-axis | +| `skewX()` | Defines a 2D skew transformation along the X-axis | +| `skewY()` | Defines a 2D skew transformation along the Y-axis | + +## 🛠️ 적용 사례 (Applied in summary) +The page's own demonstrations (a `div` moved with `translate()` and rotated with `rotate()`, including the negative-degree counter-clockwise case) serve as the applied examples. No external project/commit applications found in the source. + +## 💻 코드 패턴 (Code patterns) +Move an element (language: CSS): +```css +div { + transform: translate(50px, 100px); +} +``` +Rotate clockwise / counter-clockwise: +```css +div { + transform: rotate(20deg); +} +``` +```css +div { + transform: rotate(-20deg); +} +``` + +## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria) +- **Single-axis vs combined methods** — use `translateX`/`translateY`, `scaleX`/`scaleY`, `skewX`/`skewY` to act on one axis, or the combined `translate`/`scale`/`skew` forms to act on both. [S1] +- **Individual methods vs `matrix()`** — the readable methods (`translate`, `rotate`, `scale`, `skew`) cover common cases; `matrix()` packs all 2D transformations into a single six-value matrix. [S1] +- **Positive vs negative `rotate()`** — positive degrees rotate clockwise, negative degrees counter-clockwise. [S1] + +## ⚖️ 모순 및 업데이트 (Contradictions & updates) +No contradictions found in the source. + +## ✅ 검증 상태 및 신뢰도 +- **상태:** draft +- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능) +- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body) +- **신뢰 점수:** 0.86 +- **중복 검사 결과:** 신규 생성 (New discovery) +- **참고:** Worked code for `scale`/`skew`/`matrix` was not on this page (lives on follow-up pages); recorded as "Not found in source" rather than invented. + +## 🔗 지식 그래프 (Knowledge Graph) +- **상위/루트:** [[CSS Tutorial]] +- **관련 개념:** [[CSS Box Shadow]], [[CSS Text Effects]], [[CSS Linear Gradients]] +- **참조 맥락:** Referenced when visually moving, rotating, scaling, or skewing elements (hover effects, layout tweaks, animations). + +## 📚 출처 (Sources) +- [S1] W3Schools — CSS 2D Transforms — https://www.w3schools.com/css/css3_2dtransforms.asp + +## 📝 변경 이력 (Change history) +- 2026-06-23: Initial draft synthesized from the W3Schools "CSS 2D Transforms" page (Astra wiki-curation, P-Reinforce v3.1 format). diff --git a/10_Wiki/Topic_CSS/CSS_2D_Transforms_Scale.md b/10_Wiki/Topic_CSS/CSS_2D_Transforms_Scale.md new file mode 100644 index 00000000..2bdbee7d --- /dev/null +++ b/10_Wiki/Topic_CSS/CSS_2D_Transforms_Scale.md @@ -0,0 +1,120 @@ +--- +id: css-2d-transform-scale +title: "CSS 2D Transform Scale" +category: "Frontend" +status: "draft" +verification_status: "conceptual" +canonical_id: "" +aliases: ["scale()", "scaleX()", "scaleY()", "CSS scale", "2D scale transform", "resize element"] +duplicate_of: "" +source_trust_level: "B" +confidence_score: 0.89 +created_at: 2026-06-23 +updated_at: 2026-06-23 +review_reason: "" +merge_history: [] +tags: ["css", "web", "frontend", "w3schools", "transform", "2d-transform", "scale"] +raw_sources: ["https://www.w3schools.com/css/css3_2dtransforms_scale.asp"] +applied_in: [] +github_commit: "" +--- + +# [[CSS 2D Transform Scale]] + +## 🎯 한 줄 통찰 (One-line insight) +The CSS `scale()` family of 2D transform functions increases or decreases the size of an element according to the parameters given for width and height, where values above 1 enlarge and values between 0 and 1 shrink. [S1] + +## 🧠 핵심 개념 (Core concepts) +- **`scale()`** — increases or decreases the size of an element (according to the parameters given for the width and height). [S1] +- **`scaleX()`** — increases or decreases the width of an element. [S1] +- **`scaleY()`** — increases or decreases the height of an element. [S1] +- **Multiplier semantics** — numeric multipliers greater than 1 enlarge the element; values between 0 and 1 reduce it. [S1] + +## 🧩 추출된 패턴 (Extracted patterns) +- **Proportional resize** — `scale(x, y)` takes two factors: the first scales width, the second scales height. [S1] +- **Single-axis resize** — use `scaleX(n)` to resize width only, or `scaleY(n)` to resize height only. [S1] + +## 📖 세부 내용 (Details) +**The CSS `scale()` Function** +The `scale()` function increases or decreases the size of an element (according to the parameters given for the width and height). The following example increases the `
` element to two times of its original width, and three times of its original height: [S1] +```css +div { + transform: scale(2, 3); +} +``` +The next example decreases the `
` element to be half of its original width and height: [S1] +```css +div { + transform: scale(0.5, 0.5); +} +``` + +**The CSS `scaleX()` Function** +The `scaleX()` function increases or decreases the width of an element. The following example increases the `
` element to two times of its original width: [S1] +```css +div { + transform: scaleX(2); +} +``` +This example decreases the `
` element to be half of its original width: [S1] +```css +div { + transform: scaleX(0.5); +} +``` + +**The CSS `scaleY()` Function** +The `scaleY()` function increases or decreases the height of an element. The following example increases the `
` element to three times of its original height: [S1] +```css +div { + transform: scaleY(3); +} +``` +This example decreases the `
` element to be half of its original height: [S1] +```css +div { + transform: scaleY(0.5); +} +``` + +## 🛠️ 적용 사례 (Applied in summary) +The page's own demonstrations apply scaling to a `
`: enlarging (`scale(2, 3)`, `scaleX(2)`, `scaleY(3)`) and shrinking (`scale(0.5, 0.5)`, `scaleX(0.5)`, `scaleY(0.5)`). No external project/commit applications found in the source. + +## 💻 코드 패턴 (Code patterns) +Two-axis scale (language: CSS): +```css +div { + transform: scale(2, 3); +} +``` +Single-axis scale: +```css +div { + transform: scaleX(2); +} + +div { + transform: scaleY(3); +} +``` + +## ⚖️ 모순 및 업데이트 (Contradictions & updates) +No contradictions found in the source. + +## ✅ 검증 상태 및 신뢰도 +- **상태:** draft +- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능) +- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body) +- **신뢰 점수:** 0.89 +- **중복 검사 결과:** 신규 생성 (New discovery) + +## 🔗 지식 그래프 (Knowledge Graph) +- **상위/루트:** [[CSS Tutorial]] +- **관련 개념:** [[CSS 2D Transforms Skew]], [[CSS 3D Transforms]], [[CSS Transitions]] +- **참조 맥락:** Part of the CSS 2D transforms family; used to resize elements without changing their layout box flow. + +## 📚 출처 (Sources) +- [S1] W3Schools — CSS 2D Transform Scale — https://www.w3schools.com/css/css3_2dtransforms_scale.asp + +## 📝 변경 이력 (Change history) +- 2026-06-23: Initial draft synthesized from the W3Schools "CSS 2D Transform Scale" page (Astra wiki-curation, P-Reinforce v3.1 format). diff --git a/10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.md b/10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.md new file mode 100644 index 00000000..e4ce69e0 --- /dev/null +++ b/10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.md @@ -0,0 +1,137 @@ +--- +id: css-2d-transform-skew-and-matrix +title: "CSS 2D Transform Skew and Matrix" +category: "Frontend" +status: "draft" +verification_status: "conceptual" +canonical_id: "" +aliases: ["skew()", "skewX()", "skewY()", "matrix()", "CSS skew", "2D matrix transform"] +duplicate_of: "" +source_trust_level: "B" +confidence_score: 0.88 +created_at: 2026-06-23 +updated_at: 2026-06-23 +review_reason: "" +merge_history: [] +tags: ["css", "web", "frontend", "w3schools", "transform", "2d-transform", "skew", "matrix"] +raw_sources: ["https://www.w3schools.com/css/css3_2dtransforms_skew.asp"] +applied_in: [] +github_commit: "" +--- + +# [[CSS 2D Transform Skew and Matrix]] + +## 🎯 한 줄 통찰 (One-line insight) +The `skewX()`, `skewY()`, and `skew()` functions slant an element along the X- and/or Y-axis by a given angle, while `matrix()` combines all 2D transform methods (translate, rotate, scale, skew) into one six-value declaration. [S1] + +## 🧠 핵심 개념 (Core concepts) +- **`skewX()`** — skews an element along the X-axis by the given angle. [S1] +- **`skewY()`** — skews an element along the Y-axis by the given angle. [S1] +- **`skew()`** — skews an element along both the X- and Y-axis; if the second parameter is omitted it defaults to zero. [S1] +- **`matrix()`** — combines all the 2D transform methods into one, taking six parameters in the order `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`. [S1] + +## 🧩 추출된 패턴 (Extracted patterns) +- **Angular slant** — skew functions take angle values (`deg`); `skew(ax, ay)` slants along both axes at once. [S1] +- **Unified transform** — `matrix()` packs scale, skew, and translate into a single function call for compact combined transforms. [S1] + +## 📖 세부 내용 (Details) +**The CSS `skewX()` Function** +The `skewX()` function skews an element along the X-axis by the given angle. The following example skews the `
` element 20 degrees along the X-axis: [S1] +```css +div { + transform: skewX(20deg); +} +``` + +**The CSS `skewY()` Function** +The `skewY()` function skews an element along the Y-axis by the given angle. The following example skews the `
` element 20 degrees along the Y-axis: [S1] +```css +div { + transform: skewY(20deg); +} +``` + +**The CSS `skew()` Function** +The `skew()` function skews an element along the X- and Y-axis by the given angles. The following example skews the `
` element 20 degrees along the X-axis, and 10 degrees along the Y-axis: [S1] +```css +div { + transform: skew(20deg, 10deg); +} +``` +If the second parameter is not specified, it has a zero value. So, the following example skews the `
` element 20 degrees along the X-axis: [S1] +```css +div { + transform: skew(20deg); +} +``` + +**The CSS `matrix()` Function** +The `matrix()` function combines all the 2D transform methods into one. The `matrix()` method takes six parameters, containing mathematic functions, which allow you to rotate, scale, move (translate), and skew elements. The parameters are as follow: `matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())`. [S1] +```css +div { + transform: matrix(1, -0.3, 0, 1, 0, 0); +} +``` + +**CSS Transform Properties** +The following table lists the CSS transform properties: [S1] + +| Property | Description | +|----------|-------------| +| `transform` | Applies a 2D or 3D transformation to an element | +| `transform-origin` | Allows you to change the position on transformed elements | + +**CSS 2D Transform Functions** +The following table lists the 2D transform functions: [S1] + +| Function | Description | +|----------|-------------| +| `matrix(n,n,n,n,n,n)` | Defines a 2D transformation, using a matrix of six values | +| `translate(x,y)` | Defines a 2D translation, moving the element along the X- and Y-axis | +| `translateX(n)` | Defines a 2D translation, moving the element along the X-axis | +| `translateY(n)` | Defines a 2D translation, moving the element along the Y-axis | +| `scale(x,y)` | Defines a 2D scale transformation, changing the element's width and height | +| `scaleX(n)` | Defines a 2D scale transformation, changing the element's width | +| `scaleY(n)` | Defines a 2D scale transformation, changing the element's height | +| `rotate(angle)` | Defines a 2D rotation, the angle is specified in the parameter | +| `skew(x-angle,y-angle)` | Defines a 2D skew transformation along the X- and the Y-axis | +| `skewX(angle)` | Defines a 2D skew transformation along the X-axis | +| `skewY(angle)` | Defines a 2D skew transformation along the Y-axis | + +## 🛠️ 적용 사례 (Applied in summary) +The page applies skewing to a `
` (`skewX(20deg)`, `skewY(20deg)`, `skew(20deg, 10deg)`, `skew(20deg)`) and demonstrates a combined transform via `matrix(1, -0.3, 0, 1, 0, 0)`. No external project/commit applications found in the source. + +## 💻 코드 패턴 (Code patterns) +Skew along axes (language: CSS): +```css +div { + transform: skew(20deg, 10deg); +} +``` +Combined matrix transform: +```css +div { + transform: matrix(1, -0.3, 0, 1, 0, 0); +} +``` + +## ⚖️ 모순 및 업데이트 (Contradictions & updates) +No contradictions found in the source. + +## ✅ 검증 상태 및 신뢰도 +- **상태:** draft +- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능) +- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body) +- **신뢰 점수:** 0.88 +- **중복 검사 결과:** 신규 생성 (New discovery) + +## 🔗 지식 그래프 (Knowledge Graph) +- **상위/루트:** [[CSS Tutorial]] +- **관련 개념:** [[CSS 2D Transform Scale]], [[CSS 3D Transforms]], [[CSS Transitions]] +- **참조 맥락:** Completes the CSS 2D transform set; `matrix()` is the low-level form into which the other 2D functions compile. + +## 📚 출처 (Sources) +- [S1] W3Schools — CSS 2D Transform Skew and Matrix — https://www.w3schools.com/css/css3_2dtransforms_skew.asp + +## 📝 변경 이력 (Change history) +- 2026-06-23: Initial draft synthesized from the W3Schools "CSS 2D Transform Skew and Matrix" page (Astra wiki-curation, P-Reinforce v3.1 format). diff --git a/10_Wiki/Topic_CSS/CSS_3D_Transforms.md b/10_Wiki/Topic_CSS/CSS_3D_Transforms.md new file mode 100644 index 00000000..7c7152c9 --- /dev/null +++ b/10_Wiki/Topic_CSS/CSS_3D_Transforms.md @@ -0,0 +1,128 @@ +--- +id: css-3d-transforms +title: "CSS 3D Transforms" +category: "Frontend" +status: "draft" +verification_status: "conceptual" +canonical_id: "" +aliases: ["rotateX()", "rotateY()", "rotateZ()", "CSS 3D transform", "3D rotation", "perspective"] +duplicate_of: "" +source_trust_level: "B" +confidence_score: 0.88 +created_at: 2026-06-23 +updated_at: 2026-06-23 +review_reason: "" +merge_history: [] +tags: ["css", "web", "frontend", "w3schools", "transform", "3d-transform", "rotate"] +raw_sources: ["https://www.w3schools.com/css/css3_3dtransforms.asp"] +applied_in: [] +github_commit: "" +--- + +# [[CSS 3D Transforms]] + +## 🎯 한 줄 통찰 (One-line insight) +CSS 3D transforms let you rotate an element around its X-, Y-, or Z-axis using `rotateX()`, `rotateY()`, and `rotateZ()`, extending the `transform` property into three-dimensional space. [S1] + +## 🧠 핵심 개념 (Core concepts) +- **`transform` property** — applies a 2D or 3D transformation to an element. [S1] +- **`rotateX()`** — rotates an element around its X-axis at a given degree. [S1] +- **`rotateY()`** — rotates an element around its Y-axis at a given degree. [S1] +- **`rotateZ()`** — rotates an element around its Z-axis at a given degree. [S1] + +## 🧩 추출된 패턴 (Extracted patterns) +- **Axis-specific rotation** — pick the function by axis (`rotateX`/`rotateY`/`rotateZ`) and pass an angle in degrees. [S1] +- **Property + function pairing** — 3D effects combine the `transform` property with dedicated 3D functions, plus supporting properties such as `perspective`, `transform-style`, and `backface-visibility`. [S1] + +## 📖 세부 내용 (Details) +**The CSS `rotateX()` Function** +The `rotateX()` function rotates an element around its X-axis at a given degree: [S1] +```css +#myDiv { + transform: rotateX(150deg); +} +``` + +**The CSS `rotateY()` Function** +The `rotateY()` function rotates an element around its Y-axis at a given degree: [S1] +```css +#myDiv { + transform: rotateY(150deg); +} +``` + +**The CSS `rotateZ()` Function** +The `rotateZ()` function rotates an element around its Z-axis at a given degree: [S1] +```css +#myDiv { + transform: rotateZ(90deg); +} +``` + +**CSS Transform Properties** +The following table lists the CSS transform properties: [S1] + +| Property | Description | +|----------|-------------| +| `transform` | Applies a 2D or 3D transformation to an element | +| `transform-origin` | Allows you to change the position on transformed elements | +| `transform-style` | Specifies how nested elements are rendered in 3D space | +| `perspective` | Specifies the perspective on how 3D elements are viewed | +| `perspective-origin` | Specifies the bottom position of 3D elements | +| `backface-visibility` | Defines whether or not an element should be visible when not facing the screen | + +**CSS 3D Transform Functions** +The following table lists the 3D transform functions: [S1] + +| Function | Description | +|----------|-------------| +| `matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)` | Defines a 3D transformation, using a 4x4 matrix of 16 values | +| `translate3d(x,y,z)` | Defines a 3D translation | +| `translateZ(z)` | Defines a 3D translation, using only the value for the Z-axis | +| `scale3d(x,y,z)` | Defines a 3D scale transformation | +| `scaleZ(z)` | Defines a 3D scale transformation by giving a value for the Z-axis | +| `rotate3d(x,y,z,angle)` | Defines a 3D rotation | +| `rotateX(angle)` | Defines a 3D rotation along the X-axis | +| `rotateY(angle)` | Defines a 3D rotation along the Y-axis | +| `rotateZ(angle)` | Defines a 3D rotation along the Z-axis | +| `perspective(n)` | Defines a perspective view for a 3D transformed element | + +## 🛠️ 적용 사례 (Applied in summary) +The page applies 3D rotation to an element with id `myDiv`: `rotateX(150deg)`, `rotateY(150deg)`, and `rotateZ(90deg)`. No external project/commit applications found in the source. + +## 💻 코드 패턴 (Code patterns) +Rotate around each axis (language: CSS): +```css +#myDiv { + transform: rotateX(150deg); +} + +#myDiv { + transform: rotateY(150deg); +} + +#myDiv { + transform: rotateZ(90deg); +} +``` + +## ⚖️ 모순 및 업데이트 (Contradictions & updates) +No contradictions found in the source. + +## ✅ 검증 상태 및 신뢰도 +- **상태:** draft +- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능) +- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body) +- **신뢰 점수:** 0.88 +- **중복 검사 결과:** 신규 생성 (New discovery) + +## 🔗 지식 그래프 (Knowledge Graph) +- **상위/루트:** [[CSS Tutorial]] +- **관련 개념:** [[CSS 2D Transform Scale]], [[CSS 2D Transform Skew and Matrix]], [[CSS Transitions]] +- **참조 맥락:** Extends the 2D transform family into 3D space; pairs with perspective and backface-visibility for depth effects. + +## 📚 출처 (Sources) +- [S1] W3Schools — CSS 3D Transforms — https://www.w3schools.com/css/css3_3dtransforms.asp + +## 📝 변경 이력 (Change history) +- 2026-06-23: Initial draft synthesized from the W3Schools "CSS 3D Transforms" page (Astra wiki-curation, P-Reinforce v3.1 format). diff --git a/10_Wiki/Topic_CSS/CSS_Accessibility.md b/10_Wiki/Topic_CSS/CSS_Accessibility.md new file mode 100644 index 00000000..a9c70b1b --- /dev/null +++ b/10_Wiki/Topic_CSS/CSS_Accessibility.md @@ -0,0 +1,106 @@ +--- +id: css-accessibility +title: "CSS Accessibility" +category: "Frontend" +status: "draft" +verification_status: "conceptual" +canonical_id: "" +aliases: ["CSS a11y", "accessible CSS", "focus styles", "color contrast", "prefers-reduced-motion"] +duplicate_of: "" +source_trust_level: "B" +confidence_score: 0.88 +created_at: 2026-06-23 +updated_at: 2026-06-23 +review_reason: "" +merge_history: [] +tags: ["css", "web", "frontend", "w3schools", "accessibility", "a11y", "focus"] +raw_sources: ["https://www.w3schools.com/css/css_accessibility.asp"] +applied_in: [] +github_commit: "" +--- + +# [[CSS Accessibility]] + +## 🎯 한 줄 통찰 (One-line insight) +Accessible CSS rests on a few habits: high color contrast, readable fonts, visible focus indicators, semantic HTML, and respecting user preferences such as reduced motion. [S1] + +## 🧠 핵심 개념 (Core concepts) +- **High color contrast** — ensure foreground text stands out strongly against the background. [S1] +- **Readable typography** — use legible font families, adequate font sizes, and generous line height. [S1] +- **Visible focus indicators** — interactive elements must have a clear visual focus style. [S1] +- **Don't hide focus** — never remove the focus outline without providing a visible replacement. [S1] +- **Semantic HTML** — style semantic elements (`