원프레임 사이트에서 레이어 가운데 정렬

이 팁은 나무님(frigga@freechal.com)님께서 제공해주신 자료입니다. 강좌 제공에 대해 깊이 감사드리며 앞으로도 좋은 강좌 부탁드립니다.

:: 원문은 팁앤테크의 HTML 파워 강좌에 소개된 내용입니다. 컨텐츠의 이용은 로그인 후 가능합니다.

원프레임 사이트에서 레이어를 항상 가운데 위치시켜주는 스크립트 소스입니다.

<SCRIPT language="JavaScript">
<!–
function MM_findObj(n, d) { //v3.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
}
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
return x;
}
function DivAlign(theDiv){
var obj,fun,dw,lw,x;
fun = (document.all) ? "document.getElementById" : "MM_findObj";
obj = (document.all) ? document.getElementById(theDiv) : MM_findObj(theDiv);
if(obj){
if(document.all){
dw = document.body.clientWidth;
} else {
dw = innerWidth;
}
if(document.layers){
lw = obj.clip.width;
} else {
lw = obj.style.width.replace("px","");
}
x = (document.layers) ? ".left" : ".style.left";
eval(fun+"(’"+theDiv+"’)"+x+"="+dw+"/2-"+lw+"/2");
}
}
//–>
</SCRIPT>
</HEAD>
<BODY onload="DivAlign(’Layer’);" onresize="DivAlign(’Layer’)">
<DIV id="Layer" style="position:absolute; left:0px; top:0px;
width:600; height:100%; z-index:10; background-color: yellow;">Align
Layer</DIV>

자주 올라오는 질문이 레이어를 가운데 정렬하는 방법에 대해 많은 질문이 올라오는데요. 드림위버 고급의 비헤이비어 중 align layer를 이용하는 방법에 대해 애기하겠습니다.

이 소스는 align layer 비헤이비어의 소스 중에서 가운데 정렬과 관련된 부분만 남기고 모두 지웠습니다. 새로 첨가한 코드는 없습니다. 레이어란 절대좌표 값을 가집니다. 그래서 해상도와 상관없이 지정된 위치에 항상 “떠” 있습니다.

레이어의 사전적 의미는 층, 겹입니다. 그러므로 테이블 안에 레이어를 넣는다는 것은 말이 안됩니다. 몇 안되는 문서의 흐름과 상관이 없는 요소가 레이어라고 할 수 있습니다.

여기서 중요한 코드를 애기하면 다음과 같습니다. 레이어가 가운데 정렬을 하기 위해서는 브라우저에서 표시될 영역을 알아야 겠죠.
document.body.clientWidth는 현재 열려진 브라우저의 문서표시 영역의 가로 크기를 나타냅니다.
clientWidth는 케이스 센서티브입니다 대소문자를 구별한다는 애기죠..

그리고는 레이어의 가로 사이즈를 구합니다. obj.style.width.replace로 레이어의 width 값을 구합니다. replace 메소드는 문자열을 찾아서 지정한 문자열로 대체하는 string 객체의 메소드입니다. eval이란 메소드를 통해 통해 레이어의 좌표를 document.body.clientWidth /2 - 레이어의 크기 /2 를 함으로써 x좌표를 구합니다.

브라우저의 가로 크기가 800이라면 800/2는 400px 입니다. 레이어의 크기가 500이라면 500/2는 250px 이구요. 결국에는 400-250=150px이 레이어의 x 좌표 값을 가지게 되어 항상 가운데 정렬이 되는 겁니다.
제가 잘못 이해하고 있는 부분이 있으면 애기해 주시구요. 이제 레이어의 가운데 정렬은 끝났으니까 페이지가 로드될때 가운데 정렬을 하는 함수를 부릅니다.
onload=”DivAlign(’레이어이름’);” 그리고 브라우저의 크기가 변할 때를 위하여 onresize=”DivAlign(’레이어이름’)”도 추가합니다.

이제 기본이 되는 레이어를 만드시면 됩니다. 구현할려는 최소의 해상도에 맞춰서 레이어의 사이즈를 결정하시면 됩니다. 최소 800이라면 레이어의 최대 값은 772px을 넘으면 안됩니다. 스크롤바의 크기를 빼야 하기 때문입니다.

브라우저 버전에따라, 사용하는 OS에 따라, 윈도우의 설정에 따라 스크롤바의 크기는 약간씩 달라집니다. 제 컴의 경우(win98se, IE5.5)는 28픽셀이더군요..좀 여유있게 잡으시는게 좋을겁니다.

드림위버에서 작업할 경우 일단 큰 레이어 700px짜리 레이어를 만드신 후.. nested 레이어를 써서(레이어 안에 레이어)작업을 하신 후에 스크립트 소스와 BODY의 onload, onresize를 넣으시면 됩니다.

//나무님의 글을 인용한 것입니다.