TIL 004 CSS_Counter
🎯 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
Author And Source
이 문제에 관하여(TIL 004 CSS_Counter), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@aliceinkorea/TIL-004-Counter-CSS
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
counter를 사용해 웹페이지의 제목 등에 자동으로 번호를 매길 수 있다. counter는 요소가 몇 번 사용되었는지를 추적하여 증가하며, 본질적으로 변수다.
<body>
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
</body>
body {
counter-reset: section;
}
h3::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Section 1: Introduction
Section 2: Body
Section 3: Conclusionbody {
counter-reset: section 3;
}
h3::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}Section 4: Introduction
Section 5: Body
Section 6: Conclusionbody {
counter-reset: section 3;
}
h3::before {
counter-increment: section 3;
content: "Section " counter(section) ": ";
}Section 6: Introduction
Section 9: Body
Section 12: Conclusion<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>.multiLevel ol {
counter-reset: section;
list-style-type: none;
}
.multiLevel li::before {
counter-increment: section;
content: counters(section, ".") " "; /* section 카운터 값을 마침표(.)로 구분해 결합하여 표시합니다. */
}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 itemAuthor And Source
이 문제에 관하여(TIL 004 CSS_Counter), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@aliceinkorea/TIL-004-Counter-CSS저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
