메타데이터의 역할
- 메타데이터는 데이터를 설명하는 데이터 즉, 데이터를 위한 데이터임(마치 저자, 발행인 같은, 사진 촬영일시 등)
- HTML 문서를 설명하는 데이터라고 볼 수 있음
- head 태그의 경우 검색엔진에서 정보를 수집해서 노출하는데 어떤 데이터 설명인지가 주요한지 분류를 메타 데이터를 통해서 처리함
title
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의함
- 무조건 문자열만 작성하고 적용됨
- 하나의 head 태그에는 하나의 title만 존재해야함
- 즐겨찾기, 북마크의 기본값을 들어가는 값이기도 함, 그래서 확실히 식별한 값을 처리하는게 좋음
- SEO에도 title이 영향을 매우 많이 끼침, 비슷한 웹페이지가 있어도 title을 잘 짓는 페이지가 상위 노출이 된다는 것임
- 여러 조건이 있음
- 단어로만, 키워드 뭉치 스타일 제목은 피해야함, 광고 페이지로 처리함
- 웹 페이지를 설명하는 글을 간략더라도 최대한 상세하게 설명하는걸 추천함
- 참고자료
meta 문서 정보
- 빈 요소라 자식을 가질 수 없으므로 속성에다가 값을 써야함 name-content 쌍으로 처리해야함
- 정보가 여러개인 경우 meta 태그르 여러개 쓰면됨
- HTML 표준 메타데이터의 경우 제대로 배포할 경우 꼼꼼히 작성해야함
- application-name의 경우 딱 해당하는 페이지의 이름을 적으면 좋음 title과는 좀 다름, 고정되서 다르게
- author는 문서 제작자, description의 경우 페이지에 대한 설명이고 특정 브라우저에선 이를 즐겨찾기 기본 페이지로 쓰기도 함
- generator의 경우, 페이지 생성시 소프트웨어의 식별자가 들어감, keywords의 경우 문서를 설명한 키워드를 나열함(해시태그처럼)
- referrer의 경우, 서버 처리에 있어서 http 흔적을 남기는 처리임
- 예시
<head>
<meta name="application-name" content="facebook" />
<title>Facebook - dashboard</title>
</head>-참고자료
meta 문자 인코딩, 뷰 포트
- 문자 인코딩의 경우 meta charset임, 웹페이지 보급이 활발해지면서 다양한 문자에 대응이 가능해야하는데 그 대응이 가능하게 한 것이 UTF-8로 지정해서 대응이 가능함
- title 이전, head의 첫 번째에 두는 것을 권장함
- viewport의 경우, 웹 페이지를 볼 수 있는 영역을 viewport라고 함, 이는 모바일 기기 및 여러가지 기기 대응을 위함임
- width, height를 입력 가능하고 양의 정수또는 device-width, device-height로 device 기준으로 함
- initial-scale은 초기 비율을 정함, 실제 디바이스와 viewport의 비율로 조정함(확대하지 않는 이상 1.0을 기준으로 함)
- user-scalable로 웹 페이지 확대를 하게 할 지 말 지를 설정할 수 있음(yes or no)
- maximum-scale, minimum-scale을 통해서 이 확대 정도를 설정할 수 있음
- 모바일 환경 대응 할 때 viewport에 대해서 딥하게 파면 좋음
- 참고자료
link
- 현재 문서와 외부 리소스를 연결하고 처리하는 태그, 여러개를 연결하고자 한다면 여러개의 link 태그를 쓰면 됨
- css 스타일 시트, favicon 쓸 때 html에 연결할 때 많이 씀
- href를 통해 파일 경로를 입력해서 link 처리를 할 수 있음(상대경로, 절대경로 둘 다 가능함), 추가로 rel을 통해 관계를 정의해줘야함
- rel에서는 stylesheet를 제일 많이 쓸 것임(css 연결), favicon의 경우 rel은 icon을 씀
- type을 통해서 특성의 값을 지정할 수 있음, 어떤 파일인지 정의해야함(MIME 타입이여야함)
- 예시
<link href="main.css" rel="stylesheet" />
<link rel="icon" href="favicon.ico" />
<link
rel="apple-touch-icon"
sizes="114x114"
href="apple-icon-114.png"
type="image/png" />
MIME 타입
- audio, video 파일 등 외부의 파일을 불러오는데, 이 때 MIME 타입을 통해서 해당 불러온 파일을 어떤 타입인지 명시하기 위함임
- 단순히 파일 경로만으로는 어떤 파일인지 알 수 없기 떄문에
- 거의 모든 파일 확장자마다 MIME 타입이 있음
- 일반적으로
type/subtype의 형태로 씀 - text type의 경우 말 그대로 문서타입, 그 뒤에 html, css 등 다양하게 올 수 있음
- image type 그리그 그 뒤에 확장자가 붙음(png, jpeg 등)
- 그 외 audio, video 등
- 참고자료
- 참고자료
style
- css 문법을 적용하기 위해 별도의 파일을 만들지 않고 태그를 활용해서 쓰는 법
- 스타일 태그 내에서 css 문법을 쓸 수 있음
- 권장하는 것은 외부 css 파일을 만들어서 link로 불러오는 것을 권장함. 간략한 css나 연습이 아니라면 style 태그 사용은 권장하지 않음
- 여러개 쓰면 아래에 있는 style 태그를 적용함
- 예시
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이곳은 a 페이지입니다.</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Another page</h1>
</body>
</html>script
- script 태그는 외부에서 불러올 수 있고 인라인으로도 쓸 수 있음(직접 js 문법을 작성해서 사용할 때도 씀)
- script 태그는 head에 body에도 있어도 됨, 하지만 이 태그를 만나는 순간 해당 태그 내의 js 코드를 먼저 읽으므로 랜더링이 중단됨
- 그래서 시간이 오래걸릴 것으로 예상되므로 body에 가장 마지막에 쓰는 것을 권장함
- 예시
<script src="javascript.js"></script>
<script>
alert("Hello World!");
</script>
측정할 수 없으면 관리할 수 없고, 관리할 수 없으면 개선시킬 수도 없다