지 구 여 행

이미지 추가 / 텍스트 추가 / 파일 저장하기 이미지 추가하기 HTML Javascript const imageInput = document.querySelector("#image-file"); function onImageChange(event) { const file = event.target.files[0]; const fileURL = URL.createObjectURL(file); const image = new Image(); image.src = fileURL; image.onload = function () { ctx.drawImage(image, 0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); }; } imageInput.addEventListener("change", o..

그리기 기능 설정하기 선 두께 변경 / 색상 변경 / 그리기 / 채우기 / 지우기 마우스로 선 그리기 HTML Javascript const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); canvas.width = 300; canvas.height = 300; let isPainting = false; function startPainting() { isPainting = true; } function stopPainting() { isPainting = false; } function onMove(event) { if (isPainting) { ctx.lineTo(event.offsetX, event.off..

노마드코더 - 바닐라JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co Javascript on the browser document(object) : (객체로써) 웹페이지 자체를 의미 - javascript는 document 객체를 통해 HTML에 접근할 수 있다. 코드 예제 HTML에서 바라본 관점 Javascript에서 바라본 관점 ▼ document(object)의 property로 접근 ▼ javascript로 HTML 변경 가능 HTML element in Javascript - 1 - ..

노마드코더 - 바닐라JS로 크롬 앱 만들기 https://nomadcoders.co/javascript-for-beginners/lobby 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co Introduction Roadmap HTML, CSS > Javascript > (Framework) React Native > Electron ■ React Native : 안드로이드/ios 앱 개발 ■ Electron : 데스크탑 앱 개발 ■ Socket.io : 채팅을 포함한 실시간 기능 포함 가능 ■ ml5.js : 머신러닝 모델 생성하는 웹 사이트를 구축 -> 훈련가능 How to load Javascript in H..

노마드코더 - 코코아톡 클론코딩 https://nomadcoders.co/kokoa-clone/lobby 코코아톡 클론 코딩 – 노마드 코더 Nomad Coders HTML, CSS, Github nomadcoders.co Advanced CSS Transitions 기본적으로 어떤 상태에서 다른 상태로의 '변화'를 애니메이션화하고 그 속도를 조절하는 방법 - Transition은 상태(state)가 없는 요소에 입력해야 한다. (예를 들어, a → a:hover 상태로의 변화 속도를 변경하려면 a 요소 안에 Transition을 입력해야한다.) - Transition에서 2개 이상의 속성에 대해 변화를 적용하려면 쉼표(,)로 구분 - Transition이 정상적으로 작동하려면, 요소와 요소:상태에 각각..

노마드코더 - 코코아톡 클론코딩 https://nomadcoders.co/kokoa-clone/lobby 코코아톡 클론 코딩 – 노마드 코더 Nomad Coders HTML, CSS, Github nomadcoders.co Settings How to add CSS to HTML 1. Inline CSS : 같은 HTML파일에 HTML코드와 CSS코드 위치 → 항상 안에 태그 위치 2. External CSS : HTML파일로부터 독립된 CSS파일 생성 → 다른 CSS파일을 불러와서 사용 가능 (선호) (1) 폴더에 css 파일 생성(예:styles.css) (2) 태그를 이용하여 CSS파일 연결 * href (hypertext reference) : CSS 파일명 + css (확장자) * rel : 해..

노마드코더 - 코코아톡 클론코딩 https://nomadcoders.co/kokoa-clone/lobby 코코아톡 클론 코딩 – 노마드 코더 Nomad Coders HTML, CSS, Github nomadcoders.co Settings ■ HTML (HyperText Markup Language) : 브라우저에게 웹사이트의 content가 어떻게 구성되어 있는지 설명 * markup means 'content' ■ CSS (Cascading Style Sheet) : 브라우저에게 content들이 어떻게 보여져야 하는지 설명(디자인과 스타일을 위한 언어) ■ JavaScript : 동적인 웹사이트를 만들어주는 프로그래밍 언어 ■ VSC (Visual Studio Code) : 텍스트 편집기 (note..

실습 예제 : +) 호출된 모듈들 (패키지) : ⊙ 모듈(module) : 함수나 변수 또는 클래스를 모아놓은 파일 (예: main.py) ⊙ 모듈 직접 실행 : 직접 모듈 내에서 실행하는건지, 외부에서 모듈을 호출해서 실행하는 건지 구분해서 코드 작성 가능 if __name__ == "__main__": print("Japan 내부에서 모듈을 직접 실행하는 경우입니다.") else: print("Japan 외부에서 모듈을 호출하는 경우") ▲ 의미: ① 직접 모듈내에서 실행할 경우 if문 실행 ② 대화형 인터프리터나 외부에서 모듈을 호출해서 실행할 경우 else문 실행 ※ __name__ : 파이썬이 내부적으로 사용하는 특별한 변수 이름 대화형 인터프리터나 외부에서 모듈을 호출할 경우 __name__ ..

⊙ 패스 (pass) : pass / continue / break 비교 이름 pass continue break 정의 실행할 코드 없음; 아무런 동작을 실행하지 않고 다음 순서의 코드로 넘어감 다음 순서의 loop으로 이동 loop를 중단할 때 사용 사용처 빈 함수/클래스 생성 for문에서 사용 for문에서 사용 예제 코드 def game_over(): pass def game_start() print("게임이 시작되었습니다.") game_over() game_start() for i in [1,2,3,4]: if i==3: continue print(i) for i in [1,2,3,4]: if i==3: break print(i) 출력값 게임이 시작되었습니다. 1 2 4 1 2 ⊙ super() :..

⊙ 클래스(Class) : 하나의 틀 / 서로 연관이 있는 변수와 함수의 집합 예) 붕어빵 틀=Class(클래스) / 붕어빵 하나=Object(객체) 클래스를 통해 생성되는 객체 = 인스턴스(instance) 예제1) 예제2) ⊙ __init__() : '인스턴스'가 생성될 때 = 클래스가 실행될 때, 반드시 맨 처음 호출되는 특수 함수 (how Class initiates) 반드시 첫번째 인수로 self를 지정 → 함수값을 멤버변수와 함께 외부에서도 사용 가능케 함 ⊙ 멤버변수 : 클래스 내 정의된 변수 → 클래스 외부에서 변수가 확장되어 사용가능 예) self.name , self.hp, self.damage ⊙ (인스턴스)메소드 : 예) def attack() 또는 def attacked()등 클래..