[CSS] 2. 상속(inherit)

 상속 "부모요소의 스타일이 자식요소에게도 전달되어 각각 적용 되는 것"

---

상속은 간단하게 말해서 부모요소의 적용 스타일이

자식요소에게도 전달되어 각각 적용되는 것이다.

---

1) 상속되는 프로퍼티

스타일을 작성하여 적용하다 보면 직접 부여하지 않은 스타일이 적용될 때가 있다. 이는 모두 상속에 의해 발생한다.  css의 프로퍼티 중에는 상위 요소(부모나 조상)에서 적용되었으나, 자식 요소까지 적용되는 즉, 상속되는 프로퍼티들도 있다. 대표적으로 font와 관련한 프로퍼티나 색상 및 정렬 유형의 프로퍼티들이 있다.

 

나는부모, 나는 자식 모두 폰트크기가 20px로 설정되었다.

2) 상속되지 않는 프로퍼티

반대로 width, height, margin, display, border 처럼 상속이 안 되는 프로퍼티도 존재한다. 만일 상속이 되었다면 border의 경우 나는부모와 나는자식 각각 테두리가 생성되어야 하지만, 모두 하나의 테두리 안에 들어가 있는 것을 아래 예시에서 볼 수 있다.

 

아래 이미지에서 파란색 부분이 <div> 태그 부분인데, 어떻게 보면 부모요소와 자식요소를 같은 요소 즉, 하나의 요소로 보고 적용하는 것이다.

 

3) 상속되는 프로퍼티이지만, 부분적으로 상속되지 않는 프로퍼티

대표적으로 <botton> 요소가 해당한다. 앞서 상속되는 프로퍼티는 스타일 적용과 동시에 부모와 자식 요소가 각각 스타일 적용이 되지만 버튼요소의 경우 부모요소만 적용이 되고 자식요소는 적용이 되지 않는다. 다만, inherit 속성을 활용하면 버튼요소에도 상속이 된다.                           

                                           

                                                                                [참고로 inhert 뜻이 상속이다.]

 

 

 

---

[CSS] 3. 선택자