CSS의 기초_세번째(CSS 적용 우선순위)

안녕하세요!

디벨로드 입니다~


스타일의 적용 우선순위에 대해서 알아보겠습니다.

스타일의 우선순위는

단계적으로 우선순위가 정해집니다.


예를 들면

<style>
  p { color:red; }
  p { color:blue; }
</style>
<p>스타일은 단계적으로 적용됩니다.</p>

이렇게 하면,

p태그의 글자는 blue 색상으로 적용이 됩니다.

스타일은 단계적으로 적용됩니다.

나중에 쓴 스타일이 적용되는거죠!

하지만 예외가 있습니다.

!important

이걸 써주게 되면 상황이 바뀝니다. !important 를 써준 스타일이 우선 적용 됩니다.

<style>
  p { color:red !important; }
  p { color:blue; }
</style>
<p>스타일은 단계적으로 적용됩니다.</p>

이렇게 작성해주면,

p태그의 글자는 red가 우선순위로 적용이 됩니다.

스타일은 단계적으로 적용됩니다.

그리고 !important 보다도 우선순위로 적용할수 있는방법이 있습니다.

그건..바로

<style>
  p { color:red !important; }
  p { color:blue; }
</style>
<p style="color:green;">스타일은 단계적으로 적용됩니다.</p>

태그 안에 직접 넣어주는 것이지요!!!

하지만 저는 태그안에 직접 스타일을 넣는것은 권하지 않습니다.

물론 코딩할때 스타일을 어쩔수 없이 강제로 변경하기 위해 직접 넣어서 사용하는 경우가 있지만

그런 경우가 아니라면 사용 안하시는게 좋아요^^