[펌] 투명 스크롤 바

투명 스크롤바 //
평점 :
+ 2 (2 명) 나도 평가하기 kyy3259   조회: 1231  답변: 2
답변이 완료된 질문입니다. (2004-09-08 18:25 작성) 신고하기
안녕하세요 //

투명 스크롤바에 대한 질문좀 // 할께요 //

투명 스크롤바를 만들면, , 보통 ,, 흰색으로 하잖아요 -ㅁ-

투명 스크롤바가 아니고 흰색스크롤바죠 - 0-

#ffffff

이 색을 넣어서 하는데 , #ffffff 이 색은 흰색이죠 - 0-

그러니까 배경이 흰색일때만 투명잖아요 - 0-

아 , 투명이 아니죠 , 흰색 이죠 - 0-

그런데 배경이 다른색일경우 , 그 색으로 해도 되지만 , - 0-

배경이 색이 아니고 , 그림이라면, - 0- 어떡해 하나요 ''

http://dori.ibbun.net/

이 홈페이지 들어가면요 진짜 투명이거든요 ,

배경이 파란색인데 , 그라데이션 효과가 되있어요 ,

그럼 스크롤바가 투명이 되어야 하는데 ,

어떡해 해야 하나요 ? ''
질문자가 선택한 답변
re: 투명 스크롤바 //
jong2dol (2004-09-08 19:04 작성) 이의제기
질문자 평 
도리님 홈페이지 들어가보니 적혀 있네요. -_-;;

그대로 적혀 있네요.

아래는 그대로 퍼온 것입니다.



■ 아이프레임 스크롤바를 투명하게 만들어 보자
도리홈를 자세히 보면 스크롤바가 투명한게 보이지요? 바로 이 방법을 썼기 때문이랍니다.
이번 웹팁은 소스는 간단하지만 어려운 부분이 있어요. 잘 따라서 자신의 홈을 예쁘게 꾸미세요!

* 투명한 아이프레임이지여야만 가능합니다. 이부분에 관한 자세한 설명은 바로 이 글 아래 <투명한 아이프레임 만들기> 강좌를 참고하세요.
* 두가지 웹페이지가 필요합니다.

1. 하나는 아이프레임이 있는 웹페이지.
아이프레임 소스안에 style="filter: chroma(color=#999999)" 이것을 넣어줍니다.
여기서 color=#999999 아이프레임 안에 투명하게 만들 색깔코드 입니다.

* 주의! 색깔코드를 잘 선택해 주셔야 해요. 잘못하면 다른 부분의 색깔도 투명해집니다.

2. 또하나는 아이프레임에 연결될 웹페이지.

웹페이지 안에 스크롤바 소스가 있을꺼예요.
#999999(또는 자신이 투명하게 만들 색깔)
이 색깔 코드를 스크롤바 중에 투명하게 만들 부분에다가 넣어주기만 하면 되는거죠.

ex) 도리네 투명한 스크롤바 소스입니다.

body{scrollbar-3dlight-color:#999999;
scrollbar-arrow-color:#999999;
scrollbar-track-color:#999999;
scrollbar-darkshadow-color:#999999;
scrollbar-face-color:#999999;
scrollbar-highlight-color:#000000;
scrollbar-shadow-color:#000000;}



잘 따라오셨나요? 이해가 안가고 약간 어려우셨죠?(저만 그런가-_-;;)
이번 웹팁은 궁금한점이나 이해가 안가는 부분을 메일로 질문 받겠습니다.

※잠깐! 이 강좌는 100% 도리가 글자 하나하나 만든것이예요.
그러니 통채로 퍼가실때는 배너와 함께 출처도 남겨주셔야겠지요?
답변들
re: 투명 스크롤바 //
mammom (2004-09-08 19:17 작성, 2004-09-08 19:20 수정) 이의제기

이기능은 iframe( 아이프레임)기법을 써서 irame으로 게시판이나 문서를 불러들이는

방식이랍니다.

 

일반스크롤바 색상지정하고는 조금 다르답니다.

이러한 효과를 하려면 iframe을 써야 한다는 유의점.

iframe을 어디에 어떻게 써야 하는지 아실것이라 이해하고 설명을 합니다.

 

1. 아이프레임넣는 디자인작업

[1]html문서에 나타내고자 하는 전체 테이블및 디자인 작업

[2]보여지고자 하는 테이블 디자인에 넓이와 높이(width, height)값을 지정

[3]넓이와 높이 지정한 곳에서 iframe 명령어 태그 넣기

 

여기까지는 iframe을 어디에 써야 하는지를 설명.

 

2. 아이프레임 넣는 옵션기능(태그설명)

 

<iframe src="note.htm" name=in width=284 height=231 frameborder=0 allowTransparency="true" style="filter: chroma(color=#999999)"></iframe>

 

[ 아이프레임 설명 ]

1)아이프레임 안에 처음으로 보여질 문서명  src="note.htm"

2)아이프레임 고유이름 name="in"

3)아이프레임 높이와 넓이 width=284  height=231

4)아이프레임보드 선굵기 frameborder=0 (없음)

5)아이프레임스크롤 화살표색상  allowTransparency="ture" (투명으로 설정)
                                                               allowTransparency="false"(투명해제)

6)아이프레임 스크롤 표시 선색상 style="filter:chroma(color=#999999)"

 

3.아이프레임 안으로 불러오기 타겟(Targer) 지정해주기

 

메뉴에 링크 걸기

<★a href="link.htm" target="in" onfocus='this.blur()>메뉴이름 </a>

target="in" 으로 지정해 주어야  iframe 안으로 불러옵니다

 

이렇게 작업하시면 됩니다

 

 

어떤 님의 블로그에서 퍼온검다.

급해서 그냥 ^^;