list-style-type : 불릿 모양과 번호 스타일을 지정
순서 없는 목록의 경우 목록 앞에 다양한 불릿 모양을 넣을 수 있고,
순서 목록에서는 번호 스타일을 지정할 수 있다.
| 종류 | 설명 | 예시 |
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3, ... |
| decimal-leading-zero | 앞에 0이 붙는 10진수 | 01, 02, ... |
| lower-roman | 로마 숫자 소문자 | i, ii, iii, ... |
| upper-roman | 로마 숫자 대문자 | I, II, III, ... |
| lower-alpha 또는 lower-latin | 알파벳 소문자 | a, b, c, ... |
| upper-alpha 또는 upper-latin | 알파벳 대문자 | A, B, C, ... |
| none | 불릿이나 숫자를 없앰 |
이러한 스타일을 ul 이나 ol 태그에데가 부여해주면 된다.
list-style-image : 불릿 대신 이미지를 사용
이 속성을 사용하면 불릿을 원하는 이미지로 바꿀 수 있다.
이 경우 불릿에 들어갈 이미지는 불릿 크기만큼 작아야 좋다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<ul style="list-style-image: url('images/star-bullet.png');">
<li>list1</li>
<li>list2</li>
</ul>
</body>
</html>
list-style-position : 목록을 들여 쓰기
불릿이나 번호의 위치를 들여 쓸 수 있다.
속성으로 inside를 지정하면 리스트가 조금 더 안으로 들여써진다.
기본값은 outside이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<ul style="list-style-position: outside;">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
<ul style="list-style-position: inside;">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</body>
</html>
list-style : 목록 속성을 한꺼번에 표시
목록 속성값들은 서로 이름이 중복되지 않는다.
list-style은 지금까지 살펴본 속성들을 한꺼번에 적어줄 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Html-basic</title>
</head>
<body>
<ul style="list-style : square inside;">
<li>list1</li>
<li>list2</li>
<li>list3</li>
</ul>
</body>
</html>
'📁Web Developing > CSS 기초' 카테고리의 다른 글
| III. 박스 모델 - 1. CSS와 박스 모델 (0) | 2022.06.03 |
|---|---|
| II. 텍스트 - 5. 표 스타일 (0) | 2022.06.03 |
| II. 텍스트 - 3. 텍스트 관련 스타일 (0) | 2022.06.02 |
| II. 텍스트 - 2. 웹 폰트 사용하기 (0) | 2022.06.01 |
| II. 텍스트 - 1. 글꼴 관련 스타일 (0) | 2022.06.01 |
댓글