[IT] CSS Cascading 이란 ? 상속, 우선순위

ㅇCascading  : 폭포같은, 위에서 아래로 흐르는... 뜻

 

ㅇ CSS 개발을 할 때 흔히 겪을 수 있는 실수는 뭐가 있을까 ?

ㅡ 요소에 CSS 를 디자인을 줬지만 적용되지 않을 떄.....!!!

 

ㅇ 이유가 뭘까 ?

1. 상속

ㅡ 부모 요소에 적용되는 스타일은 자식 요소로 상속된다.

ㅡ 일부 속성은 자식에게 상속되지 않는다 ( ex, 배경색, 배경이미지, margin ,padding 등 )

 

2. 우선순위

 ㅡ 선언된 위치 : 브라우저는 HTML/CSS 코드를 위에서 아래로 해석한다

브라우저 기본스타일 < 외부 스타일시트 < 내부스타일시트  < inline 스타일

ㅡ명시도 (Specificity) : 적용범위가 더 구체적일수록 우선적용된다

tag < attribute , class < id 

 

ㅇ 해결방법은 어떤 것들이 있을까 ?

ㅡ HTML 의 부모와 자식관계의 요소들을 다시 하나,하나  뜯어 본다 ㅠㅠ...

 

또는 

ㅡ  상속 제어를 위한 전역속성 값 

의도적으로 상속되어 적용되는 CSS를 끊어 준다

ㅡ initial : CSS를 기본값(브라우저 초기값)으로 지정한다. (상속값이 없을 때)

ul {

  color: initial;

}

ㅡ inherit : 모든 rule을 무시하고 무조건 상속을 받아 부모의 값을 따라가고자 할 때 (상속받는다)

a {

  color: inherit;

}

ㅡ unset : 여러 영향을 받은 CSS없애고 깔끔하게 초기화 하고싶을 때 사용