[HTML/CSS/JS] 달력 (calendar) 만들기
2024. 1. 8. 16:59ㆍHTML + CSS+JS/Practice
반응형
<!DOCTYPE html>
<html>
<head>
<title>학사일정</title>
<link rel="stylesheet" href="./schedule.css">
</head>
<body>
<h3>학사일정</h3>
<div class="bar-container">
<div class="bar-contents"></div>
</div>
<ul id="date">
<li>
<img src="./images/left_arrow_16.png">
</li>
<li>2017년 6월</li>
<li>
<img src="./images/right_arrow_16.png">
</li>
</ul>
<table id="sched_tbl">
<tr id="day">
<td>
<span class="red">일</span>
</td>
<td>월</td>
<td>화</td>
<td>수</td>
<td>목</td>
<td>금</td>
<td>
<span class="blue">토</span>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>
<span class="blue">5</span>
</td>
</tr>
<tr>
<td>
<span class="red">6</span>
</td>
<td>7</td>
<td>8</td>
<td>
9
<br>
특강
</td>
<td>10</td>
<td>11</td>
<td>
<span class="blue">12</span>
</td>
</tr>
<tr>
<td>
<span class="red">13</span>
</td>
<td>
14
<br>
기말고사
</td>
<td>
15
<br>
기말고사
</td>
<td>
16
<br>
기말고사
</td>
<td>
17
<br>
기말고사
</td>
<td>
18
<br>
기말고사
</td>
<td>
<span class="blue">19</span>
</td>
</tr>
<tr>
<td>
<span class="red">20</span>
</td>
<td>
21
<br>
하계방학
</td>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>
<span class="blue">26</span>
</td>
</tr>
<tr>
<td>
<span class="red">27</span>
</td>
<td>28</td>
<td>
29
<br>
MT
</td>
<td>
30
<br>
MT
</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>body {
color: #444444;
font-size: 12px;
font-family: '돋움', 'Dotum';
}
table, th, td {
border: 1px solid #aaaaaa;
}
table {
border-collapse: collapse;
}
tr {
height: 60px;
vertical-align: top;
}
td {
width: 76px;
padding: 5px;
}
.bar-container {
width: 630px;
height: 4px;
margin-top: -8px;
margin-bottom: 16px;
background-color: #e7e7e7;
}
.bar-contents {
width: 116px;
height: 100%;
background-color: #bbc6b6;
}
#date {
margin-top: 10px;
margin-left: 210px;
font-size: 14px;
display: flex;
list-style-type: none;
}
#sched_tbl {
margin-top: 15px;
border-top: 2px solid #aaaaaa;
}
#day {
height: 20px;
background-color: #f8f9f2;
font-weight: bold;
text-align: center;
}
.red {
color: red;
}
.blue {
color: blue;
}반응형
'HTML + CSS+JS > Practice' 카테고리의 다른 글
| [HTML/CSS/JS] 회원가입화면 만들기 (0) | 2024.01.08 |
|---|---|
| [HTML/CSS/JS] 로그인(login)화면 만들기 (2) | 2024.01.08 |
| [HTML/CSS/JS] table 생성 (0) | 2024.01.08 |
| [HTML/CSS/JS] text 출력 실습 (0) | 2024.01.08 |