list-style-image는 목록 형태에서 스타일을 불릿과 번호 대신 이미지로 지정할 수 있음
티스토리 뷰
1. 개념
list-style-image - 목록 스타일을 이미지로 넣기
2. 태그
list-style-image
html5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!
DOCTYPE
html>
<html lang
=
"kr"
>
<head>
<meta charset
=
"utf-8"
>
<title>
키보드와 하루
</title>
</head>
<body>
1
<ul style
= '
list-style-image
:
url(image1.png)
'
>
<li>
목록1
</li>
<li>
목록2
</li>
<li>
목록3
</li>
</ul>
2
<ul style
= '
list-style-image
:
url(image2.png)
'
>
<li>
목록4
</li>
<li>
목록5
</li>
<li>
목록6
</li>
</ul>
</body>
</html>
|
결과 화면
코드 설명
1
list-style-image
:
url(image1.png)
;
블롯이나 번호와 같은 스타일 대신 image를 사용하면 1번과 같이 나오게 됩니다.
2
list-style-type
:
url(image2.png)
;
두번째는 image2에 해당하는 이미를 가져다가 목록 앞에 놨습니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] list-style - 목록 속성 한꺼번에 지정 (0) | 2021.04.12 |
|---|---|
| [css3] list-style-position - 목록에서 들여쓰기 (0) | 2021.04.12 |
| [css3] list-style-type - 목록 불릿과 번호 스타일 지정 (0) | 2021.04.09 |
| [css3] text-overflow - 넘치는 텍스트 표기 (0) | 2021.04.08 |
| [css3] line-height - 줄 간격 조절 (0) | 2021.04.07 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday