왜 !important를 사용해야 할까요?

CSS에서 '!important'는 CSS 속성 값과 함께 사용하는 키워드입니다. CSS 속성 값과 함께 '!important'를 사용하면 브라우저는 동일한 요소의 다른 속성 값보다 해당 속성 값에 더 많은 중요성을 부여합니다.

다음은 CSS 속성 값과 함께 '!important'를 사용해야 하는 몇 가지 사용 사례입니다.

• 콘텐츠 관리 시스템(CMS)에서는 웹페이지의 CSS를 편집할 수 없습니다. 따라서 웹 페이지에 CSS를 추가하면 특정 요소에 적용할 수 없지만 CSS와 함께 '!important'를 사용하면 특정 CSS 속성의 초기 값을 재정의할 수 있습니다.

• ReactJS, Svelte 등과 같은 웹 프레임워크에서 UI 라이브러리를 사용할 때마다 UI 구성 요소의 CSS를 편집할 수 없는 경우가 있습니다. 이러한 경우 CSS 속성과 함께 '!important'를 사용하여 해당 값을 재정의할 수 있습니다.

• 실시간 애플리케이션에는 대용량 CSS 파일이 포함되어 있습니다. 알 수 없는 재정의로 인해 CSS가 요소에 영향을 주지 않는 경우도 있습니다. 이 경우 '!important'를 사용하여 특정 요소에 대한 특정 속성의 모든 값을 재정의할 수 있습니다.

구문

사용자는 아래 구문에 따라 CSS 속성 값에 '!important'를 사용할 수 있습니다.

으아악

위 구문에서 CSS 속성은 margin, padding, padding-left,font-size 등과 같은 CSS 속성이 될 수 있으며 값은 CSS 속성의 값으로 간주됩니다.

예

아래 예에서는 클래스 이름이 'black', 'grey', 'red'인 세 개의 div 요소를 만들었습니다. CSS에서는 클래스 이름을 기준으로 div 요소에 배경색을 지정했습니다.

또한 '!important' 키워드가 포함된 모든 div 요소에 '배경색: 분홍색' CSS 속성을 적용했습니다. 출력에서 사용자는 '!important'를 사용했기 때문에 모든 div의 배경색이 분홍색으로 변하는 것을 볼 수 있습니다.

으아악

예

아래 예에서는 두 개의 서로 다른 단락을 만들었습니다. 한 문단에는 'one' 클래스 이름이 포함되어 있고, 다른 문단에는 클래스 이름으로 'two'가 포함되어 있습니다. 모든

요소.

클래스 이름이 'one'인 요소의 CSS를 재정의하기 위해 '!important' 키워드를 사용하여 '

' 요소에 적용된 스타일을 재정의했습니다. 출력에서 사용자는 첫 번째 단락의 스타일이 서로 다른 것을 확인할 수 있습니다.

으아악

예

아래 예시를 통해 또 다른 '!important'를 사용하여 '!important'를 재정의하는 방법을 알아봅니다. '초기', '중간', '최종' 클래스 이름을 사용하여 세 개의 div 요소를 만들었습니다.

div 요소에 적용할 background-color CSS 속성에 '!important'를 사용했습니다. 따라서 처음에는 모든 div 요소의 배경이 아쿠아입니다. 그 후, 클래스 이름이 'middle'과 'final'인 요소에 적용하면서 배경색 CSS 속성과 함께 '!important'를 다시 사용했습니다.

출력에서 사용자는 파란색과 연연색 색상이 '아쿠아' 색상을 재정의하는 것을 확인할 수 있습니다.

으아악

결론

사용자들은 CSS에서 '!important'를 사용하는 방법을 배웠습니다. 기본적으로 '!important'의 남용을 피해야 합니다. 그렇지 않으면 요소의 CSS를 재정의하므로 많은 '!important'를 해결하는 것이 누구에게나 골칫거리가 될 수 있습니다.

그러나 사용자는 도서관의 콘텐츠 관리 시스템이나 UI 구성 요소의 CSS를 업데이트하는 동안 '!important'를 사용할 수 있습니다.

위 내용은 왜 !important를 사용해야 할까요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!