본문 바로가기

CODING166

프로그래머스 1단계 : 정수 제곱근 판별 프로그래머스 1단계 : 정수 제곱근 판별 코딩테스트 연습 > 연습문제 > 정수 제곱근 판별 💩 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 💩 제한 조건 ☝️ n은 1이상, 50000000000000 이하인 양의 정수입니다. 💩 문제 풀이 function solution(n) { let answer; for(x=1; x 2022. 11. 13.

프로그래머스 1단계 : 가운데 글자 가져오기 프로그래머스 1단계 : 가운데 글자 가져오기 코딩테스트 연습 > 연습문제 > 가운데 글자 가져오기 💩 문제 설명 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 💩 제한 조건 ☝️ s는 길이가 1 이상, 100이하인 스트링입니다. 💩 문제 풀이 function solution(s) { let x; (s.length % 2 == 0) ? x = s.length / 2 : x = s.length / 2 - 0.5; return (s.length % 2 == 0) ? s.charAt(x - 1) + s.charAt(x) : s.charAt(x); } 변수 x를 선언해 주고, s의 길이가 홀수인지, 짝수인지에 따라 x에 중간 인.. 2022. 11. 11.

프로그래머스 1단계 : 음양 더하기 프로그래머스 1단계 : 음양 더하기 코딩테스트 연습 > 월간 코드 챌린지 시즌2 > 음양 더하기 💩 문제 설명 어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 💩 제한 조건 ☝️ absolutes의 길이는 1 이상 1,000 이하입니다. ✌️ absolutes의 모든 수는 각각 1 이상 1,000 이하입니다. 🤘 signs의 길이는 absolutes의 길이와 같습니다. 🤟 signs[i] 가 참이면 absolutes[i]의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다. 💩 문제 풀이 f.. 2022. 11. 10.

프로그래머스 1단계 : 제일 작은 수 제거하기 프로그래머스 1단계 : 제일 작은 수 제거하기 코딩테스트 연습 > 연습문제 > 제일 작은 수 제거하기 💩 문제 설명 정수를 저장한 배열, arr 에서 가장 작은 수를 제거한 배열을 리턴하는 함수, solution을 완성해주세요. 단, 리턴하려는 배열이 빈 배열인 경우엔 배열에 -1을 채워 리턴하세요. 예를들어 arr이 [4,3,2,1]인 경우는 [4,3,2]를 리턴 하고, [10]면 [-1]을 리턴 합니다. 💩 제한 조건 ☝️ arr은 길이 1 이상인 배열입니다. ✌️ 인덱스 i, j에 대해 i ≠ j이면 arr[i] ≠ arr[j] 입니다. 💩 문제 풀이 function solution(arr) { answer = arr.map(el => el); answer2 = arr.sort(function(a,.. 2022. 11. 9.

프로그래머스 1단계 : 나머지가 1이 되는 수 찾기 프로그래머스 1단계 : 나머지가 1이 되는 수 찾기 코딩테스트 연습 > 월간 코드 챌린지 시즌3 > 나머지가 1이 되는 수 찾기 💩 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 💩 제한 조건 ☝️ 3 ≤ n ≤ 1,000,000 💩 문제 풀이 function solution(n) { for(x=1; x 2022. 11. 8.

프로그래머스 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의 대소관계는 정해져있지 않습니다. 💩 문제 풀이 function solution(a, b) { let answer = 0; if(a==b){answer = a} else if (a>b){ for(i=b; ia){ for(i.. 2022. 11. 7.

프로그래머스 1단계 : 정수 내림차순으로 배치하기 프로그래머스 1단계 : 정수 내림차순으로 배치하기 코딩테스트 연습 > 연습문제 > 정수 내림차순으로 배치하기 💩 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를 들어 n이 118372면 873211을 리턴하면 됩니다. 💩 제한 조건 ☝️ n은 1이상 8000000000 이하인 자연수입니다. 💩 문제 풀이 function solution(n) { return (n+"").split('').sort().reverse().join('')/1; } n을 문자열로 바꾼 뒤, 쪼개주고, sort()와 reverse()로 정렬해 줍니다. 다시 합쳐주고, 숫자로 만들어주면 끝! 💩 다른 풀이 function solut.. 2022. 11. 7.

프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 프로그래머스 1단계 : 자연수 뒤집어 배열로 만들기 코딩테스트 연습 > 연습문제 > 자연수 뒤집어 배열로 만들기 💩 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를 들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 💩 제한 조건 ☝️ n은 10,000,000,000이하인 자연수입니다. 💩 문제 풀이 function solution(n) { answer = (n + "").split('').reverse(); for(i=0; i0); return arr; } 수박 문제에서와 같은 천재적인 발상이네요... function solution(n) { return (n + '').split('').reverse().map(n => parseInt(n)); }.. 2022. 11. 6.

프로그래머스 1단계 : 문자열을 정수로 바꾸기 프로그래머스 1단계 : 문자열을 정수로 바꾸기 코딩테스트 연습 > 연습문제 > 문자열을 정수로 바꾸기 💩 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 💩 제한 조건 ☝️ s의 길이는 1 이상 5이하입니다. ✌️ s의 맨앞에는 부호(+, -)가 올 수 있습니다. 👌 s는 부호와 숫자로만 이루어져있습니다. 🤟 s는 "0"으로 시작하지 않습니다. 💩 문제 풀이 function solution(s) { return Number(s); } 이걸 문제라고? 💩 다른 풀이 function strToInt(str){ return str/1 } 똑똑한 자바스크립트는 변수에 사칙연산을 하면 자동으로 문자열을 숫자로 인식한다고 합니다. 꿀팁을 알아가네요. 문제 풀어보기 2022. 11. 4.

프로그래머스 1단계 : 없는 숫자 더하기 프로그래머스 1단계 : 없는 숫자 더하기 코딩테스트 연습 > 연습문제 > 없는 숫자 더하기 💩 문제 설명 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 💩 제한 조건 ☝️ 1 ≤ numbers의 길이 ≤ 9 ✌️ 0 ≤ numbers의 모든 원소 ≤ 9 🤘 numbers의 모든 원소는 서로 다릅니다. 💩 문제 풀이 function solution(numbers) { let sum = 0; for(i=0; i cur + acc, 0); } 0부터 9까지의 모든 수를 더한 총합은 45입니다. 역으로 생각하여 numbers 내에 존재.. 2022. 11. 3.

프로그래머스 1단계 : 하샤드 수 프로그래머스 1단계 : 하샤드 수 코딩테스트 연습 > 연습문제 > 하샤드 수 💩 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 💩 제한 조건 ☝️ x는 1 이상, 10000 이하인 정수입니다. 💩 문제 풀이 function solution(x) { let answer = true; const a = String(x).split(''); let sum = 0; for(i=0; i +b + +a )); } reduce()를 사용하여 한 줄로 간편하게 작업할 수도 있었습니.. 2022. 11. 2.

프로그래머스 1단계 : 수박수박수박수박수박수? 프로그래머스 1단계 : 수박수박수박수박수박수? 코딩테스트 연습 > 연습문제 > 수박수박수박수박수박수? 💩 문제 설명 길이가 n이고, "수박수박수박수...."와 같은 패턴을 유지하는 문자열을 리턴하는 함수, solution을 완성하세요. 예를들어 n이 4이면 "수박수박"을 리턴하고 3이라면 "수박수"를 리턴하면 됩니다. 💩 제한 조건 ☝️ n은 길이 10,000이하인 자연수입니다. 💩 문제 풀이 function solution(n) { var answer = ''; for(i=1; i { return '수박'.repeat(n/2) + (n%2 === 1 ? '수' : ''); } "수박" 문자열을 n/2번만큼 반복시키고, n이 홀수일 경우 "수"로 끝나도록, 짝수일 경우 "박"으로 끝나도록 삼항연산자를 이.. 2022. 11. 1.

프로그래머스 1단계 : 서울에서 김서방 찾기 프로그래머스 1단계 : 서울에서 김서방 찾기 코딩테스트 연습 > 연습문제 > 서울에서 김서방 찾기 💩 문제 설명 String형 배열 seoul의 element중 "Kim"의 위치 x를 찾아, "김서방은 x에 있다"는 String을 반환하는 함수, solution을 완성하세요. seoul에 "Kim"은 오직 한 번만 나타나며 잘못된 값이 입력되는 경우는 없습니다. 💩 제한 조건 ☝️ seoul은 길이 1 이상, 1000 이하인 배열입니다. ✌️ seoul의 원소는 길이 1 이상, 20 이하인 문자열입니다. 🤘 "Kim"은 반드시 seoul 안에 포함되어 있습니다. 💩 문제 풀이 function solution(seoul) { var answer = '김서방은 '+seoul.indexOf("Kim")+'에 .. 2022. 10. 31.

프로그래머스 1단계 : 자릿수 더하기 프로그래머스 1단계 : 자릿수 더하기 코딩테스트 연습 > 연습문제 > 자릿수 더하기 💩 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를 들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 💩 제한 조건 ☝️ N의 범위 : 100,000,000 이하의 자연수 💩 문제 풀이 function solution(n){ let answer = ''; answer += n let sum = 0; for (i=0; i acc + parseInt(curr), 0) } 문제를 다 풀고 나서, 이렇게 간단한 소스를 마주하니 약간 자괴감이 들었습니다. 여기에서 (n+"")는 숫자 n을 문자열로 변환하는 과정입니다. Stri.. 2022. 10. 30.

프로그래머스 1단계 : 평균 구하기 프로그래머스 1단계 : 평균 구하기 코딩테스트 연습 > 연습문제 > 평균 구하기 💩 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 💩 제한 조건 ☝️ arr은 길이 1 이상, 100 이하인 배열입니다. ✌️ arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 💩 문제 풀이 function solution(arr) { let answer = 0; for(i = 0; i a + b) / array.length; } reduce() 메서드는 배열의 모든 요소들에 대해서 각각 연산을 수행하여 하나의 결과 값을 계산합니다. for문을 쓰지 않고도 손쉽게 요소들의 총합을 구할 수 있었네요. 메서드만 나오면 머리가 굳는 나... 눈감아. 문.. 2022. 10. 29.

프로그래머스 1단계 : 약수의 합 프로그래머스 1단계 : 약수의 합 코딩테스트 연습 > 연습문제 > 약수의 합 💩 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 💩 제한 조건 ☝️ n은 0 이상 3000이하인 정수입니다. 💩 문제 풀이 function solution(n) { var answer = 0; for(i = 1; i 2022. 10. 29.

프로그래머스 1단계 : 짝수와 홀수 프로그래머스 1단계 : 짝수와 홀수 코딩테스트 연습 > 연습문제 > 짝수와 홀수 💩 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 💩 제한 조건 ☝️ num은 int 범위의 정수입니다. ✌️ 0은 짝수입니다. 💩 문제 풀이 function solution(num) { (num % 2 == 0) ? answer = "Even" : answer = "Odd"; return answer; } 삼항연산자를 사용하여 나눴을 때의 나머지가 0인지, 아닌지에 따라 answer 변수가 "Even", "Odd"의 값을 가지도록 작업해 주었습니다. 💩 다른 풀이 function evenOrOdd(num) { return num % 2 .. 2022. 10. 29.

자바스크립트 : 게임 효과 : 메모리 게임 자바스크립트 : 게임 효과 : 메모리 게임 이번에는 같은 그림 찾기 메모리 게임을 만들어 보도록 하겠습니다. 0. HTML HTML 소스는 아래를 참고해 주세요. HTML 소스 보기 Memory Game START Memory Game 점수 : 0 / 16 남은 기회 : 3 다시하기 1. 선택자 작업하기 const memoryWrap = document.querySelector(".memory__wrap"); const memoryCard = memoryWrap.querySelectorAll(".cards li"); let cardOne, cardTwo; // 뒤집는 카드 let disableDeck = false; let matchedCard = 0; // 점수 let endCardGame = 3; /.. 2022. 10. 29.

자바스크립트 : 검색 효과 : 검색 게임 자바스크립트 : 검색 효과 : 검색 게임 지금까지 다양한 메서드를 활용하여 검색 효과를 작업해 보았습니다. 이번에는 CSS 속성을 직접 타이핑하여 제한 시간 안에 맞히는 검색 게임을 만들어 보도록 하겠습니다. 1. 선택자 작업하기 const searchTime = document.querySelector(".time span"); const searchList = document.querySelector(".search__list"); const searchAnswers = document.querySelector(".search__answers"); const searchMissAnswers = document.querySelector(".search__missAnswers"); const search.. 2022. 10. 24.

자바스크립트 : 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트 슬라이드 효과 : 버튼, 닷메뉴 자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다. 이번 유형은 이전 버튼, 다음 버튼을 클릭하면 이전 이미지, 다음 이미지로 슬라이드하는 유형입니다. 1. 선택자 및 변수 만들기 const sliderWrap = document.querySelector(".slider__wrap"); const sliderImg = document.querySelector(".slider__img"); // 보여지는 영역 const sliderInner = document.querySelector(".slider__inner"); // 움직이는 영역 const slider = document.querySelectorAll(".sli.. 2022. 10. 18.

자바스크립트 : 게임 효과 : 뮤직 플레이어 자바스크립트 : 게임 효과 : 뮤직 플레이어 이번에는 게임 효과입니다. 첫번째 유형으로는 뮤직 플레이어를 작업할 예정입니다. 1. 사전 작업 1-1. 마우스 커서 만들기 const cursor = document.querySelector(".mouse__cursor"); window.addEventListener("mousemove", (e) => { cursor.style.left = e.clientX + "px"; cursor.style.top = e.clientY + "px"; }); 귀여운 이미지로 마우스 커서를 바꾸어 줍니다. 이 정도는 껌이죠. 1-2. 시간 출력하기 function printTime() { const clock = document.querySelector(".time"); c.. 2022. 10. 18.

자바스크립트 : 검색 효과 : sort(), reverse() 자바스크립트 : 검색 효과 : sort(), reverse() 자바스크립트의 다양한 효과들 중, 검색 효과입니다. 이번에는 sort(), reverse() 메서드를 사용하여, 오름차순, 내림차순, 알파벳순 등 속성들이 다양한 방법으로 정렬되도록 작업해 보겠습니다. 1. 속성 작성하기 const cssProperty = [ { num: 1, name: "accent-color", desc: " 요소의 강조 색상을 지정합니다. " }, { num: 2, name: "align-content", desc: " 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스'의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정합니다." }, { num: 3, name: "align-items", desc: " 교차축.. 2022. 10. 18.

자바스크립트 패럴랙스 효과 : 리빌 효과 자바스크립트 : 패럴랙스 효과 : 리빌 효과 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 해당하는 섹션의 사진과 텍스트가 드러나도록 작업해 보도록 하겠습니다. 1. HTML 01 section1 결과도 중요하지만, 과정을 더 중요하게 생각한다. 이번에 작업할 리빌 효과는 굉장히 복잡하며, HTML, CSS, JAVASCRIPT 세 가지 소스 모두가 절묘한 하모니를 이루고 있습니다. 그러므로 친절하게 HTML 소스를 삽입하니, 이것을 먼저 살펴보도록 합시다. 섹션은 같은 구조로 총 9가지를 만들어 주었습니다. 각각의 섹션은 번호, 이미지, 텍스트로 이루어집니다. 움직임 효과는 reveal 클래스에 작업해 주었습니다. 위와 같이 reveal(기본), reveal-TW.. 2022. 10. 9.

자바스크립트 검색 효과 : filter() 자바스크립트 : 검색 효과 : filter() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 filter() 메서드를 사용하여, 별점을 클릭하면 그 개수에 해당하는 속성들이 나타나도록 작업해 보겠습니다. 1. 속성 작성하기 const cssProperty = [ { star: 0, name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." }, { star: 1, name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." }, { star: 2, name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." }, { star: 3,.. 2022. 9. 29.

자바스크립트 패럴랙스 효과 : 텍스트 효과 자바스크립트 : 패럴랙스 효과 : 텍스트 효과 자바스크립트의 다양한 효과들 중, 패럴랙스 효과입니다. 이번에는 스크롤을 내릴 때마다 해당하는 섹션의 텍스트가 한 글자씩 나타나도록 작업해 보겠습니다. 1. 글씨 쪼개기 document.querySelectorAll(".split").forEach((text) => { let splitText = text.innerText; let splitWrap = splitText.split("").join(""); splitWrap = "" + splitWrap + ""; text.innerHTML = splitWrap; // p 태그(split)에 label 속성 추가 text.setAttribute("aria-label", splitText); }); 글자가 하나.. 2022. 9. 29.

자바스크립트 마우스 효과 : 텍스트 효과 자바스크립트 : 마우스 효과 : 텍스트 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 기울어진 형태의 텍스트를 만들고, 마우스를 움직일 때마다 텍스트가 움직이도록 텍스트 효과를 작업해 보도록 하겠습니다. 1. HTML 소스 1-1) 텍스트 상자 만들기 Pain Fast Pain Fast is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. 오늘은 HTML의 구조도 중요하기 때문에 함께 살펴보겠습니다. 텍스트 상자는 하나처럼 보이지만, 사실은 다른 각도로 기울어진 두 개의 상자가 있고, 두 상자가 만나는 지점 이후로는 overflow: hidden 속성을 사용하여 숨겨준 것입니다. 총 네 줄의 텍스트를 작성할 것이기 때문에 lin.. 2022. 9. 29.

자바스크립트 검색 효과 : find() 자바스크립트 : 검색 효과 : find() 자바스크립트의 다양한 효과들 중, 해당하는 문자열을 찾을 수 있는 검색 효과입니다. 이번에는 find() 메서드를 사용하여 속성을 검색하고, 검색하면 해당하는 설명이 나타나도록 작업해 보겠습니다. 1. 속성 출력하기 const cssProperty = [ { name: "accent-color", desc: "특정 요소에 색상을 지정할 때 사용됩니다." }, { name: "align-content", desc: "콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다." }, { name: "align-items", desc: "콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다." }, { name: "align-self", desc: "개별적인 콘텐츠 아이템의 .. 2022. 9. 28.

자바스크립트 마우스 효과 : 기울기 효과 / 반전 효과 자바스크립트 : 마우스 효과 : 기울기 효과 / 반전 효과 자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 마우스를 오버하면 이미지가 기울어지고, 색상이 반전되는 효과가 나타나도록 작업해 주었습니다. 이펙트에 영향을 주는 주요 CSS 소스부터 먼저 살펴보도록 하겠습니다. 1. CSS 소스 1-1) 이미지 .mouse__img { transform: perspective(600px) rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; will-change: transform; transition: all 0.3s; } 마우스를 오버했을 때, 움직일 이미지에 transform 속성을 부여해 줍니다. perspective 속성은 .. 2022. 9. 28.

CSS 애니메이션 만들기 : 마우스를 따라가는 눈알 CSS 애니메이션 : 마우스를 따라가는 눈알 오늘은 마우스를 따라 눈알이 빙글빙글 돌아가는 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen eye by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 EYE wrapper 안에 card, card 안에 me와 text, me 안에 eye 클래스를 가진 div 박스를 만들어 줍니다. text는 자유롭게 작성합니다. 2. CSS 소스 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } .wrapper { position: absolute; left: 50%.. 2022. 9. 26.

CSS 애니메이션 만들기 : 로딩 애니메이션 CSS 애니메이션 : 로딩 애니메이션 오늘은 로딩 화면처럼 빙글빙글 돌아가는 애니메이션을 만들어 보도록 하겠습니다. 작업해볼 애니메이션은 다음과 같습니다. See the Pen animation 몇번째지... by mj0614k (@mj0614k) on CodePen. 1. HTML 소스 div 안에 10개의 div 박스를 만들어 줍니다. 2. CSS 소스 body { background-color: pink; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; animation: spin 0.6s linear infinite reverse; } .b.. 2022. 9. 24.

이전 1 2 3 4 5 6 다음

728x90

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바