# CSS에서 구분선을 그리는 새로운 방법: `CSS Gap Decorations`

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

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=19910](https://news.hada.io/topic?id=19910)
- GeekNews Markdown: [https://news.hada.io/topic/19910.md](https://news.hada.io/topic/19910.md)
- Type: GN+
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2025-03-24T09:18:00+09:00
- Updated: 2025-03-24T09:18:00+09:00
- Original source: [blogs.windows.com](https://blogs.windows.com/msedgedev/2025/03/19/minding-the-gaps-a-new-way-to-draw-separators-in-css/)
- Points: 5
- Comments: 1

## Summary

CSS Gap Decorations는 웹페이지에서 구분선을 추가하는 기존 CSS 기법의 한계를 극복하기 위한 새로운 제안으로, `column-rule`과 `row-rule` 속성을 그리드 및 플렉스박스 레이아웃에 적용할 수 있도록 확장하고, 각 컨테이너 부분마다 다른 구분선을 설정할 수 있게 합니다. 이 제안은 구분선의 색상, 굵기, 교차점에서의 동작 등을 세밀하게 조정할 수 있는 기능을 포함하며, 개발자 피드백을 통해 개선될 예정입니다. 자세한 정보와 피드백 제출은 공식 explainer와 GitHub 이슈를 통해 가능합니다.

## Topic Body

- 웹페이지에서 섹션 간 **구분선**을 추가하는 것은 **콘텐츠를 명확하게 정리**하고 **가독성**을 높이는 일반적인 디자인 기법  
- `border` 같은 기존 CSS 기법을 사용해 구분선을 추가할 수 있지만 크기 변경, 추가 코드 필요 등 제한이 존재함  
- **CSS Gap Decorations**는 `column-rule` 및 `row-rule` 등의 속성을 추가하여 이런 문제를 해결   
### 기존 CSS 구분선 기법과 한계  
- `border` 속성은 구분선을 추가하는 일반적인 방법이지만 다음과 같은 문제 발생 가능  
  - `border`를 추가하면 요소 크기가 변경될 수 있음  
  - 첫 번째 및 마지막 요소에 대해 추가 코드를 작성해야 함  
  - Flexbox 레이아웃에서 줄 바꿈이 발생하면 구분선이 전체 영역을 덮지 못함  
- `::before` 및 `::after` 가상 요소를 사용해 구분선을 추가할 수 있지만 다음과 같은 한계가 있음  
  - 첫 번째 및 마지막 요소에 대해 추가 코드 필요  
  - 복잡한 절대 위치 지정 코드 필요  
- 그리드 컨테이너에 배경색을 적용하고 항목에 배경색을 설정해 구분선을 흉내낼 수 있음  
  - 구분선 길이 조정 불가  
  - 빈 셀이 있을 경우 배경색이 보임  
  - 항목이 셀을 채우지 않으면 배경색이 보임  
  - 페이지 배경이 단색이 아닐 경우 동작하지 않음  
- 다중 열 레이아웃에서 `column-rule` 속성을 사용해 구분선을 추가할 수 있지만 다음과 같은 제한 존재  
  - 다중 열 레이아웃에서만 작동  
  - 콘텐츠의 인라인 방향 제어 불가  
  
### CSS Gap Decorations 제안  
- **CSS Gap Decorations**는 위와 같은 문제를 해결하기 위한 새로운 제안임  
- 주요 제안 사항  
  - `column-rule` 속성을 그리드 및 플렉스박스 레이아웃에 적용 가능하도록 확장  
  - 새로운 `row-rule` 속성 도입  
  - 각 컨테이너 부분마다 다른 구분선 설정 가능  
- `row-rule-color` 속성을 사용해 구분선 색상 변경 가능  
  ```css  
  .alternate-red-blue {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    gap: 10px;  
    row-rule: 1px solid;  
    row-rule-color: red blue;  
  }  
  ```  
- 굵기와 색상이 다른 구분선 설정 가능  
  ```css  
  .varying-widths {  
    display: grid;  
    grid-template: repeat(auto-fill, 30px) / repeat(6, 100px);  
    row-gap: 10px;  
    row-rule: 5px solid black / repeat(auto, 1px solid #666) / 3px solid black;  
  }  
  ```  
- 교차점에서 구분선 동작 제어 가능  
  - `*-rule-break` 및 `*-rule-outset` 속성 사용 가능  
  - 교차점에서 구분선 시작 및 종료 위치 제어 가능  
  - 구분선 길이 및 오프셋 세밀한 조정 가능  
  
### 제안에 대한 피드백 요청  
- CSS Gap Decorations 제안은 개발자 피드백을 기반으로 개선될 예정임  
- 자세한 정보는 [공식 explainer](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSGapDecorations/explainer.md)에서 확인 가능  
- 피드백은 GitHub 이슈로 제출 가능  
- 특히 교차점에서 구분선 동작에 대한 피드백 환영

## Comments



### Comment 36253

- Author: neo
- Created: 2025-03-24T09:18:01+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=43420683) 
- 새로운 가상 요소를 만들고 싶음: .container:gap { background-color: red; } 
  - 점선이나 그라데이션 같은 더 멋진 배경을 만들 수 있음
  - { padding: 2px }를 사용하여 구분자의 끝에 공백을 설정할 수 있음
  - :gap-horz와 :gap-vert를 사용하여 수직 및 수평 간격을 별도로 설정할 수 있음
  - .container:gap:nth-gap(2n) { color: blue; }를 사용하여 교차 색상을 얻을 수 있음

- 위원회에 의한 디자인은 최선이 아니지만, 비원어민으로서 제안된 속성 이름이 의미를 잘 전달하지 못함
  - 예를 들어, 간격을 정의하지만 구분자를 그리는 것임

- 조정 가능한 패널의 사용 사례를 고려했으면 좋겠음
  - 구현이 전적으로 사용자 영역에 있더라도 스타일 가능한 구분자가 이벤트를 받을 수 있으면 유용할 것임

- 테두리를 추가하면 항목의 크기가 변경되는데, 이는 바람직하지 않을 수 있음
  - 이 문제는 10년 이상 해결되어 왔음
  - 모든 사람의 CSS 파일의 첫 번째 줄은 * { box-sizing: border-box; }가 아닐까 생각함
  - 테두리가 너비의 내부에 위치하게 하여 더 합리적으로 생각할 수 있음

- 흥미로움. 요즘 QML에서 주로 UI 작업을 하고 있으며, 거의 모든 문제를 다루고 있음
  - 몇 달 전, 캘린더 보기에서 항목 사이의 간격을 사용하여 배경이 보이도록 하여 그리드 라인을 구현했음
  - 레이아웃의 "spacing" 속성과 GPU가 작업을 수행하도록 함

- 괜찮은 아이디어지만 10년 전쯤 더 유용했을 것 같음
  - 현대 CSS로는 단일 선택자와 속성으로 구분자를 처리할 수 있음
  - .things .thing:not(:last-child) { border-bottom: 1px solid gray; } 같은 방식으로 가능함
  - 기사에서 이 점을 언급하지만, 가장자리 사례의 빈도를 과대평가하는 것 같음

- 오랫동안 고통스러운 문제였음. 누군가가 무언가를 하는 것을 보는 것이 멋짐
  - 이것은 단지 `display: grid`일 뿐이며, 고정되지 않은 너비 요소에는 해당되지 않음
  - 작은 화면에서는 링크 사이의 |가 첫 번째 줄 끝이나 두 번째 줄 시작에 나타날 수 있음

- 독일 디자이너의 속담이 생각남: "디자이너가 더 이상 아이디어가 없으면 몇 개의 선을 추가함"
  - 콘텐츠를 명확하게 구분할 방법이 없을 때 선을 추가하기 시작함

- 종종 이 문제가 발생하며, <hr/>보다 나은 방법을 원함
  - 테이블 행이나 다중 열에서는 작동하지 않음

- 이게 통과되기를 바람... AI를 사용하여 flexbox에 대한 부족한 지식을 고치는 것은 축복이었지만, 이것이 실제 해결책처럼 느껴짐