CSS의 all 속성은 요소에 적용된 모든 CSS 속성을 한 번에 재설정할 수 있는 강력한 단축 속성입니다. 개별 속성을 하나씩 지정하지 않고도 initial, inherit, unset 세 가지 값 중 하나를 사용해 스타일을 일괄 처리할 수 있습니다.
all 속성의 주요 값
- initial: 해당 요소의 모든 속성을 CSS 기본값으로 되돌립니다.
- inherit: 부모 요소로부터 모든 속성 값을 상속받습니다.
- unset: 상속 가능한 속성은 inherit처럼, 상속 불가능한 속성은 initial처럼 동작합니다.
사용 예제
아래 코드는 all: inherit;를 사용하여 자식 요소가 부모(html)의 글자 색상을 그대로 상속받도록 구현한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html {
color: blue;
}
#demo {
background-color: yellow;
color: red;
all: inherit;
}
</style>
</head>
<body>
<h2>CSS all 속성</h2>
<div id = "demo">데모 텍스트입니다.</div>
</body>
</html>실행 결과 설명
위 예제에서 #demo 요소에는 노란색 배경과 빨간색 글자가 지정되어 있지만, all: inherit; 선언으로 인해 이전에 설정된 모든 속성이 무시되고 부모 요소인 html의 파란색 글자 색상이 상속됩니다. 이처럼 all 속성은 서드파티 위젯이나 라이브러리 스타일을 초기화하거나, 특정 영역의 스타일을 깔끔하게 리셋해야 할 때 매우 유용하게 활용됩니다.