게시일: 2026년 5월 15일
CSS 간격 장식은 버전 149부터 Chrome 및 Edge에서 사용할 수 있습니다. 테두리나 의사 요소를 사용하지 않고 그리드, Flexbox, 다중 열 레이아웃 간의 간격에 스타일을 지정합니다. 이 기능은 Microsoft Edge팀과 Google Chrome팀의 협업을 통해 빌드되었습니다.
문제
레이아웃 항목 간의 스타일링 간격에는 항상 해결 방법이 필요했습니다. 개별 항목, 의사 요소, 배경 해킹의 테두리 이러한 접근 방식에는 다음과 같은 비용이 발생합니다.
- 구조에 따라 달라집니다. 시각적 구분자를 추가하려면 마크업을 변경하거나 특정 항목의 선택자를 작성해야 합니다.
- 접근성을 방해합니다. 추가 DOM 요소가 표시되면 안 되는 경우 접근성 트리에 표시됩니다.
- 유지 관리가 어렵습니다. 반응형 레이아웃은 간격 스타일이 빌드된 가정을 깨뜨립니다.
- 성능에 부정적인 영향을 미칩니다. DOM 노드가 많을수록 레이아웃 작업이 많아집니다.
- 제작 인체 공학이 좋지 않습니다. 이러한 문제를 해결하려면 복잡한 기하학적 계산이 필요한 경우가 많았습니다.
column-rule 속성은 다단 레이아웃의 간격 장식을 처리하지만 이전에는 그리드와 플렉스박스에 상응하는 기능이 없었습니다.
솔루션
이제 그리드 및 Flexbox 컨테이너에서 column-rule를 허용합니다. 새 row-rule 속성이 가로 간격을 처리합니다. 이러한 장식은 순전히 시각적이며 기존 레이아웃에는 영향을 미치지 않습니다. 다단 레이아웃에서 column-rule 속성을 사용하는 경우 기존 동작은 동일하게 유지됩니다.
예를 들어 다음은 열 및 행 규칙의 스타일 목록을 사용하는 패널이 3개 있는 플렉스 컨테이너입니다.
.flex-split {
column-rule-width: 2px;
column-rule-style: dashed, solid;
column-rule-color: #d4d0c8;
}
이 예시에서 볼 수 있듯이 row-rule와 column-rule 모두 너비, 스타일, 색상에 동일한 약어를 허용합니다. rule 약어를 사용하여 한 번에 모두 설정합니다.
새 속성
하지만 column-rule를 다른 레이아웃 모드로 가져오고 row 대응 항목을 추가하는 것만으로는 충분하지 않습니다. 또한 교차점에서 장식이 끊어지는 방식, 간격 가장자리에서 얼마나 삽입되는지, 항목을 기준으로 언제 표시되는지, 간격에서 스타일을 다양하게 지정하는 방법 등 장식을 미세 조정할 수 있는 컨트롤도 도입했습니다. 규칙 너비, 색상, 인셋도 모두 애니메이션으로 처리할 수 있습니다.
repeat() 구문
갭 장식은 너비, 스타일, 색상 값에 repeat()를 지원합니다. 이렇게 하면 그리드에서 트랙 정의에 사용되는 repeat() 문법과 마찬가지로 짧은 형식의 간격에 걸쳐 장식을 다양하게 지정할 수 있습니다.
.settings-panel {
row-rule: 1px solid #243352;
row-rule-width: repeat(2, 1px), 4px;
}
이렇게 하면 처음 두 행 간격에 1px 규칙이 적용되고 세 번째 행 간격에 4px 규칙이 적용됩니다. 값이 간격보다 많은 경우 순환됩니다. repeat() 없이 여러 값을 직접 전달할 수도 있습니다. 예를 들어 캘린더에서 1시간 및 30분 경계의 행 규칙 스타일을 번갈아 사용합니다.
.calendar {
row-rule-width: 2px, 1px;
row-rule-style: solid, dashed;
row-rule-color: #e8e4df, #f0ece7;
}
장식 중단 제어
column-rule-break 및 row-rule-break 속성은 간격 교차점에서 장식의 동작을 제어합니다.
normal(기본값): 동작은 컨테이너 유형에 따라 달라집니다. 자세한 내용은 사양을 참고하세요.none: 장식은 교차로를 통과하여 연속적으로 실행됩니다.intersection: 장식은 행과 열 간격이 교차하는 곳에서 끊어집니다.
예를 들어 그리드 컨테이너에서 rule-break을 intersection로 설정하면 규칙이 간격 교차점에서 중단되고 계속되지 않습니다.
.dashboard {
column-rule-style: solid;
column-rule-color: #fbbf24, #34d399;
column-rule-width: 1px, 3px;
column-rule-break: intersection;
row-rule: 1px solid #1e1e36;
}
rule-break을 none로 설정하면 교차로를 통과할 때 규칙이 계속 실행됩니다.
.grid {
column-rule: 1px solid #5a9e9e;
row-rule: 1px solid #c27a6b;
rule-break: none;
}
대화형 플레이그라운드에서 이 값을 사용해 볼 수 있습니다.
장식 확장 또는 축소
column-rule-inset 및 row-rule-inset 속성은 간격 내에서 장식이 확장되는 거리를 제어합니다. 단축키를 사용하여 모든 면에 인셋을 한 번에 설정하거나, column-rule-inset-cap (교차 간격이 없는 엔드포인트의 경우) 및 column-rule-inset-junction (다른 간격과 교차하는 엔드포인트의 경우)를 사용하여 비대칭적으로 인셋을 타겟팅할 수 있습니다.
값은 길이, 백분율 또는 간격 장식을 모서리로 결합하는 overlap-join 키워드일 수 있습니다. 예를 들어 rule-inset을 5px로 설정하면 모든 장식이 안쪽으로 5px 축소됩니다.
.container {
display: flex;
flex-wrap: wrap;
column-rule: 1px solid #2a2a45;
column-rule-color: #60a5fa, #34d399, #a78bfa;
rule-inset: 5px;
row-rule: 1px solid #2a2a45;
}
rule-inset-cap을 0px로 설정하고 rule-inset-junction을 10px로 설정하면 컨테이너 가장자리에 평평하지만 교차점에서 인셋된 장식이 표시됩니다. 앞서 나온 대시보드 데모에서는 이 접근 방식을 사용하며, 마우스를 가져가면 인셋이 애니메이션으로 표시됩니다.
.dashboard {
rule-inset-cap: 0px;
rule-inset-junction: 10px;
transition: rule-inset-junction 0.4s;
}
.dashboard:hover {
rule-inset-junction: 0px;
}
공개 상태
column-rule-visibility-items 및 row-rule-visibility-items 속성은 항목 인접성을 기반으로 규칙이 표시되는 시점을 제어합니다.
normal(기본값): 컨테이너 유형에 따라 다릅니다.all: 규칙이 비어 있는 간격을 포함한 모든 간격에 표시됩니다.around: 규칙은 인접한 항목이 하나 이상 있는 곳에 표시됩니다.between: 규칙은 인접한 두 항목 사이에만 표시됩니다.
rule-visibility-items 약어는 두 값을 한 번에 설정합니다.
rule-visibility-items을 between로 설정하면 인접한 항목 간에만 규칙이 표시됩니다.
section {
rule: 2px solid black;
rule-visibility-items: between;
}
반면 rule-visibility-items를 all로 설정하면 인접한 항목이 없는 간격에도 규칙이 표시됩니다.
section {
rule: 2px solid black;
rule-visibility-items: all;
}
라이브 데모에서 값을 전환하여 차이점을 확인하세요.
장식 애니메이션
규칙 너비, 색상, 인셋은 애니메이션으로 처리할 수 있습니다. 마우스를 가져가거나 다른 상태가 변경될 때 전환할 수 있습니다. 앞서 표시된 대시보드 데모에서는 마우스 오버 시 규칙 색상과 인셋이 전환됩니다.
.dashboard {
column-rule-color: #fbbf24, #34d399;
rule-inset-junction: 10px;
transition: column-rule-color 0.4s, rule-inset-junction 0.4s;
}
.dashboard:hover {
column-rule-color: #3b82f6, #3b82f6;
rule-inset-junction: 0px;
}
데모
이 게시물에 표시된 모든 데모는 Edge 데모 사이트에서 확인할 수 있습니다.
개발자 트라이얼 블로그 게시물에는 대화형 플레이그라운드, 햄버거 메뉴, 노트북 레이아웃, 스도쿠 그리드가 있는 잡지 스타일 레이아웃 등 여러 데모가 포함되어 있습니다.
개발자 트라이얼 이후 변경사항
개발자 트라이얼 (Chrome 139) 중에 간격 장식을 사용해 본 경우 다음 변경사항을 참고하세요.
- 이 기능은 기본적으로 제공되며 플래그는 필요하지 않습니다.
- 최신 사양에 맞게 일부 속성 이름이 업데이트되었습니다 (예:
column-rule-outset및row-rule-outset이column-rule-inset및row-rule-inset로 변경됨). column-rule-visibility-items및row-rule-visibility-items속성이 추가되었습니다.- 애니메이션 지원이 추가되었습니다.
지금 바로 간격 장식 사용하기
버전 149부터 Chrome과 Edge에서 간격 장식이 작동합니다. 간격 장식이 순전히 장식용인 경우 이 기능은 점진적 개선입니다. 지원되지 않는 브라우저에서는 간격이 장식 없이 정상적으로 렌더링됩니다. 아직 지원되지 않는 브라우저를 위한 폴리필이 개발 중입니다.
Chromium Issue Tracker에서 버그를 신고하세요. 자세한 내용은 CSS Gap Decorations 사양을 참고하세요.
유용한 링크
- CSS Gap Decorations 사양
- 개발자 트라이얼 블로그 게시물 (Chrome 139)
- Edge 공지사항
- GitHub 설명