- 프론트엔드 공부 04일차 -
<!DOCTYPE html>
<html lang="ko">
<head>
<title>회원가입</title>
<link href="./02-signup2.css" rel="stylesheet">
</head>
<body>
<div class="page">
<div class="signupBox">
<h2>회원가입을 위해 <br>정보를 입력해주세요</h2>
<div class="userInfo">
<div class="textBox1">
<div class="text">* 이메일</div>
<input type="text" class="info">
</div>
<div class="textBox2">
<div class="text">* 이름</div>
<input type="text" class="info">
</div>
<div class="textBox3">
<div class="text">* 비밀번호</div>
<input class="info" type="password">
</div>
<div class="textBox4">
<div class="text">* 비밀번호 확인</div>
<input class="info" type="password">
</div>
</div>
<div class="genderBox">
<input type="radio" name="gender">여성
<input type="radio" name="gender">남성
</div>
<div class="checkBox">
<input type="checkbox"> <span class="checkboxFont">이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.</span>
</div>
<hr class="line">
<button class="button"><span class="buttonText">가입하기</span></button>
</div>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
.page {
width: 1920px;
height: 1080px;
padding: 60px 625px;
}
.signupBox {
width: 670px;
height: 960px;
border: 1px solid #aacdff;
box-shadow: #0068ff;
padding: 72px 100px;
}
h2 {
margin: 0px;
width: 466px;
height: 94px;
font-size: 32px;
font-weight: 700;
line-height: 47px;
color: #0068ff;
}
.userInfo {
display: flex;
flex-direction: column;
}
.textBox1 {
width: 466px;
height: 80px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
margin-top: 60px;
}
.textBox2 {
width: 466px;
height: 80px;
flex-direction: column;
margin-top: 21px;
}
.textBox3 {
width: 466px;
height: 80px;
flex-direction: column;
margin-top: 21px;
}
.textBox4 {
width: 466px;
height: 80px;
flex-direction: column;
margin-top: 21px;
}
.text {
width: 158px;
height: 23px;
font-size: 16px;
font-weight: 400;
line-height: 23px;
color: #797979;
}
.info{
width: 466px;
border: 1px solid #00688f;
border-top: none;
border-right: none;
border-left: none;
}
.genderBox {
width: 100%;
height: 80px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding-top: 50px;
}
.checkBox {
display: flex;
flex-direction: row;
padding-top: 52px;
}
.checkboxFont {
font-size: 13px;
font-weight: 1000;
margin-left: 12px;
}
.line {
margin-top: 30px;
margin-bottom: 30px;
}
.button {
width: 470px;
height: 75px;
border-color: #0068ff;
border-radius: 10px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.buttonText {
font-size: 18px;
color: #0068ff;
}
일단 만들어본 간단한 회원가입 페이지 양식...
아직 많이 다듬어야 할 것 같다.
'프론트엔드 공부 > 회원가입 실습' 카테고리의 다른 글
| 08일차 프론트엔드 공부 - 회원 가입 실습 2 (2) | 2024.09.04 |
|---|