목록 만들기

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. 웹브라우저 화면