AAtomic CSS

all

요소의 모든 CSS 속성을 한꺼번에 초기화합니다. 외부 스타일이나 상속된 스타일을 완전히 리셋하고 싶을 때 사용하는 강력한 속성입니다.

클래스 목록

클래스CSS설명
alliall: initial모든 속성을 CSS 명세의 초기값으로 리셋
allinhall: inherit모든 속성을 부모로부터 상속
allunall: unset상속 속성은 inherit, 비상속 속성은 initial
allrall: revert브라우저 기본 스타일시트 값으로 복원

값 비교

값상속 속성비상속 속성
initial초기값 (상속 무시)초기값
inherit부모 값 상속부모 값 상속 (강제)
unset부모 값 상속초기값
revert브라우저 기본값브라우저 기본값

사용 예시

<!-- Reset external library styles -->
<div class="third-party-widget alli">
  <p class="db cFAFAFA fs16px">All styles reset, only Atomic CSS applied</p>
</div>

<!-- Restore browser default styles -->
<div class="allr">
  <h1>Browser default h1 style applied</h1>
  <p>Browser default p style applied</p>
</div>

<!-- Fully inherit parent styles -->
<div class="cFAFAFA fs16px">
  <span class="allinh">Inherits all parent color, font-size, etc.</span>
</div>

팁 & 주의사항

주의해서 사용

all은 모든 속성을 리셋하므로 display, position 등도 초기화됩니다. 리셋 후 필요한 속성을 다시 설정해야 합니다.

revert가 가장 안전

allr(revert)는 브라우저 기본 스타일로 돌아가므로 div는 block, span은 inline을 유지합니다. 가장 예측 가능한 결과를 얻을 수 있습니다.

displayvisibilitymisc