이미지를 문서에 삽입하지 않고 새창으로 띄우기.
인터넷정보2007. 10. 17. 00:07
<a href="javascript:void(0)" onClick="window.open('lee.jpg','pop','width=377,height=313');" >팝업띄우기</a>
'인터넷정보' 카테고리의 다른 글
| IE6.0 이상 이미지 툴바 기능 막기 (이미지 도구 모음) (0) | 2007.10.17 |
|---|---|
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
inupt 태그에 밑줄만 넣는 방법입니다.
인터넷정보2007. 10. 17. 00:07
먼저 스타일시트에
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>
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>
'인터넷정보' 카테고리의 다른 글
| 글자 또는 배경등에 그라데이션 적용하기. (0) | 2007.10.17 |
|---|---|
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리..
인터넷정보2007. 10. 17. 00:06
보통 여러군데에 창고?를 두고 이미지를 링크해서 사용할때...
원본 이미지의 링크가 깨지게되면 X표의 이미지들을 볼수 있습니다.
그걸 방지하는 소스입니다.
<img onerror="this.src='에러발생이미지';" src="원본이미지" width="180" height="253" border="0">
위와같이 소스를 적어주면 만약 '원본이미지'가 존재하지 않는다면 그위치에 '에러발생이미지'를 출력해 줍니다..^^;
원본 이미지의 링크가 깨지게되면 X표의 이미지들을 볼수 있습니다.
그걸 방지하는 소스입니다.
<img onerror="this.src='에러발생이미지';" src="원본이미지" width="180" height="253" border="0">
위와같이 소스를 적어주면 만약 '원본이미지'가 존재하지 않는다면 그위치에 '에러발생이미지'를 출력해 줍니다..^^;
'인터넷정보' 카테고리의 다른 글
| 글자 사이 중간 점 찍기 (ex. O·S·T) (0) | 2007.10.17 |
|---|---|
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
글자 위에 조그맣게 주석다는거..(익스 전용)
인터넷정보2007. 10. 17. 00:06
안녕하세요... 소스천국 <ruby>태그피아<rt>카멜롯™</rt></ruby>에 오신걸 환영합니다.
태그피아
'인터넷정보' 카테고리의 다른 글
| input 태그에 공지글 미리 넣기 (0) | 2007.10.17 |
|---|---|
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
프레임 문서에서 경계선 테두리 두르기
인터넷정보2007. 10. 17. 00:06
아래 태그를 보시면 알겠죠. 기존에는 프레임과 프레임 사이에 다시 프레임을 넣어서
점선 이미지나 백그라운드 컬러등으로 경계선을 만들었죠. 아래 태그로 하시면
간단하게 하실수 있습니다. 점선으로 하실려면 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>
점선 이미지나 백그라운드 컬러등으로 경계선을 만들었죠. 아래 태그로 하시면
간단하게 하실수 있습니다. 점선으로 하실려면 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>
'인터넷정보' 카테고리의 다른 글
| 감췄다... 보여줬다... -_-;; - display:hidden / display:visibility (0) | 2007.10.17 |
|---|---|
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
글씨를 세로로 써봅시다...^_^
인터넷정보2007. 10. 17. 00:05
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>
'인터넷정보' 카테고리의 다른 글
| 이미지를 문서에 삽입하지 않고 새창으로 띄우기. (0) | 2007.10.17 |
|---|---|
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
스크롤바 생성시 x축 / y축 원하는 곳 감춰보자.
인터넷정보2007. 10. 17. 00:05
| css스타일입니다. <head>와 </head>사이에 넣으세요 <style> body { overflow:scroll;overflow-x:hidden } </style> x : 가로 스크롤바 감추기 y : 세로 스크롤바 감추기 모두 감출때는 두가지다 쓰면 되겠죠. 다른 방법은 <body scroll=no> 이렇게두 되구요. |
'인터넷정보' 카테고리의 다른 글
| inupt 태그에 밑줄만 넣는 방법입니다. (0) | 2007.10.17 |
|---|---|
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자.
인터넷정보2007. 10. 17. 00:05
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를 쓰시게 되면,
오른쪽에 여백이 생기면서 왼쪽으로 눌러지는 효과가 나겠죠..
메뉴에 쓰시면 이뻐요~
--------------------------------------------------------------------------------
위의 미리보기에서 링크에 마우스를 올려보세요. 링크가 눌러지는 듯 하죠?
이미지 롤오버를 쓰지 않고도 이렇게 되는게 가능하답니다.
--------------------------------------------------------------------------------
<STYLE type="text/css">
<!--
A:HOVER{position:relative; top:3; left:3;}
-->
</STYLE>
--------------------------------------------------------------------------------
위의 top:3; left:3 의 숫자부분을 알맞게 바꿔주세요.
left대신에 right를 쓰실 수도 있는데요, right를 쓰시게 되면,
오른쪽에 여백이 생기면서 왼쪽으로 눌러지는 효과가 나겠죠..
메뉴에 쓰시면 이뻐요~
--------------------------------------------------------------------------------
'인터넷정보' 카테고리의 다른 글
| 원본 이미지 링크해제시, 이미지가 깨진경우 이미지의 에러처리.. (0) | 2007.10.17 |
|---|---|
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
a 링크 태그 말고 다른 태그로 링크해보장.
인터넷정보2007. 10. 17. 00:05
| <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> 아무 태그나 다 될껍니다. 공간을 차지하는 태그라면요.. |
'인터넷정보' 카테고리의 다른 글
| 글자 위에 조그맣게 주석다는거..(익스 전용) (0) | 2007.10.17 |
|---|---|
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
음악파일 동영상을 내가 원하는 부분만 재생시켜보자.
인터넷정보2007. 10. 17. 00:04
지정한 시간부터 지정한 시간만큼만 미디어파일 재생시키기 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>
'인터넷정보' 카테고리의 다른 글
| 프레임 문서에서 경계선 테두리 두르기 (0) | 2007.10.17 |
|---|---|
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
필터를 적용한 칼라버튼.[ie5.5 sp2이상]
인터넷정보2007. 10. 16. 23:58
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>
'인터넷정보' 카테고리의 다른 글
| 글씨를 세로로 써봅시다...^_^ (0) | 2007.10.17 |
|---|---|
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
페이지마다 타이틀 변경하기
인터넷정보2007. 10. 16. 23:49
| 페이지마다 타이틀 변경하기 <html> <head> <title>지정된 title</title> </head> 보통 이렇게 되겠죠. 그런데 중간에 타이틀을 꼭 바꿔야만 하는 경우.. <script language="JavaScript1.2"> top.document.title = '변경될 타이틀' </script> 이렇게 사용하시면.. 브라우저의 타이틀바가 바뀝니다. 게시판같은곳에서.. 게시물 읽을때마다 타이틀바가 바뀌게 하는곳에 사용하면 될껍니다 아마...;; |
'인터넷정보' 카테고리의 다른 글
| 스크롤바 생성시 x축 / y축 원하는 곳 감춰보자. (0) | 2007.10.17 |
|---|---|
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기
인터넷정보2007. 10. 16. 23:49
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
이렇게 말이죠....^^ 쓰고싶은 모양으로 맘대로 바꾸어보세요.
정말 쓸만한 팁이죠?
'인터넷정보' 카테고리의 다른 글
| 텍스트 링크시 이미지를 사용하지 않고 롤오버 기능을 넣어보자. (0) | 2007.10.17 |
|---|---|
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
iframe / 투명 아이프레임 / 불투명 아이프레임
인터넷정보2007. 10. 16. 23:48
http://oxtag.com/html/ex/iframe/transparency_iframe.html
◈ 배경이 있는 곳에서 아이프레임을 사용 할 때 유용하게 쓰입니다.
→ iframe 소스안에 style="filter: Alpha(Opacity=60);" 이 것만 추가하면 됩니다.
◈ 투명 아이프레임(IE 5.5 이상)
→ iframe 소스 안에 allowTransparency="true" 이 것을 추가하세요.
→ 그리고 아이프레임 내부에 들어갈 문서 body의 < > 안에 style="background-color:transparent" 를 추가하세요.
'인터넷정보' 카테고리의 다른 글
| a 링크 태그 말고 다른 태그로 링크해보장. (0) | 2007.10.17 |
|---|---|
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
이미지 하이퍼 링크시 border=0을 스타일시트로....
인터넷정보2007. 10. 16. 23:48
| 하이퍼 링크 그림 삽입시마다 border=0 을 안해도 됩니다. 그 방법은... <style> IMG {border: none;} </style> 이케 스타일시트로 정의해주는거죠... |
'인터넷정보' 카테고리의 다른 글
| 음악파일 동영상을 내가 원하는 부분만 재생시켜보자. (0) | 2007.10.17 |
|---|---|
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
SELECT 메뉴의 배경색 및 폰트색상을 다르게
인터넷정보2007. 10. 16. 23:48
<select name="select"> <option selected style="background:#ffffff">배경색상을 다르게</option> <option style="background:#CCFF66">네띠앙</option> <option style="background:#FFCCFF">한미르</option> <option style="background:#cccccc">네이버</option> </select> |
| <select name="select"><option selected color=#0000ff>style="color:#000000">폰트색상을 다르게</option> <option style="color:#CCFF00">네띠앙</option> <option style="color:#FF00FF">한미르</option> <option style="color:#3300FF">네이버</option> </select> |
위 드롭다운 메뉴에 링크를 거는 방법은 자바스크립트 게시판에서 하단에 검색 창에 select 라고 타이핑 후 검색해보세요.
'인터넷정보' 카테고리의 다른 글
| 필터를 적용한 칼라버튼.[ie5.5 sp2이상] (0) | 2007.10.16 |
|---|---|
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
그림문자를 이용한 암호화 기법입니다.
이소스는 일반문자를 그림문자로 변환을해주는(좀더 솔직히 말하면 변환까지는 아닌것 같습니다)소스입니다.
이 소스를 이용하여서 자신만의 글을 꾸미거나 상대방에게 의사전달을 할때 유용할것 같군요,,응용만 잘하면 많은곳에 사용이 될수두 있을것 같구요.. 이 그림문자로 만들어진 소스를 보는방법은 그림문자를 복사하여
메모장에 붙여넣기하여서 보면 그림문자가 지정하는 해당문자가 나옵니다.
아래 태그를 복사해서 태그연습장에서 실행해보세요.
표안에 그림문자가 나오고 이걸 클릭하면 원래의 문자가 나옵니다.
그림문자가 나오지 안거나 한다면 자신의 컴에 WingDings라는 폰트체가 없어서 그럽니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.font_pic { font-family:WingDings; font-size:20pt; color:black}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<center>
<table border=1 cellspacing="0" bordercolor="#FF9900" bordercolordark="white" bordercolorlight="#FF9900"><form name="wd">
<tr>
<td bgcolor="#b0c4de" colspan=10 align="center"><font size=-1><input type=text name="txt" size=2></font></td></tr></form>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' a'; return false">a</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' b'; return false">b</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' c'; return false">c</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' d'; return false">d</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' e'; return false">e</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' f'; return false">f</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' g'; return false">g</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' h'; return false">h</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' i'; return false">i</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' j'; return false">j</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' k'; return false">k</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' l'; return false">l</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' m'; return false">m</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' n'; return false">n</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' o'; return false">o</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' p'; return false">p</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' q'; return false">q</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' r'; return false">r</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' s'; return false">s</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' t'; return false">t</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' u'; return false">u</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' v'; return false">v</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' w'; return false">w</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' x'; return false">x</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' y'; return false">y</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' z'; return false">z</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' A'; return false">A</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' B'; return false">B</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' C'; return false">C</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' D'; return false">D</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' E'; return false">E</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' F'; return false">F</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' G'; return false">G</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' H'; return false">H</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' I'; return false">I</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' J'; return false">J</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' K'; return false">K</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' L'; return false">L</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' M'; return false">M</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' N'; return false">N</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' O'; return false">O</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' P'; return false">P</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' Q'; return false">Q</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' R'; return false">R</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' S'; return false">S</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' T'; return false">T</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' U'; return false">U</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' V'; return false">V</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' W'; return false">W</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' X'; return false">X</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' Y'; return false">Y</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' Z'; return false">Z</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' `'; return false">`</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 1'; return false">1</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 2'; return false">2</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 3'; return false">3</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 4'; return false">4</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 5'; return false">5</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 6'; return false">6</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 7'; return false">7</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 8'; return false">8</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 9'; return false">9</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 0'; return false">0</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ~'; return false">~</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' !'; return false">!</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' @'; return false">@</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' #'; return false">#</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' $'; return false">$</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' %'; return false">%</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ^'; return false">^</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' &'; return false">&</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' *'; return false">*</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ('; return false">(</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' )'; return false">)</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' _'; return false">_</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' +'; return false">+</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \\'; return false">\</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ['; return false">[</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ]'; return false">]</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' {'; return false">{</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' }'; return false">}</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ;'; return false">;</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' :'; return false">:</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \''; return false">'</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \'\''; return false">"</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ,'; return false">,</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' <'; return false"><</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' .'; return false">.</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' >'; return false">></a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \/'; return false">/</a></td>
</tr>
<tr>
<td bgcolor="#b0c4de" align="center" colspan=7><font size=-1>그림을 누르면 사용한 글자가 위의 폼에 나옵니다.</font></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' -'; return false">-</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ='; return false">=</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \|'; return false">|</a></td>
</tr>
</TABLE>
</center>
</BODY>
</HTML>
이소스는 일반문자를 그림문자로 변환을해주는(좀더 솔직히 말하면 변환까지는 아닌것 같습니다)소스입니다.
이 소스를 이용하여서 자신만의 글을 꾸미거나 상대방에게 의사전달을 할때 유용할것 같군요,,응용만 잘하면 많은곳에 사용이 될수두 있을것 같구요.. 이 그림문자로 만들어진 소스를 보는방법은 그림문자를 복사하여
메모장에 붙여넣기하여서 보면 그림문자가 지정하는 해당문자가 나옵니다.
아래 태그를 복사해서 태그연습장에서 실행해보세요.
표안에 그림문자가 나오고 이걸 클릭하면 원래의 문자가 나옵니다.
그림문자가 나오지 안거나 한다면 자신의 컴에 WingDings라는 폰트체가 없어서 그럽니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
.font_pic { font-family:WingDings; font-size:20pt; color:black}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<center>
<table border=1 cellspacing="0" bordercolor="#FF9900" bordercolordark="white" bordercolorlight="#FF9900"><form name="wd">
<tr>
<td bgcolor="#b0c4de" colspan=10 align="center"><font size=-1><input type=text name="txt" size=2></font></td></tr></form>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' a'; return false">a</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' b'; return false">b</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' c'; return false">c</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' d'; return false">d</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' e'; return false">e</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' f'; return false">f</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' g'; return false">g</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' h'; return false">h</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' i'; return false">i</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' j'; return false">j</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' k'; return false">k</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' l'; return false">l</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' m'; return false">m</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' n'; return false">n</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' o'; return false">o</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' p'; return false">p</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' q'; return false">q</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' r'; return false">r</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' s'; return false">s</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' t'; return false">t</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' u'; return false">u</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' v'; return false">v</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' w'; return false">w</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' x'; return false">x</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' y'; return false">y</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' z'; return false">z</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' A'; return false">A</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' B'; return false">B</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' C'; return false">C</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' D'; return false">D</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' E'; return false">E</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' F'; return false">F</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' G'; return false">G</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' H'; return false">H</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' I'; return false">I</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' J'; return false">J</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' K'; return false">K</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' L'; return false">L</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' M'; return false">M</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' N'; return false">N</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' O'; return false">O</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' P'; return false">P</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' Q'; return false">Q</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' R'; return false">R</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' S'; return false">S</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' T'; return false">T</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' U'; return false">U</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' V'; return false">V</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' W'; return false">W</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' X'; return false">X</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' Y'; return false">Y</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' Z'; return false">Z</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' `'; return false">`</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 1'; return false">1</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 2'; return false">2</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 3'; return false">3</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 4'; return false">4</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 5'; return false">5</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 6'; return false">6</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 7'; return false">7</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 8'; return false">8</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 9'; return false">9</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' 0'; return false">0</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ~'; return false">~</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' !'; return false">!</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' @'; return false">@</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' #'; return false">#</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' $'; return false">$</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' %'; return false">%</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ^'; return false">^</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' &'; return false">&</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' *'; return false">*</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ('; return false">(</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' )'; return false">)</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' _'; return false">_</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' +'; return false">+</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \\'; return false">\</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ['; return false">[</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ]'; return false">]</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' {'; return false">{</a></td>
</tr>
<tr>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' }'; return false">}</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ;'; return false">;</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' :'; return false">:</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \''; return false">'</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \'\''; return false">"</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ,'; return false">,</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' <'; return false"><</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' .'; return false">.</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' >'; return false">></a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \/'; return false">/</a></td>
</tr>
<tr>
<td bgcolor="#b0c4de" align="center" colspan=7><font size=-1>그림을 누르면 사용한 글자가 위의 폼에 나옵니다.</font></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' -'; return false">-</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' ='; return false">=</a></td>
<td class=font_pic><a href="#" onClick="document.wd.txt.value=' \|'; return false">|</a></td>
</tr>
</TABLE>
</center>
</BODY>
</HTML>
'인터넷정보' 카테고리의 다른 글
| 페이지마다 타이틀 변경하기 (0) | 2007.10.16 |
|---|---|
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
스타일 시트의 개념과 사용법
인터넷정보2007. 10. 16. 17:36
□ 스타일 시트의 개념과 사용법 □
좌측 html강좌에 나온 스타일시트는 부족한 부분이 만아서 다솜지기님 홈에서 발췌해온 것입니다.
분량이 상당히 많기 때문에 천천히 읽어보도록 하세요. 만은 도움이 될겁니다.
스타일 시트가 필요한 가장 큰 이유는 웹페이지를 보다 깔끔하고 보기 좋게 꾸며 관리하기 쉽게 하는데 있다.
스타일 시트의 가장큰 장점을 든다면 같은 스타일의 문단이 반복적으로 사용될 경우 작업의 속도를 향상시키고
웹 페이지의 용량을 줄일 수 있다는데 있다. 또한 글자의 크기 자간과 행간을 마음대로 조절할 수 있으며 하이퍼
링크의 형태를 다양화 시킬 수 있다.
아무튼 스타일 시트는 현재와 앞으로 웹 페이지를 작성하면서 몰라서는 안될 부분의 하나이다.
스타일 시트를 선언하는 방법은 3가지가 있다.
첫번째는 <head>와 </head>사이에 넣는 방법이다.
아래 예제와 같이 사용한다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<STYLE TYPE="text/css"> [스타일 시트의 시작을 의미한다]
<!--
선택자 스타일 속성1:속성의 값; 스타일 속성2:속성의 갑; ...
//-->
</STYLE>[스타일 시트의 끝을 의미한다]
</head>
<body>
본문내용
</body>
두번째는 HTML태그 내에 삽입하여 선언한다.
<태그 style="스타일 속성1:속성의 값; 스타일 속성2:속성의 값;..">....</태그>
세번째는 외부파일을 이용하여 선언한다.
스타일 시트의 외부 파일의 이름은 확장자가 CSS인 파일을 사용한다.
사용법은 <head>와 </head>사이에 넣는다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<link rel="StyleSheet" HREF="스타일파일의 경로/스타일파일의 이름.css" type="text/css">
<body>
본문내용
</body>
CSS란 Cascading Style Sheet의 약자로서 웹 페이지 제작에 사용되는 HTML의 한계를 보안하기 위해 W3C에서 발표한 것이다.
1바이트 문자인 영어의 경우에는 글자의 여백을 주는 등의 효과를 따로 설정할 필요가 없지만 한글과 같은 2바이트의 문자에는 이것이 불가능하다
따라서 이런 2바이트의 문장의 한계를 보안하기 위해서 생겨난 것이 바로 CSS라 할 수 있다.
□ 스타일 시트의 폰트 관련 속성 □
font-family
값..............c:windowsfonts 디렉토리에 있는 폰트 이름
설명......화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.
예제......P{font-family:Courier New}
기타......만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체 하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 시 아주 유용하게 쓰인다.
P{font-family:굴림,Arial}
font-style
값...........normal,italic,oblique
설명......화면에 나타나는 글씨의 모양, 즉 이탤릭으로 나타낼 것이냐 아니면 오를리크로 나타낼 것이냐를 설정한다.
예제......H1{font-style:italic}
font-weight
값...........normal,bold,border,lighter,100,200,300,400,500,600,700,800,900
설명......글씨의 굵기 설정.일반적인 폰트는 normal 또는 bold만을 지원한다.
예제......H2{font-weight:bold}
font-size
값..........절대값-포인트(pt),센티미터(cm),픽셀(px),인치(in)
상대값- larger,smaller
퍼센트 값 등
설명......글씨의 크기를 설정한다.
예제......H3{font-size:9pt}
□ 스타일 시트의 색깔과 배경 관련 속성 □
color
값...........색깔이름,RGB값
설명......글씨의 색깔을 설정한다.RGB 값,십진수, 색깔의 고유 이름으로도 사용.
예제......EM{color:red}
EM{color:rgb(255,0,0)}
background
값...........transparent,색깔 이름,URL,RBG 값 등
설명......백그라운드 색깔 및 이미지를 설정한다.
예제......P{background:transparent}
BODY{background:red}
BODY{background(pcline.gif)}
□ 스타일 시트의 텍스트 문자 관련 속성 □
word-spacing
값..............normal,길이
설명......단어와 단어 사이의 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{word-spacing:0.4cm}
letter-spacing
값...........normal,길이
설명......word-spacing과는 다르게,글자와 글자 사이에 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{letter-spacing:0.4cm}
text-decoration
값...........none,underline,overline,line-through,blink
설명......글자 또는 문자열을 어떻게 꾸며줄까 하는 것이다.
예를 들어, Link에 및줄을 없애고 싶다고 할 때
text-decoration:none과 같은 용법을 사용할 수 있다.
예제......A:link{text-decoration:none}
text-indent
값...........길이,퍼센트값
설명......얼마나 좌측에서 들여쓰기(indentation)를 할 것인가를
설정한다.
예제......P{text-indent:3m}
line-height
값...........숫자,길이,퍼센트값
설명......두줄 사이의 간격을 설정한다.
예제......DIV(line-height:1.2cm}
□ 스타일 시트의 레이아웃 관련 속성 □
margin-X
속성......margin-top, margin-right, margin-bottom, margin-left 등
값..........길이,퍼센트값,auto
설명......해당하는 내용의 위, 오른쪽, 아래, 왼쪽 등의 여백을 설정한다. 일반 워드 프로세서에서의 위아래, 좌우 여백 설정을 하는 것처럼 설정하면 된다.
예제......BODY{margin:1cm 2cm 3cm}
기타......여백 속성을 각각 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로도 묶어서 설정할 수 있다. 이 때 속성값은 네개를 가지는데, 순서는 Top, Right,Bottom,Left의순서이다. 만일 속성값이 하나라도 상하 좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 Top과 Botttom,두번째 값은 Right와 Left의 값이 된다. 만일 속성값이 세 개라면 모자라는 속성값은 반대쪽 즉,마지막의 속성값은 Left이므로 Right에 설정돼 있는 값으로 설정된다.
padding-X
속성......padding-top,padding-right,padding-bottom,padding-left 등
값...........길이,퍼센트값,auto
설명......텍스트나 이미지 등에 있어서 border(테두리)와 내용간의 빈 공간을 얼마나 넣어줄 것인가 설정한다.
예제......H1{padding:1cm 2cm}
기타......margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할수 있다.
border-X
속성......border-top,border-right,border-bottom,border-left
값...........thin,medim,thick,길이값,none,dotted,dashed,solid,double, groove,ridge,insert,outset
설명......border값을 얼마나 줄 것인가 설정한다.
예제.....P{border:solid}
기타.....margin과 마찬가지로 border라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.
□ 스타일 시트의 클래스와 id관련 속성 □
스타일 시트를 정의 할때 상황에 따라 다른 스타일을 적용하고 싶을 때가 있을겁니다.
특정 부분마다 다른 스타일시트를 적용하고 싶을때 클래스나 id속성을 이용합니다.
즉 특정 부분만 묶어서 사용한다고 보심 편합니다.
# 클래스 속성
각각 다른 a 태그 설정으로 구분하여 줍니다.
a.a1 { ~ }
a.a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
class="a1"
class="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font.style1 { color:blue }
font.style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font class="style1"> 클래스 속성을 이용한 폰트 태그 스타일 </font><br>
<font class="style2"> 클래스 속성을 이용한 폰트 태그 스타일 2 </font><br>
</body>
# id속성
id속성을 사용할 경우는 id속성 선택자 "#" 을 사용합니다.
a#a1 { ~ }
a#a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
id="a1"
id="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font#style1 { color:blue }
font#style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font id="style1">id 속성을 이용한 폰트 태그 스타일</font><br>
<font id="style2">id 속성을 이용한 폰트 태그 스타일 2</font><br>
</body>
□ 스타일 시트의 문맥 선택자 □
p 태그안의 b 태그가 사용되는 공간은 빨간색으로 표현하고싶다.
이럴 때 쓰는 방법입니다.
이때 사용하는 스타일 시트를 "문맥선택자"라고 합니다.
사용법은 아래와 같습니다.
<head>
<style type="text/css">
p b { color:red }
</style>
</head>
<body>
<p> 안녕하세요! <b>♡카멜롯™♡의 소스천국 태그피아</b></p>
</body>
좌측 html강좌에 나온 스타일시트는 부족한 부분이 만아서 다솜지기님 홈에서 발췌해온 것입니다.
분량이 상당히 많기 때문에 천천히 읽어보도록 하세요. 만은 도움이 될겁니다.
스타일 시트가 필요한 가장 큰 이유는 웹페이지를 보다 깔끔하고 보기 좋게 꾸며 관리하기 쉽게 하는데 있다.
스타일 시트의 가장큰 장점을 든다면 같은 스타일의 문단이 반복적으로 사용될 경우 작업의 속도를 향상시키고
웹 페이지의 용량을 줄일 수 있다는데 있다. 또한 글자의 크기 자간과 행간을 마음대로 조절할 수 있으며 하이퍼
링크의 형태를 다양화 시킬 수 있다.
아무튼 스타일 시트는 현재와 앞으로 웹 페이지를 작성하면서 몰라서는 안될 부분의 하나이다.
스타일 시트를 선언하는 방법은 3가지가 있다.
첫번째는 <head>와 </head>사이에 넣는 방법이다.
아래 예제와 같이 사용한다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<STYLE TYPE="text/css"> [스타일 시트의 시작을 의미한다]
<!--
선택자 스타일 속성1:속성의 값; 스타일 속성2:속성의 갑; ...
//-->
</STYLE>[스타일 시트의 끝을 의미한다]
</head>
<body>
본문내용
</body>
두번째는 HTML태그 내에 삽입하여 선언한다.
<태그 style="스타일 속성1:속성의 값; 스타일 속성2:속성의 값;..">....</태그>
세번째는 외부파일을 이용하여 선언한다.
스타일 시트의 외부 파일의 이름은 확장자가 CSS인 파일을 사용한다.
사용법은 <head>와 </head>사이에 넣는다.
<html>
<head>
<title>스타일 시트 선언하기</title>
<link rel="StyleSheet" HREF="스타일파일의 경로/스타일파일의 이름.css" type="text/css">
<body>
본문내용
</body>
CSS란 Cascading Style Sheet의 약자로서 웹 페이지 제작에 사용되는 HTML의 한계를 보안하기 위해 W3C에서 발표한 것이다.
1바이트 문자인 영어의 경우에는 글자의 여백을 주는 등의 효과를 따로 설정할 필요가 없지만 한글과 같은 2바이트의 문자에는 이것이 불가능하다
따라서 이런 2바이트의 문장의 한계를 보안하기 위해서 생겨난 것이 바로 CSS라 할 수 있다.
□ 스타일 시트의 폰트 관련 속성 □
font-family
값..............c:windowsfonts 디렉토리에 있는 폰트 이름
설명......화면에 나타나는 글씨의 종류를 설정할 때 쓰인다. 시스템에 있는 폰트 이름 중 하나를 사용하면 된다.
예제......P{font-family:Courier New}
기타......만일 윈도우 시스템에 굴림체가 없다면 Arial로 대체 하라는 의미로 다음과 같이 사용할 수도 있다. 참고로, 이것은 제작자의 시스템에는 해당 폰트가 있으나, 다른 사람들의 컴퓨터에는 폰트가 없을 시 아주 유용하게 쓰인다.
P{font-family:굴림,Arial}
font-style
값...........normal,italic,oblique
설명......화면에 나타나는 글씨의 모양, 즉 이탤릭으로 나타낼 것이냐 아니면 오를리크로 나타낼 것이냐를 설정한다.
예제......H1{font-style:italic}
font-weight
값...........normal,bold,border,lighter,100,200,300,400,500,600,700,800,900
설명......글씨의 굵기 설정.일반적인 폰트는 normal 또는 bold만을 지원한다.
예제......H2{font-weight:bold}
font-size
값..........절대값-포인트(pt),센티미터(cm),픽셀(px),인치(in)
상대값- larger,smaller
퍼센트 값 등
설명......글씨의 크기를 설정한다.
예제......H3{font-size:9pt}
□ 스타일 시트의 색깔과 배경 관련 속성 □
color
값...........색깔이름,RGB값
설명......글씨의 색깔을 설정한다.RGB 값,십진수, 색깔의 고유 이름으로도 사용.
예제......EM{color:red}
EM{color:rgb(255,0,0)}
background
값...........transparent,색깔 이름,URL,RBG 값 등
설명......백그라운드 색깔 및 이미지를 설정한다.
예제......P{background:transparent}
BODY{background:red}
BODY{background(pcline.gif)}
□ 스타일 시트의 텍스트 문자 관련 속성 □
word-spacing
값..............normal,길이
설명......단어와 단어 사이의 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{word-spacing:0.4cm}
letter-spacing
값...........normal,길이
설명......word-spacing과는 다르게,글자와 글자 사이에 공간을 얼마나 넣어줄 것이냐 하는 속성이다.
예제......H1{letter-spacing:0.4cm}
text-decoration
값...........none,underline,overline,line-through,blink
설명......글자 또는 문자열을 어떻게 꾸며줄까 하는 것이다.
예를 들어, Link에 및줄을 없애고 싶다고 할 때
text-decoration:none과 같은 용법을 사용할 수 있다.
예제......A:link{text-decoration:none}
text-indent
값...........길이,퍼센트값
설명......얼마나 좌측에서 들여쓰기(indentation)를 할 것인가를
설정한다.
예제......P{text-indent:3m}
line-height
값...........숫자,길이,퍼센트값
설명......두줄 사이의 간격을 설정한다.
예제......DIV(line-height:1.2cm}
□ 스타일 시트의 레이아웃 관련 속성 □
margin-X
속성......margin-top, margin-right, margin-bottom, margin-left 등
값..........길이,퍼센트값,auto
설명......해당하는 내용의 위, 오른쪽, 아래, 왼쪽 등의 여백을 설정한다. 일반 워드 프로세서에서의 위아래, 좌우 여백 설정을 하는 것처럼 설정하면 된다.
예제......BODY{margin:1cm 2cm 3cm}
기타......여백 속성을 각각 상하좌우로 설정해 줄 수도 있지만, 위의 예제처럼 margin이라는 하나의 이름으로도 묶어서 설정할 수 있다. 이 때 속성값은 네개를 가지는데, 순서는 Top, Right,Bottom,Left의순서이다. 만일 속성값이 하나라도 상하 좌우를 모두 해당 값으로 설정하고, 속성값이 두개라면 첫번째 값은 Top과 Botttom,두번째 값은 Right와 Left의 값이 된다. 만일 속성값이 세 개라면 모자라는 속성값은 반대쪽 즉,마지막의 속성값은 Left이므로 Right에 설정돼 있는 값으로 설정된다.
padding-X
속성......padding-top,padding-right,padding-bottom,padding-left 등
값...........길이,퍼센트값,auto
설명......텍스트나 이미지 등에 있어서 border(테두리)와 내용간의 빈 공간을 얼마나 넣어줄 것인가 설정한다.
예제......H1{padding:1cm 2cm}
기타......margin과 마찬가지로 padding이라는 하나의 이름으로 속성을 묶어서 사용할수 있다.
border-X
속성......border-top,border-right,border-bottom,border-left
값...........thin,medim,thick,길이값,none,dotted,dashed,solid,double, groove,ridge,insert,outset
설명......border값을 얼마나 줄 것인가 설정한다.
예제.....P{border:solid}
기타.....margin과 마찬가지로 border라는 하나의 이름으로 속성을 묶어서 사용할 수 있다.
□ 스타일 시트의 클래스와 id관련 속성 □
스타일 시트를 정의 할때 상황에 따라 다른 스타일을 적용하고 싶을 때가 있을겁니다.
특정 부분마다 다른 스타일시트를 적용하고 싶을때 클래스나 id속성을 이용합니다.
즉 특정 부분만 묶어서 사용한다고 보심 편합니다.
# 클래스 속성
각각 다른 a 태그 설정으로 구분하여 줍니다.
a.a1 { ~ }
a.a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
class="a1"
class="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font.style1 { color:blue }
font.style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font class="style1"> 클래스 속성을 이용한 폰트 태그 스타일 </font><br>
<font class="style2"> 클래스 속성을 이용한 폰트 태그 스타일 2 </font><br>
</body>
# id속성
id속성을 사용할 경우는 id속성 선택자 "#" 을 사용합니다.
a#a1 { ~ }
a#a2 { ~ }
위와 같이 스타일 시트에 삽입하고 불러올 때는 아래와 같이 불러옵니다.
id="a1"
id="a2"
ex)
<head>
<style type="text/css">
font { color:red }
font#style1 { color:blue }
font#style2 { font-size:20; color:green }
</style>
</head>
<body>
<font> 폰트 태그에 스타일 시트를 적용 </font><br>
<font id="style1">id 속성을 이용한 폰트 태그 스타일</font><br>
<font id="style2">id 속성을 이용한 폰트 태그 스타일 2</font><br>
</body>
□ 스타일 시트의 문맥 선택자 □
p 태그안의 b 태그가 사용되는 공간은 빨간색으로 표현하고싶다.
이럴 때 쓰는 방법입니다.
이때 사용하는 스타일 시트를 "문맥선택자"라고 합니다.
사용법은 아래와 같습니다.
<head>
<style type="text/css">
p b { color:red }
</style>
</head>
<body>
<p> 안녕하세요! <b>♡카멜롯™♡의 소스천국 태그피아</b></p>
</body>
'인터넷정보' 카테고리의 다른 글
| 프레임셋 / 아이프레임 / 테이블 등의 border(테두리) 모양바꾸기 (0) | 2007.10.16 |
|---|---|
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
테이블 프레임(frame) 형태 지정하기
인터넷정보2007. 10. 16. 17:34
★ 테이블 프레임
테입블 안에 frame=아래의속성들 중 하나를 추가해서 <table frame=속성>의
형식으로 해주시면 다양한 형태의 테이블을 만드실 수 있습니다.
속성 : void, above, below, hsides, vsides, lhs, rhs
아래처럼 테이블 태그 안에 넣어보시면 쉽게 알 수 있을 겁니다.
<table frame=void>
<table frame=above>
<table frame=below>
<table frame=hsides>
<table frame=vsides>
<table frame=lhs>
<table frame=rhs>
테이블형태 조정하기
테입블 안에 frame=아래의속성들 중 하나를 추가해서 <table frame=속성>의
형식으로 해주시면 다양한 형태의 테이블을 만드실 수 있습니다.
속성 : void, above, below, hsides, vsides, lhs, rhs
아래처럼 테이블 태그 안에 넣어보시면 쉽게 알 수 있을 겁니다.
<table frame=void>
<table frame=above>
<table frame=below>
<table frame=hsides>
<table frame=vsides>
<table frame=lhs>
<table frame=rhs>
테이블형태 조정하기
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=void>
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=above>
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=below>
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=hsides>
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=vsides>
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=lhs>
| .. | .. |
| .. | .. |
| .. | .. |
<table frame=rhs>
'인터넷정보' 카테고리의 다른 글
| iframe / 투명 아이프레임 / 불투명 아이프레임 (0) | 2007.10.16 |
|---|---|
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
글자/단어 간격을 입맛대로 바꾸자.
인터넷정보2007. 10. 16. 17:33
style="" 태그안에 아래를 넣으세요!
word-spacing:숫자
letter-spacing:숫자
예) style="word-spacing:3; letter-spacing:5;"
[적용]
<font style="word-spacing:3 ; letter-spacing:5">Hi~ ♡ Camelot™의 태그피아 ♡</font>
[적용하지 않은 일반글꼴]
♡ Camelot™의 태그피아 ♡
word-spacing 는 단어사이의 간격
letter-spacing 는 글자사이의 간격을 지정할수있습니다.
특별한 부분만 간격을 만들고자 할때
부분적인 간격이 필요한 곳 앞에 아래와 같이 넣는다.
<p style="margin-left:20mm;">소스천국</p>
:: 왼쪽에서 20mm띄어서 글이 들어간다.
:: 일반텍스트나 이미지를 넣어도 좋고, 기호나 테이블에도 적용가능하다
word-spacing:숫자
letter-spacing:숫자
예) style="word-spacing:3; letter-spacing:5;"
[적용]
<font style="word-spacing:3 ; letter-spacing:5">Hi~ ♡ Camelot™의 태그피아 ♡</font>
[적용하지 않은 일반글꼴]
♡ Camelot™의 태그피아 ♡
word-spacing 는 단어사이의 간격
letter-spacing 는 글자사이의 간격을 지정할수있습니다.
특별한 부분만 간격을 만들고자 할때
부분적인 간격이 필요한 곳 앞에 아래와 같이 넣는다.
<p style="margin-left:20mm;">소스천국</p>
:: 왼쪽에서 20mm띄어서 글이 들어간다.
:: 일반텍스트나 이미지를 넣어도 좋고, 기호나 테이블에도 적용가능하다
'인터넷정보' 카테고리의 다른 글
| 이미지 하이퍼 링크시 border=0을 스타일시트로.... (0) | 2007.10.16 |
|---|---|
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
링크를 새창 or 현재창으로 선택해서 열게하자
인터넷정보2007. 10. 16. 17:33
http://oxtag.com/html/ex/link_target.php
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function hyperlinks(target)
{
if (target) where = "_blank";
else where = "_self";
for (var i=0; i<=(document.links.length-1); i++)
{
document.links[i].target = where;
}
}
</script>
스크립트를 head 사이에 넣습니다.
아래는 body아래로.
<input type="checkbox" name="targetnew" onclick="hyperlinks(this.checked)"> 새창으로 열기
<a href="http://naver.com">링크명</a>
<a href="http://daum.net">링크명</a>
'인터넷정보' 카테고리의 다른 글
| SELECT 메뉴의 배경색 및 폰트색상을 다르게 (0) | 2007.10.16 |
|---|---|
| 그림문자 (0) | 2007.10.16 |
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동.
인터넷정보2007. 10. 16. 17:33
어느 사이트를 가면 회원가입 폼에서 탭키나 마우스를 인풋박스에 찍지 안아도
글자수를 맞게 입력하면 자동으로 다음으로 넘어가죠. 그 태그입니다.
예제는 링크를 클릭하세요. 위 링크된 것은 예전에 썼던 것인데 요즘은 사용하지 안고 있는
영화관? 입니다. 주민등록 앞자리 6자리를 입력하면 자동으로 다음 인풋태그로 넘어갑니다.
<html>
<head>
<title></title>
<script language="javascript">
function moveNext(varControl, varNext)
{
if(varControl.value.length == varControl.maxLength)
{
varNext.focus();
varNext.select();
}
}
</script>
</head>
<body>
<input type="" name="jumin1" maxlength="6" size="6" OnKeyUp="moveNext(this, jumin2);">
<input type="" name="jumin2" maxlength="7" size="7" OnKeyUp="moveNext(this, jumin3);">
<input type="" name="jumin3" maxlength="6" size="6" OnKeyUp="moveNext(this, jumin4);">
<input type="password" name="jumin4" maxlength="7" size="7" OnKeyUp="moveNext(this, jumin1);">
</body>
</html>
글자수를 맞게 입력하면 자동으로 다음으로 넘어가죠. 그 태그입니다.
예제는 링크를 클릭하세요. 위 링크된 것은 예전에 썼던 것인데 요즘은 사용하지 안고 있는
영화관? 입니다. 주민등록 앞자리 6자리를 입력하면 자동으로 다음 인풋태그로 넘어갑니다.
<html>
<head>
<title></title>
<script language="javascript">
function moveNext(varControl, varNext)
{
if(varControl.value.length == varControl.maxLength)
{
varNext.focus();
varNext.select();
}
}
</script>
</head>
<body>
<input type="" name="jumin1" maxlength="6" size="6" OnKeyUp="moveNext(this, jumin2);">
<input type="" name="jumin2" maxlength="7" size="7" OnKeyUp="moveNext(this, jumin3);">
<input type="" name="jumin3" maxlength="6" size="6" OnKeyUp="moveNext(this, jumin4);">
<input type="password" name="jumin4" maxlength="7" size="7" OnKeyUp="moveNext(this, jumin1);">
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 그림문자 (0) | 2007.10.16 |
|---|---|
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
프레임,타겟(Tartget),윈도우URL처리법~
인터넷정보2007. 10. 16. 17:33
프레임을 쓰실때 생각할 것 세가지
1. frame_name.location = 'url.php';
또는 frame_name.location.href = 'url.php';
또는 frame_name.location.replace('url.php')
2. parent.frame_name.location = 'url.php';
3. opener.parent.frame_name.location = 'url.php';
새창을 열게해준 창의 주소를 바꾸고 새창을 끈다.
<script>
opener.location.href = 'url.php';
self.close();
</script>
새창을 열게해준 창의 주소를 새로고침하고 새창을 끈다
<script>
opener.location.reload();
self.close();
</script>
다른 프래임의 주소를 바꾸게 하려면
<script>
frame_name.location.href = 'url.php';
</script>
프래임 구조상 상위 프래임의 주소를 바꾸게 하려면
<script>
parent.location.href = 'url.php';
</script>
타겟이 지정된 프레임을 바꾼다.(타겟하나)
<script>
parent.target(타겟).location.href = 'url.php';
</script>
타겟이 지정된 프레임을 바꾼다.(타겟둘)
<script>
parent.target1(타겟1).location.href = 'url1.php';
parent.target2(타겟2).location.href = 'url2.php';
</script>
타겟이 지정된 프레임을 바꾼다.(타겟셋)
<script>
parent.target1(타겟1).location.href = 'url1.php';
parent.target2(타겟2).location.href = 'url2.php';
parent.target3(타겟3).location.href = 'url3.php';
</script>
타겟이 지정된 프레임두개를 클릭으로 바꾸려면
<script>
function target_frame(url1, url2)
{
parent.top_frame.location.href = url1;
parent.main_frame.location.href = url2;
}
</script>
<a href="javascript:target_frame('main_menu.html', '$go_url');"> 확인 </a>
로그인페이지 에선
<script>
parent.top_frame.location.href = '../main.html'; //main.html는 로그인페이지 보다 상위디렉토리에 있다.
parent.main_frame.location.href = '$go_url';
</script>
로그인페이지를 새창으로 띄웠다면
<script>
opener.parent.top_frame.location.href = '../main.html';
opener.parent.main_frame.location.href = '$go_url';
self.close();
</script>
1. frame_name.location = 'url.php';
또는 frame_name.location.href = 'url.php';
또는 frame_name.location.replace('url.php')
2. parent.frame_name.location = 'url.php';
3. opener.parent.frame_name.location = 'url.php';
새창을 열게해준 창의 주소를 바꾸고 새창을 끈다.
<script>
opener.location.href = 'url.php';
self.close();
</script>
새창을 열게해준 창의 주소를 새로고침하고 새창을 끈다
<script>
opener.location.reload();
self.close();
</script>
다른 프래임의 주소를 바꾸게 하려면
<script>
frame_name.location.href = 'url.php';
</script>
프래임 구조상 상위 프래임의 주소를 바꾸게 하려면
<script>
parent.location.href = 'url.php';
</script>
타겟이 지정된 프레임을 바꾼다.(타겟하나)
<script>
parent.target(타겟).location.href = 'url.php';
</script>
타겟이 지정된 프레임을 바꾼다.(타겟둘)
<script>
parent.target1(타겟1).location.href = 'url1.php';
parent.target2(타겟2).location.href = 'url2.php';
</script>
타겟이 지정된 프레임을 바꾼다.(타겟셋)
<script>
parent.target1(타겟1).location.href = 'url1.php';
parent.target2(타겟2).location.href = 'url2.php';
parent.target3(타겟3).location.href = 'url3.php';
</script>
타겟이 지정된 프레임두개를 클릭으로 바꾸려면
<script>
function target_frame(url1, url2)
{
parent.top_frame.location.href = url1;
parent.main_frame.location.href = url2;
}
</script>
<a href="javascript:target_frame('main_menu.html', '$go_url');"> 확인 </a>
로그인페이지 에선
<script>
parent.top_frame.location.href = '../main.html'; //main.html는 로그인페이지 보다 상위디렉토리에 있다.
parent.main_frame.location.href = '$go_url';
</script>
로그인페이지를 새창으로 띄웠다면
<script>
opener.parent.top_frame.location.href = '../main.html';
opener.parent.main_frame.location.href = '$go_url';
self.close();
</script>
'인터넷정보' 카테고리의 다른 글
| 스타일 시트의 개념과 사용법 (0) | 2007.10.16 |
|---|---|
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
소스 한줄로 만들기
인터넷정보2007. 10. 16. 17:33
'인터넷정보' 카테고리의 다른 글
| 테이블 프레임(frame) 형태 지정하기 (0) | 2007.10.16 |
|---|---|
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
| 테이블 자체에 링크 걸기 (0) | 2007.10.16 |
이전글 응용태그(테이블 테두리 롤오버 효과?)
인터넷정보2007. 10. 16. 17:32
| <table cellpadding="0" cellspacing="0" width="300" align=center> <tr> <td bgcolor="#ff9900" align="center" onmouseover="this.style.backgroundColor='#ff00ff'" onmouseout="this.style.backgroundColor=''"> <table width="100%" cellpadding="3" cellspacing="1"> <tr> <td bgcolor=#fcfcfc valign="top" align=center> 마우스를 올려보세요. 테두리 색 바뀌죠. </td> </tr> </table> </td> </tr> </table> |
'인터넷정보' 카테고리의 다른 글
| 글자/단어 간격을 입맛대로 바꾸자. (0) | 2007.10.16 |
|---|---|
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
| 테이블 자체에 링크 걸기 (0) | 2007.10.16 |
| 테이블 투명하게 하기 (0) | 2007.10.16 |
테이블에 마우스 배경컬러 롤오버 효과
인터넷정보2007. 10. 16. 17:32
| Red | Green |
| Blue | Purple |
소스 :
<table border="1" cellpadding="0" cellspacing="0" bordercolor="gray">
<tr>
<td width="240" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''" align=center> Red</td>
<td width="240" onmouseover="this.style.backgroundColor='green'" onmouseout="this.style.backgroundColor=''" align=center> Green</td>
</tr>
<tr>
<td width="240" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor=''" align=center> Blue</td>
<td width="240" onmouseover="this.style.backgroundColor='purple'" onmouseout="this.style.backgroundColor=''" align=center>
Purple</td>
</tr>
</table>
'인터넷정보' 카테고리의 다른 글
| 링크를 새창 or 현재창으로 선택해서 열게하자 (0) | 2007.10.16 |
|---|---|
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
| 테이블 자체에 링크 걸기 (0) | 2007.10.16 |
| 테이블 투명하게 하기 (0) | 2007.10.16 |
| 스크롤바를 좌측으로 꾸미기 (0) | 2007.10.16 |
마우스 오버시 이미지가 컬러가 변합니당!
인터넷정보2007. 10. 16. 17:32
마우스를 천사 이미지에 대보세요.  <img src="이미지 경로" style="filter:gray()" onmouseout="this.style.filter='gray'" onmouseover="this.style.filter=''"> |
'인터넷정보' 카테고리의 다른 글
| 인풋태그에 지정된 텍스트 글자수 이상이 되면 다음 인풋태그로 커서가 이동. (0) | 2007.10.16 |
|---|---|
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
| 테이블 자체에 링크 걸기 (0) | 2007.10.16 |
| 테이블 투명하게 하기 (0) | 2007.10.16 |
| 스크롤바를 좌측으로 꾸미기 (0) | 2007.10.16 |
| 문서의 수정된 날짜 자동으로 표시하기 (0) | 2007.10.16 |
SUBMIT 버튼을 이미지로 바꾸기
인터넷정보2007. 10. 16. 17:32
일반적인 전송버튼인
<input type=submit value=' 전 송 '>
을 예쁜 이미지로 대체하려면 아래 같이 하시면 됩니다.
<input type=image src="이미지 주소" align=top border=0 alt='Click!'>
실행화면 :
'인터넷정보' 카테고리의 다른 글
| 프레임,타겟(Tartget),윈도우URL처리법~ (0) | 2007.10.16 |
|---|---|
| 소스 한줄로 만들기 (0) | 2007.10.16 |
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| 테이블 자체에 링크 걸기 (0) | 2007.10.16 |
| 테이블 투명하게 하기 (0) | 2007.10.16 |
| 스크롤바를 좌측으로 꾸미기 (0) | 2007.10.16 |
| 문서의 수정된 날짜 자동으로 표시하기 (0) | 2007.10.16 |
| Textarea란? (0) | 2007.10.16 |
테이블 자체에 링크 걸기
인터넷정보2007. 10. 16. 17:32
소스보기 하셔서 퍼가세요. 태그피아 대문에 이 소스가 적용이 되었습니다.
테이블의 테두리를 감추고 가로/세로 크기를 100%로 해서 아무곳이나 클릭하면 메인으로 들어오죠.
후후 아래 예제는 예전의 계정에 있을때 만든거라서 현재의 태그피아 대문에 쓰인거와는 조금 다릅니다.
현재는 대문에 보이는 문서 전체에 링크를 걸었죠. 이 소스를 바디 시작태그에 넣으시면 됩니다.
<html>
<head>
<title>테이블 링크</title>
<script language="JavaScript">
<!--
function Tagpia_open_window(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable)
{
toolbar_str = toolbar ? 'yes' : 'no';
menubar_str = menubar ? 'yes' : 'no';
statusbar_str = statusbar ? 'yes' : 'no';
scrollbar_str = scrollbar ? 'yes' : 'no';
resizable_str = resizable ? 'yes' : 'no';
window.open(url, name, 'left='+left+',top='+top+',width='+width+',height='+height+',toolbar='+toolbar_str+',menubar='+menubar_str+',status='+statusbar_str+',scrollbars='+scrollbar_str+',resizable='+resizable_str);
}
//-->
</script>
<!-- 위 소스는 새창을 열때 환경 설정 부분입니다. 수정 하실 수 있는 분들은 고쳐서 쓰시구요.
그렇지 못한 분들은 그냥 쓰시기를 바랍니다. -->
</head>
<body bgcolor='#CCCCCC' text='black' link='blue' vlink='purple' alink='red'>
<table border=1 cellpadding=0 cellspacing=0 width=650 bordercolor=teal align=center OnMouseOver="this.style.cursor='hand'; this.style.backgroundColor='orange';"
Onmouseout = "this.style.backgroundColor='#FFFFFF';"
OnClick="Tagpia_open_window('newtable', 'http://oxtag.com.ne.kr', 0, 0, 900, 600, 0, 1, 0, 1, 1);" bgcolor="#FFFFFF">
<tr>
<td align=center height=22 align=center width="303">
<p align="center"><font color=teal size="2">여기에는 글 내용을 적습니다.</font>
</td>
<td width="341">
<p align="center"><font size="2" color="fuchsia">이 태그는 테이블 자체에 링크를 시킨것입니다.</font>
</td>
</tr>
<tr>
<td width="646" colspan="2">
<p align="center"><font size="2" color="blue">테이블의 아무 곳이나 클릭해보세요. 그럼 연결된 url로 이동 됩니다.</font>
</td>
</tr>
</table>
<!--
위의 태그 중 ('newtable', 'http://oxtag.com.ne.kr', 0, 0, 900, 600, 0, 1, 0, 1, 1) 이 부분은 수정해서 사용하세요.
새 창으로 띄울 경우는 newtable은 새창의 이름이기 때문에 여러분의 홈을 프레임 나눴다면 프레임 명이 아닌 적당한 이름을
지정해주시구요. 프레임 안에 띄울려면 프레임명을 쓰면 됩니다. 그리구 뒤의 숫자는 대충 아시겠죠. 이것은 프레임 안에
새창이 열리게 할 경우는 필요 없는 부분이구요. 새창으로 띄울 경우는 상단의 스크립트 부분을 보시면 순서대로 이니까
수정하시면 됩니다. url 다음의 0,0,은 좌표 값입니다. 좌측에서 0px, top에서 0px에 띄워지겠죠. 그리구 뒤의 900, 600는
새창의 가로/세로 크기 지정이구요. 다음의 숫자들은 절대 값인 0과 1을 갖습니다. 0은 yes 1은 no입니다. 0, 1, 0, 1, 1를
순서대로 위 스크립트를 보시면 알겠지만 첫번째가 툴바, 두번째가 메뉴바..... 이런식으로 됩니다. 이걸 0과 1로 설정을
해주시면 됩니다. (새창 띄우기의 방법을 자세히 배우고 싶으신 분은 좌측의 소스천국>강좌&팁란에 가보세요.
OnMouseOver="this.style.cursor='hand'; this.style.backgroundColor='orange';"
Onmouseout = "this.style.backgroundColor='#FFFFFF';"
OnClick="Tagpia_open_window('newtable', 'http://oxtag.com.ne.kr', 0, 0, 900, 600, 0, 1, 0, 1, 1);"
이 부분은 현재 table 전체에 넣어줬죠. 각 셀에 따로 링크를 거실려면 tr에 넣으셔두 되구 td에 넣어두 됩니다.
tr에 넣으면 그 줄의 셀 전체에 링크가 걸리구 td에 넣으면 당연히 한 칸에만 링크가 걸리겠죠.
-->
</body>
</html>
'인터넷정보' 카테고리의 다른 글
| 소스 한줄로 만들기 (0) | 2007.10.16 |
|---|---|
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
| 테이블 투명하게 하기 (0) | 2007.10.16 |
| 스크롤바를 좌측으로 꾸미기 (0) | 2007.10.16 |
| 문서의 수정된 날짜 자동으로 표시하기 (0) | 2007.10.16 |
| Textarea란? (0) | 2007.10.16 |
| fieldset로 테이블 만들기 (0) | 2007.10.16 |
테이블 투명하게 하기
인터넷정보2007. 10. 16. 17:32
<table bgcolor=원하시는 색깔 style='filter: Alpha(Opacity=70)'> Opacity=70 에서 숫자만 바꾸시면 정말 이쁩니다... 숫자가 높을수록 불투명해져여.. |
'인터넷정보' 카테고리의 다른 글
| 이전글 응용태그(테이블 테두리 롤오버 효과?) (0) | 2007.10.16 |
|---|---|
| 테이블에 마우스 배경컬러 롤오버 효과 (0) | 2007.10.16 |
| 마우스 오버시 이미지가 컬러가 변합니당! (0) | 2007.10.16 |
| SUBMIT 버튼을 이미지로 바꾸기 (0) | 2007.10.16 |
| 테이블 자체에 링크 걸기 (0) | 2007.10.16 |
| 스크롤바를 좌측으로 꾸미기 (0) | 2007.10.16 |
| 문서의 수정된 날짜 자동으로 표시하기 (0) | 2007.10.16 |
| Textarea란? (0) | 2007.10.16 |
| fieldset로 테이블 만들기 (0) | 2007.10.16 |
| 테이블 공지 멈춤 / 시작 기능 (0) | 2007.10.16 |
