CSS revert 키워드로 손쉽게 스타일 초기화하기 정보
CSS CSS revert 키워드로 손쉽게 스타일 초기화하기본문
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를 다룰 때 스타일 충돌을 해결하고, 원하는 대로 요소를 깔끔하게 초기화하는 데 큰 도움을 받을 수 있을 거예요.
2
댓글 1개
보통 none이나 !important를 많이 썼는데 하나 배워갑니다 : )