1. list-style-type 속성 - 목록과 불릿과 번호 스타일 지정
속성 값 |
설명 |
disc |
채운 원(●) |
circle |
빈 원(○) |
square |
채운 사각형(■) |
none |
불릿 없애기 |
decimal |
1로 시작하는 십진수 |
decimal-leading-zero |
앞에 0이 붙는 십진수 |
lower-roman |
소문자 로마 숫자 |
upper-roman |
대문자 로마 숫자 |
lower-alpha 또는 lower-latin |
소문자 알파벳 |
upper-alpha 또는 upper-latin |
대문자 알파벳 |
armenian |
아르메니아 숫자 |
georgian |
조지 왕조시대의 숫자 |
2. list-style-image 속성 - 불릿 대신 이미지 넣기
<style>
ul {
list-style-image:url('images/dot.png'); /* 불릿으로 사용할 이미지 */
}
</style>
3. list-style-positon 속성 - 목록에 들여 쓰는 효과
list-style-position : inside | outside;
4. list-style 속성 - 목록 속성 한꺼번에 표시
list-style-type과 list-style-positon, list-style-image 속성을 한꺼번에 표시할 수 있습니다.
<출처> Do it! HTML5+CSS3 웹 표준의 정석
'IT > CSS' 카테고리의 다른 글
| [CSS 입문] 그러데이션 효과 (0) | 2017.04.11 |
|---|---|
| [CSS 입문] 배경 색과 배경 이미지 (0) | 2017.04.10 |
| [CSS 입문] 문단 스타일 (0) | 2017.04.05 |
| [CSS 입문] 텍스트 스타일 (0) | 2017.04.04 |
| [CSS 입문] 글꼴 관련 스타일 (2) | 2017.04.03 |