2-4강 수강중에 컨솔창에서 같은 박스를 붙여넣는 실습을 했습니다.

카드가 추가가 되긴 하는데 가로 길이가 엄청 좁고 세로 길이가 엄청 길게 뜹니다. 왜 그럴까요?

let temp_html = `  <div class="row row-cols-1 row-cols-md-4 g-4" id="cards-box">

    <div class="col">

      <div class="card">

        <img src="https://i1.sndcdn.com/avatars-000279316250-z9vf57-t500x500.jpg" class="card-img-top"

           alt="...">

        <div class="card-body">

          <h5 class="card-title">진구지 렌</h5>

          <p class="card-text">게임 우타프리 시리즈의 인기 캐릭터, 진구지 렌이다. 생일은 2월 14일. </p>

          <p>⭐⭐⭐</p>

          <p class="mycomment">좋아 좋아</p>

        </div>

      </div>`

undefined

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

S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

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

S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

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

S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]

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

S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]0: div#cards-box.row.row-cols-1.row-cols-md-4.g-4length: 1[[Prototype]]: Object(0)

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

S.fn.init [div#cards-box.row.row-cols-1.row-cols-md-4.g-4]