CSS(SCSS)

Pure CSS Counter로 리스트 자동 넘버링하기

2020. 3. 25. 18:16
목차
  1. 문법
  2. 사용법
  3. 예시
  4. 참고

가뭄에 콩 나듯 사용하는 빈도수는 적지만, 알아두면 유용한 속성입니다.

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) ". ";

 

 

예제 코드보기

 

 

참고

CSS 카운터 사용하기

How To Benefit Fromm CSS Generated Content And Counters

'CSS(SCSS)' 카테고리의 다른 글

Pure CSS radio로 탭 만들기  (0) 2020.04.01
  1. 문법
  2. 사용법
  3. 예시
  4. 참고
'CSS(SCSS)' 카테고리의 다른 글
  • Pure CSS radio로 탭 만들기
개굴이 dev
개굴이 dev
정보를 지식으로 만드는 글쓰기
개굴이 dev
개발공부
개굴이 dev
전체
오늘
어제
  • 분류 전체보기
    • 끄적끄적
    • Javascript
    • React
    • Vue
    • Web
    • HTML
    • CSS(SCSS)
    • 알고리즘
    • Server
      • Node.js
    • Database
      • Mongo
    • Tools
      • Gulp
      • Webpack
    • Design System
    • English
    • Blog

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • Algorithm
  • API
  • backend
  • Counter
  • CSS
  • dartSass
  • design system
  • designsystem
  • EDM
  • Email
  • express
  • frontend
  • github
  • gulp
  • home-brew
  • HTML5
  • java
  • Javascript
  • js
  • js-tutorial
  • macbookM1
  • MongoDB
  • node
  • nodejs
  • outlook
  • react
  • SEO
  • Server
  • task runner
  • task-runner

최근 댓글

최근 글

hELLO · Designed By 정상우.
개굴이 dev
Pure CSS Counter로 리스트 자동 넘버링하기
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.