---
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).