상속과 하향법칙, 우선순위

상속(inheritance)                                             CSS에서 상속이란 어떤 CSS 속성들이 태그 안에 중첩된 다른 태그에 대물림되는 과정이다. ※ 상속의 한계 - 웹 브라우저는 어떤 태그들에는 내장 서식을 적용한다.- 일반적으로 페이지 내에 요소를 배치하는 위치에 영향을 주는 속성 또는 여백, 외곽선 같은 것은 상속되지 않는다.- 스타일끼리 충돌이 발생하면, 하향법칙(우선순위)에 따라 더 구체적인 스타일이 적용된다. <hr data-ke-style="style3">   하향법칙                                                                         1. 히향 법칙은 어떻게 스타일에 적용되는가 1.1 상속되는 스타일은 누적된다. body { font-family : "궁서"; }p { color : #ff6600; }strong { font-size : 16px; } <body>   궁서, #ff6600, 16px</body> ※ 태그는 다음 스타일이 적용된 것과 똑같이 표시된다.strong { font-family : "궁서" ; color : #ff6600 ; font-size : 16px ; }  1.2 계승된 CSS 속성 사이에 충돌이 발생하면 가장 가까운 선조가 이긴다. body { color :  red;  }p { color : green; }strong { font-size : 16px; } <body>   글자색은 green</body> ※  태그에는 글자 색상이 green이 적용된다. <hr data-ke-style="style6"> 2. 특이도(specificity) : 구체성이 가장 높은 스타일을 적용한다 - 태그 선택자의 특이도는 1점이다.- 클래스 선택자의 특이도는 10점이다.- ID 선택자의 특이도는 100점이다.- 내장 스타일(inline style)의 특이도는 1000점이다. ※ :first-line 같은 가상 요소는 태그 선택자처럼 취급되어 특이도가 1점이다.※ :link 같은 가상 클래스는 클래스처럼 취급되어 10점의 특이도를 갖는다. p { color : aqua; }.email { color : red; }#banner { color : blue; } <p class="email" id="banner">글자색은 blue #banner의 특이도가 100이므로 blue로 표시된다. <hr data-ke-style="style6"> 3 직접 적용된 스타일의 동일 속성이 이긴다. 특이도가 아주 높은 스타일에서 상속된 속성이라 하더라도, 직접 적용된 스타일의 동일 속성과 붙으면 이길 수 없다. .email { color : red; }#banner { color : blue; } <a href="#" class="email" >글자색은 red</a> #banner의 특이도는 100이지만 <a> 태그의 글자 색상은 특이도 10인 .email의 영향을 받아서 red로 표시된다. <hr data-ke-style="style6"> 4 동점자 처리 : 마지막 스타일이 이긴다. 충돌되는 두 스타일이 하필이면 특이도가 같을 수도 있다. 또는 선택자가 달라도 특이도가 같을 수 있다. 특이도가 같을 때는 스타일시트의 마지막에 나타나는 스타일이 승자가 된다. p .email { color : blue; }.byline a { color : red; } <a href="#" class="email" >글자색은 red</a> 이 두 스타일은 모두 특이도가 11(클래스 선택자 10 + 태그 선택자 1)이고, 전부 <a> 태그에 적용된다. 마지막에 나타나는 스타일인 .byline a의 영향을 받아서 red로 표시된다. ※ 외부 스타일시트와 내부 스타일시트에 충돌하는 스타일이 있으면 스타일시트를 HTML 문서의 어디에 놓느냐가 중요하다. 따라서 외부 스타일시트를 연결하는 지점을 일관되게 유지하는 것이 중요한데 즉, 외부 스타일시트를 먼저 연결하고 내부 스타일시트는 거기에 스타일을 한두 개 정도 추가해야만 할 때 사용하는 것이 좋다. 예) <link rel="stylesheet" href="css/style.css" type="text/css">     <style type="text/css"> </style> ※ @import‎는 <style>로 정의하는 내부 스타일시트에서는 맨 앞에, 그리고 외부 스타일시트에서는 어떤 스타일보다도 먼저 등장하는 것이 좋다. 예) <style type="text/css">    @import‎ url("css/style.css";   p { color:red; }</style> 예) @charset "utf-8";@import‎ url("style.css");p { color:red; }   <hr data-ke-style="style3"> computed 계승이나 하향 법칙을 따라 만들어진 해당 요소에 적용된 모든 CSS 속성의 총합이다. 그 아래에서는 해당 요소에 적용된 스타일 규칙들을 살펴볼 수 있다. 가장 구체성이 높은 것부터 가장 구체성이 낮은 것 순으로 표시된다.   <hr data-ke-style="style3"> 특이도를 무시하는 방법 그냥 !important를 속성 끝에 두기만 하면 해당 속성은 특이도 규칙으로부터 보호된다. !important가 붙은 속성들이 충돌하면 특이도가 높은 스타일의 !important 속성이 승리한다. p .email { color : blue !important; }.byline a { color : red; }