AAtomic CSS

contain

성능 최적화를 위한 격리(containment) 속성입니다. ctnp는 페인트 격리, ctnst는 최대 격리를 적용합니다.

클래스 목록

클래스CSS설명
ctnncontain: none격리 없음 (기본값)
ctnccontain: contentlayout + paint 격리
ctnscontain: size크기 격리 (자식이 부모 크기에 영향 없음)
ctnlcontain: layout레이아웃 격리
ctnpcontain: paint페인트 격리 (자식이 경계 밖으로 그려지지 않음)
ctnstcontain: strictsize + layout + paint 전체 격리

사용 예시

<!-- 독립적인 카드 위젯 -->
<div class="ctnc p2rem bg18181B br8px">
  <h3>위젯 제목</h3>
  <p>이 카드의 변경은 외부에 영향을 주지 않습니다.</p>
</div>

<!-- 성능 최적화가 필요한 긴 리스트 아이템 -->
<div class="ctnst h10rem oh">
  <p>완전히 격리된 요소</p>
</div>

언제 뭘 쓸까?

상황추천
독립적인 위젯/카드ctnc
오프스크린 요소 최적화ctnst
overflow: hidden 대체ctnp
레이아웃 재계산 방지ctnl
overflowdisplay