CSS / Reference / list-style-position

list-style-position은 목록 마커를 항목 내용의 바깥에 둘지 안쪽에 둘지 정합니다. outside는 여러 줄의 본문 시작을 가지런하게 맞추기 쉽고, inside는 마커가 첫 번째 줄의 인라인 내용처럼 배치됩니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

ul { list-style-position: outside; padding-inline-start: 1.5em; }

값과 적용 조건은 MDN list-style-position에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 list-style-position-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>list-style-position 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 220px; padding-inline-start: 28px; border: 1px solid #718096; }
.target { list-style-position: outside; }
.reference { list-style-position: inside; }
</style>
</head>
<body>
<main id="demo">
<h1>list-style-position 적용 비교</h1>
<section class="samples"><div><p class="label">outside</p><ul class="target"><li>길이가 긴 항목을 여러 줄로 표시해 두 번째 줄의 시작 위치를 비교합니다.</li></ul></div><div><p class="label">inside</p><ul class="reference"><li>길이가 긴 항목을 여러 줄로 표시해 두 번째 줄의 시작 위치를 비교합니다.</li></ul></div></section>
</main>
</body>
</html>

outside에서는 마커를 제외한 본문 줄들이 같은 위치에서 시작합니다. inside에서는 첫 줄의 마커가 줄 안에 들어가 다음 줄의 시작과 다른 위치 관계를 만듭니다.

바깥 마커와 잘림

outside의 마커는 본문 바깥에 놓이므로 목록의 시작 쪽 padding을 모두 없애거나 상위 박스를 자르면 마커가 잘릴 수 있습니다. 마커를 inside로 옮기기 전에 필요한 목록 여백을 확보하는 방법을 먼저 검토하세요.

항목 내부 블록과 줄바꿈

inside 항목 안에 p 같은 블록 요소가 먼저 들어가면 마커와 본문이 기대와 다른 줄에 놓일 수 있습니다. 실제 HTML 구조와 긴 문장으로 비교하고, 번호를 포함한 여러 줄 항목의 가독성을 기준으로 값을 선택합니다. 위치를 바꾸어도 목록의 순서 의미는 변하지 않습니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 기존 li의 글자를 p로 감싸 첫 자식이 블록이 된 경우를 inside와 outside에서 비교합니다. 같은 항목 내용과 너비를 유지하고 실습 후 p를 제거합니다.
2. outside 목록의 시작 padding을 잠시 제거해 마커 위치를 확인하되, 실제 구성에서는 적절한 시작 공간을 복구합니다. 마커가 없어 보이면 list-style-type과 상위 overflow도 봅니다.

상자의 표시 방식과 일반 흐름을 함께 이해하려면 display와 기본 배치 흐름 이해하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 list-style-type입니다.

적용되지 않거나 예상과 다를 때

• 마커만 사라지면 상위 overflow와 목록 padding을 확인합니다.
• 첫 줄만 어색하면 li 안의 첫 자식이 블록인지 확인합니다.