목차
CSS The !important Rule
- description : CSS The !important Rule
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-21
What is !important?
CSS의!important 규칙은 속성/값에 더 많은 중요성을 추가하는 데 사용됩니다.
실제로 !important 규칙을 사용하면, 해당 요소의 특정 속성에 대한 이전 스타일 규칙을 모두 중단합니다.
예를 살펴 보겠습니다.
예제
<!DOCTYPE html> <html lang="en"> <style> #myid {background-color: blue;} .myclass {background-color: gray;} p {background-color: red !important;} </style> </head> <body> <p>This is some text int a paragraph.</p> <p class="myclass">This is some text in a paragraph.</p> <p id="myid">This is some text in a paragraph.</p> </body> </html>
예제 설명
위의 예에서, ID 셀렉터와 클래스 셀렉터가 더 높은 명시도를 가지더라도, 세 단락은 모두 빨간색 배경색이 됩니다.
!important 규칙은 두 경우 모두 background-color 속성을 중단합니다.
Important About !important
!important 규칙을 중단하는 유일한 방법은,
소스 코드에서 동일한 (또는 더 높은) 명시도를 가진 선언에 다른 !important 규칙을 포함시키는 것입니다.
여기서 문제가 시작됩니다! 이로 인해 CSS 코드가 혼란스럽고, 특히 큰 스타일시트가 있는 경우 디버깅이 어려워집니다!
여기에 간단한 예를 만들었습니다. CSS 소스 코드를 보면 어떤 색상이 가장 중요하다고 생각되는지는 명확하지 않습니다.
예제
<!DOCTYPE html> <html lang="en"> <style> #myid {background-color: blue !important;} .myclass {background-color: gray !important;} p {background-color: red !important;} </style> </head> <body> <p>This is some text int a paragraph.</p> <p class="myclass">This is some text in a paragraph.</p> <p id="myid">This is some text in a paragraph.</p> </body> </html>
Tip:
일부 CSS 소스 코드에서 볼 수 있으므로, !important 규칙에 대해 아는 것이 좋습니다.
그러나 꼭 필요한 경우가 아니면 사용하지 마십시오.
maybe One or Two Fair Uses of !important
!important를 사용하는 한 가지 방법은 다른 방식으로 중단할 수 없는 스타일을 중단해야 할 경우입니다.
콘텐츠 관리 시스템(CMS)에서 작업 중이고, CSS 코드를 편집 할 수 없는 경우일 수 있습니다.
그런 다음, 일부 사용자 지정 스타일을 설정하여 일부 CMS 스타일을 중단할 수 있습니다.
!important를 사용하는 또 다른 방법은 다음과 같습니다:
페이지의 모든 버튼에 대해 특별한 모양을 원한다고 가정합니다.
여기에서 버튼은 회색 배경색, 흰색 텍스트, 패딩 및 테두리로 스타일이 지정됩니다.
예제
<!DOCTYPE html> <html lang="en"> <style> .button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid #000; } </style> </head> <body> <p>Standard button: <a class="button" href="https://www.w3schools.com/css/default.asp">CSS Tutorial</a></p> <p>Standard button: <a class="button" href="https://www.w3schools.com/html/default.asp">HTML</a></p> </body> </html>
명시도가 더 높은 다른 요소 안에 버튼을 넣으면 버튼 모양이 변경될 수 있으며 속성이 충돌합니다.
다음은 이에 대한 예제입니다.
예제
<!DOCTYPE html> <html lang="en"> <style> .button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid #000; } #myDiv a { color: red; background-color: yellowgreen; } </style> </head> <body> <p>Standard button: <a class="button" href="https://www.w3schools.com/css/default.asp">CSS Tutorial</a></p> <div id="myDiv"> <p>A link text inside myDiv: <a href="https://www.w3schools.com/html/default.asp">HTML Tutorial</a></p> <p>A link button inside myDiv: <a href="https://www.w3schools.com/html/default.asp" class="button">HTML Tutorial</a></p> </div> </body> </html>
강제로 모든 버튼이 동일한 모양을 갖게 하려면, 다음과 같이 버튼의 속성에 !important 규칙을 추가할 수 있습니다.
예제
<!DOCTYPE html> <html lang="en"> <style> .button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid #000 !important; } #myDiv a { color: red; background-color: yellowgreen; } </style> </head> <body> <p>Standard button: <a class="button" href="https://www.w3schools.com/css/default.asp">CSS Tutorial</a></p> <div id="myDiv"> <p>A link text inside myDiv: <a href="https://www.w3schools.com/html/default.asp">HTML Tutorial</a></p> <p>A link button inside myDiv: <a href="https://www.w3schools.com/html/default.asp" class="button">HTML Tutorial</a></p> </div> </body> </html>
