[스크랩] HTML태그 강좌

blog 정보

[스크랩] HTML태그 강좌

P a o l o 2005. 12. 17. 12:54

HTML의 구조는 다른 프로그램 언어(C++,,JAVA)와는 달리 독특한 구조를 가지고 있습니다.

즉 각기 부분이 있어서 서로가 맡은 역할에 따른 구분을 통해 순서대로 배열되어야 합니다.

쉽게 말해서 HTML은 태그들로 구성되어 있습니다.

태그는 < >꺽쇠안에 들어가 있는 모든 구성요소를 통털어 말합니다.

HTML은 이러한 태그들을 배열한 조합문서 입니다.

그래서 다른 프로그램 언어의 독립적인 함수처럼 위치해서는 안됩니다.

그냥 규칙만 대충맞으면 에러가 나도 실행이 된다는 얘깁니다.

쉽게 말해서 초보자도 열나 배우기 쉽다는 얘깁니다.

HTML 태그 명령어 모음

형 식

구 성

내 용

문서의 기본 구조를 나타내 주는 태그

<HTML>

<HTML>...

HTML 언어로 작성되어 있다는 것을 알려줍니다.

<HEAD>

<HEAD>...

Heading의 준말로 글의 머리말에 해당합니다.

<BODY>

<BODY>...

본문에 해당하는 부분을 알려줍니다.

<TITLE>

<TITLE>...

타이틀바에 새겨질 글자를 정의합니다.

<Hn>

<Hn>...

표제 부분에 들어갈 말을 정의합니다. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아집니다. 기본값은 H4입니다.

<!-...->

<!-주석내용->

주석을 달거나 잠시동안 이미지를 보이지 않게 할 때 사용합니다.

문단 혹은 줄을 바꾸는 태그

<P>

<P>

문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것같은 효과가 나타납니다.

<BR>

<BR>

문단을 바꾸는 태그입니다. 줄바꿈의 역할만을 수행합니다.

<PRE>

<PRE>...

여백이나 줄간격 등을 고정시켜 주는 역할을 합니다.

글자의 크기를 마음대로 조절하는 태그

<FONT>

<FONT SIZE=n>
...

글자의 크기를 마음대로 조절해 줍니다. 뒤의 숫자는 1~7이며 7이 가장 큰 크기입니다. 기본값은 3입니다.

선그리기 태그

<HR>

<HR ALIGN=
WIDTH= SIZE=>

입체적인 선을 그려줍니다. ALIGN은 선의 정렬을, WIDTH는 선의 폭을, SIZE는 선의 높이를 정해줍니다.

이미지 맵을 처리하는 태그

<ISMAP>

<IMG SRC=
"..." ISMAP>

이미지맵을 정의합니다.

<MAP>

<MAP NAME=...>
...

넷스케이프2.0에서 이미지맵을 정의합니다.

목록을 정리해 주는 태그

<LI>

<UL>...

순서가 없는 목록으로 일반적인 나열을 말합니다.

<OL>...

순서가 있는 목록으로 위에서부터 번호를 매깁니다.

<MENU>...

메뉴 목록으로 그리길지 않은 문장의 열거에 사용합니다.

<DIR>...

디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열합니다,

<DL>...

정의 목록 태그입니다.
가 아닌
와
를 사용합니다.

문서를 가운데로 정렬시켜 주는 태그

<CENTER>

<CENTER>...
</CENTER>

전체 문장을 가운데로 정렬시켜 줍니다.

인용하기 태그

<BLOCKQUOTE>

<BLOCKQUOTE>...
</BLOCKQUOTE>

문장 내에서 인용을 할 경우 들여쓰기를 한 후 인용구로 처리합니다.

형 식

구 성

내 용

글자의 모양을 정의해 주는 태그

<STRONG>

<STRONG>...

굵은 글씨를 나타내 주는 태그입니다.

<B>

<B>...

<EM>

<EM>...

이탤릭체의 글씨를 나타내 주는 태그입니다.

<I>

<I>...

<KBD>

<KBD>...

타자기체의 글씨를 나타내 주는 태그입니다.

<CODE>

<CODE>...

<TT>

<TT>...

배경 이미지 작업하기

<BODY>

<BODY
BACKGROUND="...">

배경 이미지를 띄워줍니다.

<BODY
BGCOLOR="#nnnnnn">

배경 색깔을 지정해 줍니다.

그밖의 태그들

<DFN>

<DFN>...

정의되어지는 단어에 대한 것을 말합니다.

<CITE>

<CITE>...

책이나 사진 등의 제목을 말할 때 쓰입니다.

<SAMP>

<SAMP>...

컴퓨터상에 메시지를 나탈낼 때 쓰입니다.

<VAR>

<VAR>...

이탤릭체로 표현됩니다.

<SUB>

<SUB>...

첨자에 관한 태그입니다.

<SUP>

<SUP>...

윗첨자를 나타냅니다.

<BASEPOINT>

<BASEPOINT>...
<BASEPOINT>

기본적으로 미리 약속된 크기를 다시 정할 때 사용합니다.

부분을 강조해 주는 태그

<BLINK>

<BLINK>...

글자를 깜박이게 해줍니다.

<U>

<U>...

글자에 밑줄을 그어줍니다.

연결하기 태그

<A>

<A HREF="...">
...

다른 홈페이지와 연결시켜 줍니다.

<A NAME="...">
...

자신의 홈페이지 내에서 연결해 줍니다.

주소 및 편지 서비스

<ADDRESS>

<ADDRESS>...
</ADDRESS>

주소에 대한 정의를 내려줍니다.

<MAILTO>

<A HREF="MAILTO...">

편지쓰기 창을 띄워 줍니다.

색상 지정하기

<BODY>

<BODY TEXT=
"#nnnnnn">...

글자색을 지정합니다.

<BODY LINK=
"#nnnnnn">...

하이퍼링크의 색을 지정합니다.

<BODY VLINK=
"#nnnnnn">...

한 번 누른적이 있는 하이퍼링크의 색을 지정합니다.

<BODY ALINK=
"#nnnnnn">...

누르고 있는 동안의 색을 지정합니다.

표 만들기 태그

<TABLE>

<TABLE BORDER>...
</TABLE>

표의 전체 형식을 나타냅니다.

<TR>

표 내부에 들어갈 형식을 정의합니다.

<TD COLSPAN=n>

가로칸을 n만큼 합쳐줍니다.

<TD ROWSPAN=n>

세로칸을 n만큼 합쳐줍니다.

<TD ALIGN=...>

표안의 좌우 정렬 방식을 정의합니다.

<TD VALIGN=...>

표안의 상하 정렬 방식을 정의합니다.

형 식

구 성

내 용

문서를 임의고 고정시키는 태그

<NOBR>

<NOBR>...

화면 크기에 따라 문단이 바뀌는 것을 방지합니다.

<WBR>

<WBR>...

위의 태그 안에서 문단을 바꿀 때 사용합니다.

CGI 양식 첨가하기

<FORM>

<FORM>...

양식을 정의합니다.

<FORM METHOD="..."
ACTION="...">

양식의 방법을 정의합니다.

<TEXTAREA>

<TEXTAREA NAME="..."
ROWS="...">

글틀 상자를 정의합니다.

<INPUT>

<INPUT TYPE="...">

어떤 형태로 입력할 것인지를 정의합니다.

<INPUT TYPE="RADIO">

라디오 단추를 만들어줍니다.

<INPUT TYPE=
"CHECKBOX">

체크 상자를 만들어 줍니다.

<INPUT TYPE=
"SUBMIT">

제출 버튼을 만들어 줍니다.

<INPUT TYPE="RESET">

취소 버튼을 만들어 줍니다.

<SELECT>

<SELECT NAME="...">

선택 사항 상자를 만들어 줍니다.

창만들기 태그

<FRAME>

<FRAMESET>...
</FRAMESET>

창의 기본 틀을 지정합니다.

<FRAMESET ROW=
"숫자 혹은 %">

위 아래로 나눠줍니다.

<FRAMESET COLS=
"숙자 혹은 %">

좌우로 나눠줍니다.

<FRAME SRC="..."
MARGINWIDTH="...">

창에 들어갈 좌우 여백을 정의합니다.

<FRAME SRC="..."
MARGINHEIGHT="...">

창에 들어갈 상하 여백을 정의합니다.

<FRAME SCROLLING=
"...>

스크롤바를 설정해 줍니다.

<NOFRAMES>...
</NOFRAMES>

프레임이 안보이게 해줍니다.

이미지 다루기에 필요한 태그

<IMG>

<IMG SRC="...">

이미지를 정의해 줍니다.

<IMG SRC="..."
ALIGN=...>

이미지의 정렬 상태를 나타내 줍니다.

<IMG SRC="..."
WIDTH="..."
HEIGHT="...">

이미지의 크기를 조절해 줍니다.

<IMG SRC="..."
LOWSRC="...">

이미지를 JPEG파일로 나타내 줍니다.

<IMG SRC="..."
VSPACE= HSPACE=>

이미지의 여백을 조절해 줍니다.

<IMG SRC="..."
BORDER="...">

이미지의 태두리선을 조절합니다.

<IMG SRC="..."
ALT="...">

이미지가 전송되지 않았을 경우에 글자로 대처해 줍니다.

출처 : ♣ 이동활의 음악정원 ♣

글쓴이 : 마리아 원글보기

메모 :

'blog 정보' 카테고리의 다른 글

[스크랩] 그림 사진 다운 받아 올리기 (0)	2006.06.10
[스크랩] 배경 그림 싸이트 모음 (0)	2006.04.21
[스크랩] 그림위에 음악 올리는 법 (0)	2005.12.17
[스크랩] 웹페이지 로딩속도 향상 (0)	2005.12.17
[스크랩] 동영상 올리는법 (0)	2005.12.17

현재글[스크랩] HTML태그 강좌

^ ^ 즐거운 음악원 ^ ^

duet, Tenor, Pavarotti, Lanza, Baritone, Facebook, Domingo, Twitter, Carreras, Wunderlich,

Today :
Yesterday :

^ ^ 즐거운 음악원 ^ ^