내일배움단 기초학습 4일차 [JQuery,Ajax]

wish17·2022년 10월 21일

ajax jquery

내일배움단

목록 보기

5/7

JQuery

1. JQuery 시작하기

- 1) jQuery 란?

- HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 것. 라이브러리

        Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,
        
        1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
        **j**Query라는 라이브러리가 등장하게 되었답니다.

jQuery와 Javascript 코드 비교

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드
전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것
(그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

document.getElementById("element").style.display = "none";

Javascript로 복잡하게 쓸 내용을 아래와 같이 jQuery로 보다 직관적으로 쓸 수 있다.

$('#element').hide();

- 2) jQuery 사용하기

미리 작성된 Javascript 코드를 가져오는 것을 '임포트'라고 부른다.

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

jQuery 코드를 사용하기 위해 위와 같이 head 사이에 jQuery CDN를 추가해줘야함 jQuery CDN 사이트

jQuery를 사용하는 방법
css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있습니다.
예) 특정 인풋박스의 값을 → 가져와줘!
예) 특정 div를 → 안보이게 해줘!

css에서는 선택자로 class를 썼듯 jQuery에서는 id 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킴.

2. JQuery 다뤄보기

아래 사진의 버튼 기능을 JQuery를 이용해 구현해 보았다.

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

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            let val1 = $('#input-q1').val();
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
            if (val1 == '') {
                alert('입력하세요!');
            }
// 4. alert(입력값) 띄우기
            else {
                alert(val1);
            }
        }

        function q2() {
// 1. input-q2 값을 가져온다.
            let email = $('#input-q2').val();
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
            if (email.includes('@')) {
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
                let domainWithDot = email.split('@')[1];
                let onlyDomain = domainWithDot.split('.')[0];
                alert(onlyDomain);
            }
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
                 else {
                     alert('잘못된 형식의 이메일입니다.')
            }
        }

        function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
            let name = $('#input-q3').val();
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
            let temp_html = `<li>${name}</li>`;
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
            $('#names-q3').append(temp_html);
        }

        function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
            $('#names-q3').empty();
        }

    </script>

</head>

<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>

<div class="question-box">
    <h2>1. 빈칸 체크 함수 만들기</h2>
    <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
    <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
    <input id="input-q1" type="text"/>
    <button onclick="q1()">클릭</button>
</div>
<hr/>
<div class="question-box">
    <h2>2. 이메일 판별 함수 만들기</h2>
    <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
    <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
    <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
    <input id="input-q2" type="text"/>
    <button onclick="q2()">클릭</button>
</div>
<hr/>
<div class="question-box">
    <h2>3. HTML 붙이기/지우기 연습</h2>
    <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
    <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
    <input id="input-q3" type="text" placeholder="여기에 이름을 입력"/>
    <button onclick="q3()">이름 붙이기</button>
    <button onclick="q3_remove()">다지우기</button>
    <ul id="names-q3">
        <li>세종대왕</li>
        <li>임꺽정</li>
    </ul>
</div>
</body>

</html>

위와 같은 방식으로 전에 만들었던 영화리스트 사이트에 박스 숨기기, 리스트 추가 등 기능을 부여해보았다.

<!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 {
            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://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb8cwAt%2FbtqGQbTJ7yJ%2FecC19OUyT4yEwUo3rzdC60%2Fimg.jpg);
            background-position: center;
            background-size: cover;

            color: white;

            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;

            matgin-top: 10px;


        }

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

        .coment {
            clor: glay;
        }

        .wrap {
            max-width: 1200px;
            width: 95%;
            margin: 20px auto 0px auto;
        }

        .post {
            /*background-color: green;*/
            max-width: 500px;
            width: 95%;

            margin: 20px auto 0px auto;

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

            display: none;


        }

        .mybtns {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;

            margin-top: 20px;
        }

        .mybtns > button {
            margin-right: 10px;
        }


    </style>
    <script>
        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 class="post" id="post-box">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" 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>Choose...</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="3">⭐⭐⭐⭐</option>
            <option value="3">⭐⭐⭐⭐⭐</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">Comments</label>
    </div>

    <div class="mybtns">
        <button type="button" class="btn btn-outline-dark">기록하기</button>
        <button onclick="close_box()" type="button" class="btn btn-outline-dark">닫기</button>
    </div>

