팝오버는 웹 어디에나 있습니다. 메뉴, 전환 팁, 대화상자에서 확인할 수 있으며, 계정 설정, 공개 정보 위젯, 제품 카드 미리보기로 표시될 수 있습니다. 이러한 구성 요소가 얼마나 보편적임에도 불구하고 브라우저에서 빌드하는 것은 여전히 놀라울 정도로 복잡합니다. 포커스, 열기 및 닫기 상태를 관리하기 위한 스크립트, 구성요소에 액세스 가능한 후크, 환경을 시작하고 종료하기 위한 키보드 결합을 추가해야 합니다. 이 모든 작업은 팝오버의 유용하고 고유한 핵심 기능을 빌드하기 전에 추가되어야 합니다.
이 문제를 해결하기 위해 Chromium 114의 popover API부터 팝오버 빌드를 위한 새로운 선언적 HTML API 세트가 브라우저에 도입됩니다.
팝오버 속성
모든 복잡성을 직접 관리하는 대신 popover 속성 및 후속 기능 집합을 사용하여 브라우저에서 복잡성을 처리하도록 할 수 있습니다. HTML 팝오버 지원:
- 최상위 레이어로 승격됩니다. 팝오버는 페이지의 나머지 부분 위에 있는 별도의 레이어에 표시되므로 Z-색인을 일일이 확인하지 않아도 됩니다.
- 표시등 해제 기능. 팝오버 영역 외부를 클릭하면 팝오버가 닫히고 포커스가 다시 돌아옵니다.
- 기본 포커스 관리. 팝오버를 열면 다음 탭이 팝오버 내에서 중지됩니다.
- 액세스 가능한 키보드 바인딩.
esc키를 누르면 팝오버가 닫히고 포커스가 반환됩니다. - 액세스 가능한 구성요소 결합. 팝오버 요소를 의미론적으로 팝오버 트리거에 연결합니다.
이제 JavaScript를 사용하지 않고도 이러한 모든 기능으로 팝오버를 빌드할 수 있습니다. 기본 팝오버에는 다음 세 가지가 필요합니다.
- 팝오버가 포함된 요소의
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 앵커링입니다.
다음 방사형 메뉴 데모에서는 CSS 앵커 위치와 함께 팝오버 API를 사용하여 팝오버 #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;
}
이제 전환 버튼에 고정되고 모든 기능을 갖춘 팝오버 메뉴가 있으며 JavaScript가 필요하지 않습니다.
결론
팝오버 API는 기본적으로 웹 애플리케이션 빌드의 관리와 접근성을 높여주는 새로운 기능 중 첫 번째 단계입니다. 팝오버를 어떻게 활용하는지 기대되네요.