Textarea 를 이용한 박스(테이블) 만들기1

 

 

 

fieldset으로 box 만들기 fieldset를 이용하면 테두리선을 여러모로 유용하게 이용할 수 있습니다. 테이블과 별 차이가 없어 보이지만 쓸만합니다.
꽃 씨 꽃씨 - 서정윤 눈물보다 아름다운 시를 써야지. 꿈속에서나 만날 수 있는 그대 한 사람만을 위해 내 생명 하나의 유리이슬이 되어야지.	테이블이 아닙니다. 테이블이 아닙니다. 여긴 제목여긴 내용을 여긴제목 여긴 내용을 박스의 크기를 따로 지정해 줄 수도 있습니다. 박스의 크기를 따로 지정해 줄 수도 있습니다. 테두리의 두께, 모양, 색상을 지정합니다. 테두리의 두께, 모양, 색상을 지정합니다. 여백도 넣습니다. 여백도 넣습니다.
응용하면 아래와 같은 모양으로 발전(?) 시킬 수 있습니다. ◀꽃 씨▶ 꽃씨 - 서정윤 눈물보다 아름다운 시를 써야지. 꿈속에서나 만날 수 있는 그대 한 사람만을 위해 내 생명 하나의 유리이슬이 되어야지.	navy; background: url(bg.gif) no- right bottom; width:300; height:200; padding:15"> 제목 내용 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>