▲

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

 (blogs.windows.com)
5P by neo 5일전 | ★ favorite | 댓글 1개
  • 웹페이지에서 섹션 간 구분선을 추가하는 것은 콘텐츠를 명확하게 정리하고 가독성을 높이는 일반적인 디자인 기법
  • 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 이슈로 제출 가능
  • 특히 교차점에서 구분선 동작에 대한 피드백 환영
▲
neo 5일전  [-]
Hacker News 의견

  • 새로운 가상 요소를 만들고 싶음: .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에 대한 부족한 지식을 고치는 것은 축복이었지만, 이것이 실제 해결책처럼 느껴짐

답변달기