HTML TAG정리

Notice

Recent Posts

Recent Comments

Link

« 2025/02 »
일	월	화	수	목	금	토
						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

Tags more

Archives

Today

Total

관리 메뉴

HoonStyle

HTML TAG정리 본문

Programming

HTML TAG정리

HoonStyle 2011. 3. 27. 22:45

HTML 언어의 기본구조

<HTML>

<HEAD>

HTML 문서에 관한 정보를 나타낼 수 있는 부분

</HEAD>

<BODY>

HTML문서의 본문을 사용할 수 있는 부분

</BODY>

</HTML>

1. 글자에 관련된 태그

<Hn> </Hn> (n=1~6)

본문에서 제목의 크기를 표현할 때 사용, 숫자가 작을수록 크기가 크다 Default는 4

사용가능한 속성

속성	값	기능설명
align	left,center,right	정렬방식 지정

<FONT SIZE = "n"> </FONT> (n=1~7) Default는 3

글꼴(font)의 크기를 결정한다. 숫자가 클수록 크기가 크다

속성	값	기능설명
size	1~7	글꼴의 크기 결정
color	색상	글꼴의 색상 결정
face	폰트명	글꼴의 종류 결정

ex) <FONT size="4" color="red" face="굴림“> 변경될 글꼴 </FONT>

스타일 태그

물리적 스타일 태그 종류	물리적 스타일 태그 기능설명
<B> ... </B>	굵은 글자체 (Bold)
<I> ... </I>	이탤릭체(Italic)
<U> ... </U>	밑줄 글씨체(Underline)
<TT> ... </TT>	타자체(Typewriter Text)
<SUP> ... </SUP>	^{윗첨자체(SUPerscript)}
<SUB> ... </SUB>	_{아래첨자체(SUBscript)}
<S> ... </S>	~~취소문자체(Strike through)~~

<P></P> 문단나누기

<BR> 줄 바꿈 태그 </BR>는 필요 없다.

<CENTER> 텍스트나 그림 등을 가운데로 정렬

특수문자

특수문자	특수명	아스키코드
<	<	<
>	>	>
&	&	&
“	"	"

2. 문단과 문서 관련 태그

<HR> 화면에 수평선을 그릴 때 사용하는 태그

속성	기능설명
SIZE=n	두께를 지정 (픽셀단위)
WIDHT=n	넓이를 지정 (픽셀 또는 백분율)
ALIGN=left or center or right	왼쪽,가운데,오른쪽 정렬
NOSHADE	수평선에 음영효과가 없는 선

목록(LIST)

순서있는 목록(Ordered List)

<OL>

<LI type = 속성> 목록 내용 1

<LI type = 속성> 목록 내용 n

</OL>

