CSS의 visibility 속성은 화면에 표시되는 요소를 숨길 수 있도록 해주는 강력한 도구입니다. 이 속성을 JavaScript와 함께 활용하면 복잡한 드롭다운 메뉴나 다양한 웹페이지 레이아웃 효과를 손쉽게 구현할 수 있습니다.
visibility 속성의 주요 값
visibility 속성에는 아래 표와 같은 값들을 지정할 수 있습니다.
| 값 | 설명 |
|---|---|
| visible | 박스와 그 안의 내용이 사용자에게 화면에 나타납니다. |
| hidden | 박스와 내용이 화면에서 보이지 않게 됩니다. 단, 요소가 실제로 존재하므로 페이지 레이아웃에는 여전히 영향을 줍니다. |
| collapse | 동적 테이블의 행(row)이나 열(column)을 숨기는 용도로만 사용됩니다. |
visible과 hidden 예제 코드
아래 예제 코드를 직접 실행해 보면 visible 값과 hidden 값이 어떻게 동작하는지 확인할 수 있습니다.
<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의 차이입니다. visibility: hidden은 요소를 눈에 보이지 않게 할 뿐, 해당 요소가 차지하던 공간은 그대로 유지됩니다. 반면 display: none은 요소 자체를 문서 흐름에서 제거하기 때문에 공간조차 남지 않습니다. 따라서 레이아웃을 유지한 채로 요소만 임시로 숨기고 싶을 때는 visibility: hidden을 사용하는 것이 적합합니다.