CSS list-style 속성이란?
list-style 속성은 목록과 관련된 여러 개별 속성들을 하나의 표현식으로 간편하게 지정할 수 있는 축약형(shorthand) 속성입니다.
일반적으로 목록 스타일을 적용할 때는 list-style-position(마커 위치)과 list-style-type(마커 종류)을 각각 선언해야 하지만, list-style 속성을 사용하면 이러한 값들을 한 줄로 묶어 작성할 수 있어 코드가 훨씬 간결해집니다.
- 첫 번째 값 (inside / outside): 목록 마커의 위치를 지정합니다. inside는 콘텐츠 흐름 안쪽에, outside는 바깥쪽에 마커를 배치합니다.
- 두 번째 값 (circle, lower-alpha 등): 목록 마커의 종류를 지정합니다.
예제
다음 코드를 실행하면 ul과 ol 요소에 대해 list-style, type 등의 속성을 한 줄로 설정한 결과를 확인할 수 있습니다:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside circle;">
<li>Laptop</li>
<li>Desktop System</li>
</ul>
<ol style = "list-style: outside lower-alpha;">
<li>Laptop</li>
<li>Desktop System</li>
</ol>
</body>
</html>
예제 결과 설명
- list-style: inside circle — 순서 없는 목록(ul)의 항목 안쪽에 원형(circle) 마커가 함께 들여쓰기되어 표시됩니다.
- list-style: outside lower-alpha — 순서 있는 목록(ol)의 항목 바깥쪽에 소문자 알파벳(a, b, c…) 형태의 마커가 표시됩니다.