UpLog 릴리즈노트 프로젝트
헤더 고정 && 내용 "100% - (헤더 height)" 하는 법
5_hyun
2023. 7. 11. 01:46
반응형
일단 tailwind css를 기준으로 설명하겠지만 결국 어느 css를 사용하든 원리는 같다!
헤더 고정
<section className={'h-28'}>
<Header />
</section>
우선 헤더를 고정하기 위해서 위 코드처럼 h-28(7rem)으로 고정을 했다.
내용 "100% - (헤더 height)" 하는 법
<section className={'h-noneHeader'}>
<Routes>
<Route path={'/'} element={<Home />} />
<Route path={'/login'} element={<Login />} />
<Route path={'/signup'} element={<SignUp />} />
</Routes>
</section>
여기서 noneHeader는 tailwind css를 custom한 style이다.
-tailwind.config.js
height: {
noneHeader: 'calc(100vh - 7rem)',
},
이렇게 calc를 사용해서 100vh - (헤더 height)를 하면 아래 오는 내용을 손 쉽게 가운데 정렬할 수 있다.
완성 코드
<section className={'h-28'}>
<Header />
</section>
<section className={'h-noneHeader'}>
<Routes>
<Route path={'/'} element={<Home />} />
<Route path={'/login'} element={<Login />} />
<Route path={'/signup'} element={<SignUp />} />
</Routes>
</section>
이렇게 구성하면 어떤 해상도에서든 헤더의 길이가 고정되어 있다. 그렇기에 초반에 Layout을 제대로 잡아주었다.
이런 구성에 대해서 늘 생각했지만 매번 귀찮다고 하지 않았다.
막상해보니 엄청 간단한 것인데 여태 시도하지 않은 것을 반성해야겠다..!
앞으로는 궁금한 점이 생기면 바로 시도해보는 사람이 되려고 노력하고 싶다!
반응형