counter()와 ::before를 이용한 <ol> 꾸미기
2023. 2. 27. 11:56
counter() 함수는 쉽게 말해서 숫자를 세주는 함수이다.
<ol>의 리스트 타입을 none으로 초기화하고 counter() 함수와 ::before 가상 요소를 사용하면 <li>태그의 마커를 꾸밀 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
ol {
counter-reset: my-counter;
list-style-type: none;
}
li::before {
counter-increment: my-counter;
content: counter(my-counter);
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #fc9797;
margin: 0 5px 5px 0;
font-size: 12px;
color: #fc9797;
text-align: center;
line-height: 15px;
vertical-align: 1px;
}
</style>
</head>
<body>
<ol>
<li>불</li>
<li>물</li>
<li>바람</li>
<li>번개</li>
<li>풀</li>
<li>얼음</li>
<li>바위</li>
</ol>
</body>
</html>
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Counter_Styles/Using_CSS_counters
CSS 카운터 사용하기 - CSS: Cascading Style Sheets | MDN
CSS counters를 사용하면 문서에서의 위치에 따라 콘텐츠의 모양을 조정할 수 있습니다. 예를 들어, counters를 사용해 웹페이지의 제목에 자동으로 번호를 매길 수 있습니다. Counters는 요소가 몇 번이
developer.mozilla.org
'공부 > HTML과 CSS' 카테고리의 다른 글
| <li>태그를 가로로 배열하기 (0) | 2023.02.28 |
|---|---|
| 체크 박스, 라디오 박스 텍스트와 높이 맞추기 (0) | 2023.02.27 |
| 셀렉트 박스에 플레이스 홀더 적용하기 (0) | 2023.02.27 |
| @charset (0) | 2023.02.16 |
| 뷰포트의 이해 (0) | 2023.01.05 |
