클로리셔 작은 공간

requestAnimationFrame() 바닐라 자바스크립트로 애니메이션 개념잡기 간단하게 개념을 잡기위해 필요한 기본 HTML 코드는 버튼과 작은 박스 '#box' 를 준비했다. HTML click CSS button{padding: 10px 20px; margin: 50px; } #box{width: 300px; height: 300px; background: aqua;} 01. requestAnimationFrame() 이용해서 반복하는 스크립트 짜보기 JS const btn = document.querySelector('button'); const box = document.querySelector('#box'); let num = 0; btn.addEventListener("click", e ..

01. style(CSS) 속성값을 변경해보기 1) CSS 속성을 추가하기 - element.style.color * [ style.css속성명 ]은 기존 정의 된 style에서 새로운 속성 추가된다. Lorem ipsum dolor sit amet consectetur adipisicing elit. const text = document.querySelector("p"); text.style.color = "hotpink"; 2) CSS 속성 여러개 추가하기 - element.style.cssText * [ style.cssText ]는 기존 정의된 style 지우고, 새로운 속성으로 덮어쓴다. Lorem ipsum dolor sit amet consectetur adipisicing elit. co..

sort( ) / reverse( ) 함수로 순서 정렬하기 01. sort() : 알파벳 순서로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.sort(); console.log(names); // ['Andy', 'Chloe', 'David', 'Jake'] 02. reverse() : 역순으로 요소 정렬 const names = ["Chloe", "Andy", "Jake", "David"]; names.reverse(); console.log(names); // ['Jake', 'David', 'Chloe', 'Andy'] sort( ) 함수로 올림차순/내림차순 최소값/최대값 반환 sort((a, b) => {return a-b}) : ..

자바스크립트에 미리 포함 된 함수를 내장함수라 한다. 배열에 사용하는 반복문 내장함수에는 forEach() / map() 이 있는데 알아보자. forEach() / map() 에는 파라미터(인자)값이 3가지가 들어간다. ex) forEach( el, idx, arr ) el : 반복 돌고있는 대상 idx : 순서값 arr : 배열자체 1. forEach() const colors = ["red", "green", "blue"]; colors.forEach((el, idx, arr) => { //파라미터에는 3가지가 default.(반복도는 대상, 순서값, 배열자체 ) console.log(el); //red green blue console.log(idx); // 0 1 2 console.log(arr)..