Node.js

서버 만들고 구동해보기

server.js

let http = require("http");
let fs = require("fs");
let mySet = function(request, response){
  let url = request.url;
  if(request.url === '/'){
    url='/index.html';
  }
  response.writeHead(200,{'Content-Type':'text/html'});
  let htmlFile = fs.readFileSync(__dirname + url);
  response.end(htmlFile);
}
let app = http.createServer(mySet);
app.listen(8080);

node server.js

HTML 구조 (semantic)

header

주로 제목, 네비게이션을 포함하고 로고, 목차, 검색폼을 그룹핑 할 수 있다.
한번만 쓰이지 않고 section, article에서 그 영역 내 header위치에 쓰인다.

main

페이지내의 가장 주요한 부분을 그룹핑할 때 한번만 사용.

footer

저작자 관련정보 혹은 주요 내용과 관련된 링크 등을 그룹핑.

Sectioning 태그

의미구조에 영향을 주는 태그

section

의미를 갖고 나눠 준다.
div 요소는 의미를 갖지 않는다.
header, footer 를 갖을 수 있다.

article

목적을 갖고 배포하기 위해 쓰여진 글.
header, footer 를 갖을 수 있다.

aside

주 내용과 분리된 부가적인 정보나 인용, 광고

nav

주요 네비게이션을 그룹핑

CSS & 랜더링

BFC( Block Formatting Context )

효율적인 배포를 위해 랜더링 방식과 순서에 관심을 갖어야한다.

랜더링과정