목차
- <head> 태그란 무엇인가?
- <title>
- <style>
- <link>
- <meta>
- <script>
1. <head> 태그란 무엇인가?
<head> 태그는 메타데이터의 컨테이너라고 생각하면 된다. 메타데이터란 한 데이터를 설명해주는 다른 데이터이다. 따라서 <head> 태그는 데이터의 데이터를 적는 곳이다. <head> 태그는 <html> 태그와 <body> 사이에 위치하며, 주로 문서 제목, 문자 집합, 스타일, 스크립트 및 기타 메타 정보를 정의하는데 쓰인다. 이러한 html의 메타 데이터는 사용자들의 화면에 보이지 않는다.
2. <title>
이름에서 알 수 있듯이, <title> 태그는 html 문서의 제목을 정의한다. 네이버를 예로 들자면, 아래와 같이 NAVER 라는 텍스트가 <title> 태그로 작성된 것이다.
<title> 태그의
기본적인 사용법은 위와 같다. <title></title> 사이에 html 문서의 제목을 써주면 된다. 당연하지만 차이가 보이지는 않을 것이다. 위에서 말했듯이 헤드 요소들은 메타 데이터를 쓰는 곳이고 메타 데이터는 사용자의 눈에는 보이지 않는다. 하지만 제목 표시줄이나 페이지 탭에 html 문서의 이름이 표기가 되고 검색엔진 최적화(SEO)에 매우 큰 영향을 끼치기 때문에 검색 엔진 알고리즘에서 높은 순위에 페이지가 나오게 하기 위해서는 필수적으로 써야 한다.
2. <style>
<style> 태그는 HTML 문서의 스타일을 조절하기 위해 쓰인다. <style>과 <style> 사이에 HTML 문서에 대한 CSS 문서를 아래와 같이 작성해 주면 된다. 아래와 같이 스타일링해야 하는 html 태그들의 양이 적으면 아래와 같이 head 부분에 <style> 태그를 사용해 css로 스타일링하는 것이 괜찮을 수가 있다. 하지만 html 문서가 길어지면 길어질수록 html과 css를 분리하는 것이 더 편리하고 보기 좋다. 그래서 나는 <link> 태그를 이용하여 css 파일을 링크시키는 것을 권장한다.
See the Pen Untitled by junjason-dev (@junjason-dev) on CodePen.
3. <link>
<link> 태그는 해당 문서와 외부 리소스 간의 관계를 저장하는 역할을 한다. 이 태그를 이용하면 swiper.js와 같이 유용한 외부 라이브러리나 google font의 폰트를 사용할 수 있다. 또한 아래와 같이 다른 파일을 연결할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
</body>
</html>4. <meta>
<meta> 태그는 사용된 문자의 집합, 검색 엔진에 대한 키워드, 페이지에 대한 설명, 페이지 작성자, 그리고 뷰포트를 정의하는 데 사용된다. 아래는 각각의 예시를 나타내고 있다.
<meta charset="UTF-8">
<meta name="description" content="HTML 강좌">
<meta name="keywords" content="HTML, CSS">
<meta name="author" content="Bill Gay">
<meta name="viewport" content="width=device-width, initial-scale=1.0">5. <script>
<script> 태그는 자바스크립트를 사용하기 위해 쓰인다. <script>와 <script> 사이에 아래와 같이 자바스크립트를 써주면 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
console.log("ong");
</script>
</head>
<body>
<h1>ong</h1>
</body>
</html>하지만, css와 마찬가지로 자바스크립트의 내용이 길어질수록 html과 자바스크립트를 분리하는 것이 더 편리하고 보기 좋다. 그래서 이런 경우에는 아래와 같이 <script src = "js 파일 경로"></script>로 연결해주면 된다.
<script defer src = "./main.js"></script>
or
<script async src = "/js/main.js"></script>
or
<script src = "/js/main.js"></script>위 3가지 방식은 비슷해 보이지만 미묘한 차이가 있다. 브라우저는 자바스크립트를 가져오고 HTML을 분석하기 때문에 자바스크립트로 HTML 요소를 다루기 위해서는 HTML 요소를 먼저 분석하고 자바스크립트를 가져와야 한다. defer를 사용하는 방식은 문서상의 순서대로 수행을 하는 것이다. async를 사용하면 동기 처리를 통한 병렬로 HTML분석이 이루어질 때도 스크립트를 불러온다. 마지막 방식은 그냥 script태그를 최하단에 위치시키는 것이지만 이 방식은 보기에도 좋지 않고 편리하지 않기 때문에 async 또는 defer 방식을 추천한다. 자세한 차이는 비동기/동기 처리 강좌 때 설명하겠다.
'Html, Css' 카테고리의 다른 글
| [HTML]3. Doctype(DTD)란? (0) | 2022.02.25 |
|---|---|
| [CSS]3. 복합, 자식, 하위, 인접 형제, 일반 형제 선택자 (0) | 2022.02.19 |
| [CSS]2. 기본 문법 - 선택자의 종류와 우선순위 (1) | 2022.01.31 |
| [CSS]1. CSS란 무엇인가?-CSS의 필요성 (2) | 2022.01.30 |
| [HTML]2. 태그 구조와 블록요소/인라인 요소 (1) | 2022.01.16 |