상세 컨텐츠

본문 제목

[웹 개발 챌린지] 프론트엔드 실습

[SW]/웹 개발 (2025)

by 시원00 2025. 2. 8. 12:36

본문

728x90

웹 개발 챌린지 : 나만의 웹 서비스 만들기

https://bootcamp.likelion.net/courses/technology/next_myweb

더보기

목차

(웹 개발 챌린지 5-4와 9-3에서 제작했던 '일별박스오피스 조회 페이지' 전체 코드입니다.)
1. CSS/HTML (참고: https://siwon-swu18.tistory.com/88)
2. REST API (참고: https://siwon-swu18.tistory.com/91)

 

1. CSS/HTML

결과

 

home_sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>멋사 영화</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="/css/home_sample.css"/>
</head>
<body>
    <header>
        <div class="inner">
            <img class="logo" src="/image/logo.png"/>
            <div>
                <span class="menu-item">영화리스트</span>
                <span class="menu-item">국내영화</span>
                <span class="menu-item">외국영화</span>
                <span class="menu-item">한국영화관</span>
                <span class="menu-item">최근기사</span>
                <span class="menu-item">블로그</span>
            </div>
        </div>
    </header>
    <div class="top-img-container">
        <img src="./image/bg.jpg"/>
        <div class="overlay-box">
            <span>
                <span class="highlight">멋쟁이사자처럼</span>
                <br>
                <span>일별박스오피스 조회</span>
            </span>
        </div>
    </div>

    <section>
        <div class="inner">
            <div class="inner" style="display:flex; justify-content:space-between;margin-bottom:30px">
                <span class="mini-title">일별박스오피스 조회</span>
                <div>
                    <input type="date"/>
                    <button class="my-btn">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <span>조회하기</span>
                    </button>
                </div>
            </div>

            <table class="table">
                <thead>
                <tr>
                    <th scope="col">순위</th>
                    <th scope="col">영화명</th>
                    <th scope="col">누적관객수</th>
                    <th scope="col">개봉일</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>멋사영화</td>
                    <td>1000000 명</td>
                    <td>2025-02-08</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>멋사영화</td>
                    <td>1000000 명</td>
                    <td>2025-02-08</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>멋사영화</td>
                    <td>1000000 명</td>
                    <td>2025-02-08</td>
                </tr>
                </tbody>
            </table>
        </div>
    </section>
</body>
</html>

 

home_sample.css

@font-face {
    font-family: "bold";
    font-style: normal;
    src: url(/font/NotoSansKR-Black.ttf) format('truetype');
}

@font-face {
    font-family: "basic";
    font-style: normal;
    src: url(/font/NotoSansKR-Medium.ttf) format('truetype');
}

:root{
    --main-color:#ff7710; /*메인컬러*/
    --width-inner:1050px;
}

body{
    font-family:basic;
    font-size:14px;
    margin:0;
}

header{
    width:100%;
    height:60px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

header .logo{
    height:40%;
    margin-bottom:4px;
}

header>.inner{
    width:var(--width-inner);
    height:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

header .menu-item{
    color:#999;
    margin-left:22px;
    font-weight:700;
    cursor:pointer;
}

header .menu-item:hover{
    color:var(--main-color);
}

.top-img-container{
    width:100%;
    height:450px;
    position:relative;
}

.top-img-container > img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.top-img-container > .overlay-box{
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    position:absolute;
    top:0;
    left:0;
    color:#fff;
    font-weight:700;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.highlight{
    color:var(--main-color);
}

section > .inner{
    width:var(--width-inner);
    margin:0 auto;
    padding-top:50px;
}

.mini-title{
    color:#000;
    font-size:18px;
    font-weight:700;
}

button.my-btn{
    padding:3px 14px;
    background:#222;
    color:#fff;
    font-weight:700;
    border-radius:6px;
    border:1px solid;
    outline:none;
}

button.my-btn:hover{
    background:var(--main-color);
}

 

2. REST API

결과

 

home_sample.html

(주석 처리된 부분만 수정)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>멋사 영화</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="/css/home_sample.css"/>

    <!--jquery cdn 추가-->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
</head>
<body>
    <header>
        <div class="inner">
            <img class="logo" src="/image/logo.png"/>
            <div>
                <span class="menu-item">영화리스트</span>
                <span class="menu-item">국내영화</span>
                <span class="menu-item">외국영화</span>
                <span class="menu-item">한국영화관</span>
                <span class="menu-item">최근기사</span>
                <span class="menu-item">블로그</span>
            </div>
        </div>
    </header>
    <div class="top-img-container">
        <img src="./image/bg.jpg"/>
        <div class="overlay-box">
            <span>
                <span class="highlight">멋쟁이사자처럼</span>
                <br>
                <span>일별박스오피스 조회</span>
            </span>
        </div>
    </div>

    <section>
        <div class="inner">
            <div class="inner" style="display:flex; justify-content:space-between;margin-bottom:30px">
                <span class="mini-title">일별박스오피스 조회</span>
                <div>
                    <!--input id 추가-->
                    <input id="date" type="date"/>
                    <!--button id 추가-->
                    <button id="get-movies-btn" class="my-btn">
                        <i class="fa-solid fa-magnifying-glass"></i>
                        <span>조회하기</span>
                    </button>
                </div>
            </div>

            <table class="table">
                <thead>
                <tr>
                    <th scope="col">순위</th>
                    <th scope="col">영화명</th>
                    <th scope="col">누적관객수</th>
                    <th scope="col">개봉일</th>
                </tr>
                </thead>
                <!--tbody id 추가-->
                <tbody id="movies">
                <!--디자인 확인용 제거-->
<!--                <tr>-->
<!--                    <th scope="row">1</th>-->
<!--                    <td>멋사영화</td>-->
<!--                    <td>1000000 명</td>-->
<!--                    <td>2025-02-08</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <th scope="row">1</th>-->
<!--                    <td>멋사영화</td>-->
<!--                    <td>1000000 명</td>-->
<!--                    <td>2025-02-08</td>-->
<!--                </tr>-->
<!--                <tr>-->
<!--                    <th scope="row">1</th>-->
<!--                    <td>멋사영화</td>-->
<!--                    <td>1000000 명</td>-->
<!--                    <td>2025-02-08</td>-->
<!--                </tr>-->
                </tbody>
            </table>
        </div>
    </section>
</body>

<!--script 연결 추가-->
<script src="js/rest-api-sample.js"></script>
</html>

 

rest-api-sample.js

$(document).ready(function(){
    $('#get-movies-btn').on('click',function(){
        var date = $('#date').val().replaceAll('-','');
        getMoviesFromAPI(date);
    });
});

function getMoviesFromAPI(date) {
    $.ajax({
        url:'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json',
        type:'get',
        data:{
            key:'{발급받은키}',
            targetDt:date
        },
        success:function(json) {
            var movies = json['boxOfficeResult']['dailyBoxOfficeList'];

            console.log(movies.rank);

            $('#movies').empty();

            $.each(movies, function(index, movie) {
                $('#movies').append(`
                    <tr>
                        <th scope="row">${movie.rank}</th>
                        <td>${movie.movieNm}</td>
                        <td>${movie.audiAcc} 명</td>
                        <td>${movie.openDt} 개봉</td>
                    </tr>
                `);
            });
            },
            error:function(error){}
    })
}

 

 

FIN.

728x90

'[SW] > 웹 개발 (2025)' 카테고리의 다른 글

[웹 개발 챌린지] 프론트엔드+백엔드 실습  (0) 2025.02.08
[웹 개발 챌린지] 12. 데이터베이스 & 13. Spring-DB 연결  (0) 2025.02.06
[웹 개발 챌린지] 10. JAVA & 11. Controller  (1) 2025.02.01
[웹 개발 챌린지] 8. REST API & 9. 실습  (3) 2025.01.31
[웹 개발 챌린지] 6. Javascript & 7. jQuery  (0) 2025.01.30

관련글 더보기

댓글 영역

티스토리툴바