[HTML] HTML 문서에 체계적인 자료 구성하기 - 리스트

HTML 문서에 체계적인 자료 구성하기 - 리스트와 테이블

 

리스트 (List)

 

HTML에서는 예를 들거나 순서를 설명할 때 사용되는 리스트 요소를 제공합니다.
리스트 요소는 크게 세가지로 구분됩니다.

 

• 순서가 있는 리스트(Ordered list)
• 순서가 없는 리스트(Unordered list)
• 내용을 정의하는 리스트(Definition list)

 

순서가 있는 리스트

 

1. 리스트 세트 <ol> 태그와
2. 리스트 요소 <li> 태그로 이루어집니다.

 

순서가 없는 리스트

 

• 리스트 세트 <ul> 태그와
• 리스트 요소 <li> 태그로 이루어집니다.

내용을 정의하는 리스트

• 리스트 세트 <dl> 태그,
• 용어를 정의하는 <dt> 태그,
• 용어를 설명하는 <dd> 태그로 이루어집니다.

---

순서가 있는 리스트!

1. Ordered list 샘플입니다.
2. Ordered list 샘플입니다.
3. Ordered list 샘플입니다.

---

순서가 없는 리스트!

• Unordered list 샘플입니다.
• Unordered list 샘플입니다.
• Unordered list 샘플입니다.

---

내용을 정의하는 리스트!

Definition list

샘플입니다.

Definition list

샘플입니다.

<h3 style="text-align:center;">순서가 있는 리스트!</h3>
    <div>
        <ol>
            <li>Ordered list 샘플입니다.</li>
            <li>Ordered list 샘플입니다.</li>
            <li>Ordered list 샘플입니다.</li>
        </ol>
    </div>
<hr>
<h3 style="text-align:center;">순서가 없는 리스트!</h3>
    <div>
        <ul>
            <li>Unordered list 샘플입니다.</li>
            <li>Unordered list 샘플입니다.</li>
            <li>Unordered list 샘플입니다.</li>
        </ul>
    </div>
<hr>
<h3 style="text-align:center;">내용을 정의하는 리스트!</h3>
    <div>
        <dl>
            <dt>Definition list</dt>
            <dd> 샘플입니다.</dd>
            <dt>Definition list</dt>
            <dd> 샘플입니다.</dd>
        </dl>
    </div>

---

코드가 조금 길지만 그렇게 어렵지는 않아서 천천히 읽어주셨으면 좋겠습니다.😊
<ul> 태그는 때로 css를 덧씌워서 네비게이션 메뉴나 드롭다운 메뉴에서 사용되기도 합니다.

 

---

• 구글
• 네이버
• 티스토리
• 부트스트랩

---

도움이 되어드렸다면 구독 / 좋아요 부탁드립니다.👏🏻

감사합니다.🙂

 

 

* 참고 : http://www.tcpschool.com/