프론트엔드 작업을 하면서도 실제로는 class에다가 style을 담아서 사용하다가 필요하면 인라인으로 하는 상황이 많다보니, 더 다양하게 다룰 생각을 하지 않았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css//main.css">
</head>
<body>
<img src="./lion.png" alt="" class="profile">
<h3 class="name">Harry</h3>
<p class="content" id="special" style="color: yellow;">Front-end Developer</p>
</body>
</html>.profile{
width: 100px;
display: block;
margin-left:auto;
margin-right:auto;
}
.name{
text-align:center;
font-size: 16px;
}
#special {
text-align: center;
color:blue
}
p{
color:green
}
.content{
color:red
}위처럼 코드가 되어있으면, Front-end Developer라는 글자는 어떤 색으로 보일까?
당연 inline이 우선순위이므로 yellow색을 띈 Front-end Developer 글이 보이게 된다.
따라서 기본적으로는 아래처럼 생각하고 다루면된다.
1순위 inline
2순위 id선택자
3순위 class명
4순위 HTML태그명
5순위 상위 속성
6순위 기본값
그러나 !important가 등장하면 어떨까!
!important
!important를 사용하게 되면 그것이 어디에 위치해있던 상관없이 !important가 가리키는 css를 제일 우선으로 하게된다.
.profile{
width: 100px;
display: block;
margin-left:auto;
margin-right:auto;
}
.name{
text-align:center;
font-size: 16px;
}
#special {
text-align: center;
color:blue
}
p{
color:green !important;
text-align:right;
}
.content{
color:red
}p태그를 아래처럼 바꿔봤다.
p{
color:green !important;
text-align:right;
}color:green옆에 !important를 붙였다.
우선순위가 확 바뀌는 것을 볼 수 있다.
그러나 text-align:right는 #special에 밀려 가운데 정렬 되어있는 것을 확인 할 수 있다.
이렇듯 !important가 가리키는 해당 css의 우선순위를 제일 먼저로 바꿔주지만, css덩어리를 우선순위로 만들어주는 것은 아니다.
CSS 우선순위
따라서 CSS의 우선순위는 아래처럼 생각하고 다루면된다.
0순위 !important가 붙어있는 css값 (color:green !important;)
1순위 inline (style="")
2순위 id선택자 (#id)
3순위 class명 (.class)
4순위 HTML태그명 (p)
5순위 상위 속성
6순위 기본값
항상 써오던 것만 쓰다보면 확장성이 줄어드는데, 머리가 더 유연하게 하려면 이 때는 요 방법, 저 떄는 저 방법을 쓸 수 있게 이런 기초 지식을 많이 쌓아두면 다음에 귀찮게 content1, content2, content3 으로 만들 필요없이, p태그 속성에 두고, 바뀌어야할 것은 클래스 두고, 절댓값에는 !important 쓰면서 하는 자기 만의 방법을 개척하면 될 듯 하다.(사실 회사 방식써야지.)
