-
어제 하던 미니 프로잭트 메인화면을 현 진행상황에서 만들 수 있는데까지 만들었고
개일 자기소개서 페이지를 웹 개발 종합반 팬미팅을 참고하여 완성하였다
어제 그렇게 산전수전 격다보니 이젠 모르게 있으면 구글링하게 된다 훌륭한 스승이 생겼달까?
메인화면 코딩중에 부트스트랩 카드부분을 넣어 팀원을 소개하는 부분을 만드는중
<div></div> 안쪽에 <button></button> 을 추가해 클릭했을때 href로 링크대로 넘어가려 했으니
수업중 배운내용이 생각나 이거 맞나 반신반의 한 상태로 아래와 같이
<div class="col" type="button" onclick="details(${num})">설정 후 새로고침을 해봤다. 부트스태랩 카드자체가 버튼으로 인식되어 더 깔끔한 결과에 도달했고
위 코드에 href를 넣어 연결하려다 같은 문구를 반복해서 넣어야 할거 같아 또 혹시 하고
그 아래 function에 details를 눌렀을때 반응하게끔 넣어봤더니 이것도 맞았다
function details() { window.location.href='https://www.naver.com/' // if (details() == 1) { // window.location.href='https://www.naver.com/' // } // if (details() == 2) { // window.location.href='https://www.naver.com/' // } // if (details() == 3) { // window.location.href='https://www.naver.com/' // } // if (details() == 4) { // window.location.href='https://www.naver.com/' // } // if (details() == 5) { // window.location.href='https://www.naver.com/' // } }아직 num에 값을 넣어줄 수 없어서 if문은 맞는지 확인을 못했는데 추후 확인되면
관련글을 한번 더 작성하겠다. 메인은 할 수 있는데까지 완료했고 이제 개인 자기소개서를 만드는 찰나
img를 불러오는건데 시간이 많이 소비되었다
<img class="myimage" src="C:\Users\김민재\Desktop\Sparta\A_9team\kimminjae\static\ross.jpg" alt="본인 사진"/>이렇게 불러오려했는데 아직도 어디가 문제인지 모르겠지만 절대참조로는 이미지가 불러지질 않아
<img class="myimage" src="..\static\ross.jpg" alt="본인 사진">위와 같이 src 부분을 수정하였더니 뭘해도 안보이던 사진이 나타났다
코드 알못이 보기엔 같은 의미로 보이는데 왜 이건되고 저건 안되는지 모르겠다 일단 나왔으니 패스 ~
자기소개서안에 댓글을 달 수 있게 끔Script 부분에 ajax를 추가했고 comment 입,출력 문제없음을 확인
<!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 rel="stylesheet" href="../static/mini.css"> <meta property="og:title" content="임재범 팬명록" /> <meta property="og:description" content="응원 한마디 남기고 가세요" /> <meta property="og:image" content="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2022/09/04/1e65aed8-aa62-42b4-aa0d-7fb67482a85b.jpg" /> <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> <title>김민재 소개 페이지</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet"> <style> * { font-family: 'Noto Sans KR', sans-serif; } .my { width: 100%; height: 50px; text-align: center; background-color: blue; } .myimage { margin: 15px 15px 10px 20px; width: 500px; } .comment { padding: 15px; font-size: large; font-weight: bold; line-height: 40px; } .mypost { width: 500px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .mycards { width: 95%; max-width: 500px; } .mycards > .card { margin-top: 10px; margin-bottom: 10px; } .mypost > button { width: 140px; } </style> <script> $(document).ready(function () { set_temp() show_comment() }); function set_temp() { $.ajax({ type: "GET", url: "http://spartacodingclub.shop/sparta_api/weather/seoul", data: {}, success: function (response) { $('#temp').text(response['temp']) } }) } function save_comment() { let comment = $('#comment').val() $.ajax({ type: 'POST', url: '/homework', data: {'comment_give': comment}, success: function (response) { alert(response['msg']) window.location.reload() } }) } function show_comment() { $('#comment-list').empty() $.ajax({ type: "GET", url: "/homework", data: {}, success: function (response) { let rows = response['comments'] for (let i = 0; i < rows.length; i++) { let comment = rows[i]['comment'] let temp_html = `<div class="card-body"> <blockquote class="blockquote mb-0"> <footer class="blockquote-footer">${comment}</footer> </blockquote> </div>` $('#comment-list').append(temp_html) } } }); } </script> </head> <body> <h1 class="my"> 김민재 A반 9조</h1> <div style="float: left"> <img class="myimage" src="..\static\ross.jpg" alt="본인 사진"/> </div> <div style="float: left" class="comment"> <li> 팀 분우기가 조용해서 사일런스라고 팀명을 정했습니다</li> <li> 전 재미를 느끼면 파고들기 시작하지만 재미를 못느끼면 안하는 단점이 있습니다</li> <li> 제가 해야할 것을 최대한으로 끌어냅니다.</li> <li> 꾸준히 멈추지 않고 한발한발 나아가 궁극적으로 좋은곳에 취업하는게 목표입니다</li> <li> 자기가 맡은 일에 최선을 다하자</li> <li> 블로그 링크 : <a href="https://holloweyed-snail.tistory.com/">김민재</a> <a href="https://holloweyed-snail.tistory.com/">김명진</a> <a href="https://holloweyed-snail.tistory.com/">전대학</a> <a href="https://holloweyed-snail.tistory.com/">김솔찬</a> <a href="https://holloweyed-snail.tistory.com/">김민재</a> </li> <br><div class="mycards" id="comment-list"></div> <div class="mypost"> <textarea class="form-control" id="comment" placeholder="댓글란"></textarea> <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button> </div> </div> </body> </html>
실행 결과