웹 페이지 Footer 위치 잡는 방법

footer를 바닥에 고정시키고 싶은데 자꾸 기어올라온다.

기어올라와서 자꾸 본문을 가리는데 해결한 방법이다.

먼저, 바닥에 고정하는 방법은 2가지가 있는데

1. absolute: 부모를 기준으로

footer {
  position: absolute;
  bottom: 0;
}

한 화면에 모두 담기게 된다면 맨 밑에 잘 붙어있지만.

길게 스크롤이 있다면 본문을 가리게 된다.

2. fixed: 고정시켜 버리기

footer {
    position: fixed 
    bottom: 0
}

마찬가지로 스크롤이 없는 화면에는 정상적으로 작동하지만

스크롤이 생기면 본문이 가려진다.

3. 해결법 : !important

CSS는 누가 더 구체적이냐 ( id나 class가 많은가 ), 누가 나중에 적혔냐 이런 걸로 우선순위가 정해지는데
그걸 다 무시하고 이기게 만드는 게 !important

footer {
    position: fixed !important;
    bottom: 0 !important;
}

이렇게 하면 그냥 바닥에 착 잘 달라붙어 있는다.

그런데 같은 !important 라면 거기서도 우선순위는 누가 더 구체적인지, 나중에 적혔는지 정해지기 때문에 할거 다 적용해 봤는데 도저히 안 된다! 싶으면 사용하기