<head> 와 </head>
사이 아무곳에나 넣어주시면 됩니다..


<!-- 글씨체 속성 시작 //-->
<style type="text/css">
<!--
@font-face {font-family:글씨체를 지정할 이름; src:url(글씨체 파일 주소);}
body,td,a,div,p,pre,input,textarea {font-family:글씨체를 지정할 이름; font-size:11;}
-->
</style>
<!-- 글씨체 속성 종료 //-->


이렇게 수정하시고 나서,,
아래의 스타일시트부분도 수정해야합니다<<
글씨체가 적용되있는부분들..
dotum 이나 굴림 등... 의 기본 글씨체들 앞에 글씨체를 지정할 이름 을 넣어주세요<<
티스토리 글씨체 바꾸기 , 티스토리 글씨체 바꾸는 방법
적용방법은
관리자 페이지 => 스킨 => HTML / CSS 편집 => skin.html
이 부분에서 <head> 와 </head> 사이 아무곳에나 넣어주시면 됩니다..
글씨 크기는 마음대로입니다<<
글씨체에 따라서 잘 맞춰주시길...

글씨체 파일은 TTF 파일확장자가 아닌 웹폰트 확장자..
eot 로 올려야 적용됩니다//!!
eot 웹폰트 확장자 글꼴파일을 티스토리에 올리신 후에 절대주소 로 링크시켜줍니다.. ( http:// 주소 )

TTF 확장자에서 eot 확장자로의 파일변환은 좀더 나중에 알려드리겠습니다<<
그때까지의 준비물!!

Microsoft WEFT

파일입니다!!
설치 끝내셨으면,, 덧글 부탁드립니다<<
자세히 설명드리겠습니다<<

'html 태그 배우기' 카테고리의 다른 글

html 특수 인라인태그 <A>  (0) 2008.09.28
html 속성값 형식  (0) 2008.09.28
html 태그연습장  (2) 2008.09.27
html 글씨체 바꾸기  (8) 2008.04.15
html 마우스 커서  (14) 2008.04.11
html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
Posted by 승호/
제 블로그처럼..
홈페이지에서 마우스 커서가 바뀌는 태그 알려드리겠습니다...

관리자 -> 스킨 -> html/css편집 -> skin.html 에 들어가셔서

<head> 뒤에 아무데에나 이 태그를 써넣어주세요...
준비물은 ani 커서파일 확장자입니다...




<!-- 마우스 커서 시작 //-->
<STYLE>body{cursor:url(커서파일.ani); }</STYLE>
<!-- 마우스 커서 종료 //-->




여기서 주소는 상대주소를 써넣는게 아니라 절대주소를 써넣어주셔야합니다... ㄱ-

'html 태그 배우기' 카테고리의 다른 글

html 속성값 형식  (0) 2008.09.28
html 태그연습장  (2) 2008.09.27
html 글씨체 바꾸기  (8) 2008.04.15
html 마우스 커서  (14) 2008.04.11
html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
Posted by 승호/

제목 그대로죠.. ㅎㅎ/
페이지 오른쪽하단의 위 아래 버튼에 마우스가 올라가면 위아래로 스크롤되는 스크립트입니다...
쓸데가 좀 있을듯 하네요 ㅎㅎ///

<HTML>
<HEAD>
<TITLE>버튼위로 마우스 올리면 자동으로 아래, 위로 스크롤되는 스크립트</TITLE>
</HEAD>

<BODY>

<div id="staticbuttons" style="position:absolute;">
<a href="javascript:" onmouseover="myspeed=-thespeed" onmouseout="myspeed=0">▲</a><br>
<a href="javascript:" onmouseover="myspeed=thespeed" onmouseout="myspeed=0">▼</a>
</div>


<script>
var Hoffset=70
var Voffset=80
var thespeed=3 //스크롤속도 1-3

var ieNOTopera=document.all&&navigator.userAgent.indexOf("Opera")==-1
var myspeed=0

var ieHoffset_extra=document.all? 15 : 0
var cross_obj=document.all? document.all.staticbuttons : document.getElementById? document.getElementById("staticbuttons") : document.staticbuttons

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function positionit(){
var dsocleft=document.all? iecompattest().scrollLeft : pageXOffset
var dsoctop=document.all? iecompattest().scrollTop : pageYOffset
var window_width=ieNOTopera? iecompattest().clientWidth+ieHoffset_extra : window.innerWidth+ieHoffset_extra
var window_height=ieNOTopera? iecompattest().clientHeight : window.innerHeight

if (document.all||document.getElementById){
cross_obj.style.left=parseInt(dsocleft)+parseInt(window_width)-Hoffset+"px"
cross_obj.style.top=dsoctop+parseInt(window_height)-Voffset+"px"
}
else if (document.layers){
cross_obj.left=dsocleft+window_width-Hoffset
cross_obj.top=dsoctop+window_height-Voffset
}
}

function scrollwindow(){window.scrollBy(0,myspeed)}

function initializeIT(){
positionit()
if (myspeed!=0){scrollwindow()}
}

if (document.all||document.getElementById||document.layers)
setInterval("initializeIT()",20)

</script>


</BODY>
</HTML>


 

Posted by 승호/

 홈페이지에 적용시켜보면..
그럭저럭 쓸만하네요~^^//
잘 쓰세요~^^

<html>
 <head>
   <title>불꽃놀이를 하는듯한 홈페이지 배경.</title>

<style type="text/css">
body { overflow-x: hidden; }
v\:* { behavior: url(#default#VML); }
</style>


 </head>

<body bgcolor="black">

<script language="JavaScript">

//Customize fireworks colors:
colors = new Array();
colors[0] = new Array('yellow', 'lime');
colors[1] = new Array('silver', 'green')
colors[2] = new Array('silver', 'blue');
colors[3] = new Array('silver', 'purple');
colors[4] = new Array('purple', 'white');
colors[5] = new Array('blue', 'silver');
colors[6] = new Array('red', 'fuchsia');
colors[7] = new Array('yellow', 'red');

maximum = 1000;

vmlobj='';
for(i = 0; i < 12; i++){
vmlobj += '<div id="ster'+i+'" style="position:absolute; left:-50px; top-50px; visibility:hidden; z-index:50;">';
vmlobj += '<v:shape style="width:15px; height:15px;" fillcolor="yellow" coordorigin="0,0" coordsize="200 200">';
vmlobj += '<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,92,121, 42,155, 60,100 x e"/>';
vmlobj += '<v:stroke on="false" /></v:shape></div>';
}
document.write(vmlobj); vmlobj = null;

aantal = 0;

function begin()
{
try {
if(aantal == maximum){ return;}
kleurschema = Math.floor(Math.random() * colors.length);
posLinks = Math.floor(Math.random() * (document.body.clientWidth - 180));
posLinks = (posLinks < 170)? 170: posLinks;
posBoven = Math.floor(Math.random() * (document.body.clientHeight - 180));
posBoven = (posBoven < 170)? 170: posBoven;
straal = 0; uiteen = true; teller = 1; flikkereffect = false;
for(var i = 0; i < 12; i++){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][0]);
document.getElementById('ster'+i).style.visibility = 'hidden'; // 5.0 fix
document.getElementById('ster'+i).style.left = posLinks;
document.getElementById('ster'+i).style.top = posBoven;
}
document.getElementById('ster0').style.top = (document.body.clientHeight - 20);
document.getElementById('ster0').style.visibility = 'visible';
omhoog();
} catch(e){}
}

function omhoog()
{
try {
positie = parseInt(document.getElementById('ster0').style.top);
if(positie > posBoven){
document.getElementById('ster0').style.top = (positie - 25);
setTimeout('omhoog()', 50);
} else {
for(i = 1; i < 12; i++){
document.getElementById('ster'+i).style.top = positie;
document.getElementById('ster'+i).style.visibility = 'visible';
}
uiteenspatten();
}
} catch(e){}
}

function uiteenspatten()
{
try {
if(straal > 120 && straal % 10 == 0){
flikkereffect = true;
teller = (teller == colors[kleurschema].length)? 0: (teller+1);
}
for(var i = 0; i < 12; i++){
var hoek = i * 30;
var piHoek = Math.PI - Math.PI / 180 * hoek;
var links = posLinks + Math.round(straal * Math.sin(piHoek));
var boven = positie + Math.round(straal * Math.cos(piHoek));
document.getElementById('ster'+i).style.left = links;
document.getElementById('ster'+i).style.top = boven;
if(flikkereffect){
document.getElementsByTagName('shape')[i].setAttribute('fillcolor', colors[kleurschema][teller]);
}
}
if(straal < 160 && uiteen){
straal += (straal < 120)? 10: 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal > 120){
uiteen = false; straal -= 5;
setTimeout('uiteenspatten()', 50);
}
else if(straal <= 120){
for(var i = 0; i < 12; i++){
document.getElementById('ster'+i).style.visibility = 'hidden';
}
aantal++;
setTimeout('begin()', 500);
}
} catch(e) {}
}

window.onload=begin;

</script>
<![endif]-->

</body>
</html>


Posted by 승호/

<html>
<head>
<title>웹페이지 열림효과를 주는 스타일시트 입니다.</title>

<style type="text/css">
.header{font-family:verdana,arial,helvetica; font-size:30pt; font-weight:bold; color:#003399; filter:DropShadow(color=#CCCCCC, offX=2, offY=2, positive=1); width:100%}
.content{font-family:verdana,arial,helvetica; font-size:10pt}
.link{font-family:verdana,arial,helvetica; font-size:10pt; color:#003399}
.link:hover{font-family:verdana,arial,helvetica; font-size:10pt; color:#CC0000}
</style>
</head>
<BODY bgcolor="#207400" text="#ffffff" link="#ffffff" scroll="no">


<script language="JavaScript">
<!----
var width=document.body.clientWidth;
var height=document.body.clientHeight;

function doClickText(who,type,step,timeOut) {
document.getElementById(who).style.display="none";
if(type==0) {
 reveal('revealDiv1',step,timeOut,0);
 reveal('revealDiv2',step,timeOut,1);
}
if(type==1) {
reveal('revealDiv1',step,timeOut,2);
reveal('revealDiv2',step,timeOut,3); }
}

//////////////////////
// Reveal! function //
//////////////////////
function reveal(who,step,timeOut,type) {
if(type==0)
 var where="top";
if(type==1)
 var where="bottom";
if(type==2)
 var where="left";
if(type==3)
 var where="right";
eval('var temp=document.getElementById(who).style.'+where);
temp=parseInt(temp);
if(type==0||type==1)
 var checkWith=height/2;
if(type==2||type==3)
 var checkWith=width/2;
if(-temp<checkWith) {
 temp-=step;
 
eval('document.getElementById(who).style.'+where+'=temp;');
 
setTimeout("reveal('"+who+"',"+step+",'"+timeOut+"',"+type+")", timeOut);
}
else {
document.getElementById(who).style.display="none";
document.body.scroll="yes"; }
}


function initReveal(type,div1bg,div2bg,div1bw,div2bw,div1bc,div2bc,step,timeOut,click) {
if(type==0) {
var bWhere1="border-bottom";
var bWhere2="border-top";
var putZero1="top:0px; left:0px";
var putZero2="bottom:0px; left:0px";
 
document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>');
 
document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width)+'; height:'+(height/2)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>');
 
if(!click) {
reveal('revealDiv1',step,timeOut,0);
reveal('revealDiv2',step,timeOut,1);
 }
else {
clickText(type,step,timeOut);
 }
}
if(type==1) {
var bWhere1="border-right";
var bWhere2="border-left";
var putZero1="top:0px; left:0px";
var putZero2="top:0px; right:0px";
 
document.write('<div id="revealDiv1" style="z-index:100; display:block; position:absolute; '+putZero1+'; background:'+div1bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere1+':'+div1bc+' solid '+div1bw+'px"></div>');
 
document.write('<div id="revealDiv2" style="z-index:100; display:block; position:absolute; '+putZero2+'; background:'+div2bg+' ; width:'+(width/2)+'; height:'+(height)+'; '+bWhere2+':'+div2bc+' solid '+div2bw+'px"></div>');
 
if(!click) {
reveal('revealDiv1',step,timeOut,2);
reveal('revealDiv2',step,timeOut,3); }
 else {
clickText(type,step,timeOut);
 }
}
function clickText(type,step,timeOut) {

document.write('<div id="clickText" style="z-index:101; display:block; position:absolute; top:'+(height/2-clickh/2-clickb)+'; left:'+(width/2-clickw/2-clickb)+'"><table style="border:'+clickc+' solid '+clickb+'px; background:'+clickbg+' ;width:'+clickw+'px; height:'+clickh+'; '+clickFont+'; cursor:hand; cursor:pointer" onClick="doClickText(\'clickText\','+type+','+step+','+timeOut+')"><tr><td align="middle">'+clickt+'</td></tr></table></div>');
 }
}
----->
</script>

<script language="JavaScript">
<!----
/*
처음나타나는 화면의 중앙에 나타나는 박스안의 글자설정입니다
*/
var clickw=250;  // 넓이
var clickh=30;  // 높이
var clickb=2;  // 테두리두께
var clickc="#207400"; // 테두리색상
var clickbg="#000000"; // 바탕색상
var clickt="안녕하세요~^^"; // 문자메세지
var clickFont="font-family:휴먼매직체; font-size:18pt; font-weight:bold; color:#FFFFFF";  // 글자의 형태지정


new initReveal(0,'#22aa66','#22aa66',1,1,'#44ff00','#cc0088',5,10,true);  //여기서설정순서를 보면(0또는1,0은상하 1은좌우로열리며 다음의2개는 양측의색상지정, 색상다음두개의숫자는 경계선두께, 다음의 두개는 경계선색상 색상다음숫자는 열리는속도(숫자가크면 빨라짐),다음은 신경안써도 상관없구요
--->
</script>

</body>
</html>



 

Posted by 승호/

홈페이지에 배경이미지를 고정시키는 스타일시트 입니다..
티스토리 블로그에도 배경이미지 고정시킬 수는 있지만,
이 방법은 먹히지 않습니다...//


 
<html>
 <head>
  <title>배경이미지 고정시키는 스타일시트</title>

<style type="text/css">
body {background:#207400 url('이미지 파일 주소') no-repeat fixed center middle}
</style>
 </head>

<body>


</body>
</html>



티스토리 배경이미지 고정태그는 다음에 올리도록 하겠습니다...

Posted by 승호/

익스플로러 창의 가운데로 아래의 특수문자가 빨려들어갑니다.
홈페이지에 쓰이기에는 좀 부적절하면서도..
정신없네요...
컴퓨터가 좀 느리신분들은..
이 스크립트에 좀 무리가 있군요...;;
비추합니다.......

 
<html>
<head>
<title>가운데로 빨려들어가는 글씨</title>

<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

<script language="JavaScript">
if (document.all){
yourLogo="★☆*#&*@§※☆★○☆★⊙";
logoFont='돋움';
logoColor='silver';
yourLogo=yourLogo.split('');
L=yourLogo.length;
H=0;
W=0;
R=0;
E=0;
MY=0;
MX=0;
Wd=0;
Hd=0;
F=new Array();
Y=new Array();
X=new Array();
S=new Array();
A=new Array();
B=new Array();

document.write('<div id="outer" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i=0; i < L; i++)
document.write('<div id="ie" style="position:absolute;top:0;left:0;width:10px;height:10px;'
+'font-family:'+logoFont+';font-size:50px;color:'+logoColor+'">'+yourLogo[i]+'</div>');
document.write('</div></div>');

function Set(){
for (i=0; i < L; i++){
H=window.document.body.offsetHeight;
W=window.document.body.offsetWidth;
A[i]=Math.round(Math.random()*H);
B[i]=Math.round(Math.random()*W);
S[i]=Math.random()*0.07+0.05;
R=Math.round(Math.random()*3);
E=Math.round(Math.random()*2500+50)
if (R == 3) B[i]=-E;
if (R == 2) B[i]=W+E;
if (R == 1) A[i]=-E;
if (R == 0) A[i]=H;
F[i]=W/10;
}
}
Set();

function Assign(){
outer.style.top=document.body.scrollTop;
for (i=0; i < L; i++){
F[i]-=S[i]*55;
if (F[i] < 2) F[i]=1;
ie[i].style.top =Y[i];
ie[i].style.left=X[i];
ie[i].style.fontSize=F[i];
}
}
function fly(){
MY=window.document.body.clientHeight/2;
MX=window.document.body.clientWidth/2;
Wd=Math.round(Math.random()*40+5);
Hd=Math.round(Math.random()*30+5);
for (i=0; i < L; i++)
{
Y[i]=A[i]+=(MY-A[i])*(S[i]);
X[i]=B[i]+=(MX-B[i])*(S[i]);
if ((X[i] > MX-Wd) && (X[i] < MX+Wd) && (Y[i] > MY-Hd) && (Y[i] < MY+Hd)){
H=window.document.body.offsetHeight;
W=window.document.body.offsetWidth;
A[i]=Math.round(Math.random()*H);
B[i]=Math.round(Math.random()*W);
S[i]=Math.random()*0.05+0.05;
R=Math.round(Math.random()*3);
E=Math.round(Math.random()*50+50)
if (R == 3) B[i]=-E;
if (R == 2) B[i]=W+E;
if (R == 1) A[i]=-E;
if (R == 0) A[i]=H+E;
}
if ((X[i] < 0) || (X[i] > W) || (Y[i] < 0) || (Y[i] > H))
F[i]=W/10;
}
Assign();
setTimeout('fly()',20);
}
window.onload=fly;
}

</script>

</head>

<body bgcolor="#000000">

</body>
</html>


수고하셨습니다~<<

Posted by 승호/

글씨가 파도를탑니다...
꽤 쓸만하네요 ㅎㅎ///
눈이 심심하지는 않을거같은스크립트...


<html>
 <head>
   <title>글씨가 파도를 탑니다...</title>


<script>
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;
mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if(message.length > 6){
for(i=0;i !=message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>";
}
jump.innerHTML=txt;txt="";
jump1a();
}
else{ alert("Your message is to short");}
}

function jump1a(){
n0.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50);}
else{jump1b();}
}

function jump1b(){
n0.style.left=-num2;
if(num2 != 0){num2=num2-3;setTimeout("jump1b()",50);}
else{jump2();}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num >-1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>";}
else{
txt=txt+"<span>"+message.charAt(i)+"</span>"}};
jump.innerHTML=txt;txt="";
if(num != (-message.length)){
num--;setTimeout("jump2()",50)};
else{num=0;setTimeout("jump0()",50)};
}
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<center><B><div id="jump" ></div></B></center>

<script>
message="~~~~~~~파도타는거같나요<<???~~~~~~~"
jump0()
</script>

</body>
</html>



수고하셨습니다~^^/

Posted by 승호/

말 그대로 마우스 오른쪽 버튼을 사용하면 메시지 창이 뜨는 스크립트입니다...
별로 추천하지는 않습니다...
이걸 쓰는바에야 아예 오른쪽버튼을 막는 스크립트 추천합니다...

<HTML>
 <HEAD>
   <TITLE> 마우스 오른쪽 버튼사용 메시지 출력 스크립트  </TITLE>

<SCRIPT LANGUAGE="JavaScript1.1">
<!-- Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("마우스 오른쪽 버튼은 사용이 금지되어 있습니다~!!!");
return false;
}
return true;
}

