<!DOCTYPE html>
<html lang="ko">
<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>
</html>DOCTYPE
- 문서가 형식과 버전으로 작성되었는지를 명시
- 선언시 standards mode(최신 형식)로 문서 실행
- 선언하지 않을 경우 quirks mode(익플5, 네이게이터 4 등 옛날 브라우저를 모방)로 문서를 실행한다.
- DOCTYPE은 꼭 선언해주자.
head 태그
메타데이터(기계가 읽을 정보)가 담기는 곳
- 페이지의 제목
- 파비콘
- 기타 메타 정보
- CSS와 자바스크립트 등의 코드 및 링크
title 태그
- 브라우저의 탭에 표시
- 브라우저 즐겨찾기의 제목으로 표시
- 검색엔진 검색결과의 제목으로 표시
meta 태그와 속성들
a. charset
<meta charset="UTF-8">
<!-- 과거 형식 -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">- 페이지가 어떤 문자로 작성되었는지 명시 - 글자가 깨지지 않도록
- UTF-8 - 전세계 거의 모든 문자를 표현할 수 있는(유니코드) 형식
- 문서 저장 형식도
UTF-8로 맞출 것! - 참고:
html태그의lang속성과의 비교: 언어 vs 문자 인코딩- html의 lang 속성은 언어 타입
- charset은 문자 인코딩 방식
b. IE 관련 호환정보
- 익스플로러에서 열람 시 어떤 모드로 실행할 것인지 지정 (...
IE=7,IE=8,IE=9,IE=edge) - IE=edge : 해당 익스플로러 버전에서 가장 최신 형식으로 (11의 경우 11)
- 이후에는 사용되지 않을 설정
c. 뷰포트 관련 정보
viewport: 화면에 보여지고 있는 영역
모바일 등 특수 상황에서는 의미가 달라진다.
- 시각적 뷰포트: 사람에게 보여지는 영역
- 레이아웃 뷰포트: 브라우저가 웹페이지를 그리는 영역
meta 태그의 viewport 속성에서 뷰포트에 대한 설정이 가능하다.
content 속성 안의 항목들
| 항목 | 설명 | 비고 |
|---|---|---|
| width | 뷰포트의 너비 | device-width : 기기의 화면 너비. 정수를 넣으면 픽셀 단위로 |
| initial-scale | 페이지가 처음 로드될 때의 줌 레벨 | 기본 1.0 |
| maximum-scale | 최대 줌 레벨 | 비추천 |
| minimum-scale | 최소 줌 레벨 | 비추천 |
| user-scalable | 사용자가 핀치로 줌인, 아웃 가능 여부 | no로 비활성화, 비추천 |
d. Open Graph 정보
- Meta(구 페이스북에)에서 만든 프로토콜
- 링크 공유 시 썸네일 지정하는 데 사용된다.
<meta
property="og:image"
content="https://developer.mozilla.org/mdn-social-share.png" />
<meta
property="og:description"
content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both Web sites
and HTML5 Apps. It also documents Mozilla products, like Firefox OS." />
<meta property="og:title" content="Mozilla Developer Network" />현재 페이지에서 F12를 눌러, 직접 찾아보길 권한다.
추천하는 문서: 관련 링크
head 태그에는 무엇이 있을까? HTML의 메타데이터 - Web 개발 학습하기 | MDN
HTML document we covered in the previous article을 다시 봅시다. My test page This is my page HTML 요소의 내용입니다. — 페이지를 열 때 브라우저에 표시되는 요소와 다르게, head의 내용는 페이지에 표시되지 않습
developer.mozilla.org
MDN 문서의 형식에는 자주 보면서 익숙해지는 것이 좋다.
- 참고: 얄팍한 코딩사전
'WEB FE Repository' 카테고리의 다른 글
| BEM - CSS,JS 용 클래스 네이밍 규칙 (0) | 2026.01.23 |
|---|---|
| 시멘틱 태그 - Semantic Tag (4) | 2026.01.23 |
| Material UI 기반 디자인 진행 순서 (0) | 2025.10.03 |
| FE 작업 순서 (Material UI + 일반 Webapp 기준) (0) | 2025.10.03 |