<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 승호/

댓글을 달아 주세요

  1. 진영아 2008.04.16 23:20  댓글주소  수정/삭제  댓글쓰기

    고마워요

  2. BlogIcon Syl 2008.04.17 00:50 신고  댓글주소  수정/삭제  댓글쓰기

    아아.. 감사합니다 ㅇㅅㅇ;
    일단은 댓글 다는곳에 그림넣었습니다~~

  3. BlogIcon 브레군 2009.01.04 12:50 신고  댓글주소  수정/삭제  댓글쓰기

    근데 ttf를 eot로 어떻게 바꾸죠?
    알아 보니깐 무슨 프로그램이 있다는데 없네요...

    • BlogIcon 승호/ 2009.01.04 21:21 신고  댓글주소  수정/삭제

      안녕하세요~^^ 들러주셔서 감사해요~^^

      ttf를 eot 웹픈트파일로 바꾸시려면
      Microsoft WEFT 프로그램을 이용하시면 됩니다~^^

  4. BlogIcon 브레군 2009.01.04 21:32 신고  댓글주소  수정/삭제  댓글쓰기

    WEFT라는 프로그램이 없다능...

제 블로그처럼..
홈페이지에서 마우스 커서가 바뀌는 태그 알려드리겠습니다...

관리자 -> 스킨 -> 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 승호/

