CSS => 카운터

통사론

카운터 세트 : [<카운터 이름> <정수>? ] + | 없음
카운터 재설정 : [<카운터 이름> <정수>? ] + | 없음
카운터 증가 : [<counter-name> <integer>? ] + | 없음
카운터 (<counter-name> [, <counter-style>]?)
카운터 (<counter-name>, <connector-string> [, <counter-style>])?

매개 변수

매개 변수	세부
카운터 이름	이것은 생성하거나 증가 시키거나 인쇄해야하는 카운터의 이름입니다. 개발자가 원하는대로 모든 사용자 정의 이름이 될 수 있습니다.
정수	이 정수는 카운터 이름 옆에 제공 될 때 카운터의 초기 값 ( `counter-set` , `counter-reset` 특성) 또는 카운터를 증가시켜야하는 값 ( `counter-increment` )을 나타내는 선택적 값입니다.
없음	이것은 3 가지 `counter-*` 속성 모두에 대한 초기 값입니다. 이 값을 `counter-increment` 사용하면 `counter-increment` 의 값이 영향을받습니다. 다른 두 개에이 값을 사용하면 카운터가 생성되지 않습니다.
카운터 스타일	이 값은 카운터 값을 표시해야하는 스타일을 지정합니다. `list-style-type` 속성이 지원하는 모든 값을 지원합니다. `none` 사용되지 않으면 카운터 값이 전혀 인쇄되지 않습니다.
커넥터 문자열	이 값은 두 개의 서로 다른 카운터 수준 ( "2.1.1"의 "."과 같은) 사이의 값 사이에 있어야하는 문자열을 나타냅니다.

비고

카운터는 CSS에서 새로운 주제가 아닙니다. CSS 레벨 2 사양 (개정판 1) 자체의 일부 였으므로 매우 높은 브라우저 지원을 제공합니다.

IE6 및 IE7을 제외한 모든 브라우저는 CSS 카운터를 지원합니다.

카운터 출력에 로마 숫자 스타일링 적용

CSS

body {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item:before {
  content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}

HTML

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

위의 예에서 개발자가 명시 적으로 카운터의 스타일을 지정 했으므로 카운터의 출력은 보통 1, 2, 3 대신 I, II, III (로마 숫자)로 표시됩니다.

CSS 카운터를 사용하여 각 항목 번호 지정

CSS

body {
  counter-reset: item-counter; /* create the counter */
}
.item {
  counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
  content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}

/* just for demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}

HTML

<div class='item'>
  <div class='item-header'>Item 1 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 2 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 3 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

위의 예는 페이지의 모든 "item"에 번호를 .item-header 헤더 앞에 항목의 번호를 추가합니다 ( .item-header 요소 :before 의사의 content 속성 사용). 이 코드의 라이브 데모는 여기에서 볼 수 있습니다 .

CSS 카운터를 사용하여 다중 레벨 번호 매기기 구현하기

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

위의 내용은 CSS 카운터를 사용한 다중 레벨 번호 매기기의 예입니다. 카운터의 자체 중첩 개념을 사용합니다. 자체 중첩은 요소에 이미 주어진 이름의 카운터가 있지만 다른 요소를 작성해야하는 경우 기존 카운터의 하위 항목으로 만듭니다. 여기서, 제 2 레벨 ul 이미 상속 list-item-number 부모로부터 카운터 그런데 자체 생성하는 list-item-number (아이에 대한 li ) 등 작성 list-item-number[1] 에 대한 (카운터 두 번째 수준) list-item-number[0] (첫 번째 수준의 카운터)에 중첩합니다. 따라서 다중 레벨 번호 매기기를 구현합니다.

출력은 사용하는 인쇄 counters() 대신의 함수 counter() 때문에 기능 counters() 함수의 출력을 인쇄 할 때 모든 상위 레벨 카운터 (부모)의 값 앞에하도록 설계된다.

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow