CSS 상속

상속👩‍👦

상속은 CSS가 가진 가장 기본적이고도 중요한 특성이다.
말 그대로 부모요소에 적용된 스타일은 상속되어 자식에게도 적용된다는 의미.

(내얘기 : 알고는 있지만 CSS 작업시 실수를 많이 한 부분이다.
부모요소에 준 속성을 간과하고 자식요소에 준 속성이 "적용안돼!🥶"하며 삽질한 기억이 있다.)

📍예 (body 태그안에 p 태그가 있다고 가정)

body {
  color : blue;
  font-size : 10px;
}

body태그에 color는 blue, font-size는 14px로 지정하면 자식요소에 해당하는 태그 모두 위 속성이 적용된다.

p {
  color: black;
}

단, 위처럼 부모에게 color는 blue라는 속성이 있더라도 자식요소에 해당 속성을 가지고 있을시 우선 적용된다.

간단한 위 예시처럼 컬러나 shape이 자식요소에게 상속될 경우 금방 발견할 수 있지만, 예를 들어 flex속성 또는 z-index 등 눈에 보이지 않는 배치와 관련된 속성이 자식요소에게 적용되면 원치않은 결과물을 얻을 수 있다.

그러므로 CSS 상속 특성과 관련해 스타일 작성시 주의해야 할 점은

1) 자식요소에 준 속성이 적용이 안될 시 부모요소 속성 먼저 확인

2) 되도록 class를 지정하여 사용

✲ class를 지정하지 않고 selector를 나열하여 지정하게 되면 (예 - header .class li { })
html코드가 길어질때 원치않은 태그까지 속성이 적용될 수 있다.