자동으로 순서대로 숫자값 넣어주기 - CSS counter

 

javascript나 jquery를 사용하지 않고 CSS 만으로도 순서대로 값을 넣어줄수 있습니다.

counter-reset 속성으로 적용할 counter의 이름을 지정해 준후 

counter-increment를 사용하면 자동으로 증가하여 숫자가 나타납니다. 

주의할 점은 counter의 이름으로 "none", "inherit" 등의 기본적으로 사용되는 속성값을 사용하면 안됩니다.

 

 

1. 일반 카운터

- HTML

<div class="wrap">
    <ul class="list">
        <li class="item">Javascript</li>
        <li class="item">CSS</li>
        <li class="item">JQuery</li>
    </ul>
</div>
 

- CSS

반복되는 요소의 부모에 counter-reset을 걸어주고

반복되는 요소에 counter-increment를 사용하면 자동으로 값이 증가합니다.

그리고 content 안에 counter(counter이름) 넣어주면 1 -, 2 - , 3 - 이렇게 자동으로 증가합니다. 

.list {
    counter-reset : numbering;
    list-style-type:none;
 
}
 
.list .item:before{
    counter-increment : numbering; 
    content : counter(numbering);
    margin-right:10px;
}
 

- 결과

결과화면

2. 중첩 카운터

- HTML

이번엔 목록 안에 소목록이 있다고 해봅시다. 

1 에 대한 목록 밑에 1-1, 1-2 이렇게 증가해야합니다. 

<div class="wrap">
    <ul class="list">
        <li class="item">
            Javascript
            <ul class="list">
                <li class="item">Javascript is fun</li>
                <li class="item">Javascript is not easy</li>
            </ul>
        </li>
        <li class="item">CSS</li>
        <li class="item">
            JQuery
            <ul class="list">
                <li class="item">JQuery is fun</li>
                <li class="item">JQuery is easy</li>
            </ul>
        </li>
    </ul>
</div>

- CSS

큰목록, 작은목록 모두 .list 에 감싸있기때문에 한번만  counter-reset을 지정해주면,

.list 요소마다 numbering이라는 인스턴스를 새로 생성해 줍니다.

중복으로 지정할 필요가 없다는 소리입니다. 

 

그리고 counters(name, string) 두가지 값을 전달하여 표시할 수 있습니다. 

만약 counter(numbering, "."); 라고 지정한다면 1.1, 1.2, 1.3 이런식으로 생성되겠네요.

저는 1-1, 1-2, 1-3 이런식으로 출력하고자 합니다. 

.list {
    counter-reset : numbering;
    list-style-type:none;
}
 
.list .item:before{
    counter-increment : numbering;
    content: counters(numbering, "-");
    margin-right:10px;
}

- 결과

원하는대로 잘 출력되는것을 볼 수 있습니다.

결과화면

해당 기능은 IE8 까지 지원이 되는 다소 안정적인 방식입니다. 

옛날에는 이런 기능을 몰라서 스크립트로 귀찮게 짰었는데.. 

CSS도 꾸준히 파다보면 이렇게 모르는것들이 자꾸 나옵니다 ㅎㅎ