불릿 모양과 번호 스타일을 지정하는 속성
- list-style-type 속성
- 순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있음
- 순서 있는 목록에서는 번호 스타일을 지정할 수 있음
- list-style-type의 속성값 :
┌ disc : 채운 원 모양 ( ● )
├ circle : 빈 원 모양 ( ○ )
├ square : 채운 사각형 모양 ( ■ )
├ decimal : 1부터 시작하는 10진수 ( 1, 2, 3, ... )
├ decimal-leading-zero : 앞에 0이 붙는 10진수 ( 01, 02, 03, ... )
├ lower-roman : 로마 숫자 소문자 ( ⅰ, ⅱ, ⅲ, ... )
├ upper-roman : 로마 숫자 대문자 ( Ⅰ, Ⅱ, Ⅲ, ... )
├ lower-alpha (lower-latin) : 알파벳 소문자 ( a, b, c, ... )
├ upper-alpha (upper-latin) : 알파벳 대문자 ( A, B, C, ... )
└ none : 불릿이나 숫자를 없앰
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Exmaple</title>
<style>
.list1 {
list-style-type: none;
}
.list2 {
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<h1>예제</h1>
<ul class="list1">
<li>예시 1</li>
<li>예시 2</li>
<li>예시 3</li>
</ul>
<ol class="list2">
<li>예시 4</li>
<li>예시 5</li>
<li>예시 6</li>
</ol>
</body>
</html>-(결과) :
불릿 대신 이미지를 사용하는 속성
- list-style-image 속성
- 불릿을 원하는 이미지로 바꿀 수 있음
- 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋음
- 기본형 :
list-style-image: <url(이미지 파일 경로) | none
-(예시) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Exmaple</title>
<style>
ul {
list-style-image: url('images/dot.png');
}
</style>
</head>
<body>
<h1>예제</h1>
<ul>
<li>예시 1</li>
<li>예시 2</li>
<li>예시 3</li>
</ul>
</body>
</html>-(결과) :
목록을 들여 쓰는 속성
- list-style-position 속성
- 불릿이나 번호의 위치를 들여 쓸 수 있음
- 텍스트 문단 사이에 있는 목록을 더 쉽게 구분함
- 기본형 :
┌ inside : 불릿이나 번호를 기본 위치보다 안으로 들여 씀list-style-position: inside | outside;
└ outside : 기본값
-(예제) :
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Exmaple</title>
<style>
.inside {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>예제</h1>
<ul>
<li>예시 1</li>
<li>예시 2</li>
<li>예시 3</li>
</ul>
<ul class="inside">
<li>예시 4</li>
<li>예시 5</li>
<li>예시 6</li>
</ul>
</body>
</html>-(결과) :
목록 속성을 한꺼번에 표시하는 속성
- list-style 속성
- 위에서 사용한 list-style-type, list-style-image, list-style-position 속성을 한꺼번에 표시할 수 있음
-(예시) 1 : 불릿 없애기
ul {
list-style-type: none;
}↓
ul {
list-style: none;
}
-(예시) 2: 소문자 목록을 만들고 들여쓰기
ol {
list-style-type: lower-alpha;
list-style-position: inside;
}↓
ol {
list-style: lower-alpha inside;
}