기술
카운터 리셋 속성은 특정 값으로 명명 된 카운터를 설정한다.
가능한 값
적용
모든 HTML 요소.
DOM 구문
object.style.counterReset = "section 1";
예
이 예는 "1 장", "1.1", "1.2"등으로 장과 섹션에 번호를 매기는 방법을 보여줍니다.
<html>
<head>
<style>
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1:before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2:before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
</head>
<body>
<h1> Tutorialspoint.com</h1>
<h2> Tutorialspoint.com</h2>
<h2> Tutorialspoint.com</h2>
<h2> Tutorialspoint.com</h2>
<h2> Tutorialspoint.com</h2>
</body>
</html>
다음 결과가 생성됩니다-
'counter-reset'속성은 계단식 규칙을 따릅니다. 따라서 계단식으로 인해 다음 스타일 시트는 'imagenum'만 재설정합니다.
h1 { counter-reset: section -1 }
h1 { counter-reset: imagenum 99 }
두 카운터를 모두 재설정하려면 함께 지정해야합니다.
h1 { counter-reset: section -1 imagenum 99 }