웹페이지 작성-팁
lect_webtip Description
[1] 마우스오버에서 링크의 밑줄색깔만 바꾸기 [Preview]
<style type='text/css'>
A:link {color:#000000;text-decoration:none;}
A:visited {color:#000000;text-decoration:none;}
A:active {color:#000000;text-decoration:none;}
A:hover {color:orange;text-decoration:underline;}
.under {color:#000000;}
</style>



 <p>매우 간단하게 링크의 밑줄색만 바꾸는 방법을 알아보겠습니다</p>
<p>일반적인 링크에서 hover에 underline을 설정해주면</p>
< .....
[2] 플래시 배경을 투명하게하여 화면에 띄우는 방법 [Preview]
<br>
<p>플래시의 배경 투명화에 대하여 알아보겠습니다</p>
<p>일단 아래의 무비를 감상하도록 하죠</p>
<p><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0" width="350" height="262">
<param name="movie" value="http://happyscript.com/mew/lecture/flash/xiao5.swf">
<param name="play" value="true">
<param na .....
[3] 마우스대면 링크에 생기는 밑줄을 점선으로 바꾸기 [Preview]
<style>
A.1:link {color:#3399ff; line-height:17px;background-repeat:repeat-x;text-decoration: none;}
A.1:visited {color:#3399ff;line-height:17px;background-repeat:repeat-x;text-decoration: none;}
A.1:active {color:#3399ff;line-height:17px;background-repeat:repeat-x;text-decoration: none;}
A.1:hover {color:#ff6666; line-height:17px;background-image : url(http://happyscript.com/ .....
[4] 배경음악파일의 용량 줄이기 [Preview]
<body style="font-family:Verdana; font-size:9pt;">
<p> </p>
<p>배경음악파일의 용량을 줄여보도록하겠습니다</p>
<p>여기서는 <b>Windows Media tool</b>을 사용하였습니다 </p>
<p>프로그램은 프리웨어이며 사용자자료실에 가면 있습니다</p>
<p>asf파일을 만들어보도록 하겟습니다 <font color="green"><u>asf는 스트리밍이
가능</u></font>하다는 아주 큰 장점이 있습니다</p>
<p>스트리밍이란 파일을 재생하면서 뒷부분을 로딩해서 빠른 이용이 가능하다는 것입니다</p>
<p>음 .....
[5] 텍스트 에어리어 이쁘게 꾸미기 [Preview]
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="font-family:Verdana; font-size:9pt;">
<p> </p>
<p>텍스트 에어리어(text area)를 완전 마스터해볼까요?</p>
<p>일단 쉬운거 부터...</p>
<form name="form1">
<p><textarea name="1" rows="4" cols="24" style="font-size:9pt; text-align:right; border-color:white; border-style:groove;scrollbar-face-color: .....
[6] 이미지 옆에 글자 정렬하기 - 다양하게 [Preview]
<body style="font-family:Verdana; font-size:9pt;">
<p> </p>
<p>이미지 옆에 글자정렬하는 것을 알아보겠습니다</p>
<p>기본적으로 이미지를 넣고 그 옆에 글자를 넣게 되면 아래로 정렬이 됩니다</p>
<p>상황에 따라서는 바꿔야 할 필요가 있습니다. 그래서 여러 가지 정렬방식을 알아두는
것도 필요합니다</p>
<p><img src="http://happyscript.com/mew/lecture/align/align.gif" width="77" height="111" border="0">아무것도
사용하지 않은 기본 정렬입니다 이미지 아래와 똑같은 위치에 놓이게 .....
[7] 점선이 움직이는 점테이블 [Preview]
<br> <table border="0" cellpadding="1" cellspacing="0" width="170" height="150" background="http://happyscript.com/mew/lecture/table/anidot.gif">
<tr>
<td width="100%">
<table border="0" cellspacing="0" width="100%" height="100%" bgcolor="white" cellpadding="3">
<tr>
<td width="100%" height="100%"> < .....
[8] 이미지를 이용하여 점테이블 만들기 [Preview]
<br><table border="0" cellpadding="1" cellspacing="0" width="200" height="150" background="http://happyscript.com/mew/lecture/table/dot.gif">
<tr>
<td width="100%">
<table border="0" cellspacing="0" width="100%" height="100%" bgcolor="white" cellpadding="3">
<tr>
<td width="100%" height="100%">
.....
[9] 간단하게 스타일시트를 이용해서 점선프레임만들기 [Preview]
<body bgcolor="white" style="font-size:9pt;">

<p><font face="Verdana">이제껏 만들어본 프레임은 모두 이미지를 사용하였습니다</font></p>
<p><font face="Verdana">이미지 크기가 별로 크지 않아서 로딩하는데 시간을 잡아먹는다거나 하는 문제점은
업었지만</font></p>
<p><font face="Verdana">그래픽툴이 없는 분이나 초보자들에게는 결코 만만치 않은 작업이겠죠</font></p>
<p><font face="Verdana">그래서 이미지를 사용하지 않고도 점선 프레임을 만들 수 있는 방법을 배워보도록
하겠습니 .....
[10] 이미지를 이용해서 점선프레임 만들기 [Preview]
<body bgcolor="white" style="font-size:9pt;">

<p><font face="Verdana"> </font></p>
<p><font face="Verdana">이미지를 이용해서 점선 프레임을 만들어 보도록 하겠습니다</font></p>
<p><font face="Verdana">만드는법은 한가닥선으로 프레임을 만드는 방법과 동일합니다</font></p>
<p><b><a href="http://happyscript.com/mew/lecture/frame/dot/dot.htm" target="_blank" onfocus='this.blur()'><font color="#33 .....
[11] 프레임 경계선을 가늘은선으로 깔끔하게 만들기 [Preview]
<body style="font-size:9pt;" bgcolor="white">
<p><font face="Verdana">깔끔한 선의 프레임을 만들어
보도록 하겠습니다</font></p>
<p><a href="http://happyscript.com/mew/lecture/frame/line/line.htm" target="_blank" onfocus='this.blur()'><b><font face="Verdana" color="#3399FF">미리보러가기</font></b></a></p>
<p><font face="Verdana">현재 인터넷을 하는 사람의
절반 이상은 MS사의 '인터넷 익스플로러'라는 웹 브라 .....
[12] input버튼에 이미지 넣기 [Preview]
<p> </p>
<form name="form1">
<table width="341"><tr><td width="166">
<p><input type="button" name=" input " value=" input "></td><td width="166">
<input type="image" src="http://happyscript.com/mew/lecture/input/band.gif" border="0"></td></tr> </table> </form>
<p> 일반 버튼과 이미지를 이용한 버튼입니다</p>
<p>이미지를 이용한 input버튼은 </p> .....
[13] 페이지에 왼쪽,위쪽 여백 없애기 [Preview]
<p><img src="http://happyscript.com/mew/lecture/margin/margin1.png" width="118" height="48" border="0">
                   <img src="http://happyscript.com/mew/lecture/margin/margin2.png" width="91" height="47" border="0"></p>
<p>페이지의 왼쪽과 위쪽 여백을 없애보도록 합시다~!</p>
<p>무슨말인지 잘 이해가 안 .....
[14] 상태바에 표시되는 링크주소 감추기 [Preview]
<body link="black" vlink="black" alink="black">
<p>상태바에 표시되는 링크주소를 감추어 보도록 하겠습니다</p>
<p><a href="#" onfocus='this.blur()'><font face="Verdana"><b><span style="font-size:8pt;">happyscript.com</span></b></font></a><font face="Verdana"><b><span style="font-size:8pt;">               <a href="# .....
[15] 카운터에 생기는 테두리 지우기 [Preview]
<p> </p>
<p><img src="http://happyscript.com/mew/lecture/counter/count1.png" width="56" height="29" border="0">
             <img src="http://happyscript.com/mew/lecture/counter/count2.png" width="38" height="11" border="0"></p>
<p>카운터를 설치하면 이상한 테두리가 카운터를 감싸고 있습니다</p>
<p>모든 것이 다 그러한 것만은 아니지만< .....
[16] 풀다운 메뉴 이쁘게 바꾸기 [Preview]
<p> </p>
<p> CSS를 이용하여 풀다운 메뉴를 꾸며보도록 하겠습니다</p>
<p>풀다운은 누르면 아래로 펼쳐지는 형태를 가진것입니다</p>
<p>다른말로는 펼침목록 메뉴, 또는 드롭다운 메뉴라고도 합니다</p>
<p>먼저 예제를 보고 시작하도록 하겠습니다</p>
<form name="form1">
<p><select name="1" size="1">
<option selected>Pull</option>
<option>해피</option>
<option>스크립트</option>
</select>   .....
[17] 윈도우크기에 상관없이 항상 가운데 화면만을 보여주기 [Preview]
<p> </p>
<p><font color="green"><u>웹 페이지에 방문하는 사용자마다 각자의 환경이 다릅니다</u></font></p>
<p>예를 들면 꽉 채운 화면에 맞게 페이지를 제작했는데</p>
<p>방문자의 윈도우 크기가 작거나...혹은 클 때가 있죠</p>
<p><font color="red">윈도우의 크기가 클 때</font>는 큰 문제가 되지 않습니다</p>
<p>단지 제작자의 의도와는 조금 다를 뿐, <font color="red">화면은 모두 보여지게
됩니다</font></p>
<p><font color="green">하지만 윈도우의 크기가 작을 .....
[18] 애물단지... 폰트 이쁘게 사용하기 [Preview]
<br>
<p><font color="green"><u>웹 페이지 중에서 가장 많은 구성요소를 차지하고 있는
것은 폰트일것입니다</u></font></p>
<p>이미지만으로 구성되거나 플래시로 구성된 홈페이지가 있긴 하지만</p>
<p>그 이미지안에도 폰트가 들어가 있고 플래시홈페이지에도 텍스트를 넣어 제작한
플래시가 사용될 것입니다</p>
<p>하지만 이미지의 크기가 크기 때문에 이미지만으로 만드는 것은 로딩속도가 너무
길어지게 됩니다</p>
<p>그렇게 되면 기다리다가 지친 방문자들은 떠나 버리게  되죠</p>
<p>일반적으로 가장 많이 제작되고 있는 홈페이지의 형태는 .....
[19] 익스플로러 주소창에 이쁜 아이콘 넣기 [Preview]
<br>
<p><img src="http://happyscript.com/mew/lecture/addbar/addbar1.jpg" width="214" height="28" border="0"></p>
<p><img src="http://happyscript.com/mew/lecture/addbar/addbar2.jpg" width="214" height="28" border="0">
       <font color="#FF9900">주소창에 아이콘을
넣었을 때 </font></p>
<p><img src="http://happyscript.com/mew/lecture .....
[20] 마우스 오른쪽 메뉴 막기 + 드래그 못하게 하기 - 아주 깔끔하게 [Preview]
<table border="0">
<tr>
<td width="964" oncontextmenu="return false" onselectstart="return false" style="cursor:default" >
<p>이 문장을 드래그 해보세요.. 만약 성공한다면.. 님도 강의하세요..^^; (참고로
Mew는 할 수 있답니다.. 알고보면 무지 쉬워요!)</p>
<p>소스는 엄청 간단하답니다</p>
<p> </p>
</td>
</tr>
<tr>
.....
    [1] [2]    
Javascript Source List :