CSS의 list-style-position 속성은 목록 항목 앞에 표시되는 불릿(bullet) 마커가 콘텐츠 박스의 안쪽(inside)에 위치할지, 아니면 바깥쪽(outside)에 위치할지를 결정합니다.
이 속성은 <ul>, <ol> 같은 목록 요소에 적용되며, 마커와 텍스트의 정렬 방식에 큰 영향을 줍니다.
inside 값의 특징
값을 inside로 지정하면 마커가 목록 항목의 콘텐츠 흐름 안에 포함됩니다. 이 경우 텍스트가 두 번째 줄로 넘어가면, 두 번째 줄이 마커 아래까지 감싸며 내려옵니다. 즉, 마커가 텍스트 블록의 일부처럼 동작하기 때문에 들여쓰기 없이 좌측 여백이 좁아 보입니다.
outside 값의 특징
값을 outside로 지정하면 마커가 콘텐츠 박스 바깥쪽에 배치됩니다. 이 경우 텍스트가 두 번째 줄로 넘어가더라도, 두 번째 줄이 첫 번째 줄의 시작 위치에 맞춰 정렬됩니다. 웹에서 기본적으로 사용되는 값이기도 하며, 일반적인 목록 스타일과 가장 익숙한 형태입니다.
사용 예제
다음은 list-style-position: outside 값을 적용한 간단한 예제입니다.
<html> <head> </head> <body> <ul style = "list-style-type:circle; list-style-position:outside;"> <li>수학</li> <li>과학</li> </ul> </body> </html>
위 코드는 원형(circle) 모양의 마커를 사용하며, 마커가 목록 상자의 바깥쪽에 배치됩니다. 값을 inside로 변경하면 마커가 텍스트 영역 안으로 들어오면서 전체적인 들여쓰기 형태가 달라지는 것을 확인할 수 있습니다.
참고 사항
list-style-position은 list-style-type, list-style-image 속성과 함께 축약형 속성인 list-style로 한 번에 지정할 수도 있습니다. 예를 들어 list-style: circle outside;처럼 작성하면 더 간결한 코드를 유지할 수 있습니다.