[css] counter(), counters() 사용하여 자동 넘버링 하기

개요

 css counter를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어 counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이나 사용되었는지 추적하여 css규칙에 따라 증가하며, 본질적으로 변수입니다.

counter()를 이용해서 자동 넘버링을 하기 위해서 다음 속성들을 사용합니다.

• `counter-reset` : 카운터 생성 및 재설정
• `counter-increment` : 카운터 값 증가/감소
• `content` : counter() 혹은 counters() 함수 지정할 수 있는 속성
• `counter()` 또는 `counters()` 함수: 카운터값 추가

 

 counter-reset

css counter를 주어진 값으로 초기화 시킵니다.
이 속성은 지정된 요소에 지정된 이름을 가진 새로운 counter를 생성하거나 역방향 counter를 생성합니다.

• 별도로 지정하지 않으면 카운터의 `초기값`은 0입니다.

 

 

문법

counter-reset: counter-name integer | none;

 

값

• `none` : 기본값으로 none을 지정하면 counter-reset 수행 안 함.
• `counter-name` : 카운터에 사용할 이름. 반드시 지정해야 함.
• `integer` :  카운터 초기값 지정하는 용도. `default`는 `0`.

 

예시

 body {
   counter-reset: my-counter section 1; 
   /* my-counter는 default 0부터 시작. section은 1부터 시작 */
}

 

브라우저 호환성

`reversed()`함수(역방향 counter)는 아직 사용하지 않는 것이 좋습니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-reset#browser_compatibility(2023-11-15)

 

 

counter-increment

지정한 counter의 값을 1또는 지정된 값으로 증가시키거나 감소하게 지정할 수 있습니다.

 

문법

counter-increment: counter-name integer | none;

 

값

• `none` : 기본값으로 카운터가 증가하지 않음
• `counter-name` : 증가/감소할 카운터 이름을 지정함.
• `integer` : 증가/감소될 값을 지정함. 생략 가능. `default` 는 `1`.

 

예시

body {
    counter-reset: my-section 0; /* counter 이름을 'section'으로 지정합니다.
                                               초깃값은 0입니다. */
  }

  h3::before {
    counter-increment: my-section; /* section의 카운터 값을 1(default)씩 증가시킵니다. */
  }

 

어떤 counter를 증감 시킬지, 얼마만큼 증감시킬지 구분하여 정할 수 있습니다.

/* Increases "counter1" by 1 and decreases "counter2" by 4 */
counter-increment: counter1 counter2 -4;

/* Increases "chapter" and "page" by 1 and "section" by 2 */
counter-increment: chapter section 2 page;

 

counter(), counters()

`counter()`/`counters()` 함수는 지정된 counter의 값을 문자열로 반환해 표시합니다.

보통 가상 요소 선택자의 `::before`또는 `::after` 선택자에 속성의 `count` 속성에 값으로 지정합니다.

보통 list에 사용될 때는 기본 `list-style-type`을 `none`으로 없애고 사용합니다.

 

1. `counter()`
   • counter함수 자체는 숫자 외에는 눈에 보이는 다른 효과가 없습니다.
   • nested counting을 지원하지 않습니다.
2. `counters()`
   • nested counting이 가능합니다.

 

문법

 

1. counter()

/* Simple usage */
counter(counter-name);

/* changing the counter display */
counter(counter-name, counter-style)

 

 

2. counters()

/* changing the counter display */
counters(counter-name, string, counter-style)

 

counters(countername, '.', upper-roman)

`counters()`의 두 번째 인자에는 보통`.` 또는 `-` 이 많이 옵니다.

 

 

값

• `counter-name` : 표시할 카운터 이름(counter reset에서 지정한 이름)
• `string` : counter 함수는 지정할 수 없고 counters 함수만 지정할 수 있다. counters 함수는 string필수로 지정해야 함.
• `counter-style` :  숫자를 어떻게 표현할 것인지 `list-style-type`의 값 중 하나를 지정. 생략하면 기본값 `decimal`이 지정됨.
• `upper-roman` : `counter-style`에 속해있는 값 중 하나다. 로마 숫자 표기법 사용. 목차에 자주 써서 따로 적어둡니다.

counters() 함수에서 `string`은 현재 nested된 count를 연결하는 문자열입니다.
counter() 함수는 nested를 지원하지 않습니다.
counters() 함수는 nested된 count를 지원합니다. counter-reset 될 때 같은 선상의 count를 기억합니다.

 

 

전체 예시

counter 예시

 

See the Pen count example 1 by Olimjo (@OLIMJO) on CodePen.

 

 

 

 

 

 

 

counters 예

nested numbering에도 유용하게 사용할 수 있음.

 

See the Pen css counter example 2 by Olimjo (@OLIMJO) on CodePen.

 

 

 

 

 

 

 

list와 비교했을 때 counter / counters 의 장점

1. 표현하고 싶은 문자를 껴서 보다 자유롭게 리스트를 표현할 수 있다.
2. `ol`혹은 정렬 리스트의 시작은 숫자 1에 고정되어 있지만, counter를 사용하면 시작 숫자를 조정할 수 있다.
3. 무조건 들여쓰기 때 숫자가 초기화 되는 것이 아니라 숫자의 초기화 시점을 정할 수 있다.
4. 리스트 이외의 요소에서도 numbering, nested numbering을 활용할 수 있다.

4번이 가장 큰 장점입니다.

 

 참고 링크

1. mdn counter 사용하기

2. mdn counters 사용하기