(node.js를 위한) HTML 기본 복습~

node.js로 html 띄우는 기본 원리 맛보기

const express = require('express');

const app = express();

const port = 3000;

app.listen(port, () => {

console.log(`${port} 포트로 웹서버 뜸`);

});

 

일단 이렇게 해주고, 그다음 app.get("/home") 객체를 만들어줌.

const express = require("express");

const app = express();

const port = 3000;

// 추가된 코드

app.get("/home", (req, res) => {

res.send(`

<h1> 환영합니다 </h1>

<h2>집에 오신걸 더 환영합니다</h2>

`);

});

app.listen(port, () => {

console.log(`${port} 포트로 웹서버 뜸`);

});

 

그러면 오른쪽과 같이 html 이 나타나는걸 볼 수 있다!

 

이제 본격적으로, 동일한 경로에 html 파일을 만들어준다.

(그리고 vs code extension으로 라이브뷰를 사용해서 이제 귀찮게 브라우저로 가지 않음..;)

자유롭게 html 기본적인 태그들을 복습해준다. 

* 참고: <a> 태그의 target 속성값

속성값	설명
_blank	링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함.
_self	링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. 기본값으로 생략 가능.
_parent	링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top	링크된 문서를 현재 윈도우 전체에서 오픈함.
프레임 이름	링크된 문서를 명시된 프레임에서 오픈함.

 

 

이제 표를 만들어주는 실습

 

<tr> : table row

<th> : table column

이다.

 

 

디자인이 구려서 아래 사이트에서 코드 스니펫을 가져와서 title 태그 밑에다가 적용해줄것이다.

https://github.com/kevquirk/simple.css/wiki/Getting-Started-With-Simple.css

Getting Started With Simple.css

 

<!-- Minified version -->
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">

<!-- Un-Minified version -->
<link rel="stylesheet" href="https://cdn.simplecss.org/simple.css">

 

갑자기 이뻐짐.

 

그럼 그냥 버튼 태그만 입력해줘도 알아서 디자인 됨.