Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

태그의 기본 본문

Web publishing/HTML & CSS

태그의 기본

BeOne 2007. 10. 15. 13:01

태그의 기본


태그 입력 형태

내용 설명

<HTML> </HTML>

웹 브라우져에게 현재 전송받은 문서가 HTML 문서라는 것을 알려주는 태그
HTML 문서의 맨 처음과 끝에 시작 태그와 종료 태그를 각각 쓴다.

<HEAD> </HEAD>

HTML 문서의 머리말 구조를 나타내는 태그로 문서에 직접적인 영향을 주지는 않지만, HTML 문서 자체에 대한 여러가지 정보를 가진다.

<TITLE> </TITLE>

브라우져 상단의 타이틀 바에 나타낼 HTML 문서의 제목을 정한다.
머리말부분(<HEAD></HEAD>사이)에서만 사용되는 태그.

<!DOCTYPE>

이 태그가 사용된 문서가 기초한 HTML 언어의 버전을 설명할 때 사용.
독립태그이며 머리말 부분에서만 사용된다.

<LINK>

스타일시트 파일을 불러오는 등 현재 문서와 다른 문서와의 관계를 설정할 때 사용. 독립 태그이며 머리말 부분에서만 사용된다.

HREF="이동하려는 파일 또는 URL"
TITLE="제목"
REL="옵션"

<!--   -->

HTML 문서에 주석(설명 등..)을 포함시킬 때 사용하는 태그로써 문서에는 아무런 변화를 주지 않는다. (단 스크립트 등은 예외)

<BODY> </BODY>

HTML 문서의 본문의 시작과 끝을 알린다.

BACKGROUND="파일명 또는 배경이미지가 있는곳의 URL" → 문서의 배경그림을 정한다.
BGCOLOR="#RGB값 또는 색상명" → 문서의 배경색을 정한다.
LINK="#RGB값 또는 색상명" → 링크로 연결된 텍스트의 색을 정한다. 기본색 파랑.
TEXT="#RGB값 또는 색상명" → 문서의 기본 글자색을 정한다. 기본색 검정.
ALINK="#RGB값 또는 색상명" → 링크로 연결된 부분을 클릭할때의 색을 정한다. 기본색 빨강.
VLINK="#RGB값" 또는 "색상명" → 방문했던 링크의 색을 정한다. 기본색 보라.
LEFTMARGIN="n" → 화면 외쪽 여백을 정한다.
RIGHTMARGIN="n" → 화면 오른쪽 여백을 정한다.
TOPMARGIN="n" → 화면 상단 여백을 정한다.
BOTTOMMARGIN="n" → 화면 아래의 여백을 정한다.
STYLE=" " → 특정모양을 정한다.
BGPROPERTIES → 화면을 스크롤할 때 배경그림이 함께 스크롤되지 않게 한다.



문단 , 선 등의 관련 태그





<H1~6> </H1~6>

제목 문자열을 지정하는 태그로 H1 이 가장 작고 H6 이 가장 크다. (기본값 4)
제목이기 때문에 독립된 줄에 나타난다. (<BR>태그를 사용한 것과 같음)

ALIGN="LEFT | CENTER | RIGHT"

문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.

<BR>

HTML 문서에 줄 바꿈 효과를 주는 독립 태그.

CLEAR="LEFT | RIGHT | ALL"  이미지 왼쪽, 오른쪽, 양쪽에 여백이 생길 때..

<NOBR> </NOBR>

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

<P> </P> 또는 <P>



빈 줄을 하나 삽입하고 다시 줄을 바꿔서 다음의 문자열을 표시.
이것은 <BR> 태그를 두번 사용한 것과 동일하다.

ALIGN="LEFT | CENTER | RIGHT"

문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.

<CENTER> </CENTER>

문단을 가운데로 정렬해 주는 태그
<P ALIGN="CENTER"></P> 등을 여러 번 쓸 필요 없이 <CENTER>태그를 사용하여 한번에 여러 문단을 가운데 정렬시킬 수 있다. /FONT>

<PRE> </PRE>

PREformat의 약자로 이 태그의 사이에 있는 문자열들은 여백, 줄간격 등이 보이는대로 출력된다.


<XMP> </XMP>

이 태그는 <PRE> </PRE> 와 유사하지만 태그 까지도 그대로 화면에 나타내 준다.

<DIV> </DIV>

단락 편집 태그로 각 문단 사이에 빈 줄을 추가되지 않는 것을 제외하고는 <P>태그의 기능과 동일.

ALIGN="LEFT | CENTER | RIGHT"  


문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.

<HR>

가로 선(수평선)을 표시하는 독립 태그.

