팝업: 다시 떠오르고 있습니다.

Jhey Tompkins

Open UI 이니셔티브의 목표는 개발자가 더 쉽게 뛰어난 사용자 환경을 만들 수 있도록 하는 것입니다. 이를 위해 Google은 개발자가 직면하는 더 심각한 패턴을 해결하려고 노력하고 있습니다. 더 나은 플랫폼 내장 API와 구성요소를 제공하면 됩니다.

이러한 문제 영역 중 하나는 Open UI에서 '팝오버'로 설명된 팝업입니다.

팝오버는 오랫동안 양극화된 평판을 받아 왔습니다. 이는 부분적으로 빌드 및 배포 방식 때문입니다. 이러한 패턴은 잘 구축하기가 쉽지 않지만, 특히 세련된 방식으로 사용하면 사용자를 특정 항목으로 안내하거나 사이트의 콘텐츠를 알리는 데 큰 가치를 제공할 수 있습니다.

팝오버를 빌드할 때는 다음과 같은 두 가지 주요 우려사항이 있습니다.

  • 다른 콘텐츠 위에 적절한 위치에 배치되도록 하는 방법
  • 접근성을 높이는 방법 (키보드 친화적, 포커스 가능 등)

내장된 Popover API에는 개발자가 이 패턴을 쉽게 빌드할 수 있도록 하는 동일한 전반적인 목표를 가진 다양한 목표가 있습니다. 이러한 목표 중 주목할 만한 목표는 다음과 같습니다.

  • 요소와 그 하위 요소를 문서의 나머지 부분 위에 쉽게 표시할 수 있습니다.
  • 제한 없는 액세스가 가능하고,
  • 가장 일반적인 동작 (가벼운 닫기, 싱글톤, 스태킹 등)에 JavaScript가 필요하지 않습니다.

OpenUI 사이트에서 팝업의 전체 사양을 확인할 수 있습니다.

브라우저 호환성

이제 내장된 Popover API를 어디에서 사용할 수 있나요? 이 기능은 이 문서 작성 시점에 Chrome Canary에서 '실험적 웹 플랫폼 기능' 플래그 뒤에 지원됩니다.

이 플래그를 사용 설정하려면 Chrome Canary를 열고 chrome://flags로 이동하세요. 그런 다음 '실험용 웹 플랫폼 기능' 플래그를 사용 설정합니다.

프로덕션 환경에서 이를 테스트하려는 개발자를 위한 오리진 트라이얼도 있습니다.

마지막으로 API용으로 개발 중인 polyfill이 있습니다. github.com/oddbird/popup-polyfill에서 저장소를 확인하세요.

다음 코드를 사용하여 팝업 지원을 확인할 수 있습니다.

const supported = HTMLElement.prototype.hasOwnProperty("popover");

현재 솔루션

현재 콘텐츠를 다른 콘텐츠보다 우선적으로 홍보하기 위해 할 수 있는 일은 무엇인가요? 브라우저에서 지원되는 경우 HTML 대화상자 요소를 사용할 수 있습니다. '모달' 형식으로 사용해야 합니다. 이를 사용하려면 JavaScript가 필요합니다.

Dialog.showModal();

접근성 관련 고려사항이 있습니다. 버전 15.4 미만의 Safari 사용자를 지원하는 경우 a11y-dialog를 사용하는 것이 좋습니다.

다양한 팝오버, 알림 또는 툴팁 기반 라이브러리 중 하나를 사용할 수도 있습니다. 이러한 앱은 대부분 비슷한 방식으로 작동합니다.

  • 팝오버를 표시하기 위해 본문에 컨테이너를 추가합니다.
  • 다른 모든 요소 위에 표시되도록 스타일을 지정합니다.
  • 요소를 만들고 컨테이너에 추가하여 팝오버를 표시합니다.
  • DOM에서 팝오버 요소를 삭제하여 숨깁니다.

이 경우 개발자에게 추가 종속 항목과 더 많은 결정이 필요합니다. 또한 필요한 모든 기능을 제공하는 제품을 찾기 위한 연구도 필요합니다. 팝오버 API는 툴팁을 비롯한 다양한 시나리오를 지원하는 것을 목표로 합니다. 목표는 이러한 일반적인 시나리오를 모두 다루어 개발자가 또 다른 결정을 내리지 않아도 되도록 하여 경험 구축에 집중할 수 있도록 하는 것입니다.

첫 번째 팝업

이것만 있으면 됩니다.

