Dev다D

청기 백기 II 저번에는 내려간 깃발이 다시 올라오지 않았는데, 이번에는 다시 깃발이 올라오도록 써주세요. 그리고 재미를 조금 더하기 위해, 깃발이 1초 뒤에 올라오도록 써줄 텐데요. setTimeout 함수를 사용하면 동작을 몇 초 후에 실행되도록 설정할 수 있습니다. // someFunction 함수가 1초 후 실행 setTimeout(someFunction, 1000); // someFunction 함수가 3.5초 후 실행 setTimeout(someFunction, 3500); 청기 내려 청기 내리지 말고 백기 내려 점선 청기 내려 * { box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; text-align: cen..

청기 백기 I “청기 내려. 백기 올려. 청기 내리지 말고 백기 올려!” '청기 백기' 게임 아시죠? 참가자들이 한 손에는 청기를, 다른 손에는 백기를 들고 있다가 사회자가 말하는 대로 동작을 해야 하는 게임입니다. 예를 들어, 사회자가 "청기 내리지 말고 백기 들어!"라고 외치면 그대로 따라해야 합니다. 만약 실수로 청기를 내린다거나 백기를 들지 않으면 탈락하게 됩니다. 이 게임을 한 번 만들어봅시다. 주어진 코드를 실행해보시면 총 6개의 깃발과, 3개의 버튼이 있습니다. HTML 코드와 CSS 코드를 분석한 후, 앞서 배운 jQuery 선택자와 메소드(함수)를 이용해, 각 버튼이 제대로 동작하도록 스크립트를 작성해보세요. 깃발이 다시 올라오는 기능은 청기 백기 II 과제에서 구현할 테니, 일단은 내려..

