문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
======CSS The !important Rule======
<WRAP left notice 70%>
  * description : CSS The !important Rule
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-21
</WRAP>
<WRAP clear></WRAP>
\\

=====What is !important?=====
%%CSS%%의''%%!important%%'' 규칙은 속성/값에 더 많은 중요성을 추가하는 데 사용됩니다.\\
\\
실제로 ''%%!important%%'' 규칙을 사용하면, 해당 요소의 특정 속성에 대한 이전 스타일 규칙을 모두 중단합니다.\\
\\
예를 살펴 보겠습니다.\\

====예제====
<code css>
<!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>
</code>
\\
====예제 설명====
위의 예에서, %%ID%% 셀렉터와 클래스 셀렉터가 더 높은 명시도를 가지더라도, 세 단락은 모두 빨간색 배경색이 됩니다.\\ 
''%%!important%%'' 규칙은 두 경우 모두 ''%%background-color%%'' 속성을 중단합니다.\\

====Important About !important====
''%%!important%%'' 규칙을 중단하는 유일한 방법은,\\ 
소스 코드에서 동일한 (또는 더 높은) 명시도를 가진 선언에 다른 ''%%!important%%'' 규칙을 포함시키는 것입니다.\\ 
여기서 문제가 시작됩니다! 이로 인해 %%CSS%% 코드가 혼란스럽고, 특히 큰 스타일시트가 있는 경우 디버깅이 어려워집니다!\\
\\
여기에 간단한 예를 만들었습니다. %%CSS%% 소스 코드를 보면 어떤 색상이 가장 중요하다고 생각되는지는 명확하지 않습니다.\\

====예제====
<code 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>
</code>
\\
**Tip:**\\ 
일부 CSS 소스 코드에서 볼 수 있으므로, ''%%!important%%'' 규칙에 대해 아는 것이 좋습니다.\\  
그러나 꼭 필요한 경우가 아니면 사용하지 마십시오.\\

=====maybe One or Two Fair Uses of !important=====
''%%!important%%''를 사용하는 한 가지 방법은 다른 방식으로 중단할 수 없는 스타일을 중단해야 할 경우입니다.\\ 
콘텐츠 관리 시스템(%%CMS%%)에서 작업 중이고, %%CSS%% 코드를 편집 할 수 없는 경우일 수 있습니다.\\ 
그런 다음, 일부 사용자 지정 스타일을 설정하여 일부 CMS 스타일을 중단할 수 있습니다.\\
\\
''%%!important%%''를 사용하는 또 다른 방법은 다음과 같습니다:\\ 
페이지의 모든 버튼에 대해 특별한 모양을 원한다고 가정합니다.\\ 
여기에서 버튼은 회색 배경색, 흰색 텍스트, 패딩 및 테두리로 스타일이 지정됩니다.\\

====예제====
<code css>
<!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>
</code>
\\
명시도가 더 높은 다른 요소 안에 버튼을 넣으면 버튼 모양이 변경될 수 있으며 속성이 충돌합니다.\\ 
다음은 이에 대한 예제입니다.\\

====예제====
<code css>
<!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>
</code>
\\
강제로 모든 버튼이 동일한 모양을 갖게 하려면, 다음과 같이 버튼의 속성에 ''%%!important%%'' 규칙을 추가할 수 있습니다.\\

====예제====
<code css>
<!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>
</code>























{{tag>오션 CSS The !important Rule}}
문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구
