10.1 Inheritance & Cascading
상속
상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미
로퍼티 중에는 상속이 되는 것과 되지 않는 것 존재
| property | Inherit |
|---|---|
| width/height | no |
| margin | no |
| padding | no |
| border | no |
| box-sizing | no |
| display | no |
| visibility | yes |
| opacity | yes |
| background | no |
| font | yes |
| color | yes |
| line-height | yes |
| text-align | yes |
| vertical-align | no |
| text-decoration | no |
| white-space | yes |
| position | no |
| top/right/bottom/left | no |
| z-index | no |
| overflow | no |
| float | no |
- color는 상속되는 프로퍼티로서 자식 요소는 물론 자손 요소까지 적용된다. 하지만 button처럼 요소에 따라 상속 받지 않는 경우도 존재
- 상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 프로퍼티),
inherit키워드를 사용하여 명시적으로 상속받게 할 수 있다.
inherit 사용 x -> button에 상속되지않음
<head>
<meta charset="utf-8">
<style>
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10px;
}
</style>
</head>
<body>
<div class="text-red">
<h1>Heading</h1>
<p>Paragraph<strong>strong</strong></p>
<button>Button</button>
</div>
</body>Heading
Paragraphstrong
Button<head>
<meta charset="utf-8">
<style>
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10px;
}
.text-red button {
color: inherit;
}
.text-red p {
border: inherit;
padding: inherit;
}
</style>
</head>
<body>
<div class="text-red">
<h1>Heading</h1>
<p>Paragraph<strong>strong</strong></p>
<button>Button</button>
</div>
</body>Heading
Paragraphstrong
Button캐스캐이딩(Cascading)
요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다.
이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order)이라고 한다.
- 캐스케이딩 3가지규칙
- 중요도
CSS가 어디에 선언 되었는지에 따라서 우선순위가 다름 - 명시도
대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높음 - 선언순서
선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용
- 중요도
캐스캐이딩(Cascading)- 중요도
- 우선순위1.head 요소 내의 style 요소
- 우선순위2.head 요소 내의 style 요소 내의 @import 문
- 우선순위3.
<link>로 연결된 CSS 파일 - 우선순위4.
<link>로 연결된 CSS 파일 내의 @import 문 - 우선순위5. 브라우저 디폴트 스타일시트
캐스캐이딩(Cascading)- 명시도
- 우선순위1. !important
- 우선순위2. 인라인 스타일
- 우선순위3. 아이디 선택자
- 우선순위4. 클래스/어트리뷰트/가상 선택자
- 우선순위5. 태그 선택자
- 우선순위6. 전체 선택자
- 우선순위7. 상위 요소에 의해 상속된 속성
캐스캐이딩(Cascading)- 선언순서
선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.
정선용