반응형
<head>헤드</head>태그는 <!DOCTYPE html>이후에 작성되는 필수태그 중 하나로, 헤드의 내부에는 각종 메타태그들이 삽입된다.
<-- 해당 선언은 html5 버전의 버전 선언이며, 타 버전을 사용 하는 경우에는 선언하는 방법이 다르니, 다시 한 번 확인해 주자. -->
먼저, 아래 코드를 살펴보도록 하자.
<t!DOCTYPE html>
<html lang="en-ko" dir="ltr"><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>러프의 아카이브</title></head>
<body>
이곳은 본문이 작성되는 위치입니다.
</body>
위에 필자가 작성한 기본 코드에는 여러 태그와 요소가 보인다. 하지만 이번 포스트에서 알아볼 것은 오직 head태그이다.
그렇다. <head>태그는 말 그대로 html의 머릿말 역할을 하는 것으로, 페이지의 검색어, SEO등에 활용되는 <title>태그, <meta>태그, 네이버 서치어드바이저의 봇 들이 들어가는 <script>태그 등이 수도 없이 들어간다.
뿐만 아니라 페이지의 전체적인 모양을 꾸며주는 CSS의 내외부 링크, JS의 내외부링크 까지도 해당 태그 안에 들어가게 된다.
아래의 예제 코드를 보자
위의 예제에서 강조된 코드를 보면
<link href="assets/css/style.css" rel="stylesheet">와 같이 사용 되는데, 해당 코드 처럼 내부 css를 가져오는데 사용 된다.
물론 위의 예제 코드에서
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">와 같이 외부 css코드의 대표 격인 웹 폰트를 불러오는데 사용되기도 한다.
반응형
'Web > HTML' 카테고리의 다른 글
| [HTML] doctype, DTD(Document Type Definition) 선언에 대하여 (1) | 2022.10.29 |
|---|---|
| [HTML] <!DOCTYPE 선언명> 선언과 의미, 종류와 W3C (0) | 2022.10.28 |
| [HTML]의 정의 DOCTYPE과 그 종류, <!DOCTYPE html> (0) | 2022.10.24 |
| [HTML]의 제목, title태그 (0) | 2022.10.24 |
| [HTML]의 속성과 코딩 독학 (0) | 2022.10.24 |