프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[CSS] counter-reset, counter-increment 일년 번호

2021.08.01
북마크 [출처 이동]    작성자 정보
counter-reset
{ counter-reset:initial | 카운터 이름/숫자 | none }
 
- initial 초기화
- 카운터로 사용할 이름 (에: chapter / section )
- 숫자를 음수값도 가능하며, 지정하지 않으면 기본값이 0
- none- 설정값이 없음 (이미 설정된 값을 취소 할때 사용 

counter-reset
{ counter-increment | 카운터 이름/ 증가할 숫자 단위 }

- initial 초기값
- 숫자를 지정하는 않으면 기본값으로 1씩 증가
- 음수가능
- none 어떠한 카운터도 증가되지 않음
- 여러 카운터를 증가시키도자 할때 공란으로 분리
 
<style>
 ul { counter-reset :chapter 0;}
 li:before { counter-increment: chapter; content: counter(chapter)"."; }
</style>
 
<style>
 ul { counter-reset:li; }
 li:before { content: counter(li) "-"; counter-increment:li; }
</style>


<ul>
 <li> 공지사항1</li>
 <li> 공지사항2</li>
 <li> 공지사항3</li>
 <li> 공지사항4</li>
 <li> 공지사항5</li>
</ul>



출처
https://blog.naver.com/kwakbora14/221849957366
https://www.youtube.com/watch?v=QV1OIbaYnZA ( 가상요소 설명)

이 포스트 공유하기

전체목록