회원가입 유효성검사 ( 2 )

bi_sz·2020년 6월 2일
0

과제

목록 보기
5/6
post-custom-banner

해당 틀에 맞춰 HTML을 다시 구성했다.

<div class = "container">
  <div class ="register">
    <h1> Register With Us <h1>
    <div class = "label">Username</div>
    <div class = "form">
        <input type="text" id = "userId" placeholder="Enter Username"/>
    </div>
    <div class = "label">Email</div>
    <div class = "form">
        <input type="email" id = "userEmail" placeholder="Enter Email"/>
    </div>
    <div class = "label">Password</div>
    <div class = "form">
        <input type="text" id = "pass" placeholder="Enter Password"/>
    </div>  
    <div class = "label">Confirm Password</div>
    <div class = "form">
        <input type="text" id = "pass2" placeholder="Enter Password again"/>
    </div>   
    <button id="signUp">Submit</button>
  </div>
</div>      

Register With Us

Username
Email
Password
Confirm Password
Submit


CSS 를 작성해 주었다.

* {margin : 0; paddind : 0;}
.container {
  width : 300px; margin : 50px auto ; border : 1px solid #ccc;
}
h1 {
  display : block; font-size : 30px; text-align: center; margin : 15px 0;
}
.label {
  font-size : 20px; margin : 1px 0; padding: 0 10px; 
  color : #999; text-align: left;
}
.form {
 padding : 0 10px; 
}
.form input {
  width : 100%; height : 35px; padding : 0 15px; 
  box-sizing : border-box; radius : 5px; border : 1px solid #ddd;
}
#submit {
  margin-top : 20px; display : block; width: 100%; height : 25px;
  background : #008B8B; color : white; border : none; cursor : pointer
}


profile
https://li-yo.tistory.com/ 티스토리 블로그 이전 하였습니다.
post-custom-banner

0개의 댓글