[html] 목록 만들 때 사용하는 태그들(<ul>,<li>,<ol>,<dl>,<dt>,<dd>)

목록을 만들 때 사용하는 리스트 태그들에 대해 알아보겠습니다. 리스트 태그는 global navigation bar를 구현할 때 많이 씁니다. 여러 게시글이나 이미지 등을 개념적으로 묶어 관리하고자 할 때 용이한 거 같네요.

 

(1) 순서가 없는 <ul>, <li> 태그

: <ul>의 자식으로 <li>가 옵니다. 구현은 아래와 같이 하면 되는데요. 각 항목 앞에 불릿이 붙고 css의 'list-style-type'으로 불릿 수정이 가능합니다. li간에 순서가 부여되지 않습니다.

<ul>
	<li>순서가 없는 ul 태그</li>
	<li>자식으로 li 태그만 가능</li>
	<li>각 항목 앞에 불릿 붙음</li>
	<li>css로 불릿 수정 가능</li>
</ul>

 

(2) 순서가 있는 <ol>, <li> 태그

: <ol>의 자식으로 <li>가 옵니다. 구현은 다음과 같습니다. 각 항목 앞에 숫자가 붙고 css의 'list-style-type'으로 불릿 수정이 가능합니다.

+<ol> 태그의 속성

  - type 속성 : 불릿 앞의 매겨지는 순서를 숫자, 알파벳 등으로 설정

  - start 속성 : 시작 순서가 몇번째인지 수정

  - reserved 속성 : 역순으로 표시

<ul>
  <li>li태그 안에 자식은 이것저것 사용 가능
    <ol>
      <li>ol태그 안의 자식은 li태그만 가능</li>
      <li>ol태그는 순서가 있는 태그</li>
    </ol>
  </li>
  <li>여기는 ul의 자식인 li태그
    <ol type="a" start ="3">
      <li>type속성은 순서 표기를 어느 타입으로 할지 설정</li>
      <li>start속성은 시작 순서 설정</li>
      <li>reserved속성은 역순으로 표시함</li>
    </ol start>
  </li>
</ul>

 

(2) 설명이 들어가는 <dl>, <dt>, <dd> 태그

: <dl>의 자식으로 '제목'에 해당하는 <dt>와 '설명'에 해당하는 <dd>태그를 사용합니다. <dt>는 하나<dd>는 여러개 사용 가능합니다. 구현은 아래와 같습니다.

<dl>
  <dt>2021년</dt>
  <dd>함께해서 즐거웠고</dd>
  <dd>두번 다시는 만나지 말자</dd>
  <dt>2022년</dt>
  <dd>올테면 와보라 했지만</dd>
  <dd>이렇게 빨리 오란 건 아니었습니다.</dd>
</dl>