네이티브 팝업 API
네이티브 팝업 API (Popover 속성)
과거에는 팝업이나 툴팁을 띄우려면 복잡한 자바스크립트 상태 관리(State)와 CSS의
하지만 모던 HTML에서는 글로벌
z-index 속성을 조작하며 "어떤 요소가 가장 위에 있는지" 싸워야 했습니다.하지만 모던 HTML에서는 글로벌
popover 속성 하나로 이 모든 것을 해결할 수 있습니다. 자바스크립트 한 줄 없이도 바깥을 누르면 닫히는(Light Dismiss) 완벽한 팝업이 만들어집니다!
1. z-index 전쟁의 종식 (Top Layer)
버튼을 누르면 브라우저가 알아서 다른 모든 요소를 무시하고 최상단(Top Layer)에 팝업을 띄워줍니다.
2. Popover API 핵심 속성 모음
| 속성명 | 적용 태그 | 설명 및 역할 |
|---|---|---|
popover |
팝업 박스 (<div>) |
이 요소가 팝업임을 브라우저에 알립니다. 평소에는 자동으로 display: none 처리되어 숨겨집니다. |
popovertarget="id" |
버튼 (<button>) |
어떤 ID를 가진 팝업을 열 것인지 타겟을 지정합니다. 클릭하면 타겟 팝업이 화면 중앙 최상단에 열립니다. |
popovertargetaction |
버튼 (<button>) |
버튼의 동작을 명시합니다. hide(닫기), show(열기), toggle(열고닫기, 기본값) 중 선택합니다. |
::backdrop |
CSS 선택자 | 팝업이 떴을 때 뒤쪽에 깔리는 어두운 배경 화면을 스타일링하는 가상 요소입니다. 블러(blur) 효과 등을 줄 수 있습니다. |
<div class="demo-container">
<h2>🎉 네이티브 Popover API</h2>
<p class="hint">자바스크립트 한 줄 없이 작동하는 팝업입니다!</p>
<!-- 1. 팝업을 열 트리거 버튼 -->
<!-- popovertarget 속성에 열고자 하는 팝업의 ID를 적습니다. -->
<button popovertarget="info-tooltip" class="action-btn">
마법의 팝업 열기 ✨
</button>
<!-- 2. 실제 팝업 영역 -->
<!-- popover 속성만 추가하면 평소에는 display: none 상태로 숨겨집니다. -->
<!-- Top Layer(최상단)에 그려지므로 z-index 싸움을 할 필요가 없습니다. -->
<div id="info-tooltip" popover class="popover-box">
<h3>안녕? 난 팝업이야! 🎈</h3>
<p>바깥의 어두운 영역(Backdrop)을 클릭하거나<br>ESC 키를 누르면 알아서 닫힙니다.</p>
<hr>
<!-- 팝업 내부의 닫기 버튼 (popovertargetaction="hide") -->
<button popovertarget="info-tooltip" popovertargetaction="hide" class="close-btn">
닫기
</button>
</div>
</div>