[왕초보 웹개발] 웹개발 종합반 3주차

3주차

나만의 추억 앨범에 제이쿼리 적용하기

추억 저장하기 버튼

한번 클릭하면 카드 기록창이 on/off 되도록 작성

JQuery는 이미 on/off 기능을 하는 toggle()을 제공함

 

스크립트 태그 안에 openclose()라는 함수를 만들고, 추억 저장하기 버튼을 눌렀을 때 해당 함수가 작동하도록 onclick="openclose()"를 설정

 

toggle() 함수가 적용될 대상인 카드 기록 창을 감싸고 있는 div 태그에 id를 지정하고 JQuery를 사용하여 지정한 id값에 toggle() 함수를 사용하면 버튼을 누를 때마다 on/off가 적용됨

 

개발자 도구로 들어가서 적용된 div 태그를 보면 버튼을 눌렀을 때 html 코드자체가 사라지는게 아니라 display값이 none으로 되었다가 다시 정상으로 되었다가 하는 것을 확인할 수 있음

function openclose() {
    $("#postingbox").toggle();
}

<button onclick="openclose()">추억 저장하기</button>

 

기록하기 버튼

카드 기록창에 데이터를 입력하고 기록하기를 누르면 카드를 하나 추가

 

각 form-floating 라벨을 모두 동일한 것으로 부트스트랩에서 복사했기 때문에 id값이 동일한데 이를 전부 다른 값으로 바꿔서 각각의 라벨마다 자바스크립트 함수가 가리킬 수 있도록 수정

 

JQuery에서 특정 id의 value값을 가져오려면 $('ID입력').val() 함수를 적용하면 됨

makeCard()함수를 생성하여 변경한 각 id값의 value를 변수에 저장

 

