Textarea 를 이용한 박스(테이블) 만들기1
|
fieldset으로 box 만들기 fieldset를 이용하면 테두리선을 여러모로 유용하게 이용할 수 있습니다. | |
|
|
|
|
시킬 수 있습니다. |
1은 테두리 굵기, navy는 테두리 색, bg.gif는 배경그림의 경로 및 이름 300은 박스의 가로 크기, 200은 박스의 세로 크기, 15는 박스 내부의 여백
|
<table border="1" cellpadding="2" cellspacing="2" align="center" width="622" bgcolor="#CCCCCC" bordercolordark="white" bordercolorlight="black">
<tr>
<td width="610" colspan="2" bgcolor="#DFDDDD" bordercolor="#CCCCCC" bordercolordark="#CCCCCC">
<p align="center"><b><span style="font-size:9pt;"><font color="black">fieldset</font></span></b><span style="font-size:9pt;"><font COLOR="black">으로<b> box</b> 만들기
fieldset를 이용하면 테두리선을 여러모로 유용하게 이용할 수 있습니다.
<br>
테이블과 별 차이가 없어 보이지만 쓸만합니다.</FONT></span></p>
</td>
</tr>
<tr>
<td width="296" bgcolor="white" bordercolor="#CCCCCC" bordercolordark="#CCCCCC"> <center><fieldset style="border:2 solid navy; background-image: url(html07.gif); background-repeat: no-repeat; background-position: right bottom; width:300; height:200; padding:15"><legend align="right"><span style="font-size:9pt;">꽃 씨</legend>꽃씨 - 서정윤<br>
눈물보다 아름다운 시를 써야지.<br>
꿈속에서나 만날 수 있는<br>
그대 한 사람만을 위해<br>
내 생명 하나의 유리이슬이 되어야지.<img name=zb_target_resize style="cursor:hand" onclick=window.open(this.src) src="http://op.co.kr/ii/t4/imga/th200212/24/48/12508370803e0873b4a1098.gif" width="101" height="99"></fieldset>
</span></center></td>
<td bgcolor="white" bordercolor="#CCCCCC" bordercolordark="#CCCCCC" width="306">
<p align="left"><fieldset style="width:300;"><span style="font-size:9pt;">테이블이 아닙니다.</fieldset>
<br></span><FONT class=font-color3><fieldset>테이블이 아닙니다.</fieldset></FONT> <span style="font-size:9pt;"><br>
<fieldset style="width:300;height:20; legend align=" center">여긴 제목</legend>여긴 내용을</fieldset><br> </span><FONT class=font-color3><fieldset><legend
align="center">여긴제목</legend>여긴 내용을</fieldset></FONT><span style="font-size:9pt;"><font class="font-color3"></fieldset><br></font>
<fieldset style="width:300; height:20;">박스의 크기를 따로 지정해 줄 수도 있습니다.</fieldset>
<br></span><FONT class=font-color3><fieldset style="width:300; height:20"><BR>박스의 크기를
따로 지정해 줄 수도 있습니다.</fieldset></FONT><span style="font-size:9pt;"> <fieldset style="width:300; border-width:1; border-color:rgb(159,182,255); border-style:solid;">테두리의 두께, 모양, 색상을 지정합니다.</fieldset>
<br></span><FONT class=font-color3><fieldset style="border:1 solid #9FB6FF"><BR>테두리의
두께, 모양, 색상을 지정합니다.</fieldset><BR></FONT><span style="font-size:9pt;">
<fieldset style="width:300; padding:5;">여백도 넣습니다.</fieldset>
<br></span><FONT class=font-color3><fieldset style="padding:5"><BR>여백도
넣습니다.</fieldset></FONT> <span style="font-size:9pt;">
</span></td>
</tr>
<tr>
<td width="296" bgcolor="white" bordercolor="#CCCCCC" bordercolordark="#CCCCCC"> <center><span style="font-size:9pt;">응용하면 아래와 같은 모양으로 발전(?)<br>시킬 수 있습니다. <br><fieldset style="border:4 solid CD3700; background-image: url(http://op.co.kr/ii/imga/th200212/24/48/12508370803e0873b4a1098.gif); background-repeat: no-repeat; background-position: right bottom; width:300; height:200; padding:15"><legend align="left"><font color=CD3700>◀<b>꽃 씨</b>▶</font></legend><font color=6495ED>
꽃씨 - 서정윤<br>
<br>
눈물보다 아름다운 시를 써야지.<br>
꿈속에서나 만날 수 있는<br>
그대 한 사람만을 위해<br>
내 생명 하나의 유리이슬이 되어야지.</fieldset><br>
</font></span></center></td>
<td width="306" bgcolor="white" bordercolor="#CCCCCC" bordercolordark="#CCCCCC">
<P align=left><FONT class=font-color3><SPAN style="FONT-SIZE: 9pt"><fieldset
style="border:<B>1</B> solid </SPAN></FONT><SPAN style="FONT-SIZE: 9pt"><FONT
class=font-color3 color=red><B>navy</B></FONT><FONT class=font-color3>;
<BR>background: url<B>(</B></FONT><B><FONT class=font-color3
color=blue>bg.gif</FONT></B><FONT class=font-color3>) <BR>no- right bottom;
width:<B>300</B>; height:<B>200</B>; <BR>padding:<B>15</B>"> <BR><legend
align="center">제목</legend>내용</fieldset></FONT>1은 테두리 굵기, <FONT
color=red>navy</FONT>는 테두리 색, <BR><FONT color=blue>bg.gif</FONT>는 배경그림의 경로 및
이름<BR>300은 박스의 가로 크기, 200은 박스의 세로 크기, <BR>15는 박스 내부의 여백</SPAN></P></td>
</tr>
</table>
