[JS] 크리스마스 디데이 캘린더 만들기

 

 

스파르타코딩클럽에 무료로 디데이 캘린더 만들기 강의가 올라와서 만들어 보았다!

강의는 1시간 정도였고 다 들은 후 css 수정, 완성까지 총 이틀 정도 소요됐다.

 

강의에선 12월 1일을 시작으로 6*6 그리드를 만들어서 카드는 총 24칸을 만드는데,

나는 D-day 10일부터 시작하자! 하고 15일부터 시작하는 캘린더로 제작했다.

 

그래서 4*4 그리드로 카드는 총 10칸!

 

만들면서 그리드 수 조절이랑 카드 효과 질문을 올렸었는데

답을 굉장히 빨리 달아주셨다. 🥹

 

그리드 수 질문은 4*4로 그리드를 줄이니 카드가 직사각형이 되어서

정사각형으로 바꾸고싶다는 내용이었다.

 

.grid-1 {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
}

그리드 수정 전 코드

.grid-1 {
  grid-template-columns: repeat(4, 150px);
  grid-template-rows: repeat(4, 150px);
}

그리드 수정 후 코드

 

❗️1fr은 화면 비율에 맞춰 자동 조정을 해줘서 (원치 않던)값이 자동으로 설정되는 것이었고,

정사각형으로 만들기 위해 가로 세로 모두 150px로 수정하였다!

 

정사각형으로 바꾸고~~ 사진 넣어보기~

 

 

ㅎㅎ 앞면을 사진으로 할까 고민하다 편지 그림으로 넣었다. 💌

카드를 클릭하면 뒤집어지면서 사진으로 바뀌고 이런 메세지 팝업창이 뜬다 !

 

 

🎅🎄

 

 

 

🔗 https://spartacodingclub.kr/online/special/advent-calendar

https://spartacodingclub.kr/online/special/advent-calendar