블로그.지오닷컴

중앙으로 정렬되는 홈페이지에 떠 있는 레이어 만들기 본문

노하우/웹서비스 개발

중앙으로 정렬되는 홈페이지에 떠 있는 레이어 만들기

홍보하는 지오닷컴 2010. 12. 1. 20:45
중앙에 정렬되는 홈페이지를 만들다보면 창 크기에 따라 절대위치로 박아놓은 레이어가 마구 움직이는 것을 경험하셨을 겁니다. 창의 크기에 상관없이 중앙에 정렬되는 홈페이지의 위치에 맞추어 레이어도 따라 움직이는 자바스크립트 소스를 소개해 드립니다.


페이지의 <body>와 </body>사이에 삽입할 레이어 소스 샘플

<div id="ccb_quick" style="position:absolute; visibility:visible; z-index:10; width:60px; left:1500px; top:150px;">
<script language="javascript" src="http://lab.biointernet.com/bn/s.php"></script>
</div>
<script language="JavaScript"> 
<!--
function centerWindow() {
var xMax = document.body.clientWidth, yMax = document.body.clientHeight;
var tleft = eval((xMax/2) + 470);
if(tleft < 935) tleft = 935; // 935 중앙컨텐츠 부분 폭 + 배너 왼쪽 여백
document.getElementById('ccb_quick').style.posTop = document.body.scrollTop + 150;
document.getElementById('ccb_quick').style.left = tleft + "px";
}
//-->
</script>


페이지의 <body> 안에 넣어야 할 소스 샘플

<body onLoad="centerWindow()" onResize="centerWindow()" onscroll="centerWindow()">


소스는 크게 3 부분 인데요, 레이어 소스 부분과 레이어 위치를 재정렬 하는 자바스크립트 소스, 그리고 페이지가 로드될 때, 창 크기가 바뀔 때, 스크롤 할 때 마다 레이어 위치를 재정렬하는 자바스크립트를 계속 실행하도록 <body> 테그 안에 넣는 부분 입니다.


만약, 레이어가 정렬되는 위치가 별로 마음에 들지 않는다면 centerWindow() 소스의 숫자 부분을 변형해 보시면 조금씩 답을 얻으실 겁니다.

위의 숫자 중 470은 화면 중앙에서 오른쪽으로 470px 만큼 띄운다는 것인데, 이 값은 중앙에 띄워지는 컨텐츠 폭의 1/2에 여백만큼 더하시면 됩니다. 935는 화면이 935 이하로 줄어들 경우 레이어 위치를 935로 고정하는 겁니다. 창 크기가 줄어들면 컨텐츠 영역까지 따라 들어오더라구요. 150은 화면 상단에서 150px 만큼 띄운다는 뜻 입니다.


궁금하신 사항은 메일로 연락주세요. 그럼, 안녕히!


0 Comments
댓글쓰기 폼