CSS를 활용하면 배경색, 글꼴 스타일, list-style 속성 등을 지정하여 리스트(목록)를 자유롭게 디자인할 수 있습니다. 특히 list-style 속성은 list-style-type, list-style-image, list-style-position 세 가지 개별 속성을 순서대로 한 번에 설정할 수 있는 단축(shorthand) 속성입니다.
문법(Syntax)
CSS list-style 속성의 기본 문법은 다음과 같습니다.
Selector {
list-style: /*값*/
}예제 1 – list-style-image로 커스텀 불릿 이미지 적용
다음 예제는 list-style-image를 사용해 기본 불릿 대신 이미지를 표시하고, 배경색과 여백으로 리스트를 꾸미는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: flex;
float: left;
list-style-image: url("https://www.tutorialspoint.com/images/reactjs.png");
background: lightseagreen;
list-style-position: inside;
}
li {
background: azure;
margin: 5px 20px;
}
</style>
</head>
<body>
<h3>ReactJS</h3>
<ul>
<li>Lesson 1</li>
<li>Lesson 2</li>
<li>Lesson 3</li>
<li>Lesson 4</li>
<li>Lesson 5</li>
</ul>
</body>
</html>실행 결과
위 코드를 실행하면 각 항목 앞에 ReactJS 로고 이미지가 불릿으로 표시되고, 청록색 배경 위에 항목들이 가로로 배치됩니다.
예제 2 – list-style 단축 속성으로 마커 종류와 위치 지정
이번 예제에서는 list-style 단축 속성을 사용해 그리스 소문자(lower-greek) 마커와 안쪽 위치(inside)를 동시에 지정하고, 배경 이미지를 적용한 순서 목록을 만들어 봅니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
width: 40%;
color: white;
list-style: lower-greek inside;
background-image: url("https://www.tutorialspoint.com/ethereum/images/ethereum-mini-logo.jpg");
}
li {
background-color: rgba(0,0,0,0.6);
margin: 5px 30px;
}
</style>
</head>
<body>
<h2>Ethereum</h2>
<ol>
<li>Smart Contracts</li>
<li>Ganache</li>
<li>Creating Wallet </li>
<li>Deploying Contract</li>
</ol>
</body>
</html>실행 결과
위 코드를 실행하면 각 항목 앞에 α, β, γ 형태의 그리스 소문자 번호가 붙고, 반투명 검은 배경의 항목들이 배경 이미지 위에 표시됩니다.