document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
//  End -->
</script>

</HEAD>

<BODY>


</BODY>
</HTML>


Posted by 승호/

이미지 파일 주소 << 여기에는 되도록 가로 14, 세로 14 픽셀 이하의 gif 그림파일을 넣어주세요~<<


<html>
<head>
<title>마우스 따라다니는 그림.</title>
</head>

<body bgcolor="#207400" text="#ffffff" link="#ffffff">

<div id="dot0" style="position: absolute; visibility: hidden; height: 14; width: 14;">
 <img src="이미지 파일 주소" height=14 width=14>
</div>
<div id="dot1" style="position: absolute; height: 14; width: 14;">
 <img src="이미지 파일 주소 height=14 width=14>
</div>
<div id="dot2" style="position: absolute; height: 14; width: 14;">
 <img src="이미지 파일 주소" height=14 width=14>
</div>
<div id="dot3" style="position: absolute; height: 14; width: 14;">
 <img src="이미지 파일 주소" height=14 width=14>
</div>
<div id="dot4" style="position: absolute; height: 14; width: 14;">
 <img src="이미지 파일 주소" height=14 width=14>
</div>
<div id="dot5" style="position: absolute; height: 14; width: 14;">
 <img src="이미지 파일 주소" height=14 width=14>
</div>
<div id="dot6" style="position: absolute; height: 14; width: 14;">
 <img src="이미지 파일 주소" height=14 width=14>
</div>

<script LANGUAGE="JavaScript">

var nDots = 7;
var Xpos = 0;
var Ypos = 0;
var DELTAT = .01;
var SEGLEN = 10;
var SPRINGK = 10;
var MASS = 1;
var XGRAVITY = 0;
var YGRAVITY = 50;
var RESISTANCE = 10;
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 14;
var BOUNCE = 0.75;
var isNetscape = navigator.appName=="Netscape";
var followmouse = true;
var dots = new Array();
init();

function init(){
var i = 0;
for (i = 0; i < nDots; i++) {
dots[i] = new dot(i); }
   
if (!isNetscape) {  }
   
for (i = 0; i < nDots; i++) {
dots[i].obj.left = dots[i].X;
dots[i].obj.top = dots[i].Y; }
if (isNetscape) {
startanimate();
} else {
setTimeout("startanimate()", 1000);}
}
function dot(i) {
this.X = Xpos;
this.Y = Ypos;
this.dx = 0;
this.dy = 0;
if (isNetscape) {
this.obj = eval("document.dot" + i);
} else {
this.obj = eval("dot" + i + ".style");}
}
function startanimate() {
setInterval("animate()", 20); }

function setInitPositions(dots)
{var startloc = document.all.tags("LI");
var i = 0;
for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
dots[i+1].X = startloc[i].offsetLeft
startloc[i].offsetParent.offsetLeft - DOTSIZE;
dots[i+1].Y = startloc[i].offsetTop +
startloc[i].offsetParent.offsetTop + 2*DOTSIZE; }

