CSS display: list-item 완벽 가이드

정의 및 사용 방법

display 속성이 list-item 값으로 설정된 요소는 마치 <li> 태그처럼 표시됩니다.

알아두세요!
<li> 태그는 브라우저의 기본 스타일시트에서 display: list-item이 기본값으로 설정되어 있습니다.

기본 예제

HTML

<p>
    웹을 공부할 때 다음의 두 가지 언어는 꼭 공부하세요.
    <span class="fake-list-item">HTML</span>
    <span class="fake-list-item">CSS</span>
    이 두 언어는 매우 흥미롭고, 재미있습니다.
</p>

특징

display 속성이 list-item 값으로 설정된 요소는 다음과 같은 특징을 가집니다.

<li> 태그처럼 리스트 마커가 표시됩니다. 즉, ::marker 가상 요소를 생성합니다.
::marker 가상 요소를 선택자로 리스트 마커를 다양하게 스타일링할 수 있습니다.
또한, 생성된 리스트 마커는 list-style, list-style-type, list-style-image, list-style-position 속성을 사용하여 리스트 마커를 스타일링할 수 있습니다.
일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 컨테이너를 생성합니다.

추가 예제

HTML

<p>
    웹 개발에서 중요한 언어들:
    <span class="enhanced-list-item">HTML</span>
    <span class="enhanced-list-item">CSS</span>
    <span class="enhanced-list-item">JavaScript</span>
</p>

CSS

.enhanced-list-item {
    display: list-item;
    list-style-position: inside; /* 마커 위치를 요소 안쪽으로 */
    list-style-type: square;     /* 마커 모양을 사각형으로 */
}

/* ::marker 가상 요소로 색상과 크기 스타일링 */
.enhanced-list-item::marker {
    color: red;
    font-size: 1.2em;
}

접근성 고려 사항

display: list-item으로 설정된 요소의 경우 시각적으로는 마치 목록(list)의 항목(items)을 나타내는 <li> 태그처럼 표시되지만, 이것은 단지 스타일적인 목적일 뿐 의미론적인 측면에서 "목록의 항목"임을 나타내지 않습니다.

만약 시각적 스타일만을 위한 것이라면 display: list-item을 설정하는 것이 접근성 측면에서 특별한 문제가 되지 않지만, 의미론적 측면까지 고려해야 한다면 <li> 태그를 사용하거나, 해당 요소에 role 속성을 사용하여 role="listitem" 등 적절한 추가 의미를 부여해야 합니다.