Popover API — JavaScript 없이 팝오버 만들기

기본 Popover

<button popovertarget="my-popover">열기</button>

<div id="my-popover" popover>
  <h3>팝오버 내용</h3>
  <p>자동으로 top-layer에 표시됩니다.</p>
  <button popovertarget="my-popover" popovertargetaction="hide">
    닫기
  </button>
</div>

CSS 스타일링

[popover] {
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

[popover]::backdrop {
  background: rgba(0,0,0,0.3);
}

/* 열기/닫기 애니메이션 */
[popover]:popover-open {
  opacity: 1;
  transform: scale(1);
}

Light dismiss(바깥 클릭으로 닫기)가 기본 지원됩니다.