CSS의 counter-increment속성을 사용한 목록 번호 매기기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>counter-increment</title>
<style>
body{font-size:1.5em;}
ul{list-style:none; margin:0; padding:0;}
</style>
</head>
<body>
<h1>커피</h1>
<ul>
<li>첫번째 목록</li>
<li>두번째 목록</li>
<li>세번째 목록</li>
<li>네번째 목록</li>
</ul>
</body>
</html>
기본적인 형태의 ul목록입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>counter-increment</title>
<style>
body{font-size:1.5em;}
ul{list-style:none; margin:0; padding:0; counter-reset:list-number;} /*list-number의 번호 초기화*/
ul li{counter-increment:list-number;} /*li선택자의 counter-increment명을 'list-number'라고 명명*/
ul li:before{content:counter(list-number);} /*list-number를 count하여 가상선택자before의 content로 담아준다.*/
</style>
</head>
<body>
<h1>커피</h1>
<ul>
<li>아메리카노</li>
<li>카페라테</li>
<li>카푸치노</li>
</ul>
</body>
</html>
counter-increment를 통하여 위와같이 번호가 붙은 결과를 얻을 수 있습니다.
위의 예제를 활용하여 넘버링이 중첩된 형태의 커피숍 메뉴판을 만들어보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>counter-increment</title>
<style>
body{font-size:1.5em; counter-reset:title;}/*h1의 상위요소인 body에서 title의 번호 초기화*/
h1{font-size:1.5em; counter-increment:title;}/*h1태그의 counter-increment명을 'title'이라고 명명*/
h1:before{content:counter(title)"."; padding-right:5px; color:orange}/*쌍따옴표 " "안에 문자를 입력하면 "1."와같이 출력한다.*/
ul{list-style:none; margin:0; padding:0; counter-reset:list-number;} /*list-number의 번호 초기화*/
ul li{counter-increment:list-number; line-height:2} /*li선택자의 counter-increment명을 'list-number'라고 명명*/
ul li:before{content:counter(list-number); /*list-number를 count하여 가상선택자before의 content로 담아준다.*/
display:inline-block; text-align:center; line-height:1.2; width:30px; height:30px; border-radius:50%; color:#fff; margin-right:10px; background:brown;}
</style>
</head>
<body>
<h1>커피</h1>
<ul>
<li>아메리카노</li>
<li>카페라테</li>
<li>카푸치노</li>
</ul>
<h1>주스</h1>
<ul>
<li>딸기주스</li>
<li>오렌지주스</li>
<li>포도주스</li>
</ul>
</body>
</html>
h1태그에도 counter-increment 요소를 적용하여 간단한 메뉴판 예시를 만들어보았습니다.
위의 요소에서 중요한 포인트는 content:counter(title)"."와같이 쌍따옴표 영역에 문자를 입력하면 counter함수와 문자를 연결해서 쓸 수 있습니다. JS의 {함수+"문자"}와 유사한 형태입니다.
마지막으로 h1태그의 'title'함수와 li태그의 'list-number'함수를 중첩하여 사용하는 방법을 보여드리겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>counter-increment</title>
<style>
body{font-size:1.5em; counter-reset:title;}/*h1의 상위요소인 body에서 title의 번호 초기화*/
h1{font-size:1.5em; counter-increment:title;}/*h1태그의 counter-increment명을 'title'이라고 명명*/
h1:before{content:counter(title)"."; padding-right:5px; color:orange}/*쌍따옴표 " "안에 문자를 입력하면 "1."와같이 출력한다.*/
ul{list-style:none; margin:0; padding:0; counter-reset:list-number;} /*list-number의 번호 초기화*/
ul li{counter-increment:list-number; line-height:2} /*li선택자의 counter-increment명을 'list-number'라고 명명*/
ul li:before{content:counter(title)"-"counter(list-number);/*h1의 'title'과 문자"-" li의 'list-number'를 연결*/
display:inline-block; text-align:center; line-height:1.2; width:60px; height:30px; border-radius:50%; color:#fff; margin-right:10px; background:brown;}
</style>
</head>
<body>
<h1>커피</h1>
<ul>
<li>아메리카노</li>
<li>카페라테</li>
<li>카푸치노</li>
</ul>
<h1>주스</h1>
<ul>
<li>딸기주스</li>
<li>오렌지주스</li>
<li>포도주스</li>
</ul>
</body>
</html>
위와같이 content영역에 'title'함수와 'list-number'함수를 동시에 넣어 중첩할 수 있습니다.
conunterIncrement.html첨부한 예제를 분석해보면 이해하기 쉬울거라고 생각됩니다.
'CSS > CSS3' 카테고리의 다른 글
| CSS 말줄임표 (순수 CSS) (0) | 2018.01.26 |
|---|---|
| SVG 파일의 CSS 애니메이션 (0) | 2018.01.24 |