CSS의 contain 속성은 어떤 문제를 해결하며 성능 최적화에 어떻게 도움이 되나요?

contain은 “이 요소의 변화가 바깥 영역에 영향을 주지 않는다”는 힌트를 브라우저에 주는 속성입니다. 브라우저는 이 정보를 바탕으로 layout, paint, style 계산 범위를 줄일 수 있습니다.

대표 값은 다음과 같습니다.

• contain: layout: 내부 레이아웃 변경이 외부 레이아웃에 영향을 주지 않도록 제한
• contain: paint: 요소 바깥으로 그려지는 것을 제한
• contain: size: 내부 콘텐츠가 요소 크기 계산에 영향을 주지 않도록 처리
• contain: content: layout, paint, style을 묶은 실무형 조합

카드 리스트, 위젯, 독립적인 사이드바처럼 내부 변화가 주변 레이아웃을 흔들 필요가 없는 UI에 적용할 수 있습니다.

.dashboard-card {
  contain: content;
}

주의할 점도 있습니다. paint는 overflow로 바깥에 표시되는 툴팁이나 드롭다운을 잘라버릴 수 있고, size는 자동 높이 계산이 필요한 콘텐츠에 맞지 않을 수 있습니다. 그래서 성능 최적화 목적이라도 컴포넌트의 시각적 요구사항을 먼저 확인한 뒤 좁게 적용하는 것이 좋습니다.