글머리 기호(bullet point)가 포함된 상자의 안쪽에 목록 마커(marker)를 배치하려면 CSS의 list-style-position 속성에 inside 값을 지정하면 됩니다.
inside 값의 동작 방식
inside 값이 적용된 목록은 텍스트가 두 번째 줄로 넘어갈 때, 줄바꿈된 텍스트가 마커 아래쪽으로 자연스럽게 흐르게 됩니다. 즉, 마커와 텍스트가 하나의 블록처럼 함께 정렬되는 것이죠. 또한 outside 값일 때 텍스트가 시작될 위치에 맞춰 목록 전체가 들여쓰기된 형태로 나타납니다.
반대로 기본값인 outside는 마커가 텍스트 영역 바깥쪽에 배치되며, 두 번째 줄부터는 마커 아래로 감기지 않습니다. 참고로 목록 관련 스타일을 한 번에 지정하고 싶다면 list-style 단축 속성을 활용하는 것도 좋은 방법입니다.
예제
<html>
<head>
</head>
<body>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>실행 결과 설명
위 예제를 실행하면 첫 번째 <ul> 목록에는 사각형(square) 불릿이 항목 텍스트의 안쪽에 표시되고, 두 번째 <ol> 목록에는 소문자 알파벳(lower-alpha) 번호가 텍스트와 함께 내부에 정렬되어 나타납니다. 이렇게 list-style-position: inside를 활용하면 목록의 시각적 구조를 원하는 대로 손쉽게 제어할 수 있습니다.