docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
2026-07-05 00:10:59 +09:00
parent a397bc4720
commit 1cfd3bbb56
1495 changed files with 68534 additions and 27 deletions
@@ -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">&times;</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).