자동으로 숫자 넣기

css 속성중에 counter 관련한 속성이 있다.

사용 방법은 이렇다.

.grid > .item *8의 구조로 되어있고, 알아 볼 속성은

.gird의 counter-reset,

.item::before의 counter-increment, content의 counter() 다. 다음과 같이 css를 준다면

 

이렇게 알아서 넘버링을 해준다.

 

* counter-reset : 초기화 진행(초깃값 0). 카운터의 이름을 설정한다. 지정하는 이름 중 "none", "inherit", "initial"은 사용 불가. (위에서는 item으로 설정)

* counter-increment : 설정된 카운터 값을 1씩 증가시킨다. (위에서는 item의 카운터 값을 1씩 증가 시킴)

* counter() : 가상요소의 content에 counter(item)처럼 설정된 이름을 넣어주면 값을 표시한다.

 

** content에 "텍스트 " counter(item)이라고 쓰면 텍스트 1 ~ 이렇게 앞에 텍스트를 붙일 수도 있다.

ex) 

 

- 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters