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

W3Schools 튜토리얼을 P-Reinforce v3.1 포맷으로 위키화(영어 본문, 한/영 섹션 헤더). - Topic_HTML: 59문서 (튜토리얼+예제, 레퍼런스/메타 제외) - Topic_CSS: 190문서 (메인 + Advanced/Flexbox/Grid/RWD 전체) - Topic_JavaScript: 120문서 (코어 언어; Temporal/DOM상세/BOM/WebAPI/AJAX/jQuery/Graphics 등은 후속) 각 폴더 00_INDEX.md(MOC) 포함. 코드 verbatim, 미확인분은 "Not found in source" 표기. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-23 19:21:18 +09:00
parent 8957890d13
commit 9609c04755
379 changed files with 54618 additions and 6 deletions
@@ -0,0 +1,257 @@
+---
+id: css-image-modal
+title: "CSS Image Modal"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["modal image", "image lightbox", "popup image", "responsive modal", "image gallery modal"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.9
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["css", "web", "frontend", "w3schools", "images", "modal"]
+raw_sources: ["https://www.w3schools.com/css/css3_images_modal.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Image Modal]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+A modal image (lightbox) lets users click a gallery thumbnail to open a larger version in a full-screen overlay, built from a hidden fixed-position modal that JavaScript shows and hides. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **Modal overlay** — the modal is a full-viewport layer (`position: fixed`, `width: 100%`, `height: 100%`) hidden by default with `display: none` and shown via JavaScript. [S1]
+- **Dim backdrop** — a semi-transparent background `rgba(0, 0, 0, 0.8)` and high `z-index: 1000` darken the page behind the enlarged image. [S1]
+- **Zoom-in animation** — a `@keyframes zoomIn` animation scales the modal content from `0.6` to `1` when it opens. [S1]
+- **Close control** — a `.close` "×" (`&times;`) element in the top-right corner closes the modal. [S1]
+- **Caption** — a `.caption` element shows the image's label, populated from the trigger's `onclick` argument. [S1]
+- **JavaScript control** — `openModal()` sets `display: "flex"` and adds a `show` class; `closeModal()` removes the class and hides the modal after a 300ms delay. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Hidden fixed layer toggled by JS** — keep the modal `display: none`, then switch to a flex layout on demand to center the enlarged content. [S1]
+- **Class-driven transition + timed teardown** — add a `show` class to animate in, and on close remove it and use `setTimeout` so the exit transition finishes before `display: none`. [S1]
+- **Data passed via onclick args** — the gallery image's `onclick` passes the modal id and caption text directly into the handler. [S1]
+
+## 📖 세부 내용 (Details)
+The W3Schools example builds a responsive modal image gallery in a single HTML document combining CSS and JavaScript. [S1]
+
+```html
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<style>
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+h1 {
+  text-align: center;
+  padding: 20px;
+}
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  padding: 0 15px;
+}
+
+.gallery-item {
+  position: relative;
+  width: calc(25% - 20px);
+  height: auto;
+  margin: 10px;
+  cursor: pointer;
+  transition: transform 0.5s ease;
+}
+
+.gallery-item:hover {
+  transform: scale(1.1);
+}
+
+/* The Modal (background) */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  align-items: center;
+  justify-content: center;
+  transition: opacity 0.5s ease;
+}
+
+/* Modal content (image) */
+.modal-content {
+  position: relative;
+  width: 90%;
+  height: auto;
+  max-width: 90%;
+  max-height: 90%;
+  border-radius: 5px;
+  overflow: hidden;
+  animation: zoomIn 0.5s;
+}
+
+@keyframes zoomIn {
+  from {transform: scale(0.6);}
+  to {transform: scale(1);}
+}
+
+.modal.show {
+  display: flex;
+  opacity: 1;
+}
+
+/* Close button */
+.close {
+  position: absolute;
+  top: 10px;
+  right: 15px;
+  color: #ffffff;
+  font-size: 35px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: transform 0.3s;
+}
+
+/* Caption of modal image */
+.caption {
+  position: absolute;
+  bottom: 15px;
+  width: 100%;
+  text-align: center;
+  color: #ffffff;
+  font-size: 24px;
+}
+
+@media screen and (max-width: 768px) {
+  .gallery-item {
+    width: calc(50% - 20px);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .gallery-item {
+    width: calc(100% - 20px);
+  }
+}
+</style>
+</head>
+<body>
+
+<h1>Responsive Modal Images</h1>
+
+<div class="gallery">
+  <img src="img_5terre.jpg" alt="Cinque Terre" class="gallery-item" onclick="openModal('modal1', 'Cinque Terre')">
+  <img src="img_forest.jpg" alt="Forest" class="gallery-item" onclick="openModal('modal2', 'Forest')">
+  <img src="img_lights.jpg" alt="Northern Lights" class="gallery-item" onclick="openModal('modal3', 'Nothern Lights')">
+  <img src="img_mountains.jpg" alt="Mountains" class="gallery-item" onclick="openModal('modal4', 'Mountains')">
+</div>
+
+<div id="modal1" class="modal">
+  <span class="close" onclick="closeModal('modal1')">&times;</span>
+  <img src="img_5terre.jpg" alt="Cinque Terre" class="modal-content">
+  <div class="caption"></div>
+</div>
+
+<div id="modal2" class="modal">
+  <span class="close" onclick="closeModal('modal2')">&times;</span>
+  <img src="img_forest.jpg" alt="Forest" class="modal-content">
+  <div class="caption"></div>
+</div>
+
+<div id="modal3" class="modal">
+  <span class="close" onclick="closeModal('modal3')">&times;</span>
+  <img src="img_lights.jpg" alt="Northern Lights" class="modal-content">
+  <div class="caption"></div>
+</div>
+
+<div id="modal4" class="modal">
+  <span class="close" onclick="closeModal('modal4')">&times;</span>
+  <img src="img_mountains.jpg" alt="Mountains" class="modal-content">
+  <div class="caption"></div>
+</div>
+
+<script>
+function openModal(modalId, caption) {
+  let modal = document.getElementById(modalId);
+  modal.style.display = "flex";
+  modal.classList.add("show");
+  let message = modal.querySelector(".caption");
+  message.innerText = caption;
+}
+
+function closeModal(modalId) {
+  let modal = document.getElementById(modalId);
+  modal.classList.remove("show");
+  setTimeout(function () {
+    modal.style.display = "none";
+    modal.querySelector(".caption").innerText = "";
+  }, 300);
+}
+</script>
+
+</body>
+</html>
+```
+
+**Key components**
+- **Modal container** — `display: none` initially, `position: fixed`, `z-index: 1000`, dark semi-transparent background `rgba(0, 0, 0, 0.8)`. [S1]
+- **Animation** — zoom effect defined with `@keyframes zoomIn` scaling from `0.6` to `1`. [S1]
+- **JavaScript** — `openModal()` retrieves the element by id, sets display to `flex`, adds the `show` class, and populates the caption; `closeModal()` removes the `show` class and hides the modal after a 300ms delay. [S1]
+- **Responsive design** — media queries adjust gallery items from `25%` width (desktop) to `50%` (tablets, ≤768px) to `100%` (mobile, ≤480px). [S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+The full responsive modal-image gallery above is the source's applied case, integrating a flex gallery, a fixed overlay modal, a zoom animation, a close button, captions, and the open/close JavaScript. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Toggle-by-class modal control (language: JavaScript):
+```javascript
+function openModal(modalId, caption) {
+  let modal = document.getElementById(modalId);
+  modal.style.display = "flex";
+  modal.classList.add("show");
+  modal.querySelector(".caption").innerText = caption;
+}
+
+function closeModal(modalId) {
+  let modal = document.getElementById(modalId);
+  modal.classList.remove("show");
+  setTimeout(function () {
+    modal.style.display = "none";
+    modal.querySelector(".caption").innerText = "";
+  }, 300);
+}
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.90
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Image Hover]], [[CSS Image Styling]], [[CSS Animations]], [[CSS Position]]
+- **참조 맥락:** Referenced when building an image lightbox or click-to-enlarge gallery.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Image Modal — https://www.w3schools.com/css/css3_images_modal.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Image Modal" page (Astra wiki-curation, P-Reinforce v3.1 format).