목차
- inherit (상속)
- initial (초기값)
- unset (미지정)
- revert (롤백)
- revert-layer (레이어 롤백)
※ 전역속성값은 모든 속성에 공통으로 사용 가능한 값 의미.
※ selector {propertyName:전역속성값;} 구조로 사용함.
inherit (상속)
inherit 속성값은 「부모값 사용」 의미함.
- 이 값을 사용하면, 해당 요소의 속성값은 부모요소가 최종적으로 가진 그 속성의 계산된 값을 그대로 물려받음.
- 원래 CSS 규칙상 상속되지 않는 속성(margin, border 등)이라도 inherit을 지정하면 부모의 값을 강제로 가져와 사용할 수 있음.
[예제] - 상속되지 않는 border 속성을 부모로부터 강제로 상속받게 함.
.parent {
color: green; /* 상속되는 속성 */
border: 2px solid green; /* 상속되지 않는 속성 */
}
.child-inherit {
/* color는 기본적으로 상속되지만, border는 상속되지 않음 */
border: inherit; /* 부모의 2px solid green 보더를 가져옴 */
color: inherit; /* 부모의 green 색상을 가져옴 (명시적 선언) */
}
initial (초기값)
initial 속성값은 「해당 속성의 기본 초기값 사용」 의미.
- 이 값을 사용하면, 해당 CSS 속성이 CSS 표준 명세에서 정의된 원래의 초기값으로 설정됨.
- 이는 브라우저(사용자 에이전트)가 기본적으로 제공하는 스타일(예: <h1>은 크게, <a>는 파란색)과는 다를 수 있으며, 오직 CSS 명세에 정의된 값만 따름.
[예제] - color 속성을 CSS 명세상의 초기값인 black으로 설정하고, border-style의 초기값인 none을 적용.
.example-box {
color: blue; /* 일반적인 설정 */
border-style: dashed;
}
.child-initial {
color: initial; /* 글자색을 CSS 초기값인 검은색(black)으로 설정 */
border-style: initial; /* border 스타일을 CSS 초기값인 none(없음)으로 설정 */
}
unset (미지정)
unset 속성값은 "해당 속성이 상속되는 속성인지 아닌지 스스로 판단해 inheret/initial 중 어느 값 사용할지 결정함" 의미.
- 상속되는 속성 (예: color)에서는 inherit 사용. (즉, 부모의 값을 따름.)
- 상속 안 되는 속성 (예: border)에 사용되면 initial 사용. (즉, 속성 초기값 사용.)
[예제] - color (상속됨)와 border-style (상속 안됨)에 적용했을 때 각각 inherit과 initial처럼 동작하는 것을 확인.
.parent-unset {
color: red;
border-style: solid;
}
.child-unset {
/* color: 상속되는 속성이므로, inherit 처럼 동작 (red) */
color: unset;
/* border-style: 상속 안 되는 속성이므로, initial 처럼 동작 (none) */
border-style: unset;
}
revert (롤백)
revert는 "내가 설정한 값 취소하고, 브라우저/사용자 설정으로 돌아가기"를 의미함.
- 이 값은 개발자가 해당 속성에 지정한 모든 값을 무시하고, 이전 스타일 시트의 값으로 되돌립니다.
- 우선순위: 사용자 스타일 시트 > 브라우저 기본 스타일 시트 순으로 값이 있는지 확인하여 적용함.
- 만약 이 세 가지 스타일 시트 어디에도 정의된 값이 없다면, 해당 속성이 상속되는지 여부에 따라 inherit 또는 initial처럼 동작함. (대부분은 브라우저의 기본 설정 값으로 돌아가게 됨.)
[예제] - 개발자가 정의한 font-size를 무시하고 브라우저 기본값(User Agent Stylesheet)으로 되돌리기
h1 {
/* 개발자 스타일: h1 크기를 20px로 강제 설정 */
font-size: 20px;
}
.child-revert {
/* h1에 적용된 20px 설정을 무시하고, 브라우저가 원래 h1에 지정한 큰 폰트 크기로 돌아감 (롤백) */
font-size: revert;
}
revert-layer (레이어 롤백)
revert-layer는 "현재 레이어 밖의 값으로 돌아가기"를 의미함.
- 이 값은 CSS @layer 규칙을 사용하여 스타일을 계층화했을 때 사용됨.
- 현재 선언이 속한 캐스케이드 레이어 내에서 지정된 모든 값을 무시하고, 그 이전에 정의된 다른 레이어 또는 레이어 외부의 값으로 롤백함.
- 레이어를 사용하지 않는 일반적인 상황에서는 revert와 동일하게 동작함.
[예제] - @layer가 사용되었을 때, 현재 레이어의 정의를 무시하고 이전 레이어의 값으로 돌아가기.
/* Layer 1: Base Styles */
@layer base {
.box {
color: blue; /* 기본 색상 */
}
}
/* Layer 2: Theme Styles */
@layer theme {
.box {
color: red; /* 테마 색상으로 덮어쓰기 */
}
}
/* Layer 3: Component Overrides */
@layer override {
.box.reset {
/* 현재 레이어(override)의 정의를 무시하고, 바로 이전 레이어(theme)의 color: red; 값으로 돌아감. */
color: revert-layer;
}
}
최신댓글