'2008/01/19'에 해당되는 글 55건

  1. 2008.01.19 이뿐거...
  2. 2008.01.19 IE6.0에서 추가된 스타일
  3. 2008.01.19 순서대로 포커스 주기
  4. 2008.01.19 한글로 된 파일이 다운로드가 안됩니다. 또는 이미지가 X로 보일경우.
  5. 2008.01.19 마우스 오버시 소리나게 하기(사운드)
  6. 2008.01.19 음악재생시 윈미플에서 나오는 시각화 효과
  7. 2008.01.19 알아두시면 유용한 간단한 스타일 시트
  8. 2008.01.19 IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음)
  9. 2008.01.19 글자 또는 배경등에 그라데이션 적용하기.
  10. 2008.01.19 글자 사이 중간 점 찍기 (ex. O·S·T)
  11. 2008.01.19 input 태그에 공지글 미리 넣기
  12. 2008.01.19 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility
  13. 2008.01.19 이미지를 문서에 삽입하지 않고 새창으로 띄우기.
  14. 2008.01.19 inupt 태그에 밑줄만 넣는 방법입니다.
  15. 2008.01.19 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리..
  16. 2008.01.19 글자 위에 조그맣게 주석다는거..(익스 전용)
  17. 2008.01.19 프레임 문서에서 경계선 테두리 두르기
  18. 2008.01.19 글씨를 세로로 써봅시다...^_^
  19. 2008.01.19 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자.
  20. 2008.01.19 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자.
  21. 2008.01.19 a 링크 태그 말고 다른 태그로 링크해보장.
  22. 2008.01.19 음악파일 동영상을 내가 원하는 부분만 재생시켜보자.
  23. 2008.01.19 필터를 적용한 칼라버튼.[ie5.5 sp2이상]
  24. 2008.01.19 페이지마다 타이틀 변경하기
  25. 2008.01.19 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기

이뿐거...

인터넷관련 2008. 1. 19. 09:31

<div id="layer1" style="position:absolute; left:120px; top:28px; width:180px; height:330px; z-index:1;">

<marquee behavior=alternate direction=up scrolldelay="100"  width="150" height="200">
<marquee behavior=alternate direction=left scrolldelay="100">
<table width=70 height=70 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:blue;" align="center">
       <span style="font-size:12pt;color:white"><b>카</b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100"  width="130" height="120">
<marquee behavior=alternate direction=left scrolldelay="100">
<table width=70 height=70 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:FF33CC;" align="center">
       <span style="font-size:12pt;color:white"><b>멜</b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100"  width="75" height="90">
<marquee behavior=alternate direction=right scrolldelay="100">
<table width=60 height=60 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:#238E23;" align="center">
            <span style="font-size:14pt;color:white"><b>롯</b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100" width="120" height="150">
<marquee behavior=alternate direction=right scrolldelay="100">
<table width=50 height=50 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:#3232CD;" align="center">
            <span style="font-size:14pt;color:white"><b>의</b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100"  width="130" height="130">
<marquee behavior=alternate direction=right scrolldelay="100">
<table width=70 height=70 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:#FFFF00;" align="center">
            <span style="font-size:14pt;color:white"><b>소</b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100"  width="75" height="90">
<marquee behavior=alternate direction=right scrolldelay="100">
<table width=60 height=60 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:#238E23;" align="center">
            <span style="font-size:14pt;color:white"><b>스</b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100" width="120" height="120">
<marquee behavior=alternate direction=right scrolldelay="100">
<table width=50 height=50 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:#3232CD;" align="center">
            <span style="font-size:14pt;color:white"><b>천</b></b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

<marquee behavior=alternate direction=up scrolldelay="100"  width="130" height="200">
<marquee behavior=alternate direction=right scrolldelay="100">
<table width=70 height=70 border=0>
   <tr>
      <td style="filter:alpha(style=2);background-color:#FF00FF;" align="center">
            <span style="font-size:14pt;color:white"><b>국</b></b></span>
      </td>
   </tr>
</table>
</marquee>
</marquee>

</div>
Posted by 알 수 없는 사용자
,

http://oxtag.com/html/ex/text22.html

