CSS를 사용하여 정렬되지 않은 목록과 정렬된 목록 형식 지정

<시간/>

정렬되지 않은 목록과 정렬된 목록의 형식을 지정하려면 list-style-type, list-style-image 및 list-style-position 속성을 사용하세요.

예시

정렬되지 않은 목록(ul) −

형식을 지정하는 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: square;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>

출력

CSS를 사용하여 정렬되지 않은 목록과 정렬된 목록 형식 지정

예시

이제 정렬된 목록(ol) -

의 형식을 지정하는 예를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
ol {
   list-style-type: upper-roman;
}
</style>
</head>
<body>
<h2>Teams</h2>
<ol>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ol>
</body>
</html>

출력

CSS를 사용하여 정렬되지 않은 목록과 정렬된 목록 형식 지정

예시

정렬된 목록과 정렬되지 않은 목록 모두에 대해 목록 스타일에 대한 이미지를 설정하는 또 다른 예를 살펴보겠습니다. -

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
ol.demo2 {
   list-style-image: url('https://www.tutorialspoint.com/images/Swift.png');
}
</style>
</head>
<body>
<h2>Teams</h2>
<ul class="demo1">
<li>India - Qualified for WordCup</li>
<li>Australia - Qualified for WordCup</li>
<li>England - Qualified for WordCup</li>
</ul>
<h2>Players</h2>
<ol class="demo2">
<li>Virat Kohli</li>
<li>David Warner</li>
<li>Steve Smith</li>
</ol>
</body>
</html>

출력

CSS를 사용하여 정렬되지 않은 목록과 정렬된 목록 형식 지정