counter-reset, counter-increment 로 CSS 일련 번호 붙이기

CSS 를 이용하여 순서대로 나열되는 데이터들에게 일련 번호를 붙일 수 있다.

이때 사용하는 속성은 counter-reset 과 counter-increment 속성이다.

부모 요소에 counter-reset 으로 시작하는 번호 및 변수를 생성하고, 일련 번호가 붙을 요소에

counter-increment 로 증가량을 정한다.

또한 content 속성과 counter 와 counter-reset 으로 정의한 변수를 사용하여  

일련번호와 뒤 내용을 설정한다.

 

counter-reset 속성

// 문법
요소 {
    counter-reset: 카운터 이름 / 숫자
}
* "/" 는 구분을 위한 값, 실제 사용 시 제외


// 속성값
initial | 카운터 이름 / 숫자 | none

* initial 초기화
* 카운터로 사용할 이름 => 예) number, chapter, section 등
* 숫자를 지정하지 않으면 기본값은 0
* 숫자는 음수값도 가능하며, 여러 개의 카운터를 설정하고자 할 때 공란으로 분리
* none 은 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용)

사용 예)

// 카운터 이름을 number 로 지정, 기본값 0으로 설정됨
body {
	counter-reset: number; 
}

// 설정값을 취소함
body {
	counter-reset: none;
}

// number 와 section 은 기본값 0으로 설정, chapter 만 1로 설정
body {
	counter-reset: number chapter 1 section
}

 

counter-increment

// 문법
요소 {
	counter-increment: 카운터 이름 / 증가할 숫자 단위
}

// 속성값
initial | 카운터 이름 / 숫자 | none

* initial 초기화
* 카운터로 사용할 이름 => 예) number, chapter, section 등
* 숫자를 지정하지 않으면 기본값으로 1씩 증가
* 숫자는 음수값도 가능하며, 여러 개의 카운터를 설정하고자 할 때 공란으로 분리
* none 은 어떠한 카운터도 증가되지 않음

// 사용예

// 숫자를 설정하지 않으면 기본값으로 1씩 증가된다.
h1 {
	counter-increment: number;
}

// number 라는 변수가 1씩 감소한다.
h1 {
	counter-increment: number -1;
}

// number 라는 변수는 2씩 증가하고 chapter 는 1씩 감소한다.
h1 {
	counter-increment: number 2 chapter -1;
}

 

content 속성 및 counter 함수

content 속성은 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가한다.
예를 들어 h1 요소 앞에 content 를 넣으려면 아래와 같다.

h1:before {
	content: "Hello World";
}

뒤에 넣으려면 아래와 같다.

h1:after {
	content: "Hello World";
}

// 문법
요소 {
	content: counter(counter-reset 변수 이름) / [추가할 내용]
}

// 사용예
body {
	counter-reset: number 0;
}
h1:before {
	counter-increment: number 1;
	content: counter(number) ". ";
}

위와 같이 content 속성의 counter 함수를 통해 앞쪽 숫자를 지정할 수 있다.