2026 CSS UI 트렌드 — Anchor Positioning

핵심은 하나입니다.

기존 CSS는 "좌표"를 잡았다면, Anchor Positioning은 "관계"를 잡는다.

1. 기존 CSS Position부터 이해하기

기존 CSS의 핵심은 다음 4가지입니다.

css

position: static;
position: relative;
position: absolute;
position: fixed;

`relative`

자기 자신의 원래 위치를 기준으로 조금 이동합니다.

css

.box {
  position: relative;
  top: 10px;
  left: 20px;
}

text

원래 위치
┌──────┐
│ BOX  │
└──────┘

       ↓ 이동

    ┌──────┐
    │ BOX  │
    └──────┘

주로 작은 위치 조정에 사용합니다.

2. `absolute` — 가장 많이 사용하는 방식

html

<div class="card">
  <button>메뉴</button>

  <div class="menu">
    수정
    삭제
  </div>
</div>

css

.card {
  position: relative;
}

.menu {
  position: absolute;
  top: 100%;
  left: 0;
}

결과:

text

┌──────────────┐
│ 카드     메뉴│
└──────────────┘
       ↓
┌──────────────┐
│ 수정         │
│ 삭제         │
└──────────────┘

이 방식은 지금도 매우 중요합니다.

문제는 "메뉴가 버튼을 따라다닌다"라는 관계를 직접 표현한 것이 아니라,

css

top: 100%;
left: 0;

이라는 부모 기준 좌표로 표현했다는 것입니다.

3. 기존 Tooltip 구현

예를 들어:

text

[ ? ]
  ↓
┌──────────────────┐
│ 추가 설명입니다. │
└──────────────────┘

기존 CSS:

css

.container {
  position: relative;
}

.tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

여기까지는 상당히 간단합니다.

하지만 문제가 생깁니다.

text

화면 오른쪽

                         [ ? ]
                           ↓
                   ┌───────────────
                   │ Tooltip       │ → 잘림

그래서 JavaScript가 등장합니다.

const rect = button.getBoundingClientRect();

if (rect.right + tooltipWidth > window.innerWidth) {
  // 왼쪽으로 이동
}

스크롤이나 Resize까지 고려하면 점점 복잡해집니다.

4. Anchor Positioning으로 바꾸면

먼저 기준을 지정합니다.

css

.help {
  anchor-name: --help;
}

그리고 Tooltip을 연결합니다.

css

.tooltip {
  position: fixed;
  position-anchor: --help;
  position-area: bottom;
}

관계가 명확합니다.

text

.help
  │
  │ Anchor
  ↓
.tooltip

즉,

"Tooltip을 화면의 327px 위치에 놓아라."

가 아니라

"Tooltip을 help 버튼 아래에 놓아라."

가 됩니다.

5. 기존 방식 vs Anchor Positioning

	기존 CSS	Anchor Positioning
기준	부모/좌표	특정 요소
위치	`top`, `left`	`anchor()`, `position-area`
관계 표현	간접적	직접적
JS 필요성	경우에 따라 필요	상당히 감소
반응형	추가 처리 필요	상대적으로 편함
화면 밖 처리	JS 처리하는 경우 많음	fallback 지원
Tooltip	가능	매우 적합
Dropdown	가능	매우 적합
Popover	가능	매우 적합
Submenu	복잡해질 수 있음	편리
Select	브라우저 제약	Customizable Select와 결합 가능

6. Dropdown을 비교하면 더 명확합니다

기존 CSS

css

.wrapper {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
}

text

┌──────────────┐
│ 사용자 ▼     │
└──────────────┘
       ↓
┌──────────────┐
│ Profile      │
│ Settings     │
│ Logout       │
└──────────────┘

간단한 UI라면 이것으로 충분합니다.

하지만 복잡한 화면에서는:

text

부모
 └─ overflow: hidden
      └─ dropdown 잘림

스크롤
 └─ 위치 변경

화면 오른쪽
 └─ dropdown 잘림

모바일
 └─ 다른 방향으로 표시 필요

같은 문제가 발생할 수 있습니다.

7. Anchor 방식

css

.user-button {
  anchor-name: --user;
}

.dropdown {
  position: fixed;
  position-anchor: --user;
  position-area: bottom;
}

더 직관적입니다.

text

        Anchor
          ↓
     [ 사용자 ▼ ]
          │
          │ 관계
          ↓
     [ Dropdown ]

그리고 필요하면:

css

.dropdown {
  position-try-fallbacks: flip-block;
}

화면 공간이 부족하면 위쪽으로 뒤집는 전략을 사용할 수 있습니다. (developer.mozilla.org)

8. Select Box가 특히 재미있습니다

기존 <select>는 사실 개발자가 생각하는 것보다 특별한 요소입니다.

html

<select>
  <option>대한민국</option>
  <option>미국</option>
  <option>일본</option>
</select>

브라우저가 상당 부분을 담당합니다.

text

┌──────────────────┐
│ 대한민국       ▼ │
└──────────────────┘

       ↓ 클릭

┌──────────────────┐
│ 대한민국         │
│ 미국             │
│ 일본             │
└──────────────────┘

기존에는 OS/브라우저마다 Picker UI가 달라지고 CSS로 완전히 자유롭게 제어하기 어려웠습니다.

