JavaScript 없이 만드는 현대적 UI

2026년 현재 CSS Anchor Positioning과 HTML Popover API가 모든 주요 브라우저에서 Baseline으로 지원된다. 기존에 JavaScript 라이브러리(Tippy.js, Floating UI 등)에 의존하던 툴팁, 드롭다운, 팝오버를 순수 HTML/CSS로 구현할 수 있게 되었다.

1. Popover API 기초

HTML의 popover 속성을 사용하면 모달, 툴팁, 알림 등을 JavaScript 없이 구현할 수 있다.

기본 사용법

<!-- 버튼이 팝오버를 토글 -->
<button popovertarget="menu">메뉴 열기</button>

<div id="menu" popover>
  <nav>
    <a href="/home">홈</a>
    <a href="/about">소개</a>
    <a href="/contact">문의</a>
  </nav>
</div>

popover 속성만 추가하면 해당 요소는 기본적으로 숨겨지고, 최상위 레이어(top layer)에 렌더링되며, 바깥 클릭이나 ESC 키로 자동 닫힌다.

popover 모드

<!-- auto: 외부 클릭 시 자동 닫힘 (기본값) -->
<div id="tooltip1" popover="auto">자동 닫힘</div>

<!-- manual: 명시적으로만 닫힘 -->
<div id="alert1" popover="manual">
  <p>중요 알림 내용</p>
  <button popovertarget="alert1" 
          popovertargetaction="hide">닫기</button>
</div>

<!-- 열기/닫기/토글 액션 지정 -->
<button popovertarget="alert1" 
        popovertargetaction="show">알림 표시</button>

팝오버 스타일링

/* 팝오버 기본 스타일 */
[popover] {
  padding: 16px 24px;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  max-width: 320px;
}

/* 배경 오버레이 스타일 */
[popover]::backdrop {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

/* 열림/닫힘 애니메이션 */
[popover] {
  opacity: 0;
  transform: scale(0.95) translateY(-8px);
  transition: opacity 0.2s, transform 0.2s,
              display 0.2s allow-discrete,
              overlay 0.2s allow-discrete;
}

[popover]:popover-open {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 닫힐 때 시작 스타일 */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scale(0.95) translateY(-8px);
  }
}

2. CSS Anchor Positioning

CSS Anchor Positioning은 한 요소(앵커)를 기준으로 다른 요소의 위치를 지정하는 CSS 기능이다. 스크롤, 리사이즈에 자동으로 대응한다.

기본 앵커 설정

/* 1. 앵커 요소 지정 */
.trigger-button {
  anchor-name: --my-anchor;
}

/* 2. 앵커 기준으로 위치 지정 */
.tooltip {
  position: fixed;
  position-anchor: --my-anchor;
  
  /* 앵커 아래쪽, 가로 중앙 정렬 */
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
}

position-area로 간편 배치

/* position-area: 9구역 그리드 방식 */
.tooltip-top {
  position: fixed;
  position-anchor: --btn;
  position-area: top center;  /* 앵커 위쪽 중앙 */
}

.tooltip-right {
  position: fixed;
  position-anchor: --btn;
  position-area: center right;  /* 앵커 오른쪽 중앙 */
}

.dropdown {
  position: fixed;
  position-anchor: --btn;
  position-area: bottom span-all;  /* 앵커 아래, 전체 너비 */
}

3. Popover + Anchor 조합 실전 예제

툴팁 구현

<!-- HTML -->
<button class="info-btn" popovertarget="tip1"
        style="anchor-name: --info-btn">
  도움말
</button>

<div id="tip1" popover="auto" class="tooltip">
  이 기능은 데이터를 자동으로 백업합니다.
  백업 주기는 설정에서 변경할 수 있습니다.
</div>

/* CSS */
.tooltip {
  position: fixed;
  position-anchor: --info-btn;
  top: anchor(bottom);
  left: anchor(center);
  translate: -50% 8px;
  
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: #1a1a2e;
  color: white;
  font-size: 14px;
  max-width: 240px;
  border: none;
}

/* 말풍선 화살표 */
.tooltip::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  translate: -50%;
  border: 6px solid transparent;
  border-bottom-color: #1a1a2e;
  border-top: none;
}

드롭다운 메뉴

<!-- HTML -->
<button class="dropdown-trigger" 
        popovertarget="dropdown-menu"
        style="anchor-name: --dropdown">
  카테고리 선택
</button>

<div id="dropdown-menu" popover="auto" 
     class="dropdown">
  <ul>
    <li><a href="#">프론트엔드</a></li>
    <li><a href="#">백엔드</a></li>
    <li><a href="#">DevOps</a></li>
    <li><a href="#">데이터베이스</a></li>
  </ul>
</div>

.dropdown {
  position: fixed;
  position-anchor: --dropdown;
  top: anchor(bottom);
  left: anchor(left);
  margin: 4px 0 0;
  
  min-width: anchor-size(width);
  padding: 8px 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  list-style: none;
}

.dropdown a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}

.dropdown a:hover {
  background: #f0f4ff;
  color: #2563eb;
}

4. position-try-fallbacks: 자동 위치 조정

화면 밖으로 나가는 경우 대체 위치로 자동 전환된다.

.tooltip {
  position: fixed;
  position-anchor: --target;
  position-area: top center;
  
  /* 위에 공간 없으면 아래로, 아래도 없으면 옆으로 */
  position-try-fallbacks:
    bottom center,
    right center,
    left center;
}

/* 또는 내장 키워드 사용 */
.tooltip-auto {
  position: fixed;
  position-anchor: --target;
  position-area: top center;
  position-try-fallbacks: flip-block, flip-inline;
  /* flip-block: 위/아래 전환 */
  /* flip-inline: 좌/우 전환 */
}

5. 접근성 고려사항

<!-- 올바른 ARIA 연결 -->
<button popovertarget="info-pop"
        aria-describedby="info-pop">
  상세 정보
</button>

<div id="info-pop" popover role="tooltip">
  추가 설명 내용
</div>

<!-- 대화상자 형태의 팝오버 -->
<button popovertarget="dialog-pop">
  설정 열기
</button>

<div id="dialog-pop" popover="manual" 
     role="dialog" aria-label="설정">
  <h3>알림 설정</h3>
  <label>
    <input type="checkbox" checked>
    이메일 알림 받기
  </label>
  <button popovertarget="dialog-pop"
          popovertargetaction="hide">
    저장
  </button>
</div>

브라우저 지원 현황

Popover API와 CSS Anchor Positioning의 조합으로 기존에 수십 줄의 JavaScript와 서드파티 라이브러리가 필요했던 UI 패턴을 HTML/CSS만으로 구현할 수 있게 되었다. 번들 크기 절감과 접근성 향상이라는 두 가지 이점을 동시에 얻을 수 있다.