<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 주문서 작성하기</title>
<style>
.container {
width:600px;
margin:0 auto;
}
ul { /* 순서없는 목록에 적용할 스타일 */
list-style-type: none; /* 불릿 없앰 */
}
label.title { /* class=title인 label에 적용할 스타일 */
font-weight: bold; /* 굵은 글자 */
width: 80px; /* 너비 80px */
float: left; /* 왼쪽부터 배치 */
}
div.centered { /* class=centered인 div에 적용할 스타일 */
text-align: center; /* 가운데 정렬 */
}
fieldset { /* 필드셋에 적용할 스타일*/
margin: 15px 10px; /* 상하 마진 15xp, 좌우 마진 10px */
}
fieldset legend { /* 필드셋의 제목 */
font-weight: bold; /* 굵은 글자 */
font-size: 18px; /* 글자 크기 18px */
color: purple; /* 글자색 자주 */
}
ul li { /* 목록의 각 항목 */
margin-bottom: 10px; /* 아래 마진 10px */
}
</style>
</head>
<body>
<div class="container">
<h1>상품 주문서</h1>
<form>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for="uname" class="title">이름</label>
<input type="text" id="uname" placeholder="여백없이 입력" required>
</li>
<li>
<label for="tel1" class="title">연락처</label>
<input type="tel" id="tel1" placeholder="연락가능한 번호">
</li>
</ul>
</fieldset>
<fieldset>
<legend>배송지 정보</legend>
<ul>
<li>
<label for="addr" class="title">주소</label>
<input type="text" size="40" id="addr" required>
</li>
<li>
<label for="tel2" class="title">전화번호</label>
<input type="tel" id="tel2" required>
</li>
<li>
<label for="comment" class="title">메 모</label>
<textarea cols="40" rows="3" id="comment"></textarea>
</li>
</ul>
</fieldset>
<fieldset>
<legend>주문 정보</legend>
<ul>
<li>
<label><input type="checkbox">과테말라 안티구아 (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
<li>
<label><input type="checkbox">인도네시아 만델링 (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
<li>
<label><input type="checkbox">탐라는도다(블렌딩) (100g) </label>
<label><input type="number" value="0" min="0" max="5">개 </label>
</li>
</ul>
</fieldset>
<div class="centered">
<input type="submit" value="주문하기">
<input type="reset" value="다시 작성">
</div>
</form>
</div>
</body>
</html>