■ 입력폼의 태그 구성
<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>
<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>
'HTML& CSS > CSS' 카테고리의 다른 글
| CSS를 사용한 3단 레이아웃 예제 (0) | 2011.01.04 |
|---|---|
| CSS을 사용하여 레이아웃(layout) 잡기 (0) | 2011.01.04 |
| 고급 - position 속성 (0) | 2009.10.18 |
| 고급 - 흐름(floating) (0) | 2009.10.18 |
| 고급 - 엘레멘트 영역의 너비(width)와 높이(height) (0) | 2009.10.18 |