CSS "counter-" 로 순번 달기

작업을 하다가 ol이나 ul에 자동으로 번호가 붙게 할 수 있다.

그러나 이 번호 스타일은 변경이 불가능하고, 해당 단계에 대해서만 표시하지 다단계는 되지 않는다.

그래서 CSS counter로 다단계 순번을 만들어보기로 했다.

1. li {counter-increment: customlistcounter;}

ul.custom li {  counter-increment : customlistcounter;  }

2. li:before {content:counter(customlistcounter)" ";}

content에 counter(customlistcounter) " ";은 "customlistcounter" 변수의 순번 값을 대문자 로마자로 출력하고 그 뒤에 빈칸을 붙이라는 의미이다.

ul.custom li:before {  content: counter(customlistcounter) " "; font-weight: bold; float: left; width:10px;   }

3. 결론

counter-increment: customlistcounter;와 content: counter(customlistcounter) " "; 를 이용하여 다단계 순번을 달거나 스타일 변경이 가능한 순번을 달수 있으니 잘 알아두면 좋을것 같다!