CSS의 list-style-position 속성은 목록 항목(list-item) 앞에 표시되는 마커(불릿)의 위치를 지정하는 데 사용됩니다. 이 속성을 활용하면 목록 기호를 텍스트 블록의 바깥쪽에 배치할지, 안쪽에 배치할지 간단하게 조절할 수 있습니다.
list-style-position 속성의 주요 값
- outside (기본값): 마커가 콘텐츠 흐름 바깥쪽에 위치하며, 일반적인 들여쓰기 형태의 목록으로 표시됩니다.
- inside: 마커가 콘텐츠 흐름 안쪽에 위치하며, 텍스트와 나란히 배치되어 들여쓰기 없이 표시됩니다.
예제
다음 예제는 두 개의 서로 다른 클래스를 사용하여 outside 값과 inside 값의 차이를 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
list-style-position: outside;
}
ul.demo2 {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 "ODI Teams" 목록은 마커가 바깥쪽(outside)에 배치되어 일반적인 들여쓰기 형태로 나타나고, "Test Teams" 목록은 마커가 안쪽(inside)에 배치되어 텍스트와 함께 정렬되는 것을 확인할 수 있습니다. 이처럼 list-style-position 속성 하나만으로도 목록의 시각적 스타일을 손쉽게 변경할 수 있습니다.