[HTML] #4 리스트 태그 ol, ul, li, dl, dt, dd, 컨텐츠 분할을 위한 태그 div, span

ol, ul, li 리스트 태그

리스트를 표현할 수 있는 태그로, html 문서에 많이 사용되는 태그들 중에서도 많이 사용되는 태그라고 할 수 있습니다.

우선 'ol' 태그는 순서가 있는 리스트를 표현하는 태그이며, 'ul' 태그는 순서가 없는 리스트를 표현할 때 사용하는 태그입니다. 'li' 태그는 ol과 ul 내에 사용되는 태그로 항상 ol 또는 ul과 함께 사용돼야 하며, 둘 중 하나만 사용할 수는 없습니다.

그리고 ol과 li 또는 ul과 li 사이에는 다른 태그가 올 수 없지만 li 태그 안에는 다양한 다른 태그를 작성할 수 있습니다.

 

<ol>
	<li>감자를 1/4 크기로 자른다.</li>
	<li>부드러워질 때까지 15분~20분 동안 소금물에 서서히 끓인다.</li>
	<li>감자의 물을 따라 내고 으깬다.</li>
	<li>우유, 버터, 육두구를 데운다</li>
	<li>우유 혼합물에 넣고 섞는다.</li>
</ol>

<ul>
	<li>감자 3개</li>
	<li>육두구 1t</li>
	<li>소금 1t</li>
	<li>생크림 500ml</li>
	<li>버터 1T</li>
</ul>

↓

---

1. 감자를 1/4 크기로 자른다.
2. 부드러워질 때까지 15분~20분 동안 소금물에 서서히 끓인다.
3. 감자의 물을 따라 내고 으깬다.
4. 우유, 버터, 육두구를 데운다
5. 우유 혼합물에 넣고 섞는다.

• 감자 3개
• 육두구 1t
• 소금 1t
• 생크림 500ml
• 버터 1T

---

 

 

dl 정의형 목록 태그

'dl' 태그는 정의형 목록 태그로 용어의 정의, 설명, 참고문헌, 메타데이터 등 다양한 정보에 사용 가능합니다.

다만, 일부 OS에서 dl의 정의가 다르기 때문에 접근성의 면에서는 사용이 좋지는 않습니다.

dl태그에는 'li' 태그가 아니라 'dt'와 'dd' 태그를 사용하며 'dt'는 항목의 제목, 용어 등을 작성하고, 'dd'에는 위의 제목이나 용어에 대한 설명을 작성하는 부분입니다. dl은 ol, ul과 달리 dl과 dt, dd 사이에 다른 태그를 작성할 수 있습니다.

<dl>
	<dt>html이란?</dt>
	<dd>하이퍼텍스트 마크업 랭뒤지로, 웹문서의 구조를 담당한다.</dd>
</dl>

↓

---

html이란?

하이퍼텍스트 마크업 랭뒤지로, 웹문서의 구조를 담당한다.

---

 

컨텐츠 분할 태그

div

'div' 태그는 division의 약자로, html 문서의 가장 대표적인 블록 요소입니다. 구조를 나누고 css 또는 javascript로 문서의 특정 부분을 제어하기 위해서 사용되는 태그입니다. 특징으로는 브라우저 화면에 나타나는 스타일, 특징이 없다는 게 div태그의 특징입니다.

 

span

'span' 태그는 가장 대표적인 인라인 요소입니다. 인라인의 형태로 구조를 나누기 위한 태그로 div와 같이 브라우저 상에 나타나는 특징이 없습니다. 

주로 다른 텍스트와 구분하고 싶지만 적절한 태그가 없을 때 사용이 된다고 합니다.