CSS content의 속성값 - 카운터!

CSS 속성값으로 번호를 매길수 있다는 사실...!!!!

번호가 매겨지는 목록을 만들어야해서 ol 태그를 사용했는데

기본 스타일인
1. -- 2. -- 3. --
이 아니라

1 -- 2 -- 3 --
이렇게 코딩하고싶어서

ol의 list-style 을 초기화한 후, 다시 content로 붙여주는 방법을 선택했는데

음..
써본적은 없지만 왠지 이런 기능이 있을거같아서 구글링해보니
아주 간편하게 번호를 매기는 속성값이 있었습니다! 요호~~~

자주 쓰이는 속성은 아니라서 저도 처음 써보는데,
요런게 있다는걸 알면 더 잘 활용할수있을거같아서 정리해두기!

① 부모 요소에서 초기화를 해줍니다.

.ranking-list{ 
/* 카운터 리셋 */
  counter-reset:number;
}

② 자식 요소에 속성 넣어주기!

.ranking-list li{
/*속성값에 카운터 넣기 */
  content:counter(number);
/* 카운터를 1씩 증가 */
  counter-increment:number;
}