면접 망하고 다시 정리해보는 이론 #2
💜
문서 유형을 지정하는 선언
페이지의 HTML 버전이 무엇인지 웹 브라우저에게 알려주는 선언문
대소문자 구분하지 않음
HTML 5
<!DOCTYPE html>
이전 버전
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Quirks Mode
IE에서는 box model 잘못 해석 width에 padding과 border를 포함
IE 최신 표준 모드 렌더링
<meta http-equiv="X-UA-Compatible" content="IE=edge">
국가별 언어 코드는 ISO 639-1 표준
<html lang="ko">
<html lang="en">
<html lang="fr">
언어를 지정하는 이유가 뭔가요?
스크린 리더기에서 문서를 읽어줄 때 명시된 언어에 맞춰 읽어줌
브라우저가 알아야 할 정보를 입력하는 곳
브라우저의 제목 표시줄이나 페이지 탭의 제목, 즐겨찾기 등록 시 이름으로 사용됨
웹 접근성 지침에 페이지마다 제목을 제공하는 지 여부를 검사하는 항목이 있기 때문에 꼭 사용
페이지 내용을 짐작할 수 있는 주요 단어로 (특수기호X 긴문장x)
문자셋
<meta charset="UTF-8">
검색 엔진을 위한 키워드
<meta name="keyword" content="검색 엔진을 위한 키워드, 키워드2">
문서 작성에 사용한 저작 도구 지정
<meta name="generator" content="문서 생성에 사용되는 소프트웨어 패키지 중 하나 명시">
웹 페이지에 대한 설명 요약
<meta name="description" content="웹 페이지에 대한 설명 요약">
문서의 저자
<meta name="author" content="문서의 저자">
뷰포트 설정
<meta name="viewport" content="width=device-width, initial-scale=1.0">
문서의 인코딩 방식 명시
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
우선적으로 적용할 스타일시트 명시
<meta http-equiv="default-type" content="동일 문서에 존재하는 link 혹은 style 요소의 title">
해당 문서를 새로고침 할 시간 명시
<meta http-equiv="refresh" content="30;url=http://www.리다이렉트">
HTML5는 눈에 보이지 않는 구조가 자동으로 생겨난다. 암묵적인 구조 생성
독립적인 개요를 생성
자손 섹셔닝 루트를 개요로 취급하지 않음 outline에 영향을 주지 않는다
명시적 개요 생성
헤딩과 함께 사용하면 헤딩 수준이 자동으로 바뀐다
html5는 특성에 따라 분류한다 (이전에는 inline / block 두 가지 요소로 구분)
body 안에서 사용되는 대부분의 엘리먼트