목차
- counter-reset 예제 - index라는 카운터용 변수 생성
- counter-reset 정의
- counter-reset 구문
- counter-reset 예제 - 1씩 감소
- counter-reset 예제 - 중첩구조
- counter-reset 예제 - 로마자숫자 대문자로 표기
- counter-reset 예제 - reversed() 활용해 역순 표시
counter-reset 예제 - index라는 카운터용 변수 생성
<style>
body {
counter-reset: index; /* index 변수 생성(= index 변수를 0으로 재설정) */
}
h2::before {
counter-increment: index; /* index를 1씩 증가 */
content: "목차 " counter(index) ". ";
}
</style>
<h2>HTML 강의</h2>
<h2>CSS 강의</h2>
<h2>JavaScript 강의</h2>
<h2>jQuery 강의</h2>
<h2>Bootstrap 강의</h2>
<h2>SQL 강의</h2>
<h2>PHP 강의</h2>
결과보기
counter-reset 정의
카운터용 변수 생성 후, 해당 변수값을 초기화.
1. 함께 사용하는 속성들
2.
- 기본값: none
- 상속여부: X
- 애니가능: X
- CSS버전: CSS2
- JS구문: object.style.counterReset="index"
3.
IE8 이상 주요 최신 브라우저 모두 지원.
counter-reset 구문
selector {counter-reset: none|name number|revert|revert-layer|initial|inherit|unset;}
[속성값]
none
카운터 리셋 안 함.
name number
카운터변수 변수명과 초기값 지정. (※ number 미지정 시 기본값: 0)
- name 경우, 문자열로 작성. (예) var-count, var-count-sub
- number 경우, 숫자로 작성. (예) 5
reversed(name) number
카운터변수 변수명과 초기값 지정 후 역순으로 표시.
revert
에이전트가 지정한 값(또는 사용자가 수정한 값)으로 되돌리기.
revert-layer
준비 중. (※ 원 설명이 너무 어려워, 이해 후 쉽표 설명 추가 예정.)
initial
이 속성의 기본값으로 지정.
inherit
부모요소의 속성값 상속
unset
상속값 존재 O 경우, 상속값(inherit) 적용.
상속값 존재 X 경우, 초기값(initial) 적용.
counter-reset 예제 - 1씩 감소
- 마이너스(-) 왼쪽은 카운터변수와 띄워야 함.
- 마이너스(-) 오른쪽은 숫자와 딱 붙여서 표기.
- 플러스(+) 경우, 기호 생략 가능.
<style>
body {
counter-reset: index; /* index 변수 생성(= index 변수를 0으로 초기화) */
}
h2::before {
counter-increment: index -1; /* index를 1씩 감소 */
content: "목차 " counter(index) ". ";
}
</style>
<h2>HTML 강의</h2>
<h2>CSS 강의</h2>
<h2>JavaScript 강의</h2>
<h2>jQuery 강의</h2>
<h2>Bootstrap 강의</h2>
<h2>SQL 강의</h2>
<h2>PHP 강의</h2>
결과보기
counter-reset 예제 - 중첩구조
<style>
body {
counter-reset: hz-lang;
}
h1 {
counter-reset: hz-lang-sub;
}
h1::before {
counter-increment: hz-lang;
content: "파트 " counter(hz-lang) ": ";
}
h2::before {
counter-increment: hz-lang-sub;
content: counter(hz-lang) "." counter(hz-lang-sub) " ";
}
</style>
<h1>그누보드 앞단 언어</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
<hr>
<h1>그누보드 뒷단 언어</h1>
<h2>PHP</h2>
<h2>SQL</h2>
결과보기
counter-reset 예제 - 로마자숫자 대문자로 표기
※ counter() 함수 2번째 매개변수에 upper-roman 입력.
<style>
body {
counter-reset: index; /* 생성(= index 0으로 재설정) */
}
h2::before {
counter-increment: index; /* index를 1씩 증가 */
content: counter(index, upper-roman) ". "; /* 로마자숫자 대문자로 표기 */
}
</style>
<h2>HTML 강의</h2>
<h2>CSS 강의</h2>
<h2>JavaScript 강의</h2>
<h2>jQuery 강의</h2>
<h2>Bootstrap 강의</h2>
<h2>SQL 강의</h2>
<h2>PHP 강의</h2>
결과보기
counter-reset 예제 - reversed() 활용해 역순 표시
[주의] - reversed() 함수는 counter-reset 속성에서만 사용.
<style>
body {
counter-reset: reversed(index);
}
h2::before {
counter-increment: index;
content: counter(index) ". ";
}
</style>
<h2>HTML 강의</h2>
<h2>CSS 강의</h2>
<h2>JavaScript 강의</h2>
<h2>jQuery 강의</h2>
<h2>Bootstrap 강의</h2>
<h2>SQL 강의</h2>
<h2>PHP 강의</h2>
결과보기 (※ 현재, Firefox 브라우저만 지원. 타 브라우저는 언제 될지...)
