CSS Counters

CSS counters are "variables" maintained by CSS whose values can be incremented by CSS rules (to track how many times they are used). Counters let you adjust the appearance of content based on its placement in the document.

 

css counters는 css 규칙에 의해서 증가되어질수 있는 css 변수 변수로 유지되어지는 변수다.

카운터는 document 에 위치에 근거해서 내용의 외관을 적용하게 한다?

 

Automatic Numbering With Counters

CSS counters are like "variables". The variable values can be incremented by CSS rules (which will track how many times they are used).

To work with CSS counters we will use the following properties:

• counter-reset - Creates or resets a counter
• counter-increment - Increments a counter value
• content - Inserts generated content
• counter() or counters() function - Adds the value of a counter to an element

To use a CSS counter, it must first be created with counter-reset.

The following example creates a counter for the page (in the body selector), then increments the counter value for each <h2> element and adds "Section <value of the counter>:" to the beginning of each <h2> element:

 

css 카운터는 변수같은 것이다.

바뀔수 있는 변수는 css 규칙에 의해서 증가되어진다.

 

css 카운터가 작동하기 위해선 우리는 다음의 따라오는 속성들 사용할것이다.

counter-reset - 카운터를 만들거나 리셋

counter-increment - 변수 증가

content - 만들어진 내용물 삽입

counter() counters() - 카운터 변수를 요소에 추가

 

css 카운터를 사용하기 위해선 첫번쨰로 counter-reset으로 만들어져야한다.

다음의 예제는 카운터를 만든다음에 각각의 h2 요소에 카운터를 증가시킨다.

그리고 각각의 h2 요소 앞에 "Section <value of the counter>:" 를 추가한다.

 

Nesting Counters

The following example creates one counter for the page (section) and one counter for each <h1> element (subsection). The "section" counter will be counted for each <h1> element with "Section <value of the section counter>.", and the "subsection" counter will be counted for each <h2> element with "<value of the section counter>.<value of the subsection counter>":

 

중첩된 카운터

다음의 예제는 페이지에 하나이상의 카운터를 만드는 예제이다.