본문 바로가기

분류 전체보기69

[JS] 클래스 - 생성자 함수 (prototype) 다음과 같이 여러 번 비슷한 코드가 반복되는 경우 생성자 함수를 사용할 수 있다. 생성자 함수란 new키워드를 사용하는 함수이다. const flyda = { firstName: 'Flyda', lastName: 'Yang', getFullName : function () { return `${this.firstName} ${this.lastName}` } } console.log(flyda.getFullName()) const amy = { firstName: 'Amy', lastName: 'Hwang', getFullName : function () { return `${this.firstName} ${this.lastName}` } } console.log(amy.getFullName()) cons.. 2022. 4. 15.
[JS] 데이터 타입 확인 함수 실습 내용 프로젝트에서 데이터 타입을 확인하는 함수를 js파일로 작성한 뒤 import로 가져와서 사용하는 방법을 실습한다. 코드는 다음과 같다. html 파일 hello!! main.js 파일 console.log(typeof "hello dada") console.log(typeof 123) console.log(typeof true) console.log(typeof undefined) console.log(typeof null) console.log(typeof {}) console.log(typeof []) 크롬의 개발자 도구 콘솔 창을 살표보면, 먼저 main.js 파일에서 typeof를 통해서 각 데이터의 타입을 확인할 수 있다. 하지만. typeof의 경우 null, object, arra.. 2022. 4. 14.
[JS] Uncaught typeError: Failed to execute 'scrollTo' on 'window': the provided value is not of type 'scrollToOptions'. 해결방법 1. 발생 에러 gsap으로 scrollTo를 이용하여 페이지 하단에서 위로 화살표를 클릭하면 자동으로 최상단으로 스크롤이 되는 기능을 개발하다가 다음과 같은 에러가 발생했다. 2. 코드 에러가 발생한 코드 부분은 다음과 같다 먼저 HTML 코드는 다음과 같다. arrow_upward css코드 다음과 같다. #to-top{ width: 42px; height: 42px; background-color: #333; color: #fff; border: 2px solid #fff; border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 30p.. 2022. 4. 13.
[CSS] CSS 변환_ Transform, perspective, backface-visibility CSS 변환 1. Transform AB 함수를 띄어쓰기로 구분해서 여러가지 효과를 줄 수 있음 transform : 변환함수1 변환함수2 변환함수3 ...; 사용할 수 있는 함수의 종류 trnasform : 원근법 이동 크기 회전 기울임; 1-1. 2D 변환 함수 transform: translate(x,y) 이동(x축, y축) px transform: translateX(x) 이동(x축) px transform: translateY(y) 이동(y축) px transform: scale(x,y) 크기(x축, y축) px transform: rotate(degree) 회전(각도) deg ex)transform: rotate(45deg) transform: skewX(x) 기울임(x축) deg ex) tr.. 2022. 4. 7.