속성	사용 예	설명(리스트 앞 마커형태 지정
TYPE	<LI TYPE="A"> <LI TYPE="a"> <LI TYPE="I"> <LI TYPE="i"> <LI TYPE="1"> <LI>	영문 대문자 영문 소문자 로마 숫자 대문자 로마 숫자 소문자 아라비아 숫자 아라비아 숫자
START	<OL START = "숫자(정수)“>	원하는 숫자부터 목록시작번호 지정
VALUE	<LI VALUE = "숫자(정수)“>	원하는 숫자부터 목록시작번호 변경

순서 없는 목록(Unordered List)

<UL>

<LI type = 속성> 목록 내용 1

<LI type = 속성> 목록 내용 n

</UL>

속성	사용 예	설명(리스트앞 마커형태 지정)
TYPE	disc	●
	square	■
	circle	□

3. 글자색과 배경색에 관련된 태그

<BODY>태그에서 사용할 때

<FONT>태그에서 사용할 떄

속성	값	기능설명
size	1~7	글꼴의 크기 결정
color	색상	글꼴의 색상 결정
face	폰트명	글꼴의 종류 결정

<FONT　COLOR="blue"> 색의 이름으로 쓰거나

<FONT COLOR="#0000ff"> RGB 16진수로 표현할 수 있다.

4. 표에 관련된 태그

<TABLE>태그

표를 만들 때 사용하는 태그

<TABLE>태그 안에는 <TR>,<TD>,<TH> 등 사용가능

속성	값	기능설명
align	left, center, right	테이블 내의 내용들이 어느 방향으로 정렬딀 것인지 지정
bgcolor	색상	테이블의 배경색 지정
border	픽셀	테이블의 외곽 두께를 지정
cellpadding	픽셀	셀과 내부 내용 간의 거리를 지정
cellspacing	픽셀	셀 간의 간격을 지정

<TR>태그

표의 행(table row)을 정의하는 태그

속성	값	기능설명
align	left, center, right	셀 내의 내용들이 어느 방향으로 정렬딀 것인지 지정 (수평)
valign	top,middle,botton	셀 내의 내용들이 어느 방향으로 정렬딀 것인지 지정 (수직)

<TD>태그

표의 셀의 내용에 데이터를 넣는다.

속성	값	기능설명
bgcolor	색상	배경색상 지정
align	left, center, right	셀 내의 내용들이 어느 방향으로 정렬딀 것인지 지정 (수평)
valign	top, middle, botton	셀 내의 내용들이 어느 방향으로 정렬딀 것인지 지정 (수직)
rowspan	숫자	현재 셀과 합쳐질 열의 수를 지정
colspan	숫자	현재 셀과 합쳐질 행의 수를 지정

<TH>태그

표의 머리부분(table header) 기본적으로 BOLD속성 지정

속성	값	기능설명
align	left, center, right	셀 내의 내용들이 어느 방향으로 정렬딀 것인지 지정 (수평)
rowspan	숫자	현재 셀과 합쳐질 열의 수를 지정
colspan	숫자	현재 셀과 합쳐질 행의 수를 지정

5. 하이퍼링크에 관련된 태그

<A HREF = "URL"> ....</A> 다른 HTML 웹 문서로 이동하려고 할 때 사용

<A HREF = "URL#target"> ....</A>다른 HTML 웹 문서의 특정한 위치로 이동하려고 할 때 사용.
ex)

사용가능 속성

속성

값

기능설명

href

URL

연결된 하이퍼링크를 지정하고 목적지를 표시

target에는 _blank,_parent,_self,_top등이 사용

즉 연결될 링크가 어느 곳에 표현될지 지정

name

문자열

앵커를 지정

target에는 _blank,_parent,_self,_top등이 사용

즉 연결될 링크가 어느 곳에 표현될지 지정

6. 그림 삽입에 관련된 태그

이미지 삽입을 위해 <IMG>태그를 사용

<IMG src=".\image\main.gif" alt="메인이미지“ align="center"> 이런식으로 사용

속성	값	기능설명
src	URL	그림 파일이 있는 위치를 지정
alt	문자열	그림대신 대치할 문자열 지정
align	left, center, right, top, middle, bottom	left, center,right속성 값은 그림 파일이 화면에 정렬될 방식을 지정. top, middle,bottom 속성 값들은 그림 파일옆의 텍스트 줄의 상대적인 위치를 지정한다 기본은 bottom
height	길이	그림 파일의 세로 길이를 지정
width	길이	그림 파일의 가로 너비를 지정
hspace	길이	그림 파일의 가로 여백을 지정
vspace	길이	그림 파일의 세로 여백을 지정

7. 프레임에 관련된 태그

frame이란 웹브라우저의 화면을 분할하여 웹페이지를 읽을 수 있도록 한다.

<frame>태그 사용형식

<frame src="URL"

name="프레임명“

noresize

scrolling = "yes 또는 no 또는 auto"

marginheight = "상하 여백의 크기 픽셀값 숫자“

marginwidth = "좌우 여백의 크기 픽셀값 숫자“>

<frame>태그의 속성

