**도입**
**전개**
**정리**
자기 소개 웹페이지 관찰해보기
HTML 기본 태그(tag)에 대해 알아보기
웹페이지로 저장하고 실행해보기
배운 내용을 활용하여 나만의 웹페이지 만들어보기
게시 및 발표
✅ HTML이란?
웹페이지의 뼈대를 만드는 언어
• HTML은 HyperText Markup Language의 줄임말입니다.
• 우리가 보는 **웹페이지의 구조(틀)**를 만드는 데 사용됩니다.
• 예를 들어 웹페이지에 제목, 문단, 이미지, 링크 등을 넣을 수 있습니다.
• 마치 건물의 기둥과 벽, 문, 창문을 만드는 것과 같습니다.
📌 예시
<h1>안녕하세요!</h1>
<p>이것은 HTML 문단입니다.</p>
<img src="apple.jpg" alt="사과 이미지">
• <h1> : 제목을 만드는 태그
• <p> : 문단을 만드는 태그
• <img> : 이미지를 넣는 태그
✅ CSS란?
웹페이지의 옷과 색깔, 꾸밈 효과를 담당하는 언어
• CSS는 Cascading Style Sheets의 줄임말입니다.
• HTML로 만든 뼈대를 예쁘게 꾸며주는 역할을 합니다.
• 글자 색, 크기, 배경색, 정렬 방식 등을 바꿀 수 있습니다.
• 마치 인형에게 옷을 입히고 꾸미는 것과 비슷합니다.
📌 예시
h1 {
color: blue;
font-size: 32px;
text-align: center;
}
✅ HTML + CSS 함께 쓰기
HTML로 구조 만들고, CSS로 꾸민다!
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 40px;
}
p {
color: gray;
}
</style>
</head>
<body>
<h1>우리 반 홈페이지</h1>
<p>여기는 우리 반의 소식을 전하는 곳입니다.</p>
</body>
</html>
✅ 교사가 학생에게 이렇게 설명해보세요
• HTML은 무엇을 보여줄지 정합니다. (제목, 문단, 이미지 등)
• CSS는 어떻게 보일지 정합니다. (색, 크기, 정렬 등)
• 둘 다 함께 쓰면 보기 좋고, 내용이 있는 웹페이지를 만들 수 있어요.
• 복잡한 코딩이 아니라, 문법만 익히면 누구나 만들 수 있는 퍼즐 맞추기 같다고 설명해주세요.