댓글을 달아 주세요

  1. 2010.08.31 18:04  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2010.09.01 01:02 신고  댓글주소  수정/삭제

      필로그라는걸 접해본적이 없어서 잘 모르겠습니다만,,,
      정말 마우스 커서까지도 변경이 가능한가요...???
      (설마요..; 마우스 커서를 바꿔주는 스크립트를 허용하는건.. 티스토리말곤 없는걸로 알고있습니다...)
      괜찮으시다면 마우스 커서가 변경된 필로그의 주소를 알려주실 수 있을까요..? 연구해보겠습니다.

  2. 2010.09.01 20:28  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2010.09.01 23:35 신고  댓글주소  수정/삭제

      안녕하세요, 방금 확인했습니다.
      필로그 -> 관리 -> 디자인 탭의 아래에 보시면.
      상단 소개글 쓰기. 란이 있습니다.
      여기에 style 태그가 먹히더군요.
      <STYLE>body{cursor:url(마우스 커서.ani); }</STYLE>
      이렇게 마우스 커서파일인 ani 파일의 주소를 넣어 사용하시면 됩니다.

      (예를들면.. <STYLE>body{cursor:url(http://cfs.tistory.com/custom/blog/12/121120/skin/images/cursor.ani); }</STYLE>

      를 붙여넣고 적용하면 마우스 커서가 바뀌게 됩니다.

      자세한 스타일태그의 사용법은 검색해주세요~^^,,
      ( 스타일 태그를 통해 글씨체나 색상을 바꾸는방법은 쉽게 찾아보실 수 있습니다. )

  3. 미.. 2010.09.02 02:20  댓글주소  수정/삭제  댓글쓰기

    감사함니다. 소개글이 태그인줄은 몰랐습니다.ㄷㄷ
    이런걸 찾으시다니.. 어떻게 한건진 모르겠지만 ㄳㄳ..

  4. 2010.10.21 08:12  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2010.10.21 19:33 신고  댓글주소  수정/삭제

      으음,,,;
      XML오류날리가 없습니다. 괜찮으시다면 해당 파일을 jihansome@naver.com 으로 보내주세요~ 확인해보고 적용해서 보내드리겠습니다~

  5. 2011.01.03 04:09  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.01.03 19:42 신고  댓글주소  수정/삭제

      안녕하세요~ 들러주셔서 감사합니다~

      에에~ 파일노리의 필로그라...;
      써보지 않아서 잘 모르겠습니다만, 다른분이 적용하셨다면 아카펠님도 적용하실 수 있겠지요,,,

      으음... 마우스 커서를 변경하는 소스는
      <style>body{cursor:url(마우스 커서파일 주소.ani); }</style>
      입니다. head~/head 사이에 넣으시면 됩니다만,,,

      적어주신 마우스 커서 주소가... 알집파일이네요..; 커서파일을 홈페이지 등에 올려서 써먹어야합니다...
      즉, 호스팅받아서 홈페이지에 .ani파일을 업로드하여 사용해야한다는 말입니다
      혹시 티스토리에 아이디 있으신가요? 제 경우엔, 마우스 커서파일을 티스토리 스킨파일에 업로드하여 사용하고있습니다.

      네이트온으로 원격지원해드리겠으니, jihansome@naver.com 친구등록해주세요~ 접속 가능한 시간대 적어주시고요~

      // 열심히 배운건 아닙니다~^^;;; 독학..;; 간단한거지만요;

  6. BlogIcon 유우렌 2011.07.12 23:08 신고  댓글주소  수정/삭제  댓글쓰기

    혹시 텍스트나 링크가 걸린 개체 위에서도 포인터가 바뀌는 방법은 없을까요?

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

<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 승호/

댓글을 달아 주세요

  1. fdfds 2011.12.16 22:13  댓글주소  수정/삭제  댓글쓰기

    감사합니다.......................

<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 승호/

댓글을 달아 주세요

  1. BlogIcon 카이♪ 2008.04.09 08:00 신고  댓글주소  수정/삭제  댓글쓰기

    어렵다..;;
    이거 할려면 저걸 다 외어야 되는거야???

    • BlogIcon 승호/ 2008.04.09 13:07 신고  댓글주소  수정/삭제

      커헛...

      이걸 어떻게외워 ㅋㅋㅋ;;;

      필요할때 복사, 붙여넣기하는거야 ㅎㅎ;;;

      메모장파일에다가 종류별로 저장시켜놓고 따로따로 필요할때 붙여넣기한다는.. ㅎㅎ

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


<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 승호/

댓글을 달아 주세요

  1. 2009.07.14 22:29  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. BlogIcon 한소희 2009.07.14 22:29  댓글주소  수정/삭제  댓글쓰기

    아주좋아여

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

<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 승호/

댓글을 달아 주세요

  1. BlogIcon 하루히(울지마) 2008.04.06 17:42  댓글주소  수정/삭제  댓글쓰기

    하핫 ....ㅇㅅㅇ

    안녕하세요.....

    또 잠시 들렀다가 갑니다...

    역시 주말은 심심하네요..

    혼자 코스프레입고 놀아볼까 생각중....ㅇㅅㅇ
    (너 미쳤니 ..ㅇㅅㅇ)

    ㅎ 자주 방문 하겠습니다 ~!!!

  2. 쉽덕안티 2008.04.06 18:19  댓글주소  수정/삭제  댓글쓰기

    미친놈일세

  3. BlogIcon 카이♪ 2008.04.07 18:27 신고  댓글주소  수정/삭제  댓글쓰기

    흠..며칠 이런저런 일로 태그에 손을 못 댔더니
    다 잊어먹어가는것 같은걸..-_-a

    • BlogIcon 승호/ 2008.04.07 18:50 신고  댓글주소  수정/삭제

      ㅎㅎ;

      블로그꾸미려면 역시 스크립트건드리는게 쵝오야~<<ㅎ//

      스크립트만 잘 건드려주면 블로그 훨씬예뻐져연;; ㅠㅠ

  4. BlogIcon timelord 2010.07.17 12:49  댓글주소  수정/삭제  댓글쓰기

    정보 잘얻어가요 ㅎㅎ^
    공지를 띄워야하는대 팝업을 몰랐었내요 ㅋㅋ

  5. BlogIcon 카즈믹 2011.03.07 17:18 신고  댓글주소  수정/삭제  댓글쓰기

    감사합니다 ^^

  6. BlogIcon NewExP 2013.03.18 21:10  댓글주소  수정/삭제  댓글쓰기

    좋은스크립트 납치하고갑니다~ (?!)

    제사이트도 한번 들러주세요 ㅋㅋ;

    http://www.newexp.pe.kr/

    • BlogIcon 승호/ 2013.03.23 16:38 신고  댓글주소  수정/삭제

      NewExP 님//
      안녕하세요~^^ 링크 감사히 받았습니다~
      (글도 좀 써주세요~ ㅎㅎ,, 놀러가봤는데 뭔가 휑 해서 놀랬습니다 ㅎ)

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



<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 승호/

댓글을 달아 주세요

  1. 2008.04.10 18:36  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  2. 2008.04.10 18:36  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  3. BlogIcon 브레군 2009.01.04 12:54 신고  댓글주소  수정/삭제  댓글쓰기

    오 가져 가께요~~

  4. 아악! 2009.04.02 02:35  댓글주소  수정/삭제  댓글쓰기

    완전 감사해요~~~~~~~~~~

  5. BlogIcon 바비언냐 2010.12.02 23:42  댓글주소  수정/삭제  댓글쓰기

    잘 보고 갑니다^^ 많은 도움 되었어요

  6. 비공개 2014.08.02 20:06  댓글주소  수정/삭제  댓글쓰기

    잘쓸께요... 너무 좋다...ㅋㅋ

<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 승호/

댓글을 달아 주세요

  1. BlogIcon 하늘치B 2008.08.18 21:32 신고  댓글주소  수정/삭제  댓글쓰기

    긁기가 안되요 -ㅁ=!;;;;;ㅠㅠ

  2. BlogIcon 하늘치B 2009.01.08 19:09 신고  댓글주소  수정/삭제  댓글쓰기

    ㅋㅋ 감사해요 ^^

  3. BlogIcon Lemon27 2009.09.20 14:25  댓글주소  수정/삭제  댓글쓰기

    님.. 이거 네이버블로그에는 안되는거죠? 네이버가 자바스크립트 막아놨다던데...
    방법이 없을까요?? 아 요즘들어 자꾸 티스토리로 이사가고싶네요^^;;

    • BlogIcon 승호/ 2009.09.20 23:22 신고  댓글주소  수정/삭제

      네, 네이버 블로그 / 카페에서는 스크립트의 사용이 불가능합니다,
      아 티스토리로 이사오시고싶으시면, http://jihansome.tistory.com/guestbook 에 비밀글로 이메일주소 남겨주세요~ 초대장 보내드리겠습니다~^^

  4. BlogIcon degi 2011.06.29 19:51 신고  댓글주소  수정/삭제  댓글쓰기

    무지개 플러그인쓰면 전체가 다 ㅁㄴㅇㄹ 무지개색으로 변해서
    저는 일부만 하고 싶지만 귀찮아서 ㅁㄴㅇㄹ

    • BlogIcon 승호/ 2011.06.29 20:40 신고  댓글주소  수정/삭제

      degi 님//
      ㅎㅎ 전 익숙해졌달까... 무지개링크가 로딩시간 엄청 차지해도 뭐랄까... 차별화된 느낌이랄까요 ㅋㅋ~? (보급률 대단한 네이버 블로그엔 이런기능이 없잖아요~ ㅋㅋ~?)

    • BlogIcon degi 2011.06.30 09:53 신고  댓글주소  수정/삭제

      로딩시간이야 뭐 엄청나게까진 늘어나진 않아요 ㄷㄷ;;;;
      텍스트 링크로 이동되는 부분만 무지개색으로 변경시켜주는거니
      ㅁㄴㅇㄹ 여튼 간지나죠?? ㅋㅋㅋ

    • BlogIcon 승호/ 2011.06.30 16:11 신고  댓글주소  수정/삭제

      degi 님//
      조만간에 그냥 떼내려구요... ;ㅁ;
      링크에 마우스 올리면 뭔가 좀더 확 티나게 바뀌는 효과를 내고싶어졌어요.. ;ㅁ;

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 승호/

댓글을 달아 주세요

  1. 이전 댓글 더보기
  2. BlogIcon 승호/ 2008.04.01 23:34 신고  댓글주소  수정/삭제  댓글쓰기

    ㅎㅎ;;;
    부지런히까지야;;;

    프레임셋 태그 이거까지만 공부하면...
    다배웠다고쳐도 될껄;;???

    스크립트는 그냥 헤드랑 바디 사이에 붙여넣기만 하면 되니까....//
    ㅠㅠㅠㅠㅠㅠㅠㅠ
    이제 뭘로 블로깅해야할지 막막해졌어;;; ㅠㅠㅠㅠㅠㅠㅠㅠㅠ

  3. 2008.04.06 13:30  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2008.04.06 14:01 신고  댓글주소  수정/삭제

      네;;???

      마우스를 보내달라시는건..
      무슨뜻이신지.....///

      혹시 지금 제가쓰고있는 홈페이지 커서파일을 달라시는건지요<<???

  4. 2008.04.13 21:44  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  5. 2008.11.08 21:40  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  6. 2008.11.10 20:59  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  7. 2008.11.10 21:05  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  8. 2008.11.11 08:23  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  9. 쟈크란 2011.04.07 08:52  댓글주소  수정/삭제  댓글쓰기

    이거 구글 크롬플러스에서 되게 하는 방법은 없나요??
    익스플로러는 되는데.. 크롬플러스에서 하고 싶은데..ㅜㅜ

    • BlogIcon 승호/ 2011.04.07 21:32 신고  댓글주소  수정/삭제

      으음... 찾아봤는데 크롬버젼은 아직 안나온것같네요...;;; (T_T)
      IE를 위해서라도 달아두셔도 괜찮을듯 싶습니다.
      국내에서의 인지도 면에서는 IE가 주류이니까요..

  10. 쟈크란 2011.04.11 09:47  댓글주소  수정/삭제  댓글쓰기

    html5 하고 있는데 IE는 html5가 안되서요.. ㅎ..
    어쨋든 감사..ㅜ

    • BlogIcon 승호/ 2011.04.11 19:36 신고  댓글주소  수정/삭제

      아항 그렇군요!

      으음.. html5라...
      저도 슬슬 공부해야되는데.. ㅠㅠ,, 오랫동안 시간을 내기엔 아깝네요 ㅠㅠㅋ

      워낙 빨리빨리 바뀌어버려서 ㅠㅠㅠㅠ

  11. 2011.05.20 00:39  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 01:05 신고  댓글주소  수정/삭제

      안녕하세요~

      으음, 그부분에서만 특히 에러가 나는건가요..??

      소스에는 전혀 문제가 없습니다~
      구글 크롬이나 파이어폭스에서는 전혀 동작하지 않는 소스이지만, 익스플로러 6~9까지는 정상 동작하는 소스입니다.

      게시판에 넣으셨다고 하셨는데, 어느 사이트의 어느 게시판에 넣으시려던건지 말씀해주세요~

      게시판에는 대부분 스크립트 사용이 불가능합니다~
      body부분에 소스를 넣더라도 head부분에 소스를 직접 추가시킬 수 없는 형태의 게시판이 대부분입니다~

  12. 2011.05.20 10:55  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 12:01 신고  댓글주소  수정/삭제

      확인해보았습니다~

      에에.. 게시판형태네요~;
      소스는 비교적 자유롭게 허용되어 있는것 같네요,,

      위의 소스는 <head> 스크립트를 동시에 사용합니다.
      게시판에는 헤드부분을 수정&추가할 수 없구요,,^^,,,

      즉, 게시판에는 불가능합니다~

      만약 아이프레임이 사용가능하다면, 티스토리 블로그에 페이지를 만들어 그 페이지를 아이프레임 걸어두면 될 듯 하네요~^^,,

  13. 2011.05.20 12:21  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 12:30 신고  댓글주소  수정/삭제

      초대장은 일단 보내드렸습니다~


      혹시 모르니 먼저, 게시판에 테스트글을 하나 작성해보세요~


      <iframe src="http://cfs.tistory.com/custom/blog/12/121120/skin/images/random_suisenn.html" width="300" height="218" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>


      html 편집모드에서 위의 소스를 붙여넣기 해보시면 됩니다.

      뭔가가 나타나면 아이프레임을 사용할 수 있으니,
      먼저 테스트해보세요~


      // 아이프레임 사용이 불가능하면 다른 방법이 없네요..;
      아이프레임 사용가능하면 최대한 도움 드리겠습니다~


      아이프레임 관련글을 써둔게 있습니다~

      http://jihansome.tistory.com/416
      http://jihansome.tistory.com/49
      설명이 약간 어려운 감이 있는데,,
      참고가 되셨으면 좋겠네요~^^

  14. 2011.05.20 14:45  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 15:10 신고  댓글주소  수정/삭제

      ㅎㅎ 랜덤으로 출력되는 페이지인데 도시락이 떴군요 ㅎㅎ,,



      네, 사용 가능합니다~

      단, 페이지 전체가 아닌 지정한 영역에만 사용이 가능합니다.
      html에 관한 지식은 어느정도 갖고계신가요,,?

      으음,, html 문서를 제작하여 티스토리 스킨폴더에 올리고나서 -> 게시판에 아이프레임으로 출력해야 하는데,,

      일단은 html 문서를 제작해야 합니다~

      으음,,,
      어떻게 도와드려야할지...

      으음...

      아,
      블로그 개설하셨지요~?
      공개로 글 하나를 작성해주세요~
      위의 스크립트를 삽입하여 컨텐츠 페이지(html문서)를 제작해서 아까 적어주신 이메일로 최대한 빨리 보내드리겠습니다~^^,,


      html 제작환경 크기 지정을 위해, 어느 게시판에 올리실건지 주소를 남겨주세요~

  15. 2011.05.20 19:38  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 19:43 신고  댓글주소  수정/삭제

      앗, 글이 비공개상태네요~^^;;

      공개로 전환해주세요~^^


      // 댓글로 질문해주신것만으로도 제가 오히려 감사합니다 ㅎㅎ,,

  16. 2011.05.20 20:47  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 21:02 신고  댓글주소  수정/삭제

      앗, ㅎㅎ죄송합니다;

      제 설명이 부족했나보네요 ㅠㅠ

      http://busan1room.co.kr 사이트에 올리실 글을 블로그에 먼저 작성해 달라는 말이었는데..; (죄송합니다;)

      // 위의 스크립트와 작성하실 내용을 합쳐넣어야 html문서가 완성되고, 그 페이지를 아이프레임으로 연결시켜야 하는 형태라서요~


      // 매물 상세정보 -> 홍보사항에 들어갈 내용을 작성하실 예정이신건가요,,?

  17. 2011.05.20 21:01  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 21:18 신고  댓글주소  수정/삭제

      일단 제작해서 이메일로 보내드렸습니다~


      이미지 크기가 좀 작은것같은데..
      게시판에 비해 크기가 작지 않나요,,?

      가로크기 780px정도가 적당할것같은데,,
      더 큰 이미지가 있으시면 보내주시기 바랍니다~^^,,



      게시판에는
      <iframe src="http://cfs.tistory.com/custom/blog/12/121120/skin/images/busanhsm_h01.html" width="780" height="470" border="0" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
      위의 소스를 붙여넣으시면 됩니다~

  18. 2011.05.20 21:39  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 승호/ 2011.05.20 21:50 신고  댓글주소  수정/삭제

      ㅎㅎ 전 별거 안했습니다~^^;;;;


      에에, 수정하시려면 busanhsm 님 블로그에 직접 파일들을 업로드해 두셔야 합니다~
      지금은 주신 소스들로 html파일을 만들어서 제 블로그에 전부 업로드시켜놓고 사용하도록 했습니다.
      적어주신 이미지 파일도 네이버 블로그에 첨부되어있어서 외부 페이지에서 사용이 불가능했기에, 제 블로그에 재업로드해서 사용했습니다

      따라서, 저를 거치지 않고 직접 수정하시려면 busanhsm 님 블로그에
      html 문서와 이미지파일을 새로 업로드해두셔야 하고,
      방금 드린 아이프레임 소스를 약간 수정하셔야 합니다~
      약간 번거로운 과정을 거쳐야 하는데,
      원하시면 최대한 자세히 알려드리겠습니다~

      // 네이트온 사용하시나요? 원격지원으로 도움드리면 더 빨리 해결할 수 있을것같네요~^^,,

  19. 2011.05.20 22:22  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  20. 정말감사합니다^^ 2011.05.20 22:59  댓글주소  수정/삭제  댓글쓰기

    정말 감사합니다^^

    아..정말..감동먹었습니다..

    자주 놀러올꼐요^^

  21. BlogIcon 필명♬ 2011.09.04 01:00 신고  댓글주소  수정/삭제  댓글쓰기

    저기 일정한 무언가를 클릭하면 해당 메시지가 사라지게 하는 것 좀 가르쳐주실 수 있으신가요?

    • BlogIcon 승호/ 2011.09.04 01:59 신고  댓글주소  수정/삭제

      래픽♬ 님//
      답변이 늦어져서 정말 죄송합니다~
      여러모로 테스트까지 해보느라고 늦어버렸네요~;;

      메시지가 약간 거슬리긴 하죠~ ;ㅁ;
      그냥 일정 어딘가를 클릭하지 않고도 아무데나 클릭하면 메시지가 안보이도록 스크립트 짜봤습니다.

      위의 소스에서 </body> 바로 윗줄에 아래의 소스를 붙여넣어주세요~

      <script>
      function showspan(v){
      document.all('span').style.display='';
      }
      function hidespan(){
      var a=document.all.tags('span');
      for(i in a) {
      if(a[i].id)
      a[i].style.display='none';
      }
      }
      document.body.onclick=function(){
      if(!event.srcElement.id)hidespan();
      }
      </script>

      테스트가 약간 허술(;?)하긴 했지만..;
      아마 잘 될겁니다~ㅇㅂㅇ~

이번에는 저번에 배웠던 프레임셋에 대해서.
연습만 해봅시다,,<<
<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 승호/

댓글을 달아 주세요

  1. BlogIcon 카이♪ 2008.03.30 00:58 신고  댓글주소  수정/삭제  댓글쓰기

    오~다음주부턴 태그나 배워봐야겠다^^
    다음주에도 기대할게~

하이퍼링크.
다른 문서나 미디어 파일을 연결(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 승호/

댓글을 달아 주세요

  1. BlogIcon 오즈막가 2008.06.27 17:20 신고  댓글주소  수정/삭제  댓글쓰기

    저기요 제가 다음메일을 업로드해서 링크로 올릴건데 어떻게 해야함?? 애니메이션 그냥 주소말고 이것처럼 할려면 !

    • BlogIcon 승호/ 2008.06.28 00:45 신고  댓글주소  수정/삭제

      거의 대부분 메일들에서는 로그인 해야 메일에 있는 파일이 받아집니다.
      외부 링크 걸어놔 봤자 아무것도 안뜨게되고요,,
      한마디로 링크걸어도 아무소용 없습니다...

      메일로 링크거는건 100%불가능합니다..
      애니메이션 파일을 올려서 링크시키시려면...

      계정을 하나 사셔야 할듯 싶네요..
      블로그도 파일 제한용량있는데 분할압축도 안되니...

      답변 도움 되셨으면 좋겠네요

  2. BlogIcon 오즈막가 2008.06.27 17:24 신고  댓글주소  수정/삭제  댓글쓰기

    저기요 외부 멀티미디어 링크 어캐하죠?

    • BlogIcon 승호/ 2008.09.18 18:41 신고  댓글주소  수정/삭제

      외부링크는 파일 형식별로 모두 다릅니다.
      플래시 미디어 링크는 몇백자의 소스가 필요합니다..
      미디어, 이미지 링크 등.. 모두 다릅니다..

  3. BlogIcon zzz 2010.04.26 21:48  댓글주소  수정/삭제  댓글쓰기

    우와... 프레임셋을 나눠놔서 자꾸 메뉴에서 이동되서 어찌하나 찾았는데 찾았네요 ㅎㅎ
    감사합니다.
    그런데 되지를 않네요...
    이건 프레임셋 나눠논 소스인데.. 프레임네임이 뭐지요..?

    <html>
    <head>
    <title>김용래의 홈페이지에 오신것을 환영합니다!</title>
    <META HTTP-EQUIV="keywords" CONTENT="김용래의홈페이지,김용래의 홈페이지,김용래의 홈페이지에 오신것을 환영합니다!,김용래의홈페이지에오신것을환영합니다!,김용래의홈페이지에오신것을환영합니다,김용래의 홈페이지에 오신것을 환영합니다.">
    <META HTTP-EQUIV="Description" CONTENT="김용래의 홈페이지입니다. 어서오세요!">
    </head>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function pop() {
    window.alert("/n김용래의 홈페이지에 오신것을 환영합니다!/n");
    }
    //-->
    </SCRIPT>
    <FRAMESET ROWS="130,*">
    <FRAME SRC="top.html"NORESIZE SCROLLING="no">
    <FRAMESET COLS="225,*">
    <FRAME SRC="menu.html"NORESIZE SCROLLING="no">
    <FRAME SRC="main.html"NORESIZE SCROLLING="auto">
    </FRAMESET>
    </FRAMESET>
    <BODY onload="pop()">
    <P ALIGN="center">
    </P>
    </BODY>
    </html>

    • BlogIcon 승호/ 2010.04.26 21:54 신고  댓글주소  수정/삭제

      안녕하세요~ 들러주셔서 감사합니다~

      프레임 네임이라..

      일단 프레임 네임을 지정하셔야 사용이 가능합니다..
      예를 들어
      <FRAME SRC="menu.html"NORESIZE SCROLLING="no">
      의 소스에 네임 속성을 추가..
      <FRAME SRC="menu.html" name="hellow" NORESIZE SCROLLING="no">
      하시는 겁니다.

      그리고 다른 프레임에서 링크의 타겟을 hellow 로 지정하면 menu.html 페이지 부분의 프레임에서 이동되게 하는 원리이지요~/

      도움이 되었으면 좋겠습니다~
      질문해주시면 가능한한 빨리 답해드릴수 있도록 하겠습니다~
      좋은하루되세요~

  4. BlogIcon 잿빛위묘 2013.10.16 19:38 신고  댓글주소  수정/삭제  댓글쓰기

    표에 target=xxx에 있는 예에서 오타가 생겼네요... ㅋㅋ target을 targer이라고 치셨다는!!

    포스팅 잘보고갑니다! ㅋㅋ 그런데 embed로 된 음악 소스에서 링크로 파일을 다운로드 받게 하려고 하니까 안되네요 ㅋㅋ

    • BlogIcon 승호/ 2013.10.16 22:21 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      앗, 감사합니다~! 수정했습니다~^^

      음/... embed.. 글세요 무슨말씀이신지 잘 모르겠어요^^

    • BlogIcon 잿빛위묘 2013.11.10 22:47 신고  댓글주소  수정/삭제

      음... 그러니까 <embed> 태그로 입력된 주소로 음악파일이 있는데요 그걸 <a href> 태그로 링크해서 공유하려니까 그냥 embed로 연결된것처럼 되버리네요... 'ㅅ'... 뭐 방법 없을까요...?

    • BlogIcon 승호/ 2013.11.11 21:51 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      음,, 그게 브라우저&사이트에 따라 다를겁니다..; 네이버에 올리신 음악들인가요? 티스토리인가요..?

      별도 스크립트를 써야되는걸로 알고있습니다,,,
      (아니면 링크로 들어가진 화면에서 마우스 우클릭, 다운로드하면 됩니다...)

    • BlogIcon 잿빛위묘 2013.11.13 20:56 신고  댓글주소  수정/삭제

      네이버도 그렇고 다음도 그렇고 이글루스도 그렇고 티스토리도 그렇네요...

      음악이 저작권법 때문에 다운로드를 받을 수 없도록 조취를 해놔서 저작권에 자유로운 음악도 공유가 불가능해지다니...

    • BlogIcon 승호/ 2013.11.14 08:39 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      뭐든 구하려고 마음만 먹으면 어떻게든 구할수 있는데 굳이 이렇게까지 해야되는건지 모르겠네요 ㅎㅎ...
      랄까 한국음악 안듣는 1인...;;
      요즘엔 어찌돌아가고있는지 전혀모르겠네요 ㅎㅎ;;;

    • BlogIcon 잿빛위묘 2013.11.18 11:47 신고  댓글주소  수정/삭제

      킁... html은 점점 발전하는데 제 두뇌는 열심히 퇴보중이네요...ㅠㅂㅠ

    • BlogIcon 승호/ 2013.11.21 08:29 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      그러고보니 HTML 5가 나온지 꽤 됐었죠아마..;;??

      진짜 매일같이 다뤄주지않는이상 뒤쳐질수빆에 없는것같아요... ㅡㅁㅡ

    • BlogIcon 잿빛위묘 2013.11.22 22:48 신고  댓글주소  수정/삭제

      그러게요... 저도 HTML4로 공부했었는데... 요즘은 5가 대세라죠? (키득)

    • BlogIcon 승호/ 2013.11.24 22:44 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      예전에 대충 봤었는데 저게 정말 HTML 맞는지 싶었어요 ㅠㅠ...
      책도 사뒀는데 너무 난해해서 방치중이네요ㅋ;;;

    • BlogIcon 잿빛위묘 2013.11.30 13:34 신고  댓글주소  수정/삭제

      저는... 사이트에서 공부한지라...

    • BlogIcon 승호/ 2013.12.02 00:11 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      저도 책사보는건 처음인데 책체질이 아닌지 돈낭비만해버린것같더라구요 ㅎㅎ..;;
      컴퓨터공부는 역시 컴퓨터로해야 정석이죠 ㅎㅎ

    • BlogIcon 잿빛위묘 2013.12.13 17:44 신고  댓글주소  수정/삭제

      하핳 해보지 않고는 어떤건지 알기 힘들죠!

    • BlogIcon 승호/ 2013.12.14 11:55 신고  댓글주소  수정/삭제

      잿빛위묘 님//
      컴퓨터보다는 영어공부가 더 시급할것같아서 틈틈이 영어 좀 듣기 시작했습니다..;;;

      빠득빠득.. 영어... 빠득빠득...

    • BlogIcon 잿빛위묘 2013.12.16 11:31 신고  댓글주소  수정/삭제

      이;;;이갈이;;; 허허

이번에는 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 승호/

댓글을 달아 주세요

  1. BlogIcon 카이♪ 2008.04.03 21:12 신고  댓글주소  수정/삭제  댓글쓰기

    근데..말이지..
    이미지 주소는 어떻게 아는거야???
    그리고 웹에 올려진 것만 가능한거야?

    • BlogIcon 승호/ 2008.04.03 21:56 신고  댓글주소  수정/삭제

      만약에 티스토리에 하스군이 이미지를 올리면은..
      포스트에 이미지가 뜨잖아<<
      그 이미지에서 마우스 오른쪽 클릭하고 속성...
      보면은 주소 있어...

      네이버는 주소 짧게 .jpg 이렇게 나오는데...
      티스토리에 이미지 파일 올리면 이름이 좀 길어져서... 헷갈리긴 하지;; ㅎㅎ///
      그 주소 복사,붙여넣기 하면 되<<<


      ㅠㅠㅠ 답글 늦어서 미안.. ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ

  2. BlogIcon Syl 2008.04.15 00:08 신고  댓글주소  수정/삭제  댓글쓰기

    저기요~ 궁금한게 있는데요.. 이렇게 댓글 다는곳에 그림넣는건 어떻게 하죠 ㅇㅅㅇ?

    • BlogIcon 승호/ 2008.04.15 00:47 신고  댓글주소  수정/삭제

      블로그 들러주셔서 감사합니다~^^//
      덧글부분에 이미지 넣는거 간단한 방법은 아니지만..

      일단 가르쳐드릴께요<<
      성공하시길 바랄께요<<
      일단 제 글 끝까지 보시고 나서 수정바랍니다<<

      티스토리 스킨관리 페이지 들어가시면 html 과 스타일시트 수정부분이 있을껍니다..
      아래쪽. 스타일시트 수정부분으로 가셔서요..
      거의 아래쪽에 아래와 같이...
      .comment { width:/*@post-width:-98=*/ 700px /*@*/; margin-left: 15px; overflow: hidden; }
      .comment p { margin:3px 0 0 0; padding:0;}
      .comment h3 { display:none; }
      .comment ol,
      .comment ul { padding: 0; margin: 0; }
      .comment ol li { padding: 3px 0; border-bottom:1px solid #fff; }
      .comment li ul li { padding:5px 10px 5px 35px; background:url("images/iconReComment.gif") no-repeat 12px 6px; border:none;}

      !여기까지는 절대로 건드리지 마시길 바랍니다<<!
      !이미지 삽입 후에 크기조절해주세요<<!


      이 부분 있을껍니다... 확실히 있습니다<<
      이 밑부분에 수정/추가시킵니다....
      .commentWrite 나 .commentWrite input 부분이 없으면 추가시켜주세요<<
      아래와 같이요<<


      /* 댓글부분 백그라운드 ( 배경 ) 이미지 부분 */
      .commentWrite { padding-top:10px; }
      .commentWrite input { width:100px; font:1em Dotum, Arial, sans-serif; padding:7px 0 0 7px;line-height:30px; height:18px;}
      .commentWrite .homepage { width:300px; font:1em Dotum, Arial, sans-serif; line-height:30px; margin-bottom:2px;}
      .commentWrite textarea { background:url( 이미지 파일 주소 );
      andle=; width:/*@post-width:-22=*/ 500px /*@*/; padding:0px; position:relative; font:1em Dotum, Arial, sans-serif; line-height:18px;}
      .commentWrite .submit { background:url(./images/btn_comment.gif) no-repeat; width:150px; height:23px;
      .commentWrite label { position:absolute; margin-top:5px;}
      .commentWrite .secretWrap label { position:absolute; margin-top:1px;}
      .commentWrite .checkbox { border:none; padding:0; margin:0; width:25px;}
      .commentWrite label { padding-bottom:3px;}


      맨 위의
      /* 덧글부분 백그라운드 ( 배경 ) 이미지 부분 */
      이부분은 써넣으시지 않으셔도 됩니다<<
      저는 나중에 수정하기 쉽도록 정리해둔것뿐이라는... ㅎㅎ;;;


      .checkbox 나 label 부분이 이미 있으면 그부분들은 바꾸지 마세요<<
      블로그 기본스킨 에 따라서 덧글쓰는 부분은 크기차이가 있습니다<<
      스타일시트 파일이 다르기때문이라죠,,,
      덧글부분에 맞춰서 이미지를 제작해주시던가,,
      이미지에 맞춰서 덧글부분 크기를 바꿔주셔야할겁니다<<
      syl 님의 댓글부분은 높이만 좀 줄이시면 되겠네요<<
      이 크기에 맞춰서 이미지제작하시는게 가장 무난하실겁니다<<


      !!!!!!!!주의사항!!!!!!!!!
      스타일시트 파일 수정하시기 전에!!<<
      메모장 파일에 통째로 붙여넣기, 저장시켜놓고 수정하세요!!/
      잘못되면 스킨 통째로 날아가서 다른 추가부분 다 잃어버리게된다는<< ㅎㅎ;;;
      도움 되셨는지요<<???
      성공하시길 바라구요~<<^^<<
      잘 안되시면 제 블로그에 안부글로 부탁드릴께요~^^//

      링크 가져가겠습니다~<<

  3. BlogIcon wannapeace 2013.07.23 00:19 신고  댓글주소  수정/삭제  댓글쓰기

    이미지 안에있는 버튼을 누르면 원하는 링크로 이동하게하는건 어케하는건가요???

    • BlogIcon 승호/ 2013.07.23 19:10 신고  댓글주소  수정/삭제

      wannapeace 님//
      혹시 이미지맵태그찾으시나요~? 이미지맵은 나모웹에디터 등 프로그램 쓰셔야 쓰기 편하답니다 ㅎㅎ,,

이번에는 글씨를 움직이게하는..
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 승호/

    댓글을 달아 주세요

    1. BlogIcon 카이♪ 2008.04.02 22:37 신고  댓글주소  수정/삭제  댓글쓰기

      이건 좀 복잡한데..;;;
      근데..배경 넣은상태에서 방향까지 집어넣을려면 어떻게 해야되는거야?
      (두개이상 명령을 입력할때..말이지..^^)

    2. BlogIcon 승호/ 2008.04.03 15:45 신고  댓글주소  수정/삭제  댓글쓰기

      ㅎㅎㅎ;

      늦은시간까지,,, ㅠㅠ/
      하스군 수고했어연~<<

    3. BlogIcon zzzj 2008.12.06 11:34 신고  댓글주소  수정/삭제  댓글쓰기

      왼쪽으로 가셔야되는데 오른쪽으로 가는 시츄에이션..;; 뭐어쨋든 잘보고 갈께요^^

    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 승호/

    댓글을 달아 주세요

    1. BlogIcon 카이♪ 2008.04.02 22:34 신고  댓글주소  수정/삭제  댓글쓰기

      문자태그 완료~!!

    2. BlogIcon 승호/ 2008.04.03 12:23 신고  댓글주소  수정/삭제  댓글쓰기

      ㅎㅎ;

      엄청빨리배우넴;;; ㄷㄷ;;; ㅠㅠㅠㅠㅠㅠㅠㅠ

    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 승호/

    댓글을 달아 주세요

    1. BlogIcon 카이♪ 2008.04.02 22:31 신고  댓글주소  수정/삭제  댓글쓰기

      이건 쉽구나~

    2. BlogIcon 승호/ 2008.04.03 12:21 신고  댓글주소  수정/삭제  댓글쓰기

      ㅎㅎ///
      설명 엄청 이상하게해버렸는데;;; ㅠㅠ/
      설명 괜찮았어;;??? ㅠㅠ;;???