CSS Counters
- description : CSS Counters
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-05
CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있으면서, 사용된 횟수를 추적하기 위해 CSS에 의해 유지되는 “변수”입니다
카운터를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다
Automatic Numbering With Counters
CSS 카운터는 “변수”와 같습니다. 변수 값은 CSS 규칙에 의해 증가될 수 있습니다 (사용되는 횟수를 추적함).
CSS 카운터로 작업하기 위해 다음 속성을 사용합니다.
counter-reset- 카운터를 만들거나 재설정합니다.counter-increment- 카운터 값을 증가시킵니다.content- 생성된 콘텐츠를 삽입합니다.counter()또는counters()함수 - 요소에 카운터 값을 추가합니다.
CSS 카운터를 사용하려면, 먼저 counter-reset으로 생성해야 합니다.
다음 예제는 페이지 (바디 셀렉터에서)에 대한 카운터를 만든 다음, 각 <h2> 요소에 대한 카운터 값을 증가시키고
각 <h2> 요소의 시작 부분에 “Section <value of the counter> :“를 추가합니다.
<!DOCTYPE html> <html> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "Section "counter(section)":"; } </style> <head> </head> <body> <h1>Using CSS Counters:</h1> <h2>HTML Tutorial</h2> <h2>CSS Tutorial</h2> <h2>JavaScript Tutorial</h2> </body> </html>
Nesting Counters
다음 예제에서는 페이지 (섹션)에 대해 하나의 카운터와 각 <h1> 요소 (하위 섹션)에 대해 하나의 카운터를 만듭니다.
“섹션”카운터는 “섹션 <value of the section counter>“이 있는 각 <h1> 요소에 대해 계산되고
“subsection(하위 섹션)“카운터는 ”<value of the section counter>이 있는 각 <h2> 요소에 대해 계산됩니다.<value of the subsection counter>”:
<style> body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "Section "counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "."counter(subsection) " "; } </style>
카운터의 새 인스턴스가 자식 요소에서 자동으로 생성되기 때문에, 카운터는 개요목록(outlines lists)을 만드는 데 유용할 수 있습니다.
여기서 우리는 counters() 함수를 사용하여, 서로 다른 레벨의 중첩 카운터 사이에 문자열을 삽입합니다.
<!DOCTYPE html> <html> <head> <style> ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section, ".") " "; } </style> </head> <body> <ol> <li>Item</li> <li>Item <ol> <li>item</li> <li>item</li> <li>item <ol> <li>item</li> <li>item</li> <li>item</li> </ol> </li> <li>item</li> </ol> </li> <li>item</li> <li>item</li> </ol> <ol> <li>item</li> <li>item</li> </ol> </body> </html>
Result
CSS Counter Properties
| Property | Description |
| content | ::before와 ::after 가상 요소와 함께 사용하여 생성된 콘텐츠를 삽입합니다. |
|---|---|
| counter-increment | 하나 이상의 카운터 값을 증가시킵니다. |
| counter-reset | 하나 이상의 카운터 값을 생성하거나 재설정합니다. |
