더드림컴퓨터클래스I 아홉번째 수업이 은혜가운데 잘 마무리 되었습니다.
오늘 수업은 지난 시간 수업을 간략하게 복습하였고, <div>태그 에 class를 추가하여 각 부분의 class이름을 불러와 스타일링을 하는 <style>실습을 지난 시간부터 시작한 웹프로필 만들기에 적용하는 시간을 가졌습니다.
아래는 아이들이 오늘까지 만들어낸 내용입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>아이들의 소개서</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
.pro {
width: 80%;
max-width: 800px;
margin: 0 auto;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 20px;
border-radius: 10px;
}
.header {
text-align: center;
background-color: #4CAF50;
color: white;
padding: 20px;
border-radius: 10px 10px 0 0;
}
</style>
</head>
<body>
<div class="pro">
<div class="header">
<h1>누구의 소개서</h1>
</div>
<div class="inform">
<div class="photo">
<img src="profile.jpg" alt="프로필 사진">
</div>
<div class="profile">
<div class="contents">
<h2>개인정보</h2>
<table>
<tr>
<th>항목</th>
<th>내용</th>
</tr>
<tr>
<td><strong>이름</strong></td>
<td>본인의 이름</td>
</tr>
<tr>
<td><strong>생년월일</strong></td>
<td>본인의 생년월일</td>
</tr>
<tr>
<td><strong>소속</strong></td>
<td>소속학교</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
이제 웹페이지를 직접 작성하는 연습을 시작했습니다. 지난 주보다 더 어려워하는 아이들입니다. 그래도 끝까지 잘 따라오려고 노력하는 모습 보니 기쁩니다.
수업평가
7세 - 9세
수업 참여도 3/5
수업 이해도 1/5
10세 - 14세
수업 참여도 5/5
수업 이해도 2.5/5
이제 웹페이지를 작성하면서 결과들을 그때그때 확인하면서 스타일링을 자신들이 원하는 방식대로 바꿔보고 기뻐하고, 다음주를 더 기대하는 아이들입니다. 7세-9세 아이들에게는 너무 어려운 내용이기에 수업이해도가 없는 것은 당연합니다. 하지만, 내년 반복 수업에서는 분명 결과가 나올 것이라 확신합니다.
