본문 바로가기

분류 전체보기162

프로그래머스 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가 b보다 작을경우와 a가 b보다 클경우 모두 두 사이에 합을 구할 수 있도록 하였습니다. const a = 3; const b = 5; function solution(a, b.. 2022. 11. 13.
프로그래머스 1단계 - 없는 숫자 더하기 없는 숫자 더하기 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 제한 조건 😮1 ≤ numbers의 길이 ≤ 9 😮0 ≤ numbers의 모든 원소 ≤ 9 😮numbers의 모든 원소는 서로 다릅니다. 입출력 예시 numbers result [1,2,3,4,6,7,8,0] 14 [5,8,4,0,6,7,9] 6 😮내가 한 풀이 includes() 메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다. const numbers = [1,2,3,4,6,7,8,0]; function solution.. 2022. 11. 10.
프로그래머스 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 [-1] 🐼내가 한 풀이 sort를 사용해서 오름차순으로 정렬해줬습니다.. 2022. 11. 9.
프로그래머스 1단계 - 서울에서 김서방 찾기 서울에서 김서방 찾기 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 제한 조건 👣seoul은 길이 1 이상, 1000 이하인 배열입니다. 👣seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. 👣"Kim"은 반드시 seoul 안에 포함되어 있습니다. 입출력 예시 seoul return ["Jane", "Kim"] "김서방은 1에 있다" 👣내가 한 풀이 indexOf를 이용해서 김서방을 찾았습니다~ indexOf는 배열에서 요소를 검색할때 사용할 수 있으며 반환은 숫자로 합니다. co.. 2022. 11. 8.
프로그래머스 1단계 - 음양 더하기 음양 더하기 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 제한 조건 🦢absolutes의 길이는 1 이상 1,000 이하입니다. 🦢absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. 🦢signs의 길이는 absolutes의 길이와 같습니다. 🦢signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. 입출력 예시 absolutes signs result [4,7,12] [true,false,true] 9 [1,2,3.. 2022. 11. 7.
프로그래머스 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을, 작업을 500번 반복할 때까지 1이 되지 않는다면 -1을 반환해 주세요. 제.. 2022. 11. 7.
프로그래머스 1단계 - 나머지가 1이 되는 수 찾기 나머지가 1이 되는 수 찾기 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 제한 조건 🐾3 ≤ n ≤ 1,000,000 입출력 예시 n result 10 3 12 11 🐾내가 한 풀이 if문에서 나누었을때 나머지가 1이 되는 수를 return했당... const n = 10; function solution(n) { for(let i = 0; i < n; i++){ if(n%i === 1){ return i; } } } 🐾다른 풀이 while문도 사용 가능 function solution(n, x = 1) { while (x++) { if (.. 2022. 11. 7.
프로그래머스 1단계 - x만큼 간격이 있는 n개의 숫자 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] 😎내가 한 풀이 처음에 answer에다가 +=로 추가하면 될줄 알았는데... 배열로 만들어야 해서 push를 써야한다는 것을 뒤늦게 깨달았다...! ㅠㅠ const x = 2; const n = 5; function soluti.. 2022. 11. 7.
프로그래머스 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 🎃내가 한 풀이 숫자를 문자로 만들어서 split()를 사용해서 나눠준 뒤 Number를 이용해 다시 숫자로 변환 후 삼항연산자를 사용해서 반환하였다... const x = 10; function solution(x) { let answer = 0; const .. 2022. 11. 3.
프로그래머스 1단계 - 자릿수 더하기 자릿수 더하기 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 조건 🎉N의 범위 : 100,000,000 이하의 자연수 입출력 예시 N answer 123 6 987 24 🎉내가 한 풀이 검색을 해보니 parseInt()라는 문자열을 정수로 변환시켜주는 방법이 있어서 사용해 보았다...! const n = 123; function solution(n) { let answer = n.toString().split('').map(el => parseInt(el)); return answer.reduce((p, c) => p + c); } 🎉다른 풀이 .. 2022. 11. 2.
프로그래머스 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 함수를 완성해 주세요. 제한 조건 😵배열 arr의 크기 : 1,000,000 이하의 자연수 😵배열 arr의 .. 2022. 11. 1.
프로그래머스 1단계 - 이상한 문자 만들기 🙄이상한 문자 만들기 문제 설명 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 각 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 제한 조건 🙄문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준)별로 짝/홀수 인덱스를 판단해야합니다. 🙄첫 번째 글자는 0번째 인덱스로 보아 짝수번째 알파벳으로 처리해야 합니다. 입출력 예시 s return "try hello world" "TrY HeLlO WoRlD" 🙄내가 한 풀이 너무 복잡하게 한것 같다.... function solution(s) { var answer = s.split(' '); let nice = []; .. 2022. 10. 31.
프로그래머스 1단계 - 핸드폰 번호 가리기 📞핸드폰 번호 가리기 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 "*"으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 📞phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예시 phone_number return "01033334444" "*******4444" "027778888" "*****8888" 📞내가 한 풀이 repeat()과 slice()를 이용해서 문제를 해결해 보았습니다~ let phone_number = "01033334444"; function solution(p.. 2022. 10. 31.
프로그래머스 1단계 - 수박수박수박수박수박수? 🍉수박수박수박수박수박수? 🍉문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 조건 🍉n은 길이 10,000이하인 자연수입니다. 입출력 예시 n return 3 "수박수" 4 "수박수박" 🍉내가 한 풀이 for()문과 if()문을 이용하여 수박수를 만들어 보았습니다~ const n = 3; function solution(n) { var answer = ''; for(let i = 0; i < n; i++){ if(i % 2 == 0){ answer += "수"; } else { answer += "박"; } } return answer;.. 2022. 10. 31.
프로그래머스 1단계 - 평균 구하기 🥐평균 구하기 🥐문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 조건 🥐arr은 길이 1 이상, 100 이하인 배열입니다. 🥐arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예시 arr return [1,2,3,4] 2.5 [5,5] 5 🥐내가 한 풀이 for()를 이용하여 문제를 해결해 보았습니다. const arr = [1,2,3,4]; function solution(arr) { var answer = 0; for(let i = 0; i < arr.length; i++){ answer = answer + arr[i]; } answer = answer / arr.length; return answer; } co.. 2022. 10. 30.
프로그래머스 1단계 - 짝수와 홀수 구하기 🍕짝수와 홀수 구하기 🍕문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 🍕제한 조건 🍕num은 int 범위의 정수입니다. 🍕0은 짝수입니다. 입출력 예시 num return 3 "Odd" 4 "Even" 🍕내가 한 풀이 if()를 사용하여 num을 2로 나누었을때, 나머지가 0이면 "Even", 그렇지 않을 경우 "Odd"를 반환하도록 하였습니다. const num = 3; function solution(num) { var answer = ''; if(num % 2 == 0){ answer = "Even"; } else { answer = "Odd"; } return answer; } solution(num); 🍕다른.. 2022. 10. 30.
gameEffect - 뮤직플레이어 만들기 뮤지플레이어를 만들어 보도록 합시다~(뮤직플레이어 새롭게 디자인 중입니다.....) 원본 소스 보기 Script //선택자 const musicWrap = document.querySelector(".music__wrap"); const musicView = musicWrap.querySelector(".music__view .img img"); const musicName = musicWrap.querySelector(".music__view .title h3"); const musicArtist = musicWrap.querySelector(".music__view .title p"); const musicAudio = musicWrap.querySelector("#main-audio"); const.. 2022. 10. 23.
searchEffect - 07 스크립트를 이용한 서치효과 만들기 07 검색 게임을 만들어 봅시다~! 원본 소스 보기 Script const searchTime = document.querySelector(".time span"); const searchList = document.querySelector(".search__list"); const searchAnwers = document.querySelector(".search__answers"); const searchMissAnwers = document.querySelector(".search__missAnswers"); const searchStart = document.querySelector(".search__box .start"); const searchInput = d.. 2022. 10. 21.
searchEffect - 06 스크립트를 이용한 서치효과 만들기 06 스크립트를 이용하여 CSS 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script const cssList = document.querySelector(".search__list .line"); let cssProp = []; //데이터 출력하기 const updateList = () => { let listCSS = ""; cssProperty.forEach((data, index) => { listCSS += ` ${data.num}. ${data.name} : ${data.desc} `; cssProp.push(`${data.num}. ${data.name} : ${data.desc}`); }); cssList.innerHTML = listCS.. 2022. 10. 20.
sliderEffect - 05 스크립트를 이용한 슬라이드 효과 만들기 05 버튼과 닷메뉴를 이용한 슬라이드를 만들어 봅시다~ 원본 소스 보기 CSS .slider__dot { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; } .slider__dot .dot { width: 20px; height: 20px; background: rgba(0,0,0,0.4); display: inline-block; border-radius: 50%; text-indent: -9999px; transition: all 0.3s; margin: 2px; } .slider__dot .dot.active { background: rgba(255,255,255,0.9); }.. 2022. 10. 20.
searchEffect - 04 스크립트를 이용한 서치효과 만들기 04 스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다. 원본 소스 보기 Script const cssProperty = [ { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." }, { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." }, { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." }, ⁝ ]; //선택자 const searchList = document.querySelector(".search__list"); //속성 리스트 const searchNum = document.que.. 2022. 9. 29.
mouseEffect - 05 스크립트를 이용한 마우스효과 만들기 05 기울기 효과와 글씨 반전 효과되는 효과를 만들어 봅시다. 원본 소스 보기 Javascript const mouseMove = (e) => { //마우스 좌표값 let mousePageX = e.pageX; //마우스 좌표값 설정 let mousePageY = e.pageY; //마우스 좌표 기준점을 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; //전체화면에서 반을 나누어 마우스의 좌표 값을 빼주면 마우스 좌표값이 가운데로 초기화 let centerPageY = window.innerHeight / 2 - mousePageY; //최소값 = -150, 최대값 = 150 let maxPageX = Ma.. 2022. 9. 29.
filter(), map(), Array.from() filter(), map(), Array.from() filter(), map(), Array.from() 메서드에 대해 알아 봅시다. filter() filter() 메서드는 조건을 걸 수 있습니다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.filter(el => el === 300); document.querySelector(".sample12_N1").innerHTML = "1"; document.querySelector(".sample12_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample12_M1").inner.. 2022. 9. 28.
indexOf() / lastIndexOf() / includes(), find() / findIndex() indexOf() / lastIndexOf() / includes(), find() / findIndex() indexOf() / lastIndexOf() / includes(), find() / findIndex() 메서드에 대해 알아 봅시다. indexOf() / lastIndexOf() / includes() indexOf() 메서드는 배열 요소를 검색할 때 사용,lastIndexOf() 메서드는 배열 요소 끝에서 검색할 때 사용, includes() 메서드는 배열 요소가 있는지 없는지 검색합니다. 번호 기본값 메서드 리턴값 const arrNum = [100, 200, 300, 400, 500]; const arrIndex = arrNum.indexOf(200); document.querySele.. 2022. 9. 28.
unshift() / shift(), reverse() / sort(), concat() unshift() / shift(), reverse() / sort(), concat() unshift() / shift(), reverse() / sort(), concat() 메서드에 대해 알아 봅시다. unshift() / shift() unshift() 메서드는 배열 처음 요소에 추가, shift() 메서드는 배열 처음 요소에 삭제 번호 기본값 메서드 리턴값 결과값 const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift =arrNum1.unshift(600); document.querySelector(".sample04_N1").innerHTML = "1"; document.querySelector(".sample04_Q1").innerHT.. 2022. 9. 28.
reduce() / reduceRight(), slice(), splice() reduce() / reduceRight(), slice(), splice() reduce() / reduceRight(), slice(), splice() 메서드에 대해 알아 봅시다. reduce() / reduceRight() reduce() / reduceRight() 메서드는 배열 요소를 하나로 정리해 줍니다. 번호 기본값 메서드 리턴값 const arrNum1 = [100, 200, 300, 400, 500]; const arrReduce1 = arrNum1.reduce(element => element); document.querySelector(".sample07_N1").innerHTML = "1"; document.querySelector(".sample07_Q1").innerHTML =.. 2022. 9. 28.
CSS - 눈이 움직이는 애니메이션 눈이 움직이는 애니메이션 마우스와 키보드를 따라 눈이 움직이는 애니메이션을 만들어 보아요👀 CSS * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 369px; height: 547px; transform-style: preserve-3d; } .me { position: absolute; width: 369px; height: 547px; transform: translatez(80px) scale(0.8); }.. 2022. 9. 26.
CSS - 로딩 화면 애니메이션 로딩화면 로딩화면을 만들어 보아요😏 CSS body { background-color: #FA9494; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; animation: spin 1s infinite ease-in-out; } .ball::after { content: ''; position:.. 2022. 9. 26.
CSS - 움직이는 육면체 움직이는 육면체 나도 이게 뭔지 몰라요.....;;; CSS body { background-color: #FFB3B3; height: 100vh; perspective: 1000px; display:flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style: preserve-3d; transform: rotatex(-20deg) rotatey(-140deg) translatez(0); animation: rotate 8000ms linear infinite; } .cube div { display: flex; align-items: ce.. 2022. 9. 22.
CSS - 통통 튀는 글자 효과 글자 효과 통통 튀는 글자의 효과를 만들어 봅시다~ CSS @font-face { font-family: 'EF_Hyunygothic'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/earlyfont/EF_Hyunygothic.woff2') .. 2022. 9. 22.

자바스크립트

Javascript

자세히 보기
html
css
광고 준비중입니다.
<