CSS에서 글머리 기호(불릿)가 포함된 박스의 외부에 마커를 배치하려면 list-style-position 속성에 outside 값을 사용하면 됩니다.
outside 값의 의미
outside 값은 목록 항목의 텍스트가 두 번째 줄로 넘어갈 때, 해당 줄이 첫 번째 줄 텍스트의 시작 위치에 맞춰 정렬된다는 것을 의미합니다. 즉, 마커는 텍스트 블록 바깥쪽에 고정되어 있고, 줄이 바뀌어도 자연스러운 들여쓰기 형태가 유지됩니다.
예제
다음은 <ul> 목록과 <ol> 목록에 각각 list-style-position: outside를 적용한 예제입니다.
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-style-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-style-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
참고 사항
list-style-position 속성은 outside(기본값)와 inside 두 가지 값을 가집니다. inside를 사용하면 마커가 텍스트 흐름 안쪽으로 들어가며, 두 번째 줄이 마커가 아닌 마커의 시작 위치부터 정렬되는 차이가 있습니다. 목록 스타일을 한 번에 지정하려면 list-style-type, list-style-position, list-style-image를 묶는 list-style 단축 속성을 활용할 수도 있습니다.