본문 바로가기

자바스크립트68

프로그래머스 1단계 : 2016년 프로그래머스 1단계 : 2016년 코딩테스트 연습 > 연습문제 > 2016년 💩 문제 설명 2016년 1월 1일은 금요일입니다. 2016년 a월 b일은 무슨 요일일까요? 두 수 a ,b를 입력받아 2016년 a월 b일이 무슨 요일인지 리턴하는 함수, solution을 완성하세요. 요일의 이름은 일요일부터 토요일까지 각각 SUN,MON,TUE,WED,THU,FRI,SAT 입니다. 예를 들어 a=5, b=24라면 5월 24일은 화요일이므로 문자열 "TUE"를 반환하세요. 💩 제한 조건 ☝️ 2016년은 윤년입니다. ✌ 2016년 a월 b일은 실제로 있는 날입니다. (13월 26일이나 2월 45일같은 날짜는 주어지지 않습니다) 💩 문제 풀이 function solution(a, b){ return new Da.. 2022. 12. 12.

프로그래머스 1단계 : 가장 가까운 같은 글자 프로그래머스 1단계 : 가장 가까운 같은 글자 코딩테스트 연습 > 연습문제 > 가장 가까운 같은 글자 💩 문제 설명 문자열 s가 주어졌을 때, s의 각 위치마다 자신보다 앞에 나왔으면서, 자신과 가장 가까운 곳에 있는 같은 글자가 어디 있는지 알고 싶습니다. 예를 들어, s="banana"라고 할 때, 각 글자들을 왼쪽부터 오른쪽으로 읽어 나가면서 다음과 같이 진행할 수 있습니다. ✔️ b는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. ✔️ a는 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. ✔️ n은 처음 나왔기 때문에 자신의 앞에 같은 글자가 없습니다. 이는 -1로 표현합니다. ✔️ a는 자신보다 두 칸 앞에 a가 있습니다. 이는 .. 2022. 12. 8.

프로그래머스 1단계 : 명예의 전당 (1) 프로그래머스 1단계 : 명예의 전당 (1) 코딩테스트 연습 > 연습문제 > 명예의 전당 (1) 💩 문제 설명 "명예의 전당"이라는 TV 프로그램에서는 매일 1명의 가수가 노래를 부르고, 시청자들의 문자 투표수로 가수에게 점수를 부여합니다. 매일 출연한 가수의 점수가 지금까지 출연 가수들의 점수 중 상위 k번째 이내이면 해당 가수의 점수를 명예의 전당이라는 목록에 올려 기념합니다. 즉 프로그램 시작 이후 초기에 k일까지는 모든 출연 가수의 점수가 명예의 전당에 오르게 됩니다. k일 다음부터는 출연 가수의 점수가 기존의 명예의 전당 목록의 k번째 순위의 가수 점수보다 더 높으면, 출연 가수의 점수가 명예의 전당에 오르게 되고 기존의 k번째 순위의 점수는 명예의 전당에서 내려오게 됩니다. 이 프로그램에서는 매.. 2022. 12. 8.

프로그래머스 1단계 : 푸드 파이트 대회 프로그래머스 1단계 : 푸드 파이트 대회 코딩테스트 연습 > 연습문제 > 푸드 파이트 대회 💩 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다. 이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 .. 2022. 12. 7.

프로그래머스 1단계 : 숫자 문자열과 영단어 프로그래머스 1단계 : 숫자 문자열과 영단어 코딩테스트 연습 > 2021 카카오 채용연계형 인턴십 > 숫자 문자열과 영단어 💩 문제 설명 네오와 프로도가 숫자놀이를 하고 있습니다. 네오가 프로도에게 숫자를 건넬 때 일부 자릿수를 영단어로 바꾼 카드를 건네주면 프로도는 원래 숫자를 찾는 게임입니다. 다음은 숫자의 일부 자릿수를 영단어로 바꾸는 예시입니다. ✔️ 1478 → "one4seveneight" ✔️ 234567 → "23four5six7" ✔️ 10203 → "1zerotwozero3" 이렇게 숫자의 일부 자릿수가 영단어로 바뀌어졌거나, 혹은 바뀌지 않고 그대로인 문자열 s가 매개변수로 주어집니다. s가 의미하는 원래 숫자를 return 하도록 solution 함수를 완성해주세요. 💩 제한 조건 .. 2022. 12. 5.

프로그래머스 2단계 : 최솟값 만들기 프로그래머스 2단계 : 최솟값 만들기 코딩테스트 연습 > 연습문제 > 최솟값 만들기 💩 문제 설명 길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 ✔️ A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) ✔️ A에서 두번째 숫자인 4.. 2022. 12. 5.

