[counter] CSS - counter-set 속성 - 카운터 초기값(=시작값)을 부모요소에 설정 (= counter-set속성 = 카운터셋속성)

1. counter-set 예제 -카운터 값을 5로 설정 후 1씩 증가
2. counter-set 정의
3. counter-set 구문
4. counter-set 예제 - 카운터 값을 5로 설정 후 1씩 감소
5. counter-set 예제 - 기본카운터와 서브카운터 값 개별 설정
6. counter-set 예제 - 카운터 값을 로마자로 표기
7. counter-set 예제 - none 속성값 사용 경우

counter-set 예제 -카운터 값을 5로 설정 후 1씩 증가

 

<style>

body {

  counter-set: hz-counter 5; /*카운터 초기값 */

}

h2::before {

  counter-increment: hz-counter; /* 1씩 증가 */

  content: "섹션 " counter(hz-counter) ". ";

}

</style>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h2>Bootstrap 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

<h2>PHP 매뉴얼</h2>

 

결과보기

counter-set 정의

 

카운터 초기값을 카운터 할 요소의 부모요소 선택자에 설정.

 

---

 

1. 아래 속성들과 주로 함께 사용.

• counter-increment 속성 - 카운터 증감폭 지정
• content 속성 - 해당 요소 앞에 카운터 삽입

 

2.

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

 

3.

IE 제외한 주요 최신 브라우저 모두 지원.

 

4. MDN counter-set 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set

 

counter-set 구문

 

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

 

---

[속성값]

 

none

카운터 사용 X (기본값)

 

counter-name number

해당 카운터의 초기값 설정.

• conunter-name - 카운터명
• number - 초기값

 

initial

이 속성의 기본값 사용.

 

inherit

부모요소의 속성값 상속.

 

counter-set 예제 - 카운터 값을 5로 설정 후 1씩 감소

 

<style>

body {

  counter-set: hz-counter 5; /*카운터 초기값 */

}

h2::before {

  counter-increment: hz-counter -1; /* 1씩 증가 */

  content: "섹션 " counter(hz-counter) ". ";

}

</style>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h2>Bootstrap 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

<h2>PHP 매뉴얼</h2>

 

결과보기

counter-set 예제 - 기본카운터와 서브카운터 값 개별 설정

 

<style>

body {

  counter-set: main 5; /* 기본카운트 5부터 */

}

h1 {

  counter-set: sub 0; /* 서브카운트 0부터 */

}

h1::before {

  counter-increment: main;

  content: "섹션 " counter(main) ": ";

}

h2::before {

  counter-increment: sub;

  content: counter(main) "." counter(sub) " ";

}

</style>

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

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<hr>

<h1>서버 언어</h1>

<h2>PHP 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

 

결과보기

counter-set 예제 - 카운터 값을 로마자로 표기

 

<style>

body {

  counter-set: hz-counter 5; /*카운터 초기값 */

}

h2::before {

  counter-increment: hz-counter; /* 1씩 증가 */

  content: "섹션 " counter(hz-counter, upper-roman) ". ";

}

</style>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h2>Bootstrap 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

<h2>PHP 매뉴얼</h2>

 

결과보기

counter-set 예제 - none 속성값 사용 경우

 

<style>

body {

  counter-set: none; /*카운터 사용 X */

}

h2::before {

  counter-increment: hz-counter; /* 1씩 증가 */

  content: "섹션 " counter(hz-counter) ". ";

}

</style>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h2>Bootstrap 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

<h2>PHP 매뉴얼</h2>

 

결과보기