css cascading 안되는 경우

 

정규직 전환이 되기 전, 인턴초반에 문제가 생길때마다 팀장님한테 많이 여쭤보았었다. (지금은 이직하신..)

 

그때 팀장님께서 알려주신 것 중에 cascading이 있다.

 

당연하다고 생각했지만 명확하게 알지 못하면 관련해서 문제가 생겼을때 원인 파악이 어려울수도 있는 내용이었다.

 

위와 같이 wrapper에서 color를 지정하면 button에서 당연히 color가 캐스캐이딩 될 것이라 생각했다.

 

그런데 그렇지 않았다!

 

처음에는 다른 엘리먼트에 의해 막힌줄 알고 개발자도구를 살펴보았다.

하지만 아무 이유 없이 color:white 가 취소된 상태였다.

 

혹시 몰라 button태그를 div태그로 바꾸니 cascading이 잘 되었다.

button태그를 div로 바꾸었을때는 color 속성이 캐스캐이딩 된다.

이번 상황을 통해 전혀 몰랐던 것을 알게 되었다.

 

모든 속성을 부모 엘리먼트로부터 상속 받을 수 있는 것이 아니라는 것이다!

 

떠올려보니 당연하게도 display속성은 상속받지 않고 각 엘리먼트에서 매번 새롭게 지정해주었었다.

 

어떤 속성이 상속되고 상속되지 않는지는 이 페이지에 잘 나와 있다.

 

아래 사진은 나의 경우와 일치하는 상황이다.

color는 상속되는 프로퍼티이지만, button엘리먼트는 상속받지 않는다.

이때 color 속성을 부모요소로부터 상속받고 싶다면, inherit을 이용하면 된다.

color:inherit

color 속성에 inherit을 넣어주니 부모요소의 color : white가 잘 캐스캐이딩 되어 화면에 나타난다.

 

 

더불어 <a /> 와 <button />은 디폴트로 cascading이 되지 않는다고 한다.
(참고

---

참고자료

 

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

CSS3 Inheritance & Cascading | PoiemaWeb

 

https://jigeumblog.tistory.com/35

HTML/CSS] CSS에도 상속이 있나요?