팝오버 API 소개

Una Kravets

팝오버는 웹의 어디에나 있습니다. 메뉴, 전환 도움말, 대화상자에서 확인할 수 있으며 계정 설정, 공개 문구 위젯, 제품 카드 미리보기로 표시될 수 있습니다. 이러한 구성요소가 널리 사용되고 있지만 브라우저에서 빌드하는 것은 여전히 매우 번거롭습니다. 포포버의 유용하고 고유한 핵심 기능을 빌드하기 전에 포커스, 열기 및 닫기 상태, 구성요소에 액세스할 수 있는 후크, 환경에 진입하고 종료하는 키보드 바인딩을 관리하는 스크립트를 추가해야 합니다.

이 문제를 해결하기 위해 팝오버를 빌드하기 위한 새로운 선언적 HTML API 세트가 Chromium 114의 popover API를 시작으로 브라우저에 제공됩니다.

팝오버 속성

복잡한 작업을 모두 직접 관리하는 대신 popover 속성 및 후속 기능 세트를 사용하여 브라우저에서 처리하도록 할 수 있습니다. HTML 팝오버는 다음을 지원합니다.

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

이제 JavaScript를 사용하지 않고도 이러한 모든 기능을 사용하여 팝오버를 빌드할 수 있습니다. 기본 팝오버에는 다음 세 가지가 필요합니다.

• 팝오버가 포함된 요소의 popover 속성입니다.
• 팝오버가 포함된 요소의 id
• 팝오버를 여는 요소에 팝오버의 id 값이 있는 popovertarget입니다.

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

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

이제 완전히 작동하는 기본 팝오버가 생겼습니다.

이 팝오버는 추가 정보를 전달하거나 공개 위젯으로 사용할 수 있습니다.

기본값 및 재정의

기본적으로 이전 코드 스니펫과 같이 popovertarget로 팝오버를 설정하면 팝오버를 여는 버튼이나 요소가 팝오버를 켜거나 끌 수 있습니다. 하지만 popovertargetaction를 사용하여 명시적 팝오버를 만들 수도 있습니다. 이렇게 하면 기본 전환 작업이 재정의됩니다. popovertargetaction 옵션은 다음과 같습니다.

popovertargetaction="show": 팝오버를 표시합니다. popovertargetaction="hide": 팝오버를 숨깁니다.

popovertargetaction="hide"를 사용하면 다음 스니펫과 같이 팝오버 내에 '닫기' 버튼을 만들 수 있습니다.

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

자동 팝오버와 수동 팝오버 비교

popover 속성을 단독으로 사용하는 것은 실제로 popover="auto"의 단축형입니다. 열리면 기본 popover는 상위 요소 팝오버를 제외한 다른 자동 팝오버를 강제로 닫습니다. 조용히 닫기 또는 닫기 버튼을 통해 닫을 수 있습니다.

반면 popover=manual를 설정하면 수동 팝오버라는 다른 유형의 팝오버가 생성됩니다. 이러한 요소는 다른 요소 유형을 강제로 닫지 않으며 조용히 닫기를 통해 닫히지 않습니다. 타이머 또는 명시적인 닫기 작업을 통해 닫아야 합니다. popover=manual에 적합한 팝오버 유형은 표시되고 사라지지만 토스트 알림과 같이 페이지의 나머지 부분에는 영향을 미치지 않는 요소입니다.

위의 데모를 살펴보면 팝오버 영역 외부를 클릭해도 팝오버가 밝게 닫히지 않는 것을 확인할 수 있습니다. 또한 다른 팝오버가 열려 있는 경우 닫히지 않았습니다.

차이점을 검토하려면 다음 단계를 따르세요.

popover=auto를 사용한 팝오버:

• 열리면 다른 팝오버를 강제 종료합니다.
• light-dismiss할 수 있습니다.

popover=manual를 사용한 팝오버:

• 다른 요소 유형은 강제로 닫지 마세요.
• 조용히 닫지 마세요. 전환 버튼이나 닫기 작업을 사용하여 닫습니다.

