코딩교육 6

CSS 애니메이션 재실행 안될때

A 요소를 클릭할때마다 B 요소가 움직이도록 만들고 싶은데... classList.remove('class'); classList.add('class'); 만으로는 사용이 불가능 했다. 그럴때, element.offsetWidth = element.offsetWidth; 를 사용하게 되면! 다시 컴파일링 되면서 animation이 동작함. let bat1 = document.querySelector(".b1"); let ddk = document.querySelector(".ddk"); ddk.addEventListener("click", function() { bat1.classList.remove("goMove"); bat1.offsetWidth = bat1.offsetWidth; //애니메이션 재사..

칭찬스티커판 (코딩 교육용)

코딩수업을 신청한 친구들이 30명이 되다보니, 간식을 매번 댈수가 없다. 그래서 코딩 스티커판으로...! 30개에 문상 5000원 나눠주기로했는데, 이것도 인원이 많아서 ....(스티커를 마구 나눠주다보니...) 30개에 GS 상품권 3000원 짜리 나눠주기로 했다! 돈으로 매수한 나의 수업 ♡ ㅋㅋ 제발 ㅠ 20차시까지 잘 버티자 ㅠ 지금처럼만 하자 친구들 ㅠ

코딩교육 2022.09.29

엔트리 하드웨어 연결하기 (연결 잘 안될 때!)

엔트리 하드웨어 연결하려면, 일단 엔트리 하드웨어 프로그램을 설치해야함. https://playentry.org/download/hardware 다운로드 : 엔트리 소프트웨어를 통해 미래를 꿈꾸고 함께 성장합니다. playentry.org pc 사양에 맞게 엔트리 하드웨어를 설치하고, 본인이 갖고 있는 아두이노나 라즈베리파이 등 프로그래밍 하고자 하는 H/W 장치를 연결해본다. 연결할때 잘 안되면 1. 커넥터 부분 꽉 잡아보기 (생각보다 usb 커넥터 부분이 제대로 연결 안되는 경우가 있음) 2. usb 2.0 serial driver 새로 설치 → https://k2me.tistory.com/145 아두이노 USB 시리얼 포트 안 잡힐 때 해결 방법 노트북이나 새로 설치된 PC에서 USB 시리얼 포트가..

아두이노 USB 시리얼 포트 안 잡힐 때 해결 방법

노트북이나 새로 설치된 PC에서 USB 시리얼 포트가 안잡히는 경우가 종종 발생함. COM1 만 나오는 경우가 많고, 하드웨어 엔트리도 연결이 안됨. 그럴때 usb 2.0 serial driver 설치 하면 아주 잘됨! 설치시에 오류가 나는 경우, 드라이버 삭제하고 다시 설치 하면 잘 되니 그 부분 확인 해야함. 그래도 안된다!!! 그러면, usb 포트 변경, PC 리부팅 등 해보길 바람!

[왕 초보 코딩/프로그래밍] HTML/CSS/Javascript 사용한 계산기 예제(소스코드 o)

HTML CSS 강의를 진행하다가 갑자기, 특강 요청이 왔다. 그래서 급. 준비한 예제. Javascript 기본 개념들 넘어가고, 바로 함수와 객체 정보를 불러와 값들을 계산하는 예제이다. 총 3단계로 구현하였고, 중간에 주석이나, CSS가 덜 써진 부분이나, 예외처리를 안한 부분도 있다. (HTML, CSS, Javascript) 가 어색한 나에게 남의 코드는 어려워서(?) 그냥 쉽게 예제를 만들어봤고, 완성된 코드는 아니며, 이 코드를 수정해서 계산기를 완성 할수 있도록 만들어놨다. javascript 함수를 연습하고 싶은 사람들은 참고해서 만들어 보면 좋을것 같다. 1. 두 수를 입력받아, 사칙연산하기(더하기만 구현) 더보기 첫번째 숫자를 입력해주세요. 두번째 숫자를 입력해주세요. 결과 : (추가..

웹 프로그래밍을 위한 Visual Code 다운로드 및 설정

이번생에 웹 프로그래밍은 없을줄 알았는데 결국 웹 프로그래밍 분야까지 왔습니다. 역시 IT 분야 자체가 계속 트랜드를 타고, 신생언어와 사장되는 언어, 신기술과 사장되는 기술들이 자주 있는 것 같습니다. 지금의 트랜드는 아무리 봐도 '웹' 기반 기술 인것 같네요. 꾸역꾸역 10년간 Windows 계열 언어와 어릴때 배웠던 Flash 기반으로 ActionScript 2.0 / 3.0 을 써서 잘 울궈먹었던 것 같습니다. 새로 시작하는 기분으로 Visual Code를 설치 해보고, 셋팅을 해보며 기록을 남깁니다. 웹 프론트앤드 개발시 사용 Tool -> HTML5 + CSS3 + Javascript 개발 진행시 주변에서 보니 Visual code를 많이 쓰길래 저도 설치를 해봅니다. Visual Code 다..