HTML5 달력 만들기 - HTML5 dallyeog mandeulgi

개발기록

• 글쓰기
• 관리
• 태그
• 방명록
• RSS

개발기록

검색하기 폼 검색하기

• 분류 전체보기 (102)
  • javascript (84)
    • javascript30 (17)
    • banillaCoding (0)
    • banillaCoding-Portal (0)
    • 알고리즘 (10)
  • react (2)
  • 깃허브 형상관리 (2)
  • css (5)
    • canvas (0)
  • 끄적그림 (0)
  • 끄적일기 (5)
    • 독서 (0)
  • bootcamp (0)
    • 퍼스널멘토링 (0)
  • CS (4)

• 방명록

티스토리 뷰

javascript

[바닐라코딩]과제-달력만들기

소영 2021. 6. 27. 16:06

//so098.github.io/calender_boilerplate.github.io/

'javascript' 카테고리의 다른 글

[바닐라코딩]과제-숫자야구  (0) [바닐라코딩]과제-슬라이드  (0) 콜스택(Call Stack)과 태스크큐(task Queue)  (0) Process란?  (0) 자바스크립트 에러 처리  (0)

2021.06.27

2021.06.27

2021.05.31

2021.05.31

2021.05.27

댓글

댓글쓰기 폼

비밀글

이전 1 ··· 47 48 49 50 51 52 53 54 55 ··· 102 다음

이전 다음

공지사항

최근에 올라온 글

• cherry-pick 기능
• 아토믹 디자인 패턴이란
• 디자인 패턴
• SOP? CORS?

최근에 달린 댓글

• 잘 보고 갑니다

링크

TAG

• 배열단순값 객체엔 속성값
• 화살표함수에서 this의 바인딩
• 1일차
• while문활용
• 모던자바스크립트
• 복수는 한번에 안댐
• 콜백함수에서의 this
• 한번에 받는건 id로 받기
• 고차함수
• if문 중첩없애기
• 이 쉬운걸 4시간동안....
• .fill
• 틀리면 말씀해주세요
• debugger라도 해서 다풀어버리자
• 문자열실수변경
• react 공식문서
• 게임은 더못만든다
• removeEventListener
• 객체의 참조값
• 중복숫자찾기
• tcpschool
• .map
• 프로토타입 체인
• 생성자함수에서의 this
• 지뢰찾기 게임도 못하는데
• var과 let의 차이
• 무조건 비공개..
• MDN 참조
• 메서드오버라이드
• 무조곤 비공개

more

«   2022/10   »

일월화수목금토

						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

글 보관함

• 2022/08 (1)
• 2022/07 (1)
• 2022/06 (5)
• 2022/04 (1)
• 2022/03 (1)

Blog is powered by Tistory / Designed by Tistory

Make a calendar for this month using vanilla JS

안녕하세요. 주니어 개발자 한유덕입니다. 😁

얼마 전에 업무 상에서 달력🗓이 필요한 경우가 있었는데요. 기존의 라이브러리들은 원하는 대로 커스텀하기가 어려워서, 달력을 직접 만들어야 했습니다. 그래서 이번 포스팅에서는 제가 업무 상에서 만들었던 달력을 간단하게 정리해서 공유해 보려고 해요. jQuery를 사용하지 않고 순수한 HTML, CSS, JavaScript, DOM API를 이용해서 달력을 만들게 됩니다. 직접 달력을 커스텀하셔서 사용해야 하는 분들께 작은 도움이 되었으면 좋겠습니다.

자바스크립트로 달력을 만들 때 가장 중요한 것은 Date 객체에 대한 이해입니다. 저도 Date 객체의 사용법을 제대로 알지 못하다보니, 어떻게 구현해야할 지 당최 생각이 나지 않았는데요, 아마 이번 캘린더 만들기를 따라하시면 여러분 모두Date 객체에 조금 더 친숙해지게 될 겁니다!

코딩을 시작하기전에, 달력을 어떻게 만들어야하는지 생각해보죠!

