-
[JavaScript] 간단한 달력 만들기 - 영상만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 12. 22:49
자바스크립트로 간단한 달력만들기를 영상으로 녹화해봤습니다.
재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분은 댓글로 알려주시면
더 멋지게 성장하는 모습으로 보답해 보이겠습니다 :)
github: https://github.com/kimbigtop/MHD-simple-calendarindex.html
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <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> <script src="index.js"></script> </body> </html>index.js
const now = new Date(); const today = { year: now.getFullYear(), date: now.getDate(), month: now.toLocaleString('en-US', {month: 'short'}), day: now.toLocaleString('en-US', {weekday: 'short'}) } for (let key in today) { document.getElementById(key).textContent = today[key]; }style.css
* { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-image: url('https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbv2An8%2FbtsDHobEoZp%2FEuBSUoMuKyxmtu9FaDjmW0%2Fimg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; } body::after { display: block; content: ''; width: 100%; height: 100%; background-color: #000000; position: absolute; z-index: -1; opacity: .5; } .calendar { position: relative; width: 300px; height: 320px; overflow: hidden; text-align: center; background-color: #FFFFFF; border-radius: 15px; -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #FFFFFF); } .upper { display: flex; justify-content: center; align-items: center; height: 100px; background-color: #042404; } .lower { display: flex; flex-direction: column; justify-content: center; height: 220px; font-size: 16px; } #month { font-size: 70px; font-weight: 900; color: #ffffff; } #date { margin-bottom: 5px; font-size: 130px; font-weight: 900; line-height: 1; color: #333333; }'만학도 프로젝트 > JavaScript Simple Calendar' 카테고리의 다른 글
[JavaScript] 간단한 달력 만들기 - 스타일링 하기 (0) 2020.07.09 [JavaScript] 간단한 달력 만들기 - 날짜 데이터 만들기 (0) 2020.07.08 [JavaScript] 간단한 달력 만들기 - HTML 뼈대잡기 (0) 2020.07.06