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 (`