연습장

10. Inheritance & Cascading 스타일의 상속과 적용 우선 순위 본문

CSS3

10. Inheritance & Cascading 스타일의 상속과 적용 우선 순위

js0616 2024. 6. 28. 22:29

 

https://poiemaweb.com/css3-inheritance-cascading

 

CSS3 Inheritance & Cascading | PoiemaWeb

상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다. 하지만

poiemaweb.com

 

 

 

1. 상속(Inheritance)
상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 

상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.

하지만 모든 프로퍼티가 상속되는 것은 아니다. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.

 

상속 가능

visibility, opacity, font, color, line-height, text-align, white-space, 

 

상속 불가능

width, height, margin, padding, border, box-sizing, display, background, vertical-align, text-decoration, position, top, right, bottom, left, z-index, overflow, float

 

+ button처럼 요소에 따라 상속 받지 않는 경우도 존재한다.

 

상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 프로퍼티), inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다.

 

<!DOCTYPE html>
<html>
<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>
</html>

 

 

inherit 키워드를 사용하여 다음과 같이 자식 요소가 상속받게 할 수 있다. 

 

 

2. 캐스캐이딩(Cascading)
요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 

캐스캐이딩(Cascading Order)  : CSS 적용 우선순위

 

 

2.1 중요도
CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.

 

  1. head 요소 내의 style 요소
  2. head 요소 내의 style 요소 내의 @import 문
  3. <link> 로 연결된 CSS 파일
  4. <link> 로 연결된 CSS 파일 내의 @import 문
  5. 브라우저 디폴트 스타일시트

 

2.2 명시도
대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.

 

  1. !important
  2. 인라인 스타일 : html 태그에 바로 css 를 적는 방식
  3. 아이디 선택자 : #id 
  4. 클래스/어트리뷰트/가상 선택자 : .class / 셀렉터[어트리뷰트]  / :hover ? 
  5. 태그 선택자 : p , div  .. 
  6. 전체 선택자 : *
  7. 상위 요소에 의해 상속된 속성 : 

 

2.3 선언순서
선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 (아랫줄에 작성된) 스타일이 우선 적용된다.

'CSS3' 카테고리의 다른 글

12. Shadow그림자  (0) 2024.06.29
11. Vendor Prefix 벤더 프리픽스  (0) 2024.06.29
9. float 요소 정렬  (0) 2024.06.28
8. position 요소의 위치 정의  (0) 2024.06.28
7. 폰트와 텍스트  (0) 2024.06.28
'CSS3' Related Articles more