HTML 강좌 4편. <UL>, <OL>, <LI>, 특수문자 표시, 이미지 넣기
4-1 <OL>, <LI>, <UL>
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="l"></OL> Ⅰ, Ⅱ, Ⅲ, Ⅳ, Ⅴ.. 로마 대문자
<OL TYPE="i"></OL> ⅰ, ⅱ, ⅲ, ⅳ, ⅴ.. 로마 소문자
LI(List)태그는 종료 태그를 넣지 않아도 무관하며, <BR> 태그를 넣지 않아도 줄바꿈이 자동으로 이루어집니다. <OL>과 </OL> 사이에 써주면 숫자 또는 영문자 등이 삽입됩니다. 타입을 기입하지 않으면 기본적으로 아라비아 숫자가 삽입됩니다.
<HTML>
<HEAD>
<TITLE>OL ,LI 태그</TITLE>
</HEAD>
<BODY>
<OL TYPE="I">
<LI>1번 LIST 태그!
<LI>2번 LIST 태그!
<LI>3번 LIST 태그!
</OL>
</BODY>
</HTML>
<OL TYPE="I" start="2">
이렇게 바꾸고 결과를 살펴볼까요? 아래와 같은 결과를 확인하실 수 있습니다.
UL(Unordered List) 태그는 OL 태그와는 달리 순서가 없는 목록을 정리할때 사용합니다. 타입은 아래와 같습니다.
<UL TYPE="DISC"></UL> 목록 앞에 속이 찬 원형블릿을 넣음
<UL TYPE="SQUARE"></UL> 목록 앞에 속이 찬 사각블릿을 넣음
<UL TYPE="CIRCLE"></UL> 목록 앞에 속이 빈 원형블릿을 넣음
여기서의 <LI>태그는 <OL> 태그와 사용방법이 동일합니다. 그리고 <UL>태그와 <OL>태그는 중첩이 가능합니다.
<HTML>
<HEAD>
<TITLE>UL 태그</TITLE>
</HEAD>
<BODY>
<UL TYPE="CIRCLE">
<LI>1번 LIST 태그!
<LI>2번 LIST 태그!
<LI>3번 LIST 태그!
</OL>
</BODY>
</HTML>
4-2 특수문자 표시
우리는 HTML 태그가 < 기호로 시작해서 > 기호로 끝난다는 것을 알고있습니다. 그런데 이 기호들을 화면상에 표시하려면 어떻게 해야할까요? 특수문자(Character Entities)를 사용하여 우리가 원하는 문자들을 표시할 수 있습니다.
<HTML 특수문자(Character Entities)>
4-3 이미지 넣기
<IMG> 태그는 이미지를 넣을때 사용되는 태그이며, 태그 속성은 아래와 같습니다.
<IMG
src="이미지 이름"
width="이미지 너비"
height="이미지 높이"
align="정렬"
alt="이미지 설명"
border="테두리 두께"
hspace="좌우 여백"
vspace="상하 여백"
>
예를 들어, 아래와 같이 코드를 짤수 있습니다.
<HTML>
<HEAD>
<TITLE>IMG 태그</TITLE>
</HEAD>
<BODY>
<IMG src="C:/html.jpg" width="300" height="214" alt="HTML!" border="4" hspace="10" vspace="10">
</BODY>
</HTML>
'프로그래밍 관련 > HTML' 카테고리의 다른 글
| HTML 강좌 6편. <EMBED>..</EMBED>, <TABLE>..</TABLE> (8) | 2012.02.14 |
|---|---|
| HTML 강좌 5편. HTML 색상표, 링크 걸기 (2) | 2012.02.14 |
| HTML 강좌 3편. <FONT>, <BIG>, <STRONG>, <CENTER>, <SUB>.. (2) | 2012.02.14 |
| HTML 강좌 2편. 본격적인 태그와 요소의 활용, <BODY>, <BR>.. (20) | 2012.02.14 |
| HTML 강좌 1편. HTML란 뭘까? (4) | 2012.02.14 |