정렬되지 않은 목록과 정렬된 목록의 스타일과 위치는 list-style-type, list-style-image 및 list-style-position이 있는 CSS 속성으로 형식을 지정할 수 있습니다.
구문
CSS 목록 스타일 속성의 구문은 다음과 같습니다 -
Selector {
list-style: /*value*/
} 예시
다음 예는 CSS 목록 스타일 속성을 보여줍니다 -
다음 예제 스타일은 정렬된 목록 -
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: upper-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>Latest C# Versions</h2>
<ol>
<li>C# 8.0</li>
<li>C# 7.3</li>
<li>C# 7.2</li>
<li>C# 7.1</li>
<li>C# 7.0</li>
</ol>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
예시
다음 예제 스타일은 정렬되지 않은 목록 -
<!DOCTYPE html>
<html>
<head>
<style>
ul > ul{
list-style: circle inside;
}
li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<h2>Programming Languages</h2>
<ul>
<li>C++ programming language created by Bjarne Stroustrup as an extension of the C programming language.</li>
<li>Java programming language developed by James Gosling.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala is a modern multi-paradigm programming language designed to express common programming patterns in a concise, elegant, and type-safe way.</li>
</ul>
</body>
</html> 출력
이것은 다음과 같은 출력을 제공합니다 -
