Popover API가 Baseline에 도입

Una Kravets

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

브라우저 지원

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

소스

팝오버 기능의 몇 가지 간단한 특징은 다음과 같습니다.

  • 최상위 레이어로 승격 팝오버는 페이지 나머지 부분 위의 상단 레이어에 표시되므로 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>
드림 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.
팝오버 속성 사용의 기본 예

팝오버를 더 세부적으로 제어하기 위해 팝오버 유형을 명시적으로 설정할 수 있습니다. 예를 들어 값이 없는 기본적인 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>
드림 <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">를 통해 개인정보처리방침을 정의할 수 있습니다.
수동 팝오버의 예
를 통해 개인정보처리방침을 정의할 수 있습니다.

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

대화상자가 있을 때 팝오버가 필요한지 궁금할 수 있지만 답은 필요하지 않을 수도 있습니다.

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

모달 <dialog> 요소

  • dialog.showModal()(으)로 파일을 열었습니다.
  • dialog.close()(으)로 종료되었습니다.
  • 페이지의 나머지 부분을 비활성으로 만듭니다.
  • 라이트 닫기 동작을 지원하지 않습니다.
  • [open] 속성을 사용하여 열린 상태의 스타일을 지정할 수 있습니다.
  • 페이지의 나머지 부분과의 상호작용을 차단하는 상호작용 구성요소를 의미론적으로 나타냅니다.

[popover] 속성

  • 선언적 호출자 (popovertarget)로 열 수 있습니다.
  • popovertarget (자동 팝오버) 또는 popovertargetaction=hide (수동 팝오버)으로 닫힘
  • 페이지의 나머지 부분을 비활성으로 만들지 않습니다.
  • 라이트 끄기 동작을 지원합니다.
  • :popover-open 의사 클래스를 사용하여 열린 상태의 스타일을 지정할 수 있습니다.
  • 내재된 의미 체계가 없습니다.

결론 및 추가 자료

popover에서 플랫폼에 제공되는 흥미로운 기능을 많이 제공합니다. 기능의 접근성에 대한 자세한 내용 및 기능 세트 관련 문서를 포함하여 이 API에 대해 자세히 알아보려면 다음 권장 읽기 자료를 참조하세요.