CSS의 list-style-type, list-style-image, list-style-position 속성을 활용하면 순서 없는 목록(ul)과 순서 있는 목록(ol)의 스타일과 위치를 자유롭게 꾸밀 수 있습니다.
문법(Syntax)
CSS list-style 속성의 기본 문법은 다음과 같습니다.
Selector {
list-style: /*값*/
}예제 1: 순서 있는 목록(ol) 스타일 지정
다음 예제는 순서 있는 목록에 로마자 대문자 번호를 적용하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: upper-roman;
line-height: 150%;
}
</style>
</head>
<body>
<h2>최신 C# 버전</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>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 순서 없는 목록(ul) 스타일 지정
다음 예제는 중첩된 순서 없는 목록에 원형 마커와 안쪽 위치(inside)를 적용하고, 마지막 항목에는 사각형 마커를 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul > ul {
list-style: circle inside;
}
li:last-child {
list-style-type: square;
}
</style>
</head>
<body>
<h2>프로그래밍 언어</h2>
<ul>
<li>C++은 Bjarne Stroustrup이 C 언어의 확장 형태로 만든 프로그래밍 언어입니다.</li>
<li>Java는 James Gosling이 개발한 프로그래밍 언어입니다.</li>
<ul>
<li>Core Java</li>
<li>Advanced Java</li>
</ul>
<li>Scala는 일반적인 프로그래밍 패턴을 간결하고 우아하며 타입 안전한 방식으로 표현할 수 있도록 설계된 현대적인 멀티 패러다임 프로그래밍 언어입니다.</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
