CSS 카운터 함수로 목차 순번 만들기

css 가상 요소를 활용해 넘버링을 해주는 기능이다. ol뿐만 아니라 일반 태그에도 붙일 수 있다. 다만, 숫자 순번만 가능하다. css 카운터는 css선택자로 선택한 요소에만 순번을 붙일 수 있다. HTML 구조 내용01 내용01_01 내용02 내용02_01 내용03 counter-reset - 변수명 정의 넘버링을 하기 위해서는 부모 요소가 반드시 필요하다. 부모 요소에 counter-reset를 추가하여 변수 선언을 한다. 카운터를 초기화하고, 별도의 시작 값을 지정하지 않으면 0에서 시작한다. 변수명 뒤에 시작값을 추가할 수 있다. 시작 값을 추가하게 되면 1부터 증가 값을 더한 순으로 나열된다. .container{ /*변수명 [시작값]*/ counter-reset: num; counter-re..

2022.09.13