팝오버 및 대화상자

팝오버는 popover 속성이 있는 요소이며, 툴팁, 알림, 토스트 등 다양한 대화형 패턴에 유용합니다.

<div id="my-popover" popover>My popover content</div>

popover 속성은 기본적으로 요소를 숨기므로 사용자가 요소를 열 수 있는 방법을 제공해야 합니다. 팝오버는 다른 모든 콘텐츠 위의 최상위 레이어에 배치되지만 모달은 아닙니다. 즉, 팝오버 외부의 콘텐츠와 계속 상호작용할 수 있습니다.

팝오버 제어

다양한 종류의 팝오버와 그 동작을 살펴보기 전에 팝오버를 열고 닫는 방법을 알아보세요.

선언적으로

팝오버는 JavaScript를 사용하지 않고도 버튼 (및 button 유형의 입력)과 popovertarget 속성을 사용하여 HTML에서 완전히 제어할 수 있습니다.

이전 코드 스니펫의 팝오버에는 my-popover의 id이 있으며 이를 사용하여 팝오버를 참조할 수 있습니다.

<button popovertarget="my-popover">Toggle</button>

popovertargetaction="show" 및 popovertargetaction="hide"를 사용하여 버튼이 팝오버를 열거나 닫아야 하는지 지정할 수도 있습니다.

JavaScript 사용

JavaScript를 사용하여 팝오버를 제어할 수도 있습니다. 이는 사용자가 버튼을 클릭하는 것 외에 다른 작업에 대한 응답으로 팝오버를 표시하려는 경우에 유용합니다. 이렇게 하려면 팝오버 요소를 가져온 다음 showPopover(), hidePopover() 또는 togglePopover()를 호출해야 합니다.

팝오버 유형

사이트에 팝오버를 추가할 때는 고려해야 할 상호작용이 많습니다. 어떻게 열리나요? 사용자가 어떻게 닫을 수 있나요? 열려 있는 다른 팝오버는 어떻게 되나요? 세 가지 유형의 팝오버가 있으며 사용 사례에 필요한 동작과 상호작용을 제공하는 유형을 선택할 수 있습니다.

자동 팝오버

자동 팝오버에는 가장 많은 기능이 내장되어 있으며 유형을 지정하지 않으면 기본값입니다.

<div id="popover" popover>My popover</div>

대부분의 경우 여러 팝오버가 동시에 열리지 않도록 자동 팝오버가 열리면 다른 자동 팝오버가 닫힙니다. 또한 '가벼운 닫기'를 지원하므로 팝오버 외부를 클릭하면 자동으로 닫힙니다. Esc 키로 닫을 수도 있습니다.

수동 팝오버

자동 팝오버 동작은 많은 사용 사례를 처리하지만 팝오버를 더 세부적으로 제어해야 하는 경우도 있습니다. 수동 팝오버를 사용하면 훨씬 더 많은 제어 권한이 있으며 훨씬 더 많은 동작을 책임집니다.

<div id="popover" popover="manual">My popover</div>

이 팝오버는 명시적으로 닫을 때만 닫히며, 가벼운 닫기나 Esc 키로는 닫을 수 없습니다. 여러 팝오버를 동시에 열 수는 있습니다.

힌트 팝오버

팝오버를 사용하여 페이지에 도움말을 추가할 수도 있습니다. 이 패턴에서는 항목 위로 마우스를 가져가면 설명이 표시되도록 해야 합니다. 한 번에 하나만 열려 있어야 합니다. 자동 팝오버를 사용하는 경우 하나를 열면 열려 있는 다른 자동 팝오버가 닫힙니다. 수동 팝오버를 사용하는 경우 다른 팝오버를 닫는 등 많은 동작을 수동으로 구현해야 합니다. 힌트 팝오버는 자동 팝오버와 유사한 동작을 하는 세 번째 옵션을 제공합니다. 하지만 힌트 팝오버를 열어도 자동 팝오버는 닫히지 않습니다.

<div id="popover" popover="hint">My popover</div>

힌트 팝오버는 기본 콘텐츠에 부수적인 보충 정보에 유용합니다. 마우스 오버 또는 포커스와 같은 클릭이 아닌 이벤트로 힌트 팝오버를 트리거하는 것이 좋습니다.

팝오버 위치 지정

기본적으로 팝오버는 화면 중앙에 열립니다. 이러한 요소는 다른 모든 콘텐츠 위의 최상위 레이어에 추가되며 뷰포트를 기준으로 배치할 수 있습니다.

팝오버를 트리거하는 항목 근처에 배치하고 싶은 경우가 많으므로 항상 이상적인 것은 아닙니다. 앵커 위치 지정을 사용하면 이를 수행할 수 있습니다.

앵커 위치 지정에는 두 단계가 있습니다. 앵커 요소를 정의하고 해당 앵커를 기준으로 요소를 배치하는 것입니다. 팝오버는 암시적 앵커를 설정하여 첫 번째 단계를 처리할 수 있습니다. <button popovertarget>를 사용하여 팝오버를 열면 버튼이 암시적 앵커가 됩니다. JavaScript를 사용하여 팝오버를 여는 경우 source 옵션으로 암시적 앵커를 설정할 수 있습니다.

기본적으로 팝오버는 margin: auto를 사용하여 가운데에 배치됩니다. 앵커 위치 지정을 사용하려면 margin: unset를 설정하여 이를 재정의해야 할 수 있습니다.

스타일 및 애니메이션

::backdrop 의사 요소

팝오버는 페이지의 다른 모든 콘텐츠 위에 있는 최상위 레이어에서 열립니다. 팝오버 아래에는 스타일을 지정할 수 있는 ::backdrop 의사 요소가 있습니다.

팝오버 외부의 콘텐츠는 비활성 상태가 아닙니다. 버튼을 클릭하고 키보드를 사용하여 페이지를 탐색할 수 있습니다. 페이지 콘텐츠를 가리면 안 됩니다(예: 심한 흐림 효과를 적용하거나 배경을 불투명한 색상으로 설정).

:popover-open 의사 클래스

CSS 그리드를 사용하여 팝오버 콘텐츠를 배치한다고 가정해 보겠습니다. [popover]{ display: grid }를 추가하면 갑자기 모든 팝오버가 표시됩니다. 이는 display: none를 사용하여 팝오버가 숨겨지기 때문입니다. :popover-open 가상 클래스를 사용하여 팝오버가 열려 있을 때만 스타일을 적용할 수 있습니다.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open는 팝오버를 애니메이션으로 처리할 때도 유용합니다.

팝오버에 애니메이션 적용

팝오버의 애니메이션에는 3단계가 있습니다.

1. @starting-style {popover:popover-open { } } - 팝오버가 표시되는 즉시 적용되는 초기 스타일입니다. 이 내용은 2번 이후에 스타일시트에 정의해야 합니다.
2. popover:popover-open { }-팝오버가 열려 있을 때의 스타일입니다.
3. popover { }-팝오버가 닫힐 때 적용되는 스타일입니다.

팝오버가 열려 있지 않으면 display: none를 사용하여 숨겨집니다. 이를 애니메이션으로 만들려면 transition-behavior: allow-discrete를 설정하고 transition의 속성 목록에 display를 추가해야 합니다.

암시적 앵커를 사용하여 팝오버를 배치하는 경우 transition의 속성 목록에 overlay도 추가해야 합니다. 팝오버가 최상위 레이어에서 삭제되면 암시적 앵커 관계가 삭제되므로 overlay 속성에 전환을 추가하면 종료 전환이 완료될 때까지 지연됩니다.

팝오버 간 상호작용

페이지에 여러 개의 팝오버가 있을 수 있으며, 팝오버의 상호작용 방식은 유형과 사용 방식에 따라 달라집니다.

중첩된 팝오버

경우에 따라 다른 팝오버 내부에서 팝오버를 열어야 할 수 있습니다. 예를 들어 팝오버 메뉴가 있고 메뉴 항목 중 하나가 하위 메뉴를 여는 경우가 있습니다. 사용자가 기본 메뉴를 닫을 때 하위 메뉴가 열린 상태로 유지되지 않도록 합니다. 팝오버를 사용하면 이 문제를 자동으로 처리할 수 있습니다.

