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

• 기존에는 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

• CSS Gap Decorations Module Level 1 표준 초안
• Microsoft Edge explainer
• 인터랙티브 Playground에서 다양한 데코레이션 조합 시각 실험 가능
• 기능·호환성·피드백 관련 이슈는 Chromium issue tracker에서 제안 가능