AAtomic CSS

contain

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스CSS설명
ctnncontain: none격리 없음 (기본값)
ctnccontain: contentlayout + paint 격리
ctnscontain: size크기 격리 (자식이 부모 크기에 영향 없음)
ctnlcontain: layout레이아웃 격리
ctnpcontain: paint페인트 격리 (자식이 경계 밖으로 그려지지 않음)
ctnstcontain: strictsize + layout + paint 전체 격리

사용 예시

<!-- Independent card widget -->
<div class="ctnc p2rem bg18181B br8px">
  <h3>Widget title</h3>
  <p>Changes to this card do not affect the outside.</p>
</div>

<!-- Long list item requiring performance optimization -->
<div class="ctnst h10rem oh">
  <p>Fully isolated element</p>
</div>

언제 뭘 쓸까?

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">상황추천
독립적인 위젯/카드ctnc
오프스크린 요소 최적화ctnst
overflow: hidden 대체ctnp
레이아웃 재계산 방지ctnl
overflowdisplay