반응형
상속되는 CSS 속성
모두 글자/문자 관련 속성들(모든 글자/문자 속성은 아님 주의)
- font-style : 글자 기울기
- font-weight: 글자 두께
- font-size : 글자 크기
- line-height : 줄 높이
- font-family : 폰트(서체)
- color : 글자 색상
- text-align : 정렬
강제 상속 예제
상속되지 않는 속성을 강제로 상속받도록 설정
HTML
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 크로스브라우저 이용시 문제가 될수 있는 CSS 스타일을 초기화 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/box.css">
<script defer src="./main.js"></script>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
CSS
.parent{
width: 300px;
height: 200px;
background-color: red;
}
.child {
width: 100px;
height: inherit; /*부모요소로부터 강제 상속*/
background-color:inherit;
position: fixed; /*화면에 view port를 기준으로 배치*/
top: 100px;
right: 10px;
}
반응형
