위키
포럼
도구
바뀐글
랜덤

"CSS list-style-type 속성"의 두 판 사이의 차이

7번째 줄: 7번째 줄:
<source lang='html5'>
<source lang='html5'>
<style>
<style>
ul { float:left; }
ul { float: left; }
hr { clear: both; }
 
ul:nth-of-type(1) { list-style-type: disc; }
ul:nth-of-type(1) { list-style-type: disc; }
ul:nth-of-type(2) { list-style-type: none; }
ul:nth-of-type(2) { list-style-type: none; }
40번째 줄: 42번째 줄:
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<hr>


<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
48번째 줄: 52번째 줄:
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<hr>


<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
57번째 줄: 63번째 줄:
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
</source>
</source>
<jsfiddle height='400'>bygjs9c0</jsfiddle>
<jsfiddle height='450'>key0wax9</jsfiddle>


==참고 자료==
==참고 자료==

2015년 8월 16일 (일) 20:41 판

1 개요

CSS list-style-type Property
CSS list-style-type 속성
  • 목록(ul, ol)의 항목 마커를 지정하는 CSS 속성

2 예시

<style>
ul { float: left; }
hr { clear: both; }

ul:nth-of-type(1) { list-style-type: disc; }
ul:nth-of-type(2) { list-style-type: none; }
ul:nth-of-type(3) { list-style-type: circle; }
ul:nth-of-type(4) { list-style-type: square; }
ul:nth-of-type(5) { list-style-type: decimal; }
ul:nth-of-type(6) { list-style-type: decimal-leading-zero; }
ul:nth-of-type(7) { list-style-type: armenian; }

ul:nth-of-type(8) { list-style-type: cjk-ideographic; }
ul:nth-of-type(9) { list-style-type: georgian; }
ul:nth-of-type(10) { list-style-type: hebrew; }
ul:nth-of-type(11) { list-style-type: hiragana; }
ul:nth-of-type(12) { list-style-type: hiragana-iroha; }
ul:nth-of-type(13) { list-style-type: katakana; }
ul:nth-of-type(14) { list-style-type: katakana-iroha; }

ul:nth-of-type(15) { list-style-type: lower-alpha; }
ul:nth-of-type(16) { list-style-type: lower-greek; }
ul:nth-of-type(17) { list-style-type: lower-latin; }
ul:nth-of-type(18) { list-style-type: lower-roman; }
ul:nth-of-type(19) { list-style-type: upper-alpha; }
ul:nth-of-type(20) { list-style-type: upper-latin; }
ul:nth-of-type(21) { list-style-type: upper-roman; }
</style>

<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>

<hr>

<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>

<hr>

<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>
<ul><li>한놈</li><li>두시기</li><li>석삼</li></ul>

3 참고 자료

원본 주소 "https://zetawiki.com/w/index.php?title=CSS_list-style-type_속성&oldid=142434"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}