dots[0].X = dots[1].X;
dots[0].Y = dots[1].Y - SEGLEN;}

function MoveHandler(e)
{ Xpos = e.pageX;
Ypos = e.pageY;  
return true; }

function MoveHandlerIE() {
Xpos = window.event.x + document.body.scrollLeft;
Ypos = window.event.y + document.body.scrollTop;  
}

if (isNetscape) {
document.captureEvents(Event.MOUSEMOVE);
document.onMouseMove = MoveHandler;
} else {
document.onmousemove = MoveHandlerIE;
}


function vec(X, Y)
{ this.X = X;
this.Y = Y; }


function springForce(i, j, spring)
{ var dx = (dots[i].X - dots[j].X);
var dy = (dots[i].Y - dots[j].Y);
var len = Math.sqrt(dx*dx + dy*dy);
if (len > SEGLEN) {
var springF = SPRINGK * (len - SEGLEN);
spring.X += (dx / len) * springF;
spring.Y += (dy / len) * springF; }
}

function animate() {
var start = 0;
if (followmouse) {
dots[0].X = Xpos;
dots[0].Y = Ypos;
start = 1; }
   
for (i = start ; i < nDots; i++ ) {
var spring = new vec(0, 0);
if (i > 0) {
springForce(i-1, i, spring); }
if (i < (nDots - 1)) {
springForce(i+1, i, spring);  }

var resist = new vec(-dots[i].dx * RESISTANCE,
-dots[i].dy * RESISTANCE);
       

var accel = new vec((spring.X + resist.X)/MASS + XGRAVITY,
(spring.Y + resist.Y)/ MASS + YGRAVITY);
       

dots[i].dx += (DELTAT * accel.X);
dots[i].dy += (DELTAT * accel.Y);
       

if (Math.abs(dots[i].dx) < STOPVEL &&
 Math.abs(dots[i].dy) < STOPVEL &&
 Math.abs(accel.X) < STOPACC &&
 Math.abs(accel.Y) < STOPACC) {
 dots[i].dx = 0;
 dots[i].dy = 0; }

dots[i].X += dots[i].dx;
dots[i].Y += dots[i].dy;

var height, width;
if (isNetscape) {
height = window.innerHeight + window.pageYOffset;
width = window.innerWidth + window.pageXOffset;
} else {
height = document.body.clientHeight + document.body.scrollTop;
width = document.body.clientWidth + document.body.scrollLeft; }
       

if (dots[i].Y >=  height - DOTSIZE - 1) {
if (dots[i].dy > 0) {
dots[i].dy = BOUNCE * -dots[i].dy; }
dots[i].Y = height - DOTSIZE - 1; }
if (dots[i].X >= width - DOTSIZE) {
if (dots[i].dx > 0) {
dots[i].dx = BOUNCE * -dots[i].dx; }
dots[i].X = width - DOTSIZE - 1; }
if (dots[i].X < 0) {
if (dots[i].dx < 0) {
dots[i].dx = BOUNCE * -dots[i].dx; }
dots[i].X = 0; }
       
dots[i].obj.left = dots[i].X;  
dots[i].obj.top =  dots[i].Y; }
}

</script>

</body>
</html>


다른것들은 수정하시는거 추천안하고요,,,,
이미지파일만 수정하시면 보기좋게 쓰실수 있습니다<<

Posted by 승호/

저도 오늘 처음으로 적용시켜본 소스죠,,???
티스토리에도 이런게 먹히다니... ㄷㄷ;;;
팝업창소스... 별로 좋은데에 쓰이는소스는 아니죠;; ㅎㅎ;;;


<script language="JavaScript">

<!--
function TripodShowPopup()
{
// open the popup window
var popupURL = "http://my.dreamwiz.com/jihansome/popup.htm"; var popup = window.open(popupURL,"TripodPopup",'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,width=370,height=120');
// set the opener if it's not already set. it's set automatically
// in netscape 3.0+ and ie 3.0+.
if( navigator.appName.substring(0,8) == "Netscape" ) { popup.location = popupURL; }
}
TripodShowPopup();
// -->
</script>


참고해주셨으면 좋겠네요~^^ ㅎㅎ;;;

하지만...
아쉽게도...
블로그에서 쿠키가 만들어지는...
그런 스크립트는 안먹히더군요...

은근히 아쉽....

Posted by 승호/

글씨를 움직이게 해주는 바퀴태그..
저번에 가르쳐드렸는데요....
중복 몇개 있을테지만...
조금 추가해봅니다...<<



<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title>안녕하세요!!</title>
<meta name="generator">
<script language="JavaScript">
</script>
<script language="JavaScript">
</script></head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<P>
<MARQUEE>안녕하세요!!</MARQUEE></P>
<P>
<MARQUEE behavior=alternate>글자가 좌우로 왕복*^^*</MARQUEE></P>
<P>
<MARQUEE direction=left>이건 왼쪽으로◁^^</MARQUEE></P>
<P>
<MARQUEE direction=right>이건 오른쪽으로가연~^^</MARQUEE><BR>
<MARQUEE direction=up>그냥... 위로 올라가요~;;/// </MARQUEE><BR>
<MARQUEE direction=down>제 성적이구요...;;//?(엉;;?) </MARQUEE><BR>
(<MARQUEE behavior=alternate width=30>@^.^@</MARQUEE>  ) </P>
<P>
<MARQUEE scrollAmount=1 direction=right><font face="굴림"><a href="javascript:na_open_window('win', 'http://jihansome.tistory.com/', 0, 0, 300, 200, 0, 0, 0, 0, 0)" target="_self">http://jihansome.tistory.com/</a> 뭐가이리무거워;;;? __@/``</font></MARQUEE></P>
<P>
<MARQUEE scrollAmount=12 direction=right>저는 빠른달팽이에연;; __@/``</MARQUEE><BR>
<MARQUEE scrollAmount=300 width=700><FONT size=7>반짝반짝!!</FONT></MARQUEE></P>
<P>
<MARQUEE bgColor=red><FONT color=#ffffff>마퀴태그~~~</FONT></MARQUEE></P>
<P>
<MARQUEE bgColor=blue><FONT color=#ffffcc>안녕하세요~^^/</FONT></MARQUEE><BR>
<MARQUEE bgColor=#000000><FONT color=#00ff00 size=7>하이~</FONT></MARQUEE></P>

<P>
<MARQUEE direction=up>
안~♡
<UL>
녕~♥
    <UL>
하~♡
        <UL>
세~♥
            <UL>
요~♡
                <UL>
반~♥
                    <UL>
가~♡
                        <UL>
워~♥
                            <UL>
요~♡
                            </UL>
                        </UL>
                    </UL>
                </UL>
            </UL>
        </UL>
    </UL>
</UL>
</MARQUEE><BR>
<MARQUEE><FONT color=red size=5>◀◁◀◁방◀◁◀◁<BR>◁◀◁◀가◁◀◁◀<BR>◀◁◀◁워◀◁◀◁<BR>◁◀◁◀요◁◀◁◀</FONT></MARQUEE></P>
<P>
<MARQUEE direction=up behavior=alternate height=50><FONT color=green size=4>안녕하세요~;// </FONT></MARQUEE></P>
<P>
<MARQUEE behavior=alternate width=210><FONT color=red size=4>반갑습니다';; ㄱ- 반사좀... ㄷㄷ;;</FONT></MARQUEE></P>
<P>
<MARQUEE direction=down height=90><SPAN
style="FILTER: shadow; COLOR: white; HEIGHT: 10px">
<H1>
    <P></P>
    <P>!!</SPAN></P>
</H1>
</MARQUEE>
<MARQUEE direction=up height=90><SPAN
style="FILTER: shadow; COLOR: white; HEIGHT: 10px">
<H1>신기한가욘..???</SPAN></H1></MARQUEE><BR>
<MARQUEE direction=up height=90><SPAN
style="FILTER: shadow; COLOR: white; HEIGHT: 10px">
<H1>신기한가욘..???</SPAN></H1></MARQUEE>
<MARQUEE direction=down height=90><SPAN
style="FILTER: shadow; COLOR: white; HEIGHT: 10px">
<H1>신기한가욘..???</SPAN></H1></MARQUEE></P></body>

</html>






 

안녕하세요!!

글자가 좌우로 왕복*^^*

이건 왼쪽으로◁^^

이건 오른쪽으로가연~^^
그냥... 위로 올라가요~;;///
제 성적이구요...;;//?(엉;;?)
( @^.^@)

http://jihansome.tistory.com/ 뭐가이리무거워;;;? __@/``

저는 빠른달팽이에연;; __@/``
반짝반짝!!

마퀴태그~~~

안녕하세요~^^/
하이~

안~♡
    녕~♥
      하~♡
        세~♥
          요~♡
            반~♥
              가~♡
                워~♥
                  요~♡

◀◁◀◁방◀◁◀◁
◁◀◁◀가◁◀◁◀
◀◁◀◁워◀◁◀◁
◁◀◁◀요◁◀◁◀

안녕하세요~;//

반갑습니다';; ㄱ- 반사좀... ㄷㄷ;;

!!

신기한가욘..???


신기한가욘..???

신기한가욘..???

'html 태그 배우기' 카테고리의 다른 글

html 태그연습장  (2) 2008.09.27
html 글씨체 바꾸기  (8) 2008.04.15
html 마우스 커서  (14) 2008.04.11
html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
Posted by 승호/

<HTML>
 <HEAD>
   <TITLE> 링크에 마우스가 올라가면 링크가 무지개색으로 계속 변하는 스크립트. </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!---//
var rate = 20;  // Increase amount(The degree of the transmutation)
if (document.getElementById)
window.onerror=new Function("return true")

var objActive; 
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 125; // Saturation
var elmV = 255; // Value
var clrOrg;    
var TimerID;  


if (document.all) {
document.onmouseover = doRainbowAnchor;
document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
document.onmouseover = Mozilla_doRainbowAnchor;
document.onmouseout = Mozilla_stopRainbowAnchor;
}

function doRainbow(obj)
{
if (act == 0) {
act = 1;
if (obj)
objActive = obj;
else
objActive = event.srcElement;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
  }
}

function stopRainbow()
{
if (act) {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
  }
}


function doRainbowAnchor()
{
if (act == 0) {
var obj = event.srcElement;
while (obj.tagName != 'A' && obj.tagName != 'BODY') {
obj = obj.parentElement;
if (obj.tagName == 'A' || obj.tagName == 'BODY')
break;
 }

if (obj.tagName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = objActive.style.color;
TimerID = setInterval("ChangeColor()",100);
   }
 }
}

function stopRainbowAnchor()
{
if (act) {
if (objActive.tagName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
    }
  }
}


