더보기
CSS의 목록 관련 스타일에 대하여 알아보자
<list ~ 로 시작하는 코드>
list-style-type: 불릿기호를 변경시켜 줄 때 사용
[ 표현법 ]
* 순서 없는 목록 (ul)
선택자 {
list-style-type: disc/circle/square/none; 👉🏻 기본값은 disc
}
* 순서 있는 목록 (ol)
선택자 {
list-style-type : decimal/decimal-leading-zero; 👉🏻 기본값은 decimal
list-style-type : lower-alpha/upper-alpha;
list-style-type : lower-roman/upper-roman;
}
👉🏻 순서 없는 목록
![]() |
![]() |
![]() |
![]() |
기본값 | circle, 빈 동그라미 | square, 네모 | none |
<style>
#ul1 {
list-style-type : none;
}
</style>
<body>
<h4>순서 없는 목록</h4>
<!-- ul>#ul1>li*4 + Enter -->
<ul id="ul1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
</body>
👉🏻 순서 있는 목록
![]() |
![]() |
decimal | decimal-leading-zero |
![]() |
![]() |
lower-alpha | upper-alpha |
![]() |
![]() |
lower-roman | upper-roman |
<style>
#ol1 {
list-style-type : upper-roman;
}
</style>
<h4>순서 있는 목록</h4>
<!-- ol>#ol1>li*4 + Enter -->
<ol id="ol1">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</li>
</ol>
list-style-position : 불릿 기호의 위치를 조정할 때 사용
[ 표현법 ]
선택자 {
list-style-position : inside/outside; 👉🏻 기본값은 outside
list-style-image : url("이미지의경로");
}
inside 👉🏻 불렛기호 들여쓰기
iconsample.png
<style>
#ul2 {
list-style-position : inside;
list-style-image : url("resources/image/iconsample.png")
}
</style>
<h4>KH 정보교육원 위치 안내</h4>
<!-- ul#ul2>li*5 -->
<ul id="ul2">
<li>강남본원 1관</li>
<li>강남본원 2관</li>
<li>강남본원 3관</li>
<li>당산지원</li>
<li>종로지원</li>
</ul>