CSS ::backdrop 가상 요소 선택자 – 최상위 레이어 요소의 배경 레이어 선택

정의 및 사용 방법

::backdrop은 최상위 레이어에 렌더링된 요소에 생성되는 배경 레이어를 스타일링하는 가상 요소 선택자입니다.

최상위 레이어(Top Layer)에 렌더링된 요소는 화면 전체를 덮는 별도의 배경 레이어가 생성됩니다.
::backdrop 가상 요소는 이 배경 레이어를 스타일링하는 데 사용되는 선택자입니다.

최상위 레이어(Top Layer)에 렌더링된 요소

::backdrop 가상 요소 선택자는 최상위 레이어에 렌더링된 요소의 배경 레이어만 선택할 수 있습니다. 이 선택자를 올바르게 이해하고 활용하려면, 먼저 최상위 레이어에 렌더링된 요소가 무엇인지 정확히 알아야 합니다.

최상위 레이어(Top Layer)란?

HTML의 콘텐츠는 화면에 렌더링될 때 콘텐츠가 다른 콘텐츠 위나 아래에 쌓이는 경우가 있습니다. 최상위 레이어(Top Layer)란 모든 콘텐츠와 레이어보다 위에 렌더링되는 레이어를 뜻합니다.

최상위 레이어는 특정한 요소가 렌더링될 때에만 자동으로 생성되며, 쌓임 맥락(Stacking context)의 우선순서에서 항상 최상위에 놓이게 됩니다.

최상위 레이어는 다음과 같은 경우에 생성됩니다.

자바스크립트의 showModal() 메서드로 열린 <dialog> 요소
popover 속성이 설정된 요소가 자바스크립트의 showPopover() 메서드로 표시되는 요소
자바스크립트의 requestFullscreen() 메서드로 호출되어 전체 화면으로 표시되는 요소

따라서, ::backdrop은 위 세 가지 경우에 사용할 수 있습니다.

주의할 점

::backdrop 가상 요소 선택자는 HTML과 CSS만으로 렌더링된 일반 요소에는 적용되지 않습니다.

살펴본 것처럼 최상위 레이어는 자바스크립트로 렌더링될 때에만 자동으로 생성된다는 것입니다.

기본 예제

이 예제에서는 <dialog> 요소와 ::backdrop 가상 요소를 사용해 모달 대화상자의 배경 레이어를 스타일링하는 방법을 살펴봅니다.
자바스크립트의 showModal()과 close() 메서드를 이용해 대화상자를 열고 닫으며, ::backdrop 선택자를 통해 배경에 그라데이션 효과를 적용하는 기본 동작을 확인할 수 있습니다.

HTML

<h4>::backdrop 가상 요소 선택자</h4>
<p>'대화 상자 열기' 버튼을 클릭하세요!</p>
<dialog id="my-dialog">  
    <p>이것은 대화 상자입니다.</p>
    <button id="close-btn" type="button" autofocus>대화 상자 닫기</button>
</dialog>
<button id="open-btn" type="button">대화 상자 열기</button>

JavaScript

const dialog = document.getElementById("my-dialog");
const showButton = document.getElementById("open-btn");
const closeButton = document.getElementById("close-btn");

// "대화 상자 열기" 버튼을 클릭하면 대화 상자가 모달 형식으로 엽니다. 
showButton.addEventListener("click", () => {
    dialog.showModal();
});

// "대화 상자 닫기" 버튼을 클릭하면 대화 상자를 닫습니다.
closeButton.addEventListener("click", () => {
    dialog.close();
});

예제에서는 <dialog> 요소와 ::backdrop 가상 요소를 활용해 모달 대화상자의 배경 레이어를 스타일링하는 방법을 보여줍니다. CSS의 dialog::backdrop 선택자를 통해 화면 전체를 덮는 배경 레이어에 그라데이션 효과를 적용하여 시각적 효과를 만들었습니다. ::backdrop 가상 요소가 최상위 레이어의 배경을 어떻게 스타일링하는지 이 예제로 쉽게 이해할 수 있습니다.

구문

브라우저 호환성

::backdrop 가상 요소의 브라우저 호환성
선택자	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`::backdrop`	37	79	47	15.4
`<dialog>` 요소에서 지원	32	79	98	15.4
`popover` 속성에서 지원	114	114	125	17
`requestFullscreen()` 메서드에서 지원	69	12	47	16.4