docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,149 @@
|
||||
---
|
||||
id: w3css-tutorial-index
|
||||
title: "W3.CSS Tutorial"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["W3.CSS Tutorial", "W3.CSS MOC", "Topic_W3CSS index", "W3.CSS 목차"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.90
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "moc", "index"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3.CSS Tutorial]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Map of Content (MOC) for the W3Schools W3.CSS Tutorial — the root that links every core W3.CSS knowledge page in this topic folder. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- This folder (`Topic_W3CSS`) wikifies the W3.CSS framework tutorial, one knowledge page per document, in P-Reinforce v3.1 format — same convention as `Topic_SQL` / `Topic_Python` / `Topic_Java` / `Topic_PHP` / `Topic_HTML` / `Topic_CSS` / `Topic_JavaScript`. [S1]
|
||||
- **Scope**: tutorial + color-reference + "Web Building" crash-course pages. **Excluded**: meta pages (Exam/Examples/Demo/Templates/References/Downloads), the interactive `w3css_color_generator.asp` tool (not instructional), and the four `w3css_web_tmp_*` full demo site templates (Band/Catering/Pizza/Architect — showcase examples, not concept chapters). [S1]
|
||||
- **69 of 69 planned docs complete — W3.CSS category done.**
|
||||
- Every page roots its Knowledge Graph back to this `[[W3.CSS Tutorial]]` node.
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
|
||||
### Basics
|
||||
- [[W3CSS Intro]] ✅
|
||||
- [[W3CSS Colors]] ✅
|
||||
- [[W3CSS Containers]] ✅
|
||||
- [[W3CSS Panels]] ✅
|
||||
- [[W3CSS Borders]] ✅
|
||||
- [[W3CSS Cards]] ✅
|
||||
- [[W3CSS Defaults]] ✅
|
||||
|
||||
### Typography
|
||||
- [[W3CSS Fonts]] ✅
|
||||
- [[W3CSS Fonts Google]] ✅
|
||||
- [[W3CSS Text]] ✅
|
||||
- [[W3CSS Round]] ✅
|
||||
|
||||
### Spacing & Layout
|
||||
- [[W3CSS Padding]] ✅
|
||||
- [[W3CSS Margins]] ✅
|
||||
- [[W3CSS RTL]] ✅
|
||||
- [[W3CSS Display]] ✅
|
||||
|
||||
### Buttons & Content Blocks
|
||||
- [[W3CSS Buttons]] ✅
|
||||
- [[W3CSS Notes]] ✅
|
||||
- [[W3CSS Quotes]] ✅
|
||||
- [[W3CSS Alerts]] ✅
|
||||
|
||||
### Tables, Lists & Forms
|
||||
- [[W3CSS Tables]] ✅
|
||||
- [[W3CSS Lists]] ✅
|
||||
- [[W3CSS Images]] ✅
|
||||
- [[W3CSS Input]] ✅
|
||||
|
||||
### Badges & Icons
|
||||
- [[W3CSS Badges]] ✅
|
||||
- [[W3CSS Tags]] ✅
|
||||
- [[W3CSS Icons]] ✅
|
||||
|
||||
### Grid & Flexbox
|
||||
- [[W3CSS Grid]] ✅
|
||||
- [[W3CSS Flexbox]] ✅
|
||||
- [[W3CSS Flex Items]] ✅
|
||||
- [[W3CSS Rows]] ✅
|
||||
- [[W3CSS Cells]] ✅
|
||||
- [[W3CSS Responsive]] ✅
|
||||
|
||||
### Effects
|
||||
- [[W3CSS Dark Mode]] ✅
|
||||
- [[W3CSS Animate]] ✅
|
||||
- [[W3CSS Effects]] ✅
|
||||
|
||||
### Navigation Components
|
||||
- [[W3CSS Bars]] ✅
|
||||
- [[W3CSS Dropdowns]] ✅
|
||||
- [[W3CSS Accordions]] ✅
|
||||
- [[W3CSS Navigation]] ✅
|
||||
- [[W3CSS Sidebar]] ✅
|
||||
|
||||
### UI Components
|
||||
- [[W3CSS Tabulators]] ✅
|
||||
- [[W3CSS Pagination]] ✅
|
||||
- [[W3CSS Progress Bar]] ✅
|
||||
- [[W3CSS Slideshow]] ✅
|
||||
- [[W3CSS Modal]] ✅
|
||||
- [[W3CSS Tooltips]] ✅
|
||||
|
||||
### Code & Miscellaneous
|
||||
- [[W3CSS Code]] ✅
|
||||
- [[W3CSS Filters]] ✅
|
||||
- [[W3CSS Trends]] ✅
|
||||
- [[W3CSS Case]] ✅
|
||||
- [[W3CSS Material]] ✅
|
||||
- [[W3CSS Validation]] ✅
|
||||
- [[W3CSS Versions]] ✅
|
||||
- [[W3CSS Mobile]] ✅
|
||||
|
||||
### Color Reference
|
||||
- [[W3CSS Color Classes]] ✅
|
||||
- [[W3CSS Color Material]] ✅
|
||||
- [[W3CSS Color Flat]] ✅
|
||||
- [[W3CSS Color Metro]] ✅
|
||||
- [[W3CSS Color Win8]] ✅
|
||||
- [[W3CSS Color iOS]] ✅
|
||||
- [[W3CSS Color Fashion]] ✅
|
||||
- [[W3CSS Color Libraries]] ✅
|
||||
- [[W3CSS Color Schemes]] ✅
|
||||
- [[W3CSS Color Themes]] ✅
|
||||
|
||||
### Web Building
|
||||
- [[W3CSS Web]] ✅
|
||||
- [[W3CSS Web HTML]] ✅
|
||||
- [[W3CSS Web CSS]] ✅
|
||||
- [[W3CSS Web JavaScript]] ✅
|
||||
- [[W3CSS Web Layout]] ✅
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
69 knowledge documents generated in this batch run, spanning Basics through Web Building.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[10_Wiki]]
|
||||
- **관련 개념:** [[W3CSS Intro]], [[CSS Tutorial]], [[HTML Tutorial]], [[PHP Tutorial]]
|
||||
- **참조 맥락:** SQL/Python/Java/PHP에 이어 W3Schools 지식화 시리즈의 다음 카테고리 — CSS 프레임워크 계열의 첫 항목.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Tutorial — https://www.w3schools.com/w3css/
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Created W3.CSS Tutorial MOC with scope decisions and full planned page list (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: w3css-accordions
|
||||
title: "W3CSS Accordions"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["accordion vs dropdown", "w3-hide", "w3-show", "W3.CSS 아코디언"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "accordion"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_accordions.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Accordions]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The source draws an explicit structural line between accordions and dropdowns via a comparison table: accordions PUSH page content down and are typically full-width / open-multiple-sections, while dropdowns LAY OVER existing content, are typically 160px, and are usually one-at-a-time — meaning the choice between them is a layout decision (push vs overlay), not merely a stylistic one. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-hide`** — hides accordion content by default; JavaScript toggles a `w3-show` class to reveal it (identical toggle mechanism to `w3-dropdown-click`). [S1]
|
||||
- **Any element can trigger or hold content** — buttons, links, or plain elements all work as accordion triggers. [S1]
|
||||
- **`w3-block` + `w3-left-align`** — recommended combo for full-width, left-aligned accordion trigger buttons (buttons are center-aligned by default in W3.CSS). [S1]
|
||||
- **Active-state highlighting** — JS can additionally toggle a color class (e.g. `w3-red`) on the trigger button via `previousElementSibling`, visually marking which section is open. [S1]
|
||||
- **Nested composition** — accordions can be embedded inside a `w3-sidebar`, alongside a `w3-dropdown-click`, mixing all three navigation patterns in one component. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic accordion toggle: `<button onclick="myFunction('Demo1')" class="w3-button w3-block w3-left-align">Open Section 1</button><div id="Demo1" class="w3-container w3-hide">...</div>` with the same `w3-show` toggle function pattern as dropdowns. [S1]
|
||||
- Active-button highlighting: `x.className += " w3-show"; x.previousElementSibling.className += " w3-red";` — colors the trigger button red only while its section is open. [S1]
|
||||
- Overriding default width: `<div class="w3-light-grey" style="width:50%"><button onclick="myFunction('Demo1')" class="w3-button w3-block">50%</button>...</div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **아코디언 vs 드롭다운 사용 목적 차이**: 아코디언은 콘텐츠를 밀어내며 다중 섹션을 여는 데, 드롭다운은 콘텐츠 위에 덮이며 단일 섹션을 여는 데 주로 쓰인다는 명시적 구분표가 제공됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 사이드바 안에 아코디언과 드롭다운을 함께 중첩시키는 복합 네비게이션 패턴이 실전 UI 구성의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Highlighting the active accordion trigger button while its section is open (JavaScript):
|
||||
```javascript
|
||||
var x = document.getElementById(id);
|
||||
if (x.className.indexOf("w3-show") == -1) {
|
||||
x.className += " w3-show";
|
||||
x.previousElementSibling.className += " w3-red";
|
||||
} else {
|
||||
x.className = x.className.replace("w3-show", "");
|
||||
x.previousElementSibling.className =
|
||||
x.previousElementSibling.className.replace("w3-red", "");
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Dropdowns]], [[W3CSS Navigation]], [[W3CSS Sidebar]]
|
||||
- **참조 맥락:** 콘텐츠 표시/숨김 토글 패턴의 두 번째 형태(드롭다운과 대비) — 네비게이션 바(Navigation) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Accordions — https://www.w3schools.com/w3css/w3css_accordions.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Accordions" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: w3css-alerts
|
||||
title: "W3CSS Alerts"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["alert boxes", "× close button", "W3.CSS 알림"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "alerts"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_alerts.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Alerts]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The source explicitly prefers the `×` HTML entity over the literal letter "X" for close buttons — a small but deliberate detail, since `×` renders as a proper multiplication-style cross symbol rather than relying on the letter X looking "close enough," making the close affordance visually distinct from actual text content. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **No dedicated alert class** — alerts are `w3-panel` + a STRONG (saturated) color, contrasted against Notes' PALE colors. [S1]
|
||||
- **Semantic color convention** — red (danger), yellow (warning), green (success), blue (information) — though any color can technically be used. [S1]
|
||||
- **Dismissible via inline `onclick`** — `this.parentElement.style.display='none'` on a `w3-button w3-display-topright` span containing `×`. [S1]
|
||||
- **`×` preferred over literal "X"** — explicitly recommended as the standard close-icon character. [S1]
|
||||
- **Composable with rounding and cards** — `w3-round`/`w3-round-large`/`w3-round-xxlarge` or `w3-card-4` can be layered onto an alert panel. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Strong-color alert (Danger): `<div class="w3-panel w3-red"><h3>Danger!</h3><p>Red often indicates a dangerous or negative situation.</p></div>`. [S1]
|
||||
- Dismiss button: `<span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">×</span>`. [S1]
|
||||
- Rounded alert: `<div class="w3-panel w3-green w3-round">`. [S1]
|
||||
- Card-style alert: `<div class="w3-panel w3-yellow w3-card-4">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **닫기 아이콘 권장사항**: 닫기 버튼에는 문자 "X"보다 × HTML 엔티티가 선호된다는 점이 팁으로 명시됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — onclick 인라인 이벤트만으로 별도 JS 파일 없이 알림을 닫는 것이 경량 UI 인터랙션의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Dismissible alert using the × entity (HTML):
|
||||
```html
|
||||
<div class="w3-panel w3-red w3-display-container">
|
||||
<span onclick="this.parentElement.style.display='none'"
|
||||
class="w3-button w3-display-topright">×</span>
|
||||
<h3>Danger!</h3>
|
||||
<p>Red often indicates a dangerous or negative situation.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Quotes]], [[W3CSS Panels]], [[W3CSS Tables]]
|
||||
- **참조 맥락:** Buttons & Content Blocks 섹션의 마지막 — 테이블(Tables) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Alerts — https://www.w3schools.com/w3css/w3css_alerts.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Alerts" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-animate
|
||||
title: "W3CSS Animate"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-animate-top", "w3-spin", "W3.CSS 애니메이션"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "animation"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_animate.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Animate]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Every directional slide-in animation (`w3-animate-top/bottom/left/right`) shares the exact same distance parameter (-300px to 0) regardless of direction — a single consistent "travel distance" convention across four otherwise-independent classes, which means combining them on sibling elements (as in the "Fade All" example with 4 images) produces a synchronized, evenly-timed multi-directional entrance effect for free. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-animate-top` / `-bottom` / `-left` / `-right`** — slide an element in from that direction, travel distance always -300px to 0. [S1]
|
||||
- **`w3-animate-opacity`** — fades an element's opacity from 0 to 1 over 0.8 seconds (fade-in only, one-shot). [S1]
|
||||
- **`w3-animate-zoom`** — scales an element from 0% to 100% size. [S1]
|
||||
- **`w3-animate-fading`** — continuously fades in AND out on a repeating ~10-second cycle (the only class here that loops infinitely; all others are one-shot). [S1]
|
||||
- **`w3-spin`** — spins an element a full 360 degrees. [S1]
|
||||
- All animation classes are pure CSS (no JavaScript needed) — applied simply by adding the class name. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Slide in from top: `<div class="w3-container"><h1 class="w3-center w3-animate-top">Animation is Fun!</h1></div>`. [S1]
|
||||
- Fade in: `<div class="w3-animate-opacity">..</div>`. [S1]
|
||||
- Continuous fade in/out loop: `<div class="w3-animate-fading">..</div>` — distinct from `w3-animate-opacity`, which only fades in once. [S1]
|
||||
- Combining four different directional animations on four images simultaneously: `<img class="w3-animate-top" src="img_01.jpg"><img class="w3-animate-zoom" src="img_02.jpg"><img class="w3-animate-left" src="img_03.jpg"><img class="w3-animate-bottom" src="img_04.jpg">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **w3-animate-opacity vs w3-animate-fading의 차이**: 전자는 0→1로 한 번만 페이드인하고 끝나지만, 후자는 0→1→0을 약 10초 주기로 무한 반복한다는 점이 구분되어야 함. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 서로 다른 방향의 슬라이드 애니메이션을 여러 이미지에 동시 적용해 입체적인 등장 효과를 만드는 조합이 실전 활용의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Combining different directional animations on multiple elements (HTML/CSS, no JS needed):
|
||||
```html
|
||||
<img class="w3-animate-top" src="img_01.jpg">
|
||||
<img class="w3-animate-zoom" src="img_02.jpg">
|
||||
<img class="w3-animate-left" src="img_03.jpg">
|
||||
<img class="w3-animate-bottom" src="img_04.jpg">
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Dark Mode]], [[W3CSS Effects]]
|
||||
- **참조 맥락:** 슬라이드/페이드/줌 애니메이션 — 투명도·그레이스케일 등 정적 효과(Effects) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Animations — https://www.w3schools.com/w3css/w3css_animate.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Animations" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-badges
|
||||
title: "W3CSS Badges"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-badge", "UTF-8 badges", "W3.CSS 배지"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "badges"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_badges.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Badges]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS provides exactly ONE badge class (`w3-badge`, circular black by default) and achieves every visual variation — colored, sized, positioned inside buttons/lists/tables — purely through combination with OTHER existing classes (`w3-color`, `w3-size`, `w3-right`, `w3-margin-*`), rather than offering dozens of badge-specific variants. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-badge`** — the ONLY badge class; circular, black by default. [S1]
|
||||
- **Color via composition** — `w3-badge w3-green`, `w3-badge w3-red`, etc. [S1]
|
||||
- **Size inheritance** — a badge inherits its container's font size by default; `w3-size` classes override it. [S1]
|
||||
- **Right-aligned list badges** — `w3-right` (float) + `w3-margin-right` positions a badge at the end of a list item. [S1]
|
||||
- **UTF-8 Dingbat alternative** — single-digit circled numerals (❶❷❸...➉) via Unicode escapes as a badge-free alternative for simple counters. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic badge: `<p>Updates <span class="w3-badge">9</span></p>`. [S1]
|
||||
- Colored: `<p>News <span class="w3-badge w3-green">6</span></p>`. [S1]
|
||||
- In a button: `<button class="w3-btn w3-black">Button <span class="w3-badge w3-margin-left w3-white">1</span></button>`. [S1]
|
||||
- Right-aligned in a list: `<li>Jill <span class="w3-badge w3-right w3-margin-right">1</span></li>`. [S1]
|
||||
- UTF-8 dingbat numerals: `❶ ❷ ❸` (❶ ❷ ❸) inside a `w3-xxlarge` div. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 리스트 항목 끝에 우측 정렬된 배지를 붙이는 것이 카운터/알림 표시의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Right-aligned badge in a list item (HTML):
|
||||
```html
|
||||
<ul class="w3-ul w3-border">
|
||||
<li>Jill <span class="w3-badge w3-right w3-margin-right">1</span></li>
|
||||
<li>Eve <span class="w3-badge w3-right w3-margin-right">2</span></li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Input]], [[W3CSS Tags]], [[W3CSS Lists]]
|
||||
- **참조 맥락:** 하나의 클래스를 다른 클래스와 조합하는 설계 원칙 — 태그(Tags) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Badges — https://www.w3schools.com/w3css/w3css_badges.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Badges" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
id: w3css-bars
|
||||
title: "W3CSS Bars"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-bar", "w3-bar-block", "w3-bar-item", "W3.CSS 바"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "bars", "navigation"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_bars.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Bars]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-bar` (horizontal) and `w3-bar-block` (vertical) are the exact same conceptual container differing only in ONE class name — meaning every color, hover, button, and responsive technique demonstrated for a horizontal bar transfers identically to a vertical sidebar, so this single chapter is really the foundation for both the later Navigation Bars AND Sidebar chapters. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-bar`** — horizontal container for bar items. **`w3-bar-block`** — vertical container, same item classes apply. [S1]
|
||||
- **`w3-bar-item`** — provides correct spacing/padding/positioning for each item inside a bar; works on any element (`div`, `a`, etc.). [S1]
|
||||
- **Color + hover-color composability** — any `w3-color` class sets the bar's base color, and any `w3-hover-color` class can be added per-item for a distinct hover color. [S1]
|
||||
- **`w3-button`** — turns bar items (especially `<a>` links) into clickable button-styled elements. [S1]
|
||||
- **`w3-mobile`** — makes bar items responsive (stack/adjust on small screens). [S1]
|
||||
- **`w3-right`** — right-aligns a specific bar item within the bar. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Horizontal bar: `<div class="w3-bar w3-green"><div class="w3-bar-item">London</div><div class="w3-bar-item">Paris</div><div class="w3-bar-item">Tokyo</div></div>`. [S1]
|
||||
- Vertical bar (same items, one class swapped): `<div class="w3-bar-block w3-green">...</div>`. [S1]
|
||||
- Bar as navigation with buttons: `<div class="w3-bar w3-black"><a href="#" class="w3-bar-item w3-button">London</a>...</div>`. [S1]
|
||||
- Right-aligned last item: `<a href="#" class="w3-bar-item w3-button w3-right">Tokyo</a>` as the final child. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — w3-bar 하나의 클래스 교체(w3-bar-block)만으로 수평/수직 네비게이션을 모두 만드는 패턴이 다음 챕터들(Navigation, Sidebar)의 기반이 된다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
The same items in horizontal vs vertical bar — only the container class changes (HTML):
|
||||
```html
|
||||
<!-- Horizontal -->
|
||||
<div class="w3-bar w3-black">
|
||||
<a href="#" class="w3-bar-item w3-button">Home</a>
|
||||
<a href="#" class="w3-bar-item w3-button">Link 1</a>
|
||||
</div>
|
||||
|
||||
<!-- Vertical: same items, w3-bar-block instead of w3-bar -->
|
||||
<div class="w3-bar-block w3-black">
|
||||
<a href="#" class="w3-bar-item w3-button">Home</a>
|
||||
<a href="#" class="w3-bar-item w3-button">Link 1</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Effects]], [[W3CSS Dropdowns]], [[W3CSS Navigation]], [[W3CSS Sidebar]]
|
||||
- **참조 맥락:** Navigation Components 섹션 첫 항목이자 기초 — 드롭다운(Dropdowns) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Bars — https://www.w3schools.com/w3css/w3css_bars.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Bars" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-borders
|
||||
title: "W3CSS Borders"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-border", "w3-leftbar", "W3.CSS 테두리"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "borders"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_borders.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Borders]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A border can be made "invisible" yet still functional as a hover trigger — setting `border:16px solid white` on an element paired with `w3-hover-border-green` creates a thick border that's visually undetectable against a white background until hovered, at which point it visibly appears in green, a trick that relies on the border occupying space without being seen. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-border` / `w3-border-{top,right,bottom,left}`** — adds borders to specific sides; `w3-border-0` removes all borders. [S1]
|
||||
- **`w3-border-COLOR`** — sets border color (e.g. `w3-border-red`). [S1]
|
||||
- **`w3-round-{small,large,xlarge,xxlarge}`** — rounds border corners at different intensities; plain `w3-round` is the default rounding. [S1]
|
||||
- **`w3-topbar` / `w3-bottombar` / `w3-leftbar` / `w3-rightbar`** — add THICK single-side borders (heavier than normal `w3-border-*`). [S1]
|
||||
- **`w3-hover-border-COLOR`** — changes border color specifically on mouse hover. [S1]
|
||||
- **Invisible-until-hover border trick** — a white/matching-background border becomes visible only on hover via `w3-hover-border-*`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Directional borders: `<div class="w3-panel w3-border-left"><p>I have only a left border.</p></div>`. [S1]
|
||||
- Colored border: `<div class="w3-panel w3-border w3-border-red"><p>I have red borders.</p></div>`. [S1]
|
||||
- Thick bar border: `<div class="w3-panel w3-leftbar w3-border-blue w3-pale-blue"><p>I have a thick blue left border and a pale-blue background color.</p></div>`. [S1]
|
||||
- Invisible-until-hover: `<div style="border:16px solid white" class="w3-panel w3-hover-border-green"><p>Thick (invisible) border that turns green on hover.</p></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 배경과 같은 색의 두꺼운 테두리를 호버 시에만 드러내는 트릭이 UI 인터랙션 디자인의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Invisible border that reveals itself on hover (HTML):
|
||||
```html
|
||||
<div style="border:16px solid white" class="w3-panel w3-hover-border-green">
|
||||
<p>Thick (invisible) border that turns green on hover.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Panels]], [[W3CSS Cards]], [[W3CSS Round]]
|
||||
- **참조 맥락:** 패널의 시각적 강조 도구 — 카드(Cards) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Borders — https://www.w3schools.com/w3css/w3css_borders.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Borders" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: w3css-buttons
|
||||
title: "W3CSS Buttons"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-button", "w3-btn", "W3.CSS 버튼"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.9
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "buttons"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_buttons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Buttons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS's philosophy is that ANY element can be a button, not just `<button>` — the tutorial explicitly shows `<input type="button">` and `<a>` tags gaining identical button behavior from the same `w3-button`/`w3-btn` classes, and even states "Any div, header, footer or other containers can be a w3-button" with a live image demonstrating a picture styled as a clickable button. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-btn`** — rectangular button with a SHADOW hover effect; default color black. [S1]
|
||||
- **`w3-button`** — rectangular button with a GRAY hover effect; default color inherits from parent (v4+). [S1]
|
||||
- **`w3-bar`** — horizontal container for grouping buttons (navigation menus). [S1]
|
||||
- **`w3-bar-item`** — removes the gap between grouped buttons inside a `w3-bar`. [S1]
|
||||
- **`w3-block`** — full-width (100%) button. [S1]
|
||||
- **`w3-circle`** — circular button. [S1]
|
||||
- **`w3-ripple`** — click-triggered ripple animation effect. [S1]
|
||||
- **`w3-disabled`** — CSS-only disabled appearance (opaque, "no parking sign" cursor) for elements that don't support the native `disabled` attribute (like `<a>`). [S1]
|
||||
- **`w3-show-inline-block`** — lets multiple `w3-bar` groups sit on the same line. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Any element as a button: `<input class="w3-button w3-black" type="button" value="Input Button"> <button class="w3-button w3-black">Button Button</button> <a href="..." class="w3-button w3-black">Link Button</a>`. [S1]
|
||||
- Grouped, gapless bar buttons: `<div class="w3-bar"><button class="w3-bar-item w3-button w3-black">Button</button>...</div>`. [S1]
|
||||
- Full-width with custom width via inline style: `<button class="w3-button w3-block w3-black" style="width:30%">Button</button>`. [S1]
|
||||
- Disabled link (since `<a>` has no native `disabled` attribute): `<a class="w3-button w3-disabled" href="...">Link Button</a>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **모든 요소가 버튼이 될 수 있음**: div, header, footer, 심지어 이미지까지도 w3-button/w3-btn 클래스로 버튼처럼 동작할 수 있다는 점이 명시적으로 시연됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — w3-bar-item으로 간격 없이 버튼을 묶어 내비게이션 바를 만드는 것이 실전 UI 구성의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Gapless button bar acting as a navigation menu (HTML):
|
||||
```html
|
||||
<div class="w3-bar w3-black">
|
||||
<button class="w3-bar-item w3-button">Button</button>
|
||||
<button class="w3-bar-item w3-button">Button</button>
|
||||
<button class="w3-bar-item w3-button">Button</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Display]], [[W3CSS Notes]], [[W3CSS Bars]]
|
||||
- **참조 맥락:** 버튼 클래스 체계 — 노트(Notes) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Buttons — https://www.w3schools.com/w3css/w3css_buttons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Buttons" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-cards
|
||||
title: "W3CSS Cards"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-card", "W3.CSS 카드"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "cards"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_cards.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Cards]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-hover-shadow` can turn ANY plain element into something that behaves like a card purely on mouse-over — the source notes it uses "the same style as w3-card-4," meaning you can defer the card-like shadow effect to a hover interaction instead of applying it permanently, without needing a separate shadow value. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-card`** — alias for `w3-card-2` (2px bordered shadow). [S1]
|
||||
- **`w3-card-2` / `w3-card-4`** — containers with 2px/4px shadow depth respectively. [S1]
|
||||
- **Composable with headers/footers** — a card can contain its own `<header>`/`<footer>` with `w3-container`, creating distinct sections inside one card. [S1]
|
||||
- **`w3-hover-shadow`** — adds the card-4 shadow effect only on hover, making any plain element look card-like on mouse-over. [S1]
|
||||
- **Photo cards** — an `<img>` combined with a `w3-container` caption div inside a `w3-card-4` wrapper. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic card: `<div class="w3-card"><p>w3-card</p></div>`. [S1]
|
||||
- Sectioned card with header/footer: `<div class="w3-card-4"><header class="w3-container w3-blue"><h1>Header</h1></header><div class="w3-container"><p>Lorem ipsum...</p></div><footer class="w3-container w3-blue"><h5>Footer</h5></footer></div>`. [S1]
|
||||
- Photo card: `<div class="w3-card-4"><img src="img_snowtops.jpg" alt="Alps"><div class="w3-container w3-center"><p>The Italian / Austrian Alps</p></div></div>`. [S1]
|
||||
- Hover-only shadow: `<div class="w3-green w3-hover-shadow w3-center"><p>Hover over me!</p></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 친구 요청 카드, 날씨 위젯 카드 등 header+container+footer 조합으로 구성된 복합 카드가 실전 UI 패턴의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Card-like shadow only on hover (HTML):
|
||||
```html
|
||||
<div class="w3-green w3-hover-shadow w3-center">
|
||||
<p>Hover over me!</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Borders]], [[W3CSS Defaults]], [[W3CSS Images]]
|
||||
- **참조 맥락:** Basics 섹션의 마지막 — 기본 설정(Defaults) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Cards — https://www.w3schools.com/w3css/w3css_cards.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Cards" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-case
|
||||
title: "W3CSS Case Study"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["case study", "building a website from scratch", "W3.CSS 사례 연구"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "case-study", "responsive-design"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_case.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Case Study]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The source explicitly states "it does not matter for W3.CSS if you use `<div>` or `<header>`" — meaning every layout/color/size class taught throughout the tutorial works identically regardless of whether the developer chooses generic `<div>`s or HTML5 semantic elements (`<header>`, `<footer>`), so semantic markup is purely a developer preference with zero framework-level consequence. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Incremental build order** — the case study deliberately layers concepts in sequence: plain HTML → wrap in `w3-container` → add color classes → add size classes → optionally swap to semantic elements → build a multicolumn grid → add navigation. [S1]
|
||||
- **`w3-row-padding` + fraction classes** — the standard recipe for a responsive multicolumn layout: wrap columns in `w3-row-padding`, then use `w3-third`/`w3-quarter`/`w3-half` etc. inside. [S1]
|
||||
- **Asymmetric column widths** — combining `w3-quarter` + `w3-half` + `w3-quarter` in one row produces a wider center column flanked by two narrower side columns, all still summing to a full row. [S1]
|
||||
- **Framework-agnostic semantics** — `<div class="w3-container">` and `<header class="w3-container">` behave identically; W3.CSS classes attach to any element type. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Minimal starting page: `<!DOCTYPE html><html lang="en"><title>W3.CSS Case</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"><body><h1>My first W3.CSS website!</h1>...</body></html>`. [S1]
|
||||
- Semantic equivalent of the same containers: `<header class="w3-container w3-light-grey"><h1 class="w3-jumbo">...</h1></header>...<footer class="w3-container"><p>This is my footer</p></footer>`. [S1]
|
||||
- Three-column asymmetric layout: `<div class="w3-row-padding"><div class="w3-quarter">...</div><div class="w3-half">...</div><div class="w3-quarter">...</div></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **div와 시맨틱 요소의 완전한 동등성**: "W3.CSS 입장에서는 div를 쓰든 header를 쓰든 상관없다"는 문장으로 시맨틱 마크업 선택이 순수히 개발자 취향임이 명시적으로 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이 챕터 자체가 지금까지 배운 모든 개념(컨테이너/색상/사이즈/그리드/네비게이션)을 실제 웹사이트 하나로 조립하는 종합 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Asymmetric three-column responsive layout — wider center column (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-row-padding">
|
||||
<div class="w3-quarter"><p>Left column</p></div>
|
||||
<div class="w3-half"><p>Wider center column</p></div>
|
||||
<div class="w3-quarter"><p>Right column</p></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Containers]], [[W3CSS Rows]], [[W3CSS Trends]], [[W3CSS Material]]
|
||||
- **참조 맥락:** 처음부터 웹사이트를 만드는 종합 실습 챕터 — 머티리얼 디자인(Material) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Case Study — https://www.w3schools.com/w3css/w3css_case.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Case Study" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-cells
|
||||
title: "W3CSS Cells"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-cell", "w3-cell-row", "W3.CSS 셀"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "cells"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_cells.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Cells]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-cell` elements self-adjust to BOTH width AND height automatically — side-by-side cells with different amounts of text content each stretch to accommodate their content's natural width, and simultaneously all cells in the same row stretch to match the TALLEST cell's height, without any explicit sizing rules from the developer. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-cell`** — turns a normally block-level element (like `<div>`) into a horizontally-flowing, table-cell-like element. [S1]
|
||||
- **`w3-cell-row`** — the container whose width defines the total width shared among its `w3-cell` children (default 100%). [S1]
|
||||
- **Self-adjusting width** — cells automatically size to their content's natural width when placed side-by-side. [S1]
|
||||
- **Self-adjusting height** — cells in the same row automatically stretch to match the tallest sibling. [S1]
|
||||
- **`w3-mobile` + `w3-cell`** — cells display vertically stacked on small screens, horizontally on medium/large screens. [S1]
|
||||
- **`w3-cell-top` (default) / `w3-cell-middle` / `w3-cell-bottom`** — vertical content alignment within a cell. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic horizontal cells: `<div class="w3-container w3-red w3-cell"><p>Hello W3.CSS Cell.</p></div><div class="w3-container w3-green w3-cell"><p>Hello W3.CSS Cell.</p></div>`. [S1]
|
||||
- Wrapped in a sizeable row: `<div class="w3-cell-row" style="width:75%">...</div>` — reduces total width of contained cells. [S1]
|
||||
- Mobile-responsive cells: `<div class="w3-container w3-red w3-cell w3-mobile">...</div>` — stacks vertically below the mobile breakpoint. [S1]
|
||||
- Mixed vertical alignment in one row: `<div class="w3-cell">...</div><div class="w3-cell w3-cell-middle">...</div><div class="w3-cell w3-cell-bottom">...</div>` — three different vertical alignments side by side. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **셀의 이중 자동 조정**: 너비뿐 아니라 높이까지 형제 셀 중 가장 큰 값에 자동으로 맞춰진다는 점이 별도 예제로 증명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 모바일에서는 세로로 쌓이고 데스크톱에서는 가로로 배치되는 셀 레이아웃이 반응형 콘텐츠 블록의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Mobile-responsive cells: vertical on small screens, horizontal on larger ones (HTML):
|
||||
```html
|
||||
<div class="w3-container w3-red w3-cell w3-mobile"><p>Hello W3.CSS Cell.</p></div>
|
||||
<div class="w3-container w3-green w3-cell w3-mobile"><p>Hello W3.CSS Cell.</p></div>
|
||||
<div class="w3-container w3-blue w3-cell w3-mobile"><p>Hello W3.CSS Cell.</p></div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Rows]], [[W3CSS Responsive]]
|
||||
- **참조 맥락:** 자동 조정 셀 레이아웃 — 반응형 유동 그리드(Responsive) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Cells — https://www.w3schools.com/w3css/w3css_cells.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Cells" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: w3css-code
|
||||
title: "W3CSS Code"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-code", "w3-codespan", "syntax highlighting", "W3.CSS 코드 표시"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "code-display"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_code.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Code]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Real syntax highlighting (`jsHigh`/`htmlHigh`/`cssHigh` classes) is explicitly NOT part of W3.CSS itself — it only activates if the developer separately downloads and includes W3Schools' own `w3codecolor.js` JavaScript library, meaning `w3-code`/`w3-codespan` alone only provide monospace STYLING, while color-coded syntax requires an entirely separate opt-in dependency. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-code`** — displays a block of code in a readable monospaced font (pure CSS, no highlighting). [S1]
|
||||
- **`w3-codespan`** — highlights inline code (e.g. within a sentence) using the `<code>` element. [S1]
|
||||
- **`jsHigh` / `htmlHigh` / `cssHigh`** — color-highlighting classes that only function if `w3codecolor.js` is separately loaded; otherwise they have no visual effect. [S1]
|
||||
- **Separation of styling vs. behavior** — this chapter reinforces a pattern seen elsewhere in W3.CSS: base classes are pure CSS, but advanced behavior (real syntax coloring) requires an external JS library, not baked into the CSS framework. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Monospaced code block: `<div class="w3-code">fruits[0] = "Banana";</div>`. [S1]
|
||||
- Inline code highlight: `The <code class="w3-codespan">html</code> element defines an HTML page.`. [S1]
|
||||
- Requires external library for color: `<div class="w3-code jsHigh">.. JavaScript code here</div>` — only colors correctly once `w3codecolor.js` (downloadable from `w3schools.com/lib/w3codecolor.js`) is included on the page. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **w3-code만으로는 색상 강조 불가**: jsHigh/htmlHigh/cssHigh 클래스는 w3codecolor.js 라이브러리를 별도로 로드하지 않으면 아무 효과가 없다는 점이 명시적으로 경고됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이 문서 자체의 코드 패턴 섹션이 w3-code 클래스의 실전 활용 예시다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Monospaced code display without syntax coloring (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-code">
|
||||
fruits[0] = "Banana";
|
||||
fruits[1] = "Apple";
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Tooltips]], [[W3CSS Filters]]
|
||||
- **참조 맥락:** Code & Miscellaneous 섹션 첫 항목 — 필터(Filters) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Code — https://www.w3schools.com/w3css/w3css_code.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Code" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-color-classes
|
||||
title: "W3CSS Color Classes"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["color schemes overview", "W3.CSS 색상 클래스 개요"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_classes.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Color Classes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS doesn't ship ONE color system — it bundles at least FOUR entirely separate, independently-prefixed color vocabularies (default Material-inspired `w3-*`, Flat UI `w3-flat-*`, Windows Metro `w3-metro-*`, Windows 8 `w3-win8-*`), meaning a project can mix design-language aesthetics simply by picking a different prefix family, without installing anything extra — this chapter is the map to the more detailed reference chapters that follow. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Default color classes (`w3-red`, etc.)** — inspired by Material Design; reflect marketing/road-sign/sticky-note color families. [S1]
|
||||
- **Flat UI (`w3-flat-*`)** — a separate popular flat-design color palette (e.g. `w3-flat-turquoise`). [S1]
|
||||
- **Windows Metro (`w3-metro-*`)** — based on Microsoft Design Language (MDL); emphasizes typography, simplified icons, modern colors. [S1]
|
||||
- **Windows 8 (`w3-win8-*`)** — the first major flat-design OS palette. [S1]
|
||||
- **All four families are class-name-compatible** — every family works on ANY HTML element the same way default colors do, just with a different prefix. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Default color: `<div class="w3-red"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- Flat UI color: `<div class="w3-flat-turquoise"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- Metro color: `<div class="w3-metro-light-green"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- Windows 8 color: `<div class="w3-win8-lime"><p>London is the most populous city...</p></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 네 가지 색상 체계 중 프로젝트의 디자인 컨셉(플랫/메트로/윈도우)에 맞는 것을 선택해 일관되게 적용하는 것이 실전 활용의 핵심이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Four independent color-family prefixes usable on the same element type (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-red">Default (Material-inspired)</div>
|
||||
<div class="w3-flat-turquoise">Flat UI</div>
|
||||
<div class="w3-metro-light-green">Windows Metro</div>
|
||||
<div class="w3-win8-lime">Windows 8</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Mobile]], [[W3CSS Color Material]], [[W3CSS Color Flat]], [[W3CSS Color Metro]], [[W3CSS Color Win8]]
|
||||
- **참조 맥락:** Color Reference 섹션 개관 챕터 — 기본(Material) 색상 상세 레퍼런스(Color Material) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Color Classes — https://www.w3schools.com/w3css/w3css_color_classes.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Color Classes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: w3css-color-fashion
|
||||
title: "W3CSS Fashion Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["colors of the year", "w3-2025-*", "Pantone", "W3.CSS 패션 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.80
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "fashion", "pantone"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_fashion.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Fashion Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Fashion colors are the only palette family here that's YEAR-VERSIONED rather than static — each year (2017 through 2025) ships as its own separate CSS library with its own class prefix (`w3-2024-*`, `w3-2025-*`), meaning a developer must pick a specific year's file to load rather than getting one evergreen fashion palette, and older years' libraries remain independently downloadable rather than being replaced. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Year-prefixed classes** — `w3-<year>-<color-name>` (e.g. `w3-2025-brandied-melon`, `w3-2024-peach-fuzz`, `w3-2021-marigold`). [S1]
|
||||
- **Source: Pantone Colors of the Year** — each year's palette is explicitly derived from published fashion "Color of the Year" and seasonal palette designations (Pantone-style), some cited with hex codes and Pantone codes (e.g. 2021 Illuminating = `#F5DF4D` / PANTONE 13-0647). [S1]
|
||||
- **Seasonal sub-palettes** — within a year, further splits like Spring/Summer, Autumn/Winter, and "Classic"/"Seasonless" shade groups. [S1]
|
||||
- **Independent per-year CSS files** — each year requires its own `<link>` (e.g. `w3-colors-2025.css`), not a single unified fashion stylesheet. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Loading a specific year's fashion palette: `<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2025.css">` then `<div class="w3-2025-brandied-melon">Brandied Melon</div>`. [S1]
|
||||
- A color cited with its authoritative source codes: "2021 - Illuminating, Hex #F5DF4D, PANTONE 13-0647". [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **연도별 독립 라이브러리 구조**: 최신 연도가 이전 연도를 대체하는 것이 아니라, 각 연도가 별도 CSS 파일로 독립적으로 유지되며 원하는 연도를 선택해 로드해야 한다는 점이 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 특정 연도의 Pantone 컬러 오브 더 이어를 그대로 웹 UI에 반영하고 싶을 때 해당 연도 라이브러리를 로드하는 것이 실전 활용의 핵심이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Loading and using a specific year's fashion color palette (HTML/CSS):
|
||||
```html
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-2025.css">
|
||||
<div class="w3-2025-brandied-melon">Brandied Melon</div>
|
||||
<div class="w3-2025-winterberry">Winterberry</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color iOS]], [[W3CSS Color Libraries]], [[W3CSS Color Schemes]]
|
||||
- **참조 맥락:** 시즌별 트렌드 색상 레퍼런스 — 범용 컬러 라이브러리(Color Libraries) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Fashion Colors — https://www.w3schools.com/w3css/w3css_color_fashion.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Fashion Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: w3css-color-flat
|
||||
title: "W3CSS Flat UI Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["flat ui colors", "w3-flat-*", "W3.CSS 플랫 UI 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.82
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "flat-ui"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_flat.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Flat UI Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Unlike the default palette's generic color names (`w3-red`, `w3-blue`), Flat UI classes use evocative, non-literal names (`w3-flat-wet-asphalt`, `w3-flat-pomegranate`, `w3-flat-midnight-blue`) — meaning choosing a Flat UI color is closer to picking a paint-swatch name than specifying an exact hue, trading precision for a curated, designer-picked aesthetic. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-flat-*` class family** — a separate, downloadable color library (`Download the CSS`) layered on top of the default W3.CSS palette. [S1]
|
||||
- **~20 named colors** spanning cool-to-warm groups: turquoise/green-sea/emerald/nephritis (greens-teals), peter-river/belize-hole (blues), amethyst/wisteria (purples), wet-asphalt/midnight-blue (dark neutrals), sun-flower/orange/carrot/pumpkin (yellows-oranges), alizarin/pomegranate (reds), clouds/silver/concrete/asbestos (greys). [S1]
|
||||
- **Same usage pattern as any W3.CSS color** — just `class="w3-flat-<name>"`, no special markup. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Applying a Flat UI color: `<div class="w3-flat-emerald"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- Full CSS downloadable separately via a linked "Download the CSS" button rather than bundled in the base `w3.css`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — wet-asphalt/midnight-blue 같은 어두운 중립색과 alizarin/pomegranate 같은 채도 높은 색을 조합해 플랫 디자인 특유의 톤을 내는 것이 실전 배색의 핵심이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Applying a Flat UI palette color (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-flat-emerald">
|
||||
<p>London is the most populous city in the United Kingdom.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Material]], [[W3CSS Color Metro]], [[W3CSS Trends]]
|
||||
- **참조 맥락:** 플랫 UI 색상 레퍼런스 — 윈도우 메트로 색상(Color Metro) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Flat UI Colors — https://www.w3schools.com/w3css/w3css_color_flat.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Flat UI Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-color-libraries
|
||||
title: "W3CSS Color Libraries"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["highway colors", "safety colors", "camouflage colors", "food colors", "W3.CSS 컬러 라이브러리"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "reference"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_libraries.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Color Libraries]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Several of these color libraries are traceable to formal REGULATORY standards, not arbitrary design choices — US highway and camouflage colors both cite Federal Standard 595, US safety colors cite the same standard, and European signal colors cite the RAL Color Standard — meaning these particular palettes exist specifically so a project can reproduce colors that carry real-world regulatory/safety meaning (e.g. an actual "STOP sign red"), a use case none of the design-trend palettes (Flat/Metro/Win8/iOS/Fashion) address. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **US Highway Colors (`w3-highway-*`)** — defined in Federal Standard 595 (brown, red, orange, schoolbus yellow, green, blue). [S1]
|
||||
- **US Safety Colors (`w3-safety-*`)** — also Federal Standard 595 (red, orange, yellow, green, blue, purple) — for danger/warning signaling. [S1]
|
||||
- **European Signal Colors (`w3-signal-*`)** — defined in the RAL Color Standard (yellow, orange, red, violet, blue, green, grey, brown, white, black). [S1]
|
||||
- **Vivid Colors (`w3-vivid-*`)** — defined in ISCC-NBS, includes compound hue names like `w3-vivid-yellowish-pink`, `w3-vivid-bluish-green`. [S1]
|
||||
- **Food Colors (`w3-food-*`)** — named directly after foods (apple, banana, avocado, saffron, wine, etc.) rather than a formal standard. [S1]
|
||||
- **Camouflage Colors (`w3-camo-*`)** — also from Federal Standard 595 (earth, sand, forest, field tones). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Loading and using a standards-based library: `<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css"><div class="w3-highway-red">STOP</div>`. [S1]
|
||||
- Regulatory-meaning color use case: `<div class="w3-safety-red">DANGER</div>` — reproduces an officially defined hazard-warning red, not an arbitrary design red. [S1]
|
||||
- Signal color composition for real traffic-light semantics: `<div class="w3-signal-red">Stop</div><div class="w3-signal-yellow">Wait</div><div class="w3-signal-green">Go</div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **규제 표준 기반 색상의 목적**: 하이웨이/안전/위장 색상이 Federal Standard 595, 유럽 신호 색상이 RAL Color Standard를 근거로 한다는 점에서, 이 라이브러리들은 미적 선택이 아니라 실제 규정을 재현하기 위한 목적임이 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 실제 도로 표지판이나 안전 경고 색을 웹에서 정확히 재현해야 하는 시뮬레이션·교육용 프로젝트가 이 라이브러리의 실전 활용 대상이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Reproducing regulatory-standard traffic-light colors (HTML/CSS):
|
||||
```html
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-signal.css">
|
||||
<div class="w3-signal-red">Stop</div>
|
||||
<div class="w3-signal-yellow">Wait</div>
|
||||
<div class="w3-signal-green">Go</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Fashion]], [[W3CSS Color Schemes]]
|
||||
- **참조 맥락:** 규제/표준 기반 컬러 라이브러리 — 색상 배색 이론(Color Schemes) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Color Libraries — https://www.w3schools.com/w3css/w3css_color_libraries.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Color Libraries" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: w3css-color-material
|
||||
title: "W3CSS Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["default color palette", "w3-text-color", "w3-hover-color", "W3.CSS 기본 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "reference"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_material.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Every default color name in W3.CSS actually generates THREE separate classes (`w3-<color>` for background, `w3-text-<color>` for text, `w3-hover-<color>` for hover) — and the text-color reference is further split into three contrast-tested variants ("On Black" / "On Gray" / "On White"), revealing that the base palette was deliberately pre-validated for legibility against different backgrounds rather than left to the developer to guess contrast. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Background colors (`w3-<color>`)** — ~29 default named colors (red, pink, purple, deep-purple, indigo, cobalt, blue, light-blue, cyan, aqua, teal, green, light-green, lime, sand, khaki, yellow, amber, orange, deep-orange, blue-gray, brown, light-gray, gray, dark-gray, asphalt, black, plus pale variants). [S1]
|
||||
- **Text colors (`w3-text-<color>`)** — the same color vocabulary applied to text instead of background, with dedicated reference variants tested "On Black," "On Gray," and "On White" backgrounds. [S1]
|
||||
- **Hover colors (`w3-hover-<color>`)** — the same vocabulary again, applied only on `:hover`. [S1]
|
||||
- **Universal applicability** — all three class families work on ANY HTML element, not just specific components. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Applying a background color: `<div class="w3-teal">...</div>`. [S1]
|
||||
- Applying a legible text color against a specific background context: `<p class="w3-text-amber">...</p>` chosen from the "On Black" reference set when the container is dark. [S1]
|
||||
- Applying a hover-only color: `<a class="w3-hover-orange">Link</a>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — On Black/On Gray/On White로 구분된 텍스트 색상 참조표가 배경색에 따라 가독성 있는 텍스트 색을 고르는 실전 참고 자료로 활용된다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
The three color-class families sharing one color vocabulary (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-teal">Background color</div>
|
||||
<p class="w3-text-teal">Text color</p>
|
||||
<a class="w3-hover-teal" href="#">Hover color</a>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Classes]], [[W3CSS Color Flat]], [[W3CSS Color Schemes]]
|
||||
- **참조 맥락:** 기본 색상 상세 레퍼런스 — Flat UI 색상(Color Flat) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Colors — https://www.w3schools.com/w3css/w3css_color_material.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: w3css-color-metro
|
||||
title: "W3CSS Metro UI Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["metro colors", "w3-metro-*", "W3.CSS 메트로 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.81
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "metro-ui"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_metro.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Metro UI Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Unlike Flat UI's evocative paint-swatch names, Metro colors use a systematic LIGHT/BASE/DARK naming convention for each hue family (`w3-metro-light-green` / `w3-metro-green` / `w3-metro-dark-green`, similarly for purple, blue, orange, red) — making the Metro palette more predictable to navigate than Flat UI's arbitrary names, at the cost of being less descriptive/evocative. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-metro-*` class family** — based on Microsoft Design Language (MDL), emphasizing typography, simplified icons, and modern colors. [S1]
|
||||
- **Light/base/dark tiers per hue** — green (light-green/green/dark-green), purple (light-purple/purple/dark-purple), blue (light-blue/blue/dark-blue), orange (orange/dark-orange), red (red/dark-red). [S1]
|
||||
- **Additional standalone colors** — magenta, teal, yellow, and a special `w3-metro-darken` utility. [S1]
|
||||
- **Separate downloadable CSS library**, same as Flat UI. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Applying a Metro color: `<div class="w3-metro-light-green"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- Tiered naming across the same hue: `w3-metro-light-purple` → `w3-metro-purple` → `w3-metro-dark-purple` represent increasing intensity/darkness of the same base color. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — light/base/dark 3단계 톤을 활용해 하나의 색상군 내에서 강조 위계를 표현하는 것이 실전 UI 계층 구조 설계에 활용 가능하다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Systematic light/base/dark tiers within one Metro color family (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-metro-light-green">Light</div>
|
||||
<div class="w3-metro-green">Base</div>
|
||||
<div class="w3-metro-dark-green">Dark</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.81
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Flat]], [[W3CSS Color Win8]]
|
||||
- **참조 맥락:** 메트로 색상 레퍼런스 — 윈도우 8 색상(Color Win8) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Metro UI Colors — https://www.w3schools.com/w3css/w3css_color_metro.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Metro UI Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: w3css-color-schemes
|
||||
title: "W3CSS Color Schemes"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["achromatic", "monochromatic", "flat design color scheme", "W3.CSS 색상 배색"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.82
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "color-theory"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_schemes.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Color Schemes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
"White on black" isn't just a stylistic dark-mode preference — the source gives it a concrete technical justification: it "requires less energy (improves battery life) on most display technologies," meaning the choice between the two achromatic schemes has a measurable hardware-power consequence, not just an aesthetic one. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Achromatic schemes** — black-on-white (the default web page scheme) versus white-on-black (often preferred on small/mobile devices, saves battery). [S1]
|
||||
- **Monochromatic schemes** — a single base color varied only by adding black/grey/white; described as having a subtler, more peaceful energy, especially with blue or green. [S1]
|
||||
- **Flat design color schemes** — deliberately use MORE distinct colors than traditional schemes; W3.CSS's own scheme choices are explicitly inspired by Google Material Design. [S1]
|
||||
- **Three named scheme types previewed** — Monochromatic, Analogous, Complementary (with deeper coverage pointed to the separate general "Colors Tutorial"). [S1]
|
||||
- **W3.CSS Color Generator** — a tool (mentioned, not a teaching page) that can generate monochromatic scheme swatches automatically. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- White-on-black's power-saving rationale is stated directly: it "requires less energy (improves battery life) on most display technologies" — relevant for OLED-style mobile displays where black pixels draw less power. [S1]
|
||||
- Flat design scheme example combining multiple distinct Material-inspired colors on sibling elements: Red/Green/Orange/Blue-Gray blocks each with "London is the most populous city..." text. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **화이트 온 블랙의 실질적 근거**: 단순 취향이 아니라 대부분의 디스플레이 기술에서 배터리 수명을 개선한다는 구체적 기술적 이유가 명시됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 모바일 다크모드 UI에서 화이트 온 블랙 배색을 선택하는 근거로 배터리 절약 효과가 실전 활용 이유가 된다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Flat design color scheme applying multiple distinct Material-inspired colors to sibling blocks (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-red"><p>London is the most populous city...</p></div>
|
||||
<div class="w3-green"><p>London is the most populous city...</p></div>
|
||||
<div class="w3-orange"><p>London is the most populous city...</p></div>
|
||||
<div class="w3-blue-gray"><p>London is the most populous city...</p></div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Libraries]], [[W3CSS Trends]], [[W3CSS Color Themes]]
|
||||
- **참조 맥락:** 색상 배색 이론 챕터 — 실전 컬러 테마 시스템(Color Themes) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Color Schemes — https://www.w3schools.com/w3css/w3css_color_schemes.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Color Schemes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: w3css-color-themes
|
||||
title: "W3CSS Color Themes"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-theme-*", "predefined themes", "theme gradient", "W3.CSS 컬러 테마"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "theming"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_themes.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Color Themes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A W3.CSS "theme" requires ZERO class-name changes in the HTML — retheming an entire app is just swapping which theme STYLESHEET is linked (e.g. `w3-theme-indigo.css` → `w3-theme-blue.css`), because theme CSS files redefine the SAME `w3-theme-*` class names to different color values, meaning the markup stays identical across every theme and only the linked file changes. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Theme-swap mechanism** — link the base `w3.css` plus one theme file (e.g. `w3-theme-indigo.css`); switching themes means changing only the second `<link>`, not any HTML. [S1]
|
||||
- **~22 predefined downloadable themes** — red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, khaki, yellow, amber, orange, deep-orange, blue-grey, brown, grey, dark-grey, black, plus a special `w3-theme-w3schools`. [S1]
|
||||
- **`w3-theme-gradient`** — a community-contributed addition (explicitly credited to "one reader['s] suggestion") layering a linear-gradient using the theme's l1/l2 shade variables, requiring the same four vendor-prefix declarations covered in the Validation chapter. [S1]
|
||||
- **Theme reuse in Mobile app UI** — the same Movies-2014 app mockup from the Mobile chapter reappears here restyled purely via a different theme link, demonstrating the theme-swap claim concretely. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Applying a theme requires only linking two stylesheets: `<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"><link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">`. [S1]
|
||||
- Vendor-prefixed gradient built from theme shade variables: `.w3-theme-gradient { color: #000 !important; background:-webkit-linear-gradient(top,#64B5F6 25%,#42A5F5 75%)}` (repeated for `-moz-`, `-o-`, `-ms-`, and unprefixed). [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **HTML 변경 없이 전체 리테마 가능**: 테마를 바꾸려면 링크된 CSS 파일 하나만 교체하면 되고 HTML의 클래스명은 전혀 손댈 필요가 없다는 점이 명시적으로 확인됨(동일 클래스명을 테마 파일마다 다르게 정의하는 방식). [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — Mobile 챕터의 동일한 앱 목업이 테마 파일만 교체해 다른 색상으로 렌더링되는 것이 테마 시스템의 실전 활용을 직접 보여주는 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Switching an entire app's color theme by changing only the linked stylesheet (HTML/CSS):
|
||||
```html
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-indigo.css">
|
||||
<!-- Swap the second link to w3-theme-blue.css to retheme without touching any HTML -->
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Schemes]], [[W3CSS Mobile]], [[W3CSS Versions]], [[W3CSS Validation]]
|
||||
- **참조 맥락:** Color Reference 섹션 마지막 — Web Building 크래시코스 섹션으로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Color Themes — https://www.w3schools.com/w3css/w3css_color_themes.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Color Themes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: w3css-color-win8
|
||||
title: "W3CSS Windows Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["windows 8 colors", "w3-win8-*", "W3.CSS 윈도우 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.80
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "windows-8"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_win8.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Windows Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The Windows 8 palette has roughly TWICE as many distinct hue names as Metro (~20 named colors including mauve, taupe, sienna, steel, olive versus Metro's ~10), suggesting Windows 8's palette was designed as a broader general-purpose system while Metro's tighter set was tuned more narrowly around its light/dark tiering convention — the two are historically related (Windows 8 popularized flat design; Metro is its underlying design language) but ship as separate, non-overlapping class libraries in W3.CSS. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-win8-*` class family** — colors from Windows 8, "the first major operating system focused on flat design and modern colors." [S1]
|
||||
- **Broad hue coverage** — lime, green, emerald, teal, cyan, blue, indigo, cobalt, violet, pink, magenta, crimson, red, orange, amber, yellow, brown, olive, steel, mauve, taupe, sienna — a wider spread than the Metro palette. [S1]
|
||||
- **Same usage/download pattern** as Flat UI and Metro — link the separate CSS library, then apply the class. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Applying a Windows 8 color: `<div class="w3-win8-lime"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- Distinct muted/earthy tones not present in Metro or Flat UI: `w3-win8-mauve`, `w3-win8-taupe`, `w3-win8-sienna`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — mauve/taupe/sienna 같은 차분한 톤이 메트로·플랫 UI에는 없는 색상군이라는 점에서 특정 무드의 UI를 만들 때 참조 대상이 된다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Applying a Windows 8 palette color (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-win8-lime">
|
||||
<p>London is the most populous city in the United Kingdom.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Metro]], [[W3CSS Color iOS]]
|
||||
- **참조 맥락:** 윈도우 8 색상 레퍼런스 — iOS 색상(Color iOS) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Windows Colors — https://www.w3schools.com/w3css/w3css_color_win8.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Windows Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: w3css-color-ios
|
||||
title: "W3CSS iOS Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["ios colors", "w3-ios-*", "W3.CSS iOS 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.80
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors", "ios"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_color_ios.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS iOS Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The iOS palette is the smallest and most restrained of all four platform-specific color families in this series (~10 named colors vs. Windows 8's ~20), and it uniquely includes a dedicated `w3-ios-background` class with no equivalent in Metro, Windows 8, or Flat UI — reflecting iOS's characteristically minimal, muted design language even at the level of available color choices. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-ios-*` class family** — colors modeled on Apple's iOS visual style. [S1]
|
||||
- **Blue-tiered spectrum** — `w3-ios-dark-blue`, `w3-ios-deep-blue`, `w3-ios-blue`, `w3-ios-light-blue` form a four-step gradient within blue alone, more granular than any single hue tier in Metro or Windows 8. [S1]
|
||||
- **`w3-ios-background`** — a dedicated neutral background color unique to this palette, without a direct counterpart elsewhere in the platform-color series. [S1]
|
||||
- **Grey variants** — `w3-ios-grey` and `w3-ios-light-grey` for muted neutral surfaces. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Applying an iOS color: `<div class="w3-ios-dark-blue"><p>London is the most populous city...</p></div>`. [S1]
|
||||
- The four-step blue gradient available uniquely in this family: `w3-ios-dark-blue → w3-ios-deep-blue → w3-ios-blue → w3-ios-light-blue`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — w3-ios-background로 iOS 특유의 은은한 배경을 재현하는 것이 실전 iOS 스타일 UI 모사에 활용 가능하다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A four-step blue gradient unique to the iOS color family (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-ios-dark-blue">Dark Blue</div>
|
||||
<div class="w3-ios-deep-blue">Deep Blue</div>
|
||||
<div class="w3-ios-blue">Blue</div>
|
||||
<div class="w3-ios-light-blue">Light Blue</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.80
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Win8]], [[W3CSS Color Fashion]]
|
||||
- **참조 맥락:** 플랫폼별 색상 레퍼런스 마지막 — 패션 색상(Color Fashion) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS iOS Colors — https://www.w3schools.com/w3css/w3css_color_ios.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS iOS Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-colors
|
||||
title: "W3CSS Colors"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-color classes", "W3.CSS 색상"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "colors"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_colors.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Colors]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS applies its color system through THREE distinct class families that can combine on one element — `w3-color` (background), `w3-text-color` (text), and `w3-hover-color`/`w3-hover-text-color` (hover state) — meaning a single `<div>` can have a different background, text, and hover behavior each independently controlled by its own class. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-COLORNAME`** — sets background color (e.g. `w3-red`, `w3-teal`). [S1]
|
||||
- **`w3-text-COLORNAME`** — sets text color. [S1]
|
||||
- **`w3-hover-COLORNAME`** / **`w3-hover-text-COLORNAME`** — sets background/text color specifically on hover. [S1]
|
||||
- **Gray/grey interchangeable** — both spellings work in all W3.CSS classes. [S1]
|
||||
- **Color libraries beyond the default palette** — Windows Colors, Fashion Colors, Highway Colors, each requiring a separate library link (detailed in later chapters). [S1]
|
||||
- **Version 5 additions** — Paper, Cobalt, Emerald, Olive, Taupe, Sienna, Crimson, Asphalt, plus semantic names Danger, Warning, Note, Info, Success. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Background color: `<div class="w3-red"><h2>London</h2><p>...</p></div>`. [S1]
|
||||
- Text color: `<div class="w3-text-red"><h2>London</h2><p>...</p></div>`. [S1]
|
||||
- Background hover color: `<div class="w3-container w3-orange w3-hover-red"><h2>London</h2></div>`. [S1]
|
||||
- Text hover color: `<div class="w3-container w3-orange w3-hover-text-white"><h2>London</h2></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 배경색/텍스트색/호버색을 독립적으로 조합하는 것이 W3.CSS 색상 시스템의 핵심 활용 패턴이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Independent background, text, and hover color classes on one element (HTML):
|
||||
```html
|
||||
<div class="w3-container w3-orange w3-hover-red w3-text-white">
|
||||
<h2>London</h2>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Intro]], [[W3CSS Containers]], [[W3CSS Color Classes]], [[W3CSS Color Themes]]
|
||||
- **참조 맥락:** 색상 시스템의 개요 — 컨테이너(Containers) 챕터로 이어지며, 세부 색상 참조는 Color Reference 섹션에서 심화.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Colors — https://www.w3schools.com/w3css/w3css_colors.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Colors" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: w3css-containers
|
||||
title: "W3CSS Containers"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-container", "W3.CSS 컨테이너"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.9
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "containers"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_containers.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Containers]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-container` is explicitly called "the most important" W3.CSS class precisely because it works IDENTICALLY across semantic and non-semantic elements — the source proves there's "no difference in the way W3.CSS treats `<div>` and `<header>` elements," meaning developers can freely choose semantic HTML tags without losing any W3.CSS styling behavior. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-container`** — adds 16px LEFT and RIGHT padding only (no top/bottom padding by default). [S1]
|
||||
- **Element-agnostic** — works identically on `<div>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<nav>`, `<blockquote>`, `<form>`. [S1]
|
||||
- **Equality across containers** — provides common margins, paddings, alignments, fonts, and colors regardless of which tag is used. [S1]
|
||||
- **No vertical padding needed normally** — paragraph/heading margins already simulate the visual spacing that top/bottom padding would otherwise provide. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic container: `<div class="w3-container"><p>The w3-container class is an important w3.CSS class.</p></div>`. [S1]
|
||||
- Semantic header equivalence: `<header class="w3-container w3-teal"><h1>Header</h1></header>` behaves identically to `<div class="w3-container w3-teal"><h1>Header</h1></div>`. [S1]
|
||||
- No default vertical padding: `<div class="w3-container w3-blue">I have no top or bottom padding.</div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **시맨틱 태그와 div의 완전한 동등성**: W3.CSS가 header/footer/article/section 등 시맨틱 태그와 div를 완전히 동일하게 취급한다는 점이 명시적으로 증명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — header/article/footer로 구성된 전체 웹페이지 예제가 시맨틱 요소 활용의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Semantic elements styled identically to divs via w3-container (HTML):
|
||||
```html
|
||||
<header class="w3-container w3-teal"><h1>Header</h1></header>
|
||||
<article class="w3-container"><p>Content...</p></article>
|
||||
<footer class="w3-container w3-teal"><h5>Footer</h5></footer>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Colors]], [[W3CSS Panels]], [[W3CSS Cards]]
|
||||
- **참조 맥락:** 가장 핵심적인 W3.CSS 클래스 — 패널(Panels) 챕터로 이어짐(마진 추가 버전).
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Containers — https://www.w3schools.com/w3css/w3css_containers.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Containers" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: w3css-dark-mode
|
||||
title: "W3CSS Dark Mode"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["dark mode toggle", "classList.toggle", "W3.CSS 다크모드"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.86
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "dark-mode", "javascript"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_darkmode.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Dark Mode]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS has no dedicated "dark mode system" at all — the entire feature is just one line of vanilla JavaScript (`document.body.classList.toggle("w3-black")`) reusing the SAME `w3-black` color utility class that exists for ordinary styling, showing that a UI framework doesn't need special-purpose infrastructure to support a feature if its utility classes are composable enough. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **No dedicated dark-mode API** — dark mode is achieved by toggling an ordinary color class, not a purpose-built framework feature. [S1]
|
||||
- **`classList.toggle("w3-black")`** — native JavaScript DOM API that adds the class if absent, removes it if present — the toggle behavior needs zero custom logic. [S1]
|
||||
- **`document.body`** — the toggle target is typically the whole page body, switching the entire page's background. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full dark-mode toggle implementation: `<script>function myFunction() { let x = document.body; x.classList.toggle("w3-black"); }</script>` — attached to a button's `onclick`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 색상 유틸리티 클래스를 토글하는 것만으로 다크모드를 구현하는 최소주의 패턴이 실전에서 그대로 재사용 가능한 기법이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Toggling dark mode by reusing an ordinary color utility class (JavaScript):
|
||||
```html
|
||||
<button onclick="myFunction()">Turn on/off Dark Mode</button>
|
||||
<script>
|
||||
function myFunction() {
|
||||
let x = document.body;
|
||||
x.classList.toggle("w3-black");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.86
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Colors]], [[W3CSS Animate]]
|
||||
- **참조 맥락:** Effects 섹션 첫 항목 — 애니메이션(Animate) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Dark Mode — https://www.w3schools.com/w3css/w3css_darkmode.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Dark Mode" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: w3css-defaults
|
||||
title: "W3CSS Defaults"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-size classes", "W3.CSS 기본값"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "defaults", "typography"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_defaults.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Defaults]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS explicitly discourages using headings for their font-SIZE and provides a completely separate `w3-size` class family instead — the source frames this directly: "Headings should be used for what they are: Headings," meaning `<h3>` should signal semantic importance, not just "medium-large text," and `w3-medium`/`w3-large`/etc. exist specifically to decouple visual size from semantic heading level. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Accessibility-oriented base defaults** — 15px font-size, Verdana font (good letter spacing), 1.5 line-height — explicitly designed to be readable even for people with mild reading disabilities. [S1]
|
||||
- **Default heading sizes** — h1 36px, h2 30px, h3 24px, h4 20px, h5 18px, h6 16px. [S1]
|
||||
- **`w3-size` classes** — `w3-tiny`, `w3-small`, `w3-medium` (default), `w3-large`, `w3-xlarge`, `w3-xxlarge`, `w3-xxxlarge`, `w3-jumbo` — size independent of heading semantics. [S1]
|
||||
- **Three override strategies** — (1) override in `<head>` with custom CSS, (2) link your own CSS file AFTER the W3.CSS file, (3) download and directly edit the W3.CSS source file. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Default heading CSS override: `h1{font-size:64px;} h2{font-size:48px;} ...` placed in `<head>`. [S1]
|
||||
- Loading a custom CSS file after W3.CSS: `<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"> <link rel="stylesheet" href="myStyle.css">`. [S1]
|
||||
- Changing the default font globally: `html, body, h1, h2, h3, h4, h5, h6 { font-family: cursive, sans-serif; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **크기 클래스와 헤딩 태그의 의도적 분리**: 제목 태그는 의미(heading semantics)를 위해, w3-size 클래스는 시각적 크기를 위해 사용하도록 명확히 구분됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — CSS 파일을 W3.CSS 뒤에 로드해 기본값을 재정의하는 것이 커스터마이징의 표준 패턴이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Font size decoupled from heading semantics via w3-size classes (HTML):
|
||||
```html
|
||||
<h3 class="w3-tiny">Small text, still a heading</h3>
|
||||
<p class="w3-jumbo">Huge text, not a heading at all</p>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Cards]], [[W3CSS Fonts]], [[W3CSS Text]]
|
||||
- **참조 맥락:** Basics 섹션 마무리 — 폰트(Fonts) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Defaults — https://www.w3schools.com/w3css/w3css_defaults.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Defaults" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-display
|
||||
title: "W3CSS Display"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-display-container", "positioning classes", "W3.CSS 디스플레이 위치"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "display", "positioning"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_display.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Display]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The nine `w3-display-*` position classes only work as children of a `w3-display-container` — text placed inside an `<img>`'s wrapping container using `w3-display-topleft`/`w3-display-bottomright`/etc. can even simulate a flag graphic purely from four colored positioned blocks, showing the position system is really absolute positioning against one specific parent, not a general-purpose overlay tool. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-display-container`** — the required parent wrapper for all `w3-display-*` position classes. [S1]
|
||||
- **9 position classes** — `topleft`, `topright`, `bottomleft`, `bottomright`, `left`, `right`, `middle`, `topmiddle`, `bottommiddle`. [S1]
|
||||
- **`w3-display-hover`** — content stays hidden until the container is hovered, then appears — combinable with effect/animation classes for interactive overlays. [S1]
|
||||
- **`w3-left` / `w3-right`** — CSS float shortcuts (not the same as `w3-display-left`/`right`, which are absolute-position within a display-container). [S1]
|
||||
- **`w3-show` / `w3-hide`** — force `display:block`/`display:none`, often used to toggle visibility via JS. [S1]
|
||||
- **`w3-mobile`** — makes an element `display:block; width:100%` specifically on screens under 600px wide. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Text over an image using all 9 positions: `<div class="w3-display-container"><img src="img_lights.jpg" style="width:100%"><div class="w3-padding w3-display-topleft">Top Left</div>...</div>`. [S1]
|
||||
- Hover-reveal overlay: `<div class="w3-display-container w3-hover-opacity"><img src="img_avatar.png"><div class="w3-display-middle w3-display-hover"><button class="w3-button w3-black">John Doe</button></div></div>`. [S1]
|
||||
- Flag simulation via 4 positioned colored blocks: `<div class="w3-display-container w3-card-4" style="height:200px;width:350px"><div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div><div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>...</div>`. [S1]
|
||||
- Floating (distinct mechanism from display-position): `<div class="w3-bar w3-light-grey"><div class="w3-left w3-red">w3-left</div><div class="w3-right w3-blue">w3-right</div></div>` — note: `w3-container` auto-clears floats. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **position 클래스는 반드시 컨테이너 필요**: w3-display-* 클래스는 w3-display-container 부모 없이는 동작하지 않는다는 점이 구조적 전제로 강조됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이미지 위에 9방향 텍스트 라벨을 배치하거나, 4개의 색 블록으로 국기를 시뮬레이션하는 것이 절대 위치 지정의 창의적 활용 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Simulating a flag with four positioned colored blocks (HTML):
|
||||
```html
|
||||
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
|
||||
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
|
||||
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
|
||||
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
|
||||
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS RTL]], [[W3CSS Buttons]], [[W3CSS Effects]]
|
||||
- **참조 맥락:** Spacing & Layout 섹션의 마지막 — 버튼(Buttons) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Display — https://www.w3schools.com/w3css/w3css_display.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Display" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: w3css-dropdowns
|
||||
title: "W3CSS Dropdowns"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-dropdown-hover", "w3-dropdown-click", "W3.CSS 드롭다운"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "dropdown", "navigation"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_dropdowns.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Dropdowns]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-dropdown-hover` and `w3-dropdown-content` place NO constraint on element type — the source explicitly demonstrates the exact same dropdown behavior using `<button>`+`<div>`, then `<p>`+`<span>`, proving the pattern is a pure CSS relationship (hover state on parent reveals a positioned child), not tied to any specific semantic markup. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-dropdown-hover`** — marks an element as a hoverable dropdown trigger; any element type works. [S1]
|
||||
- **`w3-dropdown-content`** — the content revealed on hover/click; hidden by default, shown via CSS `:hover` or JS-toggled class. [S1]
|
||||
- **`w3-dropdown-click`** — clickable variant; requires JavaScript to explicitly toggle a `w3-show` class since there's no `:hover` state to rely on. [S1]
|
||||
- **`w3-show`** — the class JS toggles on/off to reveal/hide click-based dropdown content. [S1]
|
||||
- **Animation composability** — any `w3-animate-*` class can be added directly to `w3-dropdown-content` for a fade/zoom/slide reveal. [S1]
|
||||
- **Right-aligned positioning** — combining `w3-right` (float) with inline `right:0` CSS makes the dropdown content open right-to-left instead of left-to-right. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Hover dropdown with any element types: `<p class="w3-dropdown-hover">Hover over me!<span class="w3-dropdown-content w3-green">Hello World!</span></p>`. [S1]
|
||||
- Click dropdown with JS toggle: `<div class="w3-dropdown-click"><button onclick="myFunction()" class="w3-button w3-black">Click Me!</button><div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">...</div></div>` with `function myFunction() { var x = document.getElementById("Demo"); if (x.className.indexOf("w3-show") == -1) { x.className += " w3-show"; } else { x.className = x.className.replace(" w3-show", ""); } }`. [S1]
|
||||
- Animated dropdown content: `<div id="Demo" class="w3-dropdown-content w3-bar-block w3-animate-zoom">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **hover vs click 방식의 근본적 차이**: w3-dropdown-hover는 순수 CSS :hover로 동작하지만 w3-dropdown-click은 JavaScript로 w3-show 클래스를 수동 토글해야 한다는 구조적 차이가 있음. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 네비게이션 바 안에 드롭다운 메뉴를 넣는 조합이 다음 챕터(Navigation Bars)에서 본격적으로 다뤄지는 실전 활용의 시작점이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Clickable dropdown toggled via JavaScript's w3-show class (HTML/JS):
|
||||
```html
|
||||
<div class="w3-dropdown-click">
|
||||
<button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
|
||||
<div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
|
||||
<a href="#" class="w3-bar-item w3-button">Link 1</a>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function myFunction() {
|
||||
var x = document.getElementById("Demo");
|
||||
if (x.className.indexOf("w3-show") == -1) {
|
||||
x.className += " w3-show";
|
||||
} else {
|
||||
x.className = x.className.replace(" w3-show", "");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Bars]], [[W3CSS Accordions]], [[W3CSS Navigation]]
|
||||
- **참조 맥락:** hover/click 기반 콘텐츠 공개 패턴 — 아코디언(Accordions) 챕터와 직접 대비됨.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Dropdowns — https://www.w3schools.com/w3css/w3css_dropdowns.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Dropdowns" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: w3css-effects
|
||||
title: "W3CSS Effects"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-opacity", "w3-grayscale", "w3-sepia", "hover effects", "W3.CSS 이펙트"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.86
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "effects", "hover"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_effects.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Effects]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Effect classes and color classes are designed to STACK, not replace each other — combining `w3-hover-opacity` with any `w3-hover-<color>` class (e.g. `w3-hover-red`) produces a lighter/softer version of that hover color, meaning the effects system was built as a compositional layer on top of the existing color system rather than a standalone feature. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Opacity tiers** — `w3-opacity-min` (0.75), `w3-opacity` (0.6), `w3-opacity-max` (0.25) — three fixed transparency levels, no arbitrary values. [S1]
|
||||
- **Grayscale tiers** — `w3-grayscale-min` (50%), `w3-grayscale` (75%), `w3-grayscale-max` (100%) — **not supported in IE 11 and earlier**. [S1]
|
||||
- **Sepia tiers** — `w3-sepia-min` (50%), `w3-sepia` (75%), `w3-sepia-max` (100%) — also **not supported in IE 11 and earlier**. [S1]
|
||||
- **Hover variants** — `w3-hover-opacity`, `w3-hover-grayscale`, `w3-hover-sepia` — apply the effect only on mouse-over, not by default. [S1]
|
||||
- **Stacking hover-opacity with hover-color** — combining `w3-hover-opacity` with a `w3-hover-<color>` class softens/lightens that hover color. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Three opacity tiers on images: `<img src="image.jpg" class="w3-opacity-min"><img src="image.jpg" class="w3-opacity"><img src="image.jpg" class="w3-opacity-max">`. [S1]
|
||||
- Hover-only effects: `<img src="image.jpg" class="w3-hover-opacity"><img src="image.jpg" class="w3-hover-grayscale"><img src="image.jpg" class="w3-hover-sepia">`. [S1]
|
||||
- Combined hover color + opacity: `<div class="w3-border w3-hover-opacity w3-hover-red"><p>w3-hover-red with w3-hover-opacity</p></div>` — produces a lighter red on hover than `w3-hover-red` alone. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **IE 11 호환성 경고**: w3-grayscale 계열과 w3-sepia 계열 클래스 모두 IE 11 이하 버전에서 지원되지 않는다고 원문에 명시됨 — 구형 브라우저 지원이 필요한 프로젝트에서는 주의 필요. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — hover-opacity와 hover-color를 조합해 부드러운 호버 색상을 만드는 조합 기법이 실전 UI 디테일 작업의 대표 활용 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Stacking hover-opacity with a hover-color class for a softened hover effect (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-border w3-hover-opacity w3-hover-red">
|
||||
<p>w3-hover-red with w3-hover-opacity</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.86
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Animate]], [[W3CSS Colors]], [[W3CSS Bars]]
|
||||
- **참조 맥락:** Effects 섹션 마지막 — 네비게이션 바(Bars) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Effects — https://www.w3schools.com/w3css/w3css_effects.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Effects" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-filters
|
||||
title: "W3CSS Filters"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["filter tables", "filter lists", "W3.CSS 필터"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "filter", "search"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_filters.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Filters]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Filtering, like tabs/pagination/slideshows before it, has NO dedicated W3.CSS filter class — the source explicitly frames this chapter as "with a little bit of JavaScript, ALL components in W3.CSS can be filtered," positioning filtering not as a component but as a general JS TECHNIQUE (matching input text against element content, toggling `display`) applicable to any existing structure — tables, lists, or dropdowns alike. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Universal applicability** — the same filter technique works on tables, unordered lists, and dropdown menus without any component-specific markup. [S1]
|
||||
- **Core mechanism** — a text input's `oninput`/`onkeyup` event reads its value, then loops over target rows/items, hiding (`display:none`) any whose text content doesn't match. [S1]
|
||||
- **No new CSS classes introduced** — this chapter teaches a JS PATTERN layered on top of previously covered structural classes (`w3-table`, `w3-ul`, `w3-dropdown-*`), not a new component. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Filter Tables — an input filters visible `<table>` rows by matching against row text, hiding non-matches. [S1]
|
||||
- Filter Lists — the same input-driven filtering pattern applied to `w3-ul` list items instead of table rows. [S1]
|
||||
- Filter Dropdowns — demonstrated combined with both `w3-dropdown-hover` and `w3-dropdown-click` variants from the earlier Dropdowns chapter. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 테이블/리스트/드롭다운 어디에나 동일한 필터링 로직을 이식할 수 있다는 범용성이 실전 검색 UI 구현의 핵심 활용 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
General-purpose filter pattern applicable to tables, lists, or dropdowns alike (conceptual JS pattern):
|
||||
```javascript
|
||||
function myFunction() {
|
||||
var input, filter, elements, i, txtValue;
|
||||
input = document.getElementById("myInput");
|
||||
filter = input.value.toUpperCase();
|
||||
elements = document.getElementsByTagName("li"); // or "tr" for tables
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
txtValue = elements[i].textContent || elements[i].innerText;
|
||||
elements[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Code]], [[W3CSS Tables]], [[W3CSS Lists]], [[W3CSS Dropdowns]], [[W3CSS Trends]]
|
||||
- **참조 맥락:** 기존 구조 클래스 위에 얹는 JS 패턴 챕터 — 웹디자인 트렌드(Trends) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Filters — https://www.w3schools.com/w3css/w3css_filters.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Filters" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: w3css-flex-items
|
||||
title: "W3CSS Flex Items"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["flex-grow", "flex-shrink", "order property", "W3.CSS 플렉스 아이템"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "flexbox", "flex-items"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_flex_items.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Flex Items]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The `order` property completely decouples VISUAL order from SOURCE-CODE order — an item written fourth in the HTML can be assigned `order:1` and appear FIRST on screen, meaning flexbox lets you reorder content visually without touching the underlying markup, useful for responsive layouts where mobile/desktop need different visual sequences from the same HTML. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`order`** — controls visual display order independent of HTML source order (default 0). [S1]
|
||||
- **`flex-grow`** — how much an item grows relative to siblings when extra space is available; default 0 (no growth). [S1]
|
||||
- **`flex-shrink`** — how much an item shrinks relative to siblings when space is tight; default 1 (shrinks normally); `flex-shrink:0` prevents an item from shrinking at all. [S1]
|
||||
- **`flex-basis`** — the item's initial size before grow/shrink calculations apply. [S1]
|
||||
- **`flex`** — shorthand for `flex-grow flex-shrink flex-basis` in one declaration. [S1]
|
||||
- **`align-self`** — overrides the container's `align-items` value for ONE specific item. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Reordering via `order`: `<div style="order: 3">1</div><div style="order: 2">2</div><div style="order: 4">3</div><div style="order: 1">4</div>` — displays as 4,2,1,3 despite source order 1,2,3,4. [S1]
|
||||
- Disproportionate growth: `<div style="flex-grow: 1">1</div><div style="flex-grow: 8">2</div><div style="flex-grow: 1">3</div>` — middle item grows 8x faster. [S1]
|
||||
- Preventing shrink on one item: `<div style="flex-shrink: 0">3</div>` among otherwise normally-shrinking siblings. [S1]
|
||||
- Combined shorthand: `<div style="flex: 0 0 200px">3</div>` — not growable, not shrinkable, fixed at 200px. [S1]
|
||||
- Per-item alignment override: `<div style="align-self:center">3</div>` centers just this one item regardless of the container's `align-items`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **order의 시각적/소스코드 순서 분리**: HTML 작성 순서와 무관하게 order 값만으로 화면상 표시 순서를 완전히 재배치할 수 있다는 점이 4개 아이템 예제로 직접 증명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 모바일과 데스크톱에서 콘텐츠 순서를 다르게 보여줘야 할 때 HTML 수정 없이 order 값만 조정하는 것이 실전 반응형 디자인의 대표 기법이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Reordering flex items independent of HTML source order (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-flex">
|
||||
<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>
|
||||
<!-- Displays as: 4, 2, 1, 3 -->
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Flexbox]], [[W3CSS Rows]]
|
||||
- **참조 맥락:** 개별 플렉스 아이템 제어 — 반응형 행(Rows) 시스템 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Flex Items — https://www.w3schools.com/w3css/w3css_flex_items.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Flex Items" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-flexbox
|
||||
title: "W3CSS Flexbox"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-flex", "CSS Flexbox", "perfect centering", "W3.CSS 플렉스박스"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "flexbox"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_flexbox.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Flexbox]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
"Perfect centering" — a notoriously fiddly CSS problem historically — collapses to exactly TWO properties in flexbox: `justify-content:center` (horizontal) plus `align-items:center` (vertical) on the SAME container, which the source explicitly calls out as "the solution" to a common style problem, contrasting flexbox's simplicity against older centering hacks. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-flex`** (W3.CSS 5.0+) — one-dimensional flex container (row OR column, unlike grid's row AND column). [S1]
|
||||
- **`flex-direction`** — `row` (default, left-to-right), `column`, `row-reverse`, `column-reverse`. [S1]
|
||||
- **`flex-wrap`** — `nowrap` (default), `wrap`, `wrap-reverse`. [S1]
|
||||
- **`justify-content`** — aligns items along the main axis: `center`, `flex-start`, `flex-end`, `space-around`, `space-between`, `space-evenly`. [S1]
|
||||
- **`align-items`** — aligns items along the cross axis: `center`, `flex-start`, `flex-end`, `stretch` (default), `baseline`. [S1]
|
||||
- **`align-content`** — aligns entire WRAPPED LINES (not individual items) when `flex-wrap:wrap` is active; distinct from `align-items`. [S1]
|
||||
- **Perfect centering recipe** — `justify-content:center` + `align-items:center` together on one flex container. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic flex container: `<div class="w3-flex" style="gap:8px"><div>1</div><div>2</div><div>3</div></div>`. [S1]
|
||||
- Reversed direction: `<div class="w3-flex" style="flex-direction:row-reverse">`. [S1]
|
||||
- Baseline alignment (items with different font sizes align by text baseline, not box edge): `<div class="w3-flex" style="align-items:baseline">`. [S1]
|
||||
- Perfect centering: `<div class="w3-flex" style="height:300px;justify-content:center;align-items:center">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **align-content와 align-items의 차이**: align-items는 개별 아이템을, align-content는 줄바꿈된 전체 라인을 정렬한다는 점이 구분됨(flex-wrap:wrap 상태에서만 의미가 있음). [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — justify-content+align-items를 함께 center로 설정하는 "완벽한 중앙 정렬" 레시피가 실전에서 가장 자주 쓰이는 플렉스박스 패턴이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Perfect centering with two flexbox properties (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-flex" style="height:300px;justify-content:center;align-items:center">
|
||||
<div>1</div><div>2</div><div>3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Grid]], [[W3CSS Flex Items]]
|
||||
- **참조 맥락:** 1차원 레이아웃 컨테이너 — 개별 플렉스 아이템 속성(Flex Items) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Flexbox — https://www.w3schools.com/w3css/w3css_flexbox.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Flexbox" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-fonts
|
||||
title: "W3CSS Fonts"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["web safe fonts", "W3.CSS 폰트"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "fonts", "typography"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_fonts.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Fonts]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS uses TWO different default fonts, not one — Verdana for body text (better letter spacing, readable) but Segoe UI specifically for headings (narrower spacing, fits more characters) — meaning the "default font" question has different answers depending on whether you're styling body copy or a heading. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Default fonts** — Verdana (body), Segoe UI (headings, narrower spacing). [S1]
|
||||
- **Four built-in font classes** — `w3-serif`, `w3-sans-serif`, `w3-monospace`, `w3-cursive`. [S1]
|
||||
- **Web-safe sans-serif** — Arial (safest, 99.8%/98.7% Win/Mac), Helvetica (100% Mac, only 7.3% Windows), Verdana, Geneva, Tahoma, Trebuchet MS — each with a suggested fallback. [S1]
|
||||
- **Web-safe serif** — Times New Roman (with Times fallback), Georgia. [S1]
|
||||
- **Monospace** — Courier New (safest), Lucida Console (no Mac support) with Monaco as its cross-platform fallback. [S1]
|
||||
- **No universally safe handwriting font** — `w3-cursive` is the recommended fallback since none exists natively. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Global font override: `body, h1, h2, h3, h4, h5, h6 { font-family: Arial, Helvetica, sans-serif; }`. [S1]
|
||||
- Font class usage: `<p class="w3-serif">...</p>`, `<div class="w3-monospace">...</div>`, `<div class="w3-cursive">...</div>`. [S1]
|
||||
- Cross-platform monospace fallback chain: `font-family: "Lucida Console", Monaco, monospace;` — Monaco fills in where Lucida Console (no Mac support) fails. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **본문과 제목의 기본 폰트가 다름**: Verdana(본문)와 Segoe UI(제목)가 서로 다른 목적으로 사용된다는 점이 강조됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — Lucida Console+Monaco 폴백 체인이 플랫폼 간 monospace 폰트 호환성 확보의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Cross-platform monospace font fallback (CSS):
|
||||
```css
|
||||
body, h1, h2, h3, h4, h5, h6 {
|
||||
font-family: "Lucida Console", Monaco, monospace;
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Defaults]], [[W3CSS Fonts Google]], [[W3CSS Text]]
|
||||
- **참조 맥락:** 웹 안전 폰트 시스템 — 구글 폰트(Fonts Google) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Fonts — https://www.w3schools.com/w3css/w3css_fonts.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Fonts" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-fonts-google
|
||||
title: "W3CSS Fonts Google"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["Google Fonts", "W3.CSS 구글 폰트"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "fonts", "google-fonts"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_fonts_google.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Fonts Google]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Adding a Google Font is just TWO steps regardless of which of the 1000+ fonts you pick — a `<link>` tag pointing to the font family, then a plain `font-family` CSS rule referencing that same name — meaning the "complexity" of using any exotic font (Tangerine, Lobster, Allerta Stencil) is identical to using a common one. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Two-step integration** — (1) `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=FontName">` in `<head>`, (2) `font-family: FontName, fallback;` in CSS. [S1]
|
||||
- **1000+ free fonts available** from Google Fonts. [S1]
|
||||
- **Custom font class pattern** — define `.w3-fontname { font-family: FontName, genericFallback; }`, then apply via `<p class="w3-fontname">`. [S1]
|
||||
- **Google Fonts effects** — appending `&effect=shadow-multiple` to the link URL applies a visual text effect alongside the font itself. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic Roboto integration: `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto"> body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}`. [S1]
|
||||
- Custom font class: `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia"> .w3-sofia { font-family: Sofia, cursive; } <p class="w3-sofia">Making the Web!</p>`. [S1]
|
||||
- Font with visual effect: `<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — Sofia/Tangerine/Lobster 같은 커스텀 폰트를 각각의 CSS 클래스로 감싸 재사용하는 것이 실전 활용의 대표 패턴이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Custom Google Font class (HTML/CSS):
|
||||
```html
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
|
||||
<style>
|
||||
.w3-sofia { font-family: Sofia, cursive; }
|
||||
</style>
|
||||
<p class="w3-sofia">Making the Web!</p>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Fonts]], [[W3CSS Text]]
|
||||
- **참조 맥락:** 외부 폰트 라이브러리 연동 — 텍스트 스타일링(Text) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Google Fonts — https://www.w3schools.com/w3css/w3css_fonts_google.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Google Fonts" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-grid
|
||||
title: "W3CSS Grid"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-grid", "CSS Grid", "W3.CSS 그리드"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "grid", "css-grid"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_grid.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Grid]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-grid` is a thin wrapper (essentially just `display: grid`) that hands full control to STANDARD CSS Grid properties applied via inline `style` — `grid-template-columns`, `grid-column-start`, `gap`, etc. — meaning learning W3.CSS grid is really learning native CSS Grid, not a proprietary abstraction layer. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-grid`** (W3.CSS 5.0+) — creates a two-dimensional grid container; children automatically become grid items. [S1]
|
||||
- **`w3-grid-padding`** — the padded variant. [S1]
|
||||
- **`grid-template-columns`** — sets column count/widths; accepts `auto`, `fr` (fractional), `px`, `%`, or `repeat()`. [S1]
|
||||
- **`repeat(auto-fit, minmax(150px, 1fr))`** — a common responsive pattern letting columns auto-adjust to available width. [S1]
|
||||
- **Item placement properties** — `grid-column-start`/`-end`, `grid-row-start`/`-end`, and their shorthands `grid-column`/`grid-row` (e.g. `grid-column:1/span 2` spans an item across 2 columns). [S1]
|
||||
- **`grid-template-areas`** — names regions of the grid for semantic placement via `grid-area`. [S1]
|
||||
- **Alignment** — `justify-content` (horizontal), `align-content` (vertical) — same value vocabulary as flexbox (`center`, `space-between`, `space-evenly`, etc.). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Responsive auto-fit columns: `<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">`. [S1]
|
||||
- Spanning an item across columns: `<div style="grid-column:1/span 2">1</div>` inside a `w3-grid` container. [S1]
|
||||
- Named grid areas: `<div class="w3-grid" style="grid-template-areas:'myArea myArea . .'"> <div style="grid-area:myArea">1</div> ...</div>`. [S1]
|
||||
- Gap control: `<div class="w3-grid" style="gap:2px">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **w3-grid vs w3-flex의 차원 차이**: grid는 행+열 2차원, flex는 행 또는 열 1차원 레이아웃이라는 점이 명시적으로 대비됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — repeat(auto-fit, minmax()) 패턴이 반응형 카드 그리드 구성의 표준 실전 기법이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Responsive auto-fitting grid columns (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-grid" style="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))">
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Icons]], [[W3CSS Flexbox]], [[W3CSS Rows]]
|
||||
- **참조 맥락:** 2차원 그리드 레이아웃 — 1차원 플렉스박스(Flexbox) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Responsive Grid — https://www.w3schools.com/w3css/w3css_grid.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Responsive Grid" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-icons
|
||||
title: "W3CSS Icons"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["Font Awesome", "Material Icons", "Bootstrap Icons", "W3.CSS 아이콘"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "icons"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_icons.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Icons]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS has NO icon system of its own — it's explicitly framework-agnostic here, supporting Font Awesome, Google Material Icons, and Bootstrap Icons interchangeably, each via a completely different markup convention (`<i class="fa fa-home">` vs. `<i class="material-icons">home</i>` vs. `<i class="glyphicon glyphicon-home">`), meaning the icon syntax you use depends entirely on which external CDN you chose to link, not on W3.CSS. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Two-step integration** — (1) link the icon library's CSS from a CDN in `<head>`, (2) add the icon's class name to an inline element (`<i>` or `<span>` are conventional). [S1]
|
||||
- **Font Awesome syntax** — class-name-based: `<i class="fa fa-home"></i>`. [S1]
|
||||
- **Material Icons syntax** — TEXT-content-based: `<i class="material-icons">home</i>` (the icon name is the element's text, not a class suffix). [S1]
|
||||
- **Bootstrap Icons (glyphicons) syntax** — class-name-based like Font Awesome: `<i class="glyphicon glyphicon-home"></i>`. [S1]
|
||||
- **Sizing via `w3-size` classes** — the same `w3-tiny` through `w3-jumbo` classes used elsewhere apply directly to icons too. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Font Awesome setup: `<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <i class="fa fa-home"></i>`. [S1]
|
||||
- Material Icons setup (note: icon name as TEXT, not class): `<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <i class="material-icons">home</i>`. [S1]
|
||||
- Bootstrap Icons setup: `<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <i class="glyphicon glyphicon-home"></i>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **아이콘 라이브러리별 문법 차이**: Font Awesome/Bootstrap은 클래스명으로, Material Icons는 요소의 텍스트 내용으로 아이콘을 지정한다는 점이 세 예제의 직접 비교로 명확히 드러남. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 세 아이콘 라이브러리 중 하나를 선택해 홈/검색/삭제 아이콘을 표시하는 것이 실전 UI 아이콘 사용의 표준 패턴이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Material Icons uses text content, not a class suffix, unlike Font Awesome (HTML):
|
||||
```html
|
||||
<!-- Font Awesome: icon name is part of the class -->
|
||||
<i class="fa fa-home"></i>
|
||||
<!-- Material Icons: icon name is the element's text content -->
|
||||
<i class="material-icons">home</i>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Tags]], [[W3CSS Grid]], [[W3CSS Defaults]]
|
||||
- **참조 맥락:** Badges & Icons 섹션의 마지막 — 그리드(Grid) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Icons — https://www.w3schools.com/w3css/w3css_icons.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Icons" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-images
|
||||
title: "W3CSS Images"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-image", "grayscale sepia", "W3.CSS 이미지"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "images"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_images.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Images]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-image` scales DOWN but never scales UP beyond the image's original size — a deliberate one-directional responsiveness distinct from `style="width:100%"` (which scales both up and down), meaning `w3-image` is the right choice specifically when you want a photo to shrink gracefully on small screens without ever appearing artificially blown-up/pixelated on large ones. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-round` / `w3-circle` / `w3-border`** — reused shape/border classes apply directly to `<img>`. [S1]
|
||||
- **`w3-image`** — responsive: scales DOWN to fit container, never scales UP past original size. [S1]
|
||||
- **`style="width:100%"`** — scales both up AND down (fully fluid), unlike `w3-image`. [S1]
|
||||
- **`w3-opacity` / `w3-opacity-min` / `w3-opacity-max`** — three opacity intensity tiers. [S1]
|
||||
- **`w3-grayscale` / `w3-sepia`** (with `-min`/`-max` variants) — visual filter effects; NOT supported in IE11 and earlier. [S1]
|
||||
- **`w3-hover-opacity` / `w3-hover-grayscale` / `w3-hover-sepia`** — effects applied only on hover. [S1]
|
||||
- **`w3-hover-opacity-off`** — the inverse: an already-transparent image (`w3-opacity`) becomes FULLY opaque on hover, rather than the more common "transparent on hover" pattern. [S1]
|
||||
- **Photo album via Responsive Grid** — `w3-third` + `w3-card` + `<img style="width:100%">` + `w3-container` caption, repeated for a gallery layout. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Never-scale-up responsive image: `<img src="img_lights.jpg" alt="Lights" class="w3-image">`. [S1]
|
||||
- Fully fluid (scales both ways): `<img src="img_lights.jpg" alt="Lights" style="width:100%">`. [S1]
|
||||
- Grayscale (not IE11-safe): `<img src="image.jpg" class="w3-grayscale">`. [S1]
|
||||
- Inverse hover effect: `<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">` — starts transparent, becomes fully opaque on hover. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **grayscale/sepia의 브라우저 제약**: w3-grayscale과 w3-sepia 클래스 모두 IE11 이하에서 지원되지 않는다는 점이 각각 명시적으로 경고됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — Responsive Grid(w3-third)로 구성한 사진 앨범이 반응형 이미지 갤러리의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Image that fades in on hover, from transparent to fully opaque (HTML):
|
||||
```html
|
||||
<img src="snowtops.jpg" class="w3-opacity w3-hover-opacity-off" alt="Alps">
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Lists]], [[W3CSS Input]], [[W3CSS Effects]]
|
||||
- **참조 맥락:** 이미지 반응형/효과 — 입력 폼(Input) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Images — https://www.w3schools.com/w3css/w3css_images.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Images" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-input
|
||||
title: "W3CSS Input"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-input", "w3-check", "w3-radio", "W3.CSS 입력 폼"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "forms", "input"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_input.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Input]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-input` has a bottom border by DEFAULT — the source frames "borderless" as the exception requiring an explicit `w3-border-0` override, meaning W3.CSS's baked-in visual assumption is that text inputs should look like underlined fields (Material Design style) unless you deliberately opt out. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-input`** — text input styling; has a bottom border BY DEFAULT (add `w3-border-0` to remove it, or `w3-border` for a full border). [S1]
|
||||
- **`w3-animate-input`** — expands the input to 100% width specifically ON FOCUS (not permanently). [S1]
|
||||
- **`w3-check`** — checkbox styling. [S1]
|
||||
- **`w3-radio`** — radio button styling. [S1]
|
||||
- **`w3-select`** — dropdown/select styling. [S1]
|
||||
- **Label placement is purely structural** — "Top Labels" vs. "Bottom Labels" is just whether the `<label>` markup comes before or after the `<input>` in HTML order — no different classes involved. [S1]
|
||||
- **Responsive Grid for form layout** — `w3-row-padding` + `w3-third`/`w3-half` lets multiple inputs sit on one row, stacking on small screens. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Default bottom-border input: `<input class="w3-input" type="text">`. [S1]
|
||||
- Borderless variant: `<input class="w3-input w3-border-0" type="text">`. [S1]
|
||||
- Focus-expanding input: `<input class="w3-input w3-animate-input" type="text" style="width:30%">`. [S1]
|
||||
- Checkbox with disabled state: `<input class="w3-check" type="checkbox" checked="checked"> <label>Milk</label> <input class="w3-check" type="checkbox" disabled> <label>Lemon (Disabled)</label>`. [S1]
|
||||
- Radio group: `<input class="w3-radio" type="radio" name="gender" value="male" checked> <label>Male</label>`. [S1]
|
||||
- Grid-based form layout: `<div class="w3-row-padding"><div class="w3-third"><input class="w3-input w3-border" type="text" placeholder="One"></div>...</div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **입력 필드 기본 테두리**: w3-input이 기본적으로 하단 테두리를 가지며, 테두리 없는 형태는 w3-border-0으로 명시적으로 제거해야 한다는 점이 강조됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — Responsive Grid로 3개 입력 필드를 한 줄에 배치하는 것이 폼 레이아웃의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Input focus animation expanding to full width (HTML):
|
||||
```html
|
||||
<input class="w3-input w3-animate-input" type="text" style="width:30%">
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Images]], [[W3CSS Badges]], [[W3CSS Grid]]
|
||||
- **참조 맥락:** Tables/Lists/Forms 섹션의 마지막 — 배지(Badges) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Input — https://www.w3schools.com/w3css/w3css_input.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Input" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-intro
|
||||
title: "W3CSS Intro"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["W3.CSS Demo", "Kitchen Sink", "W3.CSS 소개"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.86
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "intro"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_intro.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Intro]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This "Kitchen Sink" intro page is deliberately a survey, not a tutorial — it flashes a tiny live sample of EVERY major W3.CSS feature (colors, containers, panels, cards, grid, flexbox, modals, tabs, animations, etc.) in one scroll, functioning as a visual table of contents that previews what each later chapter will teach in depth. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Purpose** — a single-page "kitchen sink" demo giving a bite-sized preview of nearly every W3.CSS component before diving into individual chapters. [S1]
|
||||
- **Core class families previewed** — `w3-container`, `w3-panel`, `w3-card`, `w3-table`, `w3-ul`, `w3-button`/`w3-btn`, `w3-tag`/`w3-badge`, `w3-grid`, `w3-flex`, `w3-row`, `w3-display-*`, `w3-modal`, `w3-dropdown`, `w3-bar` (navigation), `w3-animate-*`. [S1]
|
||||
- **w3-grid vs w3-flex distinction (previewed here, detailed later)** — grid is two-dimensional (rows AND columns); flex is one-dimensional (rows OR columns). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Container example: `<div class="w3-container w3-teal"><h1>This is a Header</h1></div>`. [S1]
|
||||
- Panel example: `<div class="w3-panel w3-red"><p>I am a panel</p></div>`. [S1]
|
||||
- Card example: `<div class="w3-card-4"><img src="img_snowtops.jpg" alt="Alps"><div class="w3-container w3-center"><p>French Alps</p></div></div>`. [S1]
|
||||
- Grid example: `<div class="w3-grid"><div>1</div><div>2</div><div>3</div><div>4</div></div>`. [S1]
|
||||
- Flex example: `<div class="w3-flex" style="gap:8px"><div>1</div><div>2</div><div>3</div></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이 페이지 자체가 W3.CSS 전체 기능의 축소판 시연이며, 각 컴포넌트는 이후 챕터에서 상세히 다뤄진다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Grid vs flex, previewed side by side (HTML):
|
||||
```html
|
||||
<div class="w3-grid"> <!-- two-dimensional: rows AND columns -->
|
||||
<div>1</div><div>2</div><div>3</div><div>4</div>
|
||||
</div>
|
||||
<div class="w3-flex" style="gap:8px"> <!-- one-dimensional: rows OR columns -->
|
||||
<div>1</div><div>2</div><div>3</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.86
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Colors]], [[W3CSS Containers]], [[W3CSS Grid]], [[W3CSS Flexbox]]
|
||||
- **참조 맥락:** 전체 프레임워크의 축소 시연 — Colors 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Demo (Kitchen Sink) — https://www.w3schools.com/w3css/w3css_intro.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Demo (Kitchen Sink)" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: w3css-lists
|
||||
title: "W3CSS Lists"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-ul", "avatar list", "W3.CSS 리스트"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "lists"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_lists.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Lists]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The "Avatar List" pattern reuses `w3-bar-item` (a button/bar utility class from the Buttons chapter) INSIDE a `<li>` instead of a button — combining an image, text block, and dismiss button as three `w3-bar-item` siblings — showing that W3.CSS's bar-layout mechanism generalizes beyond navigation bars to any horizontal row of mixed content, including list items. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-ul`** — base list container class. [S1]
|
||||
- **100% width by default** — lists span their parent's full width unless overridden with inline `style="width:..."`. [S1]
|
||||
- **Reused patterns from other chapters** — `w3-border`, `w3-card-4`, `w3-center`, color classes, `w3-hoverable`, size classes (`w3-tiny` through `w3-jumbo`) all apply identically to lists as they did to tables/panels/buttons. [S1]
|
||||
- **Closable list item** — same `×` + inline `onclick` dismiss pattern as panels/alerts, wrapped in `w3-display-container` on the `<li>`. [S1]
|
||||
- **Avatar list** — combines `w3-bar` (on the `<li>`), `w3-bar-item` (on image/text/close-button), and `w3-circle` (on the avatar image) into a contact-list-style row. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic list: `<ul class="w3-ul"><li>Jill</li><li>Eve</li><li>Adam</li></ul>`. [S1]
|
||||
- Closable item: `<li class="w3-display-container">Jill <span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-right">×</span></li>`. [S1]
|
||||
- Avatar list item: `<li class="w3-bar"><span onclick="..." class="w3-bar-item w3-button w3-xlarge w3-right">×</span><img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px"><div class="w3-bar-item"><span class="w3-large">Mike</span><br><span>Web Designer</span></div></li>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 아바타+이름+직함+닫기 버튼을 한 줄에 배치하는 아바타 리스트가 연락처 UI의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Avatar list item combining bar-item, circle image, and close button (HTML):
|
||||
```html
|
||||
<li class="w3-bar">
|
||||
<span onclick="this.parentElement.style.display='none'"
|
||||
class="w3-bar-item w3-button w3-xlarge w3-right">×</span>
|
||||
<img src="img_avatar2.png" class="w3-bar-item w3-circle" style="width:85px">
|
||||
<div class="w3-bar-item">
|
||||
<span class="w3-large">Mike</span><br>
|
||||
<span>Web Designer</span>
|
||||
</div>
|
||||
</li>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Tables]], [[W3CSS Buttons]], [[W3CSS Images]]
|
||||
- **참조 맥락:** 리스트 스타일링 — 이미지(Images) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Lists — https://www.w3schools.com/w3css/w3css_lists.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Lists" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: w3css-margins
|
||||
title: "W3CSS Margins"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-margin", "w3-section", "W3.CSS 마진"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "margins"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_margins.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Margins]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-section` exists specifically because many HTML elements have NO default top/bottom margin — the source demonstrates two colored blocks touching with zero gap between them until `w3-section` is added, showing this class solves a real visual problem (elements running together) rather than being purely decorative. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-margin`** — 16px margin on ALL sides. [S1]
|
||||
- **`w3-margin-{top,right,bottom,left}`** — 16px margin on one specific side. [S1]
|
||||
- **`w3-section`** — 16px TOP and BOTTOM margin, specifically to separate stacked elements that lack default spacing. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- All-sides margin: `<div class="w3-container w3-margin"><p>I have 16px margin on all sides.</p></div>`. [S1]
|
||||
- Directional margin: `<div class="w3-container w3-margin-top"><p>I have 16px margin on the top.</p></div>`. [S1]
|
||||
- Section separation: `<div class="w3-container w3-section w3-blue"><h1>I am Blue</h1></div> <div class="w3-container w3-section w3-green"><h1>I am Green</h1></div>` — without `w3-section`, the two blocks would touch with no gap. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **기본 마진이 없는 요소 문제**: 많은 HTML 요소에 기본 상하 마진이 없어 서로 붙어버리는 문제를 w3-section이 해결한다는 점이 시각적 비교로 증명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 연속된 컨테이너 블록들을 w3-section으로 구분하는 것이 레이아웃 분리의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Separating stacked blocks with w3-section (HTML):
|
||||
```html
|
||||
<div class="w3-container w3-section w3-blue"><h1>I am Blue</h1></div>
|
||||
<div class="w3-container w3-section w3-green"><h1>I am Green</h1></div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Padding]], [[W3CSS RTL]]
|
||||
- **참조 맥락:** 마진 시스템 — RTL(오른쪽에서 왼쪽) 레이아웃 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Margins — https://www.w3schools.com/w3css/w3css_margins.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Margins" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-material
|
||||
title: "W3CSS Material Design"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["material design look", "W3.CSS 머티리얼 디자인"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "material-design"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_material.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Material Design]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS has no dedicated "Material Design mode" — achieving a Material look is entirely a matter of COMPOSING existing general-purpose classes already taught in earlier chapters (`w3-card` for paper-like elevation/shadow, `w3-bar`/`w3-sidebar` for the status/tool/tab bars, color classes for theming), confirming the framework's overall design philosophy of reusable primitives over named design-system modes. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Material Design origin** — designed by Google in 2014, later adopted across many Google applications; uses paper-and-ink metaphors with realistic shadows and hover effects. [S1]
|
||||
- **Card-based content** — Material's signature "card" pattern is achieved with the SAME `w3-card` classes covered in the Cards chapter, not a Material-specific class. [S1]
|
||||
- **Layered navigation bars** — a Material-style app UI is built from multiple stacked `w3-bar` elements (status bar, toolbar, tab/search bar), each independently simple, combined ("All Together Now") into one cohesive header. [S1]
|
||||
- **Color themes** — Material's colorful look is achieved via W3.CSS's color-theme system (cross-referenced to a later Color Themes chapter), not a Material-only palette. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- The chapter's "All Together Now" example stacks a status bar, a toolbar with a title, and a tab bar with links into a single composite navigation header — each layer built from the same `w3-bar` primitive. [S1]
|
||||
- Colorful Material-style cards (Sport/News/Music) reuse the standard card structure (image + text block) with distinct color classes per card. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 상태바+툴바+탭바를 층층이 쌓아 하나의 머티리얼 스타일 헤더를 만드는 조합이 실전 모바일 앱 UI 구성의 대표 사례다(다음 Mobile 챕터에서 실제 앱으로 확장됨). [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Stacking bars to build a layered Material-style navigation header (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-bar w3-black">12:30</div>
|
||||
<div class="w3-bar w3-teal w3-large">Title</div>
|
||||
<div class="w3-bar w3-light-grey">
|
||||
<a href="#" class="w3-bar-item w3-button">Link 1</a>
|
||||
<a href="#" class="w3-bar-item w3-button">Link 2</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Cards]], [[W3CSS Bars]], [[W3CSS Case]], [[W3CSS Validation]]
|
||||
- **참조 맥락:** 트렌드 기반 종합 응용 챕터 — CSS 검증(Validation) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Material Design — https://www.w3schools.com/w3css/w3css_material.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Material Design" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: w3css-mobile
|
||||
title: "W3CSS Mobile"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["building a mobile app", "w3-cell-row app layout", "W3.CSS 모바일 앱"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.85
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "mobile-app"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_mobile.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Mobile]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A "mobile app" list layout (avatar + title + description per row) is built from the SAME `w3-cell-row`/`w3-cell` pair covered in the Cells chapter — meaning this entire chapter's app UI is really a targeted APPLICATION of two earlier chapters (Cells for row layout, Versions' Pro build for lean file size) rather than introducing any mobile-specific classes. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3pro.css` for mobile** — explicitly recommended here because its smaller, colorless file size suits performance-sensitive mobile app contexts (direct callback to the Versions chapter). [S1]
|
||||
- **Movie-list layout via cells** — `w3-cell-row` containing one `w3-cell` for an avatar image and another `w3-cell w3-container` for title+description, per list item. [S1]
|
||||
- **`w3-circle`** — rounds an image into a circle, commonly used for avatar-style app icons. [S1]
|
||||
- **`w3-text-theme`** — a theme-aware text color class that adapts automatically when a color theme stylesheet is swapped in. [S1]
|
||||
- **Slide-in side navigation with an avatar header** — combines `w3-sidebar`, a colored header block containing a circular avatar, and a close button (`w3-display-topright`), reusing the Sidebar chapter's open/close JS pattern verbatim. [S1]
|
||||
- **Fixed header/nav/footer** — `w3-top` on both a `<header>` and `<nav>` simultaneously, plus `w3-bottom` on the footer, for a fully pinned app chrome. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- App-style list row via cells: `<div class="w3-cell-row"><div class="w3-cell"><img src="img_avatar.jpg"></div><div class="w3-cell w3-container"><h3>Frozen</h3><p>The response to the animations was ridiculous.</p></div></div>`. [S1]
|
||||
- Theme-aware avatar and text: `<img class="w3-circle" src="img_avatar.jpg" alt="avatar"><h3 class="w3-text-theme">Frozen</h3>`. [S1]
|
||||
- Side navigation reusing the Sidebar chapter's open/close pattern: `function openSidebar() { document.getElementById("mySidebar").style.display = "block"; } function closeSidebar() { document.getElementById("mySidebar").style.display = "none"; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이 챕터 전체가 Cells/Sidebar/Versions 챕터에서 배운 클래스를 재조합해 실제 모바일 앱 UI를 만드는 종합 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A movie-list row using cells — the same pattern from the Cells chapter, applied to app UI (HTML):
|
||||
```html
|
||||
<div class="w3-cell-row">
|
||||
<div class="w3-cell">
|
||||
<img src="img_avatar.jpg">
|
||||
</div>
|
||||
<div class="w3-cell w3-container">
|
||||
<h3>Frozen</h3>
|
||||
<p>The response to the animations was ridiculous.</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.85
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Cells]], [[W3CSS Sidebar]], [[W3CSS Versions]], [[W3CSS Color Classes]]
|
||||
- **참조 맥락:** Code & Miscellaneous 섹션 마지막 — 컬러 레퍼런스(Color Reference) 섹션으로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Building a Mobile App — https://www.w3schools.com/w3css/w3css_mobile.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Building a Mobile App" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: w3css-modal
|
||||
title: "W3CSS Modal"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-modal", "lightbox", "W3.CSS 모달"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "modal", "lightbox"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_modal.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Modal]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Closing a modal by clicking its OUTER background is implemented by attaching the close handler to the OUTER `w3-modal` div itself (`onclick="this.style.display='none'"`), not to a separate overlay element like the Sidebar chapter's `w3-overlay` — meaning the modal's backdrop and its click-to-close target are literally the same element, a simpler structure than the sidebar's two-element (sidebar + overlay) approach. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-modal`** — the outer full-screen container/backdrop, hidden by default (`display:none`), shown via `style.display='block'`. [S1]
|
||||
- **`w3-modal-content`** — the actual visible dialog box nested inside `w3-modal`; can contain any HTML (headers, footers, images, forms). [S1]
|
||||
- **Click-outside-to-close** — either `onclick="this.style.display='none'"` directly on the `w3-modal` div, or a `window.onclick` handler checking `event.target == modal`. [S1]
|
||||
- **Header/footer sectioning** — `<header>`/`<footer>` with `w3-container` classes inside `w3-modal-content` create structured dialog sections, reusing the Containers chapter's pattern. [S1]
|
||||
- **Animated entrance** — any `w3-animate-*` class on `w3-modal-content` (zoom/top/bottom/left/right), or `w3-animate-opacity` on the OUTER `w3-modal` itself to fade the backdrop. [S1]
|
||||
- **Modal as image viewer / lightbox** — clicking a thumbnail image sets a shared modal's `<img>` `src` dynamically via JS, avoiding one modal per image. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic modal structure: `<button onclick="document.getElementById('id01').style.display='block'" class="w3-button">Open Modal</button><div id="id01" class="w3-modal"><div class="w3-modal-content"><div class="w3-container"><span onclick="document.getElementById('id01').style.display='none'" class="w3-button w3-display-topright">×</span><p>Some text..</p></div></div></div>`. [S1]
|
||||
- Click-outside-to-close via window-level listener: `var modal = document.getElementById('id01'); window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } }`. [S1]
|
||||
- Dynamic image gallery modal (one shared modal, src swapped per click): `function onClick(element) { document.getElementById("img01").src = element.src; document.getElementById("modal01").style.display = "block"; }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **모달 vs 사이드바의 배경 클릭 처리 구조 차이**: 사이드바는 별도 w3-overlay 요소를 두지만, 모달은 w3-modal 자체에 onclick을 걸어 배경 클릭을 처리한다는 구조적 차이가 있음(요소 하나로 배경+닫기 트리거를 겸함). [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 슬라이드쇼를 모달 안에 넣는 "라이트박스(Lightbox)" 조합이 이미지 갤러리 UI의 실전 활용 사례로 예고됨(Slideshow 챕터 교차 참조). [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Closing a modal by clicking anywhere outside its content (JavaScript):
|
||||
```javascript
|
||||
var modal = document.getElementById('id01');
|
||||
window.onclick = function(event) {
|
||||
if (event.target == modal) {
|
||||
modal.style.display = "none";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Slideshow]], [[W3CSS Sidebar]], [[W3CSS Tooltips]]
|
||||
- **참조 맥락:** UI Components 섹션 마지막 직전 — 툴팁(Tooltips) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Modal — https://www.w3schools.com/w3css/w3css_modal.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Modal" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-navigation
|
||||
title: "W3CSS Navigation"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["navigation bars", "w3-top", "w3-bottom", "W3.CSS 네비게이션 바"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "navbar"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_navigation.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Navigation]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Padding on the navbar CONTAINER versus padding on each INDIVIDUAL link produces visually similar layouts but behaviorally different hover feedback — the source explicitly warns that container-level padding means links "do not get full padding on hover," revealing that hover-affordance area is determined by which element actually owns the padding, not just how the bar looks at rest. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-bar` fundamentals reused** — this chapter is `w3-bar`/`w3-bar-item`/`w3-bar-block` applied specifically to navigation, plus `w3-sidebar` as a preview of the next chapter. [S1]
|
||||
- **`w3-hover-none` + `w3-hover-text-*`** — disables the default grey hover background and switches to a text-color-only hover effect instead. [S1]
|
||||
- **Padding placement matters for hover** — `w3-padding-16` on each link gives full-padding hover feedback; the same padding on the parent bar does not. [S1]
|
||||
- **`w3-top` / `w3-bottom`** — wrapping a bar in a div with this class fixes it to the viewport top/bottom, persisting through scroll. [S1]
|
||||
- **Collapsing pattern** — replacing a full navbar with a single hamburger button (☰) on small screens via hide/show classes, previewing the Sidebar chapter's collapsible pattern. [S1]
|
||||
- **Icon integration** — Font Awesome `fa fa-*` classes drop directly into bar items (cross-referenced to the Icons chapter). [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Custom-width, mobile-responsive links: `<a href="#" class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>` — combined with `w3-mobile` to become 100% width on small screens. [S1]
|
||||
- Fixed-to-viewport bar: `<div class="w3-top"><div class="w3-bar">...</div></div>`. [S1]
|
||||
- Text-only hover effect: `<a class="w3-bar-item w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 1</a>`. [S1]
|
||||
- Navbar with input + button combo: `<input type="text" class="w3-bar-item w3-input" placeholder="Search.."><a href="#" class="w3-bar-item w3-button w3-green">Go</a>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **바 전체 vs 개별 링크 패딩의 호버 차이**: 바 컨테이너에 패딩을 주면 개별 링크가 호버 시 전체 패딩 영역을 갖지 못한다는 점이 원문에서 명시적으로 경고됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — w3-top으로 상단 고정 네비게이션 바를 만들고 작은 화면에서 햄버거 버튼으로 축소하는 조합이 실전 반응형 웹사이트 헤더의 대표 패턴이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Fixing a navigation bar to the top of the viewport (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-top">
|
||||
<div class="w3-bar w3-black">
|
||||
<a href="#" class="w3-bar-item w3-button">Home</a>
|
||||
<a href="#" class="w3-bar-item w3-button">Link 1</a>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Bars]], [[W3CSS Dropdowns]], [[W3CSS Icons]], [[W3CSS Sidebar]]
|
||||
- **참조 맥락:** 수평 네비게이션 바 종합 챕터 — 수직 사이드바(Sidebar) 챕터로 직접 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Navigation Bars — https://www.w3schools.com/w3css/w3css_navigation.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Navigation Bars" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: w3css-notes
|
||||
title: "W3CSS Notes"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["pale colors", "W3.CSS 노트"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "notes", "panels"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_notes.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Notes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This chapter's real content is a recipe book of `w3-panel` COMBINATIONS — pale background + colored bar + matching border color (e.g. `w3-pale-blue w3-leftbar w3-rightbar w3-border-blue`) — showing that "note styles" aren't a dedicated class family at all, just specific, repeatable pairings of panel/color/border classes already covered in earlier chapters. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **No dedicated "note" class** — notes are `w3-panel` combined with pale background colors and optional bars/borders. [S1]
|
||||
- **Pale color palette** — `w3-pale-blue`, `w3-pale-red`, `w3-pale-yellow`, `w3-pale-green` — softer than the full-saturation colors used for alerts. [S1]
|
||||
- **Combinable accents** — `w3-leftbar`/`w3-rightbar`/`w3-topbar`/`w3-bottombar` paired with a matching `w3-border-COLOR`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic note: `<div class="w3-panel w3-yellow"><p>...</p></div>`. [S1]
|
||||
- Grey rounded note: `<div class="w3-panel w3-border w3-light-grey w3-round-large"><p>...</p></div>`. [S1]
|
||||
- Pale blue with both side bars: `<div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue"><p>...</p></div>`. [S1]
|
||||
- Pale green with border + bottom bar combined: `<div class="w3-panel w3-pale-green w3-bottombar w3-border-green w3-border"><p>...</p></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 파스텔 색상+테두리바 조합으로 다양한 노트 스타일을 만드는 것이 클래스 조합 레시피의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Pale color combined with a matching bordered bar accent (HTML):
|
||||
```html
|
||||
<div class="w3-panel w3-pale-blue w3-leftbar w3-rightbar w3-border-blue">
|
||||
<p>London is the most populous city in the United Kingdom...</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Panels]], [[W3CSS Buttons]], [[W3CSS Quotes]]
|
||||
- **참조 맥락:** 패널 조합 레시피 — 인용문(Quotes) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Notes — https://www.w3schools.com/w3css/w3css_notes.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Notes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
id: w3css-padding
|
||||
title: "W3CSS Padding"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-padding classes", "W3.CSS 패딩"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "padding"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_padding.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Padding]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS splits padding into TWO separate class families with different behavior — "number" classes (`w3-padding-16` through `w3-padding-64`) add ONLY top/bottom padding, while "size" classes (`w3-padding-small`/`w3-padding`/`w3-padding-large`) add ALL FOUR sides at different top/bottom vs. left/right ratios — meaning the choice of class family determines whether you're adjusting vertical space alone or the whole box uniformly. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Padding-number classes** — `w3-padding-16/24/32/48/64` add ONLY top+bottom padding at that pixel value. [S1]
|
||||
- **Padding-size classes** — `w3-padding-small` (4px top/bottom, 8px left/right), `w3-padding` (8px/16px), `w3-padding-large` (12px/24px) — all FOUR sides, with left/right always double the top/bottom value. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Number class: `<div class="w3-panel w3-padding-16"><p>I have 16px top and bottom padding.</p></div>`. [S1]
|
||||
- Size class: `<div class="w3-panel w3-padding-large"><p>I have 12px top and bottom padding and 24px left and right padding.</p></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **두 클래스 계열의 방향 차이**: 숫자 클래스는 상하 패딩만, 크기 클래스는 4면 모두(좌우가 상하의 2배) 적용한다는 점이 명확히 구분됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 패널 내부 여백을 세밀하게 조정할 때 숫자/크기 클래스 중 선택하는 것이 실전 레이아웃 조정의 기준이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Size class applying padding to all four sides asymmetrically (HTML):
|
||||
```html
|
||||
<div class="w3-panel w3-padding-large">
|
||||
<p>12px top/bottom, 24px left/right — left/right is always 2x top/bottom.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Round]], [[W3CSS Margins]]
|
||||
- **참조 맥락:** 여백(padding) 시스템 — 마진(Margins) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Padding — https://www.w3schools.com/w3css/w3css_padding.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Padding" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-pagination
|
||||
title: "W3CSS Pagination"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-bar pagination", "page numbers", "W3.CSS 페이지네이션"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.86
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "pagination"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_pagination.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Pagination]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Pagination, like tabs, has no dedicated class — it's just `w3-bar` + `w3-button` links containing page numbers, meaning everything already learned about bars (color, hover-color, sizing, borders, rounding, centering) applies directly, and the SAME `w3-bar` markup used for pagination is shown reused verbatim for a completely different purpose (a previous/next button pair, or an inline menu) later in the same chapter. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Basic pagination** — `w3-bar` container with `w3-button` links for each page number; adding `w3-bar-item` removes inter-button spacing for a connected look. [S1]
|
||||
- **Active page indicator** — any `w3-color` class (e.g. `w3-green`) applied to the current page's link. [S1]
|
||||
- **Sizing** — `w3-tiny` through `w3-xxxlarge` on the container scale all pagination buttons uniformly. [S1]
|
||||
- **Centering** — wrapping the `w3-bar` in a `w3-center` div. [S1]
|
||||
- **Bordered/rounded** — `w3-border` and `w3-round` combine on the container for a connected, rounded-edge pagination strip. [S1]
|
||||
- **Same markup, different purpose** — the identical `w3-bar` pattern is reused for Previous/Next buttons (`w3-right` on the "Next" link) and for a plain inline navigation menu, showing pagination is really just one specific USE of the general bar component. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Connected pagination buttons: `<div class="w3-bar"><a href="#" class="w3-button">«</a><a href="#" class="w3-button">1</a>...<a href="#" class="w3-button">»</a></div>`. [S1]
|
||||
- Bordered + rounded: `<div class="w3-bar w3-border w3-round">`. [S1]
|
||||
- Previous/Next reusing the same bar pattern: `<div class="w3-bar w3-border w3-round"><a href="#" class="w3-button">❮ Previous</a><a href="#" class="w3-button w3-right">Next ❯</a></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 동일한 w3-bar 마크업을 페이지네이션·이전/다음 버튼·인라인 메뉴 세 가지 용도로 재사용하는 것이 실전 컴포넌트 재사용 원칙의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Bordered, rounded pagination with an active-page indicator (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-bar w3-border w3-round">
|
||||
<a href="#" class="w3-button">«</a>
|
||||
<a href="#" class="w3-button w3-green">1</a>
|
||||
<a href="#" class="w3-button">2</a>
|
||||
<a href="#" class="w3-button">3</a>
|
||||
<a href="#" class="w3-button">»</a>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.86
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Bars]], [[W3CSS Tabulators]], [[W3CSS Progress Bar]]
|
||||
- **참조 맥락:** w3-bar 컴포넌트의 두 번째 실전 응용 — 프로그레스 바(Progress Bar) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Pagination — https://www.w3schools.com/w3css/w3css_pagination.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Pagination" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-panels
|
||||
title: "W3CSS Panels"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-panel", "W3.CSS 패널"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.9
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "panels"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_panels.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Panels]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-panel` is just `w3-container` plus 16px top/bottom margin — one small structural difference that makes it the base class for FOUR distinct UI patterns (notes, quotes, alerts, cards) purely by combining it with different color/style modifier classes, rather than needing four separate component classes. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-panel`** — adds 16px top/bottom margin AND 16px left/right padding (container + vertical spacing). [S1]
|
||||
- **Notes** — panel + pale color (e.g. `w3-pale-green`). [S1]
|
||||
- **Quotes** — panel + `w3-leftbar w3-sand w3-xxlarge w3-serif`. [S1]
|
||||
- **Alerts** — panel + strong/saturated color (e.g. plain `w3-red`). [S1]
|
||||
- **Cards** — panel + `w3-card-4`. [S1]
|
||||
- **Show/hide via inline `onclick`** — no JS file needed; `this.parentElement.style.display='none'` closes a panel; `document.getElementById(...).style.display='block'` reopens it. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic panel: `<div class="w3-panel w3-red"><p>I am a panel.</p></div>`. [S1]
|
||||
- Note styling: `<div class="w3-panel w3-pale-green"><p>...</p></div>`. [S1]
|
||||
- Quote styling: `<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif"><p><i>"Make it as simple as possible, but not simpler."</i></p></div>`. [S1]
|
||||
- Hide a panel: `<span onclick="this.parentElement.style.display='none'" class="w3-button w3-display-topright">X</span>`. [S1]
|
||||
- Show a hidden panel: `<button onclick="document.getElementById('id01').style.display='block'">Show panel</button>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 하나의 w3-panel 기반 클래스로 노트/인용문/알림/카드 4가지 UI 패턴을 구현하는 것이 클래스 조합 설계의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Dismissible panel using inline onclick, no JS file needed (HTML):
|
||||
```html
|
||||
<div class="w3-panel w3-display-container">
|
||||
<span onclick="this.parentElement.style.display='none'"
|
||||
class="w3-button w3-display-topright">X</span>
|
||||
<p>Click on the X to close this panel.</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.90
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Containers]], [[W3CSS Notes]], [[W3CSS Quotes]], [[W3CSS Alerts]], [[W3CSS Cards]]
|
||||
- **참조 맥락:** 노트/인용문/알림/카드의 공통 기반 — 테두리(Borders) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Panels — https://www.w3schools.com/w3css/w3css_panels.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Panels" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,84 @@
|
||||
---
|
||||
id: w3css-progress-bar
|
||||
title: "W3CSS Progress Bar"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["progress bar", "setInterval progress", "W3.CSS 프로그레스 바"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "progress-bar"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_progressbar.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Progress Bar]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
A W3.CSS progress bar is nothing but a plain `<div>` nested inside another `<div>`, with the inner div's inline CSS `width` percentage doing 100% of the "progress" representation — meaning a dynamic/animated progress bar is just `setInterval` incrementing that one CSS property over time, with zero framework-specific progress API. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Two-div structure** — outer div (`w3-light-grey`, the track) contains an inner div (any `w3-color`, the fill) whose `width` percentage IS the progress value. [S1]
|
||||
- **Labels** — placing text directly inside the inner (colored) div, with `w3-container` for padding and `w3-center` for alignment, turns the fill into a labeled progress bar. [S1]
|
||||
- **Dynamic progress via `setInterval`** — `setInterval(frame, 10)` repeatedly increments a `width` variable and applies it to the inner div's style until it reaches 100%, then `clearInterval` stops the loop. [S1]
|
||||
- **Composable styling** — `w3-round` for rounded corners, `w3-padding` for internal spacing, `w3-size` classes for label text size — all standard utility classes apply directly to the progress divs. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic static progress bar: `<div class="w3-border"><div class="w3-grey" style="height:24px;width:20%"></div></div>`. [S1]
|
||||
- Labeled, centered progress bar: `<div class="w3-light-grey"><div class="w3-container w3-green w3-center" style="width:25%">25%</div></div>`. [S1]
|
||||
- Dynamic JS-driven progress bar: `function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width >= 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; } } }`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — setInterval로 width 값을 1%씩 증가시키며 애니메이션 진행 바를 만드는 패턴이 파일 업로드 진행률 표시 등 실전 활용의 대표 기법이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A dynamic progress bar driven purely by incrementing a div's width via setInterval (HTML/JS):
|
||||
```html
|
||||
<div class="w3-light-grey">
|
||||
<div id="myBar" class="w3-container w3-green" style="height:24px;width:1%"></div>
|
||||
</div>
|
||||
<button class="w3-button w3-light-grey" onclick="move()">Click Me</button>
|
||||
<script>
|
||||
function move() {
|
||||
var elem = document.getElementById("myBar");
|
||||
var width = 1;
|
||||
var id = setInterval(frame, 10);
|
||||
function frame() {
|
||||
if (width >= 100) {
|
||||
clearInterval(id);
|
||||
} else {
|
||||
width++;
|
||||
elem.style.width = width + '%';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Pagination]], [[W3CSS Slideshow]]
|
||||
- **참조 맥락:** setInterval 기반 동적 UI 패턴 — 슬라이드쇼(Slideshow) 챕터에서 동일 타이머 패턴이 재등장.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Progress Bars — https://www.w3schools.com/w3css/w3css_progressbar.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Progress Bars" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-quotes
|
||||
title: "W3CSS Quotes"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["blockquote styling", "Font Awesome quotes", "W3.CSS 인용문"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "quotes", "blockquote"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_quotes.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Quotes]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The native HTML `<blockquote>` tag ADDS its own left/right margin on top of whatever W3.CSS classes apply — the source flags this explicitly as a browser default, meaning using `<blockquote>` instead of a `<div>` for quote styling isn't purely stylistic, it changes the actual box model with extra unaccounted-for margin. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Standard quote recipe** — `w3-panel w3-leftbar w3-light-grey` + `w3-serif` italic text + attribution line. [S1]
|
||||
- **`<blockquote>` quirk** — the browser adds its own extra left/right margin, distinct from any `<div>`-based equivalent. [S1]
|
||||
- **HTML symbol entities for quote marks** — `❝` (❝ left double quote), `❞` (❞ right double quote), etc., as an alternative to literal ampersand characters. [S1]
|
||||
- **Giant faded quote-mark trick** — a huge, low-opacity quote symbol placed behind the text via `font-size:150px; line-height:0.6em; opacity:0.2` and a negative `margin-top` pulling the following paragraph up underneath it. [S1]
|
||||
- **Font Awesome integration** — `<i class="fa fa-quote-right w3-xxlarge">` combines an external icon library with W3.CSS size classes. [S1]
|
||||
- **Quotes as cards** — combining `w3-panel` with `w3-card-4` for a boxed/shadowed quote presentation. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Standard quote: `<div class="w3-panel w3-leftbar w3-light-grey"><p class="w3-xlarge w3-serif"><i>"Make it as simple as possible, but not simpler."</i></p><p>Albert Einstein</p></div>`. [S1]
|
||||
- Blockquote with extra margin: `<blockquote class="w3-panel w3-leftbar w3-light-grey"><p class="w3-large"><i>"..."</i></p><p>Albert Einstein</p></blockquote>`. [S1]
|
||||
- Giant faded quote mark overlay: `<span style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span> <p class="w3-xlarge" style="margin-top:-40px"><i>"Lorem ipsum..."</i></p>`. [S1]
|
||||
- Font Awesome quote icon: `<i class="fa fa-quote-right w3-xxlarge w3-opacity"></i>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **blockquote의 숨은 마진**: 표준 HTML blockquote 태그가 브라우저 기본값으로 추가 좌우 마진을 붙인다는 점이 명시적으로 경고됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 거대한 반투명 따옴표 기호를 텍스트 뒤에 배치하는 트릭이 인용문 디자인의 대표 시각 효과다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Giant faded quote mark behind the text (HTML):
|
||||
```html
|
||||
<div class="w3-panel w3-light-grey">
|
||||
<span style="font-size:150px;line-height:0.6em;opacity:0.2">❝</span>
|
||||
<p class="w3-xlarge" style="margin-top:-40px">
|
||||
<i>"Lorem ipsum dolor sit amet..."</i>
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Notes]], [[W3CSS Alerts]], [[W3CSS Cards]]
|
||||
- **참조 맥락:** 패널 조합 레시피 두 번째 — 알림(Alerts) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Quotes — https://www.w3schools.com/w3css/w3css_quotes.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Quotes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-rtl
|
||||
title: "W3CSS RTL"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["right-to-left", "w3-rtl", "W3.CSS RTL 지원"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "rtl", "accessibility"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_rtl.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS RTL]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Full RTL support requires FOUR coordinated changes, not just one CSS class — `dir="rtl"` on `<html>` for semantic correctness, `w3-rtl` on `<body>` for component behavior, swapping `margin-left` for `margin-right` on main content, and repositioning the sidebar with `right:0` instead of `left:0` — meaning `w3-rtl` alone is necessary but not sufficient for a properly mirrored layout. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-rtl`** (W3.CSS 5+) — adjusts text direction/alignment for right-to-left languages (Arabic, Hebrew, Persian). [S1]
|
||||
- **Scoped application** — can be applied globally to `<body>` or locally to a specific `<div>`. [S1]
|
||||
- **`w3-ltr`** — reverts a specific section back to left-to-right within an otherwise RTL page. [S1]
|
||||
- **Full RTL checklist** — `dir="rtl"` on `<html>` (semantic correctness), `w3-rtl` on `<body>` (component behavior), `margin-right` instead of `margin-left` for main content, sidebar positioned with `right:0`. [S1]
|
||||
- **Manual adjustment still needed** — other text alignment, margins, paddings, and floats must be checked to ensure layout components flip appropriately. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Global RTL: `<body class="w3-container w3-rtl"><h2>مرحبا بك في موقعي</h2></body>`. [S1]
|
||||
- Scoped RTL: `<div class="w3-container w3-rtl"><h2>...</h2></div>`. [S1]
|
||||
- Reverting a section: `<div class="w3-ltr"><p>This section is back to left-to-right.</p></div>`. [S1]
|
||||
- Full RTL page setup: `<html lang="ar" dir="rtl"><body class="w3-rtl"><main class="w3-container" style="margin-right:200px"><nav class="w3-sidebar" style="width:200px; right:0">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **w3-rtl 단독으로는 불충분**: 완전한 RTL 레이아웃을 위해서는 dir="rtl" 속성, margin-right 사용, 사이드바 위치 조정까지 함께 필요하다는 점이 체크리스트로 명시됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 아랍어 사이트를 위한 전체 페이지 RTL 설정(html+body+main+sidebar)이 실전 국제화의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Full RTL page structure with sidebar repositioning (HTML):
|
||||
```html
|
||||
<html lang="ar" dir="rtl">
|
||||
<body class="w3-rtl">
|
||||
<main class="w3-container" style="margin-right:200px">
|
||||
<nav class="w3-sidebar" style="width:200px; right:0">
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Margins]], [[W3CSS Sidebar]], [[W3CSS Display]]
|
||||
- **참조 맥락:** 국제화(i18n) 레이아웃 — 디스플레이 위치 지정(Display) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS - RTL — https://www.w3schools.com/w3css/w3css_rtl.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS - RTL" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: w3css-responsive
|
||||
title: "W3CSS Responsive"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["12-column grid", "w3-col", "W3.CSS 반응형 유동 그리드"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "responsive", "grid"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_responsive.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Responsive]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The `s`/`m`/`l` column-size prefixes CASCADE upward — specifying only `s6` (small-screen 6-of-12) is enough for ALL screen sizes, while specifying only `m6` (medium) leaves SMALL screens undefined and defaulting to 100% width — meaning you only need to declare the LARGEST breakpoint tier you want to differ from full-width, not every tier explicitly. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **12-column system** — `w3-col` defines a column; `s1`-`s12`/`m1`-`m12`/`l1`-`l12` set its width fraction for small/medium/large screens respectively (each unit ≈ 8.33%). [S1]
|
||||
- **Cascading defaults** — specifying only the small-screen class applies it everywhere; specifying only medium/large leaves small screens at 100% (full stack) unless also specified. [S1]
|
||||
- **Columns per row must sum to 12** — e.g. 6+6, 3+3+6, 9+3 — a structural rule for the grid to add up correctly. [S1]
|
||||
- **Mixed breakpoint combinations** — a single column can combine `l3 m6 s4` to have entirely different fractions at each screen tier simultaneously. [S1]
|
||||
- **`w3-hide-small` / `w3-hide-medium` / `w3-hide-large`** — hides content entirely at specific breakpoints (small <601px, large >992px). [S1]
|
||||
- **`w3-content`** — a centered, fixed-max-width container; override the default 980px via CSS `max-width`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Mixed multi-tier layout: `<div class="w3-col l3 m6 s4 w3-green">...</div><div class="w3-col l7 m3 s4 w3-dark-grey">...</div><div class="w3-col l2 m3 s4 w3-red">...</div>` — produces 25%/58.34%/16.66% on large, 50%/25%/25% on medium, and 33.3% each on small screens, from ONE set of markup. [S1]
|
||||
- Centered content container: `<body class="w3-content" style="max-width:500px">page content...</body>`. [S1]
|
||||
- Hiding on specific breakpoints: `<div class="w3-container w3-hide-small w3-red">...</div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **열 크기 클래스의 계단식 기본값**: small 클래스만 지정하면 모든 화면에 적용되지만, medium/large만 지정하면 small 화면에서는 자동으로 100%가 된다는 점이 명시적으로 설명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — l3/m6/s4처럼 화면별로 완전히 다른 비율을 하나의 마크업으로 표현하는 것이 반응형 그리드의 핵심 실전 활용이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
One column with different width fractions per screen tier (HTML):
|
||||
```html
|
||||
<div class="w3-row">
|
||||
<div class="w3-col l3 m6 s4 w3-green"><p>l3 m6 s4</p></div>
|
||||
<div class="w3-col l7 m3 s4 w3-dark-grey"><p>l7 m3 s4</p></div>
|
||||
<div class="w3-col l2 m3 s4 w3-red"><p>l2 m3 s4</p></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Cells]], [[W3CSS Rows]], [[W3CSS Dark Mode]]
|
||||
- **참조 맥락:** Grid & Flexbox 섹션의 마지막 — 다크모드(Dark Mode) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Responsive Fluid Grid — https://www.w3schools.com/w3css/w3css_responsive.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Responsive Fluid Grid" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-round
|
||||
title: "W3CSS Round"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-round", "w3-circle", "W3.CSS 둥근 모서리"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "round", "circle"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_round.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Round]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-round` and `w3-round-medium` are silent aliases — both apply the exact same 4px border-radius — following the same "plain name = medium tier" pattern already seen in `w3-card`/`w3-card-2`, meaning W3.CSS consistently treats the unqualified class name as shorthand for its own "medium" size variant across multiple class families. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Five rounding tiers** — `w3-round-small` (2px), `w3-round`/`w3-round-medium` (4px, aliases), `w3-round-large` (8px), `w3-round-xlarge` (16px), `w3-round-xxlarge` (32px). [S1]
|
||||
- **`w3-circle`** — renders content inside a perfect circle; works on both images and text containers. [S1]
|
||||
- **Nested circles** — a circle can contain another circle (e.g. a smaller red circle centered inside a larger green one) by stacking `w3-circle` on nested elements with different padding/sizing. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic rounding: `<div class="w3-round w3-teal">w3-round</div>`. [S1]
|
||||
- Circular image: `<img class="w3-circle" src="img_car.jpg" alt="Car">`. [S1]
|
||||
- Text inside a circle: `<div class="w3-padding-32 w3-red w3-circle w3-center"><h1>The w3-circle Class</h1></div>`. [S1]
|
||||
- Nested circle-in-circle: `<div class="w3-padding-32 w3-green w3-circle"><div class="w3-padding-32 w3-red w3-circle w3-center" style="width:55%"><p class="w3-xlarge">Hello<br>W3.CSS!</p></div></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **plain 이름 = medium 별칭 패턴**: w3-round와 w3-round-medium이 완전히 동일한 4px 값을 가진다는 점이 카드 클래스(w3-card=w3-card-2)와 동일한 명명 관습임을 보여준다. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 원 안에 원을 중첩시켜 텍스트를 배치하는 것이 시각적 강조 디자인의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Nested circles with centered text (HTML):
|
||||
```html
|
||||
<div class="w3-padding-32 w3-green w3-circle">
|
||||
<div class="w3-padding-32 w3-red w3-circle w3-center" style="width:55%">
|
||||
<p class="w3-xlarge">Hello<br>W3.CSS!</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Text]], [[W3CSS Borders]], [[W3CSS Padding]]
|
||||
- **참조 맥락:** 타이포그래피 섹션의 마지막 — 여백(Padding) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Round Classes — https://www.w3schools.com/w3css/w3css_round.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Round Classes" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: w3css-rows
|
||||
title: "W3CSS Rows"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-row", "w3-half", "w3-rest", "W3.CSS 행 시스템"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "rows", "responsive-grid"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_rows.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Rows]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Every named-fraction column class (`w3-half`, `w3-third`, `w3-quarter`, etc.) automatically collapses to 100% width below 601px — this single mobile-first rule is what makes a `w3-row` layout "responsive" without any media queries in the developer's own code, since the breakpoint logic is baked into the framework itself. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-row`** — no-padding row container. **`w3-row-padding`** — same, but with 8px left/right padding per column. [S1]
|
||||
- **Named fraction classes** — `w3-half` (50%), `w3-third` (33.33%), `w3-twothird` (66.66%), `w3-quarter` (25%), `w3-threequarter` (75%) — ALL collapse to 100% on screens under 601px. [S1]
|
||||
- **`w3-rest`** — occupies whatever width remains after other fixed/percent-width columns; MUST be the last element in the row's source order. [S1]
|
||||
- **`w3-col`** — defines one column in a 12-column grid, with a manually specified width (px, %, or plain, unstyled). [S1]
|
||||
- **Nested rows** — a `w3-row` can be placed entirely inside one column of an outer `w3-row`, for sub-layouts. [S1]
|
||||
- **`w3-stretch`** — removes left/right margins, useful for stretching a `w3-row-padding` row to the container's full edge-to-edge width. [S1]
|
||||
- **DP (density-independent pixels)** — W3.CSS's responsiveness thresholds (601px small/medium boundary, 993px medium/large) are based on DP, not raw physical resolution — e.g. an iPhone 6 at 750×1334px resolution is treated as 375×667 DP, i.e. a small screen. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Two-thirds/one-third split: `<div class="w3-row"><div class="w3-green w3-container w3-twothird"><h2>w3-twothird</h2></div><div class="w3-container w3-third"><h2>w3-third</h2></div></div>`. [S1]
|
||||
- Fixed-width + rest: `<div class="w3-row"><div class="w3-col" style="width:150px"><p>I am 150px</p></div><div class="w3-rest w3-green"><p>I am the rest</p></div></div>` — `w3-rest` must come last. [S1]
|
||||
- Nested row inside a half-column: a `w3-half` div containing its own inner `w3-row` with two more `w3-half` divs. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **w3-rest의 위치 제약**: w3-rest 클래스를 가진 요소는 반드시 소스코드상 마지막에 위치해야 한다는 점이 명시적으로 요구됨. [S1]
|
||||
- **DP 기반 반응형 임계값**: 실제 픽셀 해상도가 아니라 DP(밀도 독립 픽셀) 기준으로 화면 크기를 판단한다는 점이 아이폰 6 예시로 증명됨(750×1334 해상도가 375×667 DP의 작은 화면으로 취급). [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 고정폭 사이드바(150px)+나머지 영역(w3-rest)으로 구성된 레이아웃이 실전 활용의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Fixed-width column plus a "rest" column that must come last (HTML):
|
||||
```html
|
||||
<div class="w3-row">
|
||||
<div class="w3-col" style="width:150px"><p>I am 150px</p></div>
|
||||
<div class="w3-rest w3-green"><p>I am the rest</p></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Flex Items]], [[W3CSS Cells]], [[W3CSS Responsive]]
|
||||
- **참조 맥락:** 반응형 행/열 시스템 — 셀(Cells) 레이아웃 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Rows — https://www.w3schools.com/w3css/w3css_rows.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Rows" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: w3css-sidebar
|
||||
title: "W3CSS Sidebar"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-sidebar", "w3-overlay", "side navigation", "W3.CSS 사이드바"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "sidebar", "navigation"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_sidebar.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Sidebar]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
"Open over content" and "slide content to the right" are NOT the same interaction despite looking similar — the former only toggles the sidebar's own `display`, while the latter additionally animates the MAIN content's `margin-left`, meaning a push-style sidebar requires coordinating two separate elements' styles in the same JS function, not just revealing the sidebar itself. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-sidebar`** — the base class for a vertical, typically fixed-position side navigation panel. [S1]
|
||||
- **Six distinct sidebar interaction patterns** — always-visible, collapsible-responsive, overlay-over-part, overlay-over-all, slide-content-right, and right-side instead of left. [S1]
|
||||
- **`margin-left` reservation** — an always-visible sidebar requires the adjacent content div to have a matching `margin-left` (e.g. sidebar `width:25%` pairs with content `margin-left:25%`) so content doesn't render underneath it. [S1]
|
||||
- **`w3-collapse`** — combined with `w3-hide-large`, creates a sidebar that's always visible on large screens but hidden/toggle-controlled on small screens. [S1]
|
||||
- **`w3-overlay`** — adds a semi-transparent (50% opacity) black layer over page content while the sidebar is open, visually emphasizing the open sidebar without changing its position. [S1]
|
||||
- **Right-side placement** — simply swapping `style="left:0"` for `style="right:0"` (or omitting `left` and adding `right:0`) relocates the entire sidebar system to the opposite edge. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Always-visible sidebar with reserved content margin: `<div class="w3-sidebar w3-bar-block" style="width:25%">...</div><div style="margin-left:25%">... page content ...</div>`. [S1]
|
||||
- Slide-content-right (distinct from simple overlay): `function w3_open() { document.getElementById("main").style.marginLeft = "25%"; document.getElementById("mySidebar").style.width = "25%"; document.getElementById("mySidebar").style.display = "block"; }` — moves BOTH the sidebar and the main content. [S1]
|
||||
- Overlay effect: `<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>` shown/hidden alongside the sidebar via the same open/close functions. [S1]
|
||||
- Collapsible responsive sidebar: `<div class="w3-sidebar w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar"><button class="w3-bar-item w3-button w3-hide-large" onclick="w3_close()">Close ×</button>...</div>` paired with a `w3-main` content div using matching `margin-left`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **오버레이 vs 콘텐츠 밀기의 차이**: 단순 오버레이는 사이드바의 display만 바꾸지만, "슬라이드" 방식은 사이드바뿐 아니라 메인 콘텐츠의 marginLeft까지 함께 변경해야 한다는 구현 차이가 있음. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — w3-overlay로 사이드바 오픈 시 배경을 어둡게 처리해 시선을 집중시키는 패턴이 모바일 메뉴 UX의 대표 실전 기법이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Sidebar with a semi-transparent overlay over the page content (HTML/JS):
|
||||
```html
|
||||
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
|
||||
<button class="w3-bar-item w3-button" onclick="w3_close()">Close</button>
|
||||
<a href="#" class="w3-bar-item w3-button">Link 1</a>
|
||||
</div>
|
||||
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
|
||||
<script>
|
||||
function w3_open() {
|
||||
document.getElementById("mySidebar").style.display = "block";
|
||||
document.getElementById("myOverlay").style.display = "block";
|
||||
}
|
||||
function w3_close() {
|
||||
document.getElementById("mySidebar").style.display = "none";
|
||||
document.getElementById("myOverlay").style.display = "none";
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Navigation]], [[W3CSS Accordions]], [[W3CSS Dropdowns]], [[W3CSS Tabulators]]
|
||||
- **참조 맥락:** Navigation Components 섹션 마지막 — UI Components 섹션의 탭(Tabulators) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Sidebar — https://www.w3schools.com/w3css/w3css_sidebar.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Sidebar" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: w3css-slideshow
|
||||
title: "W3CSS Slideshow"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["carousel", "mySlides", "w3-display-container", "W3.CSS 슬라이드쇼"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "slideshow", "carousel"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_slideshow.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Slideshow]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The manual and automatic slideshow share IDENTICAL slide-hiding logic — the only real difference is WHAT triggers the index change: `plusDivs()` called by a button click (manual) versus `setTimeout(carousel, 2000)` recursively calling itself (automatic) — meaning a "carousel" is simply a slideshow whose advance function schedules its own next call instead of waiting for user input. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Shared-class slides** — every slide element uses the same class (`mySlides`), just like the Tabulators pattern; JS hides all, then shows one by index. [S1]
|
||||
- **`slideIndex` wraparound** — manual version resets to 1 if the index exceeds slide count, or to the last slide if it goes below 1, allowing infinite forward/backward cycling. [S1]
|
||||
- **Automatic carousel** — `carousel()` calls itself via `setTimeout(carousel, 2000)` at the end of its own execution, creating a self-perpetuating timer loop (distinct from `setInterval`, which the Progress Bar chapter used instead). [S1]
|
||||
- **HTML slides, not just images** — slides can be any HTML content (styled divs with text), not restricted to `<img>`. [S1]
|
||||
- **Caption + indicator overlays** — reuse `w3-display-container`/`w3-display-bottomleft` (from the Display chapter) for captions, and clickable `w3-badge` or numbered buttons as slide indicators via a `currentDiv(n)` function. [S1]
|
||||
- **Multiple independent slideshows per page** — achieved simply by giving each slideshow group a UNIQUE class name (`mySlides1`, `mySlides2`) so their JS loops don't interfere. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Manual slideshow core logic: `function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length}; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[slideIndex-1].style.display = "block"; }`. [S1]
|
||||
- Automatic carousel (self-scheduling timer): `function carousel() { ...hide all...; slideIndex++; if (slideIndex > x.length) {slideIndex = 1} x[slideIndex-1].style.display = "block"; setTimeout(carousel, 2000); }`. [S1]
|
||||
- Caption overlay: `<div class="w3-display-container mySlides"><img src="img_snowtops.jpg" style="width:100%"><div class="w3-display-bottomleft w3-container w3-padding-16 w3-black">French Alps</div></div>`. [S1]
|
||||
- Independent multi-slideshow class separation: `mySlides1` for one group, `mySlides2` for another, entirely separate `getElementsByClassName` calls. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **setTimeout 재귀 호출 vs setInterval**: 자동 슬라이드쇼는 setInterval이 아니라 carousel() 함수가 자기 자신을 setTimeout으로 다시 예약하는 재귀적 방식이라는 점이 프로그레스 바 챕터의 setInterval 방식과 대비됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 모달 챕터에서 언급된 "라이트박스(Lightbox)" 패턴이 슬라이드쇼를 모달 안에 내장하는 실전 조합 사례로 예고됨. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Self-scheduling automatic carousel using setTimeout recursion (JavaScript):
|
||||
```javascript
|
||||
var slideIndex = 0;
|
||||
carousel();
|
||||
function carousel() {
|
||||
var i;
|
||||
var x = document.getElementsByClassName("mySlides");
|
||||
for (i = 0; i < x.length; i++) {
|
||||
x[i].style.display = "none";
|
||||
}
|
||||
slideIndex++;
|
||||
if (slideIndex > x.length) {slideIndex = 1}
|
||||
x[slideIndex-1].style.display = "block";
|
||||
setTimeout(carousel, 2000); // Change image every 2 seconds
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Progress Bar]], [[W3CSS Tabulators]], [[W3CSS Modal]]
|
||||
- **참조 맥락:** 타이머 기반 동적 UI의 두 번째 사례 — 모달(Modal) 챕터에서 라이트박스 조합으로 재등장.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Slideshow — https://www.w3schools.com/w3css/w3css_slideshow.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Slideshow" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: w3css-tables
|
||||
title: "W3CSS Tables"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-table-all", "W3.CSS 테이블"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.89
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "tables"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_tables.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Tables]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-table-all` isn't a single style — it's shorthand for combining striped + bordered + hoverable all at once, meaning reaching for it saves writing three separate class names but also locks you into all three behaviors together, whereas manually combining `w3-striped w3-bordered` alone (without hoverable) requires spelling them out individually. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-table`** — base table container class. [S1]
|
||||
- **`w3-striped`** — zebra-striped rows. [S1]
|
||||
- **`w3-bordered`** — bottom border on each row. [S1]
|
||||
- **`w3-border`** — border AROUND the whole table (reusable on any element, not table-specific). [S1]
|
||||
- **`w3-table-all`** — combines striped + bordered + hoverable + centered into one class. [S1]
|
||||
- **`<thead>` for flipped stripe start** — wrapping the header row in `<thead>` with an explicit color changes which row the stripe pattern starts from. [S1]
|
||||
- **`w3-responsive`** — wraps a table to make it horizontally scrollable on small screens only (no effect on large screens). [S1]
|
||||
- **Size classes reused from typography** — `w3-tiny` through `w3-jumbo` apply directly to tables too. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Combined striped+bordered+border: `<table class="w3-table w3-striped w3-border">`. [S1]
|
||||
- All-in-one: `<table class="w3-table-all">`. [S1]
|
||||
- Column-specific alignment: `<th class="w3-center">Points</th>` or `<th class="w3-right-align">Points</th>` — alignment applied per-column, not per-table. [S1]
|
||||
- Responsive wrapper: `<div class="w3-responsive"><table class="w3-table-all">...</table></div>`. [S1]
|
||||
- Table as a card: `<table class="w3-table-all w3-card-4">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
소스에서 모순되는 정보는 발견되지 않음.
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 작은 화면에서만 가로 스크롤되는 반응형 테이블(w3-responsive)이 모바일 대응의 대표 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Responsive table that scrolls horizontally only on small screens (HTML):
|
||||
```html
|
||||
<div class="w3-responsive">
|
||||
<table class="w3-table-all">
|
||||
<!-- table content -->
|
||||
</table>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.89
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Alerts]], [[W3CSS Lists]], [[W3CSS Defaults]]
|
||||
- **참조 맥락:** 테이블 스타일링 — 리스트(Lists) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Tables — https://www.w3schools.com/w3css/w3css_tables.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Tables" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-tabulators
|
||||
title: "W3CSS Tabulators"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["navigation tabs", "tabbed content", "openCity", "W3.CSS 탭"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "tabs"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_tabulators.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Tabulators]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Tabbed navigation has NO dedicated `w3-tab*` class family at all — it's fully assembled from primitives already covered in earlier chapters (`w3-bar`/`w3-button` for the clickable tab strip, plain `display:none`/`display:block` toggling for content panels), demonstrating that W3.CSS deliberately favors composing existing utilities over adding single-purpose components for every UI pattern. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Same-class content panels** — all tab panels share one class (e.g. `city`), and JS loops over `getElementsByClassName` to hide all before showing the target one. [S1]
|
||||
- **`openCity()` pattern** — the canonical two-step JS: hide everything with the shared class, then set the target element's `display` to `block`. [S1]
|
||||
- **Active-tab highlighting** — mirrors the accordion pattern: loop over elements with a shared `tablink` class, strip a color class from all, then add it to `evt.currentTarget`. [S1]
|
||||
- **Vertical tabs** — swapping the tab strip's container to `w3-sidebar w3-bar-block` turns horizontal tabs into vertical ones with zero change to the panel-toggling JS. [S1]
|
||||
- **Closable tab content** — reuses the `w3-display-container`/`w3-display-topright` overlay-positioning pattern with an inline `onclick="this.parentElement.style.display='none'"`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Core toggle function: `function openCity(cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(cityName).style.display = "block"; }`. [S1]
|
||||
- Active-tab color highlighting variant: `tablinks[i].className = tablinks[i].className.replace(" w3-red", ""); ... evt.currentTarget.className += " w3-red";`. [S1]
|
||||
- Vertical tab strip: `<nav class="w3-sidebar w3-bar-block w3-light-grey" style="width:130px"><button class="w3-bar-item w3-button" onclick="openCity(event, 'London')">London</button>...</nav>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이미지 갤러리에 탭 전환 로직을 그대로 재사용하는 "Tabbed Image Gallery" 패턴이 openCity() 함수의 범용성을 보여주는 실전 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
The canonical tab-toggling JavaScript pattern reused throughout the chapter:
|
||||
```javascript
|
||||
function openCity(cityName) {
|
||||
var i;
|
||||
var x = document.getElementsByClassName("city");
|
||||
for (i = 0; i < x.length; i++) {
|
||||
x[i].style.display = "none";
|
||||
}
|
||||
document.getElementById(cityName).style.display = "block";
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Sidebar]], [[W3CSS Accordions]], [[W3CSS Pagination]]
|
||||
- **참조 맥락:** UI Components 섹션 첫 항목 — 페이지네이션(Pagination) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Navigation Tabs — https://www.w3schools.com/w3css/w3css_tabulators.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Navigation Tabs" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
id: w3css-tags
|
||||
title: "W3CSS Tags"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-tag", "signs", "w3-spin", "W3.CSS 태그"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.87
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "tags", "labels"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_tags.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Tags]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The source explicitly states there's "no real difference between a tag, a label, or a sign" in W3.CSS — all three UI concepts share ONE class (`w3-tag`), and a "sign" (like a giant warning placard) is simply the SAME rectangular tag scaled up with `w3-jumbo`, proving that visual role (small status label vs. big warning sign) is purely a matter of size, not a different component. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-tag`** — the ONLY class for tags/labels/signs; rectangular, black by default. [S1]
|
||||
- **Signs are just large tags** — no separate "sign" class exists; scaling up via `w3-size` classes turns a tag into a sign. [S1]
|
||||
- **`w3-spin`** — makes a tag rotate 360° continuously. [S1]
|
||||
- **CSS `transform:rotate()`** — used inline for a static rotation angle (not IE9-safe). [S1]
|
||||
- **Nested tags for road-sign borders** — an outer `w3-tag` provides the colored border frame, an inner `w3-tag` with `w3-border w3-border-white` creates the classic road-sign double-border look. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic tag: `<p>Status: <span class="w3-tag">Done</span></p>`. [S1]
|
||||
- Sign as an enlarged tag: `<div class="w3-tag w3-xxlarge w3-orange">London Zoo</div>`. [S1]
|
||||
- Road sign via nested tags: `<div class="w3-tag w3-round w3-green" style="padding:3px"><div class="w3-tag w3-round w3-green w3-border w3-border-white">Falcon Ridge Parkway</div></div>`. [S1]
|
||||
- Static rotation: `<span class="w3-tag w3-xlarge w3-padding w3-red" style="transform:rotate(-5deg)">STOP</span>`. [S1]
|
||||
- Continuous spin: `<span class="w3-tag w3-spin w3-large">STOP</span>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **transform:rotate()의 브라우저 제약**: IE9 이하에서는 회전 효과가 동작하지 않는다는 점이 명시됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이중 테두리로 도로 표지판을 흉내내는 중첩 태그 구조가 창의적 UI 디자인의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Road sign look via nested tag with a white inner border (HTML):
|
||||
```html
|
||||
<div class="w3-tag w3-round w3-green" style="padding:3px">
|
||||
<div class="w3-tag w3-round w3-green w3-border w3-border-white">
|
||||
Falcon Ridge Parkway
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.87
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Badges]], [[W3CSS Icons]], [[W3CSS Round]]
|
||||
- **참조 맥락:** 태그/라벨/사인 통합 클래스 — 아이콘(Icons) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Tags (Labels and Signs) — https://www.w3schools.com/w3css/w3css_tags.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Tags" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: w3css-text
|
||||
title: "W3CSS Text"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["text-shadow", "w3-opacity", "W3.CSS 텍스트 스타일"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.88
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "text"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_text.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Text]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3-opacity` is explicitly "designed to work with all colors" as a class, while `text-shadow` requires inline `style` attributes and doesn't have a dedicated W3.CSS class — meaning opacity effects are first-class framework citizens while shadow effects lean on raw CSS3, a distinction with a practical consequence: text-shadow doesn't work in IE9 and earlier, but nothing in the source suggests w3-opacity shares that limitation. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-left-align` / `w3-right-align`** — text alignment classes. [S1]
|
||||
- **`w3-center`** — centers block-level content (not just text). [S1]
|
||||
- **`w3-wide`** — applies wider letter-spacing. [S1]
|
||||
- **`w3-opacity`** — reduces text opacity, works with any color. [S1]
|
||||
- **Text shadow — CSS3, not a W3.CSS class** — applied via inline `style="text-shadow:1px 1px 0 #444"`; NOT supported in IE9 and earlier. [S1]
|
||||
- **Composability** — opacity, shadow, bold, and color classes can all stack on one element simultaneously. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Alignment: `<div class="w3-left-align"><p>Left aligned text.</p></div>` / `<div class="w3-right-align">...</div>`. [S1]
|
||||
- Centering: `<div class="w3-container w3-center"><h2>Centered Content</h2><img ...><p>Some centered text.</p></div>`. [S1]
|
||||
- Opacity: `<h2 class="w3-opacity">Text Opacity</h2>`. [S1]
|
||||
- Shadow (inline style, no dedicated class): `<h2 class="w3-blue" style="text-shadow:1px 1px 0 #444">Text Shadow</h2>`. [S1]
|
||||
- Stacked effects: `<h1 class="w3-text-yellow" style="text-shadow:1px 1px 0 #444"><b>Yellow Text + Shadow + Bold</b></h1>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **text-shadow의 브라우저 제약**: IE9 이하에서는 text-shadow가 동작하지 않는다는 점이 명시적으로 경고됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 투명도+그림자+굵게를 조합한 특수 텍스트 효과가 실전 활용의 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Combining opacity, color, shadow, and bold on one heading (HTML):
|
||||
```html
|
||||
<div class="w3-panel w3-blue">
|
||||
<h1 class="w3-text-orange" style="text-shadow:1px 1px 0 #444">
|
||||
<b>Orange Text + Shadow + Bold</b>
|
||||
</h1>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.88
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Fonts Google]], [[W3CSS Round]]
|
||||
- **참조 맥락:** 텍스트 시각 효과 — 둥근 모서리(Round) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Text — https://www.w3schools.com/w3css/w3css_text.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Text" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-tooltips
|
||||
title: "W3CSS Tooltips"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3-tooltip", "w3-text", "W3.CSS 툴팁"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.86
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "tooltip"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_tooltips.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Tooltips]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
W3.CSS tooltips require NO JavaScript whatsoever — the entire show/hide-on-hover behavior is pure CSS driven by the `w3-tooltip`/`w3-text` class pair, in sharp contrast to nearly every other interactive component in this tutorial series (dropdowns-click, accordions, tabs, modals, slideshows) which all depend on a JS toggle function. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **`w3-tooltip`** — the hoverable container (can be a `<p>`, `<div>`, or any element wrapping both the trigger text/image and the hidden tooltip text). [S1]
|
||||
- **`w3-text`** — the tooltip's hidden content, revealed via CSS when the parent `w3-tooltip` is hovered. [S1]
|
||||
- **No positioning by default** — the tooltip text appears inline unless explicitly given `position:absolute` via inline style, which then requires manual `left`/`bottom` placement. [S1]
|
||||
- **Full utility-class composability** — `w3-tag` (pill shape), any `w3-color`, `w3-round-*`, `w3-tiny`/`w3-small`/`w3-large`/`w3-xlarge`, and `w3-animate-opacity` all apply directly to the `w3-text` element with no special-case rules. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Basic tooltip (no JS): `<p class="w3-tooltip">London<span class="w3-text">(<em>9 million inhabitants</em>)</span>is the capital of England.</p>`. [S1]
|
||||
- Absolutely positioned tooltip: `<p class="w3-tooltip">London<span style="position:absolute;left:0;bottom:18px" class="w3-text w3-tag">9 million inhabitants</span>is the capital of England.</p>`. [S1]
|
||||
- Image tooltip (text can appear before OR after the image inside the same container): `<div class="w3-tooltip"><img src="img_car.jpg" alt="Car"><p class="w3-text">A car is a...</p></div>`. [S1]
|
||||
- Colored, rounded, animated tag-style tooltip combining multiple utilities at once: `<span class="w3-text w3-tag w3-red w3-round-xlarge w3-animate-opacity">9 million inhabitants</span>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **JS 불필요라는 예외적 특성**: 이 챕터의 컴포넌트만 순수 CSS 호버로 동작하며, 이전 챕터들(드롭다운클릭/아코디언/탭/모달/슬라이드쇼)은 모두 JavaScript 토글 함수가 필요했다는 점이 대비됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 여러 유틸리티 클래스(w3-tag+색상+둥근모서리+애니메이션)를 하나의 span에 동시 결합하는 것이 W3.CSS 스타일 조합의 실전 마무리 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A pure-CSS tooltip requiring no JavaScript (HTML/CSS):
|
||||
```html
|
||||
<p class="w3-tooltip">London
|
||||
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
|
||||
is the capital of England.
|
||||
</p>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.86
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Modal]], [[W3CSS Tags]], [[W3CSS Code]]
|
||||
- **참조 맥락:** UI Components 섹션 마지막 — Code & Miscellaneous 섹션의 코드(Code) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Tooltips — https://www.w3schools.com/w3css/w3css_tooltips.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Tooltips" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: w3css-trends
|
||||
title: "W3CSS Trends"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["flat design", "material design", "mobile first", "W3.CSS 웹디자인 트렌드"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.82
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "design-trends"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_trends.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Trends]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The source frames flat design's central usability problem as ambiguous CLICKABILITY ("what is the difference between an image and a clickable button?") — and shows "Almost Flat" (Flat 2.0) emerged specifically to solve that problem by re-adding depth cues (shadows, hover effects) WITHOUT fully reverting to skeuomorphism, meaning design trends here are framed as successive fixes to specific usability regressions, not just aesthetic fashion cycles. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Flat Design** — originated with Windows Phone 7/Windows 8 (2010), adopted by Apple iOS 7 (2013); uses bold marketing/road-sign colors; core weakness is unclear clickability. [S1]
|
||||
- **Almost Flat (Flat 2.0)** — adds back depth via shadows and hover effects while keeping flat design's bright colors and simplicity. [S1]
|
||||
- **Material Design** — Google (2014); paper-and-ink metaphor with realistic shadows and hover effects; the source frames it as the successor once "flat" and "almost flat" both peaked. [S1]
|
||||
- **Cards** — a general-purpose content structure (image + text on an equal plane) usable at any size, with or without shadows. [S1]
|
||||
- **Readable Typography** — flat design correlates with larger letter/line spacing and bigger font sizes to prioritize reader attention. [S1]
|
||||
- **Mobile First** — a reversal of historical practice: design for mobile FIRST, then add responsive behavior for desktop, rather than the old desktop-first-then-adapt approach. [S1]
|
||||
- **Hero Images** — a large front-page banner image (static or rotating) meant to present a site's single most important message. [S1]
|
||||
- **Single Page design** — replacing multi-page click navigation with vertical scrolling on one page, a technique that spread from social networks to general sites. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Full-screen input trend: modern signup/login forms increasingly use a full-screen overlay or modal rather than a small embedded form section or page redirect. [S1]
|
||||
- 50/50 responsive layout: shows two content panels side-by-side on large screens, collapsing to one panel per screen on narrow (mobile) screens — cited as an easy way to achieve mobile-first responsive design. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **플랫 디자인의 근본 약점**: 어떤 영역이 클릭 가능한지 구분하기 어렵다는 문제가 명시적으로 지적되며, 이것이 Almost Flat과 Material Design 등장의 직접적 동기로 설명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 카드(Cards)/타이포그래피/히어로 이미지 등 이 챕터에서 소개된 트렌드 요소들이 실제로 W3.CSS 클래스(w3-card, w3-jumbo 등)로 이미 구현되어 있다는 점에서 이론과 실전이 직결된 챕터다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A card component embodying the "cards" design trend (HTML/CSS):
|
||||
```html
|
||||
<div class="w3-card-4" style="width:50%">
|
||||
<img src="img_avatar.jpg" style="width:100%">
|
||||
<div class="w3-container">
|
||||
<h4><b>John</b></h4>
|
||||
<p>Architect and engineer</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Cards]], [[W3CSS Filters]], [[W3CSS Case]], [[W3CSS Material]]
|
||||
- **참조 맥락:** 디자인 트렌드 개관 챕터 — 실전 사이트 구축(Case Study)과 머티리얼 디자인(Material) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Trends — https://www.w3schools.com/w3css/w3css_trends.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Trends" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-validation
|
||||
title: "W3CSS Validation"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["CSS validation", "vendor prefixes", "W3.CSS 검증"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "validation", "vendor-prefixes"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_validation.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Validation]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
Running W3.CSS through the official W3C CSS Validator will legitimately produce WARNINGS (not just clean output) precisely BECAUSE W3.CSS deliberately uses vendor-prefixed properties (`-webkit-`, `-moz-`, `-o-`, `-ms-`) to support older browsers — meaning "validation warnings" here are an intentional backward-compatibility tradeoff, not a defect to be fixed. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **W3C CSS Validation Service** — an official W3C tool for checking CSS correctness against CSS1–CSS4 specs. [S1]
|
||||
- **Vendor extensions** — non-standard, browser-specific property prefixes used to simulate newer CSS features before they were formally standardized/supported everywhere. [S1]
|
||||
- **Prefix-to-browser mapping** — `-webkit-` (Chrome, Safari, Opera), `-moz-` (Firefox), `-o-` (old Opera), `-ms-` (Edge/IE). [S1]
|
||||
- **Warnings as intentional tradeoff** — the validator flags vendor-prefixed rules as warnings, but W3.CSS retains them anyway to maximize legacy-browser compatibility, planning to remove them only once browser vendors themselves phase out prefix requirements. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- The four vendor prefix families are listed as a direct browser-compatibility mapping: `-webkit-` / `-moz-` / `-o-` / `-ms-`. [S1]
|
||||
- The source frames prefix removal as browser vendors' own responsibility ("Browser vendors are working to stop using prefixes in future browser versions"), not something W3.CSS controls unilaterally. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **검증 경고 = 결함이 아님**: W3C 검증 도구가 벤더 확장 프리픽스에 대해 경고를 내더라도, 이는 구형 브라우저 지원을 위한 의도적 선택이지 수정해야 할 버그가 아니라는 점이 명시적으로 설명됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 벤더 프리픽스별 브라우저 매핑표가 실전에서 CSS 호환성 이슈를 진단할 때 참조 자료로 활용 가능하다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Vendor-prefixed CSS property illustrating the backward-compatibility tradeoff:
|
||||
```css
|
||||
.example {
|
||||
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
||||
-moz-transform: rotate(45deg); /* Firefox */
|
||||
-ms-transform: rotate(45deg); /* Edge, IE */
|
||||
transform: rotate(45deg); /* Standard */
|
||||
}
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Material]], [[W3CSS Versions]]
|
||||
- **참조 맥락:** 프레임워크 내부 구현 방침 설명 — 버전 히스토리(Versions) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Validation — https://www.w3schools.com/w3css/w3css_validation.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Validation" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: w3css-versions
|
||||
title: "W3CSS Versions"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3pro.css", "W3.CSS Pro", "W3.CSS 버전"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "versions", "theming"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_versions.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Versions]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
"W3.CSS Pro" (`w3pro.css`) is smaller and faster not because of general minification, but specifically because it ships with NO colors defined at all — every `w3-<color>` rule is stripped out — meaning it's designed as a blank canvas for developers who want to supply their own complete color system (inline `<style>` overrides, a theme file, or a color library) instead of using W3.CSS's built-in palette. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Version history** — 3.01 (Dec 2017) → 4.01 (Nov 2018) → 4.15 (Dec 2020) → 5.01 (Mar 2025, latest). [S1]
|
||||
- **W3.CSS Pro (`w3pro.css`)** — a leaner variant with all color classes removed, meant to pair with custom theming rather than the default palette. [S1]
|
||||
- **Three ways to add colors to Pro** — (1) inline `<style>` block overriding e.g. `.w3-amber`, (2) linking a pre-made theme file (`w3-theme-amber.css`), or (3) linking an entire color library (`w3-colors-2018.css`, `w3-colors-2017.css`). [S1]
|
||||
- **`!important` in theme overrides** — theme color definitions use `!important` (e.g. `.w3-amber{color:#000!important;background-color:#ffc107!important}`) to guarantee they override any conflicting base styles. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Custom inline color override for Pro: `<style>.w3-amber{color:#000!important;background-color:#ffc107!important}</style>`. [S1]
|
||||
- Loading a prebuilt theme file: `<link rel="stylesheet" href="/lib/w3-theme-amber.css">`. [S1]
|
||||
- Loading an entire color library: `<link rel="stylesheet" href="/lib/w3-colors-2018.css">`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **Pro 버전의 "가벼움"의 실제 원인**: 단순 압축이 아니라 색상 클래스 전체를 제거했기 때문에 더 작고 빠르다는 점이 명시적으로 설명됨 — 커스텀 색상/테마를 직접 공급하는 개발자를 위한 설계. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — Pro 버전 + 커스텀 테마 파일 조합이 다음 챕터(Mobile App 구축)에서 실제 앱 색상 테마 적용 사례로 이어진다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
Defining a custom color for the colorless W3.CSS Pro build (HTML/CSS):
|
||||
```html
|
||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
|
||||
<style>
|
||||
.w3-amber{color:#000!important;background-color:#ffc107!important}
|
||||
</style>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Validation]], [[W3CSS Mobile]], [[W3CSS Color Themes]]
|
||||
- **참조 맥락:** Pro 버전과 커스텀 테마 시스템 소개 — 모바일 앱 구축(Mobile) 챕터로 직접 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — W3.CSS Versions — https://www.w3schools.com/w3css/w3css_versions.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "W3.CSS Versions" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: w3css-web
|
||||
title: "W3CSS Web Building"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["web building crash course", "web building secrets", "W3.CSS 웹 빌딩"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.83
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "web-building"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_web.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Web Building]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The crash course's core productivity claim rests on REUSING one skeleton, one stylesheet, and one script across EVERY project ("Always use the same HTML Skeleton... Style Sheet... JavaScript... Layout Plan") — meaning speed comes not from writing less code per project, but from never re-deriving the starting boilerplate at all, turning web development into filling in a fixed template rather than authoring from scratch each time. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **5-page crash course structure** — HTML Skeleton → Style Sheet → JavaScript → Layout → Building a full site, each page building directly on the previous one's output. [S1]
|
||||
- **"4 Web Building Secrets"** — the source's own framing: reuse the same skeleton/stylesheet/JS/layout-plan across all projects rather than starting fresh each time. [S1]
|
||||
- **Commitment framing** — explicitly discourages "wasting time on other subjects/tutorials" during the crash course, positioning it as an intensive few-day exercise rather than casual reading. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- The chapter is structured as a literal roadmap of the remaining 4 pages: "A HTML Skeleton," "Using a Style Sheet," "Using JavaScript," "Creating a Layout," "Building a Web Site." [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 동일한 스켈레톤/스타일시트/스크립트를 매 프로젝트에 재사용하는 습관이 이 크래시코스 전체가 가르치는 실전 워크플로우의 핵심이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
None — this is a conceptual overview page pointing to the next 4 chapters, with no standalone code example.
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.83
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Color Themes]], [[W3CSS Web HTML]]
|
||||
- **참조 맥락:** Web Building 크래시코스 개관 — HTML 스켈레톤(Web HTML) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — Web Building — https://www.w3schools.com/w3css/w3css_web.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "Web Building" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,71 @@
|
||||
---
|
||||
id: w3css-web-css
|
||||
title: "W3CSS Web CSS Stylesheet"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["using a stylesheet", "responsive images with w3-third", "W3.CSS 스타일시트 연결"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "stylesheet", "responsive"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_web_css.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Web CSS Stylesheet]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
This chapter shows that "becoming responsive" requires NOTHING beyond the skeleton's single empty `<link>` tag being filled in — the exact same three-image `w3-row`/`w3-third` markup that would be static/unresponsive as plain HTML instantly becomes responsive the moment `w3.css` is linked, meaning the ONLY thing separating a static layout from a responsive one in this crash course is which stylesheet URL fills that one blank. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Activating the skeleton** — filling the previous chapter's empty `<link rel="stylesheet" href="">` with `https://www.w3schools.com/w3css/5/w3.css`. [S1]
|
||||
- **Class-driven styling** — once linked, elements only become styled once given a `w3-*` class (e.g. `w3-container w3-black`); linking alone changes nothing visually until classes are added. [S1]
|
||||
- **Responsive image row** — `w3-row` + three `w3-third` columns, each containing a 100%-width image, automatically responsive with zero additional CSS. [S1]
|
||||
- **Business card composition** — `w3-card` + fixed pixel width + a centered `w3-container` combines earlier Cards-chapter knowledge into a concrete "advanced" milestone example. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Completing the skeleton's stylesheet link: `<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">`. [S1]
|
||||
- Styling requires an explicit class even after linking: `<div class="w3-container w3-black"><h1>This is a Heading</h1></div>`. [S1]
|
||||
- Responsive 3-image row: `<div class="w3-row"><div class="w3-third"><img src="img_avatar.png" style="width:100%"></div><div class="w3-third">...</div><div class="w3-third">...</div></div>`. [S1]
|
||||
- Business card: `<div class="w3-card" style="width:200px"><img src="img_avatar.png" style="width:100%"><div class="w3-container w3-center"><p class="w3-xlarge">John Doe</p><p>Engineer</p></div></div>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 3개 이미지를 w3-third로 나란히 배치하는 것만으로 반응형 레이아웃을 얻는 패턴이 스켈레톤에 스타일시트를 연결하는 실전 첫걸음이다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A responsive 3-column image row requiring zero extra CSS once w3.css is linked (HTML):
|
||||
```html
|
||||
<div class="w3-row">
|
||||
<div class="w3-third"><img src="img_avatar.png" style="width:100%"></div>
|
||||
<div class="w3-third"><img src="img_avatar.png" style="width:100%"></div>
|
||||
<div class="w3-third"><img src="img_avatar.png" style="width:100%"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Web HTML]], [[W3CSS Cards]], [[W3CSS Web JavaScript]]
|
||||
- **참조 맥락:** 스켈레톤에 스타일시트 연결하기 — JavaScript 라이브러리 연결(Web JavaScript) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — Using a CSS Stylesheet — https://www.w3schools.com/w3css/w3css_web_css.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "Using a CSS Stylesheet" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: w3css-web-html
|
||||
title: "W3CSS Web HTML Skeleton"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["html skeleton", "reusable boilerplate", "W3.CSS HTML 스켈레톤"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "html-boilerplate"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_web_html.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Web HTML Skeleton]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The source explicitly claims "head tags are not needed in HTML" and shows a skeleton with `<meta>`, `<title>`, `<link>`, `<style>`, `<script>` all placed directly under `<html>` with no `<head>` wrapper — treating "everything before `<body>`" as the head implicitly, which is valid HTML5 parsing behavior but a deliberately minimal/unconventional style choice most tutorials wouldn't teach as the default skeleton. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **The reusable skeleton** — `<!DOCTYPE html>`, `<html lang="en">`, `<meta charset="UTF-8">`, `<title>`, `<meta name="viewport">`, `<link rel="stylesheet">`, `<style></style>`, `<script src=""></script>`, then `<body>`. [S1]
|
||||
- **No explicit `<head>` tag** — the skeleton omits `<head>`/`</head>` entirely, relying on the browser's implicit head-content parsing rule. [S1]
|
||||
- **Viewport meta tag** — `<meta name="viewport" content="width=device-width,initial-scale=1">` is called out specifically as what "makes the page look good on all screen sizes." [S1]
|
||||
- **Div-wrapping habit** — the chapter explicitly recommends "packing" HTML sections in `<div>` elements and preparing to give each a class name, anticipating the next chapter's CSS styling step. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- The complete reusable skeleton: `<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><title>Page Title</title><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="stylesheet" href=""><style></style><script src=""></script><body><img src="img_la.jpg" alt="LA" style="width:100%"><div class=""><h1>This is a Heading</h1><p>This is a paragraph.</p></div></body></html>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **head 태그 생략의 의도적 선택**: "HTML에서 head 태그는 필요 없다"는 문장과 함께 head 없이 메타/타이틀/링크/스타일/스크립트를 바로 html 아래 배치하는 것이 이 스켈레톤의 의도적 특징임이 확인됨. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 이 스켈레톤을 모든 프로젝트의 시작점으로 그대로 재사용하는 것이 실전 워크플로우의 핵심이다(다음 챕터에서 stylesheet/script src를 채워 넣는 방식으로 확장). [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
The reusable HTML skeleton meant to be copied verbatim into every new project:
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="UTF-8">
|
||||
<title>Page Title</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="stylesheet" href="">
|
||||
<style>
|
||||
</style>
|
||||
<script src=""></script>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Web]], [[W3CSS Web CSS]]
|
||||
- **참조 맥락:** 재사용 가능한 HTML 스켈레톤 — 스타일시트 연결(Web CSS) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — Using an HTML Skeleton — https://www.w3schools.com/w3css/w3css_web_html.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "Using an HTML Skeleton" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,70 @@
|
||||
---
|
||||
id: w3css-web-javascript
|
||||
title: "W3CSS Web JavaScript Library"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["w3.js", "w3.slideshow", "w3.hide", "w3.show", "W3.CSS JS 라이브러리 연결"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.84
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "javascript", "w3js"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_web_javascript.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Web JavaScript Library]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
`w3.js` collapses the manual slideshow logic from the earlier Slideshow chapter (a multi-line `showDivs`/`plusDivs` function pair looping over `getElementsByClassName`) into a SINGLE function call, `w3.slideshow(".nature", 1500)` — showing that the crash course's final JS step is really "replace the hand-written functions you learned earlier with the shipped library's one-liner equivalents" once you're ready to build production pages quickly. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Activating the skeleton's script tag** — filling `<script src=""></script>` with `https://www.w3schools.com/lib/w3.js`. [S1]
|
||||
- **`w3.slideshow(selector, interval)`** — a single-call replacement for the manual `carousel()`/`setTimeout` slideshow pattern from the Slideshow chapter. [S1]
|
||||
- **`w3.hide(selector)` / `w3.show(selector)`** — one-call show/hide helpers replacing manual `style.display = "none"/"block"` toggling used throughout Tabulators, Accordions, and Dropdowns chapters. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- Completing the skeleton's script link: `<script src="https://www.w3schools.com/lib/w3.js"></script>`. [S1]
|
||||
- One-line slideshow activation: `<img class="nature" src="img_snowtops.jpg" width="100%"><img class="nature" src="img_mountains.jpg" width="100%"><img class="nature" src="img_nature.jpg" width="100%"><script>w3.slideshow(".nature", 1500);</script>` — no manual index-tracking JS required. [S1]
|
||||
- Show/hide via library calls: `<button onclick="w3.hide('#London')">Hide London</button><button onclick="w3.show('#London')">Show London</button>`. [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- **수동 구현 vs 라이브러리 함수의 관계**: 이 챕터의 w3.slideshow/w3.hide/w3.show는 앞서 Slideshow/Tabulators/Accordions 챕터에서 직접 작성했던 JS 로직을 한 줄 함수 호출로 대체한 것이라는 점이 확인됨 — 원리를 먼저 배우고 나중에 축약형을 쓰는 학습 순서. [S1]
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — w3.slideshow 한 줄 호출이 앞서 배운 수동 캐러셀 구현을 실전에서 대체하는 대표 사례다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
A slideshow activated with one library call instead of manual JS (HTML/JS):
|
||||
```html
|
||||
<img class="nature" src="img_snowtops.jpg" width="100%">
|
||||
<img class="nature" src="img_mountains.jpg" width="100%">
|
||||
<img class="nature" src="img_nature.jpg" width="100%">
|
||||
<script>
|
||||
w3.slideshow(".nature", 1500);
|
||||
</script>
|
||||
```
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.84
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Web CSS]], [[W3CSS Slideshow]], [[W3CSS Web Layout]]
|
||||
- **참조 맥락:** JS 라이브러리로 슬라이드쇼/토글 단순화 — 페이지 레이아웃(Web Layout) 챕터로 이어짐.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — Using a JavaScript Library — https://www.w3schools.com/w3css/w3css_web_javascript.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "Using a JavaScript Library" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
id: w3css-web-layout
|
||||
title: "W3CSS Web Page Layout"
|
||||
category: "Programming_Language"
|
||||
status: "draft"
|
||||
verification_status: "conceptual"
|
||||
canonical_id: ""
|
||||
aliases: ["layout draft", "page layout planning", "W3.CSS 페이지 레이아웃"]
|
||||
duplicate_of: ""
|
||||
source_trust_level: "B"
|
||||
confidence_score: 0.82
|
||||
created_at: 2026-07-04
|
||||
updated_at: 2026-07-04
|
||||
review_reason: ""
|
||||
merge_history: []
|
||||
tags: ["w3css", "css-framework", "w3schools", "layout", "planning"]
|
||||
raw_sources: ["https://www.w3schools.com/w3css/w3css_web_layout.asp"]
|
||||
applied_in: []
|
||||
github_commit: ""
|
||||
---
|
||||
|
||||
# [[W3CSS Web Page Layout]]
|
||||
|
||||
## 🎯 한 줄 통찰 (One-line insight)
|
||||
The final crash-course step before actually building a site is explicitly NON-CODE — a hand-drawn paper sketch (navigation bar, slideshow, header, three-column description+photo grid, contact info) — meaning the crash course deliberately positions PLANNING as a distinct, code-free step that must happen before any HTML/CSS/JS is written, not something to figure out ad hoc while coding. [S1]
|
||||
|
||||
## 🧠 핵심 개념 (Core concepts)
|
||||
- **Layout draft as a discrete pre-coding step** — the source explicitly recommends drawing the layout "on a piece of paper" before writing any code. [S1]
|
||||
- **A concrete example structure** — navigation bar → slideshow → header → three description/photo pairs (mapping naturally to a `w3-row` + `w3-third` grid from the CSS chapter) → contact info footer. [S1]
|
||||
- **Direct continuity to prior chapters** — the sketched sections map onto classes already learned: navigation bar → `w3-bar`, slideshow → `w3.slideshow()`, three-column description/photo → `w3-row`/`w3-third`. [S1]
|
||||
|
||||
## 📖 세부 내용 (Details)
|
||||
- The example layout draft's section order: Navigation bar, Slideshow, Header, three Description blocks paired with three Photo blocks (side-by-side, implying a 3-column grid), Contact Info (Email/Address/Phone). [S1]
|
||||
|
||||
## ⚖️ 모순 및 업데이트 (Contradictions & updates)
|
||||
- 현재까지 발견된 모순 사항 없음 (No contradictions found in available sources).
|
||||
|
||||
## 🛠️ 적용 사례 (Applied in summary)
|
||||
현재 발견된 실제 적용 사례가 없습니다 — 종이에 레이아웃을 먼저 스케치한 뒤 이를 w3-row/w3-third 같은 이미 배운 클래스로 옮기는 순서가 이 크래시코스가 가르치는 실전 사이트 구축 워크플로우의 마지막 단계다. [S1]
|
||||
|
||||
## 💻 코드 패턴 (Code patterns)
|
||||
None — this chapter is a paper-sketch planning exercise with no HTML/CSS/JS code example; the drafted layout is implemented using classes from earlier chapters (`w3-bar`, `w3-row`/`w3-third`, `w3.slideshow()`).
|
||||
|
||||
## ✅ 검증 상태 및 신뢰도
|
||||
- **상태:** draft
|
||||
- **검증 단계:** conceptual
|
||||
- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
|
||||
- **신뢰 점수:** 0.82
|
||||
- **중복 검사 결과:** 신규 생성 (New discovery)
|
||||
|
||||
## 🔗 지식 그래프 (Knowledge Graph)
|
||||
- **상위/루트:** [[W3.CSS Tutorial]]
|
||||
- **관련 개념:** [[W3CSS Web JavaScript]], [[W3CSS Bars]], [[W3CSS Web CSS]]
|
||||
- **참조 맥락:** Web Building 크래시코스이자 Topic_W3CSS 전체의 마지막 챕터 — 종이 레이아웃 계획을 앞서 배운 모든 클래스로 구현하는 종합 마무리.
|
||||
|
||||
## 📚 출처 (Sources)
|
||||
- [S1] W3Schools — Page Layout — https://www.w3schools.com/w3css/w3css_web_layout.asp
|
||||
|
||||
## 📝 변경 이력 (Change history)
|
||||
- 2026-07-04: Initial draft synthesized from the W3Schools "Page Layout" page (Astra wiki-curation, P-Reinforce v3.1 format).
|
||||
Reference in New Issue
Block a user