docs(10_Wiki): Dev 폴더 누락분 반영 — Topic_Programming으로 통합
이전 재구성 작업에서 Dev/ 폴더가 누락되었던 것을 반영. - Dev/Topic_Programming(중첩 폴더, 78개)은 Dev 자체 최상위 폴더들 (Architecture/Conventions/Engineering_Intelligence 등)과 완전 중복이라 제거. - Dev 최상위 엔지니어링 지식 폴더(Architecture/Conventions/Engineering_Intelligence/ Failure_Library/Generalized_Principles/Language/Pattern_Catalog/Platform_Guides/ Subsystems, 77개)는 이미 Topic_Programming/Topic_Programming에 더 최신 버전이 존재해 중복 제거(고유 콘텐츠 1개는 예외 처리하여 이동 보존). - Dev의 W3Schools 언어 튜토리얼 폴더(Topic_C/CPP/CSS/CSharp/HOWTO/HTML/Java/ JavaScript/PHP/Python/SQL/W3CSS, 1201개)는 전부 Topic_Programming 하위로 이동. - 에이전트 운영 상태(.astra/docs)는 그대로 유지, 콘텐츠 폴더만 정리. - Topic_Programming 최종 문서 수: 2784 → 3985.
This commit is contained in:
Antigravity Agent
@@ -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).
|
||||
Reference in New Issue
Block a user