카테고리 없음
CSS list-style-position / list-style-type
Hoplin
2022. 3. 10. 02:12
반응형
list-style-type
list-style-type속성은 불릿(<ul>)의 모양이나 번호(<ol>) 스타일을 지정할 때 사용한다. 지정할 수 있는 대표적인 속성들은 아래와 같다.
| 종류 | 설명 |
| disc / circle | 채운 원 모양 / 빈 원 모양 |
| square | 채운 사각형 |
| decimal / decimal-leading-zero | 1부터 시작하는 10진수 / 앞에 0이 붙는 10진수 |
| lower-roman / upper-roman | 로마 숫자 소문자 / 로마숫자 대문자 |
| none | 불릿 / 숫자를 없앤다 |
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.ol{
list-style-type: lower-roman;
}
.ul{
list-style-type: square;
}
</style>
</head>
<body>
<ul class="ul">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
<ol class="ol">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ol>
</body>
</html>list-style-position
list-style-position 속성을 사용하면, 번호의 위치를 들여쓸 수 있다. 두가지 속성이 있다.
- inside : 불릿이나 번호가 기본 위치보다 안쪽으로 들여쓰기 한거같은 효과를 준다
- outside : 기본값이다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.outside{
list-style-position: outside;
}
.inside{
list-style-position: inside;
}
</style>
</head>
<body>
<ul class="outside">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
<ul class="inside">
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</body>
</html>반응형