1. DOCTYPE & Document Structure
🎈 <!DOCTYPE>
<!DOCTYPE html>
HTML문서를 작성할 때 가장 먼저 해줘야 하는 것이 `<!DOCTYPE>`을 선언 해줘야 한다. HTML5 표준에 맞게 작성된 문서라는 거를 브라우저에게 선언하는 것이다.
🎈 <html></html>
<!DOCTYPE html>
<html>
<head>
<!--웹 문서에 관한 메타 데이터-->
</head>
<body>
<!--웹 문서에 들어갈 내용-->
</body>
</html>
`<html>`에는 `<head>`와 `<body>만 적용할 수 있다. 사용자들에게 전달할 문서의 콘텐츠를 제대로 잘 전달하는 역할을 한다.
🎈 <head></head>
웹 문서에 관한 중요하지만 보이지 않은 메타 데이터를 선언할 때 사용하는 태그이다. 문서가 어떻게 작성해야 하고 문서가 참조하고 있는 다른 문서는 어떤 것인지 등등 눈에 보이지 않는 정보들을 담아두는 것이다.
🎈 <body/body>
웹 문서에게 보여주게 될 문서의 모든 콘텐츠를 담아내는 태그이다.
2. Title, Link, Style & Script
🎈 <title></title>
<!DOCTYPE html>
<html>
<head>
<title>개발자가 될 때까지 코딩을 디깅합니다.</title>
</head>
<body></body>
</html>HTML의 대제목 역할을 하는 태그이다. 검색 최적화에 굉장히 큰 역할을 한다.
👉🏻 title를 잘 쓰는 방법
- 키워드를 단순히 나열하는 것은 비추한다.
- 페이지마다 타이틀 값을 변형시켜주는 게 검색 최적화에 좋다.
- 무엇에 관한 내용인지 센스있다 title을 작성한다.
🎈<link>
<link rel="stylesheet" href="style.css">보통 CSS 파일을 HTML 문서에 첨부할 때 사용하는 태그이다. `link:css`를 치면 자동으로 `<link rel="stylesheet" href="style.css">` 생성된다.
웹 폰트를 사용하기 위해서는 CSS 파일을 첨부해야 한다. 그렇기 때문에 `<link>`로 웹 폰트가 들어 있는 CSS를 연결 시켜준다. `favicon`도 `<link>`로 사용할 수 있다.
🎈 <style></style>
<style>
h1 {
color: red;
}
</style>
HTML 문서 내에서 CSS 스타일을 작성하고 싶을 때 사용하는 태그이다. CSS 파일로 `style`을 설정해도 문서 내에 `<style>`가 있다면 문서 내에 있는 코드로 덮어 씌어버리기 때문에 비추한다.
🎈 <script></script>
<h1>Kimbug</h1>
<script src="./app.js"></script>
<script>
var h1 = document.querySelector('hi');
h1.addEventListener('click', function (event) {
this.textContent = 'hi';
})
</script>
HTML 문서 내에 `Javascript`파일을 첨부할 때 사용하는 태그이다. `script:src`를 치면 자동으로 `<script src=""></script>` 생성된다.
👉🏻 <script>는 <head> 안에 작성하지 않는 이유
- 브라우저입장에서는 코드를 위에서 부터 아래로 읽는다.
- `<meta>`나 `<link>` 등을 읽는 거는 오래 걸리지 않지만 `<script>`는 다른 서버에서 가져오는 거라 다운이 다 될 때까지 기다려야 하므로 굉장히 비효율적이다.
- `javascript` 렌더링을 잘하기 위해 `<body>` 내에서 모든 컨텐츠를 작성이 된 후에 마지막으로 작성하는 것이 좋다.
3. Meta
🎈 <meta>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="롬이">
<meta name="description" content="개발자가 되고 싶은 롬이">
<meta name="keywords" content="롬이, 개발자, 개발자그램">
HTML 문서가 어떤 내용을 담고 그 문서의 핵심 키워드가 무엇이며 만든 사람은 누구인지 등 정보를 담고 있는 태그이다. `name`과 `content` 속성이 반드시 들어가야 한다.
1) attribute
- name
메타데이터 종류 속성이다.
👉🏻 viewport : 데스크탑, 태블릿, 모바일 등 디바이스에 따라 화면을 보여주는 거다. 반응형 사이트할 때 유용하다.
👉🏻 author : HTML 문서를 작성하는 사람이다.
👉🏻 description : 페이지에 대한 설명을 해준다.
👉🏻 keyword : 해당 페이지의 검색 최적화를 위해 키워드에 맞춰서 나오는 역할이다.
- content
메타데이터 값 속성이다.
👉🏻 width=device-width : 디바이스의 가로 사이즈에 맞춘다.
👉🏻 initial-scale=1.0 : 보여줄 때 원래 사이즈 맞게 1.0으로 맞춘다.
- charset
문자인코딩 설정하는 역할이다. `content`를 따로 작성할 필요 없다.