(BUSAN.SASHIMI)
terminal
Weekly Digest // STYLING — Week 3-2026
paletteWeekly Report

판도를 바꾸는 새로운 CSS 스크롤 기능 — 2026년 3주 CSS 및 스타일링

CSS architecture, utility frameworks, and animation performance

calendar_todaysummarizeWeek 3-2026
애니메이션

판도를 바꾸는 새로운 CSS 스크롤 기능

CSS가 이제 JavaScript 라이브러리 전체를 대체할 수 있는 네 가지 스크롤 기반 기능을 제공합니다. scroll state 컨테이너 쿼리(container-type: scroll-state), :target-current 의사 클래스를 활용한 scroll target group, 커스텀 캐러셀 지시자를 위한 ::scroll-marker 및 ::scroll-marker-group 의사 요소, 그리고 자동 비활성화를 지원하는 ::scroll-button 의사 요소가 포함됩니다. scroll-state를 이용하면 요소가 스크롤 가능한 상태(scroll-top), position: sticky로 고정된 상태(stuck), 또는 특정 축으로 스냅된 상태(snapped-x)인지 쿼리할 수 있습니다. 스크롤 탑 버튼, 고정 헤더 스타일 변경, 실시간 목차, JavaScript 없는 완전한 CSS 캐러셀 등 모든 데모가 JavaScript 없이 구현되었습니다.

판도를 바꾸는 새로운 CSS 스크롤 기능
play_arrow
16:09
AI_INFOGRAPHIC
판도를 바꾸는 새로운 CSS 스크롤 기능 — infographicWatch Recordingarrow_forward
Video · 애니메이션57:54

이 애니메이션 그라디언트 버튼을 재현할 수 있을까?

Kevin Powell이 다층 radial-gradient() 버튼 효과를 순수 CSS로 재현하는 과정을 사고 과정과 함께 설명합니다. 핵심 기법은 background 속성에 여러 radial-gradient() 레이어를 쌓고, 각 위치 값을 syntax: "<percentage>"로 @property에 등록하여 @keyframes 애니메이션 내에서 보간될 수 있도록 하는 것입니다. 별도의 @property는 버튼 채우기 색상(syntax: "<color>")을 등록해 :hover 시 solid-fill과 border 상태 간의 부드러운 전환을 가능하게 합니다. background-origin(padding-box vs. content-box)은 그라디언트가 투명 border 아래로 번지는지를 제어합니다. animation-delay: calc(sibling-index * -500ms)를 활용한 버튼 스태거링도 다룹니다.

AI_INFOGRAPHIC
이 애니메이션 그라디언트 버튼을 재현할 수 있을까? — infographicWATCH_VIDEOarrow_forward
Article · CSSREAD TIME: 6m

Dave Rupert의 2026년 사이트 리디자인: 이름 있는 그리드 라인, View Transition, 모노스페이스

Dave Rupert의 2026년 사이트 리디자인은 세 가지 CSS 중심의 변화를 강조합니다. 첫째, 전체 사이트가 Microsoft의 Cascadia Code 변형인 Cascadia Mono로 전환되었습니다. 많은 인디 폰트에서 누락된 № 기호를 포함하고 있어 선택되었습니다. 둘째, 레이아웃 제어가 named CSS grid lines(예: grid-column: wide-start / wide-end)를 통해 크게 개선되었습니다. Stephanie Eckles의 기법을 참고한 이 방식은 취약한 네거티브 마진 오버라이드를 구성 가능한 modifier 클래스로 대체합니다. 셋째, 멀티 페이지 view transitions를 재설계하여 홈페이지 SVG 로고가 서브페이지의 내비게이션 바로 변환됩니다. :is(), :has(), CSS nesting 활용으로 CSS를 557줄에서 391줄로 줄여 약 0.8 KB(brotli)를 절감했습니다.

READ_FULL_LOGarrow_forward
Article · CSSREAD TIME: 2m

::details-content로 details 콘텐츠 스타일링하기

새로운 ::details-content 의사 요소는 <details> 요소 내부의 확장 콘텐츠 컨테이너에 CSS가 직접 접근할 수 있게 해줍니다. 이전에는 별도의 wrapper div 없이는 불가능했던 기능입니다. Chrome 131이 2024년 11월에, Safari 18.4가 2025년 3월 31일에, Firefox 143이 2025년 9월에 지원을 추가하면서 세 엔진 모두에서 Baseline newly available 상태가 되었습니다. 실용적인 사용 예로는 절대 위치 지정이 있습니다. ::details-content에 position, width, z-index를 적용해 확장 폼 필드를 카드 그리드 위에 오버레이하면 레이아웃 이동을 방지할 수 있습니다. height 전환 애니메이션, 배경 스타일링, overflow 제어에도 활용할 수 있으며, @supports selector(::details-content)로 점진적 향상을 구현할 수 있습니다.

READ_FULL_LOGarrow_forward
Article · 색상READ TIME: 11m

CSS 상대 색상을 활용한 애니메이션 테마(스매싱 애니메이션 8부)

