CSS 우선순위와 상속 관계에 대해 알아보기

CSS 스타일 우선순위와 상속 관계

CSS는 'Cascading Style Sheets'의 줄임말로 Cascading은 단어의 뜻은 계단식이라는 뜻입니다. 

즉, 스타일이 계단식으로 위에서 아래로 적용된다는 말이기도 한대요. 

CSS에서는 HTML 요소에 둘 이상의 스타일이 적용될 때 CSS의 우선순위에 따라 적용될 스타일이 결정됩니다.


CSS 스타일 중요도에 따른 우선순위

CSS 스타일 우선순위를 결정하는 요소 중 중요도에 따라 HTML 요소에 적용되는 스타일이 결정됩니다.  

기본적으로 웹 페이지를 사용하는 사용자가 지정한 스타일이 가장 높은 우선순위를 가지고 있고, 그 다음으로 웹 개발자가 지정한 스타일 그리고 마지막으로 브라우저에서 제공하는 기본 스타일이 가장 낮은 우선순위를 가지게 됩니다.


CSS 적용범위에 따른 우선순위 

CSS에 적용 범위에 따라서 스타일의 우선순위가 결정되기도 하는데요. 

스타일 적용 범위가 작을수록 우선순위가 높아집니다. 

CSS 선택자 앞에 !importnt 라고 붙이게 되면 해당 스타일은 제일 높은 우선순위를 가지게 됩니다.

CSS-적용범위-우선순위
CSS 적용범위에 따른 스타일 우선순위



CSS 스타일 상속 관계

HTML 태그 구조를 보면, 본문인 body 태그를 시작으로 그 하위에 선언된 하위 태그들로 구성되어 있습니다. 

이를 보면 부모와 자식 관계의 구조를 가지게 되는데 CSS 스타일을 적용할 때, 자식 태그에 별다른 스타일을 적용하지 않으면 부모 태그의 스타일이 자식 태그에 상속되어 적용이 됩니다.


스타일 작성 순서에 따라 나중에 작성한 스타일이 먼저 작성한 스타일을 덮어쓰게 되는 특징이 있습니다.