앞서 [HTML(2)]에서 언급한 HTML의 Boilerplate는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>여기서 <head> 태그 부분에 집중해보자.
*head 태그
- head 태그는 브라우저 화면에는 나타나지 않는다.
- 웹 문서의 속성, 인코딩 방식, 외부 리소스를 로드하는 '설정'의 성격을 띤다.
- meta 태그는 여러가지가 있을 수 있다. meta 태그 안에 선언는 속성의 종류에 따라 그 역할이 달라진다.
*인코딩 : 이 문자를 컴퓨터가 어떻게 해석할 지 알려주는 것
*meta 태그 속성 종류
-charset : 문자를 컴퓨터에서 어떻게 해석할지. UTF-8은 전세계 모든 문자와 언어를 지원하는 인코딩 방식이다. 즉, 특정 언어가 깨지는 현상을 방지한다. 그래서 일반적으로 charset은 이렇게 설정해주면 된다.
-http-equiv : 브라우저의 호환성을 설정. 과거 인터넷 익스플로러에서는 호환성 문제가 항상 있었다. 인터넷 익스플로러 버전 별로 같은 문서를 다르게 해석하는 문제가 있었던 것이다. 이 문제를 해결하고자 이런 태그가 만들어졌다. compatible이 호환이 된다는 의미이다. 어떤 버전에 맞추어 해석할지를 명시해주는 부분은 content라고 한다.(재확인 필요)
다만 지금은 엣지라고 해서, 최신 버전의 인터넷을 지원한다는 의미이다.
즉 저 부분은 현재 "인터넷 익스플로어 최신 버전과 호환성을 맞추겠다."라는 의미이다.
-viewport : 브라우저 너비를 설정하는 메타 태그. 다양한 디바이스(모두 device-width가 다르다.)로 웹 페이지에 접근하게 되면서 생겼다. 1.0은 초기 배율을 1배로 한단 뜻인데, 초기 설정(width=device-width)에서 확대나 축소를 하지 않는다는 의미이다.
head의 타이틀 태그는 문서의 제목을 정하는 부분이다. 탭 상단에서 확인이 가능하다.
*작성 자료 출처
https://techit.education/
'개발자 김모립 > Web' 카테고리의 다른 글
| [HTML(5)] <body> 태그 *비공개 중 (0) | 2023.03.30 |
|---|---|
| [HTML(4)] 블록 요소 vs 인라인 요소(재확인(비유) 필요) (0) | 2023.03.30 |
| [HTML(2)] HTML 구성 (0) | 2023.03.30 |
| Chrome 개발자 도구 사용 방법 (0) | 2023.03.30 |
| [HTML (1)] HTML이란 (0) | 2023.03.30 |