CSS Counters

CSS 카운터는 CSS에서 관리하는 "변수"로 규칙에 따라 값을 증가시킬 수 있다.

카운터는 문서의 위치에 따라 컨텐츠의 모습을 조절할 수 있게 해준다.??

Automatic Numbering With Counters

counters와 작업하기 위해 다음과 같은 속성들을 쓸 수 있다.

counter-reset : counter 생성 또는 초기화

counter-increment : counter 값 증가

content : 생성된 컨텐츠 삽입

counter() or counters() : 함수 - 요소에 counter의 값 추가

counter를 쓰기 위해 먼저 counter-reset으로 생성되어져야 한다.

다음 예제에서, 페이지에 counter를 생성하고, 각 <h2>요소에 counter 값을 증가하고 "Section <value of the counter>:"를 각 <h2> 요소의 시작 부분에 추가한다.

예시

counter-reset으로 변수 초기화를 한 뒤 카운트를 원하는 요소에다가 가상 클래스를 달아준다. count-increment 속성의 값으로 counter-reset에서 지정한 변수를 적어주고 countent에는 적고 싶은 문장을 큰 따옴표 안에 적은 뒤 변수는 그냥 counter(변수명)로 적어준다.

Nesting Counters

페이지에 하나의 counter를 생성하고 각 <h1>요소에 하나의 counter를 생성한다. 페이지의 변수는 <h1> 요소를 세고, <h1>의 변수는 <h2> 요소를 센다.

예시

https://www.w3schools.com/css/css_counters.asp