웹 개발을 하다 보면 특정 요소를 화면에서 완전히 감춰야 하는 경우가 자주 있습니다. 이럴 때 사용하는 것이 바로 CSS의 display: none 속성값입니다. 이 값이 적용된 요소는 화면에서 사라질 뿐만 아니라, 레이아웃에서 차지하던 공간까지 함께 제거됩니다.
참고로 visibility: hidden과 혼동하기 쉬운데, visibility: hidden은 요소를 보이지 않게 할 뿐 원래 차지하던 공간은 그대로 유지된다는 점이 다릅니다. 요소를 완전히 제거하고 싶다면 display: none을 사용하세요.
예제 1: 문단(p) 요소 숨기기
다음 예제에서는 p 태그에 display: none을 적용하여 특정 텍스트를 화면에서 숨겨봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: orange;
color: white;
}
p.demo {
display: none;
}
span.demo1 {
display: inline;
}
</style>
</head>
<body>
<h1>경기 일정</h1>
<div>
경기는 12월 20일 <p class="demo">오전 9시</p> 오전 10시에 시작됩니다.
</div>
<div>
경기는 12월 20일 <span class="demo1">오후 5시</span>에 종료됩니다.
</div>
</body>
</html>실행 결과
위 코드에서 p.demo 클래스에는 display: none이 적용되어 있으므로 "오전 9시"라는 문단은 화면에 나타나지 않습니다. 반면 span.demo1에는 display: inline이 적용되어 "오후 5시" 텍스트는 정상적으로 표시되며 주황색 배경과 흰색 글자가 적용됩니다.
예제 2: span 요소 숨기기
이번에는 모든 span 태그에 display: none을 적용해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
display: none;
}
.demo2 {
text-decoration: underline;
text-decoration-style: double;
text-decoration-color: red;
}
</style>
</head>
<body>
<h1>안내</h1>
<p class="demo">시험장은 <span>XYZ 대학교</span> ABC 대학교 근처입니다.</p>
<p class="demo2">시험은 오전 11시에 시작됩니다.</p>
</body>
</html>실행 결과
모든 span 요소에 display: none이 적용되었기 때문에 "XYZ 대학교" 부분은 화면에서 사라지고 나머지 텍스트만 표시됩니다. demo2 클래스가 적용된 문단은 빨간색 이중 밑줄 스타일로 강조되어 나타납니다.
마무리 정리
display: none은 요소를 DOM에는 그대로 남긴 채 화면과 레이아웃에서 완전히 제거하는 간편한 방법입니다. 메뉴 열기·닫기, 조건에 따른 콘텐츠 표시 등 JavaScript와 함께 활용하면 더욱 유용하게 사용할 수 있습니다.