CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 11-2026
article
border-radius를 넘어: CSS corner-shape 속성이 일상 UI에 여는 가능성
TAG: 심층 분석
새로운 CSS corner-shape 프로퍼티는 border-radius의 동반 속성으로, 반지름을 대체하는 것이 아니라 코너의 형태를 수정합니다. bevel, scoop, notch, squircle, 그리고 세밀하게 제어 가능한 superellipse() 함수를 지원합니다. Chrome 139+부터 outline, box-shadow, background에도 적용되며, 이는 clip-path로는 불가능했던 것입니다. 저자 Brecht De Ruyte는 CSS @layer와 @supports (corner-shape: bevel)를 활용한 다섯 가지 점진적 개선 데모를 제공합니다. round bevel bevel round 리본 배지, scoop 코너 가격 카드, squircle 아바타 등 실용적인 패턴도 포함됩니다. 스펙은 CSS Borders and Box Decorations Module Level 4에 있으며, Firefox와 Safari 지원은 아직 미정입니다.
이 실용 가이드는 2026년 기준 모든 최신 브라우저에서 지원되는 네이티브 CSS Nesting을 다루며, Sass와 어디서 차이가 나는지 설명합니다. 부모 선택자에 여러 선택자가 있을 경우 브라우저가 :is()로 감싸고, 목록에서 가장 높은 명시도를 상속합니다. .card, #featured {} 같은 선택자는 중첩된 자식에 ID 레벨 명시도(1,1,0)를 부여해 디버깅 함정이 될 수 있습니다. Sass와의 핵심 차이는 &가 문자열이 아닌 객체 참조라는 점으로, &--modifier 같은 BEM 스타일 연결이 네이티브에서는 불가능합니다. pseudo-class, media/container/feature 쿼리, prefers-reduced-motion 재정의에는 nesting을 사용하고, BEM 요소 선택자는 루트 레벨에 유지할 것을 권장합니다.
Chromium 148에 @supports at-rule(@keyword)이 탑재되었습니다. CSS Conditional Rules Module Level 5에 표준화된 이 기능은 @starting-style, @view-transition 같은 CSS at-rule을 스타일시트 내 또는 @import조건에서 직접 감지할 수 있게 합니다. 이 함수는 브라우저가 해당 at-rule을 허용하는지 확인하며, @supports at-rule(@supports)로 자기 감지도 가능합니다. 단, 디스크립터 레벨 쿼리, prelude 감지, 전체 at-rule 블록은 스펙에서 제외되었습니다. 스타일 쿼리나 anchored 쿼리 감지에는 container-type 값 확인이나 sentinel 커스텀 프로퍼티 방식 우회가 필요합니다. Firefox(이슈 #1751188)와 Safari(이슈 #235400)는 아직 미지원입니다.
이 기법은 JavaScript 없이 상태를 유지하기 위해 CSS animation의 animation-fill-mode: forwards와 animation-play-state를 활용합니다. 요소에 거의 즉각적인 애니메이션(duration: .00001s)을 paused 상태로 부여합니다. :focus 또는 :hover가 발생하면 play state가 running으로 전환되고 애니메이션이 즉시 완료되어 fill-mode가 최종 상태를 영구적으로 유지합니다. 같은 클래스를 공유하는 여러 요소가 있어도 각 요소별로 독립적으로 동작합니다. 재사용성을 높이기 위해 @keyframes로 --was-focused 커스텀 프로퍼티를 토글하고, @container style() 쿼리로 해당 값을 읽어 자식 요소에 조건부 스타일을 적용하는 방식으로 리팩터링합니다.
contrast-color()가 Chrome 147 안정 버전(2026년 3월 말)에 탑재되어 모든 최신 브라우저에서 사용 가능해졌습니다. 이 함수는 유효한 CSS 색상 값을 입력받아 WCAG 2 AA 최소 대비 비율 4.5:1을 충족하는 black 또는 white 중 하나를 반환합니다. 동점인 경우 white를 반환합니다. 디자인 시스템에서 텍스트 색상 쌍을 수동으로 관리할 필요가 없어집니다. color: contrast-color(var(--brand-color)) 선언 하나로 동적 버튼, prefers-color-scheme를 활용한 다크 모드 본문 텍스트, color-mix()로 생성된 팔레트까지 처리합니다. 현재 스펙은 의도적으로 black과 white만 지원하며, #222 같은 커스텀 대비 타겟 제안은 접근성 보장을 위해 거부되었습니다.
Kevin Powell이 이 14분짜리 영상에서 7가지 이상의 실용적인 CSS 팁을 소개합니다. 주요 내용으로는 overscroll-behavior: contain으로 스크롤 체인을 요소 내에 고정하는 방법(터치 기기의 긴 컨테이너 주의사항 포함), 브랜드 커서를 위한 caret-color, 그리고 점진적 개선 속성인 caret-shape(촬영 당시 Chrome 전용, 값: bar, block, underscore)가 있습니다. accent-color는 상속 가능한 선언 하나로 체크박스, 라디오, range 입력을 리스타일하며 자동으로 고대비 체크마크 색상을 전환합니다. color-scheme 속성과 light-dark() 함수로 손쉬운 다크 모드 기준 스타일을 구성하는 방법과, grid 컨테이너에 place-content: center를 사용하는 가장 간결한 센터링 방법도 설명합니다.
border-radius를 넘어: CSS corner-shape 속성이 일상 UI에 여는 가능성
새로운 CSS corner-shape 프로퍼티는 border-radius의 동반 속성으로, 반지름을 대체하는 것이 아니라 코너의 형태를 수정합니다. bevel, scoop, notch, squircle, 그리고 세밀하게 제어 가능한 superellipse() 함수를 지원합니다. Chrome 139+부터 outline, box-shadow, background에도 적용되며, 이는 clip-path로는 불가능했던 것입니다. 저자 Brecht De Ruyte는 CSS @layer와 @supports (corner-shape: bevel)를 활용한 다섯 가지 점진적 개선 데모를 제공합니다. round bevel bevel round 리본 배지, scoop 코너 가격 카드, squircle 아바타 등 실용적인 패턴도 포함됩니다. 스펙은 CSS Borders and Box Decorations Module Level 4에 있으며, Firefox와 Safari 지원은 아직 미정입니다.
Kevin Powell이 이 14분짜리 영상에서 7가지 이상의 실용적인 CSS 팁을 소개합니다. 주요 내용으로는 overscroll-behavior: contain으로 스크롤 체인을 요소 내에 고정하는 방법(터치 기기의 긴 컨테이너 주의사항 포함), 브랜드 커서를 위한 caret-color, 그리고 점진적 개선 속성인 caret-shape(촬영 당시 Chrome 전용, 값: bar, block, underscore)가 있습니다. accent-color는 상속 가능한 선언 하나로 체크박스, 라디오, range 입력을 리스타일하며 자동으로 고대비 체크마크 색상을 전환합니다. color-scheme 속성과 light-dark() 함수로 손쉬운 다크 모드 기준 스타일을 구성하는 방법과, grid 컨테이너에 place-content: center를 사용하는 가장 간결한 센터링 방법도 설명합니다.
이 실용 가이드는 2026년 기준 모든 최신 브라우저에서 지원되는 네이티브 CSS Nesting을 다루며, Sass와 어디서 차이가 나는지 설명합니다. 부모 선택자에 여러 선택자가 있을 경우 브라우저가 :is()로 감싸고, 목록에서 가장 높은 명시도를 상속합니다. .card, #featured {} 같은 선택자는 중첩된 자식에 ID 레벨 명시도(1,1,0)를 부여해 디버깅 함정이 될 수 있습니다. Sass와의 핵심 차이는 &가 문자열이 아닌 객체 참조라는 점으로, &--modifier 같은 BEM 스타일 연결이 네이티브에서는 불가능합니다. pseudo-class, media/container/feature 쿼리, prefers-reduced-motion 재정의에는 nesting을 사용하고, BEM 요소 선택자는 루트 레벨에 유지할 것을 권장합니다.
Chromium 148에 @supports at-rule(@keyword)이 탑재되었습니다. CSS Conditional Rules Module Level 5에 표준화된 이 기능은 @starting-style, @view-transition 같은 CSS at-rule을 스타일시트 내 또는 @import조건에서 직접 감지할 수 있게 합니다. 이 함수는 브라우저가 해당 at-rule을 허용하는지 확인하며, @supports at-rule(@supports)로 자기 감지도 가능합니다. 단, 디스크립터 레벨 쿼리, prelude 감지, 전체 at-rule 블록은 스펙에서 제외되었습니다. 스타일 쿼리나 anchored 쿼리 감지에는 container-type 값 확인이나 sentinel 커스텀 프로퍼티 방식 우회가 필요합니다. Firefox(이슈 #1751188)와 Safari(이슈 #235400)는 아직 미지원입니다.
이 기법은 JavaScript 없이 상태를 유지하기 위해 CSS animation의 animation-fill-mode: forwards와 animation-play-state를 활용합니다. 요소에 거의 즉각적인 애니메이션(duration: .00001s)을 paused 상태로 부여합니다. :focus 또는 :hover가 발생하면 play state가 running으로 전환되고 애니메이션이 즉시 완료되어 fill-mode가 최종 상태를 영구적으로 유지합니다. 같은 클래스를 공유하는 여러 요소가 있어도 각 요소별로 독립적으로 동작합니다. 재사용성을 높이기 위해 @keyframes로 --was-focused 커스텀 프로퍼티를 토글하고, @container style() 쿼리로 해당 값을 읽어 자식 요소에 조건부 스타일을 적용하는 방식으로 리팩터링합니다.
contrast-color()가 Chrome 147 안정 버전(2026년 3월 말)에 탑재되어 모든 최신 브라우저에서 사용 가능해졌습니다. 이 함수는 유효한 CSS 색상 값을 입력받아 WCAG 2 AA 최소 대비 비율 4.5:1을 충족하는 black 또는 white 중 하나를 반환합니다. 동점인 경우 white를 반환합니다. 디자인 시스템에서 텍스트 색상 쌍을 수동으로 관리할 필요가 없어집니다. color: contrast-color(var(--brand-color)) 선언 하나로 동적 버튼, prefers-color-scheme를 활용한 다크 모드 본문 텍스트, color-mix()로 생성된 팔레트까지 처리합니다. 현재 스펙은 의도적으로 black과 white만 지원하며, #222 같은 커스텀 대비 타겟 제안은 접근성 보장을 위해 거부되었습니다.
이번 주 CSS의 표현력이 한 단계 더 도약했습니다. 이번 주 featured 기사인 corner-shape 프로퍼티(Chrome 139+)는 border-radius의 동반 속성 하나만으로 bevel, scoop, notch, squircle 코너 형태를 구현할 수 있음을 보여줍니다. clip-path와 달리 outline, box-shadow, background에도 올바르게 적용됩니다. Brecht De Ruyte의 @layer와 @supports를 활용한 점진적 개선 접근법은 Firefox와 Safari 지원을 기다리는 브라우저에서도 우아한 폴백을 보장합니다.
접근성과 기능 감지도 발전했습니다. contrast-color()가 Chrome 147 안정 버전에 탑재되어 design system에서 수동 관리 없이 WCAG 2 준수 텍스트 색상 쌍을 단 한 줄의 선언으로 해결할 수 있게 되었습니다. Chromium 148에서는 @supports at-rule(@keyword)이 출시되어 스타일시트에서 @starting-style, @view-transition 같은 at-rule 지원을 네이티브로 감지할 수 있습니다. 네이티브 CSS nesting 실용 가이드는 Sass에서 마이그레이션하는 개발자를 함정에 빠뜨리는 :is() 명시도 문제를 명확히 했고, Patrick Brosset의 애니메이션-상태-머신 기법은 animation-fill-mode: forwards와 container style 쿼리를 활용해 JavaScript 없이 지속적인 hover/focus 상태 기억을 구현하는 방법을 보여주었습니다.
Kevin Powell의 빠른 CSS 팁은 overscroll-behavior: contain, 폼 input을 위한 accent-color, 가장 깔끔한 grid 중앙 정렬 단축 속성인 place-content: center 등 실용적인 내용으로 한 주를 마무리했습니다.
