<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
Doctype
<!DOCTYPE html>
문서가 HTML5 문서임을 브라우저에 알려준다.
이것은 실제 HTML 태그가 아니라 브라우저에게 HTML 버전을 알려주는 선언이다.
문서의 HTML 버전을 지정한다.
DOCTYPE(DTO, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며,
웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지 알려주는 용도이다.
<html> : </html>
문서의 전체 범위를 지정, 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할
<html lang="en">
lang 속성은 문서의 주언어가 영어임을 지정
<head> : </head>
문서의 정보를 나타내는 범위
웹 브라우저가 해석해야하는 웹 페이지의 제목, 설명, 사용할 파일위치, 스타일(CSS)같은
웹 페이지에 보이지 않는 정보를 작성하는 범위
문서의 메타데이터를 포함하는 부분
메타데이터는 페이지의 내용을 표시하지 않지만,
문서의 제목, 문자 집합, 스타일 시트 링크, 스크립트 등 다른 정보를 제공
<meta charset="UTF-8">
이 메타 태그는 문서가 UTF-8 문자 인코딩을 사용함을 나타낸다.
국제 문자를 포함한 모든 문자를 지원한다는 의미
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 메타 태그는 반응형 웹 디자인에 중요하며,
브라우저 뷰포트의 너비를 장치의 너비로 설정하고초기 확대/축소 레벨을 1로 설정한다는 뜻
이를 통해 기기별 환경에 따라 올바르게 표시될 수 있게 한다.
<title>Document</title>
<title> 태그는 웹 브라우저 탭에 표시되는 페이지의 제목을 정의한다.
<body> : </body>
문서의 구조를 나타내는 범위
사용자 화면을 통해 보이는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은
웹 페이지의 보여주는 구조를 작성하는 범위
웹 페이지의 내용을 포함하는 부분으로 텍스트, 이미지, 버튼, 폼 등 사용자에게 표시되는 모든 요소들이 포함된다.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML JavaScript (0) | 2023.08.16 |
|---|---|
| HTML 튜토리얼 - HTML Iframes (0) | 2023.08.14 |
| HTML 튜토리얼 - HTML id Attribute (0) | 2023.08.04 |
| HTML 튜토리얼 - HTML class Attribute (0) | 2023.07.28 |
| HTML 튜토리얼 - HTML Block and Inline Elements (0) | 2023.07.24 |