Calendar 코드리뷰 - HTML마크업

※ 목차

1. Calendar 구현 목표

2. Calendar 코드리뷰 - HTML마크업

3. Calendar 코드리뷰 - CSS 적용하기

4. Calendar 코드리뷰 - JavaScript 적용하기

5. Calendar - 프로젝트를 마치며 

 

HTML 전체적인 큰 구조

먼저 HTML 에서의 전체적인 큰 구조로는 header 부분과 section 부분으로 왼쪽 파트와 오른쪽 파트로 구분되어 있습니다.

그리고 할일을 작성하는 input 태그와 제출 버튼인 INPUT을 그룹핑하고 있는 form태그가 있고 이 태그의 형제 요소로 지금 화면에는 안보이지만 ul태그가 자리잡고 있습니다. 

할일을 적고 제출하고 나면 자바스크립트를 통해 동적으로 li태그들이 이 ul태그 안에 생성될 것입니다.

<form class="input-form">
  <input type="text" placeholder="write here!!" class="input-box" />
  <button type="submit" class="input-btn clickBtn">INPUT</button>
</form>
<ul class="todoList"></ul>

 

section의 right 파트에서는 상단에 요일을 나타내는 부분과 해당 날짜에 맞게 자바스크립트로 넣어줄 요소들을 감싸고 있는 부모태그가 하나 존재 합니다. 

<section class="content-right">
  // 상단에 출력 될 요일들
  <div class="day-of-week">
    <div class="dayHeader sun">Sun</div>
    <div class="dayHeader">Mon</div>
    <div class="dayHeader">Tue</div>
    <div class="dayHeader">Wed</div>
    <div class="dayHeader">Thu</div>
    <div class="dayHeader">Fri</div>
    <div class="dayHeader sat">Sat</div>
  </div>
  // 해당 날짜에 맞게 출력 될 요소들의 부모 태그
  <div class="calendar-body"></div>
</section>

해당 날짜들은 같은 css를 적용받기 위해서 같은 class를 가지고 있으며 일요일과 토요일의 색상은 다르게 주기 위해 각각 다른 class를 하나씩 더 부여하였습니다.

 

HTML작성은 이렇게 마무리가 되었고 이제 다 작성한 html의 class를 가지고 css를 적용해보겠습니다.

 

 

이 외의 나머지 코드들은 제 깃허브에 모든 소스들을 오픈하여 올려두었으니 궁금하신 분들은 아래의 링크로 가셔서 확인하시면 되겠습니다.

 

전체소스 보러 깃허브 바로가기 - https://github.com/HyojinLee96

다음 주제 바로가기 - Calendar 코드리뷰 - CSS 적용하기