1편은 기존의 달력을 틀을 만들었습니다.
2편에서는 CSS를 수정해서 완벽하게 구현해보도록 할 것입니다.
이전달, 다음달 정보가 이번달에 등장하지만 회색으로 표시해야 이번달의 정보가 정확하게 보일것 같고 토요일과 일요일도 회색으로 표시할 예정입니다.
토요일, 일요일을 회색으로 만들기
header 컴포넌트에서 작업을 진행하였습니다.
styled-component를 사용하였습니다.
map함수를 사용했기 때문에 간단히 첫번째와 마지막 자식인자에게만
값을 지정해주면됩니다.
'일', '월', '화', '수', '목', '금', '토'
이기 때문에 첫번째와 마지막 자식에게 css를 지정해주면 됩니다.
nth-child(N): = 부모안에 모든 요소 중 N번째 요소
이를 사용하면 간단히 해결할 수 있습니다.
제가 코드를 작성할때는 복붙을 진행하느냐고 body컴포넌트를 그대로 가져왔는데
작성된 코드
:nth-child(7n + 1),
:nth-child(7n) {
color: #969696;
}
요일은 헤더에서 고정된 값이니 아래처럼 수정할수도 있을것 같습니다.
:nth-child(1),
:nth-child(7) {
color: #969696;
}첫번째 요소인 '일요일'과 '토요일'에 CSS를 준다. 한결 파악하기 쉬운것 같네요.
`#969696 은 회색이니 원하는 색으로 사용하면 될것 같습니다.
body 날짜별로 토요일 ,일요일 CSS
body컴포넌트에서 날짜들이 토요일과 일요일일 때 회색값을 지정해주면 됩니다.
head와 비슷한 맥락이기 때문에 제가 작성한 코드 그대로 작성하게 되었습니다.
똑같이 map함수를 사용했기 때문이죠
:nth-child(7n + 1),
:nth-child(7n) {
color: #969696;
}7의 배수와 7+1의 배수의 자식에게 css를 준다 라는 의미입니다.
이전 달 숫자, 다음달 숫자들 css변경
이제 이전달, 다음달 숫자들의 색을변경해야 합니다.
저의 구조는 바디 컴포넌트에서 date라는 컴포넌트를 만들어 map함수를 돌린 형태입니다. body > date
date가 날짜 컴포넌트 이죠
쉽게 말하면 body가 부모 컴포넌트 date 가 자식 컴포넌트가 됩니다.
일단 이전달 숫자, 다음달 숫자들을 어떻게 접근할수 있을까요 ?
이전달은 이번달의 1일 이전의 숫자들 이고
다음달은 이전달 1일 이후의 1일을 찾으면 됩니다.
이를 코드로 작성하면 아래처럼 될것입니다.
const lastDate = totalDate.indexOf(1);
const firstDate = totalDate.indexOf(1, 7);
lastDate 는 이번달의 1의 index위치를 찾아냅니다.
firstDate는 다음달의 1의 위치를 찾아냅니다.
1이 두번 등장하니 firstDate 는 다음주인 7일 이후부터 1을 찾아내면 됩니다.
이를 props로 date에 전달해 주었고 date를 map돌릴때 index 를 받아와서 비교를 해주었습니다.
<date 컴포넌트>
일단 사용하기 쉽게 비구조할당을 해줍니다.
const { lastDate, firstDate, elm, findToday, month, year, idx, holiday } =
props;index값을 idx값으로 전달해주었고 lastDate 와 firstDate도 전달해주었습니다.
styled-componets를 사용하면 props를 사용할수 있다는 장점이 있어서 좋은것 같습니다.
날짜에 CSS를 부여합니다.
${(props) => props.idx < props.lastDate && `color: #969696;`};
${(props) =>
props.firstDate > 0 &&
props.idx > props.firstDate - 1 &&
`
color: #969696;
`};부여받은 index값과 indexOf에서 발견한 값과 비교를 하여 CSS를 작성합니다.
조건문을 활용하였는데요 이번달의 1의 위치 보다 이전일 경우와
이번달 1의 위치가 아닌 다음달의 1의 위치의 값을 회색으로 만들어 주었습니다.
props.firstDate > 0 를 입력한 이유는 다음달이 등장하지 않을때 이번달 1값에 css가 적용되어지기를 방지하기 위해서 작성하였습니다.
-1값은 자신도 포함시켜야 하기 때문에 준 값입니다.
이렇게 되면 기본적인 달력 css를 줄수가 있습니다.
