CSS로 리스트 번호 매기기: counter-reset과 counter-increment 활용 가이드
CSS 25.09.24 조회 24CSS로 리스트 번호 매기기: counter-reset과 counter-increment 활용 가이드
CSS의 counter-reset 속성을 활용해 리스트 항목의 번호를 자동으로 매기는 방법을 다룹니다.
counter-increment와 함께 사용하여 ordered list나 단계 표시, 순서 표시 등 다양한 UI에서 활용할 수 있습니다.
➰➰➰
✅ 활용 예제
게시판 번호, 순서 안내, 프로세스, 포트폴리오 또는 게시물 번호 등 순차적 번호가 필요할 때,
HTML 구조를 변경하지 않아도 CSS만으로 번호를 관리할 수 있습니다.
✅ 한 눈에 알아보기
✔ before, after 가상요소 활용
✔ counter-reset, counter-increment css 속성으로 번호 생성
✏️ HTML 구조는 이렇게 생겼어요
✔ ul/ol - li 리스트 구조에서 활용도 상승
1 2 3 4 5 6 7 | <ul class="tab-list"> <li class="tab-item">배양 성공 사례는 얼마나 되나요?</li> <li class="tab-item">정기 서비스는 어떤 내용으로 제공되나요?</li> <li class="tab-item">정기 서비스를 신청하면 어떤 이점이 있나요?</li> <li class="tab-item">배양 성공률은 정기 서비스와 연관이 있나요?</li> <li class="tab-item">조직배양 성공률은 얼마나 되나요?</li> </ul> | cs |
✏️ CSS로 효과 구현하기
counter-reset
✔ 카운터를 새로 생성하고 초기값을 0으로 설정
✔ ex) counter-reset : step; => step 이름을 가진 카운터를 생성 (카운터 명은 자유롭게 생성 가능)
counter-increment
✔ 각 리스트 요소가 생성될 때마다 카운터를 1씩 증가
content: counter(step);
✔ 가상요소와 함께 번호를 노출시키기 위해 사용하는 content 속성을 통해 카운터 값을 가져오도록 설정
Tip) 이때 decimal-leading-zero 속성도 함께 설정하면 두 자리 숫자로 노출됩니다. ex) 01~09
1 2 3 | ul.tab-list{display:flex;flex-direction:column;gap:34px;counter-reset:step;} li.tab-item{position:relative;} li.tab-item::before{position:absolute;top:0;left:0;content:counter(step, decimal-leading-zero);counter-increment:step;} | cs |
➰➰➰
스크립트를 사용하지 않고, HTML 구조를 변경하지 않아도 CSS 카운터를 활용해 손쉽게 리스트 번호를 매길 수 있습니다.
이를 통해 유지보수성을 높이고, 사용자 경험(UX)을 한층 향상시킬 수 있습니다.
쉬운 유지보수성과 효율적인 디자인 구현을 위해 끊임없이 고민하는 디자인키트에서 제공하는 디자인 템플릿과 HTML 소스코드를 직접 경험해보세요!
