1. 상속이란?
: 태그를 디자인할 때 어떤 효과를 주게되면 해당 태그의 하위 태그가 그 효과를 이어 받는 성질
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
</style>
</head>
<body>
<h1>수업내용</h1>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</body>
</html>
1번 코드에서 텍스트의 색상을 변경 시키려면 어떻게 해야할까?
2번 코드처럼 li와 h1태그 모두에게 색상을 부여할 수 있다.
<style>
li{
color: red;
}
h1{
color: red;
}
</style>
다른 방법도 있다. 1번 코드의 최 상위 부모 태그에게 색상을 부여하면 하위 모든 태그들의 색상이 변경된다.
최 상위 부모 태그는 무엇일까? <html></html>이다. 따라서 3번 코드로 색상을 부여하면 모든 태그의 색상이 변경된다.
<style>
html{
color:red;
}
</style>
2. 상속 되는 속성 vs 상속 되지 않는 속성
- 상속 되는 속성
- color
- font
- line-height
- text-align
- white-space
- visibility
- opacity
- 상속 되지 않는 속성
- width
- height
- margin
- padding
- border
- box-sizing
- display
- background
- vertical-align
- text-decoration
- position
- top/right/bottom/left
- z-index
- overflow
- float
'Web > CSS' 카테고리의 다른 글
| [CSS] Emment 단축키 (0) | 2023.05.08 |
|---|---|
| [CSS] 케스케이딩 (0) | 2023.05.07 |
| [CSS] 웹 폰트 (0) | 2023.05.06 |
| [CSS] font (0) | 2023.05.06 |
| [CSS] text-align (0) | 2023.05.06 |
