-
[JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript Calendar 2020. 8. 3. 03:30
만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일반적으로 생각하는 Full Calendar를 만들어 볼까 합니다.
이번에도 지금까지 정리했던 slice, concat, forEach, for.. of, Object.keys(), 전개 구문들을 활용해서 작업을 해볼 예정이고, 역시 가장 먼저 해야 될 일은 기획이겠죠?
어떤 달력을 만들어볼까 고민하던 중에 처음에는 예쁘게 디자인된 달력을 만들어볼까 하다가, 저의 디자인 감각이 따라주지도 않을뿐더러 프로젝트 내에서 css 영역에 내용도 많아 질 것 같아 조금 가벼운 마음으로 이번에도 역시 그냥 맥북의 기본 캘린더의 모양을 좀 가져와서 그려봤습니다.
1. 왼쪽 위에는 년도와 월,
2. 그리고 오른쪽 위에는 버튼 3개가 있어서 이전달, 오늘이 있는 달, 다음 달로 넘어가는 기능을 가지게 할 겁니다.
3. 가장 메인이 되는 달력에는 윗쪽에 요일이 나열되고, 아래는 날짜가 들어가는데 일요일은 붉은색, 토요일은 파란색으로 표시하고
4. 마지막으로 투명도를 줘서, 7월 26~31, 9월 1~5처럼 지난달과 다음 달이 들어가는 부분은 투명도를 조금 줘서 이번 달과의 차이점을 시각적으로 표현해보도록 하겠습니다!
5. (추가) 기획에서는 생각안했는데 글을 쓰다 보니, 오늘 날짜도 표시하는 게 좋을 것 같아서 오늘 날짜의 경우에는 숫자 주변에 빨간색 동그란 배경을 깔고 숫자 색을 흰색으로 변하게끔 하겠습니다!
자, 그럼 이제 HTML 뼈대를 한 번 잡아볼텐데요. 뼈다귀는 지난번 간단한 달력을 만들 때와 비슷할 것 같습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>MHDP Full Calendar</title> </head> <body> <div class="calendar"> <div class="header"> <div class="year-month"></div> <div class="nav"> <button class="nav-btn go-prev"><</button> <button class="nav-btn go-today">Today</button> <button class="nav-btn go-next">></button> </div> </div> <div class="main"> <div class="days"> <div class="day">일</div> <div class="day">월</div> <div class="day">화</div> <div class="day">수</div> <div class="day">목</div> <div class="day">금</div> <div class="day">토</div> </div> <div class="dates"></div> </div> </div> <script src="index.js"></script> </body> </html>index.html은 일단 이 정도면 될 것 같은데요.
head태그에서 title을 만(M)학(H)도(D)프로젝트(P) Full Calendar로 적어주고,
body태그 내부는 일단 전체를 감싸는 .calendar div를 만들고 그 안에서 header와 main, 두 개의 덩어리로 나눴습니다.
기획에서 1번 부분을 담당할 year-month div와, 기획에서 2번 부분을 담당할 nav div입니다.
year-month 부분은 당연히 월이 변경 될 때마다 변하는 부분이니깐 자바스크립트로 안을 채워 넣고,
nav부분에는 button 태그 3개로 부분을 나눴습니다. <와 >는 HTML에서 < 와 > 기호를 넣는 방법인데, 아무래도 html은 태그를 열고 닫을 때 <> 기호를 사용하다 보니 이 기호를 그냥 태그 안에 넣어서 사용할 수가 없습니다. 나중에 기회가 되면 이 부분은 따로 포스트로 정리를 해보도록 하겠습니다. :)
자 그리고 main 부분은 days와 dates부분으로 나뉘는데,
나중에 스타일링을 할 때 서로 간격을 따로 맞춰야 할 수도 있고 해서 따로 나눴고, 요일도 자바스크립트로 그려낼 생각도 했지만, nav로 이전달 다음 달로 옮길 때 요일은 딱히 변할일이 없기 때문에 그냥 처음부터 HTML로 그렸습니다.
그리고 dates부분은 자바스크립트로 그려낼 건데, 미리 HTML로 그리지 않은 이유는 이전달, 다음달로 넘어갈 때, 일반적으로는 35개가 되겠지만 이번 8월처럼 날짜 개수가 42개가 될 수도 있기 때문에 좀 유연하게 변하는 것을 대비해서 자바스크립트에서 html을 그리고 dates 태그에 innerHTML프로퍼티를 활용해서 넣어줄 계획입니다!
여기까지 코드를 실행하면 이렇게 나오는데 다음 포스트에서는 자바스크립트로 .year-month div와 .dates div를 채워 넣어 보도록 하겠습니다 :)
혹시 질문이나, 의문점이 드는 부분이라거나 제가 실수를 했다거나, 혹은 좀 더 좋은 방향이 있다면 댓글로 남겨주시면 더 좋은 글을 쓰는데 도움이 될 것 같습니다! :) 감사합니다
'만학도 프로젝트 > JavaScript Calendar' 카테고리의 다른 글
[JavaScript] 일반적인 달력 만들기 - 날짜 이동 버그 수정하기! (2) 2021.09.11 [JavaScript] 일반적인 달력 만들기 - 영상 (0) 2021.04.16 [JavaScript] 일반적인 달력 만들기 - 날짜 이동, 날짜 구분, 오늘 표시 (18) 2020.08.07 [JavaScript] 일반적인 달력 만들기 - 스타일 입히기 (0) 2020.08.06 [JavaScript] 일반적인 달력 만들기 - 날짜 가져오기 (9) 2020.08.05