[웹코딩의 기초] 모든 태그에는 뜻이 있다 (2) 목록 태그

이번 포스팅은 <목록을 나타내는 태그>와 사용법에 대해 알아보려고 합니다.

목록을 나타내는 태그는 특정 규칙을 따라 작성해야 하기 때문에 외워두시는 것을 추천합니다.
사실 외우지 않으셔도 검색하면 나오긴 하지만 이런 규칙이 있다는 정도는 알아주세요.

이 목록 태그들은 에디터에서 기본적으로 제공되고있는 기능에도 포함되어있어서 보기에 친숙할수도 있겠습니다.

<ul> 

'unorderd list'의 줄임말입니다. 순서 정렬이 필요 없는 목록을 나타냅니다. 
해당 태그를 사용한 목록의 앞에는 기본 스타일로 불릿(작은 점)이 나타납니다

• 이런
• 형식으로요

나름 의도한 순서가 있다 해도 순서를 뒤바꿨을때 내용을 이해하는데 문제 없다면 해당 태그를 사용합니다. 웹페이지에서는 메뉴에도 많이 사용합니다.

<ol> 

'ordered list'의 줄임말입니다. 순서가 필요한 정렬된 목록을 나타냅니다.
해당 태그를 사용한 목록은 숫자. 로 표현됩니다

1. 이렇게
2. 말이죠

<li> 

'list'의 줄임말입니다. 어떤 목록의 각 항목을 나타내는데 사용하는 태그입니다. 후술할 <dl> 태그를 제외한 목록을 나타내는 태그(<ul>, <ol>)의 자식태그는 <li> 태그들로 구성되어야 하며, 반대로 말하면 <li> 태그는 반드시 <ol> 이나 <ul> 태그 안에 위치해야 합니다.

<li> 태그 안에는 다른 태그가 들어가도 됩니다. 또한 <li> 태그 안에 또 목록 태그를 넣어 해당 항목의 하위 목록으로 구성할 수 있습니다. 

예시:

<ul>
    <li>목록 1
        <ol>
            <li><span>서브목록 1-1</span></li>
            <li>서브목록 1-2</li>
        </ol>
    </li>
    <li>목록 2
        <ul>
            <li>서브목록 2-1</li>
            <li>서브목록 2-2</li>
        </ul>
    </li>
    <li>목록 3</li>
</ul>

이렇게 만든 태그는 이런식으로 나타나게 됩니다

• 목록 1
  1. 서브목록 1-1
  2. 서브목록 2-1
• 목록 2
  • 서브목록 2-1
  • 서브목록 2-2
• 목록 3

<dl>

'description list'의 줄임말입니다. 사전과 같이 어떤 단어(용어)가 있고 그것에 대한 내용을 설명하는 형태를 가지는 목록을 만들때 사용합니다.

<dl>태그에는 <dt>와 <dd>두가지의 태그가 사용됩니다.
<dt> 태그는 description term, 즉 용어를 나타내는 태그입니다.
<dd> 태그는 description detail, 용어에 대한 설명을 나타낼때 사용합니다.

그런 이유에서 <dt>와 <dd>는 한 세트로 생각하시면 좋습니다.
약간의 예외인데 <ul>이나 <ol> 의 직속 자식으로는 <li> 태그만 사용 가능한 반면, <dl>안의 각 <dt> + <dd> 요소는 <div>로 감쌀 수 있습니다. (<dt> 하나만 감싸거나 <dd> 하나만 감싸면 안됨)

예시:

<dl>
    <dt>타이틀1</dt>
    <dd>타이틀1에 대한 설명</dd>
</dl>
<dl>
    <div>
        <dt>타이틀2</dt>
        <dd>타이틀2에 대한 설명</dd>
    </div>
    <div>
        <dt>타이틀3</dt>
        <dd>타이틀3에 대한 설명</dd>
    </div>
</dl>

 * <dd> 태그에는 기본 스타일로 좌측 마진이 들여쓰기처럼 들어갑니다. 하지만 단순히 이 들여쓰기를 사용하기 위해 dl 태그를 사용하지 않는것을 권장합니다. (다른 리스트 형식의 태그도 마찬가지)

테이블을 같이 설명할까 했는데 일단은 조금 다른 속성을 가지고 있고 길어질것 같아서 이번에는 여기까지 설명합니다.

후원용 결제상자 (아래는 아무것도 없습니다)