팝오버 API(Popover API)
Popover API란 HTML 요소에 팝업 인터페이스를 쉽게 추가하기 위한 웹 표준 API입니다.
Popover API를 사용하면 툴팁, 드롭다운, 컨텍스트 메뉴 등 다양한 팝업 UI를 간단히 구현할 수 있습니다. 또한 HTML의 dialog 요소처럼 동적인 팝업 콘텐츠를 제어하기 위한 기능을 제공합니다.
HTML의 dialog 요소처럼 동적인 팝업 콘텐츠를 제어하기 위한 기능을 제공합니다.
최신 브라우저에서 지원이 점진적으로 확대되고 있으며, 별도의 JavaScript 라이브러리 없이도 기본 기능을 제공합니다.
특징
간단한 사용법
HTML 속성을 활용하여 팝업을 쉽게 정의할 수 있고, popover 속성만으로 팝업을 동작시킬 수 있습니다.
접근성 지원
기본적으로 ARIA와 호환되어 접근성을 고려한 팝업을 만들 수 있습니다.
브라우저 렌더링 최적화
브라우저가 팝업의 위치를 자동으로 계산하여 표시합니다.
CSS와의 호환성
팝업 스타일을 CSS로 쉽게 커스터마이징할 수 있고 완벽히 제어할 수 있습니다.
기본 사용법
HTML의 popover 속성을 활용하여 팝업을 생성하고 제어합니다.
See the Pen Untitled by 정준희 (@vpxeritk-the-looper) on CodePen.
속성 종류
popover="manual"
수동으로 팝업을 제어합니다. JavaScript로 popover를 열거나 닫아야 합니다.
popover="auto"
팝업이 버튼과 연결되며 브라우저가 자동으로 팝업을 열고 닫습니다.
hidden
팝업의 초기 상태를 숨김으로 설정합니다.
popover-visible
팝업이 열렸을 때 추가되는 속성입니다.
브라우저 지원
Popover API는 코드량을 줄이고 접근성을 향상시켜 UI 개발을 보다 쉽고 직관적으로 만들어주는 강력한 도구입니다.
2024년 기준으로, Popover API는 최신 크롬, 에지와 같은 일부 브라우저에서 지원되며, 파이어폭스 및 사파리는 점진적으로 지원을 추가하고 있습니다.
따라서 크로스브라우저 호환성을 위해 적절한 폴리필을 사용하거나 대체 코드를 제공하는 것이 좋습니다.