CSS 카운터 - by. UXKM

2024-07-30

요약 설명
counter는 html문서에 쓰지 않고도, css로 숫자를 생성하면서 자동으로 번호를 매기는 역할을 합니다.
counter를 쓸 때는 counter-reset 속성과 counter-increment 속성과 함께 사용합니다.
CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다.
예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다.
Counters는 요소가 몇 번이나 사용되었는지 추적하여 CSS 규칙에 따라 증가하며, 본질적으로 변수입니다.

CSS counter를 사용하려면 먼저 counter-reset 속성(초깃값 0)을 사용하여 초기화 해야합니다.
동일한 속성으로 값을 특정 값으로 바꿀 수도 있습니다.
초기화 된 counter의 값은 counter-increment에 따라 증가하거나 감소합니다.
counter의 이름으로 "none", "inherit", "initial"은 사용불가합니다. 이런 이름을 사용하면 선언은 무시됩니다.

CSS 카운터 설명

Counter의 값은 ::before(::after)의 content 속성에서 counter()나 counters() 함수를 사용하여 표시할 수 있습니다.
일련 번호를 붙이려는 요소의 부모 요소에 counter-reset으로 시작하는 번호를 정하고, 일련 번호가 붙을 요소에 counter-increment로 증가량을 정합니다.

						<!-- 마크업 예제 -->
						<ol class="list">
							<li><li>
							<li><li>
							<li><li>
						</ol>

						<!-- style 예제 -->
						<style>
							.list { counter-reset: 카운터 이름 / 시작 숫자; }
							.list li { list-style: none; }
							.list li:before {
								counter-increment: 카운터 이름 / 증감 숫자;
								content: counter(카운터 이름);
							}
						</style>

counter-reset 속성

카운터를 사용하려면, counter-reset으로 먼저 카운터 이름과 시작값을 설정 해야 합니다.
counter-reset 속성을 사용하여 카운터 값을 임의의 숫자로 재설정 할 수 있습니다.
요소 {counter-reset: initial | 카운터 이름/숫자 | none }

initial : 초기화
카운터 이름 : 카운터로 사용할 이름(예: chapter/ section / 장 / 제)
숫자 : 숫자를 지정하지 않으면 기본값이 0임. 숫자는 음수값도 가능하며, 여러 개의 카운터를 설정하고자 할 때 공란으로 분리합니다.
none : 설정값이 없습니다. (이미 설정된 것을 취소하고자 할 때 사용합니다)

							<!-- html 예제 -->
							<ol class="list">
								<li><li>
								<li><li>
								<li><li>
							</ol>

							<!-- style 예제 -->
							<style>
								.list {
									counter-reset: title; /* 카운터 이름을 'title'로 설정, 기본값 0으로 지정 */
									counter-reset: none; /* 설정값을 취소 */
									 
									/* 여러 카운터를 동시에 설정도 가능(공란으로 분리) */
									counter-reset: chapter section 1 page; /* chapter와 page는 시작값을 0으로 설정하며 section은 1로 설정 */
								}
							</style>

counter-increment 속성

counter-reset으로 설정한 값을 증가 또는 감소시키는 역할을 합니다.
요소:before {counter-increment: initial ｜ 카운터 이름/숫자 ｜ none}

initial : 초기화
숫자 : 숫자를 지정하지 않으면 기본값으로 1씩 증가합니다. 음수값이 가능합니다.
none : 설정값이 없습니다. (이미 설정된 것을 취소하고자 할 때 사용합니다.)

							<!-- html 예제 -->
							<ol class="list">
								<li><li>
								<li><li>
								<li><li>
							</ol>

							<!-- style 예제 -->
							<style>
								.list li:before {
									counter-increment:chapter; /* 숫자를 설정하지 않으면 기본값으로 1씩 증가함. */
									counter-increment:chapter -1; /* 1씩 감소. */
									counter-increment:chapter 2 section -1; /* chapter는 2씩 증가, section은 -1씩 감소. */
									counter-increment:chapter section 2 page; /* chapter와 page는 1씩 증가 section은 2씩 증가. */
								}
							</style>

counter() 문법

counter(name, style)
counter() 함수는 counter(name)와 counter(name, style) 두 가지 형태로 사용할 수 있습니다.
생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수decimal)으로 뿌려집니다.

name : 카운터의 이름, 이름만 쓸 경우 기본값 decimal(십진수) 적용
style : 선택적, style은 list-style-type과 동일한 값, 즉 아래 중에서 선택

isc, ircle, quare, ecimal, ecimal-leading-zero, ower-roman, pper-roman, ower-greek, ower-latin, pper-latin, rmenian, eorgian, ower-alpha, pper-alpha, r none

							<!-- html 예제 -->
							<ol class="list">
								<li><li>
								<li><li>
								<li><li>
							</ol>

							<!-- style 예제 -->
							<style>
								.list {counter-reset: section;}
								.list li {list-style:none;}
								.list li:before {
									counter-increment: section;
									content: counter(section) ". ";
								}
							</style>

counters() 문법

counters(name, string, style)
counters() 함수도 counters(name, string)나 counters(name, string, style) 두 가지 형태로 사용할 수 있습니다.
생성된 텍스트는 가상 요소가 속한 모든 범위에서 지정된 이름을 가진 counters의 값으로, 바깥 쪽부터 안쪽까지 값이 주어지며 지정된 문자열로 구분됩니다.
counters는 지정된 스타일(기본값은 십진수decimal)로 렌더링 됩니다.

name, string 값은 필수 (기본값 decimal)
string은 마침표(.)처럼 앞 뒤를 분리하기 위해 사용합니다.
style은 선택적으로 사용합니다.

							<!-- html 예제 (counters 적용 시 html도 아래 예제처럼 중첩된 구조로 만들어야 합니다.) -->
							<div class="list">
								<ol>
									<li><li>
									<li><li>
									<li>
										<ol>
											<li><li>
											<li><li>
											<li><li>
										</ol>
									<li>
								</ol>
							</div>

							<!-- style 예제 -->
							<style>
								.list ol { counter-reset: chapter;}
								.list li {list-style:none;}
								.list li:before {
									counter-increment: chapter;
									content: counter(chapter ".") ". ";
								}
							</style>

counters() 예제