TIL 004 CSS_Counter

14342 단어 TILCSScounterCSS

🎯 CSS로 숫자를 자동으로 생성하는 방법을 배워보자!


counter를 사용해 웹페이지의 제목 등에 자동으로 번호를 매길 수 있다. counter는 요소가 몇 번 사용되었는지를 추적하여 증가하며, 본질적으로 변수다.

1. counter

HTML

<body>
   <h3>Introduction</h3>
   <h3>Body</h3>
   <h3>Conclusion</h3>
</body>
 

✔ Numbering을 하려는 element의 상위 element에 counter-reset: 이름; 선언한다.

CSS(1)

body {
  counter-reset: section;
}

h3::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Result(1)

Section 1: Introduction
Section 2: Body
Section 3: Conclusion

✔ conter-reset property의 default 값은 0이지만, 변경할 수 있다.

CSS(2)

body {
  counter-reset: section 3;
}

h3::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Result(2)

Section 4: Introduction
Section 5: Body
Section 6: Conclusion

✔counter-increment property의 default 값은 1이지만 변경할 수 있다.

CSS(3)

body {
  counter-reset: section 3;
}

h3::before {
  counter-increment: section 3;
  content: "Section " counter(section) ": ";
}

Result(3)

Section 6: Introduction
Section 9: Body
Section 12: Conclusion

2. counters(중첩카운터)

<div class="multiLevel">
  <ol>
    <li>item</li>          <!-- 1     -->
    <li>item               <!-- 2     -->
      <ol>
        <li>item</li>      <!-- 2.1   -->
        <li>item</li>      <!-- 2.2   -->
        <li>item           <!-- 2.3   -->
          <ol>
            <li>item</li>  <!-- 2.3.1 -->
            <li>item</li>  <!-- 2.3.2 -->
          </ol>
          <ol>
            <li>item</li>  <!-- 2.3.1 -->
            <li>item</li>  <!-- 2.3.2 -->
            <li>item</li>  <!-- 2.3.3 -->
          </ol>
        </li>
        <li>item</li>      <!-- 2.4   -->
      </ol>
    </li>
    <li>item</li>          <!-- 3     -->
    <li>item</li>          <!-- 4     -->
  </ol>
  <ol>
    <li>item</li>          <!-- 1     -->
    <li>item</li>          <!-- 2     -->
  </ol>
</div>

✔ counter() 함수를 사용하면 중첩된 다른 레벨의 카운터 사이를 분리하는 글자를 지정하여 번호를 매길 수 있다.

CSS

.multiLevel ol {
  counter-reset: section;
  list-style-type: none;
 }
 
 .multiLevel li::before {
   counter-increment: section;
   content: counters(section, ".") " ";  /* section 카운터 값을 마침표(.)로 구분해 결합하여 표시합니다. */
 }

Result

1 item
2 item
  2.1 item
  2.2 item
  2.3 item
    2.3.1 item
    2.3.2 item
    2.3.1 item
    2.3.2 item
    2.3.3 item
  2.4 item
3 item
4 item
1 item
2 item

좋은 웹페이지 즐겨찾기