CSS 앵커 위치 지정으로 팝오버를 버튼에 붙이기

CSS 앵커 위치 지정으로 팝오버를 버튼에 배치하고, 화면 경계와 브라우저 지원을 고려하는 방법을 정리합니다.

CSS 앵커 위치 지정으로 팝오버를 버튼에 붙이기

버튼 옆에 도움말을 띄울 때 getBoundingClientRect()로 좌표를 계산하면 스크롤과 창 크기 변화에 맞춰 위치를 다시 계산해야 합니다. CSS 앵커 위치 지정은 한 요소의 위치를 다른 요소의 상자에 연결해 이 배치 작업을 선언적으로 처리합니다.

핵심 개념

기준 요소에 anchor-name을 지정하고, 배치할 요소에 position-anchor로 그 이름을 연결합니다. 배치할 요소에는 position: absolute 또는 fixed가 필요합니다. position-area: block-end는 기준 요소의 블록 축 끝쪽, 일반적인 가로 쓰기 모드에서는 아래쪽 영역에 배치합니다. position-try: flip-block은 기본 배치가 화면 밖으로 넘칠 때 반대쪽 배치를 시도합니다.

아래 예제의 팝오버는 popovertarget으로 버튼과 연결됩니다. 이 연결은 팝오버를 여닫는 동작도 제공합니다. CSS 앵커 위치 지정은 화면 배치를 맡으며, HTML 속성이 동작과 관계를 맡습니다.

실무 예제

다음 코드를 HTML 파일로 저장해 브라우저에서 열면 됩니다. 앵커 위치 지정을 지원하지 않는 브라우저에서는 CSS 규칙을 적용하지 않고 기본 팝오버 배치가 사용됩니다.

<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<title>앵커 위치 지정 예제</title>
<style>
  #help { anchor-name: --help-button; }
  #tip { max-width: 18rem; padding: .75rem; border: 1px solid #888; }
  @supports (position-anchor: --help-button) and (position-area: block-end) {
    #tip {
      position: fixed;
      position-anchor: --help-button;
      inset: auto;
      position-area: block-end;
      position-try: flip-block;
      margin: .5rem 0;
    }
  }
</style>
<button id="help" type="button" popovertarget="tip">도움말</button>
<div id="tip" popover>저장 후에도 이 설정을 변경할 수 있습니다.</div>
</html>

#help가 앵커이고 #tip이 배치 대상입니다. @supports 안에 앵커 관련 선언을 넣어 지원 여부에 따라 배치를 나눴습니다. 팝오버의 기본 스타일에는 브라우저가 정한 여백 등이 있으므로 예제에서는 앵커 배치를 적용할 때 margin을 명시했습니다.

사용할 때 주의할 점

앵커 위치 지정은 시각적 배치 기능입니다. 팝오버의 열기·닫기, 키보드 동작과 의미 관계는 적절한 HTML 기능으로 구현해야 합니다.
같은 anchor-name을 여러 컴포넌트에서 재사용하면 예상과 다른 요소가 기준이 될 수 있습니다. 반복되는 UI에서는 이름 범위를 설계하거나 anchor-scope 지원 여부를 검토하세요.
속성별 브라우저 지원 시점이 다를 수 있습니다. 실제 대상 브라우저에서 position-area와 position-try를 확인하고, 지원하지 않을 때의 배치도 확인하세요.

정리

기준 요소를 이름으로 연결하고 position-area로 배치하면 단순한 팝오버의 좌표 계산 코드를 줄일 수 있습니다. 화면 밖으로 넘치는 경우에는 position-try를 사용할 수 있습니다. 배치와 상호작용의 책임을 나누고, 대상 브라우저에서 대체 배치를 확인하는 것이 실무 적용의 핵심입니다.

CSS 앵커 위치 지정으로 팝오버를 버튼에 붙이기