1. 번호 없는 목록 만들기 : <UL>, </UL> - Unordered List
<UL>은 번호없이 기호를 붙여 목록을 만든다.
시작과 마침 태그로 구성되면 각 항목은 <LI>태그로 타나낸다. <LI>태그는 시작 태그만 사용한다.
<LI>-List Items
1.1. 속성
|
속성 |
설명 |
|
style= "..." |
(예) <UL style="background:red> |
|
title="제목입력" |
(예) <UL title=" 번호없는 목록"> |
|
type=disc, circle, square |
목록 앞에 나타나는 기호의 모양, 기본값은 'disc'이다. |
1.2. HTML 문서
|
<html> <head> <title>번호 없는 목록 </title> </head> <body> 번호 없는 목록을 나타냅니다.<br> <ul type=disc> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ul><br>
번호 없는 목록(type=square)을 나타냅니다. <ul type=square> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ul><br>
번호 없는 목록(type=circle)을 나타냅니다. <ul type=circle> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </body> </html> |
1.3. 브라우저 화면
2. 번호 있는 목록 만들기 태그 : <OL>...</OL> -Ordered Lists
<OL>태그는 목록 순서에 따라 번호를 붙여 목록을 작성한다. 시작과 끝나는 태그로 구성된다. 각 항목은 <LI>로 나타낸다.
2.1. 속성
|
속성 |
설명 |
|
style="..." |
(예) <OL style="background:red> |
|
title="제목입력" |
(예) <OL title="제목의 글자크기"> |
|
type="1" "a" "A" "i" "I" |
아라비아 숫자1, 2, 3번호로 표시 소문자 a, b, c로 표시 대문자 A, B, C로 표시 소문자 로마숫자 ⅰ, ⅱ, ⅲ으로 표시 대문자 로마숫자 Ⅰ, Ⅱ, Ⅲ으로 표시 |
2.2. HTML 문서
|
<html> <head> <title>번호 있는 목록 </title> </head> <body> 번호 있는 목록을 나타냅니다.<br> <ol> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ol><br> 번호 있는 목록(type=A)을 나타냅니다. <ol type=A> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ol><br> 번호 있는 목록(type=a)을 나타냅니다. <ol type=a> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ol><br> 번호 있는 목록(type=I)을 나타냅니다. <ol type=I> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ol><br> 번호 있는 목록(type=i)을 나타냅니다. <ol type=i> <li>하회마을 <li>도산서원 <li>병산서원 <li>봉정사 </ol> </body> </html> |
2.3. 브라우저 화면
3. 용어 정의 목록 만들기 태그 : <DL>...<DL> -Definition List
<DT>-Definition Title
<DD>-Definition Denote
용어를 정의하는 형식으로 나타낸다.
3.1. HTML 문서
|
<html> <head> <title>용어 정의</title> </head> <body> <dl> <dt> 홈페이지 <dd>홈페이지는 웹 사이트에 접속했을 때 나타나는 최초의 페이지를 말한다. <dt>WWW <dd>WWW는 World Wide Web의 약자로서 전세계속에 퍼져있는 인터넷 내의 정보들을 연결해 준다. </dl> </body> </html> |
3.2. 웹브라우저 화면