전체 글 (62) 썸네일형 리스트형 11. Custom Video Player 코드 분석 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything inbetween should also be set to checked Try do it with out any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 목표동영상의 재생, 시간이동 기능을 추가한다.분석사용할 변수들에 대해서 먼저 정리해 놓는다.const player = document.querySelector('.player'); const video = player.querySelector('.viewer'); const .. 10. Hold Shift and Checkboxes 코드 분석 This is an inbox layout. Check one item Hold down your Shift key Check a lower item Everything inbetween should also be set to checked Try do it with out any libraries Just regular JavaScript Good Luck! Don't forget to tweet your result! 목표박스 체크를 할 수 있는 삼중 조건문을 알아보자.분석const checkboxes = document.querySelectorAll('.inbox input[type="checkbox"]'); let lastChecked; function handleCheck(e) { l.. 9. Dev Tools Domination 코드 분석 ×BREAK×DOWN× 목표콘솔 창에서 확인할 수 있는 여러가지에 대해 알아보자분석 console.log('hello'); console.log('Hello I am a %s string!', '💩'); console.log('%c I am some great text', 'font-size:50px; background:red; text-shadow: 10px 10px 0 blue') console.warn('OH NOOO'); console.error('Shit!'); console.info('Crocodiles eat 3-4 people per year'); 여러가지 내용 중 내가 모르던 것만 골라서 보겠다.%s는 그 자리에 ,뒤의 부분에 적은 내용을 넣는 것이다. %c는 ,앞에 있는 내.. 8. Fun with HTML5 Canvas 코드 분석 목표클릭 후 드래그할 때 색이 변하고 두께가 커졌다 작아졌다를 반복하는 선을 만들어보자.분석이번에는 개요를 나누다가는 조금 더 번잡해질 수 있기 때문에 강의에 나온 순서대로 풀어가면서 해보겠다.const canvas = document.querySelector('#draw'); const ctx = canvas.getContext('2d'); 가장 먼저 해야하는 일은 이 두가지이다. 우리의 목표가 화면 내에서 클릭을 통해 선을 그려내는 것이기 때문에 그에 대한 기본적인 틀을 만들어 주어야 한다. 위의 코드처럼 적어주면, 이것은 2D코드를 사용하여 캔버스의 컨텍스트를 가져오고 이렇게 되면 캔버스에 대한 2D 렌더링 컨텍스트가 생겨서 그 안에 그릴 수가 있게 되는 것이다. (자세한 내용은 여기를 .. 7. Array Cardio Day 2 근황어제 6일차 내용을 거의 다 정리 해놓았는데 갑자기 노트북이 멈췄다. 그래서 부팅해봤는데 ssd가 망가져서 os부터 다시 설치했다. 후 다음주에 ssd를 장착할 때 까지는 조금 느리게 올릴것 같다. 그래서 먼저 7일차 올리고 6일차는 차차 올리도록 하겠다.코드 분석 Psst: have a look at the JavaScript Console 💁 목표.some과 .every , 그리고 배열에서 원하는 내용을 가진 자료를 찾아내는 함수를 알아보자.분석 개요.some을 사용해보자.every를 사용해보자원하는 것을 배열에서 찾아내보자분석const isAdult = people.some(person => ((new Date()).getFullYear()) - person.year >= 19); 먼저, .so.. 5. Flex Panel Gallery 5일차의 공부 내용을 정리해보도록 하겠다.먼저 코드부터 살펴보도록 하자.코드 분석 Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion 목표display: flex; 에 대해 알아보고 자바스크립트 효과를 연습분석 개요위의 내용을 7단계로 나누어 보았다.가로로 배열이 되는 항목들을 세로화 시키기세로화 시킨 항목들이 페이지에 알맞게 분배되도록 하기모든 글자들이 3x3으로 나누어지도록 분배하기이후 가로,세로 가운데 정렬맨 윗줄과 맨 아랫줄 각자 방향으로 밀어넣기해당 칸을 클릭할 때 확대가 되어 나타나게 하기칸이 확대 될 때 밀어넣었던 윗줄과 아랫줄 불러오기분석1.아무런 효과를 적용시키지 않고 단순하게 나눈 di.. 이전 1 ··· 5 6 7 8 다음