</div>
<div class="wrap">
    <div class="row row-cols-1 row-cols-md-4 g-4">
        <div class="col">
            <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>
                    <p>☆☆☆☆☆</p>
                    <p class="coment">코멘트 들어가는 자리</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="http://ticketimage.interpark.com/Movie/still_image/V16/V1601142p_01.gif" class="card-img-top"
                     alt="...">
                <div class="card-body">
                    <h5 class="card-title">포레스트 검프</h5>
                    <p class="card-text">저능아의 성공한 인생스토리</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="coment">착실함과 성실함을 강조한 영화</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="data:image/jpeg;base64,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"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">테넷</h5>
                    <p class="card-text">시간을 다룬 SF영화</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="coment">여러 시간의 흐름을 동시에 보여주는 연출이 최고였습니다.</p>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <img src="data:image/jpeg;base64,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"
                     class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">완벽한 타인</h5>
                    <p class="card-text">핸드폰을 공개하면 벌어지는일</p>
                    <p>⭐⭐⭐⭐⭐</p>
                    <p class="coment">최고의 코미디 영화</p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>

Ajax

서버-클라이언트 통신 이해하기

API는 은행 창구와 같은 것

같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라
가져와야 하는 것 / 처리해주는 것이 다른 것처럼,

클라이언트가 요청 할 때에도, "타입"이라는 것이 존재.

GET → 통상적으로! 데이터 조회(Read)를 요청할 때
예) 영화 목록 조회
POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때
예) 회원가입, 회원탈퇴, 비밀번호 수정

post는 나중에 다룰 예정

Get

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개짐. "?"가 쪼개지는 지점.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호]

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967

GET 방식으로 데이터를 전달하는 방법


?  : 여기서부터 전달할 데이터가 작성된다는 의미
& : 전달할 데이터가 더 있다는 뜻

예시) google.com/search?q=아이폰&sourceid=chrome&ie=UTF-8

         위 주소는 google.com의 search 창구에 다음 정보를 전달한다.
         
         q=아이폰                        (검색어)
         sourceid=chrome              (브라우저 정보)
         ie=UTF-8                      (인코딩 정보)

Ajax 시작하기

Ajax 기본 골격

$.ajax({
  type: "GET",
  url: "여기에URL을입력",
  data: {},
  success: function(response){
    console.log(response)
  }
})

Ajax 코드 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

$ajax 코드 설명
type: "GET" → GET 방식으로 요청한다.
url: 요청할 url
data: 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두기)

리마인드

GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져갑니다.
http://naver.com?param=value&param2=value2 

POST 요청은, data : {} 에 넣어서 데이터를 가져갑니다.
data: { param: 'value', param2: 'value2' },

success: 성공하면, response 값에 서버의 결과 값을 담아서 함수를 실행한다.

success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
  console.log(response) 
}

- 실습

미세먼지 상태

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

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        .bad {
            color: red;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty();
            // 업데이트 누를때 이전 기록이 남지 않게 비워주는거
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response['RealtimeCityAir']['row']
                    for (let i = 0; i < rows.length; i++) {
                        // low => 특정 행 가져오기
                        let gu_name = rows[i]['MSRSTE_NM']
                        let gu_mise = rows[i]['IDEX_MVL']

                        //let temp_html = `<li>${gu_name} : ${gu_mise} 82</li>`

                        let temp_html = ``

                        if (gu_mise > 40) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else if (gu_mise == -99) {
                            temp_html = `<li>${gu_name} : ${"재측정 중입니다."}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }

                        $('#names-q1').append(temp_html)
                        //  console.log(response['RealtimeCityAir']['row'])
                        //ㄴ> RealtimeCityAir의 row를 타고 들어가는거
                    }
                }
            })
        }
    </script>

</head>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기</h2>
    <p>모든 구의 미세먼지를 표기해주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <ul id="names-q1">
        <li>중구 : 82</li>
        <li>종로구 : 87</li>
        <li>용산구 : 84</li>
        <li>은평구 : 82</li>
    </ul>
</div>
</body>

</html>

따릉이 현황

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

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>
    <!-- jQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        table {
            border: 1px solid;
            border-collapse: collapse;
        }

        td,
        th {
            padding: 10px;
            border: 1px solid;
        }

        .urgent {
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        function q1() {
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulbike",
                data: {},
                success: function (response) {
                    let rows = response["getStationList"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let rack_name = rows[i]['stationName'];
                        let rack_cnt = rows[i]['rackTotCnt'];
                        let bike_cnt = rows[i]['parkingBikeTotCnt'];
                        let temp_html = '';
                        if (bike_cnt < 4) {
                            temp_html = `<tr class="urgent">
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
                        } else {
                            temp_html = `<tr>
<td>${rack_name}</td>
<td>${rack_cnt}</td>
<td>${bike_cnt}</td>
</tr>`
                        }
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

</head>

<body>
<h1>jQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>2. 서울시 OpenAPI(실시간 따릉이 현황)를 이용하기</h2>
    <p>모든 위치의 따릉이 현황을 보여주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">업데이트</button>
    <table>
        <thead>
        <tr>
            <td>거치대 위치</td>
            <td>거치대 수</td>
            <td>현재 거치된 따릉이 수</td>
        </tr>
        </thead>
        <tbody id="names-q1">
        </tbody>
    </table>
</div>
</body>

</html>

이미지, 텍스트 같이 바꾸기

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>JQuery 연습하고 가기!</title>
    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }

        div.question-box > div {
            margin-top: 30px;
        }

    </style>

    <script>
        function q1() {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/rtan",
                data: {},
                success: function (response) {
                    let imgurl = response['url'];
                    $("#img-rtan").attr("src", imgurl);

                    let msg = response['msg'];
                    $("#text-rtan").text(msg);
                }
            })
        }
    </script>

