visibility
요소의 가시성을 제어하는 속성입니다. display: none과 달리 요소가 차지하는 공간은 그대로 유지하면서 시각적으로만 숨기거나 보이게 합니다.
클래스 목록
| 클래스 | CSS | 설명 |
|---|---|---|
vh | visibility: hidden | 요소를 숨김. 공간은 유지되며 자식에서 vv로 개별 표시 가능 |
vv | visibility: visible | 요소를 표시. 부모의 vh를 자식에서 오버라이드할 때 사용 |
vi | visibility: initial | 초기값(visible)으로 리셋. 상속된 visibility를 해제할 때 사용 |
시각적 비교
visibility: hidden과 visibility: visible이 요소에 어떤 영향을 주는지 비교합니다.
visible (기본값) — vv
모든 요소가 정상적으로 표시됩니다
hidden (Item 2) — vh
Item 2가 보이지 않지만 공간은 그대로 유지됩니다
vh vs dn — 숨김 방식 비교
vh(visibility: hidden)과 dn(display: none)은 모두 요소를 숨기지만, 공간 차지 여부가 핵심 차이입니다.
visibility: hidden — vh
공간은 유지됨. Item 2 자리가 비어 있음
display: none — dn
공간 자체가 사라짐. Item 1과 3이 붙음
| vh (visibility: hidden) | dn (display: none) | |
|---|---|---|
| 공간 차지 | 차지함 (빈 공간 유지) | 차지하지 않음 (완전히 제거) |
| 스크린리더 | 읽지 않음 | 읽지 않음 |
| 이벤트 수신 | 불가 | 불가 |
| 트랜지션 | 가능 (opacity와 조합) | 불가 (on/off 전환) |
| 자식 개별 표시 | 가능 (자식에 vv 부여) | 불가 (모두 숨김) |
| 레이아웃 영향 | 공간을 차지하므로 레이아웃에 참여 | 완전히 제거되어 레이아웃에 미참여 |
| 주요 용도 | 레이아웃 유지하며 숨김, 페이드 애니메이션 | 반응형 숨김, 조건부 렌더링 |
자식 요소 개별 표시
vh의 고유한 특성: 부모가 hidden이어도 자식에 vv를 부여하면 해당 자식만 개별적으로 보이게 할 수 있습니다. dn으로는 불가능합니다.
부모 vh + 자식 vv
가운데 자식만 vv로 개별 표시됩니다
부모 dn — 자식 개별 표시 불가
dn은 자식이 어떤 display를 가져도 모두 숨겨집니다
클래스별 상세
vhvisibility: hidden
요소를 시각적으로 숨기되, 레이아웃에서 차지하는 공간은 그대로 유지합니다. 이벤트도 수신하지 않으며, 자식 요소에 vv를 부여하면 해당 자식만 개별적으로 다시 보이게 할 수 있습니다.
<!-- 요소를 숨기되 공간 유지 -->
<div class="df gap8px">
<span>Item 1</span>
<span class="vh">Item 2 (숨김, 공간 유지)</span>
<span>Item 3</span>
</div>
<!-- 부모 숨기고 특정 자식만 표시 -->
<div class="vh">
<span>숨김</span>
<span class="vv">이 자식만 보임!</span>
<span>숨김</span>
</div>
<!-- 페이드 애니메이션과 조합 -->
<div class="vh o0 tall300msease hover-vv hover-o100">
호버 시 나타남
</div>자주 쓰는 조합
vh o0 | 숨김 + 투명 (페이드 아웃 상태) |
vh pa | 숨기되 위치만 절대값으로 (공간 차지 방지) |
vh pen | 숨김 + 포인터 이벤트 차단 (이중 안전) |
sm-vh | 768px 이하에서만 숨김 (공간 유지) |
vvvisibility: visible
요소를 보이게 합니다. 기본값이므로 단독으로는 불필요하지만, 부모가 vh일 때 특정 자식만 보이게 하거나, 반응형에서 vh를 해제할 때 사용합니다.
<!-- 부모의 vh를 자식에서 오버라이드 -->
<nav class="vh">
<a href="#">숨김</a>
<a href="#" class="vv">이 링크만 보임</a>
<a href="#">숨김</a>
</nav>
<!-- 반응형: 모바일에서 숨기고 데스크탑에서 표시 -->
<div class="vh sm-vv">768px 이하에서만 표시</div>핵심 용도
vv는 부모의 vh를 자식에서 오버라이드할 때 진가를 발휘합니다. 이는 dn으로는 불가능한 visibility만의 고유 특성입니다.
vivisibility: initial
visibility 속성을 초기값(visible)으로 되돌립니다. 상속이나 다른 스타일에 의해 변경된 visibility를 명시적으로 리셋할 때 사용합니다.
<!-- 상속된 visibility를 리셋 -->
<div class="vh">
<p>이 텍스트는 숨겨짐</p>
<p class="vi">이 텍스트는 initial로 리셋 (visible)</p>
</div>반응형 조합
미디어 쿼리 프리픽스와 조합하여 특정 화면 크기에서 요소를 숨기거나 표시할 수 있습니다.
<!-- 모바일에서 숨기기 (공간 유지) -->
<div class="vv sm-vh">768px 이하에서 숨김 (공간은 유지)</div>
<!-- 모바일에서만 표시 -->
<div class="vh sm-vv">768px 이하에서만 표시</div>
<!-- 태블릿 이하에서 숨기기 -->
<div class="vv md-vh">1024px 이하에서 숨김</div>| 클래스 조합 | 동작 |
|---|---|
vv sm-vh | 기본 표시 → 768px 이하에서 숨김 (공간 유지) |
vh sm-vv | 기본 숨김 → 768px 이하에서 표시 |
vv md-vh | 기본 표시 → 1024px 이하에서 숨김 |
vh md-vv | 기본 숨김 → 1024px 이하에서 표시 |
vv lg-vh | 기본 표시 → 1280px 이하에서 숨김 |
vh es-vv | 기본 숨김 → 640px 이하에서 표시 |
의사 클래스 조합
hover, focus 등의 상태에서 visibility를 변경할 수 있습니다.
<!-- 호버 시 숨기기 -->
<div class="vv hover-vh tall200msease cp">
호버하면 사라집니다 (공간은 유지)
</div>
<!-- 호버 시 자식 표시 -->
<div class="pr hover-vv">
<span>메뉴</span>
<ul class="pa t100p l0 vh hover-vv bg18181B b1pxsolid27272A br8px p16px lsn">
<li class="py4px">항목 1</li>
<li class="py4px">항목 2</li>
</ul>
</div>
<!-- 포커스 시 표시 -->
<div class="vh focus-within-vv">
<input type="text" placeholder="포커스하면 부모가 보임" />
</div>팁 & 주의사항
vh는 공간을 유지, dn은 공간을 제거
레이아웃이 흔들리지 않으면서 요소를 숨기고 싶다면 vh를 사용하세요. 공간 자체를 없애야 한다면 dn을 사용하세요.
자식 요소 개별 표시는 vh만 가능
부모에 vh를 적용하고 특정 자식에 vv를 부여하면 해당 자식만 보이게 할 수 있습니다. dn으로는 이 동작이 불가능합니다.
vh는 여전히 레이아웃에 영향을 줌
vh 요소는 보이지 않더라도 공간을 차지하므로 레이아웃 계산(flexbox, grid 등)에 참여합니다. 의도치 않은 빈 공간이 생길 수 있으니 주의하세요.
트랜지션과 함께 사용
visibility는 opacity와 함께 페이드 애니메이션에 자주 사용됩니다. opacity만으로는 클릭 이벤트가 남아 있지만, vh를 조합하면 이벤트도 차단할 수 있습니다.