CSS position: sticky, 이제 축별로 가장 가까운 스크롤러에 고정 — 2026년 14주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 14-2026
article
CSS position: sticky, 이제 축별로 가장 가까운 스크롤러에 고정
TAG: 레이아웃
오랫동안 지속되어 온 CSS의 제약이 마침내 해결되었습니다. position: sticky가 이제 축(axis)별로 서로 다른 스크롤 컨테이너를 동시에 추적할 수 있습니다. 기존에는 overflow-x: auto 래퍼 안에 넓은 데이터 테이블을 배치하면 sticky 헤더(top: 0)와 첫 번째 열(left: 0)이 모두 동일한 스크롤 기준을 공유해 수직 방향 sticky가 무력화되었습니다. 핵심은 래퍼에 overflow: auto clip을 사용하는 것으로, overflow-x: auto만 사용하면 overflow-y가 auto로 계산되어 문제가 재발합니다. Chrome 148의 Experimental Web Platform Features 플래그를 통해 테스트 가능하며, Chrome 150부터는 @supports named-feature(single-axis-scroll-container)로 기능 감지가 가능합니다. Firefox와 Safari는 아직 지원하지 않습니다.
세 가지 최신 CSS 기능이 JavaScript 기반의 표시/숨기기 애니메이션을 대체합니다. @starting-style은 요소가 DOM에 나타날 때 전환을 시작하는 초기 상태를 정의합니다. transition-behavior: allow-discrete는 display 같은 이산(discrete) 속성이 transition에 참여하도록 허용해, 종료 애니메이션이 완료된 후에야 display: none이 적용되게 합니다. interpolate-size: allow-keywords는 height: auto 같은 키워드 크기로의 전환을 레이아웃 시점에 픽셀로 해석해 애니메이션을 가능하게 합니다. 브라우저 지원: @starting-style과 transition-behavior는 Chrome 117, Firefox 129, Safari 17.5에서 지원되며, interpolate-size는 Chrome 129와 Safari 18에서 지원되지만 Firefox는 아직 미지원입니다. 세 기능을 조합하면 GSAP나 Framer Motion 없이도 대부분의 UI 표시/숨기기 패턴을 구현할 수 있습니다.
Harry Roberts가 잘 활용되지 않는 contain 속성과 그 네 가지 값 — layout, paint, size, style — 에 대한 실용적이고 심층적인 가이드를 제공합니다. contain: layout은 컴포넌트의 내부 레이아웃을 독립시키고, 포매팅 컨텍스트를 생성하며, position: fixed 자식 요소의 기준을 뷰포트 대신 해당 요소로 한정합니다. contain: paint는 렌더링을 패딩 박스로 클립하고 화면 밖 서브트리를 건너뛸 수 있게 합니다. 축약값인 content(layout+paint+style)와 strict(4가지 모두)는 대부분의 카드 및 위젯 패턴에 적합하며, strict는 contain-intrinsic-size를 통한 명시적 크기 지정이 필요합니다. OpenTable 사례 연구에서는 모바일 드로어에 contain: strict를 적용해 레이아웃 이벤트를 4,371개 노드에서 73개로 줄이고 약 6배 빠르게 만들었습니다.
view-transitions-toolkit 소개: View Transitions API용 Utility Function
TAG: 툴링
Bramus Van Damme가 수년간의 View Transitions 작업에서 얻은 고급 패턴을 재사용 가능한 헬퍼 함수로 정리한 npm 패키지 view-transitions-toolkit을 공개했습니다. 이 툴킷은 View Transitions 서브 기능 감지, document.activeViewTransition 심(shim) 지원, 키프레임 애니메이션 추출 및 최적화(SCALE, SLIDE 전략 포함), 트랜지션 재생 제어(일시 정지·스크러빙), 그리고 네비게이션 출발지/목적지에 따른 View Transition 타입 자동 주입 기능을 제공합니다. npm i view-transitions-toolkit으로 설치하며 필요한 모듈만 개별 임포트할 수 있습니다. chrome.dev/view-transitions-toolkit/에서 데모를 확인할 수 있습니다.
가변 길이 제목을 가진 형제 카드들 사이에 구분선을 정렬하는 문제는 CSS subgrid를 발견하기 전까지는 불가능해 보이는 레이아웃 과제입니다. 해결책은 부모에 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))를 설정하고, 각 카드가 grid-row: span 3으로 부모의 세 행 트랙을 차지하며 grid-template-rows: subgrid로 부모의 행 크기 결정에 참여하는 방식입니다. subgrid는 부모의 gap 값을 상속하므로 카드 내부에는 row-gap: 0으로 재정의해 내부 간격을 유지합니다. 트랙 공유는 동일한 시각적 행의 카드에만 적용되므로, JavaScript나 미디어 쿼리 없이도 반응형 래핑이 올바르게 작동합니다. :has() 의사 클래스로 아이콘 유무에 따른 변형 카드를 선언적으로 처리할 수 있습니다. Subgrid는 2026년 3월 Baseline Widely Available 상태에 도달했습니다.
CSS @property에는 더 나은 도구가 필요하다 — 그래서 Validator를 만든다
TAG: 툴링
CSS @property at-rule은 custom property에 대해 color, length, time, image 등의 타입 계약을 선언할 수 있게 해주지만, 사용 지점에서 해당 타입을 검증하는 툴링은 존재하지 않습니다. 등록된 속성을 잘못 사용하면(예: --brand-color가 color로 등록되어 있는데 background-image: var(--brand-color)로 사용) 명세에서 IACVT라 부르는 방식으로 계산값 시점에 조용히 실패합니다. CSS Property Type Validator는 TypeScript 라이브러리와 CLI(코어 검증 엔진과 CLI 래퍼 두 개의 scoped npm 패키지)로 구성되어, 스타일시트를 파싱하고 @property 레지스트리를 구축해 var() 사용 지점을 순회한 뒤 css-tree의 lexer로 타입 호환성을 검사합니다. 종료 코드는 관례적(0/1/2)이며 JSON 출력으로 CI 통합이 가능합니다. 현재는 선언당 단일 var() 사용만 지원하며, Stylelint 플러그인과 에디터 통합이 계획되어 있습니다.
Kevin Powell은 실제 카드 레이아웃 예제를 통해 CSS의 흔한 함정인 지나치게 명시적인 스타일 작성을 진단합니다. 고정 height와 고정 width 선언이 컴포넌트를 실제 레이아웃에 배치할 때 overflow와 그리드 깨짐을 유발하는 과정을 보여줍니다. 핵심적인 사고 전환: 브라우저가 이미 크기 결정 방법을 알고 있으므로, 브라우저와 싸우는 대신 브라우저와 협력하세요. 다루는 구체적인 규칙: 명시적 height 설정 지양(요소는 필요한 만큼만 높아지려 함), overflow 없이 수축을 허용하려면 width 대신 max-width 사용, 컴포넌트의 margin과 width가 주변 그리드에 영향을 주지 않도록 레이아웃 관심사와 컴포넌트 관심사 분리. 이 영상은 속성 암기보다 브라우저 협력적인 CSS 철학을 기반으로 하는 CSS Demystified v2 코스 재출시와 함께 공개되었습니다.
오랫동안 지속되어 온 CSS의 제약이 마침내 해결되었습니다. position: sticky가 이제 축(axis)별로 서로 다른 스크롤 컨테이너를 동시에 추적할 수 있습니다. 기존에는 overflow-x: auto 래퍼 안에 넓은 데이터 테이블을 배치하면 sticky 헤더(top: 0)와 첫 번째 열(left: 0)이 모두 동일한 스크롤 기준을 공유해 수직 방향 sticky가 무력화되었습니다. 핵심은 래퍼에 overflow: auto clip을 사용하는 것으로, overflow-x: auto만 사용하면 overflow-y가 auto로 계산되어 문제가 재발합니다. Chrome 148의 Experimental Web Platform Features 플래그를 통해 테스트 가능하며, Chrome 150부터는 @supports named-feature(single-axis-scroll-container)로 기능 감지가 가능합니다. Firefox와 Safari는 아직 지원하지 않습니다.
Kevin Powell은 실제 카드 레이아웃 예제를 통해 CSS의 흔한 함정인 지나치게 명시적인 스타일 작성을 진단합니다. 고정 height와 고정 width 선언이 컴포넌트를 실제 레이아웃에 배치할 때 overflow와 그리드 깨짐을 유발하는 과정을 보여줍니다. 핵심적인 사고 전환: 브라우저가 이미 크기 결정 방법을 알고 있으므로, 브라우저와 싸우는 대신 브라우저와 협력하세요. 다루는 구체적인 규칙: 명시적 height 설정 지양(요소는 필요한 만큼만 높아지려 함), overflow 없이 수축을 허용하려면 width 대신 max-width 사용, 컴포넌트의 margin과 width가 주변 그리드에 영향을 주지 않도록 레이아웃 관심사와 컴포넌트 관심사 분리. 이 영상은 속성 암기보다 브라우저 협력적인 CSS 철학을 기반으로 하는 CSS Demystified v2 코스 재출시와 함께 공개되었습니다.
세 가지 최신 CSS 기능이 JavaScript 기반의 표시/숨기기 애니메이션을 대체합니다. @starting-style은 요소가 DOM에 나타날 때 전환을 시작하는 초기 상태를 정의합니다. transition-behavior: allow-discrete는 display 같은 이산(discrete) 속성이 transition에 참여하도록 허용해, 종료 애니메이션이 완료된 후에야 display: none이 적용되게 합니다. interpolate-size: allow-keywords는 height: auto 같은 키워드 크기로의 전환을 레이아웃 시점에 픽셀로 해석해 애니메이션을 가능하게 합니다. 브라우저 지원: @starting-style과 transition-behavior는 Chrome 117, Firefox 129, Safari 17.5에서 지원되며, interpolate-size는 Chrome 129와 Safari 18에서 지원되지만 Firefox는 아직 미지원입니다. 세 기능을 조합하면 GSAP나 Framer Motion 없이도 대부분의 UI 표시/숨기기 패턴을 구현할 수 있습니다.
Harry Roberts가 잘 활용되지 않는 contain 속성과 그 네 가지 값 — layout, paint, size, style — 에 대한 실용적이고 심층적인 가이드를 제공합니다. contain: layout은 컴포넌트의 내부 레이아웃을 독립시키고, 포매팅 컨텍스트를 생성하며, position: fixed 자식 요소의 기준을 뷰포트 대신 해당 요소로 한정합니다. contain: paint는 렌더링을 패딩 박스로 클립하고 화면 밖 서브트리를 건너뛸 수 있게 합니다. 축약값인 content(layout+paint+style)와 strict(4가지 모두)는 대부분의 카드 및 위젯 패턴에 적합하며, strict는 contain-intrinsic-size를 통한 명시적 크기 지정이 필요합니다. OpenTable 사례 연구에서는 모바일 드로어에 contain: strict를 적용해 레이아웃 이벤트를 4,371개 노드에서 73개로 줄이고 약 6배 빠르게 만들었습니다.
view-transitions-toolkit 소개: View Transitions API용 Utility Function
Bramus Van Damme가 수년간의 View Transitions 작업에서 얻은 고급 패턴을 재사용 가능한 헬퍼 함수로 정리한 npm 패키지 view-transitions-toolkit을 공개했습니다. 이 툴킷은 View Transitions 서브 기능 감지, document.activeViewTransition 심(shim) 지원, 키프레임 애니메이션 추출 및 최적화(SCALE, SLIDE 전략 포함), 트랜지션 재생 제어(일시 정지·스크러빙), 그리고 네비게이션 출발지/목적지에 따른 View Transition 타입 자동 주입 기능을 제공합니다. npm i view-transitions-toolkit으로 설치하며 필요한 모듈만 개별 임포트할 수 있습니다. chrome.dev/view-transitions-toolkit/에서 데모를 확인할 수 있습니다.
가변 길이 제목을 가진 형제 카드들 사이에 구분선을 정렬하는 문제는 CSS subgrid를 발견하기 전까지는 불가능해 보이는 레이아웃 과제입니다. 해결책은 부모에 grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr))를 설정하고, 각 카드가 grid-row: span 3으로 부모의 세 행 트랙을 차지하며 grid-template-rows: subgrid로 부모의 행 크기 결정에 참여하는 방식입니다. subgrid는 부모의 gap 값을 상속하므로 카드 내부에는 row-gap: 0으로 재정의해 내부 간격을 유지합니다. 트랙 공유는 동일한 시각적 행의 카드에만 적용되므로, JavaScript나 미디어 쿼리 없이도 반응형 래핑이 올바르게 작동합니다. :has() 의사 클래스로 아이콘 유무에 따른 변형 카드를 선언적으로 처리할 수 있습니다. Subgrid는 2026년 3월 Baseline Widely Available 상태에 도달했습니다.
CSS @property에는 더 나은 도구가 필요하다 — 그래서 Validator를 만든다
CSS @property at-rule은 custom property에 대해 color, length, time, image 등의 타입 계약을 선언할 수 있게 해주지만, 사용 지점에서 해당 타입을 검증하는 툴링은 존재하지 않습니다. 등록된 속성을 잘못 사용하면(예: --brand-color가 color로 등록되어 있는데 background-image: var(--brand-color)로 사용) 명세에서 IACVT라 부르는 방식으로 계산값 시점에 조용히 실패합니다. CSS Property Type Validator는 TypeScript 라이브러리와 CLI(코어 검증 엔진과 CLI 래퍼 두 개의 scoped npm 패키지)로 구성되어, 스타일시트를 파싱하고 @property 레지스트리를 구축해 var() 사용 지점을 순회한 뒤 css-tree의 lexer로 타입 호환성을 검사합니다. 종료 코드는 관례적(0/1/2)이며 JSON 출력으로 CI 통합이 가능합니다. 현재는 선언당 단일 var() 사용만 지원하며, Stylelint 플러그인과 에디터 통합이 계획되어 있습니다.
14주차에는 JavaScript 의존도를 줄이는 CSS 기능 업그레이드가 잇따랐습니다. 가장 실용적인 영향을 미치는 것은 Chrome 148의 축별 position: sticky 수정입니다. 래퍼 요소에 overflow: auto clip을 사용하면 데이터 테이블의 sticky 헤더와 첫 번째 열이 서로 다른 스크롤 컨테이너를 동시에 추적할 수 있으며, Chrome 150에서 @supports named-feature(single-axis-scroll-container)로 기능 감지가 가능합니다. 또한 세 가지 CSS 기능이 결합하여 JS 기반 표시/숨기기 애니메이션을 완전히 대체합니다: 진입 전환을 위한 @starting-style, display 같은 이산 속성을 위한 transition-behavior: allow-discrete, height: auto 애니메이션을 위한 interpolate-size: allow-keywords.
Harry Roberts는 CSS containment에 대한 심층 가이드를 발행하여, 모바일 드로어에 contain: strict를 적용하면 레이아웃 이벤트가 4,371개 노드에서 73개로 줄어드는 약 6배의 속도 향상을 보였습니다. content-visibility: auto와 contain-intrinsic-size를 결합하면 JavaScript 없이 가상화에 준하는 성능을 얻을 수 있습니다. 그리드 측면에서는 CSS subgrid가 2026년 3월 Baseline Widely Available에 도달했으며, grid-template-rows: subgrid와 grid-row: span 3의 실용적 가이드가 JavaScript 없이 열 간 가변 높이 카드 콘텐츠를 정렬하는 방법을 시연했습니다.
두 가지 툴링 소식도 눈에 띄었습니다. Bramus Van Damme가 고급 View Transitions API 헬퍼를 제공하는 view-transitions-toolkit을 npm에 배포했으며, 새로운 TypeScript 기반 CSS Property Type Validator CLI가 타입화된 @property custom property가 잘못된 값 타입으로 소비되는 조용한 IACVT 오류를 검출합니다.
Key Takeaways
Chrome 148은 축별 position: sticky를 수정했습니다. 래퍼에 overflow-x: auto만이 아닌 overflow: auto clip을 사용해야 헤더와 첫 번째 열이 서로 다른 스크롤 컨테이너를 동시에 추적할 수 있습니다.
@starting-style, transition-behavior: allow-discrete, interpolate-size: allow-keywords를 조합하면 최신 브라우저에서 진입·이탈·height: auto 전환에 JS 클래스 토글 애니메이션이 불필요합니다.
contain: strict는 실제 OpenTable 모바일 드로어 레이아웃을 4,371개 노드에서 73개로 줄였습니다. 격리된 카드 및 위젯 컴포넌트에 CSS containment를 적용하면 측정 가능한 렌더링 성능 향상을 기대할 수 있습니다.