팝오버 스타일 지정

지금까지 HTML의 기본 팝오버에 관해 알아봤습니다. 하지만 popover에는 몇 가지 멋진 스타일 지정 기능도 있습니다. 그 중 하나는 ::backdrop의 스타일을 지정하는 기능입니다.

auto 팝오버에서 이 레이어는 팝오버가 있는 최상위 레이어 바로 아래에 있는 레이어로, 페이지의 나머지 부분 위에 있습니다. 다음 예에서는 ::backdrop에 반투명 색상이 지정됩니다.

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

popover와 dialog의 차이점

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

dialog.showModal (모달 대화상자)로 열린 dialog 요소는 모달을 닫으려면 명시적인 사용자 상호작용이 필요한 환경입니다. popover는 빛 닫기를 지원합니다. 모달 dialog은 그렇지 않습니다. 모달 대화상자는 페이지의 나머지 부분을 비활성화합니다. popover는 그렇지 않습니다.

위의 데모는 팝오버 동작이 있는 시맨틱 대화상자입니다. 즉, 페이지의 나머지 부분은 비활성 상태가 아니며 대화상자 팝오버는 밝은 닫기 동작을 갖습니다. 다음 코드를 사용하여 팝오버 동작으로 이 대화상자를 빌드할 수 있습니다.

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

출시 예정

양방향 진입 및 종료

display: none와의 애니메이션, 최상위 레이어와의 애니메이션을 포함하여 불연속 속성을 애니메이션할 수 있는 기능은 아직 브라우저에서 사용할 수 없습니다. 하지만 이 출시 직후에 예정된 Chromium의 향후 버전에서 지원될 예정입니다.

개별 속성을 애니메이션 처리하는 기능과 :popover-open 및 @starting-style를 사용하면 변경 전 스타일과 변경 후 스타일을 설정하여 팝오버를 열고 닫을 때 원활한 전환을 지원할 수 있습니다. 이전 예를 살펴보겠습니다. 애니메이션을 사용하면 훨씬 더 부드럽게 보이고 더 유연한 사용자 환경을 지원할 수 있습니다.

앵커 위치 지정

팝오버는 표시 영역을 기반으로 알림, 모달 또는 알림을 배치하려는 경우에 유용합니다. 하지만 팝오버는 메뉴, 도움말, 다른 요소를 기준으로 배치해야 하는 기타 요소에도 유용합니다. 이때 CSS 고정이 사용됩니다.

다음 방사형 메뉴 데모에서는 CSS 앵커 위치 지정과 함께 팝오버 API를 사용하여 팝오버 #menu-items가 항상 전환 트리거인 #menu-toggle 버튼에 고정되도록 합니다.

앵커 설정은 팝오버 설정과 유사합니다.

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

id (이 예에서는 #menu-toggle)를 지정하여 앵커를 설정한 다음 anchor="menu-toggle"를 사용하여 두 요소를 연결합니다. 이제 anchor()를 사용하여 팝오버의 스타일을 지정할 수 있습니다. 앵커 전환 버튼의 기준선에 고정된 가운데 정렬된 팝오버 메뉴의 스타일은 다음과 같습니다.

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

이제 전환 버튼에 고정되고 팝오버의 모든 내장 기능을 갖춘 완전한 기능의 팝오버 메뉴가 생성되었습니다. JavaScript가 필요하지 않습니다.

결론

팝오버 API는 웹 애플리케이션 빌드를 더 쉽게 관리하고 기본적으로 더 쉽게 액세스할 수 있도록 하는 일련의 새로운 기능 중 첫 번째 단계입니다. 팝오버를 어떻게 사용하시는지 기대됩니다.

추가 자료

• 대화상자와 팝오버는 비슷해 보입니다. 어떤 점이 다른가요?
• 의미론 및 팝오버 속성
• 팝오버에 관한 MDN 문서
• OpenUI 팝오버 설명