react (2) 썸네일형 리스트형 [React] 영화 장르별 필터링, 내림차순 오름차순 정렬 리액트 독학중. [MoviePage.jsx]일단 인기순 정렬은 드롭다운(부트스트랩)에 넣었다.장르정렬은 API에서 가져온 데이터들 map으로 돌려서 버튼 하나하나 '컴포넌트'로 만들어서 div박스에 넣었다.버튼을 클릭하면 색이 밝아지고 한번 더 클릭하면 다시 색 어두워지게 하였다. // 정렬,필터 상태 관리 const [sort, setSort] = useState(0); // 드롭박스 const [genreBtnIds, setGenreBtnIds] = useState([]); // 누른 버튼 장르 배열 const [filteredMovies, setFilteredMovies] = useState([]); // 필터 된 데이터 // 영화 및 장르 데이터 가져오기 const { data,.. [CSS] 반응형, display:flex, align-items, justify-content 오늘 Netflix 홈페이지를 만들면서 막혔던 부분에 대해 정리해보고자 한다.잊어먹지 말자!! [MoviePage.jsx] 해상도를 줄였을때 (900px쯤 부터) 저 Dropdown박스옆에 공간이 남았다. (참고로 Bootstrap , 사용함)보아하니 width-max값이 700px정도로 고정값으로 들어가있었다.@media (min-width: 768px) { .main-container { max-width: 100%; }}태그에 className을 주고 CSS파일에서 넣은 코드. [MoviePage.jsx] 오른쪽 끝에 있는 삼각형이 글씨랑 붙어있고 크기도 작아서 수정하고 싶었다..dropdown-box { width: 100%; border: 1px solid white; back.. 이전 1 다음
