CSS anchor positioning은 anchor-name(앵커 요소에 <dashed-ident> 형식, 예: --tooltip-anchor으로 지정), position-anchor(위치 지정 요소에 선언, 반드시 position: absolute 또는 fixed 필요), position-area(앵커를 둘러싼 3×3 개념적 그리드의 셀 중 하나에 요소를 배치)라는 세 가지 속성을 통해 Popper.js, Floating UI 같은 JavaScript 라이브러리 없이 요소 간 위치 관계를 선언적으로 표현합니다. position-area의 핵심 특성은 요소를 단순히 이동시키는 것이 아니라 해당 그리드 영역을 요소의 containing block으로 재정의한다는 점으로, 퍼센트 크기 지정과 inset: 0이 뷰포트가 아닌 해당 영역에 상대적으로 동작합니다. 물리적 키워드(top, right)와 논리적 키워드(block-start, inline-end)는 같은 position-area 값에 혼합할 수 없습니다. Popover API 사용 시 브라우저가 앵커 관계를 암묵적으로 설정하므로 anchor-name과 position-anchor가 불필요합니다. 개발자는 영역에 맞게 요소를 크기 조정할 때 box-sizing: border-box를 반드시 추가해야 하며, 키보드 포커스 순서와 스크린 리더 시맨틱은 이 API가 관리하지 않는다는 점에 주의해야 합니다.
Patrick Brosset은 2005년 Million Dollar Homepage — Alex Tew가 1픽셀당 1달러(최소 구매 10×10픽셀)로 광고 공간을 판매한 바이럴 마케팅 — 를 CSS Grid로 재현했습니다. 원본 페이지는 단일 이어붙인 이미지와 HTML 이미지 맵으로 구현되었지만, 이 재현작은 100행 100열의 CSS 그리드와 grid-area 속성으로 각 광고 블록을 배치하는 div 요소로 대체합니다. 이 데모는 대규모 명시적 그리드 위에서 정밀하고 비균일한 배치를 처리하는 CSS Grid의 능력을 직관적으로 보여주는 사례로, grid-area 단축 속성이 원본 픽셀 좌표에 직접 매핑됩니다. 원본 이미지 에셋을 재사용하되 명시적 부적절 콘텐츠는 제거했습니다.
::scroll-marker 가상 요소는 스크롤 컨테이너에 직접 연결된 상호작용형 내비게이션 인디케이터를 생성하는 새로운 CSS 기능으로, 클릭 시 특정 섹션으로 스냅하는 앵커 링크처럼 동작하여 JavaScript 없이 캐러셀 페이지네이션 도트를 구현합니다. Scroll markers는 스크롤 컨테이너의 자식 요소에 선언하며 스크롤러에 자동으로 연결되어, 기존 도트 기반 캐러셀에 필요했던 JavaScript 이벤트 리스너, 스크롤 계산, 활성 상태 관리를 대체합니다. Usman Writes의 이 글은 이 기능을 스크립팅이 필요했던 UI 패턴을 CSS가 지속적으로 흡수하는 트렌드의 일환으로 소개합니다. 게시 시점의 브라우저 지원은 초기 단계이므로 프로덕션 사용 시 지원 여부를 확인해야 합니다.
Schalk Neethling의 CSS anchor positioning 시리즈 2부는 position-area의 3×3 그리드를 넘어 세 가지 함수로 픽셀 수준의 제어를 제공합니다. anchor(<side>)는 containing block 엣지에서 지정된 앵커 엣지까지의 거리로 해석되어 inset-block-start, left 등의 inset 속성에 사용하며, 물리적·논리적·컨텍스트(inside/outside)·퍼센트 키워드를 지원하지만 물리적 키워드는 해당 속성의 축과 일치해야 합니다. calc()와 조합하면 정확한 간격(calc(anchor(start) + 0.5rem))이나 서로 다른 앵커를 inset-block-start와 inset-block-end에 사용하는 멀티 앵커 스트레칭도 가능합니다. Popover API의 중요한 함정: UA 스타일시트가 [popover]에 inset: 0; margin: auto를 설정하므로, anchor 함수가 올바르게 동작하려면 inset: auto; margin: unset으로 명시적으로 초기화해야 합니다. anchor-center는 align-self/justify-self의 값으로, 엣지만 앵커 중심점으로 이동시키는 anchor(center)와 달리 해당 축에서 위치 지정 요소를 앵커의 중심에 완전히 정렬합니다. anchor-size(<dimension>)는 앵커의 측정된 크기를 반환하며(inline-size: anchor-size(inline)으로 드롭다운을 트리거 너비에 맞추는 등), anchor()와 달리 축 일치 제약이 없습니다.
Kevin Powell은 CSS Grid가 복잡하다는 인식이 주로 잘못된 사용 방식에서 비롯된다고 주장합니다. 개발자들이 헤더, 사이드바, 메인, 푸터 전체 페이지 레이아웃에 명시적 라인 번호나 grid-template-areas를 적용하는 대신, 범위를 좁힌 단순한 그리드로도 충분하다는 것입니다. 그의 데모에서는 전통적인 holy grail 레이아웃을 리팩토링하여 전체 너비의 헤더와 푸터를 그리드에서 분리하고, 중간 콘텐츠 영역에만 세 컬럼 grid-template-columns(auto 1fr auto) 정의를 남겨 각 자식 요소의 라인 번호 지정을 없앱니다. 반응형 처리는 860px 미만에서 grid-template-columns를 제거하는 단일 중첩 미디어 쿼리로 충분하며, 컬럼이 자연스럽게 쌓입니다. Powell은 flexbox와의 차이도 비교합니다. CSS Grid는 아이템이 wrap될 때 예측하기 어려운 flex-grow 상호작용 없이 부모에서 자식 컬럼 크기를 한 번에 선언할 수 있습니다. 결론적으로 기본값은 소수의 트랙만 다루는 작고 목적에 맞는 그리드로 시작하고, grid-template-areas와 명시적 라인 번호는 행과 열을 함께 제어해야 할 때만 사용해야 합니다.
CSS에 이제 @function at-rule을 통한 네이티브 커스텀 함수가 도입되었습니다(현재 실험적 기능). Web Dev Simplified의 Kyle이 점진적으로 복잡해지는 예제로 설명합니다. 함수는 @function --name(--param <type>) 형식으로 선언하며, return 키워드 대신 특별한 result 속성으로 값을 반환하고, 일반 CSS 캐스케이드 순서를 따릅니다. 즉, 마지막 result 할당이 최종 값이 되어 함수 본문 안에서 미디어 쿼리 기반 분기가 가능합니다. <color>, <number>, <percentage> 타입 어노테이션은 현재 선택 사항이지만, 기능이 성숙해지면 개발 도구의 경고 기능을 지원하게 됩니다. 함수는 CSS 레이어를 따르므로 낮은 우선순위 레이어에서 동일한 함수 이름을 정의하면 JavaScript의 함수 shadowing과 유사한 오버로드로 동작합니다. 동영상에서는 중첩 미디어 쿼리를 사용해 세 가지 중단점(≤200px, 200–300px, 이상) 사이에서 값을 전환하는 --responsive(--small, --medium, --large) 유틸리티를 시연하고, --large 매개변수가 생략되었을 때 CSS if() 스타일 쿼리로 우아하게 대체하는 방법도 보여줍니다. JavaScript와 달리 조기 반환이 없으며 모든 조건 경로가 평가되고 캐스케이드 순서에서 마지막 result가 브라우저가 사용하는 값이라는 점이 핵심적인 사고 전환입니다.
CSS anchor positioning은 anchor-name(앵커 요소에 <dashed-ident> 형식, 예: --tooltip-anchor으로 지정), position-anchor(위치 지정 요소에 선언, 반드시 position: absolute 또는 fixed 필요), position-area(앵커를 둘러싼 3×3 개념적 그리드의 셀 중 하나에 요소를 배치)라는 세 가지 속성을 통해 Popper.js, Floating UI 같은 JavaScript 라이브러리 없이 요소 간 위치 관계를 선언적으로 표현합니다. position-area의 핵심 특성은 요소를 단순히 이동시키는 것이 아니라 해당 그리드 영역을 요소의 containing block으로 재정의한다는 점으로, 퍼센트 크기 지정과 inset: 0이 뷰포트가 아닌 해당 영역에 상대적으로 동작합니다. 물리적 키워드(top, right)와 논리적 키워드(block-start, inline-end)는 같은 position-area 값에 혼합할 수 없습니다. Popover API 사용 시 브라우저가 앵커 관계를 암묵적으로 설정하므로 anchor-name과 position-anchor가 불필요합니다. 개발자는 영역에 맞게 요소를 크기 조정할 때 box-sizing: border-box를 반드시 추가해야 하며, 키보드 포커스 순서와 스크린 리더 시맨틱은 이 API가 관리하지 않는다는 점에 주의해야 합니다.
Kevin Powell은 CSS Grid가 복잡하다는 인식이 주로 잘못된 사용 방식에서 비롯된다고 주장합니다. 개발자들이 헤더, 사이드바, 메인, 푸터 전체 페이지 레이아웃에 명시적 라인 번호나 grid-template-areas를 적용하는 대신, 범위를 좁힌 단순한 그리드로도 충분하다는 것입니다. 그의 데모에서는 전통적인 holy grail 레이아웃을 리팩토링하여 전체 너비의 헤더와 푸터를 그리드에서 분리하고, 중간 콘텐츠 영역에만 세 컬럼 grid-template-columns(auto 1fr auto) 정의를 남겨 각 자식 요소의 라인 번호 지정을 없앱니다. 반응형 처리는 860px 미만에서 grid-template-columns를 제거하는 단일 중첩 미디어 쿼리로 충분하며, 컬럼이 자연스럽게 쌓입니다. Powell은 flexbox와의 차이도 비교합니다. CSS Grid는 아이템이 wrap될 때 예측하기 어려운 flex-grow 상호작용 없이 부모에서 자식 컬럼 크기를 한 번에 선언할 수 있습니다. 결론적으로 기본값은 소수의 트랙만 다루는 작고 목적에 맞는 그리드로 시작하고, grid-template-areas와 명시적 라인 번호는 행과 열을 함께 제어해야 할 때만 사용해야 합니다.
CSS에 이제 @function at-rule을 통한 네이티브 커스텀 함수가 도입되었습니다(현재 실험적 기능). Web Dev Simplified의 Kyle이 점진적으로 복잡해지는 예제로 설명합니다. 함수는 @function --name(--param <type>) 형식으로 선언하며, return 키워드 대신 특별한 result 속성으로 값을 반환하고, 일반 CSS 캐스케이드 순서를 따릅니다. 즉, 마지막 result 할당이 최종 값이 되어 함수 본문 안에서 미디어 쿼리 기반 분기가 가능합니다. <color>, <number>, <percentage> 타입 어노테이션은 현재 선택 사항이지만, 기능이 성숙해지면 개발 도구의 경고 기능을 지원하게 됩니다. 함수는 CSS 레이어를 따르므로 낮은 우선순위 레이어에서 동일한 함수 이름을 정의하면 JavaScript의 함수 shadowing과 유사한 오버로드로 동작합니다. 동영상에서는 중첩 미디어 쿼리를 사용해 세 가지 중단점(≤200px, 200–300px, 이상) 사이에서 값을 전환하는 --responsive(--small, --medium, --large) 유틸리티를 시연하고, --large 매개변수가 생략되었을 때 CSS if() 스타일 쿼리로 우아하게 대체하는 방법도 보여줍니다. JavaScript와 달리 조기 반환이 없으며 모든 조건 경로가 평가되고 캐스케이드 순서에서 마지막 result가 브라우저가 사용하는 값이라는 점이 핵심적인 사고 전환입니다.
Patrick Brosset은 2005년 Million Dollar Homepage — Alex Tew가 1픽셀당 1달러(최소 구매 10×10픽셀)로 광고 공간을 판매한 바이럴 마케팅 — 를 CSS Grid로 재현했습니다. 원본 페이지는 단일 이어붙인 이미지와 HTML 이미지 맵으로 구현되었지만, 이 재현작은 100행 100열의 CSS 그리드와 grid-area 속성으로 각 광고 블록을 배치하는 div 요소로 대체합니다. 이 데모는 대규모 명시적 그리드 위에서 정밀하고 비균일한 배치를 처리하는 CSS Grid의 능력을 직관적으로 보여주는 사례로, grid-area 단축 속성이 원본 픽셀 좌표에 직접 매핑됩니다. 원본 이미지 에셋을 재사용하되 명시적 부적절 콘텐츠는 제거했습니다.
::scroll-marker 가상 요소는 스크롤 컨테이너에 직접 연결된 상호작용형 내비게이션 인디케이터를 생성하는 새로운 CSS 기능으로, 클릭 시 특정 섹션으로 스냅하는 앵커 링크처럼 동작하여 JavaScript 없이 캐러셀 페이지네이션 도트를 구현합니다. Scroll markers는 스크롤 컨테이너의 자식 요소에 선언하며 스크롤러에 자동으로 연결되어, 기존 도트 기반 캐러셀에 필요했던 JavaScript 이벤트 리스너, 스크롤 계산, 활성 상태 관리를 대체합니다. Usman Writes의 이 글은 이 기능을 스크립팅이 필요했던 UI 패턴을 CSS가 지속적으로 흡수하는 트렌드의 일환으로 소개합니다. 게시 시점의 브라우저 지원은 초기 단계이므로 프로덕션 사용 시 지원 여부를 확인해야 합니다.
Schalk Neethling의 CSS anchor positioning 시리즈 2부는 position-area의 3×3 그리드를 넘어 세 가지 함수로 픽셀 수준의 제어를 제공합니다. anchor(<side>)는 containing block 엣지에서 지정된 앵커 엣지까지의 거리로 해석되어 inset-block-start, left 등의 inset 속성에 사용하며, 물리적·논리적·컨텍스트(inside/outside)·퍼센트 키워드를 지원하지만 물리적 키워드는 해당 속성의 축과 일치해야 합니다. calc()와 조합하면 정확한 간격(calc(anchor(start) + 0.5rem))이나 서로 다른 앵커를 inset-block-start와 inset-block-end에 사용하는 멀티 앵커 스트레칭도 가능합니다. Popover API의 중요한 함정: UA 스타일시트가 [popover]에 inset: 0; margin: auto를 설정하므로, anchor 함수가 올바르게 동작하려면 inset: auto; margin: unset으로 명시적으로 초기화해야 합니다. anchor-center는 align-self/justify-self의 값으로, 엣지만 앵커 중심점으로 이동시키는 anchor(center)와 달리 해당 축에서 위치 지정 요소를 앵커의 중심에 완전히 정렬합니다. anchor-size(<dimension>)는 앵커의 측정된 크기를 반환하며(inline-size: anchor-size(inline)으로 드롭다운을 트리거 너비에 맞추는 등), anchor()와 달리 축 일치 제약이 없습니다.
CSS는 JavaScript의 영역을 또 한 번 흡수하며 2026년을 엽니다. 중심에는 Schalk Neethling의 CSS Anchor Positioning2부작이 있습니다. 1부는 anchor-name, position-anchor, 3×3position-area 그리드를, 2부는 그리드로 부족할 때 쓰는 anchor(), anchor-center, anchor-size()를 다룹니다. 포지셔닝 라이브러리 없는 툴팁·드롭다운·컨텍스트 메뉴가 데모를 넘어 실무 워크플로가 되었습니다.
같은 흐름이 이번 주의 다른 글에도 흐릅니다. ::scroll-marker는 JavaScript 없는 캐러셀을 현실로 만들었고, Web Dev Simplified는 오버로드까지 지원하는 CSS 커스텀 함수를 파헤칩니다. 한편 Kevin Powell은 '그리드를 과하게 설계하지 말자'는 새해 결심을 제안하고, Patrick Brosset은 2005년의 Million Dollar Homepage를 100×100 CSS grid 하나로 재현하며 레이아웃 원시 기능이 얼마나 멀리 왔는지 보여 줍니다.
Key Takeaways
CSS Anchor Positioning은 실무 툴팁·드롭다운에 쓸 준비가 되었습니다. position-area를 먼저 익히고, 픽셀 정밀도가 필요할 때만 anchor()를 쓰세요.
::scroll-marker와 CSS 커스텀 함수는 JavaScript가 필요했던 기능을 CSS가 계속 흡수하고 있음을 보여 줍니다.
그리드의 복잡함은 대개 스스로 만든 것입니다. 전체 스펙에 손대기 전에 단순한 트랙 정의부터 시작하세요.
