NARADESIGN

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


IE6에서 레이어 고정시키기 핵. Fixed Layer Hack for IE6.

본문 건너 뛰기

CSS에는 position:fixed 라는 속성이 존재하고 이 속성이 부여된 엘리먼트는 화면에 고정되어 스크롤을 해도 움직이지 않고 항상 같은 자리에 머물게 됩니다. 흔히 "스크롤을 따라다니는 배너" 라고 표현하는 이런 UIO(User Interface Object) 따위를 코딩할 때 이 속성을 사용할 수 있는데 보통의 경우 IE6에서 지원하지 않기 때문에 별도의 자바스크립트를 추가하여 이 기능을 구현해 왔습니다. 하지만 이제는 더이상 그럴 필요가 없을것 같습니다. 자바스크립트는 전혀 사용하지 않고 CSS Hack을 사용하여 IE6 에서 position:fixed 상태의 레이어를 구현할 수 있는 팁을 발견하였습니다.

예제 미리보기
http://naradesign.net/open_content/reference/fixedLayer/index.html

CSS Code

* { margin:0; padding:0;} /* html, body 사이의 간격을 제거 */
html { _overflow:hidden;} /* 기본 스크롤 제거 */
body{ _height:100%; _width:100%; _overflow:auto;} /* 대체 스크롤 생성 */
#content { width:580px; height:1000px; margin:20px; padding:10px; background:#eeeeee;}
#aside { position:fixed; _position:absolute; _z-index:-1; left:650px; top:20px; width:100px; height:300px; padding:10px; background:#dddddd;}

HTML Code

<div id="content">
<h1>Fixed Layer Hack for IE6</h1>
</div>
<div id="aside">
<h2>Example</h2>
</div>

이 팁의 핵심은 <html> 요소에서 발생하는 스크롤을 제거하고 <body> 요소에 스크롤을 부여하는 것입니다. <html> 에 스크롤이 붙으면 <html> 내부의 모든 콘텐트가 스크롤과 함께 움직이지만 <body> 요소로부터 발생한 스크롤은 <html> 요소를 offset(x,y) 기준점으로 삼고있는 #aside 요소의 화면배치에 아무런 영향을 주지 않습니다.

만약 <body> 요소에 position:relative 를 주게 된다면  offset 의 기준점이 <body> 가 되기 때문에 레이어를 화면에 고정할 수 없는 상태로 다시 돌아가게 됩니다. 예제 코드에서 강조 표시된 코드가 관련 코드이며 이 팁의 내용을 더욱 자세하게 이해하고 싶으시면 관련 CSS 속성을 하나씩 제거하면서 테스트 해보시기 바랍니다.

브라우저 호환정보

  • Firefox2, Opera9, Safari2, IE6~7 에서 모두 동일하게 position:fixed 형태로 렌더링 합니다.
  • IE5.0~IE5.5 버전의 브라우저에서는 position:absolute 형태로 렌더링 합니다.
  • DTD가 Quirks Mode 상태일 때에는 적용되지 않습니다.

발견된 문제점

  • 현재 코드는 IE6 핵으로서 #aside 영역에 _z-index:-1 속성을 사용하였기 때문에 IE6 에서는 #aside 영역의 텍스트를 자연스럽게 드래그 하거나 링크를 클릭할 수 없습니다. 다른 브라우저에서는 발생하지 않는 현상입니다.
  • 한편 _z-index:-1 을 제거하게 되면 텍스트를 드래그 하거나 링크를 클릭하는 것이 가능하지만 화면크기를 줄였을 때 #aside 레이어가 세로 스크롤바를 덮는 현상이 발생합니다. 이 문제 역시 IE6 에서만 발생하는 현상입니다.

참조

분류: CSS | 2007년 9월 8일, 5:57 | 정찬명 | 댓글: 79개 |
트랙백URI - http://naradesign.net/wp/2007/09/08/128/trackback/

