NodeJS Express 웹서버 WebserverNode JS v7 Install$ curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash - $ sudo apt-get install -y nodejs $ sudo apt-get install -y build-essential $ which node$ node --version $ sudo npm install npm -g Express를 활용한 WebServer$ mkdir webserver$ cd webserver$ npm init $ vi main.js var http = require('http');var express = require('express');var webserver = expr..

음성인식 STT 한글 음성인식 Annyang API 구글 클라우드 스피치 음성인식 Google Cloud Speech API 사용법 http://jeongchul.tistory.com/544 한글 음성인식 웹 사이트를 만들어봅시다.음성인식으로 대표적으로 annyang API가 있습니다. 깃허브 사이트는 다음과 같습니다.https://github.com/TalAter/annyang 간단히 테스트 demo 사이트를 만들어봅니다. annyang.start({ autoRestart: false, continuous: true }) var recognition = annyang.getSpeechRecognizer(); var final_transcript = ''; recognition.interimResults..

Javascript 02 Javascript 객체 및 이벤트 처리 JavaScript의 객체1. JavaScript 객체의 개요JavaScript의 객체JavaScript는 객체기반의 스크립트 언어로 JavaScript를 이루고 있는 거의 모든 것들이 객체로 존재하며, 자신의 정보를 가지고 있는 독립적인 주체입니다. 또한 객체는 키와 값으로 이루어졌으며, 중괄호로 객체를 생성하고, 객체의 속성 값에 접근할 때는 키로 접근합니다. 만약 객체의 키로 식별자가 아닌 문자를 사용했을 때는 무조건 대괄호를 사용하여 접근합니다. 그럼, 제시된 객체를 사용한 소스코드를 확인해 보세요. 속성과 메소드에 대해 살펴보도록 하겠습니다. 속성은 객체 내부에 있는 값을 의미하며 객체의 속성은 모든 형태의 자료형을 가질 수 있습..

Javascript 01 Javascript의 개요 JavaScript의 개요1. JavaScript의 개요JavaScript의 개요여러분은 인터넷을 하다가 JavaScript를 설치하라는 메시지를 보신적 있으신가요? JavaScript는 웹 브라우저에서 많이 사용하는 프로그래밍 언어로 웹 브라우저는 HTML 문서를 처리할 수 있는 응용 프로그램 이외에 Script를 해석할 수 있는 엔진을 가지고 있습니다. JavaScript는 본래에 넷스케이프의 Brendan Eich에 의해 모카라는 이름으로 만들어졌으며, 이후에 넷스케이프가 썬 마이크로시스템과 공동 개발하면서 JavaScript라는 명칭으로 변경되었습니다. 여러분이 많이 알고 있는 Java와는 다른 언어로 Java는 썬 마이크로시스템에서 개발한 객체..

CSS 05 CSS3 좌표계 CSS3 좌표계1. 레이아웃 위치의 개념CSS3 좌표계레이아웃 위치에 대해 살펴보도록 하겠습니다. 레이아웃 위치는 절대 좌표와 상대 좌표로 구분할 수 있습니다. 먼저 절대 좌표는 엘리먼트가 브라우저의 페이지 안에 표시되는 방법을 지정하는 것으로서 다음과 같이 position : absolute;으로 사용합니다. 절대 좌표는 브라우저 왼쪽 상단이 기준점이 되며, 오른쪽 하단의 지정된 좌표로 이동하여 표시됩니다. 다음으로 상대 좌표에 대해 알아보겠습니다. 상대 좌표란 현재 자기 위치에서 지정된 상대값 만큼 이동시키는 것으로서 원래 위치가 표시될 위치가 기준점이라는 것이 중요합니다. 상대좌표는 다음과 같이 position : relative;으로 사용하여 원래 있던 엘리먼트 위치가..

CSS 04 CSS3 선택자 CSS3의 선택자 개요1. CSS 선택자(Selector)란?CSS3의 선택자 개요HTML5 웹 문서에 스타일을 입힌다는 것은 결국 원하는 HTML 엘리먼트를 선택해서 그림 그리듯 예쁘게 꾸미는 것을 의미합니다. 그리고 HTML 엘리먼트를 꾸미는 것이 바로 CSS 입니다. 모든 CSS는 선택자의 조합으로 구성 되었는데, CSS 선택자는 속성이 어디에 있는지를 표시 해줍니다.CSS를 활용하기 위해서는 우선 선택자에 대해 이해해야 합니다. 선택자라는 이름은 속성이 어디에 적용되는지 표시한다고 해서 이름 붙여졌으며 앞서 말했듯이 모든 CSS는 선택자의 조합으로 구성이 되어있으며 그 종류가 매우 다양합니다. 그럼 선택자의 작성시 유의사항 대해 알아보겠습니다. 먼저 선택자의 이름을 지..

CSS 03 CSS 레이아웃 및 HTML5 적용 CSS3의 레이아웃1. 블록 레벨 요소와 인라인 레벨 요소CSS3의 레이아웃배치와 관련된 스타일에 대해 알아보겠습니다. 웹 문서에 삽입되는 요소들은 크게 블록 레벨 요소와 인라인 레벨 요소로 나눠집니다. 먼저 블록 레벨 요소란 태그를 사용하여 요소를 삽입했을 때 혼자서 한 줄을 차지하는 요소를 말합니다. 따라서 블록 레벨 요소는 해당 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없습니다. 이와 같은 블록 레벨 요소를 만드는 태그로는 대표적으로 태그와 태그 등이 있습니다. 다음으로 인라인 레벨 요소를 살펴보도록 하겠습니다. 인라인 레벨 요소란 줄을 차지하지 않는 요소로서 그림과 같이 화면에 표시되는 콘텐츠 만큼만 영역을 차지하며, 그 외의 공간에는 다른 요소..

CSS 02 CSS 스타일링 텍스트 관련 스타일1. 글꼴 스타일텍스트 관련 스타일CSS3에서는 여러 가지 속성들을 이용하여 텍스트 및 레이아웃을 스타일링 할 수 있습니다. 텍스트 관련 스타일은 글꼴이나, 글자크기, 이탤릭체 표현여부 등을 지정하는 글꼴 스타일과 텍스트의 방향이나 정렬, 줄 표시여부 등을 지정하는 텍스트 스타일로 구분 됩니다. 이에 대해 자세히 알아보겠습니다. 글꼴 스타일에서 font-family는 글꼴을 지정하는 속성입니다. 사용자가 웹 문서에서 사용할 글꼴을 지정할 때 font-family 속성을 이용하면 됩니다. Font-family 속성은 태그를 비롯해 태그나 태그처럼 텍스트를 사용하는 요소들에서 주로 사용하는 속성입니다. 웹 문서에서는 글꼴을 지정할 때 한 가지 글꼴만 지정하기도 ..