[tip] css로 숫자 증가되는 (카운터/자동넘버링) 리스트 만들기

보통 리스트를 만들 때, 많이 쓰는 태그는 뭐니뭐니해도 <ul> 이지만 숫자 리스트를 써야할 때는 간혹 <ol>을 쓰기도 하는데, 

앞단에 숫자만 나열하기에는 아쉬움이 남아 숫자를 이쁘게 꾸며볼 생각으로 이것저것 뒤적여보던 중에 <ol>이 아닌 <ul>로, 앞단에 자동으로 카운터가 붙는 리스트를 오직 css로만 써서 만들 수 있는 팁을 발견했습니다. 

먼저 예시로 아래 내용을 준비해주세요.

 

* HTML

<ul class="num">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non.</li>	
	<li>Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa. </li>	
	<li>Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. </li>	
</ul>

 

* CSS

ul,li {
	list-style:none;
}
.num {
    counter-reset: list-number;
    margin-bottom: 49px;
}
.num > li {
    counter-increment: list-number;
    padding-bottom: 7px;
    font-size: 20px;
}
.num > li::before {
    content: counter(list-number);
    display: inline-block;
    text-align: center;
    line-height: 1.5;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: #fff;
    margin-right: 10px;
    background: #00CE7A;
    font-size: 16px
}

 

* 적용화면

 

 

부모 요소인 counter-reset는 카운터를 할 환경을 만들어주는 css로 list-number; 또는 list-number 0; 으로 값을 초기화 해줍니다. (여기서 list-number는 임의로 적어둔 변수입니다.)

counter-increment는 증가량으로 counter-reset과 마찬가지로 list-number; 또는 list-number 1; 으로 값을 지정해줍니다.

마지막으로 li::before에 content: counter(list-number);를 적어주면 완성됩니다.


* 참고사이트
- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
- https://blog.logrocket.com/styling-numbered-lists-with-css-counters/
- https://wellcode.tistory.com/12