반응형
HEAD 태그란?
<head> 태그는 HTML 문서의 메타데이터와 스타일시트를 정의합니다. <html> 태그 바로 다음에 존재하고, 문서의 기본 정보와 설정 내용을 가지고 있습니다. 반면 <body> 태그는 실제 웹페이지 내용을 담당하므로 <head>와 <body>는 반드시 구분해야 하는 태그에요.
- 메타데이터 : 문서의 제목, 인코딩방법, 키워드, 작성자 등 문서 생성과 관련된 정보를 말합니다. 윈도우에서 MS Office 파일을 속성을 보면 '위치, 크기, 만든 날짜' 등이 있는데 이런 게 바로 메타데이터입니다.
- 스타일시트 : HTML 태그만으로는 디자인 요소를 반영할 수 없기 때문에 디자인과 스타일 가이드를 정의한 CSS 파일을 적용할 수 있는데요. 일종의 디자인 가이드입니다.
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹페이지 제목</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>
</head>
<body>
<!-- 웹페이지 내용 ->
</body>
</html>
예시를 보면 <head> </head> 태그 사이에 여러개의 태그들이 존재하네요. 저 태그들이 수행하는 역할을 살펴보겠습니다.
HEAD와 함께 다니는 태그들
<META> 태그
<meta charset="UTF-8">
문서의 메타데이터를 설정합니다.태그는 문자 인코딩, 문서 설명, 키워드, 작성자 등의 정보를 지정할 수 있습니다.
위의 예시는 UTF-8이라는 유니코드를 사용하고 있는 html 문서라는 걸 알려줬습니다. 로마자와 달리 한글은 유니코드여서 인코딩 정보를 꼭 넣어줘야 합니다.
<TITLE> 태그
<title>웹페이지 제목</title>
문서의 제목을 정의합니다. 브라우저의 제목 표시줄이나 북마크에 표시되는 텍스트입니다. 지금 보고 있는 브라우저 상단 탭에 보이는 게 타이틀입니다.
<LINK> 태그
<link rel="stylesheet" href="styles.css">
외부 파일을 읽어오기 위한 태그입니다. 위의 예시에서는 스타일 시트와의 연결을 설정했습니다.
- rel은 relationship의 약자로 어떤 걸 연결하겠다고 관계를 설정하는 속성입니다
- href는 Hypertext Reference의 약자입니다. 연결하려는 파일의 URL을 설정하는 속성입니다
<SCRIPT> 태그
<script src="script.js"></script>
외부 JavaScript 파일을 연결하는 태그입니다. <script> 태그를 사용하여 JavaScript 코드를 포함하거나 외부 JavaScript 파일을 로드할 수 있습니다.
반응형
'HTML' 카테고리의 다른 글
| 인터랙티브 웹페이지 구현을 위한 HTML Input 태그의 활용 (0) | 2023.06.02 |
|---|---|
| HTML <meta> 태그: 웹사이트 성능 향상과 검색 엔진 최적화를 위한 핵심 요소 (0) | 2023.06.01 |
| HTML의 시작 태그, 코딩의 스타트 <html> 태그의 역할과 사용법 (0) | 2023.05.31 |
| 웹 페이지 구성을 위한 HTML <section> 태그 (0) | 2023.05.31 |
| HTML 리스트 생성 <ol> 태그 - 순서가 존재하는 목록 생성 (0) | 2023.05.30 |
