🌱 기초 프론트엔드
CSS에서 display: none과 visibility: hidden의 차이
쉽게 이해하기
의자를 방에서 아예 치우는 것(display: none)과 투명 천으로 덮는 것(visibility: hidden)의 차이예요. 치워버리면 그 자리에 다른 걸 놓을 수 있지만, 투명 천으로 덮으면 안 보이지만 여전히 자리는 차지하고 있죠.
핵심 정리
둘 다 요소를 안 보이게 하지만, 공간 차지 여부가 다릅니다.
자세히 알아보기
display: none은 요소를 완전히 제거해서 공간도 차지하지 않게 만듭니다. 마치 그 요소가 애초에 없었던 것처럼 다른 요소들이 그 자리를 채워요. 반면 visibility: hidden은 요소를 투명하게 만들지만 원래 자리는 그대로 유지합니다.
실무에서는 모달 창이나 메뉴를 숨길 때 주로 display: none을 사용합니다. 필요할 때 display: block으로 바꿔서 다시 보이게 할 수 있어요. 반면 애니메이션이나 레이아웃이 흔들리면 안 되는 경우에는 visibility: hidden을 쓰는 게 좋습니다.
또 다른 차이점은 스크린 리더가 읽는지 여부예요. display: none은 완전히 제거되어서 스크린 리더도 읽지 않지만, visibility: hidden은 DOM에 남아있어서 접근성 도구가 감지할 수 있습니다. 이 차이를 이해하고 상황에 맞게 사용하는 게 중요해요.
opacity: 0도 비슷하게 안 보이게 만들지만, 클릭 이벤트는 여전히 작동합니다. 세 가지 방법 모두 장단점이 있으니, 숨기고 싶은 이유에 따라 적절한 방법을 선택해야 합니다.