[HTML] head태그 안에 들어가는 태그 알아보기

이번 글은 head 태그(페이지의 정보) 안에 들어가는 태그들에 대해 알아보겠습니다.

1. link 태그

<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png">

 

특징

• 단일 태그: <link> 태그는 닫는 태그 없이 단독으로 사용됩니다.
• rel 속성: Relationship의 약자로, 해당 속성은 가져올 문서와의 관계를 의미합니다. (예: stylesheet, icon 등)
• href 속성: 가져올 문서의 경로를 의미합니다. 상대 경로 또는 절대 경로로 설정할 수 있습니다.

rel의 속성 값 icon일 때

 

 

2. script 태그

<script src="./main.js"></script>
<script>
    console.log("Hello World2");
 </script>

특징

• src(Source) 속성: 외부 JS 파일을 연결할 때 사용합니다.
• 내부 스크립트 작성 가능: HTML 문서 내에서 직접 script를 작성할 수 있습니다.

3. meta 태그

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

메타 데이터라는 말을 들어보셨을 겁니다. 메타 데이터란 데이터의 정보, 즉 데이터에 대한 데이터를 의미합니다.

meta 태그는 HTML 문서의 내용, 문자 집합, 화면 크기 등의 정보를 제공하는 태그입니다. meta charset을 제외하고 대부분의 메타 태그는 name과 content 속성으로 이루어져 있습니다.

• charset: 문자 집합을 지정합니다.
• name: 정보의 종류를 지정합니다.
• content: 정보의 값을 지정합니다.