1. min-height
웹 사이트를 개발할 때에 우선은 제대로 보여주는 것이지만 이제는 방문자가 기다리는 시간을 얼마나 짧게 하느냐도 신경을 써야 할것입니다.

<table border="1" style="table-layout:fixed; width:300;">
<tr><td style="height:103px; background-color:lightgreen">
여기는 테이블(td)의 높이를 height로 내용보다 작게 지정한 경우 입니다. 물론 table-layout을 fixed로 사용하는 경우입니다. 보통은 이 fixed를 지정하지 않고 자동(auto)으로 사용하는데, 편리하지만 무척이나 느립니다.
</td></tr>
<tr><td style="min-height:40px; background-color:lightblue">
여기는 테이블(td)의 높이를 min-heignt로 내용보다 작게 지정한 경우 입니다. 비록 table-layout을 fixed로 사용하였다 하더라도 적어도 안의 내용은 다 보여줍니다. 마치 table-layout을 auto로 사용한 것 처럼이요.
</td></tr>
</table>

2. text-overflow
박스나 테이블안에서 글이 너무길어 잘리는 경우가 발생할 수 있다.
이 경우에 쓰는 스타일로 새로 생긴 것이다.

매우 많은 태그에서 사용할 수 있으니 기억해 두는 것도 좋을 것입니다.
사용가는 태그: A, ACRONYM, ADDRESS, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, CUSTOM, currentStyle, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, hn, I, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, OL, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TEXTAREA, TT, U, UL, VAR, XMP

사용할 수 있는 값은 아래와 같다.
"clip"이 기본값으로 넘어가는 부분은 가차없이 잘라버린다.
"ellipsis" 요것때문에 새로 생긴 것으로 뒤에 생략기호(...)를 보여준다.



<b>style="text-overflow:clip; overflow:visible; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:visible; text-overflow:clip">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

<b>style="text-overflow:ellipsis; overflow:visible; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:visible; text-overflow:ellipsis">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

<b>style="text-overflow:clip; overflow:hidden; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:hidden; text-overflow:clip">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

<b>style="text-overflow:ellipsis; overflow:hidden; width=120"</b>
<div style="width:120px; height:50px; border:1px solid blue; overflow:hidden; text-overflow:ellipsis">
<nobr>글이 만약 주어진 칸보다 길어서 잘리게 된다면 어떻게 보여질까요?</nobr>
</div><br>

3.word-spacing

단어간의 간격을 조정합니다.

<style>
span.spacing{word-spacing: 10;}
</style>

<script>
function fnChangeSpace(){
oSpan.style.wordSpacing=oSelSpace.options[oSelSpace.selectedIndex].text;
}
</SCRIPT>

<select id="oSelSpace" onchange="fnChangeSpace()">
<option>1
<option>2
<option>7
<option selected>10
<option>15
<option>20
<option>25
<option>30
<option>35
</select>
<span id="oSpan" class="spacing">단어간에 간격을 원문을 수정하지 않고 조정하는 조정합니다. 잘 될까요?</span>  


Posted by 알 수 없는 사용자
,

http://oxtag.com/html/ex/tabindex.html

미리보기 참고하세요. 인풋 태그가 아니더라도 기타 태그에도 사용할 수 있습니다.

로그인 같은 경우...
탭을 누르면 ID -> PASSWORD -> LOGIN 순으로 가야 입력하기 편하죠.

<input type=text name=user_id value='' size=9 class=input>
<input type=password name=password value='' size=9 class=input>
<input type=checkbox name=auto_login value=1 onclick=check_autologin()>

이렇게 되었을때 간혹 탭키를 누르면 포커스가 이상한 곳으로 가는 경우가 있습니다.
이럴때는 tabindex 속성을 사용합니다.

<input type=text name=user_id value='' size=9 class=input tabindex=1>
<input type=password name=password value='' size=9 class=input tabindex=2>
<input type=checkbox name=auto_login value=1 onclick=check_autologin() tabindex=3>

Posted by 알 수 없는 사용자
,
많은 분들이 아시는 것이지만. 그냥 혹시나 모르시는 분들을 위해서...^^

인터넷 익스플로러 5.x 이상에서 한글로 된 URL 및 파일명을 표시하지 못할 수도 있습니다.

웹브라우저의 설정을 확인해 보세요.

