목록은 순서가 있는 목록(ordered list)과 순서가 없는 목록(unordered list)으로 나뉩니다. CSS를 활용하면 목록 항목 앞에 표시되는 마커의 종류를 자유롭게 변경하거나, 이미지를 마커로 사용할 수 있으며, 마커의 위치까지 세밀하게 조정할 수 있습니다.
이 글에서는 CSS 목록 스타일링의 핵심 속성들을 예제와 함께 살펴보겠습니다.
1. list-style-type — 마커 종류 지정하기
list-style-type 속성은 목록 항목 앞에 표시될 마커의 형태를 설정합니다. 순서 없는 목록에는 disc, circle, square 등을 사용할 수 있고, 순서 있는 목록에는 decimal, upper-roman, lower-alpha 등 다양한 스타일을 적용할 수 있습니다.
예제
다음은 <ul> 목록에 대문자 로마 숫자 스타일을 적용하는 예제입니다.
<!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>위 코드를 실행하면 각 항목 앞에 Ⅰ, Ⅱ, Ⅲ처럼 대문자 로마 숫자가 순서대로 표시됩니다.
2. list-style-image — 이미지를 마커로 사용하기
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>이 예제에서는 <ul>과 <ol> 두 목록 모두에 동일한 이미지가 마커로 표시됩니다. 이미지 경로는 절대 URL뿐 아니라 상대 경로로도 지정할 수 있습니다.
3. list-style-position — 마커 위치 조정하기
list-style-position 속성은 목록 마커가 텍스트 블록의 내부에 표시될지, 외부에 표시될지를 결정합니다.
- outside(기본값): 마커가 콘텐츠 영역 바깥에 배치됩니다. 들여쓰기된 일반적인 목록 모양입니다.
- inside: 마커가 콘텐츠 영역 안쪽에 배치되어, 텍스트 줄바꿈 시 마커 아래로 텍스트가 정렬됩니다.
예제
<!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">
<li>India</li>
<li>Australia</li>
<li>England</li>
<li>West Indies</li>
<li>South Africa</li>
<li>Srilanka</li>
</ul>
</body>
</html>두 목록의 차이를 비교해 보면, outside가 적용된 목록은 마커가 본문 밖으로 돌출되어 보이고, inside가 적용된 목록은 마커가 텍스트와 함께 안쪽으로 들어가 있는 것을 확인할 수 있습니다.
마무리
CSS의 목록 관련 속성들을 정리하면 다음과 같습니다.
- list-style-type: 마커의 종류(원형, 사각형, 로마 숫자 등)를 지정
- list-style-image: 이미지 파일을 마커로 지정
- list-style-position: 마커를 콘텐츠 내부(inside) 또는 외부(outside)에 배치
또한 이 세 가지 속성을 한 번에 설정할 수 있는 단축 속성인 list-style도 제공되므로, 실무에서는 list-style: square inside url('icon.png');처럼 간결하게 작성하는 것이 좋습니다. 이러한 속성들을 잘 활용하면 웹 페이지의 목록을 더욱 깔끔하고 개성 있게 디자인할 수 있습니다.