RadarURL

웹 프로그래밍
2012.10.27 07:54

따라 다니는 플로팅 배너 사용 방법

조회 수 3661 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
제 블로그 오른쪽 사이드바에 보시면 따라 다니는 플로팅 배너가 있는데 어떻게 사용하는지에 대해서 알려 드리도록 하겠습니다.

제가 사용한 방법이 완벽한 방법은 아닙니다. 저도 코드를 만들면서 모든 브라우저에서 완변히 사용되도록 할려고 노력해 봤는데 제 기술이 모자라서 그런지 제가 원하는대로 잘 되지 않더군요. 그래도 어느 정도는 크로스 브라우징이 되니 사용하는데는 크게 지장이 없을거 같습니다.


스크립트 코드
<script>
function floating_close(divid) {
//플로팅 광고 닫기
var strObj = document.getElementById(divid);
 strObj.style.display = "none";
}
</script>

위 스크립트 코드를 </head> 위에 복사해서 붙여넣기 하시기 바랍니다. 이 스크립트 코드를 이 위치가 아닌 배너 코드 위에 넣어도 되긴 한데 그렇게 하니 파이어폭스에서 [닫기] 기능이 되질 않더군요. 그러니 왠만하면 </head> 위에 넣으시기 바랍니다.

HTML 코드
<!--
<div class="fixed-bottom" >
<div id="flotting_layer" >
<table cellpadding="0" cellspacing="4" border="0" bgcolor="#000000">
<tr>
<td bgcolor="#FFFFFF" onClick="floating_close('flotting_layer')">
(해당 배너 코드)
</td>
</tr>
<tr>
<td align="center">
<a href="javascript:floating_close('flotting_layer');" 
                                    style="color:#FFFFFF; text-decoration:none; font-size:12px;">
[닫기]
</a></td></tr></table></div></div> -->

저 같은 경우는 사이드바에 따라 다니는 플로팅 배너를 넣는게 목적이였기 때문에 위 코드를 사이드바가 위치한 [sideinfo] 코드 아래 부분에 넣었습니다. 다른 곳에 위치하고 싶으신 분들은 코드를 적당한 곳에 넣으시기 바랍니다. 그리고 다 아시겠지만 코드 부분에 <!--, --> 는 빼고 넣으시기 바랍니다. 

CSS 코드
.fixed-bottom    /* position fixed bottom */
{position:fixed;bottom:5px; top:auto;margin-bottom: 0 auto;z-index:900;}

@media screen and (-webkit-min-device-pixel-ratio:0)
{ .fixed-bottom    /* 크롬 position fixed bottom */
{position:fixed;bottom:55px; top:auto;margin-bottom: 0 auto;}
}

* html .fixed-bottom /* IE6 position fixed Bottom */
{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop-5+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}


 

마지막으로 위 CSS 코드를 style.css 제일 아래 부분에 넣어 주시면 됩니다. 이렇게 하시면 코드는 모두 끝이 납니다. 살짝 복잡한 감도 없잖아 있지만 한방에 할수 있는 방법으로는 좀 어렵겠더군요. 

[추가내용]
간혹 플로팅 배너가 다른 위젯 아래로 내려 간다면 기존에 코드를 가져 가셨던 분들은 CSS 코드 부분에 빨간 글씨로 된 부분만 추가 하시면 되고 처음 적용하시는 분들은 모두 복사해서 넣으시면 됩니다. 그런데 IE6에서 다시 확인해 보니 select 박스 아래로 플로팅 배너가 아래로 내려 가더군요.


이걸 어떻게 수정해 볼려고 했는데 인터넷에 검색을 해보니 IE6 버그라서 안된다고 하네요. select 박스가 무조건 최상위로 표현 된다고 합니다. 편법으로 아이프레임을 쓰면 된다고 하는데 제가 아이프레임 쓰는걸 싫어 해서 그냥 놔둘려고 합니다. IE6은 왜이리 사람 애를 먹이는지... ㅜ.ㅜ 






그리고 제가 이 코드를 좀더 테스트 하고 공개 할려고 했는데 물어 보시는 분들이 계셔서 공개를 하긴 합니다만 서두에서도 말씀 드렸듯이 완벽한 코드는 아닙니다. 약간의 문제가 있긴 한데 위 코드를 적용 하신후 레뷰 사이트에 들어가 보시면 크롬, 사파리, IE6을 제외한 브라우저에서는 닫기 버튼이 가려지는 것을 보실수 있을 것입니다. 


