💡 메타데이터란?
<body>태그와는 다르게 태그 내의 내용이 페이지에 표시되지 않으며, 페이지에 대한 정보 즉, 페이지의 데이터를 의미한다.
✏️ head요소란?
메타데이터를 담는 공간이다.
이 공간은 브라우저의 검색 엔진에게 가장 처음으로 보여주는 공간으로, 문서의 정보나 외부 리소스 연결 등을 담을 때 사용된다.
🔥 그렇다면 head에서 사용 가능한 요소들에 대해 알아보자.
① 문서 정보를 나타내는 요소들
✏️ title 요소
웹 브라우저의 제목 표시줄이나 탭에 보이는 페이지의 제목을 작성할 때 사용하는 테그이다.
- 웹 페이지에는 하나의
title요소만 가질 수 있다. - 기본적으로 이 태그에 작성한 제목은
북마크와검색 엔진에 사용된다.
✏️ meta 요소
문서의 정보를 작성하는 빈 태그로, 빈 태그이기 때문에 속성을 이용하여 데이터의 정보를 기술해야 한다.
기본적으로 여러 번 사용할 수 있기 때문에, 여러 개의 정보를 저장할 수 있다.
name은 메타데이터의 이름을 의미하며,content라는 속성과 같이 사용하여 문서의 메타데이터를 이름-값 형태로 제공한다.
< name의 값 >
application-name현재의 웹 페이지 전체를 지정할 수 있는 제목을 지정해준다.<meta name="application-name" content="allName">author문서의 저작자<meta name="author" content="olminje">Content-Script-Type웹 페이지 제작에 사용된 언어를 작성한다.<meta name="robots" content="Text/javascript">date웹 사이트 제작일<meta name="Date" content="2023-01-13T07:45:37+09:00">description웹페이지에 대한 설명<meta name="description" content="html에 대한 설명">generator해당 페이지를 생성한 소프트웨어의 식별자<meta name="generator" content="Visual Studio Code">keyword검색 엔진에 사용될 키워드(해시태그)<meta name="keyword" content="HTML, descript, study">referrer웹 페이지 이동 시, 어떻게 이동했는지에 대한 데이터를 어떻게 남길지 지정하는 속성이다.<meta name="referrer" content="origin">robots검색 로봇에 대한 명령을 지정하여, 웹 사이트가 검색에 노출되길 원치 않을 때 사용한다.<meta name="robots" content="noindex, nofollow">viewport모바일 장치에서 웹 페이지를 편하게 보여주기 위해 설정해주는 속성이다.
등 다양하다. 더 알아보고 싶다면 문서를 참고하는 걸 추천하며, 꼭 어떤 속성이 있는지 알아보자!<meta name="viewport" content="width=device-width, inital-scale=1.0"> <!-- ✦ device-width는 기기의 가로와 웹 사이트 너비를 같게할 때 사용한다. 높이는 너비를 설정하면 자동으로 적용되기 때문에 거의 사용하지 않는다. ✦ inital-scale은 웹 브라우저의 초기 비율을 설정해준다. ✦ user-scalable은 모바일에서 손가락 모션으로 확대/축소를 가능하게 할지 결정해주는 속성이다. -->
charset은 문자를 유니코드를 사용하여 어떻게 인코딩할지 결정할 수 있다.
이 속성은 해외에서 사이트를 접속해도 문제없이 한글을 볼 수 있게 해준다.
무조건 첫 번째에 넣는 게 좋다.<meta charset="UTF-8">
✏️ link 요소
현재 문서와 외부의 파일(외부 리소스)의 관계를 연결시켜 준다.
주로 스타일 시트나 웹 페이지의 아이콘(favicon)을 연결해줄 때 사용한다.
href속성을 이용하여 불러오고자 하는 외부 파일의 경로를 작성해준다.
이때 절대경로, 상대경로 선택하여 적어준다.rel속성은 현재 문서와 연결하고자 하는 파일의 관계가 무엇인지 작성해주는 속성이다.
주로 많이 사용하는 값은stylesheet와icon이다. 만약 다른 파일을 불러올 때는 밑의type속성을 추가해줘야 한다.type콘텐츠의 타입을 정의한다.
이 속성은 외부 파일이 어떤 파일인지 알려주는 역할을 한다. 이때 타입은MIME타입으로 작성해주어야 한다.
< MIME 타입이란? >
미디어 타입(Multipurpose Internet Mail Extensions) 혹은
MIME type으로 불리며, 파일의 타입을 명시해줄 때 타입의 값으로 사용한다.외부의 경로를 입력하여 파일을 불러올 때, 경로는 단순히 파일을 불러오는 역할을 담당하기에 문자열로 작성한 경로에서 해당 파일의 타입을 해석할 수 없다.
이러한 문제를 해결하기 위해 타입을 명시할 수 있는MIME타입을 사용한다.
< 일반적인 구조 >
type/subtype
대분류/소분류(확장자)
이미지/이미지의_확장자다양한 문서의 타입을 명시할 수 있기 때문에 문서를 꼭 참고하여 작성해야 한다.
② 웹 페이지를 표현하는 style 요소
메타데이터는 데이터에 대한 데이터라면,
style태그는 웹 페이지의 내용에 어떻게 "표시"될지를 정의하는 요소이다.
이 요소는 CSS 코드를 작성하기 위해 사용하며, 이 태그를 사용해서 따로 CSS 파일을 불러오지 않고 HTML 내부에서 CSS 코드를 작성할 수 있다.
③ 웹 페이지의 동작을 결정하는 script 요소
script요소는 HTML 문서에 인라인으로 스크립트를 작성할 수 있게 하거나, 외부의 스크립트 파일을 연결할 때 등 사용한다.
sciprt는 웹 페이지의 "행동"을 정의해주는 요소이며, 위의 웹 페이지 표현 방식에 직접적인 영향을 미친다.⊕
head태그 내에 스크립트 파일이 어떻게 동작하느냐에 따라서 사용되는 속성이 달라진다. (주로async,defet이 사용된다.)
