HTML, CSS

[HTML, CSS] 내용 부분 스타일 지정만으로 푸터 하단 고정하는 방법

주갬 2023. 11. 22. 14:50
반응형

 

 

안녕하세요 주갬입니다.

 

 

오늘은 사이드 프로젝트를 하면서 푸터가 중간에 떠있는 현상을 해결한 방법에 대해 설명 드리려고 합니다.

 

 

 

구글링을 해보시면 푸터를 하단에 고정하기 위한 다양한 방법들이 존재합니다.

하지만 그 대부분의 방법이 저의 상황에서는 적용하기엔 무리가 있는 방법들이였습니다.

 

 

그 방법들을 간략히 정리하면 이렇습니다.

 

 

1. position: fixed

    - 푸터가 하단에 계속 고정되어 있어 스크롤을 내려도 항상 같은 위치에 푸터가 존재해 어색하다.

 

 

2. position: absolute

    - 푸터를 본문 밑에 고정시킨다면 본문 길이가 짧을 때 하단 고정이 안된다.

    - 본문 길이가 길 때도 스크롤은 absolute로 지정된 영역을 잡아주지 않아 어색하다.

 

 

3. 본문에 height: 100% 나 100vh 처리등을 해줘서 본문을 꽉 채워주는 방법

    - 위 두 방법의 해결책으로 많이 나오는 방법이다.

    - 하지만 vh는 모바일에서 상하단의 바 영역을 반영하지 못하기 때문에 스크롤이 어색하게 나오게 된다. 

    - height: 100%를 주는 방법은 %가 부모 영역의 크기를 반영한다는 특성 상 리액트에서는 부모를 타고타고 들어가 #root의 height를         지정해줘야 하는 상황이 생긴다. 하자면 하겠지만,, #root부터 시작해서 모든 부모요소에 height: 100%를 주기엔 무리인 상황이                많을 것이라 생각한다.

 

 

4. Flexbox, Grid 사용

 

Flexbox)

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 최소 높이를 100% 화면 높이로 설정 */
}

main {
  flex: 1; /* 메인 콘텐츠가 화면의 남은 공간을 차지하도록 설정 */
}

 

 

Grid)

body {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 헤더, 메인 콘텐츠, 푸터를 각각의 행으로 설정 */
  min-height: 100vh;
}

 

 

 - 지피티씨가 알려준 방법으로 적용해보니 잘 되긴 했지만... 역시나 body부분의 스타일부터 건드려야한다.

 

 

 

요구 사항 ) 

 

저는 사이드프로젝트 중간에 합류한 입장이라 제가 body부분의 스타일을 건들면 다른 분들이 이미 잡아둔 스타일들이 모두 깨질까 걱정이 되었기 때문에 내용의 스타일만을 수정해서 푸터를 하단에 고정하는 방법을 찾아야했습니다.

 

 

그 결과 제가 맡은 내용 부분만을 수정해서 푸터를 예쁘게 하단에 고정하는 방법을 알아내었고 이 글에서 소개드리고자 합니다.

 

 

 

 

 

 

문제 상황)

 

중간에 합류해서 처음 코드를 받았을 때는 이런 상황이였습니다.

 

 

 

내용이 짧아서 푸터가 저 위로 올라가 있는 모습 보이시나요? 내용이 길 때는 푸터가 자리를 잘 잡고 있지만 내용이 짧을 때의 스타일은 제대로 잡지 못하는 상황이였습니다.

 

 

 

트러블 슈팅 )

 

1. 처음에는 내용의 margin을 calc(10vh - 헤더 높이 - 내용 높이 - 푸터 높이) 로 잡아서 적용했었습니다. 

    - 하지만 이렇게 하니 스크롤을 내릴 때 margin이 무시되고 푸터가 위로 올라오는 현상이 발생했습니다. 

    - 이는 calc 연산의 결과값이 height가 바뀌면 계속 재계산되기 때문인 것으로 추측 중입니다.

 

 

2. 고민 끝에 저는 내용 제일 끝 부분에 div를 추가하고 필요한 만큼 height를 주면 되지 않을까 라는 생각이 들었습니다.

html을 블럭쌓기라고 표현하는데, 내용과 푸터 사이에 빈 블럭을 하나 추가하면 어떨까 하는 아이디어 였습니다.

 

 

 

 

 

 

 

 

해결 방법 )

 

우선 margin을 이용해 내용 영역을 적당히 예쁘게 잡아줍니다. 화면 크기가 아주 작을 때 꼭 필요한 여백만을 지정해준다는 느낌으로 잡아주시면 됩니다.

 

 

이렇게 margin을 적당히 잡아주시면

 

 

이렇게 화면이 작아져도 내용이 가운데에 예쁘게 위치하게 됩니다.

 

 

 

 

 

그 다음은 제일 밑에 div를(블록요소) 생성하고 calc연산을 이용해 적당한 height를 주는 것입니다.

 

    <Page>
      <Wrap>
           내용
      </Wrap>
      <div style={{ height: "calc(100vh - 128px - 300px - 214px - 360px)" }}></div>
    </Page>

 

저는 다음과 같이 스타일을 줬습니다. 

 

 

calc연산은 다음과 같이 계산했습니다.

 

 

 

 

 

이렇게 하면 내용의 시작점은 화면 크기가 변해도 그대로이고 내용 밑부분만 변하면서 푸터는 하단에 고정이 되게 됩니다.

 

 

 

 

잘 됩니다!!! 캬캬

 

 

 

 

 

 

 

오늘은 푸터를 하단에 고정하기 위한 방법을 알아보았습니다.

전체적인 스타일은 수정하지 않으면서 내용 부분 밑에 여백을 주는 div를 만들고 유동적인 height를 주는 방법으로 이를 해결해보았습니다.

 

 

감사합니다. 

반응형