[css] counter, counters사용법

 

 

[css] counter, counters 사용법

 

이 글은 content 속성과, counter-reset, counter-increment에 이어지는 글입니다.

 

즉 오늘 배울 counter(), counters()를 이해하려면 위 속성들을 이해하고 있어야 합니다.

 

[css] content 속성 사용법

 

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

 

 

복습하는 의미로 간단히 정리하면,

 

content는 css로 내용을 생성하는 속성인데

 

content: counter 는 숫자를 자동으로 생성하는 역할을 합니다.

 

counter-reset 은 카운터의 이름과 시작값을 설정하고

 

counter-increment는 그 시작값을 몇 단계씩 증가할지를 설정합니다.

 

 

▶ 사용 방법

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

요소{counter-increment: 카운터 이름 / 증감 숫자;}

요소{content: counter(카운터 이름);}

 

 

 

counter() 문법

 

counter(name, style)

 

*name : 카운터의 이름, 이름만 쓸 경우 기본값 decimal(십진수) 적용

*style은 선택적, style은 list-style-type과 동일한 값, 즉 아래 중에서 선택

 

disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or none.

 

list-style 속성 배우기

 

 

▶ 사용 예 

 

html

<ol>                       <li>item</li>                <li>item</li>                  <li>item</li>          <li>item</li>                            </ol>

 

 

css

ol { counter-reset: section;}     li {list-style:none;}           li:before { counter-increment: section; content: counter(section);}

 

▶실행화면

 

 

숫자가 자동 생성되었지만 보기에 답답하므로, 마침표과 여백도 넣어 보겠습니다.

 

 

css

ol { counter-reset: section;}     li {list-style:none;}           li:before { counter-increment: section; content: counter(section) ". ";}

 

▶실행화면

 

 

 

이번엔 숫자가 아닌 로마자로 표시해 보겠습니다.

 

css

ol { counter-reset: section} li {list-style:none;} li:before { counter-increment: section; content: counter(section,upper-roman) ". ";}

 

▶실행화면

 

 

 

이번엔  아래 처럼 만들어보겠습니다.

 

1.

  1.1.

  1.2.

  1.3.

2.

 

html

<dl>  <dt>수박</dt>  <dd>수박은...</dd>  <dd>수박은...</dd>  <dt>참외</dt>  <dd>참외는...</dd>  <dt>포도</dt>  <dd>포도는...</dd> </dl>

 

 

css

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

 

▶실행화면 

 

 

 

1번까지는 좋았는데,

 

2번부터는 2.1부터 시작하지 않고,   sub 값을 물려받아 2.3으로 시작하는 문제가 생깁니다.

 

 

이것을 해결하기 위해

 

첫번째는 html 코드 작성 시 원하는 중첩 구조로 만드는 것이고,

 

두번째로 counters()를 사용하는 것입니다.

 

 

counters() 기능

 

카운터 범주에서, 주어진 카운터와 같은 이름을 쓰는 모든 카운터로 구성된 문자열을 생성합니다.

 

카운터들은 문자열에 의해 분리됩니다. (1,  1.1,  1.1.1 처럼...)

 

각 목록을 위해 매번 다른 카운터를 지정하는 방법도 있겠지만, 중복적인 코드를 만들어내므로

 

couters() 기능을 사용하면 좀 더 간단합니다.

 

 

 

counters() 문법

 

counters(name, string, style)

 

*name, string 값은 필수 (기본값 decimal)

*string은 마침표(.)처럼 앞 뒤를 분리하기 위해 사용합니다.

*style은 선택적

 

▶사용 예 

 

ol{counter-reset: mylist;}

li:before{

counter-increment: mylist;

content: counters(mylist, ".", upper-roman);}

 

 

유의할 점은,

 

html 코드 작성 시에도 중첩된 구조로 만들어야 한다는 것!

 

중첩 구조를 설명하기 위해  ol은 노란색으로,

 

li는 초록색으로 선을 그려 보았습니다.

 

 

 

html

 

 

css

OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, ".") " "; counter-increment: item }

 

display: block을 쓰는 이유는?

 

list-style:none 과 같은 맥락입니다.

ol 요소는 자동으로 항목 머리 기호를 만들어내는데, display: list-item에만 머리 기호가 생기고

display: block을 하면 머리 기호가 없어집니다.

 

 

 

 

▶실행화면  counters.html

 

 

 

 

 

참조 사이트:

 

http://www.w3.org/TR/CSS21/generate.html#counters

http://www.smashingmagazine.com/2013/04/12/css-generated-content-counters/