CSS - 문제 미리보기
문제 1341
medium
중첩된 카운터를 구현할 때, 각 상위 섹션에서 하위 카운터를 초기화하려면?
```css
body {
counter-reset: section;
}
h1 {
_____: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
```
정답: C
• 중첩 카운터에서 `counter-reset`의 중요한 역할을 이해해야 합니다
• 계층적 번호 시스템 구현:
• `body`: 전체 섹션 카운터 초기화
• `h1`: 각 주 섹션마다 하위 섹션 카운터 초기화
• 결과: 1.1, 1.2, 1.3, 2.1, 2.2 형태의 번호
• 중첩 구조의 핵심 원리:
• 상위 요소에서 하위 카운터를 `counter-reset`
• 하위 카운터는 상위 요소가 나타날 때마다 0으로 재설정
• 이를 통해 독립적인 번호 체계 유지
• 실용적 활용:
• 문서 목차 자동 생성
• 법률 문서의 조항 번호
• 기술 문서의 단계별 안내
💡 학습 팁
이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.