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

개방형 UI 이니셔티브의 목표는 개발자가 더 쉽게 우수한 사용자 환경을 만들 수 있도록 하는 것입니다. 이를 위해 개발자들이 직면하는 더 문제가 되는 패턴에 대처하기 위해 노력하고 있습니다. 더 나은 플랫폼에 내장된 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();

몇 가지 접근성 고려사항이 있습니다. 예를 들어 Safari 버전 15.4 미만 사용자를 대상으로 하는 경우 a11y-dialog를 사용하는 것이 좋습니다.

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

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

이를 위해서는 추가 종속 항목이 필요하고 개발자에게 더 많은 결정이 필요합니다. 또한 필요한 모든 것을 제공하는 제품을 찾기 위한 조사도 필요합니다. Popover API는 도움말을 비롯한 다양한 시나리오를 지원하는 것을 목표로 합니다. 목표는 이러한 일반적인 시나리오를 모두 포괄하여 개발자가 또 다른 결정을 내려야 하는 번거로움을 덜어주고 환경을 빌드하는 데 집중할 수 있도록 하는 것입니다.

첫 번째 팝업

이렇게 하면 됩니다.

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

그런데 어떻게 된 걸까요?

• 팝오버 요소는 컨테이너나 어떤 항목에도 넣지 않아도 됩니다. 이 요소는 기본적으로 숨겨져 있습니다.
• 자바스크립트 코드를 작성하지 않아도 결과가 표시됩니다. 이는 popovertoggletarget 속성에 의해 처리됩니다.
• 표시되면 최상위 레이어로 승격됩니다. 즉, 표시 영역에서 document 위로 승격됩니다. z-index를 관리하거나 DOM에서 팝오버의 위치를 신경 쓸 필요가 없습니다. 클리핑 상위 항목이 있는 DOM의 심층 중첩될 수 있습니다. 또한 DevTools를 통해 현재 최상위 레이어에 있는 요소를 확인할 수 있습니다. 상단 레이어에 대한 자세한 내용은 이 도움말을 참조하세요.

• '밝기 해제'가 기본으로 표시됩니다. 즉, 팝오버 외부를 클릭하거나 키보드로 다른 요소를 탐색하거나 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 그리드 또는 Flexbox를 사용하여 팝오버 내에 콘텐츠를 배치하려면 요소에 콘텐츠를 래핑하는 것이 좋습니다. 그러지 않으면 팝오버가 상단 레이어에 위치할 때 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로 설정했기 때문입니다.

그 전까지는 자바스크립트를 사용하여 해당 기능을 폴리필할 수 있습니다.

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 Anchoring API 개발 중).
• 밝은 모드 해제
• 열면 이전 팝오버가 아닌 다른 팝오버가 닫힙니다. 기존 팝오버의 중첩이 어떻게 작동하는지 강조하는 아래 데모를 사용해 보세요. 일부 popoverhidetarget/popovershowtarget 인스턴스를 popovertoggletarget로 변경하면 어떻게 달라지는지 알아보세요.
• 한 항목을 닫으면 모든 항목이 닫히지만 스택에서 하나를 닫으면 스택에서 위에 있는 항목만 닫힙니다.

[popover=manual]:

• 다른 팝오버는 닫히지 않습니다.
• 닫는 표시등이 없습니다.
• 트리거 요소 또는 자바스크립트를 통해 명시적으로 닫아야 합니다.

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-* 속성을 선언할 필요가 없습니다.

포커스 관리의 경우 자동 포커스 속성을 사용하여 포커스를 팝오버 내의 요소로 이동할 수 있습니다. 이는 대화상자와 동일하지만 포커스를 반환할 때 차이가 있으며 이는 라이트 닫기 때문입니다. 대부분의 경우 팝오버를 닫으면 이전에 포커스가 있었던 요소로 포커스가 반환됩니다. 그러나 포커스를 받을 수 있는 경우 라이트 닫기 시 포커스가 클릭된 요소로 이동합니다. 설명의 포커스 관리 섹션을 확인하세요.

이 데모의 '전체 화면 버전'을 열어야 작동하는지 확인할 수 있습니다.

이 데모에서는 포커스가 맞춰진 요소에 녹색 윤곽선이 표시됩니다. 키보드로 인터페이스를 탭하며 이동해 보세요. 팝오버가 닫힐 때 포커스가 반환되는 위치에 유의하세요. 탭을 하면 팝오버가 닫힌 것을 확인할 수도 있습니다. 처음부터 그렇게 설계되어 있습니다. 팝오버에는 포커스 관리가 있지만 포커스는 가리지 않습니다. 또한 키보드 탐색은 포커스가 팝오버 밖으로 이동할 때 닫기 신호를 식별합니다.

앵커링 (개발 중)

팝오버의 경우, 요소를 트리거에 고정하는 것이 까다로운 패턴입니다. 예를 들어 도움말이 트리거 위에 표시되도록 설정되었지만 문서가 스크롤되는 경우입니다. 이 도움말은 표시 영역에 의해 잘릴 수 있습니다. 현재 이 문제를 해결할 수 있는 '플로팅 UI'와 같은 자바스크립트 기능이 있습니다. 이를 중단하고 원하는 게재순위 순서를 적용할 수 있도록 도움말의 위치가 변경됩니다.

그러나 스타일을 사용하여 이를 정의할 수 있도록 해야 합니다. 이 문제를 해결하기 위해 Popover API와 함께 컴패니언 API가 개발 중입니다. 'CSS Anchor Positioning' API를 사용하면 요소를 다른 요소에 테더링할 수 있습니다. 이 작업은 표시 영역에서 잘리지 않도록 요소의 위치를 다시 지정하는 방식으로 이루어집니다.

이 데모에서는 현재 상태의 Anchoring 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 Anchoring API를 사용하기에 완벽한 또 다른 제품입니다.

탐색 창

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

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

배경화면 관리

이 데모는 하나의 ::backdrop만 표시하려는 여러 팝오버의 배경화면을 관리하는 방법을 보여줍니다.

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

맞춤 커서 팝오버

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

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

작업 시트 팝오버

이 데모는 팝오버를 작업 시트로 사용하는 방법을 보여줍니다.

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

키보드가 활성화된 팝오버

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

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

시간 표시 팝오버

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

• 일정 시간 활동이 없으면 팝오버를 표시하려면 자바스크립트를 사용합니다.
• 팝오버 프로그램에서 타이머를 재설정합니다.

화면 보호기

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

• 일정 시간 활동이 없으면 팝오버를 표시하려면 자바스크립트를 사용합니다.
• 타이머를 숨기고 재설정하려면 조명을 닫습니다.

캐럿 팔로우

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

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

플로팅 작업 버튼 메뉴

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

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

작업이 끝났습니다.

지금까지 오픈 UI 이니셔티브의 일환으로 팝오버에 대해 알아봤습니다. 합리적으로 사용할 경우 웹 플랫폼에 훌륭한 추가 기능이 될 것입니다.

UI 열기를 확인하세요. 팝오버 설명은 API가 발전함에 따라 최신 상태로 유지됩니다. 모든 데모를 위한 컬렉션을 확인해 보세요.

'팝핑'을 이용해 주셔서 감사합니다.

---

사진: 매디슨 오렌, Unsplash