HTML 에 대하여(펌)
1) 기본형식
<HTML>
<HEAD>
<TITLE>HTML 정리</TITLE>
</HEAD>
<BODY>
HTML을 정리해 보자!
</BODY>
</HTML>
2) 기본태그
1. <BODY 속성=”속성값”> 태그 </BODY>
|
속성 |
설명 |
속성값 |
|
BACKGROUND |
문서 배경이미지 지정 |
파일이름이나 url |
|
BGCOLOR |
배경색을 지정,기본값 흰색 |
색상이름,색상코드 |
|
TEXT |
글자색 지정, 기본값 검정 |
색상이름,색상코드 |
|
LEFTMARGIN |
왼쪽 여백 |
숫자(픽셀단위) |
|
TOPMARGIN |
상단 여백 |
숫자(픽셀단위) |
|
LPADDING |
셀의 안쪽여백조절 |
0(여백없음),픽셀값 |
2. <P 속성=”속성값”> 태그 </P> – 문단을 나눈다
|
속성 |
설명 |
속성값 |
|
ALIGN |
단락의 정렬방법 조절 |
Left,right,centerl |
3. <BR> 태그 – 줄을 바꾼다
4. <HR 속성=”속성값”> 태그 – 수평선을 삽입한다.
|
속성 |
설명 |
속성값 |
|
ALIGN |
수평선 정렬방법 |
Left,right,centerl |
|
COLOR |
수평선의 색상 |
색상이름,색상코드 |
|
SIZE |
수평선의 굵기 |
숫자(픽셀단위) |
|
WIDTH |
수평선의 가로길이 |
픽셀값,%값 |
|
NOSHADE |
그림자 없는 수평선 |
없음 |
5. <!-- --> 태그 – 주석
6. <FONT 속성=”속성값”> 태그 </FONT> – 텍스트의 크기와 색상, 글꼴등의 속성조절
|
속성 |
설명 |
속성값 |
|
FACE |
텍스트의 글꼴 |
굴림체,궁서체,돋움체 등 |
|
COLOR |
텍스트의 색상 |
색상이름,색상코드 |
|
SIZE |
텍스트의 크기 |
1 ~ 7 사이의 숫자 , 픽셀값 |
7. <MARQUEE 속성=”속성값”> 태그 </MARQUEE> – 텍스트나 이미지를 흘러가게 한다.
|
속성 |
설명 |
속성값 |
|
BEHAVIOR |
스크롤 형태 |
scroll,slide,alternate |
|
DIRECTION |
스크롤방향 |
let,right,up,down |
|
SCROLLDELAY |
스크롤 지연속도 |
숫자(1/1000 초 단위) |
|
SCROLLAMOUNT |
스크롤되는 픽셀수 |
숫자(픽셀단위) |
|
BGCOLOR |
스크롤 영역의 배경색 |
색상이름,색상값 |
|
HEIGHT |
스크롤 영역의 높이 |
숫자(픽셀단위) |
|
WIDTH |
스크롤 영역의 너비 |
숫자(픽셀단위) |
|
|
스크롤 반복횟수 |
숫자 , infinite (무한반복) |
[ 예제 ]
<marquee behavior=”scroll” direction=”left” height=”40” width=”100” >
바쁘다 바뻐…..휴일 잘 지내세요!…
</marquee>
8. <B> 태그 </B> – 텍스트를 진하게 표시한다.
9. <SUP> 태그 </SUP> – 위첨자를 표시
10. <SUB> 태그 </SUB> – 아래첨자를 표시
11. <S> 태그 </S> – 텍스트 위로 취소선을 긋는다
12. <IMG 속성=”속성값”> 태그 – 이미지를 삽입한다.
|
속성 |
설명 |
속성값 |
|
SRC |
이미지 파일 경로 |
이미지를 포함한 경로값 |
|
ALT |
설명글 |
텍스트 |
|
ALIGN |
이미지 정렬방법 |
left,right,center |
|
BORDER |
이미지 주위 테두리선 |
0(테두리선없음),숫자 |
|
HEIGHT |
이미지 높이 |
숫자(픽셀단위) |
|
WIDTH |
이미지 너비 |
숫자(픽셀단위) |
[ 예제 ]
<img src=”image/star.jpg” width=400 height=450 alt=”별” align=”left”>
13. <A 속성=”속성값”> 태그 </A> – 문서나 사이트를 연결해주는 링크를 만듬
|
속성 |
설명 |
속성값 |
|
SRC |
이미지 파일 경로 |
이미지를 포함한 경로값 |
|
ALT |
설명글 |
텍스트 |
|
ALIGN |
이미지 정렬방법 |
left,right,center |
|
BORDER |
이미지 주위 테두리선 |
0(테두리선없음),숫자 |
|
HEIGHT |
이미지 높이 |
숫자(픽셀단위) |
|
WIDTH |
이미지 너비 |
숫자(픽셀단위) |
14 .<EMBED> 태그 – 동영상 및 음악파일과 같은 멀티미디어 파일 재생
|
속성 |
설명 |
속성값 |
|
SRC |
삽입할 파일 |
파일경로, url |
|
AUTOSTART |
자동 재생 |
true , fasle |
|
WIDTH/HEIGHT |
플레이어 크기지정 |
픽셀값 |
|
LOOP |
반복횟수 |
true , false , 숫자 |
|
HIDDEN |
플레이어 숨기기 |
true , flase |
[ 예제 ]
<embed src=”../music/tom.avi” autostart=true width=300 height=300
loop=true hidden=false >
15.<TABLE> </TABLE> 태그
① 기본 형식
<TABLE>
<TR>
<TD> </TD>
</TR>
</TABLE>
② 속성
<TABLE> 태그 속성들
|
속성 |
설명 |
속성값 |
|
ALIGN |
표의 정렬방법 |
left(기본값),right,center |
|
BGCOLOR |
배경색을 지정 |
색상이름,색상코드 |
|
BACKGROUND |
배경이미지 지정 |
배경이미지경로 |
|
BORDER |
표의 테두리두께조절 |
0(테두리없음),1(기본값),픽셀값 |
|
BORDERCOLOR |
표나 칸의 테두리색상조절 |
색상이름,색상코드 |
|
CELLPADDING |
셀의 안쪽여백조절 |
0(여백없음),픽셀값 |
|
CELLSPACING |
셀과 셀사이의 여백조절 |
0(여백없음),픽셀값 |
|
WIDTH |
표의 너비 지정 |
픽셀값 |
|
HEIGHT |
표의 높이 지정 |
픽셀값 |
|
BORDERCOLORDARK |
테두리의 입체효과시 설정 |
색상이름,색상코드 |
|
BORDERCOLORLIGHT |
테두리선의 어두운부분 |
색상이름,색상코드 |
<TD> 태그의 속성들
|
속성 |
설명 |
속성값 |
|
ALIGN |
셀안에 있는 내용정렬 |
left(기본값),right,center |
|
VALIGN |
셀의 세로정렬 지정 |
top,middle(기본값),bottom |
|
BACKGROUND |
셀의 배경이미지 |
배경이미지경로 |
|
BGCOLOR |
셀 전체의 배경색 |
색상이름,색상값 |
|
COLSPAN |
여러칸을 하나로 합침 |
합칠개수 |
|
ROWSPAN |
여러줄을 하나로 합침 |
합칠개수 |
|
WIDTH/HEIGHT |
셀의 너비/높이 |
픽셀값 |
[ 예제 1 ]
<html>
<head>
<title>테두리정렬(1)</title>
</head>
<body>
<table border=1 width=180 height=250>
<tr><td>첫번째 칸</td></tr>
<tr><td>두번째 칸</td></tr>
<tr><td>세번째 칸</td></tr>
</table>
</body>
</html>
[ 예제 2 ]
<html>,
<head>
<title>테두리정렬(2)</title>
</head>
<body>
<table border=8 width=230 height=250>
<tr aling=center>
<td>첫번째 셀</td>
<td align=right>두번째 셀</td>
<td>세번째 셀</td>
</tr>
</table>
</body>
</html>
[ 예제 3 ]
<html>
<head>
<title>테이블 합치기</title>
</head>
<body>
<table border=2 width=200 height=200>
<tr>
<td colspan=3>한강<td></tr>
<tr>
<td colspan=2>금강산</td>
<td rowspan=2>백두산</td></tr>
<tr>
<td>서울</td>
<td>합천</td></tr>
</table>
</body>
</html>
|
한강 | ||
|
금강산 |
백두산 | |
|
서울 |
합천 | |
16.<FRAME SET> 태그
<FRAMESET COLS=”20%,*” FRAMEBORDER=0 >
<FRAME SRC=”TOP.HTML” NAME=”TOP”>
<FRAMESET LOWS=”20%,*” FRAMEBORDER=0 BORDER=0 >
<FRAME SRC=”LEFTMENU.HTML” NAME=”LEFTMENU”>
<FRAME SRC=”RIGHT.HTML” NAME=”CONTENT”>
</FRAMESET>
</FRAMESET>
17 .<IFRAME>태그 – 문서안에 또 다른 웹 문서를 삽입
|
속성 |
설명 |
속성값 |
|
SRC |
프레임안에 나타날 파일 |
파일경로,url |
|
FRAMEBORDER |
프레임테두리 표시결정 |
0(테두리없음),숫자 |
|
BORDERCOLOR |
프레임테두리 색상 |
색상이름,색상코드 |
|
NAME |
프레임 이름 |
영문자 |
|
SCROLLING |
스크롤바 표시 |
yes,no,auto |
|
ALIGN |
문서안에 프레임의 정렬 |
left,right,center |
[ 예제 ]
<iframe src=”content.html” width=400 height=300 align=center
scrolling=yes frameborder=0></iframe>
18. <FORM> 태그
① 기본 형식
<FORM METHOD=”속성값” ACTION=”처리할 프로그램”>
…….
</FROM>
|
속성 |
설명 |
속성값 |
|
METHOD |
전송방법 |
GET,POST |
|
NAME |
폼의 이름 |
|
|
ACTION |
처리할 프로그램 |
경로 |
② <INPUT TYPE=”속성”> 태그 – 폼안의 다양한 요소 삽입
|
TYPE |
설명 |
|
text |
텍스트를 입력할 필드 삽입 |
|
passwd |
비밀번호 입력할 패스워드 필드삽입 |
|
hidden |
히든 필드 삽입 |
|
radio |
라디오 버튼 삽입 |
|
checkbox |
체크박스를 삽입 |
|
submit |
등록버튼을 삽입 |
|
reset |
리셋버튼 삽입 |
|
button |
버튼을 삽입 |
|
file |
파일검색 버튼 삽입 |
③ <TEXTAREA>태그 – 여러줄의 텍스트를 입력할 수 있는 텍스트 영역을 삽입
|
속성 |
설명 |
|
NAME |
텍스트 영역필드의 이름 |
|
COLS |
텍스트 영역의 가로너비 |
|
ROWS |
텍스트 영역의 세로길이 |
[ 예제 ]
<textarea name=”content” cols=”300’ rows=”200”>
……….
</textarea>
④ <SELECT>태그 </SELECT> – 선택목록을 만든다
|
속성 |
설명 |
|
NAME |
선택목록의 이름 |
|
SIZE |
선택목록의 크기지정 |
|
MULTIPLE |
여러개의 항목 선택 |
|
속성 |
설명 |
|
VALUE |
각 항목을 선택했을 때 넘겨질 값 |
|
SELECTED |
초기 항목 지정 |
[ 예제 ]
<FORM name=”myForm” method=”post” action=”userinfo.php”>
<input type=”hidden” name=”email” value=”tom@hanmail.net”>
아이디:<input type=”text” name=”id” size=20 maxlength=12>
암 호:<input type=”password” name=”passwd” size=20 maxlength=12>
성 별:<input type=”radio” name=”sex” value=”man” checked>남
<input type=”radio” name=”sex” value=”woman”>여
직 업: <input type=”checkbox” name=”student” value=”student” checked > 학생
<input type=”checkbox” name=”salaryman” value=”salaryman” checked > 회사원
내 용:<textarea name=”content” cols=”400” rows=”300></textare>
취 미 :<select name=”hobby” size=40>
<option value=”잠자기” selected>잠자기</option>
<option value=”여행” >잠자기</option>
</select>
파일첨부:< input type=”file” name=”infofile” size=20>
<input type=”reset” value=”새로쓰기”><input type=”submit” value=”전송”>
</FORM>
'▶─공부자료─◀ > •― 태그공부방 →' 카테고리의 다른 글
| Table의 활용 (0) | 2008.10.29 |
|---|---|
| Table의 구도 (소스포함) (0) | 2008.10.29 |
| 테그 용어 풀이 (0) | 2008.09.25 |
| [스크랩] 그림위에 글씨 움직이는 태그 기초(초보자용) (0) | 2008.09.11 |
| 배경그림 위에 움직이는 글 올리는 소스와 용어설명 (0) | 2008.09.11 |