CSS visibility — 요소 숨기기 완전 정리

 

 

Web Development · CSS Display

CSS visibility —
"보이지 않지만 자리는 차지하기"

display:none과 헷갈리기 쉬운 또 다른 숨기기 속성

시작 오늘 분석할 코드

이미지 3개를 가로로 늘어놓고, 가운데 이미지에만 visibility:hidden을 적용한 코드. 이미지가 사라지지만 그 자리는 그대로 비어있다.

.invisible { visibility: hidden; /* 보이지 않지만 자리는 그대로 */ } <img src="images/pic1.jpg"> <img src="images/pic2.jpg" class="invisible"> <img src="images/pic3.jpg">

실제 출력 미리보기

pic1

pic2

pic3

※ 가운데 pic2 자리에 빈 공간이 있다 — 요소는 사라졌지만 자리는 그대로.

비교: display:none을 적용했다면

pic1

pic2

pic3

※ display:none이면 자리도 사라져서 pic1과 pic3이 딱 붙어 있다.

용어 용어 정리

visibility요소를 보일지/숨길지

visible (기본)평소대로 보임

hidden숨김 — 자리는 차지함

collapse표 행/열에서만 — display:none과 비슷

vs display:nonedisplay:none은 자리까지 없앰

vs opacity:0opacity는 클릭 가능, visibility는 클릭 불가

---

1 visibility:hidden vs display:none

visibility: hidden

• 화면에서 안 보임
• 자리는 차지 — 빈 공간으로 남음
• 레이아웃이 그대로 유지됨
• 스크린 리더는 무시

display: none

• 화면에서 안 보임
• 자리도 사라짐 — 다른 요소가 채움
• 레이아웃 재계산
• 스크린 리더도 무시

---

반응형

2 visibility vs opacity:0

opacity: 0도 시각적으로 안 보인다는 점은 같다. 하지만 결정적 차이가 있다.

속성	보임	자리	클릭 가능?	스크린 리더
visibility: hidden	×	차지	불가	무시
display: none	×	없음	불가	무시
opacity: 0	×	차지	가능	읽음

※ opacity: 0으로 숨긴 버튼은 안 보이지만 클릭은 됨. 사용자가 의도치 않게 누르는 사고가 발생할 수 있어 진짜 숨길 때는 visibility 또는 display:none을 써야 한다.

---

3 언제 어느 것을?

상황	적합
레이아웃 깨지면 안 됨, 잠깐 숨겼다 보일 것	visibility
완전히 제거, 그 자리 다른 요소가 채울 것	display: none
페이드 아웃 애니메이션	opacity + transition
접근성 테스트, 스크린 리더에는 보여야	opacity: 0 또는 sr-only 패턴

---

4 visibility는 transition 됨

덜 알려진 사실 — visibility는 transition으로 부드럽게 전환할 수 있다 (display:none은 안 됨). 이 특성을 이용해 페이드 + 사라지기를 자연스럽게 만들 수 있다.

.fade-out { visibility: hidden; opacity: 0; transition: opacity 0.3s, visibility 0.3s; }

※ display:none은 즉시 사라지므로 transition 불가. visibility + opacity 조합으로 페이드 후 클릭 차단 가능.

---

5 자주 하는 실수

실수	증상	해결
opacity:0으로 숨겼는데 클릭됨	유령 버튼 사고	visibility:hidden 또는 pointer-events:none 추가
display:none에 transition 적용	전환 효과 안 남	visibility + opacity로
visibility:hidden인데 자리가 사라짐	자식의 visibility:visible 누락	자식에 visibility 명시 가능 (상속됨)
접근성 위해 hide 했는데 SR이 무시	의도와 다른 결과	sr-only 클래스 사용

---

핵심 한 줄 요약

visibility: hidden보이지 않음 + 자리는 차지

vs display:nonedisplay:none은 자리까지 사라짐

vs opacity:0opacity는 클릭 가능 — 유령 버튼 주의

언제 visibility?레이아웃 유지하면서 잠깐 숨길 때

transitionvisibility는 가능, display:none은 불가

Tags

#visibility #hidden #display-none #opacity #숨기기 #요소숨김 #transition #레이아웃유지 #접근성 #aria-hidden #CSS #HTML #박스모델 #인터랙션 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

visibility, hidden, display-none, opacity, 숨기기, 요소숨김, transition, 레이아웃유지, 접근성, aria-hidden, CSS, HTML, 박스모델, 인터랙션, 웹개발, 티스토리