8/4 개발일지

1. 학습한 내용

특허&인증 파트 미디어 쿼리(max-width = 768px) 시 버튼으로 사진 더 나오게 하기 추가

특허&인증 파트 미디어 쿼리(max-width = 430px) 시 버튼으로 사진 더 나오게 하기 추가

간단하게 hide와 show를 사용해 구현을 하고 아이콘을 받아서 더보기 버튼을 만들어 구현 하였습니다. 그리고 short버튼을 누를 시 scrolltop을 이용해 위로 다시 스크롤을 올리게 하였습니다.

 $(document).ready(function(){
    if(window.matchMedia("screen and (max-width: 768px)").matches)
    $(function () {
     $('.box img').hide();        
     $('.box img').slice(0,4).show();
   
     $('.arrow').click(function(){
       if($('.up').hasClass('more')){
     $('.up').addClass('close').removeClass('more');
     if(window.matchMedia("screen and (max-width: 430px)").matches)
     {
      $('.box img').slice(1,10).hide();
      $('html,body').animate({scrollTop:1200},800);
     }else
     {
     $('.box img').slice(4,10).hide();
     $('html,body').animate({scrollTop:1350},800);
     }
       }
     else if($('.up').hasClass('close')){
     $('.up').removeClass('close').addClass('more');

     if(window.matchMedia("screen and (max-width: 430px)").matches)
      $('.box img').slice(1,10).show();
      else
     $('.box img').slice(4,10).show();
     }
     });
    });

    if(window.matchMedia("screen and (max-width: 430px)").matches)
    $(function () {
     $('.box img').hide();        
     $('.box img').slice(0,1).show();
    });
   });

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

x

3. 해결방법

x

4. 학습소감

지금까지 해온 것을 종합하여 생각대로 짜다보니 어렵지 않게 구현할 수 있었습니다.
이처럼 더욱 배워서 다른 것을 하더라도 쉽게 로직이 머리 속으로 짤 수 있게 되었으면 좋겠습니다.