-
[JavaScript] 간단한 달력 만들기 - 스타일링 하기만학도 프로젝트/JavaScript Simple Calendar 2020. 7. 9. 00:10
이제 마지막 스타일링만 남았습니다.
사실 js코드는 별로 없는데 오히려 css코드가 훨씬 많은 것 같습니다.
일단은 폰트와 스타일 시트 링크태그를 index.html 파일에서 head에 붙여주겠습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="calendar"> <div class="upper"> <div id="month"></div> </div> <div class="lower"> <div id="day"></div> <div id="date"></div> <div id="year"></div> </div> </div> <script src="index.js"></script> </body> </html>구글 폰트에서 montserrat라는 폰트를 가져왔고, 이제 style.css 파일을 만들어 작성해보도록 합시다.
* { margin: 0; padding: 0; font-family: 'Montserrat', sans-serif; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-image: url('https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fbv2An8%2FbtsDHobEoZp%2FEuBSUoMuKyxmtu9FaDjmW0%2Fimg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }일단은 전체적인 태그의 기본 margin padding 그리고 box-sizing을 정리해주고, 구글 폰트에서 가져온 폰트를 지정해줬습니다.
그리고나서 body에는 flex를 이용해서 아래 캘린더가 화면 가운데 잘 정렬되도록해 주고
pixabay에서 저작권이 없는 느낌있는(?) 무료 사진 url을 가져와서 배경이미지로 넣어줬습니다.(2024.1.22 업데이트: 이미지 url을 이 글의 두 번째 사진으로 수정했습니다. 무료 사진 사이트에서 저작권 없는 사진을 받아왔어요.)
그리고 브라우저의 다양한 모양에 맞춰 자연스럽게 배경이 깔리도록 size, position, repeat 값을 설정해주는 부분까지 마치면 아래와 같은 모습이 됩니다!
사진만 넣었는데 벌써 느낌 좋네요(?)
아무튼 이제 캘린터 부분만 예쁘게 꾸며주면 될 것 같은데요.
.calendar { position: relative; width: 300px; height: 320px; overflow: hidden; text-align: center; background-color: #FFFFFF; border-radius: 15px; } .upper { display: flex; justify-content: center; align-items: center; height: 100px; background-color: #042404; } .lower { display: flex; flex-direction: column; justify-content: center; height: 220px; font-size: 16px; } #month { font-size: 70px; font-weight: 900; color: #ffffff; } #date { margin-bottom: 5px; font-size: 130px; font-weight: 900; line-height: 1; color: #333333; }일단 캘린더 틀을 먼저 잡아주고, upper, lower 모두 안쪽 컨텐츠들의 가운데 정렬을 위해서 flex를 사용했습니다.
직접 수치를 계산해서 정렬할 수도 있고 뭐 다른 정렬방법들을 사용할 수도 있지만, 이게 폰트에 따라서 우리가 실제로 보는 글자 크기랑, html box model로 차지하는 크기가 쉽게 가늠이 잘 안되서 특히 세로정렬이 까다로울 때가 있거든요. 그래서 예전에는 absolute와 transform 조합을 즐겨사용하다가 최근에는 flex를 애용하는 편입니다.
아무튼 이런식으로 스타일링을 해주면 완성입니다!
자 그런데 뭔가 조금 심심한 것 같으니깐,
캘린더 부분이랑, body 스타일링 아랫부분에 이런 소스(?)를 한번 버무려 주도록 합시다.
body::after { display: block; content: ''; width: 100%; height: 100%; background-color: #000000; position: absolute; z-index: -1; opacity: .5; } .calendar { position: relative; width: 300px; height: 320px; overflow: hidden; text-align: center; background-color: #FFFFFF; border-radius: 15px; -webkit-box-reflect: below 1px linear-gradient(transparent, transparent, white); }body에 가상요소를 만들어서 body와 .calendar 사이에 껴 넣어준겁니다.
까만색 배경에 투명도 .5가 들어가서 배경이 살짝 어두워지면서 쨍한 느낌을 조금 죽여줍니다 :)
그리고 .calendar 부분의 마지막줄을 보시면 -webkit-box-reflect 를 넣어줬는데요.
이게 반사효과를 주는 속성입니다. 이 속성이 비표준이라서 아마 적용이 안되는 브라우저들이 있을텐데 일단 크롬에서는 잘 됩니다 ㅎㅎ..
범용성을 자랑하는 서비스를 개발하는게 아니니깐 .. 가벼운 마음으로 넣어줍시다 :)
이렇게 간단하게 달력을 한번 만들어 봤는데요.
다음 프로젝트는 1일부터 말일까지 다 나오는 달력을 한번 기획해 봐야겠습니다! :)
'만학도 프로젝트 > JavaScript Simple Calendar' 카테고리의 다른 글
[JavaScript] 간단한 달력 만들기 - 영상 (0) 2020.07.12 [JavaScript] 간단한 달력 만들기 - 날짜 데이터 만들기 (0) 2020.07.08 [JavaScript] 간단한 달력 만들기 - HTML 뼈대잡기 (0) 2020.07.06