👈 A반 10조 다른멤버 보러가기
조용연
✏️ elicho-page 소스코드
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Jua&family=Roboto+Condensed:ital,wght@1,700&family=Roboto+Mono:ital,wght@1,100;1,200&display=swap"
rel="stylesheet">
<title>조용연 자기소개</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.myform {
width: auto;
height: 800px;
background-color: deepskyblue;
font-size: larger;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.myform > img {
margin-left: 100px;
width: 400px;
height: 400px;
border-radius: 300px;
border: 10px solid white;
color: white;
}
.myprofile > button {
width: 150px;
height: 40px;
border-radius: 10px;
border: 1px solid white;
color: white;
background-color: black;
}
.myprofile > button:hover {
border: 3px solid blue;
}
.guestbook {
width: 95%;
max-width: 400px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 20px 0px black;
padding: 10px;
background-color: white;
border-radius: 10px;
display: none;
}
.guestbook > button {
margin-top: 10px;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function () {
show_comment()
});
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
if (name == '' || comment == '') alert('닉네임과 내용을 모두 입력해주세요.')
else {
$.ajax({
type: 'POST',
url: '/cooseproject',
data: {name_give: name, comment_give: comment},
success: function (response) {
console.log(response)
window.location.reload()
}
})
}
}
function show_comment() {
$('#comment-list').empty()
$.ajax({
type: "GET",
url: "/cooseproject",
data: {},
success: function (response) {
let rows = response['comment']
for (let i = 0; i < rows.length; i++) {
let name = rows[i]['name']
let comment = rows[i]['comment']
let temp_html = `<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>${comment}</p>
<footer class="blockquote-footer">${name}</footer>
</blockquote>
</div>
</div>`
$('#comment-list').append(temp_html)
}
}
});
}
function postshow() {
$('#guestbook').show()
}
function posthide() {
$('#guestbook').hide()
}
</script>
</head>
<body style="background-color: deepskyblue">
<h3 onclick=location.href='/'>👈 A반 10조 다른멤버 보러가기</h3>
<div class="myform">
<img src="https://i.ibb.co/JHf63Z1/elicho.jpg" alt="elicho" border="0">
<div class="myprofile">
<h1><b>조용연</b></h1>
<hr><b>
<li>사는지역 : 인천 </li>
<li>나의 장점 : 웃음이 많고 편안한 분위기 😄 </li>
<li>mbti : INFP</li>
<li>협업시 스타일 : 맡은 역할은 끝까지 책임지고 완성하기!</li>
<li>취미 : 볼링, 등산, netflix</li>
<li><a href="https://elicho91.tistory.com/" target="_blank">블로그로 이동하기🤞</a></li>
<hr></b>
<button onclick="postshow()">방명록 열기 📘</button>
</div>
</div>
<div class="guestbook" id="guestbook">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url">
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="comment"
style="width: 100%"></textarea>
<label for="floatingTextarea2">내용</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">등록</button>
<button onclick="posthide()" type="button" class="btn btn-dark">닫기</button>
</div>
<div class="mycards" id="comment-list">
</div>
</body>
</html>
css 요소적인 부분이 큰 오류 없이 변경사항들을 즉각 확인할 수 있어서 재미있었다.
이전 학원 수업에서 짧지만 휘몰아치듯 css, html의 여러 문법들을 배웠었다.
당시 프로젝트 했을 때 프론트 부분에 욕심을 내던 팀원분이 있어서 크게 신경 쓰지 않아 많이 잊어버렸는데,
역시 직접 해보고 반 복이 가장 좋은 공부법인 걸 이번 프로젝트를 통해 다시 한번 느끼게 되었다.
우선 사전 캠프 수업 내용으로만 틀을 잡고,
이후에 이전 수업내용들을 찾아가며 기능적인 부분을 추가하고 싶었으나,
1차 작업물을 전달하기 직전에 컴퓨터가 맛이 가버려
다시 작업해야 하는 불상사가 일어나 버렸다 ㅠㅠ
아쉬운 대로 다시 작업하여 전달하였는데 다음 프로젝트에는 깃허브 사용을 생활화하여
이런 불상사가 일어나지 않도록 대비해야겠다.
현재 결과물은 철저히 사전 캠프 수업내용으로만 이루어진 거라 딱히 자랑할 만한 코드는 없고,
그냥 군더더기 없이 깔끔하게 표현한정도??ㅎㅎ
'❤️🔥TIL (Today I Learned)' 카테고리의 다른 글
| [TIL] 2022-11-07(6day) (0) | 2022.11.07 |
|---|---|
| [TIL] 2022-11-04(5day) (0) | 2022.11.04 |
| [TIL] 2022-11-03(4day) (0) | 2022.11.03 |
| [TIL] 2022-11-01(2day) (0) | 2022.11.01 |
| [TIL] 2022-10-31(1day) (0) | 2022.10.31 |
댓글