CSS list-style-position 속성이란?
CSS의 list-style-position 속성은 목록 항목(li) 앞에 표시되는 마커(불릿 기호 또는 번호)의 위치를 지정하는 데 사용됩니다. 이 속성의 기본값은 outside로, 마커가 목록 항목의 콘텐츠 영역 바깥쪽에 배치됩니다. 반대로 inside 값을 사용하면 마커가 텍스트 흐름 안쪽으로 들어가 목록 내용과 함께 줄바꿈됩니다.
주요 값 정리
- outside (기본값): 마커가 목록 항목 텍스트 블록 밖에 위치하며, 두 번째 줄부터는 마커 아래로 들여쓰기 됩니다.
- inside: 마커가 목록 항목 텍스트 블록 안에 위치하며, 첫 줄이 들여쓰기 된 것처럼 보입니다.
문법(Syntax)
CSS list-style-position 속성의 기본 문법은 다음과 같습니다.
Selector {
list-style-position: /*값*/
}예제 1: 중첩 목록에서 마커 위치 다르게 적용하기
다음 예제는 상위 목록에는 inside, 하위 목록에는 outside를 각각 적용하여 마커 위치를 다르게 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
li {
width: 50%;
margin: 5px;
font-size: 120%;
box-shadow: 0 0 3px 1px black;
background: url("https://www.tutorialspoint.com/dbms/images/dbms.jpg") no-repeat 32px 8px;
list-style-position: inside;
padding: 0 0 10px 20px;
}
ol ol li {
list-style: lower-roman;
list-style-position: outside;
}
</style>
</head>
<body>
<ol>
<li>Black</li>
<li>
Blue
<ol>
<li>Green</li>
<li>Red</li>
</ol>
</li>
<li>Yellow</li>
<li>Red</li>
</ol>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
상위 목록 항목들은 마커가 텍스트 안쪽(inside)에 배치되고, 로마 숫자(lower-roman)로 표시되는 하위 목록 항목들은 마커가 바깥쪽(outside)에 배치되는 것을 볼 수 있습니다.
예제 2: 인접 선택자로 서로 다른 목록 스타일 적용하기
이번 예제에서는 인접 형제 선택자(+)를 활용해 두 개의 ul 목록에 서로 다른 마커 유형과 위치를 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
width: 200px;
box-shadow: inset 0 0 6px green;
list-style-position: outside;
}
ul + ul {
list-style-type: circle;
list-style-position: inside;
}
</style>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 결과를 얻을 수 있습니다.
첫 번째 목록은 기본 불릿 마커가 바깥쪽에 표시되고, 두 번째 목록은 원형(circle) 마커가 안쪽에 표시되어 두 목록의 시각적 차이를 명확하게 비교할 수 있습니다.
정리
list-style-position 속성은 단순해 보이지만, 목록의 가독성과 디자인에 큰 영향을 주는 요소입니다. 특히 배경 이미지나 그림자 효산을 목록 항목에 적용할 때 마커 위치에 따라 레이아웃이 달라지므로, inside와 outside의 차이를 정확히 이해하고 상황에 맞게 활용하는 것이 좋습니다.