0Pricing
CSS Academy · 강의

::before를 사용한 CSS 카운터

CSS 카운터와 counter() 함수를 사용해 자동 번호 매기기 시스템을 만듭니다.

::before를 사용한 CSS 카운터은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

CSS 카운터란 무엇인가요?

CSS 카운터는 CSS가 관리하는 변수로, 값을 증가시키고 생성된 콘텐츠에 표시할 수 있습니다. JavaScript나 HTML에서 수동으로 번호를 관리하지 않고도 자동 번호 매기기를 구현할 수 있습니다.

counter-reset

counter-reset은 카운터를 초기화하거나 재설정합니다. 개수를 셀 항목을 포함하는 요소에 지정하십시오.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment는 적용될 때마다 카운터를 1씩 증가시킵니다. 반복되는 항목에 지정하십시오.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

content에서 counter() 함수 사용하기

의사 요소의 content 속성에서 counter(name)을 사용하여 현재 카운터 값을 표시합니다.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

스타일이 적용된 단계 카운터

JavaScript 없이 완전한 번호 매기기 단계 구성 요소를 만들 수 있습니다.

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

카운터 초기값

counter-reset에서 사용자 지정 시작 번호를 설정합니다.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

카운터 스타일

counter()의 두 번째 인수를 사용하여 목록 스타일 유형을 지정합니다.

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

counters()를 사용한 중첩 카운터

counters(name, separator)는 이름에 "s"가 붙은 함수로, "1.1", "1.2", "2.1"과 같은 중첩 번호를 만듭니다.

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

중첩 목록에서 재설정하기

각 중첩 ol은 카운터 범위를 상속합니다. counters() 함수는 전체 카운터 체인을 자동으로 사용합니다.

섹션 번호 매기기

긴 문서의 제목에 자동으로 번호를 매깁니다.

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

카운터를 사용한 목차

CSS 카운터는 과거에 목차와 서식이 적용된 문서에 사용되었습니다. 오늘날에는 JavaScript 프레임워크가 이를 처리하는 경우가 많지만, CSS 카운터는 여전히 순수 CSS로 구현할 수 있는 방법입니다.

빠른 확인

일치하는 각 요소에서 CSS 카운터를 증가시키는 속성은 무엇인가요?

정리

CSS 카운터를 사용하면 JavaScript 없이 자동 번호 매기기를 구현할 수 있습니다. 컨테이너에는 counter-reset을, 반복되는 항목에는 counter-increment를 사용하고, 의사 요소의 content에서 counter(name)으로 값을 표시하십시오. counters()는 구분 기호를 사용한 중첩 번호 매기기를 처리합니다.

자주 묻는 질문

“::before를 사용한 CSS 카운터” 강의는 무료인가요?

네 — “::before를 사용한 CSS 카운터” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“::before를 사용한 CSS 카운터”에서 뭘 배우나요?

CSS 카운터와 counter() 함수를 사용해 자동 번호 매기기 시스템을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“::before를 사용한 CSS 카운터” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. ::before 및 ::after 콘텐츠
  2. ::placeholder ::selection 및 ::marker
  3. ::before를 사용한 CSS 카운터
  4. 의사 요소를 사용한 장식 패턴
← CSS Academy(으)로 돌아가기