까막눈코딩

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

1. 개요 웹캠을 만들고, 스크린 샷 기능, 화면상에 효과를 주는 기능을 만든다. 2. HTML Take Photo 3. CSS html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } html { font-size: 10px; background: #ffc600; } .photobooth { background: white; max-width: 150rem; margin: 2rem auto; border-radius: 2px; } /*clearfix*/ .photobooth:after { content: ''; display: block; clear: both; } .photo { width: 100%; float: l..

Experience/[Javascript] JS 30 2021. 5. 3. 17:08

1. 배경 동영상으로 이루어진 리스트에서 총 재생 시간을 구하려고 한다. 2. HTML Video 1 Video 2 Video 3 Video 4 Video 5 Video 6 Video 7 Video 8 Video 9 Video 10 Video 11 Video 12 Video 13 Video 14 Video 15 Video 16 Video 17 Video 18 Video 19 Video 20 Video 21 Video 22 Video 23 Video 24 Video 25 Video 26 Video 27 Video 28 Video 29 Video 30 Video 31 Video 32 Video 33 Video 34 Video 35 Video 36 Video 37 Video 38 Video 39 Video 4..

Experience/[Javascript] JS 30 2021. 5. 1. 23:49

1. 배경 리스트를 알파벳 순으로 정렬하되, 관사 a, an, the는 무시한다. 2. HTML 3. CSS body { margin: 0; font-family: sans-serif; background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000"); background-size: cover; display: flex; align-items: center; min-height: 100vh; } #bands { list-style: inside square; font-size: 20px; background: white; width: 500px; margin: auto; padding: 0; box-shadow: 0 0 0 20px rgba(0, ..

Experience/[Javascript] JS 30 2021. 4. 30. 22:38

1. 배경 마우스의 움직임을 따라 문자에 그림자 효과를 추가한다. 2. HTML 🔥WOAH! 3. CSS html { color: black; font-family: sans-serif; } body { margin: 0; } .hero { min-height: 100vh; display: flex; justify-content: center; align-items: center; color: black; } h1 { text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px; } 4. Javascript const hero = document.querySelector('.hero'); const text = hero.querySelector('h1'); con..

Experience/[Javascript] JS 30 2021. 4. 28. 14:21

1. 배경 한 번 들었던 강의들을 복습하기 위해, 포스팅한 내용을 한 번 읽고, 혼자서 코드를 작성해본 뒤, 정답과 비교해 보았다. 처음 공부했을 때 눈에 들어오지 않았던 사실이나, 코드를 작성할 때 잘 되지 않았던 부분 등을 기록한다. 2. Drum Kit - window, 즉 전역객체에 대한 이벤트 리스너를 설정하고, keydown 이벤트가 발생하면 그 중 정해진 keyCode에 해당하는 이벤트에만 반응하도록 해야 한다. - 속성 선택자 [] - currentTime은 플레이백 시간을 의미하므로, 0으로 설정하면 소리가 재생되는 중에 한 번 더 재생하면, 즉시 두 번째 재생이 시작된다. if (e.propertyName !== 'transform') return; - 이벤트가 전달될 때, 원하는 이벤..

Experience/[Javascript] JS 30 2021. 4. 27. 22:56

1. 배경 항목을 추가할 수 있는 To do 리스트를 만들고, 입력받은 데이터를 로컬 스토리지에 저장하여 창을 새로고친 후에도 항목과 체크 상태가 유지되도록 설정하려고 한다. 2. HTML LOCAL TAPAS Loading Tapas... form 태그는, 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획이다. 3. CSS html { box-sizing: border-box; background: url("oh-la-la.jpeg") center no-repeat; background-size: cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; font-..

Experience/[Javascript] JS 30 2021. 4. 26. 19:43