function Mozilla_doRainbowAnchor(e)
{
if (act == 0) {
obj = e.target;
while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
obj = obj.parentNode;
if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
break;
        }

if (obj.nodeName == 'A' && obj.href != '') {
objActive = obj;
act = 1;
clrOrg = obj.style.color;
TimerID = setInterval("ChangeColor()",100);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
if (act) {
if (objActive.nodeName == 'A') {
objActive.style.color = clrOrg;
clearInterval(TimerID);
act = 0;
        }
    }
}


function ChangeColor()
{  objActive.style.color = makeColor(); }


//  색상제어
function makeColor()
{
if (elmS == 0) {
elmR = elmV;    elmG = elmV;    elmB = elmV;
}
else {
t1 = elmV;
t2 = (255 - elmS) * elmV / 255;
t3 = elmH % 60;
t3 = (t1 - t2) * t3 / 60;

if (elmH < 60) {
elmR = t1;  elmB = t2;  elmG = t2 + t3;
}
else if (elmH < 120) {
elmG = t1;  elmB = t2;  elmR = t1 - t3;
}
else if (elmH < 180) {
elmG = t1;  elmR = t2;  elmB = t2 + t3;
}
else if (elmH < 240) {
elmB = t1;  elmR = t2;  elmG = t1 - t3;
}
else if (elmH < 300) {
elmB = t1;  elmG = t2;  elmR = t2 + t3;
}
else if (elmH < 360) {
elmR = t1;  elmG = t2;  elmB = t1 - t3;
}
else {
elmR = 0;   elmG = 0;   elmB = 0;
}
}
elmR = Math.floor(elmR).toString(16);
elmG = Math.floor(elmG).toString(16);
elmB = Math.floor(elmB).toString(16);
if (elmR.length == 1)    elmR = "0" + elmR;
if (elmG.length == 1)    elmG = "0" + elmG;
if (elmB.length == 1)    elmB = "0" + elmB;

elmH = elmH + rate;
if (elmH >= 360)
elmH = 0;

return '#' + elmR + elmG + elmB;
}
//--->
</script>

</HEAD>

<BODY>

<b>아래의 링크에 마우스를 올리면 링크가 무지개색으로 표시됩니다...</b><p>
<H3> <a href=http://jihansome.tistory.com/> 블로그 </a> </H3>
<H4> <a href=http://www.tistory.com> 티스토리 </a> </H4>
<H5> <a href=http://www.naver.com> 네이버 </a> </H5>

</BODY>
</HTML>



이 방법 말고도 js 파일을 따로 넣는방법도 있는데요...
일단은...
이 방법대로만 해봅시다...///
제 블로그에도 링크가 무지개색으로 변하는데...
저는 플러그인... 썼어요;;;; ㄷㄷ///
왠지 관리하기가 불편해질거같았기에;; ㅎㅎ;;;
티스토리에서는 js파일을 직접 링크시켜 넣었더군요..

<body> 와 </body> 사이에 넣어주세요<<

<script language=javascript src="http://cfs.tistory.com/blog/plugins/RainbowLink/rainbow.js" type="text/javascript"></script>

이걸 직접 넣으면...
마우스가 링크 위에 올라왔을때, 링크가 무지개색으로 변합니다...

재미있는 공부 되셨는지요...


Posted by 승호/

html ....
마우스 커서를 따라다니는 글자 메시지 자바스크립트 소스 입니다 .<<



<HTML>
 <HEAD>
  <TITLE>마우스커서를 따라 다니는 글자메세지(부드러운 효과).</TITLE>
<style>
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:10pt;
font-family:궁서체;
font-weight:bold;
color:#000080;
}
</style>

<script>
<!--//
var x,y
var step=20
var flag=0

var message="안녕하세요~^^/ 마우스 커서를 따라다니는 메시지~< " //원하는 메세지
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {
xpos[i]=-50
}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {
ypos[i]=-50
}

function handlerMM(e){
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
flag=1
}

function makesnake() {
if (flag==1 && document.all) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
 
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style")
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
 
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step
ypos[i]=ypos[i-1]
}
xpos[0]=x+step
ypos[0]=y
 
for (i=0; i<message.length-1; i++) {
var thisspan = eval("document.span"+i)
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
var timer=setTimeout("makesnake()",30)
}
//-->
</script>

 </HEAD>

<!--//  이부분 빼먹으면 안됩니당  //--->
<BODY onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">

<script>
<!-- //
for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
// -->
</script>

</BODY>
</HTML>




빨간색 글씨는 지워도 상관 없습니다..
그냥 설명일뿐입<<

태그연습장에서 한번 연습해보세요~^^//
마우스 커서에 지정하신 문자가 부드럽게~ 따라다니는게 보입니다<<<ㅅ

Posted by 승호/
이번에는 저번에 배웠던 프레임셋에 대해서.
연습만 해봅시다,,<<
<head> </head> 사이에 넣어주세요<<
src=" _____ "                ___사이의 주소는 바꿔서 사용합니다...
scrolling = "no/yes/auto"   중에서 한가지 선택해주시고요
frame name =" ___ "         ___ 사이의 지정 이름 바꿔서 사용하세요

-------------------------------------------------------------------


<frameset rows="50, *" border="0">
<frame name="nav" scrolling="no" src="http://www.naver.com
">
<frameset cols="200, *">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
</frameset>

 

--------------------------------------------------------------------


  <frameset rows="50, 100, *" border="0">
<frame name="nav
" scrolling="no" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>

 
--------------------------------------------------------------------


<frameset cols="200, *" border="0">
<frame name="nav" scrolling="auto" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>



--------------------------------------------------------------------


<frameset rows="*, 100" border="0">
<frameset cols="200, *">
<frame name="nav" scrolling="auto" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
 


--------------------------------------------------------------------


<frameset cols="200, *" border="0">
<frame name="nav
" scrolling="auto" src="http://www.naver.com
">
<frameset rows="100, *">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
</frameset>

 

--------------------------------------------------------------------


<frameset rows="50, *" border="0">
<frame name="nav
" scrolling="no" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>
 

--------------------------------------------------------------------


<frameset rows="75, *, 75" border="0">
<frame name="nav" scrolling="no" src="http://www.naver.com
">
<frameset cols="190, *">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>
<frame name="
da" scrolling="no" src="http://www.
daum.net">
</frameset>



--------------------------------------------------------------------

<frameset cols="*, 190" border="0">
<frameset rows="100, *">
<frame name="nav
" scrolling="auto" src="http://www.naver.com
">
<frame name="sh
" scrolling="auto" src="http://jihansome.tistory.com
">
</frameset>
<frame name="tis
" scrolling="auto" src="http://www.tistory.com
">
</frameset>

--------------------------------------------------------------------
직접 해보시면서...
연구 해보셨는지요...


오늘도 수고하셨습니다~^^;;/

'html 태그 배우기' 카테고리의 다른 글

html 마우스 커서  (14) 2008.04.11
html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
Posted by 승호/

드디어 프레임셋까지왔군요,,,

지금까지 배웠던것부터 오늘의 프레임셋까지 완전히 다 배우셨다면..
웬만한 홈페이지는 만들기 가능할듯,, 싶네요;; ㅎㅎ///




html 프레임셋에 대해서...
일단은 개념부터 알아보죠,,<<
home.html, index.html, main.html  등과 같이...
페이지가 적어도 3개 이상은 되야 프레임셋을 쓸수있겠죠;;???
일단은...
올리시려는 웹호스팅 사이트에서 어느 파일명이 페이지의 메인이 되느냐..
그것부터 알아놓으시길..
드림위즈는 index.html 이 메인이 되구요,, (확실..)
컴내꺼에서는 hame.html 이 메인이 되는걸로 기억하고있습니다...;;

일단은 따라해봅시다...

<head> </head> 사이에 넣어주세요<<
<frameset cols="350, 100">
<frame name="left" src="http://www.naver.com">
<frame name="right" src="http://jihansome.tistory.com">
</frameset>


위의 프레임셋 예제소스에 대해서 설명부터 해보겠습니다..
첫번째 줄...
프레임셋 시작됬다......
<frameset cols="350, 100"> 은 프레임셋을 가로로 나누어라.. (cols)
그리고 왼쪽의 절대적 크기는 350 픽셀,, 그리고 나머지값 입니다,,

두번째줄...
프레임 이름은 left 로 지정하고 이 프레임의 문서는 네이버.. 를 나타내라.
라는 뜻이죠...
마찬가지로

세번째줄에서
프레임 이름은 right 로 지정하고 이 프렘의 문서는 제 블로그.. 를 나타내라.
라는 뜻이 되죠..

마지막 네번째줄은 프레임셋이 끝났다<<
라는 뜻이죠,,


좀 더 알아보겠습니다..
아래 태그는 <body> </body> 사이에 들어가야되는 소스입니다..
따로 html 기본 형식 잡아주시고,,
연습해보세요..

<a href="http://www.naver.com" target="right">네이버 메인</a>
<p>
<a href="http://jihansome.tistory.com" target="right">
승호의 블로그
</a>

.. 아까 저~기 위에서 프레임 이름... frame name 을 지정해주었죠..??
left는 네이버로,,
right 는 제 블로그로요...
그리고 여기에서 target 는 위에서 지정해준 이름을 써넣는겁니다..
네이버 메인이라는 문자를 클릭하면 제 블로그에서 링크가 열리게 되구요,,
승호의 블로그 라는 문자를 클릭하면 target 를 right 로 지정했기때문에 역시 제 블로그 페이지가 프레임셋에서 열리게 되겠죠<<
그럼 target 를 left 로 지정했었던 네이버 메인 페이지는 어떻게되느냐..
target 를 right 로만 지정해서 링크해놨기때문에 문자를 클릭하면 left 프레임은 네이버 메인인채로 가만히 있게되겠죠<<


ㅠㅠㅠㅠㅠㅠ
너무 횡설수설하는것같은;;;;; ㅈㅅㅇ.. ㅠㅠㅠ///
제 어휘력으로는;;? 설명하기가 좀 어려운부분이라서요/;;ㅠㅠ ㅈㅅㅇ;;//

일단은
프레임의 속성에 대해서 알아봅시다..

속성

설명

border="숫자"

중간선 두께. 0 추천합니다,,<<

cols="150, *"

가로로 나눌 때의 속성. 왼쪽몇.오른쪽몇. 이런식.(숫자,%,* 들로 씀)
숫자는 픽셀값(권장) 퍼센트는 창의 몇%로 할 것인가, *는 남는대로.

name="이름. 꼭! 영어로..."

메뉴에서 링크시킬 때 타겟(target="")에 적을 이름이 됩니다.

rows="숫자 또는 퍼센트 또는 *

세로로 나누겠다는 속성.

scrolling="셋중하나"

그 프레임칸에 스크롤바를 있게할지 없게할지 auto/yes/no 중 선택. [auto=알아서선택(초기값), yes=무조건보임 no=무조건없앰]

src="주소"

그 프레임에 처음에 나타나게 될 페이지의 주소.


대충 이런 속성들이 있습니다,,,,
예를 들어보죠,,

<head> </head> 사이에 넣어주세요~<<!

<frameset cols="200, *" border="0">
<frame name="
abc" scrolling="no" src="주소1
">
<frame name="bcde
" scrolling="auto" src="주소2
">
</frameset>

,,이렇게라던가...

 <frameset rows="50, *" border="0">
<frame name="
abc" scrolling="no" src="index.html">
<frameset cols="200, *">
<frame name="
bcdefg" scrolling="auto" src="menu.html">
<frame name="
cdef" scrolling="auto" src="home.html">
</frameset>

... 등과같이 여러개의 프레임을 넣을 수도 있습니다<<



