CSS Counter (카운터) 활용법

알면 알수록 신기한 CSS... 

 

요즘처럼 블로그 포스팅을 할때 h 태그를 이용해서 체계적인 글을 쓰는게 대세인 상황에서,

누군가는 제목들에 자동으로 번호가 붙여지길 원할 수도 있겠죠? (전 글을 막 써서 전혀 안필요함..ㅋ)

 

아마도 그럴때 유용하게 쓰일 수 있는 CSS의 counter 라는 아이가 있습니다.

 

아래 예시(result)와 사용된 html 및 css를 참고해 보세요.

 

See the Pen css counter by Alex Park (@alikong) on CodePen.

 

키 포인트는

• counter-increment: - 이용할 카운터 정의 (1씩 늘어나는걸 기본으로 하지만 증가/감소 값 지정도 가능)
• counter-reset: - 카운터 값 초기화
• content: counter('...') - 카운터 값 표시

이렇게 3가지로 볼 수 있겠으며,

 

list 예시에서 사용된 content: counters(section, ".") 의 경우는 중첩으로 생성된 카운터의 값을 점(".")으로 이어서 보여준다는 의미입니다.

 

만약 위 css를 티스토리 스킨에 넣는다면? 에디터에서 제목1, 제목2, 제목3 으로 지정해가며 글을 충실히 다 쓰고나면 번호들이 알아서 착착착 붙게 되겠네요. ^^ 아니면 최소한 목차를 자동 생성할 때 써도 되겠군요.

 

그 외, 더 재미있는 활용 예제들도 아래 사이트에 나와있으니 궁금하시면 둘러보세요.

 

Fun Times with CSS Counters / Coder's Block

이걸 잘 쓰면 이제 li 나 스크립트를 쓰지 않고도 번호 붙이기가 수월하겠네요.