반응형
아래 소스코드는 !important 사용해서 다른 스타일 규칙보다 우선 순위를 가지는 것을 확인하는 예제 코드입니다.
사용법
property: value !important;
//예제
p {
color: red !important;
}
모든 <p> 요소의 텍스트 색상은 빨간색이 될 것입니다. 비록 다른 스타일 규칙에서 텍스트 색상을 정의하려고 하더라도 !important를 사용한 규칙이 다른 규칙보다 우선 순위를 가지므로 무시됩니다.
예제코드
<style>
p {
color: blue;
}
.red-text {
color: red !important;
}
.important-bg {
background-color: yellow !important;
}
.normal-bg {
background-color: lightblue;
}
.my-class {
background-color: lightblue; /* 첫 번째 스타일 규칙 */
color: white;
}
.my-class {
background-color: blue !important; /* 두 번째 스타일 규칙 (우선 순위를 가짐) */
}
.important-size {
font-size: 24px !important; /* 24px 크기로 강제 설정 (우선 순위를 가짐) */
}
.normal-size {
font-size: 16px; /* 일반적인 크기 설정 */
}
</style>
<body>
<p class="red-text">This is a red text.</p>
<p>This is a normal text.</p>
<div class="important-bg">This div has an important background color.</div>
<div class="normal-bg">This div has a normal background color.</div>
<p class="my-class">This div has important styles.</p>
<p class="my-class">This div also has the same class.</p>
<div class="important-size">This text has an important text size.</div>
<div class="important-size normal-size">This text has both important and normal text sizes.</div>
</body>
위의 코드 모두 !important를 사용한 스타일 규칙이 우선 순위 적용됩니다. 그러나 !important를 남용하지 않고 스타일 규칙의 선언 순서와 우선 순위 규칙을 고려하여 스타일을 작성하는 것이 더 깔끔하고 관리하기 쉬운 방법입니다.
반응형
'개발이야기 > HTML&CSS' 카테고리의 다른 글
| [HTML&CSS] HTML contenteditable 속성 사용법, 예제 (HTML 요소 편집) (0) | 2024.05.16 |
|---|---|
| [HTML&CSS] :not(), :has() 가상 클래스 선택자 사용하기 (예제, 설명) (0) | 2023.10.05 |
| [HTML&CSS] abbr, cite 태그 사용해서 약어와 줄임말, 인용과 출처 표시하기 (0) | 2023.09.25 |
| [HTML&CSS] details, summary 태그로 아코디언 메뉴 만들기 (접기/펼치기) (0) | 2023.09.08 |
| [HTML&CSS] datalist 태그 사용해서 자동완성 구현하기 (0) | 2023.09.08 |
댓글