[HTML] HTML에서 목록을 만들 때 쓰는, 목록 태그(Lists)

목록 태그(Lists)

---

목록 태그(Lists)

---

- 다양한 유형의 목록을 사용해서 특성에 따라 정보를 그룹화해서 사용자에게 방향을 제시하는 태그.

 

목록 태그의 종류

---

- ul , ol, li, dl 4가지가 존재해.

1. ul

- unordered-list(비정렬 목록, 정렬되지 않은 목록) 의 약자
- ol과 반대로 순서가 중요하지 않은(또는 없는) 목록에 사용해.
- 일반적인 메뉴, 카테고리, 비슷한 구조의 반복 등에 사용하면 돼.
- 자식으로 반드시 li만 가질 수 있어.

<작성예시>

출처 : w3c

<ul>
    <li>Corn</li>
    <li>Tomatoes</li>
    <li>Beans</li>
    <li>Onions</li>
    <li>Garlic</li>
</ul>

 

2. ol

-  ordered-list(정렬된 목록)의 약자야.
- 순서가 중요한 목록은 ol태그로 감싸서 나타내야 해.
- 자식으로 반드시 li만 가질 수 있어.

<작성예시>

<ol>
    <li>Cook beans for 45 minutes.</li>
    <li>Cut vegetables in small cubes.</li>
    <li>Sauté onions and garlic.</li>
    <li>Deglaze using the tomatoes.</li>
    <li>Add corn and beans.</li>
</ol>

 

3. li

- list item의 약자. 목록의 항목을 나타내주는 요소야.
- 그래서 반드시 목록인 ul, ol 태그 안에서 쓰여.
- 목록인 ul, ol이 부모요소라면 li는 자식 요소라고 할 수 있어.

 

중첩 목록

- 모든 목록은 다른 목록에 중첩될 수 있어

<ul>
    <li>Milk</li>
    <li>Cheese
        <ul>
            <li>Blue cheese</li>
            <li>Feta</li>
        </ul>
    </li>
</ul>

 

<작성예시>

<ol>
    <li>
        재료 준비
        <ul>
            <li>45분 동안 콩을 익힙니다.</li>
            <li>야채를 작은 입방체로 자릅니다.</li>
        </ul>
    </li>
    <li>양파와 마늘을 볶습니다.</li>
    <li>토마토를 사용하여 디글레이즈하십시오.</li>
    <li>옥수수와 콩을 추가합니다.</li>
</ol>

 

4. dl

- Description lists의 약자야. 설명 목록이라고 하지.
- 하나 이상의 용어 및 설명 그룹으로 구성 돼.
- 각 그룹화는 하나 이상의 용어(요소 내용<dt>)를 하나 이상의 설명(요소 내용 <dd>)과 연결해.
- 그룹화의 목록의 첫 번째 항목 또는 <dt>요소가 요소 뒤에 올때마다 시작돼<dd>.

<작성예시>

<dl>
  <dt>저자</dt>
  <dd>남자</dd>
  <dd>루크</dd>
  <dt>편집자</dt>
  <dd>솔직한</dd>
</dl>

 

- 참고 자료 -

https://developer.mozilla.org/ko/docs/Web/HTML/Element/li

https://www.w3.org/WAI/tutorials/page-structure/content/#lists

https://seulbinim.github.io/WSA/grouping.html#div-%EC%9A%94%EC%86%8C

https://dydals5678.tistory.com/117