takeU

3. CSS Variables CSS 변수 활용 기본코드 Update CSS Variables with JS Spacing: Blur: Base Color 목표 사진에서 두가지의 레인지 조절 기능과 colorpicker 넣기 과정 1. CSS 변수를 만든다(base색상, 기본 여백(spacing), 기본 흐림정도(`blur)) :root { --base: #ffc600; --spacing: 10px; --blur: 10px } :root - HTML 요소중 가장 상위 요소에 적용한다는 뜻 --base - base라는 CSS 변수를 생성 위와같이 :root에 변수를 선언하는 것은 전역변수를 생성한다는 뜻 2. CSS변수를 통한 이미지, 텍스트 효과 지정 img { padding: var(--spacing)..

CSS + JS Clock 자바스크립트 + CSS로 아날로그 시계를 구현할 수 있어서 신기했다 자바스크립트공부를 하려고 시작했는데 CSS도 많이 알게 되는것 같음. 기본 코드 목표 현재 시간을 아날로그 시계로 구현 과정 1. 시계바늘 중심위치 잡기, 효과 적용 .hand { transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } transform - 변형 효과를 줄 때 기준 설정 hand 클래스에 위의 코드를 추가해 기준축을 100% 즉 가장 오른쪽으로 잡고, 방향을 90도만큼 돌려서 시침, 분침, 초침이 12시 방향에..

JavaScript Drum Kit 아래 첨부한 사진처럼 해당하는 키보드를 누르면 화면에 효과와 함께 소리가 나는 드럼 킷을 만드는 것 기본 코드 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 여기서 div 속성중 data-key 는 어떤 키를 눌러서 실행 시킬수 있는지 설정하는 것이며 http://keycode.info/ 에서 각 키의 키코드를 알 수 있다. 태그는 키보드 입력을 지정할 때 쓰는 코드이다. data-key 속성은 위의 div와 아래 audio를 하나로 묶어주는 속성이라 할 수 있다. 목표 키보드 키 입력시 애니메이션효과와 소리를 출력해 드럼 킷을 만드는 것 과정 1. 해당 키 입력시 효과음 추가하는 함수 생성 co..

JavaScipt30 챌린지 하루에 한 가지 자바스크립트 프로젝트를 하면서 30일간 30개의 프로젝트를 순수 자바스크립트로만 구현해보는 연습 사이트 https://javascript30.com/

JavaScript 정리 짧고 간단하게 나열하는 식으로 작성 JavaScript의 위치 태그 사이에 작성하며, 와 둘다 위치 가능 JavaScript Output Window.alert() 경고창 documnet.write() HTML출력 (테스트용) HTML로드 후 작성시 기존 문서 삭제 innerHTML HTML출력 요소로 작성 console.log() 브라우저 콘솔에 작성 JavaScript 문법(Syntax) 세미콜론(;)으로 구문 구별/ 텍스트는 " 또는 ' 안에 작성 변수는 const나 let으로 선언 ex) const x = 2; 주석은 //(한줄) /* */(여러줄) 로 작성 // 주석 /* 여러줄 */ 대소문자 구별하여 사용 첫 번째 문자는 문자, _, $ 세가지만 가능/ 예약어 사용 불..

알고리즘 문제 풀이시 자주 사용되는 테크닉 알고리즘 문제 해결시 자주 사용되는 테크닉들을 정리 ( 매우 주관적 ) 배열이나 문자열에서 중복을 제거할 때 Set 자료형을 활용해 중복을 제거할 수 있다. // 배열 const arr = [1,3,2,4,3,1,5,6,2,1]; const newArr = [...new Set(arr)]; console.log(newArr); // [1,3,2,4,5,6] 중복이 제거된 배열을 얻을 수 있다. // 문자열 const str = "abcdacbe"; const newStr = [...new Set(str)].join(''); console.log(newStr); // "abcde" 중복이 제거된 문자열을 얻을 수 있다. 배열이나 문자열에서 유니크한 원소 뽑아내기 ..

Extended Parameter Handling(함수 파라미터 확장) 먼저 용어에 대해 알아보자 인수, 실행인자(argument) - 함수를 호출하는 입장에서 “넘겨주는 값” 인자, 매개변수(parameter) - “인자를 받은 값” 즉 함수를 선언할 때 인자를 입력해주고 인수로 호출한다! 기본 파라미터 초기값 기존 ES5에서는 함수 내에서 파라미터 체크와 초기화를 했다. //ES5 function plus(x, y) { x = x || 0; y = y || 0; return x + y; } console.log(plus()); //0 위에 보는것과 같이 초기값을 || 뒤에 넣어 함수 내에서 설정을 함 //ES6 const plus = (x = 0, y = 0) => { return x + y; } c..

Template String(템플릿 문자열) 내장된 표현식을 허용하는 문자열 리터럴. 예제로 설명하는 방법이 더 쉬워서 바로 적어보면 다음과 같다. 사용 방법 변수에 템플릿 문자열 삽입 후 사용 let story = `Hello, World! I'm "24"` console.log(story) // Hello, World! I'm "24" 출력 위와 같이 변수 뒤에 내용들을 `(grave accent)로 감싸면 공백, 따옴표 등 작성한 그대로 출력할 수 있음 템플릿 문자열 안에 변수 삽입 가능 const a = "takeU"; const b = 24; ES5에서는 위에서 선언한 상수 a,b를 문자열 안에 출력하려면 아래와 같이 작성했다. console.log("Hello " + a + " I'm " + ..

스프레드 연산자(...) 배열 리터럴의 일부를 반복 가능한 식(다른 배열 리터럴 등)에서 초기화하거나 식을 함수 호출에서 여러 인수로 확장할 때 사용 구문 const array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 매개 변수 iterable 필수.반복 가능한 개체 arg0ToN 선택 사항이며 하나 이상의 배열 리터럴 요소 args 선택 사항이며 함수에 대한 하나 이상의 인수 설명 다음 코드 예제에서는 스프레드 연산자와 concat 메소드를 비교하며 설명 let a, b, c, d, e; a = [1,2,3]; b = "dog"; c = [42, "cat"]; // concat met..