커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
컴퓨터 안에 저장된 사진을 어떻게 배경으로 넣나요 ㅠㅠ
undefined주차
북마크
김*훈
댓글
9
추천
0
조회수
21
조회수
21
답변 완료

웹개발 종합반 숙제중에서 이미지주소를 따서 넣었는데


그냥 제 컴퓨터에 저장된 사진은 어떻게 넣나요???




<!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>


  <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 Serif KR', serif;

    }


    .mypic {

      width: 100%;

      height: 300px;


      background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA5MDJfOTMg%2FMDAxNjYyMDgzNjExNjUy.19tEMHHqmnQY1yeeslzCAEmndFyJBB6sZzl8QZmC_k8g.wNMPUTXve92Nth0MzReZKw5a2lB8uyCLRuH6YaOlgnIg.JPEG.seuy7409%2F20220902%25A3%25DF102550.jpg&type=sc960_832");

      background-position: center 30%;

      background-size: cover;


      color: white;


      display: flex;

      flex-direction: column;

      align-items: center;

      justify-content: center;

    }


    .mypost {

      width: 95%;

      max-width: 500px;

      margin: 20px auto 20px auto;


      box-shadow: 0px 0px 3px 0px black;

      padding: 20px;

    }


    .mypost > button {

      margin-top: 15px;

    }


    .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()

      $.ajax({

        type: 'POST',

        url: '/homework',

        data: {name_give:name, comment_give:comment},

        success: function (response) {

          alert(response['msg'])

          window.location.reload()

        }

      })

    }


    function show_comment() {

      $.ajax({

        type: "GET",

        url: "/homework",

        data: {},

        success: function (response) {

          let rows = response['comments']

          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)

          }

        }

      });

    }

  </script>

</head>

<body>

<div class="mypic">

  <h1>성시경 팬명록</h1>

  <p>현재기온: <span id="temp">36</span>도</p>

</div>

<div class="mypost">

  <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="height: 100px"></textarea>

    <label for="floatingTextarea2">응원댓글</label>

  </div>

  <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>

</div>

<div class="mycards" id="comment-list">

</div>

</body>

</html>

취소
 공유
취소
댓글 0
댓글 알림
나의얼굴