테이블(절대위치활용)에 대하여(11)

Table 에관하여 열한째 시간입니다. 오늘은 전번 시간에 설명한 레이어 절대위치의 활용법에 대하여 알아 보겠습니다.

테이블10신에서는 배경 그림이 고정되어 있어서 크기를 줄이거나 크게할수 없었습니다. 오늘은 배경도 레이어로 하여 크기를 줄이고 그 위에 다른 그림을 겹치게 하면서 글이 올라 가는 방법에 대하여 설명 드리겠습니다. 위의 그림을 아래의 크기로 줄여서 배경 레이어로 만듭니다. 이그림은 배경으로 할것이기에 position:absolute; z-index:1 이 됩니다. 테이블 테두리를 10으로 할것이기때문에 top:10; left:10 으로 위치를 잡아 줍니다.   그리고 배경 위에 겹쳐놓을 그림 두개를 준비 했습니다. 남자 그림의 사이즈가 너무 크군요. 사이즈를 70%로 줄여서 알파필트 filter:progid:DXImageTransform.Microsoft.Alpha( Opacity=100, FinishOpacity=0, Style=2, StartX=0, FinishX=100, StartY=0, FinishY=100) 를 넣고 남자그림 레이어로 만듭니다 배경그림위에 남자의 그림이 올라가야 하므로 position:absolute; z-index:를 2 로 해줘야 합니다. 위치는 왼쪽위 top:20; left:20;으로 잡아 줍니다. 이 위치는 여러분이 원하시는 위치에 넣으실려면 top:수치와 left:수치만 바꾸어주면 됩니다. 여자의 그림도 위와 같은 방법으로 레이어를 만들어 줍니다. 여기에 이 별그림도 몇개 넣어 보죠. 역시 레이어로 각각 만들어 줍니다. 이제 테이블을 만들고 글을 구해와서 글또한 레이어로 만들어 줍니다. 완성된 소스

 

 

..

 

 

 

만나고 싶을때 언제라도 만날 수 있다면 보고 싶을때 언제라도 볼 수 있다면 이리도 마음 저리는 일은 없을겁니다. 만나고 싶을때 만날 수 없기에 보고 싶을때 볼 수 없기에 그대는 정녕 내게 아픔입니다. 금방이라도 내게 다가와 따뜻한 손 내밀것 같은 그대여. 그대는 지금 어디 있습니까. 어디 있기에 이토록 더디 옵니까...

..