# The Gap Strikes Back: 이제 스타일링 가능해진 CSS Gap

> Clean Markdown view of GeekNews topic #21806. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=21806](https://news.hada.io/topic?id=21806)
- GeekNews Markdown: [https://news.hada.io/topic/21806.md](https://news.hada.io/topic/21806.md)
- Type: news
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-07-04T09:50:02+09:00
- Updated: 2025-07-04T09:50:02+09:00
- Original source: [css-tricks.com](https://css-tricks.com/the-gap-strikes-back-now-stylable/)
- Points: 8
- Comments: 0

## Summary

새로운 **CSS gap decorations** 기능은 `row-rule`, `column-rule` 등의 속성으로 **레이아웃 아이템 사이에 직접 선(Separator)** 을 그릴 수 있게 하여, 불필요한 추가 마크업 없이 **Grid, Flexbox, Multi-column** 등 주요 레이아웃에서 시각적 구조를 강화합니다. 반복, 조합, 정밀 제어 등 다양한 **스타일 옵션**을 지원하며, 현재 **Chrome/Edge 139+**에서 플래그 활성화로 사용 가능합니다.

## Topic Body

- 기존에는 **CSS `gap` 속성**으로 간격을 만들 수 있었지만, **gap 구간 자체를 스타일링**하는 것은 불가능해서 다양한 우회 방법(추가 요소, border, pseudo-element 등)이 필요했음  
- 새로운 **CSS gap decorations** 기능은 **`row-rule`, `column-rule` 등**의 속성으로 **레이아웃 아이템 사이에 직접 선(Separator)** 을 그릴 수 있게 해줌  
- **Grid, Flexbox, Multi-column, 곧 Masonry까지** 모든 주요 레이아웃에서 데코레이션 적용 가능, 별도 마크업이나 불필요한 엘리먼트 없이 **순수 CSS만으로 구조적/시각적 개선 가능**  
- **다양한 스타일(두께, 색상, 패턴 등) 반복/조합 지원**하며, `repeat()`, `outset`, `paint-order` 등으로 정밀 제어 가능  
- 현재는 **Chromium 계열(Chrome/Edge 139+)에서 플래그 활성화**로만 사용 가능, 표준화·확장 중  
  
---  
  
### 기존 gap 한계와 변화  
  
- 예전에는 gap 영역을 스타일링하기 어렵고, separator용 보더나 가짜 엘리먼트를 추가해야 했음  
- 이런 방식은 레이아웃 크기/접근성/마크업 복잡도 등 여러 단점 발생  
- 이제 **gap decorations** 표준이 등장해, **간단한 CSS 속성만으로 간격 영역에 데코레이션(선 등) 적용 가능**  
  
### CSS gap decorations 소개  
  
- **column-rule**: 기존 multi-column에서 세로 구분선 그릴 때 사용(예: `column-rule: 1px solid black;`)  
- 이제 이 속성을 **flexbox, grid** 등에도 사용 가능  
  ```css  
  .my-grid-container {  
    display: grid;  
    gap: 2px;  
    column-rule: 2px solid pink;  
  }  
  ```  
- **row-rule**: 행(가로) 간의 separator를 그릴 수 있음  
  ```css  
  .my-flex-container {  
    display: flex;  
    gap: 10px;  
    row-rule: 10px dotted limegreen;  
    column-rule: 5px dashed coral;  
  }  
  ```  
- **여러 스타일 반복/조합**: `repeat()`나 콤마 구분으로 다양한 스타일을 섞을 수 있음  
  ```css  
  .my-container {  
    display: grid;  
    gap: 2px;  
    row-rule:  
      repeat(2, 1px dashed red),  
      2px solid black,  
      repeat(auto, 1px dotted green);  
  }  
  ```  
- **정밀 제어 속성**: `row-rule-break`, `column-rule-break`, `row-rule-outset`, `column-rule-outset`, `gap-rule-paint-order` 등으로 위치, 교차점, 겹침 순서 등 세밀하게 조절  
  
### 예시: gap decorations 실전 적용  
  
* 예제 페이지는 body를 grid로 지정하고, header/nav/main/footer를 gap으로 구분  
* `row-rule`로 두께, 색상, 스타일이 다른 구분선 적용 가능  
* nav 메뉴는 flexbox와 `column-rule`로 항목 사이에 선 그리기  
* main 영역은 flexbox로 이미지·텍스트를 masonry 형태로 배치, `row-rule`, `column-rule`로 격자 스타일 구조 강조  
* `column-rule-outset: 0;` 등으로 선의 시작/끝 위치 정밀 조정 가능  
  
### 브라우저 지원 및 활성화  
  
* 현재는 **Chrome/Edge 139+** 등 Chromium 기반 브라우저에서 **플래그(about://flags → Experimental Web Platform Features)** 활성화 필요  
* **정식 표준화 진행 중**이며, 다양한 피드백과 실험 권장  
  
### 더 알아보기 및 Playground  
  
* [CSS Gap Decorations Module Level 1 표준 초안](https://www.w3.org/TR/css-gaps-1/)  
* [Microsoft Edge explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md)  
* [인터랙티브 Playground](https://microsoftedge.github.io/Demos/css-gap-decorations/playground.html)에서 다양한 데코레이션 조합 시각 실험 가능  
* 기능·호환성·피드백 관련 이슈는 [Chromium issue tracker](https://issues.chromium.org/issues/new?template_issue=422768750&component=1456721)에서 제안 가능

## Comments



_No public comments on this page._