ALIGN="LEFT | CENTER | RIGHT" → 선을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
WIDTH="n" → 선의 길이를 픽셀이나 % 단위로 정한다.
SIZE="n" → 선의 두께를 포인트로 정한다.
NOSHADE → 선에 입체감을 없앤다. (테두리가 없어지고 검게 채워진다.)




 


글 꼴에 관련된 태그




<MARQUEE> </MARQUEE>

자바를 사용하지 않고 화면에 스크롤되는 문자열을 표시할 때 사용한다.

ALIGN="LEFT | CENTER | RIGHT" → 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
BEHAVIOR="옵션"
HEIGHT="픽셀 값 또는 비율 값" → 문자열 가로 범위
WIDTH="픽셀 값 또는 비율 값" → 문자열 세로 범위
BGCOLOR="#RGB값 또는 색 이름" → 배경색
DIRECTION="옵션" → 이동 방향
LOOP="값" → 반복횟수
SCROLLAMOUNT="픽셀 수" → 한번에 스크롤되는 시간
SCROLLDELAY="밀리초" → 스크롤 지연 시간
HSPACE="픽셀값" → 스크롤 문자열 가로 좌표
VSPACE="픽셀값" → 스크롤 문자열 세로 좌표

<FONT> </FONT>

문자열의 크기, 글꼴과 색등을 지정한다.

COLOR="#RGB값 또는 색 이름" → 글자 색을 정한다.
SIZE="글자크기" → 글자크기를 정한다. (기본크기 3)
FACE="글자 체" → 글자 체를 정한다.

<BASEFONT> </BASEFONT>

기본 텍스트의 글꼴 크기를 정하는 독립 태그.

COLOR="#RGB값 또는 색 이름" → 글자 색을 정한다.
SIZE="글자크기" → 글자크기를 정한다. (기본크기 3)
NAME="글꼴" → 글꼴을 정한다.

<B> </B>

태그에 포함된 문자열을 굵은 글자로 만들어준다.

<I> </I>

태그에 포함된 문자열을 이탤릭체로 만드는 태그.

<U> </U>

태그로 포함된 문자열에 밑줄을 넣을 때 사용되는 태그.

<S> </S>

태그에 포함된 문자열의 중간에 선을 그어 삭제 표시를 할 때 사용한다.


<BLINK> </BLINK>

태그에 포함된 문자열을 깜빡이게 하여 눈에 쉽게 띄도록 할 때 사용한다.




 


목록 작성 시 사용하는 태그




<UL> </UL>

Unordered List의 약자로 각 목록을 볼릿 기호를 사용하여 나열할 때 사용한다.

TYPE="옵션" → 아래 <LI> 태그의 옵션과 같다.

<OL> </OL>

Ordered List의 약자로 순차적인 목록을 작성할 때 사용한다

START="시작번호"
TYPE="옵션" → <LI> 태그의 옵션과 같다.

<LI>

<UL>태그, <OL>태그, <DIR>태그, <MENU>태그 등의 사이에 들어가서 목록을 만드는 독립 태그.

VALUE="n" → 설정된 숫자 부터 시작
TYPE="a" → 소문자 a부터 시작
TYPE="I" → 그리스 대문자 I부터 시작
TYPE="i" → 그리스 소문자 i부터 시작
TYPE="1" → 숫자 1부터 시작
TYPE="CIRCLE" → 검은 원 표시
TYPE="DISK" → 흰 원 표시
TYPE="SQUARE" → 검은 사각형 표시

<DL> </DL>

Definition List의 약자로 단어 또는 용어를 설명할 때 사용한다.

COMPACT

<DT>

Definition iTem의 약자로 정의 목록을 나타낸다.
<DL> 태그 안에서만 사용되는 독립태그이다.

<DD>

정의 내용을 서술한다.
<DL> 태그 안에서만 사용되는 독립 태그.

<DIR> </DIR>

하나의 문자열이 20자 이하인 경우, 작은 목록을 만들 때 사용한다.

<MENU> </MENU>

문장을 열거




 


이미지에 관련된 태그


<IMG>

HTML 문서에서 이미지를 포함시킬 때 사용하는 독립 태그이다.

SRC="경로를 포함한 이미지 파일명" → 불러올 이미지파일의 위치와 이름을 지정한다.
LOWSRC="작은 이미지 파일의 경로 및 이름" → 불러올 이미지가 클 경우 큰 이미지가
    완전히 로드될 때까지 작은 이미지를 먼저 나타내서 화면상의 공백을 없앤다.
