-
[JavaScript] 간단한 달력 만들기 - HTML 뼈대잡기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 6. 01:25
블로그에 스스로 공부한 내용들을 정리하기 시작한 지 꽤나 시간이 흘렀습니다.
그런데 공부한 개념만 정리하려다 보니 슬슬 지치기도 하고, 재미도 없어지는 바람에 새로운 시도를 해볼까 합니다.
지금까지 정리한 내용들을 바탕으로 프로젝트를 시도해서 하나씩 뿌셔보자(?)라는 마음으로
만들면서 학습하면 도가 트려나? 프로젝트를 시작하려 합니다.
물론 순전히 저의 재미를 위해서 시작하는 프로젝트이긴 하지만 약간의 욕심을 조금 더 보태서, 자바스크립트 프로그래밍을 시작한지 얼마 안 된 초급자분들이 이 프로젝트들을 보고서 '이 정도면 나도 하겠다!'라는 동기를 얻었으면 하는 마음도 조금 있습니다.
기존에 정리노트에 작성하던 말투와는 조금 다르게 쥐뿔도 없는 사람이지만, 나름 강의하는 것처럼 기록을 남겨볼까 합니다.
얼마나 많은 분들이 이 글을 읽게 될지 잘 모르겠지만, (저만 보게 될 수도..) 혹시라도 제가 잘 못하고 있는 부분이라거나 더 좋은 방향들이 있다면, 댓글을 통해 제가 더 좋은 코드를 작성하는 사람으로 성장할 수 있는 기회를 주시면 감사하겠습니다.
아무튼, 지금까지 자바스크립트 기본 개념과 DOM에 대한 내용들을 블로그에서 다뤄봤는데, 그동안 정리한 걸로 가장 간단하게 시작할 수 있는 프로젝트가 Date객체를 활용한 달력 만들기라서 정말 간단한 달력을 한 번 만들어 보도록 하겠습니다.
일단, 처음에는 당연히 레이아웃을 잡아둬야 할 것 같아서, 이런저런 달력 모양들을 보다가
'첫 프로젝트인 만큼 정말 간단하게 하자!'라는 마음으로 정말 간단하게 이런 모양으로 아이디어 스케치를 해봤습니다.
정말 간단하죠? 맥북 캘린더 아이콘에서 영감(?)을 받아 예술적으로 그려낸 스케치입니다.
아무튼 그렇게 해서 HTML 코드를 한 번 작성해 봤는데요.
<!-- index.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> </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 파일을 따로 만들어서 javascript 코드를 작성할 예정입니다.
기본 골격은 그냥 vs코드에서 html 파일을 만들고 html을 입력했을 때 추천해주는 html5 템플릿을 그대로 가져와 사용했습니다.
html 태그의 lang속성만 ko로 바꿔주고 그다음은 body안쪽을 수정했는데요.
결국은 달력 한 덩어리가 들어가니깐,
1. body 바로 아래 .calendar div 하나를 만들어 주고,
2. 그 안에 윗쪽(.upper), 아랫쪽(.lower) 구간을 나눠줬습니다.
3. 그리고 month를 위쪽에, 나머지 day, date, year 순서로 아래쪽에 위치시켜 줬습니다.
사실 upper lower를 굳이 나누지 않고도 만들 수 있을 것 같긴 한데, flex로 정렬할 계획이라 저렇게 구간을 나눠주면 정렬이 좀 더 편할 것 같아서 나눠봤습니다.
뭐, 아직까진 당연히 태그만 작성했으니 아무것도 없지만, 다음 포스트에서 javascript를 통해 뭐라도 좀 더 나오도록 해봅시다.
그럼 다음 시간에 만나요 :)
'만학도 프로젝트 > JavaScript Simple Calendar' 카테고리의 다른 글
[JavaScript] 간단한 달력 만들기 - 영상 (0) 2020.07.12 [JavaScript] 간단한 달력 만들기 - 스타일링 하기 (0) 2020.07.09 [JavaScript] 간단한 달력 만들기 - 날짜 데이터 만들기 (0) 2020.07.08