상위에서 적용한 스타일은 하위에도 반영됩니다.
이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다.
하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다.
예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다.
이런 것은 원하는 것이 아니죠.
그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다.
이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다.
아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS 속성을 부여하면서 이 특징을 잘 이해해보면 좋습니다.
*우선순위 결정
선언 방식에 따른 차이
inline > internal = external
동일한 경우
span {
color : red;
}
span {
color : blue;
}
=> blue 적용, 동일할 땐 나중에 것이 적용
body > span{
color : red;
}
span {
color : blue;
}
=> red 적용 , 구체적인 것이 있다면 그것이 먼저 적용된다.
<div id="a" class="b">
text...
</div>
=> red 적용, id > class > element 순으로 적용된다.
id는 금메달, class는 은메달, tag는 동메달로 이해하는게 편합니다.
참고 사이트 : http://www.edwith.org/
※
본 게시물은 개인적인 용도로 작성된 게시물입니다. 이후 포트폴리오로 사용될 정리 자료이니 불펌과 무단도용은 하지 말아주시고 개인 공부 목적으로만 이용해주시기 바랍니다.
※
