이미지로 문서꾸미기

<table border="0" cellpadding="2" cellspacing="0" width="100%"> <tr> <td colspan="4" height="8"> </td> </tr> <tr> <td bgcolor="#ffffff"> .. </td> <td bgcolor="#ffffff" width="100%" valign="top"> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr><td valign="top"> 이미지로 문서를 꾸미는 법을 알아보겠습니다. html 문서에 이미지를 넣는 방법은 보기보다 간단합니다. <img>태그로 이미지 삽입을 손쉽게 해결할 수 있는데요, 이미지의 크기, 테두리등의 조절 뿐만 아니라 텍스트와의 정렬 상태, 수평/수직 여백등을 조절할 수 있습니다. <img>태그에 사용되는 속성을 살펴볼까요? <ul type="disc"> <li>src-삽입할 이미지의 파일명, 또는 url을 지정합니다. (그림의 주소를 보시려면 그림위에 마우스를 대신 다음 오른쪽 버튼을 클릭하시면 그림의 등록정보를 보실 수 있습니다.) <li>border-이미지의 테두리 크기를 지정합니다 <li>width-이미지의 넓이를 지정합니다. <li>height-이미지의 높이를 지정합니다. <li>align-이미지와 텍스트와의 정렬상태를 지정합니다. (left, right, top, middle, bottom등의 값을 사용합니다.) <li>hspace-이미지의 수평 여백을 지정합니다. <li>alt-이미지위에 마우스를 대면 풍선도움말이 뜨며 설명이 나옵니다 </ul> 그럼 그림을 넣어볼까요? 예제1-기본적인 이미지 넣기   <table border="0" cellpadding="5" cellspacing="0" bgcolor="#FFE3E0" bordercolor="black"> <tr> <td width="462"><html> <head> <title>이미지 넣기</title> </head> <body> <img src="http://members.tripod.lycos.co.kr/hao_maru/ani_pskippy.gif"> </body> </html></td> </tr> </table> [결과]   <table border="0" cellspacing="0" bgcolor="#FFF8F8"> <tr> <td width="251"><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmembers.tripod.lycos.co.kr%2Fhao_maru%2Fani_pskippy.gif" width="250" height="90" border="0"></td> </tr> </table> 예제2-이미지 테두리 두께 조절하기   <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFF9F8"> <tr> <td width="613"><html> <head> <title>이미지 테두리 두께 조절하기</title> </head> <body> <center> <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" border=10> <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" border=20> <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" border=30>  </center> </body> </html></td> </tr> </table> [결과] <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFEEED"> <tr> <td width="339"><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="38" height="33" border="10">    <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="38" height="33" border="20">   <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="38" height="33" border="30"></td> </tr> </table> 그럼 이번에는 그림의 크기를 조절해볼까요? 예제3-이미지크기 조절하기 <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFF2F2"> <tr> <td width="732"><html> <head> <title>이미지 크기 조절하기</title> </head> <body> <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" width=38 height=33> <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" width=50 height=40>  <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" width=70 height=60> </body> </html></td> </tr> </table> [결과] <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFEFEF"> <tr> <td width="281"><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="38" height="33" border="0">      <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="50" height="40" border="0">         <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="70" height="60" border="0"></td> </tr> </table> 그림의 크기가 변화된 것을 볼 수 있습니다. 그럼 그림옆에 넣을 글씨의 위치를 조절해볼까요? <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFF4F4"> <tr> <td width="732"><html> <head> <title>이미지의 상,중,하에 텍스트 정렬</title> </head> <body> <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" align=top>이미지 상단에 텍스트 정렬 <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" align=middle>이미지 중앙에 텍스트 정렬 <img src="<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" align=bottom> 이미지 하단에 텍스트 정렬 </body> </html></td> </tr> </table>   [결과]   <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFF2F2"> <tr> <td width="259"><img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" align="top" width="38" height="33" border="0">이미지 상단에 텍스트 정렬 <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" align="middle" width="38" height="33" border="0">이미지 중앙에 텍스트 정렬 <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" align="bottom" width="38" height="33" border="0">이미지 하단에 텍스트 정렬 </td> </tr> </table>   그럼 이제 그림을 설명해주는 풍선 도움말을 달아봅시다- 그림위에 마우스를 대면 조그만 풍선창이 뜨면서 설명이 나오는 것 보셨죠?   <table border="0" cellpadding="10" cellspacing="0" bgcolor="#FFF2F2"> <tr> <td width="636"><html> <head> <title>풍선 도움말 만들기</title> </head> <body> <img src='<a href="http://myhome.hananet.net/~sunny016/image/kitty6.gif">http://myhome.hananet.net/~sunny016/image/kitty6.gif</a>" alt="귀여운키티"> </body> </html></td> </tr> </table>   그림위에 마우스를 대보세요 <img src="https://img1.daumcdn.net/relay/cafe/original/?fname=http%3A%2F%2Fmyhome.hananet.net%2F%7Esunny016%2Fimage%2Fkitty6.gif" width="38" height="33" border="0" alt="귀여운 키티"> 자, 이제 문서에 그림을 자유자재로 넣으실 수 있겠죠. 한가지 부탁드릴 말씀은, 제목에는 너무 큰 그림을 자제해 달라는 것입니다. </td></tr> </table> </td> <td width="18" nowrap> </td> <td nowrap valign="top" align="right"> </td> </tr> </table>