[CSS] Counter

🤔

ul 안 li 요소에 번호를 기입하는 과정에서 콘텐츠의 데이터 변환에 상관없이 순서를 매기고 싶다면?

CSS 만으로는 현재 자식 요소의 순서에 따라 번호를 할당하는 기능이 없다. 그러나 CSS 카운터(Counter)를 사용하여 특정 요소에 번호를 할당하고 표시하는 방법이 있다.

CSS 카운터(Counter)란?

문서 내에서 특정 요소의 순서를 추적하고 그 값을 스타일에 적용하는 CSS 기능이다.
counter-reset 및 counter-increment 속성을 사용하여 카운터를 초기화하고 증가시킬 수 있다.
이를 활용하여 목록 아이템에 번호를 자동으로 할당하거나 특정 요소에 고유한 식별자를 부여할 수 있다.

🍏모든 브라우저에서 사용 가능

/* 초기 카운터 값을 0으로 설정 */
ul {
    counter-reset: my-counter;
    list-style-type: none; /* 기본 순서를 숨김. */
}

li::before {
    /* 카운터 값을 증가 */
    counter-increment: my-counter;
    
    /* 번호를 표시 */
    content: counter(my-counter) ". ";
    
    /* 기타 스타일링을 적용 */
    font-weight: bold;
    margin-right: 5px; /* 번호와 텍스트 간격 조절 */
}

위 코드는 ul 요소의 자식인 각 li 요소에 순서대로 번호를 할당한다. 여기서 counter-reset은 카운터를 초기화하고, counter-increment는 카운터를 증가시킨다.

content 속성은 ::before 유사 클래스를 사용하여 각 li 요소 앞에 번호를 표시한다.

이렇게 하면 HTML 구조에 따라 자동으로 번호가 부여되며, 순서가 바뀌어도 번호가 자동으로 조정된다.
CSS 카운터는 특히 목록이나 특정 요소의 순서를 시각적으로 표현하고자 할 때 유용하다.

단, 동적으로 내용이 변경되는 경우에는 JavaScript를 사용하는 것이 더 적합할 수 있다.