반응형
나는 팀에서 첫번째로 비교적 쉬운 로그인 / 회원가입 페이지를 짜보기로 하였다.
작업은 학원수업에서 springMVC 수업에 진행했던거랑 동일한 프로젝트 구조로 만들었다.
ex) Maven으로 spring프로젝트를 생성하고 추가적으로 mybatis와 tiles, bootstrap을 이용하여서 만들었다.
작업의 첫번째로는 html / 부트스트랩을 이용해서 웹페이지의 기본골격을 짜는 것이다.
// 로그인화면
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../../../resources/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<title>로그인</title>
</head>
<body>
<div class="container-fluid">
<!-- 헤더+네비 -->
<header class="row">
<nav class="nav navbar-expand navbar-dark bg-dark col-12" >
<ul class="nav navbar-nav nav-fill w-50 align-self-center col-7 " style="margin:15px auto;">
<li class="nav-item"><a class="nav-link navbar-brand text-white" href="#">WishKet</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">프로젝트 등록</a></li>
<li class="nav-item"><a class="nav-link text-white "href="#">프로젝트 찾기</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">파트너스 찾기</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">이용방법</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">이용후기</a></li>
<span class="mt-2 text-white text-muted">|</span>
<li class="nav-item "><a class="nav-link text-white" href="#">스토어</a></li>
<li class="nav-item"><button type="button" class="btn btn-light" id="loginbtn1">로그인</button>  
<button type="button" class="btn btn-info" id="joinbtn">회원가입</button></li>
</ul>
</nav>
</header><!-- 헤더+네비 -->
<!-- 메인 -->
<div id="main" class="row bg-light" style="height: 680px">
<div id="intro" class="border col-7 mt-4 bg-white" style="height: 116px; margin:0 auto;">
<div style="margin:25px 20px">
<h4 class="font-weight-bold text-dark">로그인</h4>
<p class="text-muted">위시켓에 오신 것을 환영합니다.</p>
</div>
</div>
<div id="input" class="card card-body bg-white col-7 border mt-3 row" style="height: 308px; margin:320px auto;" >
<div class="col-7 offset-1 mt-3 " style="display:inline-block;">
<div class="form-group row ">
<label for="userid" class="col-form-label col-4 text-right font-weight-bold "><span class="text-danger">*</span>아이디 또는 이메일</label>
<input type="text" id="userid" class="form-control col-6">
</div>
<div class="form-group row">
<label for="pwd" class="col-form-label col-4 text-right font-weight-bold"><span class="text-danger">*</span>비밀번호</label>
<input type="password" id="pwd" class="form-control col-6 " >
</div>
<div class="form-group row">
<div class="custom-control custom-checkbox offset-4 col-6">
<input type="checkbox" id="keep" class="custom-control-input">
<label for="keep" class="text-muted custom-control-label text-dark">로그인상태 유지</label>
</div>
</div>
<div class="form-group row">
<button type="button" id="loginbtn2" class="btn btn-info offset-4 col-6">로그인</button>
<small class="text-muted offset-3 col-7 mt-2 pl-5">비밀번호를 잊으셨나요? <a href="#" class="font-weight-bold text-info">비밀번호 찾기</a></small>
</div>
</div>
<div class="col-4 border-left mt-3" style="display:inline-block; padding-bottom:58px">
<p class="font-weight-bold">이미 페이스북으로 가입하셨다면</p>
<button type="button" class="btn" style="margin-left:-10px"><img src="../../../resources/img/login_facebook.png"></button>
<hr style="border-style: dashed; width: 280px; margin-left: -5px">
<p>아직 회원이 아니신가요? <a href="#" class="font-weight-bold text-info">회원가입하기</a></p>
</div>
</div>
</div><!-- 메인 -->
<footer class="row bg-light h-auto">
<div class="col-7" style="margin:0 auto;">
<hr>
<div id="footermenu" style="height: 180px" class="row mt-5">
<div style="display:inline-block;"class="col-2">
<p class="font-weight-bold">위시켓</p>
<a href="#" class="small text-muted">위시켓 소개</a><br>
<a href="#" class="small text-muted">신뢰와 안전</a><br>
<a href="#" class="small text-muted">이용약관</a><br>
<a href="#" class="small text-muted">개인정보 처리방침</a><br>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">고객센터 ></a></p>
<a href="#" class="small text-muted">클라이언트 고객센터</a><br>
<a href="#" class="small text-muted">파트너스 고객센터</a><br>
<a href="#" class="small text-muted">이용요금</a><br>
<a href="#" class="small text-muted">클라이언트 이용방법</a><br>
<a href="#" class="small text-muted">파트너스 이용방법</a><br>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">뉴스센터 ></a></p>
<a href="#" class="small text-muted">공지사항</a><br>
<a href="#" class="small text-muted">위시켓 소식</a><br>
<a href="#" class="small text-muted">위시켓 이용 팁</a><br>
<a href="#" class="small text-muted">프로젝트 성공사례</a><br>
<a href="#" class="small text-muted">언론 보도</a>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">이용후기 ></a></p>
<p><a href="#" class="text-dark font-weight-bold">위시켓 스토어 ></a></p>
<p><a href="#" class="text-dark font-weight-bold">요즘 IT ></a></p><br>
</div>
<div style="display:inline-block;"class="offset-1 col-3 ">
<p class="font-weight-bold">CONTACT US</p>
<a href="#" class="small text-muted">02-6925-4849(10:00-18:00, 공휴일 제외)</a><br>
<a href="#" class="small text-muted">help@wishket.com</a><br>
</div>
</div><!-- 푸터메뉴 -->
<hr>
<div class="row" style="height: 200px">
<div class="col-2 ">
<img src="../../../resources/img/wishket_footer_logo.png">
</div>
<div class="col-8">
<p class="small text-muted">주식회사 위시켓 (대표이사: 박우범) / 서울특별시 강남구 테헤란로 211 한국고등교육재단빌딩 3층 (주)위시켓<br>
사업자등록번호: 209-81-57303 / 통신판매업신고: 제2018-서울강남-02337 호 / 직업정보제공사업 신고번호: J1200020180019</p>
<p class="small text-muted">
© 2013 Wishket Corp.
</p>
</div>
<div class="col-2">
<a href="#"><img src="../../../resources/img/footer_sns_facebook.png"></a>
<a href="#"><img src="../../resources/img//footer_sns_blog.png"></a>
<a href="#"><img src="../../../resources/img/footer_sns_naver.png"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="../../../resources/js/bootstrap.bundle.min.js"></script>
</body>
</html>
// 회원가입 화면
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../../../resources/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<title>회원가입</title>
<style>
.bidragup {position:relative; top:-1px}
</style>
</head>
<body>
<div class="container-fluid">
<!-- 헤더+네비 -->
<header class="row">
<nav class="nav navbar-expand navbar-dark bg-dark col-12" >
<ul class="nav navbar-nav nav-fill w-100 col-7 " style="margin:15px auto;">
<li class="nav-item small font-weight-bold"><a class="nav-link navbar-brand text-white" href="#">WishKet</a></li>
<li class="nav-item small font-weight-bold align-self-center"><a class="nav-link text-white" href="#">프로젝트 등록</a></li>
<li class="nav-item small font-weight-bold align-self-center"><a class="nav-link text-white "href="#">프로젝트 찾기</a></li>
<li class="nav-item small font-weight-bold align-self-center"><a class="nav-link text-white" href="#">파트너스 찾기</a></li>
<li class="nav-item small font-weight-bold align-self-center"><a class="nav-link text-white" href="#">이용방법</a></li>
<li class="nav-item small font-weight-bold align-self-center"><a class="nav-link text-white" href="#">이용후기</a></li>
<span class="mt-2 text-white text-muted">|</span>
<li class="nav-item small font-weight-bold align-self-center"><a class="nav-link text-white" href="#">스토어</a></li>
<li class="nav-item align-self-center" style="padding-left: 200px">
<button type="button" class="btn btn-sm btn-light " id="loginbtn1">로그인</button>  
<button type="button" class="btn btn-sm btn-info " id="joinbtn">회원가입</button></li>
</ul>
</nav>
</header><!-- 헤더+네비 -->
<!-- 메인 -->
<div id="main" class="row bg-light" style="height: auto">
<div id="intro" class="border col-7 mt-4 bg-white" style="height: 116px; margin:0 auto;">
<div style="margin:25px 20px">
<h4 class="font-weight-bold text-dark">회원가입</h4>
<p class="text-muted">위시켓에 오신 것을 환영합니다.</p>
</div>
</div>
<div id="input" class="card card-body bg-white col-7 mt-3 row" style="height:780px; margin:50px auto;" >
<div class="col-7 offset-1 mt-3 " style="display:inline-block;">
<div class="form-group row">
<label class="col-form-label col-2 text-right font-weight-bold"><span class="text-danger">*</span>이용목적</label>
<img src="../../../resources/img/signup_1.png" id="client">
<img src="../../../resources/img/signup_3.png" id="parteners" class="ml-3">
<small class="text-muted offset-2 mt-2">선택한 이용목적에 따라 서비스 이용에 차이가 발생합니다</small>
</div>
<div class="form-group row ">
<label for="email" class="col-form-label col-2 text-right font-weight-bold "><span class="text-danger">*</span>이메일</label>
<input type="text" id="email" class="form-control col-8">
<small class="text-muted offset-2 mt-2">비즈니스용 이메일 사용을 권장합니다 <i class="bi bi-question-circle bidragup"></i></small>
</div>
<div class="form-group row ">
<label for="email" class="col-form-label col-2 text-right font-weight-bold "><span class="text-danger">*</span>아이디</label>
<input type="text" id="userid" class="form-control col-8">
</div>
<div class="form-group row">
<label for="pwd" class="col-form-label col-2 text-right font-weight-bold"><span class="text-danger">*</span>비밀번호</label>
<input type="password" id="pwd" class="form-control col-8" >
<small class="text-muted offset-2 mt-2">비밀번호는 8자 이상 32자 이하로 입력해 주세요.<i class="bi bi-question-circle bidragup"></i></small>
</div>
<div class="form-group row ">
<label for="checkpwd" class="col-form-label col-2 font-weight-bold" style="width: 200px"><span class="text-danger">*</span>비밀번호</label>
<input type="password" id="checkpwd" class="form-control col-8">
<small class="text-muted offset-2 mt-2">동일한 비밀번호를 입력해 주세요.<i class="bi bi-question-circle bidragup"></i></small>
</div>
<div class="form-group row">
<div class="custom-control custom-checkbox offset-2 col-8">
<input type="checkbox" id="keep" class="custom-control-input">
<label for="keep" class="text-muted custom-control-label text-dark"><a href="#" class="text-info">이용약관</a> 및 <a href="#" class="text-info">개인정보 처리방침</a>에 동의합니다.</label>
</div>
</div>
<div class="form-group row">
<button type="button" id="signbtn1" class="btn btn-info offset-2 col-8">회원가입</button>
</div>
</div>
<div class=" col-5 border-left mt-3 " style="display:inline-block; padding-bottom:58px">
<p class="font-weight-bold ml-4">페이스북 계정이 있으신가요?</p>
<button type="button" class="btn ml-3" style="margin-left:-10px"><img src="../../../resources/img/login_facebook.png"></button>
<hr style="position: relative; left:-48px; width: 350px">
<p class="font-weight-bold ml-3 pt-1 pb-1">이미 회원이신가요 ?</p>
<div class="button btn border-info text-info col-sm-8 ml-3" id="loginbtn2">로그인</div>
<hr style="position: relative; left:-48px; width: 350px">
<p class="small ml-3 pt-3"><span class="font-weight-bold ">71,321</span>개의 클라이언트 기업과<br>
<span class="font-weight-bold ">86,354</span>개의 개발회사 & 프리랜서가<br>
<span class="font-weight-bold ">함께하는 온라인 아웃소싱 플랫폼 위시켓</span></p>
<img src="../../../resources/img/introduction-img.png" class="w-50 ml-3">
</div>
</div>
<div style="margin-bottom:350px"></div>
</div><!-- 메인 -->
<footer class="bg-light row" >
<div class=" col-7 bg-light" style="margin:0px auto;">
<hr>
<div id="footermenu" style="height: 180px" class="row mt-5">
<div style="display:inline-block;"class="col-2">
<p class="font-weight-bold">위시켓</p>
<a href="#" class="small text-muted">위시켓 소개</a><br>
<a href="#" class="small text-muted">신뢰와 안전</a><br>
<a href="#" class="small text-muted">이용약관</a><br>
<a href="#" class="small text-muted">개인정보 처리방침</a><br>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">고객센터 ></a></p>
<a href="#" class="small text-muted">클라이언트 고객센터</a><br>
<a href="#" class="small text-muted">파트너스 고객센터</a><br>
<a href="#" class="small text-muted">이용요금</a><br>
<a href="#" class="small text-muted">클라이언트 이용방법</a><br>
<a href="#" class="small text-muted">파트너스 이용방법</a><br>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">뉴스센터 ></a></p>
<a href="#" class="small text-muted">공지사항</a><br>
<a href="#" class="small text-muted">위시켓 소식</a><br>
<a href="#" class="small text-muted">위시켓 이용 팁</a><br>
<a href="#" class="small text-muted">프로젝트 성공사례</a><br>
<a href="#" class="small text-muted">언론 보도</a>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">이용후기 ></a></p>
<p><a href="#" class="text-dark font-weight-bold">위시켓 스토어 ></a></p>
<p><a href="#" class="text-dark font-weight-bold">요즘 IT ></a></p><br>
</div>
<div style="display:inline-block;"class="offset-1 col-3 ">
<p class="font-weight-bold">CONTACT US</p>
<a href="#" class="small text-muted">02-6925-4849(10:00-18:00, 공휴일 제외)</a><br>
<a href="#" class="small text-muted">help@wishket.com</a><br>
</div>
</div><!-- 푸터메뉴 -->
<hr>
<div class="row pt-2" style="height: 100px">
<div class="col-2 ">
<img src="../../../resources/img/wishket_footer_logo.png">
</div>
<div class="col-8">
<p class="small text-muted">주식회사 위시켓 (대표이사: 박우범) / 서울특별시 강남구 테헤란로 211 한국고등교육재단빌딩 3층 (주)위시켓<br>
사업자등록번호: 209-81-57303 / 통신판매업신고: 제2018-서울강남-02337 호 / 직업정보제공사업 신고번호: J1200020180019</p>
<p class="small text-muted">
© 2013 Wishket Corp.
</p>
</div>
<div class="col-2">
<a href="#"><img src="../../../resources/img/footer_sns_facebook.png"></a>
<a href="#"><img src="../../resources/img//footer_sns_blog.png"></a>
<a href="#"><img src="../../../resources/img/footer_sns_naver.png"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="../../../resources/js/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>
// 회원가입 완료 화면
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="../../../resources/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">
<title>로그인</title>
</head>
<body>
<div class="container-fluid">
<!-- 헤더+네비 -->
<header class="row">
<nav class="nav navbar-expand navbar-dark bg-dark col-12" >
<ul class="nav navbar-nav nav-fill w-50 align-self-center col-7 " style="margin:15px auto;">
<li class="nav-item"><a class="nav-link navbar-brand text-white" href="#">WishKet</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">프로젝트 등록</a></li>
<li class="nav-item"><a class="nav-link text-white "href="#">프로젝트 찾기</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">파트너스 찾기</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">이용방법</a></li>
<li class="nav-item"><a class="nav-link text-white" href="#">이용후기</a></li>
<span class="mt-2 text-white text-muted">|</span>
<li class="nav-item "><a class="nav-link text-white" href="#">스토어</a></li>
<li class="nav-item"><button type="button" class="btn btn-light" id="loginbtn1">로그인</button>  
<button type="button" class="btn btn-info" id="joinbtn">회원가입</button></li>
</ul>
</nav>
</header><!-- 헤더+네비 -->
<!-- 메인 -->
<div id="main" class="row bg-light" style="height: 680px">
<div id="intro" class="border col-7 mt-4 bg-white" style="height: 116px; margin:0 auto;">
<div style="margin:25px 20px">
<h4 class="font-weight-bold text-dark">회원가입 요청 완료</h4>
<p class="text-muted">위시켓 이용을 위해서는 인증 메일 확인이 필요합니다.</p>
</div>
</div>
<div id="signok" class="card card-body bg-white col-7 mt-3" style="height: 400px; margin:320px auto;" >
<div class="form-group row mt-4">
<div class="offset-1 col-7 ">
<p >${userid}님 <br>
가입하신 이메일 주소 <br>
<span style="font-weight: bold">${email}</span>로 인증메일 보내드렸습니다.<br>
이메일 인증 한 후에 정상적인 서비스 이용이 가능합니다.<br><br>
혹시 인증메일을 못받으셨나요 ?
</p>
<button class="btn btn-info">인증메일 다시 받기</button>
</div>
<div class="col-4">
<img src="/img/use-icon-contrat-c-3.png">
</div>
</div>
<div class="form-group row ">
<div class="offset-1 col-10 offset-1">
<hr>
<p>
1. 7일 이내에 이메일의 인증 링크를 클릭해 주시면 가입이 승인됩니다.<br>
2. 인증 메일이 스팸함으로 가는 경우도 있으니 확인해 주세요.
</p>
</div>
</div>
</div>
</div><!-- 메인 -->
<footer class="row bg-light h-auto">
<div class="col-7" style="margin:0 auto;">
<hr>
<div id="footermenu" style="height: 180px" class="row mt-5">
<div style="display:inline-block;"class="col-2">
<p class="font-weight-bold">위시켓</p>
<a href="#" class="small text-muted">위시켓 소개</a><br>
<a href="#" class="small text-muted">신뢰와 안전</a><br>
<a href="#" class="small text-muted">이용약관</a><br>
<a href="#" class="small text-muted">개인정보 처리방침</a><br>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">고객센터 ></a></p>
<a href="#" class="small text-muted">클라이언트 고객센터</a><br>
<a href="#" class="small text-muted">파트너스 고객센터</a><br>
<a href="#" class="small text-muted">이용요금</a><br>
<a href="#" class="small text-muted">클라이언트 이용방법</a><br>
<a href="#" class="small text-muted">파트너스 이용방법</a><br>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">뉴스센터 ></a></p>
<a href="#" class="small text-muted">공지사항</a><br>
<a href="#" class="small text-muted">위시켓 소식</a><br>
<a href="#" class="small text-muted">위시켓 이용 팁</a><br>
<a href="#" class="small text-muted">프로젝트 성공사례</a><br>
<a href="#" class="small text-muted">언론 보도</a>
</div>
<div style="display:inline-block;" class="col-2">
<p><a href="#" class="text-dark font-weight-bold">이용후기 ></a></p>
<p><a href="#" class="text-dark font-weight-bold">위시켓 스토어 ></a></p>
<p><a href="#" class="text-dark font-weight-bold">요즘 IT ></a></p><br>
</div>
<div style="display:inline-block;"class="offset-1 col-3 ">
<p class="font-weight-bold">CONTACT US</p>
<a href="#" class="small text-muted">02-6925-4849(10:00-18:00, 공휴일 제외)</a><br>
<a href="#" class="small text-muted">help@wishket.com</a><br>
</div>
</div><!-- 푸터메뉴 -->
<hr>
<div class="row" style="height: 200px">
<div class="col-2 ">
<img src="../../../resources/img/wishket_footer_logo.png">
</div>
<div class="col-8">
<p class="small text-muted">주식회사 위시켓 (대표이사: 박우범) / 서울특별시 강남구 테헤란로 211 한국고등교육재단빌딩 3층 (주)위시켓<br>
사업자등록번호: 209-81-57303 / 통신판매업신고: 제2018-서울강남-02337 호 / 직업정보제공사업 신고번호: J1200020180019</p>
<p class="small text-muted">
© 2013 Wishket Corp.
</p>
</div>
<div class="col-2">
<a href="#"><img src="../../../resources/img/footer_sns_facebook.png"></a>
<a href="#"><img src="../../resources/img//footer_sns_blog.png"></a>
<a href="#"><img src="../../../resources/img/footer_sns_naver.png"></a>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="../../../resources/js/bootstrap.bundle.min.js"></script>
</body>
</html>
웹페이지 골격은 그냥 원본 웹페이지를 계속 뚫어져라 처다보고 코드를 써내려가고 수정하고 다시 써내려가고 하면
얼추 비슷하게 만들어지는거 같아서 큰 어려움을 느끼진 못했는데 창의 화면을 줄이거나 하면 웹페이지의 틀이 찌그러지던데 이부분은 추가적으로 알아보고 수정해야 할 부분같다.
반응형
'JAVA & APP :국비지원 학원 복습 > 팀프로젝트' 카테고리의 다른 글
| WishKet 프로젝트 02 회원가입 - 회원가입완료(기능구현) (0) | 2021.02.25 |
|---|---|
| 위시캣 프로젝트 (0) | 2021.02.22 |