[CSS] - 상속(Inheritance), 그룹(Grouping)

김진수·2020년 12월 14일
0

HTML/CSS

목록 보기
8/12
post-thumbnail
post-custom-banner

상속(Inheritance)

말 그대로 스타일이 상속되어 자식에게도 샅은 스타일이 적용된다는 의미입니다.

body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일 했습니다. 글ㄴ데 p태그가 body태그 자식태그 일때 아무 스타일도 갖고 있지 않는데 부모인 body태그에 영향을 받아서 빨간색과 14px로 변경되었습니다.
또한 부모에게 상속 할 속성이 있더라도 본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용됩니다.

javascript 클래스의 부모(blockquote)는 color: black;를,

하나 더 위의 부모(body)는 color: red;속성을 가졌지만,

본인도 color 속성을 갖고 있으므로 파란색입니다.

그룹(Grouping)

이 태그에, 저 태그, 이 클래스에.. 같은 스타일을 적용하고 싶습니다. 그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는 다음과 같이 한꺼번에 스타일을 지정할 수 있습니다.

profile
백엔드 개발자
post-custom-banner

0개의 댓글