안녕하세요
오늘은 배경 그림위에 글이 올라 가게 해보겠읍니다.
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 는 원본 그대로 해보죠 글 크기를 조금 줄여야겠네요
결과보기
바로위의 예와 비교해보세요. 느낌이 전혀 틀리죠? 이렇게 응용하면 같은 그림이라도 사용하는 사람에 따라 전혀 다른 느낌으로 나타낼수있어요
