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를 다룰 때 스타일 충돌을 해결하고, 원하는 대로 요소를 깔끔하게 초기화하는 데 큰 도움을 받을 수 있을 거예요.
댓글 1개
보통 none이나 !important를 많이 썼는데 하나 배워갑니다 : )
게시판 목록
퍼블리셔팁
질문은 상단의 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 1097 | CSS | 8년 전 | 2185 | ||
| 1096 | CSS | 8년 전 | 2104 | ||
| 1095 | CSS | 8년 전 | 3596 | ||
| 1094 | CSS | 8년 전 | 2281 | ||
| 1093 | CSS | 8년 전 | 1503 | ||
| 1092 | CSS | 8년 전 | 1793 | ||
| 1091 | CSS | 8년 전 | 1957 | ||
| 1090 | CSS | 8년 전 | 1920 | ||
| 1089 | HTML | 8년 전 | 4417 | ||
| 1088 | CSS | 8년 전 | 1478 | ||
| 1087 | CSS | 8년 전 | 1605 | ||
| 1086 | CSS | 8년 전 | 1512 | ||
| 1085 | CSS | 8년 전 | 1533 | ||
| 1084 | CSS | 8년 전 | 1251 | ||
| 1083 | CSS | 8년 전 | 1062 | ||
| 1082 | CSS | 8년 전 | 2159 | ||
| 1081 | CSS | 8년 전 | 1961 | ||
| 1080 | CSS | 8년 전 | 1921 | ||
| 1079 | CSS | 8년 전 | 1971 | ||
| 1078 | CSS | 8년 전 | 1665 | ||
| 1077 | CSS | 8년 전 | 1687 | ||
| 1076 | CSS | 8년 전 | 2029 | ||
| 1075 | CSS | 8년 전 | 1883 | ||
| 1074 | CSS | 8년 전 | 1697 | ||
| 1073 | CSS | 8년 전 | 1543 | ||
| 1072 | CSS | 8년 전 | 1627 | ||
| 1071 | CSS | 8년 전 | 2026 | ||
| 1070 | CSS | 8년 전 | 1608 | ||
| 1069 | CSS | 8년 전 | 1845 | ||
| 1068 | CSS | 8년 전 | 1640 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기