HTML 태그의 종류 - A to Z
- Programming
- 2021. 7. 25.
HTML 을 사용하실 때 태그의 종류와 그 용도에 대해서 알아보겠습니다. HTML은 홈페이지, 사이트 뿐만 아니라 티스토리나 블로그스팟, 워드 프레스 등의 블로그 사이트에서도 많이 활용되고 있는 웹 코딩 언어라서 알아두시면 좋습니다.
HTML은 다른 언어들에 비해 훨씬 직관적이고 상대적으로 쉽기 때문에 초보자분들도 쉽고 재밌게 배울 수 있습니다. 처음엔 어렵게 느껴지실 수 있으나 배우고자하면 빠르게 배울 수 있는 언어이므로 무서워하지마시고 도전하시길 바랍니다.
HTML이란?
HTML란 하이퍼텍스트 마크업 언어(HyperText Markup Language)라는 의미의 웹 페이지 작성을 위한 언어입니다.
웹 페이지 콘텐츠 안의 꺾쇠괄호<>에 둘러싸인 "태그"로 되어있는 HTML 요소 형태로 작성합니다.
HTML 태그의 종류
- <HTML> <HTML></HTML> : HTML로 작성되어 있다는 것을 알려줌.
- <HEAD> <HEAD></HEAD> : Heading의 준말로 글의 머리말에 해당함.
- <BODY> <BODY></BODY> : 본문에 해당하는 부분.
- <TITLE> <TITLE></TITLE> : 타이틀바에 새겨질 글자를 정의.
- <H1~H6>
- <H1> <H1></H1> : 표제 부분에 들어갈 말을 정의. 1~6까지의 숫자를 사용하고 숫자 가 커질수록 표제는 작아짐. 기본값은 H4
- <P> <P> : 문단을 바꾸는 태그입니다. 줄바꿈과 동시에 줄을 띤 것 같은 효과가 나타납니다.==
- <BR> <BR> : 문단을 바꾸는 태그입니다. 줄 바꿈의 역할 수행.
- <PRE> <PRE></PRE> : 여백이나 줄 간격 등을 고정.
- <FONT> <FONT SIZE=""> </FONT> : 글자의 크기 조절. 글씨 크기는 1~7이며 7이 가장 큰 크기. 기본값은 3.
- <HR> <HR ALIGN= WIDTH= SIZE= > : 입체적인 선을 그려줍니다. ALIGN은 선의 정렬을, WIDTH는 선의 폭을, SIZE는 선의 높이를 정의.
- <ISMAP> <IMG SRC= "" ISMAP> : 이미지맵을 정의.
- <MAP> <MAP NAME=> </MAP> : 넷스케이프 2.0에서 이미지맵을 정의.
- <UL> <UL></UL> : 순서가 없는 목록으로 일반적인 나열.
- <OL> <OL></OL> : 순서가 있는 목록으로 위에서부터 번호.
- <MENU> <MENU></MENU> : 메뉴 목록으로 그리 길지 않은 문장의 열거에 사용.
- <DIR> <DIR></DIR> : 디렉터리 목록으로 메뉴 목록보다 짧은 문장을 나열.
- <DL> <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> : HTML5부터 더 이상 지원하지 않는 태그.
- <BODY BACKGROUND=""> : 배경 이미지를 띄워줌.
- <BODY BGCOLOR=""> : 배경 색깔을 지정.
- <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"> : 편지 쓰기 창을 띄워줌.
- <BODY> <BODY TEXT= ""></BODY> : 글자색을 지정.
- <BODY LINK= ""></BODY> : 하이퍼링크의 색을 지정.
- <BODY VLINK= ""></BODY> : 한 번 누른 적이 있는 하이퍼링크의 색을 지정.
- <BODY ALINK= ""></BODY> : 누르고 있는 동안의 색을 지정.
- <TABLE> <TABLE BORDER> </TABLE> : 표의 전체 형식을 나타냄.
- <TR> <TR><TD></TD></TR> : 표 내부에 들어갈 형식을 정의.
- <TD> <TD COLSPAN=""> : 가로 칸을 n만큼 합쳐줌.
- <TD ROWSPAN=""> : 세로 칸을 n만큼 합쳐줌.
- <TD ALIGN=> : 표 안의 좌우 정렬 방식을 정의.
- <TD VALIGN=> : 표안의 상하 정렬 방식을 정의.
- <NOBR> <NOBR></NOBR> : 화면 크기에 따라 문단이 바뀌는 것을 방지.
- <WBR> <WBR></WBR> : 위의 태그 안에서 문단을 바꿀 때 사용.
- <FORM> <FORM></FORM> : 양식을 정의.
- <FORM METHOD="" ACTION=""> : 양식의 방법을 정의.
- <TEXTAREA> <TEXTAREA NAME="" ROWS=""> : 글틀 상자를 정의.
- <EMBED> <EMBED></EMBED> : 멀티미디어 링크 태그.
- <INPUT> <INPUT TYPE=""> : 어떤 형태로 입력할 것인지를 정의.
- <INPUT TYPE="RADIO"> : 라디오 단추를 만들어 줌.
- <INPUT TYPE= "CHECKBOX"> : 체크 상자를 만들어 줌.
- <INPUT TYPE= "SUBMIT"> : 제출 버튼을 만들어 줌.
- <INPUT TYPE="RESET"> : 취소 버튼을 만들어 줌.
- <SELECT> <SELECT NAME=""> : 선택 사항 상자를 만들어 줌.
- <FRAMESET> </FRAMESET> : 창의 기본 틀을 지정.
- <FRAMESET ROW= ""> : 위아래로 나눠줌.
- <FRAMESET COLS= ""> : 좌우로 나눠줌.
- <FRAME> <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=""> : 이미지가 전송되지 않았을 경우에 글자로 대체.
- <marquee> <marquee></marquee> : 문장이나 글자를 좌, 우 또는 위아래로 움직이게 함.
- <meta> : 문서의 다양한 정보를 서버와 클라이언트에 제공.
- <iframe> : 브라우저에 나타나는 html 문서를 자유로운 위치에 새로운 창으로 생성.
- <col> : 테이블의 각 칸의 속성을 일괄적으로 지정.
- <applet> 자바 템플릿을 html에 삽입할 때 사용.
- <small> 글자를 다른 글자보다 상대적으로 작게 나타냄
- <del> : 글자에 밑줄을 그을 때 사용
- <ins> : 글자에 밑줄을 그을 때 사용
- <listing> : <pre><xmp> 등과 비슷한 기능