728x90 반응형 인강\개인공부22 녹화프로그램! HTML, JS로 직접 만들어보기 유투브 '코드 스캘퍼' 님의 영상을 보고 만든 것입니다. 스크립트 코드로 촬영하고 녹화하고 저장까지 비교적 간단한 코드였습니다 그치만 Blob이라는 코드와 vodeo 코도도 처음 사용해보았습니다. 녹화를 누루면 녹화가 실행됩니다. 저렇게 제 모습이 녹화되고 오디오도 들어갑니다. 중지를 누르면 녹화가 중단 됩니다. 녹화보기 버튼을 누르면 방금 녹화했던 제 영상이 미리보기 화면에 출력됩니다. 그리고 다운로드 버튼에 링크가 걸리게됩니다. 다운로드 까지 됩니다. 모든 기능들이 문제없이 실행됐으나 전 다운로드된 영상을 보면 소리는 들리는데 화면이 블랙화면이었습니다. 코드상 문제는 없는것 같으나 유투브 댓글로 여쭤보니 라이브 서버를 다운받으라는 말씀을 하셔서 해보았으나 여전히 화면 출력이 되지 않습니다.ㅜㅜ 안타깝.. 2021. 4. 16. 바닐라 JS로 그림판 만들기 이번엔 바닐라JS로 그림판 만들기 수업을 들었습니다. 좀더 낯선 api 를 사용했으니 쉽고 재밌는 강의였습니다. only JavaScript로 만든 그림판의 기능은 다음과 같습니다. 1. 캔버스에 마우스로 그리기 (8가지 색) 2. paint 뿐 만아니라 Fill 채우기 기능 3. range로 브러쉬 두께 조절 4. 마우스 오른쪽 방지 5. sava 버튼으로 이미지 저장 그림판 디폴트 형태입니다. 아래 기능들로 색을 변경하거나 캔버스를 채우거나 브러쉬의 두께를 조절 할수있습니다. 첫번째와 두번째 선의 두께 차이가 있습니다. SAVA버튼 클릭시 내가 그린 그림이 자동 저장 됩니다. jpg파일보다 png파일이 픽셀이 덜 꺠져서 png파일로 설정했습니다. FILL 과 PAINT 버튼이 스위치 됩니다. 코드 공.. 2021. 4. 14. 바닐라 JS로 크롬 앱 만들기 Vanilla JS를 익히기 위해 찾다가 "노마드코더"라는 강의 사이트를 찾았습니다. 무료 강의가 좋은게 많이 있습니다. 초급 javaScript 를 배우고 싶으신 분들에게 추천 드립니다. (html css 를 전혀 모르는 상태라면 어려울것이라 생각됩니다) only JavaScript만으로 만든 크롬앱의 기능은 1. 시계 기능 2. 비교적 가벼운 데이터인 이름 및 todo 리스트를 브라우저 자체에 저장 3. todo리스트 삭제가능 4. 현재 위치 위도경도 값 받아 외부 날씨 api로 날씨 출력 (오른쪽 상단) 5. 랜덤 배경화면 출력 코드 공유 하겠습니다 clock.css body { background-color: #34495e; color: white; margin: 0; text-shadow: 1p.. 2021. 4. 12. [VS Code] 단축키 정리 혼자서 자주 쓰는 명령어들을 잊지 않기 위해 만드는 Cheat Sheet 개념으로, 많은 단축키가 없음을 유념해주시기 바랍니다. 공통 명령어 단축키 내용 Ctrl+/ 주석 생성 / 주석 삭제 Ctrl+K+F 소스코드 정렬 Ctrl + [ 들여쓰기 왼쪽으로 이동 Ctrl + ] 들여쓰기 오른쪽으로 이동 Ctrl + 1 좌측으로 화면 분할 Ctrl + 2 우측으로 화면 분할 Ctrl + G 입력한 라인으로 이동 Ctrl + L 현재 라인 선택 Ctrl + P 해당 디렉토리의 파일 목록 열기 Ctrl + B 좌측 토글 사이드바 열기 / 숨기기 Ctrl + K -> Z 에디트 창 확대 Ctrl + Shift + ` 터미널창 열기 Ctrl + Shift + E Exploer 사이드바 열기 C/C++ 명령어 단축키.. 2021. 4. 5. 이전 1 2 3 다음 728x90 반응형
