vscode 편집기를 사용할 때 *.html 파일에서 !을 입력하면 html 템플릿이 나오게 됩니다.
세부 내용들에 대해 간략하게 알아보고자 합니다.
<!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>
<!DOCTYPE html>
DOCTYPE 선언은 웹 문서가 어떤 버전의 HTML로 작성되었는지 브라우저에게 알려주기 위해 사용합니다.
대소문자는 구분하지 않습니다. 파일의 최상단에 위치해야 합니다.
HTML 4.01 에서의 DOCTYPE 선언
HTML4 혹은 XHTML은 HTML5 보다 훨씬 복잡합니다. SGML(Standard Generalized Markup Language)에 기반을 두어 만들어졌기 때문에 DTD(Document Type Definition) 참조가 필요합니다.
strict mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">transitional mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">frameset mode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html lang="ko">
html 태그에 lang 속성을 항상 추가해야 합니다.
웹 페이지의 언어를 선언하게 됩니다. 서치 엔진, 브라우저에게 웹 페이지를 해석 할 정보를 제공합니다.
스크린리더를 사용 하는 경우에 어떤 언어로 작성되었는지 제대로 선언해야 올바르게 해석을 할 수 있습니다.
코드
한국어: ko
영어: en
일본어:ja
중국어(간체): zh-CN
<meta charset="UTF-8" />
html 파일의 문자 인코딩 방식을 지정합니다.
(인코딩 : 사람이 사용하는 문자를 컴퓨터에 표현하기 위해 변환하는 과정)
유니코드를 위한 문자셋인 UTF-8이 가장 많이 사용됩니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
(Compatible : 호환)
사용자가 IE 브라우저를 사용하는 경우에 각 버전에서 최신 표준 모드를 선택하는 문서 모드입니다.
IE 브라우저에는 여러가지 버전이 있고 각 버전마다 웹페이지를 번역하고 표시하는 방법이 다릅니다.
그래서 개발자가 어떠한 표준에 맞춰서 웹페이지를 보여줄지 설정할 수 있습니다.
content = "IE=edge" 모드는 가장 최신 모드로 표시하는 옵션입니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport는 화면상의 보이는 영역입니다. viewport를 조절하지 않으면 데스크탑과 모바일에서 화면의 크기가 의도치 않게 작게 보이는 등의 현상이 생길 수 있습니다. 이를 위해서 설정해주는 속성입니다.
content="width=device-width, initial-scale=1.0"
브라우저의 width를 장치의 width에 맞추어 표시합니다.
initial-scale은 viewport의 초기 화면의 배율입니다. 1.0은 100%와 같고 일반적인 화면을 그대로 보여줍니다.
'개발 > HTML' 카테고리의 다른 글
| [HTML] XHTML5와 HTML5 표기법 (0) | 2022.01.31 |
|---|