레뷰에서 상단 추천바가 추가된 만큼 아래 bottom 부분이 위로 올라와야 하는데 그게 안되네요. 다음뷰나 다른 상단 추천바가 있는 사이트들은 괜찮은데 제가 확인 해본바로는 레뷰만 안되는거 같습니다. 크롬과 사파리는 사이트별 상단 추천바에 따른 bottom 명령어가 아예 먹히지 않아서 레뷰에 맞춰서 @media~ 로 시작하는 CSS 핵 부분을 추가 하면서 55px 만큰 아예 고정으로 해놔서 모든 사이트에서 55px 만큼 떨어져서 보일 것이고 IE6도 bottom 명령이 안먹혀서 *html~ 시작하는 전용 CSS로 해놓으면서 본문 높이에 따라 계산을 해서 bottom 을 지정하기 때문에 문제가 없는걸로 보입니다.

IE6 CSS를 좀 응용해서 모든 사이트에 맞게끔 해볼려고 했는데 그게 안되더군요. 이런 이유로 모든 브라우저에 사용할수 있는 크로스 브라우징이 되지 않는 미완성이라 좀더 연구해 보고 포스팅을 할려고 했는데 쉽게 찾아 지질 않을거 같고 이 코드를 요구하시는 분들도 계셔서 포스팅을 합니다. 저보다 실력이 좋으신 분들이 계시면 크로스 브라우징이 되는 방법을 아시면 좀 알려 주세요. ㅜ.ㅜ

제가 개발자지만 웹을 개발하면서도 그렇고 블로그 코드를 추가, 수정 하면서도 그렇고 제가 전문 웹개발자가 아니라서 그런지 웹표준과 크로스 브라우징이 되게 하기 위한 CSS와 스크립트는 너무 어려운거 같아요. ㅠ.ㅠ

 

출처 : http://mastmanban.tistory.com/522

?

공부 게시판

공부에 도움되는 글을 올려주세요.

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
공지 [공지] 공부 게시판 입니다. 처누 2003.08.18 927788
1086 기타 2012년 달라지는 것들 file JaeSoo 2012.10.30 3455
1085 건강 클리토리스는 이렇게 생겼습니다. file JaeSoo 2012.10.29 6823
1084 자동차 아이나비 블랙박스 G100 설치기(상시전원) - 생각보단 쉬워요 ^^ file JaeSoo 2012.10.29 9401
1083 자동차 파인드라이브 뮤직모드 MP3 가사 사용 방법 file JaeSoo 2012.10.29 5158
» 웹 프로그래밍 따라 다니는 플로팅 배너 사용 방법 JaeSoo 2012.10.27 3661
1081 자동차 배터리 방전의 범인은 블랙박스 상시전원! file JaeSoo 2012.10.27 5158
1080 자동차 블랙박스 보험할인 3% 받기 JaeSoo 2012.10.27 6315
1079 자동차 자동차보험 제대로 보상 받으려면... (차량가액 및 연식, 부속품가액, 차량 형식과 세분 등) JaeSoo 2012.10.26 6407
1078 경제 혜담카드로 쿠팡이나 티몬도 할인 가능한가요? JaeSoo 2012.10.26 5944
1077 자동차 자동차블랙박스/ 상시전원케이블을 믿었다간 낭패 file JaeSoo 2012.10.26 10437
1076 자동차 차량용 블랙박스 달고 보험료 할인받으세요 file JaeSoo 2012.10.26 6279
1075 자동차 HD 블랙박스 적당한 메모리 용량 JaeSoo 2012.10.26 8414
1074 자동차 후방 블랙박스가 필요한 이유 JaeSoo 2012.10.26 6494
1073 웹광고 구글 AdSnse를 차단하는 방법 JaeSoo 2012.10.26 4498
1072 웹광고 알라딘의 Thanks to Blogger[TTB] 란? file JaeSoo 2012.10.26 3394
1071 웹광고 알라딘 TTB 입맛대로 설정하기 file JaeSoo 2012.10.26 7409
1070 건강 벤조피렌이란? file JaeSoo 2012.10.25 3128
1069 경제 '블로그로 돈버는' 블로그 광고 사이트 6가지 소개!! [BlogTip] file JaeSoo 2012.10.24 4786
1068 경제 무이자 3개월의 환산 피킹율 JaeSoo 2012.10.23 3592
1067 경제 주택 재산세 계산방법, 아파트 재산세 자동 계산기 file JaeSoo 2012.10.22 12985
Board Pagination Prev 1 ... 65 66 67 68 69 70 71 72 73 74 ... 124 Next
/ 124


즐겨찾기 (가족)

JAESOO's HOMEPAGE


YOUNGAE's HOMEPAGE


장여은 홈페이지


장여희 홈페이지


장여원 홈페이지


즐겨찾기 (업무)

알리카페 홀릭

숭실대 컴퓨터 통신연구실 (서창진)

말레이시아 KL Sentral 한국인 GuestHouse


즐겨찾기 (취미)

어드민아이디

유에코 사랑회

아스가르드 좋은사람/나쁜사람

JServer.kr

제이서버 메타블로그

재수 티스토리


즐겨찾기 (강의, 커뮤니티)

재수 강의 홈페이지


한소리


VTMODE.COM


숭실대 인공지능학과


숭실대 통신연구실


베너