[CSS] 목록/리스트 (list-style-type, list-style-image, list-style-position)
2021. 6. 27. 16:48
728x90
01 list-style-type : 다양한 마커 변경
- 리스트 요소의 앞에 위치하는 숫자나 기호를 마커(marker)라고 함.
- 리스트에 다양한 마커(marker)를 적용할 수 있음.
circle (○)disc (●)square (■)decimal (1,2,3...)upper-alpha (A,B,C...)lower-alpha (a,b,c...)upper-roman (로마숫자 대문자)lower-roman (로마숫자 소문자)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
.circle {
list-style-type: circle;
}
.square {
list-style-type: square;
}
.disc {
list-style-type: disc;
}
.upperAlpha {
list-style-type: upper-alpha;
}
.lowerRoman {
list-style-type: lower-roman;
}
</style>
</head>
<body>
<ul class="circle">
<li>항목 1</li>
<li>항목 2</li>
</ul>
<ul class="square">
<li>항목 3</li>
<li>항목 4</li>
</ul>
<ul class="disc">
<li>항목 5</li>
<li>항목 6</li>
</ul>
<ul class="upperAlpha">
<li>항목 7</li>
<li>항목 8</li>
</ul>
<ul class="lowerRoman">
<li>항목 9</li>
<li>항목 10</li>
</ul>
</body>
</html>
01-1 목록 중간의 순서를 변경할때 value = "숫자"
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
ol{
list-style-type: upper-alpha;
}
</style>
</head>
<body>
<ol>
<li>항목 1</li>
<li value = "4">항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ol>
</body>
</html>
01-2 목록 스타일 사이트
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type
list-style-type - CSS: Cascading Style Sheets | MDN
The list-style-type CSS property sets the marker (such as a disc, character, or custom counter style) of a list item element.
developer.mozilla.org
02 list-style-image : 마커를 나만의 이미지로 변경
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
ol{
list-style-image: url(/images/bullet.png);
}
</style>
</head>
<body>
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ol>
</body>
</html>
03 list-style-position : 리스트의 위치
- 리스트 요소의 위치를 설정할 수 있음.
- 기본 속성값은
outside로 설정.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>목록</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
ul{
list-style-position: outside;
}
ol{
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ul>
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
<li>항목 4</li>
</ol>
</body>
</html>728x90
'CSS > Study' 카테고리의 다른 글
| CSS3 배경 (background-color, background-image, background-repeat, background-position, background-size, background-origin) (0) | 2021.06.27 |
|---|---|
| CSS3 박스 (height, width, margin, border, padding, content, box-sizing) (1) | 2021.06.27 |
| [CSS] 텍스트 (word-spacing, letter-spacing) (1) | 2021.06.27 |
| [CSS] 텍스트 (text-align, text-decoration) (1) | 2021.06.27 |
| [CSS] 텍스트 (font-size) (1) | 2021.06.22 |
