3-2 API 작업 | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

3-2 API 작업

undefined주차

한*일

・

추천

・

조회수

답변 완료

안녕하세요 3-2 강의를 듣다 궁금한게 생겨서 질문드립니다.

영상보고 따라한다고 따라했는데 보기와 같이 사진은 작게 나오고 텍스트는 따로 노는데

혹시 수업중에 사용했던 부트스트랩과 맞지 않아서 이런식으로 나오는건가요??

Ajax는 맞는거 같은데 그럼 부트스트랩에서 문제가 있어서 저렇게 나오는건지 싶어 질문드립니다.

보고 계신 화면 전

체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.

작성한 코드 및 에러 메세지

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <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=Gowun+Dodum&display=swap" rel="stylesheet">

  <style>
      * {
    font-family: 'Gowun Dodum', sans-serif;
}
      .mytitle{
        color: white;
        background-color: green;

        width: 100%;
        height: 250px;

        background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
        background-size: cover;
        background-position: center;

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .mytitle > button{
        width: 200px;
        height: 50px;

        background-color: transparent;

        color: white;

        border-radius: 50px;

        border: 1px solid white;

        margin: 10px;
      }
      .mytitle > button:hover{
        border: 2px solid white;
      }
      .wrap {
        max-width: 1200px;
        width: 95%;
        margin: 20px auto 0px auto;
      }
      .mypost{

        max-width: 500px;
        width: 95%;
        margin: 20px auto 0 auto;

        box-shadow: 0px 0px 3px 0px gray;
        padding: 20px;

        display: none;
      }
      .mybutton{
        display: flex;
         flex-direction: row;
              justify-content: center;
              align-items: center;
              margin-top: 15px;
      }
      .mybutton > button{
        margin-right: 10px;
      }
    </style>

  <script>
        $(document).ready(function(){
          listing();
        });

            function listing() {
              $('#cards-box').empty()
                $.ajax({
                    type: "GET",
                    url: "http://spartacodingclub.shop/web/api/movie",
                    data: {},
                  success: function(response){
                    let rows = response['movies']
                     for(let i = 0; i < rows.length; i++){
                        let title = rows[i]['title']
                        let desc = rows[i]['desc']
                        let image = rows[i]['image']
                        let star = rows[i]['star']
                        let comment = rows[i]['comment']

                        let star_img = '⭐'.repeat(star)

                       let temp_html = `  <div class="card">
                                            <img src="${image}">
                                           <div class="card-body">
                                              <h5 class="card-title">${title}</h5>
                                              <p class="card-text"> ${desc}</p>
                                           <div class="card-footer">
                                              <p>${star_img}</p>
                                              <p class="text-muted">${comment}</p>
                                           </div>
                                        </div>
                                    </div>`
                       $('#cards-box').append(temp_html)
                     }

                }
          })
          }
            function open_box(){
               $('#post-box').show()
            }
            function close_box(){
               $('#post-box').hide()
            }


  </script>
</head>

<body>
<div class="mytitle">
  <h1>내 생애 최고의 영화들</h1>
  <button onclick="open_box()">영화 기록하기</button>
</div>
<div>
  <div class="mypost" id="post-box">
    <div class="form-floating mb-3">
      <input type="email" class="form-control" id="url" placeholder="name@example.com">
      <label for="floatingInput">영화 URL</label>
    </div>
    <div class="input-group mb-3">
      <label class="input-group-text" for="inputGroupSelect01">별점</label>
      <select class="form-select" id="inputGroupSelect01">
        <option selected>--선택하기--</option>
        <option value="1">⭐</option>
        <option value="2">⭐⭐</option>
        <option value="3">⭐⭐⭐</option>
        <option value="4">⭐⭐⭐⭐</option>
        <option value="5">⭐⭐⭐⭐⭐</option>
      </select>
    </div>
    <div class="form-floating">
      <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
      <label for="floatingTextarea">코멘트</label>
    </div>
    <div class="mybutton">
      <button type="button" class="btn btn-dark">기록하기</button>
      <button onclick="close_box()" type="button" class="btn btn-light">닫기</button>
    </div>

  </div>


</div>
<div class="wrap">
  <div id="cards-box" class="card-group">
    <div class="card">
      <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">타이틀</h5>
        <p class="card-text">텍스트</p>
      </div>
      <div class="card-footer">
        <p>⭐⭐⭐</p>
        <p class="text-muted">코멘트</p>
      </div>
    </div>
    <div class="card">
      <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <p>⭐⭐⭐</p>
        <p class="text-muted">Last updated 3 mins ago</p>
      </div>
    </div>
    <div class="card">
      <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <p>⭐⭐⭐</p>
        <p class="text-muted">Last updated 3 mins ago</p>
      </div>
    </div>
    <div class="card">
      <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg" class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
      <div class="card-footer">
        <p>⭐⭐⭐</p>
        <p class="text-muted">Last updated 3 mins ago</p>
      </div>
    </div>
</div>


</div>
</body>

</html>

댓글 알림