인터넷 익스플로러 메뉴의 [도구] -> [인터넷 옵션] -> [고급] 으로 이동합니다.
[고급] 항목 중 [탐색 설정] 부분의 "URL을 항상 UTF-8로 보냄(다시 시작필요)" 의 체크를 제거 하고.
[확인] 버튼을 누릅니다. 실행되어 있는 인터넷 익스플로러를 모두 닫은 후, 다시 인터넷 익스플로러를 실행합니다.

※ UTF (Universal Transformation Format)

UTF는 16 비트 유니코드 문자들을 7비트 혹은 8 비트 문자로 변환하기 위한 방법 입니다.

UTF-7은 7 비트메일 시스템을 통한전송을 위해 7 비트 아스키 문자로 변경하는 것이고,

UTF-8은 유니코드를 8 비트 문자로 변경하는 것입니다.

한글URL을 사용하는 사이트의 서버가 대부분 UTF-8로 인코딩된 URL을 처리할 수 없으므로 한글 버전에서는

기본적으로 이표준 사용을 해제합니다.

Posted by 알 수 없는 사용자
,
<bgsound src="#" ID=music loop=1 AUTOSTART=true>

<a href="#" onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</a>

<span onMouseOver="document.all.music.src='http://oxtag.com/html/music/wav/just.wav'">마우스를 올려보세요.</span>

앵커태그 및 스판태그등.. 여러가지 태그에 위 소스를 사용하시면 됨니다.

테스트는 드래그 복사 후 태그연습장에서....
Posted by 알 수 없는 사용자
,

음악재생시 윈미플에서 나오는 시각화 효과

<object id="player" width="300" height="100" CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="URL" value="mms://211.216.46.21/wma/23000/23387.wma">
<!--소스URL-->
<param name="autoStart" value="true"><!--자동재생-->
<param name="uiMode" value="none"><!--User Interface 모드-->
<embed name="player" width="0" height="0" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"
src="mms://211.216.46.21/wma/23000/23387.wma">
</embed>
<!--미디어플레이어7.1 이하를 사용하고 있을경우 embed 태그로 플레이-->
</object>
Posted by 알 수 없는 사용자
,
style="border-width: 1px 1px 1px 1px;border-style:none solid none solid;border-color: #ff0000 #ff0000 #ff0000 #ff0000;"

BORDER 4곳을 길게 쭉~~~ 써서 적을 필요없이 나타내는것 입니다..
각각 차례대로 top,right,bottom,left 입니다. 끝에 색상을 지정하지않으시면 기본적으로 회색비스무리한 색
아시죠? 기본적인보더색상..그걸로 나타납니다..^^

그리고 음...margin 이나 padding 쓸때도 이같은 방법을
이용할수 있습니다..
아래와 같이.^^

style="margin: 10px 0px 0px 0px;"

style="padding: 6px 12px 16px 12px;"


이 방법은 익스플로러6/넷스게이프7프리뷰/모질라1.0/오페라6.01에서 테스트해본결과 모두 잘됩니다.

<html>
<head>
</head>
<body>
<table style="border-width: 1px 1px 1px 1px;border-style:none solid none solid;border-color: #ff0000 #ff0000 #ff0000 #ff0000;">
<tr>
<td>
가나다라아자차카타파하
</td>
</tr>
</table>
</body>
</html>
Posted by 알 수 없는 사용자
,
익스플로러6에 등장한 이미지 툴바란 기능이 홈페이지 브라우징에 방해가 될때가 있죠?
특히 소스보기 금지 태그를 사용하는 사이트나 마우스 오른쪽 금지를 시키는 사이트에서....

이미지 툴바란 이미지 위에 마우스가 올라가면 저장,프린트,메일 등의 아이콘이 뜨는 기능입니다.
물론 앵커 태그로 둘러싸여 있거나 작은 사이즈일 경우는 나타나지 않지만......
어쨌든 이 기능을 disable 시켜주는 태그를 소개합니다.

첫번째는 메타 태그로 head 태그 내에 다음과 같이 써줍니다.

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

두번째는 이미지 태그의 속성으로 다음과 같이 써줍니다.

<IMG src="무지잘생긴내사진.jpg" width="500px" height="450px" GALLERYIMG="no">

