CSS 기본教程

CSS 박스 모델

CSS3기본 튜토리얼

CSS 참조 가이드

CSS @규칙(RULES)

CSS Counter(카운터)

CSS counter 카운터는 변수와 유사합니다. 이들은 CSS에서 유지되며, 이 값은 CSS 규칙을 통해 사용 횟수를 추적할 수 있습니다. 주요 용도는, 지정된 규칙을 통해 노드 요소의 사용 횟수를 계산하는 것입니다.

CSS counter 카운터는 CSS 기반의 간단한 증가와 생성된 내용의 숫자를 표시하는 데 도움이 됩니다.

CSS 카운터 속성

CSS 카운터와 함께 사용되는 속성 목록如下：

counter-reset：카운터를 생성하거나 초기화하는 데 사용됩니다.
counter-increment：카운터 값을 증가시키기 위해 사용됩니다.
content：생성된 내용을 삽입하는 데 사용됩니다.
counter() 또는 counters() 함수:카운터 값을 추가하기 위해 사용됩니다.

주의: CSS 카운터를 사용하기 전에, 카운터 값을 요소에 추가하기 위해 counter를 사용해야 합니다.-reset을 통해 그것을 생성합니다.

CSS Counter 온라인 예제

예제를 들어, 페이지에 카운터를 생성하고, 다음 요소마다 카운터 값을 증가시키는 방법을 보여 줍니다.

다음 예제를 참조하세요：

예제

!DOCTYPE　html>　　
<html>　　　　　　
<head>　　
<style>　　
body {　　
　　　　counter-reset:　section;　　
}　　
h2::before {　　
　　　　counter-increment:　section;　　
　　　　content: "Section " counter(section) ": ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>CSS Counters 카운터 예제:</h1>　　
<h2>Java 튜토리얼</h2>　　
<h2>HTML 튜토리얼</h2>　　
<h2>CSS 튜토리얼</h2>　　
<h2>Oracle 튜토리얼</h2>　　
<p><strong>주의:</strong> IE8　브라우저에서 사용하려면 !DOCTYPE.</p>　　
</body>　　
</html>

시험해보세요‹/›

주의: 위의 예제에서, 주체 선택자에서 페이지에 카운터를 생성하고, 각 h2요소는 카운터 값을 증가시키고, 각 요소의 시작 부분에 " Section <카운터의 값>: " h2요소.

CSS 내장 카운터

카운터 내에 카운터를 생성할 수도 있습니다. 이를 카운터 내嵌套(중첩)라고 합니다. 예제를 통해 중첩 카운터를 설명해 보겠습니다.

다음 예제를 참조하세요：

예제

!DOCTYPE　html>　　
<html>　　
<head>　　
<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>　　
</head>　　
<body>　　
<h1>Java 튜토리얼:</h1>　　
<h2>Core Java 튜토리얼</h2>　　
<h2>Servlet 튜토리얼</h2>　　
<h2>JSP 가이드/h2>　　
<h2>Spring 가이드/h2>　　
<h2>Hibernate 가이드/h2>　　
　　
<h1>웹 기술 가이드:/h1>　　
<h2>HTML 가이드/h2>　　
<h2>CSS 가이드/h2>　　
<h2>jQuery 가이드/h2>　　
<h2>Bootstrap 가이드/h2>　　
　　
<h1>데이터베이스 가이드:/h1>　　
<h2>SQL 가이드/h2>　　
<h2>MySQL 가이드/h2>　　
<h2>PL/>SQL 가이드/h2>　　
<h2>Oracle 가이드/h2>　　
<p><strong>주의:</strong>　!DOCTYPE를 지정한 경우에만 IE8이 속성을 지원합니다.</p>　　
</body>　　
</html>

시험해보세요‹/›

주의:위 예제에서 해당 섹션에 카운터를 만들고 섹션 내에 이름이 subsection인 가로좌표를 만들 수 있음을 볼 수 있습니다.

다른 가로좌표 레벨의 가로좌표

너무 깊이 있는 카운터를 사용하여 프로필 목록을 만들 수 있습니다. 이는 다른 가로좌표 레벨의 카운터 사이에 문자열을 삽입하는 데 도움이 됩니다.

다음 예제를 참조하세요：

예제

!DOCTYPE　html>　　
<html>　　
<head>　　
<style>　　
ol　{　　
　　　　counter-reset:　section;　　
　　　　list-style-type:　none;　　
}　　
　　
li::before　{　　
　　　　counter-increment:　section;　　
　　　　content:　counters(section,".")　"　";　　
}　　
</style>　　
</head>　　
<body>　　
<h2>다른 가로좌표 레벨의 카운터</h2>　　
<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>　　
<p><strong>주의:</strong>　!DOCTYPE를 지정한 경우에만 IE8이 속성을 지원합니다.</p>　　
</body>　　
</html>

시험해보세요‹/›

CSS 레이아웃(웹 레이아웃)CSS 단어-wrap(자동 줄바꿈)