순서를 자동으로 매기는 counter 사용 방법

웹페이지 제목에 자동으로 순차적 번호를 넣을 수 있습니다.

 

1. html 파일에 번호를 넣을 tag 생성

<h1>NoteBook</h1>
<h2>Samsung</h2>
<h2>Apple</h2>
<h2>HP</h2>

 

2. counter-reset 속성을 이용한 초기화 작업

body {
	counter-reset: titles;

	/* 
		** 	순서 초기값 변경
		*	1. 초기값은 default값이 0
	 	*	2. 초기값을 변경하려면 뒤에 초기값을 입력
	 	*	3. ex) counter-reset: titles 5;
	*/
}

 

3. 초기값 이후 증가하는 순서를 적용

h2::before {
	counter-increment: titles;
	content: 'Brand' counter(titles) ": ";
}

 

[결과]