▲

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

 (css-tricks.com)
4P by neo 12시간전 | ★ favorite | 댓글과 토론
  • 기존에는 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 등에도 사용 가능 
    .my-grid-container {  
  display: grid;  
  gap: 2px;  
  column-rule: 2px solid pink;  
}
  • row-rule: 행(가로) 간의 separator를 그릴 수 있음 
    .my-flex-container {  
  display: flex;  
  gap: 10px;  
  row-rule: 10px dotted limegreen;  
  column-rule: 5px dashed coral;  
}
  • 여러 스타일 반복/조합: repeat()나 콤마 구분으로 다양한 스타일을 섞을 수 있음 
    .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