학습(공부)하는 블로그 :: 8. 목록(List) 태그
 

 

Notice»

Recent Post»

Recent Comment»

Recent Trackback»

03-19 10:55

8. 목록(List) 태그

컴퓨터 활용/홈페이지 과정 | 2013. 2. 1. 00:00 | Posted by 깨비형
반응형


<목록(List)태그의 종류>

  • 순서 있는 목록<OL>:Ordered list
  • 순서 없는 목록<UL>:unordered list
  • 용어 정의 목록<DL>:definition list 



1. 순서 있는 목록<OL>


○ 순서 있는 목록태그란?

숫자,영어 대·소문자 로마자 대·소문자 등으로 순서있게 나타내는 것

- 순서있는 목록을 만들 때는 목록 전체를 <OL>...</OL>로 둘러싸고,

목록을 하나하나 만들어 주는 속성인 <LI>:list item라는 태그 사용

- <LI>태그는 </LI>마감태그를 생략 할 수 있다.


○ 기본형식

 <OL>

 <LI>목록내용 1

 <LI>목록내용 2

 </OL> 



○ type 속성 : 기본은 숫자

 번호 형식

 표현되는 모양

 type=1

 1,2,3,4...

 type=a

 a,b,c,d...

 type=A

 A,B,C,D...

 type=i

 ⅰ,ⅱ,ⅲ,ⅳ...

 type=I(대문자 I)

 Ⅰ,Ⅱ,Ⅲ,Ⅳ...






○ 사용형식 예시

숫자

영어대문자

영어소문자 

로마자대문자 

로마자소문자 

 <OL type="1">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL>

 <OL type="A">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 
 <OL type="a">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 
 <OL type="I">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 
 <OL type="i">

 <LI>숫자목록

 <LI>목록

 <LI>목록

 </OL> 

결과

결과 

결과 

결과 

결과 

 1. 숫자목록

 2. 목록

 3. 목록

 A.숫자목록

 B. 목록

 C. 목록

 a. 숫자목록

 b. 목록

 c. 목록

 숫자목록

 Ⅱ. 목록

 Ⅲ. 목록

 숫자목록

 ⅱ. 목록

 ⅲ. 목록


○ stsrt 속성과 value 속성

stsrt 속성 : <OL>태그 시작할 때 사용, 1이 아닌 다른 숫자부터 시작할 수 있다.

value 속성 : <LI> 태그와 같이 사용, 리스트 중간에 시작 숫자를 재지정할 때 사용



2. 순서 없는 목록<UL>


○ 순서 없는 목록태그란?

- 목록 앞에 붙은 형식이 불릿 형식으로 나옴

- 순서있는 목록을 만들 때는 목록 전체를 <OL>...</OL>로 둘러싸고,

목록을 하나하나 만들어 주는 속성인 <LI>:list item라는 태그 사용

- <LI>태그는 </LI>마감태그를 생략 할 수 있다.


○ 기본형식

 <UL>

 <LI>목록내용 1

 <LI>목록내용 2

 </UL> 



○ type 속성 : 기본은 disc(●)

 번호 형식

 표현되는 모양

 type=disc

           ● 속이 검게 채워진 원형

 type=circle

           ○ 속이 빈 원형

 type=square

           ■ 속이 검게 채워진 사각형





3. 용어 정의 목록<DL>


○ 용어 정의 목록 태그란?

용어 정의 목록을 만들 때 사용하는 태그

- 모두 세 가지 태그가 사용된다. 

· 우선,<DL>태그는 정의 목록의 시작을 표시하고 

· <DT>태그는 목록에 들어 있는 각 항목들의 시작을 표시

· <DD>태그는 각 항목에 대한 정의 부분의 시작을 표시


○ 기본 형식

 <DL>

 <DT>용어정의 목록이란?

 <DD>정의할 용어와 용어에 대한 설명문을 붙인 형식의 목록입니다.

 </DL>



○ type 속성 : 기본은 disc(●)

 번호 형식

 표현되는 모양

 type=disc

           ● 속이 검게 채워진 원형

 type=circle

           ○ 속이 빈 원형

 type=square

           ■ 속이 검게 채워진 사각형






반응형

'컴퓨터 활용 > 홈페이지 과정' 카테고리의 다른 글

10. 하이퍼링크(Link) 태그  (0) 2013.02.02
9. 이미지(Img) 태그  (0) 2013.02.01
7. <marquee> 태그  (1) 2013.01.31
6. <font>태그  (0) 2013.01.30
5. 글자(Text) 태그  (0) 2013.01.30
: