!important란?
- 적용한 속성을 추후에 다른 속성으로 변경하지 못하게 하는 것
!important 사용 방법
- 설정한 속성 뒤에 !important 명시
- 예시
<html>
<head>
<style>
p{
color: pink !important; /* !important 적용 */
}
</style>
</head>
<body>
<p>Hello!</p>
</body>
</html>
사용 예시
/* hello.html */
<html>
<head>
<style>
p { color: pink; }
</style>
</head>
<body>
<p>Hello!</p>
</body>
</html>
- CSS style p 색상 중복 적용
- 글자색에 분홍색을 적용하였으나, 빨간색으로 중복 적용
/* hello.html */
<html>
<head>
<style>
p { color: pink; }
p { color: red; }
</style>
</head>
<body>
<p>Hello!</p>
</body>
</html>
- CSS style p 색상 속성 값 고정 (!important 적용)
/* hello.html */
<html>
<head>
<style>
p { color: pink !important; }
p { color: red; }
</style>
</head>
<body>
<p>Hello!</p>
</body>
</html>
설명
- 속성 중복 적용시 가장 마지막에 적용한 속성으로 변경
- 개발자가 코드 작성시 원치 않은 다른 속성 적용을 방지
- !important를 사용하면 사용한 속성의 대한 값으로 고정
응용
- 이미 !important로 고정된 속성의 값 변경해보기
- 원래는 속성을 변경 할 수 없지만, 다시 !important를 사용하면 새로 적용이 가능
- 예시
/* hello.html */
<html>
<head>
<style>
p { color: pink !important; }
p { color: red; }
p { color: purple !important; }
</style>
</head>
<body>
<p>Hello!</p>
</body>
</html>
