Study/Frontend

[HTML] 태그 정리

david95j2 2020. 11. 25. 09:04

<!DOCTYPE>

HTML 언어의 버전 지정

<!-- -->

주석문

<BODY>

BACKGOUND

배경그림

BGCOLOR

배경색

TEXT

기본 글자색(검정)

LINK

링크로 연결된 텍스트 색

ALINK

링크로 연결된 부분을 클릭시 색

VLINK

방문했던 링크의 색

BGPROPERTIES

="FIXED" : 배경 이미지 고정

<H1~H6>

H1 이 가장 큼, H6가 가장 작음

<H1> <FONT SIZE=6> 같은 크기

<H2> <FONT SIZE=5> 같은 크기

:

<H6> <FONT SIZE=1> 같은 크기

<BASEFONT>

 

기본 텍스트 설정

NAME

글씨체

<FONT>

SIZE

글자 크기, 1이 가장 작음, 7이 가장 큼,

기준값=3

(+,-)를 이용하여 상대적 폰트크기 지정

COLOR

글자색, <FONT COLOR="#000000"> : 검정색, <FONT COLOR="BLACK">

FACE

글씨체

<BDO>

DIR="RTL"

글자 방향이 오른쪽에서 왼쪽으로

DIR="LTR"

글자 방향이 왼쪽에서 오른쪽으로

<NOBR>

문장이 긴 경우, 자동으로 다음 줄에 표시해 주는 것을 막을 때 사용

<BLOCKQUOTE>

인용문 또는 들여쓰기를 할 때 사용

<EMBED>

HTML 문서에서 사용할 수 없는 데이터를 플러그 인(Plug In)기능을 사용

<OBJECT>

HTML 4.0에서는 멀티미디어 데이터를 효과적으로 사용

이미지, 동영상, 자바 애플릿 (Java Applet) 플러그 인 (Plug In) 데이터, 다른 HTML 문서 등을 HTML문서에 삽입

현재 데이터 형식마다 사용되고 있는 <IMG> <APPLET> <EMBED> <BGSOUND> 등을 통일해서 다룸

<P>

단락 구분

 <BR> 태그를 2번 사용한 것과 동일

 마감 태그(</P>) 없음

 여러 번 사용해도 한번 적용됨

<DIV>

단락 편집 태그로 <P>태그와 유사

, 각 문단 사이에 빈줄 추가되지 않음 - <P>태그와 차이점

<PRE>

PREfromat 약자, <PRE></PRE>사이에 있는 문자열들의 공백, 줄 간격 그대로 화면에 출력

<XMP>

<PRE></PRE>태그와 유사하지만, 태그까지도 그대로 화면에 출력

<HR>

 

가로선(수평선) 표시

WIDTH

선의 길이, 픽셀 또는 %로 표시

SIZE

선의 두께

NOSHADE

선의 입체감을 없앰

<B>

굵은 글자

<I>

이탤릭체

<U>

밑줄

<S>

취소선

<SUP>

위첨자

<SUB>

아래첨자

<MAP>

<IMG> 태그로 삽입한 이미지에 맵처럼 어느 부분에 링크를 거는 태그

<IMG>

SRC

이미지 파일 경로

ALT

그림에 마우스를 댔을 때 나오는 설명 문자열 지정

WIDTH

가로 : 가로세로 어느 하나값만 변경해도, 같은 비율로 확대/축소가 이루어짐

HEIGHT

세로 : 가로세로 어느 하나값만 변경해도, 같은 비율로 확대/축소가 이루어짐

<MAP>

 

<AREA> 태그와 함께 이미지 맵을 만들 때 사용

이미지 맵을 사용하면 하나의 이미지 파일에 여러 개 링크 설정 가능

NAME

맵 이름

<AREA>

SHAPE

RECT | CIRCLE | POLY : 사각형 |  | 다각형

COORDS

영역의 좌표

HREF=""

연결할 대상

 

ex)

<img src="이미지 파일“ usemap="#맵이름”>

<map name="맵이름“>

<area shape="영역의 모양“ coords="영역의 좌표” href="연결할 대상>

<BASE>

 

상대경로의 기본위치를 변경

HREF=""

경로 지정

ex)

<A>

HREF=“”

연결시킬 문서, URL

NAME

현재 위치 저장

<A HREF="파일이름#위치이름“>문자열</A>로 지정한 위치로 이동

ex) <A NAME="Top"></A>

<A HREF="#Top">위로</A>

TARGET=_BLANK

새로운 창

TARGET=_PARENT

상위문서 창

TARGET=_TOP

새로운 창(Frame 없어짐)

TARGET=_SELF

현재 창

<ADDRESS>

이탤릭체로 표시

목록 태그

<UL>

 

Unordered List, 블릿 기호로 표시