ALIGN="LEFT | CENTER | RIGHT" → 그림을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 그림을 위, 가운데, 아래로 각각 정렬한다.
HSPACE="픽셀값" → 그림의 좌우여백을 정한다.
VSPAVE="픽셀값" → 그림의 상하여백을 정한다.
BORDER="픽셀값" → 그림 테두리의 두께를 정한다.
HEIGHT="픽셀값" → 그림의 가로길이를 정한다.
WIDTH="픽셀값" → 그림의 세로길이를 정한다.
ALT="문자열" → 그림에 마우스를 댔을때 나오는 설명문자열을 정한다.
UseMap="#이미지맵 이름" → <MAP NAME="이미지맵 이름">태그에서 정한 이름을 불러온다.

<MAP> </MAP>

이미지맵의 시작과 끝을 나타낸다.

NAME="이미지맵 이름" → 이미지맵의 이름을 정한다.

<AREA>

<MAP> 태그 안에 들어가서 이미지를 나누는 독립태그이다.

SHAPE="RECT | CIRCLE | POLYGON" → 선택부분의 모양을 정한다. (사각형, 원형, 다각형)
SHAPE="DEFAULT" → 지정 영역 외의 부분을 클릭한 경우
COORDS="n,n,n" → 선택부분의 위치를 정한다.
HREF="링크경로명" → 선택영역 또는 영역외의 부분을 클릭했을때 연결할 문서등을 정한다.
NOHREF → 링크연결하지 않음을 나타낸다.
TARGET="창이름" → 연결 문서등을 나타낼 창의 이름을 정한다.
ALT="문자열" → 그림에 마우스를 댔을때 나오는 설명문자열을 정한다.




 


링크 관련 태그


<A> </A>

이미지, 문서, 사운드 등 여러 객체를 문서 내에 연결시킬 때 사용.
문서의 특정한 위치 또는 다른 문서로 이동하거나 다른 파일에 연결하는 역할을 한다.

HREF="이동하고자 하는 문서 또는 주소" → 특정 문서를 열거나 특정 주소로 이동
HREF="파일이름#이동하고자 하는 위치이름" → 특정 HTML문서의 특정 위치로 이동
HREF="MailTo:ID@주소" → E-Mail 바로 기재 후 보내기.
NAME="위치의 이름" → 현재위치를 지정한 후 나중에
    <A href="파일이름#위치이름">문자열</A> 로 연결하여 지정한 위치로 이동하게 한다.
TITLE="설명문자열" ==> 마우스를 대었을 때 나오는 설명 문자열을 정한다.
TARGET="_BLANK" ==> 새로운 창으로 열기
TARGET="_PARENT" ==> 상위문서 창으로 열기
TARGET="_SELF" ==> 현재의 창으로 열기 (기본 값)
TARGET="_TOP" ==> 새로운 창으로 열기 (Flame 없어짐)
TARGET="이름" ==> 자기가 설정한 창으로 열기
HREF SRC=" " ==> 소리파일 연결
REL="관계옵션"
NODE
PATH





 


테이블 관련 태그


<TABLE> </TABLE>

표의 시작과 끝을 알리고 각종 속성을 정한다.

BORDER="n" → 표의 테두리 굵기 (픽셀이나 % 단위로 지정할 수 있다.)
WIDTH="n" → 표의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.)
HEIGHT="n" → 표의 세로 크기 (픽셀이나 % 단위로 지정할 수 있다.)
CELLSPACING="n" → 표 안의 셀 사이의 간격. (기본 값 2)
CELLPADDING="n" → 표의 내용과 테두리 사이의 간격. (기본 값 1)
BACKGROUND="파일명" → 표의 배경그림 넣기
BGCOLOR="#RGB값 또는 색상 명" → 표 배경색
RULES=" " → 구획 선

<TR> </TR>

표의 한 수평 열을 정한다. <TABLE>태그 안에 들어 가야한다.

BGCOLOR="#RGB값 또는 색상명" → 표 배경색
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다.

<TH> </TH>

표 머릿 말. <TR>태그 안에 들어 가야한다.

WIDTH="n" → 셀의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.)
HEIGHT="n" → 셀의 세로 크기 (픽셀이나 % 단위로 지정할 수 있다.)
BGCOLOR="#RGB값 또는 색상 명" → 표 배경색
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다

<TD> </TD>

표의 하나하나의 셀. <TR>태그 안에 들어 가야한다.


WIDTH="n" → 셀의 가로크기 (픽셀이나 % 단위로 지정할 수 있다.)
HEIGHT="n" → 셀의 세로 크기 (픽셀이나 % 단위로 지정할 수 있다.)
COLSPAN="n" → 셀 열을 n개 만큼 합친다.
ROWSPAN="n" → 셀 행을 n개 만큼 합친다.
BGCOLOR="#RGB값 또는 색상 명" → 표 배경색
ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다.

<CAPTION> </CAPTION>

표의 제목 행을 정한다. <TABLE>태그 안에 들어 가야한다.


