[JavaScript] 일반적인 달력 만들기 - 스타일 입히기

지난 포스트까지 해서 필요한 날짜 데이터는 다 불러왔으니깐, 일단 가볍게 스타일을 좀 주도록 하겠습니다.

왜냐하면 지금 너무 못생겼거든요..ㅎㅎ(?)

자, 그러면 일단은 index.html에서 css파일 링크를 걸어줍시다.

...
    <title>MHDP Full Calendar</title>
    <link rel="stylesheet" href="style.css">
</head>
...

그러고 나서 간단하게 전체적인 태그들의 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-content: center;
  align-items: center;
  min-height: 100vh;
}

그다음은 이제 가장 calendar의 크기를 결정해 줄텐데요.

너비는 600px정도로 주고 브라우저 크기가 작아졌을 때, 좀 더 자연스럽게 보이기 위해서 양쪽 바깥 여백(margin)을 100px 정도만 주도록 하겠습니다.

.calendar {
  width: 600px;
  margin: 50px;
}

그러고 나서는 이제 위쪽부터 하나씩 차례로 정리를 해볼 텐데요.

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.year-month {
  font-size: 35px;
}

.nav {
  display: flex;
  border: 1px solid #333333;
  border-radius: 5px;
}

.nav-btn {
  width: 28px;
  height: 30px;
  border: none;
  font-size: 16px;
  line-height: 34px;
  background-color: transparent;
  cursor: pointer;
}

.go-today {
  width: 75px;
  border-left: 1px solid #333333;
  border-right: 1px solid #333333;
}

.header 안에 있는 year-month와 nav의 양끝 정렬과 세로 가운데 정렬을 하기 위해 flex로 정렬했고, year-month 폰트 크기는 35px로 조절해줬습니다. 

.nav부분 역시 버튼들끼리의 정렬을 위해서 display 부분만 flex를 주고 테두리를 그려주면서 모서리 라운딩을 줬습니다.

그리고 각 버튼들에 필요한 스타일에 맞게 잘 정리해준 코드를 확인할 수 있습니다.

끝으로 가운데 버튼에는 today라는 상대적으로 긴 문자가 들어가기 때문에 조금 더 자연스럽게 너비를 늘리고, 양쪽에 테두리를 넣어서 각 버튼들 끼리 구분이 되게끔 만들어줬습니다 :)

 

그럼 이제 요일과, 날짜만 정리하면 되겠죠!?

.days {
  display: flex;
  margin: 25px 0 10px;
}

.day {
  width: calc(100% / 7);
  text-align: center;
}

.dates {
  display: flex;
  flex-flow: row wrap;
  height: 500px;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
}

.date {
  width: calc(100% / 7);
  padding: 15px;
  text-align: right;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
}

사실 .main부분에는 딱히 넣어줄 스타일은 없기 때문에 days부터 각 day들을 정렬하기 위해서 display: flex를 적용하고, 위쪽의 header와 아래의 dates와의 간격을 위해 바깥 여백을 적당히 넓혀주었습니다.

그러고 나서 각 요일이 총 7개니깐, 너비는 100% / 7로 계산된 값을 지정해주고, 각 요일의 문자는 가운데 정렬을 해줬습니다.

 

dates도 각 날짜들의 정렬을 위해서 display: flex를 주었는데요. flex-flow 값을 상황에 맞게 잘 정리해주면, 자연스럽게 줄 바꿈이 되는 모습을 유도할 수 있습니다.

또, 여기서 height를 500px로 고정해주면, date가 35개가 되건, 42개가 되건 상관없이 유연하게 500px에 맞춰서 변하게 됩니다.

그리고 보면 이상하게 dates에 테두리를 모두 지정하는 게 아니라 위쪽과 오른쪽만 지정해 주었는데요.

격자 모양을 만들 때 date 각각에 border를 주게 되면 가운데 겹치는 부분이 생기면서 모양이 예쁘게 들어가질 않습니다.

이 문제를 해결하기 위해서 위와 같이 코드를 작성하면 굳이 테이블을 작성하지 않고도 예쁘게 격자를 만들어 낼 수가 있는 것이죠 :)

 

끝으로 나머지 .date 부분은 .day와 같은 원리로 width 값을 계산하고, 약간의 내부 여백과 텍스트를 오른쪽으로 정렬해줬습니다.

 

이렇게 정리하고 코드를 실행해보면 다음과 같이 나름 달력 모양으로 잘 정돈된 모습을 확인할 수 있는데요.

마무리하기 전에 일요일은 붉게, 토요일은 푸르게만 바꿔주고 정리하도록 합시다! :)

.day:nth-child(7n + 1),
.date:nth-child(7n + 1) {
  color: #D13E3E;
}

.day:nth-child(7n),
.date:nth-child(7n) {
  color: #396EE2;
}

이렇게 :nth-child를 활용하면 각 줄의 첫 번째 부분에는 붉게, 일곱 번째 부분은 푸르게 색을 입혀낼 수가 있습니다.

이제 정말 어느 정도 달력 같아 보이죠?!

 

진짜 마무리하기 전에 앞으로 남은 부분을 조금 정리해보면

 

1. 지난 달 다음 달 오늘 날짜로 돌아가는 기능 만들기

2. 지난 달 부분과 다음 달 부분을 조금 투명하게 하기

3. 오늘 날짜 표기하기

 

이렇게 3가지 정도로 정리할 수 있을 것 같습니다.

그럼 다음 포스트에서 나머지 부분을 모두 해결해 보도록 합시다! :)