코드
import styled from "styled-components";
import { Link } from "../../../node_modules/react-router-dom/dist/index";
import Button from "./Buttons";
import Responsive from "./Responsive";
const HeaderBlock = styled.div`
position: fixed;
width: 100%;
background: white;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.08);
`;
const Wrapper = styled(Responsive)`
height: 4rem;
display: flex;
align-items: center;
justify-content: space-between; // 자식 엘리먼트 사이의 여백을 최대로 설정
.logo {
font-size: 1.125rem;
font-weight: 800;
letter-spacing: 2px;
}
.right {
display: flex;
align-items: center;
}
`;
const Spacer = styled.div`
height: 4rem;
`;
export default function Header() {
return (
<>
<HeaderBlock>
<Wrapper>
<Link to="/" className="logo">
REACTERS
</Link>
<div className="right">
<Button to="/login">로그인</Button>
</div>
</Wrapper>
</HeaderBlock>
<Spacer />
</>
)
}
import Header from "../components/common/Header";
export default function PostListPage() {
return (
<>
<Header />
<div>안녕하세요.</div>
</>
)
}
- fixed를 사용하면 스크롤을 내려도 화면 상 고정한 곳에 위치
- 다른 게시물을 가릴 수 있음
Wrapper
- Header의 children으로 Wrapper가 있는데 높이가 4rem
Spacer
- HeaderBlock이 끝나고 존재하는 공간 창출 컴포넌트
PostListPage
- Header를 넣고 그 아래 게시물을 작성했다.
- Header의 크기가 4rem이고 그 밑 Spacer가 4rem
- 안녕하세요는 4rem 이후에 나옴