프로그래머스 1단계 - 문자열 내 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" true "Pyy" false 입출력 예 설명 입출력 예 #1 'p'의 개수 2개, 'y'의..
프로그래머스 1단계 - 핸드폰 번호 가리기 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 • phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_number return "01033334444" "*******4444" "027778888" "*****8888" 문제 풀이 phone_number 뒤의 4개 제외하고 *, 뒤의 4자리를 붙여서 출력 function solution(phone_number) { return "*".repe..
프로그래머스 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] 문제 풀이 for, push function solution(x, n) { var answer = []; for(let i=1; i (i + 1) * v) } 문제 풀기
프로그래머스 1단계 - 나머지가 1이 되는 수 찾기 이 항상 존재함은 증명될 수 있습니다. 제한 사항 • 3 ≤ n ≤ 1,000,000 입출력 예 n result 10 3 12 11 입출력 예 설명 입출력 예 #1 • 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다. 입출력 예 #2 • 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다. 문제 풀이 1이상 n미만, 나머지가 1이 되는 i 구하기 function solution(n) { let answer = 0; for(let i = 1; i < n; i++) { if(n % i =..
프로그래머스 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()를 이용해서 "Kim"을 찾음. function solution(seoul) { var answ..
프로그래머스 1단계 - 문자열을 정수로 바꾸기 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 조건 • s의 길이는 1 이상 5이하입니다. • s의 맨앞에는 부호(+, -)가 올 수 있습니다. • s는 부호와 숫자로만 이루어져있습니다. • s는 "0"으로 시작하지 않습니다. 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. 문제 풀이 Number() 문자열을 숫자로 변환하는 함수 function solution(s) { return Number(s); } 다른 사람의 풀이 string에 *,/ 혹은 나누게..
프로그래머스 1단계 - 수박수박수박수박수박수? 문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 제한 조건 • n은 길이 10,000이하인 자연수입니다. 입출력 예 n return 3 "수박수" 4 "수박수박" 문제 풀이 n이 3이면 i는 2이고, 나머지가 0이면 "수"를 더하여 수박수 function solution(n) { var answer = ''; for(let i = 0; i "수박".repeat(n).slice(0,n); console.log("n이 3인 경우: "+ waterMelon(3)) console.log("n이 4인 경..
프로그래머스 1단계 - 정수 제곱근 판별 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 사항 • n은 1이상, 50000000000000 이하인 양의 정수입니다. 입출력 예 N return 121 3 144 -1 입출력 예 설명 입출력 예#1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예#2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. 문제 풀이 양의 정수 제곱 판단 위해, if로 Math.sqrt() 이용. Math.pow로 숫자 1을 더한 뒤, 제곱한 값..
프로그래머스 1단계 - 자연수 뒤집어 배열로 만들기 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 • n은 10,000,000,000이하인 자연수입니다. 입출력 예 n return 12345 [5,4,3,2,1] 문제 풀이 toString()으로 문자열로 변환, split()으로 쪼개고, reverse()로 역순, 다시 숫자로 Number() function solution(n) { return n.toString().split('').reverse().map(n => Number(n)); } 다른 사람의 풀이 문자 풀이와 숫자 풀이 function solution(n) { // 문자풀이 ..
프로그래머스 1단계 - 자릿수 더하기 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 조건 • N의 범위 : 100,000,000 이하의 자연수 입출력 예 N answer 123 6 987 24 입출력 예 설명 입출력 예 #1 문제의 예시와 같습니다. 입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다. 문제 풀이 String()으로 숫자를 문자로 변환후 num안에 있는 값들을 더해줍니다. parseInt()는 정수 변환 function solution(n) { var answer = 0; var num=String(n..
게임이펙트-메모리게임 메모리게임 만들기 원본 소스 보기 원본 사이트 html 앞에 보일 이미지와 뒤에 보일 이미지를 넣어줍니다. 코드보기 js01 선택자, 함수 생성 const memoryWrap = document.querySelector(".memory__wrap"); const memoryCards = memoryWrap.querySelectorAll(".cards li"); let cardOne, cardTwo; let disableDeck = false; let matchedCard = 0; let sound = [ "../assets/audio/match.mp3", "../assets/audio/unmatch.mp3", "../assets/audio/success.mp3", ]; let sou..
프로그래머스 1단계 - 약수의 합 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 조건 n은 0 이상 3000이하인 정수입니다.. 입출력 예 num return 12 28 5 6 입출력 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 입출력 예 #2 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. 문제 풀이 나누어 떨어지는 값이 약수이기에, for문을 증가하면서 나누었을때 나머지가 0이 되는 수를 더했습니다. function solution(n) { var answer = 0; for(let i=0; i
프로그래머스 1단계 - 평균 구하기 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 조건 • arr은 길이 1 이상, 100 이하인 배열입니다. • arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 문제 풀이 arr 배열 안에 값이 있기에 그 값들을 더한 뒤, 더한 값을 배열의 길이로 나눠 줍니다. function solution(arr) { var answer = 0; for (let i=0; i a + b) / array.length; } 문제 풀기
프로그래머스 1단계 - 짝수와 홀수 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 조건 • num은 int 범위의 정수입니다. • 0은 짝수입니다. 입출력 예 num return 3 "Odd" 4 "Even" 문제 풀이 num을 2로 나눴을때 0이면 짝수. 짝수일 경우에 "Even" 반환, 홀수인 경우 "Odd"를 반환. 삼항연산자를 통해 진행. ?(물음표) 이후에 참인 경우 바로 앞의 값, 거짓의 경우 다음 값이 실행되는 것을 사용. function solution(num) { return num % 2 == 0 ? "Even" : "Odd"; } 다른 사람의 풀이 0을 굳이 사용하지 않고도 가능하다는 것이 확..
게임이펙트-뮤직플레이어 게임이펙트의의 초기 설정과 뮤직플레이어 원본 소스 보기 원본 사이트 js01 아이콘들의 드래그가 가능하도록 jquery를 사용하였습니다. draggable메서드를 활용하여 드래그를 진행하고 그에 따른 마우스의 변경을 위한 attr메서드를 사용하였습니다. 시간에 대한 변경을 printTime() 함수 내에서 진행합니다. 연도는 getFullYear(), 월은 getMonth(), 일은 getDate()를 이용합니다. getMonth()는 0~11로 1을 더해줘야 현재의 달에 대한 정보가 출력됩니다. 시간은 getHours(), 분은 getMinutes(), 초는 getSeconds()를 이용합니다. setTimeout를 이용해서 1초 단위로 업데이트 되도록 했습니다. 이후 사용자의 ..
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 지금까지의 슬라이더를 모두 다룹니다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 개별적인 이미지에 slider 클래스를 부여했습니다. 코드보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next css 생성한 버튼과 닷 메뉴에 대한 css를 진행합니다. 코드보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .s..
searchEffect07 2분 동안 CSS 속성 검색하기 원본 소스 보기 원본 사이트 HTML 검색을 진행하는 동안에 진행 될 음악, 진행 시에 사용되는 타이머 등의 필요한 구조를 구성합니다. 코드보기 CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 힌트보기는 한번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS css 구조를 구성합니다 코드보기 #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { positi..
searchEffect06 sort(), reverse()를 이용하여 정렬하기 원본 소스 보기 원본 사이트 HTML 속성별로 클릭 가능하게 코드보기 sort(), reverse()를 이용하여 정렬하기 CSS 속성 정렬하기 반대로 정렬하기 오름차순 정렬하기 내림차순 정렬하기 알파벳순 (a~z) 알파벳순 (z~a) 랜덤 정렬하기 전체 속성 갯수 : 0 CSS css 구조 코드보기 /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header nav li { position: relative; display: inline; } #header nav li a { width: 30..
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 이전에 방식인 버튼과 닷메뉴 방식에서 지속적으로 페이지가 넘어가는 방식을 추가하였습니다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 개별적인 이미지에 slider 클래스를 부여했습니다. 코드보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next css 생성한 버튼과 닷 메뉴에 대한 css를 진행합니다. 코드보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center..
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 버튼을 눌러서 이전과 다음 이미지로 슬라이드 되며, 닷 메뉴로도 이미지의 전환을 하는 슬라이드 효과를 만들어봅시다. 원본 소스 보기 원본 사이트 html slider__btn에 prev, next 버튼을 만들어 줍니다. 닷 메뉴 추가를 위해서 slider__dot을 추가합니다. 코드보기 prev next css 생성한 버튼과 닷 메뉴에 대한 css를 진행합니다. 코드보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지 보이는 영역 */ position..
패럴렉스 이펙트 - 리빌 효과 스크롤 하면서 가려져있던 사진과 글이 보이는 효과 원본 소스 보기 원본 사이트 html 효과를 부여하기 위해서, 효과가 나타나기를 원하는 content__item__imgWrap, content__item__desc에 reveal클래스를 부여합니다. 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는..
패럴렉스 이펙트 - 텍스트 효과 텍스트가 스크롤하며 한글자씩 나오는 방식 원본 소스 보기 원본 사이트 html 글씨를 쪼개기 위해서 클래스 content__item__desc 옆에 split 추가 코드보기 01 section1 얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다. 02 section2 지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진 물이다. 03 section3 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. 04 section4 실수할 자유가 없는 자유란 가치가 없다. 05 section5 끝까지 해보기 전까지는 늘 불가능해 보입니다. 06 section6 고통은 잠깐이다. 포기는 영원히 남는다. 07 section7 희망을 품지 않은 자는 절망도 할 수 없다. ..
마우스 이펙트 - 텍스트 효과 마우스의 움직임에 따라 글자가 움직이고 마우스를 텍스트 위에 올리면 마우스 커서에 효과가 나타납니다. 원본 소스 보기 원본 사이트 html 글자를 왼쪽, 오른쪽에 같은 단어가 겹치면서 효과가 발생하기에 그에 따른 틀을 잡아줍니다. 코드보기 Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. css transform: skew();를 이용하여 글자에 기울기 효과를 부여합니다. mix-blend-mode: difference;를 이용하여 커서가 올라갔을 때의 배경색과의 반전을 줍니다. 코드보기 /* mouseType */ .mouse__wrap { color: #fff; width: 100%; heig..
searchEffect05 filter()를 이용하여 속성의 중요도 보여주기 원본 소스 보기 원본 사이트 HTML 중요도에 따라서 확인하기 위한 .search__click 속성 갯수 보여주는 .search__info 속성 리스트 .search__list 코드보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 CSS 마우스 hover시의 색상 변화 등 코드보기 /* header */ #header { display: flex; justify-content: space-between; } #header nav { margin: 10px; } #header..
searchEffect04 find()를 이용하여 속성을 검색하면 설명 보여주기 원본 소스 보기 원본 사이트 HTML 검색을 하거나 키워드를 누르면 결과를 보여주기 위한 틀을 잡아 줍니다. find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시 됩니다. 전체 속성 갯수 : 0 CSS 검색 결과를 보여주는 css에 대한 수정 :root { --htmlColor: #223547; --cssColor: #472222; --javascriptColor: #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "NexonLv1Gothic"; color: var(--htmlCol..
마우스 이펙트 - 기울기 효과 / 글씨 반전 효과 마우스의 움직임에 따라 기울기가 변동되고 글씨도 움직이는 효과를 만들어줍니다. 원본 소스 보기 원본 사이트 html mouse__info를 추가하여 위치를 확인할 수 있게했습니다. 코드보기 Think like a man of action, act like a man of thought. 행동하는 사람처럼 생각하고, 생각하는 사람처럼 행동하라. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px maxPageX : 0px maxPageY : 0px anglePageX : 0px anglePageY : 0px css figure::before에 그림자 효과를 넣어주고, figcaptio..
startsWith(), endsWith() startsWith() / endsWith() startsWith()메서드는 시작하는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWith()메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWith(검색 문자열); "문자열".startsWith(검색 문자열, 위치값); "문자열".endsWith(검색 문자열); "문자열".endsWith(검색 문자열, 시작 위치값); js const str1 = "javascript reference"; const currentStr1 = str1.startsWith('javascript'); const currentStr2 = ..
filter(), map(), Array.from() filter() filter()메서드는 조건에 만족하는 배열 요소 검색할 때 사용하며 배열로 반환합니다. 번호 기본값 메서드 리턴값 js 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").innerHTML = "filter(el => ..
find(), findIndex() find() / findIndex() find()메서드는 배열 요소를 검색할 때 사용합니다. 조건에 일치하는 요소의 값을 반환하며 없을 경우 undefined를 반환합니다. findIndex()메서드는 배열 요소를 검색할 때 사용하며 인덱스로 반환하며 조건에 일치하는 값이 없을 경우 -1을 반환합니다. 번호 기본값 메서드 리턴값 js //01. find() const arrNum = [100, 200, 300, 400, 500]; // const result = arrNum.find(function(element){ // return element === 300; // }); // const result = arrNum.find((element) => { // retu..
indexOf(), lastIndexOf(), includes() indexOf() / lastIndexOf() / includes() indexOf()메서드는 배열 요소를 검색할 때 사용하며 숫자로 반환합니다. lastIndexOf()메서드는 배열 요소를 끝에서 검색하여 숫자로 반환합니다. includes()메서드는 배열 요소를 검색하여 불린(true, false)으로 반환합니다. 번호 기본값 메서드 리턴값 js const arrNum = [100, 200, 300, 400, 500]; const arrIndex = arrNum.indexOf(200); document.querySelector(".sample10_N1").innerHTML = "1"; document.querySelector(".sam..