속성	값	기능설명
src	URL	프레임에 들어갈 URL주소를 지정.
name	문자열	프레임의 이름
noresize	n	프레임의 크기 고정 속성
scrolling	yes,no,auto	yes:스크롤바 표시 no:스크롤바 표시안함 auto:프레임보다 문서내용이 작을때는no 프레임보다 문서내용이 클때는 yes
marginheight	n	픽셀 수 n 만큼의 상하여백 지정
marginwidth	n	픽셀 수 n 만큼의 좌우여백 지정

8. 폼에 관련된 태그

<FORM>태그는 양식의 시작을 알리고<INPUT>태그는 양식의 종류 등 입력을 받아들이기 위해 사용

.......

</INPUT>

</FORM>

<FORM>태그의 속성의 종류

속성	기능 설명
action	웹서버에서 사용자가 입력할 양식을 처리하는 CGI 스크립트의 URL주소를 지정하는 기능
enctype	웹서버의 CGI 프로그램으로 전송될 데이터 유형, 즉 미디어의 형태를 지정하는 기능
name	입력할 양식 폼의 이름을 지정
method	클라이언트에서 서버로 전송할 때의 전달 방식을 지정하는 기능 속성값은 ‘get'또는 ’post'가 있다 기본값은 ‘get'
target	클라이언트에서 서버에게 입력 양식의 데이터를 보낸 후의 결과를 다른 윈도우에서 보려고 하는 경우 지정하는 기능

<INPUT>태그의 종류

<INPUT>태그의 유형의 종류	값	기능설명
text	텍스트 입력 양식 지정.	<INPUT TYPE="text">
button	버튼 입력 양식 지정.	<INPUT TYPE="button">
checkbox	체크상자 양식 지정.	<INPUT TYPE="checkbox">
radio	라디오버튼 양식 지정.	<INPUT TYPE="radio">
password	암호 입력 양식 지정.	<INPUT TYPE="password">
hidden	보이지않는 입력방식 지정.	<INPUT TYPE="hidden">
reset	재초기화 양식 지정.	<INPUT TYPE="reset">
submit	전송 버튼 양식 지정.	<INPUT TYPE="submit">
image	이미지 입력 양식 지정.	<INPUT TYPE="image" SRC="이미지URL주소“>
file	파일 업로드(Upload)양식 지정.	<INPUT TYPE="file">

<INPUT>태그 이외의 다른태그

<INPUT>태그의 이외의 다른 유형의 종류	값	기능설명
textarea	여러 줄의 텍스트 입력 양식 지정.	<TEXTAREA>
select	드롭다운(drop-down) 메뉴 및 선택 양식 지정	<SELECT>

9. 멀티미디어에 관련된 태그

<embed>태그 사용형식

속성의 종류	내용
width	화면에 표시할 해당 재생기의 가로길이 설정
height	화면에 표시할 해당 재생기의 세로길이 설정
loop	반복 실행 유무 설정 (true \| false)
autostart	자동 실행 유무 설정 (true \| false)
controller	화면에 표시할 해당 재생기의 화면에 보이게 할지를 설정 (true \| false)

<bgsound>태그의 사용 형식

<bgsound>태그의 속성

속성의 종류	내용
loop	반복 실행 우무 설정, 횟수를 입력하거나 infinite를 설정

'Programming' 카테고리의 다른 글

[MFC]List Control 색 입히기 (0)	2012.08.21
FileTracker : error FTK1011 (0)	2012.06.04
error C2440: 'static_cast' : 'void (__thiscall CDlgAlarms::* )(WPARAM,LPARAM)'에서 'LRESULT (__thiscall CWnd::* )(WPARAM,LPARAM)'(으)로 변환할 수 없습니다. (2)	2012.03.13
Eclipse 줄번호 보이기 (0)	2011.03.17
Android SDK 업데이트 (0)	2011.03.17

'Programming' Related Articles

HoonStyle

HTML TAG정리 본문

HTML TAG정리

'Programming' 카테고리의 다른 글

티스토리툴바