웹 페이지에서 순서 없는 목록(<ul>)의 글머리 기호를 자유롭게 꾸미고 싶다면 CSS의 list-style 속성을 활용하면 됩니다. 이 속성은 브라우저에서 기본적으로 제공하는 글머리 기호를 제거하거나 다른 형태로 바꾸는 데 사용됩니다. 여기에 :hover 가상 클래스와 box-shadow, font-size 등을 조합하면 마우스를 올렸을 때 항목이 강조되는 간단한 애니메이션 효과도 손쉽게 구현할 수 있습니다.
list-style 속성의 문법
CSS list-style 속성의 기본 문법은 다음과 같습니다.
li {
list-style: /*값*/;
}값으로 none(기호 제거), disc, circle, square 등을 지정할 수 있으며, 순서 있는 목록에서는 decimal, upper-alpha 같은 번호 스타일도 사용 가능합니다.
예제 1: 순서 없는 목록에 호버 애니메이션 적용
아래 예제는 list-style: none으로 기본 글머리 기호를 제거한 뒤, 왼쪽 방향의 box-shadow를 배경처럼 활용하고 마우스를 올렸을 때 그림자 색상과 글자 크기가 변하도록 만든 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
li {
margin: 3px 0;
padding: 2%;
width: 28%;
line-height: 1.2%;
list-style: none;
border-radius: 5% 0 0 5%;
box-shadow: -10px 2px 4px 0 chartreuse;
color: cornflowerblue;
}
li:hover {
box-shadow: -10px 2px 4px 0 blue!important;
font-size: 1.4em;
}
</style>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 목록 항목에 마우스를 올리면 그림자가 파란색으로 바뀌고 글자 크기가 커지면서 항목이 강조됩니다.
예제 2: 순서 있는 목록에 카운터 기반 애니메이션 적용
두 번째 예제는 CSS 카운터(counter-reset, counter-increment)와 ::before 가상 요소를 사용해 순서 있는 목록(<ol>)의 번호를 직접 디자인한 사례입니다. 마우스를 올리면 내부 그림자(inset box-shadow)의 색상이 연두색으로 전환되고 글자 크기가 커지는 효과가 나타납니다.
<!DOCTYPE html>
<html>
<head>
<style>
ol {
list-style: none;
counter-reset: li;
overflow: hidden;
}
li {
margin-right: 10%;
padding: 2%;
width: 15%;
float: left;
line-height: 1.2%;
font-weight: bold;
counter-increment: li;
box-shadow: inset 2px 14px 10px lightblue;
}
li:hover {
box-shadow: inset 6px 14px 10px lightgreen!important;
font-size: 1.4em;
}
li::before {
content: counter(li);
color: seagreen;
display: inline-block;
width: 40%;
margin-left: -2em;
}
</style>
</head>
<body>
<ol>
<li>a</li>
<li>b</li>
<li>c</li>
</ol>
</body>
</html>위 코드를 실행하면 다음과 같은 결과가 출력됩니다. 각 항목 앞에 초록색 번호가 표시되고, 마우스를 올리면 배경 그림자와 글자 크기가 부드럽게 변경됩니다.
핵심 정리
목록의 글머리 기호를 애니메이션으로 꾸밀 때 기억해야 할 포인트는 다음과 같습니다.
- list-style: none으로 기본 글머리 기호나 번호를 제거합니다.
- 순서 있는 목록에서는 CSS 카운터와 ::before 가상 요소로 원하는 형태의 번호를 직접 만들 수 있습니다.
- :hover 가상 클래스에 box-shadow, font-size 등의 변화를 지정하면 별도의 JavaScript 없이도 간단한 인터랙티브 애니메이션을 구현할 수 있습니다.
- 더 부드러운 전환 효과가 필요하다면 transition 속성을 함께 추가하는 것이 좋습니다.