🎯 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: Conclusion2. 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
If you don't build your dream, someone will hire you to help build theirs.