10. ul태그, ol태그, dl태그 _ 리스트태그

ul태그, ol태그, dl태그는 리스트 태그입니다.

줄줄이 비엔나로 생긴 애들을 만들어주는 태그에요
각각 조금씩 다른 특성이 있습니다.

ol

ol은 순서가 있는 리스트를 나타냅니다.
리스트 앞부분에 순서대로 번호가 매겨집니다.
예를 들면 인기 순위라던지 번호가 있는 안내문 같은데 쓰이겠네요.
ol태그는 li태그를 넣고 다니는데 반드시 ol태그를 열고 난 바로 뒤에 li태그가 나옵니다.
'리스트태그 > li태그 > 그외 태그 및 텍스트' 이런 순으로 써야하죠.

<ol>
   <li> 나는 리스트 태그야 </li>
   <li> 순서가 있지 </li>
   <li> 번호가 생겨 </li>
</ol>
 

1. 나는 리스트 태그야
2. 순서가 있지
3. 번호가 생겨

ul

ul은 딱히 순서가 필요없는 리스트에 쓰입니다.
리스트 앞부분에 번호대신 글머리 기호가 나타납니다.
글머리 기호는 여러가지로 변경할 수 있는데 뒤에 css에서 다루도록 할께요.
예를 들면 인기 순위라던지 번호가 있는 안내문 같은데 쓰이겠네요.
ul태그는 역시 열린 후에는 바로 li태그가 와야 합니다.

<ul>
   <li> 나도 리스트 태그야 </li>
   <li> 순서가 없어 </li>
   <li> 대신 글머리 기호를 달고 있어  </li>
</ul>
 

• 나도 리스트 태그야
• 순서가 없어
• 대신 글머리 기호를 달고 있어

dl

dl은 앞의 두 리스트와 조금 다르게 설명리스트 입니다.
li태그 대신 dt태그와 dd태그를 쓰는데 사전같은데서 단어를 설명하는 역할을 합니다.
dt에는 단어를, dd에는 단어에 대한 설명이 나오면 됩니다.
dl은 상당히 의미상으로 정확히 쓰는 것도, 나중에 스타일 맞추기도 빡센 태그입니다.

<dl>
   <dt> 단어 </dt>
   <dd> 단어에 대한 설명 </dd>
   <dt> 단어2 </dt>
   <dd> 단어2에 대한 설명 </dd>
</dl>
 

단어

단어에 대한 설명

단어2

단어2에 대한 설명

* 개인적인 공부를 정리하는 블로그입니다.