일력 위젯

[미니 프로젝트] 위젯 만들기

+ 결과물

사이드바(브라우저 min-width가 769px일 때 등장)의 일력 위젯이다.

1-1 HTML

HTML에서 일력을 구성하는 요소들을 나열하고 class를 부여했다. 이때 일력은 day Calendar를 줄여서 dayCal이라 부르기로 했다. 이에 따라 각 요소의 클래스도 dayCal-wrap, dayCal-month 등으로 정했다.

<div class="dayCal-wrap">
  <span class="dayCal-month" id="calmonth"></span>
  <span class="dayCal-day" id="calday"></span>
  <span class="dayCal-weekday" id="calweekday"></span>
</div>

1-2 JS

JS에서 new Date()와 getMonth(), getDate(), getDay()를 사용해 날짜를 표시했다.

<script>
  //HTML 로딩 후에 코드 실행 
  document.addEventListener("DOMContentLoaded", () => {
    //번역표. months[0]은 'Jan'
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

    function updateDate() {
      //현재 날짜 객체를 상수 now에 저장
      const now = new Date();
      //각 요소의 textContent에 값 할당
      //months[0~11], 1~31, weekdays[0~6]
      document.getElementById('calmonth').textContent = months[now.getMonth()];
      document.getElementById('calday').textContent = now.getDate();
      document.getElementById('calweekday').textContent = weekdays[now.getDay()];
    }

    updateDate(); //처음 한 번 실행
    setInterval(updateDate, 60000); //1분마다 체크
  });
</script>

1-3 CSS

CSS로 미니멀한 디자인을 구현했다.

<style>
  .dayCal-wrap {
    /*크기*/
    width: 100%;
    aspect-ratio: 1;
    container-type: inline-size; /*cqw를 계산할 때 기준: 너비*/

    /*레이아웃*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1cqw;

    /*모양*/
    background: #ffffff;
    border: 0.5px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;  /*모서리 둥글기 고정*/
  }

  .dayCal-month {
    font-size: 7cqw;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #484644;
  }

  .dayCal-day {
    font-size: 42cqw;
    font-weight: 500;
    line-height: 1;
    color: #111111;
  }

  .dayCal-weekday {
    font-size: 6cqw;
    letter-spacing: 0.06em;
    color: #A8A6A0;
  }
</style>

+ 정리

이번 글에서는 HTML, CSS, JS를 사용해 간단하게 일력 위젯을 만드는 법을 알아봤다.