CSS unset 키워드 – 해당 속성의 이전 선언값 해제

`unset`

unset은
해당 속성이 부모로부터 자연스럽게 상속받는 경우 속성을 상속된 값으로 재설정하고, 그렇지 않은 경우 초깃값으로 재설정하는 CSS 키워드입니다.

다르게 표현하자면 다음과 같습니다.

해당 속성이 상속 가능한 속성일 때는 inherit 키워드처럼 동작하고,
상속되지 않는 속성일 때는 initial 키워드처럼 동작합니다.

이 키워드는 CSS 캐스케이딩 과정에서 결정된 이전 선언 값을 무시한 상태(unset, 설정 해제)와 동일하게 작동하며, 속성에 적합한 값으로 재설정합니다.

해당 속성이 상속 가능한 속성일 때

상속 가능한 속성이란 요소에 해당 속성의 값을 명시하지 않았을 때 부모 요소로부터 자연스럽게 값을 물려받는 속성들을 말합니다.

예를 들어, 텍스트의 글자색을 설정하는 color 속성이 이에 해당합니다.
이러한 속성들은 해당 속성의 값을 명시하지 않았을 때 기본적으로 부모 요소에서 설정된 값을 자식 요소가 자동으로 상속받도록 설계되어 있습니다.

예제: `unset`을 사용한 상속 가능한 속성

HTML

<p>이 텍스트는 빨간색입니다.</p>
<p><strong>부모 요소인 p 요소에 지정한 빨간색을 상속받아 strong 텍스트도 빨간색입니다.</strong></p>
<div class="blue">
    <p>부모 요소를 파란색으로 지정했지만, p 요소에 명시적으로 지정한 빨간색이 적용되어 이 텍스트도 빨간색입니다.</p>
</div>
<div class="green">
    <p>p 요소에 지정한 unset이 적용되어 부모 요소에 지정한 녹색을 상속받아 이 텍스트는 녹색입니다.</p>
</div>

CSS

p {color: red;} /* 모든 p 요소에 빨간색 텍스트 적용 */
.blue {color: blue;} /* .blue 클래스를 가진 요소에 파란색 텍스트 적용 */
.green {color: green;} /* .green 클래스를 가진 요소에 녹색 텍스트 적용 */
.green p {color: unset;} /* .green 클래스 내 p 요소에 unset 적용 */

unset 키워드는 해당 속성이 상속 가능한 속성일 때 inherit 키워드처럼 동작합니다.

해당 속성이 상속되지 않는 속성일 때

상속되지 않는 속성이란 상속 가능한 속성이 아닌 속성을 말합니다.

요소에 해당 속성의 값을 명시하지 않았을 때 부모 요소로부터 자연스럽게 값을 물려받지 않는 속성들입니다.
예를 들어, 요소의 테두리를 설정하는 border 속성이 이에 해당합니다.

예제: `unset`을 사용한 상속되지 않는 속성

HTML

<p>테두리가 빨간색입니다.</p>
<p>
    부모 요소인 <code>p</code>의 테두리는 빨간색입니다.
    <strong>
        <code>strong</code> 요소는 부모 요소인 <code>p</code> 요소에 지정한 테두리를 상속받지 않습니다.
    </strong>
</p>
<div class="blue">
    부모 요소의 테두리를 파란색으로 지정했습니다.
    <p>
        부모 요소의 테두리는 빨간색으로 지정되었지만,
        <br>
        <code>p</code> 요소에 지정한 빨간색 테두리가 적용됩니다.
    </p>
</div>
<div class="green">
    부모 요소의 테두리를 녹색으로 지정했습니다.
    <p>
        <code>p</code> 요소에 지정한 <code>unset</code>이 적용되어
        <br>
        초깃값인 현재 글자색(대부분의 브라우저에서 검정색)의 테두리가 적용됩니다.
        <br>
    </p>
</div>

CSS

p {border: 1px solid red;}
.blue {border: 2px solid blue;}
.green {border: 2px solid green;}
.green p {border-color: unset;} /* 테두리 색상을 unset으로 설정 */

unset 키워드는 해당 속성이 상속되지 않는 속성일 때 initial 키워드처럼 동작합니다.

브라우저 호환성

unset 키워드의 브라우저 호환성
키워드	데스크탑 Chrome	데스크탑데스크탑 Edge	데스크탑 Firefox	Safari
`unset`	41	13	27	9.1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

unset 키워드의 명세서 사양
명세서 사양
`unset`	CSS Cascading and Inheritance Level 4 #inherit-initial

참고문헌

MDN - unset

unset