Gsap이란? GreenSock Animation Platform의 약자이며 쉽게 사용할 수 있는 아주 강력한 타임라인 기반의 자바스크립트 애니메이션 라이브러리이다. 가볍고 사용방법이 쉽다. Setting 방법1 CDN 파일로 가져오기 간편하게 코드 한줄을 추가해주면 된다. <script src="https://cdnjs.clou...

text를 …처리 하는 이유 상황에 따라 text가 다 보이는 것 보다 생략 처리를 하여 궁굼증을 유도할 수 있다. …처리하기 App.css .container{ margin: 20px; width: 200px; background-color: bisque; } App.js import React from "re...

파비콘이란? 파비콘이란 아래 이미지와 같이 웹사이트 또는 웹 페이지를 대표하기 위해 웹 브라우저에서 사용되는 16x16 픽셀의 작은 이미지이다. 파비콘 변경하기 원하는 이미지 파일을 public 폴더에 넣어준다 그리고 index.html 파일로 이동해준다. 그럼 아래와 같은 코드가 포함되어 있을텐데 끝에 부분을 원하는 이미지 이름으로 변경한다....

slice() 함수란? slice() 함수는 배열에서 원하는 범위를 복사한 새로운 배열 을 만든다. 원본 배열이 그대로 보존되야 하는 상황에서 주로 사용한다. 배열에 0번쨰부터 2번쨰 index를 복사하는 코드 const array = ["a","b","c","d","e"]; const start = 0; const last = 3;...

배열 앞쪽 값 추가 unshift() 배열에 앞쪽에 값을 추가해준다. const array = [1, 2, 3]; array.unshift(4); console.log(array); // [4, 1, 2, 3] 배열 뒤쪽 값 추가 push() 배열에 뒤쪽에 값을 추가해준다. const array = [1, 2, 3]; arr...

styled-components 설치 npm i styled-components 타입스크립트일 경우 추가 설치 npm i -D @types/styled-components props 전달 props로 animation 실행 딜레이를 다르게 준다. const Answer = () => { return ( &lt...

setTimeout() 이란? 일정 시간 후에 특정 코드, 함수를 실행하고 싶을 때 사용하는 함수 1000 = 1초 뒤에 실행 setTimeout(()=>{ console.log("HI~"); },1000); //1초뒤 HI~ clearTimeout() setTimeout() 함수를 사용하고 취소할 떄 사용하는 함수 ...

사용 상황 Html 요소에 css animation을 주고 싶을떄 className을 추가해서 animation을 동작시킨다. classList 공백으로 구분된 문자열인 element.className을 통해 엘리먼트의 클래스 목록에 접근하는 방식을 대체하는 간편한 방법이다. add 이미 있는 class명은 자동으로 중복제외 된다. ...

문제 발생 className이 input 요소들에 color를 바꾸려는데 에러 발생 const input = document.querySelectorAll(".input"); input.style.color = "red"; Error: style부분에서 발생 - Property ‘style’ does not exist on type ...

타입 선언 number 숫자(정수, 실수, infinity, NaN) const data: number = 22; string 문자열 const data: string = "나나"; object 객체형(참조형) const data: object = { name:"나나", age:22 }; ...