본문 바로가기

개발자182

프로그래머스 1단계 : 이상한 문자 만들기 ✔ 프로그래머스 1단계 : 이상한 문자 만들기 코팅테스트 연습 > 연습문제 > 이상한 문자 만들기 ❓ 문제 설명 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로,홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. ❗ 제한사항 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 첫 첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. 🍖 입출력 예 s return "try hello world" "TrY HeLlO WoRlD" 🍙 입출력 예 설명 "try hello world"는 세 단어 "try", "hel.. 2022. 11. 20.
프로그래머스 1단계 : 최대공약수와 최소공배수 ✔ 프로그래머스 1단계 : 최대공약수와 최소공배수 코팅테스트 연습 > 연습문제 > 최대공약수와 최소공배수 ❓ 문제 설명 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다. ❗ 제한사항 두 수는 1이상 1000000이하의 자연수입니다. 🍖 입출력 예 n m return 3 12 [3,12]/td> 2 5 [1,10] 🍙 입출력 예 설명 입출력 예 #1 위의 설명과 같습니다. 입출력 예 #2 자연수 2와 5의 최대공약수는 1, 최소공배수는 10이므로 [1.. 2022. 11. 17.
프로그래머스 1단계 : 음양 더하기 ✔ 프로그래머스 1단계 : 음양 더하기 코팅테스트 연습 > 연습문제 > 음양 더하기 ❓ 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. ❗ 제한사항 absolutes의 길이는 1 이상 1,000 이하입니다. absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. signs의 길이는 absolutes의 길이와 같습니다. signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. 🍖 입출력 예 absolutes signs re.. 2022. 11. 16.
프로그래머스 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. 15.
프로그래머스 1단계 : 제일 작은 수 제거하기 ✔ 프로그래머스 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] ⏳ 문제 풀이 function solution(arr) { arr.splice(arr... 2022. 11. 14.
프로그래머스 1단계 : 콜라츠 추측 ✔ 프로그래머스 1단계 : 콜라츠 추측 코팅테스트 연습 > 연습문제 > 콜라츠 추측 ❓ 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, .. 2022. 11. 13.
프로그래머스 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. 12.
프로그래머스 1단계 : 서울에서 김서방 찾기 ✔ 프로그래머스 1단계 : 서울에서 김서방 찾기 코팅테스트 연습 > 연습문제 > 서울에서 김서방 찾기 ❓ 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. ❗ 제한 사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. 🍖 입출력 예 seoul return ["Jane", "Kim"] "김서방은 1에 있다" ⏳ 문제 풀이 function solution(seoul){ fo.. 2022. 11. 11.
프로그래머스 1단계 : 정수 제곱근 판별 ✔ 프로그래머스 1단계 : 정수 제곱근 판별 코팅테스트 연습 > 연습문제 > 정수 제곱근 판별 ❓ 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. ❗ 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. 🍖 입출력 예 n return 121 144 3 -1 🍙 입출력 예 설명 입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. ⏳ 문제 풀이 function solution(n) { co.. 2022. 11. 10.
프로그래머스 1단계 :나누어 떨어지는 숫자 배열 ✔ 프로그래머스 1단계 : 나누어 떨어지는 숫자 배열 코팅테스트 연습 > 연습문제 > 나누어 떨어지는 숫자 배열 ❓ 문제 설명 array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요. ❗ 제한 사항 arr은 자연수를 담은 배열입니다. 정수 i, j에 대해 i ≠ j 이면 arr[i] ≠ arr[j] 입니다. divisor는 자연수입니다. array는 길이 1 이상인 배열입니다. 🍖 입출력 예 arr divisor return [5,9,7,10] 5 [5,10] [2,36,1,3] 1 [1,2,3,36] [3,2,6] 10 .. 2022. 11. 9.
프로그래머스 1단계 : 가운데 글자 가져오기 ✔ 프로그래머스 1단계 : 가운데 글자 가져오기 코팅테스트 연습 > 연습문제 > 가운데 글자 가져오기 ❓ 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. ❗ 제한 사항 s는 길이가 1 이상, 100이하인 스트링입니다. 🍖 입출력 예 s return "abcde" "c" "qwer" "we" ⏳ 문제 풀이 function solution(s) { return s.substr(Math.ceil(s.length/2)-1,s.length%2===0?2:1); } substr(시작,길이)를 이용했고 짝홀의 경우를 삼항연산자로 한줄로 표현했습니다. 👀 다른 사람의 풀이 function solution(s) { var an.. 2022. 11. 8.
프로그래머스 1단계 : 하샤드 수 ✔ 프로그래머스 1단계 : 하샤드 수 코팅테스트 연습 > 연습문제 > 하샤드 수 ❓ 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. ❗ 제한 조건 x는 1 이상, 10000 이하인 정수입니다. 🍖 입출력 예 arr return 10 true 12 true 11 false 13 false 🍙 입출력 예 설명 입출력 예#1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다. 입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12.. 2022. 11. 7.
프로그래머스 1단계 : 문자열 내림차순으로 정렬하기 ✔ 프로그래머스 1단계 : 문자열 내림차순으로 배치하기 코팅테스트 연습 > 연습문제 > 문자열 내림차순으로 배치하기 ❓ 문제 설명 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. ❗ 제한 사항 str은 길이 1 이상인 문자열입니다. 🍖 입출력 예 s return "Zbcdefg" "gfedcbZ" ⏳ 문제 풀이 function solution(s) { return s.split("").sort().reverse().join(""); } 다루기 쉽게 배열로 반환시켜서 sort로 먼저 오름차순으로 정렬해준뒤 거꾸로 정렬해주었습니다. 👀 다른 사람의 풀.. 2022. 11. 6.
프로그래머스 1단계 : 문자열을 정수로 바꾸기 ✔ 프로그래머스 1단계 : 문자열을 정수로 바꾸기 코팅테스트 연습 > 연습문제 > 문자열을 정수로 바꾸기 ❓ 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. ❗ 제한 사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 🍖 입출력 예 🍙 입출력 예 설명 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. ⏳ 문제 풀이 function solution(s) { return Number(s); } 정말 간단하게 Nu.. 2022. 11. 5.
프로그래머스 1단계 : 문자열 다루기 기본 ✔ 프로그래머스 1단계 : 문자열 다루기 기본 코팅테스트 연습 > 연습문제 > 문자열 다루기 기본 ❓ 문제 설명 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다. ❗ 제한 사항 s는 길이 1 이상, 길이 8 이하인 문자열입니다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있습니다. 🍖 입출력 예 s return "a234" "false" "1234" "true" ⏳ 문제 풀이 function solution(s) { if(s.length !== 4 && s.length !== 6 ) return false; for(i = 0; i 2022. 11. 4.
프로그래머스 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는 알파벳으로만 이루어져 있습니다. 🍖 입출력 예 s answer "pPoooyY" "Pyy" 🍙 .. 2022. 11. 3.
프로그래머스 1단계 : 정수 내림차순으로 정렬하기 ✔ 프로그래머스 1단계 : 정수 내림차순으로 배치하기 코팅테스트 연습 > 연습문제 > 정수 내림차순으로 배치하기 ❓ 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. ❗ 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. 🍖 입출력 예 n return 118372 "873211" ⏳ 문제 풀이 function solution(n) { let result = n.toString().split("").sort().reverse().join(""); return parseInt(result); } 문자열로 만든 뒤, sort(),reverse(.. 2022. 11. 3.
프로그래머스 1단계 : 수박수박수박수박수박수? ✔ 프로그래머스 1단계 : 수박수박수박수박수박수? 코팅테스트 연습 > 연습문제 > 수박수박수박수박수박수? ❓ 문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. ❗ 제한 조건 n은 길이 10,000이하인 자연수입니다. 🍖 입출력 예 n return 3 "수박수" 4 "수박수박" ⏳ 문제 풀이 function solution(n) { let result = "" for(let i = 1; i 2022. 11. 1.
프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 ✔ 프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 코팅테스트 연습 > 연습문제 > 자연수 뒤집어 배열로 만들기 ❓ 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. ❗ 제한 조건 n은 10,000,000,000이하인 자연수입니다. 🍖 입출력 예 n return 12345 [5,4,3,2,1] ⏳ 문제 풀이 function solution(n) { return n.toString().split('').map(item => Number(item)).reverse() } 숫자를 문자열로 만들어서 쪼개주고 map 메서드로 요소를 추출하여 새로운 배열을 만듭니다. Number로 숫자로 반환해주고, rever.. 2022. 10. 31.
프로그래머스 1단계 : 두 정수 사이의 합 ✔ 프로그래머스 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 ⏳ 문제 풀이 function solution(a, b) { var answer = 0; if(a>=b){ for(let i=b; i 2022. 10. 31.
프로그래머스 1단계 : 평균 구하기 ✔ 프로그래머스 1단계 : 평균 구하기 코팅테스트 연습 > 연습문제 > 평균 구하기 ❓ 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. ❗ 제한 사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 🍖 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 ⏳ 문제 풀이 function solution(arr) { var answer = 0; for(i=0; i a + b) / array.length; } 다른 사람은 reduce로 합쳐주고 나눠줘서 더 짧게 했네요. 문제 풀기 2022. 10. 31.
프로그래머스 1단계 : 짝수와 홀수 ✔ 프로그래머스 1단계 : 짝수와 홀수 코팅테스트 연습 > 연습문제 > 짝수와 홀수 ❓ 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. ❗ 제한 조건 num은 int 범위의 정수입니다. 0은 짝수입니다. 🍖 입출력 예 num return 3 "Odd" 4 "Even" ⏳ 문제 풀이 function solution(num) { let answer = ''; if(num % 2 == 0){ answer = 'Even'; } else { answer = 'Odd'; } return answer; } 조건문 if를 통해서 num을 2로 나눈 나머지가 0이되는 수 = 짝수 그렇지 않은수는 홀수로 나눠주었습니다. 👀 다른 사람의 .. 2022. 10. 31.
프로그래머스 1단계 : 약수의 합 ✔ 프로그래머스 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입니다. ⏳ 문제 풀이 function solution(n) { let answer = 0; for(let i = 0; i 2022. 10. 30.
Javascript 오답 노트 04 Javascript 오답노트 04 Javascript 오답노트 정리 네 번째 시간입니다. 2022년 10월 21일 프로그래머스 1단계 10문제 쪽지시험을 봤습니다. 간만에 봐서 그런지(?) 거의 다 틀렸네요 01. 다음의 결괏값을 작성하시오. { const arr = [1,1,3,3,0,1,1]; function solution(arr){ return arr.filter((item,idx) => item !== arr[idx+1]); } console.log(solution(arr)) } filter 메서드를 이용한 중복제거에 대한 문제입니다. idx 인덱스값 0부터 넣고 비교해보면 1은 arr[1](1)과 같으니 뺍니다. 1은 arr[2](3)과 다르니 넣습니다. 3은 arr[3](3)과 같으니 뺍니다.. 2022. 10. 23.
Slider EFfect 07 슬라이드 이펙트 이번 시간에는 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 효과에 대해 알아보겠습니다. 슬라이드 07 슬라이드 이펙트 모든 기능이 구현된 종합세트입니다. 6번 예제와 대체로 비슷하지만 닷메뉴가 이미지 이동에 따라 같이 이동하고 auto 플레이가 가능하며, mouseenter, mouseleave에 반응하여 마우스 위치에 따라 슬라이드가 멈췄다가 진행했다가 합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS 코드 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .s.. 2022. 10. 23.
Slider Effect 06 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 효과에 대해 알아보겠습니다. 슬라이드가 끝에 가도 부자연스럽게 이동되지 않고 좌우로 무한이동 가능합니다. 슬라이드 06 버튼을 통해서 좌우로 이동 가능하고, 5->1 슬라이드로 넘어갈 때 뒤로넘어가지 않고 무한으로 넘어갑니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS 코드 .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ posit.. 2022. 10. 21.
Search Effect 07 Search Effect07 서치 이펙트 일곱 번째 시간입니다. 게임이펙트 시간에 배운 뮤직기능을 넣어 게임을 만들어보겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 서치게임과 꿀벌svg, 오디오에 대한 틀입니다. 코드 보기 { CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 힌트보기는 한번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 02. CSS 꿀벌에 관한 CSS를 링크로 걸어 추가했고 새로 추가된 요소들에 이전 예제와 통일성을 위해 비슷한 디자인을 입혀줬습니다. 코드 보기 { /* main */ #main { margin: 50p.. 2022. 10. 21.
Game Effect 01 게임 이펙트 01 게임 이펙트 첫 번째 시간입니다. 이번 시간에는 뮤직박스를 만들어보겠습니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 전체적인 게임이펙트 틀로 헤더, 시간, 마우스, 아이콘, 푸터 + 뮤직박스와 소스보기로 구성되어 있습니다. 코드 보기 { Daewon Game World 뮤직 듣기 음악 듣기 뮤직 듣기 음악 듣기 뮤직 듣기 *** Music player +++ Average - Patrick Patrikios youtuber music 0:00 4:00 뮤직 리스트 소스 보기 } 02. CSS 코드 게임이펙트 틀과 뮤직박스에 대한 CSS입니다. 코드 보기 { // 게임이펙트 틀 @import url('https://webfontworld.github.io/fontlab/L.. 2022. 10. 18.
Search Effect06 Search Effect06 이번 시간에는 sort(), reverse() 메서드를 이용해서 숫자와 문자열을 정렬하고 반대로도 정렬해보았습니다. 원본 사이트 보기 원본 소스 보기 01. HTML search__click메뉴에 btn 리스트를 추가했습니다. 코드 보기 { sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순(a~z) 알파벳순(z~a) 랜덤정렬 찾은 속성 갯수 : 0 } 02. CSS 코드 보기 { /* main */ #main { margin: 50px 10px; } .search__wrap { max-width: 1400px; margin: 0 auto; border: 3px solid #223547; bor.. 2022. 10. 18.
Slider Effect 05 슬라이드 이펙트 이번 시간에는 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 효과에 대해 알아보겠습니다. 슬라이드 05 버튼을 통해서 좌우로 이동 가능하고, 닷메뉴를 통해서 원하는 번호의 이미지로 이동가능합니다. 원본 사이트 보기 원본 소스 보기 01. HTML 코드 닷메뉴를 추가해줬습니다. { prev next } 02. CSS 코드 닷메뉴에 대한 css를 추가했습니다. { .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position: relative; width: 800px; height: 45.. 2022. 10. 14.

HTML
CSS

JAVASCRIPT

자세히 보기