본격적으로 항해를 시작하기 전 사전스터디 기간을 한달 정도를 했다. 사전스터디에서 각자 하나씩 미니 프로젝트를 하기로했다.
미니프로젝트로 여행 사진, 코멘트를 간단하게 저장하는 웹을 만들어 봤다.
- 처음 만들어보는 페이지라 부족한 부분도 많고 미완성된 부분도 많다. 첨부파일에 첨삭한 파일을 서버로 보내는 부분을 완성하지 못했다. 이번 미니 프로젝트를 하면서 많이 미흡하지만 다른 분이 만드신 코드를 뜯어보고 붙여보고 하면서 로그인 페이지 script를 완성하고 싶었는데 아직 힘든 부분이 많았다.
홈
<title>미니프로젝트</title>
</head>
<style>
title{
background-color: midnightblue;
width: 700px;
height: 800px;
margin: 100px auto 0px auto;
border-radius: 100px;
box-shadow: 0px 0px 10px 0px cornflowerblue;
}
li{
list-style: none;
}
text {
width: 500px;
height: 150px;
margin: auto;
color: white;
}
h1{
padding-top: 30px;
text-align: center;
font-size: 45px;
}
img{
background-position: center;
background-size: cover;
margin: 20px 0px 0px 50px;
width: 600px;
height: 400px;
border-radius: 100px;
cursor:pointer;
}
img:hover{
outline: 2px solid black;
outline-offset:-3px ;
}
.search>form>input{
border: 1px solid black;
width: 270px;
height: 40px;
background: white;
color: black;
border-radius: 100px;
}
.search>form>span{
width: 50px;
color:white;
cursor:pointer;
}
</style>
<script>
</script>
<body>
<div class="title">
<div class="text">
<h1>memory</h1>
</div>
<div class="img">
<a href="loginpage.html"><img src="trip.webp" alt="그림" ></a>
</div>
</div>
</body>
</html>로그인 페이지
<title>loginpage</title>
<link rel="stylesheet" href="style.css">
<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<section class="login-form">
<h1>memory</h1>
<form action="index.html">
<div class="int-area">
<input type="email" name="id" id="id"
autocomplete="=off" required>
<label for="id">아이디</label>
</div>
<div class="int-area">
<input type="password" name="pw" id="pw"
autocomplete="=off" required>
<label for="pw">비밀번호</label>
</div>
<div class="btn-area">
<button type="submit">로그인</button>
</div>
</form>
<div class="caption">
<a href="find_id.html">아이디찾기</a>
<a href="find_password.html">비밀번호 찾기</a>
</div>
</section>
</body>
</html>로그인 script
@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@300&family=Noto+Serif+KR:wght@200&display=swap');
*{margin:0; padding: 0; box-sizing: border-box; font-family: 'Nanum Gothic', sans-serif;}
body{
font-family: 'Noto Serif KR', serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100vh;
}
body::before{
content: "";
position: absolute; z-index: 1;
top: 0; right: 0; bottom: 0;left: 0;
background: midnightblue;
width: 700px;
height: 800px;
margin: 100px auto 0px auto;
border-radius: 100px;
box-shadow: 0px 0px 10px 0px cornflowerblue;
}
.login-form{position: relative; z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: -300px;
}
.login-form h1{
font-size:45px; color: white;
text-align:center ;
margin-bottom: 60px;
}
.int-area:first-child{margin-top: 0;}
.int-area{
width: 400px;position: relative;
margin-top: 20px;
}
.int-area input{
width: 100%;
padding: 20px 10px 10px;
background-color: transparent;
border: none;
border-bottom: 1px solid deepskyblue;
font-size: 18px; color: white;
outline: none;
}
.int-area label{
position: absolute;left: 10px;
font-size: 16px; color:white;
}
.int-area input:focus+label,
.int-area input:valid+label{
top:-2px;
font-size: 15px; color: deepskyblue;
}
.btn-area{margin-top: 30px;}
.btn-area button{
width: 100%;
height: 50px;
background: cornflowerblue;
color: white;
font-size: 20px;
border: none;
border-radius: 25px;
cursor: pointer;
}
.caption{
margin-top: 20px;
text-align: center;
}
.caption a{
font-size: 15px; color: white;
text-decoration: none;
}사진, 코멘트 입력
<title>season</title>
</head>
<style>
big{
background-color: midnightblue;
font-size: 45px;
color: white;
text-align: center;
width: 700px;
height: 800px;
margin: 100px auto 0px auto;
border-radius: 100px;
}
h3{
padding-top: 30px;
}
option{
font-size: 18px;
display: flex;
flex-direction: row;
justify-content: center;
}
input{
font-size: 18px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.txt{
background-color: midnightblue;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
picture{
font-size: 18px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 450px;
height: 250px;
border-radius: 100px;
}
input{
color: black;
margin: auto;
border-radius: 100px;
width: 400px;
height: 30px;
}
.comment{
border-radius: 10px;
margin: auto;
width: 400px;
height: 200px;
}
label{
width: 550px;
height: 70px;
display: flex;
flex-direction: row;
justify-content: center;
font-size: 18px;
}
.txt{
border-radius: 100px;
}
html {
height: 100%;
}
body {
font-family: sans-serif;
height: 100%;
margin: 0;
}
.container {
display: flex;
height: 100%;
flex-direction: column;
}
.image-upload {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.button label{
margin-top: 190px;
margin-left: 50px;
}
label {
cursor: pointer;
font-size: 13px;
}
.fileContainer {
display: flex;
justify-content: center;
align-items: center;
}
.buttonContainer {
width: 15%;
display: flex;
justify-content: center;
align-items: center;
margin-left: 270px;
margin-top: -35px;
background-color: black;
color: white;
border-radius: 30px;
padding: 10px;
font-size: 13px;
cursor: pointer;
}
.image-show {
z-index: -1;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
}
img {
position: absolute;
}
.button input{
margin-bottom: 0px;
}
.submitButton{
}
.file{
margin-top: 200px;
}
.select{
display: inline;
border-radius:100px;
width: 400px;
height:30px;
font-size:18px;
}
</style>
<script>
function save_comment() {
let title = $('#title').val()
let date = $('#date').val()
let comment = $('#comment').val()
$.ajax({
type: 'POST',
url: '/trip',
data: {head_give: head, title_give: title, date_give: date, comment_give: comment},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
}$(document).ready(function(){
listing();
});
function listing() {
$('#cards-box').empty()
$.ajax({
type: "GET",
url: '/trip',
data: {},
success: function (response) {
let rows = response['seasons']
for (let i = 0; i < rows.length; i++) {
let img = rows[i]['img']
let head = rows[i]['head']
let title = rows[i]['title']
let date = rows[i]['date']
let comment = rows[i]['comment']
let temp_html = `<div class="col">
<div class="card">
<img src="${img}" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${head}</h5>
<p class="card-text">${title}</p>
<p class="card-text">${date}</p>
<p class="card-text">${comment}</p>
</div>
</div>
</div>`
$('#cards-box').append(temp_html)
}
}
})
}
</script>
<body>
<div class="big">
<h3 class="select">memory</h3>
<div class="list_option" style="text-align: center;">
<form method="post" style="display: inline;">
<select class="select" id="head">
<option value="계절">선택</option>
<option value="봄">봄</option>
<option value="여름">여름</option>
<option value="가을">가을</option>
<option value="겨울">겨울</option>
</select>
</form>
</div>
<div class="data">
<div class="txt" id="txt">
<form action="">
<label for="title"><input placeholder="제목" type="text" name="title" id="title">
</label>
<label for="title"><input placeholder="날짜" type="text" name="date" id="date">
</label>
<label for="title"><input placeholder="코멘트" class="comment" type="text" name="comment" id="comment">
</label>
</form>
</div>
<div class="container">
<div class="image-upload" id="image-upload">
<form method="post" enctype="multipart/form-data">
<input class="file" type="file" id="chooseFile" name="chooseFile" accept="image/*"
onchange="loadFile(this)">
</form>
<div class="fileContainer">
<div class="fileInput">
</div>
<div class="buttonContainer">
<div onclick="save_comment()" class="submitButton" id="submitButton">저장</div>
</div>
</div>
</div>
<div class="image-show" id="image-show">img</div>
</div>
<script class="image" src="img.js"></script>
</div>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">
<div class="col">
<div class="card">
<img src="picture" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">계절</h5>
<p class="card-text">제목</p>
<p class="card-text">날짜</p>
<p class="card-text">코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="picture" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">계절</h5>
<p class="card-text">제목</p>
<p class="card-text">날짜</p>
<p class="card-text">코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="picture" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">계절</h5>
<p class="card-text">제목</p>
<p class="card-text">날짜</p>
<p class="card-text">코멘트</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="picture" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">계절</h5>
<p class="card-text">제목</p>
<p class="card-text">날짜</p>
<p class="card-text">코멘트</p>
</div>
</div>
</div>
</div>
</body>
</html>아이디, 비밀번호 찾기
<title>find</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
</head>
<style>
*{font-family: 'Noto Sans KR', sans-serif;}
body{
font-family: 'Noto Serif KR', serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::before{
content: "";
position: absolute; z-index: 2;
top: 0; right: 0; bottom: 0;left: 0;
width: 700px;
height: 800px;
margin: 100px auto 0px auto;
border-radius: 100px;
background: midnightblue;
}
.id{
position: relative; z-index: 2;
}
.id h2{
width: 100%;
padding: 20px 10px 10px;
border: none;
border-bottom: 1px solid deepskyblue;
font-size: 18px;
color: white;
outline: none;
}
.id input{
background-color: white;
width: 100%;
padding: 20px 10px 10px;
font-size: 18px;
color: white;
border: none;
outline: none;
}
.id input:hover{
outline: 2px solid deepskyblue;
}
.id h5,
.id h6{
color: white;
}
.input-area{
width: 300px;
padding: 20px;
color: white;
}
.input-area button{
background: white;
margin-top: 5px ;
width: 100px;
height: 40px;
color: midnightblue;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 13px;
}
.input-area input{
border-radius: 20px;
padding: 10px;
margin-top: 30px;
color: black;
}
.btn-area{
margin-left: 20px;
margin-top: 50px;
margin-right: 100px;
}
.btn-area button{
width: 100px;
height: 40px;
background: white;
color: midnightblue;
font-size: 20px;
border: none;
border-radius: 25px;
cursor: pointer;
margin: auto;
}
</style>
$("#name").focusout(function(){
if($('#name').val() == ""){
$('#check').text('이름을 입력해주세요.');
$('#check').css('color', 'red');
}else{
$('#check').hide();
}
});
$("#email").focusout(function(){
if($('#num').val() == ""){
$('#check').text('이메일을 입력해주세요');
$('#check').css('color', 'red');
}else{
$('#check').hide();
}
});
</script>
<body>
<section class="id">
<h2>아이디 찾기</h2>
<form action="loginpage.html">
<p>
<h5>회원정보에 등록된 휴대전화로 인증</h5>
<h6>회원정보에 등록된 휴대전화 번호와 입력한 휴대전화 번호가 같아야, 인증번호를 받을 수 있습니다.</h6>
</p>
<div class="input-area">
<label for="name">이름</label>
<input type="text" name="name" id="name" required>
</div>
<div class="input-area">
<label for="num">휴대전화</label>
<input placeholder="휴대전화번호" type="text" name="num" id="num" required>
<div>
<button style="float: right; margin-left: 500px;" >인증번호 받기</button>
</div>
<input placeholder="인증번호 6자리 숫자 입력" type="text" name="certifi" id="certifi" required>
</div>
</div>
<div class="btn-area">
<button type="submit">다음</button>
</div>
</form>
</section>
</body>
</html> <title>passwoar</title>
</head>
<style>
*{font-family: 'Noto Sans KR', sans-serif;}
body{
font-family: 'Noto Serif KR', serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
body::before{
content: "";
position: absolute; z-index: 2;
top: 0; right: 0; bottom: 0;left: 0;
width: 700px;
height: 800px;
margin: 100px auto 0px auto;
border-radius: 100px;
background: midnightblue;
}
.password{
position: relative; z-index: 2;
}
.password h2{
width: 80%;
padding: 20px 10px 10px;
margin: auto;
border: none;
border-bottom: 1px solid deepskyblue;
font-size: 18px;
color: white;
outline: none;
}
.password input{
background-color: white;
width: 100%;
padding: 20px 10px 10px;
font-size: 18px;
color: white;
border: none;
outline: none;
border: none;
}
.password input:hover{
outline: 2px solid deepskyblue;
}
.password h5{
width: 80%;
padding: 20px 10px 10px;
margin: auto;
color: white;
}
.input-area{
width: 300px;
padding: 130px;
color: white;
}
.input-area input{
background: white;
margin-top: 5px ;
width: 300px;
height: 50px;
color: midnightblue;
border: none;
border-radius: 25px;
font-size: 18px;
}
.btn-area{
margin-left: 20px;
margin-top: 50px;
margin-right: 100px;
}
.btn-area button{
width: 100px;
height: 50px;
background: white;
color: midnightblue;
font-size: 16px;
border: none;
border-radius: 25px;
cursor: pointer;
margin-left: 120px;
}
</style>
<body>
<section class="password">
<form action="loginpage.html">
<h2>비밀번호 찾기</h2>
<p>
<h5>비밀번호를 찾고자 하는 아이디를 입력해 주세요.</h5>
</p>
<div class="input-area">
<input placeholder="아이디를 입력하여주세요" type="text" name="id" id="id" required>
</div>
<div class="btn-area">
<button type="submit">다음</button>
</div>
</form>
</section>
</body>
</html>계산기
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.calculator{
border-radius: 30px;
width: 287px;
border: 1px solid yellow;
background-color: gray;
padding: 5px;
margin-right: 100px;
}
.calculator form{
display: grid;
grid-template-columns: repeat(4,65px);
grid-auto-rows: 65px;
grid-gap: 5px;
}
.calculator form input{
border: 2px solid yellow;
font-size: 20px;
}
.calculator form input:hover{
box-shadow: 1px 1px 2px yellow;
}
.clear{
background-color: orange;
grid-column: span 3;
}
.operator{
background-color: yellow;
}
.dot{
background-color: limegreen;
}
.calculator form input[type='text']{
grid-column: span 4;
text-align: right;
padding: 0 10px;
}
.result{
grid-column: span 2;
}
.money {
background-color: midnightblue;
width: 700px;
height: 800px;
margin: 100px;
border-radius: 100px;
box-shadow: 0px 0px 10px 0px cornflowerblue;
}
h1{
color: white;
font-size: 45px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: 70px;
}
.price{
padding: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
p{
margin-top: 40px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 500px;
color: white;
}
input{
border-radius: 100px;
}
.i{
margin-left: 20px;
}
.submitButton{
cursor: pointer;
background: white;
color: black;
border-radius: 30px;
width: 50px;
text-align: center;
margin-left: 180px;
margin-top: 20px;
}
body{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.calculator{
border-radius: 30px;
width: 287px;
border: 1px solid yellow;
background-color: gray;
padding: 5px;
margin-right: 100px;
}
.calculator form{
display: grid;
grid-template-columns: repeat(4,65px);
grid-auto-rows: 65px;
grid-gap: 5px;
}
.calculator form input{
border: 2px solid yellow;
font-size: 20px;
}
.calculator form input:hover{
box-shadow: 1px 1px 2px yellow;
}
.clear{
background-color: orange;
grid-column: span 3;
}
.operator{
background-color: yellow;
}
.dot{
background-color: limegreen;
}
.calculator form input[type='text']{
grid-column: span 4;
text-align: right;
padding: 0 10px;
}
.result{
grid-column: span 2;
}
</style>
<script>
function save_comment() {
let date = $('#date').val()
let food = $('#food').val()
let trans = $('#trans').val()
let home = $('#home').val()
$.ajax({
type: 'POST',
url: '/cal',
data: {date_give: date, food_give: food, trans_give: trans, home_give: home},
success: function (response) {
alert(response['msg'])
window.location.reload()
}
});
}
$(document).ready(function(){
listing();
});
function listing() {
$('#list').empty()
$.ajax({
type: "GET",
url: '/cal',
data: {},
success: function (response) {
let rows = response['cals']
for (let i = 0; i < rows.length; i++) {
let date = rows[i]['date']
let food = rows[i]['food']
let trans = rows[i]['trans']
let home = rows[i]['home']
let temp_html = `<ul class="list-group">
<li class="list-group-item" <p>날짜</p>>${date}</li>
<li class="list-group-item" <p>식비</p>>${food}</li>
<li class="list-group-item" <p>교통비</p>>${trans}</li>
<li class="list-group-item" <p>숙박비</p>>${home}</li>
</ul>`
$('#list').append(temp_html)
}
}
})
}
</script>
<body>
<div class="money">
<h1>memory</h1>
<div class="price">
<div class="date">
<p>날짜 : <input class="i" id="date" type="text" placeholder="날짜를 입력해주세요."></p>
</div>
<div class="food">
<p>식비 : <input class="i" id="food" type="text" placeholder="가격"></p>
</div>
<div class="trans">
<p>교통비 : <input id="trans" type="text" placeholder="가격"></p>
</div>
<div class="home">
<p>숙박비 : <input id="home" type="text" placeholder="가격"></p>
</div>
<div onclick="save_comment()" class="submitButton" id="submitButton">저장
</div>
</form>
</div>
<div class="calculator">
<form name="forms">
<input type="text" name="output" readonly>
<input class="clear" type="button" value="C" onclick="document.forms.output.value=''">
<input class="operator" type="button" value="/" onclick="document.forms.output.value+='/'">
<input type="button" value="1" onclick="document.forms.output.value+='1'">
<input type="button" value="2" onclick="document.forms.output.value+='2'">
<input type="button" value="3" onclick="document.forms.output.value+='3'">
<input class="operator" type="button" value="*" onclick="document.forms.output.value+='*'">
<input type="button" value="4" onclick="document.forms.output.value+='4'">
<input type="button" value="5" onclick="document.forms.output.value+='5'">
<input type="button" value="6" onclick="document.forms.output.value+='6'">
<input class="operator" type="button" value="+" onclick="document.forms.output.value+='+'">
<input type="button" value="7" onclick="document.forms.output.value+='7'">
<input type="button" value="8" onclick="document.forms.output.value+='8'">
<input type="button" value="9" onclick="document.forms.output.value+='9'">
<input class="operator" type="button" value="-" onclick="document.forms.output.value+='-'">
<input class="dot" type="button" value="." onclick="document.forms.output.value+='.'">
<input type="button" value="0" onclick="document.forms.output.value+='0'">
<input class="operator result" type="button" value="=" onclick="document.forms.output.value=eval(document.forms.output.value)">
</form>
</div>
<div class="comment" id="comment">
<ul class="list-group" >
<li class="list-group-item"> Cras justo odio</li>
<li class="list-group-item" >Dapibus ac facilisis in</li>
<li class="list-group-item" >Morbi leo risus</li>
<li class="list-group-item" >Porta ac consectetur ac</li>
</ul>
<ul class="list-group" >
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
</ul>
<ul class="list-group" >
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
</ul>
</div>
</div>
</body>
</html>