object-fit과 이미지최적화, iframe

1. object-fit

object-fit을 이용하면 background-img로 넣지 않고, img 태그로도 배경 이미지로 활용할 수 있다.

부모요소 안에 이미지를 넣고, 부모요소에 witdh, height 지정.

img의 사이즈는 inherit로 부모와 동일하게 맞춰준다.

그 후 object-fit: cover로 사이즈를 맞추고, 위치조정이 필요하다면 object-position을 이용하면 됨!

 

영상을 백그라운드로 사용할 경우에도 마찬가지.

* 참고로 영상을 백그라운드로 사용할 땐 혹시라도 재생이 안 될 경우를 대비해서 대신해서 보여줄 포스터 이미지를 등록해야 한다.

<video src="비디오 경로" poster="포스터 이미지 경로">

 

 

 

2. 이미지최적화

tinypnp라는 사이트에서 이미지 최적화해줌!

jpg보다 png가 더 용량 많이 줄어들고, 이미지 손상도 적음.

 

 

 

3. iframe

iframe 쓸 일 없다고 생각했는데,

모바일 화면을 목업으로 보여줄 때 사용하면 좋을 것 같다!