[웹표준 #2] 리스트 태그를 제대로 활용하자.

리스트 태그는 언제 사용할까?

제 블로그에 있는 분류 목록을 화면에 출력한다고 생각해 보죠. 

가장 간단한 방법은 다음과 같이 <br> 태그를 사용하는 것입니다. 

Beginner<br/> XML Developer<br/> 프로젝트관리론<br/> 컴퓨터공학<br/> 프로그래밍<br/> 리뷰<br/> 미니이야기<br/>

원하는대로 리스트 형태로 출력되기는 합니다. 

그러나 이런 코딩에서 문제점은 무엇일까요?

이 리스트에 스타일을 변경시킨다면 즉, 색상을 바꾸거나 글꼴이나 크기를 변경할 경우, 

현재 상태에서는 각각의 라인에 <font> 태그를 적용하는 방법이나 각각 <span> 태그를 넣고 CSS의 class로 스타일을 적용하는 방법 뿐으로 보입니다. 

이런 경우에 바로 리스트 태그를 사용해야 합니다. 

위와 같은 경우는 순서가 중요하지 않기 때문에 <ul> 태그로 감싼 <li> 태그를 사용하면 되겠죠. 

그럼 리스트 태그에 대해서 한번 살펴보도록 하겠습니다. 

리스트 태그의 종류 

리스트 태그에 대해 좀 더 자세하게 살펴보기 전에 먼저 리스트 태그의 종류를 알아보려고 합니다. 

보통 리스트 태그하면 두 가지 종류 (Unordered List, Ordered List)를 생각을 하는데요. 

Definition List라고 한가지가 더 있습니다. 각각에 대해서 자세히 살펴보도록 하죠. 

Unordered List

순서가 중요하지 않은 리스트로서 <ul> 태그를 사용해서 각 리스트 항목을 감싸고, 각각의 리스트 항목은 <li> 태그를 사용합니다. 

위 예제의 일부분을 Unordered List로 나타내면 다음과 같습니다. 

<ul> <li>Beginner</li> <li>XML Developer</li> <li>프로젝트 관리론</li> </ul>

결과를 보면 다음과 같이 나타납니다. 

• Beginner
• XML Developer
• 프로젝트 관리론

Ordered List

순서가 중요한 리스트입니다. <ol> 태그를 사용하고 각 항목은 마찬가지로 <li> 태그를 사용합니다. 

Unordered List와 달리 점(.)으로 출력되지 않고 숫자로 나타나게 됩니다. 예제와 결과를 보시죠. 

<ol> <li>Beginner</li> <li>XML Developer</li> <li>프로젝트 관리론</li> </ol>

다음과 같이 숫자로 순서가 표기된 것을 알 수 있습니다. 

1. Beginner
2. XML Developer
3. 프로젝트 관리론

 Definition List

<dl> 태그를 사용하는 Definition List는 기존 리스트와 조금 다릅니다. 

무언가 정의를 내릴 때 사용하는 것인데요. 

내부에는 <dt>와 <dd> 태그를 포함하고 있습니다. 

<dt>는 정의하는 것의 용어를 나타내고, <dd>는 정의하는 것의 설명을 나타냅니다. 

즉, "<dt>는 <dd>이다."라고 표현할 수 있는 항목에서 사용하는 것이죠.. 

예제를 살펴보시죠. 

<dl> <dt>Beginner</dt> <dd>초보자를 위한 강좌</dd> <dt>XML Developer</dt> <dd>XML과 관련된 개념 및 개발 강좌</dd> </dl>

결과는 다음과 같이 나타나구요. HTML 문서의 구조화를 위해서는 잘 활용하는 것도 좋을 것 같습니다.

테이블 태그와 비슷하지만 분명히 용도는 다른 것이니 기억해 두세요~~ 

Beginner

- 초보자를 위한 강좌

XML Developer

- XML과 관련된 개념 및 개발 강좌

리스트 태그의 확장

<br>태그 대신 리스트 태그를 써야 한다고 앞에서 이야기 했는데요. 

사용자에 따라 리스트 태그의 기본으로 나타나는 점이나 숫자등이 표시되지 않고, 들여쓰기도 안되기를 원할 수 있습니다. 

이런 것을 해결하는 것이 바로 CSS 입니다. 

즉, 스타일시트를 활용해서 문서의 표현을 다루는 것이죠. 

이러한 구조와 표현의 분리가 바로 웹 표준의 핵심 개념이라고 할 수 있습니다. 

<style type="text/css"> ul { list-style: none; padding-left: 0; } </style> <ul> <li>Beginner</li> <li>XML Developer</li> <li>프로젝트 관리론</li> </ul>

CSS에 대해서는 나중에 자세히 살펴보도록 하구요. 

여기에서는 리스트에 대한 것만 집중해서 이야기하도록 하죠. 

list-style: none; 이 부분이 바로 점이나 숫자와 같이 리스트 스타일을 출력하지 않도록 하는 것입니다. 

padding-left: 0; 은 왼쪽 들여쓰기를 하지 않도록 설정하는 부분이 되겠죠. 

이렇게 하면 맨 처음 보여드린 <br> 태그를 사용한 것과 비슷하게 출력이 됩니다. 

이제 색상을 넣거나 폰트 크기 등을 변경하려면 <li> 태그에 스타일 관련 코드를 넣으면 되겠죠. 

<style type="text/css"> ul { list-style: none; padding-left: 0; } li { font-weight: bold; font-size: 14px; color: red; } </style> <ul> <li>Beginner</li> <li>XML Developer</li> <li>프로젝트 관리론</li> </ul>

리스트 태그에 대해서 기본적인 내용을 쭉 살펴봤습니다. 

어떤 내용이든지 쉽게 이해할 수 있도록 정리하는 것은 즐겁기도 하지만 쉽지만은 않은 것 같네요. 

오늘도 좋은 하루 되세요,