<div id="my-first-popover" popover>Popover Content!</div>
<button popovertoggletarget="my-first-popover">Toggle Popover</button>

하지만 여기서 무슨 일이 일어나고 있는 걸까요?

  • 팝오버 요소를 컨테이너 등에 넣을 필요는 없습니다. 기본적으로 숨겨져 있기 때문입니다.
  • JavaScript를 작성하지 않아도 됩니다. 이는 popovertoggletarget 속성으로 처리됩니다.
  • 표시되면 최상위 레이어로 승격됩니다. 즉, document 위에 표시 영역에 표시됩니다. z-index를 관리하거나 DOM에서 팝오버가 어디에 있는지 걱정할 필요가 없습니다. 클리핑 상위 요소가 있는 DOM에 깊이 중첩되어 있을 수 있습니다. DevTools를 통해 현재 최상위 레이어에 있는 요소를 확인할 수도 있습니다. 상단 레이어에 대해 자세히 알아보려면 이 도움말을 확인하세요.

DevTools 상위 레이어 지원을 보여주는 GIF

  • 기본적으로 '가벼운 닫기'가 제공됩니다. 즉, 팝오버 외부를 클릭하거나, 키보드로 다른 요소로 이동하거나, Esc 키를 누르는 등 닫기 신호로 팝오버를 닫을 수 있습니다. 다시 열고 사용해 보세요.

팝오버로 무엇을 할 수 있나요? 예를 더 자세히 살펴보겠습니다. 페이지에 콘텐츠가 있는 이 데모를 고려해 보세요.

플로팅 작업 버튼은 z-index가 높은 고정 위치를 갖습니다.

.fab {
  position: fixed;
  z-index: 99999;
}

팝오버 콘텐츠는 DOM에 중첩되어 있지만 팝오버를 열면 고정 위치 요소 위로 승격됩니다. 스타일을 설정할 필요가 없습니다.

이제 팝오버에 ::backdrop 가상 요소가 있는 것을 확인할 수 있습니다. 상위 레이어에 있는 모든 요소에는 스타일 지정이 가능한 ::backdrop 가상 요소가 적용됩니다. 이 예에서는 알파가 감소된 배경색과 기본 콘텐츠를 흐리게 처리하는 배경막 필터를 사용하여 ::backdrop의 스타일을 지정합니다.

팝오버 스타일 지정

이제 팝오버 스타일을 지정해 보겠습니다. 기본적으로 팝오버는 고정된 위치와 적용된 패딩이 있습니다. display: none도 있습니다. 이를 재정의하여 팝오버를 표시할 수 있습니다. 하지만 이렇게 하면 최상위 레이어로 승격되지 않습니다.

[popover] { display: block; }

팝오버를 홍보하는 방식과 관계없이 팝오버를 최상위 레이어로 승격한 후에는 레이아웃을 지정하거나 위치를 지정해야 할 수 있습니다. 최상위 레이어를 타겟팅하여 다음과 같은 작업을 할 수 없습니다.

:open {
  display: grid;
  place-items: center;
}

기본적으로 팝오버는 margin: auto를 사용하여 뷰포트 중앙에 배치됩니다. 하지만 경우에 따라서는 위치를 명시적으로 지정해야 할 수도 있습니다. 예를 들면 다음과 같습니다.

[popover] {
  top: 50%;
  left: 50%;
  translate: -50%;
}

CSS 그리드 또는 플렉스박스를 사용하여 팝오버 내에 콘텐츠를 배치하려면 요소를 래핑하는 것이 좋습니다. 그렇지 않으면 팝오버가 최상위 레이어에 있을 때 display를 변경하는 별도의 규칙을 선언해야 합니다. 기본적으로 설정하면 display: none를 재정의하여 기본적으로 표시됩니다.

[popover]:open {
 display: flex;
}

데모를 사용해 보셨다면 이제 팝오버가 전환되는 것을 알 수 있습니다. :open 가상 선택기를 사용하여 팝오버를 전환할 수 있습니다. :open 의사 선택기는 표시되는 팝오버 (따라서 최상위 레이어에 있음)와 일치합니다.

이 예에서는 맞춤 속성을 사용하여 전환을 유도합니다. 팝오버의 ::backdrop에도 전환을 적용할 수 있습니다.

[popover] {
  --hide: 1;
  transition: transform 0.2s;
  transform: translateY(calc(var(--hide) * -100vh))
            scale(calc(1 - var(--hide)));
}

