🌐 HTML | <head> 태그 해부하기

dayannne·2023년 3월 20일

HTML & CSS

목록 보기

3/7

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My page</title>
  </head>
  <body>
  </body>
</html>

`<head>`

검색엔진을 위한 다양한 정보들이 담기는 곳
사용자에게는 title, 파비콘(favicon), viewport 정보 등이 보이게 된다.

`<meta>`

메타데이터: “어떤 목적을 위해 만들어진 데이터”

head태그 내의 이 meta정보를 살펴보고 페이지의 다양한 정보를 가져간다.
meta태그의 속성들은 다음과 같다.

1. charset

문자 깨짐 오류의 발생을 방지하기 위해 문자 코드의 종류를 설정해 주는 속성

<meta charset="utf-8">

utf-8은 전 세계적인 언어들을 지원하는 국제적인 코드 규약이다. 어떤 언어로 작성하더라도 웹페이지를 읽어들일 수 있다.

2. http-equiv="X-UA-Compatible" content="IE=edge"

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

'IE의 최신 표준 모드를 보여주겠다'는 의미로, 브라우저 호환성을 위해 작성한다.

3. name=”” content=””

<meta name="description" content="Google 지도에서 지역정보를 검색합니다.">

name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값의 쌍으로 제공한다.
- name: 면 전체 페이지에 적용되는 "문서 레벨 메타데이터”를 제공
  - 어떤 형태의 정보(viewport, description, author…)를 가졌는지
- content: 실제 메타데이터의 요소

4. viewport

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

width: 뷰포트의 너비를 제어(px 단위로 지정 가능)
height: 뷰포트의 높이를 제어(px 단위로 지정 가능)
initial-scale : 페이지가 처음 로드 될 때 확대/축소 수준을 제어
- 최소 0.1
- 기본 1
- 최대 10
minimum-scale: 축소 정도를 제어
maximum-scale: 페이지에 허용되는 확대 정도를 제어

`<title>`

<title>My page</title>
브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의하는 태그

텍스트만 포함한다.
약 60자를 넘지 않아야 한다.

`<link>`

<head>
  
  <link rel="stylesheet" href="style.css">
	
  <link rel="stylesheet" href="font.ttf">
	
  <link rel="shortcut icon" href="favicon.ico"> 
</head>
현재 문서와 외부 리소스의 관계를 명시하는 태그

외부 스타일시트(CSS),폰트(font), 파비콘(favicon)을 연결할 때 사용

<head>태그 내부에만 위치할 수 있다.

rel: relations 관계. 대상 파일의 속성
href: hyper-references 경로. 연결 시 참조할 파일의 위치