[8주][1일][1~2th] HTML/CSS: 쇼핑몰 주문자 정보 입력 꾸미기

CSS

body{
 font-family: "맑은 고딕";
}
label{
 width:150px;
 height:30px;
 display: table-cell;
 border-right: 1px dashed #c6c6c6;
 padding: 10px 5px;
}
form{
 display:table;
 border-collapse: collapse;
 margin: 0 auto;
 
}
form p{
  display: table-row;
 border-bottom: 2px solid #000;
}
form h1{
 color: #fff;
 background:#000;
 display: table-caption;
 border-bottom: 2px solid #000;
 text-align:center;
 padding-bottom: 10px;
}
form .submit{
 text-align:right;
 
}
form .submit label{
 border:none;
}
span{
 display: table-cell;
 padding: 5px 0px 5px 20px;
 vertical-align: middle;
}
.submit2{
 font-family: "맑은 고딕";
 background: #f39;
 color:#fff;
 padding:0 auto 10px auto;
 width:150px;
 height:30px;
 margin: 10px 5px;
}
input{
 width:100px;
 height:20px;
 margin:2px;
 border: 1px solid #f39;
}
.text2{
 width:260px;
}
div{
 background: #ff9;
 padding-bottom: 20px;
 width: 500px;
 margin: 200px auto;
}

HTML

<div>
<form>
<h1>주문자 정보입력</h1>
<p><label>이름</label><span><input type="text"></span></p>
<p><label>휴대폰</label> <span><select>
<option>010</option>
<option>011</option>
<option>019</option>
</select>
<input type="text">-<input type="text"></span></p>
<p><label>이메일</label><span><input type="text">@
<select>
<option>nate.com</option>
<option>naver.com</option>
<option>daum.net</option>
</select></span></p>
<p><label>배송주소</label><span><input type="text"><input type="button" value="우편번호 검색"><br>
<input type="text" class="text2"><br>
<input type="text" class="text2"><span></p>
<p class="submit"><label></label><input class="submit2" type="submit" value="주문신청완료"></p>
</form>
</div>