[HTML] 메타데이터 요소

Stella·2023년 7월 7일

HTML

목록 보기
3/4

! + TAB키를 누르면 기본완성 태그를 볼 수 있다.

1. 메타데이터 역할 : 데이터를 설명하는 데이터이다. 촬영일시, 정보 등이 들어가 있다.

개발자 도구에 Elements내용에 < meta name 등 으로 정리 및 분류를 한다.

2. title태그 : 문서 제목 요소

문서 제목을 정의한다. 텍스트만 포함할 수 있다.

<title> 제목 </title>

다른 title요소를 포함하지 않은 head가 들어갈 수 있다.
title과 head는 하나씩만 가능!!

북마크의 제목으로 들어가고, 탭의 제목을 정한다.
제목이 단순한 단어 나열에 불과하다면 검색 알고리즘이 결과에서 순서를 내리곤 한다.

3. meta태그 : 메타관련 요소로 나타낼 수 없는 메타데이터를 나타낸다.

<meta base, link, script, style, title> 
<meta name="application-name" content="facebook" /> 빈 요소

name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있다.

4. meta태그 : 문자 인코딩, 뷰 포트

인코딩 set meta charset="UTF-8"
name="viewport" : 모바일 장치에서만 사용된다. 전체 브라우저 중 웹페이지를 볼 수 있는 영역이다. 여러 값을 추가 할 수 있다. 장치너비와 뷰포트 너비 비율을 정의한다.

5. link태그 : 외부 리소스 연결을 할 수 있다.

<link href="위치" rel="stylesheet">

6. MIME타입

클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘이다. 파일을 불러올 때 문자열을 해석할 수 없다.
어떤 파일인지 인지하기 위해 type="text/css" 이렇게 파일의 형태를 명시를 해준다.
mdn에서 찾아보고 사용하기

7. style태그

html의 head태그 내부에 style태그를 통해 css를 사용하지 않아도 사용이 가능하다.

<style>
	p { color: yellow; }
</style>

이런식으로 사용이 가능하다.

8. script태그

body태그에 맨 마지막에 오는것이 좋다. 시간이 많이 걸리기 때문에

  • 외부 스크립트를 가져오는 방법
<script src="javascript.js"></script>
  • 인라인 스크립트를 작성
<script>
	alert("hello")
</script>
profile
공부 기록

0개의 댓글