UL태그 사용하기

리스트 사용하기 불릿 리스트 [순서없는목록]

불릿 리스트는 가장 일반적인 형태의 리스트 형식으로, 리스트 항목에 불릿 문자가 포함됩니다. 리스트를 정의하는 태그는 지금까지의 다른 태그 형식과 달리 두 가지의 복합된 형태로 이루어집니다. <UL></UL> : 목록을 시작하는 곳에 사용합니다. 그리고 각 목록에는 <LI>태그을 붙여야 합니다.

[예제]

• 천리안
• 넷츠고
• 하이텔
• 나우누리

<ul>
	<li>천리안</li>
	<li>넷츠고</li>
	<li>하이텔</li>
	<li>나우누리</li>
</ul>

[리스트 타입]

• 호박
• 수박
• 찬호박

<ul>
	<li type="disc">호박</li>
	<li type="circle">수박</li>
	<li type="square">찬호박</li>
</ul>

 

번호 리스트 [순서있는목록]

번호 리스트는 리스트의 각 항목에 자동으로 번호 등을 매겨주는 리스트입니다. 불릿 리스트와 동일한 태그 구조를 사용하지만 <UL></UL> 태그 대신에 <OL></OL> 태그를 사용합니다. <OL></OL> : 순서있는 목록을 시작할 곳에 사용합니다.

[OL태그의 속성]

• Compact: 중간여백을 최대한 줄이도록 만들 수 있습니다.
• START: 1이 아닌 다른 숫자로 목록 번호를 시작할 수 있습니다.
• TYPE: 숫자가 아닌 알파벳 등 다른 순번이 표시되게 할 수 있습니다.

<LI> : <OL>태그 다음에 사용하고, 각 목록 앞에 써주어야 합니다. <LI>태그의 속성 TYPE -A(알파벳 대문자), a(알파벳 소문자), I(로마숫자 대문자), i(로마숫자 소문자). 이 속성 값은 “순서있는 목록” 에서만 사용할 수 있습니다.

[예제]

1. 천리안
2. 넷츠고
3. 하이텔
4. 나우누리

1. 천리안
2. 넷츠고
3. 하이텔
4. 나우누리

1. 천리안
2. 넷츠고
3. 하이텔
4. 나우누리

<ol>
	<li>천리안</li>
	<li>넷츠고</li>
	<li>하이텔</li>
	<li>나우누리</li>
</ol>
<ol type="a">
	<li>천리안</li>
	<li>넷츠고</li>
	<li>하이텔</li>
	<li>나우누리</li>
</ol>
<ol type="A">
	<li>천리안</li>
	<li>넷츠고</li>
	<li>하이텔</li>
	<li>나우누리</li>
</ol>

 

정의 리스트

불릿 리스트와 번호 리스트가 매우 비슷한 형식과 구조를 가지고 있는 것과는 달리, 정의 리스트는 조금 독특한 구조를 가지고 있습니다. <DL></DL> : 용어정의 목록을 시작하는 곳에 사용합니다. <DT> : 용어의 이름을 쓰는 곳에 사용합니다. <DD> : 용어에 대한 설명을 쓰는 곳에 사용합니다.

[예제]

URL

인터넷상의 각종 자원의 위치를 나타내기 위해 사용되는 표준 주소 이다.

HTML

HTML이란 Hyper Text Makeup Language의 약자로 하이퍼택스트 기능을 가진 문서를 만드는 언어입니다.

<dl>
	<dt>URL</dt>
	<dd>인터넷상의 각종 자원의 위치를 나타내기 위해 사용되는 표준 주소 이다.</dd>
	<dt>HTML</dt>
	<dd>HTML이란 Hyper Text Makeup Language의 약자로 하이퍼택스트 기능을 가진 문서를 만드는 언어입니다.</dd>
</dl>

 

리스트의 중첩

위의 목록들을 모두 중첩될 수 있는 것입니다. “순서있는 목록” 안에 “순서없는 목록”을 넣을 수도 있고, 용어 정의 목록 안에 메뉴 목록을 넣을 수도 있습니다.

[예제]

1. WWW와 HTML

   HTTP(Hyper Text Transmission Protocol)

   HTTP는 WWW 서비스에서 클라이언트와 서버 사이에서 통신할 때 사용하는 통신 프로토콜(protocol)

   WWW 브라우저

   브라우저는 클라이언트에 설치되어 서버로부터 제공받는 정보를 사 용자를 위해 재구성하는 역할을 하는 소프트웨어다.

2. HTML의 기본적인 형식

   HTML의 Tag

   태그는 HTML 문서의 모양과 행동 양식을 정해주는 하나의 명령

   태그의 속성

   태그의 속성은 택이 실제 문서를 표현할 때 필요한 여러 가지 환경들을 설정하게 된다.

<ol>
	<li>WWW와 HTML
		<dl>
			<dt>HTTP(Hyper Text Transmission Protocol)</dt>
			<dd>HTTP는 WWW 서비스에서 클라이언트와 서버 사이에서 통신할 때 사용하는 통신 프로토콜(protocol)</dd>
			<dt>WWW 브라우저</dt>
			<dd>브라우저는 클라이언트에 설치되어 서버로부터 제공받는 정보를 사 용자를 위해 재구성하는 역할을 하는 소프트웨어다.</dd>
		</dl>
	</li>
	<li>HTML의 기본적인 형식
		<dl>
			<dt>HTML의 Tag</dt>
			<dd>태그는 HTML 문서의 모양과 행동 양식을 정해주는 하나의 명령</dd>
			<dt>태그의 속성</dt>
			<dd>태그의 속성은 택이 실제 문서를 표현할 때 필요한 여러 가지 환경들을 설정하게 된다.</dd>
		</dl>
	</li>
</ol>