|
◈ 가장 기본적인 태그들
HTML의 태그에 대해 살펴보기 전에 HTML 문서의 구조를 알아볼
필요가 있습니다. HTML 문서의 구조는 헤더(Header)와 본문(Body)의
두 개 부분으로 구분할 수 있습니다. 물론 이 두 개의 부분을 구분하는
것도 역시 태그의 역할입니다. 아래의 HTML 문서는 가장 단순한
문서를 예로 보여주고 있습니다.
<HTML>
<HEAD>
<TITLE>홈페이지 제목</TITLE>
</HEAD>
<BODY>홈페이지 본문</BODY>
</HTML> |
▶ <HTML> </HTML> : 현재 파일이 HTML 문서임을 브라우저에
알려주는 Tag로 HTML 문서 안에서 가장 처음과 끝에 써주어야
합니다. 그러나 대부분의 브라우저에서는 이 태그가 없어도 제대로
인식을 합니다. 그러나 표준을 지키는 의미에서 가급적 사용하도록
합시다.
▶ <HEAD> </HEAD> : HTML 문서에 대한 일반적인 정보를
표시하는 일종의 머리말로서 실제 브라우저 화면에는 출력되지
않습니다. (이 부분에 자바스크립트, 스타일시트 등의 소스를
넣을 수도 있다.)
▶ <TITLE> </TITLE> : HTML 문서의 제목을 정의하는 곳으로
여기서 쓴 제목은 브라우저의 제목 표시줄에 출력됩니다.
(head 속에 포함된다.)
▶ <BODY> </BODY> : HTML 문서의 실제적인 내용이 들어가는
곳으로, 브라우저 화면에 곧바로 나타나게 됩니다. 이 태그에는 6개의
속성이 있습니다. (아래의 표를 참조하세요.)
|
속성 |
설명 |
예제 |
|
BACKGROUND |
배경 이미지 지정 |
<body background="back.gif"> |
|
BGCOLOR |
배경색 지정 |
<body bgcolor="white"> |
|
TEXT |
글자 색 지정 |
<body text="black"> |
|
LINK |
링크된 글자의
색 지정 |
<body link="blue"> |
|
VLINK |
방문한 링크
색지정 |
<body vlink="purple"> |
|
ALINK |
클릭했을 때 링크 색 지정 |
<body alink="red"> |
|
|
<body background="back.gif" text="black" link="blue" vlink="purple" alink="red"> |
※ 주의사항 : 배경색을 지정할 때에는 위처럼 색의 이름으로 설정
할 수도 있지만 그렇게 할 경우 몇 가지 색밖에 지정할 수 없습니다.
그래서 나온 것이 RGB 코드입니다.
RGB 코드란 RED-GREEN-BLUE 형식으로 색상을 조합한 것으로
16진수의 숫자로 표현되며 RRGGBB 형태로 표시됩니다.
예) RED = FF0000 , GREEN = 00FF00 , BLUE = 0000FF
RGB 코드 변환 프로그램은 자료실에 올려 놓았습니다.
▶ <Hn> </Hn> : 문서의 제목을 위해 사용되는 것으로 n은
1에서 6까지 총 6가지의 종류가 있습니다.
|
예제 |
|
<H1> 문서의 제목 </H1> |
문서의 제목 |
|
<H2> 문서의 제목 </H2> |
문서의 제목 |
|
<H3> 문서의 제목 </H3> |
문서의 제목 |
|
<H4> 문서의 제목 </H4> |
문서의 제목 |
|
<H5> 문서의 제목 </H5> |
문서의 제목 |
|
<H6> 문서의 제목 </H6> |
문서의 제목 |
속성
LEFT : <Hn align="left">제목<Hn> : 제목을 왼쪽으로 정열합니다.
CENTER : <Hn align="center">제목<Hn> : 제목을 가운데 정열합니다.
RIGHT : <Hn align="right">제목<Hn> : 제목을 오른쪽으로 정열합니다.
▶ <P> </P>
: 단락이 시작하는 곳이나 단락이 끝나는 곳에 넣어서 단락을
구분하는 역할을 합니다. <P>태그는 </P>태그를 사용하지
않아도 상관 없다.
|
예제 |
<HTML>
<HEAD>
<TITLE> HTML 단락 테스트</TITLE>
</HEAD>
<BODY>
<H2>단락</H2>
<P>첫번째 단락
<P>두번째 단락
</BODY>
</HTML> |
<예제 실행화면>
속성 :
LEFT : <p align="left">단락</p> : 단락을 왼쪽으로 정열한다.
CENTER : <p align="center">단락</p> : 단락을 가운데 정열한다.
RIGHT : <p align="right">단락</p> : 단락을 오른쪽으로 정열한다.
▶ <BR> : 문서의 줄을 바꿀 때 이용하는 태그입니다..
(한 줄을 바꿀 때 사용합니다. 두 줄 이상 바꿀 때는
<p>태그를 사용하도록 하세요.)
▶ <CENTER> </CENTER> : 문단을 가운데로 정렬시키는 기능을
합니다. </CENTER>태그를 만날 때까지 모두 가운데로 정렬됩니다.
▶ <HR> : 수평선을 만들어 줍니다.
속성 : SIZE, WIDTH, ALIGN=LEFT, CENTER, RIGHT
|
SIZE 속성의 변화 |
|
<HR SIZE=1> |
|
|
<HR SIZE=3> |
|
|
<HR SIZE=5> |
|
|
NOSHADE : 속이 찬 수평선을 그려준다. |
|
<HR SIZE=3> |
|
|
<HR NOSHADE SIZE=3> |
| | 
