1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<h3>뿌리식물</h3>
<ul type = "square">
    <li>감자</li>
    <li>고구마</li>
</ul>
<ul type = "circle">
    <li>감자</li>
    <li>고구마</li>
</ul>
 
<!--
    type는 1/a/A/I/i/disc/square/circle 등 가능
    start는 무슨 숫자부터 시작할 것인지 선택
-->
<ol type = "1" start = "3">
    <li>감자</li>
    <li>고구마</li>
</ol>
 
 
cs

위의 코드를 적용하면 아래처럼 나옵니다.

html5에서는 type 속성을 지원하지 않지만 이전의 html의 속성을 모두 표현 가능하기 때문에 문제는 없음 

 

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
36
37
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>리스트 만들기</h3>
    <hr>
    <h3>라면 끓이는 순서</h3>
    <!-- ol 리스트는 순서가 있다. -->
    <ol type="A">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ol>
    <ol type="1">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ol>
    <!-- ul 리스트는 순서가 없다. 디폴트값은 disk -->
    <ul>
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ul>
    <ul type="circle">
        <li>물을 끓인다.</li>
        <li>라면과 스프를 넣는다.</li>
        <li>파를 썰어 넣는다.</li>
        <li>5분 후 먹는다.</li>
    </ul>
</body>
</html>
cs

위의 코드를 적용하면 아래와 같이 나옵니다.

'Web > Html_Css' 카테고리의 다른 글

하이퍼링크 예제1  (0) 2020.03.03
테이블 만들기  (0) 2020.03.03
<img> 태그 - html 이미지 넣기  (0) 2020.03.03
메타데이터, metadata  (0) 2020.03.03
<p>태그, <br/>태그, <hr태그> 예시  (0) 2020.03.02

+ Recent posts