CSS / Reference / list-style-type

list-style-type은 목록 항목의 마커 모양이나 번호 형식을 정합니다. 표시 모양을 바꾸어도 ul과 ol의 의미가 서로 바뀌지는 않으므로, 순서가 중요한 목록은 ol을 사용하고 원하는 번호 형식을 CSS로 지정하세요.

문법과 주요 값

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

ol { list-style-type: lower-roman; }
ul { list-style-type: square; }

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

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 list-style-type-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-type 비교 예제</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 { list-style-type: lower-roman; padding-inline-start: 2em; }
.reference { list-style-type: square; padding-inline-start: 2em; }
</style>
</head>
<body>
<main id="demo">
<h1>list-style-type 적용 비교</h1>
<section class="samples"><div><p class="label">ol: lower-roman</p><ol class="target"><li>첫 단계</li><li>두 번째 단계</li></ol></div><div><p class="label">ul: square</p><ul class="reference"><li>첫 항목</li><li>두 번째 항목</li></ul></div></section>
</main>
</body>
</html>

순서 목록에는 i, ii 형태의 번호가, 비순서 목록에는 사각형 마커가 표시됩니다. ol의 번호 시작 값은 start 속성 등 HTML의 목록 기능과 함께 사용할 수 있습니다.

마커의 조건과 단축 속성

이 속성은 list-item으로 표시되는 요소의 마커에 영향을 줍니다. list-style-image가 실제 이미지 마커를 제공하면 list-style-type보다 우선해 보일 수 있습니다. list-style 단축 속성은 type, position, image를 함께 재설정하므로 뒤의 규칙을 확인하세요.

마커 제거와 목록 의미

none은 마커를 숨기지만 HTML의 목록 의미를 자동으로 삭제하지 않습니다. 다만 일부 브라우저와 보조 기술 조합에서 목록 인식에 차이가 있을 수 있으므로 탐색 목록 등 중요한 구조는 접근성 확인을 함께 수행하세요. 마커를 제거한 채 숫자를 본문에 직접 적으면 의미와 번호 관리가 분리됩니다.

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

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

1. 기존 ol.target의 list-style-type만 decimal, lower-roman, none으로 바꾸고 항목의 순서는 같은지 확인합니다. 마지막에는 lower-roman으로 복구합니다.
2. 그 ol 시작 태그에 start="3"을 추가하면 iii, iv로 시작합니다. 확인 후 start를 제거합니다. 모양만 바꾸려는 목적과 실제 시작 번호 변경을 구분합니다.

문단·목록의 정렬과 표시를 조합하는 방법은 문단과 목록의 간격, 정렬, 목록 표시 설정하기에서 확인할 수 있습니다.

마커만 별도로 꾸미는 방법은 MDN ::marker에서 확인할 수 있습니다.

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

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

• 마커가 안 보이면 list-style-image, display와 상위 overflow를 확인합니다.
• 모양 때문에 ul·ol을 바꾸기보다 목록의 순서 의미를 먼저 선택합니다.