CSS 를 이용하여 ‘따라다니는 배너’ 만들기

CSS 2008. 3. 9. 02:21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Quick Link</title>
<style type="text/css">
#quickLink { position:fixed; _position:absolute; left:800px; top:200px; width:100px; height:300px; background:#CCC;}
</style>
</head>

<body>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<p>-</p>
<div id="quickLink">Fixed Quick Link</div>
</body>
</html>

*주의 : IE6에서는 적용되지 않음..-ㅁ-;;;
**********아는 선배의 충고
역시... 이게 가장 깔끔하게 처리하는 방법이징....
하지만.. 역시 문제는.. IE6 이하의 버젼에서는 적용이 안된다는거. ㅋ
IE6까지는 이것 저것 태그 및 스타일 관련 속성에 버그가 많아서.. 이것도 역시 안되.
http://www.csc.go.kr/js/fixed.js 방법은 아래에 있는 자바스크립트를 받아서 링크로 걸어주어
IE6에 있는 position 속성의 버그를 해결 할 수 있는 방법.


출처 : 나라디자인
http://naradesign.net/wp/2006/12/16/101/

Posted by 귀찮은 여니씨
,

【스타일시트】마우스 커서 모양을 바꾸어 봅시다

CSS 2008. 3. 9. 02:17
백번 읽는 것 보다는 한번 보는 것이 훨씬 낫다고 생각합니다

1. style="cursor:nw-resize" 커서의 화살표 방향이 북서쪽을 향한다.

2 style="cursor:ne-resize" 커서의 화살표 방향이 북동쪽을 향한다.

3 style="cursor:sw-resize" 커서의 화살표 방향이 남서쪽을 향한다.

4 style="cursor:se-resize" 커서의 화살표 방향이 남동쪽을 향한다.

5 style="cursor:help" 커서의 모양을 ? 표로 바꾼다.

6 style="cursor:move" 커서의 모양을 이동 모양으로 바꾼다.

7 style="cursor:e-resize" 커서의 모양을 동쪽방향으로 향하게 한다.

8 style="cursor:n-resize" 커서의 모양을 북쪽방향으로 향하게 한다.

9 style="cursor:s-resize" 커서의 모양을 남쪽방향으로 향하게 한다.

10 style="cursor:w-resize" 커서의 모양을 서쪽방향으로 향하게 한다.

11 style="cursor:text" 커서의 모양을 텍스트 입력상태로 바꾼다.

12 style="cursor:crosshair" 커서의 모양을 십자가로 바꾼다.(그래픽툴의 마퀴툴 커서처럼)

13 style="cursor:hand" 커서의 모양을 손모양으로 바꾼다. (링크처럼)
(IE6이전에는 hand가 쓰였지만...IE6이후에 pointer도 지원해줌)

14 style="cursor:wait" 커서의 모양을 대기(모래시계) 모양으로 바꾼다.

15 style="cursor:default" 커서의 모양에 아무런 변화가 없다

간단하게 스타일을 지정해 주면 커서가 변신(?)을 합니다

사용법은 커서를 바꾸고 싶은 부분에 해당하는 태그 안에 쏘옥~ 넣어주기만 하면 됩니다

문서 전체에 물음표 커서를 적용하고 싶으시면 <body style="cursor:hand">
이런식으로 지정해 주시면 됩니다

아니면 한 문장에만 적용하고 싶으실 때는 그 문장을 시작하는 <font>태그에 위와 같이
삽입해 주시면 됩니다



출처 블로그 > ♥ 프로그래머의 지름길 ♥
원본 http://blog.naver.com/didvkring/90003334229
Posted by 귀찮은 여니씨
,

스크롤바 색상 바꾸기

CSS 2008. 3. 9. 02:15
<!--StartFragment-->스크롤바의 색상을 바꾸는 소스 입니다.

아래 소스를 <head>와 </head>사이에 넣어 주시면 됩니다.

<style type="text/css">
BODY{
scrollbar-face-color: #FFEFEF; ===> 스크롤 막대 색상
scrollbar-shadow-color: #FFCDD4; ===> 막대를 둘러싼 그림자(테두리) 색상
scrollbar-highlight-color: #FFCDD4; ===> 그림자의 가장 밝은 색상
scrollbar-3dlight-color: #FFFFFF;
scrollbar-darkshadow-color: #FFFFFF; ===> 그림자의 가장 어두운 색상
scrollbar-track-color: #FFFFFF; ===> 막대로 선택하지 않은 영역의 색상
scrollbar-arrow-color: #FFA487} ===> 스크롤 삼각형 색상
</style>

※ 위 색상기호는 여기 [홈페이지 기초강좌]의 Tips란 1번 RGB 색상표를
  참고하시기 바랍니다.



출처 블로그 > ┖┓┗Å┚┎┚ひび...
원본 http://blog.naver.com/soosooja/140000745474
Posted by 귀찮은 여니씨
,

티스토리툴바