까막눈코딩

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

1. 개요 체크 리스트가 추가된 달력을 만들 것이다. 위와 같은 형태로, 오른쪽에 달력을 만들고, 현재 날짜를 표시하며 왼쪽에는 현재 날짜의 to-do list를 만든다. 또, 달력에서 다른 날짜를 클릭하면 해당 날짜가 다른 색으로 표시되며, 왼쪽의 to-do list에 다른 날짜의 리스트를 표시한다. 작성된 리스트가 있는 경우에는 날짜의 아래쪽에 작게 표시를 한다. 오른쪽 왼쪽 방향의 화살표를 누르면 이전 달이나 다음 달의 달력을 확인할 수 있다.

Experience/[Javascript] Calendar + To-do List 2021. 5. 6. 09:31

1. 배경 21은 MacOS나 IOS 환경을 준비할 수 없는 탓에 코드의 정상 작동 여부를 확인할 방법이 없으므로 생략하였다. 미리 지정해 둔 특정한 단어에 마우스를 가져가면 해당 단어를 강조해 주는 기능이다. 2. HTML Home Order Status Tweets Read Our History Contact Us Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae! Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pa..

Experience/[Javascript] JS 30 2021. 5. 5. 00:27

1. 배경 마이크에 입력되는 음성을 인식하여 출력하는 기능이다. 음성 인식 성능 자체는 썩 좋지 않아 보인다. 2. HTML 3. CSS html { font-size: 10px; } body { background: #ffc600; font-family: 'helvetica neue'; font-weight: 200; font-size: 20px; } .words { max-width: 500px; margin: 50px auto; background: white; border-radius: 5px; box-shadow: 10px 10px 0 rgba(0,0,0,0.1); padding: 1rem 2rem 1rem 5rem; background: -webkit-gradient(linear, 0 0, 0..

Experience/[Javascript] JS 30 2021. 5. 4. 00:01