레이어 중앙정렬
페이지 정보
작성일13-02-08 07:29 조회1,368회본문
중앙정렬인 디자인에서 레이어가 디자인상으로 특정위치에 계속 떠야하는 문제가 있는 것으로 판단됩니다.
이럴 경우에 브라우져의 높이와 폭을 계산하여 중심점을 구하고 그 중심점으로부터 몇픽셀 움직이느냐가 관건이겠지요.
우선 브라우저의 폭은 document.body.clientWidth 이구요.
레이어의 좌측위치는 전체 브라우저의 폭에서 레이어의 넓이를 빼고나서 2로 나누면 정중앙에 위치하게 됩니다.
레이어의 좌측 좌표는 document.all['Layer1'].style.left입니다.
body안에 자유롭게 삽입하시고 싶다고 하셨는데 그러면 브라우저 사이즈변경시 적용이 안됩니다.
onresize함수는 body안에 들어가거든요.
브라우저 사이즈변경이 필요없다면 javascript안에 centerWindow();를 넣으시면 됩니다.
----소스#1 : 단순중앙정렬------------------
<html>
<body onresize="javascript
이럴 경우에 브라우져의 높이와 폭을 계산하여 중심점을 구하고 그 중심점으로부터 몇픽셀 움직이느냐가 관건이겠지요.
우선 브라우저의 폭은 document.body.clientWidth 이구요.
레이어의 좌측위치는 전체 브라우저의 폭에서 레이어의 넓이를 빼고나서 2로 나누면 정중앙에 위치하게 됩니다.
레이어의 좌측 좌표는 document.all['Layer1'].style.left입니다.
body안에 자유롭게 삽입하시고 싶다고 하셨는데 그러면 브라우저 사이즈변경시 적용이 안됩니다.
onresize함수는 body안에 들어가거든요.
브라우저 사이즈변경이 필요없다면 javascript안에 centerWindow();를 넣으시면 됩니다.
----소스#1 : 단순중앙정렬------------------
<html>
<body onresize="javascript
<script language="JavaScript">
<!--
function centerWindow() {
var xMax = document.body.clientWidth, yMax = document.body.clientHeight;
var xOffset = (xMax-200)/2+20, yOffset = (yMax-150)/2+40;
//중심에서 오른쪽으로 20, 아래로 40픽셀에 항상 위치하는 레이어
var divMenu = document.all['Layer1'].style;
divMenu.top = yOffset;
divMenu.left = xOffset;
}
//centerWindow();
//-->
</script>
<div id="Layer1" style="position:
<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" bgcolor=#FFFFFF style="border:#808080 1px solid;" height=150>
<span style="font-family:굴림; font-size:9pt">
항상 중심에 뜨는 <br />
레이어 샘플입니다.</span><br />
</td>
</tr>
</table>
</div>
</body>
</html>
