list-style
목록을 작성할 때 항목의 마커들의 스타일을 변경하는 방법 중 하나다.
- list-style-type: disc | circle | square | none;
마커들의 모양을 ●(disc, 기본값), ○(circle), ■(squar), none으로 변경할 수 있다. - list-style-position: inside | outside;
마커들의 위치를 목록의 안쪽에(inside) 포함할지, 안의 컨텐츠와 분리해서 앞쪽에 위치시킬지(outside, 기본값) 설정할 수 있다. - list-style-image: url('이미지주소');
이미지를 사용하여 마커를 변경 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* list-style-position: outside;는 기본값이라 비교해보면 다른걸 볼 수 있다. */
ul>li:nth-of-type(1){
list-style-type: disc;
}
ul>li:nth-of-type(2){
list-style-type: circle;
}
ul>li:nth-of-type(3){
list-style-type: square;
}
ul>li:nth-of-type(4){
list-style-type: none;
}
ul>li:nth-of-type(5){
list-style-position: inside;
}
ul>li:nth-of-type(6){
list-style-image: url("./selft-study-image/check_icon.png");
}
</style>
</head>
<body>
<ul>
<li>안녕하세요</li>
<li>안녕하세요</li>
<li>안녕하세요</li>
<li>안녕하세요</li>
<li>안녕하세요</li>
<li>안녕하세요</li>
</ul>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS에서의 배치 방법 (0) | 2024.07.07 |
|---|---|
| CSS3의 박스모델 (0) | 2024.07.07 |
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS3에서 텍스트를 정렬하는 방법 (0) | 2024.07.02 |
| CSS에서 텍스트에 색과 그림자를 입혀보자 (0) | 2024.07.02 |
| CSS에서 폰트를 꾸며보자 (0) | 2024.07.01 |