커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
[jquery].append()를 이용하여 temp_html을 html화 하여 카드 붙여넣기 시 카드가 한장씩 크게 붙습니다.
undefined주차
북마크
신*슬
댓글
2
・
추천
0
・
조회수
50
조회수
50
답변 완료


2-4 JQuery 다뤄보기 (2) 강의에서 console창에 .append() 코드를 사용하여 temp_html을 html화 하여 카드 붙여넣기를 하는 내용이 있습니다.

그런데 코드 적용시 강사님 화면에서는 카드가 기존에 있던 카드 정렬처럼 예쁘게 하나씩 왼쪽부터 작은 사이즈로 붙는데, 제가 하면 화면 전체 너비를 차지하도록 크게 하나씩 붙습니다. 왜 제가 실행하면 카드가 한페이지에 4장씩 안붙고 아래로 크게 하나씩 붙는걸까요?

확인 부탁 드립니다.


[강사님이 코드 실행 시켰을때 카드가 들어가는 모습]

스파르타 즉문즉답


[내가 코드 실행 시켰을 때 카드가 들어가는 모습]

스파르타 즉문즉답






작성한 코드 및 에러 메세지

[console창에 작성한 코드]
let temp_html = `<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>`

undefined

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

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


[위에 코드를 따온 기존 스파르타 피디아 코드]
<!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 {
            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-position: center; background-size: cover; color: white; display: flex; flex-direction: column; align-items: center; justify-content: center; }

        .mytitle > button {
            width: 200px;
            height: 50px;
            background-color: transparent;
            color: white;
            border-radius: 50px;
            border: 1px solid white;
            margin-top: 10px; }

        .mytitle > button:hover {
            border: 2px solid white;
        }
        .mycomment {
            color: gray;
        }
        .mycards {
            margin: 20px auto 0px auto;
            width: 95%;
            max-width: 1200px;
        }
        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px gray;
        }
        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        .mybtns > button {
            margin-right: 10px;
        }
    </style>
    <script>


    </script>
</head>
<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="floatingTextarea2"
          style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>
<div class="mycards", id="cards-box">
    <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>





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