메타데이터 요소
2023. 3. 27. 10:38ㆍzerobase/HTML&CSS
728x90
메타데이터의 역할
- head의 내용은 페이지에 표시되지 않음. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함함
- 데이터를 위한 데이터
- 데이터를 설명하는 정보
- html문서를 설명하는 정보
title
- title태그 사이에 text로 문서를 설명하는 제목을 넣어주면 됨
- title 태그 사이에 텍스트는 무시가 됨
- 하나의 html엔 하나의 title만 있어야함
- 페이지 제목은 SEO에 큰 영향을 줌
- 명사로만 이루어진 제목은 피하는게 좋음. 광고로 인식을 하는 경우가 많음
meta-문서 정보
- 빈요소기 때문에 정보가 없음
- 속성에다가 정보를 나열하게 됨
- name이라는 속성은 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공 할 수 있음
- application-name은 웹 페이지에서 구동 중인 애플리케이션의 이름을 나타냄. title은 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있음
- description은 페이지에 대한 짧고 간략한 요약
meta- 문자 인코딩, 뷰포트
- 문자 인코딩은 charset으로 선언함. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "utf-8"의 대소문자 구분 없는 ASCII표현이어야
- viewport는 뷰포트의 초기 사이즈에 대한 힌트로 모바일 장치에서만 사용함
- 뷰포트에 값을 여러개 쓸 때는 쉼표로 구분함.
- initial-scale은 실제 디바이스의 너비와 뷰포트의 너비의 비율을 정의함
- user-scalacle은 웹페이지 확대가능 여부를 설정함
link
- 외부 리소스 연결 요소
- 여러개 사용가능
- 스타일 시트를 연결할 때 제일 많이 사용됨
- head태그 안에 link태그로 href를 연결시킴. rel로 어떤 링크를 연결한건지 설명함
- type의 특성은 링크된 콘텐츠의 타입을 정의하는데 사용함. 특성의 값은 text/html, text/css와 같은 MIME타입이여야함
MIME타입
- 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
- 일반적인 구조는 type/subtype으로 구성됨
- text는 텍스트를 포함하는 모든 문서를 나타내며 인간이 읽을 수 있어야 함
- image는 모든 종류의 이미지를 나타냄
- audio, vedio는 청각, 시각 매체
- application은 모든 종류의 이진 데이터를 나타냄
style
- 문서나 문서 일부에 대한 스타일 정보를 포함함
- 그러나 일반적으로 css로 스타일을 만듦
script
- 데이터와 실행 가능한 코드를 문서에 포함할 때 사용하며 보통 Javascript 코드와 함께 사용함