Calendar 코드리뷰 - CSS 적용하기

※ 목차

1. Calendar 구현 목표

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

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

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

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

   
    

1. reset.css와 common.css 로 파일 분리하기

 

resest.css와 common.css 로 파일 분리

위의 사진처럼 reset.css 에는 기본적으로 태그들에 적용되어 있는 불필요한 css를 reset 시켜주기위해 따로 파일을 분리해주었습니다.

이렇게 분리하게 되면 img 태그나 리스트 태그들 a태그 등등에 불필요한 css를 하나하나 매번 적어주지 않아도 되어 편리합니다.

프로젝트를 진행하면서 프로젝트가 끝날 때까지 불필요한 css 속성이 있다면 이 파일에 한번에 적용시켜 놓으면 됩니다.

 

common.css 에는 각 태그별로 적용시킬 속성들을 나열해 주었는데 이 때에도 여기저기 아무 위치에나 작성하지 않고, 주석을 통해 header 부분 따로, section 의 왼쪽, 오른쪽 부분별로 따로 구분하기 쉽에 해주었습니다.

또한 ::after, ::before를 통해 할일 목록들을 삭제할 x 버튼을 구현해 보기도 하였습니다.

.todoList > li > .del-data{
  position: absolute;
  top: 0; right: 5%;
  width: 20%;
  height: 25px;
  background: none;
  border: none;
  font-size: 0px;
}
.todoList > li > .del-data::after, .todoList > li > .del-data::before{
  content: '';
  position: absolute;
  top:0; left: 50%;
  display: block;
  width: 4px;
  height: 18px;
  background: rgb(255, 82, 195);
}
.todoList > li > .del-data::after, .closed::after {transform: rotate(45deg);}
.todoList > li > .del-data::before, .closed::before{transform: rotate(-45deg);}

 

자바스크립트를 통해 날짜들을 넣어준 div 태그들도 미리 css를 통해 속성들을 지정해 주었고, 이 요소들의 첫 번째와 마지막 요소에만 다른 css 적용이 필요할 것같아서 :first-child, :last-child 속성을 사용하여 각각 다르게 지정해주기도 하였습니다.

#weekly > div {
  box-sizing: border-box;
  text-align: center;
  width: calc(100% / 7);
  height: 130px;
  display: inline-block;
  border-bottom: 1px solid #e4e4e4;
  vertical-align: top;
  padding: 1%;
  color: rgb(255, 0, 166);
  overflow-y: auto;
}

#weekly > div + div{
  border-left: 1px solid #e4e4e4;
}

.calendar-body #weekly > div:first-child {border-left: 1px solid #e4e4e4;}
.calendar-body #weekly > div:last-child {border-right: 1px solid #e4e4e4;}

 

 

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

 

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

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