CSS 상속
상속👩👦
상속은 CSS가 가진 가장 기본적이고도 중요한 특성이다.
말 그대로 부모요소에 적용된 스타일은 상속되어 자식에게도 적용된다는 의미.
(내얘기 : 알고는 있지만 CSS 작업시 실수를 많이 한 부분이다.
부모요소에 준 속성을 간과하고 자식요소에 준 속성이 "적용안돼!🥶"하며 삽질한 기억이 있다.)
📍예 (body 태그안에 p 태그가 있다고 가정)
body { color : blue; font-size : 10px; }
body태그에 color는 blue, font-size는 14px로 지정하면 자식요소에 해당하는 태그 모두 위 속성이 적용된다.
p { color: black; }
단, 위처럼 부모에게 color는 blue라는 속성이 있더라도 자식요소에 해당 속성을 가지고 있을시 우선 적용된다.
간단한 위 예시처럼 컬러나 shape이 자식요소에게 상속될 경우 금방 발견할 수 있지만, 예를 들어 flex속성 또는 z-index 등 눈에 보이지 않는 배치와 관련된 속성이 자식요소에게 적용되면 원치않은 결과물을 얻을 수 있다.
그러므로 CSS 상속 특성과 관련해 스타일 작성시 주의해야 할 점은
1) 자식요소에 준 속성이 적용이 안될 시 부모요소 속성 먼저 확인
2) 되도록 class를 지정하여 사용
✲ class를 지정하지 않고 selector를 나열하여 지정하게 되면 (예 - header .class li { })
html코드가 길어질때 원치않은 태그까지 속성이 적용될 수 있다.
Author And Source
이 문제에 관하여(CSS 상속), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ryuwisdom0_o/CSS-상속저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)