위에 결과물과 같은 웹 프론트 상에서 움직이는 배경을 구현해보겠습니다. 이번 글을 통해 배워갈 내용 자바스크립트 없이 HTML, CSS 만을 가지고 움직이는 배경을 만들어 보겠습니다. HTML은 다음과 같이 작성하였습니다. 김씨의 블로그 하트 뿅뿅 CSS 는 다음과 같이 작성하였습니다 * { margin: 0; padding: 0; } /*Keyframes*/ @keyframes rain_effect { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 400px 800px, 300px 300px, 200px 200px; background-color: #FF69B4} 100% {background-position..
이번 글을 통해 배워갈 내용 자바스크립트로 Object destructuring(객체 비구조화) 해보기 여기 감자가 있습니다 정확하게 이야기 하면 음식 객체입니다. ㅋㅋㅋㅋ 음식 객체의 코드는 다음과 같습니다. // 감자 객체 let food = { name: "감자", price: 1000, owner: "김씨", where: "김씨뱃속" } 음식 객체의 이름은 감자 가격은 1000 (원) 주인은 김씨 위치는 김씨 뱃속입니다. 감자 객체를 출력해보겠습니다. //오브젝트를 출력하려면 앞에 food를 입력해야 하는데 귀찮습니다. console.log(food.name); // 감자 console.log(food.price); // 1000 console.log(food.owner); // 김씨 출력하는데 ..
이번 글을 통해 배워갈 내용 등속 원운동의 x 좌표와 y좌표를 프로그래밍으로 계산하기 자바스크립트로 구하는 등속원운동은 다음과 같습니다. //시간차에 따른 각도 IntervalVal = (IntervalVal + Math.PI / 360) % (Math.PI * 2); // x 와 y 축을 (3,15,3)을 기점으로 도는 중 camera.position.x = camPosModifierX + 3 * Math.sin(IntervalVal* 1.5); camera.position.y = camPosModifierY + 15 * Math.cos(IntervalVal* 1.5); camera.position.z = camPosModifierZ + 3; 행성들을 웹사이트로 구현하다가 구했네요 ㅎㅎ 등속 원운동도 ..
이번 글을 통해 배워갈 내용 자바스크립트로 구하는 페이지 최대 스크롤 값 자바스크립트로 구하는 페이지 최대 스크롤 값은 다음과 같습니다. // scroll 최대 값 const limitVal = Math.max( document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight ); 한참을 검색해도 안 나왔는데 다행히도 스택오버플로우에서 찾아서 배웠습니다. 출처 및 인용 https://stackoverflow.com/questions/17688595/finding-t..
