비밀">
<!-- 10_form/10-2_membership.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>10-2_membership</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
h1, #join {
margin: 20px 0 0 30px;
}
#join {
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
padding: 20px;
width: 580px;
}
.cols {
padding: 5px;
}
.cols li {
display: inline-block;
}
.col_1 {
width: 120px;
}
.col_2 input, select {
width: 200px;
height: 28px;
}
.email input {
width: 200px;
height: 28px;
}
.hello {
vertical-align: top;
}
textarea {
width: 430px;
height: 100px;
resize: none;
}
#buttons {
width: 610px;
text-align: right;
}
#buttons button {
padding: 6px 20px;
margin: 20px 0 0 4px;
}
</style>
</head>
<body>
<h1>회원가입 폼</h1>
<form>
<ul id="join">
<li>
<ul class="cols">
<li class="col_1">아이디</li>
<li class="col_2"><input type="text"/></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">비밀번호</li>
<li class="col_2"><input type="password"/></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">비밀번호 확인</li>
<li class="col_2"><input type="password"/></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">이름</li>
<li class="col_2"><input type="text"/></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">아이디</li>
<li class="col_2"><input type="text"/></li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">이메일</li>
<li class="email"><input type="text"/> @ </li>
<li>
<select>
<option>직접 입력</option>
<option>naver.com</option>
<option>gmail.com</option>
</select>
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">이메일 수신</li>
<li>
<input type="radio" name="email" checked/> 비수신
<input type="radio" name="email"/> 수신
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1">가입 경로</li>
<li>
<input type="checkbox" name="notice1"/> 추천
<input type="checkbox" name="notice2"/> 인터넷
<input type="checkbox" name="notice3" checked/> 기타
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col_1 hello">가입 인사</li>
<li><textarea></textarea></li>
</ul>
</li>
</ul><!-- // #join -->
<div id="buttons">
<button type="submit">저장하기</button> <button type="reset">취소하기</button>
</div>
</form>
</body>
</html>