wecode 5주차_2일 TIL_프로젝트 시작

롤링이미지

돌아가는 화면을 Carousel Slider라고 하더라… Carousel이라는 단어를 찾아보니 회전목마, 관람차, 회전그네 같은 돌아가는 놀이기구를 가리키는 모든 말이였다 ㅋㅋㅋ 여튼…

찾아보면 자료가 참 많은데 나는 nuka씨가 만든 라이브러리를 활용했다

yarn add nuka-carousel 추가하면 <Carousel> 컴포넌트를 사용할 수 있다. (내가 라이브러리 받으면 끝인줄 알았는데 팀원 모두가 설치해야 하므로 꼭꼭 공유해야 한다!)

라이브러리 처음 써보는거라 두근두근 했는데 그냥 갖다 붙이니까 되네???? 넘나 신기한것 드래그 하거나 next 혹은 prev 버튼을 클릭하면 사진이 바뀐다! 오예

일단 잘 나오긴 하는데… 영역을 너무 차지한다는게 문제다 그래서 Home의 div들에 margin-auto를 줬더니 폭이 조절되네???

사이즈 줄어드니까 훨씬 깔끔해졌다 여튼

div를 잘 나누시오

  <>
      <div className="home_recipe_wrapper">
        <div className="home_recipe_container">
          <div className="home_recipe_img_container">
            <img src={require("../../img/toppokki.jpg")} alt="grill"></img>
          </div>
          <div className="home_recipe_words_container">
            <h4 className="home_recipe_category">한식</h4>
            <h2 className="home_recipe_name">떡볶이</h2>
          </div>
        </div>
      </div>
    </>

겉으로 보기에 문제 없어보이는 코드였다.. 나름 div는 누구보다 빠르게 남들과는 다르게 색다르게 비트위에 리듬을 타면서 나눌수 있다고 자부했는데… 화면에 뜨는걸 보면

띠 to the 용 ~ div 잘 묶은줄 알았는데 아니였다. 다시 도전.

   <>
      <div className="home_recipe_wrapper">
        <div className="home_recipe_container">
          <div className="home_recipe_img_container">
            <img src={require("../../img/toppokki.jpg")} alt="grill"></img>
            <div className="home_recipe_words_container">
              <h4 className="home_recipe_category">한식</h4>
              <h2 className="home_recipe_name">떡볶이</h2>
            </div>
          </div>
        </div>
      </div>
    </>

다시 이렇게 성공쓰