CSS all 속성 – 모든 속성을 재설정하기

정의 및 사용 방법

all 속성을 사용하면 모든 속성을 한 번에 initial, inherit, unset, revert, 또는 revert-layer 값으로 재설정할 수 있습니다.

단, 모든 속성에서 unicode-bidi, direction, CSS 사용자 지정 속성은 제외됩니다.

all 속성은 특정 요소에 적용된 스타일을 한 번에 초기화할 때 특히 유용합니다.

기본 예제

HTML

<div class="parent">
    <button>커스텀 버튼</button>
    <button class="initial-button">initial 버튼</button>
    <button class="inherit-button">inherit 버튼</button>
    <button class="unset-button">unset 버튼</button>
    <button class="revert-button">revert 버튼</button>    
</div>

CSS

.parent { /* 부모 요소의 스타일 */
    padding: 50px;
    border: 2px dashed blue;
    color: green;
    font-size: 40px;
}
button { /* 커스텀 버튼 스타일 */
    border: 2px solid red;
    border-radius: 0.3em;
    padding: 0;
    background-color: orange;
    color: white;
    font-size: 20px;
}
.initial-button {
    all: initial;
}
.inherit-button {
    all: inherit;
}
.unset-button {
    all: unset;
}
.revert-button {
    all: revert;
}

구성 속성

all 속성은 unicode-bidi, direction, CSS 사용자 지정 속성을 제외한 모든 CSS 속성을 한 번에 지정하는 단축 속성(shorthand property)입니다.

형식 구문

구문

값

all 속성의 값으로는 다음의 키워드를 사용할 수 있습니다.
그 밖의 값은 유효하지 않으니 주의하세요.

all 속성 값
`initial`	CSS initial 키워드 – 해당 속성의 초깃값을 나타내는 값 참조
`inherit`	CSS inherit 키워드 – 부모 요소의 계산된 속성 값 참조
`unset`	CSS unset 키워드 – 해당 속성의 이전 선언값 해제 참조
`revert`	CSS revert 키워드 – 속성에 변경이 없었다면 가졌을 값 참조
`revert-layer`	`revert`와 달리, Author Origin 내 이전 cascade 레이어에서 스타일 값을 되돌립니다.

형식 정의

all 속성의 형식 정의
초깃값	실제로 의미 있는 '초깃값'이 없습니다. 즉, `all` 속성은 본질적으로 다른 속성의 값을 '설정'하는 도구일 뿐, 그 자체로는 스타일을 제어하는 고유한 값이 없기 때문에 실질적인 초깃값은 의미가 없습니다.
적용 요소	모든 요소
상속	아니오
애니메이션	단축된 각 개별 속성값에 따릅니다.

브라우저 기본 스타일로 되돌리기

all: revert는 특정 요소에 적용했던 스타일을 모두 다시 브라우저 기본 스타일로 되돌리기 위해 사용될 때 매우 유용합니다.
다음은 <button>에 웹 페이지 개발자가 지정한 커스텀 스타일을 all: revert로 모두 다시 브라우저 기본 스타일로 되돌리는 예제입니다.

CSS

button {  /* 커스텀 버튼 스타일 */
    border: 2px solid red;
    border-radius: 0.3em;
    padding: 0.3em;
    background-color: orange;
    color: white;
}
.revert-button {
    all: revert; /* 스타일을 모두 다시 브라우저 기본 스타일로 되돌리기 */
}