Popover API가 Baseline에 도입

Una Kravets

동영상 공개 설정이 곧 변경됩니다. 가장 기대되는 기능 중 하나가 모든 최신 브라우저에 출시되었으며 공식적으로 기준 2024의 일부가 되었습니다. 이 기능이 바로 Popover API입니다. 팝오버는 도움말, 메뉴, 교육 UI와 같은 계층형 인터페이스를 빌드하기 위한 멋진 프리미티브와 개발자 어포던스를 제공합니다.

팝오버 기능의 몇 가지 주요 특징은 다음과 같습니다.

• 최상위 레이어로 승격 팝오버는 페이지의 나머지 부분 위에 있는 최상위 레이어에 표시되므로 z-index를 조작할 필요가 없습니다.
• 밝은 색상으로 닫기 기능 팝오버 영역 외부를 클릭하면 팝오버가 닫히고 포커스가 반환됩니다.
• 기본 포커스 관리 팝오버를 열면 다음 탭이 팝오버 내에서 중지됩니다.
• 접근 가능한 키보드 바인딩 esc 키를 누르거나 전환을 두 번 하면 팝오버가 닫히고 포커스가 돌아갑니다.
• 액세스 가능한 구성요소 결합. 의미론적으로 팝오버 요소를 팝오버 트리거에 연결합니다.

팝오버 만들기

팝오버를 만드는 것은 매우 간단합니다. 기본값을 사용하려면 팝오버를 트리거하는 button와 트리거할 요소만 있으면 됩니다.

• 먼저 팝오버가 될 요소에 popover 속성을 설정합니다.
• 그런 다음 팝오버 요소에 고유한 id를 추가합니다.
• 마지막으로 버튼을 팝오버에 연결하려면 버튼의 popovertarget를 팝오버 요소의 id 값으로 설정합니다.

다음 코드의 예시를 참조하세요.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

팝오버를 더 세부적으로 제어하려면 팝오버 유형을 명시적으로 설정하면 됩니다. 예를 들어 값이 없는 빈 popover 속성을 사용하는 것은 popover="auto"와 같습니다. auto 값은 조용히 닫기 동작을 사용 설정하고 다른 팝오버를 자동으로 닫습니다. popover="manual"를 사용하면 닫기 버튼을 추가해야 합니다. 수동 팝오버는 다른 팝오버를 닫지 않으며 사용자가 UI에서 클릭하여 팝오버를 닫을 수 있도록 허용하지 않습니다. 다음을 사용하여 수동 팝오버를 만듭니다.

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

팝오버와 모달 대화상자 비교

대화상자가 있는 경우 팝오버가 필요한지 궁금할 수 있습니다. 대답은 '필요하지 않을 수도 있습니다'입니다.

팝오버 속성은 그 자체로 의미론을 제공하지 않는다는 점에 유의해야 합니다. 이제 팝오버를 사용하여 모달 대화상자와 같은 환경을 빌드할 수 있지만 두 가지 사이에는 몇 가지 주요 차이점이 있습니다.

결론 및 추가 읽기 자료

popover는 플랫폼에 여러 가지 흥미로운 기능을 제공합니다. 이 API에 관한 자세한 내용(예: 기능의 접근성, 기능 세트 관련 문서)은 다음을 참고하세요.

• 시맨틱 및 팝오버 속성: 언제 어떤 것을 사용해야 하나요? 작성자: 히데 데 브리이스
• 팝오버 접근성: 브라우저에서 지원하는 기능 및 지원하지 않는 기능 - 히데 데 브리스
• 팝오버에 관한 MDN 문서