반응형
목차
1. 개요
2. important
3. 예제 및 실행 화면
1. 개요
css의 속성 중 !important가 있다. 단어의 뜻처럼 굉장히 중요해보이기에 포스팅을 한다.
2. !important
!important는 말 뜻 그대로 '중요한 속성' 을 의미하고, 해당 속성이 변경되지 않도록 하는 역할을 한다.
만약 변경하고 싶다면 똑같이 속성에 !important 속성을 삽입해주면 된다.
3. 예제 및 실행 화면
3.1) 예제 1
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>?</title>
<style>
p{
background-color : red !important;
float : left;
}
p{
background-color : blue;
float : left
}
</style>
</head>
<body>
<p>!important</p>
</body>
</html>
|
7번 라인과 12번 라인에 <p> 태그의 css를 정의하였다.
!important 속성이 없다면 <p> 태그의 내용은 12번
라인에 의해 파란색이 되어야 하지만
!important 속성에 의해 수정이 되지 않는 것을 확인할 수 있다.
3.2) 예제 2
|
1
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>
|
17번 라인에 !important 속성을 삽입하였더니 <p> 태그의 내용의 배경색이 바뀐것을 확인할 수 있다.
반응형
'프론트엔드 > CSS' 카테고리의 다른 글
| [CSS] Table 셀 테두리 사이 간격 없애기 / border-collapse : collapse; (0) | 2021.06.10 |
|---|---|
| CSS의 등장배경 (0) | 2019.06.19 |