4일차
2024. 6. 21. 09:57ㆍAquarium
회원 가입 폼 페이지(html)를 만드는데 주력.
더불어 다른 팀원들에게 공유할 헤더와 푸터를 만들어야 하는데, 일단 헤더 생성에 집중하고 다른 날에 푸터 제작할 예정.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>회원가입</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<script src="../../static/js/registerForm.js"></script>
<style>
label {
margin: 10px;
margin-right: 20px;
}
footer {
background-color: darkblue;
color: white;
margin-top: 30px;
padding: 10px 0;
}
.form-group {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.col-sm-9 {
flex-grow: 1;
}
.form-control {
border: none;
border-bottom: 1px solid #ced4da;
border-radius: 0;
}
body{
background-color: white;
}
.mainform{
width: 100%;
box-shadow: 5px 5px 10px darkblue;
}
form{
padding: 10px;
}
.submit{
width: 100%;
}
input{
pointer-events: none;
}
/*내비게이션*/
.navform{
box-shadow: 5px 5px 10px black;
background-color: rgb(250, 251, 253)
}
.login {
margin-left: auto;
color: darkblue;
font-size: small;
font-weight: bold;
}
.nav-link{
color: darkblue;
font-size: large;
font-weight: bold;
}
.welcomeMsg{
display:none;
}
</style>
</head>
<body>
<header>
<nav class="navform navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="pngegg.png" alt="logoimage" style="width: 210px;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item dropdown mr-5">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
방문 전 정보
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">이용안내</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">공지사항</a></li>
</ul>
</li>
<li class="nav-item dropdown mr-5">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
아쿠아리움 소개
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">전시생물 소개</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">프로그램 소개</a></li>
</ul>
</li>
<li class="nav-item dropdown mr-5">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
온라인 예매
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">예약하기</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">예약확인</a></li>
</ul>
</li>
<li class="nav-item dropdown mr-5">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
굿즈샵
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">구매하기</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">구매정보</a></li>
</ul>
</li>
</div>
<div class="ml-auto">
<a href="login.html" class="login">로그인</a>
</div>
<div class="ml-auto welcomeMsg">
<span id="username"></span>
</div>
</div>
</div>
</nav>
</header>
<div class="mainform container-fluid mt-4">
<div class="row">
<div class="backimg col-md-6">
<img src="realistic-shark-in-ocean.jpg" style="width: 100%; height: 100%;">
</div>
<div class="form col-md-6">
<form id="registerForm">
<div class="row mb-2">
<label for="memberId" class="col-sm-3 col-form-label">아이디</label>
<div class="col-sm-9 form-group">
<input type="text" class="form-control mb-2" id="memberId" style="width: 100%;" required>
<button type="button" class="btn btn-outline-info mb-1" onclick="idDupl()">중복 확인</button>
<span id="idDupl"></span>
<span id="validateIdMsg"></span>
</div>
</div>
<div class="row mb-2">
<label for="memberPw" class="col-sm-3 col-form-label">비밀번호</label>
<div class="col-sm-9 form-group">
<input type="password" class="form-control mb-1" id="memberPw" style="width: 100%;" required>
<span id="validatePwMsg"></span>
</div>
</div>
<div class="row mb-2">
<label for="memberPwConfirm" class="col-sm-3 col-form-label">비밀번호 확인</label>
<div class="col-sm-9 form-group">
<input type="password" class="form-control mb-2" id="memberPwConfirm" style="width: 100%;" required>
<button type="button" class="btn btn-outline-info" onclick="pwSame()">일치 확인</button>
<span id="pwSame"></span>
</div>
</div>
<div class="row mb-2">
<label for="memberEmail" class="col-sm-3 col-form-label">이메일</label>
<div class="col-sm-9 form-group">
<input type="email" class="form-control mb-2" id="memberEmail" style="width: 100%;" required>
<button type="button" class="btn btn-outline-info">인증하기</button>
</div>
</div>
<div class="row mb-2">
<label for="memberName" class="col-sm-3 col-form-label">이름</label>
<div class="col-sm-9 form-group">
<input type="text" class="form-control mb-1" id="memberName" style="width: 100%;" required>
<span id="validateNameMsg"></span>
</div>
</div>
<div class="row mb-4">
<label for="memberBirth" class="col-sm-3 col-form-label">생년월일</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="memberBirth" style="width: 100%;" required>
</div>
</div>
<div class="row mb-4">
<label for="memberPhone" class="col-sm-3 col-form-label">휴대폰 번호</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="memberPhone" style="width: 100%;">
</div>
</div>
<div class="col-md-12 text-center">
<button type="submit" class="submit btn btn-outline-info">가입하기</button>
</div>
</form>
</div>
</div>
</div>
<footer class="footer">
<div class="container text-center">
<p>© 2024 브랜드명. All Rights Reserved.</p>
<p>
<a href="#">개인정보처리방침</a> | <a href="#">이용약관</a>
</p>
</div>
</footer>
</body>
</html>
로그인 버튼과 환영 메시지는 로그인을 하면 로그인 버튼이 안보이고 환영 메시지만 보이게 끔 설정할 예정.
나중에 JS에서 코드를 짜야할 거 같음.