Popover API
기본 제공 popover 속성으로 툴팁과 대화 상자 만들기
Popover API은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Popover API의 기능
팝오버 API는 수동으로 JavaScript를 작성하지 않고도 HTML에서 팝오버, 대화 상자, 도구 설명, 메뉴를 만드는 기본 기능을 제공합니다. 위치 지정, 포커스 처리, 바깥쪽 클릭으로 닫기, Escape 키로 닫기를 브라우저가 처리합니다. 기본 제공 동작은 사용자의 기대에 부합합니다.
popover 특성
어떤 요소에든 popover를 추가하면 팝오버로 만들 수 있습니다. 기본적으로 숨겨져 있습니다. popovertarget="popover-id"가 지정된 트리거 버튼을 클릭하면 팝오버가 표시됩니다. 브라우저가 열림 및 닫힘 상태를 자동으로 처리합니다.
<button popovertarget="info">Show details</button>
<div id="info" popover>
<p>Here is some popover content.</p>
</div>팝오버 모드
popover="auto"(기본값)는 바깥쪽 클릭이나 Escape 키를 누르면 자동으로 닫히며, 한 번에 하나의 자동 팝오버만 열 수 있습니다. popover="manual"은 자동으로 닫히지 않으며, JS나 다른 트리거를 통해 명시적으로 닫아야 합니다.
트리거 버튼
popovertarget 특성은 id를 기준으로 버튼과 팝오버를 연결합니다. 브라우저가 전환 동작을 처리하므로 버튼을 클릭하면 표시되고, 다시 클릭하거나 바깥쪽을 클릭하면 닫힙니다. 기본적인 사용에는 이벤트 처리기가 필요하지 않습니다.
최상위 레이어 렌더링
팝오버는 최상위 레이어에서 렌더링되므로 z-index나 쌓임 맥락과 관계없이 다른 모든 콘텐츠 위에 표시됩니다. 이로써 직접 만든 팝오버에서 흔히 발생하는, "overflow:hidden 부모 요소 뒤에 모달이 숨는" 고전적인 버그가 사라집니다.
프로그래밍 방식으로 표시하고 숨기기
JavaScript로 팝오버를 표시하거나 숨길 수 있습니다. element.showPopover(), element.hidePopover(), element.togglePopover()을 사용하세요. 선언적 트리거와 의미가 동일하므로 자동 모드에서는 바깥쪽 클릭으로 닫는 동작도 계속 작동합니다.
toggle 이벤트
팝오버의 상태가 변경되면 toggle 이벤트가 발생합니다. 이벤트의 newState는 "open" 또는 "closed"입니다. 분석, 포커스 관리 또는 팝오버의 열림 상태에 맞춰 다른 UI를 조정할 때 유용합니다.
popoverEl.addEventListener("toggle", (e) => {
console.log("Popover is now", e.newState);
});CSS 의사 클래스
:popover-open 의사 클래스는 열린 상태의 팝오버와 일치합니다. 이 상태를 기준으로 전환, 불투명도, 변형을 지정할 수 있습니다. [popover]:popover-open { opacity: 1; transform: none; }처럼 작성합니다.
앵커 위치 지정
CSS 앵커 위치 지정 API와 함께 사용하면 팝오버를 트리거를 기준으로 자동 배치할 수 있습니다. "버튼 근처에 도구 설명 표시"와 같은 전형적인 패턴에 JavaScript가 필요하지 않습니다. 두 기능 모두 현대적인 사용자 인터페이스 기본 요소를 강화하려는 같은 흐름에 속합니다.
접근성
브라우저는 모달 팝오버의 포커스를 가두고, 닫을 때 트리거로 포커스를 복원하며, 화면 읽기 프로그램에 팝오버의 열림 상태를 알립니다. 이를 직접 구현하려면 상당한 ARIA 상용구 코드가 필요하지만, 팝오버 API는 이 기능을 기본으로 제공합니다.
브라우저 지원
Chrome과 Safari는 팝오버 API를 지원하며, Firefox도 최근에 지원을 추가했습니다. 더 폭넓은 호환성이 필요하다면 작은 폴리필을 사용할 수 있습니다. 새 프로젝트는 기본 기능을 사용하고 이전 브라우저에는 점진적 향상을 적용할 수 있습니다.
기존 패턴 대체하기
많은 JS 모달 라이브러리(sweetalert, react-modal)는 주로 팝오버 API가 이제 기본으로 제공하는 기능을 보완하기 위해 존재합니다. 마이그레이션을 계획하세요. 번들 크기가 작아지고, 기본 동작이 개선되며, 유지 관리할 코드가 줄어듭니다. 팝오버 API는 수년 만에 이루어진 HTML의 가장 큰 개선 중 하나입니다.
지식 확인
popover="auto"는 popover="manual"과 달리 어떤 동작을 하나요?
요약
팝오버 API는 popover 특성, showPopover/hidePopover/togglePopover JS, popovertarget 트리거 연결, 모든 쌓임 맥락 위에 표시되는 최상위 레이어 렌더링, :popover-open 의사 클래스, toggle 이벤트를 추가합니다. 자동 모드는 바깥쪽 클릭으로 닫히고, 수동 모드는 명시적인 제어가 필요합니다. 접근성, 포커스, z-index를 올바르게 처리하는 하나의 HTML 기본 요소로 대부분의 사용자 지정 모달 및 도구 설명 라이브러리를 대체할 수 있습니다.
자주 묻는 질문
“Popover API” 강의는 무료인가요?
네 — “Popover API” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Popover API”에서 뭘 배우나요?
기본 제공 popover 속성으로 툴팁과 대화 상자 만들기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.
“Popover API” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.