Devjo의 코딩

보호되어 있는 글입니다.

보호되어 있는 글입니다.

화면 중앙에 버튼을 만들고 싶을 때가 있다 정가운데로 정렬할 수 있는 방법들을 생각해보았다 가로정렬과 세로정렬... 결국 난장판이 되었다 display속성을 꼭 사용하지 않아도 된다: position과 z-index 속성의 활용 position은 요소를 겹칠 때 사용하는 속성이다 하지만 어느 때는 옮겼지만 뒤로 가버리는 사태가 발생한다 겹칠 때 보여줄 우선순위를 정해주는 속성이 바로 z-index이다 방법은 다음과 같다 1) position: absolute; //절대 위치로 변환하고 2) top: 50%; left 50%; //퍼센트로 중앙 배치를 실현한다 3) z-index = 1; //우선순위를 1순위로 만든다 *flex, table등 많지만 여기선 다루지 않는다 .first{ background-..

게임개발의 기초편에서 다음과 같이 draw내부에서 사용되는 함수들을 알아보았다 .getContext의 함수 (draw내부에서 사용) 색 정하기 fillStyle = 'color'; name, rgb(), #HEX 사각형 그리기 테두리만 존재 .strokeRect(x,y,width,height) x,y = 좌표 width, height = 크기 채워진 사각형 .fillRect(x,y,width,height) 사각형 지우기 .clearRect(x,y,width,height) 패스로 그리기 패스 열기 .beginPath(); 형식 ctx.beginPath(); 패스 시작점 .moveTo(x, y); 연결하기 .lineTo(x,y); 채우기 .fill();v *게임 개발의 기초: https://devyoseph..

2021 10 24 업데이트 HTML 세팅 1) HTML의 기본 골격을 사용한다. html / head /body 2) meta태그는 속성을 세가지를 사용한다 charset / http-equiv / name ="viewport" 3) CSS와 js연결. script 속성으로 type="module"을 추가함으로 import와 export를 이용해 더욱 객체화한다 4) canvas를 HTML에 만들지 않는다 는 서로 호환성이 다른 경우에 인터넷 익스플로러(IE)버전 중 가장 최신으로 보여주게 해준다. 쿼크모드라고도 한다 meta viewport는 애플이 디바이스 화면크기에 따라 크기를 조절하기 위해 만들었다. content 내에 설정값을 적어주며 쉼표(,)로 구분한다. width = device-widt..

1. 준비하기 CSS와 Javascript에 연결하기 HTML: 태그 canvas는 width와 height속성을 사용할 수 있는 요소로 드로잉 영역을 생성한다. 간단한 게임을 만들 때 게임이 작동하는 공간으로 사용된다. HTML에 요소를 만들었으니 자바스크립트에도 연결해주어야 한다 var canvas = document.getElementById("canvas"); 는 처음에 비어있는 도화지와 같다. 그림을 그릴 연필과 크레파스(도구)를 같이 불러와야 한다 .getContext('2d'); 메소드를 통해 2차원 랜더링의 함수(도구)에 접근할 수 있다 var ctx = canvas.getContext('2d'); 캔버스의 크기를 정해준다 canvas.width=window.innerWidth - 100;..

input 사용자의 입력값을 받는다 받는 방식이 다양하기 때문에 type속성으로 분류한다 Javascript 입력하는 곳이기에 focus 관련한 이벤트들이 존재한다 input 태그 다루기 input.value 입력된 값을 반환 HTML input type=" " text 텍스트를 입력하는 창 placeholder="미리 입력" password 비밀번호 입력하는 창 autofocus : 자동커서 button 일반 버튼 size="20" 입력폼 길이 checkbox 체크박스 maxlength="10" 글자 수 제한 hidden 사용자에게 안보이지만 서버 전송 list="리스트" 미리 리스트 생성 Javascript input 관련 이벤트 (e.type) focusin 요소에 포커스가 되었을 때 focusou..

window.scrollY를 활용하자 어느 일정 구간을 스크롤하면 '버튼'이 만들어지도록 한다 상수를 정하고 window.scrollY가 그 값을 넘으면 버튼이 생기는 방식이다 const STANDARD = 40; if (window.scrollY > STANDARD) { // 스크롤이 40px을 넘었을 때 toTop.classList.add('go_top'); //go_top이라는 버튼 생성 lastScrollY를 통해 스크롤의 방향을 추적한다 lastScrollY는 이전 내가 스크롤한 기록이다 그렇다면 현재 스크롤의 위치와 비교해서 이용자의 스크롤 방향을 알아낼 수 있다 스크롤을 내릴 때 위 메뉴바가 사라지고 스크롤을 올릴 때 위 메뉴바가 뜨도록 만든다 if (window.scrollY > lastS..

setTimeout(함수명, 밀리초); *주의점: setTimeout이 실행시키는 함수로 클래스 값을 지울 때 e.target이 아닌 querySelector사용 밀리초 후에 함수를 실행한다 function event2(){ document.querySelector('.change').classList.remove('change'); //event2는 change 클래스를 찾아 change를 지운다 } function event1(e){ e.target.classList.add('change'); setTimeout(event2,500); //500밀리초 후에 event2 실행 } 마우스 버튼 이벤트: MouseEvent.button 마우스 왼쪽 버튼 = 0 마우스 휠 = 1 마우스 오른쪽 버튼 = 2 ..

element.addEventListener(event, handler); onclick 이벤트는 새로운 이벤트를 할당할 때 덮어씌워지는 단점이 있다 const btn = document.querySelector('#btn1'); btn.onclick = function(){ console.log("Hello"); } btn.onclick = function(){ console.log("Bye"); }//btn버튼의 결과값은 Bye가 나온다 이런 문제를 줄이기 위해 addEventListener를 사용한다 function event1(){ console.log("Hello"); } function event2(){ console.log("Bye"); } btn.addEventListener('click'..