목록 태그
목록 태그
목록 태그는 HTML에서 정보를 정렬하고 구조화하는 데 사용되는 중요한 도구입니다. '한글과컴퓨터'의 '한컴오피스' 또는 '마이크로소프트'의 'Word' 프로그램에서 사용하는 목록 기능과 비슷합니다. 최초의 웹 브라우저는 단순히 HTML 리더기였고, HTML은 문서를 표현하는 양식이었음을 기억해야 합니다. 목록 태그는 문서에 중요한 구성요소입니다.
순서가 있는 목록(ol)과 순서가 없는 목록(ul)으로 나뉘며, 목록의 각 항목은 li 태그로 표현합니다. 이제 각 태그의 특징과 사용 방법을 살펴보겠습니다.
1. ol
<ol>태그는 ordered list의 약자로 순서가 있는 목록을 나타냅니다. 이 태그를 사용할 때는 구성 요소가 순서가 있는지 없는지를 판단하여 사용하시면 됩니다. 목록은 여러 가지가 있습니다. 예를 들어 웹 서비스에 메뉴, 현재 있는 페이지를 나타내는 브레드 크럼, 검색 결과 목록 등이 있습니다. 이러한 목록 중 순서가 중요한 목록을 나타낼 때 사용합니다.
자식으로는 <li> 태그만 사용할 수 있습니다. <ol>바로 아래 <div>와 같은 태그를 넣지 않도록 주의해야 합니다.
위 코드는 순서가 있기 때문에 <ol>태그를 사용했습니다.
2. ul
<ul>태그는 unordered list의 약자로 순서가 없는 목록을 나타냅니다. 이 태그는 순서가 중요하지 않은 목록을 나타낼 때 사용합니다. 주로 웹 서비스에서 메뉴를 <ul>태그를 작성하여 나타냅니다. 여러분이 들어가시는 웹 서비스에 메뉴 소스코드를 한 번 확인해 보세요.
<ol>과 마찬가지로 자식으로는 <li> 태그만 사용할 수 있습니다. <ul>바로 아래 <div>와 같은 태그를 넣지 않도록 주의해야 합니다.
3. li
<li>태그는 list item의 약자로 목록의 항목을 나타냅니다. <ol>과 <ul>태그의 자식으로만 사용할 수 있습니다. <li>태그는 단독으로 사용할 수 없습니다.
또한 <li>태그의 아이템들은 같은 위상의 아이템이어야 합니다. 예를 들어 아래 첫 번째 코드는 같은 위상의 아이템들이 아니기 때문에 두 번째 코드처럼 따로 제목 태그로 구분하시는 것을 권합니다.
이번에는 사용하지 못하는 것과 올바른 사용법 예제를 살펴보도록 하겠습니다. 아래 코드는 <ol>태그의 자식으로 <div>태그를 사용했기 때문에 올바르지 않은 사용법입니다.
<!-- X -->
<ol>
<div>item</div>
<li>item</li>
<li>item</li>
</ol><!-- X -->
<ol>
<div>item</div>
<li>item</li>
<li>item</li>
</ol>자식이 아닌 자손 요소로는 다른 태그도 사용 가능합니다.
<!-- O -->
<ol>
<li>
item
<div>first item</div>
</li>
<li>item</li>
</ol><!-- O -->
<ol>
<li>
item
<div>first item</div>
</li>
<li>item</li>
</ol>4. 중첩 사용
<ol>과 <ul>태그는 중첩해서 사용할 수 있습니다. 아래 코드는 <ul>태그 안에 <ol>태그를 중첩해서 사용한 예제입니다. 기억하세요. 중첩할 때에도 <li>태그를 사용해야 합니다.