홈페이지 : https://project.myeo.ng/2020-HTML
소스코드 : https://github.com/hanjm-github/2020-HTML
2020학년도 울산광역시강남교육지원청영재교육원 초등정보6과정 정보영역 탐구과제
2020학년도 울산광역시강남교육지원청영재교육원 영재교육산출물발표회 수상작
- 주제 : 지구온난화 소개 HTML 홈페이지
- 2020년도에 제작한 보고서를 그대로 업로드 하였습니다.
- 일부 사진이 업로드 되지 않았습니다.
- hwp 보고서를 변환해 업로드하는 바람에 컴퓨터에 적절한 글꼴이 없을 시 보고서를 열람하는 것이 불가능 할 수 있습니다.
2020학년도
강남영재교육원 산출물 발표회
초등 6학년
정보영역 탐구과제 최종보고서
주제
지구온난화 소개 HTML 홈페이지
제 출 자
과 정
영역
학 교 명
이 름
초등정보6
—-
초등학교
한종명
지도교사
2020. 9. 19. (토)
울산광역시강남교육지원청영재교육원
www.usgne.go.kr
– 1 –
1. 탐구 동기
2. 이론적 배경
1. HTML
2. CSS
3. 사용한 프로그램
1. Visual Studio Code
2. Whale 브라우저
3. 그림판
4. 제작 과정
5. 제작 결과
6. 제작 소감
– 2 –
1.
탐구 동기최근 급격한 산업화로 인해 붉어지고 있는 지구 온난화를 최근 배우게 된 HTML
로 소개하고 싶어 홈페이지를 만들게 되었습니다.
2. 이론적 배경
HTML
1)HTML이란
HTML(HyperText Mark-up Language)은 웹 문서를 만들기 위하여 사용하는
기본적인 웹 언어의 한 종류입니다. 티머시 J. 버너스리가 처음 제안하였습니다.
하이퍼 텍스트를 작성하기 위해 개발 되었습 니다. 하이퍼 텍스트를 이용하여 원
하는 웹 문서에 바로갈 수 있다는 장점이 있습니다. 인터넷에서 웹을 통해 접근
되는 대부분의 웹 페이지들은 HTML로 작성 됩니다. HTML은 1991년에 HTML
1.0이 나오고 2017년에 HTML 5.2가 나왔습니다.
2)HTML의 구조
HTML의 태그는 <시작 태그>속성=“속성값”<끝태그>입니다. 속성과 속성 값은
여러개 들어갈 수도 있습니다. <br> <img>등 독립 태그도 있습니다.
CSS
1)CSS란
CSS(Cascading Style Sheet)는 웹 문서의 전반적인 스타일을 미리 저장해둔 스
타일 시트입니다. 문서 전체의 일관성을 유지할 수 있고 세세한 스타일 지정의 필
요를 줄어들게 하였습니다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시
로 변경하는데 많은 제약이 따르는데, 이를 보안하기 위해 만들어진 것이 스타일
시트이고 스타일 시트의 표준안이 바로 CSS입니다. CSS는 W3C에서 처음 발표
했으며 1996년에 첫 버전이 나온뒤 2011년에 CSS 2.1이 나왔습니다.
2)CSS의 HTML적용
<p style=“color : blue”>asdf</p>처럼 태그에 직접 적용하거나 <style> p
{color: blue;}</style> 같이 모든 p요소의 글자를 바꿀 수도 있습니다. 또한 별도
의 CSS파일을 만들고 HTML문서와 연결 할 수도 있습니다.
– 3 –
3. 사용한 프로그램
1)Visual Studio Code
이 프로그램으로 HTML코드를
작성하였습니다. 일부 작성후 확인
을 하는 방법으로 조금씩 완성했습
니다.
2)Whale 브라우저
만든 페이지를 브라우저에서 테
스트 하고 수정할 점이 없는지 확
인 했습니다.
3)그림판
HTML과 보고서에 들어갈 사진
의 크기를 변경했습니다.
4. 제작 과정
1. 인터넷에서 지구온난화에 대해 조사하여
기본적인 HTML의 틀을 잡았습니다.
2. 글의 내용에 맞는 하이퍼 링크를 넣었습
니다.
3. 이미지 태그를 활용하여 이미지를 삼입하
였습니다.
4. iframe 태그를 사용하여 유튜브 영상을 넣
었습니다.
5. 그후 CSS를 활용해 글의 모양을 지정했습
니다.
6. 마지막으로 CSS를 활용한 에니메이션을
넣었습니다.
– 4 –
5. 제작 결과
제목에는 상자를 만들어 제목을
넣고 사진을 넣은후 옆으로 길어
졌다가 줄어드는 에니메이션을 넣
었습니다.
내용에는 조사한 내용을 바탕으로 문단의
제목과 문단의 내용을 넣었습니다. 추가로
사진을 넣고 하이퍼 링크를 넣었습니다.
제목에는 글꼴과 하이퍼링크, 그림자 등을
CSS를 활용해 넣었습니다.
완성된 홈페이지
6. 제작 소감
처음에는 어려울 것 같았는데 인터넷이 생각보다 많은 것을 알려줘서 도움이 많
이 되었습니다. 시간은 오래 걸렸지만 완성하니 뿌듯했습니다. 시간이 짧아서 내
용이 많지 않은게 아쉽습니다.
– 5 –
7. 참고한 자료
https://www.codingfactory.net/
https://terms.naver.com/entry.nhn?docId=1168097&cid=40942&categoryId=32838
https://terms.naver.com/entry.nhn?docId=1179641&cid=40942&categoryId=32854
등
8. 사용한 코드
HTML 태그
title 태그 : 제목을 설정
style 태그 : css 설정
a 태그 : 하이퍼 링크를 지정
br 태그 : 줄바꿈
img 태그 : 이미지 넣기
h1 , h2 태그 : 제목 설정
p 태그 : 문단 설정
iframe : 외부 페이지 넣기
blockquote : 인용문 설정
CSS 속성
text-align : 글자 정렬
color : 글자 색 설정
text-shadow : 그림자 설정
font-family : 글꼴 설정
font-size : 글자 크기 설정
[메모:1] Administrator
2020-09-15 17:38
발표 하지 않을 예정
– 6 –
전체 코드
<!DOCTYPE html>
<html lang=“ko”>
<head>
<!–컴퓨터용 크롬에서만 의도하는데로 동작하는 듯…–>
<meta charset=“utf-8” http-equiv=“X-UA-Compatible” content=“IE=edge,chrome=1”>
<title>지구온난화</title> <!–제목–>
<link rel=“shortcut icon” href=“image/icon.png”> <!–아이콘 설정–>
<link href=“https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Gugi&family=Jua&display=swap” rel=“stylesheet”> <!–구
글 웹 폰트 불러 오기–>
<style>
h1 {margin: 20px; padding:30px; text-align:left; border: 8px inset black; width:53%; box-shadow: 5px 5px 5px gray;
background-image: url(“image/burningearth.jpg”); background-position-x: 60%; background-position-y: 5%; background-repeat: no-
repeat; background-color: black; color: white; font-family: “Gugi”,cursive; font-size: xx-large; text-shadow: 3px 2px 4px gray;
animation-name: wid; animation-duration: 2s;}
h2 {font-family:“Jua”,sans-serif; font-size: x-large; color: black; text-align: left; text-shadow: 2px 2px 4px gray
;} h2::before {content:“”;}
p {font-family: “Do Hyeon”,sans-serif; font-size: 20px; color: black; text-align:“left”;}
a:link {color: blue; text-decoration: none;} a:visited {color: purple; text-decoration: none;} a:hover {color: red;
text-decoration: none;}
blockquote::before {content: “\201C“; font-size: 3em; font-family: “Georgia”;color: #bcbcbc; float:left; margin: -5
px 10px 0px -10px;} blockquote {font-family: “Jua”; font-size: large; color: black; text-shadow: 1px 1px 1px gray;}
@keyframes wid { from { width: 400%;} to { width:53%;}}
</style>
</head>
<body style=“background-color: white;”>
<h1>지구온난화</h1> <!–주제–>
<br>
<h2> <a href=http://me2.do/GvFyGNFI target=“_blank”>지구온난화는 무엇인가?</a></h2> <!–하이퍼링크 연결 주소는 출처, 새 탭에서
열림–>
<p>
넓은 의미에서 지구온난화는 장기간에 걸쳐 전지구 평균 지표면 기온이 상승하는 것을 의미합니다.
<br>하지만 좀더 일반적으로 지구온난화는 산업혁명 이후 전지구 지표면 평균기온이 상승하는 것 으로 정의 됩니다.
</p>
<img src=“image/gionbeonha.jpg” alt=“지구 평균 기온의 변화”>
<p>☝지구 평균기온의 변화</p>
<br>
<h2> <a href=http://me2.do/GI7oAUJz target=“_blank”>지구온난화의 원인</a></h2> <!–하이퍼링크 연결 주소는 출처, 새 탭에서 열림
–>
<p>
태양으로부터 방출된 에너지는 지구에 도달한 후 다시 우주로 방출 됩니다. 이때 대기권의 온실 가스층에 의해 우주로 방출 되는 양
이 들어오는 양보다 적거나 같으면 지구의 온도가 일정하게 유지 됩니다.
<br>하지만 화석연료의 사용으로 온실 가스층이 두꺼워 지면 지구에서 방출되는 지구에서 나가는 에너지양이 감소하면서 지구의 평균기온
이 오르게 됩니다.
</p>
<img src=“image/onsilno.jpg” alt=“온실 효과가 없을때” width=“200”>
<img src=“image/onsilyes.jpg” alt=“온실 효과가 있을때” width=“200”>
<br>
<h2> <a href=“http://me2.do/FBEZoDcS” target=“_blank”>지구온난화의 영향</a></h2> <!–하이퍼링크 연결 주소는 출처, 새 탭에서
열림–>
<p>
지구 곳곳에서 감지되는 기후변화는 온생태계에까지 영향을 미치고 있습니다.
<br>서식지가 사라지거나 먹이가 없어져 일부 동식물이 이미 지구에서 사라졌으며, 더 많은 종이 멸종위기에 처하게 되었습니다.
<br>지금과 같은 추세로 생물종이 사라진다면 20년 후에는 100만 여 종에 달하는 생물이 사라지게 될 것이라고 합니다.
<br>지구의 기온 상승때문에 해수면이 상승하고 빙하가 감소하면서 또 다른 큰 문제가 생깁니다.
</p> <br>
<h2> <a href=“http://me2.do/GgxlpQBq” target=“_blank”>지구온난화를 막기 위해 우리가 할 수 있는 일</a></h2> <!–하이퍼링크 연결
주소는 출처, 새 탭에서 열림–>
<p>
에어컨이나 히터등의 사용을 줄입니다. 에너지 효율적인 가전 제품을 사용 합니다. 물 낭비를 줄이세요. 식사에서 고기를 줄여
요. LED를 사용하세요. 사용하지 않는 전기 장치들의 플러그를 뽑으세요.
</p>
<br>
<br>
<iframe allowfullscreen width=“640” height=“360” src=“https://www.youtube-nocookie.com/embed/EbjKcHPmxKQ?rel=0”></ifram
e> <!–유튜브–>
<blockquote>지구 온난화를 막는 것은 지구를 위한것이 아닌 우리를 위한것 입니다.</blockquote> <!–위내용의 일부–>
<br>
<br>
<h2> 참고한 자료</h2>
<p>
<a href=http://me2.do/GvFyGNFI target=“_blank”>네이버 지식백과 지구온난화
</a> <br> <!–https://terms.naver.com/entry.nhn?cid=64656&docId=5702225&categoryId=64656–>
<a href=http://me2.do/GI7oAUJz target=“_blank”>네이버 지식백과 지구온난화의 원인
</a> <br> <!–https://terms.naver.com/entry.nhn?cid=47340&docId=1523080&categoryId=47340–>
<a href=“http://me2.do/FBEZoDcS” target=“_blank”>네이버 지식백과 지구온난화의 영향
</a> <br><!–https://terms.naver.com/entry.nhn?cid=47340&docId=1523081&categoryId=47340&expCategoryId=47340–>
<a href=“http://me2.do/GgxlpQBq” target=“_blank”>NRDC : How You Can Stop Global Warming</a> <br><!–https://www.nrdc.or
g/stories/how-you-can-stop-global-warming–>
<a href=“https://youtu.be/EbjKcHPmxKQ” target=“_blank”>유튜브 채널
Vox : What people get wrong about climate change</a> <br>
<a href=“https://www.codingfactory.net/” target=“_blank”>코딩 팩토리</a> <br>
<a href=“https://pixabay.com/” target=“_blank”>사진 : 픽사베이</a> <br>
<a href=“https://fonts.google.com/” target=“_blank”>글꼴 : 구글 웹폰트</a> <br>
</p>
</body>
</html>
답글 남기기