CSS의 visibility 속성에 hidden 값을 지정하면 해당 요소를 화면에서 숨길 수 있습니다. 이 방식의 가장 큰 특징은 요소가 보이지 않게 되더라도 원래 차지하던 공간은 그대로 유지된다는 점입니다. 즉, 레이아웃이 밀리거나 변하지 않고 내용만 감춰집니다.
예제 코드
아래 예제를 직접 실행해 보면 두 번째 문단이 화면에 나타나지 않지만, 그 자리의 공간은 여전히 확보되어 있는 것을 확인할 수 있습니다.
<html> <head> </head> <body> <p>이 문단은 일반적인 방식으로 화면에 표시됩니다.</p> <p style = "visibility:hidden;"> 이 문단은 화면에 표시되지 않습니다. </p> </body> </html>
display: none과의 차이점
visibility: hidden과 자주 비교되는 속성으로 display: none이 있습니다. 두 속성 모두 요소를 화면에서 숨기지만 동작 방식이 다릅니다.
- visibility: hidden — 요소가 보이지 않지만, 원래 차지하던 공간은 그대로 유지됩니다.
- display: none — 요소가 완전히 제거된 것처럼 처리되어, 해당 공간까지 사라지고 주변 요소들이 자리를 채웁니다.
따라서 레이아웃을 유지한 상태로 내용만 숨기고 싶다면 visibility: hidden을 사용하는 것이 적합합니다.