프로그래머스 1단계 : 예산 프로그래머스 1단계 : 예산 코딩테스트 연습 > Summer/Winter Coding(~2018) > 예산 💩 문제 설명 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에는 정확히 1,000원을 지원해야 하며, 1,000원보다 적은 금액을 지원해 줄 수는 없습니다. 부서별로 신청한 금액이 들어있는 배열 d와 예산 budget이 매개변수로 주어질 때, 최대 몇 개의 부서에 물.. 2022. 12. 4.

프로그래머스 1단계 : 햄버거 만들기 프로그래머스 1단계 : 햄버거 만들기 코딩테스트 연습 > 연습문제 > 햄버거 만들기 💩 문제 설명 햄버거 가게에서 일을 하는 상수는 햄버거를 포장하는 일을 합니다. 함께 일을 하는 다른 직원들이 햄버거에 들어갈 재료를 조리해 주면 조리된 순서대로 상수의 앞에 아래서부터 위로 쌓이게 되고, 상수는 순서에 맞게 쌓여서 완성된 햄버거를 따로 옮겨 포장을 하게 됩니다. 상수가 일하는 가게는 정해진 순서(아래서부터, 빵 – 야채 – 고기 - 빵)로 쌓인 햄버거만 포장을 합니다. 상수는 손이 굉장히 빠르기 때문에 상수가 포장하는 동안 속 재료가 추가적으로 들어오는 일은 없으며, 재료의 높이는 무시하여 재료가 높이 쌓여서 일이 힘들어지는 경우는 없습니다. 예를 들어, 상수의 앞에 쌓이는 재료의 순서가 [야채, 빵, .. 2022. 12. 1.

프로그래머스 1단계 : 시저 암호 프로그래머스 1단계 : 시저 암호 코딩테스트 연습 > 연습문제 > 시저 암호 💩 문제 설명 어떤 문장의 각 알파벳을 일정한 거리만큼 밀어서 다른 알파벳으로 바꾸는 암호화 방식을 시저 암호라고 합니다. 예를 들어 "AB"는 1만큼 밀면 "BC"가 되고, 3만큼 밀면 "DE"가 됩니다. "z"는 1만큼 밀면 "a"가 됩니다. 문자열 s와 거리 n을 입력받아 s를 n만큼 민 암호문을 만드는 함수, solution을 완성해 보세요. 💩 제한 조건 ☝️ 공백은 아무리 밀어도 공백입니다. ✌ s는 알파벳 소문자, 대문자, 공백으로만 이루어져 있습니다. 🤞 s의 길이는 8000이하입니다. 👌 n은 1 이상, 25이하인 자연수입니다. 💩 문제 풀이 function solution(s, n) { let answer = .. 2022. 12. 1.

프로그래머스 2단계 : JadenCase 문자열 만들기 프로그래머스 2단계 : JadenCase 문자열 만들기 코딩테스트 연습 > 연습문제 > JadenCase 문자열 만들기 💩 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고) 문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 💩 제한 조건 ☝️ s는 길이 1 이상 200 이하인 문자열입니다. ✌ s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다. 숫자는 단어의 첫 문자로만 나옵니다. 숫자로만 이루어진 단어는 없습니다. 공백문자가 연속해서 나올 수 있습니다. 💩 문제 풀이 .. 2022. 11. 29.

프로그래머스 1단계 : 두 개 뽑아서 더하기 프로그래머스 1단계 : 두 개 뽑아서 더하기 코딩테스트 연습 > 월간 코드 챌린지 시즌1 > 두 개 뽑아서 더하기 💩 문제 설명 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 💩 제한 조건 ☝️ numbers의 길이는 2 이상 100 이하입니다. ✌ numbers의 모든 수는 0 이상 100 이하입니다. 💩 문제 풀이 function solution(numbers) { let result = []; for(i=0; i a - b).filter((e, i, arr) => arr[i] !== arr[i+1]) } for문을 두 개 만들어 모.. 2022. 11. 29.

프로그래머스 1단계 : 로또의 최고 순위와 최저 순위 프로그래머스 1단계 : 로또의 최고 순위와 최저 순위 코딩테스트 연습 > 2021 Dev-Matching: 웹 백엔드 개발자(상반기) > 로또의 최고 순위와 최저 순위 💩 문제 설명 로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 1위 👉 6개 번호가 모두 일치 2위 👉 5개 번호가 일치 3위 👉 4개 번호가 일치 4위 👉 3개 번호가 일치 5위 👉 2개 번호가 일치 6위(낙첨) 👉 그 외 로또를 구매한 민우는 당첨 번호 발표일을 학수고대하고 있었습니다. 하지만, 민우의 동생이 로또에 낙서를 하여, 일부 번호를 알아볼 수 없게 되었습니다. 당첨 번호 발표 후, 민우는 자신이 구매했던 로또로 당첨이 가능했.. 2022. 11. 28.

프로그래머스 1단계 : 같은 숫자는 싫어 프로그래머스 1단계 : 같은 숫자는 싫어 코딩테스트 연습 > 스택/큐 > 같은 숫자는 싫어 💩 문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, ❓ arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. ❓ arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 💩 제한.. 2022. 11. 27.

프로그래머스 1단계 : 문자열 내 마음대로 정렬하기 프로그래머스 1단계 : 문자열 내 마음대로 정렬하기 코딩테스트 연습 > 연습문제 > 문자열 내 마음대로 정렬하기 💩 문제 설명 문자열로 구성된 리스트 strings와, 정수 n이 주어졌을 때, 각 문자열의 인덱스 n번째 글자를 기준으로 오름차순 정렬하려 합니다. 예를 들어 strings가 ["sun", "bed", "car"]이고 n이 1이면 각 단어의 인덱스 1의 문자 "u", "e", "a"로 strings를 정렬합니다. 💩 제한 조건 ☝️ strings는 길이 1 이상, 50이하인 배열입니다. ✌ strings의 원소는 소문자 알파벳으로 이루어져 있습니다. 👌 strings의 원소는 길이 1 이상, 100이하인 문자열입니다. 🤟 모든 strings의 원소의 길이는 n보다 큽니다. ✋ 인덱스 1의 문.. 2022. 11. 24.

프로그래머스 1단계 : 문자열 다루기 기본 프로그래머스 1단계 : 문자열 다루기 기본 코딩테스트 연습 > 연습문제 > 문자열 다루기 기본 💩 문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. 💩 제한 조건 ☝️ s는 길이 1 이상, 길이 8 이하인 문자열입니다. ✌ s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있습니다. 💩 문제 풀이 function solution(s) { if(s.length == 4 || s.length == 6){ if(s.indexOf("e") !== -1 ){ return false; } else if(s / 1 == s){ return .. 2022. 11. 22.

프로그래머스 1단계 : 부족한 금액 계산하기 프로그래머스 1단계 : 부족한 금액 계산하기 코딩테스트 연습 > 위클리 챌린지 > 부족한 금액 계산하기 💩 문제 설명 새로 생긴 놀이기구는 인기가 매우 많아 줄이 끊이질 않습니다. 이 놀이기구의 원래 이용료는 price원 인데, 놀이기구를 N 번 째 이용한다면 원래 이용료의 N배를 받기로 하였습니다. 즉, 처음 이용료가 100이었다면 2번째에는 200, 3번째에는 300으로 요금이 인상됩니다. 놀이기구를 count번 타게 되면 현재 자신이 가지고 있는 금액에서 얼마가 모자라는지를 return 하도록 solution 함수를 완성하세요. 단, 금액이 부족하지 않으면 0을 return 하세요. 💩 제한 조건 ☝️ 놀이기구의 이용료 price : 1 ≤ price ≤ 2,500, price는 자연수 ✌️ 처음 .. 2022. 11. 19.

프로그래머스 1단계 : 행렬의 덧셈 프로그래머스 1단계 : 행렬의 덧셈 코딩테스트 연습 > 연습문제 > 행렬의 덧셈 💩 문제 설명 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 💩 제한 조건 ☝️ 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다. 💩 문제 풀이 function solution(arr1, arr2) { for(i=0; i b + B[i][j])); } map()을 두 번 사용하여 배열을 복사한 뒤 값을 더해주었습니다. 하지만 저는 이해가 잘... 문제 풀어보기 2022. 11. 17.

프로그래머스 1단계 : 내적 프로그래머스 1단계 : 내적 코딩테스트 연습 > 월간 코드 챌린지 시즌1 > 내적 💩 문제 설명 길이가 같은 두 1차원 정수 배열 a, b가 매개변수로 주어집니다. a와 b의 내적을 return 하도록 solution 함수를 완성해주세요. 이때, a와 b의 내적은 a[0]*b[0] + a[1]*b[1] + ... + a[n-1]*b[n-1]입니다. (n은 a, b의 길이) 💩 제한 조건 ☝️ a, b의 길이는 1 이상 1,000 이하입니다. ✌️ a, b의 모든 수는 -1,000 이상 1,000 이하입니다. 💩 문제 풀이 function solution(a, b) { let answer = 0; for(i=0; i acc += a[i] * b[i], 0); } reduce() 메서드는 네 개의 인자를 가.. 2022. 11. 16.

프로그래머스 1단계 : 나누어 떨어지는 숫자 배열 프로그래머스 1단계 : 나누어 떨어지는 숫자 배열 코딩테스트 연습 > 연습문제 > 나누어 떨어지는 숫자 배열 💩 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. 💩 제한 조건 ☝️ arr은 자연수를 담은 배열입니다. ✌️ 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. 🤘 divisor는 자연수입니다. 🤟 array는 길이 1 이상인 배열입니다. 💩 문제 풀이 function solution(arr, divisor) { var answer = []; for(i=0; i v % .. 2022. 11. 15.

프로그래머스 1단계 : x만큼 간격이 있는 n개의 숫자 프로그래머스 1단계 : x만큼 간격이 있는 n개의 숫자 코딩테스트 연습 > 연습문제 > x만큼 간격이 있는 n개의 숫자 💩 문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. 💩 제한 조건 ☝️ x는 -10000000 이상, 10000000 이하인 정수입니다. ✌️ n은 1000 이하인 자연수입니다. 💩 문제 풀이 function solution(x, n) { var answer = []; for(i=1; i (i + 1) * v) } 여기에서 Array(n)은 n개의 길이를 가진 배열을 만듭니다. fill(x)는 그 배열의 요소를 .. 2022. 11. 14.

프로그래머스 1단계 : 문자열 내 p와 y의 개수 프로그래머스 1단계 : 문자열 내 p와 y의 개수 코딩테스트 연습 > 연습문제 > 문자열 내 p와 y의 개수 💩 문제 설명 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 💩 제한 조건 ☝️ 문자열 s의 길이 : 50 이하의 자연수 ✌️ 문자열 s는 알파벳으로만 이루어져 있습니다. 💩 문제 풀이 function solution(s){ l.. 2022. 11. 13.

프로그래머스 1단계 : 정수 제곱근 판별 프로그래머스 1단계 : 정수 제곱근 판별 코딩테스트 연습 > 연습문제 > 정수 제곱근 판별 💩 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 💩 제한 조건 ☝️ n은 1이상, 50000000000000 이하인 양의 정수입니다. 💩 문제 풀이 function solution(n) { let answer; for(x=1; x 2022. 11. 13.

자바스크립트 : 검색 효과 : 검색 게임 자바스크립트 : 검색 효과 : 검색 게임 지금까지 다양한 메서드를 활용하여 검색 효과를 작업해 보았습니다. 이번에는 CSS 속성을 직접 타이핑하여 제한 시간 안에 맞히는 검색 게임을 만들어 보도록 하겠습니다. 1. 선택자 작업하기 const searchTime = document.querySelector(".time span"); const searchList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const searchMissAnswers = document.querySelector(".search__missAnswers"); const search.. 2022. 10. 24.

자바스크립트 : 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 이전 버튼, 다음 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. 선택자 및 변수 만들기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".sli.. 2022. 10. 18.

자바스크립트 : 게임 효과 : 뮤직 플레이어 자바스크립트 : 게임 효과 : 뮤직 플레이어 이번에는 게임 효과입니다. 첫번째 유형으로는 뮤직 플레이어를 작업할 예정입니다. 1. 사전 작업 1-1. 마우스 커서 만들기 const cursor = document.querySelector(".mouse__cursor"); window.addEventListener("mousemove", (e) => { cursor.style.left = e.clientX + "px"; cursor.style.top = e.clientY + "px"; }); 귀여운 이미지로 마우스 커서를 바꾸어 줍니다. 이 정도는 껌이죠. 1-2. 시간 출력하기 function printTime() { const clock = document.querySelector(".time"); c.. 2022. 10. 18.

자바스크립트 : 검색 효과 : sort(), reverse() 자바스크립트 : 검색 효과 : sort(), reverse() 자바스크립트의 다양한 효과들 중, 검색 효과입니다. 이번에는 sort(), reverse() 메서드를 사용하여, 오름차순, 내림차순, 알파벳순 등 속성들이 다양한 방법으로 정렬되도록 작업해 보겠습니다. 1. 속성 작성하기 const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." }, { num: 3, name: "align-items", desc: " 교차축.. 2022. 10. 18.

자바스크립트 마우스 효과 : 이미지 효과 자바스크립트 : 마우스 효과 : 이미지 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 커서가 나타나고, 커서의 위치에 따라 이미지가 확대됨과 동시에 이동하는 효과를 작업해 보도록 하겠습니다. 1. 선택자 만들기 const cursor = document.querySelector(".mouse__cursor"); const cursorRect = document.querySelector(".mouse__cursor").getBoundingClientRect(); 커서에 대한 선택자를 먼저 만들어 줍니다. 두 번째 선택자는 마우스 효과 3번에서도 사용했던 속성으로, 너비와 높이 등을 객체로 한번에 출력할 수 있습니다. 2. 마우스 이벤트 만들기 docume.. 2022. 9. 22.

자바스크립트 마우스 효과 : 마우스 따라다니기(GSAP) 자바스크립트 : 마우스 효과 : 마우스 따라다니기(GSAP) 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 GSAP를 활용하여 더 부드럽게 움직이는 커서를 작업해 보도록 하겠습니다. 1. HTML 소스 Only I can change my life, No one can do it for me 오직 나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수는 없다 이번에는 커서를 두 개 작업해 주었습니다. HTML로 구조를 잡은 후, CSS로 스타일을 적용해 줍니다. 2. CSS 소스 .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; color: #fff; o.. 2022. 9. 18.

자바스크립트 슬라이드 효과 : 버튼 자바스크립트 슬라이드 효과 : 버튼 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 해당하는 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. CSS 소스 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 520px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모(움직이는 부분) */ display: .. 2022. 9. 18.

자바스크립트 패럴랙스 효과 : 나타나기 자바스크립트 : 패럴랙스 효과 : 나타나기 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 패럴렉스 효과 1번과 같은 메뉴 디자인이지만, 스크롤의 위치에 따라 콘텐츠의 각 내용물들이 순차적으로 나타나는 유형을 작업해 보도록 하겠습니다. 1. JAVASCRIPT로 스크롤 이벤트 만들어 주기 2-1) addEventListener window.addEventListener("scroll", 함수명); 지금까지는 addEventListener로 스크롤 이벤트를 작업해 주었습니다. 그러나, 이 방법은 스크롤을 매번 감지하기 때문에 버벅거림 현상이 나타날 수 있습니다. 따라서 이번에는 재귀함수를 사용하여 작업을 하도록 하겠습니다. 2-2) 재귀함수(Recursion) function scroll(.. 2022. 9. 18.

이전 1 2 3 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바