2025-08-11 CSS 코드

화면의 크기가 달라질때마다 화면 구조를 달라지게 하기위해서 @media{} 코드를 사용중인데 기본 크기(최대화)일때도 @media 에 적힌 코드가 적용되는 문제가 발생해 해결방법을 검색해 알게된 !important 를 정리했다

header.app-header {
  position: fixed;
  left: 0;
  z-index: 50;
  margin-left: 270px;
  width: calc(100% - 270px);
  background: var(--bs-body-bg);
  padding: 0 10px;
  top: 65px;
}

@media (max-width: 991px) {
   header.app-header {
    margin-left: 0 ;
    width: 100% ;
    left: 0 ;
    top:100px ;
  }
}

가장 문제인 header 부분이다 991px 크기가 될때 아래 쿼리가 적용되게 해놨지만 적용이 되지 않았다.

 

그래서

header.app-header {
  position: fixed;
  left: 0;
  z-index: 50;
  margin-left: 270px;
  width: calc(100% - 270px);
  background: var(--bs-body-bg);
  padding: 0 10px;
  top: 65px;
}

@media (max-width: 991px) {
   header.app-header {
    margin-left: 0 !important;
    width: 100% !important;
    left: 0 !important;
    top:100px !important;
  }
}

이렇게 뒤에 !important를 붙여줬다.

 

화면의 크기가 달라질때마다 화면 구조를 달라지게 하기위해서 @media{} 코드를 사용중인데 기본 크기(최대화)일때도 @media 에 적힌 코드가 적용되는 문제가 발생해 해결방법을 검색해 알게된 !important 를 정리했다

 

 

!important는 특정 스타일 규칙의 우선순위를 가장 높게 만드는 데 사용되는 키워드이다.

어떤 스타일이든 !important를 붙이면 다른 모든 규칙을 무시하고 해당 스타일이 강제로 적용한다.

 

일단 어떻게든 내가 만들어보고 싶은 화면을 적용시키기 위해서 !important 를 적용했다.. 이게 좋은 방법인지 아닌지는 모르지만 프로젝트 포인트는 내가 하고 싶은대로 만들어보는 것이기 때문에.. 일단은 급한불 끄는 느낌으로 적용시켰다 계속 나아가보자