list-style-type 속성

list-style-type 속성을 사용하면 ul 목록의 점 마커 대신 사각형이나 원을 만들 수 있습니다. ol 목록의 경우 일반 숫자 대신 로마 숫자나, 라틴 문자 또는 그리스 문자로 된 번호 매기기를 할 수 있습니다.

구문

선택자 {
	list-style-type: 값;
}

기본값: disc.

기본값: decimal.

<ul>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ul>

ul {
	list-style-type: disc;
}

<ul>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ul>

ul {
	list-style-type: circle;
}

<ul>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ul>

ul {
	list-style-type: square;
}

<ul>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ul>

ul {
	list-style-type: none;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: decimal;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: armenian;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: decimal-leading-zero;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: georgian;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: lower-alpha;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: lower-greek;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: lower-latin;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

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

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: upper-alpha;
}

<ol>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ol>

ol {
	list-style-type: upper-roman;
}

이 예제는 color 속성이 텍스트 색상뿐만 아니라 마커의 색상에도 영향을 미친다는 것을 보여줍니다:

<ul>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
	<li>목록 항목</li>
</ul>

ul {
	list-style-type: disc;
	color: red;
}