8/11 개발일지

1. 학습한 내용

스크립트 파일 정리, css파일 정리 및 분할 : 최적화 작업

$(document).ready(function(){
    const more = 'more'; 기존것에서 변수로 불러오는 횟수 감소 시키기
    const close = 'close';
    const boximg = '.box img';
    const up = '.up'
      if(window.matchMedia("screen and (max-width: 768px)").matches)
        $(function () {
        $(boximg).hide();        
        $(boximg).slice(0,4).show();
        });
      if(window.matchMedia("screen and (max-width: 480px)").matches)
        $(function () {
        $(boximg).hide();        
        $(boximg).slice(0,1).show();
        });
      
      $('.arrow').click(function (){
         if($(up).hasClass(more)){
            $(up).addClass(close).removeClass(more);
            if(window.matchMedia("screen and (max-width: 480px)").matches)
            {
              $(boximg).slice(1,10).hide();
              let location = document.querySelector('#certi').offsetTop;
              $('html,body').animate({scrollTop:location},0);
            }else
            {
              $(boximg).slice(4,10).hide();
              let location = document.querySelector('#certi').offsetTop;
              $('html,body').animate({scrollTop:location},0);
            }
         }
         else if($(up).hasClass(close)){
            $(up).removeClass(close).addClass(more);
            if(window.matchMedia("screen and (max-width: 480px)").matches)
              $(boximg).slice(1,10).show();
            else
              $(boximg).slice(4,10).show();
        }
      });
  
    $(window).resize(function() {
      if($(window).width() > 768){
          $(".arrow").css('display',"none");
          $(boximg).slice(0,10).show();
      }else
          $(".arrow").css('display',"block");
   
     if($(window).width() < 768){
        $(boximg).slice(4,10).hide();
        $(up).addClass(close).removeClass(more);
     }
  
     if($(window).width() > 480){
        $(boximg).slice(0,4).show();
     }
  
     if($(window).width() < 480){
        $(boximg).slice(1,4).hide();
        $(up).addClass(close).removeClass(more);
     }
    });
  
    $(document).ready(function(){
      const menu = '.so';
      const fadeOut = 'magictime fadeOut';
      const fadeIn = 'magictime fadeIn';
      const more = 'more';
      const close = 'close';
      $('.ham').click(function() {
          if($(menu).hasClass(more)){
      $(menu).addClass(fadeOut);
      setTimeout(function() { $(menu).addClass(close).removeClass(more);}, 500);
          }
      else if($(menu).hasClass(close))
      $(menu).removeClass(fadeOut);
      $(menu).addClass(fadeIn);
      $(menu).addClass(more).removeClass(close);
      });
    });
  });

압축 전

압축 후

그 밖에 세세한 미디어 쿼리 및 css 수정

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

x

3. 해결방법

x

4. 학습소감

멘토링을 통해 잊고있거나 신경쓰지 못한 부분을 알아채며 채워나가는 시간을 가짐으로서 '아! 이런 것도 필요하구나'를 느끼고 직접 다시 확인하면서 경험으로 이루어지는 과정이 좋은 것 같습니다!