HTML 기초, 목록을 나타내는 <li> <ul> <ol> <dl> 태그 (아홉번째)

이 포스트는 Tistory 블로그를 하면서 자주 접하는 HTML에 대한 궁금증을 해소하기 위해

HTML 기초공부를 시작하고, 공부한 내용을 정리 목적으로 작성된 포스트입니다. ^^

 

HTML 기초, 목록을 나타내는 <li> <ul> <ol> <dl> 태그

 

HTML 문서를 만들다 보면 비슷한 성질을 가진 내용들을 하눈에 파악할 수 있도록 간략한 문장으로

표현할 경우가 종종 생깁니다. 목록 태그는 여러 개의 항목들을 일정한 간격으로 나열해 깔끔하고 정돈된 문서를 만들 수

있도록 도와줍니다. 목록태그는 자동으로 줄 바꿈이 일어나고 들여쓰기가 되서 정돈되어 보입니다.

 

목록은 크게 3가지로 종류로 나뉘며 그때마다 사용하는 태그는 모두 다릅니다.

이들에 대한 실제 내용을 나타낼 때 사용하는 태그는 <li> 태그입니다.

 

태그	설명
<ul>	순서가 없는 목록 (unordered list)
<ol>	순서가 있는 목록 (ordered list)
<dl>	정의 목록 (definition list)

 

◎ 순서가 없는 목록을 나열하는 <ul> 태그

 

<ul> 태그는 unorderd list 의 약자로 번호가 아닌 기호를 붙인 목록을 작성할 때 사용하는 태그입니다.

<li> 태그는 줄바꿈 태그 <br>을 내포하고 있습니다.

그리고 <ul> 태그에 type 속성을 지정하면 리스트 항목을 나타내는 기호를 원하는 형태로 지정할 수 있습니다.

 

속성	속성값	설명
type	disc	검은 원
	circle	흰 원
	square	사각형

 

 

 

 

 

◎ 순서가 있는 목록을 나열하는 <ol> 태그

 

<ol> 태그는 ordered list 의 약자로 기호 대신 번호가 붙어 순서가 있는 목록을 만들 때 사용하는 태그입니다.

기호 대신 숫자가 붙은 것만 빼고는 <ul> 태그와 같습니다. <ol> 태그에 type 속성을 이용하면 아라비아 숫자의 표기대신

영문자 / 로마 숫자로 나타낼 수 있습니다. 목록태그의 기본 숫자는 아라비아 숫자입니다.

 

<ol> 태그에 start 속성을 이용하면 첫 목록의 숫자가 1부터 시작하는게 아닌 임의의 번호부터 시작하게 할 수 있습니다.

<ol start="원하는 숫자">. <li value="원하는 숫자">를 이용해 목록의 번호를 변경할 수 도 있습니다.

 

 

속성	속성값	설명
type	1	기본값으로 숫자로 나타낸다
	a	영어 소문자
	A	영어 대문자
	i	소문자 로마 숫자
	I	대문자 로무 숫자
	disc	검은 원
	circle	흰 원
	square	사각형
start	숫자	type 속성이 1이나 i / I인 경우 시작할 숫자 지정

 

 

 

 

 

◎ 정의 목록을 나열하는 <dl> 태그

 

<dl>태그는 definition list 의 약어로 용어와 같은 항목들을 설명 / 정의할 때 사용하는 태그입니다.

목록 머리글 제목을 출력하기 위해서는 list head의 약어인 <lh>, 용어의 제목을 나타내기 위해서는 definition title의 약어 <dt>

관련 용어의 설명을 나타내기 위해서는 definition date의 약어인 <dd> 태그를 사용합니다.

<dt>, <dd> 태그 모두 줄 바꿈 태그 <br> 태그를 내포하고 있습니다.

 

예문)

 

<dl>

  <lh> 리스트의 제목 </lh>

  <dt> 용어의 제목

  <dd> 용어의 의미

</dl>

 

<dl> 속성을 이용하면 자동으로 줄바꿈이 지정됩니다. 용어의 제목 바로 옆에 용어의 설명이 나오게 하기 위해서 줄바꿈이

지정되지 않도록 하려면 <dl> 태그에 compact 속성을 붙여서 설정합니다.

 

예문)

 

<dl compact>

  <dt> 용어의 제목

 <dd> 용어의 의미

</dl>