본문 바로가기

그림판 만들기12

[바닐라JS로 그림판 만들기] Canvas Events [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/Efmq3MY7BN8 먼저 canvas 위에 마우스가 올려져있으면 그것을 감지하는 javascript를 만들 것임! app.js에 코딩을 한다. const canvas = document.getElementById("jsCanvas"); function onMouseMove(event) { console.log(event); } if(canvas) { canvas.addEventListener("mousemove", onMouseMove); } window에선 강의영상처럼 마우스를 움직이는 즉시 console창에 바로바로 출력이 되지않음. 사실 window 문제인지 내 컴퓨터 문제인진 알수 없음. 이 글을 보고 계신분들도 .. 2021. 4. 24.

[바닐라JS로 그림판 만들기] Styles part Two [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/bxeC0BYm8Y0 control하기 위해선 두 개의 버튼이 필요함. fill, save. 추가할 부분 ▼ Fill Save 전체 코드 ▼ Fill Save styles.css도 수정해준다. @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; display: flex; flex-direction: column; align-items:.. 2021. 4. 23.

[바닐라JS로 그림판 만들기] Styles part One [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/V4yUrRjAiDQ CSS를 손볼거임... 우선 배경 색을 지정하고 구글에 'reset css'를 검색한 후 밑줄 친 사이트에 들어간다. 이렇게 뭔가가 뜰것이다... 고대로 복사한다. reset.css를 새로 생성하고 위에 복사한 코드를 붙여넣기한다. styles.css도 다음과 같이 코드를 수정한다. 이제 캔버스를 만든다. index.html엔 id를 사용하고 style엔 class를 사용할 것임 style.css를 좀더 수정한다. @import "reset.css"; body { background-color: #f6f9fc; font-family: -apple-system, BlinkMacSystemFont, 'Se.. 2021. 4. 23.

[바닐라JS로 그림판 만들기] Project Setup [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/rE8eZktwyV8 먼저 Github에 paintjs라는 repository를 생성한다. (Github Desktop을 사용) 상단메뉴에 File → New repository로 생성할 수 있다. 생성한 후에 'Open in Visual Studio Code' 버튼을 클릭. 아래와 같이 Visual Studio Code 창이 뜬다. paint.js 폴더 안에 index.html, app.js, styles.css 3개의 파일을 생성한다. index.html에 다음과 같이 코딩한다. 터미널에 Git으로 Commit한다 git commit -m "Initial Commit" ★ -m 뒤에는 메세지를 적는 것인데 처음 comm.. 2021. 4. 23.

[바닐라JS로 그림판 만들기] Requirements [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/mXssD1qCA5A -이 수업을 듣기 위해선 '초보자를 위한 바닐라 자바스크립트'를 반드시 수강해야함 (현재 노마드 코더 홈페이지엔 '바닐라JS로 크롬 앱 만들기'라는 강의로 표시되어있음) -기초 지식은 설명하지 않을거임. 바로 실전으로 들어감 -구글 크롬, Git, Github, 윈도우는 Visual Studio Code / 맥은 Atom이 필요함 2021. 4. 23.

[바닐라JS로 그림판 만들기] What are we building [출처-유튜브 노마드 코더 Nomad Coders] https://youtu.be/jlOtDiYt9wg -바닐라JS Part2 (바닐라JS로 크롬 앱 만들기가 Part1) -Part1을 수강했는데도 바닐라JS에 대해 아직 모르겠으면 이 강의를 들을 것 (이해되면 유튜브 클론 코딩으로 넘어가세요) -여기선 좀더 interactive한 것을 만들거임. 페인팅 캔버스! -캔버스 API를 사용할 것임 2021. 4. 23.

이전 1 2 다음

티스토리툴바