캐스케이드는 폭포라는 의미가 있습니다. 처음 html이 등장했을 때는 CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의 고안자들은 html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이 CSS입니다.
CSS는 Cascading Style Sheet의 약자입니다. Cascading은 CSS의 첫번째 글자로 등장할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다. Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다.
즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각됩니다. 여기서는 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선순위를 어떻게 설정하는가에 대한 규칙인 캐스캐이딩에 대해서 알아봅니다.
웹브라우저 사용자 저자가 조화를 이루기 위한 것이 캐스캐이딩
그럴 때 필요한 것이 우선순위
웹브라우저와 사용자와 저자가 하나의 태그에 동시에 디자인을 적용했다면
웹브라우저<사용자<저자
순이다
하나의 태그에 여러 디자인이 적용됬을 때 style>id>class>tag 순이다
구체적이고 세밀한 선택자가 일반적이고 포괄적인 태그를 이긴다
태그 선택자는 일반적이고 class 선택자는 여러 개의 태그를 같이 선택하고 id 선택자는 하나를 선택하고
style 선택자는 구체적이고 명시적이다
모든 우선순위를 뛰어넘는 방법은 선언 부분에 !important;라고 써주는 것이다
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red}
#idsel{color:blue;}
.classsel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel" style="color:powederblue">css</li>
<li>javascript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>
댓글