CSS - 속성의 상속, 부모 자식 관계

속성의 상속 & 부모 자식 관계

특정 태그가 다른 태그를 포함하는 관계. 예를 들어,

<header>
    <h1>Header h1</h1>
    <p>Header p</p>
</header>

<header> 태그 안에 <h1>과 <p>가 있으니까, <header>와 <h1><p>는 부모 자식 관계. <h1>과 <p>는 동급이니까 형제 관계.

// style.css 문서
header { color: red; }
h1 { color: blue; }
p { color: green; }

그래서 <header>에다가 color값을 red로 준거는 부모에다가 red 유전자를 집어넣은 거랑 똑같음. 그 유전자는 부전자전이라고 자식들이 상속 받기 때문에 자식들의 폰트 컬러도 red로 표시가 됨. 근데, 위에서는 그 자식들을 하나하나 직접 선택을 해서 다시 컬러 유전자를 입혔어. 그래서 각각 blue와 green이 되는 것임.

 

<header>
  <h1>Header h1</h1>
  <p>Header p</p>
</header>
<footer>
  <h1>Footer h1</h1>
  <p>Footer p</p>
</footer>

 

위에처럼 <header>와 <footer>에서 <h1>태그와 <p>태그를 동일하게 사용했는데, 나는 <header>태그 안에 있는 <h1>과 <p>태그에만 색상이 지정됐음 좋겠다고 한다면, CSS에서는 그 <h1>과 <p>태그가 누구집 자식인지 앞에다가 명시를 해주면 됨. 부모 자식 { 속성: 속성값; } 이렇게.

// style.css 문서
header { color: red; }
header h1 { color: blue; }
header p { color: green; }