CSS에서 요소를 숨기는 두 가지 방법
웹 개발을 하다 보면 화면에서 특정 요소를 숨겨야 하는 상황이 자주 발생합니다. CSS에는 대표적으로 display: none;과 visibility: hidden; 두 가지 방법이 있는데, 비슷해 보이지만 레이아웃에 미치는 영향이 크게 다릅니다.
display: none; — 공간까지 사라집니다
display: none; 속성은 요소를 삭제하지 않고 화면에서 숨기는 기능입니다. 가장 중요한 특징은 숨겨진 요소가 어떠한 공간도 차지하지 않는다는 점입니다. 마치 해당 요소가 문서에 존재하지 않는 것처럼 레이아웃이 재배치됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
display: none;
}
</style>
</head>
<body>
<h2>이 제목은 화면에 표시됩니다</h2>
<h3>이 제목은 숨겨져 있습니다</h3>
<p>display: none;을 사용했기 때문에 숨겨진 제목은 공간을 전혀 차지하지 않습니다.</p>
</body>
</html>visibility: hidden; — 공간은 유지됩니다
visibility: hidden; 속성 역시 요소를 화면에서 숨기지만, 레이아웃에 영향을 주어 공간은 그대로 차지합니다. 즉, 눈에 보이지 않을 뿐 해당 요소가 있던 자리는 빈 공간으로 남아 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h3 {
visibility: hidden;
}
</style>
</head>
<body>
<h2>이 제목은 화면에 표시됩니다</h2>
<h3>이 제목은 숨겨져 있습니다</h3>
<p>visibility: hidden;을 사용하면 숨겨진 제목도 여전히 공간을 차지하게 됩니다.</p>
</body>
</html>핵심 차이점 요약
두 속성의 차이를 한눈에 비교해 보면 다음과 같습니다.
- display: none; — 요소가 완전히 사라지며, 주변 콘텐츠가 그 자리를 메워 레이아웃이 다시 배치됩니다.
- visibility: hidden; — 요소는 보이지 않지만 원래 자리와 크기만큼의 빈 공간이 유지됩니다.
따라서 요소를 숨기면서 레이아웃 흐름까지 없애고 싶다면 display: none;을, 빈 공간을 유지한 채 내용만 감추고 싶다면 visibility: hidden;을 사용하는 것이 적합합니다.