list-style-type
리스트에 사용하는 불릿기호를 변경시켜줄 때 사용
[표현법]
* 순서없는 목록(ul)
선택자 { list-style-type : disc / circle / square / none; }
* 순서있는 목록
선택자 {
list-style-type : decimal / decimal-leading-zero;
list-style-type : lower-alpha / upper-alpha;
list-style-type : lower-roman / upper-roman;
}
<body>
<h4>순서 없는 목록</h4>
<ul id="ul1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
<style>
#ul1{
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: none;
}
</style>
<body>
<h4>순서 있는 목록</h4>
<ol id="ol1">
<li>HTML</li>
<li>CSS</li>
<li>JAVAScript</li>
<li>jQuery</li>
</ol>
</body>
<style>
#ol1{
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: lower-roman;
list-style-type: upper-roman;
}
</style>
list-style-position
list-style-image
position : 불릿기호를 들여쓰기, 내여쓰기를 함.
image : 불릿기호 대신 이미지를 적용함.
[표현법]
선택자 {
list-style-position : inside / outside;
list-style-image : url("적용시키고자하는이미지의경로");
}
<body>
<h4> KH정보교육원 위치 안내</h4>
<ul id="ul2">
<li>강남본원 1관</li>
<li>강남본원 2관</li>
<li>강남본원 3관</li>
<li>당산지원</li>
<li>종로지원</li>
</ul>
<body>
<style>
#ul2{
list-style-position: inside;
list-style-image: url("resources/image/iconsample.png")
}
</style>
