동영상처럼 카드 사이즈가 균일하게 출력되지 않아요

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

동영상처럼 카드 사이즈가 균일하게 출력되지 않아요

undefined주차

이*정

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

개발자도구 열어서 카드를 삽입했는데 강의 영상에서는 기존 카드처럼 균일한 크기를 가진 것처럼 추가되는데 저는 가득찬 이미지로 삽입이 됩니다.

작성한 코드 및 에러 메세지

let temp_html = `<div class="col">

<p class="card-text">여긴 첫번째 설명이 들어갑니다요!! 그렇습니닷</p>

<p class="mycomment">여기엔 코멘트가 들어갑니다</p>

</div>

</div>`

undefined

$('#cards-box').append(temp_html)

S.fn.init [div#cards-box.wrap]

-----------------------------------------------개발자도구에 입력한 스크립트

<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button onclick="hey()">영화 기록하기</button>
    </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="mybtn">
                <button type="button" class="btn btn-dark">기록하기</button>
                <button type="button" class="btn btn-outline-dark">닫기</button>
            </div>
        </div>

    </div>
    <div id="cards-box" class="wrap">
      <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
          <div class="card h-100">
            <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>
              <p>⭐⭐⭐</p>
              <p class="mycomment">여기엔 코멘트가 들어갑니다</p>
            </div>
          </div>
        </div>
        <div class="col">
          <div class="card h-100">
            <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>
              <p>⭐⭐⭐</p>
              <p class="mycomment">여기엔 코멘트가 들어갑니다</p>
            </div>
          </div>
        </div>
        <div class="col">
    <div class="card h-100">
      <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>
        <p>⭐⭐⭐</p>
        <p class="mycomment">여기엔 코멘트가 들어갑니다</p>
      </div>
    </div>
  </div>
        <div class="col">
    <div class="card h-100">
      <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>
        <p>⭐⭐⭐</p>
        <p class="mycomment">여기엔 코멘트가 들어갑니다</p>
      </div>
    </div>
  </div>
    </div>
    </div>

</body>

</html>

----------------------------------------------기존 파이참에 입력되어 있던 body 내의 스크립트

댓글 알림