나라디자인

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

사실 ‘따라다닌다’ 는 표현은 잘못된 표현이고 그 반대로 ‘고정된’ 이라고 부르는 것이 맞는 표현 같습니다. 이번 글은 언젠가 한번 정리하려고 생각해 놓은 주제였는데 모질라 커뮤니티에서 어떤분이 ‘따라다니는 배너’ 소스에 대한 질문을 하셨기에 그곳에 답변 달아드리고 이곳에도 포스팅 합니다.

Javascript 가 Client Side 의 UI를 풍부하게 해주는 것만은 사실이지만 꼭 필요한 곳에만 사용해야 한다는 원칙이 필요합니다. 사실 저는 Javascript 코드를 처음부터 끝까지 직접 짜는 능력은 없지만 다행히도 특별히 코치해 주시는 선생님 과 주변의 전문가들이 계셔서 매번 어렵지 않게 문제를 해결하고 있습니다. 하지만 이마저도 싫어라 합니다. Javascript 가 동작하지 않는 환경을 고려하여 웹문서의 접근성을 높이려는 이유 입니다.

바로 본론으로 들어갑니다. 아래와 같은 코드를 사용하면 ‘CSS 만으로 따라다니는 배너 만들기(Updated_070908)‘ 가 가능합니다.

<!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>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
<div id="quickLink">Fixed Quick Link</div>
</body>
</html>

웹 브라우저(Vendor) 호환성 측면 검토

Firefox, Opera, Safari 브라우저와 특히 IE 7.x 도 이것을 지원합니다. 단, IE6.x 에서는 position:fixed 라는 표준속성을 지원하지 않기 때문에 예제코드에는 underscore hack ‘_’ 을 사용하였고 이것은 IE 6.x 이하의 버전에서만 position:absolute 방식으로 작동하게 된다는 것을 의미합니다. 즉, IE 6.x 이하의 버전에서는 문서의 내용에 고정되고 나머지 브라우저에서는 문서와는 별개로 창에 고정(fixed)되어 의도했던 효과대로 스크롤을 따라다니는 것처럼 보입니다.

장점

자바스크립트를 사용하는 것보다 시스템리소스를 덜 잡아먹으며 코드가 줄고 ‘깔끔’ 해진다는점 입니다.

단점

IE 6.x 브라우저에서만 다르게 렌더링 된다는 점 입니다. 하지만 이것은 큰 문제가 되지는 않는다고 생각합니다. 저같은 경우는 클라이언트를 직접 설득합니다. 그렇지 않아도 AxtiveX 나 다른 필수 Javascript 때문에 로딩속도가 느린데 그런 단순한 기능도 Javascript 를 사용해서 페이지 로딩속도에 지장주지 말고 웹 표준으로 깔끔하게 처리하자구요. 실제로 있었던 일입니다.

‘IE 6.x 에서 큰 문제가 되지 않는다’ 는 발언으로 미루어 추측하셨겠지만 특히 요즈음과 같은 경우 하위버전 호환성보다 상위버전 호환성에 무게를 두고 개발하는 편입니다. 내년 상반기부터는 IE 7.x 에 대한 자동업데이트가 시작될 테니까요.

11개의 댓글이 있습니다.

윤좌진 댓글 | 2006년 12월 16일, 13:55
중앙인사위원회도 position:fixed; 를 이용해서 퀵메뉴를 모니터에 붙여버렸죠^^
하지만 IE6버전 때문에 fixed.js 파일을 이용해 IE에서 position:fixed가 뭔지 인식하게 해야했죠..-_-;;
IE7에서 FF처럼 잘 되는걸 확인했을땐 정말 기뻤습니다 ㅋㅋ
정찬명 댓글 | 2006년 12월 16일, 14:53
앗! 그런방법이 있었군요. fixed.js 파일 공유좀 해주세요^^; 현재 포스트에 추가해볼까 합니다. 미리 Thank you!
윤좌진 댓글 | 2006년 12월 16일, 15:01
중앙인사위원회 사이트에 사용했으니 아마 받으실수 있으실껍니다
근데 찬명님이 생각하시는 자바스크립트가 맞는거같은데..;;;
아마 아시는 기능이라 생각됩니다..;;
주소 붙입니다.
http://www.csc.go.kr/js/fixed.js
선언은 IE전용이니깐 ^^

욜케 하시면 ㅎ;;

관련사이트는 여깁니다. http://www.doxdesk.com/software/js/fixed.html
저는 따라다닌다기보다는 “IE6은 fixed를 몰라서 반응속도가 좀 더뎌서 늦게 달라붙는다” 라고 표현하고 싶어요^^;;
정찬명 댓글 | 2006년 12월 16일, 15:44
좌진님, 감사합니다. 테스트 해본 다음 현재 포스트에 추가해 놓겠습니다. 근데 알려주신 코드를 적용하면 IE6.x 뿐만 아니라 IE 7.x 브라우저에서도 똑같이 ‘버벅’ 대는 현상이 생기는군요. 이것을 사용할지 말지에 대한 여부는 그때그때의 상황에 맡겨야 하겠지만 일단 팁으로서의 가치가 있다고 생각되네요.
윤좌진 댓글 | 2006년 12월 19일, 16:30
앗…전 그래서 IE6만 적용해도록 hack으로..ㅎ;;
정찬명 댓글 | 2006년 12월 19일, 17:25
앗…그런 팁 있으시면 블로그에 써주시고 제 글에 트랙백좀 걸어주세요.ㅎㅎㅎ.
임세영 댓글 | 2007년 2월 5일, 21:33
ㅠㅠ 정말 감사합니다.
내일이 마감일인지라.. 오늘은 기필코 찾아야지 하다가 이렇게 찾게 되었네요…
다른 스크립트를 쓰면 이상하게 에러나고 안되고 그랬는데..
이건 바로 되었네요 ㅠㅠ
감사합니다. 그리고 참 편한 팁이네요… fixed.js 파일도 감사합니다.
정찬명 댓글 | 2007년 2월 6일, 3:58
정찬명 선수와 윤좌진 선수가 각각 1어시스턴트를 기록하는 순간이군요! 또 오세요 ^^;
차윤정 댓글 | 2007년 11월 23일, 15:17
와아~~ 완전편한 소스에요
담에 꼭 사용해 보겠습니다+_+
쌈마이 댓글 | 2008년 2월 27일, 15:38
1024 X 768 해상도에서 보기 좋게 적용한후 1240 X 1024로 보면 본문으로 밀려 오길래
px을 %로 바꿔 봤더니 제대로 원하는 모양을 낼수가 없네요.

혹시 안 바쁘실때 조언 좀 부탁 드려 봅니다.
마그리뜨 댓글 | 2008년 5월 29일, 15:46
유용한 자료가 많네요. 알기 쉽고…
꼬박 출석을 해야겠습니다.

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

웹 브라우저(Vendor) 호환성 측면 검토

장점

단점

관련 포스트

11개의 댓글이 있습니다.

댓글 남기기.