728x90
반응형
09_attr.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/09_attr.css";
</style>
</head>
<body>
<section id="container">
<h1>예약하기</h1>
<form name="form1" id="form1" method="post">
<fieldset>
<legend>예약자 정보</legend>
<ul>
<li><label for="name">예약자</label>
<input type="text" id="name"> </li>
<li><label for="contact">연락처</label>
<input type="tel" id="contact"></li>
<li><label for="people">예약 인원</label>
<input type="number" id="people"></li>
<li><label for="bank">입금 은행</label>
<input type="text" id="bank"></li>
</ul>
</fieldset>
<input type="submit"/>
</form>
</section>
</body>
</html>09_attr.css
@CHARSET "UTF-8";
ul li {
list-style: none; /*목록에서 불릿 없앰*/
font-size: 16px; /*글자 크기 16px*/
margin-top: 10px; /*위쪽 여백 10px*/
}
ul li label {
float: left; /*왼쪽으로 배치*/
width: 80px; /*너비 80px*/
line-height: 25px; /*줄간격 25px*/
}
input[type="text"] {
width: 150px; /*너비 150px*/
background-color: skyblue; /*배경색 하늘색*/
border: 1px solid #000; /*1px짜리 검은색 실선*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch01-11. navigation (0) | 2017.08.23 |
|---|---|
| [CSS] ch01-10. pseudo (0) | 2017.08.23 |
| [CSS] ch01-08. group (0) | 2017.08.22 |
| [CSS] ch01-07.child (0) | 2017.08.22 |
| [CSS] ch01-06. descendant (0) | 2017.08.22 |