HTML 기초강좌 4강, 태그로 목록을 만들어보자 [목록태그 사용법]

HTML 기초강좌 4강, 태그로 목록을 만들어보자 [목록태그 사용법]

HTML 기초강좌 4번째 주제는 목록태그 사용법입니다. 

앞선 포스팅에서는 기초적인 HTML 용어들과 컨텐츠를 구성할 때 흔히 사용하는 태그들을

중점적으로 살펴보았습니다. 이번 강좌에서는 태그를 활용하여 목록을 구성하는 방법에 대해서 살펴보겠습니다.

우리는 워드프로그램이나 제가 지금 쓰고 있는 이 블로그 에디터에서도 메뉴를 통해 

아주 쉽게 목록을 만들 수 있습니다.

• body, head, title
• br, i, u, b
• ins, del, strong

위의 목록은 티스토리 블로그 에디터 중 목록 만들기 기능을 활용해서 만들었습니다. 

아주 간단하게 목록을 만들 수 있죠. 하지만! HTML 소스를 만들 수 있는 메모장이나 에디터 프로그램에는

워드나 블로그 에이터처럼 간단하게 목록을 만들 수 있는 기능들이 준비되어 있지 않습니다.

직접 태그를 사용해서 컨텐츠들을 목록으로 구성시켜 주어야 하는 것이죠.

자, 그럼 지금부터 목록을 구성하는 태그를 활용해보겠습니다.

<ol>, <li>

우리가 흔히 사용하는 순서가 있는 목록을 만들 때에는 <ol>태그를 이용합니다.

그리고 그 안에 들어가는 항목들은 <li>태그 사이에 넣어줍니다.

소스를 작성 할 때 따로 들여쓰기를 하지 않더라도 

태그를 넣으면 알아서 <li> 속에 들어있는 항목들을 자동으로 들여쓰기 처리합니다.

<ul>, <li>

순서없이 그냥 쭉 나열하는 목록을 구성 할 때에는 <ul> 태그를 사용합니다.

<ol>태그와 마찬가지로 목록을 구성하는 항목들은 <li> 태그 사이에 배치시켜 주기만 하면 됩니다.

기본적으로 까만동그라미로 목록이 구성됩니다. 마찬가지로 <li> 태그에 들어있는 항목들은 들여쓰기 처리됩니다.

<ul>태그를 응용하면 중첩 목록을 만들 수 있습니다.

두번째 <ul> 태그는 비어있는 동그라미로 표기됩니다. 

<dl>, <dt>, <dd>

<dl> 태그는 정의목록을 표시할 때 사용합니다. 어떠한 단어의 정의를 표기할 때 주로 사용합니다.

<dt> 태그는 정의목록에서 단어를 표기할 때 쓰이며, <dd> 태그는 단어의 정의를 서술할 때 사용합니다.

<dd> 태그는 자동으로 <dt> 태그 안에 들어간 단어보다 한칸 들여쓰기 처리 됩니다. 

저는 앞선 포스팅에서 살펴봤던 <br /> 태그와 <b> 태그를 함께 응용해봤습니다.

하나의 단어에 여러가지 정의가 붙는 경우 <dt> 태그 아래에 <dd> 태그를 여러개 넣으시면 됩니다.

사실 이러한 정의태그는 보편적으로 많이 쓰이지는 않지만 알아두시면 좋으니 그냥 이런게 있구나 ~ 기억해두세요.

여기까지! 목록태그를 구성하는 방법에 대해서 살펴보았습니다.

사실 요즘에는 이러한 방식으로 목록을 구성하지 않고 CSS를 통해서 목록을 구성하는 경우가 많습니다.

CSS로 목록을 구성하는 방법에 대해서는 HTML 기초를 다진 다음에 살펴보도록 하겠습니다.

다음 포스팅에서는 링크 태그를 활용하는 방법에 대해서 살펴보도록 하겠습니다.

---