bluemsi/2nd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(10_Wiki): W3Schools 위키화 — HTML/CSS/JavaScript(core)

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
g1nation
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
10_Wiki/Topic_CSS/00_INDEX.md
+298
View File
@@ -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.
10_Wiki/Topic_CSS/CSS_2D_Transforms.md
+141
View File
@@ -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(<deg>);` (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).
10_Wiki/Topic_CSS/CSS_2D_Transforms_Scale.md
+120
View File
@@ -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 `<div>` 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 `<div>` 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 `<div>` element to two times of its original width: [S1]
```css
div {
transform: scaleX(2);
}
```
This example decreases the `<div>` 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 `<div>` element to three times of its original height: [S1]
```css
div {
transform: scaleY(3);
}
```
This example decreases the `<div>` 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 `<div>`: 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).
10_Wiki/Topic_CSS/CSS_2D_Transforms_Skew.md
+137
View File
@@ -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 `<div>` 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 `<div>` 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 `<div>` 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 `<div>` 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 `<div>` (`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).
10_Wiki/Topic_CSS/CSS_3D_Transforms.md
+128
View File
@@ -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).
10_Wiki/Topic_CSS/CSS_Accessibility.md
+106
View File
@@ -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 (`<nav>`, `<aside>`) rather than generic `<div>`s. [S1]
- **Respect user preferences** — honor settings like reduced motion. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Focus-ring pattern** — apply a visible `outline` on `:focus` for links, buttons, and inputs. [S1]
- **Reduced-motion pattern** — wrap a global animation/transition kill-switch in a `prefers-reduced-motion: reduce` media query. [S1]
## 📖 세부 내용 (Details)
**High color contrast.** Use a strong contrast between text and background. The good example uses an `#ffffff` background with `#000000` text; the bad example uses an `#eeeeee` background with `#cccccc` text (too low contrast). [S1]
**Font, size, and line height.** Choose readable typography. The good example uses Arial/sans-serif at `1rem` with `1.6` line-height; the bad example uses Georgia/serif at `12px`, italic, small-caps variant, with `90%` line-height. [S1]
**Visible focus indicators.** Always use the `:focus` pseudo-class to ensure that interactive elements (like links, buttons, input fields) have a clear visual focus style. [S1]
```css
a:focus, button:focus, input:focus {
outline: 2px solid orange;
}
```
**Avoid hiding focus.** Never use `outline: none` without replacement styling. Use a visible alternative such as `outline: 2px solid orange`. [S1]
**Semantic HTML with CSS.** Style `<nav>` and `<aside>` elements (for example with backgrounds) instead of generic `<div>` tags, so the document remains meaningful to assistive technology. [S1]
**Respect user preferences (reduced motion).** Honor a user's reduced-motion preference by disabling animations and transitions inside a media query. [S1]
```css
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
```
(Note: the exact color/font example code boxes for the contrast and typography sections were described but not captured verbatim from the source. — Not found in source.)
## 🛠️ 적용 사례 (Applied in summary)
The page's applied demonstrations contrast accessible vs inaccessible choices (white-on-black vs grey-on-light-grey; Arial 1rem/1.6 vs Georgia 12px italic), add a visible orange focus outline to links/buttons/inputs, and disable motion for users who request reduced motion. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Visible focus ring (language: CSS):
```css
a:focus, button:focus, input:focus {
outline: 2px solid orange;
}
```
Respect reduced-motion preference (language: CSS):
```css
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
```
## ⚖️ 모순 및 업데이트 (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 !important]], [[CSS Optimization]], [[CSS Website Layout]]
- **참조 맥락:** Consulted when making a page usable for keyboard users, low-vision users, and people sensitive to motion.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Accessibility — https://www.w3schools.com/css/css_accessibility.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Accessibility" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Add_External.md
+122
View File
@@ -0,0 +1,122 @@
---
id: css-add-external
title: "CSS Add External"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["external CSS", "external style sheet", "link stylesheet", "mystyle.css", "how to add CSS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "stylesheet"]
raw_sources: ["https://www.w3schools.com/css/css_howto.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Add External]]
## 🎯 한 줄 통찰 (One-line insight)
There are three ways to insert CSS — external, internal, and inline; an external style sheet lets you change the look of an entire website by editing just one `.css` file, referenced from each page via a `<link>` element in the head. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Three ways to insert CSS** — External CSS (link to an external `.css` file), Internal CSS (use the `<style>` element in the head section), and Inline CSS (use the `style` attribute on HTML elements). [S1]
- **External CSS power** — with an external style sheet, you can change the look of an entire website by changing just one file. [S1]
- **Reference mechanism** — each HTML page must include a reference to the external style sheet file inside the `<link>` element, inside the head section. [S1]
- **No space before units** — do not add a space between the property value and the unit (e.g. `20px`, not `20 px`). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Single source of truth** — one external `.css` file linked from many pages centralizes site-wide styling. [S1]
- **Head linkage** — `<link rel="stylesheet" href="…css">` inside `<head>` connects a page to its stylesheet. [S1]
## 📖 세부 내용 (Details)
CSS can be added to HTML documents in 3 ways: [S1]
1. **External CSS** — link to an external `.css` file.
2. **Internal CSS** — use the `<style>` element in the head section.
3. **Inline CSS** — use the `style` attribute on HTML elements.
**External CSS** — with an external style sheet, you can change the look of an entire website by changing just one file! Each HTML page must include a reference to the external style sheet file inside the `<link>` element, inside the head section. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
An external style sheet can be written in any text editor and must be saved with a `.css` extension. The external `.css` file (`mystyle.css`) should not contain any HTML tags — it holds only style rules: [S1]
```css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
```
**Note:** Do not add a space between the property value and the unit. [S1]
- Incorrect (space): `margin-left: 20 px;`
- Correct (no space): `margin-left: 20px;`
## 🛠️ 적용 사례 (Applied in summary)
The page's own example links an HTML page to `mystyle.css`, which styles `body` and `h1`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Linking an external stylesheet from the head (language: HTML):
```html
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
```
The external stylesheet file (language: CSS):
```css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
| Method | How it is added | Best use |
| --- | --- | --- |
| External CSS | `<link>` to a `.css` file in `<head>` | Change an entire website's look by editing one file [S1] |
| Internal CSS | `<style>` element in the head section | A single HTML page with a unique style [S1] |
| Inline CSS | `style` attribute on an HTML element | A unique style for a single element [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.9
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Add Internal]], [[CSS Add Inline]], [[CSS Multiple Style Sheets]]
- **참조 맥락:** Referenced when connecting an HTML page to a centralized, site-wide stylesheet.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Add External — https://www.w3schools.com/css/css_howto.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Add External" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Add_Inline.md
+92
View File
@@ -0,0 +1,92 @@
---
id: css-add-inline
title: "CSS Add Inline"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["inline CSS", "inline style", "style attribute", "element-level style", "single element styling"]
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", "stylesheet"]
raw_sources: ["https://www.w3schools.com/css/css_howto_inline.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Add Inline]]
## 🎯 한 줄 통찰 (One-line insight)
An inline style applies a unique style to a single element via its `style` attribute, but it loses many advantages of a style sheet by mixing content with presentation, so it should be used sparingly. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Purpose** — an inline style may be used to apply a unique style for a single element. [S1]
- **Mechanism** — to use inline styles, add the `style` attribute to the relevant element. [S1]
- **Content** — the `style` attribute can contain any CSS property declarations. [S1]
- **Caveat** — an inline style loses many of the advantages of a style sheet (by mixing content with presentation); use this method sparingly. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Per-element override** — attach declarations directly to one element via `style="property:value;…"`. [S1]
- **Use sparingly** — prefer external/internal sheets to keep content and presentation separate. [S1]
## 📖 세부 내용 (Details)
An inline style may be used to apply a unique style for a single element. To use inline styles, add the `style` attribute to the relevant element. The `style` attribute can contain any CSS property. [S1]
```html
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
```
Here the `<h1>` element is given blue, center-aligned text, and the `<p>` element is given red text — all directly through their `style` attributes. [S1]
**Tip:** An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own example applies inline styles to an `<h1>` (blue, centered) and a `<p>` (red). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Inline style via the style attribute (language: HTML):
```html
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
| Method | How it is added | Best use |
| --- | --- | --- |
| External CSS | `<link>` to a `.css` file | Style an entire website from one file [S1] |
| Internal CSS | `<style>` element in the head | A single page with a unique style [S1] |
| Inline CSS | `style` attribute on an element | A unique style for a single element; use sparingly [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Add External]], [[CSS Add Internal]], [[CSS Multiple Style Sheets]]
- **참조 맥락:** Referenced when styling one element directly, and as the highest-priority source in the cascade.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Add Inline — https://www.w3schools.com/css/css_howto_inline.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Add Inline" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Add_Internal.md
+111
View File
@@ -0,0 +1,111 @@
---
id: css-add-internal
title: "CSS Add Internal"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["internal CSS", "internal style sheet", "style element", "embedded CSS", "head style block"]
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", "stylesheet"]
raw_sources: ["https://www.w3schools.com/css/css_howto_internal.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Add Internal]]
## 🎯 한 줄 통찰 (One-line insight)
An internal style sheet may be used when a single HTML page has a unique style; it is defined inside a `<style>` element placed within the page's `<head>` section. [S1]
## 🧠 핵심 개념 (Core concepts)
- **When to use** — an internal style sheet may be used if one single HTML page has a unique style. [S1]
- **Where it lives** — the internal style is defined inside the `<style>` element, placed within the `<head>` section of an HTML page. [S1]
- **Scope** — the styles apply to that one page only. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Single-page styling** — embed page-specific rules in a `<style>` block in the head instead of an external file. [S1]
- **Standard rules inside** — the `<style>` block contains the same `selector { property: value; }` rules as any stylesheet. [S1]
## 📖 세부 내용 (Details)
An internal style sheet may be used if one single HTML page has a unique style. The internal style is defined inside the `<style>` element, inside the head section. [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
In this example the `body` element gets a `linen` background color, and the `h1` element is styled with `maroon` text and a 40-pixel left margin. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own example embeds a `<style>` block in the head to style `body` and `h1` for one page. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Internal style sheet in the head (language: HTML):
```html
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
| Method | Where defined | Best use |
| --- | --- | --- |
| External CSS | `<link>` to a `.css` file | Style an entire website from one file [S1] |
| Internal CSS | `<style>` element in the head | A single HTML page with a unique style [S1] |
| Inline CSS | `style` attribute on an element | A unique style for a single element [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Add External]], [[CSS Add Inline]], [[CSS Multiple Style Sheets]]
- **참조 맥락:** Referenced when one page needs its own styles without an external file.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Add Internal — https://www.w3schools.com/css/css_howto_internal.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Add Internal" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Animations.md
+153
View File
@@ -0,0 +1,153 @@
---
id: css-animations
title: "CSS Animations"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["@keyframes", "animation-name", "animation-duration", "CSS animation", "keyframe animation"]
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", "animation", "keyframes"]
raw_sources: ["https://www.w3schools.com/css/css3_animations.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Animations]]
## 🎯 한 줄 통찰 (One-line insight)
CSS animations let an element gradually change from one style to another using the `@keyframes` rule to define styles at points along the timeline, bound to an element via `animation-name` and `animation-duration`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **What it is** — an animation lets an element gradually change from one style to another. [S1]
- **`@keyframes` rule** — holds the style definitions at specific points during the animation; bind it to an element to make it work. [S1]
- **`animation-name`** — specifies a name for the animation (linking the element to a `@keyframes` block). [S1]
- **`animation-duration`** — defines how long an animation should take to complete; if not specified, no animation occurs because the default value is `0s`. [S1]
- **Keyframe addressing** — keyframes can use `from`/`to` (equivalent to `0%` and `100%`) or explicit percentages. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Define + bind** — declare a `@keyframes` block, then reference it from an element with `animation-name` and give it an `animation-duration`. [S1]
- **`from`/`to` shorthand** — `from { }` and `to { }` are equivalent to `0%` and `100%`. [S1]
- **Multi-stop keyframes** — list intermediate percentages (e.g. `25%`, `50%`, `75%`) to change properties through several stages. [S1]
## 📖 세부 내용 (Details)
**What are CSS Animations?**
An animation lets an element gradually change from one style to another. You can change as many CSS properties you want, as many times as you want. To use CSS animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times. [S1]
**CSS `animation-name` and `animation-duration`**
The `animation-name` property specifies a name for the animation. The `animation-duration` property defines how long an animation should take to complete. If the `animation-duration` property is not specified, no animation will occur, because the default value is `0s` (0 seconds). [S1]
**The `@keyframes` Rule**
When you specify CSS styles inside the `@keyframes` rule, the animation will gradually change from the current style to the new style at certain times. To get an animation to work, you must bind the animation to an element. The following example binds the "myAnimation" animation to the `<div>` element. The animation will last for 4 seconds, and it will gradually change the background-color of the `<div>` element from "red" to "yellow": [S1]
```css
/* The animation code */
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
```
**Note:** The animation-duration property defines how long time an animation should take to complete. The `from` and `to` keywords represent 0% (start) and 100% (complete). [S1]
It is also possible to use percent. By using percent, you can add as many style changes as you like. The following example will change the background-color of the `<div>` element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: [S1]
```css
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
```
The following example will change both the background-color and the position of the `<div>` element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete: [S1]
```css
@keyframes myAnimation {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page applies `@keyframes` animations to a `<div>`: a two-stop color change (red → yellow), a four-stop color sequence, and a combined color-plus-position move using `left`/`top` with `position: relative`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define keyframes and bind to an element (language: CSS):
```css
@keyframes myAnimation {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
}
```
Percentage-based multi-stop keyframes:
```css
@keyframes myAnimation {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
```
## ⚖️ 모순 및 업데이트 (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 Animation Timing]], [[CSS Animation Properties]], [[CSS Transitions]]
- **참조 맥락:** The foundation of keyframe-based animation; the timing and shorthand controls extend these basics.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Animations — https://www.w3schools.com/css/css3_animations.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Animations" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Animations_Properties.md
+213
View File
@@ -0,0 +1,213 @@
---
id: css-animation-properties
title: "CSS Animation Properties"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["animation-direction", "animation-fill-mode", "animation shorthand", "animation-play-state", "alternate", "forwards"]
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", "animation", "shorthand", "fill-mode"]
raw_sources: ["https://www.w3schools.com/css/css3_animations_properties.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Animation Properties]]
## 🎯 한 줄 통찰 (One-line insight)
`animation-direction` controls forward/backward/alternating playback, `animation-fill-mode` controls the element's style when the animation is not playing, and the `animation` shorthand packs all the individual animation properties into one declaration. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`animation-direction`** — specifies whether an animation should be played forwards, backwards, or in alternate cycles. [S1]
- **`animation-fill-mode`** — specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). [S1]
- **`animation` shorthand** — sets all the animation properties in a single declaration. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Playback direction** — choose `normal`, `reverse`, `alternate`, or `alternate-reverse` (alternation needs an iteration count > 1 to be visible). [S1]
- **Persisting end/start state** — use `animation-fill-mode: forwards` to keep the last keyframe's style, `backwards` for the first keyframe during delay, or `both`. [S1]
- **Shorthand ordering** — `animation: name duration timing-function delay iteration-count direction;`. [S1]
## 📖 세부 내용 (Details)
**The `animation-direction` Property**
The `animation-direction` property specifies whether an animation should be played forwards, backwards or in alternate cycles. The `animation-direction` property can have the following values: [S1]
- `normal` — the animation is played as normal (forwards). This is default. [S1]
- `reverse` — the animation is played in reverse direction (backwards). [S1]
- `alternate` — the animation is played forwards first, then backwards. [S1]
- `alternate-reverse` — the animation is played backwards first, then forwards. [S1]
The following example will run the animation in reverse direction (backwards): [S1]
```css
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-direction: reverse;
}
```
The following example uses the value "alternate" to make the animation run forwards first, then backwards: [S1]
```css
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
```
The following example uses the value "alternate-reverse" to make the animation run backwards first, then forwards: [S1]
```css
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
```
**The `animation-fill-mode` Property**
The `animation-fill-mode` property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both). The `animation-fill-mode` property can have the following values: [S1]
- `none` — default value. Animation will not apply any styles to the element before or after it is executing. [S1]
- `forwards` — the element will retain the style values that are set by the last keyframe (depends on animation-direction and animation-iteration-count). [S1]
- `backwards` — the element will get the style values that are set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period. [S1]
- `both` — the animation will follow the rules for both forwards and backwards, extending the animation properties in both directions. [S1]
The following example lets the `<div>` element retain the style values from the last keyframe when the animation ends: [S1]
```css
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-fill-mode: forwards;
}
```
The following example lets the `<div>` element get the style values set by the first keyframe before the animation starts (during the animation-delay period): [S1]
```css
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
```
The following example lets the `<div>` element get the style values set by the first keyframe before the animation starts, and retain the style values from the last keyframe when the animation ends: [S1]
```css
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: myAnimation;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
```
**Animation Shorthand Property**
The animation properties can be specified one by one, like this: [S1]
```css
div {
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
```
The same animation effect as above can be achieved by using the shorthand `animation` property: [S1]
```css
div {
animation: myAnimation 5s linear 2s infinite alternate;
}
```
**CSS Animation Properties**
The following table lists the `@keyframes` rule and all the CSS animation properties: [S1]
| Property | Description |
|----------|-------------|
| `@keyframes` | Specifies the animation code |
| `animation` | A shorthand property for setting all the animation properties |
| `animation-delay` | Specifies a delay for the start of an animation |
| `animation-direction` | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| `animation-duration` | Specifies how long time an animation should take to complete one cycle |
| `animation-fill-mode` | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| `animation-iteration-count` | Specifies the number of times an animation should be played |
| `animation-name` | Specifies the name of the @keyframes animation |
| `animation-play-state` | Specifies whether the animation is running or paused |
| `animation-timing-function` | Specifies the speed curve of the animation |
## 🛠️ 적용 사례 (Applied in summary)
The page applies `reverse`, `alternate`, and `alternate-reverse` directions to a `<div>`, the `forwards`/`backwards`/`both` fill modes, and shows the same animation expressed both as individual properties and as the `animation` shorthand (`myAnimation 5s linear 2s infinite alternate`). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Individual properties vs. shorthand (language: CSS):
```css
div {
animation-name: myAnimation;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
div {
animation: myAnimation 5s linear 2s infinite alternate;
}
```
Fill mode to retain end state:
```css
div {
animation-fill-mode: forwards;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
For `animation-direction`, pick `normal` for plain forward playback, `reverse` to run backwards, `alternate` to bounce forward-then-back, and `alternate-reverse` to bounce back-then-forward (the alternating options require an iteration count above 1). For `animation-fill-mode`, use `forwards` to keep the final keyframe's appearance after the animation ends, `backwards` to apply the first keyframe during the delay, `both` for both effects, and `none` (default) to apply no styles outside the active run. The `animation` shorthand is preferred for conciseness when several properties are set together. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Animations]], [[CSS Animation Timing]], [[CSS Transition Timing]]
- **참조 맥락:** Completes the animation feature set with direction, fill-mode, and the shorthand that consolidates all animation properties.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Animation Properties — https://www.w3schools.com/css/css3_animations_properties.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Animation Properties" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Animations_Timing.md
+137
View File
@@ -0,0 +1,137 @@
---
id: css-animation-timing
title: "CSS Animation Timing"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["animation-delay", "animation-iteration-count", "animation-timing-function", "infinite animation", "negative delay", "animation speed curve"]
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", "animation", "timing-function", "iteration"]
raw_sources: ["https://www.w3schools.com/css/css3_animations_timing.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Animation Timing]]
## 🎯 한 줄 통찰 (One-line insight)
Animation timing controls when and how often an animation runs: `animation-delay` postpones (and, when negative, fast-forwards) the start, `animation-iteration-count` sets how many times it repeats (including `infinite`), and `animation-timing-function` sets the speed curve. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`animation-delay`** — specifies a delay for the start of an animation; negative values make the animation start as if it had already been playing for that many seconds. [S1]
- **`animation-iteration-count`** — specifies the number of times an animation should run; accepts a number or the keyword `infinite`. [S1]
- **`animation-timing-function`** — specifies the speed curve of the animation. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Negative delay = head start** — a negative `animation-delay` begins partway through the animation. [S1]
- **Loop forever** — `animation-iteration-count: infinite;` repeats the animation endlessly. [S1]
- **Speed-curve selection** — same value set as transitions: `ease` (default), `linear`, `ease-in`, `ease-out`, `ease-in-out`, `cubic-bezier(n,n,n,n)`. [S1]
## 📖 세부 내용 (Details)
**Delay an Animation**
The `animation-delay` property specifies a delay for the start of an animation. The following example has a 2 seconds delay before starting the animation: [S1]
```css
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
}
```
Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds. In the following example, the animation will start as if it had already been playing for 2 seconds: [S1]
```css
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: -2s;
}
```
**Set How Many Times an Animation Should Run**
The `animation-iteration-count` property specifies the number of times an animation should run. The following example will run the animation 3 times before it stops: [S1]
```css
div {
animation-iteration-count: 3;
}
```
The following example uses the value "infinite" to make the animation continue for ever: [S1]
```css
div {
animation-iteration-count: infinite;
}
```
**Specify the Speed Curve of the Animation**
The `animation-timing-function` property specifies the speed curve of the animation. The `animation-timing-function` property can have the following values: [S1]
- `ease` — specifies an animation with a slow start, then fast, then end slowly (this is default). [S1]
- `linear` — specifies an animation with the same speed from start to end. [S1]
- `ease-in` — specifies an animation with a slow start. [S1]
- `ease-out` — specifies an animation with a slow end. [S1]
- `ease-in-out` — specifies an animation with a slow start and end. [S1]
- `cubic-bezier(n,n,n,n)` — lets you define your own values in a cubic-bezier function. [S1]
The following example shows the different speed curves that can be used: [S1]
```css
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
```
## 🛠️ 적용 사례 (Applied in summary)
The page applies a 2-second positive delay and a -2-second negative delay to a `<div>`, runs an animation 3 times and then infinitely via `animation-iteration-count`, and demonstrates the five named speed curves across `#div1`–`#div5`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Delay and iteration count (language: CSS):
```css
div {
animation-name: myAnimation;
animation-duration: 4s;
animation-delay: 2s;
animation-iteration-count: infinite;
}
```
Speed curve:
```css
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The `animation-timing-function` values offer the same trade-offs as in transitions: `linear` holds a constant speed; `ease` (default) accelerates then decelerates; `ease-in`/`ease-out` slow only the start or end; `ease-in-out` slows both ends; and `cubic-bezier(n,n,n,n)` defines a custom curve. For `animation-iteration-count`, choose a finite number for a bounded effect or `infinite` for continuous loops (e.g. spinners). [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Animations]], [[CSS Animation Properties]], [[CSS Transition Timing]]
- **참조 맥락:** Adds delay, repeat, and speed-curve control on top of the basic `@keyframes` animation.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Animation Timing — https://www.w3schools.com/css/css3_animations_timing.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Animation Timing" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Attribute_Selectors.md
+115
View File
@@ -0,0 +1,115 @@
---
id: css-attribute-selectors
title: "CSS Attribute Selectors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["attribute selector", "[attribute] selector", "[attribute=value]", "[attribute~=value]", "[attribute|=value]"]
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", "selectors", "attributes"]
raw_sources: ["https://www.w3schools.com/css/css_attribute_selectors.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Attribute Selectors]]
## 🎯 한 줄 통찰 (One-line insight)
CSS attribute selectors use square brackets to target HTML elements by the presence or value of an attribute — from a plain `[attribute]` match through exact (`=`), word-list (`~=`), and hyphen-prefix (`|=`) matching. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Attribute selector** — selects and styles HTML elements with a specific attribute, a specific attribute value, or both. [S1]
- **Square-bracket syntax** — attribute selectors are written inside square brackets `[]`. [S1]
- **`[attribute]`** — selects elements that have the specified attribute, regardless of value. [S1]
- **`[attribute="value"]`** — selects elements with a specific attribute and an exact value. [S1]
- **`[attribute~="value"]`** — selects elements whose attribute value is a space-separated list of words, one of which is the value. [S1]
- **`[attribute|="value"]`** — selects elements whose value is exactly the value, or starts with the value followed by a hyphen (`-`). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Presence targeting** — style every element carrying a given attribute (e.g. every link with a `target`) without touching the HTML. [S1]
- **Word-membership match** — `~=` matches when the value appears as one whole word in a space-separated list, useful for multi-token attributes. [S1]
- **Language/prefix match** — `|=` matches a whole value or a value immediately followed by a hyphen, the classic pattern for language codes (`en`, `en-US`). [S1]
## 📖 세부 내용 (Details)
**What are attribute selectors?**
CSS attribute selectors are used to select and style HTML elements with a specific attribute or attribute value, or both. Attribute selectors use square brackets `[]`. [S1]
**Tip:** The attribute selectors are case-sensitive by default. To perform a case-insensitive match, add an `i` before the closing bracket. [S1]
**Example 1 — `[attribute]` selector**
Selects all `<a>` elements with a `target` attribute: [S1]
```css
a[target] {
background-color: yellow;
}
```
**Example 2 — `[attribute="value"]` selector**
Selects all `<a>` elements with a `target="_blank"` attribute: [S1]
```css
a[target="_blank"] {
background-color: yellow;
}
```
**Example 3 — `[attribute~="value"]` selector**
Selects all elements with a `title` attribute that contains a space-separated list of words, one of which is "flower." Per the source note, this will match elements with `title="flower"`, `title="summer flower"`, and `title="flower new"`, but not `title="my-flower"` or `title="flowers"`: [S1]
```css
[title~="flower"] {
border: 5px solid yellow;
}
```
**Example 4 — `[attribute|="value"]` selector**
Selects elements with the specific attribute whose value can be exactly the value, or start with the value followed by a hyphen (`-`). **Note:** The value has to be a whole word, either alone, like `class="top"`, or followed by a hyphen (`-`), like `class="top-text"`: [S1]
```css
[class|="top"] {
background: yellow;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's four examples demonstrate applying each selector form to links and titled/classed elements. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
The four basic attribute-selector forms (language: CSS):
```css
a[target] { background-color: yellow; } /* has attribute */
a[target="_blank"] { background-color: yellow; } /* exact value */
[title~="flower"] { border: 5px solid yellow; } /* word in list */
[class|="top"] { background: yellow; } /* value or value- */
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`[attribute]`** — use when only the presence of the attribute matters, not its value. [S1]
- **`[attribute="value"]`** — use when you need an exact, complete value match. [S1]
- **`[attribute~="value"]`** — use when the attribute holds a space-separated word list and you want elements where one whole word equals the value (does not match substrings like `flowers` or hyphenated `my-flower`). [S1]
- **`[attribute|="value"]`** — use when you want the exact value or that value followed by a hyphen, e.g. matching `top` and `top-text`. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Advanced Attribute Selectors]], [[CSS Selectors]], [[CSS Combinators]]
- **참조 맥락:** Referenced whenever styling elements by their attributes — links by `target`, inputs by `type`, elements by `title`/`lang`/`class`.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Attribute Selectors — https://www.w3schools.com/css/css_attribute_selectors.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Attribute Selectors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Attribute_Selectors_Advanced.md
+124
View File
@@ -0,0 +1,124 @@
---
id: css-advanced-attribute-selectors
title: "CSS Advanced Attribute Selectors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["advanced attribute selector", "[attribute^=value]", "[attribute$=value]", "[attribute*=value]", "substring attribute selector"]
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", "selectors", "attributes"]
raw_sources: ["https://www.w3schools.com/css/css_attribute_selectors_advanced.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Advanced Attribute Selectors]]
## 🎯 한 줄 통찰 (One-line insight)
The advanced attribute selectors match by substring position — `^=` for values that start with, `$=` for values that end with, and `*=` for values that contain a string — and combine with `input[type=...]` to style form controls. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`[attribute^="value"]`** — selects elements with the specific attribute whose value **starts with** a specific value. [S1]
- **`[attribute$="value"]`** — selects elements whose attribute value **ends with** a specific value. [S1]
- **`[attribute*="value"]`** — selects elements whose attribute value **contains** a specific value (substring, anywhere). [S1]
- **Form styling use** — attribute selectors are commonly used to style form elements by their `type`, e.g. `input[type="text"]` and `input[type="button"]`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Prefix match** — `^=` targets values beginning with a token (e.g. class names that start with `top`). [S1]
- **Suffix match** — `$=` targets values ending with a token (e.g. class names ending in `test`, or file extensions). [S1]
- **Substring match** — `*=` targets any value containing the token, the most permissive of the three. [S1]
- **Type-based form styling** — drive distinct styles for text vs. button inputs purely from their `type` attribute. [S1]
## 📖 세부 내용 (Details)
**`[attribute^="value"]` selector**
The `[attribute^="value"]` selector is used to select elements with the specific attribute whose value **starts with** a specific value. The following selects elements whose class starts with "top": [S1]
```css
[class^="top"] {
background: yellow;
}
```
**`[attribute$="value"]` selector**
The `[attribute$="value"]` selector is used to select elements whose attribute value **ends with** a specific value. The following selects elements whose class ends with "test": [S1]
```css
[class$="test"] {
background: yellow;
}
```
**`[attribute*="value"]` selector**
The `[attribute*="value"]` selector is used to select elements whose attribute value **contains** a specific value. The following selects elements whose class contains "te": [S1]
```css
[class*="te"] {
background: yellow;
}
```
**Styling Forms With Attribute Selectors**
Attribute selectors can style form controls by their `type`. The following styles text inputs and button inputs differently: [S1]
```css
input[type="text"] {
width: 150px;
padding: 6px;
margin-bottom: 10px;
background-color: pink;
}
input[type="button"] {
width: 100px;
padding: 6px;
background-color: lightgreen;
}
```
> Note: The full HTML markup for the form example is not shown in the fetched source — "Not found in source."
## 🛠️ 적용 사례 (Applied in summary)
The page's examples demonstrate the three substring selectors on `class` values and applying type-based attribute selectors to style form inputs. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
The three substring attribute-selector forms (language: CSS):
```css
[class^="top"] { background: yellow; } /* starts with */
[class$="test"] { background: yellow; } /* ends with */
[class*="te"] { background: yellow; } /* contains */
```
Type-based form styling (language: CSS):
```css
input[type="text"] { width: 150px; padding: 6px; margin-bottom: 10px; background-color: pink; }
input[type="button"] { width: 100px; padding: 6px; background-color: lightgreen; }
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`^=` (starts with)** — use when matching a known prefix, e.g. a naming convention where related classes begin with the same token. [S1]
- **`$=` (ends with)** — use when matching a known suffix, e.g. classes ending in `test`. [S1]
- **`*=` (contains)** — use when the token may appear anywhere in the value; broadest match of the three. [S1]
- **vs. basic selectors** — these substring forms complement the basic `[attribute]`, `=`, `~=`, and `|=` selectors documented in [[CSS Attribute Selectors]], adding positional substring matching that the basic set lacks. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Attribute Selectors]], [[CSS Selectors]], [[CSS Styling Forms]]
- **참조 맥락:** Referenced when targeting elements by partial attribute values or styling form controls by their `type`.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Advanced Attribute Selectors — https://www.w3schools.com/css/css_attribute_selectors_advanced.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Advanced Attribute Selectors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Attachment.md
+111
View File
@@ -0,0 +1,111 @@
---
id: css-background-attachment
title: "CSS Background Attachment"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-attachment", "fixed background", "scroll background", "CSS background attachment", "fixed vs scroll"]
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", "background", "background-attachment"]
raw_sources: ["https://www.w3schools.com/css/css_background_attachment.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Attachment]]
## 🎯 한 줄 통찰 (One-line insight)
The `background-attachment` property specifies whether a background image is `fixed` (does not scroll with the rest of the page) or `scroll` (scrolls along with the page). [S1]
## 🧠 핵심 개념 (Core concepts)
- **background-attachment** — specifies whether the background image should scroll or be fixed. [S1]
- **fixed** — the background image will not scroll with the rest of the page; it stays in place relative to the viewport. [S1]
- **scroll** — the background image scrolls with the rest of the page. [S1]
- **Combines with other background properties** — typically set alongside `background-image`, `background-repeat`, and `background-position`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Anchored backdrop** — use `fixed` to keep an image stationary while content scrolls over it. [S1]
- **Flowing backdrop** — use `scroll` so the image moves together with the page content. [S1]
## 📖 세부 내용 (Details)
**background-attachment: fixed**
Specify that the background image should be fixed (will not scroll with the rest of the page): [S1]
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
```
**background-attachment: scroll**
Specify that the background image should scroll with the rest of the page: [S1]
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
```
**Property reference (from the page table):** [S1]
| Property | Description |
|----------|-------------|
| `background-attachment` | Sets whether a background image is fixed or scrolls with the rest of the page |
## 🛠️ 적용 사례 (Applied in summary)
The CSS rules above are the page's own demonstration examples on `body`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Fixed (stationary) background (language: CSS):
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
```
Scrolling background:
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **fixed vs scroll** — `fixed` keeps the background image stationary (does not scroll with the rest of the page), while `scroll` makes the image scroll together with the page content. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Background Image]], [[CSS Background Repeat]], [[CSS Background Shorthand]], [[CSS Background Color]]
- **참조 맥락:** Referenced when deciding whether a background image stays put or moves as the user scrolls.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Attachment — https://www.w3schools.com/css/css_background_attachment.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Attachment" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Clip.md
+147
View File
@@ -0,0 +1,147 @@
---
id: css-background-clip
title: "CSS Background Clip"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-clip", "background painting area", "border-box clip", "padding-box clip", "content-box clip", "background extent"]
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", "background", "background-clip"]
raw_sources: ["https://www.w3schools.com/css/css3_background_clip.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Clip]]
## 🎯 한 줄 통찰 (One-line insight)
The `background-clip` property defines how far the background (color, image, or gradient) extends within an element — behind the border (default), to the inside edge of the border, or only to the content box. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`background-clip`** — defines how far the background (color, image, or gradient) should extend within an element. [S1]
- **`border-box`** — the background extends behind the border; this is the default. [S1]
- **`padding-box`** — the background extends to the inside edge of the border. [S1]
- **`content-box`** — the background extends to the edge of the content box. [S1]
- **Applies to color and image** — the same values work whether the background is a color or an image. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Clip-extent pattern** — the value sets the outer boundary of the painted area: `border-box` → `padding-box` → `content-box` progressively shrinks where the background shows. [S1]
- **Border-reveal pattern** — with a dotted/transparent border, switching to `padding-box` or `content-box` makes the background stop short of (and reveal gaps in) the border area. [S1]
## 📖 세부 내용 (Details)
**CSS `background-clip` Property**
The `background-clip` property defines how far the background (color, image, or gradient) should extend within an element. [S1]
The property takes three different values: [S1]
- `border-box` — the background extends behind the border. This is default. [S1]
- `padding-box` — the background extends to the inside edge of the border. [S1]
- `content-box` — the background extends to the edge of the content box. [S1]
Example — `background-clip` with a background image: [S1]
```css
#div1 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-image: url(paper.gif);
background-clip: content-box;
}
```
Example — `background-clip` with a background color: [S1]
```css
#div1 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: border-box;
}
#div2 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: padding-box;
}
#div3 {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
```
**CSS Background Properties**
| Property | Description |
|----------|-------------|
| `background` | A shorthand property for setting all the background properties in one declaration |
| `background-clip` | Specifies the painting area of the background |
| `background-image` | Specifies one or more background images for an element |
| `background-origin` | Specifies where the background image(s) is/are positioned |
| `background-size` | Specifies the size of the background image(s) |
[S1]
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Choosing the clip extent (paint boundary): [S1]
- **`border-box`** (default) — background paints all the way behind the border; useful so a dotted/transparent border shows the background through its gaps.
- **`padding-box`** — background stops at the inner edge of the border, leaving the border area unpainted.
- **`content-box`** — background paints only within the content box, leaving both border and padding areas unpainted.
Note `background-clip` controls the painted area, whereas [[CSS Background Origin]] controls the image's starting position. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's two example sets (the same dotted-border, padded box with `border-box`/`padding-box`/`content-box` applied to a background image and then to a background color) are the applied cases. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Clip the background color to the content box (language: CSS):
```css
selector {
border: 5px dotted black;
padding: 35px;
background-color: lightblue;
background-clip: content-box;
}
```
## ⚖️ 모순 및 업데이트 (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 Background Origin]], [[CSS Background Size]], [[CSS Multiple Backgrounds]]
- **참조 맥락:** Referenced when controlling whether a background shows behind the border, only inside it, or only within the content area.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Clip — https://www.w3schools.com/css/css3_background_clip.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Clip" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Color.md
+119
View File
@@ -0,0 +1,119 @@
---
id: css-background-color
title: "CSS Background Color"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-color", "opacity", "transparency", "background opacity", "CSS background color", "rgba background"]
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", "background", "color", "opacity"]
raw_sources: ["https://www.w3schools.com/css/css_background.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Color]]
## 🎯 한 줄 통찰 (One-line insight)
The `background-color` property sets the background color of an element; transparency can be added with `opacity` (which child elements inherit) or, to avoid that inheritance, with an `rgba()` background. [S1]
## 🧠 핵심 개념 (Core concepts)
- **background-color** — specifies the background color of an element, given as a valid color name, HEX value, or RGB value. [S1]
- **opacity property** — specifies the opacity/transparency of an element, with values from 0.0 to 1.0; the lower the value, the more transparent. [S1]
- **Inheritance caveat** — when using the `opacity` property to add transparency to the background of an element, all of its child elements inherit the same transparency, which can make text inside hard to read. [S1]
- **RGBA alternative** — adding transparency via an `rgba()` color applies opacity only to the background color, not to the element's child elements. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Per-element backgrounds** — apply `background-color` independently to `body`, headings, paragraphs, and divs. [S1]
- **Transparent background without faded text** — prefer an `rgba()` background color over the `opacity` property when text inside the element must stay fully readable. [S1]
## 📖 세부 내용 (Details)
**Background Color**
The `background-color` property specifies the background color of an element. [S1]
```css
body {
background-color: lightblue;
}
```
The background color can be set for any HTML element: [S1]
```css
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color: yellow;
}
```
**Opacity / Transparency**
The `opacity` property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower the value, the more transparent: [S1]
```css
div {
background-color: green;
opacity: 0.3;
}
```
> Note: When using the `opacity` property to add transparency to the background of an element, all of its child elements inherit the same transparency. This can make the text inside a fully transparent element hard to read. [S1]
**Transparency using RGBA**
To avoid the inherited-transparency problem, an `rgba()` color value can be used, which sets the opacity only for the background color and not the rest of the element. RGBA color values are an extension of RGB with an alpha channel, `rgba(red, green, blue, alpha)`, where alpha ranges from 0.0 (fully transparent) to 1.0 (fully opaque): [S1]
```css
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}
```
## 🛠️ 적용 사례 (Applied in summary)
The CSS rules above are the page's own demonstration examples for `body`, `h1`, `div`, and `p`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Solid background color (language: CSS):
```css
selector {
background-color: lightblue;
}
```
Transparent background that does not fade child text:
```css
selector {
background: rgba(0, 128, 0, 0.3); /* alpha 0.0–1.0 */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`opacity` vs `rgba()` background** — `opacity` makes the entire element (including child elements and their text) transparent; an `rgba()` background color makes only the background transparent, keeping child content fully opaque. Use `rgba()` when the text must stay readable. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Background Image]], [[CSS Background Shorthand]], [[CSS RGB]], [[CSS Colors]]
- **참조 맥락:** Referenced whenever an element needs a solid or partially transparent background fill.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Color — https://www.w3schools.com/css/css_background.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Color" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Image.md
+101
View File
@@ -0,0 +1,101 @@
---
id: css-background-image
title: "CSS Background Image"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-image", "background image url", "CSS background image", "image background", "url() background"]
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", "background", "image"]
raw_sources: ["https://www.w3schools.com/css/css_background_image.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Image]]
## 🎯 한 줄 통찰 (One-line insight)
The `background-image` property sets an image as the background of an element, and by default the image is repeated so it covers the entire element. [S1]
## 🧠 핵심 개념 (Core concepts)
- **background-image** — specifies an image to use as the background of an element. [S1]
- **Default tiling** — by default, the image is repeated so it covers the entire element. [S1]
- **Image source** — the image is referenced with the `url()` function (e.g. `url("paper.gif")`). [S1]
- **Applies to any element** — a background image can be set on the whole page (`body`) or on a specific element such as a paragraph. [S1]
- **Readability matters** — when using a background image, use an image that does not disturb the text. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Page-wide vs element-scoped** — set `background-image` on `body` for the entire page, or on a specific selector (e.g. `p`) to scope it to that element. [S1]
- **Contrast check** — choose an image that keeps the overlaid text readable; busy images make text "hardly readable." [S1]
## 📖 세부 내용 (Details)
**Background Image**
The `background-image` property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. [S1]
The background image for a page can be set like this: [S1]
```css
body {
background-image: url("paper.gif");
}
```
> Note: When using a background image, use an image that does not disturb the text. The page shows a counter-example where a busy image makes "the text is hardly readable": [S1]
```css
body {
background-image: url("bgdesert.jpg");
}
```
The background image can also be set for specific elements, like the `<p>` element: [S1]
```css
p {
background-image: url("paper.gif");
}
```
The page's property reference table lists `background-image`, described as the property that sets the background image for an element. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The CSS rules above are the page's own demonstration examples for `body` and `p`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Page background image (language: CSS):
```css
body {
background-image: url("paper.gif");
}
```
Element-scoped background image:
```css
p {
background-image: url("paper.gif");
}
```
## ⚖️ 모순 및 업데이트 (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 Background Repeat]], [[CSS Background Attachment]], [[CSS Background Shorthand]], [[CSS Background Color]]
- **참조 맥락:** Referenced whenever an image is placed behind page or element content; pairs with background-repeat and background-position to control its tiling and placement.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Image — https://www.w3schools.com/css/css_background_image.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Image" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Origin.md
+129
View File
@@ -0,0 +1,129 @@
---
id: css-background-origin
title: "CSS Background Origin"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-origin", "padding-box", "border-box origin", "content-box origin", "background positioning area", "background image start"]
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", "background", "background-origin"]
raw_sources: ["https://www.w3schools.com/css/css3_background_origin.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Origin]]
## 🎯 한 줄 통찰 (One-line insight)
The `background-origin` property specifies where the background image is positioned relative to the box model — starting from the padding edge (default), the border edge, or the content edge. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`background-origin`** — specifies where the background image is positioned. [S1]
- **`padding-box`** — the background image starts from the top-left corner of the padding edge; this is the default. [S1]
- **`border-box`** — the background image starts from the top-left corner of the border edge. [S1]
- **`content-box`** — the background image starts from the top-left corner of the content edge. [S1]
- **Fixed-attachment caveat** — this property has no effect if `background-attachment` is set to `fixed`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Box-model anchor pattern** — the chosen value (`padding-box` / `border-box` / `content-box`) selects which box-model edge the image's top-left corner aligns to. [S1]
- **Default-vs-inset pattern** — `border-box` lets the image extend out under the border, while `content-box` insets it past the padding. [S1]
## 📖 세부 내용 (Details)
**CSS `background-origin` Property**
The `background-origin` property specifies where the background image is positioned. [S1]
The property takes three different values: [S1]
- `padding-box` — the background image starts from the top-left corner of the padding edge. This is default. [S1]
- `border-box` — the background image starts from the top-left corner of the border edge. [S1]
- `content-box` — the background image starts from the top-left corner of the content edge. [S1]
**Note:** This property has no effect if the `background-attachment` property is set to `fixed`. [S1]
Example — the three origin values across three divs: [S1]
```css
#div1 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: padding-box;
}
#div2 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: border-box;
}
#div3 {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
```
**CSS Background Properties**
| Property | Description |
|----------|-------------|
| `background` | A shorthand property for setting all the background properties in one declaration |
| `background-clip` | Specifies the painting area of the background |
| `background-image` | Specifies one or more background images for an element |
| `background-origin` | Specifies where the background image(s) is/are positioned |
| `background-size` | Specifies the size of the background image(s) |
[S1]
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Choosing the origin value relative to the box model: [S1]
- **`padding-box`** (default) — image's top-left aligns to the padding edge; the usual behavior.
- **`border-box`** — image starts at the border edge, so it appears under the border.
- **`content-box`** — image starts at the content edge, inset past both border and padding.
Note these only affect positioning of the image's origin; with `background-attachment: fixed`, the property has no effect. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's three-div example (identical flower image with `padding-box`, `border-box`, and `content-box`) is the applied case. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Anchor the background image to the content edge (language: CSS):
```css
selector {
border: 2px solid black;
padding: 35px;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
```
## ⚖️ 모순 및 업데이트 (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 Background Clip]], [[CSS Background Size]], [[CSS Multiple Backgrounds]]
- **참조 맥락:** Referenced when controlling exactly where a background image begins relative to border and padding.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Origin — https://www.w3schools.com/css/css3_background_origin.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Origin" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Repeat.md
+124
View File
@@ -0,0 +1,124 @@
---
id: css-background-repeat
title: "CSS Background Repeat"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-repeat", "repeat-x", "repeat-y", "no-repeat", "background-position", "CSS background tiling"]
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", "background", "background-repeat"]
raw_sources: ["https://www.w3schools.com/css/css_background_repeat.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Repeat]]
## 🎯 한 줄 통찰 (One-line insight)
By default a background image tiles both vertically and horizontally; `background-repeat` controls that (`repeat-x`, `repeat-y`, `no-repeat`), and `background-position` sets where the image starts. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Default repetition** — by default, a background image is repeated both vertically and horizontally. [S1]
- **repeat-x** — repeats the background image horizontally only. [S1]
- **repeat-y** — repeats the background image vertically only. [S1]
- **no-repeat** — shows the background image only once (no tiling). [S1]
- **background-position** — sets the starting position of the background image; for a non-repeated image this lets you place it (e.g. `right top`). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Single image placement** — combine `no-repeat` with `background-position` to show one image at a chosen corner. [S1]
- **Axis-limited tiling** — use `repeat-x` or `repeat-y` to repeat along one axis only (e.g. a gradient strip across the top). [S1]
## 📖 세부 내용 (Details)
**Default behavior**
By default, a background image is repeated both vertically and horizontally: [S1]
```css
body {
background-image: url("gradient_bg.png");
}
```
**background-repeat: repeat-x**
If the image is repeated only horizontally (`repeat-x`), the background will look better: [S1]
```css
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
```
**background-repeat: no-repeat**
Showing the background image only once is specified by the `no-repeat` value: [S1]
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
```
**background-position**
The `background-position` property is used to specify the position of the background image. In the example below, the image is placed in the top-right corner: [S1]
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
```
**Property reference (from the page table):** [S1]
| Property | Purpose |
|----------|---------|
| `background-position` | Sets the starting position of a background image |
| `background-repeat` | Sets how a background image will be repeated |
## 🛠️ 적용 사례 (Applied in summary)
The CSS rules above are the page's own demonstration examples on `body`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Tile along one axis (language: CSS):
```css
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x; /* or repeat-y */
}
```
Single image placed at a corner:
```css
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **repeat-x vs repeat-y vs no-repeat** — `repeat-x` tiles horizontally only, `repeat-y` tiles vertically only, and `no-repeat` shows the image a single time; choose based on whether the image should fill an axis or appear once. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Background Image]], [[CSS Background Attachment]], [[CSS Background Shorthand]], [[CSS Background Color]]
- **참조 맥락:** Referenced whenever a background image's tiling or starting position must be controlled.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Repeat — https://www.w3schools.com/css/css_background_repeat.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Repeat" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Shorthand.md
+105
View File
@@ -0,0 +1,105 @@
---
id: css-background-shorthand
title: "CSS Background Shorthand"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background shorthand", "background property", "CSS background shorthand", "shorthand background", "background: shorthand"]
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", "background", "shorthand"]
raw_sources: ["https://www.w3schools.com/css/css_background_shorthand.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Shorthand]]
## 🎯 한 줄 통찰 (One-line insight)
To shorten the code, the `background` shorthand property lets you specify all the background properties in one single declaration. [S1]
## 🧠 핵심 개념 (Core concepts)
- **background shorthand** — to shorten the code, it is possible to specify all the background properties in one single property. [S1]
- **Replaces longhand** — a single `background:` declaration can replace separate `background-color`, `background-image`, `background-repeat`, and `background-position` declarations. [S1]
- **Constituent properties** — the page lists the individual properties the shorthand can combine: `background-attachment`, `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, and `background-size`. [S1]
- **Omitted values** — if some property values are missing, they will be set to their initial (default) values. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Collapse the longhand** — replace a block of `background-*` declarations with one `background:` line for brevity. [S1]
- **Rely on defaults** — only list the values you need; omitted ones fall back to their initial values. [S1]
## 📖 세부 내용 (Details)
**Background - Shorthand property**
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property. [S1]
Instead of writing the properties separately: [S1]
```css
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
```
You can use the shorthand `background` property: [S1]
```css
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
```
The shorthand `background` property can combine the following individual background properties: [S1]
- `background-attachment`
- `background-clip`
- `background-color`
- `background-image`
- `background-origin`
- `background-position`
- `background-repeat`
- `background-size`
If some of the property values are missing, they will be set to their initial (default) values. [S1]
**Order of values:** The page does not explicitly prescribe a required ordering of the values; the example writes them as color, image, repeat, then position (`#ffffff url("img_tree.png") no-repeat right top`). An explicit ordering rule was: Not found in source. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The longhand and shorthand `body` rules above are the page's own demonstration examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Background shorthand (language: CSS):
```css
selector {
background: #ffffff url("img_tree.png") no-repeat right top;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Longhand vs shorthand** — separate `background-*` declarations are explicit and easy to read property by property; the `background` shorthand is more compact and sets any unspecified values to their initial defaults. Choose the shorthand to shorten the code. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Background Color]], [[CSS Background Image]], [[CSS Background Repeat]], [[CSS Background Attachment]]
- **참조 맥락:** Referenced when collapsing multiple background-* declarations into one concise rule.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Shorthand — https://www.w3schools.com/css/css_background_shorthand.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Shorthand" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Background_Size.md
+173
View File
@@ -0,0 +1,173 @@
---
id: css-background-size
title: "CSS Background Size"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["background-size", "background cover", "background contain", "full size background", "hero image CSS", "responsive background image"]
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", "background", "background-size"]
raw_sources: ["https://www.w3schools.com/css/css3_background_size.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Background Size]]
## 🎯 한 줄 통찰 (One-line insight)
The `background-size` property specifies the size of background images using lengths, percentages, or the keywords `auto`, `contain`, or `cover` — enabling everything from fixed-pixel images to full-window cover backgrounds. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`background-size`** — specifies the size of background images. [S1]
- **Value types** — the size can be specified in lengths, percentages, or by using one of the keywords `auto`, `contain`, or `cover`. [S1]
- **`auto`** — the default value; displays the background image in its original size. [S1]
- **`contain`** — scales the image up or down to fit inside the content area. [S1]
- **`cover`** — scales the image to be as large as possible so the content area is completely covered. [S1]
- **Multiple values** — accepts a comma-separated list of sizes when working with multiple backgrounds. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Keyword-scaling pattern** — `contain` fits the whole image inside the box; `cover` fills the box and may crop overflow. [S1]
- **Full-window background pattern** — apply the background to `<html>` with `cover` so the image always fills at least the browser window. [S1]
- **Hero-image pattern** — apply a centered `cover` background to a fixed-height `<div>` with `position: relative` to place text over a large image. [S1]
## 📖 세부 내용 (Details)
**CSS `background-size`**
The `background-size` property allows you to specify the size of background images. The background size can be specified in lengths, percentages, or by using one of the keywords: `auto`, `contain`, or `cover`. [S1]
Example — background size with pixels: [S1]
```css
#div1 {
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}
```
**Keyword values**
The keyword values for `background-size` are `auto`, `contain`, and `cover`. The `auto` value is the default value, and displays the background image in its original size. The `contain` value scales the image up or down to fit inside the content area. The `cover` value scales the image to be as large as possible so that the content area is completely covered by the background image. [S1]
Example — `contain`, `cover`, and `auto`: [S1]
```css
#div1 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
#div2 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
#div3 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: auto;
}
```
**Define sizes of multiple background images**
The `background-size` property also accepts multiple values (using a comma-separated list) when working with multiple backgrounds. [S1]
```css
#div1 {
background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
background-position: left top, right bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
}
```
**Full size background image**
The goal is a background image that covers the entire browser window at all times. The requirements are: fill the entire page with the image (no white space), scale the image as needed, center the image on the page, and do not cause scrollbars. Here, the styles are defined on the `<html>` element (the `<html>` element is always at least the height of the browser window). [S1]
```css
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
```
**Hero image**
You could also use different background properties on a `<div>` to create a hero image (a large image with text), and place it where you want. [S1]
```css
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
```
**CSS Background Properties**
| Property | Description |
|----------|-------------|
| `background` | A shorthand property for setting all the background properties in one declaration |
| `background-clip` | Specifies the painting area of the background |
| `background-image` | Specifies one or more background images for an element |
| `background-origin` | Specifies where the background image(s) is/are positioned |
| `background-size` | Specifies the size of the background image(s) |
[S1]
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Choosing among the size keywords: [S1]
- **`auto`** — keep the image at its original size (default); use when intrinsic dimensions are what you want.
- **`contain`** — guarantees the entire image is visible inside the box, possibly leaving uncovered space.
- **`cover`** — guarantees the box is fully covered, possibly cropping the image edges; the standard choice for full-window and hero backgrounds.
## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: fixed-pixel sizing, the `contain`/`cover`/`auto` comparison, per-image sizes for multiple backgrounds, a full-window `<html>` cover background, and a `.hero-image` div. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Full-window cover background (language: CSS):
```css
html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
```
Hero image block:
```css
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Multiple Backgrounds]], [[CSS Background Origin]], [[CSS Background Clip]]
- **참조 맥락:** Referenced when sizing background imagery for responsive layouts, hero sections, or full-bleed page backgrounds.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Background Size — https://www.w3schools.com/css/css3_background_size.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Background Size" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Border_Color.md
+115
View File
@@ -0,0 +1,115 @@
---
id: css-border-color
title: "CSS Border Color"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["border-color", "CSS border color", "border colour", "border-color values", "per-side border color"]
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", "border", "border-color"]
raw_sources: ["https://www.w3schools.com/css/css_border_color.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Border Color]]
## 🎯 한 줄 통찰 (One-line insight)
The `border-color` property sets the color of all four borders using a name, HEX, RGB, or HSL value, and if it is not set it inherits the color of the element. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`border-color`** is used to set the color of the four borders. [S1]
- **Color can be set by:** name — specify a color name, like "red"; HEX — specify a HEX value, like "#ff0000"; RGB — specify an RGB value, like "rgb(255,0,0)"; HSL — specify an HSL value, like "hsl(0, 100%, 50%)"; transparent. [S1]
- **Default behavior** — if `border-color` is not set, it inherits the color of the element. [S1]
- **Requires border-style** — `border-color` is not visible unless `border-style` is also set. [S1]
- **Per-side values** — the property can take from one to four values, for the top, right, bottom, and left borders. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Equivalent color formats** — named, HEX, RGB, and HSL forms can all express the same border color. [S1]
- **One-to-four value box model** — a single `border-color` declaration can color each side differently (e.g. `red green blue yellow`). [S1]
## 📖 세부 내용 (Details)
**Border Color** [S1]
The `border-color` property is used to set the color of the four borders.
The color can be set by: [S1]
- **name** — specify a color name, like "red"
- **HEX** — specify a HEX value, like "#ff0000"
- **RGB** — specify an RGB value, like "rgb(255,0,0)"
- **HSL** — specify an HSL value, like "hsl(0, 100%, 50%)"
- **transparent**
**Note:** If `border-color` is not set, it inherits the color of the element. [S1]
**Example** — setting a single border color (here using a color name): [S1]
```css
p.one {
border-style: solid;
border-color: red;
}
```
**Specific Side Colors** [S1]
The `border-color` property can have from one to four values (for the top border, right border, bottom border, and the left border).
**Example** — four values, one color per side: [S1]
```css
p.one {
border-style: solid;
border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are the paragraph-class stylesheets above: one setting a single border color and one assigning a different color to each of the four sides. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single color for all sides (language: CSS):
```css
p.one {
border-style: solid;
border-color: red;
}
```
Per-side colors, four values (top, right, bottom, left):
```css
p.one {
border-style: solid;
border-color: red green blue yellow;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The same border color can be expressed in four interchangeable formats. Choose based on need: [S1]
- **name** (e.g. `red`) — most readable, limited palette.
- **HEX** (e.g. `#ff0000`) — compact, exact, widely used.
- **RGB** (e.g. `rgb(255,0,0)`) — explicit channel values; supports alpha via rgba in CSS generally.
- **HSL** (e.g. `hsl(0, 100%, 50%)`) — intuitive for adjusting hue/saturation/lightness.
## ⚖️ 모순 및 업데이트 (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 Border Style]], [[CSS Border Width]], [[CSS Border Sides]], [[CSS Border Shorthand]]
- **참조 맥락:** Applied alongside `border-style` whenever a border needs an explicit color.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Border Color — https://www.w3schools.com/css/css_border_color.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Color" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Border_Images.md
+144
View File
@@ -0,0 +1,144 @@
---
id: css-border-images
title: "CSS Border Images"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["border-image", "border-image-source", "border-image-slice", "border-image-repeat", "CSS image border", "nine-slice border"]
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", "border-image", "borders"]
raw_sources: ["https://www.w3schools.com/css/css3_border_images.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Border Images]]
## 🎯 한 줄 통찰 (One-line insight)
The `border-image` property lets you use an image as the border around an element instead of a normal border, slicing the image into nine sections so corners stay fixed while the sides repeat, round, or stretch. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`border-image`** — defines an image to be used as the border around an element, instead of the normal border. [S1]
- **Nine-slice model** — the image is sliced into nine sections (like a tic-tac-toe board); corners are placed at the corners, and the middle sections are repeated or stretched. [S1]
- **`border` prerequisite** — for `border-image` to work, the element also needs the `border` property set. [S1]
- **Shorthand** — `border-image` is shorthand for `border-image-source`, `border-image-slice`, `border-image-width`, `border-image-outset`, and `border-image-repeat`. [S1]
- **Repeat behaviors** — sides can be repeated, rounded, or stretched. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Slice-and-place pattern** — slice once, then corners pin while edges tile/stretch to fill any border length. [S1]
- **Transparent base border pattern** — examples set a transparent `border` (e.g., `10px solid transparent`) so the image border fills space the regular border reserves. [S1]
- **Slice-value pattern** — the slice value (a unitless number or a percentage like `20%`/`30%`) controls how much of the image becomes corners vs. edges. [S1]
## 📖 세부 내용 (Details)
**CSS `border-image` Property**
The `border-image` property allows you to define an image to be used as the border around an element, instead of the normal border. The image is sliced into nine sections (like a tic-tac-toe board), with the corners placed at the corners and the middle sections repeated or stretched. [S1]
**Note:** For `border-image` to work, the element also needs the `border` property set! [S1]
The `border-image` property is a shorthand for the following: [S1]
- `border-image-source` — defines the path to the image. [S1]
- `border-image-slice` — defines how to slice the image. [S1]
- `border-image-width` — defines the width of the image. [S1]
- `border-image-outset` — defines the amount by which the border image area extends beyond the border box. [S1]
- `border-image-repeat` — defines whether the image is repeated, rounded, or stretched. [S1]
Example — image border with `round`: [S1]
```css
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
```
Example — image border with `stretch`: [S1]
```css
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
```
Example — different slice values across multiple elements: [S1]
```css
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 50 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 20% round;
}
#borderimg3 {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30% round;
}
```
**CSS Border Image Properties**
| Property | Description |
|----------|-------------|
| `border-image` | Shorthand for all the border-image-* properties |
| `border-image-source` | Specifies the path to the image used as a border |
| `border-image-slice` | Specifies how to slice the border image |
| `border-image-width` | Specifies the widths of the border image |
| `border-image-outset` | Specifies the amount by which the border image area extends beyond the border box |
| `border-image-repeat` | Specifies whether the border image should be repeated, rounded, or stretched |
[S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: a single image border with `round` and with `stretch`, plus three elements using different slice values (`50`, `20%`, `30%`). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic image border (language: CSS) — note the required transparent `border`:
```css
selector {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 round;
}
```
Stretched variant:
```css
selector {
border: 10px solid transparent;
padding: 15px;
border-image: url(border.png) 30 stretch;
}
```
## ⚖️ 모순 및 업데이트 (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 Rounded Corners]], [[CSS Multiple Backgrounds]], [[CSS Background Size]]
- **참조 맥락:** Referenced when an element needs a decorative or themed border that a solid color cannot provide.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Border Images — https://www.w3schools.com/css/css3_border_images.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Images" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Border_Shorthand.md
+107
View File
@@ -0,0 +1,107 @@
---
id: css-border-shorthand
title: "CSS Border Shorthand"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["border shorthand", "CSS border property", "border: width style color", "border-bottom", "border-left shorthand"]
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", "border", "border-shorthand"]
raw_sources: ["https://www.w3schools.com/css/css_border_shorthand.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Border Shorthand]]
## 🎯 한 줄 통찰 (One-line insight)
To shorten the code, the `border` property is a shorthand that combines `border-width`, `border-style` (required), and `border-color` in a single declaration, and the same pattern works for each individual side (`border-bottom`, `border-left`, etc.). [S1]
## 🧠 핵심 개념 (Core concepts)
- **Shorthand purpose** — to shorten the code, it is also possible to specify all the individual border properties in one property. [S1]
- **`border`** is a shorthand property for: `border-width`, `border-style` (required), and `border-color`. [S1]
- **Order** — the shorthand lists width, then style, then color (e.g. `5px solid red`). [S1]
- **Per-side shorthands** — the same approach works for individual sides such as `border-bottom` and `border-left`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Width–style–color triple** — collapse three declarations into one `border: <width> <style> <color>;`. [S1]
- **Directional shorthand** — apply the same triple to one side only with `border-top/right/bottom/left`. [S1]
## 📖 세부 내용 (Details)
**Border - Shorthand Property** [S1]
To shorten the code, it is also possible to specify all the individual border properties in one property.
The `border` property is a shorthand property for the following individual border properties: [S1]
- `border-width`
- `border-style` (required)
- `border-color`
**Example** — combining width, style, and color in one declaration: [S1]
```css
p {
border: 5px solid red;
}
```
**Left Border** [S1]
You can also specify all the individual border properties for just one side.
**Example** — left side only: [S1]
```css
p {
border-left: 6px solid red;
}
```
**Bottom Border** [S1]
**Example** — bottom side only: [S1]
```css
p {
border-bottom: 6px solid red;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are the three paragraph rules above: the full `border` shorthand, the `border-left` shorthand, and the `border-bottom` shorthand. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Full border shorthand (language: CSS):
```css
p {
border: 5px solid red;
}
```
Single-side shorthand:
```css
p {
border-left: 6px solid red;
}
```
## ⚖️ 모순 및 업데이트 (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 Border Style]], [[CSS Border Width]], [[CSS Border Color]], [[CSS Border Sides]]
- **참조 맥락:** The concise way to apply width, style, and color together; preferred over separate declarations.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Border Shorthand — https://www.w3schools.com/css/css_border_shorthand.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Shorthand" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Border_Sides.md
+124
View File
@@ -0,0 +1,124 @@
---
id: css-border-sides
title: "CSS Border Sides"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["border sides", "CSS individual borders", "border-top-style", "border per side", "border value count"]
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", "border", "border-sides"]
raw_sources: ["https://www.w3schools.com/css/css_border_sides.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Border Sides]]
## 🎯 한 줄 통찰 (One-line insight)
In CSS it is possible to specify a different border for each side of an element, either through individual side properties (e.g. `border-top-style`) or through the shorthand `border-style` whose number of values (1–4) determines how the sides are filled. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Different border per side** — in CSS it is possible to specify a different border for each side. [S1]
- **Individual side properties** — `border-top-style`, `border-right-style`, `border-bottom-style`, and `border-left-style` each target one side. [S1]
- **Shorthand value count** — the `border-style` property can take one to four values, and the count controls which sides get which style. [S1]
- **Same logic for width and color** — the same value-count logic applies equally to `border-width` and `border-color`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Clockwise-from-top rule** — four values map to top, right, bottom, left in clockwise order. [S1]
- **Mirror fill** — with two values, top/bottom share the first and right/left share the second; with three, the second value covers both right and left. [S1]
## 📖 세부 내용 (Details)
**Borders - Individual Sides** [S1]
In CSS, it is also possible to specify a different border for each side.
**Example** — using the four individual side-style properties: [S1]
```css
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
```
The example above gives the same result as the shorthand below. [S1]
**Shorthand: how the value count maps to sides** [S1]
If the `border-style` property has **four values**: [S1]
```css
border-style: dotted solid double dashed;
```
- top border is `dotted`
- right border is `solid`
- bottom border is `double`
- left border is `dashed`
If the `border-style` property has **three values**: [S1]
```css
border-style: dotted solid double;
```
- top border is `dotted`
- right and left borders are `solid`
- bottom border is `double`
If the `border-style` property has **two values**: [S1]
```css
border-style: dotted solid;
```
- top and bottom borders are `dotted`
- right and left borders are `solid`
If the `border-style` property has **one value**: [S1]
```css
border-style: dotted;
```
- all four borders are `dotted`
The `border-style` property is used in the examples above. However, it also works with `border-width` and `border-color`. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are the individual side-property stylesheet and the four shorthand declarations (one/two/three/four values) demonstrating each value-count mapping. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Individual side properties (language: CSS):
```css
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
```
Shorthand, four values (top, right, bottom, left):
```css
border-style: dotted solid double dashed;
```
## ⚖️ 모순 및 업데이트 (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 Border Style]], [[CSS Border Width]], [[CSS Border Color]], [[CSS Border Shorthand]]
- **참조 맥락:** Explains the value-count box-model rule reused across all border (and margin/padding) shorthands.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Border Sides — https://www.w3schools.com/css/css_border_sides.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Sides" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Border_Style.md
+107
View File
@@ -0,0 +1,107 @@
---
id: css-border-style
title: "CSS Border Style"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["border-style", "CSS border style", "border types", "dotted border", "solid border"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "border", "border-style"]
raw_sources: ["https://www.w3schools.com/css/css_border.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Border Style]]
## 🎯 한 줄 통찰 (One-line insight)
The `border-style` property specifies what kind of border to display and is the gatekeeper of all border styling — none of the other border properties (width, color) have any effect unless `border-style` is set. [S1]
## 🧠 핵심 개념 (Core concepts)
- **CSS border properties** allow you to specify the style, width, and color of an element's border. [S1]
- **`border-style`** specifies what kind of border to display. [S1]
- **`border-style` is required** — none of the other CSS border properties will have any effect unless `border-style` is set. [S1]
- **Per-side values** — the `border-style` property can take from one to four values, applied to the top, right, bottom, and left borders respectively. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Style-first rule** — always declare `border-style` before width/color; the others are inert without it. [S1]
- **One-to-four value shorthand** — a single `border-style` declaration can style all four sides at once (e.g. `dotted dashed solid double`). [S1]
## 📖 세부 내용 (Details)
**Border Style** [S1]
The `border-style` property specifies what kind of border to display.
The following values are allowed: [S1]
| Value | Meaning |
|-------|---------|
| `dotted` | Defines a dotted border |
| `dashed` | Defines a dashed border |
| `solid` | Defines a solid border |
| `double` | Defines a double border |
| `groove` | Defines a 3D grooved border (effect depends on the border-color value) |
| `ridge` | Defines a 3D ridged border (effect depends on the border-color value) |
| `inset` | Defines a 3D inset border (effect depends on the border-color value) |
| `outset` | Defines a 3D outset border (effect depends on the border-color value) |
| `none` | Defines no border |
| `hidden` | Defines a hidden border |
The `border-style` property can have from one to four values (for the top border, right border, bottom border, and the left border). [S1]
**Example** — demonstrating all of the border-style values, including a `mix` class that supplies four values: [S1]
```css
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
```
**Note:** None of the OTHER CSS border properties (which you will learn more about in the next chapters) will have ANY effect unless the `border-style` property is set! [S1]
## 🛠️ 적용 사례 (Applied in summary)
The example stylesheet above is the page's own applied example: a set of paragraph classes each demonstrating one `border-style` value, plus a `mix` class applying four values at once. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single value applied to all four sides (language: CSS):
```css
p.solid {border-style: solid;}
```
Four values, one per side (top, right, bottom, left):
```css
p.mix {border-style: dotted dashed solid double;}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Border Width]], [[CSS Border Color]], [[CSS Border Sides]], [[CSS Border Shorthand]]
- **참조 맥락:** The mandatory first step for any element border; referenced whenever width or color is applied.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Border Style — https://www.w3schools.com/css/css_border.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Style" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Border_Width.md
+126
View File
@@ -0,0 +1,126 @@
---
id: css-border-width
title: "CSS Border Width"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["border-width", "CSS border width", "border thickness", "thin medium thick border", "border size"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "border", "border-width"]
raw_sources: ["https://www.w3schools.com/css/css_border_width.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Border Width]]
## 🎯 한 줄 통찰 (One-line insight)
The `border-width` property sets the thickness of a border, accepting either a specific size (px, pt, cm, em) or one of three predefined keywords — `thin`, `medium`, or `thick` — and like other border properties it takes one to four values for the individual sides. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`border-width`** specifies the width of the four borders. [S1]
- **Specific size** — the width can be set as a specific size in px, pt, cm, em, etc. [S1]
- **Keyword values** — alternatively, three predefined values are allowed: `thin`, `medium`, or `thick`. [S1]
- **Per-side values** — the property can take from one to four values (for the top border, right border, bottom border, and the left border). [S1]
- **Requires border-style** — width is only visible when a `border-style` is also set. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Size or keyword** — choose either an explicit length unit or a relative keyword (`thin`/`medium`/`thick`) per border. [S1]
- **One-to-four value box model** — a single declaration can give every side a different width (e.g. `25px 10px 4px 35px`). [S1]
## 📖 세부 내용 (Details)
**Border Width** [S1]
The `border-width` property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc.) or by using one of the three pre-defined values: `thin`, `medium`, or `thick`. [S1]
**Example** — mixing specific sizes and keyword values across paragraph classes: [S1]
```css
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: dotted;
border-width: 2px;
}
p.four {
border-style: dotted;
border-width: thick;
}
```
**Specific Side Widths** [S1]
The `border-width` property can have from one to four values (for the top border, right border, bottom border, and the left border).
**Example** — supplying multiple values for individual sides: [S1]
```css
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are the paragraph-class stylesheets above: one demonstrating size vs. keyword widths and one demonstrating two-value and four-value per-side widths. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single width for all sides (language: CSS):
```css
p.one {
border-style: solid;
border-width: 5px;
}
```
Per-side widths, four values (top, right, bottom, left):
```css
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Border Style]], [[CSS Border Color]], [[CSS Border Sides]], [[CSS Border Shorthand]]
- **참조 맥락:** Used together with `border-style` whenever a border's thickness needs to be controlled.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Border Width — https://www.w3schools.com/css/css_border_width.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Border Width" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Box_Model.md
+114
View File
@@ -0,0 +1,114 @@
---
id: css-box-model
title: "CSS Box Model"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["box model", "CSS box model", "content padding border margin", "element box", "total width"]
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", "box-model", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_boxmodel.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Box Model]]
## 🎯 한 줄 통찰 (One-line insight)
Every HTML element is a box made of four layers — content, padding, border, and margin — and the declared width/height set only the content area, so the box's real footprint adds padding and border on top. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Box model** — every HTML element is wrapped in a box that consists of four layers moving outward: content, padding, border, and margin. [S1]
- **Content** — "The content of the box, where text and images appear." [S1]
- **Padding** — "Clears an area around the content. The padding is transparent." [S1]
- **Border** — "A border that goes around the padding and content." [S1]
- **Margin** — "Clears an area outside the border. The margin is transparent." [S1]
- **Width/height are content-only** — "When you set the width and height properties of an element with CSS, you just set the width and height of the content area." [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Total size formula** — total width = content width + left/right padding + left/right border; total height = content height + top/bottom padding + top/bottom border. [S1]
- **Margin excluded from box size** — margin affects the space the box takes on the page but is not included in the actual size of the box. [S1]
## 📖 세부 내용 (Details)
**The four components**
The CSS box model describes how every HTML element is wrapped in a box around it, consisting of four layers moving outward: [S1]
- **Content** — the content of the box, where text and images appear.
- **Padding** — clears an area around the content; the padding is transparent.
- **Border** — a border that goes around the padding and content.
- **Margin** — clears an area outside the border; the margin is transparent.
**Basic example** [S1]
```css
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
```
**Width and height calculation**
The tutorial emphasizes: "When you set the width and height properties of an element with CSS, you just set the width and height of the content area." To calculate the full size of an element, you must also add padding and borders. [S1]
For a div styled with `width: 320px; height: 50px; padding: 10px; border: 5px solid gray; margin: 0;`: [S1]
Total width: [S1]
```text
320px (content width)
+ 20px (left + right padding)
+ 10px (left + right border)
= 350px (total width)
```
Total height: [S1]
```text
50px (content height)
+ 20px (top + bottom padding)
+ 10px (top + bottom border)
= 80px (total height)
```
**Note**
"The margin property also affects the total space that the box will take up on the page, but the margin is not included in the actual size of the box." [S1]
## 🛠️ 적용 사례 (Applied in summary)
The basic `div` example and the dimensioned calculation example are the page's own applied cases, demonstrating the layers and the total-size arithmetic. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
A box exercising all four layers (language: CSS):
```css
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Padding]], [[CSS Padding and Box Sizing]], [[CSS Height and Width]], [[CSS Outline Style]]
- **참조 맥락:** The conceptual foundation referenced whenever an element's real on-page size matters.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Box Model — https://www.w3schools.com/css/css_boxmodel.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Box Model" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Box_Shadow.md
+150
View File
@@ -0,0 +1,150 @@
---
id: css-box-shadow
title: "CSS Box Shadow"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["box-shadow", "CSS box shadow", "card shadow CSS", "inset shadow", "drop shadow element"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "box-shadow", "shadows", "cards"]
raw_sources: ["https://www.w3schools.com/css/css3_shadows_box.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Box Shadow]]
## 🎯 한 줄 통찰 (One-line insight)
The `box-shadow` property attaches one or more shadows to an element using horizontal/vertical offsets, with optional blur radius, spread radius, color, and an `inset` keyword — commonly used to make elements look like raised cards. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`box-shadow` shadows an element** — it applies one or more shadows to an element. [S1]
- **Offsets are required** — the minimum form is a horizontal and a vertical offset. [S1]
- **Blur radius** — an optional third value blurs the shadow. [S1]
- **Spread radius** — an optional fourth value expands (or contracts) the shadow size. [S1]
- **Color and `inset`** — you can set the shadow color, and the `inset` keyword changes the shadow from an outer to an inner shadow. [S1]
- **Multiple shadows** — comma-separated shadows can be layered, which is how card effects are built. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Offset-only pattern** — `box-shadow: 10px 10px;`. [S1]
- **Offset + color pattern** — `box-shadow: 10px 10px lightblue;`. [S1]
- **Offset + blur (+ spread) pattern** — `box-shadow: 10px 10px 5px 12px lightblue;`. [S1]
- **Inset pattern** — append `inset` for an inner shadow. [S1]
- **Card pattern** — two stacked `rgba()` shadows to mimic a paper card. [S1]
## 📖 세부 내용 (Details)
**Basic horizontal and vertical shadow** [S1]
The horizontal offset (10px) and the vertical offset (10px) are required:
```css
div {
box-shadow: 10px 10px;
}
```
**Shadow with color** [S1]
```css
div {
box-shadow: 10px 10px lightblue;
}
```
**Blur effect (third value = blur radius)** [S1]
```css
div {
box-shadow: 10px 10px 5px lightblue;
}
```
**Spread radius (fourth value)** [S1]
```css
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
```
**Inset shadow** [S1]
The `inset` keyword changes the shadow from an outer shadow to an inner shadow:
```css
div {
box-shadow: 10px 10px 5px lightblue inset;
}
```
**Multiple shadows** [S1]
You can add as many shadows as you like, separated by commas:
```css
div {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
```
**Cards** [S1]
You can use the `box-shadow` property to create paper-like cards:
```css
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
```
**Shadow Properties reference** [S1]
The page includes a table listing the shadow properties `box-shadow` (adds shadows to elements) and `text-shadow` (adds shadows to text), with their descriptions.
## 🛠️ 적용 사례 (Applied in summary)
The page's own demonstrations (`div` elements showing offset, color, blur, spread, inset, multiple shadows, and the `div.card` paper-card effect) serve as the applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Blur + spread shadow (language: CSS):
```css
div {
box-shadow: 10px 10px 5px 12px lightblue;
}
```
Inner (inset) shadow:
```css
div {
box-shadow: 10px 10px 5px lightblue inset;
}
```
Paper-like card:
```css
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`box-shadow` vs `text-shadow`** — `box-shadow` shadows the whole element box; `text-shadow` shadows only the text glyphs. [S1]
- **Outer vs inset shadow** — omit `inset` for a drop shadow that lifts the element; add `inset` for a recessed/inner shadow. [S1]
- **Blur only vs blur + spread** — the third value blurs the shadow; the fourth (spread) value grows or shrinks the shadow's footprint. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Text Shadow Effects]], [[CSS Radial Gradients]], [[CSS 2D Transforms]]
- **참조 맥락:** Referenced when giving elements depth — cards, buttons, modals, and raised panels.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Box Shadow — https://www.w3schools.com/css/css3_shadows_box.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Box Shadow" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Box_Sizing.md
+136
View File
@@ -0,0 +1,136 @@
---
id: css-box-sizing
title: "CSS Box Sizing"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["box-sizing", "border-box", "content-box", "CSS box model sizing", "include padding border in width"]
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", "box-model", "layout"]
raw_sources: ["https://www.w3schools.com/css/css3_box-sizing.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Box Sizing]]
## 🎯 한 줄 통찰 (One-line insight)
The `box-sizing` property controls whether an element's declared width/height include its padding and border, and setting it to `border-box` makes sizing predictable so padded boxes don't grow larger than intended. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Default behavior** — by default, an element's actual rendered width and height include the padding and border *added on top of* the specified `width`/`height`. [S1]
- **The sizing formula (default)** — `width + padding + border = actual width of an element`, and `height + padding + border = actual height of an element`. [S1]
- **The problem** — two divs with identical `width: 300px` / `height: 100px` appear different sizes if one has padding; the padded one is larger. [S1]
- **The fix** — `box-sizing` lets you include padding and borders within the total declared width/height. [S1]
- **Recommended default** — applying `box-sizing: border-box` to all elements via `*` makes layout sizing consistent. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **border-box pattern** — set `box-sizing: border-box;` so the declared width/height *contain* padding and border instead of being added to them. [S1]
- **Universal reset pattern** — `* { box-sizing: border-box; }` applies predictable sizing to every element. [S1]
## 📖 세부 내용 (Details)
By default, the actual width and height of an element include the padding and borders added to the specified dimensions: [S1]
- `width + padding + border = actual width of an element` [S1]
- `height + padding + border = actual height of an element` [S1]
This means two divs given the same `width` (300px) and `height` (100px) can appear different — the one with 50px padding is larger because the padding is added to the specified width/height. The `box-sizing` property solves this by allowing padding and borders to be included in the total width/height calculation. [S1]
**Example 1 — without `box-sizing` (the problem)** [S1]
```css
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
```
**Example 2 — with `box-sizing: border-box` (the solution)** [S1]
```css
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
```
**Example 3 — recommended universal application** [S1]
```css
* {
box-sizing: border-box;
}
```
**Property reference** [S1]
| Property | Description |
|----------|-------------|
| `box-sizing` | Defines how the width and height of an element are calculated: should they include padding and borders, or not |
## 🛠️ 적용 사례 (Applied in summary)
The page's applied examples contrast `.div1` and `.div2` first without `box-sizing` (they render at different sizes) and then with `box-sizing: border-box` (they render identically), and finally recommend the `* { box-sizing: border-box; }` universal reset. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Predictable element sizing (language: CSS):
```css
.box {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
```
Universal reset (language: CSS):
```css
* {
box-sizing: border-box;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Default (content-box) sizing** — `width`/`height` describe only the content area; padding and border are added on top, so the rendered box is larger than the declared size. Use when you specifically want the content area to be a fixed size. [S1]
- **`border-box` sizing** — padding and border are included within the declared `width`/`height`, so a `300px` box stays `300px` regardless of padding. The page recommends this (including applying it to all elements via `*`) for predictable layouts. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Box Model]], [[CSS Padding]], [[CSS Border]], [[CSS Width and Max-width]]
- **참조 맥락:** Referenced whenever layout sizing must stay predictable across elements that carry padding or borders.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Box Sizing — https://www.w3schools.com/css/css3_box-sizing.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Box Sizing" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Buttons.md
+136
View File
@@ -0,0 +1,136 @@
---
id: css-styling-buttons
title: "CSS Styling Buttons"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS buttons", "button styling", "styled button", "button class", "rounded buttons", "button borders"]
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", "buttons", "styling", "ui"]
raw_sources: ["https://www.w3schools.com/css/css3_buttons.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Styling Buttons]]
## 🎯 한 줄 통찰 (One-line insight)
Buttons can be created from `<button>`, `<input type="button">`, or styled `<a>` elements, and CSS properties like `background-color`, `padding`, `border-radius`, and `border` give them their visual style. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Multiple sources** — buttons can be created using `<button>`, `<input type="button">`, or styled `<a>` elements. [S1]
- **Core styling properties** — `background-color`, `color`, `border`, `padding`, `border-radius`, `text-align`, `font-size`, `text-decoration`, and `cursor`. [S1]
- **Color variety** — different `background-color` values (green, blue, red, gray, black) distinguish button purposes. [S1]
- **Sizing** — `font-size` adjusts text size; `padding` controls spacing around the text. [S1]
- **Rounding** — `border-radius` rounds corners, up to `50%` for a circular effect. [S1]
- **Borders** — `border` can be solid, dotted, or dashed in various colors. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Base button class** — define a `.button` class with background, no border, white text, padding, centered text, no underline, `inline-block` display, font size, and a pointer cursor. [S1]
- **Variant classes** — layer numbered classes (`.button1`…`.button5`) over the base to vary color, size, rounding, or border. [S1]
## 📖 세부 내용 (Details)
**Basic button styling** — a basic button styling for different HTML elements. [S1]
```css
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
```
**Button colors** — buttons with different colors. [S1]
```css
.button1 {background-color: #04AA6D;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
```
**Button sizes** — buttons with different font size. [S1]
```css
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
```
**Rounded buttons** — `border-radius` adds rounded corners, up to `50%`. [S1]
```css
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
```
**Colored button borders** — borders can be solid, dotted, or dashed in various colors. (Per the source, only the `border` property is specified for each class; no `background-color`/`color` in these particular examples.) [S1]
```css
.button1 {border: 2px solid #04AA6D;}
.button2 {border: 2px dotted #008CBA;}
.button3 {border: 2px dashed #f44336;}
.button4 {border: 1px solid #e7e7e7;}
.button5 {border: 1px solid #555555;}
```
**Note on further sections** — The W3Schools page also references additional button sections (e.g. hoverable buttons, button shadow, disabled buttons, button width, button groups, animated buttons). The verbatim code for those sections was not captured from this source on this fetch; for hoverable/shadow/disabled/width specifics see [[CSS Button Hover Effects]]. Other section code: Not found in source (for this page).
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: a `.button` base style plus `.button1`–`.button5` variants for color, font size, rounding, and border style. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Base reusable button class (language: CSS):
```css
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
```
Rounded / pill / circular variants (language: CSS):
```css
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
```
## ⚖️ 모순 및 업데이트 (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 Button Hover Effects]], [[CSS Borders]], [[CSS Rounded Corners]]
- **참조 맥락:** Referenced when styling clickable buttons from `<button>`, `<input>`, or `<a>` elements.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Styling Buttons — https://www.w3schools.com/css/css3_buttons.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Styling Buttons" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Buttons_Groups.md
+133
View File
@@ -0,0 +1,133 @@
---
id: css-button-groups
title: "CSS Button Groups"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["button group", "btn-group", "horizontal button group", "vertical button group", "bordered button group", "flex buttons"]
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", "buttons", "flexbox", "ui"]
raw_sources: ["https://www.w3schools.com/css/css3_buttons_groups.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Button Groups]]
## 🎯 한 줄 통찰 (One-line insight)
A button group is just a set of buttons wrapped in a `<div>` that becomes a flex container — `display: flex` lays them out, `flex-wrap` lets them break to a new line, and `flex-direction: column` stacks them vertically. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Container = flex** — to create a group of buttons, wrap the buttons in a `<div>` element and add `display: flex;` to that `<div>`. [S1]
- **Responsive wrapping** — add `flex-wrap: wrap;` so the buttons wrap onto a new line on small screens. [S1]
- **Horizontal vs vertical** — the default flex direction is horizontal; add `flex-direction: column;` to display the buttons vertically. [S1]
- **Bordered grouping** — use the `border` property to create a bordered button group, and remove the duplicated inner border so adjacent buttons share one line. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Wrap-and-flex pattern** — `.btn-group { display: flex; }` over a set of `.button` children produces an aligned group without per-button positioning. [S1]
- **Collapse duplicate borders** — `.btn-group .button:not(:last-child) { border-right: none; }` removes the doubled border between adjacent bordered buttons so the group reads as one bar. [S1]
- **Direction switch** — the same markup becomes a vertical group purely by setting `flex-direction: column;` on the container. [S1]
## 📖 세부 내용 (Details)
**CSS Horizontal Button Group** [S1]
To create a group of buttons, wrap the buttons in a `<div>` element, and add `display: flex;` to the `<div>` element. Also add `flex-wrap: wrap;`, to let the buttons wrap on a new line on small screens:
```css
.btn-group {
display: flex;
flex-wrap: wrap;
}
.button {
background-color: #04AA6D;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
}
.btn-group .button:hover {
background-color: dodgerblue;
}
```
**CSS Bordered Button Group** [S1]
Use the `border` property to create a bordered button group:
```css
.button {
border: 1px solid green;
}
.btn-group .button:not(:last-child) {
border-right: none;
}
```
**CSS Vertical Button Group** [S1]
To create a vertical button group, wrap the buttons in a `<div>` element, and add `display: flex;` to the `<div>` element. Also add `flex-direction: column;`, to let the buttons be displayed in a vertical way:
```css
.btn-group {
display: flex;
flex-direction: column;
}
```
**CSS Animated Buttons** [S1]
The source page presents an "CSS Animated Buttons" section with four labelled examples — "Add an arrow on hover", "Add a 'pressed' effect on click", "Fade in on hover", and "Add a 'ripple' effect on click". The CSS source for these four examples is only offered behind "Try it Yourself" interactive links and is not present as text on the page.
> Code for the four animated-button examples: Not found in source.
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: a horizontal `.btn-group` of `.button` elements, a bordered variant collapsing the shared border, and a vertical variant. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Horizontal group container (language: CSS):
```css
.btn-group {
display: flex;
flex-wrap: wrap;
}
```
Vertical group container (language: CSS):
```css
.btn-group {
display: flex;
flex-direction: column;
}
```
Collapse the inner border (language: CSS):
```css
.btn-group .button:not(:last-child) {
border-right: none;
}
```
## ⚖️ 모순 및 업데이트 (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 Buttons]], [[CSS Flexbox]], [[CSS Borders]], [[CSS Pagination]]
- **참조 맥락:** Referenced when grouping related actions (toolbars, segmented controls) into a single visual unit.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Button Groups — https://www.w3schools.com/css/css3_buttons_groups.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Button Groups" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Buttons_Hover.md
+128
View File
@@ -0,0 +1,128 @@
---
id: css-button-hover-effects
title: "CSS Button Hover Effects"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["button hover", ":hover button", "hoverable buttons", "button shadow", "disabled button", "button width"]
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", "buttons", "hover", "ui"]
raw_sources: ["https://www.w3schools.com/css/css3_buttons_hover.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Button Hover Effects]]
## 🎯 한 줄 통찰 (One-line insight)
The `:hover` pseudo-class changes a button's appearance on mouse-over, and combined with `transition-duration`, `box-shadow`, `opacity`, and `width` it produces hover, shadow, disabled, and full-width button effects. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`:hover` pseudo-class** — used to change the style of a button when you mouse over it. [S1]
- **`transition-duration`** — added to the base button so the hover change animates smoothly. [S1]
- **`box-shadow`** — adds a shadow to a button (always-on or on hover). [S1]
- **`opacity`** — adds transparency to create a "disabled" look (paired with `cursor: not-allowed`). [S1]
- **`width`** — defines a specific width for a button. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Animated hover** — set `transition-duration` on `.button` and override `background-color`/`color` in `.button:hover`. [S1]
- **Shadow on hover vs always** — `.button1` carries a permanent shadow; `.button2:hover` shows the shadow only on hover. [S1]
- **Disabled look** — combine reduced `opacity` with `cursor: not-allowed`. [S1]
- **Sizing** — set width in px (`250px`), percentage of parent (`50%`), or full width (`100%`). [S1]
## 📖 세부 내용 (Details)
**Hoverable buttons** — the CSS `:hover` pseudo-class is used to change the style of a button when you mouse over it. [S1]
```css
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
```
**Buttons with shadow** — the CSS `box-shadow` property is used to add a shadow to a button. `.button1` has a permanent shadow; `.button2` shows a shadow only on hover. [S1]
```css
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
.button2:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
```
**Disabled button** — the CSS `opacity` property can be used to add transparency to a button (creates a "disabled" look). [S1]
```css
.disabledbtn {
opacity: 0.6;
cursor: not-allowed;
}
```
**Button width** — the CSS `width` property can be used to define a specific width for a button. By default, the size of a button is determined by its text content. [S1]
```css
.button1 {
width: 250px;
}
.button2 {
width: 50%;
}
.button3 {
width: 100%;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: an animated `:hover` color swap, permanent vs hover-only `box-shadow`, a `.disabledbtn` style, and fixed/percentage/full-width button widths. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Animated hover color change (language: CSS):
```css
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50;
color: white;
}
```
Show shadow only on hover (language: CSS):
```css
.button2:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.6);
}
```
## ⚖️ 모순 및 업데이트 (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 Styling Buttons]], [[CSS Box Shadow]], [[CSS Pseudo-classes]]
- **참조 맥락:** Referenced when adding interactive hover, shadow, disabled, or width behavior to styled buttons.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Button Hover Effects — https://www.w3schools.com/css/css3_buttons_hover.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Button Hover Effects" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Center_Align.md
+94
View File
@@ -0,0 +1,94 @@
---
id: css-center-align
title: "CSS Center Align"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["center align", "center a div", "flexbox centering", "horizontal and vertical center", "CSS centering methods"]
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", "alignment", "flexbox"]
raw_sources: ["https://www.w3schools.com/css/css_align.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Center Align]]
## 🎯 한 줄 통찰 (One-line insight)
CSS can center elements horizontally, vertically, or both with several methods depending on the element type — and Flexbox is the most modern and recommended method for centering content both horizontally and vertically. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Multiple methods, choose by element type** — with CSS you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element. [S1]
- **Horizontal options** — `margin: auto` for block elements, `text-align: center` for text, and `float` or `position` for left/right alignment. [S1]
- **Vertical options** — Flexbox with `align-items: center`, Grid with `place-items: center`, or Position plus Transform for elements of unknown dimensions. [S1]
- **Recommended method** — Flexbox is the most modern and recommended method for centering content both horizontally and vertically. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Flexbox centering pattern** — on a container, `display: flex` + `justify-content: center` + `align-items: center` centers a child on both axes. [S1]
- **Method-by-need selection** — pick the centering technique based on whether you are centering a block, text, an image, or an element of unknown size. [S1]
## 📖 세부 내용 (Details)
**Centering elements in CSS**
With CSS, you can center elements (horizontally, vertically, or both) with several methods, depending on the type of element. [S1]
**Center a div element using flexbox** [S1]
```css
.center {
display: flex;
justify-content: center;
align-items: center;
}
```
**Horizontal alignment methods**
For horizontal alignment, options include using `margin: auto` for block elements, `text-align: center` for text, and `float` or `position` for left/right alignment. [S1]
**Vertical alignment methods**
For vertical alignment, the page recommends modern techniques: Flexbox with `align-items: center`, Grid with `place-items: center`, or Position plus Transform for elements of unknown dimensions. [S1]
**Key tip**
Flexbox is the most modern and recommended method for centering content both horizontally and vertically. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied example is centering a `div` both horizontally and vertically with Flexbox. The horizontal and vertical method lists point to the dedicated [[CSS Horizontal Align]] and [[CSS Vertical Align]] pages for full examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Flexbox both-axis centering (language: CSS):
```css
.center {
display: flex;
justify-content: center;
align-items: center;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Choosing a centering method** — `margin: auto` (block), `text-align: center` (text), `float`/`position` (directional), Flexbox (`align-items: center`), Grid (`place-items: center`), and Position+Transform (unknown dimensions) each suit a different element type. Flexbox is the most modern and recommended choice for centering on both axes. [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)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Horizontal Align]], [[CSS Vertical Align]], [[CSS Inline Block]], [[CSS Flexbox]]
- **참조 맥락:** The overview entry point for any task that needs to center content on one or both axes.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Center Align — https://www.w3schools.com/css/css_align.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Center Align" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Clear_Clearfix.md
+134
View File
@@ -0,0 +1,134 @@
---
id: css-clear-and-clearfix
title: "CSS Clear and Clearfix"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["clear", "clearfix", "clearfix hack", "CSS clear", "clear both", "float clearing"]
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", "float", "clear", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_float_clear.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Clear and Clearfix]]
## 🎯 한 줄 통찰 (One-line insight)
The `clear` property stops elements from wrapping around floated content, and the clearfix hack (an `::after` pseudo-element with `clear: both`) forces a container to expand to include its floated children. [S1]
## 🧠 핵심 개념 (Core concepts)
- **clear purpose** — the `clear` property specifies behavior for elements adjacent to floated content; it prevents elements from wrapping around or beside the floated content. [S1]
- **none (default)** — allows floating on either side. [S1]
- **left** — pushes the element below left-side floats. [S1]
- **right** — pushes the element below right-side floats. [S1]
- **both** — pushes the element below floats on both sides. [S1]
- **inherit** — inherits the parent's clear value. [S1]
- **clearfix problem** — when floated elements exceed their container's height, they overflow the container. [S1]
- **clearfix solution** — use the `::after` pseudo-element to contain floats properly. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Drop below a float** — set `clear` (e.g. `clear: left`) on the next element to push it below the float instead of beside it. [S1]
- **Clearfix hack** — add an `::after` pseudo-element with empty content, `clear: both`, and `display: table` to make a parent contain its floated children. [S1]
## 📖 세부 내용 (Details)
**The clear property** [S1]
The `clear` property specifies behavior for elements adjacent to floated content. It prevents elements from wrapping around or beside the floated content.
**Clear property values** [S1]
| Value | Behavior |
|-------|----------|
| none | Allows floating on either side (default) |
| left | Pushes element below left-side floats |
| right | Pushes element below right-side floats |
| both | Pushes element below floats on both sides |
| inherit | Inherits parent's clear value |
**Clear example** [S1]
```css
div1 {
float: left;
}
div2 {
clear: left;
}
```
**The clearfix hack** [S1]
When floated elements exceed container height, they overflow. The clearfix solution uses the `::after` pseudo-element to contain floats properly.
```css
.clearfix::after {
content: "";
clear: both;
display: table;
}
```
**How it works** [S1]
- `.clearfix::after` targets the pseudo-element generated after the element's content.
- `content: ""` renders the pseudo-element despite having no visible content.
- `clear: both` pushes following content below floated elements and expands the parent container.
- `display: table` establishes a new block formatting context for containing floats.
The page notes: "This clears both left and right floats, effectively pushing any following content below the floated elements, and forces the parent container to expand to include them." [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's applied examples are a `clear: left` element dropped below a left-floated sibling, and a `.clearfix` container that uses `::after { content: ""; clear: both; display: table; }` to expand around its floated children. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Push an element below a left float (language: CSS):
```css
div1 {
float: left;
}
div2 {
clear: left;
}
```
Clearfix hack to contain floats (language: CSS):
```css
.clearfix::after {
content: "";
clear: both;
display: table;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **none** — default; element may sit beside floats. [S1]
- **left / right** — drop the element below floats on that one side. [S1]
- **both** — drop below floats on either side; used inside the clearfix hack. [S1]
- **inherit** — take the parent's clear value. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Float]], [[CSS Overflow]], [[CSS Position Fixed and Absolute]]
- **참조 맥락:** Referenced whenever floated elements must be cleared or a container must expand to contain its floats.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Clear and Clearfix — https://www.w3schools.com/css/css_float_clear.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Clear and Clearfix" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Color_Keywords.md
+148
View File
@@ -0,0 +1,148 @@
---
id: css-color-keywords
title: "CSS Color Keywords"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["transparent keyword", "currentcolor", "inherit color", "CSS special colors", "color keyword", "predefined color keywords"]
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", "colors", "keywords"]
raw_sources: ["https://www.w3schools.com/css/css_colors_keywords.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Color Keywords]]
## 🎯 한 줄 통찰 (One-line insight)
CSS provides special predefined color keywords — `transparent`, `currentcolor`, and `inherit` — that go beyond fixed color values to make backgrounds see-through, reuse the current text color, or pull a color from the parent element. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Special keywords** — CSS has special predefined color keywords usable with properties like `color`, `background-color`, and `border-color`. The page covers `transparent`, `currentcolor`, and `inherit`. [S1]
- **`transparent`** — makes a color transparent; often used to make a transparent background color for an element. Equivalent to `rgba(0,0,0,0)`. [S1]
- **`currentcolor`** — acts like a variable holding the current value of the element's `color` property. [S1]
- **`inherit`** — specifies that a property should inherit its value from its parent element; usable for any CSS property on any HTML element. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Keep-in-sync pattern** — `currentcolor` ties borders, shadows, or backgrounds to the element's text color so they stay consistent. [S1]
- **Parent-derived pattern** — `inherit` (and `currentcolor` reading a parent's `color`) lets a child reuse a value defined upstream. [S1]
- **Transparency pattern** — `transparent` is a named stand-in for a fully transparent color (`rgba(0,0,0,0)`). [S1]
## 📖 세부 내용 (Details)
**CSS Color Keywords**
CSS has some special predefined color keywords that can be used with properties like `color`, `background-color`, and `border-color`. The page identifies three special keywords: `transparent`, `currentcolor`, and `inherit`. [S1]
**The `transparent` Keyword**
The `transparent` keyword is used to make a color transparent. This is often used to make a transparent background color for an element. [S1]
```css
body {
background-image: url("paper.gif");
}
div {
background-color: transparent;
}
```
**Note:** The `transparent` keyword is equivalent to `rgba(0,0,0,0)`. RGBA color values are an extension of RGB color values with an alpha channel — which specifies the opacity for a color. [S1]
**The `currentcolor` Keyword**
The `currentcolor` keyword is like a variable that holds the current value of the `color` property of an element. This keyword can be useful if you want a specific color to be consistent in an element or a page. [S1]
In this example the border color of the `<div>` element will be blue, because the text color of the `<div>` element is blue: [S1]
```css
div {
color: blue;
border: 10px solid currentcolor;
}
```
In this example the `<div>`'s background color is set to the current color value of the body element: [S1]
```css
body {
color: purple;
}
div {
background-color: currentcolor;
}
```
In this example the `<div>`'s border color and shadow color is set to the current color value of the body element: [S1]
```css
body {
color: green;
}
div {
box-shadow: 0px 0px 15px currentcolor;
border: 5px solid currentcolor;
}
```
**The `inherit` Keyword**
The `inherit` keyword specifies that a property should inherit its value from its parent element. The `inherit` keyword can be used for any CSS property, and on any HTML element. [S1]
In this example the `<span>`'s border settings will be inherited from the parent element: [S1]
```css
div {
border: 2px solid red;
}
span {
border: inherit;
}
```
**Standard color names:** The full list of 140 standard color names is not detailed on this page; it focuses exclusively on the three special keywords above. (Not found in source on this page.) [S1]
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Choosing among the special keywords: [S1]
- **`transparent`** — when you want no visible color (e.g., a see-through background); equivalent to `rgba(0,0,0,0)`.
- **`currentcolor`** — when a border/shadow/background should track the element's own (or a parent's) text `color` for visual consistency.
- **`inherit`** — when a property should explicitly take its parent's value, for any property on any element.
## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: a transparent `<div>` over a paper background; `currentcolor` driving a border, a background, and a box-shadow + border; and a `<span>` border inheriting from its parent. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Border that tracks the element's text color (language: CSS):
```css
div {
color: blue;
border: 10px solid currentcolor;
}
```
Inherit a property from the parent:
```css
span {
border: inherit;
}
```
## ⚖️ 모순 및 업데이트 (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 Colors (CSS3)]], [[CSS Background Clip]], [[CSS Multiple Backgrounds]]
- **참조 맥락:** Referenced when reusing the current text color, inheriting parent values, or creating transparent backgrounds.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Color Keywords — https://www.w3schools.com/css/css_colors_keywords.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Color Keywords" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Colors.md
+111
View File
@@ -0,0 +1,111 @@
---
id: css-colors
title: "CSS Colors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS color", "color names", "background-color", "RGB HEX HSL", "RGBA HSLA"]
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", "colors"]
raw_sources: ["https://www.w3schools.com/css/css_colors.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Colors]]
## 🎯 한 줄 통찰 (One-line insight)
CSS colors can be specified using predefined color names or with RGB, HEX, HSL, RGBA, and HSLA values, and are applied through properties such as `color`, `background-color`, and `border`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Ways to specify color** — predefined color names, or RGB, HEX, HSL, RGBA, and HSLA values. [S1]
- **Standard color names** — CSS/HTML support 140 standard color names (e.g. Tomato, Orange, DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray). [S1]
- **Where colors apply** — `background-color` sets the background, `color` sets the text color, and `border` can set a colored border. [S1]
- **Transparency** — RGBA and HSLA values add an alpha channel for transparency (e.g. `0.5` = 50% transparent). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Name everywhere** — a single color name (e.g. `Tomato`) can be reused across background, text, and border. [S1]
- **Equivalent representations** — the same color can be expressed as a name, RGB, HEX, HSL, plus RGBA/HSLA with transparency. [S1]
## 📖 세부 내용 (Details)
Colors in CSS can be specified by predefined color names, as well as by RGB, HEX, HSL, RGBA, and HSLA values. CSS/HTML support 140 standard color names. [S1]
**Background Color** — you can set the background color for HTML elements: [S1]
```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
```
**Text Color** — you can set the color of text: [S1]
```html
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
```
**Border Color** — you can set the color of borders: [S1]
```html
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
```
**Color Values** — colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values. The following representations all define the same color (`Tomato`): [S1]
| Format | Value |
| --- | --- |
| RGB | `rgb(255, 99, 71)` |
| HEX | `#ff6347` |
| HSL | `hsl(9, 100%, 64%)` |
| RGBA (50% transparent) | `rgba(255, 99, 71, 0.5)` |
| HSLA (50% transparent) | `hsla(9, 100%, 64%, 0.5)` |
You will learn more about RGB, HEX, and HSL in the next chapters. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply colors to headings and paragraphs via `background-color`, `color`, and `border`, and show `Tomato` expressed in five value formats. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Applying named colors to background, text, and border (language: HTML):
```html
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<h1 style="color:Tomato;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
```
Equivalent value formats for one color (language: CSS):
```css
/* all define Tomato */
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5) /* 50% transparent */
hsla(9, 100%, 64%, 0.5) /* 50% transparent */
```
## ⚖️ 모순 및 업데이트 (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 Syntax]], [[CSS Add Inline]], [[CSS Introduction]]
- **참조 맥락:** Referenced whenever specifying any color value for text, backgrounds, or borders.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Colors — https://www.w3schools.com/css/css_colors.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Colors_CSS3.md
+115
View File
@@ -0,0 +1,115 @@
---
id: css-colors-css3
title: "CSS Colors (CSS3)"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["RGBA", "HSLA", "CSS opacity", "CSS3 colors", "alpha channel CSS", "transparent color"]
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", "colors", "opacity"]
raw_sources: ["https://www.w3schools.com/css/css3_colors.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Colors (CSS3)]]
## 🎯 한 줄 통찰 (One-line insight)
CSS supports 140+ color names plus HEX, RGB, RGBA, HSL, and HSLA values, where the trailing alpha channel in RGBA/HSLA (and the `opacity` property) controls transparency from 0.0 to 1.0. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Color support** — CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. [S1]
- **RGBA** — extends RGB colors with an alpha channel that specifies opacity. [S1]
- **HSLA** — extends HSL colors with an alpha channel for opacity control. [S1]
- **Alpha range** — the alpha parameter ranges from 0.0 (fully transparent) to 1.0 (fully opaque). [S1]
- **`opacity` property** — sets the opacity for the whole element; both background color and text become opaque/transparent. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Alpha-channel pattern** — append an alpha argument to `rgb(...)`/`hsl(...)` to get `rgba(...)`/`hsla(...)`, affecting only that color's transparency. [S1]
- **Element-opacity pattern** — `opacity` applies to the whole element (background and text alike), distinguishing it from a per-color alpha. [S1]
## 📖 세부 내용 (Details)
**CSS Colors**
CSS supports 140+ color names, HEX values, RGB values, RGBA values, HSL values, HSLA values, and opacity. [S1]
**RGBA Colors**
RGBA color values are an extension of RGB color values with an alpha channel that specifies the opacity for a color. The syntax is `rgba(red, green, blue, alpha)`. The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). The page shows a swatch series: `rgba(255, 0, 0, 0.2);`, `rgba(255, 0, 0, 0.4);`, `rgba(255, 0, 0, 0.6);`, and `rgba(255, 0, 0, 0.8);`. [S1]
```css
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
```
**HSLA Colors**
HSLA color values are an extension of HSL color values with an alpha channel that specifies the opacity for a color. The syntax is `hsla(hue, saturation, lightness, alpha)`. The alpha parameter ranges from 0.0 to 1.0. The page shows a swatch series: `hsla(0, 100%, 30%, 0.3);`, `hsla(0, 100%, 50%, 0.3);`, `hsla(0, 100%, 70%, 0.3);`, and `hsla(0, 100%, 90%, 0.3);`. [S1]
```css
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
```
**CSS `opacity` Property**
The `opacity` property sets the opacity for the whole element (both background color and text will be opaque/transparent). The value ranges from 0.0 to 1.0. [S1]
**Note:** When using the `opacity` property to add transparency to the background of an element, the text inside the element will also be transparent/opaque! [S1]
```css
#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
RGBA/HSLA alpha vs. the `opacity` property: [S1]
- **RGBA / HSLA alpha** — makes only that specific color transparent (e.g., a translucent background) while leaving other content, such as text, fully opaque.
- **`opacity` property** — applies transparency to the whole element, so the text inside also becomes transparent.
Choose the per-color alpha when you want a see-through background but readable text; choose `opacity` when the entire element should fade together. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: translucent RGBA backgrounds (`#p1`–`#p3`), translucent HSLA backgrounds (`#p1`–`#p4`), and element-wide `opacity: 0.6` backgrounds. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Translucent background color via RGBA (language: CSS):
```css
selector {
background-color: rgba(255, 0, 0, 0.3);
}
```
Whole-element transparency via opacity:
```css
selector {
background-color: rgb(255, 0, 0);
opacity: 0.6;
}
```
## ⚖️ 모순 및 업데이트 (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 Color Keywords]], [[CSS Background Clip]], [[CSS Multiple Backgrounds]]
- **참조 맥락:** Referenced whenever a design needs translucent colors, layered overlays, or controlled element transparency.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Colors (CSS3) — https://www.w3schools.com/css/css3_colors.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Colors (CSS3)" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Combinators.md
+112
View File
@@ -0,0 +1,112 @@
---
id: css-combinators
title: "CSS Combinators"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["combinators", "descendant selector", "child selector", "sibling selector", "selector relationships"]
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", "selectors", "combinators"]
raw_sources: ["https://www.w3schools.com/css/css_combinators.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Combinators]]
## 🎯 한 줄 통찰 (One-line insight)
A combinator defines the relationship between two or more selectors, letting you target elements by their position relative to another element — descendants (space), direct children (`>`), the next sibling (`+`), or all following siblings (`~`). [S1]
## 🧠 핵심 개념 (Core concepts)
- **What a combinator is** — something that defines the relationship between two or more selectors. [S1]
- **Descendant combinator (space)** — matches all elements that are descendants (children, grandchildren, etc.) of a specified element. [S1]
- **Child combinator (`>`)** — selects all elements that are direct children of a specified element. [S1]
- **Next sibling combinator (`+`)** — selects an element that is directly after a specific element (the first adjacent sibling). [S1]
- **Subsequent-sibling combinator (`~`)** — selects all elements that are next siblings of a specified element. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Relationship-based selection** — instead of adding classes, target elements by structural relationship (`div p`, `div > p`, `div + p`, `div ~ p`). [S1]
- **Direct-child vs any-descendant** — use a space to reach any depth, `>` to restrict to immediate children. [S1]
- **One-sibling vs all-siblings** — `+` matches only the first following sibling, `~` matches every following sibling. [S1]
## 📖 세부 내용 (Details)
**Definition**
A combinator is something that defines the relationship between two or more selectors. [S1]
**Descendant Combinator (space)**
The descendant combinator matches all elements that are descendants (children, grandchildren, etc.) of a specified element. The following example selects all `<p>` elements inside `<div>` elements: [S1]
```css
div p {
background-color: yellow;
}
```
**Child Combinator (`>`)**
The child combinator selects all elements that are direct children of a specified element. The following example selects all `<p>` elements that are immediate children of a `<div>`: [S1]
```css
div > p {
background-color: yellow;
}
```
**Next Sibling Combinator (`+`)**
The next sibling combinator is used to select an element that is directly after a specific element. Sibling elements must have the same parent element, and "adjacent" means "immediately following". The following example selects the first `<p>` element placed immediately after a `<div>`: [S1]
```css
div + p {
background-color: yellow;
}
```
**Subsequent-sibling Combinator (`~`)**
The subsequent-sibling combinator selects all elements that are next siblings of a specified element. The following example selects all `<p>` elements that are siblings of (and come after) a `<div>`: [S1]
```css
div ~ p {
background-color: yellow;
}
```
The page references a complete CSS Combinators Reference for additional details. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples demonstrate each of the four combinators by setting `background-color: yellow;` on the matched `<p>` elements. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
The four combinators (language: CSS):
```css
div p { background-color: yellow; } /* descendant */
div > p { background-color: yellow; } /* direct child */
div + p { background-color: yellow; } /* next sibling */
div ~ p { background-color: yellow; } /* all following siblings */
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Descendant (space) vs Child (`>`)** — space matches descendants at any depth; `>` restricts to immediate children only. [S1]
- **Next sibling (`+`) vs Subsequent sibling (`~`)** — `+` matches only the single element directly following; `~` matches every following sibling with the same parent. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Selectors]], [[CSS Pseudo-classes]], [[CSS Pseudo-elements]], [[CSS Syntax]]
- **참조 맥락:** Referenced whenever you need to select elements by their structural relationship rather than by class or id.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Combinators — https://www.w3schools.com/css/css_combinators.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Combinators" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Counters.md
+124
View File
@@ -0,0 +1,124 @@
---
id: css-counters
title: "CSS Counters"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS counters", "counter-reset", "counter-increment", "automatic numbering", "counter() function"]
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", "counters", "generated-content"]
raw_sources: ["https://www.w3schools.com/css/css_counters.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Counters]]
## 🎯 한 줄 통찰 (One-line insight)
CSS counters are "variables" maintained by CSS whose values can be incremented (or decremented) by CSS rules, enabling automatic numbering of elements like section headings — no JavaScript required. [S1]
## 🧠 핵심 개념 (Core concepts)
- **What counters are** — CSS counters are "variables" maintained by CSS, and their values can be incremented (or decremented) by CSS rules. [S1]
- **`counter-reset`** — creates or resets a counter. [S1]
- **`counter-increment`** — increments (or decrements) a counter value. [S1]
- **`content`** — inserts generated content (used with `::before`/`::after`). [S1]
- **`counter()`** — adds/returns the value of a named counter to an element. [S1]
- **Increment direction & amount** — `counter-increment` takes a second parameter (default 1); a negative value decrements, and any value can be used to step by more than 1. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Reset on container, increment on item** — set `counter-reset` on a container (e.g., `body`) and `counter-increment` on the repeated element's `::before`. [S1]
- **Compose generated labels** — combine string literals with `counter(name)` inside `content` to produce labels like `"Section 1: "`. [S1]
- **Tune the step** — change numbering direction/granularity purely by the second argument of `counter-increment` (e.g., `-1`, `2`). [S1]
## 📖 세부 내용 (Details)
**CSS Automatic Numbering With Counters**
CSS counters are "variables" maintained by CSS, and their values can be incremented (or decremented) by CSS rules. The properties/functions used are: `counter-reset` (creates or resets a counter), `counter-increment` (increments/decrements a counter value), `content` (inserts generated content), and `counter()` (adds the value of a counter to an element). [S1]
**CSS Increase and Decrease Counter**
The following example creates a counter for the page (in the `body` selector), then increments the counter value by 1 for each `<h2>` element, adding `"Section <value>: "` before each `<h2>`: [S1]
```css
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
```
**Decrementing a Counter**
The `counter-increment` property has a second parameter. The default value is 1. To decrease the counter value, you can set it to -1: [S1]
```css
body {
counter-reset: section;
}
h2::before {
counter-increment: section -1;
content: "Section " counter(section) ": ";
}
```
**Incrementing by Custom Values**
You can increment the counter by any value. Here we increment by 2: [S1]
```css
body {
counter-reset: section;
}
h2::before {
counter-increment: section 2;
content: "Section " counter(section) ": ";
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: numbering `<h2>` headings as "Section 1:", "Section 2:", etc., plus variants that decrement (`-1`) and step by 2. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic auto-numbering (language: CSS):
```css
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
```
Custom step (language: CSS):
```css
h2::before {
counter-increment: section 2;
}
```
## ⚖️ 모순 및 업데이트 (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 Nested Counters]], [[CSS Pseudo-elements]], [[CSS Lists]]
- **참조 맥락:** Referenced when generating automatic numbering for headings, lists, or sections without scripting.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Counters — https://www.w3schools.com/css/css_counters.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Counters" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Counters_Nested.md
+132
View File
@@ -0,0 +1,132 @@
---
id: css-nested-counters
title: "CSS Nested Counters"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS nested counters", "counters() function", "multi-level numbering", "section subsection numbering", "nested list numbering"]
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", "counters", "generated-content", "lists"]
raw_sources: ["https://www.w3schools.com/css/css_counters_nested.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Nested Counters]]
## 🎯 한 줄 통찰 (One-line insight)
By running two counters at once — or by using the `counters()` function — CSS can produce multi-level numbering such as "Section 1.1" or outline-style "1.1.1" labels for nested lists, all without JavaScript. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Two counters** — you can maintain more than one counter to number different levels (e.g., a `section` counter for the page and a `subsection` counter reset on each `<h1>`). [S1]
- **`counters()` function** — returns the current values of the named and nested counters, as a string. [S1]
- **`counters()` vs `counter()`** — `counter()` returns the current value of a single named counter; `counters()` returns the named and nested counter values combined into a string. [S1]
- **Separator argument** — `counters(name, separator)` inserts a string (e.g., `"."`) between nesting levels. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Per-level reset** — reset the lower-level counter on the higher-level element (reset `subsection` on each `<h1>`) so it restarts under every parent. [S1]
- **Self-nesting lists** — reset the same counter on every `<ol>` and emit `counters(section,".")` on each `<li>::before` to auto-build hierarchical numbers like 1, 1.1, 1.2. [S1]
## 📖 세부 내용 (Details)
**CSS Using Two Counters**
You can create multiple counters for different numbering levels: a `section` counter for the page and a `subsection` counter for each `<h1>` element. The `section` counter increments on each `<h1>`, while a `subsection` counter (reset on each `<h1>`) increments on each `<h2>`, producing labels like "Section 1." and "1.1". [S1]
```css
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
```
**The CSS counters() Function**
The `counters()` function returns the current values of the named and nested counters, as a string. In this example, the same `section` counter is reset on every `<ol>` and incremented on each `<li>`, and `counters(section,".")` joins the nested values with a `"."` separator to produce outline numbering within an ordered-list structure: [S1]
```css
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
```
**CSS Counter Properties**
The page lists the following counter-related properties and functions: [S1]
| Property / Function | Description |
| --- | --- |
| `content` | Used with the `::before` and `::after` pseudo-elements, to insert generated content [S1] |
| `counter-increment` | Increments one or more counter values [S1] |
| `counter-reset` | Creates or resets one or more counters [S1] |
| `counter()` | Returns the current value of the named counter [S1] |
| `counters()` | Returns the current values of the named and nested counters [S1] |
## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: "Section N." / "N.M" headings produced by two counters, and outline-style "1.1.1" numbering for a nested ordered list via `counters()`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Two-level heading numbering (language: CSS):
```css
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
```
Self-nesting list numbering (language: CSS):
```css
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`counter()`** — use when you need the value of a single counter at one level (e.g., "Section 3"). [S1]
- **`counters()`** — use when you need the named and nested counter values joined into one string for multi-level/outline numbering (e.g., "3.2.1"), supplying a separator argument such as `"."`. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Counters]], [[CSS Lists]], [[CSS Pseudo-elements]]
- **참조 맥락:** Referenced when building multi-level outline numbering for headings or nested lists.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Nested Counters — https://www.w3schools.com/css/css_counters_nested.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Nested Counters" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Custom_Fonts.md
+130
View File
@@ -0,0 +1,130 @@
---
id: css-custom-fonts
title: "CSS Custom Fonts"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["@font-face", "web fonts", "CSS custom fonts", "font-face rule", "WOFF fonts"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "fonts", "font-face", "typography"]
raw_sources: ["https://www.w3schools.com/css/css3_fonts.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Custom Fonts]]
## 🎯 한 줄 통찰 (One-line insight)
The CSS `@font-face` rule lets you define and load custom (web) fonts so a page can use a typeface without it being installed on the visitor's computer — the font file downloads automatically when needed. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`@font-face` defines and loads custom fonts** — it allows you to define and load custom fonts for use on a webpage. [S1]
- **No local installation required** — the font does not need to be installed on the user's computer; it downloads automatically when needed. [S1]
- **Two required descriptors** — `font-family` (the font name you choose) and `src` (the URL of the font file). [S1]
- **Weight variants need their own rule** — to support bold, define an additional `@font-face` rule with `font-weight: bold;` pointing at the bold font file. [S1]
- **Web-optimized formats exist** — WOFF and WOFF2 (Web Open Font Format) are optimized for web use and broadly supported; TTF/OTF are popular for desktop but are not web-optimized. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Define-then-use pattern** — declare a font with `@font-face { font-family; src; }`, then reference that name in a selector's `font-family`. [S1]
- **Weight-variant pattern** — add a second `@font-face` with `font-weight: bold;` and a bold font file. [S1]
## 📖 세부 내용 (Details)
**The CSS `@font-face` Rule** [S1]
The CSS `@font-face` rule allows you to define and load custom fonts for use on a webpage. The font does not need to be installed on the user's computer; it downloads automatically when needed.
**Basic custom font example** [S1]
In the `@font-face` rule, first define a name for the font (e.g. `myFont`) and then point to the font file. To use the font for an HTML element, refer to the font name through the `font-family` property:
```css
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
p {
font-family: myFont;
}
```
**Using bold text with `@font-face`** [S1]
You must add another `@font-face` rule containing descriptors for bold text. The `src` property points to a different (bold) font file, and `font-weight: bold;` ties it to bold usage:
```css
@font-face {
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
```
This way the browser uses the specific bold font file whenever bold text of `myFont` is requested.
**Font formats** [S1]
- **WOFF / WOFF2 (Web Open Font Format)** — optimize file size for web use, developed in 2009, have W3C Recommendation status, and are supported across all major browsers.
- **TTF (TrueType Fonts)** — emerged in the late 1980s via Apple; popular for desktop use but not web-optimized.
- **OTF (OpenType Fonts)** — developed by Apple and Microsoft as an advanced, scalable format; popular for desktop use but not web-optimized.
**CSS `@font-face` Descriptors table** [S1]
| Descriptor | Description |
|---|---|
| `font-family` | Required; defines the font name |
| `src` | Required; defines the URL of the font file |
| `font-stretch` | Optional; default `normal` |
| `font-style` | Optional; default `normal` |
| `font-weight` | Optional; default `normal` |
| `font-display` | Optional; default `auto` |
| `unicode-range` | Optional; default `U+0-10FFFF` |
## 🛠️ 적용 사례 (Applied in summary)
The page's own demonstrations (defining `myFont` via `@font-face` and applying it to `p`, plus the bold variant) serve as the applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define and use a custom font (language: CSS):
```css
@font-face {
font-family: myFont;
src: url(sansation_light.woff);
}
p {
font-family: myFont;
}
```
Add a bold variant:
```css
@font-face {
font-family: myFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **WOFF/WOFF2 vs TTF/OTF** — WOFF and WOFF2 are optimized for the web (smaller files, W3C Recommendation, broad browser support); TTF and OTF are popular for desktop use but are not web-optimized. Prefer WOFF/WOFF2 for the `src` of web fonts. [S1]
- **Regular vs bold** — a single `@font-face` covers the regular weight; declare a separate `@font-face` with `font-weight: bold;` to load a dedicated bold file. [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.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Text Effects]], [[CSS Text Shadow Effects]], [[CSS Box Shadow]]
- **참조 맥락:** Referenced when loading a brand or non-system typeface so it renders consistently regardless of the visitor's installed fonts.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Custom Fonts — https://www.w3schools.com/css/css3_fonts.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Custom Fonts" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Display.md
+133
View File
@@ -0,0 +1,133 @@
---
id: css-display
title: "CSS Display"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["display property", "block vs inline", "display block", "display inline-block", "display none"]
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", "display", "layout", "block", "inline"]
raw_sources: ["https://www.w3schools.com/css/css_display.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Display]]
## 🎯 한 줄 통찰 (One-line insight)
The `display` property controls layout by specifying whether an HTML element is treated as a block or an inline element. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Layout control** — the `display` property is an important CSS property for controlling layout; it specifies whether an HTML element is treated as a block or an inline element. [S1]
- **Block-level elements** — a block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples: `<div>`, `<h1>`–`<h6>`, `<p>`, `<form>`, `<header>`, `<footer>`, `<section>`. [S1]
- **Inline elements** — an inline element DOES NOT start on a new line and only takes up as much width as necessary. Examples: `<span>`, `<a>`, `<img>`. [S1]
- **Display changes presentation, not type** — setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. [S1]
- **`none` removes from flow** — `display: none;` makes an element completely hidden from the document flow (does not take up any space). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Override default display** — change an element's default display to suit layout, e.g. make `<li>` inline or make `<span>`/`<a>` block. [S1]
- **`inline-block`** — provides an inline-level block container that supports height, width, padding, and margin. [S1]
## 📖 세부 내용 (Details)
The `display` property is an important CSS property for controlling layout. It specifies whether an HTML element is treated as a block or an inline element. [S1]
**Block-level Elements**
A block-level element ALWAYS starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Examples include `<div>`, `<h1>`–`<h6>`, `<p>`, `<form>`, `<header>`, `<footer>`, and `<section>`. [S1]
**Inline Elements**
An inline element DOES NOT start on a new line and only takes up as much width as necessary. Examples include `<span>`, `<a>`, and `<img>`. [S1]
**Common Display Values** [S1]
| Value | Description |
|-------|-------------|
| inline | Displays an element as an inline element |
| block | Displays an element as a block element |
| contents | Makes the container disappear, child elements move up a DOM level |
| flex | Block-level flex container |
| grid | Block-level grid container |
| inline-block | Inline-level block container with height/width/padding/margin support |
| none | Completely hidden from the document flow (does not take up any space) |
**Display each `<li>` as inline:** [S1]
```css
li {
display: inline;
}
```
**Display `<span>` as a block element:** [S1]
```css
span {
display: block;
}
```
**Display anchor `<a>` as a block element:** [S1]
```css
a {
display: block;
}
```
**Applying multiple display values:** [S1]
```css
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
p.ex5 {display: flex;}
p.ex6 {display: grid;}
```
**Note:** Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. [S1]
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Block vs inline** — choose block (`display: block;`) when the element should start on a new line and take the full width; choose inline (`display: inline;`) when it should flow within text and take only the width it needs. [S1]
- **`inline-block`** — choose this when you need inline placement (no forced new line) but still want to set height, width, padding, and margin. [S1]
- **`none`** — choose when the element should be completely removed from the flow and take up no space. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: `<li>` set to inline, `<span>` and `<a>` set to block, and a paragraph set demonstrating `none`, `inline`, `block`, `inline-block`, `flex`, and `grid`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Override default display to inline (language: CSS):
```css
li {
display: inline;
}
```
Override default display to block (language: CSS):
```css
span {
display: block;
}
```
## ⚖️ 모순 및 업데이트 (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 Visibility Hide]], [[CSS Max Width]], [[CSS Position]]
- **참조 맥락:** Referenced whenever controlling how an element participates in page layout (block vs inline) or removing it from flow.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Display — https://www.w3schools.com/css/css_display.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Display" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Dropdowns.md
+170
View File
@@ -0,0 +1,170 @@
---
id: css-dropdowns
title: "CSS Dropdowns"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["dropdown", "CSS dropdown menu", "hover dropdown", "dropdown box", "pure CSS dropdown"]
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", "dropdown", "hover", "menu"]
raw_sources: ["https://www.w3schools.com/css/css_dropdowns.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Dropdowns]]
## 🎯 한 줄 통찰 (One-line insight)
A CSS dropdown reveals hidden content on hover by combining a `position: relative` wrapper, an absolutely positioned `display: none` content box, and a `:hover` rule that flips it to `display: block` — no JavaScript required. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Dropdown** — a UI element that displays content (text, links, images) when the user moves over or interacts with a trigger element such as a `div`, `button`, `p`, or `a`. [S1]
- **Wrapper positioning** — the outer `.dropdown` container is given `position: relative` so the dropdown content can be positioned relative to it. [S1]
- **Hidden-by-default content** — `.dropdown-content` starts at `display: none` and `position: absolute`, so it does not occupy space until shown. [S1]
- **Hover reveal** — the `.dropdown:hover .dropdown-content` rule sets `display: block`, exposing the content while the pointer is over the wrapper. [S1]
- **Visual depth** — a `box-shadow` is used to give the dropdown box a floating, layered appearance. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Relative-parent / absolute-child** — pair a `position: relative` wrapper with a `position: absolute` content box so the box anchors to the wrapper. [S1]
- **Hover toggle** — switch a child from `display: none` to `display: block` via a parent `:hover` descendant selector, achieving show/hide without scripting. [S1]
- **Styled trigger button** — a `.dropbtn` class styles the trigger (background color, padding, no border, pointer cursor) and changes color on parent hover. [S1]
## 📖 세부 내용 (Details)
**What is a CSS dropdown?**
A CSS dropdown is a UI element that displays content when users click or hover over a trigger element like a button or link. The trigger can be a `div`, `button`, `p`, or `a` tag, and the hidden dropdown content displays on interaction. [S1]
**Example 1 — Dropdown Box with Text**
A basic hoverable dropdown. The parent uses `position: relative`; the `.dropdown-content` is hidden (`display: none`) and absolutely positioned, with a `min-width` of `130px` and a `box-shadow` for depth. The `:hover` selector reveals it: [S1]
```html
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 130px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">Mouse over me!
<div class="dropdown-content">Hello World!</div>
</div>
```
**Example 2 — Dropdown Menu**
Extends the dropdown into an interactive menu. A styled `.dropbtn` button (green `#4CAF50` background, white text, `16px` padding) triggers the menu; links inside `.dropdown-content` are block-level with padding and no underline, and change background on hover. The button darkens (`#3e8e41`) when the dropdown is hovered: [S1]
```html
<style>
.dropdown {
position: relative;
}
/* Style the dropdown button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown content */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/* Links inside dropdown content */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
/* Show the dropdown content on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change background color of dropdown button on hover */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown Menu</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
```
## 🛠️ 적용 사례 (Applied in summary)
The two examples on the page are the applied demonstrations: a text dropdown box and a link-based dropdown menu, both shown as complete self-contained markup. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Core relative-parent / hover-reveal pattern (language: CSS):
```css
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown:hover .dropdown-content {
display: block;
}
```
## ⚖️ 모순 및 업데이트 (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 Advanced Dropdowns]], [[CSS Position]], [[CSS Navigation Bar]]
- **참조 맥락:** Referenced whenever building hoverable menus, tooltips, or pop-over content panels in pure CSS.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Dropdowns — https://www.w3schools.com/css/css_dropdowns.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Dropdowns" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Dropdowns_Advanced.md
+282
View File
@@ -0,0 +1,282 @@
---
id: css-advanced-dropdowns
title: "CSS Advanced Dropdowns"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["advanced dropdown", "right-aligned dropdown", "dropdown image", "dropdown navbar", "navbar dropdown"]
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", "dropdown", "navbar", "alignment"]
raw_sources: ["https://www.w3schools.com/css/css_dropdowns_advanced.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Advanced Dropdowns]]
## 🎯 한 줄 통찰 (One-line insight)
Building on the basic hover dropdown, advanced dropdowns control alignment with `right: 0;` / `left: 0;`, embed images in the content box, and drop the menu into a floated navbar `<li class="dropdown">`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Alignment control** — whether the dropdown content opens left-to-right or right-to-left is determined by the `left` and `right` properties on `.dropdown-content`; adding `right: 0;` makes it go from right to left. [S1]
- **Inline-block wrapper** — for aligned and navbar dropdowns the wrapper uses `display: inline-block` (and `position: relative`) so it sits in the flow next to siblings. [S1]
- **Stacking** — advanced dropdowns add `z-index: 1;` to the content box so it layers above following content. [S1]
- **Dropdown with image** — a dropdown can reveal an image plus a `.desc` caption instead of plain text/links, triggered by hovering an image trigger. [S1]
- **Dropdown navbar** — a dropdown can live inside a navigation bar as one `<li class="dropdown">` among other `<li>` links, with its menu absolutely positioned beneath the bar. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Side anchoring** — set `right: 0;` (or `left: 0;`) on the absolutely positioned content box to anchor the menu to either edge of its wrapper. [S1]
- **Image-as-trigger** — use an `<img>` as the hover trigger and reveal a larger image + caption in the content box. [S1]
- **Navbar integration** — float `<li>` items and treat one as `li.dropdown { display: inline-block; }`, sharing hover styling with the bar links via grouped selectors. [S1]
## 📖 세부 내용 (Details)
**Overview**
This page covers three advanced dropdown techniques: a right-aligned dropdown, a dropdown containing an image, and a dropdown inside a navbar. To control direction, the page notes: if you want the dropdown menu to go from right to left instead of left to right, add `right: 0;`. [S1]
**Example 1 — Right-aligned (Aligned Dropdown Content)**
Two dropdowns are floated left and right; the left one forces `left:0;` on its content while the right one uses the stylesheet default with `right: 0;`. The wrapper is `display: inline-block;` and the content box has `z-index: 1;`: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h2>Aligned Dropdown Content</h2>
<p>Determine whether the dropdown content should go from left to right or right to left with the left and right properties.</p>
<div class="dropdown" style="float:left;">
<button class="dropbtn">Left</button>
<div class="dropdown-content" style="left:0;">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="dropdown" style="float:right;">
<button class="dropbtn">Right</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</body>
</html>
```
**Example 2 — Dropdown with Image**
Hovering a small image reveals a larger image and a `.desc` caption inside the dropdown content: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>
<div class="dropdown">
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
<div class="dropdown-content">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Beautiful Cinque Terre</div>
</div>
</div>
</body>
</html>
```
**Example 3 — Dropdown Navbar**
A navigation bar (`ul` with `overflow: hidden` and a dark background) where one `<li class="dropdown">` contains a `.dropbtn` link and an absolutely positioned `.dropdown-content`. Bar links and the dropdown button share hover styling via grouped selectors: [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
h2, p {
margin: 10px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #38444d;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Dropdown</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul>
<h2>Dropdown Menu in Navbar</h2>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>
</body>
</html>
```
## 🛠️ 적용 사례 (Applied in summary)
The page's three complete examples — right/left aligned dropdowns, an image dropdown, and a navbar dropdown — are the applied demonstrations. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Edge alignment of the content box (language: CSS):
```css
.dropdown-content {
position: absolute;
right: 0; /* anchor to right edge; use left: 0; for left edge */
z-index: 1;
}
```
Navbar dropdown item (language: CSS):
```css
li.dropdown {
display: inline-block;
}
.dropdown:hover .dropdown-content {
display: block;
}
```
## ⚖️ 모순 및 업데이트 (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 Dropdowns]], [[CSS Navigation Bar]], [[CSS Position]]
- **참조 맥락:** Referenced when a basic dropdown needs edge alignment, image content, or integration into a site navigation bar.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Advanced Dropdowns — https://www.w3schools.com/css/css_dropdowns_advanced.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Advanced Dropdowns" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Flexbox.md
+120
View File
@@ -0,0 +1,120 @@
---
id: css-flexbox-intro
title: "CSS Flexbox Intro"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Flexbox", "Flexible Box Layout", "display flex", "flex container flex items", "CSS flex layout"]
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", "flexbox", "layout"]
raw_sources: ["https://www.w3schools.com/css/css3_flexbox.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Flexbox Intro]]
## 🎯 한 줄 통찰 (One-line insight)
CSS Flexbox (the Flexible Box Layout module) is a one-dimensional layout model that arranges items horizontally or vertically inside a flex container in a flexible, responsive way. [S1]
## 🧠 핵심 개념 (Core concepts)
- **What it is** — CSS Flexbox is short for the CSS Flexible Box Layout module; it is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. [S1]
- **Flex container** — the parent element, made a flex container with `display: flex` (or `inline-flex`). [S1]
- **Flex items** — the direct children of the container automatically become flex items. [S1]
- **One- vs two-dimensional** — CSS Flexbox is used for a one-dimensional layout, with rows OR columns; CSS Grid is used for a two-dimensional layout, with rows AND columns. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Container/item pattern** — declare `display: flex` on a parent; its direct children become arrangeable flex items automatically. [S1]
- **One-dimensional choice** — reach for flexbox when laying out along a single axis (a row OR a column); reach for Grid for two-axis layouts. [S1]
## 📖 세부 내용 (Details)
CSS Flexbox is short for the CSS Flexible Box Layout module. Flexbox is a layout model for arranging items (horizontally or vertically) within a container, in a flexible and responsive way. [S1]
Flexbox consists of: [S1]
- **A Flex Container** — the parent element with `display: flex` or `inline-flex`. [S1]
- **Flex Items** — the direct children that automatically become flex items. [S1]
**Flexbox vs Grid:** CSS Flexbox is used for a one-dimensional layout, with rows OR columns. CSS Grid is used for a two-dimensional layout, with rows AND columns. [S1]
**Example — a basic flex container with three items** [S1]
```html
<html>
<head>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
</body>
</html>
```
**CSS Flexbox properties / browser-support table:** Not found in source (a property reference table was not present in the fetched content for this intro page; the source links forward to the Flex Container, Flex Items, and Flex Responsive pages). [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's applied example is a `.container` set to `display: flex` with a DodgerBlue background holding three styled `div` children ("Item 1", "Item 2", "Item 3"), which render in a horizontal row. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Make an element a flex container (language: CSS):
```css
.container {
display: flex;
}
```
Container with three items (language: HTML):
```html
<div class="container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Flexbox** — one-dimensional layout (rows OR columns). Choose it for arranging items along a single axis flexibly and responsively. [S1]
- **CSS Grid** — two-dimensional layout (rows AND columns). Choose it when you need to control both axes simultaneously. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Flex Container]], [[CSS Flex Items]], [[CSS Grid]], [[CSS Media Queries]]
- **참조 맥락:** The entry point for single-axis flexible layouts; precedes the Flex Container and Flex Items detail pages.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Flexbox Intro — https://www.w3schools.com/css/css3_flexbox.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Intro" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Flexbox_Align.md
+147
View File
@@ -0,0 +1,147 @@
---
id: css-flexbox-align-items
title: "CSS Flexbox Align Items"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["align-items", "align-content", "flexbox cross-axis alignment", "vertical flex alignment", "flexbox centering"]
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", "flexbox", "align-items", "align-content"]
raw_sources: ["https://www.w3schools.com/css/css3_flexbox_container_align.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Flexbox Align Items]]
## 🎯 한 줄 통찰 (One-line insight)
`align-items` manages vertical alignment of flex items along the cross-axis, while `align-content` aligns wrapped flex lines; combining `justify-content: center` with `align-items: center` produces true centering. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`align-items` = cross-axis alignment** — controls vertical alignment of flex items along the cross-axis. [S1]
- **`align-content` = line alignment** — aligns the flex lines, and only has effect when flex items wrap onto multiple lines. [S1]
- **True centering** — set both `justify-content` and `align-items` to `center`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Height is required to see effect** — the cross-axis examples set a `height` on the container so vertical alignment is observable. [S1]
- **`align-content` needs `flex-wrap: wrap`** — line alignment only matters once items wrap onto multiple lines. [S1]
## 📖 세부 내용 (Details)
**The align-items Property**
The `align-items` property manages vertical alignment of flex items along the cross-axis. Available values are `normal` (default), `stretch`, `center`, `flex-start`, `flex-end`, and `baseline`. [S1]
The `center` value aligns the flex items in the middle of the container. [S1]
```css
.flex-container {
display: flex;
height: 200px;
align-items: center;
}
```
The `flex-start` value aligns the flex items at the top of the container. [S1]
```css
.flex-container {
display: flex;
height: 200px;
align-items: flex-start;
}
```
The `flex-end` value aligns the flex items at the bottom of the container. [S1]
```css
.flex-container {
display: flex;
height: 200px;
align-items: flex-end;
}
```
The `stretch` value stretches the flex items to fill the container (this is equal to `normal`, which is default). [S1]
```css
.flex-container {
display: flex;
height: 200px;
align-items: stretch;
}
```
**The align-content Property**
The `align-content` property aligns the flex lines. It only has effect when flex items wrap onto multiple lines. Available values are `stretch` (default), `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, and `space-evenly`. [S1]
With `center`, the flex lines are packed toward the center of the container. [S1]
```css
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: center;
}
```
With `space-between`, the space between the flex lines are equal. [S1]
```css
.flex-container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-content: space-between;
}
```
**True Centering with Flexbox**
To achieve true centering, set both the `justify-content` and the `align-items` properties to `center`. [S1]
```css
.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply each value to a `.flex-container` with a fixed `height`, plus a combined centering example. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Center flex items on both axes (language: CSS):
```css
.flex-container {
display: flex;
height: 400px;
justify-content: center;
align-items: center;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`align-items`** — aligns individual flex items along the cross-axis; works on single-line layouts. [S1]
- **`align-content`** — aligns whole flex lines and only has effect when items wrap onto multiple lines (requires `flex-wrap: wrap`). [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Flexbox Justify Content]], [[CSS Flex Items]], [[CSS Flexbox Responsive]]
- **참조 맥락:** Referenced whenever aligning flex items vertically (cross-axis) or centering content within a flex container.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Flexbox Align Items — https://www.w3schools.com/css/css3_flexbox_container_align.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Align Items" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Flexbox_Container.md
+154
View File
@@ -0,0 +1,154 @@
---
id: css-flexbox-container
title: "CSS Flexbox Container"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["flex container", "flex-direction", "flex-wrap", "flex-flow", "justify-content align-items align-content"]
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", "flexbox", "layout"]
raw_sources: ["https://www.w3schools.com/css/css3_flexbox_container.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Flexbox Container]]
## 🎯 한 줄 통찰 (One-line insight)
The flex container is the parent (set with `display: flex` or `inline-flex`) and exposes container-level properties — `flex-direction`, `flex-wrap`, `flex-flow`, `justify-content`, `align-items`, and `align-content` — that govern how its flex items are laid out and aligned. [S1]
## 🧠 핵심 개념 (Core concepts)
- **The container** — must be set to `flex` or `inline-flex` via the `display` property. [S1]
- **flex-direction** — sets the display-direction of flex items. [S1]
- **flex-wrap** — specifies whether the flex items should wrap or not. [S1]
- **flex-flow** — a shorthand property for setting both `flex-direction` and `flex-wrap`. [S1]
- **justify-content** — aligns the flex items when they do not use all available space on the main-axis (horizontally). [S1]
- **align-items** — aligns the flex items when they do not use all available space on the cross-axis (vertically). [S1]
- **align-content** — aligns the flex lines when there is extra space in the cross axis and flex items wrap. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Direction control** — switch the main axis with `flex-direction: row | column | row-reverse | column-reverse`. [S1]
- **Wrapping control** — allow multi-line layouts with `flex-wrap: nowrap | wrap | wrap-reverse`. [S1]
- **Shorthand** — combine direction and wrapping in one declaration, e.g. `flex-flow: row wrap`. [S1]
- **Axis alignment** — `justify-content` aligns on the main (horizontal) axis; `align-items` / `align-content` align on the cross (vertical) axis. [S1]
## 📖 세부 내용 (Details)
The flex container has seven key properties: `display` (must be set to `flex` or `inline-flex`), `flex-direction`, `flex-wrap`, `flex-flow`, `justify-content`, `align-items`, and `align-content`. [S1]
**flex-direction** — controls the display-direction of flex items, with the values demonstrated on the page: [S1]
```css
.flex-container {
display: flex;
flex-direction: row;
}
```
```css
.flex-container {
display: flex;
flex-direction: column;
}
```
```css
.flex-container {
display: flex;
flex-direction: row-reverse;
}
```
```css
.flex-container {
display: flex;
flex-direction: column-reverse;
}
```
The four values are: `row` (default — items left to right), `column` (items top to bottom), `row-reverse` (items right to left), and `column-reverse` (items bottom to top). [S1]
**flex-wrap** — specifies whether items wrap when space is insufficient, with the values demonstrated on the page: [S1]
```css
.flex-container {
display: flex;
flex-wrap: nowrap;
}
```
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}
```
```css
.flex-container {
display: flex;
flex-wrap: wrap-reverse;
}
```
The three values are: `nowrap` (default — items don't wrap, shown as boxes 1–9 in a single line), `wrap` (items wrap onto multiple lines as needed), and `wrap-reverse` (items wrap in reverse order). [S1]
**flex-flow** — a shorthand property for setting both `flex-direction` and `flex-wrap`, demonstrated as: [S1]
```css
.flex-container {
display: flex;
flex-flow: row wrap;
}
```
**justify-content, align-items, align-content** — these properties are part of the container's property set (descriptions in the table below). On this page their specific demonstrated values were not captured in the fetched content; the source notes that horizontal alignment (`justify-content`) and vertical alignment (`align-items` & `align-content`) are covered on subpages. Specific value-by-value examples: Not found in source (for this page). [S1]
**CSS Flexbox container properties reference** [S1]
| Property | Description |
|----------|-------------|
| `display` | Must be set to `flex` or `inline-flex` |
| `flex-direction` | Sets the display-direction of flex items |
| `flex-wrap` | Specifies whether the flex items should wrap or not |
| `flex-flow` | A shorthand property for `flex-direction` and `flex-wrap` |
| `justify-content` | Aligns the flex items when they do not use all available space on the main-axis (horizontally) |
| `align-items` | Aligns the flex items when they do not use all available space on the cross-axis (vertically) |
| `align-content` | Aligns the flex lines when there is extra space in the cross axis and flex items wrap |
## 🛠️ 적용 사례 (Applied in summary)
The page's applied examples demonstrate each `flex-direction` value (`row`, `column`, `row-reverse`, `column-reverse`) on a `.flex-container`, each `flex-wrap` value (`nowrap`, `wrap`, `wrap-reverse`) with nine numbered boxes, and the `flex-flow: row wrap` shorthand. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Set direction and wrapping (language: CSS):
```css
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
```
Shorthand equivalent (language: CSS):
```css
.flex-container {
display: flex;
flex-flow: row wrap;
}
```
## ⚖️ 모순 및 업데이트 (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)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Flexbox Intro]], [[CSS Flex Items]], [[CSS Grid]], [[CSS Media Queries]]
- **참조 맥락:** Referenced when configuring the parent flex container's direction, wrapping, and alignment behavior.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Flexbox Container — https://www.w3schools.com/css/css3_flexbox_container.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Container" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Flexbox_Items.md
+158
View File
@@ -0,0 +1,158 @@
---
id: css-flex-items
title: "CSS Flex Items"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["flex items", "flex-grow", "flex-shrink", "flex-basis", "order", "align-self", "flex shorthand"]
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", "flexbox", "flex-items"]
raw_sources: ["https://www.w3schools.com/css/css3_flexbox_items.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Flex Items]]
## 🎯 한 줄 통찰 (One-line insight)
The direct child elements of a flex container automatically become flex items, controllable through six properties: `order`, `flex-grow`, `flex-shrink`, `flex-basis`, `flex`, and `align-self`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Automatic flex items** — the direct child elements of a flex container automatically become flex items. [S1]
- **Six item-level properties** — `order`, `flex-grow`, `flex-shrink`, `flex-basis`, `flex` (shorthand), and `align-self`. [S1]
- **`align-self` overrides the container** — it overrides the default alignment set by the container's `align-items` property. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Item properties go on the child, not the container** — these properties are set on individual flex items (often inline in the examples). [S1]
- **`flex` as a shorthand** — combine `flex-grow`, `flex-shrink`, and `flex-basis` into a single `flex` declaration. [S1]
## 📖 세부 내용 (Details)
The direct child elements of a flex container automatically becomes flex items. Flex items can be controlled through six key properties. [S1]
**1. The `order` Property**
The `order` property specifies the display order of the flex items inside the flex container. The default value is 0, and the value must be a number. [S1]
```html
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>
```
**2. The `flex-grow` Property**
The `flex-grow` property specifies how much a flex item will grow relative to the rest of the flex items. The default value is 0. [S1]
```html
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 4">3</div>
</div>
```
**3. The `flex-shrink` Property**
The `flex-shrink` property specifies how much a flex item will shrink relative to the rest of the flex items. The default value is 1. [S1]
```html
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
```
**4. The `flex-basis` Property**
The `flex-basis` property specifies the initial length of a flex item. [S1]
```html
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 250px">3</div>
<div>4</div>
</div>
```
**5. The `flex` Property**
The `flex` property is a shorthand property for the `flex-grow`, `flex-shrink`, and `flex-basis` properties. [S1]
```html
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 1 0 150px">3</div>
<div>4</div>
</div>
```
**6. The `align-self` Property**
The `align-self` property specifies the alignment for the selected item inside the flexible container. This property overrides the default alignment set by the container's `align-items` property. [S1]
```html
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>
```
```html
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div>
```
**Flex Item Properties Table** [S1]
| Property | Description |
|----------|-------------|
| `align-self` | Overrides container's `align-items` for individual items |
| `flex` | Shorthand for `flex-grow`, `flex-shrink`, `flex-basis` |
| `flex-basis` | Sets initial length |
| `flex-grow` | Controls growth rate relative to siblings |
| `flex-shrink` | Controls shrinkage rate relative to siblings |
| `order` | Specifies display sequence |
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply each property inline on `<div>` flex items inside a `.flex-container`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Control individual flex items (language: HTML/CSS):
```html
<div class="flex-container">
<div style="order: 1">A</div>
<div style="flex-grow: 2">B</div>
<div style="flex: 1 0 150px">C</div>
<div style="align-self: center">D</div>
</div>
```
## ⚖️ 모순 및 업데이트 (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 Flexbox Justify Content]], [[CSS Flexbox Align Items]], [[CSS Flexbox Responsive]]
- **참조 맥락:** Referenced whenever controlling the order, growth, shrinkage, basis, or self-alignment of individual flex children.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Flex Items — https://www.w3schools.com/css/css3_flexbox_items.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flex Items" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Flexbox_Justify.md
+123
View File
@@ -0,0 +1,123 @@
---
id: css-flexbox-justify-content
title: "CSS Flexbox Justify Content"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["justify-content", "flexbox main-axis alignment", "flex justify", "horizontal flex alignment", "space-between flexbox"]
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", "flexbox", "justify-content"]
raw_sources: ["https://www.w3schools.com/css/css3_flexbox_container_justify.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Flexbox Justify Content]]
## 🎯 한 줄 통찰 (One-line insight)
The `justify-content` property aligns flex items along the main-axis (horizontally) within a flex container, offering values from simple edge/center alignment to several space-distribution modes. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Main-axis alignment** — `justify-content` controls how flex items are positioned along the main-axis (horizontally) inside a flex container. [S1]
- **Default is `flex-start`** — items align at the beginning of the container unless another value is set. [S1]
- **Two families of values** — positional (`center`, `flex-start`, `flex-end`) and space-distribution (`space-around`, `space-between`, `space-evenly`). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Apply on the container** — `justify-content` is always declared on the element with `display: flex`, not on the items. [S1]
- **Space distribution choice** — pick `space-between` (no outer space), `space-around` (half-size outer space), or `space-evenly` (equal space everywhere) depending on the desired edge gaps. [S1]
## 📖 세부 내용 (Details)
The `justify-content` property aligns the flex items along the main-axis (horizontally) within a flex container. [S1]
**`center`** — aligns the flex items in the center of the container. [S1]
```css
.flex-container {
display: flex;
justify-content: center;
}
```
**`flex-start`** — aligns the flex items at the beginning of the container (this is default). [S1]
```css
.flex-container {
display: flex;
justify-content: flex-start;
}
```
**`flex-end`** — aligns the flex items at the end of the container. [S1]
```css
.flex-container {
display: flex;
justify-content: flex-end;
}
```
**`space-around`** — displays the flex items with space before, between, and after the lines. [S1]
```css
.flex-container {
display: flex;
justify-content: space-around;
}
```
**`space-between`** — displays the flex items with space between the lines. [S1]
```css
.flex-container {
display: flex;
justify-content: space-between;
}
```
**`space-evenly`** — displays the flex items with equal space around them. [S1]
```css
.flex-container {
display: flex;
justify-content: space-evenly;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply each value to a `.flex-container` declared with `display: flex`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Align flex items on the main-axis (language: CSS):
```css
.flex-container {
display: flex;
justify-content: center; /* or flex-start | flex-end | space-around | space-between | space-evenly */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`space-between`** — no space before the first or after the last item; full gaps only between items. [S1]
- **`space-around`** — space before, between, and after the lines (outer gaps are half the inner gaps). [S1]
- **`space-evenly`** — equal space around every item, including the container edges. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Flexbox Align Items]], [[CSS Flex Items]], [[CSS Flexbox Responsive]]
- **참조 맥락:** Referenced whenever positioning flex items horizontally along the main-axis of a flex container.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Flexbox Justify Content — https://www.w3schools.com/css/css3_flexbox_container_justify.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Justify Content" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Flexbox_Responsive.md
+128
View File
@@ -0,0 +1,128 @@
---
id: css-flexbox-responsive
title: "CSS Flexbox Responsive"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["responsive flexbox", "flexbox media queries", "flex-direction breakpoint", "responsive flex layout", "flex responsive columns"]
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", "flexbox", "responsive"]
raw_sources: ["https://www.w3schools.com/css/css3_flexbox_responsive.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Flexbox Responsive]]
## 🎯 한 줄 통찰 (One-line insight)
Responsive Flexbox layouts adapt across screen sizes by using media queries to either change `flex-direction` from `row` to `column`, or adjust the percentage of the `flex` property on wrapping items. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Two responsive techniques** — change `flex-direction`, or change the `flex` percentage at a breakpoint. [S1]
- **Direction switch** — switch `flex-direction` from `row` to `column` at a breakpoint to convert a multi-column layout into a one-column layout on small screens. [S1]
- **Flex percentage switch** — change the `flex` percentage of items (requires `flex-wrap: wrap`) to reflow columns at a breakpoint. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Breakpoint via `@media`** — both techniques wrap the layout change in a `@media (max-width: 600px)` query. [S1]
- **`flex-wrap: wrap` enables percentage reflow** — required on the container when using the `flex` percentage method. [S1]
## 📖 세부 내용 (Details)
**Method 1: Changing Flex Direction**
If you want to create a three-column layout for large screen sizes, and a one-column layout for small screen sizes (such as phones), you can change the `flex-direction` from `row` to `column` at a specific breakpoint. [S1]
```css
.flex-container {
display: flex;
flex-direction: row;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
font-size: 30px;
text-align: center;
width: 100%;
}
/* Make a one column-layout instead of three-column layout */
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
```
**Method 2: Modifying the Flex Property**
An alternative technique involves changing the percentage of the `flex` property of the flex items to create different layouts for different screen sizes, requiring `flex-wrap: wrap;` on the container. [S1]
```css
.flex-container {
display: flex;
flex-wrap: wrap;
}
.flex-item {
background-color: #f1f1f1;
padding: 10px;
text-align: center;
font-size: 30px;
flex: 33.3%;
}
/* Make a one column-layout instead of a three-column layout */
@media (max-width: 600px) {
.flex-item {
flex: 100%;
}
}
```
The page also references two additional examples — a responsive image gallery and a responsive website — both implementing flexbox with media queries for layout adaptation. The full source code of those two examples was not found inline on the page (presented behind "Try it Yourself" links).
## 🛠️ 적용 사례 (Applied in summary)
The page applies both techniques to a `.flex-container`/`.flex-item` pair, reflowing a three-column layout into one column below a 600px breakpoint. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Responsive reflow via flex-direction (language: CSS):
```css
.flex-container {
display: flex;
flex-direction: row;
}
@media (max-width: 600px) {
.flex-container {
flex-direction: column;
}
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Change `flex-direction`** — simplest when each item is full-width (`width: 100%`) and you just need to stack them vertically on small screens. [S1]
- **Change `flex` percentage** — use when items wrap (`flex-wrap: wrap`) and you want to control how many columns appear at each breakpoint (e.g., `flex: 33.3%` to `flex: 100%`). [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Flexbox Justify Content]], [[CSS Flexbox Align Items]], [[CSS Flex Items]]
- **참조 맥락:** Referenced whenever building flexbox layouts that must adapt across desktop and mobile screen sizes.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Flexbox Responsive — https://www.w3schools.com/css/css3_flexbox_responsive.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Flexbox Responsive" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Float.md
+147
View File
@@ -0,0 +1,147 @@
---
id: css-float
title: "CSS Float"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["float", "CSS float", "float left", "float right", "wrap text around image", "floating elements"]
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", "float", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_float.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Float]]
## 🎯 한 줄 통찰 (One-line insight)
The `float` property places an element on the left or right side of its container, allowing text and inline elements to wrap around it — commonly used to wrap text around images. [S1]
## 🧠 핵심 개념 (Core concepts)
- **purpose** — the `float` property specifies how an element should float within its container, placing it on the left or right side so text and inline elements wrap around it. [S1]
- **left** — the element floats to the left of its container. [S1]
- **right** — the element floats to the right of its container. [S1]
- **none (default)** — the element does not float and is displayed just where it occurs in the text. [S1]
- **inherit** — the element inherits the float value of its parent. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Wrap text around an image** — apply `float: left` or `float: right` to an image so surrounding text flows around it. [S1]
- **Side-by-side blocks** — float multiple block elements `left` (with padding) to lay them out next to each other in a row. [S1]
## 📖 세부 내용 (Details)
**Overview** [S1]
The `float` property specifies how an element should float within its container. It places an element on the left or right side of its container, allowing text and inline elements to wrap around it.
**Tip:** The `float` property is often used to wrap text around images! [S1]
**Float values** [S1]
- **left** — The element floats to the left of its container.
- **right** — The element floats to the right of its container.
- **none** — Default. The element does not float and is displayed just where it occurs in the text.
- **inherit** — The element inherits the float value of its parent.
**Float Right example** [S1]
```css
img {
float: right;
}
```
**Float Left example** [S1]
```css
img {
float: left;
}
```
**Float None example** [S1]
```css
img {
float: none;
}
```
**Float Next to Each Other example** [S1]
```css
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
```
**Property reference** [S1]
| Property | Description |
|----------|-------------|
| float | Specifies whether an element should float to the left, right, or not at all |
## 🛠️ 적용 사례 (Applied in summary)
The page's applied examples float an `img` right, left, and none, plus three `div`s floated left with padding and distinct background colors (red, yellow, green) laid out next to each other. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Float an image so text wraps around it (language: CSS):
```css
img {
float: right;
}
```
Lay block elements out side by side (language: CSS):
```css
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **left** — float to the container's left edge; content wraps on the right. [S1]
- **right** — float to the container's right edge; content wraps on the left. [S1]
- **none** — default; no floating, element stays in normal flow. [S1]
- **inherit** — take the parent's float value. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Clear and Clearfix]], [[CSS Overflow]], [[CSS Position Fixed and Absolute]]
- **참조 맥락:** Referenced whenever an element should sit to one side with content wrapping around it, or for side-by-side block layouts.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Float — https://www.w3schools.com/css/css_float.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Float" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Float_Examples.md
+131
View File
@@ -0,0 +1,131 @@
---
id: css-float-examples
title: "CSS Float Examples"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["float layout", "float columns", "equal width boxes", "images side by side", "CSS float menu"]
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", "float", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_float_examples.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Float Examples]]
## 🎯 한 줄 통찰 (One-line insight)
With the `float` property it is easy to float boxes of content side by side — combined with `box-sizing: border-box` to keep padding inside the box, `float` builds equal-width columns, image grids, and horizontal menus. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Floating boxes side by side** — `float: left` lets you position boxes of content next to each other. [S1]
- **`box-sizing: border-box` is essential** — it makes the padding stay inside the box so the box does not break when padding is added. [S1]
- **Width determines column count** — `33.33%` makes three boxes; use `25%` for four, `50%` for two, etc. [S1]
- **Equal heights are a known limitation of float** — a fixed `height` is one workaround, but Flexbox can automatically stretch boxes to be as long as the longest box. [S1]
- **Float also drives horizontal menus** — `float` can be used with a list of hyperlinks to create a horizontal menu. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Equal-width column pattern** — set `box-sizing: border-box` globally, then float each box left with a percentage width and padding. [S1]
- **Image grid pattern** — the same float + percentage-width + padding recipe applied to image containers. [S1]
- **Fallback for equal heights** — fix `height` when floats produce uneven box heights; prefer Flexbox for automatic equalization. [S1]
## 📖 세부 내용 (Details)
**Create Equal Width Boxes**
With the `float` property it is easy to float boxes of content side by side. The `box-sizing` property ensures the padding stays inside the box and that it does not break. [S1]
```css
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
padding: 50px; /* if you want space between the images */
}
```
**Images Side By Side**
The same floating technique displays images in a grid layout. [S1]
```css
.img-container {
float: left;
width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
padding: 5px; /* if you want space between the images */
}
```
**Create Boxes With Equal Heights**
Floated boxes do not automatically share a height. One workaround is to set a fixed height. [S1]
```css
.box {
height: 500px;
}
```
A better alternative is Flexbox, which can automatically stretch boxes to be as long as the longest box. The page references trying a Flexbox version of the layout. [S1]
**Navigation Menu**
You can also use `float` with a list of hyperlinks to create a horizontal menu. The page does not provide a distinct code block for this example in the fetched source. [S1] — Not found in source (exact menu CSS).
**All CSS Float Properties (reference table)** [S1]
| Property | Description |
|----------|-------------|
| `box-sizing` | Defines how the width and height of an element are calculated: should they include padding and borders, or not |
| `clear` | Specifies what should happen with the element that is next to a floating element |
| `float` | Specifies whether an element should float to the left, right, or not at all |
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are the equal-width box layout, the side-by-side image grid, the equal-height workaround, and a float-based horizontal menu. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Equal-width float columns (language: CSS):
```css
* {
box-sizing: border-box;
}
.box {
float: left;
width: 33.33%;
padding: 50px;
}
```
Image grid:
```css
.img-container {
float: left;
width: 33.33%;
padding: 5px;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Float vs Flexbox for equal heights** — float boxes do not equalize height on their own (requires a fixed `height`), whereas Flexbox can automatically stretch boxes to match the longest box. The page recommends Flexbox as the better alternative. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Float]], [[CSS Inline Block]], [[CSS Horizontal Align]], [[CSS Flexbox]]
- **참조 맥락:** Referenced when building multi-column layouts, image grids, or horizontal menus with the legacy float technique.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Float Examples — https://www.w3schools.com/css/css_float_examples.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Float Examples" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Fallbacks.md
+109
View File
@@ -0,0 +1,109 @@
---
id: css-font-fallbacks
title: "CSS Font Fallbacks"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["font fallbacks", "CSS font fallbacks", "fallback stacks", "font-family stacks", "generic family fallbacks"]
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", "fonts", "typography"]
raw_sources: ["https://www.w3schools.com/css/css_font_fallbacks.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Font Fallbacks]]
## 🎯 한 줄 통찰 (One-line insight)
This page lists commonly used `font-family` fallback stacks organized by the five generic font families — Serif, Sans-serif, Monospace, Cursive, and Fantasy — each ending in its generic family so the browser has a guaranteed last resort. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Fallback stacks by generic family** — commonly used font fallbacks, organized by the 5 generic font families: Serif, Sans-serif, Monospace, Cursive, Fantasy. [S1]
- **Each stack ends in a generic family** — every listed stack terminates with `serif`, `sans-serif`, `monospace`, `cursive`, or `fantasy`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Ready-made stacks** — reuse the curated stacks (e.g. `Arial, Helvetica, sans-serif`) rather than inventing your own. [S1]
- **Quote multi-word names** — multi-word font names inside a stack are quoted, e.g. `"Times New Roman"`, `"Trebuchet MS"`, `"Courier New"`, `"Brush Script MT"`. [S1]
## 📖 세부 내용 (Details)
Below are some commonly used font fallbacks, organized by the 5 generic font families: Serif, Sans-serif, Monospace, Cursive, Fantasy. [S1]
**Serif fonts:** [S1]
```css
font-family: "Times New Roman", Times, serif;
font-family: Georgia, serif;
font-family: Garamond, serif;
```
**Sans-serif fonts:** [S1]
```css
font-family: Arial, Helvetica, sans-serif;
font-family: Tahoma, Verdana, sans-serif;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-family: Geneva, Verdana, sans-serif;
```
**Monospace fonts:** [S1]
```css
font-family: "Courier New", Courier, monospace;
```
**Cursive fonts:** [S1]
```css
font-family: "Brush Script MT", cursive;
```
**Fantasy fonts:** [S1]
```css
font-family: Copperplate, Papyrus, fantasy;
```
**Tip:** Also check out all available Google Fonts and how to use them. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page presents each fallback stack in a table with the font-family value, a rendered example, and a "Try it" link, so the stacks themselves are the applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Generic-family-terminated stack (language: CSS):
```css
selector {
font-family: "Primary Font", IntermediateFont, generic-family;
}
```
Concrete examples:
```css
font-family: "Times New Roman", Times, serif;
font-family: Arial, Helvetica, sans-serif;
font-family: "Courier New", Courier, monospace;
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Choose a stack by the generic family that matches the intended style: serif stacks (`"Times New Roman", Times, serif`; `Georgia, serif`; `Garamond, serif`) for formal/print text; sans-serif stacks (`Arial, Helvetica, sans-serif`; `Tahoma, Verdana, sans-serif`; `"Trebuchet MS", Helvetica, sans-serif`; `Geneva, Verdana, sans-serif`) for modern web body text; monospace (`"Courier New", Courier, monospace`) for code/fixed-width; cursive (`"Brush Script MT", cursive`) for handwriting; and fantasy (`Copperplate, Papyrus, fantasy`) for decorative display. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Font Family]], [[CSS Web Safe Fonts]], [[CSS Google Fonts]]
- **참조 맥락:** Referenced when picking a reliable, ready-made `font-family` stack for any element.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Font Fallbacks — https://www.w3schools.com/css/css_font_fallbacks.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Fallbacks" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Family.md
+117
View File
@@ -0,0 +1,117 @@
---
id: css-font-family
title: "CSS Font Family"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["font-family", "CSS fonts", "generic font family", "font fallback", "typeface CSS"]
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", "fonts", "typography"]
raw_sources: ["https://www.w3schools.com/css/css_font.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Font Family]]
## 🎯 한 줄 통찰 (One-line insight)
The `font-family` property sets the typeface for text and should list several comma-separated font names as a fallback system, always ending with a generic family so the browser can pick the best available font. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Font selection matters** — choosing the right font has a huge impact on how readers experience a website; pick fonts that are easy to read with appropriate colors and sizes. [S1]
- **`font-family` property** — specifies the font(s) for an element. [S1]
- **Fallback system** — `font-family` should contain multiple font names so the browser can fall back if a font is unavailable. [S1]
- **Comma-separated** — font names are separated by commas. [S1]
- **Quote multi-word names** — font names made of more than one word require quotation marks. [S1]
- **End with a generic family** — always end the list with a generic font family. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Fallback stack** — list specific fonts first, then progressively safer ones, ending in a generic family: `"Times New Roman", Times, serif`. [S1]
- **Generic family classification** — group typefaces into five generic families: serif, sans-serif, monospace, cursive, fantasy. [S1]
## 📖 세부 내용 (Details)
**Font Selection is Important** — Choosing the right font has a huge impact on how the readers experience a website. The page stresses selecting fonts that are easy to read with appropriate colors and sizes. [S1]
**The CSS `font-family` Property** — The `font-family` property specifies the font for an element. It should contain multiple font names as a "fallback" system: if the browser does not support the first font, it tries the next one. Font names are separated by commas, multi-word font names require quotation marks, and the list should always end with a generic family. [S1]
Example with three fallback stacks: [S1]
```css
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
```
**CSS Generic Font Families** — five categories are listed: [S1]
1. **Serif** fonts — formal and elegant.
2. **Sans-serif** fonts — modern and minimalistic.
3. **Monospace** fonts — mechanical appearance.
4. **Cursive** fonts — imitate handwriting.
5. **Fantasy** fonts — decorative / playful.
**Font examples by generic family:** [S1]
| Generic Family | Examples |
|---|---|
| Serif | Times New Roman, Georgia, Garamond |
| Sans-serif | Arial, Verdana, Helvetica |
| Monospace | Courier New, Lucida Console, Monaco |
| Cursive | Brush Script MT, Lucida Handwriting |
| Fantasy | Copperplate, Papyrus |
**Note:** Sans-serif fonts are considered easier to read than serif fonts on computer screens. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's example applies three different fallback stacks to three paragraph classes (`.p1`, `.p2`, `.p3`), each anchored by a different generic family (serif, sans-serif, monospace). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Fallback stack pattern (language: CSS):
```css
selector {
font-family: "Specific Font", FallbackFont, generic-family;
}
```
Concrete example:
```css
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The five generic families serve different stylistic intents: serif (formal/elegant), sans-serif (modern/minimalistic), monospace (mechanical, fixed-width), cursive (handwriting imitation), and fantasy (decorative/playful). Per the source note, sans-serif fonts are considered easier to read than serif fonts on screens, which guides the choice for body text on the web. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Web Safe Fonts]], [[CSS Font Fallbacks]], [[CSS Font Style]], [[CSS Font Size]]
- **참조 맥락:** The foundational property referenced whenever specifying which typeface text should use.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Font Family — https://www.w3schools.com/css/css_font.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Family" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Google.md
+123
View File
@@ -0,0 +1,123 @@
---
id: css-google-fonts
title: "CSS Google Fonts"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Google Fonts", "CSS Google Fonts", "web fonts", "font effects", "fonts.googleapis.com"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "fonts", "google-fonts"]
raw_sources: ["https://www.w3schools.com/css/css_font_google.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Google Fonts]]
## 🎯 한 줄 통찰 (One-line insight)
Google Fonts provides over 1000 free fonts you can use by adding a `<link>` to `fonts.googleapis.com` in the `<head>` and referencing the font in CSS; multiple fonts are pipe-separated and special `&effect=` parameters apply decorative effects. [S1]
## 🧠 핵심 개념 (Core concepts)
- **What it is** — Google Fonts offers over 1000 free fonts through Google's font service, as an alternative to standard HTML fonts. [S1]
- **Two steps** — add a `<link>` in the `<head>` section, then reference the font in CSS via `font-family`. [S1]
- **Multiple fonts** — separate multiple font names in the link URL with the pipe character (`|`). [S1]
- **Font effects** — add `&effect=effectname` to the URL and apply the class `font-effect-effectname` to the element. [S1]
- **Always use fallbacks** — include a fallback font (serif or sans-serif) to avoid unexpected behavior. [S1]
- **Performance** — using multiple fonts may slow page load performance. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Link + reference** — one `<link>` per font set, then `font-family: "Name", generic;` in CSS. [S1]
- **Pipe for many** — `?family=Audiowide|Sofia|Trirong` loads several fonts in one request. [S1]
- **Effect class pairing** — URL `&effect=fire` pairs with HTML class `font-effect-fire`. [S1]
## 📖 세부 내용 (Details)
Google Fonts lets you use over 1000 free fonts through Google's font service as an alternative to standard HTML fonts. To use Google Fonts, add a link in the `<head>` section and reference it in CSS. [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
```
Then apply it via `font-family: "Sofia", sans-serif;`. [S1]
**Sofia font example:** [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body { font-family: "Sofia", sans-serif; }
</style>
```
**Trirong font example:** [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body { font-family: "Trirong", serif; }
</style>
```
**Audiowide font example:** [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body { font-family: "Audiowide", sans-serif; }
</style>
```
**Multiple fonts** — separate font names with the pipe character (`|`): [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
```
**Font effects** — add `&effect=effectname` to the URL and apply the class `font-effect-effectname`: [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<h1 class="font-effect-fire">Sofia on Fire</h1>
```
Multiple effects use pipe separation: `&effect=neon|outline|emboss|shadow-multiple`. [S1]
**Notes** [S1]
- Always include fallback fonts (serif or sans-serif) to avoid unexpected behavior.
- Using multiple fonts may slow page load performance.
## 🛠️ 적용 사례 (Applied in summary)
The page's examples apply Sofia, Trirong, and Audiowide to the `body`, load all three in one pipe-separated link, and demonstrate the `fire` effect on an `h1`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Link + reference pattern (language: HTML/CSS):
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body { font-family: "Sofia", sans-serif; }
</style>
```
Effect pattern:
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<h1 class="font-effect-fire">Sofia on Fire</h1>
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Font Family]], [[CSS Web Safe Fonts]], [[CSS Font Pairings]]
- **참조 맥락:** Referenced when loading custom web fonts beyond the standard web safe set, or adding decorative font effects.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Google Fonts — https://www.w3schools.com/css/css_font_google.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Google Fonts" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Pairings.md
+116
View File
@@ -0,0 +1,116 @@
---
id: css-font-pairings
title: "CSS Font Pairings"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["font pairings", "CSS font pairings", "font combinations", "heading body font", "typography pairing"]
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", "fonts", "typography"]
raw_sources: ["https://www.w3schools.com/css/css_font_pairings.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Font Pairings]]
## 🎯 한 줄 통찰 (One-line insight)
Great font pairings follow a few rules — fonts should complement each other, can come from a superfamily, should use contrast (e.g. serif with sans-serif), and one font should dominate the hierarchy — illustrated with both web-safe and Google Font combinations. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Complement** — a great font combination should harmonize, without being too similar or too different. [S1]
- **Font superfamilies** — use fonts within the same family designed to work together (e.g. Lucida superfamily variations). [S1]
- **Contrast** — two fonts that are too similar will often conflict; contrasts, done the right way, bring out the best in each font. Serif-with-sans-serif combinations exemplify this. [S1]
- **Hierarchy** — one font should be "the boss"; vary size, weight, and color to establish visual hierarchy. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Heading vs body split** — assign one font to headings and a contrasting one to body text (e.g. Georgia headings + Verdana body). [S1]
- **Serif + sans-serif contrast** — pair a serif and a sans-serif to create deliberate contrast. [S1]
- **Establish a boss font** — make one font dominant via size/weight/color. [S1]
## 📖 세부 내용 (Details)
The tutorial establishes four guidelines for pairing fonts: [S1]
1. **Complement** — "A great font combination should harmonize, without being too similar or too different."
2. **Font superfamilies** — use fonts within the same family designed to work together, like the Lucida superfamily variations.
3. **Contrast** — "Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each font." Serif-with-sans-serif combinations exemplify this approach.
4. **Hierarchy** — "One font should be the boss." Vary size, weight, and color to establish visual hierarchy.
**Web-safe combinations** [S1]
- Georgia (headings) + Verdana (body text)
- Helvetica (headings) + Garamond (body text)
Georgia and Verdana example: [S1]
```css
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px;
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
```
The Helvetica and Garamond pairing is described as another classic combination that uses web safe fonts, but its specific CSS is not displayed in an example box on the page — only a visual demonstration. (Exact CSS: Not found in source.) [S1]
**Google Font pairings** listed on the page: [S1]
- Merriweather + Open Sans
- Ubuntu + Lora
- Abril Fatface + Poppins
- Cinzel + Fauna One
- Fjalla One + Libre Baskerville
- Space Mono + Muli
- Spectral + Rubik
- Oswald + Noto Sans
Each pairing includes a "Try it Yourself" code example with the font declarations applied to a sample document about Norway. The explicit `<link>` tags and `font-family` declarations for the Google Font pairings are not quoted in the page content. (Exact Google Fonts CSS: Not found in source.) [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's applied example styles a "Beautiful Norway" sample document — Georgia headings over Verdana body text on a black background — and offers "Try it Yourself" demos for each Google Font pairing. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Heading/body contrast pattern (language: CSS):
```css
body {
font-family: Verdana, sans-serif;
}
h1 {
font-family: Georgia, serif;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The page frames pairing as a set of trade-offs: combinations must complement (not too similar, not too different); superfamilies guarantee harmony when fonts are designed together; intentional contrast (serif + sans-serif) outperforms near-identical fonts that conflict; and a clear hierarchy requires one dominant "boss" font set apart by size, weight, and color. Web-safe pairings (Georgia + Verdana, Helvetica + Garamond) favor reliability; the eight Google Font pairings favor expressiveness at the cost of loading external fonts. [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)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Font Family]], [[CSS Google Fonts]], [[CSS Web Safe Fonts]]
- **참조 맥락:** Referenced when choosing complementary heading and body typefaces for a site's typography system.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Font Pairings — https://www.w3schools.com/css/css_font_pairings.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Pairings" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Shorthand.md
+114
View File
@@ -0,0 +1,114 @@
---
id: css-font-shorthand
title: "CSS Font Shorthand"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["font shorthand", "font property", "CSS font", "shorthand font", "font declaration"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "font", "typography", "shorthand"]
raw_sources: ["https://www.w3schools.com/css/css_font_shorthand.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Font Shorthand]]
## 🎯 한 줄 통찰 (One-line insight)
The `font` shorthand property lets you specify all individual font properties in a single declaration, where only `font-size` and `font-family` are required and the rest fall back to their defaults if omitted. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Shorthand purpose** — to shorten the code, it is possible to specify all the individual font properties in one declaration. [S1]
- **Combined properties** — the `font` property combines `font-style`, `font-variant`, `font-weight`, `font-stretch`, `font-size`, `line-height`, and `font-family`. [S1]
- **Required values** — `font-size` and `font-family` are required; if one of the other values is missing, their default value is used. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Ordering rule (pre-size)** — if defined, `font-style`, `font-variant`, and `font-weight` must precede `font-size`. [S1]
- **Line-height placement** — if defined, `line-height` must immediately follow `font-size`, preceded by `/`, like this: `15px/30px`. [S1]
- **Family is last** — `font-family` must be the last value specified. [S1]
## 📖 세부 내용 (Details)
**To shorten the code**, it is possible to specify all the individual font properties in one declaration. The `font` property is a shorthand for: `font-style`, `font-variant`, `font-weight`, `font-stretch`, `font-size`, `line-height`, and `font-family`. [S1]
**Rules for the font shorthand:** [S1]
1. The `font-size` and `font-family` values are required. If one of the other values is missing, their default value is used.
2. If defined, `font-style`, `font-variant`, and `font-weight` must precede `font-size`.
3. If defined, `line-height` must immediately follow `font-size`, preceded by `/`, like this: `15px/30px`.
4. `font-family` must be the last value specified.
**Example — minimal (only required values):** [S1]
```css
p.a {
font: 20px Arial, sans-serif;
}
```
**Example — with style and weight:** [S1]
```css
p.b {
font: italic bold 16px Arial, sans-serif;
}
```
**Example — with variant and line-height:** [S1]
```css
p.c {
font: italic small-caps bold 15px/30px Georgia, serif;
}
```
**CSS Font Properties** [S1]
| Property | Description |
|----------|-------------|
| `font` | Sets all font properties in one declaration |
| `font-family` | Specifies the font family for text |
| `font-size` | Specifies the font size of text |
| `font-style` | Specifies the font style for text |
| `font-variant` | Specifies whether text displays in small-caps font |
| `font-weight` | Specifies the weight of a font |
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply the shorthand to paragraph classes (`p.a`, `p.b`, `p.c`), progressively adding style, weight, variant, and line-height. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Font shorthand value order (language: CSS):
```css
selector {
font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family;
}
```
Concrete example:
```css
p.c {
font: italic small-caps bold 15px/30px Georgia, serif;
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.9
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Fonts]], [[CSS Font Size]], [[CSS Text]], [[CSS Styling Lists]]
- **참조 맥락:** Referenced when condensing multiple font declarations into a single line for typography styling.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Font Shorthand — https://www.w3schools.com/css/css_font_shorthand.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Shorthand" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Size.md
+162
View File
@@ -0,0 +1,162 @@
---
id: css-font-size
title: "CSS Font Size"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["font-size", "CSS font size", "px em rem", "viewport font size", "responsive text size"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "fonts", "typography"]
raw_sources: ["https://www.w3schools.com/css/css_font_size.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Font Size]]
## 🎯 한 줄 통찰 (One-line insight)
The `font-size` property sets text size using absolute units (px, keywords) or relative units (em, rem, %, vw); use px for fixed control, em/rem for scalable accessible designs, and rem for consistency since it always refers to the root `<html>` font size. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`font-size` property** — used to specify the size of the text/font; the page emphasizes proper semantic HTML usage for headings and paragraphs. [S1]
- **Absolute sizes** — `px` (pixels) for fixed, precise control, plus keyword sizes: `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`. [S1]
- **Relative sizes** — `em` (relative to the parent element's font size), `rem` (relative to the root `<html>` element's font size), `%` (relative to the parent), and `smaller`/`larger` (relative to the parent). [S1]
- **`rem` consistency** — `rem` always refers to the font-size of the `<html>` element, regardless of its position in the document tree, making it superior to `em` for consistency. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Pixel scale** — fixed sizing per element (e.g. h1 40px, h2 30px, p 16px). [S1]
- **Multiplier base** — set a base size on `body`/`html` (16px) and express element sizes as em/rem multipliers (2.5em ≈ 40px, 1.875em ≈ 30px, 1em ≈ 16px). [S1]
- **Viewport scaling** — use `vw` so text scales with the browser window size. [S1]
## 📖 세부 내용 (Details)
The CSS `font-size` property is used to specify the size of the text/font, emphasizing proper semantic HTML usage for headings and paragraphs. [S1]
**Unit types** [S1]
- **Absolute sizes:** `px` (pixels) offer fixed, precise control; keyword sizes are `xx-small`, `x-small`, `small`, `medium`, `large`, `x-large`, `xx-large`.
- **Relative sizes:** `em` (relative to parent's font size), `rem` (relative to root `<html>` font size), `%` (relative to parent), and `smaller`/`larger` (adjust relative to parent).
**Selection guidance** — use `px` for fixed control (though not ideal for responsive design); employ `em` or `rem` for scalable, accessible designs; apply `%` for parent-based adjustments. [S1]
**Pixels approach** — h1 at 40px, h2 at 30px, p at 16px. [S1]
```css
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
```
**Em approach** — body base 16px; h1 at 2.5em (40px); h2 at 1.875em (30px); p at 1em (16px). [S1]
```css
body {
font-size: 16px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 1em;
}
```
**Rem approach** — html set to 16px; same multipliers as the em approach. [S1]
```css
html {
font-size: 16px;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.875rem;
}
p {
font-size: 1rem;
}
```
**Viewport width (vw)** — h1 at 10vw; p at 5vw, scaling with browser window resizing. [S1]
```css
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
```
**Key concept:** `rem` always refers to the font-size of the `<html>` element, regardless of its position in the document tree, making it superior to `em` for consistency. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's examples apply font-size with four unit strategies (px, em, rem, vw) to headings and paragraphs, demonstrating fixed vs. relative vs. viewport-based sizing. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Multiplier base pattern (language: CSS):
```css
html {
font-size: 16px;
}
h1 {
font-size: 2.5rem;
}
```
Viewport scaling pattern:
```css
h1 {
font-size: 10vw;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **px** — fixed, precise control; not ideal for responsive design. [S1]
- **em** — relative to the parent's font size; can compound through nesting. [S1]
- **rem** — relative to the root `<html>` font size; preferred for consistency because it ignores position in the document tree. [S1]
- **%** — relative to the parent; good for parent-based adjustments. [S1]
- **vw** — scales with browser window size for fluid/responsive text. [S1]
Guidance: use px for fixed control, em or rem for scalable accessible designs, and % for parent-based adjustments. [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.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Font Family]], [[CSS Font Style]], [[CSS Units]]
- **참조 맥락:** Referenced whenever setting readable, accessible, or responsive text sizing.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Font Size — https://www.w3schools.com/css/css_font_size.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Size" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Style.md
+126
View File
@@ -0,0 +1,126 @@
---
id: css-font-style
title: "CSS Font Style"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["font-style", "CSS font style", "font-weight", "font-variant", "italic CSS", "small-caps"]
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", "fonts", "typography"]
raw_sources: ["https://www.w3schools.com/css/css_font_style.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Font Style]]
## 🎯 한 줄 통찰 (One-line insight)
Three CSS properties shape the appearance of a font: `font-style` (normal / italic / oblique), `font-weight` (thickness, keyword or numeric 100–900), and `font-variant` (normal / small-caps). [S1]
## 🧠 핵심 개념 (Core concepts)
- **`font-style`** — specifies text appearance with three values: normal (standard), italic (slanted), oblique (leaning, similar to italic). [S1]
- **`font-weight`** — controls character thickness: normal, bold, bolder, lighter, or the numeric scale 100–900 where 400 equals normal and 700 equals bold. [S1]
- **`font-variant`** — determines small-caps display: in a small-caps font, all lowercase letters are converted to uppercase letters but appear smaller than the original uppercase letters. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Class-per-style** — define a class for each desired style (`.normal`, `.italic`, `.oblique`) and apply the matching property value. [S1]
- **Numeric weight** — use the 100–900 numeric scale for fine-grained weight control (400 = normal, 700 = bold). [S1]
## 📖 세부 내용 (Details)
**CSS `font-style` property** — specifies the text appearance with three possible values: [S1]
- **normal** — standard text display.
- **italic** — slanted text styling.
- **oblique** — leaning text (similar to italic).
```css
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
```
**CSS `font-weight` property** — controls character thickness with these options: normal (default, standard characters), bold (thick characters), bolder (thicker characters), lighter (lighter characters), and the numeric scale 100–900 where 400 equals normal and 700 equals bold. [S1]
```css
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
```
**CSS `font-variant` property** — determines small-caps display. In a small-caps font, all lowercase letters are converted to uppercase letters, but they appear smaller than the original uppercase letters. [S1]
```css
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
```
Each example includes a "Try it Yourself" interactive editor link for hands-on practice. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's examples apply each property to paragraph classes — `font-style` to `.normal`/`.italic`/`.oblique`, `font-weight` to `.normal`/`.light`/`.thick`/`.thicker`, and `font-variant` to `.normal`/`.small`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Combined font styling (language: CSS):
```css
selector {
font-style: italic;
font-weight: 700;
font-variant: small-caps;
}
```
Concrete numeric-weight example:
```css
p.thicker {
font-weight: 900;
}
```
## ⚖️ 모순 및 업데이트 (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 Font Family]], [[CSS Font Size]], [[CSS Text]]
- **참조 맥락:** Referenced when emphasizing or differentiating text via slant, thickness, or small-caps.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Font Style — https://www.w3schools.com/css/css_font_style.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Font Style" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Font_Web_Safe.md
+107
View File
@@ -0,0 +1,107 @@
---
id: css-web-safe-fonts
title: "CSS Web Safe Fonts"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["web safe fonts", "CSS web safe fonts", "universal fonts", "cross-browser fonts", "safe typefaces"]
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", "fonts", "typography"]
raw_sources: ["https://www.w3schools.com/css/css_font_websafe.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Web Safe Fonts]]
## 🎯 한 줄 통찰 (One-line insight)
Web safe fonts are fonts universally installed across browsers and devices, but since none are 100% safe you should always declare backup (fallback) fonts in `font-family` and test across browsers before publishing. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Definition** — web safe fonts are fonts that are universally installed across all browsers and devices. [S1]
- **No font is 100% safe** — there is always a chance that a font is not found or is not installed properly. [S1]
- **Always use backups** — use backup (fallback) fonts in the `font-family` property. [S1]
- **Test before publishing** — always check how fonts appear on different browsers and devices, and always use fallback fonts. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Fallback declaration** — pair a web safe font with safer alternatives and a generic family: `font-family: Tahoma, Verdana, sans-serif;`. [S1]
- **Pick by generic family** — choose the web safe font from the family (sans-serif, serif, monospace, cursive) that matches the intended style. [S1]
## 📖 세부 내용 (Details)
Web safe fonts are fonts that are universally installed across all browsers and devices. An important caveat is that there are no 100% completely web safe fonts — there is always a chance that a font is not found or is not installed properly — so the tutorial emphasizes using backup fonts in the `font-family` property. [S1]
Fallback example: [S1]
```css
p {
font-family: Tahoma, Verdana, sans-serif;
}
```
**Web safe fonts list** — nine recommended fonts with their generic families: [S1]
| Font | Generic family |
|---|---|
| Arial | sans-serif |
| Verdana | sans-serif |
| Tahoma | sans-serif |
| Trebuchet MS | sans-serif |
| Times New Roman | serif |
| Georgia | serif |
| Garamond | serif |
| Courier New | monospace |
| Brush Script MT | cursive |
**Font descriptions:** [S1]
- **Arial** — the most widely used font for both online and printed media, and the default font in Google Docs.
- **Verdana** — easily readable even for small font sizes.
- **Tahoma** — has less space between the characters.
- **Trebuchet MS** — designed by Microsoft in 1996; not supported by all mobile operating systems.
- **Times New Roman** — one of the most recognizable fonts in the world, used in many newspapers.
- **Georgia** — an elegant serif font, very readable at different font sizes.
- **Garamond** — a classical font used for many printed books, with a timeless look.
- **Courier New** — the most widely used monospace serif font, the standard font for movie screenplays.
- **Brush Script MT** — designed to mimic handwriting, but can be hard to read.
**Recommendation:** Before you publish your website, always check how your fonts appear on different browsers and devices, and always use fallback fonts. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's example applies a Tahoma → Verdana → sans-serif fallback stack to paragraph text, demonstrating the recommended backup pattern. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Web safe fallback stack (language: CSS):
```css
p {
font-family: Tahoma, Verdana, sans-serif;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The nine web safe fonts span four generic families, guiding selection by style and constraint: sans-serif options (Arial, Verdana, Tahoma, Trebuchet MS) for modern readable text — though Trebuchet MS is not supported by all mobile operating systems; serif options (Times New Roman, Georgia, Garamond) for formal/print-like text; Courier New for monospace; and Brush Script MT for a handwriting look that may be hard to read. Because no font is 100% safe, the deciding rule is to always pair the chosen font with fallbacks and a generic family. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Font Family]], [[CSS Font Fallbacks]], [[CSS Google Fonts]]
- **참조 맥락:** Referenced when choosing typefaces that will render reliably across browsers and devices without web font loading.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Web Safe Fonts — https://www.w3schools.com/css/css_font_websafe.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Web Safe Fonts" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Form_Elements.md
+127
View File
@@ -0,0 +1,127 @@
---
id: css-other-form-elements
title: "CSS Other Form Elements"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS form elements", "style textarea", "style select dropdown", "style form buttons", "responsive form"]
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", "forms", "textarea", "select", "buttons"]
raw_sources: ["https://www.w3schools.com/css/css_form_elements.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Other Form Elements]]
## 🎯 한 줄 통찰 (One-line insight)
Beyond text inputs, CSS can style textareas, dropdown `<select>` menus, and form buttons — and with a media query, a form can switch from horizontal to a vertically stacked responsive layout below 600px. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Textarea** — by default a `<textarea>` can be resized with a "grabber" in the bottom-right corner; setting `resize: none;` removes the grabber. [S1]
- **Dropdown menu** — `<select>` elements can be styled with padding, border removal, border-radius, and background color. [S1]
- **Form buttons** — buttons of type "button", "submit", and "reset" can be styled with CSS. [S1]
- **Responsive form** — CSS media queries adapt the form layout when the screen narrows. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **`box-sizing: border-box`** — keep padded fields at their declared width by including padding/border in the box width. [S1]
- **Disable native affordances** — remove the textarea resize grabber (`resize: none;`) and the `<select>` border (`border: none;`) for a custom look. [S1]
- **Type-attribute selectors for buttons** — target `input[type=button]`, `input[type=submit]`, and `input[type=reset]` together to style all action buttons uniformly. [S1]
## 📖 세부 내용 (Details)
**Style Textarea**
By default, a `<textarea>` can be resized with a "grabber" in the bottom right corner. To remove the grabber, set the `resize` property to `none`: [S1]
```css
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
```
**Style a Dropdown Menu**
A `<select>` element can be styled as follows: [S1]
```css
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
```
**Style Form Buttons**
Form buttons of type "button", "submit" and "reset" can also be styled with CSS: [S1]
```css
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
```
**Note:** For more information about how to style buttons, read the CSS Buttons Tutorial. [S1]
**CSS Responsive Form**
The page demonstrates using CSS media queries to create responsive forms that adapt the layout when the screen width drops below 600px, stacking form labels and input fields vertically. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's examples are the applied cases: a non-resizable styled textarea, a borderless rounded `<select>`, a green action-button group, and a media-query-driven responsive form. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Borderless textarea without resize grabber (language: CSS):
```css
textarea {
box-sizing: border-box;
resize: none;
}
```
Group all action buttons by type (language: CSS):
```css
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
cursor: pointer;
}
```
## ⚖️ 모순 및 업데이트 (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 Input Focus and Icons]], [[CSS Forms]], [[CSS Buttons]], [[CSS Media Queries]]
- **참조 맥락:** Referenced when styling non-text form controls and making a form layout responsive.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Other Form Elements — https://www.w3schools.com/css/css_form_elements.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Other Form Elements" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Form_Focus.md
+119
View File
@@ -0,0 +1,119 @@
---
id: css-input-focus-and-icons
title: "CSS Input Focus and Icons"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS form focus", "input focus styling", "focus pseudo-class", "search input icon", "animated search input"]
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", "forms", "focus", "pseudo-class"]
raw_sources: ["https://www.w3schools.com/css/css_form_focus.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Input Focus and Icons]]
## 🎯 한 줄 통찰 (One-line insight)
The `:focus` pseudo-class lets you restyle an input the moment it is clicked into, and combined with `outline: none;`, `background-image`, and `transition`, you can build clean focus states, icon-bearing fields, and animated search boxes. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Default focus outline** — by default, some browsers add a blue outline around an input when it gets focus (is clicked on); `outline: none;` removes this behavior. [S1]
- **`:focus` selector** — used to do something with an input field when it gets focus. [S1]
- **Input icons** — an icon can be placed inside an input using `background-image` positioned via `background-position`, with a large left padding reserving space for the icon. [S1]
- **Animated focus** — the `transition` property can animate input changes (e.g., width) when the field gains focus. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Reset-then-restyle on focus** — remove the native outline, then express focus visually through your own property (background color, border). [S1]
- **Icon = background-image + padding** — render a decorative/functional icon by layering a non-repeating background image and reserving its space with `padding-left`. [S1]
- **Focus-driven animation** — declare `transition` on the base selector and the target value on the `:focus` selector so the change eases in. [S1]
## 📖 세부 내용 (Details)
**Style Input with Focus**
By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding `outline: none;` to the input. Use the `:focus` selector to do something with the input field when it gets focus. [S1]
Change the background color to lightblue on focus: [S1]
```css
input[type=text]:focus {
background-color: lightblue;
}
```
Add a border on focus: [S1]
```css
input[type=text]:focus {
border: 3px solid #555;
}
```
**Style Input with Icon/Image**
If you want an icon inside the input, use the `background-image` property and position it with the `background-position` property. Also notice that we add a large left padding to reserve the space of the icon: [S1]
```css
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
```
**Animated Search Input**
In this example we use the CSS `transition` property to animate the width of the search input when it gets focus. You will learn more about the `transition` property later, in the CSS Transitions chapter. [S1]
```css
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: a lightblue focus background, a 3px focus border, a search field with an embedded `searchicon.png`, and a search box that animates to full width on focus. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Restyle on focus (language: CSS):
```css
input[type=text]:focus {
background-color: lightblue;
}
```
Icon inside input (language: CSS):
```css
input[type=text] {
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
```
## ⚖️ 모순 및 업데이트 (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 Other Form Elements]], [[CSS Forms]], [[CSS Pseudo-classes]], [[CSS Transitions]]
- **참조 맥락:** Referenced when styling interactive form fields and search inputs for visible focus feedback.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Input Focus and Icons — https://www.w3schools.com/css/css_form_focus.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Input Focus and Icons" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Gradients_Conic.md
+177
View File
@@ -0,0 +1,177 @@
---
id: css-conic-gradients
title: "CSS Conic Gradients"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["conic-gradient", "CSS conic gradient", "repeating-conic-gradient", "pie chart CSS", "color wheel gradient"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "gradients", "conic-gradient", "background-image"]
raw_sources: ["https://www.w3schools.com/css/css3_gradients_conic.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Conic Gradients]]
## 🎯 한 줄 통찰 (One-line insight)
A conic gradient (`conic-gradient()`) rotates its color transitions around a center point (rather than radiating outward), making it the natural tool for pie charts and color wheels; it needs at least two colors and is applied through `background-image`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Conic = rotated around a center** — a conic gradient is a gradient with color transitions rotated around a center point. [S1]
- **At least two colors** — to create a conic gradient you must define at least two colors. [S1]
- **Defaults** — the default starting angle is `0deg` and the default position is `center`; colors are spread equally if no degree is specified. [S1]
- **Optional angle (`from`) and position (`at`)** — you can specify a starting angle with `from` and a center position with `at`. [S1]
- **Pie charts** — combining a conic gradient with `border-radius: 50%` turns the box into a pie chart. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Equal-spread pattern** — `conic-gradient(color1, color2, ...)` spreads colors equally around the circle. [S1]
- **Degree-stop pattern** — append degrees (`red 45deg`) to control where each color band sits. [S1]
- **Pie-chart pattern** — conic gradient + `border-radius: 50%`. [S1]
- **`from`/`at` pattern** — set starting angle and center: `conic-gradient(from 90deg, ...)`, `conic-gradient(at 60% 45%, ...)`. [S1]
- **Repeating pattern** — `repeating-conic-gradient()` tiles a defined color sequence. [S1]
## 📖 세부 내용 (Details)
**Syntax** [S1]
```
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
```
The default angle is `0deg`, the default position is `center`, and colors are spread equally if no degree is specified.
**Three colors (equal spread)** [S1]
```css
#grad {
background-image: conic-gradient(red, yellow, green);
}
```
**Five colors** [S1]
```css
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
}
```
**Three colors with degrees** [S1]
```css
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
```
**Create a Pie Chart (basic)** [S1]
Add `border-radius: 50%` to make the conic gradient look like a pie chart:
```css
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
```
**Create a Pie Chart with defined degrees** [S1]
```css
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
```
**Conic Gradient with specified starting angle (`from`)** [S1]
```css
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
}
```
**Conic Gradient with specified center position (`at`)** [S1]
```css
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
```
**Repeating a Conic Gradient (basic)** [S1]
The `repeating-conic-gradient()` function is used to repeat conic gradients:
```css
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
```
**Repeating Conic Gradient with color stops** [S1]
```css
#grad {
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
```
**CSS Gradient Functions reference table** [S1]
| Function | Purpose |
|----------|---------|
| `conic-gradient()` | Conic gradient around a center point |
| `linear-gradient()` | Linear gradient top-to-bottom |
| `radial-gradient()` | Radial gradient center-to-edges |
| `repeating-conic-gradient()` | Repeated conic pattern |
| `repeating-linear-gradient()` | Repeated linear pattern |
| `repeating-radial-gradient()` | Repeated radial pattern |
## 🛠️ 적용 사례 (Applied in summary)
The page's own demonstrations (the `#grad` element showing equal-spread, degree stops, pie charts, `from`/`at`, and repeating conic gradients) serve as the applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic conic gradient (language: CSS):
```css
#grad {
background-image: conic-gradient(red, yellow, green);
}
```
Pie chart:
```css
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
```
Repeating conic gradient:
```css
#grad {
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Conic vs radial** — both are defined relative to a center, but a radial gradient radiates color *outward* from the center while a conic gradient rotates colors *around* the center; conic is the choice for pie charts and color wheels. [S1]
- **Equal spread vs degree stops** — omit degrees to spread colors equally; supply degrees (`red 45deg`) to place exact bands, as required for a defined pie chart. [S1]
- **Single vs repeating** — use `repeating-conic-gradient()` for tiled patterns such as checkerboards/spokes. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Linear Gradients]], [[CSS Radial Gradients]], [[CSS Box Shadow]]
- **참조 맥락:** Referenced whenever a rotated color transition (pie chart, color wheel) is needed via `background-image`.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Conic Gradients — https://www.w3schools.com/css/css3_gradients_conic.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Conic Gradients" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Gradients_Linear.md
+160
View File
@@ -0,0 +1,160 @@
---
id: css-linear-gradients
title: "CSS Linear Gradients"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["linear-gradient", "CSS gradients", "repeating-linear-gradient", "gradient background", "CSS color transitions"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "gradients", "linear-gradient", "background-image"]
raw_sources: ["https://www.w3schools.com/css/css3_gradients.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Linear Gradients]]
## 🎯 한 줄 통찰 (One-line insight)
CSS gradients let you display smooth transitions between two or more specified colors; a linear gradient (`linear-gradient()`) runs along a straight line whose direction you set with keywords or an angle, and it is applied through the `background-image` property. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Gradients = smooth color transitions** — CSS gradients display smooth transitions between two or more specified colors. [S1]
- **Three gradient types** — CSS defines linear gradients (going straight in a line), radial gradients (defined by a center point), and conic gradients (rotated around a center point). [S1]
- **Applied via `background-image`** — gradient functions are used as the value of the `background-image` property. [S1]
- **Linear gradient needs ≥ 2 color stops** — you must define at least two color stops; the gradient transitions between them. [S1]
- **Direction is optional** — you can specify a direction (with keywords like `to bottom`/`to right`) or an angle; if omitted, the default is top to bottom. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Direction-keyword pattern** — `linear-gradient(to <direction>, color1, color2)` to flow toward a side or corner. [S1]
- **Angle pattern** — `linear-gradient(<deg>, color1, color2)` for precise gradient angles. [S1]
- **Multi-stop pattern** — list more than two colors to create banded/rainbow transitions. [S1]
- **Transparency pattern** — use `rgba()` colors whose alpha varies to fade a gradient in or out. [S1]
- **Repeating pattern** — `repeating-linear-gradient()` repeats a percentage-defined color sequence. [S1]
## 📖 세부 내용 (Details)
**Syntax** [S1]
```
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
```
A linear gradient requires at least two color stops, and you may specify a direction or an angle.
**Top to Bottom (this is default)** [S1]
```css
#grad {
background-image: linear-gradient(to bottom, red, yellow);
}
```
**Bottom to Top** [S1]
```css
#grad {
background-image: linear-gradient(to top, red, yellow);
}
```
**Left to Right** [S1]
```css
#grad {
background-image: linear-gradient(to right, red, yellow);
}
```
**Diagonal (top-left to bottom-right)** [S1]
```css
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
```
**Using Angles** [S1]
If you want more control over the direction of the gradient, you can define an angle instead of the predefined directions. The angle is specified as an angle between a horizontal line and the gradient line. Reference values: `0deg` = bottom to top, `90deg` = left to right, `180deg` = top to bottom, `270deg` = right to left.
```css
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
```
**Using Multiple Color Stops** [S1]
```css
#grad {
background-image: linear-gradient(red, yellow, green);
}
```
Rainbow example:
```css
#grad {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
```
**Using Transparency** [S1]
CSS gradients also support transparency, which can be used to create fading effects. To add transparency, use the `rgba()` function to define the color stops. The last parameter in the `rgba()` function is the alpha value, defining the opacity: 0 indicates full transparency, 1 indicates full color (no transparency).
```css
#grad {
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
```
**Repeating a linear-gradient** [S1]
The `repeating-linear-gradient()` function is used to repeat linear gradients.
```css
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own demonstrations (the `#grad` element styled with each direction, angle, multi-stop, transparency, and repeating example) serve as the applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Linear gradient with a direction keyword (language: CSS):
```css
#grad {
background-image: linear-gradient(to right, red, yellow);
}
```
Linear gradient by angle:
```css
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
```
Repeating linear gradient:
```css
#grad {
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Direction keyword vs angle** — keywords (`to bottom`, `to right`, `to bottom right`) cover the common axes and corners; an explicit angle (`0deg`/`90deg`/`180deg`/`270deg`) gives more precise control over the gradient direction. [S1]
- **Single gradient vs repeating** — use `linear-gradient()` for a one-time transition across the box; use `repeating-linear-gradient()` when the percentage-defined color sequence should tile/repeat. [S1]
- **Solid color stops vs `rgba()`** — use `rgba()` color stops when a fading (transparency) effect is desired rather than an opaque transition. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Radial Gradients]], [[CSS Conic Gradients]], [[CSS Box Shadow]]
- **참조 맥락:** Referenced whenever a smooth, direction-based color background is needed via `background-image`.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Linear Gradients — https://www.w3schools.com/css/css3_gradients.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Linear Gradients" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Gradients_Radial.md
+138
View File
@@ -0,0 +1,138 @@
---
id: css-radial-gradients
title: "CSS Radial Gradients"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["radial-gradient", "CSS radial gradient", "repeating-radial-gradient", "circle gradient", "ellipse gradient"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "gradients", "radial-gradient", "background-image"]
raw_sources: ["https://www.w3schools.com/css/css3_gradients_radial.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Radial Gradients]]
## 🎯 한 줄 통찰 (One-line insight)
A radial gradient (`radial-gradient()`) is defined by its center and spreads color stops outward; by default it is an ellipse, sized `farthest-corner`, centered, and it is applied through the `background-image` property. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Radial = defined by a center point** — a radial gradient is defined by its center and radiates the color transition outward. [S1]
- **At least two color stops** — like a linear gradient, a radial gradient must have at least two color stops. [S1]
- **Default shape, size, and position** — the defaults are shape = `ellipse`, size = `farthest-corner`, position = `center`. [S1]
- **Color-stop spacing** — color stops can be evenly spaced (the default) or assigned percentages to space them differently. [S1]
- **Shape and size are controllable** — shape can be `circle` or `ellipse`, and size keywords control how far the gradient extends. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Even-stops pattern** — `radial-gradient(color1, color2, color3)` for default evenly spaced stops. [S1]
- **Spaced-stops pattern** — assign percentages (`color 5%`, `color 15%`...) to control stop placement. [S1]
- **Shape pattern** — prepend `circle` (or `ellipse`) to force the shape. [S1]
- **Size-keyword pattern** — use `closest-side`/`farthest-side`/`closest-corner`/`farthest-corner` plus `at <position>` to control extent and center. [S1]
- **Repeating pattern** — `repeating-radial-gradient()` repeats a percentage-defined sequence. [S1]
## 📖 세부 내용 (Details)
**Syntax** [S1]
```
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
```
By default the shape is `ellipse`, the size is `farthest-corner`, and the position is `center`.
**Evenly Spaced Color Stops (this is default)** [S1]
```css
#grad {
background-image: radial-gradient(red, yellow, green);
}
```
**Differently Spaced Color Stops** [S1]
```css
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
```
**Set Shape** [S1]
The shape parameter defines the shape. It can take the value `circle` or `ellipse`; the default value is `ellipse`. This example uses `circle`:
```css
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
```
**Use of Different Size Keywords** [S1]
The size parameter defines the size of the gradient. It can take four values: `closest-side`, `farthest-side`, `closest-corner`, and `farthest-corner`.
```css
#grad1 {
background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 70% 60%, red, yellow, black);
}
```
**Repeating a radial-gradient** [S1]
The `repeating-radial-gradient()` function is used to repeat radial gradients.
```css
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own demonstrations (the `#grad`, `#grad1`, and `#grad2` elements showing even/spaced stops, circle shape, size keywords, and repeating gradients) serve as the applied examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Default radial gradient (language: CSS):
```css
#grad {
background-image: radial-gradient(red, yellow, green);
}
```
Circle with positioned size keyword:
```css
#grad1 {
background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black);
}
```
Repeating radial gradient:
```css
#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`circle` vs `ellipse`** — `ellipse` is the default and stretches to the box's aspect ratio; choose `circle` when a perfectly round transition is wanted. [S1]
- **Size keywords** — `closest-side`, `farthest-side`, `closest-corner`, and `farthest-corner` decide where the gradient's ending shape meets the box; `farthest-corner` is the default. [S1]
- **Even vs differently spaced stops** — omit percentages for evenly spaced stops; supply percentages to bias where each color sits. [S1]
- **Single vs repeating** — use `repeating-radial-gradient()` when the percentage sequence should tile outward. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Linear Gradients]], [[CSS Conic Gradients]], [[CSS Box Shadow]]
- **참조 맥락:** Referenced whenever a center-out color background (spotlight/glow effect) is needed via `background-image`.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Radial Gradients — https://www.w3schools.com/css/css3_gradients_radial.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Radial Gradients" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid.md
+117
View File
@@ -0,0 +1,117 @@
---
id: css-grid-intro
title: "CSS Grid Intro"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS Grid", "Grid Layout Module", "two-dimensional layout", "display grid", "grid container"]
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", "grid", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_grid.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Intro]]
## 🎯 한 줄 통찰 (One-line insight)
The CSS Grid Layout Module offers a grid-based layout system with rows and columns, enabling complex, responsive two-dimensional layouts without using float or positioning. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Grid Layout Module** — offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use float or positioning. [S1]
- **Two-dimensional** — CSS Grid is used for two-dimensional layout, with rows AND columns; CSS Flexbox is used for one-dimensional layout, with rows OR columns. [S1]
- **Grid Container** — the parent element where `display` is set to `grid` or `inline-grid`. [S1]
- **Grid Items** — the direct children of the grid container, which automatically become grid items. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Container + items model** — set `display: grid` on the parent; direct children automatically become grid items. [S1]
- **Define columns on the container** — `grid-template-columns` controls how many columns and their widths (e.g., `auto auto auto` for three equal columns). [S1]
## 📖 세부 내용 (Details)
The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use float or positioning. [S1]
**Grid vs Flexbox**
CSS Grid is used for two-dimensional layout, with rows AND columns. CSS Flexbox is used for one-dimensional layout, with rows OR columns. [S1]
**Grid Components**
A grid consists of two essential parts: [S1]
1. **Grid Container** — the parent element where `display` is set to `grid` or `inline-grid`.
2. **Grid Items** — direct children of the grid container that automatically become grid items.
**Complete example** [S1]
```html
<html>
<head>
<style>
.container {
display: grid;
grid-template-columns: auto auto auto;
background-color: dodgerblue;
padding: 10px;
}
.container div {
background-color: #f1f1f1;
border: 1px solid black;
padding: 10px;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>
```
The page also lists a CSS Grid properties table covering grid-related properties such as `grid-template-columns`, `grid-template-rows`, `gap`, `grid-area`, `justify-content`, and `align-items`, each with a brief description of its functionality. The full property-by-property table text was not captured verbatim from the source.
## 🛠️ 적용 사례 (Applied in summary)
The page's own complete example styles a `.container` with `display: grid` and `grid-template-columns: auto auto auto`, plus styled child `<div>` items. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Make a three-column grid container (language: CSS):
```css
.container {
display: grid;
grid-template-columns: auto auto auto;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **CSS Grid** — two-dimensional layout, controlling rows AND columns together. [S1]
- **CSS Flexbox** — one-dimensional layout, controlling rows OR columns. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Container]], [[CSS Grid Tracks]], [[CSS Grid Gaps]]
- **참조 맥락:** The entry point referenced whenever building two-dimensional row-and-column page layouts.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Intro — https://www.w3schools.com/css/css_grid.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Intro" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_12Column.md
+164
View File
@@ -0,0 +1,164 @@
---
id: css-grid-12-column-layout
title: "CSS Grid 12-column Layout"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["12-column grid", "repeat(12, 1fr)", "responsive grid layout", "mobile first grid", "named grid lines", "col-start grid", "12 column responsive"]
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", "grid", "responsive"]
raw_sources: ["https://www.w3schools.com/css/css_grid_12column.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid 12-column Layout]]
## 🎯 한 줄 통찰 (One-line insight)
A 12-column grid divides horizontal space into 12 equal fluid `1fr` columns via `grid-template-columns: repeat(12, [col-start] 1fr)`, and because 12 is highly divisible, items can be placed and resized with `grid-column` spans and progressively rearranged through mobile-first media queries. [S1]
## 🧠 핵심 개념 (Core concepts)
- **12-column grid** — a common and flexible method for structuring web page content, particularly for responsive web design. [S1]
- **Equal-width division** — the system divides the available horizontal space into 12 equal-width columns, allowing precise placement and sizing of elements. [S1]
- **Flexibility** — 12 is highly divisible, so designers can create halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3). [S1]
- **Responsiveness** — a 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with media queries. [S1]
- **Efficiency** — having a pre-defined structure speeds up the design process. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **`repeat(12, [col-start] 1fr)`** — `repeat(12,..)` repeats the track definition 12 times; `[col-start]` creates a named grid line useful for placing items at specific start points; `1fr` is a fractional unit giving each column an equal, fluid width. [S1]
- **Item placement options** — place/size items with `grid-column: span <number>;`, `grid-column: <start-line> / span <number>;`, or `grid-column: <start-line> / <end-line>;`. [S1]
- **Mobile-first media queries** — design for mobile first, showing sections in source order for small screens, then enhance at 576px and 768px breakpoints. [S1]
## 📖 세부 내용 (Details)
A 12-column grid is a common and flexible method for structuring web page content, particularly for responsive web design. The 12-column grid system divides the available horizontal space into 12 equal-width columns, allowing for precise placement and sizing of elements within the layout. [S1]
**Benefits** [S1]
- **Flexibility:** the number 12 is highly divisible. Designers can easily create designs with halves, thirds, and quarters (2 columns of 6, 3 columns of 4, 4 columns of 3).
- **Responsiveness:** a 12-column grid is ideal for building responsive websites that adapt to different screen sizes (desktop, tablet, or mobile) with media queries.
- **Efficiency:** having a pre-defined structure speeds up the design process.
**Implementation** [S1]
- **Define grid container:** apply `display: grid;` to the container element.
- **Create 12 columns:** use `grid-template-columns: repeat(12, [col-start] 1fr);`, where `repeat(12,..)` tells the grid to repeat the following track definition 12 times (resulting in 12 columns), `[col-start]` creates a named grid line (useful for placing grid items at specific start points), and `1fr` is a fractional unit that represents one fraction of the total available space (so each of the 12 columns will be an equal, fluid width).
- **Place grid items:** grid items can then be placed and sized across these 12 columns using `grid-column`, via `grid-column: span <number>;`, `grid-column: <start-line> / span <number>;`, or `grid-column: <start-line> / <end-line>;`.
- **Media queries:** always design for mobile first. Display the sections in the source order (from top to bottom) for screens less than 576 pixels wide, then enhance at 576px and 768px breakpoints. [S1]
**Complete example** [S1]
```css
* {
box-sizing: border-box;
}
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Mobile first */
.container > * {
border: 1px solid green;
background-color: beige;
padding: 10px;
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.sidebar {
grid-column: col-start / span 3;
grid-row: 3;
}
.ads {
grid-column: col-start / span 3;
}
.content, .footer {
grid-column: col-start 4 / span 9;
}
nav ul {
display: flex;
justify-content: space-between;
}
}
@media (min-width: 768px) {
.nav {
grid-column: col-start / span 2;
grid-row: 2 / 4;
}
.content {
grid-column: col-start 3 / span 8;
grid-row: 2 / 4;
}
.sidebar {
grid-column: col-start 11 / span 2;
}
.ads {
grid-column: col-start 11 / span 2;
}
.footer {
grid-column: col-start / span 12;
}
nav ul {
flex-direction: column;
}
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's applied case is a complete responsive page layout: a 12-column container with `gap: 20px`, full-width stacking on mobile, a 3/9 split at 576px, and a nav/content/sidebar/ads/footer arrangement at 768px. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define a 12-column fluid grid (language: CSS):
```css
.container {
display: grid;
grid-template-columns: repeat(12, [col-start] 1fr);
gap: 20px;
}
```
Mobile-first full-width default, then span at a breakpoint:
```css
.container > * {
grid-column: col-start / span 12;
}
@media (min-width: 576px) {
.content, .footer {
grid-column: col-start 4 / span 9;
}
}
```
## ⚖️ 모순 및 업데이트 (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 Grid Items]], [[CSS Grid Item Named]], [[CSS RWD Intro]]
- **참조 맥락:** A concrete responsive layout method built on CSS Grid and media queries.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid 12-column Layout — https://www.w3schools.com/css/css_grid_12column.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid 12-column Layout" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Align.md
+217
View File
@@ -0,0 +1,217 @@
---
id: css-grid-align
title: "CSS Grid Align"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["justify-content grid", "align-content grid", "place-content", "grid content alignment", "CSS Grid Container Align", "grid main-axis alignment"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "grid", "alignment"]
raw_sources: ["https://www.w3schools.com/css/css_grid_align.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Align]]
## 🎯 한 줄 통찰 (One-line insight)
Inside a grid container, `justify-content` aligns grid content along the main-axis (horizontally), `align-content` aligns it along the cross-axis (vertically), and `place-content` is the shorthand for both — each working only when the content does not fill all available space. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`justify-content`** — aligns the grid content when it does not use all available space on the main-axis (horizontally). [S1]
- **`align-content`** — aligns the grid content when it does not use all available space on the cross-axis (vertically). [S1]
- **`place-content`** — shorthand property for `align-content` and `justify-content`. [S1]
- **Space precondition** — `justify-content` only has effect when the grid content's total width is less than the container's width; `align-content` only has effect when the grid content's total height is less than the container's height. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Distribution values** — `space-evenly`, `space-around`, and `space-between` distribute free space between/around grid items in different ratios. [S1]
- **Positional values** — `center`, `start`, and `end` push the grid content to a single position within the container. [S1]
- **Shorthand collapse** — `place-content` takes either two values (`align-content` then `justify-content`) or one value applied to both axes. [S1]
## 📖 세부 내용 (Details)
**The CSS justify-content Property**
The `justify-content` property is used to align the grid content when it does not use all available space on the main-axis (horizontally). Possible values: `space-evenly`, `space-around`, `space-between`, `center`, `start`, `end`. The grid content's total width has to be less than the container's width for the `justify-content` property to have any effect. [S1]
`space-evenly` displays the grid items with equal space around them: [S1]
```css
.container {
display: grid;
justify-content: space-evenly;
}
```
`space-around` displays the grid items with space around them: [S1]
```css
.container {
display: grid;
justify-content: space-around;
}
```
`space-between` displays the grid items with space between them: [S1]
```css
.container {
display: grid;
justify-content: space-between;
}
```
`center` positions the grid items in the center of the container: [S1]
```css
.container {
display: grid;
justify-content: center;
}
```
`start` positions the grid items at the start of the container: [S1]
```css
.container {
display: grid;
justify-content: start;
}
```
`end` positions the grid items at the end of the container: [S1]
```css
.container {
display: grid;
justify-content: end;
}
```
**The CSS align-content Property**
The `align-content` property is used to align the grid content when it does not use all available space on the cross-axis (vertically). Possible values: `space-evenly`, `space-around`, `space-between`, `center`, `start`, `end`. The grid content's total height has to be less than the container's height for the `align-content` property to have any effect. The following examples use a 300-pixel-high container to better demonstrate the property. [S1]
`center` positions the grid items in the middle of the container: [S1]
```css
.container {
display: grid;
height: 300px;
align-content: center;
}
```
With `space-evenly`, the grid lines are evenly distributed in the grid container, with equal space on top, bottom and between: [S1]
```css
.container {
display: grid;
height: 300px;
align-content: space-evenly;
}
```
With `space-around`, the space between the grid lines are equal, but the space before the first grid item and after the last grid item is set to half of the space between the grid lines: [S1]
```css
.container {
display: grid;
height: 300px;
align-content: space-around;
}
```
With `space-between`, the space between the grid lines are equal, but the first grid item is flush with the start edge of the container, and the last grid item is flush with the end edge of the container: [S1]
```css
.container {
display: grid;
height: 300px;
align-content: space-between;
}
```
`start` positions the grid items at the start of the container: [S1]
```css
.container {
display: grid;
height: 300px;
align-content: start;
}
```
`end` positions the grid items at the end of the container: [S1]
```css
.container {
display: grid;
height: 300px;
align-content: end;
}
```
**The CSS place-content Property**
The `place-content` property is a shorthand property for the `align-content` and the `justify-content` properties. With two values, `place-content: start center;` sets `align-content` to `start` and `justify-content` to `center`. With one value, `place-content: end;` sets both `align-content` and `justify-content` to `end`. The grid item's total height and width has to be less than the container's height and width for the `place-content` property to have any effect. [S1]
`center` positions the grid items in the middle of the container (both vertically and horizontally): [S1]
```css
.container {
display: grid;
height: 300px;
place-content: center;
}
```
The `end space-between` value aligns the grid lines towards the bottom of the grid container, and aligns the grid items with the same space between them horizontally: [S1]
```css
.container {
display: grid;
height: 300px;
place-content: end space-between;
}
```
**Property summary table** [S1]
| Property | Purpose |
|----------|---------|
| `justify-content` | Horizontal (main-axis) alignment of grid content within the container |
| `align-content` | Vertical (cross-axis) alignment of grid content within the container |
| `place-content` | Shorthand combining `align-content` and `justify-content` |
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: container rules using each distribution and positional value, plus the 300px-high container used to demonstrate vertical alignment. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Horizontal alignment of grid content (language: CSS):
```css
.container {
display: grid;
justify-content: center;
}
```
Vertical alignment within a sized container:
```css
.container {
display: grid;
height: 300px;
align-content: space-between;
}
```
Combined shorthand:
```css
.container {
display: grid;
height: 300px;
place-content: end space-between;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- Use `justify-content` to control horizontal (main-axis) distribution; use `align-content` to control vertical (cross-axis) distribution. [S1]
- Choose `place-content` when you want to set both axes at once, supplying two values (align then justify) or one value for both. [S1]
- Among the distribution values, `space-between` flushes the first/last items to the edges, `space-around` gives half-space at the ends, and `space-evenly` gives equal space everywhere including the ends. [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.9
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Items]], [[CSS Grid Item Align]], [[CSS Grid 12-column Layout]]
- **참조 맥락:** Container-level alignment of grid content, applied after a grid layout is defined.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Align — https://www.w3schools.com/css/css_grid_align.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Align" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Container.md
+104
View File
@@ -0,0 +1,104 @@
---
id: css-grid-container
title: "CSS Grid Container"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["grid container", "display grid", "display inline-grid", "grid parent element", "grid container properties"]
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", "grid", "container"]
raw_sources: ["https://www.w3schools.com/css/css_grid_container.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Container]]
## 🎯 한 줄 통찰 (One-line insight)
A grid container contains one or more grid items arranged in columns and rows; an element becomes a grid container by setting `display` to `grid` or `inline-grid`, and all its direct children automatically become grid items. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Grid container definition** — a grid container contains one or more grid items arranged in columns and rows. [S1]
- **Automatic grid items** — all direct child elements of a grid container automatically become grid items. [S1]
- **Two display modes** — set `display: grid` (block-level) or `display: inline-grid` (inline) to make the container. [S1]
- **Container-level properties** — alignment and sizing are controlled by container properties such as `justify-content`, `align-content`, `align-items`, `grid-template-columns`, `grid-template-rows`, `column-gap`, `row-gap`, `gap`, and `place-content`. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Declare the container first** — set `display: grid` (or `inline-grid`) before any grid-template or alignment property takes effect. [S1]
- **Alignment lives on the container** — `justify-content` aligns items horizontally; `align-content` aligns them vertically inside the container. [S1]
## 📖 세부 내용 (Details)
A grid container contains one or more grid items arranged in columns and rows. All direct child elements of a grid container automatically become grid items. An element becomes a grid container by setting the `display` property to `grid` or `inline-grid`. [S1]
**Block-level grid** — use `display: grid` to make a block-level grid container. [S1]
```css
.container {
display: grid;
}
```
**Inline grid** — use `display: inline-grid` to make an inline grid container. [S1]
```css
.container {
display: inline-grid;
}
```
**Grid Container Properties** [S1]
| Property | Description |
|----------|-------------|
| `align-content` | Vertically aligns the grid items inside the container |
| `align-items` | Specifies the default alignment for items inside a flexbox or grid container |
| `column-gap` | Specifies the gap between the columns |
| `gap` | A shorthand property for the `row-gap` and the `column-gap` properties |
| `grid-template-columns` | Specifies the size of the columns, and how many columns in a grid layout |
| `grid-template-rows` | Specifies the size of the rows in a grid layout |
| `justify-content` | Horizontally aligns the grid items inside the container |
| `row-gap` | Specifies the gap between the grid rows |
| `place-content` | A shorthand property for the `align-content` and the `justify-content` properties |
The page also presents interactive "Try it Yourself" examples demonstrating `justify-content` and `align-content` with various values; the literal CSS source for those alignment-value examples is only available behind the "Try it Yourself" buttons and was: Not found in source.
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply `display: grid` and `display: inline-grid` to a `.container`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Declare a grid container (language: CSS):
```css
.container {
display: grid; /* or inline-grid */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`display: grid`** — makes a block-level grid container. [S1]
- **`display: inline-grid`** — makes an inline grid container. [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). 일부 정렬 값 예제 코드는 출처에 인라인으로 표시되지 않음 (Not found in source).
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Intro]], [[CSS Grid Tracks]], [[CSS Grid Gaps]]
- **참조 맥락:** Referenced whenever establishing the parent element of a grid and configuring its container-level alignment and sizing.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Container — https://www.w3schools.com/css/css_grid_container.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Container" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Gaps.md
+116
View File
@@ -0,0 +1,116 @@
---
id: css-grid-gaps
title: "CSS Grid Gaps"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["grid gaps", "gutters", "column-gap", "row-gap", "gap shorthand", "grid spacing"]
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", "grid", "gap"]
raw_sources: ["https://www.w3schools.com/css/css_grid_gap.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Gaps]]
## 🎯 한 줄 통찰 (One-line insight)
The space between rows and columns in a grid container is called a gap (or gutter), controlled by `column-gap`, `row-gap`, and the `gap` shorthand — created between tracks, never on the outer edges. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Gaps (gutters)** — the space between the rows and columns in a grid container are called gaps (or gutters). [S1]
- **Inner only** — the gaps are created between the grid rows and columns, not on the outer edges of the grid container. [S1]
- **Default 0** — the default size of the gap is 0, which means that there is no spacing between grid items. [S1]
- **Three properties** — `column-gap`, `row-gap`, and `gap` (a shorthand). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **`gap` shorthand** — one value sets both row and column gaps equally; two values set row gap then column gap. [S1]
- **No outer margin** — gaps never add spacing at the container's outer edges, only between tracks. [S1]
## 📖 세부 내용 (Details)
The space between the rows and columns in a grid container are called gaps (or gutters). The gaps are created between the grid rows and columns, not on the outer edges of the grid container. The default size of the gap is 0, which means that there are no spacing between grid items. Spacing is controlled with three properties: `column-gap`, `row-gap`, and `gap` as a shorthand. [S1]
**`column-gap` Property** — specifies a 50 pixel gap between grid columns. [S1]
```css
.container {
display: grid;
column-gap: 50px;
}
```
**`row-gap` Property** — specifies a 50 pixel gap between grid rows. [S1]
```css
.container {
display: grid;
row-gap: 50px;
}
```
**`gap` with a single value** — sets the gap between rows and columns to 50px using the shorthand. [S1]
```css
.container {
display: grid;
gap: 50px;
}
```
**`gap` with two values** — sets the gap between rows to 30px and the gap between columns to 100px. [S1]
```css
.container {
display: grid;
gap: 30px 100px;
}
```
**Grid Gap Properties Table** [S1]
| Property | Description |
|----------|-------------|
| `column-gap` | Specifies the gap between the grid columns |
| `gap` | Shorthand property for `row-gap` and `column-gap` |
| `row-gap` | Specifies the gap between the grid rows |
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply `column-gap`, `row-gap`, and the `gap` shorthand (single and two-value) to a `.container` with `display: grid`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Set grid gaps (language: CSS):
```css
.container {
display: grid;
gap: 30px 100px; /* row-gap column-gap */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`gap: 50px`** — equal spacing between both rows and columns. [S1]
- **`gap: 30px 100px`** — different spacing: 30px between rows, 100px between columns. [S1]
- **`column-gap` / `row-gap`** — set only the column or only the row spacing individually. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Intro]], [[CSS Grid Container]], [[CSS Grid Tracks]]
- **참조 맥락:** Referenced whenever controlling the spacing (gutters) between grid rows and columns.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Gaps — https://www.w3schools.com/css/css_grid_gap.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Gaps" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Item_Align.md
+109
View File
@@ -0,0 +1,109 @@
---
id: css-grid-item-align
title: "CSS Grid Item Align"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["justify-self", "align-self", "place-self", "grid cell alignment", "CSS Grid Items Alignment", "grid item inline block alignment"]
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", "grid", "alignment"]
raw_sources: ["https://www.w3schools.com/css/css_grid_item_align.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Item Align]]
## 🎯 한 줄 통찰 (One-line insight)
A single grid item can be aligned within its own grid cell using `justify-self` (inline / horizontal direction) and `align-self` (block / vertical direction), with `place-self` as their shorthand — each requiring available space inside the cell to have any effect. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`justify-self`** — used to align a grid item within its grid cell in the inline direction. [S1]
- **`align-self`** — used to align a grid item within its grid cell in the block direction. [S1]
- **`place-self`** — shorthand property for `align-self` and `justify-self`. [S1]
- **Direction note (Tip)** — for pages in English, inline direction is left to right and block direction is top to bottom. [S1]
- **Container-level equivalents** — `justify-items` and `align-items` can apply the same alignment to all grid items in a container. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Per-item override** — `justify-self`/`align-self` target a specific item (e.g. `.item1`) to override the container's default alignment. [S1]
- **Space precondition** — for these properties to have an alignment effect, the grid item needs available space around itself in the relevant direction. [S1]
## 📖 세부 내용 (Details)
Grid items can be aligned within their respective grid cells using `justify-self` (horizontal alignment within a cell), `align-self` (vertical alignment within a cell), and `place-self` (shorthand for `align-self` and `justify-self`). These can also be applied to all grid items in a container using `justify-items` and `align-items` on the grid container. [S1]
**The CSS justify-self Property**
The `justify-self` property is used to align a grid item within its grid cell in the inline direction. Tip: for pages in English, inline direction is left to right and block direction is top to bottom. Possible values: `auto` (default), `normal`, `stretch`, `start`, `left`, `center`, `end`, `right`. For this property to have any alignment effect, the grid item needs available space around itself in the inline direction. [S1]
Using the `justify-self` property: [S1]
```css
.item1 {justify-self: right;}
.item6 {justify-self: center;}
```
**The CSS align-self Property**
The `align-self` property is used to align a grid item within its grid cell in the block direction. Possible values: `auto` (default), `normal`, `stretch`, `start`, `end`, `center`. For this property to have any alignment effect, the grid item needs available space around itself in the block direction. [S1]
Using the `align-self` property: [S1]
```css
.item1 {align-self: start;}
.item6 {align-self: center;}
```
**The CSS place-self Property**
`place-self` is listed as a shorthand property for `align-self` and `justify-self`. A dedicated Example box with inline source code for `place-self` was: Not found in source. [S1]
**Properties reference table** [S1]
| Property | Description |
|----------|-------------|
| `align-self` | Align a grid item within its grid cell in the block direction |
| `justify-self` | Align a grid item within its grid cell in the inline direction |
| `place-self` | A shorthand property for `align-self` and `justify-self` |
## 🛠️ 적용 사례 (Applied in summary)
The page's applied cases are per-item alignment overrides: pushing `.item1` to the right and centering `.item6` with `justify-self`, and starting `.item1` while centering `.item6` with `align-self`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Horizontal (inline) alignment of specific items (language: CSS):
```css
.item1 {justify-self: right;}
.item6 {justify-self: center;}
```
Vertical (block) alignment of specific items:
```css
.item1 {align-self: start;}
.item6 {align-self: center;}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- Use `justify-self` for horizontal (inline-direction) alignment inside a cell; use `align-self` for vertical (block-direction) alignment. [S1]
- Use `place-self` when you want to set both in one declaration. [S1]
- Use `justify-items`/`align-items` on the container to set a default for every item, and `justify-self`/`align-self` on an item to override that default. [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 (place-self 예제 코드가 출처에 없음 — Not found in source)
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Items]], [[CSS Grid Align]], [[CSS Grid Item Named]], [[CSS Grid Item Order]]
- **참조 맥락:** Aligning one specific item inside its cell, as opposed to aligning the whole grid content.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Item Align — https://www.w3schools.com/css/css_grid_item_align.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Item Align" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Item_Named.md
+151
View File
@@ -0,0 +1,151 @@
---
id: css-grid-item-named
title: "CSS Grid Item Named"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["grid-area name", "grid-template-areas", "named grid items", "CSS Naming Grid Items", "webpage template grid", "grid area template"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "grid", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_grid_item_name.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Item Named]]
## 🎯 한 줄 통찰 (One-line insight)
Naming grid items with `grid-area` and arranging those names inside `grid-template-areas` (each row in apostrophes, names separated by spaces, a period for unnamed cells) lets you describe a whole page layout as a readable visual map. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`grid-template-areas`** — a grid container property that specifies areas within the grid layout. [S1]
- **`grid-area` naming** — you name grid items with the `grid-area` property, then reference the name in `grid-template-areas`. [S1]
- **Apostrophe rows** — each area (row) is defined within apostrophes; the named grid items in each area are listed inside the apostrophes, separated by a space. [S1]
- **Period for unnamed cells** — a period sign (`.`) refers to a grid item with no name. [S1]
- **Multiple rows** — to define two rows (two areas), define the second row inside another set of apostrophes. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Span by repetition** — repeating a name across several cells in a row makes that item span those columns (e.g. five times = span five columns). [S1]
- **Vertical span** — repeating a name across two apostrophe-rows makes the item span two rows. [S1]
- **Full-page template** — naming every item (header, menu, main, right, footer) and laying them out in `grid-template-areas` produces a ready-to-use webpage template. [S1]
## 📖 세부 내용 (Details)
**Naming Grid Items with grid-area**
The CSS `grid-template-areas` is a grid container property, and it specifies areas within the grid layout. You can name grid items by using the CSS `grid-area` property, and then reference the name in the `grid-template-areas` property. Each area is defined within apostrophes. The named grid items in each area are defined inside the apostrophes, separated by a space. [S1]
Let 'Item1' get the name 'myHeader', and let it span five columns in a five-columns grid layout: [S1]
```css
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader myHeader myHeader';
}
.item1 {
grid-area: myHeader;
}
```
We can use a period sign (`.`) to refer to a grid item with no name. Let 'myHeader' span three columns in a five-columns grid layout (a period sign represents an item with no name): [S1]
```css
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
}
.item1 {
grid-area: myHeader;
}
```
To define two rows (two areas), define the second row inside another set of apostrophes. Let 'myHeader' span two columns and two rows: [S1]
```css
.container {
display: grid;
grid-template-areas:
'myHeader myHeader . . .'
'myHeader myHeader . . .';
}
.item1 {
grid-area: myHeader;
}
```
**Make a ready-to-use Webpage Template**
Here, we name all grid items to make a ready-to-use webpage template: [S1]
```css
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu footer footer footer footer footer';
}
```
The resulting layout shows the labeled areas Header, Menu, Main, Right, and Footer. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's culminating applied case is the ready-to-use webpage template that names header, menu, main, right, and footer items and maps them across a six-column, three-row `grid-template-areas`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Name an item and reference it (language: CSS):
```css
.container {
display: grid;
grid-template-areas: 'myHeader myHeader myHeader . .';
}
.item1 {
grid-area: myHeader;
}
```
Full webpage template layout:
```css
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu footer footer footer footer footer';
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.9
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Items]], [[CSS Grid Align]], [[CSS Grid 12-column Layout]]
- **참조 맥락:** Declaring readable, named page regions instead of raw line numbers.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Item Named — https://www.w3schools.com/css/css_grid_item_name.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Item Named" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Item_Order.md
+87
View File
@@ -0,0 +1,87 @@
---
id: css-grid-item-order
title: "CSS Grid Item Order"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["order property", "grid visual order", "CSS Grid Items Order", "reorder grid items", "grid source order", "DOM order vs visual order"]
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", "grid", "accessibility"]
raw_sources: ["https://www.w3schools.com/css/css_grid_item_order.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Item Order]]
## 🎯 한 줄 통찰 (One-line insight)
The CSS `order` property sets the visual order of grid items independently of their HTML source order — but it changes only the visual presentation, not the DOM order, which affects screen-reader users. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`order` property** — can be used to define the visual order of the grid items. [S1]
- **Source order is not display order** — the first grid item in the HTML source code does not have to appear as the first item in the grid container. [S1]
- **Visual only** — the `order` property provides visual reordering, but it does not change the logical order of elements in the DOM. [S1]
- **Accessibility impact** — this affects users navigating with assistive technologies like screen readers, as the content will be read in a different order than it is visually presented. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Numeric reordering** — assign each item a numeric `order` value; items render in ascending order regardless of HTML position. [S1]
- **Decoupled layout** — visual sequencing is decoupled from document structure, with a known accessibility trade-off. [S1]
## 📖 세부 내용 (Details)
**Set the Visual Order of the Grid Items**
The CSS `order` property can be used to define the visual order of the grid items. The first grid item in the HTML source code does not have to appear as the first item in the grid container. [S1]
```css
.item1 {order: 3;}
.item2 {order: 6;}
.item3 {order: 1;}
.item4 {order: 2;}
.item5 {order: 4;}
.item6 {order: 5;}
```
This example reorders six grid items to appear in a different sequence than their HTML source order. [S1]
**Accessibility note**
The `order` property provides visual reordering, but it does not change the logical order of elements in the DOM. This will affect users navigating the site with assistive technologies like screen readers, as the content will be read in a different order than it is visually presented. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's applied case is reordering six items so that the visual sequence (item3, item4, item1, item5, item6, item2) differs from their HTML source order. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Reorder grid items visually (language: CSS):
```css
.item1 {order: 3;}
.item2 {order: 6;}
.item3 {order: 1;}
.item4 {order: 2;}
.item5 {order: 4;}
.item6 {order: 5;}
```
## ⚖️ 모순 및 업데이트 (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 Grid Items]], [[CSS Grid Item Align]], [[CSS Grid Item Named]]
- **참조 맥락:** Controlling presentation order of grid items while being mindful of DOM/accessibility order.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Item Order — https://www.w3schools.com/css/css_grid_item_order.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Item Order" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Items.md
+145
View File
@@ -0,0 +1,145 @@
---
id: css-grid-items
title: "CSS Grid Items"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["grid-column", "grid-row", "grid-column-start", "grid-column-end", "grid item span", "CSS grid lines", "grid-area"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "grid", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_grid_item.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Items]]
## 🎯 한 줄 통찰 (One-line insight)
All direct children of a grid container automatically become grid items, and each item can span multiple columns or rows by referencing column-lines and row-lines through `grid-column-start/end` and `grid-row-start/end` (or their shorthands). [S1]
## 🧠 핵심 개념 (Core concepts)
- **Grid items** — a grid container contains one or more grid items; all direct child elements of a grid container automatically become grid items. [S1]
- **Spanning** — a grid item can span over multiple columns or rows by specifying where it starts and ends. [S1]
- **Grid lines** — the lines between the columns are called column-lines, and the lines between the rows are called row-lines; line numbers are used to place a grid item in the container. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Line-number placement** — set `grid-column-start`/`grid-column-end` (and the row equivalents) to numeric line indices to place and size an item. [S1]
- **`/ span N` shorthand** — `grid-column: 1 / span 2;` starts at a line and spans a number of tracks instead of naming the end line. [S1]
- **Combined placement** — apply both `grid-column` and `grid-row` to a single item to span across both axes simultaneously. [S1]
## 📖 세부 내용 (Details)
**Grid items**
A grid container contains one or more grid items. All direct child elements of a grid container automatically become grid items. A grid item can span over multiple columns or rows; we specify where to start and end a grid item by using placement properties. The lines between the columns in a grid are called column-lines, and the lines between the rows in a grid are called row-lines. We can refer to line numbers when placing a grid item in a grid container. [S1]
**Properties for placing grid items** [S1]
| Property | Purpose |
|----------|---------|
| `grid-column-start` | Specifies on which column-line the grid item will start |
| `grid-column-end` | Specifies on which column-line the grid item will end |
| `grid-column` | Shorthand property for `grid-column-start` and `grid-column-end` |
| `grid-row-start` | Specifies on which row-line the grid item will start |
| `grid-row-end` | Specifies on which row-line the grid item will end |
| `grid-row` | Shorthand property for `grid-row-start` and `grid-row-end` |
Using `grid-column-start` and `grid-column-end` to make an item start at column-line 1 and end at column-line 3: [S1]
```css
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
```
The same result with the `grid-column` shorthand using `/ span`: [S1]
```css
.item1 {
grid-column: 1 / span 2;
}
```
Using `grid-row-start` and `grid-row-end` to make an item start at row-line 1 and end at row-line 3: [S1]
```css
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
```
The same result with the `grid-row` shorthand using `/ span`: [S1]
```css
.item1 {
grid-row: 1 / span 2;
}
```
Combining `grid-column` and `grid-row` so the item spans two columns and two rows: [S1]
```css
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
```
**Complete CSS Grid Item properties reference** [S1]
| Property | Description |
|----------|-------------|
| `align-self` | Aligns the content for a specific grid item along the column axis |
| `grid-area` | Shorthand property for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end` |
| `grid-column` | Shorthand property for `grid-column-start` and `grid-column-end` |
| `grid-column-end` | Specifies where to end the grid item |
| `grid-column-start` | Specifies where to start the grid item |
| `grid-row` | Shorthand property for `grid-row-start` and `grid-row-end` |
| `grid-row-end` | Specifies where to end the grid item |
| `grid-row-start` | Specifies where to start the grid item |
| `justify-self` | Aligns the content for a specific grid item along the row axis |
| `place-self` | Shorthand property for `align-self` and `justify-self` |
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: placing `.item1` by explicit start/end lines, by `/ span` shorthand, and spanning both columns and rows at once. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Explicit line placement (language: CSS):
```css
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
```
Span shorthand:
```css
.item1 {
grid-column: 1 / span 2;
}
```
Span across both axes:
```css
.item1 {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.9
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Align]], [[CSS Grid Item Named]], [[CSS Grid Item Align]], [[CSS Grid Item Order]]
- **참조 맥락:** How individual children are positioned and sized within a grid layout.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Items — https://www.w3schools.com/css/css_grid_item.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Items" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grid_Tracks.md
+145
View File
@@ -0,0 +1,145 @@
---
id: css-grid-tracks
title: "CSS Grid Tracks"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["grid tracks", "grid-template-columns", "grid-template-rows", "fr unit", "repeat function", "minmax function"]
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", "grid", "tracks"]
raw_sources: ["https://www.w3schools.com/css/css_grid_tracks.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grid Tracks]]
## 🎯 한 줄 통찰 (One-line insight)
Inside a grid container, `grid-template-columns` and `grid-template-rows` define the number and size of the grid tracks, using values such as fixed lengths, percentages, the `fr` unit, `auto`, `repeat()`, and `minmax()`. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Tracks = rows and columns** — inside the grid container you define the number and size of the grid columns and rows. [S1]
- **`grid-template-columns`** — defines the number and width of the columns in the grid; the value is a space-separated list where each value defines the width of the respective column. [S1]
- **`grid-template-rows`** — defines the number and height of the rows in the grid; the value is a space-separated list where each value defines the height of the respective row. [S1]
- **`fr` unit** — stands for "fraction"; automatically divides the available space into fractions. [S1]
- **`repeat()`** — repeats a set of columns or rows in a grid. [S1]
- **`minmax()`** — defines a size-range greater than or equal to a min value and less than or equal to a max value. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Space-separated track list** — list one width/height value per track; the count of values determines the number of tracks. [S1]
- **Auto-added rows** — if there are more grid items than columns, the grid automatically adds new rows to place the items. [S1]
- **`repeat(n, value)`** — a compact way to declare `n` identical tracks (e.g., `repeat(3, 1fr)`). [S1]
## 📖 세부 내용 (Details)
Inside the grid container you define the number and size of the grid columns and rows. The relevant properties are `grid-template-columns` (number and width of columns), `grid-template-rows` (number and height of rows), and `grid-template-areas` (how to display columns and rows using named grid items). [S1]
**The `grid-template-columns` Property**
The `grid-template-columns` property defines the number and width of the columns in the grid. The value is a space-separated list, where each value defines the width of the respective column. Common values include fixed lengths (`100px 300px 200px`), percentages (`20% 60% 20%`), the `fr` unit (`1fr 2fr 1fr`), `auto` (`auto auto auto`), `repeat()` (`repeat(3, 1fr)`), and `minmax()` (`minmax(80px, 1fr) 150px 150px`). [S1]
**`grid-template-columns: auto`** — to create a grid layout with 3 columns of equal width, use the `auto` keyword. [S1]
```css
.container {
display: grid;
grid-template-columns: auto auto auto;
}
```
**Grid columns with mixed width** — to create a grid layout with 3 columns: 2 columns with a fixed width, and 1 column with size `auto`. [S1]
```css
.container {
display: grid;
grid-template-columns: 80px 200px auto;
}
```
> **Note:** If you have more than 3 grid items in a 3 columns grid, the grid will automatically add new rows to put the items in. [S1]
**Grid columns with the `fr` unit** — the `fr` unit stands for "fraction". This unit automatically divides the available space into fractions. `1fr` will take 1 fraction of the available space, while `2fr` will take 2 fractions of the available space. [S1]
```css
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
```
Here, each column will take up 33.3% of the container width, splitting it equally. [S1]
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
}
```
Here, the second column will be twice as big as the others. [S1]
**Grid columns with the `repeat()` function** — the CSS `repeat()` function is used to repeat a set of columns or rows in a grid. Use `repeat()` to create three equal-width columns in a grid. [S1]
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
```
**Grid columns with the `minmax()` function** — the CSS `minmax()` function is used to define a size-range greater than or equal to a min value and less than or equal to a max value. Use `minmax()` to define that the first column is at least 80px wide and can grow to 1fr. [S1]
```css
.container {
display: grid;
grid-template-columns: minmax(80px, 1fr) 150px 150px;
}
```
**The `grid-template-rows` Property**
The `grid-template-rows` property defines the number and height of the rows in the grid. The value is a space-separated list, where each value defines the height of the respective row. Common values include fixed lengths, percentages, the `fr` unit, `auto`, `min-content`, `max-content`, `repeat()`, `minmax()`, and `fit-content()`. [S1]
```css
.container {
display: grid;
grid-template-rows: 80px 200px;
}
```
Set the first row in the grid to 80px high, and the second row to 200px high. [S1]
> **Note:** Notice that the first row in the grid above is 80px high and the second row is 200px high. The next rows will use `auto` as default. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples apply each track-definition technique to a `.container` with `display: grid`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Define grid columns and rows (language: CSS):
```css
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 80px 200px;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`auto`** — sizes tracks to equal/content-based widths. [S1]
- **Fixed lengths (`px`)** — exact, non-flexible track sizes. [S1]
- **`fr` unit** — distributes available space proportionally into fractions. [S1]
- **`repeat(n, value)`** — compactly declares `n` identical tracks. [S1]
- **`minmax(min, max)`** — flexible tracks bounded between a minimum and maximum size. [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.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Grid Intro]], [[CSS Grid Container]], [[CSS Grid Gaps]]
- **참조 맥락:** Referenced whenever defining the number and size of grid rows and columns.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grid Tracks — https://www.w3schools.com/css/css_grid_tracks.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grid Tracks" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Grouping_Selectors.md
+112
View File
@@ -0,0 +1,112 @@
---
id: css-grouping-selectors
title: "CSS Grouping Selectors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["grouping selector", "comma selector", "shared declarations", "universal selector", "CSS code minimization"]
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", "selectors"]
raw_sources: ["https://www.w3schools.com/css/css_selectors_grouping.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Grouping Selectors]]
## 🎯 한 줄 통찰 (One-line insight)
When several elements share identical style definitions, group their selectors with commas into a single rule to minimize code; the universal selector `*` applies a declaration to every element on the page. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Universal selector** — `*` selects all HTML elements on the page. [S1]
- **Grouping selector** — selects all the HTML elements with the same style definitions. [S1]
- **Comma syntax** — to group selectors, separate each selector with a comma. [S1]
- **Benefit** — grouping minimizes code when multiple elements share identical style definitions. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Collapse duplicates** — replace several rules with identical declarations by one comma-separated selector list. [S1]
- **Whole-page baseline** — use `*` to apply a single declaration block to every element. [S1]
## 📖 세부 내용 (Details)
**The CSS universal selector** (`*`) selects all HTML elements on the page. [S1]
```css
* {
text-align: center;
color: blue;
}
```
**The CSS grouping selector** selects all the HTML elements with the same style definitions. [S1]
Look at the following CSS code (the `h1`, `h2`, and `p` elements have the same style definitions): [S1]
```css
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
```
It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. [S1]
```css
h1, h2, p {
text-align: center;
color: red;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own example groups `h1`, `h2`, and `p` — which originally carried three identical rules — into one comma-separated rule. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Grouping selectors that share declarations (language: CSS):
```css
h1, h2, p {
text-align: center;
color: red;
}
```
Universal selector:
```css
* {
text-align: center;
color: blue;
}
```
## ⚖️ 모순 및 업데이트 (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 Selectors]], [[CSS Syntax]], [[CSS Introduction]]
- **참조 맥락:** Referenced when reducing duplication across rules that share the same declarations.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Grouping Selectors — https://www.w3schools.com/css/css_selectors_grouping.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Grouping Selectors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_HEX.md
+112
View File
@@ -0,0 +1,112 @@
---
id: css-hex-colors
title: "CSS HEX Colors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HEX", "hexadecimal color", "#rrggbb", "3-digit HEX", "CSS hex code", "color hex"]
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", "color", "hex"]
raw_sources: ["https://www.w3schools.com/css/css_colors_hex.asp"]
applied_in: []
github_commit: ""
---
# [[CSS HEX Colors]]
## 🎯 한 줄 통찰 (One-line insight)
A HEX color is specified with `#RRGGBB`, where each two-digit hexadecimal pair (00–ff, equal to decimal 0–255) sets the red, green, and blue intensity. [S1]
## 🧠 핵심 개념 (Core concepts)
- **HEX format** — a hexadecimal color is specified with `#RRGGBB`, where the RR (red), GG (green), and BB (blue) hexadecimal integers specify the components of the color. [S1]
- **Range** — each component value is between 00 and ff (the same as decimal 0 to 255). [S1]
- **Red example** — `#ff0000` is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). [S1]
- **Black and white** — black is `#000000`; white is `#ffffff`. [S1]
- **3-digit shorthand** — the `#rgb` short form works only when both hexadecimal digits within each component pair are the same. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Equal pairs = gray** — when all three pairs hold the same value, the result is a shade of gray. [S1]
- **Shorthand condition** — `#rgb` is a valid abbreviation of `#rrggbb` only when each pair is a doubled digit (e.g. `ff`, `cc`, `99`). [S1]
## 📖 세부 내용 (Details)
**HEX Value**
A hexadecimal color is specified with `#RRGGBB`, where the RR (red), GG (green), and BB (blue) hexadecimal integers specify the components of the color. All values are between 00 and ff. `#ff0000` is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). Black is `#000000` and white is `#ffffff`. [S1]
Examples of HEX color values shown on the page: [S1]
```css
#ff0000 /* red */
#0000ff /* blue */
#3cb371 /* medium sea green */
#ee82ee /* violet */
#ffa500 /* orange */
#6a5acd /* slate blue */
```
**Shades of Gray**
Shades of gray are often defined using equal values for all three light sources: [S1]
```css
#3c3c3c
#616161
#787878
#b4b4b4
#f0f0f0
#f9f9f9
```
**3 Digit HEX Value**
The 3-digit hex code is a shorthand for some 6-digit hex codes. It is written as `#rgb`, where r, g, and b are repeated to create the full 6-digit form (`#rrggbb`). The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component. [S1]
Examples of valid 3-digit shorthands: [S1]
```css
#fc9 /* same as #ffcc99 */
#f0f /* same as #ff00ff */
#b58 /* same as #bb5588 */
```
## 🛠️ 적용 사례 (Applied in summary)
The color values above are the page's own demonstration examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
6-digit HEX (language: CSS):
```css
selector {
color: #rrggbb; /* each pair 00–ff */
}
```
3-digit HEX shorthand (only when each pair is a doubled digit):
```css
selector {
color: #rgb; /* e.g. #f0c == #ff00cc */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **6-digit vs 3-digit HEX** — use the full `#rrggbb` form for any color; the `#rgb` shorthand is only usable when each component pair is a doubled digit, in which case it produces an identical color with fewer characters. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS RGB]], [[CSS HSL]], [[CSS Colors]], [[CSS Background Color]]
- **참조 맥락:** Referenced whenever a color is specified as a hexadecimal code, the most common form in stylesheets.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS HEX Colors — https://www.w3schools.com/css/css_colors_hex.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS HEX Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_HSL.md
+123
View File
@@ -0,0 +1,123 @@
---
id: css-hsl-colors
title: "CSS HSL Colors"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["HSL", "hsl()", "HSLA", "hsla()", "hue saturation lightness", "CSS HSL values"]
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", "color", "hsl", "hsla"]
raw_sources: ["https://www.w3schools.com/css/css_colors_hsl.asp"]
applied_in: []
github_commit: ""
---
# [[CSS HSL Colors]]
## 🎯 한 줄 통찰 (One-line insight)
HSL specifies a color by hue, saturation, and lightness — `hsl(hue, saturation, lightness)` — and `hsla()` adds an alpha channel (0.0–1.0) for opacity. [S1]
## 🧠 핵심 개념 (Core concepts)
- **HSL = Hue, Saturation, Lightness.** [S1]
- **Syntax** — `hsl(hue, saturation, lightness)`. [S1]
- **Hue** — a degree on the color wheel from 0 to 360: 0 (or 360) is red, 120 is green, 240 is blue. [S1]
- **Saturation** — a percentage value: 0% means a shade of gray, and 100% is the full color. [S1]
- **Lightness** — a percentage: 0% is black, 50% is neither dark nor light, 100% is white. [S1]
- **HSLA** — extends HSL with an alpha channel for opacity: `hsla(hue, saturation, lightness, alpha)`, alpha 0.0 (transparent) to 1.0 (opaque). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Saturation controls vividness** — lowering saturation toward 0% washes a color out toward gray while keeping hue and lightness fixed. [S1]
- **Lightness controls brightness** — sweeping lightness from 0% to 100% moves any hue from black through full color to white. [S1]
- **Gray via HSL** — set hue and saturation to 0 and vary only lightness to produce shades of gray. [S1]
## 📖 세부 내용 (Details)
**HSL Value**
HSL stands for hue, saturation, and lightness. An HSL color value is specified with `hsl(hue, saturation, lightness)`. Hue is a degree on the color wheel from 0 to 360, where 0 is red, 120 is green, and 240 is blue. Saturation is a percentage value: 0% means a shade of gray, and 100% is the full color. Lightness is also a percentage: 0% is black, 50% is neither dark nor light, and 100% is white. [S1]
**Saturation**
With hue at 0 (red) and lightness at 50%, varying the saturation demonstrates the effect: [S1]
```css
hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)
```
**Lightness**
With hue at 0 (red) and saturation at 100%, varying the lightness demonstrates the effect from no light (black) through full color to full lightness (white). The page shows this across lightness values ranging from 0% to 100%: [S1]
```css
hsl(0, 100%, 0%) /* 0% = black */
hsl(0, 100%, 100%) /* 100% = white */
```
(Intermediate lightness swatches appear on the page but their exact numeric values are: Not found in source.)
**Shades of Gray**
Shades of gray are often defined by setting the hue and saturation to 0 and adjusting the lightness from 0% (black) to 100% (white): [S1]
```css
hsl(0, 0%, 0%) /* black */
hsl(0, 0%, 100%) /* white */
```
(Intermediate gray lightness values between these endpoints are shown as swatches on the page but their exact numeric values are: Not found in source.)
**HSLA Value**
HSLA color values are an extension of HSL with an alpha channel, which specifies the opacity for a color. An HSLA color value is specified with `hsla(hue, saturation, lightness, alpha)`, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not transparent at all). [S1]
The page demonstrates the same color at increasing opacity: [S1]
```css
hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)
```
## 🛠️ 적용 사례 (Applied in summary)
The color values above are the page's own demonstration examples. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
HSL function (language: CSS):
```css
selector {
color: hsl(hue, saturation, lightness); /* hue 0–360; sat/light 0%–100% */
}
```
HSLA function with opacity:
```css
selector {
color: hsla(hue, saturation, lightness, alpha); /* alpha 0.0–1.0 */
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **HSL vs HSLA** — use `hsl()` for an opaque color described intuitively by hue/saturation/lightness; use `hsla()` when an opacity (alpha) value from 0.0 to 1.0 is also required. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS RGB]], [[CSS HEX]], [[CSS Colors]], [[CSS Background Color]]
- **참조 맥락:** Referenced whenever a color is described perceptually by hue, saturation, and lightness, or when an opacity channel is needed via HSLA.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS HSL Colors — https://www.w3schools.com/css/css_colors_hsl.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS HSL Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Height_Width.md
+101
View File
@@ -0,0 +1,101 @@
---
id: css-height-and-width
title: "CSS Height and Width"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["height", "width", "CSS height", "CSS width", "element dimensions"]
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", "height", "width", "box-model"]
raw_sources: ["https://www.w3schools.com/css/css_height_width.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Height and Width]]
## 🎯 한 줄 통찰 (One-line insight)
The `height` and `width` properties set the size of the area inside the padding, border, and margin of an element — they do not include padding, borders, or margins. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Purpose** — the `height` and `width` properties set the height and width of the area inside the padding, border, and margin of the element. [S1]
- **Content-only** — these properties size the content area; they do not include padding, borders, or margins in their calculations. [S1]
- **Accepted values** — `auto` (browser calculates dimensions; default), a length (px, cm, em, etc.), `%` (percentage of the containing block), `initial` (default value), or `inherit` (inherited from parent). [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Fixed vs. fluid** — combine a length on one axis with a `%` on the other (e.g., fixed `height` + percentage `width`) for partially responsive boxes. [S1]
- **Content-box mental model** — when reasoning about an element's footprint, add padding and border to the declared `height`/`width`, since those are excluded. [S1]
## 📖 세부 내용 (Details)
**What height and width do**
The CSS `height` and `width` properties set the height and width of the area inside the padding, border, and margin of the element. This means they do not include padding, borders, or margins in their calculations. [S1]
**Accepted values**
The `height` and `width` properties accept: [S1]
- `auto` — the browser calculates the dimensions (this is the default)
- a length — specific values in px, cm, em, etc.
- `%` — a percentage of the containing block
- `initial` — sets the property to its default value
- `inherit` — the property is inherited from the parent
**Example 1** — fixed height with percentage width: [S1]
```css
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
```
**Example 2** — fixed height and fixed width: [S1]
```css
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
```
**Note**
The tutorial emphasizes: "Remember that the height and width properties do not include padding, borders, or margins!" [S1]
## 🛠️ 적용 사례 (Applied in summary)
The two `div` examples are the page's own applied cases, demonstrating fixed and percentage-based sizing. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Size a box's content area (language: CSS):
```css
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
```
## ⚖️ 모순 및 업데이트 (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 Max-width and Min-width]], [[CSS Box Model]], [[CSS Padding and Box Sizing]]
- **참조 맥락:** Referenced whenever an element's content-area dimensions must be set explicitly.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Height and Width — https://www.w3schools.com/css/css_height_width.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Height and Width" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Horizontal_Align.md
+138
View File
@@ -0,0 +1,138 @@
---
id: css-horizontal-align
title: "CSS Horizontal Align"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["horizontal align", "margin auto", "center block element", "center image", "left right align"]
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", "alignment", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_align_horizontal.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Horizontal Align]]
## 🎯 한 줄 통찰 (One-line insight)
Horizontal alignment in CSS depends on the element: `margin: auto` (with a width) centers block elements, `text-align: center` centers text, `auto` left/right margins center images, and `position: absolute` or `float` push elements to the left or right. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Center block elements with `margin: auto`** — used to horizontally center a block-level element like `<div>`. [S1]
- **Width is required for margin auto** — the example sets `width: 50%`; centering with `margin: auto` needs a defined width to take effect. [S1]
- **Center text with `text-align: center`** — used to center text inside a block-level element. [S1]
- **Center an image** — set `margin-left` and `margin-right` to `auto` and turn the image into a `block` element. [S1]
- **Directional alignment** — `position: absolute` (with `right`/`left`) or `float` push an element to one side. [S1]
- **Absolute positioning caveat** — absolute positioned elements are removed from the normal flow, and can overlap other elements. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Block centering pattern** — `margin: auto` + an explicit `width`. [S1]
- **Image centering pattern** — `display: block` + `margin-left: auto` + `margin-right: auto`. [S1]
- **Right-align patterns** — `position: absolute; right: 0px;` (removed from flow) or `float: right;` (stays in flow). [S1]
## 📖 세부 내용 (Details)
**Center Align Block Elements**
Use `margin: auto;`, to horizontally center a block-level element (like `<div>`). [S1]
```css
.center {
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
```
**Center Align Text**
To center the text inside a block-level element, use `text-align: center;`. [S1]
```css
p {
text-align: center;
}
```
**Center Align an Image**
To center an image, set `margin-left` and `margin-right` to `auto`, and also turn the image into a `block` element. [S1]
```css
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
```
**Left and Right Align — Using `position`**
Another method for aligning elements is to use `position: absolute;`. Note: absolute positioned elements are removed from the normal flow, and can overlap other elements. [S1]
```css
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid green;
padding: 10px;
}
```
**Left and Right Align — Using `float`**
Another method for aligning an element to the left or right is to use the `float` property. [S1]
```css
.right {
float: right;
width: 300px;
border: 3px solid green;
padding: 10px;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are: centering a block `div` with `margin: auto`, centering paragraph text, centering an image, right-aligning with `position: absolute`, and right-aligning with `float`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Center a block element (language: CSS):
```css
.center {
margin: auto;
width: 50%;
}
```
Center an image:
```css
img {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`position: absolute` vs `float` for right alignment** — both push an element to the right, but `position: absolute` removes the element from the normal flow (it can overlap other elements), whereas `float: right` keeps it in the flow. [S1]
- **By content type** — block elements → `margin: auto`; text → `text-align: center`; images → block + auto side margins. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Center Align]], [[CSS Vertical Align]], [[CSS Float Examples]], [[CSS Position]]
- **참조 맥락:** Referenced when horizontally centering or side-aligning blocks, text, and images.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Horizontal Align — https://www.w3schools.com/css/css_align_horizontal.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Horizontal Align" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Horizontal_Navbar.md
+223
View File
@@ -0,0 +1,223 @@
---
id: css-horizontal-navbar
title: "CSS Horizontal Navbar"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["horizontal navbar", "top navigation", "horizontal navigation bar", "flex navbar", "float navbar", "sticky navbar"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "navbar", "navigation"]
raw_sources: ["https://www.w3schools.com/css/css_navbar_horizontal.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Horizontal Navbar]]
## 🎯 한 줄 통찰 (One-line insight)
A horizontal navbar lays its list items side by side using either floating list items or a flexbox `<ul>`, then adds hover/active states, dividers, and fixed or sticky positioning. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Float method** — `ul li { float: left; }` with `overflow: hidden` on the `<ul>` lays links horizontally. [S1]
- **Flex method** — `display: flex` on the `<ul>` arranges links in a row. [S1]
- **Block links** — `display: block` on `a` makes the full link area clickable. [S1]
- **Active class** — `a.active` marks the current link with a highlight color. [S1]
- **Fixed/sticky positioning** — `position: fixed` (top/bottom) or `position: sticky` (with `top`) keeps the navbar in view while scrolling. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Two layout methods** — floating list items (`float: left`) or a flex container (`display: flex`) both yield a horizontal row. [S1]
- **Dividers** — `border-right` on each `li` with `li:last-child { border-right: none; }` removes the trailing divider. [S1]
- **Right-aligned item** — `style="float:right"` on a single `<li>` pushes one link to the right. [S1]
- **Sticky requires an offset** — at least one of `top`/`right`/`bottom`/`left` must be set for sticky to work. [S1]
## 📖 세부 내용 (Details)
**Horizontal navbar with float** [S1]
```css
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
```
**Horizontal navbar with flex** [S1]
```css
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
}
```
**Horizontal centered navbar with flex** [S1]
```css
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
```
**Active state** [S1]
```css
ul li a.active {
background-color: #04AA6D;
}
```
**Gray horizontal navbar** [S1]
```css
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
```
**Right-align the last link** [S1]
```html
<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a href="#about">About</a></li>
</ul>
```
**Border dividers** [S1]
```css
/* Add a lightgray right border to all list items, except the last */
ul li {
float: left;
border-right: 1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
}
```
**Fixed top navbar** [S1]
```css
ul {
position: fixed;
top: 0;
width: 100%;
}
```
**Fixed bottom navbar** [S1]
```css
ul {
position: fixed;
bottom: 0;
width: 100%;
}
```
**Note** [S1]
Fixed position might not work properly on mobile devices.
**Sticky navbar** [S1]
```css
ul {
position: sticky;
top: 0;
}
```
**Note** [S1]
You must specify at least one of the `top`, `right`, `bottom` or `left` properties, for sticky positioning to work.
## 🛠️ 적용 사례 (Applied in summary)
The page's applied examples are the dark float navbar, the flex navbar, the centered flex navbar, the green `.active` link, the gray flex navbar, the right-aligned About link, border dividers, fixed top/bottom navbars, and the sticky navbar. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Float-based horizontal navbar (language: CSS):
```css
ul li {
float: left;
}
ul li a {
display: block;
padding: 14px 16px;
text-decoration: none;
}
```
Sticky navbar (language: CSS):
```css
ul {
position: sticky;
top: 0;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Float vs Flex layout** — The source presents two methods for laying out a horizontal navbar: floating the list items (`ul li { float: left; }`, with `overflow: hidden` on the `<ul>`) or using a flex container (`display: flex` on the `<ul>`). Both produce a horizontal row of links; the flex method additionally enables `justify-content: center` for easy centering. [S1]
- **Fixed vs Sticky positioning** — `position: fixed` pins the navbar to the top or bottom of the viewport (but may not work properly on mobile), while `position: sticky` keeps it in flow until scrolled and requires at least one offset (`top`/`right`/`bottom`/`left`) to work. [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.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Navigation Bar]], [[CSS Vertical Navbar]], [[CSS Position]], [[CSS Flexbox]]
- **참조 맥락:** Referenced when building a top or bottom navigation bar with float or flex layout.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Horizontal Navbar — https://www.w3schools.com/css/css_navbar_horizontal.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Horizontal Navbar" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Icons_Bootstrap.md
+97
View File
@@ -0,0 +1,97 @@
---
id: css-icons-bootstrap
title: "CSS Icons Bootstrap"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Bootstrap icons", "glyphicons", "Bootstrap glyphicons", "CSS icons", "bootstrap CDN icons"]
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", "icons", "bootstrap", "glyphicons"]
raw_sources: ["https://www.w3schools.com/css/css_icons_bootstrap.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Icons Bootstrap]]
## 🎯 한 줄 통찰 (One-line insight)
Bootstrap glyphicons can be added to a page by linking the Bootstrap CDN stylesheet in the `<head>` and placing `<i>` elements with `glyphicon glyphicon-*` class names — no download or installation required. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Icon library approach** — icons can be added from the Bootstrap icon library (glyphicons). [S1]
- **CDN-based** — to use the Bootstrap glyphicons, add the Bootstrap CSS link inside the `<head>` section. [S1]
- **No installation** — no downloading or installation is required. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Stylesheet link in head** — reference the Bootstrap CDN stylesheet in `<head>` to enable glyphicons. [S1]
- **Two-class naming** — each icon uses the base class `glyphicon` plus a specific `glyphicon-<name>` class on an `<i>` element. [S1]
## 📖 세부 내용 (Details)
**Bootstrap Icons** — to use the Bootstrap glyphicons, add the following line inside the `<head>` section of your HTML page: [S1]
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
```
**Note:** No downloading or installation is required! [S1]
**Example — adding Bootstrap glyphicons:** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
</body>
</html>
```
Each icon is rendered by an `<i>` element carrying `glyphicon` together with a specific icon class (e.g. `glyphicon-cloud`, `glyphicon-remove`, `glyphicon-user`, `glyphicon-envelope`, `glyphicon-thumbs-up`). [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own example renders five glyphicons (cloud, remove, user, envelope, thumbs-up) by linking the Bootstrap CDN stylesheet and adding inline `<i>` elements. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single Bootstrap glyphicon (language: HTML):
```html
<i class="glyphicon glyphicon-cloud"></i>
```
Required head reference:
```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
```
## ⚖️ 모순 및 업데이트 (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 Icons Font Awesome]], [[CSS Icons Google]], [[CSS Fonts]]
- **참조 맥락:** Referenced when adding glyphicons to a project already using the Bootstrap CDN.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Icons Bootstrap — https://www.w3schools.com/css/css_icons_bootstrap.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Bootstrap" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Icons_Font_Awesome.md
+99
View File
@@ -0,0 +1,99 @@
---
id: css-icons-font-awesome
title: "CSS Icons Font Awesome"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Font Awesome icons", "fa icons", "CSS icons", "icon library", "fontawesome", "scalable vector icons"]
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", "icons", "font-awesome"]
raw_sources: ["https://www.w3schools.com/css/css_icons.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Icons Font Awesome]]
## 🎯 한 줄 통찰 (One-line insight)
Icons can be added to an HTML page from an icon library such as Font Awesome, where each icon is a scalable vector that can be customized with CSS (size, color, shadow, etc.). [S1]
## 🧠 핵심 개념 (Core concepts)
- **Icon libraries** — icons can easily be added to an HTML page using an icon library. [S1]
- **Scalable vectors** — the icons are scalable vectors that can be customized with CSS (size, color, shadow, etc.). [S1]
- **No installation** — to use Font Awesome icons, no downloading or installation is required. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Kit script in head** — add the Font Awesome kit `<script>` to the `<head>` of the page to enable icons. [S1]
- **Inline element + class** — place an icon by adding an inline element (`<i>` or `<span>`) carrying the appropriate Font Awesome class name (e.g. `fas fa-cloud`). [S1]
## 📖 세부 내용 (Details)
Icons can easily be added to your HTML page using an icon library such as Font Awesome. All the icons in the icon libraries are scalable vectors that can be customized with CSS (size, color, shadow, etc.). [S1]
**Font Awesome Icons** — to use the Font Awesome icons, go to fontawesome.com, sign in, and get a code to add in the `<head>` section of your HTML page. The kit reference takes this form: [S1]
```html
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
```
**Note:** No downloading or installation is required! [S1]
**Example — adding Font Awesome icons:** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
</body>
</html>
```
Each icon is produced by an `<i>` element with the relevant Font Awesome class names (e.g. `fas fa-cloud`, `fas fa-heart`). For the complete set of icon names, the page refers readers to the Font Awesome Icon Reference. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own example renders five icons (cloud, heart, car, file, bars) by adding the kit script to the head and inline `<i>` elements to the body. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single Font Awesome icon (language: HTML):
```html
<i class="fas fa-cloud"></i>
```
Required head reference:
```html
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
```
## ⚖️ 모순 및 업데이트 (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 Icons Bootstrap]], [[CSS Icons Google]], [[CSS Fonts]]
- **참조 맥락:** Referenced when adding scalable vector icons to a page without image assets.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Icons Font Awesome — https://www.w3schools.com/css/css_icons.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Font Awesome" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Icons_Google.md
+97
View File
@@ -0,0 +1,97 @@
---
id: css-icons-google
title: "CSS Icons Google"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["Google icons", "Material Icons", "Google Material Icons", "CSS icons", "material-icons"]
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", "icons", "google", "material-icons"]
raw_sources: ["https://www.w3schools.com/css/css_icons_google.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Icons Google]]
## 🎯 한 줄 통찰 (One-line insight)
Google Material Icons can be added by linking the Material Icons stylesheet in the `<head>` and placing `<i class="material-icons">` elements whose text content is the icon name — no download or installation required. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Icon library approach** — icons can be added from the Google Material Icons library. [S1]
- **Stylesheet-based** — to use the Google icons, add the Material Icons stylesheet link inside the `<head>` section. [S1]
- **No installation** — no downloading or installation is required. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Stylesheet link in head** — reference the Google Material Icons font stylesheet in `<head>`. [S1]
- **Name-as-text-content** — each icon uses the `material-icons` class on an `<i>` element with the icon name placed as the text content (e.g. `cloud`, `favorite`). [S1]
## 📖 세부 내용 (Details)
**Google Icons** — to use the Google icons, add the following line inside the `<head>` section of your HTML page: [S1]
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
**Note:** No downloading or installation is required! [S1]
**Example — adding Google Material Icons:** [S1]
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
</html>
```
Each icon is rendered by an `<i>` element with the `material-icons` class, and the icon name (e.g. `cloud`, `favorite`, `attachment`, `computer`, `traffic`) is placed as the text content of the tag. For the complete set of icons, the page refers readers to its Icon Tutorial. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's own example renders five Material Icons (cloud, favorite, attachment, computer, traffic) by linking the Google stylesheet and adding inline `<i class="material-icons">` elements. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single Google Material icon (language: HTML):
```html
<i class="material-icons">cloud</i>
```
Required head reference:
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
## ⚖️ 모순 및 업데이트 (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 Icons Font Awesome]], [[CSS Icons Bootstrap]], [[CSS Fonts]]
- **참조 맥락:** Referenced when adding Material Design icons to a page via the Google fonts stylesheet.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Icons Google — https://www.w3schools.com/css/css_icons_google.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Icons Google" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Centering.md
+135
View File
@@ -0,0 +1,135 @@
---
id: css-image-centering
title: "CSS Image Centering"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["center image", "center an image", "margin auto image", "flexbox center image", "grid center image"]
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", "images", "layout"]
raw_sources: ["https://www.w3schools.com/css/css3_image_center.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Centering]]
## 🎯 한 줄 통찰 (One-line insight)
An image can be centered horizontally with `display: block` plus `margin: auto`, or both horizontally and vertically by wrapping it in a flexbox or grid container. [S1]
## 🧠 핵심 개념 (Core concepts)
- **margin auto needs a block** — to center an image with `margin: auto`, it must be a block element (`display: block`) and have a width smaller than the page. [S1]
- **Flexbox horizontal centering** — a container with `display: flex` and `justify-content: center` centers a child image horizontally. [S1]
- **Flexbox both axes** — adding `align-items: center` (plus a container `height`) centers the image both horizontally and vertically. [S1]
- **Grid centering** — `display: grid` with `place-items: center` centers the image on both axes in one declaration. [S1]
- **Coverage** — images can be centered horizontally, vertically, or both, using these modern CSS techniques. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Block + auto margins** — the classic horizontal-centering recipe for a fixed-width block element. [S1]
- **Container-driven centering** — flexbox (`justify-content` / `align-items`) and grid (`place-items: center`) center children without touching the image's own margins. [S1]
## 📖 세부 내용 (Details)
**Center an image with `margin: auto`**
To center an image, set `display: block` and `margin-left`/`margin-right` to `auto` (here via `margin: auto`), and give it a width smaller than the page. [S1]
```css
img {
display: block;
margin: auto;
width: 50%;
}
```
**Center horizontally with flexbox**
Place the `<img>` inside a `<div>` container and use flexbox to center it horizontally. [S1]
```css
div {
display: flex;
justify-content: center;
}
img {
width: 50%;
}
```
**Center horizontally and vertically with flexbox**
Add `align-items: center` and a container height to center on both axes. [S1]
```css
div {
display: flex;
justify-content: center;
align-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}
```
**Center horizontally and vertically with CSS Grid**
`place-items: center` centers the image on both axes in a single property. [S1]
```css
div {
display: grid;
place-items: center;
height: 600px;
border: 1px solid black;
}
img {
width: 50%;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The four centering examples above are the source's applied cases: block + auto margins, flex horizontal, flex both-axes, and grid both-axes. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Classic horizontal centering (language: CSS):
```css
img {
display: block;
margin: auto;
width: 50%;
}
```
Both-axes centering with grid:
```css
div {
display: grid;
place-items: center;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Per the source, use `display: block; margin: auto;` for simple **horizontal** centering of a single fixed-width image. Use a **flexbox** container (`justify-content: center`, optionally `align-items: center`) when you also need vertical centering or are already laying out with flex. Use **grid** with `place-items: center` for the most concise both-axes centering. Flex and grid both center the image without modifying the image's own margins, and require a container `height` for vertical centering. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Image Styling]], [[CSS Flexbox]], [[CSS Grid]], [[CSS Margin]]
- **참조 맥락:** Referenced whenever an image needs to be centered within its container or the page.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Centering — https://www.w3schools.com/css/css3_image_center.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Centering" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Effects.md
+75
View File
@@ -0,0 +1,75 @@
---
id: css-image-effects
title: "CSS Image Effects"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["image opacity", "image transparency", "text on image", "image text positioning", "image effects"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "images", "opacity"]
raw_sources: ["https://www.w3schools.com/css/css3_images_effects.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Effects]]
## 🎯 한 줄 통찰 (One-line insight)
The W3Schools "CSS Image Effects" page covers two effects: making images transparent with the `opacity` property, and overlaying text on an image positioned at the corners or center. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Image opacity** — the `opacity` property controls how transparent an image is, taking values from `0.0` (fully transparent) to `1.0` (fully opaque). [S1]
- **Partial transparency** — values between, such as `0.5`, render the image partially see-through. [S1]
- **Text on an image** — text can be overlaid on an image and positioned at the top left, top right, bottom left, bottom right, or centered. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Opacity as a 0–1 dial** — transparency is a single continuous value where lower means more see-through, useful for hover dimming or watermark effects. [S1]
- **Corner-anchored overlay** — positioning text over an image relies on a positioned container with the text element placed against a chosen corner or centered. [S1]
## 📖 세부 내용 (Details)
**Image opacity / transparency**
The `opacity` property specifies the transparency of an image. It accepts a value from `0.0` to `1.0`: the lower the value, the more transparent the image. A value of `0.0` makes the image fully transparent, an intermediate value such as `0.5` makes it partially transparent, and `1.0` is the default (fully opaque). [S1]
**Image text positioning**
Text can be placed on top of an image and positioned in different spots: top left, top right, bottom left, bottom right, or centered. The fetched content describes these positioning options but does not include the inline CSS declaration blocks for each placement — those appear only behind the page's "Try it Yourself" examples. The exact per-position CSS is "Not found in source". [S1]
> Note: The page title "CSS Image Effects" on W3Schools does NOT cover image reflection (`box-reflect`). The fetched content confirms the page is limited to image opacity/transparency and image text positioning. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The source's applied cases are the opacity-based transparency demos (full, partial, and full opacity) and the text-over-image positioning demos. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Image transparency dial (language: CSS):
```css
img {
opacity: 0.5;
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note that the per-corner text-positioning CSS was not present inline in the fetched content (marked "Not found in source" above).
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.85
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Image Hover]], [[CSS Image Filters]], [[CSS Image Styling]], [[CSS Position]]
- **참조 맥락:** Referenced when dimming images via opacity or labeling images with overlaid text.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Effects — https://www.w3schools.com/css/css3_images_effects.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Effects" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Filters.md
+121
View File
@@ -0,0 +1,121 @@
---
id: css-image-filters
title: "CSS Image Filters"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["filter property", "image filter", "grayscale", "blur", "sepia", "drop-shadow filter", "hue-rotate"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "images", "filter"]
raw_sources: ["https://www.w3schools.com/css/css3_image_filters.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Filters]]
## 🎯 한 줄 통찰 (One-line insight)
The CSS `filter` property adds visual effects (like blur and saturation) to elements such as images, via functions like `blur()`, `grayscale()`, `brightness()`, `sepia()`, and more. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`filter` property** — used to add visual effects (like blur and saturation) to elements. [S1]
- **Function-based effects** — the value is one or more filter functions, each taking a parameter such as a length, percentage, number, or degrees. [S1]
- **Percentage vs number** — many functions accept either form (e.g. `grayscale(60%)` ≈ `grayscale(0.6)`); `100%` / `1` is the full effect and `0%` / `0` is no effect. [S1]
- **Combinable** — multiple filter functions can be combined in a single `filter` value. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Single property, many effects** — one `filter` declaration covers blur, color, brightness, and shadow effects without extra markup. [S1]
- **Normalized intensity scale** — effects like grayscale, invert, opacity, saturate, and sepia treat `0`/`0%` as off and `1`/`100%` as full, making them easy to dial. [S1]
## 📖 세부 내용 (Details)
The CSS `filter` property is used to add visual effects (like blur and saturation) to elements. The tutorial documents the following filter functions: [S1]
| Function | Description / behavior | Example values shown |
|----------|------------------------|----------------------|
| `blur()` | Applies a blur effect; a larger value creates more blur. | `blur(2px)`, `blur(6px)` |
| `brightness()` | Adjusts brightness; `100%` is default, over `100%` brightens, under `100%` darkens, `0%` is black. | `brightness(150%)`, `brightness(50%)` |
| `contrast()` | Adjusts contrast; `100%` default, over `100%` increases contrast, `0%` makes it completely gray. | `contrast(150%)`, `contrast(50%)` |
| `drop-shadow()` | Applies a drop-shadow effect to an image. | `drop-shadow(8px 8px 10px gray)` |
| `grayscale()` | Converts an image to grayscale; `100%`/`1` = complete grayscale, `0%` = no effect. | `grayscale(1)`, `grayscale(60%)`, `grayscale(0.4)` |
| `hue-rotate()` | Applies a color rotation in degrees. | `hue-rotate(200deg)`, `hue-rotate(90deg)`, `hue-rotate(-90deg)` |
| `invert()` | Inverts the colors of an image; `100%`/`1` = fully inverted, `0%` = no effect. | `invert(0.3)`, `invert(70%)`, `invert(100%)` |
| `opacity()` | Applies an opacity (transparency) effect to an element. | `opacity(80%)`, `opacity(50%)`, `opacity(0.2)` |
| `saturate()` | Adjusts the saturation (color intensity) of an element. | `saturate(0)`, `saturate(100%)`, `saturate(200%)` |
| `sepia()` | Converts an image to a sepia tone; `0%` = no effect, `100%`/`1` = full sepia. | `sepia(1)`, `sepia(60%)`, `sepia(0.4)` |
**Example declarations** (verbatim from the source's example values): [S1]
```css
img {
filter: blur(2px);
}
```
```css
img {
filter: grayscale(1);
}
```
```css
img {
filter: sepia(60%);
}
```
```css
img {
filter: drop-shadow(8px 8px 10px gray);
}
```
```css
img {
filter: hue-rotate(200deg);
}
```
**Combining filters**
Multiple filter functions can be combined in one `filter` value. The fetched content notes that combining multiple filters is supported but does not provide a specific multi-function example block inline — that exact combined declaration is "Not found in source". [S1]
> Note: The fetched content does not mention the `-webkit-filter` prefix or include an explicit browser-support note. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The source's applied cases are the per-function demos (blur, brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, saturate, sepia) applied to images. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Single filter (language: CSS):
```css
img {
filter: grayscale(100%);
}
```
Dialing intensity with a number:
```css
img {
filter: sepia(0.4);
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. A specific combined-filter example and any `-webkit-filter` prefix were not present inline (marked "Not found in source" above).
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Image Effects]], [[CSS Image Styling]], [[CSS Box Shadow]], [[CSS Opacity]]
- **참조 맥락:** Referenced when applying visual effects (grayscale, blur, sepia, shadow) to images without editing the source files.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Filters — https://www.w3schools.com/css/css3_image_filters.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Filters" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Gallery.md
+253
View File
@@ -0,0 +1,253 @@
---
id: css-image-gallery
title: "CSS Image Gallery"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["image gallery", "photo gallery", "responsive gallery", "flexbox gallery", "CSS gallery"]
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", "gallery", "flexbox", "responsive"]
raw_sources: ["https://www.w3schools.com/css/css_image_gallery.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Gallery]]
## 🎯 한 줄 통찰 (One-line insight)
A CSS image gallery arranges a collection of images in an organized, often responsive layout using `display: flex` with `flex-wrap: wrap`, then adapts the per-item width with `@media` queries for different screen sizes. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Image gallery** — a collection of images displayed in an organized, and often responsive, way on a web page. [S1]
- **Container structure** — a wrapping element (typically `<div class="gallery">`) holds individual item containers (typically `<div class="gallery-item">`), each containing an `<img>` and optionally a description. [S1]
- **Flexbox layout** — the gallery container uses `display: flex;` with `flex-wrap: wrap;`, an effective module for arranging images in rows or columns. [S1]
- **Responsive sizing** — `@media` queries change the per-item width so the number of images per row adapts to the viewport width. [S1]
- **Fluid images** — images are set to `width: 100%; height: auto;` so each scales to fit its item container. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Flex-wrap grid** — `display: flex; flex-wrap: wrap;` on a container lets fixed/percentage-width items flow into rows and wrap automatically. [S1]
- **Breakpoint width swap** — keep the markup constant and change only `.gallery-item` width at breakpoints (`calc(25% - 20px)` → `calc(50% - 20px)` → `calc(100% - 20px)`) to get 4 / 2 / 1 columns. [S1]
- **Hover affordance** — darken the item border on `:hover` to signal interactivity. [S1]
## 📖 세부 내용 (Details)
**What is a CSS image gallery?**
A CSS image gallery is a collection of images that is displayed in an organized, and often responsive way, on a web page. The HTML uses a container `<div class="gallery">` wrapping individual `<div class="gallery-item">` elements, each holding an `<img>` and possibly a description. [S1]
**Example 1 — Basic Image Gallery**
The gallery container is a flex row that wraps; each item has a `5px` margin, a `1px` border (darkening on hover), and a fixed `180px` width. Images fill the item width, and the `.desc` caption is padded and centered: [S1]
```html
<html>
<head>
<style>
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: 180px;
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
```
**Tip:** `display: flex;` is used for the image gallery above. This layout module is effective for arranging images in rows or columns. [S1]
**Example 2 — Responsive Image Gallery**
Adds `box-sizing: border-box` globally and uses percentage widths via `calc()`. Media queries re-arrange the images per the rule set: larger than 768px shows four side by side, smaller than 768px shows two, and smaller than 480px stacks them vertically (100%): [S1]
```html
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item {
margin: 5px;
border: 1px solid #ccc;
width: calc(25% - 20px);
}
div.gallery-item:hover {
border: 1px solid #777;
}
div.gallery-item img {
width: 100%;
height: auto;
}
div.gallery-item div.desc {
padding: 15px;
text-align: center;
}
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect!</h4>
<div class="gallery">
<div class="gallery-item">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Cinque Terre</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Green Forest</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Northern Lights</div>
</div>
<div class="gallery-item">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Mountains</div>
</div>
</div>
</body>
</html>
```
Media-query rules summarized on the page: if the screen is larger than 768px wide, show four images side by side; if smaller than 768px, show two side by side; if smaller than 480px, stack the images vertically (100%). **Tip:** You will learn more about media queries later in the CSS Tutorial. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's two examples — a fixed-width flex gallery and a responsive percentage-width gallery — are the applied demonstrations. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Flex-wrap gallery container (language: CSS):
```css
div.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
div.gallery-item img {
width: 100%;
height: auto;
}
```
Responsive breakpoint width swap (language: CSS):
```css
div.gallery-item { width: calc(25% - 20px); }
@media only screen and (max-width: 768px) {
div.gallery-item { width: calc(50% - 20px); }
}
@media only screen and (max-width: 480px) {
div.gallery-item { width: calc(100% - 20px); }
}
```
## ⚖️ 모순 및 업데이트 (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 Flexbox]], [[CSS Media Queries]], [[CSS Image Sprites]]
- **참조 맥락:** Referenced when laying out collections of images responsively, such as portfolios or product grids.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Gallery — https://www.w3schools.com/css/css_image_gallery.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Gallery" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Hover.md
+93
View File
@@ -0,0 +1,93 @@
---
id: css-image-hover
title: "CSS Image Hover Overlays"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["image overlay", "hover overlay", "fade overlay", "slide overlay", "image hover effect"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.85
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "images", "hover"]
raw_sources: ["https://www.w3schools.com/css/css3_images_hover.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Hover Overlays]]
## 🎯 한 줄 통찰 (One-line insight)
A hover overlay reveals hidden content over an image when the user hovers, either fading in (text or a box) or sliding in from the top, bottom, left, or right. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Overlay on hover** — the goal is to create an overlay effect on hover that reveals text or a colored box over the image. [S1]
- **Fade effects** — the overlay can fade in text, or fade in a box, when the image is hovered. [S1]
- **Slide effects** — the overlay can also slide in from the top, bottom, left, or right. [S1]
- **Reveal mechanism** — the overlay element starts hidden (typically `opacity: 0` or zero size) and a hover rule reveals it, with a `transition` for smoothness. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Hidden-then-revealed overlay** — place an overlay element over the image, keep it hidden, and flip it on the container's `:hover`. [S1]
- **Direction by initial offset** — slide effects differ by which dimension/offset starts collapsed (top/bottom/left/right) and grows on hover. [S1]
## 📖 세부 내용 (Details)
**Overlay image hover effects**
The page demonstrates how to create an overlay effect on hover, revealing hidden content or a visual enhancement over an image. The examples, in order, are: [S1]
1. Fade in text
2. Fade in a box
3. Slide in (top)
4. Slide in (bottom)
5. Slide in (left)
6. Slide in (right)
**Implementation pattern (described)**
The overlay pattern uses an overlay element with an initial `opacity` of `0` (invisible), a `transition` property for a smooth reveal, a `background-color` for the overlay layer, and a hover state that changes `opacity` to `1` (or adjusts dimensions for slide effects). [S1]
**Code availability**
The detailed CSS for the `.container`, `.image`, `.overlay`, and `.text` classes — including the exact transition durations, opacity values, and positioning — is presented on the page only as "Try it Yourself" interactive examples and is **Not found in source** as inline code in the fetched content. The exact declaration blocks should not be invented; consult the W3Schools editor for verbatim code. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The source's applied cases are the six hover-overlay demos (fade-in text, fade-in box, and four slide-in directions). The exact CSS for each is not reproduced here (Not found in source). No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Conceptual overlay-reveal skeleton, grounded in the page's described pattern (exact W3Schools values Not found in source):
```css
.overlay {
opacity: 0;
transition: opacity 0.5s;
background-color: /* overlay color */;
}
.container:hover .overlay {
opacity: 1;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
Per the source, choose **fade** effects (text or box) when you want the overlay to appear in place, and **slide** effects when you want it to enter from an edge; the four slide directions (top, bottom, left, right) differ only by which edge the overlay starts collapsed against and grows from on hover. [S1]
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source. Note: full per-example CSS was not available inline (marked "Not found in source").
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.85
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Image Effects]], [[CSS Image Modal]], [[CSS Transitions]], [[CSS Opacity]]
- **참조 맥락:** Referenced when adding interactive captions or reveal effects to images in galleries and cards.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Hover Overlays — https://www.w3schools.com/css/css3_images_hover.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Hover Overlays" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Modal.md
+257
View File
@@ -0,0 +1,257 @@
---
id: css-image-modal
title: "CSS Image Modal"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["modal image", "image lightbox", "popup image", "responsive modal", "image gallery modal"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.9
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "images", "modal"]
raw_sources: ["https://www.w3schools.com/css/css3_images_modal.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Modal]]
## 🎯 한 줄 통찰 (One-line insight)
A modal image (lightbox) lets users click a gallery thumbnail to open a larger version in a full-screen overlay, built from a hidden fixed-position modal that JavaScript shows and hides. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Modal overlay** — the modal is a full-viewport layer (`position: fixed`, `width: 100%`, `height: 100%`) hidden by default with `display: none` and shown via JavaScript. [S1]
- **Dim backdrop** — a semi-transparent background `rgba(0, 0, 0, 0.8)` and high `z-index: 1000` darken the page behind the enlarged image. [S1]
- **Zoom-in animation** — a `@keyframes zoomIn` animation scales the modal content from `0.6` to `1` when it opens. [S1]
- **Close control** — a `.close` "×" (`&times;`) element in the top-right corner closes the modal. [S1]
- **Caption** — a `.caption` element shows the image's label, populated from the trigger's `onclick` argument. [S1]
- **JavaScript control** — `openModal()` sets `display: "flex"` and adds a `show` class; `closeModal()` removes the class and hides the modal after a 300ms delay. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Hidden fixed layer toggled by JS** — keep the modal `display: none`, then switch to a flex layout on demand to center the enlarged content. [S1]
- **Class-driven transition + timed teardown** — add a `show` class to animate in, and on close remove it and use `setTimeout` so the exit transition finishes before `display: none`. [S1]
- **Data passed via onclick args** — the gallery image's `onclick` passes the modal id and caption text directly into the handler. [S1]
## 📖 세부 내용 (Details)
The W3Schools example builds a responsive modal image gallery in a single HTML document combining CSS and JavaScript. [S1]
```html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
text-align: center;
padding: 20px;
}
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding: 0 15px;
}
.gallery-item {
position: relative;
width: calc(25% - 20px);
height: auto;
margin: 10px;
cursor: pointer;
transition: transform 0.5s ease;
}
.gallery-item:hover {
transform: scale(1.1);
}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
align-items: center;
justify-content: center;
transition: opacity 0.5s ease;
}
/* Modal content (image) */
.modal-content {
position: relative;
width: 90%;
height: auto;
max-width: 90%;
max-height: 90%;
border-radius: 5px;
overflow: hidden;
animation: zoomIn 0.5s;
}
@keyframes zoomIn {
from {transform: scale(0.6);}
to {transform: scale(1);}
}
.modal.show {
display: flex;
opacity: 1;
}
/* Close button */
.close {
position: absolute;
top: 10px;
right: 15px;
color: #ffffff;
font-size: 35px;
font-weight: bold;
cursor: pointer;
transition: transform 0.3s;
}
/* Caption of modal image */
.caption {
position: absolute;
bottom: 15px;
width: 100%;
text-align: center;
color: #ffffff;
font-size: 24px;
}
@media screen and (max-width: 768px) {
.gallery-item {
width: calc(50% - 20px);
}
}
@media screen and (max-width: 480px) {
.gallery-item {
width: calc(100% - 20px);
}
}
</style>
</head>
<body>
<h1>Responsive Modal Images</h1>
<div class="gallery">
<img src="img_5terre.jpg" alt="Cinque Terre" class="gallery-item" onclick="openModal('modal1', 'Cinque Terre')">
<img src="img_forest.jpg" alt="Forest" class="gallery-item" onclick="openModal('modal2', 'Forest')">
<img src="img_lights.jpg" alt="Northern Lights" class="gallery-item" onclick="openModal('modal3', 'Nothern Lights')">
<img src="img_mountains.jpg" alt="Mountains" class="gallery-item" onclick="openModal('modal4', 'Mountains')">
</div>
<div id="modal1" class="modal">
<span class="close" onclick="closeModal('modal1')">&times;</span>
<img src="img_5terre.jpg" alt="Cinque Terre" class="modal-content">
<div class="caption"></div>
</div>
<div id="modal2" class="modal">
<span class="close" onclick="closeModal('modal2')">&times;</span>
<img src="img_forest.jpg" alt="Forest" class="modal-content">
<div class="caption"></div>
</div>
<div id="modal3" class="modal">
<span class="close" onclick="closeModal('modal3')">&times;</span>
<img src="img_lights.jpg" alt="Northern Lights" class="modal-content">
<div class="caption"></div>
</div>
<div id="modal4" class="modal">
<span class="close" onclick="closeModal('modal4')">&times;</span>
<img src="img_mountains.jpg" alt="Mountains" class="modal-content">
<div class="caption"></div>
</div>
<script>
function openModal(modalId, caption) {
let modal = document.getElementById(modalId);
modal.style.display = "flex";
modal.classList.add("show");
let message = modal.querySelector(".caption");
message.innerText = caption;
}
function closeModal(modalId) {
let modal = document.getElementById(modalId);
modal.classList.remove("show");
setTimeout(function () {
modal.style.display = "none";
modal.querySelector(".caption").innerText = "";
}, 300);
}
</script>
</body>
</html>
```
**Key components**
- **Modal container** — `display: none` initially, `position: fixed`, `z-index: 1000`, dark semi-transparent background `rgba(0, 0, 0, 0.8)`. [S1]
- **Animation** — zoom effect defined with `@keyframes zoomIn` scaling from `0.6` to `1`. [S1]
- **JavaScript** — `openModal()` retrieves the element by id, sets display to `flex`, adds the `show` class, and populates the caption; `closeModal()` removes the `show` class and hides the modal after a 300ms delay. [S1]
- **Responsive design** — media queries adjust gallery items from `25%` width (desktop) to `50%` (tablets, ≤768px) to `100%` (mobile, ≤480px). [S1]
## 🛠️ 적용 사례 (Applied in summary)
The full responsive modal-image gallery above is the source's applied case, integrating a flex gallery, a fixed overlay modal, a zoom animation, a close button, captions, and the open/close JavaScript. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Toggle-by-class modal control (language: JavaScript):
```javascript
function openModal(modalId, caption) {
let modal = document.getElementById(modalId);
modal.style.display = "flex";
modal.classList.add("show");
modal.querySelector(".caption").innerText = caption;
}
function closeModal(modalId) {
let modal = document.getElementById(modalId);
modal.classList.remove("show");
setTimeout(function () {
modal.style.display = "none";
modal.querySelector(".caption").innerText = "";
}, 300);
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.90
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Image Hover]], [[CSS Image Styling]], [[CSS Animations]], [[CSS Position]]
- **참조 맥락:** Referenced when building an image lightbox or click-to-enlarge gallery.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Modal — https://www.w3schools.com/css/css3_images_modal.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Modal" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Shapes.md
+143
View File
@@ -0,0 +1,143 @@
---
id: css-image-shapes
title: "CSS Image Shapes"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["clip-path", "shape-outside", "image clipping", "circle() clip", "polygon() clip", "ellipse() clip"]
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", "clip-path", "shape-outside", "images"]
raw_sources: ["https://www.w3schools.com/css/css3_image_shapes.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Shapes]]
## 🎯 한 줄 통찰 (One-line insight)
With CSS it is easy to shape (clip) images to circles, ellipses, and polygons using the `clip-path` property, while `shape-outside` lets inline content wrap around the shaped image. [S1]
## 🧠 핵심 개념 (Core concepts)
- **`clip-path`** — lets you clip an element to a basic shape or to an SVG source. [S1]
- **`shape-outside`** — lets you define a shape for the wrapping of the inline content. [S1]
- **`circle()`** — defines a circle with a radius and a position. [S1]
- **`ellipse()`** — defines an ellipse with two radii, x and y. [S1]
- **`polygon()`** — defines a polygon. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Clip to a basic shape** — apply a shape function (`circle()`, `ellipse()`, `polygon()`) as the value of `clip-path` on an image. [S1]
- **Reposition the clip** — use the `at` keyword inside a shape function (e.g. `circle(50% at right)`) to move the clip's center. [S1]
- **Wrap text around a shape** — combine `float` with `clip-path` (visual clip) and `shape-outside` (the wrap geometry) so inline content flows around the shaped image. [S1]
## 📖 세부 내용 (Details)
**Shaping images** — With CSS it is easy to shape (clip) images to circles, ellipses and polygons. [S1]
**Circle with `clip-path`** [S1]
```css
img {
clip-path: circle(50%);
}
```
**Circle positioned to the right** — the `at` keyword positions the circle. [S1]
```css
img {
clip-path: circle(50% at right);
}
```
**Circle with `shape-outside`** — the `shape-outside` property lets you define a shape for the wrapping of the inline content. [S1]
```css
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
```
**Ellipse with `clip-path`** — the `ellipse()` function defines an ellipse with two radii x and y. [S1]
```css
img {
clip-path: ellipse(50% 35%);
}
```
**Ellipse positioned to the right** [S1]
```css
img {
clip-path: ellipse(50% 35% at right);
}
```
**Ellipse with `shape-outside`** [S1]
```css
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
}
```
**Polygon with `clip-path`** — the `polygon()` function defines a polygon. [S1]
```css
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
```
**Properties and functions reference** [S1]
| Property / Function | Description |
|---|---|
| `clip-path` | Lets you clip an element to a basic shape or to an SVG source |
| `shape-outside` | Lets you define a shape for the wrapping of the inline content |
| `circle()` | Defines a circle with a radius and a position |
| `ellipse()` | Defines an ellipse with two radii x and y |
| `polygon()` | Defines a polygon |
## 🛠️ 적용 사례 (Applied in summary)
The page's own examples are the applied cases: circular/elliptical/polygonal image clips, and text-wrapping layouts where a floated image uses `shape-outside`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Clip an image to a centered circle (language: CSS):
```css
img {
clip-path: circle(50%);
}
```
Wrap inline text around a circular image (language: CSS):
```css
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
}
```
## ⚖️ 모순 및 업데이트 (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 Object Fit]], [[CSS Masking PNG]], [[CSS Borders]]
- **참조 맥락:** Referenced when cropping images to non-rectangular shapes or wrapping text around floated images.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Shapes — https://www.w3schools.com/css/css3_image_shapes.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Shapes" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Sprites.md
+177
View File
@@ -0,0 +1,177 @@
---
id: css-image-sprites
title: "CSS Image Sprites"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["image sprite", "sprite image", "CSS sprites", "background-position sprite", "navigation sprite"]
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", "sprites", "background-position", "performance"]
raw_sources: ["https://www.w3schools.com/css/css_image_sprites.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Sprites]]
## 🎯 한 줄 통찰 (One-line insight)
An image sprite packs many small images into one file, then uses `background-image` plus `background-position` offsets to display just the needed slice — cutting server requests and eliminating hover-load delay. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Image sprite** — a collection of various small images put into one larger image file, called a "sprite image." [S1]
- **Why sprites** — using a single sprite reduces the number of server requests and saves bandwidth versus loading many separate images. [S1]
- **Two key properties** — sprites are implemented with `background-image` (the sprite file) and `background-position` (which slice to show). [S1]
- **Transparent placeholder** — a tiny transparent image (`img_trans.gif`, `1×1`) can act as the element while CSS controls which part of the sprite is visible. [S1]
- **Hover without extra loads** — hover effects shift `background-position` (e.g. `45px` down) to a different region of the sprite, so no additional image needs to load. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Slice selection** — fix an element's `width`/`height` to one icon's size and use a negative `background-position` to scroll the sprite so only that icon shows. [S1]
- **Shorthand background** — combine file and position in one `background: url('sprite.gif') -47px 0;` declaration. [S1]
- **Hover row swap** — keep horizontal offset, change the vertical offset on `:hover` to reveal a second row of the sprite for interactive feedback. [S1]
## 📖 세부 내용 (Details)
**What is an image sprite?**
An image sprite is a collection of various small images put into one larger image file, called a "sprite image." This approach reduces the number of server requests and saves bandwidth. Sprites are implemented with the `background-image` and `background-position` properties. [S1]
**Example 1 — Basic Image Sprites**
Three elements (`#home`, `#prev`, `#next`) each set their own `width`/`height` and reference the same `img_navsprites.gif`, differing only by `background-position` so each shows a different icon. Transparent `1×1` images serve as the element bodies: [S1]
```html
<html>
<head>
<style>
#home {
width: 46px;
height: 44px;
background-image: url(img_navsprites.gif);
background-position: 0 0;
}
#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -47px 0;
}
#next {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -91px 0;
}
</style>
</head>
<body>
<img id="home" src="img_trans.gif" width="1" height="1">
<img id="prev" src="img_trans.gif" width="1" height="1">
<img id="next" src="img_trans.gif" width="1" height="1">
</body>
</html>
```
**Example 2 — Navigation List**
The sprite is applied to a navigation list (`<ul>`/`<li>`). The list uses relative/absolute positioning to lay items out horizontally, with each item's `left` offset and `background` shorthand isolating its icon from the sprite: [S1]
```css
#navlist {
position: relative;
}
#navlist li {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
#navlist li, #navlist a {
height: 44px;
display: block;
}
#home {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
#prev {
left: 60px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
#next {
left: 120px;
width: 43px;
background: url('img_navsprites.gif') -91px 0;
}
```
**Example 3 — Hover Effect**
Adds interactivity by shifting `background-position` 45px down (to a hover row of `img_navsprites_hover.gif`) on `:hover`. Because all images preload in one file, there is no loading delay on hover: [S1]
```css
#home a:hover {
background: url('img_navsprites_hover.gif') 0 -45px;
}
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
#next a:hover {
background: url('img_navsprites_hover.gif') -91px -45px;
}
```
**Advantages highlighted:** a single server request instead of multiple image downloads; reduced bandwidth consumption; and no loading delay on hover effects since all images preload in one file. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's three examples — basic sprite slices, a positioned navigation list, and a hover row swap — are the applied demonstrations. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Display one slice of a sprite (language: CSS):
```css
#prev {
width: 43px;
height: 44px;
background-image: url('img_navsprites.gif');
background-position: -47px 0;
}
```
Hover row swap with the background shorthand (language: CSS):
```css
#prev a:hover {
background: url('img_navsprites_hover.gif') -47px -45px;
}
```
## ⚖️ 모순 및 업데이트 (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 Backgrounds]], [[CSS Position]], [[CSS Image Gallery]]
- **참조 맥락:** Referenced when optimizing icon/asset delivery by consolidating many images into one file with positioned background slices.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Sprites — https://www.w3schools.com/css/css_image_sprites.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Sprites" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Image_Styling.md
+139
View File
@@ -0,0 +1,139 @@
---
id: css-image-styling
title: "CSS Image Styling"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["rounded images", "circled image", "CSS thumbnail", "responsive image", "polaroid card", "image styling"]
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", "images", "border-radius"]
raw_sources: ["https://www.w3schools.com/css/css3_images.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Image Styling]]
## 🎯 한 줄 통찰 (One-line insight)
CSS styles images with simple properties — `border-radius` rounds or circles them, borders and padding make thumbnails, `max-width: 100%` makes them responsive, and `box-shadow` turns them into polaroid-style cards. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Rounded images** — `border-radius` rounds the corners of an image. [S1]
- **Circled images** — `border-radius: 50%` makes an image fully circular. [S1]
- **Thumbnails** — a border combined with `border-radius`, `padding`, and a fixed `width` produces a framed thumbnail. [S1]
- **Responsive images** — `max-width: 100%` with `height: auto` scales an image down to fit its container while never exceeding its natural size. [S1]
- **Polaroid cards** — a white background with a layered `box-shadow` and a captioned container gives a polaroid/card look. [S1]
- **Responsive gallery** — `@media` queries with `calc()` widths lay out a grid of images that reflows by screen size. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Radius-driven shape** — the same `border-radius` property both softens corners (`8px`) and creates a perfect circle (`50%`). [S1]
- **Fluid sizing** — `max-width: 100%; height: auto;` is the standard recipe for an image that shrinks with its container but keeps its aspect ratio. [S1]
- **Card composition** — wrap an image in a container and add `box-shadow` plus a padded caption area to build a reusable card component. [S1]
## 📖 세부 내용 (Details)
**Rounded image**
Use the `border-radius` property to create rounded corners on an image. [S1]
```css
img {
border-radius: 8px;
}
```
**Circled image**
A `border-radius` of `50%` turns the image into a circle. [S1]
```css
img {
border-radius: 50%;
}
```
**Thumbnail images**
Combine a border, rounded corners, padding, and a width to make a thumbnail. [S1]
```css
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
```
**Thumbnail as a link with hover**
The tutorial also shows wrapping a thumbnail in a link and adding a `box-shadow` on hover for an interactive effect. The exact hover declaration block is not reproduced inline in the fetched content beyond the described `box-shadow` on hover. [S1]
**Responsive images**
A responsive image scales nicely to fit any container, using `max-width: 100%` and `height: auto`. [S1]
```css
img {
max-width: 100%;
height: auto;
}
```
**Polaroid images / cards**
Add a white background and a layered `box-shadow`, with the image filling the card width and a centered, padded caption container. [S1]
```css
div.polaroid {
width: 80%;
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {
width: 100%;
}
div.container {
text-align: center;
padding: 10px 20px;
}
```
**Responsive image gallery**
A gallery of images can be made responsive with `@media` queries and `calc()`-based widths so the number of columns adapts to the viewport. The full gallery markup was not reproduced inline in the fetched content. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The rounded, circled, thumbnail, responsive, and polaroid examples above are the source's applied cases for common image presentations. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Responsive image (language: CSS):
```css
img {
max-width: 100%;
height: auto;
}
```
Circular avatar:
```css
img {
border-radius: 50%;
}
```
## ⚖️ 모순 및 업데이트 (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 Image Centering]], [[CSS Image Filters]], [[CSS Border]], [[CSS Box Shadow]]
- **참조 맥락:** Referenced whenever presenting images as avatars, thumbnails, responsive media, or cards.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Image Styling — https://www.w3schools.com/css/css3_images.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Styling" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Important.md
+111
View File
@@ -0,0 +1,111 @@
---
id: css-important
title: "CSS !important"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["!important", "important rule", "CSS override priority", "important declaration", "highest priority CSS"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "important", "cascade", "specificity"]
raw_sources: ["https://www.w3schools.com/css/css_important.asp"]
applied_in: []
github_commit: ""
---
# [[CSS !important]]
## 🎯 한 줄 통찰 (One-line insight)
The `!important` rule forces a CSS property value to the highest priority, overriding every other styling rule for that property on an element — powerful, but to be used sparingly. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Highest priority** — `!important` assigns the highest priority to a CSS property value, overriding all previous styling rules for that specific property on an element. [S1]
- **Overrides specificity** — an `!important` declaration beats inline styles, ID selectors, and class selectors even though those would normally have higher specificity. [S1]
- **Use sparingly** — overusing `!important` creates confusing, difficult-to-debug CSS code. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Property-level override pattern** — append `!important` to a single declaration (`property: value !important;`) to lock that one property's value. [S1]
- **Accessibility escape hatch** — pairing `!important` with a `prefers-reduced-motion` media query guarantees motion is suppressed for users who request it. [S1]
## 📖 세부 내용 (Details)
**What `!important` does.** The `!important` rule assigns the highest priority to a CSS property value, overriding all previous styling rules for that specific property on an element. [S1]
**Syntax.** [S1]
```css
selector {
property: value !important;
}
```
**Example — basic override.** When `background-color: yellow !important;` is applied to paragraphs, all the paragraphs display a yellow background regardless of inline styles, ID selectors, or class selectors that would otherwise have higher specificity. [S1]
```css
p {
background-color: yellow !important;
}
```
**Example — accessibility / reduced motion.** `!important` is used to respect a user's motion-sensitivity preference, forcing animations and transitions off for everyone who requests reduced motion. [S1]
```css
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
```
**Other examples on the page.** The page also shows competing/multiple `!important` declarations across different selectors (illustrating how this can create confusing CSS) and a link-button styling case where `!important` enforces consistent styling across conflicting selectors. The exact additional source code for these boxes was not captured verbatim from the source. [S1] (Not found in source — verbatim code.)
**Fair use cases.** The page lists legitimate reasons to use `!important` [S1]:
1. Overriding styles in a Content Management System (CMS) where the CSS cannot be edited directly.
2. Respecting user accessibility preferences (such as reduced motion).
3. Creating unchangeable styles for specific elements.
**Warning.** Use `!important` sparingly — excessive use creates confusing, difficult-to-debug CSS code. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's applied demonstrations include forcing a yellow paragraph background over higher-specificity rules, and the `prefers-reduced-motion` accessibility block that kills animations and transitions. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Locking a single property (language: CSS):
```css
selector {
property: value !important;
}
```
Accessibility-driven blanket override (language: CSS):
```css
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
```
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
No contradictions found in the source.
## ✅ 검증 상태 및 신뢰도
- **상태:** draft
- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
- **신뢰 점수:** 0.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Specificity]], [[CSS Specificity Hierarchy]], [[CSS Accessibility]]
- **참조 맥락:** Reached for when a style must override everything else, or when ruling out an `!important` rule as the cause of an un-overridable style.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS !important — https://www.w3schools.com/css/css_important.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS !important" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Inheritance.md
+122
View File
@@ -0,0 +1,122 @@
---
id: css-inheritance
title: "CSS Inheritance"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS inheritance", "inherited properties", "non-inherited properties", "inherit keyword", "property inheritance"]
duplicate_of: ""
source_trust_level: "B"
confidence_score: 0.87
created_at: 2026-06-23
updated_at: 2026-06-23
review_reason: ""
merge_history: []
tags: ["css", "web", "frontend", "w3schools", "inheritance", "cascade"]
raw_sources: ["https://www.w3schools.com/css/css_inheritance.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Inheritance]]
## 🎯 한 줄 통찰 (One-line insight)
CSS inheritance governs what happens when no value is specified for a property on an element: some properties (typically text-related) inherit their parent's value, others (box-model/layout) do not, and the `inherit` keyword forces inheritance explicitly on either kind. [S1]
## 🧠 핵심 개념 (Core concepts)
- **What inheritance is** — CSS inheritance is about what happens if no value is specified for a property on an element; values either inherit from parent elements or default to initial values. [S1]
- **Inherited properties** — text-related properties like `color`, `font-family`, `font-size`, `line-height`, and `text-align` are typically inherited, ensuring consistent styling throughout a document. [S1]
- **Non-inherited properties** — box-model/layout properties like `border`, `background`, `margin`, `padding`, `width`, and `height` typically do not inherit. [S1]
- **`inherit` keyword** — used to explicitly specify inheritance; it works on both inherited and non-inherited properties. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Rely on inheritance for typography** — set text properties on a container and let descendants inherit them rather than repeating declarations. [S1]
- **Force inheritance with `inherit`** — when a non-inheriting property (like `border`) should match the parent, set it explicitly to `inherit`. [S1]
## 📖 세부 내용 (Details)
**CSS Inheritance**
CSS inheritance is about what happens if no value is specified for a property on an element. The value either inherits from parent elements or defaults to initial values. [S1]
**Inherited Properties**
Text-related properties such as `color`, `font-family`, `font-size`, `line-height`, and `text-align` are typically inherited so styling stays consistent throughout the document. A `<p>` element with `color: blue` and `font-size: 20px` passes these values to a nested `<strong>` element: [S1]
```css
p {
color: blue;
font-size: 20px;
}
```
```html
<p>This is a paragraph with some <strong>important</strong> text.</p>
```
**Non-inherited Properties**
Properties related to the box model and layout — `border`, `background`, `margin`, `padding`, `width`, `height` — typically do not inherit. A `<strong>` element inside a bordered `<p>` will not inherit the border unless explicitly stated: [S1]
```css
p {
border: 1px solid red;
}
```
```html
<p>This is a paragraph with some <strong>important</strong> text.</p>
```
**The inherit Keyword**
The `inherit` keyword is used to explicitly specify inheritance. It works on both inherited and non-inherited properties. Setting `border: inherit` on a `<strong>` element makes it inherit the parent's border value: [S1]
```css
p {
border: 1px solid red;
}
strong {
border: inherit;
}
```
```html
<p>This is a paragraph with some <strong>strong</strong> text.</p>
```
The `initial`, `unset`, and `revert` keywords, and the `all` property, are: Not found in source. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's applied cases are: a paragraph passing `color`/`font-size` to a nested `<strong>`, a bordered paragraph whose `<strong>` does not inherit the border, and a `<strong>` forced to take the parent's border via `border: inherit`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Inherited text styling (language: CSS):
```css
p {
color: blue;
font-size: 20px;
}
```
Force a non-inherited property to inherit (language: CSS):
```css
strong {
border: inherit;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **Inherited properties** (e.g., `color`, `font-family`, `font-size`, `line-height`, `text-align`) — descendants take the parent's value automatically; rely on this for consistent typography. [S1]
- **Non-inherited properties** (e.g., `border`, `background`, `margin`, `padding`, `width`, `height`) — descendants do not take the parent's value; use the `inherit` keyword when you explicitly want them to. [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.87
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Specificity]], [[CSS Cascade]], [[CSS Selectors]]
- **참조 맥락:** Referenced when reasoning about why descendant elements pick up (or do not pick up) styles from their ancestors.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Inheritance — https://www.w3schools.com/css/css_inheritance.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Inheritance" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Inline_Block.md
+126
View File
@@ -0,0 +1,126 @@
---
id: css-inline-block
title: "CSS Inline-block"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["display inline-block", "inline-block", "inline vs block", "horizontal nav menu", "inline-block menu"]
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", "display", "layout"]
raw_sources: ["https://www.w3schools.com/css/css_inline-block.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Inline-block]]
## 🎯 한 줄 통찰 (One-line insight)
`display: inline-block` makes an element flow on the same line as other inline/inline-block elements while still accepting `width`, `height`, `margin-top`, and `margin-bottom` like a block element — the bridge between inline and block behavior. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Definition** — an element with `display: inline-block` will appear on the same line as other inline or inline-block elements. [S1]
- **Block-like sizing on an inline-flow element** — in addition to flowing inline, you can set `width`, `height`, `margin-top`, and `margin-bottom` for the element (like block elements). [S1]
- **Contrast with `display: inline`** — pure inline elements (such as the default `span`) ignore width/height. [S1]
- **Contrast with `display: block`** — block elements take a full line, breaking the inline flow. [S1]
- **Common use case** — building a horizontal navigation menu from list items. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Three-way display comparison** — placing `inline`, `inline-block`, and `block` spans side by side reveals which respect width/height and which break onto new lines. [S1]
- **Horizontal menu pattern** — strip list styling and set `display: inline-block` on `li` elements to lay menu items out in a row. [S1]
## 📖 세부 내용 (Details)
**What is inline-block?**
An element with `display: inline-block` will appear on the same line as other inline or inline-block elements. In addition, you can set the `width`, `height`, `margin-top`, and `margin-bottom` properties for the element (like block elements). [S1]
**Comparing display values**
The following example shows the different behavior of `display: inline`, `display: inline-block` and `display: block`: [S1]
```css
span.a {
display: inline; /* the default for span */
padding: 5px;
border: 2px solid red;
}
span.b {
display: inline-block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
span.c {
display: block;
width: 100px;
height: 35px;
padding: 5px;
border: 2px solid red;
}
```
**Horizontal navigation menu**
A common use of `display: inline-block` is to create a horizontal navigation menu: [S1]
```css
.nav {
background-color: lightgray;
list-style-type: none;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
```
**Property reference** [S1]
| Property | Description |
|----------|-------------|
| `display` | Specifies the display behavior (the type of rendering box) of an element |
## 🛠️ 적용 사례 (Applied in summary)
The page's own applied examples are the inline/inline-block/block span comparison and the horizontal navigation menu built from `inline-block` list items. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Horizontal menu via inline-block (language: CSS):
```css
.nav li {
display: inline-block;
font-size: 18px;
padding: 15px;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
- **`inline` vs `inline-block` vs `block`** — `inline` (default for `span`) ignores width/height; `inline-block` stays on the same line yet accepts width, height, and top/bottom margins; `block` takes a full line. Choose `inline-block` when you need elements in a row that still respect explicit dimensions. [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.89
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Display]], [[CSS Float Examples]], [[CSS Horizontal Align]], [[CSS Box Model]]
- **참조 맥락:** Referenced when laying elements out in a row (menus, badges, chips) without losing block-style sizing.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Inline-block — https://www.w3schools.com/css/css_inline-block.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Inline-block" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Introduction.md
+104
View File
@@ -0,0 +1,104 @@
---
id: css-introduction
title: "CSS Introduction"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["CSS", "Cascading Style Sheets", "stylesheet", "CSS intro", "web styling"]
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", "styling", "w3schools"]
raw_sources: ["https://www.w3schools.com/css/css_intro.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Introduction]]
## 🎯 한 줄 통찰 (One-line insight)
CSS (Cascading Style Sheets) describes how HTML elements are displayed — controlling the design, layout, and display variations across different devices and screen sizes, ideally from a single external file. [S1]
## 🧠 핵심 개념 (Core concepts)
- **CSS = Cascading Style Sheets** — the language that describes how HTML elements are to be displayed on screen and other media. [S1]
- **Purpose** — CSS defines styles for web pages, including the design, layout, and variations in display for different devices and screen sizes. [S1]
- **Separation of concerns** — HTML holds content/structure; CSS holds presentation. [S1]
- **External stylesheets** — styles can be stored in external `.css` files, so the look of an entire website can be changed by editing just one file. [S1]
- **Efficiency** — CSS can control the layout of multiple web pages all at once. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Rule pattern** — a CSS rule targets a selector and sets one or more `property: value;` declarations inside braces: `selector { property: value; }`. [S1]
- **Single source of truth** — one external stylesheet referenced by many pages centralizes styling and avoids per-page duplication. [S1]
## 📖 세부 내용 (Details)
**What is CSS?**
CSS stands for **Cascading Style Sheets**. It describes how HTML elements are to be displayed on various media. [S1]
**Why use CSS?**
CSS is used to define styles for your web pages, including the design, layout, and variations in display for different devices and screen sizes. [S1]
**CSS Saves a Lot of Work**
CSS can control the layout of multiple web pages all at once. With an external stylesheet file, you can change the look of an entire website by changing just one file. [S1]
**Demo example**
The following stylesheet sets the page background color, centers and whitens the heading, and sets the paragraph font: [S1]
```css
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
```
## 🛠️ 적용 사례 (Applied in summary)
The demo stylesheet above is the page's own applied example: a complete set of rules styling `body`, `h1`, and `p`. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Basic CSS rule (language: CSS):
```css
selector {
property: value;
property: value;
}
```
Concrete example:
```css
h1 {
color: white;
text-align: center;
}
```
## ⚖️ 모순 및 업데이트 (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 Syntax]], [[CSS Selectors]], [[CSS Add External]], [[HTML CSS]]
- **참조 맥락:** The entry point referenced whenever styling the presentation of any HTML page.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Introduction — https://www.w3schools.com/css/css_intro.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Introduction" page (Astra wiki-curation, P-Reinforce v3.1 format).
10_Wiki/Topic_CSS/CSS_Link_Buttons.md
+116
View File
@@ -0,0 +1,116 @@
---
id: css-link-buttons
title: "CSS Link Buttons"
category: "Frontend"
status: "draft"
verification_status: "conceptual"
canonical_id: ""
aliases: ["link buttons", "button links", "CSS buttons", "styled links as buttons", "inline-block links"]
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", "links", "buttons"]
raw_sources: ["https://www.w3schools.com/css/css_link_buttons.asp"]
applied_in: []
github_commit: ""
---
# [[CSS Link Buttons]]
## 🎯 한 줄 통찰 (One-line insight)
By combining several CSS properties — background color, padding, text alignment, removed underline, and `display: inline-block` — ordinary HTML links can be displayed as boxes or buttons that respond to hover. [S1]
## 🧠 핵심 개념 (Core concepts)
- **Links as buttons** — this is a demonstration of combining several CSS properties to display links as boxes/buttons. [S1]
- **Box model on links** — `padding`, `display: inline-block`, and `background-color` turn an inline link into a button-like box. [S1]
- **Hover feedback** — the `:hover`/`:active` states change the background (and optionally text) color for interactivity. [S1]
## 🧩 추출된 패턴 (Extracted patterns)
- **Filled button pattern** — solid background color with white text, padding, no underline, `inline-block`; darken background on hover. [S1]
- **Outlined button pattern** — white background with a colored border that inverts (fills) on hover. [S1]
## 📖 세부 내용 (Details)
This page demonstrates combining several CSS properties to display links as boxes/buttons. [S1]
**Example 1 — filled (red) button:** [S1]
```css
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
```
**Example 2 — outlined (green) button:** [S1]
```css
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
```
In both examples, the `:link` and `:visited` states define the default button appearance, while `:hover` and `:active` change the colors to give a clickable feel. The key properties are `background-color`, `color`, `padding`, `text-align`, `text-decoration: none`, `display: inline-block`, and (for example 2) `border`. [S1]
## 🛠️ 적용 사례 (Applied in summary)
The page's two examples apply the patterns to anchor elements: a filled red button and an outlined green button that inverts on hover. No external project/commit applications found in the source.
## 💻 코드 패턴 (Code patterns)
Filled link button (language: CSS):
```css
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
```
## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
The page presents two button styles. The **filled button** (Example 1) uses a solid `background-color` with white text and darkens on hover — suited to primary call-to-action emphasis. The **outlined button** (Example 2) uses a white background with a `2px solid green` border and inverts to a filled green button on hover — a lighter-weight look for secondary actions. Both rely on the same box-model foundation (`padding`, `text-decoration: none`, `display: inline-block`); the choice is purely the default visual weight desired. [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.88
- **중복 검사 결과:** 신규 생성 (New discovery)
## 🔗 지식 그래프 (Knowledge Graph)
- **상위/루트:** [[CSS Tutorial]]
- **관련 개념:** [[CSS Styling Links]], [[CSS Buttons]], [[CSS Styling Lists]]
- **참조 맥락:** Referenced when an anchor link should look and behave like a clickable button.
## 📚 출처 (Sources)
- [S1] W3Schools — CSS Link Buttons — https://www.w3schools.com/css/css_link_buttons.asp
## 📝 변경 이력 (Change history)
- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Link Buttons" page (Astra wiki-curation, P-Reinforce v3.1 format).

Some files were not shown because too many files have changed in this diff Show More