Hongfluenza

순서 리스트 본문

STUDY/HTML5 & CSS

순서 리스트

Hongfluenza 2018. 10. 11. 20:29

순서 리스트는 순서 목록과 단계별 항목을 숫자 또는 문자로 나타낼 때 사용함


목록을 나타내는 일반형은 다음과 같다.


<ol>

<li>항목 1</li>

<li>항목 2</li>

. . .

<li>항목 3</li>

</ol>



<ol>태그


<ol> 태그는 기본적으로 2개의 속성(type, start)을 가지고 있다.


type 속성은 <ol>과 <li>태그에 나타낼 수 있다.


type 속성의 기능


a : 소문자 값

A : 대문자 값

i : 소문자 로마자 값

I : 대문자 로마자 값

1 : 일반 숫자 값


<ol> 태그의 start 속성은 목록의 시작 값을 지정한다.


type 속성이 숫자 또는 문자라도 start의 숫자 값이 적용된다



※실습


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
<!DOCTYPE html>
<html>
  <head>
    <title>순서 리스트의 실습</title>
  </head>
  <body>
    <center><h1>구역과 중앙정렬 실습</h1></center>
    <hr />
    <p>순서 리스트는 매우 단순하다</p>
    <ol>
      <li>항목 1</li>
      <li>항목 2</li>
      <li>항목 3</li>
    </ol>
    <p>순서리스트는 매우 다양한 형을 가지고 있다</p>
    <ol>
      <li type="a">소문자</li>
      <li type="A">대문자</li>
      <li type="i">소문자 로마자</li>
      <li type="I">대문자 로마자</li>
      <li type="1">아라비아 숫자</li>
    </ol>
    <p>순서 리스트는 다른 값과 다른 형으로 나타낼 수 있다</p>
    <ol start="10" type="a">
      <li>j로 시작된다</li>
        <li value="3">c로 시작된다</li>
          <ol>
            <li>내포된 리스트
              <ol>
                <li>내포의 깊이는 무제한이다</li>
              </ol>
            </li>
          </ol>
    </ol>
  </body>
</html>
 
cs


출처 HTML5&CSS3&JQuery

저작자표시

'STUDY > HTML5 & CSS' 카테고리의 다른 글

column과 row  (1) 2018.10.14
cellspacing과 cellpadding 차이점  (0) 2018.10.14
비순서 리스트  (0) 2018.10.11
html 태그  (0) 2018.05.15
'STUDY/HTML5 & CSS' Related Articles more