c32. CSS 카운터

CSS 카운터

인터넷의 태동

스텐포드 대학의 연구

국가별 도메인의 확정

국가 코드 최상위 도메인(Country Code Top-Level Domain, ccTLD)은 국제적으로 나라 또는 특정 지역 그리고 국제 단체 등을 나타내는 인터넷의 도메인 이름에 배당한 고유 부호를 일컬으며, 최상위 도메인으로 취급한다.

웹서비스의 발달

스타일 언어

스크립트 언어

모바일로 확대

아이폰의 등장

안드로이드 폰의 확장

CSS 카운터 (CSS counters) 는 변할 수 있는 숫자인 "변수" 와 같은 동작을 합니다.

이 변수 값은 CSS 규칙에 따라 사용할 때마다 숫자가 하나씩 증가합니다.

CSS 카운터 (CSS counters) 는 다음의 속성을 사용합니다.

counter-reset - 카운터를 생성하거나 초기화 합니다.
counter-increment - 카운터 값을 하나씩 증가 시킵니다.
content - 생성된 카운터를 삽입합니다.
counter() 또는 counters() 함수 - 카운터의 값을 태그에 추가해 줍니다.

CSS 카운터 (CSS counter) 를 사용하려면, 먼저 counter-reset 속성으로 생성하여야 합니다.

<h1>CSS 카운터</h1>

<style>
body {
counter-reset: section;
}

h3.test {
counter-reset: subsection;
}

h3.test::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}

h4::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
</style>
<h3 class="test">인터넷의 태동</h3>
<h4>스텐포드 대학의 연구</h4>
<h4>국가별 도메인의 확정</h4>
<p>국가 코드 최상위 도메인(Country Code Top-Level Domain, ccTLD)은 국제적으로 나라 또는 특정 지역 그리고 국제 단체 등을 나타내는 인터넷의 도메인 이름에 배당한 고유 부호를 일컬으며, 최상위 도메인으로 취급한다.</p>

<h3 class="test">웹서비스의 발달</h3>
<h4>스타일 언어</h4>
<h4>스크립트 언어</h4>

<h3 class="test">모바일로 확대</h3>
<h4>아이폰의 등장</h4>
<h4>안드로이드 폰의 확장</h4>

위 예제 에서는 페이지 선택자 (body selector) 에서 카운터를 생성하고, <h3> 태그 및 <h4> 태그가 반복될 때 마다,

가상-태그 (::before) 로 각 태그 앞에 Section 번호를 추가 하였습니다.

이상으로 총 25강에 걸친 CSS 과정을 마치고, 다음 장에서는 자바스크립트에 대해 과정을 진행합니다.

---

[광고] Udemy 동영상 강의로 보기