TYPE=CIRCLE

흰 원() 표시

TYPE=DISC

검은 원() 표시, 기본값

TYPE=SQUARE

검은 사각형() 표시

<OL>

 

Ordered List, 순차적인 목록 작성

TYPE="1"

숫자 1부터 시작, 기본값

TYPE=""

그리스 소문자 시작

TYPE=""

그리스 대문자 시작

TYPE="a"

소문자 a 시작

TYPE="A"

대문자 A 시작

START

시작 번호 지정(문자 값이 아닌 숫자값으로 지정)

예시

<ol type="a" start=2>

<li> aaaa

<li> bbbb

<li> cccc

</ol>

<출력결과>

 

 

VALUE="n"

설정된 숫자부터 시작

<LI>

<UL>, <OL> 태그 사이에서 목록을 만드는 독립태그

<DL>

Definition List, 단어나 용어를 사용할 때 사용

<DT>

Definition iTem, 정의 목록, <DL>태그 안에서 사용

<DD>

정의 내용 서술, <DL>태그 안에서 사용

TABLE 태그

<TABLE>

CELLSPACING

표 안의 셀 사이의 간격

CELLPADDING

표 안의 내용과 테두리 사이의 간격

WIDTH

가로

HEIGHT

세로

BORDER

테두리 선 두께

FRAME

테두리 선의 표시 방법

<CAPTION>

테이블의 제목 설정

<TR>

 

Table Row의 약어

ALIGN

="LEFT | CENTER | RIGHT"

VALIGN

="TOP | MIDDLE | BOTTOM"

<TH>

Table Header의 약어, 기본적으로 가운데 정렬, 굵은 글씨로 표시

<TD>

 

Table Data의 약어

ROWSPAN=“n”

셀 행을 n개 만큼 합침

COLSPAN=“n”

셀 열을 n개 만큼 합침

FRAME 태그

<FRAMESET>

ROWS="n,n"

상하 크기 나누기 (단위 : 픽셀 또는 % )

COLS="n,n"

좌우 크기 나누기 (단위 : 픽셀 또는 % )

NORESIZE

브라우저에서 프레임크기 변경하는 것을 금지

<FRAME>

SRC=""

파일경로 및 이름, 각각의 창에 연결될 HTML 파일 경로 및 이름

 

NAME=""

창의 이름 설정, TARGET 속성으로 링크 연결할 때 사용

FORM 태그

<FORM>

METHOD

="POST | GET"

ACTION=""

CGI Script 지정

TARGET=_BLANK

새로운 창

TARGET=_PARENT

상위문서 창

TARGET=_TOP

새로운 창(Frame 없어짐)

TARGET=_SELF

현재 창

<TEXTAREA>

<FORM>태그 안에서 텍스트 영역을 만듦, 여러 줄의 텍스트 입력을 받음

<INPUT>

TYPE=TEXT

텍스트 박스 작성, 한 줄의 텍스트 입력을 받음

TYPE=PASSWORD

* 로 표시

TYPE=IMAGE

그림보기

TYPE=FILE

파일

TYPE=HIDDEN

숨기기

TYPE=RADIO

라디오 버튼, 여러 사항 중 하나만 체크

TYPE=CHECKBOX

체크박스, 여러 개 선택 가능

TYPE=SUBMIT

제출(스크립트 실행)

TYPE=RESET

취소(폼이 초기화됨)

CHECKED

미리 체크된 항목 지정

VALUE=""

버튼의 이름을 표시, 버튼에 표시됨

스크롤메뉴 태그

<SELECT>

 

<FORM>태그 안에서 메뉴나 스크롤 형태의 선택 상자를 만듦

SIZE

목록상자의 크기, SIZE가 기술되지 않은 경우 콤보박스 형태로 출력

MULTIPLE

여러 개 항목 선택

<OPTGROUP>

 

<SELECT>에 나열된 OPTION 항목들을 종류별로 구분하여 여러 개 그룹으로 나열할 때 사용

OPTGROUP 은 하나 이상의 OPTION을 포함해야 함.

LABEL=""

표시명

<OPTION>

 

<SELECT>태그 안에서 각각의 선택사항을 정하는 독립 태그

VALUE=""

각각의 값

LABEL=""

표시명

SELECTED

선택된 항목을 지정

<META>

 홈페이지 제작자, 키워드, 정보의 이름과 내용

ex) <meta name="bakoon" content="test page">

 HTML에서 사용하는 문자코드, 스타일 시트, 스크립트 언어 설정

ex) <meta http-equiv="Content-Type" content="text/html" ;

charset=euc_kr">

 설정된 시간이 지나면 자동으로 다른 홈페이지 이동하기

ex) <meta http-equiv="refresh" content="3;url="http://a.com">