프레임....
그냥 보시면서 이해간다...시는 분들도 많이 계실텐데요..
저도 여러번 연습해보면서 겨우 이해했습니다...
직접 연습 해보시면서...
이해 안가시는분들 덧글 달아주세요~^^

수고하셨습니다~<<

'html 태그 배우기' 카테고리의 다른 글

html 움직이는 글씨 , 마퀴태그  (10) 2008.04.04
html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
Posted by 승호/
이미지맵이란<<???

이미지 맵은 하나의 그림에 부분적으로 링크를 걸어서 각각 다른 경로로
링크시키는 것을 말합니다.

저번에 배웠던 이미지에 링크걸기 태그와는 꽤 많이 다르죠;;
훨씬 업그레이드됐다..;;
라고해야될까요;;?


아래 표는 이미지 맵에서 사용되는 영역 ( Area ) 을 정의하는 형태 ( Shape ) 의 속성입니다..
잘 기억해두시길....

shape="rdct"

 사각형

shape="circle"

 원

shape="poly"

 다각형


예를 들어보겠습니다..
보라색 글씨부분만 바꿔서 사용하세요<<

 <img src="이미지 파일 주소" usemap="이미지 맵">
   
<map name="이미지 맵">
          <area shape="rect" coords="
181, 176, 387, 273" href="http://jihansome.tistory.com/" target="_blank">
          <area shape="circle" coords="
284, 65, 56" href="http://www.naver.com" target="_blank">
          <area shape="poly" coords="
131, 26, 169, 25, 209, 128, 35, 101, 63, 21" href="http://www.tistory.com/" target="_blank">
   </map>
    


이렇게 좌표를 적어서 태그를 만들수도 있는데요;;
이미지에 섬세하게 좌표를 적어서 링크걸기는 아무래도 손도 많이가는 그런 번거로움도 있겠네요..

개인적으로 나모웹에디터나 드림위버를 완전추천합니닷<<<

나모웹에디터에서 이미지맵 삽입방법은..

삽입 -> 그림요소 -> 이미지맵 - ......
이렇게 하시면 됩니닷,,,


이미지맵에대해서는...
설명할부분이 그렇게 많지는 않네요;;;;;;;

간단해도..
복습은 잊지마시길<<ㅎㅎ;;

'html 태그 배우기' 카테고리의 다른 글

html 색상 코드표  (2) 2008.04.01
html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
Posted by 승호/

중간잡담,,,

잡담....... 2008.03.30 21:45

html 태그 배우기 잘 따라와주신분들 고맙습니닷<< 꾸벅<<< ㅠㅠ

태그 올리니까 방문자수가 30분이나 늘어난;;;



오랜만에??

스킨 끄적끄적 해봤습니다..

결과는 일단 성공으로보이는데...



자바스크립트만 두개 추가시켰습니다...

이거 그대로 복사, 붙여넣기해서..
스킨바꾸려고했다가;;

잘못되면....진짜.. 일 커집니다;;;;;

일단은...
스크립트에는 이런것들이 있다...
이렇게만 봐두셨으면 좋겠네요,,,

나중에..
스크립트 태그에 대해서...
꾸준히 올려보도록 하겠습니닷,,,


▽이 태그는 제 블로그 왼쪽 상단에 있는 메뉴바<
입니다...
참고하시길.....


<!-- 왼쪽 상단 태그배우기 메뉴바 스크립트 시작 //-->
<body onLoad="initiateticker();" scroll="yes">


<style>
<!-- :*: Happyscript :*: //-->
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
//-->
</style>
<!-- open menu 부분 //-->
<DIV CLASS="menbar1" ID="menbar1" STYLE="position:absolute;top:1;visibility:hide;" zIndex="1000">
<table border="0" width="120">
<tr>
<td align="center" bgcolor="#dfdfff">
<A HREF="javascript:change(1)" onfocus="this.blur()"><font size="4" color="red" face="안상수중간">태그배우기 메뉴열기</font></A>
</td>
</tr>
</table>
</DIV>
<!-- close menu 부분 //-->
<DIV CLASS="menbar2" ID="menbar2" STYLE="position:absolute;top:1;visibility:hide;display:none;" zIndex="1001">
<table border="0" width="120">
<tr>
<td align="center" bgcolor="#dfdfff">
<a href="javascript:change(2)" onfocus="this.blur()"><font size="3" color="red" face="안상수중간">메뉴닫기</font></a>
</td>
</tr>
<tr>
<!-- 메뉴 구성 부분 //-->
<td bgcolor="#ffffff">
&nbsp;<a href="http://jihansome.tistory.com/entry/html-기본-태그" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">태그의 기본</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-문자-크기-바꾸기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">문자 크기 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-마퀴태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">마퀴 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-이미지-태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">이미지 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-링크-태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">링크 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-테이블태그-배우기" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">테이블 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-음악태그" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">음악 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-배경-태그" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">배경 태그</font></a><br>
&nbsp;<a href="http://jihansome.tistory.com/entry/html-프레임" onfocus="this.blur()"><font size="4" color="blue" face="안상수중간">프레임 태그</font></a><br>

</td>
</tr>
</table>
</DIV>
<script language="Javascript">
<!--
// 이 자스 소스는 메뉴 구성 소스 밑에 있어야 한다
// 메뉴 구성 소스 위에 있으면 스크립트 에러가 남..
var JX = 0;
var JY = 0;
var wm;
if (document.layers){
wm = document.menbar1;
}
if (document.all) {
wm = document.all.menbar1;
}
function change(wow) {
 if (document.layers){
 if (wow == 1) {
 wm.visibility = "hide";
 wm = document.menbar2;
 }
 if (wow == 2) {
 wm.visibility = "hide";
 wm = document.menbar1;
 }
 }
 if (document.all){
 if (wow == 1) {
 wm.style.display = "none";
 wm = document.all.menbar2;
 }
 if (wow == 2) {
 wm.style.display = "none";
 wm = document.all.menbar1;
 }
 }
}
function menbar() {
 if (document.layers){
 JX = window.pageXOffset;
 JY = window.pageYOffset;
 wm.visibility = "hide";
 wm.top = JY;
 wm.left = JX;
 wm.visibility= "show";
 }
 if (document.all){
 if (navigator.appVersion.indexOf("Mac") == -1){
 wm.style.display = "none";
 JX = document.body.scrollLeft;
 JY = document.body.scrollTop;
 wm.style.top = JY;
 wm.style.left = JX;
 wm.style.display = "";
 }
 }
}
setInterval("menbar()",100);
//-->
</script>
<input type=button name=simabuttonviewsource value="View Source" onClick='window.location="view-source:"+window.location.href'>

<!-- 왼쪽 상단 태그배우기 메뉴바 스크립트 마침 //-->


<!-- 타이틀부분 알림 스크립트 시작 //-->
<script language=javaScript>
// 메세지 부분
// 추가시는 그대로 복사하여 숫자만 바꾸어서 사용하면 됨
var message=new Array()
message[0]="블로깅 꾸준히하겠습니닷<<<."
message[1]="안부글좀 써주세요,,,, ㅠㅠ."
message[2]="태그 배우려면~~~~ >~클릭~<."

// 메세지 링크 부분
// 추가시는 그대로 복사하여 숫자만 바꾸어서 사용하면 됨
var messagelink=new Array()
messagelink[0]="http://jihansome.tistory.com/"
messagelink[1]="http://jihansome.tistory.com/guestbook"
messagelink[2]="http://jihansome.tistory.com/category/html%20태그%20배우기"

// 타겟 부분
// 추가시는 그대로 복사하여 숫자만 바꾸어서 사용하면 됨
var linktarget=new Array()
linktarget[0]="_self"
linktarget[1]="_self"
linktarget[2]="_self"

var leftposition=160 // 브라우저 왼쪽과 스크롤 텍스트와의 거리
var topposition=16 // 브라우저 위쪽과 스크롤 텍스트와의 거리
var tickerwidth=250 // 테이블 가로크기
var tickerheight=37 // 테이블 세로크기
var tickerpadding=10 // 테이블과 글자사이 공간
var borderwidth=1 // 테이블 테두리 두께
var fnt="Verdana" // 글자체
var fntsize=12 // 글자크기
var fntsizelastletter=10
var fntcolor="aaffcc" // 글자색
var fntcolorlastletter="red"
var fntweight=4
var backgroundcolor="black" // 배경색
var standstill=3000 // 완성된 글자가 보여지는 시간 (1000 = 1초)
var speed=77 // 작히는 속도 - 작을수록 빠르다
var i_substring=0
var i_presubstring=0
var i_message=0
var messagecontent=""
var messagebackground=""
var messagepresubstring=""
var messageaftersubstring=""
fntweight=fntweight*100

function initiateticker() {
 getmessagebackground()
 if (document.all) {
  document.all.ticker.style.posLeft=leftposition
  document.all.ticker.style.posTop=topposition
  document.all.tickerbg.style.posLeft=leftposition
  document.all.tickerbg.style.posTop=topposition
  tickerbg.innerHTML=messagebackground
  showticker()
 }
 if (document.layers) {
  document.tickerbg.document.write(messagebackground)
  document.tickerbg.document.close()
  document.ticker.left=leftposition
  document.ticker.top=topposition
  document.tickerbg.left=leftposition
  document.tickerbg.top=topposition
  showticker()
 }
}

function getmessagebackground() {
  messagebackground="<table border="+borderwidth+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top bgcolor='"+backgroundcolor+"'>"
  messagebackground+="hello</td></tr></table>"
}

function getmessagecontent() {
  messagepresubstring=message[i_message].substring(0,i_presubstring)
  messageaftersubstring=message[i_message].substring(i_presubstring,i_substring)
  messagecontent="<table border=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+"><tr><td valign=top>"
  messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"
  messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>"
  messagecontent+="<font color='"+fntcolor+"'>"
  messagecontent+=messagepresubstring
  messagecontent+="</font>"
  messagecontent+="</a>"
  messagecontent+="</span>"
  messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsizelastletter+"pt;font-weight:900'>"
  messagecontent+="<a href='"+messagelink[i_message]+"' target='"+linktarget[i_message]+"'>"
  messagecontent+="<font color='"+fntcolor+"'>"
  messagecontent+=messageaftersubstring
  messagecontent+="</font>"
  messagecontent+="</a>"
  messagecontent+="</span>"
  messagecontent+="</td></tr></table>"
}

function showticker() {
 if (i_substring<=message[i_message].length-1) {
   i_substring++
   i_presubstring=i_substring-1
   if (i_presubstring<0) {i_presubstring00}
   getmessagecontent()
  if (document.all) {
   ticker.innerHTML=messagecontent
   var timer=setTimeout("showticker()", speed)
  }
  if (document.layers) {
   document.ticker.document.write(messagecontent)
   document.ticker.document.close()
   var timer=setTimeout("showticker()", speed)
  }
 }
 else {
  clearTimeout(timer)
  var timer=setTimeout("changemessage()", standstill)
 }
}

function changemessage() {
 i_substring=0
 i_presubstring=0
 i_message++
 if (i_message>message.length-1) {
  i_message=0
 }
 showticker()
}

