블로그.지오닷컴
중앙으로 정렬되는 홈페이지에 떠 있는 레이어 만들기 본문
중앙에 정렬되는 홈페이지를 만들다보면 창 크기에 따라 절대위치로 박아놓은 레이어가 마구 움직이는 것을 경험하셨을 겁니다. 창의 크기에 상관없이 중앙에 정렬되는 홈페이지의 위치에 맞추어 레이어도 따라 움직이는 자바스크립트 소스를 소개해 드립니다.
페이지의 <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 만큼 띄운다는 뜻 입니다.
궁금하신 사항은 메일로 연락주세요. 그럼, 안녕히!
'노하우 > 웹서비스 개발' 카테고리의 다른 글
| MySQL에서 UTF-8로 한글을 인코딩 했는데도 글자가 깨질 때 (0) | 2011.03.07 |
|---|---|
| XE 외부 페이지에서 로그인 정보 보여주기 (0) | 2011.01.05 |
| 안드로이드나 아이폰일 경우 모바일 사이트로 이동하기 (0) | 2010.12.01 |
| XE 레이아웃 편집할 때 php 함수 바로 사용하기 (0) | 2010.11.25 |
| DB에서 서로 다른 테이블의 데이터를 한번에 불러오기 (0) | 2010.11.11 |
Comments