|
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년 부자되는 방법
- 월급통장을 CMA로 전환하라!
- 통장을 여러개로 쪼어어서 관리하라!
- 가계부를 반드시 써라!
기미 예방 및 없애는 방법
- 율무팩(율무,우유,꿀)을 하면 점점 사라진다.
- 녹차물로 하루에 두번 세안하라!
- 둥글레차를 마셔라!
좋은 엄마 아빠 되는 방법
- 아이에게 칭찬을 아끼지 말아라!
- 아이에게 거짓말을 하지 말아라!
- 아이가 잘못을 했을 때 이유를 간단하게 설명하고 훈육하라!
|
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년 부자되는 방법
- 월급통장을 CMA로 전환하라!
- 통장을 여러개로 쪼어어서 관리하라!
- 가계부를 반드시 써라!
기미 예방 및 없애는 방법
- 율무팩(율무,우유,꿀)을 하면 점점 사라진다.
- 녹차물로 하루에 두번 세안하라!
- 둥글레차를 마셔라!
좋은 엄마 아빠 되는 방법
- 아이에게 칭찬을 아끼지 말아라!
- 아이에게 거짓말을 하지 말아라!
- 아이가 잘못을 했을 때 이유를 간단하게 설명하고 훈육하라!
|
▶ 실무에서는 많이 사용하는 명령은 아니지만 HTML을 처음 배우는 우리네들에게 있어서는 필수 코스처럼 되어버린 목록 부분이다. 시험을 치르는 학생들에게도 많은 도움이 되었으면 하는 바램으로 설명보다는 예제를 많이 넣었는데 이해가 잘 되시는지???
▶ 많이 두들겨라! 열번 읽는것 보다 직접 한번 입력해보는 것이 좋다는 말씀!! 복사하지 말고 직접 쳐라!~~^^ 영타도 늘고 HTML도 공부하고 시간도 절약하고 똑똑해지니 칭찬받고 오~ 일석 다조일세~~
