카테고리 없음

7-11. CSS 선택자 : 상속

김종원 2021. 8. 26. 01:13

7-11. CSS 선택자 : 상속

 

 가. 정의

 

   - 특정 스타일 규칙(속성)이 특정 요소뿐만 아니라 그 자손요소까지 적용되는 것

   - 즉, 예로 <body>요소에 적용된 스타일 규칙은 그 자식요소인 <div>까지 적용됨

   - 단, 모든 속성이 다 상속되는 것은 아님

   - 박스 모델 속성(margin, padding, background, border...)은 상속되지 않음

   - 또한, 상속 규칙에는 상속되는 속성은 구체성이 없음

   - 구체성 값이 없기에, 전체 선택자 구체성 값(0, 0, 0, 0)에도 우선할 수 없음

 

 나. 상속 기본 예시

 

 [CSS]

 1  h1{color: red;}

 

 [HTML]

 1  <h1>서울<em>부산</em></h1>

 

 [출력]

 서울 부산

 

 [설명]

  <h1>의 자식요소는 <em> 이기에, <h1>에 적용된 스타일 규칙을 그대로 상속받아 '서울' 뿐만 아니라,
  '부산'도 빨강색으로 표시

 

 다. 상속 구체성 예시

 

 [CSS]

 1  *{color: red;}
 2  h1 #page{color: blue;}

 

 [HTML]

 1  <h1 id="page">서울<em>부산</em></h1>

 

 [출력]

 서울 부산

 

 [설명]

ㆍ위와 같이 여러 개의 스타일 규칙이 있을 때에는 구체성 값을 확인해야 하는데, 위 CSS 규칙 중 1번은
   전체선택자로 (0, 0, 0, 0) 이고, 2번은 요소선택자 및 id 속성값으로 (0, 1, 0, 1) 임에 따라, 2번의 CSS
   규칙이 더 높기에, <h1>의 '서울'은 2번 스타일 규칙이 적용되어 파랑색으로 표시된다.

ㆍ반면, 상속에서는 구체성이라는 것이 무의미하므로, <em> 요소의 '부산'은 위 2번의 CSS 규칙이 상속
   되지 않고, 1번의 전체선택자의 CSS 규칙이 적용되어 빨강색으로 표시된다.

ㆍ즉, 상속에는 구체성 값이 무의미하기에, 만약 자식요소 또는 자손요소에 대하여 직접적으로 CSS 규칙
   이 있으면, 그 CSS 규칙이 적용된다.