목차
- counter-increment 예제 - 1씩 증가
- counter-increment 정의
- counter-increment 구문
- counter-increment 예제 - 1씩 감소
- counter-increment 예제 - 중첩구조
- counter-increment 예제 - 로마자로 1씩 증가
counter-increment 예제 - 1씩 증가
<style>
body {
counter-reset: index;
}
h2::before {
counter-increment: index;
content: "◎ " counter(index) ". ";
}
</style>
<h2>HTML - 구조</h2>
<h2>CSS - 디자인</h2>
<h2>JavaScript - 기능</h2>
결과보기
counter-increment 정의
지정된 카운터변수에 대해서 증감 정도 지정.
1. 함께 사용하는 속성
2.
- 기본값: none
- 상속여부: X
- 애니가능: X
- CSS버전: CSS2
- JS버전: object.style.counterIncrement = "index";
3.
IE8 이상 주요 최신 브라우저 모두 지원.
counter-increment 구문
selector {counter-increment: none|name number|initial|inherit;}
[속성값]
none
증감 X (기본값)
name number
카운터변수 name에 대해서 number 만큼 증감 지정. (number 미지정 시 기본값: 1)
- name과 number는 띄워씀.
- number 앞 플러스(+)/마이너스(-)부호는 숫자와 딱 붙여씀.
- number 앞 플러스(+) 기호는 생략 가능.
- name이 counter-reset 속성에 의해 '생성/초기화재설정' 안 되어 있는 경우 name 초기값은 0임.
initial
이 속성의 기본값으로 지정.
inherit
부모요소의 속성값 상속.
counter-increment 예제 - 1씩 감소
- name과 number는 한 칸 띄워야 하며, 부호는 number에 붙임.
- 플러스(+) 부호는 생략 가능.
<style>
body {
counter-reset: index;
}
h2::before {
counter-increment: index -1;
content: "◎ " counter(index) ". ";
}
</style>
<h2>HTML - 구조</h2>
<h2>CSS - 디자인</h2>
<h2>JavaScript - 기능</h2>
결과보기
counter-increment 예제 - 중첩구조
<style>
body {
counter-reset: index;
}
h1 {
counter-reset: sub_index;
}
h1::before {
counter-increment: index;
content: "◎ " counter(index) ": ";
}
h2::before {
counter-increment: sub_index;
content: counter(index) "." counter(sub_index) " ";
}
</style>
<h1>브라우저측 언어</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>
<hr>
<h1>서버측 언어</h1>
<h2>PHP</h2>
<h2>SQL</h2>
결과보기
counter-increment 예제 - 로마자로 1씩 증가
※ content 속성의 값에 counter()/counters() 함수 2번째 매개변수에 upper-roman 지정.
<style>
body {
counter-reset: index;
}
h2::before {
counter-increment: index;
content: "◎ " counter(index, upper-roman) ". ";
}
</style>
<h2>HTML - 구조</h2>
<h2>CSS - 디자인</h2>
<h2>JavaScript - 기능</h2>
결과보기
