반응형
안녕하세요.
<ul> ~ </ul> 태그를 사용하여 순서가 없는 목록 태그를 사용합니다.
css3를 사용하여 목록 태그의 불릿을 변경할 수 잇습니다.
list-style-type 속성을 사용하면 쉽게 적용할 수 있습니다.
속성 값으로는 disc, circle, square가 있습니다.
-disc: ●
-circle: ○
-square: ■
|
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
31
32
33
34
35
|
<!DOCTYPE html>
<html>
<head>
<title>codeomni.tistory.com css3 ul list-style-type 목록 태그 스타일 타입 변경 소스 코드 예제</title>
<style>
body {
background-color: #3e86d7;
}
</style>
</head>
<body>
<h1>codeomni</h1>
<div>
<ul style="list-style-type: disc;">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div>
<ul style="list-style-type: circle;">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div>
<ul style="list-style-type: square;">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</body>
</html>
|
cs |
실행 화면입니다.
목록 태그의 불릿이 다양하게 변경할 수 있습니다.
댓글