1. 학습 목표
•
HTML 기본 구조 이해하기
•
HTML 문서의 기본 구성 요소 파악
•
간단한 웹 페이지 만들어보기
2. 핵심 개념 정리
HTML이란?
HTML(HyperText Markup Language)은 웹 페이지의 구조를 만드는 마크업 언어이다.
웹 브라우저는 HTML 문서를 읽어서 화면에 렌더링한다.
HTML은 크게 다음 구조로 이루어진다.
•
DOCTYPE
•
html
•
head
•
body
3. 기본 HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>첫 HTML 페이지입니다.</p>
</body>
</html>
HTML
복사
4. 코드 분석
DOCTYPE
<!DOCTYPE html>
HTML
복사
HTML5 문서라는 것을 브라우저에게 알려준다.
html 태그
<html lang="ko">
HTML
복사
HTML 문서의 루트 요소이다.
head 태그
<head>
<meta charset="UTF-8">
<title>My First Page</title>
</head>
HTML
복사
웹 페이지의 메타 정보가 들어간다.
예시
•
문자 인코딩
•
페이지 제목
•
CSS 파일
•
JavaScript 파일
body 태그
<body>
<h1>Hello World</h1>
<p>첫 HTML 페이지입니다.</p>
</body>
HTML
복사
브라우저 화면에 실제로 표시되는 영역이다.
5. 직접 실습
실습 코드
<!DOCTYPE html>
<html>
<head>
<title>My Profile</title>
</head>
<body>
<h1>AI 그랜드 마스터</h1>
<p>풀스택 개발자를 목표로 공부 중입니다.</p>
</body>
</html>
HTML
복사
6. 실행 결과
브라우저에서 실행하면 다음과 같이 표시된다.
7. 오늘 배운 것
•
HTML 문서는 기본 구조가 있다.
•
웹 페이지의 실제 내용은 body에 들어간다.
•
head에는 메타 정보가 들어간다.
8. 참고 자료
•
MDN HTML Documentation
•
W3Schools HTML Tutorial