[popover]::backdrop {
  transition: opacity 0.2s;
  opacity: calc(1 - var(--hide, 1));
}


[popover]:open::backdrop  {
  --hide: 0;
}

여기서 팁은 전환과 애니메이션을 모션 미디어 쿼리 아래에 그룹화하는 것입니다. 이렇게 하면 타이밍을 유지하는 데도 도움이 됩니다. 맞춤 속성을 통해 popover와 ::backdrop 간에 값을 공유할 수 없기 때문입니다.

@media(prefers-reduced-motion: no-preference) {
  [popover] { transition: transform 0.2s; }
  [popover]::backdrop { transition: opacity 0.2s; }
}

지금까지 popovertoggletarget를 사용하여 팝오버를 표시하는 방법을 살펴봤습니다. 이를 닫기 위해 '가벼운 닫기'를 사용합니다. 하지만 사용할 수 있는 popovershowtarget 및 popoverhidetarget 속성도 제공됩니다. 팝오버를 숨기는 버튼을 추가하고 전환 버튼이 popovershowtarget를 사용하도록 변경해 보겠습니다.

<div id="code-popover" popover>
  <button popoverhidetarget="code-popover">Hide Code</button>
</div>
<button popovershowtarget="code-popover">Reveal Code</button>

앞서 언급했듯이 Popover API는 기존의 팝업 개념보다 더 많은 것을 다룹니다. 알림, 메뉴, 도움말 등 모든 유형의 시나리오를 빌드할 수 있습니다.

이러한 시나리오 중 일부에는 다른 상호작용 패턴이 필요합니다. 마우스 오버와 같은 상호작용 popoverhovertarget 속성 사용은 실험되었지만 현재 구현되어 있지 않습니다.

<div popoverhovertarget="hover-popover">Hover for Code</div>

요소 위로 마우스를 가져가면 타겟이 표시된다는 아이디어입니다. 이 동작은 CSS 속성을 통해 구성할 수 있습니다. 이러한 CSS 속성은 팝오버가 반응하는 요소 위로 마우스를 가져가거나 마우스를 떼는 시간 범위를 정의합니다. 실험한 기본 동작에서는 명시적으로 :hover의 0.5s가 표시된 후에 팝오버가 표시되었습니다. 그런 다음 닫으려면 가벼운 닫기 또는 다른 팝오버 열기가 필요합니다 (자세한 내용은 곧 제공 예정). 이는 팝오버 숨기기 기간이 Infinity로 설정되어 있기 때문입니다.

그동안 JavaScript를 사용하여 해당 기능을 폴리필할 수 있습니다.

let hoverTimer;
const HOVER_TRIGGERS = document.querySelectorAll("[popoverhovertarget]");
const tearDown = () => {
  if (hoverTimer) clearTimeout(hoverTimer);
};
HOVER_TRIGGERS.forEach((trigger) => {
  const popover = document.querySelector(
    `#${trigger.getAttribute("popoverhovertarget")}`
  );
  trigger.addEventListener("pointerenter", () => {
    hoverTimer = setTimeout(() => {
      if (!popover.matches(":open")) popover.showPopover();
    }, 500);
    trigger.addEventListener("pointerleave", tearDown);
  });
});

명시적 호버 창을 설정하면 사용자의 액션이 의도적임을 보장할 수 있습니다 (예: 사용자가 타겟 위로 포인터를 이동함). 사용자가 의도하지 않는 한 팝업을 표시하지 않으려고 합니다.

창이 0.5s로 설정된 상태에서 타겟 위로 마우스를 가져갈 수 있는 이 데모를 사용해 보세요.

일반적인 사용 사례와 예를 살펴보기 전에 몇 가지 사항을 살펴보겠습니다.

팝오버 유형

JavaScript가 아닌 상호작용 동작을 다루었습니다. 하지만 전체적으로 팝오버 동작은 어떤가요? '가벼운 닫기'를 원하지 않는 경우 또는 팝오버에 싱글톤 패턴을 적용하고 싶으신가요?

팝오버 API를 사용하면 동작이 서로 다른 세 가지 유형의 팝오버를 지정할 수 있습니다.

