1.학습한 내용

1)미디어 쿼리 작업

화면의 크기에 따라서 표현되는 이미지의 갯수를 조절하는것이 어떻냐는 제안을 받게 되어서 작업을 하게 되었다.

if(window.matchMedia("screen and (max-width: 768px)").matches){
        $(function(){
            $('.news-cont').hide(); 
            $('.news-cont').slice(0,4).show();  
            $('.load').addClass('firstClick')                       
        });
    }else if(window.matchMedia("screen and (max-width: 1024px)").matches){
        $(function(){
            $('.news-cont').hide(); 
            $('.news-cont').slice(0,6).show(); 
            $('.load').addClass('secondClick')
        });   
    }else if(window.matchMedia("screen and (max-width: 1920px)").matches){
        $(function(){
            $('.news-cont').hide(); 
            $('.news-cont').slice(0,8).show(); 
            $('.load').addClass('thirdClick')
        });       
    }

해당 코드를 입력하는것으로, 화면의 너비가 768이하면 4개, 1024이하면 6개, 1920 이하면 8개가 표시가 되도록 하고.

기존에 더보기 버튼에 firstClick 이라는 클래스를 넣었던 것을 없애고.
해당 너비에 따라서 클래스를 부여하도록 바꾸게되었다.

이에 따라서

 $('.load').click(function() {
        if($('.load').hasClass('firstClick')){
            const firstClicked = document.getElementById('firstClicked');            
            $(".news-cont").slice(4,6).show();              
            window.scrollBy({top: firstClicked.getBoundingClientRect().top,behavior:'smooth'});       
            $('.load').removeClass('firstClick').addClass('secondClick');            
        }else if($('.load').hasClass('secondClick')){
            const secondClicked = document.getElementById('secondClicked');
            $(".news-cont").slice(6,8).show();
            window.scrollBy({top: secondClicked.getBoundingClientRect().top,behavior:'smooth'});
            $(".load").removeClass('secondClick').addClass('thirdClick');  
        }else if($('.load').hasClass('thirdClick')){
            const thirdClicked = document.getElementById('thirdClicked');
            $(".news-cont").slice(8,10).show();
            window.scrollBy({top: thirdClicked.getBoundingClientRect().top,behavior:'smooth'});
            $(".load").removeClass('thirdClick');    
            $(".load").css({'display':'none'}); 
            $(".footer").css({'margin-top':"7%"});     
        }    
    });    

버튼의 기능을 조금 수정하게 되었다.
기존에는 7~8, 9~10 번째의 콘텐츠를 추가로 표시하던 부분을
가장 작은 768px 이하일때 4개가 나타났을때를 기준으로
5~6 번째의 콘텐츠를 추가로 표시하는 코드가 추가가 되었으며.

기존에 없었던 thirdClick 이라는 부분을 추가하게되었다.

2)이미지 추가 정리

768px 이하일때 화면의 폭을 맞추어서 1줄로 변경을 하도록 코드를 작성을 했었지만,
해당 부분이

769px 일때와 768px 일때가 너무 눈에 띄게 차이가 나게 되어서.

기존에 1줄로 표현하도록 미디어쿼리를 작성했던 부분을 주석처리를 하게 되었다.

해당 부분에 대해서는 주석처리를 함으로써 화면을 줄였을때 어색함이 사라졌지만, 이에 대해서는 팀원들과 상의를 해보아야 할듯하다.

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

화면의 너비에 따라서 보이는 콘텐츠의 갯수를 조정, 그리고 해당 너비에 따라서 더보기의 기능을 바꾸는 것에 대한 코드 정리가 힘들었다.

3.해결방법

인터넷에서 너비에 따른 if 스크립트에 대한 글과, 이전 원페이지에서 작업된 내용을 참고를 하여서 코드를 구현하는것이 성공하게되었다.

4.학습소감

처음 콘텐츠의 갯수를 조정을 하고 기능을 바꿀때는,if문을 사용하여서, 해당 너비에서 나왔을때 버튼의 기능을 바꾸어야하는 것인가?
라는 생각을 했지만.
실제로 그렇게 작성을 해보았을때 코드의 길이가 필요 이상으로 길어지게 되었기 때문에 분리를 하여 작업을 하는것으로 진행을 하게되었다.

이 과정에서 기존의 더보기 버튼의 경우에는 해당 버튼에 firstClick 이라는 클래스값을 html 코드내부에 입력을 했어야 했는데, 너비에 따라서 보여주는 콘텐츠의 갯수가 달라질때, 더보기 버튼에 addClass 를 통하여 부여를 하는것으로 분리를 하는것이 가능하였다.

이에 따라서 기존의 코드에서 5~6번째 콘텐츠가 숨겨져있을때 표현하는 코드를 작성하기만 하는것으로 원하는 기능을 구현할수 있게 되었다.

하지만 이 작업의 경우에는 콘텐츠의 값이 고정되어 있기때문에 가능한 일이었으며, 이러한 코드에 대해서 생각을 해보았을때, n번째와 같은 정해지지 않은 값을 대입하여 코드를 작성하는것이 분명 있을것이다. 해당 부분에 대해서 추가로 조사가 필요하다는 것을 느끼게 되었다.