1. 학습한 내용

• 함수를 만드는 부분이 일주일이 넘도록 막혀서 진전이 없다.

• 현재까지 확정적으로 만들어진 부분

if(matchMedia("screen and (max-width: 1217px)").matches){
    const list = document.querySelectorAll(".wraper-ul li");}

• 강의도 새로보고 유튜브도 찾아보면서 찬찬히 진행 중이지만 쉽지 않다

• css만으로 문제를 풀어내는게 가능할지에 대해 생각해보다가 할 수있는데까지 해보았다

/* animation fadeInDown */

@-webkit-keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      transform: translateY(-20px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
  @keyframes fadeInDown {
    0% {
      opacity: 0;
      -webkit-transform: translateY(-20px);
      -ms-transform: translateY(-20px);
      transform: translateY(-20px);
    }
  
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
      transform: translateY(0);
    }
  }
  
    .fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    animation-duration: 1.5s;
    }

section div img.sec5-image{
    animation-delay: 0.3s;
}


/* animation fadeInUp */
.animated{
    animation-duration: 1.5s;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
}
@-webkit-keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0,5%,0);
        opacity: 0;
        transform: translate3d(0,5%,0)
    }

    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}
   
@keyframes fadeInUp {
    0% {
        -webkit-transform: translate3d(0,5%,0);
        opacity: 0;
        transform: translate3d(0,5%,0)
    }
    to {
        -webkit-transform: translateZ(0);
        opacity: 1;
        transform: translateZ(0)
    }
}
.fadeInUp {
    -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp;
     animation-duration: 1.5s;
  }

• fadeinup, fadeindown 애니메이션 적용 후 각 클래스마다 딜레이 부여

section div ul li.li-1{
    animation-delay: 0.1s;
}
section div ul li.li-2{
    animation-delay: 0.2s;
}
section div ul li.li-3{
    animation-delay: 0.3s;
}
section div ul li.li-4{
    animation-delay: 0.4s;
}
section div ul li.li-5{
    animation-delay: 0.5s;
}
section div ul li.li-6{
    animation-delay: 0.6s;
}
section div ul li.li-7{
    animation-delay: 0.7s;
}
section div ul li.li-8{
    animation-delay: 0.8s;
}
section div ul li.li-9{
    animation-delay: 0.9s;
}

• 여기까지 진행하면서 버튼을 누를 때 숨겨져있는 요소들이 나타나면서 버튼은 사라지는 부분만 남게 되었다

• 이 부분은 어떻게 봐도 자바스크립트를 이용하지 않고는 효과부여가 되지 않아서 결국엔 다시 함수 부분을 찾게 되었다

• 마무리 되어가는 주가 되니 js부분을 공개해주셔서 만들어진 함수를 확인할 수 있었다

// 애니메이션
	// let ecoceImg = document.querySelector('.ecoce-img');
	// let fadeIn = document.querySelectorAll('#fadeInRight');
	// let indexKakaoMap = document.querySelector('.indexKakaoMap');

	// window.addEventListener("scroll", function() {
	// 	let value = window.scrollY;

	// 	if(value > 1900 && value < 3600) {
	// 		ecoceImg.style.animation = "fade-in-left 1s ease-in forwards";
	// 		indexKakaoMap.style.animation = "fade-in-left 1s ease-in forwards";
	// 		for(const fadeInRight of fadeIn) {
	// 			fadeInRight.style.animation = "fade-in-right 1s ease-in forwards";
	// 		}
	// 	}
	// });
	// document.querySelectorAll('.button').forEach(button => 
	// 	button.innerHTML = '<div><span>' + 
		// 	button.textContent.trim().split('').join('</span><span>') + 
			// 	'</span></div>');

			
			// 아이콘 8개
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
    $(function () {
        $(".columns").hide();
        var array = [];
        var list = document.getElementsByClassName('columns');

        for (var i = 0; i < list.length; i++) {
            array.push(list[i]);
        }

        var visiArray = [];
        visiArray = array.slice(0, 8);
        visiArray = visiArray.concat(array.slice(8, 16).reverse());
        visiArray = visiArray.concat(array.slice(16, 24));

        var second = 0;
        for (var i = 0; i < visiArray.length; i++) {
            second = second + 0.1;
            visiArray[i].setAttribute('data-wow-delay', second + 's')
            visiArray[i].style.display = 'block';
        }

        var load = document.getElementsByClassName('button')[0];
        //숨겨진 아이콘
        load.addEventListener('click', function (e) {
            e.preventDefault();
            var hiddenArray = [];
            hiddenArray = array.slice(24, 27);
    
        var hSecond = 0;
        for (var i = 0; i < hiddenArray.length; i++) {
            hSecond = hSecond + 0.1;
            hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
            hiddenArray[i].style.display = 'block';
        }
        load.style.display="none";
    
window.scrollTo(0, window.pageYOffset + 1);
window.scrollTo(0, window.pageYOffset - 1);
        
// if (document.querySelectorAll('.customer_list[style="display:none;"]').length == 0) {
// 	load.style.display = "none";
// }
        });
    });
}


// 아이콘 4개
if (window.matchMedia("screen and (max-width: 940px)").matches) {
    $(function () {
        $(".columns").hide();
        var list = document.getElementsByClassName('columns');
        var hiddenArray = [];
        var openArray = [];
        $(".columns").slice(0, 12).show();
        for (var i = 0; i < list.length; i++) {
            if (list[i].style.display == "none") {
                hiddenArray.push(list[i]);
            } else {
                openArray.push(list[i]);
            }
        }
        // 보여진 아이콘
        var second = 0
        for (var i = 0; i < openArray.length; i++) {
            second = second + 0.1
            openArray[i].setAttribute('data-wow-delay', second + 's');
        }
        //숨겨진 아이콘
        var hSecond = 0;
        $(".button").click(function (e) {
            e.preventDefault();
            for (var i = 0; i < hiddenArray.length; i++) {
                hSecond = hSecond + 0.1;
                hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
                hiddenArray[i].style.display = 'block';
                if ($(".columns:hidden").length == 0) {
                    $(".button").hide();
                }
            };
        });
        window.scrollTo(0, window.pageYOffset + 1);
        window.scrollTo(0, window.pageYOffset - 1);
    })
}
function preventClick(e){
    e.preventDefault()
}

• 만들어진 함수를 보았지만 처음 부분이나 일부를 제외하고는 이해하는 것도 쉽지 않았다

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

• 함수부분들의 기본적인 사항들을 많이 반복했지만 어떻게 실제로 적용하는가에 대한 부분이 심각히 이해가 부족하다

3. 해결방법

• 실제로 적용되는 부분들의 클론코딩들을 여러 가지 해보면서 각 코드들에 대한 해석과 이해가 필요한 것 같다
• 지금은 봐도 잘 모르겠는 수준이다보니 사실 내가 스스로 전부 만드는 건 힘든 것 같다
• 일단은 클론 코딩과 여러가지 강의 영상들을 보면서 좀 더 함수를 짜는 걸 연습하고 실 적용법을 익힐 필요가 있을 것 같다

4. 학습소감

• 코딩 하는 걸 배우면서 이건 공부만하면 알 것 같다라는 생각들이 많았는데, 함수 부분은 진짜 쉽지 않은 것 같다
• 외국어를 처음 접하고 배우는 느낌이라 막막하기 그지 없을 정도, 그래도 한 번, 두 번 완성하다보면 이것도 익숙해지는 순간이 오지 않을까라는 기대를 가지고 계속 해야겠다