2026 · Week 31
CSS route matching으로 navigation state를… — 2026년 31주 CSS 및 스타일링
이번 주 CSS 작업은 browser navigation, shape decoration, typographic rhythm을 declarative primitive에 더 가깝게 옮겼습니다. 제안된 CSS Route and Navigation Matching 명세는 @route,…
주간 다이제스트 아카이브
CSS 및 스타일링
출처를 검증한 주간 보고서 31개를 최신순으로 확인하세요.
2026 · Week 30
Motion UI: 성능 등급 부여 React 애니메이션 라이브러리 — 2026년 30주 CSS 및 스타일링
이번 주 CSS & Styling 이슈는 브라우저 수렴의 실질적인 시점에 발행됩니다. 이산값 트랜지션, @starting-style, writing-mode는 모던 브라우저 전반에서 기준선을 달성했고, text-fit은 Chromium에 먼저 도착해 앞으로를 예고합니다. 한때…
2026 · Week 29
CSS random()으로 색종이 뿌리기 — 2026년 29주 CSS 및 스타일링
이번 주 CSS & 스타일링 이슈의 핵심은 새로 등장한 random() 함수입니다. Schalk Neethling의 28분짜리 심층 분석은 랜덤 캐시 네임 모델, 점진적 향상의 함정, 그리고 폴백 아키텍처에서 @supports not보다 @layer가 더 나은 이유를 다루는 결정판…
2026 · Week 28
Anchor Positioning 시작하기 — 2026년 28주 CSS 및 스타일링
이번 주 CSS 분야는 JavaScript 의존성을 줄이는 새로운 플랫폼 기능에 집중되었습니다. CSS Anchor Positioning API는 anchor-name, position-anchor, position-area를 사용해 툴팁이나 드롭다운을 임의의 앵커 요소에 정확하게 배치하며,…
2026 · Week 27
딱 알맞은 Customizable Select 높이 — 2026년 27주 CSS 및 스타일링
이번 주는 CSS 레이아웃과 UI 프리미티브가 주목을 받았습니다. Apple과 Google 간의 오랜 스펙 논쟁을 마무리한 네이티브 CSS 마소너리 레이아웃 display: grid-lanes에 대해 두 편의 글이 나왔습니다. 하나는 grid-template-columns,…
2026 · Week 26
light-dark(), contrast-color(), Style… — 2026년 26주 CSS 및 스타일링
이번 주 CSS는 테마, 창의적 효과, 접근성, 도구 등 여러 영역에서 중요한 발전이 있었습니다. Una Kravets는 2026년 5월에 Baseline Newly Available이 된 완전 선언적 테마 시스템을 소개했습니다. light-dark(), contrast-color(),…
2026 · Week 25
CSS Day 2026 현장: CSS 괴짜 문화 탐구 — 2026년 25주 CSS 및 스타일링
암스테르담에서 열린 CSS Day 2026이 이번 주의 분위기를 주도하였습니다. 14개의 세션에서 언어의 최전선을 다루었습니다. 주요 내용으로는 Lea Verou의 OKLCH 색 공간과 올바른 gamut 매핑, Sara Joy의 light-dark()와 color-scheme을 활용한…
2026 · Week 24
@function — CSS의 Native Custom Function — 2026년 24주 CSS 및 스타일링
이번 주 스타일링 분야의 가장 큰 소식은 CSS 네이티브 커스텀 함수의 등장이었습니다. CSS Functions and Mixins Module Level 1의 @function at-rule이 Chromium 139에서 지원되기 시작하면서, 기본값이 있는 타입 지정 파라미터, 로컬 변수,…
2026 · Week 23
VoidZero, Cloudflare에 합류 — 2026년 23주 CSS 및 스타일링
이번 주 가장 큰 스타일링 뉴스는 Vite, Vitest, Rolldown, Oxc를 만든 Evan You의 VoidZero가 Cloudflare에 인수된 것입니다. 모든 프로젝트는 MIT 라이선스 오픈 소스로 유지됩니다. 2023년 이후 팀은 Vite 8의 기본 번들러인 Rolldown,…
2026 · Week 22
알고리즘 테마 엔진: contrast-color()로 자기 교정 색상 시스템 구축 — 2026년 22주 CSS 및 스타일링
이번 주 CSS 색상 도구링에서 중요한 이정표가 세워졌습니다. contrast-color()가 Chrome 147, Firefox 146, Safari 26.0에서 Baseline Newly Available 상태에 도달하여, 접근 가능한 텍스트 색상 선택을 위해 chroma-js나…
2026 · Week 21
CSS Gap Decoration: column-rule과 row-rule로… — 2026년 21주 CSS 및 스타일링
이번 주 CSS는 중요한 새 레이아웃 기능을 얻었습니다. 네이티브 gap 데코레이션 제안은 column-rule 확장과 새로운 row-rule 속성을 통해 추가 마크업 없이 grid 및 flex gap 안에 스타일이 적용된 선을 그릴 수 있게 해 주며, rule-break,…
2026 · Week 20
Safari 26.5의 WebKit 기능 — 2026년 20주 CSS 및 스타일링
이번 주에는 브라우저에 새로운 CSS 기능이 대거 추가됐습니다. Safari 26.5는 details, dialog, select, input 요소의 열린 상태를 통합 스타일링하는 :open 의사 클래스를 출시하고, CSS random()에서 이름 있는 캐시 키가 기본으로 전역 범위를 갖도록…
2026 · Week 19
Tailwind CSS v4.3: Scrollbar, 새 색상 등 — 2026년 19주 CSS 및 스타일링
이번 주 스타일링 분야는 Tailwind CSS가 중심이었습니다. v4.2와 v4.3이 동시에 공개되었는데, v4.2에서는 mauve, olive, mist, taupe 네 가지 중립 색상 팔레트, PostCSS 방식 대비 빌드 속도를 2배 이상 단축하는 전용 webpack 플러그인, 그리고…
2026 · Week 18
Scroll-driven Animation — 2026년 18주 CSS 및 스타일링
이번 주 CSS는 이미 모든 주요 브라우저에서 지원되는 API에 대한 심층 튜토리얼들이 주목을 받았습니다. Josh W. Comeau는 animation-timeline: view(), animation-timeline: scroll(), animation-range(cover,…
2026 · Week 17
2026년 4월 웹 플랫폼의 새로운 기능 — 2026년 17주 CSS 및 스타일링
2026년 4월은 CSS 브라우저 상호 운용성에서 획기적인 달이었습니다. Chrome 147은 비직사각형 테두리를 위한 border-shape와 element.startViewTransition()을 통한 요소 범위 view transition을 출시했습니다. Firefox 150은…
2026 · Week 16
Squash and Stretch: 디즈니 최초 애니메이션 원칙을 웹에 적용하기 — 2026년 16주 CSS 및 스타일링
이번 주 스타일링 분야는 애니메이션, 레이아웃, 크로스 브라우저 호환성을 폭넓게 다뤘습니다. Josh W. Comeau는 CSS path()와 Motion 라이브러리의 Web Animations API를 활용해 SVG path 애니메이션에 디즈니 스쿼시-앤-스트레치 원칙을 적용하는 방법을…
2026 · Week 15
CSS의 Spring Physics — 2026년 15주 CSS 및 스타일링
이번 주에는 영향력 있는 CSS 기능들이 주목받았습니다. CSS linear() 이징 함수는 Chrome 113, Firefox 112, Safari 17.2부터 지원되며, 감쇠 조화 진동자 방정식을 최대 60개의 균등 분포 값으로 샘플링해 런타임 JavaScript 없이 순수 CSS 커브로…
2026 · Week 14
CSS position: sticky, 이제 축별로 가장 가까운 스크롤러에 고정 — 2026년 14주 CSS 및 스타일링
14주차에는 JavaScript 의존도를 줄이는 CSS 기능 업그레이드가 잇따랐습니다. 가장 실용적인 영향을 미치는 것은 Chrome 148의 축별 position: sticky 수정입니다. 래퍼 요소에 overflow: auto clip을 사용하면 데이터 테이블의 sticky 헤더와 첫…
2026 · Week 13
교묘한 헤더 차단 기법 — 2026년 13주 CSS 및 스타일링
2026년 3월은 CSS 플랫폼 역량에 있어 획기적인 달이었습니다. Rachel Andrew의 브라우저 요약에 따르면 Chrome 146에 scroll-driven animations과 새로운 trigger-scope 프로퍼티가 추가되었고, Firefox 149와 Safari 26.4에…
2026 · Week 12
CSS의 대확장 — 2026년 12주 CSS 및 스타일링
12주차는 네이티브 CSS가 무거운 JavaScript 라이브러리의 필요성을 점차 대체하고 있다는 강력한 근거를 제시했습니다. GitButler의 "The Great CSS Expansion"은 CSS Anchor Positioning이 Floating UI와 Popper.js를,…
2026 · Week 11
border-radius를 넘어: CSS corner-shape 속성이 일상… — 2026년 11주 CSS 및 스타일링
이번 주 CSS의 표현력이 한 단계 더 도약했습니다. 이번 주 featured 기사인 corner-shape 프로퍼티(Chrome 139+)는 border-radius의 동반 속성 하나만으로 bevel, scoop, notch, squircle 코너 형태를 구현할 수 있음을 보여줍니다.…
2026 · Week 10
말이 아닌 행동으로: Progressive Enhancement로 구축한 리디자인 — 2026년 10주 CSS 및 스타일링
Brecht De Ruyte의 사이트 리디자인이 이번 주 피처 기사입니다. corner-shape를 이용한 squircle, 방향 인식 cross-document view transition, scroll-state query로 동작하는 sticky header,…
2026 · Week 9
혼돈을 받아들여라 — Masonry 레이아웃의 형태와 흐름 — 2026년 9주 CSS 및 스타일링
이번 주 추천 아티클은 네이티브 masonry 레이아웃을 shape(형태)와 flow(흐름)라는 두 관점으로 재해석합니다. display: grid-lanes 스펙은 열이나 행 구조를 제공하지만, 항상 가장 짧은 lane을 선택하는 packing 알고리즘은 본질적으로 순서에 무관하며,…
2026 · Week 8
border-shape: 비직사각형 웹의 미래 | una.im — 2026년 8주 CSS 및 스타일링
이번 주 CSS는 두 가지 흐름이 교차했습니다. 강력한 새 레이아웃 및 기하학 기본 기능이 브라우저에 도착하는 동시에, 이미 있는 도구를 잘못 사용하는 관행에 대한 실질적인 점검이 이루어졌습니다. 주요 기사인 border-shape는 Chrome Canary 146+에서 테스트 가능하며,…
2026 · Week 7
Interop 2026 출범 – Mozilla Hacks — 2026년 7주 CSS 및 스타일링
이번 주 CSS는 크로스 브라우저 공조와 스크롤 드리븐 혁신을 중심으로 역사적인 한 주를 보냈습니다. 이번 주 대표 기사인 Interop 2026은 scroll-driven animations, container style queries, 새로운 CSS shape() 구문 등 20개의…
2026 · Week 6
CSS @scope: 명명 규칙과 무거운 추상화의 대안 — Smashing… — 2026년 6주 CSS 및 스타일링
이번 주 CSS가 주목을 받았습니다. 핵심은 CSS @scope가 BEM 명명 규칙과 CSS-in-JS 툴링을 대체할 수 있는 실용적인 Baseline 호환 대안이라는 명확한 주장이었습니다. 2025년 12월 Firefox 146으로 크로스 브라우저 지원이 완성된 지금, 상위 루트와 선택적…
2026 · Week 5
Shrinkwrap 해결: 새로운 실험적 기법 — 2026년 5주 CSS 및 스타일링
이번 주 CSS는 Roman Komarov의 이번 주 특집 심층 분석이 중심을 이루었습니다. 10년 동안 해결되지 않았던 shrinkwrap 문제, 즉 자동 줄바꿈된 인라인 콘텐츠 너비에 맞게 요소를 조정하는 것을 anchor positioning과 scroll-driven…
2026 · Week 4
CSS @container scroll-state() 쿼리: JavaScript… — 2026년 4주 CSS 및 스타일링
이번 주 CSS 커버리지는 하나의 테마로 수렴합니다. 브라우저가 과거 JavaScript를 요구했던 동작을 점점 더 자체적으로 처리하고 있다는 것입니다. 주요 아이템인 Brecht De Ruyte의 CSS @container scroll-state() 쿼리 심층 분석이 가장 명확한…
2026 · Week 3
판도를 바꾸는 새로운 CSS 스크롤 기능 — 2026년 3주 CSS 및 스타일링
이번 주 스타일링 이슈는 CSS가 라이브러리를 대체하는 진정한 상호작용 엔진으로 성장하고 있음을 보여줍니다. Web Dev Simplified의 피처드 영상은 Chromium에 도착한 네 가지 새로운 스크롤 기반 기능을 소개합니다. sticky/snapped/scrollable 상태를…
2026 · Week 2
상대 색상으로 더 스마트한 색상 시스템 만들기 — 2026년 2주 CSS 및 스타일링
2주차 CSS의 주제는 색상 인텔리전스와 레이아웃 창의성의 만남입니다. 주목할 영상은 Kevin Powell의 CSS relative colors 시연으로, 디자인 시스템의 흔한 고통 지점을 재정의합니다. 브랜드 색상마다 tint·shade·transparent 변수를 별도로 관리하는 대신,…
2026 · Week 1
CSS Anchor Positioning 시작하기: anchor-name,… — 2026년 1주 CSS 및 스타일링
CSS는 JavaScript의 영역을 또 한 번 흡수하며 2026년을 엽니다. 중심에는 Schalk Neethling의 CSS Anchor Positioning 2부작이 있습니다. 1부는 anchor-name, position-anchor, 3×3 position-area 그리드를, 2부는…