티스토리 뷰
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' 카테고리의 다른 글
| [Tailwind CSS] 전역 폰트 적용 (@import must precede all other statements (besides @charset or empty @layer)) (0) | 2024.09.04 |
|---|---|
| [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 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 코드잇스프린트
- 프론트엔드
- 동기
- 객체
- js
- 코드잇 스프린트
- 배열
- 비제어 컴포넌트
- map
- arguments
- html
- 제어 컴포넌트
- 비동기
- Git
- CSS
- 취업까지달린다
- react
- innerhtml
- currentTarget
- hydrationboundary
- Target
- 리액트
- 스프린트프론트엔드6기
- Next.js
- 중급 프로젝트
- GitHub
- tanstackquery
- javascript
- 유사배열객체
- rest parameter
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함