Doctype & Document Structure
Document Type Decleration
Document Type Declaration
= DTD 선언
= 문서 형식 선언
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
</head>
<body>
<!-- 웹 문서에 들어갈 내용 -->
</body>
</html>!DOCTYPE html
'브라우저야, 이 문서는 HTML5 버전으로 작성된 문서야!' 하고
알려주는 선언이다.그러니 이에 맞추어 오류 없이 잘 rendering 하삼^^!
html에서는 document = html 이라고 생각해도 무방하다.
head, body 태그
html태그 안에는 head, body 태그만 자식으로 들어갈 수 있다!
head 태그
title 태그
<title>문서의 제목</title>문서의 대제목이라고 볼 수 있다.
검색 최적화에 매우 중요하다!
SEO를 위한 팁
- 키워드 단순 나열은 비추!
- 페이지마다 그에 맞게 변경!
link 태그
css 스타일시트를 첨부하는 태그
<!-- css 파일 첨부 -->
<link rel="stylesheet" href="style.css" />
<!-- 폰트가 들어있는 css 파일 -->
<link href="//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css" rel="stylesheet" type="text/css" />style 태그
html 문서 내에서 css 코드를 작성할 때 사용
첨부한 css 파일을 덮어 버리므로 웬만하면 사용하지 않도록 하자!
<style>
h1 {
color: red;
}
</style>script 태그
javascript 파일을 첨부 or html 문서 내에 javascript 코드를 작성
왜 script 태그는 head에 넣지 않고 body에 넣을까?
link 태그의 경우 렌더를 하면서 비동기적으로 아래의 코드로 내려가지만,
script 태그의 경우 로드가 끝날 때까지 기다려야 하기 때문에 body의 맨 마지막에 사용하는 것이 좋다!
meta 태그
<meta name="메타데이터 종류" content="메타데이터 값" />viewport가 가장 중요하다! (사용자 디바이스 화면)
<meta name="viewport" content="width=device-width, initial-scale=1.0">가로 : 사용자 디바이스 너비
배율 : 1배율 (100%)
author
<meta name="author" content="frenchkebab" />작성자를 명시해줌
keywords
<meta name="keywords" content="frenchkebab, 프렌치케밥, velog, 벨로그" />description
<meta name="description" content="페이지에 대한 설명" />
Blockchain Dev Journey