LEVEL UP

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Date.

inherit

https://developer.mozilla.org/ko/docs/Web/CSS/inherit

부모 요소로부터 해당 속성의 값을 받아서 사용합니다.

예제1

span{color:#fff; background:#000;}

<p>Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:blue">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:green">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>

결과

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

예제2

.t1 span{color: inherit;}
span{color:#fff; background:#000;}

<p class="t1">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:blue">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>
<p style="color:green">Lorem ipsum dolor sit, amet <span>consectetur</span> adipisicing elit.</p>

결과

Lorem ipsum dolor, sit amet consectetur adipisicing elit.

initial

https://developer.mozilla.org/ko/docs/Web/CSS/initial

속성의 기본값(초깃값)을 요소에 적용합니다.

기본값은 브라우저가 지정합니다.

예제

p{color:tomato}
em, i{color: initial;}

<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. 
  <em>Nesciunt accusantium, </em>
  minus delectus laudantium architecto 
  <i>autem molestias labore ut placeat </i>
  distinctio assumenda eius explicabo possimus, 
  deserunt veritatis iste eaque ipsam beatae?
</p>

결과

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt accusantium, minus delectus laudantium architecto autem molestias labore ut placeat distinctio assumenda eius explicabo possimus, dieserunt veritatis iste eaque ipsam beatae?

상속 되는 속성

z-index	X
position	X
top/right/bottom/left	X
overflow	X
float	X
opacity	⭕
display	X
width/height	X
margin	X
padding	X
border	X
box-sizing	X
font	⭕
color	⭕
line-height	⭕
text-align	⭕
text-decoration	X
white-space	⭕
background	X
vertical-align	X
visibility	⭕

참고 : https://poiemaweb.com/css3-inheritance-cascading

inherit

initial

상속 되는 속성

티스토리툴바