본문 바로가기

Coding162

프로그래머스 1단계 : 문자열을 정수로 바꾸기 프로그래머스 1단계 : 문자열을 정수로 바꾸기 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 제한 사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 나의 문제 풀이 정수로 변환해주는 parseInt을 사용했습니다. function solution(s) { var answer = 0; return parseInt(s); } 다른 사람 문제 풀이 새로 알게 된 것 str에서 /1을 하면 num으로 인식하여 정수가? 된다네요..? function strToInt(str){ return str/1 } 2022. 11. 6.
프로그래머스 1단계 : 하샤드 수 프로그래머스 1단계 : 하샤드 수 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 제한 사항 x는 1 이상, 10000 이하인 정수입니다. 나의 문제 풀이 split()과 reduce()를 이용하여 구했습니다. function solution(n){ return n % (""+n).split("").reduce((a, b) => +a + +b) == 0; } 다른 사람 문제 풀이 각 변수를 지정해주고 do while문을 사용하며 그 와중에 Math.floor로 소주점을 버렸습니다.. 2022. 11. 4.
프로그래머스 1단계 : 문자열 내 p와 y의 개수 프로그래머스 1단계 : 문자열 내 p와 y의 개수 대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다. 제한 사항 문자열 s의 길이 : 50 이하의 자연수 문자열 s는 알파벳으로만 이루어져 있습니다. 나의 문제 풀이 일일이 변수를 하나씩 주었으며, 각각 split메서드를 사용한 뒤 서로의 값이 같을 때 리턴하도록 하였다. function so.. 2022. 11. 3.
프로그래머스 1단계 : 정수 제곱근 판별 프로그래머스 1단계 : 정수 제곱근 판별 (굴복해버렸다...) 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. 나의 문제 풀이 우선 간결하게 하기 위해 삼향 연산자를 사용했으며, 제곱근과 관련된 수학 객체 Math.sqrt(), Math.pow()를 사용했습니다. function solution(n) { var answer = 0; var x = 0; answer = Math.sqrt(n) % 1 === 0 ? Math.pow(Math.sqrt(n)+1,2.. 2022. 11. 1.
프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 제한 사항 n은 10,000,000,000이하인 자연수입니다. 나의 문제 풀이 첫 번째. 자릿수에서 다른 분이 푼 문제를 보고 새로 안 (n + '')을 사용해 문자열로 전환했습니다. 두 번째. split(), reverse()를 사용하여 다시 문제가 원하도록 자연수를 뒤집고 또한 문자열을 map(Number) 사용해 숫자로 다시 전환해줍니다. function solution(n) { return (n + "").split("").reverse().map(Number); } 다른 사람 문제 풀이 do while문 .. 2022. 10. 31.
프로그래머스 1단계 : 자릿수 더하기 프로그래머스 1단계 : 자릿수 더하기 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한 사항 N의 범위 : 100,000,000 이하의 자연수 나의 문제 풀이 첫 번째. 변수 answer에 0를 저장해줍니다. 두 번째. string(), split(), map() 사용했습니다. string을 사용해 문자열로 전환 후 split를 사용해 일일이 또 나눠줍니다. 세 번째. map을 사용해 새로운 배열로 다시 더해줍니다. (parseInt은 정수로 변환) function solution(n) { let answer = 0; String(n).split("").map.. 2022. 10. 31.
프로그래머스 1단계 : 짝수와 홀수 프로그래머스 1단계 : 짝수와 홀수 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 제한 사항 num은 int 범위의 정수입니다. 0은 짝수입니다. 나의 문제 풀이 첫 번째. 변수 answer에 ''를 저장해줍니다. 두 번째. num이 2로 나눠졌을 때 0이 되는 것 즉, 짝수 아니면 홀수가 나오게 하도록 간단하게 삼향 연산자를 써줍니다. 세 번째. 그냥 가로를 없애봤는데 됐습니다.. function solution(num) { let answer = ''; return num % 2 == 0 ? "Even" : "Odd"; return answer; } 다른 사람 문제 풀이 if문을 사용한 것으로 num을 2로 나눴을 때 0이 .. 2022. 10. 31.
프로그래머스 1단계 : 평균 구하기 프로그래머스 1단계 : 평균 구하기 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 제한 사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 나의 문제 풀이 첫 번째. 변수 ans에다가 0을 저장해줍니다. 두 번째. for문을 사용하며, i=0 i는 arr의 갯수만큼 증가시켜줍니다. 세 번째. arr[i]배열 값을 더한 값을 ans에 넣어주며 또한 ans의 arr 갯수를 나누어 평균을 구합니다. function solution(arr) { let ans = 0 for(i=0; i a + b) / array.length; } 2022. 10. 31.
프로그래머스 1단계 : 약수의 합 프로그래머스 1단계 : 약수의 합 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 제한 사항 n은 0 이상 3000이하인 정수입니다. 나의 문제 풀이 첫 번째. 변수 ans에다가 0을 저장해줍니다. 두 번째. for문을 사용하며, if문 안에 나눈 값이 0이 됐을 때 점점 증가하는 방식으로 했습니다. 세 번째. 리턴으로 출력합니다. function solution(n) { let ans = 0; for(let i=0; i 2022. 10. 31.
슬라이드 이펙트 - 지금까지 한 것들 다 합치기! 슬라이드 이펙트 : 버튼 및 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이 이번 슬라이드 이펙트는 지금까지 한 모든 것을 한 번 합쳐봤습니다. HTML 각 슬라이드 형태에 맞는 이미지를 넣기 위해 각각 이미지를 넣어줬습니다. 또한 스크립트를 짤 때, 그에 맞는 class 이름을 지정해주고 dot도 마찬가지로 형태로 진행하기 위해 html을 구성하였습니다. 주석 표시한 것들은 스크립트에서 적용한 것들 입니다. HTML CODE 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS css는 기존에 앞 슬라이드 css와는 비슷하지만. 새로 dot을 작동시킬 때 적용되는 css를 구성하였습니다. dot에 스타일은 자기가 원하는 형태로 코드를 적용해주시면 됩니다. CSS CODE /* s.. 2022. 10. 23.
슬라이드 이펙트 - 버튼 및 닷메뉴, 무한으로 움직이기 슬라이드 이펙트 : 버튼 및 닷메뉴, 무한으로 움직이기 이번 슬라이드 이펙트는 버튼 클릭시 하단에 닷메뉴 작용과 무한으로 움직이게 코딩해봤습니다. HTML 각 슬라이드 형태에 맞는 이미지를 넣기 위해 각각 이미지를 넣어줬습니다. 또한 스크립트를 짤 때, 그에 맞는 class 이름을 지정해주고 dot도 마찬가지로 형태로 진행하기 위해 html을 구성하였습니다. 주석 표시한 것들은 스크립트에서 적용한 것들 입니다. HTML CODE 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS css는 기존에 앞 슬라이드 css와는 비슷하지만. 새로 dot을 작동시킬 때 적용되는 css를 구성하였습니다. dot에 스타일은 자기가 원하는 형태로 코드를 적용해주시면 됩니다. CSS CODE /* slid.. 2022. 10. 23.
검색 이펙트 - 2분 동안 CSS속성 입력하기 검색 이펙트 : 2분 동안 CSS속성 입력하기 이번에는 2분 동안 CSS속성을 입력하는 게임을 만들어봤습니다. HTML 이번 HTML 구조는 스크립트를 적용해 줄 각 클래스 이름을 정해주고 또 게임 느낌나게 애니메이션을 추가해줬습니다. HTML CODE CSS 속성 검색 이벤트 2분동안 CSS 속성 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않는다면 힌트보기를 세 번 이용하실 수 있습니다. 02 : 00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS 서치는 다 똑같은 형태의 css입니다. 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS va.. 2022. 10. 23.
게임 이펙트 - 뮤직플레이어.. 그 등등? 게임 이펙트 및 뮤직 플레이어를 만들어보자! 게임 느낌이 나는 이펙트 효과와 함께 뮤직 플에이어를 한 번 만들어봤습니다. GAME AND MOUSE HTML 스크립트를 적용해 줄 코드로 짜주시고, 또 거기에 맞는 class 이름을 적어주세요. GAME AND MOUSE HTML CODE STAR SIX SHOP FILE MOVIE AUDIO MUSIC PLAYER HTML 스크립트를 적용해 줄 코드로 짜주시고, 또 거기에 맞는 class 이름을 적어주세요.\ 각각 주석표시는 스크립트로 적용해주는 코드~ MUSIC PLAYER HTML CODE MUSIC PALYER LAKEY INSPIRED Blue Boi 00 : 00 04 : 00 MUSIC LIST GAME BACKGROUND CSS 이건 어디에서.. 2022. 10. 23.
슬라이드 이펙트 - 버튼 및 닷메뉴 슬라이드 이펙트 : 버튼 및 닷메뉴 이번 슬라이드 이펙트는 버튼 클릭시 하단에 닷메뉴도 작동하는 형태로 코딩해봤습니다.. HTML 각 슬라이드 형태에 맞는 이미지를 넣기 위해 각각 이미지를 넣어줬습니다. 또한 스크립트를 짤 때, 그에 맞는 class 이름을 지정해주고 dot도 마찬가지로 형태로 진행하기 위해 html을 구성하였습니다. HTML CODE prev next CSS css는 기존에 앞 슬라이드 css와는 비슷하지만. 새로 dot을 작동시킬 때 적용되는 css를 구성하였습니다. dot에 스타일은 자기가 원하는 형태로 코드를 적용해주시면 됩니다. CSS CODE /* slider */ .slider__wrap { width: 100%; height: 100vh; display: flex; alig.. 2022. 10. 23.
검색 이펙트 - sort(), reverse()를 이용해 다양한 속성을 알아보자! 검색 이펙트 : sort(), reverse() 이번에는 메서드 종류인 sort(), reverse()를 이용해 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML 이번 HTML 구조는 스크립트를 적용해 줄 각 버튼을 만들어줍니다. 뭐..반대, 내림, 오름, 알파..등등 여러가지가 있네요..? HTML CODE sort(), reverse()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 반대로 정렬하기 내림차순 정렬하기 오름차순 정렬하기 알파벳순 (a~z) 알파벳순 (z~a) 랜덤 정렬하기 전체 속성 갯수 : 0 CSS 서치는 다 똑같은 형태의 css입니다. 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS var() 함수를 사용하.. 2022. 10. 23.
페럴랙스 이펙트의 리빌 효과를 알아보자! 페럴랙스 이펙트 : 리빌 효과 이번에는 페럴랙스 이펙트 중에 리빌 효과를 넣는 방법을 코딩해봤습니다. HTML HTML 코드는 사용해 줄 섹션 구간을 나눠주고 CSS와 스크립트를 이용하기위해 각각에 class로 이름을 지정해줍니다. 이번에는 리빌 효과를 적용하기 위해서 각 적용할 구간에 reveal 클래스 이름을 집어넣어주세요! 텍스트는 자신이 좋아하는 말이나..명언을...? 집어넣어주세여.. HTML CODE 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6.. 2022. 10. 23.
세 번째 오답노트! 오답 노트... 세 번째 이야기 나의 오답 노트 작성.. 여기 있는 것들은 대체로 이해가 가지만 좀 만 변형해서 나온다면 어떨까나..?(땀 좀 흘리겠습니다..) 첫 번째 문제 const arr = [1,1,3,3,0,1,1] function solution(arr) { return arr.filter((item, idx) => item !== arr[idx+1]); // item 순서와 arr+1에서의 순서를 서로 나열했을 때 중복되는 것을 제거하라 } // 1,1,3,3,0,1,1와 1,3,3,0,1,1,x x는 존재하지 않는 값 console.log(solution(arr)) // 1,3,0,1 두 번째 문제 const arr = "webstoryboy"; function solution(s) { c.. 2022. 10. 21.
아마도..? 꼴찌의 오답 노트 이야기 두 번째 이야기 오답 노트... 두 번째 이야기 나의 오답 노트 작성.. 여기 있는 것들은 대체로 이해가 가지만 좀 만 변형해서 나온다면 어떨까나..?(땀 좀 흘리겠습니다..) 첫 번째 문제 function solution(arr) { let answer = []; let sum = 0, min = 1000; for(let x of arr) { if(x % 2 ===1) { // arr 배열 중 2를 나눴을 때 1이 되는 값 77, 41, 53, 85 sum += x; // 나온 값 더하기 256 if(x < min) min = x; } } answer.push(sum); // sum = 256 answer.push(min); // min = 41 return answer; // 256, 41 } arr = [12, 7.. 2022. 10. 10.
아마도..? 꼴찌의 오답 노트 이야기 오답 노트... 나의 오답 노트 작성.. 여기 있는 것들은 대체로 이해가 가지만 좀 만 변형해서 나온다면 어떨까나..?(땀 좀 흘리겠습니다..) 첫 번째 문제 function func(){ let i = 10, hap = 0; // i는 10까지.. while(i > 1){ if(i % 3 == 1){ // i에 3을 나누고 1는 남는 값 (10, 7, 4) hap += i; // 나온 결과 값을 hap에 더하여 저장한다. } i--; // 10부터 점점 작아진다. } document.write(hap); } func(); // 답은 21 첫 문제 부터 틀렸습니다.. 두 번째 문제 function func(data, exp){ // func(1, 5);이니깐 각각 1, 5를 대입 let result = .. 2022. 10. 1.
검색 이펙트 - filter()를 이용해 속성의 중요도를 알아보자! 검색 이펙트 : filter() 이번에는 배열 메서드인 filter()를 이용해 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML HTML 구조는 언제나와 같이 CSS와 스크립트를 사용하기 위한 각각 맞는 클래스 이름을 지정해줍니다. HTML CODE filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 전체 속성 갯수 : 0 CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS var() 함수를 사용하여 색 지정 및 변경을 하기 편하도록 해줬습니다. var() : 함수로 정의해둔 속성을 불러와 사용가능하다. : .. 2022. 9. 29.
페럴랙스 이펙트의 텍스트 효과를 알아보자! 페럴랙스 이펙트 : 텍스트 효과 이번에는 페럴랙스 이펙트 중에 텍스트 효과를 넣는 방법을 코딩해봤습니다. HTML HTML 코드는 사용해 줄 섹션 구간을 나눠주고 CSS와 스크립트를 이용하기위해 각각에 class로 이름을 지정해줍니다. 텍스트는 자신이 좋아하는 말이나..명언을...? 집어넣어주세여.. HTML CODE 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다. 07 section7 사회는 널 기다려주지.. 2022. 9. 29.
마우스 이펙트의 텍스트 효과를 알아보자! 마우스 이펙트 : 텍스트 효과 이번에는 마우스에 텍스트 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 이번엔 조큼 다릅니나. 이건 약간의 편법을 썼기에 기존 큰 네모를 반으로 나누고 그 위에 텍스트를 얹은 뒤에 overflow: hidden으로 반씩 나오는 식으로 진행 할 예정입니다. 나머지 들을 기존에 class로 이름을 지정해 주면 됩니다. HTML CODE one two one two three four three four five six five six seven eight seven eight CSS CSS는 위 HTML에서 말했듯이 각각의 각 left와 right에다가 50vw로 반만 지정해 준 뒤 서로 교차 됐을 때 가려지도록 overflow: hidden을 사용해줍니다. e.. 2022. 9. 29.
검색 이펙트 - find()를 이용하여 만들어보자! 검색 이펙트 : find() 이번 배열 메서드인 find()를 이용해 만든 검색 기능을 가진 이펙트를 코딩해봤습니다. HTML HTML 구조는 언제나와 같이 CSS와 스크립트를 사용하기 위한 각각 맞는 클래스 이름을 지정해줍니다. HTML CODE find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 검색한 단어의 설명이 나옵니다. 전체 속성 갯수 : 0 CSS 사이트를 코딩하는 데에 필요한 css의 구조를 잡아줍니다. 앞선 검색 이펙트들과 거의 동일한 형태입니다. CSS var() 함수를 사용하여 색 지정 및 변경을 하기 편하도록 해줬습니다. var() : 함수로 정의해둔 속성을 불러와 사용가능하다. : 사용 방법. var(--htmlColor) CSS CODE :root.. 2022. 9. 29.
마우스 이펙트의 기울기 / 글씨 반전 효과를 알아보자! 마우스 이펙트 : 기울기 효과 / 글씨 반전 효과 이번에는 마우스에 이미지 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 뭐.. 다른 것들과 거의 비슷하죠..? 추가적인 mouse__info의 좌표 값만 따로 몇 개만 추가하시면 됩니다. 각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다. 또한, 현재 마우스 좌표 값을 스크립트 적용하기 위해 mouse__info 클래스에 각각에 좌표 값에 맞는 클래스를 따로 지정해줍니다. 글은..여러분이 평소에 가진 가치관을 기준으로...? HTML CODE Do it yourself. 너 혼자 알아서 해라. mousePageX : 0px mousePageY : 0px centerPageX : .. 2022. 9. 28.
Eye Card Animation Eye Card Animation 이번에는 codepen을 통해서 카드와 함께 사람 눈이 움직이는 애니메이션을 만들어 봤습니다. 1. HTML속 각각에 class를 querySelector 요소를 잡아줍니다. 2. animate 요소에 움직임을 주기 위해서 speed 요소도 잡아주며, 각 좌표에 값도 지정해줍니다. 3. script 안에 eye, wrap 요소의 스타일을 주며, perspective는 원근감 느낌을 주는 속성입니다. See the Pen Eye Card Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 26.
Loading Animation Loading Animation 이번에는 codepen을 통해서 로딩 모션에 애니메이션을 만들어 봤습니다. 기본적인 html을 잡아준 뒤, css에 형태를 잡아주고 keyframe 안에 각 %마다 transform를 지정해줍니다. See the Pen Loading Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 26.
마우스 이펙트의 이미지 효과를 알아보자! 마우스 이펙트 : 이미지 효과 이번에는 마우스에 이미지 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 딱히 어려운 건 없습니다. 각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다. 또한, 현재 마우스 좌표 값을 스크립트 적용하기 위해 mouse__info 클래스에 각각에 좌표 값에 맞는 클래스를 따로 지정해줍니다. 명언은..여러분이 평소에 가진 가치관을 기준으로...? HTML CODE Look at yourself before blaming others 남 탓 하기 전에 너 자신을 봐라. mousePageX : 0px mousePageY : 0px centerPageX : 0px centerPageY : 0px CSS 이번 C.. 2022. 9. 22.
마우스 이펙트의 조명 효과를 알아보자! 마우스 이펙트 : 조명 효과 이번에는 마우스에 조명 효과를 넣은 이펙트를 코딩해봤습니다. HTML HTML 코드는 딱히 어려운 건 없습니다. 각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다. 명언은..여러분이 평소에 가진 가치관을 기준으로...? HTML CODE Justice without power is incompetence. 힘 없는 정의는 무능이다. CSS 이번 CSS 코드는 언제나 전과 같이 원하는 디자인으로 구성했고, 기본적인 반응형도 해주었습니다. CSS CODE /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; align-items: center.. 2022. 9. 22.
Square Animation Square Animation 이번에는 codepen을 통해서 정사각형 짧아지고 길어지는 모션이 반복되는 애니메이션을 만들어 봤습니다. 1. 기본적인 html 형태를 잡아줍니다. 2. css는 이번시간에는 전과 마찬가지로 mouseHover Animation에서 새로 익힌 perspective, preserve-3d를 사용했습니다. perspective : transform에 translateZ 추가해주며, 사용시 원근감을 느끼게 해줄 수 있습니다. preserve-3d : 요소에 3d 효과를 추가 해줍니다. See the Pen Square Animation by KDB6 (@kdb6) on CodePen. 2022. 9. 22.
parallax 05 페럴랙스 이펙트 : 이질감 효과 이번 시간에는 페럴랙스 형태를 가진 이펙트를 코딩해봤습니다. HTML 사이트를 코딩하는 데에 필요한 HTML의 구조를 잡아줍니다. 각 태그에 클래스 이름을 설정하여 각 구역을 잡아줍니다. 코드보기 01 section1 니 인생은 너가 바꾸는거다. 02 section2 남 탓 하기 전에 너 자신을 봐라. 03 section3 알면서도 안하고 가만히 있으면 거지가 되면 된다. 04 section4 남들은 너한테 큰 관심이 없다. 05 section5 너 혼자 알아서 해라. 06 section6 돈이 세상에 다는 아니지만 세상은 돈으로 굴러간다. 07 section7 사회는 널 기다려주지 않는다. 08 section8 힘 없는 정의는 무능이다. 09 section9 객관적으로 .. 2022. 9. 20.

INFORMATION

javascript

css

html