본문 바로가기

728x90

깜냥깜냥🐾코딩 혜윰_오란씨112

알고리즘(13) : 정수 내림차순으로 배치하기 _ Lv.1 ⭐️ 알고리즘(13) : 정수 내림차순으로 배치하기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 함수 solution은 정수 n을 매개변수로 입력받습니다. 🧩 n의 각 자릿수를 큰 것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 🧩 예를 들어 n이 118372면 873211을 리턴하면 됩니다. 🔒 제한 조건 : n은 1이상 8000000000 이하인 자연수입니다. 02. " solution.js " 문제 풀어보기 💡 정수 n 을 문자열 배열로 나눈 뒤에 각 요소에 대해 내림차순으로 정렬하고, 나눈 요소들을 다시 합쳐보자. function solution(n) { let change = n + ""; // 숫자 + "" 빈 문자열 -> 문자열로 바꾸기 let answer = change.split('').. 2022. 11. 8.

알고리즘(12) : 핸드폰 번호 가리기 _ Lv.1 ⭐️ 알고리즘(12) : 핸드폰 번호 가리기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 🧩 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 🧩 예를 들어 "01033334444"를 입력하면 "*******4444"가 반환됩니다. 🧩 - "027778888"를 입력하면 "*****8888"가 반환됩니다. 🔒 제한 조건 : phone_number는 길이 4 이상, 20이하인 문자열입니다. 02. " solution.js " 문제 풀어보기 💡 문자열 전체 길이에서 4를 뺀만큼 '*'를 반복.. 2022. 11. 7.

알고리즘(11) : 이상한 문자 만들기 _ Lv.1 ⭐️ 알고리즘(11) : 이상한 문자 만들기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 문자열 s는 한 개 이상의 단어로 구성되어 있습니다. 각 단어는 하나 이상의 공백문자로 구분되어 있습니다. 🧩 단어의 짝수번째 알파벳은 대문자로, 홀수번째 알파벳은 소문자로 바꾼 문자열을 리턴하는 함수, solution을 완성하세요. 🧩 예를 들어 "try hello world"는 세 단어 "try", "hello", "world"로 구성되어 있습니다. 🧩 - 각 단어의 짝수번째 문자를 대문자로, 홀수번째 문자를 소문자로 바꾸면 "TrY", "HeLlO", "WoRlD"입니다. 🧩 - 따라서 "TrY HeLlO WoRlD" 를 리턴합니다. 🔒 제한 조건 : ☑️ 문자열 전체의 짝/홀수 인덱스가 아니라, 단어(공백을 기준).. 2022. 11. 6.

알고리즘(10) : 자릿수 더하기 _ Lv.1 ⭐️ 알고리즘(10) : 자릿수 더하기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return하는 solution 함수를 만들어 주세요. 🧩 예를 들어 N = 123이면 1 + 2 + 3 = 6을 return하면 되고, N = 987이면 9 + 8 + 7 = 24이므로 24를 return하면 됩니다. 🔒 제한 조건 : N의 범위 : 100,000,000 이하의 자연수 02. " solution.js " 문제 풀어보기 💡 숫자 N을 문자열로 바꾸고, 한 문자씩 구분한 뒤에 각각의 문자를 모두 더해보자. const big = [123]; const huge = [987]; function solution(n) { return (n + '').split('').. 2022. 11. 6.

알고리즘(9) : 나머지가 1이 되는 수 찾기 _ Lv.1 ⭐️ 알고리즘(9) : 나머지가 1이 되는 수 찾기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 자연수 n이 매개변수로 주어집니다. 🧩 n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 🧩 답이 항상 존재함은 증명될 수 있습니다. 🧩 예를 들어 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다. 🧩 예를 들어 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다. 🔒 제한 조건 : 3 ≤ n ≤ 1,000,000 02. " solution.js " 문제 풀어보기 💡 n 을.. 2022. 11. 4.

알고리즘(8) : 서울에서 김서방 찾기 _ Lv.1 ⭐️ 알고리즘(8) : 서울에서 김서방 찾기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. 🧩 seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 🧩 예를 들어 seoul = ["Jane", "Kim"] "김서방은 1에 있다"를 반환하면 됩니다. 🔒 제한 조건 : ☑️ seoul은 길이 1 이상, 1000 이하인 배열입니다. ☑️ seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. ☑️ "Kim"은 반드시 seoul 안에 포함되어 있습니다. 02. " solution.js " 문제 풀어보기 💡 배열에서 .. 2022. 11. 3.

알고리즘(7) : 가운데 글자 가져오기 _ Lv.1 ⭐️ 알고리즘(7) : 가운데 글자 가져오기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 🧩 단어의 길이가 짝수라면 가운데 두 글자를 반환합니다. 🧩 예를 들어 str이 "abcde"이면 "c"를 반환하고, "qwer"이면 "we"를 반환하면 됩니다. 🔒 제한 조건 : s는 길이가 1 이상, 100이하인 스트링입니다. 02. " solution.js " 문제 풀어보기 💡 가운데 글자는 문자열 길이값을 반으로 나눴을 때 위치임을 생각하고, 문자열의 길이가 짝수와 홀수인 경우를 나눠서 문자열을 부분 출력해보자. const str1 = "level"; const str2 = "updown"; function solution(s) { let .. 2022. 11. 3.

알고리즘(6) : 문자열을 정수로 바꾸기 _ Lv.1 ⭐️ 알고리즘(6) : 문자열을 정수로 바꾸기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 🧩 예를 들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. 🧩 str에 잘못된 값이 입력되는 경우는 없습니다. 🔒 제한 조건 : ☑️ s의 길이는 1 이상 5이하 입니다. ☑️ s의 맨앞에는 부호(+, -)가 올 수 있습니다. ☑️ s는 부호와 숫자로만 이루어져있습니다. ☑️ s는 "0"으로 시작하지 않습니다. 02. " solution.js " 문제 풀어보기 💡 조건에서 문자열은 부호와 숫자로만 구성되어 있으므로, 문자열 그대로를 출력하는 식을 생각해보자. const str = "-3524.. 2022. 11. 2.

알고리즘(5) : 수박수박수박수박수박수? _ Lv.1 ⭐️ 알고리즘(5) : 수박수박수박수박수박수? _ Lv.1 ⭐️ 01. 문제 설명 🧩 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 🧩 예를 들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 🔒 제한 조건 : n은 길이 10,000이하인 자연수입니다. 02. " solution.js " 문제 풀어보기 💡 문자가 반복되었을 때, 반복된 문자열의 길이가 n이 되도록 부분 출력해보자. function solution(n) { return "수박".repeat(n).substring(0, n); } console.log(solution(n)) ___ 참고하기 ___ `1 String.prototype.repe.. 2022. 10. 31.

알고리즘(4) : 짝수와 홀수 _ Lv.1 ⭐️ 알고리즘(4) : 짝수와 홀수 _ Lv.1 ⭐️ 01. 문제 설명 🧩 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 🔒 제한 조건 : ☑️ num은 int 범위의 정수입니다. ☑️ 0은 짝수입니다. 02. " solution.js " 문제 풀어보기 💡 숫자를 2로 나눴을 때 나머지가 '0'이면 짝수, 그렇지 않으면 홀수로 구별하도록 만들어보자. function solution(num) { return (num % 2 === 0) ? "Even" : "Odd"; } console.log(solution(n)) ___ 참고하기 ___ `1 조건 (삼항) 연산자 : 앞에서부터 조건문, 물음표(?), 조건문이 참(truthy)일 .. 2022. 10. 31.

알고리즘(3) : 평균 구하기 _ Lv.1 ⭐️ 알고리즘(3) : 평균 구하기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 🔒 제한 조건 : ☑️ arr은 길이 1 이상, 100 이하인 배열입니다. ☑️ arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 02. " solution.js " 문제 풀어보기 💡 배열 안의 값을 모두 더하고, 배열의 길이값으로 나눠보자. const average = [1, 2, 3, 4]; function solution(arr) { return arr.reduce((a, b) => a + b) / arr.length; } console.log(solution(average)) ___ 참고하기 ___ `1 Arr.. 2022. 10. 31.

알고리즘(2) : 제일 작은 수 제거하기 _ Lv.1 ⭐️ 알고리즘(2) : 제일 작은 수 제거하기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 정수를 저장한 배열, arr에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 🧩 단, 리턴하려는 배열이 빈 배열인 경우에는 배열에 -1 을 채워서 리턴하세요. 🧩 예를 들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴하고, [10]이면 [-1]을 리턴합니다. 🔒 제한 조건 : ☑️ arr은 길이 1 이상인 배열입니다. ☑️ 인덱스 i, j 에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 02. " solution.js " 문제 풀어보기 💡 가장 작은 값을 찾고, 찾은 요소를 삭제하여 반환해보자. const erase = [4, 3, 2, 1]; function .. 2022. 10. 31.

알고리즘(1) : 자연수 뒤집어 배열로 만들기 _ Lv.1 ⭐️ 알고리즘(1) : 자연수 뒤집어 배열로 만들기 _ Lv.1 ⭐️ 01. 문제 설명 🧩 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 🧩 예를 들어, n이 12345이면 [5, 4, 3, 2, 1] 을 리턴합니다. 🔒 제한 조건 : n은 10,000,000,000 이하인 자연수입니다. 02. " solution.js " 문제 풀어보기 💡 문자열 12345를 하나씩 배열로 만들어주고 숫자로 만들어준 뒤에, 순서를 뒤집어주자. const flip = [12345]; function solution(n) { return String(n).split('').map( (x) => Number(x) ).reverse(); } console.log(solution(flip)) ___.. 2022. 10. 28.

슬라이더 이펙트 06 ⭐️ slider Effect 슬라이더 효과 06 ⭐️ 01. HTML 이미지1 이미지2 이미지3 이미지4 이미지5 prev next 02. CSS /* slider */ * { margin: 0; padding: 0; box-sizing: border-box; } .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; } .slider__img { /* 이미지가 보여지는 영역 */ position: relative; width: 800px; height: 500px; overflow: hidden; } .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직.. 2022. 10. 21.

검색 효과 07. 검색 기능을 활용한 게임 만들기 ⭐️ search Effect 검색 효과 07 : 검색 규칙을 활용한 게임 만들기 ⭐️ 01. HTML BGM: The ventures - hawaii five-0 CSS 속성 검색 이벤트 CSS 속성명 암기 게임 CSS 속성 이름을 입력하면 점수가 올라갑니다. START 버튼을 누르면 게임 시작입니다. 화이팅😃 2:00 검색하기 START 전체 속성 갯수 : 0 맞춘 갯수 : 0 The End RESTART 02. CSS @import url('https://webfontworld.github.io/vitro/VitroPride.css'); @import url('https://webfontworld.github.io/vitro/VitroCore.css'); @import ur.. 2022. 10. 21.

Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️ Game Effect 게임 효과 01 : jquery 이미지 드래그 / JS 날짜와 시간 & 운영체제와 화면크기 정보 구현 ⭐️ 01. jquery 를 사용하여 이미지 드래그 효과 구현하기 🧊 jquery 사이트에서 드래그 효과의 주소를 가져와 script 에 넣어줍니다. 🧊 마우스 커서 모양을 따로 설정해주었다면, 이미지를 드래그할 때도 모양이 유지되도록 script 에 함수를 추가해줍니다. [1] 드래그 효과 - jquery 주소 넣기 [2] 마우스 커서 모양 유지를 위한 함수 추가하기 $( ".삽입한 이미지 클래스명" ).draggable({ drag: function(){ $(".마우스 커서 클래스명").style }, }); $( ".icon" ).draggable({ drag: funct.. 2022. 10. 20.

마우스 이펙트 01 : transform & transition 효과 ⭐️ 마우스 이펙트 01 : transform & transition 효과 ⭐️ 01. 마우스 효과 만들어보기 : 목표 🧊 정해진 글자 위에서 마우스 커서의 형태가 변형되는 효과를 나타내봅니다. 🧊 커서 모양 변형 효과의 속도를 조절해 봅니다. [1] 커서 모양 div 만들고 문장 작성하기 (html) section 태그를 만들고, css 와 script 의 경로 설정을 위해 id 및 class로 이름을 정합니다. 문장에서 정해진 글자 위에 커서를 올렸을 때, 커서의 형태가 변형되도록 하기 위해 span 태그로 글자를 감싸줍니다. span 태그의 css와 script 의 경로 설정을 위해 class = style($num) 로 이름을 지어줍니다. ___ 참고하기 ___ `1 a href 에 class =.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 05 : 부드러운 이동 & 요소의 이질감 효과 & 하단 top 버튼 숨김 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함을 느낄 수 있고, 화면 구성이 복잡해.. 2022. 9. 23.

Parallax Scrolling 패럴랙스 스크롤링 04 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 & 요소 개별적으로 나타내기 ⭐️ Parallax Scrolling 패럴랙스 스크롤링 04 : 상단 숨김 메뉴 active & 하단 top 숨김 버튼 & 부드러운 이동 & 요소 개별적으로 나타내기 ⭐️ 01. Parallax Scrolling 패럴랙스(Parallax)란 '시차'를 뜻하는 단어로, 멀리 있는 물체는 천천히 움직이고 가까이 있는 물체는 빠르게 움직이는 현상을 의미합니다. 패럴랙스 스크롤링 (Parallax Scrolling) 기술은 배경 또는 오브젝트의 레이어화, 스크롤과 애니메이션의 속도 조절을 통해 깊이에 대한 착시를 보여주는 기술 입니다. 이 기술은 한 페이지로 구성할 수 있으며, 시각적인 몰입감을 주고 효과적인 스토리텔링을 가능하게 하는 장점이 있습니다. 다만 내용이 너무 길 경우에는 사용자가 지루함이나 불편함.. 2022. 9. 23.

사이트 만들기 ⭐️ site 만들기 ⭐️ 결과보기 ☛ 원본 소스 보기 2022. 9. 14.

이전 1 2 3 4 ··· 6 다음

728x90

티스토리툴바