본문 바로가기
Development/HTML

테이블 대신 필드셋(fieldset)을 이용하기

by wansdream 2006. 1. 5.
<FONT size=2><STRONG>테이블 대신 필드셋(fieldset)을 이용하기 <BR><BR><BR></STRONG>FIELDSET은 웹페이지 내 여러 개의 양식(컨트롤)들을
하나의 그룹으로 묶는 기능으로서 , <BR>LEGEND와 함께 쓸 수 있다. LEGEND는 컨트롤 묶음에 제목을 붙이는 역할을 하며,
<BR><LEGEND>는 반드시 <FIELDSET>안에서 사용해야 한다. <BR>FIELDSET과 LEGEND는 시작과
끝내는 태그로 감싸주어야 적용된다.<BR><BR><fieldset><FONT color=#0066ff><legend>
제목</legend></FONT>제목을 넣어서 fiedlset작성하기</fieldset> <BR><fieldset
<FONT color=#0066ff>style="width:50; height:30"</FONT>>필드셋 크기를 원하는 크기로
만든다.</fieldset> <BR><fieldset <FONT color=#0066ff>style="border:3 solid
#808080"</FONT>>필드셋 선의 두께와 모양, 색상을 변경하기</fieldset> <BR><fieldset
<FONT color=#0066ff>style="padding:5"</FONT>>필드셋에 여백을 만들어준다.</fieldset>
<BR><fieldset <FONT color=#0066ff>style="border-left-width:20"</FONT>>필드셋의
경계선 일부분에 두께를 변경한 경우</fieldset> <BR><BR><BR></FONT>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
   <TBODY>
   <TR vAlign=top>
       <TD colSpan=3 height=25><STRONG><FONT size=2><FIELDSET>을 사용한
예제</FONT></STRONG></TD>
   </TR>
   <TR>
       <TD vAlign=top align=right width=220 height=80>
           <form name="form1">
               <FIELDSET style="bgcolor: #dddddd"><BR>이름(실명) : <INPUT size=15 name=name>
  <BR>전화번호 : <INPUT size=15 name=tel>     <BR><BR></FIELDSET>
           </form>
       </TD>
       <TD vAlign=top align=right width=15><FONT size=2> </FONT></TD>
       <TD vAlign=top height=80>
           <TABLE class=webtable style="MARGIN-TOP: -2px" cellSpacing=0 cellPadding=0
width="100%" border=0>
               <TBODY>
               <TR>
                   <TD><FONT size=2><FONT color=#0066ff><FIELDSET
style="board:1"></FONT><BR>이름(실명) : <INPUT name="name"
type="text"><BR>전화번호: <INPUT name="tel" type="text" ><BR><FONT
color=#0066ff></FIELDSET>
</FONT></FONT></TD>
               </TR>
               </TBODY>
           </TABLE>
       </TD>
   </TR>
   </TBODY>
</TABLE>
<BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
   <TBODY>
   <TR vAlign=top>
       <TD colSpan=3 height=25><FONT size=2><STRONG><FIELDSET>과 <LEGEND>을
함께 사용한 예제</STRONG> </FONT></TD>
   </TR>
   <TR vAlign=top>
       <TD align=right width=220 height=80>
           <form name="form2">
               <FIELDSET><LEGEND>입력해주세요.</LEGEND><BR>이름(실명) : <INPUT size=15 name=name>    
<BR>전화번호: <INPUT size=15 name=tel>     <BR>e-mail: <INPUT size=15 name=e_mail ?>
   <BR><BR></FIELDSET>
           </form>
       </TD>
       <TD align=right width=15><FONT size=2> </FONT></TD>
       <TD class=webtd vAlign=center height=80>
           <TABLE class=webtable cellSpacing=0 cellPadding=0 width="100%" border=0>
               <TBODY>
               <TR>
                   <TD><FONT size=2><FONT
color=#0066ff><FIELDSET><BR><LEGEND>입력해주세요.</LEGEND></FONT><BR>이름(실명)
: <INPUT name="name" type="text"><BR>전화번호: <INPUT name="tel"
type="text" ><BR>e-mail: <INPUT name="e_mail" type="text""><BR><FONT
color=#0066ff></FIELDSET></FONT></FONT></TD>
               </TR>
               </TBODY>
           </TABLE>
       </TD>
   </TR>
   </TBODY>
</TABLE>
<BR><BR><BR>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
   <TBODY>
   <TR vAlign=top>
       <TD colSpan=3 height=25><STRONG><FONT size=2><FIELDSET>에 스타일
적용하기</FONT></STRONG></TD>
   </TR>
   <TR vAlign=top>
       <TD align=middle width=220 height=80>
           <FIELDSET
style="BORDER-RIGHT: #f9f9f9 1px solid; BORDER-TOP: #808080 1px solid; BORDER-LEFT: #f9f9f9 1px solid; BORDER-BOTTOM: #808080 1px solid"><LEGEND
align=center><FONT color=#cc0099>필드셋의 다양한 효과</FONT></LEGEND><BR>필드셋을 이용하면
<BR>테이블을 대신하여 <BR>다양한 표현을 할수 있다.<BR><BR></FIELDSET></TD>
       <TD align=middle width=15><FONT size=2></FONT></TD>
       <TD vAlign=top height=80>
           <TABLE class=webtable cellSpacing=0 cellPadding=0 width="100%" border=0>
               <TBODY>
               <TR>
                   <TD><FONT size=2><FONT color=#0066ff><FIELDSET style="border:1 solid;
border-top-color: #808080; border-right-color: #f9f9f9; border-left-color:
#f9f9f9; border-bottom-color: #808080"> </FONT><BR><FONT
color=#0066ff><legend align="center">필드셋의 다양한
효과</legend></FONT><BR><br>필드셋을 이용하면 다양한 표현할 수 있다.<br><BR><FONT
color=#0066ff></FIELDSETt> </FONT></FONT></TD>
               </TR>
               </TBODY>
           </TABLE>
       </TD>
   </TR>
   </TBODY>
</TABLE>

'Development > HTML' 카테고리의 다른 글

OBJECT 태그 사용법  (0) 2006.12.01
레이어 이동 스크립트  (0) 2006.12.01
marquee 태그  (0) 2005.08.14
플래시 배경 투명하게 삽입하기  (0) 2005.08.13
HTML 설명  (0) 2005.07.17
프레임 나뉜 페이지에서 새로고침시 페이지 유지하기  (0) 2005.07.07

댓글