고정 헤더 영역
상세 컨텐츠
본문
반응형
list-style-type 속성 - 목록의 불릿과 번호 스타일 지정하기
- 목록 형태에서 스타일을 지정할 수 있다. 순서가 없는 목록인 경우 목록 앞에 다양한 불릿을 넣을 수 있다.
순서 없는 목록에서 불릿 모양 바꾸기
- disc (●) : 채운 원
- circle (○) : 빈 원
- square (■) : 채운 사각형
- none : 불릿 없애기
<html>
<head>
<meta charset="utf-8">
<style>
.none-list { list-style-type: none; }
</style>
</head>
<body>
<ul>
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ul>
<ul class="none-list">
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ul>
</body>
</html>
순서 목록에서 숫자 바꾸기
- decimal : 1, 2, 3...
- decimal-leading-zero : 01, 02, 03,,,,
- lower-roman : i, ii, ii,,,
- upper-roman: I, II, III,,,
- lower-alpha 또는 lower-latin : a, b, ,c,,,,
- upper-alpha 또는 lower-latin: A, B, C,,,,
- armenian : 아르마니아
- georgian : an, ban, gan
<html>
<head>
<meta charset="utf-8">
<style>
.upper-list { list-style-type: upper-roman; }
.lower-list { list-style-type: lower-roman; }
</style>
</head>
<body>
<ol class="upper-list">
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ol>
<ol class="lower-list">
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ol>
</body>
</html>
list-style-image 속성 - 불릿 대신 이미지 넣기
- 불릿 대신에 사용자가 원하는 이미지를 넣을 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
.image-list { list-style-image: url('images/dot.png'); }
</style>
</head>
<body>
<ul class="image-list">
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ul>
</body>
</html>
list-style-position 속성 - 목록에 들여 쓰는 효과 내기
- 목록을 만들 때 사용된 불릿이나 번호는 실제 내용의 바깥쪽에 표시된다. list-style-position 속성을 이용하면 실제 내용이 시작되는 위치에 불릿이나 번호를 표시할 수 이 ㅆ다.
속성
- inside : 불릿이나 숫자를 안쪽으로 들여 쓴다.
- outside : 기본 값으로 불릿이나 숫자를 밖으로 내어쓴다.
<html>
<head>
<meta charset="utf-8">
<style>
.inside { list-style-position: inside; }
</style>
</head>
<body>
<ul class="inside">
<li>사과</li>
<li>바나나</li>
<li>파인애플</li>
</ul>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS 기초] CSS와 박스 모델 (0) | 2021.04.26 |
|---|---|
| [CSS 기초] 배경 색과 배경 이미지 (0) | 2021.04.24 |
| [CSS 기초] 문단 스타일 (2) (0) | 2021.04.21 |
| [CSS 기초] 문단 스타일 (1) (0) | 2021.04.20 |
| [CSS 기초] 텍스트 스타일 (0) | 2021.04.19 |
댓글 영역