태터툴즈 네비게이션바를 항상 화면위로 올리기

내 블로그를 보면 아래 그림과 같이  우측상단에 네비게이션바가 항상 화면 위에 올라와 있는 것을 볼 수 있다.  화면을 내려도 정확히 화면 우측상단에 위치한다. 이것을 만든 이유는 블로그 할 때마다 느낀 것인데 다음페이지나 원하는 페이지로 이동하고 싶을때 맨 아래로 스크롤을 하는 것이 불편했기 때문이다. 물론 테터툴즈에서 단축키 A,S를 누르면 앞뒤로 페이징이 되긴 하지만 이렇게 한눈에 보게 되면 편의성이 증대된다 것을 쉽게 생각할 수 있을것이다.(물론 디자인적인 측면에서 싫다면 어쩔 수 없지만... ^^)

이 기능은 일반인들이 자주 사용하는 브라우져인 파이어폭스2.0, 익스플로러 6, 익스플로러 7 에서 테스트를 마친것이다.

여기서는 네비게이션 툴바를 항상 우측상단에 올리는 방법을 서술하고자 한다.

 

지돌스타 블로그에 올라간 네비게이션바. 항상 화면우측상단에 위치한다.

이 기능은 Javascript를 이용한 것은 아니며 CSS로만 가지고 구현한 것이다.
Javascript를 이용하면 계속 계산해야하는 문제점이 있기 때문에 속도를 위해서도 같은 기능이라면 CSS를 이용하는 것이 좋다.

테터툴즈의 스킨에 보면 skin.html과 style.css 파일이 있는 것을 볼 수 있습니다.
그중에 skin/내스킨폴더/skin.html 을 열어봐서 paging을 검색해 보면 아래와 같이 네비게이션 부분을 찾을 수 있을것이다.
(skin에 따라서 내가 가진 코드와 다를 수 있다.)

      <!-- paging -->
      <s_paging>
        <div class="paging">
         <a >◀ PREV </a>&nbsp;|
          <s_paging_rep>
            <a >&nbsp;&nbsp;</a>
            |&nbsp;</s_paging_rep>
          <a >NEXT ▶ </a>
          <div class="navi" style="align:center">
            <a >◀</a>
            <span class="cnt">A</span>
            : Navigation shortcut key : 
            <span class="cnt">S</span>
            <a >▶</a> </div>
        </div>
      </s_paging>

여기서 중요한 부분은 오랜지 색으로 표시된 부분이다. div로 둘러싸인 부분은 class로 paging이라는 이름으로 정의되어 있다. 그러므로 paging부분만 CSS를 먹여서 화면상단에 고정시킬 수 있다.

skin/내스킨폴더/style.css 파일을 열어보자
여기서 paging을 검색해보면 아래와 같은 코드를 찾을 수 있을 것이다.

.paging{
    font:11px Tahoma;
    color:#777;
    padding-top:8px;
    text-align:center;
    padding-bottom: 8px;
}

이 부분에 아래와 같이 추가해보자.

.paging{
    font:11px Tahoma;
    color:#777;
    padding-top:8px;
    text-align:center;
    padding-bottom: 8px;
    position:fixed; right:10px; top:5px;
   z-index:4;
}

여기서 중요한 부분은 position:fixed 이다. 이것은 right:10px; top:5px;에서 정의했다시피 화면우측 10픽셀, 상단 5픽셀로 div class가 paging인 것을 스크롤해도 상관없이 화면에 고정시킨다.
참고로 z-index:4는 해당 레이어인 paging Layor를 다른 Layor보다 위로 올리기 위해서 쓴 것이다. 뒤에 숫자 4는 임의로 넣은 것이다. 만약 navigation바가 화면스크롤할때 가려지는 현상이 일어나면 이 숫자를 높혀보길 바란다. ^^

그럼~~~다 끝난것이다! 와~~~ 짱 멋있다.

.
.
.
라고 말하고 싶겠지만..... 아직 덜되었다. 파이어폭스하고 익스풀로러 7은 위처럼만 해도 잘된다.
그런데... 요즘 일반인들이 잘사용하고 있는 익스플로러 6는 무반응이다 ㅡㅡ;;; OTL
이것때문에 무지 머리 싸매다가.... 다음 처럼 위의 코드 아래에 아래 예시 코드를 추가하면 된다는 것을 알 수 있었다.

