CSS Gap Decoration: column-rule과 row-rule로… — 2026년 21주 CSS 및 스타일링
CSS architecture, utility frameworks, and animation performance Compiled for immediate developer deployment.
calendar_todaysummarizeWeek 21-2026
article
CSS Gap Decoration: column-rule과 row-rule로 Grid·Flex 간격 꾸미기
TAG: 레이아웃
CSS가 grid 및 flex 컨테이너에서 column-rule 확장과 새로운 row-rule 속성을 통해 gap 장식 기능을 드디어 지원합니다. 기존에 멀티컬럼 레이아웃에만 한정되었던 column-rule이 이제 grid·flex 열 gap에 직접 선을 그릴 수 있게 되었으며, 별도의 마크업이나 pseudo-element 트릭 없이도 사용할 수 있습니다. row-rule은 수평 gap을 담당하고, rule 단축 속성으로 양 축을 동시에 설정할 수 있습니다. rule-break(교차점 동작 제어), rule-inset / rule-inset-cap / rule-inset-junction(세그먼트 길이 조정), rule-visibility-items(실제 아이템 사이에만 규칙 표시), rule-overlap(column-over-row 레이어 순서 제어) 등 세밀한 제어도 가능합니다. repeat() 함수를 통해 gap 전반에 걸쳐 스타일과 색상을 교차 적용할 수 있으며, 규칙의 width·color·inset은 모두 애니메이션이 가능하여 JavaScript 없이 scroll-driven 및 hover 전환을 구현할 수 있습니다. 현재 Chromium에 적용 중이며 Safari TP에서도 사용 가능합니다.
두 가지 수정으로 RTL 지원: dir="auto"와 CSS Logical Properties
TAG: 국제화
전 세계 6억 명 이상이 아랍어, 히브리어, 페르시아어 등 오른쪽에서 왼쪽으로 쓰는 언어를 사용하지만, 대부분의 앱은 이를 제대로 지원하지 않습니다. Evil Martians는 bolt.new 작업 경험을 바탕으로 두 가지 핵심 수정 사항을 제시합니다. 첫째, 자유 입력 필드(채팅, 프롬프트, 댓글 입력란)에 dir="auto"를 추가하면, 브라우저가 첫 번째 강한 방향성 문자를 기반으로 텍스트 방향을 실시간으로 자동 감지합니다. navigator.language를 사용하는 방법은 입력 내용이 아닌 브라우저 로케일을 감지하기 때문에 올바른 해결책이 아닙니다. 둘째, 전체 UI 현지화 시에는 html 요소에 dir="rtl"을 설정하고, 스타일시트 전반에 걸쳐 CSS Logical Properties(margin-inline-start, padding-inline-start, text-align: start 등)를 사용해야 합니다. 물리적 방향 속성인 margin-left, padding-right를 사용하면 RTL 레이아웃에서 수동으로 재정의해야 하는 상황이 발생합니다. Stylelint의 property-layout-mappings 규칙을 적용하면 물리적 속성이 코드베이스에 다시 유입되는 것을 방지할 수 있습니다.
CSS Values and Units Level 5는 sibling-index()와 sibling-count()를 도입합니다. 이 두 정수 반환 함수는 JavaScript나 하드코딩된 :nth-child() 규칙 없이 스타일시트에서 형제 요소 중 해당 요소의 위치에 직접 접근할 수 있게 해 줍니다. sibling-index()는 1부터 시작하는 위치값을, sibling-count()는 전체 형제 요소 수를 반환합니다. 두 함수 모두 calc(), min(), max(), sin(), cos() 등의 수학 함수에서 사용할 수 있는 정수로 해석되어, 단 한 줄의 선언으로 staggered 애니메이션 딜레이, 자동 균등 너비 탭, 균일한 색조 분포, 순수 CSS 방사형 메뉴, z-index 스태킹을 구현할 수 있습니다. display:none 요소는 여전히 DOM 슬롯을 차지하며 카운트에 영향을 미치고, 부모에서 평가된 커스텀 속성은 각 자식의 인덱스가 아닌 부모의 인덱스를 캡처하며, shadow DOM 스코핑은 외부 CSS가 컴포넌트 내부를 탐색할 때 0을 반환한다는 주요 주의사항도 함께 다룹니다. Chrome/Edge 138 및 Safari 26.2에서 안정 버전으로 출시되었으며, Firefox 구현이 진행 중입니다.
브라우저의 Halftone: Canvas 기반 Screen Frequency와 Dot Effect
TAG: 크리에이티브 CSS
Carmen Ansio는 Canvas 2D API를 사용하여 스크린 주파수, 닷 형태, 무아레 패턴 같은 인쇄 전 단계(prepress) 개념을 기반으로 브라우저에서 실제 하프톤 파이프라인을 재현합니다. 각 픽셀의 밝기(luminance)를 샘플링하여 닷 반지름으로 직접 매핑하며(밝은 픽셀은 더 큰 흰색 닷 생성), 핵심 공식은 그리드, 주파수, 드로잉 프리미티브를 완전히 분리된 상태로 유지합니다. 원, 육각형, 마름모, 삼각형 등의 스크린 형태는 그리드 지오메트리를 변경하지 않고 드로잉 콜만 교체하여 바꿀 수 있습니다. 호버 효과는 캔버스 커서를 확대경으로 전환합니다. 하드한 경계를 피하기 위해 선형 감쇠 대신 Gaussian falloff(Math.exp(-dist squared / haloR squared))를 사용하여 근접도에 따라 닷 크기가 커지고, 커서로부터의 각도가 색조에 매핑되어 전체 색상환 블룸 효과를 만들어 냅니다. 파동 데모는 동일한 거리 공식을 사인 함수의 위상 오프셋으로 활용하여 원점에서 멀리 있는 큐브일수록 나중에 피크에 도달하게 해 진정한 전파 리플 효과를 만들며, painter's algorithm으로 정렬합니다.
CSS Layout에 빠진 것: 2025 State of CSS 설문의 Pain Point
TAG: CSS 레이아웃
Patrick Brosset는 2025 State of CSS 설문조사의 레이아웃 관련 문제점과 자신이 Mastodon, Bluesky, LinkedIn에서 진행한 미니 설문조사를 종합하여, 개발자들이 CSS 레이아웃에서 실제로 필요로 하는 것들을 파악합니다. Grid는 장황한 문법, justify-*와 align-* 명명 혼란, 트랙 크기 애니메이션 불가, 마지막 행 고아 요소 감지 불가 등으로 가장 많은 비판을 받습니다. Flexbox 불만은 예측하기 어려운 flex-grow / flex-shrink / flex-basis 상호작용과 줄바꿈된 각 행에 대한 개별 제어 부재에 집중됩니다. 커뮤니티에서 가장 많이 요청된 기능(약 12명 응답)은 순수 CSS에서의 overflow 및 wrap 감지로, JavaScript 없이 반응형 축소와 '+3' 배지를 구현할 수 있게 해 줍니다. 그 외에도 박스 간 텍스트 흐름을 위한 CSS Regions(InDesign 링크 프레임과 같은 기능), 비직사각형 텍스트 래핑을 위한 CSS Exclusions, 반응형 재배치를 위한 DOM 독립적 요소 이동, 콘텐츠 인식 grid 스패닝 등이 자주 요청됩니다.
oklch() 함수 표기법은 Oklab 지각적 색공간에서 색상을 표현하며, 화면의 빛 혼합 방식이 아닌 인간의 시각적 지각을 반영하는 방식으로 밝기(L), 채도(C), 색조(H)를 모델링합니다. RGB에 비해 oklch()에서 밝기를 조정할 때는 R, G, B를 동시에 조정하는 대신 L 값만 변경하면 되어 색상 조작이 훨씬 예측 가능하고 그라데이션의 접근성도 향상됩니다. 이 표기법은 2023년부터 주요 브라우저에서 폭넓게 지원되며, 지원 화면에서 더 넓은 Display-P3 색역에 접근할 수 있고, sRGB 디스플레이에서는 색상이 거의 동일하게 보여 하위 호환성을 유지합니다. 한 가지 트레이드오프는 그라데이션 전환으로, 색조가 선형이 아닌 극좌표 차원이기 때문에 sRGB나 oklab 기반 그라데이션에 비해 예상치 못한 색조 변화가 나타날 수 있습니다. 필자는 컴포넌트 프로토타이핑, 접근성 높은 색상 테마 구축, 다양한 팔레트 생성에 oklch()를 권장합니다.
Kevin Powell은 라이브 데모와 함께 잘 알려지지 않은 CSS 속성 다섯 가지를 소개합니다. CSS counters(counter-reset, counter-increment, 그리고 content에서 counter() 사용)는 DOM을 수정하지 않고 비목록 요소에 자동 번호를 매길 수 있으며, counter() 호출 뒤에 빈 alt-text 슬래시를 추가하면 스크린 리더 알림을 억제할 수 있습니다. user-select: none은 버튼이나 드래그 대상에서 실수로 텍스트가 선택되는 것을 방지합니다. font-variant-numeric: tabular-nums는 비례 폰트의 숫자를 균일한 너비로 렌더링하여 데이터 테이블 정렬에 유용하며, 비숫자 문자에는 영향을 주지 않습니다. 멀티컬럼 레이아웃 단축 속성(column-count + column-width, 예: 3 15ch)은 컨테이너 크기에 따라 반응형 컬럼 수를 자동으로 조정하며, break-inside: avoid로 카드가 컬럼 경계를 가로질러 분리되는 것을 방지할 수 있습니다. 마지막으로 text-decoration-thickness, text-underline-offset, text-decoration-style, text-decoration-color를 통해 링크 밑줄을 세밀하게 제어하고, color 전환에 애니메이션을 적용할 수 있습니다.
CSS Gap Decoration: column-rule과 row-rule로 Grid·Flex 간격 꾸미기
CSS가 grid 및 flex 컨테이너에서 column-rule 확장과 새로운 row-rule 속성을 통해 gap 장식 기능을 드디어 지원합니다. 기존에 멀티컬럼 레이아웃에만 한정되었던 column-rule이 이제 grid·flex 열 gap에 직접 선을 그릴 수 있게 되었으며, 별도의 마크업이나 pseudo-element 트릭 없이도 사용할 수 있습니다. row-rule은 수평 gap을 담당하고, rule 단축 속성으로 양 축을 동시에 설정할 수 있습니다. rule-break(교차점 동작 제어), rule-inset / rule-inset-cap / rule-inset-junction(세그먼트 길이 조정), rule-visibility-items(실제 아이템 사이에만 규칙 표시), rule-overlap(column-over-row 레이어 순서 제어) 등 세밀한 제어도 가능합니다. repeat() 함수를 통해 gap 전반에 걸쳐 스타일과 색상을 교차 적용할 수 있으며, 규칙의 width·color·inset은 모두 애니메이션이 가능하여 JavaScript 없이 scroll-driven 및 hover 전환을 구현할 수 있습니다. 현재 Chromium에 적용 중이며 Safari TP에서도 사용 가능합니다.
Kevin Powell은 라이브 데모와 함께 잘 알려지지 않은 CSS 속성 다섯 가지를 소개합니다. CSS counters(counter-reset, counter-increment, 그리고 content에서 counter() 사용)는 DOM을 수정하지 않고 비목록 요소에 자동 번호를 매길 수 있으며, counter() 호출 뒤에 빈 alt-text 슬래시를 추가하면 스크린 리더 알림을 억제할 수 있습니다. user-select: none은 버튼이나 드래그 대상에서 실수로 텍스트가 선택되는 것을 방지합니다. font-variant-numeric: tabular-nums는 비례 폰트의 숫자를 균일한 너비로 렌더링하여 데이터 테이블 정렬에 유용하며, 비숫자 문자에는 영향을 주지 않습니다. 멀티컬럼 레이아웃 단축 속성(column-count + column-width, 예: 3 15ch)은 컨테이너 크기에 따라 반응형 컬럼 수를 자동으로 조정하며, break-inside: avoid로 카드가 컬럼 경계를 가로질러 분리되는 것을 방지할 수 있습니다. 마지막으로 text-decoration-thickness, text-underline-offset, text-decoration-style, text-decoration-color를 통해 링크 밑줄을 세밀하게 제어하고, color 전환에 애니메이션을 적용할 수 있습니다.
두 가지 수정으로 RTL 지원: dir="auto"와 CSS Logical Properties
전 세계 6억 명 이상이 아랍어, 히브리어, 페르시아어 등 오른쪽에서 왼쪽으로 쓰는 언어를 사용하지만, 대부분의 앱은 이를 제대로 지원하지 않습니다. Evil Martians는 bolt.new 작업 경험을 바탕으로 두 가지 핵심 수정 사항을 제시합니다. 첫째, 자유 입력 필드(채팅, 프롬프트, 댓글 입력란)에 dir="auto"를 추가하면, 브라우저가 첫 번째 강한 방향성 문자를 기반으로 텍스트 방향을 실시간으로 자동 감지합니다. navigator.language를 사용하는 방법은 입력 내용이 아닌 브라우저 로케일을 감지하기 때문에 올바른 해결책이 아닙니다. 둘째, 전체 UI 현지화 시에는 html 요소에 dir="rtl"을 설정하고, 스타일시트 전반에 걸쳐 CSS Logical Properties(margin-inline-start, padding-inline-start, text-align: start 등)를 사용해야 합니다. 물리적 방향 속성인 margin-left, padding-right를 사용하면 RTL 레이아웃에서 수동으로 재정의해야 하는 상황이 발생합니다. Stylelint의 property-layout-mappings 규칙을 적용하면 물리적 속성이 코드베이스에 다시 유입되는 것을 방지할 수 있습니다.
CSS Values and Units Level 5는 sibling-index()와 sibling-count()를 도입합니다. 이 두 정수 반환 함수는 JavaScript나 하드코딩된 :nth-child() 규칙 없이 스타일시트에서 형제 요소 중 해당 요소의 위치에 직접 접근할 수 있게 해 줍니다. sibling-index()는 1부터 시작하는 위치값을, sibling-count()는 전체 형제 요소 수를 반환합니다. 두 함수 모두 calc(), min(), max(), sin(), cos() 등의 수학 함수에서 사용할 수 있는 정수로 해석되어, 단 한 줄의 선언으로 staggered 애니메이션 딜레이, 자동 균등 너비 탭, 균일한 색조 분포, 순수 CSS 방사형 메뉴, z-index 스태킹을 구현할 수 있습니다. display:none 요소는 여전히 DOM 슬롯을 차지하며 카운트에 영향을 미치고, 부모에서 평가된 커스텀 속성은 각 자식의 인덱스가 아닌 부모의 인덱스를 캡처하며, shadow DOM 스코핑은 외부 CSS가 컴포넌트 내부를 탐색할 때 0을 반환한다는 주요 주의사항도 함께 다룹니다. Chrome/Edge 138 및 Safari 26.2에서 안정 버전으로 출시되었으며, Firefox 구현이 진행 중입니다.
브라우저의 Halftone: Canvas 기반 Screen Frequency와 Dot Effect
Carmen Ansio는 Canvas 2D API를 사용하여 스크린 주파수, 닷 형태, 무아레 패턴 같은 인쇄 전 단계(prepress) 개념을 기반으로 브라우저에서 실제 하프톤 파이프라인을 재현합니다. 각 픽셀의 밝기(luminance)를 샘플링하여 닷 반지름으로 직접 매핑하며(밝은 픽셀은 더 큰 흰색 닷 생성), 핵심 공식은 그리드, 주파수, 드로잉 프리미티브를 완전히 분리된 상태로 유지합니다. 원, 육각형, 마름모, 삼각형 등의 스크린 형태는 그리드 지오메트리를 변경하지 않고 드로잉 콜만 교체하여 바꿀 수 있습니다. 호버 효과는 캔버스 커서를 확대경으로 전환합니다. 하드한 경계를 피하기 위해 선형 감쇠 대신 Gaussian falloff(Math.exp(-dist squared / haloR squared))를 사용하여 근접도에 따라 닷 크기가 커지고, 커서로부터의 각도가 색조에 매핑되어 전체 색상환 블룸 효과를 만들어 냅니다. 파동 데모는 동일한 거리 공식을 사인 함수의 위상 오프셋으로 활용하여 원점에서 멀리 있는 큐브일수록 나중에 피크에 도달하게 해 진정한 전파 리플 효과를 만들며, painter's algorithm으로 정렬합니다.
CSS Layout에 빠진 것: 2025 State of CSS 설문의 Pain Point
Patrick Brosset는 2025 State of CSS 설문조사의 레이아웃 관련 문제점과 자신이 Mastodon, Bluesky, LinkedIn에서 진행한 미니 설문조사를 종합하여, 개발자들이 CSS 레이아웃에서 실제로 필요로 하는 것들을 파악합니다. Grid는 장황한 문법, justify-*와 align-* 명명 혼란, 트랙 크기 애니메이션 불가, 마지막 행 고아 요소 감지 불가 등으로 가장 많은 비판을 받습니다. Flexbox 불만은 예측하기 어려운 flex-grow / flex-shrink / flex-basis 상호작용과 줄바꿈된 각 행에 대한 개별 제어 부재에 집중됩니다. 커뮤니티에서 가장 많이 요청된 기능(약 12명 응답)은 순수 CSS에서의 overflow 및 wrap 감지로, JavaScript 없이 반응형 축소와 '+3' 배지를 구현할 수 있게 해 줍니다. 그 외에도 박스 간 텍스트 흐름을 위한 CSS Regions(InDesign 링크 프레임과 같은 기능), 비직사각형 텍스트 래핑을 위한 CSS Exclusions, 반응형 재배치를 위한 DOM 독립적 요소 이동, 콘텐츠 인식 grid 스패닝 등이 자주 요청됩니다.
oklch() 함수 표기법은 Oklab 지각적 색공간에서 색상을 표현하며, 화면의 빛 혼합 방식이 아닌 인간의 시각적 지각을 반영하는 방식으로 밝기(L), 채도(C), 색조(H)를 모델링합니다. RGB에 비해 oklch()에서 밝기를 조정할 때는 R, G, B를 동시에 조정하는 대신 L 값만 변경하면 되어 색상 조작이 훨씬 예측 가능하고 그라데이션의 접근성도 향상됩니다. 이 표기법은 2023년부터 주요 브라우저에서 폭넓게 지원되며, 지원 화면에서 더 넓은 Display-P3 색역에 접근할 수 있고, sRGB 디스플레이에서는 색상이 거의 동일하게 보여 하위 호환성을 유지합니다. 한 가지 트레이드오프는 그라데이션 전환으로, 색조가 선형이 아닌 극좌표 차원이기 때문에 sRGB나 oklab 기반 그라데이션에 비해 예상치 못한 색조 변화가 나타날 수 있습니다. 필자는 컴포넌트 프로토타이핑, 접근성 높은 색상 테마 구축, 다양한 팔레트 생성에 oklch()를 권장합니다.
이번 주 CSS는 중요한 새 레이아웃 기능을 얻었습니다. 네이티브 gap 데코레이션 제안은 column-rule 확장과 새로운 row-rule 속성을 통해 추가 마크업 없이 grid 및 flex gap 안에 스타일이 적용된 선을 그릴 수 있게 해 주며, rule-break, rule-inset, rule-visibility-items, rule-overlap으로 세밀한 제어가 가능합니다. width와 color는 모두 애니메이션이 지원됩니다. 또한 CSS Values and Units Level 5의 sibling-index()와 sibling-count() 함수가 Chrome/Edge 138과 Safari 26.2 안정 버전에 출시되어, 단 하나의 CSS 선언으로 staggered 애니메이션, 방사형 메뉴, z-index 스태킹을 구현할 수 있습니다. Firefox 지원도 진행 중입니다.
국제화 측면에서 Evil Martians가 간결한 가이드를 제공하였습니다. 자유 입력 필드에 dir="auto"를 추가하면 대부분의 경우 실시간 RTL 감지가 처리되며, 물리적 속성(margin-left, padding-right)을 CSS Logical Properties(margin-inline-start, padding-inline-start)로 마이그레이션하면 완전히 현지화된 레이아웃이 가능합니다. Stylelint의 property-layout-mappings 규칙으로 린트 시점에 마이그레이션을 강제할 수 있습니다. 색상 면에서는 2023년부터 주요 브라우저에서 지원되는 oklch()가 예측 가능한 밝기 조정과 Display-P3 색역 접근을 제공하는 지각적 색공간으로 주목받았습니다.
개발자 경험도 다루어졌습니다. Kevin Powell은 CSS counters, user-select: none, font-variant-numeric: tabular-nums, 멀티컬럼 단축 속성, 세밀한 text-decoration 제어 등 잘 알려지지 않은 다섯 가지 속성을 소개하였습니다. Patrick Brosset은 2025 State of CSS 설문을 종합하여 overflow/wrap 감지가 가장 많이 요청된 누락 기능임을 밝혔고, CSS Regions와 CSS Exclusions가 그 뒤를 이었습니다.
Key Takeaways
네이티브 CSS gap 데코레이션(column-rule + row-rule, rule-break 및 rule-inset 제어 포함)이 Chromium과 Safari TP에 적용되고 있습니다. grid/flex 구분선을 위한 pseudo-element 트릭이 사라집니다.
sibling-index()와 sibling-count()가 Chrome/Edge 138과 Safari 26.2에서 안정 버전으로 출시되어, JavaScript나 :nth-child() 없이 순수 CSS로 staggered 애니메이션과 동적 레이아웃을 구현할 수 있습니다.
RTL 지원을 위해 input에 dir="auto" 추가와 CSS Logical Properties 사이트 전체 적용이 최소한의 올바른 접근법입니다. Stylelint의 property-layout-mappings 규칙을 통해 마이그레이션을 자동으로 강제할 수 있습니다.
