CSS 스타일 적용 우선순위

CSS 스타일 적용 우선순위

1. 인라인 스타일(Inline style) 

2. 내부 적용 스타일(Internal style)

3. 외부 적용 스타일(External style)

 

CSS 우선순위 실험

Html 문서 내에 내부 적용 스타일, 외부 적용 스타일, 인라인 스타일을 동시에 사용하였다.

브라우저를 열어보니 인라인 스타일이 적용되었다. 

실험 결과로 인라인 스타일 > 내부 적용 스타일 > 외부 적용 스타일임을 알게 되었다. 

---

적용 우선순위

 

  ❶ 속성 값 뒤에 !important를 붙인 속성

  ❷ HTML에서 style을 직접 지정한 속성 (인라인 스타일)

  ❸ #id로 지정한 속성

  ❹ 클래스, :추상클래스로 지정한 속성

  ❺ 태그이름으로 지정한 속성 

  ❻ 상위 객체에 의해 상속된 속성 

 

---

❔!important 

css 스타일을 지정할 때 우선 순위를 무시해야 할 때가 있다. 이럴 경우 !important 키워드를 사용하면 일반적인 property: value; 보다 해당 선언이 중요하다고 표시한다.

property: value !important;

 

💡실험

!important를 쓰니 우선 순위를 무시하고 내부 적용 스타일로 반영이 된 것을 확인해 볼 수 있었다.