자바스크립트로 빙고게임 만들기 이틀차에는 자바스크립트를 이용해 빙고게임을 만들었다! 😆 ※대각선은 지원하지 않음※ 선택한 칸의 색은 노란색으로 바뀌며 가로줄과 세로줄이 모두 채워지면 빙고 = 해당 줄의 색이 분홍색으로 변한다. 아래 링크로 들어가면 직접 실행시킬 수 있으며 밑의 소스 코드 안 태그의 텍스트를 수정하여 새로운 빙고판을 생성할 수 있다. 빙고게임하러가기↓↓↓ https://shinye-developmentdiary.tistory.com/16 JavaScript Bingo game - 자바스크립트로 만든 빙고 게임 (색칠하기) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 shinye-developmentdiary.tist..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

자바스크립트를 사용해서 핑퐁게임을 만들어봤다! 처음이라 미흡한 부분이 많지만 결과물이 잘 나와서 아주 만족~😎 앞으로 더 열심히 공부해서 퀄리티 높은 작업물을 만들 수 있도록 노력해야겠다 !! 핑퐁게임 하러가기 ↓↓↓ https://shinye-developmentdiary.tistory.com/14 JavaScript ping pong game - 자바스크립트로 만든 핑퐁 게임 공 튕기기 게임 #can{ background-color: rgb(224, 216, 217); display: block; margin: 0 auto; } var canvas = document.getElementById('can'); var ctx = canvas.getContext('2d'); var x = canvas.wi..

- index는 웹 사이트 홈페이지의 기본 파일 이름이다. 파일명을 index.html으로 작성하는 것이 관례임 - 첫 프로그래밍의 실습은 "hello world" 출력으로 시작하며 이는 오래된 관행이다. HTML 태그 요소 태그는 여는 태그와 닫는 태그로 이루어져 있으며 닫는태그 안에는 /(슬래시)가 들어간다. 닫는 태그 없이 자체적으로 이루어진 태그는 '단일 태그' 혹은 '자체 닫기 태그(self closing tag)'라고 부른다. 종류: input, img, link, br, hr 등이 있다. HTML 태그 특징 모든 태그는 inline요소 또는 block요소의 성질을 가지고 있다. 요소 inline block 특징 - 영역을 생성할 수 없는 태그로 컨텐츠 크기만큼만 영역으로 가질 수 있다. - ..

비주얼 스튜디오코드(VSCode) 마이크로소프트사에서 제공하는 윈도우, 맥os에서 사용할 수 있는 멀티플랫폼 개발 프로그램이다. 코드 비교 Visual Studio Visual Studio Code 이용료 유료 무료 (개인, 기업 모두) 제공 기능 코드 자동완성, 디버거, DB통합, 서버설정 등 제공 코딩, 컴파일, 디버깅 기능 제공 확장 프로그램 사용자가 원하는 기능을 추가로 설치하여 더욱 편리하게 코딩할 수 있도록 도와주는 설치형 프로그램이다. -추천 프로그램 6가지 1. Korean Language Pack for Visual Studio Code 기본 언어가 영어로 설정돼 있는 vscode에 한글 확장팩을 설치하여 에디터를 쉽게 사용할 수 있도록 해준다. 2. Live Server 작성한 코드를 ..

* 주석: 컴퓨터가 인식하지 못하며 개발자에게 설명을 제공하는 글이다. ctrl + / 키를 사용해 주석처리할 수 있다. 언어 HTML CSS JavaScript 주석 형태 /**/ 단일주석 : // , 여러줄: /**/ * 태그: 꼬리표라는 뜻으로 웹 문서에 정보를 정의해주는 형식이다. 태그로 데이터를 감싸 데이터 형식과 의미를 브라우저에게 알려준다. 여는 태그와 닫는 태그가 존재하며 닫는 태그는 와 같은 형태로 작성한다. 참고하면 좋은 사이트 1. https://developer.mozilla.org/ko/2. MDN Web Docs The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, an..

디자이너가 코딩을 배우게 되면 개발자와 협업할 때 원활하게 의사소통이 가능하며 이는 더 좋은 결과물로 이끌어준다. 즉 일을 잘하는 디자이너로 만들어준다. 웹 코딩은 파이썬, c언어 , 자바처럼 결과물이 텍스트로 보여지는 것과 달리 비주얼 하게 보이기 때문에 더 쉽게 재미를 느낄 수 있다. 0. 코드 에디터 설치 1. 웹개발 언어별 특징 2. 코딩 목표 세우기 3. 웹과 html 3-1. 웹 페이지 0. 편집 도구 (vs code) = 코드 에디터 설치 코드는 메모장으로 작성해도 되나 효율적으로 작성하기 위해 설치형 에디터인 visual studiocode를 다운로드 한다. vscode는 현업에서 가장 많이 사용하는 에디터이며 코딩에 필요한 기능을 제공한다 (자동완성 등) 에디터 종류: 아톰, 비주얼 스튜..

제이쿼리(JQuery)란 오픈소스 기반의 자바스크립트 라이브러리를 의미한다. 라이브러리는 SW의 구성요소 중 한 가지로 API를 바탕으로 대상 환경(플랫폼)에서 바로 실행될 수 있도록 모듈화 된 프로그램의 모음이다. 혼자서 동작하는 완전한 프로그램이 아니라 특정한 부분의 기능만을 수행하도록 제작되었으며 컴파일 기계어의 형태로 존재한다. 1. javascript , JQuery의 차이점 자바스크립트 : 선택자의 설정, 스타일 등 기존 명령이나 코드 작성이 달라 초반 진입장벽이 높다는 단점이 있으며 내장형 스크립트를 사용한다. 제이쿼리 : 자바스크립트의 진입장벽을 낮추기 위해 만들어졌으며 cdn방식이나 외부 연결방식으로 파일을 연결해 사용한다. (호환성 부분은 1.12.4 버전이 가장 안전함) [사용하는 이..