Giant Danio Fish
본문 바로가기

CodingKing168

프로그래머스 1단계 : 핸드폰 번호 가리기 프로그래머스 1단계 : 핸드폰 번호 가리기 코딩테스트 연습 > 연습문제 > 핸드폰 번호 가리기 ✔ 문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. ✔ 제한 사항 phone_number는 길이 4 이상, 20이하인 문자열입니다. ✔ 입출력 예 phone_number result "01033334444" "*******4444" "027778888" "*****8888" ✔ 문제풀이 function solution(phone_number) { let answer = ''; .. 2022. 11. 10.
프로그래머스 1단계 : 콜라츠 추측 프로그래머스 1단계 : 콜라츠 추측 코딩테스트 연습 > 연습문제 > 콜라츠 추측 ✔ 문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업.. 2022. 11. 9.
프로그래머스 1단계 : 서울에서 김서방 찾기 프로그래머스 1단계 : 서울에서 김서방 찾기 코딩테스트 연습 > 연습문제 > 서울에서 김서방 찾기 ✔ 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. ✔ 제한 사항 seoul은 길이 1 이상, 1000 이하인 배열입니다. seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. "Kim"은 반드시 seoul 안에 포함되어 있습니다. ✔ 입출력 예 seoul return ["Jane", "Kim"] "김서방은 1에 있다" ✔ 문제풀이 function solution(seoul) { for(.. 2022. 11. 8.
프로그래머스 1단계 : 정수 내림차순으로 배치하기 프로그래머스 1단계 : 정수 내림차순으로 배치하기 코딩테스트 연습 > 연습문제 > 정수 내림차순으로 배치하기 ✔ 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. ✔ 제한 사항 n은 1이상 8000000000 이하인 자연수입니다. ✔ 입출력 예 n answer 118372 873211 ✔ 문제풀이 function solution(n) { var answer = parseInt(n.toString().split('').sort().reverse().reduce((p,c) => p + c)) return answer; } ✔ 설명 par.. 2022. 11. 7.
프로그래머스 1단계 : 두 정수 사이의 합 프로그래머스 1단계 : 두 정수 사이의 합 코딩테스트 연습 > 연습문제 > 두 정수 사이의 합 ✔ 문제 설명 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요. 예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다. ✔ 제한 사항 a와 b가 같은 경우는 둘 중 아무 수나 리턴하세요. a와 b는 -10,000,000 이상 10,000,000 이하인 정수입니다. a와 b의 대소관계는 정해져있지 않습니다. ✔ 입출력 예 x n answer a b return 3 5 12 3 3 3 5 3 12 ✔ 문제풀이 function solution(a, b) { var answer = 0; if(a>=b){ for(.. 2022. 11. 6.
프로그래머스 1단계 : x만큼 간격이 있는 n개의 숫자 프로그래머스 1단계 : x만큼 간격이 있는 n개의 숫자 코딩테스트 연습 > 연습문제 > x만큼 간격이 있는 n개의 숫자 ✔ 문제 설명 함수 solution은 정수 x와 자연수 n을 입력 받아, x부터 시작해 x씩 증가하는 숫자를 n개 지니는 리스트를 리턴해야 합니다. 다음 제한 조건을 보고, 조건을 만족하는 함수, solution을 완성해주세요. ✔ 제한 사항 x는 -10000000 이상, 10000000 이하인 정수입니다. n은 1000 이하인 자연수입니다. ✔ 입출력 예 x n answer 2 5 [2,4,6,8,10] 4 3 [4,8,12] -4 2 [-4, -8] ✔ 문제풀이 function solution(x, n) { var answer = []; for(var i=1; i (i + 1) * .. 2022. 11. 5.
프로그래머스 1단계 : 문자열을 정수로 바꾸기 프로그래머스 1단계 : 문자열을 정수로 바꾸기 코딩테스트 연습 > 연습문제 > 문자열을 정수로 바꾸기 ✔ 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. ✔ 제한 사항 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. ✔ 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. ✔ 문제풀이 function solution(s) { var answer = 0; return Number(s); } ✔ 설명 맞추라.. 2022. 11. 4.
프로그래머스 1단계 : 하샤드 수 프로그래머스 1단계 : 하샤드 수 코딩테스트 연습 > 연습문제 > 하샤드 수 ✔ 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. ✔ 제한 사항 x는 1 이상, 10000 이하인 정수입니다. ✔ 입출력 예 arr answer 10 true 12 true 11 false 13 false ✔ 문제풀이 function solution(x) { var sum = 0; var answer = true; var arr = String(x).split(""); for(let i=0;.. 2022. 11. 3.
프로그래머스 1단계 : 문자열 내 p와 y의 개수 프로그래머스 1단계 : 문자열 내 p와 y의 개수 코딩테스트 연습 > 연습문제 > 문자열 내 p와 y의 개수 ✔ 문제 설명 대문자와 소문자가 섞여있는 문자열 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".. 2022. 11. 2.
프로그래머스 1단계 : 정수 제곱근 판별 연습문제 > 정수 제곱근 판별 ✔ 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. ✔ 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. ✔ 입출력 예 N return 121 144 3 -1 ✔ 문제풀이 function solution(n) { var answer = 0; let num = Math.sqrt(n); if(num % 1 === 0 ) return (num+1) * (num+1) else return -1 return answer; } ✔ 설명 Math.sqrt() 함수는 숫자의 제곱.. 2022. 11. 1.
프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 코딩테스트 연습 > 연습문제 > 자연수 뒤집어 배열로 만들기 ✔ 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. ✔ 제한 사항 n은 10,000,000,000이하인 자연수입니다. ✔ 입출력 예 N return 12345 [5,4,3,2,1] ✔ 문제풀이 function solution(n) { var arr = n.toString().split(''); var answer = []; arr.reverse(); for(var i=arr.length-1; i>=0; i--){ answer.push(Number(arr[i])); } answer.revers.. 2022. 11. 1.
프로그래머스 1단계 : 자릿수 더하기 프로그래머스 1단계 : 평균 구하기 코딩테스트 연습 > 연습문제 > 자릿수 더하기 ✔ 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. ✔ 제한 사항 N의 범위 : 100,000,000 이하의 자연수 ✔ 입출력 예 N answer 123 6 987 24 ✔ 문제풀이 function solution(n) { var answer = 0; let a = String(n); for(i=0; i 2022. 10. 31.
프로그래머스 1단계 : 평균 구하기 프로그래머스 1단계 : 평균 구하기 코딩테스트 연습 > 연습문제 > 평균 구하기 ✔ 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. ✔ 제한 사항 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. ✔ 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 ✔ 문제풀이 function solution(arr) { var answer = 0; for (i = 0; i < arr.length; i++){ answer += arr[i]; } answer /= arr.length; return answer; } ✔ 설명 for문으로 배열안의 수들을 모두 더하고 length.. 2022. 10. 29.
프로그래머스 1단계 : 짝수와 홀수 프로그래머스 1단계 : 짝수와 홀수 코딩테스트 연습 > 연습문제 > 짝수와 홀수 ✔ 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. ✔ 제한 사항 num은 int 범위의 정수입니다. 0은 짝수입니다. ✔ 입출력 예 num return 3 "Odd" 4 "Even" ✔ 문제풀이 function solution(num) { var answer = ''; if(num % 2 == 0){ answer = "Even" } else { answer = "Odd" } return answer; } ✔ 설명 if문을 돌려서 2로 나눴을때 나머지가 0인수는 짝수로 아니면 홀수로 반환하도록 만들면 되겠군요. 참 쉽죠? 문제 보기 2022. 10. 29.
프로그래머스 1단계 : 약수의 합 프로그래머스 1단계 : 약수의 합 코딩테스트 연습 > 연습문제 > 약수의 합 ✔ 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. ✔ 제한 사항 n은 0 이상 3000이하인 정수입니다. ✔ 입출력 예 n return 12 28 5 6 입출력 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 입출력 예 #2 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. ✔ 문제풀이 function solution(n) { var answer = 0; for(i = 0; i 2022. 10. 29.
게임 이펙트 - 같은 그림 찾기 게임 효과 게임 이펙트 - 같은 그림 찾기 오늘은 같은그림찾기 게임을 만들어보겠습니다. 핑크색 메모리 문서를 클릭해보세요! 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 게임판을 만들 틀을 잡아줍니다. 같은사진을 앞뒤로 쓸것이기에 li태그 안에 div태그를 두개를 만들어줍시다. 소스 보기 같은그림찾기 1. 기회는 세번입니다. 2. 한번 맞출때 마다 1점씩 올라갑니다. 3. 제한시간은 없으니 천천히 푸시기 바랍니다. 4. 마음의 준비를 하신 뒤 시작버튼을 눌러주세요. 시작 틀린 횟수 : 0 맞힌 개수 : 0 개 게임 오버 다시 시작하기 게임 승리 틀린 개수 : 0개 CSS 작성 같은그림찾기 CSS 소스 보기 .memory__wrap { position: relative; } .memory__inne.. 2022. 10. 29.
슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼, 닷메뉴, 무한) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과와 아래쪽 닷버튼을 만들어 클릭시 넘어가는 효과입니다 사진은 무한정으로 있는듯한 느낌입니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 이전 5번예제와 같습니다. 소스 보기 prev next CSS 작성 이전 5번예제와 같습니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-cont.. 2022. 10. 20.
게임 이펙트 - 스피드 퀴즈 게임 효과 게임 이펙트 - CSS 스피드퀴즈 오늘은 audio태그를 이용해서 음악플레이어를 만들어보겠습니다. 빨간색 퀴즈게임 문서를 클릭해보세요! 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 전체 틀을 헤더와 메인 푸터로 잡아주고 음악플레이어틀을 잡아줍니다. 소스 보기 *** Music player *** Cottonmouth - YouTube Music 0:00 4:00 뮤직 리스트 CSS 작성 스피드 퀴즈 CSS 소스 보기 :root { --htmlColor: #223547; --cssColor: #472222; --javascriptColor: #224736; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: "NexonL.. 2022. 10. 17.
게임 이펙트 - 뮤직 플레이어 게임 효과 게임 이펙트 - 음악플레이어 오늘은 audio태그를 이용해서 음악플레이어를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 전체 틀을 헤더와 메인 푸터로 잡아주고 음악플레이어틀을 잡아줍니다. 소스 보기 Game shop 음악듣기 음악듣기 음악듣기 음악듣기 음악듣기 음악듣기 *** Music player *** Cottonmouth - YouTube Music 0:00 4:00 뮤직 리스트 CSS 작성 헤더와 푸터, 소스보기 CSS 소스 보기 @import url("https://webfontworld.github.io/sandbox/SBAggro.css"); * { margin: 0; padding: 0; box-sizing: border-box; font-family:.. 2022. 10. 17.
서치 이펙트 - 정렬하기 Search Effect06 sort(), reverse(), random()를 이용하여 정렬하기 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 속성과 설명은 스크립트로 넣기 위해서 HTML에서 뻈습니다. 소스 보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 0 CSS 작성 버튼들만 디자인 해줍시다 소스 보기 :root { --htmlColor: #223547; --cssColor: #56c785; --javascriptColor: #7d56c7; } * { margin: 0; padding: 0; box-sizing: border-b.. 2022. 10. 17.
슬라이더 이펙트 - (버튼, 닷메뉴) 슬라이더 효과 슬라이드 이펙트 - 이미지 슬라이드(버튼) 좌 우에 버튼을 만든 후 버튼을 누를때마다 다음 사진으로 넘어가는 효과와 아래쪽 닷버튼을 만들어 클릭시 넘어가는 효과입니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 버튼과 배경사진 바뀌는 사진을 만들어줍니다. 소스 보기 prev next CSS 작성 CSS는 이전 예제와 크게 바뀐거 없이 버튼과, 닷버튼 만들어줍니다. 소스 보기 @import url('https://webfontworld.github.io/NanumBarunGothic/NanumBarunGothic.css'); .slider__wrap { width: 100%; height: 100vh; display: flex; align-items: center; justify-.. 2022. 10. 14.
패럴랙스 이펙트 - 리빌 효과 패럴랙스 효과 패럴랙스 이펙트 - 리빌 효과 글씨위에 가상변수로 덮어씌어서 글씨가 리빌하는 효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 각각의 섹션을 만들어 줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈이 남 주머니에 있는 거금보다 낫다. 09 section9 최고에 도달하려면 최저에서.. 2022. 10. 6.
오답노트01 오답노트 2022-10-06일자 오답노트입니다. 01. 결괏값을 작성하시오. parseInt(x) : x의 자료형을 숫자(정수)로 바꿔줌, 숫자가 아니면 NaN 반환합니다. NaN이 나올때 까지 식을 돌려보면 6 + 9 + 9 + 1 = 25 function q1(num) { let answer = 0; while(num) { answer += num % 10; num = parseInt(num / 10); } return answer; } console.log(q1(1996)); 정답 25 02. 결괏값을 작성하시오. sort()메서드는 순서대로 정렬합니다. 맨 첫번째 숫자 기준으로 반환하므로 정답은 1, 10, 2, 3, 31, 32, 4가 됩니다. function q2() { const array .. 2022. 10. 6.
마우스 이펙트 - 텍스트 효과 마우스 효과 마우스 이펙트 - 텍스트 효과 마우스 커서를 따라서 글씨가 가운데에서 양옆으로 색상이 바뀌고 글씨에 마우스가 올라가면 크기가 커지면서 반전효과를 주어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 가운데 넣을 이미지와, 사용할 커서 각각 똑같은 글씨를 좌우로 넣도록 두개씩 만들어 봅시다. 소스 보기 I'm still hungry I'm still hungry bab jo jae bal bab jo jae bal 난 아직 배가고프다. 난 아직 배가고프다. 밥좀 주세요. 밥좀 주세요. CSS 작성 이미지를 가운데에 넣어주고, 커서를 20,20px로 조그마하게 원으로 만들었습니다. 커서에 active 클래스가 추가되면 마우스 반전과 크기가 5배로 커지도록 만들어줍니다.글씨는 가운.. 2022. 9. 29.
패럴랙스 이펙트 - 텍스트 효과 패럴랙스 효과 패럴랙스 이펙트 - 텍스트 효과 스크롤값에 따라서 텍스트가 하나 하나 씩 딜레이를 줘서 나타나게 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 각각의 섹션을 만들고 보기 편하게 하기 위해서 스크롤 탑값을 보여주는 태그를 만들어줍니다. 소스 보기 01 section1 산다는것 그것은 치열한 전투이다. 02 section2 하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다. 03 section3 내일은 내일의 태양이 뜬다. 04 section4 배고픈 자 밥솥을 열어라. 05 section5 그대 자신의 영혼을 탐구하라. 06 section6 돈이 없는 것은 죄다. 07 section7 무전 유죄, 유전 무죄 08 section8 내 주머니의 푼돈이 남 주머.. 2022. 9. 29.
Search Effect05 - filter()를 이용하여 속성의 중요도 보여주기 Search Effect05 filter()를 이용하여 속성의 중요도 보여주기 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 속성과 설명은 스크립트로 넣기 위해서 HTML에서 뻈습니다. 소스 보기 filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 CSS 속성 갯수 : 0 CSS 작성 버튼들만 디자인 해줍시다 소스 보기 :root { --htmlColor: #223547; --cssColor: #56c785; --javascriptColor: #7d56c7; } * { margin: 0; padding: 0; box-sizing: border-box; font-fa.. 2022. 9. 29.
마우스 이펙트 - 기울기 효과 글씨 반전 효과 마우스 효과 마우스 이펙트 - 기울기 효과 글씨 반전 효과 가운데 이미지를 넣어서 이미지와 설명은 기울이면서 3d효과가 나게 만들고 마우스 커서에 글씨를 가져다 대면 반전효과를 만들어보겠습니다. 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 가운데 넣을 이미지와, 사용할 커서, 마우스 위치 정보를 알려줄 박스를 만들어줍니다. 소스 보기 Don't cry for the dead Because he is resting. 죽은자를 위해 울지 말라. 그는 휴식을 취하고 있기 때문이다. pageX : 0px pageY : 0px centerPageX : 0px centerPageY : 0px maxPageX : 0px maxPageY : 0px anglePageX : 0px anglePageY : 0px .. 2022. 9. 28.
Search Effect04 - find() 사용 Search Effect04 find()를 이용하여 속성을 검색하면 설명 보여주기 결과 원본 소스 보기 원본 사이트 보기 HTML 작성 CSS 속성과 설명은 스크립트로 넣기 위해서 HTML에서 뻈습니다. 소스 보기 find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다.!!! CSS 속성 갯수 : 0 CSS 작성 전에 만들던 예제처럼 스타일을 꾸미고, 검색할 속성 박스만 디자인 해줍니다. 소스 보기 :root { --htmlColor: #223547; --cssColor: #56c785; --javascriptColor: #7d56c7; } * { margin: 0; padding: 0; box-sizing: border-box; font-.. 2022. 9. 28.
애니메이션 만들기 - Moving Eye CSS 애니메이션 연습하기 마우스 커서를 따라 눈이 움직이는듯한 애니메이션을 만들어보겠습니다. 결과 See the Pen Moving Eye by younghwan12 (@younghwan12) on CodePen. HTML 정육면체를 만들기 위해서 div박스를 6개 만들어줍니다. 무섭지 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;.. 2022. 9. 26.
CSS 애니메이션 - Loading ball CSS 애니메이션 연습하기 원이 돌아가면서 로딩되는거같은 효과를 만들어보겠습니다. 결과 See the Pen loading by younghwan12 (@younghwan12) on CodePen. HTML 공을 10개 만들어줍니다 CSS 공을 360도로 애니메이션 효과를 주면서 돌려주면서, 각각 하나에 딜레이를 줍니다. body { background-color: rgba(100,20,240,0.7); } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin .6s linear infinite reverse; } .ball {.. 2022. 9. 25.

광고 준비중입니다