HTML 리스트 태그

HTML 리스트 태그 (list tag) – HTML/CSS 따라하기 7

by

HTML 리스트 태그

리스트에는 세가지 종류가 있습니다. 순서있는 리스트 Ordered List 순서없는 리스트 Unordered List 정의 리스트 Definition List 입니다.

순서가 있다는 것은 앞뒤 연결성이 있는 내용을 만들 때 사용합니다. 흔히 어떤 일 처리 프로세스가 해당하죠. 예를 들면 요리 레시피는 순서가 있습니다.

순서가 없는 리스트는 나열하는 식의 리스트입니다. 예를 들어 프로그래밍 언어를 나열해보면 Python, Ruby, Java, Javascript 등을 순서없이 적을 수 있습니다. 단순 나열이니까 순서가 딱히 필요없죠.

정의하는 리스트는 형식적인 부분인데 용어사전 같이 서로 관련은 없지만 모아두는 문서들 만들 때 유용하게 사용할 수 있습니다.

한가지 주의할 점은 HTML은 그야말로 쌩짜의 와꾸라서 결국 프로페셔널한 웹페이지를 만들기 위해서는 CSS로 메이크업을 해줘야 한다는 점입니다. 리스트는 웹문서를 만들다 보면 사용할 일이 많습니다. 웹사이트의 맵을 만들 때도 사용할 수 있고 일의 순서를 적을 때도 유용합니다.

HTML의 리스트와 별개로 프로그래밍 언어에서 리스트는 알고리즘이 들어가는 자료형입니다. (링크드 리스트같은) 기술적인 내용은 전혀 다르지만 순서가 있을 수도 있고 없을 수도 있는 동일한 자료를 배열하는 형식으로 사용한다는 점에서 비슷한 점이 있습니다. 그래서 백엔드의 DB에서 가져온 리스트 데이터를 웹브라우저에 뿌려주는데도 사용할 수 있습니다.

ol태그(Ordered List)

ol 태그는 순서가 있는 리스트입니다. 안에 li 태그를 추가하면 자동으로 리스트에 숫자가 표시됩니다.

    <h2>Ordered List</h2>
    <ol>
        <li>list item - a</li>
        <li>list item - b</li>
        <li>list item - c</li>
    </ol>

Ordered List

  1. list item – a
  2. list item – b
  3. list item – c

ul태그(Unordered List)

ul 태그는 순서가 없는 리스트입니다. 불릿 표시를 기본으로 표시하지만 이것은 CSS속성에서 다른 유니코드나 아이콘으로 변경이 가능합니다. 보통은 디자인 요소를 위해 쎄끈한 아이콘으로 변경해서 사용하지요.

<h2>Unordered List</h2>
    <ul>
        <li>list item Unordered</li>
        <li>list item Unordered</li>
        <li>list item Unordered</li>
    </ul>

Unordered List

  • list item Unordered
  • list item Unordered
  • list item Unordered

dl태그 (Definition List)

dl 태그는 용어의 정의 같은 리스트입니다. 용어를 정의할 때 사용합니다.

    <h2>Definition List</h2>
    <dl>
        <dt>definition term A</dt>
        <dd>definition - A</dd>
        <dt>definition term B</dt>
        <dd>definition - B</dd>
    </dl>

Definition List

definition term A
definition – A
definition term B
definition – B

리스트 중첩하기

리스트는 계층구조기 때문에 리스트 안에 리스트를 중첩하는게 가능합니다.

대주제 -> 소주제나 상위 카테고리 -> 하위 카테고리 같은 계층이 필요한 문서를 만들 때 유용합니다.

사용방법은 ol 이나 ul 이나 상관없이 li 태그 아래에 넣으면 됩니다.

    <h2>Nested List</h2>
    <ul>
        <li>normal A</li>
        <li>nested B
            <ol>
                <li>nested one</li>
                <li>nested two</li>
                <li>nested three</li>
            </ol>
        </li>
        <li>normal last</li>
    </ul>

Nested List

  • normal A
  • nested B
    1. nested one
    2. nested two
    3. nested three
  • normal last

요약

HTML 리스트에 대해서 알아봤습니다. 간단하지만 유용한 태그입니다. 사용법을 잘 숙지하면 바로 써먹을 수 있습니다.

홈으로

참고문서

<ol> – HTML: Hypertext Markup Language | MDN (mozilla.org)

Leave a Comment