programming/HTML&CSS
[HTML&CSS] CSS 우선순위 적용 (!important)
LeeBorn
2019. 11. 10. 00:00
반응형
디자이너와 개발자가 따로 작업을 할 경우,
남이 만든 HTML&CSS에 내가 직접 스타일을 입히고 싶을 경우,
CSS, JS, HTML 파일이 완전히 분리된 상황에서 어느 것이 먼저 인지 헷갈릴 경우 등,
CSS 우선순위를 알아야 할 경우는 많다.
이때 무조건 !important 속성을 붙여서 해도 되긴 하지만,
적용 순서를 알아보면 !important 속성을 사용하지 않아도 적용할 수 있는 방법이 많다.
css_important.html
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
h1{
color : yellow !important;
}
</style>
<link rel='stylesheet' type='text/css' media='screen' href='main.css'>
<script src='main.js'></script>
<style>
h1{
color : orange;
}
#div2{
background-color : gray !important;
}
</style>
</head>
<body>
<div id="div1">
<h1 style="color:green !important">test h1-1</h1>
<h1 style="color:blue !important">test h1-2</h1>
<h1>test h1-3</h1>
</div>
<hr>
<div id="div2" style="background:yellowgreen;">
<h2 style="color:red;">test h2-1</h2>
<h2 style="color:thistle">test h2-2</h2>
<h2>test h2-3</h2>
</div>
</body>
</html>
|
main.css
|
1
2
3
4
5
6
7
|
h1{
color : red;
}
h2{
color : purple;
}
|
위의 코드를 보면 여러가지 방법으로 스타일을 적용시켰다.
- 외부 css파일을 html에 삽입
- <style> 태그를 사용해 스타일 적용
- 외부 css파일 적용전 / 적용 후에 <style> 태그 사용
- 태그에 style 속성에 직접 사용
- !important 사용
해당 목록과 같이 여러 가지로 사용할 수 있다.
기본적으로 외울 스타일 순서는
나중에 적용된 스타일 또는 !important 다.
나중에 적용된다는 말은 코드가 아래로 실행될 때 가장 아래에 있는 코드로 실행된다는 것이다.
그래서 html에 <style> 태그로 적용을 해도 외부의 main.css가 적용되기 전에 발생하면,
main.css가 나중에 수행되므로 main.css의 스타일을 따른다.
그리고 <style>이 main.css보다 뒤에 수행된다면,
html에 선언된 <style> 태그의 스타일이 적용된다.
이러한 모든 것들은 무시하고 싶다면 !important 속성에 적어주면 된다.
모두 다 !important로 적용되어 있다면,
첫 번째처럼 뒤에 적용된 태그로 스타일이 적용된다.
반응형