sub_title
 
제   목 HTML 강좌 - [제07강] 순서가 있는 목록 정리해주는 <OL> 태그
작성자 컴쟁이 등록일 2008-01-11 16:16:30 조회수 5,912

HTML에서 목록을 정리하고자 할 때에는 목록 앞에 숫자를 붙이거나 블릿을 넣을 수 있는데 이는 순서가 있는 목록인지 아닌지에 따라 각기 다른 태그를 사용함을 볼 수 있겠다. 우선 순서가 있는 목록부터 살펴보자~

 

1. <OL> : Ordered List

- <OL TYPE="1"> </OL> : 목록 앞에 순서를 1, 2, 3, 4, 5,....를 넣어준다. (아라비아 숫자 : 기본 타입)
- <OL TYPE="A"> </OL> : 목록 앞에 순서를 A, B, C, D, E,....를 넣어준다. (영문 대문자)
- <OL TYPE="a"> </OL> : 목록 앞에 순서를 a, b, c, d, e,....를 넣어준다. (영문 소문자)
- <OL TYPE="I"> </OL> : 목록 앞에 순서를 Ⅰ, Ⅱ, Ⅲ, Ⅳ, Ⅴ,....를 넣어준다. (로마 대문자)
- <OL TYPE="i"> </OL> : 목록 앞에 순서를 ⅰ, ⅱ, ⅲ, ⅳ, ⅴ,....를 넣어준다. (로마 소문자)
- <OL> 태그 앞 뒤에 오는 문장은 <P> 태그를 사용하지 않아도 똑같은 결과가 나온다.
- 로마숫자를 넣을 때에는 특수문자를 넣지 말고 대문자 I와 소문자 i를 넣어주면 로마숫자로 나오므로 주의하여 사용하자. 대문자 I는 로마 대문자를, 소문자 i는 로마 소문자를 나타내어준다.
- 자동으로 들여쓰기가 된다.

 

2. <LI> : List

- <LI> : 끝나는 태그를 보통 사용하지 않지만 넣어도 무관하다.
- <OL>과 </OL>사이에 목록 앞에 써주면 숫자나 영문자 등이 삽입된다.
- <LI> 태그는 마치 <BR> 태그를 사용하지 않아도 줄바꿈이 자동으로 이루어진다.

 

3. 예제-1 (순서 있는 목록)

[Source]

<html>
<head>
<title>
순서 있는 목록
</title>
</head>

<body>
2008년 부자되는 방법
<ol type="1">
<li> 월급통장을 CMA로 전환하라!
<li> 통장을 여러개로 쪼어어서 관리하라!
<li> 가계부를 반드시 써라!
</ol>
기미 예방 및 없애는 방법
<ol type="A">
<li> 율무팩(율무,우유,꿀)을 하면 점점 사라진다.
<li> 녹차물로 하루에 두번 세안하라!
<li> 둥글레차를 마셔라!
</ol>
좋은 엄마 아빠 되는 방법
<ol type="I">
<li> 아이에게 칭찬을 아끼지 말아라!
<li> 아이에게 거짓말을 하지 말아라!
<li> 아이가 잘못을 했을 때 이유를 간단하게 설명하고 훈육하라!
</ol>
</body>
</html>

[Result]

2008년 부자되는 방법

  1. 월급통장을 CMA로 전환하라!
  2. 통장을 여러개로 쪼어어서 관리하라!
  3. 가계부를 반드시 써라!

기미 예방 및 없애는 방법

  1. 율무팩(율무,우유,꿀)을 하면 점점 사라진다.
  2. 녹차물로 하루에 두번 세안하라!
  3. 둥글레차를 마셔라!

좋은 엄마 아빠 되는 방법

  1. 아이에게 칭찬을 아끼지 말아라!
  2. 아이에게 거짓말을 하지 말아라!
  3. 아이가 잘못을 했을 때 이유를 간단하게 설명하고 훈육하라!

 

4. <OL> : <Ol Type="목록타입" Start="시작번호">

- <OL TYPE="1" START="2"> : 목록의 시작번호를 2번부터 넣어라.
- <OL TYPE="a" START="2"> : 목록의 시작문자를 b번부터 넣어라.
- <OL TYPE="i" START="2"> : 목록의 시작문자를 ⅱ번부터 넣어라.
- 끊어진 목록의 순서를 이어서 번호매김 할때도 유용하게 사용된다.

 

5. 예제-2 (목록의 시작번호 변경)

[Source]

<html>
<head>
<title>
목록의 시작번호 변경
</title>
</head>

