form작성 방법
<div class="login-form">
<form action="" id="login">
<input type="text" name="id" id="id" class="id" placeholder="아이디">
<input type="password" name="psw" id="psw" class="psw" placeholder="비밀번호">
<button class="login-bt"><span class="login-icon"></span>로그인</button>
<button class="login-bt naver"><span class="login-icon"></span>네이버 로그인</button>
<input type="checkbox" name="check" id="check" class="check">아이디 저장
<div class="m-group">
<a href="member.html"><strong>회원가입</strong> | </a>
<a href="#">아이디 찾기 | </a>
<a href="#">비밀번호 찾기</a>
</div>
</form>
</div>
.login-form{
width:80%;
padding:20px;
border:2px solid #999999;
clear:both;
margin:auto;
position:relative;
top:20px;
}
.id,
.psw{
display:block;
margin-bottom:10px;
width:100%;
padding:10px;
font-size:20px;
border:1px solid #cccccc;
}
.login-bt{
width:100%;
padding:10px;
font-size:20px;
border:1px solid #cccccc;
background:transparent;
color:#333333;
cursor:pointer;
display:block;
margin-bottom:10px;
}
.login-icon{
height:25px;
border-right:1px solid #cccccc;
display:inline-block;
float:left;
padding:0 40px;
background:url(images/logo.png);
background-size:contain;
background-repeat:no-repeat;
background-position:center;
}
.check{
margin-top:10px;
}
.m-group{
margin-top:10px;
}
.m-group strong{
color:darkblue;
}
<div class="member-form">
<form action="" id="member">
<h4>아이디</h4>
<div class="m-form">
<input type="text" name="m-id" id="m-id" class="m-id" maxlength="20" >
</div>
<h4>비밀번호</h4>
<div class="m-form">
<input type="password" name="m-psw" id="m-psw" class="m-psw" >
<span class="material-icons lock">lock_outline</span>
</div>
<h4>비밀번호 재확인</h4>
<div class="m-form">
<input type="password" name="m-psw2" id="m-psw2" class="m-psw2" >
<span class="material-icons lock">lock_outline</span>
</div>
<h4>이름</h4>
<div class="m-form">
<input type="name" name="m-name" id="m-name" class="m-name" >
</div>
<h4>생년월일</h4>
<div class="m-form2">
<input type="text" name="year" class="year" id="year">
<select class="month">
<option >월</option>
<option value="01" >1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
</select>
<input type="text" name="day" class="day" id="day">
</div>
<h4>성별</h4>
<div class="m-form2">
<input type="radio" name="sex">남성
<input type="radio" name="sex">여성
</div>
</form>
</div>
html,body{
background:#efefefef;
}
.m-logo{
text-align:center;
margin-top:50px;
}
.member-form{
padding:20px;
border:1px solid #cccccc;
width:70%;
margin:auto;
}
.m-form{
width:100%;
padding:10px;
border:1px solid #cccccc;
background:white;
}
.m-id,
.m-psw,
.m-psw2,
.m-name{
border:none;
font-size:20px;
width:100%;
}
h4{
margin:5px;
}
.m-psw2,
.m-psw{
width:90%;
}
.lock{
float:right;
}
.m-form2{
width:100%;
}
.year,
.month,
.day{
padding:10px;
font-size:20px;
width:31%;
vertical-align:bottom;
border:1px solid #cccccc;
}
.month{
margin:0 15px;
}