Dev다D

청기 백기 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..

D-DAY 계산기 만난지 며칠 되었는지 계산해주는 웹사이트를 만들어보려고 합니다. 시작 날짜가 제대로 입력되지 않은 채로 버튼을 누를 경우, '시작 날짜를 입력해주세요!'라는 메시지를 알러트창으로 띄웁니다. 5월 13일에 만났고 현재 5월 13일이면 '만난지 1일째'입니다. 5월 13일에 만났고 현재 5월 14일이면 '만난지 2일째'입니다. 만난지 00일째 시작일 결과 보기 * { box-sizing: border-box; } body { margin: 0; min-width: 992px; font-family: "Helvetica"; } /* navigation bar */ .navbar { height: 66px; background-color: white; text-align: center; lin..

이메일 광고 처음에는 'Send' 버튼이 회색(#9E9E9E)으로 비활성화되어 있다가, 방문자가 올바른 형태의 이메일을 입력하면 파란색(#4D79C2)으로 활성화되어야 합니다. 이메일에는 @가 포함되어 있어야 한다. @ 뒤에는 최소 1개 이상의 .이 포함되어 있어야 한다. 이메일의 필수요소인 '@', '.'이 입력되어야 send버튼 활성화! PRODUCTS BLOG HOME ABOUT LOGIN 더 많은 정보와 이벤트 등을 받아보고 싶으면 이메일을 입력해주세요! * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; margin: 0; min-width: 992px; } /* Navigation Bar */ .navbar { pos..

데이터 분석하기 배열 birthdayData에는 11개의 문자열이 있습니다. 각 문자열에는 생년월일 8자리와 이름이 나와 있고요. 이 중 미성년자만 골라서 출력해주는 함수를 써봅시다. 2017년 기준으로 98년생까지 성년, 99년생부터가 미성년자입니다. var birthdayData = [ '20010309전소미', '19960828김세정', '19991112최유정', '19960209김청하', '19990719김소혜', '19981216주결경', '19971201정채연', '19991204김도연', '19991204강미나', '19951218임나영', '19990803유연정' ]; function printMinors(arr) { console.log("미성년자 명단:"); arr = 1998; for..

문자 개수 세기 주어진 단어에 특정 알파벳이 몇 번 들어가는지 세어주는 프로그램을 작성해봅시다. 예를 들어 countCharacter('AbaCedEA', 'E') 함수는 'AbaCedEA' 에서 E가 몇 번 들어갔는지 세는 함수로 실행결과는 2입니다. 여기서 주의해야 할 점은 대소문자를 구분하지 않는 다는 점입니다. countA(word) 함수는 단어에 'A'가 몇 번 들어가는지 출력하는 함수입니다. 마찬가지로 대소문자를 구분하지 않습니다. // 주어진 단어(word)에 특정 알파벳(ch)이 몇 번 들어가는지 세어주는 함수 function countCharacter(word, ch) { var count = 0; let big = word.toUpperCase(); for (let k = 0; k < ..

아이디 비밀번호 검사 자바스크립트를 활용해서 '로그인 페이지'를 수정하려고 하는데요. 아이디 혹은 비밀번호 둘 중 하나라도 입력란이 비어있다면, 로그인 버튼이 '비활성화'되어서 버튼의 배경색이 #9B9B9B로 설정되어야 합니다. 사용자가 아이디와 비밀번호를 둘 다 입력하면, 로그인 버튼이 '활성화'되어서 버튼의 배경색이 #1BBC9B로 바뀌어야 합니다. 아이디와 비밀번호 모두 입력할 경우에만 로그인 버튼 활성화 비밀번호를 잊어버리셨나요? * { box-sizing: border-box; font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; background-color: #1BBC9B; } .login-form { width: 300px; backg..

폰트 굵기 바꾸기 Home Seoul Tokyo Paris #logo { display: block; margin-left: auto; margin-right: auto; margin-top: 80px; } #menu { text-align: center; margin-top: 60px; margin-bottom: 60px; } #menu a { margin-left: 10px; margin-right: 10px; font-size: 16px; color: #58595b; text-decoration: none; font-family: Helvetica, Arial, sans-serif; } #menu a:first-child { font-weight: bold; } #photo { display: bl..