💬
Popover API
HTML 네이티브 팝오버/모달 구현
모달이나 팝오버 UI를 구현하려면 z-index 관리, 포커스 트랩, ESC 키 닫기, 배경 클릭 닫기 등 복잡한 로직이 필요했습니다. HTML popover 속성을 사용하면 브라우저가 이 모든 것을 네이티브로 처리합니다.
popovertarget 속성으로 트리거 버튼을 연결하고, 톱 레이어(top layer)에서 자동으로 렌더링되어 z-index 전쟁에서 해방됩니다. 접근성 기능도 기본 내장되어 있습니다.
적용 방법
1
팝오버 콘텐츠 요소에 popover 속성을 추가한다
2
트리거 버튼에 popovertarget="팝오버ID"를 지정한다
3
::backdrop 의사 요소로 배경 오버레이를 스타일링한다
4
popover=manual로 프로그래밍 방식 제어가 필요한 경우를 처리한다
장점
- ✓ z-index 관리, 포커스 트랩, ESC 닫기가 자동 처리된다
- ✓ 접근성(ARIA)이 기본 내장되어 추가 작업이 불필요하다
단점
- ✗ 복잡한 모달 시나리오(중첩 모달 등)는 추가 처리가 필요할 수 있다
- ✗ 기존 모달 라이브러리와의 혼용 시 충돌이 발생할 수 있다
사용 사례
설정 패널이나 필터 드로어 구현
확인 대화상자(confirm dialog)를 라이브러리 없이 구현