프로그래밍/CSS

생활코딩 css 정리 - 12. 캐스캐이딩

가카리 2017. 10. 13. 23:38
반응형
12. 캐스캐이딩
캐스케이드는 폭포라는 의미가 있습니다. 처음html이등장했을 때는CSS가 없었습니다. 웹의 사용자들은 곧 디자인을 요구하기 시작합니다. 웹의고안자들은html을 꾸며주는 언어의 필요성에 공감하기 시작합니다. 그렇게해서 등장한 것이CSS입니다.
 
CSS는Cascading Style Sheet의 약자입니다. Cascading은CSS의 첫 번째 글자로 등장 할만큼 가장 중요한 기능 다시 말해 철학이라는 의미가 있습니다. Cascading을 사전에서 찾아보면 폭포라는 의미가 있습니다. 즉 웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에 착안하고 있다고 할 수 있을 것 같습니다.
 
즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다고 생각됩니다. 여기서는 하나의 엘리먼트에 대해서 다양한 효과가 영향력을 행사하려고 할 때 우선 순위를 어떻게 설정하는가에 대한 규칙인 캐스캐이딩에 대해서 알아봅니다.
 
1) 캐스캐이딩이란?
만약 아래와 같이id가 idsel인li태그에서 다음과 같이 여러개의 스타일이 주어졌다면 과연 어떤 것이 적용될까?
 
cascading_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
      licolor:red;
      #idselcolor:blue;
      .classselcolor:green;
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel"
      style="color:powderblue">css</li>
</ul>
</body>
</html>
실행 결과

다음과 같이 실행됨을 알 수 있습니다. 즉, 인라인에style을 준 것이 적용됬음을 알 수 있습니다.
결국 인라인style <id선택자 < 클래스 선택자 < 태그 선택자순으로 적용됩니다.
이유는 선택자들이 선택하는 범위입니다. 선택하는 범위가 좁을수록 먼저 적용되는 규칙을 가집니다.

 
만약 이러한 적용 순서를 깨고 싶다면 위와 같이 !important를 붙이면 됩니다.

 
반응형