* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
h1, #join {
margin: 20px 0 0 30px;
}
#join {
border-top: 1px solid silver;
border-bottom: 1px solid silver;
width: 600px;
padding: 20px;
}
.cols {
padding: 5px;
}
.cols li {
display: inline-block;
}
.col-1 {
width: 120px;
}
.col-2 input, select, .email input {
width: 200px;
height: 28px;
}
.hello {
vertical-align: top;
}
textarea {
width: 400px;
height: 100px;
resize: none;
}
#buttons {
width: 600px;
text-align: right;
}
#buttons button {
padding: 6px 20px;
margin: 20px 0 0 4px;
}<body>
<h1>회원가입 폼</h1>
<br/>
<form action="#">
<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="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"/> 추천
<input type="checkbox"/> 비추천
<input type="checkbox" checked/> 기타
</li>
</ul>
</li>
<li>
<ul class="cols">
<li class="col-1 hello">가입 인사</li>
<li><textarea></textarea></li>
</ul>
</li>
</ul>
<div id="buttons">
<button type="submit">저장하기</button> <button type="reset">취소하기</button>
</div>
</form>
</body>
코딩 일기장