<div id="box">BOX</div>#box {
color:blue
}
당연히 이렇게 나온다.
but....
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/css/style3.css">
<title>CSS</title>
<style>
#box{
color:red;
}
</style>
</head>이런식으로 헤드에 스타일태그를 집어넣는다면 
이렇게 빨간 박스가 나온다. 근데 또
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#box{
color:red;
}
</style>
<link rel="stylesheet" href="../assets/css/style3.css">
<title>CSS</title>
</head>이렇게 중간에 링크태그보다 위에 있다면 가장 아래에 있는 style3.css 지정한 파란 글씨로 변하게 된다. 왜 그럴까?
css 스타일은 적용할때 우선순위라는게 작용이 된다.
-
선언된 곳에서 따라 우선순위
-
명시도(적용범위가 적을수로 명시도는 높은것)
-
코드위치 (나중에 선언된게 적용이 우선)
그래서 지금 예시를 든 내용은 1번에 해당하는 내용이다.
<div id="box" style="color: blue;">BOX</div>
인라인에 스타일
#box {
color:red;
}
id값
.box{
color:aqua;
}
class값위에 3가지 값이 있다.
명시도는 위에서 말했듯이 적용범위가 적을수록 높고
우선순위 적용은 명시도가 높을수록 우선순위 적용이 된다.
그래서 명시도는 인라인안에 스타일을 적용시킨것이 가장 우선순위이다.
이러한 우선순위 공식도가 있다. 참고하면 좋을거 같다.
!important (가장 쎄다.)
Inline style > ID > class/attribute/pseudo class> Type(tag) > *(universe selector)>inherited
프론트엔드 개발자를 꿈꾸는 돼지