메타 데이터

아래에 설명할 메타 데이터 태그들은 정보를 의미하며 head 태그 안에 작성하는 태그들입니다.

메타 데이터란 기계가 식별할 수 있는 메타 정보를 의미합니다.

1.<title> </title>

• HTML 문서의 제목을 설정합니다.

• title의 Content 내용은 브라우저의 제목 표시줄이나 페이지의 탭에 보여지는 문서의 제목을 설정합니다.

• HTML 문서 내 하나만 작성할 수 있습니다.

• Content로 텍스트만을 작성할 수 있습니다.

• title 태그는 검색 엔진 최적화(SEO)에 매우 중요한 역할을 합니다.

---

다음과 같은 형태로 사용합니다.

1. 키워드 단순 나열하는 것은 권장하지 않는다. 제목이 단순한 단어 나열인 경우 검색 알고리즘이 결과에서 순서를 하위로 내리게 됩니다.
   콘텐츠를 설명하는 간략하지만 자세한 문장을 넣어 사용하거나, key-value 짝지어 작성합니다.

2. 페이지마다(하나의 HTML 마다) 그에 맞게 title 값 작성.

2. <meta />

• 문서의 기타 정보를 나타내는 태그입니다. 브라우저나 검색 엔진에게 정보를 제공하는 역할을 합니다.

• 빈 태그이므로 기본적으로 속성을 통해 그 의미를 확장시켜서 사용합니다.

• 속성	의미	값
  charset	문자 인코딩 방식 지정	UTF-8, ...
  name	메타 데이터 이름(정보의 종류)	author, description, viewprot, keywords, ...
  http-equiv	서버나 사용자의 환경에 작동 방식 변경에 대한 지시	X-UA-Compatible
  content	name, http-equiv의 값 명시

• charset 속성은 텍스트가 인코딩 되는 방식을 설정하는 속성입니다. HTML 문서 안의 모든 문자들이 화면에 어떻게 출력되는지 정의하는 속성입니다.

• name 속성은 정보를 지칭할 때 정보의 종류를 작성하는 속성입니다. 문서 레벨의 메타 데이터의 이름을 정의합니다. 이는 메타 데이터의 Key 역할을 의미합니다.

  • author: 문서의 작성자

  • description: 페이지의 내용에 대한 짧고 정확한 요약

  • keywords: 콤마로 구분된 페이지 내용과 관련된 단어들

  • viewport: 화면에 렌더링하기 위한 영역을 설정

  • application-name: 웹 페이지에 구동 중인 애플리케이션 이름
    title 요소의 경우 애플리케이션 이름 뿐만 아니라 부가적인 정보까지 작성하지만, application-name 속성에는 애플리케이션 이름만을 작성합니다.

• http-equiv 속성은 서버나 사용자의 환경에 작동 방식을 변경해주는 지시사항을 명시하는 태그입니다.

• content 속성은 http-equiv 또는 name 속성의 값을 갖습니다. 즉 속성(http-equiv, name)의 값을 명시(작성)하는 속성입니다. 즉, 메타 데이터의 value 역할을 합니다.

---

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

위 예제는 viewport의 가로 너비를 device-width, 즉 모바일, 태블릿, 데스트탑 등 뷰포트의 너비를 디바이스의 가로 너비 전체를 사용하는 의미를 갖고 있습니다(반응형 웹 사이트를 제공하기 위해 사용).

initial-scale을 1.0으로 설정하여 초기 뷰포트 너비 비율을 1.0으로 설정합니다.

3. <link />

• 외부 리소스(CSS, ICON, Font 등)의 연결 및 현재 문서와의 관계를 명시하는 태그입니다.

• 속성	의미	값
  🔑 rel	현재 문서와 외부 리소스와의 관계를 명시	stylesheet, icon, ...
  href	외부 리소스의 URL	URL
  type	외부 리소스의 MIME 타입	text/css(기본값), image/x-icon, ...

• rel 속성은 link 태그에서 필수적으로 작성해야하는 필수 속성입니다. 이 속성은 외부에서 가져올 리소스와 현재 문서(HTML 문서)와의 관계를 명시하는 속성입니다. 값으로는 stylesheet(CSS), icon 등이 존재합니다.

• href 속성은 외부 문서의 경로를 명시하는 속성입니다.

• hreflang 속성은 링크된 외부 리소스의 언어를 나타냅니다. html 태그에서 lang="ko"와 같은 속성을 작성했다면 따로 작성하지 않아도 됩니다. 만약 리소스가 다른 언어를 갖고 있다면 따로 작성합니다.

• type 속성으로 외부 리소스의 MIME 타입을 작성합니다. 기본값은 text/css이므로 css 파일을 가져오는 경우 따로 명시하지 않아도 됩니다.

MIME 타입이란 가져올 리소스의 타입(종류)을 명시하여 서버나 클라이언트가 정확하게 인지를 하고 요류를 방지합니다.

---

<!-- CSS 파일 로드 -->
<link rel="stylesheet" href="CSS 파일 경로" />

<!-- 파비콘 파일 로드 -->
<link rel="icon" href="파비콘 파일 경로" type="image/x-icon"/>

4. <style> </style>

• 스타일 정보(CSS)를 설정하는 태그입니다. 즉, HTML 문서 내부에서 CSS 코드를 작성할 수 있게 됩니다. body 태그에 작성해도 오류는 일어나지 않지만 스타일 정보를 담고 있기 때문에 head 태그에 작성하는 것을 권장합니다.

• 속성	의미	기본값
  type	MIME 타입	text/css

• type 속성은 HTML5 버전에서는 type="text/css"가 기본값으로 설정되어 있습니다. style, link 태그에서 리소스가 CSS라면 따로 속성을 작성하지 않아도 됩니다(생략 가능).

---

<style>
    div {
        width: 300px;
        heigth: 200px;
    }
</style>

5. <base />

• HTML 문서에 포함된 모든 상대 경로들의 기준 URL을 설정하는 태그입니다.
  base 태그는 다른 태그에서 경로를 사용하기 전에 , 즉 위에 작성하는 것이 좋습니다.

• 속성	의미	값
  href	기준 URL	URL

• base 태그를 통해 우리가 상대 경로로 입력할 수 있는 특정 경로를 기본적으로 지정하여 기준으로 삼는 것입니다. 즉, 상대 경로의 기준이 됩니다.

• base 태그는 HTML 문서 내에서 단 한번만 작성이 가능합니다. 그러므로 주요하게 자주 쓰일 경로를 작성하는 것이 좋습니다. 모든 파일의 상대 경로에 적용이 되기 때문입니다.

---

<!-- 상대 경로의 기준 경로 -->
<base href="./abc/" />

<!-- 실제 경로는 "./abc/main.css" -->
<link href="main.css" />

위 link 태그의 href 속성 실제 값은 ./abc/main.css입니다.