드롭다운 및 팝오버 패턴

HTML 팝오버 응용 프로그래밍 인터페이스는 선언적인 표시 및 숨기기 동작을 제공합니다(크롬 114 이상, 폭넓게 지원됨). 대상에는 popover 속성을, 트리거 버튼에는 popovertarget을 사용합니다. 기본적인 열기 및 닫기에는 JavaScript가 필요하지 않으며, 바깥쪽 클릭으로 닫기와 Escape 키 처리도 기본으로 제공합니다.

[popover] 또는 :popover-open을 사용하여 팝오버 요소를 선택합니다. ::backdrop 의사 요소를 사용하여 배경을 어둡게 만들 수 있습니다. 팝오버는 대화 상자처럼 최상위 레이어에 렌더링되므로 쌓임 순서 문제가 발생하지 않습니다.

CSS 앵커 위치 지정은 JavaScript 없이 팝오버를 트리거에 상대적으로 배치합니다(크롬 125 이상). 트리거에 anchor-name: --btn을, 팝오버에 position-anchor: --btn을 지정한 다음 top: anchor(bottom); left: anchor(left)를 사용하여 트리거 아래에 맞춥니다.

앵커 위치 지정을 사용할 수 없다면 위치가 지정된 부모 래퍼를 사용합니다. 컨테이너에는 position: relative를, 드롭다운에는 position: absolute; top: 100%; left: 0을 지정합니다. 이 방법은 브라우저 전반에서 작동하지만 트리거와 드롭다운이 위치가 지정된 컨테이너 안에서 형제 요소여야 합니다.

드롭다운 목록의 스타일을 다음과 같이 지정합니다: position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. 메뉴 항목에는 패딩, 마우스 오버 배경, 전체 너비 표시를 적용합니다.

진입에는 @starting-style을 사용하고, display 속성 변경을 애니메이션으로 처리하려면 transition-behavior: allow-discrete를 사용하여 팝오버의 열기 및 닫기를 애니메이션으로 구현합니다. 이를 통해 팝오버의 열림 및 닫힘 상태에 연결된 CSS 전용 진입 및 종료 애니메이션을 사용할 수 있습니다.

드롭다운 메뉴는 키보드를 지원해야 합니다. 화살표 키로 메뉴 항목을 탐색하고, Enter 또는 스페이스 키로 포커스된 항목을 활성화하며, Escape 키로 메뉴를 닫고 포커스를 트리거로 돌려보냅니다. 팝오버 응용 프로그래밍 인터페이스는 Escape 키를 자동으로 처리하지만, 화살표 키 탐색에는 JavaScript 이벤트 처리가 필요합니다.

팝오버 응용 프로그래밍 인터페이스를 사용하지 않는 사용자 지정 드롭다운에는 트리거에 aria-haspopup="listbox"와 aria-expanded를, 목록에 role="listbox"를, 각 항목에 role="option"과 aria-selected를 추가합니다. 화면 낭독기는 펼침 상태와 항목 수를 알려 줍니다.

트리거 아래에 배치된 드롭다운은 뷰포트 하단에서 넘칠 수 있습니다. IntersectionObserver 또는 getBoundingClientRect로 이를 감지하고 드롭다운을 트리거 위로 뒤집어 배치합니다. CSS 앵커 위치 지정은 position-try-fallbacks를 사용하여 이 문제를 처리합니다.

중첩된 드롭다운(하위 메뉴)은 복잡성을 높입니다. 하위 메뉴를 부모 항목의 오른쪽에 배치합니다. 마우스가 대각선으로 이동하는 동안 하위 메뉴가 닫히지 않도록 마우스가 벗어난 후 숨기기 전에 지연 시간을 추가합니다. 이때 CSS transition-delay 또는 JS 시간 초과를 사용할 수 있습니다.

마우스 오버로 작동하는 드롭다운은 터치 기기에서 동작하지 않습니다. 터치 기기에는 마우스 오버 상태가 없기 때문입니다. 모든 환경에서 클릭 또는 탭 트리거를 사용합니다. 팝오버 응용 프로그래밍 인터페이스의 바깥쪽 클릭 닫기 기능이나 열린 드롭다운을 닫는 문서 클릭 수신기로 바깥쪽을 탭하여 닫는 동작을 구현할 수 있습니다.

팝오버 응용 프로그래밍 인터페이스는 이전에 사용자 지정 JavaScript가 필요했던 어떤 기능을 자동으로 제공합니까?

팝오버 응용 프로그래밍 인터페이스와 CSS 앵커 위치 지정을 함께 사용하면 선언적이고 JavaScript 사용을 최소화한 드롭다운 및 팝오버 패턴을 구현할 수 있습니다. 더 폭넓은 브라우저 지원이 필요하다면 위치가 지정된 컨테이너 패턴을 안정적으로 사용할 수 있습니다. 키보드 접근성, ARIA 속성, 뷰포트 충돌 처리, 터치 기기 지원을 더하면 실제 서비스에 사용할 수 있는 드롭다운 구성 요소가 완성됩니다.