HTML 태그 정리
Posted: 2012. 10. 16. 16:23오늘은 HTML 태그를 총 정리 해드리겠습니다.
문서의 기본 구조를 나타내 주는 태그
<html></html> ------> html 언어로 작성되어 있다는 것을 알려줌
<head></head>------> heading의 준말로 글의 머리말에 해당
<body></body>------> 본문에 해당하는 부분을 알려줌
<title></title> ------> 타이블바에 새겨질 글자를 정의
<Hn></Hn> ------> 표제 부분에 들어갈 말을 정의. 1~6까지의 숫자를 사용하고 숫자가 커질수록 표제는 작아짐 기본값은 H4
<!-주석내용-> ------> 주석을 달거나 잠시동안 이미지를 보이지 않게 할때 사용
문단 혹은 줄을 바꾸는 태그
<P> ------> 문단을 바꾸는 태그 줄바꿈과 동시에 줄을 띈 것같은 효과
<BR> ------> 문단을 바꾸는 태그 줄바꿈의 역할만 수행
<PRE></PRE> ------> 여백이나 줄간격 등을 고정시켜 주는 역할
글자의 크기를 마음대로 조절하는 태그
<FONT SIZE = n></FONT> ------> 글자의 크기를 마음대로 조절. 두의 숫자는 1~7까지며 7이 가장 큰 크기 기본값은 3
선 그리기 태그
<HR align = width = size = > ------> 입체적인 선을 그려줌
align은 선의 정렬 width는 선의 폭 size는 선의 높이
이미지 맵을 처리하는 태그
<img src = "" ismap> ------> 이미지맵을 정의
<map name = ></map> ------> 넷스케이프2.0에서 이미지맵을 정의
목록을 정리해 주는 태그
<UL></UL> ------> 순서가 없는 목록. 일반적인 나열
<OL></OL> ------> 순서가 있는 목록. 위에서부터 번호 매김
<Menu></Menu> ------> 메뉴 목록으로 그리길지 않은 문장의 열거에 사용
<DIR></DIR> ------> 디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열
<DL></DL> ------> 정의 목록 태그 <LI>가 아닌<DT>와 <DD>를 사용
문서를 가운데로 정렬시켜 주는 태그
<center></center> ------> 전체 문장을 가운데로 정렬
인용하기 태그
<blockquote></blockquote> ------> 문장 내에서 인용을 할 경우 들여쓰기를 한 후
인용구로 처리
글자의 모양을 정의해 주는 태그
<Strong></Strong> , <B></B> ------> 굵은 글씨를 나타내 주는 태그
<EM></EM>, <I></I> ------> 이탤릭체의 글씨를 나타내 주는 태그
<KBD></KBD>, <CODE></CODE>, <TT></TT> ------> 타자기체의 글씨를 나타내 주는
태그
배경 이미지 작업하기
<body background=""> ------> 배경 이미지 띄어줌
<body = "#nnnnnn"> ------> 배경 색깔을 지정
그 밖의 태그들
<DFN></DFN> ------> 정의되어지는 단어에 대한 것
<CITE></CITE> ------> 책이나 사진 등의 제목
<SAMP></SAMP> ------> 컴퓨터상에 메세지
<VAR></VAR> ------> 이탤릭체
<SUB></SUB> ------> 첨자에 관함 태그
<SUP></SUP> ------> 윗첨자
<Basepoint>...<Basepoint> ------> 기본적으로 미리 약속된 크기를 다시 정할때 사용
부분을 강조해 주는 태그
<Blink></Blink> ------> 글자를 깜박이게
<U></U> ------> 글자에 밑줄
연결하기 태그
<A href=""></A> ------> 다른 홈페이지와 연결
<A name=""></A> ------> 자신의 홈페이지 내에서 연결
주소 및 편지 서비스
<Address></Address> ------> 주소에 대한 정의
<A href="mailto"> ------> 편지쓰기 창을 띄어 줌
색상 지정하기
<body text="#nnnnnn"></body> ------> 글자색을 지정
<body link="#nnnnnn"></body> ------> 하이퍼링크의 색을 지정
<body vlink="#nnnnnn"></body> ------> 한번 누른적이 있는 하이퍼링크의 색을 지정
<body alink="#nnnnnn"></body> ------> 누르고 있는 동안의 색을 지정
표 만들기 태그
<table border></table> ------> 표의 전체 형식을 나타냄
<tr><td></td></tr> ------> 표 내부에 들어갈 형식을 정의
<td colspan=n> ------> 가로칸을 n만큼 합쳐줌
<td rowspan=n> ------> 세로칸을 n만큼 합쳐줌
<td align= > ------> 표안의 좌우 정렬 방식을 정의
<td valign> ------> 표안의 상하 정렬 방식을 정의
문서를 임의로 고정시키는 태그
<NOBR></NOBR> ------> 화면 크기에 따라 문단을 바뀌는 것을 방지
<WBR></WBR> ------> 위의 태그 안에서 문단을 바꿀 때 사용
CGI 양식 첨가하기
<form></form> ------> 양식을 정의
<form method="" action=""> ------> 양식의 방법을 정의
<Textarea name="" rows=""> ------> 글틀 상자를 정의
<input type=""> ------> 어떤 형태로 입력할 것인지를 정희
<input type="radio"> ------> 라디오 단추
<input type="checkbox"> ------> 체크 상자
<input type="submit"> ------> 제출 버튼
<input type="reset"> ------> 취소 버튼
<select name=""> 선택사항상자
창만들기 태그
<frameset></frameset> ------> 창의 기본틀
<frameset row="숫자 혹은 %"> ------> 위 아래
<frameset cols="숫자 혹은 %"> ------> 좌우
<frame src="" marginwidth=""> ------> 창에 들어갈 좌우 여백
<frame src="" marginheight=""> ------> 창에 들어갈 상하 여백
<frame scrolling=""> ------> 스크롤바를 설정
<NOFRAMES></NOFRAMES> ------> 프레임이 안보이게 해줌
이미지 다루기에 필요한 태그
<img src = ""> ------> 이미지를 정의
<img src="" align= > ------> 이미지의 정렬 상태
<img src="" width="" height=""> ------> 이미지의 크기 조절
<img src="" lowsrc=""> ------> 이미지를 JPEG파일로 나타냄
<img src="" vspace= hspace= > ------> 이미지의 여백 조절
<img src="" border=""> ------> 이미지의 테두리선 조절
<img src="" alt=""> ------> 이미지가 전송되지 않았을 경우에 글자로 대처
이상으로 HTML 태그 정리에 대해 알려 드렸습니다.
유용하게 사용하시길 바랍니다.
