• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기
Front-end/CSS(SASS,SCSS)

[CSS]숫자를 자동으로 증가, 감소시키기 위해 'counters' 사용

by 빽짱구 2024. 6. 26.
본문글자

 

CSS 카운터(Counter)는 CSS에서 숫자를 자동으로 증가시키거나 감소시키기 위해 사용하는 기능입니다. 이를 통해 목록 항목이나 페이지 번호와 같은 요소에 번호를 매길 수 있습니다. CSS 카운터는 counter-reset, counter-increment, content 속성을 사용하여 설정하고, 스타일을 적용할 수 있습니다.

CSS 카운터 설정 방법

  1. counter-reset: 카운터의 초기 값을 설정합니다.
  2. counter-increment: 카운터의 값을 증가시킵니다.
  3. content: ::before 또는 ::after 의사 요소에서 카운터 값을 표시합니다.

예제

1. 기본 사용법

다음 예제는 번호가 매겨진 목록 항목을 생성합니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Counters Example</title>
<style>
  /* 카운터 초기화 */
  ol {
    counter-reset: item;
  }

  /* 카운터 증가 및 표시 */
  ol li {
    counter-increment: item;
    list-style-type: none;
  }

  ol li::before {
    content: counter(item) ". ";
    font-weight: bold;
  }
</style>
</head>
<body>

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

</body>
</html>

 

이 예제에서는 ol 요소에서 카운터를 초기화하고, li 요소에서 카운터를 증가시키며, ::before 의사 요소를 사용하여 각 항목 앞에 카운터 값을 표시합니다.

2. 중첩된 카운터

중첩된 목록의 경우, 여러 카운터를 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nested CSS Counters</title>
<style>
  /* 첫 번째 카운터 초기화 */
  ol {
    counter-reset: section;
  }

  /* 첫 번째 카운터 증가 및 표시 */
  ol > li {
    counter-increment: section;
    list-style-type: none;
  }

  ol > li::before {
    content: counter(section) ". ";
    font-weight: bold;
  }

  /* 두 번째 카운터 초기화 및 중첩 카운터 증가 */
  ol ol {
    counter-reset: subsection;
  }

  ol ol > li {
    counter-increment: subsection;
  }

  ol ol > li::before {
    content: counter(section) "." counter(subsection) " ";
    font-style: italic;
  }
</style>
</head>
<body>

<ol>
  <li>Section 1
    <ol>
      <li>Subsection 1.1</li>
      <li>Subsection 1.2</li>
    </ol>
  </li>
  <li>Section 2
    <ol>
      <li>Subsection 2.1</li>
      <li>Subsection 2.2</li>
    </ol>
  </li>
</ol>

</body>
</html>

 

이 예제에서는 중첩된 목록 항목에 대해 두 개의 카운터(section과 subsection)를 사용하여 번호를 매깁니다. 첫 번째 카운터는 ol 요소에서 초기화되고 li 요소에서 증가하며, 두 번째 카운터는 중첩된 ol 요소에서 초기화되고 중첩된 li 요소에서 증가합니다.

 

See the Pen Untitled by webmini (@webmini) on CodePen.

요약

CSS 카운터는 목록 항목이나 다른 요소에 번호를 매기는 데 유용합니다. counter-reset, counter-increment, content 속성을 사용하여 카운터를 설정하고 표시할 수 있으며, 중첩된 구조에서도 여러 카운터를 사용하여 복잡한 번호 매김을 할 수 있습니다.

 

제 블로그 목차를 참고하시면 동일한 방식입니다.

728x90

'Front-end/CSS(SASS,SCSS)'의 다른글

  • 현재글[CSS]숫자를 자동으로 증가, 감소시키기 위해 'counters' 사용