• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>CSS Lists</title>
7
    <style>
8
        .outside { list-style-position: outside; }
9
        .inside { list-style-position: inside; }
10
    </style>
11
</head>
12
​
13
<body>
14
​
15
    <h1>list-style-position 속성을 이용한 리스트 요소의 위치 설정</h1>
16
​
17
    <p>이 리스트는 위치를 outside로 지정했습니다.(기본설정)</p>
18
    <ul class="outside">
19
        <li>사과</li>
20
        <li>멜론</li>
21
        <li>바나나</li>
22
    </ul>
23
    <br>
24
​
25
    <p>이 리스트는 위치를 inside로 지정했습니다.</p>
26
    <ul class="inside">
27
        <li>수박</li>
28
        <li>참외</li>
29
        <li>옥수수</li>
30
    </ul>
31
​
32
</body>
33
​
34
</html>