CSS 충돌 시 특정 스타일을 우선시하고 싶은 경우 !important 사용방법

같은 속성 코드의 CSS가 작성됐을 경우, 웹 개발 과정에서 CSS 스타일 충돌은 흔하게 발생합니다. 특히, 여러 스타일 시트가 적용되거나 외부 라이브러리와 함께 작업할 때, 원하는 스타일이 예상대로 적용되지 않는 상황이 발생할 수 있어요. 이럴 때, 원하는 스타일을 강제로 적용하고자 할 때 유용한 도구가 바로 CSS의 !important 속성입니다.  !important를 적절히 사용하면, 특정 스타일 선언의 우선순위를 높여 다른 스타일 규칙을 무시하고 적용시킬 수 있어요. 이 글에서는 !important 사용 방법과 그 주의사항에 대해 알아볼게요.

 

 

CSS !important 사용한 이유

제가 이번에 티스토리 스킨을 변경했답니다.

티스토리 스킨 변경 후 figure 이미지가 콘텐츠 영역을 벗어나는 문제가 발생했어요.

css width 영역을 넘어가는 이미지

바로 그림처럼 contents영역을 그림이 튀어나가더라구요.

원인을 살펴보니, figure 태그에 스타일이 직접 적용되어 있었고, 이 스타일로 인해 이미지가 영역을 벗어났더라구요.

contents 영역에서 100% 스타일을 적용하기 위해 자바스크립트로 열심히 작성해봤지만, 기존에 적용된 스타일 때문에  해결이 쉽지 않더라구요.

그러다가 !important를 알게 되었답니다.

 

!important 사용 방법

CSS에서 !important 규칙은 스타일 선언에 붙여 사용합니다.

이를 통해 해당 스타일 선언을 다른 어떤 선언보다도 우선시하게 만들 수 있어요.

구체적인 사용 방법은 다음과 같습니다:

선택자 {
    속성: 값 !important;
}

예를 들어, 이미지의 너비를 100%로 설정하고 이를 우선적으로 적용하고자 한다면, 다음과 같이 작성할 수 있어요.

img {
    width: 100% !important;
}

이러한 방식으로 !important를 사용하면, 해당 선택자에 대한 다른 모든 스타일 규칙을 무시하고 너비를 100%로 설정할 수 있습니다.

 

나의 문제 해결방법

일단 지금 적용하고 있는 hELLO 스킨을 뜯어봤습니다.

기본적으로 이미지를 업로드 하면 figure 속성이 아래와 같이 적용되더라구요.

<figure class="imageblock alignCenter" 
    data-ke-mobilestyle="widthOrigin" 
    data-filename="..." 
    data-origin-width="1024" 
    data-origin-height="1024" 
    style="margin-left: 50%; 
    transform: translateX(-50%); 
    width: 1024px; max-width: 1024px;">

여기서 style의 "width:1024px"가 문제였습니다. 

문제를 해결하기 위해, !important를 사용하여 width 속성을 강제로 100%로 설정하려고 합니다.

#content .contents_style figure
{
  width:100% !important;
}

"#content" 아이디를 가진  ".contents_style" 클래스 내부의  "figure" 태그를 가진 녀석이라면 "width:100% !important;"라고 CSS를 추가해서 이미지가 콘텐츠 영역 내에서 적절하게 표시되도록 해주었답니다.

css width 영역을 지키는 이미지

이제 영역을 오버하지 않고 잘 그려주고 있습니다.

이렇게 !important를 사용함으로써, 자바스크립트같은 다른 방법으로 해결이 어려운 스타일 충돌 문제에 대한 적절한 해결했답니다.

특히, 외부에서 불러오는 스킨이나 라이브러리 때문에 발생하는 스타일 문제를 해결할 때 유용하게 사용할 수 있어요.

하지만 이 기능은 강력하므로, 신중하게 사용해야 하며, 가능한 한 다른 해결책을 먼저 고려하는 것이 좋아요.

 

주의사항

남용하지 않기

!important는 매우 강력한 도구이기 때문에 남용할 경우 스타일 시트의 가독성과 유지보수성이 저하될 수 있어요.

가급적이면 스타일 충돌을 해결하기 위한 첫 번째 수단으로 사용하지 않는 것이 좋습니다.

유지보수 고려

다른 개발자가 코드를 이해하고 수정하기 어렵게 만들 수 있으므로, !important 사용 이유를 주석으로 남기는 것이 좋아요.

최후의 수단으로 사용

CSS의 특정성 규칙을 이해하고 적용할 수 없는 경우, 또는 외부 스타일 시트와 충돌을 해결할 수 없는 상황에서만 !important를 사용하는 것을 고려하세요.

저는 소스 다른곳을 다 찾아보고 딱 저요소만 적용되는것인지 다 찾아보고 !important를 적용했답니다.

 

결론

!important는 CSS 스타일 충돌을 해결하고 특정 스타일을 우선시하고 싶을 때 유용한 도구입니다.

하지만 그 강력함 때문에 주의 깊게 사용해야 하며, 스타일 시트의 유지보수성을 해치지 않도록 신중하게 사용하는 것이 좋아요.

가능한 한 CSS 선택자의 특정성을 활용하고, !important는 최후의 수단으로 고려해야 합니다.

 

함께보면 좋은글

구글 검색 품질 개선 업데이트 발표 구글도 저품질 블로그 나오나?