본문 바로가기

전체 글

 (432)
[CSS] position: absolute인 요소를 중앙 정렬하기 코드 element { position: absolute; left: 50%; transform: translateX(-50%); } 설명 1. left : 50% - 화면의 가로 수치에서 절반 만큼 위치를 이동한다 2. transform: translateX(-50%) - 요소의 가로 수치의 절반만큼 마이너스 이동한다
[생활코딩: JavaScript] 3. 데이터타입 - 문자열과 숫자 최신 ECMAScript 표준은 다음과 같은 7개의 자료형을 정의한다. 기본 자료형 (Primitive) 인 여섯가지 데이터 타입 Boolean Null Undefined Number String Symbol (ECMAScript 6 에 추가됨) 별도로 Object 도 있다 자바스크립트의 자료형 모든 프로그래밍 언어는 내장 자료형이 있지만, 종종 이러한 내장 자료형은 언어마다 다르다. 이 문서에서는 자바스크립트의 내장 자료형과, 내장 자료형에서 사용할 수 있는 속성들에 대해 알� developer.mozilla.org Number +, -, /, * 등 연산자를 이용해 연산할 수 있다. String "큰따옴표" 혹은 '작은따옴표'로 감싼다. 메소드 .length() : 문자열의 길이를 출력 .touppe..
[생활코딩: JavaScript] 2. HTML과 JavaScript의 만남 script 태그 기본적으로 JavaScript는 HTML위에서 동작하는 언어이다. 따라서 HTML언어 위에 다른 언어인 JavaScript를 함께 사용하는지 알아보자. html hello world 1+1 이벤트 button : onClick 이벤트 Console을 이용하여 자바스크립트 파일을 만들지 않고도 자바스크립트를 실행할 수 있다. ex) 개발자 모드 > Elements 에서 esc한번 누르면 아래에 console이 뜬다. 이곳에 자바스크립트로 작성한 코드를 입력하게 되면 현재 웹페이지 정보를 불러와서 자바스크립트를 실행시킬 수 있다. 즉, 이미 만들어진 웹사이트에 필요에 따라 간단한 자바스크립트 코드를 작성하여 문제를 해결할 수 있다.
[생활코딩: JavaScript] 1. Intro html은 정적이다. 하지만 사람들은 동적으로 사용자와 상호작용할 수 있는 웹페이지를 만들고 싶었다. 이런 배경에서 탄생한 것이 JavaScript이다. 목적 웹페이지의 야간모드/주간모드 버튼을 통해 모드를 변경한다. - 사용자가 누르는 버튼으로 인해 웹페이지의 상태가 변화 (상호작용) - 개발자 모드 > Elements의 코드가 변화 ex)
[생활코딩] CSS 배우기 1. CSS 등장 이전의 상황 HTML이 등장하여 문서를 만들 수 있게 된 이후, 많은 불평이 있었다. 문서의 글꼴 변경하기, 문자의 크기와 색상 변경하기, 가운데 정렬하기, 문서에 배경 색상 넣기, ... 웹페이지를 아름답게 꾸미기 위해 사람들은 두 가지 갈림길에 들어섰다. 쉽지만 한계가 있는 해결책 어렵지만 근본적인 해결책 즉, HTML에 디자인과 관련된 새로운 태그를 추가하는 것과 디자인에 최적화된 새로운 언어를 만드는 것 중에서 고민했다. 둘 중에 전자의 방법이 더 쉬울 것이다. 하지만 전자의 방법을 해본 결과, 한계를 깨닫고 후자의 방법을 택하기로 한다. 이렇게 탄생한 것이 CSS이다. 전자의 방법으로 추가된 태그가 이다. 이 글 이후로 CSS에 대해 배울 때에는 모두 기억을 지우면 된다. 만약..
[생활코딩] HTML 배우기 기획 이러한 형태의 웹 사이트를 만들 것이다. 수업의 전체 제목 왼쪽: 수업의 목차. 목차에는 링크가 걸려 있고, 이 링크를 클릭하면 해당하는 콘텐츠가 오른쪽에 표시된다. 오른쪽: 상단에 제목이 표시되고, 본문에는 제목에 대한 자세한 설명이 표시된다. 1. 코딩과 HTML 왼쪽 오른쪽 결과 원인 기계가 하는 일 사람이 하는 일 사람이 하는 일 (원인) 코드 (부호, 신호의 의미) 소스 (원천이라는 뜻) 컴퓨터 언어 (약속이라는 의미에서 언어) 기계가 하는 일 (결과) 애플리케이션 (앱) 응용 프로그램 프로그램 웹에서 결과를 웹페이지, 웹페이지가 모인 것을 웹사이트, 기능이 많으면 웹애플리케이션(웹앱)이라고 한다. 즉, 원인인 코드를 통해 결과를 만든다는 것이 코딩을 이해하는 핵심이다. 코드를 작성하는 언..
빙고 게임 만들기 지금껏 배운 express, socket, pug를 이용하여 빙고 게임 웹 애플리케이션을 만들어보자. 온라인 빙고 게임 5 x 5 칸 내에서 사용자가 번갈아 가면서 숫자를 부르고, 해당 숫자를 지워 가로, 세로, 대각선으로 먼저 빙고를 만드는 사람이 이기는 게임. 입력이 중요한 게 아니므로 무작위로 숫자가 입력되도록 하며, 웹 소켓에 익숙해지는 것에 중점을 두고자 게임의 승부를 판가름 짓는 요소는 구현하지 않았다. 또한 유저 이름을 입력받아 설정하게 할 수도 있으나, 여기서는 유저 이름을 url에 바로 입력받도록 하였다. 주요 기능 현재 접속 중인 유저 이름 출력 한 명이 게임을 시작하려하면 불가능하게 막기, 알림 출력 게임 진행을 위한 턴 넘기기 자기 턴이 아닌 경우 진행 불가능, 알림 출력 숫자가 선..
socket.io를 이용한 채팅 구현 주요 기능 접속하면 알림 출력 닉네임 변경 가능 닉네임 변경했을 때 알림 출력 유저가 떠났을 경우 알림 출력 express-generator를 이용해 새 프로젝트를 생성한 후, 이동하여 채팅을 만드는 데 필요한 socket.io, Pug를 설치한다. express socket-chat cd socket-chat && npm install npm install link socket.io npm install pug 우선 기본적으로 같은 페이지에 접속한 사람들과 채팅이 가능해야 한다. 추가 기능으로, 닉네임 변경을 하거나 새로운 사람이 접속했을 때, 접속이 끊어졌을 때도 채팅창에 알림 문구가 뜨도록 만들어보자. 또한 일반 HTML이 아닌 Pug를 이용해 만들어보자. 또 채팅창의 모양을 결정하는 스타일 부분도..
반응형

티스토리툴바