CSS에서 부트스트랩 기본 스타일이 footer의 링크 스타일을 덮어쓰고 있을 때 해결 방법 1가지

2024. 10. 28 · fullmaza · 읽기 2분 · 조회 79회

!important로 부트스트랩 스타일 덮어쓰기에 관한 포스팅 입니다.

분명 똑 같이 했는데 왜 이 페이지만 css가 안먹히지? 그럴 경우는 대부분 상위 css가 더 우월해서 내가 적용하고 있는 스타일이 덮혀 버린 경우라고 생각 됩니다. 이럴 때 사용하는 것이 임포턴트라고 합니다.

어떤 경우인가?

똑같이 footer.php 를 인클루드 했습니다. 그런데 아래 이미지처럼 아래는 링크에 믿줄이 들어가네요. 그래서 확인해 보니 부트스트랩 기본 스타일이 풋터의 링크 스타일을 덮어쓰고 있어서 그렇다고 합니다.

이때 어떻게 해결 하는지 볼까요? 아래와 같이 !important 를 사용하면 됩니다.

<style>
    /* 기존 스타일 유지 */
    
    /* footer 링크 스타일 */
    footer a {
        text-decoration: none !important; /* !important로 부트스트랩 스타일 덮어쓰기 */
        color: #0D6EFD;
    }
    
    footer a:hover {
        text-decoration: none !important;
        font-weight: bold;
    }
</style>