본문 바로가기

TIL/HTML, CSS, JS 이것저것24

JS30 - Playing with CSS Variables and JS JS30을 진행하다 새로 알게된점을 기록해두려 합니다. CSS에서도 커스텀 변수를 만들어 활용이 가능한지 몰랐는데 새롭게 알게 되었다. css 문서에서 대쉬두번과 합쳐서 지정한 키워드는 해당 CSS 문서에서 커스텀 변수로 활용이 가능하다. 이러한 방식을 쓰면 좋은점은 여러개의 수치값을 한번에 관리가 가능하다는 점이다. 선언한 키워드를 활용할때는 var() 함수에 매개변수로 넣어주면 이용가능 하다. 2021. 5. 30.
JS 30 - Drum Kit Javascript 30 드럼킷을 만들다 중간에 마주친 에러가 있어서 기록해두려 합니다. const key = document.querySelector(`div[data-key="${e.keyCode}"]`); setTimeout(key.classList.remove, 700, "playing") //illegal invocation 발생... setTimeout에서 key.classList.remove로 콜백을 넘겨주면 illegal invocation이 발생한다. 왜 그런지 살펴보니 다음과 같은 이유인것 같다. setTimeout에서 this값을 명시하지 않고 메소드를 그냥 dot notation으로 호출할 경우 호출하는 메소드의 this 값이 window로 설정되어 버린다 따라서 메소드가 어느 객체.. 2021. 5. 26.
Javascript Koans - About Mutability 바닐라코딩 프렙 사전과제인 자바스크립트 코안스를 풀던중 mutability 파트에서 몰랐던 것이 나와서 기록해두려 한다. 우선 mutablilty파트를 풀기 위해서는 기본적인 자바스크립트 OOP 개념(컨스트럭터 함수, 프로토타입, 상속 등)을 알아야 해서 MDN에서 해당 문서를 한번 더 복습했다. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS Object-oriented JavaScript for beginners - Learn web development | MDN This article has provided a simplified view of object-oriented theory — thi.. 2021. 5. 19.
숫자야구 만들기 바닐라코딩 프렙 사전과제로 제시된 숫자야구를 만들어 보았습니다. spooky-scary-skeleton.github.io/Baseball/ Baseball Project spooky-scary-skeleton.github.io 2021. 5. 6.
캘린더 만들어보기 바닐라코딩의 프렙 사전단계에 있던 캘린더를 만들어 봤습니다. 여담으로 지난번 캐러셀보다 업로드가 이렇게나 늦은 이유는... 시험기간과 잠깐 어학시험이 겹친다는 핑계로 코딩을 많이 하지 못했습니다 ㅜㅜㅜㅜㅜ (근데 사실 되돌아보면 다 핑계죠 시간 내려면 충분히 낼 수 있었을 듯, 문제는 이제 대학 졸업 요건 하나가 남았는데 이게 생각보다 커서 다음 과제인 야구게임도 만드는데 생각보다 좀 오래 걸릴수도 있을 것 같아요 ㅎㅎㅎ ㅜㅜㅜ) 다른 분들은 어떻게 구현하셨을지 궁금하네요! 바닐라코딩에 들어가게 된다면 함께 코드 리뷰 해보고 싶습니다. spooky-scary-skeleton.github.io/Calendar/ Calendar Project spooky-scary-skeleton.github.io 2021. 4. 22.
Carousel 웹사이트 만들어보기 바닐라코딩 프렙사전단계 과제에 있던 Carousel 웹사이트를 만들어 보았습니다! 이제 남은건 숫자야구와 달력이네요! spooky-scary-skeleton.github.io/Carousel/ Carousel Project spooky-scary-skeleton.github.io 2021. 4. 2.