@counter 스타일 규칙을 사용하여 CSS를 사용하여 목록 항목을 사용자 정의하는 방법은 무엇입니까?

목록은 웹 개발의 필수 부분이며 정보를 조직적이고 구조화된 방식으로 표시하는 데 사용됩니다. HTML에는 순서가 있는 목록, 순서가 없는 목록, 정의 목록의 세 가지 유형의 목록이 있습니다. 그러나 요구 사항에 따라 목록을 디자인해야 할 때 이러한 목록의 스타일을 지정하는 것이 어려울 수 있습니다. CSS는 @counter 스타일 규칙을 제공하여 목록 항목 마크업을 보다 유연하고 창의적인 방식으로 사용자 정의할 수 있습니다.

이 글에서는 @counter 스타일 규칙을 사용하여 CSS를 사용하여 목록 항목을 맞춤설정하는 방법을 알아봅니다. @counter-style 규칙은 미리 정의된 스타일 세트의 일부가 아닌 카운터 스타일을 정의하고 카운터 값이 문자열 표현으로 변환되는 방법을 정의하는 데 사용됩니다.

@카운터스타일이 뭔가요?

@counter-style 규칙은 CSS 카운터 속성과 함께 사용할 수 있는 카운터 스타일을 정의하는 데 사용됩니다. 이 규칙은 사용자 정의 목록 항목 마커 스타일을 정의하는 데 사용됩니다. , :before 및 :after와 같은 의사 요소에 대한 콘텐츠를 생성하는 데 사용됩니다.

문법

으아아아

name 매개변수는 우리가 정의하는 카운터 스타일의 이름을 지정하는 데 사용됩니다. 중괄호 안에는 카운터의 모양을 제어하는 ​​속성 및 값 집합을 정의할 수 있습니다. 포함을 사용하세요 −

• System − 십진수, 소문자, 대문자 로마 숫자 등과 같이 사용할 번호 매기기 시스템을 지정합니다.

• Symbol - 카운터의 각 레벨에 사용되는 기호를 지정합니다.

• Suffix − 카운터 값 뒤에 추가되는 접미사를 지정합니다.

• Prefix − 카운터 값 앞에 추가할 접두사를 지정합니다.

• Pad − 카운터 값을 표시할 때 사용할 최소 자릿수를 지정합니다.

CSS에서 @counter-styles 규칙을 사용하는 단계

다음은 CSS에서 @counter-styles 규칙을 사용하는 단계입니다 -

1단계: 순서가 지정된 목록 만들기

첫 번째 단계는 순서가 지정된 목록을 만들고 자체 목록 항목 태그를 사용하여 맞춤 설정하는 것입니다. 아래 예에서는 기본 번호 매기기 시스템 대신 로마 숫자를 사용하려고 합니다. 아래는 우리 목록의 HTML 코드입니다 −

으아아아

2단계: @counter 스타일 정의

으아아아

위 코드에서는 my-numerals라는 카운터 스타일을 정의하고 시스템 속성을 upper-roman으로 설정했습니다. 이는 카운터가 목록에서 대문자 로마 숫자를 사용하도록 설정됨을 의미합니다. 기호의 속성을 I부터 X까지의 로마 숫자 문자열로 표현합니다.

3단계: CSS 스타일

으아아아

위 코드에서 counter-reset 속성은 ol 요소의 섹션에 설정되어 있는데, 이는 카운터가 0부터 시작한다는 의미입니다. 여기서는 각 li 요소에 대한 섹션의 counter-increment 속성도 설정합니다.

예 1

은 다음과 같이 번역됩니다.

예 1

으아아아

위 예에서는 @counter-style 규칙을 사용하여 my-roman이라는 사용자 정의 카운터 스타일을 정의했습니다. 여기서는 대문자 로마 숫자를 사용하도록 시스템 속성을 upper-roman으로 설정하고 기호 속성도 다음으로 설정했습니다. I부터 X까지의 로마 숫자 문자열입니다.

이후에 counter-reset 속성을 사용하여 주문된 목록에 사용자 정의 카운터 스타일을 적용하고, counter-increment 속성을 사용하여 각 목록 항목에 대한 카운터를 증가시키고, 목록 스타일 속성을 사용하여 기본 목록 항목 마커를 제거했습니다.

마지막으로 로마 숫자로 사용자 정의 목록 항목 마크업을 표시하기 위해 content 속성과 counter 함수(두 개의 인수를 취하는 카운터 이름(이 경우 섹션)과 카운터 스타일의 이름(이 경우 로마 숫자)).

예 2

의 중국어 번역은 다음과 같습니다.

예 2

으아아아

위의 예에서는 목록 스타일 속성을 사용하여 순서가 지정되지 않은 목록 요소에서 기본 목록 항목 마크업을 제거했습니다. 또한 :before 의사 요소를 사용하여 content 속성과 빈 문자열의 도움으로 목록 항목을 표시합니다.

이미지가 올바르게 표시되도록 표시 속성을 인라인 블록으로 설정하고, 너비와 높이 속성을 마커 이미지의 크기로 설정했습니다. 태그된 이미지의 URL을 지정하기 위해 background-image 속성을 사용하고, 이미지 중복을 방지하기 위해 background-repeat 속성을 사용합니다. 마지막으로 margin-right 속성을 사용하여 이미지 오른쪽에 약간의 여백을 추가했습니다.

결론

HTML 목록 작업 시 CSS의 @counter 스타일 규칙을 사용하여 목록 항목 마크업의 모양을 맞춤설정할 수 있습니다. 이 규칙은 정렬된 목록에 대한 사용자 정의 스타일을 정의하는 간단하고 유연한 방법을 제공합니다. @counter 스타일 규칙의 구문에는 시스템, 기호, 접미사, 접두사 및 패드와 같은 여러 매개 변수가 포함됩니다. 이러한 매개변수를 사용하면 목록 항목 표시자의 모양을 수정할 수 있습니다. @counter 스타일 규칙을 사용하면 현재 프로젝트 디자인 요구 사항에 맞는 목록 항목 마크업을 더 쉽게 만들 수 있습니다.

위 내용은 @counter 스타일 규칙을 사용하여 CSS를 사용하여 목록 항목을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!