[CSS] - Cascade Rules

Cascade Rules 에 대해서

Cascade Rules란?

cascade 란 계단 형식의 폭포수를 의미합니다. 그리하여 css 에서도 단계에 따라 css 우선순위가 달라집니다. 아래는 Cascade Rules 에 대한 참고 자료 입니다.

Cascade Rules

그러면 각 단계가 무엇을 의미하는지 알아보도록 하겠습니다.

1. inheritance

inheritance 는 상속을 의미합니다. 부모 요소에 적용을 해주면 , 자식 요소에도 같이 적용이 되는 경우가 있습니다. 대표적인 속성으로는 color 속성이 있습니다.

<p>hello<em>world</em></p>
 
<style>

p{

color : red;

}
 
</style>

2. user-agent

 user-agent 는 브라우저에서 기본적으로 제공되는 StyleSheet 입니다. 

user-agent

3. selector

selector 는 요소를 선택하는 선택자로, 이를 통해 특정한 요소를 선택하여 style 을 입혀줄 수 있습니다.

<div id = "ho"></div>
<div class = "hello"></div>
<div>helloworld</div>
 
<style>
#ho{
width : 100px;
height : 100px;
}


.hello{
width : 20px;
height : 10px;
border : 1px solid black;
}

div{
background-color : black;
}
 
</style>

더 많은 selector에 대한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors 를 참고하세여

4. source order

source order 는 html 문서 내 <style>  태그를 사용하여 style을 지정해주는 방식입니다. css 코드를 그대로 사용할 수 있습니다.

<div class = "helloworld">Helloworld</div>
 
<style>

.helloworld{

color : red !important;

}
 
</style>

5. inline

inline 은 html 문서의 태그 안에 직접 style 을 지정해주는 것입니다. 하지만 inline 을 남발할 경우 코드유지가 어려워지기 때문에 권장하지 않습니다.

<div style="color:red;">HelloWorld</div>

6. !important

!important 는 속성을 강제 적용시킬 수 있므며, 사용하면 나중에 적용될 값들을 다 무시할 수 있는 힘을 가지고 있습니다. important 의 뜻과 같이 앞선 스타일의 속성이 중요하니 변경시키지 말라는 의미로도 쓰입니다. 하지만 많이 쓰지 않는 것이 좋습니다.

<div class = "helloworld">Helloworld</div>
 
<style>
.helloworld{

color : red !important;

}

div{

color : green;

}
</style>