# javascript30

129개의 포스트
post-thumbnail

11. Custom Video Player

<video>를 커스텀해보자원래 <video controls> 와 같이controls attribute를 주면 위와 같이 브라우저 기본 비디오 UI를 제공해준다.이 UI를 입맛대로 커스텀하려면, 하나부터 열까지 다 뜯어고쳐야한다.progress bar를 클릭

2022년 2월 11일
·
0개의 댓글
·
post-thumbnail

10. Hold Shift and Check Checkboxes

Shift키를 누르고 체크를 하면,두 체크박스 사이가 전부 눌려지는 계획표 만들기input\[type='checkbox']

2022년 2월 11일
·
0개의 댓글
·
post-thumbnail

9. Fun with HTML5 Canvas

웹 개발 디버깅을 할때 브라우저의 개발자도구에서 console.log를 찍곤한다console 출력의 여러가지 방법 알아보자

2022년 2월 11일
·
0개의 댓글
·
post-thumbnail

3. CSS Variables

Spacing, Blur, Base Color 각 label이 변화할 때, 사진이 그 알맞게 변화해야 한다.Spacing: 그림의 padding값Blur: 그림이 흐린정도 (filter: blur(3px))Base Color: 그림의 background-color:ro

2022년 1월 7일
·
0개의 댓글
·
post-thumbnail

2. JS and CSS Clock

new Date()현재 시간을 가져온다.new Date().getSecond() 로 현재 초를 가져온다이외에 시,분,요일,년도 등 가져올 수 있다.https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/

2022년 1월 6일
·
0개의 댓글
·
post-thumbnail

Custom Video Player

1. Custom Video Player 동영상의 재생, 볼륨컨트롤, 빨리감기 등의 기능을 수행할 수 있도록 이벤트를 만들어 보자. 2. 전체 코드 index.html script.js 3. 동작 순서 > 비디오 컨트롤과 관련된 동작을 addEventListner로 감지 후, 해당하는 event 함수를 호출한다. video 감지 이벤트 -- c...

2021년 12월 13일
·
0개의 댓글
·
post-thumbnail

Hold Shift to Check Multiple Checkboxes

1. Hold Shift to Check Multiple Checkboxes 첫번째 체크박스를 클릭한다. SHIFT 키 누른 후 두 번째 체크박스 클릭 시, 중간에 포함 된 모든 체크박스들이 체크 된다. 2. 전체 코드 3. 동작 순서 > [1] 처음 클릭 시 checkbox의 addEventListenr를 통해 click 동작 감지 , handl...

2021년 12월 6일
·
0개의 댓글
·
post-thumbnail

[javascript30] 14 Must Know Dev Tools Tricks

1. 14 Must Know Dev Tools Tricks google 개발자 도구에서 사용할 수 있는 여러 유용한 도구 정리 2. 전체 코드 3. 동작 순서 4. HTML, CSS 5. JAVASCRIPT

2021년 12월 6일
·
0개의 댓글
·
post-thumbnail

[javascript30] Fun with HTML5 Canvas

1. Fun with HTML5 Canvas 브라우저 상에 마우스를 움직여 그림을 그린다. 색이 계속해서 변경되며, 선의 굵기 또한 지속적으로 증감한다. 2. 전체 코드 3. 동작 순서 > 마우스 좌클릭 시 eventListner를 통해 이벤트 감지 후, fla

2021년 12월 3일
·
0개의 댓글
·
post-thumbnail

[javascript30] Array Cardio Day 2

1. Array Cardio Day 2 JS 배열 관련 메소드 2탄 2. 전체 코드 3. 동작 순서 4. HTML, CSS 5. JAVASCRIPT array.prototype.some() > - 배열 안의 요소 중 단 하나라도 판별함수 통과 시 true를

2021년 12월 3일
·
0개의 댓글
·
post-thumbnail

[javascript30] Type Ahead

1. Type Ahead 입력창에 검색어를 입력 시 검색어에 해당하는 데이터를 아래 목록으로 출력 2. 전체 코드 3. 동작 순서 > fetch() 함수로 cities 배열에endpoint에서 가져온 데이터배열 입력한다. 검색창에 검색어를 입력한다. searchInput의 addEventListener에서 change, keyup 감지 후 displ...

2021년 11월 19일
·
0개의 댓글
·
post-thumbnail

[javascript30] Flex Panel Gallery

1. Flex Panel Gallery css flex 속성을 이용하여 요소 배치 및 동작 화면 클릭 시 해당 구역이 커지거나 작아지는 애니메이션 동작 처리 2. 전체 코드 3. 동작 순서 > panel 요소에서 addEventListner로 click 감지 및 toggleOpen 함수 호출 toggleOpen 함수에서 해당 panel(this)의 ...

2021년 11월 15일
·
0개의 댓글
·
post-thumbnail

[javascript30] Array Cardio Day 1

1. Array Cardio Day 1 javascript에서 제공하는 배열 관련 기능들을 연습해보자 2. 전체 코드 및 내용 filter > filter: 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 => year가 해당 범위 내에 든 요소들만 반환된다. map > map: 배열 내의 모든 요소 각각에 대하여 주어진 함...

2021년 11월 15일
·
0개의 댓글
·
post-thumbnail

[javascript30] CSS Variables

1. CSS Variables spacing, blur, baseColor 의 값 변경에 따라 아래 화면에 css 변경 반영 2. 전체 코드 index.html 3. 동작 순서 > range bar 변경, 색상 선택을 통해 spacing, blur, color 에 대한 값을 변경한다. input.addEventListener 함수에서 change,...

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

[javascript30] JS and CSS Clock

1. JS and CSS Clock SetInterval 함수로 초 흐름 표현 초마다 CSS 수정을 통해 시계바늘 조정 구현 2. 전체 코드 index.html 3. 동작 순서 > 현재시각의 초,분,시로 시계바늘 각도 계산 계산한 각도로 바늘별 css 변경하여 움직이는 효과 나타냄 4. HTML, CSS css transform > transfo...

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

[javascript30] JavaScript Drum kit

1. JavaScript Drum kit 키보드를 클릭하여 A,S,D,F...등을 눌렀을때 이벤트 발생 클릭 시 각 자판에 연동된 음원파일 재생 클릭 시 노랗게 하이라이트 발생 2. 전체 코드 style.css index.html 3. 동작 순서 > A, S, D, F.... 키보드를 누른다 3-1. playSound() 함수에서 입력받은 값을 ...

2021년 11월 12일
·
0개의 댓글
·
post-thumbnail

[JavaScript30] CSS + JS CLOCK

바닐라 자바스크립트를 처음으로 새로 공부하는 의미에서 JavaScript30의 웹 사이트의 기능들을 구현해보기로 했습니다. 가장 먼저 작은 시계 기능을 구현하는 코드를 작성했습니다.구현한 코드는 링크를 통해 확인할 수 있습니다.var: 변수를 선언. 추가로 동시에 값을

2021년 10월 5일
·
0개의 댓글
·
post-thumbnail

[JavaScript30] 🕹 30. Whake A Mole

두더지 잡기 게임

2021년 8월 18일
·
0개의 댓글
·
post-thumbnail

[JavaScript30] ⏲ 29. Countdown Timer

버튼을 통해 빠른 시간설정을 할 수 있고, 입력을 통해 입력한 시간 동안 카운트 다운을 하는 타이머

2021년 8월 18일
·
0개의 댓글
·
post-thumbnail

[JavaScript30] 🎞 28. Video Speed Controller UI

마우스이동에 따른 영상 재생속도 조절

2021년 8월 18일
·
0개의 댓글
·