힌트 팝오버에서 힌트 팝오버를 열거나 자동 팝오버에서 자동 팝오버를 여는 경우 팝오버가 스택에 배치됩니다. 팝오버를 닫으면 스택에서 해당 팝오버 뒤에 있는 모든 팝오버도 닫힙니다. 이 기능은 가벼운 닫기에도 적용됩니다. 팝오버를 클릭하면 스택에서 해당 팝오버 이후의 모든 팝오버가 닫히지만 이전 팝오버는 열린 상태로 유지됩니다.

팝오버의 소스 요소가 팝오버 내부에 있으면 팝오버가 스택에 추가됩니다. 소스 요소는 버튼에서 popovertarget를 사용하거나 JavaScript로 .showPopover({source}) 또는 .togglePopover({source})를 호출할 때 source 옵션을 설정하여 자동으로 설정됩니다.

자동 팝오버용 스택과 힌트 팝오버용 스택이 별도로 있습니다. 하지만 자동 팝오버 내부에서 힌트 팝오버를 열면 자동 스택에 추가됩니다.

힌트 팝오버는 간단하고 일시적인 정보를 위한 것이므로 힌트 팝오버에서 자동 팝오버를 트리거할 수 없습니다.

수동 팝오버를 사용하는 경우 이 모든 것을 수동으로 관리해야 합니다.

다른 팝오버 유형 닫기

자동 팝오버를 열면 다른 자동 팝오버가 닫힌다는 것을 배웠습니다. 하지만 다양한 유형은 어떻게 상호작용할까요? 세 가지 유형을 모두 사용하는 페이지의 예를 통해 살펴보겠습니다. 자동 팝오버를 사용하여 열고 닫는 버튼이 있는 탐색 메뉴가 있습니다. 페이지에 힌트 팝오버를 사용하여 컨텍스트 툴팁을 표시하는 텍스트가 있습니다. 마지막으로 백그라운드 작업이 완료되었음을 사용자에게 알리는 수동 팝오버가 있는 토스트가 있습니다.

도움말은 일시적이며 텍스트 위로 마우스를 가져가면 표시됩니다. 한 번에 하나의 도움말만 표시되어야 하며 두 번째 힌트 팝오버를 트리거하면 첫 번째 힌트가 닫힙니다.

버튼을 클릭하여 메뉴를 열면 다음과 같은 두 가지 이유로 힌트가 닫힙니다. 먼저 힌트 외부를 클릭하면 가벼운 닫기가 트리거됩니다. 둘째, 자동 팝오버를 열면 열려 있는 모든 힌트 팝오버가 닫힙니다. 이는 사용자가 집중하는 대상을 변경했으며 힌트 팝오버의 일시적인 콘텐츠가 더 이상 관련이 없기 때문입니다. 즉, 자동 팝오버에서 showPopover()를 호출하면 열려 있는 힌트 팝오버가 닫힙니다.

드롭다운 메뉴는 자동 팝오버입니다. 드롭다운 메뉴의 경우 한 번에 하나만 열리고 하나를 열면 다른 하나는 닫힙니다. 보셨듯이 자동 팝오버를 열면 열려 있는 힌트 팝오버도 닫힙니다.

하지만 드롭다운 메뉴가 열려 있는 동안 관련 없는 도움말의 콘텐츠를 확인하고 싶을 수도 있습니다. 힌트 도움말을 표시해도 자동 팝오버가 닫히지 않습니다.

수동 팝오버는 자동 또는 힌트 팝오버의 영향을 받지 않으며, 열릴 때 힌트 또는 자동 팝오버를 닫지 않습니다. 하지만 버튼을 클릭하여 수동 팝오버를 열면 힌트와 자동 팝오버가 가볍게 닫힙니다.

팝오버 유형 간의 상호작용이 복잡해 보일 수 있지만, 올바른 상황에서 유형을 사용하면 일반적인 사용 패턴을 허용합니다. 팝오버가 예상대로 작동하지 않으면 사용 중인 유형을 다시 확인하세요.

이해도 확인