달력만들기
-
[JavaScript] 일반적인 달력 만들기 - 영상만학도 프로젝트/JavaScript Calendar 2021. 4. 16. 11:45
자바스크립트로 간단한 달력 만들기에 이어서 일반적인 달력 만들기를 영상으로 녹화해봤습니다. 의도치 않게 오랜시간이 지나서야 이 영상을 제작하게 되었는데, 막상 시간이 지나서 제가 작성한 코드를 보니 개선해야 될 부분들이 많이 보이더라고요 ㅎㅎ 따로 수정은 하지 않았지만 이번에 촬영하면서 느꼈던 저의 부족한 부분들을 좀 더 보완해서 다음 프로젝트에 녹여보도록 하겠습니다. 여담이지만 이번엔 영상 길이가 생각보다 길었는데요, 생각보다 이거 그냥 틀어놓고 1,20분 집중할 때 노동요(?)로 써도 괜찮은 것 같더라구요. 나중에 영상들이 늘어나서 재생시간이 1,2시간 정도가 쌓이면 재생목록으로 묶어서 진짜 노동요로 써볼까도 고민 중입니다..ㅎㅎ 아무튼 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분..
-
[JavaScript] 일반적인 달력 만들기 - 스타일 입히기만학도 프로젝트/JavaScript Calendar 2020. 8. 6. 00:42
지난 포스트까지 해서 필요한 날짜 데이터는 다 불러왔으니깐, 일단 가볍게 스타일을 좀 주도록 하겠습니다. 왜냐하면 지금 너무 못생겼거든요..ㅎㅎ(?) 자, 그러면 일단은 index.html에서 css파일 링크를 걸어줍시다. ... MHDP Full Calendar ... 그러고 나서 간단하게 전체적인 태그들의 margin, padding을 없애주고, 지난번과 마찬가지로 calendar를 가운데 정렬하기 위해서 body부분에 display: flex를 주고 min-height 값을 100vh 만큼 주도록 하겠습니다. * { margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; } body { display: flex; justify..
-
[JavaScript] 일반적인 달력 만들기 - HTML 뼈대 잡기만학도 프로젝트/JavaScript Calendar 2020. 8. 3. 03:30
만학도 첫 번째 프로젝트였던 간단한 달력 만들기에 이어서 두 번째는, 하루만 나타내는 달력이 아니라 우리가 일반적으로 생각하는 Full Calendar를 만들어 볼까 합니다. 이번에도 지금까지 정리했던 slice, concat, forEach, for.. of, Object.keys(), 전개 구문들을 활용해서 작업을 해볼 예정이고, 역시 가장 먼저 해야 될 일은 기획이겠죠? 어떤 달력을 만들어볼까 고민하던 중에 처음에는 예쁘게 디자인된 달력을 만들어볼까 하다가, 저의 디자인 감각이 따라주지도 않을뿐더러 프로젝트 내에서 css 영역에 내용도 많아 질 것 같아 조금 가벼운 마음으로 이번에도 역시 그냥 맥북의 기본 캘린더의 모양을 좀 가져와서 그려봤습니다. 1. 왼쪽 위에는 년도와 월, 2. 그리고 오른쪽 ..
-
[JavaScript] 간단한 달력 만들기 - 영상만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 12. 22:49
자바스크립트로 간단한 달력만들기를 영상으로 녹화해봤습니다. 재미있게 봐주셨으면 좋겠고, 혹시나 잘못된 부분이나 개선할 부분은 댓글로 알려주시면 더 멋지게 성장하는 모습으로 보답해 보이겠습니다 :) github: https://github.com/kimbigtop/MHD-simple-calendar index.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 ..
-
[JavaScript] 간단한 달력 만들기 - 스타일링 하기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 9. 00:10
이제 마지막 스타일링만 남았습니다. 사실 js코드는 별로 없는데 오히려 css코드가 훨씬 많은 것 같습니다. 일단은 폰트와 스타일 시트 링크태그를 index.html 파일에서 head에 붙여주겠습니다. 구글 폰트에서 montserrat라는 폰트를 가져왔고, 이제 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.daumcd..