Software

생활코딩 강의를 바탕으로 쓴 글입니다 :) 파일 읽기 이제 파일을 읽어 본문의 내용을 바꿔보도록 하겠습니다. 우선 data라는 폴더를 만들어 HTML, CSS, JavaScript 파일을 만들겠습니다. 확장자는 쓰지 않습니다. 각 파일에 본문 내용을 넣도록 하겠습니다. html.html, css.html, js.html에서 태그 다음에 오는 태그에서 내용만 잘라내서 data 폴더에 있는 파일명에 맞게 붙여넣겠습니다. HTML의 본문 내용 중 태그는 지우고 진행하겠습니다! 이제 main.js를 수정하겠습니다. const app = http.createServer((req, res) => { ... res.writeHead(200); fs.readFile(`data/${queryData.id}`, "utf8..

생활코딩 강의를 바탕으로 쓴 글입니다 :) 동적인 웹 페이지 만들기 지난번 만들었던 웹 페이지에서 WEB, HTML, CSS, JavaScript를 클릭 했을 때 동적으로 변하는 웹 페이지를 만들어 보도록 하겠습니다. 간단한 설명을 위해 html.html 파일에서 모든 코드를 복사하겠습니다. 그 후 main.js에 template라는 변수로 저장하도록 하겠습니다. const http = require("http"); const fs = require("fs"); const url = require("url"); const app = http.createServer((req, res) => { var _url = req.url; var queryData = url.parse(_url, true).query..

생활코딩 강의를 바탕으로 쓴 글입니다 :) Node.js 설치 nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 진행하기에 앞서 node.js를 설치합니다. 각 OS에 맞게 설치하면 됩니다! Node.js 실행 node.js가 설치 되었으면 실행을 해보도록 하겠습니다. 저는 vs code를 이용하여 실행하겠습니다. 우선 원하는 폴더에 main.js를 만들어 주도록 합니다. 그리고 이제까지 만들었던 (html, css, js, index).html 파일들을 main.js 경로가 있는 곳으로 복사나 이동. //main.js const htt..

생활코딩 강의를 바탕으로 쓴 글입니다 :) 웹 서버 운영하기 현재 PC로 웹 서버를 운영해보겠습니다. bitnami.com/stack/wamp WAMP Bitnami WAMP Stack provides a complete, fully-integrated and ready to run WAMP development environment. In addition to PHP, MySQL and Apache, it includes FastCGI, OpenSSL, phpMyAdmin, ModSecurity, SQLite, ImageMagick, xDebug, Xcache, OpenLDAP, ModSecurity, bitnami.com 위 사이트로 이동해 다운을 해준 뒤 설치를 해줍니다. 설치 시 기본적인 툴만 다..

생활코딩 강의를 바탕으로 쓴 글입니다 :) 웹 페이지 이동 이제 간단하게 클릭을 통해 웹 페이지를 이동시켜 보도록 하겠습니다. 우선 4개의 html 파일이 필요합니다. 저는 1) html.html 2) css.html 3) js.html 4) index.html 로 이름을 정하겠습니다. index.html은 가장 처음 페이지를 나타내며, Web의 정의를 쓴 페이지 입니다. html.html은 html의 정의가 써져있는 페이지, css.html은 css의 정의가 써져있는 페이지, js.html은 javascript의 정의가 써져있는 페이지 입니다. 아래는 index.html로 나머지 3개의 파일에서도 공통적인 부분을 가져다 쓰겠습니다 WEB HTML CSS JavaScript WEB The World Wi..

생활코딩 강의를 바탕으로 쓴 글입니다 :) 태그 table 태그는 처음에는 많이 헷갈리는 태그입니다. 우선 예제를 통해 알아보겠습니다. tag percentage head 98.1% body 97.9% html 97.9% table 태그에도 속성이 많지만 간단하게 border만 적용하였습니다. border는 윤곽선을 그리며, 해당 속성이 없을 경우 선이 그어지지 않기 때문에 눈으로 확인하기 어렵습니다. 그래서 간단하게 border="1"로 지정하여 구분하기 쉽게 그렸습니다. 우선 tr 태그 입니다. 은 table row로 행을 추가할 때 사용합니다. 맨 위에서부터 차례대로 확인해보면 tag와 percentage가 1번째 행입니다. 하지만 다른 행과 다르게 글자가 가운데 정렬이 되어 있으며, 굵게 나오는 ..

생활코딩 강의를 바탕으로 쓴 글입니다 :) P 태그와 br 태그 p tag VS br tag 태그 없이 글을 쓰게 된다면 줄바꿈을 해도 적용되지 않습니다. 그래서 태그를 이용해 줄바꿈을 적용해 봅시다. p는 paragraph의 약자입니다. 즉 하나의 문단을 만들 때 사용합니다. 태그 내에서 줄바꿈을 하면 적용이 될까요?? br은 원하는 위치에서 줄바꿈을 할 때 사용합니다. 특징은 닫는 태그가 없습니다. 닫는 태그란 위 문단에서 p 태그의 끝에 있는 /p가 없다는 뜻입니다. 위 코드를 실행한 화면입니다. p 태그 내에서 줄바꿈을 해도 적용이 되지 않는 것을 확인할 수 있습니다. 하지만 각각의 p 태그마다 줄바꿈이 적용되는 결과를 확인할 수 있습니다. br태그는 위의 설명처럼 닫는 태그가 없습니다. br 태..

생활코딩 강의를 바탕으로 쓴 글입니다 :) 생활코딩 강의를 보면서 웹 공부를 하려고 합니다. 우선 간단한 태그에 대해 알아보겠습니다. 아래 코드를 저장하고 실행해보겠습니다. 안녕하세요! 혼자하는 웹 스터디! 이 문장에서는 밑줄을 그어보겠습니다. HTML에는 많은 태그(TAG)가 존재합니다. h1 ~ h6의 태그를 알아봅시다. h1 태그입니다. h2 태그입니다. h3 태그입니다. h4 태그입니다. h5 태그입니다. h6 태그입니다. 위의 코드를 실행한 결과입니다. : 흔히 강조할 때 사용하는 태그입니다. 안녕하세요! 가 진하게 표시된 걸 확인할 수 있습니다. : 밑줄을 표시하는 태그입니다. : division의 약자로 웹 페이지의 논리적 구분을 하기 위해 사용합니다. 아무런 스타일이 지정되어 있지 않기 때..