짧은코딩

일단 tailwind css를 기준으로 설명하겠지만 결국 어느 css를 사용하든 원리는 같다! 헤더 고정 우선 헤더를 고정하기 위해서 위 코드처럼 h-28(7rem)으로 고정을 했다. 내용 "100% - (헤더 height)" 하는 법 여기서 noneHeader는 tailwind css를 custom한 style이다. -tailwind.config.js height: { noneHeader: 'calc(100vh - 7rem)', }, 이렇게 calc를 사용해서 100vh - (헤더 height)를 하면 아래 오는 내용을 손 쉽게 가운데 정렬할 수 있다. 완성 코드 이렇게 구성하면 어떤 해상도에서든 헤더의 길이가 고정되어 있다. 그렇기에 초반에 Layout을 제대로 잡아주었다. 이런 구성에 대해서 늘 생..