HTML

이벤트 드리븐 프로그래밍브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지하여 이벤트를 발생시킨다. 예를 들어, 클릭, 키보드 입력, 마우스 이동 등이 일어나면 브라우저는 이를 감지하여 특정한 타입의 이벤트를 발생시킨다. 이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. 브라우저는 사용자의 버튼 클릭을 감지해 클릭 이벤트를 발생시킬 수 있다. Click me!  이처럼 이벤트와 그에 대응하는 이벤트 핸들러를 통해 사용자와 에플리케이션은 상호착용하며 이런 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다. 이벤트 타입이벤트 타입은 이벤트의 종류를 나타내는 문자열이다. 아래의 MDN 문서에..

어트리뷰트어트리뷰트 노드와 attributes 프로퍼티HTML 문서의 구성 요소인 HTML 요소는 여러 개의 어트리뷰트를 가질 수 있다. HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공하는 HTML 어트리뷰트는 HTML 요소의 시작 태그에 어트리뷰트 이름과 값을 정의한다. 글로벌 어트리뷰트와 이벤트 핸들러 어트리뷰트는 모든 HTML 요소에서 공통적으로 사용할 수 있지만, 특정 HTML 요소에만 사용 가능한 어트리뷰트도 있다. HTML이 파싱될 때 요소의 어트리뷰트는 어트리뷰트 노드로 변환되어 요소 노드와 연결되며 어트리뷰트당 하나의 어트리뷰트 노드가 생성된다. 요소 노드의 모든 어트리뷰트 노드는 요소 노드의 Element.prototype.attributes 프로퍼티로 취득할 수 있으며, at..

Kaplay 라이브러리를 이용해 게임 기능을 구현했습니다. 웹 게임 만들기를 도와주는 Kaplay 라이브러리 사용Kaplay 라이브러리는 Web의 Canvas API를 기반으로 게임에 필요한 다양한 기능들을 지원해주는 라이브러리이다. KAPLAY, HTML5 Games library for JavaScript and TypeScriptKAPLAY is a JavaScript HTML5 game engine library that ma58cjdcns99.tistory.com 개발을 하던 도중 다른 페이지에 갔다가 다시 게임페이지에 돌아오니..... 에러가 발생했다...위의 자료를 보면 페이지 이동후 다시 게임을 플레이할 때, 비이상적인 속도를 갖으며 텍스트가 검은색으로 나타나는 에러가 발생한다. 원인을 두..

Canvas API란 Javascript와 HTML의 canvas 엘리먼트를 통해 웹에 그래픽을 그리기 위한 수단이며, 애니메이션, 게임, 그래픽 및 비디오를 처리하기위해 사용됩니다. 이번 프로젝트는 2D 웹 게임을 만드는 프로젝트 이기에 웹에서 그래픽을 구현하고 Javascript를 이용해 그래픽을 조작할 수 있어야 하기 때문에 Canvas API는 중요 기술이였다. 우선 React 기반에서 Typescript를 사용해 컴포넌트 및 기능 개발을 진행할 것이다. 1. useRef() 리액트 훅을 이용해 요소에 접근React의 함수형 컴포넌트에서 요소에 접근하기 위해서는 리액트의 useRef() 훅을 이용해 접근해야 한다.const GamePlaying = ({ canvasWidth, canvasHei..

우리가 몰랐던 월드 와이드 웹월드 와이드 웹이란?흔히 웹(Web)으로 불리는 월드 와이트 웹(World Wide Web, www)은 인터넷에 연결된 컴퓨터들이 서로 정보를 공유할 수 있고 정보에 접근할 수 있는 공간이다. 전 세계에 흩어저있는 정보들의 모습이 거미출 처럼 연결되어 있어 웹을 통해 정보를 빠르게 찾을 수 있다.예를 들어보자면, 우리들은 인터넷 세상에서 크리에이터들이 많은 영상들을 만들어 올려주는 유튜브에서 원하는 영상을 감상할 수 있으며 아마존, 쿠팡, 등의 이커머스 플렛폼에서 원하는 물건의 정보를 얻을 수도 있고 구매할 수 있다. 웹은 1989년 팀 버너스리 경에 의해 최초로 고안되었으며, 웹의 소스코드를 저작권 없이 무료로 공개하고 웹 표준을 관리하는 W3C를 개설하는 등 웹 생태계의 ..

1. 문서 객체 모델 DOM 1.1 DOM DOM은 Document Object Model 의 약어이며, 메모리에 객체로 웹 페이지 문서 구조를 표현하는 방법이다. XML이나 HTML로 작성한다. DOM은 프로그래밍 언어가 트리 형태인 DOM 구조에 접근할 수 있는 방법을 제공해 특정 노드(문서, 구조, 스타일 등)를 찾거나 수정, 제거, 원하는 곳에 삽입할 수 있다. 웹 브라우저는 DOM을 활용해 객체에 Javascript와 CSS를 적용한다. API (web or XML page) = DOM + JS (scripting language) DOM과 접근 방법에 대해 추가로 알아보기 위해 아래의 링크를 참고하자 DOM 소개 - Web API | MDN 이 문서는 DOM에 대한 개념을 간략하게 소개하는 문..