반응형
HTML과 CSS 공부하면서 만든 일정관리 달력입니다 - 책 보고 만들었습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
/*
* 아래쪽에 있는 스타일을 여기에 복사하면 됩니다.
*/
</style>
</head>
<body>
<h3>캘린더</h3>
<div>◀ 4월 ▶</div>
<table>
<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</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>체육대회</td>
<td>30<br>체육대회</td>
<td>31</td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
스타일을 적용하기 전의 모양은 아래와 같습니다.
반응형
CSS(스타일시트)입니다. 위 코드의 <style></style> 사이에 복사하거나 외부 스타일로 정의하면 됩니다.
body {
color: #444444;
}
h3 {
border-left: solid 5px green;
padding-left: 10px;
}
div {
width: 610px;
text-align: right;
}
table, td {
border: solid 1px #aaaaaa;
}
table {
border-collapse: collapse;
}
table {
width: 610px;
font-size: 12px;
border-top: solid 2px #aaaaaa;
margin-top: 15px;
}
tr {
height: 60px;
vertical-align: top;
}
td {
width: 76px;
padding: 5px;
}
#day {
height: 20px;
background-color: #f8f9f2;
text-align: center;
font-weight: bold;
}
.red {
color: red;
}
.blue {
color: blue;
}
728x90
반응형
'HTML_CSS' 카테고리의 다른 글
| (HTML CSS) iframe 사용하기 (0) | 2023.09.21 |
|---|---|
| HTML 시멘틱 태그를 사용한 2단 레이아웃 (0) | 2022.11.14 |
| (HTML/CSS) 2단 레이아웃 (0) | 2022.11.02 |
| (HTML/CSS) 웹 폰트 사용하기: 구글 폰트 사용하기 (0) | 2022.10.09 |