HTML-List(목록)

---

※ 주의 !

이 글은 개인 공부 목적으로 많은 오류가 있을 수 있습니다. 

문제가 있다면 말씀 부탁 드리겠습니다.

---

안녕하세요 Gon입니다.

 

사실상 거의 모든 웹페이지들에는 목록이 존재합니다. 웹페이지들을 이동하기 쉽게 하기 위해서 말이죠.

 

이번글에서는 HTML에서 목록을 만든는 방법에 대하여 알아보도록 하겠습니다.

 

이 목록을 설정하는 방법은 크게 2가지로 구성이 되어있습니다.  목록의 타입, 목록의 내용으로 말이죠.

Unordered List (숫자가 없는 목록) - <ul>

 

ul 태그를 이용하여 우리는 숫자가 없는 목록을 만들수 있습니다. 

<ul>
	<li>HTML</li>
    <li>컴퓨터상식</li>
    <li>기타</li>
</ul>

위 예시처럼 표현하여 목록을 만들수 있습니다. 안에 목록의 내용물은 li태그를 이용하여 만듭니다.

 

Ordered List(숫자로 표기하는 목록) - <ol>

 

ol 태그를 이용하면 숫자로 표기하여 목록을 만들수 있습니다.

<ol>
	<li>초급</li>
    <li>중급</li>
    <li>고급</li>
</ol>

위 예시처럼 사용하면 됩니다.

 

Description List(설명이 있는 목록) - <dl>

ul과 ol은 항목만이 존재하는 목록이라면 dl 태그는 항목의 주 제목과 설명이 있는 목록입니다.

 

dt와 dd 태그를 이용하여 부연설명을 할수 있습니다.

 

<dl>
	<dt>초급코스</dt>
    <dd>- 기초 상식 및 이론</dd>
    <dt중급코스</dt>
    <dd>- 문법과 사용방법</dd>
    <dt고급코스</dt>
    <dd>- 상황별 예시 고급 표현</dd>
</dl>

 

이렇게 이번글에서는 HTML에서 목록을 어떻게 구성할수 있는지에 대하여 알아보았습니다.

 

감사합니다.

 

Gon