교사는 학생들에게 안내할 것이 있을때 다양한 매체를 활용합니다.
가장 먼저 canva나 미리캔버스가 떠오릅니다. 그 다음으로는 한글 문서가 떠오릅니다. 경우에 따라서는 ppt를 쓸 수도 있겠습니다.
하지만 코딩이 대세된 지금, 조금 색다른 방법을 떠올릴 수도 있습니다. 그것은 바로 html입니다.
html은 웹페이지를 만드는 프로그래밍 언어로써(엄밀히 말하면 프로그래밍 언어는 아니지만..) 조금만 시간을 들이면 누구나 쉽게 익힐 수 있습니다.
html로 작성하여 공유하게 되면, 다른 프로그램과 달리 글자 크기, 화면 폭이 유동적으로 바뀌기 때문에 어떤 기기로 보든 뛰어난 가독성을 확보할 수 있습니다. 그리고 내용이 잘못되었을때 쉽게 고칠 수 있습니다. 무엇보다 파일을 올리는 것이 아니기 때문에 쉽게 어디서든 열람할 수 있습니다.
이 글에서는 html을 이용해 학생들에게 안내문을 만드는 요령을 알려드리겠습니다.
1. 글 작성하기
초등학생을 위한 가정통신문을 gpt로 만들어보았습니다.
복사 버튼을 누르면, 복사를 간단하게 할 수 있습니다.
gpt는 마크다운으로 글을 작성합니다. 복사하신 상태에서, 티스토리에 마크다운으로 붙여넣기를 하면 마크다운 형태의 글을 만들 수 있습니다.
https://gradientdescent.tistory.com/100
가정통신문 예시
🎒 2025학년도 ○○초등학교 현장학습 안내문 🎒친애하는 ○○초 친구들, 안녕하세요!설레는 봄날, 우리 반이 함께 자연 속으로 소풍을 떠나요. 아래 내용을 잘 읽고, 즐겁고 안전한 현장학습이
gradientdescent.tistory.com
마크다운으로 붙여넣기를 하게되면 위와 같은 형태의 글이 나옵니다.
2. html로 만들기
마크다운도 나름 쓸만한 규격이지만, html을 활용하면 글 자체를 더욱 다채롭게 꾸밀 수 있습니다.
아래는 gpt가 쓴 글을 그냥 복사했을때의 글입니다.
🎒 **2025학년도 ○○초등학교 현장학습 안내문** 🎒
친애하는 ○○초 친구들, 안녕하세요!
설레는 봄날, 우리 반이 함께 자연 속으로 소풍을 떠나요. 아래 내용을 잘 읽고, 즐겁고 안전한 현장학습이 되도록 준비해 주세요!
---
## 1. 언제 & 어디로 갈까요?
| 날짜 | 장소 | 모이는 시간 | 돌아오는 시간 |
| ------------------- | ---------- | ---------------------- | ------------------------ |
| **2025년 5월 9일 (금)** | **○○생태공원** | **오전 8시 30분** (학교 운동장) | **오후 3시 30분** (학교 도착 예정) |
---
## 2. 무엇을 챙길까요? (준비물 체크리스트)
| ✅ 준비물 | 메모 |
| -------------- | ------------------------ |
| 도시락 & 물 | 일회용품 대신 다회용 용기와 수저를 사용해요 |
| 개인 물티슈 & 손 세정제 | 깨끗한 손이 최고! |
| 돗자리 | 1인용 크기면 충분해요 |
| 모자 & 자외선 차단제 | 햇볕 차단, 내 피부 보호! |
| 긴 소매 겉옷 | 아침‧저녁은 쌀쌀할 수 있어요 |
| 간단한 간식 | 과자나 과일, 너무 많이 가져오지 않기 |
| 쓰레기 봉투 | “우리가 만든 쓰레기는 우리가 가져오기!” |
| 이름표가 붙은 작은 가방 | 개인 물건은 내가 책임져요 😊 |
---
## 3. 지켜야 할 약속 (안전‧질서)
1. **선생님‧친구들과 한눈에 보이는 거리**를 유지해요.
2. **뛰어다니거나 위험한 장난**은 절대 금지!
3. **공원의 식물·곤충**은 눈으로만 관찰해요. 꺾거나 잡지 않기.
4. 쓰레기는 꼭 **분리수거** 후 되가져오기.
5. **버스 안**에서는 안전벨트를 매고 이동 중에는 자리에서 일어나지 않아요.
6. 모르는 사람을 따라가지 않기! 어려움이 있으면 즉시 **선생님께 알리기**.
7. 우리 반 **대표로 예의 바르게 행동**해요. “안녕하세요”, “감사합니다”를 잊지 않기!
---
## 4. 비상 연락처
| 담당 | 이름 | 연락처 |
| ------ | --- | ------------- |
| 담임선생님 | 김가람 | 010-1234-5678 |
| 인솔 교사 | 이보람 | 010-5678-1234 |
| 학교 행정실 | - | 02-000-0000 |
---
## 5. 우천 시 안내
* **당일 오전 7시** 기상청 예보 기준 **비 소식이 60 % 이상**이면 **행사는 1주 뒤(5월 16일 금)**로 연기돼요.
* 연기 여부는 **학교 알리미 앱**과 **가정통신문**으로 안내드립니다.
---
### 함께하는 마음가짐
“놀 때는 신나게, 안전은 철저하게!”
친구들과 자연을 만끽하며 잊지 못할 추억을 만들어 보아요.
모두 **시간 약속**을 꼭 지키고, 준비물 체크도 잊지 마세요!
---
**○○초등학교 3학년 담임 김가람 드림**
*(궁금한 점이 있으면 언제든 질문해 주세요!)*
위 텍스트를 복사하고,
AI Studio에 붙여넣은 뒤에, html로 만들어 달라고 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2025학년도 ○○초등학교 현장학습 안내문</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
body {
font-family: 'Noto Sans KR', sans-serif;
background-color: #f4f7f6;
color: #333;
line-height: 1.8;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 20px auto;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 30px 40px;
}
h1 {
text-align: center;
color: #0056b3;
font-size: 2em;
margin-bottom: 20px;
}
h2 {
color: #007bff;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
margin-top: 40px;
font-size: 1.5em;
}
h3 {
text-align: center;
color: #28a745;
margin-top: 40px;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
font-size: 1em;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
vertical-align: middle;
}
th {
background-color: #f8f9fa;
font-weight: 700;
}
td strong {
color: #d9534f;
}
ul, ol {
padding-left: 20px;
}
li {
margin-bottom: 10px;
}
li strong {
color: #17a2b8;
}
.signature {
text-align: right;
margin-top: 50px;
font-weight: bold;
font-size: 1.1em;
}
.signature-note {
text-align: right;
font-style: italic;
color: #6c757d;
margin-top: 5px;
}
.quote {
text-align: center;
font-size: 1.2em;
font-weight: bold;
color: #333;
margin: 20px 0;
padding: 15px;
background-color: #e9f5ff;
border-left: 5px solid #007bff;
}
hr {
border: 0;
height: 1px;
background: #ddd;
margin: 40px 0;
}
</style>
</head>
<body>
<div class="container">
<h1>🎒 2025학년도 ○○초등학교 현장학습 안내문 🎒</h1>
<p>친애하는 ○○초 친구들, 안녕하세요!<br>
설레는 봄날, 우리 반이 함께 자연 속으로 소풍을 떠나요. 아래 내용을 잘 읽고, 즐겁고 안전한 현장학습이 되도록 준비해 주세요!</p>
<hr>
<h2>1. 언제 & 어디로 갈까요?</h2>
<table>
<thead>
<tr>
<th>날짜</th>
<th>장소</th>
<th>모이는 시간</th>
<th>돌아오는 시간</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>2025년 5월 9일 (금)</strong></td>
<td><strong>○○생태공원</strong></td>
<td><strong>오전 8시 30분</strong> (학교 운동장)</td>
<td><strong>오후 3시 30분</strong> (학교 도착 예정)</td>
</tr>
</tbody>
</table>
<hr>
<h2>2. 무엇을 챙길까요? (준비물 체크리스트)</h2>
<table>
<thead>
<tr>
<th>✅ 준비물</th>
<th>메모</th>
</tr>
</thead>
<tbody>
<tr>
<td>도시락 & 물</td>
<td>일회용품 대신 다회용 용기와 수저를 사용해요</td>
</tr>
<tr>
<td>개인 물티슈 & 손 세정제</td>
<td>깨끗한 손이 최고!</td>
</tr>
<tr>
<td>돗자리</td>
<td>1인용 크기면 충분해요</td>
</tr>
<tr>
<td>모자 & 자외선 차단제</td>
<td>햇볕 차단, 내 피부 보호!</td>
</tr>
<tr>
<td>긴 소매 겉옷</td>
<td>아침‧저녁은 쌀쌀할 수 있어요</td>
</tr>
<tr>
<td>간단한 간식</td>
<td>과자나 과일, 너무 많이 가져오지 않기</td>
</tr>
<tr>
<td>쓰레기 봉투</td>
<td>“우리가 만든 쓰레기는 우리가 가져오기!”</td>
</tr>
<tr>
<td>이름표가 붙은 작은 가방</td>
<td>개인 물건은 내가 책임져요 😊</td>
</tr>
</tbody>
</table>
<hr>
<h2>3. 지켜야 할 약속 (안전‧질서)</h2>
<ol>
<li><strong>선생님‧친구들과 한눈에 보이는 거리</strong>를 유지해요.</li>
<li><strong>뛰어다니거나 위험한 장난</strong>은 절대 금지!</li>
<li><strong>공원의 식물·곤충</strong>은 눈으로만 관찰해요. 꺾거나 잡지 않기.</li>
<li>쓰레기는 꼭 <strong>분리수거</strong> 후 되가져오기.</li>
<li><strong>버스 안</strong>에서는 안전벨트를 매고 이동 중에는 자리에서 일어나지 않아요.</li>
<li>모르는 사람을 따라가지 않기! 어려움이 있으면 즉시 <strong>선생님께 알리기</strong>.</li>
<li>우리 반 <strong>대표로 예의 바르게 행동</strong>해요. “안녕하세요”, “감사합니다”를 잊지 않기!</li>
</ol>
<hr>
<h2>4. 비상 연락처</h2>
<table>
<thead>
<tr>
<th>담당</th>
<th>이름</th>
<th>연락처</th>
</tr>
</thead>
<tbody>
<tr>
<td>담임선생님</td>
<td>김가람</td>
<td>010-1234-5678</td>
</tr>
<tr>
<td>인솔 교사</td>
<td>이보람</td>
<td>010-5678-1234</td>
</tr>
<tr>
<td>학교 행정실</td>
<td>-</td>
<td>02-000-0000</td>
</tr>
</tbody>
</table>
<hr>
<h2>5. 우천 시 안내</h2>
<ul>
<li><strong>당일 오전 7시</strong> 기상청 예보 기준 <strong>비 소식이 60% 이상</strong>이면 <strong>행사는 1주 뒤(5월 16일 금)</strong>로 연기돼요.</li>
<li>연기 여부는 <strong>학교 알리미 앱</strong>과 <strong>가정통신문</strong>으로 안내드립니다.</li>
</ul>
<hr>
<h3>함께하는 마음가짐</h3>
<p class="quote">“놀 때는 신나게, 안전은 철저하게!”</p>
<p style="text-align: center;">친구들과 자연을 만끽하며 잊지 못할 추억을 만들어 보아요.<br>
모두 <strong>시간 약속</strong>을 꼭 지키고, 준비물 체크도 잊지 마세요!</p>
<p class="signature">○○초등학교 3학년 담임 김가람 드림</p>
<p class="signature-note">(궁금한 점이 있으면 언제든 질문해 주세요!)</p>
</div>
</body>
</html>
그러면 이렇게 html을 만들어줍니다. 이 html 코드를 어딘가에 게시해야 다른 사람이 볼 수 있습니다.
3. CodePen에 게시하기
장기저장용이 아니라 학생들에게 안내하는 용으로는
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
CodePen 이 사이트를 추천합니다.
회원가입을 하고, 로그인을 한 다음, Pen을 누르고, 붙여넣기를 하면 웹페이지가 완성됩니다.
See the Pen Untitled by grad (@iaypqrln-the-sasster) on CodePen.
codepen 완성본은 위와 같습니다.
4. 공유하기
저장버튼을 누르고, 전체화면 버튼을 누릅니다.
이때, 이메일을 인증하라는 창이 뜨는데, 가입할때 등록한 이메일로 접속하시면 전체화면 기능을 활성화 할 수 있습니다.
그 때 나오는 화면의 주소가 여러분이 학생들에게 공유해야하는 주소입니다. 학생들은 저 주소를 통해 안내문을 보게 됩니다. 이 방법의 장점은 안내문을 수정하기가 용이하다는 것이고, js를 이용하면 좀 더 역동적인 안내문을 만들 수 있다는 것입니다.
'교사 업무 개선' 카테고리의 다른 글
| 책(ebook) 무료로 다운로드 받는 사이트 (4) | 2025.07.27 |
|---|---|
| 구글 스프레드시트에 데이터를 입력하면 자동 테두리 생성 (0) | 2025.07.19 |
| 특정 폴더의 파일 이름을 추출하는 프로그램(python) (0) | 2025.07.15 |
| 나이스 과세특 엑셀 파일 글자수 자동 계산 프로그램 (0) | 2025.07.14 |
| 나이스에 과목별세부특기사항(과세특) 한꺼번에 올리기 (1) | 2025.07.14 |