* html .paging{ /*IE6 only rule, applied on top of the default above*/
    position: absolute;
    top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+10+"px" : body.scrollTop+5+"px");
}

여기에서 보면 * html를 쓰고 그 다음에 .paging을 쓴 다음 position을 absolute로 하고 top 속성이 자바스크립트로 표현되는 것을 볼 수 있다. 여기서 * html은 일종에 hack과 같다. 익스풀로러 6일때는 * html이 먹혀들어간다는 것이다. 반대로 다른 브라우저에서는 * html이 무시된다.
위 코드에서 position:absolute만 한다면 첫화면에서 위에서 정의된 대로 화면우측 10픽셀, 상단 5픽셀의 위치로 올라가지만 스크롤하면 없어진다.
하지만 그 아래 top 부분을 보면 CSS에 자바스크립트 코드가 들어갔다. 여기서 expression()은 CSS에 자바스크립트를 사용할 수 있도록 하는 일종의 함수이다. 익스플로러 5.0 때부터 사용할 수 있던 기능이다. 물론 표준은 아니지만 우리가 필요로 하는 것을 구현할 수 있는 방법이다. 어짜피 * html로 익스플로러 6에만 먹이는 것이므로 사용할 수 있다. 여기서 document.compactMode부분이 보이는데 이 내용은 http://www.koxo.com/lang/js/property/compatMode.html 를 참고하기 바란다. 나도 무슨말인지ㅡㅡ;
어쨌든 이 방법을 사용해서 익스플로러 6.0에서도 네비게이션바를 고정시킬 수 있었다.

한가지 추가해서 말하고 싶은 내용은 만약 이러한 방식으로 플래쉬를 바탕으로 하고 레이어(div와 같은)를 플래시 위에 올려놓고 싶을때는 플래시를 추가하는 코드에 반드시 <param name='wmode' value='transparent' /> 를 추가하기 바란다. 왜냐하면 보통 플래시 위에 레이어를 띄울때는 레이어가 플래시 밑에 깔리게 된다. 이때는 z-index를 아무리 높여도 소용없다. 플래시 추가시 아래 코드와 같이 wmode에 value값을 transparent로 지정하면 플래시에 투명영역을 사용하게 되고 레이어의 z-index를 사용할 수 있게 된다. 참고로 transparent 속성의 반대는 opaque로 default값이다. 참고로 플래시를 사용할때는 아래와 같이 직접 Object 태그를 사용하는 방법보다는 자바스크립트를 이용해서 플래시를 간접적으로 만들기 바란다. 그렇게 해주는 좋은 라이브러리가 있는데 http://blog.deconcept.com/swfobject/  를 찾아가면 다운로드 받을 수 있고 메뉴얼도 제공해준다.

1. <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="720" height="60">
2.   <param name="movie" value="파일.swf" />
3.   <param name="quality" value="high" />
4.   <param name="wmode" value="transparent" />
5.   <embed src="파일.swf" width="720" height="60" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
6. </object>

어쨌든 난 이러한 방식으로 만들었다.

본 내용이 나처럼 고민하는 사람들에게 좋은 정보가 되었으면 하는 바램이다.

정보에 대해 의문나는 점이나 잘못된 내용이 있다거나~ 음.. 유용한 정보라고 생각한다면 댓글 한번 써주면 좋겠죠? 훗

참고사이트
자주 마주치는 익스6 CSS 버그 해결책 
자바스크립트로 Flash를 화면에 올리는 라이브러리

작성자 : 지돌스타(http://blog.jidolstar.com )

한마디더...
익스플로러6에서 화면을 따라다니긴 하지만 고정은 안된다. 무슨말이냐면 스크롤할때마다 네비게이션바가 흔들린다는 말이다. 물론 지금까지 언급한 것까지 해도 잘 되는 분들이 있을 것이다. 그 이유는 style.css를 보면 아래와 같은 코드가 있기 때문이다.

 body {
  background: #000000 url(img.jpg) repeat-x right top fixed;
 }

이것도 하나의 hack과 같다. 이런 방식으로 배경이미지를 fixed 시키면 이제 FireFox나 익스플로러7와 같이 익스플로러6에서도 네비게이션바가 스크롤할때 흔들리지 않는다. 난 이 사실을 이 글을 쓰고 나서 나중에 알게 되었는데... 정말 익스플로러6의 동작방법이 참 이상하다는 생각이 든다.

출처 : http://blog.jidolstar.com/23