반응형
HTML 문서에서 쓰이는 CSS 값은 (style 속성) 아래와 같이 작성할 수 있다.
1. CSS 파일 작성
2. style Tag 작성 (예 : <style>.test{font-size:10px;}</style>)
3. style 속성 값 작성 (예 : <div style="font-size:16px;">Example</div>)
그리고 이 CSS 들은 우선도가 존재한다.
기본적으로 아래와 같다.
style 속성> style Tag > CSS 파일
하지만 이 상황에서 예외가 존재한다.
바로 각 css 값에 !important 를 작성하면 예외가 발생한다.
해당 값은 되도록이면 사용하지 않는게 좋으나,
대부분 library 로 사용하는 css 에서 같은 class 값이나 id 값을 사용할 경우에 사용된다.
!important 값을 붙이면 그 css 값을 우선하게 된다.
그러나, 기본적인 우선도와 마찬가지로 모든 css 값에 !important 가 붙을 경우 우선도를 따라가게된다.
결론적으로 우선도는 아래와 같다.
style 속성(!important) > style Tag(!important) > CSS 파일(!important) > style 속성 > style Tag> CSS 파일
아래는 TEST 코드다.
------------------------------------------------
test.css
------------------------------------------------
.cssSpanClass {font-size:10px;}
.cssSpanClass2 {font-size:10px!important;}
------------------------------------------------
test.html
------------------------------------------------
<html>
<head>
<link rel="stylesheet" type="text/css" href="./test.css">
<style>
.styleSpanClass {font-size:20px;}
.styleSpanClass2 {font-size:20px!important;}
</style>
</head>
<body>
<h2>Hello World</h2>
<span class="cssSpanClass">TEST CSS</span>
<br>
<span class="cssSpanClass styleSpanClass">TEST CSS</span>
<br>
<span class="cssSpanClass2 styleSpanClass">TEST CSS</span>
<br>
<span class="cssSpanClass2 styleSpanClass2">TEST CSS</span>
<br>
<span class="cssSpanClass styleSpanClass" style="font-size:30px;">TEST CSS</span>
<br>
<span class="cssSpanClass2 styleSpanClass" style="font-size:30px;">TEST CSS</span>
<br>
<span class="cssSpanClass2 styleSpanClass2" style="font-size:30px;">TEST CSS</span>
<br>
<span class="cssSpanClass2 styleSpanClass2" style="font-size:30px!important;">TEST CSS</span>
<body>
</html>
'Study > Html' 카테고리의 다른 글
| [Freemarker 프리마커] FTL (Freemarker Template Language) 문법 (1) | 2020.12.11 |
|---|---|
| 이미지 회전 Image rotate (0) | 2020.12.09 |
| HTML 5 TEST (canvas, video, etc) (0) | 2014.03.05 |