메인 프로젝트 진행.
Header만 있던 방식에서, 모바일로 이동시 메뉴바를 아래쪽으로 옮기고, 상단에는 검색창만 남기는 방식으로 변경.
style-component 를 사용해서 react-router-dom의 Link에 css를 줄 때, a태그에 css를 입히듯,
const ErrorMessage = styled.div`
margin-bottom: 15px;
&.title {
font-size: 2rem;
margin-bottom: 15px;
font-weight: bolder;
@media ${props => props.theme.mobile} {
font-size: 2rem;
}
}
a {
color: hsl(206deg 100% 40%);
&:hover {
color: hsl(206deg 100% 52%);
}
}
`;
와 같은 방식으로 css를 줄 수 있었다.
페이지의 크기를 줄이면 본문이 footer를 침범하는 문제가 생겼는데, 본문에 min-height를 줌으로서 문제를 해결하였다.