document.write('<DIV ID="tickerbg" style="position:absolute"></DIV>')
document.write('<DIV ID="ticker" style="position:absolute"></DIV>')
document.write('<DIV id="deletethisblock" style="position:absolute;top:10px;left:180px;"></DIV>')
//-->
</script>
<!-- 타이틀부분 알림 스크립트 마침 //-->



왜 <!-- 타이틀부분 알림 스크립트 시작 //-->
<!-- 타이틀부분 알림 스크립트 마침 //-->

이렇게 자세하게 써놨을까요;;???


스크립트는 정리하기도 힘들고..
수정하는게 더 힘듭니다..
자주 수정을 해줘야될때..
스크립트 어디있는지 찾기 힘들어서..
ctrl + f 의 찾기. 효율성? 을 높이기위해서 저렇게 정리를 해두는게...

아무래도 유리하겠죠<<???

html 웹페이지 제작에있어서 제일 먼저 알아야 할건..
역시 정리라고해도..
과언이 아닐듯 싶네요<<ㅎㅎ;;;


그럼.. 앞으로도 스킨배우러 자주 와주셨으면 좋겠습니다~~<<
------------ 이걸로 저의 횡설수설 마칩니닷..; -------------

'잡담.......' 카테고리의 다른 글

컴퓨터 스킨  (1) 2008.04.11
배너수정  (3) 2008.04.08
두번째 배너,,,  (0) 2008.04.08
블로그 홍보영상?  (6) 2008.04.05
중간잡담,,,  (0) 2008.03.30
저작권 걸렸습니다,.....  (2) 2008.03.27
자작 나노하 매드무비  (8) 2008.03.24
Posted by 승호/
아이프레임(iframe)
홈페이지 제작에 있어서 몰라서는 안되는 태그죠;;;
아이프레임보다는 그냥 프레임태그가 더 많이 쓰이긴 하지만요;; ㅎㅎ

프레임셋 소스<< 라는게 있는데요..
아이프레임 쓰는거보다는
프레임셋 소스로 웹페이지 관리하시는게 제일 수월하다고 하는게 좋을거같네요;


한 페이지 안에 또다른 페이지를 지정한 공간에 넣을 수 있습니다.
네이버 사이트를 아이프레임 시켜보겠습니다<<

<iframe src="http://www.naver.com" width="500" height="300"></iframe>
 



이렇게 페이지 안에 다른 주소의 작은 페이지를 넣게 됩니다.

기본 형식
<iframe src="주소"></iframe>

뒤에 꼭 </iframe>으로 아이프레임의 끝을 정해주어야 합니다.

속성(option)

설명

 src="주소"

 iframe에서 표시할 경로를 지정해 줍니다. "http://..."

 name="a1"

 iframe의 이름을 지정 합니다. 이름을 a1, abcd 등과같이 지정합니다

 width="숫자(픽셀값)"

 frame의 가로길이를 지정합니다.

 height="숫자"

 frame의 세로길이를 지정합니다.

 frameborder="숫자"

 iframe의 경계선 두께입니다. "2"로 하면 깔끔(?)하게 안보이더군요.

 marginwidth="0"

 iframe의 좌우여백입니다.

 marginheight="0"

 iframe의 상하여백입니다.

 scrolling="셋중하나"

 스크롤바 표시 여부를 설정하는거죠<<
yes:무조건생성,no:무조건생성않음,auto:페이지 내용크기에 따라.

 align="셋중하나"

 문장과 상관되는 정렬위치입니다.[left/right/center(왼쪽/오른쪽/중간)] 셋중 하나 선택.


간단하게 소스에 속성을 적용시켜보겠습니다...

<iframe src="http://www.tistory.com" name="tistory" width="500" height="400" frameborder="2" marginwidth="0" marginheight="0" scrolling="auto"></iframe>



아이프레임을 프레임셋과 비슷하게 쓰는 방법.
저기 위에 name="tistory" 한거 보이시는지요...? 아이프레임 name을 tistory 으로 한겁니다.
그럼 이것을 링크태그와 같이 써보면 (한페이지에) 그냥 프레임처럼 사용할 수 있습니다.
링크태그에 타겟.target 을. 이렇게. <a href=http://www... target="tistory">나타낼문자</a>
그럼 이 링크를 클릭하면 나타나게 되는곳은 바로 아이프레임입니다.


저도 설명 이해가 어렵네요;;;
저도 아이프레임은 그리 많이 써보지않아서요;;;
프레임셋이 쉽더라구요<<


프레임셋 기본 소스입니다...
<html>
<head>
</head>

<frameset rows="5%, 95%" border="0">
    <frame src="웹 페이지 주소" name="a1" scrolling="no" marginwidth="10" marginheight="7">
    <frame src="웹 페이지 주소" name="a2" scrolling="auto" marginwidth="10" marginheight="14">
</frameset>

</html>

웹 페이지 주소< 를 name=a1 과 a2 로 지정시켰습니다.
만약 두번째 웹페이지 주소인 name=a2   에서 티스토리로 링크를 걸었습니다.
이 때 링크를 걸면 target="_self" 의 소스가 생깁니다.
여기서 target="_self" 를 target="a1" 으로 지정하면
위쪽의 웹페이지,(a1)에서 링크가 열리게 됩니다.

간단하죠???

예를 들어보겠습니다..

-----------------------------------------------
<html>
<head>
</head>

<frameset rows="50%, 50%" border="0">
    <frame src="http://jihansome.tistory.com/" name="a1" scrolling="no" marginwidth="10" marginheight="7">
    <frame src="http://www.tistory.com" name="a2" scrolling="auto" marginwidth="10" marginheight="14">
</frameset>

</html>
-----------------------------------------------
이렇게 지정을하면 제 티스토리 블로그가 위쪽에, 스크롤바는 없이 나오죠<<???
그리고 티스토리 메인 홈페이지는 아래쪽에, 스크롤바가 나타나있습니다..<<
frameset rows="50%, 50%   <<< 여기서 앞쪽의 50%는 위쪽의 프레임 페이지 크기가되구요
뒤쪽의 50%는 아래쪽의 프레임 페이지 크기가 지정되죠<<

인터넷 창의 크기를 줄여보면 프레임창의 크기들도 화면의 반씩으로 나뉘게 줄어듭니다..



오늘... 프레임 태그 잘 배워보셨는지....
이해 안되시면 제 안부게시판
http://jihansome.tistory.com/guestbook\
에 글 남겨주세요... 성심성의껏 답변해드리겠습니다<<

'html 태그 배우기' 카테고리의 다른 글

html 프레임셋 태그의 모양 구조  (0) 2008.04.01
html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
Posted by 승호/
배경태그 (background)
 
 
자 이제 홈페이지에 배경색,또는 배경화면을 넣는 태그를 배워봅시다~!!
홈페이지에 흰색 배경화면이라면..
뭔가 허전하겠죠<<???
이거 잘 배워두시면 나중에 티스토리 스킨바꿀때 아~~~~주 많이 도움될껍니닷<<<ㅎ

 

 먼저 배경을 지정하는 태그는 두가지가 있습니다.
 배경 색만 지정하는
bgcolor 와 배경을 이미지로 하는 background  태그입니다.

 1. 그럼 우선 bgcolor 태그를 사용하는 방법을 알아보겠습니다.
 

 HTML 문서에 <body> 라고 되어있는 부분이 있습니다.
 그럼 이제 <body> 부분을 고쳐줍니다.
 <body bgcolor="red"> ㅡ> 배경 색깔이 빨간색(red) 이 됩니다.
 
<body bgcolor="black"> 이렇게하면 검은 바탕이되죠.(black)
 <body bgcolor="0000cc"> 이런식으로 코드를 넣어도 됩니다.(0000cc=진한파랑)
 아무튼,
