많은 유형의 콘텐츠는 HTML 목록으로 가장 잘 표현됩니다. 레시피 단계나 기사의 각주와 같은 순서가 지정된 목록 콘텐츠의 경우 마커에도 정보가 포함되는 경우가 많습니다. CSS는 목록의 카운터를 제어하는 여러 방법을 제공합니다.
스타일 나열
숫자, 알파벳, 로마 숫자, 다양한 국제 계수 시스템을 지원하는 다양한 사전 정의된 목록 스타일 유형이 있습니다.
브라우저에서 지원하는 스타일 외에도 W3C는 45개 쓰기 시스템에서 181개의 추가 스타일을 지원하는 기성 카운터 스타일을 게시했습니다.
이러한 옵션이 필요에 맞지 않는 경우 맞춤 @counter-style을 정의할 수도 있습니다. 이를 통해 맞춤 기호, 접두사, 접미사 등을 지정할 수 있습니다.
기본적으로 항목 마커는 목록의 outside이며, 목록 앞에 배치되고 오른쪽으로 정렬됩니다. list-style-position: inside를 사용하여 목록 내부에 항목 마커를 배치할 수도 있습니다.
카운터
목록 스타일은 목록 항목 마커가 표시되는 방식을 제어하는 반면, 카운터를 사용하면 표시할 값을 제어할 수 있습니다. <li> 목록 항목 요소의 경우 브라우저에서 list-item이라는 카운터를 생성하며, 이 카운터는 발견된 각 목록 항목에 대해 1씩 증가합니다.
CSS 카운터는 해당 counter-increment 값이 설정된 요소가 렌더링된 횟수를 계속해서 계산합니다.
새 카운터를 만들려면 카운터 이름과 선택적으로 초깃값을 사용하여 counter-reset를 사용합니다. 이 속성은 카운트될 모든 요소를 포함하는 상위 요소에 설정하는 경우가 많습니다.
그런 다음 개수를 세려는 각 요소에 counter-increment 속성을 추가합니다.
마지막으로 counter() 함수를 사용하여 카운터 값을 표시합니다.
이 예에서는 각 각주의 링크 텍스트로 각주의 실행 수를 표시하려고 합니다. 전체 문서에 하나의 카운터를 사용해야 하므로 본문에 counter-reset: note를 설정하고 각 각주 링크에서 증가시킵니다.
여러 카운터가 서로 다른 항목을 집계하도록 할 수도 있습니다. 각주 예시에서 각주가 있는 섹션과 단락의 색인을 표시하려면 어떻게 해야 할까요?
섹션 수는 counter-reset를 사용하여 본문에 만들고 각 <h2> 요소에서 증가시킬 수 있습니다. 각 섹션에서 단락 수가 재설정되도록 하려면 <h2> 요소에서 counter-reset를 사용하고 <p> 요소에서 증가시킵니다.
마지막으로 content 속성의 카운터 값을 결합합니다.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
중첩된 카운터
목록 안에 목록을 중첩하면 어떻게 되나요? list-item 카운터는 각 <ul> 또는 <ol> 요소에 대해 초기화되며 counter()를 사용하면 가장 안쪽의 개수만 반환됩니다. 중첩된 각 카운터의 개수를 표시하려면 카운터 이름과 구분자를 사용하는 counters() 함수를 사용하세요.
li::marker {
content: counters(list-item, ".")
}
카운터 반전
기본적으로 카운터 (<ol> 요소의 암시적 list-item 카운터 포함)는 0에서 시작하고 각 요소마다 1씩 증가하므로 첫 번째 요소는 1로 계산됩니다. 1까지 거꾸로 세고 싶다면 어떻게 해야 할까요?
이렇게 하려면 <ol>에 reversed 속성을 추가합니다. 표준 목록 스타일을 사용하는 경우 마커가 예상대로 작동합니다. 하지만 맞춤 카운터를 사용하는 경우 counter-increment를 음수 값으로 설정하고 카운터의 시작 값을 수동으로 계산해야 합니다.