소개
이 랩에서는 CSS 카운터 (CSS counters) 를 사용하여 사용자 정의 목록 카운터를 만드는 방법을 살펴봅니다. 특히, 카운터 변수를 초기화하고 증가시키는 방법과 counters() 함수를 사용하여 이러한 변수의 값을 표시하는 방법을 배웁니다. 이 랩을 마치면 CSS 를 사용하여 중첩된 목록 카운터를 만들고 목록 요소의 모양을 사용자 정의할 수 있게 됩니다.
이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.
카운터 (Counter)
index.html 및 style.css는 이미 VM 에 제공되어 있습니다.
중첩된 목록 요소를 고려하는 사용자 정의 목록 카운터를 만들려면 다음 단계를 따르세요.
counter-reset을 사용하여 변수 카운터 (기본값0) 를 초기화합니다. 이름은 속성의 값 (예:counter) 입니다.- 각 계산 가능한 요소 (예: 각
<li>) 에 대해 변수 카운터에counter-increment를 사용합니다. - 각 계산 가능한 요소 (예: 각
<li>) 에 대한::before가상 요소의content의 일부로 각 변수 카운터의 값을 표시하려면counters()를 사용합니다. 여기에 전달된 두 번째 값 ('.') 은 중첩된 카운터의 구분 기호 역할을 합니다.
다음은 HTML 코드의 예입니다.
<ul>
<li>List item</li>
<li>List item</li>
<li>
List item
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</li>
</ul>
다음은 사용자 정의 목록 카운터를 적용하는 CSS 코드입니다.
ul {
counter-reset: counter;
list-style: none;
}
li::before {
counter-increment: counter;
content: counters(counter, ".") " ";
}
오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
요약
축하합니다! 카운터 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.