바보도 코딩합니다 바보도 코딩합니다

웹 그림판 만들기 1편 보러가기 웹 그림판 만들기 2편 보러가기 웹 그림판 만들기 3편 보러가기 완성 코드는 가장 아래에 공개되어 있습니다. 드디어 HTML, JS, CSS로 만드는 웹 그림판 마지막 완성편입니다! 오예~ 시리즈는 일단 뭐라도 만들어보고 싶은 초보 코더분들을 위해서 만들어 본 시리즈였구요... (저 포함) 개발공부는 책, 인강으로 하는 것보다도 쉬운거부터 하나씩 만들어가면서 배우는 게 큰 것 같습니다. 이런 과정을 지나면 나만의 것을 만들어 포폴을 채울 수 있을 것 같아요. 마지막 편은 SAVE(저장하기) 기능구현하고, 지금까지의 과정 정리하고 끝내겠습니다~ SAVE 저장하기 기능 이미 canvas기능에서 pixel로 다루고 있기 때문에, 우리는 캔버스를 우클릭 하면 저장할 수 있다는 사..

웹 그림판 만들기 1편 보러가기 웹 그림판 만들기 2편 보러가기 드디어 3편입니다. 끝이 보입니다. 4편이 마지막입니다^^ 3편까지 대부분의 기능이 만들어집니다. 4편에서는 마지막으로 저장기능을 구현하고 웹그림판 만드는 과정을 정리하는 시간입니다. 2편까지 완료하면 절반이지만, 그래도 벌써 시각적으로는 훌륭한 그림판이 만들어졌습니다. 오늘은 기능을 하나하나 추가해볼게요. 1️⃣ 색 바꾸기 (컬러 변환) 기능 index.html>body구간에서 여기 컬러부분있죠? 저렇게 다중 선택을 해서 위와 같이 컬러 클래스코드를 작성해줍니다. (VScode에서 단축키 : Ctrl+Alt+🔼방향키 / Alt+마우스 다중 클릭) 다음, app.js로 이동해서 const 추가해줍니다. const colors = docume..

1편 보러가기! CLICK 🖱! 1편에 이어서 자바스크립트,HTML,CSS로 웹 그림판 만들기 2탄을 가겠습니다. 자, 안전벨트 단단히 매시고 출바알🎈~ 1️⃣ 채우기/그리기, 저장버튼 만들기 좌측과 같이 컬러 팔레트 위에 채우기, 저장하기 버튼 만들거에요 (채우기/그리기는 1개 버튼이 스위치되도록 구현 예정) index.html에서 여기 아래에 만들어주면 되겠죠, 1편에서 캔버스만들었던 문법처럼 버튼 만들어주면 됩니다. Fill Save 2️⃣ 저장버튼에 스타일 넣기 여기서 끝이면 심심하죠.. 지금 버튼이 멋이 없잖아요? 뽐이 없어 그렇다면 어디로 이동? Style.css로 이동~ 우리가 버튼(btns)을 controls에 만들었으니까 Style.css>controls 구간으로 가서 태그 작성하면 됩니..

만들 결과물 : 웹에서 작동하는 그림판 만드는 이유 : 결과물을 만드는 과정을 통해 JS,CSS,HTML을 보다 실질적으로 이해하기 위해서. (개념을 이해하고 정리하는 것보다 한발짝 더 나아가는 학습과정이라고 생각) 1️⃣ 셋업하기 0 . 명령프롬프트에서 깃헙에 클론, VScode 실행 1. 탐색기에서 index.html / app.js / styles.css 생성하기 🔻 (VScode에서 파일 생성시 확장자누르면 아이콘 바뀌는거 늘 짜릿하다.) 2. index.html 에 html document 만들고 타이틀 이름 설정하기 하고 싶은 타이틀 넣고... 3. index.thml 속 부분에 style.css 설정해주고, 부분에 app.js 불러줍니다. 여기까지 셋업 완료입니다. 우리는 빈 웹 화면을 만들..