리스트에 효과주기
- Coffee
- Tea
- Cocoa
- 사과
- 배
- 바나나
- 포도
- 파인애플
예시
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul.ulist{
list-style-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbTZhZJ%2Fbtq6RMWWdrb%2FThqh4MzZVqAPV3TbyK4nSk%2Fimg.gif"); /* 이미지 넣기 */
}
.olist{
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<ul class="ulist">
<li>Coffee</li>
<li>Tea</li>
<li>Cocoa</li>
</ul>
<ol class="olist">
<li>사과</li>
<li>배</li>
<li>바나나</li>
<li>포도</li>
<li>파인애플</li>
</ol>
</body>
참고
list-style-image
이미지를 마커로 삽입할 수 있다.
list-style-type
마커를 변경해준다.
'IT > CSS' 카테고리의 다른 글
| [bootstrap]bootstrap정의/ bootstrap.min.js 사용예제 (0) | 2021.06.09 |
|---|---|
| [CSS] div태그로 공간 나누기 (0) | 2021.06.09 |
| [CSS] a:link/a:visited/a:hover/a:active (0) | 2021.06.09 |
| [CSS] background속성/창 크기를 줄여도 배경이미지가 잘리지 않게 하는 방법 (0) | 2021.06.09 |
| [CSS] text속성 (0) | 2021.06.09 |