본문 바로가기

IT TIP/Web

HTML Tag 설명

 

 

형 식

구  성

내            용

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

<HTML>

<HTML>...</HTML>

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

<HEAD>

<HEAD>...</HEAD>

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

<TITLE>

<TITLE>...</TITLE>

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

<BODY>

<BODY>...</BODY>

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

<Hn>

<Hn>...</Hn>

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

<!-...->

<!-주석내용-> 

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

문단 혹은 줄을 바꾸는 태그

<P>

<P>

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

<BR>

<BR>

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

<PRE>

<PRE>...</PRE>

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

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

<FONT>

<FONT SIZE=n>...</FONT>

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

선 그리기 태그

<HR>

<HR ARIGN=n

WIDTH=n SIZE=n>

 입체적인 선을 그려줍니다,  ALLIGN은 선의 정렬을 WIDTH는 선의 폭을, SIZE는    선의 높이를 정해줍니다. (※ n=숫자..^^)

목록을 정리해 주는 태그

<LI>

<UL>...</UL>

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

<OL>...</OL>

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

<MENU>...</MENU>

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

<DIR>...</DIR>

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

<DL>...</DL>

 정의 목록 태그입니다. <LI>가 아닌 <DT>와 <DD>를 사용합니다.

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

<CENTER>

<CENTER>...</CENTER>

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

인용하기 태그

<BLOCKQUOTE>

<BLOCKQUOTE>...

</BLOCKQUOTE>

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

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

<STRONG>

<STRONG>...</STRONG>

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

<B>

<B>...</B>

<EM>

<EM>...</EM>

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

<I>

<I>...</I>

<KBD>

<KBD>.../<KBD>

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

<CODE>

<CODE>...</CODE>

<TT>

<TT>...</TT>

배경 이미지 작업하기

<BODY>

<BODY BACKGROUNG="...">

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

<BODY BGCOLOR="#nnnnnn">

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

그 밖의 태그들

<DFN>

<DFN>...</DFN>

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

<CITE>

<CITE>...</CITE>

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

<SAMP>

<SAMP>...</SAMP>

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

<VAR>

<VAR>...</VAR>

 이탤릭체로 표현됩니다.

<SUB>

<SUB>...</SUB>

 첨자에 관한 태그입니다.

<SUP>

<SUP>...</SUP>

 윗첨자를 나타냅니다.

<BASEPOINT>

<BASEPOINT>... <BASEPOINT>

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

부분은 강조해 주는 태그

<BLINK>

<BLINK>...</BLINK>

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

<U>

<U>...</U>

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

연결하기 태그

<A>

<A HREF=“...”>...</A>

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

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

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

주소 및 편지 쓰기

<ADDRESS>

<ADDRESS>... </ADDRESS>

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

<MAILTO>

<A HREF="MAILTO...">

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

 Ex. <A HERF="MAIL TO:THDTJSDN@NETSGO.COM"> 멜을 보내자!!</A>

색상 지정하기

<BODY>

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

 글자색을 지정합니다.

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

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

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

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

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

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

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

<IMG>

<IMG SRC="...">

 이미지를 정의해줍니다.

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

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

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

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

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

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

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

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

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

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

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

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

 

창 만들기 태그

<FRAME>

<FRAMESET>...</FRAMESET>

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

<FRAMESET ROW= "숙자 혹은 %“>

 위 아래로 나눠줍니다.

<FRAME COLS= “숫자 혹은%”>

 좌우로 나눠줍니다.

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

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

<FRAME SCROLLING="...">

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

<NOFRAMES>...</NOFRAMES>

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

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

 창에 들어갈 좌우 여백을 설정해 줍니다.

<SELECT>

<SELECT NAME="...">

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

<NOBR>

<NOBR>...</NOBR>

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

 <WBR>

<WBR>...</WBR>

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

CGI 양식 첨가하기

<FORM>

<FORM>...</FORM>

 양식을 정의 합니다.

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

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

<TEXT

AREA>

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

 글틀 상자를 정의합니다.

<INPUT>

<INPUT TYPE="...">

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

<INPUT TYPE="RADIO">

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

<INPUT TYPE="CHECKBOX">

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

<INPUT TYPE="SUBMIT">

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

<INPUT TYPE="RESET">

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

<SELECT>

<SELECT NAME="..."

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

표 만들기 태그

<TABLE>

<TABLE BORDER>...</TABLE>

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

<TR><TD></TD></TR>

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

<TD COLSRAN=n>

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

<TD ROWSPAN=n>

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

<TD ALIGN=...>

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

<TD VALIGN=...>

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

<FONT>

<FONT COLOR="...">...</FONT>

 글자색을 바꾸고 싶은 것으로 마음대로 바꾼다.

 

'IT TIP > Web' 카테고리의 다른 글

HTML / Script 연습장  (0) 2017.04.13
MARQUEE 태그  (0) 2017.04.13
정규표현식 - 메타문자 설명  (0) 2017.04.11