본문 바로가기
반응형

분류 전체보기456

[JS] 함수 function random(min, max) { // `.toFixed()`를 통해 반환된 '문자 데이터'를, // `parseFloat()`을 통해 소수점을 가지는 '숫자 데이터'로 변환 return parseFloat((Math.random() * (max - min) + min).toFixed(2)) } // 부유하는(떠 다니는) 요소를 만드는 함수 function floatingObject(selector, delay, size) { gsap.to( selector, // 선택자 random(1.5, 2.5), // 애니메이션 동작 시간 { delay: random(0, delay), // 얼마나 늦게 애니메이션을 시작할 것인지 지연 시간을 설정. y: size, // `transform: tr.. 2023. 10. 22.
[JS] forEach const myArr = [1, 2, 3, 4, 5]; myArr.forEach((currentElement, index, array) => { console.log(`요소: ${currentElement}`); console.log(`index: ${index}`); console.log(array); }); 위 코드를 실행한 결과는 다음과 같다. 2023. 10. 22.
[JS] addEventListener addEventListener() document의 특정요소event를 등록할 때 사용합니다. [ 자주 사용하는 이벤트의 종류 ] click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover – 마우스를 HTML요소 위에 올리면 발생한다. mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다. mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다. mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다. focus – HTML요.. 2023. 10. 22.
[JS] querySelector querySelector함수를 이용해서 html에 있는 요소를 불러올 수 있다. [js] const searchEl = document.querySelector('.search') const searchInputEl = searchEl.querySelector('input') // 검색창 요소를 클릭하면 실행. searchEl.addEventListener('click', function () { searchInputEl.focus() }) // 검색창 요소 내부 실제 input 요소에 포커스되면 실행. searchInputEl.addEventListener('focus', function () { searchEl.classList.add('focused') searchInputEl.setAttribut.. 2023. 10. 22.
반응형