강의중의 아이디어를 모아 제가 만든 코딩이 있는데 안되네여...

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

강의중의 아이디어를 모아 제가 만든 코딩이 있는데 안되네여...

undefined주차

박*민

・

추천

・

조회수

답변 완료

    <!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=Black+Han+Sans&display=swap" rel="stylesheet">
        <style>
            * {
                font-family: 'Black Han Sans', sans-serif;
            }

            .mytitle {
                background-color: blue;
                width: 100%;
                height: 250px;
                background-image: url("https://w.namu.la/s/1f75d3738f1bb3f69decdf47dbda6659b106c32415decff594213314b88806719f07534b63f8a725fec60e3d0075c8b54a86146f0991d879cee6e2b7c216d8fc7b63028384333dff7df5cba0974c8947ff32cbd51ebc1c2ac1df3eee70c007ae");
                background-position: center;
                background-size: cover;
                /*정렬하는 기능*/
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                /*정렬하는 기능*/
                color: white;
            }

            #fltitle {
                font-size: 18px;
            }

            #floatingTextarea2 {
                font-size: 20px;
            }

            .form-floating {
                max-width: 400px;
                width: 95%;
                margin: 5px auto 0px auto;
                font-size: 15px;
            }

            .sideline {
                max-width: 450px;
                width: 95%;
                margin: 20px auto 0px auto;
                box-shadow: 0px 0px 10px 0px gray;
                padding: 20px;
                border-radius: 5px;
                display: none;
            }

            .mybtn {
                margin-top: 10px;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }

            .mybtn > button {
                margin-left: 5px;
                margin-right: 5px;
            }

            .card {
                max-width: 450px;
                width: 95%;
                margin: 20px auto 0px auto;
            }

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

            .mytitle > button:hover {
                border: 5px solid white;

            }
        </style>

        <script>



            function open_box(){
                $('#side-line').show()
            }
            function close_box(){
                $('#side-line').hide()
                let temp_nick = $('#floatingTextarea').val()
                let temp_comm = $('#floatingTextarea2').val()
                let temp_html = ``
                temp_html = `
                            <div className="card">
                                <div className="card-header"> ${temp_nick} </div>
                                <div className="card-body">
                                    <blockquote className="blockquote mb-0">
                                        <p> ${temp_comm} </p>
                                    </blockquote>
                                </div>
                            </div>`
                $('#card_place').append(temp_html)
                
            }
        </script>
    </head>
    <body>
    <div class="mytitle">
        <h1>비비(Naked) 팬명록</h1>
        <button onclick="open_box()">입력하기</button>
    </div>
    <div class="sideline" id="side-line">
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
            <label for="floatingTextarea">닉네임</label>
        </div>
        <div class="form-floating" id="fltitle">
                <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
                          style="height: 200px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-dark" onclick="close_box()">응원 남기기</button>
        </div>
    </div>
    <div id="guest-list">

    </div>


    <tbody id="card_place">
<!--    <div class="card">-->
<!--        <div class="card-header">- 호빵맨</div>-->
<!--        <div class="card-body">-->
<!--            <blockquote class="blockquote mb-0">-->
<!--                <p>새로운 앨범 너무 멋져요!</p>-->
<!--            </blockquote>-->
<!--        </div>-->
<!--    </div>-->
    </tbody>
    </body>
    </html>

기능은 강의중 팬명록에 있던 내용이랑 비슷한데

1.입력하기 버튼을 누르면

2.코멘트창이 나오고,

3.그 코멘트창에 닉네임과 코멘트를 남기고

4.응원남기기 버튼을 누르면

5.body>tbody 의 id = card_place 에 div를 넣는 작업을 하려고하는데

안들어가네요....

여러가지해보면서 tbody를 div로 변경하니까 부분적으로 입력은되는데

부트스트랩의 카드스타일로 입력이안돼요

댓글 알림