CSS list-style-position 속성 – 리스트 마커의 위치 설정

`list-style-position` 속성의 이해

list-style-position 속성은
리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.

데모

다음의 CSS 데모로 list-style-position 속성의 설정 방법을 확인해 보세요.

CSS 데모: list-style-position 데모 버튼을 클릭해 보세요!

list-style-position 속성은 리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.
outside(초깃값)는 리스트 마커가 리스트 아이템의 바깥쪽에 배치됩니다.
inside는 리스트 마커가 리스트 아이템의 안쪽에 배치됩니다.

형식 구문

구문

CSS

/* 키워드 값 */
list-style-position: outside; /* 초깃값 */
list-style-position: inside;

/* 전역 값 */
list-style-position: inherit;
list-style-position: initial;
list-style-position: revert;
list-style-position: revert-layer;
list-style-position: unset;

값

list-style-position 속성은 outside와 inside 키워드 값 중 하나로 지정합니다.

list-style-position 속성의 값
`outside`	`::marker`로 표시되는 리스트 마커(글머리 기호)가 리스트 아이템 블록의 바로 바깥쪽에 배치됩니다.
`inside`	`::marker`로 나타내는 리스트 마커(글머리 기호)가 리스트 아이템의 안쪽 인라인의 첫 번째로 배치됩니다.

형식 정의

list-style-position 속성의 형식 정의
초깃값	`outside`
적용 요소	`<li>`나 `<summary>`처럼 `display` 속성의 값이 `list-item`으로 설정된 요소
상속	예
애니메이션	아니오

list-style-position 속성의 초깃값은 outside입니다.
하지만, 브라우저의 기본 스타일시트에서는 <summary>의 경우 inside로 설정되어 있습니다.

값 지정을 위한 선택자

list-style-position은 기본적으로 상속(inherit)되는 속성입니다.
부모 요소(일반적으로 <ol> 또는 <ul>)에 설정하여 모든 목록 항목에 적용할 수 있습니다.

예제

HTML

<h4>outside</h4>
<ol class="outside">
    <li>
        list-style-position 속성은 리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.
    </li>
    <li>
        outside(초깃값)는 리스트 마커가 리스트 아이템의 <b>바깥쪽에 배치</b>됩니다.
    </li>
    <li>
        inside는 리스트 마커가 리스트 아이템의 <b>안쪽에 배치</b>됩니다.
    </li>
</ol>
<h4>inside</h4>
<ol class="inside">
    <li>
        list-style-position 속성은 리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.
    </li>
    <li>
        outside(초깃값)는 리스트 마커가 리스트 아이템의 <b>바깥쪽에 배치</b>됩니다.
    </li>
    <li>
        inside는 리스트 마커가 리스트 아이템의 <b>안쪽에 배치</b>됩니다.
    </li>
</ol>
<h4>outside-emoji</h4>
<ol class="outside-emoji">
    <li>
        list-style-position 속성은 리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.
    </li>
    <li>
        outside(초깃값)는 리스트 마커가 리스트 아이템의 <b>바깥쪽에 배치</b>됩니다.
    </li>
    <li>
        inside는 리스트 마커가 리스트 아이템의 <b>안쪽에 배치</b>됩니다.
    </li>
</ol>

CSS

ol {
    max-width: 300px;
}
.outside {
    list-style-position: outside;
}
.inside {
    list-style-position: inside;
}
.outside-emoji {
    list-style-position: outside;
}
.outside-emoji li::marker {
    content: "😃 ";
    font-size: 0.8em;
}

코드 부연설명
::marker 가상 요소 선택자는 display 속성의 값이 list-item인 요소에 자동으로 생성된 리스트 마커를 선택하는 선택자입니다.