border-shape: 비직사각형 웹의 미래 | una.im — 2026년 8주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 8-2026
article
border-shape: 비직사각형 웹의 미래 | una.im
TAG: 심층 분석
Chrome Canary 146 이상에서 실험적 웹 플랫폼 기능 플래그를 활성화하면 테스트할 수 있는 border-shape CSS 속성은 clip-path처럼 요소를 마스킹하는 대신 요소의 실제 border 기하 구조 자체를 재정의합니다. CSS Borders and Box Decorations Module Level 4에 정의된 이 속성은 circle(), ellipse(), inset(), polygon(), 새로운 shape() 함수, SVG 스타일 path 문자열을 값으로 받습니다. shape이 적용되면 background, border-image, focus outline, box-shadow가 모두 새 기하 구조를 자동으로 따릅니다. 기사에서는 --ap, --ah, --aw 사용자 정의 속성으로 구성된 tooltip, chevron 내비게이션, content-box 키워드를 활용한 scalloped border 등 세 가지 실제 데모를 소개합니다.
Navigation API — 더 나은 내비게이션 방식, Baseline Newly Available
TAG: 릴리스
Navigation API는 2026년 초 Safari와 Firefox 지원이 추가되면서 Baseline Newly Available 상태가 되었습니다. 링크 클릭, popstate 이벤트(pushState·replaceState 호출 시 발생하지 않음), history.pushState() 호출을 개별적으로 처리해야 했던 History API 패턴을 대체합니다. navigation.addEventListener('navigate', ...) 하나로 링크 클릭·폼 제출·뒤로/앞으로 버튼·navigation.navigate() 호출 등 모든 탐색 유형을 가로챌 수 있습니다. event.intercept() 핸들러는 URL 자동 업데이트, 접근성을 위한 포커스 자동 관리, 폼 제출용 NavigateEvent.formData 속성을 제공합니다. scroll: 'manual' 옵션으로 비동기 콘텐츠 로드 중 스크롤 복원 시점을 세밀하게 제어할 수 있으며, DOM 업데이트를 document.startViewTransition()으로 감싸면 SPA에서 앱과 같은 부드러운 페이지 전환이 가능합니다.
이 기사는 :heading()과 pow()를 활용한 이전 포스트를 확장하여 clamp()로 유동적 스케일링을 추가합니다. 375px에서 1440px 사이의 뷰포트 너비를 rem 기반 최솟값과 최댓값으로 선형 보간하는 방식입니다. --heading-level 사용자 정의 속성(h1 = 5, h6 = 0)을 각 heading 레벨에 매핑하므로 clamp() 로직이 h1~h6 선택자마다 중복되지 않고 하나의 :heading 블록에 집약됩니다. h1의 지수가 5인 이유는 1rem에 스케일 비율의 5제곱을 곱해 가장 큰 크기를 만들고, 지수가 0인 h6은 기본 크기(1rem)를 유지하기 때문입니다. WCAG 1.4.4 준수를 위해 clamp()의 min·max 값은 반드시 rem 단위를 사용해야 하며, :heading() 유사 클래스와 pow()는 현재 Safari Technology Preview에서만 실험적으로 지원됩니다.
:heading(), sibling-index(), pow()로 CSS 타이포그래피 스케일 만들기
TAG: 기법
:heading() 유사 클래스, sibling-index(), CSS Values and Units Level 4의 pow()를 조합하면 장황한 타이포그래피 스케일을 세 개의 사용자 정의 속성과 단일 font-size 규칙으로 압축할 수 있습니다. 핵심 공식은 font-size = base-size x ratio^(6 - sibling-index())로, h1(인덱스 1)은 ratio^5(최댓값), h6(인덱스 6)은 ratio^0 = 1(기본 크기)이 됩니다. Perfect Fourth 비율(1.333)을 적용하면 h1은 4.209rem, h6은 1rem입니다. --typographic-scale 변수 하나만 바꾸면 Minor Third(1.2)·Major Third(1.25)·Perfect Fifth(1.5) 간 전환이 가능합니다. 단, sibling-index()는 의미론적 heading 레벨이 아닌 DOM 형제 순서를 기준으로 하므로 heading 태그가 반복되거나 건너뛰면 스케일이 깨집니다. 현재 세 기능 모두 Safari Technology Preview에서만 지원됩니다.
Temani Afif는 anchor-name이 참조 가능한지를 결정하는 브라우저의 핵심 규칙을 명확히 정리합니다. anchor 요소의 박스가 positioned 요소의 박스보다 먼저 완전히 레이아웃되어야 한다는 것입니다. 이 규칙 하나가 수많은 엣지 케이스를 설명합니다. .element가 .anchor의 자식일 때 .anchor에 non-static position을 주면 containing block이 되어 규칙이 깨지지만, .element에 position: fixed를 적용하면 containing block이 viewport로 바뀌어 다시 작동합니다. 형제 순서도 중요합니다. .anchor가 DOM에서 .element 뒤에 오고 position: absolute 또는 fixed이면 참조가 실패하지만, relative·sticky는 여전히 작동합니다. z-index로는 이 순서 문제를 해결할 수 없습니다. 가장 확실한 실패 케이스는 .anchor가 .element의 containing block 바깥에 있는 경우로, DOM 순서에 상관없이 항상 참조가 무효가 됩니다.
CSS Anchor Positioning 시리즈의 마지막 포스트는 anchor-scope, implicit anchor, position-visibility세 가지 고급 기능을 다룹니다. anchor-scope 속성은 anchor-name이 전역으로 표시되어 같은 이름을 공유하는 반복 컴포넌트에서 모든 tooltip이 DOM 마지막 요소에 쌓이는 이름 충돌 문제를 해결합니다. 부모 li에 anchor-scope: --card를 적용하면 서브트리 경계가 생성됩니다. Popover API의 popovertarget 속성이나 showPopover({ source }) 호출로 자동 생성되는 implicit anchor는 CSS 이름 체계를 완전히 우회하므로 충돌이 발생하지 않습니다. position-visibility의 anchors-visible, no-overflow 값을 조합하면 조건부 숨김 처리가 가능하며, 트리거 시 force-hidden으로 강제 적용되어 하위 요소의 visibility: visible도 무시됩니다.
Kevin Powell은 숙련된 개발자도 자주 저지르는 CSS 실수 다섯 가지를 짚어줍니다. 첫째, 블록 요소에 불필요한 width: 100% 선언 — margin을 추가하면 box-sizing: border-box와 무관하게 overflow가 발생합니다(margin은 border 바깥에 있기 때문). 둘째, 콘텐츠가 늘어날 때 깨지는 고정 height 대신 min-height 사용. 셋째, 시간이 지남에 따라 내용이 달라지는 중복 컴포넌트 스타일 — Powell 자신의 fancy-button과 link-button, 닫히지 않은 @layer 블록을 실제 사례로 시연. 넷째, outline: none 대신 :focus-visible 사용 — outline: none은 키보드 사용자에게도 포커스 표시를 숨겨버리며, ESPN 사이트에서 탭 이동 시 포커스된 요소가 전혀 보이지 않는 현상으로 직접 시연. 다섯째, CSS Grid가 더 적합한 상황에서 flexbox를 과용하는 것 — Powell은 이를 부분적으로 오래된 flexbox 중심 패턴으로 학습된 AI 모델 탓으로 봅니다.
Chrome Canary 146 이상에서 실험적 웹 플랫폼 기능 플래그를 활성화하면 테스트할 수 있는 border-shape CSS 속성은 clip-path처럼 요소를 마스킹하는 대신 요소의 실제 border 기하 구조 자체를 재정의합니다. CSS Borders and Box Decorations Module Level 4에 정의된 이 속성은 circle(), ellipse(), inset(), polygon(), 새로운 shape() 함수, SVG 스타일 path 문자열을 값으로 받습니다. shape이 적용되면 background, border-image, focus outline, box-shadow가 모두 새 기하 구조를 자동으로 따릅니다. 기사에서는 --ap, --ah, --aw 사용자 정의 속성으로 구성된 tooltip, chevron 내비게이션, content-box 키워드를 활용한 scalloped border 등 세 가지 실제 데모를 소개합니다.
Kevin Powell은 숙련된 개발자도 자주 저지르는 CSS 실수 다섯 가지를 짚어줍니다. 첫째, 블록 요소에 불필요한 width: 100% 선언 — margin을 추가하면 box-sizing: border-box와 무관하게 overflow가 발생합니다(margin은 border 바깥에 있기 때문). 둘째, 콘텐츠가 늘어날 때 깨지는 고정 height 대신 min-height 사용. 셋째, 시간이 지남에 따라 내용이 달라지는 중복 컴포넌트 스타일 — Powell 자신의 fancy-button과 link-button, 닫히지 않은 @layer 블록을 실제 사례로 시연. 넷째, outline: none 대신 :focus-visible 사용 — outline: none은 키보드 사용자에게도 포커스 표시를 숨겨버리며, ESPN 사이트에서 탭 이동 시 포커스된 요소가 전혀 보이지 않는 현상으로 직접 시연. 다섯째, CSS Grid가 더 적합한 상황에서 flexbox를 과용하는 것 — Powell은 이를 부분적으로 오래된 flexbox 중심 패턴으로 학습된 AI 모델 탓으로 봅니다.
Navigation API — 더 나은 내비게이션 방식, Baseline Newly Available
Navigation API는 2026년 초 Safari와 Firefox 지원이 추가되면서 Baseline Newly Available 상태가 되었습니다. 링크 클릭, popstate 이벤트(pushState·replaceState 호출 시 발생하지 않음), history.pushState() 호출을 개별적으로 처리해야 했던 History API 패턴을 대체합니다. navigation.addEventListener('navigate', ...) 하나로 링크 클릭·폼 제출·뒤로/앞으로 버튼·navigation.navigate() 호출 등 모든 탐색 유형을 가로챌 수 있습니다. event.intercept() 핸들러는 URL 자동 업데이트, 접근성을 위한 포커스 자동 관리, 폼 제출용 NavigateEvent.formData 속성을 제공합니다. scroll: 'manual' 옵션으로 비동기 콘텐츠 로드 중 스크롤 복원 시점을 세밀하게 제어할 수 있으며, DOM 업데이트를 document.startViewTransition()으로 감싸면 SPA에서 앱과 같은 부드러운 페이지 전환이 가능합니다.
이 기사는 :heading()과 pow()를 활용한 이전 포스트를 확장하여 clamp()로 유동적 스케일링을 추가합니다. 375px에서 1440px 사이의 뷰포트 너비를 rem 기반 최솟값과 최댓값으로 선형 보간하는 방식입니다. --heading-level 사용자 정의 속성(h1 = 5, h6 = 0)을 각 heading 레벨에 매핑하므로 clamp() 로직이 h1~h6 선택자마다 중복되지 않고 하나의 :heading 블록에 집약됩니다. h1의 지수가 5인 이유는 1rem에 스케일 비율의 5제곱을 곱해 가장 큰 크기를 만들고, 지수가 0인 h6은 기본 크기(1rem)를 유지하기 때문입니다. WCAG 1.4.4 준수를 위해 clamp()의 min·max 값은 반드시 rem 단위를 사용해야 하며, :heading() 유사 클래스와 pow()는 현재 Safari Technology Preview에서만 실험적으로 지원됩니다.
:heading(), sibling-index(), pow()로 CSS 타이포그래피 스케일 만들기
:heading() 유사 클래스, sibling-index(), CSS Values and Units Level 4의 pow()를 조합하면 장황한 타이포그래피 스케일을 세 개의 사용자 정의 속성과 단일 font-size 규칙으로 압축할 수 있습니다. 핵심 공식은 font-size = base-size x ratio^(6 - sibling-index())로, h1(인덱스 1)은 ratio^5(최댓값), h6(인덱스 6)은 ratio^0 = 1(기본 크기)이 됩니다. Perfect Fourth 비율(1.333)을 적용하면 h1은 4.209rem, h6은 1rem입니다. --typographic-scale 변수 하나만 바꾸면 Minor Third(1.2)·Major Third(1.25)·Perfect Fifth(1.5) 간 전환이 가능합니다. 단, sibling-index()는 의미론적 heading 레벨이 아닌 DOM 형제 순서를 기준으로 하므로 heading 태그가 반복되거나 건너뛰면 스케일이 깨집니다. 현재 세 기능 모두 Safari Technology Preview에서만 지원됩니다.
Temani Afif는 anchor-name이 참조 가능한지를 결정하는 브라우저의 핵심 규칙을 명확히 정리합니다. anchor 요소의 박스가 positioned 요소의 박스보다 먼저 완전히 레이아웃되어야 한다는 것입니다. 이 규칙 하나가 수많은 엣지 케이스를 설명합니다. .element가 .anchor의 자식일 때 .anchor에 non-static position을 주면 containing block이 되어 규칙이 깨지지만, .element에 position: fixed를 적용하면 containing block이 viewport로 바뀌어 다시 작동합니다. 형제 순서도 중요합니다. .anchor가 DOM에서 .element 뒤에 오고 position: absolute 또는 fixed이면 참조가 실패하지만, relative·sticky는 여전히 작동합니다. z-index로는 이 순서 문제를 해결할 수 없습니다. 가장 확실한 실패 케이스는 .anchor가 .element의 containing block 바깥에 있는 경우로, DOM 순서에 상관없이 항상 참조가 무효가 됩니다.
CSS Anchor Positioning 시리즈의 마지막 포스트는 anchor-scope, implicit anchor, position-visibility세 가지 고급 기능을 다룹니다. anchor-scope 속성은 anchor-name이 전역으로 표시되어 같은 이름을 공유하는 반복 컴포넌트에서 모든 tooltip이 DOM 마지막 요소에 쌓이는 이름 충돌 문제를 해결합니다. 부모 li에 anchor-scope: --card를 적용하면 서브트리 경계가 생성됩니다. Popover API의 popovertarget 속성이나 showPopover({ source }) 호출로 자동 생성되는 implicit anchor는 CSS 이름 체계를 완전히 우회하므로 충돌이 발생하지 않습니다. position-visibility의 anchors-visible, no-overflow 값을 조합하면 조건부 숨김 처리가 가능하며, 트리거 시 force-hidden으로 강제 적용되어 하위 요소의 visibility: visible도 무시됩니다.
이번 주 CSS는 두 가지 흐름이 교차했습니다. 강력한 새 레이아웃 및 기하학 기본 기능이 브라우저에 도착하는 동시에, 이미 있는 도구를 잘못 사용하는 관행에 대한 실질적인 점검이 이루어졌습니다. 주요 기사인 border-shape는 Chrome Canary 146+에서 테스트 가능하며, clip-path로 마스킹하는 대신 요소의 실제 border 기하 구조를 재정의해 tooltip, chevron 내비게이션, scalloped border에서 background, outline, shadow가 자동으로 새 형태를 따르도록 합니다. 아울러 Navigation API가 Baseline Newly Available 상태가 된 것은 의미 있는 순간입니다. 이제 단 하나의 navigate 이벤트 리스너가 모든 브라우저에서 분산된 History API 패턴을 대체합니다.
Anchor Positioning도 이번 주에 더 성숙해졌습니다. anchor-scope(반복 컴포넌트의 이름 충돌 해결), position-visibility(조건부 force-hidden 숨김), 그리고 Temani Afif의 anchor 참조 실패 원인 분석(z-index로 해결할 수 없는 레이아웃 순서 규칙)이 나란히 발표됐습니다. 타이포그래피에서는 :heading(), sibling-index(), clamp()를 결합해 장황한 스케일을 몇 개의 사용자 정의 속성으로 압축하는 방법이 소개됐지만, 두 기능 모두 현재 Safari에서만 지원됩니다.
Kevin Powell의 CSS 실수 5가지 비판 — 불필요한 width:100%, 고정 height, 포커스 링 억제, flexbox 과용 — 은 한 주를 기본기로 마무리했습니다. AI 모델이 오래된 flexbox 중심 코드로 학습되어 그 패턴을 영속시킨다는 지적은 AI 보조 개발을 도입하는 팀에게 조용하지만 중요한 시사점입니다.
Key Takeaways
border-shape (Chrome Canary 146+)로 요소 기하 구조를 재정의하면 background, shadow, outline이 모두 새 형태를 자동으로 따름
Navigation API가 모든 주요 브라우저에서 Baseline으로 — SPA에서 단 하나의 navigate 리스너가 분산된 History API 패턴을 대체
anchor-scope와 position-visibility가 CSS Anchor Positioning의 충돌 및 숨김 문제를 보완하며, anchor 참조 실패는 z-index가 아닌 레이아웃 순서 규칙에서 비롯됨
