CSS에서 간격에 스타일을 지정하는 새로운 방법

Sam Davis Omekara
Sam Davis Omekara
LinkedIn
Patrick Brosset
Patrick Brosset
홈페이지

게시일: 2025년 6월 11일

이제 테두리 및 가상 요소 해킹은 안녕히 계세요. 대신 CSS 간격 장식을 사용해 보세요.

Microsoft Edge팀은 플렉스, 그리드, 다중 열 레이아웃의 항목 간의 간격에 스타일을 지정하는 새로운 방법인 CSS 간격 장식을 Chrome 및 Edge 139에서 개발자 체험판으로 사용할 수 있게 되었다고 발표합니다.

이 API의 미래를 함께 만들어 나가기 위해 기능을 사용해 보고 의견을 공유해 주세요.

문제

캘린더, 카드, 데이터 그리드와 같은 UI 구성요소의 간격을 스타일링하면 가독성을 크게 개선하고 전반적인 미적 감각을 높일 수 있습니다. 하지만 기존에는 그리드 및 플렉스박스 레이아웃에서 이 효과를 얻으려면 테두리, 가상 요소 또는 배경 트릭을 사용하는 어색한 해결 방법이 필요했습니다. 이러한 해결 방법은 여러 가지 이유로 문제가 될 수 있습니다.

  • 직관적이지 않음: 시각적 스타일 지정을 위한 구조적 종속 항목을 도입하며 이는 시맨틱 HTML의 원칙에 위배됩니다.
  • 접근성이 좋지 않음: 스크린 리더와 같은 보조 기술을 방해할 수 있는 추가 DOM 요소가 필요한 경우가 많습니다.
  • 유지 관리가 어려움: 복잡한 레이아웃 로직이 필요하며 구성요소 간에 일관된 스타일을 지정하기 어렵습니다.
  • 성능 저하: 이러한 해결 방법은 DOM에 불필요한 요소를 추가하여 성능 문제가 발생할 수 있습니다.

웹 플랫폼은 이미 column-rule 속성으로 간격 스타일 지정을 지원하지만 현재는 다중 열 레이아웃으로 제한됩니다. 웹 개발자들은 오랫동안 그리드 및 플렉스박스와 같은 다른 관련 레이아웃 유형에서 간격의 스타일을 지정하는 일관된 방법을 요청해 왔습니다.

해결 방법: CSS 간격 장식

간격 장식은 column-rule 속성을 확장하여 그리드 및 플렉스박스와 같은 다른 레이아웃 유형과 호환되도록 하고 이를 보완하는 새 row-rule 속성을 도입합니다. 이를 통해 다양한 레이아웃 유형에서 간격의 스타일이 지정되는 방식에 일관성과 새로운 맞춤설정이 적용됩니다.

CSS 간격 장식은 다음과 같은 이점을 제공합니다.

  • 레이아웃 영향 없음: 장식은 순전히 시각적입니다. 레이아웃이나 간격에 영향을 미치지 않으므로 기존 디자인을 손상시키지 않고도 사용할 수 있습니다.
  • 반복 문법: CSS 그리드와 마찬가지로 repeat() 문법을 사용하여 컨테이너의 여러 부분에 장식 패턴을 만들 수 있으므로 최소한의 CSS로 풍부하고 일관된 디자인을 만들 수 있습니다.
  • 더 깔끔한 마크업: 추가 요소나 가상 요소가 필요하지 않습니다. 간격을 직접 스타일 지정하면 됩니다.
  • 맞춤설정 가능 여부: *rule-break, *rule-outset, gap-rule-paint-order와 같은 새로운 CSS 속성을 사용하면 너비, 스타일, 색상의 기존 규칙 스타일 외에도 더 많은 맞춤설정 옵션을 사용할 수 있습니다.

CSS 간격 장식을 사용하면 시각적으로 구별되고 유지 관리 가능한 페이지 레이아웃을 그 어느 때보다 쉽게 만들 수 있습니다.

간격 장식 사용

지금 CSS 간격 장식을 사용하려면 이를 지원하는 브라우저(버전 139부터 Edge 또는 Chrome)를 사용하고 edge://flags 또는 chrome://flags로 이동하여 실험용 웹 플랫폼 기능 사용 설정 플래그를 전환합니다.

대화형 개발자 플레이그라운드

CSS 간격 장식이 지원되는 다양한 유형의 레이아웃과 모든 새 속성을 사용해 보려면 대화형 개발자 플레이그라운드를 사용해 보세요.

놀이터

버거 메뉴

섹션 사이에 선이 있는 햄버거를 맞춤설정하기 위한 UI입니다.

버거 메뉴 데모에서는 column-rule-break: intersection 속성을 사용하여 행 간격과 함께 표시되는 각 교차점에서 열 간격 장식을 중단하는 방법을 보여줍니다.

이 데모에서는 column-rule-offset: -15px를 사용하여 장식의 길이를 조정하여 각 교차점의 가장자리에서 멀리 끕니다.

노트북

줄무늬가 있는 노트 페이지처럼 보이는 데모

노트북 데모에서 row-rule-break: none는 교차점에서 행 장식이 중단되지 않도록 합니다. 행 장식이 컨테이너의 왼쪽에서 오른쪽으로 연속적으로 실행됩니다. 반면 column-rule-break: spanning-item는 열 장식이 확장 항목 뒤에 페인트되지 않도록 합니다. 확장 항목에서 시작하고 끝나며 눈에 띄는 T 교차로를 형성합니다.

row-rule 속성은 repeat() 함수를 사용하여 레이아웃의 여러 섹션에 간격 장식이 적용되는 방식을 정확하게 제어합니다. 이렇게 하면 행 규칙이 헤더와 바닥글에 숨겨지고 기본 콘텐츠 주변에서는 더 두꺼워지며 다른 곳에서는 더 미묘해지는 스타일 지정 패턴을 사용할 수 있습니다.

일일 CSS 뉴스

잡지 스타일 레이아웃

Daily CSS News 데모는 잡지 스타일 레이아웃을 사용하고 여러 그리드 및 플렉스박스 컨테이너에 CSS 간격 장식을 정의합니다.

오른쪽의 Sudoku 게임을 살펴보세요. 이 게임에서는 9x9 그리드와 반복 패턴을 사용하여 행과 열 사이에 얇은 선과 두꺼운 선을 그립니다.

.sudoku {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 6px;
  column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  column-rule-style: solid;
  column-rule-color: var(--secondary);
  row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px);
  row-rule-style: solid;
  row-rule-color: var(--secondary);
}

의견 요청

CSS 간격 장식을 사용해 보시기 바랍니다. 이 기능은 일반적인 문제를 해결하는 데 도움이 될 것으로 생각하며, 사용자의 필요에 맞게 기능을 개선할 수 있도록 의견을 보내주시기 바랍니다.

CSS 간격 장식 기능은 아직 Chromium에서 구현 중입니다. 테스트하는 경우 아직 기능이 개발 중이며 예상대로 작동하지 않는 경우가 있을 수 있다는 점에 유의하세요. 현재 제한사항 중 일부는 간격 장식 애니메이션과 매우 많은 수의 그리드 트랙 사용과 관련이 있습니다.

버그를 발견했거나 기능에 관해 의견이 있으면 새 Chromium 버그를 열어 의견을 공유해 주세요.