테이블(절대위치)에 대하여(10)

Table 에관하여 10신 - 절대 위치 - Table 에관하여 열번째 시간입니다. 9신에서 이미지의 위치를 설정한것은 위치를 지정하지 않고 임의로 나타나도록 한것 입니다 오늘은 이미지의 절대 위치를 설정하는 방법을 알아 보겠습니다.

style="position:absolute; top:수치; left:수치; z-index:수치; 여기에서 top:수치; left:수치; 가 절대 위치를 지정하는것 입니다. z-index:수치 는 전번 시간에 배우셔서 알고 있으실것 입니다. top:수치; 는 위에서 부터 지정한 수치만큼 떨어지라는 말 입니다. left:수치; 는 좌측에서 부터 부터 지정한 수치만큼 떨어지라는 말 입니다. 이 수치는 px 단위 입니다. 그리고 테이블을 기준으로 하는것이 아니고 페이지의 좌측과 페이지 상단 으로 부터의 거리 입니다. 그러므로 게시판에서 사용할때는 그 게시판 좌측과 상단의 거리를 계산한후 레이어의 위치를 잡아야 합니다. 연습장에서는 상단과 좌측에 여백이 없지만 게시판엔 게시판의 상단과 죄측에 여백이 있으므로 연습장에서의 결과와 게시판에서의 결과는 다릅니다. 예 1 테이블에 배경 그림을 깔고 marquee를 이용 하여 글을 스크롤 시키는것 까지는 모두가 아는 사실 입니다. 여기에다 반작이는 별들을 여러개 넣어 보겠습니다. 이 그림을 배경으로 하고 이 별을 레이어로 만들어 여러개를 넣어 보죠. <table width="550" height="380" bgcolor="#000000" cellpadding="0" cellspacing="0" border="10"> <tr> <td background="http://mysesang.com/pic/love1.jpg"> <marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="margin:40 0 40 50;"> <span style="font:bold 12px/150%; color:white; FILTER:shadow(color=#660000, Direction=135); height:100px;"> 만나고 싶을때 언제라도 만날 수 있다면<br> 보고 싶을때 언제라도 볼 수 있다면<br> 이리도 마음 저리는 일은 없을겁니다.<br><br> 만나고 싶을때 만날 수 없기에<br> 보고 싶을때 볼 수 없기에<br> 그대는 정녕 내게 아픔입니다.<br><br> 금방이라도 내게 다가와<br> 따뜻한 손 내밀것 같은 그대여.<br> 그대는 지금 어디 있습니까.<br> 어디 있기에 이토록 더디 옵니까... <br> </span> </marquee> <img id="layer2" src="http://mysesang.com/images/star9.gif" width="40" height="40" style="position:absolute; top:80; left:50;"> <img id="layer3" src="http://mysesang.com/images/star9.gif" width="35" height="35" style="position:absolute; top:130; left:100;"> <img id="layer4" src="http://mysesang.com/images/star9.gif" width="40" height="40" style="position:absolute; top:100; left:200;"> <img id="layer5" src="http://mysesang.com/images/star9.gif" width="20" height="20" style="position:absolute; top:100; left:150;"> <img id="layer6" src="http://mysesang.com/images/star9.gif" width="40" height="40" style="position:absolute; top:200; left:70;"> <img id="layer7" src="http://mysesang.com/images/star9.gif" width="30" height="30" style="position:absolute; top:70; left:200;"> <img id="layer8" src="http://mysesang.com/images/star9.gif" width="40" height="40" style="position:absolute; top:160; left:300;"> <img id="layer9" src="http://mysesang.com/images/star9.gif" width="40" height="40" style="position:absolute; top:180; left:200;"> <img id="layer10" src="http://mysesang.com/images/star9.gif" width="20" height="20" style="position:absolute; top:110; left:200;"> </td> </tr> </table> 결과 보기 이번에는 작은 그림을 크게 해볼까요. 위의 그림은 width=300 height=200 의 사이즈 입니다. 그림이 너무 작죠. 이것을 조금 큰 테이블에 일반적인 background 방법으로 width=450 height=350 의 사이즈로 테이블을 작성하면 아래와 같이 그림이 중첩되어 보입니다. 이렇게 겹쳐보이면 안되겠죠 배경그림으로 사용하면서 테이블을 크게 하고 이미지는 겹쳐 보이지 않게 하려면 이것 역시 예1과 동일한 방법으로 img 의 속성을 이용하여 이미지를 확대 하고 글을 레이어로 사용하면 됩니다. 아래 소스중 <img src="http://mysesang.com/pic/smallpic1.jpg" width="450" height="350"> 이부분이 배경그림을 확대한 소스 입니다 width 와 height 의 수치를 원본의 사이즈와 비례해서 수정하세요 예 2 <table width="450" height="350" bgcolor="#000000" cellpadding="0" cellspacing="0" border="10"> <tr> <td> <marquee direction="up"scrollamount="1.0" scrolldelay="100" id="layer1" style="position:absolute; z-index:1; margin-left:50;"> <span style="font:bold 12px/150%; color:white; FILTER:shadow(color=#660000, Direction=135); height:100px;"> 지워본다<br> 그러나 지워지지 않는다.<br> 그대의 모습.<br><br> 하루의 일과로<br> 몇 번이나 몇 번이고<br> 지워보나<br> 다시 살아나는 <br> 그대의 모습.<br><br> 중략...... </span></marquee> <img src="http://mysesang.com/pic/smallpic1.jpg" width="450" height="350"> </td></tr></table> 결과 보기 지워본다 그러나 지워지지 않는다. 그대의 모습. 하루의 일과로 몇 번이나 몇 번이고 지워보나 다시 살아나는 그대의 모습. 연필로 그렸다면 쉽게 지울 수도 있으리. 피로 그린 그대의 모습. 풀잎 5장을 따 그 풀잎들의 피로 그린 사랑의 그림자. 그대의 모습은 내 눈 속에 그려져 있다. 가슴 속에 그려져 있다. 지워지지 않는다. 원본의 사이즈와 비교해보세요. 상당히 커졌죠. 일반적인 방법으로 background 를 사용하면 배경 그림의 사이즈를 변경하지 못하지만 이렇게 이미지의 속성과 레이어를 이용하면 배경그림을 마음대로 제어 할수 있습니다. 한가지 주의 하실점은 작은 이미지를 크게 하실때는 너무 크게 하면 이미지가 깨어 집니다. 이글을 작성하기전 카페의 게시판을 한번 쭉 훓어 보았습니다. 그런데 alpha filter 의 사용법을 이해를 못하고 사용하시는분이 의외로 많은것 같아서 다음엔 alpha filter 의 사용법에 대하여 간단히 알아보고 레이어에 대하여 다른 응용법은 그 후에 다시 올리겠습니다.