CSS로 목록 스타일링하기

<시간/>

목록은 순서가 지정되지 않은 것처럼 정렬됩니다. CSS를 사용하면 세트 목록 항목 마커 또는 마커의 이미지를 설정할 수 있습니다. 이를 통해 CSS를 사용하여 목록 항목 마커의 위치도 설정할 수 있습니다.

이제 몇 가지 예를 살펴보겠습니다 -

목록 스타일 유형

list-style-type은 목록 항목 마커의 유형을 설정하는 데 사용됩니다.

예시

이제 정렬된 목록(ol) -

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

<!DOCTYPE html>
<html>
<head>
<style>
ul {
   list-style-type: upper-roman;
}
</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로 목록 스타일링하기

목록 스타일 이미지

list-style-image 속성은 이미지를 목록 항목 마커로 설정하는 데 사용됩니다.

예시

이제 예를 살펴보겠습니다 -

<!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로 목록 스타일링하기

목록 스타일 위치

list-style-position 속성은 목록 항목 마커의 위치를 설정하는 데 사용됩니다.

예시

이제 예를 살펴보겠습니다 -

<!DOCTYPE html>
<html>
<head>
<style>
ul.demo1 {
   list-style-position: outside;
}
ul.demo2 {
   list-style-position: inside;
}
</style>
</head>
<body>
<h1>Teams</h1>
<h2>ODI Teams</h2>
<ul class="demo1">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
<h2>Test Teams</h2>
<ul class="demo2">
<ul>
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</ul>
</body>
</html>

출력

CSS로 목록 스타일링하기