[popover=auto]/[popover]:

  • 중첩 지원 DOM에 중첩된 것만을 의미하지는 않습니다. 상위 팝오버의 정의는 다음을 충족하는 팝오버입니다.
    • DOM 위치 (하위)로 연결됩니다.
    • popovertoggletarget, popovershowtarget 등의 하위 요소에서 트리거 속성에 의해 연결됩니다.
    • anchor 속성으로 연결됩니다 (개발 중인 CSS 앵커링 API).
  • 가벼운 닫기
  • 열면 상위 팝오버가 아닌 다른 팝오버가 닫힙니다. 아래 데모를 통해 상위 팝오버를 사용한 중첩이 어떻게 작동하는지 확인해 보세요. popoverhidetarget/popovershowtarget 인스턴스를 popovertoggletarget로 변경하면 어떻게 달라지는지 확인하세요.
  • 하나를 닫으면 모두 닫히지만 스택에서 하나를 닫으면 스택에서 그 위에 있는 항목만 닫힙니다.

[popover=manual]:

  • 다른 팝오버를 닫지 않습니다.
  • 조명 닫기 없음
  • 트리거 요소 또는 JavaScript를 통해 명시적으로 닫아야 합니다.

JavaScript API

팝오버를 더 세밀하게 제어해야 하는 경우 JavaScript를 사용하면 됩니다. showPopover 및 hidePopover 메서드를 모두 가져옵니다. popovershow 및 popoverhide 이벤트도 수신 대기할 수 있습니다.

팝오버 표시 js popoverElement.showPopover() 팝오버 숨기기:

popoverElement.hidePopover()

팝오버가 표시되는지 수신합니다.

popoverElement.addEventListener('popovershow', doSomethingWhenPopoverShows)

팝오버가 표시되는지 수신하고 표시를 취소합니다.

popoverElement.addEventListener('popovershow',event => {
  event.preventDefault();
  console.warn(‘We blocked a popover from being shown’);
})

팝오버가 숨겨지는지 수신 대기합니다.

popoverElement.addEventListener('popoverhide', doSomethingWhenPopoverHides)

숨겨진 팝오버는 취소할 수 없습니다.

popoverElement.addEventListener('popoverhide',event => {
  event.preventDefault();
  console.warn("You aren't allowed to cancel the hiding of a popover");
})

팝오버가 최상위 레이어에 있는지 확인합니다.

popoverElement.matches(':open')

이를 통해 일반적이지 않은 일부 시나리오에 추가 전력을 제공할 수 있습니다. 예를 들어 일정 시간 동안 활동이 없으면 팝오버를 표시합니다.

이 데모에는 소리가 나는 팝업이 있으므로 JavaScript를 사용하여 오디오를 재생해야 합니다. 클릭하면 팝오버가 숨겨지고 오디오가 재생된 후 다시 표시됩니다.

접근성

접근성은 Popover API의 사고방식에서 최우선 순위입니다. 접근성 매핑은 필요에 따라 팝오버를 트리거 요소와 연결합니다. 즉, popovertoggletarget와 같은 트리거링 속성 중 하나를 사용하는 경우 aria-haspopup과 같은 aria-* 속성을 선언할 필요가 없습니다.

포커스 관리의 경우 autofocus 속성을 사용하여 포커스를 팝오버 내부의 요소로 이동할 수 있습니다. 이는 대화상자와 동일하지만 포커스를 반환할 때 차이가 발생합니다. 이는 가벼운 닫기 때문입니다. 대부분의 경우 팝오버를 닫으면 포커스가 이전에 포커스가 있던 요소로 돌아갑니다. 하지만 포커스를 받을 수 있는 요소를 클릭하면 포커스가 해당 요소로 이동합니다. 설명서의 포커스 관리 섹션을 확인하세요.

이 데모가 작동하는 것을 보려면 데모의 '전체 화면 버전'을 열어야 합니다.

이 데모에서는 포커스가 있는 요소에 녹색 윤곽선이 표시됩니다. 키보드로 인터페이스를 탭해 보세요. 팝오버가 닫힐 때 포커스가 반환되는 위치를 확인합니다. 탭을 누르면 팝오버가 닫히는 것을 확인할 수도 있습니다. 이는 기본 설정입니다. 팝오버에는 포커스 관리가 있지만 포커스를 트랩하지는 않습니다. 또한 키보드 탐색은 포커스가 팝오버에서 벗어나면 닫기 신호를 식별합니다.

앵커링 (개발 중)

팝오버의 경우 요소를 트리거에 고정하는 것이 처리하기 까다로운 패턴입니다. 예를 들어 도움말이 트리거 위에 표시되도록 설정되었지만 문서가 스크롤되는 경우입니다. 이 도움말이 뷰포트에 의해 잘릴 수 있습니다. 이 문제를 처리하기 위한 현재 JavaScript 제품(예: 'Floating UI')이 있습니다. 이러한 요소는 이 문제가 발생하지 않도록 툴팁의 위치를 변경하고 원하는 위치 순서를 사용합니다.

