CSS 카운터: 웹 페이지에 질서를 가져오다

안녕하세요, 미래의 웹 디자인 마법사 여러분! 오늘 우리는 CSS 카운터의 fascineting 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자, 저는 이 여정을 안내해 드리게 되어 기쁩니다. 믿어 주세요, 이 튜토리얼이 끝나면 여러분은 프로처럼 요소들을 카운트할 수 있을 것입니다!

CSS - Counters

CSS 카운터는 무엇인가요?

큰 파티를 준비하는 상상해 보세요 (아, 그 시절이었던 것은 저가 전職 코드 열정가가 된 이전의 일이었죠!). 손님들이 자리를 쉽게 찾을 수 있도록 테이블 번호를 매기고 싶습니다. CSS 카운터는 여러분의 디지털 파티 어시스턴트처럼 자동으로 웹 페이지 요소를 번호 매기는 것입니다. 멋지죠?

간단한 예제로 시작해 보겠습니다:

body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}

<h2>Introduction</h2>
<h2>Main Content</h2>
<h2>Conclusion</h2>

이 예제에서 우리는 CSS에게 다음을 지시하고 있습니다:

body의 시작에서 "section"이라는 카운터를 초기화합니다.
<h2> 태그를 만날 때마다 이 카운터를 증가시킵니다.
각 <h2> 앞에 "Section X: "을 추가합니다. 여기서 X는 현재 카운트입니다.

결과는 무엇이 될까요? 여러분의 <h2> 태그는 자동으로 번호 매김되어 "Section 1: Introduction", "Section 2: Main Content" 등으로 나타납니다. 마법 같은 것 같지만, 더 나은 이유는 여러분이 마법사라는 점입니다!

CSS 카운터 - 카운터 중첩

이제 한 단계 더 업그레이드 해보겠습니다. 교과서를 쓰고 있거나 (또는 정말로 긴 튜토리얼을 작성하고 있다면) 소제목이 필요할 수 있습니다. CSS 카운터는 여러분의 뒤를 지켜줍니다!

body {
counter-reset: chapter;
}

h1 {
counter-reset: section;
}

h1::before {
counter-increment: chapter;
content: "Chapter " counter(chapter) ". ";
}

h2::before {
counter-increment: section;
content: counter(chapter) "." counter(section) " ";
}

<h1>Getting Started with CSS</h1>
<h2>What is CSS?</h2>
<h2>CSS Syntax</h2>
<h1>Advanced CSS Techniques</h1>
<h2>Flexbox</h2>
<h2>Grid</h2>

이 코드는 중첩된 카운터 구조를 생성합니다. 우리는 새로운 장 (h1)을 만날 때마다 "section" 카운터를 초기화합니다. 결과는 다음과 같은 아름다운 자동 번호 매김 구조입니다:

Chapter 1. Getting Started with CSS 1.1 What is CSS? 1.2 CSS Syntax Chapter 2. Advanced CSS Techniques 2.1 Flexbox 2.2 Grid

마치 보이지 않는 작은 도서관 사서가 여러분의 콘텐츠를 정리하는 것처럼입니다!

CSS 카운터 - 역방향 카운터

occasionally, 우리는 거꾸로 카운트하고 싶을 수 있습니다. 큰 이벤트 (새로운 CSS 사양의 출시와 같은)에 대한 카운다운을 만들고 싶을 수 있습니다. CSS는 counter-increment 속성으로 여러분을 지원합니다:

ol {
counter-reset: my-awesome-counter 5;
}

li {
counter-increment: my-awesome-counter -1;
}

li::before {
content: counter(my-awesome-counter) ") ";
}

<ol>
<li>Launch the rocket</li>
<li>Deploy the parachute</li>
<li>Land safely</li>
<li>Celebrate</li>
<li>Write CSS</li>
</ol>

이렇게 하면 다음과 같은 카운다운 목록이 생성됩니다:

Launch the rocket
Deploy the parachute
Land safely
Celebrate
Write CSS

왜냐하면, CSS를 작성하는 것은 항상 최종 목표이기 때문입니다!

문법

이제 CSS 카운터의 문법을 분해해 보겠습니다. 걱정하지 마세요, 할머니의 비밀 레시피를 해독하는 것보다 쉽습니다!

속성	설명	예제
`counter-reset`	카운터를 초기화하거나 재설정합니다	`counter-reset: my-counter 0;`
`counter-increment`	카운터를 증가시키거나 감소시킵니다	`counter-increment: my-counter 1;`
`counter()`	카운터의 현재 값을 반환합니다	`content: counter(my-counter);`
`counters()`	중첩된 카운터를 결합합니다	`content: counters(my-counter, ".");`

CSS 카운터 - 관련 속성

CSS 카운터를 최대한 활용하려면 다음과 같은 관련 속성을 숙지하는 것이 좋습니다:

content: 이곳에서 마법이 일어납니다. 여러분은 카운터 값을 표시하는 데 사용합니다.

li::before {
content: counter(item) ". ";
}

list-style-type: 카운터와 직접적으로 관련이 없지만, 카운터와 함께 사용하면 정말 멋진 효과를 낼 수 있습니다.

ol {
list-style-type: none;
}

::before 및 ::after 가상 요소: 카운터와 함께 작업할 때 가장 친한 친구입니다. 이 요소는 요소 앞이나 뒤에 콘텐츠를 추가할 수 있게 해줍니다.

h2::before {
content: "Section " counter(section) ": ";
}

기억하세요, 연습이 완벽을 이루는 것입니다! 이 속성들을 다양한 방법으로 조합해 보세요. 누가 알랄까요? 여러분은 다음 큰 것을 발명할 수도 있습니다!

결론적으로, CSS 카운터는 구조화된 콘텐츠를 만들 때 시간과 노력을 절약할 수 있는 강력한 도구입니다. 마치 작은 로봇들이 여러분의 페이지를 번호 매김하는 것처럼입니다. 그리고 가장 중요한 점은, 그들이 피로하거나 커피 휴식을 요청하지 않는다는 것입니다!

그러므로 용감하게 카운트하시고, 여러분의 카운터가 항상 여러분의 편에 서기를 바랍니다!

Credits: Image by storyset