CSS에서 카운터를 사용하여 자동으로 요소 번호 매기기
OL과의 도전
정렬된 목록은 다음과 같이 렌더링할 수 있습니다.
복소수 번호 매기기를 원하면 어떻게 해야 합니까? 동적 페이지 매김을 원하면 어떻게 될까요? 또는 특정 방식으로 숫자의 스타일을 지정합니까?
하는 대신
그런 다음 span 태그에 스타일을 적용합니다. 그러나 우리는 개발자입니다. 우리는 하드 코딩된 숫자와 반복을 좋아하지 않습니다! CSS의 카운터가 도움이 됩니다.
CSS의 카운터
CSS 카운터는 CSS 규칙을 사용하여 값을 변경할 수 있는 변수입니다. 현재 웹 페이지로 범위가 지정됩니다.
CSS에서 카운터를 사용하기 전에 속성을 이해해야 합니다. counter-reset, counter-increment 및 counter() 속성은 카운터의 동적 특성을 가능하게 만드는 것입니다. 몇 가지 다른 속성도 있지만 기본 카운터에는 충분합니다.
이를 종합하여 먼저 목록을 초기화합니다.
div.list {
counter-reset: numbered-list;
}
카운터를 저장하기 위해 numbered-list라는 변수를 만들고 있습니다. 다음으로 이 목록 내에서 div를 만날 때마다 변수 값을 증가시키려고 합니다. 이를 위해 다음을 수행합니다.
div.list div {
counter-increment: list-number;
}
이것은 카운터를 설정합니다. 이제 content 속성을 사용하여 DOM에 추가해야 합니다.
div.list div:before {
content: counter(numbered-list);
}
이 CSS를 목록에 적용하면 다음과 같습니다.
<div class="list">
<div>Item 1</div>
<div>Item 2</div>
</div>
출력을 얻습니다.
1항목 1
2항목 2
그런 다음 요소의 div.list div:before 섹션을 적절하다고 판단한 대로 스타일 지정할 수 있습니다.
다음과 같이 초기화하여 카운터에 대한 사용자 지정 시작점을 지정할 수도 있습니다.
counter-reset: list-number 10;
또는 증분 값을 지정합니다.
counter-increment: list-number 10;
카운터에 대한 브라우저 지원도 꽤 좋습니다.
따라서 많은 번거로움 없이 CSS에서 카운터를 시작할 수 있습니다.
중첩된 카운터를 허용하는 counters()와 같은 다른 함수가 있으며 카운터 함수는 두 번째 매개 변수를 사용하여 찾고 있는 경우 추가할 좋은 카운터 형식을 지정합니다.
이것이 CSS의 카운터에 대해 알아야 할 전부입니다. 궁금한 점이 있으면 아래에 의견을 남겨주세요.
2021년 9월 1일 https://www.wisdomgeek.com에 원래 게시되었습니다.
Reference
이 문제에 관하여(CSS에서 카운터를 사용하여 자동으로 요소 번호 매기기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/saranshk/using-counters-in-css-to-number-elements-automatically-18e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
