CSS의 list-style 속성은 목록 요소에 적용되는 list-style-type(마커 종류), list-style-position(마커 위치), list-style-image(마커 이미지) 세 가지 개별 속성을 하나의 선언으로 동시에 지정할 수 있는 속기(shorthand) 속성입니다. 이 속성을 활용하면 코드가 간결해지고 스타일 관리도 훨씬 수월해집니다.
문법(Syntax)
CSS list-style 속성의 기본 문법은 다음과 같습니다.
Selector {
list-style: /*값*/
}속기 속성에는 일반적으로 마커 종류(type)와 위치(position) 값을 순서대로 작성하며, 필요에 따라 이미지 경로(url())도 함께 지정할 수 있습니다.
예제 1
다음 예제는 순서 있는 목록(ol)과 순서 없는 목록(ul)에 서로 다른 list-style 값을 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 1.33em;
background: linear-gradient(to right, orange, lightgreen, lightblue);
}
ol:first-of-type {
box-shadow: inset 0 0 23px rgb(20,255,40);
list-style: upper-alpha inside;
}
ul {
list-style: circle;
}
</style>
</head>
<body>
<ol>
<li>Demo</li>
</ol>
<ol>
<li>Demo</li>
</ol>
<ul>
<li>demo</li>
<ol>
<li>demo</li>
</ol>
</ul>
</body>
</html>
실행 결과
위 코드를 실행하면 첫 번째 <ol>에는 대문자 알파벳(A, B, C…) 마커가 안쪽(inside) 위치로 표시되고, <ul>에는 속이 빈 원(circle) 마커가 적용된 것을 확인할 수 있습니다.
예제 2
다음 예제는 소문자 로마 숫자(lower-roman) 마커를 사용해 인기 스포츠 목록을 꾸며본 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
width: 40%;
list-style: lower-roman;
}
li {
border: thin solid hotpink;
margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Popular Sports</h2>
<ol>
<li>Football</li>
<li>Cricket</li>
<li>Tennis</li>
<li>Hockey</li>
<li>Volleyball</li>
<li>Basketball</li>
</ol>
</body>
</html>
실행 결과
위 코드를 실행하면 각 목록 항목 앞에 i, ii, iii… 형태의 소문자 로마 숫자 마커가 붙어 출력됩니다.
자주 사용하는 list-style 값 정리
실무에서 자주 쓰이는 주요 값은 다음과 같습니다.
list-style-type: disc(기본값), circle, square, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, none 등
list-style-position: outside(기본값), inside
list-style-image: none 또는 url('이미지 경로')
참고로 list-style 속성에 값을 생략하면 해당 개별 속성은 기본값으로 설정되므로, 특정 값만 바꾸고 싶다면 개별 속성을 따로 사용하는 것이 안전합니다.