vscode에서 '! + tab' 치면 자동으로 와르르 흘러내리는 HTML 선언부지만 문서에서 가장 중요한 정보를 담고 있는 부분. HTML의 기본 규격에 대해 이해하고 모르는 정보가 없도록 이해하기. (emmet 모드 쓰지 말고 익숙해질 때까지 직접 써보자...😅)
Doctype & Document Structure
1. <!DOCTYPE html>
2. <html>
3. <head>
</head>
4. <body>
</body>
</html>- Document Type Declaration, DTD(문서형식) 선언. "브라우저야, 이 문서는 HTML5로 작성할거야 오류없이 잘 렌더링해!" *DOCTYPE은 대문자로 쓴다.
2.<html> </html> 태그 안에는 반드시 <head>, <body>의 2개 태그만 넣는다. (root tag)
-
웹 문서에 관한 meta data를 담는 뇌!
-
웹 문서에 들어가는 내용, 컨텐츠를 담는다. 우리가 사용하는 모든 태그는 모두 여기 들어간다.
Title, Link, style&script
<head>
<title> </title>
<link rel="stylesheet" href="">
</head>
<body>
<scrip src=""> </script>
</body><title> 문서의 대제목 </title>은 웹 페이지에 들어가면 tab에 뜨는 제목으로 검색 최적화를 위해 매우 중요하다.- 제목을 쓸 때면 1) 키워드를 단순 나열하지 말고, 2) 페이지마다 그에 맞는 제목을 쓴다. 3) 무엇에 관한 내용인지 함축적이고 센스있게 쓴다!
- CSS 링크 연결 시 'link:css + tab'을 사용하면 간편하다. link rel은 웹 전체에 사용하는 폰트를 넣을 때도 쓴다.
- html 내 JavaScript를 첨부할 때
<script>를 쓰고, body 마지막에 넣는다.자바스크립트는 html body 내 가장 마지막에 작성한다. 브라우저가 코드를 읽을 때 자바스크립트에서 하나만 에러가 나도 구현이 안되고 중간에서 멈춰버린다. 에러가 나도 다른 것들이라도 먼저 나올 수 있도록 하기 위함!
Meta Tag
- name = "메타데이터의 종류", content = "메타데이터 값"
- viewport : 화면 사이즈. 여러 미디어에 사용되므로 반드시 작성
- author, keywords 등 문서 정보를 보여주는 태그 종류 많음
<meta name ="viewport" content="width=device-width", "initial-scale=1.0">
<meta name ="author" content="Kayoung Kim">
<meta name ="keywords" content=""> #키워드 검색
<meta name ="description" content=""> 웹 페이지 설명
