• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Lists</title>
7
    <style>
8
        .circle { list-style-type: circle; }
9
        .square { list-style-type: square; }
10
        .upperAlpha { list-style-type: upper-alpha; }
11
        .lowerRoman { list-style-type: lower-roman; }
12
    </style>
13
</head>
14
​
15
<body>
16
​
17
    <h1>list-style-type 속성을 이용한 마커의 변경</h1>
18
​
19
    <ul class="circle">
20
        <li>사과</li>
21
        <li>멜론</li>
22
        <li>바나나</li>
23
    </ul>
24
​
25
    <ul class="square">
26
        <li>수박</li>
27
        <li>참외</li>
28
        <li>옥수수</li>
29
    </ul>
30
​
31
    <ol class="upperAlpha">
32
        <li>감자</li>
33
        <li>상추</li>
34
        <li>고구마</li>
35
    </ol>
36
​
37
    <ol class="lowerRoman">
38
        <li>오이</li>
39
        <li>배추</li>
40
        <li>시금치</li>
41
    </ol>
42
​
43
</body>
44
​
45
</html>