아름다운 그림이 있습니다. 이그림을 배경으로하여 글을 올리고 싶은데 배경그림이 아주 큽니다. 좀 작은 테이블에 이그림을 넣어 글을 올리고 싶은데 그림이 너무 클 경우에 테이블의 background 로 크기를 줄이면 그림이 잘려 나가 버리죠. background 는 그림의 사이즈를 줄이거나 크게하면 그림자체가 잘려나가거나 중첩됩니다. 이럴때 레이어를 이용하면 됩니다. 즉 img의 속성은 그림을 마음대로 줄이거나 크게 할수 있으므로 배경은 img를 이용하고 글을 레이어로 이용하면 해결되죠. 간단한 예를 하나 보면서 설명 하겠습니다. 그림 1  위의 그림은 width="550" height="370" 의 사이즈 입니다. 실제는 예를 이것보다 훨씬 큰 그림으로 보여 드려야 합니다만 지면이 허락하질 않아 이렇게 좀 작은 그림을 사용했습니다. 이그림으로 테이블을 width="365" height="245" 정도로 작게 만들어 볼까요. 일반적인 방법 입니다. 이런.... 그림이 다 잘려나가고 덩그런 하늘만 남았군요. 테이블은 작게 하면서 그림은 다 나와야 하는데 이래서는 이그림을 사용하는 효과가 없겠죠. 이럴때 레이어를 사용 합니다. 배경은 img로 사용하고 글을 레이어로 바꾸어 주면 됩니다. <img src="http://mysesang.com/pic/love1.jpg" width="365" height="245">를 주의 깊게 보셔야 합니다 width="365" height="245"이것이 배경그림의 사이즈를 줄이는곳이예요. width 와 height 의 수치를 테이블에 맞게 수정하면 됩니다. 특히 주의 하실점은 원본의 사이즈와 비율이 맞게끔 수치를 수정하셔야 하겠죠.
이번에는 작은 그림을 크게 해볼까요.  위의 그림은 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 의 수치를 원본의 사이즈와 비례해서 수정하세요
원본의 사이즈와 비교해보세요. 상당히 커졌죠. 일반적인 방법으로 background 를 사용하면 배경 그림의 사이즈를 변경하지 못하지만 이렇게 이미지의 속성과 레이어를 이용하면 배경그림을 마음대로 제어 할수 있습니다. 한가지 주의 하실점은 작은 이미지를 크게 하실때는 너무 크게 하면 이미지가 깨어 집니다. 이글을 작성하기전 카페의 게시판을 한번 쭉 훓어 보았습니다. 그런데 alpha filter 의 사용법을 이해를 못하고 사용하시는분이 의외로 많은것 같아서 다음엔 alpha filter 의 사용법에 대하여 간단히 알아보고 레이어에 대하여 다른 응용법은 그 후에 다시 올리겠습니다. |
'태그♡소스방' 카테고리의 다른 글
| 테이블(테두리)에 대하여(6) (0) | 2007.01.26 |
|---|---|
| 테이블(테두리)에 대하여(7) (0) | 2007.01.26 |
| 테이블(절대위치)에 대하여(10) (0) | 2007.01.26 |
| 테이블(절대위치활용)에 대하여(11) (0) | 2007.01.26 |
| 테이블(절대위치활용)에 대하여(11-1) (0) | 2007.01.26 |