HTML CSS counter-increment 속성

선택의 각 인스턴스에 대한 카운터 증가를 정의합니다.

속성 값: (identifier),(integer),none,inherit

Tip: CSS 몇가지 방법
1. 임베디드 스타일 시트(Embedded Style Sheet) : 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) : 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) : HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.

CSS counter-increment 속성 값

(identifier) :

(integer) : 증가치를 지정합니다. 양수, 0, 음수 지정 초기값을 지정함

none : 증가치를 지정하지 않음

inherit : 부모(상위)부터 상속받음

1. CSS counter-increment : 링크타입 스타일 시트(External Style Sheet)

링크타입 스타일 시트(External Style Sheet)은 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 태그로 연결하는 방법입니다.

					
					
 
[style.css] 이라는 이름을 가진 별도의 파일입니다.


<style.css> 
 body{
   counter-reset: chapter 0;
 }
 h1{
   counter-reset: sub-chapter 0;
 }
 h1:before{
   counter-increment: chapter;
   content: "Chapter " counter(chapter) ". ";
 }
 h2:before{
   counter-increment: sub-chapter;
   content: counter(chapter) "." counter(sub-chapter) ": ";
 }
 

별도의 이름을 가진 웹페이지입니다.(예 : sample.html)
HTML CSS font-size 속성의 예제 샘플입니다

<body>
 <h1>Botanical information </h1>
  <h2>Wild ancestors</h2>
  <h2>Genome</h2>

  <h1>Cultural aspects </h1>
  <h2>Germanic paganism</h2>
  <h2>Greek mythology</h2>
</body>

CSS counter-increment 예제 : 임베디드 스타일 시트(Embedded Style Sheet)

임베디드 스타일 시트(Embedded Style Sheet)은 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head>태그 사이에 Style Sheet를 지정하는 방법입니다.

					
					
<head>
         

<style type="text/css"> <!--  
 body{
   counter-reset: chapter 0;
 }
 h1{
   counter-reset: sub-chapter 0;
 }
 h1:before{
   counter-increment: chapter;
   content: "Chapter " counter(chapter) ". ";
 }
 h2:before{
   counter-increment: sub-chapter;
   content: counter(chapter) "." counter(sub-chapter) ": ";
 }
 
 --> </style>
</head>

<body>
 <h1>Botanical information </h1>
  <h2>Wild ancestors</h2>
  <h2>Genome</h2>

  <h1>Cultural aspects </h1>
  <h2>Germanic paganism</h2>
  <h2>Greek mythology</h2>
</body>

CSS counter-increment 예제 : 인라인스타일(Inline Styles)

인라인스타일(Inline Styles)은 HTML 웹페이지 내에서 직접 지정하는 방법입니다.

<div style="counter-increment : 여기에 속성 값을 넣습니다;">HTML CSS counter-increment속성의 인라인스타일(Inline Styles) 예제 샘플입니다.<div>

저작자표시 비영리 변경금지 (새창열림)