[스크랩] HTML태그 명령어의 종류와 기능 - 기초없이 배우시는 분들을 위한

HTML태그 명령어의 종류와 기능 - 기초없이 배우시는 분들을 위한

◈ 가장 기본적인 태그들

HTML의 태그에 대해 살펴보기 전에 HTML 문서의 구조를 알아볼 필요가 있습니다. HTML 문서의 구조는 헤더(Header)와 본문(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>태그를 사용하지 않아도 상관 없다.

예제

<예제 실행화면>

속성 : 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>

◈ 표 만들기

앞서 설명한 리스트를 잘 활용하면 순서대로 표시해야 할 자료들을 깔끔하고 보기 좋게 출력할 수 있습니다. 하지만 때로는 도표나 목록의 형태로 자료들을 보여 줄 필요가 있습니다. 이럴 때 사용하는 것이 바로 테이블입니다. 테이블을 이용하는 것이 정보를 훨씬 효과적으로 강조하여 표현할 수 있습니다.
또한 테이블로 레이아웃을 잡는다 던지 여러 가지 용도로 사용할 수 있습니다. 웹페이지를 만드는데 가장 중요한 요소는 테이블입니다. 테이블에 대한 내용을 배우기 전에 이 사실을 명심하시길 바랍니다.

▶ <TABLE></TABLE> : 이 태그들은 테이블의 영역을 선언하는 태그로서 테이블의 처음과 끝을 지정합니다. 실제로 테이블의 모양을 만드는 태그들은 이 블록의 내부에 포함되어야 합니다.

<TABLE > 태그의 속성
BORDER	표의 테두리를 결정한다. 숫자를 할당하면 해당 숫자의 테두리가 그려진다.
CELLSPACING	셀과 셀 사이의 간격을 바꾸고 싶을 때 사용한다.
CELLPADDING	셀 내부에서의 간격을 바꾸고 싶을 때 사용한다.
WIDTH	가로 넓이를 지정한다.
HEIGHT	세로 높이를 지정한다.
ALIGN	표의 정렬 방식을 지정한다.

▶ <TD></TD> : 테이블의 열을 만듭니다.

<TD>태그의 속성
ALIGN	헤더의 셀에 들어가는 제목의 정렬방식. 디폴트값은 CENTER이다. 속성: LEFT, RIGHT, CENTER
VALIGN	헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다. 디폴트값은 TOP 이다. 속성: TOP, MIDDLE, BOTTOM, BASELINE
ROWSPAN	헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
COLSPAN	헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
WIDTH	셀의 가로 넓이를 지정한다.
HEIGHT	셀의 세로 높이를 지정한다.
NOWRAP	셀의 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

▶ <TR></TR> : 테이블의 열을 만듭니다. 이 태그가 나오지 않으면 모든 셀이 한 줄로 나타나게 됩니다.

예제

<예제 실행 화면>

※ 표의 빈칸 처리방법 : <p> 을 셀의 빈칸에 넣어주면 됩니다.

▶ <TH></TH> : 거의 모든 면에서 <TD></TD> 태그와 동일하지만 이 태그로 만들어진 셀은 텍스트가 볼드체로, 중앙 정렬해서 보여준다는 것이 다릅니다..

<TH>태그의 속성
ALIGN	헤더의 셀에 들어가는 제목의 정렬방식. 디폴트값은 CENTER이다. 속성: LEFT, RIGHT, CENTER
VALIGN	헤더의 셀에 들어가는 제목의 수직정렬방식으로, 네가지 값이 있다. 디폴트값은 TOP 이다. 속성: TOP, MIDDLE, BOTTOM, BASELINE
ROWSPAN	헤더의 셀이 몇개의 행에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
COLSPAN	헤더의 셀이 몇개의 열에 걸쳐 있는지를 정하는 곳 디폴트값은 1이다.
WIDTH	셀의 가로 넓이를 지정한다.
HEIGHT	셀의 세로 높이를 지정한다.
NOWRAP	셀의 끝에서 다음 줄로 자동으로 내려가는을 금지한다.

◈ 이미지 넣기

여러분들은 이제 텍스트로 이루어진 웹 페이지는 별 어려움 없이 만들 수가 있을 것입니다. 저는 이쯤에서 여러분이 알고 싶은 것이 무엇인지를 쉽게 짐작할 수 있습니다.여러분들도 아마도 단조로운 텍스트만으로 이루어진 웹 페이지가 아니라 깔끔한 이미지와 텍스트가 적절히 조화된 웹 페이지를 만들고 싶을 것입니다. 여러분들은 <img> 태그를 이용하여 웹 페이지에 이미지를 넣을 수 있습니다.

▶ <IMG> : 이미지를 넣기 위한 태그입니다.

<IMG>의 속성
SRC	이미지 파일이 위치한 곳에 관한 URL 정보가 들어간다
ALIGN	이미지와 텍스트를 같이 사용 했을 때 텍스트의 위치를 정렬시킨다. ALIGN 속성에는 TOP, CENTER, BOTTOM, LEFT, RIGHT가 있다.
ALT	이것은 텍스트 브라우저를 위한 속성으로 이미지의 위치에 이미지의 내용을 전달해 주는 것이다. (풍선 도움말)
ISMAP	이미지 맵을 위해 사용하는 속성으로 ISMAP으로 설정된 이미지 위의 임의의 위치를 마우스로 클릭하면 해당영역으로 연결시켜준다.
BORDER	이미지의 테두리를 그려주기 위한 속성이다
HEIGHT	이미지의 높이를 픽셀단위로 지정하기 위한 속성이다
WIDTH	이미지의 넓이를 픽셀단위로 지정하기 위한 속성이다
HSPACE	이미지의 좌우에 얼마만큼의 여백을 줄지 지정한다
VSPACE	이미지의 상하에 얼마만큼의 여백을 줄지 지정한다
USEMAP	이미지 맵을 지정할 때 사용한다

예제

<예제 실행 화면>

<IMG> 태그의 ALIGN 속성
TOP	이미지와 같은 라인에 있는 텍스트를 상단에 정렬한다.
CENTER	이미지와 같은 라인에 있는 텍스트를 중앙에 정렬한다.
BOTTOM	이미지와 같은 라인에 있는 텍스트를 하단에 정렬한다.
LEFT	이미지는 왼쪽에 텍스트는 오른쪽에 정렬한다.
RIGHT	이미지는 오른쪽에 텍스트는 왼쪽에 정렬한다.

예제

<html>
<head>
<title>고싸움놀이</title>
</head>
<body>
<h2>고싸움 놀이</h2>
<p align="justify"><font face="돋움" size="2"><img src="img/1-1.jpg" align="left" width="150" height="113" border="0" hspace="5">전남 광산군 대조면 칠석리 윷돌 마을에서 매해 음력 정월 10경부터 2월 초하루에 걸쳐서 벌이던 놀이다.</font></p>
<p align="justify"><font face="돋움" size="2">큰 줄을 꼬아 앞쪽에 고를 짓고 이것을 양쪽에서 밀어서 부딪게 한 다음 상대방의 고를 땅에 내려뜨린 쪽이 이기게 된다.</font></p>
<p align="justify"><font face="돋움" size="2">이 놀이의 유래에 대해 마을 주민들은 윷돌 마을이 황소가 쭈그리고 앉은 와우상이라 터가 거세기 때문에 이를 풀어주기 위해 시작하였다고들 한다.</font></p>
</body>
</html>

<예제 실행 화면>

출처 : 운봉 컴사랑

글쓴이 : 운봉 원글보기

메모 :

'컴푸터 지식' 카테고리의 다른 글

[스크랩] 컴퓨터에 무지한 내가 먼저 읽어봐야 할 자료 (0)	2009.01.15
스위시 동영상 강좌 14강/포샵 테크닉 모음 (0)	2009.01.14
만화로 배우는 테크 (0)	2009.01.09
[스크랩] 가상 메모리 부족이라고 나올 때 대처방법 (0)	2009.01.07
[스크랩] 내 컴류터에 음악 저장하여 듣기 (0)	2009.01.06

레오의 사진이야기

[스크랩] HTML태그 명령어의 종류와 기능 - 기초없이 배우시는 분들을 위한

문서의 제목

문서의 제목

문서의 제목

문서의 제목

문서의 제목

문서의 제목

'컴푸터 지식' 카테고리의 다른 글

티스토리툴바

[스크랩] HTML태그 명령어의 종류와 기능 - 기초없이 배우시는 분들을 위한

문서의 제목

문서의 제목

문서의 제목

문서의 제목

문서의 제목

문서의 제목

'컴푸터 지식' 카테고리의 다른 글

'컴푸터 지식' Related Articles

티스토리툴바