CSS 이론 채워 넣기 - 5. CSS 속성의 상속과 적용 우선 순위

상속

상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려 받는 것을 의미한다. 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 한다.

※ 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있다.

상속되지 않는 경우(상속받지 않는 요소 또는 상속되지 않는 프로퍼티), inherit 키워드를 사용하여 명시적으로 상속받게 할 수 있다.

property	Inherit
width/height	no
margin	no
padding	no
border	no
box-sizing	no
display	no
visibility	yes
opacity	yes
background	no
font	yes
color	yes
line-height	yes
text-align	yes
vertical-align	no
text-decoration	no
white-space	yes
position	no
top/right/bottom/left	no
z-index	no
overflow	no
float	no

캐스캐이딩(Cascading)

요소는 하나 이상의 CSS 선언에 영향을 받을 수 있다. 이때 충돌을 피하기 위해 CSS 적용 우선순위가 필요한데 이를 캐스캐이딩(Cascading Order) 이라고 한다.

캐스캐이딩에는 다음과 같이 세가지 규칙이 있다.

• 중요도: CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
• 명시도: 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
• 선언순서: 선언된 순서에 따라 우선 순위가 적용된다. 즉, 나중에 선언된 스타일이 우선 적용된다.

벤더 프리픽스(Vendor Prefix)

CSS3 표준으로 확정되기 이전 또는 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스(Vendor Prefix)를 사용하여야 한다.

거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다. 사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에도 영향을 주기 때문에 Prefix Free 라이브러리 를 사용하는 것은 매우 유용한 방법이다.

Browser | Vendor Prefix
|-|-|
IE or Edge | -ms-
Chrome | -webkit-
Firefox | -moz-
Safari | -webkit-
Opera | -o-
iOS Safari | -webkit-
Android Browser | -webkit-
Chrome for Android | -webkit-

참고

https://poiemaweb.com/css3-inheritance-cascading
https://poiemaweb.com/css3-vendor-prefix