움직이는 배너란?
쇼핑몰에서 중요한(?)메뉴들이 스크롤에 따라 움직이는 것으로 자주 사용하는데,
이것을 구현하는 방식에 대한 방법론에 대해 포스팅하고자 한다.
JS에 window.scroll 이벤트를 받아서 특정 div의 top속성을 변경하는 방법인데
이부분은 어차피 큰 차이가 없으므로, 생략한다.
공통된 사항은 position:absolute가 있고, top에 특정값이 들어있따는 점
문제는 html 마크업 부분인데
본문의 width:1000px; 움직일배너의 width:200px;로 가정하면,
형태#1
가장 많이 쓰이는 형태로 보이는 이것은
body에 child node로써 움직일 div가 있는 형태이다.
이때는 본문에 사이즈나 여백에 따라 적절한 left값이 필요하다.
<body>
<div>
...
contents
...
</div>
<div id="움직일 배너" style="position:absolute;left:(1000+본문의margin-left)px;top:200px;">
</div>
</body>
형태#2
wrapper div를 활용한 방식으로 wrapper에 relative하게 위치를 조절가능하다.
<body>
<div id="wrapper" style="position:relative;width:1200px;">
<div>
...
contents
...
</div>
<div id="움직일 배너" style="position:absolute;right:0px;top:200px;width:200px;">
</div>
</div>
</body>
형태#3
본문에 relative한 형태
<body>
<div>
...
contents
...
<div id="움직일 배너 wrapper" style="float:right;">
<div id="움직일 배너" style="position:absolute;margin-left:0px;top:200px;width:200px;">
</div>
</div>
</div>
</body>
몇가지 예를 들어보았는데,
형태#1,형태#2같은 경우는 매우 직관적인 형태로 볼 수 있다.
그런데 #3은 약간 이상하다. major 브라우저에서 test를 해본결과 전혀 문제는 없음을 발견했다.
움직일 배너의 부모 div에 float:right를 추가하는 것으로 본문과의 레이아웃이 완벽하게 잡히게 되었다.
움직일 배너 wrapper의 위치가 컨텐츠 최하단에 놓이면서, 우측에 붙게되고, 내부에 다른 내용이 없으므로,
그 위치가 child node에 영향을 미치므로, 위치가 본문의 우측끝에서 시작되는 것!
직관적이진 못하지만, 저런형태를 취하면, 스크립트에 오류가 있더라도, 본문 하단에 문제없이 위치하게 될 것이다.
'dev > web' 카테고리의 다른 글
| 웹페이지 레이아웃 방법론(webpage layout methodlogy) (0) | 2013.12.04 |
|---|---|
| [JS] 메소드(method) 매개변수 기본값 (0) | 2013.07.25 |
| 유용한 자바스크립트 라이브러리 모음 (1) | 2013.07.23 |
| <b> 와 <strong>의 차이점 (0) | 2013.07.01 |
| [웹표준] td높이 와 img요소의 문제점 (1) | 2013.07.01 |