CSS(SCSS)
Pure CSS Counter로 리스트 자동 넘버링하기
개굴이 dev
2020. 3. 25. 18:16
가뭄에 콩 나듯 사용하는 빈도수는 적지만, 알아두면 유용한 속성입니다.
counter 속성은 화면에 자동으로 번호를 그려주는 기능을 합니다.
문법
counter(name, style)
name
카운터 이름으로 변수처럼 네이밍합니다.
style
기본값은 decimal(십진수)이고 list-style-type에 적용되는 속성들을 선택적으로 사용할 수 있습니다.
list-style-type: disc, circle, square, decimal, decimal-leading-zero, lower-roman ...
사용법
1. 부모 요소에서 카운터 초기화
counter-reset: 이름 / 시작숫자
2. 사용할 요소에 카운터 선언
counter-increment: 이름 / 증감숫자
contnet: counter(이름)숫자의 기본 증가는 +1로 음수 값도 허용됩니다.
예시
1)
2)
위의 예시는 숫자는 왼쪽, 텍스트는 오른쪽 정렬로 되어 있어서 <span>1</span>처럼 마크업하고 스타일링해야 하는데, counter 속성 덕분에 그러한 마크업 작성없이 좀 더 코드가 간결해집니다.
아래처럼 하면 숫자 옆에 . 점 구분자도 붙일 수 있습니다.
content: counter(secondCounter) ". ";