CSS 카운터는 CSS 규칙에 의해 값이 증가할 수 있는 CSS에 의해 유지되는 "변수"이다(몇 번 사용되었는지 추적하기 위해). 카운터를 사용하여 문서에서 내용의 배치를 기반으로 내용의 모양을 조정할 수 있다.
Automatic numbering with counters
CSS 카운터는 "변수"와 같다. 변수 값은 CSS 규칙(사용 횟수를 추적하는)에 의해 증가할 수 있다.
CSS 카운터를 사용하기 위해 다음 속성을 사용한다:
- counter-reset - 카운터를 만들거나 재설정합니다
- counter-increment - 카운터 값을 증분합니다
- content - 생성된 내용 삽입
- counter() 또는 counters() 함수 - 요소에 카운터 값을 추가합니다
CSS 카운터를 사용하려면 먼저 counter-reset 을 사용하여 생성해야 합니다.
다음 예제에서는 (본체 선택기에서) 페이지에 대한 카운터를 생성한 다음 각 <h2> 요소에 대한 카운터 값을 증분하고 각 <h2> 요소의 시작에 "섹션 <카운터의 값>:"을 추가한다:
| <!DOCTYPE html> <html> <head> <style> body { counter-reset: section; } h2::before { counter-increment: section; content: "섹션 " counter(section) ": "; } </style> </head> <body> <h1>CSS Counters</h1> <h2>HTML 튜토리얼</h2> <h2>CSS 튜토리얼</h2> <h2>JavaScript 튜토리얼</h2> <h2>Python 튜토리얼</h2> <h2>SQL 튜토리얼</h2> </body> </html> |
h2 요소에 ::before 에 "섹션 " counter(section)": 을 정의하여 h2 요소 앞에 "섹션 " section 변수를 표시하도록 스타일을 정의하였고, 위의 코그를 실행한 결과는 아래 그림과 같다.
section 변수는 body요소에서 counter-reset: section을 통해 초기화된다.
CSS Nesting counting
다음 예제에서는 페이지(섹션)에 대해 하나의 카운터를 생성하고 각 <h1> 요소(섹션)에 대해 하나의 카운터를 생성한다. "섹션" 카운터는 "섹션 <섹션 카운터의 값>"으로 각 <h1> 요소에 대해 카운트되고 "섹션" 카운터는 "<섹션 카운터의 값>으로 각 <h2> 요소에 대해 카운트된다. <섹션 카운터의 값>:
| <!DOCTYPE html> <html> <head> <style> body { counter-reset: section; } h1 { counter-reset: subsection; } h1::before { counter-increment: section; content: "섹션 " counter(section) ". "; } h2::before { counter-increment: subsection; content: counter(section) "." counter(subsection) " "; } </style> </head> <body> <h1>HTML/CSS 튜토리얼</h1> <h2>HTML</h2> <h2>CSS</h2> <h2>Bootstrap</h2> <h2>W3.CSS</h2> <h1>Scripting 튜토리얼</h1> <h2>JavaScript</h2> <h2>jQuery</h2> <h2>React</h2> <h1>Programming 튜토리얼</h1> <h2>Python</h2> <h2>Java</h2> <h2>C++</h2> </body> </html> |
section, subsection 두개의 변수를 활용하는데
body 요소에 counter-reset section 으로 section 변수를 초기화하고
h1 요소에 counter-reset subsection 으로 subsection 변수를 초기화하고
h1::before 에 counter-increment section(section변수를 1증가), content "섹션 " counter(section) 를 정의하여 예로 "섹션 1. "을 표시하게 될 것이다.
h2::before에 counter-increment subsection(subsection변수를 1증가), content counter(section)"."counter(subsection)" "를 정의하여 예로 "1.1"을 표시하게 될 것이다.
위의 코드를 실행한 결과는 아래 그림과 같다.
카운터의 새 인스턴스가 하위 요소에 자동으로 생성되기 때문에 카운터는 아웃라인 목록을 만드는 데 유용할 수도 있다. 여기서는 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>항목</li> <li>항목 <ol> <li>항목</li> <li>항목</li> <li>항목 <ol> <li>항목</li> <li>항목</li> <li>항목</li> </ol> </li> <li>항목</li> </ol> </li> <li>항목</li> <li>항목</li> </ol> <ol> <li>항목</li> <li>항목</li> </ol> </body> </html> |
ol 요소에는 counter-reset section으로 section 변수를 초기화하고
li::before 요소는 counter-increment: section section값을 1 증가시키고 content: counters(section,".")" " 으로 counter() 함수로 자동으로 인덱스가 추가된다.
위의 코드를 실행한 결과는 아래 그림과 같다.
CSS counter 속성
| 속성 | 설명 |
| content | 생성된 내용을 삽입하기 위해 ::before 및 ::fore 의사 요소와 함께 사용합니다 |
| counter-increment | 하나 이상의 카운터 값을 증분합니다 |
| counter-reset | 하나 이상의 카운터를 만들거나 재설정합니다 |
| counter() | 지정된 카운터의 현재 값을 반환합니다 |
지금까지 CSS에서 counter를 활용한 예제를 실습해보았다.
꼭 손으로 눈으로 머리로 학습하며 실습하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS Specificity (0) | 2023.09.12 |
|---|---|
| CSS Units (0) | 2023.09.11 |
| CSS Website Layout (0) | 2023.09.09 |
| CSS textarea, select menu, input button etc (0) | 2023.09.08 |
| CSS Form - input (0) | 2023.09.07 |
댓글