CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 13-2026
article
교묘한 헤더 차단 기법
TAG: 레이아웃
Josh W. Comeau가 JavaScript 없이 순수 CSS만으로 sticky 헤더의 배경색이 섹션마다 달라 보이게 하는 기법을 공개합니다. 핵심 원리는 position: sticky로 배치된 두 개의 숨겨진 "blocker" 요소로, 각각 hero 영역(파란색)과 본문 영역(흰색)에 색상을 맞춥니다. sticky 요소는 컨테이너를 벗어나면 자동으로 떨어지기 때문에, 파란색 blocker가 사라지는 순간 흰색 blocker가 자연스럽게 이어받아 매끄러운 전환 효과를 만들어 냅니다. 헤더 자체는 항상 투명한 배경을 유지합니다. 한 가지 설계 제약이 있는데, blocker가 앉을 공간을 확보하기 위해 각 섹션 상단에 헤더 높이(Comeau 블로그 기준 5rem) 이상의 빈 여백이 필요합니다.
Brecht De Ruyte가 Astro 기반 개인 사이트의 CSS 아키텍처를 공개합니다. 전처리기 없이 postcss-custom-media와 autoprefixer만으로 구성된 최소한의 PostCSS 환경입니다. 핵심은 단일 @layer 선언으로, vendor → tokens → reset → atoms → molecules → organisms → pages → utilities 순서를 고정해 임포트 순서와 무관하게 cascade 우선순위를 보장합니다. 커스텀 프로퍼티는 raw 값(--p-), 시맨틱 토큰(--s-), 컴포넌트 오버라이드(--c-)의 3단계 체계로 구성되며, 기존 193줄짜리 dark.css는 light-dark() 함수로 대체되었습니다. CSS reset은 모든 규칙을 :where()로 감싸 특이성을 0으로 유지하고, prefers-reduced-motion 블록을 레이어 바깥에 두어 !important 없이도 모든 애니메이션보다 우선합니다. 컴포넌트 수준에서는 미디어 쿼리 대신 container query를 사용하며, 전체 프로젝트에 logical property가 적용되어 있습니다.
Rachel Andrew의 월간 정리는 2026년 3월 안정화 및 베타 브라우저 릴리스를 다룹니다. Chrome 146, Firefox 149, Safari 26.4가 대상입니다. 주요 내용: 이름만으로 매칭하는 @container조건이 Firefox 149와 Safari 26.4에 추가되었고, Chrome 146에 스크롤 기반 애니메이션과 trigger-scope 프로퍼티(애니메이션 트리거 이름 범위 지정)가 도입되었습니다. Firefox 149는 popover hint 값을, Safari 26.4는 display: grid-lanes와 img sizes 속성 내 min(), max(), clamp() 수학 함수를 지원합니다. Firefox 149에는 CloseWatcher 인터페이스도 추가됩니다. 베타에서는 Chrome 147이 contrast-color(), border-shape, 범위 지정 뷰 전환을 추가하고, Firefox 150 베타가 revert-rule 키워드와 light-dark()의 이미지 확장을 예고합니다.
Cassidy Williams가 오픈소스 앱 todometer의 약 10년에 걸친 스타일링 변천사를 회고합니다. Electron/React 기반에서 Less로 시작해, 2020년 캡슐화를 위해 CSS Modules와 node-sass로 전환했고, 2023년에는 node-sass 지원 종료를 계기로 Sass를 완전히 제거하고 postcss-nested(Sass 호환 문법)로 이동했습니다. 이번 글의 핵심은 postcss-nested를 CSS 스펙 문법의 postcss-nesting으로 교체한 뒤, 네이티브 CSS nesting이 기본 지원됨에 따라 PostCSS 설정 파일 자체를 삭제한 과정입니다. 마이그레이션 diff는 놀랍도록 작았으며, 10년간의 전처리기 의존이 결국 브라우저에 내장된 변수와 nesting이라는 동일한 기능으로 귀결되었음을 잘 보여줍니다.
Zoran Jambor의 이번 주 CSS Weekly는 border-radius를 넘어 beveled, scooped, squircle 모서리를 구현하는 새로운 corner-shape 프로퍼티를 주요 내용으로 다룹니다. 그 외에도 커스터마이징 가능한 select 엘리먼트, Una Kravets의 contrast-color()를 통한 자동 접근성 텍스트 색상, Bramus Van Damme의 light-dark() 이미지 지원 확장 소식, Kitty Giraudel의 CSS 전용 폴딩 모서리 효과, Temani Afif의 anchor positioning 활용 사례, 그리고 스크롤 가능한 패널 내 드롭다운 문제 해결법이 수록되어 있습니다.
Schalk Neethling가 Web Platform Tests를 기준으로 Interop 2026 목록의 CSS 기능 두 가지를 JavaScript 폴리필로 구현하는 적합성 기반 개발(conformance-driven development) 실험을 기록합니다. 첫 번째 후보인 CSS Values Level 5의 고급 attr() 함수는 custom property 상속과 @property 문제, var() 치환을 막는 복합 선언, 불명확한 CSS.supports() 감지 등의 난관을 드러냈습니다. 두 번째인 CSS media pseudo-class(:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked)는 더 단순해 보였지만, 미디어 이벤트가 버블링되지 않아 WeakMap으로 요소별 리스너를 관리해야 하고, stalled 상태는 DOM에 노출되지 않아 폴리필이 직접 추적해야 하며, :muted는 volume === 0이 아닌 muted IDL 속성만 매칭함을 밝혀냈습니다. :volume-locked는 OS 수준의 제약으로 폴리필 불가능으로 분류되었습니다.
Kevin Powell이 작은 크기에서 그라디언트가 찌그러져 보이는 progress bar 문제를 영리하게 해결하는 방법을 시연합니다. progress bar가 linear-gradient를 사용할 때, 그라디언트는 요소의 현재 너비만큼만 채워지기 때문에 바가 줄어들수록 압축된 것처럼 보입니다. 해결책은 progress 요소 자체에 container-type: inline-size를 적용해 container query를 사용하는 자식 요소가 없더라도 해당 요소를 컨테이너로 만드는 것입니다. 그런 다음 그라디언트에 background-size: 100cqi(컨테이너 inline-size의 100%)를 지정하면, 채워진 너비와 무관하게 그라디언트가 항상 전체 범위를 표현합니다. 이 기법은 크로스 브라우저 progress 스타일링을 위해 -webkit-progress-value와 -moz-progress-bar 가상 요소에도 적용됩니다.
Josh W. Comeau가 JavaScript 없이 순수 CSS만으로 sticky 헤더의 배경색이 섹션마다 달라 보이게 하는 기법을 공개합니다. 핵심 원리는 position: sticky로 배치된 두 개의 숨겨진 "blocker" 요소로, 각각 hero 영역(파란색)과 본문 영역(흰색)에 색상을 맞춥니다. sticky 요소는 컨테이너를 벗어나면 자동으로 떨어지기 때문에, 파란색 blocker가 사라지는 순간 흰색 blocker가 자연스럽게 이어받아 매끄러운 전환 효과를 만들어 냅니다. 헤더 자체는 항상 투명한 배경을 유지합니다. 한 가지 설계 제약이 있는데, blocker가 앉을 공간을 확보하기 위해 각 섹션 상단에 헤더 높이(Comeau 블로그 기준 5rem) 이상의 빈 여백이 필요합니다.
Kevin Powell이 작은 크기에서 그라디언트가 찌그러져 보이는 progress bar 문제를 영리하게 해결하는 방법을 시연합니다. progress bar가 linear-gradient를 사용할 때, 그라디언트는 요소의 현재 너비만큼만 채워지기 때문에 바가 줄어들수록 압축된 것처럼 보입니다. 해결책은 progress 요소 자체에 container-type: inline-size를 적용해 container query를 사용하는 자식 요소가 없더라도 해당 요소를 컨테이너로 만드는 것입니다. 그런 다음 그라디언트에 background-size: 100cqi(컨테이너 inline-size의 100%)를 지정하면, 채워진 너비와 무관하게 그라디언트가 항상 전체 범위를 표현합니다. 이 기법은 크로스 브라우저 progress 스타일링을 위해 -webkit-progress-value와 -moz-progress-bar 가상 요소에도 적용됩니다.
Brecht De Ruyte가 Astro 기반 개인 사이트의 CSS 아키텍처를 공개합니다. 전처리기 없이 postcss-custom-media와 autoprefixer만으로 구성된 최소한의 PostCSS 환경입니다. 핵심은 단일 @layer 선언으로, vendor → tokens → reset → atoms → molecules → organisms → pages → utilities 순서를 고정해 임포트 순서와 무관하게 cascade 우선순위를 보장합니다. 커스텀 프로퍼티는 raw 값(--p-), 시맨틱 토큰(--s-), 컴포넌트 오버라이드(--c-)의 3단계 체계로 구성되며, 기존 193줄짜리 dark.css는 light-dark() 함수로 대체되었습니다. CSS reset은 모든 규칙을 :where()로 감싸 특이성을 0으로 유지하고, prefers-reduced-motion 블록을 레이어 바깥에 두어 !important 없이도 모든 애니메이션보다 우선합니다. 컴포넌트 수준에서는 미디어 쿼리 대신 container query를 사용하며, 전체 프로젝트에 logical property가 적용되어 있습니다.
Rachel Andrew의 월간 정리는 2026년 3월 안정화 및 베타 브라우저 릴리스를 다룹니다. Chrome 146, Firefox 149, Safari 26.4가 대상입니다. 주요 내용: 이름만으로 매칭하는 @container조건이 Firefox 149와 Safari 26.4에 추가되었고, Chrome 146에 스크롤 기반 애니메이션과 trigger-scope 프로퍼티(애니메이션 트리거 이름 범위 지정)가 도입되었습니다. Firefox 149는 popover hint 값을, Safari 26.4는 display: grid-lanes와 img sizes 속성 내 min(), max(), clamp() 수학 함수를 지원합니다. Firefox 149에는 CloseWatcher 인터페이스도 추가됩니다. 베타에서는 Chrome 147이 contrast-color(), border-shape, 범위 지정 뷰 전환을 추가하고, Firefox 150 베타가 revert-rule 키워드와 light-dark()의 이미지 확장을 예고합니다.
Cassidy Williams가 오픈소스 앱 todometer의 약 10년에 걸친 스타일링 변천사를 회고합니다. Electron/React 기반에서 Less로 시작해, 2020년 캡슐화를 위해 CSS Modules와 node-sass로 전환했고, 2023년에는 node-sass 지원 종료를 계기로 Sass를 완전히 제거하고 postcss-nested(Sass 호환 문법)로 이동했습니다. 이번 글의 핵심은 postcss-nested를 CSS 스펙 문법의 postcss-nesting으로 교체한 뒤, 네이티브 CSS nesting이 기본 지원됨에 따라 PostCSS 설정 파일 자체를 삭제한 과정입니다. 마이그레이션 diff는 놀랍도록 작았으며, 10년간의 전처리기 의존이 결국 브라우저에 내장된 변수와 nesting이라는 동일한 기능으로 귀결되었음을 잘 보여줍니다.
Zoran Jambor의 이번 주 CSS Weekly는 border-radius를 넘어 beveled, scooped, squircle 모서리를 구현하는 새로운 corner-shape 프로퍼티를 주요 내용으로 다룹니다. 그 외에도 커스터마이징 가능한 select 엘리먼트, Una Kravets의 contrast-color()를 통한 자동 접근성 텍스트 색상, Bramus Van Damme의 light-dark() 이미지 지원 확장 소식, Kitty Giraudel의 CSS 전용 폴딩 모서리 효과, Temani Afif의 anchor positioning 활용 사례, 그리고 스크롤 가능한 패널 내 드롭다운 문제 해결법이 수록되어 있습니다.
Schalk Neethling가 Web Platform Tests를 기준으로 Interop 2026 목록의 CSS 기능 두 가지를 JavaScript 폴리필로 구현하는 적합성 기반 개발(conformance-driven development) 실험을 기록합니다. 첫 번째 후보인 CSS Values Level 5의 고급 attr() 함수는 custom property 상속과 @property 문제, var() 치환을 막는 복합 선언, 불명확한 CSS.supports() 감지 등의 난관을 드러냈습니다. 두 번째인 CSS media pseudo-class(:playing, :paused, :seeking, :buffering, :stalled, :muted, :volume-locked)는 더 단순해 보였지만, 미디어 이벤트가 버블링되지 않아 WeakMap으로 요소별 리스너를 관리해야 하고, stalled 상태는 DOM에 노출되지 않아 폴리필이 직접 추적해야 하며, :muted는 volume === 0이 아닌 muted IDL 속성만 매칭함을 밝혀냈습니다. :volume-locked는 OS 수준의 제약으로 폴리필 불가능으로 분류되었습니다.
2026년 3월은 CSS 플랫폼 역량에 있어 획기적인 달이었습니다. Rachel Andrew의 브라우저 요약에 따르면 Chrome 146에 scroll-driven animations과 새로운 trigger-scope 프로퍼티가 추가되었고, Firefox 149와 Safari 26.4에 이름만으로 매칭하는 선택적 @container조건이 도입되었으며, Safari 26.4는 display: grid-lanes와 img sizes의 수학 함수를 지원합니다. 또한 Chrome 147 베타는 contrast-color(), border-shape, 범위 지정 뷰 전환을 추가하고, Firefox 150 베타는 light-dark()의 이미지 지원을 확장할 예정입니다. CSS Weekly 638호는 border-radius를 넘어 squircle과 beveled 모서리를 구현하는 새로운 corner-shape 프로퍼티도 소개했습니다.
실용적인 CSS 아키텍처 사고도 이번 주 핵심 주제였습니다. Brecht De Ruyte는 vendor부터 utilities까지 8개 레이어로 구성된 엄격한 @layer 캐스케이드, 3단계 커스텀 프로퍼티 명명 체계, 그리고 193줄짜리 다크 모드 CSS를 대체한 light-dark()를 활용한 전처리기 없는 CSS 시스템을 상세히 공개했습니다. Cassidy Williams는 todometer의 10년 스타일링 역사를 Less, Sass, PostCSS를 거쳐 결국 네이티브 CSS nesting으로 귀결되며 PostCSS 설정을 완전히 제거한 과정으로 돌아봤습니다.
기법 중심의 두 글도 이번 주를 마무리했습니다. Josh Comeau의 숨겨진 position: sticky blocker 요소를 이용한 순수 CSS sticky 헤더 색상 전환 기법과, Kevin Powell의 progress 요소 자체에 container-type: inline-size를 적용하고 background-size: 100cqi를 사용해 소형 fill 너비에서 그라디언트 왜곡을 해결하는 영리한 기법이 소개되었습니다.
Key Takeaways
Chrome 146에 trigger-scope와 함께 scroll-driven animations이 도입되었고, Chrome 147 베타는 contrast-color()와 border-shape를 추가합니다. cascade layer와 최신 CSS 아키텍처가 이제 프로덕션 기본값이 되었습니다.
corner-shape 프로퍼티(squircle, beveled, scooped 모서리)와 light-dark()의 이미지 지원 확장이 브라우저에 탑재되면서 SVG 해킹과 JS 기반 테마에 대한 의존도가 줄어듭니다.
네이티브 CSS nesting이 이제 기본 지원됩니다. Cassidy Williams는 todometer를 postcss-nested에서 postcss-nesting을 거쳐 네이티브 nesting으로 마이그레이션한 뒤 PostCSS 설정 파일을 전부 삭제했습니다.
