Dev/HTML, CSS
[css] 리스트 앞 기호 내가 원하는 이미지로 바꾸려면? list-style-image 속성
bskyvision.com
2020. 12. 18. 09:57
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