목록 스타일 (list-style-type)
ul, ol 등의 목록을 작성할 때 ul(Unordered List)를 제외하고 ol(Ordered List)를 작성할 때
하위의 <li>의 글머리기호의 서식을 정할 수 있는 속성이다.
속성값
- 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-alpha : 알파벳 대문자 // A, B, C
- none : 불릿이나 숫자를 없앤다.
불릿 대신 이미지 사용 (list-style-image)
불릿 대신 이미지를 사용할 때 사용한다.
기본형은 list-style-image: <url('경로')> | none
이미지는 불릿만큼 작아야 좋다.
ul {
list-style-image: url('images/dot.png');
}
목록 들여쓰기 (list-style-position)
속성값
- inside : 안 쪽으로 들여쓰기
- outside : none 상태. 기본값.
<style>
.inside {
list-style-position: inside;
}
</style>
<body>
<ul>
<li>기본 값. outside</li>
<li>기본 값. outside</li>
<li>기본 값. outside</li>
</ul>
<ul class="inside">
<li>들여쓰기 테스트</li>
<li>들여쓰기 테스트</li>
<li>들여쓰기 테스트</li>
</ul>
</body>
list-style로 한 번에 속성값 작성하기
list-style의 속성들로 list-style-type, list-style-image, list-style-position 등이 있음을 알았다.
이것을 굳이 하나씩 쓰지 않고 한 줄로 써도 인식한다.
<style>
.ol {
list-style-type: lower-alpha;
list-style-position: inside;
}
</style>
<style>
.ol {
list-style: lower-alpha inside;
}
</style>
/* 위 두 개의 스타일 속성은 모두 같은 결과를 출력한다. */
출처 : 웹 표준의 정석 (고경희 저)
'Programing > CSS' 카테고리의 다른 글
| 그림자효과 추가하고 마우스를 올렸을 때 커졌다가 떼면 원상태로 복귀하는 CSS 애니메이션 효과 적용하기 (0) | 2024.02.29 |
|---|---|
| 부트스트랩 (0) | 2024.02.28 |
| 글자 간격 조절 (letter-spacing, word-spacing) (0) | 2024.02.26 |
| 텍스트의 대소문자를 변환 (text-transform) (0) | 2024.02.26 |
| 텍스트에 그림자 효과 주기 (text-shadow) (0) | 2024.02.26 |
댓글