CSS Day 2026 현장: CSS 괴짜 문화 탐구 — 2026년 25주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 25-2026
article
CSS Day 2026 현장: CSS 괴짜 문화 탐구
TAG: 컨퍼런스
암스테르담에서 열린 CSS Day 2026의 12번째 에디션에서는 이틀에 걸쳐 열네 개의 세션이 진행되었습니다. Lea Verou는 OKLCH 색 공간과 브라우저의 부적절한 gamut clipping 문제를 다뤘고, Sara Joy는 light-dark()와 color-scheme을 활용한 JavaScript 없는 다크 모드를 시연했습니다. Bramus Van Damme는 View Transitions의 scoped subtree 전환과 scroll-driven animation 연동을 소개했으며, Jake Archibald는 appearance: base-select와 ::picker, selectedcontent를 통해 33년 만에 실현된 스타일 가능한 select 요소의 역사를 정리했습니다. Patrick Brosset는 Safari 26.4에 탑재된 grid-lanes(masonry 레이아웃)를 발표했고, Adam Argyle은 scroll-state(), sibling-index(), interpolate-size, :autofill 등 컨텍스트 인식 CSS로 디자인 시스템을 개선하자는 메시지로 컨퍼런스를 마무리했습니다.
View Transition: view-transition-name에 attr() vs. match-element
TAG: 애니메이션
반복 요소 집합에 view-transition-name을 개별로 지정하는 두 가지 방법이 있습니다. attr() 방식은 data 속성을 읽어 custom-ident로 캐스팅하며(예: view-transition-name: attr(data-id type(<custom-ident>), none)), 단일 문서와 다중 문서(MPA) 전환 모두에서 작동합니다. match-element 키워드는 브라우저의 내부 요소 식별 카운터를 기반으로 자동으로 이름을 부여하지만 두 가지 제한이 있습니다: MPA에서는 문서 간 요소 식별이 일치하지 않아 완전히 동작하지 않으며, ::view-transition-old()와 같은 특정 transition pseudo를 이름으로 지정할 수 없습니다. 결론적으로 match-element는 특정 요소의 pseudo를 참조할 필요가 없는 SPA 전환에 적합하고, attr()는 크로스 문서 또는 개별 타겟팅이 필요한 경우에 올바른 선택입니다.
Microsoft Edge의 Patrick Brosset은 Safari 26.4에 탑재되고 Chromium에서는 플래그 뒤에 있는 새로운 CSS grid-lanes 레이아웃(masonry 스타일)의 정렬 모델을 상세히 설명합니다. grid-lanes는 두 가지 축을 도입합니다: 레인이 배치되는 방향의 grid axis와 레인 내에서 아이템이 쌓이는 방향의 stacking axis입니다. grid axis에서 justify-content와 justify-items는 일반 CSS Grid와 동일하게 작동합니다. stacking axis가 grid-lanes의 핵심 차별점으로, 아이템 spanning으로 인한 공백이나 레인의 높이 차이가 있을 때 align-items: stretch로 남은 공간을 채울 수 있으며, 이것이 masonry 레이아웃을 자연스럽게 만드는 요소입니다. 개별 아이템은 align-self로 재정의할 수 있습니다.
Safari 27에 customizable select가 도입되어 appearance: base-select를 사용해 JavaScript나 div 기반 대체 없이 select 요소를 완전히 스타일링할 수 있게 됩니다. WebKit 팀(Saron Yitbarek, Tim Nguyen)은 하나의 핵심 원칙을 강조합니다: 모든 option 요소에는 반드시 텍스트 콘텐츠 또는 접근 가능한 텍스트 속성이 포함되어야 한다는 것입니다. 아이콘만 사용하면 식별 불가, 스크린 리더 오작동, 미지원 브라우저의 빈 옵션이라는 세 가지 문제가 동시에 발생합니다. 해결책은 간단합니다 — 아이콘과 함께 visually-hidden 텍스트를 유지하고, @supports (appearance: base-select)로 기능을 감싸며, 아이콘은 레이블의 대체가 아닌 보완으로만 사용하면 됩니다.
Carmen Ansio는 실제 HTML 텍스트에 활판 인쇄 스타일 타이포그래픽 효과를 만드는 SVG filter primitive 세트를 소개합니다. operator="dilate"의 feMorphology는 CSS text-stroke(중앙 분할)와 달리 진정한 외부 선을 구현하며, erode는 폰트를 변경하지 않고 서체를 얇게 만듭니다. 중첩된 feOffset 레이어는 단계별 독립적인 색상 제어가 가능한 19세기 shadow woodtype을 재현합니다. feSpecularLighting은 흐릿한 SourceAlpha를 높이 맵으로 읽어 마우스 이동에 반응하는 금속 표면 조명 효과를 시뮬레이션합니다. 실용적인 참고사항으로는 filter defs를 display:none 대신 크기가 0인 인라인 SVG에 유지하고, bleed 효과를 위해 filter region을 확장하며, 모든 애니메이션에 IntersectionObserver와 prefers-reduced-motion을 적용할 것을 권장합니다.
::scroll-button과 ::scroll-marker를 활용한 Native CSS Carousel
TAG: 컴포넌트
CSS Overflow Module Level 5는 JavaScript 없이 완전히 CSS로 구동되는 캐러셀을 구현하는 두 가지 새로운 pseudo-element를 도입합니다. ::scroll-button() pseudo-element(inline-start, inline-end 등 논리적 방향값 사용)는 스크롤 가능한 컨테이너 가장자리에 브라우저 관리형 네비게이션 버튼을 렌더링하며 content 속성으로 스타일링 가능합니다. ::scroll-marker와 ::scroll-marker-group은 각 scroll-snap 지점에 시각적 위치 표시기를 생성하고, :target-current pseudo-class가 활성 마커를 자동으로 강조합니다. 브라우저 지원은 현재 제한적이지만, 이 스펙을 통해 JavaScript 이벤트 처리나 서드파티 라이브러리 없이 접근 가능하고 시각적으로 일관된 스크롤 인터페이스를 순수 CSS만으로 구현할 수 있습니다.
Kevin Powell은 현재 모든 브라우저에서 기본 지원되는 CSS style query의 두 가지 실용적인 패턴을 시연합니다. 첫 번째는 @container style() 쿼리 내에서 부모 요소에 --theme: primary 같은 custom property를 설정해 자식 컴포넌트가 색상과 스타일을 자동으로 조정하도록 하는 방법으로, 전통적인 modifier 클래스 방식을 대체합니다. 두 번째이자 더 강력한 패턴은 style query를 조건부 modifier 클래스처럼 활용하는 것입니다: media query 중단점에서 --card-density: compact 같은 custom property를 설정하면 JavaScript나 HTML 클래스 변경 없이 해당 하위 카드들이 모두 compact 스타일로 전환됩니다. Powell은 이 방식이 JS 기반 클래스 토글보다 깔끔하며 중단점 로직과 마크업의 결합을 피할 수 있다고 강조합니다.
암스테르담에서 열린 CSS Day 2026의 12번째 에디션에서는 이틀에 걸쳐 열네 개의 세션이 진행되었습니다. Lea Verou는 OKLCH 색 공간과 브라우저의 부적절한 gamut clipping 문제를 다뤘고, Sara Joy는 light-dark()와 color-scheme을 활용한 JavaScript 없는 다크 모드를 시연했습니다. Bramus Van Damme는 View Transitions의 scoped subtree 전환과 scroll-driven animation 연동을 소개했으며, Jake Archibald는 appearance: base-select와 ::picker, selectedcontent를 통해 33년 만에 실현된 스타일 가능한 select 요소의 역사를 정리했습니다. Patrick Brosset는 Safari 26.4에 탑재된 grid-lanes(masonry 레이아웃)를 발표했고, Adam Argyle은 scroll-state(), sibling-index(), interpolate-size, :autofill 등 컨텍스트 인식 CSS로 디자인 시스템을 개선하자는 메시지로 컨퍼런스를 마무리했습니다.
Kevin Powell은 현재 모든 브라우저에서 기본 지원되는 CSS style query의 두 가지 실용적인 패턴을 시연합니다. 첫 번째는 @container style() 쿼리 내에서 부모 요소에 --theme: primary 같은 custom property를 설정해 자식 컴포넌트가 색상과 스타일을 자동으로 조정하도록 하는 방법으로, 전통적인 modifier 클래스 방식을 대체합니다. 두 번째이자 더 강력한 패턴은 style query를 조건부 modifier 클래스처럼 활용하는 것입니다: media query 중단점에서 --card-density: compact 같은 custom property를 설정하면 JavaScript나 HTML 클래스 변경 없이 해당 하위 카드들이 모두 compact 스타일로 전환됩니다. Powell은 이 방식이 JS 기반 클래스 토글보다 깔끔하며 중단점 로직과 마크업의 결합을 피할 수 있다고 강조합니다.
View Transition: view-transition-name에 attr() vs. match-element
반복 요소 집합에 view-transition-name을 개별로 지정하는 두 가지 방법이 있습니다. attr() 방식은 data 속성을 읽어 custom-ident로 캐스팅하며(예: view-transition-name: attr(data-id type(<custom-ident>), none)), 단일 문서와 다중 문서(MPA) 전환 모두에서 작동합니다. match-element 키워드는 브라우저의 내부 요소 식별 카운터를 기반으로 자동으로 이름을 부여하지만 두 가지 제한이 있습니다: MPA에서는 문서 간 요소 식별이 일치하지 않아 완전히 동작하지 않으며, ::view-transition-old()와 같은 특정 transition pseudo를 이름으로 지정할 수 없습니다. 결론적으로 match-element는 특정 요소의 pseudo를 참조할 필요가 없는 SPA 전환에 적합하고, attr()는 크로스 문서 또는 개별 타겟팅이 필요한 경우에 올바른 선택입니다.
Microsoft Edge의 Patrick Brosset은 Safari 26.4에 탑재되고 Chromium에서는 플래그 뒤에 있는 새로운 CSS grid-lanes 레이아웃(masonry 스타일)의 정렬 모델을 상세히 설명합니다. grid-lanes는 두 가지 축을 도입합니다: 레인이 배치되는 방향의 grid axis와 레인 내에서 아이템이 쌓이는 방향의 stacking axis입니다. grid axis에서 justify-content와 justify-items는 일반 CSS Grid와 동일하게 작동합니다. stacking axis가 grid-lanes의 핵심 차별점으로, 아이템 spanning으로 인한 공백이나 레인의 높이 차이가 있을 때 align-items: stretch로 남은 공간을 채울 수 있으며, 이것이 masonry 레이아웃을 자연스럽게 만드는 요소입니다. 개별 아이템은 align-self로 재정의할 수 있습니다.
Safari 27에 customizable select가 도입되어 appearance: base-select를 사용해 JavaScript나 div 기반 대체 없이 select 요소를 완전히 스타일링할 수 있게 됩니다. WebKit 팀(Saron Yitbarek, Tim Nguyen)은 하나의 핵심 원칙을 강조합니다: 모든 option 요소에는 반드시 텍스트 콘텐츠 또는 접근 가능한 텍스트 속성이 포함되어야 한다는 것입니다. 아이콘만 사용하면 식별 불가, 스크린 리더 오작동, 미지원 브라우저의 빈 옵션이라는 세 가지 문제가 동시에 발생합니다. 해결책은 간단합니다 — 아이콘과 함께 visually-hidden 텍스트를 유지하고, @supports (appearance: base-select)로 기능을 감싸며, 아이콘은 레이블의 대체가 아닌 보완으로만 사용하면 됩니다.
Carmen Ansio는 실제 HTML 텍스트에 활판 인쇄 스타일 타이포그래픽 효과를 만드는 SVG filter primitive 세트를 소개합니다. operator="dilate"의 feMorphology는 CSS text-stroke(중앙 분할)와 달리 진정한 외부 선을 구현하며, erode는 폰트를 변경하지 않고 서체를 얇게 만듭니다. 중첩된 feOffset 레이어는 단계별 독립적인 색상 제어가 가능한 19세기 shadow woodtype을 재현합니다. feSpecularLighting은 흐릿한 SourceAlpha를 높이 맵으로 읽어 마우스 이동에 반응하는 금속 표면 조명 효과를 시뮬레이션합니다. 실용적인 참고사항으로는 filter defs를 display:none 대신 크기가 0인 인라인 SVG에 유지하고, bleed 효과를 위해 filter region을 확장하며, 모든 애니메이션에 IntersectionObserver와 prefers-reduced-motion을 적용할 것을 권장합니다.
::scroll-button과 ::scroll-marker를 활용한 Native CSS Carousel
CSS Overflow Module Level 5는 JavaScript 없이 완전히 CSS로 구동되는 캐러셀을 구현하는 두 가지 새로운 pseudo-element를 도입합니다. ::scroll-button() pseudo-element(inline-start, inline-end 등 논리적 방향값 사용)는 스크롤 가능한 컨테이너 가장자리에 브라우저 관리형 네비게이션 버튼을 렌더링하며 content 속성으로 스타일링 가능합니다. ::scroll-marker와 ::scroll-marker-group은 각 scroll-snap 지점에 시각적 위치 표시기를 생성하고, :target-current pseudo-class가 활성 마커를 자동으로 강조합니다. 브라우저 지원은 현재 제한적이지만, 이 스펙을 통해 JavaScript 이벤트 처리나 서드파티 라이브러리 없이 접근 가능하고 시각적으로 일관된 스크롤 인터페이스를 순수 CSS만으로 구현할 수 있습니다.
암스테르담에서 열린 CSS Day 2026이 이번 주의 분위기를 주도하였습니다. 14개의 세션에서 언어의 최전선을 다루었습니다. 주요 내용으로는 Lea Verou의 OKLCH 색 공간과 올바른 gamut 매핑, Sara Joy의 light-dark()와 color-scheme을 활용한 JavaScript 없는 다크 모드, Bramus Van Damme의 scoped View Transitions와 scroll-driven animation 연동, Jake Archibald의 appearance: base-select와 ::picker를 통한 33년 만의 스타일 가능한 select 요소, 그리고 Adam Argyle의 scroll-state(), sibling-index(), interpolate-size 같은 컨텍스트 인식 CSS 채택 촉구가 있었습니다.
두 가지 스펙 수준의 발전이 특히 주목을 받았습니다. Safari 26.4에 탑재되고 Chromium에서는 플래그 뒤에 있는 CSS grid-lanes는 align-items: stretch로 레인 간격을 자연스럽게 채우는 독립적인 stacking axis를 도입합니다. Microsoft Edge의 Patrick Brosset이 이를 상세히 문서화하였습니다. 또한 CSS Overflow Module Level 5는 JavaScript 없이 scroll-snap 지점과 직접 연결되는 ::scroll-button() 및 ::scroll-marker pseudo-element를 통한 네이티브 캐러셀을 제공하며, :target-current가 활성 마커를 자동으로 강조합니다. Kevin Powell도 CSS style query가 이제 모든 브라우저에서 기본 지원됨을 시연하였으며, 마크업 변경 없이 custom property 기반의 조건부 테마를 구현할 수 있음을 보여주었습니다.
접근성 측면에서 WebKit은 Safari 27에서 제공될 customizable select의 황금 원칙을 발표하였습니다. 모든 option 요소에는 아이콘과 함께 반드시 텍스트 콘텐츠가 포함되어야 하며, @supports (appearance: base-select)로 감싸 점진적 개선을 적용해야 합니다. Carmen Ansio의 SVG filter primitive 심층 분석 — feMorphology를 이용한 진정한 외부 선, feSpecularLighting을 이용한 금속 표면 조명, feTurbulence를 이용한 잉크 번짐 효과 — 은 IntersectionObserver와 prefers-reduced-motion 처리를 적용하면서도 실제 HTML 텍스트에 풍부한 타이포그래픽 효과를 구현할 수 있음을 보여주었습니다.
Key Takeaways
CSS grid-lanes(masonry 레이아웃)가 Safari 26.4에 탑재되고 Chromium에서는 플래그 뒤에서 사용 가능합니다. align-items: stretch를 사용하는 stacking axis가 masonry의 자연스러운 느낌을 만들어냅니다.
CSS Overflow Module Level 5의 ::scroll-button(), ::scroll-marker, :target-current를 사용하면 JavaScript나 서드파티 라이브러리 없이 오늘부터 네이티브 CSS 캐러셀을 구현할 수 있습니다.
CSS style query가 이제 모든 브라우저에서 기본 지원됩니다. --card-density: compact 같은 단일 custom property 하나로 HTML이나 JavaScript를 건드리지 않고 컴포넌트 전체 서브트리의 스타일을 전환할 수 있습니다.
