본문 바로가기

Soft Program

절대위치와 상대위치

레이어 테이블을 고정시키는 절대위치와상대위치에 대해서

테이블과 레이어의 관계는 좀 애매 합니다
예를 들어 테이블이나 이미지 등과 같은 것은 레이어 안으로 삽입하면 레이어에 종속이 됩니다만,
레이어를 테이블의 셀 <td>안에 삽입하면, 레이어의 기본속성 상 테이블과 무관하게 자리를 지킵니다.
드림위버나, 나모등을 사용해서 레이어를 끌어다가 임의의 위치에 삽입하면,
다음과 같이 소스코드가 생성됩니다.
예를 들어 드림위버에서 레이어를 삽입하면,
<div id="Layer1" style="position:absolute; left:420px; top:273px; width:164px; height:104px; z-index:1"></div>
이 됩니다. 여기서 주목 하실 것은 style="... " 옵션 부분의 position:absolute; 입니다.
absolute가 절대위치를 뜻하므로 이것은 웹 브라우저내 페이지의 좌상단 구석(0,0)을 기준으로 레이어의 위치를 정합니다.
위에선 제가 마음대로 그냥 가져다 붙였으므로 left:420px; 는 왼쪽부터 420픽셀, top:273px; 는 위에서부터 273픽셀 위치가 되는 것이지요.
그래서 이것을 절대좌표의 대상이 되는 웹페이지 좌상단을 기준으로 하지 않고, 테이블을 기준으로 하려면 일단 <div> 레이어를 테이블 셀<td>안쪽으로
복사 해넣습니다.
<table width="300" height="194" border="1" cellpadding="1" cellspacing="1">
<tr>
<td bgcolor="#999966">
<div id="Layer1" style="position:relative; left:0; top:0; width:100; height:100; z-index:0; visibility: inherit; background-color: #FFCCCC; layer-background-color: #FFCCCC; border: 1px none #000000;">내용</div>
</td>
</tr>
</table>
위와 같이 <div> 레이어를 테이블 셀안으로 삽입하고, style="position:relative;..... " 와 같이 절대위치를 상대 (r elative) 위치로 변경해준다면
이때 부터는 기준이 되는 좌표값은 테이블의 셀 <td>이안쪽</td>의 좌상단이 기준이 되므로 새로운 기준점 얻게 되는 것입니다.
여기선 그냥 테이블 셀의 0,0 픽셀위치로( left:0; top:0; ) 잡아 둔 것이 보일겁니다.
해당 테이블 셀의 좌상단을 기준으로 하는 것이되지요.



'Soft Program' 카테고리의 다른 글

비디오와 오디오 인코딩 및 압축  (0) 2012.04.02
[script] setTimeout(), setInterval()  (0) 2011.11.21
movie clip 의 객체  (0) 2011.08.08
Adobe Premiere Media Cashe  (0) 2011.06.22
[애펙] 파티큘러 - 기초강좌  (0) 2011.06.18