CSS 카운터: 정렬 가능한 목록의 동적 번호 매김을 위한 효율적인 솔루션

정렬 가능한 목록에서 번호 매김 문제를 해결하기 위해 CSS 카운터는 강력한 대안을 제시합니다.

초기 문제점

• 데이터베이스 기반 번호 매김: 초기에는 positioning gem을 사용하여 페이지에 순차적인 번호(1, 2, 3 등)를 부여했습니다. ERB 코드는 page.position을 사용하여 번호를 표시했습니다.

• 정렬 기능 추가: Rails와 Hotwire를 활용하여 칸반 보드 기능을 구현하고 페이지를 커스텀 방식으로 정렬할 수 있도록 했습니다.

• 번호 불일치 발생: 페이지가 정렬되면 데이터베이스 순서에 기반한 번호가 더 이상 DOM 순서와 일치하지 않아 잘못된 번호가 표시되는 문제가 발생했습니다. 새로고침이나 모핑을 통해 해결할 수 있지만, 이는 사용자 경험에 좋지 않습니다.

CSS 카운터 솔루션

이러한 문제를 JavaScript 없이 CSS만으로 해결할 수 있는 방법이 바로 CSS 카운터입니다.

• 작동 원리:
  1. 카운터 초기화 (counter-reset): 부모 요소(예: ul)에 counter-reset: page-num;을 적용하여 page-num이라는 카운터를 0으로 초기화합니다.
  2. 카운터 증가 (counter-increment): 각 목록 항목(예: li) 내부의 번호를 표시할 요소(예: span)에 counter-increment: page-num;을 적용하여 해당 카운터 값을 1씩 증가시킵니다.
  3. 카운터 값 표시 (counter()): ::before pseudo-element와 content: counter(page-num);을 사용하여 현재 카운터 값을 표시합니다. 브라우저는 DOM 내에서 요소가 이동하더라도 이 카운팅을 자동으로 처리합니다.
• 코드 예시:
  • Tailwind CSS: ```html

    • <%= page.content %>

    ```

  • Vanilla CSS: css ul { counter-reset: page-num; } li span::before { content: counter(page-num); counter-increment: page-num; }

::marker와의 비교

ol > li와 ::marker pseudo-element를 사용하는 것도 번호 매김의 한 방법이지만, ::marker는 스타일링에 있어 매우 제한적입니다. 색상, 폰트, 내용 변경은 가능하지만, 배경, 테두리, 패딩, 포지셔닝 등은 제어할 수 없습니다. 반면 CSS 카운터는 일반 요소를 사용하므로 시각적 스타일링에 대한 완벽한 제어권을 제공하여 복잡한 레이아웃 요구사항을 충족시킬 수 있습니다.