<body>
2008년 부자되는 방법
<ol type="1" start="2">
<li> 월급통장을 CMA로 전환하라!
<li> 통장을 여러개로 쪼어어서 관리하라!
<li> 가계부를 반드시 써라!
</ol>
기미 예방 및 없애는 방법
<ol type="a" start="2">
<li> 율무팩(율무,우유,꿀)을 하면 점점 사라진다.
<li> 녹차물로 하루에 두번 세안하라!
<li> 둥글레차를 마셔라!
</ol>
좋은 엄마 아빠 되는 방법
<ol type="i" start="2">
<li> 아이에게 칭찬을 아끼지 말아라!
<li> 아이에게 거짓말을 하지 말아라!
<li> 아이가 잘못을 했을 때 이유를 간단하게 설명하고 훈육하라!
</ol>
</body>
</html>

[Result]

2008년 부자되는 방법

  1. 월급통장을 CMA로 전환하라!
  2. 통장을 여러개로 쪼어어서 관리하라!
  3. 가계부를 반드시 써라!

기미 예방 및 없애는 방법

  1. 율무팩(율무,우유,꿀)을 하면 점점 사라진다.
  2. 녹차물로 하루에 두번 세안하라!
  3. 둥글레차를 마셔라!

좋은 엄마 아빠 되는 방법

  1. 아이에게 칭찬을 아끼지 말아라!
  2. 아이에게 거짓말을 하지 말아라!
  3. 아이가 잘못을 했을 때 이유를 간단하게 설명하고 훈육하라!

 

▶ 실무에서는 많이 사용하는 명령은 아니지만 HTML을 처음 배우는 우리네들에게 있어서는 필수 코스처럼 되어버린 목록 부분이다. 시험을 치르는 학생들에게도 많은 도움이 되었으면 하는 바램으로 설명보다는 예제를 많이 넣었는데 이해가 잘 되시는지???

▶ 많이 두들겨라! 열번 읽는것 보다 직접 한번 입력해보는 것이 좋다는 말씀!! 복사하지 말고 직접 쳐라!~~^^ 영타도 늘고 HTML도 공부하고 시간도 절약하고 똑똑해지니 칭찬받고 오~ 일석 다조일세~~

 

작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이
 
0
    
 
0
        list
 
※ 짧은 댓글일수록 예의를 갖추어 작성해 주시기 바랍니다.
line
reply cancel
 
번호 제목 글쓴이 추천 조회 날짜
14  HTML 강좌 - [제14강] 프레임셋과 프레임 태그   member 컴쟁이 0 / 0 13749 2008-04-11
13  HTML 강좌 - [제13강] 중첩테이블 및 테이블 활용 이미지   member 컴쟁이 2 / 0 9020 2008-03-11
12  HTML 강좌 - [제12강] <Table> 태그와 <TR>,<TD> 태그   member 컴쟁이 2 / 0 29941 2008-02-29
11  HTML 강좌 - [제11강] <A Href> 태그 그리고 _Top과 _Parent의 차이점   member 컴쟁이 1 / 0 11617 2008-02-27
10  HTML 강좌 - [제10강] 본문 관련 <Body> 태그와 옵션   member 컴쟁이 0 / 0 5584 2008-02-21
9  HTML 강좌 - [제09강] 음악, 동영상, 플래시 파일을 삽입해 주는 태그 이미지   member 컴쟁이 0 / 0 14937 2008-01-21
8  HTML 강좌 - [제08강] 순서가 없는 목록 정리해주는 <UL> 태그 이미지   member 컴쟁이 0 / 0 6339 2008-01-11
7  HTML 강좌 - [제07강] 순서가 있는 목록 정리해주는 <OL> 태그   member 컴쟁이 0 / 0 5912 2008-01-11
6  HTML 강좌 - [제06강] 이미지 삽입을 위한 <Img Src> 태그 이미지   member 컴쟁이 1 / 0 20148 2008-01-10
5  HTML 강좌 - [제05강] 글자의 크기, 색상, 글꼴을 바꾸어 주는 <FONT> 태그   member 컴쟁이 4 / 1 38472 2008-01-09
4  HTML 강좌 - [제04강] 그 밖에 글자 및 문단 관련 태그   member 컴쟁이 0 / 0 6525 2008-01-09
3  HTML 강좌 - [제03강] 글자를 강조하려고 할때 사용하는 글자 관련 태그들   member 컴쟁이 0 / 0 12052 2008-01-08
2  HTML 강좌 - [제02강] <P> 태그와 <BR> 태그의 차이   member 컴쟁이 1 / 1 31035 2008-01-07
1  HTML 강좌 - [제01강] HTML의 시작을 위한 간단 태그 이미지   member 컴쟁이 0 / 0 12143 2008-01-07
write
1