크롬에서 css를 수정하다 보면 자동완성으로 inherit, initial이 자주 보입니다.
처음엔 몰랐지만 키보드 화살표로 돌려가며 써보니 가끔 유용할 때가 있어서 한번 알아 봤습니다.
1. inherit
inherit은 부모 객체의 값을 가져오는 것입니다.
예시)
https://www.w3schools.com/csSref/tryit.asp?filename=trycss_inherit
Tryit Editor v3.6
span { color: blue; border: 1px solid black; } .extra span { color: inherit; } Here is a span element which is blue, as span elements are set to be. Here is a span element which is green, because it inherits from its parent. Here is a span element which is
www.w3schools.com
<!DOCTYPE html>
<html>
<head>
<style>
span {
color: blue;
border: 1px solid black;
}
.extra span {
color: inherit;
}
</style>
</head>
<body>
<div>
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
<div class="extra" style="color:green">
Here is <span>a span element</span> which is green, because it inherits from its parent.
</div>
<div style="color:red">
Here is <span>a span element</span> which is blue, as span elements are set to be.
</div>
</body>
</html>위와 같은 코드의 경우 span의 color가 blue이기 때문에 "a span element"는 항상 파란색으로 나와야 합니다.
그런데 extra class 안의 span은 inherit을 받았으니, 부모 객체의 속성을 가져와서 부모와 같은 색이 됩니다.
어떤 색을 적용하더라도 부모의 색과 같게 됩니다.
2. initial
이름에서 알 수 있듯이 초기화하는 것 같습니다.
예시
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_initial
Tryit Editor v3.6
div { color: red; border: 1px solid blue; } h1 { color: initial; } Initial The header above and this paragraph is inside a DIV element, The DIV element has the color property set to "red". The header element has its color property set to "initial", which i
www.w3schools.com
<!DOCTYPE html>
<html>
<head>
<style>
div {
color: red;
border: 1px solid blue;
}
h1 {
color: initial;
}
</style>
</head>
<body>
<div>
<h1>Initial</h1>
<p>The header above and this paragraph is inside a DIV element, The DIV element has the color property set to "red". The header element has its color property set to "initial", which in this case is "black".</p>
</div>
<p><b>Note:</b> The "initial" keyword is not supported in Internet Explorer 11 and earlier versions, or in Opera 15 and earlier versions.</p>
</body>
</html>color의 경우 black이 초기화값이니 black으로 나옵니다.
div 안에 있어도 h1은 검은색으로 나옵니다.
그런데 만약 div 정도가 아니라 제일 상위 값이 바뀐다면 초기값도 바뀔까 싶어 해보니,
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
}
div {
color: red;
border: 1px solid blue;
}
h1 {
color: initial;
}
</style>
</head>
<body>
<div>
<h1>Initial</h1>
<p>The header above and this paragraph is inside a DIV element, The DIV element has the color property set to "red". The header element has its color property set to "initial", which in this case is "black".</p>
</div>
<p><b>Note:</b> The "initial" keyword is not supported in Internet Explorer 11 and earlier versions, or in Opera 15 and earlier versions.</p>
</body>
</html>
결론
모든 값에 color: green을 주어도 black을 지켜냅니다.
뭐든지 기초 값을 줍니다.
새로 알게 된 사실은 하위 요소라고 생각했던 div의 값 보다 *의 힘이 더 세다는 것입니다.
* 이라서 div 밑의 요소까지 포함하는가 봅니다.
'웹 프로그래밍' 카테고리의 다른 글
| [JS] JSON 형식을 KEY 값으로 정렬하기 (0) | 2020.05.19 |
|---|---|
| [JS] Scroll Down, 스크롤 제일 하단으로 움직이기 animate() (0) | 2020.05.16 |
| [JS] var, let, const 비교, 차이 (0) | 2020.05.13 |
| [JS] input[type=input] 일 때, 글자 수 제한 (0) | 2020.05.07 |
| [JS] 체크박스 전체선택,해제 로직 만들기 (회원가입,마케팅 약관동의, 이용약관) (12) | 2020.04.19 |
댓글