목차 (= 3가지 방법 소개)
- CSS counter() 함수 이용
- CSS display: list-item; 속성 이용
- jQuery each() 메서드 이용
CSS counter() 함수 이용
<style>
#hz{
counter-reset: var-count;
}
#hz h2::before{
counter-increment: var-count;
content: counter(var-count) ". ";
}
#hz h2:only-of-type::before {
content: "";
}
</style>
<div id="hz">
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
</div>
결과보기
PS. 크롬/파이어폭스에서 적용 안 될 경우, 선택자 명시도 (우선순위) 점검
CSS display: list-item; 속성 이용
<style>
#hz h2 {
display: list-item;
list-style-type:decimal;
list-style-position: inside;
}
</style>
<div id="hz">
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
</div>
결과보기
엑스엠엘 님 (210811) https://sir.kr/qa/425761
jQuery each() 메서드 이용
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#hz h2").each(function(i) {
$(this).text((i + 1) + $(this).text());
});
});
</script>
<div id="hz">
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
<h2>번째 H2</h2>
</div>
결과보기
쟁반짜장 님 (210811) https://sir.kr/qa/425761
