takeU

Dev Tools Domination 기본 코드 ×BREAK×DOWN× 목표 콘솔창에 각종 연산 및 효과를 넣는 방법들을 익힘 과정 Regular, Interpolated, Styled Warining, Error, Info Testing, clearing, Viewing DOM Elements Grouping together, counting, timing 코드 분석 1. Regular, Interpolated, Styled // Regular console.log('hello'); 기본 콘솔 출력 // Interpolated console.log('Hello I am a %s string!', '💩'); %s 자리에 ,뒤의 값이 들어감 // Styled console.log('%c I am some ..

Fun with HTML5 Canvas 기본 코드 목표 제목 그대로 HTML에 캔버스를 만들어 각종 효과를 넣어보는 연습 과정 그리기 효과를 사용하기 위한 기본 설정 그리기 효과를 실시간으로 변경하기 위한 변수 설정 그리기 효과를 실시간으로 변경하기 위한 함수 작성 그리기 효과를 실시간으로 바꾸는 함수 실행 코드 분석 1. 그리기 효과를 사용하기 위한 기본 설정 const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx.strokeStyle = '#BADA55'; ctx.lineJo..

Array Cardio Day 2 기본 코드 Psst: have a look at the JavaScript Console 💁 목표 Array Cardio Day1에 이어 각종 자바스크립트 메소드를 익혀봄 과정 some() every() find() findIndex(), slice() 코드 분석 1. some() // Array.prototype.some() // is at least one person 19 or older? const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); console.log({ isAdult }); 기본 코드에서 선언한 people에 19살 이상이 한명 이상 있는지 알아보..

Type Ahead 웹에서 정보를 받아와 Live Search 기능을 구현 기본 코드 Filter for a city or a state 목표 이번엔 스타일시트가 따로 빠져있는데 자바스크립트를 공부하는 목적이므로 따로 첨부는 하지 않음. 검색창을 만들어서 도시나 주의 이름의 일부를 검색하면 도시, 주, 인구수를 실시간으로 보여주도록 만들 예정 과정 도시와 주의 이름과 인구수를 받아옴 검색시 일치하는 값을 찾아내는 함수를 만듦 위의 함수를 이용해 화면에 보여지게하는 함수를 만듦 인구수를 보기 편하게 콤마를 삽입하는 함수를 만들어줌 만든 함수를 통해 실시간으로 브라우저에 출력 코드 분석 1. 도시와 주의 이름과 인구수를 받아옴 const cities = []; fetch(endpoint) .then(blob..

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/