✔ HTML 문서 기본 구조
▫ 기본 구조를 작성해 두는 것은 HTML 문서를 '웹 콘텐츠를 작성할 준비가 되어있는 상태'로 만드는 작업
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>여기에는 문서의 제목을 입력</title>
</head>
<body>
여기에 웹페이지에 표시할 콘텐츠(태그)를 입력
</body>
</html>✔ HTML 문서 해부
<!DOCTYPE html> - 문서 형식 선언
▫ DOCTYPE의 뒤에 html이라고 쓰여 있는 것은 '이 문서는 HTML5로 작성되었습니다'라는 뜻
▫ 웹 문서가 어떠한 형식으로 작성되었는지 최상단에 문서의 형식을 선언하는 것을 의미
▫ DOCTYPE을 선언하지 않으면 같은 내용의 HTML 문서라 할지라도 각 브라우저의 환경에 따라 전혀 다른 결과물을 출력하는 경우가 발생.
▫ 각 브라우저가 HTML 문서를 동일하게 인식할 수 있도록 하고, 문서 간의 호환성을 높이기 위해 선언.
<html> </html> - 문서의 시작과 끝
▫ 요소는 페이지 전체의 콘텐츠를 감싸며, 루트(root) 요소라고도 한다.
▫ 문서의 고유 언어를 설정하는 lang 속성을 포함한다.
▫ 한국어를 사용한 경우에는 위 예시에서 표기한 것처럼 "ko"를 입력하고, 영어를 뜻하는 "en"이나 일본어를 의미하는 "ja" 등 다양한 언어 코드를 속성값으로 입력할 수 있다.
▫ <html> 태그의 안에는 실제 문서의 내용들이 포함되는데, 내용으로는 문서가 표시할 콘텐츠 뿐만 아니라 문서에 대한 정보(설정값)도 함께 포함될 수 있다. ex)<html lang="ko">
<head></head> - 문서의 정보
▫ <html> 태그의 안에는 <head>와 <body>라는 두 개의 하위 태그가 자리하고 있다
▫ <head>의 역할은 브라우저에게 문서의 정보를 전달 한다.
▫ 웹페이지의 품질에 영향을 주는 중요한 정보들 이다.
<meta charset="utf-8"> - 인코딩 방식 설정
▫ 문서의 키워드 또는 설정 등 문서와 관련된 여러가지 항목들을 지정할 때 사용하는 태그
그 중 대표적인 항목이 바로 문서의 인코딩 방식을 설정해주는 문자셋(character set) 설정
<title></title> - 문서의 제목
▫ 여기에 입력한 제목은 웹 브라우저의 탭 메뉴에 표시됨
<body></body> - 화면에 표시될 콘텐츠
▫ 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있다.
헷갈렸던 부분이었는데, 좋은 글 잘 읽었습니다!