오늘은 미니프로젝트 4일이 되는 날이다. 오늘은 기본적인 뼈대와 개인페이지에 CSS를 채우고 간단한 API를 적용시키는 것을 해봤다.
방명록처럼 이름과 코멘트를 달면 밑으로 댓글들이 달리는 기능과 댓글을 삭제 할 수 있는 버튼을 구현 시켜 보았다.
한번 공부했던 내용이여서 어느정도 할 수 있겠다 생각했는데 막상 실전에 다가가니 어디부터 뭘 해야할지 모르고 방황만 했다.
결국 전에 사용했던 방명록에서 코드를 가져와 안에 있는 코드들만 조금씩 수정했는데도 오류가떠 많은 어려움을 겪었다 ㅠㅠ
오랜시간 팀원들과 상의하에 결국 어느정도 성공을 했고 성취감은 엄청 컸다 !! 또 개인페이지를 만들면서 디자인에 많은 어려움을 겪고 있었지만 팀원중에 디자인 쪽으로 실력이 훌륭하신 분이 있어서 쉽게쉽게 이어 나갔다! 오늘도 엄청 힘든 하루였다 ㅠㅠ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>개인페이지</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="frame">
<h3 class="site-name">송1김4</h3>
<div class="dashboard">
<h1 class="Greetings">Hello I am <a class="name">TW</a> <br>
</h1>
<p class="in">안녕하세요 95년생 김태욱 입니다. 비전공자 코린이 입니다. 부족한 만큼 열심히 하겠습니다 </p>
</div>
<div class="main">
<div class="Information">
<img class="info-img" id="my-img" src="tw.jpeg">
<div class="Information-info">
<h3 class="Information-name" id="name1">MBTI-ESTJ</h3>
<p class="Information-comment" id="commnet1">경영자(ESTJ)는 전통과 질서를 중시하는 성격으로, 자신이 생각하는 옳고 그름과 사회적 기준에 따라 가족과 공동체가 화합할 수 있도록 노력합니다. 이들은 정직과 헌신과 존엄성을 중시하며, 어려운 길을 기꺼이 앞장서고 다른 사람들에게 명확한 조언과 지도를 제공합니다.
</p>
</div>
</div>
<div class="Information">
<div class=" Information-info">
<h3 class="Information-nam" id="name2-1">객관적으로 살펴본 내 장점</h3>
<p class="Information-comment" id="comment2">잘 웃고 긍정적며 매사에 긍정적이다!
<h3 class="Information-name" id="name2-2">협업을 하는 과정에서의 자신의 스타일</h3>
<p class="Information-comment" id="comment2">저는 의사소통을 통해 주제를 가지고 논의하고 부족한 부분을 채우면서 협동하는 스타일입니다!
</p>
</div>
</div>
</div>
</head>
<body>
<div class="mypost">
<form action="http://localhost:5000/login" method="post">
<div class="form-floating mb-3">
<input id="name" type="text" class="form-control" placeholder="닉네임을 입력해주세요" />
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea id="comment" class="form-control" placeholder="코멘트를 남겨주세요" style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
</form>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">
제출하기
</button>
</div>
</div>
</div>
</body>
</html>
<footer class="footer">
<h3 class="Another">
Another</h3>
<div class="links">
<a class="team-page" href="main.html">Team page</a>
</div>
</footer>