CSS의 visibility 속성은 요소를 화면에 표시할 것인지 여부를 제어합니다. 이 속성에 visible 값을 지정하면 해당 요소가 화면에 나타나며, hidden 값을 지정하면 요소가 보이지 않게 됩니다. 특히 visible 값은 스타일시트 등에서 미리 숨겨둔 요소를 인라인 스타일로 다시 화면에 표시하고 싶을 때 유용하게 활용됩니다.
예제
아래 코드는 visible 값을 실제로 적용한 예입니다. 스타일시트에서 모든 <p> 요소를 hidden으로 설정했지만, 첫 번째 문단에는 인라인 스타일로 visibility: visible;을 지정하여 이 규칙을 덮어씁니다.
<html>
<head>
<style>
p {
visibility: hidden;
}
</style>
</head>
<body>
<p style = "visibility:visible;">
이 문단은 화면에 표시됩니다.
</p>
<p>
이 문단은 화면에 표시되지 않습니다.
</p>
</body>
</html>
실행 결과
위 코드를 실행하면 첫 번째 문단은 인라인 스타일이 우선 적용되어 정상적으로 화면에 나타나고, 두 번째 문단은 스타일시트의 visibility: hidden; 규칙에 따라 보이지 않습니다. 다만 숨겨진 문단이라도 원래 차지하던 레이아웃 공간은 그대로 유지된다는 점에 유의하세요.
display: none과의 차이점
visibility: hidden;은 요소가 눈에 보이지 않을 뿐 공간은 계속 차지하지만, display: none;은 요소가 아예 존재하지 않는 것처럼 처리되어 공간조차 남기지 않습니다. 두 속성의 차이를 잘 이해해두면 애니메이션, 토글 메뉴 등 다양한 UI 구현 시 상황에 맞는 방식을 선택하는 데 큰 도움이 됩니다.