HTML& CSS/CSS

필드셋,레전드,ul, li, 라벨을 사용한 입력폼 만들기

본클라쓰 2009. 12. 3. 16:02

 

입력폼의 태그 구성

<fieldset>

    <legend>기본정보</legend>

    <ul>

        <li><label>이름</label><input type="text" /></li>

        <li><lable>나이</label><input type="text" /></li>

    </ul> 

</fieldset> 

 

■ 출력 결과

 

이 입력폼에 CSS를 사용하여 좀 더 편하게 볼 수 있게 바꿔줍니다. 변경되는 스타일 속성은 다음과 같습니다.

 

 

 

○ <ul>에 list-style 제거

 

fieldset ul list-style: none; }

 

이 상태가 되면 리스트 스타일이 사라집니다. 이제 label에 스타일을 줍니다.

 

 

 

 

 라벨에 float 속성에 left 주기 

 

fieldset ul { list-style: none; }

fieldset label float: left; }

 

 label에 영역을 지정하고 width 값을 주기 위해 float 속성을 left로 줍니다. left로 준 후 width 값을 추가로 주어 label이 영역을 갖고 있게 합니다.

 

fieldset ul { list-style: none; }

fieldset label { float: left; width: 100px; 

 

이렇게 스타일을 지정하면 입력폼의 레이아웃을 잡은 것입니다. 이 후 추가적으로 스타일을 지정하고 싶으면 스타일을 지정하시면 됩니다.  

 

 

 

전체 코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
fieldset { width:500px; }
fieldset ul { list-style:none; }
fieldset label { float:left; width:50px; } 
</style>
</head>
<body>
<fieldset>
 <legend>기본정보</legend>
 <ul>
  <li><label>이름</label><input type="text"/></li>
  <li><label>나이</label><input type="text"/></li>
 </ul>
</fieldset>
</body>
</html>