Atomic Habits

[CSS] inherit, initial 이란? 본문

IT/HTML-CSS

[CSS] inherit, initial 이란?

체계성 2022. 7. 12. 11:54

https://emessell.tistory.com/154

 

[CSS] inherit, initial 이란?

크롬에서 css를 수정하다 보면 자동완성으로 inherit, initial이 자주 보입니다. 처음엔 몰랐지만 키보드 화살표로 돌려가며 써보니 가끔 유용할 때가 있어서 한번 알아 봤습니다. 1. inherit inherit은 부

emessell.tistory.com

 

크롬에서 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 밑의 요소까지 포함하는가 봅니다.

'IT > HTML-CSS' 카테고리의 다른 글

테이블 내 긴 문자열에 대한 생략기호(...) 적용  (0) 2022.07.14
[HTML] table td % 비율에 관하여  (1) 2022.07.12
<Input> 요소의 클릭 유효 범위 확장 - <lable for="id">  (0) 2022.05.29
addEventListener 함수 ‘false’ / 버블링 / 캡쳐링 / 이벤트 위임  (0) 2022.05.29
fetch사용시 유의 사항 (json() 함수 사용하기)  (0) 2022.05.25
'IT/HTML-CSS' Related Articles more
Comments