CSS contain 속성 정리

https://css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/

.foo {
	
   contain: size; 
  	
     /* foo 요소의 자식들이 foo 의 size 를 키울수없음 */
   
}

.foo {
	
    contain: layout; 
    
  	/* 
    
    	외부 요소가 foo 요소의 layout 에 영향을 주지않음, 또는  
    	foo 요소가 외부 요소의 layout 에 영향을 주지않음을 브라우져에게 알려줌.
    
    */

}

.foo {
	
    contain: paint;
	
    /* 
    
    	foo 요소의 자식 요소들이 foo 요소 밖으로 빠져 나갔을때 그려지지않음. 
        overflow hidden 과 비슷함.
        
        예를 들어, foo 요소의 자식 요소가 -100% 로 밖으로 나가있다면,
        브라우저가 contain paint 를 보고 이 자식 요소를 랜더링에서 곧바로 skip 함.
        또는 foo 자체가 -100% 으로 바깥으로 나가있다면, 이 역시 본인포함 후손들까지 skip 함.
        또는 foo 요소위로 다른 무언가가 덮고 있어서 foo 를 가렸다면, 
        이 역시 foo 는 랜더링되지않음.
        
    */

}

.foo {

	contain: strict; /* layout paint size 의 shorthand */

}

.foo {
	
    contain: content; /* layout paint 의 shorthand */

}