CSS display: contents 완벽 가이드

`display: contents`

display 속성이 contents 값으로 설정된 요소는
화면에 해당 요소 상자의 컨테이너 자체는 표시하지 않지만 그 안의 콘텐츠는 그대로 렌더링됩니다.

또한 ::before, ::after 등의 가상 요소로 생성된 콘텐츠도 그대로 렌더링됩니다.
하지만 해당 요소에 실제 콘텐츠나 자식 요소가 전혀 없다면, display: none 방식이 적용됩니다.

예제

HTML

<button class="display-contents" type="button">Button</button>
<hr>
<p class="display-contents">Hello <strong>World</strong></p>
<hr>
<a class="display-contents" href="https://www.google.com/" target="_blank">Google로 이동하기</a>
<hr>

<!-- 콘텐츠가 없다면, display: none 방식이 적용됩니다. -->
<p class="display-contents"></p>
<hr>
<input class="display-contents" type="text">

.display-contents 선택자를 가진 요소들은 모두 자체 요소 상자의 컨테이너 자체는 표시하지 않고 내부 콘텐츠만 렌더링됩니다. 그런데, <p class="display-contents"></p>처럼 콘텐츠가 없거나 <input>처럼 콘텐츠를 가질 수 없는 빈 요소 경우에는 display: none 방식이 적용되어 아예 표시되지 않습니다.

`display: contents`의 디스플레이 방식 이해

display: contents의 디스플레이 방식은 HTML 요소별로 꽤나 다르게 구현됩니다. 그 이유는 일부 요소들의 경우 CSS의 요소 박스 개념만으로만 렌더링되지 않기 때문입니다.
어떤 요소들은 콘텐츠를 가질 수 있지만, 앞서 예제로 본 <input> 요소처럼 콘텐츠를 가질 수 없는 빈 요소의 경우에는 디스플레이 방식이 달라지기 때문입니다.

명세서에서는 이러한 차이를 반영하여, 각 요소별로 display: contents가 작동하는 방식을 다음과 같이 정의하고 있습니다.

`display: contents`가 `display: none` 방식이 적용되는 요소들

다음의 요소들은 display: contents을 적용하면, display: none 방식과 동일하게 계산됩니다.

`display: contents`가 특별한 동작 없이 일반적으로 처리되는 요소들

다음의 요소들은 display: contents을 적용하면, 특별한 동작 없이 요소 상자의 컨테이너 자체는 표시하지 않지만 그 안의 콘텐츠는 그대로 렌더링됩니다.

<button>
<fieldset>
<legend>
<details>
그 외, display: contents가 display: none 방식이 적용되는 요소들을 제외한 요소들

이처럼 display: contents는 내부 콘텐츠에 집중된 렌더링 방식이지만, 요소의 성격에 따라 예상과 다른 결과를 만들 수 있습니다. 따라서 HTML 요소별 렌더링 동작을 이해하고 사용하는 것이 중요합니다.

주의할 점

display: contents는 박스 모델에만 영향을 미치고, 문서 트리와 관련된 요소들(선택자 매칭, 이벤트 처리, 속성 상속 등)에는 영향을 미치지 않습니다. 그러나, 현재 주요 브라우저들에서 이 속성이 완전하게 구현되지 않았습니다. 특히, 포커스 가능성(focusability)과 관련하여 일부 브라우저에서 실험적으로 처리되고 있으며, 이는 웹 접근성 도구가 요소를 제대로 해석하지 못하게 할 수 있습니다. 따라서 웹 접근성과 사용자 경험을 고려하여 이 속성을 신중하게 사용해야 합니다. 브라우저 호환성 표를 참조하세요.

브라우저 호환성

마지막 업데이트 정보: 2025-04-14

display 속성의 contents 값에 대한 브라우저 호환성
속성의 값	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`display: contents`	65	79	37	11.1
`display: contents`가 적용된 요소는 포커스 가능	지원하지 않음	지원하지 않음	지원하지 않음	지원하지 않음