# javascript30

135개의 포스트
post-thumbnail

[Javascript 30] 5. Flexbox + JS Image Gallery

[Javascript 30] 5. Flexbox + JS Image Gallery

2022년 3월 17일
·
0개의 댓글
·
post-thumbnail

[Javascript 30] 4. JS Array Cardio Practice Day1

[Javascript 30] 4. JS Array Cardio Practice Day1

2022년 3월 15일
·
0개의 댓글
·
post-thumbnail

[Javascript 30] 3. CSS-Variable

[Javascript 30] 3. Css-Variable

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

간단한 시계 제작하기

간단하게~ 시간 뜨는 정도?

2022년 3월 8일
·
0개의 댓글
·
post-thumbnail

[Javascript 30] 2. Js-Clock

[Javascript 30] 2. Js-Clock

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

[Javascript 30] 1. Drum-Kit

[Javascript 30] 1. Drum-Kit

2022년 3월 6일
·
0개의 댓글
·
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개의 댓글
·