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,132 @@
+---
+id: css-visibility-and-hide
+title: "CSS Visibility and Hide"
+category: "Frontend"
+status: "draft"
+verification_status: "conceptual"
+canonical_id: ""
+aliases: ["display none", "visibility hidden", "hide element", "show hide element", "display none vs visibility hidden"]
+duplicate_of: ""
+source_trust_level: "B"
+confidence_score: 0.89
+created_at: 2026-06-23
+updated_at: 2026-06-23
+review_reason: ""
+merge_history: []
+tags: ["css", "web", "frontend", "w3schools", "display", "visibility", "hide"]
+raw_sources: ["https://www.w3schools.com/css/css_display_hide.asp"]
+applied_in: []
+github_commit: ""
+---
+
+# [[CSS Visibility Hide]]
+
+## 🎯 한 줄 통찰 (One-line insight)
+`display: none;` hides an element and removes it from the document flow (no space taken), while `visibility: hidden;` hides it but still reserves its space. [S1]
+
+## 🧠 핵심 개념 (Core concepts)
+- **`display: none;` removes from flow** — the element is completely hidden from the document flow and does not take up any space. [S1]
+- **Common JS toggle use** — `display: none;` is commonly used with JavaScript to hide or show elements without deleting and recreating them. [S1]
+- **Hide-as-if-absent** — hiding an element with `display: none;` makes the page display as if the element is not there. [S1]
+- **`visibility: hidden;` reserves space** — the element will be hidden, but it will still take up the same space as if it was visible. [S1]
+
+## 🧩 추출된 패턴 (Extracted patterns)
+- **Toggle pattern** — start with `display: none;` in CSS, then flip to `block` (or back) via JavaScript to show/hide a panel. [S1]
+- **Choice of hiding mechanism** — pick `display: none;` to collapse layout, or `visibility: hidden;` to keep the reserved space. [S1]
+
+## 📖 세부 내용 (Details)
+**CSS `display: none;`**
+When using `display: none;` the element is completely hidden from the document flow and does not take up any space. It is commonly used with JavaScript to hide or show elements without deleting and recreating them. [S1]
+
+Show a hidden element with JavaScript: [S1]
+```css
+#panel {
+  display: none;
+}
+```
+```javascript
+function myFunction() {
+  document.getElementById("panel").style.display = "block";
+}
+```
+
+Toggle show/hide with JavaScript: [S1]
+```css
+#panel {
+  display: none;
+}
+```
+```javascript
+function myFunction() {
+  var x = document.getElementById("panel");
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+}
+```
+
+**Hide an Element — `display:none` or `visibility:hidden`?**
+Hiding an element can be done by setting the `display` property to `none`. The element will be hidden, and the page will be displayed as if the element is not there: [S1]
+```css
+h1.hidden {
+  display: none;
+}
+```
+
+You can also use `visibility:hidden;` to hide an element. However, with this property, the element will be hidden, but it will still take up the same space as if it was visible: [S1]
+```css
+h1.hidden {
+  visibility: hidden;
+}
+```
+
+**CSS Properties (reference table)** [S1]
+
+| Property | Description |
+|----------|-------------|
+| display | Specifies how an element should be displayed |
+| visibility | Specifies whether or not an element should be visible |
+
+## ⚖️ 비교 및 선택 기준 (Comparison & decision criteria)
+- **`display: none;`** — the element is hidden and the page is displayed as if the element is not there (it takes up no space). Choose this to collapse the layout around the hidden element. [S1]
+- **`visibility: hidden;`** — the element is hidden but still takes up the same space as if it was visible. Choose this to keep the surrounding layout unchanged. [S1]
+
+## 🛠️ 적용 사례 (Applied in summary)
+The page's own examples are the applied cases: a `#panel` hidden with `display: none;` and revealed/toggled via JavaScript, plus an `h1.hidden` shown with both `display: none;` and `visibility: hidden;`. No external project/commit applications found in the source.
+
+## 💻 코드 패턴 (Code patterns)
+Hide via display (language: CSS):
+```css
+h1.hidden {
+  display: none;
+}
+```
+Hide but keep space (language: CSS):
+```css
+h1.hidden {
+  visibility: hidden;
+}
+```
+
+## ⚖️ 모순 및 업데이트 (Contradictions & updates)
+No contradictions found in the source.
+
+## ✅ 검증 상태 및 신뢰도
+- **상태:** draft
+- **검증 단계:** conceptual (실제 적용 사례 발견 시 applied/validated로 승격 가능)
+- **출처 신뢰도:** B (W3Schools — widely used educational reference, not a primary standards body)
+- **신뢰 점수:** 0.89
+- **중복 검사 결과:** 신규 생성 (New discovery)
+
+## 🔗 지식 그래프 (Knowledge Graph)
+- **상위/루트:** [[CSS Tutorial]]
+- **관련 개념:** [[CSS Display]], [[CSS Max Width]], [[CSS Position]]
+- **참조 맥락:** Referenced whenever deciding how to hide an element — collapsing layout vs reserving space.
+
+## 📚 출처 (Sources)
+- [S1] W3Schools — CSS Visibility and Hide — https://www.w3schools.com/css/css_display_hide.asp
+
+## 📝 변경 이력 (Change history)
+- 2026-06-23: Initial draft synthesized from the W3Schools "CSS Visibility and Hide" page (Astra wiki-curation, P-Reinforce v3.1 format).