contain 속성은 CSS에서 렌더링 최적화를 위한 도구로 특정 요소가 레이아웃 계산, 스타일 계산, 페인팅 등의 영향을 자신 내부로만 제한하도록 설정할 수 있다.
- 해당 요소 내부 변경이 외부에 영향을 주지 않도록 차단하는 것
.card {
contain: layout style;
}이 속성을 사용하면 브라우저가 이 요소를 격리된 박스처럼 다루기 때문에 Reflow, Repaint 범위를 줄여서 성늘을 개선할 수 있다.
| 값 | 설명 |
|---|---|
layout | 레이아웃 계산을 요소 내부로 제한 |
style | 스타일 계산을 내부로 제한 |
paint | 페인팅 영역을 내부로 제한 |
size | 요소의 크기가 자식에 의해 변경되지 않음 |
strict | layout, style, paint 포함한 완전 격리 |
content | strict + size, 가장 강력한 격리 수준 |
언제쓰면 좋을까?
- 가상 스크롤 구현시 : 성능 개선을 위해 렌더링 영역 분리
- 무한 리스트, 카드 UI : 각 아이템이 독립적으로 렌더링되도록 설정
- 복잡한 컴포넌트 내부 : DOM 변화가 외부 레이아웃에 영향을 주지 않도록 제한
주의 사항
- contain:size 는 내부 콘텐츠가 넘쳐도 부모의 크기를 늘리지 않음 -> 글이 넘치는 경우 잘려서 보일 수 있다. 스크롤/오버플로우 필요
- 너무 많이 사용하면 원하지 않는 레이아웃 고립이 발생할 수 있다.
-> 자식 요소가 커지면 부모 요소가 커져야 정상인데 contain을 쓰면 부모가 알지 못한다. 결과적으로 레이아웃이 깨지거나 내용이 잘릴 수 있다.
:)