2nd/10_Wiki/Topic_Programming/Topic_CSS/CSS_Visibility_Hide.md

id, title, category, status, verification_status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, created_at, updated_at, review_reason, merge_history, tags, raw_sources, applied_in, github_commit

id	title	category	status	verification_status	canonical_id	aliases	duplicate_of	source_trust_level	confidence_score	created_at	updated_at	review_reason	merge_history	tags	raw_sources	applied_in	github_commit
css-visibility-and-hide	CSS Visibility and Hide	Frontend	draft	conceptual		display none visibility hidden hide element show hide element display none vs visibility hidden		B	0.89	2026-06-23	2026-06-23			css web frontend w3schools display visibility hide	https://www.w3schools.com/css/css_display_hide.asp

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]

#panel {
  display: none;
}

function myFunction() {
  document.getElementById("panel").style.display = "block";
}

Toggle show/hide with JavaScript: [S1]

#panel {
  display: none;
}

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]

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]

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

h1.hidden {
  display: none;
}

Hide but keep space (language: 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).