[웹코딩의 기초] 모든 태그에는 뜻이 있다 (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</span></li>
            <li>서브2</li>
        </ol>
    </li>
    <li>목록2</li>
</ul>

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

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

 

 

<dl>

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

<dl> 태그에는 <dt>와 <dd>두가지의 태그가 사용됩니다.

<dt> 태그는 description term, 즉 용어를 나타내는 태그입니다.

<dd> 태그는 description detail, 용어에 대한 설명을 나타낼때 사용합니다.

그런 이유에서 <dt>와 <dd>는 한 세트로 생각하시면 좋습니다

약간의 예외로 <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 태그를 사용하지 않는것을 권장합니다. (다른 리스트 형식의 태그도 마찬가지)

 

 

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

 

* 다음 포스팅에서 또 이어집니다