스크롤을 따라다니는 메뉴(고정 되어 있는 메뉴)

스크롤을 따라 다니는 메뉴 소스를 많이 보았을 것 이다.
허나 보통 돌아 다니는 스크립트는 일단 dotype을 선언 했을때 먹통이 되는 스크립트도 많고
간단해 보이는 것이 왜케 소스가 긴 것 인지.. -_-;
지금 설명 하려는 것은 css으로만 해당 기능을 구현 하는 방법 이다.
따라다니는 부드러운 느낌 보다는 고정 되어 있다는 느낌이 드는 것임으로 참고 하자.

일단 IE6.0을 제외한 다른 브라우저는 position: fixed 라는 속성으로 간단히 구현 할수 있다.
그런데 역시나 IE6.0은 다들 아시다시피 꼴통이라 이놈을 인지 하지 못한다.
그래서 넣어 준것이 top:expression(documentElement.scrollTop+10); 이놈.
documentElement.scrollTop 이것이 현재 스크롤의 높이 값을 던져 주고 +10 은
스타일에서 보면 top, left 를 각각 10px 씩 띄었다. 현재 스크롤 값에 10px를 더한 값이 top 속성 값이 되는 것이다.
<!–[if (IE 6)]> 이놈 안에 들어가 있는 소스는 IE6.0 에서만 불러온다.

투명이미지(png) IE6.0에서도 보이게 하기

png 이미지는 gif와 다르게 투명 이미지로 사용할 수 있다.
허나 IE6.0 버젼에서는 fiter를 사용해야 png의 특징을 살려서 사용할수 있다.

예제에서 사용한 이미지는 빨간색 동그라미에 투명한 그림자가 들어간 이미지 입니다.
보시다시피 그림자가 투명해서 바탕의 노란색을 살짝 살짝 보여주는 걸 볼수 있습니다.

프린트시 스타일 달리 적용

보통 홈페이지에서 인쇄를 지원할때 인쇄가 안됐으면 하는 요소들이 분명히 있다.프린트 하기 버튼이라든지.. 뭐 그게 뭐든지 간에 프린트 할때 style을 달리 적용할수 있다.

@media print 는 프린트할때의 경우만 따로 스타일을 지정할수 있다.
예제1을 프린트할 경우는 본문 부분만 나온다.