2nd/10_Wiki/Dev/Topic_CSS/00_INDEX.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-tutorial-index	CSS Tutorial	Frontend	draft	conceptual		CSS Tutorial CSS MOC Topic_CSS index CSS 목차		B	0.90	2026-06-23	2026-06-23			css web frontend w3schools moc index	https://www.w3schools.com/css/

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.