[HTML] Head Element

안녕하세요~ 저번 포스팅에서는 블락&인라인 요소들에 대해 공부했었는데요.

이번에는 웹 페이지 내부에서 직접적으로 살펴볼 수 없지만 중요한 정보를 제공하는 <head> 요소에 대해 포스팅 해보려고 합니다.

그 동안은 <body> 내부에 사용하는 요소들을 살펴보면서 예시에 <head> 요소를 잠깐씩 보신 분들도 계실 거예요.

사실 <head> 요소 내부에 있는 요소들은 우리가 보는 웹 페이지에 직접적으로 나타지는 않아요.

그러면 도대체 왜 <head> 요소를 사용할까요?

그 이유는 <head> 요소는 HTML에 중요한 정보인 메타 데이터를 포함하는 요소이기 때문인데요.

주로 다른 요소들을 포함하는 컨테이너(container) 요소이며 <title>, <style>, <meta>, <link>, <script>와 같은 요소들이 포함됩니다.

참고로 메타데이터는 데이터에 대한 데이터로 예를 들면 해당 포스팅은 한글로 작성되었어! 와 같은 것을 포함하는 정보이며

HTML에서는 문서제목, 인코딩, CSS style, Script 등을 지칭하고 있습니다.

이제 <head> 요소에 포함되는 요소들에 대해 간단하게 알아보겠습니다.

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서(웹페이지)의 제목을 지칭합니다.
텍스트를 포함할 수 있으며 태그를 포함하더라도 무시합니다 - MDN

문서나 문서 일부에 대한 스타일 정보(CSS)를 포함합니다 - MDN

아직 CSS를 배우지는 않았지만 나중에 배우면 <style>요소로 작성하기 보다는 CSS 파일을 만드는 것을 권장합니다.

다만 이런게 있다! 정보는 알아두면 좋을 것 같아요.

현재 문서와 외부 리소스의 관계를 명시하며 스타일 시트(CSS)를 연결할 때 제일 많이 사용하지만
사이트 아이콘인 파비콘 연결 등에도 사용합니다 - MDN

예전에 파비콘에 대해 공부할때 잠깐 언급한 <link> 요소 입니다! CSS 파일 연결 및 파비콘 설정 등에 사용됩니다.

<link>, <script>, <style>, <title>와 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
주로 페이지 설명, 인코딩, viewport 등을 설정합니다. - MDN

<meta charset="UTF-8">
<meta name="description" content="페이지설명">
<meta name="viewport" content="width=device-width, initial-scale=1.0> : 모든 기기에 맞게 웹페이지 크기 설정

티스토리툴바