1월 4일 (화) Final Project [4주 프로젝트] (contents page 선택에 따른 UI 재배치, 캐로셀)

남이섬·2022년 1월 4일

contents page CSS

검색창 안에 버튼 넣기 (absolute)

.search_input {
  position: absolute;
  margin-top: 1em;
  margin-left: 50%;
  width: 35em;
  height: 3em;
  border-radius: 2em;
}

.search_btn {
  position: absolute;
  margin-top: 0.8em;
  margin-left: 71.5%;
  border: none;
  background-color: white;
  font-size: 1.3em;
}

검색창 안의 커서 이동

커서중앙

text-align: center;

설정하고자 하는 위치

위치 변경
padding-left: 1.5em;
패딩을 주면 된다

캐로셀(Carousel)

참고 사이트
https://www.npmjs.com/package/react-slick

https://react-slick.neostack.com/

https://bit.dev/akiran/react-slick/slider?example=5cc70767c7e7de0015a7db87

http://react-responsive-carousel.js.org/

옵션
slide: 'div', //슬라이드 되어야 할 태그 ex) div, li
infinite : true, //무한 반복 옵션
slidesToShow : 4, // 한 화면에 보여질 컨텐츠 개수
slidesToScroll : 1, //스크롤 한번에 움직일 컨텐츠 개수
speed : 100, // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
arrows : true, // 옆으로 이동하는 화살표 표시 여부
dots : true, // 스크롤바 아래 점으로 페이지네이션 여부
autoplay : true, // 자동 스크롤 사용 여부
autoplaySpeed : 10000, // 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (ms)
pauseOnHover : true, // 슬라이드 이동 시 마우스 호버하면 슬라이더 멈추게 설정
vertical : false, // 세로 방향 슬라이드 옵션
prevArrow : "<button type='button' class='slick-prev'>Previous</button>", // 이전 화살표 모양 설정
nextArrow : "<button type='button' class='slick-next'>Next</button>", // 다음 화살표 모양 설정
dotsClass : "slick-dots", //아래 나오는 페이지네이션(점) css class 지정
draggable : true, //드래그 가능 여부
    responsive: [
      // 반응형 웹 구현 옵션
      {
        breakpoint: 960, //화면 사이즈 960px일 때
        settings: {
          //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
          slidesToShow: 3,
        },
      },
      {
        breakpoint: 768, //화면 사이즈 768px일 때
        settings: {
          //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
          slidesToShow: 2,
        },
      },
    ],

현재 진행 단계

풀어야할 문제

현재 버튼 부분에 CSS 적용이 안된다

더미데이터에서 이미지 가져와서 적용 해보기

싸이즈 재 배치

컨텐츠 router

router.get("/contents", null); // 컨텐츠 전체 불러오기
router.get("/contents/:category", null); // 컨텐츠 카테고리 필터링
router.get("/contents/:category/:type", null); // 컨텐츠 카테고리&타입 필터링
router.get("/contents/:id", null); // 컨텐츠 하나 선택