Andy Clarke는 OKLCH 색상 공간의 CSS relative colors를 활용해 SVG 애니메이션의 수동 팔레트 관리를 대체하는 방법을 소개합니다. 단일 --foundation 커스텀 프로퍼티를 정의하고, oklch(from var(--foundation) calc(l ± n) calc(c * n) calc(h ± n))를 통해 모든 fill, stroke, gradient stop을 도출합니다. 핵심 원칙은 명도는 더하거나 빼고(move), 채도는 곱하며(scale), 색상은 도수를 가감(rotate)하는 것입니다. 색상을 부드럽게 애니메이션하려면 각 OKLCH 채널을 syntax: "<number>"로 등록된 @property 세 개로 분리한 뒤 --foundation으로 재조합합니다. 하나의 flame 토큰으로 램프 발광과 mix-blend-mode: color 오버레이를 동시에 제어하는 조명 시스템 예시도 포함됩니다.

READ_FULL_LOGarrow_forward
Article · 폼READ TIME: 7m

커스터마이징 가능한 select 업데이트: 다중 select

Brecht De Ruyte는 현재 Chrome Canary에서 테스트 가능한 CSS 커스터마이징 가능한 <select multiple> 요소의 개발 현황을 소개합니다. select와 ::picker(select) 의사 요소 모두에 appearance: base-select를 적용하면 다중 선택 UX가 개선됩니다. 마우스 클릭 시 더 이상 Ctrl/Cmd를 유지할 필요가 없으며, 터치 기기의 싱글 탭 동작과 일치합니다. select 내부의 .options-grid div를 통해 display: grid 레이아웃을 적용하고 ::checkmark 의사 요소로 옵션을 카드 형태로 스타일링할 수 있습니다. multiple select에 size="1"을 설정하면 일관된 체크마크가 있는 드롭다운 방식의 picker가 생성됩니다. <selectedcontent>와 ::after 의사 요소를 활용한 선택 옵션 인라인 표시 방안도 제안합니다.

READ_FULL_LOGarrow_forward
summarizeDigest_Summary

이번 주 스타일링 이슈는 CSS가 라이브러리를 대체하는 진정한 상호작용 엔진으로 성장하고 있음을 보여줍니다. Web Dev Simplified의 피처드 영상은 Chromium에 도착한 네 가지 새로운 스크롤 기반 기능을 소개합니다. sticky/snapped/scrollable 상태를 쿼리하는 container-type: scroll-state, 목차 링크 자동 강조를 위한 :target-current 의사 클래스, 커스텀 캐러셀 인디케이터를 위한 ::scroll-marker와 ::scroll-marker-group, 그리고 이전/다음 버튼이 자동 비활성화되는 ::scroll-button입니다. 고정 헤더 스타일 변경, 실시간 목차, 완전한 캐러셀 등 모든 데모가 JavaScript 없이 구현되었습니다.

여러 아이템을 관통하는 핵심 주제는 타입이 지정된 @property가 기존에 불가능했던 애니메이션을 가능하게 한다는 것입니다. Kevin Powell은 개별 radial-gradient 위치를 syntax: "<percentage>" 커스텀 프로퍼티로 등록해 @keyframes 내에서 보간되도록 합니다. Andy Clarke는 이 개념을 SVG 테마에 적용하여 단일 --foundation 토큰이 oklch()로 모든 fill, stroke, gradient stop을 제어하고, OKLCH 채널을 분리된 @property 등록으로 애니메이션합니다. Dave Rupert의 2026년 사이트 리디자인은 named grid lines으로 취약한 네거티브 마진을 대체하고, 뷰 트랜지션으로 SVG 로고를 네비게이션 바로 변환하며, :is(), :has(), CSS 중첩으로 166줄의 CSS를 절감한 실용적 사례를 보여줍니다.

두 가지 아이템은 네이티브 폼 요소를 다룹니다. Brecht De Ruyte는 appearance: base-select를 통해 개발 중인 <select multiple>을 미리 살펴보며, 그리드 카드 레이아웃 적용과 Ctrl/Cmd 다중 선택 제거를 소개합니다. 이제 Baseline에 안착한 ::details-content 의사 요소는 <details> 내부 컨테이너를 직접 스타일링할 수 있게 하며, @supports selector(::details-content)로 점진적 향상을 구현할 수 있습니다.

Key Takeaways
  • Chromium에 도착한 네 가지 새로운 CSS 스크롤 기능(scroll-state, :target-current, ::scroll-marker, ::scroll-button)은 캐러셀, 스티키 헤더, 실시간 목차 강조를 위한 JavaScript 라이브러리 전체를 대체할 수 있습니다.
  • 타입이 지정된 @property 등록은 radial-gradient 위치와 OKLCH 색상 채널의 부드러운 CSS 애니메이션을 가능하게 하여, 기존에 JavaScript에서만 구현 가능했던 레이어드 효과를 실현합니다.
  • ::details-content 의사 요소가 이제 세 엔진 모두에서 Baseline 상태가 되어, <details> 콘텐츠에 대한 직접 CSS 접근으로 height 애니메이션, 오버레이, overflow 제어가 가능해졌습니다.