CSS만으로 캘린더 만들기 – 단계별 예제 코드와 결과 화면

HTML과 CSS만으로도 별도의 JavaScript 없이 시각적으로 매력적인 캘린더를 만들 수 있습니다. 이 글에서는 월 표시 영역, 요일 헤더, 날짜 그리드로 구성된 캘린더를 CSS 스타일링으로 구현하는 방법을 예제 코드와 함께 소개합니다.

CSS 캘린더의 기본 구조

캘린더는 크게 세 부분으로 나뉩니다.

월(month) 영역 – 현재 월과 연도를 표시하며, 좌우 화살표로 이전/다음 달을 나타냅니다.
요일(Days) 영역 – 월요일부터 일요일까지 요일 이름을 가로로 배치합니다.
날짜(daysNumber) 영역 – 1일부터 말일까지 숫자를 그리드 형태로 정렬하고, 오늘 날짜는 원형 배경으로 강조합니다.

각 열의 너비를 13.6%로 지정해 7개의 요일이 한 줄에 균등하게 배치되도록 하고, display: inline-block을 활용해 목록 항목을 가로로 나열하는 것이 핵심 기법입니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .calender {
        border: 1px solid darkorchid;
    }
    .month {
        padding: 50px;
        width: 100%;
        background: #874de6;
        text-align: center;
        border: 1px solid rgba(139, 0, 139, 0.671);
    }
    .month ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    .month ul li {
        font-size: 30px;
        text-transform: uppercase;
        letter-spacing: 6px;
        color: yellow;
    }
    .month .lastMonth {
        float: left;
        padding-top: 10px;
    }
    .month .nextMonth {
        float: right;
        padding-top: 10px;
    }
    .Days {
        margin: 0;
        padding: 10px 0;
        background-color: rgb(169, 210, 248);
        border: 1px solid rgba(0, 0, 139, 0.514);
    }
    .Days li {
        font-weight: bold;
        display: inline-block;
        width: 13.6%;
        color: rgb(0, 0, 0);
        text-align: center;
    }
    .daysNumber {
        padding: 10px 0;
        background: rgb(235, 255, 182);
        margin: 0;
        font-weight: bold;
    }
    .daysNumber li {
        list-style-type: none;
        display: inline-block;
        width: 13.6%;
        text-align: center;
        margin-bottom: 5px;
        font-size: 12px;
        color: rgb(0, 0, 0);
    }
    .daysNumber li .today {
        padding: 5px;
        background: #17003b;
        font-weight: bolder;
        border-radius: 50%;
        color: rgb(229, 255, 0) !important;
    }
</style>
</head>
<body>
<h1 style="text-align: center;">CSS Calendar Example</h1>
<div class="calender">
<div class="month">
<ul>
<li class="lastMonth">❮</li>
<li class="nextMonth">❯</li>
<li>
March<br />
<span>2020</span>
</li>
</ul>
</div>
<ul class="Days">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="daysNumber">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li><span class="today">22</span></li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
</body>
</html>

주요 CSS 포인트 정리

.month: 보라색 계열 배경에 넉넉한 패딩을 주어 월 표시 영역을 돋보이게 합니다. letter-spacing으로 글자 간격을 벌려 세련된 느낌을 더했습니다.
.lastMonth / .nextMonth: float: left와 float: right를 사용해 이전 달(❮)과 다음 달(❯) 화살표를 좌우 끝에 배치합니다.
.Days li / .daysNumber li: display: inline-block과 width: 13.6% 조합으로 7열 그리드를 구현합니다.
.today: border-radius: 50%로 오늘 날짜를 원형 배지처럼 강조하여 사용자가 현재 날짜를 쉽게 인식할 수 있습니다.

실행 결과

위 코드를 브라우저에서 실행하면 다음과 같은 캘린더가 출력됩니다.

CSS만으로 캘린더 만들기 – 단계별 예제 코드와 결과 화면

이 예제는 순수 HTML과 CSS만으로 캘린더 UI를 구성할 수 있음을 보여줍니다. 실제 서비스에 적용할 때는 JavaScript를 추가해 월 전환 기능을 구현하거나, CSS Grid를 활용하면 더욱 유연한 반응형 캘린더를 만들 수 있습니다.