NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


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>
<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>

웹 브라우저(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 에 대한 자동업데이트가 시작될 테니까요.

관련 포스트

이 문서는 2007년 9월 8일 작성된 포스팅 "IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6." 으로 업데이트 되었습니다. 업데이트된 포스팅을 참조하시는 것이 강력하게 권장됩니다.

분류: CSS,웹 디자인,웹 접근성,웹 표준,자바스크립트 | 2006년 12월 16일, 0:13 | 정찬명 | 댓글: 29개 |
트랙백URI - http://naradesign.net/wp/2006/12/16/101/trackback/

29개의 댓글이 있습니다.

  1. 윤좌진 댓글:

    중앙인사위원회도 position:fixed; 를 이용해서 퀵메뉴를 모니터에 붙여버렸죠^^
    하지만 IE6버전 때문에 fixed.js 파일을 이용해 IE에서 position:fixed가 뭔지 인식하게 해야했죠..-_-;;
    IE7에서 FF처럼 잘 되는걸 확인했을땐 정말 기뻤습니다 ㅋㅋ

  2. 정찬명 댓글:

    앗! 그런방법이 있었군요. fixed.js 파일 공유좀 해주세요^^; 현재 포스트에 추가해볼까 합니다. 미리 Thank you!

  3. 윤좌진 댓글:

    중앙인사위원회 사이트에 사용했으니 아마 받으실수 있으실껍니다
    근데 찬명님이 생각하시는 자바스크립트가 맞는거같은데..;;;
    아마 아시는 기능이라 생각됩니다..;;
    주소 붙입니다.
    http://www.csc.go.kr/js/fixed.js
    선언은 IE전용이니깐 ^^

    욜케 하시면 ㅎ;;

    관련사이트는 여깁니다. http://www.doxdesk.com/software/js/fixed.html
    저는 따라다닌다기보다는 “IE6은 fixed를 몰라서 반응속도가 좀 더뎌서 늦게 달라붙는다” 라고 표현하고 싶어요^^;;

  4. 정찬명 댓글:

    좌진님, 감사합니다. 테스트 해본 다음 현재 포스트에 추가해 놓겠습니다. 근데 알려주신 코드를 적용하면 IE6.x 뿐만 아니라 IE 7.x 브라우저에서도 똑같이 ‘버벅’ 대는 현상이 생기는군요. 이것을 사용할지 말지에 대한 여부는 그때그때의 상황에 맡겨야 하겠지만 일단 팁으로서의 가치가 있다고 생각되네요.

  5. 윤좌진 댓글:

    앗…전 그래서 IE6만 적용해도록 hack으로..ㅎ;;

  6. 정찬명 댓글:

    앗…그런 팁 있으시면 블로그에 써주시고 제 글에 트랙백좀 걸어주세요.ㅎㅎㅎ.

  7. 임세영 댓글:

    ㅠㅠ 정말 감사합니다.
    내일이 마감일인지라.. 오늘은 기필코 찾아야지 하다가 이렇게 찾게 되었네요…
    다른 스크립트를 쓰면 이상하게 에러나고 안되고 그랬는데..
    이건 바로 되었네요 ㅠㅠ
    감사합니다. 그리고 참 편한 팁이네요… fixed.js 파일도 감사합니다.

  8. 정찬명 댓글:

    정찬명 선수와 윤좌진 선수가 각각 1어시스턴트를 기록하는 순간이군요! 또 오세요 ^^;

  9. 차윤정 댓글:

    와아~~ 완전편한 소스에요
    담에 꼭 사용해 보겠습니다+_+

  10. 쌈마이 댓글:

    1024 X 768 해상도에서 보기 좋게 적용한후 1240 X 1024로 보면 본문으로 밀려 오길래
    px을 %로 바꿔 봤더니 제대로 원하는 모양을 낼수가 없네요.

    혹시 안 바쁘실때 조언 좀 부탁 드려 봅니다.

  11. 마그리뜨 댓글:

    유용한 자료가 많네요. 알기 쉽고…
    꼬박 출석을 해야겠습니다.

  12. 나에 댓글:

    윤좌진님이 마지막으로 쓰셨던 말씀은
    아마 ie conditional comment 방식일 겁니다.
    검색해보세요. 사용법이 꽤 많거든요. (이미 알고 계실 지 모르지만)

    그리고 ie6을 제외한 다른 브라우저들은 position: fixed가 먹히는데
    ie6에서 안 먹는 건 뭐 버그라서 그런건데
    정찬명님이 쓰셨던 코드에도 나와있지만 position에 버그가 있어서
    역으로 스크롤이 있는 엘리먼트에 position: relative; 와 자식 앨리먼트에
    position을 absolute를 넣어주면 fixed 효과가 나더군요.
    (팝업 작업할 때 알게 됐습니다;; )

  13. 윤재민 댓글:

    쌈마이님 글에 공감합니다.. 화면해상도에 따라 X좌표값이 다르니 위치가 각각이네여
    이거 어뜨케 해결할 방법이 없을까요 ㅠㅠ

  14. 정찬명 댓글:

    윤재민님께, 쌈마이님글에 제가 댓글을 달지 않은 것을 보니 아무래도 제가 댓글을 보지 못했거나 내용을 이해하지 못해서 답변을 미루다가 잊혀진 것 같습니다.

    쌈마이님과 같은 현상은 레이어의 X좌표 위치를 결정할 때 left를 기준으로 하지 않고 right를 기준으로 하는 경우에만 발생하는 현상으로 이해하고 있습니다.

    하지만 제가 작성한 예제들은 모두 X좌표 위치를 left로부터 계산하고 있는데 어떻게 그런 현상이 발생하는지 이해를 하지 못하고 있습니다.

    혹시 동일한 증상이 재현되는 예제 페이지 또는 코드를 보여주실 수 있을까요?

  15. 최상운 댓글:

    힝 브라우저 창 크기를 줄였을때는 안보이네요.

  16. 정찬명 댓글:

    이 예제를 포함해서 사용을 적극 권장하지는 않지만 업데이트된 문서도 한번 보세요. ^^

  17. 녀미 댓글:

    홈페이지가 중앙정렬인 페이지는 어떻게 하나요?

  18. 정찬명 댓글:

    position:fixed 속성은 항상 좌표 기준점을 body 요소로 부터 시작하기 때문에 중앙 정렬된 페이지에 응용하기에는 적합하지 않습니다. ^^

  19. 오현 댓글:

    오른쪽 정렬(left:50%; margin-left: 중앙정렬된 넓이의 반 에서 추가하고 싶은 만큼)
    왼쪽 정렬{(left:50%; margin-right: 중앙정렬된 넓이의 반 + 퀸 메뉴의 넓이 + 추가하고 싶은 만큼)
    이렇게 하면 안되나요??

    ie6은 생각 안했습니다.

  20. 정찬명 댓글:

    오현님 때문에 제가 건성으로 답변한게 들통난것 같네요. ㅎㅎㅎ. 감사합니다. IE6도 유사한 방법으로 가능할 것 같은데요.

  21. 유리블랙 댓글:

    우왕ㅋ_ㅋ 역시 찾는게 다 있네요!

    어디서 소스를 주웠는데.. position:fixed; 말고 _position:absolute; 도 있더라구요.
    top:0;가 있는데도 _top:-1px; 도 있고…
    그래서 도대체 _xxxx가 뭔가 하고 _top 검색하니까.. ㅋㅋ 이게 핵이였군요!
    n모 검색 사이트에서 ㅋㅋ top _top 검색하니까 top&top 이런것만 나오고 – -….

    그 주웠던 소스 보니까…
    var wrap_div = document.getElementById(‘wrap’);
    var content_div = document.getElementById(‘contentArea’);
    var fixed_layer = document.getElementById(‘floatArea’);
    var chk_ie6 = navigator.appVersion.substring(25,22);
    로 정의해서 풀어가는 소스도 같이 있던데.. 저거 지우고 CSS만 가지고도 잘 되네요.
    호환때문에 그런건가…..
    걍 html 파일 받아서, 어디서 받았는지 기억은 잘 안나는데,, 그분도 나라디쟈인 소스 참조했다고 했던 것 같은데… 어쨌든 우왕 ㅋ_ㅋ 굳 ㅋ_ㅋ 블로그ㅋㅋ

  22. 정찬명 댓글:

    @유리블랙
    저는 이거 잘 사용하지 않지만. ㅎㅎ 감사합니다. ^^

  23. 붕어 댓글:

    ^_^ css 갓 입문하려는 학생인데 정말 간단한 몇줄로 되네요! 감사합니다!

  24. […] ie6에서는 이 css가 작동하지 않는다. 그래서 _position: absolute; 를 넣었다.(디자인과 IE6를 대하는 관점 보기) ie6에서는 absolute로 화면에 고정될 […]

  25. 웹입문 댓글:

    와 이거 대박이네요.
    처음 알았습니다. 이렇게 만든다는 사실을요.

  26. 초보 댓글:

    CSS를 이렇게 사용하니 가운데 정렬시에도 적용되는 것 같습니다.
    정말 많은 도움이 되었습니다. 감사합니다^^

    #quickLink { position:fixed; _position:absolute; left:50%; top:160px; width:100px; height:300px;margin-left: 495px}

  27. 익명 댓글:

    이렇게 간단한 소스가 있다니 ㅠㅡㅠ 감동입니다.
    유용하게 잘 쓰겠습니다.

  28. 김태희 댓글:

    따라 다니면서 블록 속성 옆에 항상 붙어 있게 하려면 CSS로는 가능한가요?
    제 블로그 사이드 바를 CSS만으로 컨텐츠 옆에 붙여 놓고 싶은데요..

    앱솔루트를 쓰면 브라우저 크기에 따라서 위치가 변하니 잘 모르겠습니다…

  29. 정찬명 댓글:

    @김태희
    fixed 속성은 좌표 기준점이 항상 body가 됩니다. 따라서 fixed로는 불가능 할 것 같구요. 그렇다고 absolute를 사용하면 콘텐츠 옆에 붙여둔다 해도 스크롤 할 때 화면 밖으로 사라져 버리겠네요. 아마도 원하는 UI는 CSS만으로는 불가능하지 않을까 생각해요.

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님