【CSS】편리한 자동 넘버링 counter

css2에 추가된 CSS counters

CSS counters를 이용하면 텍스트를 추가한 연속 번호를 자동으로 편리하게 매길 수 있습니다.

예) 제1 장, 제2 장 또는 1.1,1.2와 같이 연속되는 숫자에 반복되는 문자나 기호, 숫자를 추가할 수 있습니다.

실제로 써보면 ol태그보다 더 자유롭게 스타일 적용도 할 수 있고 일일이 태그에 적지 않아도 되는 점이 편리해서 자주 쓰게 됩니다.

1. counter-reset

우선 CSS counters를 사용하려면 먼저 counter-reset 속성(초깃값 0)을 사용하여 초기화해야 합니다.. 주의할 점은 리셋은 카운터를 사용할 요소를 감싸는 부모 요소나 아니면 더 큰 요소(body)에 써야 그 안에서 1,2,3,4... 넘버링이 된다는 것이다. 만약 카운터를 사용하는 요소를 리셋해버리면 숫자는 증가하지 않고 그대로 숫자가 반복되기만 합니다.

.number_list {
  counter-reset: number 0;
}

2. counter-increment

카운터의 증가수를 설정합니다. 1을 설정하면 1씩 증가하고 2를 설정하면 2씩 증가합니다. 허나 지금까지 1밖에 설정한 적이 없네....

3. content

표시형식을 지정하는데 카운터를 사용할 요소의 의사 요소 :before,:after의 content에 넘버링을 매길 수 있으며 그렇기 때문에 자유로운 스타일 적용을 할 수 있게 됩니다. 제일 유용하게 쓸 때가 동그라미 외곽이 있는 숫자! ①②...

/*** 앞에 "제", 뒤에 "장"을 붙인 연속 번호 ***/ .number_item::before { counter-increment: number 1; content: '제' counter(number) '장 '; }
<ul class="number_list">   <li class="number_item">사과</li>   <li class="number_item">바나나</li>   <li class="number_item">귤</li>   <li class="number_item">포도</li> </ul>	사과 바나나 귤 포도
/*** 연속숫자에 스타일을 추가 ***/ .circle_list { counter-reset: circle 0; } .circle_item { position: relative; list-style: none } .circle_item::before { position: absolute; top: 50%; left: 0.4em; transform: translateY(-50%); counter-increment: circle 1; content: counter(circle); font-size: 0.8em; } .circle_item::after { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; border: 1px solid #333; border-radius: 50%; width: 1em; height: 1em; }
<ul class="circle_list">       <li class="circle_item"></li>       <li class="circle_item"></li>       <li class="circle_item"></li>       <li class="circle_item"></li>       <li class="circle_item"></li>   </ul>
/*** 배경색이 있는 원 속 숫자 ***/ .colorcircle_list { counter-reset: colorcircle 0; } .colorcircle_item { position: relative; list-style: none } .colorcircle_item::before { position: absolute; top: 50%; left: 0.4em; transform: translateY(-50%); counter-increment: colorcircle 1; content: counter(colorcircle); color: #fff; font-size: 0.8em; z-index: 1; } .colorcircle_item::after { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: inline-block; background-color: #f54; border-radius: 50%; width: 1.1em; height: 1.2em; }
<ul class="colorcircle_list">       <li class="colorcircle_item"></li>       <li class="colorcircle_item"></li>       <li class="colorcircle_item"></li>       <li class="colorcircle_item"></li>       <li class="colorcircle_item"></li>   </ul>

 

counters() 함수를 사용하여 자식 요소 안에 새 인스턴스를 자동으로 만들어 목차를 만드는데 편리합니다.
ol 요소마다 counter-reset을 하도록 하고 중첩된 다른 레벨의 ol에 기존의 숫자와 더불어 새로 시작하는 숫자를 더해나갑니다. counters(인스턴스, '-') ' '; 로 적으면 1-1, 1-2-1 이런 식으로 넘버링을 해나갈 수 있습니다.

.index { counter-reset: index; list-style-type: none; } .index_item { list-style-type: none; } .index_item::before { counter-increment: index; content: counters(index, '.') '. '; }

<ol class="index">   <li class="index_item">항목</li>   <li class="index_item">항목     <ol class="index">       <li class="index_item">항목</li>       <li class="index_item">항목</li>       <li class="index_item">항목         <ol class="index">            <li class="index_item">항목</li>            <li class="index_item">항목</li>         </ol>       </li>     </ol>    </li>    <li class="index_item">항목</li>    <li class="index_item">항목</li> </ol>

항목 항목 항목 항목 항목 항목 항목 항목 항목

콘텐츠가 픽스된 정적인 페이지를 만들 때나 숫자가 1,2,3정도로 끝나는 건 안 써도 되겠지만
카운터를 쓰면 좋은 점이 더 많은 것같다. 1번의 내용과 2번의 내용을 바꾼다 하였을 때, 텍스트만 바꿔주면 숫자를 바꿀 필요가 없고 이용 규약같이 숫자와 텍스트가 계속해서 반복될 때는 처음에 css만 설정해두면 숫자 형식은 신경 쓰지 않고 텍스트를 채워나가면 되기 때문에 일일이 수작업으로 넘버링을 하는 것보다 훨씬 수훨하다.