[HTML 기초] 목록을 만드는 태그 (ol, ul, dl)

목록을 만드는 태그들을 정리해보겠습니다.

1. 순서가 있는 리스트: ol

<ol>은 ordered list의 약자로 순서를 표시하는 리스트이다.

<!--순서가 있는 목록-->
  <ol>
    <li>사과</li>
    <li>바나나</li>
    <li>배</li>
  </ol>

✨ 출력결과

1. 사과
2. 바나나
3. 배

ol은 태그 안에 type이라는 속성을 이용해 다른 순서 목록(영문자, 로마자)을 이용할 수 있다. 기본값은 ol type="1"로 지정되어 있다.

2. 순서가 없는 리스트: ul

<ul>은 unordered list의 약자로 순서가 없는 리스트이다.

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>배</li>
</ul>

✨ 출력결과

• 사과
• 바나나
• 배

ul은 태그 안에 type이라는 속성을 이용해 다른 bullet (텍스트 앞에 붙는 기호) 스타일을 사용 할 수 있다.
속성 값으로는 circle, squre, disc이 있으며 기본 값은 ul type="disc"로 설정되어 있다.

3. 정의 리스트: dl, dt, dd

<dl>는 description list ,<dt>는 description term,<dd>는 description details의 약자이다.
(내가 배웠을 때는 다른 약자로 배웠으나 MDN의 표기대로 작성함)

<dl>
  <dt>목록이란?</dt>
  <dd>
     어떤 물품의 이름을 일정한 순서로 적은 것. 카탈로그.
  </dd>
</dl>

✨ 출력결과

<dl>``<dt>``<dd>는 1:1로 쌍을 이룰 때 사용하는 것을 권장한다.
스크린 리더는 <dt>``<dd>가 1:1로 쌍을 이룰 때 사용하는 것이 정확한 의미를 읽어내어 스크린 리더 이용자의 이해가 쉬워진다.

+ 리스트를 중첩 할 때

리스트를 리스트 안에 중첩해서 사용 할 때는

<ol type="">
  <li>사과
    <ul>
      <li>홍옥</li>
      <li>황옥</li>
    </ul>
  </li>
  <li>바나나</li>
  <li>배</li>
</ol>

이런 식으로 <li> 안에 자식 요소로 들어갈 수 있도록 해줘야한다.