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

웹 그림판 만들기 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 불러줍니다. 여기까지 셋업 완료입니다. 우리는 빈 웹 화면을 만들..

여기서 말하는 사전교육이라 함은 본격적으로 빅데이터 엔지니어링을 배우기 앞서, 비전공자로서 배워야 할 기초적인 내용을 배우는 과정이다. 1주차 : 프론트엔드를 배우면서 여러가지 언어들을 가볍게 체험(?)해 보았고, GIt에 업로드도 해보았다. 2주차 : 백엔드 이해 & VS code 프로그램을 사용하면서 Data Collection & Data Visualization 기초를 배운다. 데이터를 수집하기 위해 파싱과 크롤링도 배운다. (말로만 듣던 크롤링을 내가~) 3주차 때 배울 내용은 파이썬을 통해 Numpy와 Pandas 사용법을 배우고 데이터를 분석하고 시각화하는 것을 배운다. 아래부터 2주차 과정 내용 (아... 다시 봐도 머리 아프다. 이번 주말엔 틈나는 대로 복습해야지.) 파이썬 프로그래밍 기..