counter-reset, counter-increment 속성 사용법

 

 

counter-reset, counter-increment 속성 사용법

 

 

얼마 전에 content 속성을 배우면서 counter 속성값이 잠시 나왔었죠.

 

[css] content 속성 사용법

 

 

counter는 html문서에 쓰지 않고도, css로 숫자를 생성하면서 자동으로 번호를 매기는 역할을 합니다.

 

counter를 쓸 때는 counter-reset 속성과 counter-increment 속성과 함께 사용합니다.

 

오늘은 counter-reset과 counter-increment 속성 사용법을 배우고

 

다음 시간에 counter(), counters() 사용법을 알아볼게요.

 

 

 

counter-reset 속성

 

카운터를 사용하려면, counter-reset으로 먼저 카운터 이름과 시작값을 설정 해야 합니다.

 

▶문법

요소{counter-reset: 카운터 이름 / 숫자 }

 

 

▶속성값

initial ｜카운터 이름/숫자 ｜none

 

* initial 초기화

* 카운터로 사용할 이름(예: chapter/ section/ 장/ 제)

* 숫자를 지정하지 않으면 기본값이 0임
* 숫자는 음수값도 가능하며, 여러 개의 카운터를 설정하고자 할 때 공란으로 분리.

* none-  설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용)

 

 

▶사용 예

body{counter-reset: title;}   카운터 이름을 'title'로 설정함, 기본값 0으로 지정됨

 

body{counter-reset: none} 설정값을 취소함

 

여러 카운터를 동시에 설정도 가능(공란으로 분리)

body{counter-reset: chapter section 1 page;}  chapter와 page는 시작값을 0으로 설정하며 section은 1로 설정함.
 
 

 

▶counter-reset 브라우저 지원 정보

 

ie8+, chrome 2+, firefox any, safari 3.1+, opera 9.2+,

 

counter-increment 속성

 

counter-reset으로 설정한 값을 증가시키는 역할

 

▶문법

요소{counter-increment: 카운터 이름 / 증가할 숫자 단위 }

 

 

▶속성값

initial ｜카운터 이름/숫자  ｜none

 

* initial 초기화

* 숫자를 지정하지 않으면 기본값으로 1씩 증가함
* 숫자는 음수값 가능

* none 어떠한 카운터도 증가되지 않음.

* 여러 카운터를 증가시키고자 할 때 공란으로 분리
* 상속여부 : no

 

▶사용 예

 

li{counter-increment: chapter}  숫자를 설정하지 않으면 기본값으로 1씩 증가함

li{counter-increment: chapter -1}    1씩 감소
li{ counter-increment: chapter 2 section  -1} chapter는  2씩 증가, section은 -1씩 감소.

li{counter-increment: chapter section 2 page;} chapter와 page는 1씩 증가 section은 2씩 증가.

 

▶counter-increment 브라우저 지원 정보

 

ie8+, chrome 2+, firefox any, safari 3.1+, opera 9.2+

  

 

위에서 배운 것을 토대로 html/css를 작성 예를 보겠습니다. 

 

 

html

<dl>   <dt>남대문</dt>     <dd>남대문은..</dd>   <dt>동대문</dt>     <dd>동대문은..</dd>   <dt>서대문</dt>     <dd>서대문은..</dd> </dl>

 

 

css

dl{counter-reset:title;} dt:before{counter-increment:title; content:counter(title) ". ";}

 

*counter-reset에서 카운터 이름 'title'은 counter-increment아 counter()에서 동일한 이름이어야 합니다

 

 

▶실행 화면

 

 

 

 

이번에는 번호를 생성한 곳에 사각 박스를 만들어 다른 색을 입혀 볼게요

 

css

dl{counter-reset:title ;} dt:before{counter-increment:title; content:counter(title);     border: 1px solid #999;       background: #ffc;     padding: 1px 2px;     margin-right: 0.2em;       }

 

▶실행 화면

counter-reset1.htm

 

 

 

 

 

[css] counter, counters사용법

 

 

 

css 선택자, 선택자 종류와 사용법

 

[css] - :before , :after 가상 요소

 

[html] blockquote 태그(인용문 꾸미기 5가지)