이미지 전체에 적용하려면 첫번째 방법을 특정 이미지에만 적용하려면
두번째 방법을 쓰시면 되겠죠..

메타태그에 사용 후... 특정 이미지에 이미지 도구 모음이 나오게 하려면...

<img src="무지잘생긴내사진.jpg" width="500px" height="450px" galleryimg="yes">
Posted by 알 수 없는 사용자
,

http://oxtag.com/html/ex/gradient.html

http://oxtag.com/html/ex/gradient_filter.html


소스와 미리보기는 링크를...

※ 간단한 옵션값 설명 ※

opacity : 투명 적용 시작부분의 투명도를 설정하는 부분입니다.
finishopacity : 투명도가 끝나는 지점의 투명도를 설정하는 부분입니다.

style :
1으로 설정하시면 fade 효과가 직선형으로 적용됩니다.  
2으로 설정하시면 fade 효과가 타원형으로 적용됩니다.
3으로 설정하시면 fade 효과가 원추형으로 적용됩니다.

startX, startY :: 효과가 시작되는 X지점(가로)과 Y지점(세로)의 위치를 설정하는 곳입니다.
finishX, finishY :: 효과가 끝나는 끝지점을 나타냅니다.

height, weight 옵션을 반드시 px 단위로만 조절하시길....
% 단위로 하면 효과가 이상하게 적용됩니다.
Posted by 알 수 없는 사용자
,
<font style=font-family:돋움;font-size:9pt>글 작성시 마침표가 아닌 중간에 dot 가 필요할때가 있을것입니다.
O·S·T 이것과 같이 가운데 점이 보이죠?
이럴때는 &middot; 라는 것을 삽입시켜 주세요.
O&middot;S&middot;T

또는

ㄱ 입력하시고 한자 누르면 화살표로 고를수 있습니다.</font>
Posted by 알 수 없는 사용자
,
좀 길죠. 공지글 미리 집어넣고 마우스 오버시 사라짐니다. 글 쓰기 전까지 유지.
아래 소스를 마우스 드래그 후 Ctrl + C 로 복사해서 태그연습장에서 실행해보세요.

<input type=="Text" value="공지글 미리 집어넣기!" size="26" style="border:1 solid #595959; font-size:9pt; background-color:#EAFE7C;" onKeyDown="if (this.value=='공지글 미리 집어넣기!') this.value='';"  onMouseOver="this.style.backgroundColor='#C4FF38';  if (this.value=='공지글 미리 집어넣기!') this.value='';" onMouseOut="this.style.backgroundColor='#EAFE7C'; if (this.value=='') this.value='공지글 미리 집어넣기!';" onClick="this.focus()">
Posted by 알 수 없는 사용자
,
텍스트나 input 또는 div 또는 span등... 을 적용할때 감추고자 싶을때 사용하는 것입니다.

display와 visibility를 이용해서 보였다 안보였다하게 할 수 있습니다.

display의 none에 대응하는 visibilty의 값은 hidden입니다. 반대는 visible이구요.

display와 visibility의 차이점이라면, display는 none인 상태에서는 화면을 잡아먹지 않습니다.

visibility는 hidden인 상태에서도 화면을 잡아먹습니다.

즉, visibility를 hidden으로 해놓더라도 화면상에는 안보이는 부분이 차지하는 공백이 그대로 나타난다는거죠.

적용 방법은 <div style=display:hidden>내용</div> 이런식으로 하시면 됨니다.

또는 <div style=visibility:hidden>내용</div> 이렇게... div 대신 다른 것을 적용해두 되구요.
Posted by 알 수 없는 사용자
,


<a href="javascript:void(0)" onClick="window.open('lee.jpg','pop','width=377,height=313');" >팝업띄우기</a>

Posted by 알 수 없는 사용자
,
먼저 스타일시트에
input.underline {
 border-left-width:0;
 border-right-width:0;
 border-top-width:0;
 border-bottom-width:1;
}

이렇게 써주고 input 태그에
<input class="underline" ...>

or

