CSS의 all 속성을 사용하면 특정 요소에 적용된 모든 속성을 한 번에 재설정할 수 있습니다. 이 속성은 개별 속성을 하나씩 초기화할 필요 없이 initial, inherit, unset 세 가지 값 중 하나를 지정하여 전체 스타일을 일괄 처리합니다.
all 속성의 주요 값
- initial: 해당 요소의 모든 속성을 CSS 기본값(초기값)으로 되돌립니다.
- inherit: 부모 요소로부터 모든 속성 값을 상속받습니다.
- unset: 상속 가능한 속성은 부모에서 상속하고, 그렇지 않은 속성은 기본값으로 설정합니다.
예제
다음 코드를 실행하여 CSS all 속성이 실제로 어떻게 동작하는지 확인해 보세요.
<!DOCTYPE html>
<html>
<head>
<style>
html {
color: blue;
}
#demo {
background-color: yellow;
color: red;
all: inherit;
}
</style>
</head>
<body>
<h2>CSS all property</h2>
<div id = "demo">This is demo text.</div>
</body>
</html>예제 설명
위 예제에서 #demo 요소에는 노란색 배경과 빨간색 글자가 지정되어 있지만, 마지막에 선언된 all: inherit; 때문에 이전에 정의된 모든 속성이 무시되고 부모 요소(html)의 color: blue 값을 상속받습니다. 그 결과 데모 텍스트는 빨간색이 아닌 파란색으로 표시됩니다.
이처럼 all 속성은 서드파티 위젯이나 임베드 콘텐츠의 스타일 충돌을 방지하거나, 요소의 스타일을 깔끔하게 초기화해야 할 때 매우 유용하게 활용됩니다.