CSS 작업하다 보면 이런 경험 한 번쯤 있으실 거예요. 부모 요소나 프레임워크에서 특정 스타일(예: font-size, margin, padding)이 이미 적용되어 있는데, 내가 작업하는 특정 요소에만 이 스타일을 완전히 초기 상태로 돌리고 싶을 때 말이죠. initial이나 unset으로는 원하는 대로 안 될 때도 있고, 하나하나 0이나 none으로 설정하자니 귀찮고 실수할까 봐 걱정될 때가 있습니다.

이럴 때 구세주처럼 등장하는 키워드가 바로 revert입니다!

revert 키워드는 해당 CSS 속성을 브라우저의 기본(User-Agent stylesheet) 값으로 되돌리거나, 상속된 속성의 경우 부모의 값으로 되돌리는 것이 아니라, 아예 해당 속성이 존재하지 않았던 것처럼 원래의 캐스케이드(Cascade) 규칙에 따라 계산된 값으로 되돌려 줍니다. 좀 어렵죠? 쉽게 말해, 현재 적용된 모든 스타일을 무시하고 "야, 이 속성 처음부터 없었던 걸로 치고 다시 계산해봐!" 라고 명령하는 것과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS revert 예시</title>
    <style>
        body {
            font-family: sans-serif;
            margin: 20px;
        }

        /* 외부 라이브러리나 부모 요소에서 적용된 스타일이라고 가정 */
        .container {
            font-size: 20px; /* 큰 글자 크기 */
            padding: 30px;
            border: 1px solid blue;
        }

        /* 특정 p 태그에만 스타일을 초기화하고 싶을 때 */
        .container p.reset-me {
            font-size: revert; /* 상위 .container의 font-size를 무시하고 원래대로 */
            padding: revert;   /* 상위 .container의 padding을 무시하고 원래대로 */
            border: revert;    /* 상위 .container의 border를 무시하고 원래대로 */
            margin-left: revert; /* 왼쪽 여백도 혹시 모를 상속을 무시하고 원래대로 */
        }

        /* 특정 링크의 색상을 원래 브라우저 기본값으로 */
        .special-link {
            color: purple;
            text-decoration: underline;
        }

        .special-link.revert-color {
            color: revert; /* purple을 무시하고 파란색으로 돌아감 */
        }
    </style>
</head>
<body>

    <h1>revert 키워드 활용 팁</h1>

    <div class="container">
        <p>이 문단은 부모 컨테이너의 스타일을 상속받습니다.</p>
        <p class="reset-me">
            이 문단은 텍스트 크기, 패딩, 보더가 부모의 스타일을 무시하고 **`revert`** 됩니다.
            브라우저 기본값이나 원래 캐스케이드 규칙으로 돌아간 것을 확인해보세요.
        </p>
    </div>

    <hr>

    <p>
        <a href="#" class="special-link">이 링크는 보라색입니다.</a><br>
        <a href="#" class="special-link revert-color">이 링크는 `revert`를 통해 원래 파란색으로 돌아갔습니다.</a>
    </p>

</body>
</html>

대부분의 최신 브라우저(Chrome, Firefox, Safari, Edge)에서 revert 키워드를 잘 지원합니다. 하지만 혹시 모를 하위 브라우저 호환성을 고려해야 한다면 initial이나 unset과 함께 사용하거나 폴백(fallback) 스타일을 고려하는 것이 좋습니다.

revert 키워드를 잘 활용하면 복잡한 CSS를 다룰 때 스타일 충돌을 해결하고, 원하는 대로 요소를 깔끔하게 초기화하는 데 큰 도움을 받을 수 있을 거예요.