CSS 카운터 및 사용 사례 이해-IT산업-php.cn

집

기술 주변기기

IT산업

CSS 카운터 및 사용 사례 이해

Christopher Nolan

Feb 20, 2025 pm 12:18 PM

CSS 카운터 및 사용 사례 이해 우리가 자주 사용하지 않는 특정 CSS 기능이 있습니다. CSS 카운터는 대부분의 사람들에게 그 범주에 속한다고 생각합니다.

그들은 많은 사용 사례가없는 것 같습니다. 를 작성하는 코드는 약간 복잡합니다

최근에 카운터에 대한 실용적인 사용 사례를 보았으므로 카운터가 작성되는 방법에 대한 간단한 충돌 과정을 제공하고 여기에서 사용 사례를 공유 할 것이라고 생각했습니다.

. 키 테이크 아웃

초기 복잡성에도 불구하고 CSS의 의사 요소의 개념이 이해되면 CSS 카운터는 유지하기가 어렵지 않습니다. 생성 된 컨텐츠는 접근성 문제가있을 수 있지만 대부분의 브라우저는이를 지원하며 화면 리더가 인식합니다. CSS 카운터의 실제 사용 사례는 W3C의 Selectors Level 4 사양에서 볼 수 있으며, 여기서 콘텐츠 내에서 산재 된 "문제"및 "예제"를 숫자로 사용하는 데 사용됩니다. 이를 통해 번호를 자동으로 업데이트하면서 항목을 쉽게 추가, 제거 또는 재정렬 할 수 있습니다.

CSS 카운터의 충돌 과정 CSS 카운터를 사용하면 주문 목록의 작동 방식과 유사하게 동적 번호를 사용하여 CSS의 항목 번호를 번호로 번호를 매길 수 있습니다. 그러나 CSS 카운터는 상당히 다릅니다. 이 기능은 일부 카운터 특이 적 CSS와 결합 된 의사 요소를 사용하여 지정된 요소 세트에 동적 "수"를 추가/전제합니다.

 여기 에이 기사의 끝에서 데모에서 사용할 것과 유사한 코드 예제가 있습니다.

첫 번째 선언 블록은 카운트의 범위를 정의합니다. 이것이 의미하는 바는 내 카운터가 .container 클래스가있는 요소 내에서만 증가한다는 것입니다. 컨테이너를 계산하는 요소에 연결 해야하는 "문제"라는 사용자 정의 식별자를 선택했습니다. 두 번째 선언 블록은 다음을 사용합니다. pseudo element (나는 대안 적으로 사용할 수 있지만, 카운터에서는 드물지만)와 정의 된 컨텐츠를 준비하는 내용 속성을 사용합니다. 컨텐츠 속성 값의 일부로 JavaScript 또는 기타 일반적인 프로그래밍 언어로 수행 될 수있는 것과 유사한 문자열과 함께 Counter () 함수를 사용하고 있습니다. Coun 기본값은 "소수"이며이 예제에서 사용하고 있습니다.

카운터의 작동 방식이 여전히 혼란스러워지면이 미니 인포 그래픽이 도움이 될 것입니다.

그리고 충분하지 않다면, 원래 비슷한 인포 그래픽을 게시 한 내 자신의 기사를 포함하여 더 많은 정보가 포함 된 몇 가지 추가 리소스가 있습니다.

CSS 카운터 : 카운터 증가 및 친구 (인상적인 웹) CSS 생성 컨텐츠 및 카운터의 혜택을 얻는 방법 (Smashing Magazine) CSS 카운터 스타일 레벨 3 (w3c 사양)

CSS 카운터의 값 결정

피상적 인 한 눈에, CSS 카운터 구현에 대해 처음 생각할 때 두 가지 주요 문제가 발생합니다.

순서 목록이 이미이 작업을 수행하므로 왜 품목을 숫자로하기에 너무 복잡한 기능이 필요한가? 생성 된 컨텐츠에 액세스 할 수 없으며 콘텐츠를 프레젠테이션과 혼합합니다.
이 두 가지 문제 중 첫 번째는 실제로 문제가되지 않습니다. 연속 번호를 원한다면 순서 목록 (예 : 중첩
요소가있는
)을 사용하는 것이 적절합니다. 그러나 CSS 카운터는 연속 항목 번호를 매기기위한 것이 아닙니다. 그들은 DOM에있을 수있는 곳 어디에서나 비 공모 항목을 번호를 매기는 다음 각각 배정 된 숫자를 각각으로 변경하지 않고도 다시 주문할 수 있습니다. 또한 카운터는 첫눈에 약간 복잡 할 수 있지만 CSS의 의사 요소의 개념을 파악하면 실제로 수정하고 유지하기가 어렵지 않습니다.

. 접근성과 관련된 다른 문제는 과거와 마찬가지로 큰 문제가 아닌 것 같습니다. Léonie Watson의 기사는 다음과 같이 결론을 내 렸습니다
"[g] 에너지 컨텐츠는 대부분의 브라우저에서 지원되는 접근성이며 그에 따라 스크린 리더가 인식합니다.
그러나 지원은 100%가 아니므로 컨텐츠를 생성하기 위해 의사 요소를 사용하려면 "내용"은 장식적인 가치가 있어야하며 웹 사이트에 포함되어 있습니다. 균형 잡힌 접근 방식을 염두에두고 아래에 설명 된 것과 같은 특정 경우 카운터를 사용하는 것이 좋습니다. 간단한 유스 케이스 최근에 나는 W3C의 Selectors Level 4 사양을보고 있었고 내용 내에서 산재 된 "문제"와 "예"가 있다고 언급했습니다. 나는 이것을 전에 보았지만 그때에야 나는 그것을 조금 조사하기로 결정했습니다. 이 요소는 번호가 매겨져 있으므로 매번 전체 세트를 다시 설정하지 않고도 어떻게 추가하고 제거 할 수 있었는지 궁금했습니다. 나는 그것이 대본이라고 생각했거나, 그렇지 않으면 백엔드 또는 그와 비슷한 것에 생성되었다고 생각했다.