</head>
<body>
<h1>JQuery+Ajax의 조합을 연습하자!</h1>

<hr/>

<div class="question-box">
    <h2>3. 르탄이 API를 이용하기!</h2>
    <p>아래를 르탄이 사진으로 바꿔주세요</p>
    <p>업데이트 버튼을 누를 때마다 지웠다 새로 씌여져야 합니다.</p>
    <button onclick="q1()">르탄이 나와</button>
    <div>
        <img id="img-rtan" width="300" src="http://spartacodingclub.shop/static/images/rtans/SpartaIcon11.png"/>
        <h1 id="text-rtan">나는 ㅇㅇㅇ하는 르탄이!</h1>
    </div>
</div>
</body>
</html>

위 내용들을 활용하여 전에 만든 팬명록에 실시간 온도를 추가해 봤습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap" rel="stylesheet">
    <style>
        * {
            font-family: 'Gowun Dodum', sans-serif;
        }
        .mypic {
            width: 100%;
            height: 300px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://newsimg.sedaily.com/2020/07/13/1Z5ACUKFEG_1.jpg');
            background-position: center 30%;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mypost {
            width: 95%;
            max-width: 500px;
            margin: 20px auto 20px auto;

            box-shadow: 0px 0px 3px 0px black;
            padding: 20px;
        }

        .mypost > button {
            margin-top: 15px;
        }

        .mycards {
            width: 95%;
            max-width: 500px;
            margin: auto;
        }

        .mycards > .card {
            margin-top: 10px;
            margin-bottom: 10px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/weather/Seongnam-si",
                data: {},
                success: function (response) {
                    let now_temp = response['temp'];
                    $("#temp").text(now_temp);
                }
            })
        });
    </script>


</head>
<body>
    <div class="mypic">
        <h1>홍광호 팬명록</h1>
        <p1>현재기온 : <span id = "temp">00.0</span>도</p1>
    </div>
    <div class="mypost">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" id="name" placeholder="url">
            <label for="floatingInput">닉네임</label>
        </div>
        <div class="form-floating">
            <textarea class="form-control" placeholder="Leave a comment here" id="comment"
                style="height: 100px"></textarea>
            <label for="floatingTextarea2">응원댓글</label>
        </div>
        <button onclick="save_comment()" type="button" class="btn btn-dark">응원 남기기</button>
    </div>
    <div class="mycards" id="comment-list">
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>노트르담파리 잘봤습니다!</p>
                    <footer class="blockquote-footer">에스메랄다</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>데스노트 재밌었어요</p>
                    <footer class="blockquote-footer">라이토</footer>
                </blockquote>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <blockquote class="blockquote mb-0">
                    <p>명불허전 스위니토드!</p>
                    <footer class="blockquote-footer">토비</footer>
                </blockquote>
            </div>
        </div>
    </div>
</body>
</html>