[CSS] counter : css로 순번나타내기

counter 사용법

counter은 CSS에서 자동으로 번호를 매기는 역할을 한다.

counter-reset

카운터이름과 시작값을 설정{ counter-reset: initial | 카운터이름/숫자 | none }

• initial :: 초기화
• 카운터로 사용할 이름
• 숫자를 지정하지 않으면 기본값이 0
• 숫자는 음수값도 가능하며 여러개의 카운터를 설정하고자 할 때 공란으로 분리.
• none :: 설정값이 없음(이미 설정된 것을 취소하고자 할 때 사용) <br/><br/>

counter-increment

counter-reset으로 설정한 값을 증가시키는 역할{ counter-increment: initial | 카운터이름/숫자 | none }

• initial :: 초기화
• 숫자를 지정하지 않으면 기본값으로 1씩 증가
• 숫자는 음수값 가능
• none :: 어떠한 카운터도 증가되지 않음
• 여러 카운터를 증가시키기고자 할 때 공란으로 분리
• 상속여부 :: no

[예제]

/* 숫자를 설정하지 않으면 기본값으로 1씩 증가 */
li { counter-increment: chapter; }
/* 1씩 감소 */
li { counter-increment: chapter-1; }
/* chapter는 2씩 증가, section은 1씩 감소 */
li { counter-increment: chapter 2 section -1; }
/* chapter와 page는 1씩 증가 section은 2씩 증가 */
li { counter-increment: chapter section 2 page; }

 

counter

{content: counter(name, style) }

• name :: 카운터이름, 이름만 쓸 경우 기본값 십진수 적용
• style :: 선택적, list-style-type과 동일한 값. <br/><br/><br/>

Reference

https://aboooks.tistory.com/262