1. initial
모든 CSS 속성에는 기본값(initial/default value)이 있다. 예를 들면 대부분의 브라우저에서 color 속성의 기본값은 black이다.
initial 속성값은 해당 속성을 기본값으로 초기화 시켜준다. 따라서 태그의 중첩이 있을때 부모 요소의 속성을 상속받지 않고 기본값으로 초기화 하고 싶은 경우 사용할 수 있다.
다음 예제를 살펴보자.
<body>
<h1>This is heading</h1>
<p>This is a paragraph.<span>This is child element!</span></p>
</body>h1 {
font-size: 2rem;
}
p {
font-size: 1.5em;
}
span{
font-size: initial;
color: tomato;
}
body 태그는 자식 요소로 h1 태그와 p 태그를 가진다.
p 태그에는 1.5em이 적용되어 있다. em은 부모 요소의 값을 기준으로 하므로 body 요소의 font-size 기준으로 값이 환산된다. 따라서 1.5em = 16px * 1.5 = 24px이 된다.
font-size는 상속가능한 속성이기 때문에 p 태그의 자식 요소인 span 태그도 24px의 폰트 사이즈를 갖을 것이다. 하지만 span 태그에 font-size: initial 속성이 선언되어 있다. 따라서 font-size의 기본값인 16px이 적용된다.
2. inherit
부모 요소의 해당 속성을 상속하는 속성이다.
모든 속성이 다 상속 가능한 것은 아니므로 상속가능한 속성인지 확인하고 사용할 필요가 있다.
'Language > CSS' 카테고리의 다른 글
| [CSS] 스크롤바 숨기기 (0) | 2024.06.06 |
|---|---|
| [CSS] a 태그 사이 공백 제거하는 법 (0) | 2024.03.20 |
| [CSS] flex 속성 정리 (flex-basis, flex-grow, flex-shrink) (0) | 2024.03.12 |
| [CSS] active와 focus의 차이 (0) | 2023.10.20 |
| [CSS] overflow (0) | 2023.07.27 |
