takeU

Flex Panel Gallery flex-box를 이용한 레이아웃 및 효과를 공부 기본 코드 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 목표 CSS 속성인 display: flex를 사용해 레이아웃을 구성해보고 자바스크립트 효과를 익힘 과정 display: flex 적용 각 패널의 크기, 내용의 위치 조정 패널 안의 구성요소 정렬 패널의 효과 적용 자바스크립트 효과 적용 코드 분석 1. display: flex 적용 .panels { display: flex; } 위 코드를 적용 시키면 각 패널의 레이아웃이 다음과 같이 바뀐다 2. 각 패널의 크기, 내용의 위치 조정 .panel { displ..

Array Cardio Day 1 제목처럼 자바스크립트 배열과 배열제어에 대해서 공부 기본코드 Psst: have a look at the JavaScript Console 💁 Psst: have a look at the JavaScript Console 💁 목표 자바스크립트의 배열제어 방법을 코드로 구현해보며 익힘 과정 filter() map() sort() reduce() 코드 분석 1. filter // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's const fifteen = inventors.filter(inventor => (inventor.year >= 1500 &..

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 " + ..