JavaScript를 이용해 현재 날짜를 보여주는 캘린더 만들기

JINI·2022년 5월 10일
0

프로젝트

목록 보기
1/2
post-thumbnail

프론트엔드 부분을 간단히 공부한 뒤 블로그 첫 포스팅겸 무엇을 만들어볼까 하다가 javascript를 이용해 아주 간단한 달력을 만들어 보기로 했다.
하지만 코딩 왕초보에겐 어려웠기 때문에 우선은 다른 분이 하신 코드를 따라치며 공부해 보았고 고치고 싶은 코드는 수정도 해보았다.
오늘 한 부분은 전체 캘린더가 아닌 현재 날짜를 표기해주는 캘린더를 htmlcss도 이용해 만들어 보았는데 아직은 많이 부족하기에 나머지는 차차 공부를 해가면서 부족한 부분과 추가하고 싶은 기능들을 추가해 보려고 한다.

1.HTML은 웹 콘텐츠의 구조를 짜고 의미를 부여하는 마크업 언어입니다. 예를 들어 페이지의 어디가 문단이고, 헤딩이고, 데이터 표와 외부 이미지/비디오인지 정의합니다.
2.CSS는 HTML 콘텐츠에 스타일을 적용할 수 있는 스타일 규칙 언어입니다. 배경색을 추가하고, 글꼴을 바꾸고, 콘텐츠를 신문처럼 다열 레이아웃으로 배치할 수 있습니다.
3.JavaScript는 동적으로 콘텐츠를 바꾸고, 멀티미디어를 제어하고, 애니메이션을 추가하는 등 거의 모든 것을 만들 수 있는 스크립팅 언어입니다. (정말 모든게 가능하지는 않겠지만, JavaScript 코드 몇 줄만으로도 놀라운 결과를 이룰 수 있습니다)
출처:https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript

1.html 기본틀 잡기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SimpleCalendar</title>
</head>
<body>
    <div class="top">Today is?</div>
    <div class = "calendar">
        <div class="upper">
            <div id="month"></div>
        </div>
        <div class="lower">
            <div id="day"></div>
            <div id="date"></div>
            <div id="year"></div>
        </div>
    </div>
</body>
</html>

2.현재 날짜 가져오기

<script>
        const now = new Date();  /*현재 Date 객체 생성*/
        const today = {
            year: now.getFullYear(),  /*년,일, 월,요일 가져오기*/
            date: now.getDate(),
            month: now.toLocaleDateString('en-US', { month: 'short' }), /*월은 문자열로 가져오기*/
            day: now.toLocaleDateString('en-US', { weekday: 'short' })  /*요일 문자열로 가져오기*/
        }

        /*현재에 해당하는 년,월,일,요일을 반복출력*/
        for (let key in today) {
            document.getElementById(key).textContent = today[key];
        }
    </script>

여기까지 가장 기본적인 틀과 해당 날짜를 출력하는 코드를 작성한 뒤
실행해 보니 현재 해당하는 날짜가 잘 출력되는데 css를 적용하지 않아 완성도가 부족한 모습이다.

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SimpleCalendar</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Koulen&display=swap">
    <link rel="stylesheet" href="style.css">
</head>

폰트를 변경하기 위해서 링크를 가져왔고, css파일을 연결해주었다.


3. css 적용하기

/* * : 전체 적용 */
*{
    margin :0;
    padding : 0;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
}

/* Today is? 글씨 설정*/
.top{
    text-align: center;
    font-size: 80px;
    padding-top: 20px;
    font-weight: 600;
    color: #FFEBCD;;
    }

/*사진 어두운 부분*/
body{
    min-height: 100vh; /* 화면 사이즈 */
    background-image: url('https://cdn.pixabay.com/photo/2021/04/22/17/55/flowers-6199691_960_720.png');
    background-size: cover; /*화면 사이즈를 꽉차게*/
    background-position: center;
    background-repeat: no-repeat;
}

/* :: ->자바스크립트 :: 의 의미는 bind와 유사하다. 일종의 요약된 표시(shortcut) 이다. ES7 버전의 문법. JScript 문법이라는 얘기가 있고 따라서 익스플로러 브라우저에서만 정상 작동한다.*/
body::after{
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background-color: black;
    position: absolute;
    top: 0;     /*position의 위치 중 top을 지정해준다*/
    z-index: -1; /*레이어라고 생각하면 된다*/
    opacity: .5; /*투명도*/
}
.calendar {
    /* 화면 가운데 정렬 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 370px;
    height: 330px;
    overflow: hidden;
    text-align: center;
    background-color:aliceblue;
    border-radius: 15px;
    /*반사효과주기*/
    -webkit-box-reflect: below 15px linear-gradient(transparent, transparent, #FFFFFF);
}

.upper{
    display: flex;
    justify-content: center;
    align-items:  center;
    height: 100px;
    background-color: bisque;
}

.lower{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 220px;
    font-size: 16px;
}

#year{
    font-size: 20px;
    font-weight: 500;
    padding-bottom: 5px;
}

#month{
    margin-bottom: 30px;
    font-size: 90px;
    font-weight: 1000;
    color : #093732;
}

#date{
    margin-top: 2px;
    font-size: 130px;
    font-weight: 900;
    line-height: 1;
}

#day{
    font-size: 25px;
    font-weight: 500;
    padding-top: 5px;
}

/* 
# : id
. : class 
*/

참고:https://www.youtube.com/watch?v=9BwujZsowY0

profile
꾸준히 성장하는 개발자

0개의 댓글