하지만 스타일을 사용하여 이를 정의할 수 있어야 합니다. 이 문제를 해결하기 위해 Popover API와 함께 개발 중인 API가 있습니다. 'CSS 앵커 포지셔닝' API를 사용하면 요소를 다른 요소에 연결할 수 있으며, 뷰포트에 의해 잘리지 않도록 요소의 위치를 조정하는 방식으로 연결됩니다.

이 데모에서는 현재 상태의 고정 API를 사용합니다. 보트의 위치는 표시 영역에 있는 앵커의 위치에 따라 달라집니다.

이 데모가 작동하도록 하는 CSS 스니펫은 다음과 같습니다. JavaScript가 필요하지 않습니다.

.anchor {
  --anchor-name: --anchor;
}
.anchored {
  position: absolute;
  position-fallback: --compass;
}
@position-fallback --compass {
  @try {
    bottom: anchor(--anchor top);
    left: anchor(--anchor right);
  }
  @try {
    top: anchor(--anchor bottom);
    left: anchor(--anchor right);
  }
}

여기에서 사양을 확인할 수 있습니다. 이 API의 폴리필도 있습니다.

예

이제 팝오버가 제공하는 기능과 방법을 알았으니 몇 가지 예를 살펴보겠습니다.

알림

이 데모에서는 '클립보드에 복사' 알림을 보여줍니다.

  • [popover=manual] 시간대를 사용합니다.
  • 작업 시 showPopover이 포함된 팝오버를 표시합니다.
  • 2000ms 시간 제한이 지나면 hidePopover로 숨깁니다.

토스트 메시지

이 데모에서는 최상위 레이어를 사용하여 토스트 스타일 알림을 표시합니다.

  • manual 유형의 팝오버 하나가 컨테이너 역할을 합니다.
  • 새 알림이 팝오버에 추가되고 팝오버가 표시됩니다.
  • 클릭 시 웹 애니메이션 API를 사용하여 삭제되고 DOM에서 삭제됩니다.
  • 표시할 토스트가 없으면 팝오버가 숨겨집니다.

중첩 메뉴

이 데모에서는 중첩된 탐색 메뉴가 작동하는 방식을 보여줍니다.

  • [popover=auto]를 사용하세요. 중첩된 팝오버가 허용됩니다.
  • 키보드로 탐색하려면 각 드롭다운의 첫 번째 링크에서 autofocus를 사용하세요.
  • CSS Anchoring API에 적합한 후보입니다. 하지만 이 데모에서는 소량의 JavaScript를 사용하여 맞춤 속성을 통해 위치를 업데이트할 수 있습니다.
const ANCHOR = (anchor, anchored) => () => {
  const { top, bottom, left, right } = anchor.getBoundingClientRect();
  anchored.style.setProperty("--top", top);
  anchored.style.setProperty("--right", right);
  anchored.style.setProperty("--bottom", bottom);
  anchored.style.setProperty("--left", left);
};

PRODUCTS_MENU.addEventListener("popovershow", ANCHOR(PRODUCT_TARGET, PRODUCTS_MENU));

이 데모는 autofocus를 사용하므로 키보드 탐색을 위해 '전체 화면 보기'로 열어야 합니다.

미디어 팝오버

이 데모에서는 미디어를 팝업하는 방법을 보여줍니다.

  • 가벼운 닫기에 [popover=auto] 사용
  • JavaScript는 동영상의 play 이벤트를 수신 대기하고 동영상을 팝업합니다.
  • 팝오버 popoverhide 이벤트로 인해 동영상이 일시중지됩니다.

위키 스타일 팝오버

이 데모에서는 미디어가 포함된 인라인 콘텐츠 도움말을 만드는 방법을 보여줍니다.

  • [popover=auto] 시간대를 사용합니다. 하나를 표시하면 다른 항목은 조상 항목이 아니므로 숨겨집니다.
  • JavaScript를 사용하여 pointerenter에 표시됩니다.
  • CSS 앵커링 API에 적합한 또 다른 후보입니다.

이 데모에서는 팝오버를 사용하여 탐색 창을 만듭니다.

  • 가벼운 닫기에 [popover=auto] 사용
  • autofocus를 사용하여 첫 번째 탐색 항목에 포커스를 둡니다.

