HTML 소스
◈ HTML 태그 ◈ =======================================================
HTML 이란 Hyper Text Markup Language의 약자로 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 언어이다.
웹 브라우저에서 해석이 가능한 사용하기 쉬운 언어로 홈페이지 제작에 사용된다.
HTML 문서는 각각의 명령어 tag 로 이루어져 있다. tag 는 시작 <tag> ... 종료 </tag> 로 구성된다.
◈ HTML 태그 연습 ◈ =======================================================
1. 윈도우 메모장을 연다
2. 메모장에 아래내용을 복사한 후 tag.HTML 로 저장한다
<HTML>
<HEAD>
</HEAD>
<BODY>
HTML 문서 글자
</BODY>
</HTML>
3. 윈도우 탐색기를 연다
4. 탐색기에서 tag.HTML 를 클릭 실행한다
5. 메모장에 아래내용을 복사한 후 tag.HTML 로 저장한다
<HTML>
<HEAD>
</HEAD>
<BODY>
<h1>HTML 문서 글자</h1>
</BODY>
</HTML>
6. 탐색기에서 tag.HTML 를 클릭 실행한다
7. 메모장에 아래내용을 복사한 후 tag.HTML 로 저장한다
<HTML>
<HEAD>
</HEAD>
<BODY>
<FONT size="5" color="blue" FONT face="궁서체" > HTML 문서 글자</FONT>
</BODY>
</HTML>
8. 탐색기에서 tag.HTML 를 클릭 실행한다
◈ HTML 태그의 기본구조 ◈ ===========================================
<HTML> 문서의시작
<HEAD> 기본설정시작
</HEAD> 기본설정끝
<BODY> 내용시작
</BODY> 내용끝
</HTML> 문서의끝
<!-- 와 --> 사이의 태그는 실행 되지 않고 설명문으로 사용한다
◈ HTML 태그 ◈ =======================================================
<HTML>
<HEAD>
=======================================================
<META HTTP-EQUIV="imagetoolbar" CONTENT="no"> <!-- 이미지 툴바 no -->
<META HTTP-EQUIV='Content-Type' content='text/html; charset=euc-kr'> <!-- 글자깨짐 no-->
<META HTTP-EQUIV="Keyword" CONTENT="html"> <!-- 검색 키워드 -->
<META HTTP-EQUIV="refresh" content="10" url="주소"> <!-- 10초후에 주소를 자동으로 새로고침 -->
<BASE HREF="http://getdisplay"> <!-- 기본 주소 설정 -->
=======================================================
<Title> 제목 </Title>
=======================================================
글자 지정 - 간격 , 크기, 폰트, 색,
연결된 글자색, 클릭된 글자색, 클릭한 글자색, 마우스 오버 글자색
<style type="text/css">
body {margin-top:30; margin-left:30;}
TABLE {FONT-size:15pt; FONT-family:arial; color:black;}
A:link {color: midnightblue; text-decoration: none}
A:visited {color: peru; text-decoration: none}
A:active {color: skyblue; text-decoration: none}
A:hover {color: hotpink; text-decoration: underline overline}
A:hover {color:midnightblue; text-decoration: none; background:white; }
</style>
=======================================================
커서모양 지정
auto 자동 default 기본 hand 손 help 물음표 move +화살표 wait 대기
e-resize ↔ n-resize ↕ ne-resize ↗ nw-resize ↖ crosshair +
<style type="text/css">
A{cursor:hand;}
A{cursor:crosshair;}
</style>
=======================================================
배경화면 지정
body { 배경색 , 배경그림
그림반복(repeat,no-repeat,repeat-x,repeat-y),
그림위치(50px 50px, left, center, right, top, bottom)
그림고정(fixed,no-fixed) }
<style type="text/css">
body { background-color: #FFFFFF;
background-image: url(../icon/river.jpg);
background-repeat: no-repeat;
background-position: right;
background-attachment: fixed; }
</style>
=======================================================
부분 배경화면 지정
<DIV class="part" style="position:absolute; left:50px; top:70px;
FONT-size:25pt; color:black; "> 부분 배경 화면 </DIV>
.part {부분 배경색, 부분 배경그림, 넓이, 높이, 글자x위치, 글자y위치}
<style type="text/css">
.part { background-color: #009900;
background-image: url(../icon/river.jpg);
width: 400px;
height: 500px;
padding-left: 50px;
padding-top: 80px;
}
</style>
=======================================================
투명 스크롤
<style type="text/css">
body {
scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #FF99FF;
scrollbar-highlight-color: #FF99FF; scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF; scrollbar-TRack-color: #FFFFFF;
scrollbar-arrow-color: #FF99FF }
</style>
=======================================================
히든 스크롤
<style type="text/css">
body {width:100%;overflow-x:hidden;overflow-y:hidden;}
</style>
=======================================================
시작과 동시에 뜨는 새창 (현화면 앞으로)
<script language=" xxxxxxxxxxJavascript ">
window.open("파일1","WIN1","width=400,height=500 ,left=10, top=10")
win=window.open("파일2","WIN2","width=1013,height=714, left=1, top=1 " +
"toolbar=0, location=0, directories=0, status=0," +
"menubar=0, scrollbars=1, resizable=1 ")
win.focus();
</script>
=======================================================
시작과 동시에 뜨는 새창 (현화면 뒤로)
<script>
myWin=window.open("파일","new","width=400,height=200,top=10,left=10")
myWin.blur();
window.focus();
</script>
=======================================================
</HEAD>
<BODY Background=http://img.yahoo.co.kr/blank.gif 배경그림
BGPROPERTIES="fixed" 배경그림 고정
Bgcolor=blue 배경색깔
text=black 기본 글자색
link=teal 연결된 글자색
vlink=peru 클릭된 글자색
alink=skyblue 클릭한 글자색
Scroll="yes" 기본 스크롤
Scroll="no" 히든 스크롤
style="width:100%; " 풀 화면
style="overflow-x:hidden; overflow-y:hidden; " 히든 스크롤
style="cursor:hand; " 마우스 커서 손 모양
style="cursor:crosshair; " 마우스 커서 십자 모양
[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-oncontextmenu="return false" 오른쪽 마우스 사용금지
[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-ondragstart="return false" [안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonselectstart="return false" 마우스 드래그 사용금지
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonkeydown = "return false" 키보드 사용금지
leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 > 간격
<A href="view-source:http://getdisplay"> HTML 소스보기 </A>
<EMBED src=http://img.yahoo.co.kr/blank.gif HIDDEN> </EMBED> 배경음악
< : < 표시
> : > 표시
" : " 표시
& : & 표시
: 공백(space) 표시
<BR> 줄바꿈
<NOBR> 줄바꿈 방지
<P> 문단바꿈
(1 column) 문단연결
<HR width="500" size="1"> 가로줄
<HR width="1" size="200"> 세로줄
<HR width="500" size="50" > 네모
<HR width="500" size="50" color="blue"> 네모
<HR width="500" size="50" color="blue" Align="left,Right,Center"> 네모 정렬
<H1> 큰문자1 </H1>
<H4> 작은문자4 </H4>
<H7> 작은문자7 </H7>
<B> 진한문자 </B>
<U> 밑줄 </U>
H<SUB>2</SUB>O 아래첨자
X<SUP>2</SUP>+Y<SUP>2</SUP>=Z<SUP>2</SUP> 윗첨자
<FONT size="5" color="blue" FONT face="궁서체,arial" > 글자크기, 색상, 모양 </FONT>
<MARQUEE> 왼쪽으로 움직이는 글자 </MARQUEE>
<MARQUEE direction=RIGHT> 오른쪽으로 움직이는 글자 </MARQUEE>
<MARQUEE behavior=ALTERNATE > 왔다 갔다 움직이는 글자 </MARQUEE>
<MARQUEE direction=LEFT,RIGHT,UP,DOWN behavior=SCROLL,SLIDE,ALTERNATE
scrolldelay=80 scrollamount=2 loop=INFINITE,10
bgcolor=blue width=500 height=70> 글자 마퀴 </MARQUEE>
<EMBED src=http://img.yahoo.co.kr/blank.gif width="300" height="300" border="1" hidden="TRue,false"
Vspace="10" Hspace="10" autostart="TRue,false" loop="1,2,3,TRue,false"
VOLUME="-100%"></EMBED> 음악
<EMBED src=http://img.yahoo.co.kr/blank.gif width="300" height="300" ></EMBED> 동영상
<EMBED src=http://img.yahoo.co.kr/blank.gif width="300" height="300" type=application/x-shockwave-flash> 플래쉬
<A href="aaa.mp3"> 음악 링크 </A>
<A href="aaa.mpg"> 동영상 링크 </A>
<A href="aaa.jpg"> 그림 링크 </A>
<A href="aaa.html"> 파일 링크 </A>
<A href=http://getdisplay> 주소 링크 </A>
<A href=mailto:getdisplay@> 메일 링크 </A>
<A href="aaa.jpg"> 새창으로 띄우기 </A>
<A href="aaa.jpg" target="_self"> 현재의 화면에 띄우기 </A>
<A href="aaa.jpg" target="_parent"> 현재의 화면에 띄우기 (프레임 창) </A>
<A href="#text">이동</A> <A name="text">이동될 부분</A> 동일문서내에서의 이동하는 방법
<A href="aaa.jpg" target="nnn"> i프레임창에 그림 띄우기 </A>
<IFRAME name="nnn" src=http://img.yahoo.co.kr/blank.gif " width="400" height="300" scrolling="auto" align="left"
marginwidth=0 marginheight=0 hspace=-2 vspace=-2> </IFRAME>
<A style="FONT-size:11pt; color:black; cursor:hand; "
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonclick="window.open('aaa.html') ">
글자를 클릭하면 새창으로 파일 띄우기 </A>
<A [안내]태그제한으로등록되지않습니다-xxon_mouseover="window.open('aaa.html','win2','width=700,height=500,left=10,top=10'); ">
글자에 마우스를 대면 새창으로 파일 띄우기 </A>
<A href=" xxxxxxxxxxjavascript :iii(' ');" >
글자에 마우스를 클릭하면 자바스크립트 실행 하기 (target="_blank" 사용하면안됨) </A>
<A href=" xxxxxxxxxxjavascript :history.forward()"> 앞으로 </A>
<A href=" xxxxxxxxxxjavascript :history.back()"> 뒤로 </A>
<A href=" xxxxxxxxxxjavascript :history.go(-1)"> 뒤로 </A>
<A href=" xxxxxxxxxxjavascript :window.location!!!.reload()"> 새로고침 </A>
<A href=" xxxxxxxxxxjavascript :parent.self.location!!!.reload()"> 새로고침 </A>
<A href=" xxxxxxxxxxjavascript :window.external.AddFavorite(location.href,document.title); " >
현재 페이지를 즐겨찾기에 추가 </A>
<A href="#" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonClick="this.style.behavior='url(#default#homepage)';
this.setHomePage(location.href); return false; " >
현재 페이지를 시작페이지로 설정 </A>
<A href="aaa.jpg" title="문자 풍선 도움말(줄바꿈은 코드)"> 풍선 </A>
<A [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonclick="alert!!('알림')" > 글자에 마우스를 클릭 하면 윈도우 알림창 띄우기 </A>
<A [안내]태그제한으로등록되지않습니다-xxon_mouseOver="this.style.color='red'" [안내]태그제한으로등록되지않습니다-xxon_mouseOut="this.style.color='black'"
href="test.html" target="_blank" title="문자 풍선 도움말" > 마우스오버 글자색 바꾸기 </A>
<A [안내]태그제한으로등록되지않습니다-xxon_mouseOver="this.style.background='AQUA'" [안내]태그제한으로등록되지않습니다-xxon_mouseOut="this.style.background='white'"
href="test.html" target="_blank" title="문자 풍선 도움말" > 마우스오버 배경색 바꾸기 </A>
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" WIDTH=100 HEIGHT=55 BORDER=1 style="border-color=teal;"
MARGIN=5 ALT="洹몃┝ ??? ???留?> 그림 넣기
<IMG src="http://getdisplay.com.ne.kr/aaa/그림1" WIDTH="200" HEIGHT="100" [안내]태그제한으로등록되지않습니다-xxon_mouseOver='this.src="洹몃┝2"'
[안내]태그제한으로등록되지않습니다-xxon_mouseOut='this.src="洹몃┝1" '>
그림에 마우스를 대면 다른그림 보이기
<IMG src="http://getdisplay.com.ne.kr/aaa/test.jpg" width=100 height=50 border=0 align="absmiddle"
[안내]태그제한으로등록되지않습니다-xxon_mouseOver='this.style.filter="fliph()" ' [안내]태그제한으로등록되지않습니다-xxon_mouseOut='this.style.filter="flip()" ' >
그림에 마우스를 대면 좌우 바꾸기
<IMG src="http://getdisplay.com.ne.kr/aaa/test.jpg" width=100 height=50 border=0 align="absmiddle"
[안내]태그제한으로등록되지않습니다-xxon_mouseOver='this.style.filter="flipv()" ' [안내]태그제한으로등록되지않습니다-xxon_mouseOut='this.style.filter="flip()" ' >
그림에 마우스를 대면 상하 바꾸기
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" style="filter:alpha(style=2, opacity=100, finishopacity=0)">
원형으로 그림 투명하게
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" style="filter:alpha(style=3, opacity=100, finishopacity=0)">
사각형으로 그림 투명하게
style=1 직선, 2 원형, 3 사각형 opacity=0~100 finishopacity=0~100 투명도
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" style="filter:blur(direction=50, sTRength=20)">
그림에 그림자 넣기 direction 0~360 방향 각도 sTRength 0~100 그림자 길이
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" style="filter:fliph()"> 그림 좌우 회전
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" style="filter:flipv()"> 그림 상하 회전
<IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg " style="filter:wave(freq=5, sTRength=10, lightsTRength=20, phase=30, add=0)">
그림을 물결 모양으로 만들기
freq= 웨이브 갯수 sTRength=1~100 웨이브 깊이
lightsTRength=0~100 빛의 밝기 phase=0~100 웨이브 효과의 시작위치
<DIV style="position:absolute; left:340px; top:238px;
FONT-size:9pt; color:black; cursor:hand; "
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonclick="window.open('aaa.html')" > 새창 띄우기 </DIV>
<DIV style="position:absolute; left:5px; top:5px; width:110; height:110;
background:blue; cursor:hand; filter:alpha(style=2, opacity=0, finishopacity=50) "
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonclick="aaaaa()" > </DIV> 지정 영역 클릭시 자바 실행하기
<DIV style="position:absolute; left:5px; top:5px; width:110; height:110;
background:blue; cursor:hand; filter:alpha(style=2, opacity=0, finishopacity=50) "
[안내]태그제한으로등록되지않습니다-xxon_mouseOver="aaaaa()" > </DIV> 지정 영역 마우스 오버시 자바 실행하기
<DIV style="width:100; height:18; FONT-size:18pt; color:blue; cursor:hand;
filter:blur(add=1,direction=135,sTRength=5)"> 글자에 그림자 넣기 </DIV>
<DIV style="width:100; height:25; FONT-size:15pt; color:blue; cursor:hand;
filter:flipv()" > 글자 상하 회전 </DIV>
<DIV style="width:100; height:30; FONT-size:20pt; color:yellow; cursor:hand;
filter:glow(color=green, sTRength=7)"> 글자에 색깔 번지기 </DIV>
<DIV style="width:100; height:30; FONT-size:20pt; color:red; cursor:hand;
filter:mask(color=blue)"> 글자바탕에 색깔 채우기 </DIV>
<IFRAME src=http://img.yahoo.co.kr/blank.gif width="가로" height="세로" align="정렬" scrolling="auto,yes,no"
frameborder="yes,no" name="i프레임 이름" marginwidth="가로여백" marginheight="세로여백"
hspace="바탕가로여백" vspace="바탕세로여백"> </IFRAME>
i프레임창 띄우기
<IFRAME src=http://img.yahoo.co.kr/blank.gif width=900 height=500
scrolling=no frameborder=no marginwidth=0 marginheight=0 hspace=-2 vspace=-2> </IFRAME>
i프레임창 띄우기
<IFRAME src=http://img.yahoo.co.kr/blank.gif width="100%" height="100%"
scrolling=no frameborder=no style="filter: Alpha(Opacity=65);"> </IFRAME>
불투명 i프레임
<IMG src="http://getdisplay.com.ne.kr/aaa/4cl03a.jpg" BORDER=0 MARGIN=0 align="middle"> 그림 옆 가운데정렬
<center> <h1> 그림 아래 가운데정렬 </h1> <IMG src="http://getdisplay.com.ne.kr/aaa/aaa.jpg" BORDER=1> </center>
<PRE> 표준 정렬 </PRE>
<plaintext> HTML 태그를 실행 안하고 text 로 출력 </plaintext>
<XMP> HTML 태그를 실행 안하고 text 로 출력 </XMP>
=======================================================
그림을 삽입하고 그 위에 글을 쓰거나 다른 작은 그림을 겹쳐 넣는 레이어(layer) 사용법
<DIV id="layer1" style="position:absolute; left:20px; top:20px; width:100px; height:100px;
z-index:1; border-width:1px; border-style:none;"><IMG src="http://getdisplay.com.ne.kr/aaa/그림.jpg"></DIV>
<DIV id="layer2" style="position:absolute; left:20px; top:20px; width:100px; height:100px;
z-index:1; border-width:1px; border-style:none; FONT-size:20pt; color:navy;
background:none; visibility:visible; "> 여기에 글을 씁니다 </DIV>
=======================================================
DIV 사용법
<DIV id="ddd" style="position:absolute; left:50px; top:50px;
width:300px; height:300px;
FONT-size:20pt; color:navy; background:pink; cursor:hand;
text-decoration: underline;
border-style:solid; border-width:1px; border-color:green;
z-index:1; visibility:visible; "> <br> 글을 씁니다 </DIV>
left:50px; 왼쪽 간격 50
top:50px; 오른쪽 간격 50
width:300px; 넓이 300px
height:300px; 높이 300px
FONT-size:20pt; 글자크기 20pt
FONT-size:20px; 글자크기 20px
color:navy; 글자색깔 navy
background:pink; 바탕색깔 pink
background:none; 바탕색깔 투명
cursor:hand; 커서모양 hand
auto 자동 default 기본 hand 손 help 물음표 move +화살표 wait 대기
e-resize ↔ n-resize ↕ ne-resize ↗ nw-resize ↖ crosshair +
text-decoration: underline; 글자에 밑줄
border-style:dotted; 보더스타일 dotted
none 나타나지 않음 solid 선 모양 dotted 점선 모양
border-width:1px; 보더선넓이 1
border-color:green; 보더색깔 green
z-index:1; 화면우선순위 1
z-index:2; 화면우선순위 2
visibility:visible; 화면보임
visibility:hidden; 화면숨김
=======================================================
표 만들기
<TABLE width=500 height=350
BORDER=1 bordercolor=#9c9cef bordercolorlight=red bordercolordark=blue
bgcolor=red background=http://img.yahoo.co.kr/blank.gif cellspacing=-2 CELLPADDING=3
style="FONT-size:12pt; color:blue; cursor:hand; " >
<TR>
<TD WIDTH="50%"> 가로칸 </TD><TD WIDTH="50%"> 세로칸 </TD>
</TR>
<TR>
<TD> 가로칸 </TD><TD> 세로칸 </TD>
</TR>
</TABLE>
<TABLE BORDER=1 bordercolor=#9c9cef bgcolor=#f7fff7 cellspacing=-2 CELLPADDING=3
style="FONT-size:14px;">
<TR><th WIDTH="25%" >제목 <th WIDTH="25%" >제목
<th WIDTH="25%" >제목 <th WIDTH="25%" >제목
<TR><th>제목 <TD>내용 <TD>내용 <TD align=center>내용
<TR><th>제목 <TD>내용 <TD>내용 <TD align=center>내용
</TABLE>
<TABLE BORDER=1 bordercolor=#9c9cef bgcolor=#f7fff7 cellspacing=1 CELLPADDING=3
style="FONT-size:14px;">
<CAPTION> 테이블 제목 </CAPTION>
<TR><TH ROWSPAN=2><TH COLSPAN=2 WIDTH=100> 가로제목1
<TH ROWSPAN=2 WIDTH=150> 가로<BR>제목2
<TH ROWSPAN=2 WIDTH=180> 가로제목3
<TR><TH> 부제 <TH> 부제
<TR><TH ALIGN=LEFT> 제목 <TD> 내용 <TD> 내용 <TD> 내용 <TD> 내용
<TR><TH ALIGN=LEFT > 제목 <TD> 내용 <TD> 내용 <TD> 내용 <TD> 내용
</TABLE>
=======================================================
네모
<DIV style="position:absolute; left:20px; top:20px;">
<TABLE width=50 height=50 Border=1 bordercolorlight=red bordercolordark=green
bgcolor="blue"> <TR><TD> </TD></TR></TABLE></DIV>
위로 흐린 네모
<DIV style="position:absolute; left:0px; top:750px; width:995px; height:300px;
background:pink; filter:blur(add:0,direction:180,sTRength:300) "> </DIV>
아래로 흐린 네모
<DIV style="position:absolute; left:0px; top:750px; width:995px; height:300px;
background:pink; filter:blur(add:0,direction:0,sTRength:300) "> </DIV>
가로 웨이브 네모
<DIV style="position:absolute; left:20px; top:100px;
filter:wave\(freq=0,sTRength=0,lightsTRength=17,phase=0,add=0\)">
<TABLE width=900 height=50 Border=0 bordercolorlight="blue"
bordercolordark="blue" bgcolor="hotpink">
<TR><TD> </TD></TR></TABLE></DIV>
세로 웨이브 네모
<DIV style="position:absolute; left:20px; top:150px; >
<TABLE border=0 cellspacing=0 CELLPADDING=0 ><TR>
<TD width=15 height=213 Border=1 bordercolor=aqua bgcolor=limegreen
style="filter:alpha\(style:1,opacity=60,finishopacity=45 \) " > </TD>
<TD width=25 height=213 Border=1 bordercolor=aqua bgcolor=limegreen
style="filter:alpha\(style:1,opacity=45,finishopacity=100 \) " > </TD>
</TR></TABLE></DIV>
=======================================================
풀 다운 메뉴
<script>
function SUB1()
{
if(this.NAME1.value != "default")
{
window.open(this.NAME1.value)
}
}
</script>
<select name="NAME1" [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonChange="return SUB1()" size=1
style='width:150px;background-color:#e6e6ff;' >
<option value="default"> 선택 하세요 </option>
<option value = "http://getdisplay"> 주소 </option>
<option value = "aaa.html"> 파일 </option>
<option value = "aaa.jpg"> 그림 </option>
</select>
=======================================================
글자 위에 마우스를 놓으면 잠시 뜨는 새창
<script language=" xxxxxxxxxxJavaScript ">
var popup_window = null;
function popup(status,url) {
if(status != 0) {
if(popup != null) popup.focus();
else {
var popup = open(url, "Popup", "width=400,height=200,left=500,top=10");
popup_window = popup;
}
}
else {
if(popup_window != null) popup_window.close();
}
}
</script>
<a [안내]태그제한으로등록되지않습니다-xxon_mouseover="popup(1,'index.html')" [안내]태그제한으로등록되지않습니다-xxon_mouseout="popup(0)"> 여기에 마우스를 대보세요 </a>
=======================================================
글자 위에 마우스를 놓으면 잠시 뜨는 툴팁(tooltip) // 자바 명령어는 소문자, HTML 은 대문자 사용
<script>
function yestip(text,pxle,pxtop) {
document.all.yestip.innerHTML='<Table Border=1 bordercolor=peru '+
' bgcolor=white cellspacing=12> <Tr><Td bordercolor=white> '+
'<font size=2 color="#005000">' +text+
'</font></Td></Tr></Table>'
document.all.yestip.style.pixelLeft=event.clientX+document.body.scrollLeft+10+pxle
document.all.yestip.style.pixelTop=event.clientY+document.body.scrollTop-20+pxtop
document.all.yestip.style.visibility="visible"
}
function notip() { document.all.yestip.style.visibility="hidden" }
</script>
<DIV id="yestip" style="position:absolute; z-index:1; visibility:hidden;
color:#000000; background-color:#63ffce; font-size:12px;"> </DIV>
<a [안내]태그제한으로등록되지않습니다-xxon_mouseOver="yestip('<BR> 제목 <BR>'+
' 내용 <BR>'+
' 내용 <BR>'+
' 내용 <BR>'+
' ',0,0)" [안내]태그제한으로등록되지않습니다-xxon_mouseOut="notip()"> 마우스를 대면 툴팁(tooltip)창이 </a>
=======================================================
글자 위에 마우스를 놓으면 잠시 뜨는 레이어(layer)
<SCRIPT language= xxxxxxxxxxjavascript >
function showon(what){ what.style.visibility='visible'; }
function hide(what){ what.style.visibility='hidden'; }
</SCRIPT>
<FONT SIZE=2 COLOR=BLACK [안내]태그제한으로등록되지않습니다-xxon_mouseover="showon(DIV111)" [안내]태그제한으로등록되지않습니다-xxon_mouseout="hide(DIV111)">
여기에 마우스를 올리면 레이어(layer)가 나타납니다. 그리고 나가면 사라집니다. </FONT>
<DIV id="DIV111" style="position:absolute; left:350px; top:70px; visibility:hidden;">
<TABLE Border=1 bordercolor=gainsboro bgcolor=ivory cellspacing=0 CELLPADDING=0 >
<TR><TD> 레이어(layer) 레이어(layer) 레이어(layer) </TD></TR></TABLE> </DIV>
=======================================================
글자 위에 마우스를 놓으면 잠시 뜨는 서브 메뉴(menu)
<SCRIPT language= xxxxxxxxxxjavascript >
function showon(what){ what.style.visibility='visible'; }
function hide(what){ what.style.visibility='hidden'; }
</SCRIPT>
<DIV style="position:absolute; left:100px; top:100px;" >
<FONT SIZE=2 [안내]태그제한으로등록되지않습니다-xxon_mouseover="showon(DIV222)" [안내]태그제한으로등록되지않습니다-xxon_mouseout="hide(DIV222)" >
여기에 마우스를 올리면 </FONT></DIV>
<DIV id="DIV222" style="position:absolute; left:100px; top:110px; visibility:hidden;"
[안내]태그제한으로등록되지않습니다-xxon_mouseover="showon(DIV222)" [안내]태그제한으로등록되지않습니다-xxon_mouseout="hide(DIV222)" >
<A href="test.html" target="_blank" >
메뉴가 나타납니다. 여기를 클릭하면 실행하고 나가면 사라집니다. </A></DIV>
=======================================================
클릭하면 사라지는 알림창
<SCRIPT language= xxxxxxxxxxjavascript >
function showon(what){ what.style.visibility='visible'; }
function hide(what){ what.style.visibility='hidden'; }
</SCRIPT>
<DIV id="memo1" style="position:absolute; left:350px; top:200px; visibility:visible;" >
<TABLE width=250 height=200 Border=3 bordercolor="paleturquoise" bgcolor="lightcyan">
<TR align=center> <TD [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonClick='hide(memo1)'>
<FONT SIZE=2 color=midnightblue > ◈ 알림창 ◈ <BR><BR>
여기를 클릭하면 <BR> 알림창이 사라집니다 <BR><BR> getdisplay <BR> </FONT>
</TD> </TR> </TABLE> </DIV>
=======================================================
텍스트 복사하기
<SCRIPT language= xxxxxxxxxxjavascript >
function selectall(s){
var doc = document.body.createTextRange();
doc.moveTo!!!ElementText(document.all(s));
doc.select();
doc.execCommand('copy');
alert!!('소스가 복사되었습니다.');
}
</script>
<a href=" xxxxxxxxxxjavascript :selectall('tttid')"> 텍스트 복사하기 </a> <br><br>
<table id=tttid border=1> <tr>
<td> 테이블의 텍스트1 </td> <td> 테이블의 텍스트2 </td> </tr> </table>
=======================================================
이미지 맵
<MAP name="map1">
<area shape="circle" coords="100,100,30" href=" xxxxxxxxxxjavascript :iii('');">
<area shape="rect" coords="50,200,150,300"
[안내]태그제한으로등록되지않습니다-xxon_mouseover="yestip('메모',0,0)" [안내]태그제한으로등록되지않습니다-xxon_mouseout="notip()">
<area shape="polygon" coords="5,80, 125,90, 60,130, 5,80" href="iii.htm"
target="_blank" alt="메모">
</MAP>
<IMG src="http://getdisplay.com.ne.kr/aaa/iii.jpg" border=0 usemap="#map1" ISMAP>
circle: 원 모양으로 링크 coords 값: x좌표, y좌표, 반지름 길이
rect: 직사각형 모양으로 링크 coords 값: 시작점과 끝점의 좌표
polygon: 다각형 모양. 여러개의 점을 이어서 링크. 좌표를 적을때
시작점과 끝점을 같은 것으로 한다
=======================================================
한글 입력
<INPUT type=text name='input1' size=50 value='' STYLE='ime-mode:active;' >
<INPUT type=text STYLE="background-color:ffffff; FONT-family:굴림; color:red;
border-style:solid; border-width:1pt; border-color:blue" >
=======================================================
텍스트 입력
<FORM name="fname" action="http://" method="post">
<TEXTAREA name="input2" rows=10 cols=100
style="position:absolute; left:1px; top:1px;
width:110px; height:55px; FONT-size:12px; color:navy;
border-style:solid; border-width:1; border-color:blue; visibility:visible;" >
--- 텍스트 첫째 열 초기값 ---
--- 텍스트 둘째 열 초기값 ---
</TEXTAREA>
<INPUT type="submit" value="완료"><INPUT type="reset" value="재설정">
</FORM>
name="txarea" (이름) rows=10 (줄) cols=100 (칸) readonly (읽기전용)
STYLE = (스타일)
position:absolute; left:1px; top:1px; (위치)
width:110px; (넓이)
height:55px; (높이)
FONT-size:12px; (글자크기)
color:navy; (글자색)
border-style:solid; (선 모양)
border-style:dotted; (점선 모양)
border-style:none; (선 없음)
border-width:1; (선 굵기)
border-color:blue; (선 색)
overflow-y:hidden; (스크롤바 숨김)
visibility:hidden; (텍스트 숨김)
<script Language=" xxxxxxxxxxJavascript ">
this.input2.value = "텍스트 초기값";
</script>
=======================================================
한글 입력후 윈도우창 띄우기
<script Language=" xxxxxxxxxxJavascript ">
function enterfunc(val){
if(val==13){ window.open("http://getdisplay.com.ne.kr"); }
}
</script>
<input name="input1" type=text size=30 STYLE="ime-mode:active; color:black; "
value=" 검색창에 getdisplay 를 쳐보세요 " [안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonfocus=this.value=""
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonblur!!!="if(this.value=='') this.value='검색어 입력후 사이트 선택' "
[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xx[안내]태그제한으로등록되지않습니다-xxxxxxxxxxxxxxxxxxxxonKeyPress='return enterfunc(window.event.keyCode)' >
=======================================================
</BODY>
</HTML>
◈ 필터표현 ◈ =======================================================
1 투명도 조절효과 - [alpha]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:alpha(style:0,opacity:30)'>
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:alpha(style:1,opacity:10,finishOpacity:100)'>
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:alpha(style:2,opacity:10,finishOpacity:100)'>
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:alpha(style:3,startx=1,starty=1,finishx=50,
finishy=50,opacity:10,finishOpacity:100)'>
2 흐리게하는 효과 - [ blur ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:blur(add:0,direction:135,sTRength:30)'>
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:blur(add:1,direction:180,sTRength:50)'>
3 상하좌우가 바뀌는 효과 - [ fliph / flipv ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:fliph()'>
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:flipv()'>
4 색상,채도,명도를 반대값으로 나타내는 효과 - [ invert ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:invert()'>
5 지정된색을 투명하게 하는 효과 - [ chroma ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:chroma(color:#000000)'>
6 물결모양 효과 - [ wave ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:wave(freq:3,sTRength:3,lightsTRength:22,phase:0,add:0)'>
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:wave(freq:6,sTRength:80,lightsTRength:66,phase:50,add:1)'>
freq : wave의 갯수.
sTRength : wave의 강도, 그 값은 0~100.
lightsTRength : wave 에서 빛의 강도, 그 값은 0~100.
phase : wave의 시작위치, 그 값은 0~100.
add : 원본색을 그대로 0, 밝게 1
7 x-ray 사진과 같은 효과 - [ xray ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:xray()'>
8 흑백 효과 - [ gray ]
<IMG src=http://img.yahoo.co.kr/blank.gif style='filter:gray()'>
9 지정된 색을 번지게 하는 효과 - [ glow ]
<FONT color='white' style='height:10;filter:glow(color:blue,sTRength:5)'>
<FONT color='white' style='height:10;filter:glow(color:red,sTRength:5)'>
10 뻗는 그림자를 만들어 주는 효과 - [ shadow ]
<FONT color='#FFFFFF' style='height:30;filter:shadow(color:#000000,direction:135)'>