이 HTML 코드에서는 8월 달력을 표시하는 표를 만들고, 페이지 배경에 이미지를 설정했습니다. 코드의 각 부분에 대한 자세한 설명은 다음과 같습니다.
1. HTML 구조
<!DOCTYPE html>: 문서 유형을 선언하여 HTML5 문서를 나타냅니다.<html lang="en">: 문서의 언어를 영어로 설정합니다.<head>: 메타데이터, 제목, 스타일 등을 포함합니다.<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다.<meta name="viewport" content="width=device-width, initial-scale=1.0">: 화면의 너비와 초기 확대 수준을 설정하여 모바일 장치에서도 적절히 표시되도록 합니다.<title>Document</title>: 문서의 제목을 설정합니다.<style>: 내부 CSS 스타일을 정의합니다.
2. CSS 스타일
<style>
table, tr, td {
border: 3px double;
width: 650px;
height: 50px;
text-align: center;
border-color: black;
border-collapse: collapse;
}
body {
background-image: url('../html/images/background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
</style>-
table, tr, td: 표, 행, 셀에 대한 스타일을 정의합니다.border: 3px double;: 이중 선으로 3픽셀 두께의 테두리를 설정합니다.width: 650px; height: 50px;: 표의 너비와 높이를 설정합니다.text-align: center;: 텍스트를 가운데 정렬합니다.border-color: black;: 테두리 색상을 검정으로 설정합니다.border-collapse: collapse;: 테두리를 하나로 결합하여 중복 테두리를 제거합니다.
-
body: 문서의 배경 스타일을 정의합니다.background-image: url('../html/images/background.jpg');: 배경 이미지를 설정합니다.background-size: cover;: 배경 이미지가 전체를 덮도록 크기를 조정합니다.background-position: center;: 배경 이미지를 중앙에 위치시킵니다.background-repeat: no-repeat;: 배경 이미지를 반복하지 않도록 설정합니다.
3. HTML 본문
<body>
<h1 align="middle">8월</h1>
<table>
<tr>
<td bgcolor="gray">일</td>
<td bgcolor="gray">월</td>
<td bgcolor="gray">화</td>
<td bgcolor="gray">수</td>
<td bgcolor="gray">목</td>
<td bgcolor="gray">금</td>
<td bgcolor="gray">토</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td><font color="red">30</font></td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body><h1 align="middle">8월</h1>: 제목을 가운데 정렬합니다.align="middle"속성은 HTML5에서 더 이상 사용되지 않으므로 CSS의text-align을 사용하는 것이 좋습니다.<table>: 표를 정의합니다.- 첫 번째
<tr>: 표의 헤더 행을 정의합니다.<td bgcolor="gray">속성을 사용하여 셀 배경을 회색으로 설정합니다. - 나머지
<tr>: 각 주의 날짜를 정의하는 표의 행입니다. <td><font color="red">30</font></td>: 30일 셀의 텍스트 색상을 빨간색으로 설정합니다.font태그는 HTML5에서 더 이상 사용되지 않으므로 CSS의color속성을 사용하는 것이 좋습니다.
- 첫 번째
개선 사항
- CSS로 텍스트 색상 설정:
font태그 대신 CSS를 사용합니다. - HTML5 호환:
align속성 대신 CSS로 텍스트 정렬을 설정합니다.
개선된 예제 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table, tr, td {
border: 3px double;
width: 650px;
height: 50px;
text-align: center;
border-color: black;
border-collapse: collapse;
}
body {
background-image: url('../html/images/background.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
h1 {
text-align: center; /* 텍스트 가운데 정렬 */
}
.highlight {
color: red; /* 텍스트 색상 빨간색 */
}
</style>
</head>
<body>
<h1>8월</h1>
<table>
<tr>
<td bgcolor="gray">일</td>
<td bgcolor="gray">월</td>
<td bgcolor="gray">화</td>
<td bgcolor="gray">수</td>
<td bgcolor="gray">목</td>
<td bgcolor="gray">금</td>
<td bgcolor="gray">토</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td class="highlight">30</td>
<td>31</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>실행결과:
넙-죽