fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.
상속되는 CSS 속성들로는 모두 글자/문자 관련 속성들입니다. 그렇다고 모든 글자와 문자 속성은 아닙니다!!
대표적으로 상속되는 속성들로는1. font-style : 글자 기울기2. font-weight : 글자 두께3. font-size : 글자 크기4. line-height : 줄 높이5. font-family : 폰트(서체)6. color : 글자 색상7. text-align : 정렬등이 있습니다.
하지만 상속이 안되는 CSS 속성들을 강제로도 상속 시킬 수 있습니다.
fast campus의 강의를 보며 예제를 따라해보았습니다.
HTML
<html>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
CSS
.parent {
width: 300px; height: 400px; background-color: red;
}
.child {
width: 100px; height: 200px; background-color: orange;
}
위와 같이 코드를 작성해보았습니다.
따라서 나오는 화면은
이런 모습이 나타나게 되죠.
하지만 HTML 코드를 보자면 parent 클래스 내부에 child 라는 클래스가 존재하므로 child 클래스가 부모의 상속을 받도록 하면 좋겠지요. 물론 child 클래스의 스타일을 부모와 같게 변경을 해줘도 됩니다. 하지만 강제 상속시킴으로서 값을 변경해야하는 수고도 덜 수 있습니다. 바로 inherit이라는 내용을 집어 넣는 것인데요.
위의 CSS 스타일의 child 클래스에 height 속성 값을 inherit으로 바꿔주면 강제 상속을 시킬 수 있습니다.
변경 후 나타나는 모습은
이런 모습으로 부모의 height 값을 상속 받아서 같은 높이를 가지게 됩니다.
'Frontend' 카테고리의 다른 글
| 12-1 CSS 속성 - 박스모델 (0) | 2021.07.26 |
|---|---|
| 11. CSS 선택자의 우선순위 (0) | 2021.07.25 |
| 9. CSS 문법 정리 (0) | 2021.07.25 |
| 8-2 HTML 문법 정리하기 - 핵심요소 (0) | 2021.07.25 |
| 8-1 HTML 문법 정리하기 - 태그 (0) | 2021.07.24 |
