HTML의 기본 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale="1.0">
<title>Document</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>문서 타입 정의 (DTD)
브라우저가 HTML의 버전을 파악하고, 콘텐츠를 정확하게 표현할 수 있도록 웹 문서 최상단에 기재하는 것을 문서 타입 정의 (DTD)라고 한다. HTML 5의 경우 <!DOCTYPE html>가 사용된다.
HTML 요소
<html> : HTML 문서의 루트요소를 정의하는 역할
• lang 속성은 웹문서가 어떤 언어로 작성되었는지를 의미
<head> : HTML 문서의 메타데이터를 정의하고, 외부 스타일 시트 파일, JS 파일을 연결하는 역할
• 메타데이터(Meta Data)는 HTML 문서에 대한 데이터
• charset 속성은 HTML 문서의 문자 인코딩 방식을 명시
• name 속성은 메타 데이터의 유형을 지정
• content 속성은 메타 데이터 유형의 설정값을 지정, name과 함께 사용됨
• <title> 태그는 웹 브라우저 툴바에 표시되는 HTML 문서의 제목을 지정할 때 사용
<!-- name 속성의 속성값 -->
<!-- 검색엔진에 검색되는 단어를 정의 -->
<meta name="keyword" content="HTML, Metadata, FrontEnd">
<!-- 검색 결과에 표시되는 웹페이지의 설명을 정의 -->
<meta name="description" content="2023.03.01~">
<!-- 웹페이지의 주제를 정의 -->
<meta name="subject" content="blog">
<!-- 웹페이지의 저자를 정의 -->
<meta name="author" content="yuntori">
<!-- 다른 디바이스에서도 웹페이지가 잘 출력되도록 뷰포트를 설정 -->
<meta name="viewport" content="width=device-width, initial-scale="1.0">
• <body> : 실제 브라우저에 출력되는 내용들 정의하는 역할
참고 사이트
프론트엔드 개발 및 실무 프로젝트 구현과정 수료