달력을 표시하는 간단한 HTML 코드를 제공합니다. 이 코드는 현재 달의 달력을 표시하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<title>달력</title>
<style>
/* 달력 스타일 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #eee;
}
</style>
</head>
<body>
<h1>2023년 12월 달력</h1>
<table>
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<!-- 다른 날짜들도 추가할 수 있습니다 -->
</tbody>
</table>
</body>
</html>
위 코드에서는 <table> 요소를 사용하여 달력을 표시하고, CSS 스타일을 적용하여 표의 스타일을 지정합니다. <thead>와 <tbody>를 사용하여 요일 헤더와 날짜를 표시합니다.
결과보기
<!DOCTYPE html>
<html>
<head>
<title>달력</title>
<style>
/* 달력 스타일 */
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
th {
background-color: #eee;
}
</style>
</head>
<body>
<h1>2023년 12월 달력</h1>
<table>
<thead>
<tr>
<th>일</th>
<th>월</th>
<th>화</th>
<th>수</th>
<th>목</th>
<th>금</th>
<th>토</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<!-- 다른 날짜들도 추가할 수 있습니다 -->
</tbody>
</table>
</body>
</html>
결과 보기
'HTML 예제' 카테고리의 다른 글
| 드롭다운 메뉴 만들기 (1) | 2023.12.08 |
|---|---|
| 캐러셀 이미지 슬라이더 (1) | 2023.12.08 |
| 주식 가격 정보 표시 (1) | 2023.12.08 |
| 사용자 인증 폼 (1) | 2023.12.08 |
| 이미지 필터 적용 (1) | 2023.12.08 |
