티스토리 뷰

Programming/HTML5

[HTML5] 목록(ol, ul, dl) 태그

와우소년 2020. 6. 11. 22:38

태그

설명

속성

결과

<ol>

type의 배열에 맞춰 리스트를 정렬한다.
 (A, a, I , i, 1)

<ol type="A" start = "1">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ol>

<영어 대문자>
A. 리스트1
B. 리스트2
C. 리스트3

<ol type="a" start = "1">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ol>

<영어 소문자>
a. 리스트1

b. 리스트2
c. 리스트3

<ol type="I" start = "1">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ol>

<로마 대문자>
I. 리스트1

II. 리스트2
III. 리스트3

<ol type="i" start = "1">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ol>

<로마 소문자>
i. 리스트1
ii. 리스트2
iii. 리스트3

<ol type="1" start = "1">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ol>

<숫자>
1. 리스트1

2. 리스트2
3. 리스트3

<ul>

기호를 앞에 붙여서 리스트를 나열한다.(disc, circle, square)

<ul type = "disc">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>
</ul>

<속이 찬 원형블릿>
● 리스트1
● 리스트2
● 리스트3

<ul type = "circle">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>

</ul>

<속이 빈 원형블릿>
○ 리스트1
○ 리스트2
○ 리스트3

<ul type = "square">
   <li>리스트1</li>
   <li>리스트2</li>
   <li>리스트3</li>

</ul>

<속이 빈 사각블릿>
□ 리스트1
□ 리스트2
□ 리스트3

<dl>

ul과 비슷하게 순번이 없는 목록으로 제목과 설명을 묶어서 출력

<dl>
   <dt>리스트1</dt>
   <dd>1번입니다<dd>

   <dt>리스트2</dt>
   <dd>2번입니다<dd>
   <dt>리스트3</dt>
   <dd>3번입니다<dd>

</dl>

리스트1     1번입니다.
리스트2     2번입니다.
리스트3     3번입니다.

 

'Programming > HTML5' 카테고리의 다른 글

[HTML5] 텍스트 관련 태그  (0) 2020.06.11
[HTML5] HTML의 버전과 선언  (0) 2020.06.02
[HTML5] HTML의 기본구조  (0) 2020.06.02
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2026/04   »
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
글 보관함