Popover API가 Baseline에 도입

Una Kravets

동영상 공개 설정이 곧 변경됩니다. 제가 가장 기대하는 기능 중 하나는 이제 막 모든 최신 브라우저에 적용되었으며, 이는 공식적으로 Baseline 2024의 일부입니다. 이 기능은 팝오버 API입니다. Popover는 도움말, 메뉴, 교육 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에 대한 자세한 내용은 다음 자료를 참조하세요.

• 의미론 및 팝오버 속성: Hidde de Vries의 언제 사용해야 할까요?
• 팝오버 접근성: Hidde de Vries가 브라우저의 기능과 하지 않는 작업
• 팝오버에 관한 MDN 문서