태그를 삽입해야 하기 때문에 `(백틱)을 활용하여 삽입해야할 html 태그의 내용을 복사해서 백틱 사이에 붙여 넣기하고 해당 내용을 변수에 저장

ex) let addTag = `추가 되어야 할 html 태그 전체`;

 

해당 태그가 추가 되어야 할 div 태그에 id값을 지정하고 JQeury를 활용하여 해당 id의 뒤에 복사할 html 태그가 붙도록 append()함수를 사용하면 기록하기 버튼을 누를 때마다 카드가 추가됨

ex) $("#card").append(addTag);

 

입력한 카드 창의 내용을 담아서 추가해야 하므로 복사한 html 태그에 JQuery를 적용하여 각 id의 value값을 담은 변수들을 각각 적용해주면 됨

function makeCard() {
    let image = $("#image").val();
    let title = $("#title").val();
    let content = $("#content").val();
    let date = $("#date").val();

    let addTag = `
    <div class="col">
        <div class="card h-100">
            <img
            src="${image}"
            class="card-img-top"
            alt="..."
            />
            <div class="card-body">
            <h5 class="card-title">${title}</h5>
            <p class="card-text">${content}</p>
            </div>
            <div class="card-footer">
            <small class="text-body-secondary">${date}</small>
            </div>
        </div>
    </div>`;

    $("#card").append(addTag);
}

<button onclick="makeCard()" type="button" class="btn btn-dark">
    기록하기
</button>

스파르타플릭스에 제이쿼리 추가 적용하기

영화 기록하기 버튼

마찬가지로 영화 기록하기 버튼을 누르면 영화를 기록할 수 있는 창을 on/off 할 수 있도록 기능을 추가

 

JQuery의 toggle()기능을 사용하여 함수를 만들고, 적용할 html button 태그에 onclick 속성을 활용하여 함수가 동적하도록 지정하고, 동작 대상에 id값을 지정하여 해당 대상이 JQuery의 대상이 되도록 함수를 작성

<button onclick="openclose()" type="button" class="btn btn-outline-light">
    영화 기록하기
</button>

<div class="mypostingbox" id="postingbox">
    ...
</div>

function openclose() {
    $('#postingbox').toggle()
}

 

기록하기 버튼(영화 등록)

기록할 영화 데이터를 각 항목에 입력하고 기록하는 기능을 추가

 

기록하기 버튼 태그를 클릭시 동작할 함수를 지정

기록할 영화데이터 정보를 담고있는 각 인풋 라벨들의 id를 설정하고 해당 인풋 라벨에 작성한 값을 변수에 저장하기 위해 JQuery를 사용하여 각 변수에 저장

 

기록하기 버튼을 누르면 추가 되어야할 카드(태그 코드 전체)를 복사한 후 ``백틱 사이에 붙여넣고 JQuery를 사용하여 각 지정한 변수들을 항목에 맞게 작성한 후 변수에 저장

 

셀렉트 태그(드롭다운)인 별점은 이미지를 그대로 가져오지 않고 지정한 값을 가져오고 int로 형변환을 하여 반복문을 통해 선택된 별점의 개수만큼 별을 붙인 후 JQuery 코드를 작성하여 id를 card로 설정한 div 태그에 카드가 등록되도록 작성

<button onclick="makeCard()" type="button" class="btn btn-danger">
    기록하기
</button>

<div class="mycards">
    <div class="row row-cols-1 row-cols-md-4 g-4" id="card">
        카드1
        카드2
        ...
    </div>
</div>

<div class="mypostingbox" id="postingbox">
    <div class="form-floating mb-3">
        <input
            type="email"
            class="form-control"
            id="image"
            placeholder="영화 이미지 주소"
        />
        <label for="floatingInput">영화 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
        <input
            type="email"
            class="form-control"
            id="title"
            placeholder="영화 제목"
        />
        <label for="floatingInput">영화 제목</label>
    </div>
    <div class="input-group mb-3">
        <label class="input-group-text" for="inputGroupSelect01"
            >별점</label
        >
        <select class="form-select" id="starNum">
            <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 mb-3">
        <input
            type="email"
            class="form-control"
            id="comment"
            placeholder="추천 이유"
        />
        <label for="floatingInput">추천 이유</label>
    </div>
    <button onclick="makeCard()" type="button" class="btn btn-danger">
        기록하기
    </button>
</div>

function makeCard() {
    let image = $('#image').val();
    let title = $('#title').val();
    let comment = $('#comment').val();
    let starNum = parseInt($('#starNum').val());
    let star = '';
    for (let i = 0; i < starNum; i++) {
        star += '⭐';
    }

    let addMovie = `
    <div class="col">
        <div class="card h-100">
            <img
                src="${image}"
            />
            <div class="card-body">
                <h5 class="card-title">${title}</h5>
                <p class="card-text">${star}</p>
                <p class="card-text">${comment}</p>
            </div>
        </div>
    </div>`

    $("#card").append(addMovie);
}

Fetch

Fetch 시작

서버와 통신할 때 사용하는 api

url만 입력하여 통신할 경우 get 방식으로 서버에 요청을 받고, 별도의 HTTP 메서드로 요청해야 할 경우 method와 타입정보 등을 지정하여 요청할 수 있음

 

아래의 형태로 사용하며 얻은 데이터를 json()으로 JSON형태로 직렬화 하면 딕셔너리-리스트 자료형과 비슷한 자료구조로 서버에서 받은 정보를 가공하여 사용할 수 있음

 

기본 골조는 아래의 형태를 그대로 사용한다고 생각하면 됨

fetch("여기에 URL을 입력")      // 이 URL로 웹 통신을 요청
	.then(res => res.json()) // 통신 요청을 받은 데이터를 res라는 이름으로 받고, json으로 직렬화
	.then(data => {          // JSON 형태로 바뀐 데이터를 data라는 이름으로 사용
		console.log(data)    // 개발자 도구에 찍어보기
	})

 

Fetch 연습1

서버에서 요청받은 데이터를 반복문과 자료형 사용법을 통해 원하는 정보만 추출할 수 있음

아래의 fetch코드처럼 url에 요청하여 받은 자료를 JSON 형태로 직렬화 하고 원하는 값을 출력할 수 있음

function hey() {
    let url = "http://spartacodingclub.shop/sparta_api/seoulair";

    fetch(url)
        .then((res) => res.json())
        .then((data) => {
            let rows = data["RealtimeCityAir"]["row"];
            rows.forEach((a) => {
                let gu_name = a["MSRSTE_NM"];
                let gu_mise = a["IDEX_NM"];
                console.log(gu_name, gu_mise);
            });
        });
}

 

Fetch 연습2

업데이트 버튼을 누르면 Fetch 연습1에서 했던 방식을 활용하여 fetch로 서버에서 받은 데이터를 가공하여 송파구 : 52의 형태로 각 구의 미세먼지 수치를 출력

 

아래처럼 코드를 작성한 후 업데이트 버튼을 누르면 입력된 데이터가 사라지고, 서버에서 받은 데이터를 가공하여 원하는 형태로 출력하는 것을 확인할 수 있음

 

if문과 css를 적용하여 gu_mise의 값이 40이상이면 빨간색으로 표시되도록 할 수 있음

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <title>미세먼지 API로Fetch 연습하고 가기!</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.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()
                let url = "http://spartacodingclub.shop/sparta_api/seoulair";

                fetch(url)
                    .then((res) => res.json())
                    .then((data) => {
                        let rows = data["RealtimeCityAir"]["row"];
                        rows.forEach((a) => {
                            let gu_name = a["MSRSTE_NM"];
                            let gu_mise = a["IDEX_MVL"];
                            
                            let addNames = '';
                            if (gu_mise > 40) {
                                addNames = `<li class="bad">${gu_name} : ${gu_mise} </li>`
                            } else {
                                addNames = `<li>${gu_name} : ${gu_mise} </li>`
                            }
                            
                            
                            $('#names-q1').append(addNames)
                        });
                    });
            }
        </script>
    </head>

    <body>
        <h1>Fetch 연습하자!</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>

나만의 추억앨범에 Fetch적용

만들었던 나만의 추억앨범에 서울의 실시간 대기 정보를 가져와서 '현재 서울의 미세먼지 : 좋음' 의 형태로 대기 정보를 표시

여기에서는 서울의 미세먼지 : 이부분은 그대로 고정으로 하고, '좋음' 이부분만 변경되어야 하고, 클릭과 같이 특정 이벤트가 발생하는 것이 아니라 페이지가 로딩되면 알아서 표시되어야 함

 

먼저 p태그로 제목과 추억 저장하기 사이에 미세먼지 정보를 나타낼 위치에 데이터를 작성하고, 특정 부분의 데이터만 변경해야 하기 때문에 <span> 태그를 사용하여 '기본값'을 각 서버에서 받아온 정보로 변경

 

fetch를 사용하여 서버에서 받은 정보를 가공하여 mise라는 변수에 담고, 이를 JQuery를 활용하여 반영하면 됨

다만, 페이징이 로딩되자마자 표현되어야 하므로 $(document).ready(function() { ... }); 라는 코드에 fetch 코드를 작성하였음

<div class="mytitle">
    <h1>나만의 추억앨범</h1>
    <p>현재 서울의 미세먼지 : <span id="mise">기본값</span></p>
    <button onclick="openclose()">추억 저장하기</button>
</div>

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/seoulair";
    fetch(url)
        .then((res) => res.json())
        .then((data) => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
            $('#mise').text(mise)
        });
});

 

스파르타플릭스에 Fetch적용

헤더에 '현재 서울의 날씨: 27.56도'와 같은 형태로 서울의 실시간 대기 정보를 가져와서 출력

 

동일한 방식으로 url의 주소로 요청 후 받은 데이터를 가공하여 출력

페이지가 로드되면 기본값으로 작성해둔 데이터가 잠깐 노출이 되는데 그게 싫다면 기본값을 지우면 됨

<li>
    <a href="#" class="nav-link px-2 text-white"
        >현재 서울의 온도 : <span id="temp"></span>도</a
    >
</li>

$(document).ready(function () {
    let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
    fetch(url)
        .then((res) => res.json())
        .then((data) => {
            let temp = data["temp"];
            $("#temp").text(temp);
        });
});

숙제코드

1. 점보트론 적용 후 라벨을 내부로 이동

2. 구글 폰트 적용(글로벌 - 고운돋움, 점보트론 내 h1태그 별도 적용 - Black Han Sans)

3. 부트스트랩 카드 태그 추가

4. 기록하기 누르면 JQuery 활용하여 카드가 추가되는 기능 개발

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
        />

        <title>푸드파이터</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

        <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://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"
        ></script>
        <script src="../static/firebase2.js" type="module"></script>
        <style>
            @import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&family=Noto+Sans+KR:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

            * {
                font-family: "Gowun Dodum", serif;
                font-weight: 400;
                font-style: normal;
            }

            body {
                background-color: white;
                color: black;
            }

            .header {
                background-size: cover;
                background-image: url("https://images.unsplash.com/photo-1531697218799-ed0ae884c6c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80");
                background-position: right;
                height: 650px;
                display: flex;
                flex-direction: column;
            }

            .header > h1 {
                margin: 0;
                font-size: 40px;
            }

            #header-title {
                font-family: "Black Han Sans", serif;
                font-weight: 400;
                font-style: normal;
            }

            .header > div {
                font-size: 18px;
                margin-top: 10px;
            }

            .form-button {
                width: 150px;
                height: 40px;
                background-color: transparent;
                border: 1px solid tr;
                color: black;
                font-size: 15px;
                margin: 20px 10px 0px 0px;
            }

            .form-button:hover {
                border: 2px solid black;
            }

            .info-button {
                margin: 20px 0 0 15px;
                height: 40px;
                font-size: 14px;
            }

            .post {
                width: 500px;
                margin: 20px 0px 1px 20px;
                padding: 20px;
                box-shadow: 0px 0px 3px 0px transparent;
                background-color: wheat;
            }

            .form-floating input,
            .form-floating textarea {
                color: black;
                background-color: white;
            }

            .button2 {
                display: flex;
                justify-content: flex-end;
                margin-top: 15px;
            }

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

            .mycards {
                width: 1200px;
                margin: 30px auto;

                flex-direction: row;
                align-items: center;
            }

            .card {
                border-radius: 30px;
                background-color: white;
                border: none;
                color: black;
                margin-left: 50px;
            }

            .card-img-top {
                object-fit: cover;
                height: 250px;
                border-radius: 20px;
            }

            .card-title {
                margin-top: 10px;
                font-size: 18px;
            }

            .card-body {
                border: blanchedalmond 2px solid;
                border-radius: 20px;
            }

            .card-text {
                color: black;
            }

            .comment {
                color: black;
            }

            .play-button {
                display: flex;
                justify-content: flex-start;
                margin-top: 15px;
            }

            a.nav-link {
                color: #f17228;
                font-size: large;
            }

            .icon {
                height: 50px;
            }

            .card-button {
                background-color: orange;
                color: white;
                text-align: center;
                padding: 10px 15px;
                border: none;
                border-radius: 6px;
                cursor: pointer;
            }

            .card-title {
                font-weight: bold;
            }

            .card-button > :hover {
                background-color: darkorange;
            }

            #input-card {
                width: 500px;
                margin: 0px 0px 0px 135px;
                padding: 20px;
                background-color: #f9f9f9;
                border-radius: 10px;
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
                float: left;
            }

            .form-floating input,
            .form-floating textarea {
                color: black;
                background-color: #f9f9f9;
                border: 1px solid #ccc;
                border-radius: 5px;
                margin-bottom: 10px;
                padding: 10px;
                width: 100%;
            }

            .form-floating label {
                color: #333;
            }

            .input-group button,
            .input-group select {
                background-color: rgb(168, 161, 161);
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
                margin-top: 10px;
            }

            .input-group button:hover,
            .input-group select:hover {
                background-color: gray;
            }

            .button2 {
                text-align: right;
            }

            .button2 button {
                background-color: #f17228;
                color: white;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }

            .button2 button:hover {
                background-color: #f3620f;
            }

            .jumbotron-message {
                margin-left: 150px;
                font-size: 1500px;
            }
        </style>

        <script>
            function makeCard() {
                let image = $("#image").val();
                let title = $("#title").val();
                let comment = $("#comment").val();
                let starNum = parseInt($("#star_num").val());
                let star = "";
                for (let i = 0; i < starNum; i++) {
                    star += "⭐";
                }

                let addFood = `
                <div class="col">
                    <div class="card">
                        <img
                            src="${image}"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">${title}</h5>
                            <p class="card-star">${star}</p>
                            <p class="card-text">${comment}</p>
                            <button type="button" class="btn btn-warning">
                                주문하기
                            </button>
                        </div>
                    </div>
                </div>`;

                $("#card").append(addFood);
            }
        </script>
    </head>

    <body>
        <!-- Navbar -->
        <header class="p-3 text-bg-dark">
            <div class="container">
                <div
                    class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start"
                >
                    <a
                        href="/"
                        class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none"
                    >
                        <svg
                            class="bi me-2"
                            width="40"
                            height="32"
                            role="img"
                            aria-label="Bootstrap"
                        >
                            <use xlink:href="#bootstrap"></use>
                        </svg>
                    </a>
                    <ul
                        class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0"
                    >
                        <li>
                            <img
                                src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/food.png"
                                class="icon"
                            />
                        </li>
                        <li>
                            <a href="#" class="nav-link px-2 text-danger"
                                >Foodcourt</a
                            >
                        </li>
                        <li><a href="#" class="nav-link px-2">홈</a></li>
                        <li><a href="#" class="nav-link px-2">한식</a></li>
                        <li><a href="#" class="nav-link px-2">일식</a></li>
                        <li><a href="#" class="nav-link px-2">중식</a></li>
                        <li><a href="#" class="nav-link px-2">양식</a></li>
                    </ul>
                    <form
                        class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3"
                        role="search"
                    >
                        <input
                            type="search"
                            class="form-control form-control-dark text-bg-dark"
                            placeholder="Search..."
                            aria-label="Search"
                        />
                    </form>
                    <div class="text-end">
                        <button type="button" class="btn btn-warning me-2">
                            Login
                        </button>
                        <button type="button" class="btn btn-warning">
                            Sign-up
                        </button>
                    </div>
                </div>
            </div>
        </header>
        <div class="header">
            <div class="p-5 mb-4 bg-body-tertiary rounded-3">
                <div class="container-fluid py-5">
                    <h1 id="header-title" class="display-5 fw-bold">
                        스파르타 푸드파이터
                    </h1>
                    <p class="col-md-8 fs-4">
                        본인만의 맛집을 소개하는 사이트입니다.
                        <br />
                        맛집을 소개해 주세요!
                    </p>
                    <div class="post" id="input-card">
                        <div class="form-floating mb-3">
                            <input
                                type="email"
                                class="form-control"
                                id="image"
                                placeholder="name@example.com"
                            />
                            <label for="floatingInput">음식 이미지 주소</label>
                        </div>
                        <div class="form-floating mb-3">
                            <input
                                type="text"
                                class="form-control"
                                id="title"
                                placeholder="영화 제목"
                            />
                            <label for="foodTitle">음식명</label>
                        </div>
                        <div class="input-group mb-3">
                            <button
                                class="btn btn-outline-secondary"
                                type="button"
                            >
                                별점
                            </button>
                            <select
                                class="form-select"
                                id="star_num"
                                aria-label="Example select with button addon"
                            >
                                <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="comment"
                            ></textarea>
                            <label for="floatingTextarea">추천 이유</label>
                        </div>
                        <div class="button2">
                            <button
                                onclick="makeCard()"
                                type="button"
                                class="btn btn-danger"
                                id="addBtn"
                            >
                                기록하기
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 부트스트랩 카드 적용-->
        <div class="mycards">
            <div class="row row-cols-1 row-cols-md-3 g-4" id="card">
                <div class="col">
                    <div class="card">
                        <img
                            src="https://kfcapi.inicis.com/kfcs_api_img/KFCS/goods/DL_2176694_20241015131838637.png"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">핫크리스피통다리 8조각</h5>
                            <p class="card-star">⭐⭐⭐⭐</p>
                            <p class="card-text">맛있어요</p>
                            <button type="button" class="btn btn-warning">
                                주문하기
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <img
                            src="https://kfcapi.inicis.com/kfcs_api_img/KFCS/goods/DL_2176980_20241111115056893.png"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">핫크리스피치킨 1＋1</h5>
                            <p class="card-star">⭐⭐⭐⭐⭐</p>
                            <p class="card-text">가성비 좋아요</p>
                            <button type="button" class="btn btn-warning">
                                주문하기
                            </button>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card">
                        <img
                            src="https://kfcapi.inicis.com/kfcs_api_img/KFCS/goods/DL_2277778_20241015170007252.png"
                            class="card-img-top"
                            alt="..."
                        />
                        <div class="card-body">
                            <h5 class="card-title">징거타워세트</h5>
                            <p class="card-star">⭐⭐⭐⭐</p>
                            <p class="card-text">치킨버거의 근본</p>
                            <button type="button" class="btn btn-warning">
                                주문하기
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container2">
            <footer
                class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top"
            >
                <div class="col mb-3">
                    <a
                        href="/"
                        class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"
                    >
                    </a>
                    <p class="text-body-secondary">©Teamsparta 2024</p>
                </div>
                <div class="col mb-3"></div>
                <div class="col mb-3">
                    <h5>Section</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Home</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Features</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Pricing</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >FAQs</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >About</a
                            >
                        </li>
                    </ul>
                </div>

                <div class="col mb-3">
                    <h5>Section</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Home</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Features</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Pricing</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >FAQs</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >About</a
                            >
                        </li>
                    </ul>
                </div>

                <div class="col mb-3">
                    <h5>Section</h5>
                    <ul class="nav flex-column">
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Home</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Features</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >Pricing</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >FAQs</a
                            >
                        </li>
                        <li class="nav-item mb-2">
                            <a href="#" class="nav-link p-0 text-body-secondary"
                                >About</a
                            >
                        </li>
                    </ul>
                </div>
            </footer>
        </div>
    </body>
</html>