팝오버 API 소개

Una Kravets

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

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

팝오버 속성

복잡한 문제를 모두 직접 관리하는 대신 popover 속성 및 후속 기능 세트를 사용하여 브라우저가 이를 처리하도록 할 수 있습니다. HTML 팝오버 지원:

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

이제 자바스크립트를 사용하지 않고도 이 모든 기능을 갖춘 팝오버를 만들 수 있습니다. 기본 팝오버에는 다음 세 가지가 필요합니다.

• 팝오버가 포함된 요소의 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를 사용한 팝오버:

• 팝오버가 열리면 다른 팝오버를 강제 종료합니다.
• 가볍게 닫을 수 있습니다.

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 고정이 사용됩니다.

다음 방사형 메뉴 데모에서는 팝오버 API를 CSS 앵커 위치 지정과 함께 사용하여 팝오버 #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;
}

이제 전환 버튼에 고정된 모든 기능을 갖춘 팝오버 메뉴가 생겼으며 팝오버의 모든 내장 기능이 포함되어 있습니다. 자바스크립트는 필요하지 않습니다.

결론

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

추가 자료

• 대화상자와 팝오버는 비슷해 보이지만 어떤 점이 다른가요?
• 시맨틱 및 팝오버 속성
• 팝오버에 관한 MDN 문서
• OpenUI 팝오버 설명