ss '분류 전체보기' 카테고리의 글 목록 (2 Page)
본문 바로가기

카테고리170

프로그래머스 1단계 : 문자열을 정수로 바꾸기 알고리즘10 📝 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 👉 제한 조건 - s의 길이는 1 이상 5이하입니다. - s의 맨앞에는 부호(+, -)가 올 수 있습니다. - s는 부호와 숫자로만 이루어져있습니다. - s는 "0"으로 시작하지 않습니다. 👉 입출력 예 - 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. - str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. ✌️ 나의 풀이 굳이 설명하지 않아도 다들 아시겠지만 문자열을 숫자로 변환하기 위해 Number를 사용했습니다. Number 생성자는 숫자를 다루기 위해 상수와 메소드를 가지고 있습니다. functio.. 2022. 11. 5.
프로그래머스 1단계 : 서울에서 김서방 찾기 알고리즘09 📝 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 👉 제한 사항 - seoul은 길이 1 이상, 1000 이하인 배열입니다. - seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. - "Kim"은 반드시 seoul 안에 포함되어 있습니다. 👉 입출력 예 seoul return ["Jane", "Kim"] "김서방은 1에 있다" ✌️ 나의 풀이 처음에 문제 제대로 안 읽고 "Kim"만 찾는건가? 했는데 아니더라구요^^ indexOf() 이용해서 간단하게 풀었습니다. fu.. 2022. 11. 4.
프로그래머스 1단계 : 핸드폰 번호 가리기 알고리즘08 📝 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요.. 👉 제한 조건 - phone_number는 길이 4 이상, 20이하인 문자열입니다. 👉 입출력 예 phone_number return "01033334444" "*******4444" "027778888" "*****8888" ✌️ 나의 풀이 split()을 이용해 한글자씩 떼어놓고 배열로 반환해 총 길이에서 끝에 4개를 뺀 값만 "*"로 반환하여 join()을 이용해 문자열을 다시 결합하였습니다. fun.. 2022. 11. 3.
프로그래머스 1단계 : 수박수박수박수박수박수? 알고리즘07 📝 문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 👉 제한 조건 - n은 길이 10,000이하인 자연수입니다. 👉 입출력 예 n return 3 "수박수" 4 "수박수박" ✌️ 나의 풀이 자바스크립트 시험칠 때 풀었던게 생각나서 그 방법을 써서 풀이하였습니다. 반복문 안에 조건문을 걸어서 해결했습니다. function solution(n) { let answer = ""; for(i=0; i { return '수박'.repeat(n/2) + (n%2 === 1 ? '수' : ''); } 👍 다른 풀이2 repeat()과 sli.. 2022. 11. 2.
프로그래머스 1단계 : 문자열 내 p와 y의 개수 알고리즘06 📝 문제 설명 대문자와 소문자가 섞여있는 문자열 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 👉 입출력 예 설명 - 'p'의 개수 2개, 'y'의 개수 2개로 같으므로 t.. 2022. 11. 1.
프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 알고리즘05 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 조건 - n은 10,000,000,000이하인 자연수입니다. 입출력 예 n return 12345 [5,4,3,2,1] 나의 풀이 string(), split(), reverse(), map()을 이용하여 풀이하였습니다. 배운 메서드들을 최대한으로 활용해 보았습니다. function solution(n) { return String(n).split('').reverse().map(Number) } 다른 풀이 do while문을 이용한 풀이방법입니다. function solution(n){ var arr = []; do { arr.push.. 2022. 10. 31.
프로그래머스 1단계 : 자릿수 더하기 알고리즘04 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 사항 - N의 범위 : 100,000,000 이하의 자연수 입출력 예 N answer 123 6 987 24 나의 풀이 string을 이용해 문자로 바꾼 후 split으로 하나씩 나누어 reduce를 이용해 모두 더합니다. function solution(n){ const answer = String(n).split('').reduce((acc,cur)=> acc += Number(cur),0); return answer; } 다른 풀이 string을 쓰지 않고 (n + "")를 이용해 .. 2022. 10. 31.
프로그래머스 1단계 : 평균 구하기 알고리즘03 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 사항 - arr은 길이 1 이상, 100 이하인 배열입니다. - arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 입출력 예 arr return [1, 2, 3, 4] 2.5 [5, 5] 5 나의 풀이 reduce 메서드를 이용하여 배열들을 모두 더한 후 길이만큼 나누어 줍니다. function solution(x) { let answer = 0; answer = x.reduce((a, b) => a + b) / x.length; return answer; } 다른 풀이 for문을 이용하여 배열들을 더한 후 길이만큼 나누는 방법입니다. function averag.. 2022. 10. 31.
프로그래머스 1단계 : 약수의 합 알고리즘02 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 - n은 0 이상 3000이하인 정수입니다. 입출력 예 n return 12 28 5 6 입출력 예 설명 - 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. - 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. 나의 풀이 for문 안에 조건문을 걸어 나누었을 때 나머지가 0이 되는 수들을 모두 더하였습니다. function solution(n) { var answer = 0; for(let i=1; i 2022. 10. 31.
프로그래머스 1단계 : 짝수와 홀수 알고리즘01 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 조건 - num은 int 범위의 정수입니다. - 0은 짝수입니다. 입출력 예 num return 3 "Odd" 4 "Even" 나의 풀이 삼항연산자를 사용하여 num에서 2에서 나눈 나머지가 0이면 짝수, 아니면 홀수를 반환하게 하였습니다. function solution(num) { var answer = ''; return num % 2 == 0 ? "Even" : "Odd"; } 다른 풀이 0은 false라는 것을 이용하여 풀이하였습니다. function evenOrOdd(num) { return num % 2 ? "Odd" : "Even"; } 2022. 10. 30.
SEARCH Effect 07 검색 효과07 이번에는 게임 검색하기 게임을 만들어 보았습니다. 게임 진행하는 동안 음악도 플레이 되며, 정답 갯수, 오답 등등을 확인할 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 게임음악을 위한 함수, 정답 표시, 오답 표시 등을 위해 여러 함수들을 만들어 사용하였으니 아래의 코드와 설명을 참고해주세요~! const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결.. 2022. 10. 23.
SEARCH Effect 06 검색 효과06 자바스크립트를 이용하여 검색효과 만들 수 있습니다. sort()와 reverse()를 이용하여 반대로 정렬, 내림차순 · 오름차순 정렬, 알파벳순, 랜덤정렬을 하였습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 sort()와 reverse()메서드를 이용하여 출력하였습니다. sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열로 반환합니다. reverse() 메서드는 배열의 순서를 반전합니다. const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc.. 2022. 10. 23.
SLIDER Effect 07 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 이번에는 지금까지 했던 기능들에 자동플레이, 플레이 버튼, 정지 버튼이 추가되었습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. 자동으로 슬라이드가 재생되며, 플레이버튼, 정지버튼을 통해 슬라이드를 정지 또는 재생시킬 수 있습니다. 또한, 이미지 위에 마우스를 올리면 슬라이드가 멈추고, 다시 마우스를 떼면 슬라이드가 재생됩니다. const sliderWrap = document.querySelector(".slider__wrap"); // 전체 이미지 슬라이드 const sliderImg = document.querySelector(".slider.. 2022. 10. 23.
SLIDER Effect 06 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 마지막 슬라이더에서 next 버튼 눌렀을 때 앞으로 다시 스르륵 이동하는 것이 아니라 자연스럽게 옆으로 넘어가는 방식입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 마지막 슬라이드에서 자연스럽게 첫 번째 슬라이드로 넘어가기 위해 첫 번째 이미지를 마지막 사진 옆으로 복사하고, 첫 번째 사진에서 마지막 사진으로 다시 이동할 때, 마지막 이미지를 복사하여 첫번째 사진 .. 2022. 10. 23.
SLIDER Effect 05 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 아래에 닷메뉴도 추가되었는데, 닷버튼을 하나씩 클릭하면 해당 슬라이드로 이동합니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 방식 슬라이드 효과를 위한 자바스크립트 작성법입니다. next 버튼을 눌렀을 때는 왼쪽 방향으로, prev 버튼을 눌렀을 때는 오른쪽 방향으로 슬라이드가 움직입니다. 자세한 설명은 아래를 참고해 주세요~! const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); .. 2022. 10. 23.
PARALLAX Effect 07 패럴랙스 효과07 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 가려져 있던 그림과 글씨가 스크롤을 내리면서 점점 드러납니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. //reveal 클래스 자식에 글씨가 있다면, 가상으로 span태그 만들어 넣어주기 const revealText = document.querySelectorAll(".reveal"); revealText.forEach((el) => { let splitText = el.innerText; if (splitText) { el.innerHTML = '' + splitText + ''; } }) //자기 자신을 호출하는 재귀함수 사용 function scroll() { .. 2022. 10. 10.
PARALLAX Effect 06 패럴랙스 효과06 자바스크립트를 이용하여 패럴랙스 효과를 만들 수 있습니다. 글씨가 하나씩 쪼개져서 나타나는 효과를 만들었습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 패럴랙스 효과를 만들기 위한 자바스크립트 작성법입니다. // 글씨 나누기 // let text = document.querySelector("#section1 .content__item__desc"); // let splitText = text.innerText; // let splitWrap = splitText.split('').join(''); // text.innerHTML = splitWrap = "" + splitWrap + ""; //글씨 쪼개기(다중이) // text.forEach((e, i) => { // let .. 2022. 9. 29.
Mouse Effect 06 마우스 효과06 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이번에는 텍스트 효과로, 마우스 방향에 따라 글씨가 좌, 우로 움직입니다. 또한, 텍스트에 마우스를 올렸을 때 커서가 확대되고 글씨가 반전되는 효과가 나타납니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. const mouseMove = (e) => { let positionSlow = (e.pageX - (window.innerWidth / 2)) * 0.1; //가운데 정렬, * 0.1 은 이질감 효과 let positionFast = (e.pageX - (window.innerWidth / 2)) * 0.2; //속도조절 gsap.to(".spanSlow", { dura.. 2022. 9. 29.
SEARCH Effect 05 검색 효과05 자바스크립트를 이용하여 검색효과 만들 수 있습니다. filter()를 이용하여 속성의 중요도를 보여줍니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 filter()메서드를 이용하여 출력하였습니다. filter() 메서드는 조건에 일치하는 배열 요소를 검색하여 배열로 반환합니다. const cssProperty = [ //배열 속의 객체 형태로 속성 정보 저장 { name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다." }, { name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성입니다." }, { name: "a.. 2022. 9. 29.
SEARCH Effect 04 검색 효과04 자바스크립트를 이용하여 검색효과 만들 수 있습니다. find()를 이용하여 속성을 검색하면 설명 보여주고, 속성을 클릭하면 설명을 볼 수 있습니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 검색효과를 만들기 위한 자바스크립트 작성법입니다. 여기서는 find()메서드를 이용하여 출력하였습니다. find() 메서드는 조건에 일치하는 배열 요소를 검색하여 요소를 반환합니다. const cssProperty = [ //배열 속의 객체 형태로 속성 정보 저장 { name: "all", desc: "all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다." }, { name: "animation", desc: "animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성.. 2022. 9. 28.
Mouse Effect 05 마우스 효과05 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이번 효과는 기울기와 글씨 반전 효과입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. const mouseMove = (e) => { //마우스 좌표값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 기준점 가운데로 변경 let centerPageX = window.innerWidth / 2 - mousePageX; let centerPageY = window.innerHeight / 2 - mousePageY; //최소값은 -100, 최대값은 100설정 let maxPageX = Math.max(-200, Mat.. 2022. 9. 28.
[javascript]find(), findIndex(), filter(), map(), Array.from() 배열 Method[find(), findIndex(), filter(), map(), Array.from()] 배열은 다양한 메서드를 제공합니다. 오늘은 find(), findIndex(), filter(), map(), Array.from()메서드에 대해 알아보겠습니다. 1. find() / findIndex() find()메서드는 배열 요소를 검색할 때 사용합니다. 조건에 일치하는 요소의 값을 반환하며 없을 경우 undefined를 반환합니다. findIndex()메서드는 배열 요소를 검색할 때 사용하며 인덱스로 반환하며 조건에 일치하는 값이 없을 경우 -1을 반환합니다. 번호 기본값 메서드 리턴값 * script //01. find() const arrNum = [100, 200, 300, 400,.. 2022. 9. 27.
[javascript]slice(), splice(), indexOf(), lastIndexOf(), includes() 배열 Method[slice(), splice(), indexOf(), lastIndexOf(), includes()] 배열은 다양한 메서드를 제공합니다. 오늘은 slice(), splice(), indexOf(), lastIndexOf(), includes()메서드에 대해 알아보겠습니다. 1. slice() slice()메서드는 배열 요소를 다른 요소로 변경하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 * script const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.slice(2); document.querySelector(".sample08_N1").innerHTML = "1"; document.querySelector(".sam.. 2022. 9. 27.
[javascript]concat(), reduce(), reduceRight() 배열 Method[concat(), reduce(), reduceRight()] 배열은 다양한 메서드를 제공합니다. 오늘은 concat(), reduce(), reduceRight()메서드에 대해 알아보겠습니다. 1. concat() concat()메서드는 배열의 요소를 결합하여 배열로 반환합니다. 번호 기본값 메서드 리턴값 * script const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600]; const arrConcat = arrNum1.concat(arrNum2); document.querySelector(".sample06_N1").innerHTML = "1"; document.querySelector(".sample06_Q1").in.. 2022. 9. 27.
[javascript]unshift(), shift(), reverse(), sort() 배열 Method[unshift(), shift(), reverse(), sort()] 배열은 다양한 메서드를 제공합니다. 오늘은 unshift(), shift(), reverse(), sort()메서드에 대해 알아보겠습니다. 1. unshift() / shift() unshift()메서드는 배열 처음 요소에 추가하여 숫자로 반환하고, shift() 메서드는 배열 처음 요소 삭제해 삭제한 요소를 반환합니다. 번호 기본값 메서드 리턴값 결과값 * script // 01.unshift() const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_N1".. 2022. 9. 27.
[javascript]startsWith() / endsWith() 문자열 Method[startsWith(), endsWith()] 오늘은 startsWith(), endsWith()메서드에 대해 알아보겠습니다. 1. startsWith() / endsWith() startsWith()메서드는 시작하는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWith()메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWith(검색 문자열); "문자열".startsWith(검색 문자열, 위치값); "문자열".endsWith(검색 문자열); "문자열".endsWith(검색 문자열, 시작 위치값); * script const str1 = "javascript reference"; const.. 2022. 9. 27.
[CSS]애니메이션08 애니메이션07 오늘은 아래와 같이 마우스 움직임이나 키보드 방향키에 따라 눈알과 카드가 돌아가는 애니메이션을 만들어 보았습니다. See the Pen Untitled by Kim-chanmi (@kim-chanmi) on CodePen. HTML ABCDE 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: pre.. 2022. 9. 26.
[CSS]애니메이션07 애니메이션07 오늘은 아래와 같이 동그라미가 원을 그리며 돌아가는 애니메이션을 만들어 보았습니다. See the Pen animation07 by Kim-chanmi (@kim-chanmi) on CodePen. HTML 큰 div태그에 class="loader"를 입력합니다. loader 안에 div박스 10개를 만들어줍니다. CSS 애니메이션을 위한 css입니다. body { background-color: #ffdde1; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite rever.. 2022. 9. 25.
Mouse Effect 04 마우스 효과04 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이미지 안에서만 커서 모양이 바뀌고, 마우스를 움직일 때 마우스 방향에 따라 이미지가 움직입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. 이번에도 gsap를 이용하여 효과를 주었습니다. const cursor = document.querySelector(".mouse__cursor") const cursorRect = cursor.getBoundingClientRect(); //커서의 너비/높이값 구하기 document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => { //가운데 이미지 .. 2022. 9. 22.
Mouse Effect 03 마우스 효과03 자바스크립트를 이용하여 마우스 효과를 만들어 보겠습니다. 이미지에 마우스를 올렸을 때 조명을 비춘 것처럼 보이는 효과입니다. 원본 소스 보기 원본 사이트 보기 자바스크립트 마우스 효과를 만들기 위한 자바스크립트 작성법입니다. gsap를 이용하여 효과를 주었습니다. const cursor = document.querySelector(".mouse__cursor"); // const circleW = cursor.offsetWidth; //200 -> 보더/패딩 포함한 가로값 // const circleH = cursor.offsetHeight; //200 -> 보더/패딩 포함한 세로값 // const circle2 = cursor.clientWidth; //190 -> 보더/마진 제외한 가.. 2022. 9. 22.
728x90

HTML
CSS
JAVASCRIPT

JAVASCRIPT

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