<head>
📖 페이지를 열 때 브라우저에 표시되는
body에 비해
head의 내용은 페이지에 표시되지 않기 때문에 다소 이해하기 어려울 수 있다.
-
그러나 HTML 문서를 구성하는 중요한 기본 요소중 하나이다.
-
head의 주 업무는 페이지에 대한metadata를 포함하는 것이다.
metadata (메타데이터)
메타데이터 : 데이터를 설명하는 데이터. 즉, 데이터를 위한 데이터를 의미한다.
일상생활에서 예시를 들어볼까요?
- 책 : 출판사, 저자, 옮긴이 등의 정보
- 사진 : 촬영일시, 기기, 조리개, 화질 등의 정보
- 스마트폰 : 제조사, 프로세서, 저장공간 등의 정보
...
- 이런 느낌..?
위처럼 쉽게 접할 수 있는 사물조차
하나의 데이터 내부에 여러 데이터가 포함되어 있습니다.
HTML도 문서 자체가 하나의 데이터이기 때문에 메타데이터가 존재하죠.
웹 브라우저에서 F12 - 개발자 도구 - Elements 탭 을 누르면
페이지를 구성하는 데이터들을 확인할 수 있습니다.
살펴보면 <head> 태그 내에도 <meta>, <link>, ... 많은 태그들이 존재합니다. 😵💫
웹 페이지마다 검색엔진이 정보를 수집하여 검색정보를 출력하고
어떤 설명인지, 문서가 대략 어떤 정보들에 관련되어있는지를 판가름하게 해주는 역할을 합니다.
MIME 타입
MIME 타입이란 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다.
웹에서 파일의 확장자는 별 의미가 없다.
그러므로, 각 문서와 함께 올바른 MIME 타입을 전송하도록, 서버가 정확히 설정하는 것이 중요하다.
브라우저들은 리소스를 내려받았을 때 해야 할 기본 동작이 무엇인지를 결정하기 위해 MIME 타입을 사용한다.
-
html파일 내에서 확장자를 해석하는 것이 아니다.
단순히 해당 위치에 있는 파일을 호출할 뿐이다. -
MIME 타입의 구조 :
/로 구분된 두 개의 문자열인 타입과 서브타입으로 구성된다.
스페이스는 허용되지 않는다. -
MIME 타입은 대소문자를 구분하지는 않지만 전통적으로 소문자로 쓰여진다.
Example
-
text : text/plain, text/html, text/css, text/javascript
-
image : image/gif, image/png, image/jpeg, image/bmp, image/webp
...
굉장히 많기 때문에 필요할 때 찾아서 쓰도록 하자.
🦊 MDN Site : https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types
