팝오버 API 소개

Una Kravets

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

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

팝오버 속성

브라우저 지원

  • 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">

소스

모든 복잡성을 직접 관리하는 대신 브라우저에서 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를 사용하여 명시적인 팝오버를 만들 수도 있습니다. 이렇게 하면 기본 toggle 작업이 재정의됩니다. 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는 기본적으로 웹 애플리케이션을 더 쉽게 관리하고 액세스할 수 있도록 하는 일련의 새로운 기능 중 첫 번째 단계입니다. 팝오버를 어떻게 사용하실지 기대됩니다.

추가 자료