Enjoy Programming

이번에는 css variable을 select해서 자바스크립트 이벤트로 변화를 줘보는 스타일을 구현해본다. 먼저 백그라운드 사이즈와 블러 그리고 컬러를 변화를 줄 수 있도록 세개의 input을 만들어서 값을 설정해주고 각각의 네임을 지정해준다. 그리고 dataset을 이용할 수 있도록 data-sizing을 지정해준다. 그리고 css variable을 만들어서 내가 적용할 부분에 각각 적용해 준다. 이제 자바스크립트로 셀렉트해서 변경만 해주면 되는데 queryselectorAll을 이용해 input을 모두 select해주고. forEach를 이용해서 이벤트 리스너를 적용해주는데 inputs는 array가 아니라서 map이 적용이 안된다. proto type을 보면 nodelist로 나온다. 뭐 sprea..

이번엔 자바스크립트 함수중 몇가지 함수를 살펴보자(배열에서 쓰이는) 1) Array.prototype.find() 이 함수는 주어진 함수를 만족하는 첫 번째 요소의 값을 반환한다. 없다면 undefined를 반환. find()함수 괄호 안의 매개 변수는 callback 함수가 오고 위 사진처럼 arrow function으로 무지 간단하게 함수가 구현되었다. es6이전의 방식이라면 이렇게 코드량이 많아진다. 자 좀더 설명하자면 find함수는 callback함수가 true를 반환할 때까지 해당 배열의 각 요소에게 callback함수를 실행한다. 만족하는 요소를 찾았다면 해당 요소를 즉시 반환하고, 못찾았다면 undefined를 반환한다. find는 호출대상인 배열을 mutate하지 않는다. 그리고 처리할 배..