[counter] CSS - counter() 함수 / counters() 함수 - 카운터 값을 요소에 추가 (= counter함수 / counters함수 = 카운터함수/카운터스함수/카운터즈함수)

1. counter() 예제 - 2번째 매개변수 사용 X 경우
2. counter() 정의
3. counter() 구문
4. counter() 예제 - 2번째 매개변수 사용 O 경우
5. counter() 예제 - counters() 함수 사용 경우

counter() 예제 - 2번째 매개변수 사용 X 경우

[예제1] - body 요소에서 index 카운터변수 초기화 한 경우

 

<style>

body {counter-reset: index;}

h2::before {

  counter-increment: index;

  content: "목차 " counter(index) ": ";

}

</style>

<h1>그누보드 앞단 언어</h1>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h1>그누보드 뒷단 언어</h1>

<h2>PHP 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

 

결과보기

---

[예제2] - h1요소에서 index 카운터변수 초기화 한 경우

 

<style>

h1 {counter-reset: index;}

h2::before {

  counter-increment: index;

  content: "목차 " counter(index) ": ";

}

</style>

<h1>그누보드 앞단 언어</h1>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h1>그누보드 뒷단 언어</h1>

<h2>PHP 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

 

결과보기

 

counter() 정의

 

지정 카운터 변수의 현재값을 string (문자열) 타입으로 반환.

 

---

 

1.

CSS버전: CSS3

 

2.

모든 브라우저 지원.

 

counter() 구문

 

• counter(counterName, counterStyle)
• counters(counterName, counterStyle)

 

PS. 중첩구조 (=안긴형태)일 땐, counters() 함수 사용.

---

[속성값]

 

counterName

필수. 카운터 변수 이름

• (counter-reset / counter-increment) 속성에 사용되는 것과 동일한 이름 지정.

 

counterStyle

선택. 카운터 스타일

• list-style-type 속성의 값 사용 가능.

 

---

[반환값]

 

지정 카운터 변수의 현재값 반환. (string 타입)

 

counter() 예제 - 2번째 매개변수 사용 O 경우

[예제1] - body 요소에서 index 카운터변수 초기화 한 경우

 

<style>

body {counter-reset: index;}

h2::before {

  counter-increment: index;

  content: "목차 " counter(index, upper-roman) ": ";

}

</style>

<h1>그누보드 앞단 언어</h1>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h1>그누보드 뒷단 언어</h1>

<h2>PHP 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

 

결과보기

---

[예제2] - h1요소에서 index 카운터변수 초기화 한 경우

 

<style>

h1 {counter-reset: index;}

h2::before {

  counter-increment: index;

  content: "목차 " counter(index, upper-roman) ": ";

}

</style>

<h1>그누보드 앞단 언어</h1>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h1>그누보드 뒷단 언어</h1>

<h2>PHP 매뉴얼</h2>

<h2>SQL 매뉴얼</h2><style>

 

결과보기

counter() 예제 - counters() 함수 사용 경우

<style>

ol {

  counter-reset: index;

  list-style-type: none;

}

li::before {

  counter-increment: index;

  content: counters(index,".") " - ";

}

</style>

첫 번째 OL 요소

<ol>

  <li>홈짱닷컴</li>

  <li>홈짱닷컴   

  <ol>

    <li>홈짱닷컴</li>

    <li>홈짱닷컴</li>

    <li>홈짱닷컴

    <ol>

      <li>홈짱닷컴</li>

      <li>홈짱닷컴</li>

      <li>홈짱닷컴</li>

    </ol>

    </li>

    <li>홈짱닷컴</li>

  </ol>

  </li>

  <li>홈짱닷컴</li>

  <li>홈짱닷컴</li>

</ol>

두 번째 OL 요소

<ol>

  <li>홈짱닷컴</li>

  <li>홈짱닷컴</li>

  <li>홈짱닷컴</li>

</ol>

결과보기

PS. 중첩구조에서 counter() 함수 사용 시, 카운터 작동 X (예제)