CSS initial, inherit, unset, revert, all 개념 정리
2025. 3. 13. 21:36ㆍWeb Frontend
CSS 속성의 상속과 초기값은 꽤 복잡해 보일 수 있지만, 몇 가지 규칙과 예외를 이해하면 명확해집니다. 모든 경우의 수를 따져보고, 애매하게 느껴지는 부분을 짚어보겠습니다.
1. 상속 (Inheritance)
상속되는 속성:
- 주로 텍스트 관련 속성들이 상속됩니다. (예:
color,font-family,font-size,line-height,text-align,visibility,list-style) - 부모 요소에 설정된 값이 자식 요소에게 자동으로 적용됩니다.
- 자식 요소에서 해당 속성을 명시적으로 지정하지 않으면 상속된 값을 사용합니다.
- 주로 텍스트 관련 속성들이 상속됩니다. (예:
상속되지 않는 속성:
- 대부분의 레이아웃, 박스 모델 관련 속성들은 상속되지 않습니다. (예:
width,height,margin,padding,border,background,display,position) - 각 요소는 독립적으로 이러한 속성 값을 가집니다.
- 부모 요소의 레이아웃 설정이 자식 요소에게 직접적인 영향을 주지 않습니다.
- 대부분의 레이아웃, 박스 모델 관련 속성들은 상속되지 않습니다. (예:
inherit키워드:- 상속되지 않는 속성도
inherit키워드를 사용하면 강제로 상속받을 수 있습니다. property: inherit;형태로 사용합니다.
- 상속되지 않는 속성도
2. 초기값 (Initial Value)
모든 CSS 속성은 초기값을 가집니다.
- 초기값은 속성마다 다릅니다. (예:
color의 초기값은 브라우저에 따라 다를 수 있지만 보통black,display의 초기값은inline,width의 초기값은auto) - 요소에 특정 속성이 명시적으로 지정되지 않았을 때 사용되는 기본값입니다.
- 상속되는 속성의 경우, 루트 요소(
<html>)에는 초기값이 사용되고, 그 하위 요소들은 상속을 받습니다. - 상속되지 않는 속성의 경우, 모든 요소는 명시적으로 지정되지 않으면 초기값을 사용합니다.
- 상속되는 속성의 경우, 루트 요소(
- 초기값은 속성마다 다릅니다. (예:
initial키워드:initial키워드를 사용하면 속성을 명시적으로 초기값으로 설정할 수 있습니다.property: initial;형태로 사용합니다.- 상속되는 속성이든, 상속되지 않는 속성이든 상관없이 초기값으로 설정합니다.
3. unset 키워드
unset키워드는 속성의 상속 여부에 따라 다르게 동작합니다.- 상속되는 속성:
inherit키워드와 동일하게 동작합니다. (부모로부터 값을 상속받음) - 상속되지 않는 속성:
initial키워드와 동일하게 동작합니다. (속성의 초기값으로 설정) property: unset;형태로 사용합니다.
- 상속되는 속성:
4. 모든 경우의 수 정리 (표)
| 속성 종류 | 명시적 값 지정 | inherit 사용 |
initial 사용 |
unset 사용 |
비고 |
|---|---|---|---|---|---|
| 상속되는 속성 | 지정된 값 사용 | 부모 값 상속 | 초기값 사용 | 부모 값 상속 | color, font-family 등 |
| 상속되지 않는 속성 | 지정된 값 사용 | 부모 값 상속 | 초기값 사용 | 초기값 사용 | width, height, margin 등 |
| (모든 속성) | - 상속되는 속성에서 unset은 inherit와 같습니다.- 상속되지 않는 속성에서 unset은 initial과 같습니다.- 루트 요소( <html>)는 상속받을 부모가 없으므로, 상속되는 속성이라도 초기값을 사용합니다. |
5. 애매하게 느껴지는 부분 명확히 하기
- 상속은 "값"이 전달되는 것이 아니라, "속성의 적용 방식"이 전달되는 개념: 부모 요소의 속성 값이 자식 요소에게 복사되는 것이 아니라, 자식 요소가 해당 속성을 명시적으로 지정하지 않았을 때 부모의 계산된 값을 참조하는 방식입니다.
initialvs. 브라우저 기본 스타일시트:initial은 CSS 명세에 정의된 속성의 초기값입니다.- 브라우저 기본 스타일시트는 브라우저가 자체적으로 요소에 적용하는 스타일입니다. (예:
<h1>태그에 특정font-size를 주는 것) initial은 브라우저 기본 스타일시트보다 우선순위가 낮습니다. 즉, 브라우저 기본 스타일시트가 있으면initial값은 무시됩니다.
- user-agent stylesheet에 관련해서는 initial keyword의 값이 덮어씌워질 수 있습니다.
All keyword
- CSS 최신 스펙에서는
all키워드를 사용하여 모든 속성을 한번에 초기화 할 수 있습니다.all: initial;all: inherit;all: unset;all: revert;- revert는 user-agent stylesheet를 따릅니다.
6. 추가적인 고려 사항 (Revert)
revert키워드:revert키워드는 사용자 스타일 시트, 작성자 스타일 시트 등 스타일의 출처에 따라 다른 동작을 합니다. 좀 더 복잡한 개념이므로 여기서는 간단히 소개만 합니다.- 작성자 스타일 시트 (Author Stylesheet): 웹 페이지 제작자가 작성한 CSS.
- 사용자 스타일 시트 (User Stylesheet): 사용자가 브라우저 설정을 통해 지정한 CSS.
- 사용자 에이전트 스타일 시트 (User-Agent Stylesheet): 브라우저의 기본 CSS.
revert의 동작 방식:- 작성자 스타일 시트에서 사용: 이전 단계의 스타일 시트(사용자 또는 사용자 에이전트)에서 설정된 값으로 되돌립니다.
- 사용자 스타일 시트에서 사용: 사용자 에이전트 스타일 시트의 값으로 되돌립니다.
- 사용자 에이전트 스타일 시트에서 사용: 해당 속성의 초기값으로 되돌립니다.
property: revert;형태로 사용
도움이 되었기를 바랍니다! 여전히 궁금한 점이 있다면 언제든지 다시 질문해주세요.
'Web Frontend' 카테고리의 다른 글
| npm install 안 될 경우 (0) | 2025.03.14 |
|---|---|
| 퍼블리셔 프로젝트의 막바지에서 느낌점 (0) | 2024.08.02 |
| javascript 이벤트 핸들러와 메모리/성능 최적화 방법 (0) | 2024.03.26 |
| 자연어 챗봇 만들때 Claude3 haiku 모델 강력 추천 (0) | 2024.03.24 |
| [php] firebase의 realtime database 콘솔에서 rule의 auth 인식 불가 문제. (0) | 2024.02.10 |