CSS 카운터 - by. UXKM

Publishing
CSS
CSS 중급
CSS 카운터

요약 설명
counter는 HTML 문서에 쓰지 않고도, 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() 함수는 counter(name)와 counter(name, style) 두 가지 형태로 사용할 수 있습니다.
생성된 텍스트는 가상 요소가 속한 범위에 있는 이름(name)의 가장 안쪽 counter의 값입니다. 텍스트는 지정된 서식(기본값은 십진수 decimal)으로 표시됩니다.

name : 카운터의 이름, 이름만 쓸 경우 기본값 decimal(십진수)이 적용됩니다.
style : 선택적, style은 list-style-type과 동일한 값입니다.

disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha, or 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() 함수는 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: counters(chapter, ".") ". ";
								}
							</style>

counters() 예제

counters 문법의 중첩 관계도 — 위 예제 `counters` 문법의 중첩 관계도