css 우선순위 정리

css 구성: span-선택자(selector), color-속성(property), red-값(value)

span {
	color : red;
   }

 

css cascading 성질 : 각가그이 여러 가지 설정이 되어 있을 때 어떤 것이 우선해서 적용되느냐

(css 자체가 cascading style sheet 이라는 뜻!)

 

inline > internal >= external(일반적)

https://www.hostinger.com/tutorials/difference-between-inline-external-and-internal-css

Difference Between the 3 Types of CSS Styles: Inline, External and Internal

일반적인 css위치는 css파일(external)에 두고 그 아래 style태그를 사용해서 internal방식으로 표현

(근데 internal을 많이 쓰면 구조와 스타일이 섞이게 되서 유지보수가 어려움..)

 

internal과 external은 같은 우선순위인데

나중에 선언된 속성이 반영될 수도 있지만 최종적으로 여러가지 스타일정보를 기반으로

우선순위 경쟁에 따라 반영이 됨 

 

우선순위 경쟁

1) 구체적수록 우선

2) id(#a) > class(.b) >element(div)

https://developer.mozilla.org/ko/docs/Web/CSS/Specificity

명시도 - CSS: Cascading Style Sheets | MDN

 

 

 

 

 

 

테스트 사이트

https://jsbin.com/?html,output 

JS Bin

 

https://codepen.io/

CodePen