본문 바로가기

카테고리165

[firebase] firebase init 명령어 오류 : 이 스크립트를 실행할 수 없으므로.... 이 글은 기본 에디터로 작성한 글입니다 두번째로 firebase에 호스팅하려는데 저번엔 보이지도 않았던 스크립트 실행못한다는 오류때문에 금같은 시간을 낭비했답니다 ^0^. 정말 엿같네요! 정말 코딩하다가 성격을 다 버릴거 같아요^^ 1. 에러 : 스크립트를 실행할 수 없다 어쩌고저쩌고 (사진 못찍어서 텍스트로 대체합니다) 'firebase init' 으로 명령어를 입력하면 정상작동이 되어야 하는데... firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 '경로'. 자세한 내용은 어쩌고~~ 이런 오류가 출력되는데 스크립트 실행 권한이 제한되어 있어서 발생하는 에러입니다. 2. 윈도우키 - 'PowerShell' 검색 후 관리자모드 실행 3. 권한상태 변경하기 'get-ExecutionPolic.. 2022. 11. 8.
프로그래머스 Lv.1 : 13. 부족한 금액 계산하기 프로그래머스Lv.1 : 부족한 금액 계산하기 ■ 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. ■ 제한 조건 ✔ 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 ✔ 처음 가지고 있던 금액 money : 1 ≤ money ≤ 1,000.. 2022. 11. 8.
프로그래머스 Lv.1 : 12. 가운데 글자 가져오기 프로그래머스Lv.1 : 가운데 글자 가져오기 ■ 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. ■ 제한 조건 ✔ s는 길이가 1 이상, 100이하인 스트링입니다. ■ 입출력 예 s return "abcde" "c" "qwer" "we" ■ 내멋대로 풀어헤치기😜 전체 개수 / 2 를 한값은 소숫점이 붙으니간 Math.floor()로 소숫점을 제거한 뒤 해당 값의 문자열을 뽑아냅니다. 단, 짝수는 두글자 반환이므로 소숫점제거한 값-1의 값을 먼저 구해서 두 문자를 붙여줍니다. 최대한 줄인거같은데 고수들의 코드는 얼마나 더 줄어들지 기대가 되는구만유 function solution(s) { let answer = .. 2022. 11. 7.
프로그래머스 Lv.1 : 11. 두 정수 사이의 합 프로그래머스Lv.1 : 두 정수 사이의 합 ■ 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. ■ 제한 조건 ✔ a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. ✔ a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. ✔ a와 b의 대소관계는 정해져있지 않습니다. ■ 입출력 예 a b return 3 5 12 3 3 3 5 3 12 ■ 내멋대로 풀어헤치기😜 음...그냥 반복문쓰면 되지않을까요? 근데 a가 더 큰경우도 있으니 if문으로 서로 반대되는 케이스를 걸고 a와 b의 위치만 바꿨습니다. 내가 푸는것.. 2022. 11. 6.
프로그래머스 Lv.1 : 10. 제일 작은 수 제거하기 프로그래머스Lv.1 : 제일 작은 수 제거하기 ■ 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. ■ 제한 조건 ✔ arr은 길이 1 이상인 배열입니다. ✔ 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. ■ 입출력 예 arr return [4,3,2,1] [4,3,2] [10] [-1] ■ 내멋대로 풀어헤치기😜 filter를 통해서 배열내의 최소수를 제외한 값들을 x라는 변수에 다시 반환해줍니다. 문제에 빈배열은 -1넣어서.. 2022. 11. 6.
프로그래머스 Lv.1 : 09. 짝수와 홀수 프로그래머스Lv.1 : 짝수와 홀수 ■ 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. ■ 제한 조건 ✔ num은 int 범위의 정수입니다. ✔ 0은 짝수입니다. ■ 입출력 예 num return 3 4 "Odd" "Even" ■ 내멋대로 풀어헤치기😜 짝수는 나눠서 0이나오니깐 %2로 구하고 0은 짝수취급이래서 조건문에 넣어줬고.. 홀수는 else 에 넣었음... 설명할게 있나? function solution(num) { var answer = ''; if(num%2 == 0 || num == 0){ answer = "Even"; }else{ answer = "Odd"; } return answer; } ■ 다른사람 .. 2022. 11. 6.
프로그래머스 Lv.1 : 08. 나머지가 1이 되는 수 찾기 프로그래머스Lv.1 : 나머지가 1이 되는 수 찾기 ■ 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. ■ 제한 조건 ✔ 3 ≤ n ≤ 1,000,000 ■ 입출력 예 n answer 10 3 12 11 ■ 입출력 예 1. 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다. 2. 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다. ■ 내멋대로 풀어헤치기😜 최소수기 때문에 n에.. 2022. 11. 3.
프로그래머스 Lv.1 : 07. x만큼 간격이 있는 n개의 숫자 프로그래머스Lv.1 : x만큼 간격이 있는 n개의 숫자 ■ 문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. ■ 제한 조건 ✔ x는 -10000000 이상, 10000000 이하인 정수입니다. ✔ n은 1000 이하인 자연수입니다. ■ 입출력 예 x n answer 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4,-8] ■ 내멋대로 풀어헤치기😜 반복문을 통해서 배열의 갯수만큼 반복해줍니다. 근데 반복되는 부분은 +된 값이기때문에 초기값은 그냥 처음부터 변수에 넣어주고 시작합니다. +된 값은 push로 배열의 끝.. 2022. 11. 2.
프로그래머스 Lv.1 : 06. 핸드폰 번호 가리기 프로그래머스Lv.1 : 핸드폰 번호 가리기 ■ 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. ■ 제한 조건 ✔ phone_number는 길이 4 이상, 20이하인 문자열입니다. ■ 입출력 예 phone_number return "01033334444" "*******4444" "027778888" "*****8888" ■ 내멋대로 풀어헤치기😜 받아온 번호를 ['0','1','0']의 형식으로 바꿔줍니다 (from으로) 반복문으로 전체길이에 -4를해서 마지막부터 네번째자.. 2022. 11. 1.
프로그래머스 Lv.1 : 05. 서울에서 김서방 찾기 프로그래머스Lv.1 : 서울에서 김서방 찾기 ■ 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. ■ 제한 조건 ✔ seoul은 길이 1 이상, 1000 이하인 배열입니다. ✔ seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. ✔ "Kim"은 반드시 seoul 안에 포함되어 있습니다. ■ 입출력 예 n return ["Jane", "Kim"] "김서방은 1에 있다" ■ 내멋대로 풀어헤치기😜 'kim'을 발견 시 인덱스 반환하게 유도함 function solution(seoul) { .. 2022. 11. 1.
프로그래머스 Lv.1 : 04. 약수의 합 프로그래머스Lv.1 : 약수의 합 ■ 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. ■ 제한 조건 ✔ n은 0 이상 3000이하인 정수입니다. ■ 입출력 예 n return 12 28 5 6 ■ 입출력 예 1. 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 2. 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. ■ 내멋대로 풀어헤치기😜 n % i = 0 이면 push로 밀어넣고 reduce를 이용해서 합침 function solution(n) { let answer = []; for(let i = 0; i a + b,0); return sum; } ■ 다른사람 입맛도 맛보기 😋 function sol.. 2022. 11. 1.
프로그래머스 Lv.1 : 03. 문자열 내 p와 y의 개수 프로그래머스Lv.1 : 문자열 내 p와 y의 개수 ■ 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. ■ 제한 조건 ✔ 문자열 s의 길이 : 50 이하의 자연수 ✔ 문자열 s는 알파벳으로만 이루어져 있습니다. ■ 입출력 예 n return "pPoooyY" true "Pyy" false ■ 입출력 예 1. 'p'의 개수 2개,.. 2022. 11. 1.
프로그래머스 Lv.1 : 02. 자연수 뒤집어 배열로 만들기 프로그래머스Lv.1 : 자연수 뒤집어 배열로 만들기 ■ 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. ■ 제한 조건 ✔ n은 10,000,000,000이하인 자연수입니다. ■ 입출력 예 n return 12345 [5,4,3,2,1] ■ 내멋대로 풀어헤치기😜 뒤집는건 reverse를 사용하면 되지만, 숫자를 뒤집을 수는 없습니다.그래서, String()으로 '12345'라는 숫자를 문자로 바꿔준뒤, split으로 한개씩 쪼개서 배열형식으로 바꾸어 줍니다. 그리고 reverse를 사용해서 ["5",..."1"]으로 변환! 이 배열안의 문자들을 어떻게 숫자로 다시 바꾸고 배열안에 넣을까 고민하다가 구글링.. 2022. 10. 31.
프로그래머스 Lv.1 : 01. 평균 구하기 프로그래머스Lv.1 : 평균 구하기 ■ 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. ■ 제한사항 ✔ arr은 길이 1 이상, 100 이하인 배열입니다. ✔ arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. ■ 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 ■ 내멋대로 풀어헤치기😜 평균을 구하는 식은 다들 아시겠지만 '전체값 더하기 / 전체갯수'라서 평균값인 변수 aver에 그렇게 해주었습니다. 네 그렇습니다 function solution(arr) { var answer = 0; for(i=0; i {return 결과 }, 초기값); 누적값입니다.(뭔소리래??) 초기값을 적어주지 않으면 자동으로 초기값.. 2022. 10. 31.
[자바스크립트 응용하기] 슬라이드 유형07 슬라이드 효과 07 이번 시간에는 슬라이드 효과의 최종형태입니다. 그런데 지금 자잘한 버그가 많아서 수정중에 있습니다... 심지어 현생이 최근에 너무 바빠져서 수정할 시간이...😪 수정이 완료되는대로 설명을 제대로 덧붙여서 수정본으로 재업로드 하겠습니다. 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.quer.. 2022. 10. 24.
[자바스크립트 응용하기] 검색 이펙트07_게임만들기 검색 효과07 검색 효과 여섯번째 시간입니다. 속성 찾기 게임을 해보도록해요. 원본 소스 보기 원본 사이트 JS 소스 // 내용소스는 아이프레임 참조해주세요. const serachTime = document.querySelector(".time span"); const serachList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const searchMissAnswers = document.querySelector(".search__missAnswers"); const searchStart = document.querySelector(".search_.. 2022. 10. 23.
[자바스크립트 응용하기] 검색 이펙트06_ 정렬 검색 효과 검색 효과 여섯번째 시간입니다. 다양한 방법으로 정렬해 봅시다 . 원본 소스 보기 원본 사이트 JS 소스 // 내용소스는 아이프레임 참조해주세요. // 데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index)=>{ listCSS += `${data.num}. ${data.name} : ${data.desc} `; }); cssList.innerHTML = listCSS; } updateList(); // 반대로 정렬 function sortReverse(){ cssProperty.reverse(); updateList(); } // 오름차순 정렬 function sortAscending(){ c.. 2022. 10. 23.
[자바스크립트 응용하기] 슬라이드 유형06_ 닷메뉴 무한으로돌리기 슬라이드 효과 06 이번 시간에는 5유형에서 만들었던 닷메뉴를 무한으로 왔다갔다 만들어 보겠습니다. 근데 사실 4유형에서 한것과 별다를게 없어서 쓸 내용도 없고 이 유형은 버그가 참많아요 ^_^ 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.querySelector('.slider__inner'); const.. 2022. 10. 23.
[자바스크립트 응용하기] 슬라이드 효과05_ 닷메뉴 슬라이드 효과 05 이번 시간에는 저번 버튼형식의 슬라이더에 추가로 하단에 도트를 추가해보겠습니다. 그리고 당연하게도 이 버튼을 눌렀을때도 이미지가 바뀌게 구성해야 합니다 ^^! 원본 소스 보기 원본 사이트 ▶ 동그란 도트모양을 만들어주고 이 닷버튼에 JS를 부여해줍니다. 이 때 Index값을 잘 활용하면 아주 쉽게 닷형식의 슬라이더가 완성이 됩니다. JS 소스 const sliderWrap = document.querySelector('.slider__wrap'); const sliderImg = document.querySelector('.slider__img'); const sliderInner = document.querySelector('.slider__inner'); const slider =.. 2022. 10. 23.
1111 오답 노트 📝 인간미 넘치는 오답인듯 합니다. 제목 const arr = [1,1,3,3,0,1,1]; function solution(arr){ return arr.filter((item,dix)) => item !== arr[idx + 1]); } console.log(solution(arr)) 결과보기 2022. 10. 21.
[자바스크립트 응용하기] 페럴렉스이펙트07_ 리빌효과 페럴렉스 효과 05 이번에는 이질감이 느껴지는 효과를 구현해보겠습니다. 이 효과를 뭐라고 설명해야할지 모르겠네요?\(〇_o)/ 그냥 이질감 효과라고 합시다 원본 소스 보기 원본 사이트 JS 소스 function scroll(){ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; document.querySelector("#parallax__info span").innerText = Math.ceil(scrollTop); document.querySelectorAll(".content__item").forEach(item => { const target1 = item.querySelector(".content__item__i.. 2022. 10. 10.
[애니메이션효과 만들기] 움직이는 눈 눈알 움직이기 눈알 움직이기 입니다 ■ HTML 가나다라 ■ CSS *{ margin: 0; padding: 0; box-sizing:border-box; } html,body{ height:100%; overflow:hidden; } .wrapper{ position: absolute; left: 50%; top:50%; width: 369px; height: 547px; transform-style:preserve-3d; transform:translate(-50%,-50%) perspective; } .me{ position: absolute; width: 369px; height: 547px; transform: translatez(80px) scale(0.8); } .me:before, .me:.. 2022. 10. 3.
[자바스크립트 응용] 검색 효과 05_ 중요도 순 검색 효과 검색 효과 다섯번째 시간입니다. 중요도 순으로 보는 방법을 만들어 보겠습니다. 원본 소스 보기 원본 사이트 JS 소스 const cssProperty = [ { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."}, { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수 있습니다."}, ...이하 생략 ]; // 출력하기 const searchInfo = document.querySelector('span.num'); const searchList = document.querySelector('.search__.. 2022. 10. 3.
[자바스크립트 응용] 검색 효과 04_ 버튼 방식 검색 효과 검색 효과 네번째 시간입니다. 속성들을 각각 버튼형식처럼 만든 뒤 클릭하면 해당 속성의 설명이 나타나게 해보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 기존의 검색방식을 유지하되, 속성값들을 클릭할 수 있게 만들어 주는 기능을 추가합니다. find()메서드를 활용하므로 검색의 경우는 정확히 일치하지 않는 경우 속성값은 검색되지 않습니다. JS 소스 const cssProperty = [ { name: "accent-color", desc: " 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다."}, { name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 교차축(flex박스) 또는 블록축(grid)을 따라 배치할지 속성할 수.. 2022. 10. 3.
[자바스크립트 응용] 페럴렉스 효과 06_ 나타나기 효과 페럴렉스 효과 06 이번 시간에는 글씨가 나타나는 효과를 주겠습니다. 원본 소스 보기 원본 사이트 JS 소스 document.querySelectorAll(".split").forEach(text => { let splitText = text.innerText; let splitWrap = splitText.split('').join(""); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; text.setAttribute("aria-label", splitText); }) function scroll() { let scrollTop = window.scrollY; document.querySelector("#parallax__info .scro.. 2022. 10. 3.
[자바스크립트 응용] 마우스 효과06_ 기울기 효과 마우스 효과 06 마우스 효과 여섯번째 시간입니다. 텍스트에 기울기 효과를 주고 오버시 글씨에 반전효과도 줘 보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 텍스트에 hover시, 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다. 텍스트는 skew를 주어 비틀기효과(≒기울기)를 줄 수 있고, "overflow:hidden"을 통해 마치 두개의 글씨가 이어져있지만 반반씩 달라보이는 효과를 줍니다. HTML 소스 "i thought you would" "i thought you would" If you know please tell me in advance If you know please tell me in a.. 2022. 10. 3.
[자바스크립트 응용] 마우스 효과05_ 반전 효과 마우스 효과 05 마우스 효과 다섯번째 시간입니다. "mouse__cursor"에 반전효과를 부여하고 마우스 위치에 따라 이미지가 약간씩 기우는 효과를 만들어 보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다. 이미지에는 "transform-style : preserve-3d"를 주어서 3D효과를 줍니다. JS 소스 const mouseMove = (e) => { // 마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; // 마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.in.. 2022. 10. 3.
[애니메이션효과 만들기] 움직이는 박스 움직이는 큐브 박스모양이 움직이게 만들겠습니다. ■ 새로운 것들 transform-origin 이 속성은 transform의 변형 기준점을 지정하는 속성입니다. 속성 값은 길이 단위 값과 키워드로 지정할 수 있습니다. x,y,z축 방향으로 촟 3개까지 입력 가능합니다. ■ HTML 메가박스 ■ CSS body { background-color : #c9c9c9; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube{ position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform.. 2022. 9. 22.
[애니메이션효과 만들기] 점프하는 글씨들 점프하는 글씨들 글자가 하나씩 점프하는 효과를 만들어 보겠습니다. ■ 새로운 것들 -webkit-font-smoothing 폰트를 부드럽게 만들기 위해서 사용하는 속성입니다. 표준 속성이 아니므로 -webkit-을 사용합시다. ■ HTML A N I M A T I O N ■ CSS @font-face { font-family: 'CrownMychew'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/crown/CrownMychew.eot?#iefix') .. 2022. 9. 22.
[자바스크립트 응용] 마우스 효과 04 ( 무슨 효과라 해야할지 모르겠음 ^^) 마우스 효과 04 이번 시간에는 정가운데에 있는 그림내부에서만 마우스오버 효과가 작동하고, 이미지가 마우스위치에 따라서 살짝씩 움직이는 효과를 만들어보겠습니다. 원본 소스 보기 원본 사이트 ■ n줄 요약 ▶ 그림 위에 클릭이벤트(마우스오버)를 부여해서 그림위에서만 작동할 수 있게 구성하고, 그림의 이동은 마우스좌표값을 화면의 정가운데로 초기화 시킨 뒤 그 값에 포인터 좌표값을 빼주어서 이동효과를 부여합니다. JS 소스 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = cursor.getBoundingClientRect(); document.querySelector(".mouse__wrap figure").addEvent.. 2022. 9. 22.
반응형

HTML이미지
HTML이미지

JAVASCRIPT

자세히 보기
HTML이미지