지 구 여 행

Canvas API 기본 형태 Canvas API는 Javascript와 HTML element를 이용하여 그래픽을 그릴 수 있습니다. 요소는 그래픽을 위한 컨테이너 역할을 하며, 실제로 그래픽을 그리기 위해서는 Javascript를 사용해야 합니다. 주로 2D 그래픽을 그릴 때 사용되며 3D 그래픽에는 WebGL API를 사용합니다. HTML Javascript document.getElementById('canvas') 메소드는 'canvas' 문자열과 일치하는 id 속성을 가진 요소를 찾고, 이를 나타내는 canvas 객체를 반환합니다. HTMLCanvasElement.getContext(contextType) 메소드는 문서의 요소에 그래픽을 그리기 위한 방법 및 속성을 제공하는 객체를 반환합니다...

태그의 background에 image 삽입 1. 기본 형태 : background-image: url("이미지경로") 2-1. 이미지경로가 웹일 경우 예. background-image: url("https://images.pexels.com/photos/7008379/pexels-photo-7008379.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1") 2-2. 이미지경로가 (내 컴퓨터 폴더 내) 파일일 경우 예. background-image: url("img/1.png"); IMPORTANT ※ 배경화면으로 지정할 이미지파일 또는 이미지파일이 저장된 폴더는 반드시 css 폴더내에 위치해야 한다. 하나의 image로 배경화면에 꽉차게 출력 body { he..

노마드코더 - 바닐라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__ ..

정의 문자열 포맷팅 : 문자열 안에 어떤 값을 삽입하는 방법 [방법 1] % operator 포맷팅할 문자열이 많아지면 코드의 가독성이 떨어지기 때문에 권장하지 않는다. 포맷 코드 설명 예 %s 문자열 (string) 어떤 자료형의 값을 입력해도 % 뒤에 있는 값을 문자열로 자동 변경 %c 문자 1개 (character) %"3" 또는 %"산" (※ %3 와 같이 int 단독은 사용 불가능) %d 정수 (integer) %f 부동소수(floating-point) (간단하게) 소수 부분 %o 8진수 %x 16진수 %% % %d 포맷코드와 %를 같은 문자열 안에 입력할때, %를 출력하려면 %%을 입력 (위와 같은 특수한 경우가 아니라면 %만 입력) [방법 2] str.format 여러 문자열 사용시 가독성은..

문제 이해 딕셔너리 포맷팅 예제 실습을 하던 중 아래와 같은 오류가 발생하였다. invalid syntax 라는 오류 메시지(=틀린 문법)를 확인했지만 특별한 오류점을 찾지 못했다. 문제 해결 같은 문자열 안에 따옴표를 중복 사용하게 될 경우 오류가 발생 → 큰 따옴표("")와 작은 따옴표('')를 함께 사용하여 문법적인 오류를 해결 가능 위 코드의 입력 의도는, 전체 문자열안에 → 큰 따옴표(" ")로 묶는다. ① flower 딕셔너리 안의 color 이라는 key의 value값과 → 작은 따옴표(' ')로 묶는다. ② flower 딕셔너리 안의 name 이라는 key의 value값과 → 작은 따옴표(' ')로 묶는다. ③ flower 딕셔너리 안의 price 라는 key의 value값을 넣어 → 작은..