728x90
반응형
SMALL
📍 !important는 CSS에서 특정 스타일 규칙의 우선순위를 높이기 위해 사용
- 우선순위 문제 해결: 다른 CSS 규칙이 동일한 요소에 적용되고, 원하는 스타일이 적용되지 않을 때 사용
- 외부 라이브러리 또는 프레임워크: Bootstrap이나 다른 CSS 프레임워크와 같이 이미 정의된 스타일이 있을 때, 자신의 스타일을 강제로 적용하고 싶을 때 사용합니다.
- 디버깅: 스타일이 적용되지 않는 이유를 파악하기 어려운 경우, !important를 사용해 일시적으로 적용해볼 수 있습니다.
💡 하지만 !important는 남용하면 코드의 가독성과 유지보수성을 떨어뜨리므로, 가능한 한 사용을 피하고 다른 방법으로 문제를 해결하는 것이 좋습니다. 예를 들어, 선택자의 specificity를 높이거나, CSS 구조를 재조정하는 것이 더 바람직합니다.
- 만약 변경하고 싶으면 다시 !important 하면 됨
|
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>?</title>
<style>
p{
background-color : red !important;
float : left;
}
p{
background-color : blue;
float : left
}
p{
background-color : green !important;
float : left
}
</style>
</head>
<body>
<p>!important</p>
</body>
</html>
|
-> green이 나타남
728x90
반응형
LIST
'웹 > css' 카테고리의 다른 글
| grid css (0) | 2024.01.05 |
|---|---|
| & 사용 (0) | 2024.01.05 |
| min-content / max-content (0) | 2024.01.04 |
| object-fit (0) | 2024.01.04 |
| z-index (0) | 2024.01.02 |
