CSS 상속과 우선순위 결정

CSS상속

상위에서 적용한 스타일은 하위에도 반영된다.

이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.

예시를 통해서 실제로 반영이 잘 되는지 확인해보자.

먼저 CSS를 설정할 때 범위를 구체화 해서 색깔을 넣어주었고

기대하는 것과 같이 지정해준 범위만 빨간색이 된 것을 볼 수 있다.

여기서 CSS가 적용되는 범위를 가장 큰 범위로 바꾸어주면 다음과 같은 결과가 나온다.

 div아래 있는 모든 영역에 CSS가 적용되는 것을 확인할 수 있다.

색깔 말고 다른 속성도 설정해주고 테스트를 해보면 다음과 같은 결과가 나온다.

이 결과를 보면 color, font-size는 하위 엘리먼트에 모두 적용이 되지만

배치와 관련된 속성들인 border, padding과 같은 속성은 상속이 되지 않음을 확인할 수 있다.

CSS 우선순위 결정

스타일을 지정할 때 다른 셀렉터를 썼지면 결국 같은 노드를 가르키는 경우가 생긴다.

이런 경우 CSS는 여러가지 스타일 정보를 기반으로 최종적으로 경쟁에 의해서 적절한 스타일이 

반영된다.

일단 선언 방식에 따라 우선순위가 달라질 수 있는데 이 때 우선순위는

inline > internal > external 순으로 결정된다.

그리고 만약 다음과 같이 동일하다면

나중에 있는 것이 적용된다.

다음과 같은 경우에는 조금더 구체적인 것으로 CSS가 적용된다.

이렇게 class에 대한 설정과 id에 대한 설정이 겹치는 경우도 있는데 

이 때는 id에 대한 설정을 더 우선순위로 반영한다.

출처 : edwith

https://www.edwith.org/boostcourse-web/lecture/16674/