드럼 시퀀서 III 마지막 파트에서는: 키보드로 1에서 9까지의 숫자를 누르면 해당 드럼 소리가 나도록 해주세요. 같은 버튼을 빠르게 여러 번 눌러도 소리가 끊어지지 않아야 합니다. 누를 때마다 매번 드럼 소리를 처음부터 재생해주세요. 숫자 1에서 9까지가 아닌 다른 값을 입력하면 무시되어야 합니다. 예를 들어서 키보드로 q를 입력하면 오류도 나지 않고, 다른 특별한 동작도 없어야 합니다. 소리가 녹화되지 않아서 아쉽다. 모든 버튼이 다 다른 소리가 나게 구성되어있다. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1 8 Tom 2 9 Tambourine * { box-sizing: border-box; } body { margin: ..

드럼 시퀀서 II 두 번째 파트에서는: 키보드로 숫자 1에서 숫자 9를 누르면 해당 'cell'에 'playing' 클래스가 추가되어야 합니다. 예를 들어서 숫자 1을 누르면 #cell1에 'playing' 클래스가 추가되고, 5을 누르면 #cell5에 'playing' 클래스가 추가되는 거죠. 키보드에서 손을 떼면 모든 'cell'에서 'playing' 클래스를 없애줘야 합니다. 아직 드럼 소리는 넣지 마세요. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1 8 Tom 2 9 Tambourine * { box-sizing: border-box; } body { margin: 0; font-family: "Helvetica"; bac..

드럼 시퀀서 I 요즘의 음악 트렌드를 따라가기 위해 비트메이킹을 배워보려고 합니다. 하지만 '런치패드'를 살 돈이 없기 때문에 자바스크립트로 대안을 만들 건데요. 우선 만들려고 하는 사이트의 완성본을 살펴보세요. 오른쪽에는 루프 음원을 실행할 수 있는 '재생 버튼'과 '정지 버튼'이 있고, 키보드로 숫자 1에서 9까지 입력하면 해당 드럼 소리가 재생됩니다. 과제를 세 파트로 나누어 진행해볼게요. 이번 첫 번째 파트에서는: #play-btn을 누르면 loop.mp3 파일이 실행되어야 합니다. #stop-btn을 누르면 loop.mp3 파일이 멈추고, 다시 음원의 처음으로 돌아가야 합니다. 1 Kick 2 Closed Hi-hat 3 Open Hi-hat 4 Clap 5 Snap 6 Crash 7 Tom 1..

효율적으로 완료한 일 체크하기! 이벤트 위임을 활용할 수 있도록 이벤트 핸들러, updateToDo 함수를 완성해 주세요. updateToDo는 이벤트가 발생한 대상이 item이라는 클래스 속성 값을 가지고 있을 때 동작해야 합니다. 이벤트 핸들러를 li 태그 각각에 등록하는 것이 아니라 하나의 태그에만 등록해 주세요. 코드를 잘 작성했다면, 첫 번째 두 번째 할 일 뿐만아니라 자바스크립트로 추가한 네 번째 할 일을 클릭했을 때도 'done'이라는 class 속성값이 toggle되면서 스타일 변해야 합니다. 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다. 오늘 할 일 자바스크립트 공부하기 고양이 화장실 청소하기 고양이 장난감 쇼핑하기 body { margin: 0; padding: 0; di..

완료한 일 체크하기! 이벤트 객체를 활용한 이벤트 핸들러, updateToDo 함수를 완성해 주세요. 이 함수는 이벤트가 발생한 대상에 'done'이라는 class 속성값을 toggle하는 함수여야 합니다. 반복되는 부분들이 좀 더 간단하게 정리되도록 이벤트 핸들러를 등록하는 반복문을 작성해 주세요. 코드를 잘 작성했다면, 첫 번째 두 번째 할 일은 클릭했을 때 'done'이라는 class 속성값이 toggle되면서 스타일이 변하고, 세 번째 할 일은 클릭을 해도 아무런 변화가 없어야 합니다. 오늘 할 일 자바스크립트 공부하기 고양이 화장실 청소하기 고양이 장난감 쇼핑하기 body { margin: 0; padding: 0; display: flex; align-items: center; justify-..

JavaScript 🌈 [인터랙티브 자바스크립트] 03. 이벤트 살펴보기 01. 이벤트 핸들러 등록하기 02. 다양한 이벤트 03. 이벤트 핸들러 등록하기 퀴즈 04. 이벤트 객체 05. 이벤트 객체 프로퍼티 06. 완료한 일 체크하기! 07. 이벤트 버블링 08. 캡쳐링 09. 이벤트 버블링 퀴즈 10. 이벤트 위임 11. 효율적으로 완료한 일 체크하기! 12. 브라우저의 기본 동작 13. 브라우저의 기본 동작 퀴즈 14. 종합 정리 jQuery 🌀 [jQuery 활용하기] 01. jQuery 1 01. DOM pt. 1 02. DOM pt. 2 03. jQuery 사용해보기 04. jQuery = '선택'과 '동작' 05. CSS로 '선택'하기 06. jQuery 내부 살펴보기 07. jQuery의 ..

오늘 꼭 해야할 일! 본인이 작성한 태그 안에 li 태그로 오늘 할 일들을 추가하고 싶어합니다. li 태그이름을 가진 요소 노드를 만든 다음 그 요소 노드에 파라미터로 전달받은 오늘 할 일(text)을 담고 태그의 마지막 자식 요소 노드로 추가하는 addNewTodo함수를 완성해 주세요. 오늘 할 일 body { margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; } .main { width: 350px; margin: 40px; padding: 30px 0; background-color: #fcfcfc; box-shadow: -5px -5px 20px #FFFFFF, 5px 5px 20px #BABECC..

JavaScript 🌈 [인터랙티브 자바스크립트] 02. 브라우저와 자바스크립트 01. 브라우저도 객체다? 02. DOM 03. console.dir? 04. DOM 트리 05. DOM 트리 여행하기 06. DOM 트리 여행하기: 부록 07. DOM 트리 여행하기 퀴즈 08. 요소 노드 프로퍼티 09. inner/outerHTML, textContent 비교 10. 요소 노드 프로퍼티 퀴즈 11. 요소 노드 추가하기 12. 노드 삭제와 이동하기 13. 오늘 꼭 해야 할 일! 14. HTML 속성 다루기 15. HTML 속성 다루기 퀴즈 16. 스타일 다루기 17. 스타일 다루기 퀴즈 18. 비표준 속성 다루기 19. 종합정리 jQuery 🌀 [jQuery 시작하기] 04. 프로젝트: 드럼 시퀀서 01. ..