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의 추천글
'Dev > HTML, CSS' 카테고리의 다른 글
| [css] box-shadow로 요소 볼록 튀어나온 효과, 오목 들어간 효과 주기 (2) | 2021.01.14 |
|---|---|
| [css] 스크롤바 예쁘게 꾸미기 (0) | 2021.01.06 |
| [css] 손가락 모양의 커서, cursor:pointer (0) | 2020.12.30 |
| [html] a 태그에서 title 속성의 역할은? (0) | 2020.12.29 |
| [html] 비밀번호를 최소 6자, 최대 12자까지만 입력하게 하려면? input 태그 minlength, maxlength 속성 (2) | 2020.12.16 |
| [css] 링크 효과 관련 a:link, a:visited, a:hover, a:active 정리 (5) | 2020.11.21 |
| [css] 리스트 앞 기호 및 여백 제거하기 (2) | 2020.11.19 |
| [css] div 요소 화면 정중앙에 배치하기, flex box 활용 (0) | 2020.11.08 |