- 웹페이지에서 섹션 간 구분선을 추가하는 것은 콘텐츠를 명확하게 정리하고 가독성을 높이는 일반적인 디자인 기법
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속성을 사용해 구분선 색상 변경 가능.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; }- 굵기와 색상이 다른 구분선 설정 가능
.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에서 확인 가능
- 피드백은 GitHub 이슈로 제출 가능
- 특히 교차점에서 구분선 동작에 대한 피드백 환영