목록 관련 태그정리(HTML)

<ul>, <li> 태그

- 순서가 필요없는 목록을 만들 때 <ul> 태그를 사용하고 <ul>태그 안에 <li>태그로 각 항목을 나타낸다.

<ul>
	<li>목록</li>
    <li>목록</li>
    <li>목록</li>
    <li>목록</li>
</ul>

• 목록
• 목록
• 목록
• 목록

 

<ol>, <li> 태그

- 순서가 필요한 목록을 만들 때 ul태그 대신에 ol 태그를 사용한다. 순서를 나타내는 방법은 숫자, 영문소문자. 영문 대문자, 로마숫자 소문자, 로마숫자 대문자가 있다. 순서를 나타내는 방법은 type 속성으로 지정한다.

<ol type="l">
	<li>숫자</li>
    <li>숫자</li>
</ol>
<ol type="a">
	<li>영문소문자</li>
    <li>영문소문자</li>
</ol>
<ol type="A">
	<li>영문대문자</li>
    <li>영문대문자</li>
</ol>
<ol type="i">
	<li>로마소문자</li>
    <li>로마소문자</li>
</ol>
<ol type="I">
	<li>로마대문자</li>
    <li>로마대문자</li>
</ol>

1. 숫자
2. 숫자

1. 영문소문자
2. 영문소문자

1. 영문대문자
2. 영문대문자

1. 로마소문자
2. 로마소문자

1. 로마대문자
2. 로마대문자

- start 속성으로 리스트 시작 숫자를 중간 번호부터 시작할 수 있다.

 

<ol type="l" start=3>
	<li>숫자</li>
    <li>숫자</li>
    <li>숫자</li>
    <li>숫자</li>
</ol>

3. 숫자
4. 숫자
5. 숫자
6. 숫자

- reversed 속성으로 역순으로 표시할 수 있다.

<ol type="l" reversed="reversed">
	<li>숫자</li>
    <li>숫자</li>
    <li>숫자</li>
    <li>숫자</li>
</ol>

1. 숫자
2. 숫자
3. 숫자
4. 숫자

 

<dl>, <dt>, <dd> 태그

- <dl> 태그는 제목과 설명이 한쌍으로 여러개의 설명 목록을 만들때 사용한다. <dl> 태그는 목록을 만들고 <dt> 태그는 제목을 <dd>태그는 설명을 표시한다. 

<dl>
	<dt>제목1</dt>
    <dd>설명1</dd>
    <dd>설명2</dd>
    
    <dt>제목2</dt>
    <dd>설명1</dd>
    <dd>설명2</dd>
    
    <dt>제목3</dt>
    <dd>설명1</dd>
    <dd>설명2</dd>
</dl>

제목1

설명1

설명2

제목2

설명1

설명2

제목3

설명1

설명2