캘린더-만들기

완성화면

1. 달력만들기

당해 년도 달력을 만들어보자.

날짜 정보는 네트워크 서버의 데이터를 전달받아 표시한다.

1.1. 구조작성

1.1.1. html

fontawasome cdn

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css'>

<div class="container">
    <div class="calendar">
      <div class="month">
        <i class="fas fa-angle-left prev"></i>
        <div class="date">
          <h1></h1>
          <p></p>
        </div>
        <i class="fas fa-angle-right next"></i>
      </div>
      <div class="weekdays">
        <div>일</div>
        <div>월</div>
        <div>화</div>
        <div>수</div>
        <div>목</div>
        <div>금</div>
        <div>토</div>
      </div>
      <div class="days"></div>
    </div>
  </div>

1.1.2. css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Quicksand", sans-serif;
}

html {
  font-size: 62.5%;
}

.container {
  width: 100%;
  height: 100vh;
  background-color: #12121f;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar {
  width: 45rem;
  height: 52rem;
  background-color: #222227;
  box-shadow: 0 0.5rem 3rem rgba(0, 0, 0, 0.4);
}

.month {
  width: 100%;
  height: 12rem;
  background-color: #167e56;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
  text-align: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.month i {
  font-size: 2.5rem;
  cursor: pointer;
}

.month h1 {
  font-size: 3rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  margin-bottom: 1rem;
}

.month p {
  font-size: 1.6rem;
}

.weekdays {
  width: 100%;
  height: 5rem;
  padding: 0 0.4rem;
  display: flex;
  align-items: center;
}

.weekdays div {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  width: calc(44.2rem / 7);
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
}

.days {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 0.2rem;
}

.days div {
  font-size: 1.4rem;
  margin: 0.3rem;
  width: calc(40.2rem / 7);
  height: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-shadow: 0 0.3rem 0.5rem rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s;
}

.days div:hover:not(.today) {
  background-color: #262626;
  border: 0.2rem solid #777;
  cursor: pointer;
}

.prev-date,
.next-date {
  opacity: 0.5;
}

.today {
  background-color: #167e56;
}

여기까지 실행화면

1.2. 스크립트 작성

• renderCalendar 함수 : 달력을 렌더링하는 역할
  • date.setDate(1)로 현재 월의 첫째 날로 날짜를 설정하고, monthDays 변수를 통해 해당 월의 일자를 출력할 DOM 요소를 가져온다.
  • lastDay 변수는 현재 월의 마지막 날짜를 구하고, prevLastDay 변수는 지난 달의 마지막 날짜를 구한다.
    • getDay() 메서드는 주어진 날짜의 현지 시간 기준 요일을 반환한다. 0은 일요일
  • firstDayIndex / lastDayIndex 변수는 현재 월의 첫째와 마지막 날의 인덱스를 구한다.
  • nextDays 변수는 다음 달의 첫째 날까지 남은 일자를 구한다.
  • 월 이름과 오늘 날짜를 출력하기 위해 DOM 요소를 가져온 후, innerHTML을 통해 출력한다.
  • for 루프를 이용해 일자를 출력하며, prev-date는 지난 달의 일자, today는 오늘 날짜, next-date는 다음 달의 일자를 의미한다.
  • monthDays 변수에 출력한 일자들을 innerHTML을 통해 할당한다.
• .prev 클릭 이벤트
  • document.querySelector(".prev").addEventListener("click", () => {...}) 함수는 "이전" 버튼을 클릭했을 때 호출된다.
  • date.setMonth(date.getMonth() - 1)로 현재 월을 이전 달로 변경하고, renderCalendar() 함수를 호출한다.
• .next 클릭 이벤트
  • document.querySelector(".next").addEventListener("click", () => {...}) 함수는 "다음" 버튼을 클릭했을 때 호출된다.
  • date.setMonth(date.getMonth() + 1)로 현재 월을 다음 달로 변경하고, renderCalendar() 함수를 호출한다.
• renderCalendar 함수를 호출하여 실행시킨다.