[counter] CSS - counter (카운터: 자동으로 번호 매기기) 시스템 작동원리 + 관련 속성 종류

목차

1. counter (카운터) 정의
2. counter (카운터) 작동 원리
3. counter (카운터) 중첩 구조 (= 안긴 형태)
4. counter (카운터) 관련 속성

counter (카운터) 정의

 

문서 내 특정요소들의 번호를 자동으로 매기는 CSS 시스템.

 

---

 

1.

• 예제: HTML 문서에서 챕터, 섹션, 목차 등 자동으로 번호 매기기.
• 장점: 문서 구조 명확하게 표현해, 독자가 쉽게 내용을 찾게 해줌.

 

2.

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

 

counter (카운터) 작동 원리

 

1.

CSS 카운터는 "변수"와 같으며, 변수 값은 CSS 규칙이 사용된 횟수 추적해 증가 가능. 

 

2.  CSS 카운터 시스템 작동원리 ★

1. counter-reset 속성 - 카운터 생성/재설정.
2. counter-increment 속성 - 카운터 값을 증가시킴.
3. content 속성 - 생성된 콘텐츠를 삽입.
4. counter() 또는 counters() 함수 - 카운터 값을 요소에 추가.

즉, CSS 카운터 사용하려면, 가장 먼저 counter-reset 속성으로 생성해야 함.

 

---

[예제] - index라는 카운터용 변수 생성해 증가시킨 후 각 요소 앞에 삽입.

 

<style>

body {

  counter-reset: index; // 생성(초기화)

}

h2::before {

  counter-increment: index; // 번호 증가

  content: "목차 " counter(index) " - "; // 번호 매기고, 삽입

  color:red;

}

</style>

<h2>HTML 매뉴얼</h2>

<h2>CSS 매뉴얼</h2>

<h2>JavaScript 매뉴얼</h2>

<h2>PHP 매뉴얼</h2>

<h2>SQL 매뉴얼</h2>

결과보기

counter (카운터) 중첩 구조 (= 안긴 형태)

[예제1] - 다른 요소 중첩구조

 

<style>

body {

  counter-reset: index;

}

h1 {

  counter-reset: subindex;

}

h1::before {

  counter-increment: index;

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

}

h2::before {

  counter-increment: subindex;

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

}

</style>

<h1>그누보드 브라우저측 코드</h1>

<h2>HTML</h2>

<h2>CSS</h2>

<h2>JavaScript (jQuery)</h2>

<h1>그누보드 서버측 코드</h1>

<h2>PHP</h2>

<h2>SQL</h2>

<h1>그누보드 무관한 코드</h1>

<h2>Python</h2>

<h2>Java</h2>

<h2>C++</h2>

결과보기

---

[예제2] - 동일 요소 중첩 구조

 

<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>

결과보기 

counter (카운터) 관련 속성

 

• content 속성 - 카운터 삽입 위해 (::before/::after) 가상요소에서 사용.
• counter-increment 속성 - 하나 이상의 카운터 값을 증가시킴.
• counter-reset 속성 - 하나 이상의 카운터를 생성하거나 재설정.
• counter() / conuters() 함수 - 명명된 카운터의 현재 값을 반환.