Css 속성 우선 순위 정리, 간단히 알아보자

이전 포스팅에서 스타일을 적용하는데 가장 중요한 개념인 선택자에 대해서 알아보았는데요. 여기서 한가지 궁금증이 생기실 것입니다. 전체 선택자로 글씨 색깔을 파란색으로 지정하고 p 태그 선택자로 노란색을 지정하면 글씨는 어떤 색상이 적용될까요? 선택자로 스타일을 작성할 때 선택 범주로 겹치는 경우가 많습니다. 이번 포스팅에서는 스타일이 적용되는 css 우선 순위를 알아보겠습니다.

 

 

 

 

 

 

 

Css는 선택자에 따라 우선순위가 존재하며 이에 따라 해당 태그에 우선적으로 스타일이 적용됩니다. 스타일 우선 순위란 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙을 말합니다.

 

  1순위 : 사용자 스타일 시트

 

 

사용자 스타일 시트는 저시력자 같이 특별한 환경이 필요한 사용자에 맞게 구성한 스타일 시트를 말합니다. 해당 스타일 시트는 보통 운영체제 혹은 시스템을 통해 미리 작성된 것으로 개발자가 제어하지 못하는 부분입니다. 개발할 때에 사용자 스타일 시트가 있는 것을 인지하고 개발하시면 됩니다.

 

 

 

 

 

  2순위 : 중요 스타일

 

p {color:red !important;}

 

개발자는 사이트를 최초 개발할 때 시간이 지나도 변경할 수 없게 스타일을 지정할 수 있습니다. 이를 중요 스타일이라고 부르는데요. 다른 스타일보다 우선적으로 적용되어야 할 스타일 작성 부분 뒤에 "!important'를 붙여줍니다. !important가 붙여 있는 구문은 다른 스타일보다 우선적으로 적용됩니다.

 

 

 

 

  3순위 일반 스타일

 

현재 우리가 작성하고 있는 스타일 시트입니다. 일반적으로 적용되는 스타일로 적용 범위에 따라 우선 순위가 적용됩니다. 좁을 수록 가장 우선적으로 적용되며 넓을수록 우선순위에 밀려납니다. 일반 스타일 시트에서 우선순위는 다음과 같습니다.

 

(1) 인라인 스타일

(2) id 스타일

(3) 클래스 스타일

(4) 태그 스타일

 

선택 범위가 좁을수록 우선 순위가 높고 넓을수록 낮은 것을 알 수 있습니다.

 

 

 

 

  우선 순위가 동일한 경우

 

위의 우선순위에 따라 대부분 결정되는데요. 하지만 우선순위가 동일한 스타일 시트가 두개 있을 경우 어떻게 될까요? 소스를 작성하는데 작성 순서가 다른 코드를 볼 때가 있습니다. 이럴 경우 나중에 작성한 스타일이 우선적으로 적용됩니다.

 

p {color:red;}
p {color:blue;}

 

 

---

마무리

 

지금까지 css 우선 순위에 대해서 알아보았는데요. 무엇이 우선적으로 적용되는지 정확히 숙지해야만이 웹 디자인을 원하는대로 계획하고 작성할 수 있습니다. 꼭 숙지하시고 넘어가시기 바랍니다.

 

포스팅 읽어주셔서 감사합니다.