[CSS] 상속 (Inheritance) / 캐스캐이딩 (Cascading Order)
by mini_min[CSS] 상속 (Inheritance) / 캐스캐이딩 (Cascading Order)
✔️ 상속 (Inheritance)
: 상속이란, 부모 요소에 적용된 프로퍼티를 자손이 물려 받는 것을 의미한다.
: 프로퍼티에는 상속이 되는 것과 안되는 것이 있다.
✨ 상속되는 요소 : visibility, opacity, font, color, line-height, text-align, white-space 등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.text-red {
color: red;
border: 1px solid #bcbcbc;
padding: 10%;
}
</style>
</head>
<body>
<h3> 상속(Inheritance) </h3>
<div class="text-red">
<h1>상속 예</h1>
<p>문단 <span>span</span></p>
<button>버튼 1</button>
<button style="color: inherit;">버튼 2</button> <!-- 인헤릿 키워드로 부모속성 상속 -->
</div>
<hr>
<div>
<p> color는 하위 요소에 상속되는 속성이지만 button 태그 처럼 요소에 따라 상속 받지 않는 경우도 존재 </p>
<p>
<b>상속되는 속성</b>
<br>visibility, opacity, font, color, line-height, text-align, white-space 등
</p>
<hr>
<p>
<b>상속되는 않는 속성</b>
<br>width, height, margin, padding, border, box-sizing, display, background, vertical-align, text-decoration, position, top/right/bottom/left, z-index, overflow, float 등
</p>
</div>
</body>
</html>
💡 style="color: inherit;
인헤릿 키워드로 부모속성 상속!
✔️ 캐스캐이딩 (Cascading Order)
: 요소는 하나 이상의 CSS 영향을 받을 수 있고, 충돌을 피하기 위해 CSS 적용 우선순위를 정할 수 있는데 그게 바로 캐스캐이딩 입니다.
📓 캐스캐이딩 3가지 규칙
- 중요도 : 어디에 선언되었느냐에 따라 우선순위가 달라진다.
- 명시도 : 대상을 명확하게 특정할수록 명시도가 높아지고 우선순위가 높아진다.
- 선언순서 : 선언된 순서에 따라 우선 순위가 적용된다.
🔒 중요도
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="style3.css">
<style type="text/css">
div{
background-color: navy;
}
</style>
</head>
<body>
<h3> Cascading Order </h3>
<div>
CSS가 어디에 선언 되었는지에 따라서 우선순위가 달라진다.
</div>
<p>
1) embedded style sheet : style 요소<br>
2) embedded style sheet 내의 @import 문<br>
3) linked style sheet : link 태그로 연결된 CSS 파일<br>
4) linked style sheet 내의 @import 문<br>
5) 브라우저 디폴트 스타일시트<br>
</p>
</body>
</html>💡 1) embedded style sheet : style 요소<br>
2) embedded style sheet 내의 @import 문<br>
3) linked style sheet : link 태그로 연결된 CSS 파일<br>
4) linked style sheet 내의 @import 문<br>
5) 브라우저 디폴트 스타일시트<br>
🔒 명시도
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {color: red !important;}
#p-blue {color: blue;}
div {color: orange; }
div.box { color: black; } /* div 이면서 클래스 box인 요소*/
.box {color: green;}
.box2 {color: gold;}
</style>
</head>
<body>
<h3> Cascading Order </h3>
<p id="p-blue">red-명시도 예</p>
<div >div-명시도 orange 예</div>
<pre class="box">green-명시도 예</pre>
<div class="box">black-명시도 예</div>
<div class="box2">gold-명시도 예</div>
</body>
</html>
🔒 선언순서
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p { color: blue; }
p { color: red; }
/*여기 순서가 중요*/
.red { color: red; }
.blue{ color: blue; }
</style>
</head>
<body>
<h3> Cascading Order </h3>
<p>선언 순서-RED</p>
<p class="blue red">선언 순서-BLUE</p>
</body>
</html>💡 나중에 선언되는 것이 적용된다!
'HTML' 카테고리의 다른 글
| [CSS] 결합자 (Combinator) : 인접 형제 / 일반 형제 / 자식 / 후손 (0) | 2022.09.14 |
|---|---|
| [CSS] 선택자(Selector) ⭐⭐ / Attribute Selector / class Selector (0) | 2022.09.14 |
| [CSS] CSS 프로퍼티 값 (단위) (0) | 2022.09.13 |
| [CSS] CSS 기초 문법 (import / link) (0) | 2022.09.13 |
| [HTML] <img> 태그 / <audio> 태그 (0) | 2022.09.13 |
블로그의 정보
개발자 미니민의 개발로그
mini_min