본문 바로가기

척척학사의 코딩 공부174

게임 효과 - 테트리스 게임 게임 이펙트 - 테트리스 게임 지금까지 배운 css, javascript 지식을 총 출동하여 간단한 게임을 만들어 봅니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 작성한 자바스크립트 코드입니다. 오류도 있고 아직 미흡한 부분이 많지만 귀엽게 봐주세요^0^ const tetrisWrap = document.querySelector(".tetris__wrap"); const playground = tetrisWrap.querySelector(".playground > ul"); const tetrisStart = tetrisWrap.querySelector(".tetris__start"); const startBtn = tetrisWrap.querySelector(".start__btn"); con.. 2022. 11. 9.
프로그래머스 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을, 작업을 500번 반복할 때까지 1이 되지 않는다면.. 2022. 11. 9.
프로그래머스 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의 대소관계는 정해져있지 않습니다. 🍞 입출력 예 a b return 3 5 12 3 3 3 5 3 12 🍞 문제 풀이 a와 b의 값을 비교하여 작으면 answer에 다음 값을 더하고 크면 이전 값을 더하는 식으로 구하였습니다. function solution(a, b) { let answ.. 2022. 11. 8.
프로그래머스 1단계 - 정수 내림차순으로 배치하기 프로그래머스 1단계 - 정수 내림차순으로 배치하기 🍞 문제 설명 함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다. 🍞 제한 조건 n은 1이상 8000000000 이하인 자연수입니다. 🍞 입출력 예 n return 118372 873211 🍞 문제 풀이 알고 있는 메서드를 남발해보았습니다. function solution(n) { var answer = parseInt(n.toString().split('').sort().reverse().reduce((p,c) => p + c)); return answer; } 🍞 다른 이의 풀이 아주 깔끔하게 보이는 풀이입니다.. 2022. 11. 7.
프로그래머스 1단계 - 나머지가 1이 되는 수 찾기 프로그래머스 1단계 - 나머지가 1이 되는 수 찾기 🍞 문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 🍞 제한 조건 3 ≤ n ≤ 1,000,000 🍞 입출력 예 n result 10 3 12 11 입출력 예 #1 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다. 입출력 예 #2 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다. 🍞 문제 풀이 반복문과 % 연산자를 사용하.. 2022. 11. 6.
프로그래머스 1단계 - x만큼 간격이 있는 n개의 숫자 프로그래머스 1단계 - 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] 🍞 문제 풀이 반복문과 push()를 사용하였습니다. function solution(x, n) { var answer = []; for(i=0; i (i + 1) * v) } 문제 풀어보기 2022. 11. 5.
프로그래머스 1단계 - 문자열을 정수로 바꾸기 프로그래머스 1단계 - 문자열을 정수로 바꾸기 🍞 문제 설명 문자열 s를 숫자로 변환한 결과를 반환하는 함수, solution을 완성하세요. 🍞 제한 조건 s의 길이는 1 이상 5이하입니다. s의 맨앞에는 부호(+, -)가 올 수 있습니다. s는 부호와 숫자로만 이루어져있습니다. s는 "0"으로 시작하지 않습니다. 🍞 입출력 예 예를들어 str이 "1234"이면 1234를 반환하고, "-1234"이면 -1234를 반환하면 됩니다. str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없습니다. 🍞 문제 풀이 정말 이게 끝인가? 싶어서 당황스러운 쉬운 문제입니다. function solution(s) { return answer = parseInt(s); } 🍞 다른 이의 풀이 s.. 2022. 11. 5.
프로그래머스 1단계 - 하샤드 수 프로그래머스 1단계 - 하샤드 수 🍞 문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요. 🍞 제한 조건 x는 1 이상, 10000 이하인 정수입니다. 🍞 입출력 예 arr return 10 true 12 true 11 false 13 false 입출력 예 #1 10의 모든 자릿수의 합은 1입니다. 10은 1로 나누어 떨어지므로 10은 하샤드 수입니다. 입출력 예 #2 12의 모든 자릿수의 합은 3입니다. 12는 3으로 나누어 떨어지므로 12는 하샤드 수입니다. 입출력 예 .. 2022. 11. 3.
프로그래머스 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는 알파벳으로만 이루어져 있습니다. 🍞 입출력 예 s answer "pPoooyY" true "Pyy" false 입출력 예 #1 'p'의 개수 2개, 'y'의 .. 2022. 11. 2.
프로그래머스 1단계 - 자연수 뒤집어 배열로 만들기 프로그래머스 1단계 - 자연수 뒤집어 배열로 만들기 🍞 문제 설명 자연수 n을 뒤집어 각 자리 숫자를 원소로 가지는 배열 형태로 리턴해주세요. 예를들어 n이 12345이면 [5,4,3,2,1]을 리턴합니다. 🍞 제한 조건 n은 10,000,000,000이하인 자연수입니다. 🍞 입출력 예 n return 12345 [5,4,3,2,1] 🍞 문제 풀이 4번과 비슷하게… 문자로 바꾼 뒤 split로 쪼개 배열에 거꾸로 저장하고, 다시 숫자로 바꾸어 answer에 넣어주었습니다. function solution(n) { var answer = []; num = n.toString().split('').reverse(); for( x in num ){ answer.push(Number(num[x])); } con.. 2022. 11. 1.
프로그래머스 1단계 - 정수 제곱근 판별 프로그래머스 1단계 - 정수 제곱근 판별 🍞 문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 🍞 제한 조건 n은 1이상, 50000000000000 이하인 양의 정수입니다. 🍞 입출력 예 n return 121 144 3 -1 입출력 예 #1 121은 양의 정수 11의 제곱이므로, (11+1)를 제곱한 144를 리턴합니다. 입출력 예 #2 3은 양의 정수의 제곱이 아니므로, -1을 리턴합니다. 🍞 문제 풀이 Math.sqrt()로 제곱근을 구하고 isInteger로 정수 여부를 판단하여 answer에 적절한 값을 넣었습니.. 2022. 10. 31.
프로그래머스 1단계 - 자릿수 더하기 프로그래머스 1단계 - 자릿수 더하기 🍞 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 🍞 제한 조건 N의 범위 : 100,000,000 이하의 자연수 🍞 입출력 예 N return 123 6 987 24 입출력 예 #1 문제의 예시와 같습니다. 입출력 예 #2 9 + 8 + 7 = 24이므로 24를 return 하면 됩니다. 🍞 문제 풀이 문자로 바꾼 뒤 split하고 다시 숫자로 바꾸어 더해주었습니다. 숫자도 split 할 수 있었으면 좋겠습니다… function solution(n) { let answer = 0; let num = n.toStr.. 2022. 10. 30.
프로그래머스 1단계 - 평균 구하기 프로그래머스 1단계 - 평균 구하기 🍞 문제 설명 정수를 담고 있는 배열 arr의 평균값을 return하는 함수, solution을 완성해보세요. 🍞 제한 조건 arr은 길이 1 이상, 100 이하인 배열입니다. arr의 원소는 -10,000 이상 10,000 이하인 정수입니다. 🍞 입출력 예 arr return [1,2,3,4] 2.5 [5,5] 5 🍞 문제 풀이 reduce() 메서드를 이용해 배열 값의 합을 구하고 배열의 길이로 나누어 평균을 구했습니다. function solution(arr) { var answer = 0; answer = arr.reduce((p,c) => p+c) / arr.length; return answer; } 🍞 다른 이의 풀이 메서드 없이 반복문을 통해 값을 구할 .. 2022. 10. 29.
프로그래머스 1단계 - 약수의 합 프로그래머스 1단계 - 약수의 합 🍞 문제 설명 정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요. 🍞 제한 조건 n은 0 이상 3000이하인 정수입니다.. 🍞 입출력 예 num return 12 28 5 6 입출력 예 #1 12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다. 입출력 예 #2 5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다. 🍞 문제 풀이 for 문을 사용하여 반복하며 i의 값을 증가시키고, n의 약수인 경우 answer에 합해지도록 하였습니다.(16번 케이스 유의!) function solution(n) { var answer = 0; for( i=0; i 2022. 10. 28.
게임 효과 - 카드 짝 맞추기 게임 이펙트 - 카드 맞추기 게임 지금까지 배운 css, javascript 지식을 총 출동하여 간단한 게임을 만들어 봅니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 작성한 자바스크립트 코드입니다. 오류도 있고 아직 미흡한 부분이 많지만 귀엽게 봐주세요^0^ // 01 HTML/CSS 디자인 구성 // 02 클릭한카드 뒤집기 // 03 두개의 카드 뒤집고 확인하기(첫번째카드, 두번째카드) // 선택자 만들기 const memoryWrap = document.querySelector(".memory__wrap"); //메모리 게임 가장 큰 부모박스 const memoryCard = document.querySelector(".memory__card"); // 각각의 카드가 담긴 부모박스 const.. 2022. 10. 28.
프로그래머스 1단계 - 짝수와 홀수 프로그래머스 1단계 - 짝수와 홀수 🍞 문제 설명 정수 num이 짝수일 경우 "Even"을 반환하고 홀수인 경우 "Odd"를 반환하는 함수, solution을 완성해주세요. 🍞 제한 조건 num은 int 범위의 정수입니다. 0은 짝수입니다. 🍞 입출력 예 num return 3 "Odd" 4 "Even" 🍞 문제 풀이 if 문을 사용하여 num을 2로 나눈 나머지 값을 총해 짝수와 홀수를 구분하였습니다. function solution(num) { var answer = ''; if(num%2 === 0){ answer = "Even"; } else { answer = "Odd"; } return answer; } 🍞 다른 이의 풀이 제 풀이와 비슷하지만, if문이 아닌 삼항연산자를 사용한 풀이입니다. .. 2022. 10. 27.
슬라이드 이펙트 7 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한, 플레이 버튼, 정지 버튼, 자동 플레이) 이번 슬라이드 효과는 이전의 유형에 자동 플레이 기능을 추가하였으며,자동 플레이를 정지하거나 플레이 할 수 있는 버튼을 추가하고, 마우스 커서가 올라가면 자동 플레이가 멈추고, 커서가 빠져나가면 자동 플레이가 시작되는 기능을 추가하였습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길.. 2022. 10. 20.
슬라이드 이펙트 6 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴, 무한) 이번 슬라이드 효과는 버튼을 누르면 이전이미지, 다음 이미지로 넘어가도록 스크립트를 작성하였습니다. 또한 이전 유형처럼 닷메뉴를 추가했으며, 이미지가 무한으로 넘어가는 기능도 추가하였습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__img 클래스의 형제 요소로 slider__btn .. 2022. 10. 20.
슬라이드 이펙트 5 슬라이드 효과 만들기 이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다. 슬라이드 효과 : 이미지 슬라이드(버튼, 닷메뉴) 이번 슬라이드 효과는 버튼을 통해 이미지 슬라이드를 넘길 수 있으며, 아래쪽에 슬라이드 갯수 만큼의 닷메뉴를 만들어 현재 활성화된 슬라이드의 순서에 맞게 표시되도록 하였습니다. 또한, 닷메뉴를 클릭하면 해당 슬라이드로 이동하는 기능도 있습니다. HTML 코드 슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__inner와 또 한번 감싼 slider__img를 또 감싼 slider__wrap을 만들었습니다. 여기까지는 이전 유형과 같지만, 이번에는 슬라이드를 넘길 버튼이 필요하기 때문에, slider__im.. 2022. 10. 20.
검색 효과 7 검색 이펙트 이번 검색 이펙트는 2분 동안 CSS 속성 검색하기 게임 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. input에 입력된 값을 value로 불러오고, 불러온 입력값을 cssPropertythr css의 이름과 비교합니다. 정답이 있는 경우 input에 입력된 값을 초기화하고 맞춘 정답을 리스트에 추가합니다. 시간이 끝나면 맞추지 못한 속성들을 오답 리스트에 추가하여 보여줍니다. const searchTime = document.querySelec.. 2022. 10. 20.
검색 효과 6 검색 이펙트 이번 검색 이펙트는 sort(), reverse()를 이용하여 정렬하기 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이번에는 추가적으로 num이라는 키값에 1~382의 숫자를 저장하여 순서를 정해주었습니다. 정렬 버튼을 누를 때마다 리스트에 sort(), reverse()를 이용해 각 버튼의 내용처럼 정렬되어 출력하도록 하였습니다. 랜덤정렬은 피셔에이츠 알고리즘을 이용하였습니다. const cssList = document.querySelecto.. 2022. 10. 20.
패럴랙스 이펙트07 패럴랙스 이펙트 7 이번 패럴랙스 효과는 스크롤을 내리면 가림막이 먼저 나타났다가 사라지며 글씨와 이미지가 나타나는 효과입니다. 이런 효과를 리빌효과라고 합니다. HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. 이전 유형과 구조는 완전히 같습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 가림막 애니메이션 효과를 주기 위해, 다양한 css애니메이션을 적용하였습니다. CSS 보기 /* option */ .reveal > div, .reveal > span { opacity: 0; } .reveal.show >.. 2022. 10. 20.
게임 효과 - 음악 플레이어 게임 이펙트 - 음악 플레이어 지금까지 배운 css, javascript 지식을 총 출동하여 간단한 게임을 만들어 봅니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 1. 먼저, 오디오에 대한 정보를 배열 속 객체 형식으로 저장합니다. 2. 그리고 오디오, 클릭 이벤트를 발생시킬 버튼, html요소를 작성할 부분 등을 선택하는 선택자를 작성합니다. 3. 오디오에 대한 정보를 반복문과 변수를 통해 작성합니다. 4. 오디오의 재생, 반복 등에 대한 스크립트를 작성합니다. const allMusic = [ { name: "Robots and Aliens", artist: "Joel Cummins", img: "music_img10", audio: "music_audio10" }, { name: "Glas.. 2022. 10. 20.
패럴랙스 이펙트06 패럴랙스 이펙트 6 이번 패럴랙스 효과는 스크롤을 내리면 글씨가 하나씩 쭈루룩 나타나는 효과입니다. 한번 알아볼까요? HTML 코드 이번 패럴랙스는 메뉴 없이 컨텐츠로만 구성하였으며, scrollTop 정보를 볼 수 있는 info를 추가해주었습니다. HTML 보기 01 section1 질병은 입을 쫓아 들어가고 화근은 입을 좇아 나온다. . . . scrollTop : 0px CSS 코드 이번 패럴랙스는 이전 유형과 css가 거의 동일합니다. 달라진 부분의 css를 보면, 하나씩 쪼개 저장한 span에 속성을 적용한 것을 알 수 있습니다. span에 show 클래스가 붙으면 나타나게 됩니다. CSS 보기 /* option */ .split span { display: inline-block; opacit.. 2022. 9. 29.
마우스 이펙트 6 마우스 효과 만들기 6 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 텍스트 효과 텍스트가 움직이며 왼쪽에서는 오렌지색, 오른쪽에서는 흰색으로 나타납니다. HTML 코드 이미지와 텍스트를 .mouse__img와 .mouse__text로 구분하고 왼쪽 글씨는 .left에, 오른쪽 글씨는 .right에 작성하였습니다. Pain Past Pain Past is pleasure is pleasure 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다. CSS 코드 mouse__cursor는 기존의 마우스 커서를 따라다녀야 하기 때문에, position: absolute;를 사용하여 위치를 .. 2022. 9. 29.
검색 효과 5 검색 이펙트 이번 검색 이펙트는 filter()를 이용하여 CSS 속성의 중요도를 보여주는 효과입니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 이전과 같이 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, updateList() 함수를 통해 해당 부분에 텍스트를 출력합니다. 클릭 이벤트는 forEach()문을 이용하여 각 버튼을 누를 때마다 작동하도록 하였으며, 매개변수를 함수로 보냅니다. const searchList = document.querySelector(".s.. 2022. 9. 29.
마우스 이펙트 5 마우스 효과 만들기 5 스크립트를 이용하여 마우스 커서를 따라다니는 효과나, 요소에 마우스가 올라갔을 때 마우스를 따라다니는 요소의 색이 변하거나 모양이 변하게 할 수 있습니다. 마우스 이펙트 : 기울기 효과 글씨 반전 효과 마우스를 올리면 이미지가 기울며 움직입니다. 그리고 마우스를 올리면 글씨나 색상이 반전되어 나타나는 효과입니다. HTML 코드 이번에는 기본 마우스 커서를 대신할 요소로 .mouse__cursor 를 만들어 줍니다. 또한, 마우스 커서의 위치나 정보를 알기 위해, .mouse__info 부분을 만들어주었습니다. Life is either a daring adventure or nothing at all. 생활은 과감한 모험이거나 아니면 아무것도 아니다. mousePageX : 0 p.. 2022. 9. 28.
검색 효과 4 검색 이펙트 페이지에 리스트를 만들고, 각각의 속성 명을 나타내는 리스트를 클릭하면, 해당 속성의 설명이 표시됩니다. > 사이트 미리보기 원본 소스 보기 자바스크립트 해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저, 속성에 대한 정보는 cssProperty라는 배열 안에 객체로 만들어 저장하였습니다. name은 속성 이름의 키값, desc는 속성 설명의 키값입니다. 이후 선택자를 통해 각 영역을 가리키는 변수를 만든 후, map() 과 innerHTML을 이용하여 설명을 출력합니다. 클릭 이벤트또는 검색어를 작성한 이벤트가 발생하면 findProperty라는 함수를 실행하며, findProperty 함수는 cssProperty에서 사용자가 클릭한 값을 찾아 비교한 뒤, 출력해야 할 설.. 2022. 9. 28.
배열 메서드2 배열 메서드 배열 메서드를 이용하여 배열의 정보를 다양한 방법으로 불러올 수 있습니다. > unshift() / shift() 메서드 unshift() 메서드는 배열 처음 요소에 추가, shift()메서드는 배열 처음 요소를 삭제합니다. const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_N1").innerHTML = "1"; document.querySelector(".sample04_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample04_M1").inn.. 2022. 9. 27.
문자열 메서드 : startsWidth() / endsWidth() 문자열 메서드 : startsWidth() / endsWidth() > startsWidth() / endsWidth() 메서드 startWidth() 메서드는 시작하는 분자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. endsWidth() 메서드는 끝나는 문자열에서 문자열을 검색하여 불린(true, false)으로 반환합니다. "문자열".startsWidth(검색 문자열); "문자열".startsWidth(검색 문자열, 위치값); "문자열".endsWidth(검색 문자열); "문자열".endsWidth(검색 문자열, 시작 위치값); const str1 = "javascript reference"; const currentStr1 = str1.startsWith("javascrip.. 2022. 9. 27.
728x90

HTML이 적힌 썸네일 이미지
CSS가 적힌 썸네일 이미지
JAVASCRIPT가 적힌 썸네일 이미지

JAVASCRIPT

자세히 보기