반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>목록 스타일</title>
<!--
불릿 모양과 번호 스타일을 지정하는 list-style-type 속성
불릿 대신 이미지를 사용하는 list-style-image 속성
기본형 - list-style-image: <url(이미지파일경로)> | none
목록을 들여쓰는 list-style-position 속성
기본형 - list-style-position: inside | outside
inside - 불릿이나 번호를 기존 위치보다 안으로 들여씀
outside - 기본값
목록 속성을 한꺼번에 표시하는 list-style 속성
list-style-type: upper-alpha;
list-style-position: inside;
-> list-style: upper-alpha inside;
-->
<style>
.book1 {
list-style-type: none;
list-style-image: url(images/dot.png);
}
.book2 {
list-style-type: upper-alpha;
list-style-position: inside;
}
</style>
</head>
<body>
<h1>도서 시리즈</h1>
<ul class="book1">
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ul>
<ol class="book2">
<li>Do it! 시리즈</li>
<li>첫 코딩 시리즈</li>
<li>된다 시리즈</li>
</ol>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 2일차 position (0) | 2023.05.11 |
|---|---|
| CSS - 2일차 padding, margin (0) | 2023.05.11 |
| CSS - 1일차 폰트(텍스트꾸미기, 대소문자변환, 글간격) (0) | 2023.05.10 |
| CSS - 1일차 폰트(글자색, 텍스트정렬, 줄간격) (0) | 2023.05.10 |
| CSS 1일차 - 폰트(글꼴, 크기) (0) | 2023.05.10 |