오늘 배운 내용

---

HTMl의 기본구조

HTML의 규칙들

• HTML
  → 구조적인 객체를 정적으로 찍어냄
• JS
  → 데이터에 대해 반복, 비교, 평가, 저장하는 일들이 가능
  

• 함수 (function)
  → 일단 만들어만 놓고 실행은 ()문에서 됨.

자바스크립트 변수 별 특징

• const : 변하지 않을 것들
• let, var : 변할 것들

프로토 타입 객체

자바스크립트에서 모든 생성자는 모든 프로토타입 객체를 가지고 있음

buttonEl.addEventListner('click')

그렇기 때문에 .addEventListner('click')
이 부분에서 참조하는게 프로토타입 객체

여러 페이지를 구동하는 방식

const http = require('http');
const fs = require('fs');
function mySet(req, res){
    let url = req.url;
    if(req.url === '/'){
        url = '/index.html';
    }
    if(req.url === '/about'){
        url = '/about.html';
    }
    res.writeHead(200);
    var htmlFile = fs.readFileSync(__dirname + url);
    res.end(htmlFile);
}
var app = http.createServer(mySet);
app.listen(8080)

이런식으로 파일 별로 url 주소를 설정함

웹의 궁극의 목적

👉 검색 엔진 상위에 랭크 되어야함 (시멘틱 웹)
👉 사이트의 비즈니스 방향에 따라 제목태그를 사용하는것이 중요함 (SEO)

• 중요한 키워드를 h1 태그로 검색되게 해야함
  (웹 퍼블리셔는 : 겉모양(PSD)만 옮겨주는 사람이 아님)
  ex) 쇼핑몰 만들면 상품명에 h1 태그 붙이기

• 검색이 잘되도록 입체화를 고려했는지, 특정 태그를 잘 정리했는지 고려해야함

html의 outline이란?

브라우저가 코드를 읽어서 목차를 만듬 (페이지의 중요도 지도)
아웃라인에 영향을 주는 태그들

• <section> , <article>, <aside>, <nav>

• 크롬의 아웃라인 확장자로 중요도 검색 가능
  https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo/related?hl=ko

프론트엔드 개발의 우선순위

1. 검색엔진 최적화
2. 데이터 뿌리기 좋은 구조
3. CSS