먼저 달력은 항상 5주 혹은 6주로 나타나므로, 6개의 행이 필요합니다.(5주인줄 알았는데, 정용욱님의 지적으로 1일이 토요일부터 시작할 경우 6주가 되는 경우가 있다는 것을 알았습니다!) 또한 매월 시작 날짜와 종료 날짜가 달라지므로, 이번 달의 시작 날짜와 종료 날짜를 구해야 합니다. 시작 날짜와 종료 날짜를 구했다면, 이번 달이 아닌 달력 빈 칸에 채워넣을 지난 달 시작 날짜 이전의 요일들, 다음 달 종료 날짜 이후의 요일들을 구해야 합니다.

이번 포스팅에서는 편의를 위해 하나의 html파일에 스타일과 스크립트를 모두 같이 작성해보겠습니다. 먼저 html파일을 만들고 다음과 같이 뼈대를 작성해주세요.

이제 스크립트를 짜봐야겠죠? 주석과 함께 진행해보겠습니다.

오늘 날짜의 Date 객체를 생성하고, 올해와 이번 달을 구해서 이번 달 날짜 데이터를 만드는 함수에 인자로 넘겨주겠습니다. 스크립트는 아래와 같습니다.

그럼 이제 이번 달의 날짜를 만드는 함수를 살펴봐야겠죠? 이 함수는 어떻게 구현되어있는지 간략하게 설명해보겠습니다.

1. 빈 문자열을 만든 후 이번 달의 첫째 날, 첫째 요일, 마지막 날을 구하고 지난 달의 마지막 날을 구합니다.
2. 매달 전체 일수가 달라지므로 날짜 수를 세기 위한 변수를 만들고 초기화합니다.
3. 1~5주차 / 일요일~토요일을 세기 위한 반복문을 만듭니다.
4. 반복문 안에서 첫째 주 시작 요일 이전일 때, 첫째 주 시작 요일일 때, 첫째 주 시작 요일 이후 일 때, 마지막 주 마지막 요일 이전일 때, 마지막 주 마지막 요일 이후일 때의 5가지 조건으로 나누어 날짜를 계산합니다.
5. 해당 조건 마다 날짜를 계산한 후 이 날짜를 고유한 ID로 가진 HTML tag 문자열을 만들고 기존에 만들었던 빈 문자열에 이어붙입니다.
6. 달력이 렌더링 될 div 태그에 만들어진 문자열을 붙여줍니다.

자 여기까지 하면 어떻게 나오는 지 볼까요?

이번 달의 전체 날짜가 출력되는 걸 확인하셨나요? 하지만 날짜만으로는 달력이 될 수 없겠죠?

스타일링을 통해 예쁜 달력으로 뒤바꿔보겠습니다. 기존에 태그를 만들면서 지정해놨던 ID 외에 클래스들을 추가합니다. 그리고 각 조건이 어떤 부분을 생성하는 지 명확하게 알기 위해, background-color 속성을 각각 다르게 주었습니다.

자, 위의 코드를 실행하면 어떻게 되는지 볼까요?

어떤가요? 예쁜 달력이 만들어진 걸 확인하셨나요?

이제 이 달력에 원하는 요소들을 넣어서 커스텀하시면 됩니다. 날씨 아이콘을 넣어도 되고, 보여주길 원하는 정보들을 입력해도 되죠!

만약 이번 달뿐만 아니라 올해의 모든 달을 보여주고 싶다면, 이전 달과 다음 달로 이동하는 버튼을 만들고 버튼을 누를 때마다 새로운 달력을 생성해서 보여주면 되겠죠? 버튼과 클릭 이벤트만 추가하면 올해의 달력을 모두 볼 수 있겠네요 😍

이번 포스팅에서는 자바스크립트를 이용해서 달력을 만들어봤습니다. 다음에는더 유익한 내용으로 돌아오도록 하겠습니다.

긴 글 읽어 주셔서 감사합니다! 🙏🏻

만약 위의 내용에 대해 이해가 되지 않는 부분이 있으시거나 수정해야할 부분을 발견하셨다면 주저없이 댓글 남겨주시면 감사하겠습니다.