목차
- counter-set 예제 -카운터 값을 5로 설정 후 1씩 증가
- counter-set 정의
- counter-set 구문
- counter-set 예제 - 카운터 값을 5로 설정 후 1씩 감소
- counter-set 예제 - 기본카운터와 서브카운터 값 개별 설정
- counter-set 예제 - 카운터 값을 로마자로 표기
- counter-set 예제 - none 속성값 사용 경우
counter-set 예제 -카운터 값을 5로 설정 후 1씩 증가
<style>
body {
counter-set: hz-counter 5; /*카운터 초기값 */
}
h2::before {
counter-increment: hz-counter; /* 1씩 증가 */
content: "섹션 " counter(hz-counter) ". ";
}
</style>
<h2>HTML 매뉴얼</h2>
<h2>CSS 매뉴얼</h2>
<h2>JavaScript 매뉴얼</h2>
<h2>Bootstrap 매뉴얼</h2>
<h2>SQL 매뉴얼</h2>
<h2>PHP 매뉴얼</h2>
결과보기
counter-set 정의
카운터 초기값을 카운터 할 요소의 부모요소 선택자에 설정.
1. 아래 속성들과 주로 함께 사용.
2.
- 기본값: none
- 상속여부: X
- 애니가능: X
- CSS버전: CSS2
- JS구문: object.style.counterSet="3";
3.
IE 제외한 주요 최신 브라우저 모두 지원.
4. MDN counter-set 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/counter-set
counter-set 구문
selector {counter-set: none|counter-name number|initial|inherit;}
[속성값]
none
카운터 사용 X (기본값)
counter-name number
해당 카운터의 초기값 설정.
- conunter-name - 카운터명
- number - 초기값
initial
이 속성의 기본값 사용.
inherit
부모요소의 속성값 상속.
counter-set 예제 - 카운터 값을 5로 설정 후 1씩 감소
<style>
body {
counter-set: hz-counter 5; /*카운터 초기값 */
}
h2::before {
counter-increment: hz-counter -1; /* 1씩 증가 */
content: "섹션 " counter(hz-counter) ". ";
}
</style>
<h2>HTML 매뉴얼</h2>
<h2>CSS 매뉴얼</h2>
<h2>JavaScript 매뉴얼</h2>
<h2>Bootstrap 매뉴얼</h2>
<h2>SQL 매뉴얼</h2>
<h2>PHP 매뉴얼</h2>
결과보기
counter-set 예제 - 기본카운터와 서브카운터 값 개별 설정
<style>
body {
counter-set: main 5; /* 기본카운트 5부터 */
}
h1 {
counter-set: sub 0; /* 서브카운트 0부터 */
}
h1::before {
counter-increment: main;
content: "섹션 " counter(main) ": ";
}
h2::before {
counter-increment: sub;
content: counter(main) "." counter(sub) " ";
}
</style>
<h1>브라우저 언어</h1>
<h2>HTML 매뉴얼</h2>
<h2>CSS 매뉴얼</h2>
<h2>JavaScript 매뉴얼</h2>
<hr>
<h1>서버 언어</h1>
<h2>PHP 매뉴얼</h2>
<h2>SQL 매뉴얼</h2>
결과보기
counter-set 예제 - 카운터 값을 로마자로 표기
<style>
body {
counter-set: hz-counter 5; /*카운터 초기값 */
}
h2::before {
counter-increment: hz-counter; /* 1씩 증가 */
content: "섹션 " counter(hz-counter, upper-roman) ". ";
}
</style>
<h2>HTML 매뉴얼</h2>
<h2>CSS 매뉴얼</h2>
<h2>JavaScript 매뉴얼</h2>
<h2>Bootstrap 매뉴얼</h2>
<h2>SQL 매뉴얼</h2>
<h2>PHP 매뉴얼</h2>
결과보기
counter-set 예제 - none 속성값 사용 경우
<style>
body {
counter-set: none; /*카운터 사용 X */
}
h2::before {
counter-increment: hz-counter; /* 1씩 증가 */
content: "섹션 " counter(hz-counter) ". ";
}
</style>
<h2>HTML 매뉴얼</h2>
<h2>CSS 매뉴얼</h2>
<h2>JavaScript 매뉴얼</h2>
<h2>Bootstrap 매뉴얼</h2>
<h2>SQL 매뉴얼</h2>
<h2>PHP 매뉴얼</h2>
결과보기