<html> <head>
<style>
input.underline {border:0;border-bottom:1 solid #FF0000;}
</style>
</head>
<body>
<input class="underline" type="text" value="ABCDEFGH">
</body>
</html>
Posted by 알 수 없는 사용자
,
보통 여러군데에 창고?를 두고 이미지를 링크해서 사용할때...

원본 이미지의 링크가 깨지게되면 X표의 이미지들을 볼수 있습니다.

그걸 방지하는 소스입니다.

<img onerror="this.src='에러발생이미지';" src="원본이미지" width="180" height="253" border="0">

위와같이 소스를 적어주면 만약 '원본이미지'가 존재하지 않는다면 그위치에 '에러발생이미지'를 출력해 줍니다..^^;
Posted by 알 수 없는 사용자
,

안녕하세요... 소스천국 <ruby>태그피아<rt>카멜롯™</rt></ruby>에 오신걸 환영합니다.



태그피아카멜롯™



Posted by 알 수 없는 사용자
,
아래 태그를 보시면 알겠죠. 기존에는 프레임과 프레임 사이에 다시 프레임을 넣어서
점선 이미지나 백그라운드 컬러등으로 경계선을 만들었죠. 아래 태그로 하시면
간단하게 하실수 있습니다. 점선으로 하실려면 solid 대신 dotted로 바꾸시면됩니다.

<HTML>
<HEAD>
<TITLE>TITLE>
</HEAD>

<FRAMESET COLS="800,*" BORDER=0>
      <FRAMESET ROWS="75,*,20">
  <FRAME SRC="test.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1 style="border-top-style: solid; border-top-width: 1; border-top-color: #000000"
style="border-left-style: solid; border-left-width: 1; border-left-color: #000000"
style="border-right-style: solid; border-right-width: 1; border-right-color: #000000"
style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #000000">
  <FRAMESET cols="155,*">
  <FRAME SRC="test.html" name="login" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1 style="border-top-style: solid; border-top-width: 0; border-top-color: #000000"
style="border-left-style: solid; border-left-width: 1; border-left-color: #000000"
style="border-right-style: solid; border-right-width: 1; border-right-color: #000000"
style="border-bottom-style: solid; border-bottom-width: 0; border-bottom-color: #000000">
   <FRAME SRC="test.html" name="kir" SCROLLING=auto MARGINWIDTH=5 MARGINHEIGHT=4 style="border-top-style: solid; border-top-width: 0; border-top-color: #000000"
style="border-left-style: solid; border-left-width: 0; border-left-color: #000000"
style="border-right-style: solid; border-right-width: 1; border-right-color: #000000"
style="border-bottom-style: solid; border-bottom-width: 0; border-bottom-color: #000000">
</FRAMESET>
  <FRAME SRC="test.html" SCROLLING=NO MARGINWIDTH=1 MARGINHEIGHT=1 style="border-top-style: solid; border-top-width: 1; border-top-color: #000000"
style="border-left-style: solid; border-left-width: 1; border-left-color: #000000"
style="border-right-style: solid; border-right-width: 1; border-right-color: #000000"
style="border-bottom-style: solid; border-bottom-width: 1; border-bottom-color: #000000">
</FRAMESET>
    <FRAME SRC="bg2.html" SCROLLING=NO>
    </FRAMESET>

</HTML>
Posted by 알 수 없는 사용자
,

http://oxtag.com/html/ex/writing_mode.html

핵심은 이부분 입니다.. height:140pt 글의 양과 문자에따라 높이를 조정해주시면 됩니다.
writing-mode:tb-rl 글씨를 세우는 역활을 하는것 입니다.
style="writing-mode:tb-rl;height:140pt;"
숫자와 영문은 누워버리네요...-_-

<HTML>
<BODY>
<DIV style="writing-mode:tb-rl;height:140pt;">
이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.이것은 세로 문장입니다.
</DIV>
</BODY>
</HTML>
Posted by 알 수 없는 사용자
,
css스타일입니다. <head>와 </head>사이에 넣으세요

<style>
body { overflow:scroll;overflow-x:hidden }
</style>

x : 가로 스크롤바 감추기
y : 세로 스크롤바 감추기

모두 감출때는 두가지다 쓰면 되겠죠. 다른 방법은 <body scroll=no> 이렇게두 되구요.
Posted by 알 수 없는 사용자
,
http://oxtag.com/html/ex/link_over.html


위의 미리보기에서 링크에 마우스를 올려보세요. 링크가 눌러지는 듯 하죠?
이미지 롤오버를 쓰지 않고도 이렇게 되는게 가능하답니다.


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

<STYLE type="text/css">
<!--
A:HOVER{position:relative; top:3; left:3;}
-->
</STYLE>


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

위의 top:3; left:3 의 숫자부분을 알맞게 바꿔주세요.
left대신에 right를 쓰실 수도 있는데요, right를 쓰시게 되면,
오른쪽에 여백이 생기면서 왼쪽으로 눌러지는 효과가 나겠죠..
메뉴에 쓰시면 이뻐요~

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

Posted by 알 수 없는 사용자
,

<a href=#>링크</a> 이런 방식을 쓰면 사실.. 편리하죠.

근데.. 뒤로 버튼을 누르면 # 이전으로 가는거지.. 페이지의 뒤로 가는 것은 아닙니다.
그래서..

<p style="CURSOR: hand" onclick=window.location='http://www.yahoo.co.kr'>야후</p>

이건.. 링크하는 방법..

<p style="CURSOR: hand" onclick=window.open("http://www.yahoo.co.kr","newwin")>야후</p>

이건 새창을 띄우는 방법..

<p style="CURSOR: hand" onclick=top.타겟플레임명.location="http://www.yahoo.co.kr">야후</p>

이건 타겟을 지정하는 방법..

쉽죠? ^^; 여러군데 응용할수 있는 방법이니.. 자주 써먹어보세요~

참고로 위의 방법은 <p>태그뿐만 아니라.. 열의별 테그에 다 먹힙니다.

<td>, <tr>, <table>, <b> 아무 태그나 다 될껍니다. 공간을 차지하는 태그라면요..

Posted by 알 수 없는 사용자
,

지정한 시간부터 지정한 시간만큼만 미디어파일 재생시키기 ASX를 이용하여 하는것 입니다..
아래와같이 작성하시고 파일명.asx 로 저 장하신후 자신의 계정에 올리신후 이용하시면 됩니다..
asx 파일에 대해서 더 알고 싶으시면 아래 목록을 검색해보세요. 자세한 정보를 얻을 수 있습니다.
현재 음악파일 시작 30초 후부터 30초만 재생하게 만들었습니다.

<Asx Version="3.0">  
<Title>음악</Title>  
<Author> Music  
<Abstract>Welcome to Music </abstract>  
<Logo Href="배너주소" Style="ICON" />  //배너  
<Entry>  
<StartTime Value = "0:30.0" />  //음악시작할 시간  
<Ref Href="음악주소" />  
<Duration Value = "00:00:30" /> //재생할 시간  
<Title> 노래제목 </Title>  
<Author> 가수 </author>  
<Copyright> 저작권자</Copyright>  
</Entry>  
</asx>


Posted by 알 수 없는 사용자
,


http://oxtag.com/html/ex/gradient_filter.html



<html>
<head>
<title> </title>
<style>
.color1 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=hotpink, EndColorStr=#FFFFFF)';font-size: 9pt; border:1 solid #000000;height:40px;}
.color2 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=skyblue, EndColorStr=#FFFFFF)';font-size: 9pt; border:1 solid #000000;height:40px;}
.color3 {filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=orange, EndColorStr=#FFFFFF)';font-size: 9pt; border:1 solid #000000;height:40px;}
</style>
</head>
<body>
<font style=font-size:9pt;>
* 새로운필터를 적용한 칼라버튼.[ie5.5 sp2이상]<br>
* 참고로 GradientType=0을 GradientType=1로 수정하시면 가로로 그레디언트가 적용되고 <br>
* GradientType=3 이상부터는 반전한 효과가 납니다  <br>
* 아마도 다이렉트 X를 이용하는 듯 싶습니다.. 5.0 이상이고 다렉 버전이 7이나 8이라면 작동되는 듯 싶습니다 <br><br>


filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=hotpink, EndColorStr=#FFFFFF)';<br>
font-size: 9pt; border:1 solid #000000;height:40px; <br>
<br>
StartColorStr=hotpink   //시작 색입니다.. <br>
EndColorStr=#FFFFFF  //끝나는색 입니다.. <br>
이것만 아시면 사용하시는데 아무런 지장 없습니다.. <br><br>
= input 버튼에 적용시 =<br><br>
<input type="button" value="새로운필터를적용한 버튼입니다.이쁘지않나요?" class="color1"><br><br>
<input type="button" value="새로운필터를적용한 버튼입니다.이쁘지않나요?" class="color2"><br> <br>
<input type="button" value="새로운필터를적용한 버튼입니다.이쁘지않나요?" class="color3"><br><br> <br>

= 테이블에 적용시 =<br><br>
<table class="color1"><tr><td width=370 height=30 align=center>
새로운필터를적용한 버튼입니다.이쁘지않나요?
</td></tr></table>
</body>
</html>


Posted by 알 수 없는 사용자
,
페이지마다 타이틀 변경하기
<html>
  <head>
    <title>지정된 title</title>
  </head>

보통 이렇게 되겠죠.
그런데 중간에 타이틀을 꼭 바꿔야만 하는 경우..
<script language="JavaScript1.2">
  top.document.title = '변경될 타이틀'
</script>

이렇게 사용하시면..
브라우저의 타이틀바가 바뀝니다.

게시판같은곳에서.. 게시물 읽을때마다 타이틀바가 바뀌게 하는곳에 사용하면 될껍니다 아마...;;
Posted by 알 수 없는 사용자
,

http://oxtag.com/html/ex/iframe/iframe_border.html


프레임셋 / 아이프레임 / 테이블 등의 border 모양바꾸기입니다.
즉, 문서의 테두리 두르기라고 생각하시면됩니다.
아래 말고도 아이프레임에 적용한 것을 보실려면 미리보기를 클릭하세요.
미리보기의 아이프레임에 테두리 두르기가 복잡하다고 생가하시면 간단하게 테이블태그로 하셔도 됩니다.
테이블 안에 아이프레임을 불러오고 아이프레임의 테두리 값을 0으로 하면되니까요.


이 팁은 굳이 프레임에만 쓰는것이 아니라
테이블의 border도 마찬가지로 사용할수있습니다.
일단 세로로 두개가 나누어진 프레임형태를 만들어보도록 하죠.
웬만하면 메모장에서 프레임을 고치는 습관을 가지세요.
나모나 드림위버는 쓸데없는 태그들이 많이 들어가거든요.
왼쪽이 메뉴가 들어가고 오른쪽은 메인이구요...
프레임셋문서의 태그를 보면 대충 이런 형태로 되어있죠.

<frameset border="0" cols="60,*" frameborder="0">

<frame name="left" src="메뉴.htm" scrolling="no" style="border-right-style: solid; border-right-width: 1; border-right-color: red" >

<frame name="right" src="메인.htm">

</frameset>

여기서 우리가 오늘 배울부분은
이 부분입니다.

style="border-right-style: solid; border-right-width: 1; border-right-color: red"

이것이 프레임의 border의 모양을 정해주는 스타일시트입니다.

위의 스타일시트를 설명하자면 오른쪽프레임 border를 1크기의 실선으로 테두리로 주고, 색상은 빨강으로 주라는 명령입니다.


이제 대충 알겠지만 이 스타일은
좌/우/위/아래를  따로 지정해서 border의 모양을 바꿀수가 있습니다.
style="border-right-style: solid; border-right-width: 1; border-right-color: red"
여기서 right 대신에 left/top/bottom 을 넣어주시면 된답니다.


만약! 그 프레임 전체에 스타일을 적용시킬려면...
right/left/top/bottom은 넣지말고 border-style: solid 이렇게 넣거나 전부 넣어주는 방식으로하면..
그 프레임의 모든 부분에 스타일이 적용이 됩니다. ^^;;


이제 선의 모양을 지정하는 부분을 살펴보죠.
solid라고 해놓은 것은 실선이지만 모양을 자유롭게 바꿀수가 있어요.

일반실선 : solid
점선 : dotted
오목들어가기 : groove
대시 : dashed
이중실선 : double
볼록 나오기 : ridge
안쪽으로넣기 : inset
바깥쪽으로빼기 : outset


이렇게 말이죠....^^ 쓰고싶은 모양으로 맘대로 바꾸어보세요.
정말 쓸만한 팁이죠?

Posted by 알 수 없는 사용자
,