[영화 앱 2] 인기작품, 최고평점, 예정작품 별 영화 목록 구성 및 해당 위치로 스크롤

 

 

import "./App.css";
import MovieList from "./components Navbar/MovieList/MovieList";
import Navbar from "./components Navbar/Navbar/Navbar";
import Fire from "./assets/fire.png";
import Star from "./assets/glowing-star.png";
import Party from "./assets/partying-face.png";

function App() {
  return (
    <>
      <div className="app">
        <Navbar />
        <MovieList type="popular" title="인기작품" emoji={Fire} />
        <MovieList type="top_rated" title="최고평점" emoji={Star} />
        <MovieList type="upcoming" title="예정작품" emoji={Party} />
      </div>
    </>
  );
}

export default App;

 

 

 

 

 

 

 

 

 

 

 

 

 

각 섹션에 id 를 type으로 주어서 위의 네브바에 있는 <인기작품, 최고평점, 예정작품> 을 선택하면

해당 스크롤 위치로 이동하게끔 만들거임 

 

 

 

 

 

 

 

이렇게되면 스크롤이 좀 길어진다. 

그래서 네브바의 원하는 메뉴를 클릭하면 

해당 메뉴에 맞는 스크롤 위치로 이동하게 만들거임

아까 섹션에서 설정했던 id값으로 네브바에 지정한다. 

 

 

 

 

그리고 Index.css에  *하단에 html태그 css넣음

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.3s ease-in-out;
}

/* 스크롤 css */
html {
  scroll-behavior: smooth;
}

 

 

예정작품 클릭 시 예정작품 섹션으로 이동한다.