CSS list-style-position 속성이란?
CSS의 list-style-position 속성은 목록의 글머리 기호(마커)를 해당 항목이 속한 상자의 내부에 표시할지, 아니면 외부에 표시할지를 지정합니다. 이 속성은 주로 두 가지 값을 가질 수 있습니다.
| 값 | 설명 |
|---|---|
| inside | 텍스트가 두 번째 줄로 넘어갈 경우, 줄바꿈된 텍스트가 마커 바로 아래로 내려옵니다. 또한 텍스트 시작 위치가 마치 outside 값을 적용했을 때의 텍스트 시작 지점만큼 들여쓰기 된 것처럼 표시됩니다. |
| outside | 텍스트가 두 번째 줄로 넘어갈 경우, 줄바꿈된 텍스트가 첫 번째 줄의 시작 위치(글머리 기호 오른쪽)에 정렬됩니다. |
즉, inside는 마커가 콘텐츠 흐름 안에 포함되어 들여쓰기 효과가 나타나고, outside는 마커가 상자 밖에 배치되어 일반적인 목록 스타일처럼 보입니다.
사용 예제
다음 코드를 실행하여 list-style-position 속성의 동작을 직접 확인해 볼 수 있습니다.
<html> <head> </head> <body> <ul style = "list-style-type:circle; list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ul> <ul style = "list-style-type:square;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ul> <ol style = "list-style-type:decimal;list-style-position:outside;"> <li>BMW</li> <li>Audi</li> </ol> <ol style = "list-style-type:lower-alpha;list-style-position:inside;"> <li>BMW</li> <li>Audi</li> </ol> </body> </html>
위 예제에서는 순서 없는 목록(<ul>)과 순서 있는 목록(<ol>)에 각각 inside와 outside 값을 적용하여 마커 위치가 어떻게 달라지는지 비교해 볼 수 있습니다.