[counter] CSS - counter-increment 속성 - 카운터 값 증가 (= counter-increment속성 = 카운터인크리먼트속성)

목차

1. counter-increment 예제 - 1씩 증가
2. counter-increment 정의
3. counter-increment 구문
4. counter-increment 예제 - 1씩 감소
5. counter-increment 예제 - 중첩구조
6. counter-increment 예제 - 로마자로 1씩 증가

counter-increment 예제 - 1씩 증가

 

<style>

body {

  counter-reset: index;

}

h2::before {

  counter-increment: index;

  content: "◎ " counter(index) ". ";

}

</style>

<h2>HTML - 구조</h2>

<h2>CSS - 디자인</h2>

<h2>JavaScript - 기능</h2>

 

결과보기

counter-increment 정의

 

지정된 카운터변수에 대해서 증감 정도 지정.

 

---

 

1. 함께 사용하는 속성

• counter-reset 속성 - 카운터변수 생성 및 초기값 재설정.
• content 속성 - 해당 요소 앞에 카운터 삽입

 

2.

• 기본값: none
• 상속여부: X
• 애니가능: X
• CSS버전: CSS2
• JS버전: object.style.counterIncrement = "index";

 

3.

IE8 이상 주요 최신 브라우저 모두 지원.

 

counter-increment 구문

 

selector {counter-increment: none|name number|initial|inherit;}

 

---

[속성값]

 

none

증감 X (기본값)

 

name number

카운터변수 name에 대해서 number 만큼 증감 지정. (number 미지정 시 기본값: 1)

• name과 number는 띄워씀.
• number 앞 플러스(+)/마이너스(-)부호는 숫자와 딱 붙여씀.
• number 앞 플러스(+) 기호는 생략 가능.
• name이 counter-reset 속성에 의해 '생성/초기화재설정' 안 되어 있는 경우 name 초기값은 0임.

 

initial

이 속성의 기본값으로 지정. 

 

inherit

부모요소의 속성값 상속.

 

counter-increment 예제 - 1씩 감소

• name과 number는 한 칸 띄워야 하며, 부호는 number에 붙임.
• 플러스(+) 부호는 생략 가능.

 

<style>

body {

  counter-reset: index;

}

h2::before {

  counter-increment: index -1;

  content: "◎ " counter(index) ". ";

}

</style>

<h2>HTML - 구조</h2>

<h2>CSS - 디자인</h2>

<h2>JavaScript - 기능</h2>

 

결과보기

counter-increment 예제 - 중첩구조

 

<style>

body {

  counter-reset: index;

}

h1 {

  counter-reset: sub_index;

}

h1::before {

  counter-increment: index;

  content: "◎ " counter(index) ": ";

}

h2::before {

  counter-increment: sub_index;

  content: counter(index) "." counter(sub_index) " ";

}

</style>

<h1>브라우저측 언어</h1>

<h2>HTML</h2>

<h2>CSS</h2>

<h2>JavaScript</h2>

<hr>

<h1>서버측 언어</h1>

<h2>PHP</h2>

<h2>SQL</h2>

결과보기

counter-increment 예제 - 로마자로 1씩 증가

※ content 속성의 값에 counter()/counters() 함수 2번째 매개변수에 upper-roman 지정.

 

<style>

body {

  counter-reset: index;

}

h2::before {

  counter-increment: index;

  content: "◎ " counter(index, upper-roman) ". ";

}

</style>

<h2>HTML - 구조</h2>

<h2>CSS - 디자인</h2>

<h2>JavaScript - 기능</h2>

 

결과보기