본문 바로가기

전체 글227

[WEB] HTML/CSS/JS로 게임 만들기 1 오늘은 HTML / CSS / JS로 게임을 만들어 볼 것이다. 게임은 어렸을 때 많이 했던 갤러그이다. 이 게임은 적군이 아래로 다가오는데 다가오는 적군에 총을 쏴서 없애는 게임이다. 물론 위 게임처럼 완벽하게 만들 수는 없겠지만 최대한 비슷하게 만들어볼 예정이다. 1. 캔버스 세팅하기 JS에서 캔버스를 생성해 주어서 게임을 진행할 화면을 세팅해줘야 한다. canvas(캔버스) - HTML문서 내부에 그림을 그릴 수 있는 일종의 컨테이너 요소이다. JS를 통해 애니메이션과 이벤트를 처리할 수 있다. //캔버스 세팅 let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); // 2d로 보여줄 것이다. canvas.w.. 2022. 9. 13.
[Database] 데이터베이스(Database, DB), DBMS란? 데이터베이스(Database, DB)란? 데이터베이스(Database) - 데이터베이스는 조직에 필요한 정보를 얻기 위해 논리적으로 연관된 데이터를 모아 구조적으로 통합해 놓은 것이다. 쉽게 말하자면 '데이터의 집합', '데이터의 모임'이다. 이러한 데이테베이스는 일반적으로 데이터베이스 관리 시스템(DBMS)에 의해 제어된다. 이러한 데이터베이스는 일상생활 거의 모든 곳에서 사용이 되고있다. 일상생활에서 사용되는 데이터베이스 학생 데이터 ▶ 학사 데이터베이스 신용카드 데이터 ▶ 은행 데이터베이스 병원 데이터 ▶ 건강보험 데이터베이스 쇼핑몰 데이터 ▶ 쇼핑몰 데이터베이스 문헌 정보 데이터 ▶ 도서관 데이터베이스 파일 처리 시스템 데이터베이스, 데이터베이스 관리 시스템이 등장하기 전에는 이 역할을 파일 처리.. 2022. 9. 9.
[IoT] 사물인터넷(IoT)의 정의 사물인터넷(IoT : Internet of Things) ISO/IEC JTC 1/SWG 5에서 정의한 사물인터넷(IoT) 사물, 사람, 시스템 및 정보 자원이상호 연결된 인프라와 지능형 서비스를 통해물리적 및 가상 세계의 정보를 처리하고 대응할 수 있는 것 https://en.wikipedia.org/wiki/ISO/IEC_JTC_1/SWG_5 사물인터넷을 조금 더 쉽게 말하자면, - 센서를 내장하고 있는 사물들이 서로 연결되어 각각의 사물들이 제공하던 것 이상의 새로운 가치를 제공하는 방식이다. 인터넷(Internet) 우리는 인터넷의 정의를 컴퓨터들이 연결된 네트워크라고 잘 알고 있다. 하지만 사물인터넷을 이해하기 위해서는 우리가 평소 알고 있던 인터넷의 정의를 다르게 바라봐야 한다. 사물인터넷에서.. 2022. 9. 7.
[WEB] 반응형 nav바 만들기(HTML, CSS, JS) 1. 틀 잡아주기 클래스 명이 nav-bar인 태그 안에 logo와 메뉴, sns을 넣어주기 위해서 각각을 div와 ul태그로 묶어 틀을 완성시켜준다. 2. 상세하게 UI 만들어주기 IT 정복가 Home Weddings FAQ Gallery .nav-logo에는 웹페이지의 로고와 웹 사이트 명을 작성해준다. .nav-menu에는 메뉴를 보여준다. .nav-sns에는 이 웹 페이지의 sns를 보여준다. (아직까지 못생김) 3. CSS로 꾸며주기 body{ margin: 0; padding: 0; } a{ text-decoration: none; color: white; } a:hover{ color: white; } li{ list-style: none; } .nav-bar{ display: flex; j.. 2022. 8. 23.
[JS] ES6 문법을 알아보자 우선 ES6의 ES는 ECMAScript의 약자이며 자바스크립트의 표준, 규격을 나타내는 용어이다. 또한, 6는 버전을 의미하며 ES6는 2015년에 나타났다. 이 업데이트로 자바스크립트의 많은 부분이 변하였고, 편리한 기능이 생겨났다. 1. const / let의 등장 const와 let이 등장하기 전에는 변수를 선언 할 때 var만이 존재했다. 하지만 var에는 문제가 있었고, 이를 해결하기 위해 ES6를 통해 const / let을 추가하였다. const: 객체와 함께 사용할 때를 제외하고 변경이 불가능한 변수 (상수) let: 새로운 값을 받을 수 있고, 재할당을 할 수 있다. const와 let이 등장했기때문에 *var 사용을 피하는 것이 좋다. ( *변수 선언 let, var, const ) .. 2022. 8. 12.
CSS 단위 이해하기(%, px, em, rem, vw, vh의 차이) CSS에는 %, px, em, rem, vw, vh등의 많은 단위들이 있다. 오늘은 이 단위들의 차이점을 알아보자 사용할 HTML class가 a인 div 태그가 b인 div 태그를 감싼 모습이다. px px(픽셀)은 CSS의 가장 기본적인 크기 단위이다. 많은 사람들이 px을 사용하고 있지만 px은 상대적이지 않고 절대적인 단위이기 때문에 반응형 웹을 만들때 불편한 점이 있을 수 있다. .a{ display: flex; justify-content: center; width: 300px; height: 300px; background-color: gray; } .b{ width: 100px; height: 100px; background-color: beige; } css를 이렇게 작성한다고 하면 웹페.. 2022. 8. 10.
[JS] 반복문 for문, while문 만약 1부터 10까지 출력을 한다고 했을 때 반복문이 없었다면 console.log(1) console.log(2) console.log(3) . . . console.log(10) 이런 식으로 괜한 노동을 했을 것이다. 이런 문제를 해결하기 위해 자바스크립트에는 많은 반복문들이 있다. for문, for-in문, for-of문, while문, do-while문 등등.. 오늘은 이 반복문들 중 가장 많이 쓰이는 for문, while문에 대해서 알아 볼 것이다. 1. for문 for문은 상당히 많이 쓰이는 반복문으로 구조는 for(변수 선언; 변수 범위 지정; 증감식) { 반복하고 싶은 코드 } 로 이루어진다. 1부터 10까지 출력을 한다고 했다면 for(let i = 0; i < 10; i++){ cons.. 2022. 8. 8.
[JS] 숫자 맞추기 게임 만들기! 숫자 맞추기 게임 - 컴퓨터가 랜덤한 숫자를 생성하면 그 숫자를 사용자가 맞추는 게임 필요한 기능 1. 약간의 HTML과 CSS 사용 2. 컴퓨터가 랜덤 번호를 지정한다. 3. 사용자가 예상 번호를 입력한 후 '확인' 버튼을 누른다. 4. 만약, 랜덤번호를 맞추면 맞췄다고 알려준다. 5. 랜덤번호 유저번호일 경우, UP 출력 7. '초기화' 버튼을 누르면 게임이 리셋된다. 8. 기회는 5번 주어지며 5번의 기회를 다 쓰면 게임이 끝난다. 9. 유저가 1~100 범위 밖의 숫자를 입력하면 알려주고, 기회를 감소시키지 않는다. 10. 이미 입력한 숫자를 또 입력하면 알려준 후 기회를 감소시키지 않는다. 1. 컴퓨터가 랜덤 번호를 지정하는 방법 let co.. 2022. 8. 5.
[JS] 조건문인 if문, switch문, 삼항 연산식에 대해 알아보자 우리는 프로그래밍을 할 때 굉장히 많은 케이스에 마주하게 될 것이다. 이 변수가 만약에 ~라면? 만약에 그게 아니고 이거라면? 이런 식의 경우 말이다. 그럴 때 사용하는 것이 if문이다. if문의 대략적인 구조를 보면 if( ) { } 이렇게 되어 있다. ( ) 안에는 true값, false 값 둘 중 하나의 값만 들어갈 수 있다. 또한 { }는 ( )안의 값이 true일 때만 실행을 한다. 만약 ( )의 값이 false라면 { }를 생략하고 if문 자체를 빠져나오게 된다. 예를 들어 let a = 1 if(a == 1) { console.log("true입니다.") } 이런 식이다. 위에서 변수 a를 1로 선언해 놓고 if ( a == 1 )을 해 주었다. a는 1이 맞기 때문에 if ( a == 1 .. 2022. 8. 4.

티스토리툴바