1) 학습한 내용

etc 부분 작업

etc 부분은 오랜 고민 끝에 이전에 작업했었던 부분을 발췌해서 살짝 변형시켜서 올렸다. 발췌했던 부분의 코드는 이전 슬라이드에서 사용되었던 코드다.

etc에 사용된 코드들

etc에 쓰인 코드

#etc{
    margin:0 auto;
    width: auto;
    height: auto;
    margin-bottom:200px;
}
#etc .main_title{
    margin-left:12%;
}
#etc .sub_title{
    margin-left:12%;
}
.container_slider {
    max-width: 100%;
    clear: both;
    margin:0 auto;
    margin-left:10%;
    margin-right:10%;
    
  }
  .container_slider .slide_box{
    overflow: hidden;
  } 
  .slide_box .slide_list {
    background-color: #fff;
    box-sizing: border-box;
  }
  .slide_box .slide_list .slide_list_item{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 5% 37.5px;
    box-sizing: border-box;
  }
  .slide_box .slide_list_item:hover img{
    transform: scale(1.2);
  }
  .slide_box img {
    width: 100%;
    transform: scale(1);
    transition: transform .3s;
    object-fit: contain;
  }

자바스크립트에 쓰인 코드

$(function(){
  $('.slider-div').slick({
      slide: 'div',		//슬라이드 되어야 할 태그 ex) div, li 
      infinite : true, 	//무한 반복 옵션

      slidesToShow : 5,		// 한 화면에 보여질 컨텐츠 개수
      slidesToScroll : 1,		//스크롤 한번에 움직일 컨텐츠 개수
      speed : 500,	 // 다음 버튼 누르고 다음 화면 뜨는데까지 걸리는 시간(ms)
      //arrows : true, 		// 옆으로 이동하는 화살표 표시 여부
      //dots : true, 		// 스크롤바 아래 점으로 페이지네이션 여부
      autoplay : true,			// 자동 스크롤 사용 여부
      autoplaySpeed : 1400, 		// 자동 스크롤 시 다음으로 넘어가는데 걸리는 시간 (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 : 적용할 화면 크기 px
          {  
          breakpoint: 1527, 
          settings: {
              //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
              slidesToShow:4
          } 
          },
          {  
              breakpoint: 1080, 
              settings: {
                  //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                  slidesToShow:3
              } 
          },
          { 
              breakpoint: 824, 
              settings: {	
                  //위에 옵션이 디폴트 , 여기에 추가하면 그걸로 변경
                  slidesToShow:2
              } 
          }
         
      ]

  });
});

그 외.

wow.min.js

animate.css

참고하면 좋은 영상

캐러셀 슬라이드 만들기

2) 학습내용 중 어려웠던 점

etc에 사용했었던 코드는 이전 팀 프로젝트에서 사용했었던 코드라서 디자인 시안에 맞게 바꾸는 작업이 오래걸렸다. 개인적으로, 소스코드 새로 작성하는 것 다음으로 어려웠던 것이 기존의 소스코드를 바꾸는 것이었다.

3) 해결방법

이전 프로젝트에 사용했던 소스코드를 따와서 재활용했었다. 알기 쉽게 말하자면, 내가 언리얼 엔진의 소스코드를 가져와서 그걸 변형시킨 셈이다.

4) 학습소감

캐러셀 슬라이드를 만드는데 들인 시간과 비용을 생각하면 내가 한 것은 소스코드를 가져와서 그걸 변형시켜서 사용한 것이다. 본래는 5개를 차례로 나타나게 하는 것을 생각했지만 내가 자바스크립트를 공부하고 나서 과제를 해결하는 것과 기존에 사용했던 소스코드를 가져와서 변형시켜서 내놓은 것을 생각하면 이것은 재탕인 셈이다.