페이지 이동 See the Pen aTag href by taewok (@taewok) on CodePen. E-mail보내기 See the Pen aTag E-mail by taewok (@taewok) on CodePen. 마치며 혹시 잘못된 정보나 궁금하신 게 있다면 편하게 댓글 달아주세요. ...

프로젝트 생성하기 1. cmd 명령 프롬프트 cmd 명령 프롬프트에 프로젝트를 생성할 폴더 경로에 들어가준다. 나는 준비해놓은 폴더 이름을 SAMPLE로 해줬다. ex> cd C:\Users\PC_1M\OneDrive\바탕 화면\SAMPLE npx create-react-app [프로젝트 이름] --template ty...

ScrollTrigger란? scroll 위치에 맞춰서 애니메이션을 실행시키고 싶은 경우 gsap 의 scrollTrigger을 사용하면 보다 쉽게 구현이 가능하다! 기본 Setting ✅ gsap setting cdn 파일로 불러오기 <script src="https://cdnjs.cloudflare.com/ajax/libs/g...

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() 함수를 사용하고 취소할 떄 사용하는 함수 ...