오늘은 배경 그림위에 글이 올라 가게 해보겠읍니다.
10신에서 보신건 단순히 그림만 올릴때 사용하는것이고
배경위에 글을 나타내는건 또 다른 명령을 사용해야해요.
전번에 table에 대하여 배우셨읍니다
배경 그림은 table 이나 td 에서 주소를 넣어주면 됩니다
명령어는 background 입니다
그리고 font를 넣어주면 되죠
배운데로 한번 해보겠읍니다
|
위의 그림의 등록 정보를 보시고 주소를 복사 하세요
그리고 그림의 크기도 적어 놓아야 합니다
그런 다음 이렇게 하세요
<table background="그림 주소" "width="넓이" height="높이" border=10>
이렇게 나오겠죠
<table background=http://mysesang.com/buty/img/bs2.jpg width=518 height=362 border=10>
그다음엔 <tr><td>를 넣어 가로와 세로를 만들어 줍니다.
잘모르시겠으면여기를 다시 한번 보세요
이제 부터는 글자의 명령을 넣어 줍니다
글자는 색을 흰색으로하고 크기는 3정도로 해볼까요
<font color=white size=3>
그리고 넣고 싶은 글을 여기에 넣어요
그다음엔 위의 모든 명령을 마무리 한다고 해줘야지요
명령의 역순으로
</font></td></tr></table>
예를 볼까요
|
예제보기
정리를 해보면 이렇게 되죠
<table background="http://mysesang.com/buty/img/bs2.jpg" width="518" height="362" border=10> <tr><td> <font color=white size=3> 홀로서기 1 <br><br> 지은이 : 서정윤<br><br> 기다림은<br> 만남을 목적으로 하지 않아도 좋다.<br> 가슴이 아프면<br> 아픈채로,<br> 바람이 불면<br> 고개를 높이 쳐들면서,<br> 아득한 미소.<br> </font></td></tr></table> 이렇게 하면 밑의 그림이 나옵니다
|
결과보기
홀로서기 1
지은이 : 서정윤
기다림은 만남을 목적으로 하지 않아도 좋다. 가슴이 아프면 아픈채로, 바람이 불면 고개를 높이 쳐들면서, 아득한 미소.
| |
글이 움직이지 안으니 좀 그렇죠
글을 움직일려면 marquee를 넣어서 글을 위로 움직이게하고
속도는 좀 느리게 해볼까요
또 글이 너무 왼쪽으로 치우쳤죠
중앙 정열 할려면 center을 넣어 줘야 하고
글자가 너무 가느니깐 좀 굵게 할려면 b도 넣어야 겠어요
자 한번 해보죠
|
예제보기
최종적으로 정리 하면 이렇게 됩니다
<table background="http://mysesang.com/buty/img/bs2.jpg" width="518" height="362" border=10> <tr><td> <marquee direction=up scrollamount=1> <font color=white size=3><center> <b> 홀로서기 1 <br><br> 지은이 : 서정윤<br><br> 기다림은<br> 만남을 목적으로 하지 않아도 좋다.<br> 가슴이 아프면<br> 아픈채로,<br> 바람이 불면<br> 고개를 높이 쳐들면서,<br> 아득한 미소.<br> </b></center> </font> </marquee> </td></tr></table> 이렇게 하여 결과를 한번 보죠
|
결과보기
|
시가있는집에 올린것과 같은 모양이 되었죠
여러분도 이제 멋지게 구상하여 한번 올려 보세요 |
알아 둬야 할것들
1. 바탕에 그림없이 색만 표시할때는 background를 하면 안되고 반드시 bgcolor="원하는 색"하여야하고 바탕에 그림을 넣을때는 지금 배우신대로 해야합니다
2. img src="그림주소" 하여 width와 height를 조절하면 그림 크기를 마음대로 해도 되었지만 table 의 background로할때, 다시말하면 바탕그림으로 할때는 크기조절을 하면 원본에 손상이 갑니다
예를들어 설명하죠 |
예제보기
원본의 그림 크기가 width=518 height362 인데 그림의 크기를 몰라서 원본의 크기보다 크게해봅시다 width=600 height450 쯤 해볼까요
|
결과보기
|
크기가 늘어 나는게 아니라 중복되어 나타나지요 |
img src 에서는 크기를 조절하면 원본 그대로 확대 축소가 되지만 바탕으로 설정하여 확대 하면 원본이 중복되고 축소하면 그림이 축소한만큼 없어집니다
이 속성을 이용할수도 있죠. 필요 없는 부분을 잘라내는 효과를 볼수있어요
예를 보죠 |
예제보기
원본의 그림 크기가 width=518 height362 인데 그림의 크기를 몰라서 원본의 크기보다 조금 작게 해봅시다 width=480 height300 쯤 해볼까요
|
결과보기
|
밑 부분의 배가 보기 싫군요.없에버리죠 |
예제보기
조금 더작게 해봅시다 width=400 height250 쯤 해봅니다
|
결과보기
|
|
예제보기
오른쪽 나무가지가 좀 지저분해보이죠. 이건 잘라내고 밑의 배를 넣어 볼까요.그림이 옆으로 긴것보다 상하로 길게해봐요width=300으로 줄이고 height=362 는 원본 그대로 해보죠 글 크기를 조금 줄여야겠네요
|
결과보기
|
바로위의 예와 비교해보세요. 느낌이 전혀 틀리죠? 이렇게 응용하면 같은 그림이라도 사용하는 사람에 따라 전혀 다른 느낌으로 나타낼수있어요
그럼 다음까지 안녕히....
|