<body bgcolor="여기에"> 원하는 색깔의 코드나 색명을 적으세요.
코드를 적어주는게 아무래도 유리?하겠죠''';;;
코드는 네이버에서 색상 코드표   라고 치면 나옵니다<<
참고하시길...

 
 2.다음으로 background 태그입니다.
 
 이것도 마찬가지로 <body>에 지정해줍니다.
 <body background="이미지 파일 주소"> 이렇게요.
 아무 그림이든 상관없습니다. (jpg,gif,bmp...등등. 그러나 배경은 gif를 가장 선호)
<body background="이미지 파일 주소">
그냥 기억만 해두세요.......많이 쓰이지는 않습....
배경을 패턴으로 지정해주는것도 보기는 좋겠지만..
역시 이미지를 지정해주는게 보기 좋을듯 하는...

자,,,
제 블로그 배경화면처럼
이미지를 배경화면에 고정시키는태그 가능합니다....
<head> 와 </head> 사이 아무데에다가 붙여주기만 하면 됩니다..


 <style TYPE="TEXT/CSS">
 BODY {background:url(
배경화면 이미지 주소) white fixed no-repeat 100% 100%}
 </style>

 
뒤쪽에 퍼센트는 이미지 위치를 지정하는겁니다...
<<※ 퍼센트에서 왼쪽건 가로, 오른쪽건 세로 이고, 퍼센트가 높을수록 오른쪽으로,아래로 갑니다>>

하지만... 티스토리에서 수정할때는...
위의 방법처럼하시면...
블로그 망가집니다... 배경 바꾸는방법 배웠다고 블로그 스킨 수정하지 마시길...;;;
나중에 제꺼 그대로 가르쳐드리겠습니다<<


덧글 부분의 백그라운드 이미지는 왜 안고정시켰냐,,<<

저도 고정시키고싶지만...
스타일시트에서 배경 고정시키는 태그는 없는걸로 압니다..

티스토리 스킨.html 에서 덧글 부분의 이미지 지정을 할수만있었더라면..
고정 가능했을지도...
 

따로 웹페이지를 만들때에는 그냥 바디 ( body ) 태그로 고정시킬 수도 있습니다!
 
 <body background="이미지 파일주소" bgproperties="fixed">
이렇게 해주시면 되구요. 이 속성을 쓰시면 바둑판식으로 되고, 고정됩니다.

이미지 파일은 되도록이면 크게 저장하세요...

작은 이미지를 배경화면으로 지정하면 이미지파일 그대로 크기에 바둑판식으로 나옵니다;;;
보기 안좋겠죠;;

패턴형식으로 하실꺼면 이미지의 크기는 상관 없지만요...


오늘꺼...
꽤 중요합니다..
잘 외워두시길....

'html 태그 배우기' 카테고리의 다른 글

html 프레임셋  (0) 2008.04.01
html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
Posted by 승호/
드디어 음악태그입니다<<
궁금해하시는분들 많겠죠,,
음악태그...
블로그 배경음악으로도 설정할수있고,,
포스팅할때도 속성바꿔서올릴수도있고,,,

음악올리실때 주의할점...
저작권 안걸리게 조심하시길...


그럼 시작합니다<<<



1. <bgsound src="음악주소">


 이건 완전 배경음악전용 태그구요, 음악파일주소 확장자가mp3, mid, wma, wav 등일 경우에 사용하세요.
 
<bgsound src="음악파일 주소">

bgsound    <<<이게 무슨뜻이냐....
그냥 백그라운드 사운드.. 이렇게 기억해두세요...
배경음악에 관련된겁니다,,,,,,<<
앞에서 배웠던 bgcoler (배경 이미지) 랑 비슷한뜻이죠;;;?

 
 음악을 반복재생 하실려면, loop 속성을 추가하시면 됩니다.
 <bgsound src="음악파일 주소" loop="3">
 이렇게요. loop="3"은 3번 반복재생 .이란 뜻이고요,,
 loop="infinite" 으로 하시면 무한반복입니다.

 <bgsound src="음악파일 주소" loop="infinite">
이런식으로요.




2. <embed src="음악 또는, 멀티미디어주소">

 이건 위에서 말씀드렸듯이 동영상, 음악 등을 띄울 수 있는 태그입니다,,,
 멀티미디어 재생기가 뜹니다. (지원하는 파일 - asx, asf, wma 등등..)
 
이건 그냥 이미지 삽입하는것같은거라고할까요,,??
 
<embed src="음악파일 주소">
 
 재생기를 안보이게 하시려면 hidden="true" 속성을 넣으세요.

 <embed src="음악파일 주소" hidden="true">
이렇게요.
 
 embed 태그에서 재생기의 크기를 조절할 수 있는데 값을 width="70" height="25" 로 하면
 
<embed src="음악파일 주소" width="70" height="25"> 이런식.이죠,,??
아주 조그만 재생기가뜨죠,,,
한번 해보시는게 일단은 좋죠,,,,<<~
 

주의점!!
 embed 태그에서는 몇 번씩 반복속성은 적용되지만 무한반복은 안됩니다.

 예) [loop="숫자" (o)적용됨, loop="infinite"(x)적용안됨.]
대신 loop="false" 이면 무한반복 적용됩니다<<
차이점 기억해두세요<<

 
그리고 위에서 말했던 동영상 띄우는 방법은 그냥 동영상 주소를 embed 태그로 사용하시면 됩니다.
픽셀값으로 크기지정도
width="x" height="x" 속성으로 정할 수 있구요. 동영상은 짤리지 않습니다.

'html 태그 배우기' 카테고리의 다른 글

html 이미지 맵  (0) 2008.03.31
html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
Posted by 승호/
테이블 태그.<table>
태이블 태그는 표를 만드는 태그를 말합니다.
표(table)의 기본구조는,,,,

<table>
<coption>...</coption>
<tr>
<th>...</th>
<td>...</td>
</tr>
</table>


 <table>

 표 작성함을 정의한다 (</table>은 표가 끝남을 정의)

 <tr>

 Table Row의 약자로, 표 안에서 한줄(Row)이 끝났으
 므로 줄바꾸기를 합니다.

 <th>

 Table Heading의 약자로, 표의 머리글 (Header) 임을
 나타냅니다.

 <td>

 Table Data의 약자로,보통체와 왼쪽정렬로 적용됩니다.

 <caption>

 표의 제목을 표화 함께 나타내는 속성입니다.
 align=top -->표의상단
 align=bottom -->표의하단

표에서 사용되는 속성

속성

정의

 width=50%

 표나 셀의 폭(넓이)을 창의 백문율(%)로 지정한다.

 width=400

 표나 셀의 폭을 픽셀 값으로 지정한다.

 height=pixel수

 셀의 높이(세로)를 지정한다.

 cellpadding=10

 셀의 안쪽 여백(셀의 테두리와 문자열 사이의 간격)을 10픽셀로 지한정다.

 cellspacing=5

 셀과 셀 사이의 간격을 5픽셀로 지정한다.

 border=숫자

 표 테두리의 두께를 지정하는 것으로 숫자가 커질수록 두꺼워진다.
 border=0 이면 웹 브라우저에서 표의 테두리가 보이지 않는다.

 colspan=2

 가로의 열(column) 2개를 합치기 한다.

 rowspan=3

 세로의 줄(row)3개를 합치기 한다.

 valign="위치"

 align="left,right,center" -셀 안에서의 가로 위치 정렬

 align="위치"

 valign="top,middle,bottom" - 셀 안에서의 세로위치정렬

 bgcolor="색상"

 표 전체 또는 선택된 셀의 배경 색상을 지정한다.

 backround="주소"

 표 전체 또는 선택된 셀의 배경 이미지를 삽입한다.


위의 표 무조건 외우시는게 좋을듯 싶습니다...
표는 웹에디터로 쉽게 만들수는 있지만...
다른 여러가지 속성을 적용시키려면...
외워야 속성넣기 쉽습니다...;;



<table border="1">
<tr>
  <td bgcolor="yellow"> 일러스트 </td>
  <td> 포토샵 </td>
</tr>
<tr>
  <td> 웹에디터 </td>
  <td> 드림위버 </td>
</tr>
</table>


어떻게한건지 대충 짐작 가시죠???
<td> 를   <td bgcolor="yellow">
이렇게 바꿔주었습니다<<

 

일러스트  포토샵 
웹에디터 드림위버


 

<table border="1" bordercolor="red" cellspacing="0">
<tr>
  <td> 일러스트 </td>
  <td> 포토샵 </td>
</tr>
<tr>
  <td> 웹에디터 </td>
  <td> 드림위버 </td>
</tr>
</table>



<table border="1">   <<< 이것에

<table border="1"> bordercolor="red" cellspacing="0">

이렇게 속성을 추가시켰습니다..

일러스트  포토샵 
웹에디터 드림위버


<table border="0">
<tr>
  <td> 포토샵 </td>
  <td> 플래시 </td>
</tr>
<tr>
  <td> 나모웹 </td>
  <td> 드림위버 </td>
</tr>
</table>

포토샵 플래시
나모웹 드림위버


 

<table background="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMi5naWY=" border="1">
<tr>

    <td> <font color="red">포토샵</font>     </td>
    <td> <font color="red">플래시</font>     </td>
</tr>
<tr>
    <td> <font color="red"> 나모웹</font>     </td>
    <td> <font color="red">드림위버</font>     </td>
</tr>
</table>


포토샵 플래시
나모웹 드림위버

background=" 이미지 파일 주소 " border="1">
이 속성을 추가하니까 보시는것처럼 표 뒤의 배경이 주소의 사진이되네요<<


<table border="1">
  <td rowspan="4"> 웹제작 </td>
     <td>나모웹 에디터</td>
     <tr>
     <td>드림위버</td>
     <tr>
     <td>포토샵</td>
     <tr>
     <td>플래시</td>
</table>

웹제작 나모웹 에디터
드림위버
포토샵
플래시




오늘은 여기까지입니다<<
열심히 공부/연구하시고요~^^
복습 잊지마세요~^^

'html 태그 배우기' 카테고리의 다른 글

html 프레임  (0) 2008.03.30
html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
html 마퀴태그 배우기  (5) 2008.03.29
Posted by 승호/
하이퍼링크.
다른 문서나 미디어 파일을 연결(Link)시켜주는 것으로, 'anchor(닻)'을 의미합니다.
<a href="웹페이지주소">연걸어</a> 의 형식으로 쓰이며, 'href'는 Hyper와 Reference
라는 요소를 뜻합니다. <a>태그를 이용하여 웹하이트의 URL은 물론, HTML문서, 워드프로세서,
압축파일, 실행파일 등을 모든 종류의 파일로 링크시킬 수 있습니다.


<a href="http://www.naver.com">네이버</a>
<a href="http://www.tistory.com/">티스토리</a>


처럼 <a href=" 연결할 웹페이지 주소 "> 나타낼 문자 </a>

이렇게 넣는거죠<<


<a href="http://www.naver.com" target="_blank"> <font color="0000cc"> 네이버 바로가기 </font> </a>
조금 나중에가서 쓰일 태그인데요<<

 target="_blank"
이거는 일단 생각하면 안됩니다.. ㄷㄷ;
_blank 는 새 창에서 열기입니다..
일단 _blank 는 다른 이름으로... 절대 바꾸지 맙시다...

왜냐...
target 여기에 들어가는건 html 프레임셋 배우고 나서 바꾸는거거든요...
프레임셋에서는 _blank 를 a1 이라거나, name 같이....바꿔주는거거든요;;;
... 아무튼... 프레임셋에 대해서는... 나중에 알려드리겠습니다..

종류

기능

  target=xxx

 링크시킨 html 문서를 <frameset>의 name으로 붙여준 프레임에서 열
 게 합니다. 예) target=right / target=main

  target=_top

 링크시킨 html 문서를 프레임 구조의 형태를 완전히 벗어나서 Open된
 브라우저 화면으로 열도록 합니다.

  target=_blank

 링크시킨 html 문서를 기존 프레임 구조의 브라우저는 그대로 놔두고,
 새로운 브라우저(새 창, New Navigator)에서 열게합니다.

  target=_parent

 기존의 프레임 구조(frameset)를 완전히 벗어나서, 현재의 프레임구조
로 들어오기 이전의 한 단계 상위 페이지로 올라가도록 링크합니다.

  target=_self

 하이퍼링크 시킨 문서를 같은 프레임에서 열게합니다.


target=xxx 여기.... 일단은 아무것도 바꾸지 맙시다...
프레임셋은 아직 좀 빠르다..?
라는 느낌이드는...
일단은   target=_top,  target=_blank,  target=_parent, target=_self   이 4가지만 기억해주세요<<


이미지를 클릭하면 링크 바로가기

<a href="http://www.naver.com" target=_blank > <img src=" 이미지 파일 주소 " border="0"> </a>
이 태그를 넣으면 어떻게될까요>??

당연히..
이미지를 클릭하면.. 새창이 열리면서
http://www.naver.com 네이버 홈페이지...여기로 이동하겠죠<<

참고로...   border="0"  저번에 배운 이미지 삽입하는 태그, 그리고 이미지의 테두리를 지정하는 태그... 0으로 설정한건데 왜 써놓았냐<< 궁금하신지요<<
..... 이미지를 링크시킬때 테두리가 생깁니다.. 그걸 막기위해서 border="0" 속성을 넣어주는거죠<<<<
이해 되시죠<<???

보너스!!
<a href="http://www.naver.com" target=_blank > <img src=" 이미지 파일 주소 " border="0"> </a>
이렇게 태그를 넣고 이미지를 클릭하면 클릭한 이미지 주변에 검은색으로 점선같은게 생깁니다.
보기 좀 안좋죠<<???
이럴때는..
onfocus="this.blur()" 이 속성을 추가시켜줍니다..
<a href="http://www.naver.com" onfocus="this.blur()" target=_blank > <img src=" 이미지 파일 주소 " border="0"> </a>

이렇게하면 테두리에 나타나던 검은 선들이 사라집니다..


알아도 되고...
안알아도 되는.. 태그 남았습니다..

      <a href="mailto:jihansome@naver.com"> 메일보내기 </a>
저에게 메일보내는 태그인데요..
이 태그 사용하시면 아웃룩 익스프레스 (메일보내는프로그램)
이 떠서..
그럭저럭 비추합니다...
그래도..
알아두는게 좋겠죠<<???


 <a href="http:// 올린 파일 주소.파일형식 "> 나타낼 문자 </a>   
이렇게 링크를 시키면 주소에 있는 파일을 다운받게되죠<<
여기서 알고갑시다...
http://    <<이렇게 주소를 넣은것들 절대 경로라고합니다...
<a href=" 파일주소.파일형식 "> 나타낼 문자 </a>   
이렇게 짧게 링크를 걸수도 있는데요..
http:// 를 빼고 주소만 넣은것을 상대경로라고하죠,,
이때 주의점은 나타낼 홈페이지와 같은 공간, 폴더일때만 사용가능합니다..
그리고 홈페이지 만들고나서 출판할수 있을때 사용하는겁니다...
홈페이지를 자주자주 바꾸거나,,,
홈페이지에 올릴수있는 용량이 적을때...
이럴때는 절대경로를 써넣는것이 좋겠죠<<???

그냥 기억해두세요<<<



오늘 배운 링크태그 이해 되셨을지모르겠네요;;;
제가 어휘력이딸려서 말을 돌려말한다는;;??
그런습성이.....

html 은 바꿔보면서 복습하는게 좋습니다<<
해보면 무지하게...간단한?? 쉬운...태그,,라고해도될듯...,,,,,


'html 태그 배우기' 카테고리의 다른 글

html 배경 태그  (0) 2008.03.30
html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
html 마퀴태그 배우기  (5) 2008.03.29
html 문자 크기 바꾸기  (2) 2008.03.29
Posted by 승호/

이번에는 html 에서 대충배워서는 안되는..
이미지 태그에 대해 알아보겠습니다<<


  • 이미지태그는 기본 <img src="그림주소">가 됩니다.




1. 이미지 크기 정하기▶

<img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMS5qcGc=" width="500" height="100"> ▶ 가로500, 세로100 크기 입니다.
크기는 퍼센트% 로 적어도 됩니다. (%로 지정하면 해당페이지 크기가 100%기준이 됩니다)
실행 결과)-


2. alt문자열 넣기

<img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMS5qcGc=" alt="승호의 블로그 - 마비노기 이미지"> ▶ 그림에 마우스를 가져가면 "승호의 블로그 - 마비노기 이미지"라는문자가 뜹니다.
결과)-마비노기


3. 테두리 넣기

<img src="http://cfs5.tistory.com/upload_control/download.blog?fhandle=YmxvZzEyMTEyMEBmczUudGlzdG9yeS5jb206L2F0dGFjaC8wLzIwMDAwMDAwMDAxMS5qcGc=" border="7"> ◀ 이 숫자 "7" 이 테두리 굵기가 7이라는 겁니다.
링크태그에 그림을 링크한다면 border="0" 으로 해줘야 깔끔하게 나옵니다;
결과)-


4. 문장의 위치 정렬하기

 
<img src=" http:// 이미지 주소 " align="top"> 문장이 이미지의 상단 부분에 정렬됩니다.
<img src=" http:// 이미지 주소 " align="middle"> 문장이 이미지의 중간 부분에 정렬됩니다.
<img src=" http:// 이미지 주소 " align="bottom"> 문장이 이미지의 하단 부분에 정렬됩니다.




나중에 배워도 되는 부분들인데요<<

많이 참고될듯 하네요<<


좌, 우 바꾸기                          <img src="이미지 주소" style="filter:fliph()">

상, 하 바꾸기                   <img src="이미지 주소" style="filter:flipv()">

이미지를 흑백으로             <img src="이미지 주소" style="filter:gray()">

이미지에 물결효과             <img src="이미지 주소" style="filter:wave(strength=5,freq=3,lightstrength=10,phase=25,add=0)">

중심부터 원 모양으로 이미지 보이기                                                      
<img src="이미지 주소"
 style="filter:alpha(opacity=100, style=2, finishopacity=0)">

이미지 색 반전                  <img src="이미지 주소" style="filter:invert()">

흐음... 햇살효과 <<???       <img src="이미지 주소" style="filter:blur(direction=135,strength=100)">

이미지를 흑백으로             <img src="이미지 주소"
 style="filter:xray()">


style 뒤쪽의 숫자들<<
이걸 바꿔서 효과 설정하는거죠<<
숫자가 바뀌면 이미지도 적용되는 효과가 달라진다는말<<

편하겠죠;;???     힘들게 포토샵 안써도되는..
jepg 말고도 gif 등의 움직이는 이미지 파일도 적용됩니다<<



이미지 태그에는 여러가지 속성들이 많이붙는데요..
제 블로그 뒤의 이미지가 화면에 고정되는 태그...
이것도 이미지태그에 스타일 <style> 이걸 써먹은거죠<< ㅎㅎ//

배경 안움직이게하는 이미지 style 태그..
나중에 가르쳐드리겠습니다<<< ㅎㅎ///

일단은..
오늘 배운것들을 복습해보시길...........

'html 태그 배우기' 카테고리의 다른 글

html 음악태그  (0) 2008.03.30
html 테이블태그 배우기  (2) 2008.03.29
html 링크 태그 배우기  (21) 2008.03.29
html 이미지 태그 배우기  (6) 2008.03.29
html 마퀴태그 배우기  (5) 2008.03.29
html 문자 크기 바꾸기  (2) 2008.03.29
html 기본 태그  (2) 2008.03.29
Posted by 승호/
이번에는 글씨를 움직이게하는..
marquee   (마퀴태그) 배워보겠습니다<<



<marquee> 움직이는 글씨태그... </marquee>

움직이는 글씨태그...

이렇게쓰면 됩니다만 마퀴태그를 더 다양한 방법으로 쓰고 싶다면
태그에 속성을 추가 시키시면 됩니다

※속성은 붉은색으로 표시.

<marquee direction=right> 오른쪽으로 가자</marquee> ▼

오른쪽으로 가자

<marquee direction=left> 왼쪽으로 가자</marquee> ▼
왼쪽으로 가자

위의 direction=right   direction=left 처럼 right   left 만 바꿔주면
글씨가 움직이는 방향이 달라져요<<

<marquee direction=up> 글씨가 위로~</marquee> ▼

글씨가 위로~

<marquee direction=down> 글씨가 아래로~</marquee> ▼

글씨가 아래로~

※이 속성은 글씨가 이동하는 "속도" 인데요, 붉은색 숫자가 높을수록 더 빠릅니다.

<marquee scrollamount=70>속도 70!! </marquee> ▼

속도 70!!

<marquee behavior=alternate> ◀왓다갓다 좌우왕복▶</marquee> ▼

◀왓다갓다 좌우왕복▶

<marquee behavior=alternate direction=up> 아래위 왕복</marquee> ▼

아래위 왕복

왕복에는 behavior=alternate 이 태그가 붙었습니다.

  • 태그에 배경을 넣습니다."FFFF99" 코드를 바꾸면 다른 색의 배경으로 변합니다.
    <marquee bgcolor=ffff99> 마퀴태그에 배경넣기</marquee> ▼
    마퀴태그에 배경넣기



    오늘 마퀴태그 잘 배워보셨는지요<<

    html 태그는 복습이중요해요<<
    한번봐서 외웠다 하지 마시고 붉은색으로 표시된 속성 바꿔가면서 연습하세요~^^

  • 'html 태그 배우기' 카테고리의 다른 글

    html 음악태그  (0) 2008.03.30
    html 테이블태그 배우기  (2) 2008.03.29
    html 링크 태그 배우기  (21) 2008.03.29
    html 이미지 태그 배우기  (6) 2008.03.29
    html 마퀴태그 배우기  (5) 2008.03.29
    html 문자 크기 바꾸기  (2) 2008.03.29
    html 기본 태그  (2) 2008.03.29
    Posted by 승호/
    h는 크기를 뜻하는거구요..

    h뒤의 숫자가 작을수록 글씨는 커집니다..

    view-source:      

    결과

    <h1> 크다 </h1>

    크다

     <h3> 중간 </h3>

    중간

     <h5> 작다 </h5>

    작다

     <h1> 부터~ </h6> 까지 있습니다>>!!! ( font태그와는 반대!!! ) !!!   꼭! 기억해둡시다..!!

    2.문자 크기를 굵게 만들기...

    <b> 음냐 </b> 음냐

    <b> ☆나타낼 문자를 써주세요☆ <b>



    3.문자를 이탤릭체로 나타내기.

    <l> 이탤릭체 </l>

    이탤릭체


    이건 특별히 기억해두지 않아도 됩니다..
    나중에 여러가지 폰트로 나타낼수있는 태그 가르쳐드릴께요<<


    4.문자에 밑줄치기.

    <u> 중요함!~ </u>

    중요함 !~


    <u> ☆나타낼 문자를 써주세요☆ </u>



    5.문자를 주변문자보다 크게하기.

    으<big>으하하</big>하

    으하하

    문자를 적어넣고
    주변문자보다 크게 적용하고싶은 문자 사이에
    그냥 문자...   <big>   크게적용할문자   </big>   그냥 문자...




    6.문자를 아래첨자,윗첨자로 표현하기.

    아<sub>래첨</sub>자

    래첨

     윗<sup>첨</sup>자



    <sub> 와 <sup> 입니다.
    sub 는 글씨를 아래로 가게 만들고요<<
    sup 는 글씨를 위로 가게 만듭니다<<


    8.문자를 주변문자보다 작게넣기.

    주변보다<small> 작게..</small>훗

    주변보다 작게..

    문자를 주변보다 작게 넣는 태그..

    <small> </small>
    입니다..
    보통크기의 문자   <small>   작게 넣을 문자   </small>   보통크기의 문자

    big 태그와는 반대죠<<<<



    자,, 문자태그공부는 여기서 끝~!<<

    'html 태그 배우기' 카테고리의 다른 글

    html 음악태그  (0) 2008.03.30
    html 테이블태그 배우기  (2) 2008.03.29
    html 링크 태그 배우기  (21) 2008.03.29
    html 이미지 태그 배우기  (6) 2008.03.29
    html 마퀴태그 배우기  (5) 2008.03.29
    html 문자 크기 바꾸기  (2) 2008.03.29
    html 기본 태그  (2) 2008.03.29
    Posted by 승호/
    html 문서의 기본 속성입니다<<
    이 속성은 꼭 들어가야..
    html 페이지가 만들어지는거죠<<<

    <html>
    <head>
    <title>문서의 제목이 들어가는 곳 </title>
    </head>
    <body>
    웹 브라우저의 화면에 보여지는 내용


    </body>
    </html>


    나중에배울 스크립트나...
    그런것들은 모두 <head>   </head>
    사이에 들어가는거구요<<
    <body>   </body> 사이에는
    출력할 화면이 나타나는거니까..
    이것들만 잘 기억해두면 됩니다<<

    < > 사이의 슬래시 ( / ) 의 의미는....
    <html> = html이 시작되었다. [열다]
    </html> = html이 끝났다. [닫다]

    <head> = <head>가 시작되었다. [열다]
    </head> = </head>가 끝났다. [닫다]


    이런개념이죠<<

    일단 오늘은 여기까지...

    모두 외우도록합시다,<< ㄷㄷ;;;;

    'html 태그 배우기' 카테고리의 다른 글

    html 음악태그  (0) 2008.03.30
    html 테이블태그 배우기  (2) 2008.03.29
    html 링크 태그 배우기  (21) 2008.03.29
    html 이미지 태그 배우기  (6) 2008.03.29
    html 마퀴태그 배우기  (5) 2008.03.29
    html 문자 크기 바꾸기  (2) 2008.03.29
    html 기본 태그  (2) 2008.03.29
    Posted by 승호/