<1> HTML 문서의 기본 구조
See the Pen basic-structure by lypi (@Lypi) on CodePen.
<!doctype html>
<html lang="ko-KR">
<head>
<meta charset="utf-8">
<title> html 문서 기본 구조 </title>
</head>
<body>
여기가 바로 본문이다.
</body>
</html>
<!doctype html> (MDN)
:: 이 문서가 html(=html5) 문법이 적용된 문서임을 알려줌. HTML 태그에 포함되지는 않는다.
:: 문서의 최상위에 위치해야한다.
<html> </html> (MDN)
:: 이하의 모든 태그는 <html> 태그의 자손이어여야 한다. (=내부에 있어야 한다.)
:: 즉 모든 HTML 태그의 최상위 부모 요소여야 한다.
<html lang="ko-KR"> (MDN)
:: 태그 내부의 내용이 어떤 나라의 어떤 언어로 작성되었는지를 나타내는 속성.
:: "언어코드-나라코드"의 값을 갖는다.
:: 거의 html 태그에 사용하지만 전역 속성이므로 다른 태그에도 사용할 수 있다.
<head> </head> (MDN)
:: 웹 브라우저가 알아야 할 정보들이 입력되는 부분
:: <html> 태그의 첫번째 자식으로 배치해야한다.
<body> </body> (MDN)
:: 실제 브라우저에 표시되는 내용
::<html> 태그의 두번째 자식으로 배치해야한다.
<meta> (MDN)
:: 다른 meta 요소로 표현할 수 없는 문서레벨 메타데이터를 나타내는데 사용하는 태그.
:: 주로 문자 인코딩을 선언하는데 사용된다.
:: 닫는 태그는 없다.
<meta charset="utf-8"> (MDN)
:: meta 태그에 사용하는 속성. HTML 문서의 문자 인코딩 방식을 나타낸다.
:: HTML5에서 유효한 문자 인코딩 방식은 utf-8 뿐이므로 값은 항상 utf-8이어야 한다.
:: 일부 브라우저에서 문자 인코딩 방식은 문서의 첫 1024byte만 보고 결정하므로 그 안에 있어야 한다.
:: 그러므로 <head> 태그의 앞부분에 위치시키는 걸 추천한다.
<title> (MDN)
:: 브라우저 탭에 표시될 제목을 나타내는 태그
:: 내용에는 텍스트만 쓸 수 있으며, 안에 다른 태그가 있어도 무시된다.
:: <head> 태그의 자식으로 하나만 존재할 수 있다.
:: 사용하지 않을 시 페이지 주소가 문서의 제목으로 사용된다.
썸네일용