프로그래머스 문제 풀이 11 프로그래머스 문제 풀이 11 이상한 문자 만들기 01. 문제 function solution(s) { var answer = ''; return answer; } 02. 나의 문제 풀이 function solution(s) { let answer = ''; let index = 0; for(let i =0; i < s.length; i++){ if(s[i] === " ") { index = 0; answer += " "; } else { if(index%2 === 0) { answer += s[i].toUpperCase(); }else{ answer += s[i].toLowerCase(); } index++; } } return answer; } 03. 다른 사람의 문제 풀이 function soluti.. 2022. 11. 6. 프로그래머스 문제 풀이 10 프로그래머스 문제 풀이 10 없는 숫자 더하기 01. 문제 function solution(numbers) { var answer = -1; return answer; } 02. 나의 문제 풀이 function solution(numbers) { let answer = 0; for (let i = 1; i cur + acc, 0); } .0~9까지의 합인 45에서, reduce 함수를 적용하여 합산한 배열의 모든 값을 빼주었다. 2022. 11. 6. 프로그래머스 문제 풀이 09 프로그래머스 문제 풀이 09 문자열 내 p와 y의 개수 구하기 01. 문제 function solution(s) { var answer = true; return answer; } 02. 나의 문제 풀이 function solution(s){ var p = 0; var y = 0; for(var i=0; i < s.length; i++){ if(s[i] === 'p' || s[i] === 'P'){ p++; } if(s[i] === 'y' || s[i] === 'Y'){ y++; } } return (p === y) ? true : false; return answer; } 03. 다른 사람의 문제 풀이 function numPY(s){ //함수를 완성하세요 return s.toUpperCase().sp.. 2022. 11. 6. 프로그래머스 문제 풀이 08 프로그래머스 문제 풀이 08 같은 숫자는 싫어 01. 문제 function solution(num) { var answer = []; return answer; } 02. 나의 문제 풀이 ffunction solution(arr) { var answer = []; for (let i = 0; i < arr.length; i++) { if(arr[i] !== arr[i+1]) answer.push(arr[i]) } return answer; } 03. 다른 사람의 문제 풀이 function solution(arr) { var answer = []; // [실행] 버튼을 누르면 출력 값을 볼 수 있습니다. console.log(arr) var x = arr[0]; var j = 0; var i = 1; wh.. 2022. 11. 4. 프로그래머스 문제 풀이 07 프로그래머스 문제 풀이 07 수박수박수박수 ? 01. 문제 function solution(num) { var answer = ''; return answer; } 02. 나의 문제 풀이 function solution(n) { let result = "" for(let i = 1; i < = n; i++){ if(i % 2 === 0){ result += "박" }else{ result += "수" } } return result } 03. 다른 사람의 문제 풀이 function waterMelon(n){ var result = "수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박수박" //함수를 완성하세요 return result.subst.. 2022. 11. 3. 프로그래머스 문제 06 프로그래머스 문제 풀이 06 짝수 홀수 구하기 01. 문제 function solution(num) { var answer = ''; return answer; } 02. 나의 문제 풀이 function solution(s) { var answer = ''; if( s.length % 2 === 0 ){ answer = s[s.length / 2 - 1] + s[s.length / 2]; } else { answer = s[Math.floor(s.length/2)]; } return answer; } 03. 다른 사람의 문제 풀이 function solution(s) { return s.substr(Math.ceil(s.length / 2) - 1, s.length % 2 === 0 ? 2 : 1); }.. 2022. 11. 2. 프로그래머스 05 프로그래머스 문제 풀이 05 핸드폰 번호 뒷자리수 변경하기 01. 문제 function solution(num) { var answer = ''; return answer; } 02. 나의 문제 풀이 function solution(phone_number) { var answer = ''; let back = phone_number.substr(-4,4); let front = phone_number.substring(0,phone_number.length-4); let result = front.replace(/[0-9]/g,'*'); answer = result + back return answer; } 03. 다른 사람의 문제 풀이 function hide_numbers(s) { return s.r.. 2022. 11. 1. 프로그래머스 04 프로그래머스 문제 풀이 02 짝수 홀수 구하기 01. 문제 function solution(num) { var answer = 0; return answer; } 02. 나의 문제 풀이 function solution(n) { for(let x = 2; x 0) { break; } if (n % i == 1) { answer = i; } } return answer; } 길긴 하지만 이해하기 쉽게 풀어주었기 때문에 가져와보았습니다. i는 n 보다 작지만 .. 2022. 11. 1. 프로그래머스 03 프로그래머스 문제 풀이 03 짝수 홀수 구하기 01. 문제 function solution(num) { var answer = ''; return answer; } 02. 나의 문제 풀이 function solution(n){ var answer = 0; var ever = String(n); for(var i =0; i < ever.length; i++){ answer += parseInt(ever[i]); } return answer; } 03. 다른 사람의 문제 풀이 function solution(n){ var a = (n + '').split(''); var b = 0; for(var i = 0; i < a.length; ++i) { b += parseInt(a[i]); } return b; }.. 2022. 11. 1. 프로그래머스 02 프로그래머스 문제 풀이 02 짝수 홀수 구하기 01. 문제 function solution(num) { var answer = ''; return answer; } 02. 나의 문제 풀이 function solution(num) { var answer = ''; if( num % 2 == 0){ return answer = "Even"; }else { return answer = "Odd"; } } 03. 다른 사람의 문제 풀이 function evenOrOdd(num) { return num % 2 ? "Odd" : "Even"; } 삼향연산자로 if문을 사용해 한줄로 만들어 보기 좋은것 같습니다. 2022. 11. 1. 프로그래머스 01 프로그래머스 문제 풀이 01 평균값 구하기 01. 문제 function solution(arr) { var answer = 0; for( var i=0; i a + b) / array.length; } reduce로 누적값을 만들어 낸.. 2022. 11. 1. 오답노트 두번째 오답노트 입니다 :3 2022. 10. 2. 오답노트 피그마가 안열려서.. 표지는 이걸로 대체합니다 :3 첫번째 오답입니다 오로지 이미지로만 승부 봅니다 >.0 2022. 10. 2. Mouse Effect 05 Mouse Effect 05 마우스를 움직일 때 가운데에 있는 사진과 글귀가 3D 처럼 움직이는 이펙트를 공부해보았습니다. 01. HTML 사진을 넣을 figure 와 글귀를 감쌀 figcaption을 mouse img 로 감싸 줍니다. 🦢 HTML 코드 We never know the worth of water till the well is dry. 우물이 마르기까지는 물의 가치를 모른다 mousePageX : 0 px mousePageY : 0 px centerPageX : 0 px centerPageY : 0 px maxPageX : 0 px maxPageY : 0 px anglePageX : 0 px anglePageY : 0 px 02. Css 이미지를 고정해주고 애니메이션을 지정해 움직임에 부.. 2022. 9. 28. search Effect 04 search Effect 04 find() 와 map()을 이용하여 검색도 가능하지만, 속성을 클릭 했을 때 설명이 나오는 이펙트를 공부해보았습니다. 01. HTML 설명이 나오는 곳과 검색하는 곳을 구분해줍니다. 🦢 HTML 코드 검색하기 속성을 검색하시면 설명이 표시 됩니다. 전체 속성 갯수 : 0 02. Css 구분하기 위해 본래의 디자인과 잘 어울리도록 작성해줍니다. 🦢 css 코드 .search__desc { border: 2px solid var(--htmlColor); padding: 20px 40px 20px 60px; border-radius: 50px; background-color: var(--htmlColor); width: 80%; margin-bottom: 20px; displa.. 2022. 9. 28. 구독자 이벤트 :3 댓글 다시면 두명 추첨해서 제 블로그 굿즈 스티커 드립니다 :3 ( 댓글 아무도 없으면 찾아갑니다. . . ) 2022. 9. 28. loading Animation loading Animation codepen에서 로딩하는 애니메이션을 만들었습니다. 01. HTML 총 10개의 ball을 만들어줍니다. 02. css 정 가운데로 오게 만들고 애니메이션 딜레이를 주어 하나씩 움직이게 만들어줍니다. body{ background-color: rgb(105, 54, 199); } .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.. 2022. 9. 26. Mouse Effect 04 Mouse Effect 04 마우스를 움직일 때 가운데에 있는 마우스에 따라 움직이는 이펙트를 공부해보았습니다. 01. HTML 배경 위에 figure로 이미지가 있을 박스와 figcaption으로 글귀를 감싸줍니다. 🐱👤 HTML 코드 In order to succeed, we must first believe that we can. 성공하기 위해서, 우리는 먼저 우리 자신이 할 수 있다는 것을 믿어야 한다. 02. Css 이미지를 고정해주고 애니메이션을 지정해 움직임에 부드러움을 주었습니다. 🐱👤 css 코드 .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center; fl.. 2022. 9. 22. Mouse Effect 03 Mouse Effect 03 마우스를 움직일 때 뒤에 있는 이미지가 보이는 착시효과를 공부해보았습니다. 01. HTML 마우스 이펙트 01번 만큼 쉬운 구조로 묶었습니다. 🐱👤 HTML 코드 The way to get started is to quit talking and begin doing. 무언가를 시작하려면 말은 멈추고 행동해야 한다. 02. Css 이미지가 사실은 두개 이므로, 배경 말고 보여지는 이미지는 필터를 넣어 밝아지게 만들어줍니다. 또한 background-position 과 background-attachment 으로 이미지가 정중앙에 있게 만듭니다. 🐱👤 css 코드 .mouse__cursor { position: absolute; left: 0; top: 0; width: 20.. 2022. 9. 22. Text animation Text animation codepen에서 글자들이 하나씩 통통 튀는 애니메이션을 만들었습니다. 01. HTML html은 간단합니다. h1 에서 글자 수 만큼 span을 만들어 한 글자씩 적어줍니다. C U T E C A T ♥ 02. css 이후에 배경을 지정해주고 원하는 font-family로 지정해준다음, text-shadow로 그림자의 강도를 높여줍니다. 그리고 글자에 animation-delay를 지정해 하나씩 움직이게 만들어줍니다. html, body { width: 100%; height: 100%; background: linear-gradient(140deg, rgb(80, 97, 255) 0%, rgb(54, 7, 131) 100%); display: flex; justify-con.. 2022. 9. 22. box Animation box Animation codepen에서 box가 늘어났다 줄어드는 애니메이션을 만들었습니다. 01. HTML 정육면체인 만큼 6개의 빈칸을 만들어줍니다. 마뇽 02. css 원들 에게 애니메이션을 줄 때, 한번에 많은 수를 움직이는 것을 해야하니 scss로 for문을 사용해 여러개의 nth-child를 한 문장으로 해결할 수 있게 하였습니다. body { background-color: #000; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content: center; } .cube { position: relative; width: 100px; height: 100px; transform-style:.. 2022. 9. 22. Mouse Hover Effect Mouse Hover Effect 마우스를 올려놓거나 내렸을 때 3D 효과가 나오는 애니메이션을 공부했습니다. 01. HTML 위, 아래와 오른쪽,왼쪽인 두가지 버전을 하였습니다. 🐇 HTML 코드 Mouse Hover Effect 마우스 올리면 Up Mouse Hover Effect 마우스 내리면 Down Mouse Hover Effect 마우스 올리면 to Left Mouse Hover Effect 마우스 내리면 to Right 02. Css 중요한 코드는 transform-style : preserve-3d; = 3D 효과를 주는 css backface-visibility: hidden; = 뒤로 돌리면 사라지게 하는 css 입니다. 🐇 css 코드 body { font-family: 'LocusS.. 2022. 9. 20. Parallax Effect05 Parallax Effect05 스크롤을 내렸을 때 숫자나, 이미지, 안의 글귀등에게 이질감을 주는 이펙트를 공부하였습니다. 01. HTML 기본적으로는 4번 유형과 같지만, 이해를 돕기 위해 스크롤 탑을 추가하였습니다. 🐇 HTML 코드 01 section1 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. 02 section2 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 03 section3 성공 그 자체에 파멸의 불씨가 들어 있을지도 모른다 04 section4 삶에 후회를 남기지말고, 사랑하는 데 이유를 달지 마세요 05 section5 우리는 인생의 날들을 늘릴수는 없지만, 그 날들에 생기를 불어 넣을 수는 있다. 06 section6 반복되는 하루.. 2022. 9. 20. VSCODE로 SCSS 활용하기 codepen으로만 scss를 만들어봤지만, 꽤나 활용하기 편하기 때문에 vscode에서도 scss를 사용할까 고민하고 있었다. . 사용하기 위해서는 먼저 아래의 이미지를 install 해야합니다 ! ! ! 그러나 바로 활용할 수는 없다, 이유는 link로 scss 시트를 연결할 수는 없고, css 시트로 변경해야하기 때문입니다. 저번에서도 한 F1 을 누른 뒤 JSON 을 검색 후 이걸 눌러 작성하거나 변경해줘야 하는게 있습니다. 바로 이것 ! ! ! ! 어렵긴 하지만, scss 를 .min.css로 바꿔주는걸로 생각하면 편합니다 ㅡ ! 그 뒤 scss 에서 이것을 누른 뒤 그 css 시트에 변환이 되는지 확인 해야합니다. 그 뒤 완성😍 이지만 아래에서 더 풀어보자면 . . 이런식으로 총 style.s.. 2022. 9. 19. Parallax Effect04 Parallax Effect04 버튼으로 활용되는 페럴렉스 이펙트 대신 스크롤을 내릴때마다 애니메이션이 보여지는 이펙트 유형을 공부해보았습니다. 01. HTML 이번에는 클릭하여 올라가는 TOP 버튼이나, 메뉴버튼은 사라졌습니다. 보여질때 애니메이션을 활용하는 페럴렉스 이펙트 유형입니다. 💀 HTML 코드 01 section1 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. 02 section2 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 03 section3 성공 그 자체에 파멸의 불씨가 들어 있을지도 모른다 04 section4 삶에 후회를 남기지말고, 사랑하는 데 이유를 달지 마세요 05 section5 우리는 인생의 날들을 늘릴수는 없지만, 그 날들.. 2022. 9. 19. Mouse Effect 02 Mouse Effect 02 마우스를 움직일 때마다, 따라다니는 원과 따라붙었을 때의 애니메이션과 특정 위치에 hover 할때 반응하는 이펙트를 공부해보았습니다. 01. HTML 이번에는 style를 딱히 지정해주지 않았습니다. 💀 HTML 코드 Nature never deceives us it is we who deceive ourselves 자연은 인간을 결코 속이지 않는다. 우리를 속이는 것은 항상 우리 자신이다. 02. Css 기본 mouse와 따라붙는 mouse-sub 가 있으며, hover 등을 하였을 때 애니메이션을 주었습니다. 💀 css 코드 /* mouseType */ body::after { background:rgba(43, 37, 59, 0.651); } .mouse__wrap { .. 2022. 9. 19. Slider Effect 04 Slider Effect 04 버튼을 눌렀을 때 좌우로 움직일 수 있게 만드는 슬라이트 이펙트를 공부해보았습니다. 첫번째에서 왼쪽을 누른다면 마지막 이미지로 이동할 수 있도록 연결도 해야합니다. 01. HTML HTML에서는 버튼을 추가해줍니다. 💀 HTML 코드 prev next 02. Css Css는 버튼만 추가로 만들었기 때문에, 기본은 sliderEffect03 와 똑같습니다. 💀 CSS 코드 .slider__btn a { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; background: rgba(0,0,0,0.4); text-align: center; transition: all 0.2s.. 2022. 9. 19. Wave Animation Wave Animation codepen에서 원들이 웨이브를 하는 애니메이션을 만들었습니다. 01. HTML pug를 사용해 for문으로 많은 박스를 만들어줍니다. div.circle-wrap - for (var x =1; x 2022. 9. 19. mouse Effect 01 mouse Effect 01 마우스를 hover 했을 때, 지정한 위치에 따라 마우스 커서가 변화하는 이펙트를 공부해보았습니다. 01. HTML 마우스를 올렸을 때 변화하는 글귀를 작성했습니다. 👾 HTML 의 코드 보기 Javascript Mouse Effect 01 마우스 이펙트 - 트랜지션 효과 1 2 3 4 5 6 7 Numbing the pain for a while will make it worse when you finally feel it. 고통을 잠시라도 모른 척하면, 나중에 정말 고통을 느낄 때 더 악화되는 법이란다. clientX : 0 px clientY : 0 px offsetX : 0 px offsetY : 0 px pageX : 0 px pageY : 0 px screenX :.. 2022. 9. 12. 사이트 & 반응형 사이트 사이트 & 반응형 사이트 드디어 왔습니다. 사이트 완성형 + 반응형 입니다. 01. HTML 저의 🐶고생 끝에 완성되었습니다. 👻 HTML 코드 보기 헤더 영역 바로가기 슬라이드 영역 바로가기 이미지 영역 바로가기 이미지/텍스트 영역 바로가기 카드 영역 바로가기 배너 영역 바로가기 텍스트 영역 바로가기 푸터 영역 바로가기 Jelly Fish 슬라이드 영역 이미지 영역 이미지 텍스트 영역 카드 영역 배너 영역 텍스트 영역 푸터 영역 로그인 슬라이드 영역 Under the Sea Jelly fish 심해 그 저편에는 말랑한 해파리들이 가득 있습니다! 우리 같이 여러 모습들을 구경해보아요. 자세히 보기 사이트 보기 이전 이미지 다음 이미지 1 2 3 플레이 정지 해파리들이 둥둥 떠다니는 모습 정해진 갈 길 없.. 2022. 9. 12. 이전 1 2 3 4 5 6 다음
