[HTML] 리스트 태그(List tag)

 
 

1. 리스트 태그 (List tag)

---

리스트 관련 태그들은 텍스트나 이미지 등을 목록화하여 정리해주고 카테고리 등을 표현하기 위해서도 자주 사용되는 중요한 태그 중 하나다.
 
 
 
 
 

2. 리스트 태그 종류

---

리스트는 세 종류가 있다.
 
1. Ordered List: 순서가 있는 리스트
2. Unordered List: 순서가 없는 리스트
3. Definition List: 정의 리스트
 
 
 
 

3 - (1) Ordered List (ol 태그)

---

<ol> 태그는 순서가 있는 리스트이다.
따라서 순서가 중요한 목록에서 많이 사용되며 앞뒤 연결성이 있는 내용을 만들 때 주로 사용한다.
 
요리 레시피 같은 경우에 이 태그를 사용할 수 있을 것 이다.
 
 
<ol>안에 각 항목들을 나열할 때 <li>를 사용하는데 li는 List item의 약자이다.

    <h1>Ordered List</h1>
    <ol>
        <li>list item a</li>
        <li>list item b</li>
        <li>list item c</li>
    </ol>

 

Ordered List

1. list item a
2. list item b
3. list item c

 
 
 

 
3 - (2) Unordered List

---

<ul> 태그는 순서가 없는 리스트 이다. 따라서 순서가 중요하지 않는 목록에서 사용한다.

<h1>Unordered List</h1>
    <ul>
        <li>list item Unordered</li>
        <li>list item Unordered</li>
        <li>list item Unordered</li>
    </ul>

 

Unordered List

• list item Unordered
• list item Unordered
• list item Unordered

 
 

 

*<ol>, <ul> key point
 
1. 자식 요소로 <li>만 사용가능하다. 따라서 <p>, <h1> 등 다른 요소가 올 수 없다.
 
2. <div>사용시 올바른 표기방법
 
 
 
1) 올바른 방법

<ul>
    <li>
        <div>올바른 방법</div>
    </li>
</ul>

 
 
 

2) 올바르지 않은 방법

<ul>
    <div>
        <li>올바르지 않은 방법</li>
    </div>
</ul>

<div>를 사용하고 싶다면 <li>를 먼저 만든 후에 그 안쪽으로 <div>를 작성해야 한다.
 
 
 
 
 

3 - (3) Definition List

---

<dl> 태그는 사전처럼 용어를 설명하는 목록을 만들때 사용한다.
 

    <h1>Definition List</h1>
    <dl>
        <dt>definition term A</dt>
        <dd>definition - A</dd>
        <dt>definition term B</dt>
        <dd>definition - B</dd>
    </dl>

 

Definition List

definition term A
       definition - A
definition term B
       definition - B

 
 
 
 
*주의할점

1. <dt>에 대한 설명을 꼭 적어주어야 한다.
 
 
1) 틀린 예제

<dl>
    <dt>ol 태그</dt>
    <dd>순서가 있는 태그</dd>
    <dt>ul 태그</dt>
</dl>

두번째 <dt>이후 <dt>에 대한 설명인 <dd>가 없기 때문에 틀렸다.

 
 
 
 

2) 옳은 예제

<dl>
    <dt>ol 태그</dt>
    <dt>ul 태그</dt>
    <dd>List tag</dd>
</dl>

<dt>가 연속으로 나오고 이후<dd>가 앞의 <dt>들을 동시에 설명하는 경우는 괜찮다.
 
 
 
 
 
2. <dl>의 자식요소는 <div>, <dt>, <dd>만 올 수 있다.

<dl>
    <section>
        <dt>ol 태그</dt>
        <dd>순서가 있는 태그</dd>
    </section>
</dl>

위의 예제에서 <section>은 들어가면 안된다.
 
 
 
 
3. <dt>,<dd>는 <dl>없이 단독으로 쓰일 수 없다.

<dt>ol tag</dt>