CSS display: none 완벽 가이드

`display: none`

display 속성이 none 값으로 설정된 요소는
화면에 해당 요소와 그 영역이 표시되지 않으며, 요소 안의 콘텐츠도 존재하지 않는 것처럼 렌더링됩니다.

display: none이 적용되면, 해당 요소와 그 안의 콘텐츠는 화면에서 완전히 사라진 것처럼 렌더링됩니다.
공간을 차지하지 않으며, 주변 레이아웃에도 영향을 주지 않습니다. 또한 요소의 고유한 기능이나 의미도 제거되며, 스크린 리더를 사용하는 시각 장애인은 이 요소에 접근할 수 없습니다.

다만, 해당 요소는 여전히 DOM(Document Object Model)에는 남아 있기 때문에, 자바스크립트를 사용해 선택하거나 속성을 변경하는 등의 조작은 가능합니다.

예제

.none 선택자를 가진 B항목은 display: none으로 인해 마크업하지 않은 것처럼 화면에 표시되지 않습니다. 또한 공간도 차지하지 않는 것을 알 수 있습니다.
하지만, 해당 요소는 DOM에는 여전히 존재하므로 자바스크립트로 접근 가능합니다.

`display: none`과 `visibility: hidden`

CSS에서 display: none과 비슷하게 visibility 속성의 hidden 값도 요소를 화면에서 숨깁니다. 겉보기에는 둘 다 요소를 보이지 않게 만든다는 점에서 비슷해 보이지만, 실제 동작 방식에는 분명한 차이가 있습니다. 이 두 속성의 차이를 정확히 이해하면, 상황에 따라 더 적절한 방법을 선택할 수 있습니다.

다음은 display: none과 visibility: hidden의 차이를 한 눈에 볼 수 있게 표로 정리한 것입니다.

display: none과 visibility: hidden 차이
특징	`display: none`	`visibility: hidden`
요소 숨기기	요소를 숨김	요소를 숨김
레이아웃에서 공간 차지	공간을 차지하지 않음	공간을 차지함
레이아웃 재계산	레이아웃 재계산	레이아웃 재계산 없음
상호작용	상호작용 불가 (예: 클릭, 입력, 포커스 등)	상호작용 불가 (예: 클릭, 입력, 포커스 등)
스크린 리더 접근	스크린 리더에서 접근 불가	스크린 리더에서 접근 불가
DOM 트리	DOM에 그대로 존재	DOM에 그대로 존재
콘텐츠의 렌더링	숨김	`visibility: visible`이 명시적으로 있는 경우에 보일 수 있음
자바스크립트 접근(문서 탐색)	접근 가능	접근 가능

display: none과 visibility: hidden의 가장 큰 차이점은 숨겨진 요소가 공간을 차지하는지 여부입니다.
만약 요소를 렌더링하지 않으면서도 정상적으로 공간을 차지하도록 하고 싶다면, display: none 대신에 CSS의 visibility 속성을 사용하세요.

다음은 display: none과 visibility: hidden으로 요소를 숨긴 예제입니다. 차이점을 눈으로 확인해 보세요!

HTML

<h4>display: none</h4>
<ol>
    <li>A</li>
    <li class="none">B</li> <!-- 화면에 표시하지 않고 공간을 차지하지 않음 -->
    <li>C</li>
    <li>D</li>
</ol>
<h4>visibility: hidden</h4>
<ol>
    <li>A</li>
    <li class="hidden">B</li> <!-- 화면에 표시하지 않고 공간을 차지함 -->
    <li>C</li>
    <li>D</li>
</ol>

`display: none`이 기본값으로 설정되어 있는 요소

브라우저의 기본 스타일시트에서 display: none이 기본값으로 설정되어 있는 요소들은 다음과 같습니다.

부연설명
각 브라우저는 HTML 요소에 대한 기본 스타일을 설정한 내장 스타일시트를 가지고 있습니다. '브라우저의 기본 스타일시트'(User Agent Stylesheet)라고 합니다. 이 스타일 시트는 웹 페이지의 기본 디자인을 정의합니다. 브라우저의 기본 스타일은 사용자 경험을 개선하기 위해 각 브라우저의 개발자가 설정한 것입니다. 여기에서 설정된 값들은 브라우저가 렌더링될 때 개발자에 의해 해당 속성의 값이 명시되지 않았을 때 적용되는 기본값입니다.