9. Customizable Select

최신 CSS에서는 Select의 picker를 더 세밀하게 스타일링할 수 있는 방향으로 발전하고 있습니다.

예를 들어:

css

select {
  appearance: base-select;
}

그리고 picker를:

css

select::picker(select) {
  position-area: bottom;
}

같은 방식으로 다룰 수 있습니다.

또한 Anchor Positioning과 연결되는 구조를 사용할 수 있습니다.

text

┌──────────────────────┐
│ 대한민국           ▼ │
└──────────────────────┘
           ↓
┌──────────────────────┐
│ 대한민국             │
│ 미국                 │
│ 일본                 │
│ 중국                 │
└──────────────────────┘

다만 Customizable Select는 Anchor Positioning보다 브라우저 지원 상황을 더 꼼꼼하게 확인해야 하는 기능입니다. (developer.mozilla.org)

10. Popover + Anchor가 특히 강력

기존에는:

text

button
 ↓
JS
 ↓
메뉴 생성
 ↓
위치 계산
 ↓
화면 밖 검사
 ↓
위치 변경

이런 코드가 들어가기 쉬웠습니다.

Popover API를 사용하면:

html

<button popovertarget="menu">
  메뉴
</button>

<div id="menu" popover>
  메뉴 내용
</div>

그리고 CSS에서:

css

#menu {
  position-area: bottom;
}

처럼 배치할 수 있습니다.

Popover API는 버튼과 popover 사이의 anchor 관계를 활용할 수 있기 때문에 이런 Floating UI를 훨씬 선언적으로 만들 수 있습니다. (developer.mozilla.org)

11. 기존 방식의 장점도 있습니다

그렇다고 기존 CSS가 나쁜 것은 아닙니다.

간단한 UI라면 오히려 기존 방식이 더 좋습니다.

css

.menu {
  position: absolute;
  top: 100%;
  left: 0;
}

이 정도면 충분한데 굳이 Anchor를 사용할 필요가 없습니다.

기존 CSS가 좋은 경우

text

단순한 Card
단순한 Dropdown
부모 내부에서만 움직이는 Badge
단순한 Overlay
고정된 레이아웃

즉,

단순한 UI → 기존 CSS

가 여전히 좋은 선택입니다.

12. Anchor Positioning이 빛나는 경우

반대로 이런 UI라면 Anchor를 고려할 가치가 큽니다.

text

Tooltip
Dropdown
Context Menu
Submenu
Popover
Form Error
Floating Label
Select Picker
Toolbar
Annotation
Command Menu

특히:

text

"이 UI가 특정 UI 요소를 따라다녀야 한다"

라면 Anchor Positioning을 먼저 생각하면 좋습니다.

13. 개발자 관점에서 가장 중요한 변화

기존 CSS:

css

top: 100%;
left: 0;

개념:

text

"부모의 아래에 놓는다"

Anchor:

css

position-area: bottom;

개념:

text

"이 특정 요소의 아래에 놓는다"

이 차이가 핵심입니다.

14. 2026년에는 CSS를 이렇게 바라보면 좋습니다

text

             CSS
              │
      ┌───────┴────────┐
      ↓                ↓
   Layout           Relationship
      │                │
 flex / grid       Anchor
 position          Popover
                    Select

예전 CSS가 레이아웃을 만드는 언어였다면,

앞으로의 CSS는 점점

UI 요소 사이의 관계와 동작까지 표현하는 언어

로 발전하고 있다고 볼 수 있습니다.

15. 개발자가 외워둘 최소 문법

이 정도만 먼저 익혀도 충분합니다.

css

/* 기준 요소 */
.button {
  anchor-name: --button;
}

/* 연결된 요소 */
.menu {
  position: fixed;
  position-anchor: --button;

  /* 버튼 아래 */
  position-area: bottom;

  /* 공간이 부족하면 반대 방향 */
  position-try-fallbacks: flip-block;
}

직접 좌표가 필요하다면:

css

.menu {
  top: calc(anchor(bottom) + 8px);
  left: anchor(left);
}

크기도 가져올 수 있습니다.

css

.menu {
  width: anchor-size(width);
}

16. 결국 이렇게 기억하면 됩니다

text

기존 CSS

"어디에 놓을까?"
        ↓
top / left / right / bottom


Anchor Positioning

"누구 옆에 놓을까?"
        ↓
anchor()
position-area
anchor-size()
position-try-fallbacks

그리고 2026년 프론트엔드 개발자라면 다음 순서로 익히는 것을 추천합니다.

text

① position
      ↓
② absolute / fixed
      ↓
③ anchor-name / position-anchor
      ↓
④ anchor() / position-area
      ↓
⑤ position-try-fallbacks
      ↓
⑥ Popover API
      ↓
⑦ Customizable Select

핵심은 Anchor 하나를 별도의 새로운 CSS 문법으로 외우는 것이 아니라, Tooltip → Dropdown → Popover → Select → Context Menu를 직접 만들어보면서 익히는 것입니다. 그러면 기존 CSS보다 무엇이 편해졌는지가 바로 체감됩니다.

2026 CSS UI 트렌드 — Anchor Positioning

중년개발자