<html>, <head>, <body> 태그
약 5분
HTML 기초 - HTML 문서 구조
안녕하세요! HTML 기초 강의에 오신 것을 환영합니다. 오늘 우리는 HTML 문서의 기본 구조를 배우게 될 것입니다. HTML은 웹 페이지의 뼈대와 같은 역할을 합니다. 쉽게 말해, 집을 짓기 위해서 골조를 세워야 하는 것과 비슷합니다. HTML 태그를 통해 웹 페이지의 다양한 부분을 정의할 수 있습니다.
<html> 태그
<html>
<!-- 여기에 내용을 추가합니다. -->
</html>위의 코드는 HTML 문서의 기본 구조를 보여줍니다. 태그는 문서의 시작을 알리며, 내부에 모든 내용을 포함해야 합니다.
<head> 태그
<head>
<meta charset="UTF-8">
<title>내 첫 번째 HTML 문서</title>
</head>위의 코드는 태그 안에 두 개의 중요한 요소를 포함하고 있습니다. 태그는 문자 인코딩을 알리는 역할을 하며, 태그는 웹 브라우저의 제목 표시줄에 문서의 제목을 표시합니다.
<body> 태그
<body>
<h1>안녕하세요, 저는 HTML을 배우고 있습니다!</h1>
<p>이것은 본문 내용입니다.</p>
</body>위의 코드는 태그 안에 제목과 문장을 포함하고 있습니다. 태그는 가장 큰 제목을 나타내고, 태그는 문단을 추가합니다.
이제 우리는 기본 HTML 문서의 구조를 배웠습니다. 다음은 전체 구조를 결합한 최종 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내 첫 번째 HTML 문서</title>
</head>
<body>
<h1>안녕하세요, 저는 HTML을 배우고 있습니다!</h1>
<p>이것은 본문 내용입니다.</p>
</body>
</html>이제 이 코드를 VS Code에 입력해보세요. 창을 열고 파일을 .html 확장자로 저장한 후 브라우저에서 열어보면 우리가 만든 첫 번째 웹 페이지를 확인할 수 있습니다.
핵심 요약
오늘은 HTML 문서의 기본 구조에 대해 배웠습니다. , , 태그는 각각 중요하며, 이들로부터 문서의 기반을 쌓을 수 있습니다.
실습 문제
- HTML 문서의 구조를 바탕으로 자신의 이름과 간단한 소개를 포함한 새로운 웹 페이지를 만들어 보세요. 과 태그를 사용하세요.
- 웹 브라우저에서 자신의 페이지를 열어보면서 결과를 확인하세요.
개인 프로젝트: 자기소개 페이지 만들기
이제 여러분만의 자기소개 페이지를 만들어보세요. 태그를 사용하여 제목을 작성하고, 태그를 사용하여 자신에 대한 정보를 추가할 수 있습니다. 스타일과 레이아웃은 여러분의 자유입니다. 흥미롭게도 여러분이 만든 페이지를 통해 자신의 이야기를 표현할 수 있습니다!
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.