ALIGN="LEFT | CENTER | RIGHT" → 표 안의 문자열을 왼쪽, 가운데, 오른쪽으로 각각 정렬한다.
VALIGN="TOP | MIDDLE | BOTTOM" → 표 안의 문자열을 위, 가운데, 아래로 각각 정렬한다.




 


프레임 관련 태그





<FRAMESET> </FRAMESET>

창틀 기본 설정

ROWS="n,n,n,n..." → 상하 크기 나누기 (픽셀이나 % 단위 또는 *로 지정할 수 있다.)
COLS="n,n,n,n..." → 좌우 크기 나누기 (픽셀이나 % 단위 또는 *로 지정할 수 있다.)
BORDER="n" → 창틀 두께 크기
FRAMEBORDER="yes | no" → 창틀 테두리 유무
FRAMESPACING="n" → 창틀 내부 간격
NORESIZE → 브라우져가 프레임 크기를 변경하는 것을 금지
BORDERCOLOR="색상 값" → 경계선의 색을 설정한다. (넷스케이프에서)

<FRAME>

<FRAMESET> 에서 정한 각각의 창을 설정하는 독립태그

SRC="파일 경로 및 이름" → 각각의 창에 연결될 HTML 파일 경로 및 이름
NAME=" " → 창의 이름 설정. 나중에 TARGET 속성으로 링크연결할 때 사용
MARGINWIDTH="n" → 창에 들어갈 넓이 여백
MARGINHEIGHT="n" → 창에 들어갈 높이 여백
SCROLING="YES | NO | AUTO" → 스크롤 바(bar) 선택, 무시, 자동. (기본 값은 자동)
NORESIZE → 창틀 크기 고정

<NOFRAMES> </NOFRAMES>

프레임을 지원하지 않는 브라우져에서 나타낼 내용 표시




 


폼(FORM) 관련 태그




<FORM> </FORM>

양식의 시작과 끝을 나타내며 각종 속성을 정의한다.


NAME="이름" → 폼의 이름
METHOD="POST | GET" → 양식의 처리 방법
ACTION=" " → 양식의 내용을 처리할 CGI Script 등을 지정
ENC TYPE=" " → 양식 내용 형태
TARGET="_BLANK" → 새로운 창으로 열기
TARGET="_PARENT" → 상위문서 창으로 열기
TARGET="_SELF" → 현재의 창으로 열기 (기본 값)
TARGET="_TOP" → 새로운 창으로 열기 (Flame 없어짐)
TARGET="이름" → 자기가 설정한 창으로 이동

<TEXTAREA> </TEXTAREA>

<FORM> 태그 안에서 텍스트 영역을 만든다.

NAME="이름" → 텍스트 상자의 이름
WRAP="OFF | PHYSICAL | VIRTUAL" → 열을 자동으로 바꿀지 설정한다. (워드랩)
COLS="n" → 가로 크기
ROWS="n" → 세로 크기

<INPUT>

<FORM> 태그 안에 들어가서 각종 폼을 구성하는 독립 태그.


NAME="이름" → 폼 구성의 이름을 정한다. 반드시 필요.
VALUE="값" → 각각의 값을 정한다.
TYPE="TEXT" → 텍스트 박스 작성
  SIZE="n" → 텍스트박스의 길이
  MAXLENGTH="n" → 텍스트박스의 입력가능 최대문자수 지정
TYPE="PASSWORD" → 비밀번호 입력 상자 작성. TEXT 와 같으나 입력문자가 * 로 표시된다.
TYPE="IMAGE" → 그림보기
TYPE="HIDDEN" → 숨기기
TYPE="RADIO" → 라디오 버튼(여러 사항 중에 하나만 체크되는 것) 작성
TYPE="CHECKBOX" → 체크박스(여러 개를 선택할 수 있는 것) 작성
TYPE="SUBMIT" → 제출 버튼 작성 (스크립트가 실행됨)
TYPE="RESET" → 취소 버튼 작성 (폼이 초기화됨)
CHECKED → 미리 체크되어있는 항목 표시

<SELECT> </SELECT>

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

NAME=" " → 폼 구성의 이름을 정한다.
SIZE="n" → 리스트에 들어가는 선택메뉴 갯수

<OPTION>

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

VALUE=" " → 각각의 값을 정한다.
SELECTED → 옵션 중 선택되어져 있는 항목을 정한다. 정하지 않으면 처음 것이 기본이 된다.

'Web publishing > HTML & CSS' 카테고리의 다른 글

[HTML]padding 과 margin의 차이...  (1) 2009.05.18
css 위치지정(position)  (0) 2009.05.13
RGB 색상표  (0) 2007.10.15
링크 속성  (0) 2007.10.15
태그 기초 요약  (0) 2007.10.15
'Web publishing/HTML & CSS' Related Articles more