목록 태그
목록 태그
목록 태그는 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>태그를 사용해야 합니다.