HTML 목록으로 정보를 나열해야할 때

HTML 목록으로 정보를 나열해야할 때

목록을 나열하는 태그

비순차적 목록 태그 / 순차적 목록 태그 / 정의형 목록 태그 - 3가지의 목록형 태그가 있다
필요에따라 사용하면된다.


01. 비순차적 목록 (Unordered List)

<ul>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ul>
  • 기본값으로 블록요소이며 점으로 목록을 표시한다.
  • <ul>태그 = 부모태그 , <li> 태그 = 자식태그로 둘이 한쌍으로 존재한다.
  • <li> 태그는 목록(list)의 내용을 담는 태그이다.
  • <li> 태그는 반드시 <ul> 태그안에 감싸여 있어야한다.
  • <li> 의 내용에 다른 태그를 써서 하이퍼링크를 걸거나 할때는 반드시 <li>태그 내부에 작성한다.

📍출력물

  • list1
  • list2
  • list3

02. 순차적 목록 (Orderd List)

<ol>
  <li>list1</li>
  <li>list2</li>
  <li>list3</li>
</ol>
  • <ol> 태그도 동일하게 <li>태그와 한쌍을 이룬다.
  • 숫자 목록이하는 것을 제외하면 나머지는 동일하다.

📍출력물

  1. list1
  2. list2
  3. list3

03. 정의형 목록 (Definition List)

<dl>
  <dt>list1</dt>
    <dd>이건 list1에 대한 설명이다.</dd>
  <dt>list2</dt>
    <dd>이건 list1에 대한 설명이다.</dd>
  <dt>list3</dt>
    <dd>이건 list1에 대한 설명이다.</dd>
</dd>
  • <dl> 태그는 위 두개의 목록 태그와 다르게 <dt>, <dd>태그들과 한쌍을 이룬다.
  • <dt> 는 정의 제목(definition title)을 뜻하며 <dd> 는 정의 내용(definition description)을 뜻한다.
  • 정의 내용은 정의 제목보다 들여쓰기가 되어 출력되는 것을 볼 수 있다.

📍출력물

list1
이건 list1에 대한 설명이다.
list2
이건 list1에 대한 설명이다.
list3
이건 list1에 대한 설명이다.
</dd>

Tips.

사실 <ol> 태그는 거의 사용할 일이 없다고 보면된다.
가장많이 사용되는 목록태그는 <ul> 태그이다.



⭐️지난 포스팅에 이어서 html 문서에 정보들을 질서정연한 목록의 형태로 출력하는 태그들에 대해서 알아보았습니다.

HTML 인라인과 블록요소
Older post

HTML 인라인과 블록요소