블로그 만들며 나누기
항상 같은 위치에 고정되는 배너 달기
책친구
2010. 6. 14. 20:09
스크롤을 내려도 항상 같은 곳에 위치하는 배너의 설치는,
html 소스 코드에 div 와 style을 적절히 써주면 가능합니다.
이것은 관리자의 복잡한 html 소스를 손대지 않고,
사이드바 설정을 이용하여 간단하게 플러그인 등 배너를 설치할 수 있는 장점이 있습니다.
먼저, 소스를 봅시다.
<div style="position: fixed; left: 200px; top: 100px"> ~~~ </div>
간단합니다.
position은 div 박스가 놓일 위치(좌표)를 설정한다는 뜻입니다.
종류에는 static | relative | absolute | fixed | inherit 가 있는데,
fixed가 바로 브라우져가 어떤 상태(스크롤을 내려도)이든 항상 같은 위치에 고정하겠다는 뜻입니다.
absolute : 페이지나 프레임의 왼쪽 상단 귀퉁이에서부터 left, top으로 지정한 곳에 나타납니다. 자신과 자기가 가지고 있는 태그들도 margin이 적용되지 않습니다.
relative : div 코드가 시작하는 위치부터 left, top의 값 만큼 떨어진 곳에 나타납니다.
static : div 코드가 시작하는 위치에 놓입니다. 이 때는 left, top이 듣지 않습니다.
inherit : 상위의 값을 따릅니다.
(참고 : 이용석의 JavaScript & DHTML)
left : 플러스값(+)이라면 기준에서 오른쪽으로, 마이너스값(-)이라면 기준에서 왼쪽으로 위치합니다.
top : 마찬가지로 +와 -값을 쓸 수 있습니다.
사이드바를 설정하는 방법은 아래 링크된 글의 9번부터 13번을 참조하세요.
▷ 티스토리 블로그 사이드바, 본문에 알라딘 TTB 배너 달기
위의 <div>와 </div> 사이의 ~~~ 부분에
넣고자 하는 html 소스 코드를 넣고, 미리보기로 확인하며 좌표값을 맞춰갑니다.
파이어폭스 모질라 브라우져에도 적용됩니다.
인내를 가지고 미리보기로 실험하면서 원하는 위치에 놓아보세요.