! important는 캐스케이드에서 변경을 강제합니다.
웹 사이트를 코딩하는 방법을 배우는 가장 좋은 방법 중 하나는 다른 사이트의 소스 코드를 보는 것입니다. 이 관행은 웹 디자인 과정 , 서적 및 온라인 교육 사이트를위한 많은 옵션이 있기 전에 며칠 동안 자신의 기술을 얼마나 많은 웹 전문가가 배웠는지입니다.
이 연습을하고 사이트의 CSS (Cascading Style Sheet)를 살펴 본다면 해당 코드에서 볼 수있는 한 가지 중요한 내용이 있습니다.
이것이 의미하는 바는 무엇이며, 마찬가지로 중요하게도 스타일 시트에서 어떻게 그 선언을 올바르게 사용합니까?
CSS의 캐스 캐 이드
우선, 계단식 스타일 시트가 실제로 캐스케이드 됨으로써 특정 순서로 배치된다는 것을 이해하는 것이 중요합니다. 일반적으로 스타일은 브라우저에서 읽은 순서대로 적용됩니다. 첫 번째 스타일이 적용된 다음 두 번째 스타일이 적용됩니다.
결과적으로 스타일이 스타일 시트 맨 위에 나타나고 문서에서 아래쪽으로 변경되면 해당 스타일의 두 번째 인스턴스는 첫 번째 스타일이 아닌 후속 인스턴스에 적용되는 스타일입니다. 기본적으로 두 가지 스타일이 동일한 것을 말하면 (즉, 동일한 수준의 특수성을 가짐), 나열된 마지막 스타일이 사용됩니다.
예를 들어, 스타일 시트에 다음 스타일이 포함되어 있다고 가정 해 봅시다. 첫 번째 스타일 속성이 적용된 경우에도 단락 텍스트가 검정색으로 렌더링됩니다.
이는 "검은 색"값이 두 번째로 나열되기 때문입니다. CSS는 위에서 아래로 읽혀 지므로 최종 스타일은 "검은 색"이므로 하나가 승리합니다.
p {color : red; }
p {color : black; }
얼마나 중요한가 중요성을 바꿉니다.
이 거의 동일한 규칙이 CSS에 의해 어떻게 처리되는지 이해 했으니 중요한 지시어가 어떻게 바뀌는 지 살펴볼 수 있습니다.
! important 지시어는 CSS 가 가장 중요하다고 생각하고 적용해야하는 규칙을 따르는 동안 CSS가 캐스케이드 되는 방식에 영향을줍니다. ! important 지시문이있는 규칙은 CSS 문서에서 해당 규칙이 어디에 표시되는지에 관계없이 항상 적용됩니다.
위의 예에서 단락 텍스트를 항상 빨간색으로 만들려면 다음을 사용합니다.
p {color : 빨강! 중요; }
p {color : black; }
"검은 색"값이 두 번째로 나열되어 있더라도 모든 텍스트가 빨간색으로 표시됩니다. 중요한 지시문은 캐스케이드의 일반 규칙을 무시하며 그 스타일에 매우 높은 특이성을 부여합니다.
단락을 빨간색으로 표시해야하는 것이 절대적으로 필요한 경우이 스타일을 사용하면 좋지만 이것이 우수 사례라는 의미는 아닙니다. ! important를 사용할 때와 적절하지 않을 때를 차례로 살펴 보겠습니다.
언제 사용 하는가! important
! important 지시문은 웹 사이트를 테스트하고 디버깅 할 때 매우 유용합니다. 스타일이 적용되지 않는 이유를 모르고 특수성 문제라고 생각되면 스타일에! important 선언을 추가하여 수정할 수 있는지 확인하십시오.
! important를 추가해도 실제로 스타일 문제가 해결된다면 방금 그것이 특수성 문제라고 결정한 것입니다. 그러나 중요한 코드를 그대로두기를 원하지는 않습니다. 단지 테스트 목적으로 만 사용되었습니다.
테스트가 완료되었으므로 이제 해당 지시문을 제거하고 선택기를 조정하여 스타일을 작동시키는 데 필요한 특수성을 달성해야합니다. ! 중요한 것은 정상적인 계단식이 어떻게 바뀌 었는지에 따라 부분적으로 생산 사이트로 들어가서는 안됩니다.
! 중요한 선언에 너무 많이 기울여 원하는 스타일을 얻는다면 결국에는 중요한 스타일로 가득 찬 스타일 시트를 갖게됩니다. 페이지의 CSS 처리 방식을 근본적으로 바꿀 것입니다. 그것은 장기적인 관리 관점에서 좋지 않은 게으른 습관입니다.
테스트 나 테마 또는 템플릿 프레임 워크의 일부인 인라인 스타일을 반드시 오버라이드해야하는 경우에는! important를 사용하십시오.
이러한 경우에도 가능하면이 접근법을 사용하고 대신 캐스케이드를 이해하는 깨끗한 스타일 시트를 작성하려고 노력하십시오.
사용자 스타일 시트
중요한 지침을 이해하는 데 필수적인 마지막 메모가 하나 있습니다. 이 지침은 웹 페이지 사용자가 페이지를 사용하거나 읽는 것을 어렵게 만드는 스타일 시트에 대처할 수 있도록 도와줍니다.
일반적으로 사용자가 웹 페이지를보기 위한 스타일 시트 를 정의하면 해당 스타일 시트는 웹 페이지 작성자의 스타일 시트에 의해 훼손됩니다. 사용자가! important로 스타일을 표시하면 작성자가! important로 규칙을 표시하더라도 해당 스타일이 웹 페이지 작성자의 스타일 시트보다 우선합니다.
이는 특정 방식으로 스타일을 설정해야하는 사용자에게 유용합니다. 예를 들어, 누군가가 사용하는 모든 웹 페이지에서 기본 글꼴 크기를 늘려야 할 수 있습니다. ! 중요한 지시문을 작성한 페이지 내에서 사용하면 사용자가 가질 수있는 특별한 요구 사항을 수용 할 수 있습니다.
제레미 지라드 편집