아뇨. 아래 스크린 샷에 표시된대로 CSS 카운터를 사용하고 있습니다.

CSS 카운터 및 사용 사례 이해 페이지에는 문제가 번호가 매겨졌고 번호가 매겨진 예제 (노란색 상자)를 가지고 있습니다. 계산 된 각 세트에 대해 사용자 정의 식별자를 사용하면 항목을 쉽게 추가, 제거 또는 재로 주문할 수 있으며 CSS는 항목에 올바른 숫자를 자동으로 추가합니다. 또한,이 사양 페이지에는 페이지 끝에 문제 색인이 포함되어 있으며,이 문제는 문제와 동일한 카운터 식별자를 사용하지만 새로운 범위에서 Count Fresh를 시작합니다. 중복 문제 목록은 문제를 유지하기 위해 약간 더 많은 작업을 만들지 만, 다시 한번, 순서는 컨텐츠 본문에서 변경된 내용과 일치하는 한 일반적으로 유지하기가 쉽습니다.

. 드래그 앤 드롭 데모

나는 W3C의 예제를 재현하여 카운터의 작동 방식과 함께 바이올린을 만들 수 있지만 HTML 및 CSS만으로도 비 판단 항목에서 이러한 방식으로 동적 목록을 만드는 것이 얼마나 쉬운 지 볼 수 있습니다. Codepen에서 sitepoint (@sitepoint)에 의해 펜 20fe8f19ae48c210da6c5df78c0cf6f8 참조 데모에서는 jqueryui의 정렬 가능한 기능을 사용하여 "문제"및 "예제"상자를 포함하여 페이지의 단락을 드래그하고 다시 주문할 수 있습니다. 항목이 드래그되는 위치에 따라 숫자가 어떻게 변하는 지 (드래그하는 과정에서 숫자의 동작이 약간 기발한 것 같습니다). W3C 페이지와 같이 하단에 중복 "문제 목록"도 포함되어 있습니다.

결론 이것은 CSS 카운터가 무엇을 사용할 수 있는지 좀 더 명확하게 만들어야합니다. 자주 편집되는 문서를 생각해보십시오. 아마도 항목을 다시 정렬하거나 재 분류 할 수있는 곳에서 사용자가 생성 한 내용도 생각해보십시오. 언급 한 바와 같이, 이러한 종류의 카운터는 컨텐츠 이해에 번호가 중요하지 않으며 항목이 소스 내에서 판단되지 않은 경우에 유용 할 가능성이 가장 높습니다.

. 다른 유용한 방식으로 CSS 카운터가 사용 된 경우 의견에 알려주십시오. CSS 카운터에 대한 자주 묻는 질문 (FAQ) 다른 유형의 CSS 카운터는 무엇입니까?

CSS 카운터는‘카운터’와‘카운터’의 두 가지 유형으로 제공됩니다. '카운터'유형은 문서의 번호 제목과 같은 단일 레벨 카운터에 사용됩니다. 반면에 '카운터'유형은 섹션 내에서 번호 지정 하위 섹션과 같은 다단계 카운터에 사용됩니다. 두 유형 모두 CSS의 '콘텐츠'속성과 함께 사용됩니다. 카운터 값을 표시합니다. CSS 카운터를 어떻게 재설정합니까?

CSS 카운터는 '카운터 리셋'속성을 사용하여 재설정 할 수 있습니다. 이 속성은 카운터를 특정 번호로 설정합니다. 예를 들어,‘Counter-Reset : Section;’은‘섹션’카운터를 0으로 재설정합니다. 카운터를 'Coun 예, CSS 카운터는 목록과 함께 사용할 수 있습니다. 이것은 목록 항목의 번호를 사용자 정의하려는 경우 특히 유용합니다. 'Coun CSS 카운터에 의해 생성 된 숫자는 CSS의 다른 텍스트와 마찬가지로 스타일링 할 수 있습니다. ‘색상’,‘글꼴 크기’,‘글꼴 체중’등과 같은 속성을 사용하여 숫자를 스타일링 할 수 있습니다. 스타일은 '컨텐츠'속성에 의해 생성 될 때 숫자에 적용됩니다.

CSS 카운터를 숫자 테이블에 사용할 수 있습니까?

예, CSS 카운터를 사용하여 테이블 번호 숫자로 사용할 수 있습니다. . 이는 '테이블'요소의 '카운터 리셋'속성, 'tr'요소의 '카운터-증가'속성, '전'또는 'pseudo 이후의'컨텐츠 '속성을 사용하여 수행 할 수 있습니다. -'tr'요소 내에서 요소.

CSS 카운터가있는 다단계 카운터를 어떻게 생성합니까?

CSS의 '카운터'기능을 사용하여 다중 레벨 카운터를 만들 수 있습니다. 이 함수는 두 가지 인수를 취합니다. 카운터의 이름과 레벨 간의 구분기로 사용할 문자열. 예를 들어 '내용 : 카운터 (섹션”);'; ';'; 그렇습니다. CSS 카운터는 종종 '이전'및 '후'의사 요소와 함께 사용됩니다. 카운터의 값을 표시하는 데 사용되는 '콘텐츠'속성은 이러한 의사 요소와 함께 만 사용할 수 있습니다.

CSS 카운터를 어떻게 증가시킬 수 있습니까?