css 상속

상속

CSS 속성도 상속이 된다.

단! 되는 속성이 있고 안 되는 속성이 있다.

 

box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않는다.

다른 속성 (ex. fontsize)등은 하위 모델로도 상속이 된다.

 

cascading

CSS에서는 같은 노드를 표현하는 방법이 여러개가 있다.

같은 노드를 가리키지만 적용하는 스타일은 다를 수 있다.

그럼 어떤 스타일로 적용하느냐?

이것을 결정하는것을 'cascading' 이라고 한다.

 

1. 선언방식 : inline > internal = external

: inline으로 설정한 값이 우선이다

 

2. 시간 순서 : 동일하면 나중에 적용한것이 우선

 

3. 더 구체적인것이 우선

아래 사진에서는 body > span으로 더 구체적임

같은 의미로 id > class > element 순으로 구체적임

4. 어떻게 적용이 되는가 기타 규칙들

css specificity를 참고

 

 

 

em

 

1em,2em이렇게 쓰던 em의 기준은 부모노드에 따라 달라질 수 있다.

자신의 기본 폰트 크기가 1em, 그 두배가 2em 인데

만약 부모가 폰트 크기를 20으로 맞춰놨다? 그러면 2em은 40px이 되는것!

em은 상대적인 폰트의 크기다.

 

 

 

html 쉽게 쓰기

div>li*4 치고 tab을 누르면 알아서 폼을 만들어준다.

<div>
	<li> </li>
    <li> </li>
    <li> </li>
    <li> </li>
</div>

 

비슷하게, img를 치고 tab을 누르면 알아서 <img src="" alt=""> 이 나온다!

 

 

 

참고

 

www.edwith.org/boostcourse-web/lecture/16674/

[LECTURE] 2) 상속과 우선순위 결정 : edwith