Dragonball Online Goku Hand
본문 바로가기

코딩Gabojago~164

프로그래머스 Lv.1 "문자열을 정수로 바꾸기" 🔥 Programmers Lv.1 : 문자열을 정수로 바꾸기 🔍 문제 : " 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. " 📎 조건 : ∙ s의 길이는 1 이상 5이하입니다. ∙ s의 맨앞에는 부호(+, -)가 올 수 있습니다. ∙ s는 부호와 숫자로만 이루어져있습니다. ∙ s는 "0"으로 시작하지 않습니다. 👉🏻 My answer function solution(s) { if(s.length >= 1 && s.length 2022. 11. 7.
프로그래머스 Lv.1 "정수 제곱근 판별" 🔥 Programmers Lv.1 : 정수 제곱근 판별 🔍 문제 : " 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. " 📎 조건 : ∙ n은 1이상, 50000000000000 이하인 양의 정수입니다. 👉🏻 My answer function solution(n) { if(Math.sqrt(n) % 1 !== 0){ return -1; } else { return(Math.sqrt(n) + 1)*(Math.sqrt(n) + 1) } } : 제곱근의 값이 1로 나누었을 때 나머지가 있으면 양의 정수 x의 제곱이 아니기 때문에 -1을.. 2022. 11. 7.
프로그래머스 Lv.1 "수박수박수박수박수박수?" 🔥 Programmers Lv.1 : 수박수박수박수박수박수? 🔍 문제 : " 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. " 📎 조건 : ∙ n은 길이 10,000이하인 자연수입니다. 👉🏻 My answer function solution(n) { let answer = ''; for(i=1; i { return '수박'.repeat(n/2) + (n%2 === 1 ? '수' : ''); } : 깔끔하면서 이해 쏙 코드! 2022. 11. 4.
프로그래머스 Lv.1 "서울에서 김서방 찾기" 🔥 Programmers Lv.1 : 서울에서 김서방 찾기 🔍 문제 : " String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. " 📎 조건 : ∙ seoul은 길이 1 이상, 1000 이하인 배열입니다. ∙ seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. ∙ "Kim"은 반드시 seoul 안에 포함되어 있습니다. 👉🏻 My answer function solution(seoul) { var answer = "김서방은 " + seoul.indexOf("Kim") + "에 있다"; return a.. 2022. 11. 2.
프로그래머스 Lv.1 "자연수 뒤집어 배열로 만들기" 🔥 Programmers Lv.1 : 자연수 뒤집어 배열로 만들기 🔍 문제 : " 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. " 📎 조건 : ∙ n은 10,000,000,000이하인 자연수입니다. 👉🏻 My answer function solution(n) { let answer =[]; let arr = String(n).split("").reverse(); for (let i = 0; i < arr.length; i++) { answer.push(Number(arr[i])); } return answer; } 01. [5,4,3,2,1]이 나오게 하기 위해서 배열로 바꾼 뒤 숫자를 문자열로 변화하여 sp.. 2022. 11. 1.
프로그래머스 Lv.1 "자릿수 더하기" 🔥 Programmers Lv.1 : 자릿수 더하기 🔍 문제 : " 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. " 📎 조건 : ∙ N의 범위 : 100,000,000 이하의 자연수 👉🏻 My answer function solution(n){ let sum = 0; let answer=String(n).split(""); for(let i=0; i acc + parseInt(curr), 0) } : reduce의 initial value는 첫 acc 값입니다. 즉, 0을 넣어서 acc 초기값을 정수화 해주는 겁니다("문자열 + 정수 = 문자열" 방지차원). .. 2022. 11. 1.
프로그래머스 Lv.1 "약수의 합" 🔥 Programmers Lv.1 : 약수의 합 🔍 문제 : " 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. " 📎 조건 : ∙ n은 0 이상 3000이하인 정수입니다. 👉🏻 My answer function solution(n) { let answer = 0; for(let i=0; i 2022. 10. 30.
프로그래머스 Lv.1 "나머지가 1이 되는 수 찾기" 🔥 Programmers Lv.1 : 나머지가 1이 되는 수 찾기 🔍 문제 : " 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. " 📎 조건 : ∙ 3 ≤ n ≤ 1,000,000 👉🏻 My answer function solution(n) { for(let x = 1; x 2022. 10. 30.
프로그래머스 Lv.1 "평균 구하기" 🔥 Programmers Lv.1 : 평균 구하기 🔍 문제 : " 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. " 📎 조건 : ∙ arr은 길이 1 이상, 100 이하인 배열입니다. ∙ arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 👉🏻 My answer function solution(arr) { var answer = 0; let sum=0; for(let i=0; i a + b) / array.length; } : Reduce메서드를 이용하여 배열의 총합을 구해준 후 길이만큼 나누어준 것입니다. 2022. 10. 30.
프로그래머스 Lv.1 "짝수와 홀수" 🔥 Programmers Lv.1 : 짝수와 홀수 🔍 문제 : " 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. " 📎 조건 : ∙ num은 int 범위의 정수입니다. ∙ 0은 짝수입니다. 👉🏻 My answer function solution(num) { var answer = ''; if(num % 2 == 0){ answer = "Even"; } else { answer = "Odd"; } return answer; } : 수업시간에 배웠던 짝수( % : 나머지의 값이 0)와 홀수(짝수를 제외한 나머지 값들)를 통해 if문을 사용하여 답을 작성하였습니다. 👉🏻 Another ways function evenOrOdd(num.. 2022. 10. 28.
"슬라이더이펙트 07" : 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) 🎞 슬라이드 이펙트 - 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는데 무한으로 작동하는 슬라이드를 만들어봅시다! 📌 플레이하면 자동으로 플레이 되고 정지버튼을 통해 정지도 가능한 것이 특징합니다. 슬라이드 이펙트 - 이미지 슬라이드((버튼, 닷메뉴, 플레이 버튼, 정지 버튼, 자동 플레이) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 부분적인 CSS입니다. 전체적인 CSS.. 2022. 10. 21.
"슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한) 🎞 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는데 무한으로 작동하는 슬라이드를 만들어봅시다! 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 부분적인 CSS입니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; .. 2022. 10. 21.
"서치 이펙트" Search 07. 2분 동안 CSS 속성 검색하기 게임 만들기! 🗒 서치이펙트 07 : 검색 게임 만들기! 📌 2분동안 진행되게 자바스크립트를 이용해서 만들어주기 📌 맞은 점수 나오도록 자바스크립트 이용하기 CSS 속성 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 CSS 속성 검색 이벤트 2분 동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 힌트보기는 한 번 이용할 수 있습니다. 2:00 검색하기 게임 시작! 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS 자바스크립트로 없었다가 나오게 하는 부분들을 표현하기 위해서 없었던 부분에는 display:none처리를 해주어야 합니다. 코드 보기.. 2022. 10. 21.
"게임 이펙트 01" : 시간 구현, 뮤직 플레이어 만들기 🎮 게임 이펙트 - 뮤직플레이어 만들기 📌 게임을 넣기 위한 바탕화면에 폴더를 만들어주었습니다. 📌 바탕화면에 실시간으로 시간 기능을 자바스크립트로 구현하였습니다. 📌 푸터 부분에 화면 크기와 어느 기기를 사용중인지 자바스크립트로 구현하였습니다. 📌 뮤직플레이어를 만들어주었고 드래그 기능이 가능하도록 제이쿼리를 통해 구현하였습니다.. 📌 마우스 커서에 효과를 주었습니다. 게임 이펙트 01 효과 완성⭐️ 게임 이펙트가 궁금하다면?💡 원본 소스보기 🎮 game CSS 소스보기 🎧 music CSS 소스보기 HTML 게임 이펙트 바탕화면에 넣어줄 폴더와 음악 플레이어의 틀을 구성합니다. 코드 보기 Welcome to noeyheyh's Game Place HTML CSS JS Figma Playlist 휴지통.. 2022. 10. 17.
"슬라이더이펙트 05" : 이미지 슬라이드(버튼, 닷메뉴) 🎞 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 📌 prev와 next 버튼을 이용하여 슬라이드를 좌우로 움직이는 동시에 밑에 닷메뉴도 이동하는 슬라이드를 만들어봅시다! 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴) 효과 완성⭐️ 움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기 HTML 코드 보기를 펼쳐 봐주세요 :) 헤더 부분은 이전 것과 동일하여 메인부분만 넣었습니다! 코드 보기 prev next CSS 부분적인 CSS입니다. 전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요! 코드 보기 /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-.. 2022. 10. 17.
"패럴랙스 이펙트 07" : 리빌 효과 🔮 패럴랙스 이펙트 - 리빌 효과 📌 이번 이펙트는 이미지와 텍스트 등을 점진적으로 나타나게 하는 이펙트입니다. ➰ HTML 애니메이션 방향 ∙reveal : 왼쪽에서 오른쪽으로 ∙reveal-RTL : Right To Left ∙reveal-TTB : Top To Bottom ∙reveal-BTT : Bottom To Top 코드 보기 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃는게 아니라, 웃기 때문에 행복하다. 04 section4 인생은 가까이서 보면 비극, 멀리서 보면 희극이다. 05 section5 승자는 시간.. 2022. 10. 6.
"서치 이펙트" Search 05. filter() 메서드를 활용하여 검색 화면 만들기 🗒 서치이펙트 05 📌 filter()을 이용하여 검색 화면을 만들어 봅시다. 📌 속성 중요도에 따라 속성을 볼 수 있는 이펙트입니다. CSS 속성 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML ∙ search__click은 중요도에 따른 분류를 볼 수 있도록 구분한 버튼이라고 생각하시면 됩니다. ∙ data-star=""은 나중에 자바스크립트로 데이터값을 인덱스를 통해 불러오기 위함입니다. filter()을 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 찾은 속성 갯수 : 0 CSS 새로 추가된 CSS 부분입니다. .search__click .. 2022. 9. 30.
"패럴랙스 이펙트 06" : 텍스트 효과 🔮 패럴랙스 이펙트 - 텍스트 효과 📌 이번 이펙트는 스크롤했을 때 글자가 한 글자씩 transition-delay를 통해 도로로로로 나타나는 이펙트입니다. ➰ HTML 스크롤값도 나오게 해줄 것이므로 parallax__info도 만들어줍니다. 코드 보기 Javascript parallax sliderEffect06 패럴랙스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃는게 아니라, 웃기 때문에 행복하다. 04 section4 인생은 가까이서 보면 비극, 멀리서 보면 희극이다.. 2022. 9. 29.
"마우스이펙트 06" : 텍스트 효과 🖱 마우스 이펙트 : 텍스트 효과 📌 이번 마우스 이펙트는 마우스를 텍스트에 가져다다 놓았을 때 텍스트는 줄마다 서로 반대방향으로 길어지고, 마우스는 반전효과가 나타나도록 하는 이펙트입니다. 마우스 이펙트 완성본⭐️ 마우스 이펙트가 궁금하다면?💡 원본 소스보기 ➰ HTML ∙ mouse__textd에 line에 left와 right를 설정해줍니다. 나중에 글씨가 반대방향으로 가게 하기 위함입니다. Javascript Mouse Effect06 마우스 이펙트 - 텍스트 효과 1 2 3 4 5 6 7 Pain Past Pain Past is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. ➰ CSS 마우스 반전 효과 : mix-blend-mode: differenc.. 2022. 9. 29.
"서치 이펙트" Search 04. find() 메서드를 활용하여 검색 화면 만들기 🗒 서치이펙트 04 📌 find()을 이용하여 검색 화면을 만들어 봅시다. 📌 원하는 css속성을 적으면 해당 값이 나오게 하며, 또 다른 방법으로 css속성을 클릭하면 돋보기 옆으로 설명이 나오게 하는 이펙트입니다. CSS 속성 검색창 만들기! 실제 사이트보기 원본 소스보기 CSS 소스보기 HTML ∙ search__box에 input을 넣어줍니다. ∙ search__desc은 속성에 대한 설명을 나오게 합니다. find()을 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 나타납니다. 전체 속성 갯수 : 0 CSS 새로 추가된 CSS 부분입니다. .search__desc { padding: 20px 40px 20px 60px; margin-bottom: .. 2022. 9. 28.
"마우스이펙트 05" : 기울기 효과 / 글씨 반전 효과 🖱 마우스 이펙트 : 기울기 효과 / 글씨 반전 효과 📌 이번 마우스 이펙트는 마우스 커서에 따라 이미지가 3d효과로 움직이며 마우스 커서를 사진에 마우스를 가져갔을 때 반전효과가 나타나는 이펙트입니다. 마우스 이펙트 완성본⭐️ 마우스 이펙트가 궁금하다면?💡 원본 소스보기 ➰ HTML ∙ figure와 figcaption을 mouse__img로 묶어줍니다. ∙ mouse__info를 통해 X좌표와 Y좌표의 값을 보여줍니다. Experience is the best teacher. 경험은 최고의 스승이다. mousePageX : 0pxpx mousePageY : 0pxpx centerPageX : 0pxpx centerPageY : 0pxpx maxPageX : 0pxpx maxPageY : 0pxpx a.. 2022. 9. 28.
[CSS] "경규옹 미국ver." 을 만들어봅시다! 📎codepen을 이용해서 눈에는 눈 미쿡인~Joe아저씨의 눈을 소개합니다! Joe아저씨의 눈은 마치 이경규아저씨처럼 자유자재로 움직일 수 있습니다. 지금 바로 미국판 이경규아저씨 보시죠!👀 See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 카드부분과 인물, 눈, 텍스트 부분으로 틀을 짜줍니다. I'm Joe ✔️CSS 사진에 효과를 넣어줍니다. *{ margin: 0; padding: 0; box-sizing:border-box; } html, body { height: 100%; overflow:hidden; } .wrapper { position:absolute; left:50%; top:50%.. 2022. 9. 26.
[CSS] "로딩중" 을 만들어봅시다! 📎codepen을 이용해서 자칫 재빠른 한국인을 화나게 할 수 있는(?) 로딩 동그라미를 만들어봅시다! 동그라미 여러개로 로딩화면을 만들어보도록 할텐데 로딩화면과 흡사하여 한숨이 푹 쉬어질 수 있으니 주의바랍니다.😤 See the Pen loading screen by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 여러개의 동그라미를 만들어줍니다. ✔️CSS ball에 애니메이션과 스타일을 입혀줍니다. body { background-color: skyblue; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px;.. 2022. 9. 26.
"마우스이펙트 04" : 이미지 효과 🏞 🖱 마우스 이펙트 : 이미지 효과 📌 마우스 커서를 이미지 영역에서 움직일 때 이미지가 반대방향으로 살짝 움직이게 하는 이펙트입니다. 이해하기가 쉽지 않았는데 많은 학우분들의 자세한 설명 덕분에 이해할 수 있었습니다:) 마우스 이펙트 완성본⭐️ 마우스 이펙트가 궁금하다면?💡 원본 소스보기 ➰ HTML 먼저 마우스 커서를 만들어주고 마우스 좌표값이 나오도록 mouse__info를 만들어줍니다. 푸터를 제외한 부분입니다. Javascript Mouse Effect03 마우스 이펙트 - 이미지 효과 1 2 3 4 5 6 7 When you have a dream, you've got to grab it and never let go. 꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라. mousePageX : 0p.. 2022. 9. 22.
"마우스이펙트 03" : 조명 효과 💡 🖱 마우스 이펙트 : 조명 효과 📌 마우스 cursor 부분을 통해 이미지를 밝혀주는 이펙트입니다. 마우스 이펙트 완성본⭐️ 마우스 이펙트가 궁금하다면?💡 원본 소스보기 ➰ HTML 마우스 커서를 만들어주고 마음에 드는 문장을 적어줍니다. Javascript Mouse Effect03 마우스 이펙트 - 조명효과 1 2 3 4 5 6 7 I Dream my Painting and I paing my Dream. 나는 나의 그림을 꿈 꾸고, 내 꿈을 그린다. ➰ CSS css로 스타일을 입혀줍니다. /* mouseType */ body::after { background: rgba(0, 0, 0, 0.6); } .mouse__wrap { /* vw라고 써주면 스크롤바 생기기 때문에 */ width: 100%.. 2022. 9. 22.
[CSS] "고무고무💪🏻 박스" 를 만들어봅시다! 📎codepen을 이용해서 "고무고무 박스"를 만들어봅시다! 이번 애니메이션은 박스가 원피스에 나오는 루피 팔마냥 쭈욱 쫘악 늘어나는 박스입니다. 제 height도 저렇게 늘어났으면 좋겠습니다...🙏🏻 See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 정육면체이므로 div박스를 여섯개 만들어줍니다. 징징이😖 ✔️CSS nth-child를 통해 각 면의 변형값과 애니메이션을 만들어줍니다. body { background-color: skyblue; height: 100vh; perspective: 1000px; display: flex; align-items: center; justify-content.. 2022. 9. 22.
[CSS] "⭐️뽀짝귀염⭐️ 🤪산만정신🤪 텍스트" 를 만들어봅시다! 🧷 codepen을 이용해서 ⭐️뽀짝귀염⭐️ 🤪산만정신🤪 텍스트를 만들어봅시다! 글자 하나하나 통통튀는 효과를 만들어보도록 하겠습니다. See the Pen Untitled by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML 글자 하나하나 효과를 주어야 하기 때문에 span태그로 글자 하나하나 적어줍니다. n o e y h e y h K ✔️CSS 글자가 하나하나 통통 튀는 효과를 넣어줍니다. html,body { width: 100%; height: 100%; background: linear-gradient(140deg, skyblue 0%, beige 100%); display: flex; justify-content: center;.. 2022. 9. 22.
"패럴랙스 이펙트 05" : 이질감 효과 🔮 패럴랙스 이펙트 - 이질감 효과 📌 이번 이펙트는 스크롤할 때 이미지, 글, 번호를 오차를 통해 이질감을 부여하는 이펙트입니다. ➰ HTML 스크롤값도 나오게 해줄 것이므로 parallax__info도 만들어줍니다. Javascript parallax sliderEffect05 패럴랙스 이펙트 - 이질감 효과 1 2 3 4 5 6 7 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃는게 아니라, 웃기 때문에 행복하다. 04 section4 인생은 가까이서 보면 비극, 멀리서 보면 희극이다. 05 section5 승자는 시간.. 2022. 9. 20.
[CSS] "마우스를 오버했을 때 3d느낌으로 회전하는 사진" 을 만들어봅시다! codepen을 이용해서 3d 마우스 오버효과를 곁들인 빙글뱅글 동물사진을 만들어봅시다! 마우스를 올리고 내릴 때의 오버효과를 3d효과를 적용하여 만들어봅시다!:) 참고로 사진의 주제는 가끔 사람같아보이는 동물들입니다. 🐴❤︎ See the Pen MouseHoverEffect by KwonHyehyeon (@kwonhyehyeon) on CodePen. 코드 소스를 알아봅시다.💻 ✔️HTML up down 했을 때의 앞부분(front)와 뒷부분(back)과 To right, left했을 때 앞면(front)과 뒷면(back)부분의 틀을 작성해줍니다. Mouse Hover Effect 마우스 올리면 up↑ Mouse Hover Effect 마우스 내리면 down↓ Mouse Hover Effect 마우스.. 2022. 9. 20.
"패럴랙스 이펙트 04" : 숫자, 사진, 글 다 움직이는 효과 🔮 패럴랙스 이펙트 - 숫자, 사진, 글 다 움직이는 효과 📌 이번 이펙트는 밑으로 스크롤하면 숫자, 사진, 글이 다 나타나는 효과입니다. ➰ HTML 컨텐츠, 컨텐츠 순번, 제목, 이미지, 설명 등의 구조를 짜줍니다. Javascript parallax sliderEffect04 패럴랙스 이펙트 - 숫자, 사진, 글 다 움직이는 효과 1 2 3 4 5 6 7 01 section1 오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다. 02 section2 게으르지 않음은 영원한 삶의 집이요, 게으름은 죽음의 집이다. 03 section3 우리는 행복하기 때문에 웃는게 아니라, 웃기 때문에 행복하다. 04 section4 인생은 가까이서 보면 비극, 멀리서 보면 희극이다. 05 se.. 2022. 9. 19.