3.2 상속과 우선순위

css 상속을 알아보자 

상속  : 상위에 적용된 스타일을 하위에도 쓴다. 

 

엘리먼트마다 있는 다양한 속성을 매번 적용해줄수 없기 때문에 부모에 설정해두고 자식도 똑같다고 상속받을 수가 있다. 

 

<ul>

   <li> 

      <div>

            <p> ㄴ내용 </p>

 

이러한 내용이 있을 때, 

 

상위의 style 에서 속성을 정의할 때 

 

<style> 

    body > div {

          color : green; 

    } 

 

이런식으로 정의하면, body 안의 div 의 속성은 폰트 색깔 녹색으로 정의가 가능하다. 

 

하지만 이 모든것은 다 적용되는 건 아니고, 

box-model이라고 하는 width, height, margin, padding, border와 같은 배치 속성들은 하위 엘리먼트에 상속되지 않아 효율적으로 적용할 수 있다. 

 

 

CSS는 여러가지 스타일 정보를 기반으로 최종적으로 '경쟁'에 의해 적절한 스타일이 반영된다. 

 

어떤걸 기준으로 스타일을 최종 반영하느냐? < 브라우저가 하는 일. 

미리 브라우저별 규칙을 확인해서 개발자ㄷ르이 속성을 지정할 수 있다. cascading이라고 합니다. 

 

이런건 선언 방식에 따른 차이가 있는데 (이전에 배운 inline , internal, external) 

 

선언 방식에서 같은 선택자(selector)라면 나중에 선언한 것(최종선언)이 반영됩니다. 

또한 선택자의 표현이 구체적인 것이 있으면 먼저 적용된다. (body > span과 span이 있을때는 body > span이 우선적용) 

ID > CLASS > ELEMENT 순으로 반영된다. 

(#id  > .class > div ) 

 

이번에는 codepen.io 라는 사이트를 이용해서 테스트해보세요.