매번 쉽게 emmet으로 쓰던 doc structure에 대해 정리해보려한다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>HEAD : title, link, style, meta
head에는 화면에 보이지 않는 중요한 정보들을 담고 있다.
title
- 상단 tap에 보이는 페이지 이름을 의미한다.
- title은 SEO(검색최적화)에 큰 영향을 주기에 단순 단어 나열은 지양하고 각 페이지 마다 어울리는 제목을 입력하는 것이 좋다.
link
- css file 또는 font와 같은 정보들을 이어줄 수 있다.
style
- html 문서 내에 바로 스타일을 적용할 수 있으나 지양하는 것이 좋다.
meta data
name='메타데이터의 종료'
- viewport (화면사이즈 :반응형을 위해 필요!)
content='메타데이터 값'
<meta name='viewport' content='width=device-width, inital-scale=1.0'>
<meta name='author' content='노선경'>
<meta name='keywords' content='검색 키워드'>
<meta name='description' content='설명글글'>
.
.
.- 특히 viewport를 넣지 않으면 반응형 웹사이트가 제대로 작동하지 않는다.
+ script
- js를 첨부하고 싶을 때 연결하는 방법
- script는 head안에 쓰지 않는다.
-> link 정보는 로딩이 오래 걸릴 경우 다음 정보로 넘어가지만 script정보는 다 받을 때까지 다음 줄로 넘어가지 않는다. 이러한 이유로 body안에서도 가장 마지막 줄에 추가하는 것이 좋다고 한다.
