학교에서 종강 과제로 웹페이지를 만들라고 하였다.
평소 천문학자가 꿈이였던 나는 천문 달력을 웹페이지로 만들었다.
내 웹페이지는 큰 웹페이지 안에 iframe으로 작은 웹페이지가 있는 형태인데...
이게 그 메인 웹페이지이다.
최대한 배운걸 알차게 써넣었다.
<html>
<!DOCTYPE html>
<html>
<head>
<title>Astronomical Calendar</title>
<link rel="stylesheet" href="style.css">
<script src="script.js">
</script>
<style>
.wordArt
{
color:white;
text-shadow:0px 0px 3px white ;
}
input[type=text]:hover{
background:aliceblue;
}
</style>
</head>
<body>
<header>
<h1><div class="wordArt">Astronomical Calendar</div></h1>
<h4 style="color: white;text-align:center;">in 2023</h4>
</header>
<iframe id="month-events"src="이달의 천문현상.html"></iframe>
<iframe id="calendar"src="캘린더 5.html"></iframe>
<iframe id="opinion"src="opinion.html"></iframe>
<footer>
<p>Copyright © 2023 Astronomical Calendar by KASI<br>
© KYWA YouTube,GNSM YouTube <br>
© Sky Tonight<br>
© 모든 사진과 문서의 저작권은 저와 저와 같이 활동했던 천체관측동아리 부원들에게 있습니다.함부로 퍼나르지 말아주세요!!!</p>
<form name="fo" method="get" >
사용자 id: <input type="text" size="15" value=""placeholder="아이디를 입력하세요"> <br>
비밀 번호: <input typr="password" size="15" value="">
<input type="submit" value="submit">
</form>
<div style="text-align: center;position: relative; top: -3em;">
<a href="result.html" id="a" target="_parent" style="color: white;">천체동아리 결과물 보기</a>
/
<a href="result2.html" id="b" target="_blank"style="color: white;">교수님께 드리고싶은 말</a>
</div>
</footer>
</body>
</html><css>
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #000000;
color: #ffffff;
height: 120px;
padding: 20px;
text-align: center;
}
main {
margin: 0;
padding: 0;
}
section {
margin: 0;
padding: 0px;
}
ul {
list-style-type: none;
}
li {
margin: 0;
padding: 10px;
}
a {
color: #000000;
text-decoration: none;
}
img {
max-width: 100%;
}
footer {
background-color: #000000;
color: #ffffff;
height: 120px;
padding: 20px;
bottom: 0;
left: 0;
clear:both;
}
footer form {
text-align: right;
position: relative;
top: -5em;
}
#month-events {
border: 1px solid black;
width: 25%;
height: 900px;
}
#calendar {
border: 1px solid black;
width: 59%;
height: 900px;
}
#opinion {
border: 1px solid black;
width: 15%;
height: 900px;
}<javascript>
// Get the current date
var date = new Date();
// Get the month and day of the week
var month = date.getMonth();
var day = date.getDay();
// Get the astronomical events for the current month
var events = [
{
name: "Solar Eclipse",
date: "March 8, 2023"
},
{
name: "Mercury Retrograde",
date: "April 10, 2023"
}
];
// Display the astronomical events on the calendar
$('.events ul').html(events.map(function(event) {
return `<li><a href="#">${event.name}</a> <p>${event.date}</p></li>`;
}).join(''));사실 처음에 막막해서 바드의 힘을 빌렸다.
근데 막상 만들어보니 시험공부 할때보다 더 많은걸 얻었던것 같다.
'대학교 1-1 > 인프' 카테고리의 다른 글
| 작동되는 웹페이지의 모습 (0) | 2023.06.15 |
|---|---|
| 웹페이지 종강 과제5 (0) | 2023.06.15 |
| 웹페이지 종강 과제4 (0) | 2023.06.15 |
| 웹페이지 종강 과제3 (0) | 2023.06.15 |
| 웹페이지 종강 과제2 (0) | 2023.06.15 |