79개의 댓글이 있습니다.

  1. 김정윤 댓글:

    브라우저의 기본 스크롤을 컨트롤 하는 방법이라 적용하기가 살짝 두렵네요 ^^;;
    ie6에서 창을 줄였을 경우 세로스크롤에 문제도 조금 있구요(레이어가 스크롤 위로 올라가는… 위치도 살짝 ^^;;)
    소스를 약간만 보완하면 좋은 팁이 될거 같네요~ 좋은 정보 감사요~~~

  2. 정찬명 댓글:

    아~ 브라우저 크기를 줄였을 때 레이어가 스크롤을 덮어버리는군요. 이거 아직 끝나지 않은 숙제인걸요. 정윤님, 좋은 해결방법이 없을까요?

  3. 정태영 댓글:

    예전에 이 방식을 보고 적용해서 작업했던 적이 있는데 이런 원리였군요.

    위엣 분이 얘기하신 문제는 저도 겪어봤는데 +_+ 원리를 알면 해결책도 알 수 있는 법!!

    javascript 의 onload, onresize event 에서 viewpoint 사이즈를 얻은 후 body 의 height 를 height(viewpoint)-height(fixed layer) 로 조정해주면 해결이 가능하지 않을까요?

  4. 정찬명 댓글:

    일단, Javascript 를 사용하지 않고 이 문제를 해결 할 수 있는 방법이 있는지 이 글을 보신 분들과 함께 연구해 보면 좋겠네요. 저도 틈날 때 연구해 보겠습니다. 지금으로서는 딱히 떠오르는 생각이 없지만 ㅡㅡ;

  5. freeism 댓글:

    와… 이런 방법이 또 있나요?
    별나라 이야기 같습니다만… 언젠가 써먹을일이 있을 때 매우 유용할 듯 싶습니다. ^^
    감사합니다~~

  6. 조준희 댓글:

    흥미로운 CSS code 네요..^^
    그런데 _position:absolute; 같이 position 앞에 _ 를 붙이는건 어떤 경우인가요? _ 를 붙인걸 몇번인가 본적이 있는데 설명을 찾다가 결국은 여기에 질문을…^^;;;

    그리고 혹시나 해서 하나 더 덧붙입니다.
    IE 6.X 에서만 발생하는 문제인데요(뭐 ie가 항상 문제를 일으키는 관계로 그렇게 놀랍지는 않습니다만..ㅡ..ㅡ )

    CSS 코드는

    * {
    margin:0;
    padding:0;
    }

    #wrap1 {
    float:left;
    width:180px;
    height:300px;
    background-color:#999999;
    }

    #wrap2 {
    margin-left:180px;
    height:600px;
    border-left:1px solid #000000;
    }

    이구요, html은

    [div id=”wrap1″]test[/div]
    [div id=”wrap2″]test[/div]

    입니다. 문제는 두 div 사이에 2 픽셀의 간격이 생기는데요…왜 마진이 생기는지 설명은 안되지만 나름 발견한 문제여서 글을 남깁니다…
    (정찬명 님께서 올리신 글하고는 크게 상관은 없는 것 같지만 딱히 올릴만한 곳을 찾지 못해서..)

  7. 이은주 댓글:

    좋은 정보네요.^^
    이런방법도 있구나~하면서 놀랍고 제공해 주셔서 감사합니다. 잘쓰겠습니다.

  8. 정찬명 댓글:

    조준희님께, 답변이 엄청 늦었네요. 기다리셨다면 죄송합니다 (__)
    정체불명의 3px 마진이군요. 저 버그도 분명 이름이 있을텐데 제가 IE6의 모든 버그들을 외는게 아니라서 ㅡㅡ; 이름은 모르겠구요.

    본래 표준대로 따지자면 float 된 박스와 float 되지 않은 박스는 서로의 공간배치에 영향을 미치지 않고 겹쳐야(다른층에 떠있어야) 정상입니다. IE 이외의 표준계열 브라우저에서 보시면 #wrap1과 #wrap2는 분명 겹쳐 보이실껍니다.

    하지만 겹치치 않기 위해서 #wrap2 에 다시 margin-left:180px 을 주셨네요.

    이 버그는 IE에서만 발생하며 float 된 박스와 float 되지 않은 박스가 만날 때 발생하는 것 같습니다.
    즉, #wrap1과 #wrap2 가 만나는 상황이 지금 딱 그런 상황이라서 이유없는 마진이 발생한 것 같구요.

    저같은 경우 화면을 배치할 때 #wrap1과 #wrap2 모두 float 시켜 버립니다.
    그렇게 되면 margin-left 를 줄 필요도 없고 3px 마진 버그도 없게 됩니다.

    그리고 나서 #wrap1과 #wrap2의 높이를 부모 엘리먼트에게 전달하기 위해서 #container 쯤 될법한 부모상자에 overflow:hidden 을 주면 자식들의 높이값이 부모에게 제대로 전달됩니다.(이 설명이 이해가 되지 않으시면 #wrap1과 #wrap2를 모두 감싸는 #container 상자를 만드신 다음 #container 상자에 배경색을 넣고 overflow:hidden 속성을 넣거나 빼면서 테스트 해보시면 됩니다. overflow:hidden 속성이 없으면 #container 의 높이는 0px이 되거든요.)

    설마 도움이 되시려나요? ^^

  9. 정찬명 댓글:

    이은주님, 반갑습니다 ^^ 사용시 부작용 꼼꼼하게 읽어보시고 사용해 주세요 (__)

  10. 정찬명 댓글:

    코드를 약간 수정하였습니다. #aside 레이어가 스크롤을 덮는 문제를 _z-index:-1 으로 해결했습니다. 그러나.. #aside 영역의 텍스트를 드래그 하거나 링크의 클릭이 되지 않습니다. 쉬뜨.. 해결사 어디 없나요? ㅡㅜ; (현재로서는 네비게이션 요소만 아니라면 일단 쓸 수는 있겠네요.)

  11. 허걱.. 이렇게 좋은 정보를 몰래콤시 올려놓으시다닝~!!
    제 글에 트랙백 달아주세요옹~*
    (제가 달려고 하니, 뭔가 좀 거시기한거 같아서 -ㅛ-;;)

  12. 정찬명 댓글:

    하하~ 몰래콤시 올려놓은 것은 아니구요~ 요한씨 글에 댓글을 적었는데 어느순간 지워져 있더라구요. 요한씨의 필더링 시스템 때문인지 아니면 제가 글을 적어놓고 전송버튼을 안눌렀던가.. 그랬던 모양이에요. 늦었지만 결혼 축하드리구요. 직접 가서 축하해줬어야 하는데 그러지 못해서 미안했어요. ^^

  13. 아니에요~, 축하만 해주셔도 감사한걸요~ㅎㅎ

  14. 콩바구니 댓글:

    동생이 발견한 방법인데요.
    _top:expression(documentElement.scrollTop + (documentElement.scrollTop>120?스크롤뒤의높이 :처음높이-documentElement.scrollTop));

    이렇게 하면 완벽하게 Fixed포지셔닝이 가능해지더군요.

  15. 정찬명 댓글:

    콩바구니님, 의견 감사합니다. 콩바구니님의 코드가 포함된 예제페이지를 한번 볼 수 있을까요?

  16. 콩바구니 댓글:

    이크. 여기는 댓글 한번작성하면 수정할수 없나보네요.ㅠㅠ

    _top:expression(documentElement.scrollTop+ 높이);

    _top:expression(documentElement.scrollTop + (documentElement.scrollTop>갑?을:병-documentElement.scrollTop));
    갑: 처음 높이값
    을: 스크롤하는동안의 높이값.
    병: 갑+을

    이게 맞습니다.

    처음방법은. 일반적인 Fixed포지션이고,
    두번째방법은 조금더 발전된방법이랄까요. 스크롤이 내려갈때의 위치를 따로 지정할수 있습니다.

  17. 콩바구니 댓글:

    제 블로그에 바로 적용했지요.
    적용한 css 파일의 주소는

    http://cfs.tistory.com/custom/blog/2/24447/skin/images/style_ie6.css 입니다.

  18. 정찬명 댓글:

    아넵, 잘 봤습니다. 그런데 한가지 궁금한건요. expression을 사용했을때 아무런 문제상황이 발생하지 않으리라는 보장이 있나요? 표준이 아니라는 문제를 제외하고 페이지의 성능등에 영향을 미치지 않는지 궁금합니다.

  19. 콩바구니 댓글:

    expression을 사용했을때 잘못하면 특정상황에서 무한루프에 빠질수 있기때문에 사용을 자제하라는 말이 있더군요. 자세한문제는 잘 모르지만… 제 블로그에 적용해보고 시험해본결과. 한두개의 Fixed포지셔닝에 활용하는정도로 페이지의 로딩이 느려진다거나.CPU점유율이 높아진다거나. 하는 현상은 보이지 않았습니다.

  20. 호이♡ 댓글:

    이번 프로젝트에 팝업 상단 부분을 고정시키기 위해 이 포스트를 참고하여 적용해봤는데 결정적인 문제가 있더군요… 고정시키려는 부분 외에는 relative나 absolute 포지셔닝을 사용할 수가 없네요 적용하면 그 부분도 역시 고정이 되어버리기 때문에… ^^;

    특별히 포지셔닝을 하는 부분이 없다면 괜찮겠지만 사이드바에 사용하기엔 위에 있던 약간의 문제들도 있고 실무에서 사용하기엔 약간 위험부담이 있을 것 같습니다.(저같은 경우는 팝업컨텐츠가 특별히 포지셔닝을 사용하는 부분이 없어 일단 유지하고 있습니다)

    덧붙여 이번에 안 문제지만 IE7엔진기반에 multiple IE6으로 볼때는 position:fixed를 적용을 하더군요… 저도 이 문제를 생각도 못하다가 다른분 컴퓨터의 IE6을 보고야 알았습니다 -_-;;;

  21. 정찬명 댓글:

    네, 사실 저도 실무에서 이 코드 적용을 시도했다가 결국 포기했습니다. 극복해야 할 문제가 좀 있죠 ㅡㅡ;

  22. 스크롤바 Top…

    지금 제 블로그에 적용되어있는 스크립트 입니다. 이건 검색하면 나오는걸 그래도 가져다와서 사용했는데요. 익스플로러 6에서는 동작을 하는지 어떤지 모르겠습니다. Top 버튼이 따라 내려…

  23. 최용훈 댓글:

    가운데 정렬에서도 사용하고 싶어요.

  24. kris 댓글:

    작업중 IE6 fixed 핵 찾다가 여기에 오게 되었네요.

    공개하신 핵 조심스럽게 적용해보았는데.

    아직 크게 문제는 없어보이네요.

    더 테스트를 해봐야겠지만요..

    좋은 하루 되세요~

  25. 노지훈 댓글:

    z-index 를 -1 로 한 것은 무슨 의미가 있는 건가요? -1이 되면 기본 z-index 보다 더 뒤에 위치하게 되나요? 즉, flow 속에 있는 일반 엘리먼트 들 보다 뒤로 배치되는 의미인지 궁금합니다.

  26. 정찬명 댓글:

    기본적으로 자식요소는 부모보다 z-index가 높기 때문에 부모 뒤에 숨을 수가 없지요. 그런데 자식 요소에 z-index 음수값을 부여하면 부모 뒤에 숨는 것이 가능해 집니다.

    한 가지 유의할 것은 IE7을 포함한 하위 버전들이 이와 관련하여 버그를 지니고 있다는 사실입니다. IE는 부모 요소가 position:absolute | relative | fixed 값을 지니고 있으면 자식 요소의 z-index의 음수 값을 처리하지 않습니다.

    제가 올린 예제도 #content에 position 속성을 사용하지 않았기 때문에 #aside의 음수값을 IE가 제대로 처리해 주고 있는 것입니다.

    간단하게 아래 예제로 테스트 해보세요.

    <div style="background:#000; width:100px; height:100px">
    <div style="background:#f00; width:100px; height:100px; position:relative; z-index:-1; top:50px; left:50px"></div>
    </div>

    설명이 도움이 되셨는지요? ^^

  27. 노지훈 댓글:

    자세한 설명 감사합니다 ^^

  28. BOBS 댓글:

    다 좋습니다~ 아주 잘되네요~
    하지만 문제 한가지..ㅠ ㅠ
    저는 div 이녀석을 height:100% 주고 사용합니다..
    프레임에 꽉차게요..

    문제는..
    [!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”]
    이렇게 했을때는 화면에 꽉차게 잘 표현 됩니다..
    대신.. 고정 스크롤레이어가 안보이네요..
    (파폭,크롬에서는 잘되요..-_-; 익스플로러에서만 안됨)

    [!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”]

    이렇게 했을때는.. 스크롤 레이어 잘 보입니다. 작동 잘합니다..

    다만..
    height : 100% 을 했음에도 불구하고.. 100%로 안체워지고 아래 여백이 생겨요..
    … 해결 방법이 없는지요.OTL.. height 100%로 하는 방법이라도..
    아니면 뒷부분 지워도 고정 레이어가 보이는 방법이라도..ㅠㅠ (겨우 찾은 해결
    책이 위와 같이 뒷부분 지우는거였어요)

  29. 정찬명 댓글:

    @BOBS
    상황이 정확하게 이해가 되지 않습니다. 예제 페이지를 링크해 주시면 저도 한번 같이 고민해 보겠습니다. 그리고 위에 적어두신 두 종류의 DTD는 동일한 표준모드 DTD인데요. 두 DTD 사이에 차이점이 존재한다는 것도 기존에 알고 있던 지식과 달라서 혼란스럽네요.

  30. BOBS 댓글:

    넵~
    http://swmu.kr/test/index.html
    이것은 [!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”] 일때구요..

    http://swmu.kr/test/index2.html
    요건 [!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”] 일때 입니다..

    왼쪽 공중부양 메뉴와.. 익스플로러 크기를 늘렸을때 검은색 배경이 늘어
    나는것을 확인해 주시면 된답니다..ㅠ ㅠ

    미치겠어요 요것때문에..휴..ㅠ ㅠ

  31. BOBS 댓글:

    위에꺼는 익스플로러를 아래로 찌익 ~ 늘리면 검은 배경이 끊기구요..
    아래꺼는 익스플로러 아래로 찌익 ~ 늘려도 같이 늘어나용~ 100%

    문제는.. 아래꺼처럼 하려고 하는데.. 아래꺼로 하면.. 왼쪽 공중부양 메뉴가 안뜬다는거..ㅡ ㅡ 휴;;

  32. 정찬명 댓글:

    @BOBS
    한참을 뒤적거리다가 드디어 문제가 무엇인지 확인 했습니다. ㅡㅡ; 제가 한가지 착오했던게 두 종류의 DTD가 같다고 말씀드린 부분이었는데요. 잘못 봤습니다. strict.dtd 가 포함된 것은 완전 표준모드 이구요. 빠진것은 Quirks Mode 입니다.

    일단 저라면 다른 모든 문제를 덮어두고 Quirks Mode는 사용하지 않을 것입니다. Quirks Mode DTD를 사용하면 이것 하나 때문에 다른 브라우저와의 렌더링 불일치 문제는 더욱 많이 발생할 것이기 때문에 일단 표준 DTD를 사용할 것이고 strict.dtd 보다는 조금 덜 엄격한 transitional.dtd를 사용하겠습니다. strict.dtd 는 너무 엄격한 모드라서 예전에 작성된 HTML 코드를 쏟아 부을 경우 무수히 많은 오류를 뱉어내기 때문입니다. 지금 당장은 코드가 무결성을 유지할 수 있겠지만 앞으로 어떤 데이터가 이 페이지에 포함될지 모르니까요.

    DTD와 관련해서 조금 더 깊은 이야기는 제가 예전에 써놨던 포스트를 참고해 주세요. Quirks Mode 렌더링과 DTD. http://naradesign.net/wp/2007/03/27/118/

    제 의견에 동의 하신다면 일단 Quirks Mode DTD를 사용한 index2.html 문서는 버리도록 하겠습니다. 대신 index.html 문서로부터 뭔가 해결의 실마리를 찾아보도록 하죠.

    원하시는 효과가 패턴 없는 검은색 배경이 화면의 하단 끝까지 확장 되도록 하려는 것이라면 의외로 아주 간단하게 해결할 수도 있을 것 같습니다. 검정색 배경이 화면 하단 끝까지 내려오지 않는 것은 오류가 아니라 바른 렌더링 방식 입니다. 다른 표준계열 브라우저들도 모두 동일하게 렌더링 할껍니다. 검은 배경이(정확하게 말해서 #body1 상자가) 화면 아래로 계속 확장되지 않는 것은 실제 높이가 100%가 아니기 때문인데 이 100% 라는게 아시다시피 상대적인 단위라서 그렇습니다. 상대적이라 함은 자신의 조상을 기준으로 높이값이 결정된다는 것이고 #body1 요소의 부모는 바로 body 요소 인데 body 요소는 높이값이 현재 0 인 상태 입니다. 따라서 html, body 요소의 높이값을 100%로 변경해 보시면 일단 #body1의 높이는 기대했던 대로 화면 하단 끝까지 확장될 것입니다. 그러나 곧 이게 끝이 아니라는 것을 깨닫게 되실 텐데요. 이유는 100%의 높이라는게 어디까지나 상대적인 값이라서 아무리 높아봐야 브라우저의 뷰포트(화면이 출력되는 영역)를 벗어나지 못합니다. 즉, 높이 100%는 브라우저의 뷰포트 높이보다 클 수가 없기 때문에 화면 높이를 좁게 만든 다음 스크롤을 아래쪽으로 내려보시면 검은 배경이 스크롤 아래(뷰포트를 넘치는) 부분까지 확장되는 것이 아니라는 것을 알게 됩니다.

    따라서 결론적으로 높이 100%가 적용된 상자에는 아무리 배경을 적용해 봐야 콘텐츠 하단 끝까지 배경을 확장할 수 없다는 사실을 알게 되신 겁니다. 그렇다면 어떻게 해야 할까요?

    저라면 현재 body 요소에 적용되어 있는 bg.gif 패턴을 html 요소의 배경으로 적용하고 body 요소에는 높이 1px 너비 980px 짜리 검정색 이미지 하나를 repeat:y 시키겠습니다. 물론 조금 전에 html, body 에 적용했던 높이 100%는 다시 빼셔야 할껍니다. 빼는 이유는 html, body 요소가 콘텐츠 아닌 브라우저의 뷰포트 만큼의 높이를 갖지 않도록 하기 위해서 입니다.

  33. 정찬명 댓글:

    아, 코드를 이렇게 작성해 보세요.

    html { background:url(bg1.gif); } /* 화면 우측에 깔리는 패턴 이미지 */
    body { background:url(bg2.gif) repeat-y; } /* 화면 좌측에 수직으로 깔리는 너비 980px짜리 단색 검정 이미지 */

    부디 성공하셨으면 좋겠네요. ^^

  34. BOBS 댓글:

    핫!! !>_< 왕 감사합니다~ 이렇게까지 신경을 써주시다니~ ㅜ ㅜ
    많은 도움이 되었어요.. 흑흑..

    그런데.. html 배경 패턴은 되는데..
    body repeat-y가 안먹네요..ㅠ ㅠ;; 왜그러지;;
    정찬명님이 제시한게 완벽하게 제가 원하는 해답이였는데.. 뭔가 안되네요..흑..ㅠㅠ

    어쨌던 저쨌든.. 정찬명님.. 멋지세요! ㅠ_ㅠ!!!

  35. BOBS 댓글:

    아.. 지금 보니까.. html 배경으로.. bg1해놓으니.. body가 안먹네요..’ㅁ’;;
    html 배경이 우선권인듯..ㅡ ㅡ;;
    이거. 어쩌죠..OTL

  36. BOBS 댓글:

    이론상으로는 html 배경이 깔리고.. body위에 980px이미지 깔리고..
    #body1에 있는 단일 이미지가 덮어져서 완벽하게 되어야 하는데..ㅡ ㅡ;;

    새 폴더 만들어서.. body 집어넣고 되는거 확인한후에.
    html {background… } 집어 넣었더니.. 이 패턴만 나오네요..;;
    body 패턴은 덮어 씌워지는듯한.. 아하하하하;;;
    그런데..

    html {background} 와 body {backgroung}는 동일시 되는게 아닌건가요? ㅇ ㅇ?

  37. BOBS 댓글:

    앗! 일단 해결방법을 찾았습니다~ ^-^
    그냥 배경을 2000px 10px로 해서 ~ 왼쪽 검은색에 오른쪽 무늬 해서
    배경에 아예 깔아 버렸어요~ ^-^~~ ㅎㅎㅎ
    이렇게 하니깐 좀 나아요..ㅠ ㅠ 아우..

    하지만.. 찬명님 덕분에 확실히 해결할 방법이 풀린건 사실입니다~!!!!
    정말 많은 도움 감사합니다~! 덕분에 수월하게 작업할수 있겠어요~

    다시한번 감사드립니다~ ㅠ0ㅠ 꾸벅 꾸벅!

  38. BOBS 댓글:

    http://swmu.kr/gnuboard4/bbs/board.php?bo_table=board00

    익스플로러에선.. 옆에 메뉴가 안보이는데..
    뭔가.. 이유가 있을까요? ㅠ ㅠ파폭이나 크롬에선 보이는데..
    자꾸 죄송해요..흑..ㅠ ㅠ

  39. 정찬명 댓글:

    지금 DTD를 지우셨기 때문에 보이지 않는 것입니다. DTD를 지우시면 Quirk Mode가 되고 Quirks Mode는 사용하지 않으시는게 좋지요. 저라면 일단 표준 DTD를 사용하겠습니다. Quirks Mode에서 발견되는 버그는 해결 방법이야 찾으라면 찾을 수 있겠지만 당장의 버그만을 해결하기 위한 수단이므로 찾지 않겠습니다. 일단 표준 DTD를 사용하시고 그 다음에 발생하는 문제는 함께 고민해 봤으면 좋겠습니다. 제가 권장하는 DTD는 다음과 같습니다.

    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    그리고 배경이미지의 경우 너비 2000px 짜리를 사용한다고 하셨는데 최근에는 듀얼 모니터를 사용하는 환경도 적지 않기 때문에(제 경우 듀얼 모니터 가로폭 합이 3000px을 넘습니다) 제가 처음에 알려드린 방법을 다시 권장 드리구요. 처음 알려드린 코드에 문제가 좀 있었네요. ㅎㅎ. html, body 에서 높이값을 빼면 정말 안되더군요. 다음과 같이 다시 시도 해보시죠.(물론 표준 DTD를 사용한다는 가정 하에서)

    html{ background:url(bg1.gif); height:100%}
    body{ background:url(bg2.gif); min-height:100%; _height:100%;}

  40. BOBS 댓글:

    아 수정했어요~ *^ ^*
    배경은 아직 손 안봤구요~
    수정했는데도.. 서브 메뉴가 안뜨네요..
    그냥 통째로 올렸을땐 잘 나타나는데요..
    head.php tail.php 로 나눠서 게시판에 적용했는데.
    이렇게 하니까 사이드 메뉴가 안뜨네요..
    저도 뭐가 문제인지 다시 보고 있답니다~ ㅠ0ㅠ

    그런데.. 정찬명님은.. 웹언어를.. 참 좋아하시는거 같아요~ ㅋㅋㅋ
    프로의 냄새가..+_+

  41. BOBS 댓글:

    아앗!!!!!!!!!!!!!
    _z-index:-1;
    이걸 빼니까.. 나타나네요~ ‘ㅁ’~!!!!!!!!
    기쁘다..ㅠ ㅠ
    앗그런데.. 고정이 아노디네요.. 저거 빼니까..ㅡ ㅡ

    뭔가.. 막.. 오류가.. OTL

  42. BOBS 댓글:

    _z-index:-1; 리것을 1이나 0으로 하니까 다시 메뉴가 보이네요..
    그런데.. 가장 중요한건.. 멈춰 있지 않는다는거에요..
    흐음.. 또 만져봐야 겠어요.. 휴..

  43. BOBS 댓글:

    혹시.. 방법은.. 자바 밖에 없다는? 그렇다는? ㅠ ㅠ

  44. 황준상 댓글:

    페이지에 가 두개고 에러 아닐까요? <!–<!DOCTYPE 에 주석이 먹나요? 예전에 안됬던걸로.. 흠.. OTL 지못미…

  45. 황준상 댓글:

    페이지에 [body] 가 두개고 에러 아닐까요? body가 안써졌네요..

  46. 정찬명 댓글:

    준상님 이야기 대로 지금 일단 페이지에 html, body 요소들이 두벌씩 들어가 있네요. 일단 이 문제를 해결하시고 DTD를 표준에 따라 제대로 넣으시면 그때 다시 봐드릴께요. ㅎㅎ. 이런 디자인에서는 자바스크립트까지 안쓰셔도 될것 같네요.

  47. BOBS 댓글:

    -ㅅ-;; 다 제대로 했는데도 아직도. OTL

  48. BOBS 댓글:

    제로보드에서도 그렇고 그누에서도 그렇고..ㅇ ㅇ
    확인해 봤어요~
    head.php
    foot.php
    이렇게 나누어서 올린후에~
    게시판에 적용했을때..

    레이어 고정이 안되는것을요..ㅠ ㅠ..

    그냥 하나의 html로 올렸을땐 잘 되었는데..
    아.. 왜 그럴까요.. 뭐가 문제일까요.. OTL

  49. BOBS 댓글:

    음.. 혹시 모르니까요..ㅜ ㅜ
    head.php 파일
    http://swmu.kr/head1.php
    tail.php파일
    http://swmu.kr/tail1.php

    안나눠진 원본
    http://swmu.kr/index3.html

  50. BOBS 댓글:

    음.. 혹시 모르니까요..ㅜ ㅜ
    head.php 파일
    http://swmu.kr/gnuboard4/head1.php
    tail.php파일
    http://swmu.kr/gnuboard4/tail1.php

    안나눠진 원본
    http://swmu.kr/gnuboard4/index3.html

  51. 황준상 댓글:

    DOCTYPE를 맨위에 넣어주셔요. HTML 보다 위에…

  52. 황준상 댓글:

    http://moonsnap.mireene.com/bbs/view.php?id=test&page=1&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=headnum&desc=asc&no=1# —— 요주소 소스에서 119줄을 빼고 43줄에 있던 DOCTYPE를 젤 위로 보내셔야 합니다.DOCTYPE 이 제로보드 라이센스 위로 가야하는듯 한데 그게 가능한지?

  53. 황준상 댓글:

    http://swmu.kr/gnuboard4/bbs/board.php?bo_table=board00&wr_id=1 ——- 요것두요. 26줄 DOCTYPE 제거하시고 맨위에 DOCTYPE에 주석을 제거하세요.

  54. BOBS 댓글:

    -ㅅ-;; 으음.. 젤 위로.. 어케 보낼까요.. 일단은 찾아 보도록 하겠습니다..ㅠ ㅠ

  55. BOBS 댓글:

    아아아앗!!!!!!!!!!!!!! 성공 성공 성공했어요~~~~~ ㅠ ㅠ
    황준상님.. 너무 감사합니다~ 이틀동안의 고생이.. 드디어.. 드디어..
    어허허어어엉ㅇ..ㅠ ㅠ

  56. 정찬명 댓글:

    BOBS님, 축하드려요! 준상 쌩쓰! ^^

  57. 오현 댓글:

    정찬명님 ㅜ.ㅜ
    #content 안에 a:hover가 있을때
    ie6에서 우측 좌측 스크롤이 좌측 상단으로 계속 올라오는 현상이 발생됩니다.

    혹 잘못적었나 싶어 예문의 소스를 그대로 긁어 사용한 상황에서도 같은 형상이 일어 납니다.

    ie6 정말 징그럽습니다.

    답을 좀 주십시오.

  58. 오현 댓글:

    혹시나 a 속성에 문제가 있나싶어 a의 속성을 모두 지우고
    a:hover,
    a:active,
    a:focus{background:#999;}만 준 상황에서

    a:active,
    a:focus는 영향을 안받는데

    a:hover만 하단과 우측 스크롤을 오른쪽 상단으로 끌어 당기고 있습니다.

    a에 마우스를 올릴때와 벗어날때 한번씩 작동됩니다.

  59. 오현 댓글:

    body{ _height:100%; _width:100%; _overflow:auto;}에서
    _width:100%; 를 지울때 문제가 해결되는거 같습니다.

    이걸 지움으로 인해 어떤 또다른 문제가 발생하는지 모르기에

    정찬명님의 의견을 부탁드립니다.

    더 테스트 해봐야 하는데 시간이 없어서 ^^&

  60. 정찬명 댓글:

    오현님, 제가 문제 상황을 정확하게 이해를 하지 못하고 있습니다. 그런 현상이 발생하는 페이지를 오현님 계정에 업로드 하신 다음 URL을 알려주시면 한번 확인해 보겠습니다.

  61. 오현 댓글:

    http://kdm.caigi.com/a_hover.html
    에 올려 뒀습니다.
    오늘 잠시 체크해 보니 ie6에서 a:hover에 background나 border 속성이 부여될때 생기는것 같습니다.

  62. 정찬명 댓글:

    오현님, 덕분에 새로운 버그를 하나 더 발견했네요. 그런데 저도 해결 방법을 모르겠습니다. ㅜㅜ 혹시 해결 하시면 저도 좀 알려주세요.

  63. 조성민 댓글:

    오류를 보고 한번 테스트 해봤는데 처음 보는 버그라 신기하네요.

    일단 스크롤 관련한 해결 방법은 #content 에 overflow:hidden; 을 추가해줌으로 해결을 했습니다.

  64. 오현 댓글:

    ie6에서 이 소스의 가장 큰 문제점은 어디에서도 position:relative가 들어가면 안된다가 아닐까 싶습니다. 만약 #content에 position:relative가 들어가거나 다른 div를 생성하여 position:relative의 속성을 부여하거나 그 속성이 있으면 사이좋게 #aside와 함께 고정되어 버리니까요.
    혹 제가 못본게 있나싶어 http://www.cssplay.co.uk/layouts/fixed.html의 소스도 지우개놀이 해 봤는데… 같은 현상이 나타나더군요.

    웹사이트 만들때 ie6에서는 모두 display:none되게 만들어서 ie6이라서 못보여주겠다는 문구를 넣든지 해야지 원…

    조금씩 알아갈 수 록 ie6에 대한 불만은 아는만큼 쌓여갑니다.

  65. 홍정민 댓글:

    z-index 때문에 요즘 엄청 고생중입니다. ie6에서는 다른 브라우저와 다르게 특정 레이어에 최상위로 z-index 값을 줘도 자꾸 이게 밑으로 깔려서 보이지 않네요 ㅠㅠ.
    게다가.. 아에 보이지 않기도 합니다. 도대체 ie6은 z-index에 먼영향을 주는건지…혹시나 이와 관련된 답변이 가능할까요?

  66. 정찬명 댓글:

    홍정민님, 제가 문제 상황을 정확하게 파악하지 못해서 답변을 드리기가 여렵습니다. 제가 어떻게 하면 상황을 이해할 수 있을까요?

  67. 마약 댓글:

    이와 관련된…이라고 하셔서,
    잠시 지나가다가 걸음을 멈추고, 비슷한 상황을 하나 만들어봤습니다.
    (밑에 두개의 소스가 한 셋트예요^^;)

    [div style=”background:#c0c0c0; width:500px; height:200px; position:relative;”][p style=”position:absolute; top:130px; left:100px; z-index:10; background:#ff0000; width:100px; height:100px;”]aa[/p]
    [/div]

    [div style=”background:#0c0c0c; width:500px; height:200px; position:relative;”]
    [p style=”position:absolute; top:0px; left:100px; z-index:1; background:#00ffff; width:100px; height:100px;”]aa[/p]
    [/div]

    익스 6,7은 희안하게도 위의 p태그(1번이라 칭할께요.) z-index의 값을, 아래 p태그(2번이라 칭할께요.)의 z-index보다 높게 주었는데도 불구하고, 아무리 높게 주어도 뒤에 깔리는 버그가 있습니다.
    제가 한번은, 최상위 인덱스를 가지는 셀렉트박스랑 아이프레임을 띄워서 얹어봤는데요… 일단 1번에 셀렉트 박스를 넣고, 2번 위에 띄워봤더니, 셀렉트 박스는 떳습니다.
    하지만 아이프레임은 아이프레임 자체에도 아무리 높은 z-index를 부여해본들 2번 위에 뜨지 않더군요.

    결국, position:relative를 먹은 두개의 div…
    ie6,7에서는 소스상에 먼저 작성된 div보다 다음에 나오는 div일수록 무조건 높은 인덱스를 가지게 됩니다.
    이유는 잘 모르겠습니다…-_-;;

    어쨋든 해결방안 :

    position:relative; 가 먹은 div에 z-index를 주면 간단히 해결됩니다.

    첫번째 div에 z-index:10;
    두번째 div에 z-index:0;

    그냥 익스6,7에서 발생하는 이런 버그의 예시를 하나 남기고 갑니다~^^;
    포지션은 정말 필요할때만 잘써야 하는 프로퍼티라고 생각해요…ㅠㅠ;
    개인적으로는 플룻보다 더 까다롭다고 봅니다…..

  68. 정찬명 댓글:

    마약님 감사합니다. ^^

  69. 마약 댓글:

    찬명님의 예제에서는 body에 padding-right:20px; 줘서, ie6에서 스크롤바를 안보이게 꼼수를 부리는건 좀 웃긴가요 ㅎㅎㅎ

  70. 정찬명 댓글:

    스크롤이 안보이면 내용이 넘칠때 어떻게 하시려구요? ㅎㅎㅎ

  71. Myo_ 댓글:

    안녕하세요.
    정말 찾던 코드라 바로 적용해보았는데 파폭,크롬,사파리에선 다 먹는데
    ie에선 또 말썽이네요… 위치 자체가 먹으려 들지 않아요; fixed로 되지도 않고..

    제가 혹시 코드를 잘못 적은 건가요?
    다른 애들은 고정도 되고 위치도 맨 아래인데 유독 ie만….

    소스는 http://myo-myo.net/main1.htm 에 가시면 보실 수 있어요.
    어떻게 해결해야할까요?

    새해 복 많이 받으세요~

  72. 정찬명 댓글:

    Myo_님 안녕하세요? Fixed Position의 위치를 bottom 으로 지정했을 때 이것을 렌더링하지 못하는 IE 버그 같습니다. 저도 마땅히 해결방법은 잘 모르겠습니다. #aside 요소에 bottom 아닌 top 값을 사용하는 방법으로 변경하셔야 할것 같네요. top 값을 100%으로 지정한 다음 margin-top 값에 음수 -30px 값을 함께 지정하고 html, body 요소의 높이는 모두 100%으로 지정하셔야 할껍니다.

  73. Myo_ 댓글:

    답변 감사드립니다.
    말씀하신 대로 수정하였더니 페이지가 로딩될 땐 메뉴가
    맨 밑에 있더니 페이지가 로딩 된 후엔 사라지네요.

    지금 5번째 적용해본 코드인데 레이어 고정시키기 참 힘이드네요^^;

  74. Duststar 댓글:

    감사합니다. 덕분에 블로그에 잘 적용했습니다. ^^

  75. 네꼬히메 댓글:

    알려주신 방법으로 IE6에서는 해결이 가능한데 ㅜㅜ 아이패드용 사파리에서 position:fixed 가 position:absolute 로 나옵니다. 2010년 9월에 이 현상을 발견했고 결국 아이패드용 사파리에선 fixed로 고정된 장바구니 기능을 빼는 걸로 합의를 보긴했는데 지금도 의문이네요. 왜 아이패드의 사파리에서 fixed가 안 먹는지. 더욱이 웃긴것은 사파리브라우저에서 개발자도구로 아이패드 화면을 봤을 때에는 잘된다는 것입니다 ㅎㅎ 혹시 이 것에 대해 아시는 부분 있으면 공유 부탁드리겠습니다~

  76. 정찬명 댓글:

    @네꼬히메
    제는 아직 테스트를 못해봐서 잘 모르겠습니다. 그런 문제가 있었군요.

  77. 지승호 댓글:

    회사에서는

    기존에 html dtd선언이 아무 것도 되어 있지 않아서,

    position:fixed 가 IE 에서는 적용이 안되네요..

    그렇다고 포털사이트인데 이제와서 DTD 를 선언하면 대작업이 될 것 같고..

    난감하네요

    간단한 거라 생각하고 일정을 짧게 잡았는데

    생각보다 쉽지 않아 애먹고 있습니다.

    방법이 없을까요..

    이 부분에 적용중입니다.

    http://www.wowtv.co.kr/news/wownews/view_kkk.asp

  78. 정찬명 댓글:

    @지승호
    이 팁은 포스팅 아래 나열한 문제 때문에 저는 실무에서 사용하지 않습니다. 스크립트로 문제를 해결하신것 같네요. ^^

댓글 쓰기

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

필수 아님

필수 아님