까막눈코딩

1. 개요 두더지 잡기 게임이다. 여섯개의 hole에서 무작위로 두더지가 등장했다가 사라지며, 이 속도 또한 랜덤이다. 두더지를 클릭하면 점수가 1씩 올라간다. 2. HTML Whack-a-mole! 0 Start! 3. CSS html { box-sizing: border-box; font-size: 10px; background: #ffc600; } *, *:before, *:after { box-sizing: inherit; } body { padding: 0; margin: 0; font-family: 'Amatic SC', cursive; } h1 { text-align: center; font-size: 10rem; line-height: 1; margin-bottom: 0; } .score ..

Experience/[Javascript] JS 30 2021. 5. 14. 14:50

1. 개요 카운트다운 기능을 만든다. 2. HTML 20 Secs Work 5 Quick 15 Snack 20 Lunch Break 3. CSS html { box-sizing: border-box; font-size: 10px; background: #8E24AA; background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%); } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; text-align: center; font-family: 'Inconsolata', monospace; } .display__time-left { font-weight: 100; font-siz..

Experience/[Javascript] JS 30 2021. 5. 13. 14:22

1. 개요 마우스 이동으로 비디오 속도를 조절하는 기능이다. 2. HTML 1× 3. CSS body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #4C4C4C url('https://unsplash.it/1500/900?image=1021'); background-size: cover; font-family: sans-serif; } .wrapper { width: 850px; display: flex; } video { box-shadow: 0 0 1px 3px rgba(0,0,0,0.1); } .speed { background: #efefef; flex: ..

Experience/[Javascript] JS 30 2021. 5. 12. 13:58

1. 개요 클릭과 드래그를 이용해 HTML 요소를 넘기는 듯한 효과를 준다. 2. HTML 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 3. CSS html { box-sizing: border-box; background: url('https://source.unsplash.com/NFs6dRTBgaM/2000x2000') fixed; background-size: cover; } *, *:before, *:after { box-sizing: inherit; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center;..

Experience/[Javascript] JS 30 2021. 5. 11. 15:39

1. 개요 네비게이션로 마우스 포인터를 옮기면 메뉴가 펼쳐지도록 한다. 2. HTML Cool About Me Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though! Courses RFB React For Beginners ES6 ES6 For Everyone NODE Learn Node STPU Sublime Text Power User WTF What The Flexbox?! GRID CSS Grid LRX Learn Redux CLPU Command Line Power User MMD Ma..

Experience/[Javascript] JS 30 2021. 5. 9. 15:23

1. 개요 이벤트 캡처링과 버블링과 이를 중단하는 방법, 이벤트에 한 번만 반응하는 방법이다. 2. HTML one two three button 3. CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } div { width: 100%; padding: 100px; } .one { background: thistle; } .two { background: mistyrose; } .three { background: coral; } 4. Javascrip const divs = document.querySelectorAll('div'); function logText(e) { console.log(this.cl..

Experience/[Javascript] JS 30 2021. 5. 8. 15:30

1. 개요 Nav 태그를 스크롤 이동에 관계없이 화면의 최상단에 고정되어 표시되도록 한다. 2. HTML A story about getting lost. LOST. Home About Images Locations Maps Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in asper..

Experience/[Javascript] JS 30 2021. 5. 7. 15:33

1. 개요 이번에는 텍스트를 읽는 기능이다. 텍스트 상자의 글을 인식하여 읽어 주며, 속도 및 음성의 높낮이를 조절할 수 있다. 2. HTML The Voiceinator 5000 Select A Voice Rate: Pitch: Hello! I love JavaScript 👍 Stop! Speak 3. CSS html { font-size: 10px; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; padding: 0; font-family: sans-serif; background-color: #3BC1AC; display: flex; min-height: 100vh; align-items..

Experience/[Javascript] JS 30 2021. 5. 6. 15:12