2020-12-18 09:57:35

ul 태그와 li 태그를 사용하면 리스트 앞에 다음과 같은 기호가 붙습니다. 

 

 

오늘은 이 리스트 앞 기호를 내가 원하는 이미지로 대체하는 방법에 대해서 소개해드리려고 합니다. 

 

css에서 li를 선택해준 다음에 list-style-image 속성의 값에 url("이미지가 있는 주소")를 넣어주면 됩니다. 저는 재미삼아 제 증명사진을 리스트 기호 대신에 넣어봤습니다. 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<style>
    li {
        list-style-image: url("./me.jpg");
    }
</style>
<body>
    
<ul>
    <li>
        첫번째 리스트입니다.
    </li>
    <li>
        두번째 리스트입니다.
    </li>
    <li>
        세번째 리스트입니다.
    </li>
</ul>
 
</body>
</html>
cs

 

위와 같이 코드를 짰더니, 다음과 같이 리스트 앞 기호가 제 증명사진으로 대체되었습니다. 

 

 

물론 이렇게 증명사진을 리스트 앞 기호로 사용하는 경우는 아주 드물겠지만, 다음과 같은 예쁜 이미지를 넣어주는 경우는 꽤 많겠죠? ㅎㅎ

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<style>
    li {
        list-style-image: url("./folder.png");
        font-size: x-large;
    }
</style>
<body>
    
<ul>
    <li>
        첫번째 폴더입니다.
    </li>
    <li>
        두번째 폴더입니다.
    </li>
    <li>
        세번째 폴더입니다.
    </li>
</ul>
 
</body>
</html>
cs

 

 

이렇게 해주니 웹사이트의 카테고리를 나타낼 때 기본 리스트 기호 대신 쓰면 괜찮겠다는 생각이 들죠?

 

참고로 위 폴더 이미지의 출처는 다음과 같습니다. 필요하신 분은 여기에 들어가서 다운받아서 쓰시기 바랍니다. 

 

Icons made by dmitri13 from www.flaticon.com

 

bskyvision의 추천글

[css] 리스트 앞 기호 및 여백 제거하기