배경 관리

이 데모에서는 하나의 ::backdrop만 표시되도록 여러 팝오버의 배경을 관리하는 방법을 보여줍니다.

  • JavaScript를 사용하여 표시되는 팝오버 목록을 유지합니다.
  • 최상위 레이어에서 가장 낮은 팝오버에 클래스 이름을 적용합니다.

맞춤 커서 팝오버

이 데모에서는 popover를 사용하여 canvas를 최상위 레이어로 승격하고 이를 사용하여 맞춤 커서를 표시하는 방법을 보여줍니다.

  • showPopover 및 [popover=manual]를 사용하여 canvas를 최상위 레이어로 승격
  • 다른 팝오버가 열리면 canvas 팝오버를 숨기고 표시하여 최상단에 있는지 확인합니다.

Actionsheet 팝오버

이 데모에서는 팝오버를 액션 시트로 사용하는 방법을 보여줍니다.

  • display를 재정의하여 팝오버가 기본적으로 표시되도록 합니다.
  • 작업 시트가 팝오버 트리거로 열립니다.
  • 팝오버가 표시되면 최상위 레이어로 승격되고 뷰로 변환됩니다.
  • 가볍게 닫기를 사용하여 반환할 수 있습니다.

키보드 활성화 팝오버

이 데모에서는 명령 팔레트 스타일 UI에 팝오버를 사용하는 방법을 보여줍니다.

  • cmd + j를 사용하여 팝오버를 표시합니다.
  • input은 autofocus으로 포커스가 지정됩니다.
  • 콤보 박스는 기본 입력 아래에 배치된 두 번째 popover입니다.
  • 드롭다운이 없는 경우 가벼운 닫기는 팔레트를 닫습니다.
  • Anchoring API의 또 다른 후보

시간 제한 팝오버

이 데모에서는 4초 후에 비활성 팝오버가 표시됩니다. 사용자에 관한 보안 정보를 보유한 앱에서 로그아웃 모달을 표시하는 데 자주 사용되는 UI 패턴입니다.

  • 비활성 상태가 일정 시간 지속된 후 JavaScript를 사용하여 팝오버를 표시합니다.
  • 팝오버 표시 시 타이머를 재설정합니다.

화면 보호기

이전 데모와 마찬가지로 사이트에 재미를 더하고 화면 보호기를 추가할 수 있습니다.

  • 비활성 상태가 일정 시간 지속된 후 JavaScript를 사용하여 팝오버를 표시합니다.
  • 가볍게 닫아 타이머를 숨기고 재설정합니다.

캐럿 팔로우

이 데모는 팝오버가 입력 캐럿을 따르도록 하는 방법을 보여줍니다.

  • 선택, 키 이벤트 또는 특수 문자 입력에 따라 팝오버를 표시합니다.
  • JavaScript를 사용하여 범위가 지정된 맞춤 속성으로 팝오버 위치를 업데이트합니다.
  • 이 패턴에서는 표시되는 콘텐츠와 접근성을 신중하게 고려해야 합니다.
  • 태그를 지정할 수 있는 텍스트 편집 UI 및 앱에서 자주 볼 수 있습니다.

플로팅 작업 버튼 메뉴

이 데모에서는 JavaScript 없이 플로팅 작업 버튼 메뉴를 구현하기 위해 팝오버를 사용하는 방법을 보여줍니다.

  • showPopover 메서드를 사용하여 manual 유형 팝오버를 승격합니다. 이 버튼이 기본 버튼입니다.
  • 메뉴는 기본 버튼의 타겟인 또 다른 팝오버입니다.
  • popovertoggletarget로 메뉴가 열립니다.
  • autofocus를 사용하여 표시된 첫 번째 메뉴 항목에 포커스를 맞춥니다.
  • 가볍게 닫으면 메뉴가 닫힙니다.
  • 아이콘 비틀기는 :has()를 사용합니다. :has()에 관한 자세한 내용은 이 도움말을 참고하세요.

작업이 끝났습니다.

지금까지 Open UI 이니셔티브의 일환으로 출시될 예정인 팝오버를 간략하게 살펴보았습니다. 현명하게 사용하면 웹 플랫폼에 훌륭한 기능이 될 것입니다.

Open UI를 확인해 보세요. 팝오버 설명은 API가 발전함에 따라 최신 상태로 유지됩니다. 모든 데모의 컬렉션은 여기에서 확인할 수 있습니다.

방문해 주셔서 감사합니다.