contain 속성은 CSS Containment API의 일부로, 브라우저에게 특정 요소가 외부에 미치는 영향을 제한한다고 알려주어 렌더링 성능을 최적화하는 속성이다. contain: layout style paint;는 세 가지 containment 유형을 조합한 것이다.

각 값의 의미

layout - 레이아웃 격리

• 해당 요소 내부의 레이아웃 변경이 외부 요소들에 영향을 주지 않음
• 요소의 내부 콘텐츠가 변경되어도 부모나 형제 요소의 레이아웃 재계산이 발생하지 않음

style - 스타일 격리

• CSS 카운터나 인용부호 등이 해당 요소 경계를 넘나들지 않음
• 상속되는 스타일 변경의 영향 범위를 제한

paint - 페인트 격리

• 요소의 자식들이 요소 경계 밖으로 렌더링되지 않음 (overflow: hidden과 유사)
• 요소 내부의 페인트 변경이 외부 요소의 리페인트를 트리거하지 않음

성능상 이점

.card-container {
  contain: layout style paint;
  /* 또는 간단히 */
  contain: strict; /* layout + style + paint + size를 의미 */
}

이렇게 설정하면 브라우저가 더 효율적으로 렌더링 최적화를 수행할 수 있고, 동적 컨텐츠, 특히 스크롤 성능이나 대량의 DOM 조작 시 유용하다.

사용 예시

.dynamic-widget {
  contain: layout style paint;
  /* 이 위젯 내부의 변경사항이 페이지 전체에 영향을 주지 않음 */
}

.infinite-scroll-item {
  contain: layout paint;
  /* 스크롤 성능 최적화에 유용 */
}

주로 독립적인 컴포넌트나 위젯, 무한 스크롤 아이템 등에 사용하여 전체 페이지 성능을 향상시키는 데 활용된다.

참고 자료

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_containment