1. 학습한 내용

 <HTML에 태그를 동적으로 넣는 단계>

 1. 원하는 태그를 생성 => 내가 원하는건 태그를 생성
let 변수이름 = document.createElement('태그');

let list = document.createElement('li');

 2. 새롭게 만든 태그에 속성과 값을 부여
생성한 태그변수.setAttribute('속성', '값')

 3 .속성까지 부여해준 태그를 지정된 태그의 자식 태그로 넣는다
부모태그.appendChild(생성한 태그변수);

1. 동적으로 추가할 태그가 자식태그로 들어갈 부모 태그의 객체를 불러와서 변수에 저장
2. HTML에 새로 추가할 태그를 createElement('태그이름')으로 만들고 변수 저장
3. 만들어진 태그에 .setAttribute('속성','값').innerHTML='태그사이에 들어갈 내용'을 이용
태그에 원하는 속성과 값, 태그 사이에 드어갈 내용을 부여해 준다
4. appendChild(새로 만들어진 태그)로 부모 태그 내부에 새로 만들어진 태그를 자식변수로 넣는다

• 현재 HTML과 css는 완성

• 자바스크립트 함수를 통해 만들고자 하는 것

• 총 27개의 아이콘에서 1217px때 8개씩 3개줄로 표현하고 나머지 3개는 버튼을 활성화시켜 클릭시 나타나게 , li태그 자체에 있는 이미지와 p태그를 동시에 가져와서 하나의 요소로 묶어서 배열화한 뒤에 8개씩 2줄로 나타대고 나머지는 버튼을 클릭 시 나머지 부분이 보일 수 있게, 버튼은 히든 (이 과정을 940px에서 하나 더 만듦, 아이콘 4개씩 6줄, 나머지 과정 동일)

• 멘토님에게 들은 조언
  => 새로운 태그를 만들어서 우선 변수 저장하고 클래스를 추가해서 함수를 구성하면 된다

• 원래 존재하는 li태그에서 가지고 있는 요소를 하나의 배열화 시켜서 숫자 색인을 붙여서 구현 순서, 딜레이 등을 주려는 함수를 만드려는 건데

• 솔직히 아직도 함수 자체에 대한 이해도도 부족한데, 멘토님의 조언이나 참고될 만한 글들을 봐도 전혀 이해가 안됨..

• 함수 만드는 부분에 1줄을 만들지도 못하고 일주일 째 막혀있기만 하니, 솔직히 어떻게 해야 하나 싶기도 함

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

• HTML, CSS를 완성 후 일주일을 함수 하나만 파고 있는데, 전혀 진도가 나가지 않음.
• 솔직히 뭘 어떻게 건드리고 봐야할지 감이 잡히지 않음
• 스크롤 애니메이션을 구성하는 함수를 따온게 있는데 그 요소들을 어떤식으로 왜 구성되는지 찾아보는게 도움이 될까 싶음
• 뭘 하면서 이렇게 까지 답답한 적이 처음인 것 같음. 내가 해결하지 않으면 안된다는 것도 이해하고 있어서 더욱 답답함

3. 해결방법

• 시간을 갈아넣어서 부딫혀 보는 중
• 시간만 흐르고 솔직히 답답하긴 함. 나만 이런가, 싶기도 함.
• 팀원들 대부분 다른 파트들이 마무리 되어가고 있어서 도움을 받을 수 있을 것 같음
• 어떻게든 이해하고야 만다는 오기까지 생기는 중..

4. 학습소감

• 포기만 안하면 된다.

if(matchMedia("screen and (max-width: 1217px)").matches){

        let Arr  = document.getElementsByClassName("columns");
        let list = [Arr];
        
        for (var i=0; i<list.length; i++){
            array.push(list[i]); 
        }   // 여기서 만들어진 배열을 가져와서
        
        var Array1 = [array];
        Array1 = Array1.slice(0, 8); 
        Array1 = Array1.concat(array.slice(8, 16).reverse(array)); 
        Array1 = Array1.concat(array.slice(16, 24));
    
        var second = 0;
        for (var i=0; i<Array1.length; i++){
            second = second + 0.1;
            Array1.setAttribute('data-wow-delay', second + 's')
            Array1.style.display = 'block';
        }
    
        var button = document.getElementsByClassName('button')[0];
        button.addEventListener('click', function(e){
           e.preventDefault();  //링크의 동작을 막아준다
           var hiddenArray = [];
           hiddenArray =array.slice(24, 27);
           button.style.Transform = `hidden`
        });
    }
    ```