Skip to main content

CSS , , .

CSS  illustration
🎨

CSS

, , .

1

카운터 설정

카운터 이름, 스타일(10진수, 로마자, 알파벳), 접두사 및 접미사를 설정합니다.

2

중첩 활성화

선택적으로 사용자 지정 구분 기호를 사용하여 중첩된 카운터를 활성화합니다.

3

CSS 복사

번호가 매겨진 목록을 미리 보고 완전한 카운터 CSS를 복사합니다.

Loading tool...

What Is CSS ?

CSS 카운터 생성기는 CSS counter-reset, counter-increment, content 속성을 사용하여 맞춤 번호가 매겨진 목록을 만듭니다. CSS 카운터는 표준 <ol> 목록 번호 지정보다 더 유연하며 다양한 번호 스타일, 사용자 정의 접두사 및 접미사, 중첩된 번호 지정 및 list-style-type과 독립적인 스타일링을 지원합니다. 이 도구를 사용하면 카운터 이름을 구성하고 10가지 번호 스타일(10진수, 선행 영숫자 10진수, 소문자/대문자 알파벳, 소문자/대문자 로마 숫자, 그리스어 등) 중에서 선택할 수 있으며 사용자 정의 접두사 및 접미사 텍스트를 설정하고 옵션으로 중첩된 카운터를 구성 가능한 구분 기호와 함께 활성화할 수 있습니다. 미리 보기에서는 샘플 목록에 적용된 카운터가 실제 콘텐츠로 표시되며 생성된 CSS에는 모든 필요한 카운터 속성이 포함됩니다.

Why Use CSS ?

  • 10진수, 로마자 및 알파벳을 포함하는 10가지 번호 스타일
  • 카운터 값 주변에 사용자 지정 접두사 및 접미사 텍스트
  • 구성 가능한 구분 기호를 사용한 중첩 카운터 지원
  • 현실적인 목록 내용으로 미리 보기

Common Use Cases

법률 문서

법률 및 기술 문서용 중첩 번호된 섹션(1.1, 1.2, 2.1)을 생성합니다.

단계별 가이드

튜토리얼을 위한 사용자 지정 번호가 매겨진 단계를 구축하여 스타일이 적용된 카운터를 만듭니다.

목차

문서 목차용 계층적 번호를 생성합니다.

사용자 지정 주문 목록

기본 목록 번호 매기를 사용자 지정 스타일이 적용된 카운터로 대체합니다.

Technical Guide

CSS 카운터는 세 가지 주요 속성을 사용합니다: counter-reset은 부모 요소에서 カウンター를 초기화하고, counter-increment는 자식 요소에서 카운터를 증가시키며, content 속성의 counter() 또는 counters()는 값을 표시합니다. counter-reset 속성은 새로운 카운터 인스턴스를 생성합니다: counter-reset: section. counter-increment는 이를 증가시킵니다: counter-increment: section. ::before 의사 요소의 content 속성에서 카운터를 표시합니다: content: counter(section). counter() 함수는 선택적 스타일 인수를接受합니다: counter(section, upper-roman). 중첩된 카운터의 경우 각 수준은 자신의 하위 カウンター를 재설정합니다. counters() 함수(주의: 's'가 있습니다)는 중첩된 범위를 처리합니다: counters(section, ".")는 "1.2.3" 표기법을 생성합니다. 사용 가능한 목록 스타일 유형에는 decimal, decimal-leading-zero, lower-alpha, upper-alpha, lower-roman, upper-roman, lower-greek 등이 있습니다. 여러 카운터를 정의하고 독립적으로 사용할 수 있습니다.

Tips & Best Practices

  • 1
    부모 요소에 counter-reset을 사용하고 자식 요소에 counter-increment를 사용하세요
  • 2
    중첩 번호(예: 1.1.1)와 같은 경우 counters() 함수와 구분 기호를 함께 사용하세요
  • 3
    사용자 지정 접두사 및 접미사 텍스트는 법률 문서에 적합한 카운터로 만듭니다
  • 4
    CSS 카운터는 목록이 아닌 모든 요소에서 작동합니다

Related Tools

Frequently Asked Questions

Q counter()와 counters()의 차이는 무엇인가요?
counter() 함수는 단일 카운터 값을 표시하고, counters() 함수는 중첩된 카운터 값과 구분 기호 문자열을 함께 표시합니다.
Q CSS 카운터를 모든 요소에서 사용할 수 있나요?
예, CSS 카운터는 <ol> 또는 <li> 요소가 아닌 모든 요소에서 작동합니다.
Q 카운터를 초기화하려면 어떻게 해야 하나요?
부모 요소에 counter-reset 속성을 적용하세요. 카운터는 0(첫 번째 증분으로 1이 됨)부터 시작됩니다.
Q 특정 번호에서 카운팅을 시작할 수 있나요?
예, section 5와 같은 counter-reset 속성을 사용하여 특정 번호(5)에서 시작합니다. 첫 번째 표시에서는 6이 됩니다.
Q CSS 카운터는 접근성이 좋나요?
CSS 카운터의 ::before 콘텐츠는 대부분의 스크린 리더에서 읽을 수 있지만 일관적이지 않을 수 있습니다. 가능하다면 의미 있는 HTML 목록을 사용하세요.

About This Tool

CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.