[FE] 영화 검색 사이트(바닐라JS) - (1) 상단부_타이틀

🖐️ 구현 목표 🖐️
- 로고 이미지 그려서 삽입
- 로고 이미지 클릭시 새로고침

 

 

01 html

---

로고를 타이틀로 지정해주기위해 이미지를 불러오고 css를 이용하여 로고의 크기와 위치를 조정해주었다. 그리고 로고가 클릭 될 시 원본으로 다시 돌아가는 기능을 구현하기 위해 onclick을 사용해서 클릭되면 미리 작성해둔 search() 함수가 실행되도록 한다

<div class="top">
    <img src="movie_green.png" class="img_movie" onclick="search()">
</div>

 

 

02 CSS

---

img_movie 클래스를 지정해서 이미지 자체 크기를 지정하고 가운데 정렬을 해주기 위해 div로 묶어서 top 클래스를 따로 만들어서 text-align을 통해 가운데 정렬을 해주고 원하는 정도로 위치를 지정해준다.

.top {
    text-align: center;
    margin: 10px auto 10px auto;
}

.img_movie {
    width: 80px;
}

 

 

03 Javascript

---

로고를 클릭했을때 실행될 함수는 아래와 같다. 함수 안에는 검색을 하는 기능이 있지만 딱 필요한 부분만 적어두면 결국에는 영화목록을 TMDB로부터 api를 받아와서 다시 원래 페이지를 생성하도록 함수를 적용함으로써 새로고침과 같은 효과를 만들어주었다.

if(tf===0) {
                // 검색 버튼 클릭시 다시 원상태 복구, 검색한 입력값이 없을 경우
                // 영화 API 값을 가지고 와서 카드를 전부 추가
                for(let i = 0; i < 20; i++) {
                    fetch(url)
                    .then((res) => res.json())
                    .then((data) => {
                        movies.push(data["results"][i]["original_title"]);

                        let original_title = data["results"][i]["original_title"];
                        let overview = data["results"][i]["overview"];
                        let poster_path = data["results"][i]["poster_path"];
                        let img_url = "https://image.tmdb.org/t/p/original"+poster_path;
                        let vote_average = data["results"][i]["vote_average"];

                        let id = data["results"][i]["id"];
        
                        let temp_html = `
                            <div class="col" onclick="alert('영화 ID : '+${id})">
                                <div class="card h-100">
                                <img src="${img_url}" class="card-img-top" alt="..."/>
                                <div class="card-body">
                                    <h5 class="card-title" id="count">${original_title}</h5>
                                    <p class="card-text">${overview}</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-body-secondary">평점 : ${vote_average}</small>
                                </div>
                                </div>
                            </div>`;

                        document.querySelector('#card').insertAdjacentHTML('beforeend', temp_html);
                    });
                }
            }