all: unset 또는 unset, inherit, initial

unset 키워드 는 속성을 기본 상태로 되돌리거나 상속된 속성을 제거합니다. 즉, 상속되는 속성의 경우 부모의 스타일을 상속받지 않고, 사용자 에이전트 스타일(브라우저의 기본 스타일)로 돌아갑니다. 상속이 없는 경우 초기값(브라우저가 기본으로 지정한 값)으로 돌아갑니다.

 

button {
    all: unset;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

 예제에서는 all: unset;을 통해 버튼의 브라우저 기본 스타일을 없앤 후, 원하는 스타일로 다시 지정했습니다. 이제 버튼은 브라우저마다 달라지는 기본 스타일을 가지지 않고, 지정된 스타일만 적용받습니다.

 

비교

• all: unset;: 상속되는 속성은 상속하고, 상속되지 않는 속성은 초기값으로 설정합니다.
• all: inherit;: 모든 속성을 부모 요소에서 상속받습니다.
• all: initial;: 모든 속성을 초기값으로 설정합니다.